[Discover] Add close button to field popover using Document explorer (#131899)

* Add close button to field popover
* Redesign `Copy to clipboard` button when showing JSON
Co-authored-by: Julia Rechkunova <[email protected]>

Author: kertal

src/plugins/discover/public/components/discover_grid/discover_grid.tsx

@@ -6,19 +6,19 @@
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useRef } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import './discover_grid.scss';
 import {
   EuiDataGridSorting,
-  EuiDataGridProps,
   EuiDataGrid,
   EuiScreenReaderOnly,
   EuiSpacer,
   EuiText,
   htmlIdGenerator,
   EuiLoadingSpinner,
   EuiIcon,
+  EuiDataGridRefProps,
 } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { flattenHit } from '@kbn/data-plugin/public';
@@ -165,9 +165,7 @@ export interface DiscoverGridProps {
   onUpdateRowHeight?: (rowHeight: number) => void;
 }
 
-export const EuiDataGridMemoized = React.memo((props: EuiDataGridProps) => {
-  return <EuiDataGrid {...props} />;
-});
+export const EuiDataGridMemoized = React.memo(EuiDataGrid);
 
 const CONTROL_COLUMN_IDS_DEFAULT = ['openDetails', 'select'];
 
@@ -199,6 +197,7 @@ export const DiscoverGrid = ({
   rowHeightState,
   onUpdateRowHeight,
 }: DiscoverGridProps) => {
+  const dataGridRef = useRef<EuiDataGridRefProps>(null);
   const services = useDiscoverServices();
   const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
   const [isFilterActive, setIsFilterActive] = useState(false);
@@ -232,6 +231,12 @@ export const DiscoverGrid = ({
     return rowsFiltered;
   }, [rows, usedSelectedDocs, isFilterActive]);
 
+  const displayedRowsFlattened = useMemo(() => {
+    return displayedRows.map((hit) => {
+      return flattenHit(hit, indexPattern, { includeIgnoredValues: true });
+    });
+  }, [displayedRows, indexPattern]);
+
   /**
    * Pagination
    */
@@ -290,16 +295,20 @@ export const DiscoverGrid = ({
       getRenderCellValueFn(
         indexPattern,
         displayedRows,
-        displayedRows
-          ? displayedRows.map((hit) =>
-              flattenHit(hit, indexPattern, { includeIgnoredValues: true })
-            )
-          : [],
+        displayedRowsFlattened,
         useNewFieldsApi,
         fieldsToShow,
-        services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)
+        services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED),
+        () => dataGridRef.current?.closeCellPopover()
       ),
-    [indexPattern, displayedRows, useNewFieldsApi, fieldsToShow, services.uiSettings]
+    [
+      indexPattern,
+      displayedRowsFlattened,
+      displayedRows,
+      useNewFieldsApi,
+      fieldsToShow,
+      services.uiSettings,
+    ]
   );
 
   /**
@@ -432,6 +441,7 @@ export const DiscoverGrid = ({
         expanded: expandedDoc,
         setExpanded: setExpandedDoc,
         rows: displayedRows,
+        rowsFlattened: displayedRowsFlattened,
         onFilter,
         indexPattern,
         isDarkMode: services.uiSettings.get('theme:darkMode'),
@@ -463,6 +473,7 @@ export const DiscoverGrid = ({
           onColumnResize={onResize}
           pagination={paginationObj}
           renderCellValue={renderCellValue}
+          ref={dataGridRef}
           rowCount={rowCount}
           schemaDetectors={schemaDetectors}
           sorting={sorting as EuiDataGridSorting}

src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.test.tsx

@@ -5,35 +5,57 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+const mockCopyToClipboard = jest.fn();
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+  return {
+    ...original,
+    copyToClipboard: (value: string) => mockCopyToClipboard(value),
+  };
+});
+
+jest.mock('../../utils/use_discover_services', () => {
+  const services = {
+    toastNotifications: {
+      addInfo: jest.fn(),
+    },
+  };
+  const originalModule = jest.requireActual('../../utils/use_discover_services');
+  return {
+    ...originalModule,
+    useDiscoverServices: () => services,
+  };
+});
 
 import React from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { findTestSubject } from '@elastic/eui/lib/test';
-import { FilterInBtn, FilterOutBtn, buildCellActions } from './discover_grid_cell_actions';
+import { FilterInBtn, FilterOutBtn, buildCellActions, CopyBtn } from './discover_grid_cell_actions';
 import { DiscoverGridContext } from './discover_grid_context';
-
+import { EuiButton } from '@elastic/eui';
 import { indexPatternMock } from '../../__mocks__/index_pattern';
 import { esHits } from '../../__mocks__/es_hits';
-import { EuiButton } from '@elastic/eui';
 import { DataViewField } from '@kbn/data-views-plugin/public';
+import { flattenHit } from '@kbn/data-plugin/common';
+
+const contextMock = {
+  expanded: undefined,
+  setExpanded: jest.fn(),
+  rows: esHits,
+  rowsFlattened: esHits.map((hit) => flattenHit(hit, indexPatternMock)),
+  onFilter: jest.fn(),
+  indexPattern: indexPatternMock,
+  isDarkMode: false,
+  selectedDocs: [],
+  setSelectedDocs: jest.fn(),
+};
 
 describe('Discover cell actions ', function () {
   it('should not show cell actions for unfilterable fields', async () => {
     expect(buildCellActions({ name: 'foo', filterable: false } as DataViewField)).toBeUndefined();
   });
 
   it('triggers filter function when FilterInBtn is clicked', async () => {
-    const contextMock = {
-      expanded: undefined,
-      setExpanded: jest.fn(),
-      rows: esHits,
-      onFilter: jest.fn(),
-      indexPattern: indexPatternMock,
-      isDarkMode: false,
-      selectedDocs: [],
-      setSelectedDocs: jest.fn(),
-    };
-
     const component = mountWithIntl(
       <DiscoverGridContext.Provider value={contextMock}>
         <FilterInBtn
@@ -55,17 +77,6 @@ describe('Discover cell actions ', function () {
     );
   });
   it('triggers filter function when FilterOutBtn is clicked', async () => {
-    const contextMock = {
-      expanded: undefined,
-      setExpanded: jest.fn(),
-      rows: esHits,
-      onFilter: jest.fn(),
-      indexPattern: indexPatternMock,
-      isDarkMode: false,
-      selectedDocs: [],
-      setSelectedDocs: jest.fn(),
-    };
-
     const component = mountWithIntl(
       <DiscoverGridContext.Provider value={contextMock}>
         <FilterOutBtn
@@ -86,4 +97,21 @@ describe('Discover cell actions ', function () {
       '-'
     );
   });
+  it('triggers clipboard copy when CopyBtn is clicked', async () => {
+    const component = mountWithIntl(
+      <DiscoverGridContext.Provider value={contextMock}>
+        <CopyBtn
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          Component={(props: any) => <EuiButton {...props} />}
+          rowIndex={1}
+          colIndex={1}
+          columnId="extension"
+          isExpanded={false}
+        />
+      </DiscoverGridContext.Provider>
+    );
+    const button = findTestSubject(component, 'copyClipboardButton');
+    await button.simulate('click');
+    expect(mockCopyToClipboard).toHaveBeenCalledWith('jpg');
+  });
 });

src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.tsx

@@ -7,24 +7,25 @@
  */
 
 import React, { useContext } from 'react';
