From d5a4f0b8bccc6f696c9c76bec725311ecd23b131 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E4=B8=96=E5=86=9B?=
 <30999793+AllForNothing@users.noreply.github.com>
Date: Mon, 8 Nov 2021 14:38:26 +0800
Subject: [PATCH] Add select-all and unselect-all for robot permissions
 (#15962)

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../list-all-projects.component.html          | 12 +++++++++++
 .../list-all-projects.component.ts            | 19 ++++++++++++++++++
 .../new-robot/new-robot.component.html        |  6 ++++++
 .../new-robot/new-robot.component.ts          | 20 +++++++++++++++++++
 .../add-robot/add-robot.component.html        |  6 ++++++
 .../add-robot/add-robot.component.ts          | 19 ++++++++++++++++++
 src/portal/src/css/common.scss                |  4 ++++
 src/portal/src/css/dark-theme.scss            |  1 +
 src/portal/src/css/light-theme.scss           |  1 +
 9 files changed, 88 insertions(+)

diff --git a/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.html b/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.html
index 257cf2c06..ac339b0cb 100644
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.html
+++ b/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.html
@@ -6,6 +6,12 @@
                 <clr-icon shape="caret down"></clr-icon>
             </button>
             <clr-dropdown-menu [style.height.px]="230" clrPosition="bottom-left" *clrIfOpen>
+                <div>
+                    <button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllPermissionOrUnselectAll(defaultAccesses);resetAccess(defaultAccesses)">
+                        <span *ngIf="isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
+                        <span *ngIf="!isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
+                    </button>
+                </div>
                 <div clrDropdownItem *ngFor="let item of defaultAccesses" (click)="chooseDefaultAccess(item)">
                     <clr-icon class="check" shape="check" [style.visibility]="item.checked ? 'visible' : 'hidden'"></clr-icon>
                     <span>{{i18nMap[item.action] | translate}} {{i18nMap[item.resource] | translate}}</span>
@@ -33,6 +39,12 @@
                         <clr-icon shape="caret down"></clr-icon>
                     </button>
                     <clr-dropdown-menu [style.height.px]="140" clrPosition="bottom-left" *clrIfOpen>
+                        <div>
+                            <button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllPermissionOrUnselectAll(p.permissions[0].access)">
+                                <span *ngIf="isSelectAll(p.permissions[0].access)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
+                                <span *ngIf="!isSelectAll(p.permissions[0].access)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
+                            </button>
+                        </div>
                         <div clrDropdownItem *ngFor="let item of p.permissions[0].access" (click)="chooseAccess(item)">
                             <clr-icon class="check" shape="check" [style.visibility]="item.checked ? 'visible' : 'hidden'"></clr-icon>
                             <span>{{i18nMap[item.action] | translate}} {{i18nMap[item.resource] | translate}}</span>
diff --git a/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.ts b/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.ts
index 21f0c88ba..a8e8f0244 100644
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.ts
+++ b/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.ts
@@ -107,4 +107,23 @@ export class ListAllProjectsComponent implements OnInit {
     }
     this.showSelectAll = !this.showSelectAll;
   }
+  isSelectAll(permissions: FrontAccess[]): boolean {
+    if (permissions?.length) {
+      return permissions.filter(item => item.checked).length < permissions.length / 2;
+    }
+    return false;
+  }
+  selectAllPermissionOrUnselectAll(permissions: FrontAccess[]) {
+    if (permissions?.length) {
+      if (this.isSelectAll(permissions)) {
+        permissions.forEach(item => {
+          item.checked = true;
+        });
+      } else {
+        permissions.forEach(item => {
+          item.checked = false;
+        });
+      }
+    }
+  }
 }
diff --git a/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.html b/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.html
index 9279f0cca..97d29ccf2 100644
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.html
+++ b/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.html
@@ -115,6 +115,12 @@
                                 <clr-icon shape="caret down"></clr-icon>
                             </button>
                             <clr-dropdown-menu class="dropdown-menu" [style.height.px]="230" clrPosition="bottom-left" *clrIfOpen>
+                                <div>
+                                    <button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllOrUnselectAll(defaultAccesses)">
+                                        <span *ngIf="isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
+                                        <span *ngIf="!isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
+                                    </button>
+                                </div>
                                 <div clrDropdownItem *ngFor="let item of defaultAccesses" (click)="chooseAccess(item)">
                                     <clr-icon class="check" shape="check" [style.visibility]="item.checked ? 'visible' : 'hidden'"></clr-icon>
                                     <span>{{i18nMap[item.action] | translate}} {{i18nMap[item.resource] | translate}}</span>
