Merge branch 'main' into CST-5307

# Conflicts: # src/assets/i18n/en.json5
2025-10-08 10:34:15 +00:00 · 2022-06-08 16:53:11 +02:00
parent 8bdb4b7be3 cf6e58d194
commit bd02278f80
73 changed files with 2583 additions and 125 deletions
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
    "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
    "angular-idle-preload": "3.0.0",
    "angulartics2": "^12.0.0",
+    "axios": "^0.27.2",
    "bootstrap": "4.3.1",
    "caniuse-lite": "^1.0.30001165",
    "cerialize": "0.1.18",
--- a/server.ts
+++ b/server.ts
@@ -19,6 +19,7 @@ import 'zone.js/node';
 import 'reflect-metadata';
 import 'rxjs';

+import axios from 'axios';
 import * as pem from 'pem';
 import * as https from 'https';
 import * as morgan from 'morgan';
@@ -38,14 +39,14 @@ import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';

 import { environment } from './src/environments/environment';
 import { createProxyMiddleware } from 'http-proxy-middleware';
-import { hasValue, hasNoValue } from './src/app/shared/empty.util';
+import { hasNoValue, hasValue } from './src/app/shared/empty.util';

 import { UIServerConfig } from './src/config/ui-server-config.interface';

 import { ServerAppModule } from './src/main.server';

 import { buildAppConfig } from './src/config/config.server';
-import { AppConfig, APP_CONFIG } from './src/config/app-config.interface';
+import { APP_CONFIG, AppConfig } from './src/config/app-config.interface';
 import { extendEnvironmentWithAppConfig } from './src/config/config.util';

 /*
@@ -174,6 +175,11 @@ export function app() {
  */
  router.use('/iiif', express.static(IIIF_VIEWER, { index: false }));

+  /**
+   * Checking server status
+   */
+  server.get('/app/health', healthCheck);
+
  // Register the ngApp callback function to handle incoming requests
  router.get('*', ngApp);

@@ -319,6 +325,21 @@ function start() {
  }
 }

+/*
+ * The callback function to serve health check requests
+ */
+function healthCheck(req, res) {
+  const baseUrl = `${environment.rest.baseUrl}${environment.actuators.endpointPath}`;
+  axios.get(baseUrl)
+    .then((response) => {
+      res.status(response.status).send(response.data);
+    })
+    .catch((error) => {
+      res.status(error.response.status).send({
+        error: error.message
+      });
+    });
+}
 // Webpack will replace 'require' with '__webpack_require__'
 // '__non_webpack_require__' is a proxy to Node 'require'
 // The below code is to ensure that the server is run only when not requiring the bundle.
--- a/src/app/app-routing-paths.ts
+++ b/src/app/app-routing-paths.ts
@@ -122,3 +122,5 @@ export const REQUEST_COPY_MODULE_PATH = 'request-a-copy';
 export function getRequestCopyModulePath() {
  return `/${REQUEST_COPY_MODULE_PATH}`;
 }
+
+export const HEALTH_PAGE_PATH = 'health';
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,13 +3,16 @@ import { RouterModule, NoPreloading } from '@angular/router';
 import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';

 import { AuthenticatedGuard } from './core/auth/authenticated.guard';
