Refactor selectedDataSources to selectedDataSourceConnections

Signed-off-by: Lin Wang <[email protected]>

src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx

@@ -15,12 +15,12 @@ import { getUseCaseFeatureConfig } from '../../../common/utils';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 import { WorkspaceClient } from '../../workspace_client';
 import { convertPermissionSettingsToPermissions } from '../workspace_form';
-import { DataSource } from '../../../common/types';
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { WorkspaceUseCase } from '../../types';
 import { getFirstUseCaseOfFeatureConfigs } from '../../utils';
 import { useFormAvailableUseCases } from '../workspace_form/use_form_available_use_cases';
 import { NavigationPublicPluginStart } from '../../../../../plugins/navigation/public';
+import { DataSourceConnectionType } from '../../../common/types';
 import { WorkspaceCreatorForm } from './workspace_creator_form';
 
 export interface WorkspaceCreatorProps {
@@ -72,10 +72,14 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
       }
       setIsFormSubmitting(true);
       try {
-        const { permissionSettings, selectedDataSources, ...attributes } = data;
-        const selectedDataSourceIds = (selectedDataSources ?? []).map((ds: DataSource) => {
-          return ds.id;
-        });
+        const { permissionSettings, selectedDataSourceConnections, ...attributes } = data;
+        const selectedDataSourceIds = (selectedDataSourceConnections ?? [])
+          .filter(
+            ({ connectionType }) => connectionType === DataSourceConnectionType.OpenSearchConnection
+          )
+          .map(({ id }) => {
+            return id;
+          });
         result = await workspaceClient.create(attributes, {
           dataSources: selectedDataSourceIds,
           permissions: convertPermissionSettingsToPermissions(permissionSettings),

src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx

@@ -58,7 +58,7 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
     handleColorChange,
     handleUseCaseChange: handleUseCaseChangeInHook,
     setPermissionSettings,
-    setSelectedDataSources,
+    setSelectedDataSourceConnections,
   } = useWorkspaceForm(props);
   const nameManualChangedRef = useRef(false);
 
@@ -173,10 +173,9 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
                 })}
               </EuiText>
               <SelectDataSourcePanel
-                errors={formErrors.selectedDataSources}
-                onChange={setSelectedDataSources}
+                onChange={setSelectedDataSourceConnections}
                 savedObjects={savedObjects}
-                assignedDataSources={formData.selectedDataSources}
+                assignedDataSourceConnections={formData.selectedDataSourceConnections}
                 data-test-subj={`workspaceForm-dataSourcePanel`}
                 showDataSourceManagement={true}
               />

src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx

