feat(console): integrate app (#7417)

* docs, frameworks view * project select, integrate app page * fix search project autocomplete * framework autocomplete * framwork select component, integrate, mapping to oidc config * param * fix route handler * setname projectid context * app-create page without context * show description of app type, info section * redirects section * updatevalue observable * fix redirect uris section * i18n * setup config * backbutton behavior, cleanup * cleanup * lint * allow other framework jump off * dev mode warning * navigate to project * rm import * i18n, guide link * edit name dialog * show warning for duplicate name
2026-10-20 14:34:25 +00:00 · 2024-02-28 16:52:21 +00:00
parent f4c72cbe14
commit 0fcdfe460c
64 changed files with 2381 additions and 176 deletions
@@ -0,0 +1,88 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, effect, signal } from '@angular/core';
+import { ActivatedRoute, Params, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import frameworkDefinition from '../../../../../docs/frameworks.json';
+import { MatButtonModule } from '@angular/material/button';
+import { listFrameworks, hasFramework, getFramework } from '@netlify/framework-info';
+import { FrameworkName } from '@netlify/framework-info/lib/generated/frameworkNames';
+import { FrameworkAutocompleteComponent } from '../framework-autocomplete/framework-autocomplete.component';
+import { Framework } from '../quickstart/quickstart.component';
+import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
+import {
+  MatDialog,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogModule,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { FrameworkChangeDialogComponent } from './framework-change-dialog.component';
+
+@Component({
+  standalone: true,
+  selector: 'cnsl-framework-change',
+  templateUrl: './framework-change.component.html',
+  styleUrls: ['./framework-change.component.scss'],
+  imports: [TranslateModule, RouterModule, CommonModule, MatButtonModule, FrameworkAutocompleteComponent],
+})
+export class FrameworkChangeComponent implements OnInit, OnDestroy {
+  private destroy$: Subject<void> = new Subject();
+  public framework: BehaviorSubject<Framework | undefined> = new BehaviorSubject<Framework | undefined>(undefined);
+  public showFrameworkAutocomplete = signal<boolean>(false);
+  @Output() public frameworkChanged: EventEmitter<Framework> = new EventEmitter();
+  public frameworks: Framework[] = frameworkDefinition.map((f) => {
+    return {
+      ...f,
+      fragment: '',
+      imgSrcDark: `assets${f.imgSrcDark}`,
+      imgSrcLight: `assets${f.imgSrcLight ? f.imgSrcLight : f.imgSrcDark}`,
+    };
+  });
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private dialog: MatDialog,
+  ) {
+    this.framework.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+      this.frameworkChanged.emit(value);
+    });
+  }
+
+  public ngOnInit() {
+    this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params: Params) => {
+      const { framework } = params;
+      if (framework) {
+        this.findFramework(framework);
+      }
+    });
+  }
+
+  public ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  public findFramework(id: string) {
+    const temp = this.frameworks.find((f) => f.id === id);
+    this.framework.next(temp);
+    this.frameworkChanged.emit(temp);
+  }
+
+  public openDialog(): void {
+    const ref = this.dialog.open(FrameworkChangeDialogComponent, {
+      width: '400px',
+      data: {
+        framework: this.framework.value,
+        frameworks: this.frameworks,
+      },
+    });
+
+    ref.afterClosed().subscribe((resp) => {
+      if (resp) {
+        this.framework.next(resp);
+      }
+    });
+  }
+}