Skip to content

Commit

Permalink
fix s3 tree on initial load
Browse files Browse the repository at this point in the history 
Signed-off-by: Shenoy Pratik <[email protected]>
(cherry picked from commit 5dd9bc31ef5bc211cdae0633093abbeacbb92fde)
  • Loading branch information
@ps48
ps48 committed Apr 1, 2024
1 parent d5878f9 commit 9abe53f
Show file tree
Hide file tree
Showing 3 changed files with 210 additions and 1 deletion.
112 changes: 112 additions & 0 deletions ...ic/components/SQLPage/sql_catalog_tree/__tests__/__snapshots__/catalog_tree.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Test Catalog tree Loading state OpenSearch catalog tree 1`] = `
<div>
<div>
<div
class="euiText euiText--medium euiTreeView__wrapper"
>
<p
class="euiScreenReaderOnly"
id="some_html_id--instruction"
>
You can quickly navigate this list using arrow keys.
</p>
<ul
aria-describedby="some_html_id--instruction"
aria-label="OpenSearch Folder Tree"
class="euiTreeView"
data-test-subj="opensearch-tree"
id="some_html_id"
>
<li
class="euiTreeView__node"
>
<button
aria-controls="some_html_id"
aria-expanded="false"
class="euiTreeView__nodeInner"
data-test-subj="euiTreeViewButton-some_html_id"
id="element_0"
>
<span
class="euiTreeView__iconWrapper"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
/>
</svg>
</span>
<span
class="euiTreeView__nodeLabel"
>
<div>
<span
class="euiToolTipAnchor"
>
<div
class="euiText euiText--medium"
>
.kibana_1
</div>
</span>
</div>
</span>
</button>
<div
id="some_html_id"
/>
</li>
</ul>
</div>
</div>
</div>
`;

exports[`Test Catalog tree Loading state S3 catalog tree 1`] = `
<div>
<div>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiFlexItem"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
/>
</svg>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
No databases found
</div>
</div>
</div>
</div>
`;
90 changes: 90 additions & 0 deletions public/components/SQLPage/sql_catalog_tree/__tests__/catalog_tree.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { render, waitFor } from '@testing-library/react';
import React from 'react';
import { httpClientMock } from '../../../../../test/mocks';
import { mockDataSelectQuery, mockHttpQuery } from '../../../../../test/mocks/mockData';
import { CatalogTree } from '../catalog_tree';

jest.mock('../../../../dependencies/register_observability_dependencies', () => ({
getRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
getRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
setRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
setRenderCreateAccelerationFlyout: jest.fn(() => jest.fn()),
}));

jest.mock('../../../../framework/catalog_cache_refs', () => ({
catalogCacheRefs: {
useLoadDatabasesToCache: jest.fn(() => ({
loadStatus: '',
startLoading: jest.fn(),
stopLoading: jest.fn(),
})),
useLoadTablesToCache: jest.fn(() => ({
loadStatus: '',
startLoading: jest.fn(),
stopLoading: jest.fn(),
})),
useLoadTableColumnsToCache: jest.fn(() => ({
loadStatus: '',
startLoading: jest.fn(),
stopLoading: jest.fn(),
})),
useLoadAccelerationsToCache: jest.fn(() => ({
loadStatus: '',
startLoading: jest.fn(),
stopLoading: jest.fn(),
})),
CatalogCacheManager: {
getOrCreateDataSource: jest.fn(() => ({
name: 'my_s3',
lastUpdated: '',
status: 'Updated',
databases: [],
})),
},
},
}));

describe('Test Catalog tree', () => {
it('Loading state OpenSearch catalog tree', async () => {
const client = httpClientMock;
client.post = jest.fn().mockResolvedValue(mockHttpQuery);

const { getByText } = render(
<CatalogTree
selectedItems={[{ label: 'OpenSearch' }]}
updateSQLQueries={jest.fn()}
refreshTree={true}
/>
);

await waitFor(() => {
expect(getByText('.kibana_1')).toBeInTheDocument();
});

expect(document.body.children[0]).toMatchSnapshot();
});

it('Loading state S3 catalog tree', async () => {
const client = httpClientMock;
client.post = jest.fn().mockResolvedValue(mockHttpQuery);
client.get = jest.fn().mockResolvedValue(mockDataSelectQuery);
const { getByText } = render(
<CatalogTree
selectedItems={[{ label: 'my_s3' }]}
updateSQLQueries={jest.fn()}
refreshTree={true}
/>
);

await waitFor(() => {
expect(getByText('No databases found')).toBeInTheDocument();
});

expect(document.body.children[0]).toMatchSnapshot();
});
});
9 changes: 8 additions & 1 deletion public/components/SQLPage/sql_catalog_tree/s3_tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { AsyncQueryStatus, CachedDataSourceStatus, TreeItem } from '../../../../
import { useToast } from '../../../../common/utils/toast_helper';
import { getRenderAccelerationDetailsFlyout } from '../../../dependencies/register_observability_dependencies';
import { catalogCacheRefs } from '../../../framework/catalog_cache_refs';
import '../table_view.scss';
import {
createLabel,
findIndexObject,
Expand Down Expand Up @@ -224,7 +225,7 @@ export const S3Tree = ({ dataSource, updateSQLQueries, refreshTree }: S3TreeProp
setIsTreeLoading({ status: true, message: '' });
const dsCache = catalogCacheRefs.CatalogCacheManager!.getOrCreateDataSource(dataSource);

if (dsCache.status === CachedDataSourceStatus.Updated && dsCache.databases.length > 0) {
if (dsCache.status === CachedDataSourceStatus.Updated) {
const databases = dsCache.databases.map((db) => db.name);
setTreeData(loadTreeItem(databases, TREE_ITEM_DATABASE_NAME_DEFAULT_NAME));
setIsTreeLoading({ status: false, message: '' });
Expand All @@ -238,6 +239,11 @@ export const S3Tree = ({ dataSource, updateSQLQueries, refreshTree }: S3TreeProp
if (status === AsyncQueryStatus.Success) {
refreshDatabasesinTree();
setIsTreeLoading({ status: false, message: '' });
const dsCache = catalogCacheRefs.CatalogCacheManager!.getOrCreateDataSource(dataSource);
if (dsCache.status === CachedDataSourceStatus.Updated) {
const databases = dsCache.databases.map((db) => db.name);
setTreeData(loadTreeItem(databases, TREE_ITEM_DATABASE_NAME_DEFAULT_NAME));
}
} else if (status === AsyncQueryStatus.Failed || status === AsyncQueryStatus.Cancelled) {
setIsTreeLoading({ status: false, message: 'Failed to load databases' });
}
Expand Down Expand Up @@ -336,6 +342,7 @@ export const S3Tree = ({ dataSource, updateSQLQueries, refreshTree }: S3TreeProp
<EuiTreeView
aria-label="S3 Datasource Folder Tree"
data-test-subj="s3-datasource-tree"
className="workbench-tree"
items={treeDataDatabases}
/>
);
Expand Down

0 comments on commit 9abe53f

Please sign in to comment.