[Discover] Add Copy to clipboard ability for column name of Document Explorer (#123892)

* [Discover] copy column name to clipboard

* [Discover] add ability to use it for http

* [Discover] remove redundant span

* [Discover] update unit tests

* Update src/plugins/discover/public/components/discover_grid/copy_column_name_button.tsx

Co-authored-by: Matthias Wilhelm <ankertal@gmail.com>

* [Discover] import copyToClipboard util function from elastic ui

* [Discover] add unit tests

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Matthias Wilhelm <ankertal@gmail.com>

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

@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { buildCopyColumnNameButton } from './copy_column_name_button';
+import { EuiButton } from '@elastic/eui';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+
+const execCommandMock = (global.document.execCommand = jest.fn());
+const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+describe('Copy to clipboard button', () => {
+  it('should copy to clipboard on click', () => {
+    const { label, iconType, onClick } = buildCopyColumnNameButton('test-field-name');
+    execCommandMock.mockImplementationOnce(() => true);
+
+    const wrapper = mountWithIntl(
+      <EuiButton iconType={iconType} onClick={onClick}>
+        {label}
+      </EuiButton>
+    );
+
+    wrapper.find(EuiButton).simulate('click');
+
+    expect(execCommandMock).toHaveBeenCalledWith('copy');
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it('should not copy to clipboard on click', () => {
+    const { label, iconType, onClick } = buildCopyColumnNameButton('test-field-name');
+    execCommandMock.mockImplementationOnce(() => false);
+
+    const wrapper = mountWithIntl(
+      <EuiButton iconType={iconType} onClick={onClick}>
+        {label}
+      </EuiButton>
+    );
+
+    wrapper.find(EuiButton).simulate('click');
+
+    expect(execCommandMock).toHaveBeenCalledWith('copy');
+    expect(warn).toHaveBeenCalledWith('Unable to copy to clipboard.');
+  });
+});

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { copyToClipboard, EuiListGroupItemProps } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+export function buildCopyColumnNameButton(columnName: string) {
+  const copyToClipBoardButton: EuiListGroupItemProps = {
+    size: 'xs',
+    label: (
+      <FormattedMessage
+        id="discover.grid.copyToClipBoardButton"
+        defaultMessage="Copy to clipboard"
+      />
+    ),
+    iconType: 'copyClipboard',
+    iconProps: { size: 'm' },
+    onClick: () => copyToClipboard(columnName),
+  };
+
+  return copyToClipBoardButton;
+}

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

@@ -24,6 +24,21 @@ describe('Discover grid columns', function () {
       Array [
         Object {
           "actions": Object {
+            "additional": Array [
+              Object {
+                "iconProps": Object {
+                  "size": "m",
+                },
+                "iconType": "copyClipboard",
+                "label": <FormattedMessage
+                  defaultMessage="Copy to clipboard"
+                  id="discover.grid.copyToClipBoardButton"
+                  values={Object {}}
+                />,
+                "onClick": [Function],
+                "size": "xs",
+              },
+            ],
             "showHide": Object {
               "iconType": "cross",
               "label": "Remove column",
@@ -39,6 +54,21 @@ describe('Discover grid columns', function () {
         },
         Object {
           "actions": Object {
+            "additional": Array [
+              Object {
+                "iconProps": Object {
+                  "size": "m",
+                },
+                "iconType": "copyClipboard",
+                "label": <FormattedMessage
+                  defaultMessage="Copy to clipboard"
+                  id="discover.grid.copyToClipBoardButton"
+                  values={Object {}}
+                />,
+                "onClick": [Function],
+                "size": "xs",
+              },
+            ],
             "showHide": Object {
               "iconType": "cross",
               "label": "Remove column",
@@ -68,6 +98,21 @@ describe('Discover grid columns', function () {
       Array [
         Object {
           "actions": Object {
+            "additional": Array [
+              Object {
+                "iconProps": Object {
+                  "size": "m",
+                },
+                "iconType": "copyClipboard",
+                "label": <FormattedMessage
+                  defaultMessage="Copy to clipboard"
+                  id="discover.grid.copyToClipBoardButton"
+                  values={Object {}}
+                />,
+                "onClick": [Function],
+                "size": "xs",
+              },
+            ],
             "showHide": false,
             "showMoveLeft": false,
             "showMoveRight": false,
@@ -83,6 +128,21 @@ describe('Discover grid columns', function () {
         },
         Object {
           "actions": Object {
+            "additional": Array [
+              Object {
+                "iconProps": Object {
+                  "size": "m",
+                },
+                "iconType": "copyClipboard",
+                "label": <FormattedMessage
+                  defaultMessage="Copy to clipboard"
+                  id="discover.grid.copyToClipBoardButton"
+                  values={Object {}}
+                />,
+                "onClick": [Function],
+                "size": "xs",
+              },
+            ],
             "showHide": false,
             "showMoveLeft": false,
             "showMoveRight": false,
@@ -109,6 +169,21 @@ describe('Discover grid columns', function () {
       Array [
         Object {
           "actions": Object {
+            "additional": Array [
+              Object {
+                "iconProps": Object {
+                  "size": "m",
+                },
+                "iconType": "copyClipboard",
+                "label": <FormattedMessage
+                  defaultMessage="Copy to clipboard"
+                  id="discover.grid.copyToClipBoardButton"
+                  values={Object {}}
+                />,
+                "onClick": [Function],
+                "size": "xs",
+              },
+            ],
             "showHide": false,
             "showMoveLeft": true,
             "showMoveRight": true,
@@ -138,6 +213,21 @@ describe('Discover grid columns', function () {
         },
         Object {
           "actions": Object {
+            "additional": Array [
+              Object {
+                "iconProps": Object {
+                  "size": "m",
+                },
+                "iconType": "copyClipboard",
+                "label": <FormattedMessage
+                  defaultMessage="Copy to clipboard"
+                  id="discover.grid.copyToClipBoardButton"
+                  values={Object {}}
+                />,
+                "onClick": [Function],
+                "size": "xs",
+              },
+            ],
             "showHide": Object {
               "iconType": "cross",
               "label": "Remove column",
@@ -156,6 +246,21 @@ describe('Discover grid columns', function () {
         },
         Object {
           "actions": Object {
+            "additional": Array [
+              Object {
+                "iconProps": Object {
+                  "size": "m",
+                },
+                "iconType": "copyClipboard",
+                "label": <FormattedMessage
+                  defaultMessage="Copy to clipboard"
+                  id="discover.grid.copyToClipBoardButton"
+                  values={Object {}}
+                />,
+                "onClick": [Function],
+                "size": "xs",
+              },
+            ],
             "showHide": Object {
               "iconType": "cross",
               "label": "Remove column",

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

@@ -16,6 +16,7 @@ import { buildCellActions } from './discover_grid_cell_actions';
 import { getSchemaByKbnType } from './discover_grid_schema';
 import { SelectButton } from './discover_grid_document_selection';
 import { defaultTimeColumnWidth } from './constants';
+import { buildCopyColumnNameButton } from './copy_column_name_button';
 
 export function getLeadControlColumns() {
   return [
@@ -80,6 +81,7 @@ export function buildEuiGridColumn(
             },
       showMoveLeft: !defaultColumns,
       showMoveRight: !defaultColumns,
+      additional: columnName === '_source' ? undefined : [buildCopyColumnNameButton(columnName)],
     },
     cellActions: indexPatternField ? buildCellActions(indexPatternField) : [],
   };