fix on data source selectable and readonly component are not consiste…

…nt (opensearch-project#6545) Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>
LDrago27 · Jun 3, 2024 · 0e12ff2 · 0e12ff2
1 parent d5c490e
commit 0e12ff2
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 220 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -135,6 +135,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,
@@ -270,14 +269,16 @@ export class DataSourceSelectable extends React.Component<
         anchorPosition="downLeft"
         data-test-subj={'dataSourceSelectableContextMenuPopover'}
       >
+        <DataSourceDropDownHeader
+          totalDataSourceCount={this.state.dataSourceOptions.length}
+          application={this.props.application}
+        />
         <EuiContextMenuPanel>
-          <EuiPanel className={'dataSourceSelectableOuiPanel'} color="transparent" paddingSize="s">
-            <DataSourceDropDownHeader
-              totalDataSourceCount={this.state.dataSourceOptions.length}
-              application={this.props.application}
-            />
-            <EuiHorizontalRule margin="none" />
-            <EuiSpacer size="s" />
+          <EuiPanel
+            className={'dataSourceSelectableOuiPanel'}
+            color="transparent"
+            paddingSize="none"
+          >
             <EuiSelectable
               aria-label="Search"
               searchable
@@ -299,7 +300,7 @@ export class DataSourceSelectable extends React.Component<
             >
               {(list, search) => (
                 <>
-                  {search}
+                  <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
                   {list}
                 </>
               )}