Merge remote-tracking branch 'origin/main' into restore-csr-fallback

2025-10-07 01:54:15 +00:00 · 2023-02-10 11:53:31 +01:00
parent 88cb397dc9 f2624fdf86
commit 59d8ba5d7e
629 changed files with 30651 additions and 17689 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -6,7 +6,8 @@
    "eslint-plugin-import",
    "eslint-plugin-jsdoc",
    "eslint-plugin-deprecation",
-    "eslint-plugin-unused-imports"
+    "unused-imports",
+    "eslint-plugin-lodash"
  ],
  "overrides": [
    {
@@ -202,7 +203,13 @@
        "deprecation/deprecation": "warn",

        "import/order": "off",
-        "import/no-deprecated": "warn"
+        "import/no-deprecated": "warn",
+        "import/no-namespace": "error",
+        "unused-imports/no-unused-imports": "error",
+        "lodash/import-scope": [
+          "error",
+          "method"
+        ]
      }
    },
    {
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,7 +1,7 @@
 ## References
 _Add references/links to any related issues or PRs. These may include:_
-* Fixes #[issue-number]
-* Requires DSpace/DSpace#[pr-number] (if a REST API PR is required to test this)
+* Fixes #`issue-number` (if this fixes an issue ticket)
+* Requires DSpace/DSpace#`pr-number` (if a REST API PR is required to test this)

 ## Description
 Short summary of changes (1-2 sentences).
@@ -19,8 +19,10 @@ List of changes in this PR:
 _This checklist provides a reminder of what we are going to look for when reviewing your PR. You need not complete this checklist prior to creating your PR (draft PRs are always welcome). If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!_

 - [ ] My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
- [ ] My PR passes [TSLint](https://palantir.github.io/tslint/) validation using `yarn run lint`
- [ ] My PR doesn't introduce circular dependencies
+- [ ] My PR passes [ESLint](https://eslint.org/) validation using `yarn lint`
+- [ ] My PR doesn't introduce circular dependencies (verified via `yarn check-circ-deps`)
 - [ ] My PR includes [TypeDoc](https://typedoc.org/) comments for _all new (or modified) public methods and classes_. It also includes TypeDoc for large or complex private methods.
 - [ ] My PR passes all specs/tests and includes new/updated specs or tests based on the [Code Testing Guide](https://wiki.lyrasis.org/display/DSPACE/Code+Testing+Guide).
- [ ] If my PR includes new, third-party dependencies (in `package.json`), I've made sure their licenses align with the [DSpace BSD License](https://github.com/DSpace/DSpace/blob/main/LICENSE) based on the [Licensing of Contributions](https://wiki.lyrasis.org/display/DSPACE/Code+Contribution+Guidelines#CodeContributionGuidelines-LicensingofContributions) documentation.
+- [ ] If my PR includes new libraries/dependencies (in `package.json`), I've made sure their licenses align with the [DSpace BSD License](https://github.com/DSpace/DSpace/blob/main/LICENSE) based on the [Licensing of Contributions](https://wiki.lyrasis.org/display/DSPACE/Code+Contribution+Guidelines#CodeContributionGuidelines-LicensingofContributions) documentation.
+- [ ] If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
+- [ ] If my PR fixes an issue ticket, I've [linked them together](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -6,34 +6,39 @@ name: Build
 # Run this Build for all pushes / PRs to current branch
 on: [push, pull_request]

+permissions:
+  contents: read  #  to fetch code (actions/checkout)
+
 jobs:
  tests:
    runs-on: ubuntu-latest
    env:
      # The ci step will test the dspace-angular code against DSpace REST.
      # Direct that step to utilize a DSpace REST service that has been started in docker.
-      DSPACE_REST_HOST: localhost
+      DSPACE_REST_HOST: 127.0.0.1
      DSPACE_REST_PORT: 8080
      DSPACE_REST_NAMESPACE: '/server'
      DSPACE_REST_SSL: false
+      # Spin up UI on 127.0.0.1 to avoid host resolution issues in e2e tests with Node 18+
+      DSPACE_UI_HOST: 127.0.0.1
      # When Chrome version is specified, we pin to a specific version of Chrome
      # Comment this out to use the latest release
      #CHROME_VERSION: "90.0.4430.212-1"
    strategy:
      # Create a matrix of Node versions to test against (in parallel)
      matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
      # Do NOT exit immediately if one matrix job fails
      fail-fast: false
    # These are the actual CI steps to perform per job
    steps:
      # https://github.com/actions/checkout
      - name: Checkout codebase
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3

      # https://github.com/actions/setup-node
      - name: Install Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}

@@ -58,7 +63,7 @@ jobs:
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - name: Cache Yarn dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          # Cache entire Yarn cache directory (see previous step)
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -85,7 +90,7 @@ jobs:
      # Upload coverage reports to Codecov (for one version of Node only)
      # https://github.com/codecov/codecov-action
      - name: Upload coverage to Codecov.io
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
        if: matrix.node-version == '16.x'

      # Using docker-compose start backend using CI configuration
@@ -100,7 +105,7 @@ jobs:
      # https://github.com/cypress-io/github-action
      # (NOTE: to run these e2e tests locally, just use 'ng e2e')
      - name: Run e2e tests (integration tests)
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
        with:
          # Run tests in Chrome, headless mode
          browser: chrome
@@ -109,14 +114,14 @@ jobs:
          start: yarn run serve:ssr
          # Wait for backend & frontend to be available
          # NOTE: We use the 'sites' REST endpoint to also ensure the database is ready
-          wait-on: http://localhost:8080/server/api/core/sites, http://localhost:4000
+          wait-on: http://127.0.0.1:8080/server/api/core/sites, http://127.0.0.1:4000
          # Wait for 2 mins max for everything to respond
          wait-on-timeout: 120

      # Cypress always creates a video of all e2e tests (whether they succeeded or failed)
      # Save those in an Artifact
      - name: Upload e2e test videos to Artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
        if: always()
        with:
          name: e2e-test-videos
@@ -125,7 +130,7 @@ jobs:
      # If e2e tests fail, Cypress creates a screenshot of what happened
      # Save those in an Artifact
      - name: Upload e2e test failure screenshots to Artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
        if: failure()
        with:
          name: e2e-test-screenshots
@@ -144,7 +149,7 @@ jobs:
        run: |
          nohup yarn run serve:ssr &
          printf 'Waiting for app to start'
-          until curl --output /dev/null --silent --head --fail http://localhost:4000/home; do
+          until curl --output /dev/null --silent --head --fail http://127.0.0.1:4000/home; do
            printf '.'
            sleep 2
          done
@@ -155,7 +160,7 @@ jobs:
      # This step also prints entire HTML of homepage for easier debugging if grep fails.
      - name: Verify SSR (server-side rendering)
        run: |
-          result=$(wget -O- -q http://localhost:4000/home)
+          result=$(wget -O- -q http://127.0.0.1:4000/home)
          echo "$result"
          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep DSpace

--- a/.github/workflows/codescan.yml
+++ b/.github/workflows/codescan.yml
@@ -0,0 +1,49 @@
+# DSpace CodeQL code scanning configuration for GitHub
+# https://docs.github.com/en/code-security/code-scanning
+#
+# NOTE: Code scanning must be run separate from our default build.yml
+# 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.
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+    # Don't run if PR is only updating static documentation
+    paths-ignore:
+      - '**/*.md'
+      - '**/*.txt'
+  schedule:
+    - cron: "37 0 * * 1"
+
+jobs:
+  analyze:
+    name: Analyze Code
+    runs-on: ubuntu-latest
+    # Limit permissions of this GitHub action. Can only write to security-events
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    steps:
+      # https://github.com/actions/checkout
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Initializes the CodeQL tools for scanning.
+      # https://github.com/github/codeql-action
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: javascript
+
+      # Autobuild attempts to build any compiled languages
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      # Perform GitHub Code Scanning.
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -12,6 +12,9 @@ on:
      - 'dspace-**'
  pull_request:

+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'
@@ -39,11 +42,11 @@ jobs:
    steps:
      # https://github.com/actions/checkout
      - name: Checkout codebase
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3

      # https://github.com/docker/setup-buildx-action
      - name: Setup Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2

      # https://github.com/docker/setup-qemu-action
      - name: Set up QEMU emulation to build for multiple architectures
@@ -53,7 +56,7 @@ jobs:
      - 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@v1
+        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_ACCESS_TOKEN }}
@@ -65,7 +68,7 @@ jobs:
      # Get Metadata for docker_build step below
      - name: Sync metadata (tags, labels) from GitHub to Docker for 'dspace-angular' image
        id: meta_build
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
        with:
          images: dspace/dspace-angular
          tags: ${{ env.IMAGE_TAGS }}
@@ -74,7 +77,7 @@ jobs:
      # https://github.com/docker/build-push-action
      - name: Build and push 'dspace-angular' image
        id: docker_build
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
        with:
          context: .
          file: ./Dockerfile
--- a/.github/workflows/issue_opened.yml
+++ b/.github/workflows/issue_opened.yml
@@ -5,25 +5,22 @@ on:
  issues:
    types: [opened]

+permissions: {}
 jobs:
  automation:
    runs-on: ubuntu-latest
    steps:
    # Add the new issue to a project board, if it needs triage
-    # See https://github.com/marketplace/actions/create-project-card-action
-    - name: Add issue to project board
+    # See https://github.com/actions/add-to-project
+    - name: Add issue to triage board
      # Only add to project board if issue is flagged as "needs triage" or has no labels
      # NOTE: By default we flag new issues as "needs triage" in our issue template
      if: (contains(github.event.issue.labels.*.name, 'needs triage') || join(github.event.issue.labels.*.name) == '')
-      uses: technote-space/create-project-card-action@v1
+      uses: actions/add-to-project@v0.3.0
      # Note, the authentication token below is an ORG level Secret. 
-      # It must be created/recreated manually via a personal access token with "public_repo" and "admin:org" permissions
+      # It must be created/recreated manually via a personal access token with admin:org, project, public_repo permissions
      # See: https://docs.github.com/en/actions/configuring-and-managing-workflows/authenticating-with-the-github_token#permissions-for-the-github_token
      # This is necessary because the "DSpace Backlog" project is an org level project (i.e. not repo specific)
      with:
-        GITHUB_TOKEN: ${{ secrets.ORG_PROJECT_TOKEN }}
-        PROJECT: DSpace Backlog
-        COLUMN: Triage
-        CHECK_ORG_PROJECT: true
-      # Ignore errors
-      continue-on-error: true
+        github-token: ${{ secrets.TRIAGE_PROJECT_TOKEN }}
+        project-url: https://github.com/orgs/DSpace/projects/24
--- a/.github/workflows/label_merge_conflicts.yml
+++ b/.github/workflows/label_merge_conflicts.yml
@@ -5,21 +5,32 @@ name: Check for merge conflicts
 # NOTE: This means merge conflicts are only checked for when a PR is merged to main.
 on:
  push:
-    branches:
-      - main
+    branches: [ main ]
+  # 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:
+    types: [ synchronize ]
+
+permissions: {}

 jobs:
  triage:
+    # 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
+    permissions:
+      pull-requests: write
    steps:
-      # See: https://github.com/mschilde/auto-label-merge-conflicts/
+      # See: https://github.com/prince-chrismc/label-merge-conflicts-action
      - name: Auto-label PRs with merge conflicts
-        uses: mschilde/auto-label-merge-conflicts@v2.0
+        uses: prince-chrismc/label-merge-conflicts-action@v2
        # 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
        with:
-          CONFLICT_LABEL_NAME: 'merge conflict'
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        # Ignore errors
-        continue-on-error: true
+          conflict_label_name: 'merge conflict'
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          conflict_comment: |
+            Hi @${author},
+            Conflicts have been detected against the base branch.
+            Please [resolve these conflicts](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/addressing-merge-conflicts/about-merge-conflicts) as soon as you can. Thanks!
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,46 @@
+# How to Contribute
+
+DSpace is a community built and supported project. We do not have a centralized development or support team, but have a dedicated group of volunteers who help us improve the software, documentation, resources, etc.
+
+* [Contribute new code via a Pull Request](#contribute-new-code-via-a-pull-request)
+* [Contribute documentation](#contribute-documentation)
+* [Help others on mailing lists or Slack](#help-others-on-mailing-lists-or-slack)
+* [Join a working or interest group](#join-a-working-or-interest-group)
+
+## Contribute new code via a Pull Request
+
+We accept [GitHub Pull Requests (PRs)](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork) at any time from anyone.
+Contributors to each release are recognized in our [Release Notes](https://wiki.lyrasis.org/display/DSDOC7x/Release+Notes).
+
+Code Contribution Checklist
+- [ ] PRs _should_ be smaller in size (ideally less than 1,000 lines of code, not including comments & tests)
+- [ ] PRs **must** pass [ESLint](https://eslint.org/) validation using `yarn lint`
+- [ ] PRs **must** not introduce circular dependencies (verified via `yarn check-circ-deps`)
+- [ ] PRs **must** include [TypeDoc](https://typedoc.org/) comments for _all new (or modified) public methods and classes_. Large or complex private methods should also have TypeDoc.
+- [ ] PRs **must** pass all automated pecs/tests and includes new/updated specs or tests based on the [Code Testing Guide](https://wiki.lyrasis.org/display/DSPACE/Code+Testing+Guide).
+- [ ] If a PR includes new libraries/dependencies (in `package.json`), then their software licenses **must** align with the [DSpace BSD License](https://github.com/DSpace/dspace-angular/blob/main/LICENSE) based on the [Licensing of Contributions](https://wiki.lyrasis.org/display/DSPACE/Code+Contribution+Guidelines#CodeContributionGuidelines-LicensingofContributions) documentation.
+- [ ] Basic technical documentation _should_ be provided for any new features or configuration, either in the PR itself or in the DSpace Wiki documentation.
+- [ ] If a PR fixes an issue ticket, please [link them together](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
+
+Additional details on the code contribution process can be found in our [Code Contribution Guidelines](https://wiki.lyrasis.org/display/DSPACE/Code+Contribution+Guidelines)
+
+## Contribute documentation
+
+DSpace Documentation is a collaborative effort in a shared Wiki. The latest documentation is at https://wiki.lyrasis.org/display/DSDOC7x 
+
+If you find areas of the DSpace Documentation which you wish to improve, please request a Wiki account by emailing wikihelp@lyrasis.org.
+Once you have an account setup, contact @tdonohue (via [Slack](https://wiki.lyrasis.org/display/DSPACE/Slack) or email) for access to edit our Documentation.
+
+## Help others on mailing lists or Slack
+
+DSpace has our own [Slack](https://wiki.lyrasis.org/display/DSPACE/Slack) community and [Mailing Lists](https://wiki.lyrasis.org/display/DSPACE/Mailing+Lists) where discussions take place and questions are answered.
+Anyone is welcome to join and help others. We just ask you to follow our [Code of Conduct](https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx) (adopted via LYRASIS).
+
+## Join a working or interest group
+
+Most of the work in building/improving DSpace comes via [Working Groups](https://wiki.lyrasis.org/display/DSPACE/DSpace+Working+Groups) or [Interest Groups](https://wiki.lyrasis.org/display/DSPACE/DSpace+Interest+Groups).
+
+All working/interest groups are open to anyone to join and participate.  A few key groups to be aware of include:
+
+* [DSpace 7 Working Group](https://wiki.lyrasis.org/display/DSPACE/DSpace+7+Working+Group) - This is the main (mostly volunteer) development team. We meet weekly to review our current development [project board](https://github.com/orgs/DSpace/projects), assigning tickets and/or PRs.
+* [DSpace Community Advisory Team (DCAT)](https://wiki.lyrasis.org/display/cmtygp/DSpace+Community+Advisory+Team) - This is an interest group for repository managers/administrators. We meet monthly to discuss DSpace, share tips & provide feedback back to developers.
--- a/6
+++ b/6
@@ -1,11 +1,15 @@
 # This image will be published as dspace/dspace-angular
 # See https://github.com/DSpace/dspace-angular/tree/main/docker for usage details

-FROM node:14-alpine
+FROM node:18-alpine
 WORKDIR /app
 ADD . /app/
 EXPOSE 4000

+# Ensure Python and other build tools are available
+# These are needed to install some node modules, especially on linux/arm64
+RUN apk add --update python3 make g++ && rm -rf /var/cache/apk/*
+
 # We run yarn install with an increased network timeout (5min) to avoid "ESOCKETTIMEDOUT" errors from hub.docker.com
 # See, for example https://github.com/yarnpkg/yarn/issues/5540
 RUN yarn install --network-timeout 300000
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ https://wiki.lyrasis.org/display/DSDOC7x/Installing+DSpace
 Quick start
 -----------

-**Ensure you're running [Node](https://nodejs.org) `v14.x` or `v16.x`, [npm](https://www.npmjs.com/) >= `v5.x` and [yarn](https://yarnpkg.com) == `v1.x`**
+**Ensure you're running [Node](https://nodejs.org) `v16.x` or `v18.x`, [npm](https://www.npmjs.com/) >= `v5.x` and [yarn](https://yarnpkg.com) == `v1.x`**

 ```bash
 # clone the repo
@@ -90,7 +90,7 @@ Requirements
 ------------

 -	[Node.js](https://nodejs.org) and [yarn](https://yarnpkg.com)
-	Ensure you're running node `v14.x` or `v16.x` and yarn == `v1.x`
+-	Ensure you're running node `v16.x` or `v18.x` and yarn == `v1.x`

 If you have [`nvm`](https://github.com/creationix/nvm#install-script) or [`nvm-windows`](https://github.com/coreybutler/nvm-windows) installed, which is highly recommended, you can run `nvm install --lts && nvm use` to install and start using the latest Node LTS.

@@ -351,7 +351,7 @@ Documentation

 Official DSpace documentation is available in the DSpace wiki at https://wiki.lyrasis.org/display/DSDOC7x/

-Some UI specific configuration documentation is also found in the [`./docs`](docs) folder of htis codebase.
+Some UI specific configuration documentation is also found in the [`./docs`](docs) folder of this codebase.

 ### Building code documentation

@@ -379,10 +379,10 @@ To get the most out of TypeScript, you'll need a TypeScript-aware editor. We've
 	-	[Sublime Text](http://www.sublimetext.com/3)
 		-	[Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)

-Collaborating
+Contributing
 -------------

-See [the guide on the wiki](https://wiki.lyrasis.org/display/DSPACE/DSpace+7+-+Angular+UI+Development#DSpace7-AngularUIDevelopment-Howtocontribute)
+See [Contributing documentation](CONTRIBUTING.md)

 File Structure
 --------------
--- a/angular.json
+++ b/angular.json
@@ -25,12 +25,10 @@
              }
            },
            "allowedCommonJsDependencies": [
-              "angular2-text-mask",
              "cerialize",
              "core-js",
              "lodash",
              "jwt-decode",
-              "url-parse",
              "uuid",
              "webfontloader",
              "zone.js"
--- a/config/config.example.yml
+++ b/config/config.example.yml
@@ -32,12 +32,60 @@ cache:
  # NOTE: how long should objects be cached for by default
  msToLive:
    default: 900000 # 15 minutes
-  control: max-age=60 # revalidate browser
+  # Default 'Cache-Control' HTTP Header to set for all static content (including compiled *.js files)
+  # Defaults to max-age=604,800 seconds (one week). This lets a user's browser know that it can cache these
+  # files for one week, after which they will be "stale" and need to be redownloaded.
+  # NOTE: When updates are made to compiled *.js files, it will automatically bypass this browser cache, because
+  # all compiled *.js files include a unique hash in their name which updates when content is modified.
+  control: max-age=604800 # revalidate browser
  autoSync:
    defaultTime: 0
    maxBufferSize: 100
    timePerMethod:
      PATCH: 3 # time in seconds
+  # In-memory cache(s) of server-side rendered pages. These caches will store the most recently accessed public pages.
+  # Pages are automatically added/dropped from these caches based on how recently they have been used.
+  # Restarting the app clears all page caches.
+  # NOTE: To control the cache size, use the "max" setting. Keep in mind, individual cached pages are usually small (<100KB).
+  # Enabling *both* caches will mean that a page may be cached twice, once in each cache (but may expire at different times via timeToLive).
+  serverSide:
+    # Set to true to see all cache hits/misses/refreshes in your console logs. Useful for debugging SSR caching issues.
+    debug: false
+    # When enabled (i.e. max > 0), known bots will be sent pages from a server side cache specific for bots.
+    # (Keep in mind, bot detection cannot be guarranteed. It is possible some bots will bypass this cache.)
+    botCache:
+      # Maximum number of pages to cache for known bots. Set to zero (0) to disable server side caching for bots.
+      # Default is 1000, which means the 1000 most recently accessed public pages will be cached.
+      # As all pages are cached in server memory, increasing this value will increase memory needs.
+      # Individual cached pages are usually small (<100KB), so max=1000 should only require ~100MB of memory.
+      max: 1000
+      # Amount of time after which cached pages are considered stale (in ms). After becoming stale, the cached
+      # copy is automatically refreshed on the next request.
+      # NOTE: For the bot cache, this setting may impact how quickly search engine bots will index new content on your site.
+      # For example, setting this to one week may mean that search engine bots may not find all new content for one week.
+      timeToLive: 86400000 # 1 day
+      # When set to true, after timeToLive expires, the next request will receive the *cached* page & then re-render the page
+      # behind the scenes to update the cache. This ensures users primarily interact with the cache, but may receive stale pages (older than timeToLive).
+      # When set to false, after timeToLive expires, the next request will wait on SSR to complete & receive a fresh page (which is then saved to cache).
+      # This ensures stale pages (older than timeToLive) are never returned from the cache, but some users will wait on SSR.
+      allowStale: true
+    # When enabled (i.e. max > 0), all anonymous users will be sent pages from a server side cache.
+    # This allows anonymous users to interact more quickly with the site, but also means they may see slightly
+    # outdated content (based on timeToLive)
+    anonymousCache:
+      # Maximum number of pages to cache. Default is zero (0) which means anonymous user cache is disabled.
+      # As all pages are cached in server memory, increasing this value will increase memory needs.
+      # Individual cached pages are usually small (<100KB), so a value of max=1000 would only require ~100MB of memory. 
+      max: 0
+      # Amount of time after which cached pages are considered stale (in ms). After becoming stale, the cached
+      # copy is automatically refreshed on the next request.
+      # NOTE: For the anonymous cache, it is recommended to keep this value low to avoid anonymous users seeing outdated content.
+      timeToLive: 10000 # 10 seconds
+      # When set to true, after timeToLive expires, the next request will receive the *cached* page & then re-render the page
+      # behind the scenes to update the cache. This ensures users primarily interact with the cache, but may receive stale pages (older than timeToLive).
+      # When set to false, after timeToLive expires, the next request will wait on SSR to complete & receive a fresh page (which is then saved to cache).
+      # This ensures stale pages (older than timeToLive) are never returned from the cache, but some users will wait on SSR.
+      allowStale: true

 # Authentication settings
 auth:
@@ -55,6 +103,8 @@ auth:

 # Form settings
 form:
+  # Sets the spellcheck textarea attribute value
+  spellCheck: true
  # NOTE: Map server-side validators to comparative Angular form validators
  validatorMap:
    required: required
@@ -119,6 +169,9 @@ languages:
  - code: en
    label: English
    active: true
+  - code: ca
+    label: Català
+    active: true
  - code: cs
    label: Čeština
    active: true
@@ -143,6 +196,9 @@ languages:
  - code: nl
    label: Nederlands
    active: true
+  - code: pl
+    label: Polski
+    active: true
  - code: pt-PT
    label: Português
    active: true
@@ -170,6 +226,10 @@ languages:
  - code: el
    label: Ελληνικά
    active: true
+  - code: uk
+    label: Yкраї́нська
+    active: true
+

 # Browse-By Pages
 browseBy:
@@ -207,6 +267,11 @@ item:
    undoTimeout: 10000 # 10 seconds
  # Show the item access status label in items lists
  showAccessStatuses: false
+  bitstream:
+    # Number of entries in the bitstream list in the item view page.
+    # Rounded to the nearest size in the list of selectable sizes on the
+    # settings menu.  See pageSizeOptions in 'pagination-component-options.model.ts'.
+    pageSize: 5

 # Collection Page Config
 collection:
@@ -296,3 +361,11 @@ info:
 markdown:
  enabled: false
  mathjax: false
+
+# Which vocabularies should be used for which search filters
+# and whether to show the filter in the search sidebar
+# Take a look at the filter-vocabulary-config.ts file for documentation on how the options are obtained
+vocabularies:
+  - filter: 'subject'
+    vocabulary: 'srsc'
+    enabled: true
--- a/cypress.json
+++ b/cypress.json
@@ -5,7 +5,7 @@
  "screenshotsFolder": "cypress/screenshots",
  "pluginsFile": "cypress/plugins/index.ts",
  "fixturesFolder": "cypress/fixtures",
-  "baseUrl": "http://localhost:4000",
+  "baseUrl": "http://127.0.0.1:4000",
  "retries":  {
    "runMode": 2,
    "openMode": 0
--- a/cypress/integration/my-dspace.spec.ts
+++ b/cypress/integration/my-dspace.spec.ts
@@ -4,10 +4,11 @@ import { testA11y } from 'cypress/support/utils';

 describe('My DSpace page', () => {
    it('should display recent submissions and pass accessibility tests', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
        cy.visit('/mydspace');

+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
        cy.get('ds-my-dspace-page').should('exist');

        // At least one recent submission should be displayed
@@ -36,10 +37,11 @@ describe('My DSpace page', () => {
    });

    it('should have a working detailed view that passes accessibility tests', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
        cy.visit('/mydspace');

+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
        cy.get('ds-my-dspace-page').should('exist');

        // Click button in sidebar to display detailed view
@@ -61,9 +63,11 @@ describe('My DSpace page', () => {

    // NOTE: Deleting existing submissions is exercised by submission.spec.ts
    it('should let you start a new submission & edit in-progress submissions', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
        cy.visit('/mydspace');

+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
        // Open the New Submission dropdown
        cy.get('button[data-test="submission-dropdown"]').click();
        // Click on the "Item" type in that dropdown
@@ -131,9 +135,11 @@ describe('My DSpace page', () => {
    });

    it('should let you import from external sources', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
        cy.visit('/mydspace');

+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
        // Open the New Import dropdown
        cy.get('button[data-test="import-dropdown"]').click();
        // Click on the "Item" type in that dropdown
--- a/cypress/integration/submission.spec.ts
+++ b/cypress/integration/submission.spec.ts
@@ -6,11 +6,12 @@ describe('New Submission page', () => {
    // NOTE: We already test that new submissions can be started from MyDSpace in my-dspace.spec.ts

    it('should create a new submission when using /submit path & pass accessibility', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
        // Test that calling /submit with collection & entityType will create a new submission
        cy.visit('/submit?collection=' + TEST_SUBMIT_COLLECTION_UUID + '&entityType=none');

+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
        // Should redirect to /workspaceitems, as we've started a new submission
        cy.url().should('include', '/workspaceitems');

@@ -33,11 +34,12 @@ describe('New Submission page', () => {
    });

    it('should block submission & show errors if required fields are missing', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
        // Create a new submission
        cy.visit('/submit?collection=' + TEST_SUBMIT_COLLECTION_UUID + '&entityType=none');

+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
        // Attempt an immediate deposit without filling out any fields
        cy.get('button#deposit').click();

@@ -92,11 +94,12 @@ describe('New Submission page', () => {
    });

    it('should allow for deposit if all required fields completed & file uploaded', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
        // Create a new submission
        cy.visit('/submit?collection=' + TEST_SUBMIT_COLLECTION_UUID + '&entityType=none');

+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
        // Fill out all required fields (Title, Date)
        cy.get('input#dc_title').type('DSpace logo uploaded via e2e tests');
        cy.get('input#dc_date_issued_year').type('2022');
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -19,6 +19,14 @@ declare global {
             * @param password password to login as
             */
            login(email: string, password: string): typeof login;
+
+            /**
+             * Login via form before accessing the next page. Useful to fill out login
+             * form when a cy.visit() call is to an a page which requires authentication.
+             * @param email email to login as
+             * @param password password to login as
+             */
+             loginViaForm(email: string, password: string): typeof loginViaForm;
        }
    }
 }
@@ -26,6 +34,8 @@ declare global {
 /**
 * Login user via REST API directly, and pass authentication token to UI via
 * the UI's dsAuthInfo cookie.
+ * WARNING: WHILE THIS METHOD WORKS, OCCASIONALLY RANDOM AUTHENTICATION ERRORS OCCUR.
+ * At this time "loginViaForm()" seems more consistent/stable.
 * @param email email to login as
 * @param password password to login as
 */
@@ -81,3 +91,20 @@ function login(email: string, password: string): void {
 }
 // Add as a Cypress command (i.e. assign to 'cy.login')
 Cypress.Commands.add('login', login);
+
+
+/**
+ * Login user via displayed login form
+ * @param email email to login as
+ * @param password password to login as
+ */
+ function loginViaForm(email: string, password: string): void {
+    // Enter email
+    cy.get('ds-log-in [data-test="email"]').type(email);
+    // Enter password
+    cy.get('ds-log-in [data-test="password"]').type(password);
+    // Click login button
+    cy.get('ds-log-in [data-test="login-button"]').click();
+}
+// Add as a Cypress command (i.e. assign to 'cy.loginViaForm')
+Cypress.Commands.add('loginViaForm', loginViaForm);
--- a/docker/docker-compose-ci.yml
+++ b/docker/docker-compose-ci.yml
@@ -24,8 +24,8 @@ services:
      # __D__ => "-" (e.g. google__D__metadata => google-metadata)
      # dspace.dir, dspace.server.url and dspace.ui.url
      dspace__P__dir: /dspace
-      dspace__P__server__P__url: http://localhost:8080/server
-      dspace__P__ui__P__url: http://localhost:4000
+      dspace__P__server__P__url: http://127.0.0.1:8080/server
+      dspace__P__ui__P__url: http://127.0.0.1:4000
      # db.url: Ensure we are using the 'dspacedb' image for our database
      db__P__url: 'jdbc:postgresql://dspacedb:5432/dspace'
      # solr.server: Ensure we are using the 'dspacesolr' image for Solr
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "dspace-angular",
-  "version": "7.4.0",
+  "version": "7.5.0-next",
  "scripts": {
    "ng": "ng",
    "config:watch": "nodemon",
@@ -30,8 +30,9 @@
    "clean:log": "rimraf *.log*",
    "clean:json": "rimraf *.records.json",
    "clean:node": "rimraf node_modules",
+    "clean:cli": "rimraf .angular/cache",
    "clean:prod": "yarn run clean:dist && yarn run clean:log && yarn run clean:doc && yarn run clean:coverage && yarn run clean:json",
-    "clean": "yarn run clean:prod && yarn run clean:dev:config && yarn run clean:node",
+    "clean": "yarn run clean:prod && yarn run clean:dev:config && yarn run clean:cli && yarn run clean:node",
    "sync-i18n": "ts-node --project ./tsconfig.ts-node.json scripts/sync-i18n-files.ts",
    "build:mirador": "webpack --config webpack/webpack.mirador.config.ts",
    "merge-i18n": "ts-node --project ./tsconfig.ts-node.json scripts/merge-i18n-files.ts",
@@ -54,18 +55,18 @@
    "ts-node": "10.2.1"
  },
  "dependencies": {
-    "@angular/animations": "~13.2.6",
+    "@angular/animations": "~13.3.12",
    "@angular/cdk": "^13.2.6",
-    "@angular/common": "~13.2.6",
-    "@angular/compiler": "~13.2.6",
-    "@angular/core": "~13.2.6",
-    "@angular/forms": "~13.2.6",
-    "@angular/localize": "13.2.6",
-    "@angular/platform-browser": "~13.2.6",
-    "@angular/platform-browser-dynamic": "~13.2.6",
-    "@angular/platform-server": "~13.2.6",
-    "@angular/router": "~13.2.6",
-    "@babel/runtime": "^7.17.2",
+    "@angular/common": "~13.3.12",
+    "@angular/compiler": "~13.3.12",
+    "@angular/core": "~13.3.12",
+    "@angular/forms": "~13.3.12",
+    "@angular/localize": "13.3.12",
+    "@angular/platform-browser": "~13.3.12",
+    "@angular/platform-browser-dynamic": "~13.3.12",
+    "@angular/platform-server": "~13.3.12",
+    "@angular/router": "~13.3.12",
+    "@babel/runtime": "7.17.2",
    "@kolkov/ngx-gallery": "^2.0.1",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
@@ -77,114 +78,103 @@
    "@ngrx/store": "^13.0.2",
    "@nguniversal/express-engine": "^13.0.2",
    "@ngx-translate/core": "^13.0.0",
-    "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
+    "@nicky-lenaers/ngx-scroll-to": "^13.0.0",
    "@types/grecaptcha": "^3.0.4",
    "angular-idle-preload": "3.0.0",
    "angulartics2": "^12.0.0",
    "axios": "^0.27.2",
-    "bootstrap": "4.3.1",
-    "caniuse-lite": "^1.0.30001165",
+    "bootstrap": "^4.6.1",
    "cerialize": "0.1.18",
    "cli-progress": "^3.8.0",
+    "colors": "^1.4.0",
    "compression": "^1.7.4",
    "cookie-parser": "1.4.5",
    "core-js": "^3.7.0",
+    "date-fns": "^2.29.3",
+    "date-fns-tz": "^1.3.7",
    "deepmerge": "^4.2.2",
+    "ejs": "^3.1.8",
    "express": "^4.17.1",
    "express-rate-limit": "^5.1.3",
    "fast-json-patch": "^3.0.0-1",
-    "file-saver": "^2.0.5",
    "filesize": "^6.1.0",
-    "font-awesome": "4.7.0",
    "http-proxy-middleware": "^1.0.5",
-    "https": "1.0.0",
+    "isbot": "^3.6.5",
    "js-cookie": "2.2.1",
    "js-yaml": "^4.1.0",
-    "json5": "^2.1.3",
+    "json5": "^2.2.2",
    "jsonschema": "1.4.0",
    "jwt-decode": "^3.1.2",
-    "klaro": "^0.7.10",
+    "klaro": "^0.7.18",
    "lodash": "^4.17.21",
+    "lru-cache": "^7.14.1",
    "markdown-it": "^13.0.1",
    "markdown-it-mathjax3": "^4.3.1",
    "mirador": "^3.3.0",
    "mirador-dl-plugin": "^0.13.0",
    "mirador-share-plugin": "^0.11.0",
-    "moment": "^2.29.4",
    "morgan": "^1.10.0",
    "ng-mocks": "^13.1.1",
    "ng2-file-upload": "1.4.0",
    "ng2-nouislider": "^1.8.3",
    "ngx-infinite-scroll": "^10.0.1",
-    "ngx-moment": "^5.0.0",
    "ngx-pagination": "5.0.0",
    "ngx-sortablejs": "^11.1.0",
-    "ngx-ui-switch": "^11.0.1",
+    "ngx-ui-switch": "^13.0.2",
    "nouislider": "^14.6.3",
    "pem": "1.14.4",
-    "postcss-cli": "^9.1.0",
    "prop-types": "^15.7.2",
    "react-copy-to-clipboard": "^5.0.1",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.5.5",
    "sanitize-html": "^2.7.2",
    "sortablejs": "1.13.0",
-    "tslib": "^2.0.0",
-    "url-parse": "^1.5.6",
    "uuid": "^8.3.2",
    "webfontloader": "1.6.28",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "~13.1.0",
-    "@angular-devkit/build-angular": "~13.2.6",
+    "@angular-devkit/build-angular": "~13.3.10",
    "@angular-eslint/builder": "13.1.0",
    "@angular-eslint/eslint-plugin": "13.1.0",
    "@angular-eslint/eslint-plugin-template": "13.1.0",
    "@angular-eslint/schematics": "13.1.0",
    "@angular-eslint/template-parser": "13.1.0",
-    "@angular/cli": "~13.2.6",
-    "@angular/compiler-cli": "~13.2.6",
-    "@angular/language-service": "~13.2.6",
+    "@angular/cli": "~13.3.10",
+    "@angular/compiler-cli": "~13.3.12",
+    "@angular/language-service": "~13.3.12",
    "@cypress/schematic": "^1.5.0",
-    "@fortawesome/fontawesome-free": "^5.5.0",
+    "@fortawesome/fontawesome-free": "^6.2.1",
    "@ngrx/store-devtools": "^13.0.2",
    "@ngtools/webpack": "^13.2.6",
-    "@nguniversal/builders": "^13.0.2",
+    "@nguniversal/builders": "^13.1.1",
    "@types/deep-freeze": "0.1.2",
+    "@types/ejs": "^3.1.1",
    "@types/express": "^4.17.9",
-    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.8",
    "@types/js-cookie": "2.2.6",
    "@types/lodash": "^4.14.165",
    "@types/node": "^14.14.9",
    "@types/sanitize-html": "^2.6.2",
    "@typescript-eslint/eslint-plugin": "5.11.0",
    "@typescript-eslint/parser": "5.11.0",
-    "axe-core": "^4.3.3",
+    "axe-core": "^4.4.3",
    "compression-webpack-plugin": "^9.2.0",
    "copy-webpack-plugin": "^6.4.1",
    "cross-env": "^7.0.3",
-    "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "cssnano": "^5.0.6",
-    "cypress": "9.5.1",
+    "cypress": "9.7.0",
    "cypress-axe": "^0.14.0",
-    "debug-loader": "^0.0.1",
    "deep-freeze": "0.0.1",
-    "dotenv": "^8.2.0",
    "eslint": "^8.2.0",
    "eslint-plugin-deprecation": "^1.3.2",
    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsdoc": "^38.0.6",
+    "eslint-plugin-jsdoc": "^39.6.4",
+    "eslint-plugin-lodash": "^7.4.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "express-static-gzip": "^2.1.5",
-    "fork-ts-checker-webpack-plugin": "^6.0.3",
-    "html-loader": "^1.3.2",
    "jasmine-core": "^3.8.0",
    "jasmine-marbles": "0.9.2",
-    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.14",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
@@ -192,26 +182,20 @@
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-mocha-reporter": "2.2.5",
    "ngx-mask": "^13.1.7",
-    "nodemon": "^2.0.15",
+    "nodemon": "^2.0.20",
    "postcss": "^8.1",
    "postcss-apply": "0.12.0",
    "postcss-import": "^14.0.0",
    "postcss-loader": "^4.0.3",
    "postcss-preset-env": "^7.4.2",
    "postcss-responsive-type": "1.0.0",
-    "protractor": "^7.0.0",
-    "protractor-istanbul-plugin": "2.0.0",
-    "raw-loader": "0.5.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "rimraf": "^3.0.2",
    "rxjs-spy": "^8.0.2",
-    "sass": "~1.32.6",
+    "sass": "~1.33.0",
    "sass-loader": "^12.6.0",
    "sass-resources-loader": "^2.1.1",
-    "string-replace-loader": "^3.1.0",
-    "terser-webpack-plugin": "^2.3.1",
-    "ts-loader": "^5.2.0",
    "ts-node": "^8.10.2",
    "typescript": "~4.5.5",
    "webpack": "^5.69.1",
--- a/scripts/base-href.ts
+++ b/scripts/base-href.ts
@@ -1,4 +1,4 @@
-import * as fs from 'fs';
+import { existsSync, writeFileSync } from 'fs';
 import { join } from 'path';

 import { AppConfig } from '../src/config/app-config.interface';
@@ -16,7 +16,7 @@ const appConfig: AppConfig = buildAppConfig();

 const angularJsonPath = join(process.cwd(), 'angular.json');

-if (!fs.existsSync(angularJsonPath)) {
+if (!existsSync(angularJsonPath)) {
  console.error(`Error:\n${angularJsonPath} does not exist\n`);
  process.exit(1);
 }
@@ -30,7 +30,7 @@ try {

  angularJson.projects['dspace-angular'].architect.build.options.baseHref = baseHref;

-  fs.writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2) + '\n');
+  writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2) + '\n');
 } catch (e) {
  console.error(e);
 }
--- a/scripts/env-to-yaml.ts
+++ b/scripts/env-to-yaml.ts
@@ -1,5 +1,5 @@
-import * as fs from 'fs';
-import * as yaml from 'js-yaml';
+import { existsSync, writeFileSync } from 'fs';
+import { dump } from 'js-yaml';
 import { join } from 'path';

 /**
@@ -18,7 +18,7 @@ if (args[0] === undefined) {

 const envFullPath = join(process.cwd(), args[0]);

-if (!fs.existsSync(envFullPath)) {
+if (!existsSync(envFullPath)) {
  console.error(`Error:\n${envFullPath} does not exist\n`);
  process.exit(1);
 }
@@ -26,10 +26,10 @@ if (!fs.existsSync(envFullPath)) {
 try {
  const env = require(envFullPath).environment;

-  const config = yaml.dump(env);
+  const config = dump(env);
  if (args[1]) {
    const ymlFullPath = join(process.cwd(), args[1]);
-    fs.writeFileSync(ymlFullPath, config);
+    writeFileSync(ymlFullPath, config);
  } else {
    console.log(config);
  }
--- a/scripts/serve.ts
+++ b/scripts/serve.ts
@@ -1,4 +1,4 @@
-import * as child from 'child_process';
+import { spawn } from 'child_process';

 import { AppConfig } from '../src/config/app-config.interface';
 import { buildAppConfig } from '../src/config/config.server';
@@ -9,7 +9,7 @@ const appConfig: AppConfig = buildAppConfig();
 * Calls `ng serve` with the following arguments configured for the UI in the app config: host, port, nameSpace, ssl
 * Any CLI arguments given to this script are patched through to `ng serve` as well.
 */
-child.spawn(
+spawn(
  `ng serve --host ${appConfig.ui.host} --port ${appConfig.ui.port} --serve-path ${appConfig.ui.nameSpace} --ssl ${appConfig.ui.ssl} ${process.argv.slice(2).join(' ')} --configuration development`,
  { stdio: 'inherit', shell: true }
 );
--- a/scripts/test-rest.ts
+++ b/scripts/test-rest.ts
@@ -1,5 +1,5 @@
-import * as http from 'http';
-import * as https from 'https';
+import { request } from 'http';
+import { request as https_request } from 'https';

 import { AppConfig } from '../src/config/app-config.interface';
 import { buildAppConfig } from '../src/config/config.server';
@@ -20,7 +20,7 @@ console.log(`...Testing connection to REST API at ${restUrl}...\n`);

 // If SSL enabled, test via HTTPS, else via HTTP
 if (appConfig.rest.ssl) {
-    const req = https.request(restUrl, (res) => {
+    const req = https_request(restUrl, (res) => {
        console.log(`RESPONSE: ${res.statusCode} ${res.statusMessage} \n`);
        // We will keep reading data until the 'end' event fires.
        // This ensures we don't just read the first chunk.
@@ -39,7 +39,7 @@ if (appConfig.rest.ssl) {

    req.end();
 } else {
-    const req = http.request(restUrl, (res) => {
+    const req = request(restUrl, (res) => {
        console.log(`RESPONSE: ${res.statusCode} ${res.statusMessage} \n`);
        // We will keep reading data until the 'end' event fires.
        // This ensures we don't just read the first chunk.
--- a/server.ts
+++ b/server.ts
@@ -19,14 +19,20 @@ import 'zone.js/node';
 import 'reflect-metadata';
 import 'rxjs';

-import axios from 'axios';
-import * as pem from 'pem';
-import * as https from 'https';
+/* eslint-disable import/no-namespace */
 import * as morgan from 'morgan';
 import * as express from 'express';
-import * as bodyParser from 'body-parser';
+import * as ejs from 'ejs';
 import * as compression from 'compression';
 import * as expressStaticGzip from 'express-static-gzip';
+/* eslint-enable import/no-namespace */
+
+import axios from 'axios';
+import LRU from 'lru-cache';
+import isbot from 'isbot';
+import { createCertificate } from 'pem';
+import { createServer } from 'https';
+import { json } from 'body-parser';

 import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
@@ -48,6 +54,8 @@ import { buildAppConfig } from './src/config/config.server';
 import { APP_CONFIG, AppConfig } from './src/config/app-config.interface';
 import { extendEnvironmentWithAppConfig } from './src/config/config.util';
 import { logStartupMessage } from './startup-message';
+import { TOKENITEM } from 'src/app/core/auth/models/auth-token-info.model';
+

 /*
 * Set path for the browser application's dist folder
@@ -62,6 +70,12 @@ const cookieParser = require('cookie-parser');

 const appConfig: AppConfig = buildAppConfig(join(DIST_FOLDER, 'assets/config.json'));

+// cache of SSR pages for known bots, only enabled in production mode
+let botCache: LRU<string, any>;
+
+// cache of SSR pages for anonymous users. Disabled by default, and only available in production mode
+let anonymousCache: LRU<string, any>;
+
 // extend environment with app config for server
 extendEnvironmentWithAppConfig(environment, appConfig);

@@ -82,10 +96,12 @@ export function app() {
  /*
   * If production mode is enabled in the environment file:
   * - Enable Angular's production mode
+   * - Initialize caching of SSR rendered pages (if enabled in config.yml)
   * - Enable compression for SSR reponses. See [compression](https://github.com/expressjs/compression)
   */
  if (environment.production) {
    enableProdMode();
+    initCache();
    server.use(compression({
      // only compress responses we've marked as SSR
      // otherwise, this middleware may compress files we've chosen not to compress via compression-webpack-plugin
@@ -101,15 +117,15 @@ export function app() {

  /*
   * Add cookie parser middleware
-   * See [morgan](https://github.com/expressjs/cookie-parser)
+   * See [cookie-parser](https://github.com/expressjs/cookie-parser)
   */
  server.use(cookieParser());

  /*
-   * Add parser for request bodies
-   * See [morgan](https://github.com/expressjs/body-parser)
+   * Add JSON parser for request bodies
+   * See [body-parser](https://github.com/expressjs/body-parser)
   */
-  server.use(bodyParser.json());
+  server.use(json());

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', (_, options, callback) =>
@@ -132,10 +148,23 @@ export function app() {
    })(_, (options as any), callback)
  );

+  server.engine('ejs', ejs.renderFile);
+
  /*
   * Register the view engines for html and ejs
   */
  server.set('view engine', 'html');
+  server.set('view engine', 'ejs');
+
+  /**
+   * Serve the robots.txt ejs template, filling in the origin variable
+   */
+  server.get('/robots.txt', (req, res) => {
+    res.setHeader('content-type', 'text/plain');
+    res.render('assets/robots.txt.ejs', {
+      'origin': req.protocol + '://' + req.headers.host
+    });
+  });

  /*
   * Set views folder path to directory where template files are stored
@@ -168,7 +197,7 @@ export function app() {
   * Serve static resources (images, i18n messages, …)
   * Handle pre-compressed files with [express-static-gzip](https://github.com/tkoenig89/express-static-gzip)
   */
-  router.get('*.*', cacheControl, expressStaticGzip(DIST_FOLDER, {
+  router.get('*.*', addCacheControl, expressStaticGzip(DIST_FOLDER, {
    index: false,
    enableBrotli: true,
    orderPreference: ['br', 'gzip'],
@@ -184,8 +213,11 @@ export function app() {
   */
  server.get('/app/health', healthCheck);

-  // Register the ngApp callback function to handle incoming requests
-  router.get('*', ngApp);
+  /**
+   * Default sending all incoming requests to ngApp() function, after first checking for a cached
+   * copy of the page (see cacheCheck())
+   */
+  router.get('*', cacheCheck, ngApp);

  server.use(environment.ui.nameSpace, router);

@@ -197,51 +229,244 @@ export function app() {
 */
 function ngApp(req, res) {
  if (environment.universal.preboot) {
-    res.render(indexHtml, {
-      req,
-      res,
-      preboot: environment.universal.preboot,
-      async: environment.universal.async,
-      time: environment.universal.time,
-      baseUrl: environment.ui.nameSpace,
-      originUrl: environment.ui.baseUrl,
-      requestUrl: req.originalUrl,
-    }, (err, data) => {
-      if (hasNoValue(err) && hasValue(data)) {
-        res.locals.ssr = true;  // mark response as SSR
-        res.send(data);
-      } else if (hasValue(err) && err.code === 'ERR_HTTP_HEADERS_SENT') {
-        // When this error occurs we can't fall back to CSR because the response has already been
-        // sent. These errors occur for various reasons in universal, not all of which are in our
-        // control to solve.
-        console.warn('Warning [ERR_HTTP_HEADERS_SENT]: Tried to set headers after they were sent to the client');
-      } else {
-        console.warn('Error in SSR, serving for direct CSR.');
-        if (hasValue(err)) {
-          console.warn('Error details : ', err);
-        }
-
-        res.sendFile(indexHtml);
-      }
-    });
+    // Render the page to user via SSR (server side rendering)
+    serverSideRender(req, res);
  } else {
    // If preboot is disabled, just serve the client
-    console.log('Universal off, serving for direct CSR');
-
-    res.sendFile(indexHtml);
+    console.log('Universal off, serving for direct client-side rendering (CSR)');
+    clientSideRender(req, res);
  }
 }

-/*
- * Adds a cache control header to the response
- * The cache control value can be configured in the environments file and defaults to max-age=60
+/**
+ * Render page content on server side using Angular SSR. By default this page content is
+ * returned to the user.
+ * @param req current request
+ * @param res current response
+ * @param sendToUser if true (default), send the rendered content to the user.
+ * If false, then only save this rendered content to the in-memory cache (to refresh cache).
 */
-function cacheControl(req, res, next) {
+function serverSideRender(req, res, sendToUser: boolean = true) {
+  // Render the page via SSR (server side rendering)
+  res.render(indexHtml, {
+    req,
+    res,
+    preboot: environment.universal.preboot,
+    async: environment.universal.async,
+    time: environment.universal.time,
+    baseUrl: environment.ui.nameSpace,
+    originUrl: environment.ui.baseUrl,
+    requestUrl: req.originalUrl,
+  }, (err, data) => {
+    if (hasNoValue(err) && hasValue(data)) {
+      // save server side rendered page to cache (if any are enabled)
+      saveToCache(req, data);
+      if (sendToUser) {
+        res.locals.ssr = true;  // mark response as SSR (enables text compression)
+        // send rendered page to user
+        res.send(data);
+      }
+    } else if (hasValue(err) && err.code === 'ERR_HTTP_HEADERS_SENT') {
+      // When this error occurs we can't fall back to CSR because the response has already been
+      // sent. These errors occur for various reasons in universal, not all of which are in our
+      // control to solve.
+      console.warn('Warning [ERR_HTTP_HEADERS_SENT]: Tried to set headers after they were sent to the client');
+    } else {
+      console.warn('Error in server-side rendering (SSR)');
+      if (hasValue(err)) {
+        console.warn('Error details : ', err);
+      }
+      if (sendToUser) {
+        console.warn('Falling back to serving direct client-side rendering (CSR).');
+        clientSideRender(req, res);
+      }
+    }
+  });
+}
+
+/**
+ * Send back response to user to trigger direct client-side rendering (CSR)
+ * @param req current request
+ * @param res current response
+ */
+function clientSideRender(req, res) {
+  res.sendFile(indexHtml);
+}
+
+
+/*
+ * Adds a Cache-Control HTTP header to the response.
+ * The cache control value can be configured in the config.*.yml file
+ * Defaults to max-age=604,800 seconds (1 week)
+ */
+function addCacheControl(req, res, next) {
  // instruct browser to revalidate
-  res.header('Cache-Control', environment.cache.control || 'max-age=60');
+  res.header('Cache-Control', environment.cache.control || 'max-age=604800');
  next();
 }

+/*
+ * Initialize server-side caching of pages rendered via SSR.
+ */
+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
+    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
+    });
+  }
+
+  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)
+    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
+    });
+  }
+}
+
+/**
+ * Return whether bot-specific server side caching is enabled in configuration.
+ */
+function botCacheEnabled(): boolean {
+  // Caching is only enabled if SSR is enabled AND
+  // "max" pages to cache is greater than zero
+  return environment.universal.preboot && environment.cache.serverSide.botCache.max && (environment.cache.serverSide.botCache.max > 0);
+}
+
+/**
+ * Return whether anonymous user server side caching is enabled in configuration.
+ */
+function anonymousCacheEnabled(): boolean {
+  // Caching is only enabled if SSR is enabled AND
+  // "max" pages to cache is greater than zero
+  return environment.universal.preboot && environment.cache.serverSide.anonymousCache.max && (environment.cache.serverSide.anonymousCache.max > 0);
+}
+
+/**
+ * Check if the currently requested page is in our server-side, in-memory cache.
+ * Caching is ONLY done for SSR requests. Pages are cached base on their path (e.g. /home or /search?query=test)
+ */
+function cacheCheck(req, res, next) {
+  // Cached copy of page (if found)
+  let cachedCopy;
+
+  // If the bot cache is enabled and this request looks like a bot, check the bot cache for a cached page.
+  if (botCacheEnabled() && isbot(req.get('user-agent'))) {
+    cachedCopy = checkCacheForRequest('bot', botCache, req, res);
+  } else if (anonymousCacheEnabled() && !isUserAuthenticated(req)) {
+    cachedCopy = checkCacheForRequest('anonymous', anonymousCache, req, res);
+  }
+
+  // If cached copy exists, return it to the user.
+  if (cachedCopy) {
+    res.locals.ssr = true;  // mark response as SSR-generated (enables text compression)
+    res.send(cachedCopy);
+
+    // Tell Express to skip all other handlers for this path
+    // This ensures we don't try to re-render the page since we've already returned the cached copy
+    next('router');
+  } else {
+    // If nothing found in cache, just continue with next handler
+    // (This should send the request on to the handler that rerenders the page via SSR
+    next();
+  }
+}
+
+/**
+ * Checks if the current request (i.e. page) is found in the given cache. If it is found,
+ * the cached copy is returned. When found, this method also triggers a re-render via
+ * SSR if the cached copy is now expired (i.e. timeToLive has passed for this cached copy).
+ * @param cacheName name of cache (just useful for debug logging)
+ * @param cache LRU cache to check
+ * @param req current request to look for in the cache
+ * @param res current response
+ * @returns cached copy (if found) or undefined (if not found)
+ */
+function checkCacheForRequest(cacheName: string, cache: LRU<string, any>, req, res): any {
+  // Get the cache key for this request
+  const key = getCacheKey(req);
+
+  // Check if this page is in our cache
+  let cachedCopy = cache.get(key);
+  if (cachedCopy) {
+    if (environment.cache.serverSide.debug) { console.log(`CACHE HIT FOR ${key} in ${cacheName} cache`); }
+
+    // Check if cached copy is expired (If expired, the key will now be gone from cache)
+    // NOTE: This will only occur when "allowStale=true", as it means the "get(key)" above returned a stale value.
+    if (!cache.has(key)) {
+      if (environment.cache.serverSide.debug) { console.log(`CACHE EXPIRED FOR ${key} in ${cacheName} cache. Re-rendering...`); }
+      // Update cached copy by rerendering server-side
+      // NOTE: In this scenario the currently cached copy will be returned to the current user.
+      // This re-render is peformed behind the scenes to update cached copy for next user.
+      serverSideRender(req, res, false);
+    }
+  } else {
+    if (environment.cache.serverSide.debug) { console.log(`CACHE MISS FOR ${key} in ${cacheName} cache.`); }
+  }
+
+  // return page from cache
+  return cachedCopy;
+}
+
+/**
+ * Create a cache key from the current request.
+ * The cache key is the URL path (NOTE: this key will also include any querystring params).
+ * E.g. "/home" or "/search?query=test"
+ * @param req current request
+ * @returns cache key to use for this page
+ */
+function getCacheKey(req): string {
+  // NOTE: this will return the URL path *without* any baseUrl
+  return req.url;
+}
+
+/**
+ * Save page to server side cache(s), if enabled. If caching is not enabled or a user is authenticated, this is a noop
+ * If multiple caches are enabled, the page will be saved to any caches where it does not yet exist (or is expired).
+ * (This minimizes the number of times we need to run SSR on the same page.)
+ * @param req current page request
+ * @param page page data to save to cache
+ */
+function saveToCache(req, page: any) {
+  // Only cache if no one is currently authenticated. This means ONLY public pages can be cached.
+  // NOTE: It's not safe to save page data to the cache when a user is authenticated. In that situation,
+  // the page may include sensitive or user-specific materials. As the cache is shared across all users, it can only contain public info.
+  if (!isUserAuthenticated(req)) {
+    const key = getCacheKey(req);
+    // Avoid caching "/reload/[random]" paths (these are hard refreshes after logout)
+    if (key.startsWith('/reload')) { return; }
+
+    // If bot cache is enabled, save it to that cache if it doesn't exist or is expired
+    // (NOTE: has() will return false if page is expired in cache)
+    if (botCacheEnabled() && !botCache.has(key)) {
+      botCache.set(key, page);
+      if (environment.cache.serverSide.debug) { console.log(`CACHE SAVE FOR ${key} in bot cache.`); }
+    }
+
+    // If anonymous cache is enabled, save it to that cache if it doesn't exist or is expired
+    if (anonymousCacheEnabled() && !anonymousCache.has(key)) {
+      anonymousCache.set(key, page);
+      if (environment.cache.serverSide.debug) { console.log(`CACHE SAVE FOR ${key} in anonymous cache.`); }
+    }
+  }
+}
+
+/**
+ * Whether a user is authenticated or not
+ */
+function isUserAuthenticated(req): boolean {
+  // Check whether our DSpace authentication Cookie exists or not
+  return req.cookies[TOKENITEM];
+}
+
 /*
 * Callback function for when the server has started
 */
@@ -254,7 +479,7 @@ function serverStarted() {
 * @param keys SSL credentials
 */
 function createHttpsServer(keys) {
-  https.createServer({
+  createServer({
    key: keys.serviceKey,
    cert: keys.certificate
  }, app).listen(environment.ui.port, environment.ui.host, () => {
@@ -308,7 +533,7 @@ function start() {

      process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; // lgtm[js/disabling-certificate-validation]

-      pem.createCertificate({
+      createCertificate({
        days: 1,
        selfSigned: true
      }, (error, keys) => {
--- a/src/app/access-control/access-control.module.ts
+++ b/src/app/access-control/access-control.module.ts
@@ -10,6 +10,16 @@ import { MembersListComponent } from './group-registry/group-form/members-list/m
 import { SubgroupsListComponent } from './group-registry/group-form/subgroup-list/subgroups-list.component';
 import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
 import { FormModule } from '../shared/form/form.module';
+import { DYNAMIC_ERROR_MESSAGES_MATCHER, DynamicErrorMessagesMatcher } from '@ng-dynamic-forms/core';
+import { AbstractControl } from '@angular/forms';
+
+/**
+ * Condition for displaying error messages on email form field
+ */
+export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher =
+  (control: AbstractControl, model: any, hasFocus: boolean) => {
+    return (control.touched && !hasFocus) || (control.errors?.emailTaken && hasFocus);
+  };

@NgModule({
  imports: [
@@ -26,6 +36,12 @@ import { FormModule } from '../shared/form/form.module';
    GroupFormComponent,
    SubgroupsListComponent,
    MembersListComponent
+  ],
+  providers: [
+    {
+      provide: DYNAMIC_ERROR_MESSAGES_MATCHER,
+      useValue: ValidateEmailErrorStateMatcher
+    },
  ]
 })
 /**
--- 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
@@ -9,7 +9,18 @@
      </ng-template>

      <ng-template #editheader>
-        <h2 class="border-bottom pb-2">{{messagePrefix + '.head.edit' | translate}}</h2>
+        <h2 class="border-bottom pb-2">
+          <span
+            *dsContextHelp="{
+              content: 'admin.access-control.groups.form.tooltip.editGroupPage',
+              id: 'edit-group-page',
+              iconPlacement: 'right',
+              tooltipPlacement: ['right', 'bottom']
+            }"
+          >
+            {{messagePrefix + '.head.edit' | translate}}
+          </span>
+        </h2>
      </ng-template>

      <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
--- a/src/app/access-control/group-registry/group-form/group-form.component.spec.ts
+++ b/src/app/access-control/group-registry/group-form/group-form.component.spec.ts
@@ -266,6 +266,43 @@ describe('GroupFormComponent', () => {
        fixture.detectChanges();
      });

+      it('should edit with name and description operations', () => {
+        const operations = [{
+          op: 'add',
+          path: '/metadata/dc.description',
+          value: 'testDescription'
+        }, {
+          op: 'replace',
+          path: '/name',
+          value: 'newGroupName'
+        }];
+        expect(groupsDataServiceStub.patch).toHaveBeenCalledWith(expected, operations);
+      });
+
+      it('should edit with description operations', () => {
+        component.groupName.value = null;
+        component.onSubmit();
+        fixture.detectChanges();
+        const operations = [{
+          op: 'add',
+          path: '/metadata/dc.description',
+          value: 'testDescription'
+        }];
+        expect(groupsDataServiceStub.patch).toHaveBeenCalledWith(expected, operations);
+      });
+
+      it('should edit with name operations', () => {
+        component.groupDescription.value = null;
+        component.onSubmit();
+        fixture.detectChanges();
+        const operations = [{
+          op: 'replace',
+          path: '/name',
+          value: 'newGroupName'
+        }];
+        expect(groupsDataServiceStub.patch).toHaveBeenCalledWith(expected, operations);
+      });
+
      it('should emit the existing group using the correct new values', waitForAsync(() => {
        fixture.whenStable().then(() => {
          expect(component.submitForm.emit).toHaveBeenCalledWith(expected2);
--- 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
@@ -46,6 +46,7 @@ import { followLink } from '../../../shared/utils/follow-link-config.model';
 import { NoContent } from '../../../core/shared/NoContent.model';
 import { Operation } from 'fast-json-patch';
 import { ValidateGroupExists } from './validators/group-exists.validator';
+import { environment } from '../../../../environments/environment';

@Component({
  selector: 'ds-group-form',
@@ -194,6 +195,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
        label: groupDescription,
        name: 'groupDescription',
        required: false,
+        spellCheck: environment.form.spellCheck,
      });
      this.formModel = [
        this.groupName,
@@ -344,8 +346,8 @@ export class GroupFormComponent implements OnInit, OnDestroy {

    if (hasValue(this.groupDescription.value)) {
      operations = [...operations, {
-        op: 'replace',
-        path: '/metadata/dc.description/0/value',
+        op: 'add',
+        path: '/metadata/dc.description',
        value: this.groupDescription.value
      }];
    }
--- a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
+++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
@@ -1,9 +1,19 @@
 <ng-container>
  <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>

-  <h4 id="search" class="border-bottom pb-2">{{messagePrefix + '.search.head' | translate}}
-
+  <h4 id="search" class="border-bottom pb-2">
+    <span
+      *dsContextHelp="{
+        content: 'admin.access-control.groups.form.tooltip.editGroup.addEpeople',
+        id: 'edit-group-add-epeople',
+        iconPlacement: 'right',
+        tooltipPlacement: ['top', 'right', 'bottom']
+      }"
+    >
+      {{messagePrefix + '.search.head' | translate}}
+    </span>
  </h4>
+
  <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
    <div>
      <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
--- a/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
+++ b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
@@ -1,7 +1,16 @@
 <ng-container>
  <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>

-  <h4 id="search" class="border-bottom pb-2">{{messagePrefix + '.search.head' | translate}}
+  <h4 id="search" class="border-bottom pb-2">
+    <span *dsContextHelp="{
+            content: 'admin.access-control.groups.form.tooltip.editGroup.addSubgroups',
+            id: 'edit-group-add-subgroups',
+            iconPlacement: 'right',
+            tooltipPlacement: ['top', 'right', 'bottom']
+          }"
+    >
+      {{messagePrefix + '.search.head' | translate}}
+    </span>

  </h4>
  <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
--- a/src/app/admin/admin-import-metadata-page/metadata-import-page.component.ts
+++ b/src/app/admin/admin-import-metadata-page/metadata-import-page.component.ts
@@ -1,12 +1,8 @@
 import { Location } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
-import { AuthService } from '../../core/auth/auth.service';
 import { METADATA_IMPORT_SCRIPT_NAME, ScriptDataService } from '../../core/data/processes/script-data.service';
-import { EPerson } from '../../core/eperson/models/eperson.model';
 import { ProcessParameter } from '../../process-page/processes/process-parameter.model';
 import { isNotEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
@@ -13,32 +13,34 @@
        [paginationOptions]="pageConfig"
        [pageInfoState]="(bitstreamFormats | async)?.payload"
        [collectionSize]="(bitstreamFormats | async)?.payload?.totalElements"
-        [hideGear]="true"
+        [hideGear]="false"
        [hidePagerWhenSinglePage]="true">
        <div class="table-responsive">
          <table id="formats" class="table table-striped table-hover">
            <thead>
-              <tr>
-                <th scope="col"></th>
-                <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
-                <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
-                <th scope="col">{{'admin.registries.bitstream-formats.table.supportLevel.head' | translate}}</th>
-              </tr>
+            <tr>
+              <th scope="col"></th>
+              <th scope="col">{{'admin.registries.bitstream-formats.table.id' | translate}}</th>
+              <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
+              <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
+              <th scope="col">{{'admin.registries.bitstream-formats.table.supportLevel.head' | translate}}</th>
+            </tr>
            </thead>
            <tbody>
-              <tr *ngFor="let bitstreamFormat of (bitstreamFormats | async)?.payload?.page">
-                <td>
-                  <label>
-                    <input type="checkbox"
-                           [checked]="isSelected(bitstreamFormat) | async"
-                           (change)="selectBitStreamFormat(bitstreamFormat, $event)"
-                    >
-                  </label>
-                </td>
-                <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.shortDescription}}</a></td>
-                <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.mimetype}} <span *ngIf="bitstreamFormat.internal">({{'admin.registries.bitstream-formats.table.internal' | translate}})</span></a></td>
-                <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{'admin.registries.bitstream-formats.table.supportLevel.'+bitstreamFormat.supportLevel | translate}}</a></td>
-              </tr>
+            <tr *ngFor="let bitstreamFormat of (bitstreamFormats | async)?.payload?.page">
+              <td>
+                <label>
+                  <input type="checkbox"
+                         [checked]="isSelected(bitstreamFormat) | async"
+                         (change)="selectBitStreamFormat(bitstreamFormat, $event)"
+                  >
+                </label>
+              </td>
+              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.id}}</a></td>
+              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.shortDescription}}</a></td>
+              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.mimetype}} <span *ngIf="bitstreamFormat.internal">({{'admin.registries.bitstream-formats.table.internal' | translate}})</span></a></td>
+              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{'admin.registries.bitstream-formats.table.supportLevel.'+bitstreamFormat.supportLevel | translate}}</a></td>
+            </tr>
            </tbody>
          </table>
        </div>
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.spec.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.spec.ts
@@ -129,16 +129,19 @@ describe('BitstreamFormatsComponent', () => {
    });

    it('should contain the correct formats', () => {
-      const unknownName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(1) td:nth-child(2)')).nativeElement;
+      const unknownName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(1) td:nth-child(3)')).nativeElement;
      expect(unknownName.textContent).toBe('Unknown');

-      const licenseName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(2) td:nth-child(2)')).nativeElement;
+      const UUID: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(1) td:nth-child(2)')).nativeElement;
+      expect(UUID.textContent).toBe('test-uuid-1');
+
+      const licenseName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(2) td:nth-child(3)')).nativeElement;
      expect(licenseName.textContent).toBe('License');

-      const ccLicenseName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(3) td:nth-child(2)')).nativeElement;
+      const ccLicenseName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(3) td:nth-child(3)')).nativeElement;
      expect(ccLicenseName.textContent).toBe('CC License');

-      const adobeName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(4) td:nth-child(2)')).nativeElement;
+      const adobeName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(4) td:nth-child(3)')).nativeElement;
      expect(adobeName.textContent).toBe('Adobe PDF');
    });
  });
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.ts
@@ -1,12 +1,11 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { combineLatest as observableCombineLatest, Observable, zip } from 'rxjs';
+import { combineLatest as observableCombineLatest, Observable} from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { BitstreamFormat } from '../../../core/shared/bitstream-format.model';
 import { BitstreamFormatDataService } from '../../../core/data/bitstream-format-data.service';
 import { map, mergeMap, switchMap, take, toArray } from 'rxjs/operators';
-import { hasValue } from '../../../shared/empty.util';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
@@ -29,21 +28,14 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {
   */
  bitstreamFormats: Observable<RemoteData<PaginatedList<BitstreamFormat>>>;

-  /**
-   * The current pagination configuration for the page used by the FindAll method
-   * Currently simply renders all bitstream formats
-   */
-  config: FindListOptions = Object.assign(new FindListOptions(), {
-    elementsPerPage: 20
-  });
-
  /**
   * The current pagination configuration for the page
   * Currently simply renders all bitstream formats
   */
  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
    id: 'rbp',
-    pageSize: 20
+    pageSize: 20,
+    pageSizeOptions: [20, 40, 60, 80, 100]
  });

  constructor(private notificationsService: NotificationsService,
@@ -51,7 +43,7 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {
              private translateService: TranslateService,
              private bitstreamFormatService: BitstreamFormatDataService,
              private paginationService: PaginationService,
-              ) {
+  ) {
  }


@@ -149,7 +141,7 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {

  ngOnInit(): void {

-    this.bitstreamFormats = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
+    this.bitstreamFormats = this.paginationService.getFindListOptions(this.pageConfig.id, this.pageConfig).pipe(
      switchMap((findListOptions: FindListOptions) => {
        return this.bitstreamFormatService.findAll(findListOptions);
      })
--- a/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts
@@ -15,6 +15,7 @@ import { Router } from '@angular/router';
 import { hasValue, isEmpty } from '../../../../shared/empty.util';
 import { TranslateService } from '@ngx-translate/core';
 import { getBitstreamFormatsModuleRoute } from '../../admin-registries-routing-paths';
+import { environment } from '../../../../../environments/environment';

 /**
 * The component responsible for rendering the form to create/edit a bitstream format
@@ -90,6 +91,7 @@ export class FormatFormComponent implements OnInit {
      name: 'description',
      label: 'admin.registries.bitstream-formats.edit.description.label',
      hint: 'admin.registries.bitstream-formats.edit.description.hint',
+      spellCheck: environment.form.spellCheck,

    }),
    new DynamicSelectModel({
--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.spec.ts
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.spec.ts
@@ -19,10 +19,7 @@ import { RestResponse } from '../../../core/cache/response.models';
 import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { PaginationService } from '../../../core/pagination/pagination.service';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../../core/data/find-list-options.model';

 describe('MetadataRegistryComponent', () => {
  let comp: MetadataRegistryComponent;
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
@@ -25,6 +25,7 @@
              <thead>
              <tr>
                <th></th>
+                <th scope="col">{{'admin.registries.schema.fields.table.id' | translate}}</th>
                <th scope="col">{{'admin.registries.schema.fields.table.field' | translate}}</th>
                <th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th>
              </tr>
@@ -39,6 +40,7 @@
                           (change)="selectMetadataField(field, $event)">
                  </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">.</label>{{field.qualifier}}</td>
                <td class="selectable-row" (click)="editField(field)">{{field.scopeNote}}</td>
              </tr>
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
@@ -23,11 +23,8 @@ import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
 import { MetadataField } from '../../../core/metadata/metadata-field.model';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { VarDirective } from '../../../shared/utils/var.directive';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../../core/data/find-list-options.model';

 describe('MetadataSchemaComponent', () => {
  let comp: MetadataSchemaComponent;
@@ -169,10 +166,10 @@ describe('MetadataSchemaComponent', () => {
  });

  it('should contain the correct fields', () => {
-    const editorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(1) td:nth-child(2)')).nativeElement;
+    const editorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(1) td:nth-child(3)')).nativeElement;
    expect(editorField.textContent).toBe('mock.contributor.editor');

-    const illustratorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(2) td:nth-child(2)')).nativeElement;
+    const illustratorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(2) td:nth-child(3)')).nativeElement;
    expect(illustratorField.textContent).toBe('mock.contributor.illustrator');
  });

--- a/src/app/admin/admin-routing.module.ts
+++ b/src/app/admin/admin-routing.module.ts
@@ -47,6 +47,12 @@ import { BatchImportPageComponent } from './admin-import-batch-page/batch-import
        component: BatchImportPageComponent,
        data: { title: 'admin.batch-import.title', breadcrumbKey: 'admin.batch-import' }
      },
+      {
+        path: 'system-wide-alert',
+        resolve: { breadcrumb: I18nBreadcrumbResolver },
+        loadChildren: () => import('../system-wide-alert/system-wide-alert.module').then((m) => m.SystemWideAlertModule),
+        data: {title: 'admin.system-wide-alert.title', breadcrumbKey: 'admin.system-wide-alert'}
+      },
    ])
  ],
  providers: [
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
 import { Component } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
@@ -6,7 +6,7 @@ import { ScriptDataService } from '../../core/data/processes/script-data.service
 import { AdminSidebarComponent } from './admin-sidebar.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../shared/testing/css-variable-service.stub';
 import { AuthServiceStub } from '../../shared/testing/auth-service.stub';
 import { AuthService } from '../../core/auth/auth.service';
@@ -16,7 +16,6 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import createSpy = jasmine.createSpy;
 import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
 import { Item } from '../../core/shared/item.model';
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -5,7 +5,7 @@ import { AuthService } from '../../core/auth/auth.service';
 import { slideSidebar } from '../../shared/animations/slide';
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
 import { ActivatedRoute } from '@angular/router';
@@ -69,7 +69,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
   */
  ngOnInit(): void {
    super.ngOnInit();
-    this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
+    this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width');
    this.authService.isAuthenticated()
      .subscribe((loggedIn: boolean) => {
        if (loggedIn) {
@@ -100,6 +100,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
        }
      }
    });
+    this.menuVisible = this.menuService.isMenuVisibleWithVisibleSections(this.menuID);
  }

  @HostListener('focusin')
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ExpandableAdminSidebarSectionComponent } from './expandable-admin-sidebar-section.component';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
 import { of as observableOf } from 'rxjs';
 import { Component } from '@angular/core';
--- 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
@@ -2,7 +2,7 @@ import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { rotate } from '../../../shared/animations/rotate';
 import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
 import { slide } from '../../../shared/animations/slide';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { bgColor } from '../../../shared/animations/bgColor';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
@@ -65,7 +65,7 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
   */
  ngOnInit(): void {
    super.ngOnInit();
-    this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg');
+    this.sidebarActiveBg = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
    this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
    this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
    this.expanded = combineLatestObservable(this.active, this.sidebarCollapsed, this.sidebarPreviewCollapsed)
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -10,6 +10,7 @@ import { AdminSearchModule } from './admin-search-page/admin-search.module';
 import { AdminSidebarSectionComponent } from './admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
 import { ExpandableAdminSidebarSectionComponent } from './admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
 import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
+import { UploadModule } from '../shared/upload/upload.module';

 const ENTRY_COMPONENTS = [
  // put only entry components that use custom decorator
@@ -25,7 +26,8 @@ const ENTRY_COMPONENTS = [
    AccessControlModule,
    AdminSearchModule.withEntryComponents(),
    AdminWorkflowModuleModule.withEntryComponents(),
-    SharedModule
+    SharedModule,
+    UploadModule,
  ],
  declarations: [
    AdminCurationTasksComponent,
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -18,7 +18,7 @@ import { AngularticsProviderMock } from './shared/mocks/angulartics-provider.ser
 import { AuthServiceMock } from './shared/mocks/auth.service.mock';
 import { AuthService } from './core/auth/auth.service';
 import { MenuService } from './shared/menu/menu.service';
-import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from './shared/testing/css-variable-service.stub';
 import { MenuServiceStub } from './shared/testing/menu-service.stub';
 import { HostWindowService } from './shared/host-window.service';
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -25,13 +25,12 @@ import { HostWindowState } from './shared/search/host-window.reducer';
 import { NativeWindowRef, NativeWindowService } from './core/services/window.service';
 import { isAuthenticationBlocking } from './core/auth/selectors';
 import { AuthService } from './core/auth/auth.service';
-import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
 import { environment } from '../environments/environment';
 import { models } from './core/core.module';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
 import { distinctNext } from './core/shared/distinct-next';
-import { ModalBeforeDismiss } from './shared/interfaces/modal-before-dismiss.interface';

@Component({
  selector: 'ds-app',
@@ -110,18 +109,8 @@ export class AppComponent implements OnInit, AfterViewInit {
  }

  private storeCSSVariables() {
-    this.cssService.addCSSVariable('xlMin', '1200px');
-    this.cssService.addCSSVariable('mdMin', '768px');
-    this.cssService.addCSSVariable('lgMin', '576px');
-    this.cssService.addCSSVariable('smMin', '0');
-    this.cssService.addCSSVariable('adminSidebarActiveBg', '#0f1b28');
-    this.cssService.addCSSVariable('sidebarItemsWidth', '250px');
-    this.cssService.addCSSVariable('collapsedSidebarWidth', '53.234px');
-    this.cssService.addCSSVariable('totalSidebarWidth', '303.234px');
-    // const vars = variables.locals || {};
-    // Object.keys(vars).forEach((name: string) => {
-    //   this.cssService.addCSSVariable(name, vars[name]);
-    // })
+    this.cssService.clearCSSVariables();
+    this.cssService.addCSSVariables(this.cssService.getCSSVariablesFromStylesheets(this.document));
  }

  ngAfterViewInit() {
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,14 +1,12 @@
 import { APP_BASE_HREF, CommonModule, DOCUMENT } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';

 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EffectsModule } from '@ngrx/effects';
 import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';
 import { MetaReducer, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
-import { DYNAMIC_ERROR_MESSAGES_MATCHER, DYNAMIC_MATCHER_PROVIDERS, DynamicErrorMessagesMatcher } from '@ng-dynamic-forms/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 import { AppRoutingModule } from './app-routing.module';
@@ -28,7 +26,6 @@ import { XsrfInterceptor } from './core/xsrf/xsrf.interceptor';
 import { LogInterceptor } from './core/log/log.interceptor';
 import { EagerThemesModule } from '../themes/eager-themes.module';
 import { APP_CONFIG, AppConfig } from '../config/app-config.interface';
-import { NgxMaskModule } from 'ngx-mask';
 import { StoreDevModules } from '../config/store/devtools';
 import { RootModule } from './root.module';

@@ -46,14 +43,6 @@ export function getMetaReducers(appConfig: AppConfig): MetaReducer<AppState>[] {
  return appConfig.debug ? [...appMetaReducers, ...debugMetaReducers] : appMetaReducers;
 }

-/**
- * Condition for displaying error messages on email form field
- */
-export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher =
-  (control: AbstractControl, model: any, hasFocus: boolean) => {
-    return (control.touched && !hasFocus) || (control.errors?.emailTaken && hasFocus);
-  };
-
 const IMPORTS = [
  CommonModule,
  SharedModule,
@@ -64,7 +53,6 @@ const IMPORTS = [
  ScrollToModule.forRoot(),
  NgbModule,
  TranslateModule.forRoot(),
-  NgxMaskModule.forRoot(),
  EffectsModule.forRoot(appEffects),
  StoreModule.forRoot(appReducers, storeModuleConfig),
  StoreRouterConnectingModule.forRoot(),
@@ -113,11 +101,6 @@ const PROVIDERS = [
    useClass: LogInterceptor,
    multi: true
  },
-  {
-    provide: DYNAMIC_ERROR_MESSAGES_MATCHER,
-    useValue: ValidateEmailErrorStateMatcher
-  },
-  ...DYNAMIC_MATCHER_PROVIDERS,
 ];

 const DECLARATIONS = [
--- a/src/app/app.reducer.ts
+++ b/src/app/app.reducer.ts
@@ -1,4 +1,4 @@
-import * as fromRouter from '@ngrx/router-store';
+import { routerReducer, RouterReducerState } from '@ngrx/router-store';
 import { ActionReducerMap, createSelector, MemoizedSelector } from '@ngrx/store';
 import {
  ePeopleRegistryReducer,
@@ -35,31 +35,27 @@ import {
  ObjectSelectionListState,
  objectSelectionReducer
 } from './shared/object-select/object-select.reducer';
-import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/sass-helper.reducer';
+import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/css-variable.reducer';

 import { hostWindowReducer, HostWindowState } from './shared/search/host-window.reducer';
 import {
  filterReducer,
  SearchFiltersState
 } from './shared/search/search-filters/search-filter/search-filter.reducer';
-import {
-  sidebarFilterReducer,
-  SidebarFiltersState
-} from './shared/sidebar/filter/sidebar-filter.reducer';
 import { sidebarReducer, SidebarState } from './shared/sidebar/sidebar.reducer';
 import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer';
 import { ThemeState, themeReducer } from './shared/theme-support/theme.reducer';
 import { MenusState } from './shared/menu/menus-state.model';
 import { correlationIdReducer } from './correlation-id/correlation-id.reducer';
+import { contextHelpReducer, ContextHelpState } from './shared/context-help.reducer';

 export interface AppState {
-  router: fromRouter.RouterReducerState;
+  router: RouterReducerState;
  hostWindow: HostWindowState;
  forms: FormState;
  metadataRegistry: MetadataRegistryState;
  notifications: NotificationsState;
  sidebar: SidebarState;
-  sidebarFilter: SidebarFiltersState;
  searchFilter: SearchFiltersState;
  truncatable: TruncatablesState;
  cssVariables: CSSVariablesState;
@@ -72,16 +68,16 @@ export interface AppState {
  epeopleRegistry: EPeopleRegistryState;
  groupRegistry: GroupRegistryState;
  correlationId: string;
+  contextHelp: ContextHelpState;
 }

 export const appReducers: ActionReducerMap<AppState> = {
-  router: fromRouter.routerReducer,
+  router: routerReducer,
  hostWindow: hostWindowReducer,
  forms: formReducer,
  metadataRegistry: metadataRegistryReducer,
  notifications: notificationsReducer,
  sidebar: sidebarReducer,
-  sidebarFilter: sidebarFilterReducer,
  searchFilter: filterReducer,
  truncatable: truncatableReducer,
  cssVariables: cssVariablesReducer,
@@ -93,7 +89,8 @@ export const appReducers: ActionReducerMap<AppState> = {
  communityList: CommunityListReducer,
  epeopleRegistry: ePeopleRegistryReducer,
  groupRegistry: groupRegistryReducer,
-  correlationId: correlationIdReducer
+  correlationId: correlationIdReducer,
+  contextHelp: contextHelpReducer,
 };

 export const routerStateSelector = (state: AppState) => state.router;
--- a/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html
+++ b/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html
--- a/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.spec.ts
+++ b/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.spec.ts
@@ -6,7 +6,7 @@ import { Bitstream } from '../../core/shared/bitstream.model';
 import { BitstreamDownloadPageComponent } from './bitstream-download-page.component';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { HardRedirectService } from '../../core/services/hard-redirect.service';
-import { createSuccessfulRemoteDataObject } from '../remote-data.utils';
+import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
 import { ActivatedRoute, Router } from '@angular/router';
 import { getForbiddenRoute } from '../../app-routing-paths';
 import { TranslateModule } from '@ngx-translate/core';
--- a/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.ts
+++ b/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { filter, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
-import { hasValue, isNotEmpty } from '../empty.util';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { getRemoteDataPayload} from '../../core/shared/operators';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
--- a/src/app/bitstream-page/bitstream-page-routing.module.ts
+++ b/src/app/bitstream-page/bitstream-page-routing.module.ts
@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 import { EditBitstreamPageComponent } from './edit-bitstream-page/edit-bitstream-page.component';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 import { BitstreamPageResolver } from './bitstream-page.resolver';
-import { BitstreamDownloadPageComponent } from '../shared/bitstream-download-page/bitstream-download-page.component';
+import { BitstreamDownloadPageComponent } from './bitstream-download-page/bitstream-download-page.component';
 import { ResourcePolicyTargetResolver } from '../shared/resource-policies/resolvers/resource-policy-target.resolver';
 import { ResourcePolicyCreateComponent } from '../shared/resource-policies/create/resource-policy-create.component';
 import { ResourcePolicyResolver } from '../shared/resource-policies/resolvers/resource-policy.resolver';
--- a/src/app/bitstream-page/bitstream-page.module.ts
+++ b/src/app/bitstream-page/bitstream-page.module.ts
@@ -6,6 +6,7 @@ import { BitstreamPageRoutingModule } from './bitstream-page-routing.module';
 import { BitstreamAuthorizationsComponent } from './bitstream-authorizations/bitstream-authorizations.component';
 import { FormModule } from '../shared/form/form.module';
 import { ResourcePoliciesModule } from '../shared/resource-policies/resource-policies.module';
+import { BitstreamDownloadPageComponent } from './bitstream-download-page/bitstream-download-page.component';

 /**
 * This module handles all components that are necessary for Bitstream related pages
@@ -20,7 +21,8 @@ import { ResourcePoliciesModule } from '../shared/resource-policies/resource-pol
  ],
  declarations: [
    BitstreamAuthorizationsComponent,
-    EditBitstreamPageComponent
+    EditBitstreamPageComponent,
+    BitstreamDownloadPageComponent,
  ]
 })
 export class BitstreamPageModule {
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
@@ -26,7 +26,7 @@ import {
 import { FormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
 import {
  getAllSucceededRemoteDataPayload,
--- a/src/app/bitstream-page/legacy-bitstream-url.resolver.spec.ts
+++ b/src/app/bitstream-page/legacy-bitstream-url.resolver.spec.ts
@@ -1,5 +1,5 @@
 import { LegacyBitstreamUrlResolver } from './legacy-bitstream-url.resolver';
-import { of as observableOf, EMPTY } from 'rxjs';
+import { EMPTY } from 'rxjs';
 import { BitstreamDataService } from '../core/data/bitstream-data.service';
 import { RemoteData } from '../core/data/remote-data';
 import { TestScheduler } from 'rxjs/testing';
--- a/src/app/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/breadcrumbs/breadcrumbs.component.html
@@ -10,7 +10,7 @@
    </nav>

    <ng-template #breadcrumb let-text="text" let-url="url">
-        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate">{{text | translate}}</a></div></li>
+        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate" [ngbTooltip]="text | translate" placement="bottom" >{{text | translate}}</a></div></li>
    </ng-template>

    <ng-template #activeBreadcrumb let-text="text">
--- a/src/app/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/breadcrumbs/breadcrumbs.component.scss
@@ -23,11 +23,14 @@ li.breadcrumb-item {
  }
 }

-li.breadcrumb-item > a {
-  color: var(--ds-breadcrumb-link-color) !important;
+li.breadcrumb-item {
+    a {
+        color: var(--ds-breadcrumb-link-color);
+    }
 }
+
 li.breadcrumb-item.active {
-  color: var(--ds-breadcrumb-link-active-color) !important;
+  color: var(--ds-breadcrumb-link-active-color);
 }

 .breadcrumb-item+ .breadcrumb-item::before {
--- 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
@@ -65,6 +65,7 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
        const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails);
        this.updatePageWithItems(searchOptions, this.value, undefined);
        this.updateParent(params.scope);
+        this.updateLogo();
        this.updateStartsWithOptions(this.browseId, metadataKeys, params.scope);
      }));
  }
--- a/src/app/browse-by/browse-by-guard.spec.ts
+++ b/src/app/browse-by/browse-by-guard.spec.ts
@@ -1,7 +1,6 @@
 import { first } from 'rxjs/operators';
 import { BrowseByGuard } from './browse-by-guard';
 import { of as observableOf } from 'rxjs';
-import { BrowseDefinitionDataService } from '../core/browse/browse-definition-data.service';
 import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
 import { BrowseDefinition } from '../core/shared/browse-definition.model';
 import { BrowseByDataType } from './browse-by-switcher/browse-by-decorator';
--- 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
@@ -5,6 +5,11 @@
        <!-- Parent Name -->
        <ds-comcol-page-header [name]="parentContext.name">
        </ds-comcol-page-header>
+      <!-- Collection logo -->
+        <ds-comcol-page-logo *ngIf="logo$"
+                             [logo]="(logo$ | async)?.payload"
+                             [alternateText]="'Community or Collection Logo'">
+        </ds-comcol-page-logo>
        <!-- Handle -->
        <ds-themed-comcol-page-handle
            [content]="parentContext.handle"
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
@@ -144,6 +144,9 @@ describe('BrowseByMetadataPageComponent', () => {

      route.params = observableOf(paramsWithValue);
      comp.ngOnInit();
+      comp.updateParent('fake-scope');
+      comp.updateLogo();
+      fixture.detectChanges();
    });

    it('should fetch items', () => {
@@ -151,6 +154,10 @@ describe('BrowseByMetadataPageComponent', () => {
        expect(result.payload.page).toEqual(mockItems);
      });
    });
+
+    it('should fetch the logo', () => {
+      expect(comp.logo$).toBeTruthy();
+    });
  });

  describe('when calling browseParamsToOptions', () => {
--- 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
@@ -15,7 +15,11 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
-import { map } from 'rxjs/operators';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { Collection } from '../../core/shared/collection.model';
+import { Community } from '../../core/shared/community.model';
 import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';

 export const BBM_PAGINATION_ID = 'bbm';
@@ -48,6 +52,11 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
   */
  parent$: Observable<RemoteData<DSpaceObject>>;

+  /**
+   * The logo of the current Community or Collection
+   */
+  logo$: Observable<RemoteData<Bitstream>>;
+
  /**
   * The pagination config used to display the values
   */
@@ -151,6 +160,7 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
            this.updatePage(browseParamsToOptions(params, currentPage, currentSort, this.browseId, false));
          }
          this.updateParent(params.scope);
+          this.updateLogo();
        }));
    this.updateStartsWithTextOptions();

@@ -196,12 +206,31 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
   */
  updateParent(scope: string) {
    if (hasValue(scope)) {
-      this.parent$ = this.dsoService.findById(scope).pipe(
+      const linksToFollow = () => {
+        return [followLink('logo')];
+      };
+      this.parent$ = this.dsoService.findById(scope,
+        true,
+        true,
+        ...linksToFollow() as FollowLinkConfig<DSpaceObject>[]).pipe(
        getFirstSucceededRemoteData()
      );
    }
  }

+  /**
+   * Update the parent Community or Collection logo
+   */
+  updateLogo() {
+    if (hasValue(this.parent$)) {
+      this.logo$ = this.parent$.pipe(
+        map((rd: RemoteData<Collection | Community>) => rd.payload),
+        filter((collectionOrCommunity: Collection | Community) => hasValue(collectionOrCommunity.logo)),
+        mergeMap((collectionOrCommunity: Collection | Community) => collectionOrCommunity.logo)
+      );
+    }
+  }
+
  /**
   * Navigate to the previous page
   */
--- a/src/app/browse-by/browse-by-page.module.ts
+++ b/src/app/browse-by/browse-by-page.module.ts
@@ -4,16 +4,21 @@ import { BrowseByModule } from './browse-by.module';
 import { ItemDataService } from '../core/data/item-data.service';
 import { BrowseService } from '../core/browse/browse.service';
 import { BrowseByGuard } from './browse-by-guard';
+import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';

@NgModule({
  imports: [
+    SharedBrowseByModule,
    BrowseByRoutingModule,
-    BrowseByModule.withEntryComponents()
+    BrowseByModule.withEntryComponents(),
  ],
  providers: [
    ItemDataService,
    BrowseService,
-    BrowseByGuard
+    BrowseByGuard,
+  ],
+  declarations: [
+
  ]
 })
 export class BrowseByPageModule {
--- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
+++ b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
@@ -49,6 +49,7 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
        this.browseId = params.id || this.defaultBrowseId;
        this.updatePageWithItems(browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails), undefined, undefined);
        this.updateParent(params.scope);
+        this.updateLogo();
      }));
    this.updateStartsWithTextOptions();
  }
--- a/src/app/browse-by/browse-by.module.ts
+++ b/src/app/browse-by/browse-by.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BrowseByTitlePageComponent } from './browse-by-title-page/browse-by-title-page.component';
-import { SharedModule } from '../shared/shared.module';
 import { BrowseByMetadataPageComponent } from './browse-by-metadata-page/browse-by-metadata-page.component';
 import { BrowseByDatePageComponent } from './browse-by-date-page/browse-by-date-page.component';
 import { BrowseBySwitcherComponent } from './browse-by-switcher/browse-by-switcher.component';
@@ -10,6 +9,7 @@ import { ComcolModule } from '../shared/comcol/comcol.module';
 import { ThemedBrowseByMetadataPageComponent } from './browse-by-metadata-page/themed-browse-by-metadata-page.component';
 import { ThemedBrowseByDatePageComponent } from './browse-by-date-page/themed-browse-by-date-page.component';
 import { ThemedBrowseByTitlePageComponent } from './browse-by-title-page/themed-browse-by-title-page.component';
+import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';

 const ENTRY_COMPONENTS = [
  // put only entry components that use custom decorator
@@ -25,9 +25,9 @@ const ENTRY_COMPONENTS = [

@NgModule({
  imports: [
+    SharedBrowseByModule,
    CommonModule,
    ComcolModule,
-    SharedModule
  ],
  declarations: [
    BrowseBySwitcherComponent,
@@ -45,7 +45,7 @@ export class BrowseByModule {
   */
  static withEntryComponents() {
    return {
-      ngModule: SharedModule,
+      ngModule: SharedBrowseByModule,
      providers: ENTRY_COMPONENTS.map((component) => ({provide: component}))
    };
  }
--- a/src/app/collection-page/collection-form/collection-form.models.ts
+++ b/src/app/collection-page/collection-form/collection-form.models.ts
@@ -1,5 +1,6 @@
 import { DynamicFormControlModel, DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
 import { DynamicSelectModelConfig } from '@ng-dynamic-forms/core/lib/model/select/dynamic-select.model';
+import { environment } from '../../../environments/environment';

 export const collectionFormEntityTypeSelectionConfig: DynamicSelectModelConfig<string> = {
  id: 'entityType',
@@ -26,21 +27,26 @@ export const collectionFormModels: DynamicFormControlModel[] = [
  new DynamicTextAreaModel({
    id: 'description',
    name: 'dc.description',
+    spellCheck: environment.form.spellCheck,
  }),
  new DynamicTextAreaModel({
    id: 'abstract',
    name: 'dc.description.abstract',
+    spellCheck: environment.form.spellCheck,
  }),
  new DynamicTextAreaModel({
    id: 'rights',
    name: 'dc.rights',
+    spellCheck: environment.form.spellCheck,
  }),
  new DynamicTextAreaModel({
    id: 'tableofcontents',
    name: 'dc.description.tableofcontents',
+    spellCheck: environment.form.spellCheck,
  }),
  new DynamicTextAreaModel({
    id: 'license',
    name: 'dc.rights.license',
+    spellCheck: environment.form.spellCheck,
  })
 ];
--- a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.spec.ts
+++ b/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.spec.ts
@@ -16,7 +16,7 @@ import { Collection } from '../../core/shared/collection.model';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { ChangeDetectionStrategy, EventEmitter } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 import { HostWindowService } from '../../shared/host-window.service';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { By } from '@angular/platform-browser';
@@ -41,7 +41,7 @@ import {
 } from '../../shared/remote-data.utils';
 import { createPaginatedList } from '../../shared/testing/utils.test';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { MyDSpacePageComponent, SEARCH_CONFIG_SERVICE } from '../../my-dspace-page/my-dspace-page.component';
+import { SEARCH_CONFIG_SERVICE } from '../../my-dspace-page/my-dspace-page.component';
 import { SearchConfigurationServiceStub } from '../../shared/testing/search-configuration-service.stub';
 import { GroupDataService } from '../../core/eperson/group-data.service';
 import { LinkHeadService } from '../../core/services/link-head.service';
--- a/src/app/collection-page/collection-page-routing.module.ts
+++ b/src/app/collection-page/collection-page-routing.module.ts
@@ -72,6 +72,7 @@ import { MenuItemType } from '../shared/menu/menu-item-type.model';
              id: 'statistics_collection_:id',
              active: true,
              visible: true,
+              index: 2,
              model: {
                type: MenuItemType.LINK,
                text: 'menu.section.statistics',
--- a/src/app/collection-page/collection-page.module.ts
+++ b/src/app/collection-page/collection-page.module.ts
@@ -16,6 +16,7 @@ import { StatisticsModule } from '../statistics/statistics.module';
 import { CollectionFormModule } from './collection-form/collection-form.module';
 import { ThemedCollectionPageComponent } from './themed-collection-page.component';
 import { ComcolModule } from '../shared/comcol/comcol.module';
+import { DsoSharedModule } from '../dso-shared/dso-shared.module';

@NgModule({
  imports: [
@@ -25,7 +26,8 @@ import { ComcolModule } from '../shared/comcol/comcol.module';
    StatisticsModule.forRoot(),
    EditItemPageModule,
    CollectionFormModule,
-    ComcolModule
+    ComcolModule,
+    DsoSharedModule,
  ],
  declarations: [
    CollectionPageComponent,
@@ -38,7 +40,7 @@ import { ComcolModule } from '../shared/comcol/comcol.module';
  ],
  providers: [
    SearchService,
-  ]
+  ],
 })
 export class CollectionPageModule {

--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
@@ -11,11 +11,11 @@
        </div>
        <div>
            <span class="font-weight-bold">{{'collection.source.controls.harvest.last' | translate}}</span>
-            <span>{{contentSource?.message ? contentSource?.message : 'collection.source.controls.harvest.no-information'|translate }}</span>
+            <span>{{contentSource?.lastHarvested ? contentSource?.lastHarvested : 'collection.source.controls.harvest.no-information'|translate }}</span>
        </div>
        <div>
            <span class="font-weight-bold">{{'collection.source.controls.harvest.message' | translate}}</span>
-            <span>{{contentSource?.lastHarvested ? contentSource?.lastHarvested : 'collection.source.controls.harvest.no-information'|translate }}</span>
+            <span>{{contentSource?.message ? contentSource?.message: 'collection.source.controls.harvest.no-information'|translate }}</span>
        </div>

        <button *ngIf="!(testConfigRunning$ |async)" class="btn btn-secondary"
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts
@@ -8,8 +8,7 @@ import {
  DynamicInputModel,
  DynamicOptionControlModel,
  DynamicRadioGroupModel,
-  DynamicSelectModel,
-  DynamicTextAreaModel
+  DynamicSelectModel
 } from '@ng-dynamic-forms/core';
 import { Location } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
@@ -23,7 +22,7 @@ import { RemoteData } from '../../../core/data/remote-data';
 import { Collection } from '../../../core/shared/collection.model';
 import { first, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
 import { getFirstSucceededRemoteData, getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { MetadataConfig } from '../../../core/shared/metadata-config.model';
--- a/src/app/collection-page/edit-collection-page/edit-collection-page.module.ts
+++ b/src/app/collection-page/edit-collection-page/edit-collection-page.module.ts
@@ -25,7 +25,7 @@ import { ComcolModule } from '../../shared/comcol/comcol.module';
    CollectionFormModule,
    ResourcePoliciesModule,
    FormModule,
-    ComcolModule
+    ComcolModule,
  ],
  declarations: [
    EditCollectionPageComponent,
--- a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
+++ b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -3,7 +3,7 @@
    <div class="col-12" *ngVar="(itemRD$ | async) as itemRD">
      <ng-container *ngIf="itemRD?.hasSucceeded">
        <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: collection?.name } }}</h2>
-        <ds-themed-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-themed-item-metadata>
+        <ds-themed-dso-edit-metadata [updateDataService]="itemTemplateService" [dso]="itemRD?.payload"></ds-themed-dso-edit-metadata>
        <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
      </ng-container>
      <ds-themed-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-themed-loading>
--- a/src/app/community-list-page/community-list-page.module.ts
+++ b/src/app/community-list-page/community-list-page.module.ts
@@ -6,6 +6,7 @@ import { CommunityListPageRoutingModule } from './community-list-page.routing.mo
 import { CommunityListComponent } from './community-list/community-list.component';
 import { ThemedCommunityListPageComponent } from './themed-community-list-page.component';
 import { ThemedCommunityListComponent } from './community-list/themed-community-list.component';
+import { CdkTreeModule } from '@angular/cdk/tree';


 const DECLARATIONS = [
@@ -21,13 +22,15 @@ const DECLARATIONS = [
  imports: [
    CommonModule,
    SharedModule,
-    CommunityListPageRoutingModule
+    CommunityListPageRoutingModule,
+    CdkTreeModule,
  ],
  declarations: [
    ...DECLARATIONS
  ],
  exports: [
    ...DECLARATIONS,
+    CdkTreeModule,
  ],
 })
 export class CommunityListPageModule {
--- a/src/app/community-page/community-form/community-form.component.ts
+++ b/src/app/community-page/community-form/community-form.component.ts
@@ -13,6 +13,7 @@ import { CommunityDataService } from '../../core/data/community-data.service';
 import { AuthService } from '../../core/auth/auth.service';
 import { RequestService } from '../../core/data/request.service';
 import { ObjectCacheService } from '../../core/cache/object-cache.service';
+import { environment } from '../../../environments/environment';

 /**
 * Form used for creating and editing communities
@@ -52,18 +53,22 @@ export class CommunityFormComponent extends ComColFormComponent<Community> {
    new DynamicTextAreaModel({
      id: 'description',
      name: 'dc.description',
+      spellCheck: environment.form.spellCheck,
    }),
    new DynamicTextAreaModel({
      id: 'abstract',
      name: 'dc.description.abstract',
+      spellCheck: environment.form.spellCheck,
    }),
    new DynamicTextAreaModel({
      id: 'rights',
      name: 'dc.rights',
+      spellCheck: environment.form.spellCheck,
    }),
    new DynamicTextAreaModel({
      id: 'tableofcontents',
      name: 'dc.description.tableofcontents',
+      spellCheck: environment.form.spellCheck,
    }),
  ];

--- a/src/app/community-page/community-page-routing.module.ts
+++ b/src/app/community-page/community-page-routing.module.ts
@@ -55,6 +55,7 @@ import { MenuItemType } from '../shared/menu/menu-item-type.model';
              id: 'statistics_community_:id',
              active: true,
              visible: true,
+              index: 2,
              model: {
                type: MenuItemType.LINK,
                text: 'menu.section.statistics',
--- a/src/app/community-page/community-page.module.ts
+++ b/src/app/community-page/community-page.module.ts
@@ -36,7 +36,7 @@ const DECLARATIONS = [CommunityPageComponent,
    CommunityPageRoutingModule,
    StatisticsModule.forRoot(),
    CommunityFormModule,
-    ComcolModule
+    ComcolModule,
  ],
  declarations: [
    ...DECLARATIONS
--- a/src/app/community-page/edit-community-page/edit-community-page.module.ts
+++ b/src/app/community-page/edit-community-page/edit-community-page.module.ts
@@ -21,7 +21,7 @@ import { ComcolModule } from '../../shared/comcol/comcol.module';
    EditCommunityPageRoutingModule,
    CommunityFormModule,
    ComcolModule,
-    ResourcePoliciesModule
+    ResourcePoliciesModule,
  ],
  declarations: [
    EditCommunityPageComponent,
--- a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts
+++ b/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts
@@ -17,9 +17,6 @@ import { PageInfo } from '../../core/shared/page-info.model';
 import { HostWindowService } from '../../shared/host-window.service';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { of as observableOf } from 'rxjs';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
 import { ThemeService } from '../../shared/theme-support/theme.service';
@@ -29,7 +26,6 @@ import { GroupDataService } from '../../core/eperson/group-data.service';
 import { LinkHeadService } from '../../core/services/link-head.service';
 import { ConfigurationDataService } from '../../core/data/configuration-data.service';
 import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service';
-import { SearchServiceStub } from '../../shared/testing/search-service.stub';
 import { ConfigurationProperty } from '../../core/shared/configuration-property.model';
 import { createPaginatedList } from '../../shared/testing/utils.test';
 import { SearchConfigurationServiceStub } from '../../shared/testing/search-configuration-service.stub';
--- a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.spec.ts
+++ b/src/app/community-page/sub-community-list/community-page-sub-community-list.component.spec.ts
@@ -17,9 +17,6 @@ import { HostWindowService } from '../../shared/host-window.service';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { CommunityDataService } from '../../core/data/community-data.service';
 import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { of as observableOf } from 'rxjs';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
 import { ThemeService } from '../../shared/theme-support/theme.service';
--- a/src/app/core/auth/auth-request.service.spec.ts
+++ b/src/app/core/auth/auth-request.service.spec.ts
@@ -11,6 +11,7 @@ import { HttpOptions } from '../dspace-rest/dspace-rest.service';
 import objectContaining = jasmine.objectContaining;
 import { AuthStatus } from './models/auth-status.model';
 import { RestRequestMethod } from '../data/rest-request-method';
+import { Observable, of as observableOf } from 'rxjs';

 describe(`AuthRequestService`, () => {
  let halService: HALEndpointService;
@@ -34,8 +35,8 @@ describe(`AuthRequestService`, () => {
      super(hes, rs, rdbs);
    }

-    protected createShortLivedTokenRequest(href: string): PostRequest {
-      return new PostRequest(this.requestService.generateRequestId(), href);
+    protected createShortLivedTokenRequest(href: string): Observable<PostRequest> {
+      return observableOf(new PostRequest(this.requestService.generateRequestId(), href));
    }
  }

--- a/src/app/core/auth/auth-request.service.ts
+++ b/src/app/core/auth/auth-request.service.ts
@@ -100,14 +100,12 @@ export abstract class AuthRequestService {
    );
  }
  /**
-   * Factory function to create the request object to send. This needs to be a POST client side and
-   * a GET server side. Due to CSRF validation, the server isn't allowed to send a POST, so we allow
-   * only the server IP to send a GET to this endpoint.
+   * Factory function to create the request object to send.
   *
   * @param href The href to send the request to
   * @protected
   */
-  protected abstract createShortLivedTokenRequest(href: string): GetRequest | PostRequest;
+  protected abstract createShortLivedTokenRequest(href: string): Observable<PostRequest>;

  /**
   * Send a request to retrieve a short-lived token which provides download access of restricted files
@@ -117,7 +115,7 @@ export abstract class AuthRequestService {
      filter((href: string) => isNotEmpty(href)),
      distinctUntilChanged(),
      map((href: string) => new URLCombiner(href, this.shortlivedtokensEndpoint).toString()),
-      map((endpointURL: string) => this.createShortLivedTokenRequest(endpointURL)),
+      switchMap((endpointURL: string) => this.createShortLivedTokenRequest(endpointURL)),
      tap((request: RestRequest) => this.requestService.send(request)),
      switchMap((request: RestRequest) => this.rdbService.buildFromRequestUUID<ShortLivedToken>(request.uuid)),
      getFirstCompletedRemoteData(),
--- a/src/app/core/auth/auth.interceptor.ts
+++ b/src/app/core/auth/auth.interceptor.ts
@@ -196,7 +196,24 @@ export class AuthInterceptor implements HttpInterceptor {
      authStatus.token = new AuthTokenInfo(accessToken);
    } else {
      authStatus.authenticated = false;
-      authStatus.error = isNotEmpty(error) ? ((typeof error === 'string') ? JSON.parse(error) : error) : null;
+      if (isNotEmpty(error)) {
+        if (typeof error === 'string') {
+          try {
+            authStatus.error = JSON.parse(error);
+          } catch (e) {
+            console.error('Unknown auth error "', error, '" caused ', e);
+            authStatus.error = {
+              error: 'Unknown',
+              message: 'Unknown auth error',
+              status: 500,
+              timestamp: Date.now(),
+              path: ''
+              };
+          }
+        } else {
+          authStatus.error = error;
+        }
+      }
    }
    return authStatus;
  }
--- a/src/app/core/auth/browser-auth-request.service.spec.ts
+++ b/src/app/core/auth/browser-auth-request.service.spec.ts
@@ -1,6 +1,8 @@
 import { AuthRequestService } from './auth-request.service';
 import { RequestService } from '../data/request.service';
 import { BrowserAuthRequestService } from './browser-auth-request.service';
+import { Observable } from 'rxjs';
+import { PostRequest } from '../data/request.models';

 describe(`BrowserAuthRequestService`, () => {
  let href: string;
@@ -16,14 +18,20 @@ describe(`BrowserAuthRequestService`, () => {
  });

  describe(`createShortLivedTokenRequest`, () => {
-    it(`should return a PostRequest`, () => {
-      const result = (service as any).createShortLivedTokenRequest(href);
-      expect(result.constructor.name).toBe('PostRequest');
+    it(`should return a PostRequest`, (done) => {
+      const obs = (service as any).createShortLivedTokenRequest(href) as Observable<PostRequest>;
+      obs.subscribe((result: PostRequest) => {
+        expect(result.constructor.name).toBe('PostRequest');
+        done();
+      });
    });

-    it(`should return a request with the given href`, () => {
-      const result = (service as any).createShortLivedTokenRequest(href);
-      expect(result.href).toBe(href) ;
+    it(`should return a request with the given href`, (done) => {
+      const obs = (service as any).createShortLivedTokenRequest(href) as Observable<PostRequest>;
+      obs.subscribe((result: PostRequest) => {
+        expect(result.href).toBe(href);
+        done();
+      });
    });
  });
 });
--- a/src/app/core/auth/browser-auth-request.service.ts
+++ b/src/app/core/auth/browser-auth-request.service.ts
@@ -4,6 +4,7 @@ import { PostRequest } from '../data/request.models';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { RequestService } from '../data/request.service';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { Observable, of as observableOf } from 'rxjs';

 /**
 * Client side version of the service to send authentication requests
@@ -20,15 +21,13 @@ export class BrowserAuthRequestService extends AuthRequestService {
  }

  /**
-   * Factory function to create the request object to send. This needs to be a POST client side and
-   * a GET server side. Due to CSRF validation, the server isn't allowed to send a POST, so we allow
-   * only the server IP to send a GET to this endpoint.
+   * Factory function to create the request object to send.
   *
   * @param href The href to send the request to
   * @protected
   */
-  protected createShortLivedTokenRequest(href: string): PostRequest {
-    return new PostRequest(this.requestService.generateRequestId(), href);
+  protected createShortLivedTokenRequest(href: string): Observable<PostRequest> {
+    return observableOf(new PostRequest(this.requestService.generateRequestId(), href));
  }

 }
--- a/src/app/core/auth/selectors.ts
+++ b/src/app/core/auth/selectors.ts
@@ -7,7 +7,6 @@ import { createSelector } from '@ngrx/store';
 * notation packages up all of the exports into a single object.
 */
 import { AuthState } from './auth.reducer';
-import { AppState } from '../../app.reducer';
 import { CoreState } from '../core-state.model';
 import { coreSelector } from '../core.selectors';

--- a/src/app/core/auth/server-auth-request.service.spec.ts
+++ b/src/app/core/auth/server-auth-request.service.spec.ts
@@ -1,34 +1,68 @@
 import { AuthRequestService } from './auth-request.service';
 import { RequestService } from '../data/request.service';
 import { ServerAuthRequestService } from './server-auth-request.service';
+import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
+import { Observable, of as observableOf } from 'rxjs';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { PostRequest } from '../data/request.models';
+import {
+  XSRF_REQUEST_HEADER,
+  XSRF_RESPONSE_HEADER
+} from '../xsrf/xsrf.interceptor';

 describe(`ServerAuthRequestService`, () => {
  let href: string;
  let requestService: RequestService;
  let service: AuthRequestService;
+  let httpClient: HttpClient;
+  let httpResponse: HttpResponse<any>;
+  let halService: HALEndpointService;
+  const mockToken = 'mock-token';

  beforeEach(() => {
    href = 'https://rest.api/auth/shortlivedtokens';
    requestService = jasmine.createSpyObj('requestService', {
      'generateRequestId': '8bb0582d-5013-4337-af9c-763beb25aae2'
    });
-    service = new ServerAuthRequestService(null, requestService, null);
+    let headers = new HttpHeaders();
+    headers = headers.set(XSRF_RESPONSE_HEADER, mockToken);
+    httpResponse = {
+      body: { bar: false },
+      headers: headers,
+      statusText: '200'
+    } as HttpResponse<any>;
+    httpClient = jasmine.createSpyObj('httpClient', {
+      get: observableOf(httpResponse),
+    });
+    halService = jasmine.createSpyObj('halService', {
+      'getRootHref': '/api'
+    });
+    service = new ServerAuthRequestService(halService, requestService, null, httpClient);
  });

  describe(`createShortLivedTokenRequest`, () => {
-    it(`should return a GetRequest`, () => {
-      const result = (service as any).createShortLivedTokenRequest(href);
-      expect(result.constructor.name).toBe('GetRequest');
+    it(`should return a PostRequest`, (done) => {
+      const obs = (service as any).createShortLivedTokenRequest(href) as Observable<PostRequest>;
+      obs.subscribe((result: PostRequest) => {
+        expect(result.constructor.name).toBe('PostRequest');
+        done();
+      });
    });

-    it(`should return a request with the given href`, () => {
-      const result = (service as any).createShortLivedTokenRequest(href);
-      expect(result.href).toBe(href) ;
+    it(`should return a request with the given href`, (done) => {
+      const obs = (service as any).createShortLivedTokenRequest(href) as Observable<PostRequest>;
+      obs.subscribe((result: PostRequest) => {
+        expect(result.href).toBe(href);
+        done();
+      });
    });

-    it(`should have a responseMsToLive of 2 seconds`, () => {
-      const result = (service as any).createShortLivedTokenRequest(href);
-      expect(result.responseMsToLive).toBe(2 * 1000) ;
+    it(`should return a request with a xsrf header`, (done) => {
+      const obs = (service as any).createShortLivedTokenRequest(href) as Observable<PostRequest>;
+      obs.subscribe((result: PostRequest) => {
+        expect(result.options.headers.get(XSRF_REQUEST_HEADER)).toBe(mockToken);
+        done();
+      });
    });
  });
 });
--- a/src/app/core/auth/server-auth-request.service.ts
+++ b/src/app/core/auth/server-auth-request.service.ts
@@ -1,9 +1,21 @@
 import { Injectable } from '@angular/core';
 import { AuthRequestService } from './auth-request.service';
-import { GetRequest } from '../data/request.models';
+import { PostRequest } from '../data/request.models';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { RequestService } from '../data/request.service';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import {
+  HttpHeaders,
+  HttpClient,
+  HttpResponse
+} from '@angular/common/http';
+import {
+  XSRF_REQUEST_HEADER,
+  XSRF_RESPONSE_HEADER,
+  DSPACE_XSRF_COOKIE
+} from '../xsrf/xsrf.interceptor';
+import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';

 /**
 * Server side version of the service to send authentication requests
@@ -14,23 +26,42 @@ export class ServerAuthRequestService extends AuthRequestService {
  constructor(
    halService: HALEndpointService,
    requestService: RequestService,
-    rdbService: RemoteDataBuildService
+    rdbService: RemoteDataBuildService,
+    protected httpClient: HttpClient,
  ) {
    super(halService, requestService, rdbService);
  }

  /**
-   * Factory function to create the request object to send. This needs to be a POST client side and
-   * a GET server side. Due to CSRF validation, the server isn't allowed to send a POST, so we allow
-   * only the server IP to send a GET to this endpoint.
+   * Factory function to create the request object to send.
   *
   * @param href The href to send the request to
   * @protected
   */
-  protected createShortLivedTokenRequest(href: string): GetRequest {
-    return Object.assign(new GetRequest(this.requestService.generateRequestId(), href), {
-      responseMsToLive: 2 * 1000 // A short lived token is only valid for 2 seconds.
-    });
+  protected createShortLivedTokenRequest(href: string): Observable<PostRequest> {
+    // First do a call to the root endpoint in order to get an XSRF token
+    return this.httpClient.get(this.halService.getRootHref(), { observe: 'response' }).pipe(
+      // retrieve the XSRF token from the response header
+      map((response: HttpResponse<any>) => response.headers.get(XSRF_RESPONSE_HEADER)),
+      // Use that token to create an HttpHeaders object
+      map((xsrfToken: string) => new HttpHeaders()
+          .set('Content-Type', 'application/json; charset=utf-8')
+          // set the token as the XSRF header
+          .set(XSRF_REQUEST_HEADER, xsrfToken)
+          // and as the DSPACE-XSRF-COOKIE
+          .set('Cookie', `${DSPACE_XSRF_COOKIE}=${xsrfToken}`)),
+      map((headers: HttpHeaders) =>
+        // Create a new PostRequest using those headers and the given href
+        new PostRequest(
+          this.requestService.generateRequestId(),
+          href,
+          {},
+          {
+            headers: headers,
+          },
+        )
+      )
+    );
  }

 }
--- a/src/app/core/breadcrumbs/dso-name.service.ts
+++ b/src/app/core/breadcrumbs/dso-name.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { hasValue, isEmpty } from '../../shared/empty.util';
 import { DSpaceObject } from '../shared/dspace-object.model';
 import { TranslateService } from '@ngx-translate/core';
+import { Metadata } from '../shared/metadata.utils';

 /**
 * Returns a name for a {@link DSpaceObject} based
@@ -67,4 +68,45 @@ export class DSONameService {
    return name;
  }

+  /**
+   * Gets the Hit highlight
+   *
+   * @param object
+   * @param dso
+   *
+   * @returns {string} html embedded hit highlight.
+   */
+  getHitHighlights(object: any, dso: DSpaceObject): string {
+    const types = dso.getRenderTypes();
+    const entityType = types
+      .filter((type) => typeof type === 'string')
+      .find((type: string) => (['Person', 'OrgUnit']).includes(type)) as string;
+    if (entityType === 'Person') {
+      const familyName = this.firstMetadataValue(object, dso, 'person.familyName');
+      const givenName = this.firstMetadataValue(object, dso, 'person.givenName');
+      if (isEmpty(familyName) && isEmpty(givenName)) {
+        return this.firstMetadataValue(object, dso, 'dc.title') || dso.name;
+      } else if (isEmpty(familyName) || isEmpty(givenName)) {
+        return familyName || givenName;
+      }
+      return `${familyName}, ${givenName}`;
+    } else if (entityType === 'OrgUnit') {
+      return this.firstMetadataValue(object, dso, 'organization.legalName');
+    }
+    return this.firstMetadataValue(object, dso, 'dc.title') || dso.name || this.translateService.instant('dso.name.untitled');
+  }
+
+  /**
+   * Gets the first matching metadata string value from hitHighlights or dso metadata, preferring hitHighlights.
+   *
+   * @param object
+   * @param dso
+   * @param {string|string[]} keyOrKeys The metadata key(s) in scope. Wildcards are supported; see [[Metadata]].
+   *
+   * @returns {string} the first matching string value, or `undefined`.
+   */
+  firstMetadataValue(object: any, dso: DSpaceObject, keyOrKeys: string | string[]): string {
+    return Metadata.firstValue([object.hitHighlights, dso.metadata], keyOrKeys);
+  }
+
 }
--- a/src/app/core/browse/browse-definition-data.service.spec.ts
+++ b/src/app/core/browse/browse-definition-data.service.spec.ts
@@ -2,27 +2,66 @@ import { BrowseDefinitionDataService } from './browse-definition-data.service';
 import { followLink } from '../../shared/utils/follow-link-config.model';
 import { EMPTY } from 'rxjs';
 import { FindListOptions } from '../data/find-list-options.model';
+import { getMockRemoteDataBuildService } from '../../shared/mocks/remote-data-build.service.mock';
+import { RequestService } from '../data/request.service';
+import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
+import { getMockObjectCacheService } from '../../shared/mocks/object-cache.service.mock';

 describe(`BrowseDefinitionDataService`, () => {
+  let requestService: RequestService;
  let service: BrowseDefinitionDataService;
-  const findAllDataSpy = jasmine.createSpyObj('findAllData', {
-    findAll: EMPTY,
-  });
+  let findAllDataSpy;
+  let searchDataSpy;
+  const browsesEndpointURL = 'https://rest.api/browses';
+  const halService: any = new HALEndpointServiceStub(browsesEndpointURL);
+
  const options = new FindListOptions();
  const linksToFollow = [
    followLink('entries'),
    followLink('items')
  ];

+  function initTestService() {
+    return new BrowseDefinitionDataService(
+      requestService,
+      getMockRemoteDataBuildService(),
+      getMockObjectCacheService(),
+      halService,
+    );
+  }
+
  beforeEach(() => {
-    service = new BrowseDefinitionDataService(null, null, null, null);
+    service = initTestService();
+    findAllDataSpy = jasmine.createSpyObj('findAllData', {
+      findAll: EMPTY,
+    });
+    searchDataSpy = jasmine.createSpyObj('searchData', {
+      searchBy: EMPTY,
+      getSearchByHref: EMPTY,
+    });
    (service as any).findAllData = findAllDataSpy;
+    (service as any).searchData = searchDataSpy;
  });

+  describe('findByFields', () => {
+    it(`should call searchByHref on searchData`, () => {
+      service.findByFields(['test'], true, false, ...linksToFollow);
+      expect(searchDataSpy.getSearchByHref).toHaveBeenCalled();
+    });
+  });
+  describe('searchBy', () => {
+    it(`should call searchBy on searchData`, () => {
+      service.searchBy('test', options, true, false, ...linksToFollow);
+      expect(searchDataSpy.searchBy).toHaveBeenCalledWith('test', options, true, false, ...linksToFollow);
+    });
+  });
  describe(`findAll`, () => {
    it(`should call findAll on findAllData`, () => {
      service.findAll(options, true, false, ...linksToFollow);
      expect(findAllDataSpy.findAll).toHaveBeenCalledWith(options, true, false, ...linksToFollow);
    });
  });
+
+
+
 });
--- a/src/app/core/browse/browse-definition-data.service.ts
+++ b/src/app/core/browse/browse-definition-data.service.ts
@@ -13,6 +13,8 @@ import { FindListOptions } from '../data/find-list-options.model';
 import { IdentifiableDataService } from '../data/base/identifiable-data.service';
 import { FindAllData, FindAllDataImpl } from '../data/base/find-all-data';
 import { dataService } from '../data/base/data-service.decorator';
+import { RequestParam } from '../cache/models/request-param.model';
+import { SearchData, SearchDataImpl } from '../data/base/search-data';

 /**
 * Data service responsible for retrieving browse definitions from the REST server
@@ -21,8 +23,9 @@ import { dataService } from '../data/base/data-service.decorator';
  providedIn: 'root',
 })
@dataService(BROWSE_DEFINITION)
-export class BrowseDefinitionDataService extends IdentifiableDataService<BrowseDefinition> implements FindAllData<BrowseDefinition> {
+export class BrowseDefinitionDataService extends IdentifiableDataService<BrowseDefinition> implements FindAllData<BrowseDefinition>, SearchData<BrowseDefinition> {
  private findAllData: FindAllDataImpl<BrowseDefinition>;
+  private searchData: SearchDataImpl<BrowseDefinition>;

  constructor(
    protected requestService: RequestService,
@@ -31,7 +34,7 @@ export class BrowseDefinitionDataService extends IdentifiableDataService<BrowseD
    protected halService: HALEndpointService,
  ) {
    super('browses', requestService, rdbService, objectCache, halService);
-
+    this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
  }

@@ -52,5 +55,71 @@ export class BrowseDefinitionDataService extends IdentifiableDataService<BrowseD
  findAll(options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig<BrowseDefinition>[]): Observable<RemoteData<PaginatedList<BrowseDefinition>>> {
    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
  }
+
+  /**
+   * Make a new FindListRequest with given search method
+   *
+   * @param searchMethod                The search method for the object
+   * @param options                     The [[FindListOptions]] object
+   * @param useCachedVersionIfAvailable If this is true, the request will only be sent if there's
+   *                                    no valid cached version. Defaults to true
+   * @param reRequestOnStale            Whether or not the request should automatically be re-
+   *                                    requested after the response becomes stale
+   * @param linksToFollow               List of {@link FollowLinkConfig} that indicate which
+   *                                    {@link HALLink}s should be automatically resolved
+   * @return {Observable<RemoteData<PaginatedList<T>>}
+   *    Return an observable that emits response from the server
+   */
+  public searchBy(searchMethod: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<BrowseDefinition>[]): Observable<RemoteData<PaginatedList<BrowseDefinition>>> {
+    return this.searchData.searchBy(searchMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  /**
+   * Create the HREF for a specific object's search method with given options object
+   *
+   * @param searchMethod The search method for the object
+   * @param options The [[FindListOptions]] object
+   * @return {Observable<string>}
+   *    Return an observable that emits created HREF
+   * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
+   */
+  public getSearchByHref(searchMethod: string, options?: FindListOptions, ...linksToFollow: FollowLinkConfig<BrowseDefinition>[]): Observable<string> {
+    return this.searchData.getSearchByHref(searchMethod, options, ...linksToFollow);
+  }
+
+  /**
+   * Get the browse URL by providing a list of metadata keys. The first matching browse index definition
+   * for any of the fields is returned. This is used in eg. item page field component, which can be configured
+   * with several fields for a component like 'Author', and needs to know if and how to link the values
+   * to configured browse indices.
+   *
+   * @param fields  an array of field strings, eg. ['dc.contributor.author', 'dc.creator']
+   * @param useCachedVersionIfAvailable Override the data service useCachedVersionIfAvailable parameter (default: true)
+   * @param reRequestOnStale Override the data service reRequestOnStale parameter (default: true)
+   * @param linksToFollow Override the data service linksToFollow parameter (default: empty array)
+   */
+  findByFields(
+    fields: string[],
+    useCachedVersionIfAvailable = true,
+    reRequestOnStale = true,
+    ...linksToFollow: FollowLinkConfig<BrowseDefinition>[]
+  ): Observable<RemoteData<BrowseDefinition>> {
+    const searchParams = [];
+    searchParams.push(new RequestParam('fields', fields));
+
+    const hrefObs = this.getSearchByHref(
+      'byFields',
+      { searchParams },
+      ...linksToFollow
+    );
+
+    return this.findByHref(
+      hrefObs,
+      useCachedVersionIfAvailable,
+      reRequestOnStale,
+      ...linksToFollow,
+    );
+  }
+
 }

--- a/src/app/core/browse/browse.service.ts
+++ b/src/app/core/browse/browse.service.ts
@@ -19,9 +19,9 @@ import {
 } from '../shared/operators';
 import { URLCombiner } from '../url-combiner/url-combiner';
 import { BrowseEntrySearchOptions } from './browse-entry-search-options.model';
-import { BrowseDefinitionDataService } from './browse-definition-data.service';
 import { HrefOnlyDataService } from '../data/href-only-data.service';
 import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { BrowseDefinitionDataService } from './browse-definition-data.service';


 export const BROWSE_LINKS_TO_FOLLOW: FollowLinkConfig<BrowseEntry | Item>[] = [
@@ -35,7 +35,7 @@ export const BROWSE_LINKS_TO_FOLLOW: FollowLinkConfig<BrowseEntry | Item>[] = [
 export class BrowseService {
  protected linkPath = 'browses';

-  private static toSearchKeyArray(metadataKey: string): string[] {
+  public static toSearchKeyArray(metadataKey: string): string[] {
    const keyParts = metadataKey.split('.');
    const searchFor = [];
    searchFor.push('*');
--- a/src/app/core/cache/object-cache.reducer.spec.ts
+++ b/src/app/core/cache/object-cache.reducer.spec.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-namespace
 import * as deepFreeze from 'deep-freeze';
 import { Operation } from 'fast-json-patch';
 import { Item } from '../shared/item.model';
--- a/src/app/core/cache/server-sync-buffer.reducer.spec.ts
+++ b/src/app/core/cache/server-sync-buffer.reducer.spec.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-namespace
 import * as deepFreeze from 'deep-freeze';
 import { RemoveFromObjectCacheAction } from './object-cache.actions';
 import { serverSyncBufferReducer } from './server-sync-buffer.reducer';
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -2,15 +2,12 @@ import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';

-import { DynamicFormLayoutService, DynamicFormService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
 import { EffectsModule } from '@ngrx/effects';

 import { Action, StoreConfig, StoreModule } from '@ngrx/store';
 import { MyDSpaceGuard } from '../my-dspace-page/my-dspace.guard';

 import { isNotEmpty } from '../shared/empty.util';
-import { FormBuilderService } from '../shared/form/builder/form-builder.service';
-import { FormService } from '../shared/form/form.service';
 import { HostWindowService } from '../shared/host-window.service';
 import { MenuService } from '../shared/menu/menu.service';
 import { EndpointMockingRestService } from '../shared/mocks/dspace-rest/endpoint-mocking-rest.service';
@@ -23,10 +20,7 @@ import { NotificationsService } from '../shared/notifications/notifications.serv
 import { SelectableListService } from '../shared/object-list/selectable-list/selectable-list.service';
 import { ObjectSelectService } from '../shared/object-select/object-select.service';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { CSSVariableService } from '../shared/sass-helper/sass-helper.service';
 import { SidebarService } from '../shared/sidebar/sidebar.service';
-import { UploaderService } from '../shared/uploader/uploader.service';
-import { SectionFormOperationsService } from '../submission/sections/form/section-form-operations.service';
 import { AuthenticatedGuard } from './auth/authenticated.guard';
 import { AuthStatus } from './auth/models/auth-status.model';
 import { BrowseService } from './browse/browse.service';
@@ -138,9 +132,6 @@ import {
 import { Registration } from './shared/registration.model';
 import { MetadataSchemaDataService } from './data/metadata-schema-data.service';
 import { MetadataFieldDataService } from './data/metadata-field-data.service';
-import {
-  DsDynamicTypeBindRelationService
-} from '../shared/form/builder/ds-dynamic-form-ui/ds-dynamic-type-bind-relation.service';
 import { TokenResponseParsingService } from './auth/token-response-parsing.service';
 import { SubmissionCcLicenseDataService } from './submission/submission-cc-license-data.service';
 import { SubmissionCcLicence } from './submission/models/submission-cc-license.model';
@@ -150,7 +141,6 @@ import { VocabularyEntry } from './submission/vocabularies/models/vocabulary-ent
 import { Vocabulary } from './submission/vocabularies/models/vocabulary.model';
 import { VocabularyEntryDetail } from './submission/vocabularies/models/vocabulary-entry-detail.model';
 import { VocabularyService } from './submission/vocabularies/vocabulary.service';
-import { VocabularyTreeviewService } from '../shared/vocabulary-treeview/vocabulary-treeview.service';
 import { ConfigurationDataService } from './data/configuration-data.service';
 import { ConfigurationProperty } from './shared/configuration-property.model';
 import { ReloadGuard } from './reload/reload.guard';
@@ -211,12 +201,6 @@ const PROVIDERS = [
  DSOResponseParsingService,
  { provide: MOCK_RESPONSE_MAP, useValue: mockResponseMap },
  { provide: DspaceRestService, useFactory: restServiceFactory, deps: [MOCK_RESPONSE_MAP, HttpClient] },
-  DynamicFormLayoutService,
-  DynamicFormService,
-  DynamicFormValidationService,
-  FormBuilderService,
-  SectionFormOperationsService,
-  FormService,
  EPersonDataService,
  LinkHeadService,
  HALEndpointService,
@@ -245,19 +229,16 @@ const PROVIDERS = [
  SubmissionResponseParsingService,
  SubmissionJsonPatchOperationsService,
  JsonPatchOperationsBuilder,
-  UploaderService,
  UUIDService,
  NotificationsService,
  WorkspaceitemDataService,
  WorkflowItemDataService,
-  UploaderService,
  DSpaceObjectDataService,
  ConfigurationDataService,
  DSOChangeAnalyzer,
  DefaultChangeAnalyzer,
  ArrayMoveChangeAnalyzer,
  ObjectSelectService,
-  CSSVariableService,
  MenuService,
  ObjectUpdatesService,
  SearchService,
@@ -268,7 +249,6 @@ const PROVIDERS = [
  ClaimedTaskDataService,
  PoolTaskDataService,
  BitstreamDataService,
-  DsDynamicTypeBindRelationService,
  EntityTypeDataService,
  ContentSourceResponseParsingService,
  ItemTemplateDataService,
@@ -304,7 +284,6 @@ const PROVIDERS = [
  VocabularyService,
  VocabularyDataService,
  VocabularyEntryDetailsDataService,
-  VocabularyTreeviewService,
  SequenceService,
  GroupDataService,
  FeedbackDataService,
--- a/src/app/core/data/array-move-change-analyzer.service.spec.ts
+++ b/src/app/core/data/array-move-change-analyzer.service.spec.ts
@@ -41,21 +41,28 @@ describe('ArrayMoveChangeAnalyzer', () => {
    ], new MoveTest(0, 3));

    testMove([
+      { op: 'move', from: '/2', path: '/3' },
      { op: 'move', from: '/0', path: '/3' },
-      { op: 'move', from: '/2', path: '/1' }
    ], new MoveTest(0, 3), new MoveTest(1, 2));

    testMove([
+      { op: 'move', from: '/3', path: '/4' },
      { op: 'move', from: '/0', path: '/1' },
-      { op: 'move', from: '/3', path: '/4' }
    ], new MoveTest(0, 1), new MoveTest(3, 4));

    testMove([], new MoveTest(0, 4), new MoveTest(4, 0));

    testMove([
+      { op: 'move', from: '/2', path: '/3' },
      { op: 'move', from: '/0', path: '/3' },
-      { op: 'move', from: '/2', path: '/1' }
    ], new MoveTest(0, 4), new MoveTest(1, 3), new MoveTest(2, 4));
+
+    testMove([
+      { op: 'move', from: '/3', path: '/4' },
+      { op: 'move', from: '/2', path: '/4' },
+      { op: 'move', from: '/1', path: '/3' },
+      { op: 'move', from: '/0', path: '/3' },
+    ], new MoveTest(4, 1), new MoveTest(4, 2), new MoveTest(0, 3));
  });

  describe('when some values are undefined (index 2 and 3)', () => {
--- a/src/app/core/data/array-move-change-analyzer.service.ts
+++ b/src/app/core/data/array-move-change-analyzer.service.ts
@@ -16,22 +16,31 @@ export class ArrayMoveChangeAnalyzer<T> {
   * @param array2  The custom array to compare with the original
   */
  diff(array1: T[], array2: T[]): MoveOperation[] {
-    const result = [];
-    const moved = [...array1];
-    array1.forEach((value: T, index: number) => {
-      if (hasValue(value)) {
-        const otherIndex = array2.indexOf(value);
-        const movedIndex = moved.indexOf(value);
-        if (index !== otherIndex && movedIndex !== otherIndex) {
-          moveItemInArray(moved, movedIndex, otherIndex);
-          result.push(Object.assign({
-            op: 'move',
-            from: '/' + movedIndex,
-            path: '/' + otherIndex
-          }) as MoveOperation);
-        }
+    return this.getMoves(array1, array2).map((move) => Object.assign({
+      op: 'move',
+      from: '/' + move[0],
+      path: '/' + move[1],
+    }) as MoveOperation);
+  }
+
+  /**
+   * Determine a set of moves required to transform array1 into array2
+   * The moves are returned as an array of pairs of numbers where the first number is the original index and the second
+   * is the new index
+   * It is assumed the operations are executed in the order they're returned (and not simultaneously)
+   * @param array1
+   * @param array2
+   */
+  private getMoves(array1: any[], array2: any[]): number[][] {
+    const moved = [...array2];
+
+    return array1.reduce((moves, item, index) => {
+      if (hasValue(item) && item !== moved[index]) {
+        const last = moved.lastIndexOf(item);
+        moveItemInArray(moved, last, index);
+        moves.unshift([index, last]);
      }
-    });
-    return result;
+      return moves;
+    }, []);
  }
 }
--- a/src/app/core/data/base/data-service.decorator.spec.ts
+++ b/src/app/core/data/base/data-service.decorator.spec.ts
@@ -10,6 +10,7 @@ import { ResourceType } from '../../shared/resource-type';
 import { BaseDataService } from './base-data.service';
 import { HALDataService } from './hal-data-service.interface';
 import { dataService, getDataServiceFor } from './data-service.decorator';
+import { v4 as uuidv4 } from 'uuid';

 class TestService extends BaseDataService<any> {
 }
@@ -28,7 +29,7 @@ let testType;

 describe('@dataService/getDataServiceFor', () => {
  beforeEach(() => {
-    testType = new ResourceType('testType-' + new Date().getTime());
+    testType = new ResourceType(`testType-${uuidv4()}`);
  });

  it('should register a resourcetype for a dataservice', () => {
--- a/src/app/core/data/dso-change-analyzer.service.ts
+++ b/src/app/core/data/dso-change-analyzer.service.ts
@@ -3,7 +3,7 @@ import { ChangeAnalyzer } from './change-analyzer';
 import { Injectable } from '@angular/core';
 import { DSpaceObject } from '../shared/dspace-object.model';
 import { MetadataMap } from '../shared/metadata.models';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';

 /**
 * A class to determine what differs between two
--- a/src/app/core/data/eperson-registration.service.ts
+++ b/src/app/core/data/eperson-registration.service.ts
@@ -14,6 +14,7 @@ import { RemoteData } from './remote-data';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { HttpOptions } from '../dspace-rest/dspace-rest.service';
 import { HttpHeaders } from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
@@ -55,7 +56,7 @@ export class EpersonRegistrationService {
   * @param email
   * @param captchaToken the value of x-recaptcha-token header
   */
-  registerEmail(email: string, captchaToken: string = null): Observable<RemoteData<Registration>> {
+  registerEmail(email: string, captchaToken: string = null, type?: string): Observable<RemoteData<Registration>> {
    const registration = new Registration();
    registration.email = email;

@@ -70,6 +71,11 @@ export class EpersonRegistrationService {
    }
    options.headers = headers;

+    if (hasValue(type)) {
+      options.params = type ?
+        new HttpParams({ fromString: 'accountRequestType=' + type }) : new HttpParams();
+    }
+
    href$.pipe(
      find((href: string) => hasValue(href)),
      map((href: string) => {
--- a/Show More
+++ b/Show More