[Workspace] Refactor 'Associate data sources' in create page to suppo…

…rt direct query connections (#7961) (#8024)

* support DQC



* Fix UTs in workspace form select data source panel



* Remove no need IntlProvider



* Add aria-labelledby for permission inputs



* Modify UTs



* Changeset file for PR #7961 created/updated

* Modify UTs



* Resolve some issues



* Modify UTs



* Fix UT errror



* update button text



* rename onSelectItems()



* Fix an error



* Refactor data source connection table



* resolve some issues



* resolve some issues



* Fix the data source URL reference



* Move restProps to tableProps



* Fix table not unmont after connection type changed



* Refactor selectedDataSources to selectedDataSourceConnections



* Load direct query connections after data source tab selected



---------





(cherry picked from commit 16d160a)

Signed-off-by: Kapian1234 <wanjinch@amazon.com>
Signed-off-by: Lin Wang <wonglam@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Lin Wang <wonglam@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

changelogs/fragments/7961.yml

@@ -0,0 +1,2 @@
+feat:
+- Support DQCs in create page ([#7961](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7961))

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

@@ -15,6 +15,9 @@ import {
   WorkspaceCreator as WorkspaceCreatorComponent,
   WorkspaceCreatorProps,
 } from './workspace_creator';
+import { DataSourceEngineType } from '../../../../data_source/common/data_sources';
+import { DataSourceConnectionType } from '../../../common/types';
+import * as utils from '../../utils';
 
 const workspaceClientCreate = jest
   .fn()
@@ -32,21 +35,50 @@ const dataSourcesList = [
   {
     id: 'id1',
     title: 'ds1',
+    description: 'Description of data source 1',
+    auth: '',
+    dataSourceEngineType: '' as DataSourceEngineType,
+    workspaces: [],
     // This is used for mocking saved object function
     get: () => {
       return 'ds1';
     },
   },
   {
-    id: '2',
+    id: 'id2',
     title: 'ds2',
+    description: 'Description of data source 1',
+    auth: '',
+    dataSourceEngineType: '' as DataSourceEngineType,
+    workspaces: [],
     get: () => {
       return 'ds2';
     },
   },
 ];
 
+const dataSourceConnectionsList = [
+  {
+    id: 'id1',
+    name: 'ds1',
+    connectionType: DataSourceConnectionType.OpenSearchConnection,
+    type: 'OpenSearch',
+    relatedConnections: [],
+  },
+  {
+    id: 'id2',
+    name: 'ds2',
+    connectionType: DataSourceConnectionType.OpenSearchConnection,
+    type: 'OpenSearch',
+  },
+];
+
 const mockCoreStart = coreMock.createStart();
+jest.spyOn(utils, 'fetchDataSourceConnections').mockImplementation(async (passedDataSources) => {
+  return dataSourceConnectionsList.filter(({ id }) =>
+    passedDataSources.some((dataSource) => dataSource.id === id)
+  );
+});
 
 const WorkspaceCreator = ({
   isDashboardAdmin = false,
@@ -304,7 +336,15 @@ describe('WorkspaceCreator', () => {
   });
 
   it('create workspace with customized selected dataSources', async () => {
-    const { getByTestId, getByTitle, getByText } = render(
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      value: 600,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 600,
+    });
+    const { getByTestId, getAllByText, getByText } = render(
       <WorkspaceCreator isDashboardAdmin={true} />
     );
 
@@ -317,10 +357,17 @@ describe('WorkspaceCreator', () => {
       target: { value: 'test workspace name' },
     });
     fireEvent.click(getByTestId('workspaceUseCase-observability'));
-    fireEvent.click(getByTestId('workspaceForm-select-dataSource-addNew'));
-    fireEvent.click(getByTestId('workspaceForm-select-dataSource-comboBox'));
-    fireEvent.click(getByText('Select'));
-    fireEvent.click(getByTitle(dataSourcesList[0].title));
+    fireEvent.click(getByTestId('workspace-creator-dataSources-assign-button'));
+    await waitFor(() => {
+      expect(
+        getByText(
+          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
+        )
+      ).toBeInTheDocument();
+      expect(getByText(dataSourcesList[0].title)).toBeInTheDocument();
+    });
+    fireEvent.click(getByText(dataSourcesList[0].title));
+    fireEvent.click(getAllByText('Associate data sources')[1]);
 
     fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
     expect(workspaceClientCreate).toHaveBeenCalledWith(

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);
 
@@ -86,7 +86,7 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
 
   return (
     <EuiFlexGroup className="workspaceCreateFormContainer">
-      <EuiFlexItem style={{ maxWidth: 650 }}>
+      <EuiFlexItem style={{ maxWidth: 768 }}>
         <EuiForm
           id={formId}
           onSubmit={handleFormSubmit}
@@ -173,11 +173,11 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
                 })}
               </EuiText>
               <SelectDataSourcePanel
-                errors={formErrors.selectedDataSources}
-                onChange={setSelectedDataSources}
+                onChange={setSelectedDataSourceConnections}
                 savedObjects={savedObjects}
-                selectedDataSources={formData.selectedDataSources}
+                assignedDataSourceConnections={formData.selectedDataSourceConnections}
                 data-test-subj={`workspaceForm-dataSourcePanel`}
+                showDataSourceManagement={true}
               />
               <EuiSpacer size="s" />
               <EuiSpacer size="s" />

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}
           />
         )}