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 d3388c5) Signed-off-by: Josh Romero <[email protected]> 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>
opensearch-project · Sep 7, 2023 · d1400d6 · d1400d6
1 parent 848123d
commit d1400d6
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 20 deletions.
diff --git 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"
     ]
   }
-}
+}
diff --git 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
@@ -0,0 +1,3 @@
+.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title.osdDescriptionListFieldTitle {
+  background-color: tintOrShade($euiColorPrimary, 90%, 70%);
+}
diff --git a/...gins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx b/...gins/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
@@ -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
@@ -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
@@ -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,{' '}