NIFI-13125 - Flow Version Diff View

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/registry.service.ts

@@ -18,7 +18,7 @@
 import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { ImportFromRegistryRequest } from '../state/flow';
+import { FlowComparisonEntity, ImportFromRegistryRequest } from '../state/flow';
 
 @Injectable({ providedIn: 'root' })
 export class RegistryService {
@@ -63,6 +63,25 @@ export class RegistryService {
         );
     }
 
+    getFlowDiff(
+        registryId: string,
+        bucketId: string,
+        flowId: string,
+        versionA: string,
+        versionB: string,
+        branch?: string | null
+    ): Observable<FlowComparisonEntity> {
+        if (branch) {
+            return this.httpClient.get<FlowComparisonEntity>(
+                `${RegistryService.API}/flow/registries/${registryId}/branches/${branch}/buckets/${bucketId}/flows/${flowId}/${versionA}/diff/branches/${branch}/buckets/${bucketId}/flows/${flowId}/${versionB}`
+            );
+        }
+
+        return this.httpClient.get<FlowComparisonEntity>(
+            `${RegistryService.API}/flow/registries/${registryId}/buckets/${bucketId}/flows/${flowId}/diff/${versionA}/${versionB}`
+        );
+    }
+
     importFromRegistry(processGroupId: string, request: ImportFromRegistryRequest): Observable<any> {
         return this.httpClient.post(
             `${RegistryService.API}/process-groups/${processGroupId}/process-groups`,

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html

@@ -121,6 +121,32 @@ <h2 mat-dialog-title>
                             </td>
                         </ng-container>
 
+                        <!-- Actions Column -->
+                        <ng-container matColumnDef="actions">
+                            <th mat-header-cell *matHeaderCellDef></th>
+                            <td mat-cell *matCellDef="let item">
+                                <div class="flex items-center justify-end">
+                                    <button
+                                        mat-icon-button
+                                        type="button"
+                                        [matMenuTriggerFor]="actionMenu"
+                                        aria-label="Version actions"
+                                        class="version-actions-button flex items-center justify-center icon global-menu"
+                                        data-qa="version-actions-button">
+                                        <i class="fa fa-ellipsis-v"></i>
+                                    </button>
+                                    <mat-menu #actionMenu="matMenu" xPosition="before">
+                                        <button
+                                            mat-menu-item
+                                            (click)="openFlowDiff(item)"
+                                            data-qa="view-flow-diff-button">
+                                            View flow version diff
+                                        </button>
+                                    </mat-menu>
+                                </div>
+                            </td>
+                        </ng-container>
+
                         <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                         <tr
                             mat-row

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.scss

@@ -33,6 +33,23 @@
             .mat-column-created {
                 width: 180px;
             }
+
+            .mat-column-actions {
+                width: 42px;
+            }
+
+            .version-actions-button {
+                height: 32px;
+                width: 32px;
+                min-width: 32px;
+                padding: 0;
+
+                &:hover {
+                    cursor: pointer;
+                    background-color: var(--mat-sys-surface-variant);
+                    border-radius: 50%;
+                }
+            }
         }
     }
 }

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

@@ -21,7 +21,7 @@ import { By } from '@angular/platform-browser';
 import { ChangeVersionDialog } from './change-version-dialog';
 import { ChangeVersionDialogRequest } from '../../../../../state/flow';
 import { VersionedFlowSnapshotMetadata } from '../../../../../../../state/shared';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { provideMockStore } from '@ngrx/store/testing';
 import { initialState } from '../../../../../state/flow/flow.reducer';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -33,6 +33,8 @@ import { currentUserFeatureKey } from '../../../../../../../state/current-user';
 import { canvasFeatureKey } from '../../../../../state';
 import { flowFeatureKey } from '../../../../../state/flow';
 import { Sort } from '@angular/material/sort';
+import { FlowDiffDialog, FlowDiffDialogData } from '../flow-diff-dialog/flow-diff-dialog';
+import { LARGE_DIALOG } from '@nifi/shared';
 
 interface SetupOptions {
     dialogData?: ChangeVersionDialogRequest;
@@ -493,4 +495,66 @@ describe('ChangeVersionDialog', () => {
             expect(changeButton.nativeElement.disabled).toBe(false);
         });
     });
