Clean up copy/pasting of tabular content in EuiDataGrid and EuiBasic/InMemoryTable

packages/eui/cypress/support/component.tsx

@@ -20,6 +20,7 @@ import 'cypress-real-events';
 
 import './a11y/checkAxe';
 import './keyboard/repeatRealPress';
+import './copy/select_and_copy';
 import './setup/mount';
 import './setup/realMount';
 

packages/eui/cypress/support/copy/select_and_copy.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.
+ */
+
+const selectAndCopy = (selectorToCopy: string) => {
+  // Force Chrome devtools to allow reading from the clipboard
+  cy.wrap(
+    Cypress.automation('remote:debugger:protocol', {
+      command: 'Browser.grantPermissions',
+      params: {
+        permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
+        origin: window.location.origin,
+      },
+    })
+  );
+
+  // For some annoying reason, mocking selection+copying throws a bunch
+  // of document errors from the code coverage reporter - just ignore them
+  Cypress.on('uncaught:exception', (err) => {
+    console.log(err.message);
+    if (
+      err.message.includes(
+        "Cannot read properties of null (reading 'document')"
+      )
+    ) {
+      return false;
+    }
+  });
+
+  cy.get(selectorToCopy).then(($el) => {
+    const el = $el[0];
+    const document = el.ownerDocument;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    document.getSelection()!.removeAllRanges();
+    document.getSelection()!.addRange(range);
+  });
+
+  return cy.window().then((window) => {
+    document.execCommand('copy');
+    return window.navigator.clipboard.readText();
+  });
+};
+
+Cypress.Commands.add('selectAndCopy', selectAndCopy);

packages/eui/cypress/support/index.d.ts

@@ -49,6 +49,13 @@ declare global {
         count?: number,
         options?: RealPressOptions
       ): void;
+
+      /**
+       * Select an element's content and copy it to the browser clipboard
+       * @param selectorToCopy e.g. '.euiDataGrid__content'
+       * @returns a chainable .then((string) => { doSomethingWith(string); })
+       */
+      selectAndCopy(selectorToCopy: string): Chainable<string>;
     }
   }
 }

packages/eui/src/components/basic_table/basic_table.spec.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.
+ */
+
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
+
+import React from 'react';
+import { EuiHealth } from '../../components';
+import { EuiBasicTable, EuiBasicTableColumn } from './index';
+
+describe('EuiBasicTable', () => {
+  const columns: Array<EuiBasicTableColumn<any>> = [
+    { field: 'a', name: 'A', render: () => 'Hello' },
+    { field: 'b', name: 'B', render: () => 'World' },
+    {
+      field: 'c',
+      name: 'Status',
+      render: () => <EuiHealth color="success">Online</EuiHealth>,
+    },
+  ];
+
+  describe('copying tabular content', () => {
+    it('renders one newline per-row and renders horizontal tab characters between cells', () => {
+      cy.realMount(
+        <EuiBasicTable
+          tableCaption="Demo of EuiBasicTable"
+          items={[{}]}
+          rowHeader="firstName"
+          columns={columns}
+          responsiveBreakpoint={false}
+        />
+      );
+
+      cy.selectAndCopy('.euiTable').then((copiedText) => {
+        expect(copiedText).to.eq(
+          `A\tB\t\Status
+Hello\tWorld\tOnline
+`
+        );
+      });
+    });
+  });
+});

packages/eui/src/components/datagrid/data_grid.spec.tsx

@@ -720,6 +720,23 @@ describe('EuiDataGrid', () => {
       });
     });
   });
+
+  describe('copying tabular content', () => {
+    it('renders one newline per-row and renders horizontal tab characters between cells', () => {
+      cy.realMount(<EuiDataGrid {...baseProps} />);
+
+      cy.selectAndCopy('.euiDataGrid__content').then((copiedText) => {
+        expect(copiedText).to.eq(
+          `First\tSecond
+a, 0\tb, 0
+a, 1\tb, 1
+a, 2\tb, 2
+a, footer\tb, footer
+`
+        );
+      });
+    });
+  });
 });
 
 function getGridData() {