[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 <[email protected]>

* fix style for data source components

Signed-off-by: Lu Yu <[email protected]>

* clean up

Signed-off-by: Lu Yu <[email protected]>

* add change log

Signed-off-by: Lu Yu <[email protected]>

* remove unused style prop

Signed-off-by: Lu Yu <[email protected]>

* fix snapshot

Signed-off-by: Lu Yu <[email protected]>

---------

Signed-off-by: Lu Yu <[email protected]>
(cherry picked from commit eef417c)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

src/plugins/data_source_management/public/components/data_source_option.test.tsx → src/plugins/data_source_management/public/components/data_source_item/data_source_item.test.tsx

@@ -6,20 +6,20 @@
 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,
     };
     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);

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>
+  );
+};

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';

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 {

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;
+    }
+  }
+}

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>
           );
         })}

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;
+    }
+  }
+}