feat: console flat navigation, settings (#3581)

* instance routing

* instance naming

* org list

* rm isonsystem

* breadcrumb  type

* routing

* instance members

* fragment refresh org

* settings pages

* settings list, sidenav grouping, i18n

* org-settings, policy changes

* lint

* grid

* rename grid

* fallback to general

* cleanup

* general settings, remove cards

* sidenav for settings, label policy

* i18n

* header, nav backbuild

* general, project nav rehaul

* login text background adapt

* org nav anim

* org, instance settings, fix policy layout, roles

* i18n, active route for project

* lint

console/src/app/modules/idp-table/idp-table.component.html

@@ -2,7 +2,7 @@
   [loading]="loading$ | async"
   (refreshed)="refreshPage()"
   [dataSize]="dataSource.data.length"
-  [emitRefreshOnPreviousRoutes]="['/system/idp/create']"
+  [emitRefreshOnPreviousRoutes]="['/instance/idp/create']"
   [timestamp]="idpResult?.details?.viewTimestamp"
   [selection]="selection"
   [hideRefresh]="true"
@@ -14,7 +14,17 @@
       class="margin-right bg-state inactive"
       mat-stroked-button
       *ngIf="selection.hasValue()"
-      [disabled]="disabled"
+      [disabled]="
+        ([
+          serviceType === PolicyComponentServiceType.ADMIN
+            ? 'iam.idp.write'
+            : serviceType === PolicyComponentServiceType.MGMT
+            ? 'org.idp.write'
+            : ''
+        ]
+          | hasRole
+          | async) === false
+      "
     >
       {{ 'IDP.DEACTIVATE' | translate }}
     </button>
@@ -24,12 +34,38 @@
       class="bg-state active"
       mat-stroked-button
       *ngIf="selection.hasValue()"
-      [disabled]="disabled"
+      [disabled]="
+        ([
+          serviceType === PolicyComponentServiceType.ADMIN
+            ? 'iam.idp.write'
+            : serviceType === PolicyComponentServiceType.MGMT
+            ? 'org.idp.write'
+            : ''
+        ]
+          | hasRole
+          | async) === false
+      "
     >
       {{ 'IDP.ACTIVATE' | translate }}
     </button>
 
-    <a [routerLink]="createRouterLink" class="cnsl-action-button" color="primary" mat-raised-button [disabled]="disabled">
+    <a
+      [routerLink]="createRouterLink"
+      class="cnsl-action-button"
+      color="primary"
+      mat-raised-button
+      [disabled]="
+        ([
+          serviceType === PolicyComponentServiceType.ADMIN
+            ? 'iam.idp.write'
+            : serviceType === PolicyComponentServiceType.MGMT
+            ? 'org.idp.write'
+            : ''
+        ]
+          | hasRole
+          | async) === false
+      "
+    >
       <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
     </a>
   </div>
@@ -193,7 +229,22 @@
         </td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr
+        mat-header-row
+        *matHeaderRowDef="
+          ([
+            serviceType === PolicyComponentServiceType.ADMIN
+              ? 'iam.idp.write'
+              : serviceType === PolicyComponentServiceType.MGMT
+              ? 'org.idp.write'
+              : ''
+          ]
+          | hasRole
+          | async)
+            ? displayedColumnsWithActions
+            : displayedColumns
+        "
+      ></tr>
       <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   </div>

console/src/app/modules/idp-table/idp-table.component.ts

@@ -24,7 +24,6 @@ import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
 export class IdpTableComponent implements OnInit {
   @Input() public serviceType!: PolicyComponentServiceType;
   @Input() service!: AdminService | ManagementService;
-  @Input() disabled: boolean = false;
   @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
   public dataSource: MatTableDataSource<IDP.AsObject> = new MatTableDataSource<IDP.AsObject>();
   public selection: SelectionModel<IDP.AsObject> = new SelectionModel<IDP.AsObject>(true, []);
@@ -55,10 +54,6 @@ export class IdpTableComponent implements OnInit {
     if (this.serviceType === PolicyComponentServiceType.MGMT) {
       this.displayedColumns = ['availability', 'name', 'type', 'owner', 'creationDate', 'changeDate', 'state'];
     }
-
-    if (!this.disabled) {
-      this.displayedColumns.push('actions');
-    }
   }
 
   public isAllSelected(): boolean {
@@ -195,7 +190,7 @@ export class IdpTableComponent implements OnInit {
 
   public get createRouterLink(): RouterLink | any {
     if (this.service instanceof AdminService) {
-      return ['/system', 'idp', 'create'];
+      return ['/instance', 'idp', 'create'];
     } else if (this.service instanceof ManagementService) {
       return ['/org', 'idp', 'create'];
     }
@@ -207,13 +202,13 @@ export class IdpTableComponent implements OnInit {
         case PolicyComponentServiceType.MGMT:
           switch (row.owner) {
             case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
-              return ['/system', 'idp', row.id];
+              return ['/instance', 'idp', row.id];
             case IDPOwnerType.IDP_OWNER_TYPE_ORG:
               return ['/org', 'idp', row.id];
           }
           break;
         case PolicyComponentServiceType.ADMIN:
-          return ['/system', 'idp', row.id];
+          return ['/instance', 'idp', row.id];
       }
     }
   }
@@ -289,4 +284,8 @@ export class IdpTableComponent implements OnInit {
   public isEnabled(idp: IDP.AsObject): boolean {
     return this.idps.findIndex((i) => i.idpId === idp.id) > -1;
   }
+
+  public get displayedColumnsWithActions(): string[] {
+    return ['actions', ...this.displayedColumns];
+  }
 }