[NIFI-14042] - Display the branch information for version controlled Process Groups

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

@@ -26,7 +26,8 @@ import {
     selectFlowLoadingStatus,
     selectProcessGroups,
     selectAnySelectedComponentIds,
-    selectTransitionRequired
+    selectTransitionRequired,
+    selectRegistryClients
 } from '../../state/flow/flow.selectors';
 import { CanvasUtils } from '../canvas-utils.service';
 import { enterProcessGroup } from '../../state/flow/flow.actions';
@@ -41,6 +42,7 @@ import { NiFiCommon, TextTip } from '@nifi/shared';
 })
 export class ProcessGroupManager implements OnDestroy {
     private destroyed$: Subject<boolean> = new Subject();
+    private registryClients = this.store.selectSignal(selectRegistryClients);
 
     private dimensions: Dimension = {
         width: 384,
@@ -1117,7 +1119,8 @@ export class ProcessGroupManager implements OnDestroy {
                     versionControl.each(function (this: any) {
                         if (self.isUnderVersionControl(processGroupData)) {
                             self.canvasUtils.canvasTooltip(VersionControlTip, d3.select(this), {
-                                versionControlInformation: processGroupData.component.versionControlInformation
+                                versionControlInformation: processGroupData.component.versionControlInformation,
+                                registryClients: self.registryClients()
                             });
                         } else {
                             self.canvasUtils.resetCanvasTooltip(d3.select(this));

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

@@ -112,7 +112,7 @@ import {
     VersionControlInformationEntity
 } from './index';
 import { StatusHistoryRequest } from '../../../../state/status-history';
-import { FetchComponentVersionsRequest } from '../../../../state/shared';
+import { FetchComponentVersionsRequest, RegistryClientEntity } from '../../../../state/shared';
 import { ErrorContext } from '../../../../state/error';
 
 const CANVAS_PREFIX = '[Canvas]';
@@ -161,6 +161,11 @@ export const startProcessGroupPolling = createAction(`${CANVAS_PREFIX} Start Pro
 
 export const stopProcessGroupPolling = createAction(`${CANVAS_PREFIX} Stop Process Group Polling`);
 
+export const setRegistryClients = createAction(
+    `${CANVAS_PREFIX} Set Registry Clients`,
+    props<{ request: RegistryClientEntity[] }>()
+);
+
 export const loadConnectionsForComponent = createAction(
     `${CANVAS_PREFIX} Load Connections For Component`,
     props<{ id: string }>()

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

@@ -158,6 +158,7 @@ import { selectDocumentVisibilityState } from '../../../../state/document-visibi
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DocumentVisibility } from '../../../../state/document-visibility';
 import { ErrorContextKey } from '../../../../state/error';
+import { setRegistryClients } from './flow.actions';
 
 @Injectable()
 export class FlowEffects {
@@ -234,17 +235,19 @@ export class FlowEffects {
                 combineLatest([
                     this.flowService.getFlow(request.id),
                     this.flowService.getFlowStatus(),
-                    this.flowService.getControllerBulletins()
+                    this.flowService.getControllerBulletins(),
+                    this.registryService.getRegistryClients()
                 ]).pipe(
-                    map(([flow, flowStatus, controllerBulletins]) => {
+                    map(([flow, flowStatus, controllerBulletins, registryClientsResponse]) => {
                         this.store.dispatch(resetPollingFlowAnalysis());
                         return FlowActions.loadProcessGroupSuccess({
                             response: {
                                 id: request.id,
                                 flow: flow,
                                 flowStatus: flowStatus,
                                 controllerBulletins: controllerBulletins,
-                                connectedStateChanged
+                                connectedStateChanged,
+                                registryClients: registryClientsResponse.registries
                             }
                         });
                     }),
@@ -339,7 +342,7 @@ export class FlowEffects {
                                     request,
                                     registryClients: response.registries
                                 };
-
+                                this.store.dispatch(setRegistryClients({ request: response.registries }));
                                 return FlowActions.openImportFromRegistryDialog({ request: dialogRequest });
                             }),
                             catchError((errorResponse: HttpErrorResponse) =>
@@ -3460,7 +3463,7 @@ export class FlowEffects {
                             revision: versionInfo.processGroupRevision,
                             registryClients: registryClients.registries
                         };
-
+                        this.store.dispatch(setRegistryClients({ request: registryClients.registries }));
                         return FlowActions.openSaveVersionDialog({ request: dialogRequest });
                     }),
                     catchError((errorResponse: HttpErrorResponse) => of(this.snackBarOrFullScreenError(errorResponse)))

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/flow.reducer.ts

@@ -65,6 +65,7 @@ import {
     setFlowAnalysisOpen,
     setNavigationCollapsed,
     setOperationCollapsed,
+    setRegistryClients,
     setSkipTransform,
     setTransitionRequired,
     startComponent,
@@ -158,6 +159,7 @@ export const initialState: FlowState = {
         parameterProviderBulletins: [],
         reportingTaskBulletins: []
     },
+    registryClients: [],
     copiedSnippet: null,
     dragging: false,
     saving: false,
@@ -270,11 +272,16 @@ export const flowReducer = createReducer(
             };
             draftState.flowStatus = response.flowStatus;
             draftState.controllerBulletins = response.controllerBulletins;
+            draftState.registryClients = response.registryClients;
             draftState.addedCache = [];
             draftState.removedCache = [];
             draftState.status = 'success' as const;
         });
     }),
+    on(setRegistryClients, (state, { request }) => ({
+        ...state,
+        registryClients: request
+    })),
     on(loadProcessGroupComplete, (state) => ({
         ...state,
         status: 'complete' as const

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/flow.selectors.ts

@@ -248,6 +248,8 @@ export const selectControllerBulletins = createSelector(
     (state: FlowState) => state.controllerBulletins.bulletins // TODO - include others?
 );
 
+export const selectRegistryClients = createSelector(selectFlowState, (state: FlowState) => state.registryClients);
+
 export const selectNavigationCollapsed = createSelector(
     selectFlowState,
     (state: FlowState) => state.navigationCollapsed

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/index.ts

@@ -68,6 +68,7 @@ export interface LoadProcessGroupResponse {
     flowStatus: ControllerStatusEntity;
     controllerBulletins: ControllerBulletinsEntity;
     connectedStateChanged: boolean;
+    registryClients: RegistryClientEntity[];
 }
 
 export interface LoadConnectionSuccess {
@@ -536,6 +537,7 @@ export interface CopiedSnippet {
 
 export interface VersionControlTipInput {
     versionControlInformation: VersionControlInformation;
+    registryClients?: RegistryClientEntity[];
 }
 
 /*
@@ -631,6 +633,7 @@ export interface FlowState {
     flowStatus: ControllerStatusEntity;
     refreshRpgDetails: RefreshRemoteProcessGroupPollingDetailsRequest | null;
     controllerBulletins: ControllerBulletinsEntity;
+    registryClients: RegistryClientEntity[];
     dragging: boolean;
     transitionRequired: boolean;
     skipTransform: boolean;

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.ts

@@ -138,9 +138,12 @@ export class ImportFromRegistry extends CloseOnEscapeDialog implements OnInit {
                 this.timeOffset = timeOffset;
             });
 
-        const sortedRegistries = dialogRequest.registryClients.slice().sort((a, b) => {
-            return this.nifiCommon.compareString(a.component.name, b.component.name);
-        });
+        const sortedRegistries = dialogRequest.registryClients
+            .slice()
+            .filter((registry) => registry.permissions.canRead)
+            .sort((a, b) => {
+                return this.nifiCommon.compareString(a.component.name, b.component.name);
+            });
 
         sortedRegistries.forEach((registryClient: RegistryClientEntity) => {
             if (registryClient.permissions.canRead) {
@@ -153,8 +156,9 @@ export class ImportFromRegistry extends CloseOnEscapeDialog implements OnInit {
             this.clientBranchingSupportMap.set(registryClient.id, registryClient.component.supportsBranching);
         });
 
+        const initialRegistry = this.registryClientOptions.length > 0 ? this.registryClientOptions[0].value : null;
         this.importFromRegistryForm = this.formBuilder.group({
-            registry: new FormControl(this.registryClientOptions[0].value, Validators.required),
+            registry: new FormControl(initialRegistry, Validators.required),
             branch: new FormControl(null),
             bucket: new FormControl(null, Validators.required),
             flow: new FormControl(null, Validators.required),

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.ts

@@ -92,9 +92,12 @@ export class SaveVersionDialog extends CloseOnEscapeDialog implements OnInit {
         this.forceCommit = !!dialogRequest.forceCommit;
 
         if (dialogRequest.registryClients) {
-            const sortedRegistries = dialogRequest.registryClients.slice().sort((a, b) => {
-                return this.nifiCommon.compareString(a.component.name, b.component.name);
-            });
+            const sortedRegistries = dialogRequest.registryClients
+                .slice()
+                .filter((registry) => registry.permissions.canRead)
+                .sort((a, b) => {
+                    return this.nifiCommon.compareString(a.component.name, b.component.name);
+                });
 
             sortedRegistries.forEach((registryClient: RegistryClientEntity) => {
                 if (registryClient.permissions.canRead) {
@@ -107,8 +110,9 @@ export class SaveVersionDialog extends CloseOnEscapeDialog implements OnInit {
                 this.clientBranchingSupportMap.set(registryClient.id, registryClient.component.supportsBranching);
             });
 
+            const initialRegistry = this.registryClientOptions.length > 0 ? this.registryClientOptions[0].value : null;
             this.saveVersionForm = formBuilder.group({
-                registry: new FormControl(this.registryClientOptions[0].value, Validators.required),
+                registry: new FormControl(initialRegistry, Validators.required),
                 branch: new FormControl(null),
                 bucket: new FormControl(null, Validators.required),
                 flowName: new FormControl(null, Validators.required),

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/tooltips/version-control-tip/version-control-tip.component.html

@@ -16,10 +16,33 @@
   -->
 
 <div class="tooltip" [style.left.px]="left" [style.top.px]="top">
-    <div>
-        {{ getTrackingMessage() }}
-    </div>
-    <div>
+    @if (data?.versionControlInformation; as vci) {
+        <div class="flex flex-col gap-y-2 mb-3">
+            <div>
+                <div>Flow Name</div>
+                <div class="tertiary-color font-medium">{{ vci.flowName }}</div>
+            </div>
+            <div>
+                <div>Version</div>
+                <div class="tertiary-color font-medium">{{ vci.version }}</div>
+            </div>
+            <div>
+                <div>Registry</div>
+                <div class="tertiary-color font-medium">{{ vci.registryName }}</div>
+            </div>
+            @if (supportsBranching() && vci.branch) {
+                <div>
+                    <div>Branch</div>
+                    <div class="tertiary-color font-medium">{{ vci.branch }}</div>
+                </div>
+            }
+            <div>
+                <div>Bucket</div>
+                <div class="tertiary-color font-medium">{{ vci.bucketName }}</div>
+            </div>
+        </div>
+    }
+    <div class="italic">
         {{ data?.versionControlInformation?.stateExplanation }}
     </div>
 </div>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/tooltips/version-control-tip/version-control-tip.component.ts

@@ -17,6 +17,7 @@
 
 import { Component, Input } from '@angular/core';
 import { VersionControlInformation, VersionControlTipInput } from '../../../../state/flow';
+import { RegistryClientEntity } from '../../../../../../state/shared';
 
 @Component({
     selector: 'version-control-tip',
@@ -36,4 +37,14 @@ export class VersionControlTip {
 
         return '';
     }
+
+    supportsBranching(): boolean {
+        if (this.data?.registryClients && this.data?.registryClients.length > 0) {
+            const vci = this.data.versionControlInformation;
+            return this.data.registryClients.some((client: RegistryClientEntity) => {
+                return client.id === vci.registryId && client.component.supportsBranching;
+            });
+        }
+        return false;
+    }
 }