NIFI-15964 Update OverlappingConnectionsBanner to use StatusBanner

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) {
-    <div class="overlapping-connections-banner flex flex-col gap-1.5 px-4 py-3 rounded-sm text-sm">
-        <div class="flex items-center gap-2">
-            <i class="fa fa-warning caution-color"></i>
-            <span class="font-medium"> {{ overlappingGroups().length }} overlapping connection group(s) detected </span>
-        </div>
-        <span>
+    <status-banner variant="caution" [allowDismiss]="false">
+        <span statusBannerTitle>
+            {{ overlappingGroups().length }} overlapping connection group(s) detected
+        </span>
+        <span statusBannerDescription>
             Overlapping connections with no bend points appear as a single connection. Add a bend point to separate
             them.
         </span>
@@ -32,5 +31,5 @@
                 </a>
             }
         </div>
-    </div>
+    </status-banner>
 }

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;
+    }
+}

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,17 +52,17 @@ 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 () => {
             const groups: OverlappingConnectionGroup[] = [
                 { 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 () => {

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']
 })

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();
     }
 }