From: Tatjana Dehler <tdehler@suse.com>
Date: Fri, 17 Apr 2020 12:49:05 +0000 (+0200)
Subject: mgr/dashboard: handle `textarea` and add tooltip
X-Git-Tag: v16.1.0~2469^2~1
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=d2f76c91af13789ac95a3de0041d2d47c37e0173;p=ceph.git

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 e50fd86332c4..37fca45264e6 100644
--- 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 005b20157583..32f4cda3e85b 100644
--- 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.