Add 'Copy ID to clipboard' action to work package context menus

config/locales/js-en.yml

@@ -91,6 +91,7 @@ en:
     button_copy: "Copy"
     button_copy_numeric_id_to_clipboard: "Copy numeric ID to clipboard"
     button_copy_link_to_clipboard: "Copy link to clipboard"
+    button_copy_display_id_to_clipboard: "Copy ID to clipboard"
     button_copy_to_clipboard: "Copy to clipboard"
     button_copy_to_other_project: "Duplicate in another project"
     button_custom-fields: "Custom fields"

frontend/src/app/shared/components/op-context-menu/op-context-menu.html

@@ -19,7 +19,7 @@
       @if (item.divider) {
         <li class="dropdown-divider" role="separator"></li>
       }
-      @if (!item.divider && !item.isHeader) {
+      @if (!item.divider && !item.isHeader && !item.hidden) {
         <li>
           @if (item.href) {
             <a

frontend/src/app/shared/components/op-context-menu/wp-context-menu/wp-single-context-menu.ts

@@ -122,6 +122,9 @@ export class WorkPackageSingleContextMenuDirective extends OpContextMenuTrigger
       case 'copy_numeric_id_to_clipboard':
         this.copyToClipboardService.copy(`${this.workPackage.id!}`);
         break;
+      case 'copy_display_id_to_clipboard':
+        this.copyToClipboardService.copy(this.workPackage.displayId);
+        break;
       default:
         window.location.href = link!;
         break;
@@ -199,7 +202,7 @@ export class WorkPackageSingleContextMenuDirective extends OpContextMenuTrigger
       // Rendering it as a link would show a misleading link preview on hover and
       // make the clipboard copy originate from an anchor, so render it as a
       // button (no href).
-      const href = key === 'copy_numeric_id_to_clipboard' ? undefined : action.link;
+      const href = (key === 'copy_numeric_id_to_clipboard' || key === 'copy_display_id_to_clipboard') ? undefined : action.link;
 
       return {
         disabled: false,

frontend/src/app/shared/components/op-context-menu/wp-context-menu/wp-static-context-menu-actions.ts

@@ -8,6 +8,11 @@ export const PERMITTED_CONTEXT_MENU_ACTIONS:WorkPackageAction[] = [
     icon: 'icon-clipboard',
     link: 'id',
   },
+  {
+    key: 'copy_display_id_to_clipboard',
+    icon: 'icon-clipboard',
+    link: 'id',
+  },
   {
     key: 'log_time',
     link: 'logTime',

frontend/src/app/shared/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive.ts

@@ -28,6 +28,7 @@ import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
+import { isSemanticWorkPackageId } from 'core-app/shared/helpers/work-package-id-pattern';
 
 import { Placement } from '@floating-ui/dom';
 
@@ -123,6 +124,14 @@ export class WorkPackageViewContextMenu extends OpContextMenuHandler {
         this.copyToClipboardService.copy(url.toString());
         break;
       }
+
+      case 'copy_display_id_to_clipboard':
+        this.copyToClipboardService.copy(this.workPackage.displayId);
+        break;
+
+      case 'copy_numeric_id_to_clipboard':
+        this.copyToClipboardService.copy(String(this.workPackage.id!));
+        break;
       case 'copy_to_other_project':
         window.location.href = `${this.pathHelper.staticBase}/work_packages/move/new?copy=true&ids[]=${id}`;
         break;
@@ -215,6 +224,7 @@ export class WorkPackageViewContextMenu extends OpContextMenuHandler {
     const items = this.permittedActions.map((action:WorkPackageAction) => ({
       class: undefined as string | undefined,
       disabled: false,
+      hidden: action.key === 'copy_numeric_id_to_clipboard' && !isSemanticWorkPackageId(this.workPackage.displayId),
       linkText: action.text,
       href: action.href,
       icon: action.icon != null ? action.icon : `icon-${action.key}`,