From a8ab6e3b1fcca213b8f92a654bae8f22a4d208d3 Mon Sep 17 00:00:00 2001
From: Qian Deng <dengq@vmware.com>
Date: Wed, 15 Aug 2018 10:28:47 +0800
Subject: [PATCH 1/9] Remove Upload Button on Chart Version List

There is no method to constrict which chart to upload, so remove this button

Signed-off-by: Qian Deng <dengq@vmware.com>
---
 .../helm-chart-version.component.html         | 27 ---------------
 .../versions/helm-chart-version.component.ts  | 33 +------------------
 2 files changed, 1 insertion(+), 59 deletions(-)

diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
index d601f75f4..5619f8b03 100644
--- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
+++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
@@ -38,10 +38,6 @@
             <clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRows">
                 <clr-dg-action-bar>
                     <button type="button" class="btn btn-sm btn-secondary"
-                    [disabled]="!hasProjectAdminRole"
-                    (click)="versionUpload($event)">
-                        <clr-icon shape="upload" size="16"></clr-icon>&nbsp;{{'HELM_CHART.UPLOAD' | translate}}</button>
-                    <button type="button" class="btn btn-sm btn-secondary"
                     [disabled]="!(selectedRows.length===1)"
                     (click)="versionDownload()">
                         <clr-icon shape="download" size="16"></clr-icon>&nbsp;{{'HELM_CHART.DOWNLOAD' | translate}}</button>
@@ -120,28 +116,5 @@
             <span class="spinner"></span>
         </div>
     </div>
-    <clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
-        <h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate}}</h3>
-        <div class="modal-body">
-            <form #chartUploadForm="ngForm" enctype="multipart/form-data" (ngSubmit)="upload()">
-                <section class="form-block">
-                    <div class="form-group">
-                        <label for="chart"> {{'HELM_CHART.CHART_FILE' | translate}} </label>
-                        <input type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
-                    </div>
-                    <div class="form-group">
-                        <label for="prov"> {{'HELM_CHART.CHART_PROV' | translate}} </label>
-                        <input type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
-                    </div>
-                </section>
-                <button type="submit" class="btn btn-secondary" [disabled]="isUploading">
-                    <span>{{'HELM_CHART.UPLOAD' | translate}}</span>
-                </button>
-                <span *ngIf="isUploading" class="spinner spinner-inline">
-                    Loading...
-                </span>
-            </form>
-        </div>
-    </clr-modal>
     <confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
 </div>
\ No newline at end of file
diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
index 86f3240f1..eb45505f7 100644
--- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
+++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
@@ -8,7 +8,6 @@ import {
   Output,
   EventEmitter
 } from "@angular/core";
-import { NgForm } from "@angular/forms";
 import { Observable } from "rxjs/Observable";
 import "rxjs/add/observable/forkJoin";
 
@@ -72,16 +71,12 @@ export class ChartVersionComponent implements OnInit {
   totalCount = 0;
   currentState: State;
 
-  isUploading = false;
-  isUploadModalOpen = false;
   chartFile: File;
   provFile: File;
 
   @ViewChild("confirmationDialog")
   confirmationDialog: ConfirmationDialogComponent;
 
-  @ViewChild("chartUploadForm") form: NgForm;
-
   constructor(
     private errorHandler: ErrorHandler,
     private translateService: TranslateService,
@@ -201,9 +196,6 @@ export class ChartVersionComponent implements OnInit {
       }
     );
   }
