feat(console): guide users when configuring IDPs (#7572)

* feat(console): show external idp remote config

* reuse copy-row

* finish google and saml sp

* finish apps

* add next steps modal

* rollout

* activate

* fix saml urls

* fix saml provider

* complete providers

* translate

* update google docs

* update entra id oidc docs

* update entra id saml docs

* update github docs

* update gitlab docs

* update apple docs

* update okta oidc docs

* update okta saml docs

* update keycloak docs

* update mocksaml

* cleanup

* lint

* lint

* fix overriden classes

* encapsulate styles

* fix icon classes

---------

Co-authored-by: peintnermax <[email protected]>

console/src/app/modules/providers/provider-github-es/provider-github-es.component.html

@@ -6,11 +6,30 @@
     <div class="title-row">
       <img class="idp-logo dark" src="./assets/images/idp/github-dark.svg" alt="github" />
       <img class="idp-logo light" src="./assets/images/idp/github.svg" alt="github" />
-
       <h1>{{ 'IDP.CREATE.GITHUBES.TITLE' | translate }}</h1>
+      <ng-container *ngIf="exists$ | async">
+        <div
+          *ngIf="{ isNotActive: (activateLink$ | async) } as idp"
+          class="cnsl-state-dot"
+          [matTooltip]="(idp.isNotActive ? 'IDP.STATES.2' : 'IDP.STATES.1') | translate"
+          [ngClass]="{ active: !idp.isNotActive, inactive: !!idp.isNotActive }"
+        ></div>
+      </ng-container>
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
+    <cnsl-provider-next
+      [configureProvider]="(exists$ | async) === false"
+      [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'GitHub' }"
+      [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'GitHub' }"
+      configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/github#github-configuration"
+      [autofillLink]="autofillLink$ | async"
+      [activateLink]="activateLink$ | async"
+      [copyUrls]="copyUrls$ | async"
+      [expanded]="!!(expandWhatNow$ | async)"
+      (activate)="activate()"
+    ></cnsl-provider-next>
+
     <p class="identity-provider-desc cnsl-secondary-text">{{ 'IDP.CREATE.GITHUBES.DESCRIPTION' | translate }}</p>
 
     <form [formGroup]="form" (ngSubmit)="submitForm()">
@@ -103,8 +122,9 @@
           [disabled]="form.invalid || form.disabled"
           type="submit"
         >
-          <span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
-          <span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>
+          <span *ngIf="{ exists: (exists$ | async) } as idp">{{
+            (!!idp.exists ? 'ACTIONS.SAVE' : 'ACTIONS.CREATE') | translate
+          }}</span>
         </button>
       </div>
     </form>

console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts

@@ -4,7 +4,7 @@ import { Component, Injector, Type } from '@angular/core';
 import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { ActivatedRoute } from '@angular/router';
-import { take } from 'rxjs';
+import { BehaviorSubject, take } from 'rxjs';
 import {
   AddGitHubEnterpriseServerProviderRequest as AdminAddGitHubEnterpriseServerProviderRequest,
   GetProviderByIDRequest as AdminGetProviderByIDRequest,
@@ -24,6 +24,7 @@ import { ToastService } from 'src/app/services/toast.service';
 import { requiredValidator } from '../../form-field/validators/validators';
 
 import { PolicyComponentServiceType } from '../../policies/policy-component-types.enum';
+import { ProviderNextService } from '../provider-next/provider-next.service';
 
 @Component({
   selector: 'cnsl-provider-github-es',
@@ -33,9 +34,12 @@ export class ProviderGithubESComponent {
   public showOptional: boolean = false;
   public options: Options = new Options().setIsCreationAllowed(true).setIsLinkingAllowed(true);
 
+  // DEPRECATED: use id$ instead
   public id: string | null = '';
   public updateClientSecret: boolean = false;
+  // DEPRECATED: assert service$ instead
   public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
+  // DEPRECATED: use service$ instead
   private service!: ManagementService | AdminService;
   public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
   public form!: UntypedFormGroup;
@@ -44,6 +48,25 @@ export class ProviderGithubESComponent {
 
   public provider?: Provider.AsObject;
 
+  public justCreated$: BehaviorSubject<string> = new BehaviorSubject<string>('');
+  public justActivated$ = new BehaviorSubject<boolean>(false);
+
+  private service$ = this.nextSvc.service(this.route.data);
+  private id$ = this.nextSvc.id(this.route.paramMap, this.justCreated$);
+  public exists$ = this.nextSvc.exists(this.id$);
+  public autofillLink$ = this.nextSvc.autofillLink(
+    this.id$,
+    `https://zitadel.com/docs/guides/integrate/identity-providers/github#optional-add-zitadel-action-to-autofill-userdata`,
+  );
+  public activateLink$ = this.nextSvc.activateLink(
+    this.id$,
+    this.justActivated$,
+    'https://zitadel.com/docs/guides/integrate/identity-providers/github#activate-idp',
+    this.service$,
+  );
+  public expandWhatNow$ = this.nextSvc.expandWhatNow(this.id$, this.activateLink$, this.justCreated$);
+  public copyUrls$ = this.nextSvc.callbackUrls();
+
   constructor(
     private authService: GrpcAuthService,
     private route: ActivatedRoute,
@@ -51,6 +74,7 @@ export class ProviderGithubESComponent {
     private injector: Injector,
     private _location: Location,
     breadcrumbService: BreadcrumbService,
+    private nextSvc: ProviderNextService,
   ) {
     this.form = new UntypedFormGroup({
       name: new UntypedFormControl('', [requiredValidator]),
@@ -113,6 +137,10 @@ export class ProviderGithubESComponent {
     });
   }
 
+  public activate() {
+    this.nextSvc.activate(this.id$, this.justActivated$, this.service$);
+  }
+
   private getData(id: string): void {
     this.loading = true;
     const req =
@@ -137,7 +165,7 @@ export class ProviderGithubESComponent {
   }
 
   public submitForm(): void {
-    this.provider ? this.updateGenericOAuthProvider() : this.addGenericOAuthProvider();
+    this.provider || this.justCreated$.value ? this.updateGenericOAuthProvider() : this.addGenericOAuthProvider();
   }
 
   public addGenericOAuthProvider(): void {
@@ -158,11 +186,9 @@ export class ProviderGithubESComponent {
     this.loading = true;
     this.service
       .addGitHubEnterpriseServerProvider(req)
-      .then((idp) => {
-        setTimeout(() => {
-          this.loading = false;
-          this.close();
-        }, 2000);
+      .then((addedIDP) => {
+        this.justCreated$.next(addedIDP.id);
+        this.loading = false;
       })
       .catch((error) => {
         this.toast.showError(error);
@@ -171,12 +197,12 @@ export class ProviderGithubESComponent {
   }
 
   public updateGenericOAuthProvider(): void {
-    if (this.provider) {
+    if (this.provider || this.justCreated$.value) {
       const req =
         this.serviceType === PolicyComponentServiceType.MGMT
           ? new MgmtUpdateGitHubEnterpriseServerProviderRequest()
           : new AdminUpdateGitHubEnterpriseServerProviderRequest();
-      req.setId(this.provider.id);
+      req.setId(this.provider?.id || this.justCreated$.value);
       req.setName(this.name?.value);
       req.setAuthorizationEndpoint(this.authorizationEndpoint?.value);
       req.setTokenEndpoint(this.tokenEndpoint?.value);