[Workspace] Refactor 'Associate data sources' in create page to support direct query connections

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_form.tsx

@@ -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}
@@ -176,8 +176,9 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
                 errors={formErrors.selectedDataSources}
                 onChange={setSelectedDataSources}
                 savedObjects={savedObjects}
-                selectedDataSources={formData.selectedDataSources}
+                assignedDataSources={formData.selectedDataSources}
                 data-test-subj={`workspaceForm-dataSourcePanel`}
+                showDataSourceManagement={true}
               />
               <EuiSpacer size="s" />
               <EuiSpacer size="s" />

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

@@ -23,7 +23,7 @@ import { i18n } from '@osd/i18n';
 import { FormattedMessage } from 'react-intl';
 import { DataSource, DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
 import { WorkspaceClient } from '../../workspace_client';
-import { DataSourceConnectionTable } from './data_source_connection_table';
+import { WorkspaceDetailConnectionTable } from './workspace_detail_connection_table';
 import { AssociationDataSourceModal } from './association_data_source_modal';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import {
@@ -244,7 +244,7 @@ export const SelectDataSourceDetailPanel = ({
       return noAssociationMessage;
     }
     return (
-      <DataSourceConnectionTable
+      <WorkspaceDetailConnectionTable
         isDashboardAdmin={isDashboardAdmin}
         connectionType={toggleIdSelected}
         dataSourceConnections={assignedDataSourceConnections}

src/plugins/workspace/public/components/workspace_detail/data_source_connection_table.test.tsx → src/plugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.test.tsx

@@ -6,9 +6,14 @@
 import { fireEvent, render } from '@testing-library/react';
 import { DataSourceConnectionType } from '../../../common/types';
 import React from 'react';
-import { DataSourceConnectionTable } from './data_source_connection_table';
 import { AssociationDataSourceModalMode } from '../../../common/constants';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { WorkspaceDetailConnectionTable } from './workspace_detail_connection_table';
 
+jest.mock('../../../../opensearch_dashboards_react/public', () => ({
+  ...jest.requireActual('../../../../opensearch_dashboards_react/public'),
+  useOpenSearchDashboards: jest.fn(),
+}));
 const handleUnassignDataSources = jest.fn();
 const dataSourceConnectionsMock = [
   {
@@ -57,14 +62,27 @@ const dataSourceConnectionsMock = [
   },
 ];
 
-describe('DataSourceConnectionTable', () => {
+describe('WorkspaceDetailConnectionTable', () => {
+  beforeEach(() => {
+    const mockPrepend = jest.fn().mockImplementation((path) => path);
+    const mockHttp = {
+      basePath: {
+        prepend: mockPrepend,
+      },
+    };
+    (useOpenSearchDashboards as jest.Mock).mockImplementation(() => ({
+      services: {
+        http: mockHttp,
+      },
+    }));
+  });
   afterEach(() => {
     jest.clearAllMocks();
   });
   describe('OpenSearch connections', () => {
     it('renders the table with OpenSearch connections', () => {
       const { getByText, queryByText } = render(
-        <DataSourceConnectionTable
+        <WorkspaceDetailConnectionTable
           isDashboardAdmin={true}
           connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
           dataSourceConnections={dataSourceConnectionsMock}
@@ -84,7 +102,7 @@ describe('DataSourceConnectionTable', () => {
 
     it('should show dqc popover when click the Related connections number ', () => {
       const { getByText } = render(
-        <DataSourceConnectionTable
+        <WorkspaceDetailConnectionTable
           isDashboardAdmin={true}
           connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
           dataSourceConnections={dataSourceConnectionsMock}
@@ -100,7 +118,7 @@ describe('DataSourceConnectionTable', () => {
 
     it('should remove selected OpenSearch connections by dashboard admin', () => {
       const { getByText, queryByTestId, getAllByRole, getByRole } = render(
-        <DataSourceConnectionTable
+        <WorkspaceDetailConnectionTable
           isDashboardAdmin={true}
           connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
           dataSourceConnections={dataSourceConnectionsMock}
@@ -122,7 +140,7 @@ describe('DataSourceConnectionTable', () => {
 
     it('should remove single OpenSearch connections by dashboard admin', () => {
       const { queryAllByTestId, getByText, getByRole } = render(
-        <DataSourceConnectionTable
+        <WorkspaceDetailConnectionTable
           isDashboardAdmin={true}
           connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
           dataSourceConnections={dataSourceConnectionsMock}
@@ -142,7 +160,7 @@ describe('DataSourceConnectionTable', () => {
 
     it('should hide remove action iif user is not dashboard admin', () => {
       const { queryByText, queryByTestId, getAllByRole } = render(
-        <DataSourceConnectionTable
+        <WorkspaceDetailConnectionTable
           isDashboardAdmin={false}
           connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
           dataSourceConnections={dataSourceConnectionsMock}
@@ -160,7 +178,7 @@ describe('DataSourceConnectionTable', () => {
   describe('Direct query connections', () => {
     it('renders the table with Direct query connections', () => {
       const { getByText, queryByText, getByTestId } = render(
-        <DataSourceConnectionTable
+        <WorkspaceDetailConnectionTable
           isDashboardAdmin={true}
           connectionType={AssociationDataSourceModalMode.DirectQueryConnections}
           dataSourceConnections={dataSourceConnectionsMock}

src/plugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { EuiConfirmModal, EuiSearchBarProps, EuiSmallButton } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
+import { AssociationDataSourceModalMode } from '../../../common/constants';
+import { DataSourceConnectionTable } from '../workspace_form';
+
+interface DataSourceConnectionTableProps {
+  isDashboardAdmin: boolean;
+  connectionType: string;
+  dataSourceConnections: DataSourceConnection[];
+  handleUnassignDataSources: (dataSources: DataSourceConnection[]) => void;
+}
+
+export const WorkspaceDetailConnectionTable = ({
+  isDashboardAdmin,
+  connectionType,
+  dataSourceConnections,
+  handleUnassignDataSources,
+}: DataSourceConnectionTableProps) => {
+  const [selectedItems, setSelectedItems] = useState<DataSourceConnection[]>([]);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  useEffect(() => {
+    // Reset selected items when connectionType changes
+    setSelectedItems([]);
+  }, [connectionType]);
+
+  const openSearchConnections = useMemo(() => {
+    return dataSourceConnections.filter((dsc) =>
+      connectionType === AssociationDataSourceModalMode.OpenSearchConnections
+        ? dsc.connectionType === DataSourceConnectionType.OpenSearchConnection
+        : dsc?.relatedConnections && dsc.relatedConnections?.length > 0
+    );
+  }, [connectionType, dataSourceConnections]);
+
+  const renderToolsLeft = useCallback(() => {
+    return selectedItems.length > 0 && !modalVisible
+      ? [
+          <EuiSmallButton
+            color="danger"
+            onClick={() => setModalVisible(true)}
+            data-test-subj="workspace-detail-dataSources-table-bulkRemove"
+          >
+            {i18n.translate('workspace.detail.dataSources.table.remove.button', {
+              defaultMessage: 'Remove {numberOfSelect} association(s)',
+              values: { numberOfSelect: selectedItems.length },
+            })}
+          </EuiSmallButton>,
+        ]
+      : [];
+  }, [selectedItems, modalVisible]);
+
+  const search: EuiSearchBarProps = {
+    toolsLeft: renderToolsLeft(),
+    box: {
+      incremental: true,
+    },
+    filters: [
+      {
+        type: 'field_value_selection',
+        field: 'type',
+        name: 'Type',
+        multiSelect: 'or',
+        options: Array.from(
+          new Set(openSearchConnections.map(({ type }) => type).filter(Boolean))
+        ).map((type) => ({
+          value: type!,
+          name: type!,
+        })),
+      },
+    ],
+  };
+
+  return (
+    <>
+      {
+        <DataSourceConnectionTable
+          isDashboardAdmin={isDashboardAdmin}
+          items={openSearchConnections}
+          search={search}
+          connectionType={connectionType}
+          pagination={{
+            initialPageSize: 10,
+            pageSizeOptions: [10, 20, 30],
+          }}
+          onUnlinkDataSource={(item) => {
+            setSelectedItems([item]);
+            setModalVisible(true);
+          }}
+          onSelectionChange={setSelectedItems}
+        />
+      }
+      {modalVisible && (
+        <EuiConfirmModal
+          data-test-subj="workspaceForm-cancelModal"
+          title={i18n.translate('workspace.detail.dataSources.modal.title', {
+            defaultMessage: 'Remove data source(s)',
+          })}
+          onCancel={() => {
+            setModalVisible(false);
+            setSelectedItems([]);
+          }}
+          onConfirm={() => {
+            setModalVisible(false);
+            handleUnassignDataSources(selectedItems);
+          }}
+          cancelButtonText={i18n.translate('workspace.detail.dataSources.modal.cancelButton', {
+            defaultMessage: 'Cancel',
+          })}
+          confirmButtonText={i18n.translate('workspace.detail.dataSources.Modal.confirmButton', {
+            defaultMessage: 'Remove data source(s)',
+          })}
+          buttonColor="danger"
+          defaultFocusedButton="confirm"
+        />
+      )}
+    </>
+  );
+};

src/plugins/workspace/public/components/workspace_form/constants.ts

@@ -123,3 +123,7 @@ export const DetailTabTitles: { [key in DetailTab]: string } = {
     defaultMessage: 'Collaborators',
   }),
 };
+
+export const PERMISSION_TYPE_LABEL_ID = 'workspace-form-permission-type-label';
+export const PERMISSION_COLLABORATOR_LABEL_ID = 'workspace-form-permission-collaborator-label';
+export const PERMISSION_ACCESS_LEVEL_LABEL_ID = 'workspace-form-permission-access-level-label';