From eef417c03e7c4d34e85c70edb6c2079528ebc683 Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Mon, 15 Apr 2024 19:09:46 -0700
Subject: [PATCH] [Multiple Datasource] Fix style of data source option inside
 popover for data source selector, selectable, multi select components (#6438)

* adjust style

Signed-off-by: Lu Yu <nluyu@amazon.com>

* fix style for data source components

Signed-off-by: Lu Yu <nluyu@amazon.com>

* clean up

Signed-off-by: Lu Yu <nluyu@amazon.com>

* add change log

Signed-off-by: Lu Yu <nluyu@amazon.com>

* remove unused style prop

Signed-off-by: Lu Yu <nluyu@amazon.com>

* fix snapshot

Signed-off-by: Lu Yu <nluyu@amazon.com>

---------

Signed-off-by: Lu Yu <nluyu@amazon.com>
---
 CHANGELOG.md                                  |  1 +
 .../data_source_item.test.tsx}                | 10 +++---
 .../data_source_item/data_source_item.tsx     | 28 +++++++++++++++
 .../components/data_source_item/index.ts      |  6 ++++
 .../components/data_source_menu/types.ts      |  1 +
 .../data_source_filter_group.test.tsx.snap    | 27 ++++++--------
 .../data_source_filter_group.scss             | 13 +++++++
 .../data_source_filter_group.tsx              | 13 ++++---
 .../public/components/data_source_option.tsx  | 29 ---------------
 .../data_source_selectable.test.tsx.snap      | 21 +++--------
 .../data_source_selectable.scss               | 12 +++++++
 .../data_source_selectable.tsx                | 36 ++++++++-----------
 .../data_source_selector.scss                 |  8 +++++
 .../data_source_selector.tsx                  | 27 ++++++--------
 .../public/components/utils.ts                |  2 +-
 15 files changed, 123 insertions(+), 111 deletions(-)
 rename src/plugins/data_source_management/public/components/{data_source_option.test.tsx => data_source_item/data_source_item.test.tsx} (74%)
 create mode 100644 src/plugins/data_source_management/public/components/data_source_item/data_source_item.tsx
 create mode 100644 src/plugins/data_source_management/public/components/data_source_item/index.ts
 create mode 100644 src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.scss
 delete mode 100644 src/plugins/data_source_management/public/components/data_source_option.tsx
 create mode 100644 src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.scss
 create mode 100644 src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1440915fa3a2..cc9b07e96655 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -114,6 +114,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add base path when parse url in http service ([#6233](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6233))
 - [Multiple Datasource] Fix sslConfig for multiple datasource to handle when certificateAuthorities is unset ([#6282](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6282))
 - [BUG][Multiple Datasource]Fix bug in data source aggregated view to change it to depend on displayAllCompatibleDataSources property to show the badge value ([#6291](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6291))
+- [BUG][Multiple Datasource] Fix style of data source option inside popover for data source selector, selectable, multi select components ([#6438](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6438))
 - [BUG][Multiple Datasource]Read hideLocalCluster setting from yml and set in data source selector and data source menu ([#6361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6361))
 - [BUG][Multiple Datasource] Refactor read-only component to cover more edge cases ([#6416](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6416))
 - [BUG] Fix for checkForFunctionProperty so that order does not matter ([#6248](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6248))
diff --git a/src/plugins/data_source_management/public/components/data_source_option.test.tsx b/src/plugins/data_source_management/public/components/data_source_item/data_source_item.test.tsx
similarity index 74%
rename from src/plugins/data_source_management/public/components/data_source_option.test.tsx
rename to src/plugins/data_source_management/public/components/data_source_item/data_source_item.test.tsx
index 7d6375f47d29..8cb736f2fb61 100644
--- a/src/plugins/data_source_management/public/components/data_source_option.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_item/data_source_item.test.tsx
@@ -6,12 +6,12 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { DataSourceOptionItem } from './data_source_option';
-import { SelectedDataSourceOption } from './data_source_multi_selectable/data_source_filter_group';
+import { DataSourceItem } from '.';
+import { DataSourceOption } from '../data_source_menu/types';
 
 describe('Test on ShowDataSourceOption', () => {
   it('should render the component with label', () => {
-    const item: SelectedDataSourceOption = {
+    const item: DataSourceOption = {
       id: '1',
       label: 'DataSource 1',
       visible: true,
@@ -19,7 +19,7 @@ describe('Test on ShowDataSourceOption', () => {
     const defaultDataSource = null;
 
     const component = shallow(
-      <DataSourceOptionItem item={item} defaultDataSource={defaultDataSource} />
+      <DataSourceItem option={item} defaultDataSource={defaultDataSource} />
     );
 
     expect(component.find(EuiFlexGroup)).toHaveLength(1);
@@ -36,7 +36,7 @@ describe('Test on ShowDataSourceOption', () => {
     const defaultDataSource = '1';
 
     const component = shallow(
-      <DataSourceOptionItem item={item} defaultDataSource={defaultDataSource} />
+      <DataSourceItem option={item} defaultDataSource={defaultDataSource} />
     );
 
     expect(component.find(EuiFlexGroup)).toHaveLength(1);
diff --git a/src/plugins/data_source_management/public/components/data_source_item/data_source_item.tsx b/src/plugins/data_source_management/public/components/data_source_item/data_source_item.tsx
new file mode 100644
index 000000000000..06064ccd1836
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_item/data_source_item.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { EuiBadge, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { DataSourceOption } from '../data_source_menu/types';
+
+interface DataSourceItemProps {
+  className: string;
+  option: DataSourceOption[];
+  defaultDataSource: string | null;
+}
+
+export const DataSourceItem = ({ className, option, defaultDataSource }: DataSourceItemProps) => {
+  return (
+    <EuiFlexGroup justifyContent="spaceBetween" className={`${className}OuiFlexGroup`}>
+      <EuiFlexItem className={`${className}OuiFlexItem`} grow={false}>
+        {option.label || ''}
+      </EuiFlexItem>
+      {option.id === defaultDataSource && (
+        <EuiFlexItem grow={false}>
+          <EuiBadge iconSide="left">Default</EuiBadge>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+};
diff --git a/src/plugins/data_source_management/public/components/data_source_item/index.ts b/src/plugins/data_source_management/public/components/data_source_item/index.ts
new file mode 100644
index 000000000000..92148b4ce5b5
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_item/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { DataSourceItem } from './data_source_item';
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/types.ts b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
index ca589b0ccb4b..a37d7d0dd0c3 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/types.ts
+++ b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
@@ -14,6 +14,7 @@ import { DataSourceAttributes } from '../../types';
 export interface DataSourceOption {
   id: string;
   label?: string;
+  checked?: string;
 }
 
 export interface DataSourceGroupLabelOption extends DataSourceOption {
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_filter_group.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_filter_group.test.tsx.snap
index fe89b1409510..6dd693913865 100644
--- a/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_filter_group.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_filter_group.test.tsx.snap
@@ -43,13 +43,7 @@ exports[`DataSourceFilterGroup should render normally 1`] = `
     />
   </EuiPopoverTitle>
   <div
-    className="ouiFilterSelect__items"
-    style={
-      Object {
-        "maxHeight": 400,
-        "overflow": "scroll",
-      }
-    }
+    className="dataSourceFilterGroupItems"
   >
     <EuiFilterSelectItem
       checked="on"
@@ -62,9 +56,10 @@ exports[`DataSourceFilterGroup should render normally 1`] = `
         }
       }
     >
-      <DataSourceOptionItem
+      <DataSourceItem
+        className="dataSourceFilterGroup"
         defaultDataSource="1"
-        item={
+        option={
           Object {
             "checked": "on",
             "id": "1",
@@ -192,8 +187,7 @@ Object {
               </div>
             </div>
             <div
-              class="ouiFilterSelect__items"
-              style="max-height: 400px; overflow: scroll;"
+              class="dataSourceFilterGroupItems"
             >
               <button
                 class="euiFilterSelectItem"
@@ -215,10 +209,10 @@ Object {
                     class="euiFlexItem euiFilterSelectItem__content"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive dataSourceFilterGroupOuiFlexGroup"
                     >
                       <div
-                        class="euiFlexItem euiFlexItem--flexGrow1"
+                        class="euiFlexItem euiFlexItem--flexGrowZero dataSourceFilterGroupOuiFlexItem"
                       >
                         name1
                       </div>
@@ -511,8 +505,7 @@ Object {
               </div>
             </div>
             <div
-              class="ouiFilterSelect__items"
-              style="max-height: 400px; overflow: scroll;"
+              class="dataSourceFilterGroupItems"
             >
               <button
                 class="euiFilterSelectItem"
@@ -534,10 +527,10 @@ Object {
                     class="euiFlexItem euiFilterSelectItem__content"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive dataSourceFilterGroupOuiFlexGroup"
                     >
                       <div
-                        class="euiFlexItem euiFlexItem--flexGrow1"
+                        class="euiFlexItem euiFlexItem--flexGrowZero dataSourceFilterGroupOuiFlexItem"
                       >
                         name1
                       </div>
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.scss b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.scss
new file mode 100644
index 000000000000..4cd4a4048113
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.scss
@@ -0,0 +1,13 @@
+.dataSourceFilterGroupItems {
+  overflow: scroll;
+  max-width: 300px;
+
+  .dataSourceFilterGroupOuiFlexGroup {
+    .dataSourceFilterGroupOuiFlexItem {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-block;
+    }
+  }
+}
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx
index 948a788268d6..bb43b74ce003 100644
--- a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx
@@ -15,8 +15,9 @@ import {
   EuiButtonGroup,
   EuiButtonEmpty,
 } from '@elastic/eui';
-import { DataSourceOption } from '../data_source_selector/data_source_selector';
-import { DataSourceOptionItem } from '../data_source_option';
+import { DataSourceOption } from '../data_source_menu/types';
+import { DataSourceItem } from '../data_source_item';
+import './data_source_filter_group.scss';
 
 export interface SelectedDataSourceOption extends DataSourceOption {
   label: string;
@@ -138,7 +139,7 @@ export const DataSourceFilterGroup: React.FC<DataSourceFilterGroupProps> = ({
           data-test-subj="dataSourceMultiSelectFieldSearch"
         />
       </EuiPopoverTitle>
-      <div className="ouiFilterSelect__items" style={{ maxHeight: 400, overflow: 'scroll' }}>
+      <div className="dataSourceFilterGroupItems">
         {selectedOptions.map((item, index) => {
           const itemStyle: any = {};
           itemStyle.display = !item.visible ? 'none' : itemStyle.display;
@@ -151,7 +152,11 @@ export const DataSourceFilterGroup: React.FC<DataSourceFilterGroupProps> = ({
               showIcons={true}
               style={itemStyle}
             >
-              <DataSourceOptionItem item={item} defaultDataSource={defaultDataSource} />
+              <DataSourceItem
+                option={item}
+                defaultDataSource={defaultDataSource}
+                className={'dataSourceFilterGroup'}
+              />
             </EuiFilterSelectItem>
           );
         })}
diff --git a/src/plugins/data_source_management/public/components/data_source_option.tsx b/src/plugins/data_source_management/public/components/data_source_option.tsx
deleted file mode 100644
index cb5dac27d5ae..000000000000
--- a/src/plugins/data_source_management/public/components/data_source_option.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
-import { SelectedDataSourceOption } from './data_source_multi_selectable/data_source_filter_group';
-
-export interface DataSourceOptionItemProps {
-  item: SelectedDataSourceOption;
-  defaultDataSource: string | null;
-}
-
-export const DataSourceOptionItem: React.FC<DataSourceOptionItemProps> = ({
-  item,
-  defaultDataSource,
-}) => {
-  return (
-    <EuiFlexGroup alignItems="center">
-      <EuiFlexItem grow={1}>{item.label}</EuiFlexItem>
-      {item.id === defaultDataSource && (
-        <EuiFlexItem grow={false}>
-          <EuiBadge iconSide="left">Default</EuiBadge>
-        </EuiFlexItem>
-      )}
-    </EuiFlexGroup>
-  );
-};
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__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
index 851d37b3d71b..e49222c37d7c 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__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
@@ -33,13 +33,9 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
     items={Array []}
   >
     <EuiPanel
+      className="dataSourceSelectableOuiPanel"
       color="transparent"
       paddingSize="s"
-      style={
-        Object {
-          "width": "300px",
-        }
-      }
     >
       <EuiSpacer
         size="s"
@@ -118,13 +114,9 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
     items={Array []}
   >
     <EuiPanel
+      className="dataSourceSelectableOuiPanel"
       color="transparent"
       paddingSize="s"
-      style={
-        Object {
-          "width": "300px",
-        }
-      }
     >
       <EuiSpacer
         size="s"
@@ -182,13 +174,9 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
     items={Array []}
   >
     <EuiPanel
+      className="dataSourceSelectableOuiPanel"
       color="transparent"
       paddingSize="s"
-      style={
-        Object {
-          "width": "300px",
-        }
-      }
     >
       <EuiSpacer
         size="s"
@@ -283,8 +271,7 @@ Object {
               <div>
                 <div>
                   <div
-                    class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow"
-                    style="width: 300px;"
+                    class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow dataSourceSelectableOuiPanel"
                   >
                     <div
                       class="euiSpacer euiSpacer--s"
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.scss b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.scss
new file mode 100644
index 000000000000..4bc7296e3647
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.scss
@@ -0,0 +1,12 @@
+.dataSourceSelectableOuiPanel {
+  width: 300px;
+
+  .dataSourceSelectableOuiFlexGroup {
+    .dataSourceSelectableOuiFlexItem {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-block;
+    }
+  }
+}
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index 40a7edce7558..89f3d908dfe8 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -12,9 +12,6 @@ import {
   EuiButtonEmpty,
   EuiSelectable,
   EuiSpacer,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiBadge,
 } from '@elastic/eui';
 import {
   IUiSettingsClient,
@@ -26,6 +23,8 @@ import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
 import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
+import { DataSourceItem } from '../data_source_item';
+import './data_source_selectable.scss';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -40,16 +39,12 @@ interface DataSourceSelectableProps {
 }
 
 interface DataSourceSelectableState {
-  dataSourceOptions: SelectedDataSourceOption[];
+  dataSourceOptions: DataSourceOption[];
   isPopoverOpen: boolean;
-  selectedOption?: SelectedDataSourceOption[];
+  selectedOption?: DataSourceOption[];
   defaultDataSource: string | null;
 }
 
-interface SelectedDataSourceOption extends DataSourceOption {
-  checked?: string;
-}
-
 export const opensearchClusterGroupLabel: DataSourceGroupLabelOption = {
   id: 'opensearchClusterGroupLabel',
   label: 'OpenSearch cluster',
@@ -91,7 +86,7 @@ export class DataSourceSelectable extends React.Component<
   getUpdatedDataSourceOptions(
     selectedDataSourceId: string,
     dataSourceOptions: DataSourceOption[]
-  ): SelectedDataSourceOption[] {
+  ): DataSourceOption[] {
     return dataSourceOptions.map((option) => ({
       ...option,
       ...(option.id === selectedDataSourceId && { checked: 'on' }),
@@ -116,7 +111,7 @@ export class DataSourceSelectable extends React.Component<
       this.props.onSelectedDataSources([]);
       return;
     }
-    const updatedDataSourceOptions: SelectedDataSourceOption[] = this.getUpdatedDataSourceOptions(
+    const updatedDataSourceOptions: DataSourceOption[] = this.getUpdatedDataSourceOptions(
       id,
       dataSourceOptions
     );
@@ -144,7 +139,7 @@ export class DataSourceSelectable extends React.Component<
       return;
     }
 
-    const updatedDataSourceOptions: SelectedDataSourceOption[] = this.getUpdatedDataSourceOptions(
+    const updatedDataSourceOptions: DataSourceOption[] = this.getUpdatedDataSourceOptions(
       selectedDataSource[0].id,
       dataSourceOptions
     );
@@ -196,7 +191,7 @@ export class DataSourceSelectable extends React.Component<
     }
   }
 
-  onChange(options: SelectedDataSourceOption[]) {
+  onChange(options: DataSourceOption[]) {
     if (!this._isMounted) return;
     const selectedDataSource = options.find(({ checked }) => checked);
 
@@ -256,7 +251,7 @@ export class DataSourceSelectable extends React.Component<
         data-test-subj={'dataSourceSelectableContextMenuPopover'}
       >
         <EuiContextMenuPanel>
-          <EuiPanel color="transparent" paddingSize="s" style={{ width: '300px' }}>
+          <EuiPanel className={'dataSourceSelectableOuiPanel'} color="transparent" paddingSize="s">
             <EuiSpacer size="s" />
             <EuiSelectable
               aria-label="Search"
@@ -269,14 +264,11 @@ export class DataSourceSelectable extends React.Component<
               singleSelection={true}
               data-test-subj={'dataSourceSelectable'}
               renderOption={(option) => (
-                <EuiFlexGroup alignItems="center">
-                  <EuiFlexItem grow={1}>{option.label}</EuiFlexItem>
-                  {option.id === this.state.defaultDataSource && (
-                    <EuiFlexItem grow={false}>
-                      <EuiBadge iconSide="left">Default</EuiBadge>
-                    </EuiFlexItem>
-                  )}
-                </EuiFlexGroup>
+                <DataSourceItem
+                  option={option}
+                  defaultDataSource={this.state.defaultDataSource}
+                  className={'dataSourceSelectable'}
+                />
               )}
             >
               {(list, search) => (
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.scss b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.scss
new file mode 100644
index 000000000000..b245ffd0a081
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.scss
@@ -0,0 +1,8 @@
+.dataSourceSelectorOuiFlexGroup {
+  .dataSourceSelectorOuiFlexItem {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+  }
+}
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
index fa0235a6ec3d..bfe02b7288a2 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
@@ -5,11 +5,14 @@
 
 import React from 'react';
 import { i18n } from '@osd/i18n';
-import { EuiComboBox, EuiBadge, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { EuiComboBox } from '@elastic/eui';
 import { SavedObjectsClientContract, ToastsStart, SavedObject } from 'opensearch-dashboards/public';
 import { IUiSettingsClient } from 'src/core/public';
 import { getDataSourcesWithFields, getDefaultDataSource, getFilteredDataSources } from '../utils';
 import { DataSourceAttributes } from '../../types';
+import { DataSourceItem } from '../data_source_item';
+import './data_source_selector.scss';
+import { DataSourceOption } from '../data_source_menu/types';
 
 export const LocalCluster: DataSourceOption = {
   label: i18n.translate('dataSource.localCluster', {
@@ -37,13 +40,7 @@ interface DataSourceSelectorState {
   selectedOption: DataSourceOption[];
   allDataSources: Array<SavedObject<DataSourceAttributes>>;
   defaultDataSource: string | null;
-  dataSourceOptions?: DataSourceOption[];
-}
-
-export interface DataSourceOption {
-  label: string;
-  id: string;
-  checked?: string;
+  dataSourceOptions: DataSourceOption[];
 }
 
 export class DataSourceSelector extends React.Component<
@@ -59,6 +56,7 @@ export class DataSourceSelector extends React.Component<
       allDataSources: [],
       defaultDataSource: '',
       selectedOption: this.props.hideLocalCluster ? [] : [LocalCluster],
+      dataSourceOptions: [],
     };
   }
 
@@ -234,14 +232,11 @@ export class DataSourceSelector extends React.Component<
         fullWidth={this.props.fullWidth || false}
         data-test-subj={'dataSourceSelectorComboBox'}
         renderOption={(option) => (
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem grow={1}>{option.label}</EuiFlexItem>
-            {option.id === this.state.defaultDataSource && (
-              <EuiFlexItem grow={false}>
-                <EuiBadge iconSide="left">Default</EuiBadge>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
+          <DataSourceItem
+            className={'dataSourceSelector'}
+            option={option}
+            defaultDataSource={this.state.defaultDataSource}
+          />
         )}
       />
     );
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index 88bb7ba57e6a..e433cdff52c5 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -18,7 +18,7 @@ import {
   noAuthCredentialAuthMethod,
 } from '../types';
 import { AuthenticationMethodRegistry } from '../auth_registry';
-import { DataSourceOption } from './data_source_selector/data_source_selector';
+import { DataSourceOption } from './data_source_menu/types';
 
 export async function getDataSources(savedObjectsClient: SavedObjectsClientContract) {
   return savedObjectsClient