Add mit-alert-banner component for NDE banner display#69
Draft
adamshire123 wants to merge 2 commits into
Draft
Conversation
There was a problem hiding this comment.
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
MitAlertBannerComponentthat reads banner HTML fromTranslateServiceand conditionally renders it via Angular control flow. - Added unit tests covering creation, show/hide behavior, language-change updates, and
@Inputkey 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.
adamshire123
force-pushed
the
NDE-162-add-beta-label-and-feedback-form-to-nde
branch
from
July 20, 2026 21:51
ea2142e to
c17551c
Compare
There was a problem hiding this comment.
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
bannerTextonly recomputes whenonLangChangeemits; changing thelabelKeyinput at runtime won’t update the banner (even though the component API/comment says it can be overridden via binding). IncludelabelKeychanges 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
force-pushed
the
NDE-162-add-beta-label-and-feedback-form-to-nde
branch
from
July 21, 2026 14:04
c17551c to
ad509f3
Compare
adamshire123
marked this pull request as draft
July 21, 2026 19:32
|
@adamshire123 Styles and markup adjustments for the alert banner are committed! We can start reviewing whenever. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
Side effects of this change:
Relevant ticket(s):