Merge pull request #22719 from opf/feature/73717-adapt-work-package-lists-for-project-based-semantic-work-package-identifiers

Adapt work package lists for semantic identifiers

Author: akabiru

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html

@@ -18,7 +18,7 @@
         class="op-ian-item--work-package-id-link spot-link"
         [class.spot-link_inactive]="isMobile()"
         [attr.title]="workPackage.subject"
-        [textContent]="'#' + workPackage.id"
+        [textContent]="workPackage.formattedId"
         [attr.href]="fullScreenLink()"
         (click)="onLinkClick($event)"
         >

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.html

@@ -83,7 +83,7 @@
         [ngClass]="uiStateLinkClass"
         (click)="emitStateLinkClicked($event, workPackage)"
         >
-        #{{workPackage.id}}
+        {{workPackage.formattedId}}
       </a>
       <span class="op-wp-single-card--content-subject-line">
         @if (showAsInlineCard && showStartDate) {

frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.template.html

@@ -55,7 +55,7 @@
         data-test-selector="op-relation--row-id"
         uiSref="work-packages.show.tabs"
         [uiParams]="{ workPackageId: relatedWorkPackage.id, tabIdentifier: 'relations' }"
-      >#{{relatedWorkPackage.id}}</a>
+      >{{relatedWorkPackage.formattedId}}</a>
       <a
         class="relation-row--grid-subject"
         data-test-selector="op-relation--row-subject"

frontend/src/app/shared/components/fields/display/field-types/linked-work-package-display-field.module.ts

@@ -75,6 +75,6 @@ export class LinkedWorkPackageDisplayField extends WorkPackageDisplayField {
   }
 
   public get valueString() {
-    return `#${this.wpId}`;
+    return this.wpFormattedId;
   }
 }

frontend/src/app/shared/components/fields/display/field-types/work-package-display-field.module.ts

@@ -27,6 +27,7 @@
 //++
 
 import { DisplayField } from 'core-app/shared/components/fields/display/display-field.module';
