Use push flyout for Discover document flyout (#166406)

## Summary Closes #163798. Closes #160306 Uses `"push"` style for the document viewer flyout in Discover. Before: <img width="1552" alt="image" src="https://github.com/elastic/kibana/assets/1178348/7e3e7c35-7317-44ae-b614-55eb337f742b"> After: <img width="1552" alt="image" src="https://github.com/elastic/kibana/assets/1178348/542b78e6-3c82-47a5-b35f-1c8635e21580"> ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co> Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
elastic · Apr 26, 2024 · 9203342 · 9203342
1 parent 7d94898
commit 9203342
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 26 deletions.
diff --git a/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx
@@ -42,7 +42,7 @@ export const DiscoverResizableLayout = ({
   const { euiTheme } = useEuiTheme();
   const minSidebarWidth = euiTheme.base * 13;
   const defaultSidebarWidth = euiTheme.base * 19;
-  const minMainPanelWidth = euiTheme.base * 30;
+  const minMainPanelWidth = euiTheme.base * 24;
 
   const [sidebarWidth, setSidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_KEY, defaultSidebarWidth);
 

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
@@ -49,6 +49,7 @@ jest.mock('@elastic/eui', () => {
 
       return original.useIsWithinBreakpoints(breakpoints);
     }),
+    useResizeObserver: jest.fn(() => ({ width: 1000, height: 1000 })),
   };
 });
 

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
@@ -14,20 +14,25 @@ import type { DataView } from '@kbn/data-views-plugin/public';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFlyout,
+  EuiFlyoutResizable,
   EuiFlyoutBody,
+  EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiTitle,
   EuiSpacer,
   EuiPortal,
   EuiPagination,
   keys,
+  EuiButtonEmpty,
+  useEuiTheme,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import type { Filter, Query, AggregateQuery } from '@kbn/es-query';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DataTableColumnsMeta } from '@kbn/unified-data-table';
 import { UnifiedDocViewer } from '@kbn/unified-doc-viewer-plugin/public';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
 import { isTextBasedQuery } from '../../application/main/utils/is_text_based_query';
 import { useFlyoutActions } from './use_flyout_actions';
@@ -55,6 +60,8 @@ function getIndexByDocId(hits: DataTableRecord[], id: string) {
     return h.id === id;
   });
 }
+
+export const FLYOUT_WIDTH_KEY = 'discover:flyoutWidth';
 /**
  * Flyout displaying an expanded Elasticsearch document
  */
