fix(console): show warn dialog when view switched to instance (#5935)

fix: show warn dialog when changed to instance

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

@@ -13,7 +13,7 @@
         <th class="availability" mat-header-cell *matHeaderCellDef>
           <span>{{ 'IDP.AVAILABILITY' | translate }}</span>
         </th>
-        <td class="availability" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+        <td class="pointer availability" mat-cell *matCellDef="let idp">
           <i
             matTooltip="{{ 'IDP.AVAILABLE' | translate }}"
             *ngIf="isEnabled(idp) && idp.state === IDPState.IDP_STATE_ACTIVE"
@@ -29,14 +29,14 @@
 
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.NAME' | translate }}</th>
-        <td class="pointer" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+        <td class="pointer" mat-cell *matCellDef="let idp">
           <span>{{ idp?.name }}</span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="type">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.TYPE' | translate }}</th>
-        <td class="pointer" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+        <td class="pointer" mat-cell *matCellDef="let idp">
           <div [ngSwitch]="idp.type">
             <div class="idp-table-provider-type" *ngSwitchCase="ProviderType.PROVIDER_TYPE_AZURE_AD">
               <img class="idp-logo" src="./assets/images/idp/ms.svg" alt="azure ad" />
@@ -87,7 +87,7 @@
 
       <ng-container matColumnDef="state">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.STATE' | translate }}</th>
-        <td class="pointer" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+        <td class="pointer" mat-cell *matCellDef="let idp">
           <span
             class="state"
             [ngClass]="{
@@ -101,21 +101,21 @@
 
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.CREATIONDATE' | translate }}</th>
-        <td class="pointer" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+        <td class="pointer" mat-cell *matCellDef="let idp">
           <span>{{ idp.details.creationDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="changeDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.CHANGEDATE' | translate }}</th>
-        <td class="pointer" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+        <td class="pointer" mat-cell *matCellDef="let idp">
           <span>{{ idp.details.changeDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="owner">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.OWNER' | translate }}</th>
-        <td class="pointer" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+        <td class="pointer" mat-cell *matCellDef="let idp">
           {{ 'IDP.OWNERTYPES.' + idp.owner | translate }}
         </td>
       </ng-container>
@@ -140,7 +140,7 @@
               "
               mat-icon-button
               matTooltip="{{ 'IDP.SETAVAILABLE' | translate }}"
-              (click)="addIdp(idp)"
+              (click)="addIdp(idp); $event.stopPropagation()"
             >
               <i class="las la-check-circle"></i>
             </button>
@@ -160,7 +160,7 @@
               "
               mat-icon-button
               matTooltip="{{ 'IDP.SETUNAVAILABLE' | translate }}"
-              (click)="removeIdp(idp)"
+              (click)="removeIdp(idp); $event.stopPropagation()"
             >
               <i class="las la-times-circle"></i>
             </button>
@@ -185,7 +185,7 @@
               mat-icon-button
               color="warn"
               matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
-              (click)="deleteIdp(idp)"
+              (click)="deleteIdp(idp); $event.stopPropagation()"
             >
               <i class="las la-trash"></i>
             </button>
@@ -194,7 +194,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      <tr class="highlight" (click)="navigateToIDP(row)" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   </div>
 

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

@@ -2,7 +2,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -31,6 +31,8 @@ import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import { OverlayWorkflowService } from 'src/app/services/overlay/overlay-workflow.service';
+import { ContextChangedWorkflowOverlays } from 'src/app/services/overlay/workflows';
 import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
 import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
 import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
@@ -60,7 +62,13 @@ export class IdpTableComponent implements OnInit {
   public IDPStylingType: any = IDPStylingType;
   public loginPolicy!: LoginPolicy.AsObject;
 
-  constructor(public translate: TranslateService, private toast: ToastService, private dialog: MatDialog) {
+  constructor(
+    private workflowService: OverlayWorkflowService,
+    public translate: TranslateService,
+    private toast: ToastService,
+    private dialog: MatDialog,
+    private router: Router,
+  ) {
     this.selection.changed.subscribe(() => {
       this.changedSelection.emit(this.selection.selected);
     });
@@ -241,6 +249,16 @@ export class IdpTableComponent implements OnInit {
     }
   }
 
+  navigateToIDP(row: Provider.AsObject) {
+    this.router.navigate(this.routerLinkForRow(row)).then(() => {
+      if (this.serviceType === PolicyComponentServiceType.MGMT && row.owner === IDPOwnerType.IDP_OWNER_TYPE_SYSTEM) {
+        setTimeout(() => {
+          this.workflowService.startWorkflow(ContextChangedWorkflowOverlays, null);
+        }, 1000);
+      }
+    });
+  }
+
   private async getIdps(): Promise<IDPLoginPolicyLink.AsObject[]> {
     switch (this.serviceType) {
       case PolicyComponentServiceType.MGMT:

console/src/app/services/overlay/workflows.ts

@@ -66,3 +66,17 @@ export const OrgContextChangedWorkflowOverlays: CnslOverlay[] = [
     },
   },
 ];
+
+export const ContextChangedWorkflowOverlays: CnslOverlay[] = [
+  {
+    id: 'contextswitcher',
+    origin: 'orgbutton',
+    toHighlight: ['orgbutton'],
+    content: {
+      i18nText: 'OVERLAYS.SWITCHEDTOINSTANCE.TEXT',
+    },
+    requirements: {
+      permission: ['iam.read'],
+    },
+  },
+];

console/src/assets/i18n/de.json

@@ -204,6 +204,9 @@
     },
     "CONTEXTCHANGED": {
       "TEXT": "Achtung! Soeben wurde die Organisation gewechselt."
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "Soeben wurde die Ansicht auf Instanz gewechselt."
     }
   },
   "FILTER": {

console/src/assets/i18n/en.json

@@ -204,7 +204,10 @@
       "TEXT": "This navigation changes based on your selected organization above or your instance"
     },
     "CONTEXTCHANGED": {
-      "TEXT": "Attention! The organization context has changed."
+      "TEXT": "The organization context has changed."
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "The view just changed to instance!"
     }
   },
   "FILTER": {

console/src/assets/i18n/es.json

@@ -205,6 +205,9 @@
     },
     "CONTEXTCHANGED": {
       "TEXT": "¡Atención! El contexto de la organización ha cambiado."
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "¡La vista acaba de cambiar a instancia!"
     }
   },
   "FILTER": {

console/src/assets/i18n/fr.json

@@ -204,6 +204,9 @@
     },
     "CONTEXTCHANGED": {
       "TEXT": "Attention ! Le contexte de l'organisation a changé."
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "La vue vient de changer en instance !"
     }
   },
   "FILTER": {

console/src/assets/i18n/it.json

@@ -204,6 +204,9 @@
     },
     "CONTEXTCHANGED": {
       "TEXT": "Attenzione! L'organizzazione è appena stata cambiata."
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "La visualizzazione è appena stata modificata in istanza!"
     }
   },
   "FILTER": {

console/src/assets/i18n/ja.json

@@ -205,6 +205,9 @@
     },
     "CONTEXTCHANGED": {
       "TEXT": "注意！ 組織のコンテキストが変更されました。"
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "ビューがインスタンスに変更されました。"
     }
   },
   "FILTER": {

console/src/assets/i18n/pl.json

@@ -204,6 +204,9 @@
     },
     "CONTEXTCHANGED": {
       "TEXT": "Uwaga! Kontekst organizacji uległ zmianie."
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "Widok właśnie zmienił się na instancję!"
     }
   },
   "FILTER": {

console/src/assets/i18n/zh.json

@@ -204,6 +204,9 @@
     },
     "CONTEXTCHANGED": {
       "TEXT": "注意！组织环境发生了变化。"
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "视图刚刚更改为实例！"
     }
   },
   "FILTER": {