Skip to content

Add mit-alert-banner component for NDE banner display#69

Draft
adamshire123 wants to merge 2 commits into
mit-mainfrom
NDE-162-add-beta-label-and-feedback-form-to-nde
Draft

Add mit-alert-banner component for NDE banner display#69
adamshire123 wants to merge 2 commits into
mit-mainfrom
NDE-162-add-beta-label-and-feedback-form-to-nde

Conversation

@adamshire123

Copy link
Copy Markdown

Why these changes are being introduced:

We wanted to add a customizeable alert banner to NDE.

How this addresses that need:

Created a new standalone Angular component (mit-alert-banner) that:

  • Fetches translated banner text from the 'mit.alertBanner' label via TranslateService
  • Displays HTML markup via [innerHTML] binding
  • Conditionally renders above the Header using @if, hiding when label empty string (by setting mit.alertBanner to NOT_DEFINED)
  • Reactively updates when language changes via onLangChange observable
  • Includes comprehensive unit tests with detailed comments for maintainability

Side effects of this change:

  • Requires 'mit.alertBanner' label to be configured in Alma's Custom Defined Labels table
  • Component is hidden when label is set to NOT_DEFINED or returns empty string

Relevant ticket(s):

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a new standalone Angular component (mit-alert-banner) intended to display a configurable/translatable alert banner above the NDE header via the existing custom-element mapping mechanism.

Changes:

  • Added MitAlertBannerComponent that reads banner HTML from TranslateService and conditionally renders it via Angular control flow.
  • Added unit tests covering creation, show/hide behavior, language-change updates, and @Input key override behavior.
  • Wired the component into the custom-component selector mapping so it renders before the header.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/app/mit-alert-banner/mit-alert-banner.component.ts Implements the banner’s translation lookup/reactivity and exposes an overridable label key.
src/app/mit-alert-banner/mit-alert-banner.component.html Conditionally renders banner HTML when non-empty.
src/app/mit-alert-banner/mit-alert-banner.component.scss Adds (currently empty) stylesheet entry for the banner component.
src/app/mit-alert-banner/mit-alert-banner.component.spec.ts Adds unit tests for render/hide and language-change update behavior.
src/app/custom1-module/customComponentMappings.ts Registers the banner to render before the header (nde-header-before).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/app/mit-alert-banner/mit-alert-banner.component.ts Outdated
Comment thread src/app/mit-alert-banner/mit-alert-banner.component.ts Outdated
Comment thread src/app/mit-alert-banner/mit-alert-banner.component.ts
@adamshire123
adamshire123 force-pushed the NDE-162-add-beta-label-and-feedback-form-to-nde branch from ea2142e to c17551c Compare July 20, 2026 21:51
@adamshire123
adamshire123 requested a review from Copilot July 20, 2026 21:56

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

src/app/mit-alert-banner/mit-alert-banner.component.ts:24

  • bannerText only recomputes when onLangChange emits; changing the labelKey input at runtime won’t update the banner (even though the component API/comment says it can be overridden via binding). Include labelKey changes in the reactive pipeline so the banner updates when either the language or the key changes.
  bannerText = toSignal(
    this.translate.onLangChange.pipe(
      startWith(null),
      map(() => this.translate.instant(this.labelKey()).trim()),
    ),

Comment on lines +1 to +3
@if (bannerText()) {
<div [innerHTML]="bannerText()"></div>
}
Why these changes are being introduced:
We wanted to add a customizeable alert banner to NDE.

How this addresses that need:
Created a new standalone Angular component (mit-alert-banner) that:
* Fetches translated banner text from the 'mit.alertBanner' label via TranslateService
* Displays HTML markup via [innerHTML] binding
* Conditionally renders above the Header using @if, hiding when label empty string (by setting mit.alertBanner to NOT_DEFINED)
* Reactively updates when language changes via onLangChange observable
* Includes comprehensive unit tests with detailed comments for maintainability

Side effects of this change:
 * Requires 'mit.alertBanner' label to be configured in Alma's Custom Defined Labels table
 * Component is hidden when label is set to NOT_DEFINED or returns empty string

Relevant ticket(s):
* https://mitlibraries.atlassian.net/browse/NDE-162
@adamshire123
adamshire123 force-pushed the NDE-162-add-beta-label-and-feedback-form-to-nde branch from c17551c to ad509f3 Compare July 21, 2026 14:04
@adamshire123
adamshire123 marked this pull request as draft July 21, 2026 19:32
@djanelle-mit

Copy link
Copy Markdown

@adamshire123 Styles and markup adjustments for the alert banner are committed! We can start reviewing whenever.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants