From c98307f70c7db3c73c52d46d0fa6093d6fbc4898 Mon Sep 17 00:00:00 2001 From: Miguel Cabrerizo <30386061+doncicuto@users.noreply.github.com> Date: Wed, 14 Jun 2023 09:02:07 +0200 Subject: [PATCH] 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 --- .../src/app/directives/back/back.directive.ts | 19 ++++++++++++++++++- .../apps/app-create/app-create.component.ts | 8 ++++---- .../project-role-create.component.ts | 2 +- .../project-create.component.ts | 2 +- .../user-create-machine.component.ts | 2 +- .../user-create/user-create.component.ts | 2 +- 6 files changed, 26 insertions(+), 9 deletions(-) diff --git a/console/src/app/directives/back/back.directive.ts b/console/src/app/directives/back/back.directive.ts index b9548f46f4..ca6b0a00d6 100644 --- a/console/src/app/directives/back/back.directive.ts +++ b/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 { diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.ts b/console/src/app/pages/projects/apps/app-create/app-create.component.ts index e38be0f680..dcdf1b3d65 100644 --- a/console/src/app/pages/projects/apps/app-create/app-create.component.ts +++ b/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 } }); }); } diff --git a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts index 374902a431..571ca48a2a 100644 --- a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts +++ b/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); diff --git a/console/src/app/pages/projects/project-create/project-create.component.ts b/console/src/app/pages/projects/project-create/project-create.component.ts index fdff97946e..a20e3ae73b 100644 --- a/console/src/app/pages/projects/project-create/project-create.component.ts +++ b/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); diff --git a/console/src/app/pages/users/user-create-machine/user-create-machine.component.ts b/console/src/app/pages/users/user-create-machine/user-create-machine.component.ts index a402a7f1dd..ff4d7035d3 100644 --- a/console/src/app/pages/users/user-create-machine/user-create-machine.component.ts +++ b/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) => { diff --git a/console/src/app/pages/users/user-create/user-create.component.ts b/console/src/app/pages/users/user-create/user-create.component.ts index c875babb4b..50daacca27 100644 --- a/console/src/app/pages/users/user-create/user-create.component.ts +++ b/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;