NIFI-13368: (#8931)

- Allowing tooltip mouse listeners to be destroyed when necessary.
- Ensuring connection source/destination run status and validation errors are updated when deleted.

This closes #8931

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

@@ -767,7 +767,7 @@ export class CanvasUtils {
     /**
      * Determines the connectable type for the specified source.
      *
-     * @argument {type} ComponentType      The component type
+     * @param type      The type of component
      */
     getConnectableTypeForSource(type: ComponentType): string {
         switch (type) {
@@ -1221,6 +1221,17 @@ export class CanvasUtils {
             });
     }
 
+    /**
+     * Reset the tooltip for the specified selection.
+     *
+     * @param selection
+     */
+    public resetCanvasTooltip(selection: any): void {
+        // while tooltips are created dynamically, we need to provide the ability to remove the mouse
+        // listener to prevent new tooltips from being created on subsequent mouse enter/leave
+        selection.on('mouseenter', null).on('mouseleave', null);
+    }
+
     /**
      * Sets the bulletin visibility and applies a tooltip if necessary.
      *
@@ -1232,6 +1243,9 @@ export class CanvasUtils {
             // reset the bulletin icon/background
             selection.select('text.bulletin-icon').style('visibility', 'hidden');
             selection.select('rect.bulletin-background').style('visibility', 'hidden');
+
+            // reset the canvas tooltip
+            this.resetCanvasTooltip(selection);
         } else {
             // show the bulletin icon/background
             const bulletinIcon: any = selection.select('text.bulletin-icon').style('visibility', 'visible');

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts

@@ -323,6 +323,8 @@ export class PortManager {
                         .each(function (this: any) {
                             if (!self.nifiCommon.isBlank(portData.component.comments)) {
                                 self.canvasUtils.canvasTooltip(TextTip, d3.select(this), portData.component.comments);
+                            } else {
+                                self.canvasUtils.resetCanvasTooltip(d3.select(this));
                             }
                         });
                 } else {
@@ -414,6 +416,8 @@ export class PortManager {
                         isValidating: false,
                         validationErrors: d.component.validationErrors
                     });
+                } else {
+                    self.canvasUtils.resetCanvasTooltip(d3.select(this));
                 }
             });
 

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts

@@ -1127,6 +1127,8 @@ export class ProcessGroupManager {
                             self.canvasUtils.canvasTooltip(VersionControlTip, d3.select(this), {
                                 versionControlInformation: processGroupData.component.versionControlInformation
                             });
+                        } else {
+                            self.canvasUtils.resetCanvasTooltip(d3.select(this));
                         }
                     });
 
@@ -1144,6 +1146,8 @@ export class ProcessGroupManager {
                                     d3.select(this),
                                     processGroupData.component.comments
                                 );
+                            } else {
+                                self.canvasUtils.resetCanvasTooltip(d3.select(this));
                             }
                         });
 

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts

@@ -550,6 +550,8 @@ export class ProcessorManager {
                                     d3.select(nodes[i]),
                                     processorData.component.config.comments
                                 );
+                            } else {
+                                this.canvasUtils.resetCanvasTooltip(d3.select(nodes[i]));
                             }
                         });
                 } else {
@@ -730,6 +732,8 @@ export class ProcessorManager {
                         isValidating: d.status.aggregateSnapshot.runStatus === 'Validating',
                         validationErrors: d.component.validationErrors
                     });
+                } else {
+                    this.canvasUtils.resetCanvasTooltip(d3.select(nodes[i]));
                 }
             });
 

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts

@@ -465,6 +465,8 @@ export class RemoteProcessGroupManager {
                                     d3.select(this),
                                     remoteProcessGroupData.component.comments
                                 );
+                            } else {
+                                self.canvasUtils.resetCanvasTooltip(d3.select(this));
                             }
                         });
 
@@ -622,6 +624,8 @@ export class RemoteProcessGroupManager {
                         isValidating: false,
                         validationErrors: self.getIssues(d)
                     });
+                } else {
+                    self.canvasUtils.resetCanvasTooltip(d3.select(this));
                 }
             });
 

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts

@@ -2287,7 +2287,7 @@ export class FlowEffects {
             mergeMap(([requests, processGroupId]) => {
                 if (requests.length === 1) {
                     return from(this.flowService.deleteComponent(requests[0])).pipe(
-                        map(() => {
+                        map((response) => {
                             const deleteResponses: DeleteComponentResponse[] = [
                                 {
                                     id: requests[0].id,
@@ -2305,6 +2305,8 @@ export class FlowEffects {
                                         type: ComponentType.Connection
                                     })
                                 );
+                            } else {
+                                this.store.dispatch(FlowActions.loadComponentsForConnection({ connection: response }));
                             }
 
                             return FlowActions.deleteComponentsSuccess({