From: Afreen Misbah <afreen@ibm.com>
Date: Thu, 10 Jul 2025 20:29:12 +0000 (+0530)
Subject: mgr/dashboard:Fixed issue with clipboard icon
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=1dd42e1a339ef4cf1f3253534646aa6c9342233d;p=ceph.git

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 <afreen@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-snapshotschedule-list/cephfs-snapshotschedule-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-snapshotschedule-list/cephfs-snapshotschedule-list.component.html
index ee790712d168..46d6c0f1848a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-snapshotschedule-list/cephfs-snapshotschedule-list.component.html
+++ b/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>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html
index a5a2f495f1c0..3ed393aa6fed 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html
+++ b/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 }}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html
index f91ff8eafd6b..4046a4e2a215 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html
+++ b/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>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss
index e69de29bb2d1..72ec3a89b8ef 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss
+++ b/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;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.ts
index b6b8ca77e8ad..2b82b76f5a51 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.ts
+++ b/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;
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html
index 2e6522bd9389..f1182dd46d03 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html
+++ b/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>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss
index e0a3d2050b34..96e563783678 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss
+++ b/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;
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.spec.ts
index c14459401a61..720480b0960e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.spec.ts
+++ b/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();
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts
index 82bb1981836a..a4442d559e3d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts
+++ b/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];
+  }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index da5a96d3a6b6..a530d728420a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/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>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
index 9d5c95413209..8c86a302f18b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
@@ -99,7 +99,7 @@ export enum Icons {
   inverse = 'fa fa-inverse' // To get an alternative icon color
 }
 
-export enum IconsSize {
+export enum IconSize {
   size16 = '16',
   size20 = '20',
   size24 = '24',
@@ -107,8 +107,9 @@ export enum IconsSize {
 }
 
 export const ICON_TYPE = {
+  copy: 'copy',
   danger: 'danger',
-  info: 'info',
+  infoCircle: 'info-circle',
   success: 'success',
   warning: 'warning'
 } as const;
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
index f66478d7ccba..7bc6e6c00790 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
@@ -41,6 +41,10 @@ Custom theme
 Datatable
 ******************************************/
 
+:root {
+  @include type.type-classes();
+}
+
 tr.cds--expandable-row > td:first-of-type {
   background-color: vv.$white !important;
   padding-inline-start: 1rem !important;