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

fix: show warn dialog when changed to instance
2025-01-06 12:47:37 +00:00 · 2023-05-26 14:27:56 +02:00 · 2023-05-26 14:27:56 +02:00 · 6c90f088d2
commit 6c90f088d2
parent 9aed0319c5
11 changed files with 70 additions and 14 deletions
--- a/console/src/app/modules/idp-table/idp-table.component.html
+++ b/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>

--- a/console/src/app/modules/idp-table/idp-table.component.ts
+++ b/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:
--- a/console/src/app/services/overlay/workflows.ts
+++ b/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'],
+    },
+  },
+];
--- a/console/src/assets/i18n/de.json
+++ b/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": {
--- a/console/src/assets/i18n/en.json
+++ b/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": {
--- a/console/src/assets/i18n/es.json
+++ b/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": {
--- a/console/src/assets/i18n/fr.json
+++ b/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": {
--- a/console/src/assets/i18n/it.json
+++ b/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": {
--- a/console/src/assets/i18n/ja.json
+++ b/console/src/assets/i18n/ja.json
@ -205,6 +205,9 @@
    },
    "CONTEXTCHANGED": {
      "TEXT": "注意！ 組織のコンテキストが変更されました。"
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "ビューがインスタンスに変更されました。"
    }
  },
  "FILTER": {
--- a/console/src/assets/i18n/pl.json
+++ b/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": {
--- a/console/src/assets/i18n/zh.json
+++ b/console/src/assets/i18n/zh.json
@ -204,6 +204,9 @@
    },
    "CONTEXTCHANGED": {
      "TEXT": "注意！组织环境发生了变化。"
+    },
+    "SWITCHEDTOINSTANCE": {
+      "TEXT": "视图刚刚更改为实例！"
    }
  },
  "FILTER": {