Use displayId in work package URLs for semantic identifier routing

Routes already accept semantic identifiers (e.g. PROJ-7) via
WP_ID_URL_PATTERN, but all frontend-generated links still used
numeric PKs. This wires displayId into every navigation path so
the browser URL bar shows the semantic form when available.

Key design decision: data-work-package-id attributes on <a>
elements stay numeric — the selection/hover system is keyed by
PK. Only the href gets the semantic ID via a new optional
routingId parameter on UiStateLinkBuilder.

Changes span table links (ID column, linked WP fields, details
action), navigation handlers (list view, embedded tables, boards,
BCF, calendar), breadcrumbs, tabs, hierarchy, single view,
context menu, quickinfo macro, and post-creation redirect.

API-only paths (time entries, share, hover cards, progress modal)
are deliberately left with numeric IDs — they never appear in the
address bar.

Author: akabiru

frontend/src/app/features/bim/ifc_models/bcf/list/bcf-list.component.ts

@@ -129,8 +129,14 @@ export class BcfListComponent extends WorkPackageListViewComponent implements Un
       : 'bim.partitioned.show';
     // Passing the card param to the new state because the router doesn't keep
     // it when going to 'bim.partitioned.show'
-    const params = { workPackageId, cards, focus };
+    const routingId = this.resolveRoutingId(workPackageId);
+    const params = { workPackageId: routingId, cards, focus };
 
     void this.$state.go(stateToGo, params);
   }
+
+  private resolveRoutingId(workPackageId:string):string {
+    const wp = this.states.workPackages.get(workPackageId)?.value;
+    return wp?.displayId ?? workPackageId;
+  }
 }

frontend/src/app/features/boards/board/board-list/board-list.component.ts

@@ -26,6 +26,7 @@ import { AuthorisationService } from 'core-app/core/model-auth/model-auth.servic
 import { Highlighting } from 'core-app/features/work-packages/components/wp-fast-table/builders/highlighting/highlighting.functions';
 import { WorkPackageCardViewComponent } from 'core-app/features/work-packages/components/wp-card-view/wp-card-view.component';
 import { WorkPackageStatesInitializationService } from 'core-app/features/work-packages/components/wp-list/wp-states-initialization.service';
+import { States } from 'core-app/core/states/states.service';
 import { BoardService } from 'core-app/features/boards/board/board.service';
 import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
@@ -175,6 +176,7 @@ export class BoardListComponent extends AbstractWidgetComponent implements OnIni
     readonly keepTab:KeepTabService,
     readonly currentProject:CurrentProjectService,
     readonly pathHelper:PathHelperService,
+    readonly states:States,
   ) {
     super(I18n, injector);
   }
@@ -488,17 +490,19 @@ export class BoardListComponent extends AbstractWidgetComponent implements OnIni
 
   openFullViewOnDoubleClick(event:{ workPackageId:string, double:boolean }) {
     if (event.double) {
+      const routingId = this.resolveRoutingId(event.workPackageId);
       const projectIdentifier = this.currentProject.identifier;
-      const link = this.pathHelper.genericWorkPackagePath(projectIdentifier, event.workPackageId) + window.location.search;
+      const link = this.pathHelper.genericWorkPackagePath(projectIdentifier, routingId) + window.location.search;
       Turbo.visit(link, { action: 'advance' });
     }
   }
 
   openStateLink(event:{ workPackageId:string; requestedState:string }) {
+    const routingId = this.resolveRoutingId(event.workPackageId);
     if (event.requestedState === 'split') {
-      this.goToSplitView(event.workPackageId);
+      this.goToSplitView(routingId);
     } else {
-      this.keepTab.goCurrentShowState(event.workPackageId);
+      this.keepTab.goCurrentShowState(routingId);
     }
   }
 
@@ -509,6 +513,11 @@ export class BoardListComponent extends AbstractWidgetComponent implements OnIni
     Turbo.visit(link, { frame: 'content-bodyRight', action: 'advance' });
   }
 
+  private resolveRoutingId(workPackageId:string):string {
+    const wp = this.states.workPackages.get(workPackageId)?.value;
+    return wp?.displayId ?? workPackageId;
+  }
+
   private schema(workPackage:WorkPackageResource) {
     return this.schemaCache.of(workPackage);
   }

