Skip to content

NIFI-16167 Focus referenced parameter when navigating from a property #11525

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rakesh-rsky wants to merge 1 commit into
base: main
Choose a base branch
from
Open

NIFI-16167 Focus referenced parameter when navigating from a property #11525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 18 additions & 7 deletions ...nifi/src/app/pages/flow-designer/state/controller-services/controller-services.effects.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,12 @@ export class ControllerServicesEffects {
selectPropertyVerificationStatus
);

const goTo = (commands: string[], destination: string, commandBoundary?: string[]): void => {
const goTo = (
commands: string[],
destination: string,
commandBoundary?: string[],
additionalState?: Record<string, unknown>
): void => {
if (editDialogReference.componentInstance.editControllerServiceForm.dirty) {
const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
Expand Down Expand Up @@ -434,11 +439,14 @@ export class ControllerServicesEffects {
],
routeBoundary: commandBoundary,
context: 'Controller Service'
} as BackNavigation
} as BackNavigation,
...additionalState
}
});
} else {
this.router.navigate(commands);
this.router.navigate(commands, {
state: { ...additionalState }
});
}
});
} else {
Expand All @@ -455,11 +463,14 @@ export class ControllerServicesEffects {
],
routeBoundary: commandBoundary,
context: 'Controller Service'
} as BackNavigation
} as BackNavigation,
...additionalState
}
});
} else {
this.router.navigate(commands);
this.router.navigate(commands, {
state: { ...additionalState }
});
}
}
};
Expand All @@ -473,12 +484,12 @@ export class ControllerServicesEffects {

if (parameterContext != null) {
editDialogReference.componentInstance.parameterContext = parameterContext;
editDialogReference.componentInstance.goToParameter = () => {
editDialogReference.componentInstance.goToParameter = (parameterName: string) => {
this.storage.setItem<number>(NiFiCommon.EDIT_PARAMETER_CONTEXT_DIALOG_ID, 1);

const commandBoundary: string[] = ['/parameter-contexts'];
const commands: string[] = [...commandBoundary, parameterContext.id, 'edit'];
goTo(commands, 'Parameter', commandBoundary);
goTo(commands, 'Parameter', commandBoundary, { parameterName });
};

editDialogReference.componentInstance.convertToParameter =
Expand Down
17 changes: 12 additions & 5 deletions ...ontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1564,7 +1564,12 @@ export class FlowEffects {
selectPropertyVerificationStatus
);

const goTo = (commands: string[], commandBoundary: string[], destination: string): void => {
const goTo = (
commands: string[],
commandBoundary: string[],
destination: string,
additionalState?: Record<string, unknown>
): void => {
if (editDialogReference.componentInstance.editProcessorForm.dirty) {
const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
...SMALL_DIALOG,
Expand All @@ -1591,7 +1596,8 @@ export class FlowEffects {
],
routeBoundary: commandBoundary,
context: 'Processor'
} as BackNavigation
} as BackNavigation,
...additionalState
}
});
});
Expand All @@ -1608,20 +1614,21 @@ export class FlowEffects {
],
routeBoundary: commandBoundary,
context: 'Processor'
} as BackNavigation
} as BackNavigation,
...additionalState
}
});
}
};

