From 1e23ce065103b41b9e7b2b8b862fc1ddfefe5fb3 Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Fri, 12 Apr 2024 18:05:22 +0000
Subject: [PATCH 1/6] adjust style

Signed-off-by: Lu Yu <nluyu@amazon.com>
---
 .../data_source_selector.tsx                    | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

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..32815bf8ef4a 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
@@ -234,10 +234,21 @@ 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>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem
+              grow={false}
+              component="span"
+              style={{
+                'text-overflow': 'ellipsis',
+                overflow: 'hidden',
+                'white-space': 'nowrap',
+                display: 'inline-block',
+              }}
+            >
+              {option.label}
+            </EuiFlexItem>
             {option.id === this.state.defaultDataSource && (
-              <EuiFlexItem grow={false}>
+              <EuiFlexItem grow={false} component="span">
                 <EuiBadge iconSide="left">Default</EuiBadge>
               </EuiFlexItem>
             )}

From ceefbd5cd5ddd9a1fa0dd4fad45c9024fba9b1ff Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Sat, 13 Apr 2024 04:22:36 +0000
Subject: [PATCH 2/6] fix style for data source components

Signed-off-by: Lu Yu <nluyu@amazon.com>
---
 .../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    | 28 +++++++---------
 .../data_source_filter_group.scss             | 14 ++++++++
 .../data_source_filter_group.tsx              | 11 +++++--
 .../public/components/data_source_option.tsx  | 29 ----------------
 .../data_source_selectable.test.tsx.snap      | 21 +++---------
 .../data_source_selectable.scss               | 12 +++++++
 .../data_source_selectable.tsx                | 33 ++++++++-----------
 .../data_source_selector.scss                 |  8 +++++
 .../data_source_selector.tsx                  | 28 +++++-----------
 13 files changed, 119 insertions(+), 110 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/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 17aa35d8b8d0..7c32cd3cd3df 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..2963bb5c89e1 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,8 @@ exports[`DataSourceFilterGroup should render normally 1`] = `
     />
   </EuiPopoverTitle>
   <div
-    className="ouiFilterSelect__items"
-    style={
-      Object {
-        "maxHeight": 400,
-        "overflow": "scroll",
-      }
-    }
+    className="dataSourceFilterGroupItems"
+    style={Object {}}
   >
     <EuiFilterSelectItem
       checked="on"
@@ -62,9 +57,10 @@ exports[`DataSourceFilterGroup should render normally 1`] = `
         }
       }
     >
-      <DataSourceOptionItem
+      <DataSourceItem
+        className="dataSourceFilterGroup"
         defaultDataSource="1"
