fix(breadcrumbs): Setting proper provider and institution name to the breadcrumbs (#584)

Author: rrromchIk

src/app/core/components/breadcrumb/breadcrumb.component.html

@@ -2,8 +2,8 @@
   <div class="breadcrumbs flex align-items-center gap-2 md:p-5 md:pb-0 xl:p-0">
     <osf-icon iconClass="fas fa-home"></osf-icon>
     <p>/</p>
-    @for (url of parsedUrl(); track $index; let l = $last) {
-      {{ url }}
+    @for (breadcrumb of breadcrumbs(); track $index; let l = $last) {
+      {{ breadcrumb }}
       @if (!l) {
         /
       }

src/app/core/components/breadcrumb/breadcrumb.component.ts

@@ -1,11 +1,16 @@
+import { select } from '@ngxs/store';
+
 import { filter, map, startWith } from 'rxjs';
 
 import { Component, computed, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
 
+import { ProviderSelectors } from '@core/store/provider';
 import { RouteData } from '@osf/core/models';
+import { InstitutionsAdminSelectors } from '@osf/features/admin-institutions/store';
 import { IconComponent } from '@osf/shared/components';
+import { InstitutionsSearchSelectors } from '@shared/stores/institutions-search';
 
 @Component({
   selector: 'osf-breadcrumb',
@@ -17,14 +22,9 @@ export class BreadcrumbComponent {
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
 
-  readonly url = toSignal(
-    this.router.events.pipe(
-      filter((event) => event instanceof NavigationEnd),
-      map(() => this.router.url),
-      startWith(this.router.url)
-    ),
-    { initialValue: this.router.url }
-  );
+  currentProvider = select(ProviderSelectors.getCurrentProvider);
+  institution = select(InstitutionsSearchSelectors.getInstitution);
+  institutionDashboard = select(InstitutionsAdminSelectors.getInstitution);
 
   readonly routeData = toSignal(
     this.router.events.pipe(
@@ -37,13 +37,48 @@ export class BreadcrumbComponent {
 
   readonly showBreadcrumb = computed(() => this.routeData()?.skipBreadcrumbs !== true);
 
-  readonly parsedUrl = computed(() =>
-    this.url()
-      .split('?')[0]
-      .split('/')
-      .filter(Boolean)
-      .map((segment) => segment.replace(/-/g, ' '))
-  );
+  readonly breadcrumbs = computed<string[]>(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const currentRoute = this.routeData(); // Trigger recomputation when route data changes
+    const providerName = this.currentProvider()?.name;
+    const institution = this.institution()?.name;
+    const institutionDashboard = this.institutionDashboard()?.name;
+
+    return this.buildBreadcrumbs(this.route.root.snapshot, providerName, institution ?? institutionDashboard);
+  });
+
+  private buildBreadcrumbs(
+    route: ActivatedRouteSnapshot,
+    providerName: string | undefined,
+    institutionName: string | undefined,
+    segments: string[] = []
+  ): string[] {
+    for (const segment of route.url) {
+      const segmentPath = segment.path;
+      let label = segmentPath.replace(/-/g, ' ');
+
+      const isProviderIdSegment = route.params['providerId'] === segmentPath;
+      const isInstitutionIdSegment = route.params['institutionId'] === segmentPath;
+
+      if (isProviderIdSegment && providerName) {
+        label = providerName;
+      }
+
+      if (isInstitutionIdSegment && institutionName) {
+        label = institutionName;
+      }
+
+      if (label && label.trim().length > 0) {
+        segments.push(label);
+      }
+    }
+
+    if (route.firstChild) {
+      return this.buildBreadcrumbs(route.firstChild, providerName, institutionName, segments);
+    }
+
+    return segments;
+  }
 
   private getCurrentRouteData(): RouteData {
     let currentRoute = this.route;

src/app/core/constants/ngxs-states.constant.ts

@@ -1,6 +1,7 @@
 import { ProviderState } from '@core/store/provider';
 import { UserState } from '@core/store/user';
 import { UserEmailsState } from '@core/store/user-emails';
+import { InstitutionsAdminState } from '@osf/features/admin-institutions/store';
 import { FilesState } from '@osf/features/files/store';
 import { MetadataState } from '@osf/features/metadata/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
@@ -9,6 +10,7 @@ import { AddonsState, CurrentResourceState, WikiState } from '@osf/shared/stores
 import { BannersState } from '@osf/shared/stores/banners';
 import { GlobalSearchState } from '@shared/stores/global-search';
 import { InstitutionsState } from '@shared/stores/institutions';
+import { InstitutionsSearchState } from '@shared/stores/institutions-search';
 import { LicensesState } from '@shared/stores/licenses';
 import { MyResourcesState } from '@shared/stores/my-resources';
 import { RegionsState } from '@shared/stores/regions';
@@ -20,6 +22,8 @@ export const STATES = [
   ProviderState,
   MyResourcesState,
   InstitutionsState,
+  InstitutionsAdminState,
+  InstitutionsSearchState,
   ProjectOverviewState,
   WikiState,
   RegistrationsState,

src/app/features/admin-institutions/admin-institutions.component.ts

@@ -37,7 +37,7 @@ export class AdminInstitutionsComponent implements OnInit {
   selectedTab = AdminInstitutionResourceTab.Summary;
 
   ngOnInit() {
-    const institutionId = this.route.snapshot.params['institution-id'];
+    const institutionId = this.route.snapshot.params['institutionId'];
 
     if (institutionId) {
       this.actions.fetchInstitution(institutionId);

src/app/features/admin-institutions/routes.ts

@@ -1,5 +1,3 @@
-import { provideStates } from '@ngxs/store';
-
 import { Routes } from '@angular/router';
 
 import {
@@ -12,13 +10,10 @@ import {
 
 import { AdminInstitutionsComponent } from './admin-institutions.component';
 
-import { InstitutionsAdminState } from 'src/app/features/admin-institutions/store';
-
 export const routes: Routes = [
   {
     path: '',
     component: AdminInstitutionsComponent,
-    providers: [provideStates([InstitutionsAdminState])],
     children: [
       {
         path: '',

src/app/features/institutions/institutions.routes.ts

@@ -1,9 +1,6 @@
-import { provideStates } from '@ngxs/store';
-
 import { Routes } from '@angular/router';
 
 import { authGuard } from '@core/guards';
-import { InstitutionsSearchState } from '@shared/stores/institutions-search';
 
 import { InstitutionsComponent } from './institutions.component';
 import { InstitutionsListComponent, InstitutionsSearchComponent } from './pages';
@@ -19,12 +16,11 @@ export const routes: Routes = [
         component: InstitutionsListComponent,
       },
       {
-        path: ':institution-id',
+        path: ':institutionId',
         component: InstitutionsSearchComponent,
-        providers: [provideStates([InstitutionsSearchState])],
       },
       {
-        path: ':institution-id/dashboard',
+        path: ':institutionId/dashboard',
         canActivate: [authGuard],
         loadChildren: () => import('../admin-institutions/routes').then((inst) => inst.routes),
       },

src/app/features/institutions/pages/institutions-search/institutions-search.component.ts

@@ -33,7 +33,7 @@ export class InstitutionsSearchComponent implements OnInit {
   readonly resourceTabOptions = SEARCH_TAB_OPTIONS;
 
   ngOnInit(): void {
-    const institutionId = this.route.snapshot.params['institution-id'];
+    const institutionId = this.route.snapshot.params['institutionId'];
     if (institutionId) {
       this.actions.fetchInstitution(institutionId).subscribe({
         next: () => {