feat: rehauled console (#3525)

* new console

* move npm ci to angular build

* rel path for assets

* local grpc copy

* login policy, rm clear views, features rel path

* lock

Co-authored-by: Livio Amstutz <[email protected]>

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

@@ -1,110 +1,129 @@
 <cnsl-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
-    [emitRefreshOnPreviousRoutes]="['/iam/idp/create']" [timestamp]="idpResult?.details?.viewTimestamp"
-    [selection]="selection">
-    <div actions>
-        <button (click)="deactivateSelectedIdps()" matTooltip="{{'IDP.DEACTIVATE' | translate}}" class="ar-button"
-            mat-stroked-button *ngIf="selection.hasValue()" [disabled]="disabled">
-            {{'IDP.DEACTIVATE' | translate}}
-        </button>
-        <button (click)="reactivateSelectedIdps()" matTooltip="{{'IDP.ACTIVATE' | translate}}" class="ar-button"
-            mat-stroked-button *ngIf="selection.hasValue()" [disabled]="disabled">
-            {{'IDP.ACTIVATE' | translate}}
-        </button>
+  [emitRefreshOnPreviousRoutes]="['/system/idp/create']" [timestamp]="idpResult?.details?.viewTimestamp"
+  [selection]="selection" [hideRefresh]="true">
+  <div actions>
+    <button (click)="deactivateSelectedIdps()" matTooltip="{{'IDP.DEACTIVATE' | translate}}"
+      class="margin-right bg-state inactive" mat-stroked-button *ngIf="selection.hasValue()" [disabled]="disabled">
+      {{'IDP.DEACTIVATE' | translate}}
+    </button>
+    <button (click)="reactivateSelectedIdps()" matTooltip="{{'IDP.ACTIVATE' | translate}}" class="bg-state active"
+      mat-stroked-button *ngIf="selection.hasValue()" [disabled]="disabled">
+      {{'IDP.ACTIVATE' | translate}}
+    </button>
 
-        <a [routerLink]="createRouterLink" color="primary" mat-raised-button [disabled]="disabled">
-            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
-        </a>
-    </div>
+    <a [routerLink]="createRouterLink" class="cnsl-action-button" color="primary" mat-raised-button
+      [disabled]="disabled">
+      <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+    </a>
+  </div>
 
-    <div class="table-wrapper">
-        <table class="table" mat-table [dataSource]="dataSource">
-            <ng-container matColumnDef="select">
-                <th mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()"
-                        [disabled]="serviceType === PolicyComponentServiceType.MGMT">
-                    </mat-checkbox>
-                </th>
-                <td mat-cell *matCellDef="let idp">
-                    <mat-checkbox color="primary" (click)="$event.stopPropagation()" class="chbox"
-                        [disabled]="serviceType === PolicyComponentServiceType.MGMT && idp?.owner === IDPOwnerType.IDP_OWNER_TYPE_SYSTEM"
-                        (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
-                        <img src="../../../assets/images/google.png"
-                            *ngIf="idp.stylingType === IDPSTYLINGTYPE.IDPSTYLINGTYPE_GOOGLE" alt="google" />
-                    </mat-checkbox>
-                </td>
-            </ng-container>
+  <div class="table-wrapper">
+    <table class="table" mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+            [disabled]="serviceType === PolicyComponentServiceType.MGMT">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let idp">
+          <mat-checkbox color="primary" (click)="$event.stopPropagation()" class="chbox"
+            [disabled]="serviceType === PolicyComponentServiceType.MGMT && idp?.owner === IDPOwnerType.IDP_OWNER_TYPE_SYSTEM"
+            (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
+            <img src="../../../assets/images/google.png"
+              *ngIf="idp.stylingType === IDPStylingType.IDPSTYLINGTYPE_GOOGLE" alt="google" />
+          </mat-checkbox>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.NAME' | translate }} </th>
-                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
-                  <div class="name-col">
-                    <span>{{idp?.name}}</span>
-                    <mat-icon matTooltip="{{'IDP.OIDC.TITLE' | translate}}" *ngIf="idp?.oidcConfig" svgIcon="mdi_openid"></mat-icon>
-                    <mat-icon matTooltip="{{'IDP.JWT.TITLE' | translate}}" *ngIf="idp?.jwtConfig" svgIcon="mdi_jwt"></mat-icon>
+      <ng-container matColumnDef="availability">
+        <th class="availability" mat-header-cell *matHeaderCellDef>
+          <!-- <span>{{ 'IDP.AVAILABILITY' | translate }}</span> -->
+        </th>
+        <td class="availability" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+          <i matTooltip="{{'IDP.AVAILABLE' | translate}}"
+            *ngIf="isEnabled(idp) && idp.state === IDPState.IDP_STATE_ACTIVE"
+            class="idp-available las la-check-circle"></i>
+          <i matTooltip="{{'IDP.AVAILABLEBUTINACTIVE' | translate}}"
+            *ngIf="isEnabled(idp) && idp.state === IDPState.IDP_STATE_INACTIVE"
+            class="idp-not-available las la-check-circle"></i>
+        </td>
+      </ng-container>
 
-                  </div>
-              </td>
-            </ng-container>
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> {{ 'IDP.NAME' | translate }} </th>
+        <td class="pointer" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+          <span>{{idp?.name}}</span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="config">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CONFIG' | translate }} </th>
-                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
-                    <div *ngFor="let elem of idp?.oidcConfig | keyvalue" class="flex-row">
-                        <span class="key">{{elem.key}}:</span>
-                        <span class="value">{{elem.value}}</span>
-                    </div>
-                </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">
+          <span class="state" *ngIf="idp?.oidcConfig">{{'IDP.OIDC.TITLE' | translate}}</span>
+          <span class="state" *ngIf="idp?.jwtConfig">{{'IDP.JWT.TITLE' | translate}}</span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="state">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.STATE' | translate }} </th>
-                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
-                    <span class="state"
-                        [ngClass]="{'active': idp.state === IDPState.IDP_STATE_ACTIVE, 'inactive': idp.state === IDPState.IDP_STATE_INACTIVE}">{{
-                        'IDP.STATES.'+idp.state | translate }}</span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="state">
+        <th mat-header-cell *matHeaderCellDef> {{ 'IDP.STATE' | translate }} </th>
+        <td class="pointer" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+          <span class="state"
+            [ngClass]="{'active': idp.state === IDPState.IDP_STATE_ACTIVE, 'inactive': idp.state === IDPState.IDP_STATE_INACTIVE}">{{
+            'IDP.STATES.'+idp.state | translate }}</span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="dates">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.DATES' | translate }} </th>
-                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
-                    <div class="date-block">
-                        <span class="date-sub">{{ 'IDP.CREATIONDATE' | translate }}:</span>
-                        <span>{{idp.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
-                    </div>
-                    <div class="date-block">
-                        <span class="date-sub">{{ 'IDP.CHANGEDATE' | translate }}</span>
-                        <span>{{idp.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
-                    </div>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="creationDate">
+        <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CREATIONDATE' | translate }} </th>
+        <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
+          <span>{{idp.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="owner">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.OWNER' | translate }} </th>
-                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
-                    {{'IDP.OWNERTYPES.'+idp.owner | translate }} </td>
-            </ng-container>
+      <ng-container matColumnDef="changeDate">
+        <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CHANGEDATE' | translate }} </th>
+        <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
+          <span>{{idp.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
+        </td>
+      </ng-container>
 
-            <ng-container matColumnDef="actions" stickyEnd>
-                <th mat-header-cell *matHeaderCellDef></th>
-                <td mat-cell *matCellDef="let idp">
-                    <button
-                        [disabled]="serviceType === PolicyComponentServiceType.MGMT && idp?.providerType === IDPOwnerType.IDP_OWNER_TYPE_ORG"
-                        mat-icon-button color="warn" matTooltip="{{'ACTIONS.REMOVE' | translate}}"
-                        (click)="removeIdp(idp)">
-                        <i class="las la-trash"></i>
-                    </button>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="owner">
+        <th mat-header-cell *matHeaderCellDef> {{ 'IDP.OWNER' | translate }} </th>
+        <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
+          {{'IDP.OWNERTYPES.'+idp.owner | translate }} </td>
+      </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="highlight"
-                mat-row *matRowDef="let row; columns: displayedColumns;">
-            </tr>
-        </table>
-    </div>
-    <cnsl-paginator #paginator class="paginator" [timestamp]="idpResult?.details?.viewTimestamp" [length]="idpResult?.details?.totalResult || 0" [pageSize]="10"
-        [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
+      <ng-container matColumnDef="actions" stickyEnd>
+        <th class="idp-table-actions" mat-header-cell *matHeaderCellDef></th>
+        <td class="idp-table-actions" mat-cell *matCellDef="let idp">
+          <cnsl-table-actions>
+            <button actions *ngIf="!isEnabled(idp)"
+              [disabled]="([serviceType === PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType === PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) === false || ((serviceType === PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) === false))"
+              mat-icon-button matTooltip="{{'IDP.SETAVAILABLE' | translate}}" (click)="addIdp(idp)">
+              <i class="las la-check-circle"></i>
+            </button>
+            <button actions *ngIf="isEnabled(idp)"
+              [disabled]="([serviceType === PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType === PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) === false || ((serviceType === PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) === false))"
+              mat-icon-button matTooltip="{{'IDP.SETUNAVAILABLE' | translate}}" (click)="removeIdp(idp)">
+              <i class="las la-times-circle"></i>
+            </button>
+            <button actions
+              [disabled]="serviceType === PolicyComponentServiceType.MGMT && idp?.providerType === IDPOwnerType.IDP_OWNER_TYPE_ORG"
+              mat-icon-button color="warn" matTooltip="{{'ACTIONS.REMOVE' | translate}}" (click)="deleteIdp(idp)">
+              <i class="las la-trash"></i>
+            </button>
+          </cnsl-table-actions>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
+      </tr>
+    </table>
+  </div>
+  <cnsl-paginator #paginator class="paginator" [timestamp]="idpResult?.details?.viewTimestamp"
+    [length]="idpResult?.details?.totalResult || 0" [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]"
+    (page)="changePage($event)"></cnsl-paginator>
 </cnsl-refresh-table>

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

@@ -1,126 +1,33 @@
-.ar-button {
-  margin-right: .5rem;
-}
-
-.table-wrapper {
-  overflow: auto;
-  width: 100%;
-
-  .table,
-  .paginator {
-    width: 100% !important;
-
-    td,
-    th {
-      padding: 0 1rem;
-
-      &:first-child {
-        padding-left: 0;
-        padding-right: 1rem;
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
-    }
-  }
+.margin-right {
+  margin-right: 0.5rem;
 }
 
 td {
   outline: none;
-
-  img {
-    height: 30px;
-    width: 30px;
-    margin-left: 1rem;
-    border-radius: .5rem;
-    object-fit: contain;
-    margin-top: .5rem;
-  }
-
-  .name-col {
-    display: flex;
-    flex-direction: column;
-
-    span {
-      margin-bottom: .5rem;
-    }
-  }
 }
 
 tr {
   outline: none;
 
-  button {
-    visibility: hidden;
-  }
-
-  &:hover {
-    button {
-      visibility: visible;
-    }
-  }
-
   &.disabled,
   &.disabled * {
-    opacity: .8;
+    opacity: 0.8;
     cursor: default;
   }
 }
 
-.avatar {
-  height: 30px;
-  width: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: black;
-  color: white;
-
-  span {
-    font-size: 14px;
-    text-transform: uppercase;
-  }
+.availability {
+  width: 40px;
 }
 
-.flex-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 2px 0;
-  width: 250px;
-
-  .key {
-    margin-right: .5rem;
-    font-size: 12px;
-    flex: 1 0 50%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .value {
-    font-size: 12px;
-    flex: 1 0 50%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &:first-child {
-    padding-top: .5rem;
-  }
-
-  &:last-child {
-    padding-bottom: .5rem;
-  }
+.idp-available {
+  color: var(--success);
 }
 
-.date-block {
-  margin: .5rem 0;
-  display: block;
-  min-width: 120px;
+.idp-not-available {
+  color: var(--warn);
+}
 
-  .date-sub {
-    font-size: 13px;
-    display: block;
-  }
+.idp-table-actions {
+  width: 100px;
 }

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

@@ -6,8 +6,8 @@ import { RouterLink } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { ListIDPsResponse } from 'src/app/proto/generated/zitadel/admin_pb';
-import { IDP, IDPOwnerType, IDPOwnerTypeQuery, IDPState, IDPStylingType } from 'src/app/proto/generated/zitadel/idp_pb';
-import { IDPQuery, ListOrgIDPsResponse } from 'src/app/proto/generated/zitadel/management_pb';
+import { IDP, IDPLoginPolicyLink, IDPOwnerType, IDPState, IDPStylingType } from 'src/app/proto/generated/zitadel/idp_pb';
+import { ListOrgIDPsResponse } from 'src/app/proto/generated/zitadel/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -26,21 +26,19 @@ export class IdpTableComponent implements OnInit {
   @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, []);
+  public dataSource: MatTableDataSource<IDP.AsObject> = new MatTableDataSource<IDP.AsObject>();
+  public selection: SelectionModel<IDP.AsObject> = new SelectionModel<IDP.AsObject>(true, []);
   public idpResult!: ListIDPsResponse.AsObject | ListOrgIDPsResponse.AsObject;
   private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public loading$: Observable<boolean> = this.loadingSubject.asObservable();
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
   public IDPOwnerType: any = IDPOwnerType;
   public IDPState: any = IDPState;
-  public IDPSTYLINGTYPE: any = IDPStylingType;
-  @Input() public displayedColumns: string[] = ['select', 'name', 'dates', 'state'];
+  public displayedColumns: string[] = ['availability', 'name', 'type', 'creationDate', 'changeDate', 'state'];
+  @Output() public changedSelection: EventEmitter<Array<IDP.AsObject>> = new EventEmitter();
 
-  @Output() public changedSelection: EventEmitter<Array<IDP.AsObject>>
-    = new EventEmitter();
+  public idps: IDPLoginPolicyLink.AsObject[] = [];
+  public IDPStylingType: any = IDPStylingType;
 
   constructor(public translate: TranslateService, private toast: ToastService, private dialog: MatDialog) {
     this.selection.changed.subscribe(() => {
@@ -50,8 +48,12 @@ export class IdpTableComponent implements OnInit {
 
   ngOnInit(): void {
     this.getData(10, 0);
+    this.getIdps().then((resp) => {
+      this.idps = resp;
+    });
+
     if (this.serviceType === PolicyComponentServiceType.MGMT) {
-      this.displayedColumns = ['select', 'name', 'dates', 'state', 'owner'];
+      this.displayedColumns = ['availability', 'name', 'type', 'owner', 'creationDate', 'changeDate', 'state'];
     }
 
     if (!this.disabled) {
@@ -66,51 +68,52 @@ export class IdpTableComponent implements OnInit {
   }
 
   public masterToggle(): void {
-    this.isAllSelected() ?
-      this.selection.clear() :
-      this.dataSource.data.forEach(row => this.selection.select(row));
+    this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach((row) => this.selection.select(row));
   }
 
-
   public changePage(event: PageEvent): void {
     this.getData(event.pageSize, event.pageIndex * event.pageSize);
   }
 
   public deactivateSelectedIdps(): void {
-    const map: Promise<any>[] = this.selection.selected.map(value => {
+    const map: Promise<any>[] = this.selection.selected.map((value) => {
       if (this.serviceType === PolicyComponentServiceType.MGMT) {
         return (this.service as ManagementService).deactivateOrgIDP(value.id);
       } else {
         return (this.service as AdminService).deactivateIDP(value.id);
       }
     });
-    Promise.all(map).then(() => {
-      this.selection.clear();
-      this.toast.showInfo('IDP.TOAST.SELECTEDDEACTIVATED', true);
-      this.refreshPage();
-    }).catch(error => {
-      this.toast.showError(error);
-    });
+    Promise.all(map)
+      .then(() => {
+        this.selection.clear();
+        this.toast.showInfo('IDP.TOAST.SELECTEDDEACTIVATED', true);
+        this.refreshPage();
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+      });
   }
 
   public reactivateSelectedIdps(): void {
-    const map: Promise<any>[] = this.selection.selected.map(value => {
+    const map: Promise<any>[] = this.selection.selected.map((value) => {
       if (this.serviceType === PolicyComponentServiceType.MGMT) {
         return (this.service as ManagementService).reactivateOrgIDP(value.id);
       } else {
         return (this.service as AdminService).reactivateIDP(value.id);
       }
     });
-    Promise.all(map).then(() => {
-      this.selection.clear();
-      this.toast.showInfo('IDP.TOAST.SELECTEDREACTIVATED', true);
-      this.refreshPage();
-    }).catch(error => {
-      this.toast.showError(error);
-    });
+    Promise.all(map)
+      .then(() => {
+        this.selection.clear();
+        this.toast.showInfo('IDP.TOAST.SELECTEDREACTIVATED', true);
+        this.refreshPage();
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+      });
   }
 
-  public removeIdp(idp: IDP.AsObject): void {
+  public deleteIdp(idp: IDP.AsObject): void {
     const dialogRef = this.dialog.open(WarnDialogComponent, {
       data: {
         confirmKey: 'ACTIONS.DELETE',
@@ -121,26 +124,32 @@ export class IdpTableComponent implements OnInit {
       width: '400px',
     });
 
-    dialogRef.afterClosed().subscribe(resp => {
+    dialogRef.afterClosed().subscribe((resp) => {
       if (resp) {
         if (this.serviceType === PolicyComponentServiceType.MGMT) {
-          (this.service as ManagementService).removeOrgIDP(idp.id).then(() => {
-            this.toast.showInfo('IDP.TOAST.DELETED', true);
-            setTimeout(() => {
-              this.refreshPage();
-            }, 1000);
-          }, error => {
-            this.toast.showError(error);
-          });
+          (this.service as ManagementService).removeOrgIDP(idp.id).then(
+            () => {
+              this.toast.showInfo('IDP.TOAST.DELETED', true);
+              setTimeout(() => {
+                this.refreshPage();
+              }, 1000);
+            },
+            (error) => {
+              this.toast.showError(error);
+            },
+          );
         } else {
-          (this.service as AdminService).removeIDP(idp.id).then(() => {
-            this.toast.showInfo('IDP.TOAST.DELETED', true);
-            setTimeout(() => {
-              this.refreshPage();
-            }, 1000);
-          }, error => {
-            this.toast.showError(error);
-          });
+          (this.service as AdminService).removeIDP(idp.id).then(
+            () => {
+              this.toast.showInfo('IDP.TOAST.DELETED', true);
+              setTimeout(() => {
+                this.refreshPage();
+              }, 1000);
+            },
+            (error) => {
+              this.toast.showError(error);
+            },
+          );
         }
       }
     });
@@ -150,29 +159,34 @@ export class IdpTableComponent implements OnInit {
     this.loadingSubject.next(true);
 
     if (this.serviceType === PolicyComponentServiceType.MGMT) {
-      const query: IDPQuery = new IDPQuery();
-      const otQuery: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
-      otQuery.setOwnerType(IDPOwnerType.IDP_OWNER_TYPE_ORG);
-      query.setOwnerTypeQuery(otQuery);
-      (this.service as ManagementService).listOrgIDPs(limit, offset, [query]).then(resp => {
-        this.idpResult = resp;
-        this.dataSource.data = resp.resultList;
-        this.loadingSubject.next(false);
-      }).catch(error => {
-        this.toast.showError(error);
-        this.loadingSubject.next(false);
-      });
+      // const query: IDPQuery = new IDPQuery();
+      // const otQuery: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
+      // otQuery.setOwnerType(IDPOwnerType.IDP_OWNER_TYPE_ORG);
+      // query.setOwnerTypeQuery(otQuery);
+      (this.service as ManagementService)
+        .listOrgIDPs(limit, offset)
+        .then((resp) => {
+          this.idpResult = resp;
+          this.dataSource.data = resp.resultList;
+          this.loadingSubject.next(false);
+        })
+        .catch((error) => {
+          this.toast.showError(error);
+          this.loadingSubject.next(false);
+        });
     } else {
-      (this.service as AdminService).listIDPs(limit, offset).then(resp => {
-        this.idpResult = resp;
-        this.dataSource.data = resp.resultList;
-        this.loadingSubject.next(false);
-      }).catch(error => {
-        this.toast.showError(error);
-        this.loadingSubject.next(false);
-      });
+      (this.service as AdminService)
+        .listIDPs(limit, offset)
+        .then((resp) => {
+          this.idpResult = resp;
+          this.dataSource.data = resp.resultList;
+          this.loadingSubject.next(false);
+        })
+        .catch((error) => {
+          this.toast.showError(error);
+          this.loadingSubject.next(false);
+        });
     }
-
   }
 
   public refreshPage(): void {
@@ -181,7 +195,7 @@ export class IdpTableComponent implements OnInit {
 
   public get createRouterLink(): RouterLink | any {
     if (this.service instanceof AdminService) {
-      return ['/iam', 'idp', 'create'];
+      return ['/system', 'idp', 'create'];
     } else if (this.service instanceof ManagementService) {
       return ['/org', 'idp', 'create'];
     }
@@ -193,14 +207,86 @@ export class IdpTableComponent implements OnInit {
         case PolicyComponentServiceType.MGMT:
           switch (row.owner) {
             case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
-              return ['/iam', 'idp', row.id];
+              return ['/system', 'idp', row.id];
             case IDPOwnerType.IDP_OWNER_TYPE_ORG:
               return ['/org', 'idp', row.id];
           }
           break;
         case PolicyComponentServiceType.ADMIN:
-          return ['/iam', 'idp', row.id];
+          return ['/system', 'idp', row.id];
       }
     }
   }
+
+  private async getIdps(): Promise<IDPLoginPolicyLink.AsObject[]> {
+    switch (this.serviceType) {
+      case PolicyComponentServiceType.MGMT:
+        return (this.service as ManagementService).listLoginPolicyIDPs().then((resp) => {
+          return resp.resultList;
+        });
+      case PolicyComponentServiceType.ADMIN:
+        return (this.service as AdminService).listLoginPolicyIDPs().then((providers) => {
+          return providers.resultList;
+        });
+    }
+  }
+
+  public addIdp(idp: IDP.AsObject | IDP.AsObject): Promise<any> {
+    switch (this.serviceType) {
+      case PolicyComponentServiceType.MGMT:
+        return (this.service as ManagementService).addIDPToLoginPolicy(idp.id, idp.owner).then(() => {
+          this.getIdps()
+            .then((resp) => {
+              this.idps = resp;
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        });
+      case PolicyComponentServiceType.ADMIN:
+        return (this.service as AdminService)
+          .addIDPToLoginPolicy(idp.id)
+          .then(() => {
+            this.getIdps().then((resp) => {
+              this.idps = resp;
+            });
+          })
+          .catch((error) => {
+            this.toast.showError(error);
+          });
+    }
+  }
+
+  public removeIdp(idp: IDP.AsObject): void {
+    switch (this.serviceType) {
+      case PolicyComponentServiceType.MGMT:
+        (this.service as ManagementService).removeIDPFromLoginPolicy(idp.id).then(
+          () => {
+            this.getIdps().then((resp) => {
+              this.idps = resp;
+            });
+          },
+          (error) => {
+            this.toast.showError(error);
+          },
+        );
+        break;
+      case PolicyComponentServiceType.ADMIN:
+        (this.service as AdminService).removeIDPFromLoginPolicy(idp.id).then(
+          () => {
+            this.getIdps().then((resp) => {
+              this.idps = resp;
+            });
+          },
+          (error) => {
+            this.toast.showError(error);
+          },
+        );
+        break;
+    }
+  }
+
+  public isEnabled(idp: IDP.AsObject): boolean {
+    return this.idps.findIndex((i) => i.idpId === idp.id) > -1;
+  }
 }

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

@@ -10,35 +10,39 @@ import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
+import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature-pipe.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
 import { TruncatePipeModule } from 'src/app/pipes/truncate-pipe/truncate-pipe.module';
 
 import { PaginatorModule } from '../paginator/paginator.module';
+import { TableActionsModule } from '../table-actions/table-actions.module';
 import { IdpTableComponent } from './idp-table.component';
 
 @NgModule({
-    declarations: [IdpTableComponent],
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatIconModule,
-        MatTooltipModule,
-        TranslateModule,
-        LocalizedDatePipeModule,
-        TimestampToDatePipeModule,
-        MatTableModule,
-        PaginatorModule,
-        RouterModule,
-        RefreshTableModule,
-        HasRoleModule,
-        TruncatePipeModule,
-    ],
-    exports: [
-        IdpTableComponent,
-    ],
+  declarations: [IdpTableComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    TableActionsModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatTooltipModule,
+    TranslateModule,
+    LocalizedDatePipeModule,
+    TimestampToDatePipeModule,
+    MatTableModule,
+    PaginatorModule,
+    RouterModule,
+    RefreshTableModule,
+    HasRoleModule,
+    HasRolePipeModule,
+    HasFeaturePipeModule,
+    TruncatePipeModule,
+  ],
+  exports: [IdpTableComponent],
 })
-export class IdpTableModule { }
+export class IdpTableModule {}