-import { SiteAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
+import {
+  SiteAdministratorGuard
+} from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 import {
  ACCESS_CONTROL_MODULE_PATH,
  ADMIN_MODULE_PATH,
  BITSTREAM_MODULE_PATH,
  FORBIDDEN_PATH,
  FORGOT_PASSWORD_PATH,
+  HEALTH_PAGE_PATH,
  INFO_MODULE_PATH,
  INTERNAL_SERVER_ERROR,
  LEGACY_BITSTREAM_MODULE_PATH,
@@ -27,8 +30,12 @@ import { EndUserAgreementCurrentUserGuard } from './core/end-user-agreement/end-
 import { SiteRegisterGuard } from './core/data/feature-authorization/feature-authorization-guard/site-register.guard';
 import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
 import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
-import { GroupAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
-import { ThemedPageInternalServerErrorComponent } from './page-internal-server-error/themed-page-internal-server-error.component';
+import {
+  GroupAdministratorGuard
+} from './core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
+import {
+  ThemedPageInternalServerErrorComponent
+} from './page-internal-server-error/themed-page-internal-server-error.component';
 import { ServerCheckGuard } from './core/server-check/server-check.guard';
 import { MenuResolver } from './menu.resolver';

@@ -210,6 +217,11 @@ import { MenuResolver } from './menu.resolver';
            loadChildren: () => import('./statistics-page/statistics-page-routing.module')
              .then((m) => m.StatisticsPageRoutingModule)
          },
+          {
+            path: HEALTH_PAGE_PATH,
+            loadChildren: () => import('./health-page/health-page.module')
+              .then((m) => m.HealthPageModule)
+          },
          {
            path: ACCESS_CONTROL_MODULE_PATH,
            loadChildren: () => import('./access-control/access-control.module').then((m) => m.AccessControlModule),
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -12,6 +12,7 @@ import {
 } from '@angular/core';
 import {
  ActivatedRouteSnapshot,
+  ActivationEnd,
  NavigationCancel,
  NavigationEnd,
  NavigationStart, ResolveEnd,
@@ -196,30 +197,30 @@ export class AppComponent implements OnInit, AfterViewInit {
  }

  ngAfterViewInit() {
-    let resolveEndFound = false;
+    let updatingTheme = false;
+    let snapshot: ActivatedRouteSnapshot;
+
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart) {
-        resolveEndFound = false;
+        updatingTheme = false;
        this.distinctNext(this.isRouteLoading$, true);
-      } else  if (event instanceof ResolveEnd) {
-        resolveEndFound = true;
-        const activatedRouteSnapShot: ActivatedRouteSnapshot = event.state.root;
-        this.themeService.updateThemeOnRouteChange$(event.urlAfterRedirects, activatedRouteSnapShot).pipe(
-          switchMap((changed) => {
-            if (changed) {
-              return this.isThemeCSSLoading$;
-            } else {
-              return [false];
-            }
-          })
-        ).subscribe((changed) => {
-          this.distinctNext(this.isThemeLoading$, changed);
-        });
-      } else if (
-        event instanceof NavigationEnd ||
-        event instanceof NavigationCancel
-      ) {
-        if (!resolveEndFound) {
+      } else if (event instanceof ResolveEnd) {
+        // this is the earliest point where we have all the information we need
+        // to update the theme, but this event is not emitted on first load
+        this.updateTheme(event.urlAfterRedirects, event.state.root);
+        updatingTheme = true;
+      } else if (!updatingTheme && event instanceof ActivationEnd) {
+        // if there was no ResolveEnd, keep track of the snapshot...
+        snapshot = event.snapshot;
+      } else if (event instanceof NavigationEnd) {
+        if (!updatingTheme) {
+          // ...and use it to update the theme on NavigationEnd instead
+          this.updateTheme(event.urlAfterRedirects, snapshot);
+          updatingTheme = true;
+        }
+        this.distinctNext(this.isRouteLoading$, false);
+      } else if (event instanceof NavigationCancel) {
+        if (!updatingTheme) {
          this.distinctNext(this.isThemeLoading$, false);
        }
        this.distinctNext(this.isRouteLoading$, false);
@@ -227,6 +228,26 @@ export class AppComponent implements OnInit, AfterViewInit {
    });
  }

+  /**
+   * Update the theme according to the current route, if applicable.
+   * @param urlAfterRedirects the current URL after redirects
+   * @param snapshot          the current route snapshot
+   * @private
+   */
+  private updateTheme(urlAfterRedirects: string, snapshot: ActivatedRouteSnapshot): void {
+    this.themeService.updateThemeOnRouteChange$(urlAfterRedirects, snapshot).pipe(
+      switchMap((changed) => {
+        if (changed) {
+          return this.isThemeCSSLoading$;
+        } else {
+          return [false];
+        }
+      })
+    ).subscribe((changed) => {
+      this.distinctNext(this.isThemeLoading$, changed);
+    });
+  }
+
  @HostListener('window:resize', ['$event'])
  public onResize(event): void {
    this.dispatchWindowSize(event.target.innerWidth, event.target.innerHeight);
--- a/src/app/core/submission/models/sherpa-policies-details.model.ts
+++ b/src/app/core/submission/models/sherpa-policies-details.model.ts
@@ -0,0 +1,89 @@
+/**
+ * An interface to represent an access condition.
+ */
+export class SherpaPoliciesDetailsObject {
+
+  /**
+   * The sherpa policies error
+   */
+  error: boolean;
+
+  /**
+   * The sherpa policies journal details
+   */
+  journals: Journal[];
+
+  /**
+   * The sherpa policies message
+   */
+  message: string;
+
+  /**
+   * The sherpa policies metadata
+   */
+  metadata: Metadata;
+
+}
+
+
+export interface Metadata {
+  id: number;
+  uri: string;
+  dateCreated: string;
+  dateModified: string;
+  inDOAJ: boolean;
+  publiclyVisible: boolean;
+}
+
+
+export interface Journal {
+  titles: string[];
+  url: string;
+  issns: string[];
+  romeoPub: string;
+  zetoPub: string;
+  inDOAJ: boolean;
+  publisher: Publisher;
+  publishers: Publisher[];
+  policies: Policy[];
+}
+
+export interface Publisher {
+  name: string;
+  relationshipType: string;
+  country: string;
+  uri: string;
+  identifier: string;
+  paidAccessDescription: string;
+  paidAccessUrl: string;
+  publicationCount: number;
+}
+
+export interface Policy {
+  id: number;
+  openAccessPermitted: boolean;
+  uri: string;
+  internalMoniker: string;
+  permittedVersions: PermittedVersions[];
+  urls: any;
+  publicationCount: number;
+  preArchiving: string;
+  postArchiving: string;
+  pubArchiving: string;
+  openAccessProhibited: boolean;
+}
+
+export interface PermittedVersions {
+  articleVersion: string;
+  option: number;
+  conditions: string[];
+  prerequisites: string[];
+  locations: string[];
+  licenses: string[];
+  embargo: Embargo;
+}
+
+export interface Embargo {
+  units: any;
+  amount: any;
+}
--- a/src/app/core/submission/models/workspaceitem-section-sherpa-policies.model.ts
+++ b/src/app/core/submission/models/workspaceitem-section-sherpa-policies.model.ts
@@ -0,0 +1,22 @@
+import { SherpaPoliciesDetailsObject } from './sherpa-policies-details.model';
+
+/**
+ * An interface to represent the submission's item accesses condition.
+ */
+export interface WorkspaceitemSectionSherpaPoliciesObject {
+
+  /**
+   * The access condition id
+   */
+  id: string;
+
+  /**
+   * The sherpa policies retrievalTime
+   */
+  retrievalTime: string;
+
+  /**
+   * The sherpa policies details
+   */
+  sherpaResponse: SherpaPoliciesDetailsObject;
+}
--- a/src/app/core/submission/models/workspaceitem-sections.model.ts
+++ b/src/app/core/submission/models/workspaceitem-sections.model.ts
@@ -3,6 +3,7 @@ import { WorkspaceitemSectionFormObject } from './workspaceitem-section-form.mod
 import { WorkspaceitemSectionLicenseObject } from './workspaceitem-section-license.model';
 import { WorkspaceitemSectionUploadObject } from './workspaceitem-section-upload.model';
 import { WorkspaceitemSectionCcLicenseObject } from './workspaceitem-section-cc-license.model';
+import { WorkspaceitemSectionSherpaPoliciesObject } from './workspaceitem-section-sherpa-policies.model';

 /**
 * An interface to represent submission's section object.
@@ -21,4 +22,5 @@ export type WorkspaceitemSectionDataType
  | WorkspaceitemSectionLicenseObject
  | WorkspaceitemSectionCcLicenseObject
  | WorkspaceitemSectionAccessesObject
+  | WorkspaceitemSectionSherpaPoliciesObject
  | string;
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.html
+++ b/src/app/health-page/health-info/health-info-component/health-info-component.component.html
@@ -0,0 +1,27 @@
+<div *ngFor="let entry of healthInfoComponent | dsObjNgFor" data-test="collapse">
+  <div *ngIf="entry && !isPlainProperty(entry.value)" class="mb-3 border-bottom">
+    <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+      <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
+              aria-controls="collapseExample">
+        {{ entry.key | titlecase }}
+      </button>
+      <div class="d-inline-block">
+        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+      </div>
+    </div>
+    <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+      <div class="card border-0">
+        <div class="card-body">
+          <ds-health-info-component [healthInfoComponent]="entry.value"
+                                    [healthInfoComponentName]="entry.key"
+                                    [isNested]="true"
+                                    data-test="info-component"></ds-health-info-component>
+        </div>
+      </div>
+    </div>
+  </div>
+  <ng-container *ngIf="entry && isPlainProperty(entry.value)">
+    <p data-test="property"> <span class="font-weight-bold">{{ getPropertyLabel(entry.key) | titlecase }}</span> : {{entry.value}}</p>
+  </ng-container>
+</div>
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.scss
+++ b/src/app/health-page/health-info/health-info-component/health-info-component.component.scss
@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.spec.ts
+++ b/src/app/health-page/health-info/health-info-component/health-info-component.component.spec.ts
@@ -0,0 +1,82 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { HealthInfoComponentComponent } from './health-info-component.component';
+import { HealthInfoComponentOne, HealthInfoComponentTwo } from '../../../shared/mocks/health-endpoint.mocks';
+import { ObjNgFor } from '../../../shared/utils/object-ngfor.pipe';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+
+describe('HealthInfoComponentComponent', () => {
+  let component: HealthInfoComponentComponent;
+  let fixture: ComponentFixture<HealthInfoComponentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        NgbCollapseModule,
+        NoopAnimationsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
+      declarations: [
+        HealthInfoComponentComponent,
+        ObjNgFor
+      ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthInfoComponentComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('when has nested components', () => {
+    beforeEach(() => {
+      component.healthInfoComponentName = 'App';
+      component.healthInfoComponent = HealthInfoComponentOne;
+      component.isCollapsed = false;
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should display property', () => {
+      const properties = fixture.debugElement.queryAll(By.css('[data-test="property"]'));
+      expect(properties.length).toBe(14);
+      const components = fixture.debugElement.queryAll(By.css('[data-test="info-component"]'));
+      expect(components.length).toBe(4);
+    });
+
+  });
+
+  describe('when has plain properties', () => {
+    beforeEach(() => {
+      component.healthInfoComponentName = 'Java';
+      component.healthInfoComponent = HealthInfoComponentTwo;
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should display property', () => {
+      const property = fixture.debugElement.queryAll(By.css('[data-test="property"]'));
+      expect(property.length).toBe(1);
+    });
+
+  });
+});
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.ts
+++ b/src/app/health-page/health-info/health-info-component/health-info-component.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+
+import { HealthInfoComponent } from '../../models/health-component.model';
+import { HealthComponentComponent } from '../../health-panel/health-component/health-component.component';
+
+/**
+ * Shows a health info object
+ */
+@Component({
+  selector: 'ds-health-info-component',
+  templateUrl: './health-info-component.component.html',
+  styleUrls: ['./health-info-component.component.scss']
+})
+export class HealthInfoComponentComponent extends HealthComponentComponent {
+
+  /**
+   * The HealthInfoComponent object to display
+   */
+  @Input() healthInfoComponent: HealthInfoComponent|string;
+
+  /**
+   * The HealthInfoComponent object name
+   */
+  @Input() healthInfoComponentName: string;
+
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  @Input() isNested = false;
+
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  public isCollapsed = false;
+
+  /**
+   * Check if the HealthInfoComponent is has only string property or contains object
+   *
+   * @param entry The HealthInfoComponent to check
+   * @return boolean
+   */
+  isPlainProperty(entry: HealthInfoComponent | string): boolean {
+    return typeof entry === 'string';
+  }
+
+}
--- a/src/app/health-page/health-info/health-info.component.html
+++ b/src/app/health-page/health-info/health-info.component.html
@@ -0,0 +1,25 @@
+<ng-container *ngIf="healthInfoResponse">
+  <ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
+    <ngb-panel [id]="entry.key" *ngFor="let entry of healthInfoResponse | dsObjNgFor">
+      <ng-template ngbPanelHeader>
+        <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="info-component">
+          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded(entry.key)"
+                  aria-controls="collapsePanels">
+            {{ getPanelLabel(entry.key) | titlecase }}
+          </button>
+          <div class="text-right d-flex">
+            <ds-health-status [status]="entry.value?.status"></ds-health-status>
+            <div class="ml-3 d-inline-block">
+              <span *ngIf="acc.isExpanded(entry.key)" class="fas fa-chevron-up fa-fw"></span>
+              <span *ngIf="!acc.isExpanded(entry.key)" class="fas fa-chevron-down fa-fw"></span>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+      <ng-template ngbPanelContent>
+        <ds-health-info-component [healthInfoComponentName]="entry.key"
+                                  [healthInfoComponent]="entry.value"></ds-health-info-component>
+      </ng-template>
+    </ngb-panel>
+  </ngb-accordion>
+</ng-container>
--- a/src/app/health-page/health-info/health-info.component.scss
+++ b/src/app/health-page/health-info/health-info.component.scss
@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}
--- a/src/app/health-page/health-info/health-info.component.spec.ts
+++ b/src/app/health-page/health-info/health-info.component.spec.ts
@@ -0,0 +1,51 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HealthInfoComponent } from './health-info.component';
+import { HealthInfoResponseObj } from '../../shared/mocks/health-endpoint.mocks';
+import { ObjNgFor } from '../../shared/utils/object-ngfor.pipe';
+import { By } from '@angular/platform-browser';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+
+describe('HealthInfoComponent', () => {
+  let component: HealthInfoComponent;
+  let fixture: ComponentFixture<HealthInfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgbAccordionModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
+      declarations: [
+        HealthInfoComponent,
+        ObjNgFor
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthInfoComponent);
+    component = fixture.componentInstance;
+    component.healthInfoResponse = HealthInfoResponseObj;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create info component properly', () => {
+    const components = fixture.debugElement.queryAll(By.css('[data-test="info-component"]'));
+    expect(components.length).toBe(3);
+  });
+});
--- a/src/app/health-page/health-info/health-info.component.ts
+++ b/src/app/health-page/health-info/health-info.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { HealthInfoResponse } from '../models/health-component.model';
+
+/**
+ * A component to render a "health-info component" object.
+ *
+ * Note that the word "component" in "health-info component" doesn't refer to Angular use of the term
+ * but rather to the components used in the response of the health endpoint of Spring's Actuator
+ * API.
+ */
+@Component({
+  selector: 'ds-health-info',
+  templateUrl: './health-info.component.html',
+  styleUrls: ['./health-info.component.scss']
+})
+export class HealthInfoComponent implements OnInit  {
+
+  @Input() healthInfoResponse: HealthInfoResponse;
+
+  /**
+   * The first active panel id
+   */
+  activeId: string;
+
+  constructor(private translate: TranslateService) {
+  }
+
+  ngOnInit(): void {
+    this.activeId = Object.keys(this.healthInfoResponse)[0];
+  }
+
+  /**
+   * Return translated label if exist for the given property
+   *
+   * @param panelKey
+   */
+  public getPanelLabel(panelKey: string): string {
+    const translationKey = `health-page.section-info.${panelKey}.title`;
+    const translation = this.translate.instant(translationKey);
+
+    return (translation === translationKey) ? panelKey : translation;
+  }
+}
--- a/src/app/health-page/health-page.component.html
+++ b/src/app/health-page/health-page.component.html
@@ -0,0 +1,27 @@
+<div class="container" *ngIf="(healthResponseInitialised | async) && (healthInfoResponseInitialised | async)">
+  <h2>{{'health-page.heading' | translate}}</h2>
+  <div *ngIf="(healthResponse | async) && (healthInfoResponse | async)">
+    <ul ngbNav #nav="ngbNav" [activeId]="'status'" class="nav-tabs">
+      <li [ngbNavItem]="'status'">
+        <a ngbNavLink>{{'health-page.status-tab' | translate}}</a>
+        <ng-template ngbNavContent>
+          <div id="status">
+            <ds-health-panel [healthResponse]="(healthResponse | async)"></ds-health-panel>
+          </div>
+        </ng-template>
+      </li>
+      <li [ngbNavItem]="'info'">
+        <a ngbNavLink>{{'health-page.info-tab' | translate}}</a>
+        <ng-template ngbNavContent>
+          <div id="info">
+            <ds-health-info [healthInfoResponse]="(healthInfoResponse | async)"></ds-health-info>
+          </div>
+        </ng-template>
+      </li>
+    </ul>
+    <div [ngbNavOutlet]="nav" class="mt-2"></div>
+  </div>
+  <ds-alert *ngIf="!(healthResponse | async) || !(healthInfoResponse | async)" [type]="'alert-danger'" [content]="'health-page.error.msg'"></ds-alert>
+</div>
+
+
--- a/src/app/health-page/health-page.component.scss
+++ b/src/app/health-page/health-page.component.scss
--- a/src/app/health-page/health-page.component.spec.ts
+++ b/src/app/health-page/health-page.component.spec.ts
@@ -0,0 +1,72 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { By } from '@angular/platform-browser';
+
+import { of } from 'rxjs';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+
+import { HealthPageComponent } from './health-page.component';
+import { HealthService } from './health.service';
+import { HealthInfoResponseObj, HealthResponseObj } from '../shared/mocks/health-endpoint.mocks';
+import { RawRestResponse } from '../core/dspace-rest/raw-rest-response.model';
+import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
+
+describe('HealthPageComponent', () => {
+  let component: HealthPageComponent;
+  let fixture: ComponentFixture<HealthPageComponent>;
+
+  const healthService = jasmine.createSpyObj('healthDataService', {
+    getHealth: jasmine.createSpy('getHealth'),
+    getInfo: jasmine.createSpy('getInfo'),
+  });
+
+  const healthRestResponse$ = of({
+    payload: HealthResponseObj,
+    statusCode: 200,
+    statusText: 'OK'
+  } as RawRestResponse);
+
+  const healthInfoRestResponse$ = of({
+    payload: HealthInfoResponseObj,
+    statusCode: 200,
+    statusText: 'OK'
+  } as RawRestResponse);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        NgbNavModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
+      declarations: [ HealthPageComponent ],
+      providers: [
+        { provide: HealthService, useValue: healthService }
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthPageComponent);
+    component = fixture.componentInstance;
+    healthService.getHealth.and.returnValue(healthRestResponse$);
+    healthService.getInfo.and.returnValue(healthInfoRestResponse$);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create nav items properly', () => {
+    const navItems = fixture.debugElement.queryAll(By.css('li.nav-item'));
+    expect(navItems.length).toBe(2);
+  });
+});
--- a/src/app/health-page/health-page.component.ts
+++ b/src/app/health-page/health-page.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+
+import { BehaviorSubject } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { HealthService } from './health.service';
+import { HealthInfoResponse, HealthResponse } from './models/health-component.model';
+
+@Component({
+  selector: 'ds-health-page',
+  templateUrl: './health-page.component.html',
+  styleUrls: ['./health-page.component.scss']
+})
+export class HealthPageComponent implements OnInit {
+
+  /**
+   * Health info endpoint response
+   */
+  healthInfoResponse: BehaviorSubject<HealthInfoResponse> = new BehaviorSubject<HealthInfoResponse>(null);
+
+  /**
+   * Health endpoint response
+   */
+  healthResponse: BehaviorSubject<HealthResponse> = new BehaviorSubject<HealthResponse>(null);
+
+  /**
+   * Represent if the response from health status endpoint is already retrieved or not
+   */
+  healthResponseInitialised: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /**
+   * Represent if the response from health info endpoint is already retrieved or not
+   */
+  healthInfoResponseInitialised: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  constructor(private healthDataService: HealthService) {
+  }
+
+  /**
+   * Retrieve responses from rest
+   */
+  ngOnInit(): void {
+    this.healthDataService.getHealth().pipe(take(1)).subscribe({
+      next: (data: any) => {
+        this.healthResponse.next(data.payload);
+        this.healthResponseInitialised.next(true);
+      },
+      error: () => {
+        this.healthResponse.next(null);
+        this.healthResponseInitialised.next(true);
+      }
+    });
+
+    this.healthDataService.getInfo().pipe(take(1)).subscribe({
+      next: (data: any) => {
+        this.healthInfoResponse.next(data.payload);
+        this.healthInfoResponseInitialised.next(true);
+      },
+      error: () => {
+        this.healthInfoResponse.next(null);
+        this.healthInfoResponseInitialised.next(true);
+      }
+    });
+
+  }
+}
--- a/src/app/health-page/health-page.module.ts
+++ b/src/app/health-page/health-page.module.ts
@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { HealthPageRoutingModule } from './health-page.routing.module';
+import { HealthPanelComponent } from './health-panel/health-panel.component';
+import { HealthStatusComponent } from './health-panel/health-status/health-status.component';
+import { SharedModule } from '../shared/shared.module';
+import { HealthPageComponent } from './health-page.component';
+import { HealthComponentComponent } from './health-panel/health-component/health-component.component';
+import { HealthInfoComponent } from './health-info/health-info.component';
+import { HealthInfoComponentComponent } from './health-info/health-info-component/health-info-component.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HealthPageRoutingModule,
+    NgbModule,
+    SharedModule,
+    TranslateModule
+  ],
+  declarations: [
+    HealthPageComponent,
+    HealthPanelComponent,
+    HealthStatusComponent,
+    HealthComponentComponent,
+    HealthInfoComponent,
+    HealthInfoComponentComponent,
+  ]
+})
+export class HealthPageModule {
+}
--- a/src/app/health-page/health-page.routing.module.ts
+++ b/src/app/health-page/health-page.routing.module.ts
@@ -0,0 +1,28 @@
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { HealthPageComponent } from './health-page.component';
+import {
+  SiteAdministratorGuard
+} from '../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        resolve: { breadcrumb: I18nBreadcrumbResolver },
+        data: {
+          breadcrumbKey: 'health',
+          title: 'health-page.title',
+        },
+        canActivate: [SiteAdministratorGuard],
+        component: HealthPageComponent
+      }
+    ])
+  ]
+})
+export class HealthPageRoutingModule {
+
+}
--- a/src/app/health-page/health-panel/health-component/health-component.component.html
+++ b/src/app/health-page/health-panel/health-component/health-component.component.html
@@ -0,0 +1,30 @@
+<ng-container *ngIf="healthComponent?.components">
+  <div *ngFor="let entry of healthComponent?.components | dsObjNgFor" class="mb-3 border-bottom" data-test="collapse">
+    <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+      <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
+              aria-controls="collapseExample">
+        {{ entry.key | titlecase }}
+      </button>
+      <div class="d-inline-block">
+        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+      </div>
+    </div>
+    <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+      <div class="card border-0">
+        <div class="card-body">
+          <ds-health-component [healthComponent]="entry.value"
+                               [healthComponentName]="entry.key"></ds-health-component>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-container>
+<ng-container *ngIf="healthComponent?.details">
+  <div *ngFor="let item of healthComponent?.details | dsObjNgFor" data-test="details">
+    <p data-test="property"><span class="font-weight-bold">{{ getPropertyLabel(item.key) | titlecase }}</span> : {{item.value}}</p>
+  </div>
+</ng-container>
+<ng-container *ngIf="!healthComponent?.details && !healthComponent?.components">
+  <ds-alert [content]="'health-page.section.no-issues'" [type]="AlertTypeEnum.Info"></ds-alert>
+</ng-container>
--- a/src/app/health-page/health-panel/health-component/health-component.component.scss
+++ b/src/app/health-page/health-panel/health-component/health-component.component.scss
@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}
--- a/src/app/health-page/health-panel/health-component/health-component.component.spec.ts
+++ b/src/app/health-page/health-panel/health-component/health-component.component.spec.ts
@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { HealthComponentComponent } from './health-component.component';
+import { HealthComponentOne, HealthComponentTwo } from '../../../shared/mocks/health-endpoint.mocks';
+import { ObjNgFor } from '../../../shared/utils/object-ngfor.pipe';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+
+describe('HealthComponentComponent', () => {
+  let component: HealthComponentComponent;
+  let fixture: ComponentFixture<HealthComponentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        NgbCollapseModule,
+        NoopAnimationsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
+      declarations: [
+        HealthComponentComponent,
+        ObjNgFor
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthComponentComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('when has nested components', () => {
+    beforeEach(() => {
+      component.healthComponentName = 'db';
+      component.healthComponent = HealthComponentOne;
+      component.isCollapsed = false;
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should create collapsible divs properly', () => {
+      const collapseDivs = fixture.debugElement.queryAll(By.css('[data-test="collapse"]'));
+      expect(collapseDivs.length).toBe(2);
+      const detailsDivs = fixture.debugElement.queryAll(By.css('[data-test="details"]'));
+      expect(detailsDivs.length).toBe(6);
+    });
+  });
+
+  describe('when has details', () => {
+    beforeEach(() => {
+      component.healthComponentName = 'geoIp';
+      component.healthComponent = HealthComponentTwo;
+
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should create detail divs properly', () => {
+      const detailsDivs = fixture.debugElement.queryAll(By.css('[data-test="details"]'));
+      expect(detailsDivs.length).toBe(1);
+      const collapseDivs = fixture.debugElement.queryAll(By.css('[data-test="collapse"]'));
+      expect(collapseDivs.length).toBe(0);
+    });
+  });
+});
--- a/src/app/health-page/health-panel/health-component/health-component.component.ts
+++ b/src/app/health-page/health-panel/health-component/health-component.component.ts
@@ -0,0 +1,53 @@
+import { Component, Input } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { HealthComponent } from '../../models/health-component.model';
+import { AlertType } from '../../../shared/alert/aletr-type';
+
+/**
+ * A component to render a "health component" object.
+ *
+ * Note that the word "component" in "health component" doesn't refer to Angular use of the term
+ * but rather to the components used in the response of the health endpoint of Spring's Actuator
+ * API.
+ */
+@Component({
+  selector: 'ds-health-component',
+  templateUrl: './health-component.component.html',
+  styleUrls: ['./health-component.component.scss']
+})
+export class HealthComponentComponent {
+
+  /**
+   * The HealthComponent object to display
+   */
+  @Input() healthComponent: HealthComponent;
+
+  /**
+   * The HealthComponent object name
+   */
+  @Input() healthComponentName: string;
+
+  public AlertTypeEnum = AlertType;
+
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  public isCollapsed = false;
+
+  constructor(private translate: TranslateService) {
+  }
+
+  /**
+   * Return translated label if exist for the given property
+   *
+   * @param property
+   */
+  public getPropertyLabel(property: string): string {
+    const translationKey = `health-page.property.${property}`;
+    const translation = this.translate.instant(translationKey);
+
+    return (translation === translationKey) ? property : translation;
+  }
+}
--- a/src/app/health-page/health-panel/health-panel.component.html
+++ b/src/app/health-page/health-panel/health-panel.component.html
@@ -0,0 +1,25 @@
+<p class="h4">{{'health-page.status' | translate}} : <ds-health-status [status]="healthResponse.status"></ds-health-status></p>
+<ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
+  <ngb-panel [id]="entry.key" *ngFor="let entry of healthResponse.components | dsObjNgFor">
+    <ng-template ngbPanelHeader>
+      <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="component">
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded(entry.key)"
+                aria-controls="collapsePanels">
+          {{ getPanelLabel(entry.key) | titlecase }}
+        </button>
+        <div class="text-right d-flex">
+          <ds-health-status [status]="entry.value?.status"></ds-health-status>
+          <div class="ml-3 d-inline-block">
+            <span *ngIf="acc.isExpanded(entry.key)" class="fas fa-chevron-up fa-fw"></span>
+            <span *ngIf="!acc.isExpanded(entry.key)" class="fas fa-chevron-down fa-fw"></span>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+    <ng-template ngbPanelContent>
+      <ds-health-component [healthComponent]="entry.value" [healthComponentName]="entry.key"></ds-health-component>
+    </ng-template>
+  </ngb-panel>
+</ngb-accordion>
+
+
--- a/src/app/health-page/health-panel/health-panel.component.scss
+++ b/src/app/health-page/health-panel/health-panel.component.scss
@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}
--- a/src/app/health-page/health-panel/health-panel.component.spec.ts
+++ b/src/app/health-page/health-panel/health-panel.component.spec.ts
@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { NgbAccordionModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { HealthPanelComponent } from './health-panel.component';
+import { HealthResponseObj } from '../../shared/mocks/health-endpoint.mocks';
+import { ObjNgFor } from '../../shared/utils/object-ngfor.pipe';
+
+describe('HealthPanelComponent', () => {
+  let component: HealthPanelComponent;
+  let fixture: ComponentFixture<HealthPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgbNavModule,
+        NgbAccordionModule,
+        CommonModule,
+        BrowserAnimationsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+      ],
+      declarations: [
+        HealthPanelComponent,
+        ObjNgFor
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthPanelComponent);
+    component = fixture.componentInstance;
+    component.healthResponse = HealthResponseObj;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render a panel for each component', () => {
+    const components = fixture.debugElement.queryAll(By.css('[data-test="component"]'));
+    expect(components.length).toBe(5);
+  });
+
+});
--- a/src/app/health-page/health-panel/health-panel.component.ts
+++ b/src/app/health-page/health-panel/health-panel.component.ts
@@ -0,0 +1,45 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { HealthResponse } from '../models/health-component.model';
+
+/**
+ * Show the health panel
+ */
+@Component({
+  selector: 'ds-health-panel',
+  templateUrl: './health-panel.component.html',
+  styleUrls: ['./health-panel.component.scss']
+})
+export class HealthPanelComponent implements OnInit {
+
+  /**
+   * Health endpoint response
+   */
+  @Input() healthResponse: HealthResponse;
+
+  /**
+   * The first active panel id
+   */
+  activeId: string;
+
+  constructor(private translate: TranslateService) {
+  }
+
+  ngOnInit(): void {
+    this.activeId = Object.keys(this.healthResponse.components)[0];
+  }
+
+  /**
+   * Return translated label if exist for the given property
+   *
+   * @param panelKey
+   */
+  public getPanelLabel(panelKey: string): string {
+    const translationKey = `health-page.section.${panelKey}.title`;
+    const translation = this.translate.instant(translationKey);
+
+    return (translation === translationKey) ? panelKey : translation;
+  }
+}
--- a/src/app/health-page/health-panel/health-status/health-status.component.html
+++ b/src/app/health-page/health-panel/health-status/health-status.component.html
@@ -0,0 +1,12 @@
+<ng-container [ngSwitch]="status">
+  <i *ngSwitchCase="HealthStatus.UP"
+     class="fa fa-check-circle text-success ml-2 mt-1"
+     ngbTooltip="{{'health-page.status.ok.info' | translate}}" container="body" ></i>
+  <i *ngSwitchCase="HealthStatus.UP_WITH_ISSUES"
+     class="fa fa-exclamation-triangle text-warning ml-2 mt-1"
+     ngbTooltip="{{'health-page.status.warning.info' | translate}}" container="body"></i>
+  <i *ngSwitchCase="HealthStatus.DOWN"
+     class="fa fa-times-circle text-danger ml-2 mt-1"
+     ngbTooltip="{{'health-page.status.error.info' | translate}}" container="body"></i>
+
+</ng-container>
--- a/src/app/health-page/health-panel/health-status/health-status.component.scss
+++ b/src/app/health-page/health-panel/health-status/health-status.component.scss
--- a/src/app/health-page/health-panel/health-status/health-status.component.spec.ts
+++ b/src/app/health-page/health-panel/health-status/health-status.component.spec.ts
@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { HealthStatusComponent } from './health-status.component';
+import { HealthStatus } from '../../models/health-component.model';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+
+describe('HealthStatusComponent', () => {
+  let component: HealthStatusComponent;
+  let fixture: ComponentFixture<HealthStatusComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgbTooltipModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
+      declarations: [ HealthStatusComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create success icon', () => {
+    component.status = HealthStatus.UP;
+    fixture.detectChanges();
+    const icon = fixture.debugElement.query(By.css('i.text-success'));
+    expect(icon).toBeTruthy();
+  });
+
+  it('should create warning icon', () => {
+    component.status = HealthStatus.UP_WITH_ISSUES;
+    fixture.detectChanges();
+    const icon = fixture.debugElement.query(By.css('i.text-warning'));
+    expect(icon).toBeTruthy();
+  });
+
+  it('should create success icon', () => {
+    component.status = HealthStatus.DOWN;
+    fixture.detectChanges();
+    const icon = fixture.debugElement.query(By.css('i.text-danger'));
+    expect(icon).toBeTruthy();
+  });
+});
--- a/src/app/health-page/health-panel/health-status/health-status.component.ts
+++ b/src/app/health-page/health-panel/health-status/health-status.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { HealthStatus } from '../../models/health-component.model';
+
+/**
+ * Show a health status object
+ */
+@Component({
+  selector: 'ds-health-status',
+  templateUrl: './health-status.component.html',
+  styleUrls: ['./health-status.component.scss']
+})
+export class HealthStatusComponent {
+  /**
+   * The current status to show
+   */
+  @Input() status: HealthStatus;
+
+  /**
+   * He
+   */
+  HealthStatus = HealthStatus;
+
+}
--- a/src/app/health-page/health.service.ts
+++ b/src/app/health-page/health.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { DspaceRestService } from '../core/dspace-rest/dspace-rest.service';
+import { RawRestResponse } from '../core/dspace-rest/raw-rest-response.model';
+import { HALEndpointService } from '../core/shared/hal-endpoint.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class HealthService {
+    constructor(protected halService: HALEndpointService,
+        protected restService: DspaceRestService) {
+        }
+    /**
+     * @returns health data
+     */
+    getHealth(): Observable<RawRestResponse> {
+       return this.halService.getEndpoint('/actuator').pipe(
+           map((restURL: string) => restURL + '/health'),
+           switchMap((endpoint: string) => this.restService.get(endpoint)));
+    }
+
+    /**
+     * @returns information of server
+     */
+    getInfo(): Observable<RawRestResponse> {
+        return this.halService.getEndpoint('/actuator').pipe(
+            map((restURL: string) => restURL + '/info'),
+            switchMap((endpoint: string) => this.restService.get(endpoint)));
+    }
+}
--- a/src/app/health-page/models/health-component.model.ts
+++ b/src/app/health-page/models/health-component.model.ts
@@ -0,0 +1,48 @@
+/**
+ * Interface for Health Status
+ */
+export enum HealthStatus {
+  UP = 'UP',
+  UP_WITH_ISSUES = 'UP_WITH_ISSUES',
+  DOWN = 'DOWN'
+}
+
+/**
+ * Interface describing the Health endpoint response
+ */
+export interface HealthResponse {
+  status: HealthStatus;
+  components: {
+    [name: string]: HealthComponent;
+  };
+}
+
+/**
+ * Interface describing a single component retrieved from the Health endpoint response
+ */
+export interface HealthComponent {
+  status: HealthStatus;
+  details?: {
+    [name: string]: number|string;
+  };
+  components?: {
+    [name: string]: HealthComponent;
+  };
+}
+
+/**
+ * Interface describing the Health info endpoint response
+ */
+export interface HealthInfoResponse {
+  [name: string]: HealthInfoComponent|string;
+}
+
+/**
+ * Interface describing a single component retrieved from the Health info endpoint response
+ */
+export interface HealthInfoComponent {
+  [property: string]: HealthInfoComponent|string;
+}
+
+
+
--- a/src/app/menu.resolver.ts
+++ b/src/app/menu.resolver.ts
@@ -15,18 +15,34 @@ import { MenuService } from './shared/menu/menu.service';
 import { filter, find, map, take } from 'rxjs/operators';
 import { hasValue } from './shared/empty.util';
 import { FeatureID } from './core/data/feature-authorization/feature-id';