frontend/src/app/features/boards/board/board-partitioned-page/board-list-container.component.ts

@@ -39,6 +39,7 @@ import {
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
+import { States } from 'core-app/core/states/states.service';
 
 @Component({
   selector: 'board-list-container',
@@ -109,6 +110,7 @@ export class BoardListContainerComponent extends UntilDestroyedMixin implements
     readonly QueryUpdated:QueryUpdatedService,
     readonly pathHelper:PathHelperService,
     readonly currentProject:CurrentProjectService,
+    readonly wpStates:States,
 ) {
     super();
   }
@@ -134,7 +136,10 @@ export class BoardListContainerComponent extends UntilDestroyedMixin implements
         filter(() => window.location.pathname.includes('/details/')),
       ).subscribe((selection) => {
         // Update split screen
-        const base = this.pathHelper.boardDetailsPath(this.currentProject.identifier, id, selection.focusedWorkPackage!);
+        const wpId = selection.focusedWorkPackage!;
+        const wp = this.wpStates.workPackages.get(wpId)?.value;
+        const routingId = wp?.displayId ?? wpId;
+        const base = this.pathHelper.boardDetailsPath(this.currentProject.identifier, id, routingId);
         const search = window.location.search;
         Turbo.visit(search ? `${base}${search}` : base, { frame: 'content-bodyRight', action: 'advance' });
       });

frontend/src/app/features/calendar/op-work-packages-calendar.service.ts

@@ -53,6 +53,7 @@ import {
   uiStateLinkClass,
 } from 'core-app/features/work-packages/components/wp-fast-table/builders/ui-state-link-builder';
 import { debugLog } from 'core-app/shared/helpers/debug_output';
+import { States } from 'core-app/core/states/states.service';
 import {
   WorkPackageViewContextMenu,
 } from 'core-app/shared/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive';
@@ -112,6 +113,7 @@ export class OpWorkPackagesCalendarService extends UntilDestroyedMixin {
     readonly calendarService:OpCalendarService,
     readonly weekdayService:WeekdayService,
     readonly dayService:DayResourceService,
+    readonly states:States,
   ) {
     super();
   }
@@ -287,21 +289,28 @@ export class OpWorkPackagesCalendarService extends UntilDestroyedMixin {
       return;
     }
 
+    const routingId = this.resolveRoutingId(id);
     void this.$state.go(
       `${splitViewRoute(this.$state)}.tabs`,
-      { workPackageId: id, tabIdentifier: 'overview' },
+      { workPackageId: routingId, tabIdentifier: 'overview' },
     );
   }
 
   public openFullView(id:string):void {
     this.wpTableSelection.setSelection(id, -1);
 
+    const routingId = this.resolveRoutingId(id);
     void this.$state.go(
       'work-packages.show',
-      { workPackageId: id },
+      { workPackageId: routingId },
     );
   }
 
+  private resolveRoutingId(workPackageId:string):string {
+    const wp = this.states.workPackages.get(workPackageId)?.value;
+    return wp?.displayId ?? workPackageId;
+  }
+
   public onCardClicked({ workPackageId, event }:{ workPackageId:string, event:MouseEvent }):void {
     if (isClickedWithModifier(event)) {
       return;

frontend/src/app/features/calendar/wp-calendar/wp-calendar.component.ts

@@ -342,15 +342,16 @@ export class WorkPackagesCalendarComponent extends UntilDestroyedMixin implement
         }
 
         if (evt.event.extendedProps.workPackage) {
-          const workPackageId = (evt.event.extendedProps.workPackage as WorkPackageResource).id!;
+          const wp = evt.event.extendedProps.workPackage as WorkPackageResource;
           // Currently the calendar widget is shown on multiple pages,
           // but only the calendar module itself is a partitioned query space which can deal with a split screen request
           if (this.$state.includes('calendar')) {
-            this.workPackagesCalendar.openSplitView(workPackageId);
+            this.workPackagesCalendar.openSplitView(wp.id!);
           } else {
+            const routingId = wp.displayId ?? wp.id!;
             void this.$state.go(
               'work-packages.show',
-              { workPackageId },
+              { workPackageId: routingId },
             );
           }
         }

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb-parent.component.ts

@@ -115,6 +115,7 @@ export class WorkPackageBreadcrumbParentComponent {
   }
 
   public parentLink(parent:WorkPackageResource):string {
-    return this.pathHelper.genericWorkPackagePath(parent.project?.identifier, parent.id!) + window.location.search;
+    const routingId = parent.displayId ?? parent.id!;
+    return this.pathHelper.genericWorkPackagePath(parent.project?.identifier, routingId) + window.location.search;
   }
 }

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.component.ts

