fix(console): back button in detail view should not navigate to create dialog again (#6018)

* fix: add double router back if new

* fix: add comments to back directive

* fix: same behavior for user creation

* fix: add query param to app, project role create

* fix: add changes suggested by @peintnermax

---------

Co-authored-by: Max Peintner <max@caos.ch>

console/src/app/directives/back/back.directive.ts

@@ -1,16 +1,33 @@
 import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { take } from 'rxjs';
 import { NavigationService } from 'src/app/services/navigation.service';
 
 @Directive({
   selector: '[cnslBack]',
 })
 export class BackDirective {
+  new: Boolean = false;
   @HostListener('click')
   onClick(): void {
     this.navigation.back();
+    // Go back again to avoid create dialog starts again
+    if (this.new) {
+      this.navigation.back();
+    }
   }
 
-  constructor(private navigation: NavigationService, private elRef: ElementRef, private renderer2: Renderer2) {
+  constructor(
+    private navigation: NavigationService,
+    private elRef: ElementRef,
+    private renderer2: Renderer2,
+    private route: ActivatedRoute,
+  ) {
+    // Check if a new element was created using a create dialog
+    this.route.queryParams.pipe(take(1)).subscribe((params) => {
+      this.new = params['new'];
+    });
+
     if (navigation.isBackPossible) {
       // this.renderer2.removeStyle(this.elRef.nativeElement, 'visibility');
     } else {

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

@@ -378,7 +378,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
           if (resp.clientId || resp.clientSecret) {
             this.showSavedDialog(resp);
           } else {
-            this.router.navigate(['projects', this.projectId, 'apps', resp.appId]);
+            this.router.navigate(['projects', this.projectId, 'apps', resp.appId], { queryParams: { new: true } });
           }
         })
         .catch((error) => {
@@ -396,7 +396,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
           if (resp.clientId || resp.clientSecret) {
             this.showSavedDialog(resp);
           } else {
-            this.router.navigate(['projects', this.projectId, 'apps', resp.appId]);
+            this.router.navigate(['projects', this.projectId, 'apps', resp.appId], { queryParams: { new: true } });
           }
         })
         .catch((error) => {
@@ -410,7 +410,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
         .addSAMLApp(this.samlAppRequest)
         .then((resp) => {
           this.loading = false;
-          this.router.navigate(['projects', this.projectId, 'apps', resp.appId]);
+          this.router.navigate(['projects', this.projectId, 'apps', resp.appId], { queryParams: { new: true } });
         })
         .catch((error) => {
           this.loading = false;
@@ -436,7 +436,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
     });
 
     dialogRef.afterClosed().subscribe(() => {
-      this.router.navigate(['projects', this.projectId, 'apps', added.appId]);
+      this.router.navigate(['projects', this.projectId, 'apps', added.appId], { queryParams: { new: true } });
     });
   }
 

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

@@ -88,7 +88,7 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
       .bulkAddProjectRoles(this.projectId, rolesToAdd)
       .then(() => {
         this.toast.showInfo('PROJECT.TOAST.ROLESCREATED', true);
-        this.router.navigate(['projects', this.projectId], { queryParams: { id: 'roles' } });
+        this.router.navigate(['projects', this.projectId], { queryParams: { id: 'roles', new: true } });
       })
       .catch((error) => {
         this.toast.showError(error);

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

@@ -33,7 +33,7 @@ export class ProjectCreateComponent {
       .addProject(this.project)
       .then((resp: AddProjectResponse.AsObject) => {
         this.toast.showInfo('PROJECT.TOAST.CREATED', true);
-        this.router.navigate(['projects', resp.id]);
+        this.router.navigate(['projects', resp.id], { queryParams: { new: true } });
       })
       .catch((error) => {
         this.toast.showError(error);

console/src/app/pages/users/user-create-machine/user-create-machine.component.ts

@@ -71,7 +71,7 @@ export class UserCreateMachineComponent implements OnDestroy {
         this.toast.showInfo('USER.TOAST.CREATED', true);
         const id = data.userId;
         if (id) {
-          this.router.navigate(['users', id]);
+          this.router.navigate(['users', id], { queryParams: { new: true } });
         }
       })
       .catch((error: any) => {

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

@@ -183,7 +183,7 @@ export class UserCreateComponent implements OnInit, OnDestroy {
       .then((data) => {
         this.loading = false;
         this.toast.showInfo('USER.TOAST.CREATED', true);
-        this.router.navigate(['users', data.userId]);
+        this.router.navigate(['users', data.userId], { queryParams: { new: true } });
       })
       .catch((error) => {
         this.loading = false;