@@ -20,10 +20,10 @@ describe('WorkspaceFormSummaryPanel', () => {
     name: 'Test Workspace',
     description: 'This is a test workspace',
     color: '#000000',
-    selectedDataSources: [
-      { id: 'data-source-1', title: 'Data Source 1' },
-      { id: 'data-source-2', title: 'Data Source 2' },
-      { id: 'data-source-3', title: 'Data Source 3' },
+    selectedDataSourceConnections: [
+      { id: 'data-source-1', name: 'Data Source 1' },
+      { id: 'data-source-2', name: 'Data Source 2' },
+      { id: 'data-source-3', name: 'Data Source 3' },
     ],
     permissionSettings: [
       { id: 1, type: WorkspacePermissionItemType.User, userId: 'user1' },
@@ -74,7 +74,7 @@ describe('WorkspaceFormSummaryPanel', () => {
       <WorkspaceFormSummaryPanel
         formData={{
           name: '',
-          selectedDataSources: [],
+          selectedDataSourceConnections: [],
           permissionSettings: [],
           features: [],
           useCase: undefined,

src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx

@@ -176,9 +176,9 @@ export const WorkspaceFormSummaryPanel = ({
         )}
       </FieldSummaryItem>
       <FieldSummaryItem field={RightSidebarScrollField.DataSource}>
-        {formData.selectedDataSources.length > 0 && (
+        {formData.selectedDataSourceConnections.length > 0 && (
           <ExpandableTextList
-            texts={formData.selectedDataSources.map(({ title }) => title)}
+            texts={formData.selectedDataSourceConnections.map(({ name }) => name)}
             collapseDisplayCount={2}
           />
         )}

src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.test.tsx

@@ -8,10 +8,13 @@ import React from 'react';
 import { coreMock } from '../../../../../core/public/mocks';
 import { createOpenSearchDashboardsReactContext } from '../../../../opensearch_dashboards_react/public';
 import { WorkspaceFormProvider, WorkspaceOperationType } from '../workspace_form';
-import { SelectDataSourceDetailPanel } from './select_data_source_panel';
+import {
+  SelectDataSourceDetailPanel,
+  SelectDataSourceDetailPanelProps,
+} from './select_data_source_panel';
 import * as utils from '../../utils';
 import { IntlProvider } from 'react-intl';
-import { DataSourceConnectionType } from '../../../common/types';
+import { DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
 
 const mockCoreStart = coreMock.createStart();
 
@@ -81,8 +84,7 @@ const defaultValues = {
 };
 
 const defaultProps = {
-  savedObjects: {},
-  assignedDataSources: [],
+  savedObjects: mockCoreStart.savedObjects,
   detailTitle: 'Data sources',
   isDashboardAdmin: true,
   currentWorkspace: workspaceObject,
@@ -96,7 +98,14 @@ const success = jest.fn().mockResolvedValue({
 });
 const failed = jest.fn().mockResolvedValue({});
 
-const selectDataSourceDetailPanel = (props: any) => {
+const selectDataSourceDetailPanel = ({
+  action,
+  selectedDataSourceConnections,
+  ...props
+}: {
+  action?: Function;
+  selectedDataSourceConnections?: DataSourceConnection[];
+} & Partial<SelectDataSourceDetailPanelProps>) => {
   const { Provider } = createOpenSearchDashboardsReactContext({
     ...mockCoreStart,
     ...{
@@ -109,7 +118,7 @@ const selectDataSourceDetailPanel = (props: any) => {
         },
       },
       workspaceClient: {
-        update: props.action,
+        update: action,
       },
     },
   });
@@ -122,24 +131,28 @@ const selectDataSourceDetailPanel = (props: any) => {
         operationType={WorkspaceOperationType.Update}
         permissionEnabled={true}
         onSubmit={jest.fn()}
-        defaultValues={defaultValues}
+        defaultValues={{ ...defaultValues, selectedDataSourceConnections }}
         availableUseCases={[]}
       >
         <Provider>
-          <SelectDataSourceDetailPanel {...props} chrome={mockCoreStart.chrome} />
+          <SelectDataSourceDetailPanel
+            {...defaultProps}
+            savedObjects={mockCoreStart.savedObjects}
+            chrome={mockCoreStart.chrome}
+            {...props}
+          />
         </Provider>
       </WorkspaceFormProvider>
     </IntlProvider>
   );
 };
 
 describe('SelectDataSourceDetailPanel', () => {
-  afterEach(() => {
+  beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('should show message when no data sources are assigned', async () => {
-    jest.spyOn(utils, 'fetchDataSourceConnections').mockResolvedValue([]);
     const { getByText, getAllByText } = render(selectDataSourceDetailPanel(defaultProps));
     await waitFor(() => {
       expect(getByText('No data sources to display')).toBeInTheDocument();
@@ -151,7 +164,6 @@ describe('SelectDataSourceDetailPanel', () => {
   });
 
   it('should not show assocition button when user is not OSD admin', async () => {
-    jest.spyOn(utils, 'fetchDataSourceConnections').mockResolvedValue([]);
     const { getByText, queryByText } = render(
       selectDataSourceDetailPanel({
         ...defaultProps,
@@ -167,11 +179,9 @@ describe('SelectDataSourceDetailPanel', () => {
   });
 
   it('should not show remove associations button when user is not OSD admin', async () => {
-    jest.spyOn(utils, 'fetchDataSourceConnections').mockResolvedValue(dataSourceConnectionsMock);
     const { queryByTestId } = render(
       selectDataSourceDetailPanel({
         ...defaultProps,
-        assignedDataSources: dataSources,
         isDashboardAdmin: false,
       })
     );
@@ -181,7 +191,6 @@ describe('SelectDataSourceDetailPanel', () => {
   });
 
   it('should switch toggle button', async () => {
-    jest.spyOn(utils, 'fetchDataSourceConnections').mockResolvedValue(dataSourceConnectionsMock);
     const { getByText } = render(selectDataSourceDetailPanel(defaultProps));
     await waitFor(() => {
       const dqcButton = getByText('Direct query connections');
@@ -200,7 +209,6 @@ describe('SelectDataSourceDetailPanel', () => {
       value: 600,
     });
     jest.spyOn(utils, 'getDataSourcesList').mockResolvedValue([]);
-    jest.spyOn(utils, 'fetchDataSourceConnections').mockResolvedValueOnce([]);
     jest
       .spyOn(utils, 'fetchDataSourceConnections')
       .mockResolvedValueOnce(dataSourceConnectionsMock);
@@ -245,7 +253,6 @@ describe('SelectDataSourceDetailPanel', () => {
       value: 600,
     });
     jest.spyOn(utils, 'getDataSourcesList').mockResolvedValue([]);
-    jest.spyOn(utils, 'fetchDataSourceConnections').mockResolvedValueOnce([]);
     jest
       .spyOn(utils, 'fetchDataSourceConnections')
       .mockResolvedValueOnce(dataSourceConnectionsMock);
@@ -317,13 +324,10 @@ describe('SelectDataSourceDetailPanel', () => {
   });
 
   it('should success to remove data sources', async () => {
-    jest
-      .spyOn(utils, 'fetchDataSourceConnections')
-      .mockResolvedValueOnce([dataSourceConnectionsMock[0]]);
     const { getByText, getByTestId, getByRole } = render(
       selectDataSourceDetailPanel({
         ...defaultProps,
-        assignedDataSources: [dataSources[0]],
+        selectedDataSourceConnections: [dataSourceConnectionsMock[0]],
         action: success,
       })
     );
@@ -341,13 +345,10 @@ describe('SelectDataSourceDetailPanel', () => {
   });
 
   it('should fail to remove data sources', async () => {
-    jest
-      .spyOn(utils, 'fetchDataSourceConnections')
-      .mockResolvedValueOnce([dataSourceConnectionsMock[0]]);
     const { getByText, getByTestId, getByRole } = render(
       selectDataSourceDetailPanel({
         ...defaultProps,
-        assignedDataSources: [dataSources[0]],
+        selectedDataSourceConnections: [dataSourceConnectionsMock[0]],
         action: failed,
       })
     );
@@ -365,13 +366,10 @@ describe('SelectDataSourceDetailPanel', () => {
   });
 
   it('should remove selected data sources successfully', async () => {
-    jest
-      .spyOn(utils, 'fetchDataSourceConnections')
-      .mockResolvedValueOnce([dataSourceConnectionsMock[0]]);
     const { getByText, queryByTestId, getAllByRole, getByRole } = render(
       selectDataSourceDetailPanel({
         ...defaultProps,
-        assignedDataSources: [dataSources[0]],
+        selectedDataSourceConnections: [dataSourceConnectionsMock[0]],
         action: success,
       })
     );
@@ -392,20 +390,22 @@ describe('SelectDataSourceDetailPanel', () => {
   });
 
   it('should handle input in the search box', async () => {
-    jest.spyOn(utils, 'fetchDataSourceConnections').mockResolvedValue(dataSourceConnectionsMock);
     const { getByText, queryByText } = render(
       selectDataSourceDetailPanel({
         ...defaultProps,
-        assignedDataSources: dataSources,
+        selectedDataSourceConnections: dataSourceConnectionsMock,
       })
     );
     await waitFor(() => {
       expect(getByText('Data Source 1')).toBeInTheDocument();
       expect(getByText('Data Source 2')).toBeInTheDocument();
+    });
 
-      const searchInput = screen.getByPlaceholderText('Search...');
-      // Simulate typing in the search input
-      fireEvent.change(searchInput, { target: { value: 'Data Source 1' } });
+    const searchInput = screen.getByPlaceholderText('Search...');
+    // Simulate typing in the search input
+    fireEvent.change(searchInput, { target: { value: 'Data Source 1' } });
+
+    await waitFor(() => {
       expect(getByText('Data Source 1')).toBeInTheDocument();
       expect(queryByText('Data Source 2')).toBeNull();
     });