if (parameterContext != null) {
editDialogReference.componentInstance.parameterContext = parameterContext;
editDialogReference.componentInstance.goToParameter = () => {
editDialogReference.componentInstance.goToParameter = (parameterName: string) => {
this.storage.setItem<number>(NiFiCommon.EDIT_PARAMETER_CONTEXT_DIALOG_ID, 1);

const commandBoundary: string[] = ['/parameter-contexts'];
const commands: string[] = [...commandBoundary, parameterContext.id, 'edit'];
goTo(commands, commandBoundary, 'Parameter');
goTo(commands, commandBoundary, 'Parameter', { parameterName });
};

editDialogReference.componentInstance.convertToParameter =
Expand Down
11 changes: 11 additions & 0 deletions ...s/parameter-contexts/state/parameter-context-listing/parameter-context-listing.effects.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
*/

import { Injectable, inject } from '@angular/core';
import { Location } from '@angular/common';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { concatLatestFrom } from '@ngrx/operators';
import * as ParameterContextListingActions from './parameter-context-listing.actions';
Expand Down Expand Up @@ -67,6 +68,7 @@ export class ParameterContextListingEffects {
private parameterContextService = inject(ParameterContextService);
private dialog = inject(MatDialog);
private router = inject(Router);
private location = inject(Location);
private errorHelper = inject(ErrorHelper);

loadParameterContexts$ = createEffect(() =>
Expand Down Expand Up @@ -323,13 +325,22 @@ export class ParameterContextListingEffects {

this.storage.setItem<number>(NiFiCommon.EDIT_PARAMETER_CONTEXT_DIALOG_ID, 1);

const navigationState = this.location.getState() as { parameterName?: string } | null;
const selectedParameterName = navigationState?.parameterName;

const editDialogReference = this.dialog.open(EditParameterContext, {
...XL_DIALOG,
data: {
parameterContext: request.parameterContext
}
});

if (selectedParameterName) {
// Parameters tab
editDialogReference.componentInstance.selectedIndex = 1;
editDialogReference.componentInstance.selectedParameterName = selectedParameterName;
}

editDialogReference.componentInstance.updateRequest = this.store.select(selectUpdateRequest);

editDialogReference.componentInstance.availableParameterContexts$ = this.store
Expand Down
3 changes: 2 additions & 1 deletion ...eter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,8 @@
(click)="selectParameter(row)"
(dblclick)="doubleClicked(row)"
[class.selected]="isSelected(row)"
[class.even]="even"></tr>
[class.even]="even"
[attr.data-parameter-name]="row.originalEntity.parameter.name"></tr>
</table>
</div>
</div>
Expand Down
26 changes: 25 additions & 1 deletion ...ameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
* limitations under the License.
*/

import { AfterViewInit, ChangeDetectorRef, Component, forwardRef, Input, inject } from '@angular/core';
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, inject } from '@angular/core';
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
Expand Down Expand Up @@ -74,11 +74,13 @@ export class ParameterTable implements AfterViewInit, ControlValueAccessor {
private store = inject<Store<ParameterContextListingState>>(Store);
private changeDetector = inject(ChangeDetectorRef);
private nifiCommon = inject(NiFiCommon);
private elementRef = inject(ElementRef);

@Input() createNewParameter!: (existingParameters: string[]) => Observable<EditParameterResponse>;
@Input() editParameter!: (parameter: Parameter) => Observable<EditParameterResponse>;
@Input() canAddParameters = true;
@Input() inheritsParameters = false;
@Input() selectedParameterName?: string;

protected readonly TextTip = TextTip;

Expand Down Expand Up @@ -165,6 +167,28 @@ export class ParameterTable implements AfterViewInit, ControlValueAccessor {
private setPropertyItems(parameterItems: ParameterItem[]): void {
this.dataSource.data = this.sortEntities(parameterItems, this.activeSort);
this.initFilter();
this.selectAndScrollToParameter(this.selectedParameterName);
}

private selectAndScrollToParameter(parameterName: string | undefined): void {
if (!parameterName) {
return;
}

const item = this.dataSource.data.find((i) => i.originalEntity.parameter.name === parameterName);
if (!item) {
return;
}

this.selectParameter(item);

// wait for the table rows to render before attempting to scroll
setTimeout(() => {
const row: HTMLElement | null = this.elementRef.nativeElement.querySelector(
`tr[data-parameter-name="${parameterName}"]`
);
row?.scrollIntoView({ block: 'center' });
});
}

private sortEntities(parameters: ParameterItem[], sort: Sort): ParameterItem[] {
Expand Down
3 changes: 2 additions & 1 deletion .../ui/common/parameter-context/edit-parameter-context/edit-parameter-context.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,8 @@ <h2 mat-dialog-title>
[canAddParameters]="!request.parameterContext?.component?.parameterProviderConfiguration"
[inheritsParameters]="inheritsParameters(request.parameterContext?.component?.parameters)"
[createNewParameter]="createNewParameter"
[editParameter]="editParameter"></parameter-table>
[editParameter]="editParameter"
[selectedParameterName]="selectedParameterName"></parameter-table>
</div>
</mat-dialog-content>
</mat-tab>
Expand Down
1 change: 1 addition & 0 deletions ...pp/ui/common/parameter-context/edit-parameter-context/edit-parameter-context.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export class EditParameterContext extends TabbedDialog {
@Input() updateRequest!: Observable<ParameterContextUpdateRequestEntity | null>;
@Input() availableParameterContexts$!: Observable<ParameterContextEntity[]>;
@Input() saving$!: Observable<boolean>;
@Input() selectedParameterName?: string;

@Output() addParameterContext: EventEmitter<any> = new EventEmitter<any>();
@Output() editParameterContext: EventEmitter<any> = new EventEmitter<any>();
Expand Down
4 changes: 2 additions & 2 deletions ...main/frontend/apps/nifi/src/app/ui/common/property-table/property-table.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,13 @@ describe('PropertyTable', () => {
expect(() => component.goToParameterClicked(mockItem)).not.toThrow();
});

it('should invoke goToParameter callback when supplied and item.value is non-null', () => {
it('should invoke goToParameter callback with the extracted parameter name when supplied and item.value is non-null', () => {
const goToParameterSpy = vi.fn();
component.goToParameter = goToParameterSpy;

component.goToParameterClicked(mockItem);

expect(goToParameterSpy).toHaveBeenCalledWith('#{some-param}');
expect(goToParameterSpy).toHaveBeenCalledWith('some-param');
});

it('should not invoke goToParameter callback when item.value is null', () => {
Expand Down
15 changes: 11 additions & 4 deletions .../src/main/frontend/apps/nifi/src/app/ui/common/property-table/property-table.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
@Input() supportsParameters = true;

private static readonly PARAM_REF_REGEX: RegExp = /#{(['"]?)[a-zA-Z0-9-_. ]+\1}/;
private static readonly PARAM_REF_NAME_REGEX: RegExp = /#{(['"]?)([a-zA-Z0-9-_. ]+)\1}/;

private destroyRef = inject(DestroyRef);

Expand Down Expand Up @@ -517,9 +518,6 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
}

canGoToParameter(item: PropertyItem): boolean {
// TODO - currently parameter context route does not support navigating
// directly to a specific parameter so the parameter context link
// is not item specific.
if (this.parameterContext && this.goToParameter && item.value) {
return this.parameterContext.permissions.canRead && PropertyTable.PARAM_REF_REGEX.test(item.value);
}
Expand All @@ -531,7 +529,16 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
if (!this.goToParameter || item.value == null) {
return;
}
this.goToParameter(item.value);

const parameterName = this.extractParameterName(item.value);
if (parameterName) {
this.goToParameter(parameterName);
}
}

private extractParameterName(value: string): string | null {
const match = PropertyTable.PARAM_REF_NAME_REGEX.exec(value);
return match ? match[2] : null;
}

canConvertToParameter(item: PropertyItem): boolean {
Expand Down
Loading