[Workspace] Enable direct query connections to support in workspace (#…

…7839) (#8010)

* add dqc



* add dircet query connections on the detail page



* Changeset file for PR #7839 created/updated

* delete useless code



* optimize the code



* optimize the code



* Refactor association modal



* Integrate modal with workspace detail page



* Fix parent data source unchecked



* Remove all tab and sort connections by name alphabetical



* optimzie



* Fix checked status disappear after modal tab change



* optimize the dqc table



* optimize the code



* update the table css



* Simplify options update logic



* Add unit tests for AssociationDataSourceModal



* add unit test



* optimize the code



* Add nested support in associate data source modal



* delete useless code



* Change back type



* Update type in modal UT



* optimize the code



---------








(cherry picked from commit 0798865)

Signed-off-by: yubonluo <[email protected]>
Signed-off-by: Kapian1234 <[email protected]>
Signed-off-by: Lin Wang <[email protected]>
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: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Kapian1234 <[email protected]>
Co-authored-by: Lin Wang <[email protected]>
Co-authored-by: Yulong Ruan <[email protected]>

changelogs/fragments/7839.yml

@@ -0,0 +1,2 @@
+fix:
+- Enable direct query connections to support in workspace ([#7839](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7839))

src/plugins/data_source_management/public/index.ts

@@ -11,7 +11,7 @@ export function plugin() {
   return new DataSourceManagementPlugin();
 }
 
-export { DataSourceManagementPluginStart } from './types';
+export { DataSourceManagementPluginStart, DirectQueryDatasourceDetails } from './types';
 export { DataSourceSelector, DataSourceOption } from './components/data_source_selector';
 export { DataSourceMenu } from './components/data_source_menu';
 export { DataSourceManagementPlugin, DataSourceManagementPluginSetup } from './plugin';
@@ -26,3 +26,4 @@ export {
 } from './components/data_source_menu';
 export { DataSourceSelectionService } from './service/data_source_selection_service';
 export { getDefaultDataSourceId, getDefaultDataSourceId$ } from './components/utils';
+export { DATACONNECTIONS_BASE, DatasourceTypeToDisplayName } from './constants';

src/plugins/workspace/common/constants.ts

@@ -148,4 +148,8 @@ export const CURRENT_USER_PLACEHOLDER = '%me%';
 export const MAX_WORKSPACE_NAME_LENGTH = 40;
 export const MAX_WORKSPACE_DESCRIPTION_LENGTH = 200;
 
+export enum AssociationDataSourceModalMode {
+  OpenSearchConnections = 'opensearch-connections',
+  DirectQueryConnections = 'direction-query-connections',
+}
 export const USE_CASE_PREFIX = 'use-case-';

src/plugins/workspace/common/types.ts

@@ -12,3 +12,18 @@ export type DataSource = Pick<
   // Id defined in SavedObjectAttribute could be single or array, here only should be single string.
   id: string;
 };
+
+export enum DataSourceConnectionType {
+  OpenSearchConnection,
+  DirectQueryConnection,
+}
+
+export interface DataSourceConnection {
+  id: string;
+  type: string | undefined;
+  parentId?: string;
+  connectionType: DataSourceConnectionType;
+  name: string;
+  description?: string;
+  relatedConnections?: DataSourceConnection[];
+}

src/plugins/workspace/opensearch_dashboards.json

@@ -9,5 +9,5 @@
     "navigation"
   ],
   "optionalPlugins": ["savedObjectsManagement","management","dataSourceManagement","contentManagement"],
-  "requiredBundles": ["opensearchDashboardsReact","dataSource","contentManagement"]
+  "requiredBundles": ["opensearchDashboardsReact","dataSource", "dataSourceManagement","contentManagement"]
 }

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