diff --git a/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.ts b/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.ts
index 3eda08316..d331b6eeb 100644
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.ts
+++ b/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.ts
@@ -457,4 +457,24 @@ export class NewRobotComponent implements OnInit, OnDestroy {
   shouldShowWarning(): boolean {
     return new Date() >= this.calculateExpiresAt();
   }
+
+  isSelectAll(permissions: FrontAccess[]): boolean {
+    if (permissions?.length) {
+      return permissions.filter(item => item.checked).length < permissions.length / 2;
+    }
+    return false;
+  }
+  selectAllOrUnselectAll(permissions: FrontAccess[]) {
+    if (permissions?.length) {
+      if (this.isSelectAll(permissions)) {
+        permissions.forEach(item => {
+          item.checked = true;
+        });
+      } else {
+        permissions.forEach(item => {
+          item.checked = false;
+        });
+      }
+    }
+  }
 }
diff --git a/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.html b/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.html
index 47a6a5d20..aa153c36a 100644
--- a/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.html
+++ b/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.html
@@ -96,6 +96,12 @@
                                 <clr-icon shape="caret down"></clr-icon>
                             </button>
                             <clr-dropdown-menu class="overflow-y-scroll" [style.height.px]="230" clrPosition="bottom-left" *clrIfOpen>
+                                <div>
+                                    <button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllOrUnselectAll(defaultAccesses)">
+                                        <span *ngIf="isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
+                                        <span *ngIf="!isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
+                                    </button>
+                                </div>
                                 <div clrDropdownItem *ngFor="let item of defaultAccesses" (click)="chooseAccess(item)">
                                     <clr-icon class="check" shape="check" [style.visibility]="item.checked ? 'visible' : 'hidden'"></clr-icon>
                                     <span>{{i18nMap[item.action] | translate}} {{i18nMap[item.resource] | translate}}</span>
diff --git a/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.ts b/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.ts
index f7cd8c673..059ea9279 100644
--- a/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.ts
+++ b/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.ts
@@ -295,4 +295,23 @@ export class AddRobotComponent implements OnInit, OnDestroy {
   shouldShowWarning(): boolean {
     return new Date() >= this.calculateExpiresAt();
   }
+  isSelectAll(permissions: FrontAccess[]): boolean {
+    if (permissions?.length) {
+      return permissions.filter(item => item.checked).length < permissions.length / 2;
+    }
+    return false;
+  }
+  selectAllOrUnselectAll(permissions: FrontAccess[]) {
+    if (permissions?.length) {
+      if (this.isSelectAll(permissions)) {
+        permissions.forEach(item => {
+          item.checked = true;
+        });
+      } else {
+        permissions.forEach(item => {
+          item.checked = false;
+        });
+      }
+    }
+  }
 }
diff --git a/src/portal/src/css/common.scss b/src/portal/src/css/common.scss
index 0816d2199..18cdc1245 100644
--- a/src/portal/src/css/common.scss
+++ b/src/portal/src/css/common.scss
@@ -290,3 +290,7 @@ hbr-copy-input {
     color: $pull-command-icon-hover-color;
   }
 }
+
+.select-all-for-dropdown {
+  color: $select-all-for-dropdown-color !important;
+}
diff --git a/src/portal/src/css/dark-theme.scss b/src/portal/src/css/dark-theme.scss
index 2d716d9b5..08c779992 100644
--- a/src/portal/src/css/dark-theme.scss
+++ b/src/portal/src/css/dark-theme.scss
@@ -47,4 +47,5 @@ $input-autofill-bg-color: #1b2a32;
 $input-autofill-color: #eaedf0;
 $pull-command-icon-color: #4aaed9;
 $pull-command-icon-hover-color: #007CBB;
+$select-all-for-dropdown-color: #4aaed9;
 @import "./common.scss";
diff --git a/src/portal/src/css/light-theme.scss b/src/portal/src/css/light-theme.scss
index cea4ddff8..6e82cf01e 100644
--- a/src/portal/src/css/light-theme.scss
+++ b/src/portal/src/css/light-theme.scss
@@ -49,4 +49,5 @@ $input-autofill-bg-color: #fafafa;
 $input-autofill-color: #000;
 $pull-command-icon-color: #007CBB;
 $pull-command-icon-hover-color: #4aaed9;
+$select-all-for-dropdown-color: #0072a3;
 @import "./common.scss";