[NIFI-12995]- Change Flow Version, Show Local Changes, Revert local c…

…hanges (apache#8607)

* [NIFI-12995]- Change Flow Version, Show Local Changes, Revert local changes

* review feedback

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/.prettierrc

@@ -4,5 +4,13 @@
     "singleQuote": true,
     "printWidth": 120,
     "tabWidth": 4,
-    "bracketSameLine": true
+    "bracketSameLine": true,
+    "overrides": [
+        {
+            "files": "*.html",
+            "options": {
+                "parser": "angular"
+            }
+        }
+    ]
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json

@@ -75,7 +75,7 @@
         "jest-preset-angular": "^14.0.3",
         "nx": "18.1.3",
         "postcss": "^8.4.32",
-        "prettier": "3.1.0",
+        "prettier": "^3.2.5",
         "tailwindcss": "^3.3.6",
         "typescript": "5.3.3"
     },

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/project.json

@@ -81,6 +81,18 @@
                 "lintFilePatterns": ["src/**/*.ts"]
             },
             "outputs": ["{options.outputFile}"]
+        },
+        "prettier": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "npm run prettier"
+            }
+        },
+        "prettier:format": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "npm run prettier-format"
+            }
         }
     }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts

@@ -37,9 +37,12 @@ import {
     navigateToProvenanceForComponent,
     navigateToQueueListing,
     navigateToViewStatusHistoryForComponent,
+    openChangeVersionDialogRequest,
     openCommitLocalChangesDialogRequest,
     openForceCommitLocalChangesDialogRequest,
+    openRevertLocalChangesDialogRequest,
     openSaveVersionDialogRequest,
+    openShowLocalChangesDialogRequest,
     reloadFlow,
     replayLastProvenanceEvent,
     requestRefreshRemoteProcessGroup,
@@ -52,11 +55,13 @@ import {
 } from '../state/flow/flow.actions';
 import { ComponentType } from '../../../state/shared';
 import {
+    ConfirmStopVersionControlRequest,
     DeleteComponentRequest,
     MoveComponentRequest,
+    OpenChangeVersionDialogRequest,
+    OpenLocalChangesDialogRequest,
     StartComponentRequest,
-    StopComponentRequest,
-    StopVersionControlRequest
+    StopComponentRequest
 } from '../state/flow';
 import {
     ContextMenuDefinition,
@@ -148,8 +153,17 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider {
                 },
                 clazz: 'fa',
                 text: 'Show local changes',
-                action: () => {
-                    // TODO - showLocalChanges
+                action: (selection: d3.Selection<any, any, any, any>) => {
+                    let pgId;
+                    if (selection.empty()) {
+                        pgId = this.canvasUtils.getProcessGroupId();
+                    } else {
+                        pgId = selection.datum().id;
+                    }
+                    const request: OpenLocalChangesDialogRequest = {
+                        processGroupId: pgId
+                    };
+                    this.store.dispatch(openShowLocalChangesDialogRequest({ request }));
                 }
             },
             {
@@ -158,8 +172,17 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider {
                 },
                 clazz: 'fa fa-undo',
                 text: 'Revert local changes',
-                action: () => {
-                    // TODO - revertLocalChanges
+                action: (selection: d3.Selection<any, any, any, any>) => {
+                    let pgId;
+                    if (selection.empty()) {
+                        pgId = this.canvasUtils.getProcessGroupId();
+                    } else {
+                        pgId = selection.datum().id;
+                    }
+                    const request: OpenLocalChangesDialogRequest = {
+                        processGroupId: pgId
+                    };
+                    this.store.dispatch(openRevertLocalChangesDialogRequest({ request }));
                 }
             },
             {
@@ -168,8 +191,17 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider {
                 },
                 clazz: 'fa',
                 text: 'Change version',
-                action: () => {
-                    // TODO - changeFlowVersion
+                action: (selection: d3.Selection<any, any, any, any>) => {
+                    let pgId;
+                    if (selection.empty()) {
+                        pgId = this.canvasUtils.getProcessGroupId();
+                    } else {
+                        pgId = selection.datum().id;
+                    }
+                    const request: OpenChangeVersionDialogRequest = {
+                        processGroupId: pgId
+                    };
+                    this.store.dispatch(openChangeVersionDialogRequest({ request }));
                 }
             },
             {
@@ -182,10 +214,14 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider {
                 clazz: 'fa',
                 text: 'Stop version control',
                 action: (selection: d3.Selection<any, any, any, any>) => {
-                    const selectionData = selection.datum();
-                    const request: StopVersionControlRequest = {
-                        revision: selectionData.revision,
-                        processGroupId: selectionData.id
+                    let pgId;
+                    if (selection.empty()) {
+                        pgId = this.canvasUtils.getProcessGroupId();
+                    } else {
+                        pgId = selection.datum().id;
+                    }
+                    const request: ConfirmStopVersionControlRequest = {
+                        processGroupId: pgId
                     };
                     this.store.dispatch(stopVersionControlRequest({ request }));
                 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/flow.service.ts

@@ -27,6 +27,8 @@ import {
     CreateProcessorRequest,
     CreateRemoteProcessGroupRequest,
     DeleteComponentRequest,
+    FlowComparisonEntity,
+    FlowUpdateRequestEntity,
     GoToRemoteProcessGroupRequest,
     ProcessGroupRunStatusRequest,
     ReplayLastProvenanceEventRequest,
@@ -355,4 +357,58 @@ export class FlowService implements PropertyDescriptorRetriever {
             params
         }) as Observable<VersionControlInformationEntity>;
     }
+
+    initiateChangeVersionUpdate(request: VersionControlInformationEntity) {
+        return this.httpClient.post(
+            `${FlowService.API}/versions/update-requests/process-groups/${request.versionControlInformation?.groupId}`,
+            {
+                ...request
+            }
+        ) as Observable<FlowUpdateRequestEntity>;
+    }
+
+    getChangeVersionUpdateRequest(requestId: string) {
+        return this.httpClient.get(
+            `${FlowService.API}/versions/update-requests/${requestId}`
+        ) as Observable<FlowUpdateRequestEntity>;
+    }
+
+    deleteChangeVersionUpdateRequest(requestId: string) {
+        const params = {
+            disconnectedNodeAcknowledged: false
+        };
+        return this.httpClient.delete(`${FlowService.API}/versions/update-requests/${requestId}`, {
+            params
+        }) as Observable<FlowUpdateRequestEntity>;
+    }
+
+    initiateRevertFlowVersion(request: VersionControlInformationEntity) {
+        return this.httpClient.post(
+            `${FlowService.API}/versions/revert-requests/process-groups/${request.versionControlInformation?.groupId}`,
+            {
+                ...request
+            }
+        ) as Observable<FlowUpdateRequestEntity>;
+    }
+
+    getRevertChangesUpdateRequest(requestId: string) {
+        return this.httpClient.get(
+            `${FlowService.API}/versions/revert-requests/${requestId}`
+        ) as Observable<FlowUpdateRequestEntity>;
+    }
+
+    deleteRevertChangesUpdateRequest(requestId: string) {
+        const params = {
+            disconnectedNodeAcknowledged: false
+        };
+        return this.httpClient.delete(`${FlowService.API}/versions/revert-requests/${requestId}`, {
+            params
+        }) as Observable<FlowUpdateRequestEntity>;
+    }
+
+    getLocalModifications(processGroupId: string): Observable<FlowComparisonEntity> {
+        return this.httpClient.get(
+            `${FlowService.API}/process-groups/${processGroupId}/local-modifications`
+        ) as Observable<FlowComparisonEntity>;
+    }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.actions.ts

@@ -18,7 +18,9 @@
 import { createAction, props } from '@ngrx/store';
 import {
     CenterComponentRequest,
+    ChangeVersionDialogRequest,
     ComponentEntity,
+    ConfirmStopVersionControlRequest,
     CreateComponentRequest,
     CreateComponentResponse,
     CreateConnection,
@@ -35,6 +37,7 @@ import {
     EditConnectionDialogRequest,
     EditCurrentProcessGroupRequest,
     EnterProcessGroupRequest,
+    FlowUpdateRequestEntity,
     GoToRemoteProcessGroupRequest,
     GroupComponentsDialogRequest,
     GroupComponentsRequest,
@@ -48,13 +51,16 @@ import {
     LoadProcessGroupResponse,
     LoadProcessorSuccess,
     LoadRemoteProcessGroupSuccess,
+    LocalChangesDialogRequest,
     MoveComponentsRequest,
     NavigateToComponentRequest,
     NavigateToControllerServicesRequest,
     NavigateToManageComponentPoliciesRequest,
     NavigateToQueueListing,
+    OpenChangeVersionDialogRequest,
     OpenComponentDialogRequest,
     OpenGroupComponentsDialogRequest,
+    OpenLocalChangesDialogRequest,
     OpenSaveVersionDialogRequest,
     RefreshRemoteProcessGroupRequest,
     ReplayLastProvenanceEventRequest,
@@ -609,6 +615,11 @@ export const startCurrentProcessGroup = createAction(`${CANVAS_PREFIX} Start Cur
 
 export const stopCurrentProcessGroup = createAction(`${CANVAS_PREFIX} Stop Current Process Group`);
 
+export const openChangeVersionDialogRequest = createAction(
+    `${CANVAS_PREFIX} Open Change Flow Version Dialog Request`,
+    props<{ request: OpenChangeVersionDialogRequest }>()
+);
+
 export const openSaveVersionDialogRequest = createAction(
     `${CANVAS_PREFIX} Open Save Flow Version Dialog Request`,
     props<{ request: OpenSaveVersionDialogRequest }>()
@@ -624,6 +635,42 @@ export const openForceCommitLocalChangesDialogRequest = createAction(
     props<{ request: OpenSaveVersionDialogRequest }>()
 );
 
+export const openChangeVersionDialog = createAction(
+    `${CANVAS_PREFIX} Open Change Flow Version Dialog`,
+    props<{ request: ChangeVersionDialogRequest }>()
+);
+
+export const openChangeVersionProgressDialog = createAction(
+    `${CANVAS_PREFIX} Open Change Flow Version Progress Dialog`,
+    props<{ request: VersionControlInformationEntity }>()
+);
+
+export const changeVersion = createAction(
+    `${CANVAS_PREFIX} Change Flow Version`,
+    props<{ request: VersionControlInformationEntity }>()
+);
+
+export const changeVersionSuccess = createAction(
+    `${CANVAS_PREFIX} Change Flow Version Success`,
+    props<{ response: FlowUpdateRequestEntity }>()
+);
+
+export const changeVersionComplete = createAction(
+    `${CANVAS_PREFIX} Change Flow Version Complete`,
+    props<{ response: FlowUpdateRequestEntity }>()
+);
+
+export const startPollingChangeVersion = createAction(`${CANVAS_PREFIX} Start Polling Change Version`);
+
+export const pollChangeVersion = createAction(`${CANVAS_PREFIX} Poll Change Version`);
+
+export const pollChangeVersionSuccess = createAction(
+    `${CANVAS_PREFIX} Poll Change Version Success`,
+    props<{ response: FlowUpdateRequestEntity }>()
+);
+
+export const stopPollingChangeVersion = createAction(`${CANVAS_PREFIX} Stop Polling Change Version`);
+
 export const openSaveVersionDialog = createAction(
     `${CANVAS_PREFIX} Open Save Flow Version Dialog`,
     props<{ request: SaveVersionDialogRequest }>()
@@ -646,7 +693,7 @@ export const flowVersionBannerError = createAction(
 
 export const stopVersionControlRequest = createAction(
     `${CANVAS_PREFIX} Stop Version Control Request`,
-    props<{ request: StopVersionControlRequest }>()
+    props<{ request: ConfirmStopVersionControlRequest }>()
 );
 
 export const stopVersionControl = createAction(
@@ -658,3 +705,58 @@ export const stopVersionControlSuccess = createAction(
     `${CANVAS_PREFIX} Stop Version Control Success`,
     props<{ response: StopVersionControlResponse }>()
 );
+
+export const flowSnackbarError = createAction(`${CANVAS_PREFIX} Flow Snackbar Error`, props<{ error: string }>());
+
+export const openShowLocalChangesDialogRequest = createAction(
+    `${CANVAS_PREFIX} Open Show Local Changes Dialog Request`,
+    props<{ request: OpenLocalChangesDialogRequest }>()
+);
+
+export const openRevertLocalChangesDialogRequest = createAction(
+    `${CANVAS_PREFIX} Open Revert Local Changes Dialog Request`,
+    props<{ request: OpenLocalChangesDialogRequest }>()
+);
+
+export const openLocalChangesDialog = createAction(
+    `${CANVAS_PREFIX} Open Local Changes Dialog`,
+    props<{ request: LocalChangesDialogRequest }>()
+);
+
+export const goToChange = createAction(
+    `${CANVAS_PREFIX} Go To Change`,
+    props<{
+        request: NavigateToComponentRequest;
+    }>()
+);
+
+export const openRevertChangesProgressDialog = createAction(
+    `${CANVAS_PREFIX} Open Revert Changes Progress Dialog`,
+    props<{ request: VersionControlInformationEntity }>()
+);
+
+export const revertChanges = createAction(
+    `${CANVAS_PREFIX} Revert Changes`,
+    props<{ request: VersionControlInformationEntity }>()
+);
+
+export const revertChangesSuccess = createAction(
+    `${CANVAS_PREFIX} Revert Changes Success`,
+    props<{ response: FlowUpdateRequestEntity }>()
+);
+
+export const revertChangesComplete = createAction(
+    `${CANVAS_PREFIX} Revert Changes Complete`,
+    props<{ response: FlowUpdateRequestEntity }>()
+);
+
+export const startPollingRevertChanges = createAction(`${CANVAS_PREFIX} Start Polling Revert Changes`);
+
+export const pollRevertChanges = createAction(`${CANVAS_PREFIX} Poll Revert Changes`);
+
+export const pollRevertChangesSuccess = createAction(
+    `${CANVAS_PREFIX} Poll Revert Changes Success`,
+    props<{ response: FlowUpdateRequestEntity }>()
+);
+
+export const stopPollingRevertChanges = createAction(`${CANVAS_PREFIX} Stop Polling Revert Changes`);