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">
@@ -48,22 +50,22 @@
                 </mat-form-field>
             </div>
             <div class="content">
-              <mat-form-field class="formfield" appearance="outline">
-                <mat-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</mat-label>
-                <mat-select formControlName="idpDisplayNameMapping">
-                  <mat-option *ngFor="let field of mappingFields" [value]="field">
-                    {{ 'IDP.MAPPINTFIELD.'+field | translate }}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-              <mat-form-field class="formfield" appearance="outline">
-                <mat-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</mat-label>
-                <mat-select formControlName="usernameMapping">
-                  <mat-option *ngFor="let field of mappingFields" [value]="field">
-                    {{ 'IDP.MAPPINTFIELD.'+field | translate }}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
+                <mat-form-field class="formfield" appearance="outline">
+                    <mat-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</mat-label>
+                    <mat-select formControlName="idpDisplayNameMapping">
+                        <mat-option *ngFor="let field of mappingFields" [value]="field">
+                            {{ 'IDP.MAPPINTFIELD.'+field | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field class="formfield" appearance="outline">
+                    <mat-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</mat-label>
+                    <mat-select formControlName="usernameMapping">
+                        <mat-option *ngFor="let field of mappingFields" [value]="field">
+                            {{ 'IDP.MAPPINTFIELD.'+field | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
         </ng-container>
 
@@ -71,4 +73,4 @@
             {{ 'ACTIONS.SAVE' | translate }}
         </button>
     </form>
-</div>
+</div>

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

@@ -7,18 +7,18 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import {
-  OidcIdpConfigCreate as AdminOidcIdpConfigCreate,
-  OIDCMappingField as authMappingFields,
+    OidcIdpConfigCreate as AdminOidcIdpConfigCreate,
+    OIDCMappingField as authMappingFields,
 } from 'src/app/proto/generated/admin_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';
 
-import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
 import {
-  OidcIdpConfigCreate as MgmtOidcIdpConfigCreate,
-  OIDCMappingField as mgmtMappingFields,
+    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,
@@ -68,8 +68,8 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
                 case PolicyComponentServiceType.ADMIN:
                     this.service = this.injector.get(AdminService as Type<AdminService>);
                     this.mappingFields = [
-                      authMappingFields.OIDCMAPPINGFIELD_PREFERRED_USERNAME,
-                      authMappingFields.OIDCMAPPINGFIELD_EMAIL];
+                        authMappingFields.OIDCMAPPINGFIELD_PREFERRED_USERNAME,
+                        authMappingFields.OIDCMAPPINGFIELD_EMAIL];
                     break;
             }
         });
@@ -91,12 +91,12 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
         let req: AdminOidcIdpConfigCreate | MgmtOidcIdpConfigCreate;
 
         switch (this.serviceType) {
-          case PolicyComponentServiceType.MGMT:
-            req = new MgmtOidcIdpConfigCreate();
-            break;
-          case PolicyComponentServiceType.ADMIN:
-            req = new AdminOidcIdpConfigCreate();
-            break;
+            case PolicyComponentServiceType.MGMT:
+                req = new MgmtOidcIdpConfigCreate();
+                break;
+            case PolicyComponentServiceType.ADMIN:
+                req = new AdminOidcIdpConfigCreate();
+                break;
         }
 
         req.setName(this.name?.value);
@@ -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);
         });
@@ -163,7 +169,7 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
         return this.formGroup.get('issuer');
     }
     public get scopesList(): AbstractControl | null {
-      return this.formGroup.get('scopesList');
+        return this.formGroup.get('scopesList');
     }
 
     public get idpDisplayNameMapping(): AbstractControl | null {
@@ -171,7 +177,7 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
     }
 
     public get usernameMapping(): AbstractControl | null {
-      return this.formGroup.get('usernameMapping');
+        return this.formGroup.get('usernameMapping');
     }
 
 }

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 { }