fix on data source selectable and readonly component are not consistent

Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>
zhyuanqi · Apr 18, 2024 · 2232590 · 2232590
1 parent fb76ee9
commit 2232590
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 160 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -133,6 +133,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Dynamic Configurations] Fix dynamic config API calls to pass correct input ([#6474](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6474))
 - [BUG][Multiple Datasource] Modify the button of selectable component to fix the title overflow issue ([#6465](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6465))
 - [BUG][Multiple Datasource] Validation succeed as long as status code in response is 200 ([#6399](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6399))
+- [BUG][Multiple Datasource] Fix on data source selectable and readonly component are not consistent ([#6545]https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6545)
 - [BUG][Multiple Datasource] Add validation for title length to be no longer than 32 characters [#6452](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6452))
 
 ### 🚞 Infrastructure

diff --git a/...blic/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/...blic/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
diff --git a/...ata_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/...ata_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -11,8 +11,7 @@ import {
   EuiPanel,
   EuiButtonEmpty,
   EuiSelectable,
-  EuiSpacer,
-  EuiHorizontalRule,
+  EuiPopoverTitle,
 } from '@elastic/eui';
 import {
   ApplicationStart,
@@ -271,13 +270,15 @@ export class DataSourceSelectable extends React.Component<
         data-test-subj={'dataSourceSelectableContextMenuPopover'}
       >
         <EuiContextMenuPanel>
-          <EuiPanel className={'dataSourceSelectableOuiPanel'} color="transparent" paddingSize="s">
+          <EuiPanel
+            className={'dataSourceSelectableOuiPanel'}
+            color="transparent"
+            paddingSize="none"
+          >
             <DataSourceDropDownHeader
               totalDataSourceCount={this.state.dataSourceOptions.length}
               application={this.props.application}
             />
-            <EuiHorizontalRule margin="none" />
-            <EuiSpacer size="s" />
             <EuiSelectable
               aria-label="Search"
               searchable
@@ -299,7 +300,7 @@ export class DataSourceSelectable extends React.Component<
             >
               {(list, search) => (
                 <>
-                  {search}
+                  <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
                   {list}
                 </>
               )}

diff --git a/...anagement/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/...anagement/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap