fix(ui): put wizard showing in AfterViewInit to prevent undefined err…

…or (#203)

frontend/cloud-ui/src/app/components/dashboard-placeholder/dashboard-placeholder.component.ts

@@ -1,6 +1,6 @@
 import {GlobalPositionStrategy} from '@angular/cdk/overlay';
 import {AsyncPipe} from '@angular/common';
-import {Component, inject, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, inject, OnInit, TemplateRef, ViewChild} from '@angular/core';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {faPlus} from '@fortawesome/free-solid-svg-icons';
 import {combineLatest, first} from 'rxjs';
@@ -33,7 +33,7 @@ import {UsersService} from '../../services/users.service';
   ],
   templateUrl: './dashboard-placeholder.component.html',
 })
-export class DashboardPlaceholderComponent implements OnInit {
+export class DashboardPlaceholderComponent implements AfterViewInit {
   private overlay = inject(OverlayService);
   private readonly deploymentTargets = inject(DeploymentTargetsService);
   public readonly deploymentTargets$ = this.deploymentTargets.list();
@@ -49,7 +49,7 @@ export class DashboardPlaceholderComponent implements OnInit {
 
   protected readonly faPlus = faPlus;
 
-  ngOnInit() {
+  ngAfterViewInit() {
     combineLatest([this.applications$])
       .pipe(first())
       .subscribe(([apps]) => {

frontend/cloud-ui/src/app/deployments/deployment-targets.component.ts

@@ -1,6 +1,6 @@
 import {GlobalPositionStrategy} from '@angular/cdk/overlay';
 import {AsyncPipe, DatePipe, NgOptimizedImage} from '@angular/common';
-import {Component, inject, Input, OnDestroy, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, inject, Input, OnDestroy, OnInit, TemplateRef, ViewChild} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {faMagnifyingGlass, faPen, faPlus, faShip, faTrash, faXmark} from '@fortawesome/free-solid-svg-icons';
@@ -43,7 +43,7 @@ import {filteredByFormControl} from '../../util/filter';
   standalone: true,
   animations: [modalFlyInOut, drawerFlyInOut],
 })
-export class DeploymentTargetsComponent implements OnInit, OnDestroy {
+export class DeploymentTargetsComponent implements AfterViewInit, OnDestroy {
   public readonly auth = inject(AuthService);
   private readonly toast = inject(ToastService);
   @Input('fullVersion') fullVersion = false;
@@ -95,14 +95,13 @@ export class DeploymentTargetsComponent implements OnInit, OnDestroy {
     }),
   });
 
-  ngOnInit() {
+  ngAfterViewInit() {
     if (this.fullVersion) {
       const always = false;
-      const isCustomer = this.auth.getClaims().role === 'customer';
       combineLatest([this.applications$, this.deploymentTargets$])
         .pipe(first())
         .subscribe(([apps, dts]) => {
-          if (always || (isCustomer && apps.length > 0 && dts.length === 0)) {
+          if (always || (this.auth.hasRole('customer') && apps.length > 0 && dts.length === 0)) {
             this.openWizard();
           }
         });

frontend/cloud-ui/src/app/services/overlay.service.ts

@@ -107,6 +107,8 @@ export class OverlayService {
         new TemplatePortal(templateRefOrComponentType, this.viewContainerRef, injector)
       );
       dialogRef.closed().subscribe(() => embeddedViewRef.destroy());
+    } else if (!templateRefOrComponentType) {
+      throw new Error('templateRefOrComponentType is ' + templateRefOrComponentType);
     } else {
       const componentRef = overlayRef.attach(new ComponentPortal(templateRefOrComponentType, null, injector));
       dialogRef.closed().subscribe(() => componentRef.destroy());