NIFI-15853 - Support fetchable allowable values in the connector wizard. added searchable select component.#11159
Merged
Merged
Conversation
Contributor
|
Reviewing... |
…rd. added searchable select component.
Replace text-md (no-op in v3, undefined in v4) with text-base and flex-shrink-0 (renamed in v4) with shrink-0 in the searchable-select template. Update the spec selector to match.
…hable-select Add a shared EllipsisTooltipDirective that mounts a MatTooltip on the host and only enables it when the rendered text is actually clipped (horizontal or vertical overflow). Replace the always-on native [title] attributes in the searchable-select option labels and footer messages so the tooltip is themed, positioned consistently, and only appears when needed. Observers attach lazily on hover/focus to keep large option lists cheap.
scottyaslan
requested changes
Apr 27, 2026
Comment on lines
64
to
67
| host: { | ||
| class: 'block' | ||
| } | ||
| }) |
Contributor
There was a problem hiding this comment.
Suggested change
| host: { | |
| class: 'block' | |
| } | |
| }) | |
| }) |
Comment on lines
+36
to
+40
| // Include the Material option classes that MatOption's own host metadata applies. | ||
| // Angular does not merge host bindings across inheritance, so overriding `class` | ||
| // with only 'multi-select-option' drops 'mat-mdc-option' + 'mdc-list-item' and | ||
| // strips Material's default option layout and spacing. | ||
| host: { class: 'multi-select-option mat-mdc-option mdc-list-item', role: 'option' } |
Contributor
There was a problem hiding this comment.
Suggested change
| // Include the Material option classes that MatOption's own host metadata applies. | |
| // Angular does not merge host bindings across inheritance, so overriding `class` | |
| // with only 'multi-select-option' drops 'mat-mdc-option' + 'mdc-list-item' and | |
| // strips Material's default option layout and spacing. | |
| host: { class: 'multi-select-option mat-mdc-option mdc-list-item', role: 'option' } | |
| host: { class: 'multi-select-option', role: 'option' } |
| */ | ||
| @Component({ | ||
| selector: 'multi-select-option', | ||
| standalone: true, |
Contributor
There was a problem hiding this comment.
This is not required:
Suggested change
| standalone: true, |
Comment on lines
+18
to
+79
| // ViewEncapsulation.None on MultiSelectOption means these rules apply inside the | ||
| // searchable-select overlay without leaking beyond .multi-select-option. They give | ||
| // the custom option a Material-like layout that the subclass otherwise loses when | ||
| // the host class binding replaces MatOption's defaults. | ||
| .multi-select-option { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: flex-start; | ||
| min-height: 32px; | ||
| padding: 6px 12px; | ||
| cursor: pointer; | ||
|
|
||
| &.mdc-list-item--disabled { | ||
| cursor: not-allowed; | ||
| opacity: 1; | ||
| color: var(--mat-sys-on-surface); | ||
|
|
||
| .mdc-list-item__primary-text { | ||
| color: inherit; | ||
| opacity: 0.38; | ||
| } | ||
| } | ||
|
|
||
| .mdc-list-item__primary-text { | ||
| color: inherit; | ||
| } | ||
|
|
||
| .mat-pseudo-checkbox { | ||
| height: 16px; | ||
| width: 16px; | ||
| margin-left: 4px; | ||
| } | ||
|
|
||
| .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after { | ||
| height: 4px; | ||
| width: 10px; | ||
| } | ||
|
|
||
| &:not(.mdc-list-item--disabled):hover { | ||
| background-color: color-mix( | ||
| in srgb, | ||
| var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), | ||
| transparent | ||
| ); | ||
| } | ||
|
|
||
| &.mdc-list-item--selected:not(.mdc-list-item--disabled) { | ||
| color: var(--mat-sys-primary); | ||
|
|
||
| .mdc-list-item__primary-text { | ||
| color: inherit; | ||
| } | ||
| } | ||
|
|
||
| // Keyboard-active row: use a 2px outline rather than a background so the keyboard | ||
| // focus indicator stays visually distinct from the hover state. | ||
| &.mat-mdc-option-active:not(.mdc-list-item--disabled) { | ||
| background-color: transparent; | ||
| outline: 2px solid var(--mat-sys-primary); | ||
| outline-offset: -2px; | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
We are missing some global @include mat.select-overrides as well as some global .searchable-overlay styles.
Suggested change
| // ViewEncapsulation.None on MultiSelectOption means these rules apply inside the | |
| // searchable-select overlay without leaking beyond .multi-select-option. They give | |
| // the custom option a Material-like layout that the subclass otherwise loses when | |
| // the host class binding replaces MatOption's defaults. | |
| .multi-select-option { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: flex-start; | |
| min-height: 32px; | |
| padding: 6px 12px; | |
| cursor: pointer; | |
| &.mdc-list-item--disabled { | |
| cursor: not-allowed; | |
| opacity: 1; | |
| color: var(--mat-sys-on-surface); | |
| .mdc-list-item__primary-text { | |
| color: inherit; | |
| opacity: 0.38; | |
| } | |
| } | |
| .mdc-list-item__primary-text { | |
| color: inherit; | |
| } | |
| .mat-pseudo-checkbox { | |
| height: 16px; | |
| width: 16px; | |
| margin-left: 4px; | |
| } | |
| .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after { | |
| height: 4px; | |
| width: 10px; | |
| } | |
| &:not(.mdc-list-item--disabled):hover { | |
| background-color: color-mix( | |
| in srgb, | |
| var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), | |
| transparent | |
| ); | |
| } | |
| &.mdc-list-item--selected:not(.mdc-list-item--disabled) { | |
| color: var(--mat-sys-primary); | |
| .mdc-list-item__primary-text { | |
| color: inherit; | |
| } | |
| } | |
| // Keyboard-active row: use a 2px outline rather than a background so the keyboard | |
| // focus indicator stays visually distinct from the hover state. | |
| &.mat-mdc-option-active:not(.mdc-list-item--disabled) { | |
| background-color: transparent; | |
| outline: 2px solid var(--mat-sys-primary); | |
| outline-offset: -2px; | |
| } | |
| } | |
| .multi-select-option { | |
| display: flex; | |
| flex-direction: row; | |
| .mat-pseudo-checkbox { | |
| height: 16px; | |
| width: 16px; | |
| margin-left: 4px; | |
| } | |
| .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after { | |
| height: 4px; | |
| width: 10px; | |
| } | |
| } |
| @if (shouldShowClearButton()) { | ||
| <button | ||
| type="button" | ||
| mat-flat-button |
Contributor
There was a problem hiding this comment.
Suggested change
| mat-flat-button | |
| mat-icon-button |
| } | ||
| <div class="flex flex-col gap-y-1 w-full"> | ||
| <div | ||
| class="text-base truncate" |
Contributor
There was a problem hiding this comment.
Suggested change
| class="text-base truncate" | |
| class="text-md truncate" |
| class="flex w-full items-center justify-center py-2 px-3" | ||
| role="note" | ||
| aria-live="polite"> | ||
| <div class="text-base truncate tertiary-color" ellipsisTooltip> |
Contributor
There was a problem hiding this comment.
Suggested change
| <div class="text-base truncate tertiary-color" ellipsisTooltip> | |
| <div class="text-md truncate tertiary-color" ellipsisTooltip> |
| class="flex w-full items-center justify-center py-2 px-3" | ||
| role="note" | ||
| aria-live="polite"> | ||
| <span class="text-base truncate error-color" ellipsisTooltip> |
Contributor
There was a problem hiding this comment.
Suggested change
| <span class="text-base truncate error-color" ellipsisTooltip> | |
| <span class="text-md truncate error-color" ellipsisTooltip> |
| } | ||
| @if (filteredLength === 0 && !loadError()) { | ||
| <div class="flex w-full items-center justify-center py-2 px-3" role="note" aria-live="polite"> | ||
| <div class="text-base truncate tertiary-color" ellipsisTooltip>No results</div> |
Contributor
There was a problem hiding this comment.
Suggested change
| <div class="text-base truncate tertiary-color" ellipsisTooltip>No results</div> | |
| <div class="text-md truncate tertiary-color" ellipsisTooltip>No results</div> |
|
|
||
| select = viewChild.required<MatSelect>(MatSelect); | ||
| searchInput = viewChild.required<ElementRef<HTMLInputElement>>('searchInput'); | ||
| clearSearchBtn = viewChild<MatButton>('clearSearchBtn'); |
Contributor
There was a problem hiding this comment.
Suggested change
| clearSearchBtn = viewChild<MatButton>('clearSearchBtn'); | |
| clearSearchBtn = viewChild<MatIconButton>('clearSearchBtn'); |
Hoist option, panel, search-filter, and form-field styling into global rules in _app.scss so every mat-select benefits from the same typography, radius, padding, and disabled treatment. Switch the trigger and search clear controls to mat-icon-button with the primary-icon-button class. Trim multi-select-option's host bindings and SCSS to layout-only since typography and state styling now flow through the global mat-option rules. Drop connector-property-input's redundant host class binding. Replace the spec's class-name selector for option labels with a stable data-qa hook (data-qa="searchable-select-option-label") so styling class renames cannot break the test in the future.
scottyaslan
requested changes
Apr 29, 2026
Contributor
scottyaslan
left a comment
scottyaslan
left a comment
There was a problem hiding this comment.
Looking good! One more minor comment.
| var(--mat-sys-on-secondary-container) | ||
| ); | ||
| } | ||
|
|
Contributor
There was a problem hiding this comment.
The checkmark is not the correct color when the keyboard focus is applied to the selected option:
Suggested change
| // When hover/focus/active overrides the selected background, revert the checkmark | |
| // to the regular label color so it remains visible against the state layer. | |
| &:hover .mat-pseudo-checkbox, | |
| &:focus .mat-pseudo-checkbox, | |
| &.mat-mdc-option-active .mat-pseudo-checkbox { | |
| --mat-pseudo-checkbox-minimal-selected-checkmark-color: var( | |
| --mat-option-label-text-color, | |
| var(--mat-sys-on-surface) | |
| ); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
NIFI-15853
This pull request fixes connector wizard properties whose allowable values must be loaded from the backend (
allowableValuesFetchable === truewith no staticallowableValues). Previously those properties were rendered as a plain text control and never triggered the allowable-values request, so users could not pick from server-provided options.The fix introduces a reusable SearchableSelect component (Material-based,
ControlValueAccessor) and routes both static and dynamic allowable values through it. ConnectorPropertyInput now emitsrequestAllowableValuesexactly once per fetchable control when the step loads (guarded byhasFetchedDynamicValues), and resets that guard when the bound descriptor'sproperty.namechanges so a rebound descriptor can refetch. Loading, error, and empty responses are handled with fallbacks so the field stays usable (text input or textarea as appropriate).STRING_LIST properties now render as a multi-select when allowable values exist (static or dynamic), and as a comma-separated textarea when they do not — replacing the previous plain text input for that type.
Scope
nifi-frontend/src/main/frontend(~4800 insertions, ~77 deletions on squashed commit75068da3e3).New / updated shared UI
SearchableSelect(libs/shared/src/components/searchable-select/): filterable overlay select with optional multi-select, sticky search with clear, optional async search and virtual scrolling, optional grouped options, loading/error/empty states, full keyboard navigation, and accessibility (role="combobox",aria-*). Spec file adds broad coverage (107 tests covering single/multi select, filter, keyboard navigation, focus management, virtual scrolling, async search, grouping, value-change deduplication, and disabled states).MultiSelectOption: extendsMatOptionfor options inside the overlay; theming (min-height, padding, hover, selected, keyboard focus) is scoped under.multi-select-optionso othermat-selectusages are unaffected.ConnectorPropertyInput: template moved toconnector-property-input.component.html; helpers for input kind and dynamic state (shouldUseSelect,shouldUseTextInput,shouldUseTextarea,isMultiSelect,isDynamicValuesFetchEmpty,isDynamicValuesFetchFailed); textarea branch aligned with text input for validation errors (required,pattern,verificationError,assetContentMissingwhere applicable).libs/shared/src/components/index.tsandlibs/shared/src/types/index.tsupdated for new components/types.Visible UX (intentional)
allowableValuesdropdowns now use searchable-select instead of mat-select (search filter + clear control) so static and dynamic flows share one widget.Out of scope / follow-ups
Screenshots
Fetched allowable values from the KafkaToS3 connector for topic names
Tracking
Please complete the following tracking steps prior to pull request creation.
Issue Tracking
Pull Request Tracking
NIFI-15853NIFI-15853VerifiedstatusPull Request Formatting
mainbranchVerification
Please indicate the verification steps performed prior to pull request creation.
Build
./mvnw clean install -P contrib-check(Frontend-only change under
nifi-frontend; full rootcontrib-checkshould still be run per project norms before merge.)Licensing
LICENSEandNOTICEfilesDocumentation