NIFI-13289 add tooltips to NewCanvasItem (#8870)

This closes #8870

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html

@@ -22,42 +22,50 @@
                 [type]="ComponentType.Processor"
                 [disabled]="!canvasPermissions.canWrite"
                 iconClass="icon-processor"
-                iconHoverClass="icon-processor-add"></new-canvas-item>
+                iconHoverClass="icon-processor-add"
+                tooltip="Processor"></new-canvas-item>
             <new-canvas-item
                 [type]="ComponentType.InputPort"
                 [disabled]="!canvasPermissions.canWrite"
                 iconClass="icon-port-in"
-                iconHoverClass="icon-port-in-add"></new-canvas-item>
+                iconHoverClass="icon-port-in-add"
+                tooltip="Input Port"></new-canvas-item>
             <new-canvas-item
                 [type]="ComponentType.OutputPort"
                 [disabled]="!canvasPermissions.canWrite"
                 iconClass="icon-port-out"
-                iconHoverClass="icon-port-out-add"></new-canvas-item>
+                iconHoverClass="icon-port-out-add"
+                tooltip="Output Port"></new-canvas-item>
             <new-canvas-item
                 [type]="ComponentType.ProcessGroup"
                 [disabled]="!canvasPermissions.canWrite"
                 iconClass="icon-group"
-                iconHoverClass="icon-group-add"></new-canvas-item>
+                iconHoverClass="icon-group-add"
+                tooltip="Process Group"></new-canvas-item>
             <new-canvas-item
                 [type]="ComponentType.RemoteProcessGroup"
                 [disabled]="!canvasPermissions.canWrite"
                 iconClass="icon-group-remote"
-                iconHoverClass="icon-group-remote-add"></new-canvas-item>
+                iconHoverClass="icon-group-remote-add"
+                tooltip="Remote Process Group"></new-canvas-item>
             <new-canvas-item
                 [type]="ComponentType.Funnel"
                 [disabled]="!canvasPermissions.canWrite"
                 iconClass="icon-funnel"
-                iconHoverClass="icon-funnel-add"></new-canvas-item>
+                iconHoverClass="icon-funnel-add"
+                tooltip="Funnel"></new-canvas-item>
             <new-canvas-item
                 [type]="ComponentType.Flow"
                 [disabled]="!canvasPermissions.canWrite"
                 iconClass="icon-import-from-registry"
-                iconHoverClass="icon-import-from-registry-add"></new-canvas-item>
+                iconHoverClass="icon-import-from-registry-add"
+                tooltip="Import from Registry"></new-canvas-item>
             <new-canvas-item
                 [type]="ComponentType.Label"
                 [disabled]="!canvasPermissions.canWrite"
                 iconClass="icon-label"
-                iconHoverClass="icon-label-add"></new-canvas-item>
+                iconHoverClass="icon-label-add"
+                tooltip="Label"></new-canvas-item>
         }
     </navigation>
     <flow-status

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.html

@@ -14,7 +14,14 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-<div class="new-canvas-item">
+<div
+    class="new-canvas-item"
+    nifiTooltip
+    [tooltipComponentType]="TextTip"
+    [tooltipInputData]="tooltip"
+    [tooltipDisabled]="dragging"
+    [position]="tooltipPosition"
+    [delayClose]="false">
     <div class="h-16 w-16 pl-1.5 flex items-center justify-center relative icon" [class]="iconClass"></div>
     <button
         class="h-16 w-16 pl-1.5 -mt-16 flex items-center justify-center relative icon"

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.ts

@@ -25,12 +25,15 @@ import { selectDragging } from '../../../../state/flow/flow.selectors';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ComponentType } from '../../../../../../state/shared';
 import { CanvasView } from '../../../../service/canvas-view.service';
+import { NifiTooltipDirective } from '../../../../../../ui/common/tooltips/nifi-tooltip.directive';
+import { TextTip } from '../../../../../../ui/common/tooltips/text-tip/text-tip.component';
+import { ConnectedPosition } from '@angular/cdk/overlay';
 
 @Component({
     selector: 'new-canvas-item',
     standalone: true,
     templateUrl: './new-canvas-item.component.html',
-    imports: [CdkDrag],
+    imports: [CdkDrag, NifiTooltipDirective],
     styleUrls: ['./new-canvas-item.component.scss']
 })
 export class NewCanvasItem {
@@ -38,6 +41,17 @@ export class NewCanvasItem {
     @Input() iconClass = '';
     @Input() iconHoverClass = '';
     @Input() disabled = false;
+    @Input() tooltip = '';
+
+    protected readonly TextTip = TextTip;
+
+    tooltipPosition: ConnectedPosition = {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 8
+    };
 
     dragging = false;
 

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/nifi-tooltip.directive.ts

@@ -25,6 +25,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
 })
 export class NifiTooltipDirective<T> implements OnDestroy {
     @Input() tooltipComponentType!: Type<T>;
+    @Input() tooltipDisabled = false;
     @Input() tooltipInputData: any;
     @Input() position: ConnectedPosition | undefined;
     @Input() delayClose = true;
@@ -58,11 +59,29 @@ export class NifiTooltipDirective<T> implements OnDestroy {
         }
     }
 
+    @HostListener('mousemove')
+    mouseMove() {
+        if (this.overlayRef?.hasAttached() && this.tooltipDisabled) {
+            this.overlayRef?.detach();
+        }
+    }
+
+    @HostListener('mouseup')
+    mouseup() {
+        if (!this.overlayRef?.hasAttached()) {
+            this.attach();
+        }
+    }
+
     ngOnDestroy(): void {
         this.overlayRef?.dispose();
     }
 
     private attach(): void {
+        if (this.tooltipDisabled) {
+            return;
+        }
+
         if (!this.overlayRef) {
             const positionStrategy = this.getPositionStrategy();
             this.overlayRef = this.overlay.create({ positionStrategy });