From 42cf09fad6e176a43cce0ae6acd2cc32e070a593 Mon Sep 17 00:00:00 2001
From: sshijun <sshijun@vmware.com>
Date: Wed, 26 Jun 2019 18:49:22 +0800
Subject: [PATCH] UI modification for creating robot account

Signed-off-by: sshijun <sshijun@vmware.com>
---
 .../add-robot/add-robot.component.html        | 237 +++++++++---------
 .../add-robot/add-robot.component.scss        |  11 +-
 .../add-robot/add-robot.component.ts          | 139 +++++-----
 .../src/app/project/robot-account/robot.ts    |   2 +-
 src/portal/src/i18n/lang/en-us-lang.json      |   8 +-
 src/portal/src/i18n/lang/es-es-lang.json      |   8 +-
 src/portal/src/i18n/lang/fr-fr-lang.json      |   9 +-
 src/portal/src/i18n/lang/pt-br-lang.json      |   8 +-
 src/portal/src/i18n/lang/zh-cn-lang.json      |   8 +-
 9 files changed, 224 insertions(+), 206 deletions(-)

diff --git a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.html b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.html
index 661a4bd5e..e9227de9a 100644
--- a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.html
+++ b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.html
@@ -1,130 +1,129 @@
 <clr-modal [(clrModalOpen)]="addRobotOpened"
