diff --git a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.test.tsx b/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.test.tsx
index 1ad4d552f274..76c8d6692f5c 100644
--- a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.test.tsx
@@ -2,9 +2,20 @@
  * 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 { coreMock } from '../../../../../core/public/mocks';
+import * as utilsExports from '../../utils';
 
-import { DataSourceModalOption, getUpdatedOptions } from './association_data_source_modal';
+import {
+  getUpdatedOptions,
+  DataSourceModalOption,
+  AssociationDataSourceModal,
+  AssociationDataSourceModalProps,
+} from './association_data_source_modal';
 
 const mockPrevAllOptions = [
   {
@@ -301,3 +312,149 @@ describe('AssociationDataSourceModal utils: getUpdatedOptions', () => {
     ]);
   });
 });
+
+const setupAssociationDataSourceModal = ({
+  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: 'S3',
+        },
+      ],
+    },
+    {
+      id: 'ds1-dqc1',
+      name: 'dqc1',
+      parentId: 'ds1',
+      connectionType: DataSourceConnectionType.DirectQueryConnection,
+      type: 'S3',
+    },
+    {
+      id: 'ds2',
+      name: 'Data Source 2',
+      connectionType: DataSourceConnectionType.OpenSearchConnection,
+      type: 'OpenSearch',
+    },
+  ]);
+  render(
+    <IntlProvider locale="en">
+      <AssociationDataSourceModal
+        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 data sources options by default', async () => {
+    setupAssociationDataSourceModal();
+    expect(screen.getByText('Associate OpenSearch connections')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('option', { name: 'Data Source 1' })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: 'Data Source 2' })).toBeInTheDocument();
+    });
+  });
+
+  it('should hide associated data sources', async () => {
+    setupAssociationDataSourceModal({
+      assignedConnections: [
+        {
+          id: 'ds2',
+          name: 'Data Source 2',
+          connectionType: DataSourceConnectionType.OpenSearchConnection,
+          type: 'OpenSearch',
+        },
+      ],
+    });
+    expect(screen.getByText('Associate OpenSearch connections')).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 data source and DQCs after data source 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: 'S3',
+          },
+        ],
+      },
+      {
+        id: 'ds1-dqc1',
+        name: 'dqc1',
+        parentId: 'ds1',
+        connectionType: DataSourceConnectionType.DirectQueryConnection,
+        type: 'S3',
+      },
+    ]);
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx b/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx
index a352b4e970b4..a19bc605cd1a 100644
--- a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx
@@ -135,13 +135,13 @@ export const getUpdatedOptions = ({
 const tabOptions: EuiButtonGroupOptionProps[] = [
   {
     id: AssociationDataSourceModalTab.OpenSearchConnections,
-    label: i18n.translate('workspace.form.selectDataSource.subTitle', {
+    label: i18n.translate('workspace.form.dataSourceModal.tab.openSearchConnections', {
       defaultMessage: 'OpenSearch connections',
     }),
   },
   {
     id: AssociationDataSourceModalTab.DirectQueryConnections,
-    label: i18n.translate('workspace.form.selectDataSource.subTitle', {
+    label: i18n.translate('workspace.form.dataSourceModal.tab.directQueryConnections', {
       defaultMessage: 'Direct query connections',
     }),
   },
@@ -153,7 +153,7 @@ export interface AssociationDataSourceModalProps {
   savedObjects: SavedObjectsStart;
   assignedConnections: DataSourceConnection[];
   closeModal: () => void;
-  handleAssignDataSourceConnections: (connections: DataSourceConnection[]) => Promise<void>;
+  handleAssignDataSourceConnections: (connections: DataSourceConnection[]) => void;
 }
 
 export const AssociationDataSourceModal = ({
@@ -229,10 +229,14 @@ export const AssociationDataSourceModal = ({
         </EuiText>
         <EuiSpacer />
         <EuiButtonGroup
-          legend="Data source tab"
+          legend={i18n.translate('workspace.form.dataSourceModal.connectionTypeTab', {
+            defaultMessage: 'Connection type tab',
+          })}
           options={tabOptions}
           idSelected={currentTab}
-          onChange={(id) => setCurrentTab(id)}
+          onChange={(id) => {
+            setCurrentTab(id);
+          }}
           buttonSize="compressed"
         />
         <EuiSpacer size="s" />