Add select-all and unselect-all for robot permissions (#15962)

Signed-off-by: AllForNothing <sshijun@vmware.com>

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>

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;
+        });
+      }
+    }
+  }
 }

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>

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;
+        });
+      }
+    }
+  }
 }

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>

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;
+        });
+      }
+    }
+  }
 }

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;
+}

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";

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";