WIP

Signed-off-by: yujin-emma <[email protected]>

CHANGELOG.md

@@ -70,6 +70,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Do not support import data source object to Local cluster when not enable data source ([#6395](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6395))
 - [Multiple Datasource] Refactor data source menu and interface to allow cleaner selection of component and related configurations ([#6256](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6256))
 - [Multiple Datasource] Allow top nav menu to mount data source menu for use case when both menus are mounted ([#6268](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6268))
+- [Multiple Datasource] Adjust the padding size for aggregated view ([#6715](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6715))
 - [Workspace] Add create workspace page ([#6179](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6179))
 - [Workspace] Add update workspace page ([#6270](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6270))
 - [Multiple Datasource] Make sure customer always have a default datasource ([#6237](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6237))

src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.scss

@@ -11,12 +11,18 @@
 
   .euiSelectableListItem__content {
     cursor: default;
-    padding-left: 0%;
+    padding-left: 0;
+    margin-right: 0;
 
 
   .euiSelectableListItem__text {
     max-height: 100%;
   }
+  .euiSelectableListItem__icon, .euiSelectableListItem__prepend {
+    margin-right: 0;
+  }
+
+
   }
 
   .dataSourceAggregatedViewOuiFlexGroup {
@@ -32,6 +38,7 @@
       overflow: hidden;
       white-space: nowrap;
       display: inline-block;
+      padding-left: 0%;
     }
   }
 

src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx

@@ -225,7 +225,11 @@ export class DataSourceAggregatedView extends React.Component<
                   options={items}
                   renderOption={(option) => (
                     <DataSourceItem
-                      className={'dataSourceAggregatedView'}
+                      className={
+                        !this.props.displayAllCompatibleDataSources
+                          ? 'dataSourceListAllActive'
+                          : 'dataSourceAggregatedView'
+                      }
                       option={option}
                       defaultDataSource={this.state.defaultDataSource}
                     />

src/plugins/data_source_management/public/components/data_source_item/data_source_item.scss

@@ -0,0 +1,17 @@
+.dataSourceAggregatedViewOuiFlexItem {
+  color: grey;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  padding-left: 0%;
+}
+
+.dataSourceListAllActiveOuiFlexItem {
+  color: grey;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  padding-left: 1em;
+}

src/plugins/data_source_management/public/components/data_source_item/data_source_item.tsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import { EuiBadge, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { DataSourceOption } from '../data_source_menu/types';
+import './data_source_item.scss';
 
 interface DataSourceItemProps {
   className: string;