From 469b6a495b40386abec282562fd4b9abe6fd4440 Mon Sep 17 00:00:00 2001
From: Shijun Sun <30999793+AllForNothing@users.noreply.github.com>
Date: Tue, 5 Dec 2023 17:00:17 +0800
Subject: [PATCH] Update the style for the robot acccount ui (#19663)

1. Fixes #19614
2. Fixes #19617

Signed-off-by: AllForNothing <shijun.sun@broadcom.com>
---
 .../project-quotas.component.scss             |  2 +-
 .../system-robot-accounts.component.html      |  4 +-
 .../system-robot-accounts.component.scss      |  3 ++
 .../robot-permissions-panel.component.html    |  7 ++-
 .../robot-permissions-panel.component.scss    |  1 +
 .../robot-permissions-panel.component.ts      | 49 ++++++++++---------
 src/portal/src/i18n/lang/de-de-lang.json      |  3 +-
 src/portal/src/i18n/lang/en-us-lang.json      |  3 +-
 src/portal/src/i18n/lang/es-es-lang.json      |  3 +-
 src/portal/src/i18n/lang/fr-fr-lang.json      |  3 +-
 src/portal/src/i18n/lang/pt-br-lang.json      |  3 +-
 src/portal/src/i18n/lang/tr-tr-lang.json      |  3 +-
 src/portal/src/i18n/lang/zh-cn-lang.json      |  3 +-
 src/portal/src/i18n/lang/zh-tw-lang.json      |  3 +-
 14 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/portal/src/app/base/left-side-nav/project-quotas/project-quotas/project-quotas.component.scss b/src/portal/src/app/base/left-side-nav/project-quotas/project-quotas/project-quotas.component.scss
index bdc5addf7..69182574e 100644
--- a/src/portal/src/app/base/left-side-nav/project-quotas/project-quotas/project-quotas.component.scss
+++ b/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;
   }
 }
diff --git a/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html b/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html
index 2f6ba80ce..6bd715d78 100644
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html
+++ b/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'">{{
diff --git a/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.scss b/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.scss
index cb09f7136..f4395c936 100644
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.scss
+++ b/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;
+}
diff --git a/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.html b/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.html
index 537a75ce3..5734008e0 100644
--- a/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.html
+++ b/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>
diff --git a/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.scss b/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.scss
index 94e91503f..c0486014d 100644
--- a/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.scss
+++ b/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;
 }
diff --git a/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.ts b/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.ts
index e79c9e4dd..204bbda0c 100644
--- a/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.ts
+++ b/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
-    implements AfterViewInit, OnChanges
-{
+export class RobotPermissionsPanelComponent implements OnChanges, DoCheck {
     modalOpen: boolean = false;
 
     @Input()
@@ -53,22 +47,28 @@ export class RobotPermissionsPanelComponent
     @Output()
     permissionsModelChange = new EventEmitter<Access[]>();
 
-    @ViewChild('dropdown')
-    clrDropdown: ElementRef;
+    @ViewChild('dropdownMenu')
+    dropdownMenu: any;
 
-    ngAfterViewInit() {
-        setTimeout(() => {
-            if (this.clrDropdown && this.usedInDatagrid) {
-                if (
-                    this.clrDropdown.nativeElement.getBoundingClientRect().y <
-                    488
-                ) {
-                    this.dropdownPosition = Position.DOWN;
-                } else {
-                    this.dropdownPosition = Position.UP;
-                }
-            }
-        });
+    @ViewChild('dropdown')
+    dropdown: ElementRef;
+
+    // to avoid ng check error, getTransform() should always return 'unset' before dropdownMenu appears
+    dropdownMenuAppeared: boolean = false;
+    getTransform(): string {
+        if (
+            this.dropdownMenuAppeared &&
+            this.dropdownMenu?.el &&
+            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 = [];
diff --git a/src/portal/src/i18n/lang/de-de-lang.json b/src/portal/src/i18n/lang/de-de-lang.json
index 90380b501..b675aae3d 100644
--- a/src/portal/src/i18n/lang/de-de-lang.json
+++ b/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",
diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json
index 03142a54c..daa6a6447 100644
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/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",
diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json
index 36261ed53..d6f765fd5 100644
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/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",
diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json
index 2caa07108..dbf3df47c 100644
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/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",
diff --git a/src/portal/src/i18n/lang/pt-br-lang.json b/src/portal/src/i18n/lang/pt-br-lang.json
index af2369035..923171e63 100644
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/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",
diff --git a/src/portal/src/i18n/lang/tr-tr-lang.json b/src/portal/src/i18n/lang/tr-tr-lang.json
index 71fd013dc..b42ed254a 100644
--- a/src/portal/src/i18n/lang/tr-tr-lang.json
+++ b/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",
diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json
index b80848762..bfc526ec9 100644
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/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": "编辑",
diff --git a/src/portal/src/i18n/lang/zh-tw-lang.json b/src/portal/src/i18n/lang/zh-tw-lang.json
index 8618e88e8..2704ec89a 100644
--- a/src/portal/src/i18n/lang/zh-tw-lang.json
+++ b/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": "編輯",