Merge pull request #3906 from ninjadq/sidenav_to_verticalnav

Replace Navigation bar from Sidenav to Vertical Nav
2025-04-06 15:51:29 +00:00 · 2018-01-04 18:32:04 +08:00 · 2018-01-04 18:32:04 +08:00 · f20103dc0c
commit f20103dc0c
parent 51297cdfd7 2122503599
16 changed files with 86 additions and 58 deletions
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@ -31,7 +31,7 @@
        "clarity-icons": "^0.10.17",
        "clarity-ui": "^0.10.17",
        "core-js": "^2.4.1",
-        "harbor-ui": "0.6.6-dev.0",
+        "harbor-ui": "0.6.6",
        "intl": "^1.2.5",
        "mutationobserver-shim": "^0.3.2",
        "ngx-cookie": "^1.0.0",
--- a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html
@ -8,21 +8,47 @@
            <search-result></search-result>
            <router-outlet></router-outlet>
        </div>
-        <nav class="sidenav" style="padding: 12px 36px;" *ngIf="isUserExisting">
-            <section class="sidenav-content" style="padding-top: 20px;">
-                <a routerLink="/harbor/projects" routerLinkActive="active" class="nav-link nav-link-override">{{'SIDE_NAV.PROJECTS' | translate}}</a>
-                <a routerLink="/harbor/logs" routerLinkActive="active" class="nav-link nav-link-override" style="margin-top: 4px;">{{'SIDE_NAV.LOGS' | translate}}</a>
-                <section class="nav-group collapsible" *ngIf="isSystemAdmin" style="margin-top: 4px;">
-                    <input id="tabsystem" type="checkbox">
-                    <label for="tabsystem">{{'SIDE_NAV.SYSTEM_MGMT.NAME' | translate}}</label>
-                    <ul class="nav-list">
-                        <li><a class="nav-link nav-link-override" routerLink="/harbor/users" routerLinkActive="active">{{'SIDE_NAV.SYSTEM_MGMT.USER' | translate}}</a></li>
-                        <li><a class="nav-link nav-link-override" routerLink="/harbor/replications" routerLinkActive="active">{{'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate}}</a></li>
-                        <li><a class="nav-link nav-link-override" routerLink="/harbor/configs" routerLinkActive="active">{{'SIDE_NAV.SYSTEM_MGMT.CONFIG' | translate}}</a></li>
-                    </ul>
-                </section>
-            </section>
-        </nav>
+        <clr-vertical-nav [clrVerticalNavCollapsible]="true" *ngIf="isUserExisting">
+            <a clrVerticalNavLink routerLinkActive="active" routerLink="/harbor/projects">
+                <clr-icon shape="organization" clrVerticalNavIcon></clr-icon>
+                {{'SIDE_NAV.PROJECTS' | translate}}
+            </a>
+            <a clrVerticalNavLink routerLinkActive="active" routerLink="/harbor/logs">
+                <clr-icon shape="list" clrVerticalNavIcon></clr-icon>
+                {{'SIDE_NAV.LOGS' | translate}}
+            </a>
+            <clr-vertical-nav-group  *ngIf="isSystemAdmin" routerLinkActive="active">
+                <clr-icon shape="administrator" clrVerticalNavIcon></clr-icon>
+                {{'SIDE_NAV.SYSTEM_MGMT.NAME' | translate}}
+                <a routerLink="#" hidden aria-hidden="true"></a>
+                <clr-vertical-nav-group-children *clrIfExpanded="true">
+                    <a clrVerticalNavLink
+                       routerLink="/harbor/users"
+                       routerLinkActive="active">
+                       <clr-icon shape="users" clrVerticalNavIcon></clr-icon>
+                       {{'SIDE_NAV.SYSTEM_MGMT.USER' | translate}}
+                    </a>
+                    <a clrVerticalNavLink
+                       routerLink="/harbor/registries"
+                       routerLinkActive="active">
+                       <clr-icon shape="block" clrVerticalNavIcon></clr-icon>
+                       {{'SIDE_NAV.SYSTEM_MGMT.REGISTRY' | translate}}
+                    </a>
+                    <a clrVerticalNavLink
+                       routerLink="/harbor/replications"
+                       routerLinkActive="active">
+                       <clr-icon shape="cloud-traffic" clrVerticalNavIcon></clr-icon>
+                       {{'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate}}
+                    </a>
+                    <a clrVerticalNavLink
+                       routerLink="/harbor/configs"
+                       routerLinkActive="active">
+                       <clr-icon shape="cog" clrVerticalNavIcon></clr-icon>
+                       {{'SIDE_NAV.SYSTEM_MGMT.CONFIG' | translate}}
+                    </a>
+                </clr-vertical-nav-group-children>
+            </clr-vertical-nav-group>
+        </clr-vertical-nav>
    </div>
 </clr-main-container>
 <account-settings-modal></account-settings-modal>
--- a/src/ui_ng/src/app/harbor-routing.module.ts
+++ b/src/ui_ng/src/app/harbor-routing.module.ts
@ -78,25 +78,15 @@ const harborRoutes: Routes = [
        component: UserComponent,
        canActivate: [SystemAdminGuard]
      },
+      {
+        path: 'registries',
+        component: DestinationPageComponent,
+        canActivate: [SystemAdminGuard]
+      },
      {
        path: 'replications',
-        component: ReplicationManagementComponent,
+        component: TotalReplicationPageComponent,
        canActivate: [SystemAdminGuard],
-        canActivateChild: [SystemAdminGuard],
-        children: [
-          {
-            path: 'rules',
-            component: TotalReplicationPageComponent
-          },
-          {
-            path: 'endpoints',
-            component: DestinationPageComponent
-          },
-          {
-            path: '**',
-            redirectTo: 'endpoints'
-          }
-        ]
      },
      {
        path: 'tags/:id/:repo',
--- a/src/ui_ng/src/app/replication/destination/destination-page.component.html
+++ b/src/ui_ng/src/app/replication/destination/destination-page.component.html
@ -1,3 +1,4 @@
-<div style="margin-top: 24px;">
+<h2 class="custom-h2">{{'SIDE_NAV.SYSTEM_MGMT.REGISTRY' | translate}}</h2>
+<div>
    <hbr-endpoint></hbr-endpoint>
 </div>
--- a/src/ui_ng/src/app/replication/replication-management/replication-management.component.ts
+++ b/src/ui_ng/src/app/replication/replication-management/replication-management.component.ts
@ -11,6 +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.
+
+// This Module is used as Container For Endpoint and Replication Rules
+// Will deprecated on Harbor 1.4.0
+
 import { Component } from '@angular/core';

@Component({
--- a/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.html
+++ b/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.html
@ -1,3 +1,4 @@
-<div style="margin-top: 24px;">
+<h2 class="custom-h2">{{'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate}}</h2>
+<div>
    <hbr-replication [withReplicationJob]='false' (redirect)="customRedirect($event)"></hbr-replication>
 </div>
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@ -100,7 +100,8 @@
        "SYSTEM_MGMT": {
            "NAME": "Administration",
            "USER": "Users",
-            "REPLICATION": "Replication",
+            "REGISTRY": "Registries",
+            "REPLICATION": "Replications",
            "CONFIG": "Configuration"
        },
        "LOGS": "Logs"
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@ -96,7 +96,8 @@
        "SYSTEM_MGMT": {
            "NAME": "Administración",
            "USER": "Usuarios",
-            "REPLICATION": "Replicación",
+            "REGISTRY": "Registries",
+            "REPLICATION": "Replicacións",
            "CONFIG": "Configuración"
        },
        "LOGS": "Logs"
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@ -96,6 +96,7 @@
        "SYSTEM_MGMT": {
            "NAME": "系统管理",
            "USER": "用户管理",
+            "REGISTRY": "仓库管理",
            "REPLICATION": "复制管理",
            "CONFIG": "配置管理"
        },
--- a/tests/resources/Harbor-Pages/Administration-Users_Elements.robot
+++ b/tests/resources/Harbor-Pages/Administration-Users_Elements.robot
@ -16,5 +16,5 @@
 Documentation  This resource provides any keywords related to the Harbor private registry appliance

 *** Variables ***
-${administration_user_tag_xpath}  /html/body/harbor-app/harbor-shell/clr-main-container/div/nav/section/section/ul/li[1]/a
-${administration_tag_xpath}  /html/body/harbor-app/harbor-shell/clr-main-container/div/nav/section/section/label
+${administration_user_tag_xpath}  //clr-vertical-nav-group-children/a[contains(.,'Users')]
+${administration_tag_xpath}  //clr-vertical-nav-group[contains(.,'Admin')]
--- a/tests/resources/Harbor-Pages/Configuration.robot
+++ b/tests/resources/Harbor-Pages/Configuration.robot
@ -38,14 +38,14 @@ Init LDAP
    Sleep  1
    Capture Page Screenshot
    Disable Ldap Verify Cert Checkbox
-    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[1]
+    Click Element  xpath=${config_save_button_xpath}
    Sleep  2
    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[3]
    Sleep  1
    Capture Page Screenshot

 Switch To Configure
-    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/nav/section/section/ul/li[3]/a
+    Click Element  xpath=${configuration_xpath}
    Sleep  2

 Test Ldap Connection
@ -89,32 +89,32 @@ Ldap Verify Cert Checkbox Should Be Disabled
 Set Pro Create Admin Only	
    #set limit to admin only
    Sleep  2
-    Click Element  xpath=//clr-main-container//nav//ul/li[3]
+    Click Element  xpath=${configuration_xpath}
    Sleep  1
    Click Element  xpath=//select[@id="proCreation"]
    Click Element  xpath=//select[@id="proCreation"]//option[@value="adminonly"]
    Sleep  1
-    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[1]
+    Click Element  xpath=${config_save_button_xpath}
    Capture Page Screenshot  AdminCreateOnly.png

 Set Pro Create Every One	
    #set limit to Every One	
-    Click Element  xpath=//clr-main-container//nav//ul/li[3]
+    Click Element  xpath=${configuration_xpath}
    Sleep  1
    Click Element  xpath=//select[@id="proCreation"]
    Click Element  xpath=//select[@id="proCreation"]//option[@value="everyone"]
    Sleep  1	
-    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[1]
+    Click Element  xpath=${config_save_button_xpath}
    Sleep  2
    Capture Page Screenshot  EveryoneCreate.png

 Disable Self Reg	
-    Click Element  xpath=//clr-main-container//nav//ul/li[3]
+    Click Element  xpath=${configuration_xpath}
    Mouse Down  xpath=${self_reg_xpath}
    Mouse Up  xpath=${self_reg_xpath}
    Sleep  1
    Self Reg Should Be Disabled
-    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[1]
+    Click Element  xpath=${config_save_button_xpath}
    Capture Page Screenshot  DisableSelfReg.png
    Sleep  1

@ -123,7 +123,7 @@ Enable Self Reg
    Mouse Up  xpath=${self_reg_xpath}
    Sleep  1
    Self Reg Should Be Enabled
-    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[1]
+    Click Element  xpath=${config_save_button_xpath}
    Capture Page Screenshot  EnableSelfReg.png
    Sleep  1

@ -142,13 +142,13 @@ Project Creation Should Not Display
 ## System settings	
 Switch To System Settings
    Sleep  1
-    Click Element  xpath=//clr-main-container//nav//ul/li[3]
+    Click Element  xpath=${configuration_xpath}
    Click Element  xpath=//*[@id="config-system"]

 Modify Token Expiration
    [Arguments]  ${minutes}
    Input Text  xpath=//*[@id="tokenExpiration"]  ${minutes}
-    Click Button  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[1] 
+    Click Button  xpath=${config_save_button_xpath} 
    Sleep  1

 Token Must Be Match
@ -159,7 +159,7 @@ Token Must Be Match
 Check Verify Remote Cert	
    Mouse Down  xpath=//*[@id="clr-checkbox-verifyRemoteCert"] 
    Mouse Up  xpath=//*[@id="clr-checkbox-verifyRemoteCert"]
-    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[1]
+    Click Element  xpath=${config_save_button_xpath}
    Capture Page Screenshot  RemoteCert.png
    Sleep  1

@ -191,7 +191,7 @@ Config Email
    Mouse Down  xpath=//*[@id="clr-checkbox-emailInsecure"]
    Mouse Up  xpath=//*[@id="clr-checkbox-emailInsecure"]
    Sleep  1
-    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[1]
+    Click Element  xpath=${config_save_button_xpath}
    Sleep  6

 Verify Email
@ -206,11 +206,11 @@ Set Scan All To None
    click element  //vulnerability-config//select
    click element  //vulnerability-config//select/option[@value='none']
    sleep  1
-    click element  //config//div/button[contains(.,'SAVE')]
+    click element  ${config_save_button_xpath}
 Set Scan All To Daily
    click element  //vulnerability-config//select
    click element  //vulnerability-config//select/option[@value='daily']
    sleep  1
-    click element  //config//div/button[contains(.,'SAVE')]
+    click element  ${config_save_button_xpath}
 Click Scan Now
    click element  //vulnerability-config//button[contains(.,'SCAN')]
--- a/tests/resources/Harbor-Pages/Configuration_Elements.robot
+++ b/tests/resources/Harbor-Pages/Configuration_Elements.robot
@ -19,3 +19,5 @@ Documentation  This resource provides any keywords related to the Harbor private
 ${project_create_xpath}  //clr-dg-action-bar//button[contains(.,'New')]
 ${self_reg_xpath}  //input[@id="clr-checkbox-selfReg"]
 ${test_ldap_xpath}  /html/body/harbor-app/harbor-shell/clr-main-container/div/div/config/div/div/div/button[3]
+${config_save_button_xpath}  //config//div/button[contains(.,'SAVE')]
+${configuration_xpath}  //clr-vertical-nav-group-children/a[contains(.,'Configuration')]
--- a/tests/resources/Harbor-Pages/Project.robot
+++ b/tests/resources/Harbor-Pages/Project.robot
@ -56,7 +56,7 @@ Switch To Log
    Sleep  1

 Switch To Replication
-    Click Element  xpath=${replication_xpath}
+    Click Element  xpath=${project_replication_xpath}
    Sleep  1

 Back To projects
--- a/tests/resources/Harbor-Pages/Project_Elements.robot
+++ b/tests/resources/Harbor-Pages/Project_Elements.robot
@ -20,6 +20,6 @@ ${create_project_button_css}  .btn
 ${project_name_xpath}  //*[@id="create_project_name"]
 ${project_public_xpath}  //input[@name='public']/..//label
 ${project_save_css}  html body.no-scrolling harbor-app harbor-shell clr-main-container.main-container div.content-container div.content-area.content-area-override project div.row div.col-lg-12.col-md-12.col-sm-12.col-xs-12 div.row.flex-items-xs-between div.option-left create-project clr-modal div.modal div.modal-dialog div.modal-content div.modal-footer button.btn.btn-primary
-${log_xpath}  /html/body/harbor-app/harbor-shell/clr-main-container/div/nav/section/a[2]
-${projects_xpath}  /html/body/harbor-app/harbor-shell/clr-main-container/div/nav/section/a[1]
-${replication_xpath}  /html/body/harbor-app/harbor-shell/clr-main-container/div/div/project-detail/nav/ul/li[4]/a
+${log_xpath}  //clr-main-container/div/clr-vertical-nav/div/a[contains(.,'Logs')]
+${projects_xpath}  //clr-main-container/div/clr-vertical-nav/div/a[contains(.,'Projects')]
+${project_replication_xpath}  //project-detail//a[contains(.,'Replication')]
--- a/tests/resources/Harbor-Pages/Replication_Elements.robot
+++ b/tests/resources/Harbor-Pages/Replication_Elements.robot
@ -26,3 +26,4 @@ ${destination_url_xpath}  //*[@id='destination_url']
 ${destination_username_xpath}  //*[@id='destination_username']
 ${destination_password_xpath}  //*[@id='destination_password']
 ${replicaton_save_xpath}  //button[contains(.,'OK')]
+${replication_xpath}  //clr-vertical-nav-group-children/a[contains(.,'Replication')]
--- a/tests/resources/Harbor-Pages/UserProfile.robot
+++ b/tests/resources/Harbor-Pages/UserProfile.robot
@ -31,7 +31,7 @@ Change Password
    Sleep  1
    Click Element  xpath=//password-setting/clr-modal//button[2]
    Sleep  2
-    Click Element  xpath=/html/body/harbor-app/harbor-shell/clr-main-container/div/nav/section/a[2]
+    Click Element  xpath=${log_xpath}
    Sleep  1

 Update User Comment