+import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 
 export class WorkPackageDisplayField extends DisplayField {
   public text = {
@@ -57,9 +58,29 @@ export class WorkPackageDisplayField extends DisplayField {
     return this.value.href.match(/(\d+)$/)[0];
   }
 
+  /**
+   * Returns the work package ID formatted for display.
+   * Classic mode: `#123` (hash-prefixed), Semantic mode: `PROJ-42` (no prefix).
+   *
+   * Delegates to `WorkPackageResource#formattedId` when the linked resource
+   * is loaded. When unloaded, falls back to the numeric ID extracted from
+   * the self-link href (which has no `displayId` available).
+   */
+  public get wpFormattedId():string {
+    const linkedWp = this.value as WorkPackageResource | undefined;
+    if (linkedWp?.$loaded) {
+      return linkedWp.formattedId;
+    }
+
+    const id = this.wpId as string | number | null;
+    if (!id) return '';
+
+    return `#${id}`;
+  }
+
   public get valueString() {
     // cannot display the type name easily here as it may not be loaded
-    return `#${this.wpId} ${this.title}`;
+    return `${this.wpFormattedId} ${this.title}`;
   }
 
   public isEmpty():boolean {

frontend/src/app/shared/components/fields/display/field-types/wp-id-display-field.module.spec.ts

@@ -0,0 +1,90 @@
+import { WorkPackageIdDisplayField } from './wp-id-display-field.module';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import { StateService } from '@uirouter/core';
+import { KeepTabService } from 'core-app/features/work-packages/components/wp-single-view-tabs/keep-tab/keep-tab.service';
+import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
+import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
+import { DisplayFieldContext } from 'core-app/shared/components/fields/display/display-field.service';
+import { HalResource } from 'core-app/features/hal/resources/hal-resource';
+import { IFieldSchema } from 'core-app/shared/components/fields/field.base';
+import { Injector } from '@angular/core';
+
+describe('WorkPackageIdDisplayField', () => {
+  let field:WorkPackageIdDisplayField;
+
+  const mockI18n = { t: (key:string) => key };
+  const mockState = {};
+  const mockKeepTab = { currentShowTab: 'activity' };
+  const mockCurrentProject = { identifier: 'my-project' };
+  const mockPathHelper = {
+    genericWorkPackagePath: (_proj:string | null, wpId:string, _tab:string) => `/work_packages/${wpId}`,
+  };
+
+  const serviceMap = new Map<unknown, unknown>([
+    [I18nService, mockI18n],
+    [StateService, mockState],
+    [KeepTabService, mockKeepTab],
+    [CurrentProjectService, mockCurrentProject],
+    [PathHelperService, mockPathHelper],
+  ]);
+
+  function buildField(resourceAttrs:Record<string, unknown> = {}) {
+    const resource = {
+      id: '42',
+      displayId: 'PROJ-7',
+      ...resourceAttrs,
+    } as unknown as HalResource;
+
+    const mockInjector = {
+      get: (token:unknown, notFoundValue?:unknown) => serviceMap.get(token) ?? notFoundValue ?? {},
+    } as unknown as Injector;
+
+    field = new WorkPackageIdDisplayField('id', {
+      injector: mockInjector,
+      container: null,
+      options: {},
+    } as unknown as DisplayFieldContext);
+
+    field.apply(resource, { type: 'Integer' } as IFieldSchema);
+  }
+
+  describe('valueString', () => {
+    it('returns the semantic displayId when present on the resource', () => {
+      buildField({ id: '42', displayId: 'PROJ-7' });
+
+      expect(field.valueString).toEqual('PROJ-7');
+    });
+
+    it('falls back to numeric id when displayId is absent', () => {
+      buildField({ id: '42', displayId: undefined });
+
+      expect(field.valueString).toEqual('42');
+    });
+  });
+
+  describe('render', () => {
+    it('renders the displayText as visible link content, not the numeric id', () => {
+      buildField({ id: '42', displayId: 'PROJ-7' });
+
+      const container = document.createElement('span');
+      field.render(container, 'PROJ-7');
+
+      const link = container.querySelector('a');
+
+      expect(link).toBeTruthy();
+      expect(link!.textContent).toEqual('PROJ-7');
+    });
+
+    it('uses the numeric id for routing (data-work-package-id)', () => {
+      buildField({ id: '42', displayId: 'PROJ-7' });
+
+      const container = document.createElement('span');
+      field.render(container, 'PROJ-7');
+
+      const link = container.querySelector('a');
+
+      expect(link).toBeTruthy();
+      expect(link!.dataset.workPackageId).toEqual('42');
+    });
+  });
+});

frontend/src/app/shared/components/fields/display/field-types/wp-id-display-field.module.ts

@@ -45,14 +45,20 @@ export class WorkPackageIdDisplayField extends IdDisplayField {
 
   private uiStateBuilder:UiStateLinkBuilder = new UiStateLinkBuilder(this.$state, this.keepTab, this.currentProject, this.pathHelper);
 
+  public get valueString():string {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    return this.resource.displayId ?? this.value?.toString() ?? '';
+  }
+
   public render(element:HTMLElement, displayText:string):void {
     if (!this.value) {
       return;
     }
     const link = this.uiStateBuilder.linkToShow(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       this.value,
       displayText,
-      this.value,
+      displayText,
     );
 
     element.appendChild(link);

frontend/src/app/shared/components/fields/macros/work-package-quickinfo-macro.html

@@ -13,7 +13,7 @@
     [href]="workPackageLink"
     [attr.data-work-package-id]="workPackage.id"
     [attr.data-hover-card-url]="workPackageHoverCardUrl">
-    #{{workPackage.id}}:
+    {{workPackage.formattedId}}:
   </a>
   <display-field [resource]="workPackage"
     [displayFieldOptions]="{ writable: false }"

frontend/src/app/shared/components/time_entries/timer/stop-existing-timer-modal.component.html

@@ -22,7 +22,7 @@
         [uiParams]="{ workPackageId: active.entity.id }"
         (click)="closeMe()"
       >
-        #{{ active.workPackage.id }}: {{ active.workPackage.name }}
+        {{ active.workPackage.formattedId }}: {{ active.workPackage.name }}
       </a>
     </p>