WIP

Signed-off-by: yujin-emma <[email protected]>
opensearch-project · May 3, 2024 · cd26af5 · cd26af5
1 parent 81af4e4
commit cd26af5
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 2 deletions.
diff --git a/...management/public/components/data_source_aggregated_view/data_source_aggregated_view.scss b/...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%;
     }
   }
 

diff --git a/..._management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx b/..._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}
                     />

diff --git a/src/plugins/data_source_management/public/components/data_source_item/data_source_item.scss b/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;
+}
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
@@ -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;