fix(navigation): i#3902 projects name include kanban or settings

javascript/apps/taiga/src/app/modules/project/data-access/+state/effects/project.effects.ts

@@ -305,6 +305,7 @@ export class ProjectEffects {
                   'project',
                   project.id,
                   project.slug,
+                  'overview',
                 ]);
               }
             }

javascript/apps/taiga/src/app/modules/project/data-access/guards/project-invitation.guard.ts

@@ -103,7 +103,12 @@ export const ProjectInvitationGuard = (route: ActivatedRouteSnapshot) => {
               }),
               tap((project) => {
                 if (project) {
-                  void router.navigate(['/project', project.id, project.slug]);
+                  void router.navigate([
+                    '/project',
+                    project.id,
+                    project.slug,
+                    'overview',
+                  ]);
                 }
                 return EMPTY;
               })

javascript/apps/taiga/src/app/modules/project/feature-kanban/project-feature-kanban.component.ts

@@ -9,7 +9,7 @@
 import { Location, CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { concatLatestFrom } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
@@ -28,15 +28,7 @@ import {
   Status,
   Workflow,
 } from '@taiga/data';
-import {
-  combineLatest,
-  filter,
-  map,
-  merge,
-  pairwise,
-  startWith,
-  take,
-} from 'rxjs';
+import { combineLatest, filter, map, merge, pairwise, take } from 'rxjs';
 import * as ProjectActions from '~/app/modules/project/data-access/+state/actions/project.actions';
 import {
   selectCurrentProject,
@@ -138,6 +130,7 @@ export class ProjectFeatureKanbanComponent {
     private wsService: WsService,
     private permissionService: PermissionsService,
     private router: Router,
+    private route: ActivatedRoute,
     private appService: AppService,
     private location: Location,
     public shortcutsService: ShortcutsService,
@@ -169,11 +162,7 @@ export class ProjectFeatureKanbanComponent {
     );
     this.state.connect(
       'showStoryDetail',
-      this.routeHistoryService.urlChanged.pipe(
-        map((it) => it.url),
-        startWith(this.router.url),
-        map((url) => url.includes('/stories/'))
-      )
+      this.route.data.pipe(map((data) => !!data.stories))
     );
 
     this.state.connect(
@@ -211,7 +200,12 @@ export class ProjectFeatureKanbanComponent {
         concatLatestFrom(() => this.project$.pipe(filterNil()))
       )
       .subscribe(([, project]) => {
-        void this.router.navigate(['project', project.id, project.slug]);
+        void this.router.navigate([
+          'project',
+          project.id,
+          project.slug,
+          'overview',
+        ]);
 
         this.appService.toastNotification({
           message: 'lost_kanban_access',

javascript/apps/taiga/src/app/modules/project/feature-navigation/components/project-navigation-menu/project-navigation-menu.component.html

@@ -22,7 +22,7 @@
           (focusout)="out()"
           [attr.data-text]="'project'"
           [class.active-dialog]="dialog.type === 'project'"
-          [routerLink]="['/project', project.id, project.slug]">
+          [routerLink]="['/project', project.id, project.slug, 'overview']">
           <tg-ui-avatar
             class="project-logo-image"
             type="light"
@@ -39,7 +39,7 @@
           <a
             class="workspace-data-project"
             data-test="project-name"
-            [routerLink]="['/project', project.id, project.slug]">
+            [routerLink]="['/project', project.id, project.slug, 'overview']">
             {{ project.name }}
           </a>
           <a
@@ -80,7 +80,12 @@
                 [attr.aria-label]="collapsed ? t('commons.overview') : null"
                 class="menu-option-item"
                 [class.active-dialog]="dialog.type === 'overview'"
-                [routerLink]="['/project', project.id, project.slug]"
+                [routerLink]="[
+                  '/project',
+                  project.id,
+                  project.slug,
+                  'overview'
+                ]"
                 routerLinkActive
                 #overviewActive="routerLinkActive"
                 [routerLinkActiveOptions]="{ exact: true }">
@@ -224,7 +229,7 @@
       [style.height.px]="dialog.mainLinkHeight">
       <a
         class="workspace-data-project"
-        [routerLink]="['/project', project.id, project.slug]">
+        [routerLink]="['/project', project.id, project.slug, 'overview']">
         {{ project.name }}
       </a>
       <a

javascript/apps/taiga/src/app/modules/project/feature-navigation/components/project-navigation-settings/project-navigation-settings.component.spec.ts

@@ -9,14 +9,9 @@
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { randDomainSuffix, randUuid, randWord } from '@ngneat/falso';
-import {
-  createComponentFactory,
-  mockProvider,
-  Spectator,
-} from '@ngneat/spectator/jest';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { ProjectMockFactory } from '@taiga/data';
 import { Subject } from 'rxjs';
-import { ProjectNavigationComponent } from '~/app/modules/project/feature-navigation/project-feature-navigation.component';
 import { RouteHistoryService } from '~/app/shared/route-history/route-history.service';
 import { getTranslocoModule } from '~/app/transloco/transloco-testing.module';
 import { ProjectNavigationSettingsComponent } from './project-navigation-settings.component';
@@ -33,27 +28,28 @@ describe('ProjectSettingsComponent', () => {
     imports: [getTranslocoModule(), RouterTestingModule],
     declareComponent: false,
     mocks: [RouteHistoryService],
-    providers: [
-      mockProvider(ProjectNavigationComponent, {
-        animationEvents$,
-      }),
-      {
-        provide: ActivatedRoute,
-        useValue: {
-          fragment,
-          snapshot: {
-            params: {
-              id: projectId,
-              slug: projectName,
-            },
-          },
-        },
-      },
-    ],
+    shallow: true,
   });
 
   beforeEach(() => {
     spectator = createComponent({
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            fragment,
+            snapshot: {
+              params: {
+                id: projectId,
+                slug: projectName,
+              },
+              data: {
+                settings: true,
+              },
+            },
+          },
+        },
+      ],
       detectChanges: false,
     });
     spectator.component.project = ProjectMockFactory();
@@ -70,6 +66,7 @@ describe('ProjectSettingsComponent', () => {
     spectator.component.getRouter = jest
       .fn()
       .mockReturnValue({ url: '/router' });
+    spectator.component.isSettings = jest.fn().mockReturnValue(false);
 
     const routeHistory =
       spectator.inject<RouteHistoryService>(RouteHistoryService);
@@ -88,6 +85,7 @@ describe('ProjectSettingsComponent', () => {
     spectator.component.getRouter = jest
       .fn()
       .mockReturnValue({ url: '/router' });
+    spectator.component.isSettings = jest.fn().mockReturnValue(false);
 
     const routeHistory =
       spectator.inject<RouteHistoryService>(RouteHistoryService);
@@ -106,21 +104,22 @@ describe('ProjectSettingsComponent', () => {
     spectator.component.getRouter = jest
       .fn()
       .mockReturnValue({ url: '/router' });
+    spectator.component.isSettings = jest.fn().mockReturnValue(true);
 
     const routeHistory =
       spectator.inject<RouteHistoryService>(RouteHistoryService);
     routeHistory.getPreviousUrl.mockReturnValue('');
 
-    spectator.component.getRouter = jest
-      .fn()
-      .mockReturnValue({ url: '/settings' });
+    spectator.component.getRouter = jest.fn().mockReturnValue({
+      url: `/settings`,
+    });
 
     spectator.detectChanges();
 
     spectator.component.getHistoryNav();
 
     expect(spectator.component.previousUrl).toEqual(
-      `/project/${projectId}/${projectName}`
+      `/project/${projectId}/${projectName}/overview`
     );
   });
 });

javascript/apps/taiga/src/app/modules/project/feature-navigation/components/project-navigation-settings/project-navigation-settings.component.ts

@@ -19,7 +19,12 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import {
+  ActivatedRoute,
+  Router,
+  RouterModule,
+  ActivatedRouteSnapshot,
+} from '@angular/router';
 import { TRANSLOCO_SCOPE, TranslocoDirective } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TuiSvgModule } from '@taiga-ui/core';
@@ -100,10 +105,12 @@ export class ProjectNavigationSettingsComponent implements OnInit {
   public getHistoryNav() {
     this.previousUrl =
       this.routeHistory.getPreviousUrl() || this.getRouter().url;
-    if (this.previousUrl.includes('/settings')) {
+    if (this.previousUrl.includes('/settings') && this.isSettings()) {
       const id: string = this.route.snapshot.params.id;
-      const slug: string = this.route.snapshot.params.slug;
-      this.previousUrl = `/project/${id}/${slug}`;
+      const slug: string =
+        this.route.snapshot.params.slug ||
+        (this.route.snapshot.data.project as Project).slug;
+      this.previousUrl = `/project/${id}/${slug}/overview`;
     }
   }
 
@@ -122,4 +129,14 @@ export class ProjectNavigationSettingsComponent implements OnInit {
   public getRouter() {
     return this.router;
   }
+
+  public isSettings() {
+    const getActiveRoute = (
+      route: ActivatedRouteSnapshot
+    ): ActivatedRouteSnapshot => {
+      return route.firstChild ? getActiveRoute(route.firstChild) : route;
+    };
+    const active = getActiveRoute(this.route.snapshot);
+    return !!active.data.settings;
+  }
 }

javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.spec.ts

@@ -8,7 +8,7 @@
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import {
   createComponentFactory,
   mockProvider,
@@ -28,12 +28,6 @@ describe('ProjectNavigationComponent', () => {
     imports: [CommonModule, getTranslocoModule()],
     schemas: [NO_ERRORS_SCHEMA],
     mocks: [LocalStorageService],
-    providers: [
-      mockProvider(Router, {
-        events: events$,
-        url: '/settings',
-      }),
-    ],
     shallow: true,
     overrideComponents: [
       [
@@ -50,6 +44,22 @@ describe('ProjectNavigationComponent', () => {
 
   beforeEach(() => {
     spectator = createComponent({
+      providers: [
+        mockProvider(Router, {
+          events: events$,
+          url: '/settings',
+        }),
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              data: {
+                settings: true,
+              },
+            },
+          },
+        },
+      ],
       detectChanges: false,
     });
 

javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.ts

@@ -26,7 +26,7 @@ import {
   Input,
   OnInit,
 } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { RxState } from '@rx-angular/state';
 import { Project } from '@taiga/data';
 import { Subject } from 'rxjs';
@@ -203,32 +203,27 @@ export class ProjectNavigationComponent implements OnInit, AfterViewInit {
   constructor(
     private el: ElementRef,
     private localStorage: LocalStorageService,
-    private router: Router
+    private router: Router,
+    private route: ActivatedRoute
   ) {}
 
   public ngOnInit() {
     this.collapsed = !!LocalStorageService.get('projectnav-collapsed');
     this.router.events.subscribe(() => {
-      !this.router.url.includes('/settings')
-        ? (this.showProjectSettings = false)
-        : (this.showProjectSettings = true);
+      this.showProjectSettings = this.isSettings();
     });
-    this.showProjectSettings = this.router.isActive(
-      this.router.createUrlTree(['project', this.project.id, 'settings']),
-      {
-        paths: 'subset',
-        queryParams: 'ignored',
-        fragment: 'ignored',
-        matrixParams: 'ignored',
-      }
-    );
+    this.showProjectSettings = this.isSettings();
   }
 
   public ngAfterViewInit() {
     const size = this.calcBlockSize();
     this.updateBlockSize(size);
   }
 
+  public isSettings() {
+    return !!this.route.snapshot.data.settings;
+  }
+
   public calcBlockSize() {
     const el = this.el.nativeElement as HTMLElement;
     const header = getComputedStyle(el).getPropertyValue('--header-height');