diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
index cb7e4410472c..c462fe38e73a 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
@@ -7,6 +7,7 @@ Object {
     <div>
       <div
         class="euiPopover euiPopover--anchorDownLeft"
+        data-test-subj="dataSourceSelectableContextMenuPopover"
         id="dataSourceSelectableContextMenuPopover"
       >
         <div
@@ -38,6 +39,7 @@ Object {
   "container": <div>
     <div
       class="euiPopover euiPopover--anchorDownLeft"
+      data-test-subj="dataSourceSelectableContextMenuPopover"
       id="dataSourceSelectableContextMenuPopover"
     >
       <div
@@ -134,6 +136,7 @@ Object {
         >
           <div
             class="euiPopover euiPopover--anchorDownLeft"
+            data-test-subj="dataSourceSelectableContextMenuPopover"
             id="dataSourceSelectableContextMenuPopover"
           >
             <div
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
index 4015e246853f..70ca70fd5ce3 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
@@ -5,10 +5,9 @@
 
 import React, { ReactElement } from 'react';
 
-import { DataSourceSelectable } from './data_source_selectable';
 import { DataSourceAggregatedView } from '../data_source_aggregated_view';
 import { DataSourceView } from '../data_source_view';
-import { DataSourceMultiSelectable } from '../data_source_multi_selectable/data_source_multi_selectable';
+import { DataSourceMultiSelectable } from '../data_source_multi_selectable';
 import {
   DataSourceAggregatedViewConfig,
   DataSourceComponentType,
@@ -17,6 +16,7 @@ import {
   DataSourceSelectableConfig,
   DataSourceViewConfig,
 } from './types';
+import { DataSourceSelectable } from '../data_source_selectable';
 
 export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement | null {
   const { componentType, componentConfig } = props;
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
similarity index 97%
rename from src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap
rename to src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index 56c0e85d0219..2cb8dff8a94d 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
     </React.Fragment>
   }
   closePopover={[Function]}
+  data-test-subj="dataSourceSelectableContextMenuPopover"
   display="inlineBlock"
   hasArrow={true}
   id="dataSourceSelectableContextMenuPopover"
@@ -51,7 +52,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
             },
             Object {
               "id": "test2",
-              "label": "test3",
+              "label": "test2",
             },
             Object {
               "id": "test3",
@@ -94,6 +95,7 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
     </React.Fragment>
   }
   closePopover={[Function]}
+  data-test-subj="dataSourceSelectableContextMenuPopover"
   display="inlineBlock"
   hasArrow={true}
   id="dataSourceSelectableContextMenuPopover"
@@ -153,6 +155,7 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
     </React.Fragment>
   }
   closePopover={[Function]}
+  data-test-subj="dataSourceSelectableContextMenuPopover"
   display="inlineBlock"
   hasArrow={true}
   id="dataSourceSelectableContextMenuPopover"
@@ -199,6 +202,7 @@ Object {
     <div>
       <div
         class="euiPopover euiPopover--anchorDownLeft"
+        data-test-subj="dataSourceSelectableContextMenuPopover"
         id="dataSourceSelectableContextMenuPopover"
       >
         <div
@@ -338,6 +342,7 @@ Object {
   "container": <div>
     <div
       class="euiPopover euiPopover--anchorDownLeft"
+      data-test-subj="dataSourceSelectableContextMenuPopover"
       id="dataSourceSelectableContextMenuPopover"
     >
       <div
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
similarity index 65%
rename from src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx
rename to src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
index 74c6d5d9e5a6..86a40e24a5c2 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ShallowWrapper, shallow } from 'enzyme';
+import { ShallowWrapper, shallow, mount } from 'enzyme';
 import { SavedObjectsClientContract } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
@@ -90,15 +90,77 @@ describe('DataSourceSelectable', () => {
       <DataSourceSelectable
         savedObjectsClient={client}
         notifications={toasts}
-        onSelectedDataSource={onSelectedDataSource}
+        onSelectedDataSources={onSelectedDataSource}
         disabled={false}
         hideLocalCluster={false}
         fullWidth={false}
         dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
       />
     );
+
+    await nextTick();
+
     const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
     button.click();
+
+    expect(container.getByTestId('dataSourceSelectableContextMenuPopover')).toBeVisible();
     expect(container).toMatchSnapshot();
   });
+
+  it('should callback if changed state', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = mount(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+    await nextTick();
+
+    const containerInstance = container.instance();
+
+    containerInstance.onChange([{ id: 'test2', label: 'test2' }]);
+    expect(onSelectedDataSource).toBeCalledTimes(0);
+    expect(containerInstance.state).toEqual({
+      dataSourceOptions: [
+        {
+          id: 'test2',
+          label: 'test2',
+        },
+      ],
+      isPopoverOpen: false,
+      selectedOption: [
+        {
+          id: '',
+          label: 'Local cluster',
+        },
+      ],
+    });
+
+    containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
+    expect(containerInstance.state).toEqual({
+      dataSourceOptions: [
+        {
+          checked: 'on',
+          id: 'test2',
+          label: 'test2',
+        },
+      ],
+      isPopoverOpen: false,
+      selectedOption: [
+        {
+          checked: 'on',
+          id: 'test2',
+          label: 'test2',
+        },
+      ],
+    });
+    expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
+    expect(onSelectedDataSource).toBeCalledTimes(1);
+  });
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
similarity index 86%
rename from src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx
rename to src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index b2c8cdbe9db0..e0fccf9aa226 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -6,7 +6,6 @@
 import React from 'react';
 import { i18n } from '@osd/i18n';
 import {
-  EuiIcon,
   EuiPopover,
   EuiContextMenuPanel,
   EuiPanel,
@@ -19,7 +18,7 @@ import { getDataSourcesWithFields } from '../utils';
 import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
-import { DataSourceOption } from './types';
+import { DataSourceOption } from '../data_source_menu/types';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -33,9 +32,13 @@ interface DataSourceSelectableProps {
 }
 
 interface DataSourceSelectableState {
-  dataSourceOptions: DataSourceOption[];
-  selectedOption: DataSourceOption[];
+  dataSourceOptions: SelectedDataSourceOption[];
   isPopoverOpen: boolean;
+  selectedOption?: SelectedDataSourceOption[];
+}
+
+interface SelectedDataSourceOption extends DataSourceOption {
+  checked?: boolean;
 }
 
 export class DataSourceSelectable extends React.Component<
@@ -48,6 +51,7 @@ export class DataSourceSelectable extends React.Component<
     super(props);
 
     this.state = {
+      dataSourceOptions: [],
       isPopoverOpen: false,
       selectedOption: this.props.selectedOption
         ? this.props.selectedOption
@@ -76,7 +80,7 @@ export class DataSourceSelectable extends React.Component<
     getDataSourcesWithFields(this.props.savedObjectsClient, ['id', 'title', 'auth.type'])
       .then((fetchedDataSources) => {
         if (fetchedDataSources?.length) {
-          let filteredDataSources = [];
+          let filteredDataSources: Array<SavedObject<DataSourceAttributes>> = [];
           if (this.props.dataSourceFilter) {
             filteredDataSources = fetchedDataSources.filter((ds) =>
               this.props.dataSourceFilter!(ds)
@@ -113,15 +117,21 @@ export class DataSourceSelectable extends React.Component<
       });
   }
 
-  onChange(options) {
+  onChange(options: SelectedDataSourceOption[]) {
     if (!this._isMounted) return;
     const selectedDataSource = options.find(({ checked }) => checked);
 
-    this.setState({
-      selectedOption: [selectedDataSource],
-    });
+    this.setState({ dataSourceOptions: options });
+
+    if (selectedDataSource) {
+      this.setState({
+        selectedOption: [selectedDataSource],
+      });
 
-    this.props.onSelectedDataSources([selectedDataSource]);
+      this.props.onSelectedDataSources([
+        { id: selectedDataSource.id!, label: selectedDataSource.label },
+      ]);
+    }
   }
 
   render() {
@@ -155,6 +165,7 @@ export class DataSourceSelectable extends React.Component<
         closePopover={this.closePopover.bind(this)}
         panelPaddingSize="none"
         anchorPosition="downLeft"
+        data-test-subj={'dataSourceSelectableContextMenuPopover'}
       >
         <EuiContextMenuPanel>
           <EuiPanel color="transparent" paddingSize="s">
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/index.ts b/src/plugins/data_source_management/public/components/data_source_selectable/index.ts
new file mode 100644
index 000000000000..5ddc2d2ba751
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/index.ts
@@ -0,0 +1,5 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export { DataSourceSelectable } from './data_source_selectable';
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap
index 2b8e3eba860d..7306d202ff7b 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`DataSourceSelector: check dataSource options should always place local
       },
       Object {
         "id": "test2",
-        "label": "test3",
+        "label": "test2",
       },
       Object {
         "id": "test3",
@@ -127,7 +127,7 @@ exports[`DataSourceSelector: check dataSource options should filter options if c
       },
       Object {
         "id": "test2",
-        "label": "test3",
+        "label": "test2",
       },
       Object {
         "id": "test3",
@@ -176,7 +176,7 @@ exports[`DataSourceSelector: check dataSource options should hide prepend if rem
       },
       Object {
         "id": "test2",
-        "label": "test3",
+        "label": "test2",
       },
       Object {
         "id": "test3",
@@ -247,7 +247,7 @@ exports[`DataSourceSelector: check dataSource options should show custom placeho
       },
       Object {
         "id": "test2",
-        "label": "test3",
+        "label": "test2",
       },
       Object {
         "id": "test3",
diff --git a/src/plugins/data_source_management/public/mocks.ts b/src/plugins/data_source_management/public/mocks.ts
index d04fc2a362d3..13ccbf4e8f26 100644
--- a/src/plugins/data_source_management/public/mocks.ts
+++ b/src/plugins/data_source_management/public/mocks.ts
@@ -141,7 +141,7 @@ export const getDataSourcesWithFieldsResponse = {
       type: 'data-source',
       description: 'test datasource2',
       attributes: {
-        title: 'test3',
+        title: 'test2',
         auth: {
           type: AuthType.UsernamePasswordType,
         },