Update the style for the robot acccount ui (#19663)

1. Fixes #19614
2. Fixes #19617

Signed-off-by: AllForNothing <shijun.sun@broadcom.com>

src/portal/src/app/base/left-side-nav/project-quotas/project-quotas/project-quotas.component.scss

@@ -90,6 +90,6 @@
 
 :host::ng-deep {
   .filter-input {
-    width: 210px;
+    width: 240px;
   }
 }

src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html

@@ -136,8 +136,10 @@
             <clr-dg-column>{{
                 'ROBOT_ACCOUNT.ENABLED_STATE' | translate
             }}</clr-dg-column>
-            <clr-dg-column>System Permissions</clr-dg-column>
             <clr-dg-column>{{
+                'ROBOT_ACCOUNT.SYSTEM_PERMISSIONS' | translate
+            }}</clr-dg-column>
+            <clr-dg-column class="projects-col">{{
                 'SYSTEM_ROBOT.PROJECTS' | translate
             }}</clr-dg-column>
             <clr-dg-column [clrDgSortBy]="'creation_time'">{{

src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.scss

@@ -39,3 +39,6 @@
   margin-top: 3px;
 }
 
+.projects-col {
+  min-width: 14rem !important;
+}

src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.html

@@ -47,8 +47,11 @@
             <ng-content></ng-content>
         </span>
         <clr-dropdown-menu
+            #dropdownMenu
             class="dropdown-menu p-1"
             clrPosition="{{ dropdownPosition }}"
+            [style.position]="usedInDatagrid ? 'fixed' : 'absolute'"
+            [style.transform]="usedInDatagrid ? getTransform() : 'unset'"
             *clrIfOpen>
             <div>
                 <button
@@ -111,7 +114,9 @@
     <table class="table table-compact mt-0">
         <thead>
             <tr>
-                <th class="left">{{ 'AUDIT_LOG.RESOURCE' | translate }}</th>
+                <th class="left">
+                    {{ 'AUDIT_LOG.RESOURCE' | translate }}
+                </th>
                 <th class="left" *ngFor="let item of candidateActions">
                     {{ convertKey(item) | translate }}
                 </th>

src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.scss

@@ -16,4 +16,5 @@
 
 .select-all-for-dropdown {
   margin-bottom: 0.25rem;
+  width: fit-content;
 }

src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.ts

@@ -1,6 +1,7 @@
 import {
     AfterViewInit,
     Component,
+    DoCheck,
     ElementRef,
     EventEmitter,
     Input,
@@ -18,19 +19,12 @@ import {
 import { Access } from '../../../../../ng-swagger-gen/models/access';
 import { Permission } from '../../../../../ng-swagger-gen/models/permission';
 
-enum Position {
-    UP = 'left-bottom',
-    DOWN = 'left-top',
-}
-
 @Component({
     selector: 'robot-permissions-panel',
     templateUrl: './robot-permissions-panel.component.html',
     styleUrls: ['./robot-permissions-panel.component.scss'],
 })
-export class RobotPermissionsPanelComponent
+export class RobotPermissionsPanelComponent implements OnChanges, DoCheck {
-    implements AfterViewInit, OnChanges
-{
     modalOpen: boolean = false;
 
     @Input()
@@ -53,22 +47,28 @@ export class RobotPermissionsPanelComponent
     @Output()
     permissionsModelChange = new EventEmitter<Access[]>();
 
-    @ViewChild('dropdown')
+    @ViewChild('dropdownMenu')
-    clrDropdown: ElementRef;
+    dropdownMenu: any;
 
-    ngAfterViewInit() {
+    @ViewChild('dropdown')
-        setTimeout(() => {
+    dropdown: ElementRef;
-            if (this.clrDropdown && this.usedInDatagrid) {
+
-                if (
+    // to avoid ng check error, getTransform() should always return 'unset' before dropdownMenu appears
-                    this.clrDropdown.nativeElement.getBoundingClientRect().y <
+    dropdownMenuAppeared: boolean = false;
-                    488
+    getTransform(): string {
-                ) {
+        if (
-                    this.dropdownPosition = Position.DOWN;
+            this.dropdownMenuAppeared &&
-                } else {
+            this.dropdownMenu?.el &&
-                    this.dropdownPosition = Position.UP;
+            this.dropdown
-                }
+        ) {
-            }
+            const width = this.dropdownMenu.el.nativeElement.offsetWidth;
-        });
+            const height = this.dropdownMenu.el.nativeElement.offsetHeight;
+            const bcr = this.dropdown.nativeElement.getBoundingClientRect();
+            return `translateX(${bcr.x - width}px) translateY(${
+                bcr.y - height / 2
+            }px)`;
+        }
+        return 'unset';
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -76,6 +76,9 @@ export class RobotPermissionsPanelComponent
             this.initCandidates();
         }
     }
+    ngDoCheck() {
+        this.dropdownMenuAppeared = !!this.dropdownMenu;
+    }
 
     initCandidates() {
         this.candidateActions = [];

src/portal/src/i18n/lang/de-de-lang.json

@@ -417,7 +417,8 @@
         "BASIC_INFO": "Basic Information",
         "SELECT_PERMISSIONS": "Select Permissions",
         "SELECT_SYSTEM_PERMISSIONS": "Select System Permissions",
-        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions"
+        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions",
+        "SYSTEM_PERMISSIONS": "System Permissions"
     },
     "WEBHOOK": {
         "EDIT_BUTTON": "EDIT",

src/portal/src/i18n/lang/en-us-lang.json

@@ -417,7 +417,8 @@
         "BASIC_INFO": "Basic Information",
         "SELECT_PERMISSIONS": "Select Permissions",
         "SELECT_SYSTEM_PERMISSIONS": "Select System Permissions",
-        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions"
+        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions",
+        "SYSTEM_PERMISSIONS": "System Permissions"
     },
     "WEBHOOK": {
         "EDIT_BUTTON": "EDIT",

src/portal/src/i18n/lang/es-es-lang.json

@@ -418,7 +418,8 @@
         "BASIC_INFO": "Basic Information",
         "SELECT_PERMISSIONS": "Select Permissions",
         "SELECT_SYSTEM_PERMISSIONS": "Select System Permissions",
-        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions"
+        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions",
+        "SYSTEM_PERMISSIONS": "System Permissions"
     },
     "WEBHOOK": {
         "EDIT_BUTTON": "EDIT",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -409,7 +409,8 @@
         "BASIC_INFO": "Basic Information",
         "SELECT_PERMISSIONS": "Select Permissions",
         "SELECT_SYSTEM_PERMISSIONS": "Select System Permissions",
-        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions"
+        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions",
+        "SYSTEM_PERMISSIONS": "System Permissions"
     },
     "WEBHOOK": {
         "EDIT_BUTTON": "Éditer",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -415,7 +415,8 @@
         "BASIC_INFO": "Basic Information",
         "SELECT_PERMISSIONS": "Select Permissions",
         "SELECT_SYSTEM_PERMISSIONS": "Select System Permissions",
-        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions"
+        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions",
+        "SYSTEM_PERMISSIONS": "System Permissions"
     },
     "GROUP": {
         "GROUP": "Grupo",

src/portal/src/i18n/lang/tr-tr-lang.json

@@ -417,7 +417,8 @@
         "BASIC_INFO": "Basic Information",
         "SELECT_PERMISSIONS": "Select Permissions",
         "SELECT_SYSTEM_PERMISSIONS": "Select System Permissions",
-        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions"
+        "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions",
+        "SYSTEM_PERMISSIONS": "System Permissions"
     },
     "WEBHOOK": {
         "EDIT_BUTTON": "DÜZENLE",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -416,7 +416,8 @@
         "BASIC_INFO": "基本信息",
         "SELECT_PERMISSIONS": "选择权限",
         "SELECT_SYSTEM_PERMISSIONS": "选择系统权限",
-        "SELECT_PROJECT_PERMISSIONS": "选择项目权限"
+        "SELECT_PROJECT_PERMISSIONS": "选择项目权限",
+        "SYSTEM_PERMISSIONS": "系统权限"
     },
     "WEBHOOK": {
         "EDIT_BUTTON": "编辑",

src/portal/src/i18n/lang/zh-tw-lang.json

@@ -416,7 +416,8 @@
    "BASIC_INFO": "Basic Information",
    "SELECT_PERMISSIONS": "Select Permissions",
    "SELECT_SYSTEM_PERMISSIONS": "Select System Permissions",
-   "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions"
+   "SELECT_PROJECT_PERMISSIONS": "Select Project Permissions",
+   "SYSTEM_PERMISSIONS": "System Permissions"
   },
   "WEBHOOK": {
     "EDIT_BUTTON": "編輯",