-import { CreateCommunityParentSelectorComponent } from './shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component';
+import {
+  CreateCommunityParentSelectorComponent
+} from './shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component';
 import { OnClickMenuItemModel } from './shared/menu/menu-item/models/onclick.model';
-import { CreateCollectionParentSelectorComponent } from './shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component';
-import { CreateItemParentSelectorComponent } from './shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component';
-import { EditCommunitySelectorComponent } from './shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component';
-import { EditCollectionSelectorComponent } from './shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component';
-import { EditItemSelectorComponent } from './shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component';
-import { ExportMetadataSelectorComponent } from './shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component';
+import {
+  CreateCollectionParentSelectorComponent
+} from './shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component';
+import {
+  CreateItemParentSelectorComponent
+} from './shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component';
+import {
+  EditCommunitySelectorComponent
+} from './shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component';
+import {
+  EditCollectionSelectorComponent
+} from './shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component';
+import {
+  EditItemSelectorComponent
+} from './shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component';
+import {
+  ExportMetadataSelectorComponent
+} from './shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component';
 import { AuthorizationDataService } from './core/data/feature-authorization/authorization-data.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import {
-  METADATA_EXPORT_SCRIPT_NAME, METADATA_IMPORT_SCRIPT_NAME, ScriptDataService
+  METADATA_EXPORT_SCRIPT_NAME,
+  METADATA_IMPORT_SCRIPT_NAME,
+  ScriptDataService
 } from './core/data/processes/script-data.service';

 /**
@@ -321,6 +337,18 @@ export class MenuResolver implements Resolve<boolean> {
          icon: 'terminal',
          index: 10
        },
+        {
+          id: 'health',
+          active: false,
+          visible: isSiteAdmin,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.health',
+            link: '/health'
+          } as LinkMenuItemModel,
+          icon: 'heartbeat',
+          index: 11
+        },
      ];
      menuList.forEach((menuSection) => this.menuService.addSection(MenuID.ADMIN, Object.assign(menuSection, {
        shouldPersistOnRouteChange: true
--- a/src/app/shared/mocks/health-endpoint.mocks.ts
+++ b/src/app/shared/mocks/health-endpoint.mocks.ts
@@ -0,0 +1,160 @@
+import {
+  HealthComponent,
+  HealthInfoComponent,
+  HealthInfoResponse,
+  HealthResponse,
+  HealthStatus
+} from '../../health-page/models/health-component.model';
+
+export const HealthResponseObj: HealthResponse = {
+  'status': HealthStatus.UP_WITH_ISSUES,
+  'components': {
+    'db': {
+      'status': HealthStatus.UP,
+      'components': {
+        'dataSource': {
+          'status': HealthStatus.UP,
+          'details': {
+            'database': 'PostgreSQL',
+            'result': 1,
+            'validationQuery': 'SELECT 1'
+          }
+        },
+        'dspaceDataSource': {
+          'status': HealthStatus.UP,
+          'details': {
+            'database': 'PostgreSQL',
+            'result': 1,
+            'validationQuery': 'SELECT 1'
+          }
+        }
+      }
+    },
+    'geoIp': {
+      'status': HealthStatus.UP_WITH_ISSUES,
+      'details': {
+        'reason': 'The GeoLite Database file is missing (/var/lib/GeoIP/GeoLite2-City.mmdb)! Solr Statistics cannot generate location based reports! Please see the DSpace installation instructions for instructions to install this file.'
+      }
+    },
+    'solrOaiCore': {
+      'status': HealthStatus.UP,
+      'details': {
+        'status': 0,
+        'detectedPathType': 'particular core'
+      }
+    },
+    'solrSearchCore': {
+      'status': HealthStatus.UP,
+      'details': {
+        'status': 0,
+        'detectedPathType': 'particular core'
+      }
+    },
+    'solrStatisticsCore': {
+      'status': HealthStatus.UP,
+      'details': {
+        'status': 0,
+        'detectedPathType': 'particular core'
+      }
+    }
+  }
+};
+
+export const HealthComponentOne: HealthComponent = {
+  'status': HealthStatus.UP,
+  'components': {
+    'dataSource': {
+      'status': HealthStatus.UP,
+      'details': {
+        'database': 'PostgreSQL',
+        'result': 1,
+        'validationQuery': 'SELECT 1'
+      }
+    },
+    'dspaceDataSource': {
+      'status': HealthStatus.UP,
+      'details': {
+        'database': 'PostgreSQL',
+        'result': 1,
+        'validationQuery': 'SELECT 1'
+      }
+    }
+  }
+};
+
+export const HealthComponentTwo: HealthComponent = {
+  'status': HealthStatus.UP_WITH_ISSUES,
+  'details': {
+    'reason': 'The GeoLite Database file is missing (/var/lib/GeoIP/GeoLite2-City.mmdb)! Solr Statistics cannot generate location based reports! Please see the DSpace installation instructions for instructions to install this file.'
+  }
+};
+
+export const HealthInfoResponseObj: HealthInfoResponse = {
+  'app': {
+    'name': 'DSpace at My University',
+    'dir': '/home/giuseppe/development/java/install/dspace7-review',
+    'url': 'http://localhost:8080/server',
+    'db': 'jdbc:postgresql://localhost:5432/dspace7',
+    'solr': {
+      'server': 'http://localhost:8983/solr',
+      'prefix': ''
+    },
+    'mail': {
+      'server': 'smtp.example.com',
+      'from-address': 'dspace-noreply@myu.edu',
+      'feedback-recipient': 'dspace-help@myu.edu',
+      'mail-admin': 'dspace-help@myu.edu',
+      'mail-helpdesk': 'dspace-help@myu.edu',
+      'alert-recipient': 'dspace-help@myu.edu'
+    },
+    'cors': {
+      'allowed-origins': 'http://localhost:4000'
+    },
+    'ui': {
+      'url': 'http://localhost:4000'
+    }
+  },
+  'java': {
+    'vendor': 'Private Build',
+    'version': '11.0.15',
+    'runtime': {
+      'name': 'OpenJDK Runtime Environment',
+      'version': '11.0.15+10-Ubuntu-0ubuntu0.20.04.1'
+    },
+    'jvm': {
+      'name': 'OpenJDK 64-Bit Server VM',
+      'vendor': 'Private Build',
+      'version': '11.0.15+10-Ubuntu-0ubuntu0.20.04.1'
+    }
+  },
+  'version': '7.3-SNAPSHOT'
+};
+
+export const HealthInfoComponentOne: HealthInfoComponent = {
+  'name': 'DSpace at My University',
+  'dir': '/home/giuseppe/development/java/install/dspace7-review',
+  'url': 'http://localhost:8080/server',
+  'db': 'jdbc:postgresql://localhost:5432/dspace7',
+  'solr': {
+    'server': 'http://localhost:8983/solr',
+    'prefix': ''
+  },
+  'mail': {
+    'server': 'smtp.example.com',
+    'from-address': 'dspace-noreply@myu.edu',
+    'feedback-recipient': 'dspace-help@myu.edu',
+    'mail-admin': 'dspace-help@myu.edu',
+    'mail-helpdesk': 'dspace-help@myu.edu',
+    'alert-recipient': 'dspace-help@myu.edu'
+  },
+  'cors': {
+    'allowed-origins': 'http://localhost:4000'
+  },
+  'ui': {
+    'url': 'http://localhost:4000'
+  }
+};
+
+export const HealthInfoComponentTwo = {
+  'version': '7.3-SNAPSHOT'
+};
--- a/src/app/shared/mocks/section-sherpa-policies.service.mock.ts
+++ b/src/app/shared/mocks/section-sherpa-policies.service.mock.ts
@@ -0,0 +1,101 @@
+import {
+  WorkspaceitemSectionSherpaPoliciesObject
+} from '../../core/submission/models/workspaceitem-section-sherpa-policies.model';
+
+export const SherpaDataResponse = {
+  'id': 'sherpaPolicies',
+  'retrievalTime': '2022-04-20T09:44:39.870+00:00',
+  'sherpaResponse':
+  {
+    'error': false,
+    'message': null,
+    'metadata': {
+      'id': 23803,
+      'uri': 'http://v2.sherpa.ac.uk/id/publication/23803',
+      'dateCreated': '2012-11-20 14:51:52',
+      'dateModified': '2020-03-06 11:25:54',
+      'inDOAJ': false,
+      'publiclyVisible': true
+    },
+    'journals': [{
+      'titles': ['The Lancet', 'Lancet'],
+      'url': 'http://www.thelancet.com/journals/lancet/issue/current',
+      'issns': ['0140-6736', '1474-547X'],
+      'romeoPub': 'Elsevier: The Lancet',
+      'zetoPub': 'Elsevier: The Lancet',
+      'publisher': {
+        'name': 'Elsevier',
+        'relationshipType': null,
+        'country': null,
+        'uri': 'http://www.elsevier.com/',
+        'identifier': null,
+        'publicationCount': 0,
+        'paidAccessDescription': 'Open access',
+        'paidAccessUrl': 'https://www.elsevier.com/about/open-science/open-access'
+      },
+      'publishers': [{
+        'name': 'Elsevier',
+        'relationshipType': null,
+        'country': null,
+        'uri': 'http://www.elsevier.com/',
+        'identifier': null,
+        'publicationCount': 0,
+        'paidAccessDescription': 'Open access',
+        'paidAccessUrl': 'https://www.elsevier.com/about/open-science/open-access'
+      }],
+      'policies': [{
+        'id': 0,
+        'openAccessPermitted': false,
+        'uri': null,
+        'internalMoniker': 'Lancet',
+        'permittedVersions': [{
+          'articleVersion': 'submitted',
+          'option': 1,
+          'conditions': ['Upon publication publisher copyright and source must be acknowledged', 'Upon publication must link to publisher version'],
+          'prerequisites': [],
+          'locations': ['Author\'s Homepage', 'Preprint Repository'],
+          'licenses': [],
+          'embargo': null
+        }, {
+          'articleVersion': 'accepted',
+          'option': 1,
+          'conditions': ['Publisher copyright and source must be acknowledged', 'Must link to publisher version'],
+          'prerequisites': [],
+          'locations': ['Author\'s Homepage', 'Institutional Website'],
+          'licenses': ['CC BY-NC-ND'],
+          'embargo': null
+        }, {
+          'articleVersion': 'accepted',
+          'option': 2,
+          'conditions': ['Publisher copyright and source must be acknowledged', 'Must link to publisher version'],
+          'prerequisites': ['If Required by Funder'],
+          'locations': ['Non-Commercial Repository'],
+          'licenses': ['CC BY-NC-ND'],
+          'embargo': { amount: 6, units: 'Months' }
+        }, {
+          'articleVersion': 'accepted',
+          'option': 3,
+          'conditions': ['Publisher copyright and source must be acknowledged', 'Must link to publisher version'],
+          'prerequisites': [],
+          'locations': ['Non-Commercial Repository'],
+          'licenses': [],
+          'embargo': null
+        }],
+        'urls': {
+          'http://download.thelancet.com/flatcontentassets/authors/lancet-information-for-authors.pdf': 'Guidelines for Authors',
+          'http://www.thelancet.com/journals/lancet/article/PIIS0140-6736%2813%2960720-5/fulltext': 'The Lancet journals welcome a new open access policy',
+          'http://www.thelancet.com/lancet-information-for-authors/after-publication': 'What happens after publication?',
+          'http://www.thelancet.com/lancet/information-for-authors/disclosure-of-results': 'Disclosure of results before publication',
+          'https://www.elsevier.com/__data/assets/pdf_file/0005/78476/external-embargo-list.pdf': 'Journal Embargo Period List',
+          'https://www.elsevier.com/__data/assets/pdf_file/0011/78473/UK-Embargo-Periods.pdf': 'Journal Embargo List for UK Authors'
+        },
+        'openAccessProhibited': false,
+        'publicationCount': 0,
+        'preArchiving': 'can',
+        'postArchiving': 'can',
+        'pubArchiving': 'cannot'
+      }],
+      'inDOAJ': false
+    }]
+  }
+} as WorkspaceitemSectionSherpaPoliciesObject;
--- a/src/app/shared/testing/sections-service.stub.ts
+++ b/src/app/shared/testing/sections-service.stub.ts
@@ -20,4 +20,5 @@ export class SectionsServiceStub {
  computeSectionConfiguredMetadata = jasmine.createSpy('computeSectionConfiguredMetadata');
  getShownSectionErrors = jasmine.createSpy('getShownSectionErrors');
  getSectionServerErrors = jasmine.createSpy('getSectionServerErrors');
+  getIsInformational = jasmine.createSpy('getIsInformational');
 }
--- a/src/app/submission/objects/submission-objects.effects.ts
+++ b/src/app/submission/objects/submission-objects.effects.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
-import { isEqual, union } from 'lodash';
+import { findKey, isEqual, union } from 'lodash';

 import { from as observableFrom, Observable, of as observableOf } from 'rxjs';
 import { catchError, filter, map, mergeMap, switchMap, take, tap, withLatestFrom } from 'rxjs/operators';
@@ -43,7 +43,7 @@ import {
  UpdateSectionDataAction,
  UpdateSectionDataSuccessAction
 } from './submission-objects.actions';
-import { SubmissionObjectEntry} from './submission-objects.reducer';
+import { SubmissionObjectEntry } from './submission-objects.reducer';
 import { Item } from '../../core/shared/item.model';
 import { RemoteData } from '../../core/data/remote-data';
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
@@ -60,7 +60,7 @@ export class SubmissionObjectEffects {
  /**
   * Dispatch a [InitSectionAction] for every submission sections and dispatch a [CompleteInitSubmissionFormAction]
   */
