NIFI-15822: Adding support to view read only configuration of connectors in the connector canvas. (#11168)

- Moving all configuration dialogs into top level ui components.

This closes #11168

Author: mcgilman

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/state/connector-canvas/connector-canvas.actions.ts

@@ -17,7 +17,7 @@
 
 import { createAction, props } from '@ngrx/store';
 import { ComponentType } from '@nifi/shared';
-import { BreadcrumbEntity } from '../../../flow-designer/state/shared';
+import { BreadcrumbEntity } from '../../../../state/shared';
 import { ErrorContext } from '../../../../state/error';
 
 /**
@@ -107,4 +107,13 @@ export const navigateToProvenanceForComponent = createAction(
     props<{ id: string; componentType: ComponentType }>()
 );
 
+/**
+ * View the read-only configuration of a canvas component.
+ * Triggers an effect that opens the appropriate EditXyz dialog in read-only mode.
+ */
+export const viewComponentConfiguration = createAction(
+    '[Connector Canvas] View Component Configuration',
+    props<{ request: { entity: any; componentType: ComponentType } }>()
+);
+
 export const resetConnectorCanvasState = createAction('[Connector Canvas] Reset State');

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/state/connector-canvas/connector-canvas.effects.spec.ts

@@ -22,6 +22,7 @@ import { Router } from '@angular/router';
 import { firstValueFrom, Observable, of, Subject, throwError } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ComponentType, ComponentTypeNamePipe } from '@nifi/shared';
+import { MatDialog } from '@angular/material/dialog';
 import { ConnectorCanvasEffects } from './connector-canvas.effects';
 import { ConnectorService } from '../../service/connector.service';
 import { ErrorHelper } from '../../../../service/error-helper.service';
