From 5415309acf71a0401db2b1eb7fbb2384e41f7887 Mon Sep 17 00:00:00 2001 From: Venkateshwaran Shanmugham Date: Wed, 3 Jun 2026 07:19:10 +0530 Subject: [PATCH] NIFI-15964 Update OverlappingConnectionsBanner to use StatusBanner --- ...ng-connections-banner.component-theme.scss | 36 ------------------- ...rlapping-connections-banner.component.html | 13 ++++--- ...rlapping-connections-banner.component.scss | 10 ++++++ ...pping-connections-banner.component.spec.ts | 14 ++++---- ...verlapping-connections-banner.component.ts | 7 +++- .../main/frontend/apps/nifi/src/styles.scss | 4 --- 6 files changed, 30 insertions(+), 54 deletions(-) delete mode 100644 nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/_overlapping-connections-banner.component-theme.scss diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/_overlapping-connections-banner.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/_overlapping-connections-banner.component-theme.scss deleted file mode 100644 index 5dc84a16eb8e..000000000000 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/_overlapping-connections-banner.component-theme.scss +++ /dev/null @@ -1,36 +0,0 @@ -/* - * 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. - */ - -@mixin generate-theme() { - .overlapping-connections-banner { - background-color: var(--mat-sys-surface-container); - border: 1px solid var(--mat-sys-outline-variant); - // !important needed to override the global *:not([class^=mat-])... border-color reset in _app.scss - border-left: 4px solid var(--nf-caution-default) !important; - color: var(--mat-sys-on-surface); - - .overlap-link { - color: var(--mat-sys-primary); - cursor: pointer; - text-decoration: underline; - - &:hover { - opacity: 0.6; - } - } - } -} diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.html index 40760dfdcc59..4f52b25aee85 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.html +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.html @@ -16,12 +16,11 @@ --> @if (overlappingGroups().length > 0) { -
-
- - {{ overlappingGroups().length }} overlapping connection group(s) detected -
- + + + {{ overlappingGroups().length }} overlapping connection group(s) detected + + Overlapping connections with no bend points appear as a single connection. Add a bend point to separate them. @@ -32,5 +31,5 @@ }
- + } diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.scss index 8305259f1a38..fd7e7773747f 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.scss +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.scss @@ -19,3 +19,13 @@ display: block; font-size: 13px; } + +.overlap-link { + color: var(--mat-sys-primary); + cursor: pointer; + text-decoration: underline; + + &:hover { + opacity: 0.6; + } +} diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.spec.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.spec.ts index 7e7c5c421d25..e09fb2391833 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.spec.ts +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.spec.ts @@ -16,6 +16,8 @@ */ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { StatusBanner } from '@nifi/shared'; import { OverlappingConnectionsBannerComponent } from './overlapping-connections-banner.component'; import { OverlappingConnectionGroup } from '../overlap-detection.utils'; @@ -50,8 +52,7 @@ describe('OverlappingConnectionsBannerComponent', () => { describe('rendering', () => { it('should not render when there are no overlapping groups', async () => { const { fixture } = await setup({ overlappingGroups: [] }); - const banner = fixture.nativeElement.querySelector('.overlapping-connections-banner'); - expect(banner).toBeNull(); + expect(fixture.debugElement.query(By.directive(StatusBanner))).toBeNull(); }); it('should render when there are overlapping groups', async () => { @@ -59,8 +60,9 @@ describe('OverlappingConnectionsBannerComponent', () => { { sourceComponentId: 'a', destinationComponentId: 'b', connectionIds: ['c1', 'c2'] } ]; const { fixture } = await setup({ overlappingGroups: groups }); - const banner = fixture.nativeElement.querySelector('.overlapping-connections-banner'); - expect(banner).toBeTruthy(); + const statusBanner = fixture.debugElement.query(By.directive(StatusBanner)); + expect(statusBanner).toBeTruthy(); + expect(statusBanner.componentInstance.variant).toBe('caution'); }); it('should display the correct count of overlap groups', async () => { @@ -69,8 +71,8 @@ describe('OverlappingConnectionsBannerComponent', () => { { sourceComponentId: 'c', destinationComponentId: 'd', connectionIds: ['c3', 'c4'] } ]; const { fixture } = await setup({ overlappingGroups: groups }); - const banner = fixture.nativeElement.querySelector('.overlapping-connections-banner'); - expect(banner.textContent).toContain('2 overlapping connection group(s) detected'); + expect(fixture.debugElement.query(By.directive(StatusBanner))).toBeTruthy(); + expect(fixture.nativeElement.textContent).toContain('2 overlapping connection group(s) detected'); }); it('should render a link for each overlap group', async () => { diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.ts index ca7cae1d36d7..fdabe931e3eb 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.ts +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.ts @@ -16,12 +16,17 @@ */ import { Component, input, output } from '@angular/core'; +import { + StatusBanner, + StatusBannerDescriptionDirective, + StatusBannerTitleDirective +} from '@nifi/shared'; import { OverlappingConnectionGroup } from '../overlap-detection.utils'; @Component({ selector: 'overlapping-connections-banner', standalone: true, - imports: [], + imports: [StatusBanner, StatusBannerTitleDirective, StatusBannerDescriptionDirective], templateUrl: './overlapping-connections-banner.component.html', styleUrls: ['./overlapping-connections-banner.component.scss'] }) diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss index ce5d5a91b90f..58746400798d 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss @@ -58,8 +58,6 @@ processor-status-table; @use 'app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component-theme' as change-color-dialog; @use 'libs/shared/src/components/map-table/editors/text-editor/text-editor.component-theme' as text-editor; -@use 'app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component-theme' as - overlapping-connections-banner; @use 'app/pages/connectors/ui/connector-canvas/connector-canvas.component-theme' as connector-canvas; // Plus imports for other components in your app. @@ -108,7 +106,6 @@ html { @include change-color-dialog.generate-theme(); @include text-editor.generate-theme(); @include resizable.generate-theme(); - @include overlapping-connections-banner.generate-theme(); @include connector-canvas.generate-theme(); .darkMode { @@ -142,7 +139,6 @@ html { @include change-color-dialog.generate-theme(); @include text-editor.generate-theme(); @include resizable.generate-theme(); - @include overlapping-connections-banner.generate-theme(); @include connector-canvas.generate-theme(); } }