NIFI-14191: Add the Reference Process Group to the URL when navigating to the Parent

Author: Freedom9339

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

@@ -553,6 +553,11 @@ export const setSkipTransform = createAction(
     props<{ skipTransform: boolean }>()
 );
 
+export const setLeavingProcessGroupId = createAction(
+    `${CANVAS_PREFIX} Set Leaving Process Group Id`,
+    props<{ leavingProcessGroupId: string | null }>()
+);
+
 /**
  * allowTransition is a flag that can be set that indicates if a transition should be used when applying a transform.
  * By default, restoring the viewport or selecting/centering components will not use a transition unless explicitly

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

@@ -2823,9 +2823,18 @@ export class FlowEffects {
         () =>
             this.actions$.pipe(
                 ofType(FlowActions.leaveProcessGroup),
-                concatLatestFrom(() => this.store.select(selectParentProcessGroupId)),
-                filter(([, parentProcessGroupId]) => parentProcessGroupId != null),
-                tap(([, parentProcessGroupId]) => {
+                concatLatestFrom(() => [
+                    this.store.select(selectParentProcessGroupId),
+                    this.store.select(selectCurrentProcessGroupId)
+                ]),
+                filter(
+                    ([, parentProcessGroupId, currentProcessGroupId]) =>
+                        parentProcessGroupId != null && currentProcessGroupId != null
+                ),
+                tap(([, parentProcessGroupId, currentProcessGroupId]) => {
+                    this.store.dispatch(
+                        FlowActions.setLeavingProcessGroupId({ leavingProcessGroupId: currentProcessGroupId })
+                    );
                     this.router.navigate(['/process-groups', parentProcessGroupId]);
                 })
             ),

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

@@ -64,6 +64,7 @@ import {
     setAllowTransition,
     setDragging,
     setFlowAnalysisOpen,
+    setLeavingProcessGroupId,
     setNavigationCollapsed,
     setOperationCollapsed,
     setRegistryClients,
@@ -172,6 +173,7 @@ export const initialState: FlowState = {
     versionSaving: false,
     transitionRequired: false,
     skipTransform: false,
+    leavingProcessGroupId: null,
     allowTransition: false,
     navigationCollapsed: false,
     operationCollapsed: false,
@@ -558,6 +560,10 @@ export const flowReducer = createReducer(
         ...state,
         skipTransform: true
     })),
+    on(setLeavingProcessGroupId, (state, { leavingProcessGroupId }) => ({
+        ...state,
+        leavingProcessGroupId
+    })),
     on(setNavigationCollapsed, (state, { navigationCollapsed }) => ({
         ...state,
         navigationCollapsed

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

@@ -166,6 +166,11 @@ export const selectDragging = createSelector(selectFlowState, (state: FlowState)
 
 export const selectSkipTransform = createSelector(selectFlowState, (state: FlowState) => state.skipTransform);
 
+export const selectLeavingProcessGroupId = createSelector(
+    selectFlowState,
+    (state: FlowState) => state.leavingProcessGroupId
+);
+
 export const selectAllowTransition = createSelector(selectFlowState, (state: FlowState) => state.allowTransition);
 
 export const selectFunnels = createSelector(

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

@@ -661,6 +661,7 @@ export interface FlowState {
     dragging: boolean;
     transitionRequired: boolean;
     skipTransform: boolean;
+    leavingProcessGroupId: string | null;
     allowTransition: boolean;
     saving: boolean;
     navigationCollapsed: boolean;

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

@@ -25,9 +25,11 @@ import {
     editComponent,
     editCurrentProcessGroup,
     loadProcessGroup,
+    navigateWithoutTransform,
     paste,
     resetFlowState,
     selectComponents,
+    setLeavingProcessGroupId,
     setSkipTransform,
     startProcessGroupPolling,
     stopProcessGroupPolling
@@ -49,6 +51,7 @@ import {
     selectFunnel,
     selectInputPort,
     selectLabel,
+    selectLeavingProcessGroupId,
     selectOutputPort,
     selectProcessGroup,
     selectProcessGroupIdFromRoute,
@@ -142,15 +145,34 @@ export class Canvas implements OnInit, OnDestroy {
                 distinctUntilChanged(),
                 switchMap(() => this.store.select(selectProcessGroupRoute)),
                 filter((processGroupRoute) => processGroupRoute != null),
-                concatLatestFrom(() => this.store.select(selectSkipTransform)),
+                concatLatestFrom(() => [
+                    this.store.select(selectSkipTransform),
+                    this.store.select(selectCurrentProcessGroupId),
+                    this.store.select(selectLeavingProcessGroupId)
+                ]),
                 takeUntilDestroyed()
             )
-            .subscribe(([, skipTransform]) => {
+            .subscribe(([, skipTransform, currentProcessGroupId, leavingProcessGroupId]) => {
                 if (skipTransform) {
                     this.store.dispatch(setSkipTransform({ skipTransform: false }));
                 } else {
                     this.store.dispatch(restoreViewport());
                 }
+
+                // If leaving process group, select it after parent PG has loaded
+                if (leavingProcessGroupId && currentProcessGroupId != leavingProcessGroupId) {
+                    this.store.dispatch(setLeavingProcessGroupId({ leavingProcessGroupId: null }));
+                    this.store.dispatch(
+                        navigateWithoutTransform({
+                            url: [
+                                '/process-groups',
+                                currentProcessGroupId,
+                                ComponentType.ProcessGroup,
+                                leavingProcessGroupId
+                            ]
+                        })
+                    );
+                }
             });
 
         // handle single component selection