[MEL]: Application banner

apps/datahub-e2e/src/e2e/header.cy.ts

@@ -154,4 +154,32 @@ describe('header', () => {
         .should('equal', 'desc,userSavedCount')
     })
   })
+  describe('Warning banner', () => {
+    beforeEach(() => {
+      cy.login()
+      cy.visit('/geonetwork/srv/eng/admin.console#/settings/languages')
+      cy.get('.input-group').find('input').first().type('application-banner')
+      cy.get('.input-group').find('button').click()
+      cy.get('input')
+        .first()
+        .type(
+          'This is a warning message that should be shown when the key is set'
+        )
+      cy.get('.btn-group').eq(1).find('button').first().click()
+    })
+    it('should display a warning banner if the translation key exists and display the message', () => {
+      cy.visit('/search')
+      cy.get('gn-ui-application-banner').should(
+        'have.text',
+        'This is a warning message that should be shown when the key is set'
+      )
+    })
+    it('should not display the banner when the translation is deleted', () => {
+      cy.visit('/geonetwork/srv/eng/admin.console#/settings/languages')
+      cy.get('.btn-group').eq(1).find('button').eq(1).click()
+      cy.get('[data-ng-click="removeAllTranslations()"]').click()
+      cy.visit('/search')
+      cy.get('gn-ui-application-banner').should('not.exist')
+    })
+  })
 })

apps/datahub/src/app/app.module.ts

@@ -102,6 +102,7 @@ import {
   matMoreHorizOutline,
   matRemoveOutline,
   matStarOutline,
+  matWarningAmberOutline,
 } from '@ng-icons/material-icons/outline'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
 import { MAX_FEATURE_COUNT } from './record/record-data-preview/record-data-preview.component'
@@ -176,6 +177,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
       matAddOutline,
       matExpandMoreOutline,
       matStarOutline,
+      matWarningAmberOutline,
     }),
     OrganisationsComponent,
     LanguageSwitcherComponent,

apps/datahub/src/app/home/home-header/home-header.component.html

@@ -2,6 +2,11 @@
   <div
     class="container-lg relative h-full mx-auto flex flex-col-reverse justify-between sm:flex-col sm:justify-end"
   >
+    <gn-ui-application-banner
+      [message]="platformService.translateKey(bannerKey) | async"
+      class="container-sm"
+      type="secondary"
+    ></gn-ui-application-banner>
     <div
       class="py-8 relative z-40 mb-[184px] sm:mb-0"
       [ngClass]="{ 'pointer-events-none': expandRatio < 0.2 }"

apps/datahub/src/app/home/home-header/home-header.component.spec.ts

