mgr/dashboard:Fixed issue with clipboard icon

- clipboard icon not displaying breaking several places
- cliboard icon on click gets filed primary green color losing the visibilty of icon. The icon now remain visible on click
- clipboard button for path and copy in tables on mouseover does not give `hand` but `cursor`. which was not ideal from a usability standpoint. This behavior has been updated to use the hand cursor making the interaction semantically correct and more intuitive for users.

Signed-off-by: Afreen Misbah <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-snapshotschedule-list/cephfs-snapshotschedule-list.component.html

@@ -38,19 +38,14 @@
   </ng-template>
 
   <ng-template #fullpathForSelectionTpl>
-    <span
-      data-toggle="tooltip"
-      [title]="row.pathForSelection"
-      class="font-monospace"
-      >{{ row.pathForSelection?.split?.("@")?.[0] }}
-      <cd-copy-2-clipboard-button
-        *ngIf="row.pathForSelection"
-        [source]="row.pathForSelection?.split?.('@')?.[0]"
-        [byId]="false"
-        [showIconOnly]="true"
-      >
-      </cd-copy-2-clipboard-button>
-    </span>
+    <cd-copy-2-clipboard-button
+      *ngIf="row.pathForSelection"
+      [source]="row.pathForSelection?.split?.('@')?.[0]"
+      [byId]="false"
+      [size]="lg"
+      [text]="row.pathForSelection?.split?.('@')?.[0]"
+    >
+    </cd-copy-2-clipboard-button>
   </ng-template>
 </ng-template>
 

src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html

@@ -62,7 +62,7 @@
       {{ data.info }}
     </span>
     <cd-icon
-       type="info">
+       type="infoCircle">
     </cd-icon >
   </span>
   <span *ngIf="data.warn || data.categoryPgAmount?.warning"
@@ -99,9 +99,7 @@
     </i>
   </span>
 </ng-template>
-<cd-icon
-       type="progress">
-    </cd-icon >
+
 <ng-template #osdSummary>
   <span *ngIf="data.up === data.in">
     {{ data.up }}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html

@@ -1,20 +1,15 @@
 
-<svg [cdsIcon]="icons.clipboard"
-     [size]="icons.size16"
-     (click)="onClick()"
-     class="text-primary ms-2"
-     title="Copy to Clipboard"
-     i18n-title
-     *ngIf="showIconOnly; else withButtonTpl"></svg>
-
-<ng-template #withButtonTpl>
-
-  <cds-icon-button kind="tertiary"
-                   size="md"
-                   title="Copy to Clipboard"
-                   (click)="onClick()">
-    <svg [cdsIcon]="icons.copy"
-         [size]="icons.size16"
-         class="cds--btn__icon"></svg>
-  </cds-icon-button>
-</ng-template>
+<button cdsButton="ghost"
+        class="clipboard-btn"
+        [ngClass]="{'clipboard-btn-with-text': text}"
+        [size]="size"
+        description="Copy to Clipboard"
+        i18n-description
+        (click)="onClick()">
+  @if(text) {
+  <span data-toggle="tooltip"
+        [title]="text"
+        class="cds--type-mono">{{text}}</span>
+  }
+  <cd-icon type="copy"></cd-icon>
+</button>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss

@@ -0,0 +1,9 @@
+.clipboard-btn {
+  border: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.clipboard-btn-with-text {
+  color: inherit;
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.ts

@@ -11,14 +11,21 @@ import { Icons } from '~/app/shared/enum/icons.enum';
   styleUrls: ['./copy2clipboard-button.component.scss']
 })
 export class Copy2ClipboardButtonComponent {
+  // The text to be copied
   @Input()
   private source: string;
 
+  // Optional: Extracts text to be copied by "id" attribute
   @Input()
   byId = true;
 
+  // Size of the button
   @Input()
-  showIconOnly = false;
+  size = 'md';
+
+  // Optional: Adds text to the left of copy icon
+  @Input()
+  text?: string;
 
   icons = Icons;
 

src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html

@@ -1,23 +1,3 @@
-@if (type === ICON_TYPE.danger) {
-    <svg class = "danger-icon"
-         [cdsIcon]="ICONS.danger"
-         [size]="size"></svg>
-}
-
-@if (type === ICON_TYPE.info) {
-    <svg class = "info-icon"
-         [cdsIcon]="ICONS.infoCircle"
-         [size]="size"></svg>
-}
-
-@if (type === ICON_TYPE.success) {
-    <svg class = "success-icon"
-         [cdsIcon]="ICONS.success"
-         [size]="size"></svg>
-}
-
-@if (type === ICON_TYPE.warning) {
-    <svg class = "warning-icon"
-         [cdsIcon]="ICONS.warning"
-         [size]="size"></svg>
-}
+<svg  [cdsIcon]="icon"
+      [size]="size"
+      [class]="type+'-icon'"></svg>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss

@@ -8,7 +8,9 @@
   color: theme.$support-error;
 }
 
-.info-icon {
+//@TODO: this naming needs to be changed
+// Do this after converting Icons enum to const
+.infoCircle-icon {
   color: theme.$support-info;
 }
 

src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.spec.ts

@@ -1,16 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { configureTestBed } from '~/testing/unit-test-helper';
 import { IconComponent } from './icon.component';
 
 describe('IconComponent', () => {
   let component: IconComponent;
   let fixture: ComponentFixture<IconComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [IconComponent]
-    }).compileComponents();
+  configureTestBed({
+    declarations: [IconComponent],
+    imports: []
+  });
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(IconComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts

@@ -1,15 +1,18 @@
-import { Component, Input } from '@angular/core';
-import { ICON_TYPE, Icons, IconsSize } from '../../enum/icons.enum';
+import { Component, Input, OnInit } from '@angular/core';
+import { ICON_TYPE, Icons, IconSize } from '../../enum/icons.enum';
 
 @Component({
   selector: 'cd-icon',
   templateUrl: './icon.component.html',
   styleUrl: './icon.component.scss'
 })
-export class IconComponent {
+export class IconComponent implements OnInit {
   @Input() type!: keyof typeof ICON_TYPE;
-  @Input() size: IconsSize = IconsSize.size16;
+  @Input() size: IconSize = IconSize.size16;
 
-  readonly ICONS = Icons;
-  readonly ICON_TYPE = ICON_TYPE;
+  icon: string;
+
+  ngOnInit() {
+    this.icon = Icons[this.type];
+  }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html

@@ -379,23 +379,20 @@
 
 <ng-template #pathTpl
              let-value="data.value">
-  <span data-toggle="tooltip"
-        [title]="value"
-        class="font-monospace">{{ value | path }}
-    <cd-copy-2-clipboard-button *ngIf="value"
-                                [source]="value"
-                                [byId]="false"
-                                [showIconOnly]="true">
-    </cd-copy-2-clipboard-button>
-  </span>
+  <cd-copy-2-clipboard-button *ngIf="value"
+                              [source]="value"
+                              [byId]="false"
+                              size="lg"
+                              text="{{ value | path }}">
+  </cd-copy-2-clipboard-button>
 </ng-template>
 
 <ng-template #copyTpl
              let-value="data.value">
-  <span class="font-monospace">{{value}}</span>
   <cd-copy-2-clipboard-button *ngIf="value"
                               [source]="value"
                               [byId]="false"
-                              [showIconOnly]="true">
+                              [size]="lg"
+                              [text]="value">
   </cd-copy-2-clipboard-button>
 </ng-template>