From 0e12ff232fc9b8e20fdeecb4b8adce161e572d8b Mon Sep 17 00:00:00 2001
From: "Yuanqi(Ella) Zhu" <53279298+zhyuanqi@users.noreply.github.com>
Date: Fri, 19 Apr 2024 11:19:27 -0700
Subject: [PATCH] fix on data source selectable and readonly component are not
 consistent (#6545)

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>
---
 CHANGELOG.md                                  |   1 +
 .../data_source_selectable.test.tsx.snap      | 160 ++++++++----------
 .../data_source_selectable.tsx                |  21 +--
 .../data_source_view.test.tsx.snap            | 110 +++++-------
 .../data_source_view/data_source_view.tsx     |  18 +-
 .../drop_down_header.test.tsx.snap            |  83 ++++-----
 .../drop_down_header/drop_down_header.tsx     |   6 +-
 7 files changed, 179 insertions(+), 220 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e30eac70f9..4db3f3299dc 100644
--- 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/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index 79d158ee3be..b3abb935afe 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -29,6 +29,9 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
   ownFocus={true}
   panelPaddingSize="none"
 >
+  <DataSourceDropDownHeader
+    totalDataSourceCount={3}
+  />
   <EuiContextMenuPanel
     hasFocus={true}
     items={Array []}
@@ -36,17 +39,8 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
     <EuiPanel
       className="dataSourceSelectableOuiPanel"
       color="transparent"
-      paddingSize="s"
+      paddingSize="none"
     >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={3}
-      />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
-        size="s"
-      />
       <EuiSelectable
         aria-label="Search"
         data-test-subj="dataSourceSelectable"
@@ -113,6 +107,9 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
   ownFocus={true}
   panelPaddingSize="none"
 >
+  <DataSourceDropDownHeader
+    totalDataSourceCount={0}
+  />
   <EuiContextMenuPanel
     hasFocus={true}
     items={Array []}
@@ -120,17 +117,8 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
     <EuiPanel
       className="dataSourceSelectableOuiPanel"
       color="transparent"
-      paddingSize="s"
+      paddingSize="none"
     >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={0}
-      />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
-        size="s"
-      />
       <EuiSelectable
         aria-label="Search"
         data-test-subj="dataSourceSelectable"
@@ -181,6 +169,9 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
   ownFocus={true}
   panelPaddingSize="none"
 >
+  <DataSourceDropDownHeader
+    totalDataSourceCount={0}
+  />
   <EuiContextMenuPanel
     hasFocus={true}
     items={Array []}
@@ -188,17 +179,8 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
     <EuiPanel
       className="dataSourceSelectableOuiPanel"
       color="transparent"
-      paddingSize="s"
+      paddingSize="none"
     >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={0}
-      />
-      <EuiHorizontalRule
-        margin="none"
-      />
-      <EuiSpacer
-        size="s"
-      />
       <EuiSelectable
         aria-label="Search"
         data-test-subj="dataSourceSelectable"
@@ -283,6 +265,36 @@ Object {
             You are in a dialog. To close this dialog, hit escape.
           </p>
           <div>
+            <div
+              class="euiPopoverTitle euiPopoverTitle--paddingSmall"
+            >
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
+              >
+                <div
+                  class="euiFlexItem"
+                >
+                  DATA SOURCES
+                   (
+                  3
+                  )
+                </div>
+                <div
+                  class="dataSourceDropDownHeaderInvisibleFocusable"
+                  tabindex="0"
+                />
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <button
+                    class="euiLink euiLink--primary"
+                    type="button"
+                  >
+                    Manage
+                  </button>
+                </div>
+              </div>
+            </div>
             <div
               class="euiContextMenuPanel"
               tabindex="-1"
@@ -290,77 +302,49 @@ Object {
               <div>
                 <div>
                   <div
-                    class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow dataSourceSelectableOuiPanel"
+                    class="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow dataSourceSelectableOuiPanel"
                   >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiTitle euiTitle--xxxsmall"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      >
-                        DATA SOURCES
-                         (
-                        3
-                        )
-                      </div>
-                      <div
-                        class="dataSourceDropDownHeaderInvisibleFocusable"
-                        tabindex="0"
-                      />
-                      <div
-                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                      >
-                        <button
-                          class="euiLink euiLink--primary"
-                          type="button"
-                        >
-                          Manage
-                        </button>
-                      </div>
-                    </div>
-                    <hr
-                      class="euiHorizontalRule euiHorizontalRule--full"
-                    />
-                    <div
-                      class="euiSpacer euiSpacer--s"
-                    />
                     <div
                       class="euiSelectable"
                       data-test-subj="dataSourceSelectable"
                     >
                       <div
-                        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                        class="euiPopoverTitle euiPopoverTitle--paddingSmall"
                       >
                         <div
-                          class="euiFormControlLayout__childrenWrapper"
+                          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                         >
-                          <input
-                            aria-activedescendant=""
-                            aria-autocomplete="list"
-                            aria-controls="generated-id_listbox"
-                            aria-expanded="true"
-                            aria-haspopup="listbox"
-                            aria-label="Search"
-                            aria-owns="generated-id_listbox"
-                            autocomplete="off"
-                            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
-                            placeholder="Search"
-                            role="combobox"
-                            type="search"
-                            value=""
-                          />
                           <div
-                            class="euiFormControlLayoutIcons"
+                            class="euiFormControlLayout__childrenWrapper"
                           >
-                            <span
-                              class="euiFormControlLayoutCustomIcon"
+                            <input
+                              aria-activedescendant=""
+                              aria-autocomplete="list"
+                              aria-controls="generated-id_listbox"
+                              aria-expanded="true"
+                              aria-haspopup="listbox"
+                              aria-label="Search"
+                              aria-owns="generated-id_listbox"
+                              autocomplete="off"
+                              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
+                              placeholder="Search"
+                              role="combobox"
+                              type="search"
+                              value=""
+                            />
+                            <div
+                              class="euiFormControlLayoutIcons"
                             >
                               <span
-                                aria-hidden="true"
-                                class="euiFormControlLayoutCustomIcon__icon"
-                                data-euiicon-type="search"
-                              />
-                            </span>
+                                class="euiFormControlLayoutCustomIcon"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiFormControlLayoutCustomIcon__icon"
+                                  data-euiicon-type="search"
+                                />
+                              </span>
+                            </div>
                           </div>
                         </div>
                       </div>
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index 2259f93fbbe..c1aafb0b2a3 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_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}
                 </>
               )}
