feat: add a status banner with configurable message

[omkar-ethz]

Description

Add a status banner similar to one on Landing Page with configurable message and statusCode.

Configure using these two keys (updated in docs PR):

{
  "statusBannerMessage": "Some SciCat update to be displayed on the dismissible banner", // Optional
  "statusBannerCode": "INFO" // Optional, "WARN" or "INFO" - affects the styling of status banner, defaults to INFO
}

Motivation

#2158

Fixes:

Please provide a list of the fixes implemented in this PR

• None

Changes:

Please provide a list of the changes implemented by this PR

• changes made

Screen recording

it's fairly responsive:
Screencast from 03-11-2026 11:07:11 AM.webm

Tests included

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)

Documentation

• swagger documentation updated [required]
• official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

SciCatProject/documentation#92

Backend version

• Does it require a specific version of the backend
• which version of the backend is required:

Summary by Sourcery

Add a configurable status banner to the application header that displays environment messages based on app configuration.

New Features:

• Introduce a status banner component that shows a dismissible message at the top of the application.
• Extend application configuration to support a status banner message and code for informational or warning states.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• The status banner message is bound via [innerHTML] from configuration; if this content can ever be influenced externally, consider sanitizing or otherwise constraining it to avoid XSS risks.
• In StatusBannerComponent you declare appConfig: AppConfigInterface; but never use it, and code is typed as a generic string even though it only accepts INFO or WARN; you can remove the unused field and narrow the type to improve clarity and type safety.
• In status-banner.component.html you are using [class]='["toolbar", "toolbar-" + code]', which will stringify the array (including commas); using [ngClass]="['toolbar', 'toolbar-' + code]" will produce the intended class list more robustly.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The status banner message is bound via `[innerHTML]` from configuration; if this content can ever be influenced externally, consider sanitizing or otherwise constraining it to avoid XSS risks.
- In `StatusBannerComponent` you declare `appConfig: AppConfigInterface;` but never use it, and `code` is typed as a generic `string` even though it only accepts `INFO` or `WARN`; you can remove the unused field and narrow the type to improve clarity and type safety.
- In `status-banner.component.html` you are using `[class]='["toolbar", "toolbar-" + code]'`, which will stringify the array (including commas); using `[ngClass]="['toolbar', 'toolbar-' + code]"` will produce the intended class list more robustly.

## Individual Comments

### Comment 1
<location path="src/app/_layout/app-header/status-banner/status-banner.component.html" line_range="2" />
<code_context>
+<mat-toolbar [class]='["toolbar", "toolbar-" + code]'>
+  <span [innerHTML]="message" class="status-message"></span>
+  <span class="spacer"></span>
+  <button mat-icon-button aria-label="Dismiss" (click)="onDismiss()">
</code_context>
<issue_to_address>
**🚨 issue (security):** Rendering config-driven HTML via `innerHTML` has XSS implications and may warrant additional guarding.

Because `message` is bound via `[innerHTML]`, any HTML in the config (including scripts/handlers) will be executed in the page. If this config is not strictly trusted, this creates an XSS risk. If you truly need HTML here, please sanitize it (e.g., via Angular’s `DomSanitizer` or a similar sanitizer) and/or restrict which markup is allowed, and clearly document who can edit this config and under what guarantees.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Junjiequan]

Could you also update new keys in the jsonform schema&UI schema for live edit https://github.com/SciCatProject/frontend/blob/master/src/app/admin/schema/frontend.config.jsonforms.json

[omkar-ethz]

Could you also update new keys in the jsonform schema&UI schema for live edit https://github.com/SciCatProject/frontend/blob/master/src/app/admin/schema/frontend.config.jsonforms.json

Thanks, added. While testing the live edit functionality, I realized it's probably more user-friendly to have statusCode as optional and default to "INFO" - so changed that as well.

[Junjiequan]

I pushed a commit with some minor UI and JSON schema changes. Could you take a look? If the changes make things worse, I’ll revert the commit

[omkar-ethz]

@Junjiequan i just tested them out, i think the changes look great! thanks a lot.