fix(console): text color shades, ui fixes, state handle restore (#3698)

* common project grant dialog, info box, label policy

* text styles, statehandler fix

* dialog, btn alignment, i18n

* search-user theme colors

* filter formfield sizing

* redirect uris

* shortcut layout

* settings grid type rest, shortcuts linking

* login policy, reset button consistency, metadata

* permission checks

console/src/app/modules/shortcuts/shortcuts.component.html

@@ -1,99 +1,132 @@
 <div cdkDropListGroup>
   <div class="shortcut-container">
     <div class="shortcut-title-container">
-      <h2>{{'HOME.SHORTCUTS.SHORTCUTS' | translate}}</h2>
-      <button [matTooltip]="(editState ? 'ACTIONS.CLOSE' : 'ACTIONS.EDIT') | translate" class="shortcut-btn"
-        (click)="editState = !editState" mat-icon-button>
-        <i *ngIf="!editState" class=" las la-pen"></i>
-        <mat-icon *ngIf="editState">close</mat-icon>
+      <h2>{{ 'HOME.SHORTCUTS.SHORTCUTS' | translate }}</h2>
+      <button
+        [matTooltip]="(editState ? 'ACTIONS.SAVE' : 'ACTIONS.EDIT') | translate"
+        class="shortcut-btn"
+        (click)="editState = !editState"
+        mat-icon-button
+      >
+        <i *ngIf="!editState" class="las la-pen"></i>
+        <i *ngIf="editState" class="las la-check"></i>
       </button>
-      <button matTooltip="{{'ACTIONS.RESETDEFAULT' | translate}}" (click)="reset()" *ngIf="editState" mat-icon-button>
+      <button matTooltip="{{ 'ACTIONS.RESETDEFAULT' | translate }}" (click)="reset()" *ngIf="editState" mat-icon-button>
         <i *ngIf="editState" class="las la-undo-alt"></i>
       </button>
     </div>
 
     <div class="shortcut-list-row">
       <div cdkDropList [cdkDropListData]="main" class="shortcut-list" (cdkDropListDropped)="drop($event, 'main')">
-        <p *ngIf="editState" class="shortcut-desc">{{'HOME.SHORTCUTS.REORDER' | translate}}</p>
+        <p *ngIf="editState" class="shortcut-desc cnsl-secondary-text">{{ 'HOME.SHORTCUTS.REORDER' | translate }}</p>
         <ng-container *ngFor="let shortcut of main">
           <ng-template cnslHasRole [hasRole]="shortcut.withRole">
-            <a [routerLink]="!editState ? shortcut.routerLink : null" class="shortcut-box"
-              [ngClass]="{'edit-state': editState && !shortcut.disabled, 'disabled': editState && shortcut.disabled}"
-              cdkDrag [cdkDragDisabled]="shortcut.disabled || !editState">
-              <div class="shortcuts-avatar {{shortcut.color}}">
+            <a
+              [routerLink]="!editState ? shortcut.routerLink : null"
+              [queryParams]="shortcut.queryParams ? shortcut.queryParams : null"
+              class="shortcut-box"
+              [ngClass]="{ 'edit-state': editState && !shortcut.disabled, disabled: editState && shortcut.disabled }"
+              cdkDrag
+              [cdkDragDisabled]="shortcut.disabled || !editState"
+            >
+              <div class="shortcuts-avatar {{ shortcut.color }}">
                 <mat-icon *ngIf="shortcut.svgIcon" class="icon" [svgIcon]="shortcut.svgIcon"></mat-icon>
-                <i *ngIf="shortcut.icon" class="icon {{shortcut.icon}}"></i>
-                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{shortcut.label}}</span>
+                <i *ngIf="shortcut.icon" class="icon {{ shortcut.icon }}"></i>
+                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{ shortcut.label }}</span>
               </div>
               <div class="shortcut-col">
