[ADF-4394] - add suport for copy clipboard on JSON cell type (#4611)

* [ADF-4394] - add suport for copy clipboard  on JSON cell type

* [ADF-4394] - lint

* [ADF-4394] - change translation keys

demo-shell/resources/i18n/en.json

@@ -179,9 +179,7 @@
     "REPLACE_COLUMNS": "Replace columns",
     "LOAD_NODE": "Load Node",
     "MULTISELECT": "Multiselect",
-    "MULTISELECT_DESCRIPTION": "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items",
+    "MULTISELECT_DESCRIPTION": "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items"
-    "CLICK_TO_COPY": "Click to copy",
-    "SUCCESS_COPY": "Text copied to clipboard"
   },
   "ANALYTICS_REPORT": {
     "NO_REPORT_MESSAGE": "No report selected. Choose a report from the list"

lib/core/datatable/components/datatable/datatable-cell.component.ts

@@ -36,8 +36,8 @@ import { Node } from '@alfresco/js-api';
     template: `
         <ng-container>
             <span *ngIf="copyContent; else defaultCell"
-                adf-clipboard="DATATABLE.CLICK_TO_COPY"
+                adf-clipboard="CLIPBOARD.CLICK_TO_COPY"
-                [clipboard-notification]="'DATATABLE.SUCCESS_COPY'"
+                [clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'"
                 [attr.aria-label]="value$ | async"
                 [title]="tooltip"
                 class="adf-datatable-cell-value"

lib/core/datatable/components/datatable/datatable.component.html

@@ -162,6 +162,7 @@
                             <div *ngSwitchCase="'json'" class="adf-cell-value"
                                  [attr.data-automation-id]="'text_' + data.getValue(row, col)">
                                 <adf-json-cell
+                                    [copyContent]="col.copyContent"
                                     [data]="data"
                                     [column]="col"
                                     [row]="row">

lib/core/datatable/components/datatable/json-cell.component.scss

@@ -2,3 +2,7 @@
     white-space: pre-wrap;
     word-wrap: break-word;
 }
+
+.adf-datatable-cell-value {
+    position: relative;
+}

lib/core/datatable/components/datatable/json-cell.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
 import { DataTableCellComponent } from './datatable-cell.component';
 
 @Component({
@@ -23,10 +23,20 @@ import { DataTableCellComponent } from './datatable-cell.component';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container>
+            <span *ngIf="copyContent; else defaultJsonTemplate" class="adf-datatable-cell-value">
+                <pre
+                    class="adf-datatable-json-cell"
+                    [adf-clipboard]="'CLIPBOARD.CLICK_TO_COPY'"
+                    [clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'">
+                    {{ value$ | async | json }}
+                </pre>
+            </span>
+        </ng-container>
+        <ng-template #defaultJsonTemplate>
             <span class="adf-datatable-cell-value">
                 <pre class="adf-datatable-json-cell">{{ value$ | async | json }}</pre>
             </span>
-        </ng-container>
+        </ng-template>
     `,
     styleUrls: ['./json-cell.component.scss'],
     encapsulation: ViewEncapsulation.None,
@@ -34,6 +44,10 @@ import { DataTableCellComponent } from './datatable-cell.component';
 })
 export class JsonCellComponent extends DataTableCellComponent implements OnInit {
 
+     /** Enables/disables a Clipboard directive to allow copying of the cell's content. */
+     @Input()
+     copyContent: boolean;
+
     ngOnInit() {
         if (this.column && this.column.key && this.row && this.data) {
             this.value$.next(this.data.getValue(this.row, this.column));

lib/core/i18n/en.json

@@ -422,6 +422,9 @@
         "CRYPTODOC_ENABLED": "Is Cryptodoc Enabled"
       }
     }
-
+  },
+  "CLIPBOARD": {
+    "CLICK_TO_COPY": "Click to copy",
+    "SUCCESS_COPY": "Text copied to clipboard"
   }
 }