From 4ad66b6d9b3140b19d039d4897d18a39b0bf8eb2 Mon Sep 17 00:00:00 2001
From: FangyuanCheng <fangyuanc@vmware.com>
Date: Tue, 25 Dec 2018 18:36:18 +0800
Subject: [PATCH] Config component nav tabs to use clarity component

Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>
---
 .../src/app/config/config.component.html      | 88 +++++++++----------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/portal/src/app/config/config.component.html b/src/portal/src/app/config/config.component.html
index fcf146b13..2fa843afc 100644
--- a/src/portal/src/app/config/config.component.html
+++ b/src/portal/src/app/config/config.component.html
@@ -2,49 +2,49 @@
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <h2 class="custom-h2 config-title">{{'CONFIG.TITLE' | translate }}</h2>
         <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
-        <ul id="configTabs" class="nav" role="tablist">
-            <li role="presentation" class="nav-item">
-                <button id="config-auth" class="btn btn-link nav-link active" aria-controls="authentication" [class.active]='isCurrentTabLink("config-auth")'
-                    type="button" (click)='tabLinkClick("config-auth")'>{{'CONFIG.AUTH' | translate }}</button>
-            </li>
-            <li role="presentation" class="nav-item">
-                <button id="config-email" class="btn btn-link nav-link" aria-controls="email" [class.active]='isCurrentTabLink("config-email")'
-                    type="button" (click)='tabLinkClick("config-email")'>{{'CONFIG.EMAIL' | translate }}</button>
-            </li>
-            <li role="presentation" class="nav-item">
-                <button id="config-system" class="btn btn-link nav-link" aria-controls="system_settings" [class.active]='isCurrentTabLink("config-system")'
-                    type="button" (click)='tabLinkClick("config-system")'>{{'CONFIG.SYSTEM' | translate }}</button>
-            </li>
-            <li role="presentation" class="nav-item" *ngIf="!withAdmiral">
-                <button id="config-label" class="btn btn-link nav-link" aria-controls="system_label" [class.active]='isCurrentTabLink("config-label")'
-                    type="button" (click)='tabLinkClick("config-label")'>{{'CONFIG.LABEL' | translate }}</button>
-            </li>
-            <li role="presentation" class="nav-item" *ngIf="withClair">
-                <button id="config-vulnerability" class="btn btn-link nav-link" aria-controls="vulnerability" [class.active]='isCurrentTabLink("config-vulnerability")'
-                    type="button" (click)='tabLinkClick("config-vulnerability")'>{{'CONFIG.VULNERABILITY' | translate}}</button>
-            </li>
-            <li role="presentation" class="nav-item" *ngIf="hasAdminRole">
-                <button id="config-gc" class="btn btn-link nav-link" aria-controls="gc" [class.active]='isCurrentTabLink("config-gc")' type="button"
-                    (click)='tabLinkClick("config-gc")'>{{'CONFIG.GC' | translate}}</button>
-            </li>
-        </ul>
-        <section id="authentication" role="tabpanel" aria-labelledby="config-auth" [hidden]='!isCurrentTabContent("authentication")'>
-            <config-auth [allConfig]="allConfig"></config-auth>
-        </section>
-        <section id="email" role="tabpanel" aria-labelledby="config-email" [hidden]='!isCurrentTabContent("email")'>
-            <config-email [mailConfig]="allConfig"></config-email>
-        </section>
-        <section id="system_settings" role="tabpanel" aria-labelledby="config-system"  [hidden]='!isCurrentTabContent("system_settings")'>
-            <system-settings [(systemSettings)]="allConfig" [hasAdminRole]="hasAdminRole" (reloadSystemConfig)="handleAppConfig($event)" (readOnlyChange)="handleReadyOnlyChange($event)" [hasCAFile]="hasCAFile"></system-settings>
-        </section>
-        <section id="system_label" role="tabpanel" aria-labelledby="config-label" *ngIf="!withAdmiral" [hidden]='!isCurrentTabContent("system_label")'>
-            <hbr-label [scope]="'g'"></hbr-label>
-        </section>
-        <section id="vulnerability" *ngIf="withClair" role="tabpanel" aria-labelledby="config-vulnerability" [hidden]='!isCurrentTabContent("vulnerability")'>
-            <vulnerability-config [(vulnerabilityConfig)]="allConfig"></vulnerability-config>
-        </section>
-        <section id="gc" *ngIf="hasAdminRole" role="tabpanel" aria-labelledby="config-gc" [hidden]='!isCurrentTabContent("gc")'>
-            <gc-config></gc-config>
-        </section>
+        <clr-tabs>
+                <clr-tab>
+                    <button id="config-auth" clrTabLink>{{'CONFIG.AUTH' | translate}}</button>
+                    <clr-tab-content id="authentication" *clrIfActive>
+                        <config-auth [allConfig]="allConfig"></config-auth>
+                    </clr-tab-content>
+                </clr-tab>
+                <clr-tab>
+                    <button id="config-email" clrTabLink>{{'CONFIG.EMAIL' | translate }}</button>
+                    <clr-tab-content id="email" *clrIfActive>
+                        <config-email [mailConfig]="allConfig"></config-email>
+                    </clr-tab-content>
+                </clr-tab>
+                <clr-tab>
+                    <button id="config-system" clrTabLink>{{'CONFIG.SYSTEM' | translate }}</button>
+                    <clr-tab-content id="system_settings" *clrIfActive>
+                        <system-settings [(systemSettings)]="allConfig" [hasAdminRole]="hasAdminRole" (reloadSystemConfig)="handleAppConfig($event)" (readOnlyChange)="handleReadyOnlyChange($event)" [hasCAFile]="hasCAFile"></system-settings>
+                    </clr-tab-content>
+                </clr-tab>
+                <clr-tab *ngIf="!withAdmiral">
+                    <button id="config-label" clrTabLink>{{'CONFIG.LABEL' | translate }}</button>
+                    <ng-template [(clrIfActive)]="labelActive">
+						<clr-tab-content id="system_label" *ngIf="!withAdmiral">
+							<hbr-label [scope]="'g'"></hbr-label>
+						</clr-tab-content>
+					</ng-template>
+                </clr-tab>
+                <clr-tab *ngIf="withClair">
+                    <button id="config-vulnerability" clrTabLink>{{'CONFIG.VULNERABILITY' | translate }}</button>
+					<ng-template [(clrIfActive)]="vulnerabilityActive">
+						<clr-tab-content id="vulnerability" *ngIf="withClair">
+							<vulnerability-config [(vulnerabilityConfig)]="allConfig"></vulnerability-config>
+						</clr-tab-content>
+					</ng-template>
+                </clr-tab>
+                <clr-tab *ngIf="hasAdminRole">
+                    <button id="config-gc" clrTabLink>{{'CONFIG.GC' | translate }}</button>
+					<ng-template [(clrIfActive)]="gcActive">
+						<clr-tab-content id="gc" *ngIf="hasAdminRole">
+							<gc-config></gc-config>
+						</clr-tab-content>
+					</ng-template>
+                </clr-tab>
+        </clr-tabs>
     </div>
 </div>
\ No newline at end of file