97425: Create "System Wide Alerts" feature

package.json

@@ -89,6 +89,8 @@
     "compression": "^1.7.4",
     "cookie-parser": "1.4.5",
     "core-js": "^3.7.0",
+    "date-fns": "^2.29.3",
+    "date-fns-tz": "^1.3.7",
     "deepmerge": "^4.2.2",
     "express": "^4.17.1",
     "express-rate-limit": "^5.1.3",

src/app/admin/admin-routing.module.ts

@@ -47,6 +47,12 @@ import { BatchImportPageComponent } from './admin-import-batch-page/batch-import
         component: BatchImportPageComponent,
         data: { title: 'admin.batch-import.title', breadcrumbKey: 'admin.batch-import' }
       },
+      {
+        path: 'system-wide-alert',
+        resolve: { breadcrumb: I18nBreadcrumbResolver },
+        loadChildren: () => import('../system-wide-alert/system-wide-alert.module').then((m) => m.SystemWideAlertModule),
+        data: {title: 'admin.system-wide-alert.title', breadcrumbKey: 'admin.system-wide-alert'}
+      },
     ])
   ],
   providers: [

src/app/core/data/system-wide-alert-data.service.spec.ts

@@ -0,0 +1,13 @@
+import { SystemWideAlertDataService } from './system-wide-alert-data.service';
+import { testFindAllDataImplementation } from './base/find-all-data.spec';
+import { testPutDataImplementation } from './base/put-data.spec';
+import { testCreateDataImplementation } from './base/create-data.spec';
+
+describe('SystemWideAlertDataService', () => {
+  describe('composition', () => {
+    const initService = () => new SystemWideAlertDataService(null, null, null, null, null);
+    testFindAllDataImplementation(initService);
+    testPutDataImplementation(initService);
+    testCreateDataImplementation(initService);
+  });
+});

src/app/core/data/system-wide-alert-data.service.ts

@@ -0,0 +1,83 @@
+import { Injectable } from '@angular/core';
+import { RequestService } from './request.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { Observable } from 'rxjs';
+import { PaginatedList } from './paginated-list.model';
+import { RemoteData } from './remote-data';
+import { IdentifiableDataService } from './base/identifiable-data.service';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { FindAllData, FindAllDataImpl } from './base/find-all-data';
+import { FindListOptions } from './find-list-options.model';
+import { dataService } from './base/data-service.decorator';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { CreateData, CreateDataImpl } from './base/create-data';
+import { SYSTEMWIDEALERT } from '../../system-wide-alert/system-wide-alert.resource-type';
+import { SystemWideAlert } from '../../system-wide-alert/system-wide-alert.model';
+import { PutData, PutDataImpl } from './base/put-data';
+import { RequestParam } from '../cache/models/request-param.model';
+
+/**
+ * Dataservice representing a system-wide alert
+ */
+@Injectable()
+@dataService(SYSTEMWIDEALERT)
+export class SystemWideAlertDataService extends IdentifiableDataService<SystemWideAlert> implements FindAllData<SystemWideAlert>, CreateData<SystemWideAlert>, PutData<SystemWideAlert> {
+  private findAllData: FindAllDataImpl<SystemWideAlert>;
+  private createData: CreateDataImpl<SystemWideAlert>;
+  private putData: PutDataImpl<SystemWideAlert>;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+  ) {
+    super('systemwidealerts', requestService, rdbService, objectCache, halService);
+
+    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+    this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
+    this.putData = new PutDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+  }
+
+  /**
+   * Returns {@link RemoteData} of all object with a list of {@link FollowLinkConfig}, to indicate which embedded
+   * info should be added to the objects
+   *
+   * @param options                     Find list options object
+   * @param useCachedVersionIfAvailable If this is true, the request will only be sent if there's
+   *                                    no valid cached version. Defaults to true
+   * @param reRequestOnStale            Whether or not the request should automatically be re-
+   *                                    requested after the response becomes stale
+   * @param linksToFollow               List of {@link FollowLinkConfig} that indicate which
+   *                                    {@link HALLink}s should be automatically resolved
+   * @return {Observable<RemoteData<PaginatedList<T>>>}
+   *    Return an observable that emits object list
+   */
+  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<SystemWideAlert>[]): Observable<RemoteData<PaginatedList<SystemWideAlert>>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  /**
+   * Create a new object on the server, and store the response in the object cache
+   *
+   * @param object    The object to create
+   * @param params    Array with additional params to combine with query string
+   */
+  create(object: SystemWideAlert, ...params: RequestParam[]): Observable<RemoteData<SystemWideAlert>> {
+    return this.createData.create(object, ...params);
+  }
+
+  /**
+   * Send a PUT request for the specified object
+   *
+   * @param object The object to send a put request for.
+   */
+  put(object: SystemWideAlert): Observable<RemoteData<SystemWideAlert>> {
+    return this.putData.put(object);
+  }
+
+
+}