-   loadForm$ = createEffect(() => this.actions$.pipe(
+  loadForm$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.INIT_SUBMISSION_FORM),
    map((action: InitSubmissionFormAction) => {
      const definition = action.payload.submissionDefinition;
@@ -104,7 +104,7 @@ export class SubmissionObjectEffects {
  /**
   * Dispatch a [InitSubmissionFormAction]
   */
-   resetForm$ = createEffect(() => this.actions$.pipe(
+  resetForm$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.RESET_SUBMISSION_FORM),
    map((action: ResetSubmissionFormAction) =>
      new InitSubmissionFormAction(
@@ -120,35 +120,35 @@ export class SubmissionObjectEffects {
  /**
   * Dispatch a [SaveSubmissionFormSuccessAction] or a [SaveSubmissionFormErrorAction] on error
   */
-   saveSubmission$ = createEffect(() => this.actions$.pipe(
+  saveSubmission$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.SAVE_SUBMISSION_FORM),
    switchMap((action: SaveSubmissionFormAction) => {
      return this.operationsService.jsonPatchByResourceType(
        this.submissionService.getSubmissionObjectLinkName(),
        action.payload.submissionId,
        'sections').pipe(
-        map((response: SubmissionObject[]) => new SaveSubmissionFormSuccessAction(action.payload.submissionId, response, action.payload.isManual, action.payload.isManual)),
-        catchError(() => observableOf(new SaveSubmissionFormErrorAction(action.payload.submissionId))));
+          map((response: SubmissionObject[]) => new SaveSubmissionFormSuccessAction(action.payload.submissionId, response, action.payload.isManual, action.payload.isManual)),
+          catchError(() => observableOf(new SaveSubmissionFormErrorAction(action.payload.submissionId))));
    })));

  /**
   * Dispatch a [SaveForLaterSubmissionFormSuccessAction] or a [SaveSubmissionFormErrorAction] on error
   */
-   saveForLaterSubmission$ = createEffect(() => this.actions$.pipe(
+  saveForLaterSubmission$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.SAVE_FOR_LATER_SUBMISSION_FORM),
    switchMap((action: SaveForLaterSubmissionFormAction) => {
      return this.operationsService.jsonPatchByResourceType(
        this.submissionService.getSubmissionObjectLinkName(),
        action.payload.submissionId,
        'sections').pipe(
-        map((response: SubmissionObject[]) => new SaveForLaterSubmissionFormSuccessAction(action.payload.submissionId, response)),
-        catchError(() => observableOf(new SaveSubmissionFormErrorAction(action.payload.submissionId))));
+          map((response: SubmissionObject[]) => new SaveForLaterSubmissionFormSuccessAction(action.payload.submissionId, response)),
+          catchError(() => observableOf(new SaveSubmissionFormErrorAction(action.payload.submissionId))));
    })));

  /**
   * Call parseSaveResponse and dispatch actions
   */
-   saveSubmissionSuccess$ = createEffect(() => this.actions$.pipe(
+  saveSubmissionSuccess$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.SAVE_SUBMISSION_FORM_SUCCESS),
    withLatestFrom(this.store$),
    map(([action, currentState]: [SaveSubmissionFormSuccessAction, any]) => {
@@ -162,7 +162,7 @@ export class SubmissionObjectEffects {
   * Call parseSaveResponse and dispatch actions.
   * Notification system is forced to be disabled.
   */
-   saveSubmissionSectionSuccess$ = createEffect(() => this.actions$.pipe(
+  saveSubmissionSectionSuccess$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.SAVE_SUBMISSION_SECTION_FORM_SUCCESS),
    withLatestFrom(this.store$),
    map(([action, currentState]: [SaveSubmissionSectionFormSuccessAction, any]) => {
@@ -174,7 +174,7 @@ export class SubmissionObjectEffects {
  /**
   * Dispatch a [SaveSubmissionSectionFormSuccessAction] or a [SaveSubmissionSectionFormErrorAction] on error
   */
-   saveSection$ = createEffect(() => this.actions$.pipe(
+  saveSection$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.SAVE_SUBMISSION_SECTION_FORM),
    switchMap((action: SaveSubmissionSectionFormAction) => {
      return this.operationsService.jsonPatchByResourceID(
@@ -182,14 +182,14 @@ export class SubmissionObjectEffects {
        action.payload.submissionId,
        'sections',
        action.payload.sectionId).pipe(
-        map((response: SubmissionObject[]) => new SaveSubmissionSectionFormSuccessAction(action.payload.submissionId, response)),
-        catchError(() => observableOf(new SaveSubmissionSectionFormErrorAction(action.payload.submissionId))));
+          map((response: SubmissionObject[]) => new SaveSubmissionSectionFormSuccessAction(action.payload.submissionId, response)),
+          catchError(() => observableOf(new SaveSubmissionSectionFormErrorAction(action.payload.submissionId))));
    })));

  /**
   * Show a notification on error
   */
-   saveError$ = createEffect(() => this.actions$.pipe(
+  saveError$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.SAVE_SUBMISSION_FORM_ERROR, SubmissionObjectActionTypes.SAVE_SUBMISSION_SECTION_FORM_ERROR),
    withLatestFrom(this.store$),
    tap(() => this.notificationsService.error(null, this.translate.get('submission.sections.general.save_error_notice')))), { dispatch: false });
@@ -197,7 +197,7 @@ export class SubmissionObjectEffects {
  /**
   * Call parseSaveResponse and dispatch actions or dispatch [SaveSubmissionFormErrorAction] on error
   */
-   saveAndDeposit$ = createEffect(() => this.actions$.pipe(
+  saveAndDeposit$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.SAVE_AND_DEPOSIT_SUBMISSION),
    withLatestFrom(this.submissionService.hasUnsavedModification()),
    switchMap(([action, hasUnsavedModification]: [SaveAndDepositSubmissionAction, boolean]) => {
@@ -233,7 +233,7 @@ export class SubmissionObjectEffects {
  /**
   * Dispatch a [DepositSubmissionSuccessAction] or a [DepositSubmissionErrorAction] on error
   */
-   depositSubmission$ = createEffect(() => this.actions$.pipe(
+  depositSubmission$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.DEPOSIT_SUBMISSION),
    withLatestFrom(this.store$),
    switchMap(([action, state]: [DepositSubmissionAction, any]) => {
@@ -245,7 +245,7 @@ export class SubmissionObjectEffects {
  /**
   * Show a notification on success and redirect to MyDSpace page
   */
-   saveForLaterSubmissionSuccess$ = createEffect(() => this.actions$.pipe(
+  saveForLaterSubmissionSuccess$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.SAVE_FOR_LATER_SUBMISSION_FORM_SUCCESS),
    tap(() => this.notificationsService.success(null, this.translate.get('submission.sections.general.save_success_notice'))),
    tap(() => this.submissionService.redirectToMyDSpace())), { dispatch: false });
@@ -253,7 +253,7 @@ export class SubmissionObjectEffects {
  /**
   * Show a notification on success and redirect to MyDSpace page
   */
-   depositSubmissionSuccess$ = createEffect(() => this.actions$.pipe(
+  depositSubmissionSuccess$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.DEPOSIT_SUBMISSION_SUCCESS),
    tap(() => this.notificationsService.success(null, this.translate.get('submission.sections.general.deposit_success_notice'))),
    tap(() => this.submissionService.redirectToMyDSpace())), { dispatch: false });
@@ -261,14 +261,14 @@ export class SubmissionObjectEffects {
  /**
   * Show a notification on error
   */
-   depositSubmissionError$ = createEffect(() => this.actions$.pipe(
+  depositSubmissionError$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.DEPOSIT_SUBMISSION_ERROR),
    tap(() => this.notificationsService.error(null, this.translate.get('submission.sections.general.deposit_error_notice')))), { dispatch: false });

  /**
   * Dispatch a [DiscardSubmissionSuccessAction] or a [DiscardSubmissionErrorAction] on error
   */
-   discardSubmission$ = createEffect(() => this.actions$.pipe(
+  discardSubmission$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.DISCARD_SUBMISSION),
    switchMap((action: DepositSubmissionAction) => {
      return this.submissionService.discardSubmission(action.payload.submissionId).pipe(
@@ -279,7 +279,7 @@ export class SubmissionObjectEffects {
  /**
   * Adds all metadata an item to the SubmissionForm sections of the submission
   */
-   addAllMetadataToSectionData = createEffect(() => this.actions$.pipe(
+  addAllMetadataToSectionData = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.UPDATE_SECTION_DATA),
    switchMap((action: UpdateSectionDataAction) => {
      return this.sectionService.getSectionState(action.payload.submissionId, action.payload.sectionId, SectionsType.Upload)
@@ -320,18 +320,18 @@ export class SubmissionObjectEffects {
  /**
   * Show a notification on error
   */
-   discardSubmissionError$ = createEffect(() => this.actions$.pipe(
+  discardSubmissionError$ = createEffect(() => this.actions$.pipe(
    ofType(SubmissionObjectActionTypes.DISCARD_SUBMISSION_ERROR),
    tap(() => this.notificationsService.error(null, this.translate.get('submission.sections.general.discard_error_notice')))), { dispatch: false });

  constructor(private actions$: Actions,
-              private notificationsService: NotificationsService,
-              private operationsService: SubmissionJsonPatchOperationsService,
-              private sectionService: SectionsService,
-              private store$: Store<any>,
-              private submissionService: SubmissionService,
-              private submissionObjectService: SubmissionObjectDataService,
-              private translate: TranslateService) {
+    private notificationsService: NotificationsService,
+    private operationsService: SubmissionJsonPatchOperationsService,
+    private sectionService: SectionsService,
+    private store$: Store<any>,
+    private submissionService: SubmissionService,
+    private submissionObjectService: SubmissionObjectDataService,
+    private translate: TranslateService) {
  }

  /**
@@ -425,7 +425,15 @@ export class SubmissionObjectEffects {
          const filteredErrors = filterErrors(sectionForm, sectionErrors, currentState.sections[sectionId].sectionType, showErrors);
          mappedActions.push(new UpdateSectionDataAction(submissionId, sectionId, sectionData, filteredErrors, sectionErrors));
        }
+
+        // Sherpa Policies section needs to be updated when the rest response section is empty
+        const sherpaPoliciesSectionId = findKey(currentState.sections, (section) => section.sectionType === SectionsType.SherpaPolicies);
+        if (isNotUndefined(sherpaPoliciesSectionId) && isNotEmpty(currentState.sections[sherpaPoliciesSectionId]?.data)
+          && isEmpty(sections[sherpaPoliciesSectionId])) {
+          mappedActions.push(new UpdateSectionDataAction(submissionId, sherpaPoliciesSectionId, null, [], []));
+        }
      });
+
    }
    return mappedActions;
  }
--- a/src/app/submission/sections/container/section-container.component.html
+++ b/src/app/submission/sections/container/section-container.component.html
@@ -1,49 +1,48 @@
-<div dsSection #sectionRef="sectionRef"
-     [attr.id]="'section_' + sectionData.id"
-     [ngClass]="{ 'section-focus' : sectionRef.isSectionActive() }"
-     [mandatory]="sectionData.mandatory"
-     [submissionId]="submissionId"
-     [sectionType]="sectionData.sectionType"
-     [sectionId]="sectionData.id">
-  <ngb-accordion #acc="ngbAccordion"
-                 *ngIf="(sectionRef.isEnabled() | async)"
-                 (panelChange)="sectionRef.sectionChange($event)"
-                 activeIds="{{ sectionData.id }}"
-                 [destroyOnHide]="false">
-    <ngb-panel id="{{ sectionData.id }}">
+<div dsSection #sectionRef="sectionRef" [attr.id]="'section_' + sectionData.id"
+  [ngClass]="{ 'section-focus' : sectionRef.isSectionActive() }" [mandatory]="sectionData.mandatory"
+  [submissionId]="submissionId" [sectionType]="sectionData.sectionType" [sectionId]="sectionData.id">
+  <ngb-accordion #acc="ngbAccordion" *ngIf="(sectionRef.isEnabled() | async)"
+    (panelChange)="sectionRef.sectionChange($event)" activeIds="{{ sectionData.id }}" [destroyOnHide]="false">
+    <ngb-panel id="{{ sectionData.id }}" [type]="sectionRef.isInfo() ? 'info' : ''">
      <ng-template ngbPanelTitle>
-        <span class="float-left section-title" tabindex="0">{{ 'submission.sections.'+sectionData.header | translate }}</span>
+        <span [ngClass]="{ 'text-white' : sectionRef.isInfo()}" class="float-left section-title" tabindex="0">{{
+          'submission.sections.'+sectionData.header | translate
+          }}</span>
        <div class="d-inline-block float-right">
-          <i *ngIf="!(sectionRef.isValid() | async) && !(sectionRef.hasErrors())" class="fas fa-exclamation-circle text-warning mr-3"
-             title="{{'submission.sections.status.warnings.title' | translate}}" role="img" [attr.aria-label]="'submission.sections.status.warnings.aria' | translate"></i>
-          <i *ngIf="(sectionRef.hasErrors())" class="fas fa-exclamation-circle text-danger mr-3"
-             title="{{'submission.sections.status.errors.title' | translate}}" role="img" [attr.aria-label]="'submission.sections.status.errors.aria' | translate"></i>
-          <i *ngIf="(sectionRef.isValid() | async) && !(sectionRef.hasErrors())" class="fas fa-check-circle text-success mr-3"
-             title="{{'submission.sections.status.valid.title' | translate}}" role="img" [attr.aria-label]="'submission.sections.status.valid.aria' | translate"></i>
-          <a class="close"
-             tabindex="0"
-             role="button"
-             [attr.aria-label]="(sectionRef.isOpen() ? 'submission.sections.toggle.aria.close' : 'submission.sections.toggle.aria.open') | translate: {sectionHeader: ('submission.sections.'+sectionData.header | translate)}"
-             [title]="(sectionRef.isOpen() ? 'submission.sections.toggle.close' : 'submission.sections.toggle.open') | translate">
-            <span *ngIf="sectionRef.isOpen()" class="fas fa-chevron-up fa-fw"></span>
+          <i *ngIf="!(sectionRef.isValid() | async) && !(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
+            class="fas fa-exclamation-circle text-warning mr-3"
+            title="{{'submission.sections.status.warnings.title' | translate}}" role="img"
+            [attr.aria-label]="'submission.sections.status.warnings.aria' | translate"></i>
+          <i *ngIf="(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
+            class="fas fa-exclamation-circle text-danger mr-3"
+            title="{{'submission.sections.status.errors.title' | translate}}" role="img"
+            [attr.aria-label]="'submission.sections.status.errors.aria' | translate"></i>
+          <i *ngIf="(sectionRef.isValid() | async) && !(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
+            class="fas fa-check-circle text-success mr-3"
+            title="{{'submission.sections.status.valid.title' | translate}}" role="img"
+            [attr.aria-label]="'submission.sections.status.valid.aria' | translate"></i>
+          <i *ngIf="sectionRef.isInfo()" class="fas fa-info-circle mr-3 text-white"
+            title="{{'submission.sections.status.info.title' | translate}}" role="img"
+            [attr.aria-label]="'submission.sections.status.info.aria' | translate"></i>
+          <a class="close" tabindex="0" role="button"
+            [attr.aria-label]="(sectionRef.isOpen() ? 'submission.sections.toggle.aria.close' : 'submission.sections.toggle.aria.open') | translate: {sectionHeader: ('submission.sections.'+sectionData.header | translate)}"
+            [title]="(sectionRef.isOpen() ? 'submission.sections.toggle.close' : 'submission.sections.toggle.open') | translate">
+            <span *ngIf="sectionRef.isOpen()" [ngClass]="{ 'text-white' : sectionRef.isInfo()}"
+              class="fas fa-chevron-up fa-fw"></span>
            <span *ngIf="!sectionRef.isOpen()" class="fas fa-chevron-down fa-fw"></span>
          </a>
          <a href="javascript:void(0);" class="close mr-3" *ngIf="!sectionRef.isMandatory()"
-             (click)="removeSection($event)">
+            (click)="removeSection($event)">
            <i class="fas fa-trash-o" aria-hidden="true" tabindex="0"></i>
          </a>
        </div>
      </ng-template>
      <ng-template ngbPanelContent>
        <div id="sectionGenericError_{{sectionData.id}}" *ngIf="sectionRef.hasGenericErrors()">
-          <ds-alert *ngFor="let error of sectionRef.getErrors(); let i = index"
-                    [content]="error"
-                    [dismissible]="true"
-                    [type]="AlertTypeEnum.Error"
-                    (close)="sectionRef.removeError(i)"></ds-alert>
+          <ds-alert *ngFor="let error of sectionRef.getErrors(); let i = index" [content]="error" [dismissible]="true"
+            [type]="AlertTypeEnum.Error" (close)="sectionRef.removeError(i)"></ds-alert>
        </div>
-        <div id="sectionContent_{{sectionData.id}}"
-             (click)="sectionRef.setFocus($event)">
+        <div id="sectionContent_{{sectionData.id}}" (click)="sectionRef.setFocus($event)">
          <ng-container *ngComponentOutlet="getSectionContent(); injector: objectInjector;"></ng-container>
        </div>
      </ng-template>
--- a/src/app/submission/sections/container/section-container.component.scss
+++ b/src/app/submission/sections/container/section-container.component.scss
@@ -10,7 +10,7 @@

 // TODO to remove the following when upgrading @ng-bootstrap
 :host ::ng-deep .card:first-of-type {
-  border-bottom: var(--bs-card-border-width) solid  var(--bs-card-border-color) !important;
+  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
  border-bottom-left-radius: var(--bs-card-border-radius) !important;
  border-bottom-right-radius: var(--bs-card-border-radius) !important;
 }
--- a/src/app/submission/sections/sections-type.ts
+++ b/src/app/submission/sections/sections-type.ts
@@ -6,4 +6,5 @@ export enum SectionsType {
  CcLicense = 'cclicense',
  collection = 'collection',
  AccessesCondition = 'accessCondition',
+  SherpaPolicies = 'sherpaPolicy',
 }
--- a/src/app/submission/sections/sections.directive.ts
+++ b/src/app/submission/sections/sections.directive.ts
@@ -94,8 +94,8 @@ export class SectionsDirective implements OnDestroy, OnInit {
   * @param {SectionsService} sectionService
   */
  constructor(private changeDetectorRef: ChangeDetectorRef,
-              private submissionService: SubmissionService,
-              private sectionService: SectionsService) {
+    private submissionService: SubmissionService,
+    private sectionService: SectionsService) {
  }

  /**
@@ -272,6 +272,19 @@ export class SectionsDirective implements OnDestroy, OnInit {
    }
  }

+
+  /**
+   * Check if section is information
+   *
+   * @returns {Observable<boolean>}
+   *    Emits true whenever section is information
+   */
+  public isInfo(): boolean {
+    return this.sectionService.getIsInformational(this.sectionType);
+  }
+
+
+
  /**
   * Remove error from list
   *
--- a/src/app/submission/sections/sections.service.ts
+++ b/src/app/submission/sections/sections.service.ts
@@ -60,11 +60,11 @@ export class SectionsService {
   * @param {TranslateService} translate
   */
  constructor(private formService: FormService,
-              private notificationsService: NotificationsService,
-              private scrollToService: ScrollToService,
-              private submissionService: SubmissionService,
-              private store: Store<SubmissionState>,
-              private translate: TranslateService) {
+    private notificationsService: NotificationsService,
+    private scrollToService: ScrollToService,
+    private submissionService: SubmissionService,
+    private store: Store<SubmissionState>,
+    private translate: TranslateService) {
  }

  /**
@@ -197,7 +197,7 @@ export class SectionsService {
                path: pathCombiner.getPath(error.fieldId.replace(/\_/g, '.')).path,
                message: error.message
              } as SubmissionSectionError))
-              .filter((sectionError: SubmissionSectionError) => findIndex(state.errorsToShow, {path: sectionError.path}) === -1);
+              .filter((sectionError: SubmissionSectionError) => findIndex(state.errorsToShow, { path: sectionError.path }) === -1);
            return [...state.errorsToShow, ...sectionErrors];
          })
        ))
@@ -262,7 +262,7 @@ export class SectionsService {
        }
      }),
      distinctUntilChanged()
-      );
+    );
  }

  /**
@@ -371,7 +371,7 @@ export class SectionsService {
    return this.store.select(submissionObjectFromIdSelector(submissionId)).pipe(
      filter((submissionState: SubmissionObjectEntry) => isNotUndefined(submissionState)),
      map((submissionState: SubmissionObjectEntry) => {
-        return isNotUndefined(submissionState.sections) && isNotUndefined(findKey(submissionState.sections, {sectionType: sectionType}));
+        return isNotUndefined(submissionState.sections) && isNotUndefined(findKey(submissionState.sections, { sectionType: sectionType }));
      }),
      distinctUntilChanged());
  }
@@ -514,4 +514,16 @@ export class SectionsService {
    return metadata;
  }

+  /**
+   * Return if the section is an informational type section.
+   * @param sectionType
+   */
+  public getIsInformational(sectionType: SectionsType): boolean {
+    if (sectionType === SectionsType.SherpaPolicies) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
 }
--- a/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html
+++ b/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html
@@ -0,0 +1,90 @@
+<div class="mb-3 border-bottom" data-test="collapse">
+    <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+        <div class="d-flex">
+            <button type="button" class="btn btn-link p-0 mr-4" (click)="$event.preventDefault()"
+                [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+                {{version.articleVersion | titlecase}} {{ 'submission.sections.sherpa.publisher.policy.version' |
+                translate
+                }}
+            </button>
+            <div>
+                <span *ngIf="!!version?.embargo && !!version?.embargo.amount;else noEmbargoTitle"> <i
+                        class="fas fa-hourglass-half"></i> {{version.embargo.amount}}
+                    {{version.embargo?.units[0]}}</span>
+                <ng-template #noEmbargoTitle>
+                    <span><i class="fas fa-hourglass-half"></i> {{
+                        'submission.sections.sherpa.publisher.policy.noembargo' | translate }}</span>
+                </ng-template>
+
+                <span class="m-1 ml-4">
+                    <i class="far fa-folder-open"></i>
+                    <span *ngIf="!!version?.locations && version.locations.length > 0; else noLocations">
+                        {{version.locations[0]}} <span
+                            *ngIf="version.locations.length > 1">+{{version.locations.length-1}}</span>
+                    </span>
+                    <ng-template #noLocations>
+                        <span>{{
+                            'submission.sections.sherpa.publisher.policy.nolocation' | translate }}</span>
+                    </ng-template>
+                </span>
+            </div>
+        </div>
+        <div class="d-inline-block">
+            <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+            <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+        </div>
+    </div>
+    <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+        <div *ngIf="!!version" class="ml-4">
+            <div class="row" *ngIf="!!version?.embargo && !!version?.embargo.amount">
+                <div class="col-4">
+                    <p class="m-1"><i class="fas fa-hourglass-half"></i> {{
+                        'submission.sections.sherpa.publisher.policy.embargo' | translate }}</p>
+                </div>
+                <div class="col-6">
+                    <p class="m-1" *ngIf="!!version.embargo;else noEmbargo">{{version.embargo.amount}}
+                        {{version.embargo.units}}</p>
+                    <ng-template #noEmbargo>
+                        <p class="m-1">{{ 'submission.sections.sherpa.publisher.policy.noembargo' | translate }}</p>
+                    </ng-template>
+                </div>
+            </div>
+            <div class="row" *ngIf="!!version?.licenses && version.licenses.length > 0">
+                <div class="col-4">
+                    <p class="m-1"><i class="fas fa-certificate"></i> {{
+                        'submission.sections.sherpa.publisher.policy.license' | translate }}</p>
+                </div>
+                <div class="col-6">
+                    <p class="m-1" *ngFor="let license of version.licenses">{{license}}</p>
+                </div>
+            </div>
+            <div class="row" *ngIf="!!version?.prerequisites && version.prerequisites.length > 0">
+                <div class="col-4">
+                    <p class="m-1"><i class="fas fa-exclamation-circle"></i> {{
+                        'submission.sections.sherpa.publisher.policy.prerequisites' | translate }}</p>
+                </div>
+                <div class="col-6">
+                    <p class="m-1" *ngFor="let prerequisite of version.prerequisites">{{prerequisite}}</p>
+                </div>
+            </div>
+            <div class="row" *ngIf="!!version?.locations && version.locations.length > 0">
+                <div class="col-4">
+                    <p class="m-1"><i class="far fa-folder-open"></i> {{
+                        'submission.sections.sherpa.publisher.policy.location' | translate }}</p>
+                </div>
+                <div class="col-6">
+                    <p class="m-1" *ngFor="let location of version.locations">{{location}}</p>
+                </div>
+            </div>
+            <div class="row" *ngIf="!!version?.conditions && version.conditions.length > 0">
+                <div class="col-4">
+                    <p class="m-1"><i class="fas fa-tasks"></i> {{
+                        'submission.sections.sherpa.publisher.policy.conditions' | translate }}</p>
+                </div>
+                <div class="col-6">
+                    <p class="m-1" *ngFor="let condition of version.conditions">{{condition}}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
--- a/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.scss
+++ b/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.scss
--- a/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.spec.ts
+++ b/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.spec.ts
@@ -0,0 +1,57 @@
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateLoaderMock } from '../../../../shared/mocks/translate-loader.mock';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentAccordionComponent } from './content-accordion.component';
+
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { SherpaDataResponse } from '../../../../shared/mocks/section-sherpa-policies.service.mock';
+
+describe('ContentAccordionComponent', () => {
+  let component: ContentAccordionComponent;
+  let fixture: ComponentFixture<ContentAccordionComponent>;
+  let de: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+        NgbCollapseModule
+      ],
+      declarations: [ContentAccordionComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentAccordionComponent);
+    component = fixture.componentInstance;
+    de = fixture.debugElement;
+    component.isCollapsed = false;
+    component.version = SherpaDataResponse.sherpaResponse.journals[0].policies[0].permittedVersions[0];
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show 2 rows', () => {
+    component.version = SherpaDataResponse.sherpaResponse.journals[0].policies[0].permittedVersions[0];
+    fixture.detectChanges();
+    expect(de.queryAll(By.css('.row')).length).toEqual(2);
+  });
+
+  it('should show 5 rows', () => {
+    component.version = SherpaDataResponse.sherpaResponse.journals[0].policies[0].permittedVersions[2];
+    fixture.detectChanges();
+    expect(de.queryAll(By.css('.row')).length).toEqual(5);
+  });
+});
--- a/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.ts
+++ b/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+
+import { PermittedVersions } from '../../../../core/submission/models/sherpa-policies-details.model';
+
+/**
+ * This component represents a section that contains the inner accordions for the publisher policy versions.
+ */
+@Component({
+  selector: 'ds-content-accordion',
+  templateUrl: './content-accordion.component.html',
+  styleUrls: ['./content-accordion.component.scss']
+})
+export class ContentAccordionComponent {
+  /**
+   * PermittedVersions to show information from
+   */
+  @Input() version: PermittedVersions;
+
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  public isCollapsed = true;
+}
--- a/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html
+++ b/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html
@@ -0,0 +1,39 @@
+<div class="ml-4">
+    <div class="row" *ngIf="!!metadata?.id">
+        <div class="col-4">
+            <p class="m-1">{{ 'submission.sections.sherpa.record.information.id' | translate }}</p>
+        </div>
+        <div class="col-8">
+            <p class="m-1">{{metadata.id}}
+            </p>
+        </div>
+    </div>
+    <div class="row" *ngIf="!!metadata?.dateCreated">
+        <div class="col-4">
+            <p class="m-1">{{ 'submission.sections.sherpa.record.information.date.created' | translate }}</p>
+        </div>
+        <div class="col-8">
+            <p class="m-1">{{metadata.dateCreated | date: 'd MMMM Y H:mm:ss zzzz' }}
+            </p>
+        </div>
+    </div>
+    <div class="row" *ngIf="!!metadata?.dateModified">
+        <div class="col-4">
+            <p class="m-1">{{ 'submission.sections.sherpa.record.information.date.modified' | translate }}</p>
+        </div>
+        <div class="col-8">
+            <p class="m-1">{{metadata.dateModified| date: 'd MMMM Y H:mm:ss zzzz' }}
+            </p>
+        </div>
+    </div>
+    <div class="row" *ngIf="!!metadata?.uri">
+        <div class="col-4">
+            <p class="m-1">{{ 'submission.sections.sherpa.record.information.uri' | translate }}</p>
+        </div>
+        <div class="col-8">
+            <p class="m-1">
+                <a [href]="metadata.uri" target="_blank">{{metadata.uri}}</a>
+            </p>
+        </div>
+    </div>
+</div>
--- a/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.scss
+++ b/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.scss
--- a/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.spec.ts
+++ b/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.spec.ts
@@ -0,0 +1,47 @@
+import { TranslateLoaderMock } from '../../../../shared/testing/translate-loader.mock';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataInformationComponent } from './metadata-information.component';
+
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { SherpaDataResponse } from '../../../../shared/mocks/section-sherpa-policies.service.mock';
+
+describe('MetadataInformationComponent', () => {
+  let component: MetadataInformationComponent;
+  let fixture: ComponentFixture<MetadataInformationComponent>;
+  let de: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+      ],
+      declarations: [MetadataInformationComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetadataInformationComponent);
+    component = fixture.componentInstance;
+    de = fixture.debugElement;
+    component.metadata = SherpaDataResponse.sherpaResponse.metadata;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show 4 rows', () => {
+    expect(de.queryAll(By.css('.row')).length).toEqual(4);
+  });
+
+});
--- a/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.ts
+++ b/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+import { Metadata } from '../../../../core/submission/models/sherpa-policies-details.model';
+
+/**
+ * This component represents a section that contains the matadata informations.
+ */
+@Component({
+  selector: 'ds-metadata-information',
+  templateUrl: './metadata-information.component.html',
+  styleUrls: ['./metadata-information.component.scss']
+})
+export class MetadataInformationComponent {
+  /**
+   * Metadata to show information from
+   */
+  @Input() metadata: Metadata;
+
+}
--- a/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html
+++ b/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html
@@ -0,0 +1,64 @@
+<div class="ml-4">
+    <div class="row" *ngIf="!!journal?.titles && journal.titles.length > 0">
+        <div class="col-4">
+            <p class="m-1">{{'submission.sections.sherpa.publication.information.title' | translate}}</p>
+        </div>
+        <div class="col-4">
+            <p class="m-1" *ngFor="let title of journal.titles">{{title}}
+            </p>
+        </div>
+    </div>
+    <div class="row" *ngIf="!!journal?.issns && journal.issns.length > 0">
+        <div class="col-4">
+            <p class="m-1">{{'submission.sections.sherpa.publication.information.issns' | translate}}</p>
+        </div>
+        <div class="col-4">
+            <p class="m-1" *ngFor="let issn of journal.issns">{{issn}}
+            </p>
+        </div>
+    </div>
+    <div class="row" *ngIf="!!journal?.url">
+        <div class="col-4">
+            <p class="m-1">{{'submission.sections.sherpa.publication.information.url' | translate}}</p>
+        </div>
+        <div class="col-4">
+            <p class="m-1">
+                <a href="{{journal.url}}" target="_blank">
+                    {{journal.url}}
+                </a>
+            </p>
+        </div>
+    </div>
+    <div class="row" *ngIf="!!journal?.publishers && journal.publishers.length > 0">
+        <div class="col-4">
+            <p class="m-1">{{'submission.sections.sherpa.publication.information.publishers' | translate}}</p>
+        </div>
+        <div class="col-4" *ngFor="let publisher of journal.publishers">
+            <p class="m-1">
+                <a href="{{publisher.uri}}" target="_blank">
+                    {{publisher.name}}
+                </a>
+            </p>
+        </div>
+    </div>
+    <div class="row" *ngIf="!!journal?.romeoPub">
+        <div class="col-4">
+            <p class="m-1">{{'submission.sections.sherpa.publication.information.romeoPub' | translate}}</p>
+        </div>
+        <div class="col-4">
+            <p class="m-1">
+                {{journal.romeoPub}}
+            </p>
+        </div>
+    </div>
+    <div class="row" *ngIf="!!journal?.zetoPub">
+        <div class="col-4">
+            <p class="m-1">{{'submission.sections.sherpa.publication.information.zetoPub' | translate}}</p>
+        </div>
+        <div class="col-4">
+            <p class="m-1">
+                {{journal.zetoPub}}
+            </p>
+        </div>
+    </div>
+</div>
--- a/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.scss
+++ b/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.scss
--- a/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.spec.ts
+++ b/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.spec.ts
@@ -0,0 +1,47 @@
+import { TranslateLoaderMock } from '../../../../shared/testing/translate-loader.mock';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PublicationInformationComponent } from './publication-information.component';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { SherpaDataResponse } from '../../../../shared/mocks/section-sherpa-policies.service.mock';
+
+describe('PublicationInformationComponent', () => {
+  let component: PublicationInformationComponent;
+  let fixture: ComponentFixture<PublicationInformationComponent>;
+  let de: DebugElement;
+
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+      ],
+      declarations: [PublicationInformationComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PublicationInformationComponent);
+    component = fixture.componentInstance;
+    de = fixture.debugElement;
+    component.journal = SherpaDataResponse.sherpaResponse.journals[0];
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show 6 rows', () => {
+    expect(de.queryAll(By.css('.row')).length).toEqual(6);
+  });
+
+});
--- a/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.ts
+++ b/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+import { Journal } from '../../../../core/submission/models/sherpa-policies-details.model';
+
+/**
+ * This component represents a section that contains the journal publication information.
+ */
+@Component({
+  selector: 'ds-publication-information',
+  templateUrl: './publication-information.component.html',
+  styleUrls: ['./publication-information.component.scss']
+})
+export class PublicationInformationComponent {
+  /**
+   * Journal to show information from
+   */
+  @Input() journal: Journal;
+
+}
--- a/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html
+++ b/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html
@@ -0,0 +1,16 @@
+<div class="ml-4">
+    <ds-content-accordion *ngFor="let permittedVersions of policy.permittedVersions" [version]="permittedVersions">
+    </ds-content-accordion>
+    <div class="row" *ngIf="!!policy?.urls">
+        <div class="col-12">
+            <p class="m-1">
+                {{'submission.sections.sherpa.publisher.policy.more.information' | translate}}
+            </p>
+            <ul>
+                <li *ngFor="let url of policy.urls | keyvalue">
+                    <a href="{{url.key}}" target="_blank">{{url.value}}</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
--- a/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.scss
+++ b/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.scss
--- a/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.spec.ts
+++ b/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.spec.ts
@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PublisherPolicyComponent } from './publisher-policy.component';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+
+import { SherpaDataResponse } from '../../../../shared/mocks/section-sherpa-policies.service.mock';
+import { TranslateLoaderMock } from '../../../../shared/mocks/translate-loader.mock';
+
+describe('PublisherPolicyComponent', () => {
+  let component: PublisherPolicyComponent;
+  let fixture: ComponentFixture<PublisherPolicyComponent>;
+  let de: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+      ],
+      declarations: [PublisherPolicyComponent],
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PublisherPolicyComponent);
+    component = fixture.componentInstance;
+    de = fixture.debugElement;
+    component.policy = SherpaDataResponse.sherpaResponse.journals[0].policies[0];
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show content accordion', () => {
+    expect(de.query(By.css('ds-content-accordion'))).toBeTruthy();
+  });
+
+  it('should show 1 row', () => {
+    expect(de.queryAll(By.css('.row')).length).toEqual(1);
+  });
+});
--- a/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.ts
+++ b/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+
+import { Policy } from '../../../../core/submission/models/sherpa-policies-details.model';
+import { AlertType } from '../../../../shared/alert/aletr-type';
+
+/**
+ * This component represents a section that contains the publisher policy informations.
+ */
+@Component({
+  selector: 'ds-publisher-policy',
+  templateUrl: './publisher-policy.component.html',
+  styleUrls: ['./publisher-policy.component.scss']
+})
+export class PublisherPolicyComponent {
+
+  /**
+   * Policy to show information from
+   */
+  @Input() policy: Policy;
+
+
+  /**
+   * The AlertType enumeration
+   * @type {AlertType}
+   */
+  public AlertTypeEnum = AlertType;
+
+}
--- a/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html
+++ b/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html
@@ -0,0 +1,72 @@
+<ds-alert [type]="'alert-info'" *ngIf="hasNoData()" [content]="'submission.sections.sherpa-policy.title-empty'">
+</ds-alert>
+
+<div *ngIf="!hasNoData()" class="d-flex flex-column flex-nowrap mt-2 mb-4">
+  <ds-alert [type]="'alert-info'" >
+    {{'submission.sections.sherpa.publisher.policy.description' | translate}}
+  </ds-alert>
+  <div>
+    <button type="button" class="btn btn-secondary float-right" (click)="refresh()" data-test="refresh-btn">
+      <span><i class="fas fa-sync"></i> {{'submission.sections.sherpa.publisher.policy.refresh' | translate}} </span>
+    </button>
+  </div>
+</div>
+
+<ng-container *ngVar="(sherpaPoliciesData$ | async)?.sherpaResponse as sherpaData">
+    <ng-container *ngIf="!hasNoData() && (!!sherpaData && !sherpaData.error)">
+        <ng-container *ngFor="let journal of sherpaData.journals;let j=index;">
+            <div class="mb-3 border-bottom" data-test="collapse">
+                <div class="w-100 d-flex justify-content-between collapse-toggle mb-3" (click)="collapse.toggle()">
+                    <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+                        [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+                        {{'submission.sections.sherpa.publication.information' | translate}}
+                    </button>
+                    <div class="d-inline-block">
+                        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+                        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+                    </div>
+                </div>
+                <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+                    <ds-publication-information [journal]="journal"></ds-publication-information>
+                </div>
+            </div>
+            <div *ngFor="let policy of journal.policies; let p=index;" class="mb-3 border-bottom" data-test="collapse">
+                <div class="w-100 d-flex justify-content-between collapse-toggle mb-3" (click)="collapse.toggle()">
+                    <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+                        [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+                        {{'submission.sections.sherpa.publisher.policy' | translate}}
+                    </button>
+                    <div class="d-inline-block">
+                        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+                        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+                    </div>
+                </div>
+                <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+                    <ds-publisher-policy [policy]="policy"></ds-publisher-policy>
+                </div>
+            </div>
+        </ng-container>
+
+        <div class="mb-3 border-bottom" data-test="collapse">
+            <div class="w-100 d-flex justify-content-between collapse-toggle mb-3" (click)="collapse.toggle()">
+                <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+                    [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+                    {{'submission.sections.sherpa.record.information' | translate}}
+                </button>
+                <div class="d-inline-block">
+                    <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+                    <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+                </div>
+            </div>
+            <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+                <ds-metadata-information [metadata]="sherpaData.metadata"></ds-metadata-information>
+            </div>
+        </div>
+    </ng-container>
+
+    <ng-container *ngIf="!!sherpaData && sherpaData.error">
+        <ds-alert [type]="AlertTypeEnum.Error"
+            [content]="!!sherpaData.message ? sherpaData.message : 'submission.sections.sherpa.error.message'| translate">
+        </ds-alert>
+    </ng-container>
+</ng-container>
--- a/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.scss
+++ b/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.scss
--- a/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.spec.ts
+++ b/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.spec.ts
@@ -0,0 +1,117 @@
+import { SharedModule } from '../../../shared/shared.module';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+import { SubmissionServiceStub } from '../../../shared/testing/submission-service.stub';
+import { SherpaDataResponse } from '../../../shared/mocks/section-sherpa-policies.service.mock';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+
+import { SectionsService } from '../sections.service';
+import { SectionsServiceStub } from '../../../shared/testing/sections-service.stub';
+import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { BrowserModule, By } from '@angular/platform-browser';
+
+import { Store } from '@ngrx/store';
+import { AppState } from '../../../app.reducer';
+import { SubmissionSectionSherpaPoliciesComponent } from './section-sherpa-policies.component';
+import { SubmissionService } from '../../submission.service';
+import { DebugElement } from '@angular/core';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+import { of as observableOf } from 'rxjs';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('SubmissionSectionSherpaPoliciesComponent', () => {
+  let component: SubmissionSectionSherpaPoliciesComponent;
+  let fixture: ComponentFixture<SubmissionSectionSherpaPoliciesComponent>;
+  let de: DebugElement;
+
+  const sectionsServiceStub = new SectionsServiceStub();
+
+  const operationsBuilder = jasmine.createSpyObj('operationsBuilder', {
+    add: undefined,
+    remove: undefined,
+    replace: undefined,
+  });
+
+  const storeStub = jasmine.createSpyObj('store', ['dispatch']);
+
+  const sectionData = {
+    header: 'submit.progressbar.sherpaPolicies',
+    config: 'http://localhost:8080/server/api/config/submissionaccessoptions/SherpaPoliciesDefaultConfiguration',
+    mandatory: true,
+    sectionType: 'sherpaPolicies',
+    collapsed: false,
+    enabled: true,
+    data: SherpaDataResponse,
+    errorsToShow: [],
+    serverValidationErrors: [],
+    isLoading: false,
+    isValid: true
+  };
+
+  describe('SubmissionSectionSherpaPoliciesComponent', () => {
+
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [
+          BrowserModule,
+          NoopAnimationsModule,
+          TranslateModule.forRoot({
+            loader: {
+              provide: TranslateLoader,
+              useClass: TranslateLoaderMock
+            }
+          }),
+          NgbCollapseModule,
+          SharedModule
+        ],
+        declarations: [SubmissionSectionSherpaPoliciesComponent],
+        providers: [
+          { provide: SectionsService, useValue: sectionsServiceStub },
+          { provide: JsonPatchOperationsBuilder, useValue: operationsBuilder },
+          { provide: SubmissionService, useValue: SubmissionServiceStub },
+          { provide: Store, useValue: storeStub },
+          { provide: 'sectionDataProvider', useValue: sectionData },
+          { provide: 'submissionIdProvider', useValue: '1508' },
+        ]
+      })
+        .compileComponents();
+    });
+
+    beforeEach(inject([Store], (store: Store<AppState>) => {
+      fixture = TestBed.createComponent(SubmissionSectionSherpaPoliciesComponent);
+      component = fixture.componentInstance;
+      de = fixture.debugElement;
+      sectionsServiceStub.getSectionData.and.returnValue(observableOf(SherpaDataResponse));
+      fixture.detectChanges();
+    }));
+
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should show refresh button', () => {
+      expect(de.query(By.css('[data-test="refresh-btn"]'))).toBeTruthy();
+    });
+
+    it('should show publisher information', () => {
+      expect(de.query(By.css('ds-publication-information'))).toBeTruthy();
+    });
+
+    it('should show publisher policy', () => {
+      expect(de.query(By.css('ds-publisher-policy'))).toBeTruthy();
+    });
+
+    it('should show metadata information', () => {
+      expect(de.query(By.css('ds-metadata-information'))).toBeTruthy();
+    });
+
+    it('when refresh button click operationsBuilder.remove should have been called', () => {
+      de.query(By.css('[data-test="refresh-btn"]')).nativeElement.click();
+      expect(operationsBuilder.remove).toHaveBeenCalled();
+    });
+
+
+  });
+
+});
--- a/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.ts
+++ b/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.ts
@@ -0,0 +1,127 @@
+import { AlertType } from '../../../shared/alert/aletr-type';
+import { Component, Inject } from '@angular/core';
+
+import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
+
+import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
+import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
+import {
+  WorkspaceitemSectionSherpaPoliciesObject
+} from '../../../core/submission/models/workspaceitem-section-sherpa-policies.model';
+import { renderSectionFor } from '../sections-decorator';
+import { SectionsType } from '../sections-type';
+import { SectionDataObject } from '../models/section-data.model';
+import { SectionsService } from '../sections.service';
+import { SectionModelComponent } from '../models/section.model';
+import { SubmissionService } from '../../submission.service';
+import { hasValue, isEmpty } from '../../../shared/empty.util';
+
+/**
+ * This component represents a section for the sherpa policy informations structure.
+ */
+@Component({
+  selector: 'ds-section-sherpa-policies',
+  templateUrl: './section-sherpa-policies.component.html',
+  styleUrls: ['./section-sherpa-policies.component.scss']
+})
+@renderSectionFor(SectionsType.SherpaPolicies)
+export class SubmissionSectionSherpaPoliciesComponent extends SectionModelComponent {
+
+  /**
+   * The accesses section data
+   * @type {WorkspaceitemSectionAccessesObject}
+   */
+  public sherpaPoliciesData$: BehaviorSubject<WorkspaceitemSectionSherpaPoliciesObject> = new BehaviorSubject<WorkspaceitemSectionSherpaPoliciesObject>(null);
+
+  /**
+   * The [[JsonPatchOperationPathCombiner]] object
+   * @type {JsonPatchOperationPathCombiner}
+   */
+  protected pathCombiner: JsonPatchOperationPathCombiner;
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   * @type {Array}
+   */
+  protected subs: Subscription[] = [];
+
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  public isCollapsed = false;
+
+
+  /**
+   * The AlertType enumeration
+   * @type {AlertType}
+   */
+  public AlertTypeEnum = AlertType;
+
+  /**
+   * Initialize instance variables
+   *
+   * @param {SectionsService} sectionService
+   * @param {SectionDataObject} injectedSectionData
+   * @param {JsonPatchOperationsBuilder} operationsBuilder
+   * @param {SubmissionService} submissionService
+   * @param {string} injectedSubmissionId
+   */
+  constructor(
+    protected sectionService: SectionsService,
+    protected operationsBuilder: JsonPatchOperationsBuilder,
+    private submissionService: SubmissionService,
+    @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
+    @Inject('submissionIdProvider') public injectedSubmissionId: string) {
+    super(undefined, injectedSectionData, injectedSubmissionId);
+  }
+
+  /**
+   * Unsubscribe from all subscriptions
+   */
+  onSectionDestroy() {
+
+    this.subs
+      .filter((subscription) => hasValue(subscription))
+      .forEach((subscription) => subscription.unsubscribe());
+  }
+
+
+  /**
+   * Initialize all instance variables and retrieve collection default access conditions
+   */
+  protected onSectionInit(): void {
+    this.pathCombiner = new JsonPatchOperationPathCombiner('sections', this.sectionData.id);
+    this.subs.push(
+      this.sectionService.getSectionData(this.submissionId, this.sectionData.id, this.sectionData.sectionType)
+        .subscribe((sherpaPolicies: WorkspaceitemSectionSherpaPoliciesObject) => {
+          this.sherpaPoliciesData$.next(sherpaPolicies);
+        })
+    );
+  }
+
+  /**
+   * Get section status
+   *
+   * @return Observable<boolean>
+   *     the section status
+   */
+  protected getSectionStatus(): Observable<boolean> {
+    return of(true);
+  }
+
+  /**
+   * Check if section has no data
+   */
+  hasNoData(): boolean {
+    return isEmpty(this.sherpaPoliciesData$.value);
+  }
+
+  /**
+   * Refresh sherpa information
+   */
+  refresh() {
+    this.operationsBuilder.remove(this.pathCombiner.getPath('retrievalTime'));
+    this.submissionService.dispatchSaveSection(this.submissionId, this.sectionData.id);
+  }
+
+}
--- a/src/app/submission/submission.module.ts
+++ b/src/app/submission/submission.module.ts
@@ -22,15 +22,27 @@ import { SubmissionSectionLicenseComponent } from './sections/license/section-li
 import { SubmissionUploadsConfigService } from '../core/config/submission-uploads-config.service';
 import { SubmissionEditComponent } from './edit/submission-edit.component';
 import { SubmissionSectionUploadFileComponent } from './sections/upload/file/section-upload-file.component';
-import { SubmissionSectionUploadFileEditComponent } from './sections/upload/file/edit/section-upload-file-edit.component';
-import { SubmissionSectionUploadFileViewComponent } from './sections/upload/file/view/section-upload-file-view.component';
-import { SubmissionSectionUploadAccessConditionsComponent } from './sections/upload/accessConditions/submission-section-upload-access-conditions.component';
+import {
+  SubmissionSectionUploadFileEditComponent
+} from './sections/upload/file/edit/section-upload-file-edit.component';
+import {
+  SubmissionSectionUploadFileViewComponent
+} from './sections/upload/file/view/section-upload-file-view.component';
+import {
+  SubmissionSectionUploadAccessConditionsComponent
+} from './sections/upload/accessConditions/submission-section-upload-access-conditions.component';
 import { SubmissionSubmitComponent } from './submit/submission-submit.component';
 import { storeModuleConfig } from '../app.reducer';
 import { SubmissionImportExternalComponent } from './import-external/submission-import-external.component';
-import { SubmissionImportExternalSearchbarComponent } from './import-external/import-external-searchbar/submission-import-external-searchbar.component';
-import { SubmissionImportExternalPreviewComponent } from './import-external/import-external-preview/submission-import-external-preview.component';
-import { SubmissionImportExternalCollectionComponent } from './import-external/import-external-collection/submission-import-external-collection.component';
+import {
+  SubmissionImportExternalSearchbarComponent
+} from './import-external/import-external-searchbar/submission-import-external-searchbar.component';
+import {
+  SubmissionImportExternalPreviewComponent
+} from './import-external/import-external-preview/submission-import-external-preview.component';
+import {
+  SubmissionImportExternalCollectionComponent
+} from './import-external/import-external-collection/submission-import-external-collection.component';
 import { SubmissionSectionCcLicensesComponent } from './sections/cc-license/submission-section-cc-licenses.component';
 import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module';
@@ -38,10 +50,19 @@ import { ThemedSubmissionEditComponent } from './edit/themed-submission-edit.com
 import { ThemedSubmissionSubmitComponent } from './submit/themed-submission-submit.component';
 import { ThemedSubmissionImportExternalComponent } from './import-external/themed-submission-import-external.component';
 import { FormModule } from '../shared/form/form.module';
-import { NgbAccordionModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbModalModule, NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
 import { SubmissionSectionAccessesComponent } from './sections/accesses/section-accesses.component';
 import { SubmissionAccessesConfigService } from '../core/config/submission-accesses-config.service';
 import { SectionAccessesService } from './sections/accesses/section-accesses.service';
+import { SubmissionSectionSherpaPoliciesComponent } from './sections/sherpa-policies/section-sherpa-policies.component';
+import { ContentAccordionComponent } from './sections/sherpa-policies/content-accordion/content-accordion.component';
+import { PublisherPolicyComponent } from './sections/sherpa-policies/publisher-policy/publisher-policy.component';
+import {
+  PublicationInformationComponent
+} from './sections/sherpa-policies/publication-information/publication-information.component';
+import {
+  MetadataInformationComponent
+} from './sections/sherpa-policies/metadata-information/metadata-information.component';

 const ENTRY_COMPONENTS = [
  // put only entry components that use custom decorator
@@ -50,7 +71,8 @@ const ENTRY_COMPONENTS = [
  SubmissionSectionLicenseComponent,
  SubmissionSectionCcLicensesComponent,
  SubmissionSectionAccessesComponent,
-  SubmissionSectionUploadFileEditComponent
+  SubmissionSectionUploadFileEditComponent,
+  SubmissionSectionSherpaPoliciesComponent,
 ];

 const DECLARATIONS = [
@@ -75,6 +97,10 @@ const DECLARATIONS = [
  SubmissionImportExternalSearchbarComponent,
  SubmissionImportExternalPreviewComponent,
  SubmissionImportExternalCollectionComponent,
+  ContentAccordionComponent,
+  PublisherPolicyComponent,
+  PublicationInformationComponent,
+  MetadataInformationComponent,
 ];

@NgModule({
@@ -87,8 +113,9 @@ const DECLARATIONS = [
    JournalEntitiesModule.withEntryComponents(),
    ResearchEntitiesModule.withEntryComponents(),
    FormModule,
-    NgbAccordionModule,
-    NgbModalModule
+    NgbModalModule,
+    NgbCollapseModule,
+    NgbAccordionModule
  ],
  declarations: DECLARATIONS,
  exports: DECLARATIONS,
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1601,6 +1601,46 @@
  "grant-request-copy.success": "Successfully granted item request",


+  "health.breadcrumbs": "Health",
+
+  "health-page.heading" : "Health",
+
+  "health-page.info-tab" : "Info",
+
+  "health-page.status-tab" : "Status",
+
+  "health-page.error.msg": "The health check service is temporarily unavailable",
+
+  "health-page.property.status": "Status code",
+
+  "health-page.section.db.title": "Database",
+
+  "health-page.section.geoIp.title": "GeoIp",
+
+  "health-page.section.solrAuthorityCore.title": "Sor: authority core",
+
+  "health-page.section.solrOaiCore.title": "Sor: oai core",
+
+  "health-page.section.solrSearchCore.title": "Sor: search core",
+
+  "health-page.section.solrStatisticsCore.title": "Sor: statistics core",
+
+  "health-page.section-info.app.title": "Application Backend",
+
+  "health-page.section-info.java.title": "Java",
+
+  "health-page.status": "Status",
+
+  "health-page.status.ok.info": "Operational",
+
+  "health-page.status.error.info": "Problems detected",
+
+  "health-page.status.warning.info": "Possible issues detected",
+
+  "health-page.title": "Health",
+
+  "health-page.section.no-issues": "No issues detected",
+

  "home.description": "",

@@ -2556,13 +2596,15 @@

  "menu.section.icon.find": "Find menu section",

+  "menu.section.icon.health": "Health check menu section",
+
  "menu.section.icon.import": "Import menu section",

  "menu.section.icon.new": "New menu section",

  "menu.section.icon.pin": "Pin sidebar",

-  "menu.section.icon.processes": "Processes menu section",
+  "menu.section.icon.processes": "Processes Health",

  "menu.section.icon.registries": "Registries menu section",

@@ -2604,6 +2646,8 @@

  "menu.section.processes": "Processes",

+  "menu.section.health": "Health",
+


  "menu.section.registries": "Registries",
@@ -4015,10 +4059,15 @@

  "submission.sections.submit.progressbar.license": "Deposit license",

+  "submission.sections.submit.progressbar.sherpapolicy": "Sherpa policies",
+
  "submission.sections.submit.progressbar.upload": "Upload files",

+  "submission.sections.submit.progressbar.sherpaPolicies": "Publisher open access policy information",


+  "submission.sections.sherpa-policy.title-empty": "No publisher policy information available. If your work has an associated ISSN, please enter it above to see any related publisher open access policies.",
+
  "submission.sections.status.errors.title": "Errors",

  "submission.sections.status.valid.title": "Valid",
@@ -4031,6 +4080,10 @@

  "submission.sections.status.warnings.aria": "has warnings",

+  "submission.sections.status.info.title": "Additional Information",
+
+  "submission.sections.status.info.aria": "Additional Information",
+
  "submission.sections.toggle.open": "Open section",

  "submission.sections.toggle.close": "Close section",
@@ -4130,6 +4183,60 @@
  "submission.sections.accesses.form.until-placeholder": "Until",


+  "submission.sections.sherpa.publication.information": "Publication information",
+
+  "submission.sections.sherpa.publication.information.title": "Title",
+
+  "submission.sections.sherpa.publication.information.issns": "ISSNs",
+
+  "submission.sections.sherpa.publication.information.url": "URL",
+
+  "submission.sections.sherpa.publication.information.publishers": "Publisher",
+
+  "submission.sections.sherpa.publication.information.romeoPub": "Romeo Pub",
+
+  "submission.sections.sherpa.publication.information.zetoPub": "Zeto Pub",
+
+  "submission.sections.sherpa.publisher.policy": "Publisher Policy",
+
+  "submission.sections.sherpa.publisher.policy.description": "The below information was found via Sherpa Romeo. Based on the policies of your publisher, it provides advice regarding whether an embargo may be necessary and/or which files you are allowed to upload. If you have questions, please contact your site administrator via the feedback form in the footer.",
+
+  "submission.sections.sherpa.publisher.policy.openaccess": "Open Access pathways permitted by this journal's policy are listed below by article version. Click on a pathway for a more detailed view",
+
+  "submission.sections.sherpa.publisher.policy.more.information": "For more information, please see the following links:",
+
+  "submission.sections.sherpa.publisher.policy.version": "Version",
+
+  "submission.sections.sherpa.publisher.policy.embargo": "Embargo",
+
+  "submission.sections.sherpa.publisher.policy.noembargo": "No Embargo",
+
+  "submission.sections.sherpa.publisher.policy.nolocation": "None",
+
+  "submission.sections.sherpa.publisher.policy.license": "License",
+
+  "submission.sections.sherpa.publisher.policy.prerequisites": "Prerequisites",
+
+  "submission.sections.sherpa.publisher.policy.location": "Location",
+
+  "submission.sections.sherpa.publisher.policy.conditions": "Conditions",
+
+  "submission.sections.sherpa.publisher.policy.refresh": "Refresh",
+
+  "submission.sections.sherpa.record.information": "Record Information",
+
+  "submission.sections.sherpa.record.information.id": "ID",
+
+  "submission.sections.sherpa.record.information.date.created": "Date Created",
+
+  "submission.sections.sherpa.record.information.date.modified": "Last Modified",
+
+  "submission.sections.sherpa.record.information.uri": "URI",
+
+  "submission.sections.sherpa.error.message": "There was an error retrieving sherpa informations",
+
+
+
  "submission.submit.breadcrumbs": "New submission",

  "submission.submit.title": "New submission",
--- a/src/config/actuators.config.ts
+++ b/src/config/actuators.config.ts
@@ -0,0 +1,11 @@
+import { Config } from './config.interface';
+
+/**
+ * Config that determines the spring Actuators options
+ */
+export class ActuatorsConfig implements Config {
+  /**
+   * The endpoint path
+   */
+  public endpointPath: string;
+}
--- a/src/config/app-config.interface.ts
+++ b/src/config/app-config.interface.ts
@@ -15,6 +15,7 @@ import { UIServerConfig } from './ui-server-config.interface';
 import { MediaViewerConfig } from './media-viewer-config.interface';
 import { BrowseByConfig } from './browse-by-config.interface';
 import { BundleConfig } from './bundle-config.interface';
+import { ActuatorsConfig } from './actuators.config';

 interface AppConfig extends Config {
  ui: UIServerConfig;
@@ -34,6 +35,7 @@ interface AppConfig extends Config {
  themes: ThemeConfig[];
  mediaViewer: MediaViewerConfig;
  bundle: BundleConfig;
+  actuators: ActuatorsConfig
 }

 const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');
--- a/src/config/default-app-config.ts
+++ b/src/config/default-app-config.ts
@@ -15,6 +15,7 @@ import { SubmissionConfig } from './submission-config.interface';
 import { ThemeConfig } from './theme.model';
 import { UIServerConfig } from './ui-server-config.interface';
 import { BundleConfig } from './bundle-config.interface';
+import { ActuatorsConfig } from './actuators.config';

 export class DefaultAppConfig implements AppConfig {
  production = false;
@@ -48,6 +49,10 @@ export class DefaultAppConfig implements AppConfig {
    nameSpace: '/',
  };

+  actuators: ActuatorsConfig = {
+    endpointPath: '/actuator/health'
+  };
+
  // Caching settings
  cache: CacheConfig = {
    // NOTE: how long should objects be cached for by default
--- a/src/environments/environment.test.ts
+++ b/src/environments/environment.test.ts
@@ -38,6 +38,10 @@ export const environment: BuildConfig = {
    baseUrl: 'https://rest.com/api'
  },

+  actuators: {
+    endpointPath: '/actuator/health'
+  },
+
  // Caching settings
  cache: {
    // NOTE: how long should objects be cached for by default
--- a/yarn.lock
+++ b/yarn.lock
@@ -3221,6 +3221,14 @@ axios@0.21.4:
  dependencies:
    follow-redirects "^1.14.0"

+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 axobject-query@^2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -6118,7 +6126,7 @@ flatted@^3.1.0, flatted@^3.2.5:
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
  integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==

-follow-redirects@^1.0.0, follow-redirects@^1.14.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.14.9:
  version "1.14.9"
  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
  integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==