fix(console-v2): app detail layout, create layout stepper (#3680)

* app detail

* app-detail layout

* app layout, create layout component, cleanup

* lint

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

@@ -1,34 +1,23 @@
-<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>
+<cnsl-create-layout title="{{ 'PROJECT.PAGES.CREATE' | translate }}" [createSteps]="1" [currentCreateStep]="1">
+  <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>
     </div>
 
-    <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>
-        </div>
-
-        <button
-          color="primary"
-          mat-raised-button
-          class="continue-button"
-          [disabled]="!project.name"
-          cdkFocusInitial
-          type="submit"
-          [attr.data-e2e]="'continue-button'"
-        >
-          {{ 'ACTIONS.CONTINUE' | translate }}
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
+    <button
+      color="primary"
+      mat-raised-button
+      class="continue-button"
+      [disabled]="!project.name"
+      cdkFocusInitial
+      type="submit"
+      [attr.data-e2e]="'continue-button'"
+    >
+      {{ 'ACTIONS.CONTINUE' | translate }}
+    </button>
+  </form></cnsl-create-layout
+>

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

@@ -2,21 +2,6 @@ h1 {
   font-weight: 500;
 }
 
-.abort-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-}
-
-.project-create-content {
-  padding-left: 4.5rem;
-}
-
 .margin-right {
   margin-right: 0.5rem;
 }

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

@@ -5,22 +5,24 @@ import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
+import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 
 import { ProjectCreateRoutingModule } from './project-create-routing.module';
 import { ProjectCreateComponent } from './project-create.component';
 
 @NgModule({
-    declarations: [ProjectCreateComponent],
-    imports: [
-        A11yModule,
-        ProjectCreateRoutingModule,
-        CommonModule,
-        FormsModule,
-        InputModule,
-        MatButtonModule,
-        MatIconModule,
-        TranslateModule,
-    ],
+  declarations: [ProjectCreateComponent],
+  imports: [
+    A11yModule,
+    ProjectCreateRoutingModule,
+    CommonModule,
+    FormsModule,
+    CreateLayoutModule,
+    InputModule,
+    MatButtonModule,
+    MatIconModule,
+    TranslateModule,
+  ],
 })
-export class ProjectCreateModule { }
+export class ProjectCreateModule {}