[NIFI-13977] - Updated Copy/Paste in UI to align with new backend API

nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts

@@ -56,6 +56,7 @@ import { LoginConfigurationEffects } from './state/login-configuration/login-con
 import { BannerTextEffects } from './state/banner-text/banner-text.effects';
 import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';
 import { CLIPBOARD_OPTIONS, provideMarkdown } from 'ngx-markdown';
+import { CopyEffects } from './state/copy/copy.effects';
 
 const entry = localStorage.getItem('disable-animations');
 let disableAnimations: string = entry !== null ? JSON.parse(entry).item : '';
@@ -97,7 +98,8 @@ export const customTooltipDefaults: MatTooltipDefaultOptions = {
             ComponentStateEffects,
             DocumentationEffects,
             ClusterSummaryEffects,
-            PropertyVerificationEffects
+            PropertyVerificationEffects,
+            CopyEffects
         ),
         StoreDevtoolsModule.instrument({
             maxAge: 25,

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-actions.service.ts

@@ -18,7 +18,7 @@
 import { Injectable } from '@angular/core';
 import { CanvasUtils } from './canvas-utils.service';
 import {
-    copy,
+    copySuccess,
     deleteComponents,
     disableComponents,
     disableCurrentProcessGroup,
@@ -30,7 +30,6 @@ import {
     navigateToEditCurrentProcessGroup,
     navigateToManageComponentPolicies,
     openChangeColorDialog,
-    paste,
     reloadFlow,
     selectComponents,
     startComponents,
@@ -40,12 +39,10 @@ import {
 } from '../state/flow/flow.actions';
 import {
     ChangeColorRequest,
-    CopyComponentRequest,
     DeleteComponentRequest,
     DisableComponentRequest,
     EnableComponentRequest,
     MoveComponentRequest,
-    PasteRequest,
     SelectedComponent,
     StartComponentRequest,
     StopComponentRequest
@@ -57,6 +54,11 @@ import { MatDialog } from '@angular/material/dialog';
 import { CanvasView } from './canvas-view.service';
 import { ComponentType } from 'libs/shared/src';
 import { Client } from '../../../service/client.service';
+import { CopyRequestContext, CopyRequestEntity, CopyResponseEntity } from '../../../state/copy';
+import { CopyPasteService } from './copy-paste.service';
+import { firstValueFrom } from 'rxjs';
+import { selectCurrentProcessGroupId } from '../state/flow/flow.selectors';
+import { snackBarError } from '../../../state/error/error.actions';
 
 export type CanvasConditionFunction = (selection: d3.Selection<any, any, any, any>) => boolean;
 export type CanvasActionFunction = (selection: d3.Selection<any, any, any, any>, extraArgs?: any) => void;
@@ -139,45 +141,90 @@ export class CanvasActionsService {
                 return this.canvasUtils.isCopyable(selection);
             },
             action: (selection: d3.Selection<any, any, any, any>) => {
-                const origin = this.canvasUtils.getOrigin(selection);
-                const dimensions = this.canvasView.getSelectionBoundingClientRect(selection);
-
-                const components: CopyComponentRequest[] = [];
+                const copyRequestEntity: CopyRequestEntity = {};
                 selection.each((d) => {
-                    components.push({
-                        id: d.id,
-                        type: d.type,
-                        uri: d.uri,
-                        entity: d
-                    });
+                    switch (d.type) {
+                        case ComponentType.Processor:
+                            if (!copyRequestEntity.processors) {
+                                copyRequestEntity.processors = [];
+                            }
+                            copyRequestEntity.processors.push(d.id);
+                            break;
+                        case ComponentType.ProcessGroup:
+                            if (!copyRequestEntity.processGroups) {
+                                copyRequestEntity.processGroups = [];
+                            }
+                            copyRequestEntity.processGroups.push(d.id);
+                            break;
+                        case ComponentType.Connection:
+                            if (!copyRequestEntity.connections) {
+                                copyRequestEntity.connections = [];
+                            }
+                            copyRequestEntity.connections.push(d.id);
+                            break;
+                        case ComponentType.RemoteProcessGroup:
+                            if (!copyRequestEntity.remoteProcessGroups) {
+                                copyRequestEntity.remoteProcessGroups = [];
+                            }
+                            copyRequestEntity.remoteProcessGroups.push(d.id);
+                            break;
+                        case ComponentType.InputPort:
+                            if (!copyRequestEntity.inputPorts) {
+                                copyRequestEntity.inputPorts = [];
+                            }
+                            copyRequestEntity.inputPorts.push(d.id);
+                            break;
+                        case ComponentType.OutputPort:
+                            if (!copyRequestEntity.outputPorts) {
+                                copyRequestEntity.outputPorts = [];
+                            }
+                            copyRequestEntity.outputPorts.push(d.id);
+                            break;
+                        case ComponentType.Label:
+                            if (!copyRequestEntity.labels) {
+                                copyRequestEntity.labels = [];
+                            }
+                            copyRequestEntity.labels.push(d.id);
+                            break;
+                        case ComponentType.Funnel:
+                            if (!copyRequestEntity.funnels) {
+                                copyRequestEntity.funnels = [];
+                            }
+                            copyRequestEntity.funnels.push(d.id);
+                            break;
+                    }
                 });
 
-                this.store.dispatch(
-                    copy({
-                        request: {
-                            components,
-                            origin,
-                            dimensions
-                        }
-                    })
-                );
-            }
-        },
-        paste: {
-            id: 'paste',
-            condition: () => {
-                return this.canvasUtils.isPastable();
-            },
-            action: (selection, extraArgs) => {
-                const pasteRequest: PasteRequest = {};
-                if (extraArgs?.pasteLocation) {
-                    pasteRequest.pasteLocation = extraArgs.pasteLocation;
-                }
-                this.store.dispatch(
-                    paste({
-                        request: pasteRequest
+                const copyRequestContext: CopyRequestContext = {
+                    copyRequestEntity,
+                    processGroupId: this.currentProcessGroupId()
+                };
+                let copyResponse: CopyResponseEntity | null = null;
+
+                // Safari in particular is strict in enforcing that any writing to the clipboard needs to be triggered directly by a user action.
+                // As such, firing a simple async rxjs action to initiate the copy sequence fails this check.
+                // However, below is the workaround to construct a ClipboardItem from an async call.
+                const clipboardItem = new ClipboardItem({
+                    'text/plain': firstValueFrom(this.copyService.copy(copyRequestContext)).then((response) => {
+                        copyResponse = response;
+                        return new Blob([JSON.stringify(response, null, 2)], { type: 'text/plain' });
                     })
-                );
+                });
+                navigator.clipboard.write([clipboardItem]).then(() => {
+                    if (copyResponse) {
+                        this.store.dispatch(
+                            copySuccess({
+                                response: {
+                                    copyResponse,
+                                    processGroupId: copyRequestContext.processGroupId,
+                                    pasteCount: 0
+                                }
+                            })
+                        );
+                    } else {
+                        this.store.dispatch(snackBarError({ error: 'Copy failed' }));
+                    }
+                });
             }
         },
         selectAll: {
@@ -479,12 +526,15 @@ export class CanvasActionsService {
         }
     };
 
+    currentProcessGroupId = this.store.selectSignal(selectCurrentProcessGroupId);
+
     constructor(
         private store: Store<CanvasState>,
         private canvasUtils: CanvasUtils,
         private canvasView: CanvasView,
         private dialog: MatDialog,
-        private client: Client
+        private client: Client,
+        private copyService: CopyPasteService
     ) {}
 
     private select(selection: d3.Selection<any, any, any, any>) {

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts

@@ -24,7 +24,6 @@ import {
     selectBreadcrumbs,
     selectCanvasPermissions,
     selectConnections,
-    selectCopiedSnippet,
     selectCurrentParameterContext,
     selectCurrentProcessGroupId,
     selectParentProcessGroupId
@@ -135,13 +134,6 @@ export class CanvasUtils {
                 this.breadcrumbs = breadcrumbs;
             });
 
-        this.store
-            .select(selectCopiedSnippet)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((copiedSnippet) => {
-                this.copiedSnippet = copiedSnippet;
-            });
-
         this.store
             .select(selectScale)
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -1011,7 +1003,7 @@ export class CanvasUtils {
     }
 
     public isPastable(): boolean {
-        return this.canvasPermissions.canWrite && this.copiedSnippet != null;
+        return this.canvasPermissions.canWrite;
     }
 
     /**

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts

@@ -177,6 +177,15 @@ export class CanvasView {
         this.canvasInitialized = true;
     }
 
+    public getCanvasBoundingClientRect(): DOMRect | null {
+        const canvasContainer: any = document.getElementById('canvas-container');
+        if (canvasContainer == null) {
+            return null;
+        }
+
+        return canvasContainer.getBoundingClientRect() as DOMRect;
+    }
+
     // filters zoom events as programmatically modifying the translate or scale now triggers the handlers
     private isBirdseyeEvent(): boolean {
         return this.birdseyeTranslateInProgress;
@@ -252,26 +261,19 @@ export class CanvasView {
     }
 
     /**
-     * Determines if a bounding box is fully in the current viewable canvas area.
+     * Determines if a bounding box is in the current viewable canvas area.
      *
      * @param {type} boundingBox       Bounding box to check.
      * @param {boolean} strict         If true, the entire bounding box must be in the viewport.
      *                                 If false, only part of the bounding box must be in the viewport.
      * @returns {boolean}
      */
     public isBoundingBoxInViewport(boundingBox: any, strict: boolean): boolean {
-        const selection: any = this.canvasUtils.getSelection();
-        if (selection.size() !== 1) {
-            return false;
-        }
-
         const canvasContainer: any = document.getElementById('canvas-container');
         if (!canvasContainer) {
             return false;
         }
 
-        const yOffset = canvasContainer.getBoundingClientRect().top;
-
         // scale the translation
         const translate = [this.x / this.k, this.y / this.k];
 
@@ -287,8 +289,8 @@ export class CanvasView {
 
         const left = Math.ceil(boundingBox.x);
         const right = Math.floor(boundingBox.x + boundingBox.width);
-        const top = Math.ceil(boundingBox.y - yOffset / this.k);
-        const bottom = Math.floor(boundingBox.y - yOffset / this.k + boundingBox.height);
+        const top = Math.ceil(boundingBox.y);
+        const bottom = Math.floor(boundingBox.y + boundingBox.height);
 
         if (strict) {
             return !(left < screenLeft || right > screenRight || top < screenTop || bottom > screenBottom);
@@ -497,6 +499,13 @@ export class CanvasView {
         return bbox;
     }
 
+    /**
+     * Translates a position to the space visible on the canvas
+     *
+     * @param position
+     *
+     * @returns {Position | null}
+     */
     public getCanvasPosition(position: Position): Position | null {
         const canvasContainer: any = document.getElementById('canvas-container');
         if (!canvasContainer) {
@@ -528,7 +537,11 @@ export class CanvasView {
         return null;
     }
 
-    private centerBoundingBox(boundingBox: any): void {
+    /**
+     * Centers the canvas to a bounding box. If a scale is provided, it will zoom to that scale.
+     * @param {type} boundingBox
+     */
+    public centerBoundingBox(boundingBox: any): void {
         let scale: number = this.k;
         if (boundingBox.scale != null) {
             scale = boundingBox.scale;