@@ -0,0 +1,181 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+
+import { DataSourceConnectionType } from '../../../common/types';
+import { chromeServiceMock, coreMock } from '../../../../../core/public/mocks';
+import * as utilsExports from '../../utils';
+
+import {
+  AssociationDataSourceModal,
+  AssociationDataSourceModalProps,
+} from './association_data_source_modal';
+import { AssociationDataSourceModalMode } from 'src/plugins/workspace/common/constants';
+
+const setupAssociationDataSourceModal = ({
+  mode,
+  assignedConnections,
+  handleAssignDataSourceConnections,
+}: Partial<AssociationDataSourceModalProps> = {}) => {
+  const coreServices = coreMock.createStart();
+  jest.spyOn(utilsExports, 'getDataSourcesList').mockResolvedValue([]);
+  jest.spyOn(utilsExports, 'fetchDataSourceConnections').mockResolvedValue([
+    {
+      id: 'ds1',
+      name: 'Data Source 1',
+      connectionType: DataSourceConnectionType.OpenSearchConnection,
+      type: 'OpenSearch',
+      relatedConnections: [
+        {
+          id: 'ds1-dqc1',
+          name: 'dqc1',
+          parentId: 'ds1',
+          connectionType: DataSourceConnectionType.DirectQueryConnection,
+          type: 'Amazon S3',
+        },
+      ],
+    },
+    {
+      id: 'ds1-dqc1',
+      name: 'dqc1',
+      parentId: 'ds1',
+      connectionType: DataSourceConnectionType.DirectQueryConnection,
+      type: 'Amazon S3',
+    },
+    {
+      id: 'ds2',
+      name: 'Data Source 2',
+      connectionType: DataSourceConnectionType.OpenSearchConnection,
+      type: 'OpenSearch',
+    },
+  ]);
+  const { logos } = chromeServiceMock.createStartContract();
+  render(
+    <IntlProvider locale="en">
+      <AssociationDataSourceModal
+        logos={logos}
+        mode={mode ?? AssociationDataSourceModalMode.OpenSearchConnections}
+        http={coreServices.http}
+        notifications={coreServices.notifications}
+        savedObjects={coreServices.savedObjects}
+        closeModal={jest.fn()}
+        assignedConnections={assignedConnections ?? []}
+        handleAssignDataSourceConnections={handleAssignDataSourceConnections ?? jest.fn()}
+      />
+    </IntlProvider>
+  );
+  return {};
+};
+
+describe('AssociationDataSourceModal', () => {
+  const originalOffsetHeight = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    'offsetHeight'
+  );
+  const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
+  beforeEach(() => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      value: 600,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 600,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(
+      HTMLElement.prototype,
+      'offsetHeight',
+      originalOffsetHeight as PropertyDescriptor
+    );
+    Object.defineProperty(
+      HTMLElement.prototype,
+      'offsetWidth',
+      originalOffsetWidth as PropertyDescriptor
+    );
+  });
+
+  it('should display opensearch connections', async () => {
+    setupAssociationDataSourceModal();
+    expect(screen.getByText('Associate OpenSearch connections')).toBeInTheDocument();
+    expect(
+      screen.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();
+    await waitFor(() => {
+      expect(screen.getByRole('option', { name: 'Data Source 1' })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: 'Data Source 2' })).toBeInTheDocument();
+    });
+  });
+
+  it('should display direct query connections after opensearch connection selected', async () => {
+    setupAssociationDataSourceModal({
+      mode: AssociationDataSourceModalMode.DirectQueryConnections,
+    });
+    expect(screen.getByText('Associate direct query connections')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryByRole('option', { name: 'dqc1' })).not.toBeInTheDocument();
+      fireEvent.click(screen.getByRole('option', { name: 'Data Source 1' }));
+      expect(screen.getByRole('option', { name: 'dqc1' })).toBeInTheDocument();
+    });
+  });
+
+  it('should hide associated connections', async () => {
+    setupAssociationDataSourceModal({
+      assignedConnections: [
+        {
+          id: 'ds2',
+          name: 'Data Source 2',
+          connectionType: DataSourceConnectionType.OpenSearchConnection,
+          type: 'OpenSearch',
+        },
+      ],
+    });
+    expect(
+      screen.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();
+    await waitFor(() => {
+      expect(screen.getByRole('option', { name: 'Data Source 1' })).toBeInTheDocument();
+      expect(screen.queryByRole('option', { name: 'Data Source 2' })).not.toBeInTheDocument();
+    });
+  });
+
+  it('should call handleAssignDataSourceConnections with opensearch connections after assigned', async () => {
+    const handleAssignDataSourceConnectionsMock = jest.fn();
+    setupAssociationDataSourceModal({
+      handleAssignDataSourceConnections: handleAssignDataSourceConnectionsMock,
+    });
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByRole('option', { name: 'Data Source 1' }));
+      fireEvent.click(screen.getByRole('button', { name: 'Associate data sources' }));
+    });
+
+    expect(handleAssignDataSourceConnectionsMock).toHaveBeenCalledWith([
+      {
+        id: 'ds1',
+        name: 'Data Source 1',
+        connectionType: DataSourceConnectionType.OpenSearchConnection,
+        type: 'OpenSearch',
+        relatedConnections: [
+          {
+            id: 'ds1-dqc1',
+            name: 'dqc1',
+            parentId: 'ds1',
+            connectionType: DataSourceConnectionType.DirectQueryConnection,
+            type: 'Amazon S3',
+          },
+        ],
+      },
+    ]);
+  });
+});