feat(console): onboarding flow (#5225)

Implements an onboarding UI for users

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AppCreateComponent } from './app-create.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AppCreateComponent,
+    data: { animation: 'DetailPage' },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AppCreateRoutingModule {}

console/src/app/pages/app-create/app-create.component.html

@@ -0,0 +1,26 @@
+<cnsl-create-layout title="{{ 'APP.PAGES.CREATE' | translate }}" (closed)="close()">
+  <div class="app-create-main-content">
+    <h1>{{ 'APP.PAGES.CREATE_SELECT_PROJECT' | translate }}</h1>
+
+    <cnsl-search-project-autocomplete
+      class="block"
+      [autocompleteType]="ProjectAutocompleteType.PROJECT_OWNED"
+      (selectionChanged)="selectProject($any($event.project))"
+    >
+    </cnsl-search-project-autocomplete>
+
+    <div [innerHtml]="'APP.PAGES.CREATE_NEW_PROJECT' | translate : { url: '/projects/create' }"></div>
+
+    <div class="app-create-btn-container">
+      <button
+        color="primary"
+        mat-raised-button
+        class="continue-button"
+        [disabled]="!projectId"
+        (click)="goToAppCreatePage()"
+      >
+        {{ 'ACTIONS.CONTINUE' | translate }}
+      </button>
+    </div>
+  </div>
+</cnsl-create-layout>

console/src/app/pages/app-create/app-create.component.scss

@@ -0,0 +1,25 @@
+h1 {
+  font-weight: 500;
+}
+
+.app-create-main-content {
+  max-width: 35rem;
+
+  .app-create-btn-container {
+    display: flex;
+    align-items: center;
+    margin-top: 3rem;
+
+    .continue-button {
+      margin-top: 3rem;
+      display: block;
+      padding: 0.5rem 4rem;
+      border-radius: 0.5rem;
+    }
+  }
+
+  .complexity-view {
+    width: 100%;
+    margin: 0 0.5rem;
+  }
+}

