feat: add a status banner with configurable message

src/app/_layout/app-header/app-header.component.html

@@ -209,4 +209,8 @@ <h6>
       </h6>
     </ng-template>
   </mat-toolbar>
+  <app-status-banner
+    (dismiss)="showStatusBanner = false"
+    *ngIf="showStatusBanner"
+  ></app-status-banner>
 </div>

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,8 @@ export class AppHeaderComponent implements OnInit {
     this.isSiteHeaderLogoUrlExternal$ = this.siteHeaderLogoUrl$.pipe(
       map((siteHeaderLogoUrl) => this.isFullUrl(siteHeaderLogoUrl)),
     );
+
+    this.showStatusBanner = !!this.config.statusBannerMessage;
   }
 
   logout(): void {

src/app/_layout/app-header/status-banner/status-banner.component.html

@@ -0,0 +1,12 @@
+<mat-toolbar [ngClass]="['toolbar', 'toolbar-' + code]">
+  <span class="status-message">
+    <mat-icon class="status-icon">
+      {{ code === "INFO" ? "info" : "warning" }}
+    </mat-icon>
+    <span [innerHTML]="message"></span>
+  </span>
+  <span class="spacer"></span>
+  <button mat-icon-button aria-label="Dismiss" (click)="onDismiss()">
+    <mat-icon>close</mat-icon>
+  </button>
+</mat-toolbar>

src/app/_layout/app-header/status-banner/status-banner.component.scss

@@ -0,0 +1,37 @@
+.spacer {
+  flex: 1 1 auto;
+}
+
+.toolbar {
+  height: fit-content;
+  border: none;
+  box-shadow: none;
+}
+
+.status-message {
+  text-align: center;
+  text-wrap: wrap;
+  width: 100%;
+  font-size: 16px;
+  line-height: 20px;
+  padding: 10px 0;
+}
+.status-icon {
+  margin-right: 6px;
+  font-size: 20px;
+  vertical-align: middle;
+}
+.toolbar-WARN {
+  background-color: #feefb3;
+  color: #9f6000;
+}
+
+.toolbar-INFO {
+  color: #4f8a10;
+  background-color: #dff2bf;
+}
+
+:host ::ng-deep a {
+  text-decoration: underline;
+  color: inherit;
+}

src/app/_layout/app-header/status-banner/status-banner.component.spec.ts

@@ -0,0 +1,61 @@
+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 { AppConfigInterface, AppConfigService } from "app-config.service";
+
+describe("StatusBannerComponent", () => {
+  let component: StatusBannerComponent;
+  let fixture: ComponentFixture<StatusBannerComponent>;
+  let appConfigServiceSpy: jasmine.SpyObj<AppConfigService>;
+
+  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: appConfigServiceSpy,
+        },
+      ],
+    }).compileComponents();
+  });
+
+  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");
+  });
+});

src/app/_layout/app-header/status-banner/status-banner.component.ts

@@ -0,0 +1,28 @@
+import { Component, Output, EventEmitter } from "@angular/core";
+import { 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<void>();
+  message: string;
+  code: "INFO" | "WARN";
+
+  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();
+  }
+}

src/app/_layout/layout.module.ts

@@ -13,10 +13,12 @@ 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";
 import { MatTooltipModule } from "@angular/material/tooltip";
 
 @NgModule({
   declarations: [
+    StatusBannerComponent,
     AppLayoutComponent,
     AppHeaderComponent,
     AppMainLayoutComponent,

src/app/admin/schema/frontend.config.jsonforms.json

@@ -99,6 +99,12 @@
       "metadataEditingUnitListDisabled": { "type": "boolean" },
       "hideEmptyMetadataTable": { "type": "boolean" },
       "datafilesActionsEnabled": { "type": "boolean" },
+      "statusBannerMessage": { "type": "string" },
+      "statusBannerCode": {
+        "type": "string",
+        "enum": ["INFO", "WARN"],
+        "default": "INFO"
+      },
       "datafilesActions": {
         "type": "array",
         "items": {
@@ -409,6 +415,8 @@
           { "type": "Control", "scope": "#/properties/siteIcon" },
           { "type": "Control", "scope": "#/properties/siteTitle" },
           { "type": "Control", "scope": "#/properties/siteSciCatLogo" },
+          { "type": "Control", "scope": "#/properties/statusBannerMessage" },
+          { "type": "Control", "scope": "#/properties/statusBannerCode" },
           {
             "type": "Control",
             "scope": "#/properties/checkBoxFilterClickTrigger"

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