-                <span *ngIf="shortcut.i18nTitle">{{shortcut.i18nTitle | translate}}</span>
-                <span *ngIf="shortcut.title">{{shortcut.title}}</span>
+                <span *ngIf="shortcut.i18nTitle">{{ shortcut.i18nTitle | translate }}</span>
+                <span *ngIf="shortcut.title">{{ shortcut.title }}</span>
               </div>
 
               <span class="fill-space"></span>
 
-              <div class="shortcut-state-dot" *ngIf="shortcut && shortcut.state !== undefined"
-                matTooltip="{{'PROJECT.STATE.'+shortcut.state | translate}}"
-                [ngClass]="{'active': shortcut.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': shortcut.state === ProjectState.PROJECT_STATE_INACTIVE }">
-              </div>
+              <div
+                class="shortcut-state-dot"
+                *ngIf="shortcut && shortcut.state !== undefined"
+                matTooltip="{{ 'PROJECT.STATE.' + shortcut.state | translate }}"
+                [ngClass]="{
+                  active: shortcut.state === ProjectState.PROJECT_STATE_ACTIVE,
+                  inactive: shortcut.state === ProjectState.PROJECT_STATE_INACTIVE
+                }"
+              ></div>
             </a>
           </ng-template>
         </ng-container>
       </div>
 
-      <div cdkDropList [cdkDropListData]="secondary" class="shortcut-list"
-        (cdkDropListDropped)="drop($event, 'secondary')">
-        <p *ngIf="editState" class="shortcut-desc">{{'HOME.SHORTCUTS.REORDER' | translate}}</p>
+      <div cdkDropList [cdkDropListData]="secondary" class="shortcut-list" (cdkDropListDropped)="drop($event, 'secondary')">
+        <p *ngIf="editState" class="shortcut-desc cnsl-secondary-text">{{ 'HOME.SHORTCUTS.REORDER' | translate }}</p>
         <ng-container *ngFor="let shortcut of secondary">
           <ng-template cnslHasRole [hasRole]="shortcut.withRole">
-            <a [routerLink]="!editState ? shortcut.routerLink : null" class="shortcut-box"
-              [ngClass]="{'edit-state': editState  && !shortcut.disabled}" cdkDrag
-              [cdkDragDisabled]="shortcut.disabled || !editState">
-              <div class="shortcuts-avatar {{shortcut.color}}">
+            <a
+              [routerLink]="!editState ? shortcut.routerLink : null"
+              [queryParams]="shortcut.queryParams ? shortcut.queryParams : null"
+              class="shortcut-box"
+              [ngClass]="{ 'edit-state': editState && !shortcut.disabled }"
+              cdkDrag
+              [cdkDragDisabled]="shortcut.disabled || !editState"
+            >
+              <div class="shortcuts-avatar {{ shortcut.color }}">
                 <mat-icon *ngIf="shortcut.svgIcon" class="icon" [svgIcon]="shortcut.svgIcon"></mat-icon>
-                <i *ngIf="shortcut.icon" class="icon {{shortcut.icon}}"></i>
-                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{shortcut.label}}</span>
+                <i *ngIf="shortcut.icon" class="icon {{ shortcut.icon }}"></i>
+                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{ shortcut.label }}</span>
               </div>
               <div class="shortcut-col">
-                <span *ngIf="shortcut.i18nTitle">{{shortcut.i18nTitle | translate}}</span>
-                <span *ngIf="shortcut.title">{{shortcut.title}}</span>
+                <span *ngIf="shortcut.i18nTitle">{{ shortcut.i18nTitle | translate }}</span>
+                <span *ngIf="shortcut.title">{{ shortcut.title }}</span>
               </div>
 
               <span class="fill-space"></span>
 
