Add full permissions for the robot account (#19507)

1.Fixes #19353 Signed-off-by: AllForNothing <[email protected]>
goharbor · Nov 9, 2023 · b7116ff · b7116ff
1 parent 5c02fd8
commit b7116ff
Show file tree

Hide file tree

Showing 36 changed files with 1,521 additions and 1,211 deletions.
diff --git a/...se/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.html b/...se/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.html
@@ -1,53 +1,22 @@
-<clr-datagrid [clrDgPreserveSelection]="true" [(clrDgSelected)]="selectedRow">
-    <clr-dg-action-bar>
-        <clr-dropdown [clrCloseMenuOnItemClick]="false">
-            <button
-                [disabled]="coverAll"
-                class="btn btn-secondary btn-sm"
-                clrDropdownTrigger>
+<clr-datagrid
+    [clrDgPreserveSelection]="true"
+    [(clrDgSelected)]="selectedRow"
+    [clrDgLoading]="loadingData"
+    class="datagrid-compact">
+    <clr-dg-action-bar class="action-bar">
+        <robot-permissions-panel
+            [mode]="PermissionSelectPanelModes.DROPDOWN"
+            [(permissionsModel)]="initialAccess"
+            (permissionsModelChange)="resetAccess(initialAccess)"
+            [candidatePermissions]="robotMetadata?.project">
+            <button class="btn btn-secondary btn-sm m-0">
                 {{ 'SYSTEM_ROBOT.RESET_PERMISSION' | translate }}
-                <clr-icon shape="caret down"></clr-icon>
+                <clr-icon size="12" 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 ml-20px"
-                        (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
-                    >
-                </div>
-            </clr-dropdown-menu>
-        </clr-dropdown>
+        </robot-permissions-panel>
         <button
             (click)="selectAllOrUnselectAll()"
-            [disabled]="coverAll"
-            class="btn btn-secondary btn-sm ml-1">
+            class="btn btn-secondary btn-sm m-0 ml-1">
             <span *ngIf="showSelectAll">{{
                 'SYSTEM_ROBOT.SELECT_ALL' | translate
             }}</span>
@@ -67,9 +36,7 @@
     <clr-dg-column>{{
         'SYSTEM_ROBOT.PERMISSION_COLUMN' | translate
     }}</clr-dg-column>
-    <clr-dg-row
-        *clrDgItems="let p of projects; let projectIndex = index"
-        [clrDgItem]="p">
+    <clr-dg-row *clrDgItems="let p of projects" [clrDgItem]="p">
         <clr-dg-cell>
             <a href="javascript:void(0)" [routerLink]="getLink(p.project_id)">{{
                 p.name
@@ -79,70 +46,25 @@
             p.creation_time | harborDatetime : 'short'
         }}</clr-dg-cell>
         <clr-dg-cell>
-            <div class="permissions">
-                <clr-dropdown [clrCloseMenuOnItemClick]="false">
-                    <button
-                        [disabled]="coverAll"
-                        class="btn btn-link"
-                        clrDropdownTrigger>
-                        {{ getPermissions(p.permissions[0].access) }}
-                        {{ 'SYSTEM_ROBOT.PERMISSIONS' | translate }}
-                        <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 ml-20px"
-                                (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
-                            >
-                        </div>
-                    </clr-dropdown-menu>
-                </clr-dropdown>
-            </div>
+            <robot-permissions-panel
+                [usedInDatagrid]="true"
+                [mode]="PermissionSelectPanelModes.DROPDOWN"
+                [(permissionsModel)]="selectedProjectPermissionMap[p.name]"
+                [candidatePermissions]="robotMetadata?.project">
+                <button class="btn btn-link btn-sm m-0 p-0">
+                    {{ selectedProjectPermissionMap[p.name]?.length || 0 }}
+                    {{ 'SYSTEM_ROBOT.PERMISSIONS' | translate }}
+                    <clr-icon shape="caret down"></clr-icon>
+                </button>
+            </robot-permissions-panel>
         </clr-dg-cell>
     </clr-dg-row>
     <clr-dg-footer>
         <clr-dg-pagination
             #pagination
             [(clrDgPage)]="currentPage"
             [clrDgPageSize]="pageSize">
-            <clr-dg-page-size [clrPageSizeOptions]="[5, 15, 25]">{{
+            <clr-dg-page-size [clrPageSizeOptions]="[5, 10]">{{
                 'PAGINATION.PAGE_SIZE' | translate
             }}</clr-dg-page-size>
             <span

diff --git a/...se/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.scss b/...se/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.scss
@@ -1,10 +1,9 @@
-.check {
-    margin-right: 5px;
-    color: green;
+.ml-20px {
+    margin-left: 20px;
 }
 
-.permissions {
-    height: 16px;
+.action-bar {
+    margin-top: 0;
     display: flex;
     align-items: center;
 }
@@ -13,16 +12,12 @@
     position: inherit;
 }
 
-.dropdown-menu {
-    overflow-y: auto;
-}
-
-.dropdown-item {
-    min-height: 20px;
-    display: flex;
-    align-items: center;
+:host::ng-deep.datagrid-spinner {
+    top: 5rem !important;
+    width: 62% !important;
+    height: 32% !important;
 }
 
-.ml-20px {
-    margin-left: 20px;
+:host::ng-deep.spinner {
+    left: 14rem !important;
 }
diff --git a/...left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.spec.ts b/...left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.spec.ts
@@ -1,7 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ListAllProjectsComponent } from './list-all-projects.component';
-import { clone } from '../../../../shared/units/utils';
-import { INITIAL_ACCESSES } from '../system-robot-util';
 import { Project } from '../../../../../../ng-swagger-gen/models/project';
 import { SharedTestingModule } from '../../../../shared/shared.module';
 
@@ -30,16 +28,14 @@ describe('ListAllProjectsComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(ListAllProjectsComponent);
         component = fixture.componentInstance;
-        component.defaultAccesses = clone(INITIAL_ACCESSES);
-        component.cachedAllProjects = [project1, project2, project3];
-        component.init(false);
         fixture.detectChanges();
     });
 
     it('should create', () => {
         expect(component).toBeTruthy();
     });
     it('should render list', async () => {
+        component.projects = [project1, project2, project3];
         fixture.detectChanges();
         await fixture.whenStable();
         const rows = fixture.nativeElement.querySelectorAll('clr-dg-row');