Update: Copy to clipboard using selection

- Chrome on macos doesn't like the `e.clipboardData.setData('text/html', ...)`

locales/en/common.json

@@ -38,7 +38,8 @@
     "view": "View",
     "write": "Write",
     "acceptAndPublish": "ACCEPT AND PUBLISH",
-    "copyToClipboard": "Copy to clipboard"
+    "copyToClipboard": "Copy to clipboard",
+    "copiedToClipboard": "Copied to clipboard"
   },
   "csv": {
     "autoDetect": "Auto-detect ",

src/kpi/ui/admin/ExecutionDisplay.tsx

@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
 import { translate } from 'react-i18next';
 // Actions
 import { deleteExecution, executeExecution, getExecution, listDimensions, listParameters } from 'kpi/actions/admin';
+import { showSnackbar } from 'actions/snackbar';
 // Models
 import ExecutionDetails from 'model/kpi/ExecutionDetails';
 import ExecutionRun from 'model/kpi/ExecutionRun';
@@ -34,6 +35,7 @@ interface IExecutionProps extends React.ClassAttributes<any> {
   getExecution: any;
   executeExecution: any;
   deleteExecution: any;
+  showSnackbar: any;
 }
 
 class ExecutionDisplay extends React.Component<IExecutionProps, any> {
@@ -63,20 +65,30 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
     }
 
     // Bind event listener
-    document.addEventListener('copy', this.copyRunTable, false);
+    // document.addEventListener('copy', this.copyRunTable, false);
   }
 
   // Unbind event listener
   public componentWillUnmount() {
-    document.removeEventListener('copy', this.copyRunTable, false);
+    // document.removeEventListener('copy', this.copyRunTable, false);
   }
 
   private copyRunTable = (e) => {
-    if (e.currentTarget.activeElement.id === 'copyBtn') {
-      e.clipboardData.setData('text/html', document.getElementById('runTable').innerHTML);
-      console.log('Table copied to clipboard.');
+    // if (e.currentTarget.activeElement.id === 'copyBtn') {
+      // e.clipboardData.setData('text/html', document.getElementById('runTable').innerHTML);
       e.preventDefault();
-    }
+      const table: any = document.querySelector('#runTable');
+      window.getSelection().removeAllRanges();
+      const range = document.createRange();
+      range.selectNode(table);
+      window.getSelection().addRange(range);
+      console.log('Table copied to clipboard.');
+      document.execCommand('copy');
+      window.getSelection().removeAllRanges();
+      const { showSnackbar, t } = this.props;
+      showSnackbar(t('common:action.copiedToClipboard'));
+      // window.getSelection().removeAllRanges();
+    // }
   }
 
   private execute = () => {
@@ -170,7 +182,7 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
             <Grid item sm={ 12 } md={ 6 }>
               <PageSection title={ currentRun === null ? t('kpi.admin.p.executionDisplay.lastRun') : <span>{ t('kpi.admin.p.executionDisplay.runFrom') }<PrettyDate value={ currentRun.timestamp }/></span> }
                 action={
-                  <Button id="copyBtn" onClick={ () => document.execCommand('copy') }>
+                  <Button id="copyBtn" onClick={ this.copyRunTable }>
                     { t('common:action.copyToClipboard') }&nbsp;&nbsp;
                     <FileCopyIcon fontSize="small"/>
                   </Button>
@@ -208,6 +220,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   getExecution,
   executeExecution,
   deleteExecution,
+  showSnackbar,
 }, dispatch);