fix(console): idp create, table, i18n (#870)

* fix idp removal, add, links

* confirm deletion

* stylelint

* confirmation on multiple delete

* clear after confirm

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

@@ -11,6 +11,8 @@
     <h1>{{'IDP.CREATE.TITLE' | translate}}</h1>
     <p>{{'IDP.CREATE.DESCRIPTION' | translate}}</p>
 
+    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
+
     <form (ngSubmit)="addIdp()">
         <ng-container [formGroup]="formGroup">
             <div class="content">

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

@@ -14,11 +14,11 @@ 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 { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
 import {
     OidcIdpConfigCreate as MgmtOidcIdpConfigCreate,
     OIDCMappingField as mgmtMappingFields,
 } from '../../proto/generated/management_pb';
+import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
 
 @Component({
     selector: 'app-idp-create',
@@ -37,7 +37,7 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
     public formGroup!: FormGroup;
     public createSteps: number = 1;
     public currentCreateStep: number = 1;
-
+    public loading: boolean = false;
     constructor(
         private router: Router,
         private route: ActivatedRoute,
@@ -107,9 +107,15 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
         req.setScopesList(this.scopesList?.value);
         req.setIdpDisplayNameMapping(this.idpDisplayNameMapping?.value);
         req.setUsernameMapping(this.usernameMapping?.value);
-
+        this.loading = true;
         this.service.CreateOidcIdp(req).then((idp) => {
-            this.router.navigate(['idp', idp.getId()]);
+            setTimeout(() => {
+                this.loading = false;
+                this.router.navigate([
+                    this.serviceType === PolicyComponentServiceType.MGMT ? 'org' :
+                        this.serviceType === PolicyComponentServiceType.ADMIN ? 'iam' : '',
+                    'idp', idp.getId()]);
+            }, 2000);
         }).catch(error => {
             this.toast.showError(error);
         });

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

@@ -6,12 +6,13 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { IdpCreateRoutingModule } from './idp-create-routing.module';
 import { IdpCreateComponent } from './idp-create.component';
-import {MatSelectModule} from '@angular/material/select';
 
 @NgModule({
     declarations: [IdpCreateComponent],
@@ -28,6 +29,7 @@ import {MatSelectModule} from '@angular/material/select';
         MatChipsModule,
         MatTooltipModule,
         TranslateModule,
+        MatProgressBarModule,
     ],
 })
 export class IdpCreateModule { }

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

@@ -2,18 +2,15 @@
     emitRefreshOnPreviousRoute="/iam/idp/create" [timestamp]="idpResult?.viewTimestamp" [selection]="selection">
     <ng-template appHasRole [appHasRole]="['iam.write']" actions>
         <button (click)="deactivateSelectedIdps()" matTooltip="{{'IDP.DEACTIVATE' | translate}}" class="icon-button"
-            mat-icon-button *ngIf="selection.hasValue() && serviceType!=PolicyComponentServiceType.MGMT"
-            [disabled]="disabled">
+            mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
             <mat-icon>block</mat-icon>
         </button>
         <button (click)="reactivateSelectedIdps()" matTooltip="{{'IDP.ACTIVATE' | translate}}" class="icon-button"
-            mat-icon-button *ngIf="selection.hasValue() && serviceType!=PolicyComponentServiceType.MGMT"
-            [disabled]="disabled">
+            mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
             <mat-icon>play_circle_outline</mat-icon>
         </button>
         <button color="warn" (click)="removeSelectedIdps()" matTooltip="{{'IDP.DELETE' | translate}}"
-            class="icon-button" mat-icon-button
-            *ngIf="selection.hasValue() && serviceType!=PolicyComponentServiceType.MGMT" [disabled]="disabled">
+            class="icon-button" mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
             <i class="las la-trash"></i>
         </button>
         <a [routerLink]="createRouterLink" color="primary" mat-raised-button [disabled]="disabled">
@@ -27,11 +24,13 @@
                 <th mat-header-cell *matHeaderCellDef>
                     <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="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()"
+                        [disabled]="serviceType==PolicyComponentServiceType.MGMT && idp?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM"
                         (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
                         <img *ngIf="idp?.logoSrc?.startsWith('https://'); else genAvatar" [src]="idp.logoSrc"
                             alt="ipp logo {{idp?.name}}" />
@@ -46,12 +45,12 @@
 
             <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IDP.NAME' | translate }} </th>
-                <td mat-cell *matCellDef="let idp"> {{idp?.name}} </td>
+                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp"> {{idp?.name}} </td>
             </ng-container>
 
             <ng-container matColumnDef="config">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CONFIG' | translate }} </th>
-                <td mat-cell *matCellDef="let idp">
+                <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>
@@ -61,35 +60,45 @@
 
             <ng-container matColumnDef="state">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IDP.STATE' | translate }} </th>
-                <td mat-cell *matCellDef="let idp"> {{ 'IDP.STATES.'+idp.state | translate }} </td>
+                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
+                    {{ 'IDP.STATES.'+idp.state | translate }} </td>
             </ng-container>
 
             <ng-container matColumnDef="creationDate">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CREATIONDATE' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let idp">
+                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
                     {{idp.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }} </td>
             </ng-container>
 
             <ng-container matColumnDef="changeDate">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CHANGEDATE' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let idp">
+                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
                     {{idp.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }} </td>
             </ng-container>
 
             <ng-container matColumnDef="type">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IDP.TYPE' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let idp">
+                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
                     {{'IDP.TYPES.'+idp.providerType | translate }} </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 == IdpProviderType.IDPPROVIDERTYPE_SYSTEM"
+                        mat-icon-button color="warn" matTooltip="{{'IAM.VIEWS.CLEAR' | translate}}"
+                        (click)="removeIdp(idp)">
+                        <i class="las la-trash"></i>
+                    </button>
+                </td>
+            </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr class="highlight"
                 [ngClass]="{'disabled': serviceType==PolicyComponentServiceType.MGMT && row?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM}"
-                mat-row *matRowDef="let row; columns: displayedColumns;"
-                [routerLink]="serviceType==PolicyComponentServiceType.ADMIN ? routerLinkForRow(row): null">
+                mat-row *matRowDef="let row; columns: displayedColumns;">
             </tr>
-
         </table>
     </div>
     <mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"

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

@@ -22,12 +22,26 @@
   }
 }
 
+td {
+  outline: none;
+}
+
 tr {
   outline: none;
 
   &.disabled * {
     color: var(--grey);
   }
+
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
 }
 
 .avatar {

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

@@ -1,5 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { RouterLink } from '@angular/router';
@@ -12,6 +13,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
+import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
 
 @Component({
     selector: 'app-idp-table',
@@ -37,7 +39,7 @@ export class IdpTableComponent implements OnInit {
     @Output() public changedSelection: EventEmitter<Array<AdminIdpView.AsObject | MgmtIdpView.AsObject>>
         = new EventEmitter();
 
-    constructor(public translate: TranslateService, private toast: ToastService) {
+    constructor(public translate: TranslateService, private toast: ToastService, private dialog: MatDialog) {
         this.selection.changed.subscribe(() => {
             this.changedSelection.emit(this.selection.selected);
         });
@@ -48,6 +50,10 @@ export class IdpTableComponent implements OnInit {
         if (this.serviceType === PolicyComponentServiceType.MGMT) {
             this.displayedColumns = ['select', 'name', 'config', 'creationDate', 'changeDate', 'state', 'type'];
         }
+
+        if (!this.disabled) {
+            this.displayedColumns.push('actions');
+        }
     }
 
     public isAllSelected(): boolean {
@@ -68,29 +74,70 @@ export class IdpTableComponent implements OnInit {
     }
 
     public deactivateSelectedIdps(): void {
+        this.selection.clear();
         Promise.all(this.selection.selected.map(value => {
             return this.service.DeactivateIdpConfig(value.id);
         })).then(() => {
-            this.toast.showInfo('USER.TOAST.SELECTEDDEACTIVATED', true);
-            this.getData(10, 0);
+            this.toast.showInfo('IDP.TOAST.SELECTEDDEACTIVATED', true);
+            this.refreshPage();
         });
     }
 
     public reactivateSelectedIdps(): void {
+        this.selection.clear();
         Promise.all(this.selection.selected.map(value => {
             return this.service.ReactivateIdpConfig(value.id);
         })).then(() => {
-            this.toast.showInfo('USER.TOAST.SELECTEDREACTIVATED', true);
-            this.getData(10, 0);
+            this.toast.showInfo('IDP.TOAST.SELECTEDREACTIVATED', true);
+            this.refreshPage();
         });
     }
 
     public removeSelectedIdps(): void {
+        const dialogRef = this.dialog.open(WarnDialogComponent, {
+            data: {
+                confirmKey: 'ACTIONS.DELETE',
+                cancelKey: 'ACTIONS.CANCEL',
+                titleKey: 'IDP.DELETE_SELECTION_TITLE',
+                descriptionKey: 'IDP.DELETE_SELECTION_DESCRIPTION',
+            },
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                this.selection.clear();
+
                 Promise.all(this.selection.selected.map(value => {
                     return this.service.RemoveIdpConfig(value.id);
                 })).then(() => {
-            this.toast.showInfo('USER.TOAST.SELECTEDDEACTIVATED', true);
-            this.getData(10, 0);
+                    this.toast.showInfo('IDP.TOAST.SELECTEDDEACTIVATED', true);
+                    this.refreshPage();
+                });
+            }
+        });
+    }
+
+    public removeIdp(idp: AdminIdpView.AsObject | MgmtIdpView.AsObject): void {
+        const dialogRef = this.dialog.open(WarnDialogComponent, {
+            data: {
+                confirmKey: 'ACTIONS.DELETE',
+                cancelKey: 'ACTIONS.CANCEL',
+                titleKey: 'IDP.DELETE_TITLE',
+                descriptionKey: 'IDP.DELETE_DESCRIPTION',
+            },
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                this.service.RemoveIdpConfig(idp.id).then(() => {
+                    this.toast.showInfo('IDP.TOAST.REMOVED', true);
+                    setTimeout(() => {
+                        this.refreshPage();
+                    }, 1000);
+                });
+            }
         });
     }
 

console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.html

@@ -26,31 +26,6 @@
         </div>
     </ng-template>
 
-    <ng-template appHasRole [appHasRole]="['policy.read']">
-        <div class="p-item card">
-            <div class="avatar">
-                <i class="icon las la-gem"></i>
-            </div>
-            <div class="title">
-                <span>{{'ORG.POLICY.LOGIN_POLICY.TITLE' | translate}}</span>
-                <button mat-icon-button disabled>
-                    <i *ngIf="loginPolicy" class="icon las la-check-circle"></i>
-                </button>
-            </div>
-
-            <p class="desc">
-                {{'ORG.POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
-
-            <span class="fill-space"></span>
-            <div class="btn-wrapper">
-                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
-                    <button [disabled]="!loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]"
-                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
-                </ng-template>
-            </div>
-        </div>
-    </ng-template>
-
     <ng-template appHasRole [appHasRole]="['iam.policy.read']">
         <div class="p-item card">
             <div class="avatar">
@@ -75,4 +50,29 @@
             </div>
         </div>
     </ng-template>
+
+    <ng-template appHasRole [appHasRole]="['policy.read']">
+        <div class="p-item card">
+            <div class="avatar">
+                <i class="icon las la-gem"></i>
+            </div>
+            <div class="title">
+                <span>{{'ORG.POLICY.LOGIN_POLICY.TITLE' | translate}}</span>
+                <button mat-icon-button disabled>
+                    <i *ngIf="loginPolicy" class="icon las la-check-circle"></i>
+                </button>
+            </div>
+
+            <p class="desc">
+                {{'ORG.POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
+
+            <span class="fill-space"></span>
+            <div class="btn-wrapper">
+                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
+                    <button [disabled]="!loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]"
+                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
+                </ng-template>
+            </div>
+        </div>
+    </ng-template>
 </div>

console/src/app/pages/orgs/orgs-routing.module.ts

@@ -25,6 +25,7 @@ const routes: Routes = [
                 canActivate: [RoleGuard],
                 data: {
                     roles: ['org.idp.write'],
+                    serviceType: PolicyComponentServiceType.MGMT,
                 },
             },
             {
@@ -33,7 +34,7 @@ const routes: Routes = [
                 canActivate: [RoleGuard],
                 data: {
                     roles: ['iam.idp.read'],
-                    serviceType: PolicyComponentServiceType.ADMIN,
+                    serviceType: PolicyComponentServiceType.MGMT,
                 },
             },
         ],

console/src/assets/i18n/de.json

@@ -730,8 +730,18 @@
         "DEACTIVATE":"Deaktivieren",
         "ACTIVATE":"Aktivieren",
         "DELETE":"Löschen",
+        "DELETE_TITLE":"Idp löschen",
+        "DELETE_DESCRIPTION":"Sie sind im Begriff einen Identity Provider zu löschen. Die daruch hervorgerufenen Änderungen sind unwiederruflich. Wollen Sie dies wirklich tun?",
+        "DELETE_SELECTION_TITLE":"Identity Providers löschen",
+        "DELETE_SELECTION_DESCRIPTION":"Sie sind im Begriff mehrere Identity Provider zu löschen. Die daruch hervorgerufenen Änderungen sind unwiederruflich. Wollen Sie dies wirklich tun?",
         "TOAST": {
-            "SAVED": "Erfolgreich gespeichert."
+            "SAVED": "Erfolgreich gespeichert.",
+            "REACTIVATED":"Idp reaktiviert.",
+            "DEACTIVATED":"Idp deaktiviert.",
+            "SELECTEDREACTIVATED":"Selektierte Idps reaktiviert.",
+            "SELECTEDDEACTIVATED":"Selektierte Idps deaktiviert.",
+            "SELECTEDKEYSDELETED":"Selektierte Idps gelöscht.",
+            "DELETED":"Idp erfolgreich gelöscht!"
         }
     },
     "LOGINPOLICY": {

console/src/assets/i18n/en.json

@@ -730,8 +730,18 @@
         "DEACTIVATE":"Deactivate",
         "ACTIVATE":"Activate",
         "DELETE":"Delete",
+        "DELETE_TITLE":"Delete Idp",
+        "DELETE_DESCRIPTION":"You are about to delete an identity provider. The resulting changes are irrevocable. Do you really want to do this?",
+        "DELETE_SELECTION_TITLE":"Delete Idp",
+        "DELETE_SELECTION_DESCRIPTION":"You are about to delete an identity provider. The resulting changes are irrevocable. Do you really want to do this?",
         "TOAST": {
-            "SAVED": "Successfully saved."
+            "SAVED": "Successfully saved.",
+            "REACTIVATED":"Idp reactivated.",
+            "DEACTIVATED":"Idp deactivated.",
+            "SELECTEDREACTIVATED":"Selected idps reactivated.",
+            "SELECTEDDEACTIVATED":"Selected idps deactivated.",
+            "SELECTEDKEYSDELETED":"Selected idps deleted.",
+            "DELETED":"Idp removed successfully!"
         }
     },
     "LOGINPOLICY": {