From f0aab80dc170fe37b4c64db1a334e58cef11b99c Mon Sep 17 00:00:00 2001 From: Omkar Zade Date: Tue, 10 Mar 2026 16:05:15 +0000 Subject: [PATCH 1/6] feat: implement status banner with configurable message --- .../app-header/app-header.component.html | 1 + .../app-header/app-header.component.ts | 5 +++ .../status-banner.component.html | 7 ++++ .../status-banner.component.scss | 36 ++++++++++++++++++ .../status-banner.component.spec.ts | 38 +++++++++++++++++++ .../status-banner/status-banner.component.ts | 29 ++++++++++++++ src/app/_layout/layout.module.ts | 2 + src/app/app-config.service.ts | 3 +- 8 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 src/app/_layout/app-header/status-banner/status-banner.component.html create mode 100644 src/app/_layout/app-header/status-banner/status-banner.component.scss create mode 100644 src/app/_layout/app-header/status-banner/status-banner.component.spec.ts create mode 100644 src/app/_layout/app-header/status-banner/status-banner.component.ts diff --git a/src/app/_layout/app-header/app-header.component.html b/src/app/_layout/app-header/app-header.component.html index 547bcc3851..1b1e687624 100644 --- a/src/app/_layout/app-header/app-header.component.html +++ b/src/app/_layout/app-header/app-header.component.html @@ -101,6 +101,7 @@ +
menu diff --git a/src/app/_layout/app-header/app-header.component.ts b/src/app/_layout/app-header/app-header.component.ts index 836b9f07ca..ce04c1134d 100644 --- a/src/app/_layout/app-header/app-header.component.ts +++ b/src/app/_layout/app-header/app-header.component.ts @@ -27,6 +27,7 @@ import { map, Observable, Subscription } from "rxjs"; }) export class AppHeaderComponent implements OnInit { private sub: Subscription; + showStatusBanner: boolean; config = this.appConfigService.getConfig(); facility = this.config.facility ?? ""; @@ -89,6 +90,10 @@ export class AppHeaderComponent implements OnInit { this.isSiteHeaderLogoUrlExternal$ = this.siteHeaderLogoUrl$.pipe( map((siteHeaderLogoUrl) => this.isFullUrl(siteHeaderLogoUrl)), ); + + this.showStatusBanner = !!( + this.config.statusBannerCode && this.config.statusBannerMessage + ); } logout(): void { diff --git a/src/app/_layout/app-header/status-banner/status-banner.component.html b/src/app/_layout/app-header/status-banner/status-banner.component.html new file mode 100644 index 0000000000..455f12865f --- /dev/null +++ b/src/app/_layout/app-header/status-banner/status-banner.component.html @@ -0,0 +1,7 @@ + + + + + diff --git a/src/app/_layout/app-header/status-banner/status-banner.component.scss b/src/app/_layout/app-header/status-banner/status-banner.component.scss new file mode 100644 index 0000000000..ab904805a2 --- /dev/null +++ b/src/app/_layout/app-header/status-banner/status-banner.component.scss @@ -0,0 +1,36 @@ +.spacer { + flex: 1 1 auto; +} + +.toolbar { + min-height: 32px; + height: fit-content; +} + +.status-message { + text-align: center; + text-wrap: wrap; + width: 100%; +} + +.toolbar-WARN { + background-color: #FEEFB3; + color: #9F6000; +} + +.toolbar-INFO { + color: #4F8A10; + background-color: #DFF2BF; +} + + +@media (max-width: 800px) { + .status-message { + font-size: 16px; + } +} + +:host ::ng-deep a { + text-decoration: underline; + color: inherit; +} diff --git a/src/app/_layout/app-header/status-banner/status-banner.component.spec.ts b/src/app/_layout/app-header/status-banner/status-banner.component.spec.ts new file mode 100644 index 0000000000..55f956e15b --- /dev/null +++ b/src/app/_layout/app-header/status-banner/status-banner.component.spec.ts @@ -0,0 +1,38 @@ +import { ComponentFixture, TestBed } from "@angular/core/testing"; + +import { StatusBannerComponent } from "./status-banner.component"; +import { CommonModule } from "@angular/common"; +import { MatButtonModule } from "@angular/material/button"; +import { MatIconModule } from "@angular/material/icon"; +import { MatToolbarModule } from "@angular/material/toolbar"; +import { AppConfigService } from "app-config.service"; + +describe("StatusBannerComponent", () => { + let component: StatusBannerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [StatusBannerComponent], + imports: [CommonModule, MatToolbarModule, MatButtonModule, MatIconModule], + providers: [ + { + provide: AppConfigService, + useValue: { + getConfig: () => ({ statusCode: "INFO", statusMessage: "test" }), + }, + }, + ], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(StatusBannerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/_layout/app-header/status-banner/status-banner.component.ts b/src/app/_layout/app-header/status-banner/status-banner.component.ts new file mode 100644 index 0000000000..dd9239170f --- /dev/null +++ b/src/app/_layout/app-header/status-banner/status-banner.component.ts @@ -0,0 +1,29 @@ +import { Component, Output, EventEmitter } from "@angular/core"; +import { AppConfigInterface, AppConfigService } from "app-config.service"; + +@Component({ + selector: "app-status-banner", + templateUrl: "./status-banner.component.html", + styleUrls: ["./status-banner.component.scss"], + standalone: false, +}) +export class StatusBannerComponent { + @Output() dismiss = new EventEmitter(); + appConfig: AppConfigInterface; + message: string; + code: string; + + constructor(private appConfigService: AppConfigService) { + const appConfig = this.appConfigService.getConfig(); + this.message = appConfig.statusBannerMessage; + if (["INFO", "WARN"].includes(appConfig.statusBannerCode)) { + this.code = appConfig.statusBannerCode; + } else { + this.code = "INFO"; + } + } + + onDismiss() { + this.dismiss.emit(); + } +} diff --git a/src/app/_layout/layout.module.ts b/src/app/_layout/layout.module.ts index a0c45ed115..5a41a0765b 100644 --- a/src/app/_layout/layout.module.ts +++ b/src/app/_layout/layout.module.ts @@ -13,9 +13,11 @@ import { BatchCardModule } from "datasets/batch-card/batch-card.module"; import { BreadcrumbModule } from "shared/modules/breadcrumb/breadcrumb.module"; import { UsersModule } from "../users/users.module"; import { MatChipsModule } from "@angular/material/chips"; +import { StatusBannerComponent } from "./app-header/status-banner/status-banner.component"; @NgModule({ declarations: [ + StatusBannerComponent, AppLayoutComponent, AppHeaderComponent, AppMainLayoutComponent, diff --git a/src/app/app-config.service.ts b/src/app/app-config.service.ts index 1ba2952809..824f41d2b7 100644 --- a/src/app/app-config.service.ts +++ b/src/app/app-config.service.ts @@ -167,6 +167,8 @@ export interface AppConfigInterface { hideEmptyMetadataTable?: boolean; ingestorComponent?: IngestorComponentConfig; defaultTab?: DefaultTab; + statusBannerMessage?: string; + statusBannerCode?: "INFO" | "WARN" } function isMainPageConfiguration(obj: any): obj is MainPageConfiguration { @@ -275,7 +277,6 @@ export class AppConfigService { if (!this.appConfig) { console.error("AppConfigService: Configuration not loaded!"); } - return this.appConfig as AppConfigInterface; } } From 4a5b2abb31ff9c07cd4003ec3e4b5a0a0f5166a2 Mon Sep 17 00:00:00 2001 From: Omkar Zade Date: Wed, 11 Mar 2026 12:11:06 +0000 Subject: [PATCH 2/6] add test for status banner component --- .../status-banner.component.spec.ts | 35 +++++++++++++++---- src/app/app-config.service.ts | 2 +- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/app/_layout/app-header/status-banner/status-banner.component.spec.ts b/src/app/_layout/app-header/status-banner/status-banner.component.spec.ts index 55f956e15b..b4c8430574 100644 --- a/src/app/_layout/app-header/status-banner/status-banner.component.spec.ts +++ b/src/app/_layout/app-header/status-banner/status-banner.component.spec.ts @@ -5,34 +5,57 @@ import { CommonModule } from "@angular/common"; import { MatButtonModule } from "@angular/material/button"; import { MatIconModule } from "@angular/material/icon"; import { MatToolbarModule } from "@angular/material/toolbar"; -import { AppConfigService } from "app-config.service"; +import { AppConfigInterface, AppConfigService } from "app-config.service"; describe("StatusBannerComponent", () => { let component: StatusBannerComponent; let fixture: ComponentFixture; + let appConfigServiceSpy: jasmine.SpyObj; beforeEach(async () => { + appConfigServiceSpy = jasmine.createSpyObj("AppConfigService", [ + "getConfig", + ]); + appConfigServiceSpy.getConfig.and.returnValue({ + statusBannerMessage: "test", + statusBannerCode: "INFO", + } as AppConfigInterface); await TestBed.configureTestingModule({ declarations: [StatusBannerComponent], imports: [CommonModule, MatToolbarModule, MatButtonModule, MatIconModule], providers: [ { provide: AppConfigService, - useValue: { - getConfig: () => ({ statusCode: "INFO", statusMessage: "test" }), - }, + useValue: appConfigServiceSpy, }, ], }).compileComponents(); }); - beforeEach(() => { + function initComponent() { fixture = TestBed.createComponent(StatusBannerComponent); component = fixture.componentInstance; fixture.detectChanges(); - }); + } it("should create", () => { + initComponent(); expect(component).toBeTruthy(); }); + + it("should set the status banner message and code from the app config", () => { + initComponent(); + expect(component.message).toBe("test"); + expect(component.code).toBe("INFO"); + }); + + it("should set default code to INFO when neither INFO or WARN is provided", () => { + appConfigServiceSpy.getConfig.and.returnValue({ + statusBannerMessage: "test123", + statusBannerCode: "ERROR", + } as unknown as AppConfigInterface); + initComponent(); + expect(component.code).toBe("INFO"); + expect(component.message).toBe("test123"); + }); }); diff --git a/src/app/app-config.service.ts b/src/app/app-config.service.ts index 824f41d2b7..7debb96695 100644 --- a/src/app/app-config.service.ts +++ b/src/app/app-config.service.ts @@ -168,7 +168,7 @@ export interface AppConfigInterface { ingestorComponent?: IngestorComponentConfig; defaultTab?: DefaultTab; statusBannerMessage?: string; - statusBannerCode?: "INFO" | "WARN" + statusBannerCode?: "INFO" | "WARN"; } function isMainPageConfiguration(obj: any): obj is MainPageConfiguration { From 444e339c6876ce30196e9b4494ba9f344af4c545 Mon Sep 17 00:00:00 2001 From: Omkar Zade Date: Wed, 11 Mar 2026 12:45:09 +0000 Subject: [PATCH 3/6] address sourcery's comments --- .../app-header/status-banner/status-banner.component.html | 2 +- .../app-header/status-banner/status-banner.component.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/_layout/app-header/status-banner/status-banner.component.html b/src/app/_layout/app-header/status-banner/status-banner.component.html index 455f12865f..d53a197edf 100644 --- a/src/app/_layout/app-header/status-banner/status-banner.component.html +++ b/src/app/_layout/app-header/status-banner/status-banner.component.html @@ -1,4 +1,4 @@ - + -
menu @@ -179,4 +178,8 @@
+
diff --git a/src/app/_layout/app-header/status-banner/status-banner.component.html b/src/app/_layout/app-header/status-banner/status-banner.component.html index d53a197edf..3c3bb58f40 100644 --- a/src/app/_layout/app-header/status-banner/status-banner.component.html +++ b/src/app/_layout/app-header/status-banner/status-banner.component.html @@ -1,5 +1,10 @@ - - + + + + {{ code === "INFO" ? "info" : "warning" }} + + +