Fix ui issues found on testing day (#16444)

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

src/portal/src/app/base/left-side-nav/replication/replication/replication-tasks/replication-tasks.component.ts

@@ -52,7 +52,7 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
   endTimeComparator: ClrDatagridComparatorInterface<ReplicationTask> = new CustomComparator<
     ReplicationJob
   >("end_time", "date");
-
+  tasksTimeout: any;
   constructor(
     private translate: TranslateService,
     private router: Router,
@@ -90,16 +90,8 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
   clrLoadPage(): void {
     if (!this.timerDelay) {
       this.timerDelay = timer(REFRESH_TIME_DIFFERENCE, REFRESH_TIME_DIFFERENCE).subscribe(() => {
-        let count: number = 0;
         if (this.execution['status'] === executionStatus) {
-          count++;
-        }
-        if (count > 0) {
           this.getExecutionDetail();
-          let state: ClrDatagridStateInterface = {
-            page: {}
-          };
-          this.clrLoadTasks(false, state);
         } else {
           this.timerDelay.unsubscribe();
           this.timerDelay = null;
@@ -160,6 +152,10 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
     if (this.timerDelay) {
       this.timerDelay.unsubscribe();
     }
+    if (this.tasksTimeout) {
+      clearTimeout(this.tasksTimeout);
+      this.tasksTimeout = null;
+    }
   }
 
   clrLoadTasks(withLoading: boolean, state: ClrDatagridStateInterface): void {
@@ -200,6 +196,23 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
         // Do customising filtering and sorting
         this.tasks = doFiltering<ReplicationTask>(this.tasks, state);
         this.tasks = doSorting<ReplicationTask>(this.tasks, state);
+        let count: number = 0;
+        if (this.tasks?.length) {
+          this.tasks.forEach(item => {
+            if (item.status === executionStatus) {
+              count++;
+            }
+          });
+        }
+        if (count > 0 || this.execution?.status === executionStatus) {
+          if (!this.tasksTimeout) {
+            this.tasksTimeout = setTimeout(() => {
+              this.clrLoadTasks(false, {
+                page: {}
+              });
+            }, REFRESH_TIME_DIFFERENCE);
+          }
+        }
       },
       error => {
         this.errorHandler.error(error);

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

@@ -8,7 +8,7 @@ import { ErrorHandler } from "../../../../../../../../shared/units/error-handler
 import { finalize } from "rxjs/operators";
 import { SafeUrl } from '@angular/platform-browser';
 import { ArtifactService } from "../../../../artifact.service";
-import { artifactDefault } from '../../../../artifact';
+import { AccessoryQueryParams, artifactDefault } from '../../../../artifact';
 
 export const ACCESSORY_PAGE_SIZE: number = 5;
 
@@ -64,9 +64,17 @@ export class SubAccessoriesComponent implements OnInit {
     goIntoArtifactSummaryPage(accessory: Accessory): void {
         const relativeRouterLink: string[] = ['artifacts', accessory.digest];
         if (this.activatedRoute.snapshot.queryParams[UN_LOGGED_PARAM] === YES) {
-            this.router.navigate(relativeRouterLink, {relativeTo: this.activatedRoute, queryParams: {[UN_LOGGED_PARAM]: YES}});
+            this.router.navigate(relativeRouterLink, {
+                relativeTo: this.activatedRoute, queryParams: {
+                    [UN_LOGGED_PARAM]: YES, [AccessoryQueryParams.ACCESSORY_TYPE]: accessory.type
+                }
+            });
         } else {
-            this.router.navigate(relativeRouterLink, {relativeTo: this.activatedRoute});
+            this.router.navigate(relativeRouterLink, {
+                relativeTo: this.activatedRoute, queryParams: {
+                    [AccessoryQueryParams.ACCESSORY_TYPE]: accessory.type
+                }
+            });
         }
     }
 

src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.html

@@ -45,7 +45,9 @@
     <clr-dg-column *ngIf="withNotary">{{'ACCESSORY.NOTARY_SIGNED' | translate}}</clr-dg-column>
     <clr-dg-column [clrDgSortBy]="'pull_time'">{{'TAG.PULL_TIME' | translate}}</clr-dg-column>
     <clr-dg-column [clrDgSortBy]="'push_time'">{{'TAG.PUSH_TIME' | translate}}</clr-dg-column>
-
+    <clr-dg-placeholder>
+        <span>{{'TAG.PLACEHOLDER' | translate}}</span>
+    </clr-dg-placeholder>
     <clr-dg-row *ngFor="let tag of currentTags" [clrDgItem]="tag">
         <clr-dg-cell>
             <div class="cell white-normal" [class.immutable]="tag.immutable">
@@ -53,7 +55,7 @@
                 <span *ngIf="tag.immutable" class="label label-info ml-8">{{'REPOSITORY.IMMUTABLE' | translate}}</span>
             </div>
         </clr-dg-cell>
-        <clr-dg-cell>
+        <clr-dg-cell *ngIf="hasPullCommand()">
             <hbr-copy-input [title]="getPullCommand(tag)"  *ngIf="getPullCommand(tag)"  [iconMode]="true" [defaultValue]="getPullCommand(tag)"></hbr-copy-input>
         </clr-dg-cell>
         <clr-dg-cell  *ngIf="withNotary" [ngSwitch]="tag.signed">

src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.spec.ts

@@ -1,7 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ArtifactTagComponent } from './artifact-tag.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { of } from 'rxjs';
 import { ErrorHandler } from "../../../../../shared/units/error-handler";
@@ -54,8 +52,6 @@ describe('ArtifactTagComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         SharedTestingModule,
-        BrowserAnimationsModule,
-        HttpClientTestingModule
       ],
       schemas: [
         CUSTOM_ELEMENTS_SCHEMA

src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.ts

@@ -8,7 +8,7 @@ import { OperationService } from "../../../../../shared/components/operation/ope
 import { ErrorHandler } from "../../../../../shared/units/error-handler";
 import { ConfirmationButtons, ConfirmationState, ConfirmationTargets } from "../../../../../shared/entities/shared.const";
 import { operateChanges, OperateInfo, OperationState } from "../../../../../shared/components/operation/operate";
-import { ArtifactFront as Artifact, artifactImages, artifactPullCommands } from '../artifact';
+import { AccessoryQueryParams, AccessoryType, ArtifactFront as Artifact, artifactImages, artifactPullCommands } from '../artifact';
 import { ArtifactService } from '../../../../../../../ng-swagger-gen/services/artifact.service';
 import { Tag } from '../../../../../../../ng-swagger-gen/models/tag';
 import { SystemInfo, SystemInfoService, UserPermissionService, USERSTATICPERMISSION } from "../../../../../shared/services";
@@ -26,6 +26,7 @@ import { errorHandler } from "../../../../../shared/units/shared.utils";
 import { ConfirmationDialogComponent } from "../../../../../shared/components/confirmation-dialog";
 import { ConfirmationMessage } from "../../../../global-confirmation-dialog/confirmation-message";
 import { ConfirmationAcknowledgement } from "../../../../global-confirmation-dialog/confirmation-state-message";
+import { ActivatedRoute } from '@angular/router';
 
 class InitTag {
   name = "";
@@ -66,6 +67,7 @@ export class ArtifactTagComponent implements OnInit, OnDestroy {
   tagNameCheckSub: Subscription;
   tagNameCheckOnGoing = false;
   systemInfo: SystemInfo;
+  accessoryType: string;
   constructor(
     private operationService: OperationService,
     private artifactService: ArtifactService,
@@ -73,9 +75,12 @@ export class ArtifactTagComponent implements OnInit, OnDestroy {
     private userPermissionService: UserPermissionService,
     private systemInfoService: SystemInfoService,
     private appConfigService: AppConfigService,
-    private errorHandlerService: ErrorHandler
+    private errorHandlerService: ErrorHandler,
+    private activatedRoute: ActivatedRoute,
 
-  ) { }
+  ) {
+    this.accessoryType = this.activatedRoute.snapshot.queryParams[AccessoryQueryParams.ACCESSORY_TYPE];
+  }
   ngOnInit() {
     this.getImagePermissionRule(this.projectId);
     this.invalidCreateTag();
@@ -337,7 +342,8 @@ export class ArtifactTagComponent implements OnInit, OnDestroy {
     return this.artifactDetails
       && (this.artifactDetails.type ===  artifactImages[0]
         || this.artifactDetails.type ===  artifactImages[1]
-        || this.artifactDetails.type ===  artifactImages[2]);
+        || this.artifactDetails.type ===  artifactImages[2])
+        && this.accessoryType !== AccessoryType.COSIGN;
   }
   getPullCommand(tag: Tag): string {
     let pullCommand: string = '';

src/portal/src/app/base/project/repository/artifact/artifact.ts

@@ -89,5 +89,7 @@ export const artifactPullCommands = [
 ];
 export const artifactDefault = "images/artifact-default.svg";
 
-
+export enum AccessoryQueryParams {
+  ACCESSORY_TYPE = 'accessoryType'
+}