NIFI-15959: Rendering a banner when a previously selected value in a …

nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss

@@ -384,6 +384,28 @@
             color: var(--nf-success-contrast);
             background-color: var(--nf-success-variant);
         }
+
+        .fa {
+            &.neutral {
+                color: var(--mat-sys-on-surface);
+            }
+
+            &.critical {
+                color: var(--mat-sys-on-error);
+            }
+
+            &.caution {
+                color: var(--nf-caution-contrast);
+            }
+
+            &.success {
+                color: var(--nf-success-contrast);
+            }
+
+            &.info {
+                color: var(--nf-success-contrast);
+            }
+        }
     }
 }
 
@@ -901,5 +923,27 @@ html {
             color: var(--nf-success-contrast);
             background-color: var(--nf-success-variant);
         }
+
+        .fa {
+            &.neutral {
+                color: var(--mat-sys-on-surface);
+            }
+
+            &.critical {
+                color: var(--mat-sys-on-error);
+            }
+
+            &.caution {
+                color: var(--nf-caution-contrast);
+            }
+
+            &.success {
+                color: var(--nf-success-contrast);
+            }
+
+            &.info {
+                color: var(--nf-success-contrast);
+            }
+        }
     }
 }

nifi-frontend/src/main/frontend/libs/shared/src/components/banner/banner.component.html

@@ -0,0 +1,39 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+@if (messages && messages.length > 0) {
+    <div class="banner-container" [class]="panelClass" data-qa="banner">
+        <status-banner [allowDismiss]="allowDismiss" (dismiss)="dismissClicked()" [variant]="variant">
+            <div class="flex-1 flex gap-4">
+                @if (messages.length === 1) {
+                    <div class="break-words" data-qa="banner-message">{{ messages[0] }}</div>
+                } @else {
+                    <ul
+                        class="list-disc list-inside"
+                        [class.!list-none]="deduplicatedMessages.length === 1"
+                        data-qa="banner-message-list">
+                        @for (message of deduplicatedMessages; track message) {
+                            <li class="break-words" data-qa="banner-message-item">
+                                <span>{{ message }}</span>
+                            </li>
+                        }
+                    </ul>
+                }
+            </div>
+        </status-banner>
+    </div>
+}

nifi-frontend/src/main/frontend/libs/shared/src/components/banner/banner.component.scss

@@ -0,0 +1,16 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */

nifi-frontend/src/main/frontend/libs/shared/src/components/banner/banner.component.spec.ts

@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Banner } from './banner.component';
+
+describe('Banner', () => {
+    let component: Banner;
+    let fixture: ComponentFixture<Banner>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [Banner]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(Banner);
+        component = fixture.componentInstance;
+    });
+
+    it('should create', () => {
+        fixture.detectChanges();
+        expect(component).toBeTruthy();
+    });
+
+    it('should show single message', () => {
+        fixture.componentRef.setInput('messages', ['Test message']);
+        fixture.detectChanges();
+        const messageElement = fixture.nativeElement.querySelector('[data-qa="banner-message"]');
+        expect(messageElement).toBeTruthy();
+        expect(messageElement.textContent).toContain('Test message');
+    });
+
+    it('should show multiple messages', () => {
+        fixture.componentRef.setInput('messages', ['Test message 1', 'Test message 2']);
+        fixture.detectChanges();
+        const messageElements = fixture.nativeElement.querySelectorAll('[data-qa="banner-message-item"]');
+        expect(messageElements.length).toBe(2);
+        expect(messageElements[0].textContent).toContain('Test message 2');
+        expect(messageElements[1].textContent).toContain('Test message 1');
+    });
+
+    it('should show deduplicated messages', () => {
+        fixture.componentRef.setInput('messages', ['Test message 1', 'Test message 1', 'Test message 2']);
+        fixture.detectChanges();
+        const messageElements = fixture.nativeElement.querySelectorAll('[data-qa="banner-message-item"]');
+        expect(messageElements.length).toBe(2);
+        expect(messageElements[0].textContent).toContain('Test message 2');
+        expect(messageElements[1].textContent).toContain('Test message 1');
+    });
+});

nifi-frontend/src/main/frontend/libs/shared/src/components/banner/banner.component.ts

@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';
+import { StatusVariant } from '../../types';
+import { StatusBanner } from '../status-banner/status-banner.component';
+
+@Component({
+    selector: 'banner',
+    imports: [StatusBanner],
+    templateUrl: './banner.component.html',
+    styleUrl: './banner.component.scss',
+    encapsulation: ViewEncapsulation.None
+})
+export class Banner {
+    @Input() messages: string[] | null = null;
+    @Input() variant: StatusVariant = 'critical';
+    @Input() allowDismiss = true;
+    @Input() allowDismissHotKey?: boolean;
+    @Input() panelClass?: string;
+
+    @Output() dismiss: EventEmitter<void> = new EventEmitter<void>();
+
+    dismissClicked(): void {
+        this.dismiss.next();
+    }
+
+    @HostListener('window:keydown.escape', ['$event'])
+    handleKeyDownEscape(event: Event): void {
+        if (this.allowDismissHotKey) {
+            event.stopPropagation();
+            this.dismissClicked();
+        }
+    }
+
+    get deduplicatedMessages(): string[] {
+        if (!this.messages) {
+            return [];
+        }
+
+        return [...new Set([...this.messages].reverse())];
+    }
+}

