mgr/dashboard: handle `textarea` and add tooltip

Enhance `Copy2ClipboardButtonDirective` in order to
handle `textarea`s and copy a formatted input.
Add a tooltip to the button, too.

Signed-off-by: Tatjana Dehler <tdehler@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts
index e50fd86332c435b970d370bdf648105f3e4e58cc..37fca45264e6572291498f99166c9006b8bb6c7d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts
@@ -1,8 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+
+import { I18n } from '@ngx-translate/i18n-polyfill';
+
+import { configureTestBed, i18nProviders } from '../../../testing/unit-test-helper';
 import { Copy2ClipboardButtonDirective } from './copy2clipboard-button.directive';
 
 describe('Copy2clipboardButtonDirective', () => {
+  configureTestBed({
+    providers: [i18nProviders]
+  });
+
   it('should create an instance', () => {
-    const directive = new Copy2ClipboardButtonDirective(null, null, null);
+    const i18n = TestBed.get(I18n);
+    const directive = new Copy2ClipboardButtonDirective(null, null, null, i18n);
     expect(directive).toBeTruthy();
   });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts
index 005b20157583a936459b7925335d1cacd2af1285..32f4cda3e85b845f97355c08db79ced66d2aa24d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts
@@ -1,4 +1,5 @@
 import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
+import { I18n } from '@ngx-translate/i18n-polyfill';
 
 import { ToastrService } from 'ngx-toastr';
 
@@ -8,17 +9,21 @@ import { ToastrService } from 'ngx-toastr';
 export class Copy2ClipboardButtonDirective implements OnInit {
   @Input()
   private cdCopy2ClipboardButton: string;
+  @Input()
+  private formatted = 'no';
 
   constructor(
     private elementRef: ElementRef,
     private renderer: Renderer2,
-    private toastr: ToastrService
+    private toastr: ToastrService,
+    private i18n: I18n
   ) {}
 
   ngOnInit() {
     const iElement = this.renderer.createElement('i');
     this.renderer.addClass(iElement, 'fa');
     this.renderer.addClass(iElement, 'fa-clipboard');
+    this.renderer.setAttribute(iElement, 'title', this.i18n('Copy to clipboard'));
     this.renderer.appendChild(this.elementRef.nativeElement, iElement);
   }
 
@@ -29,8 +34,9 @@ export class Copy2ClipboardButtonDirective implements OnInit {
   @HostListener('click')
   onClick() {
     try {
+      const tagName = this.formatted === '' ? 'textarea' : 'input';
       // Create the input to hold our text.
-      const tmpInputElement = document.createElement('input');
+      const tmpInputElement = document.createElement(tagName);
       tmpInputElement.value = this.getInputElement().value;
       document.body.appendChild(tmpInputElement);
       // Copy text to clipboard.