Merge remote-tracking branch 'upstream/main' into added-skip-to-main-content-button_contribute-main

# Conflicts: # src/app/root/root.component.html
2025-10-07 01:54:15 +00:00 · 2023-11-10 00:18:41 +01:00
parent c4205163f9 684846ae36
commit 19ed3c88e3
290 changed files with 13695 additions and 3515 deletions
--- a/.github/disabled-workflows/pull_request_opened.yml
+++ b/.github/disabled-workflows/pull_request_opened.yml
@@ -1,26 +0,0 @@
-# This workflow runs whenever a new pull request is created
-# TEMPORARILY DISABLED. Unfortunately this doesn't work for PRs created from forked repositories (which is how we tend to create PRs).
-# There is no known workaround yet. See https://github.community/t/how-to-use-github-token-for-prs-from-forks/16818
-name: Pull Request opened
-
-# Only run for newly opened PRs against the "main" branch
-on: 
-  pull_request:
-    types: [opened]
-    branches: 
-      - main
-
-jobs:
-  automation:
-    runs-on: ubuntu-latest
-    steps:
-    # Assign the PR to whomever created it. This is useful for visualizing assignments on project boards
-    # See https://github.com/marketplace/actions/pull-request-assigner
-    - name: Assign PR to creator
-      uses: thomaseizinger/assign-pr-creator-action@v1.0.0
-      # Note, this authentication token is created automatically
-      # See: https://docs.github.com/en/actions/configuring-and-managing-workflows/authenticating-with-the-github_token
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-      # Ignore errors. It is possible the PR was created by someone who cannot be assigned
-      continue-on-error: true
--- a/.github/workflows/codescan.yml
+++ b/.github/workflows/codescan.yml
@@ -5,12 +5,16 @@
 # because CodeQL requires a fresh build with all tests *disabled*.
 name: "Code Scanning"

-# Run this code scan for all pushes / PRs to main branch. Also run once a week.
+# Run this code scan for all pushes / PRs to main or maintenance branches. Also run once a week.
 on:
  push:
-    branches: [ main ]
+    branches:
+      - main
+      - 'dspace-**'
  pull_request:
-    branches: [ main ]
+    branches:
+      - main
+      - 'dspace-**'
    # Don't run if PR is only updating static documentation
    paths-ignore:
      - '**/*.md'
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -15,23 +15,19 @@ on:
 permissions:
  contents: read  #  to fetch code (actions/checkout)

-jobs:
-  docker:
-    # Ensure this job never runs on forked repos. It's only executed for 'dspace/dspace-angular'
-    if: github.repository == 'dspace/dspace-angular'
-    runs-on: ubuntu-latest
-    env:
+
+env:
  # Define tags to use for Docker images based on Git tags/branches (for docker/metadata-action)
-      # For a new commit on default branch (main), use the literal tag 'dspace-7_x' on Docker image.
+  # For a new commit on default branch (main), use the literal tag 'latest' on Docker image.
  # For a new commit on other branches, use the branch name as the tag for Docker image.
  # For a new tag, copy that tag name as the tag for Docker image.
  IMAGE_TAGS: |
-        type=raw,value=dspace-7_x,enable=${{ endsWith(github.ref, github.event.repository.default_branch) }}
+    type=raw,value=latest,enable=${{ endsWith(github.ref, github.event.repository.default_branch) }}
    type=ref,event=branch,enable=${{ !endsWith(github.ref, github.event.repository.default_branch) }}
    type=ref,event=tag
  # Define default tag "flavor" for docker/metadata-action per
  # https://github.com/docker/metadata-action#flavor-input
-      # We turn off 'latest' tag by default.
+  # We manage the 'latest' tag ourselves to the 'main' branch (see settings above)
  TAGS_FLAVOR: |
    latest=false
  # Architectures / Platforms for which we will build Docker images
@@ -39,6 +35,16 @@ jobs:
  # If this is NOT a PR (e.g. a tag or merge commit), also build for ARM64.
  PLATFORMS: linux/amd64${{ github.event_name != 'pull_request' && ', linux/arm64' || '' }}

+
+jobs:
+  ###############################################
+  # Build/Push the 'dspace/dspace-angular' image
+  ###############################################
+  dspace-angular:
+    # Ensure this job never runs on forked repos. It's only executed for 'dspace/dspace-angular'
+    if: github.repository == 'dspace/dspace-angular'
+    runs-on: ubuntu-latest
+
    steps:
      # https://github.com/actions/checkout
      - name: Checkout codebase
@@ -61,9 +67,6 @@ jobs:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_ACCESS_TOKEN }}

-      ###############################################
-      # Build/Push the 'dspace/dspace-angular' image
-      ###############################################
      # https://github.com/docker/metadata-action
      # Get Metadata for docker_build step below
      - name: Sync metadata (tags, labels) from GitHub to Docker for 'dspace-angular' image
@@ -77,7 +80,7 @@ jobs:
      # https://github.com/docker/build-push-action
      - name: Build and push 'dspace-angular' image
        id: docker_build
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
        with:
          context: .
          file: ./Dockerfile
@@ -89,9 +92,36 @@ jobs:
          tags: ${{ steps.meta_build.outputs.tags }}
          labels: ${{ steps.meta_build.outputs.labels }}

-      #####################################################
+  #############################################################
  # Build/Push the 'dspace/dspace-angular' image ('-dist' tag)
-      #####################################################
+  #############################################################
+  dspace-angular-dist:
+    # Ensure this job never runs on forked repos. It's only executed for 'dspace/dspace-angular'
+    if: github.repository == 'dspace/dspace-angular'
+    runs-on: ubuntu-latest
+
+    steps:
+      # https://github.com/actions/checkout
+      - name: Checkout codebase
+        uses: actions/checkout@v3
+
+      # https://github.com/docker/setup-buildx-action
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      # https://github.com/docker/setup-qemu-action
+      - name: Set up QEMU emulation to build for multiple architectures
+        uses: docker/setup-qemu-action@v2
+
+      # https://github.com/docker/login-action
+      - name: Login to DockerHub
+        # Only login if not a PR, as PRs only trigger a Docker build and not a push
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_ACCESS_TOKEN }}
+
      # https://github.com/docker/metadata-action
      # Get Metadata for docker_build_dist step below
      - name: Sync metadata (tags, labels) from GitHub to Docker for 'dspace-angular-dist' image
@@ -107,7 +137,7 @@ jobs:

      - name: Build and push 'dspace-angular-dist' image
        id: docker_build_dist
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
        with:
          context: .
          file: ./Dockerfile.dist
--- a/.github/workflows/label_merge_conflicts.yml
+++ b/.github/workflows/label_merge_conflicts.yml
@@ -1,11 +1,12 @@
 # This workflow checks open PRs for merge conflicts and labels them when conflicts are found
 name: Check for merge conflicts

-# Run whenever the "main" branch is updated
-# NOTE: This means merge conflicts are only checked for when a PR is merged to main.
+# Run this for all pushes (i.e. merges) to 'main' or maintenance branches
 on:
  push:
-    branches: [ main ]
+    branches:
+      - main
+      - 'dspace-**'
  # So that the `conflict_label_name` is removed if conflicts are resolved,
  # we allow this to run for `pull_request_target` so that github secrets are available.
  pull_request_target:
@@ -24,6 +25,8 @@ jobs:
      # See: https://github.com/prince-chrismc/label-merge-conflicts-action
      - name: Auto-label PRs with merge conflicts
        uses: prince-chrismc/label-merge-conflicts-action@v3
+        # Ignore any failures -- may occur (randomly?) for older, outdated PRs.
+        continue-on-error: true
        # Add "merge conflict" label if a merge conflict is detected. Remove it when resolved.
        # Note, the authentication token is created automatically
        # See: https://docs.github.com/en/actions/configuring-and-managing-workflows/authenticating-with-the-github_token
--- a/.github/workflows/port_merged_pull_request.yml
+++ b/.github/workflows/port_merged_pull_request.yml
@@ -0,0 +1,46 @@
+# This workflow will attempt to port a merged pull request to
+# the branch specified in a "port to" label (if exists)
+name: Port merged Pull Request
+
+# Only run for merged PRs against the "main" or maintenance branches
+# We allow this to run for `pull_request_target` so that github secrets are available
+# (This is required when the PR comes from a forked repo)
+on:
+  pull_request_target:
+    types: [ closed ]
+    branches:
+      - main
+      - 'dspace-**'
+
+permissions:
+  contents: write      # so action can add comments
+  pull-requests: write # so action can create pull requests
+
+jobs:
+  port_pr:
+    runs-on: ubuntu-latest
+    # Don't run on closed *unmerged* pull requests
+    if: github.event.pull_request.merged
+    steps:
+      # Checkout code
+      - uses: actions/checkout@v3
+      # Port PR to other branch (ONLY if labeled with "port to")
+      # See https://github.com/korthout/backport-action
+      - name: Create backport pull requests
+        uses: korthout/backport-action@v1
+        with:
+          # Trigger based on a "port to [branch]" label on PR
+          # (This label must specify the branch name to port to)
+          label_pattern: '^port to ([^ ]+)$'
+          # Title to add to the (newly created) port PR
+          pull_title: '[Port ${target_branch}] ${pull_title}'
+          # Description to add to the (newly created) port PR
+          pull_description: 'Port of #${pull_number} by @${pull_author} to `${target_branch}`.'
+          # Copy all labels from original PR to (newly created) port PR
+          # NOTE: The labels matching 'label_pattern' are automatically excluded
+          copy_labels_pattern: '.*'
+          # Skip any merge commits in the ported PR. This means only non-merge commits are cherry-picked to the new PR
+          merge_commits: 'skip'
+          # Use a personal access token (PAT) to create PR as 'dspace-bot' user.
+          # A PAT is required in order for the new PR to trigger its own actions (for CI checks)
+          github_token: ${{ secrets.PR_PORT_TOKEN }}
--- a/.github/workflows/pull_request_opened.yml
+++ b/.github/workflows/pull_request_opened.yml
@@ -0,0 +1,24 @@
+# This workflow runs whenever a new pull request is created
+name: Pull Request opened
+
+# Only run for newly opened PRs against the "main" or maintenance branches
+# We allow this to run for `pull_request_target` so that github secrets are available
+# (This is required to assign a PR back to the creator when the PR comes from a forked repo)
+on:
+  pull_request_target:
+    types: [ opened ]
+    branches:
+      - main
+      - 'dspace-**'
+
+permissions:
+  pull-requests: write
+
+jobs:
+  automation:
+    runs-on: ubuntu-latest
+    steps:
+    # Assign the PR to whomever created it. This is useful for visualizing assignments on project boards
+    # See https://github.com/toshimaru/auto-author-assign
+    - name: Assign PR to creator
+      uses: toshimaru/auto-author-assign@v1.6.2
--- a/Dockerfile.dist
+++ b/Dockerfile.dist
@@ -2,7 +2,7 @@
 # See https://github.com/DSpace/dspace-angular/tree/main/docker for usage details

 # Test build:
-# docker build -f Dockerfile.dist -t dspace/dspace-angular:dspace-7_x-dist .
+# docker build -f Dockerfile.dist -t dspace/dspace-angular:latest-dist .

 FROM node:18-alpine as build

--- a/README.md
+++ b/README.md
@@ -157,8 +157,8 @@ DSPACE_UI_SSL => DSPACE_SSL

 The same settings can also be overwritten by setting system environment variables instead, E.g.:
 ```bash
-export DSPACE_HOST=api7.dspace.org
-export DSPACE_UI_PORT=4200
+export DSPACE_HOST=demo.dspace.org
+export DSPACE_UI_PORT=4000
 ```

 The priority works as follows: **environment variable** overrides **variable in `.env` file** overrides external config set by `DSPACE_APP_CONFIG_PATH` overrides **`config.(prod or dev).yml`**
