Add copy digest button for accessories (#18433)

1.Fixes #18406

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -180,6 +180,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
         ]
     );
     deleteAccessorySub: Subscription;
+    copyDigestSub: Subscription;
     @ViewChild('datagrid')
     datagrid;
     constructor(
@@ -241,6 +242,14 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
                 }
             );
         }
+        if (!this.copyDigestSub) {
+            this.copyDigestSub = this.eventService.subscribe(
+                HarborEvent.COPY_DIGEST,
+                (a: Accessory) => {
+                    this.copyDigestComponent.showDigestId(a.digest);
+                }
+            );
+        }
     }
 
     ngOnDestroy() {
@@ -252,6 +261,10 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
             this.deleteAccessorySub.unsubscribe();
             this.deleteAccessorySub = null;
         }
+        if (this.copyDigestSub) {
+            this.copyDigestSub.unsubscribe();
+            this.copyDigestSub = null;
+        }
         this.datagrid['columnsService']?.columns?.forEach((item, index) => {
             if (this.depth) {
                 this.hiddenArray[index] = !!item?._value?.hidden;

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html

@@ -11,9 +11,12 @@
         *ngFor="let a of displayedAccessories; let i = index"
         [clrDgItem]="a">
         <clr-dg-action-overflow>
-            <button class="action-item" (click)="delete(a)">
+            <button class="my-action-item" (click)="delete(a)">
                 {{ 'REPOSITORY.DELETE' | translate }}
             </button>
+            <button class="my-action-item" (click)="copyDigest(a)">
+                {{ 'REPOSITORY.COPY_DIGEST_ID' | translate }}
+            </button>
         </clr-dg-action-overflow>
         <clr-dg-cell class="relative">
             <!--it will cause a ExpressionChangedAfterItHasBeenCheckedError when read datagrid['el']?.nativeElement?.offsetHeight so

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss

@@ -38,3 +38,17 @@
   left: -4.2rem;
   bottom: 0
 }
+
+.my-action-item {
+  font-size: .7rem;
+  letter-spacing: normal;
+  background: 0 0;
+  border: 0;
+  cursor: pointer;
+  display: block;
+  line-height: 1.15rem;
+  margin: 0;
+  padding: 0.05rem 1.2rem 0;
+  text-align: left;
+  width: 100%;
+}

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts

@@ -180,4 +180,8 @@ export class SubAccessoriesComponent implements OnInit, AfterViewInit {
             });
         }
     }
+
+    copyDigest(a: Accessory) {
+        this.event.publish(HarborEvent.COPY_DIGEST, a);
+    }
 }

src/portal/src/app/services/event-service/event.service.ts

@@ -80,4 +80,5 @@ export enum HarborEvent {
     UPDATE_VULNERABILITY_INFO = 'UpdateVulnerabilityInfo',
     REFRESH_EXPORT_JOBS = 'refreshExportJobs',
     DELETE_ACCESSORY = 'deleteAccessory',
+    COPY_DIGEST = 'copyDigest',
 }

src/portal/src/css/common.scss

@@ -357,3 +357,12 @@ job-service-dashboard {
 .datagrid-numeric-filter-input {
   background-color: $datagrid-numeric-filter-input-bg-color;
 }
+
+
+.my-action-item {
+  color: $normal-border-color
+}
+
+.my-action-item:hover {
+  background-color: $label-hover-bg-color !important;
+}