-              <div class="shortcut-state-dot" *ngIf="shortcut && shortcut.state !== undefined"
-                matTooltip="{{'PROJECT.STATE.'+shortcut.state | translate}}"
-                [ngClass]="{'active': shortcut.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': shortcut.state === ProjectState.PROJECT_STATE_INACTIVE }">
-              </div>
+              <div
+                class="shortcut-state-dot"
+                *ngIf="shortcut && shortcut.state !== undefined"
+                matTooltip="{{ 'PROJECT.STATE.' + shortcut.state | translate }}"
+                [ngClass]="{
+                  active: shortcut.state === ProjectState.PROJECT_STATE_ACTIVE,
+                  inactive: shortcut.state === ProjectState.PROJECT_STATE_INACTIVE
+                }"
+              ></div>
             </a>
           </ng-template>
         </ng-container>
       </div>
 
       <div cdkDropList [cdkDropListData]="third" class="shortcut-list" (cdkDropListDropped)="drop($event, 'third')">
-        <p *ngIf="editState" class="shortcut-desc">{{'HOME.SHORTCUTS.REORDER' | translate}}</p>
+        <p *ngIf="editState" class="shortcut-desc cnsl-secondary-text">{{ 'HOME.SHORTCUTS.REORDER' | translate }}</p>
         <ng-container *ngFor="let shortcut of third">
           <ng-template cnslHasRole [hasRole]="shortcut.withRole">
-            <a [routerLink]="!editState ? shortcut.routerLink : null" class="shortcut-box"
-              [ngClass]="{'edit-state': editState  && !shortcut.disabled}" cdkDrag
-              [cdkDragDisabled]="shortcut.disabled || !editState">
-              <div class="shortcuts-avatar {{shortcut.color}}">
+            <a
+              [routerLink]="!editState ? shortcut.routerLink : null"
+              [queryParams]="shortcut.queryParams ? shortcut.queryParams : null"
+              class="shortcut-box"
+              [ngClass]="{ 'edit-state': editState && !shortcut.disabled }"
+              cdkDrag
+              [cdkDragDisabled]="shortcut.disabled || !editState"
+            >
+              <div class="shortcuts-avatar {{ shortcut.color }}">
                 <mat-icon *ngIf="shortcut.svgIcon" class="icon" [svgIcon]="shortcut.svgIcon"></mat-icon>
-                <i *ngIf="shortcut.icon" class="icon {{shortcut.icon}}"></i>
-                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{shortcut.label}}</span>
+                <i *ngIf="shortcut.icon" class="icon {{ shortcut.icon }}"></i>
+                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{ shortcut.label }}</span>
               </div>
 
               <div class="shortcut-col">
-                <span *ngIf="shortcut.i18nTitle">{{shortcut.i18nTitle | translate}}</span>
-                <span *ngIf="shortcut.title">{{shortcut.title}}</span>
+                <span *ngIf="shortcut.i18nTitle">{{ shortcut.i18nTitle | translate }}</span>
+                <span *ngIf="shortcut.title">{{ shortcut.title }}</span>
               </div>
 
               <span class="fill-space"></span>
 
-              <div class="shortcut-state-dot" *ngIf="shortcut && shortcut.state !== undefined"
-                matTooltip="{{'PROJECT.STATE.'+shortcut.state | translate}}"
-                [ngClass]="{'active': shortcut.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': shortcut.state === ProjectState.PROJECT_STATE_INACTIVE }">
-              </div>
+              <div
+                class="shortcut-state-dot"
+                *ngIf="shortcut && shortcut.state !== undefined"
+                matTooltip="{{ 'PROJECT.STATE.' + shortcut.state | translate }}"
+                [ngClass]="{
+                  active: shortcut.state === ProjectState.PROJECT_STATE_ACTIVE,
+                  inactive: shortcut.state === ProjectState.PROJECT_STATE_INACTIVE
+                }"
+              ></div>
             </a>
           </ng-template>
         </ng-container>
@@ -102,92 +135,48 @@
   </div>
 
   <div class="shortcut-container" *ngIf="editState">
-    <h2>{{'HOME.SHORTCUTS.SETTINGS' | translate}}</h2>
+    <h2>{{ 'HOME.SHORTCUTS.SETTINGS' | translate }}</h2>
 
