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

1. Fixes #19614 2. Fixes #19617 Signed-off-by: AllForNothing <shijun.sun@broadcom.com>
2023-12-05 17:00:17 +08:00 · 2023-12-05 17:00:17 +08:00 · 469b6a495b
parent 1cbc901599
commit 469b6a495b
14 changed files with 56 additions and 34 deletions
--- 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;
  }
 }
--- 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'">{{
--- 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;
+}
--- 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>
--- 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;
 }
--- 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 = [];
--- 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",
--- 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",
--- 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",
--- 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",
--- 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",
--- 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",
--- 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": "编辑",
--- 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": "編輯",