[Workspace] Support to dissociate data connection object since DSM list has supported to display

changelogs/fragments/9164.yml

@@ -0,0 +1,2 @@
+feat:
+- Support to dissociate data connection object since DSM list has supported to display ([#9164](/~https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9164))

src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.test.tsx

@@ -20,6 +20,7 @@ import {
   DATA_CONNECTION_SAVED_OBJECT_TYPE,
   DataConnectionType,
 } from '../../../../../data_source/common';
+import { waitFor } from '@testing-library/dom';
 
 const deleteButtonIdentifier = '[data-test-subj="deleteDataSourceConnections"]';
 const tableIdentifier = 'EuiInMemoryTable';
@@ -280,6 +281,94 @@ describe('ManageDirectQueryDataConnectionsTable', () => {
       expect(component).toMatchSnapshot();
     });
   });
+
+  describe('data source association', () => {
+    const mockDissociate = jest.fn();
+
+    beforeEach(async () => {
+      const mockedDataConnections = [
+        {
+          type: 'data-connection',
+          id: 'data-connection-id',
+          attributes: {
+            connectionId: 'cloudWatch',
+            type: 'AWS CloudWatch',
+          },
+        },
+      ];
+      spyOn(utils, 'getDataSources').and.returnValue(Promise.resolve(getMappedDataSources));
+      spyOn(utils, 'fetchDataSourceConnections').and.returnValue(
+        Promise.resolve(getMappedDataSources)
+      );
+      spyOn(utils, 'getDataConnections').and.returnValue(Promise.resolve(mockedDataConnections));
+      spyOn(utils, 'getHideLocalCluster').and.returnValue(false);
+      spyOn(uiSettings, 'get$').and.returnValue(new BehaviorSubject('test1'));
+      const context = {
+        ...mockedContext,
+        application: {
+          ...mockedContext.application,
+          capabilities: {
+            ...mockedContext.application.capabilities,
+            dashboards: {
+              ...mockedContext.application.capabilities.dashboards,
+              isDashboardAdmin: true,
+            },
+          },
+        },
+        workspaces: {
+          ...mockedContext.workspaces,
+          client$: new BehaviorSubject({
+            ui: () => ({
+              DataSourceAssociation: undefined,
+            }),
+            dissociate: mockDissociate,
+          }),
+          currentWorkspace$: new BehaviorSubject({
+            id: 'workspace_id',
+            readonly: false,
+          }),
+        },
+        overlays: {
+          ...mockedContext.overlays,
+          openConfirm: jest.fn().mockResolvedValue(true),
+        },
+      };
+      await act(async () => {
+        component = await mount(
+          wrapWithIntl(
+            <ManageDirectQueryDataConnectionsTable
+              featureFlagStatus={true}
+              history={history}
+              location={({} as unknown) as RouteComponentProps['location']}
+              match={({} as unknown) as RouteComponentProps['match']}
+            />
+          ),
+          {
+            wrappingComponent: OpenSearchDashboardsContextProvider,
+            wrappingComponentProps: {
+              services: context,
+            },
+          }
+        );
+      });
+      component.update();
+    });
+    test('should be able to pass data-connection type to dissociate data connection object', async () => {
+      const cloudWatchRow = component
+        .find('tr')
+        .filterWhere((tr) => tr.text().includes('cloudWatch'));
+      cloudWatchRow
+        .find('button[data-test-subj="dataSourcesManagement-dataSourceTable-dissociateButton"]')
+        .simulate('click');
+      component.update();
+      await waitFor(() => {
+        expect(mockDissociate).toHaveBeenCalledWith(
+          [{ id: 'data-connection-id', type: 'data-connection' }],
+          'workspace_id'
+        );
+      });
+    });
+  });
 });
 
 describe('FetchDirectQueryConnections', () => {

src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx

@@ -47,7 +47,10 @@ import { LoadingMask } from '../../loading_mask';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DATACONNECTIONS_BASE, LOCAL_CLUSTER } from '../../../constants';
 import { DatasourceTypeToDisplayName, DEFAULT_DATA_SOURCE_UI_SETTINGS_ID } from '../../constants';
-import { DataConnectionType } from '../../../../../data_source/common';
+import {
+  DataConnectionType,
+  DATA_CONNECTION_SAVED_OBJECT_TYPE,
+} from '../../../../../data_source/common';
 
 interface DirectQueryDataConnectionsProps extends RouteComponentProps {
   featureFlagStatus: boolean;
@@ -179,6 +182,8 @@ export const ManageDirectQueryDataConnectionsTable = ({
           id: obj.id,
           title: obj.attributes.connectionId,
           type: obj.attributes.type,
+          // This represents this is data connection type saved object not data source type saved object
+          objectType: DATA_CONNECTION_SAVED_OBJECT_TYPE,
         }));
       } catch (error: any) {
         return [];
@@ -236,7 +241,13 @@ export const ManageDirectQueryDataConnectionsTable = ({
   const onDissociate = useCallback(
     async (item: DataSourceTableItem | DataSourceTableItem[]) => {
       const itemsToDissociate = Array<DataSourceTableItem>().concat(item);
-      const payload = itemsToDissociate.map((ds) => ({ id: ds.id, type: 'data-source' }));
+      const payload = itemsToDissociate.map((ds) => ({
+        id: ds.id,
+        type:
+          ds?.objectType === DATA_CONNECTION_SAVED_OBJECT_TYPE
+            ? DATA_CONNECTION_SAVED_OBJECT_TYPE
+            : 'data-source',
+      }));
       const confirmed = await overlays.openConfirm('', {
         title: i18n.translate('dataSourcesManagement.dataSourcesTable.removeAssociation', {
           defaultMessage:

src/plugins/data_source_management/public/types.ts

@@ -55,6 +55,8 @@ export interface DataSourceTableItem {
   description?: string;
   sort?: string;
   relatedConnections?: DataSourceTableItem[];
+  // This is used to identify the type of the data connection saved object
+  objectType?: string;
 }
 
 /**