[New]feat: add related connections and nested view to datasource tabl…

…e. (opensearch-project#7969) * feat: add related connections and nested view to datasource table. Signed-off-by: Wei Wang <[email protected]> * update snapshot Signed-off-by: Wei Wang <[email protected]> --------- Signed-off-by: Wei Wang <[email protected]> Signed-off-by: Wei Wang <[email protected]> Co-authored-by: Wei Wang <[email protected]>
RyanL1997 · Sep 4, 2024 · adcaba7 · adcaba7
1 parent 1974ca1
commit adcaba7
Show file tree

Hide file tree

Showing 12 changed files with 4,440 additions and 1,238 deletions.
diff --git a/...ource_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx b/...ource_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx
@@ -9,7 +9,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { EuiTab } from '@elastic/eui';
 import { DataSourceHomePanel } from './data_source_home_panel';
 import { DataSourceTableWithRouter } from '../data_source_table/data_source_table';
-import { ManageDirectQueryDataConnectionsTable } from '../direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table';
+import { ManageDirectQueryDataConnectionsTableWithRouter } from '../direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getListBreadcrumbs } from '../breadcrumbs';
 import { navigationPluginMock } from 'src/plugins/navigation/public/mocks';
@@ -22,7 +22,9 @@ jest.mock('../data_source_table/data_source_table', () => ({
 jest.mock(
   '../direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table',
   () => ({
-    ManageDirectQueryDataConnectionsTable: () => <div>ManageDirectQueryDataConnectionsTable</div>,
+    ManageDirectQueryDataConnectionsTableWithRouter: () => (
+      <div>ManageDirectQueryDataConnectionsTableWithRouter</div>
+    ),
   })
 );
 jest.mock('../create_button', () => ({
@@ -67,8 +69,10 @@ describe('DataSourceHomePanel', () => {
     match: {} as any,
   };
 
-  const shallowComponent = (props = defaultProps) => shallow(<DataSourceHomePanel {...props} />);
-  const mountComponent = (props = defaultProps) => mount(<DataSourceHomePanel {...props} />);
+  const shallowComponent = (props = defaultProps) =>
+    shallow(<DataSourceHomePanel useNewUX={false} {...props} />);
+  const mountComponent = (props = defaultProps) =>
+    mount(<DataSourceHomePanel useNewUX={false} {...props} />);
 
   test('renders correctly', () => {
     const wrapper = shallowComponent();
@@ -79,21 +83,21 @@ describe('DataSourceHomePanel', () => {
     const wrapper = mountComponent();
     wrapper.find(EuiTab).at(0).simulate('click');
     expect(wrapper.find(DataSourceTableWithRouter)).toHaveLength(1);
-    expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(0);
+    expect(wrapper.find(ManageDirectQueryDataConnectionsTableWithRouter)).toHaveLength(0);
   });
 
   test('renders ManageDirectQueryDataConnectionsTable when manageDirectQueryDataSources tab is selected', () => {
     const wrapper = mountComponent();
     wrapper.find(EuiTab).at(1).simulate('click');
-    expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(1);
+    expect(wrapper.find(ManageDirectQueryDataConnectionsTableWithRouter)).toHaveLength(1);
     expect(wrapper.find(DataSourceTableWithRouter)).toHaveLength(0);
   });
 
   test('handles tab changes', () => {
     const wrapper = mountComponent();
     expect(wrapper.find(DataSourceTableWithRouter)).toHaveLength(1);
     wrapper.find(EuiTab).at(1).simulate('click');
-    expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(1);
+    expect(wrapper.find(ManageDirectQueryDataConnectionsTableWithRouter)).toHaveLength(1);
   });
 
   test('does not render OpenSearch connections tab when featureFlagStatus is false', () => {

diff --git a/...ata_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx b/...ata_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
@@ -21,7 +21,7 @@ import { useObservable } from 'react-use';
 import { of } from 'rxjs';
 import { DataSourceHeader } from './data_source_page_header';
 import { DataSourceTableWithRouter } from '../data_source_table/data_source_table';
-import { ManageDirectQueryDataConnectionsTable } from '../direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table';
+import { ManageDirectQueryDataConnectionsTableWithRouter } from '../direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table';
 import { CreateButton } from '../create_button';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getListBreadcrumbs } from '../breadcrumbs';
@@ -204,15 +204,8 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
           {selectedTabId === 'manageOpensearchDataSources' && featureFlagStatus && (
             <DataSourceTableWithRouter {...props} />
           )}
-          {selectedTabId === 'manageDirectQueryDataSources' && (
-            <ManageDirectQueryDataConnectionsTable
-              http={http}
-              notifications={notifications}
-              savedObjects={savedObjects}
-              uiSettings={uiSettings}
-              featureFlagStatus={featureFlagStatus}
-              application={application}
-            />
+          {selectedTabId === 'manageDirectQueryDataSources' && featureFlagStatus && (
+            <ManageDirectQueryDataConnectionsTableWithRouter {...props} />
           )}
         </EuiFlexItem>
       </EuiFlexGroup>