src/app/menu.resolver.ts

@@ -598,6 +598,18 @@ export class MenuResolver implements Resolve<boolean> {
           icon: 'user-check',
           index: 11
         },
+        {
+          id: 'system_wide_alert',
+          active: false,
+          visible: authorized,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.system-wide-alert',
+            link: '/admin/system-wide-alert'
+          } as LinkMenuItemModel,
+          icon: 'exclamation-circle',
+          index: 12
+        },
       ];
 
       menuList.forEach((menuSection) => this.menuService.addSection(MenuID.ADMIN, Object.assign(menuSection, {

src/app/root.module.ts

@@ -42,11 +42,13 @@ import {
 } from './page-internal-server-error/page-internal-server-error.component';
 import { ThemedPageErrorComponent } from './page-error/themed-page-error.component';
 import { PageErrorComponent } from './page-error/page-error.component';
+import { SystemWideAlertModule } from './system-wide-alert/system-wide-alert.module';
 
 const IMPORTS = [
   CommonModule,
   SharedModule.withEntryComponents(),
   NavbarModule,
+  SystemWideAlertModule,
   NgbModule,
 ];
 

src/app/root/root.component.html

@@ -4,6 +4,7 @@
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
      params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
     }">
+    <ds-system-wide-alert-banner></ds-system-wide-alert-banner>
     <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
     <main class="main-content">
       <ds-themed-breadcrumbs></ds-themed-breadcrumbs>

src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html

@@ -0,0 +1,27 @@
+<div *ngIf="(systemWideAlert$ |async)?.active">
+    <div class="alert alert-warning w100">
+        <div class="container">
+            <span class="font-weight-bold">
+        <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
+            {{'system-wide-alert-banner.countdown.prefix' | translate }}
+        </span>
+            <span *ngIf="(countDownDays|async) > 0">
+            {{'system-wide-alert-banner.countdown.days' | translate: {
+                days: countDownDays|async
+            } }}
+        </span>
+            <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 ">
+            {{'system-wide-alert-banner.countdown.hours' | translate: {
+                hours: countDownHours| async
+            } }}
+        </span>
+            <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
+            {{'system-wide-alert-banner.countdown.minutes' | translate: {
+                minutes: countDownMinutes|async
+            } }}
+        </span>
+            </span>
+            <span>{{(systemWideAlert$ |async)?.message}}</span>
+        </div>
+    </div>
+</div>

src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.spec.ts

@@ -0,0 +1,111 @@
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { SystemWideAlertBannerComponent } from './system-wide-alert-banner.component';
+import { SystemWideAlertDataService } from '../../core/data/system-wide-alert-data.service';
+import { SystemWideAlert } from '../system-wide-alert.model';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { utcToZonedTime } from 'date-fns-tz';
+import { createPaginatedList } from '../../shared/testing/utils.test';
+import { TestScheduler } from 'rxjs/testing';
+import { getTestScheduler } from 'jasmine-marbles';
+import { By } from '@angular/platform-browser';
+import { TranslateModule } from '@ngx-translate/core';
+
+
+describe('SystemWideAlertBannerComponent', () => {
+  let comp: SystemWideAlertBannerComponent;
+  let fixture: ComponentFixture<SystemWideAlertBannerComponent>;
+  let systemWideAlertDataService: SystemWideAlertDataService;
+
+  let systemWideAlert: SystemWideAlert;
+  let scheduler: TestScheduler;
+
+  beforeEach(waitForAsync(() => {
+    scheduler = getTestScheduler();
+
+    const countDownDate = new Date();
+    countDownDate.setDate(countDownDate.getDate() + 1);
+    countDownDate.setHours(countDownDate.getHours() + 1);
+    countDownDate.setMinutes(countDownDate.getMinutes() + 1);
+
+    systemWideAlert = Object.assign(new SystemWideAlert(), {
+      alertId: 1,
+      message: 'Test alert message',
+      active: true,
+      countdownTo: utcToZonedTime(countDownDate, 'UTC').toISOString()
+    });
+
+    systemWideAlertDataService = jasmine.createSpyObj('systemWideAlertDataService', {
+      findAll: createSuccessfulRemoteDataObject$(createPaginatedList([systemWideAlert])),
+    });
+
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [SystemWideAlertBannerComponent],
+      providers: [
+        {provide: SystemWideAlertDataService, useValue: systemWideAlertDataService},
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SystemWideAlertBannerComponent);
+    comp = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('init', () => {
+    it('should init the comp', () => {
+      expect(comp).toBeTruthy();
+    });
+    it('should set the time countdown parts in their respective behaviour subjects', fakeAsync(() => {
+      spyOn(comp.countDownDays, 'next');
+      spyOn(comp.countDownHours, 'next');
+      spyOn(comp.countDownMinutes, 'next');
+      comp.ngOnInit();
+      tick(2000);
+      expect(comp.countDownDays.next).toHaveBeenCalled();
+      expect(comp.countDownHours.next).toHaveBeenCalled();
+      expect(comp.countDownMinutes.next).toHaveBeenCalled();
+      discardPeriodicTasks();
+
+    }));
+  });
+
+  describe('banner', () => {
+    it('should display the alert message and the timer', () => {
+      comp.countDownDays.next(1);
+      comp.countDownHours.next(1);
+      comp.countDownMinutes.next(1);
+      fixture.detectChanges();
+
+      const banner = fixture.debugElement.queryAll(By.css('span'));
+      expect(banner.length).toEqual(6);
+
+      expect(banner[0].nativeElement.innerHTML).toContain('system-wide-alert-banner.countdown.prefix');
+      expect(banner[0].nativeElement.innerHTML).toContain('system-wide-alert-banner.countdown.days');
+      expect(banner[0].nativeElement.innerHTML).toContain('system-wide-alert-banner.countdown.hours');
+      expect(banner[0].nativeElement.innerHTML).toContain('system-wide-alert-banner.countdown.minutes');
+
+      expect(banner[5].nativeElement.innerHTML).toContain(systemWideAlert.message);
+    });
+
+    it('should display the alert message but no timer when no timer is present', () => {
+      comp.countDownDays.next(0);
+      comp.countDownHours.next(0);
+      comp.countDownMinutes.next(0);
+      fixture.detectChanges();
+
+      const banner = fixture.debugElement.queryAll(By.css('span'));
+      expect(banner.length).toEqual(2);
+      expect(banner[1].nativeElement.innerHTML).toContain(systemWideAlert.message);
+    });
+
+    it('should not display an alert when none is present', () => {
+      comp.systemWideAlert$.next(null);
+      fixture.detectChanges();
+
+      const banner = fixture.debugElement.queryAll(By.css('span'));
+      expect(banner.length).toEqual(0);
+    });
+  });
+});

src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.ts

@@ -0,0 +1,113 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { SystemWideAlertDataService } from '../../core/data/system-wide-alert-data.service';
+import { getAllSucceededRemoteDataPayload } from '../../core/shared/operators';
+import { filter, map, switchMap } from 'rxjs/operators';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { SystemWideAlert } from '../system-wide-alert.model';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
+import { BehaviorSubject, EMPTY, interval, Subscription } from 'rxjs';
+import { zonedTimeToUtc } from 'date-fns-tz';
+
+/**
+ * Component responsible for rendering a banner and the countdown for an active system-wide alert
+ */
+@Component({
+  selector: 'ds-system-wide-alert-banner',
+  styleUrls: ['./system-wide-alert-banner.component.scss'],
+  templateUrl: './system-wide-alert-banner.component.html'
+})
+export class SystemWideAlertBannerComponent implements OnInit, OnDestroy {
+
+  /**
+   * BehaviorSubject that keeps track of the currently configured system-wide alert
+   */
+  systemWideAlert$ = new BehaviorSubject<SystemWideAlert>(undefined);
+
+  /**
+   * BehaviorSubject that keeps track of the amount of minutes left to count down to
+   */
+  countDownMinutes = new BehaviorSubject<number>(0);
+
+  /**
+   * BehaviorSubject that keeps track of the amount of hours left to count down to
+   */
+  countDownHours = new BehaviorSubject<number>(0);
+
+  /**
+   * BehaviorSubject that keeps track of the amount of days left to count down to
+   */
+  countDownDays = new BehaviorSubject<number>(0);
+
+  /**
+   * List of subscriptions
+   */
+  subscriptions: Subscription[] = [];
+
+  constructor(
+    protected systemWideAlertDataService: SystemWideAlertDataService
+  ) {
+  }
+
+  ngOnInit() {
+    this.subscriptions.push(this.systemWideAlertDataService.findAll().pipe(
+      getAllSucceededRemoteDataPayload(),
+      map((payload: PaginatedList<SystemWideAlert>) => payload.page),
+      filter((page) => isNotEmpty(page)),
+      map((page) => page[0])
+    ).subscribe((alert: SystemWideAlert) => {
+      this.systemWideAlert$.next(alert);
+    }));
+
+    this.subscriptions.push(this.systemWideAlert$.pipe(
+      switchMap((alert: SystemWideAlert) => {
+        if (hasValue(alert) && hasValue(alert.countdownTo)) {
+          const date = zonedTimeToUtc(alert.countdownTo, 'UTC');
+          const timeDifference = date.getTime() - new Date().getTime();
+          if (timeDifference > 0) {
+            return interval(1000);
+          }
+        }
+        // Reset the countDown times to 0 and return EMPTY to prevent unnecessary countdown calculations
+        this.countDownDays.next(0);
+        this.countDownHours.next(0);
+        this.countDownMinutes.next(0);
+        return EMPTY;
+      })
+    ).subscribe(() => {
+      this.setTimeDifference(this.systemWideAlert$.getValue().countdownTo);
+    }));
+  }
+
+  /**
+   * Helper method to calculate the time difference between the countdown date from the system-wide alert and "now"
+   * @param countdownTo - The date to count down to
+   */
+  private setTimeDifference(countdownTo: string) {
+    const date = zonedTimeToUtc(countdownTo, 'UTC');
+
+    const timeDifference = date.getTime() - new Date().getTime();
+    this.allocateTimeUnits(timeDifference);
+  }
+
+  /**
+   * Helper method to push how many days, hours and minutes are left in the countdown to their respective behaviour subject
+   * @param timeDifference  - The time difference to calculate and push the time units for
+   */
+  private allocateTimeUnits(timeDifference) {
+    const minutes = Math.floor((timeDifference) / (1000 * 60) % 60);
+    const hours = Math.floor((timeDifference) / (1000 * 60 * 60) % 24);
+    const days = Math.floor((timeDifference) / (1000 * 60 * 60 * 24));
+
+    this.countDownMinutes.next(minutes);
+    this.countDownHours.next(hours);
+    this.countDownDays.next(days);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach((sub: Subscription) => {
+      if (hasValue(sub)) {
+        sub.unsubscribe();
+      }
+    });
+  }
+}

src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html

@@ -0,0 +1,74 @@
+<div class="container">
+    <h2 id="header">{{'system-wide-alert.form.header' | translate}}</h2>
+    <div [formGroup]="alertForm" [class]="'ng-invalid'">
+        <div class="form-group">
+            <div class="row mb-2">
+                <div class="col">
+                    <ui-switch [checkedLabel]="'system-wide-alert.form.label.active' | translate"
+                               [uncheckedLabel]="'system-wide-alert.form.label.inactive' | translate"
+                               [checked]="formActive.value"
+                               (change)="formActive.patchValue(!formActive.value)"></ui-switch>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <label for="formMessage">{{ 'system-wide-alert.form.label.message' | translate }}</label>
+                    <textarea id="formMessage" rows="5"
+                              [className]="(formMessage.invalid) && (formMessage.dirty || formMessage.touched) ? 'form-control is-invalid' :'form-control'"
+                              formControlName="formMessage">
+                </textarea>
+                <div *ngIf="formMessage.invalid && (formMessage.dirty || formMessage.touched)"
+                     class="invalid-feedback show-feedback">
+                <span *ngIf="formMessage.errors">
+                {{ 'system-wide-alert.form.error.message' | translate }}
+            </span>
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
+            <label>{{ 'system-wide-alert.form.label.countdownTo' | translate }}</label>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <div class="input-group">
+                <input
+                        class="form-control"
+                        placeholder="yyyy-mm-dd"
+                        name="dp"
+                        [(ngModel)]="date"
+                        ngbDatepicker
+                        #d="ngbDatepicker"
+                />
+                <button class="btn btn-outline-secondary fas fa-calendar" (click)="d.toggle()" type="button"></button>
+            </div>
+        </div>
+        <div class="col-12 d-md-none">
+            <div class="input-group">
+                <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
+            </div>
+        </div>
+        <div class="d-none d-md-block col-md-6 timepicker-margin">
+            <div class="input-group">
+                <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
+            </div>
+        </div>
+    </div>
+    <div>
+        <span class="text-muted"> {{'system-wide-alert.form.label.countdownTo.hint' | translate}}</span>
+    </div>
+
+    <div class="btn-row float-right space-children-mr mt-2">
+        <button (click)="back()"
+                class="btn btn-outline-secondary"><i
+                class="fas fa-arrow-left"></i> {{'system-wide-alert.form.cancel' | translate}}</button>
+        <button class="btn btn-primary" [disabled]="alertForm.invalid"
+                (click)="save()">
+            <i class="fa fa-save"></i> {{ 'system-wide-alert.form.save' | translate}}
+        </button>
+    </div>
+
+</div>

src/app/system-wide-alert/alert-form/system-wide-alert-form.component.scss

@@ -0,0 +1,3 @@
+.timepicker-margin {
+    margin-top: -38px;
+}

src/app/system-wide-alert/alert-form/system-wide-alert-form.component.spec.ts

@@ -0,0 +1,219 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { SystemWideAlertDataService } from '../../core/data/system-wide-alert-data.service';
+import { SystemWideAlert } from '../system-wide-alert.model';
+import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { createPaginatedList } from '../../shared/testing/utils.test';
+import { TranslateModule } from '@ngx-translate/core';
+import { SystemWideAlertFormComponent } from './system-wide-alert-form.component';
+import { RequestService } from '../../core/data/request.service';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { RouterStub } from '../../shared/testing/router.stub';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { SharedModule } from '../../shared/shared.module';
+import { UiSwitchModule } from 'ngx-ui-switch';
+
+describe('SystemWideAlertFormComponent', () => {
+  let comp: SystemWideAlertFormComponent;
+  let fixture: ComponentFixture<SystemWideAlertFormComponent>;
+  let systemWideAlertDataService: SystemWideAlertDataService;
+
+  let systemWideAlert: SystemWideAlert;
+  let requestService: RequestService;
+  let notificationsService;
+  let router;
+
+
+  beforeEach(waitForAsync(() => {
+
+    const countDownDate = new Date();
+    countDownDate.setDate(countDownDate.getDate() + 1);
+    countDownDate.setHours(countDownDate.getHours() + 1);
+    countDownDate.setMinutes(countDownDate.getMinutes() + 1);
+
+    systemWideAlert = Object.assign(new SystemWideAlert(), {
+      alertId: 1,
+      message: 'Test alert message',
+      active: true,
+      countdownTo: utcToZonedTime(countDownDate, 'UTC').toISOString()
+    });
+
+    systemWideAlertDataService = jasmine.createSpyObj('systemWideAlertDataService', {
+      findAll: createSuccessfulRemoteDataObject$(createPaginatedList([systemWideAlert])),
+      put: createSuccessfulRemoteDataObject$(systemWideAlert),
+      create: createSuccessfulRemoteDataObject$(systemWideAlert)
+    });
+
+    requestService = jasmine.createSpyObj('requestService', ['setStaleByHrefSubstring']);
+
+    notificationsService = new NotificationsServiceStub();
+    router = new RouterStub();
+
+    TestBed.configureTestingModule({
+      imports: [FormsModule, SharedModule, UiSwitchModule, TranslateModule.forRoot()],
+      declarations: [SystemWideAlertFormComponent],
+      providers: [
+        {provide: SystemWideAlertDataService, useValue: systemWideAlertDataService},
+        {provide: NotificationsService, useValue: notificationsService},
+        {provide: Router, useValue: router},
+        {provide: RequestService, useValue: requestService},
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SystemWideAlertFormComponent);
+    comp = fixture.componentInstance;
+
+    spyOn(comp, 'createForm').and.callThrough();
+    spyOn(comp, 'initFormValues').and.callThrough();
+
+    fixture.detectChanges();
+  });
+
+  describe('init', () => {
+    it('should init the comp', () => {
+      expect(comp).toBeTruthy();
+    });
+    it('should create the form and init the values based on an existing alert', () => {
+      expect(comp.createForm).toHaveBeenCalled();
+      expect(comp.initFormValues).toHaveBeenCalledWith(systemWideAlert);
+    });
+  });
+
+  describe('createForm', () => {
+    it('should create the form', () => {
+      const now = new Date();
+
+      comp.createForm();
+      expect(comp.formMessage.value).toEqual('');
+      expect(comp.formActive.value).toEqual(false);
+      expect(comp.time).toEqual({hour: now.getHours(), minute: now.getMinutes()});
+      expect(comp.date).toEqual({year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()});
+    });
+  });
+
+  describe('initFormValues', () => {
+    it('should fill in the form based on the provided system-wide alert', () => {
+      comp.initFormValues(systemWideAlert);
+
+      const countDownTo = zonedTimeToUtc(systemWideAlert.countdownTo, 'UTC');
+
+      expect(comp.formMessage.value).toEqual(systemWideAlert.message);
+      expect(comp.formActive.value).toEqual(true);
+      expect(comp.time).toEqual({hour: countDownTo.getHours(), minute: countDownTo.getMinutes()});
+      expect(comp.date).toEqual({
+        year: countDownTo.getFullYear(),
+        month: countDownTo.getMonth() + 1,
+        day: countDownTo.getDate()
+      });
+    });
+  });
+  describe('save', () => {
+    it('should update the exising alert with the form values and show a success notification on success', () => {
+      spyOn(comp, 'back');
+      comp.currentAlert = systemWideAlert;
+
+      comp.formMessage.patchValue('New message');
+      comp.formActive.patchValue(true);
+      comp.time = {hour: 4, minute: 26};
+      comp.date = {year: 2023, month: 1, day: 25};
+
+      const expectedAlert = new SystemWideAlert();
+      expectedAlert.alertId = systemWideAlert.alertId;
+      expectedAlert.message = 'New message';
+      expectedAlert.active = true;
+      const countDownTo = new Date(2023, 0, 25, 4, 26);
+      expectedAlert.countdownTo = utcToZonedTime(countDownTo, 'UTC').toUTCString();
+
+      comp.save();
+
+      expect(systemWideAlertDataService.put).toHaveBeenCalledWith(expectedAlert);
+      expect(notificationsService.success).toHaveBeenCalled();
+      expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith('systemwidealerts');
+      expect(comp.back).toHaveBeenCalled();
+    });
+    it('should update the exising alert with the form values and show a error notification on error', () => {
+      spyOn(comp, 'back');
+      (systemWideAlertDataService.put as jasmine.Spy).and.returnValue(createFailedRemoteDataObject$());
+      comp.currentAlert = systemWideAlert;
+
+      comp.formMessage.patchValue('New message');
+      comp.formActive.patchValue(true);
+      comp.time = {hour: 4, minute: 26};
+      comp.date = {year: 2023, month: 1, day: 25};
+
+      const expectedAlert = new SystemWideAlert();
+      expectedAlert.alertId = systemWideAlert.alertId;
+      expectedAlert.message = 'New message';
+      expectedAlert.active = true;
+      const countDownTo = new Date(2023, 0, 25, 4, 26);
+      expectedAlert.countdownTo = utcToZonedTime(countDownTo, 'UTC').toUTCString();
+
+      comp.save();
+
+      expect(systemWideAlertDataService.put).toHaveBeenCalledWith(expectedAlert);
+      expect(notificationsService.error).toHaveBeenCalled();
+      expect(requestService.setStaleByHrefSubstring).not.toHaveBeenCalledWith('systemwidealerts');
+      expect(comp.back).not.toHaveBeenCalled();
+    });
+    it('should create a new alert with the form values and show a success notification on success', () => {
+      spyOn(comp, 'back');
+      comp.currentAlert = undefined;
+
+      comp.formMessage.patchValue('New message');
+      comp.formActive.patchValue(true);
+      comp.time = {hour: 4, minute: 26};
+      comp.date = {year: 2023, month: 1, day: 25};
+
+      const expectedAlert = new SystemWideAlert();
+      expectedAlert.message = 'New message';
+      expectedAlert.active = true;
+      const countDownTo = new Date(2023, 0, 25, 4, 26);
+      expectedAlert.countdownTo = utcToZonedTime(countDownTo, 'UTC').toUTCString();
+
+      comp.save();
+
+      expect(systemWideAlertDataService.create).toHaveBeenCalledWith(expectedAlert);
+      expect(notificationsService.success).toHaveBeenCalled();
+      expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith('systemwidealerts');
+      expect(comp.back).toHaveBeenCalled();
+
+    });
+    it('should create a new alert with the form values and show a error notification on error', () => {
+      spyOn(comp, 'back');
+      (systemWideAlertDataService.create as jasmine.Spy).and.returnValue(createFailedRemoteDataObject$());
+
+      comp.currentAlert = undefined;
+
+      comp.formMessage.patchValue('New message');
+      comp.formActive.patchValue(true);
+      comp.time = {hour: 4, minute: 26};
+      comp.date = {year: 2023, month: 1, day: 25};
+
+      const expectedAlert = new SystemWideAlert();
+      expectedAlert.message = 'New message';
+      expectedAlert.active = true;
+      const countDownTo = new Date(2023, 0, 25, 4, 26);
+      expectedAlert.countdownTo = utcToZonedTime(countDownTo, 'UTC').toUTCString();
+
+      comp.save();
+
+      expect(systemWideAlertDataService.create).toHaveBeenCalledWith(expectedAlert);
+      expect(notificationsService.error).toHaveBeenCalled();
+      expect(requestService.setStaleByHrefSubstring).not.toHaveBeenCalledWith('systemwidealerts');
+      expect(comp.back).not.toHaveBeenCalled();
+
+    });
+  });
+  describe('back', () => {
+    it('should navigate back to the home page', () => {
+      comp.back();
+      expect(router.navigate).toHaveBeenCalledWith(['/home']);
+    });
+  });
+
+
+});

src/app/system-wide-alert/alert-form/system-wide-alert-form.component.ts

@@ -0,0 +1,163 @@
+import { Component, OnInit } from '@angular/core';
+import { SystemWideAlertDataService } from '../../core/data/system-wide-alert-data.service';
+import { getFirstCompletedRemoteData, getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
+import { filter, map } from 'rxjs/operators';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { SystemWideAlert } from '../system-wide-alert.model';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
+import { Observable } from 'rxjs';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+import { RemoteData } from '../../core/data/remote-data';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { Router } from '@angular/router';
+import { RequestService } from '../../core/data/request.service';
+import { TranslateService } from '@ngx-translate/core';
+
+
+/**
+ * Component responsible for rendering the form to update a system-wide alert
+ */
+@Component({
+  selector: 'ds-system-wide-alert-form',
+  styleUrls: ['./system-wide-alert-form.component.scss'],
+  templateUrl: './system-wide-alert-form.component.html'
+})
+export class SystemWideAlertFormComponent implements OnInit {
+
+  /**
+   * Observable to track an existing system-wide alert
+   */
+  systemWideAlert$: Observable<SystemWideAlert>;
+
+  /**
+   * The currently configured system-wide alert
+   */
+  currentAlert: SystemWideAlert;
+
+  /**
+   * The form group representing the system-wide alert
+   */
+  alertForm: FormGroup;
+
+  /**
+   * Date object to store the countdown date part
+   */
+  date: NgbDateStruct;
+
+  /**
+   * Object to store the countdown time part
+   */
+  time;
+
+
+  constructor(
+    protected systemWideAlertDataService: SystemWideAlertDataService,
+    protected notificationsService: NotificationsService,
+    protected router: Router,
+    protected requestService: RequestService,
+    protected translateService: TranslateService
+  ) {
+  }
+
+  ngOnInit() {
+    this.systemWideAlert$ = this.systemWideAlertDataService.findAll().pipe(
+      getFirstSucceededRemoteDataPayload(),
+      map((payload: PaginatedList<SystemWideAlert>) => payload.page),
+      filter((page) => isNotEmpty(page)),
+      map((page) => page[0])
+    );
+    this.createForm();
+
+    this.systemWideAlert$.subscribe((alert) => {
+      this.currentAlert = alert;
+      this.initFormValues(alert);
+    });
+  }
+
+  /**
+   * Creates the form with empty values
+   */
+  createForm() {
+    this.alertForm = new FormBuilder().group({
+        formMessage: new FormControl('', {
+          validators: [Validators.required],
+        }),
+        formActive: new FormControl(false),
+      }
+    );
+    this.setDateTime(new Date());
+  }
+
+  /**
+   * Sets the form values based on the values retrieve from the provided system-wide alert
+   * @param alert   - System-wide alert to use to init the form
+   */
+  initFormValues(alert: SystemWideAlert) {
+    this.formMessage.patchValue(alert.message);
+    this.formActive.patchValue(alert.active);
+    const countDownTo = zonedTimeToUtc(alert.countdownTo, 'UTC');
+    if (countDownTo.getTime() - new Date().getTime() > 0) {
+      this.setDateTime(countDownTo);
+    }
+
+  }
+
+  private setDateTime(dateToSet) {
+    this.time = {hour: dateToSet.getHours(), minute: dateToSet.getMinutes()};
+    this.date = {year: dateToSet.getFullYear(), month: dateToSet.getMonth() + 1, day: dateToSet.getDate()};
+
+  }
+
+  get formMessage() {
+    return this.alertForm.get('formMessage');
+  }
+
+  get formActive() {
+    return this.alertForm.get('formActive');
+  }
+
+  /**
+   * Save the system-wide alert present in the form
+   * When no alert is present yet on the server, a new one will be created
+   * When one already exists, the existing one will be updated
+   */
+  save() {
+    const alert = new SystemWideAlert();
+    alert.message = this.formMessage.value;
+    alert.active = this.formActive.value;
+    const countDownTo = new Date(this.date.year, this.date.month - 1, this.date.day, this.time.hour, this.time.minute);
+    alert.countdownTo = utcToZonedTime(countDownTo, 'UTC').toUTCString();
+
+    if (hasValue(this.currentAlert)) {
+      const updatedAlert = Object.assign(new SystemWideAlert(), this.currentAlert, alert);
+      this.handleResponse(this.systemWideAlertDataService.put(updatedAlert), 'system-wide-alert.form.update');
+    } else {
+      this.handleResponse(this.systemWideAlertDataService.create(alert), 'system-wide-alert.form.create');
+    }
+  }
+
+  private handleResponse(response$: Observable<RemoteData<SystemWideAlert>>, messagePrefix) {
+    response$.pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe((response: RemoteData<SystemWideAlert>) => {
+      if (response.hasSucceeded) {
+        this.notificationsService.success(this.translateService.get(`${messagePrefix}.success`));
+        this.requestService.setStaleByHrefSubstring('systemwidealerts');
+        this.back();
+      } else {
+        this.notificationsService.error(this.translateService.get(`${messagePrefix}.error`, response.errorMessage));
+      }
+    });
+  }
+
+  /**
+   * Navigate back to the homepage
+   */
+  back() {
+    this.router.navigate(['/home']);
+  }
+
+
+}

src/app/system-wide-alert/system-wide-alert-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {
+  SiteAdministratorGuard
+} from '../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
+import { SystemWideAlertFormComponent } from './alert-form/system-wide-alert-form.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        canActivate: [SiteAdministratorGuard],
+        component: SystemWideAlertFormComponent,
+      },
+
+    ])
+  ]
+})
+export class SystemWideAlertRoutingModule {
+
+}

src/app/system-wide-alert/system-wide-alert.model.ts

@@ -0,0 +1,55 @@
+import { autoserialize, deserialize } from 'cerialize';
+import { typedObject } from '../core/cache/builders/build-decorators';
+import { CacheableObject } from '../core/cache/cacheable-object.model';
+import { HALLink } from '../core/shared/hal-link.model';
+import { ResourceType } from '../core/shared/resource-type';
+import { excludeFromEquals } from '../core/utilities/equals.decorators';
+import { SYSTEMWIDEALERT } from './system-wide-alert.resource-type';
+
+/**
+ * Object representing a system-wide alert
+ */
+@typedObject
+export class SystemWideAlert implements CacheableObject {
+  static type = SYSTEMWIDEALERT;
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  /**
+   * The identifier for this system-wide alert
+   */
+  @autoserialize
+  alertId: string;
+
+  /**
+   * The message for this system-wide alert
+   */
+  @autoserialize
+  message: string;
+
+  /**
+   * A string representation of the date to which this system-wide alert will count down when active
+   */
+  @autoserialize
+  countdownTo: string;
+
+  /**
+   * Whether the system-wide alert is active
+   */
+  @autoserialize
+  active: boolean;
+
+
+  /**
+   * The {@link HALLink}s for this system-wide alert
+   */
+  @deserialize
+  _links: {
+    self: HALLink,
+  };
+}

src/app/system-wide-alert/system-wide-alert.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { SystemWideAlertBannerComponent } from './alert-banner/system-wide-alert-banner.component';
+import { SystemWideAlertFormComponent } from './alert-form/system-wide-alert-form.component';
+import { SharedModule } from '../shared/shared.module';
+import { SystemWideAlertDataService } from '../core/data/system-wide-alert-data.service';
+import { SystemWideAlertRoutingModule } from './system-wide-alert-routing.module';
+import { UiSwitchModule } from 'ngx-ui-switch';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    SharedModule,
+    UiSwitchModule,
+    SystemWideAlertRoutingModule,
+  ],
+  exports: [
+    SystemWideAlertBannerComponent
+  ],
+  declarations: [
+    SystemWideAlertBannerComponent,
+    SystemWideAlertFormComponent
+  ],
+  providers: [
+    SystemWideAlertDataService
+  ]
+})
+export class SystemWideAlertModule {
+
+}

src/app/system-wide-alert/system-wide-alert.resource-type.ts

@@ -0,0 +1,10 @@
+/**
+ * The resource type for SystemWideAlert
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+
+import { ResourceType } from '../core/shared/resource-type';
+
+export const SYSTEMWIDEALERT = new ResourceType('systemwidealert');

src/assets/i18n/en.json5

@@ -4811,4 +4811,47 @@
   "person.orcid.registry.auth": "ORCID Authorizations",
   "home.recent-submissions.head": "Recent Submissions",
 
+
+
+  "system-wide-alert-banner.countdown.prefix": "In",
+
+  "system-wide-alert-banner.countdown.days": "{{days}} day(s),",
+
+  "system-wide-alert-banner.countdown.hours": "{{hours}} hour(s) and",
+
+  "system-wide-alert-banner.countdown.minutes": "{{minutes}} minute(s):",
+
+
+
+  "menu.section.system-wide-alert": "System-wide Alerts",
+
+  "system-wide-alert.form.header": "System-wide Alerts",
+
+  "system-wide-alert.form.cancel": "Cancel",
+
+  "system-wide-alert.form.save": "Save",
+
+  "system-wide-alert.form.label.active": "ACTIVE",
+
+  "system-wide-alert.form.label.inactive": "INACTIVE",
+
+  "system-wide-alert.form.error.message": "The system wide alert must have a message",
+
+  "system-wide-alert.form.label.message": "Alert message",
+
+  "system-wide-alert.form.label.countdownTo": "Count down",
+
+  "system-wide-alert.form.label.countdownTo.hint": "Hint: When a date in the future is set, the system wide alert banner will perform a countdown to the set date. Setting the date to the current time or in the past will disable the countdown.",
+
+  "system-wide-alert.form.update.success": "The system-wide alert was successfully updated",
+
+  "system-wide-alert.form.update.error": "Something went wrong when updating the system-wide alert",
+
+  "system-wide-alert.form.create.success": "The system-wide alert was successfully created",
+
+  "system-wide-alert.form.create.error": "Something went wrong when creating the system-wide alert",
+
+  "admin.system-wide-alert.breadcrumbs": "System-wide Alerts",
+  
+  "admin.system-wide-alert.title": "System-wide Alerts",
 }

src/themes/custom/lazy-theme.module.ts

@@ -114,6 +114,7 @@ import { ObjectListComponent } from './app/shared/object-list/object-list.compon
 import { BrowseByMetadataPageComponent } from './app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component';
 import { BrowseByDatePageComponent } from './app/browse-by/browse-by-date-page/browse-by-date-page.component';
 import { BrowseByTitlePageComponent } from './app/browse-by/browse-by-title-page/browse-by-title-page.component';
+import { SystemWideAlertModule } from '../../app/system-wide-alert/system-wide-alert.module';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -220,6 +221,7 @@ const DECLARATIONS = [
     FormsModule,
     ResourcePoliciesModule,
     ComcolModule,
+    SystemWideAlertModule
   ],
   declarations: DECLARATIONS,
   exports: [

yarn.lock

@@ -4759,6 +4759,16 @@ data-urls@^3.0.1:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^10.0.0"
 
+date-fns-tz@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.7.tgz#e8e9d2aaceba5f1cc0e677631563081fdcb0e69a"
+  integrity sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==
+
+date-fns@^2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 date-format@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.4.tgz#b58036e29e74121fca3e1b3e0dc4a62c65faa233"