[UnifiedDocViewer] Redesign header and make actions responsive

src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx

@@ -9,6 +9,7 @@
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { slice } from 'lodash';
+import { css } from '@emotion/react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -22,6 +23,7 @@ import {
   EuiButtonIcon,
   EuiPopoverProps,
   EuiToolTip,
+  useEuiTheme,
 } from '@elastic/eui';
 import type { FlyoutActionItem } from '../../customizations';
 
@@ -32,7 +34,9 @@ export interface DiscoverGridFlyoutActionsProps {
 }
 
 export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutActionsProps) {
-  const [isMoreFlyoutActionsPopoverOpen, setIsMoreFlyoutActionsPopover] = useState<boolean>(false);
+  const { euiTheme } = useEuiTheme();
+  const [isMoreFlyoutActionsPopoverOpen, setIsMoreFlyoutActionsPopoverOpen] =
+    useState<boolean>(false);
   const isMobileScreen = useIsWithinBreakpoints(['xs', 's']);
   const isLargeScreen = useIsWithinBreakpoints(['xl']);
 
@@ -48,15 +52,15 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA
             iconSide="right"
             flush="left"
             data-test-subj="docViewerMobileActionsButton"
-            onClick={() => setIsMoreFlyoutActionsPopover(!isMoreFlyoutActionsPopoverOpen)}
+            onClick={() => setIsMoreFlyoutActionsPopoverOpen(!isMoreFlyoutActionsPopoverOpen)}
           >
             {i18n.translate('discover.grid.tableRow.mobileFlyoutActionsButton', {
               defaultMessage: 'Actions',
             })}
           </EuiButtonEmpty>
         }
         isOpen={isMoreFlyoutActionsPopoverOpen}
-        closePopover={() => setIsMoreFlyoutActionsPopover(false)}
+        closePopover={() => setIsMoreFlyoutActionsPopoverOpen(false)}
       />
     );
   }
@@ -75,8 +79,15 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA
       responsive={false}
       wrap={true}
       alignItems="center"
-      gutterSize={showFlyoutIconsOnly ? 'none' : 's'}
+      gutterSize="none"
       data-test-subj="docViewerFlyoutActions"
+      css={
+        showFlyoutIconsOnly
+          ? undefined
+          : css`
+              gap: ${(euiTheme.base / 4) * 3}px;
+            `
+      }
     >
       <EuiFlexItem grow={false}>
         <EuiText size="s">
@@ -91,7 +102,9 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA
       {visibleFlyoutActions.map((action) => (
         <EuiFlexItem key={action.id} grow={false}>
           {showFlyoutIconsOnly ? (
-            <EuiToolTip content={action.label}>
+            <EuiToolTip
+              content={`${action.helpText ? `${action.label} - ${action.helpText}` : action.label}`}
+            >
               <EuiButtonIcon
                 size="s"
                 iconType={action.iconType}
@@ -102,18 +115,20 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA
               />
             </EuiToolTip>
           ) : (
-            // eslint-disable-next-line @elastic/eui/href-or-on-click
-            <EuiButtonEmpty
-              size="s"
-              iconSize="s"
-              flush="left"
-              iconType={action.iconType}
-              data-test-subj={action.dataTestSubj}
-              href={action.href}
-              onClick={action.onClick}
-            >
-              {action.label}
-            </EuiButtonEmpty>
+            <EuiToolTip content={action.helpText} delay="long">
+              {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+              <EuiButtonEmpty
+                size="s"
+                iconSize="s"
+                flush="both"
+                iconType={action.iconType}
+                data-test-subj={action.dataTestSubj}
+                href={action.href}
+                onClick={action.onClick}
+              >
+                {action.label}
+              </EuiButtonEmpty>
+            </EuiToolTip>
           )}
         </EuiFlexItem>
       ))}
@@ -134,12 +149,12 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA
                   aria-label={i18n.translate('discover.grid.tableRow.moreFlyoutActionsButton', {
                     defaultMessage: 'More actions',
                   })}
-                  onClick={() => setIsMoreFlyoutActionsPopover(!isMoreFlyoutActionsPopoverOpen)}
+                  onClick={() => setIsMoreFlyoutActionsPopoverOpen(!isMoreFlyoutActionsPopoverOpen)}
                 />
               </EuiToolTip>
             }
             isOpen={isMoreFlyoutActionsPopoverOpen}
-            closePopover={() => setIsMoreFlyoutActionsPopover(false)}
+            closePopover={() => setIsMoreFlyoutActionsPopoverOpen(false)}
           />
         </EuiFlexItem>
       )}
@@ -174,6 +189,7 @@ function FlyoutActionsPopover({
             key={action.id}
             icon={action.iconType as EuiContextMenuItemIcon}
             data-test-subj={action.dataTestSubj}
+            href={action.href}
             onClick={action.onClick}
           >
             {action.label}

src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx

@@ -50,6 +50,10 @@ export const useFlyoutActions = ({
       label: i18n.translate('discover.grid.tableRow.viewSurroundingDocumentsLinkLabel', {
         defaultMessage: 'View surrounding documents',
       }),
+      helpText: i18n.translate('discover.grid.tableRow.viewSurroundingDocumentsHover', {
+        defaultMessage:
+          'Inspect documents that occurred before and after this document. Only pinned filters remain active in the Surrounding documents view.',
+      }),
     },
     ...customActions,
   ];

src/plugins/discover/public/customizations/customization_types/flyout_customization.ts

@@ -23,6 +23,7 @@ export interface FlyoutActionItem {
   id: string;
   enabled: boolean;
   label: string;
+  helpText?: string;
   iconType: IconType;
   onClick: (() => void) | MouseEventHandler;
   href?: string;