-    <div class="shortcut-list-row">
+    <div class="available-shortcut-wrapper">
+      <p *ngIf="editState" class="shortcut-desc cnsl-secondary-text">{{ 'HOME.SHORTCUTS.REORDER' | translate }}</p>
 
-      <div cdkDropList [cdkDropListData]="allRoutes" class="shortcut-list" (cdkDropListDropped)="drop($event, 'main')">
-        <p *ngIf="editState" class="shortcut-desc">{{'HOME.SHORTCUTS.REORDER' | translate}}</p>
-        <ng-container *ngFor="let shortcut of allRoutes">
+      <div
+        cdkDropList
+        [cdkDropListData]="allAvailableShortcuts"
+        class="available-shortcut-list"
+        (cdkDropListDropped)="drop($event, 'main')"
+      >
+        <ng-container *ngFor="let shortcut of allAvailableShortcuts">
           <ng-template cnslHasRole [hasRole]="shortcut.withRole">
-            <div class="shortcut-box"
-              [ngClass]="{'edit-state': editState && !shortcut.disabled, 'disabled': editState && shortcut.disabled}"
-              cdkDrag [cdkDragDisabled]="shortcut.disabled">
-              <div class="shortcuts-avatar {{shortcut.color}}">
+            <div
+              class="shortcut-box"
+              [ngClass]="{ 'edit-state': editState && !shortcut.disabled, disabled: editState && shortcut.disabled }"
+              cdkDrag
+              [cdkDragDisabled]="shortcut.disabled"
+            >
+              <div class="shortcuts-avatar {{ shortcut.color }}">
                 <mat-icon *ngIf="shortcut.svgIcon" class="icon" [svgIcon]="shortcut.svgIcon"></mat-icon>
-                <i *ngIf="shortcut.icon" class="icon {{shortcut.icon}}"></i>
-                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{shortcut.label}}</span>
+                <i *ngIf="shortcut.icon" class="icon {{ shortcut.icon }}"></i>
+                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{ shortcut.label }}</span>
               </div>
               <div class="shortcut-col">
-                <span *ngIf="shortcut.i18nTitle">{{shortcut.i18nTitle | translate}}</span>
-                <span *ngIf="shortcut.title">{{shortcut.title}}</span>
-                <span class="shortcut-item-desc cnsl-secondary-text" *ngIf="shortcut.i18nDesc">{{shortcut.i18nDesc |
-                  translate}}</span>
-                <span class="shortcut-item-desc cnsl-secondary-text" *ngIf="shortcut.desc">{{shortcut.desc}}</span>
+                <span *ngIf="shortcut.i18nTitle">{{ shortcut.i18nTitle | translate }}</span>
+                <span *ngIf="shortcut.title">{{ shortcut.title }}</span>
+                <span class="shortcut-item-desc cnsl-secondary-text" *ngIf="shortcut.i18nDesc">{{
+                  shortcut.i18nDesc | translate
+                }}</span>
+                <span class="shortcut-item-desc cnsl-secondary-text" *ngIf="shortcut.desc">{{ shortcut.desc }}</span>
               </div>
               <span class="fill-space"></span>
