Add co-sign UI (#16155)

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

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

@@ -1,5 +1,5 @@
 <div>
-    <div class="breadcrumb" *ngIf="!withAdmiral">
+    <div class="breadcrumb">
         <span class="back-icon"><</span>
         <a (click)="goProBack()">{{'SIDE_NAV.PROJECTS'| translate}}</a>
         <span class="back-icon"><</span>
@@ -10,6 +10,29 @@
                 &lt;<a (click)="jumpDigest(i)" >{{digest | slice:0:15}}</a></span>
         </span>
     </div>
-    <artifact-list  [repoName]="repoName"  [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole"
-                    [projectId]="projectId" [memberRoleID]="projectMemberRoleId" [isGuest]="isGuest"></artifact-list>
+    <section class="overview-section">
+        <div class="title-wrapper">
+            <div class="title-block">
+                <h2 sub-header-title class="custom-h2" *ngIf="!artifactDigest">{{repoName}}</h2>
+                <h2 sub-header-title class="custom-h2" *ngIf="artifactDigest">{{artifactDigest | slice:0:15}}</h2>
+            </div>
+        </div>
+    </section>
+
+    <section class="detail-section">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <ul id="configTabs" class="nav" role="tablist">
+                <li role="presentation" class="nav-item"  *ngIf="!artifactDigest">
+                    <button id="repo-info" class="btn btn-link nav-link" aria-controls="info"
+                            type="button" routerLinkActive="active" routerLink="./info-tab">{{'REPOSITORY.INFO' | translate}}</button>
+                </li>
+                <li role="presentation" class="nav-item">
+                    <button id="repo-image" class="btn btn-link nav-link" aria-controls="image"
+                            type="button" routerLinkActive="active" routerLink="./artifacts-tab">{{'REPOSITORY.ARTIFACTS' | translate}}</button>
+                </li>
+            </ul>
+            <router-outlet></router-outlet>
+        </div>
+    </section>
+
 </div>

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

@@ -1,39 +1,13 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ArtifactListPageComponent } from './artifact-list-page.component';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { of } from 'rxjs';
-import { ActivatedRoute, Router } from '@angular/router';
-import { SessionService } from "../../../../../shared/services/session.service";
-import { AppConfigService } from "../../../../../services/app-config.service";
-import { ArtifactService  } from "../artifact.service";
+import { ActivatedRoute } from '@angular/router';
 import { SharedTestingModule } from "../../../../../shared/shared.module";
+import { ArtifactListPageService } from './artifact-list-page.service';
 
 describe('ArtifactListPageComponent', () => {
     let component: ArtifactListPageComponent;
     let fixture: ComponentFixture<ArtifactListPageComponent>;
-    const mockSessionService = {
-        getCurrentUser: () => { }
-    };
-    const mockAppConfigService = {
-        getConfig: () => {
-            return {
-                project_creation_restriction: "",
-                with_chartmuseum: "",
-                with_notary: "",
-                with_trivy: "",
-                with_admiral: "",
-                registry_url: "",
-            };
-        }
-    };
-    const mockRouter = {
-        navigate: () => { }
-    };
-    const mockArtifactService = {
-        triggerUploadArtifact: {
-            next: () => {}
-        }
-    };
     const mockActivatedRoute = {
         RouterparamMap: of({ get: (key) => 'value' }),
         snapshot: {
@@ -65,19 +39,13 @@ describe('ArtifactListPageComponent', () => {
     };
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            schemas: [
-                CUSTOM_ELEMENTS_SCHEMA
-            ],
             imports: [
                SharedTestingModule
             ],
             declarations: [ArtifactListPageComponent],
             providers: [
-                { provide: SessionService, useValue: mockSessionService },
-                { provide: AppConfigService, useValue: mockAppConfigService },
-                { provide: Router, useValue: mockRouter },
+                ArtifactListPageService,
                 { provide: ActivatedRoute, useValue: mockActivatedRoute },
-                { provide: ArtifactService, useValue: mockArtifactService },
             ]
         })
             .compileComponents();
@@ -92,4 +60,10 @@ describe('ArtifactListPageComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should have two tabs', async () => {
+        await fixture.whenStable();
+        const tabs = fixture.nativeElement.querySelectorAll('.nav-item');
+        expect(tabs.length).toEqual(2);
+    });
 });

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

@@ -11,13 +11,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ArtifactListComponent } from "./artifact-list/artifact-list.component";
-import { ArtifactService } from "../artifact.service";
-import { AppConfigService } from "../../../../../services/app-config.service";
-import { SessionService } from "../../../../../shared/services/session.service";
 import { Project } from "../../../project";
+import { ArtifactListPageService } from "./artifact-list-page.service";
 
 @Component({
   selector: 'artifact-list-page',
@@ -26,29 +23,25 @@ import { Project } from "../../../project";
 })
 export class ArtifactListPageComponent implements OnInit {
 
-  projectId: number;
+  projectId: string;
   projectName: string;
-  projectMemberRoleId: number;
   repoName: string;
   referArtifactNameArray: string[] = [];
-  hasProjectAdminRole: boolean = false;
-  isGuest: boolean;
-  registryUrl: string;
-
-  @ViewChild(ArtifactListComponent)
-  repositoryComponent: ArtifactListComponent;
   depth: string;
+  artifactDigest: string;
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private artifactService: ArtifactService,
-    private appConfigService: AppConfigService,
-    private session: SessionService) {
+    private artifactListPageService: ArtifactListPageService) {
     this.route.params.subscribe(params => {
       this.depth = this.route.snapshot.params['depth'];
       if (this.depth) {
         const arr: string[] = this.depth.split('-');
         this.referArtifactNameArray = arr.slice(0, arr.length - 1);
+        this.artifactDigest = this.depth.split('-')[arr.length - 1];
+      } else {
+        this.referArtifactNameArray = [];
+        this.artifactDigest =  null;
       }
     });
   }
@@ -58,28 +51,11 @@ export class ArtifactListPageComponent implements OnInit {
     let resolverData = this.route.snapshot.parent.data;
     if (resolverData) {
       this.projectName = (<Project>resolverData['projectResolver']).name;
-      this.hasProjectAdminRole = (<Project>resolverData['projectResolver']).has_project_admin_role;
-      this.isGuest = (<Project>resolverData['projectResolver']).current_user_role_id === 3;
-      this.projectMemberRoleId = (<Project>resolverData['projectResolver']).current_user_role_id;
     }
     this.repoName = this.route.snapshot.params['repo'];
-    this.registryUrl = this.appConfigService.getConfig().registry_url;
-  }
-
-  get withNotary(): boolean {
-    return this.appConfigService.getConfig().with_notary;
-  }
-  get withAdmiral(): boolean {
-    return this.appConfigService.getConfig().with_admiral;
+    this.artifactListPageService.init(+this.projectId);
   }
 
-  get hasSignedIn(): boolean {
-    return this.session.getCurrentUser() !== null;
-  }
-
-  hasChanges(): boolean {
-    return this.repositoryComponent.hasChanges();
-  }
   watchGoBackEvt(projectId: string| number): void {
     this.router.navigate(["harbor", "projects", projectId, "repositories"]);
   }
@@ -92,7 +68,7 @@ export class ArtifactListPageComponent implements OnInit {
   jumpDigest(index: number) {
     const arr: string[] = this.referArtifactNameArray.slice(0, index + 1 );
     if ( arr && arr.length) {
-      this.router.navigate(["harbor", "projects", this.projectId, "repositories", this.repoName, "depth", arr.join('-')]);
+      this.router.navigate(["harbor", "projects", this.projectId, "repositories", this.repoName, "artifacts-tab", "depth", arr.join('-')]);
     } else {
       this.router.navigate(["harbor", "projects", this.projectId, "repositories", this.repoName]);
     }

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list-page.service.spec.ts

@@ -0,0 +1,21 @@
+import { inject, TestBed } from '@angular/core/testing';
+import { ArtifactListPageService } from './artifact-list-page.service';
+import { SharedTestingModule } from '../../../../../shared/shared.module';
+
+describe('ArtifactListPageService', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SharedTestingModule,
+      ],
+      providers: [
+        ArtifactListPageService
+      ]
+    });
+  });
+
+  it('should be initialized', inject([ArtifactListPageService], (service: ArtifactListPageService) => {
+    expect(service).toBeTruthy();
+  }));
+});