NIFI-15817: Adding support for view the flow managed by a Connector i…

[mcgilman]

…n a new reusable component.

Summary

Adds a reusable canvas engine and connector canvas page to the NiFi frontend, enabling users to view the internal flow managed by a connector in a read-only canvas.

Reusable Canvas Engine (ui/common/canvas/)

A D3-based graph rendering component that can be consumed by any page needing to display a NiFi flow. Includes:

• Canvas component — D3 zoom/pan, box selection, viewport persistence, signal-based inputs/outputs, birdseye public API
• 7 rendering layers — Processors, connections, process groups, remote process groups, ports, funnels, and labels, each with their own SVG renderer
• Supporting utilities — Text ellipsis, format utils, component utils, overlap detection, canvas constants and types
• Global canvasUi state slice — NgRx feature state for transform and feature flags (canEdit/canSelect) shared across canvas consumers

Connector Canvas Page (pages/connectors/ui/connector-canvas/)

A read-only view of a connector's internal flow, accessible at /connectors/:id/canvas/:processGroupId. Includes:

• Page shell with global navigation header, error state handling, and dataReady gating
• NgRx state management — connectorCanvas (flow data, breadcrumbs, PG navigation) and connectorCanvasEntity (connector metadata) feature states
• Routing — Root guard that resolves the connector's managedProcessGroupId, redirector component, child routes for selection and PG navigation
• Process group navigation — Double-click to enter child groups, Escape to return to parent, with canNavigateToParent gating
• Keyboard shortcuts — Escape (leave group) and Ctrl/Cmd+R (refresh flow) with guards for dialogs and input elements
• API integration — ConnectorService.getConnectorFlow() for loading flow data

Other Changes

• VersionControlTip relocated from pages/flow-designer/ui/common/tooltips/ to ui/common/tooltips/ to avoid cross-page imports from the reusable canvas
• navigateToViewConnector effect updated to navigate to the canvas (replaces window.alert placeholder)

Feature Gating

All changes are behind the existing enableConnectors feature flag (environment.enableConnectors). The /connectors route uses connectorsFeatureGuard (canMatch), so the canvas page and its lazy-loaded module are unreachable when the flag is off.

Testing

17 spec files with comprehensive coverage:

• Connector canvas — component, effects, reducers, selectors, guard, and redirector specs
• Reusable canvas — canvas component spec (birdseye API, zoom, viewport, selection), all 7 renderer specs, overlap detection utils spec

---

[rfellows]

Really nice @mcgilman. I just noted a couple of differences in how process groups and remote process groups render their titles on the new canvas vs the flow designer canvas.

Overall this is a nice incremental feature. I look forward to this becoming more fully-featured... and eventually replacing the flow designer canvas 🤞

[rfellows]

I don't think we want the font-semibold here. The flow designer canvas doesn't have this class and it makes a fairly noticeable difference between the 2.

[rfellows]

I don't think we want the font-semibold here. The flow designer canvas doesn't have this class.

[rfellows]

Looks good. Thanks @mcgilman 👍