@@ -37,7 +38,8 @@ import {
     loadConnectorFlowSuccess,
     navigateToProvenanceForComponent,
     navigateWithoutTransform,
-    selectComponents
+    selectComponents,
+    viewComponentConfiguration
 } from './connector-canvas.actions';
 import {
     selectConnectorIdFromRoute,
@@ -80,6 +82,10 @@ describe('ConnectorCanvasEffects', () => {
             navigate: vi.fn().mockResolvedValue(true)
         };
 
+        const mockDialog = {
+            open: vi.fn().mockReturnValue({ componentInstance: {} })
+        };
+
         await TestBed.configureTestingModule({
             providers: [
                 ConnectorCanvasEffects,
@@ -96,6 +102,7 @@ describe('ConnectorCanvasEffects', () => {
                 { provide: ConnectorService, useValue: mockConnectorService },
                 { provide: ErrorHelper, useValue: mockErrorHelper },
                 { provide: Router, useValue: mockRouter },
+                { provide: MatDialog, useValue: mockDialog },
                 ComponentTypeNamePipe
             ]
         }).compileComponents();
@@ -111,7 +118,8 @@ describe('ConnectorCanvasEffects', () => {
             },
             mockConnectorService,
             mockErrorHelper,
-            mockRouter
+            mockRouter,
+            mockDialog
         };
     }
 
@@ -424,6 +432,109 @@ describe('ConnectorCanvasEffects', () => {
         });
     });
 
+    describe('viewComponentConfiguration$', () => {
+        const baseEntity = {
+            id: 'comp-1',
+            uri: 'https://localhost/nifi-api/processors/comp-1',
+            permissions: { canRead: true, canWrite: true },
+            operatePermissions: { canRead: true, canWrite: true },
+            component: { name: 'My Component' }
+        };
+
+        async function dispatchView(componentType: ComponentType, entity: any = baseEntity) {
+            const { effects, actions$, mockDialog } = await setup();
+            actions$(of(viewComponentConfiguration({ request: { entity, componentType } })));
+            await firstValueFrom(effects.viewComponentConfiguration$);
+            return { mockDialog };
+        }
+
+        it('opens the processor dialog with read-only permissions and the entity uri', async () => {
+            const { mockDialog } = await dispatchView(ComponentType.Processor);
+            expect(mockDialog.open).toHaveBeenCalledTimes(1);
+            const [, config] = (mockDialog.open as Mock).mock.calls[0];
+            expect(config.data.type).toBe(ComponentType.Processor);
+            expect(config.data.uri).toBe(baseEntity.uri);
+            expect(config.data.entity.permissions.canWrite).toBe(false);
+            expect(config.data.entity.permissions.canRead).toBe(true);
+            expect(config.data.entity.operatePermissions.canWrite).toBe(false);
+            expect(config.data.entity.operatePermissions.canRead).toBe(true);
+            expect(config.id).toBe(baseEntity.id);
+        });
+
+        it('opens the connection dialog with the breadcrumbs observable wired', async () => {
+            const { effects, actions$, mockDialog } = await setup();
+            const componentInstance: any = {};
+            (mockDialog.open as Mock).mockReturnValue({ componentInstance });
+            actions$(
+                of(
+                    viewComponentConfiguration({
+                        request: { entity: baseEntity, componentType: ComponentType.Connection }
+                    })
+                )
+            );
+            await firstValueFrom(effects.viewComponentConfiguration$);
+
+            const [, config] = (mockDialog.open as Mock).mock.calls[0];
+            expect(config.data.type).toBe(ComponentType.Connection);
+            expect(componentInstance.breadcrumbs$).toBeDefined();
+            expect(componentInstance.availablePrioritizers$).toBeDefined();
+            expect(componentInstance.getChildInputPorts).toBeInstanceOf(Function);
+            expect(componentInstance.getChildOutputPorts).toBeInstanceOf(Function);
+        });
+
+        it('opens the input port dialog with read-only permissions', async () => {
+            const { mockDialog } = await dispatchView(ComponentType.InputPort);
+            const [, config] = (mockDialog.open as Mock).mock.calls[0];
+            expect(config.data.type).toBe(ComponentType.InputPort);
+            expect(config.data.entity.permissions.canWrite).toBe(false);
+        });
+
+        it('opens the output port dialog with read-only permissions', async () => {
+            const { mockDialog } = await dispatchView(ComponentType.OutputPort);
+            const [, config] = (mockDialog.open as Mock).mock.calls[0];
+            expect(config.data.type).toBe(ComponentType.OutputPort);
+            expect(config.data.entity.permissions.canWrite).toBe(false);
+        });
+
+        it('opens the label dialog with read-only permissions', async () => {
+            const { mockDialog } = await dispatchView(ComponentType.Label);
+            const [, config] = (mockDialog.open as Mock).mock.calls[0];
+            expect(config.data.type).toBe(ComponentType.Label);
+            expect(config.data.entity.permissions.canWrite).toBe(false);
+        });
+
+        it('opens the process group dialog with the current user observable wired', async () => {
+            const { effects, actions$, mockDialog } = await setup();
+            const componentInstance: any = {};
+            (mockDialog.open as Mock).mockReturnValue({ componentInstance });
+            actions$(
+                of(
+                    viewComponentConfiguration({
+                        request: { entity: baseEntity, componentType: ComponentType.ProcessGroup }
+                    })
+                )
+            );
+            await firstValueFrom(effects.viewComponentConfiguration$);
+
+            const [, config] = (mockDialog.open as Mock).mock.calls[0];
+            expect(config.data.type).toBe(ComponentType.ProcessGroup);
+            expect(componentInstance.currentUser$).toBeDefined();
+            expect(componentInstance.parameterContexts).toEqual([]);
+        });
+
+        it('opens the remote process group dialog with read-only permissions', async () => {
+            const { mockDialog } = await dispatchView(ComponentType.RemoteProcessGroup);
+            const [, config] = (mockDialog.open as Mock).mock.calls[0];
+            expect(config.data.type).toBe(ComponentType.RemoteProcessGroup);
+            expect(config.data.entity.permissions.canWrite).toBe(false);
+        });
+
+        it('does not open a dialog for unsupported component types', async () => {
+            const { mockDialog } = await dispatchView(ComponentType.Funnel);
+            expect(mockDialog.open).not.toHaveBeenCalled();
+        });
+    });
+
     describe('navigateToProvenanceForComponent$', () => {
         it('should navigate to /provenance with componentId query param and back navigation state', async () => {
             const { effects, actions$, mockRouter } = await setup({

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/state/connector-canvas/connector-canvas.effects.ts

@@ -20,20 +20,40 @@ import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { concatLatestFrom } from '@ngrx/operators';
 import { Store } from '@ngrx/store';
 import { Router } from '@angular/router';
-import { of } from 'rxjs';
+import { NEVER, Observable, of } from 'rxjs';
 import { catchError, filter, map, switchMap, take, tap } from 'rxjs/operators';
-import { ComponentType, ComponentTypeNamePipe } from '@nifi/shared';
+import { ComponentType, ComponentTypeNamePipe, LARGE_DIALOG, MEDIUM_DIALOG, XL_DIALOG } from '@nifi/shared';
+import { selectCurrentUser } from '../../../../state/current-user/current-user.selectors';
+import { selectPrioritizerTypes } from '../../../../state/extension-types/extension-types.selectors';
+import {
+    selectPropertyVerificationResults,
+    selectPropertyVerificationStatus
+} from '../../../../state/property-verification/property-verification.selectors';
+import { MatDialog } from '@angular/material/dialog';
 import { ConnectorService } from '../../service/connector.service';
 import { ErrorHelper } from '../../../../service/error-helper.service';
 import { ErrorContextKey } from '../../../../state/error';
 import { BackNavigation } from '../../../../state/navigation';
+import { EditComponentDialogRequest, EditConnectionDialogRequest } from '../../../../state/shared';
+import { EditProcessor } from '../../../../ui/common/component-dialogs/edit-processor/edit-processor.component';
+import { EditConnectionComponent } from '../../../../ui/common/component-dialogs/edit-connection/edit-connection.component';
+import { EditPort } from '../../../../ui/common/component-dialogs/edit-port/edit-port.component';
+import { EditLabel } from '../../../../ui/common/component-dialogs/edit-label/edit-label.component';
+import { EditProcessGroup } from '../../../../ui/common/component-dialogs/edit-process-group/edit-process-group.component';
+import { EditRemoteProcessGroup } from '../../../../ui/common/component-dialogs/edit-remote-process-group/edit-remote-process-group.component';
 import * as ConnectorCanvasActions from './connector-canvas.actions';
 import { SelectedComponent } from './connector-canvas.actions';
 import {
+    selectBreadcrumbs,
     selectConnectorIdFromRoute,
+    selectInputPort,
+    selectOutputPort,
     selectParentProcessGroupId,
+    selectProcessGroup,
     selectProcessGroupId,
-    selectProcessGroupIdFromRoute
+    selectProcessGroupIdFromRoute,
+    selectProcessor,
+    selectRemoteProcessGroup
 } from './connector-canvas.selectors';
 
 @Injectable()
@@ -44,6 +64,7 @@ export class ConnectorCanvasEffects {
     private connectorService = inject(ConnectorService);
     private errorHelper = inject(ErrorHelper);
     private componentTypeNamePipe = inject(ComponentTypeNamePipe);
+    private dialog = inject(MatDialog);
 
     loadConnectorFlow$ = createEffect(() =>
         this.actions$.pipe(
@@ -228,6 +249,47 @@ export class ConnectorCanvasEffects {
         )
     );
 
+    /**
+     * Open a read-only configuration dialog for the given canvas component.
+     * Forces read-only mode by overriding canWrite regardless of entity permissions
+     * since the connector canvas is a view-only interface.
+     */
+    viewComponentConfiguration$ = createEffect(
+        () =>
+            this.actions$.pipe(
+                ofType(ConnectorCanvasActions.viewComponentConfiguration),
+                map((action) => action.request),
+                tap(({ entity, componentType }) => {
+                    const dialogRequest = this.buildDialogRequest(entity, componentType);
+
+                    switch (componentType) {
+                        case ComponentType.Processor:
+                            this.openReadOnlyProcessorDialog(dialogRequest);
+                            break;
+                        case ComponentType.Connection:
+                            this.openReadOnlyConnectionDialog(dialogRequest);
+                            break;
+                        case ComponentType.InputPort:
+                        case ComponentType.OutputPort:
+                            this.openReadOnlyPortDialog(dialogRequest);
+                            break;
+                        case ComponentType.Label:
+                            this.openReadOnlyLabelDialog(dialogRequest);
+                            break;
+                        case ComponentType.ProcessGroup:
+                            this.openReadOnlyProcessGroupDialog(dialogRequest);
+                            break;
+                        case ComponentType.RemoteProcessGroup:
+                            this.openReadOnlyRemoteProcessGroupDialog(dialogRequest);
+                            break;
+                        default:
+                            break;
+                    }
+                })
+            ),
+        { dispatch: false }
+    );
+
     navigateToProvenanceForComponent$ = createEffect(
         () =>
             this.actions$.pipe(
@@ -259,4 +321,110 @@ export class ConnectorCanvasEffects {
             ),
         { dispatch: false }
     );
+
+    /**
+     * Build a dialog request from the supplied entity. The connector canvas surfaces
+     * configuration in a strictly read-only mode, so the entity permissions are
+     * forced to readable-only-without-write before being passed to the dialog.
+     */
+    private buildDialogRequest(entity: any, componentType: ComponentType): EditComponentDialogRequest {
+        const readOnlyEntity = {
+            ...entity,
+            permissions: { ...entity?.permissions, canWrite: false },
+            operatePermissions: { ...entity?.operatePermissions, canWrite: false }
+        };
+        return {
+            type: componentType,
+            uri: readOnlyEntity.uri,
+            entity: readOnlyEntity
+        };
+    }
+
+    private openReadOnlyProcessorDialog(request: EditComponentDialogRequest): void {
+        const dialogRef = this.dialog.open(EditProcessor, {
+            ...XL_DIALOG,
+            data: request,
+            id: request.entity.id
+        });
+        const instance = dialogRef.componentInstance;
+        instance.saving$ = of(false);
+        instance.propertyVerificationResults$ = this.store.select(selectPropertyVerificationResults);
+        instance.propertyVerificationStatus$ = this.store.select(selectPropertyVerificationStatus);
+
+        // provide no-op stubs for callbacks not needed in read-only mode
+        instance.createNewProperty = () => NEVER;
+        instance.createNewService = () => NEVER;
+        instance.convertToParameter = () => NEVER;
+        instance.goToParameter = () => undefined;
+        instance.goToService = () => undefined;
+    }
+
+    private openReadOnlyConnectionDialog(request: EditComponentDialogRequest): void {
+        const dialogRef = this.dialog.open(EditConnectionComponent, {
+            ...LARGE_DIALOG,
+            data: request as EditConnectionDialogRequest
+        });
+        const instance = dialogRef.componentInstance;
+        instance.saving$ = of(false);
+        instance.availablePrioritizers$ = this.store.select(selectPrioritizerTypes);
+        instance.breadcrumbs$ = this.store.select(selectBreadcrumbs);
+        instance.getChildOutputPorts = (groupId: string): Observable<any> =>
+            this.store.select(selectConnectorIdFromRoute).pipe(
+                take(1),
+                switchMap((connectorId) =>
+                    this.connectorService
+                        .getConnectorFlow(connectorId!, groupId)
+                        .pipe(map((response: any) => response.processGroupFlow.flow.outputPorts))
+                )
+            );
+        instance.getChildInputPorts = (groupId: string): Observable<any> =>
+            this.store.select(selectConnectorIdFromRoute).pipe(
+                take(1),
+                switchMap((connectorId) =>
+                    this.connectorService
+                        .getConnectorFlow(connectorId!, groupId)
+                        .pipe(map((response: any) => response.processGroupFlow.flow.inputPorts))
+                )
+            );
+        instance.selectProcessor = (id: string) => this.store.select(selectProcessor(id));
+        instance.selectInputPort = (id: string) => this.store.select(selectInputPort(id));
+        instance.selectOutputPort = (id: string) => this.store.select(selectOutputPort(id));
+        instance.selectProcessGroup = (id: string) => this.store.select(selectProcessGroup(id));
+        instance.selectRemoteProcessGroup = (id: string) => this.store.select(selectRemoteProcessGroup(id));
+    }
+
+    private openReadOnlyPortDialog(request: EditComponentDialogRequest): void {
+        const dialogRef = this.dialog.open(EditPort, {
+            ...MEDIUM_DIALOG,
+            data: request
+        });
+        dialogRef.componentInstance.saving$ = of(false);
+    }
+
+    private openReadOnlyLabelDialog(request: EditComponentDialogRequest): void {
+        const dialogRef = this.dialog.open(EditLabel, {
+            ...MEDIUM_DIALOG,
+            data: request
+        });
+        dialogRef.componentInstance.saving$ = of(false);
+    }
+
+    private openReadOnlyProcessGroupDialog(request: EditComponentDialogRequest): void {
+        const dialogRef = this.dialog.open(EditProcessGroup, {
+            ...LARGE_DIALOG,
+            data: request
+        });
+        const instance = dialogRef.componentInstance;
+        instance.saving$ = of(false);
+        instance.currentUser$ = this.store.select(selectCurrentUser);
+        instance.parameterContexts = [];
+    }
+
+    private openReadOnlyRemoteProcessGroupDialog(request: EditComponentDialogRequest): void {
+        const dialogRef = this.dialog.open(EditRemoteProcessGroup, {
+            ...LARGE_DIALOG,
+            data: request
+        });
+        dialogRef.componentInstance.saving$ = of(false);
+    }
 }

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/state/connector-canvas/connector-canvas.selectors.ts

@@ -96,5 +96,8 @@ export const selectConnection = (id: string) =>
 export const selectRemoteProcessGroup = (id: string) =>
     createSelector(selectRemoteProcessGroups, (rpgs) => rpgs.find((r: any) => r.id === id));
 
+export const selectProcessGroup = (id: string) =>
+    createSelector(selectProcessGroups, (pgs) => pgs.find((pg: any) => pg.id === id));
+
 export const selectFunnel = (id: string) =>
     createSelector(selectFunnels, (funnels) => funnels.find((f: any) => f.id === id));