-              <div class="shortcut-state-dot" *ngIf="shortcut && shortcut.state !== undefined"
-                matTooltip="{{'PROJECT.STATE.'+shortcut.state | translate}}"
-                [ngClass]="{'active': shortcut.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': shortcut.state === ProjectState.PROJECT_STATE_INACTIVE }">
-              </div>
-            </div>
-          </ng-template>
-        </ng-container>
-      </div>
-
-      <div cdkDropList [cdkDropListData]="allPolicies" class="shortcut-list"
-        (cdkDropListDropped)="drop($event, 'secondary')">
-        <p *ngIf="editState" class="shortcut-desc">{{'HOME.SHORTCUTS.REORDER' | translate}}</p>
-        <ng-container *ngFor="let shortcut of allPolicies">
-          <ng-template cnslHasRole [hasRole]="shortcut.withRole">
-            <div class="shortcut-box" [ngClass]="{'edit-state': editState  && !shortcut.disabled}" cdkDrag
-              [cdkDragDisabled]="shortcut.disabled">
-              <div class="shortcuts-avatar {{shortcut.color}}">
-                <mat-icon *ngIf="shortcut.svgIcon" class="icon" [svgIcon]="shortcut.svgIcon"></mat-icon>
-                <i *ngIf="shortcut.icon" class="icon {{shortcut.icon}}"></i>
-                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{shortcut.label}}</span>
-              </div>
-              <div class="shortcut-col">
-                <span *ngIf="shortcut.i18nTitle">{{shortcut.i18nTitle | translate}}</span>
-                <span *ngIf="shortcut.title">{{shortcut.title}}</span>
-                <span class="shortcut-item-desc cnsl-secondary-text" *ngIf="shortcut.i18nDesc">{{shortcut.i18nDesc |
-                  translate}}</span>
-                <span class="shortcut-item-desc cnsl-secondary-text" *ngIf="shortcut.desc">{{shortcut.desc}}</span>
-              </div>
-              <span class="fill-space"></span>
-              <div class="shortcut-state-dot" *ngIf="shortcut && shortcut.state !== undefined"
-                matTooltip="{{'PROJECT.STATE.'+shortcut.state | translate}}"
-                [ngClass]="{'active': shortcut.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': shortcut.state === ProjectState.PROJECT_STATE_INACTIVE }">
-              </div>
-            </div>
-          </ng-template>
-        </ng-container>
-      </div>
-
-      <div cdkDropList [cdkDropListData]="allProjects" class="shortcut-list"
-        (cdkDropListDropped)="drop($event, 'third')">
-        <p *ngIf="editState" class="shortcut-desc">{{'HOME.SHORTCUTS.REORDER' | translate}}</p>
-        <ng-container *ngFor="let shortcut of allProjects">
-          <ng-template cnslHasRole [hasRole]="shortcut.withRole">
-            <div class="shortcut-box" [ngClass]="{'edit-state': editState  && !shortcut.disabled}" cdkDrag
-              [cdkDragDisabled]="shortcut.disabled">
-              <div class="shortcuts-avatar {{shortcut.color}}">
-                <mat-icon *ngIf="shortcut.svgIcon" class="icon" [svgIcon]="shortcut.svgIcon"></mat-icon>
-                <i *ngIf="shortcut.icon" class="icon {{shortcut.icon}}"></i>
-                <span *ngIf="shortcut.label" class="shortcuts-avatar-label">{{shortcut.label}}</span>
-              </div>
-              <div class="shortcut-col">
-                <span *ngIf="shortcut.i18nTitle">{{shortcut.i18nTitle | translate}}</span>
-                <span *ngIf="shortcut.title">{{shortcut.title}}</span>
-                <span class="shortcut-item-desc cnsl-secondary-text" *ngIf="shortcut.i18nDesc">{{shortcut.i18nDesc |
-                  translate}}</span>
-                <span class="shortcut-item-desc cnsl-secondary-text" *ngIf="shortcut.desc">{{shortcut.desc}}</span>
-              </div>
-              <span class="fill-space"></span>
-              <div class="shortcut-state-dot" *ngIf="shortcut && shortcut.state !== undefined"
-                matTooltip="{{'PROJECT.STATE.'+shortcut.state | translate}}"
-                [ngClass]="{'active': shortcut.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': shortcut.state === ProjectState.PROJECT_STATE_INACTIVE }">
-              </div>
+              <div
+                class="shortcut-state-dot"
+                *ngIf="shortcut && shortcut.state !== undefined"
+                matTooltip="{{ 'PROJECT.STATE.' + shortcut.state | translate }}"
+                [ngClass]="{
+                  active: shortcut.state === ProjectState.PROJECT_STATE_ACTIVE,
+                  inactive: shortcut.state === ProjectState.PROJECT_STATE_INACTIVE
+                }"
+              ></div>
             </div>
           </ng-template>
         </ng-container>