@@ -65,7 +65,8 @@ export class WorkPackageBreadcrumbComponent {
   }
 
   public ancestorPath(ancestor:WorkPackageResource):string {
-    return this.pathHelper.genericWorkPackagePath(this.workPackage.project?.identifier, ancestor.id!) + window.location.search;
+    const routingId = ancestor.displayId ?? ancestor.id!;
+    return this.pathHelper.genericWorkPackagePath(this.workPackage.project?.identifier, routingId) + window.location.search;
   }
 
   public updateActiveInput(val:boolean) {

frontend/src/app/features/work-packages/components/wp-fast-table/builders/ui-state-link-builder.ts

@@ -16,29 +16,28 @@ export class UiStateLinkBuilder {
   ) {
   }
 
-  public linkToDetails(workPackageId:string, title:string, content:string) {
-    return this.build(workPackageId, 'split', title, content);
+  public linkToDetails(workPackageId:string, title:string, content:string, routingId?:string) {
+    return this.build(workPackageId, 'split', title, content, routingId);
   }
 
-  public linkToShow(workPackageId:string, title:string, content:string) {
-    return this.build(workPackageId, 'show', title, content);
+  public linkToShow(workPackageId:string, title:string, content:string, routingId?:string) {
+    return this.build(workPackageId, 'show', title, content, routingId);
   }
 
-  private build(workPackageId:string, state:'show'|'split', title:string, content:string) {
+  private build(workPackageId:string, state:'show'|'split', title:string, content:string, routingId?:string) {
     const a = document.createElement('a');
-    let tabState:string;
-    let tabIdentifier:string;
+    const idForHref = routingId ?? workPackageId;
     let href:string;
 
     if (state === 'show') {
       const projectIdentifier = this.currentProject.identifier;
-      href = this.pathHelper.genericWorkPackagePath(projectIdentifier, workPackageId, this.keepTab.currentShowTab) + window.location.search;
+      href = this.pathHelper.genericWorkPackagePath(projectIdentifier, idForHref, this.keepTab.currentShowTab) + window.location.search;
     } else {
       const tab = this.keepTab.currentDetailsTab;
       href = this.$state.href(
         'work-packages.partitioned.list.details.tabs',
         {
-          workPackageId,
+          workPackageId: idForHref,
           tab,
         },
       );

frontend/src/app/features/work-packages/components/wp-new/wp-create.component.ts

@@ -130,15 +130,16 @@ export class WorkPackageCreateComponent extends UntilDestroyedMixin implements O
 
     this.editForm?.cancel(false);
 
+    const routingId = savedResource.displayId ?? savedResource.id!;
     if(this.routedFromAngular && this.successState) {
-      this.$state.go(this.successState, { workPackageId: savedResource.id })
+      this.$state.go(this.successState, { workPackageId: routingId })
         .then(() => {
           this.wpViewFocus.updateFocus(savedResource.id!);
           this.notificationService.showSave(savedResource, isInitial);
         });
     } else {
       window.OpenProject.pageState = 'submitted';
-      Turbo.visit(this.pathHelper.projectWorkPackagePath(savedResource.project.identifier, savedResource.id!) + window.location.search);
+      Turbo.visit(this.pathHelper.projectWorkPackagePath(savedResource.project.identifier, routingId) + window.location.search);
     }
 
   }

frontend/src/app/features/work-packages/components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.directive.ts

@@ -81,7 +81,7 @@ export class WorkPackageRelationsHierarchyComponent extends UntilDestroyedMixin
   };
 
   ngOnInit() {
-    this.workPackagePath = this.PathHelper.workPackagePath(this.workPackage.id!);
+    this.workPackagePath = this.PathHelper.workPackagePath(this.workPackage.displayId ?? this.workPackage.id!);
     this.canModifyHierarchy = !!this.workPackage.changeParent;
     this.canAddRelation = !!this.workPackage.addRelation;