-  versionUpload() {
-    this.isUploadModalOpen = true;
-  }
 
   showCard(cardView: boolean) {
     if (this.isCardView === cardView) {
@@ -236,30 +228,6 @@ export class ChartVersionComponent implements OnInit {
     }
   }
 
-  upload() {
-    if (!this.chartFile && !this.provFile) {
-      return;
-    }
-    if (this.isUploading) { return; };
-    this.isUploading = true;
-    this.helmChartService
-      .uploadChart(this.projectName, this.chartFile, this.provFile)
-      .finally(() => {
-        this.isUploading = false;
-        this.isUploadModalOpen = false;
-        this.refresh();
-        let hnd = setInterval(() => this.cdr.markForCheck(), 100);
-        setTimeout(() => clearInterval(hnd), 3000);
-      })
-      .subscribe(
-        () => {
-          this.translateService.get("HELM_CHART.FILE_UPLOADED")
-            .subscribe(res => this.errorHandler.info(res));
-        },
-        err => this.errorHandler.error(err)
-      );
-  }
-
   onChartFileChangeEvent(event) {
     if (event.target.files && event.target.files.length > 0) {
       this.chartFile = event.target.files[0];
@@ -275,6 +243,7 @@ export class ChartVersionComponent implements OnInit {
     env.stopPropagation();
     this.openVersionDeleteModal([version]);
   }
+
   openVersionDeleteModal(versions: HelmChartVersion[]) {
     let versionNames = versions.map(v => v.name).join(",");
     this.translateService.get("HELM_CHART.DELETE_CHART_VERSION").subscribe(key => {

From e5f9fe5961d975ee825283aa6e5e28f22ef6ce94 Mon Sep 17 00:00:00 2001
From: Qian Deng <dengq@vmware.com>
Date: Wed, 15 Aug 2018 11:44:44 +0800
Subject: [PATCH 2/9] Diable delete button when user not admin

Binding the disable propety

Signed-off-by: Qian Deng <dengq@vmware.com>
---
 .../helm-chart/versions/helm-chart-version.component.html  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
index 5619f8b03..df52e504f 100644
--- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
+++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
@@ -105,8 +105,11 @@
                 </div>
                 <div class="card-footer">
                     <clr-dropdown [clrCloseMenuOnItemClick]="false">
-                        <button type="button" class="btn btn-link" (click)="versionDownload($event, item)">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
-                        <button type="button" class="btn btn-link" (click)="deleteVersionCard($event, item)">{{'BUTTON.DELETE' | translate}}</button>
+                        <button type="button" class="btn btn-link"
+                        (click)="versionDownload($event, item)">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
+                        <button type="button" class="btn btn-link"
+                        [disabled]="selectedRows.length<=0 || !hasProjectAdminRole"
+                        (click)="deleteVersionCard($event, item)">{{'BUTTON.DELETE' | translate}}</button>
                     </clr-dropdown>
                 </div>
             </a>

From 4ecea1f5ad876eadfaa63c9625ebbce1fa9fa5e0 Mon Sep 17 00:00:00 2001
From: Qian Deng <dengq@vmware.com>
Date: Wed, 15 Aug 2018 15:10:20 +0800
Subject: [PATCH 3/9] Fix incorrect UI views when logging in with a user in the
 group assigned with proper role

This caused by project routing guard using a wrong way to get the project role info.

Signed-off-by: Qian Deng <dengq@vmware.com>
---
 .../chart-detail/chart-detail.component.ts       |  2 +-
 .../list-chart-versions.component.ts             |  2 +-
 .../project-detail/project-detail.component.ts   |  2 +-
 .../project/project-routing-resolver.service.ts  | 16 +++++++---------
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/ui_ng/src/app/project/chart-detail/chart-detail.component.ts b/src/ui_ng/src/app/project/chart-detail/chart-detail.component.ts
index 6861da381..a1751fa95 100644
--- a/src/ui_ng/src/app/project/chart-detail/chart-detail.component.ts
+++ b/src/ui_ng/src/app/project/chart-detail/chart-detail.component.ts
@@ -36,7 +36,7 @@ export class ChartDetailComponent implements OnInit {
     let resolverData = this.route.snapshot.data;
     if (resolverData) {
       this.project = <Project>(resolverData["projectResolver"]);
-      this.roleName = RoleMapping[this.project.role_name];
+      this.roleName = this.project.role_name;
       this.hasProjectAdminRole = this.project.has_project_admin_role;
     }
   }
diff --git a/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts b/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
index a200bac36..2abe7f009 100644
--- a/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
+++ b/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
@@ -40,7 +40,7 @@ export class ListChartVersionsComponent implements OnInit {
     if (resolverData) {
       let project = <Project>(resolverData["projectResolver"]);
       this.hasProjectAdminRole = project.has_project_admin_role;
-      this.roleName = RoleMapping[project.role_name];
+      this.roleName = project.role_name;
       this.projectName = project.name;
     }
   }
diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.ts b/src/ui_ng/src/app/project/project-detail/project-detail.component.ts
index 2d8f5d0c4..02f433f39 100644
--- a/src/ui_ng/src/app/project/project-detail/project-detail.component.ts
+++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.ts
@@ -46,7 +46,7 @@ export class ProjectDetailComponent {
     this.route.data.subscribe(data => {
       this.currentProject = <Project>data['projectResolver'];
       this.isMember = this.currentProject.is_member;
-      this.roleName = RoleMapping[this.currentProject.role_name];
+      this.roleName = this.currentProject.role_name;
     });
   }
 
diff --git a/src/ui_ng/src/app/project/project-routing-resolver.service.ts b/src/ui_ng/src/app/project/project-routing-resolver.service.ts
index c327ca621..1b92711f8 100644
--- a/src/ui_ng/src/app/project/project-routing-resolver.service.ts
+++ b/src/ui_ng/src/app/project/project-routing-resolver.service.ts
@@ -1,3 +1,4 @@
+import { RoleInfo } from './../shared/shared.const';
 // Copyright (c) 2017 VMware, Inc. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -40,17 +41,14 @@ export class ProjectRoutingResolver implements Resolve<Project> {
         if (project) {
           let currentUser = this.sessionService.getCurrentUser();
           if (currentUser) {
-            let projectMembers = this.sessionService.getProjectMembers();
-            if (projectMembers) {
-              let currentMember = projectMembers.find(m => m.entity_id === currentUser.user_id);
-              if (currentMember) {
-                project.is_member = true;
-                project.has_project_admin_role = (currentMember.role_name === 'projectAdmin');
-                project.role_name = currentMember.role_name;
-              }
-            }
             if (currentUser.has_admin_role) {
               project.has_project_admin_role = true;
+              project.is_member = true;
+              project.role_name = 'MEMBER.SYS_ADMIN';
+            } else {
+              project.has_project_admin_role = (project.current_user_role_id === 1);
+              project.is_member = (project.current_user_role_id > 0);
+              project.role_name = RoleInfo[project.current_user_role_id];
             }
           }
           return project;

From b98af169afd01a08bc45c9c9863d412ce34e52e3 Mon Sep 17 00:00:00 2001
From: Qian Deng <dengq@vmware.com>
Date: Wed, 15 Aug 2018 17:15:57 +0800
Subject: [PATCH 4/9] Fix chart upload related issues

1. Chart will reset when open modal
2. Empty chart shouldn't trigger upload action

Signed-off-by: Qian Deng <dengq@vmware.com>
---
 .../lib/src/helm-chart/helm-chart.component.html    |  2 +-
 .../lib/src/helm-chart/helm-chart.component.ts      | 13 +++++++++++++
 .../project/list-charts/list-charts.component.html  |  1 +
 .../project/list-charts/list-charts.component.ts    |  3 +++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
index 864d71052..27c74cab2 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
@@ -24,7 +24,7 @@
         <div *ngIf="!isCardView" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
             <clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRows">
                 <clr-dg-action-bar>
-                    <button type="button" class="btn btn-sm btn-secondary" [disabled]="!hasProjectAdminRole" (click)="onChartUpload($event)">
+                    <button type="button" class="btn btn-sm btn-secondary" [disabled]="!developerRoleOrAbove" (click)="onChartUpload($event)">
                             <clr-icon shape="upload" size="16"></clr-icon>&nbsp;{{'HELM_CHART.UPLOAD' | translate}}
                     </button>
                 </clr-dg-action-bar>
diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
index 9adfbf66c..beb32a7f8 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
@@ -5,8 +5,10 @@ import {
   ChangeDetectionStrategy,
   Output,
   EventEmitter,
+  ViewChild,
   ChangeDetectorRef
 } from "@angular/core";
+import { NgForm } from '@angular/forms';
 import { TranslateService } from "@ngx-translate/core";
 import { State } from "clarity-angular";
 
@@ -28,6 +30,7 @@ export class HelmChartComponent implements OnInit {
   @Input() projectName = "unknown";
   @Input() urlPrefix: string;
   @Input() hasSignedIn: boolean;
+  @Input() projectRoleID = 0;
   @Input() hasProjectAdminRole: boolean;
   @Output() chartClickEvt = new EventEmitter<any>();
   @Output() chartDownloadEve = new EventEmitter<string>();
@@ -56,6 +59,8 @@ export class HelmChartComponent implements OnInit {
   totalCount = 0;
   currentState: State;
 
+  @ViewChild('chartUploadForm') uploadForm: NgForm;
+
   constructor(
     private errorHandler: ErrorHandler,
     private translateService: TranslateService,
@@ -68,6 +73,11 @@ export class HelmChartComponent implements OnInit {
     return this.systemInfo ? this.systemInfo.registry_url : "";
   }
 
+  public get developerRoleOrAbove(): boolean {
+    // 1: admin, 2: developer, 3: guest
+    return this.projectRoleID === 2 || this.hasProjectAdminRole;
+  }
+
   ngOnInit(): void {
     // Get system info for tag views
     toPromise<SystemInfo>(this.systemInfoService.getSystemInfo())
@@ -107,6 +117,9 @@ export class HelmChartComponent implements OnInit {
   }
 
   onChartUpload() {
+    this.chartFile = null;
+    this.provFile = null;
+    this.uploadForm.reset();
     this.isUploadModalOpen = true;
   }
 
diff --git a/src/ui_ng/src/app/project/list-charts/list-charts.component.html b/src/ui_ng/src/app/project/list-charts/list-charts.component.html
index 00f1dd372..9f6c59098 100644
--- a/src/ui_ng/src/app/project/list-charts/list-charts.component.html
+++ b/src/ui_ng/src/app/project/list-charts/list-charts.component.html
@@ -3,6 +3,7 @@
     [projectName]='projectName'
     [urlPrefix]='urlPrefix'
     [hasSignedIn]='hasSignedIn'
+    [projectRoleID]='project_member_role_id'
     [hasProjectAdminRole]='hasProjectAdminRole'
     (chartClickEvt)='onChartClick($event)'>
 </hbr-helm-chart>
diff --git a/src/ui_ng/src/app/project/list-charts/list-charts.component.ts b/src/ui_ng/src/app/project/list-charts/list-charts.component.ts
index f87e560f5..f09cdcf2d 100644
--- a/src/ui_ng/src/app/project/list-charts/list-charts.component.ts
+++ b/src/ui_ng/src/app/project/list-charts/list-charts.component.ts
@@ -18,6 +18,7 @@ export class ListChartsComponent implements OnInit {
   urlPrefix: string;
   hasSignedIn: boolean;
   hasProjectAdminRole: boolean;
+  project_member_role_id: number;
   currentUser: SessionUser;
 
   constructor(
@@ -35,6 +36,8 @@ export class ListChartsComponent implements OnInit {
       let project = <Project>(resolverData["projectResolver"]);
       this.projectName = project.name;
       this.hasProjectAdminRole = project.has_project_admin_role;
+      this.project_member_role_id = project.current_user_role_id;
+      console.log(this.project_member_role_id);
     }
   }
 

From 07da2fd5d6199f97fe23a2400b361b601b156132 Mon Sep 17 00:00:00 2001
From: Qian Deng <dengq@vmware.com>
Date: Wed, 15 Aug 2018 17:22:26 +0800
Subject: [PATCH 5/9] Edit the wording of version

1. Fix word of app version on summary page
2. Fix version on version cart view

Signed-off-by: Qian Deng <dengq@vmware.com>
---
 .../helm-chart/chart-detail/chart-detail-summary.component.html | 2 +-
 .../src/helm-chart/versions/helm-chart-version.component.html   | 2 +-
 src/ui_ng/src/i18n/lang/en-us-lang.json                         | 1 +
 src/ui_ng/src/i18n/lang/es-es-lang.json                         | 1 +
 src/ui_ng/src/i18n/lang/fr-fr-lang.json                         | 1 +
 src/ui_ng/src/i18n/lang/zh-cn-lang.json                         | 1 +
 6 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html b/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html
index 4a52061da..c9bf5a1a0 100644
--- a/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html
+++ b/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html
@@ -40,7 +40,7 @@
                         </td>
                     </tr>
                     <tr>
-                        <td class="left">{{'HELM_CHART.VERSION' | translate }}</td>
+                        <td class="left">{{'HELM_CHART.APP_VERSION' | translate }}</td>
                         <td class="left">{{ summary.appVersion }}</td>
                     </tr>
                 </tbody>
diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
index df52e504f..9c6a8a7f9 100644
--- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
+++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
@@ -100,7 +100,7 @@
                     </div>
                     <div class="form-group">
                         <label class="card-label">{{'HELM_CHART.VERSION' | translate}}</label>
-                        <div>{{item.appVersion}}</div>
+                        <div>{{item.version}}</div>
                     </div>
                 </div>
                 <div class="card-footer">
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index 443b62f00..e3af91e5e 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -487,6 +487,7 @@
         "MAINTAINERS": "Maintainers",
         "PULLS": "Pull Count",
         "VERSION": "Version",
+        "APP_VERSION": "App Version",
         "INSTALL": "Install",
         "INSTALL_CHART": "Install Chart",
         "NAME": "Name",
diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json
index 0563fa603..b53abb19f 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -486,6 +486,7 @@
         "MAINTAINERS": "Maintainers",
         "PULLS": "Pull Count",
         "VERSION": "Version",
+        "APP_VERSION": "App Version",
         "INSTALL": "Install",
         "INSTALL_CHART": "Install Chart",
         "NAME": "Name",
diff --git a/src/ui_ng/src/i18n/lang/fr-fr-lang.json b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
index 764d286e4..69e803b9b 100644
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
@@ -462,6 +462,7 @@
         "MAINTAINERS": "Maintainers",
         "PULLS": "Pull Count",
         "VERSION": "Version",
+        "APP_VERSION": "App Version",
         "INSTALL": "Install",
         "INSTALL_CHART": "Install Chart",
         "NAME": "Name",
diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
index ea3c776ef..3eaff8e3c 100644
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@@ -494,6 +494,7 @@
         "DELETE": "删除",
         "OF": "的",
         "VERSIONS": "版本",
+        "APP_VERSION": "应用版本",
         "IMAGES": "镜像",
         "ENGINE": "引擎",
         "ACTION": "动作",

From 6d91a0d66e43097cec01deb1e8715a651a365db0 Mon Sep 17 00:00:00 2001
From: Qian Deng <dengq@vmware.com>
Date: Wed, 15 Aug 2018 18:10:08 +0800
Subject: [PATCH 6/9] Fix Group related issues

1. Fix Ldap group name to required item
2. Edit Group DN is not allowed

Signed-off-by: Qian Deng <dengq@vmware.com>
---
 .../add-group-modal.component.html                | 15 ++++++++++++---
 .../add-group-modal/add-group-modal.component.ts  |  4 ++++
 src/ui_ng/src/i18n/lang/en-us-lang.json           |  2 +-
 src/ui_ng/src/i18n/lang/es-es-lang.json           |  2 +-
 src/ui_ng/src/i18n/lang/fr-fr-lang.json           |  2 +-
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/ui_ng/src/app/group/add-group-modal/add-group-modal.component.html b/src/ui_ng/src/app/group/add-group-modal/add-group-modal.component.html
index d883b74bb..3f3c778c8 100644
--- a/src/ui_ng/src/app/group/add-group-modal/add-group-modal.component.html
+++ b/src/ui_ng/src/app/group/add-group-modal/add-group-modal.component.html
@@ -14,6 +14,7 @@
                     [class.invalid]="isDNInvalid">
                         <input type="text" id="ldap_group_dn" name="ldap_group_dn"
                         required
+                        [disabled]="mode !== 'create'"
                         [(ngModel)]="group.ldap_group_dn"
                         #groupDN="ngModel">
                         <span class="tooltip-content">
@@ -26,11 +27,19 @@
                     <label id="type">LDAP</label>
                 </div>
                 <div class="form-group">
-                    <label for="group_name">{{'GROUP.NAME' | translate}}</label>
-                    <label for="group_name">
+                    <label for="group_name" class="required">{{'GROUP.NAME' | translate}}</label>
+                    <label for="group_name"
+                    aria-haspopup="true"
+                    role="tooltip"
+                    class="tooltip tooltip-validation tooltip-sm tooltip-right"
+                    [class.invalid]="isNameInvalid">
                         <input type="text" id="group_name" name="group_name"
+                        required
                         [(ngModel)]="group.group_name"
-                        #groupDN="ngModel">
+                        #groupName="ngModel">
+                        <span class="tooltip-content">
+                            {{dnTooltip | translate}}
+                        </span>
                     </label>
                 </div>
             </section>
diff --git a/src/ui_ng/src/app/group/add-group-modal/add-group-modal.component.ts b/src/ui_ng/src/app/group/add-group-modal/add-group-modal.component.ts
index b6660c6dd..c6937cfe2 100644
--- a/src/ui_ng/src/app/group/add-group-modal/add-group-modal.component.ts
+++ b/src/ui_ng/src/app/group/add-group-modal/add-group-modal.component.ts
@@ -45,6 +45,10 @@ export class AddGroupModalComponent implements OnInit, OnDestroy {
     let dnControl = this.groupForm.controls['ldap_group_dn'];
     return  dnControl && dnControl.invalid && (dnControl.dirty || dnControl.touched);
   }
+  public get isNameInvalid(): boolean {
+    let dnControl = this.groupForm.controls['group_name'];
+    return  dnControl && dnControl.invalid && (dnControl.dirty || dnControl.touched);
+  }
 
   public get isFormValid(): boolean {
     return this.groupForm.valid;
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index e3af91e5e..337cf00b1 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -487,7 +487,7 @@
         "MAINTAINERS": "Maintainers",
         "PULLS": "Pull Count",
         "VERSION": "Version",
-        "APP_VERSION": "App Version",
+        "APP_VERSION": "Application Version",
         "INSTALL": "Install",
         "INSTALL_CHART": "Install Chart",
         "NAME": "Name",
diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json
index b53abb19f..617cb86a1 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -486,7 +486,7 @@
         "MAINTAINERS": "Maintainers",
         "PULLS": "Pull Count",
         "VERSION": "Version",
-        "APP_VERSION": "App Version",
+        "APP_VERSION": "Application Version",
         "INSTALL": "Install",
         "INSTALL_CHART": "Install Chart",
         "NAME": "Name",
diff --git a/src/ui_ng/src/i18n/lang/fr-fr-lang.json b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
index 69e803b9b..de8361bb9 100644
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
@@ -462,7 +462,7 @@
         "MAINTAINERS": "Maintainers",
         "PULLS": "Pull Count",
         "VERSION": "Version",
-        "APP_VERSION": "App Version",
+        "APP_VERSION": "Application Version",
         "INSTALL": "Install",
         "INSTALL_CHART": "Install Chart",
         "NAME": "Name",

From 317a01fa99ac5c820318f5e1260919fc74ede21d Mon Sep 17 00:00:00 2001
From: Qian Deng <dengq@vmware.com>
Date: Thu, 16 Aug 2018 16:16:45 +0800
Subject: [PATCH 7/9] Fix i18n translate with parameter not work problem

The first parameter to translate should be the i18n key

Signed-off-by: Qian Deng <dengq@vmware.com>
---
 .../versions/helm-chart-version.component.ts  | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
index eb45505f7..710379503 100644
--- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
+++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
@@ -245,20 +245,18 @@ export class ChartVersionComponent implements OnInit {
   }
 
   openVersionDeleteModal(versions: HelmChartVersion[]) {
-    let versionNames = versions.map(v => v.name).join(",");
-    this.translateService.get("HELM_CHART.DELETE_CHART_VERSION").subscribe(key => {
-        let message = new ConfirmationMessage(
-          "HELM_CHART.DELETE_CHART_VERSION_TITLE",
-          key,
-          versionNames,
-          versions,
-          ConfirmationTargets.HELM_CHART,
-          ConfirmationButtons.DELETE_CANCEL
-        );
-        this.confirmationDialog.open(message);
-        let hnd = setInterval(() => this.cdr.markForCheck(), 100);
-        setTimeout(() => clearInterval(hnd), 2000);
-      });
+    let versionNames = versions.map(v => v.version).join(",");
+    let message = new ConfirmationMessage(
+      "HELM_CHART.DELETE_CHART_VERSION_TITLE",
+      "HELM_CHART.DELETE_CHART_VERSION",
+      versionNames,
+      versions,
+      ConfirmationTargets.HELM_CHART,
+      ConfirmationButtons.DELETE_CANCEL
+    );
+    this.confirmationDialog.open(message);
+    let hnd = setInterval(() => this.cdr.markForCheck(), 100);
+    setTimeout(() => clearInterval(hnd), 2000);
   }
 
   confirmDeletion(message: ConfirmationAcknowledgement) {

From 8cf7d4f8225e1f706821d773a25d50742473e6d8 Mon Sep 17 00:00:00 2001
From: Qian Deng <dengq@vmware.com>
Date: Thu, 16 Aug 2018 20:32:59 +0800
Subject: [PATCH 8/9] Fix item number and i18n issues

Fix item number presentation on Group, charts, chart versions, member group add

Signed-off-by: Qian Deng <dengq@vmware.com>
---
 src/ui_ng/lib/src/helm-chart/helm-chart.component.html    | 5 ++++-
 src/ui_ng/lib/src/helm-chart/helm-chart.component.ts      | 1 +
 .../helm-chart/versions/helm-chart-version.component.html | 7 +++++--
 .../helm-chart/versions/helm-chart-version.component.ts   | 1 +
 src/ui_ng/src/app/group/group.component.html              | 5 ++++-
 .../app/project/member/add-group/add-group.component.html | 5 ++++-
 .../app/project/member/add-group/add-group.component.ts   | 2 ++
 src/ui_ng/src/i18n/lang/en-us-lang.json                   | 4 +++-
 src/ui_ng/src/i18n/lang/es-es-lang.json                   | 4 +++-
 src/ui_ng/src/i18n/lang/fr-fr-lang.json                   | 4 +++-
 src/ui_ng/src/i18n/lang/zh-cn-lang.json                   | 8 +++++---
 11 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
index 27c74cab2..22158f8c8 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
@@ -45,7 +45,10 @@
                     <clr-dg-cell>{{ chart.created | date }}</clr-dg-cell>
                 </clr-dg-row>
                 <clr-dg-footer>
-                    <clr-dg-pagination #pagination [clrDgPageSize]="pageSize">
+                    <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount">
+                        <span *ngIf="pagination.totalItems">
+                            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}}
+                        </span>
                         {{pagination.totalItems}} {{'HELM_CHART.ITEMS'| translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
index beb32a7f8..2ebd20e6a 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
@@ -105,6 +105,7 @@ export class HelmChartComponent implements OnInit {
       charts => {
         this.charts = charts.filter(x => x.name.includes(this.lastFilteredChartName));
         this.chartsCopy = charts.map(x => Object.assign({}, x));
+        this.totalCount = charts.length;
       },
       err => {
         this.errorHandler.error(err);
diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
index 9c6a8a7f9..998161544 100644
--- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
+++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
@@ -66,8 +66,11 @@
                     <clr-dg-cell>{{ v.created | date}}</clr-dg-cell>
                 </clr-dg-row>
                 <clr-dg-footer>
-                    <clr-dg-pagination #pagination [clrDgPageSize]="pageSize">
-                        {{pagination.totalItems}} {{'HELM_CHART.ITEMS' | translate}}
+                    <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount">
+                        <span *ngIf="pagination.totalItems">
+                            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}}
+                        </span>
+                        {{pagination.totalItems}} {{'HELM_CHART.ITEMS'| translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>
diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
index 710379503..e4a9fca98 100644
--- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
+++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.ts
@@ -117,6 +117,7 @@ export class ChartVersionComponent implements OnInit {
         versions => {
           this.chartVersions = versions.filter(x => x.version.includes(this.lastFilteredVersionName));
           this.versionsCopy = versions.map(x => Object.assign({}, x));
+          this.totalCount = versions.length;
         },
         err => {
           this.errorHandler.error(err);
diff --git a/src/ui_ng/src/app/group/group.component.html b/src/ui_ng/src/app/group/group.component.html
index a2d3b313c..9f99ac52d 100644
--- a/src/ui_ng/src/app/group/group.component.html
+++ b/src/ui_ng/src/app/group/group.component.html
@@ -30,7 +30,10 @@
         </clr-dg-row>
         <clr-dg-footer>
           <clr-dg-pagination #pagination [clrDgPageSize]="15">
-              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'USER.OF' | translate }} {{pagination.totalItems}} {{'GROUP.GROUPS' | translate}}
+            <span *ngIf="pagination.totalItems">
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'GROUP.OF' | translate}}
+            </span>
+              {{pagination.totalItems}} {{'GROUP.ITEMS' | translate}}
           </clr-dg-pagination>
         </clr-dg-footer>
       </clr-datagrid>
diff --git a/src/ui_ng/src/app/project/member/add-group/add-group.component.html b/src/ui_ng/src/app/project/member/add-group/add-group.component.html
index d723dd837..fa7be3b61 100644
--- a/src/ui_ng/src/app/project/member/add-group/add-group.component.html
+++ b/src/ui_ng/src/app/project/member/add-group/add-group.component.html
@@ -75,7 +75,10 @@
                         </clr-dg-row>
 
                         <clr-dg-footer>
-                            <clr-dg-pagination #pagination [clrDgPageSize]="5">
+                            <clr-dg-pagination #pagination [clrDgPageSize]="5" [clrDgTotalItems]="totalCount">
+                                <span *ngIf="pagination.totalItems">
+                                        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'MEMBER.OF' | translate}}
+                                </span>
                                 {{pagination.totalItems}} {{'MEMBER.ITEMS' | translate}}
                             </clr-dg-pagination>
                         </clr-dg-footer>
diff --git a/src/ui_ng/src/app/project/member/add-group/add-group.component.ts b/src/ui_ng/src/app/project/member/add-group/add-group.component.ts
index b5ea17a16..8e0327eca 100644
--- a/src/ui_ng/src/app/project/member/add-group/add-group.component.ts
+++ b/src/ui_ng/src/app/project/member/add-group/add-group.component.ts
@@ -34,6 +34,7 @@ export class AddGroupComponent implements OnInit {
   group = new UserGroup();
   selectedGroups: UserGroup[] = [];
   groups: UserGroup[] = [];
+  totalCount = 0;
 
   dnTooltip = 'TOOLTIP.ITEM_REQUIRED';
 
@@ -76,6 +77,7 @@ export class AddGroupComponent implements OnInit {
         return group.group_name.includes(this.currentTerm)
         && !this.memberList.some(member => member.entity_type === 'g' && member.entity_id === group.id);
       });
+      this.totalCount = groups.length;
       this.onLoading = false;
       this.ref.detectChanges();
     });
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index 337cf00b1..b6c306bba 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -265,7 +265,9 @@
         "REG_TIME": "Registration Time",
         "ADD_GROUP_SUCCESS": "Add group success",
         "EDIT_GROUP_SUCCESS": "Edit group success",
-        "LDAP_TYPE": "LDAP"
+        "LDAP_TYPE": "LDAP",
+        "OF": "of",
+        "ITEMS": "items"
     },
     "AUDIT_LOG": {
         "USERNAME": "Username",
diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json
index 617cb86a1..6bbcff786 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -264,7 +264,9 @@
         "REG_TIME": "Registration Time",
         "ADD_GROUP_SUCCESS": "Add group success",
         "EDIT_GROUP_SUCCESS": "Edit group success",
-        "LDAP_TYPE": "LDAP"
+        "LDAP_TYPE": "LDAP",
+        "OF": "of",
+        "ITEMS": "items"
     },
     "AUDIT_LOG": {
         "USERNAME": "Nombre de usuario",
diff --git a/src/ui_ng/src/i18n/lang/fr-fr-lang.json b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
index de8361bb9..25a76ca03 100644
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
@@ -248,7 +248,9 @@
         "REG_TIME": "Registration Time",
         "ADD_GROUP_SUCCESS": "Add group success",
         "EDIT_GROUP_SUCCESS": "Edit group success",
-        "LDAP_TYPE": "LDAP"
+        "LDAP_TYPE": "LDAP",
+        "OF": "of",
+        "ITEMS": "items"
     },
     "AUDIT_LOG": {
         "USERNAME": "Nom d'utilisateur",
diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
index 3eaff8e3c..88686fd82 100644
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@@ -264,7 +264,9 @@
         "REG_TIME": "注册时间",
         "ADD_GROUP_SUCCESS": "添加组成功",
         "EDIT_GROUP_SUCCESS": "修改组成功",
-        "LDAP_TYPE": "LDAP"
+        "LDAP_TYPE": "LDAP",
+        "OF": "共计",
+        "ITEMS": "条记录"
     },
     "AUDIT_LOG": {
         "USERNAME": "用户名",
@@ -492,7 +494,7 @@
         "REPO": "仓库",
         "FILTER_FOR_CHARTS": "过滤Chart",
         "DELETE": "删除",
-        "OF": "的",
+        "OF": "共计",
         "VERSIONS": "版本",
         "APP_VERSION": "应用版本",
         "IMAGES": "镜像",
@@ -512,7 +514,7 @@
         "SIGN": "签名",
         "SIGNED": "已签名",
         "UNSIGNED": "未签名",
-        "ITEMS": "项",
+        "ITEMS": "条记录",
         "NO_README": "此Chart未提供README文件",
         "SECURITY": "安全",
         "ACTIVE": "正常",

From d5da3862b2f3ec85f2e9a1be934669a03f499343 Mon Sep 17 00:00:00 2001
From: Qian Deng <dengq@vmware.com>
Date: Thu, 16 Aug 2018 22:22:55 +0800
Subject: [PATCH 9/9] Refactor upload modal

Using customized button to replace file input

Signed-off-by: Qian Deng <dengq@vmware.com>
---
 .../src/helm-chart/helm-chart.component.html  | 33 ++++++++++++-------
 .../src/helm-chart/helm-chart.component.scss  | 31 +++++++++++++++++
 .../src/helm-chart/helm-chart.component.ts    | 17 +++++++---
 src/ui_ng/lib/src/shared/shared.const.ts      |  7 ++++
 .../list-chart-versions.component.ts          |  1 -
 .../member/add-group/add-group.component.ts   |  1 +
 .../project-detail.component.ts               |  1 -
 .../project-routing-resolver.service.ts       |  4 ++-
 src/ui_ng/src/app/shared/shared.const.ts      |  7 ++++
 src/ui_ng/src/i18n/lang/en-us-lang.json       |  5 ++-
 src/ui_ng/src/i18n/lang/es-es-lang.json       |  6 ++--
 src/ui_ng/src/i18n/lang/fr-fr-lang.json       |  5 ++-
 src/ui_ng/src/i18n/lang/zh-cn-lang.json       |  5 ++-
 13 files changed, 99 insertions(+), 24 deletions(-)

diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
index 22158f8c8..d64db10c6 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html
@@ -86,26 +86,35 @@
             <span class="spinner"></span>
         </div>
     </div>
-    <clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
-        <h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate}}</h3>
+    <clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
+        <h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate | titlecase}}</h3>
         <div class="modal-body">
             <form #chartUploadForm="ngForm" enctype="multipart/form-data" (ngSubmit)="upload()">
                 <section class="form-block">
                     <div class="form-group">
-                        <label for="chart"> {{'HELM_CHART.CHART_FILE' | translate}} </label>
-                        <input type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
+                        <label class="filename-label"> {{'HELM_CHART.CHART_FILE' | translate}} </label>
+                        <input class="filename-input" type="text" placeholder="{{this.chartFile?.name || 'BUTTON.NO_FILE' | translate}}" disabled>
+                        <label for="chart" class="btn btn-secondary btn-sm file-browser-btn">{{'BUTTON.BROWSE' | translate}}</label>
+                        <input class="file-input" type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
                     </div>
                     <div class="form-group">
-                        <label for="prov"> {{'HELM_CHART.CHART_PROV' | translate}} </label>
-                        <input type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
+                        <label class="filename-label"> {{'HELM_CHART.CHART_PROV' | translate}} </label>
+                        <input class="filename-input" type="text" placeholder="{{this.provFile?.name || 'BUTTON.NO_FILE' | translate}}" disabled>
+                        <label for="prov" class="btn btn-secondary btn-sm file-browser-btn">{{'BUTTON.BROWSE' | translate}}</label>
+                        <input class="file-input" type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
                     </div>
                 </section>
-                <button type="submit" class="btn btn-secondary" [disabled]="isUploading">
-                    <span>{{'HELM_CHART.UPLOAD' | translate}}</span>
-                </button>
-                <span *ngIf="isUploading" class="spinner spinner-inline">
-                    Loading...
-                </span>
+                <div class="row flex-items-xs-right">
+                    <button class="btn btn-secondary" [disabled]="isUploading" (click)="cancelUpload()">
+                        <span>{{'BUTTON.CANCEL' | translate}}</span>
+                    </button>
+                    <button type="submit" class="btn btn-primary" [disabled]="isUploading">
+                        <span>{{'HELM_CHART.UPLOAD' | translate}}</span>
+                        <span *ngIf="isUploading" class="spinner spinner-inline">
+                            Loading...
+                        </span>
+                    </button>
+                </div>
             </form>
         </div>
     </clr-modal>
diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss b/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
index f3ea44d18..c5e0f8725 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
@@ -76,4 +76,35 @@ $size60:60px;
 
 .margin-right-12 {
     margin-right:12px;
+}
+
+.file-input {
+    display: none;
+}
+
+.filename-span {
+    @include text-overflow;
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+}
+
+clr-modal {
+    .form-group {
+        padding-left: 6rem;
+
+        .filename-label {
+            padding-top: 9px;
+        }
+
+        .filename-input {
+            margin-top: 12px;
+            width: 68%;
+        }
+    
+        .file-browser-btn {
+            margin-left: 15px;
+            max-width: 25%;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
index 2ebd20e6a..7006a87e6 100644
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
+++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
@@ -17,6 +17,7 @@ import { ErrorHandler } from "../error-handler/error-handler";
 import { toPromise, DEFAULT_PAGE_SIZE } from "../utils";
 import { HelmChartService } from "../service/helm-chart.service";
 import { DefaultHelmIcon} from "../shared/shared.const";
+import { Roles } from './../shared/shared.const';
 
 @Component({
   selector: "hbr-helm-chart",
@@ -30,7 +31,7 @@ export class HelmChartComponent implements OnInit {
   @Input() projectName = "unknown";
   @Input() urlPrefix: string;
   @Input() hasSignedIn: boolean;
-  @Input() projectRoleID = 0;
+  @Input() projectRoleID = Roles.OTHER;
   @Input() hasProjectAdminRole: boolean;
   @Output() chartClickEvt = new EventEmitter<any>();
   @Output() chartDownloadEve = new EventEmitter<string>();
@@ -74,8 +75,7 @@ export class HelmChartComponent implements OnInit {
   }
 
   public get developerRoleOrAbove(): boolean {
-    // 1: admin, 2: developer, 3: guest
-    return this.projectRoleID === 2 || this.hasProjectAdminRole;
+    return this.projectRoleID === Roles.DEVELOPER || this.hasProjectAdminRole;
   }
 
   ngOnInit(): void {
@@ -117,13 +117,22 @@ export class HelmChartComponent implements OnInit {
     this.chartClickEvt.emit(item.name);
   }
 
-  onChartUpload() {
+  resetUploadForm() {
     this.chartFile = null;
     this.provFile = null;
     this.uploadForm.reset();
+  }
+
+  onChartUpload() {
+    this.resetUploadForm();
     this.isUploadModalOpen = true;
   }
 
+  cancelUpload() {
+    this.resetUploadForm();
+    this.isUploadModalOpen = false;
+  }
+
   upload() {
     if (!this.chartFile && !this.provFile) {
       return;
diff --git a/src/ui_ng/lib/src/shared/shared.const.ts b/src/ui_ng/lib/src/shared/shared.const.ts
index c2c0d3750..7df04c52e 100644
--- a/src/ui_ng/lib/src/shared/shared.const.ts
+++ b/src/ui_ng/lib/src/shared/shared.const.ts
@@ -92,3 +92,10 @@ export const LabelColor = [
 export const RoleMapping = { 'projectAdmin': 'MEMBER.PROJECT_ADMIN', 'developer': 'MEMBER.DEVELOPER', 'guest': 'MEMBER.GUEST' };
 
 export const DefaultHelmIcon = '/static/images/helm-gray.png';
+
+export enum Roles {
+  PROJECT_ADMIN = 1,
+  DEVELOPER = 2,
+  GUEST = 3,
+  OTHER = 0,
+}
diff --git a/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts b/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
index 2abe7f009..bc3c2e1b9 100644
--- a/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
+++ b/src/ui_ng/src/app/project/list-chart-versions/list-chart-versions.component.ts
@@ -5,7 +5,6 @@ import { Component, OnInit } from '@angular/core';
 import { Project } from './../project';
 import { SessionUser } from './../../shared/session-user';
 import { SessionService } from './../../shared/session.service';
-import { RoleMapping } from '../../shared/shared.const';
 
 @Component({
   selector: 'list-chart-version',
diff --git a/src/ui_ng/src/app/project/member/add-group/add-group.component.ts b/src/ui_ng/src/app/project/member/add-group/add-group.component.ts
index 8e0327eca..82f7ffb74 100644
--- a/src/ui_ng/src/app/project/member/add-group/add-group.component.ts
+++ b/src/ui_ng/src/app/project/member/add-group/add-group.component.ts
@@ -89,6 +89,7 @@ export class AddGroupComponent implements OnInit {
   }
 
   resetModaldata() {
+    this.createGroupMode = false;
     this.group = new UserGroup();
     this.selectedRole = 1;
     this.selectedGroups = [];
diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.ts b/src/ui_ng/src/app/project/project-detail/project-detail.component.ts
index 02f433f39..ac7a60694 100644
--- a/src/ui_ng/src/app/project/project-detail/project-detail.component.ts
+++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.ts
@@ -19,7 +19,6 @@ import { Project } from '../project';
 import { SessionService } from '../../shared/session.service';
 import { ProjectService } from '../../project/project.service';
 
-import { RoleMapping } from '../../shared/shared.const';
 import {AppConfigService} from "../../app-config.service";
 
 @Component({
diff --git a/src/ui_ng/src/app/project/project-routing-resolver.service.ts b/src/ui_ng/src/app/project/project-routing-resolver.service.ts
index 1b92711f8..db83bb0d8 100644
--- a/src/ui_ng/src/app/project/project-routing-resolver.service.ts
+++ b/src/ui_ng/src/app/project/project-routing-resolver.service.ts
@@ -20,6 +20,8 @@ import { ProjectService } from './project.service';
 import { SessionService } from '../shared/session.service';
 import 'rxjs/add/operator/mergeMap';
 
+import { Roles } from '../shared/shared.const'
+
 @Injectable()
 export class ProjectRoutingResolver implements Resolve<Project> {
 
@@ -46,7 +48,7 @@ export class ProjectRoutingResolver implements Resolve<Project> {
               project.is_member = true;
               project.role_name = 'MEMBER.SYS_ADMIN';
             } else {
-              project.has_project_admin_role = (project.current_user_role_id === 1);
+              project.has_project_admin_role = (project.current_user_role_id === Roles.PROJECT_ADMIN);
               project.is_member = (project.current_user_role_id > 0);
               project.role_name = RoleInfo[project.current_user_role_id];
             }
diff --git a/src/ui_ng/src/app/shared/shared.const.ts b/src/ui_ng/src/app/shared/shared.const.ts
index 2478447e2..2fa65d081 100644
--- a/src/ui_ng/src/app/shared/shared.const.ts
+++ b/src/ui_ng/src/app/shared/shared.const.ts
@@ -83,3 +83,10 @@ export const ProjectRoles = [
   { id: 2, value: "MEMBER.DEVELOPER" },
   { id: 3, value: "MEMBER.GUEST" }
 ];
+
+export enum Roles {
+  PROJECT_ADMIN = 1,
+  DEVELOPER = 2,
+  GUEST = 3,
+  OTHER = 0,
+}
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index b6c306bba..af3c8793c 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -36,7 +36,10 @@
         "EDIT": "EDIT",
         "SWITCH": "SWITCH",
         "REPLICATE": "REPLICATE",
-        "ACTIONS": "Actions"
+        "ACTIONS": "Actions",
+        "BROWSE": "Browse",
+        "UPLOAD": "Upload",
+        "NO_FILE": "No file selected"
     },
     "BATCH": {
         "DELETED_SUCCESS": "Deleted successfully",
diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json
index 6bbcff786..dbb18db27 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -36,8 +36,10 @@
         "EDIT": "EDITAR",
         "SWITCH": "SWITCH",
         "REPLICATE": "REPLICATE",
-        "ACTIONS": "Actions"
-
+        "ACTIONS": "Actions",
+        "BROWSE": "Browse",
+        "UPLOAD": "Upload",
+        "NO_FILE": "No file selected"
     },
     "BATCH": {
         "DELETED_SUCCESS": "Deleted successfully",
diff --git a/src/ui_ng/src/i18n/lang/fr-fr-lang.json b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
index 25a76ca03..0e29e2971 100644
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
@@ -33,7 +33,10 @@
         "NO": "NON",
         "NEGATIVE": "NEGATIF",
         "COPY": "COPIER",
-        "ACTIONS": "Actions"
+        "ACTIONS": "Actions",
+        "BROWSE": "Browse",
+        "UPLOAD": "Upload",
+        "NO_FILE": "No file selected"
     },
     "TOOLTIP": {
         "EMAIL": "L'email doit être une adresse email valide comme name@example.com.",
diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
index 88686fd82..52d432a0a 100644
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@@ -36,7 +36,10 @@
         "EDIT": "编辑",
         "SWITCH": "切换",
         "REPLICATE": "复制",
-        "ACTIONS": "操作"
+        "ACTIONS": "操作",
+        "BROWSE": "选择文件",
+        "UPLOAD": "上传",
+        "NO_FILE": "未选择文件"
     },
     "BATCH": {
         "DELETED_SUCCESS": "删除成功",