-import { EuiDataGridColumnCellActionProps } from '@elastic/eui';
+import { copyToClipboard, EuiDataGridColumnCellActionProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DataViewField } from '@kbn/data-views-plugin/public';
-import { flattenHit } from '@kbn/data-plugin/public';
 import { DiscoverGridContext, GridContext } from './discover_grid_context';
+import { useDiscoverServices } from '../../utils/use_discover_services';
+import { formatFieldValue } from '../../utils/format_value';
 
 function onFilterCell(
   context: GridContext,
   rowIndex: EuiDataGridColumnCellActionProps['rowIndex'],
   columnId: EuiDataGridColumnCellActionProps['columnId'],
   mode: '+' | '-'
 ) {
-  const row = context.rows[rowIndex];
-  const flattened = flattenHit(row, context.indexPattern);
+  const row = context.rowsFlattened[rowIndex];
+  const value = String(row[columnId]);
   const field = context.indexPattern.fields.getByName(columnId);
 
-  if (flattened && field) {
-    context.onFilter(field, flattened[columnId], mode);
+  if (value && field) {
+    context.onFilter(field, value, mode);
   }
 }
 
@@ -84,8 +85,52 @@ export const FilterOutBtn = ({
   );
 };
 
+export const CopyBtn = ({ Component, rowIndex, columnId }: EuiDataGridColumnCellActionProps) => {
+  const { indexPattern: dataView, rowsFlattened, rows } = useContext(DiscoverGridContext);
+  const { fieldFormats, toastNotifications } = useDiscoverServices();
+
+  const buttonTitle = i18n.translate('discover.grid.copyClipboardButtonTitle', {
+    defaultMessage: 'Copy value of {column}',
+    values: { column: columnId },
+  });
+
+  return (
+    <Component
+      onClick={() => {
+        const rowFlattened = rowsFlattened[rowIndex];
+        const field = dataView.fields.getByName(columnId);
+        const value = rowFlattened[columnId];
+
+        const valueFormatted =
+          field?.type === '_source'
+            ? JSON.stringify(rowFlattened, null, 2)
+            : formatFieldValue(value, rows[rowIndex], fieldFormats, dataView, field, 'text');
+        copyToClipboard(valueFormatted);
+        const infoTitle = i18n.translate('discover.grid.copyClipboardToastTitle', {
+          defaultMessage: 'Copied value of {column} to clipboard.',
+          values: { column: columnId },
+        });
+
+        toastNotifications.addInfo({
+          title: infoTitle,
+        });
+      }}
+      iconType="copyClipboard"
+      aria-label={buttonTitle}
+      title={buttonTitle}
+      data-test-subj="copyClipboardButton"
+    >
+      {i18n.translate('discover.grid.copyClipboardButton', {
+        defaultMessage: 'Copy to clipboard',
+      })}
+    </Component>
+  );
+};
+
 export function buildCellActions(field: DataViewField) {
-  if (!field.filterable) {
+  if (field?.type === '_source') {
+    return [CopyBtn];
+  } else if (!field.filterable) {
     return undefined;
   }
 

src/plugins/discover/public/components/discover_grid/discover_grid_context.tsx

@@ -15,6 +15,7 @@ export interface GridContext {
   expanded?: ElasticSearchHit;
   setExpanded: (hit?: ElasticSearchHit) => void;
   rows: ElasticSearchHit[];
+  rowsFlattened: Array<Record<string, unknown>>;
   onFilter: DocViewFilterFn;
   indexPattern: DataView;
   isDarkMode: boolean;

src/plugins/discover/public/components/discover_grid/discover_grid_document_selection.test.tsx

@@ -21,6 +21,7 @@ const baseContextMock = {
   expanded: undefined,
   setExpanded: jest.fn(),
   rows: esHits,
+  rowsFlattened: esHits,
   onFilter: jest.fn(),
   indexPattern: indexPatternMock,
   isDarkMode: false,

src/plugins/discover/public/components/discover_grid/discover_grid_expand_button.test.tsx

@@ -18,6 +18,7 @@ const baseContextMock = {
   expanded: undefined,
   setExpanded: jest.fn(),
   rows: esHits,
+  rowsFlattened: esHits,
   onFilter: jest.fn(),
   indexPattern: indexPatternMock,
   isDarkMode: false,