[ADF-4403] ClipboardDirective - add default translation key and fix styling (#4610)

* [ADF-4403] ClipboardDirective - add default translation key and fix style on sticky header

* [ADF-4403] - lint

* [ADF-4403] - revert datatable style

* [ADF-4403] - fix unit tests

* [ADF-4403] - fix e2e tests

lib/core/clipboard/clipboard.component.scss

@@ -0,0 +1,24 @@
+@mixin adf-clipboard-theme($theme) {
+    $primary: map-get($theme, primary);
+    $config: mat-typography-config();
+
+    .adf-copy-tooltip {
+        position: absolute;
+        background: mat-color($primary);
+        color: mat-color($primary, default-contrast) !important;
+        font-size: mat-font-size($config, caption);
+        padding: 2px 5px;
+        border-radius: 5px;
+        bottom: 93%;
+        left:0;
+        z-index: 1001;
+        min-height: 20px;
+    }
+
+    .adf-sticky-header {
+        .adf-copy-tooltip {
+            top:85% !important;
+            bottom:0 !important;
+        }
+    }
+}

lib/core/clipboard/clipboard.directive.spec.ts

@@ -72,7 +72,7 @@ describe('CopyClipboardDirective', () => {
 
     @Component({
         selector:  'adf-copy-conent-test-component',
-        template: `<span adf-clipboard='DOCUMENT_LIST.ACTIONS.DOCUMENT.CLICK_TO_COPY'>{{ mockText }}</span>`
+        template: `<span adf-clipboard>{{ mockText }}</span>`
     })
     class TestCopyClipboardComponent {
 
@@ -105,16 +105,16 @@ describe('CopyClipboardDirective', () => {
         const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span');
         spanHTMLElement.dispatchEvent(new Event('mouseenter'));
         fixture.detectChanges();
-        expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull();
+        expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull();
     }));
 
     it('should not show tooltip when element it is not hovered', (() => {
         const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span');
         spanHTMLElement.dispatchEvent(new Event('mouseenter'));
-        expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull();
+        expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull();
 
         spanHTMLElement.dispatchEvent(new Event('mouseleave'));
-        expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).toBeNull();
+        expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).toBeNull();
     }));
 
     it('should copy the content of element when click it', fakeAsync(() => {

lib/core/clipboard/clipboard.directive.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, ViewEncapsulation } from '@angular/core';
+import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, ViewEncapsulation, OnInit } from '@angular/core';
 import { ClipboardService } from './clipboard.service';
 
 @Directive({
@@ -75,12 +75,17 @@ export class ClipboardDirective {
 }
 
 @Component({
-    selector: 'adf-datatable-copy-content-tooltip',
+    selector: 'adf-copy-content-tooltip',
     template: `
-        <span class='adf-datatable-copy-tooltip'>{{ placeholder | translate }} </span>
+        <span class='adf-copy-tooltip'>{{ placeholder | translate }} </span>
         `,
+    styleUrls: ['./clipboard.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class ClipboardComponent {
+export class ClipboardComponent implements OnInit {
     placeholder: string;
+
+    ngOnInit() {
+        this.placeholder = this.placeholder || 'CLIPBOARD.CLICK_TO_COPY';
+    }
 }

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

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

lib/core/datatable/components/datatable/datatable.component.scss

@@ -558,15 +558,4 @@
             }
         }
     }
-
-    .adf-datatable-copy-tooltip {
-        position: absolute;
-        background: mat-color($primary);
-        color: mat-color($primary, default-contrast) !important;
-        padding: 5px 10px;
-        border-radius: 5px;
-        bottom: 94%;
-        left:0;
-        z-index: 20;
-    }
 }

lib/core/styles/_index.scss

@@ -32,6 +32,7 @@
 @import '../buttons-menu/buttons-menu.component';
 @import '../login/components/login-dialog.component';
 @import '../login/components/login-dialog-panel.component';
+@import '../../core/clipboard/clipboard.component';
 
 @mixin adf-core-theme($theme) {
     @include adf-colors-theme($theme);
@@ -66,4 +67,5 @@
     @include adf-login-dialog-theme($theme);
     @include adf-login-dialog-panel-theme($theme);
     @include adf-sidenav-layout-theme($theme);
+    @include adf-clipboard-theme($theme);
 }

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts

@@ -288,7 +288,7 @@ describe('TaskListCloudComponent', () => {
                 const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span[title="11fe013d-c263-11e8-b75b-0a5864600540"]');
                 spanHTMLElement.dispatchEvent(new Event('mouseenter'));
                 copyFixture.detectChanges();
-                expect(copyFixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull();
+                expect(copyFixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull();
             });
             customCopyComponent.taskList.appName = appName.currentValue;
             customCopyComponent.taskList.ngOnChanges({ 'appName': appName });
@@ -303,7 +303,7 @@ describe('TaskListCloudComponent', () => {
                     const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span[title="standalone-subtask"]');
                     spanHTMLElement.dispatchEvent(new Event('mouseenter'));
                     copyFixture.detectChanges();
-                    expect(copyFixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).toBeNull();
+                    expect(copyFixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).toBeNull();
                 });
             });
             customCopyComponent.taskList.appName = appName.currentValue;
@@ -394,7 +394,7 @@ describe('TaskListCloudComponent', () => {
                     const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span[title="11fe013d-c263-11e8-b75b-0a5864600540"]');
                     spanHTMLElement.dispatchEvent(new Event('mouseenter'));
                     fixture.detectChanges();
-                    expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull();
+                    expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull();
                 });
             });
 
@@ -413,7 +413,7 @@ describe('TaskListCloudComponent', () => {
                     const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span[title="standalone-subtask"]');
                     spanHTMLElement.dispatchEvent(new Event('mouseenter'));
                     fixture.detectChanges();
-                    expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).toBeNull();
+                    expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).toBeNull();
                 });
             });
             component.presetColumn = 'fakeCustomSchema';

lib/testing/src/lib/core/pages/data-table-component.page.ts

@@ -43,7 +43,7 @@ export class DataTableComponentPage {
         this.selectedRowNumber = this.rootElement.element(by.css(`div[class*='is-selected'] div[data-automation-id*='text_']`));
         this.allSelectedRows = this.rootElement.all(by.css(`div[class*='is-selected']`));
         this.selectAll = this.rootElement.element(by.css(`div[class*='adf-datatable-header'] mat-checkbox`));
-        this.copyColumnTooltip = this.rootElement.element(by.css(`adf-datatable-copy-content-tooltip span`));
+        this.copyColumnTooltip = this.rootElement.element(by.css(`adf-copy-content-tooltip span`));
     }
 
     checkAllRowsButtonIsDisplayed() {