[Discover] Show "Copy value" button for any grid cell (elastic#149525)

Closes elastic#108857 ## Summary Before we had "Copy to clipboard" only for cell popovers with JSON content. This PR adds it also for any other cell values. ![Jan-25-2023 18-23-03](https://user-images.githubusercontent.com/1415710/214636400-b347e856-8bf0-4038-bc41-aae23df5e5a9.gif) ### Checklist - [x] 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) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
kqualters-elastic · Feb 6, 2023 · 9f2b582 · 9f2b582
1 parent ed37fec
commit 9f2b582
Show file tree

Hide file tree

Showing 12 changed files with 176 additions and 51 deletions.
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.test.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.test.tsx
@@ -38,7 +38,21 @@ import { DataViewField } from '@kbn/data-views-plugin/public';
 
 describe('Discover cell actions ', function () {
   it('should not show cell actions for unfilterable fields', async () => {
-    expect(buildCellActions({ name: 'foo', filterable: false } as DataViewField)).toBeUndefined();
+    expect(buildCellActions({ name: 'foo', filterable: false } as DataViewField)).toEqual([
+      CopyBtn,
+    ]);
+  });
+
+  it('should show filter actions for filterable fields', async () => {
+    expect(buildCellActions({ name: 'foo', filterable: true } as DataViewField, jest.fn())).toEqual(
+      [FilterInBtn, FilterOutBtn, CopyBtn]
+    );
+  });
+
+  it('should show Copy action for _source field', async () => {
+    expect(
+      buildCellActions({ name: '_source', type: '_source', filterable: false } as DataViewField)
+    ).toEqual([CopyBtn]);
   });
 
   it('triggers filter function when FilterInBtn is clicked', async () => {

diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.tsx
@@ -110,19 +110,13 @@ export const CopyBtn = ({ Component, rowIndex, columnId }: EuiDataGridColumnCell
       title={buttonTitle}
       data-test-subj="copyClipboardButton"
     >
-      {i18n.translate('discover.grid.copyClipboardButton', {
-        defaultMessage: 'Copy to clipboard',
+      {i18n.translate('discover.grid.copyCellValueButton', {
+        defaultMessage: 'Copy value',
       })}
     </Component>
   );
 };
 
 export function buildCellActions(field: DataViewField, onFilter?: DocViewFilterFn) {
-  if (field?.type === '_source') {
-    return [CopyBtn];
-  } else if (!onFilter || !field.filterable) {
-    return undefined;
-  }
-
-  return [FilterInBtn, FilterOutBtn];
+  return [...(onFilter && field.filterable ? [FilterInBtn, FilterOutBtn] : []), CopyBtn];
 }
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_columns.test.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_columns.test.tsx
@@ -75,6 +75,7 @@ describe('Discover grid columns', function () {
           "cellActions": Array [
             [Function],
             [Function],
+            [Function],
           ],
           "displayAsText": "extension",
           "id": "extension",
@@ -120,7 +121,9 @@ describe('Discover grid columns', function () {
             "showMoveLeft": true,
             "showMoveRight": true,
           },
-          "cellActions": undefined,
+          "cellActions": Array [
+            [Function],
+          ],
           "displayAsText": "message",
           "id": "message",
           "isSortable": false,
@@ -188,6 +191,7 @@ describe('Discover grid columns', function () {
           "cellActions": Array [
             [Function],
             [Function],
+            [Function],
           ],
           "displayAsText": "extension",
           "id": "extension",
@@ -230,7 +234,9 @@ describe('Discover grid columns', function () {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": undefined,
+          "cellActions": Array [
+            [Function],
+          ],
           "displayAsText": "message",
           "id": "message",
           "isSortable": false,
@@ -298,6 +304,7 @@ describe('Discover grid columns', function () {
           "cellActions": Array [
             [Function],
             [Function],
+            [Function],
           ],
           "display": <div
             aria-label="timestamp - this field represents the time that events occurred."
@@ -365,6 +372,7 @@ describe('Discover grid columns', function () {
           "cellActions": Array [
             [Function],
             [Function],
+            [Function],
           ],
           "displayAsText": "extension",
           "id": "extension",
@@ -410,7 +418,9 @@ describe('Discover grid columns', function () {
             "showMoveLeft": true,
             "showMoveRight": true,
           },
-          "cellActions": undefined,
+          "cellActions": Array [
+            [Function],
+          ],
           "displayAsText": "message",
           "id": "message",
           "isSortable": false,

diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx
@@ -259,6 +259,7 @@ describe('Discover grid cell rendering', function () {
           <EuiFlexGroup
             gutterSize="none"
             justifyContent="flexEnd"
+            responsive={false}
           >
             <EuiFlexItem
               grow={false}
@@ -490,6 +491,7 @@ describe('Discover grid cell rendering', function () {
           <EuiFlexGroup
             gutterSize="none"
             justifyContent="flexEnd"
+            responsive={false}
           >
             <EuiFlexItem
               grow={false}
@@ -653,6 +655,7 @@ describe('Discover grid cell rendering', function () {
           <EuiFlexGroup
             gutterSize="none"
             justifyContent="flexEnd"
+            responsive={false}
           >
             <EuiFlexItem
               grow={false}

diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx
@@ -196,7 +196,7 @@ function renderPopoverContent({
         className="dscDiscoverGrid__cellPopover"
       >
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
+          <EuiFlexGroup justifyContent="flexEnd" gutterSize="none" responsive={false}>
             <EuiFlexItem grow={false}>{closeButton}</EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>

diff --git a/src/plugins/discover/public/types.ts b/src/plugins/discover/public/types.ts
@@ -12,7 +12,7 @@ import { type DatatableColumn } from '@kbn/expressions-plugin/common';
 export type ValueToStringConverter = (
   rowIndex: number,
   columnId: string,
-  options?: { disableMultiline?: boolean }
+  options?: { compatibleWithCSV?: boolean }
 ) => { formattedString: string; withFormula: boolean };
 
 export interface EsHitRecord extends Omit<estypes.SearchHit, '_source'> {