-  [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
-  <h3 class="modal-title">{{'ROBOT_ACCOUNT.CREAT_ROBOT_ACCOUNT' | translate}}</h3>
-  <inline-alert #copyAlert class="modal-title"></inline-alert>
-  <div class="modal-body">
-    <form #robotForm="ngForm">
-      <section class="form-block">
-        <div class="form-group">
-          <label class="col-md-3
+           [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
+    <h3 class="modal-title">{{'ROBOT_ACCOUNT.CREAT_ROBOT_ACCOUNT' | translate}}</h3>
+    <inline-alert #copyAlert class="modal-title"></inline-alert>
+    <div class="modal-body">
+        <form #robotForm="ngForm">
+            <section class="form-block">
+                <div class="form-group padding-left-120">
+                    <label class="col-md-3
             form-group-label-override required" for="robot_name">
-            {{'ROBOT_ACCOUNT.NAME' | translate}}
-          </label>
-          <label aria-haspopup="true" role="tooltip" class="tooltip
+                        {{'ROBOT_ACCOUNT.NAME' | translate}}
+                    </label>
+                    <label aria-haspopup="true" role="tooltip" class="tooltip
             tooltip-validation
             tooltip-md tooltip-bottom-left" for="robot_name"
-            [class.invalid]="!isRobotNameValid">
-            <input type="text"
-              [(ngModel)]="robot.name"
-              size="30" class="input-width"
-              name="robot_name"
-              id="robot_name"
-              #robotName="ngModel"
-              required
-              pattern='[^" ~#$%]+'
-              maxLengthExt="255"
-              autocomplete="off"
-              (keyup)='handleValidation()'>
-            <span class="tooltip-content">
+                           [class.invalid]="!isRobotNameValid">
+                        <input type="text"
+                               [(ngModel)]="robot.name"
+                               size="30" class="input-width"
+                               name="robot_name"
+                               id="robot_name"
+                               #robotName="ngModel"
+                               required
+                               pattern='[^" ~#$%]+'
+                               maxLengthExt="255"
+                               autocomplete="off"
+                               (keyup)='handleValidation()'>
+                        <span class="tooltip-content">
               {{ nameTooltipText | translate }}
             </span>
-          </label>
-          <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
-        </div>
-        <div class="form-group">
-          <label class="form-group-label-override">{{'REPLICATION.DESCRIPTION' |
-            translate}}</label>
-          <input type="text" size="255" class="input-width"
-            [(ngModel)]="robot.description"
-            name="robot_desc" id="robot_desc">
-        </div>
-        <div class="form-group">
-          <label class="col-md-3">
-            {{'ROBOT_ACCOUNT.PERMISSIONS' | translate}}
-          </label>
-          <label class="clr-col-md-8 no-margin padding-left-0">
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [checked]="true"
-              [(ngModel)]="robot.access.isPullImage" name="isPullImage"
-              id="permission-pull" class="clr-checkbox">
-            <label for="permission-pull" class="clr-control-label">
-              {{'ROBOT_ACCOUNT.PULL_PERMISSION' | translate}}
-            </label>
-          </clr-checkbox-wrapper>
-        </label>
-        <label class="clr-col-md-8 no-margin padding-left-0">
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [checked]="true"
-              [(ngModel)]="robot.access.isPushOrPullImage" name="isPushOrPullImage"
-              id="permission-push" class="clr-checkbox">
-            <label for="permission-push" class="clr-control-label">
-              {{'ROBOT_ACCOUNT.PULL_PUSH_PERMISSION' | translate}}
-            </label>
-          </clr-checkbox-wrapper>
-        </label>
-        <label class="clr-col-md-8 no-margin padding-left-0">
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [checked]="true"
-              [(ngModel)]="robot.access.isPushChart" name="isPushChart"
-              id="permission-push-chart" class="clr-checkbox">
-            <label for="permission-push-chart" class="clr-control-label">
-              {{'ROBOT_ACCOUNT.PUSH_CHART_PERMISSION' | translate}}
-            </label>
-          </clr-checkbox-wrapper>
-        </label>
-        <label class="clr-col-md-8 no-margin padding-left-0">
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [checked]="true"
-              [(ngModel)]="robot.access.isPullChart" name="isPullChart"
-              id="permission-pull-chart" class="clr-checkbox">
-            <label for="permission-pull-chart" class="clr-control-label">
-              {{'ROBOT_ACCOUNT.PULL_CHART_PERMISSION' | translate}}
-            </label>
-          </clr-checkbox-wrapper>
-        </label>
-        </div>
-      </section>
-    </form>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL'
-      | translate}}</button>
-    <button type="button" [disabled]="shouldDisable" class="btn btn-primary"
-      (click)="onSubmit()">{{'BUTTON.SAVE'
-      | translate}}</button>
-  </div>
+                    </label>
+                    <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
+                </div>
+                <div class="form-group padding-left-120">
+                    <label class="form-group-label-override">{{'REPLICATION.DESCRIPTION' |
+                        translate}}</label>
+                    <input type="text" size="255" class="input-width"
+                           [(ngModel)]="robot.description"
+                           name="robot_desc" id="robot_desc">
+                </div>
+                <div class="clr-row">
+                    <div class="clr-col-3 permission">
+                        <label class="col-md-3">
+                            {{'ROBOT_ACCOUNT.PERMISSIONS' | translate}}
+                        </label>
+                    </div>
+                    <div class="clr-col">
+                        <div class="form-group padding-left-120">
+                            <label>{{'ROBOT_ACCOUNT.PERMISSIONS_IMAGE' | translate}}</label>
+                            <div class="radio-inline">
+                                <input type="radio" name="image-permission"
+                                       id="image-permission-pull"
+                                       value="pull"
+                                       [(ngModel)]="imagePermission">
+                                <label for="image-permission-pull">{{'ROBOT_ACCOUNT.PULL' | translate}}</label>
+                            </div>
+                            <div class="radio-inline">
+                                <input type="radio" name="image-permission"
+                                       id="image-permission-push-and-pull"
+                                       value="push-and-pull"
+                                       [(ngModel)]="imagePermission">
+                                <label for="image-permission-push-and-pull">{{'ROBOT_ACCOUNT.PUSH' | translate}}
+                                    & {{'ROBOT_ACCOUNT.PULL' | translate}}</label>
+                            </div>
+                        </div>
+                        <div class="form-group padding-left-120">
+                            <label>{{'ROBOT_ACCOUNT.PERMISSIONS_HELMCHART' | translate}}</label>
+                            <div class="checkbox-inline">
+                                <input type="checkbox" id="helm-permission-push"
+                                       [checked]="robot.access.isPushChart"
+                                       [(ngModel)]="robot.access.isPushChart"
+                                       name="helm-permission">
+                                <label for="helm-permission-push">{{'ROBOT_ACCOUNT.PUSH' | translate}}</label>
+                            </div>
+                            <div class="checkbox-inline">
+                                <input type="checkbox" id="helm-permission-pull"
+                                       [checked]="robot.access.isPullChart"
+                                       [(ngModel)]="robot.access.isPullChart"
+                                       name="helm-permission">
+                                <label for="helm-permission-pull">{{'ROBOT_ACCOUNT.PULL' | translate}}</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL'
+            | translate}}</button>
+        <button type="button" [disabled]="shouldDisable" class="btn btn-primary"
+                (click)="onSubmit()">{{'BUTTON.SAVE'
+            | translate}}</button>
+    </div>
 </clr-modal>
 <clr-modal [(clrModalOpen)]="copyToken" class="copy-token"
