Fix: Helm Chart Copy Button in UI (goharbor#21969)

* fix: helm chart copy btn in UI

Signed-off-by: bupd <[email protected]>

* add: tests for pull command component in UI

Signed-off-by: bupd <[email protected]>

---------

Signed-off-by: bupd <[email protected]>

Author: bupd

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/pull-command/pull-command.component.html

@@ -3,6 +3,7 @@
         *ngIf="isImage(artifact)"
         [title]="getPullCommandForRuntimeByDigest(artifact)"
         [iconMode]="true"
+        id="pullCommandForDigest"
         (onCopySuccess)="
             onCpSuccess(getPullCommandForRuntimeByDigest(artifact))
         "
@@ -12,6 +13,7 @@
     <div
         *ngIf="isCNAB(artifact)"
         class="flex"
+        id="pullCommandForCNAB"
         aria-label="Dropdown header Action">
         <hbr-copy-input
             [title]="getPullCommandForCNAB(artifact)"
@@ -20,8 +22,9 @@
             [defaultValue]="getPullCommandForCNAB(artifact)"></hbr-copy-input>
     </div>
     <div
-        *ngIf="isChart(artifact)"
+        *ngIf="isChart(artifact) && artifact.tagNumber > 0"
         class="flex"
+        id="pullCommandForChart"
         aria-label="Dropdown header Action">
         <hbr-copy-input
             [title]="getPullCommandForChart(artifact)"

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

@@ -14,7 +14,8 @@
 import { PullCommandComponent } from './pull-command.component';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SharedTestingModule } from '../../../../../../../../shared/shared.module';
-import { ArtifactType } from '../../../../artifact'; // Import the necessary type
+import { ArtifactType, Clients } from '../../../../artifact'; // Import the necessary type
+import { ArtifactFront } from '../../../../artifact';
 
 describe('PullCommandComponent', () => {
     let component: PullCommandComponent;
@@ -29,11 +30,11 @@ describe('PullCommandComponent', () => {
         fixture = TestBed.createComponent(PullCommandComponent);
         component = fixture.componentInstance;
 
-        // Mock the artifact input with a valid value
         component.artifact = {
-            type: ArtifactType.IMAGE,
-            digest: 'sampleDigest',
-            tags: [{ name: 'latest' }],
+            type: ArtifactType.CHART,
+            tagNumber: 1,
+            digest: 'sha256@digest',
+            tags: [{ name: '1.0.0' }],
         };
 
         fixture.detectChanges();
@@ -42,4 +43,69 @@ describe('PullCommandComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should not display pull command for chart', async () => {
+        // Mock the artifact input with a valid value
+        component.artifact = {
+            type: ArtifactType.CHART,
+            tagNumber: 0,
+            digest: 'sha256@digest',
+            tags: [],
+        };
+        component.getPullCommandForChart(component.artifact);
+        expect(
+            component.getPullCommandForChart(component.artifact).length
+        ).toBe(0);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const modal =
+            fixture.nativeElement.querySelector(`#pullCommandForChart`);
+        expect(modal).toBeFalsy();
+    });
+
+    it('should display when pull command for chart is available', async () => {
+        // Mock the artifact input with a valid value
+        component.artifact = {
+            type: ArtifactType.CHART,
+            tagNumber: 1,
+            digest: 'sha256@digest',
+            tags: [{ name: '1.0.0' }],
+        };
+        component.getPullCommandForChart(component.artifact);
+        expect(
+            component.getPullCommandForChart(component.artifact).length
+        ).toBeGreaterThan(0);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const modal =
+            fixture.nativeElement.querySelector(`#pullCommandForChart`);
+        expect(modal).toBeTruthy();
+    });
+
+    it('should display when pull command for digest is available', async () => {
+        // Mock the artifact input with a valid value
+        component.artifact = {
+            type: ArtifactType.IMAGE,
+        };
+        component.getPullCommandForRuntimeByDigest(component.artifact);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const modal = fixture.nativeElement.querySelector(
+            `#pullCommandForDigest`
+        );
+        expect(modal).toBeTruthy();
+    });
+
+    it('should display when pull command for CNAB is available', async () => {
+        // Mock the artifact input with a valid value
+        component.artifact = {
+            type: ArtifactType.CNAB,
+        };
+        component.getPullCommandForCNAB(component.artifact);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const modal =
+            fixture.nativeElement.querySelector(`#pullCommandForCNAB`);
+        expect(modal).toBeTruthy();
+    });
 });

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

@@ -100,14 +100,18 @@ export class PullCommandComponent {
     }
 
     getPullCommandForChart(artifact: Artifact): string {
-        return getPullCommandByTag(
-            artifact.type,
-            `${this.registryUrl ? this.registryUrl : location.hostname}/${
-                this.projectName
-            }/${this.repoName}`,
-            artifact.tags[0].name,
-            Clients.CHART
-        );
+        if (artifact.tagNumber > 0) {
+            return getPullCommandByTag(
+                artifact.type,
+                `${this.registryUrl ? this.registryUrl : location.hostname}/${
+                    this.projectName
+                }/${this.repoName}`,
+                artifact.tags[0].name,
+                Clients.CHART
+            );
+        } else {
+            return '';
+        }
     }
 
     // For tagMode