-        item={
+        option={
           Object {
             "checked": "on",
             "id": "1",
@@ -192,8 +188,7 @@ Object {
               </div>
             </div>
             <div
-              class="ouiFilterSelect__items"
-              style="max-height: 400px; overflow: scroll;"
+              class="dataSourceFilterGroupItems"
             >
               <button
                 class="euiFilterSelectItem"
@@ -215,10 +210,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 +506,7 @@ Object {
               </div>
             </div>
             <div
-              class="ouiFilterSelect__items"
-              style="max-height: 400px; overflow: scroll;"
+              class="dataSourceFilterGroupItems"
             >
               <button
                 class="euiFilterSelectItem"
@@ -534,10 +528,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..78b9608a8cae
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.scss
@@ -0,0 +1,14 @@
+.dataSourceFilterGroupItems {
+  max-height: 400px;
+  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..b25fd8c3a0f2 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
@@ -16,7 +16,8 @@ import {
   EuiButtonEmpty,
 } from '@elastic/eui';
 import { DataSourceOption } from '../data_source_selector/data_source_selector';
-import { DataSourceOptionItem } from '../data_source_option';
+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" style={{}}>
         {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..8efed2c528f3 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
@@ -26,6 +26,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 +42,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 +89,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 +114,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 +142,7 @@ export class DataSourceSelectable extends React.Component<
       return;
     }
 
-    const updatedDataSourceOptions: SelectedDataSourceOption[] = this.getUpdatedDataSourceOptions(
+    const updatedDataSourceOptions: DataSourceOption[] = this.getUpdatedDataSourceOptions(
       selectedDataSource[0].id,
       dataSourceOptions
     );
@@ -196,7 +194,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 +254,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 +267,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 32815bf8ef4a..77fddc107e07 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,13 @@
 
 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';
 
 export const LocalCluster: DataSourceOption = {
   label: i18n.translate('dataSource.localCluster', {
@@ -234,25 +236,11 @@ export class DataSourceSelector extends React.Component<
         fullWidth={this.props.fullWidth || false}
         data-test-subj={'dataSourceSelectorComboBox'}
         renderOption={(option) => (
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem
-              grow={false}
-              component="span"
-              style={{
-                'text-overflow': 'ellipsis',
-                overflow: 'hidden',
-                'white-space': 'nowrap',
-                display: 'inline-block',
-              }}
-            >
-              {option.label}
-            </EuiFlexItem>
-            {option.id === this.state.defaultDataSource && (
-              <EuiFlexItem grow={false} component="span">
-                <EuiBadge iconSide="left">Default</EuiBadge>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
+          <DataSourceItem
+            className={'dataSourceSelector'}
+            option={option}
+            defaultDataSource={this.state.defaultDataSource}
+          />
         )}
       />
     );

From dd271c043048ec9b70ab638288503f0392ed33d3 Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Sat, 13 Apr 2024 04:45:12 +0000
Subject: [PATCH 3/6] clean up

Signed-off-by: Lu Yu <nluyu@amazon.com>
---
 .../data_source_filter_group.scss                      |  1 -
 .../data_source_filter_group.tsx                       |  2 +-
 .../data_source_selectable/data_source_selectable.tsx  |  3 ---
 .../data_source_selector/data_source_selector.tsx      | 10 +++-------
 .../data_source_management/public/components/utils.ts  |  2 +-
 5 files changed, 5 insertions(+), 13 deletions(-)

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
index 78b9608a8cae..4cd4a4048113 100644
--- 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
@@ -1,5 +1,4 @@
 .dataSourceFilterGroupItems {
-  max-height: 400px;
   overflow: scroll;
   max-width: 300px;
 
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 b25fd8c3a0f2..c5bf0ae3cf19 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,7 +15,7 @@ import {
   EuiButtonGroup,
   EuiButtonEmpty,
 } from '@elastic/eui';
-import { DataSourceOption } from '../data_source_selector/data_source_selector';
+import { DataSourceOption } from '../data_source_menu/types';
 import { DataSourceItem } from '../data_source_item';
 import './data_source_filter_group.scss';
 
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 8efed2c528f3..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,
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 77fddc107e07..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
@@ -12,6 +12,7 @@ import { getDataSourcesWithFields, getDefaultDataSource, getFilteredDataSources
 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', {
@@ -39,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<
@@ -61,6 +56,7 @@ export class DataSourceSelector extends React.Component<
       allDataSources: [],
       defaultDataSource: '',
       selectedOption: this.props.hideLocalCluster ? [] : [LocalCluster],
+      dataSourceOptions: [],
     };
   }
 
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index b8c76bcf858c..81c0cd5c707a 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -16,7 +16,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

From 7bd95f7a6e6d78428df8c4d7693c38714a9c5f1d Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Sat, 13 Apr 2024 05:14:07 +0000
Subject: [PATCH 4/6] add change log

Signed-off-by: Lu Yu <nluyu@amazon.com>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c47868108004..5efe60305363 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -112,6 +112,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] Fix for checkForFunctionProperty so that order does not matter ([#6248](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6248))
 

From d1322be1709d2324ce3cc7e3f1337c24694ffbef Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Mon, 15 Apr 2024 22:24:33 +0000
Subject: [PATCH 5/6] remove unused style prop

Signed-off-by: Lu Yu <nluyu@amazon.com>
---
 .../data_source_multi_selectable/data_source_filter_group.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 c5bf0ae3cf19..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
@@ -139,7 +139,7 @@ export const DataSourceFilterGroup: React.FC<DataSourceFilterGroupProps> = ({
           data-test-subj="dataSourceMultiSelectFieldSearch"
         />
       </EuiPopoverTitle>
-      <div className="dataSourceFilterGroupItems" style={{}}>
+      <div className="dataSourceFilterGroupItems">
         {selectedOptions.map((item, index) => {
           const itemStyle: any = {};
           itemStyle.display = !item.visible ? 'none' : itemStyle.display;

From 5eecb7435895c743a3fda6cec0f008757929e41b Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Tue, 16 Apr 2024 00:04:28 +0000
Subject: [PATCH 6/6] fix snapshot

Signed-off-by: Lu Yu <nluyu@amazon.com>
---
 .../__snapshots__/data_source_filter_group.test.tsx.snap         | 1 -
 1 file changed, 1 deletion(-)

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 2963bb5c89e1..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
@@ -44,7 +44,6 @@ exports[`DataSourceFilterGroup should render normally 1`] = `
   </EuiPopoverTitle>
   <div
     className="dataSourceFilterGroupItems"
-    style={Object {}}
   >
     <EuiFilterSelectItem
       checked="on"