@@ -74,6 +74,7 @@ class searchServiceMock {
 class PlatformServiceMock {
   isAnonymous = jest.fn(() => this._isAnonymous$)
   _isAnonymous$ = new BehaviorSubject(true)
+  translateKey = jest.fn()
 }
 
 class FieldsServiceMock {

apps/datahub/src/app/home/home-header/home-header.component.ts

@@ -49,12 +49,13 @@ export class HomeHeaderComponent {
   searchConfig: SearchConfig = getOptionalSearchConfig()
   showLanguageSwitcher = getGlobalConfig().LANGUAGES?.length > 0
   foregroundColor = getThemeConfig().HEADER_FOREGROUND_COLOR || '#ffffff'
+  bannerKey = 'application-banner'
 
   constructor(
     public routerFacade: RouterFacade,
     public searchFacade: SearchFacade,
     private searchService: SearchService,
-    private platformService: PlatformServiceInterface,
+    protected platformService: PlatformServiceInterface,
     private fieldsService: FieldsService
   ) {}
 

libs/ui/elements/src/index.ts

@@ -22,3 +22,4 @@ export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-feedback-item/user-feedback-item.component'
 export * from './lib/user-preview/user-preview.component'
+export * from './lib/application-banner/application-banner.component'

libs/ui/elements/src/lib/application-banner/application-banner.component.html

@@ -0,0 +1,20 @@
+<div *ngIf="message" style="top: 0" class="absolute text-wrap bg-white mt-4">
+  <div
+    class="flex flex-row py-2.5 px-5 gap-5 justify-start items-center border"
+    [ngClass]="classList"
+  >
+    <ng-icon [name]="icon"></ng-icon>
+    <div class="flex flex-col justify-start gap-2.5">
+      <span *ngIf="title" class="font-bold">{{ title }}</span>
+      <span class="font-medium" [innerHTML]="message"></span>
+    </div>
+    <button
+      *ngIf="closeEnabled"
+      class="self-start"
+      type="button"
+      (click)="closeMessage()"
+    >
+      <ng-icon name="matCloseOutline"> </ng-icon>
+    </button>
+  </div>
+</div>

libs/ui/elements/src/lib/application-banner/application-banner.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { ApplicationBannerComponent } from './application-banner.component'
+
+describe('ApplicationBannerComponent', () => {
+  let component: ApplicationBannerComponent
+  let fixture: ComponentFixture<ApplicationBannerComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ApplicationBannerComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ApplicationBannerComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

libs/ui/elements/src/lib/application-banner/application-banner.component.stories.ts

@@ -0,0 +1,61 @@
+import {
+  applicationConfig,
+  componentWrapperDecorator,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from '@storybook/angular'
+import { ApplicationBannerComponent } from './application-banner.component'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { importProvidersFrom } from '@angular/core'
+
+export default {
+  title: 'Elements/ApplicationBannerComponent',
+  component: ApplicationBannerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ApplicationBannerComponent],
+    }),
+    applicationConfig({
+      providers: [importProvidersFrom(BrowserAnimationsModule)],
+    }),
+    componentWrapperDecorator(
+      (story) => `<div style="max-width: 800px">${story}</div>`
+    ),
+  ],
+} as Meta<ApplicationBannerComponent>
+
+export const Default: StoryObj<ApplicationBannerComponent> = {
+  args: {
+    message: 'This is a warning message',
+    closeEnabled: false,
+    type: 'primary',
+  },
+}
+
+export const PrimaryFull: StoryObj<ApplicationBannerComponent> = {
+  args: {
+    message: 'This is a warning message',
+    title: 'Warning',
+    closeEnabled: true,
+    type: 'primary',
+  },
+}
+
+export const SecondaryFull: StoryObj<ApplicationBannerComponent> = {
+  args: {
+    message: 'This is a warning message',
+    title: 'Warning',
+    closeEnabled: true,
+    type: 'secondary',
+  },
+}
+
+export const LightFull: StoryObj<ApplicationBannerComponent> = {
+  args: {
+    message: 'This is a warning message',
+    title: 'Warning',
+    closeEnabled: true,
+    type: 'light',
+  },
+}

libs/ui/elements/src/lib/application-banner/application-banner.component.ts

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  matCloseOutline,
+  matWarningAmberOutline,
+} from '@ng-icons/material-icons/outline'
+
+@Component({
+  selector: 'gn-ui-application-banner',
+  standalone: true,
+  imports: [CommonModule, NgIconComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './application-banner.component.html',
+  styleUrl: './application-banner.component.css',
+  providers: [
+    provideIcons({
+      matWarningAmberOutline,
+      matCloseOutline,
+    }),
+    provideNgIconsConfig({ size: '1.5em' }),
+  ],
+})
+export class ApplicationBannerComponent {
+  @Input() message: string
+  @Input() title: string
+  @Input() closeEnabled = false
+  @Input() extraClass = ''
+  @Input() icon = 'matWarningAmberOutline'
+  msgClass = ''
+
+  @Input() set type(value: 'primary' | 'secondary' | 'light') {
+    switch (value) {
+      case 'primary':
+        this.msgClass = 'bg-primary-darkest border-primary text-white'
+        break
+      case 'secondary':
+        this.msgClass = 'bg-primary-opacity-50 border-primary-darker text-black'
+        break
+      case 'light':
+        this.msgClass =
+          'bg-primary-opacity-10 border-primary-lightest text-black'
+        break
+      default:
+        this.msgClass = 'bg-primary-opacity-50 border-primary-darker text-black'
+        break
+    }
+  }
+
+  get classList() {
+    return `${this.msgClass} ${this.extraClass}`
+  }
+
+  closeMessage() {
+    this.message = ''
+  }
+}

libs/ui/elements/src/lib/ui-elements.module.ts

@@ -19,6 +19,7 @@ import { MarkdownParserComponent } from './markdown-parser/markdown-parser.compo
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
+import { ApplicationBannerComponent } from './application-banner/application-banner.component'
 
 @NgModule({
   imports: [
@@ -40,6 +41,7 @@ import { UserPreviewComponent } from './user-preview/user-preview.component'
     MaxLinesComponent,
     TextInputComponent,
     ImageInputComponent,
+    ApplicationBannerComponent,
   ],
   providers: [
     provideNgIconsConfig({
@@ -53,6 +55,7 @@ import { UserPreviewComponent } from './user-preview/user-preview.component'
     UserPreviewComponent,
     MarkdownParserComponent,
     ImageInputComponent,
+    ApplicationBannerComponent,
   ],
 })
 export class UiElementsModule {}