This is an automated email from the ASF dual-hosted git repository.
scottyaslan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 75b0aa4fd2e NIFI-16506: Show the full parameter name when a Fetch
Parameters cell is truncated (#11849)
75b0aa4fd2e is described below
commit 75b0aa4fd2e733d9a07ac2310371750fd0c78d3a
Author: Rob Fellows <[email protected]>
AuthorDate: Mon Oct 26 13:14:53 2026 -0400
NIFI-16506: Show the full parameter name when a Fetch Parameters cell is
truncated (#11849)
* NIFI-16506: Show the full parameter name when a Fetch Parameters cell is
truncated
* NIFI-16506: Show the full parameter group name when the cell is truncated
* NIFI-16506: Keep long fetched parameter names inside the dialog
---
...ch-parameter-provider-parameters.component.html | 21 ++++---
...parameter-provider-parameters.component.spec.ts | 65 ++++++++++++++++++++++
...etch-parameter-provider-parameters.component.ts | 2 +
.../parameter-groups-table.component.html | 4 +-
.../parameter-groups-table.component.spec.ts | 22 +++++++-
.../parameter-groups-table.component.ts | 4 +-
6 files changed, 106 insertions(+), 12 deletions(-)
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
index ab937b53a1f..8bf5084649f 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
@@ -23,7 +23,7 @@
@if ((updateRequest | async)!; as requestEntity) {
<mat-dialog-content>
<div class="dialog-content flex gap-x-4 w-full pt-2">
- <div class="flex flex-col flex-1">
+ <div class="flex flex-col flex-1 min-w-0">
<div class="flex flex-col mb-4">
<div>Name</div>
<div class="tertiary-color font-medium">
@@ -59,7 +59,7 @@
</div>
</div>
- <div class="flex flex-1">
+ <div class="flex flex-1 min-w-0">
<div class="flex flex-col flex-1">
<div class="flex flex-col mb-4">
<div class="flex flex-row items-center
gap-x-2">
@@ -121,7 +121,7 @@
} @else {
<mat-dialog-content>
<div class="dialog-content flex gap-x-4 h-full w-full pt-2">
- <div class="flex flex-col flex-1">
+ <div class="flex flex-col flex-1 min-w-0">
<div class="flex flex-col mb-4">
<div>Name</div>
<div class="tertiary-color font-medium">
@@ -145,7 +145,7 @@
</div>
</div>
</div>
- <div class="flex flex-1">
+ <div class="flex flex-1 min-w-0">
@for (
parameterGroupConfig of
parameterGroupConfigurations;
track parameterGroupConfig.groupName
@@ -156,7 +156,7 @@
[ngClass]="{
hidden: parameterGroupConfig.groupName !==
selectedParameterGroup?.groupName
}"
- class="flex gap-y-4 h-full w-full flex-col">
+ class="flex gap-y-4 h-full min-w-0 w-full
flex-col">
@if
(canCreateParameterContext(parameterGroupConfig)) {
<!-- Not synced, give the user the option
to create a parameter context for the group -->
<div class="flex items-center">
@@ -199,12 +199,12 @@
[tooltipComponentType]="TextTip"
tooltipInputData="Discovered
parameters from the selected parameter group."></i>
</div>
- <ul class="flex-1 overflow-y-auto
border px-2">
+ <ul class="flex-1 min-w-0
overflow-y-auto border px-2">
@for (
param of
Object.entries(parameterGroupConfig.parameterSensitivities);
track param[0]
) {
- <li class="tertiary-color
font-medium">
+ <li class="tertiary-color
font-medium truncate" ellipsisTooltip>
{{ param[0] }}
</li>
}
@@ -253,7 +253,12 @@
Parameter Name
</th>
<td mat-cell
*matCellDef="let item" class="items-center">
- <div>{{ item.name
}}</div>
+ <div
+
class="truncate min-w-0"
+ ellipsisTooltip
+
data-qa="parameter-name">
+ {{ item.name }}
+ </div>
</td>
</ng-container>
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.spec.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.spec.ts
index 7d14981ceee..1d9c1078e0e 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.spec.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.spec.ts
@@ -16,6 +16,7 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
import { FetchParameterProviderParameters } from
'./fetch-parameter-provider-parameters.component';
import { FetchParameterProviderDialogRequest } from
'../../../state/parameter-providers';
@@ -26,6 +27,7 @@ import { parameterProvidersFeatureKey } from
'../../../state/parameter-providers
import { settingsFeatureKey } from '../../../state';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ClusterConnectionService } from
'../../../../../service/cluster-connection.service';
+import { EllipsisTooltipDirective } from '@nifi/shared';
import { initialState as initialErrorState } from
'../../../../../state/error/error.reducer';
import { errorFeatureKey } from '../../../../../state/error';
@@ -191,4 +193,67 @@ describe('FetchParameterProviderParameters', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should render each sensitive-selection parameter name for the ellipsis
tooltip', () => {
+ const nameCells: HTMLElement[] = Array.from(
+
fixture.nativeElement.querySelectorAll('[data-qa="parameter-name"]')
+ );
+
+ expect(nameCells.map((cell) =>
cell.textContent?.trim())).toEqual(['bytes', 'password', 'username']);
+ for (const cell of nameCells) {
+ expect(cell.classList.contains('truncate')).toBe(true);
+ expect(cell.hasAttribute('ellipsistooltip')).toBe(true);
+ }
+ });
+
+ describe('fetched parameter list', () => {
+ let unsyncedFixture:
ComponentFixture<FetchParameterProviderParameters>;
+
+ const longName = 'Company Private Key Service Account';
+
+ beforeEach(() => {
+ TestBed.resetTestingModule();
+ const unsynced: FetchParameterProviderDialogRequest =
structuredClone(data);
+ const group =
unsynced.parameterProvider.component.parameterGroupConfigurations[0];
+ group.synchronized = false;
+ group.parameterSensitivities = {
+ [longName]: 'NON_SENSITIVE'
+ };
+
+ TestBed.configureTestingModule({
+ imports: [FetchParameterProviderParameters,
NoopAnimationsModule],
+ providers: [
+ {
+ provide: MAT_DIALOG_DATA,
+ useValue: unsynced
+ },
+ provideMockStore({
+ initialState: {
+ [errorFeatureKey]: initialErrorState,
+ [settingsFeatureKey]: {
+ [parameterProvidersFeatureKey]:
initialParameterProvidersState
+ }
+ }
+ }),
+ {
+ provide: ClusterConnectionService,
+ useValue: {
+ isDisconnectionAcknowledged: vi.fn()
+ }
+ },
+ { provide: MatDialogRef, useValue: null }
+ ]
+ });
+ unsyncedFixture =
TestBed.createComponent(FetchParameterProviderParameters);
+ unsyncedFixture.detectChanges();
+ });
+
+ it('should truncate a long fetched parameter name and attach the
ellipsis tooltip', () => {
+ const listItem =
unsyncedFixture.debugElement.query(By.css('li.truncate'));
+
+ expect(listItem.nativeElement.textContent?.trim()).toBe(longName);
+
expect(listItem.nativeElement.classList.contains('truncate')).toBe(true);
+
expect(listItem.injector.get(EllipsisTooltipDirective)).toBeTruthy();
+ });
+ });
});
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.ts
index 8b914380d2c..f77023b1dad 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.ts
@@ -36,6 +36,7 @@ import {
TextTip,
NiFiCommon,
NifiTooltipDirective,
+ EllipsisTooltipDirective,
AffectedComponentEntity,
SortPipe,
JoinPipe,
@@ -65,6 +66,7 @@ import { ContextErrorBanner } from
'../../../../../ui/common/context-error-banne
MatButtonModule,
NifiSpinnerDirective,
NifiTooltipDirective,
+ EllipsisTooltipDirective,
MatTableModule,
MatSortModule,
ParameterGroupsTable,
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
index e25fef3c124..6d9b679645a 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
@@ -29,7 +29,9 @@
<ng-container matColumnDef="groupName">
<th mat-header-cell *matHeaderCellDef
mat-sort-header>Parameter Group Name</th>
<td mat-cell *matCellDef="let item" class="items-center">
- <div>{{ item.groupName }}</div>
+ <div class="truncate min-w-0" ellipsisTooltip>
+ {{ item.groupName }}
+ </div>
</td>
</ng-container>
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.spec.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.spec.ts
index da75554efe6..03d96ea7df9 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.spec.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.spec.ts
@@ -16,9 +16,11 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { EllipsisTooltipDirective } from '@nifi/shared';
import { ParameterGroupsTable } from './parameter-groups-table.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
describe('ParameterGroupsTable', () => {
let component: ParameterGroupsTable;
@@ -36,4 +38,22 @@ describe('ParameterGroupsTable', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should truncate a long parameter group name and attach the ellipsis
tooltip', () => {
+ const longName =
'company-private-key-parameter-group-for-database-capture';
+ component.parameterGroups = [
+ {
+ groupName: longName,
+ parameterContextName: longName,
+ parameterSensitivities: {}
+ }
+ ];
+ fixture.detectChanges();
+
+ const nameCell =
fixture.debugElement.query(By.directive(EllipsisTooltipDirective));
+
+ expect(nameCell.nativeElement.textContent?.trim()).toBe(longName);
+
expect(nameCell.nativeElement.classList.contains('truncate')).toBe(true);
+ expect(nameCell.injector.get(EllipsisTooltipDirective)).toBeTruthy();
+ });
});
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.ts
index d9a6c617fb0..fef39a155c8 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.ts
@@ -19,11 +19,11 @@ import { Component, EventEmitter, Input, Output, inject }
from '@angular/core';
import { MatSortModule, Sort } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { ParameterGroupConfiguration } from
'../../../../state/parameter-providers';
-import { NiFiCommon } from '@nifi/shared';
+import { EllipsisTooltipDirective, NiFiCommon } from '@nifi/shared';
@Component({
selector: 'parameter-groups-table',
- imports: [MatSortModule, MatTableModule],
+ imports: [MatSortModule, MatTableModule, EllipsisTooltipDirective],
templateUrl: './parameter-groups-table.component.html',
styleUrls: ['./parameter-groups-table.component.scss']
})
