[Discover] Misc fixes (#5114)

* Canvas scrolling fix, remove notice and improve flyout focus Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * Hide action icons unless hovered or focussed on Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * followup fixes from #5085 Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> --------- Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>
opensearch-project · Sep 29, 2023 · ed2672a · ed2672a
1 parent 61f40ea
commit ed2672a
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 419 deletions.
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx
@@ -13,14 +13,15 @@ import {
   EuiFlexItem,
   EuiTitle,
 } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
 import { DocViewer } from '../doc_viewer/doc_viewer';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
-import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { DocViewerLinks } from '../doc_viewer_links/doc_viewer_links';
 
 interface Props {
   columns: string[];
-  hit: any;
+  hit: OpenSearchSearchHit;
   indexPattern: IndexPattern;
   onAddColumn: (column: string) => void;
   onClose: () => void;
@@ -40,10 +41,12 @@ export function DataGridFlyout({
   // TODO: replace EuiLink with doc_view_links registry
   // TODO: Also move the flyout higher in the react tree to prevent redrawing the table component and slowing down page performance
   return (
-    <EuiFlyout onClose={onClose} size="m" data-test-subj="documentDetailFlyOut">
+    <EuiFlyout onClose={onClose} size="m" data-test-subj="documentDetailFlyOut" ownFocus={false}>
       <EuiFlyoutHeader>
         <EuiTitle>
-          <h2>Document Details</h2>
+          <h2>
+            <FormattedMessage id="discover.docView.flyoutTitle" defaultMessage="Document Details" />
+          </h2>
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.scss b/src/plugins/discover/public/application/components/sidebar/discover_field.scss
@@ -2,3 +2,13 @@
   min-width: 260px;
   max-width: 300px;
 }
+
+.dscSidebarField__actionButton {
+  opacity: 0;
+  transition: opacity $ouiAnimSpeedExtraFast;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -40,7 +40,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { DiscoverFieldDetails } from './discover_field_details';
-import { FieldIcon, FieldButton } from '../../../../../opensearch_dashboards_react/public';
+import { FieldIcon } from '../../../../../opensearch_dashboards_react/public';
 import { FieldDetails } from './types';
 import { IndexPatternField, IndexPattern } from '../../../../../data/public';
 import { shortenDottedString } from '../../helpers';
@@ -163,6 +163,7 @@ export const DiscoverField = ({
           }}
           data-test-subj={`fieldToggle-${field.name}`}
           aria-label={addLabelAria}
+          className="dscSidebarField__actionButton"
         />
       </EuiToolTip>
     );
@@ -187,6 +188,7 @@ export const DiscoverField = ({
           }}
           data-test-subj={`fieldToggle-${field.name}`}
           aria-label={removeLabelAria}
+          className="dscSidebarField__actionButton"
         />
       </EuiToolTip>
     );
@@ -219,6 +221,7 @@ export const DiscoverField = ({
                 onClick={() => setOpen((state) => !state)}
                 aria-label={infoLabelAria}
                 data-test-subj={`field-${field.name}-showDetails`}
+                className="dscSidebarField__actionButton"
               />
             }
             panelClassName="dscSidebarItem__fieldPopoverPanel"

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
@@ -0,0 +1,5 @@
+.dscCanvas {
+  @include euiYScrollWithShadows;
+
+  height: 100%;
+}
diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState, useRef } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiCallOut, EuiLink } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { TopNav } from './top_nav';
 import { ViewProps } from '../../../../../data_explorer/public';
 import { DiscoverTable } from './discover_table';
@@ -19,9 +19,7 @@ import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { filterColumns } from '../utils/filter_columns';
 import { DEFAULT_COLUMNS_SETTING } from '../../../../common';
-
-const KEY_SHOW_NOTICE = 'discover:deprecation-notice:show';
-
+import './discover_canvas.scss';
 // eslint-disable-next-line import/no-default-export
 export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
   const { data$, refetch$, indexPattern } = useDiscoverContext();
@@ -43,39 +41,6 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
     bucketInterval: {},
   });
 
-  const [isCallOutVisible, setIsCallOutVisible] = useState(
-    localStorage.getItem(KEY_SHOW_NOTICE) !== 'false'
-  );
-  const closeCallOut = () => {
-    localStorage.setItem(KEY_SHOW_NOTICE, 'false');
-    setIsCallOutVisible(false);
-  };
-
-  let callOut;
-
-  if (isCallOutVisible) {
-    callOut = (
-      <EuiFlexItem grow={false}>
-        <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>
-    );
-  }
-
   const { status } = fetchState;
 
   useEffect(() => {
@@ -104,7 +69,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
   const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined;
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="none">
+    <EuiFlexGroup direction="column" gutterSize="none" className="dscCanvas">
       <EuiFlexItem grow={false}>
         <TopNav
           opts={{
@@ -123,7 +88,6 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
       {status === ResultStatus.LOADING && <LoadingSpinner />}
       {status === ResultStatus.READY && (
         <>
-          {callOut}
           <EuiFlexItem grow={false}>
             <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
               <EuiPanel>