From 6bcc803588409d701ad8160550bc8097d23cf3a7 Mon Sep 17 00:00:00 2001
From: Meina Zhou <meinaz@vmware.com>
Date: Fri, 9 Nov 2018 08:57:17 +0800
Subject: [PATCH] modify registry component using tabs

Signed-off-by: Meina Zhou <meinaz@vmware.com>
---
 src/portal/lib/package.json                   |  2 +-
 .../src/config/registry-config.component.html | 26 ++++++++++++-------
 .../config/registry-config.component.spec.ts  | 12 +--------
 .../vulnerability-config.component.html       |  2 +-
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/portal/lib/package.json b/src/portal/lib/package.json
index c75fa26e4..1a524c568 100644
--- a/src/portal/lib/package.json
+++ b/src/portal/lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@harbor/ui",
-    "version": "1.0.0-rc6",
+    "version": "1.0.0-rc7",
     "description": "Harbor shared UI components based on Clarity and Angular6",
     "author": "CNCF",
     "module": "index.js",
diff --git a/src/portal/lib/src/config/registry-config.component.html b/src/portal/lib/src/config/registry-config.component.html
index 7bc33ef2f..01849568c 100644
--- a/src/portal/lib/src/config/registry-config.component.html
+++ b/src/portal/lib/src/config/registry-config.component.html
@@ -1,9 +1,17 @@
-<div>
-    <system-settings #systemSettings [(systemSettings)]="config" [showSubTitle]="true" [hasAdminRole]="hasAdminRole" [hasCAFile]="hasCAFile" [withAdmiral]="withAdmiral"></system-settings>
-    <vulnerability-config *ngIf="withClair" #vulnerabilityConfig [(vulnerabilityConfig)]="config" [showSubTitle]="true"></vulnerability-config>
-    <div>
-        <button type="button" class="btn btn-primary" (click)="save()" [disabled]="shouldDisable">{{'BUTTON.SAVE' | translate}}</button>
-        <button type="button" class="btn btn-outline" (click)="cancel()" [disabled]="shouldDisable">{{'BUTTON.CANCEL' | translate}}</button>
-    </div>
-    <confirmation-dialog #cfgConfirmationDialog (confirmAction)="confirmCancel($event)"></confirmation-dialog>
-</div>
\ No newline at end of file
+<clr-tabs>
+    <clr-tab>
+        <button id="config-system" clrTabLink>{{'CONFIG.SYSTEM' | translate}}</button>
+        <clr-tab-content id="system_settings" *clrIfActive>
+            <system-settings #systemSettings [(systemSettings)]="config" [showSubTitle]="true" [hasAdminRole]="hasAdminRole" [hasCAFile]="hasCAFile"
+                [withAdmiral]="withAdmiral">
+            </system-settings>
+        </clr-tab-content>
+    </clr-tab>
+    <clr-tab>
+        <button id="config-vulnerability" clrTabLink>{{'CONFIG.VULNERABILITY' | translate}}</button>
+        <clr-tab-content id="vulnerability" *clrIfActive>
+            <vulnerability-config *ngIf="withClair" #vulnerabilityConfig [(vulnerabilityConfig)]="config" [showSubTitle]="true"></vulnerability-config>
+        </clr-tab-content>
+    </clr-tab>
+</clr-tabs>
+<confirmation-dialog #cfgConfirmationDialog (confirmAction)="confirmCancel($event)"></confirmation-dialog>
\ No newline at end of file
diff --git a/src/portal/lib/src/config/registry-config.component.spec.ts b/src/portal/lib/src/config/registry-config.component.spec.ts
index 83da015a9..5e8ceca45 100644
--- a/src/portal/lib/src/config/registry-config.component.spec.ts
+++ b/src/portal/lib/src/config/registry-config.component.spec.ts
@@ -27,7 +27,6 @@ describe('RegistryConfigComponent (inline template)', () => {
   let cfgService: ConfigurationService;
   let systemInfoService: SystemInfoService;
   let spy: jasmine.Spy;
-  let saveSpy: jasmine.Spy;
   let spySystemInfo: jasmine.Spy;
   let mockConfig: Configuration = new Configuration();
   mockConfig.token_expiration.value = 90;
@@ -82,7 +81,6 @@ describe('RegistryConfigComponent (inline template)', () => {
     cfgService = fixture.debugElement.injector.get(ConfigurationService);
     systemInfoService = fixture.debugElement.injector.get(SystemInfoService);
     spy = spyOn(cfgService, 'getConfigurations').and.returnValue(Promise.resolve(mockConfig));
-    saveSpy = spyOn(cfgService, 'saveConfigurations').and.returnValue(Promise.resolve(true));
     spySystemInfo = spyOn(systemInfoService, 'getSystemInfo').and.returnValue(Promise.resolve(mockSystemInfo));
 
     fixture.detectChanges();
@@ -102,16 +100,8 @@ describe('RegistryConfigComponent (inline template)', () => {
 
 
       fixture.detectChanges();
-      let el3: HTMLInputElement = fixture.nativeElement.querySelector('.btn-scan');
+      let el3: HTMLElement = fixture.nativeElement.querySelector('#config-vulnerability');
       expect(el3).toBeTruthy();
-      expect(el3).not.toBeFalsy();
     });
   }));
-
-  it('should save the configuration changes', async(() => {
-    comp.save();
-    fixture.detectChanges();
-
-    expect(saveSpy.calls.any).toBeTruthy();
-  }));
 });
diff --git a/src/portal/lib/src/config/vulnerability/vulnerability-config.component.html b/src/portal/lib/src/config/vulnerability/vulnerability-config.component.html
index 1697875f5..e52900a41 100644
--- a/src/portal/lib/src/config/vulnerability/vulnerability-config.component.html
+++ b/src/portal/lib/src/config/vulnerability/vulnerability-config.component.html
@@ -48,7 +48,7 @@
             <button class="btn btn-primary btn-sm" (click)="cancel()" >{{'BUTTON.CANCEL' | translate}}</button>
         </div>
         <div class="btn-scan-right btn-scan">
-            <button class="btn btn-primary btn-sm" (click)="scanNow()" [disabled]="!scanAvailable">{{ 'CONFIG.SCANNING.SCAN_NOW' | translate }}</button><br>
+            <button class="btn btn-primary btn-sm btn-scan" (click)="scanNow()" [disabled]="!scanAvailable">{{ 'CONFIG.SCANNING.SCAN_NOW' | translate }}</button><br>
             <span *ngIf="!scanAvailable">{{ 'CONFIG.SCANNING.NEXT_SCAN' | translate }} {{ nextScanTimestamp | date:'y/MM/dd HH:mm' }}</span>
        </div>
     </section>