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/pages/projects/project-create/project-create.component.html

@@ -1,26 +1,30 @@
-<div class="container">
+<div class="max-width-container">
+  <div class="enlarged-container">
     <div class="abort-container">
-        <button (click)="close()" mat-icon-button>
-            <mat-icon>close</mat-icon>
-        </button>
-        <span class="abort">{{ 'PROJECT.PAGES.CREATE' | translate }}</span><span class="abort-2">Step
-            {{ currentCreateStep }} of
-            {{ createSteps }}</span>
+      <button (click)="close()" mat-icon-button>
+        <mat-icon>close</mat-icon>
+      </button>
+      <span class="abort">{{ 'PROJECT.PAGES.CREATE' | translate }}</span><span class="abort-2">Step
+        {{ currentCreateStep }} of
+        {{ createSteps }}</span>
     </div>
 
-    <h1>{{'PROJECT.PAGES.CREATE_DESC' | translate}}</h1>
-    <form cdkFocusRegionStart (ngSubmit)="saveProject()">
+    <div class="project-create-content">
+      <h1>{{'PROJECT.PAGES.CREATE_DESC' | translate}}</h1>
+      <form cdkFocusRegionStart (ngSubmit)="saveProject()">
         <div class="column">
-            <cnsl-form-field class="formfield" hintLabel="The name is required!">
-                <cnsl-label>{{'PROJECT.NAME' | translate}}</cnsl-label>
-                <input cnslInput cdkFocusInitial autofocus [(ngModel)]="project.name"
-                    [ngModelOptions]="{ standalone: true }" />
-            </cnsl-form-field>
+          <cnsl-form-field class="formfield" hintLabel="The name is required!">
+            <cnsl-label>{{'PROJECT.NAME' | translate}}</cnsl-label>
+            <input cnslInput cdkFocusInitial autofocus [(ngModel)]="project.name"
+              [ngModelOptions]="{ standalone: true }" />
+          </cnsl-form-field>
         </div>
 
         <button color="primary" mat-raised-button class="continue-button" [disabled]="!project.name" cdkFocusInitial
-            type="submit">
-            {{'ACTIONS.CONTINUE' | translate}}
+          type="submit" [attr.data-e2e]="'continue-button'">
+          {{'ACTIONS.CONTINUE' | translate}}
         </button>
-    </form>
+      </form>
+    </div>
+  </div>
 </div>

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

@@ -2,33 +2,29 @@ h1 {
   font-weight: 500;
 }
 
-.container {
-  padding: 4rem 4rem 2rem 4rem;
+.abort-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2rem;
 
-  @media only screen and (max-width: 450px) {
-    padding: 4rem 1rem 2rem 1rem;
+  .abort {
+    font-size: 1.2rem;
+    margin-left: 2rem;
   }
 
-  .abort-container {
-    display: flex;
-    align-items: center;
-    margin-bottom: 2rem;
-
-    .abort {
-      font-size: 1.2rem;
-      margin-left: 2rem;
-    }
-
-    .abort-2 {
-      font-size: 1.2rem;
-      margin-left: 2rem;
-      white-space: nowrap;
-    }
+  .abort-2 {
+    font-size: 1.2rem;
+    margin-left: 2rem;
+    white-space: nowrap;
   }
 }
 
+.project-create-content {
+  padding-left: 4.5rem;
+}
+
 .margin-right {
-  margin-right: .5rem;
+  margin-right: 0.5rem;
 }
 
 .column {
@@ -36,7 +32,8 @@ h1 {
   flex-direction: column;
 
   .formfield {
-    width: 400px;
+    max-width: 400px;
+    display: block;
 
     &.autocomplete {
       margin-top: 1rem;
@@ -46,7 +43,7 @@ h1 {
   .slider {
     margin-top: 2rem;
     margin-bottom: 1rem;
-    font-size: .8rem;
+    font-size: 0.8rem;
   }
 
   .access-token {
@@ -57,6 +54,6 @@ h1 {
 .continue-button {
   margin-top: 3rem;
   display: block;
-  padding: .5rem 4rem;
-  border-radius: .5rem;
+  padding: 0.5rem 4rem;
+  border-radius: 0.5rem;
 }

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

@@ -2,6 +2,7 @@ import { Location } from '@angular/common';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { AddProjectRequest, AddProjectResponse } from 'src/app/proto/generated/zitadel/management_pb';
+import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -18,7 +19,19 @@ export class ProjectCreateComponent {
     private toast: ToastService,
     private mgmtService: ManagementService,
     private _location: Location,
-  ) { }
+    breadcrumbService: BreadcrumbService,
+  ) {
+    const iambread = new Breadcrumb({
+      type: BreadcrumbType.IAM,
+      name: 'IAM',
+      routerLink: ['/system'],
+    });
+    const bread: Breadcrumb = {
+      type: BreadcrumbType.ORG,
+      routerLink: ['/org'],
+    };
+    breadcrumbService.setBreadcrumb([iambread, bread]);
+  }
 
   public createSteps: number = 1;
   public currentCreateStep: number = 1;
@@ -27,9 +40,10 @@ export class ProjectCreateComponent {
     this.mgmtService
       .addProject(this.project)
       .then((resp: AddProjectResponse.AsObject) => {
+        this.toast.showInfo('PROJECT.TOAST.CREATED', true)
         this.router.navigate(['projects', resp.id]);
       })
-      .catch(error => {
+      .catch((error) => {
         this.toast.showError(error);
       });
   }