-  [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
-  <div class="modal-title">
-    <h3 class="modal-title">
-      <clr-icon class="alert-icon success-icon" shape="check-circle" size="50"></clr-icon>
-      {{ createSuccess | translate}}</h3>
-    <div class="alert alert-info" role="alert">
-      <div class="alert-items">
-        <div class="alert-item static">
-          <div class="alert-icon-wrapper">
-            <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
-          </div>
-          <span class="alert-text">{{'ROBOT_ACCOUNT.ALERT_TEXT' | translate}}</span>
+           [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
+    <div class="modal-title">
+        <h3 class="modal-title">
+            <clr-icon class="alert-icon success-icon" shape="check-circle" size="50"></clr-icon>
+            {{ createSuccess | translate}}</h3>
+        <div class="alert alert-info" role="alert">
+            <div class="alert-items">
+                <div class="alert-item static">
+                    <div class="alert-icon-wrapper">
+                        <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
+                    </div>
+                    <span class="alert-text">{{'ROBOT_ACCOUNT.ALERT_TEXT' | translate}}</span>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
-  <div class="modal-body">
-    <section class="form-block show-info">
-      <div class="form-group robot-name">
-        <label class="form-group-label-override">{{'ROBOT_ACCOUNT.NAME'
-          | translate}}</label>
-        <span>{{robotAccount}}</span>
-      </div>
-      <div class="form-group robot-token">
-        <label class="form-group-label-override">{{'ROBOT_ACCOUNT.TOKEN' |
-          translate}}</label>
-        <hbr-copy-input (onCopySuccess)="onCpSuccess($event)"
-          (onCopyError)="onCpError($event)" inputSize="50" headerTitle=""
-          defaultValue="{{robotToken}}" class="copy-input"></hbr-copy-input>
-      </div>
-    </section>
-  </div>
+    <div class="modal-body">
+        <section class="form-block show-info">
+            <div class="form-group robot-name">
+                <label class="form-group-label-override">{{'ROBOT_ACCOUNT.NAME'
+                    | translate}}</label>
+                <span>{{robotAccount}}</span>
+            </div>
+            <div class="form-group robot-token">
+                <label class="form-group-label-override">{{'ROBOT_ACCOUNT.TOKEN' |
+                    translate}}</label>
+                <hbr-copy-input (onCopySuccess)="onCpSuccess($event)"
+                                (onCopyError)="onCpError($event)" inputSize="50" headerTitle=""
+                                defaultValue="{{robotToken}}" class="copy-input"></hbr-copy-input>
+            </div>
+        </section>
+    </div>
 </clr-modal>
\ No newline at end of file
diff --git a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.scss b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.scss
index 5073f3322..54652aa42 100644
--- a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.scss
+++ b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.scss
@@ -3,7 +3,7 @@
 }
 
 .input-width {
-  width: 200px;
+  width: 300px;
 }
 
 .copy-token {
@@ -35,3 +35,12 @@
 .no-margin {
   margin: 0;
 }
+
+.permission{
+  padding-top: 5px;
+  color: #000000;
+}
+
+.padding-left-120{
+  padding-left: 120px;
+}
\ No newline at end of file
diff --git a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts
index 42c83ce32..d88fba5df 100644
--- a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts
+++ b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts
@@ -38,17 +38,18 @@ export class AddRobotComponent implements OnInit, OnDestroy {
   robotNameChecker: Subject<string> = new Subject<string>();
   nameTooltipText = "ROBOT_ACCOUNT.ROBOT_NAME";
   robotForm: NgForm;
+  imagePermission: string = "push-and-pull";
   @Input() projectId: number;
   @Input() projectName: string;
   @Output() create = new EventEmitter<boolean>();
   @ViewChild("robotForm") currentForm: NgForm;
   @ViewChild("copyAlert") copyAlert: InlineAlertComponent;
   constructor(
-    private robotService: RobotService,
-    private translate: TranslateService,
-    private errorHandler: ErrorHandler,
-    private cdr: ChangeDetectorRef,
-    private messageHandlerService: MessageHandlerService
+      private robotService: RobotService,
+      private translate: TranslateService,
+      private errorHandler: ErrorHandler,
+      private cdr: ChangeDetectorRef,
+      private messageHandlerService: MessageHandlerService
   ) {}
 
   ngOnInit(): void {
@@ -59,31 +60,31 @@ export class AddRobotComponent implements OnInit, OnDestroy {
         if (this.isRobotNameValid) {
           this.checkOnGoing = true;
           this.robotService
-            .listRobotAccount(this.projectId)
-            .pipe(
-              finalize(() => {
-                this.checkOnGoing = false;
-                let hnd = setInterval(() => this.cdr.markForCheck(), 100);
-                setTimeout(() => clearInterval(hnd), 2000);
-              })
-            )
-            .subscribe(
-              response => {
-                if (response && response.length) {
-                  if (
-                    response.find(target => {
-                      return target.name === "robot$" + cont.value;
-                    })
-                  ) {
-                    this.isRobotNameValid = false;
-                    this.nameTooltipText = "ROBOT_ACCOUNT.ACCOUNT_EXISTING";
+              .listRobotAccount(this.projectId)
+              .pipe(
+                  finalize(() => {
+                    this.checkOnGoing = false;
+                    let hnd = setInterval(() => this.cdr.markForCheck(), 100);
+                    setTimeout(() => clearInterval(hnd), 2000);
+                  })
+              )
+              .subscribe(
+                  response => {
+                    if (response && response.length) {
+                      if (
+                          response.find(target => {
+                            return target.name === "robot$" + cont.value;
+                          })
+                      ) {
+                        this.isRobotNameValid = false;
+                        this.nameTooltipText = "ROBOT_ACCOUNT.ACCOUNT_EXISTING";
+                      }
+                    }
+                  },
+                  error => {
+                    this.errorHandler.error(error);
                   }
-                }
-              },
-              error => {
-                this.errorHandler.error(error);
-              }
-            );
+              );
         } else {
           this.nameTooltipText = "ROBOT_ACCOUNT.ROBOT_NAME";
         }
@@ -116,49 +117,57 @@ export class AddRobotComponent implements OnInit, OnDestroy {
     if (this.isSubmitOnGoing) {
       return;
     }
+    // set value to robot.access.isPullImage and robot.access.isPushOrPullImage when submit
+    if ( this.imagePermission === 'pull' ) {
+      this.robot.access.isPullImage = true;
+      this.robot.access.isPushOrPullImage = false;
+    } else {
+      this.robot.access.isPullImage = false;
+      this.robot.access.isPushOrPullImage = true;
+    }
     this.isSubmitOnGoing = true;
     this.robotService
-      .addRobotAccount(
-        this.projectId,
-        this.robot,
-        this.projectName
-      )
-      .subscribe(
-        response => {
-          this.isSubmitOnGoing = false;
-          this.robotToken = response.token;
-          this.robotAccount = response.name;
-          this.copyToken = true;
-          this.create.emit(true);
-          this.translate
-            .get("ROBOT_ACCOUNT.CREATED_SUCCESS", { param: this.robotAccount })
-            .subscribe((res: string) => {
-              this.createSuccess = res;
-            });
-          this.addRobotOpened = false;
-        },
-        error => {
-          this.isSubmitOnGoing = false;
-          this.copyAlert.showInlineError(error);
-        }
-      );
+        .addRobotAccount(
+            this.projectId,
+            this.robot,
+            this.projectName
+        )
+        .subscribe(
+            response => {
+              this.isSubmitOnGoing = false;
+              this.robotToken = response.token;
+              this.robotAccount = response.name;
+              this.copyToken = true;
+              this.create.emit(true);
+              this.translate
+                  .get("ROBOT_ACCOUNT.CREATED_SUCCESS", { param: this.robotAccount })
+                  .subscribe((res: string) => {
+                    this.createSuccess = res;
+                  });
+              this.addRobotOpened = false;
+            },
+            error => {
+              this.isSubmitOnGoing = false;
+              this.copyAlert.showInlineError(error);
+            }
+        );
   }
 
   isValid(): boolean {
     return (
-      this.currentForm &&
-      this.currentForm.valid &&
-      !this.isSubmitOnGoing &&
-      this.isRobotNameValid &&
-      !this.checkOnGoing
+        this.currentForm &&
+        this.currentForm.valid &&
+        !this.isSubmitOnGoing &&
+        this.isRobotNameValid &&
+        !this.checkOnGoing
     );
   }
   get shouldDisable(): boolean {
     if (this.robot && this.robot.access) {
       return (
-        !this.isValid() ||
-        (!this.robot.access.isPushOrPullImage && !this.robot.access.isPullImage
-          && !this.robot.access.isPullChart && !this.robot.access.isPushChart)
+          !this.isValid() ||
+          (!this.robot.access.isPushOrPullImage && !this.robot.access.isPullImage
+              && !this.robot.access.isPullChart && !this.robot.access.isPushChart)
       );
     }
   }
@@ -180,9 +189,9 @@ export class AddRobotComponent implements OnInit, OnDestroy {
   onCpSuccess($event: any): void {
     this.copyToken = false;
     this.translate
-      .get("ROBOT_ACCOUNT.COPY_SUCCESS", { param: this.robotAccount })
-      .subscribe((res: string) => {
-        this.messageHandlerService.showSuccess(res);
-      });
+        .get("ROBOT_ACCOUNT.COPY_SUCCESS", { param: this.robotAccount })
+        .subscribe((res: string) => {
+          this.messageHandlerService.showSuccess(res);
+        });
   }
 }
diff --git a/src/portal/src/app/project/robot-account/robot.ts b/src/portal/src/app/project/robot-account/robot.ts
index 9e90ac83c..5e859430b 100644
--- a/src/portal/src/app/project/robot-account/robot.ts
+++ b/src/portal/src/app/project/robot-account/robot.ts
@@ -16,7 +16,7 @@ export class Robot {
   constructor () {
     this.access = <any>{};
     // this.access[0].action = true;
-    this.access.isPullImage = true;
+    this.access.isPullImage = false;
     this.access.isPushOrPullImage = true;
     this.access.isPushChart = false;
     this.access.isPullChart = false;
diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json
index 74f99e0e9..cc78bac82 100644
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/src/portal/src/i18n/lang/en-us-lang.json
@@ -310,10 +310,10 @@
         "ENABLE_ACCOUNT": "Enable Account",
         "DELETE": "Delete",
         "CREAT_ROBOT_ACCOUNT": "Creat Robot Account",
-        "PULL_PERMISSION": "Image pull",
-        "PULL_PUSH_PERMISSION": "Image pull / push",
-        "PUSH_CHART_PERMISSION": "Helm chart push",
-        "PULL_CHART_PERMISSION": "Helm chart pull",
+        "PERMISSIONS_IMAGE": "Image",
+        "PERMISSIONS_HELMCHART": "Helm Chart",
+        "PUSH": "Push",
+        "PULL": "Pull",
         "FILTER_PLACEHOLDER": "Filter Robot Accounts",
         "ROBOT_NAME": "Cannot contain special characters(~#$%) and maximum length should be 255 characters.",
         "ACCOUNT_EXISTING": "Robot Account is already exists.",
diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json
index b99e31c3b..d80bb3161 100644
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/src/portal/src/i18n/lang/es-es-lang.json
@@ -311,10 +311,10 @@
         "ENABLE_ACCOUNT": "Enable Account",
         "DELETE": "Delete",
         "CREAT_ROBOT_ACCOUNT": "Creat Robot Account",
-        "PULL_PERMISSION": "Image pull",
-        "PULL_PUSH_PERMISSION": "Image pull / push",
-        "PUSH_CHART_PERMISSION": "Helm chart push",
-        "PULL_CHART_PERMISSION": "Helm chart pull",
+        "PERMISSIONS_IMAGE": "Image",
+        "PERMISSIONS_HELMCHART": "Helm Chart",
+        "PUSH": "Push",
+        "PULL": "Pull",
         "FILTER_PLACEHOLDER": "Filter Robot Accounts",
         "ROBOT_NAME": "Cannot contain special characters(~#$%) and maximum length should be 255 characters.",
         "ACCOUNT_EXISTING": "Robot Account is already exists.",
diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json
index ae649aebb..d2a1249dc 100644
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/src/portal/src/i18n/lang/fr-fr-lang.json
@@ -302,10 +302,11 @@
         "ENABLE_ACCOUNT": "permettre à compte ",
         "DELETE": "Supprimer",
         "CREAT_ROBOT_ACCOUNT": "créat robot compte ",
-        "PULL_PERMISSION": "Image pull",
-        "PULL_PUSH_PERMISSION": "Image pull / push",
-        "PUSH_CHART_PERMISSION": "Helm chart push",
-        "PULL_CHART_PERMISSION": "Helm chart pull",
+        "PERMISSIONS_IMAGE": "Image",
+        "PERMISSIONS_HELMCHART": "Helm Chart",
+        "PUSH": "Push",
+        "PULL": "Pull",
+
         "FILTER_PLACEHOLDER": "Filter Robot Accounts",
         "ROBOT_NAME": "ne peut pas contenir de caractères spéciaux(~#$%) et la longueur maximale devrait être de 255 caractères.",
         "ACCOUNT_EXISTING": "le robot est existe déjà.",
diff --git a/src/portal/src/i18n/lang/pt-br-lang.json b/src/portal/src/i18n/lang/pt-br-lang.json
index a829f8f18..f4cd08ae7 100644
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/src/portal/src/i18n/lang/pt-br-lang.json
@@ -308,10 +308,10 @@
         "ENABLE_ACCOUNT": "Ativar conta",
         "DELETE": "Remover",
         "CREAT_ROBOT_ACCOUNT": "CRIA robô conta",
-        "PULL_PERMISSION": "Image pull",
-        "PULL_PUSH_PERMISSION": "Image pull / push",
-        "PUSH_CHART_PERMISSION": "Helm chart push",
-        "PULL_CHART_PERMISSION": "Helm chart pull",
+        "PERMISSIONS_IMAGE": "Image",
+        "PERMISSIONS_HELMCHART": "Helm Chart",
+        "PUSH": "Push",
+        "PULL": "Pull",
         "FILTER_PLACEHOLDER": "Filtro robot accounts",
         "ROBOT_NAME": "Não Pode conter caracteres especiais(~#$%) e comprimento máximo deveria ser 255 caracteres.",
         "ACCOUNT_EXISTING": "Robô conta já existe.",
diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json
index 0c0f71dcf..87e5bdf30 100644
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@@ -309,10 +309,10 @@
         "ENABLE_ACCOUNT": "启用账户",
         "DELETE": "删除",
         "CREAT_ROBOT_ACCOUNT": "创建机器人账户",
-        "PULL_PERMISSION": "Pull 镜像",
-        "PULL_PUSH_PERMISSION": "Push和Pull 镜像",
-        "PUSH_CHART_PERMISSION": "推送Chart",
-        "PULL_CHART_PERMISSION": "拉取Chart",
+        "PERMISSIONS_IMAGE": "镜像",
+        "PERMISSIONS_HELMCHART": "Helm Chart",
+        "PUSH": "推送",
+        "PULL": "拉取",
         "FILTER_PLACEHOLDER": "过滤机器人账户",
         "ROBOT_NAME": "不能包含特殊字符(~#$%)且长度不能超过255.",
         "ACCOUNT_EXISTING": "机器人账户已经存在.",