diff --git a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
index 954e4924795..efe373e7d82 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
@@ -24,24 +24,18 @@ exports[`DataSourceView Should render successfully when provided datasource has
   ownFocus={true}
   panelPaddingSize="none"
 >
+  <DataSourceDropDownHeader
+    totalDataSourceCount={1}
+  />
   <EuiContextMenuPanel
+    className="dataSourceViewOuiPanel"
     hasFocus={true}
     items={Array []}
   >
-    <EuiPanel
-      borderRadius="none"
-      className="dataSourceViewOuiPanel"
-      color="transparent"
-      paddingSize="s"
-    >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={1}
-      />
-    </EuiPanel>
     <EuiPanel
       borderRadius="none"
       color="subdued"
-      paddingSize="xs"
+      paddingSize="none"
     >
       <EuiSelectable
         compressed={true}
@@ -103,24 +97,18 @@ exports[`DataSourceView should call getDataSourceById when only pass id with no
   ownFocus={true}
   panelPaddingSize="none"
 >
+  <DataSourceDropDownHeader
+    totalDataSourceCount={1}
+  />
   <EuiContextMenuPanel
+    className="dataSourceViewOuiPanel"
     hasFocus={true}
     items={Array []}
   >
-    <EuiPanel
-      borderRadius="none"
-      className="dataSourceViewOuiPanel"
-      color="transparent"
-      paddingSize="s"
-    >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={1}
-      />
-    </EuiPanel>
     <EuiPanel
       borderRadius="none"
       color="subdued"
-      paddingSize="xs"
+      paddingSize="none"
     >
       <EuiSelectable
         compressed={true}
@@ -174,24 +162,18 @@ exports[`DataSourceView should render normally with local cluster not hidden 1`]
   ownFocus={true}
   panelPaddingSize="none"
 >
+  <DataSourceDropDownHeader
+    totalDataSourceCount={1}
+  />
   <EuiContextMenuPanel
+    className="dataSourceViewOuiPanel"
     hasFocus={true}
     items={Array []}
   >
-    <EuiPanel
-      borderRadius="none"
-      className="dataSourceViewOuiPanel"
-      color="transparent"
-      paddingSize="s"
-    >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={1}
-      />
-    </EuiPanel>
     <EuiPanel
       borderRadius="none"
       color="subdued"
-      paddingSize="xs"
+      paddingSize="none"
     >
       <EuiSelectable
         compressed={true}
@@ -277,41 +259,41 @@ Object {
           </p>
           <div>
             <div
-              class="euiContextMenuPanel"
+              class="euiPopoverTitle euiPopoverTitle--paddingSmall"
+            >
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
+              >
+                <div
+                  class="euiFlexItem"
+                >
+                  DATA SOURCE
+                   (
+                  1
+                  )
+                </div>
+                <div
+                  class="dataSourceDropDownHeaderInvisibleFocusable"
+                  tabindex="0"
+                />
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <button
+                    class="euiLink euiLink--primary"
+                    type="button"
+                  >
+                    Manage
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiContextMenuPanel dataSourceViewOuiPanel"
               tabindex="-1"
             >
               <div>
                 <div>
-                  <div
-                    class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow dataSourceViewOuiPanel"
-                  >
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiTitle euiTitle--xxxsmall"
-                    >
-                      <div
-                        class="euiFlexItem"
-                      >
-                        DATA SOURCE
-                         (
-                        1
-                        )
-                      </div>
-                      <div
-                        class="dataSourceDropDownHeaderInvisibleFocusable"
-                        tabindex="0"
-                      />
-                      <div
-                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                      >
-                        <button
-                          class="euiLink euiLink--primary"
-                          type="button"
-                        >
-                          Manage
-                        </button>
-                      </div>
-                    </div>
-                  </div>
                   <div
                     class="euiPanel euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder"
                   >
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
index 3c816bdb977..75596b215b0 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
@@ -193,21 +193,9 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
         panelPaddingSize="none"
         anchorPosition="downLeft"
       >
-        <EuiContextMenuPanel>
-          <EuiPanel
-            className={'dataSourceViewOuiPanel'}
-            borderRadius="none"
-            color="transparent"
-            paddingSize="s"
-          >
-            {
-              <DataSourceDropDownHeader
-                totalDataSourceCount={1}
-                application={this.props.application}
-              />
-            }
-          </EuiPanel>
-          <EuiPanel color="subdued" paddingSize="xs" borderRadius="none">
+        <DataSourceDropDownHeader totalDataSourceCount={1} application={this.props.application} />
+        <EuiContextMenuPanel className={'dataSourceViewOuiPanel'}>
+          <EuiPanel color="subdued" paddingSize="none" borderRadius="none">
             <EuiSelectable
               options={options}
               singleSelection={true}
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap b/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap
index 213c946d09b..851b7a0a803 100644
--- a/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataSourceDropDownHeader should render correctly with the provided totalDataSourceCount 1`] = `
-<EuiTitle
-  size="xxxs"
+<EuiPopoverTitle
+  paddingSize="s"
 >
   <EuiFlexGroup
     responsive={false}
@@ -27,7 +27,7 @@ exports[`DataSourceDropDownHeader should render correctly with the provided tota
       </EuiLink>
     </EuiFlexItem>
   </EuiFlexGroup>
-</EuiTitle>
+</EuiPopoverTitle>
 `;
 
 exports[`DataSourceDropDownHeader should render the activeDataSourceCount/totalDataSourceCount when both provided 1`] = `
@@ -35,52 +35,55 @@ exports[`DataSourceDropDownHeader should render the activeDataSourceCount/totalD
   activeDataSourceCount={2}
   totalDataSourceCount={5}
 >
-  <EuiTitle
-    size="xxxs"
+  <EuiPopoverTitle
+    paddingSize="s"
   >
-    <EuiFlexGroup
-      className="euiTitle euiTitle--xxxsmall"
-      responsive={false}
+    <div
+      className="euiPopoverTitle euiPopoverTitle--paddingSmall"
     >
-      <div
-        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiTitle euiTitle--xxxsmall"
+      <EuiFlexGroup
+        responsive={false}
       >
-        <EuiFlexItem>
-          <div
-            className="euiFlexItem"
-          >
-            DATA SOURCES
-             (
-            2/5
-            )
-          </div>
-        </EuiFlexItem>
         <div
-          className="dataSourceDropDownHeaderInvisibleFocusable"
-          tabIndex={0}
-        />
-        <EuiFlexItem
-          grow={false}
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
         >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              DATA SOURCES
+               (
+              2/5
+              )
+            </div>
+          </EuiFlexItem>
           <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
+            className="dataSourceDropDownHeaderInvisibleFocusable"
+            tabIndex={0}
+          />
+          <EuiFlexItem
+            grow={false}
           >
-            <EuiLink
-              onClick={[Function]}
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <button
-                className="euiLink euiLink--primary"
-                disabled={false}
+              <EuiLink
                 onClick={[Function]}
-                type="button"
               >
-                Manage
-              </button>
-            </EuiLink>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
-  </EuiTitle>
+                <button
+                  className="euiLink euiLink--primary"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  Manage
+                </button>
+              </EuiLink>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+    </div>
+  </EuiPopoverTitle>
 </DataSourceDropDownHeader>
 `;
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
index 2eb457c4751..790f5d40696 100644
--- a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
+++ b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
@@ -4,7 +4,7 @@
  */
 
 import './drop_down_header.scss';
-import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink, EuiPopoverTitle } from '@elastic/eui';
 import React from 'react';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 import { DSM_APP_ID } from '../../plugin';
@@ -27,7 +27,7 @@ export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
       : totalDataSourceCount;
 
   return (
-    <EuiTitle size="xxxs">
+    <EuiPopoverTitle paddingSize="s">
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem>
           {dataSourceCounterPrefix} ({dataSourceCounter})
@@ -45,6 +45,6 @@ export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
           </EuiLink>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </EuiTitle>
+    </EuiPopoverTitle>
   );
 };