[NIFI-13221] - display supported shortcut/hotkey combos in context menu (#8821)

This closes #8821

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts

@@ -560,13 +560,20 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider {
                 condition: this.canvasActionsService.getConditionFunction('refresh'),
                 clazz: 'fa fa-refresh',
                 text: 'Refresh',
-                action: this.canvasActionsService.getActionFunction('refresh')
+                action: this.canvasActionsService.getActionFunction('refresh'),
+                shortcut: {
+                    control: true,
+                    code: 'R'
+                }
             },
             {
                 condition: this.canvasActionsService.getConditionFunction('leaveGroup'),
                 clazz: 'fa fa-level-up',
                 text: 'Leave Group',
-                action: this.canvasActionsService.getActionFunction('leaveGroup')
+                action: this.canvasActionsService.getActionFunction('leaveGroup'),
+                shortcut: {
+                    code: 'ESC'
+                }
             },
             {
                 isSeparator: true
@@ -1230,7 +1237,11 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider {
                 condition: this.canvasActionsService.getConditionFunction('copy'),
                 clazz: 'fa fa-copy',
                 text: 'Copy',
-                action: this.canvasActionsService.getActionFunction('copy')
+                action: this.canvasActionsService.getActionFunction('copy'),
+                shortcut: {
+                    control: true,
+                    code: 'C'
+                }
             },
             {
                 condition: () => {
@@ -1245,6 +1256,10 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider {
                             this.canvasActionsService.getActionFunction('paste')(selection, { pasteLocation });
                         }
                     }
+                },
+                shortcut: {
+                    control: true,
+                    code: 'V'
                 }
             },
             {
@@ -1296,7 +1311,10 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider {
                 condition: this.canvasActionsService.getConditionFunction('delete'),
                 clazz: 'fa fa-trash',
                 text: 'Delete',
-                action: this.canvasActionsService.getActionFunction('delete')
+                action: this.canvasActionsService.getActionFunction('delete'),
+                shortcut: {
+                    code: '⌫'
+                }
             }
         ]
     };

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html

@@ -27,7 +27,7 @@
             } @else {
                 @if (hasSubMenu(item)) {
                     @if (menuComponent.menu; as subMenu) {
-                        <button class="context-menu-item pl-1 pt-2 pb-2" cdkMenuItem [cdkMenuTriggerFor]="subMenu">
+                        <button class="context-menu-item pl-1 pr-1 pt-2 pb-2" cdkMenuItem [cdkMenuTriggerFor]="subMenu">
                             <div class="context-menu-item-img" [class]="item.clazz"></div>
                             <div class="context-menu-item-text surface-contrast">{{ item.text }}</div>
                             <div class="context-menu-group-item-img fa fa-caret-right"></div>
@@ -39,11 +39,27 @@
                         [menuId]="item.subMenuId"></fd-context-menu>
                 } @else {
                     <button
-                        class="context-menu-item pl-1 pt-2 pb-2"
+                        class="context-menu-item pl-1 pr-1 pt-2 pb-2 flex justify-between"
                         (click)="menuItemClicked(item, $event)"
                         cdkMenuItem>
-                        <div class="context-menu-item-img" [class]="item.clazz"></div>
+                        <div class="flex">
-                        <div class="context-menu-item-text surface-contrast">{{ item.text }}</div>
+                            <div class="context-menu-item-img" [class]="item.clazz"></div>
+                            <div class="context-menu-item-text surface-contrast">{{ item.text }}</div>
+                        </div>
+                        @if (item.shortcut) {
+                            <div class="context-menu-item-shortcut surface-contrast justify-end opacity-40">
+                                @if (item.shortcut.shift) {
+                                    ⇧
+                                }
+                                @if (item.shortcut.control) {
+                                    {{ isMac ? '⌘' : '⌃' }}
+                                }
+                                @if (item.shortcut.alt) {
+                                    ⌥
+                                }
+                                {{ item.shortcut.code }}
+                            </div>
+                        }
                     </button>
                 }
             }

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.ts

@@ -22,10 +22,19 @@ import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 
 export interface ContextMenuDefinitionProvider {
     getMenu(menuId: string): ContextMenuDefinition | undefined;
+
     filterMenuItem(menuItem: ContextMenuItemDefinition): boolean;
+
     menuItemClicked(menuItem: ContextMenuItemDefinition, event: MouseEvent): void;
 }
 
+export interface KeyboardShortcut {
+    code: string;
+    control?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+}
+
 export interface ContextMenuItemDefinition {
     isSeparator?: boolean;
     condition?: (selection: any) => boolean;
@@ -33,6 +42,7 @@ export interface ContextMenuItemDefinition {
     text?: string;
     subMenuId?: string;
     action?: (selection: any, event?: MouseEvent) => void;
+    shortcut?: KeyboardShortcut;
 }
 
 export interface ContextMenuDefinition {
@@ -54,6 +64,7 @@ export class ContextMenu implements OnInit {
 
     private showFocused: Subject<boolean> = new Subject();
     showFocused$: Observable<boolean> = this.showFocused.asObservable();
+    isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 
     getMenuItems(menuId: string | undefined): ContextMenuItemDefinition[] {
         if (menuId) {