Merge pull request ceph#64329 from afreen23/cd-icon

mgr/dashboard: Add generic component for icons

Reviewed-by: Nizamudeen A <[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

@@ -52,18 +52,18 @@
     <span *ngIf="data.categoryPgAmount?.clean">
       {{ data.categoryPgAmount?.clean }}
     </span>
-    <i class="text-success"
-       [ngClass]="[icons.success]">
-    </i>
+    <cd-icon
+       type="success">
+    </cd-icon >
   </span>
   <span *ngIf="data.info"
         class="ms-2">
     <span *ngIf="data.info">
       {{ data.info }}
     </span>
-    <i class="text-info"
-       [ngClass]="[icons.danger]">
-    </i>
+    <cd-icon
+       type="infoCircle">
+    </cd-icon >
   </span>
   <span *ngIf="data.warn || data.categoryPgAmount?.warning"
         class="ms-2">
@@ -73,9 +73,9 @@
     <span *ngIf="data.categoryPgAmount?.warning">
       {{ data.categoryPgAmount?.warning }}
     </span>
-    <i class="text-warning"
-       [ngClass]="[icons.warning]">
-    </i>
+    <cd-icon
+       type="warning">
+    </cd-icon >
   </span>
   <span *ngIf="data.error || data.categoryPgAmount?.unknown"
         class="ms-2">
@@ -85,9 +85,9 @@
     <span *ngIf="data.categoryPgAmount?.unknown">
       {{ data.categoryPgAmount?.unknown }}
     </span>
-    <i class="text-danger"
-       [ngClass]="[icons.danger]">
-    </i>
+    <cd-icon
+       type="danger">
+    </cd-icon >
   </span>
   <span *ngIf="data.categoryPgAmount?.working"
         class="ms-2">
@@ -103,9 +103,9 @@
 <ng-template #osdSummary>
   <span *ngIf="data.up === data.in">
     {{ data.up }}
-    <i class="text-success"
-       [ngClass]="[icons.success]">
-    </i>
+    <cd-icon
+       type="success">
+    </cd-icon >
   </span>
   <span *ngIf="data.up !== data.in">
     {{ data.up }}
@@ -151,36 +151,36 @@
 <ng-template #iscsiSummary>
   <span>
     {{ data.up }}
-    <i class="text-success"
+    <cd-icon
        *ngIf="data.up || data.up === 0"
-       [ngClass]="[icons.success]">
-    </i>
+       type="success">
+    </cd-icon >
   </span>
   <span *ngIf="data.down"
         class="ms-2">
         {{ data.down }}
-    <i class="text-danger"
-       [ngClass]="[icons.danger]">
-    </i>
+    <cd-icon
+       type="danger">
+    </cd-icon >
   </span>
 </ng-template>
 
 <ng-template #simplifiedSummary>
   <span *ngIf="!dropdownTotalError else showErrorNum">
     {{ data }}
-    <i class="text-success"
-       [ngClass]="[icons.success]"></i>
+    <cd-icon
+       type="success"></cd-icon >
   </span>
   <ng-template #showErrorNum>
     <span *ngIf="data - dropdownTotalError  > 0">
       {{ data - dropdownTotalError  }}
-    <i class="text-success"
-       [ngClass]="[icons.success]"></i>
+    <cd-icon
+      type="success"></cd-icon >
     </span>
     <span>
       {{ dropdownTotalError  }}
-      <i class="text-danger"
-         [ngClass]="[icons.danger]"></i>
+      <cd-icon
+        type="danger"></cd-icon >
     </span>
   </ng-template>
 </ng-template>
@@ -211,17 +211,17 @@
         </div>
         <span [ngClass]="data.value.error ? 'me-2' : 'me-4'">
           {{ data.value.ok }}
-          <i class="text-success"
+          <cd-icon
              *ngIf="data.value.ok"
-             [ngClass]="[icons.success]">
-          </i>
+             type="success">
+          </cd-icon >
         </span>
         <span *ngIf="data.value.error"
               class="me-4 ms-2">
               {{ data.value.error }}
-          <i class="text-danger"
-             [ngClass]="[icons.danger]">
-          </i>
+          <cd-icon
+             type="danger">
+          </cd-icon >
         </span>
       </div>
     </li>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts

@@ -89,6 +89,7 @@ import InfoIcon from '@carbon/icons/es/information/16';
 import CopyIcon from '@carbon/icons/es/copy/32';
 import downloadIcon from '@carbon/icons/es/download/16';
 import { ChartsModule } from '@carbon/charts-angular';
+import { IconComponent } from './icon/icon.component';
 
 @NgModule({
   imports: [
@@ -172,7 +173,8 @@ import { ChartsModule } from '@carbon/charts-angular';
     FormAdvancedFieldsetComponent,
     UpgradableComponent,
     ProgressComponent,
-    SidePanelComponent
+    SidePanelComponent,
+    IconComponent
   ],
   providers: [provideCharts(withDefaultRegisterables())],
   exports: [
@@ -212,7 +214,8 @@ import { ChartsModule } from '@carbon/charts-angular';
     FormAdvancedFieldsetComponent,
     UpgradableComponent,
     ProgressComponent,
-    SidePanelComponent
+    SidePanelComponent,
+    IconComponent
   ]
 })
 export class ComponentsModule {

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

@@ -0,0 +1,3 @@
+<svg  [cdsIcon]="icon"
+      [size]="size"
+      [class]="type+'-icon'"></svg>

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

@@ -0,0 +1,19 @@
+@use '@carbon/styles/scss/theme';
+
+.success-icon {
+  color: theme.$support-success;
+}
+
+.danger-icon {
+  color: theme.$support-error;
+}
+
+//@TODO: this naming needs to be changed
+// Do this after converting Icons enum to const
+.infoCircle-icon {
+  color: theme.$support-info;
+}
+
+.warning-icon {
+  color: theme.$support-caution-major;
+}

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

@@ -0,0 +1,24 @@
+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>;
+
+  configureTestBed({
+    declarations: [IconComponent],
+    imports: []
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+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 implements OnInit {
+  @Input() type!: keyof typeof ICON_TYPE;
+  @Input() size: IconSize = IconSize.size16;
+
+  icon: string;
+
+  ngOnInit() {
+    this.icon = Icons[this.type];
+  }
+}