+
+    describe('Flow Diff Dialog', () => {
+        it('should include actions column in displayed columns', async () => {
+            const { component } = await setup();
+
+            expect(component.displayedColumns).toContain('actions');
+        });
+
+        it('should render actions menu button for each version row', async () => {
+            const { fixture } = await setup();
+            const actionButtons = fixture.debugElement.queryAll(By.css('[data-qa="version-actions-button"]'));
+
+            expect(actionButtons.length).toBe(2);
+        });
+
+        it('should open FlowDiffDialog when openFlowDiff is called', async () => {
+            const { component, fixture } = await setup();
+            const dialogInstance = fixture.debugElement.injector.get(MatDialog);
+            const openSpy = vi.spyOn(dialogInstance, 'open').mockReturnValue({} as any);
+            const flowVersion = component.dataSource.data[1];
+
+            component.openFlowDiff(flowVersion);
+
+            expect(openSpy).toHaveBeenCalledWith(
+                FlowDiffDialog,
+                expect.objectContaining({
+                    ...LARGE_DIALOG,
+                    autoFocus: false,
+                    data: expect.objectContaining({
+                        currentVersion: '2',
+                        selectedVersion: flowVersion.version
+                    })
+                })
+            );
+        });
+
+        it('should pass version control information to FlowDiffDialog', async () => {
+            const { component, fixture, dialogData } = await setup();
+            const dialogInstance = fixture.debugElement.injector.get(MatDialog);
+            const openSpy = vi.spyOn(dialogInstance, 'open').mockReturnValue({} as any);
+            const flowVersion = component.dataSource.data[1];
+
+            component.openFlowDiff(flowVersion);
+
+            const openCall = openSpy.mock.calls[0];
+            const passedData = openCall[1]!.data as FlowDiffDialogData;
+            expect(passedData.versionControlInformation).toEqual(dialogData.versionControlInformation);
+        });
+
+        it('should pass all flow versions to FlowDiffDialog', async () => {
+            const { component, fixture } = await setup();
+            const dialogInstance = fixture.debugElement.injector.get(MatDialog);
+            const openSpy = vi.spyOn(dialogInstance, 'open').mockReturnValue({} as any);
+            const flowVersion = component.dataSource.data[1];
+
+            component.openFlowDiff(flowVersion);
+
+            const openCall = openSpy.mock.calls[0];
+            const passedData = openCall[1]!.data as FlowDiffDialogData;
+            expect(passedData.versions).toHaveLength(2);
+        });
+    });
 });

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

@@ -18,15 +18,18 @@
 import { Component, EventEmitter, Output, inject } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MatCell, MatCellDef, MatColumnDef, MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatSortModule, Sort } from '@angular/material/sort';
 import { VersionedFlowSnapshotMetadata } from '../../../../../../../state/shared';
 import { ChangeVersionDialogRequest } from '../../../../../state/flow';
 import { VersionControlInformation } from '../../../../../../../ui/common/tooltips/version-control-tip/version-control-tip.component';
 import { Store } from '@ngrx/store';
 import { CanvasState } from '../../../../../state';
 import { selectTimeOffset } from '../../../../../../../state/flow-configuration/flow-configuration.selectors';
-import { NiFiCommon, CloseOnEscapeDialog, NifiTooltipDirective, TextTip } from '@nifi/shared';
+import { NiFiCommon, CloseOnEscapeDialog, LARGE_DIALOG, NifiTooltipDirective, TextTip } from '@nifi/shared';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { FlowDiffDialog, FlowDiffDialogData } from '../flow-diff-dialog/flow-diff-dialog';
+import { ErrorContextKey } from '../../../../../../../state/error';
 
 @Component({
     selector: 'change-version-dialog',
@@ -38,7 +41,10 @@ import { NiFiCommon, CloseOnEscapeDialog, NifiTooltipDirective, TextTip } from '
         MatDialogModule,
         MatSortModule,
         MatTableModule,
-        NifiTooltipDirective
+        NifiTooltipDirective,
+        MatMenu,
+        MatMenuItem,
+        MatMenuTrigger
     ],
     templateUrl: './change-version-dialog.html',
     styleUrl: './change-version-dialog.scss'
@@ -48,16 +54,18 @@ export class ChangeVersionDialog extends CloseOnEscapeDialog {
     private nifiCommon = inject(NiFiCommon);
     private store = inject<Store<CanvasState>>(Store);
 
-    displayedColumns: string[] = ['current', 'version', 'created', 'comments'];
+    displayedColumns: string[] = ['current', 'version', 'created', 'comments', 'actions'];
     dataSource: MatTableDataSource<VersionedFlowSnapshotMetadata> =
         new MatTableDataSource<VersionedFlowSnapshotMetadata>();
     selectedFlowVersion: VersionedFlowSnapshotMetadata | null = null;
+    private allFlowVersions: VersionedFlowSnapshotMetadata[] = [];
     sort: Sort = {
         active: 'created',
         direction: 'desc'
     };
     versionControlInformation: VersionControlInformation;
     private timeOffset = this.store.selectSignal(selectTimeOffset);
+    private dialog = inject(MatDialog);
 
     @Output() changeVersion: EventEmitter<VersionedFlowSnapshotMetadata> =
         new EventEmitter<VersionedFlowSnapshotMetadata>();
@@ -67,6 +75,7 @@ export class ChangeVersionDialog extends CloseOnEscapeDialog {
         const dialogRequest = this.dialogRequest;
 
         const flowVersions = dialogRequest.versions.map((entity) => entity.versionedFlowSnapshotMetadata);
+        this.allFlowVersions = flowVersions;
         const sortedFlowVersions = this.sortVersions(flowVersions, this.sort);
         this.selectedFlowVersion = sortedFlowVersions[0];
         this.dataSource.data = sortedFlowVersions;
@@ -152,5 +161,22 @@ export class ChangeVersionDialog extends CloseOnEscapeDialog {
         return flowVersion.version === this.versionControlInformation.version;
     }
 
+    openFlowDiff(flowVersion: VersionedFlowSnapshotMetadata) {
+        const dialogData: FlowDiffDialogData = {
+            versionControlInformation: this.versionControlInformation,
+            versions: this.allFlowVersions,
+            currentVersion: this.versionControlInformation.version,
+            selectedVersion: flowVersion.version,
+            errorContext: ErrorContextKey.FLOW_DIFF,
+            formatTimestamp: (metadata) => this.formatTimestamp(metadata)
+        };
+
+        this.dialog.open(FlowDiffDialog, {
+            ...LARGE_DIALOG,
+            data: dialogData,
+            autoFocus: false
+        });
+    }
+
     protected readonly TextTip = TextTip;
 }