@@ -207,4 +196,4 @@
       <span *ngIf="shortcut.title">{{shortcut.title}}</span>
     </div>
   </ng-template>
-</ng-template> -->
+</ng-template> -->

console/src/app/modules/shortcuts/shortcuts.component.scss

@@ -62,7 +62,6 @@
   .shortcut-desc {
     align-self: center;
     font-size: 14px;
-    color: var(--grey);
     margin-top: 0;
     text-align: center;
   }
@@ -89,7 +88,6 @@
     .shortcut-desc {
       align-self: center;
       font-size: 14px;
-      color: var(--grey);
       margin-top: 0;
       text-align: center;
     }
@@ -209,6 +207,30 @@
     }
   }
 
+  .available-shortcut-wrapper {
+    border: 1px solid $border-color;
+    border-radius: 1rem;
+    padding: 1rem;
+
+    .available-shortcut-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-gap: 1rem;
+
+      @media only screen and (min-width: 800px) {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      @media only screen and (min-width: 1200px) {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      .shortcut-box {
+        margin: 0;
+      }
+    }
+  }
+
   .cdk-drag-preview {
     box-sizing: border-box;
     border-radius: 1rem;

console/src/app/modules/shortcuts/shortcuts.component.ts

@@ -17,7 +17,8 @@ export interface ShortcutItem {
   i18nTitle?: string;
   i18nDesc?: string;
   routerLink: any;
-  withRole: string[];
+  queryParams?: any;
+  withRole?: string[];
   icon?: string;
   label?: string;
   svgIcon?: string;
@@ -138,8 +139,9 @@ export class ShortcutsComponent implements OnDestroy {
             type: ShortcutType.POLICY,
             i18nTitle: p.i18nTitle,
             i18nDesc: p.i18nDesc,
-            routerLink: p.orgRouterLink,
-            withRole: p.orgWithRole,
+            routerLink: p.orgRouterLink ?? p.iamRouterLink,
+            queryParams: p.queryParams,
+            withRole: p.orgWithRole ?? p.iamWithRole,
             icon: p.icon ?? '',
             svgIcon: p.svgIcon ?? '',
             color: p.color ?? '',
@@ -176,10 +178,10 @@ export class ShortcutsComponent implements OnDestroy {
       } else {
         switch (listName) {
           case 'main':
-            this.main = [PROFILE_SHORTCUT, CREATE_ORG, CREATE_PROJECT, CREATE_USER];
+            this.main = [PROFILE_SHORTCUT /* CREATE_ORG, CREATE_PROJECT, CREATE_USER */];
             break;
           case 'secondary':
-            this.secondary = [];
+            this.secondary = [CREATE_ORG, CREATE_PROJECT, CREATE_USER];
             // [LOGIN_POLICY, PRIVATELABEL_POLICY].map((p) => {
             //   const policy: string = {
             //     i18nTitle: p.i18nTitle,
@@ -194,7 +196,7 @@ export class ShortcutsComponent implements OnDestroy {
             // });
             break;
           case 'third':
-            this.third = [];
+            this.third = this.ALL_SHORTCUTS.filter((item) => item.i18nTitle === 'SETTINGS.GROUPS.APPEARANCE');
             // [LOGIN_TEXTS_POLICY, MESSAGE_TEXTS_POLICY].map((p) => {
             //   const policy: ShortcutItem = {
             //     i18nTitle: p.i18nTitle,
@@ -276,4 +278,8 @@ export class ShortcutsComponent implements OnDestroy {
   public get allProjects(): ShortcutItem[] {
     return this.all.filter((s) => s.type === ShortcutType.PROJECT);
   }
+
+  public get allAvailableShortcuts(): ShortcutItem[] {
+    return [...this.allRoutes, ...this.allPolicies, ...this.allProjects];
+  }
 }