@@ -75,6 +82,13 @@ export function DiscoverGridFlyout({
 }: DiscoverGridFlyoutProps) {
   const services = useDiscoverServices();
   const flyoutCustomization = useDiscoverCustomization('flyout');
+  const { euiTheme } = useEuiTheme();
+  const isXlScreen = useIsWithinMinBreakpoint('xl');
+  const DEFAULT_WIDTH = euiTheme.base * 34;
+  const defaultWidth = flyoutCustomization?.size ?? DEFAULT_WIDTH; // Give enough room to search bar to not wrap
+  const [flyoutWidth, setFlyoutWidth] = useLocalStorage(FLYOUT_WIDTH_KEY, defaultWidth);
+  const minWidth = euiTheme.base * 24;
+  const maxWidth = euiTheme.breakpoint.xl;
 
   const isPlainRecord = isTextBasedQuery(query);
   // Get actual hit with updated highlighted searches
@@ -204,16 +218,24 @@ export function DiscoverGridFlyout({
         defaultMessage: 'Document',
       });
   const flyoutTitle = flyoutCustomization?.title ?? defaultFlyoutTitle;
-  const flyoutSize = flyoutCustomization?.size ?? 'm';
 
   return (
     <EuiPortal>
-      <EuiFlyout
+      <EuiFlyoutResizable
         onClose={onClose}
-        size={flyoutSize}
+        type="push"
+        size={flyoutWidth}
+        pushMinBreakpoint="xl"
         data-test-subj="docTableDetailsFlyout"
         onKeyDown={onKeyDown}
-        ownFocus={false}
+        ownFocus={true}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        onResize={setFlyoutWidth}
+        css={{
+          maxWidth: `${isXlScreen ? `calc(100vw - ${DEFAULT_WIDTH}px)` : '90vw'} !important`,
+        }}
+        paddingSize="m"
       >
         <EuiFlyoutHeader hasBorder>
           <EuiFlexGroup
@@ -225,7 +247,7 @@ export function DiscoverGridFlyout({
           >
             <EuiFlexItem grow={false}>
               <EuiTitle
-                size="s"
+                size="xs"
                 data-test-subj="docTableRowDetailsTitle"
                 css={css`
                   white-space: nowrap;
@@ -257,7 +279,14 @@ export function DiscoverGridFlyout({
           )}
         </EuiFlyoutHeader>
         <EuiFlyoutBody>{bodyContent}</EuiFlyoutBody>
-      </EuiFlyout>
+        <EuiFlyoutFooter>
+          <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+            {i18n.translate('discover.grid.flyout.close', {
+              defaultMessage: 'Close',
+            })}
+          </EuiButtonEmpty>
+        </EuiFlyoutFooter>
+      </EuiFlyoutResizable>
     </EuiPortal>
   );
 }

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx
@@ -17,13 +17,14 @@ import {
   EuiContextMenuPanel,
   EuiContextMenuItem,
   EuiContextMenuItemIcon,
-  useIsWithinBreakpoints,
   EuiText,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiPopoverProps,
   EuiToolTip,
   useEuiTheme,
+  useResizeObserver,
+  useIsWithinBreakpoints,
 } from '@elastic/eui';
 import type { FlyoutActionItem } from '../../customizations';
 
@@ -34,11 +35,34 @@ export interface DiscoverGridFlyoutActionsProps {
 }
 
 export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutActionsProps) {
+  const { euiTheme } = useEuiTheme();
+  const [ref, setRef] = useState<HTMLDivElement | HTMLSpanElement | null>(null);
+  const dimensions = useResizeObserver(ref);
+  const isMobileScreen = useIsWithinBreakpoints(['xs', 's']);
+  const isLargeFlyout = dimensions?.width ? dimensions.width > euiTheme.base * 30 : false;
+  return (
+    <div ref={setRef}>
+      <FlyoutActions
+        flyoutActions={flyoutActions}
+        isMobileScreen={isMobileScreen}
+        isLargeFlyout={isLargeFlyout}
+      />
+    </div>
+  );
+}
+
+function FlyoutActions({
+  flyoutActions,
+  isMobileScreen,
+  isLargeFlyout,
+}: {
+  flyoutActions: DiscoverGridFlyoutActionsProps['flyoutActions'];
+  isMobileScreen: boolean;
+  isLargeFlyout: boolean;
+}) {
   const { euiTheme } = useEuiTheme();
   const [isMoreFlyoutActionsPopoverOpen, setIsMoreFlyoutActionsPopoverOpen] =
     useState<boolean>(false);
-  const isMobileScreen = useIsWithinBreakpoints(['xs', 's']);
-  const isLargeScreen = useIsWithinBreakpoints(['xl']);
 
   if (isMobileScreen) {
     return (
@@ -72,7 +96,7 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA
     flyoutActions.length
   );
   const showFlyoutIconsOnly =
-    remainingFlyoutActions.length > 0 || (!isLargeScreen && visibleFlyoutActions.length > 1);
+    remainingFlyoutActions.length > 0 || (!isLargeFlyout && visibleFlyoutActions.length > 1);
 
   return (
     <EuiFlexGroup
@@ -91,12 +115,10 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA
     >
       <EuiFlexItem grow={false}>
         <EuiText size="s">
-          <strong>
-            {i18n.translate('discover.grid.tableRow.actionsLabel', {
-              defaultMessage: 'Actions',
-            })}
-            :
-          </strong>
+          {i18n.translate('discover.grid.tableRow.actionsLabel', {
+            defaultMessage: 'Actions',
+          })}
+          :
         </EuiText>
       </EuiFlexItem>
       {visibleFlyoutActions.map((action) => (

diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx
@@ -23,7 +23,8 @@ import {
   EuiTablePagination,
   EuiSelectableMessage,
   EuiI18n,
-  useIsWithinBreakpoints,
+  useEuiTheme,
+  useResizeObserver,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -118,7 +119,12 @@ export const DocViewerTable = ({
   onAddColumn,
   onRemoveColumn,
 }: DocViewRenderProps) => {
-  const showActionsInsideTableCell = useIsWithinBreakpoints(['xl'], true);
+  const { euiTheme } = useEuiTheme();
+  const [ref, setRef] = useState<HTMLDivElement | HTMLSpanElement | null>(null);
+  const dimensions = useResizeObserver(ref);
+  const showActionsInsideTableCell = dimensions?.width
+    ? dimensions.width > euiTheme.breakpoint.m
+    : false;
 
   const { fieldFormats, storage, uiSettings } = getUnifiedDocViewerServices();
   const showMultiFields = uiSettings.get(SHOW_MULTIFIELDS);
@@ -407,7 +413,7 @@ export const DocViewerTable = ({
   ];
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="none" responsive={false}>
+    <EuiFlexGroup direction="column" gutterSize="none" responsive={false} ref={setRef}>
       <EuiFlexItem grow={false}>
         <EuiSpacer size="s" />
       </EuiFlexItem>

diff --git a/test/accessibility/apps/discover.ts b/test/accessibility/apps/discover.ts
@@ -133,11 +133,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('a11y test for actions on a field', async () => {
       await PageObjects.discover.clickDocViewerTab('doc_view_table');
       if (await testSubjects.exists('openFieldActionsButton-Cancelled')) {
-        await testSubjects.click('openFieldActionsButton-Cancelled');
+        await testSubjects.click('openFieldActionsButton-Cancelled'); // Open the actions
       } else {
         await testSubjects.existOrFail('fieldActionsGroup-Cancelled');
       }
       await a11y.testAppSnapshot();
+      if (await testSubjects.exists('openFieldActionsButton-Cancelled')) {
+        await testSubjects.click('openFieldActionsButton-Cancelled'); // Close the actions
+      }
     });
 
     it('a11y test for data-grid table with columns', async () => {

diff --git a/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts b/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts
@@ -78,17 +78,19 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('should display a log level badge when available', async () => {
       await dataGrid.clickRowToggle({ columnIndex: 4 });
       await testSubjects.existOrFail('logsExplorerFlyoutLogLevel');
-      await dataGrid.closeFlyout();
+    });
 
+    it('should not display a log level badge when not available', async () => {
       await dataGrid.clickRowToggle({ rowIndex: 1, columnIndex: 4 });
       await testSubjects.missingOrFail('logsExplorerFlyoutLogLevel');
     });
 
     it('should display a message code block when available', async () => {
       await dataGrid.clickRowToggle({ columnIndex: 4 });
       await testSubjects.existOrFail('logsExplorerFlyoutLogMessage');
-      await dataGrid.closeFlyout();
+    });
 
+    it('should not display a message code block when not available', async () => {
       await dataGrid.clickRowToggle({ rowIndex: 1, columnIndex: 4 });
       await testSubjects.missingOrFail('logsExplorerFlyoutLogMessage');
     });

diff --git a/...est_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts b/...est_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts
@@ -80,17 +80,19 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('should display a log level badge when available', async () => {
       await dataGrid.clickRowToggle({ columnIndex: 4 });
       await testSubjects.existOrFail('logsExplorerFlyoutLogLevel');
-      await dataGrid.closeFlyout();
+    });
 
+    it('should not display a log level badge when not available', async () => {
       await dataGrid.clickRowToggle({ rowIndex: 1, columnIndex: 4 });
       await testSubjects.missingOrFail('logsExplorerFlyoutLogLevel');
     });
 
     it('should display a message code block when available', async () => {
       await dataGrid.clickRowToggle({ columnIndex: 4 });
       await testSubjects.existOrFail('logsExplorerFlyoutLogMessage');
-      await dataGrid.closeFlyout();
+    });
 
+    it('should not display a message code block when not available', async () => {
       await dataGrid.clickRowToggle({ rowIndex: 1, columnIndex: 4 });
       await testSubjects.missingOrFail('logsExplorerFlyoutLogMessage');
     });