@@ -288,7 +288,7 @@ E2E tests (aka integration tests) use [Cypress.io](https://www.cypress.io/). Con
 The test files can be found in the `./cypress/integration/` folder.

 Before you can run e2e tests, two things are REQUIRED:
-1. You MUST be running the DSpace backend (i.e. REST API) locally. The e2e tests will *NOT* succeed if run against our demo REST API (https://api7.dspace.org/server/), as that server is uncontrolled and may have content added/removed at any time.
+1. You MUST be running the DSpace backend (i.e. REST API) locally. The e2e tests will *NOT* succeed if run against our demo/sandbox REST API (https://demo.dspace.org/server/ or https://sandbox.dspace.org/server/), as those sites may have content added/removed at any time.
    * After starting up your backend on localhost, make sure either your `config.prod.yml` or `config.dev.yml` has its `rest` settings defined to use that localhost backend.
 	* If you'd prefer, you may instead use environment variables as described at [Configuring](#configuring). For example:
       ```
--- a/config/config.example.yml
+++ b/config/config.example.yml
@@ -22,7 +22,7 @@ ui:
 # 'synced' with the 'dspace.server.url' setting in your backend's local.cfg.
 rest:
  ssl: true
-  host: api7.dspace.org
+  host: sandbox.dspace.org
  port: 443
  # NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
  nameSpace: /server
@@ -208,6 +208,9 @@ languages:
  - code: pt-BR
    label: Português do Brasil
    active: true
+  - code: sr-lat
+    label: Srpski (lat)
+    active: true
  - code: fi
    label: Suomi
    active: true
@@ -232,6 +235,9 @@ languages:
  - code: el
    label: Ελληνικά
    active: true
+  - code: sr-cyr
+    label: Српски
+    active: true
  - code: uk
    label: Yкраї́нська
    active: true
@@ -292,33 +298,33 @@ themes:
  #
  # # A theme with a handle property will match the community, collection or item with the given
  # # handle, and all collections and/or items within it
-  # - name: 'custom',
-  #   handle: '10673/1233'
+  # - name: custom
+  #   handle: 10673/1233
  #
  # # A theme with a regex property will match the route using a regular expression. If it
  # # matches the route for a community or collection it will also apply to all collections
  # # and/or items within it
-  # - name: 'custom',
-  #   regex: 'collections\/e8043bc2.*'
+  # - name: custom
+  #   regex: collections\/e8043bc2.*
  #
  # # A theme with a uuid property will match the community, collection or item with the given
  # # ID, and all collections and/or items within it
-  # - name: 'custom',
-  #   uuid: '0958c910-2037-42a9-81c7-dca80e3892b4'
+  # - name: custom
+  #   uuid: 0958c910-2037-42a9-81c7-dca80e3892b4
  #
  # # The extends property specifies an ancestor theme (by name). Whenever a themed component is not found
  # # in the current theme, its ancestor theme(s) will be checked recursively before falling back to default.
-  # - name: 'custom-A',
-  #   extends: 'custom-B',
+  # - name: custom-A
+  #   extends: custom-B
  #   # Any of the matching properties above can be used
-  #   handle: '10673/34'
+  #   handle: 10673/34
  #
-  # - name: 'custom-B',
-  #   extends: 'custom',
-  #   handle: '10673/12'
+  # - name: custom-B
+  #   extends: custom
+  #   handle: 10673/12
  #
  # # A theme with only a name will match every route
-  # name: 'custom'
+  # name: custom
  #
  # # This theme will use the default bootstrap styling for DSpace components
  # - name: BASE_THEME_NAME
--- a/config/config.yml
+++ b/config/config.yml
@@ -1,5 +1,5 @@
 rest:
  ssl: true
-  host: api7.dspace.org
+  host: sandbox.dspace.org
  port: 443
  nameSpace: /server
--- a/cypress/e2e/community-list.cy.ts
+++ b/cypress/e2e/community-list.cy.ts
@@ -1,4 +1,3 @@
-import { Options } from 'cypress-axe';
 import { testA11y } from 'cypress/support/utils';

 describe('Community List Page', () => {
@@ -13,13 +12,6 @@ describe('Community List Page', () => {
        cy.get('[data-test="expand-button"]').click({ multiple: true });

        // Analyze <ds-community-list-page> for accessibility issues
-        // Disable heading-order checks until it is fixed
-        testA11y('ds-community-list-page',
-            {
-                rules: {
-                    'heading-order': { enabled: false }
-                }
-            } as Options
-        );
+        testA11y('ds-community-list-page');
    });
 });
--- a/cypress/e2e/header.cy.ts
+++ b/cypress/e2e/header.cy.ts
@@ -11,8 +11,7 @@ describe('Header', () => {
        testA11y({
            include: ['ds-header'],
            exclude: [
-                ['#search-navbar-container'], // search in navbar has duplicative ID. Will be fixed in #1174
-                ['.dropdownLogin']            // "Log in" link has color contrast issues. Will be fixed in #1149
+                ['#search-navbar-container'] // search in navbar has duplicative ID. Will be fixed in #1174
            ],
        });
    });
--- a/cypress/e2e/item-page.cy.ts
+++ b/cypress/e2e/item-page.cy.ts
@@ -1,4 +1,3 @@
-import { Options } from 'cypress-axe';
 import { TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';

@@ -19,13 +18,16 @@ describe('Item  Page', () => {
        cy.get('ds-item-page').should('be.visible');

        // Analyze <ds-item-page> for accessibility issues
-        // Disable heading-order checks until it is fixed
-        testA11y('ds-item-page',
-            {
-                rules: {
-                    'heading-order': { enabled: false }
-                }
-            } as Options
-        );
+        testA11y('ds-item-page');
+    });
+
+    it('should pass accessibility tests on full item page', () => {
+        cy.visit(ENTITYPAGE + '/full');
+
+        // <ds-full-item-page> tag must be loaded
+        cy.get('ds-full-item-page').should('be.visible');
+
+        // Analyze <ds-full-item-page> for accessibility issues
+        testA11y('ds-full-item-page');
    });
 });
--- a/cypress/e2e/login-modal.cy.ts
+++ b/cypress/e2e/login-modal.cy.ts
@@ -1,4 +1,5 @@
 import { TEST_ADMIN_PASSWORD, TEST_ADMIN_USER, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
+import { testA11y } from 'cypress/support/utils';

 const page = {
    openLoginMenu() {
@@ -123,4 +124,15 @@ describe('Login Modal', () => {
        cy.location('pathname').should('eq', '/forgot');
        cy.get('ds-forgot-email').should('exist');
    });
+
+    it('should pass accessibility tests', () => {
+        cy.visit('/');
+
+        page.openLoginMenu();
+
+        cy.get('ds-log-in').should('exist');
+
+        // Analyze <ds-log-in> for accessibility issues
+        testA11y('ds-log-in');
+    });
 });
--- a/cypress/e2e/my-dspace.cy.ts
+++ b/cypress/e2e/my-dspace.cy.ts
@@ -19,21 +19,7 @@ describe('My DSpace page', () => {
        cy.get('.filter-toggle').click({ multiple: true });

        // Analyze <ds-my-dspace-page> for accessibility issues
-        testA11y(
-            {
-                include: ['ds-my-dspace-page'],
-                exclude: [
-                    ['nouislider'] // Date filter slider is missing ARIA labels. Will be fixed by #1175
-                ],
-            },
-            {
-                rules: {
-                    // Search filters fail these two "moderate" impact rules
-                    'heading-order': { enabled: false },
-                    'landmark-unique': { enabled: false }
-                }
-            } as Options
-        );
+        testA11y('ds-my-dspace-page');
    });

    it('should have a working detailed view that passes accessibility tests', () => {
--- a/cypress/e2e/pagenotfound.cy.ts
+++ b/cypress/e2e/pagenotfound.cy.ts
@@ -1,8 +1,13 @@
+import { testA11y } from 'cypress/support/utils';
+
 describe('PageNotFound', () => {
    it('should contain element ds-pagenotfound when navigating to page that doesnt exist', () => {
        // request an invalid page (UUIDs at root path aren't valid)
        cy.visit('/e9019a69-d4f1-4773-b6a3-bd362caa46f2', { failOnStatusCode: false });
        cy.get('ds-pagenotfound').should('be.visible');
+
+        // Analyze <ds-pagenotfound> for accessibility issues
+        testA11y('ds-pagenotfound');
    });

    it('should not contain element ds-pagenotfound when navigating to existing page', () => {
--- a/cypress/e2e/search-page.cy.ts
+++ b/cypress/e2e/search-page.cy.ts
@@ -27,21 +27,7 @@ describe('Search Page', () => {
        cy.get('[data-test="filter-toggle"]').click({ multiple: true });

        // Analyze <ds-search-page> for accessibility issues
-        testA11y(
-            {
-                include: ['ds-search-page'],
-                exclude: [
-                    ['nouislider'] // Date filter slider is missing ARIA labels. Will be fixed by #1175
-                ],
-            },
-            {
-                rules: {
-                    // Search filters fail these two "moderate" impact rules
-                    'heading-order': { enabled: false },
-                    'landmark-unique': { enabled: false }
-                }
-            } as Options
-        );
+        testA11y('ds-search-page');
    });

    it('should have a working grid view that passes accessibility tests', () => {
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -177,6 +177,8 @@ function generateViewEvent(uuid: string, dsoType: string): void {
                [XSRF_REQUEST_HEADER] : csrfToken,
                // use a known public IP address to avoid being seen as a "bot"
                'X-Forwarded-For': '1.1.1.1',
+                // Use a user-agent of a Firefox browser on Windows. This again avoids being seen as a "bot"
+                'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/119.0',
            },
            //form: true, // indicates the body should be form urlencoded
            body: { targetId: uuid, targetType: dsoType },
--- a/docker/README.md
+++ b/docker/README.md
@@ -23,14 +23,14 @@ the Docker compose scripts in this 'docker' folder.
 This Dockerfile is used to build a *development* DSpace 7 Angular UI image, published as 'dspace/dspace-angular'

 ```
-docker build -t dspace/dspace-angular:dspace-7_x .
+docker build -t dspace/dspace-angular:latest .
 ```

 This image is built *automatically* after each commit is made to the `main` branch.

 Admins to our DockerHub repo can manually publish with the following command.
 ```
-docker push dspace/dspace-angular:dspace-7_x
+docker push dspace/dspace-angular:latest
 ```

 ### Dockerfile.dist
@@ -39,7 +39,7 @@ The `Dockerfile.dist` is used to generate a *production* build and runtime envir

 ```bash
 # build the latest image
-docker build -f Dockerfile.dist -t dspace/dspace-angular:dspace-7_x-dist .
+docker build -f Dockerfile.dist -t dspace/dspace-angular:latest-dist .
 ```

 A default/demo version of this image is built *automatically*.
@@ -101,8 +101,8 @@ and the backend at http://localhost:8080/server/

 ## Run DSpace Angular dist build with DSpace Demo site backend

-This allows you to run the Angular UI in *production* mode, pointing it at the demo backend
-(https://api7.dspace.org/server/).
+This allows you to run the Angular UI in *production* mode, pointing it at the demo or sandbox backend
+(https://demo.dspace.org/server/ or https://sandbox.dspace.org/server/).

 ```
 docker-compose -f docker/docker-compose-dist.yml pull
--- a/docker/cli.yml
+++ b/docker/cli.yml
@@ -16,7 +16,7 @@ version: "3.7"

 services:
  dspace-cli:
-    image: "${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-dspace-7_x}"
+    image: "${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-latest}"
    container_name: dspace-cli
    environment:
      # Below syntax may look odd, but it is how to override dspace.cfg settings via env variables.
--- a/docker/docker-compose-ci.yml
+++ b/docker/docker-compose-ci.yml
@@ -35,7 +35,7 @@ services:
      solr__D__statistics__P__autoCommit: 'false'
    depends_on:
    - dspacedb
-    image: dspace/dspace:dspace-7_x-test
+    image: dspace/dspace:latest-test
    networks:
      dspacenet:
    ports:
--- a/docker/docker-compose-dist.yml
+++ b/docker/docker-compose-dist.yml
@@ -24,10 +24,10 @@ services:
      # This is because Server Side Rendering (SSR) currently requires a public URL,
      # see this bug: https://github.com/DSpace/dspace-angular/issues/1485
      DSPACE_REST_SSL: 'true'
-      DSPACE_REST_HOST: api7.dspace.org
+      DSPACE_REST_HOST: sandbox.dspace.org
      DSPACE_REST_PORT: 443
      DSPACE_REST_NAMESPACE: /server
-    image: dspace/dspace-angular:dspace-7_x-dist
+    image: dspace/dspace-angular:${DSPACE_VER:-latest}-dist
    build:
      context: ..
      dockerfile: Dockerfile.dist
--- a/docker/docker-compose-rest.yml
+++ b/docker/docker-compose-rest.yml
@@ -39,7 +39,7 @@ services:
      # proxies.trusted.ipranges: This setting is required for a REST API running in Docker to trust requests 
      # from the host machine. This IP range MUST correspond to the 'dspacenet' subnet defined above.
      proxies__P__trusted__P__ipranges: '172.23.0'
-    image: "${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-dspace-7_x-test}"
+    image: "${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-latest-test}"
    depends_on:
    - dspacedb
    networks:
@@ -82,7 +82,7 @@ services:
  # DSpace Solr container  
  dspacesolr:
    container_name: dspacesolr
-    image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-dspace-7_x}"
+    image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}"
    # Needs main 'dspace' container to start first to guarantee access to solr_configs
    depends_on:
    - dspace
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -24,7 +24,7 @@ services:
      DSPACE_REST_HOST: localhost
      DSPACE_REST_PORT: 8080
      DSPACE_REST_NAMESPACE: /server
-    image: dspace/dspace-angular:dspace-7_x
+    image: dspace/dspace-angular:${DSPACE_VER:-latest}
    build:
      context: ..
      dockerfile: Dockerfile
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -48,7 +48,7 @@ dspace-angular connects to your DSpace installation by using its REST endpoint.
 ```yaml
 rest:
  ssl: true
-  host: api7.dspace.org
+  host: demo.dspace.org
  port: 443
  nameSpace: /server
 }
@@ -57,7 +57,7 @@ rest:
 Alternately you can set the following environment variables. If any of these are set, it will override all configuration files:
 ```
  DSPACE_REST_SSL=true
-  DSPACE_REST_HOST=api7.dspace.org
+  DSPACE_REST_HOST=demo.dspace.org
  DSPACE_REST_PORT=443
  DSPACE_REST_NAMESPACE=/server
 ```
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "dspace-angular",
-  "version": "7.6.0",
+  "version": "8.0.0-next",
  "scripts": {
    "ng": "ng",
    "config:watch": "nodemon",
@@ -15,14 +15,14 @@
    "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
    "build": "ng build --configuration development",
    "build:stats": "ng build --stats-json",
-    "build:prod": "yarn run build:ssr",
+    "build:prod": "cross-env NODE_ENV=production yarn run build:ssr",
    "build:ssr": "ng build --configuration production && ng run dspace-angular:server:production",
    "test": "ng test --source-map=true --watch=false --configuration test",
    "test:watch": "nodemon --exec \"ng test --source-map=true --watch=true --configuration test\"",
    "test:headless": "ng test --source-map=true --watch=false --configuration test --browsers=ChromeHeadless --code-coverage",
    "lint": "ng lint",
    "lint-fix": "ng lint --fix=true",
-    "e2e": "ng e2e",
+    "e2e": "cross-env NODE_ENV=production ng e2e",
    "clean:dev:config": "rimraf src/assets/config.json",
    "clean:coverage": "rimraf coverage",
    "clean:dist": "rimraf dist",
@@ -99,6 +99,7 @@
    "fast-json-patch": "^3.1.1",
    "filesize": "^6.1.0",
    "http-proxy-middleware": "^1.0.5",
+    "http-terminator": "^3.2.0",
    "isbot": "^3.6.10",
    "js-cookie": "2.2.1",
    "js-yaml": "^4.1.0",
@@ -116,12 +117,12 @@
    "morgan": "^1.10.0",
    "ng-mocks": "^14.10.0",
    "ng2-file-upload": "1.4.0",
-    "ng2-nouislider": "^1.8.3",
+    "ng2-nouislider": "^2.0.0",
    "ngx-infinite-scroll": "^15.0.0",
    "ngx-pagination": "6.0.3",
    "ngx-sortablejs": "^11.1.0",
    "ngx-ui-switch": "^14.0.3",
-    "nouislider": "^14.6.3",
+    "nouislider": "^15.7.1",
    "pem": "1.14.7",
    "prop-types": "^15.8.1",
    "react-copy-to-clipboard": "^5.1.0",
@@ -159,11 +160,11 @@
    "@types/sanitize-html": "^2.9.0",
    "@typescript-eslint/eslint-plugin": "^5.59.1",
    "@typescript-eslint/parser": "^5.59.1",
-    "axe-core": "^4.7.0",
+    "axe-core": "^4.7.2",
    "compression-webpack-plugin": "^9.2.0",
    "copy-webpack-plugin": "^6.4.1",
    "cross-env": "^7.0.3",
-    "cypress": "12.10.0",
+    "cypress": "12.17.4",
    "cypress-axe": "^1.4.0",
    "deep-freeze": "0.0.1",
    "eslint": "^8.39.0",
--- a/server.ts
+++ b/server.ts
@@ -32,6 +32,7 @@ import isbot from 'isbot';
 import { createCertificate } from 'pem';
 import { createServer } from 'https';
 import { json } from 'body-parser';
+import { createHttpTerminator } from 'http-terminator';

 import { readFileSync } from 'fs';
 import { join } from 'path';
@@ -320,22 +321,23 @@ function initCache() {
  if (botCacheEnabled()) {
    // Initialize a new "least-recently-used" item cache (where least recently used pages are removed first)
    // See https://www.npmjs.com/package/lru-cache
-    // When enabled, each page defaults to expiring after 1 day
+    // When enabled, each page defaults to expiring after 1 day (defined in default-app-config.ts)
    botCache = new LRU( {
      max: environment.cache.serverSide.botCache.max,
-      ttl: environment.cache.serverSide.botCache.timeToLive || 24 * 60 * 60 * 1000, // 1 day
-      allowStale: environment.cache.serverSide.botCache.allowStale ?? true // if object is stale, return stale value before deleting
+      ttl: environment.cache.serverSide.botCache.timeToLive,
+      allowStale: environment.cache.serverSide.botCache.allowStale
    });
  }

  if (anonymousCacheEnabled()) {
    // NOTE: While caches may share SSR pages, this cache must be kept separately because the timeToLive
    // may expire pages more frequently.
-    // When enabled, each page defaults to expiring after 10 seconds (to minimize anonymous users seeing out-of-date content)
+    // When enabled, each page defaults to expiring after 10 seconds (defined in default-app-config.ts)
+    // to minimize anonymous users seeing out-of-date content
    anonymousCache = new LRU( {
      max: environment.cache.serverSide.anonymousCache.max,
-      ttl: environment.cache.serverSide.anonymousCache.timeToLive || 10 * 1000, // 10 seconds
-      allowStale: environment.cache.serverSide.anonymousCache.allowStale ?? true // if object is stale, return stale value before deleting
+      ttl: environment.cache.serverSide.anonymousCache.timeToLive,
+      allowStale: environment.cache.serverSide.anonymousCache.allowStale
    });
  }
 }
@@ -487,7 +489,7 @@ function saveToCache(req, page: any) {
 */
 function hasNotSucceeded(statusCode) {
  const rgx = new RegExp(/^20+/);
-  return !rgx.test(statusCode)
+  return !rgx.test(statusCode);
 }

 function retrieveHeaders(response) {
@@ -525,23 +527,46 @@ function serverStarted() {
 * @param keys SSL credentials
 */
 function createHttpsServer(keys) {
-  createServer({
+  const listener = createServer({
    key: keys.serviceKey,
    cert: keys.certificate
  }, app).listen(environment.ui.port, environment.ui.host, () => {
    serverStarted();
  });
+
+  // Graceful shutdown when signalled
+  const terminator = createHttpTerminator({server: listener});
+  process.on('SIGINT', () => {
+      void (async ()=> {
+        console.debug('Closing HTTPS server on signal');
+        await terminator.terminate().catch(e => { console.error(e); });
+        console.debug('HTTPS server closed');
+      })();
+      });
 }

+/**
+ * Create an HTTP server with the configured port and host.
+ */
 function run() {
  const port = environment.ui.port || 4000;
  const host = environment.ui.host || '/';

  // Start up the Node server
  const server = app();
-  server.listen(port, host, () => {
+  const listener = server.listen(port, host, () => {
    serverStarted();
  });
+
+  // Graceful shutdown when signalled
+  const terminator = createHttpTerminator({server: listener});
+  process.on('SIGINT', () => {
+      void (async () => {
+        console.debug('Closing HTTP server on signal');
+        await terminator.terminate().catch(e => { console.error(e); });
+        console.debug('HTTP server closed.');return undefined;
+        })();
+      });
 }

 function start() {
--- a/src/app/access-control/access-control-routing-paths.ts
+++ b/src/app/access-control/access-control-routing-paths.ts
@@ -1,12 +1,22 @@
 import { URLCombiner } from '../core/url-combiner/url-combiner';
 import { getAccessControlModuleRoute } from '../app-routing-paths';

-export const GROUP_EDIT_PATH = 'groups';
+export const EPERSON_PATH = 'epeople';
+
+export function getEPersonsRoute(): string {
+  return new URLCombiner(getAccessControlModuleRoute(), EPERSON_PATH).toString();
+}
+
+export function getEPersonEditRoute(id: string): string {
+  return new URLCombiner(getEPersonsRoute(), id, 'edit').toString();
+}
+
+export const GROUP_PATH = 'groups';

 export function getGroupsRoute() {
-  return new URLCombiner(getAccessControlModuleRoute(), GROUP_EDIT_PATH).toString();
+  return new URLCombiner(getAccessControlModuleRoute(), GROUP_PATH).toString();
 }

 export function getGroupEditRoute(id: string) {
-  return new URLCombiner(getAccessControlModuleRoute(), GROUP_EDIT_PATH, id).toString();
+  return new URLCombiner(getGroupsRoute(), id, 'edit').toString();
 }
--- a/src/app/access-control/access-control-routing.module.ts
+++ b/src/app/access-control/access-control-routing.module.ts
@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component';
 import { GroupFormComponent } from './group-registry/group-form/group-form.component';
 import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
-import { GROUP_EDIT_PATH } from './access-control-routing-paths';
+import { EPERSON_PATH, GROUP_PATH } from './access-control-routing-paths';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { GroupPageGuard } from './group-registry/group-page.guard';
 import {
@@ -13,12 +13,14 @@ import {
  SiteAdministratorGuard
 } from '../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 import { BulkAccessComponent } from './bulk-access/bulk-access.component';
+import { EPersonFormComponent } from './epeople-registry/eperson-form/eperson-form.component';
+import { EPersonResolver } from './epeople-registry/eperson-resolver.service';

@NgModule({
  imports: [
    RouterModule.forChild([
      {
-        path: 'epeople',
+        path: EPERSON_PATH,
        component: EPeopleRegistryComponent,
        resolve: {
          breadcrumb: I18nBreadcrumbResolver
@@ -27,7 +29,26 @@ import { BulkAccessComponent } from './bulk-access/bulk-access.component';
        canActivate: [SiteAdministratorGuard]
      },
      {
-        path: GROUP_EDIT_PATH,
+        path: `${EPERSON_PATH}/create`,
+        component: EPersonFormComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver,
+        },
+        data: { title: 'admin.access-control.epeople.add.title', breadcrumbKey: 'admin.access-control.epeople.add' },
+        canActivate: [SiteAdministratorGuard],
+      },
+      {
+        path: `${EPERSON_PATH}/:id/edit`,
+        component: EPersonFormComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver,
+          ePerson: EPersonResolver,
+        },
+        data: { title: 'admin.access-control.epeople.edit.title', breadcrumbKey: 'admin.access-control.epeople.edit' },
+        canActivate: [SiteAdministratorGuard],
+      },
+      {
+        path: GROUP_PATH,
        component: GroupsRegistryComponent,
        resolve: {
          breadcrumb: I18nBreadcrumbResolver
@@ -36,7 +57,7 @@ import { BulkAccessComponent } from './bulk-access/bulk-access.component';
        canActivate: [GroupAdministratorGuard]
      },
      {
-        path: `${GROUP_EDIT_PATH}/newGroup`,
+        path: `${GROUP_PATH}/create`,
        component: GroupFormComponent,
        resolve: {
          breadcrumb: I18nBreadcrumbResolver
@@ -45,7 +66,7 @@ import { BulkAccessComponent } from './bulk-access/bulk-access.component';
        canActivate: [GroupAdministratorGuard]
      },
      {
-        path: `${GROUP_EDIT_PATH}/:groupId`,
+        path: `${GROUP_PATH}/:groupId/edit`,
        component: GroupFormComponent,
        resolve: {
          breadcrumb: I18nBreadcrumbResolver
--- a/src/app/access-control/epeople-registry/epeople-registry.component.html
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.html
@@ -4,19 +4,15 @@
      <div class="d-flex justify-content-between border-bottom mb-3">
        <h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>

-        <div *ngIf="!isEPersonFormShown">
+        <div>
          <button class="mr-auto btn btn-success addEPerson-button"
-                  (click)="isEPersonFormShown = true">
+                  [routerLink]="'create'">
            <i class="fas fa-plus"></i>
            <span class="d-none d-sm-inline ml-1">{{labelPrefix + 'button.add' | translate}}</span>
          </button>
        </div>
      </div>

-      <ds-eperson-form *ngIf="isEPersonFormShown" (submitForm)="reset()"
-                       (cancelForm)="isEPersonFormShown = false"></ds-eperson-form>
-
-      <div *ngIf="!isEPersonFormShown">
      <h3 id="search" class="border-bottom pb-2">{{labelPrefix + 'search.head' | translate}}

      </h3>
@@ -72,12 +68,12 @@
              <td>{{epersonDto.eperson.email}}</td>
              <td>
                <div class="btn-group edit-field">
-                    <button (click)="toggleEditEPerson(epersonDto.eperson)"
+                  <button [routerLink]="getEditEPeoplePage(epersonDto.eperson.id)"
                          class="btn btn-outline-primary btn-sm access-control-editEPersonButton"
                          title="{{labelPrefix + 'table.edit.buttons.edit' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
                    <i class="fas fa-edit fa-fw"></i>
                  </button>
-                    <button [disabled]="!epersonDto.ableToDelete" (click)="deleteEPerson(epersonDto.eperson)"
+                  <button *ngIf="epersonDto.ableToDelete" (click)="deleteEPerson(epersonDto.eperson)"
                          class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
                          title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
                    <i class="fas fa-trash-alt fa-fw"></i>
@@ -96,5 +92,4 @@
      </div>
    </div>
  </div>
-  </div>
 </div>
--- a/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
@@ -203,36 +203,6 @@ describe('EPeopleRegistryComponent', () => {
    });
  });

-  describe('toggleEditEPerson', () => {
-    describe('when you click on first edit eperson button', () => {
-      beforeEach(fakeAsync(() => {
-        const editButtons = fixture.debugElement.queryAll(By.css('.access-control-editEPersonButton'));
-        editButtons[0].triggerEventHandler('click', {
-          preventDefault: () => {/**/
-          }
-        });
-        tick();
-        fixture.detectChanges();
-      }));
-
-      it('editEPerson form is toggled', () => {
-        const ePeopleIds = fixture.debugElement.queryAll(By.css('#epeople tr td:first-child'));
-        ePersonDataServiceStub.getActiveEPerson().subscribe((activeEPerson: EPerson) => {
-          if (ePeopleIds[0] && activeEPerson === ePeopleIds[0].nativeElement.textContent) {
-            expect(component.isEPersonFormShown).toEqual(false);
-          } else {
-            expect(component.isEPersonFormShown).toEqual(true);
-          }
-
-        });
-      });
-
-      it('EPerson search section is hidden', () => {
-        expect(fixture.debugElement.query(By.css('#search'))).toBeNull();
-      });
-    });
-  });
-
  describe('deleteEPerson', () => {
    describe('when you click on first delete eperson button', () => {
      let ePeopleIdsFoundBeforeDelete;
--- a/src/app/access-control/epeople-registry/epeople-registry.component.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.ts
@@ -22,6 +22,7 @@ import { PageInfo } from '../../core/shared/page-info.model';
 import { NoContent } from '../../core/shared/NoContent.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { getEPersonEditRoute, getEPersonsRoute } from '../access-control-routing-paths';

@Component({
  selector: 'ds-epeople-registry',
@@ -64,11 +65,6 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    currentPage: 1
  });

-  /**
-   * Whether or not to show the EPerson form
-   */
-  isEPersonFormShown: boolean;
-
  // The search form
  searchForm;

@@ -114,17 +110,11 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
   */
  initialisePage() {
    this.searching$.next(true);
-    this.isEPersonFormShown = false;
    this.search({scope: this.currentSearchScope, query: this.currentSearchQuery});
-    this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
-      if (eperson != null && eperson.id) {
-        this.isEPersonFormShown = true;
-      }
-    }));
    this.subs.push(this.ePeople$.pipe(
      switchMap((epeople: PaginatedList<EPerson>) => {
        if (epeople.pageInfo.totalElements > 0) {
-          return combineLatest([...epeople.page.map((eperson: EPerson) => {
+          return combineLatest(epeople.page.map((eperson: EPerson) => {
            return this.authorizationService.isAuthorized(FeatureID.CanDelete, hasValue(eperson) ? eperson.self : undefined).pipe(
              map((authorized) => {
                const epersonDtoModel: EpersonDtoModel = new EpersonDtoModel();
@@ -133,7 +123,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
                return epersonDtoModel;
              })
            );
-          })]).pipe(map((dtos: EpersonDtoModel[]) => {
+          })).pipe(map((dtos: EpersonDtoModel[]) => {
            return buildPaginatedList(epeople.pageInfo, dtos);
          }));
        } else {
@@ -160,14 +150,14 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
          const query: string = data.query;
          const scope: string = data.scope;
          if (query != null && this.currentSearchQuery !== query) {
-            this.router.navigate([this.epersonService.getEPeoplePageRouterLink()], {
+            void this.router.navigate([getEPersonsRoute()], {
              queryParamsHandling: 'merge'
            });
            this.currentSearchQuery = query;
            this.paginationService.resetPage(this.config.id);
          }
          if (scope != null && this.currentSearchScope !== scope) {
-            this.router.navigate([this.epersonService.getEPeoplePageRouterLink()], {
+            void this.router.navigate([getEPersonsRoute()], {
              queryParamsHandling: 'merge'
            });
            this.currentSearchScope = scope;
@@ -205,23 +195,6 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    return this.epersonService.getActiveEPerson();
  }

-  /**
-   * Start editing the selected EPerson
-   * @param ePerson
-   */
-  toggleEditEPerson(ePerson: EPerson) {
-    this.getActiveEPerson().pipe(take(1)).subscribe((activeEPerson: EPerson) => {
-      if (ePerson === activeEPerson) {
-        this.epersonService.cancelEditEPerson();
-        this.isEPersonFormShown = false;
-      } else {
-        this.epersonService.editEPerson(ePerson);
-        this.isEPersonFormShown = true;
-      }
-    });
-    this.scrollToTop();
-  }
-
  /**
   * Deletes EPerson, show notification on success/failure & updates EPeople list
   */
@@ -242,7 +215,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
              if (restResponse.hasSucceeded) {
                this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', {name: this.dsoNameService.getName(ePerson)}));
              } else {
-                this.notificationsService.error('Error occured when trying to delete EPerson with id: ' + ePerson.id + ' with code: ' + restResponse.statusCode + ' and message: ' + restResponse.errorMessage);
+                this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.deleted.success', { id: ePerson.id, statusCode: restResponse.statusCode, errorMessage: restResponse.errorMessage }));
              }
            });
          }
@@ -264,16 +237,6 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
  }

-  scrollToTop() {
-    (function smoothscroll() {
-      const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
-      if (currentScroll > 0) {
-        window.requestAnimationFrame(smoothscroll);
-        window.scrollTo(0, currentScroll - (currentScroll / 8));
-      }
-    })();
-  }
-
  /**
   * Reset all input-fields to be empty and search all search
   */
@@ -284,20 +247,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    this.search({query: ''});
  }

-  /**
-   * This method will set everything to stale, which will cause the lists on this page to update.
-   */
-  reset(): void {
-    this.epersonService.getBrowseEndpoint().pipe(
-      take(1),
-      switchMap((href: string) => {
-        return this.requestService.setStaleByHrefSubstring(href).pipe(
-          take(1),
-        );
-      })
-    ).subscribe(()=>{
-      this.epersonService.cancelEditEPerson();
-      this.isEPersonFormShown = false;
-    });
+  getEditEPeoplePage(id: string): string {
+    return getEPersonEditRoute(id);
  }
 }
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
@@ -1,14 +1,18 @@
-<div *ngIf="epersonService.getActiveEPerson() | async; then editheader; else createHeader"></div>
+<div class="container">
+  <div class="group-form row">
+    <div class="col-12">

-<ng-template #createHeader>
-  <h4>{{messagePrefix + '.create' | translate}}</h4>
-</ng-template>
+      <div *ngIf="epersonService.getActiveEPerson() | async; then editHeader; else createHeader"></div>

-<ng-template #editheader>
-  <h4>{{messagePrefix + '.edit' | translate}}</h4>
-</ng-template>
+      <ng-template #createHeader>
+        <h2 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h2>
+      </ng-template>

-<ds-form [formId]="formId"
+      <ng-template #editHeader>
+        <h2 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h2>
+      </ng-template>
+
+      <ds-form [formId]="formId"
               [formModel]="formModel"
               [formGroup]="formGroup"
               [formLayout]="formLayout"
@@ -16,30 +20,31 @@
               [submitLabel]="submitLabel"
               (submitForm)="onSubmit()">
        <div before class="btn-group">
-    <button (click)="onCancel()"
-            class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
+          <button (click)="onCancel()" type="button" class="btn btn-outline-secondary">
+            <i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}
+          </button>
        </div>
        <div *ngIf="displayResetPassword" between class="btn-group">
-    <button class="btn btn-primary" [disabled]="!(canReset$ | async)" (click)="resetPassword()">
+          <button class="btn btn-primary" [disabled]="!(canReset$ | async)" type="button" (click)="resetPassword()">
            <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
          </button>
        </div>
-  <div between class="btn-group ml-1">
-    <button *ngIf="!isImpersonated" class="btn btn-primary" [ngClass]="{'d-none' : !(canImpersonate$ | async)}" (click)="impersonate()">
+        <div *ngIf="canImpersonate$ | async" between class="btn-group">
+          <button *ngIf="!isImpersonated" class="btn btn-primary" type="button" (click)="impersonate()">
            <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
          </button>
-    <button *ngIf="isImpersonated" class="btn btn-primary" (click)="stopImpersonating()">
+          <button *ngIf="isImpersonated" class="btn btn-primary" type="button" (click)="stopImpersonating()">
            <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.stop-impersonating' | translate}}
          </button>
        </div>
-  <button after class="btn btn-danger delete-button" [disabled]="!(canDelete$ | async)" (click)="delete()">
+        <button *ngIf="canDelete$ | async" after class="btn btn-danger delete-button" type="button" (click)="delete()">
          <i class="fas fa-trash"></i> {{'admin.access-control.epeople.actions.delete' | translate}}
        </button>
-</ds-form>
+      </ds-form>

-<ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>
+      <ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>

-<div *ngIf="epersonService.getActiveEPerson() | async">
+      <div *ngIf="epersonService.getActiveEPerson() | async">
        <h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>

        <ds-themed-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-themed-loading>
@@ -86,4 +91,7 @@
                    class="btn btn-primary">{{messagePrefix + '.goToGroups' | translate}}</button>
          </div>
        </div>
+      </div>
+    </div>
+  </div>
 </div>
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
@@ -31,6 +31,10 @@ import { PaginationServiceStub } from '../../../shared/testing/pagination-servic
 import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { ValidateEmailNotTaken } from './validators/email-taken.validator';
 import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';
+import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../shared/testing/router.stub';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';

 describe('EPersonFormComponent', () => {
  let component: EPersonFormComponent;
@@ -43,6 +47,8 @@ describe('EPersonFormComponent', () => {
  let authorizationService: AuthorizationDataService;
  let groupsDataService: GroupDataService;
  let epersonRegistrationService: EpersonRegistrationService;
+  let route: ActivatedRouteStub;
+  let router: RouterStub;

  let paginationService;

@@ -106,6 +112,9 @@ describe('EPersonFormComponent', () => {
      },
      getEPersonByEmail(email): Observable<RemoteData<EPerson>> {
        return createSuccessfulRemoteDataObject$(null);
+      },
+      findById(_id: string, _useCachedVersionIfAvailable = true, _reRequestOnStale = true, ..._linksToFollow: FollowLinkConfig<EPerson>[]): Observable<RemoteData<EPerson>> {
+        return createSuccessfulRemoteDataObject$(null);
      }
    };
    builderService = Object.assign(getMockFormBuilderService(),{
@@ -182,6 +191,8 @@ describe('EPersonFormComponent', () => {
    });

    paginationService = new PaginationServiceStub();
+    route = new ActivatedRouteStub();
+    router = new RouterStub();
    TestBed.configureTestingModule({
      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
        TranslateModule.forRoot({
@@ -202,6 +213,8 @@ describe('EPersonFormComponent', () => {
        { provide: PaginationService, useValue: paginationService },
        { provide: RequestService, useValue: jasmine.createSpyObj('requestService', ['removeByHrefSubstring'])},
        { provide: EpersonRegistrationService, useValue: epersonRegistrationService },
+        { provide: ActivatedRoute, useValue: route },
+        { provide: Router, useValue: router },
        EPeopleRegistryComponent
      ],
      schemas: [NO_ERRORS_SCHEMA]
@@ -263,24 +276,18 @@ describe('EPersonFormComponent', () => {
      fixture.detectChanges();
    });
    describe('firstName, lastName and email should be required', () => {
-      it('form should be invalid because the firstName is required', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('form should be invalid because the firstName is required', () => {
        expect(component.formGroup.controls.firstName.valid).toBeFalse();
        expect(component.formGroup.controls.firstName.errors.required).toBeTrue();
      });
-      }));
-      it('form should be invalid because the lastName is required', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('form should be invalid because the lastName is required', () => {
        expect(component.formGroup.controls.lastName.valid).toBeFalse();
        expect(component.formGroup.controls.lastName.errors.required).toBeTrue();
      });
-      }));
-      it('form should be invalid because the email is required', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('form should be invalid because the email is required', () => {
        expect(component.formGroup.controls.email.valid).toBeFalse();
        expect(component.formGroup.controls.email.errors.required).toBeTrue();
      });
-      }));
    });

    describe('after inserting information firstName,lastName and email not required', () => {
@@ -290,24 +297,18 @@ describe('EPersonFormComponent', () => {
        component.formGroup.controls.email.setValue('test@test.com');
        fixture.detectChanges();
      });
-      it('firstName should be valid because the firstName is set', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('firstName should be valid because the firstName is set', () => {
          expect(component.formGroup.controls.firstName.valid).toBeTrue();
          expect(component.formGroup.controls.firstName.errors).toBeNull();
      });
-      }));
-      it('lastName should be valid because the lastName is set', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('lastName should be valid because the lastName is set', () => {
          expect(component.formGroup.controls.lastName.valid).toBeTrue();
          expect(component.formGroup.controls.lastName.errors).toBeNull();
      });
-      }));
-      it('email should be valid because the email is set', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('email should be valid because the email is set', () => {
          expect(component.formGroup.controls.email.valid).toBeTrue();
          expect(component.formGroup.controls.email.errors).toBeNull();
      });
-      }));
    });


@@ -316,12 +317,10 @@ describe('EPersonFormComponent', () => {
        component.formGroup.controls.email.setValue('test@test');
        fixture.detectChanges();
      });
-      it('email should not be valid because the email pattern', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('email should not be valid because the email pattern', () => {
          expect(component.formGroup.controls.email.valid).toBeFalse();
          expect(component.formGroup.controls.email.errors.pattern).toBeTruthy();
      });
-      }));
    });

    describe('after already utilized email', () => {
@@ -336,12 +335,10 @@ describe('EPersonFormComponent', () => {
        fixture.detectChanges();
      });

-      it('email should not be valid because email is already taken', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('email should not be valid because email is already taken', () => {
          expect(component.formGroup.controls.email.valid).toBeFalse();
          expect(component.formGroup.controls.email.errors.emailTaken).toBeTruthy();
      });
-      }));
    });


@@ -393,11 +390,9 @@ describe('EPersonFormComponent', () => {
        fixture.detectChanges();
      });

-      it('should emit a new eperson using the correct values', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('should emit a new eperson using the correct values', () => {
        expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
      });
-      }));
    });

    describe('with an active eperson', () => {
@@ -428,11 +423,9 @@ describe('EPersonFormComponent', () => {
        fixture.detectChanges();
      });

-      it('should emit the existing eperson using the correct values', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('should emit the existing eperson using the correct values', () => {
        expect(component.submitForm.emit).toHaveBeenCalledWith(expectedWithId);
      });
-      }));
    });
  });

@@ -491,16 +484,16 @@ describe('EPersonFormComponent', () => {

    });

-    it('the delete button should be active if the eperson can be deleted', () => {
+    it('the delete button should be visible if the ePerson can be deleted', () => {
      const deleteButton = fixture.debugElement.query(By.css('.delete-button'));
-      expect(deleteButton.nativeElement.disabled).toBe(false);
+      expect(deleteButton).not.toBeNull();
    });

-    it('the delete button should be disabled if the eperson cannot be deleted', () => {
+    it('the delete button should be hidden if the ePerson cannot be deleted', () => {
      component.canDelete$ = observableOf(false);
      fixture.detectChanges();
      const deleteButton = fixture.debugElement.query(By.css('.delete-button'));
-      expect(deleteButton.nativeElement.disabled).toBe(true);
+      expect(deleteButton).toBeNull();
    });

    it('should call the epersonFormComponent delete when clicked on the button', () => {
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
@@ -38,6 +38,8 @@ import { Registration } from '../../../core/shared/registration.model';
 import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';
 import { TYPE_REQUEST_FORGOT } from '../../../register-email-form/register-email-form.component';
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { getEPersonsRoute } from '../../access-control-routing-paths';

@Component({
  selector: 'ds-eperson-form',
@@ -194,6 +196,8 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    public requestService: RequestService,
    private epersonRegistrationService: EpersonRegistrationService,
    public dsoNameService: DSONameService,
+    protected route: ActivatedRoute,
+    protected router: Router,
  ) {
    this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
      this.epersonInitial = eperson;
@@ -213,7 +217,9 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
   * This method will initialise the page
   */
  initialisePage() {
-
+    this.subs.push(this.epersonService.findById(this.route.snapshot.params.id).subscribe((ePersonRD: RemoteData<EPerson>) => {
+      this.epersonService.editEPerson(ePersonRD.payload);
+    }));
    observableCombineLatest([
      this.translateService.get(`${this.messagePrefix}.firstName`),
      this.translateService.get(`${this.messagePrefix}.lastName`),
@@ -339,6 +345,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
  onCancel() {
    this.epersonService.cancelEditEPerson();
    this.cancelForm.emit();
+    void this.router.navigate([getEPersonsRoute()]);
  }

  /**
@@ -390,6 +397,8 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
      if (rd.hasSucceeded) {
        this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.created.success', { name: this.dsoNameService.getName(ePersonToCreate) }));
        this.submitForm.emit(ePersonToCreate);
+        this.epersonService.clearEPersonRequests();
+        void this.router.navigateByUrl(getEPersonsRoute());
      } else {
        this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.created.failure', { name: this.dsoNameService.getName(ePersonToCreate) }));
        this.cancelForm.emit();
@@ -429,6 +438,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
      if (rd.hasSucceeded) {
        this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.edited.success', { name: this.dsoNameService.getName(editedEperson) }));
        this.submitForm.emit(editedEperson);
+        void this.router.navigateByUrl(getEPersonsRoute());
      } else {
        this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.edited.failure', { name: this.dsoNameService.getName(editedEperson) }));
        this.cancelForm.emit();
@@ -495,6 +505,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    ).subscribe(({ restResponse, eperson }: { restResponse: RemoteData<NoContent> | null, eperson: EPerson }) => {
      if (restResponse?.hasSucceeded) {
        this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', { name: this.dsoNameService.getName(eperson) }));
+        void this.router.navigate([getEPersonsRoute()]);
      } else {
        this.notificationsService.error(`Error occurred when trying to delete EPerson with id: ${eperson?.id} with code: ${restResponse?.statusCode} and message: ${restResponse?.errorMessage}`);
      }
@@ -541,16 +552,6 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    }
  }

-  /**
-   * This method will ensure that the page gets reset and that the cache is cleared
-   */
-  reset() {
-    this.epersonService.getActiveEPerson().pipe(take(1)).subscribe((eperson: EPerson) => {
-      this.requestService.removeByHrefSubstring(eperson.self);
-    });
-    this.initialisePage();
-  }
-
  /**
   * Checks for the given ePerson if there is already an ePerson in the system with that email
   * and shows notification if this is the case
--- a/src/app/access-control/epeople-registry/eperson-resolver.service.ts
+++ b/src/app/access-control/epeople-registry/eperson-resolver.service.ts
@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { getFirstCompletedRemoteData } from '../../core/shared/operators';
+import { ResolvedAction } from '../../core/resolving/resolver.actions';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { Store } from '@ngrx/store';
+import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+
+export const EPERSON_EDIT_FOLLOW_LINKS: FollowLinkConfig<EPerson>[] = [
+  followLink('groups'),
+];
+
+/**
+ * This class represents a resolver that requests a specific {@link EPerson} before the route is activated
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class EPersonResolver implements Resolve<RemoteData<EPerson>> {
+
+  constructor(
+    protected ePersonService: EPersonDataService,
+    protected store: Store<any>,
+  ) {
+  }
+
+  /**
+   * Method for resolving a {@link EPerson} based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns `Observable<<RemoteData<EPerson>>` Emits the found {@link EPerson} based on the parameters in the current
+   * route, or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<EPerson>> {
+    const ePersonRD$: Observable<RemoteData<EPerson>> = this.ePersonService.findById(route.params.id,
+      true,
+      false,
+      ...EPERSON_EDIT_FOLLOW_LINKS,
+    ).pipe(
+      getFirstCompletedRemoteData(),
+    );
+
+    ePersonRD$.subscribe((ePersonRD: RemoteData<EPerson>) => {
+      this.store.dispatch(new ResolvedAction(state.url, ePersonRD.payload));
+    });
+
+    return ePersonRD$;
+  }
+
+}
--- a/src/app/access-control/group-registry/group-form/group-form.component.html
+++ b/src/app/access-control/group-registry/group-form/group-form.component.html
@@ -2,13 +2,13 @@
  <div class="group-form row">
    <div class="col-12">

-      <div *ngIf="groupDataService.getActiveGroup() | async; then editheader; else createHeader"></div>
+      <div *ngIf="groupDataService.getActiveGroup() | async; then editHeader; else createHeader"></div>

      <ng-template #createHeader>
        <h2 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h2>
      </ng-template>

-      <ng-template #editheader>
+      <ng-template #editHeader>
        <h2 class="border-bottom pb-2">
          <span
            *dsContextHelp="{
@@ -36,12 +36,12 @@
               [displayCancel]="false"
               (submitForm)="onSubmit()">
        <div before class="btn-group">
-          <button (click)="onCancel()"
+          <button (click)="onCancel()" type="button"
                  class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
        </div>
-        <div after *ngIf="groupBeingEdited != null" class="btn-group">
+        <div after *ngIf="(canEdit$ | async) && !groupBeingEdited.permanent" class="btn-group">
          <button class="btn btn-danger delete-button" [disabled]="!(canEdit$ | async) || groupBeingEdited.permanent"
-                  (click)="delete()">
+                  (click)="delete()" type="button">
            <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
          </button>
        </div>
--- a/src/app/access-control/group-registry/group-form/group-form.component.ts
+++ b/src/app/access-control/group-registry/group-form/group-form.component.ts
@@ -10,7 +10,6 @@ import {
 } from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
-  ObservedValueOf,
  combineLatest as observableCombineLatest,
  Observable,
  of as observableOf,
@@ -37,7 +36,7 @@ import {
  getFirstCompletedRemoteData,
  getFirstSucceededRemoteDataPayload
 } from '../../../core/shared/operators';
-import { AlertType } from '../../../shared/alert/aletr-type';
+import { AlertType } from '../../../shared/alert/alert-type';
 import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
 import { hasValue, isNotEmpty, hasValueOperator } from '../../../shared/empty.util';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
@@ -48,6 +47,7 @@ import { Operation } from 'fast-json-patch';
 import { ValidateGroupExists } from './validators/group-exists.validator';
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { environment } from '../../../../environments/environment';
+import { getGroupEditRoute, getGroupsRoute } from '../../access-control-routing-paths';

@Component({
  selector: 'ds-group-form',
@@ -165,19 +165,19 @@ export class GroupFormComponent implements OnInit, OnDestroy {
    this.canEdit$ = this.groupDataService.getActiveGroup().pipe(
      hasValueOperator(),
      switchMap((group: Group) => {
-        return observableCombineLatest(
+        return observableCombineLatest([
          this.authorizationService.isAuthorized(FeatureID.CanDelete, isNotEmpty(group) ? group.self : undefined),
          this.hasLinkedDSO(group),
-          (isAuthorized: ObservedValueOf<Observable<boolean>>, hasLinkedDSO: ObservedValueOf<Observable<boolean>>) => {
-            return isAuthorized && !hasLinkedDSO;
-          });
-      })
+        ]).pipe(
+          map(([isAuthorized, hasLinkedDSO]: [boolean, boolean]) => isAuthorized && !hasLinkedDSO),
        );
-    observableCombineLatest(
+      }),
+    );
+    observableCombineLatest([
      this.translateService.get(`${this.messagePrefix}.groupName`),
      this.translateService.get(`${this.messagePrefix}.groupCommunity`),
      this.translateService.get(`${this.messagePrefix}.groupDescription`)
-    ).subscribe(([groupName, groupCommunity, groupDescription]) => {
+    ]).subscribe(([groupName, groupCommunity, groupDescription]) => {
      this.groupName = new DynamicInputModel({
        id: 'groupName',
        label: groupName,
@@ -215,12 +215,12 @@ export class GroupFormComponent implements OnInit, OnDestroy {
      }

      this.subs.push(
-        observableCombineLatest(
+        observableCombineLatest([
          this.groupDataService.getActiveGroup(),
          this.canEdit$,
          this.groupDataService.getActiveGroup()
            .pipe(filter((activeGroup) => hasValue(activeGroup)),switchMap((activeGroup) => this.getLinkedDSO(activeGroup).pipe(getFirstSucceededRemoteDataPayload())))
-        ).subscribe(([activeGroup, canEdit, linkedObject]) => {
+        ]).subscribe(([activeGroup, canEdit, linkedObject]) => {

          if (activeGroup != null) {

@@ -263,7 +263,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
  onCancel() {
    this.groupDataService.cancelEditGroup();
    this.cancelForm.emit();
-    this.router.navigate([this.groupDataService.getGroupRegistryRouterLink()]);
+    void this.router.navigate([getGroupsRoute()]);
  }

  /**
@@ -310,7 +310,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
          const groupSelfLink = rd.payload._links.self.href;
          this.setActiveGroupWithLink(groupSelfLink);
          this.groupDataService.clearGroupsRequests();
-          this.router.navigateByUrl(this.groupDataService.getGroupEditPageRouterLinkWithID(rd.payload.uuid));
+          void this.router.navigateByUrl(getGroupEditRoute(rd.payload.uuid));
        }
      } else {
        this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.created.failure', { name: groupToCreate.name }));
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -5,7 +5,7 @@
        <h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
        <div>
          <button class="mr-auto btn btn-success"
-                  [routerLink]="['newGroup']">
+                  [routerLink]="'create'">
            <i class="fas fa-plus"></i>
            <span class="d-none d-sm-inline ml-1">{{messagePrefix + 'button.add' | translate}}</span>
          </button>
--- a/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.ts
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.ts
@@ -8,9 +8,9 @@ import {
 import { UntypedFormGroup } from '@angular/forms';
 import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { take } from 'rxjs/operators';
+import { switchMap, take, tap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
-import { combineLatest } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';

@Component({
@@ -147,30 +147,48 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
   * Emit the updated/created schema using the EventEmitter submitForm
   */
  onSubmit(): void {
-    this.registryService.clearMetadataSchemaRequests().subscribe();
-    this.registryService.getActiveMetadataSchema().pipe(take(1)).subscribe(
-      (schema: MetadataSchema) => {
-        const values = {
+        this.registryService
+          .getActiveMetadataSchema()
+          .pipe(
+            take(1),
+            switchMap((schema: MetadataSchema) => {
+              const metadataValues = {
                prefix: this.name.value,
-          namespace: this.namespace.value
+                namespace: this.namespace.value,
              };
+
+              let createOrUpdate$: Observable<MetadataSchema>;
+
              if (schema == null) {
-          this.registryService.createOrUpdateMetadataSchema(Object.assign(new MetadataSchema(), values)).subscribe((newSchema) => {
-            this.submitForm.emit(newSchema);
-          });
+                createOrUpdate$ =
+                  this.registryService.createOrUpdateMetadataSchema(
+                    Object.assign(new MetadataSchema(), metadataValues)
+                  );
              } else {
-          this.registryService.createOrUpdateMetadataSchema(Object.assign(new MetadataSchema(), schema, {
-            id: schema.id,
-            prefix: schema.prefix,
-            namespace: values.namespace,
-          })).subscribe((updatedSchema: MetadataSchema) => {
-            this.submitForm.emit(updatedSchema);
-          });
-        }
-        this.clearFields();
-        this.registryService.cancelEditMetadataSchema();
+                const updatedSchema = Object.assign(
+                  new MetadataSchema(),
+                  schema,
+                  {
+                    namespace: metadataValues.namespace,
                  }
                );
+                createOrUpdate$ =
+                  this.registryService.createOrUpdateMetadataSchema(
+                    updatedSchema
+                  );
+              }
+
+              return createOrUpdate$;
+            }),
+            tap(() => {
+              this.registryService.clearMetadataSchemaRequests().subscribe();
+            })
+          )
+          .subscribe((updatedOrCreatedSchema: MetadataSchema) => {
+            this.submitForm.emit(updatedOrCreatedSchema);
+            this.clearFields();
+            this.registryService.cancelEditMetadataSchema();
+          });
  }

  /**
--- a/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
@@ -3,7 +3,8 @@ import {
  DynamicFormControlModel,
  DynamicFormGroupModel,
  DynamicFormLayout,
-  DynamicInputModel
+  DynamicInputModel,
+  DynamicTextAreaModel
 } from '@ng-dynamic-forms/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { RegistryService } from '../../../../core/registry/registry.service';
@@ -51,7 +52,7 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
  /**
   * A dynamic input model for the scopeNote field
   */
-  scopeNote: DynamicInputModel;
+  scopeNote: DynamicTextAreaModel;

  /**
   * A list of all dynamic input models
@@ -132,11 +133,12 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
          maxLength: 'error.validation.metadata.qualifier.max-length',
        },
      });
-      this.scopeNote = new DynamicInputModel({
+      this.scopeNote = new DynamicTextAreaModel({
        id: 'scopeNote',
        label: scopenote,
        name: 'scopeNote',
        required: false,
+        rows: 5,
      });
      this.formModel = [
        new DynamicFormGroupModel(
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
@@ -41,7 +41,7 @@
                  </label>
                </td>
                <td class="selectable-row" (click)="editField(field)">{{field.id}}</td>
-                <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}<label *ngIf="field.qualifier" class="mb-0">.</label>{{field.qualifier}}</td>
+                <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}</td>
                <td class="selectable-row" (click)="editField(field)">{{field.scopeNote}}</td>
              </tr>
              </tbody>
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -12,8 +12,7 @@ import { Router } from '@angular/router';
 * Represents a non-expandable section in the admin sidebar
 */
@Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-admin-sidebar-section]',
+  selector: 'ds-admin-sidebar-section',
  templateUrl: './admin-sidebar-section.component.html',
  styleUrls: ['./admin-sidebar-section.component.scss'],

--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -26,10 +26,10 @@
              </div>
            </li>

-            <ng-container *ngFor="let section of (sections | async)">
+            <li *ngFor="let section of (sections | async)">
                <ng-container
                        *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-            </ng-container>
+            </li>
        </ul>
    </div>
    <div class="navbar-nav">
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -15,8 +15,7 @@ import { Router } from '@angular/router';
 * Represents a expandable section in the sidebar
 */
@Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-expandable-admin-sidebar-section]',
+  selector: 'ds-expandable-admin-sidebar-section',
  templateUrl: './expandable-admin-sidebar-section.component.html',
  styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
  animations: [rotate, slide, bgColor]
--- a/src/app/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/breadcrumbs/breadcrumbs.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(breadcrumbs$ | async) as breadcrumbs">
    <nav *ngIf="(showBreadcrumbs$ | async)" aria-label="breadcrumb" class="nav-breadcrumb">
-        <ol class="container breadcrumb">
+        <ol class="container breadcrumb my-0">
            <ng-container
                    *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
            <ng-container *ngFor="let bc of breadcrumbs; let last = last;">
--- a/src/app/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/breadcrumbs/breadcrumbs.component.scss
@@ -4,9 +4,8 @@

 .breadcrumb {
  border-radius: 0;
-  margin-top: calc(-1 * var(--ds-content-spacing));
-  padding-bottom: var(--ds-content-spacing / 3);
-  padding-top: var(--ds-content-spacing / 3);
+  padding-bottom: calc(var(--ds-content-spacing) / 2);
+  padding-top: calc(var(--ds-content-spacing) / 2);
  background-color: var(--ds-breadcrumb-bg);
 }

--- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
+++ b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
@@ -89,11 +89,11 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
    const lastItemRD = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
    this.subs.push(
      observableCombineLatest([firstItemRD, lastItemRD]).subscribe(([firstItem, lastItem]) => {
-        let lowerLimit = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
-        let upperLimit = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
-        const options = [];
-        const oneYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
-        const fiveYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
+        let lowerLimit: number = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
+        let upperLimit: number = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
+        const options: number[] = [];
+        const oneYearBreak: number = Math.floor((upperLimit - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
+        const fiveYearBreak: number = Math.floor((upperLimit - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
        if (lowerLimit <= fiveYearBreak) {
          lowerLimit -= 10;
        } else if (lowerLimit <= oneYearBreak) {
@@ -101,7 +101,7 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
        } else {
          lowerLimit -= 1;
        }
-        let i = upperLimit;
+        let i: number = upperLimit;
        while (i > lowerLimit) {
          options.push(i);
          if (i <= fiveYearBreak) {
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -32,7 +32,7 @@

    <section class="comcol-page-browse-section">
    <div class="browse-by-metadata w-100">
-    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+    <ds-themed-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
      title="{{'browse.title' | translate:
      {
        collection: dsoNameService.getName((parent$ | async)?.payload),
@@ -48,7 +48,7 @@
      [startsWithOptions]="startsWithOptions"
      (prev)="goPrev()"
      (next)="goNext()">
-    </ds-browse-by>
+    </ds-themed-browse-by>
    <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
  </div>
  </section>
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
@@ -161,6 +161,10 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
            this.value = '';
          }

+          if (params.startsWith === undefined || params.startsWith === '') {
+            this.startsWith = undefined;
+          }
+
        if (typeof params.startsWith === 'string'){
            this.startsWith = params.startsWith.trim();
          }
--- a/src/app/browse-by/browse-by.module.ts
+++ b/src/app/browse-by/browse-by.module.ts
@@ -14,6 +14,7 @@ import { ThemedBrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/t
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { FormModule } from '../shared/form/form.module';
+import { SharedModule } from '../shared/shared.module';

 const ENTRY_COMPONENTS = [
  // put only entry components that use custom decorator
@@ -35,6 +36,7 @@ const ENTRY_COMPONENTS = [
    ComcolModule,
    DsoPageModule,
    FormModule,
+    SharedModule,
  ],
  declarations: [
    BrowseBySwitcherComponent,
--- a/src/app/collection-page/collection-form/collection-form.component.ts
+++ b/src/app/collection-page/collection-form/collection-form.component.ts
@@ -98,9 +98,8 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> imp
    // retrieve all entity types to populate the dropdowns selection
    entities$.subscribe((entityTypes: ItemType[]) => {

-        entityTypes
-          .filter((type: ItemType) => type.label !== NONE_ENTITY_TYPE)
-          .forEach((type: ItemType, index: number) => {
+      entityTypes = entityTypes.filter((type: ItemType) => type.label !== NONE_ENTITY_TYPE);
+          entityTypes.forEach((type: ItemType, index: number) => {
          this.entityTypeSelection.add({
            disabled: false,
            label: type.label,
@@ -112,7 +111,7 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> imp
          }
        });

-        this.formModel = [...collectionFormModels, this.entityTypeSelection];
+      this.formModel = entityTypes.length === 0 ? collectionFormModels : [...collectionFormModels, this.entityTypeSelection];

        super.ngOnInit();
        this.chd.detectChanges();
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -34,9 +34,6 @@
                  </ds-comcol-page-content>
                </header>
                <ds-dso-edit-menu></ds-dso-edit-menu>
-                <div class="pl-2 space-children-mr">
-                  <ds-dso-page-subscription-button [dso]="collection"></ds-dso-page-subscription-button>
-                </div>
              </div>
              <section class="comcol-page-browse-section">
              <!-- Browse-By Links -->
--- a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts
+++ b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -8,7 +8,7 @@ import { ItemTemplateDataService } from '../../core/data/item-template-data.serv
 import { getCollectionEditRoute } from '../collection-page-routing-paths';
 import { Item } from '../../core/shared/item.model';
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
-import { AlertType } from '../../shared/alert/aletr-type';
+import { AlertType } from '../../shared/alert/alert-type';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';

@Component({
--- a/src/app/community-list-page/community-list-page.component.html
+++ b/src/app/community-list-page/community-list-page.component.html
@@ -1,4 +1,4 @@
 <div class="container">
-  <h2>{{ 'communityList.title' | translate }}</h2>
+  <h1>{{ 'communityList.title' | translate }}</h1>
  <ds-themed-community-list></ds-themed-community-list>
 </div>
--- a/src/app/community-list-page/community-list-service.ts
+++ b/src/app/community-list-page/community-list-service.ts
@@ -25,7 +25,7 @@ import { ShowMoreFlatNode } from './show-more-flat-node.model';
 import { FindListOptions } from '../core/data/find-list-options.model';
 import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';

-// Helper method to combine an flatten an array of observables of flatNode arrays
+// Helper method to combine and flatten an array of observables of flatNode arrays
 export const combineAndFlatten = (obsList: Observable<FlatNode[]>[]): Observable<FlatNode[]> =>
  observableCombineLatest([...obsList]).pipe(
    map((matrix: any[][]) => [].concat(...matrix)),
@@ -199,7 +199,7 @@ export class CommunityListService {
   * Transforms a community in a list of FlatNodes containing firstly a flatnode of the community itself,
   *      followed by flatNodes of its possible subcommunities and collection
   * It gets called recursively for each subcommunity to add its subcommunities and collections to the list
-   * Number of subcommunities and collections added, is dependant on the current page the parent is at for respectively subcommunities and collections.
+   * Number of subcommunities and collections added, is dependent on the current page the parent is at for respectively subcommunities and collections.
   * @param community         Community being transformed
   * @param level             Depth of the community in the list, subcommunities and collections go one level deeper
   * @param parent            Flatnode of the parent community
@@ -275,7 +275,7 @@ export class CommunityListService {

  /**
   * Checks if a community has subcommunities or collections by querying the respective services with a pageSize = 0
-   *      Returns an observable that combines the result.payload.totalElements fo the observables that the
+   *      Returns an observable that combines the result.payload.totalElements of the observables that the
   *          respective services return when queried
   * @param community     Community being checked whether it is expandable (if it has subcommunities or collections)
   */
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -1,5 +1,5 @@
 <ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading>
-<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" [trackBy]="trackBy">
  <!-- This is the tree node template for show more node -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
                 class="example-tree-node show-more-node">
@@ -34,13 +34,13 @@
              aria-hidden="true"></span>
      </button>
      <div class="d-flex flex-row">
-        <h5 class="align-middle pt-2">
+        <span class="align-middle pt-2 lead">
          <a [routerLink]="node.route" class="lead">
            {{ dsoNameService.getName(node.payload) }}
          </a>
          <span class="pr-2">&nbsp;</span>
          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-top archived-items-lead">{{node.payload.archivedItemsCount}}</span>
-        </h5>
+        </span>
      </div>
    </div>
    <ds-truncatable [id]="node.id">
--- a/src/app/community-list-page/community-list/community-list.component.ts
+++ b/src/app/community-list-page/community-list/community-list.component.ts
@@ -28,10 +28,9 @@ export class CommunityListComponent implements OnInit, OnDestroy {
  treeControl = new FlatTreeControl<FlatNode>(
    (node: FlatNode) => node.level, (node: FlatNode) => true
  );
-
  dataSource: CommunityListDatasource;
-
  paginationConfig: FindListOptions;
+  trackBy = (index, node: FlatNode) => node.id;

  constructor(
    protected communityListService: CommunityListService,
@@ -58,18 +57,28 @@ export class CommunityListComponent implements OnInit, OnDestroy {
    this.communityListService.saveCommunityListStateToStore(this.expandedNodes, this.loadingNode);
  }

-  // whether or not this node has children (subcommunities or collections)
+  /**
+   * Whether this node has children (subcommunities or collections)
+   * @param _
+   * @param node
+   */
  hasChild(_: number, node: FlatNode) {
    return node.isExpandable$;
  }

-  // whether or not it is a show more node (contains no data, but is indication that there are more topcoms, subcoms or collections
+  /**
+   * Whether this is a show more node that contains no data, but indicates that there is
+   * one or more community or collection.
+   * @param _
+   * @param node
+   */
  isShowMore(_: number, node: FlatNode) {
    return node.isShowMoreNode;
  }

  /**
-   * Toggles the expanded variable of a node, adds it to the expanded nodes list and reloads the tree so this node is expanded
+   * Toggles the expanded variable of a node, adds it to the expanded nodes list and reloads the tree
+   * so this node is expanded
   * @param node  Node we want to expand
   */
  toggleExpanded(node: FlatNode) {
@@ -92,9 +101,12 @@ export class CommunityListComponent implements OnInit, OnDestroy {

  /**
   * Makes sure the next page of a node is added to the tree (top community, sub community of collection)
-   *      > Finds its parent (if not top community) and increases its corresponding collection/subcommunity currentPage
-   *      > Reloads tree with new page added to corresponding top community lis, sub community list or collection list
-   * @param node  The show more node indicating whether it's an increase in top communities, sub communities or collections
+   *      > Finds its parent (if not top community) and increases its corresponding collection/subcommunity
+   *      currentPage
+   *      > Reloads tree with new page added to corresponding top community lis, sub community list or
+   *      collection list
+   * @param node  The show more node indicating whether it's an increase in top communities, sub communities
+   *              or collections
   */
  getNextPage(node: FlatNode): void {
    this.loadingNode = node;
--- a/src/app/community-list-page/show-more-flat-node.model.ts
+++ b/src/app/community-list-page/show-more-flat-node.model.ts
@@ -1,6 +1,6 @@
 /**
 * The show more links in the community tree are also represented by a flatNode so we know where in
- *  the tree it should be rendered an who its parent is (needed for the action resulting in clicking this link)
+ *  the tree it should be rendered and who its parent is (needed for the action resulting in clicking this link)
 */
 export class ShowMoreFlatNode {
 }
--- a/src/app/community-page/community-page.component.html
+++ b/src/app/community-page/community-page.component.html
@@ -21,9 +21,6 @@
          </ds-comcol-page-content>
        </header>
        <ds-dso-edit-menu></ds-dso-edit-menu>
-        <div class="pl-2 space-children-mr">
-          <ds-dso-page-subscription-button [dso]="communityPayload"></ds-dso-page-subscription-button>
-        </div>
      </div>
      <section class="comcol-page-browse-section">

--- a/src/app/core/auth/auth.interceptor.ts
+++ b/src/app/core/auth/auth.interceptor.ts
@@ -152,12 +152,12 @@ export class AuthInterceptor implements HttpInterceptor {

        let authMethodModel: AuthMethod;
        if (splittedRealm.length === 1) {
-          authMethodModel = new AuthMethod(methodName);
+          authMethodModel = new AuthMethod(methodName, Number(j));
          authMethodModels.push(authMethodModel);
        } else if (splittedRealm.length > 1) {
          let location = splittedRealm[1];
          location = this.parseLocation(location);
-          authMethodModel = new AuthMethod(methodName, location);
+          authMethodModel = new AuthMethod(methodName, Number(j), location);
          authMethodModels.push(authMethodModel);
        }
      }
@@ -165,7 +165,7 @@ export class AuthInterceptor implements HttpInterceptor {
      // make sure the email + password login component gets rendered first
      authMethodModels = this.sortAuthMethods(authMethodModels);
    } else {
-      authMethodModels.push(new AuthMethod(AuthMethodType.Password));
+      authMethodModels.push(new AuthMethod(AuthMethodType.Password, 0));
    }

    return authMethodModels;
--- a/src/app/core/auth/auth.reducer.spec.ts
+++ b/src/app/core/auth/auth.reducer.spec.ts
@@ -598,9 +598,9 @@ describe('authReducer', () => {
      authMethods: [],
      idle: false
    };
-    const authMethods = [
-      new AuthMethod(AuthMethodType.Password),
-      new AuthMethod(AuthMethodType.Shibboleth, 'location')
+    const authMethods: AuthMethod[] = [
+      new AuthMethod(AuthMethodType.Password, 0),
+      new AuthMethod(AuthMethodType.Shibboleth, 1, 'location'),
    ];
    const action = new RetrieveAuthMethodsSuccessAction(authMethods);
    const newState = authReducer(initialState, action);
@@ -632,7 +632,7 @@ describe('authReducer', () => {
      loaded: false,
      blocking: false,
      loading: false,
-      authMethods: [new AuthMethod(AuthMethodType.Password)],
+      authMethods: [new AuthMethod(AuthMethodType.Password, 0)],
      idle: false
    };
    expect(newState).toEqual(state);
--- a/src/app/core/auth/auth.reducer.ts
+++ b/src/app/core/auth/auth.reducer.ts
@@ -236,7 +236,7 @@ export function authReducer(state: any = initialState, action: AuthActions): Aut
      return Object.assign({}, state, {
        loading: false,
        blocking: false,
-        authMethods: [new AuthMethod(AuthMethodType.Password)]
+        authMethods: [new AuthMethod(AuthMethodType.Password, 0)]
      });

    case AuthActionTypes.SET_REDIRECT_URL:
--- a/src/app/core/auth/models/auth.method.ts
+++ b/src/app/core/auth/models/auth.method.ts
@@ -2,11 +2,12 @@ import { AuthMethodType } from './auth.method-type';

 export class AuthMethod {
  authMethodType: AuthMethodType;
+  position: number;
  location?: string;

-  // isStandalonePage? = true;
+  constructor(authMethodName: string, position: number, location?: string) {
+    this.position = position;

-  constructor(authMethodName: string, location?: string) {
    switch (authMethodName) {
      case 'ip': {
        this.authMethodType = AuthMethodType.Ip;
--- a/src/app/core/core.effects.ts
+++ b/src/app/core/core.effects.ts
@@ -7,6 +7,7 @@ import { ServerSyncBufferEffects } from './cache/server-sync-buffer.effects';
 import { ObjectUpdatesEffects } from './data/object-updates/object-updates.effects';
 import { RouteEffects } from './services/route.effects';
 import { RouterEffects } from './router/router.effects';
+import { MenuEffects } from '../shared/menu/menu.effects';

 export const coreEffects = [
  RequestEffects,
@@ -18,4 +19,5 @@ export const coreEffects = [
  ObjectUpdatesEffects,
  RouteEffects,
  RouterEffects,
+  MenuEffects,
 ];
--- a/src/app/core/data/feature-authorization/authorization-data.service.ts
+++ b/src/app/core/data/feature-authorization/authorization-data.service.ts
@@ -74,7 +74,7 @@ export class AuthorizationDataService extends BaseDataService<Authorization> imp
          return [];
        }
      }),
-      catchError(() => observableOf(false)),
+      catchError(() => observableOf([])),
      oneAuthorizationMatchesFeature(featureId)
    );
  }
--- a/src/app/core/data/feature-authorization/authorization-utils.ts
+++ b/src/app/core/data/feature-authorization/authorization-utils.ts
@@ -68,13 +68,13 @@ export const oneAuthorizationMatchesFeature = (featureID: FeatureID) =>
    source.pipe(
      switchMap((authorizations: Authorization[]) => {
        if (isNotEmpty(authorizations)) {
-          return observableCombineLatest(
+          return observableCombineLatest([
            ...authorizations
              .filter((authorization: Authorization) => hasValue(authorization.feature))
              .map((authorization: Authorization) => authorization.feature.pipe(
                getFirstSucceededRemoteDataPayload()
              ))
-          );
+          ]);
        } else {
          return observableOf([]);
        }
--- a/src/app/core/data/request.service.spec.ts
+++ b/src/app/core/data/request.service.spec.ts
@@ -1,6 +1,6 @@
 import { Store, StoreModule } from '@ngrx/store';
 import { cold, getTestScheduler } from 'jasmine-marbles';
-import { EMPTY, of as observableOf } from 'rxjs';
+import { EMPTY, Observable, of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';

 import { getMockObjectCacheService } from '../../shared/mocks/object-cache.service.mock';
@@ -638,4 +638,87 @@ describe('RequestService', () => {
      expect(done$).toBeObservable(cold('-----(t|)', { t: true }));
    }));
  });
+
+  describe('setStaleByHref', () => {
+    const uuid = 'c574a42c-4818-47ac-bbe1-6c3cd622c81f';
+    const href = 'https://rest.api/some/object';
+    const freshRE: any = {
+      request: { uuid, href },
+      state: RequestEntryState.Success
+    };
+    const staleRE: any = {
+      request: { uuid, href },
+      state: RequestEntryState.SuccessStale
+    };
+
+    it(`should call getByHref to retrieve the RequestEntry matching the href`, () => {
+      spyOn(service, 'getByHref').and.returnValue(observableOf(staleRE));
+      service.setStaleByHref(href);
+      expect(service.getByHref).toHaveBeenCalledWith(href);
+    });
+
+    it(`should dispatch a RequestStaleAction for the RequestEntry returned by getByHref`, (done: DoneFn) => {
+      spyOn(service, 'getByHref').and.returnValue(observableOf(staleRE));
+      spyOn(store, 'dispatch');
+      service.setStaleByHref(href).subscribe(() => {
+        const requestStaleAction = new RequestStaleAction(uuid);
+        requestStaleAction.lastUpdated = jasmine.any(Number) as any;
+        expect(store.dispatch).toHaveBeenCalledWith(requestStaleAction);
+        done();
+      });
+    });
+
+   it(`should emit true when the request in the store is stale`, () => {
+     spyOn(service, 'getByHref').and.returnValue(cold('a-b', {
+       a: freshRE,
+       b: staleRE
+     }));
+     const result$ = service.setStaleByHref(href);
+     expect(result$).toBeObservable(cold('--(c|)', { c: true }));
+   });
+  });
+
+  describe('setStaleByHrefSubstring', () => {
+    let dispatchSpy: jasmine.Spy;
+    let getByUUIDSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      dispatchSpy = spyOn(store, 'dispatch');
+      getByUUIDSpy = spyOn(service, 'getByUUID').and.callThrough();
+    });
+
+    describe('with an empty/no matching requests in the state', () => {
+      it('should return true', () => {
+        const done$: Observable<boolean> = service.setStaleByHrefSubstring('https://rest.api/endpoint/selfLink');
+        expect(done$).toBeObservable(cold('(a|)', { a: true }));
+      });
+    });
+
+    describe('with a matching request in the state', () => {
+      beforeEach(() => {
+        const state = Object.assign({}, initialState, {
+          core: Object.assign({}, initialState.core, {
+            'index': {
+              'get-request/href-to-uuid': {
+                'https://rest.api/endpoint/selfLink': '5f2a0d2a-effa-4d54-bd54-5663b960f9eb'
+              }
+            }
+          })
+        });
+        mockStore.setState(state);
+      });
+
+      it('should return an Observable that emits true as soon as the request is stale', () => {
+        dispatchSpy.and.callFake(() => { /* empty */ });   // don't actually set as stale
+        getByUUIDSpy.and.returnValue(cold('a-b--c--d-', {  // but fake the state in the cache
+          a: { state: RequestEntryState.ResponsePending },
+          b: { state: RequestEntryState.Success },
+          c: { state: RequestEntryState.SuccessStale },
+          d: { state: RequestEntryState.Error },
+        }));
+        const done$: Observable<boolean> = service.setStaleByHrefSubstring('https://rest.api/endpoint/selfLink');
+        expect(done$).toBeObservable(cold('-----(a|)', { a: true }));
+      });
+    });
+  });
 });
--- a/src/app/core/data/request.service.ts
+++ b/src/app/core/data/request.service.ts
@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 import { HttpHeaders } from '@angular/common/http';

 import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
-import { filter, map, take, tap } from 'rxjs/operators';
+import { Observable, from as observableFrom } from 'rxjs';
+import { filter, find, map, mergeMap, switchMap, take, tap, toArray } from 'rxjs/operators';
 import cloneDeep from 'lodash/cloneDeep';
 import { hasValue, isEmpty, isNotEmpty, hasNoValue } from '../../shared/empty.util';
 import { ObjectCacheEntry } from '../cache/object-cache.reducer';
@@ -16,7 +16,7 @@ import {
  RequestExecuteAction,
  RequestStaleAction
 } from './request.actions';
-import { GetRequest} from './request.models';
+import { GetRequest } from './request.models';
 import { CommitSSBAction } from '../cache/server-sync-buffer.actions';
 import { RestRequestMethod } from './rest-request-method';
 import { coreSelector } from '../core.selectors';
@@ -300,22 +300,42 @@ export class RequestService {
   * Set all requests that match (part of) the href to stale
   *
   * @param href    A substring of the request(s) href
-   * @return        Returns an observable emitting whether or not the cache is removed
+   * @return        Returns an observable emitting when those requests are all stale
   */
  setStaleByHrefSubstring(href: string): Observable<boolean> {
-    this.store.pipe(
+    const requestUUIDs$ = this.store.pipe(
      select(uuidsFromHrefSubstringSelector(requestIndexSelector, href)),
      take(1)
-    ).subscribe((uuids: string[]) => {
+    );
+    requestUUIDs$.subscribe((uuids: string[]) => {
      for (const uuid of uuids) {
        this.store.dispatch(new RequestStaleAction(uuid));
      }
    });
    this.requestsOnTheirWayToTheStore = this.requestsOnTheirWayToTheStore.filter((reqHref: string) => reqHref.indexOf(href) < 0);

-    return this.store.pipe(
-      select(uuidsFromHrefSubstringSelector(requestIndexSelector, href)),
-      map((uuids) => isEmpty(uuids))
+    // emit true after all requests are stale
+    return requestUUIDs$.pipe(
+      switchMap((uuids: string[]) => {
+        if (isEmpty(uuids)) {
+          // if there were no matching requests, emit true immediately
+          return [true];
+        } else {
+          // otherwise emit all request uuids in order
+          return observableFrom(uuids).pipe(
+            // retrieve the RequestEntry for each uuid
+            mergeMap((uuid: string) => this.getByUUID(uuid)),
+            // check whether it is undefined or stale
+            map((request: RequestEntry) => hasNoValue(request) || isStale(request.state)),
+            // if it is, complete
+            find((stale: boolean) => stale === true),
+            // after all observables above are completed, emit them as a single array
+            toArray(),
+            // when the array comes in, emit true
+            map(() => true)
+          );
+        }
+      })
    );
  }

@@ -334,6 +354,28 @@ export class RequestService {
    );
  }

+  /**
+   * Mark a request as stale
+   * @param href  the href of the request
+   * @return      an Observable that will emit true once the Request becomes stale
+   */
+  setStaleByHref(href: string): Observable<boolean> {
+    const requestEntry$ = this.getByHref(href);
+
+    requestEntry$.pipe(
+      map((re: RequestEntry) => re.request.uuid),
+      take(1),
+    ).subscribe((uuid: string) => {
+      this.store.dispatch(new RequestStaleAction(uuid));
+    });
+
+    return requestEntry$.pipe(
+      map((request: RequestEntry) => isStale(request.state)),
+      filter((stale: boolean) => stale),
+      take(1)
+    );
+  }
+
  /**
   * Check if a GET request is in the cache or if it's still pending
   * @param {GetRequest} request The request to check
--- a/src/app/core/data/root-data.service.spec.ts
+++ b/src/app/core/data/root-data.service.spec.ts
@@ -1,16 +1,18 @@
 import { RootDataService } from './root-data.service';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { Observable, of } from 'rxjs';
+import {
+  createSuccessfulRemoteDataObject$,
+  createFailedRemoteDataObject$
+} from '../../shared/remote-data.utils';
+import { Observable } from 'rxjs';
 import { RemoteData } from './remote-data';
 import { Root } from './root.model';
-import { RawRestResponse } from '../dspace-rest/raw-rest-response.model';
 import { cold } from 'jasmine-marbles';

 describe('RootDataService', () => {
  let service: RootDataService;
  let halService: HALEndpointService;
-  let restService;
+  let requestService;
  let rootEndpoint;
  let findByHrefSpy;

@@ -19,10 +21,10 @@ describe('RootDataService', () => {
    halService = jasmine.createSpyObj('halService', {
      getRootHref: rootEndpoint,
    });
-    restService = jasmine.createSpyObj('halService', {
-      get: jasmine.createSpy('get'),
-    });
-    service = new RootDataService(null, null, null, halService, restService);
+    requestService = jasmine.createSpyObj('requestService', [
+      'setStaleByHref',
+    ]);
+    service = new RootDataService(requestService, null, null, halService);

    findByHrefSpy = spyOn(service as any, 'findByHref');
    findByHrefSpy.and.returnValue(createSuccessfulRemoteDataObject$({}));
@@ -47,12 +49,8 @@ describe('RootDataService', () => {
    let result$: Observable<boolean>;

    it('should return observable of true when root endpoint is available', () => {
-      const mockResponse = {
-        statusCode: 200,
-        statusText: 'OK'
-      } as RawRestResponse;
+      spyOn(service, 'findRoot').and.returnValue(createSuccessfulRemoteDataObject$<Root>({} as any));

-      restService.get.and.returnValue(of(mockResponse));
      result$ = service.checkServerAvailability();

      expect(result$).toBeObservable(cold('(a|)', {
@@ -61,12 +59,8 @@ describe('RootDataService', () => {
    });

    it('should return observable of false when root endpoint is not available', () => {
-      const mockResponse = {
-        statusCode: 500,
-        statusText: 'Internal Server Error'
-      } as RawRestResponse;
+      spyOn(service, 'findRoot').and.returnValue(createFailedRemoteDataObject$<Root>('500'));

-      restService.get.and.returnValue(of(mockResponse));
      result$ = service.checkServerAvailability();

      expect(result$).toBeObservable(cold('(a|)', {
@@ -75,4 +69,12 @@ describe('RootDataService', () => {
    });

  });
+
+  describe(`invalidateRootCache`, () => {
+    it(`should set the cached root request to stale`, () => {
+      service.invalidateRootCache();
+      expect(halService.getRootHref).toHaveBeenCalled();
+      expect(requestService.setStaleByHref).toHaveBeenCalledWith(rootEndpoint);
+    });
+  });
 });
--- a/src/app/core/data/root-data.service.ts
+++ b/src/app/core/data/root-data.service.ts
@@ -7,12 +7,11 @@ import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { Observable, of as observableOf } from 'rxjs';
 import { RemoteData } from './remote-data';
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
-import { DspaceRestService } from '../dspace-rest/dspace-rest.service';
-import { RawRestResponse } from '../dspace-rest/raw-rest-response.model';
 import { catchError, map } from 'rxjs/operators';
 import { BaseDataService } from './base/base-data.service';
 import { ObjectCacheService } from '../cache/object-cache.service';
 import { dataService } from './base/data-service.decorator';
+import { getFirstCompletedRemoteData } from '../shared/operators';

 /**
 * A service to retrieve the {@link Root} object from the REST API.
@@ -25,7 +24,6 @@ export class RootDataService extends BaseDataService<Root> {
    protected rdbService: RemoteDataBuildService,
    protected objectCache: ObjectCacheService,
    protected halService: HALEndpointService,
-    protected restService: DspaceRestService,
  ) {
    super('', requestService, rdbService, objectCache, halService, 6 * 60 * 60 * 1000);
  }
@@ -34,12 +32,13 @@ export class RootDataService extends BaseDataService<Root> {
   * Check if root endpoint is available
   */
  checkServerAvailability(): Observable<boolean> {
-    return this.restService.get(this.halService.getRootHref()).pipe(
+    return this.findRoot().pipe(
      catchError((err ) => {
        console.error(err);
        return observableOf(false);
      }),
-      map((res: RawRestResponse) => res.statusCode === 200)
+      getFirstCompletedRemoteData(),
+      map((rootRd: RemoteData<Root>) => rootRd.statusCode === 200)
    );
  }

@@ -60,6 +59,6 @@ export class RootDataService extends BaseDataService<Root> {
   * Set to sale the root endpoint cache hit
   */
  invalidateRootCache() {
-    this.requestService.setStaleByHrefSubstring(this.halService.getRootHref());
+    this.requestService.setStaleByHref(this.halService.getRootHref());
  }
 }
--- a/src/app/core/eperson/eperson-data.service.ts
+++ b/src/app/core/eperson/eperson-data.service.ts
@@ -34,6 +34,7 @@ import { PatchData, PatchDataImpl } from '../data/base/patch-data';
 import { DeleteData, DeleteDataImpl } from '../data/base/delete-data';
 import { RestRequestMethod } from '../data/rest-request-method';
 import { dataService } from '../data/base/data-service.decorator';
+import { getEPersonEditRoute, getEPersonsRoute } from '../../access-control/access-control-routing-paths';

 const ePeopleRegistryStateSelector = (state: AppState) => state.epeopleRegistry;
 const editEPersonSelector = createSelector(ePeopleRegistryStateSelector, (ePeopleRegistryState: EPeopleRegistryState) => ePeopleRegistryState.editEPerson);
@@ -281,15 +282,14 @@ export class EPersonDataService extends IdentifiableDataService<EPerson> impleme
        this.editEPerson(ePerson);
      }
    });
-    return '/access-control/epeople';
+    return getEPersonEditRoute(ePerson.id);
  }

  /**
   * Get EPeople admin page
-   * @param ePerson New EPerson to edit
   */
  public getEPeoplePageRouterLink(): string {
-    return '/access-control/epeople';
+    return getEPersonsRoute();
  }

  /**
--- a/src/app/core/eperson/group-data.service.ts
+++ b/src/app/core/eperson/group-data.service.ts
@@ -40,6 +40,7 @@ import { DeleteData, DeleteDataImpl } from '../data/base/delete-data';
 import { Operation } from 'fast-json-patch';
 import { RestRequestMethod } from '../data/rest-request-method';
 import { dataService } from '../data/base/data-service.decorator';
+import { getGroupEditRoute } from '../../access-control/access-control-routing-paths';

 const groupRegistryStateSelector = (state: AppState) => state.groupRegistry;
 const editGroupSelector = createSelector(groupRegistryStateSelector, (groupRegistryState: GroupRegistryState) => groupRegistryState.editGroup);
@@ -264,15 +265,15 @@ export class GroupDataService extends IdentifiableDataService<Group> implements
   * @param group Group we want edit page for
   */
  public getGroupEditPageRouterLink(group: Group): string {
-    return this.getGroupEditPageRouterLinkWithID(group.id);
+    return getGroupEditRoute(group.id);
  }

  /**
   * Get Edit page of group
   * @param groupID Group ID we want edit page for
   */
-  public getGroupEditPageRouterLinkWithID(groupId: string): string {
-    return '/access-control/groups/' + groupId;
+  public getGroupEditPageRouterLinkWithID(groupID: string): string {
+    return getGroupEditRoute(groupID);
  }

  /**
--- a/src/app/core/server-check/server-check.guard.spec.ts
+++ b/src/app/core/server-check/server-check.guard.spec.ts
@@ -1,68 +1,86 @@
 import { ServerCheckGuard } from './server-check.guard';
-import { Router } from '@angular/router';
+import { Router, NavigationStart, UrlTree, NavigationEnd, RouterEvent } from '@angular/router';

-import { of } from 'rxjs';
-import { take } from 'rxjs/operators';
-
-import { getPageInternalServerErrorRoute } from '../../app-routing-paths';
+import { of, ReplaySubject } from 'rxjs';
 import { RootDataService } from '../data/root-data.service';
+import { TestScheduler } from 'rxjs/testing';
 import SpyObj = jasmine.SpyObj;

 describe('ServerCheckGuard', () => {
  let guard: ServerCheckGuard;
-  let router: SpyObj<Router>;
+  let router: Router;
+  const eventSubject = new ReplaySubject<RouterEvent>(1);
  let rootDataServiceStub: SpyObj<RootDataService>;
-
-  rootDataServiceStub = jasmine.createSpyObj('RootDataService', {
-    checkServerAvailability: jasmine.createSpy('checkServerAvailability'),
-    invalidateRootCache: jasmine.createSpy('invalidateRootCache')
-  });
-  router = jasmine.createSpyObj('Router', {
-    navigateByUrl: jasmine.createSpy('navigateByUrl')
-  });
+  let testScheduler: TestScheduler;
+  let redirectUrlTree: UrlTree;

  beforeEach(() => {
-    guard = new ServerCheckGuard(router, rootDataServiceStub);
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
    });
-
-  afterEach(() => {
-    router.navigateByUrl.calls.reset();
-    rootDataServiceStub.invalidateRootCache.calls.reset();
+    rootDataServiceStub = jasmine.createSpyObj('RootDataService', {
+      checkServerAvailability: jasmine.createSpy('checkServerAvailability'),
+      invalidateRootCache: jasmine.createSpy('invalidateRootCache'),
+      findRoot: jasmine.createSpy('findRoot')
+    });
+    redirectUrlTree = new UrlTree();
+    router = {
+      events: eventSubject.asObservable(),
+      navigateByUrl: jasmine.createSpy('navigateByUrl'),
+      parseUrl: jasmine.createSpy('parseUrl').and.returnValue(redirectUrlTree)
+    } as any;
+    guard = new ServerCheckGuard(router, rootDataServiceStub);
  });

  it('should be created', () => {
    expect(guard).toBeTruthy();
  });

-  describe('when root endpoint has succeeded', () => {
+  describe('when root endpoint request has succeeded', () => {
    beforeEach(() => {
      rootDataServiceStub.checkServerAvailability.and.returnValue(of(true));
    });

-    it('should not redirect to error page', () => {
-      guard.canActivateChild({} as any, {} as any).pipe(
-        take(1)
-      ).subscribe((canActivate: boolean) => {
-        expect(canActivate).toEqual(true);
-        expect(rootDataServiceStub.invalidateRootCache).not.toHaveBeenCalled();
-        expect(router.navigateByUrl).not.toHaveBeenCalled();
+    it('should return true', () => {
+      testScheduler.run(({ expectObservable }) => {
+        const result$ = guard.canActivateChild({} as any, {} as any);
+        expectObservable(result$).toBe('(a|)', { a: true });
      });
    });
  });

-  describe('when root endpoint has not succeeded', () => {
+  describe('when root endpoint request has not succeeded', () => {
    beforeEach(() => {
      rootDataServiceStub.checkServerAvailability.and.returnValue(of(false));
    });

-    it('should redirect to error page', () => {
-      guard.canActivateChild({} as any, {} as any).pipe(
-        take(1)
-      ).subscribe((canActivate: boolean) => {
-        expect(canActivate).toEqual(false);
-        expect(rootDataServiceStub.invalidateRootCache).toHaveBeenCalled();
-        expect(router.navigateByUrl).toHaveBeenCalledWith(getPageInternalServerErrorRoute());
+    it('should return a UrlTree with the route to the 500 error page', () => {
+      testScheduler.run(({ expectObservable }) => {
+        const result$ = guard.canActivateChild({} as any, {} as any);
+        expectObservable(result$).toBe('(b|)', { b: redirectUrlTree });
      });
+      expect(router.parseUrl).toHaveBeenCalledWith('/500');
+    });
+  });
+
+  describe(`listenForRouteChanges`, () => {
+    it(`should retrieve the root endpoint, without using the cache, when the method is first called`, () => {
+        testScheduler.run(() => {
+          guard.listenForRouteChanges();
+          expect(rootDataServiceStub.findRoot).toHaveBeenCalledWith(false);
+        });
+    });
+
+    it(`should invalidate the root cache on every NavigationStart event`, () => {
+        testScheduler.run(() => {
+          guard.listenForRouteChanges();
+          eventSubject.next(new NavigationStart(1,''));
+          eventSubject.next(new NavigationEnd(1,'', ''));
+          eventSubject.next(new NavigationStart(2,''));
+          eventSubject.next(new NavigationEnd(2,'', ''));
+          eventSubject.next(new NavigationStart(3,''));
+        });
+        expect(rootDataServiceStub.invalidateRootCache).toHaveBeenCalledTimes(3);
    });
  });
 });
--- a/src/app/core/server-check/server-check.guard.ts
+++ b/src/app/core/server-check/server-check.guard.ts
@@ -1,8 +1,15 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router';
+import {
+  ActivatedRouteSnapshot,
+  CanActivateChild,
+  Router,
+  RouterStateSnapshot,
+  UrlTree,
+  NavigationStart
+} from '@angular/router';

 import { Observable } from 'rxjs';
-import { take, tap } from 'rxjs/operators';
+import { take, map, filter } from 'rxjs/operators';

 import { RootDataService } from '../data/root-data.service';
 import { getPageInternalServerErrorRoute } from '../../app-routing-paths';
@@ -23,17 +30,38 @@ export class ServerCheckGuard implements CanActivateChild {
   */
  canActivateChild(
    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot): Observable<boolean> {
+    state: RouterStateSnapshot
+  ): Observable<boolean | UrlTree> {

    return this.rootDataService.checkServerAvailability().pipe(
      take(1),
-      tap((isAvailable: boolean) => {
+      map((isAvailable: boolean) => {
        if (!isAvailable) {
-          this.rootDataService.invalidateRootCache();
-          this.router.navigateByUrl(getPageInternalServerErrorRoute());
+          return this.router.parseUrl(getPageInternalServerErrorRoute());
+        } else {
+          return true;
        }
      })
    );
+  }

+  /**
+   * Listen to all router events. Every time a new navigation starts, invalidate the cache
+   * for the root endpoint. That way we retrieve it once per routing operation to ensure the
+   * backend is not down. But if the guard is called multiple times during the same routing
+   * operation, the cached version is used.
+   */
+  listenForRouteChanges(): void {
+    // we'll always be too late for the first NavigationStart event with the router subscribe below,
+    // so this statement is for the very first route operation. A `find` without using the cache,
+    // rather than an invalidateRootCache, because invalidating as the app is bootstrapping can
+    // break other features
+    this.rootDataService.findRoot(false);
+
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationStart),
+    ).subscribe(() => {
+      this.rootDataService.invalidateRootCache();
+    });
  }
 }
--- a/src/app/core/services/browser-hard-redirect.service.ts
+++ b/src/app/core/services/browser-hard-redirect.service.ts
@@ -38,8 +38,8 @@ export class BrowserHardRedirectService extends HardRedirectService {
  /**
   * Get the origin of the current URL
   * i.e. <scheme> "://" <hostname> [ ":" <port> ]
-   * e.g. if the URL is https://demo7.dspace.org/search?query=test,
-   * the origin would be https://demo7.dspace.org
+   * e.g. if the URL is https://demo.dspace.org/search?query=test,
+   * the origin would be https://demo.dspace.org
   */
  getCurrentOrigin(): string {
    return this.location.origin;
--- a/src/app/core/services/hard-redirect.service.ts
+++ b/src/app/core/services/hard-redirect.service.ts
@@ -25,8 +25,8 @@ export abstract class HardRedirectService {
  /**
   * Get the origin of the current URL
   * i.e. <scheme> "://" <hostname> [ ":" <port> ]
-   * e.g. if the URL is https://demo7.dspace.org/search?query=test,
-   * the origin would be https://demo7.dspace.org
+   * e.g. if the URL is https://demo.dspace.org/search?query=test,
+   * the origin would be https://demo.dspace.org
   */
  abstract getCurrentOrigin(): string;
 }
--- a/src/app/core/services/server-hard-redirect.service.ts
+++ b/src/app/core/services/server-hard-redirect.service.ts
@@ -69,8 +69,8 @@ export class ServerHardRedirectService extends HardRedirectService {
  /**
   * Get the origin of the current URL
   * i.e. <scheme> "://" <hostname> [ ":" <port> ]
-   * e.g. if the URL is https://demo7.dspace.org/search?query=test,
-   * the origin would be https://demo7.dspace.org
+   * e.g. if the URL is https://demo.dspace.org/search?query=test,
+   * the origin would be https://demo.dspace.org
   */
  getCurrentOrigin(): string {
    return this.req.protocol + '://' + this.req.headers.host;
--- a/src/app/core/submission/models/workspaceitem-section-upload-file.model.ts
+++ b/src/app/core/submission/models/workspaceitem-section-upload-file.model.ts
@@ -29,6 +29,18 @@ export class WorkspaceitemSectionUploadFileObject {
    value: string;
  };

+  /**
+   * The file format information
+   */
+  format: {
+    shortDescription: string,
+    description: string,
+    mimetype: string,
+    supportLevel: string,
+    internal: boolean,
+    type: string
+  };
+
  /**
   * The file url
   */
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { AlertType } from '../../shared/alert/aletr-type';
+import { AlertType } from '../../shared/alert/alert-type';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { DsoEditMetadataForm } from './dso-edit-metadata-form';
 import { map } from 'rxjs/operators';
--- a/src/app/forgot-password/forgot-password-email/forgot-email.component.html
+++ b/src/app/forgot-password/forgot-password-email/forgot-email.component.html
@@ -1,3 +1,3 @@
-<ds-register-email-form
+<ds-themed-register-email-form
    [MESSAGE_PREFIX]="'forgot-email.form'" [typeRequest]="typeRequest">
-</ds-register-email-form>
+</ds-themed-register-email-form>
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,4 +1,4 @@
-<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+<div [ngClass]="{'open': !(isNavBarCollapsed | async)}" id="header-navbar-wrapper">
    <ds-themed-header></ds-themed-header>
    <ds-themed-navbar></ds-themed-navbar>
 </div>
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,4 +1,6 @@
 :host {
  position: relative;
-  z-index: var(--ds-nav-z-index);
+  div#header-navbar-wrapper {
+    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
+  }
 }
--- a/src/app/header/context-help-toggle/context-help-toggle.component.ts
+++ b/src/app/header/context-help-toggle/context-help-toggle.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef } from '@angular/core';
 import { ContextHelpService } from '../../shared/context-help.service';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';

 /**
@@ -15,12 +15,23 @@ import { map } from 'rxjs/operators';
 export class ContextHelpToggleComponent implements OnInit {
  buttonVisible$: Observable<boolean>;

+  subscriptions: Subscription[] = [];
+
  constructor(
-    private contextHelpService: ContextHelpService,
-  ) { }
+    protected elRef: ElementRef,
+    protected contextHelpService: ContextHelpService,
+  ) {
+  }

  ngOnInit(): void {
    this.buttonVisible$ = this.contextHelpService.tooltipCount$().pipe(map(x => x > 0));
+    this.subscriptions.push(this.buttonVisible$.subscribe((showContextHelpToggle: boolean) => {
+      if (showContextHelpToggle) {
+        this.elRef.nativeElement.classList.remove('d-none');
+      } else {
+        this.elRef.nativeElement.classList.add('d-none');
+      }
+    }));
  }

  onClick() {
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -7,12 +7,12 @@

      <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
        <ds-themed-search-navbar></ds-themed-search-navbar>
-        <ds-lang-switch></ds-lang-switch>
+        <ds-themed-lang-switch></ds-themed-lang-switch>
        <ds-context-help-toggle></ds-context-help-toggle>
        <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
        <ds-impersonate-navbar></ds-impersonate-navbar>
-        <div class="pl-2">
-          <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
+        <div *ngIf="isXsOrSm$ | async" class="pl-2">
+          <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
                  aria-controls="collapsingNav"
                  aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
            <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,3 +1,7 @@
+header {
+  background-color: var(--ds-header-bg);
+}
+
 .navbar-brand img {
  max-height: var(--ds-header-logo-height);
  max-width: 100%;
@@ -20,3 +24,8 @@
  }
 }

+.navbar {
+  display: flex;
+  gap: calc(var(--bs-spacer) / 3);
+  align-items: center;
+}
--- a/src/app/header/header.component.spec.ts
+++ b/src/app/header/header.component.spec.ts
@@ -10,6 +10,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuServiceStub } from '../shared/testing/menu-service.stub';
+import { HostWindowService } from '../shared/host-window.service';
+import { HostWindowServiceStub } from '../shared/testing/host-window-service.stub';

 let comp: HeaderComponent;
 let fixture: ComponentFixture<HeaderComponent>;
@@ -26,6 +28,7 @@ describe('HeaderComponent', () => {
        ReactiveFormsModule],
      declarations: [HeaderComponent],
      providers: [
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
        { provide: MenuService, useValue: menuService }
      ],
      schemas: [NO_ERRORS_SCHEMA]
@@ -40,7 +43,7 @@ describe('HeaderComponent', () => {
    fixture = TestBed.createComponent(HeaderComponent);

    comp = fixture.componentInstance;
-
+    fixture.detectChanges();
  });

  describe('when the toggle button is clicked', () => {
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
+import { HostWindowService } from '../shared/host-window.service';

 /**
 * Represents the header with the logo and simple navigation
@@ -11,20 +12,25 @@ import { MenuID } from '../shared/menu/menu-id.model';
  styleUrls: ['header.component.scss'],
  templateUrl: 'header.component.html',
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
  /**
   * Whether user is authenticated.
   * @type {Observable<string>}
   */
  public isAuthenticated: Observable<boolean>;
-  public showAuth = false;
+  public isXsOrSm$: Observable<boolean>;
  menuID = MenuID.PUBLIC;

  constructor(
-    private menuService: MenuService
+    protected menuService: MenuService,
+    protected windowService: HostWindowService,
  ) {
  }

+  ngOnInit(): void {
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
+  }
+
  public toggleNavbar(): void {
    this.menuService.toggleMenu(this.menuID);
  }
--- 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
@@ -3,7 +3,7 @@ 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';
+import { AlertType } from '../../../shared/alert/alert-type';

 /**
 * A component to render a "health component" object.
--- a/src/app/home-page/home-news/home-news.component.html
+++ b/src/app/home-page/home-news/home-news.component.html
@@ -1,4 +1,4 @@
-<div class="jumbotron jumbotron-fluid">
+<div class="jumbotron jumbotron-fluid mt-ncs">
  <div class="container">
    <div class="d-flex flex-wrap">
      <div>
--- a/src/app/home-page/home-news/home-news.component.scss
+++ b/src/app/home-page/home-news/home-news.component.scss
@@ -1,7 +1,5 @@
 :host {
    display: block;
-    margin-top: calc(-1 * var(--ds-content-spacing));
-    margin-bottom: calc(-1 * var(--ds-content-spacing));
 }

 .display-3 {
--- a/src/app/home-page/recent-item-list/recent-item-list.component.html
+++ b/src/app/home-page/recent-item-list/recent-item-list.component.html
@@ -1,12 +1,12 @@
 <ng-container *ngVar="(itemRD$ | async) as itemRD">
        <div class="mt-4" [ngClass]="placeholderFontClass" *ngIf="itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0" @fadeIn>
-                <div class="d-flex flex-row border-bottom mb-4 pb-4 ng-tns-c416-2"></div>
+                <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
                <h2> {{'home.recent-submissions.head' | translate}}</h2>
                <div class="my-4" *ngFor="let item of itemRD?.payload?.page">
                        <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
                        </ds-listable-object-component-loader>
                </div>
-                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-left ng-tns-c290-40"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
+                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
        </div>
        <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
        <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}">
--- a/src/app/item-page/alerts/item-alerts.component.ts
+++ b/src/app/item-page/alerts/item-alerts.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Item } from '../../core/shared/item.model';
-import { AlertType } from '../../shared/alert/aletr-type';
+import { AlertType } from '../../shared/alert/alert-type';

@Component({
  selector: 'ds-item-alerts',
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
@@ -25,7 +25,7 @@
  <div class="{{columnSizes.columns[3].buildClasses()}} row-element d-flex align-items-center">
    <div class="text-center w-100">
      <div class="btn-group relationship-action-buttons">
-        <a *ngIf="bitstreamDownloadUrl != null" [href]="bitstreamDownloadUrl"
+        <a *ngIf="bitstreamDownloadUrl != null" [routerLink]="bitstreamDownloadUrl"
                class="btn btn-outline-primary btn-sm"
                title="{{'item.edit.bitstreams.edit.buttons.download' | translate}}"
                [attr.data-test]="'download-button' | dsBrowserOnly">
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.spec.ts
@@ -13,6 +13,7 @@ import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-dat
 import { getBitstreamDownloadRoute } from '../../../../app-routing-paths';
 import { By } from '@angular/platform-browser';
 import { BrowserOnlyMockPipe } from '../../../../shared/testing/browser-only-mock.pipe';
+import { RouterTestingModule } from '@angular/router/testing';

 let comp: ItemEditBitstreamComponent;
 let fixture: ComponentFixture<ItemEditBitstreamComponent>;
@@ -72,7 +73,10 @@ describe('ItemEditBitstreamComponent', () => {
    );

    TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
+      imports: [
+        RouterTestingModule.withRoutes([]),
+        TranslateModule.forRoot(),
+      ],
      declarations: [
        ItemEditBitstreamComponent,
        VarDirective,
--- a/src/app/item-page/edit-item-page/item-move/item-move.component.html
+++ b/src/app/item-page/edit-item-page/item-move/item-move.component.html
@@ -21,7 +21,11 @@
                <div class="col-12">
                    <p>
                      <label for="inheritPoliciesCheckbox">
-                        <input type="checkbox" name="tc" [(ngModel)]="inheritPolicies" id="inheritPoliciesCheckbox">
+                        <ng-template #tooltipContent>
+                          {{ 'item.edit.move.inheritpolicies.tooltip' | translate }}
+                        </ng-template>
+                        <input type="checkbox" name="tc" [(ngModel)]="inheritPolicies" id="inheritPoliciesCheckbox" [ngbTooltip]="tooltipContent"
+                        >
                        {{'item.edit.move.inheritpolicies.checkbox' |translate}}
                      </label>
                    </p>
--- a/src/app/item-page/edit-item-page/item-version-history/item-version-history.component.ts
+++ b/src/app/item-page/edit-item-page/item-version-history/item-version-history.component.ts
@@ -5,7 +5,7 @@ import { Item } from '../../../core/shared/item.model';
 import { map } from 'rxjs/operators';
 import { getFirstSucceededRemoteData } from '../../../core/shared/operators';
 import { ActivatedRoute } from '@angular/router';
-import { AlertType } from '../../../shared/alert/aletr-type';
+import { AlertType } from '../../../shared/alert/alert-type';

@Component({
  selector: 'ds-item-version-history',
--- a/src/app/item-page/mirador-viewer/mirador-viewer.component.ts
+++ b/src/app/item-page/mirador-viewer/mirador-viewer.component.ts
@@ -70,7 +70,8 @@ export class MiradorViewerComponent implements OnInit {
    const manifestApiEndpoint = encodeURIComponent(environment.rest.baseUrl + '/iiif/'
      + this.object.id + '/manifest');
    // The Express path to Mirador viewer.
-    let viewerPath = '/iiif/mirador/index.html?manifest=' + manifestApiEndpoint;
+    let viewerPath = `${environment.ui.nameSpace}${environment.ui.nameSpace.length > 1 ? '/' : ''}`
+      + `iiif/mirador/index.html?manifest=${manifestApiEndpoint}`;
    if (this.searchable) {
      // Tell the viewer add search to menu.
      viewerPath += '&searchable=' + this.searchable;
--- a/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.ts
+++ b/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.ts
@@ -15,7 +15,7 @@ import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { hasValue } from '../../../shared/empty.util';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { AlertType } from '../../../shared/alert/aletr-type';
+import { AlertType } from '../../../shared/alert/alert-type';
 import { Item } from '../../../core/shared/item.model';
 import { OrcidAuthService } from '../../../core/orcid/orcid-auth.service';

--- a/src/app/item-page/simple/field-components/specific-field/title/item-page-title-field.component.html
+++ b/src/app/item-page/simple/field-components/specific-field/title/item-page-title-field.component.html
@@ -1,6 +1,6 @@
-<h2 class="item-page-title-field">
+<h1 class="item-page-title-field">
  <div *ngIf="item.firstMetadataValue('dspace.entity.type') as type" class="d-inline">
    {{ type.toLowerCase() + '.page.titleprefix' | translate }}
  </div>
  <span class="dont-break-out">{{ dsoNameService.getName(item) }}</span>
-</h2>
+</h1>
--- a/Show More
+++ b/Show More