From d1400d63e61cbe5fe3d1dd0c1f8fe7caac110011 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Wed, 6 Sep 2023 17:27:57 -0700
Subject: [PATCH] Fix (discover): Fix dismiss callout and next styling (#4938)
 (#4951)

* Fix (discover): Fix dismiss callout and next styling

1. Fix `onDismiss` prop of callout
2. Put callout in panel for better alignment in discover
3. Add `subdued` to combobox panel
4. Use `primary`-derived color for field titles in discover (and lint-ignore)



* Update index.tsx

fix conflict

* fix linting indentation



* update snapshot



---------


(cherry picked from commit d3388c55fb3926aa40e7f919fff662045f4309c8)

Signed-off-by: Josh Romero <rmerqg@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../config/global_selectors.json              |  5 ++--
 .../public/components/sidebar/index.tsx       |  2 +-
 .../data_grid/data_grid_table_cell_value.scss |  3 ++
 .../data_grid_table_cell_value.test.tsx       |  4 ++-
 .../data_grid/data_grid_table_cell_value.tsx  |  5 +++-
 .../view_components/canvas/index.tsx          | 30 ++++++++++---------
 .../components/discover_legacy.tsx            |  2 +-
 7 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss

diff --git a/packages/osd-stylelint-config/config/global_selectors.json b/packages/osd-stylelint-config/config/global_selectors.json
index 99b2db2dfb4f..760717c8dab5 100644
--- a/packages/osd-stylelint-config/config/global_selectors.json
+++ b/packages/osd-stylelint-config/config/global_selectors.json
@@ -24,7 +24,8 @@
       "src/plugins/vis_builder/public/application/components/side_nav.scss",
       "packages/osd-ui-framework/src/components/button/button_group/_button_group.scss",
       "src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.scss",
-      "src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_open.scss"
+      "src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_open.scss",
+      "src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx
index 4133ef1f09b0..921e3894983b 100644
--- a/src/plugins/data_explorer/public/components/sidebar/index.tsx
+++ b/src/plugins/data_explorer/public/components/sidebar/index.tsx
@@ -73,7 +73,7 @@ export const Sidebar: FC = ({ children }) => {
   return (
     <EuiPageSideBar className="deSidebar" sticky>
       <EuiSplitPanel.Outer className="eui-yScroll" hasBorder={true} borderRadius="none">
-        <EuiSplitPanel.Inner paddingSize="s" grow={false}>
+        <EuiSplitPanel.Inner paddingSize="s" color="subdued" grow={false}>
           <EuiComboBox
             placeholder="Select a datasource"
             singleSelection={{ asPlainText: true }}
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss
new file mode 100644
index 000000000000..6015c8f6a11b
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss
@@ -0,0 +1,3 @@
+.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title.osdDescriptionListFieldTitle {
+  background-color: tintOrShade($euiColorPrimary, 90%, 70%);
+}
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx
index e9c867a53db7..a4b640a34a30 100644
--- a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx
@@ -147,7 +147,9 @@ describe('Testing fetchTableDataCell function', () => {
         compressed={true}
         type="inline"
       >
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="osdDescriptionListFieldTitle"
+        >
           order_date
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx
index 2e39dde3ba06..4089c90ede15 100644
--- a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx
@@ -2,6 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+import './data_grid_table_cell_value.scss';
 
 import React, { Fragment } from 'react';
 import dompurify from 'dompurify';
@@ -30,7 +31,9 @@ function fetchSourceTypeDataCell(
     <EuiDescriptionList type="inline" compressed>
       {Object.keys(formattedRow).map((key) => (
         <Fragment key={key}>
-          <EuiDescriptionListTitle>{key}</EuiDescriptionListTitle>
+          <EuiDescriptionListTitle className="osdDescriptionListFieldTitle">
+            {key}
+          </EuiDescriptionListTitle>
           <EuiDescriptionListDescription
             dangerouslySetInnerHTML={{ __html: dompurify.sanitize(formattedRow[key]) }}
           />
diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
index b3faaf0884b1..6c26763d5736 100644
--- a/src/plugins/discover/public/application/view_components/canvas/index.tsx
+++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -49,20 +49,22 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
   if (isCallOutVisible) {
     callOut = (
       <EuiFlexItem grow={false}>
-        <EuiCallOut
-          title="You're viewing Discover 2.0. The old Discover app will be retired in OpenSearch version 2.11. To switch back to the old version, turn off the New Discover toggle."
-          iconType="alert"
-          dismissible
-          onDismissible={closeCallOut}
-        >
-          <p>
-            To provide feedback,{' '}
-            <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues">
-              open an issue
-            </EuiLink>
-            .
-          </p>
-        </EuiCallOut>
+        <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
+          <EuiCallOut
+            title="You're viewing Discover 2.0. The old Discover app will be retired in OpenSearch version 2.11. To switch back to the old version, turn off the New Discover toggle."
+            iconType="alert"
+            dismissible
+            onDismiss={closeCallOut}
+          >
+            <p>
+              To provide feedback,{' '}
+              <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues">
+                open an issue
+              </EuiLink>
+              .
+            </p>
+          </EuiCallOut>
+        </EuiPanel>
       </EuiFlexItem>
     );
   }
diff --git a/src/plugins/discover_legacy/public/application/components/discover_legacy.tsx b/src/plugins/discover_legacy/public/application/components/discover_legacy.tsx
index a6a499a46398..d3bf5b6ffeb8 100644
--- a/src/plugins/discover_legacy/public/application/components/discover_legacy.tsx
+++ b/src/plugins/discover_legacy/public/application/components/discover_legacy.tsx
@@ -153,7 +153,7 @@ export function DiscoverLegacy({
           title="This Discover app version will be retired in OpenSearch version 2.11. To switch to the new Discover 2.0 version, turn on the New Discover toggle."
           iconType="alert"
           dismissible
-          onDismissible={closeCallOut}
+          onDismiss={closeCallOut}
         >
           <p>
             To provide feedback,{' '}