console/src/app/pages/app-create/app-create.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { OrgCreateComponent } from './org-create.component';
+
+describe('OrgCreateComponent', () => {
+  let component: OrgCreateComponent;
+  let fixture: ComponentFixture<OrgCreateComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [OrgCreateComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrgCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/pages/app-create/app-create.component.ts

@@ -0,0 +1,45 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
+import { Router } from '@angular/router';
+import { take } from 'rxjs/operators';
+import { ProjectAutocompleteType } from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.component';
+import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
+import { SetUpOrgRequest } from 'src/app/proto/generated/zitadel/admin_pb';
+import { PasswordComplexityPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
+import { Project } from 'src/app/proto/generated/zitadel/project_pb';
+import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
+
+@Component({
+  selector: 'cnsl-app-create',
+  templateUrl: './app-create.component.html',
+  styleUrls: ['./app-create.component.scss'],
+})
+export class AppCreateComponent {
+  public projectId: string = '';
+  public ProjectAutocompleteType: any = ProjectAutocompleteType;
+
+  constructor(private router: Router, breadcrumbService: BreadcrumbService) {
+    const bread: Breadcrumb = {
+      type: BreadcrumbType.ORG,
+      routerLink: ['/org'],
+    };
+    breadcrumbService.setBreadcrumb([bread]);
+  }
+
+  public goToAppCreatePage(): void {
+    this.router.navigate(['/projects', this.projectId, 'apps', 'create']);
+  }
+
+  public close(): void {
+    window.history.back();
+  }
+
+  public selectProject(project: Project.AsObject): void {
+    if (project.id) {
+      this.projectId = project.id;
+    }
+  }
+}

console/src/app/pages/app-create/app-create.module.ts

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
+import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
+import { InputModule } from 'src/app/modules/input/input.module';
+import { PasswordComplexityViewModule } from 'src/app/modules/password-complexity-view/password-complexity-view.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
+
+import { SearchProjectAutocompleteModule } from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.module';
+import { AppCreateRoutingModule } from './app-create-routing.module';
+import { AppCreateComponent } from './app-create.component';
+
+@NgModule({
+  declarations: [AppCreateComponent],
+  imports: [
+    AppCreateRoutingModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    InfoSectionModule,
+    InputModule,
+    MatButtonModule,
+    MatIconModule,
+    SearchProjectAutocompleteModule,
+    MatSelectModule,
+    CreateLayoutModule,
+    HasRolePipeModule,
+    TranslateModule,
+    HasRoleModule,
+    MatCheckboxModule,
+    PasswordComplexityViewModule,
+    MatSlideToggleModule,
+  ],
+})
+export default class AppCreateModule {}

console/src/app/pages/home/home.component.html

@@ -1,10 +1,11 @@
 <div class="max-width-container">
   <div class="home-wrapper enlarged-container">
-    <div class="header">
-      <h1 class="title" data-e2e="authenticated-welcome">{{ 'HOME.WELCOME' | translate }}</h1>
-    </div>
-
-    <cnsl-shortcuts></cnsl-shortcuts>
+    <ng-container *ngIf="['iam.read$'] | hasRole | async; else defaultHome">
+      <cnsl-onboarding></cnsl-onboarding>
+    </ng-container>
+    <ng-template #defaultHome>
+      <cnsl-shortcuts></cnsl-shortcuts>
+    </ng-template>
 
     <p class="disclaimer cnsl-secondary-text">{{ 'HOME.DISCLAIMER' | translate }}</p>
 

console/src/app/pages/home/home.component.scss

@@ -125,6 +125,7 @@
       font-size: 14px;
       margin-top: 0;
       margin-bottom: 5rem;
+      font-style: italic;
     }
 
     .fill-space {

console/src/app/pages/home/home.module.ts

@@ -9,6 +9,8 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { ShortcutsModule } from 'src/app/modules/shortcuts/shortcuts.module';
 
+import OnboardingModule from 'src/app/modules/onboarding/onboarding.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 import { HomeRoutingModule } from './home-routing.module';
 import { HomeComponent } from './home.component';
 
@@ -20,10 +22,12 @@ import { HomeComponent } from './home.component';
     HasRoleModule,
     HomeRoutingModule,
     MatButtonModule,
+    HasRolePipeModule,
     TranslateModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
     ShortcutsModule,
+    OnboardingModule,
     MatRippleModule,
   ],
 })

console/src/app/pages/instance-settings/instance-settings.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { take } from 'rxjs';
+import { Subject, takeUntil } from 'rxjs';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
@@ -27,7 +27,7 @@ import {
   templateUrl: './instance-settings.component.html',
   styleUrls: ['./instance-settings.component.scss'],
 })
-export class InstanceSettingsComponent {
+export class InstanceSettingsComponent implements OnDestroy {
   public id: string = '';
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
   public settingsList: SidenavSetting[] = [
@@ -52,6 +52,8 @@ export class InstanceSettingsComponent {
     SECRETS,
     SECURITY,
   ];
+
+  private destroy$: Subject<void> = new Subject();
   constructor(breadcrumbService: BreadcrumbService, activatedRoute: ActivatedRoute) {
     const breadcrumbs = [
       new Breadcrumb({
@@ -62,11 +64,16 @@ export class InstanceSettingsComponent {
     ];
     breadcrumbService.setBreadcrumb(breadcrumbs);
 
-    activatedRoute.queryParams.pipe(take(1)).subscribe((params: Params) => {
+    activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params: Params) => {
       const { id } = params;
       if (id) {
         this.id = id;
       }
     });
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

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

@@ -19,6 +19,15 @@ const routes: Routes = [
       roles: ['project.create'],
     },
   },
+  {
+    path: 'app-create',
+    canActivate: [RoleGuard],
+    data: {
+      animation: 'AddPage',
+      roles: ['project.app.write'],
+    },
+    loadChildren: () => import('../app-create/app-create.module'),
+  },
   {
     path: ':projectid',
     loadChildren: () => import('./owned-projects/owned-projects.module'),