nifi-frontend/src/main/frontend/libs/shared/src/components/connector-property-input/connector-property-input.component.spec.ts

@@ -23,6 +23,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 
 import { ConnectorPropertyInput } from './connector-property-input.component';
+import { StringListOrphansStrippedEvent } from './connector-property-input.types';
 import {
     AllowableValue,
     AssetInfo,
@@ -99,7 +100,8 @@ function makeSecret(overrides: Partial<Secret> = {}): Secret {
             (requestAllowableValues)="onRequestAllowableValues()"
             (assetFilesSelected)="onAssetFilesSelected($event)"
             (assetDeleteRequested)="onAssetDeleteRequested($event)"
-            (dismissFailedUploadRequested)="onDismissFailedUploadRequested($event)">
+            (dismissFailedUploadRequested)="onDismissFailedUploadRequested($event)"
+            (stringListOrphansStripped)="onStringListOrphansStripped($event)">
         </connector-property-input>
     `
 })
@@ -116,6 +118,7 @@ class HostComponent {
     assetFilesSelectedSpy = vi.fn();
     assetDeleteRequestedSpy = vi.fn();
     dismissFailedUploadRequestedSpy = vi.fn();
+    stringListOrphansStrippedSpy = vi.fn();
 
     onRequestAllowableValues(): void {
         this.requestSpy();
@@ -132,6 +135,10 @@ class HostComponent {
     onDismissFailedUploadRequested(progress: UploadProgressInfo): void {
         this.dismissFailedUploadRequestedSpy(progress);
     }
+
+    onStringListOrphansStripped(event: StringListOrphansStrippedEvent): void {
+        this.stringListOrphansStrippedSpy(event);
+    }
 }
 
 class MockResizeObserver {
@@ -535,6 +542,84 @@ describe('ConnectorPropertyInput', () => {
         });
     });
 
+    describe('STRING_LIST multi-select orphan strip', () => {
+        it('emits stringListOrphansStripped once with every removed token after strip', async () => {
+            const property = makeProp({
+                type: 'STRING_LIST',
+                name: 'topics',
+                allowableValues: [makeAllowable('t1', 'T1'), makeAllowable('t2', 'T2')]
+            });
+            const { fixture, host } = await setup({
+                property,
+                initialValue: ['t1', 'gone-a', 'gone-b']
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges(false);
+
+            expect(host.stringListOrphansStrippedSpy).toHaveBeenCalledTimes(1);
+            expect(host.stringListOrphansStrippedSpy.mock.calls[0][0]).toEqual({
+                propertyName: 'topics',
+                removed: ['gone-a', 'gone-b']
+            });
+            expect(host.control.value).toEqual(['t1']);
+        });
+
+        it('does not emit stringListOrphansStripped when every selected value is allowable', async () => {
+            const property = makeProp({
+                type: 'STRING_LIST',
+                name: 'topics',
+                allowableValues: [makeAllowable('t1', 'T1'), makeAllowable('t2', 'T2')]
+            });
+            const { fixture, host } = await setup({
+                property,
+                initialValue: ['t1', 't2']
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges(false);
+
+            expect(host.stringListOrphansStrippedSpy).not.toHaveBeenCalled();
+        });
+
+        it('coalesces multiple computeSelectOptions passes into one strip emission', async () => {
+            const property = makeProp({
+                type: 'STRING_LIST',
+                name: 'topics',
+                allowableValues: [makeAllowable('t1', 'T1'), makeAllowable('t2', 'T2')]
+            });
+            await TestBed.configureTestingModule({
+                imports: [ConnectorPropertyInput, NoopAnimationsModule, MatIconTestingModule]
+            }).compileComponents();
+
+            const fixture = TestBed.createComponent(ConnectorPropertyInput);
+            const listener = vi.fn();
+            fixture.componentInstance.stringListOrphansStripped.subscribe(listener);
+            fixture.componentRef.setInput('property', property);
+            fixture.componentRef.setInput('dynamicAllowableValuesState', null);
+            fixture.componentInstance.writeValue(['t1', 'gone-a', 'gone-b']);
+
+            const computeSelectOptions = (
+                fixture.componentInstance as unknown as { computeSelectOptions: () => void }
+            ).computeSelectOptions.bind(fixture.componentInstance);
+            computeSelectOptions();
+            computeSelectOptions();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges(false);
+
+            expect(listener).toHaveBeenCalledTimes(1);
+            expect(listener.mock.calls[0][0]).toEqual({
+                propertyName: 'topics',
+                removed: ['gone-a', 'gone-b']
+            });
+            expect(fixture.componentInstance.formControl.value).toEqual(['t1']);
+        });
+    });
+
     describe('already-hydrated dynamicAllowableValuesState', () => {
         it('still emits requestAllowableValues exactly once when values are hydrated before first paint', async () => {
             const { host } = await setup({