From 9e0e8e066b578c5d06b2453e5a8ca77cceceb6d2 Mon Sep 17 00:00:00 2001
From: Shijun Sun <30999793+AllForNothing@users.noreply.github.com>
Date: Tue, 28 Mar 2023 20:37:44 +0800
Subject: [PATCH] Add copy digest button for accessories (#18433)

1.Fixes #18406

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../artifact-list-tab.component.ts                 | 13 +++++++++++++
 .../sub-accessories/sub-accessories.component.html |  5 ++++-
 .../sub-accessories/sub-accessories.component.scss | 14 ++++++++++++++
 .../sub-accessories/sub-accessories.component.ts   |  4 ++++
 .../app/services/event-service/event.service.ts    |  1 +
 src/portal/src/css/common.scss                     |  9 +++++++++
 6 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
index a0ac89edb..e727e4983 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
+++ b/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;
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html
index f4f993329..5f8071f2d 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html
+++ b/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
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss
index 15353821e..dbf534b6e 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss
+++ b/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%;
+}
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
index 9c700e932..434ebf344 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
+++ b/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);
+    }
 }
diff --git a/src/portal/src/app/services/event-service/event.service.ts b/src/portal/src/app/services/event-service/event.service.ts
index fe492e32c..e9506598f 100644
--- a/src/portal/src/app/services/event-service/event.service.ts
+++ b/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',
 }
diff --git a/src/portal/src/css/common.scss b/src/portal/src/css/common.scss
index 70ef6eaf8..1c9c28344 100644
--- a/src/portal/src/css/common.scss
+++ b/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;
+}