fix on data source selectable and readonly component are not consistent

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>
opensearch-project · Apr 18, 2024 · 1830a8b · 1830a8b
1 parent fb76ee9
commit 1830a8b
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 158 deletions.
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
@@ -13,6 +13,8 @@ import {
   EuiSelectable,
   EuiSpacer,
   EuiHorizontalRule,
+  EuiFlyoutHeader,
+  EuiPopoverTitle,
 } from '@elastic/eui';
 import {
   ApplicationStart,
@@ -271,13 +273,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 +303,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