Merge remote-tracking branch 'upstream/main' into browse-pagesize

2025-10-11 12:03:03 +00:00 · 2022-09-02 15:23:50 -04:00
parent 7a3284f6bc 342a712513
commit e6f363a0f6
1154 changed files with 45768 additions and 23920 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -2,10 +2,16 @@
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries

+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist

-> 0.5%
-last 2 versions
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
 Firefox ESR
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,222 @@
+{
+  "root": true,
+  "plugins": [
+    "@typescript-eslint",
+    "@angular-eslint/eslint-plugin",
+    "eslint-plugin-import",
+    "eslint-plugin-jsdoc",
+    "eslint-plugin-deprecation",
+    "eslint-plugin-unused-imports"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "./tsconfig.json",
+          "./cypress/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "max-classes-per-file": [
+          "error",
+          1
+        ],
+        "comma-dangle": [
+          "off",
+          "always-multiline"
+        ],
+        "eol-last": [
+          "error",
+          "always"
+        ],
+        "no-console": [
+          "error",
+          {
+            "allow": [
+              "log",
+              "warn",
+              "dir",
+              "timeLog",
+              "assert",
+              "clear",
+              "count",
+              "countReset",
+              "group",
+              "groupEnd",
+              "table",
+              "debug",
+              "info",
+              "dirxml",
+              "error",
+              "groupCollapsed",
+              "Console",
+              "profile",
+              "profileEnd",
+              "timeStamp",
+              "context"
+            ]
+          }
+        ],
+        "curly": "error",
+        "brace-style": [
+          "error",
+          "1tbs",
+          {
+            "allowSingleLine": true
+          }
+        ],
+        "eqeqeq": [
+          "error",
+          "always",
+          {
+            "null": "ignore"
+          }
+        ],
+        "radix": "error",
+        "guard-for-in": "error",
+        "no-bitwise": "error",
+        "no-restricted-imports": "error",
+        "no-caller": "error",
+        "no-debugger": "error",
+        "no-redeclare": "error",
+        "no-eval": "error",
+        "no-fallthrough": "error",
+        "no-trailing-spaces": "error",
+        "space-infix-ops": "error",
+        "keyword-spacing": "error",
+        "no-var": "error",
+        "no-unused-expressions": [
+          "error",
+          {
+            "allowTernary": true
+          }
+        ],
+        "prefer-const": "off",            // todo: re-enable & fix errors (more strict than it used to be in TSLint)
+        "prefer-spread": "off",
+        "no-underscore-dangle": "off",
+
+        // todo: disabled rules from eslint:recommended, consider re-enabling & fixing
+        "no-prototype-builtins": "off",
+        "no-useless-escape": "off",
+        "no-case-declarations": "off",
+        "no-extra-boolean-cast": "off",
+
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "ds",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "ds",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/pipe-prefix": [
+          "error",
+          {
+            "prefixes": [
+              "ds"
+            ]
+          }
+        ],
+        "@angular-eslint/no-attribute-decorator": "error",
+        "@angular-eslint/no-forward-ref": "error",
+        "@angular-eslint/no-output-native": "warn",
+        "@angular-eslint/no-output-on-prefix": "warn",
+        "@angular-eslint/no-conflicting-lifecycle": "warn",
+
+        "@typescript-eslint/no-inferrable-types":[
+          "error",
+          {
+            "ignoreParameters": true
+          }
+        ],
+        "@typescript-eslint/quotes": [
+          "error",
+          "single",
+          {
+            "avoidEscape": true,
+            "allowTemplateLiterals": true
+          }
+        ],
+        "@typescript-eslint/semi": "error",
+        "@typescript-eslint/no-shadow": "error",
+        "@typescript-eslint/dot-notation": "error",
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/prefer-function-type": "error",
+        "@typescript-eslint/naming-convention": [
+          "error",
+          {
+            "selector": "property",
+            "format": null
+          }
+        ],
+        "@typescript-eslint/member-ordering": [
+          "error",
+          {
+            "default": [
+              "static-field",
+              "instance-field",
+              "static-method",
+              "instance-method"
+            ]
+          }
+        ],
+        "@typescript-eslint/type-annotation-spacing": "error",
+        "@typescript-eslint/unified-signatures": "error",
+        "@typescript-eslint/ban-types": "warn",  // todo: deal with {} type issues & re-enable
+        "@typescript-eslint/no-floating-promises": "warn",
+        "@typescript-eslint/no-misused-promises": "warn",
+        "@typescript-eslint/restrict-plus-operands": "warn",
+        "@typescript-eslint/unbound-method": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-unnecessary-type-assertion": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+        "@typescript-eslint/restrict-template-expressions": "off",
+        "@typescript-eslint/require-await": "off",
+
+        "deprecation/deprecation": "warn",
+
+        "import/order": "off",
+        "import/no-deprecated": "warn"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {
+        // todo: re-enable & fix errors
+        "@angular-eslint/template/no-negated-async": "off",
+        "@angular-eslint/template/eqeqeq": "off"
+      }
+    }
+  ]
+}
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -22,7 +22,7 @@ jobs:
    strategy:
      # Create a matrix of Node versions to test against (in parallel)
      matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x, 16.x]
      # Do NOT exit immediately if one matrix job fails
      fail-fast: false
    # These are the actual CI steps to perform per job
@@ -70,7 +70,10 @@ jobs:
        run: yarn install --frozen-lockfile

      - name: Run lint
-        run: yarn run lint
+        run: yarn run lint --quiet
+
+      - name: Check for circular dependencies
+        run: yarn run check-circ-deps

      - name: Run build
        run: yarn run build:prod
@@ -79,11 +82,11 @@ jobs:
        run: yarn run test:headless

      # NOTE: Angular CLI only supports code coverage for specs. See https://github.com/angular/angular-cli/issues/6286
-      # Upload coverage reports to Codecov (for Node v12 only)
+      # 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
-        if: matrix.node-version == '12.x'
+        if: matrix.node-version == '16.x'

      # Using docker-compose start backend using CI configuration
      # and load assetstore from a cached copy
@@ -128,6 +131,14 @@ jobs:
          name: e2e-test-screenshots
          path: cypress/screenshots

+      - name: Stop app (in case it stays up after e2e tests)
+        run: |
+          app_pid=$(lsof -t -i:4000)
+          if [[ ! -z $app_pid ]]; then
+            echo "App was still up! (PID: $app_pid)"
+            kill -9 $app_pid
+          fi
+
      # Start up the app with SSR enabled (run in background)
      - name: Start app in SSR (server-side rendering) mode
        run: |
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -31,6 +31,10 @@ jobs:
      # We turn off 'latest' tag by default.
      TAGS_FLAVOR: |
        latest=false
+      # Architectures / Platforms for which we will build Docker images
+      # If this is a PR, we ONLY build for AMD64. For PRs we only do a sanity check test to ensure Docker builds work.
+      # If this is NOT a PR (e.g. a tag or merge commit), also build for ARM64.
+      PLATFORMS: linux/amd64${{ github.event_name != 'pull_request' && ', linux/arm64' || '' }}

    steps:
      # https://github.com/actions/checkout
@@ -41,6 +45,10 @@ jobs:
      - name: Setup Docker Buildx
        uses: docker/setup-buildx-action@v1

+      # https://github.com/docker/setup-qemu-action
+      - name: Set up QEMU emulation to build for multiple architectures
+        uses: docker/setup-qemu-action@v2
+
      # https://github.com/docker/login-action
      - name: Login to DockerHub
        # Only login if not a PR, as PRs only trigger a Docker build and not a push
@@ -70,6 +78,7 @@ jobs:
        with:
          context: .
          file: ./Dockerfile
+          platforms: ${{ env.PLATFORMS }}
          # For pull requests, we run the Docker build (to ensure no PR changes break the build),
          # but we ONLY do an image push to DockerHub if it's NOT a PR
          push: ${{ github.event_name != 'pull_request' }}
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+/.angular/cache
 /__build__
 /__server_build__
 /node_modules
@@ -36,3 +37,5 @@ package-lock.json

 .env
 /nbproject/
+
+junit.xml
--- a/7
+++ b/7
@@ -9,4 +9,9 @@ EXPOSE 4000
 # 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
-CMD yarn run start:dev
+
+# On startup, run in DEVELOPMENT mode (this defaults to live reloading enabled, etc).
+# Listen / accept connections from all IP addresses.
+# NOTE: At this time it is only possible to run Docker container in Production mode
+# if you have a public IP. See https://github.com/DSpace/dspace-angular/issues/1485
+CMD yarn serve --host 0.0.0.0
--- 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) `v12.x`, `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) `v14.x` or `v16.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 `v12.x`, `v14.x` or `v16.x` and yarn == `v1.x`
+-	Ensure you're running node `v14.x` or `v16.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.

@@ -179,7 +179,7 @@ If needing to update default configurations values for production, update local

 -	Update `environment.production.ts` file in `src/environment/` for a `production` environment;

-The environment object is provided for use as import in code and is extended with he runtime configuration on bootstrap of the application.
+The environment object is provided for use as import in code and is extended with the runtime configuration on bootstrap of the application.

 > Take caution moving runtime configs into the buildtime configuration. They will be overwritten by what is defined in the runtime config on bootstrap.

@@ -330,7 +330,10 @@ All E2E tests must be created under the `./cypress/integration/` folder, and mus
 * In the [Cypress Test Runner](https://docs.cypress.io/guides/core-concepts/test-runner), you'll Cypress automatically visit the page.  This first test will succeed, as all you are doing is making sure the _page exists_.
 * From here, you can use the [Selector Playground](https://docs.cypress.io/guides/core-concepts/test-runner#Selector-Playground) in the Cypress Test Runner window to determine how to tell Cypress to interact with a specific HTML element on that page.
    * Most commands start by telling Cypress to [get()](https://docs.cypress.io/api/commands/get) a specific element, using a CSS or jQuery style selector
+      * It's generally best not to rely on attributes like `class` and `id` in tests, as those are likely to change later on. Instead, you can add a `data-test` attribute to makes it clear that it's required for a test. 
    * Cypress can then do actions like [click()](https://docs.cypress.io/api/commands/click) an element, or [type()](https://docs.cypress.io/api/commands/type) text in an input field, etc.
+      * When running with server-side rendering enabled, the client first receives HTML without the JS; only once the page is rendered client-side do some elements (e.g. a button that toggles a Bootstrap dropdown) become fully interactive. This can trip up Cypress in some cases as it may try to `click` or `type` in an element that's not fully loaded yet, causing tests to fail. 
+      * To work around this issue, define the attributes you use for Cypress selectors as `[attr.data-test]="'button' | ngBrowserOnly"`. This will only show the attribute in CSR HTML, forcing Cypress to wait until CSR is complete before interacting with the element.
    * Cypress can also validate that something occurs, using [should()](https://docs.cypress.io/api/commands/should) assertions.
 * Any time you save your test file, the Cypress Test Runner will reload & rerun it. This allows you can see your results quickly as you write the tests & correct any broken tests rapidly.
 * Cypress also has a great guide on [writing your first test](https://on.cypress.io/writing-first-test) with much more info. Keep in mind, while the examples in the Cypress docs often involve Javascript files (.js), the same examples will work in our Typescript (.ts) e2e tests.
--- a/angular.json
+++ b/angular.json
@@ -17,7 +17,6 @@
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
-            "extractCss": true,
            "preserveSymlinks": true,
            "customWebpackConfig": {
              "path": "./webpack/webpack.browser.ts",
@@ -64,19 +63,31 @@
                "bundleName": "dspace-theme"
              }
            ],
-            "scripts": []
+            "scripts": [],
+            "baseHref": "/"
          },
          "configurations": {
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.production.ts"
+                },
+                {
+                  "replace": "src/config/store/devtools.ts",
+                  "with": "src/config/store/devtools.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
-              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
@@ -104,6 +115,9 @@
            "port": 4000
          },
          "configurations": {
+            "development": {
+              "browserTarget": "dspace-angular:build:development"
+            },
            "production": {
              "browserTarget": "dspace-angular:build:production"
            }
@@ -157,19 +171,6 @@
            }
          }
        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "cypress/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
        "e2e": {
          "builder": "@cypress/schematic:cypress",
          "options": {
@@ -197,6 +198,10 @@
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
+            "development": {
+              "sourceMap": true,
+              "optimization": false
+            },
            "production": {
              "sourceMap": false,
              "optimization": true,
@@ -204,6 +209,10 @@
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.production.ts"
+                },
+                {
+                  "replace": "src/config/store/devtools.ts",
+                  "with": "src/config/store/devtools.prod.ts"
                }
              ]
            }
@@ -253,12 +262,22 @@
            "watch": true,
            "headless": false
          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
        }
      }
    }
  },
  "defaultProject": "dspace-angular",
  "cli": {
-    "analytics": false
+    "analytics": false,
+    "defaultCollection": "@angular-eslint/schematics"
  }
 }
--- a/config/config.example.yml
+++ b/config/config.example.yml
@@ -2,7 +2,8 @@
 debug: false

 # Angular Universal server settings
-# NOTE: these must be 'synced' with the 'dspace.ui.url' setting in your backend's local.cfg.
+# NOTE: these settings define where Node.js will start your UI application. Therefore, these
+# "ui" settings usually specify a localhost port/URL which is later proxied to a public URL (using Apache or similar)
 ui:
  ssl: false
  host: localhost
@@ -15,7 +16,8 @@ ui:
    max: 500 # limit each IP to 500 requests per windowMs

 # The REST API server settings
-# NOTE: these must be 'synced' with the 'dspace.server.url' setting in your backend's local.cfg.
+# NOTE: these settings define which (publicly available) REST API to use. They are usually
+# 'synced' with the 'dspace.server.url' setting in your backend's local.cfg.
 rest:
  ssl: true
  host: api7.dspace.org
@@ -148,6 +150,12 @@ languages:
  - code: fi
    label: Suomi
    active: true
+  - code: sv
+    label: Svenska
+    active: true
+  - code: tr
+    label: Türkçe
+    active: true
  - code: bn
    label: বাংলা
    active: true
@@ -161,10 +169,12 @@ browseBy:
  # The absolute lowest year to display in the dropdown (only used when no lowest date can be found for all items)
  defaultLowerLimit: 1900

-# Item Page Config
+# Item Config
 item:
  edit:
    undoTimeout: 10000 # 10 seconds
+  # Show the item access status label in items lists
+  showAccessStatuses: false

 # Collection Page Config
 collection:
@@ -231,9 +241,20 @@ themes:
        rel: manifest
        href: assets/dspace/images/favicons/manifest.webmanifest

+# The default bundles that should always be displayed as suggestions when you upload a new bundle
+bundle:
+  - standardBundles: [ ORIGINAL, THUMBNAIL, LICENSE ]
+
 # Whether to enable media viewer for image and/or video Bitstreams (i.e. Bitstreams whose MIME type starts with 'image' or 'video').
 # For images, this enables a gallery viewer where you can zoom or page through images.
 # For videos, this enables embedded video streaming
 mediaViewer:
  image: false
  video: false
+
+# Whether the end user agreement is required before users use the repository.
+# If enabled, the user will be required to accept the agreement before they can use the repository.
+# And whether the privacy statement should exist or not.
+info:
+  enableEndUserAgreement: true
+  enablePrivacyStatement: true
--- a/cypress/integration/my-dspace.spec.ts
+++ b/cypress/integration/my-dspace.spec.ts
@@ -65,7 +65,7 @@ describe('My DSpace page', () => {
        cy.visit('/mydspace');

        // Open the New Submission dropdown
-        cy.get('#dropdownSubmission').click();
+        cy.get('button[data-test="submission-dropdown"]').click();
        // Click on the "Item" type in that dropdown
        cy.get('#entityControlsDropdownMenu button[title="none"]').click();

@@ -98,7 +98,7 @@ describe('My DSpace page', () => {
            const id = subpaths[2];

            // Click the "Save for Later" button to save this submission
-            cy.get('button#saveForLater').click();
+            cy.get('ds-submission-form-footer [data-test="save-for-later"]').click();

            // "Save for Later" should send us to MyDSpace
            cy.url().should('include', '/mydspace');
@@ -122,7 +122,7 @@ describe('My DSpace page', () => {
            cy.url().should('include', '/workspaceitems/' + id + '/edit');

            // Discard our new submission by clicking Discard in Submission form & confirming
-            cy.get('button#discard').click();
+            cy.get('ds-submission-form-footer [data-test="discard"]').click();
            cy.get('button#discard_submit').click();

            // Discarding should send us back to MyDSpace
@@ -135,7 +135,7 @@ describe('My DSpace page', () => {
        cy.visit('/mydspace');

        // Open the New Import dropdown
-        cy.get('#dropdownImport').click();
+        cy.get('button[data-test="import-dropdown"]').click();
        // Click on the "Item" type in that dropdown
        cy.get('#importControlsDropdownMenu button[title="none"]').click();

--- a/cypress/integration/search-page.spec.ts
+++ b/cypress/integration/search-page.spec.ts
@@ -24,7 +24,7 @@ describe('Search Page', () => {

        // Click each filter toggle to open *every* filter
        // (As we want to scan filter section for accessibility issues as well)
-        cy.get('.filter-toggle').click({ multiple: true });
+        cy.get('[data-test="filter-toggle"]').click({ multiple: true });

        // Analyze <ds-search-page> for accessibility issues
        testA11y(
--- a/cypress/integration/submission.spec.ts
+++ b/cypress/integration/submission.spec.ts
@@ -42,6 +42,7 @@ describe('New Submission page', () => {
        cy.get('button#deposit').click();

        // A warning alert should display.
+        cy.get('ds-notification div.alert-success').should('not.exist');
        cy.get('ds-notification div.alert-warning').should('be.visible');

        // First section should have an exclamation error in the header
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -21,7 +21,7 @@ import './commands';
 import 'cypress-axe';

 // Runs once before the first test in each "block"
-before(() => {
+beforeEach(() => {
    // Pre-agree to all Klaro cookies by setting the klaro-anonymous cookie
    // This just ensures it doesn't get in the way of matching other objects in the page.
    cy.setCookie('klaro-anonymous', '{%22authentication%22:true%2C%22preferences%22:true%2C%22acknowledgement%22:true%2C%22google-analytics%22:true}');
--- a/docker/README.md
+++ b/docker/README.md
@@ -1,7 +1,9 @@
 # Docker Compose files

 ***
-:warning: **NOT PRODUCTION READY**  The below Docker Compose resources are not guaranteed "production ready" at this time. They have been built for development/testing only. Therefore, DSpace Docker images may not be fully secured or up-to-date. While you are welcome to base your own images on these DSpace images/resources, these should not be used "as is" in any production scenario.
+:warning: **THESE IMAGES ARE NOT PRODUCTION READY**  The below Docker Compose images/resources were built for development/testing only.  Therefore, they may not be fully secured or up-to-date, and should not be used in production.
+
+If you wish to run DSpace on Docker in production, we recommend building your own Docker images. You are welcome to borrow ideas/concepts from the below images in doing so. But, the below images should not be used "as is" in any production scenario.
 ***

 ## 'Dockerfile' in root directory 
--- a/docker/db.entities.yml
+++ b/docker/db.entities.yml
@@ -25,7 +25,7 @@ services:
    ### OVERRIDE default 'entrypoint' in 'docker-compose-rest.yml' ####
    # Ensure that the database is ready BEFORE starting tomcat
    # 1. While a TCP connection to dspacedb port 5432 is not available, continue to sleep
-    # 2. Then, run database migration to init database tables
+    # 2. Then, run database migration to init database tables  (including any out-of-order ignored migrations, if any)
    # 3. (Custom for Entities) enable Entity-specific collection submission mappings in item-submission.xml
    #    This 'sed' command inserts the sample configurations specific to the Entities data set, see:
    #    https://github.com/DSpace/DSpace/blob/main/dspace/config/item-submission.xml#L36-L49
@@ -35,7 +35,7 @@ services:
      - '-c'
      - |
        while (!</dev/tcp/dspacedb/5432) > /dev/null 2>&1; do sleep 1; done;
-        /dspace/bin/dspace database migrate
+        /dspace/bin/dspace database migrate ignored
        sed -i '/name-map collection-handle="default".*/a \\n <name-map collection-handle="123456789/3" submission-name="Publication"/> \
          <name-map collection-handle="123456789/4" submission-name="Publication"/> \
          <name-map collection-handle="123456789/281" submission-name="Publication"/> \
--- a/docker/docker-compose-ci.yml
+++ b/docker/docker-compose-ci.yml
@@ -46,14 +46,14 @@ services:
    - solr_configs:/dspace/solr
    # Ensure that the database is ready BEFORE starting tomcat
    # 1. While a TCP connection to dspacedb port 5432 is not available, continue to sleep
-    # 2. Then, run database migration to init database tables
+    # 2. Then, run database migration to init database tables (including any out-of-order ignored migrations, if any)
    # 3. Finally, start Tomcat
    entrypoint:
    - /bin/bash
    - '-c'
    - |
      while (!</dev/tcp/dspacedb/5432) > /dev/null 2>&1; do sleep 1; done;
-      /dspace/bin/dspace database migrate
+      /dspace/bin/dspace database migrate ignored
      catalina.sh run
  # DSpace database container
  # NOTE: This is customized to use our loadsql image, so that we are using a database with existing test data
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -22,7 +22,7 @@ module.exports = function (config) {
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
-    reporters: ['mocha', 'kjhtml'],
+    reporters: ['mocha', 'kjhtml', 'coverage-istanbul'],
    mochaReporter: {
      ignoreSkipped: true,
      output: 'autowatch'
--- a/package.json
+++ b/package.json
@@ -9,10 +9,11 @@
    "start:dev": "nodemon --exec \"cross-env NODE_ENV=development yarn run serve\"",
    "start:prod": "yarn run build:prod && cross-env NODE_ENV=production yarn run serve:ssr",
    "start:mirador:prod": "yarn run build:mirador && yarn run start:prod",
-    "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
+    "preserve": "yarn base-href",
+    "serve": "ng serve --configuration development",
    "serve:ssr": "node dist/server/main",
    "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
-    "build": "ng build",
+    "build": "ng build --configuration development",
    "build:stats": "ng build --stats-json",
    "build:prod": "yarn run build:ssr",
    "build:ssr": "ng build --configuration production && ng run dspace-angular:server:production",
@@ -36,7 +37,9 @@
    "merge-i18n": "ts-node --project ./tsconfig.ts-node.json scripts/merge-i18n-files.ts",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
-    "env:yaml": "ts-node --project ./tsconfig.ts-node.json scripts/env-to-yaml.ts"
+    "env:yaml": "ts-node --project ./tsconfig.ts-node.json scripts/env-to-yaml.ts",
+    "base-href": "ts-node --project ./tsconfig.ts-node.json scripts/base-href.ts",
+    "check-circ-deps": "npx madge --exclude '(bitstream|bundle|collection|config-submission-form|eperson|item|version)\\.model\\.ts$' --circular --extensions ts ./"
  },
  "browser": {
    "fs": false,
@@ -47,33 +50,37 @@
  "private": true,
  "resolutions": {
    "minimist": "^1.2.5",
-    "webdriver-manager": "^12.1.8"
+    "webdriver-manager": "^12.1.8",
+    "ts-node": "10.2.1"
  },
  "dependencies": {
-    "@angular/animations": "~11.2.14",
-    "@angular/cdk": "^11.2.13",
-    "@angular/common": "~11.2.14",
-    "@angular/compiler": "~11.2.14",
-    "@angular/core": "~11.2.14",
-    "@angular/forms": "~11.2.14",
-    "@angular/localize": "11.2.14",
-    "@angular/platform-browser": "~11.2.14",
-    "@angular/platform-browser-dynamic": "~11.2.14",
-    "@angular/platform-server": "~11.2.14",
-    "@angular/router": "~11.2.14",
-    "@kolkov/ngx-gallery": "^1.2.3",
-    "@ng-bootstrap/ng-bootstrap": "9.1.3",
-    "@ng-dynamic-forms/core": "^13.0.0",
-    "@ng-dynamic-forms/ui-ng-bootstrap": "^13.0.0",
-    "@ngrx/effects": "^11.1.1",
-    "@ngrx/router-store": "^11.1.1",
-    "@ngrx/store": "^11.1.1",
-    "@nguniversal/express-engine": "11.2.1",
+    "@angular/animations": "~13.2.6",
+    "@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",
+    "@kolkov/ngx-gallery": "^2.0.1",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
+    "@ng-dynamic-forms/core": "^15.0.0",
+    "@ng-dynamic-forms/ui-ng-bootstrap": "^15.0.0",
+    "@ngrx/effects": "^13.0.2",
+    "@ngrx/router-store": "^13.0.2",
+    "@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",
    "angular-idle-preload": "3.0.0",
-    "angular2-text-mask": "9.0.0",
-    "angulartics2": "^10.0.0",
+    "angulartics2": "^12.0.0",
+    "axios": "^0.27.2",
    "bootstrap": "4.3.1",
    "caniuse-lite": "^1.0.30001165",
    "cerialize": "0.1.18",
@@ -100,9 +107,9 @@
    "mirador": "^3.3.0",
    "mirador-dl-plugin": "^0.13.0",
    "mirador-share-plugin": "^0.11.0",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
    "morgan": "^1.10.0",
-    "ng-mocks": "11.11.2",
+    "ng-mocks": "^13.1.1",
    "ng2-file-upload": "1.4.0",
    "ng2-nouislider": "^1.8.3",
    "ngx-infinite-scroll": "^10.0.1",
@@ -111,27 +118,35 @@
    "ngx-sortablejs": "^11.1.0",
    "nouislider": "^14.6.3",
    "pem": "1.14.4",
-    "postcss-cli": "^8.3.0",
+    "postcss-cli": "^9.1.0",
+    "prop-types": "^15.7.2",
+    "react-copy-to-clipboard": "^5.0.1",
    "reflect-metadata": "^0.1.13",
-    "rxjs": "^6.6.3",
+    "rxjs": "^7.5.5",
    "sortablejs": "1.13.0",
    "tslib": "^2.0.0",
    "url-parse": "^1.5.6",
    "uuid": "^8.3.2",
    "webfontloader": "1.6.28",
-    "zone.js": "^0.10.3"
+    "zone.js": "~0.11.5",
+    "ngx-ui-switch": "^11.0.1"
  },
  "devDependencies": {
-    "@angular-builders/custom-webpack": "10.0.1",
-    "@angular-devkit/build-angular": "~0.1102.15",
-    "@angular/cli": "~11.2.15",
-    "@angular/compiler-cli": "~11.2.14",
-    "@angular/language-service": "~11.2.14",
+    "@angular-builders/custom-webpack": "~13.1.0",
+    "@angular-devkit/build-angular": "~13.2.6",
+    "@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",
    "@cypress/schematic": "^1.5.0",
    "@fortawesome/fontawesome-free": "^5.5.0",
-    "@ngrx/store-devtools": "^11.1.1",
-    "@ngtools/webpack": "10.2.3",
-    "@nguniversal/builders": "~11.2.1",
+    "@ngrx/store-devtools": "^13.0.2",
+    "@ngtools/webpack": "^13.2.6",
+    "@nguniversal/builders": "^13.0.2",
    "@types/deep-freeze": "0.1.2",
    "@types/express": "^4.17.9",
    "@types/file-saver": "^2.0.1",
@@ -140,23 +155,30 @@
    "@types/js-cookie": "2.2.6",
    "@types/lodash": "^4.14.165",
    "@types/node": "^14.14.9",
+    "@typescript-eslint/eslint-plugin": "5.11.0",
+    "@typescript-eslint/parser": "5.11.0",
    "axe-core": "^4.3.3",
-    "codelyzer": "^6.0.0",
-    "compression-webpack-plugin": "^3.0.1",
+    "compression-webpack-plugin": "^9.2.0",
    "copy-webpack-plugin": "^6.4.1",
    "cross-env": "^7.0.3",
-    "css-loader": "3.4.0",
-    "cssnano": "^4.1.10",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "cssnano": "^5.0.6",
    "cypress": "9.5.1",
-    "cypress-axe": "^0.13.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-unused-imports": "^2.0.0",
+    "express-static-gzip": "^2.1.5",
    "fork-ts-checker-webpack-plugin": "^6.0.3",
    "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^4.5.0",
-    "jasmine-core": "~3.6.0",
-    "jasmine-marbles": "0.6.0",
+    "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",
@@ -164,12 +186,13 @@
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-mocha-reporter": "2.2.5",
+    "ngx-mask": "^13.1.7",
    "nodemon": "^2.0.15",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "postcss-apply": "0.11.0",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "6.7.0",
+    "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",
@@ -177,16 +200,16 @@
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "rimraf": "^3.0.2",
-    "rxjs-spy": "^7.5.3",
+    "rxjs-spy": "^8.0.2",
+    "sass": "~1.32.6",
+    "sass-loader": "^12.6.0",
    "sass-resources-loader": "^2.1.1",
-    "script-ext-html-webpack-plugin": "2.1.5",
-    "string-replace-loader": "^2.3.0",
+    "string-replace-loader": "^3.1.0",
    "terser-webpack-plugin": "^2.3.1",
    "ts-loader": "^5.2.0",
    "ts-node": "^8.10.2",
-    "tslint": "^6.1.3",
-    "typescript": "~4.0.5",
-    "webpack": "^4.44.2",
+    "typescript": "~4.5.5",
+    "webpack": "^5.69.1",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^4.5.0"
--- a/scripts/base-href.ts
+++ b/scripts/base-href.ts
@@ -0,0 +1,36 @@
+import * as fs from 'fs';
+import { join } from 'path';
+
+import { AppConfig } from '../src/config/app-config.interface';
+import { buildAppConfig } from '../src/config/config.server';
+
+/**
+ * Script to set baseHref as `ui.nameSpace` for development mode. Adds `baseHref` to angular.json build options.
+ * 
+ * Usage (see package.json):
+ * 
+ * yarn base-href
+ */
+
+const appConfig: AppConfig = buildAppConfig();
+
+const angularJsonPath = join(process.cwd(), 'angular.json');
+
+if (!fs.existsSync(angularJsonPath)) {
+  console.error(`Error:\n${angularJsonPath} does not exist\n`);
+  process.exit(1);
+}
+
+try {
+  const angularJson = require(angularJsonPath);
+
+  const baseHref = `${appConfig.ui.nameSpace}${appConfig.ui.nameSpace.endsWith('/') ? '' : '/'}`;
+
+  console.log(`Setting baseHref to ${baseHref} in angular.json`);
+
+  angularJson.projects['dspace-angular'].architect.build.options.baseHref = baseHref;
+
+  fs.writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2) + '\n');
+} catch (e) {
+  console.error(e);
+}
--- a/scripts/sync-i18n-files.ts
+++ b/scripts/sync-i18n-files.ts
@@ -1,4 +1,5 @@
 import { projectRoot } from '../webpack/helpers';
+
 const commander = require('commander');
 const fs = require('fs');
 const JSON5 = require('json5');
@@ -119,7 +120,7 @@ function syncFileWithSource(pathToTargetFile, pathToOutputFile) {
    outputChunks.forEach(function (chunk) {
      progressBar.increment();
      chunk.split("\n").forEach(function (line) {
-        file.write("  " + line + "\n");
+        file.write((line === '' ? '' : `  ${line}`) + "\n");
      });
    });
    file.write("\n}");
@@ -192,7 +193,10 @@ function createNewChunkComparingSourceAndTarget(correspondingTargetChunk, source

  const targetList = correspondingTargetChunk.split("\n");
  const oldKeyValueInTargetComments = getSubStringWithRegex(correspondingTargetChunk, "\\s*\\/\\/\\s*\".*");
-  const keyValueTarget = targetList[targetList.length - 1];
+  let keyValueTarget = targetList[targetList.length - 1];
+  if (!keyValueTarget.endsWith(",")) {
+    keyValueTarget = keyValueTarget + ",";
+  }

  if (oldKeyValueInTargetComments != null) {
    const oldKeyValueUncommented = getSubStringWithRegex(oldKeyValueInTargetComments[0], "\".*")[0];
--- a/server.ts
+++ b/server.ts
@@ -15,16 +15,18 @@
 * import for `ngExpressEngine`.
 */

-import 'zone.js/dist/zone-node';
+import 'zone.js/node';
 import 'reflect-metadata';
 import 'rxjs';

+import axios from 'axios';
 import * as pem from 'pem';
 import * as https from 'https';
 import * as morgan from 'morgan';
 import * as express from 'express';
 import * as bodyParser from 'body-parser';
 import * as compression from 'compression';
+import * as expressStaticGzip from 'express-static-gzip';

 import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
@@ -37,14 +39,14 @@ import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';

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

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

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

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

 /*
@@ -66,6 +68,8 @@ extendEnvironmentWithAppConfig(environment, appConfig);
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {

+  const router = express.Router();
+
  /*
   * Create a new express application
   */
@@ -74,11 +78,15 @@ export function app() {
  /*
   * If production mode is enabled in the environment file:
   * - Enable Angular's production mode
-   * - Enable compression for response bodies. See [compression](https://github.com/expressjs/compression)
+   * - Enable compression for SSR reponses. See [compression](https://github.com/expressjs/compression)
   */
  if (environment.production) {
    enableProdMode();
-    server.use(compression());
+    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
+      filter: (_, res) => res.locals.ssr,
+    }));
  }

  /*
@@ -133,7 +141,11 @@ export function app() {
  /**
   * Proxy the sitemaps
   */
-  server.use('/sitemap**', createProxyMiddleware({ target: `${environment.rest.baseUrl}/sitemaps`, changeOrigin: true }));
+  router.use('/sitemap**', createProxyMiddleware({
+    target: `${environment.rest.baseUrl}/sitemaps`,
+    pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
+    changeOrigin: true
+  }));

  /**
   * Checks if the rateLimiter property is present
@@ -150,15 +162,28 @@ export function app() {

  /*
   * Serve static resources (images, i18n messages, …)
+   * Handle pre-compressed files with [express-static-gzip](https://github.com/tkoenig89/express-static-gzip)
   */
-  server.get('*.*', cacheControl, express.static(DIST_FOLDER, { index: false }));
+  router.get('*.*', cacheControl, expressStaticGzip(DIST_FOLDER, {
+    index: false,
+    enableBrotli: true,
+    orderPreference: ['br', 'gzip'],
+  }));
+
  /*
  * Fallthrough to the IIIF viewer (must be included in the build).
  */
-  server.use('/iiif', express.static(IIIF_VIEWER, {index:false}));
+  router.use('/iiif', express.static(IIIF_VIEWER, { index: false }));
+
+  /**
+   * Checking server status
+   */
+  server.get('/app/health', healthCheck);

  // Register the ngApp callback function to handle incoming requests
-  server.get('*', ngApp);
+  router.get('*', ngApp);
+
+  server.use(environment.ui.nameSpace, router);

  return server;
 }
@@ -180,6 +205,7 @@ function ngApp(req, res) {
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
    }, (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
@@ -191,13 +217,25 @@ function ngApp(req, res) {
        if (hasValue(err)) {
          console.warn('Error details : ', err);
        }
-        res.sendFile(DIST_FOLDER + '/index.html');
+        res.render(indexHtml, {
+          req,
+          providers: [{
+            provide: APP_BASE_HREF,
+            useValue: req.baseUrl
+          }]
+        });
      }
    });
  } else {
    // If preboot is disabled, just serve the client
    console.log('Universal off, serving for direct CSR');
-    res.sendFile(DIST_FOLDER + '/index.html');
+    res.render(indexHtml, {
+      req,
+      providers: [{
+        provide: APP_BASE_HREF,
+        useValue: req.baseUrl
+      }]
+    });
  }
 }

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

+/*
+ * The callback function to serve health check requests
+ */
+function healthCheck(req, res) {
+  const baseUrl = `${environment.rest.baseUrl}${environment.actuators.endpointPath}`;
+  axios.get(baseUrl)
+    .then((response) => {
+      res.status(response.status).send(response.data);
+    })
+    .catch((error) => {
+      res.status(error.response.status).send({
+        error: error.message
+      });
+    });
+}
 // Webpack will replace 'require' with '__webpack_require__'
 // '__non_webpack_require__' is a proxy to Node 'require'
 // The below code is to ensure that the server is run only when not requiring the bundle.
--- a/src/app/access-control/epeople-registry/epeople-registry.actions.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.actions.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { type } from '../../shared/ngrx/type';
@@ -16,7 +17,6 @@ export const EPeopleRegistryActionTypes = {
  CANCEL_EDIT_EPERSON: type('dspace/epeople-registry/CANCEL_EDIT_EPERSON'),
 };

-/* tslint:disable:max-classes-per-file */
 /**
 * Used to edit an EPerson in the EPeople registry
 */
@@ -37,7 +37,6 @@ export class EPeopleRegistryCancelEPersonAction implements Action {
  type = EPeopleRegistryActionTypes.CANCEL_EDIT_EPERSON;
 }

-/* tslint:enable:max-classes-per-file */

 /**
 * Export a type alias of all actions in this action group
--- a/src/app/access-control/epeople-registry/epeople-registry.component.html
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.html
@@ -45,7 +45,7 @@
          </div>
        </form>

-        <ds-loading *ngIf="searching$ | async"></ds-loading>
+        <ds-themed-loading *ngIf="searching$ | async"></ds-themed-loading>
        <ds-pagination
          *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
          [paginationOptions]="config"
--- a/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
@@ -9,7 +9,6 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
 import { RemoteData } from '../../core/data/remote-data';
-import { FindListOptions } from '../../core/data/request.models';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { PageInfo } from '../../core/shared/page-info.model';
@@ -27,6 +26,7 @@ import { AuthorizationDataService } from '../../core/data/feature-authorization/
 import { RequestService } from '../../core/data/request.service';
 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('EPeopleRegistryComponent', () => {
  let component: EPeopleRegistryComponent;
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
@@ -36,12 +36,12 @@
  </button>
 </ds-form>

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

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

-  <ds-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-loading>
+  <ds-themed-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-themed-loading>

  <ds-pagination
    *ngIf="(groups | async)?.payload?.totalElements > 0"
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
@@ -8,7 +8,6 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
-import { FindListOptions } from '../../../core/data/request.models';
 import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
 import { EPerson } from '../../../core/eperson/models/eperson.model';
 import { PageInfo } from '../../../core/shared/page-info.model';
@@ -29,6 +28,7 @@ import { createPaginatedList } from '../../../shared/testing/utils.test';
 import { RequestService } from '../../../core/data/request.service';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
+import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { ValidateEmailNotTaken } from './validators/email-taken.validator';
 import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';

--- 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
@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule, FormArray, FormControl, FormGroup,Validators, NG_VALIDATORS, NG_ASYNC_VALIDATORS } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BrowserModule, By } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
@@ -35,6 +35,7 @@ import { RouterMock } from '../../../shared/mocks/router.mock';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
 import { Operation } from 'fast-json-patch';
 import { ValidateGroupExists } from './validators/group-exists.validator';
+import { NoContent } from '../../../core/shared/NoContent.model';

 describe('GroupFormComponent', () => {
  let component: GroupFormComponent;
@@ -87,6 +88,9 @@ describe('GroupFormComponent', () => {
      patch(group: Group, operations: Operation[]) {
        return null;
      },
+      delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+        return createSuccessfulRemoteDataObject$({});
+      },
      cancelEditGroup(): void {
        this.activeGroup = null;
      },
@@ -348,4 +352,46 @@ describe('GroupFormComponent', () => {
    });
  });

+  describe('delete', () => {
+    let deleteButton;
+
+    beforeEach(() => {
+      component.initialisePage();
+
+      component.canEdit$ = observableOf(true);
+      component.groupBeingEdited = {
+        permanent: false
+      } as Group;
+
+      fixture.detectChanges();
+      deleteButton = fixture.debugElement.query(By.css('.delete-button')).nativeElement;
+
+      spyOn(groupsDataServiceStub, 'delete').and.callThrough();
+      spyOn(groupsDataServiceStub, 'getActiveGroup').and.returnValue(observableOf({ id: 'active-group' }));
+    });
+
+    describe('if confirmed via modal', () => {
+      beforeEach(waitForAsync(() => {
+        deleteButton.click();
+        fixture.detectChanges();
+        (document as any).querySelector('.modal-footer .confirm').click();
+      }));
+
+      it('should call GroupDataService.delete', () => {
+        expect(groupsDataServiceStub.delete).toHaveBeenCalledWith('active-group');
+      });
+    });
+
+    describe('if canceled via modal', () => {
+      beforeEach(waitForAsync(() => {
+        deleteButton.click();
+        fixture.detectChanges();
+        (document as any).querySelector('.modal-footer .cancel').click();
+      }));
+
+      it('should not call GroupDataService.delete', () => {
+        expect(groupsDataServiceStub.delete).not.toHaveBeenCalled();
+      });
+    });
+  });
 });
--- 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
@@ -426,7 +426,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
              .subscribe((rd: RemoteData<NoContent>) => {
                if (rd.hasSucceeded) {
                  this.notificationsService.success(this.translateService.get(this.messagePrefix + '.notification.deleted.success', { name: group.name }));
-                  this.reset();
+                  this.onCancel();
                } else {
                  this.notificationsService.error(
                    this.translateService.get(this.messagePrefix + '.notification.deleted.failure.title', { name: group.name }),
@@ -439,16 +439,6 @@ export class GroupFormComponent implements OnInit, OnDestroy {
    });
  }

-  /**
-   * This method will ensure that the page gets reset and that the cache is cleared
-   */
-  reset() {
-    this.groupDataService.getBrowseEndpoint().pipe(take(1)).subscribe((href: string) => {
-      this.requestService.removeByHrefSubstring(href);
-    });
-    this.onCancel();
-  }
-
  /**
   * Cancel the current edit when component is destroyed & unsub all subscriptions
   */
--- a/src/app/access-control/group-registry/group-registry.actions.ts
+++ b/src/app/access-control/group-registry/group-registry.actions.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { Group } from '../../core/eperson/models/group.model';
 import { type } from '../../shared/ngrx/type';
@@ -16,7 +17,6 @@ export const GroupRegistryActionTypes = {
  CANCEL_EDIT_GROUP: type('dspace/epeople-registry/CANCEL_EDIT_GROUP'),
 };

-/* tslint:disable:max-classes-per-file */
 /**
 * Used to edit a Group in the Group registry
 */
@@ -37,7 +37,6 @@ export class GroupRegistryCancelGroupAction implements Action {
  type = GroupRegistryActionTypes.CANCEL_EDIT_GROUP;
 }

-/* tslint:enable:max-classes-per-file */

 /**
 * Export a type alias of all actions in this action group
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -33,7 +33,7 @@
        </div>
      </form>

-      <ds-loading *ngIf="loading$ | async"></ds-loading>
+      <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
      <ds-pagination
        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(loading$ | async)"
        [paginationOptions]="config"
@@ -79,7 +79,7 @@
                    </button>
                  </ng-container>
                  <button *ngIf="!groupDto.group?.permanent && groupDto.ableToDelete"
-                          (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm"
+                          (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
                          title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: groupDto.group.name} }}">
                    <i class="fas fa-trash-alt fa-fw"></i>
                  </button>
--- a/src/app/access-control/group-registry/groups-registry.component.spec.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.spec.ts
@@ -31,6 +31,7 @@ import { RouterMock } from '../../shared/mocks/router.mock';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { NoContent } from '../../core/shared/NoContent.model';

 describe('GroupRegistryComponent', () => {
  let component: GroupsRegistryComponent;
@@ -145,7 +146,10 @@ describe('GroupRegistryComponent', () => {
          totalPages: 1,
          currentPage: 1
        }), [result]));
-      }
+      },
+      delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+        return createSuccessfulRemoteDataObject$({});
+      },
    };
    dsoDataServiceStub = {
      findByHref(href: string): Observable<RemoteData<DSpaceObject>> {
@@ -301,4 +305,29 @@ describe('GroupRegistryComponent', () => {
      });
    });
  });
+
+  describe('delete', () => {
+    let deleteButton;
+
+    beforeEach(fakeAsync(() => {
+      spyOn(groupsDataServiceStub, 'delete').and.callThrough();
+
+      setIsAuthorized(true, true);
+
+      // force rerender after setup changes
+      component.search({ query: '' });
+      tick();
+      fixture.detectChanges();
+
+      // only mockGroup[0] is deletable, so we should only get one button
+      deleteButton = fixture.debugElement.query(By.css('.btn-delete')).nativeElement;
+    }));
+
+    it('should call GroupDataService.delete', () => {
+      deleteButton.click();
+      fixture.detectChanges();
+
+      expect(groupsDataServiceStub.delete).toHaveBeenCalledWith(mockGroups[0].id);
+    });
+  });
 });
--- a/src/app/access-control/group-registry/groups-registry.component.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.ts
@@ -9,7 +9,7 @@ import {
  of as observableOf,
  Subscription
 } from 'rxjs';
-import { catchError, map, switchMap, take, tap } from 'rxjs/operators';
+import { catchError, map, switchMap, tap } from 'rxjs/operators';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
@@ -199,7 +199,6 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
          if (rd.hasSucceeded) {
            this.deletedGroupsIds = [...this.deletedGroupsIds, group.group.id];
            this.notificationsService.success(this.translateService.get(this.messagePrefix + 'notification.deleted.success', { name: group.group.name }));
-            this.reset();
          } else {
            this.notificationsService.error(
              this.translateService.get(this.messagePrefix + 'notification.deleted.failure.title', { name: group.group.name }),
@@ -209,17 +208,6 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
    }
  }

-  /**
-   * This method will set everything to stale, which will cause the lists on this page to update.
-   */
-  reset() {
-    this.groupService.getBrowseEndpoint().pipe(
-      take(1)
-    ).subscribe((href: string) => {
-      this.requestService.setStaleByHrefSubstring(href);
-    });
-  }
-
  /**
   * Get the members (epersons embedded value of a group)
   * @param group
--- a/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html
+++ b/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html
@@ -1,6 +1,17 @@
 <div class="container">
  <h2 id="header">{{'admin.metadata-import.page.header' | translate}}</h2>
  <p>{{'admin.metadata-import.page.help' | translate}}</p>
+  <div class="form-group">
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" id="validateOnly" [(ngModel)]="validateOnly">
+      <label class="form-check-label" for="validateOnly">
+        {{'admin.metadata-import.page.validateOnly' | translate}}
+      </label>
+    </div>
+    <small id="validateOnlyHelpBlock" class="form-text text-muted">
+      {{'admin.metadata-import.page.validateOnly.hint' | translate}}
+    </small>
+  </div>

  <ds-file-dropzone-no-uploader
    (onFileAdded)="setFile($event)"
@@ -8,8 +19,10 @@
    [dropMessageLabelReplacement]="'admin.metadata-import.page.dropMsgReplace'">
  </ds-file-dropzone-no-uploader>

+  <div class="space-children-mr">
    <button class="btn btn-secondary" id="backButton"
            (click)="this.onReturn();">{{'admin.metadata-import.page.button.return' | translate}}</button>
    <button class="btn btn-primary" id="proceedButton"
            (click)="this.importMetadata();">{{'admin.metadata-import.page.button.proceed' | translate}}</button>
  </div>
+</div>
--- a/src/app/admin/admin-import-metadata-page/metadata-import-page.component.spec.ts
+++ b/src/app/admin/admin-import-metadata-page/metadata-import-page.component.spec.ts
@@ -87,8 +87,9 @@ describe('MetadataImportPageComponent', () => {
      comp.setFile(fileMock);
    });

-    describe('if proceed button is pressed', () => {
+    describe('if proceed button is pressed without validate only', () => {
      beforeEach(fakeAsync(() => {
+        comp.validateOnly = false;
        const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
        proceed.click();
        fixture.detectChanges();
@@ -107,6 +108,28 @@ describe('MetadataImportPageComponent', () => {
      });
    });

+    describe('if proceed button is pressed with validate only', () => {
+      beforeEach(fakeAsync(() => {
+        comp.validateOnly = true;
+        const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
+        proceed.click();
+        fixture.detectChanges();
+      }));
+      it('metadata-import script is invoked with -f fileName and the mockFile and -v validate-only', () => {
+        const parameterValues: ProcessParameter[] = [
+          Object.assign(new ProcessParameter(), { name: '-f', value: 'filename.txt' }),
+          Object.assign(new ProcessParameter(), { name: '-v', value: true }),
+        ];
+        expect(scriptService.invoke).toHaveBeenCalledWith(METADATA_IMPORT_SCRIPT_NAME, parameterValues, [fileMock]);
+      });
+      it('success notification is shown', () => {
+        expect(notificationService.success).toHaveBeenCalled();
+      });
+      it('redirected to process page', () => {
+        expect(router.navigateByUrl).toHaveBeenCalledWith('/processes/45');
+      });
+    });
+
    describe('if proceed is pressed; but script invoke fails', () => {
      beforeEach(fakeAsync(() => {
        jasmine.getEnv().allowRespy(true);
--- 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
@@ -30,6 +30,11 @@ export class MetadataImportPageComponent {
   */
  fileObject: File;

+  /**
+   * The validate only flag
+   */
+  validateOnly = true;
+
  public constructor(private location: Location,
                     protected translate: TranslateService,
                     protected notificationsService: NotificationsService,
@@ -62,6 +67,9 @@ export class MetadataImportPageComponent {
      const parameterValues: ProcessParameter[] = [
        Object.assign(new ProcessParameter(), { name: '-f', value: this.fileObject.name }),
      ];
+      if (this.validateOnly) {
+        parameterValues.push(Object.assign(new ProcessParameter(), { name: '-v', value: true }));
+      }

      this.scriptDataService.invoke(METADATA_IMPORT_SCRIPT_NAME, parameterValues, [this.fileObject]).pipe(
        getFirstCompletedRemoteData(),
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-format.actions.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-format.actions.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { type } from '../../../shared/ngrx/type';
 import { BitstreamFormat } from '../../../core/shared/bitstream-format.model';
@@ -17,7 +18,6 @@ export const BitstreamFormatsRegistryActionTypes = {
  DESELECT_ALL_FORMAT: type('dspace/bitstream-formats-registry/DESELECT_ALL_FORMAT')
 };

-/* tslint:disable:max-classes-per-file */
 /**
 * Used to select a single bitstream format in the bitstream format registry
 */
@@ -51,7 +51,6 @@ export class BitstreamFormatsRegistryDeselectAllAction implements Action {
  type = BitstreamFormatsRegistryActionTypes.DESELECT_ALL_FORMAT;
 }

-/* tslint:enable:max-classes-per-file */

 /**
 * Export a type alias of all actions in this action group
--- 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
@@ -25,9 +25,9 @@ import {
 import { createPaginatedList } from '../../../shared/testing/utils.test';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
-import { FindListOptions } from '../../../core/data/request.models';
 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('BitstreamFormatsComponent', () => {
  let comp: BitstreamFormatsComponent;
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.ts
@@ -5,7 +5,6 @@ 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 { FindListOptions } from '../../../core/data/request.models';
 import { map, switchMap, take } from 'rxjs/operators';
 import { hasValue } from '../../../shared/empty.util';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
@@ -13,6 +12,7 @@ import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { NoContent } from '../../../core/shared/NoContent.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
+import { FindListOptions } from '../../../core/data/find-list-options.model';

 /**
 * This component renders a list of bitstream formats
--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.actions.ts
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.actions.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { type } from '../../../shared/ngrx/type';
 import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
@@ -26,7 +27,6 @@ export const MetadataRegistryActionTypes = {
  DESELECT_ALL_FIELD: type('dspace/metadata-registry/DESELECT_ALL_FIELD')
 };

-/* tslint:disable:max-classes-per-file */
 /**
 * Used to edit a metadata schema in the metadata registry
 */
@@ -133,7 +133,6 @@ export class MetadataRegistryDeselectAllFieldAction implements Action {
  type = MetadataRegistryActionTypes.DESELECT_ALL_FIELD;
 }

-/* tslint:enable:max-classes-per-file */

 /**
 * Export a type alias of all actions in this action group
--- 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
@@ -21,8 +21,8 @@ import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.u
 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 { FindListOptions } from '../../../core/data/request.models';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
+import { FindListOptions } from '../../../core/data/find-list-options.model';

 describe('MetadataRegistryComponent', () => {
  let comp: MetadataRegistryComponent;
@@ -52,7 +52,7 @@ describe('MetadataRegistryComponent', () => {
    }
  ];
  const mockSchemas = createSuccessfulRemoteDataObject$(buildPaginatedList(null, mockSchemasList));
-  /* tslint:disable:no-empty */
+  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
  const registryServiceStub = {
    getMetadataSchemas: () => mockSchemas,
    getActiveMetadataSchema: () => observableOf(undefined),
@@ -66,7 +66,7 @@ describe('MetadataRegistryComponent', () => {
    },
    clearMetadataSchemaRequests: () => observableOf(undefined)
  };
-  /* tslint:enable:no-empty */
+  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */

  paginationService = new PaginationServiceStub();

--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.ts
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.ts
@@ -128,7 +128,6 @@ export class MetadataRegistryComponent {
   * Delete all the selected metadata schemas
   */
  deleteSchemas() {
-    this.registryService.clearMetadataSchemaRequests().subscribe();
    this.registryService.getSelectedMetadataSchemas().pipe(take(1)).subscribe(
      (schemas) => {
        const tasks$ = [];
@@ -148,7 +147,6 @@ export class MetadataRegistryComponent {
          }
          this.registryService.deselectAllMetadataSchema();
          this.registryService.cancelEditMetadataSchema();
-          this.forceUpdateSchemas();
        });
      }
    );
--- a/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.spec.ts
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.spec.ts
@@ -17,7 +17,7 @@ describe('MetadataSchemaFormComponent', () => {
  let fixture: ComponentFixture<MetadataSchemaFormComponent>;
  let registryService: RegistryService;

-  /* tslint:disable:no-empty */
+  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
  const registryServiceStub = {
    getActiveMetadataSchema: () => observableOf(undefined),
    createOrUpdateMetadataSchema: (schema: MetadataSchema) => observableOf(schema),
@@ -33,7 +33,7 @@ describe('MetadataSchemaFormComponent', () => {
      };
    }
  };
-  /* tslint:enable:no-empty */
+  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
--- a/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
@@ -24,7 +24,7 @@ describe('MetadataFieldFormComponent', () => {
    prefix: 'fake'
  });

-  /* tslint:disable:no-empty */
+  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
  const registryServiceStub = {
    getActiveMetadataField: () => observableOf(undefined),
    createMetadataField: (field: MetadataField) => observableOf(field),
@@ -43,7 +43,7 @@ describe('MetadataFieldFormComponent', () => {
      };
    }
  };
-  /* tslint:enable:no-empty */
+  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
--- 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
@@ -25,9 +25,9 @@ import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.u
 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 { FindListOptions } from '../../../core/data/request.models';
 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;
@@ -106,7 +106,7 @@ describe('MetadataSchemaComponent', () => {
    }
  ];
  const mockSchemas = createSuccessfulRemoteDataObject$(buildPaginatedList(null, mockSchemasList));
-  /* tslint:disable:no-empty */
+  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
  const registryServiceStub = {
    getMetadataSchemas: () => mockSchemas,
    getMetadataFieldsBySchema: (schema: MetadataSchema) => createSuccessfulRemoteDataObject$(buildPaginatedList(null, mockFieldsList.filter((value) => value.id === 3 || value.id === 4))),
@@ -122,7 +122,7 @@ describe('MetadataSchemaComponent', () => {
    },
    clearMetadataFieldRequests: () => observableOf(undefined)
  };
-  /* tslint:enable:no-empty */
+  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
  const schemaNameParam = 'mock';
  const activatedRouteStub = Object.assign(new ActivatedRouteStub(), {
    params: observableOf({
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.ts
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.ts
@@ -174,15 +174,12 @@ export class MetadataSchemaComponent implements OnInit {
          const failedResponses = responses.filter((response: RemoteData<NoContent>) => response.hasFailed);
          if (successResponses.length > 0) {
            this.showNotification(true, successResponses.length);
-            this.registryService.clearMetadataFieldRequests();
-
          }
          if (failedResponses.length > 0) {
            this.showNotification(false, failedResponses.length);
          }
          this.registryService.deselectAllMetadataField();
          this.registryService.cancelEditMetadataField();
-          this.forceUpdateFields();
        });
      }
    );
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts
@@ -18,6 +18,8 @@ import { ItemAdminSearchResultGridElementComponent } from './item-admin-search-r
 import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
 import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { AccessStatusDataService } from '../../../../../core/data/access-status-data.service';
+import { AccessStatusObject } from '../../../../../shared/object-list/access-status-badge/access-status.model';

 describe('ItemAdminSearchResultGridElementComponent', () => {
  let component: ItemAdminSearchResultGridElementComponent;
@@ -31,6 +33,12 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
    }
  };

+  const mockAccessStatusDataService = {
+    findAccessStatusFor(item: Item): Observable<RemoteData<AccessStatusObject>> {
+      return createSuccessfulRemoteDataObject$(new AccessStatusObject());
+    }
+  };
+
  const mockThemeService = getMockThemeService();

  function init() {
@@ -55,6 +63,7 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
          { provide: TruncatableService, useValue: mockTruncatableService },
          { provide: BitstreamDataService, useValue: mockBitstreamDataService },
          { provide: ThemeService, useValue: mockThemeService },
+          { provide: AccessStatusDataService, useValue: mockAccessStatusDataService },
        ],
        schemas: [NO_ERRORS_SCHEMA]
      })
--- a/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
+++ b/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
@@ -1,28 +1,30 @@
-<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
+<div class="space-children-mr my-1">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-secondary move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
    <i class="fa fa-arrow-circle-right"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.move" | translate}}</span>
  </a>

-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-secondary my-1 private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-secondary private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
    <i class="fa fa-eye-slash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-private" | translate}}</span>
  </a>

-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-secondary my-1 public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-secondary public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
    <i class="fa fa-eye"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-public" | translate}}</span>
  </a>

-<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-secondary edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
    <i class="fa fa-edit"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.edit" | translate}}</span>
  </a>

-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-warning t my-1 withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-warning t withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
    <i class="fa fa-ban"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.withdraw" | translate}}</span>
  </a>

-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-warning my-1 reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-warning reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
    <i class="fa fa-undo"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.reinstate" | translate}}</span>
  </a>

-<a [ngClass]="{'btn-sm': small}" class="btn btn-danger my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-danger delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
    <i class="fa fa-trash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.delete" | translate}}</span>
  </a>
+</div>

--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -1,10 +1,10 @@
 import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { MenuSectionComponent } from '../../../shared/menu/menu-section/menu-section.component';
-import { MenuID } from '../../../shared/menu/initial-menus-state';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
 import { LinkMenuItemModel } from '../../../shared/menu/menu-item/models/link.model';
-import { MenuSection } from '../../../shared/menu/menu.reducer';
+import { MenuSection } from '../../../shared/menu/menu-section.model';
+import { MenuID } from '../../../shared/menu/menu-id.model';
 import { isNotEmpty } from '../../../shared/empty.util';
 import { Router } from '@angular/router';

@@ -12,7 +12,7 @@ import { Router } from '@angular/router';
 * Represents a non-expandable section in the admin sidebar
 */
@Component({
-  /* tslint:disable:component-selector */
+  /* eslint-disable @angular-eslint/component-selector */
  selector: 'li[ds-admin-sidebar-section]',
  templateUrl: './admin-sidebar-section.component.html',
  styleUrls: ['./admin-sidebar-section.component.scss'],
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
@@ -20,6 +20,8 @@ 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';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';

 describe('AdminSidebarComponent', () => {
  let comp: AdminSidebarComponent;
@@ -60,6 +62,7 @@ describe('AdminSidebarComponent', () => {
      declarations: [AdminSidebarComponent],
      providers: [
        Injector,
+        { provide: ThemeService, useValue: getMockThemeService() },
        { provide: MenuService, useValue: menuService },
        { provide: CSSVariableService, useClass: CSSVariableServiceStub },
        { provide: AuthService, useClass: AuthServiceStub },
@@ -182,150 +185,4 @@ describe('AdminSidebarComponent', () => {
      expect(menuService.collapseMenuPreview).toHaveBeenCalled();
    }));
  });
-
-  describe('menu', () => {
-    beforeEach(() => {
-      spyOn(menuService, 'addSection');
-    });
-
-    describe('for regular user', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake(() => {
-          return observableOf(false);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should not show site admin section', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'admin_search', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'registries', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          parentID: 'registries', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'curation_tasks', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'workflow', visible: false,
-        }));
-      });
-
-      it('should not show edit_community', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'edit_community', visible: false,
-        }));
-
-      });
-
-      it('should not show edit_collection', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'edit_collection', visible: false,
-        }));
-      });
-
-      it('should not show access control section', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'access_control', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          parentID: 'access_control', visible: false,
-        }));
-
-      });
-    });
-
-    describe('for site admin', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
-          return observableOf(featureID === FeatureID.AdministratorOf);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should contain site admin section', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'admin_search', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'registries', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          parentID: 'registries', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'curation_tasks', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'workflow', visible: true,
-        }));
-      });
-    });
-
-    describe('for community admin', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
-          return observableOf(featureID === FeatureID.IsCommunityAdmin);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should show edit_community', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'edit_community', visible: true,
-        }));
-      });
-    });
-
-    describe('for collection admin', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
-          return observableOf(featureID === FeatureID.IsCollectionAdmin);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should show edit_collection', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'edit_collection', visible: true,
-        }));
-      });
-    });
-
-    describe('for group admin', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
-          return observableOf(featureID === FeatureID.CanManageGroups);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should show access control section', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'access_control', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          parentID: 'access_control', visible: true,
-        }));
-      });
-    });
-  });
 });
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -1,27 +1,15 @@
 import { Component, HostListener, Injector, OnInit } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { combineLatest, combineLatest as observableCombineLatest, Observable, BehaviorSubject } from 'rxjs';
-import { debounceTime, first, map, take, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged, first, map, withLatestFrom } from 'rxjs/operators';
 import { AuthService } from '../../core/auth/auth.service';
-import { ScriptDataService } from '../../core/data/processes/script-data.service';
 import { slideHorizontal, slideSidebar } from '../../shared/animations/slide';
-import { CreateCollectionParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component';
-import { CreateCommunityParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component';
-import { CreateItemParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component';
-import { EditCollectionSelectorComponent } from '../../shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component';
-import { EditCommunitySelectorComponent } from '../../shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component';
-import { EditItemSelectorComponent } from '../../shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component';
-import { ExportMetadataSelectorComponent } from '../../shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component';
-import { MenuID, MenuItemType } from '../../shared/menu/initial-menus-state';
-import { LinkMenuItemModel } from '../../shared/menu/menu-item/models/link.model';
-import { OnClickMenuItemModel } from '../../shared/menu/menu-item/models/onclick.model';
-import { TextMenuItemModel } from '../../shared/menu/menu-item/models/text.model';
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../core/data/feature-authorization/feature-id';
-import { Router, ActivatedRoute } from '@angular/router';
+import { MenuID } from '../../shared/menu/menu-id.model';
+import { ActivatedRoute } from '@angular/router';
+import { ThemeService } from '../../shared/theme-support/theme.service';

 /**
 * Component representing the admin sidebar
@@ -66,14 +54,13 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
  constructor(
    protected menuService: MenuService,
    protected injector: Injector,
-    protected variableService: CSSVariableService,
-    protected authService: AuthService,
-    protected modalService: NgbModal,
+    private variableService: CSSVariableService,
+    private authService: AuthService,
    public authorizationService: AuthorizationDataService,
-    protected scriptDataService: ScriptDataService,
-    public route: ActivatedRoute
+    public route: ActivatedRoute,
+    protected themeService: ThemeService
  ) {
-    super(menuService, injector, authorizationService, route);
+    super(menuService, injector, authorizationService, route, themeService);
    this.inFocus$ = new BehaviorSubject(false);
  }

@@ -81,7 +68,6 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
   * Set and calculate all initial values of the instance variables
   */
  ngOnInit(): void {
-    this.createMenu();
    super.ngOnInit();
    this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
    this.authService.isAuthenticated()
@@ -116,501 +102,6 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    });
  }

-  /**
-   * Initialize all menu sections and items for this menu
-   */
-  createMenu() {
-    this.createMainMenuSections();
-    this.createSiteAdministratorMenuSections();
-    this.createExportMenuSections();
-    this.createImportMenuSections();
-    this.createAccessControlMenuSections();
-  }
-
-  /**
-   * Initialize the main menu sections.
-   * edit_community / edit_collection is only included if the current user is a Community or Collection admin
-   */
-  createMainMenuSections() {
-    combineLatest([
-      this.authorizationService.isAuthorized(FeatureID.IsCollectionAdmin),
-      this.authorizationService.isAuthorized(FeatureID.IsCommunityAdmin),
-      this.authorizationService.isAuthorized(FeatureID.AdministratorOf)
-    ]).subscribe(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin]) => {
-      const menuList = [
-        /* News */
-        {
-          id: 'new',
-          active: false,
-          visible: true,
-          model: {
-            type: MenuItemType.TEXT,
-            text: 'menu.section.new'
-          } as TextMenuItemModel,
-          icon: 'plus',
-          index: 0
-        },
-        {
-          id: 'new_community',
-          parentID: 'new',
-          active: false,
-          visible: isCommunityAdmin,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.new_community',
-            function: () => {
-              this.modalService.open(CreateCommunityParentSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'new_collection',
-          parentID: 'new',
-          active: false,
-          visible: isCommunityAdmin,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.new_collection',
-            function: () => {
-              this.modalService.open(CreateCollectionParentSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'new_item',
-          parentID: 'new',
-          active: false,
-          visible: true,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.new_item',
-            function: () => {
-              this.modalService.open(CreateItemParentSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'new_process',
-          parentID: 'new',
-          active: false,
-          visible: isCollectionAdmin,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.new_process',
-            link: '/processes/new'
-          } as LinkMenuItemModel,
-        },
-        // TODO: enable this menu item once the feature has been implemented
-        // {
-        //   id: 'new_item_version',
-        //   parentID: 'new',
-        //   active: false,
-        //   visible: true,
-        //   model: {
-        //     type: MenuItemType.LINK,
-        //     text: 'menu.section.new_item_version',
-        //     link: ''
-        //   } as LinkMenuItemModel,
-        // },
-
-        /* Edit */
-        {
-          id: 'edit',
-          active: false,
-          visible: true,
-          model: {
-            type: MenuItemType.TEXT,
-            text: 'menu.section.edit'
-          } as TextMenuItemModel,
-          icon: 'pencil-alt',
-          index: 1
-        },
-        {
-          id: 'edit_community',
-          parentID: 'edit',
-          active: false,
-          visible: isCommunityAdmin,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.edit_community',
-            function: () => {
-              this.modalService.open(EditCommunitySelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'edit_collection',
-          parentID: 'edit',
-          active: false,
-          visible: isCollectionAdmin,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.edit_collection',
-            function: () => {
-              this.modalService.open(EditCollectionSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'edit_item',
-          parentID: 'edit',
-          active: false,
-          visible: true,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.edit_item',
-            function: () => {
-              this.modalService.open(EditItemSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-
-        /* Statistics */
-        // TODO: enable this menu item once the feature has been implemented
-        // {
-        //   id: 'statistics_task',
-        //   active: false,
-        //   visible: true,
-        //   model: {
-        //     type: MenuItemType.LINK,
-        //     text: 'menu.section.statistics_task',
-        //     link: ''
-        //   } as LinkMenuItemModel,
-        //   icon: 'chart-bar',
-        //   index: 8
-        // },
-
-        /* Control Panel */
-        // TODO: enable this menu item once the feature has been implemented
-        // {
-        //   id: 'control_panel',
-        //   active: false,
-        //   visible: isSiteAdmin,
-        //   model: {
-        //     type: MenuItemType.LINK,
-        //     text: 'menu.section.control_panel',
-        //     link: ''
-        //   } as LinkMenuItemModel,
-        //   icon: 'cogs',
-        //   index: 9
-        // },
-
-        /* Processes */
-        {
-          id: 'processes',
-          active: false,
-          visible: isSiteAdmin,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.processes',
-            link: '/processes'
-          } as LinkMenuItemModel,
-          icon: 'terminal',
-          index: 10
-        },
-      ];
-      menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-        shouldPersistOnRouteChange: true
-      })));
-    });
-  }
-
-  /**
-   * Create menu sections dependent on whether or not the current user is a site administrator and on whether or not
-   * the export scripts exist and the current user is allowed to execute them
-   */
-  createExportMenuSections() {
-    const menuList = [
-      /* Export */
-      {
-        id: 'export',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.TEXT,
-          text: 'menu.section.export'
-        } as TextMenuItemModel,
-        icon: 'file-export',
-        index: 3,
-        shouldPersistOnRouteChange: true
-      },
-      // TODO: enable this menu item once the feature has been implemented
-      // {
-      //   id: 'export_community',
-      //   parentID: 'export',
-      //   active: false,
-      //   visible: true,
-      //   model: {
-      //     type: MenuItemType.LINK,
-      //     text: 'menu.section.export_community',
-      //     link: ''
-      //   } as LinkMenuItemModel,
-      //   shouldPersistOnRouteChange: true
-      // },
-      // TODO: enable this menu item once the feature has been implemented
-      // {
-      //   id: 'export_collection',
-      //   parentID: 'export',
-      //   active: false,
-      //   visible: true,
-      //   model: {
-      //     type: MenuItemType.LINK,
-      //     text: 'menu.section.export_collection',
-      //     link: ''
-      //   } as LinkMenuItemModel,
-      //   shouldPersistOnRouteChange: true
-      // },
-      // TODO: enable this menu item once the feature has been implemented
-      // {
-      //   id: 'export_item',
-      //   parentID: 'export',
-      //   active: false,
-      //   visible: true,
-      //   model: {
-      //     type: MenuItemType.LINK,
-      //     text: 'menu.section.export_item',
-      //     link: ''
-      //   } as LinkMenuItemModel,
-      //   shouldPersistOnRouteChange: true
-      // },
-    ];
-    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, menuSection));
-
-    observableCombineLatest(
-      this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
-      // this.scriptDataService.scriptWithNameExistsAndCanExecute(METADATA_EXPORT_SCRIPT_NAME)
-    ).pipe(
-      // TODO uncomment when #635 (https://github.com/DSpace/dspace-angular/issues/635) is fixed; otherwise even in production mode, the metadata export button is only available after a refresh (and not in dev mode)
-      // filter(([authorized, metadataExportScriptExists]: boolean[]) => authorized && metadataExportScriptExists),
-      take(1)
-    ).subscribe(() => {
-      this.menuService.addSection(this.menuID, {
-        id: 'export_metadata',
-        parentID: 'export',
-        active: true,
-        visible: true,
-        model: {
-          type: MenuItemType.ONCLICK,
-          text: 'menu.section.export_metadata',
-          function: () => {
-            this.modalService.open(ExportMetadataSelectorComponent);
-          }
-        } as OnClickMenuItemModel,
-        shouldPersistOnRouteChange: true
-      });
-    });
-  }
-
-  /**
-   * Create menu sections dependent on whether or not the current user is a site administrator and on whether or not
-   * the import scripts exist and the current user is allowed to execute them
-   */
-  createImportMenuSections() {
-    const menuList = [
-      /* Import */
-      {
-        id: 'import',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.TEXT,
-          text: 'menu.section.import'
-        } as TextMenuItemModel,
-        icon: 'file-import',
-        index: 2
-      },
-      // TODO: enable this menu item once the feature has been implemented
-      // {
-      //   id: 'import_batch',
-      //   parentID: 'import',
-      //   active: false,
-      //   visible: true,
-      //   model: {
-      //     type: MenuItemType.LINK,
-      //     text: 'menu.section.import_batch',
-      //     link: ''
-      //   } as LinkMenuItemModel,
-      // }
-    ];
-    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-      shouldPersistOnRouteChange: true
-    })));
-
-    observableCombineLatest(
-      this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
-      // this.scriptDataService.scriptWithNameExistsAndCanExecute(METADATA_IMPORT_SCRIPT_NAME)
-    ).pipe(
-      // TODO uncomment when #635 (https://github.com/DSpace/dspace-angular/issues/635) is fixed
-      // filter(([authorized, metadataImportScriptExists]: boolean[]) => authorized && metadataImportScriptExists),
-      take(1)
-    ).subscribe(() => {
-      this.menuService.addSection(this.menuID, {
-        id: 'import_metadata',
-        parentID: 'import',
-        active: true,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.import_metadata',
-          link: '/admin/metadata-import'
-        } as LinkMenuItemModel,
-        shouldPersistOnRouteChange: true
-      });
-    });
-  }
-
-  /**
-   * Create menu sections dependent on whether or not the current user is a site administrator
-   */
-  createSiteAdministratorMenuSections() {
-    this.authorizationService.isAuthorized(FeatureID.AdministratorOf).subscribe((authorized) => {
-      const menuList = [
-        /*  Admin Search */
-        {
-          id: 'admin_search',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.admin_search',
-            link: '/admin/search'
-          } as LinkMenuItemModel,
-          icon: 'search',
-          index: 5
-        },
-        /*  Registries */
-        {
-          id: 'registries',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.TEXT,
-            text: 'menu.section.registries'
-          } as TextMenuItemModel,
-          icon: 'list',
-          index: 6
-        },
-        {
-          id: 'registries_metadata',
-          parentID: 'registries',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.registries_metadata',
-            link: 'admin/registries/metadata'
-          } as LinkMenuItemModel,
-        },
-        {
-          id: 'registries_format',
-          parentID: 'registries',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.registries_format',
-            link: 'admin/registries/bitstream-formats'
-          } as LinkMenuItemModel,
-        },
-
-        /* Curation tasks */
-        {
-          id: 'curation_tasks',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.curation_task',
-            link: 'admin/curation-tasks'
-          } as LinkMenuItemModel,
-          icon: 'filter',
-          index: 7
-        },
-
-        /* Workflow */
-        {
-          id: 'workflow',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.workflow',
-            link: '/admin/workflow'
-          } as LinkMenuItemModel,
-          icon: 'user-check',
-          index: 11
-        },
-      ];
-
-      menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-        shouldPersistOnRouteChange: true
-      })));
-    });
-  }
-
-  /**
-   * Create menu sections dependent on whether or not the current user can manage access control groups
-   */
-  createAccessControlMenuSections() {
-    observableCombineLatest(
-      this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
-      this.authorizationService.isAuthorized(FeatureID.CanManageGroups)
-    ).subscribe(([isSiteAdmin, canManageGroups]) => {
-      const menuList = [
-        /* Access Control */
-        {
-          id: 'access_control_people',
-          parentID: 'access_control',
-          active: false,
-          visible: isSiteAdmin,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.access_control_people',
-            link: '/access-control/epeople'
-          } as LinkMenuItemModel,
-        },
-        {
-          id: 'access_control_groups',
-          parentID: 'access_control',
-          active: false,
-          visible: canManageGroups,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.access_control_groups',
-            link: '/access-control/groups'
-          } as LinkMenuItemModel,
-        },
-        // TODO: enable this menu item once the feature has been implemented
-        // {
-        //   id: 'access_control_authorizations',
-        //   parentID: 'access_control',
-        //   active: false,
-        //   visible: authorized,
-        //   model: {
-        //     type: MenuItemType.LINK,
-        //     text: 'menu.section.access_control_authorizations',
-        //     link: ''
-        //   } as LinkMenuItemModel,
-        // },
-        {
-          id: 'access_control',
-          active: false,
-          visible: canManageGroups || isSiteAdmin,
-          model: {
-            type: MenuItemType.TEXT,
-            text: 'menu.section.access_control'
-          } as TextMenuItemModel,
-          icon: 'key',
-          index: 4
-        },
-      ];
-
-      menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-        shouldPersistOnRouteChange: true,
-      })));
-    });
-  }
-
  @HostListener('focusin')
  public handleFocusIn() {
    this.inFocus$.next(true);
--- 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
@@ -4,18 +4,18 @@ import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sid
 import { slide } from '../../../shared/animations/slide';
 import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
 import { bgColor } from '../../../shared/animations/bgColor';
-import { MenuID } from '../../../shared/menu/initial-menus-state';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
+import { MenuID } from '../../../shared/menu/menu-id.model';
 import { Router } from '@angular/router';

 /**
 * Represents a expandable section in the sidebar
 */
@Component({
-  /* tslint:disable:component-selector */
+  /* eslint-disable @angular-eslint/component-selector */
  selector: 'li[ds-expandable-admin-sidebar-section]',
  templateUrl: './expandable-admin-sidebar-section.component.html',
  styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/workflow-item-admin-workflow-actions.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/workflow-item-admin-workflow-actions.component.html
@@ -1,7 +1,8 @@
+<div class="space-children-mr">
  <a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.workflow.item.delete' | translate">
    <i class="fa fa-trash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.workflow.item.delete" | translate}}</span>
  </a>
-
  <a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 send-back-link" [routerLink]="[getSendBackRoute()]" [title]="'admin.workflow.item.send-back' | translate">
    <i class="fa fa-hand-point-left"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.workflow.item.send-back" | translate}}</span>
  </a>
+</div>
--- a/src/app/app-routing-paths.ts
+++ b/src/app/app-routing-paths.ts
@@ -70,6 +70,12 @@ export function getWorkflowItemModuleRoute() {
  return `/${WORKFLOW_ITEM_MODULE_PATH}`;
 }

+export const WORKSPACE_ITEM_MODULE_PATH = 'workspaceitems';
+
+export function getWorkspaceItemModuleRoute() {
+  return `/${WORKSPACE_ITEM_MODULE_PATH}`;
+}
+
 export function getDSORoute(dso: DSpaceObject): string {
  if (hasValue(dso)) {
    switch ((dso as any).type) {
@@ -101,6 +107,8 @@ export function getPageInternalServerErrorRoute() {
  return `/${INTERNAL_SERVER_ERROR}`;
 }

+export const ERROR_PAGE = 'error';
+
 export const INFO_MODULE_PATH = 'info';
 export function getInfoModulePath() {
  return `/${INFO_MODULE_PATH}`;
@@ -116,3 +124,5 @@ export const REQUEST_COPY_MODULE_PATH = 'request-a-copy';
 export function getRequestCopyModulePath() {
  return `/${REQUEST_COPY_MODULE_PATH}`;
 }
+
+export const HEALTH_PAGE_PATH = 'health';
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,15 +1,19 @@
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, NoPreloading } from '@angular/router';
 import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';

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

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: INTERNAL_SERVER_ERROR, component: ThemedPageInternalServerErrorComponent },
+      { path: ERROR_PAGE , component: ThemedPageErrorComponent },
      {
        path: '',
        canActivate: [AuthBlockingGuard],
        canActivateChild: [ServerCheckGuard],
+        resolve: [MenuResolver],
        children: [
          { path: '', redirectTo: '/home', pathMatch: 'full' },
          {
@@ -208,6 +220,11 @@ import { ServerCheckGuard } from './core/server-check/server-check.guard';
            loadChildren: () => import('./statistics-page/statistics-page-routing.module')
              .then((m) => m.StatisticsPageRoutingModule)
          },
+          {
+            path: HEALTH_PAGE_PATH,
+            loadChildren: () => import('./health-page/health-page.module')
+              .then((m) => m.HealthPageModule)
+          },
          {
            path: ACCESS_CONTROL_MODULE_PATH,
            loadChildren: () => import('./access-control/access-control.module').then((m) => m.AccessControlModule),
@@ -217,6 +234,12 @@ import { ServerCheckGuard } from './core/server-check/server-check.guard';
        ]
      }
    ], {
+      // enableTracing: true,
+      useHash: false,
+      scrollPositionRestoration: 'enabled',
+      anchorScrolling: 'enabled',
+      initialNavigation: 'enabledBlocking',
+      preloadingStrategy: NoPreloading,
      onSameUrlNavigation: 'reload',
 })
  ],
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -4,7 +4,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+import { Angulartics2GoogleAnalytics } from 'angulartics2';

 // Load the implementations that should be tested
 import { AppComponent } from './app.component';
@@ -187,7 +187,7 @@ describe('App component', () => {
      link.setAttribute('rel', 'stylesheet');
      link.setAttribute('type', 'text/css');
      link.setAttribute('class', 'theme-css');
-      link.setAttribute('href', '/custom-theme.css');
+      link.setAttribute('href', 'custom-theme.css');

      expect(headSpy.appendChild).toHaveBeenCalledWith(link);
    });
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -12,6 +12,7 @@ import {
 } from '@angular/core';
 import {
  ActivatedRouteSnapshot,
+  ActivationEnd,
  NavigationCancel,
  NavigationEnd,
  NavigationStart, ResolveEnd,
@@ -21,9 +22,9 @@ import {
 import { isEqual } from 'lodash';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { select, Store } from '@ngrx/store';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModal, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
-import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+import { Angulartics2GoogleAnalytics } from 'angulartics2';

 import { MetadataService } from './core/metadata/metadata.service';
 import { HostWindowResizeAction } from './shared/host-window.actions';
@@ -48,6 +49,7 @@ import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
 import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
 import { getDefaultThemeConfig } from '../config/config.util';
 import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
+import { ModalBeforeDismiss } from './shared/interfaces/modal-before-dismiss.interface';

@Component({
  selector: 'ds-app',
@@ -72,7 +74,7 @@ export class AppComponent implements OnInit, AfterViewInit {
  /**
   * Whether or not the app is in the process of rerouting
   */
-  isRouteLoading$: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  isRouteLoading$: BehaviorSubject<boolean> = new BehaviorSubject(false);

  /**
   * Whether or not the theme is in the process of being swapped
@@ -105,6 +107,7 @@ export class AppComponent implements OnInit, AfterViewInit {
    private localeService: LocaleService,
    private breadcrumbsService: BreadcrumbsService,
    private modalService: NgbModal,
+    private modalConfig: NgbModalConfig,
    @Optional() private cookiesService: KlaroService,
    @Optional() private googleAnalyticsService: GoogleAnalyticsService,
  ) {
@@ -121,7 +124,7 @@ export class AppComponent implements OnInit, AfterViewInit {
    this.themeService.getThemeName$().subscribe((themeName: string) => {
      if (isPlatformBrowser(this.platformId)) {
        // the theme css will never download server side, so this should only happen on the browser
-        this.isThemeCSSLoading$.next(true);
+        this.distinctNext(this.isThemeCSSLoading$, true);
      }
      if (hasValue(themeName)) {
        this.loadGlobalThemeConfig(themeName);
@@ -165,6 +168,16 @@ export class AppComponent implements OnInit, AfterViewInit {
  }

  ngOnInit() {
+    /** Implement behavior for interface {@link ModalBeforeDismiss} */
+    this.modalConfig.beforeDismiss = async function () {
+      if (typeof this?.componentInstance?.beforeDismiss === 'function') {
+        return this.componentInstance.beforeDismiss();
+      }
+
+      // fall back to default behavior
+      return true;
+    };
+
    this.isAuthBlocking$ = this.store.pipe(select(isAuthenticationBlocking)).pipe(
      distinctUntilChanged()
    );
@@ -196,16 +209,45 @@ export class AppComponent implements OnInit, AfterViewInit {
  }

  ngAfterViewInit() {
-    let resolveEndFound = false;
+    let updatingTheme = false;
+    let snapshot: ActivatedRouteSnapshot;
+
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart) {
-        resolveEndFound = false;
-        this.isRouteLoading$.next(true);
-        this.isThemeLoading$.next(true);
+        updatingTheme = false;
+        this.distinctNext(this.isRouteLoading$, true);
      } else if (event instanceof ResolveEnd) {
-        resolveEndFound = true;
-        const activatedRouteSnapShot: ActivatedRouteSnapshot = event.state.root;
-        this.themeService.updateThemeOnRouteChange$(event.urlAfterRedirects, activatedRouteSnapShot).pipe(
+        // this is the earliest point where we have all the information we need
+        // to update the theme, but this event is not emitted on first load
+        this.updateTheme(event.urlAfterRedirects, event.state.root);
+        updatingTheme = true;
+      } else if (!updatingTheme && event instanceof ActivationEnd) {
+        // if there was no ResolveEnd, keep track of the snapshot...
+        snapshot = event.snapshot;
+      } else if (event instanceof NavigationEnd) {
+        if (!updatingTheme) {
+          // ...and use it to update the theme on NavigationEnd instead
+          this.updateTheme(event.urlAfterRedirects, snapshot);
+          updatingTheme = true;
+        }
+        this.distinctNext(this.isRouteLoading$, false);
+      } else if (event instanceof NavigationCancel) {
+        if (!updatingTheme) {
+          this.distinctNext(this.isThemeLoading$, false);
+        }
+        this.distinctNext(this.isRouteLoading$, false);
+      }
+    });
+  }
+
+  /**
+   * Update the theme according to the current route, if applicable.
+   * @param urlAfterRedirects the current URL after redirects
+   * @param snapshot          the current route snapshot
+   * @private
+   */
+  private updateTheme(urlAfterRedirects: string, snapshot: ActivatedRouteSnapshot): void {
+    this.themeService.updateThemeOnRouteChange$(urlAfterRedirects, snapshot).pipe(
      switchMap((changed) => {
        if (changed) {
          return this.isThemeCSSLoading$;
@@ -214,17 +256,7 @@ export class AppComponent implements OnInit, AfterViewInit {
        }
      })
    ).subscribe((changed) => {
-          this.isThemeLoading$.next(changed);
-        });
-      } else if (
-        event instanceof NavigationEnd ||
-        event instanceof NavigationCancel
-      ) {
-        if (!resolveEndFound) {
-          this.isThemeLoading$.next(false);
-        }
-        this.isRouteLoading$.next(false);
-      }
+      this.distinctNext(this.isThemeLoading$, changed);
    });
  }

@@ -269,7 +301,7 @@ export class AppComponent implements OnInit, AfterViewInit {
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');
    link.setAttribute('class', 'theme-css');
-    link.setAttribute('href', `/${encodeURIComponent(themeName)}-theme.css`);
+    link.setAttribute('href', `${encodeURIComponent(themeName)}-theme.css`);
    // wait for the new css to download before removing the old one to prevent a
    // flash of unstyled content
    link.onload = () => {
@@ -281,7 +313,7 @@ export class AppComponent implements OnInit, AfterViewInit {
        });
      }
      // the fact that this callback is used, proves we're on the browser.
-      this.isThemeCSSLoading$.next(false);
+      this.distinctNext(this.isThemeCSSLoading$, false);
    };
    head.appendChild(link);
  }
@@ -376,4 +408,17 @@ export class AppComponent implements OnInit, AfterViewInit {
        }
      });
  }
+
+  /**
+   * Use nextValue to update a given BehaviorSubject, only if it differs from its current value
+   *
+   * @param bs a BehaviorSubject
+   * @param nextValue the next value for that BehaviorSubject
+   * @protected
+   */
+  protected distinctNext<T>(bs: BehaviorSubject<T>, nextValue: T): void {
+    if (bs.getValue() !== nextValue) {
+      bs.next(nextValue);
+    }
+  }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { APP_BASE_HREF, CommonModule } from '@angular/common';
+import { APP_BASE_HREF, CommonModule, DOCUMENT } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
@@ -8,7 +8,6 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EffectsModule } from '@ngrx/effects';
 import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';
 import { MetaReducer, Store, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import {
  DYNAMIC_ERROR_MESSAGES_MATCHER,
  DYNAMIC_MATCHER_PROVIDERS,
@@ -16,10 +15,6 @@ import {
 } from '@ng-dynamic-forms/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
-
-import { AdminSidebarSectionComponent } from './admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
-import { AdminSidebarComponent } from './admin/admin-sidebar/admin-sidebar.component';
-import { ExpandableAdminSidebarSectionComponent } from './admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { appEffects } from './app.effects';
@@ -28,45 +23,30 @@ import { appReducers, AppState, storeModuleConfig } from './app.reducer';
 import { CheckAuthenticationTokenAction } from './core/auth/auth.actions';
 import { CoreModule } from './core/core.module';
 import { ClientCookieService } from './core/services/client-cookie.service';
-import { FooterComponent } from './footer/footer.component';
-import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component';
-import { HeaderComponent } from './header/header.component';
 import { NavbarModule } from './navbar/navbar.module';
-import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer';
-import { NotificationComponent } from './shared/notifications/notification/notification.component';
-import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component';
 import { SharedModule } from './shared/shared.module';
-import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
 import { environment } from '../environments/environment';
-import { ForbiddenComponent } from './forbidden/forbidden.component';
 import { AuthInterceptor } from './core/auth/auth.interceptor';
 import { LocaleInterceptor } from './core/locale/locale.interceptor';
 import { XsrfInterceptor } from './core/xsrf/xsrf.interceptor';
 import { LogInterceptor } from './core/log/log.interceptor';
-import { RootComponent } from './root/root.component';
-import { ThemedRootComponent } from './root/themed-root.component';
-import { ThemedEntryComponentModule } from '../themes/themed-entry-component.module';
-import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
-import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
-import { ThemedHeaderComponent } from './header/themed-header.component';
-import { ThemedFooterComponent } from './footer/themed-footer.component';
-import { ThemedBreadcrumbsComponent } from './breadcrumbs/themed-breadcrumbs.component';
-import { ThemedHeaderNavbarWrapperComponent } from './header-nav-wrapper/themed-header-navbar-wrapper.component';
-import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
-import { ThemedPageInternalServerErrorComponent } from './page-internal-server-error/themed-page-internal-server-error.component';
-import { PageInternalServerErrorComponent } from './page-internal-server-error/page-internal-server-error.component';
-import { ThemedAdminSidebarComponent } from './admin/admin-sidebar/themed-admin-sidebar.component';
+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';

 export function getConfig() {
  return environment;
 }

-export function getBase(appConfig: AppConfig) {
-  return appConfig.ui.nameSpace;
-}
+const getBaseHref = (document: Document, appConfig: AppConfig): string => {
+  const baseTag = document.querySelector('head > base');
+  baseTag.setAttribute('href', `${appConfig.ui.nameSpace}${appConfig.ui.nameSpace.endsWith('/') ? '' : '/'}`);
+  return baseTag.getAttribute('href');
+};

 export function getMetaReducers(appConfig: AppConfig): MetaReducer<AppState>[] {
  return appConfig.debug ? [...appMetaReducers, ...debugMetaReducers] : appMetaReducers;
@@ -90,19 +70,15 @@ const IMPORTS = [
  ScrollToModule.forRoot(),
  NgbModule,
  TranslateModule.forRoot(),
+  NgxMaskModule.forRoot(),
  EffectsModule.forRoot(appEffects),
  StoreModule.forRoot(appReducers, storeModuleConfig),
  StoreRouterConnectingModule.forRoot(),
-  ThemedEntryComponentModule.withEntryComponents(),
+  StoreDevModules,
+  EagerThemesModule,
+  RootModule,
 ];

-IMPORTS.push(
-  StoreDevtoolsModule.instrument({
-    maxAge: 1000,
-    logOnly: environment.production,
-  })
-);
-
 const PROVIDERS = [
  {
    provide: APP_CONFIG,
@@ -110,8 +86,8 @@ const PROVIDERS = [
  },
  {
    provide: APP_BASE_HREF,
-    useFactory: getBase,
-    deps: [APP_CONFIG]
+    useFactory: getBaseHref,
+    deps: [DOCUMENT, APP_CONFIG]
  },
  {
    provide: USER_PROVIDED_META_REDUCERS,
@@ -165,29 +141,6 @@ const PROVIDERS = [

 const DECLARATIONS = [
  AppComponent,
-  RootComponent,
-  ThemedRootComponent,
-  HeaderComponent,
-  ThemedHeaderComponent,
-  HeaderNavbarWrapperComponent,
-  ThemedHeaderNavbarWrapperComponent,
-  AdminSidebarComponent,
-  ThemedAdminSidebarComponent,
-  AdminSidebarSectionComponent,
-  ExpandableAdminSidebarSectionComponent,
-  FooterComponent,
-  ThemedFooterComponent,
-  PageNotFoundComponent,
-  ThemedPageNotFoundComponent,
-  NotificationComponent,
-  NotificationsBoardComponent,
-  BreadcrumbsComponent,
-  ThemedBreadcrumbsComponent,
-  ForbiddenComponent,
-  ThemedForbiddenComponent,
-  IdleModalComponent,
-  ThemedPageInternalServerErrorComponent,
-  PageInternalServerErrorComponent
 ];

 const EXPORTS = [
--- a/src/app/app.reducer.ts
+++ b/src/app/app.reducer.ts
@@ -22,7 +22,7 @@ import {
  nameVariantReducer
 } from './shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/name-variant.reducer';
 import { formReducer, FormState } from './shared/form/form.reducer';
-import { menusReducer, MenusState } from './shared/menu/menu.reducer';
+import { menusReducer} from './shared/menu/menu.reducer';
 import {
  notificationsReducer,
  NotificationsState
@@ -49,6 +49,7 @@ import {
 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';

 export interface AppState {
--- a/src/app/bitstream-page/bitstream-page-routing.module.ts
+++ b/src/app/bitstream-page/bitstream-page-routing.module.ts
@@ -10,6 +10,9 @@ import { ResourcePolicyResolver } from '../shared/resource-policies/resolvers/re
 import { ResourcePolicyEditComponent } from '../shared/resource-policies/edit/resource-policy-edit.component';
 import { BitstreamAuthorizationsComponent } from './bitstream-authorizations/bitstream-authorizations.component';
 import { LegacyBitstreamUrlResolver } from './legacy-bitstream-url.resolver';
+import { BitstreamBreadcrumbResolver } from '../core/breadcrumbs/bitstream-breadcrumb.resolver';
+import { BitstreamBreadcrumbsService } from '../core/breadcrumbs/bitstream-breadcrumbs.service';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';

 const EDIT_BITSTREAM_PATH = ':id/edit';
 const EDIT_BITSTREAM_AUTHORIZATIONS_PATH = ':id/authorizations';
@@ -48,7 +51,8 @@ const EDIT_BITSTREAM_AUTHORIZATIONS_PATH = ':id/authorizations';
        path: EDIT_BITSTREAM_PATH,
        component: EditBitstreamPageComponent,
        resolve: {
-          bitstream: BitstreamPageResolver
+          bitstream: BitstreamPageResolver,
+          breadcrumb: BitstreamBreadcrumbResolver,
        },
        canActivate: [AuthenticatedGuard]
      },
@@ -67,15 +71,17 @@ const EDIT_BITSTREAM_AUTHORIZATIONS_PATH = ':id/authorizations';
          {
            path: 'edit',
            resolve: {
+              breadcrumb: I18nBreadcrumbResolver,
              resourcePolicy: ResourcePolicyResolver
            },
            component: ResourcePolicyEditComponent,
-            data: { title: 'resource-policies.edit.page.title', showBreadcrumbs: true }
+            data: { breadcrumbKey: 'item.edit', title: 'resource-policies.edit.page.title', showBreadcrumbs: true }
          },
          {
            path: '',
            resolve: {
-              bitstream: BitstreamPageResolver
+              bitstream: BitstreamPageResolver,
+              breadcrumb: BitstreamBreadcrumbResolver,
            },
            component: BitstreamAuthorizationsComponent,
            data: { title: 'bitstream.edit.authorizations.title', showBreadcrumbs: true }
@@ -86,6 +92,8 @@ const EDIT_BITSTREAM_AUTHORIZATIONS_PATH = ':id/authorizations';
  ],
  providers: [
    BitstreamPageResolver,
+    BitstreamBreadcrumbResolver,
+    BitstreamBreadcrumbsService
  ]
 })
 export class BitstreamPageRoutingModule {
--- a/src/app/bitstream-page/bitstream-page.resolver.ts
+++ b/src/app/bitstream-page/bitstream-page.resolver.ts
@@ -7,6 +7,15 @@ import { BitstreamDataService } from '../core/data/bitstream-data.service';
 import { followLink, FollowLinkConfig } from '../shared/utils/follow-link-config.model';
 import { getFirstCompletedRemoteData } from '../core/shared/operators';

+/**
+ * The self links defined in this list are expected to be requested somewhere in the near future
+ * Requesting them as embeds will limit the number of requests
+ */
+ export const BITSTREAM_PAGE_LINKS_TO_FOLLOW: FollowLinkConfig<Bitstream>[] = [
+  followLink('bundle', {}, followLink('item')),
+  followLink('format')
+];
+
 /**
 * This class represents a resolver that requests a specific bitstream before the route is activated
 */
@@ -34,9 +43,6 @@ export class BitstreamPageResolver implements Resolve<RemoteData<Bitstream>> {
     * Requesting them as embeds will limit the number of requests
     */
    get followLinks(): FollowLinkConfig<Bitstream>[] {
-        return [
-            followLink('bundle', {}, followLink('item')),
-            followLink('format')
-        ];
+      return BITSTREAM_PAGE_LINKS_TO_FOLLOW;
    }
 }
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
@@ -27,7 +27,7 @@
      </div>
    </div>
    <ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error>
-    <ds-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
-                message="{{'loading.bitstream' | translate}}"></ds-loading>
+    <ds-themed-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
+                message="{{'loading.bitstream' | translate}}"></ds-themed-loading>
  </div>
 </ng-container>
--- a/src/app/bitstream-page/legacy-bitstream-url.resolver.spec.ts
+++ b/src/app/bitstream-page/legacy-bitstream-url.resolver.spec.ts
@@ -2,8 +2,8 @@ import { LegacyBitstreamUrlResolver } from './legacy-bitstream-url.resolver';
 import { of as observableOf, EMPTY } from 'rxjs';
 import { BitstreamDataService } from '../core/data/bitstream-data.service';
 import { RemoteData } from '../core/data/remote-data';
-import { RequestEntryState } from '../core/data/request.reducer';
 import { TestScheduler } from 'rxjs/testing';
+import { RequestEntryState } from '../core/data/request-entry-state.model';

 describe(`LegacyBitstreamUrlResolver`, () => {
  let resolver: LegacyBitstreamUrlResolver;
--- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts
@@ -20,9 +20,9 @@ import { VarDirective } from '../../shared/utils/var.directive';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { FindListOptions } from '../../core/data/request.models';
 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('BrowseByDatePageComponent', () => {
  let comp: BrowseByDatePageComponent;
--- 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
@@ -24,7 +24,13 @@
    <section class="comcol-page-browse-section">
    <div class="browse-by-metadata w-100">
    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
-      title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + browseId | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
+      title="{{'browse.title' | translate:
+      {
+        collection: (parent$ | async)?.payload?.name || '',
+        field: 'browse.metadata.' + browseId | translate,
+        startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
+        value: (value)? '&quot;' + value + '&quot;': ''
+      } }}"
      parentname="{{(parent$ | async)?.payload?.name || ''}}"
      [objects$]="(items$ !== undefined)? items$ : browseEntries$"
      [paginationConfig]="(currentPagination$ |async)"
@@ -34,7 +40,7 @@
      (prev)="goPrev()"
      (next)="goNext()">
    </ds-browse-by>
-    <ds-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-loading>
+    <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
  </div>
  </section>
  <ng-container *ngVar="(parent$ | async) as parent">
--- 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
@@ -19,6 +19,8 @@ import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';

+export const BBM_PAGINATION_ID = 'bbm';
+
@Component({
  selector: 'ds-browse-by-metadata-page',
  styleUrls: ['./browse-by-metadata-page.component.scss'],
@@ -51,7 +53,7 @@ export class BrowseByMetadataPageComponent implements OnInit {
   * The pagination config used to display the values
   */
  paginationConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: 'bbm',
+    id: BBM_PAGINATION_ID,
    currentPage: 1,
    pageSize: environment.browseBy.pageSize,
  });
@@ -128,10 +130,10 @@ export class BrowseByMetadataPageComponent implements OnInit {
          return [Object.assign({}, routeParams, queryParams),currentPage,currentSort];
        })
      ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
-          this.browseId = params.id || this.defaultBrowseId;
+          this.browseId = params.id || this.defaultBrowseId;
          this.authority = params.authority;
-          this.value = +params.value || params.value || '';
-          this.startsWith = +params.startsWith || params.startsWith;
+          this.value = +params.value || params.value || '';
+          this.startsWith = +params.startsWith || params.startsWith;
          const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId);
          if (isNotEmpty(this.value)) {
            this.updatePageWithItems(searchOptions, this.value, this.authority);
--- a/src/app/browse-by/browse-by-routing.module.ts
+++ b/src/app/browse-by/browse-by-routing.module.ts
@@ -17,7 +17,7 @@ import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-bro
            component: ThemedBrowseBySwitcherComponent,
            canActivate: [BrowseByGuard],
            resolve: { breadcrumb: BrowseByI18nBreadcrumbResolver },
-            data: { title: 'browse.title', breadcrumbKey: 'browse.metadata' }
+            data: { title: 'browse.title.page', breadcrumbKey: 'browse.metadata' }
          }
        ]
      }])
--- a/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
@@ -1,6 +1,10 @@
 import { hasNoValue } from '../../shared/empty.util';
 import { InjectionToken } from '@angular/core';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import {
+  DEFAULT_THEME,
+  resolveTheme
+} from '../../shared/object-collection/shared/listable-object/listable-object.decorator';

 export enum BrowseByDataType {
  Title = 'title',
@@ -10,7 +14,7 @@ export enum BrowseByDataType {

 export const DEFAULT_BROWSE_BY_TYPE = BrowseByDataType.Metadata;

-export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType) => GenericConstructor<any>>('getComponentByBrowseByType', {
+export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType, theme) => GenericConstructor<any>>('getComponentByBrowseByType', {
  providedIn: 'root',
  factory: () => getComponentByBrowseByType
 });
@@ -20,13 +24,17 @@ const map = new Map();
 /**
 * Decorator used for rendering Browse-By pages by type
 * @param browseByType  The type of page
+ * @param theme The optional theme for the component
 */
-export function rendersBrowseBy(browseByType: BrowseByDataType) {
+export function rendersBrowseBy(browseByType: BrowseByDataType, theme = DEFAULT_THEME) {
  return function decorator(component: any) {
    if (hasNoValue(map.get(browseByType))) {
-      map.set(browseByType, component);
+      map.set(browseByType, new Map());
+    }
+    if (hasNoValue(map.get(browseByType).get(theme))) {
+      map.get(browseByType).set(theme, component);
    } else {
-      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}"`);
+      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}" and theme "${theme}"`);
    }
  };
 }
@@ -34,11 +42,16 @@ export function rendersBrowseBy(browseByType: BrowseByDataType) {
 /**
 * Get the component used for rendering a Browse-By page by type
 * @param browseByType  The type of page
+ * @param theme the theme to match
 */
-export function getComponentByBrowseByType(browseByType) {
-  const comp = map.get(browseByType);
+export function getComponentByBrowseByType(browseByType, theme) {
+  let themeMap = map.get(browseByType);
+  if (hasNoValue(themeMap)) {
+    themeMap = map.get(DEFAULT_BROWSE_BY_TYPE);
+  }
+  const comp = resolveTheme(themeMap, theme);
  if (hasNoValue(comp)) {
-    map.get(DEFAULT_BROWSE_BY_TYPE);
+    return themeMap.get(DEFAULT_THEME);
  }
  return comp;
 }
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
@@ -4,7 +4,8 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BROWSE_BY_COMPONENT_FACTORY, BrowseByDataType } from './browse-by-decorator';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
-import { BehaviorSubject, of as observableOf } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+import { ThemeService } from '../../shared/theme-support/theme.service';

 describe('BrowseBySwitcherComponent', () => {
  let comp: BrowseBySwitcherComponent;
@@ -44,11 +45,20 @@ describe('BrowseBySwitcherComponent', () => {
    data
  };

+  let themeService: ThemeService;
+  let themeName: string;
+
  beforeEach(waitForAsync(() => {
+    themeName = 'dspace';
+    themeService = jasmine.createSpyObj('themeService', {
+      getThemeName: themeName,
+    });
+
    TestBed.configureTestingModule({
      declarations: [BrowseBySwitcherComponent],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: ThemeService, useValue: themeService },
        { provide: BROWSE_BY_COMPONENT_FACTORY, useValue: jasmine.createSpy('getComponentByBrowseByType').and.returnValue(null) }
      ],
      schemas: [NO_ERRORS_SCHEMA]
@@ -68,7 +78,7 @@ describe('BrowseBySwitcherComponent', () => {
      });

      it(`should call getComponentByBrowseByType with type "${type.dataType}"`, () => {
-        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.dataType);
+        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.dataType, themeName);
      });
    });
  });
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
@@ -5,6 +5,7 @@ import { map } from 'rxjs/operators';
 import { BROWSE_BY_COMPONENT_FACTORY } from './browse-by-decorator';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { ThemeService } from '../../shared/theme-support/theme.service';

@Component({
  selector: 'ds-browse-by-switcher',
@@ -21,7 +22,8 @@ export class BrowseBySwitcherComponent implements OnInit {
  browseByComponent: Observable<any>;

  public constructor(protected route: ActivatedRoute,
-                     @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType) => GenericConstructor<any>) {
+                     protected themeService: ThemeService,
+                     @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
  }

  /**
@@ -29,7 +31,7 @@ export class BrowseBySwitcherComponent implements OnInit {
   */
  ngOnInit(): void {
    this.browseByComponent = this.route.data.pipe(
-      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.dataType))
+      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.dataType, this.themeService.getThemeName()))
    );
  }

--- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts
@@ -20,9 +20,9 @@ import { VarDirective } from '../../shared/utils/var.directive';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { FindListOptions } from '../../core/data/request.models';
 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('BrowseByTitlePageComponent', () => {
  let comp: BrowseByTitlePageComponent;
--- 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
@@ -45,7 +45,8 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
          return [Object.assign({}, routeParams, queryParams),currentPage,currentSort];
        })
      ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
-        this.browseId = params.id || this.defaultBrowseId;
+        this.startsWith = +params.startsWith || params.startsWith;
+        this.browseId = params.id || this.defaultBrowseId;
        this.updatePageWithItems(browseParamsToOptions(params, currentPage, currentSort, this.browseId), undefined, undefined);
        this.updateParent(params.scope);
      }));
--- 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 { EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, 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,6 +41,12 @@ 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 { SearchConfigurationServiceStub } from '../../shared/testing/search-configuration-service.stub';
+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 { ConfigurationProperty } from '../../core/shared/configuration-property.model';

 describe('CollectionItemMapperComponent', () => {
  let comp: CollectionItemMapperComponent;
@@ -110,15 +116,15 @@ describe('CollectionItemMapperComponent', () => {
  };
  const searchServiceStub = Object.assign(new SearchServiceStub(), {
    search: () => observableOf(emptyList),
-    /* tslint:disable:no-empty */
+    /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
    clearDiscoveryRequests: () => {}
-    /* tslint:enable:no-empty */
+    /* eslint-enable no-empty,@typescript-eslint/no-empty-function */
  });
  const collectionDataServiceStub = {
    getMappedItems: () => observableOf(emptyList),
-    /* tslint:disable:no-empty */
+    /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
    clearMappedItemsRequests: () => {}
-    /* tslint:enable:no-empty */
+    /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
  };
  const routeServiceStub = {
    getRouteParameterValue: () => {
@@ -141,6 +147,25 @@ describe('CollectionItemMapperComponent', () => {
    isAuthorized: observableOf(true)
  });

+  const linkHeadService = jasmine.createSpyObj('linkHeadService', {
+    addTag: ''
+  });
+
+  const groupDataService = jasmine.createSpyObj('groupsDataService', {
+    findAllByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
+    getGroupRegistryRouterLink: '',
+    getUUIDFromString: '',
+  });
+
+  const configurationDataService = jasmine.createSpyObj('configurationDataService', {
+    findByPropertyName: createSuccessfulRemoteDataObject$(Object.assign(new ConfigurationProperty(), {
+      name: 'test',
+      values: [
+        'org.dspace.ctask.general.ProfileFormats = test'
+      ]
+    }))
+  });
+
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
@@ -157,8 +182,19 @@ describe('CollectionItemMapperComponent', () => {
        { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
        { provide: ObjectSelectService, useValue: new ObjectSelectServiceStub() },
        { provide: RouteService, useValue: routeServiceStub },
-        { provide: AuthorizationDataService, useValue: authorizationDataService }
+        { provide: AuthorizationDataService, useValue: authorizationDataService },
+        { provide: GroupDataService, useValue: groupDataService },
+        { provide: LinkHeadService, useValue: linkHeadService },
+        { provide: ConfigurationDataService, useValue: configurationDataService },
      ]
+    }).overrideComponent(CollectionItemMapperComponent, {
+      set: {
+        providers: [
+          {
+            provide: SEARCH_CONFIG_SERVICE,
+            useClass: SearchConfigurationServiceStub
+          }
+        ] }
    }).compileComponents();
  }));

--- a/src/app/collection-page/collection-page-routing.module.ts
+++ b/src/app/collection-page/collection-page-routing.module.ts
@@ -6,7 +6,7 @@ import { CreateCollectionPageComponent } from './create-collection-page/create-c
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 import { CreateCollectionPageGuard } from './create-collection-page/create-collection-page.guard';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
-import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { ItemTemplatePageResolver } from './edit-item-template-page/item-template-page.resolver';
 import { CollectionBreadcrumbResolver } from '../core/breadcrumbs/collection-breadcrumb.resolver';
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
@@ -18,9 +18,9 @@ import {
  COLLECTION_CREATE_PATH
 } from './collection-page-routing-paths';
 import { CollectionPageAdministratorGuard } from './collection-page-administrator.guard';
-import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { ThemedCollectionPageComponent } from './themed-collection-page.component';
+import { MenuItemType } from '../shared/menu/menu-item-type.model';

@NgModule({
  imports: [
@@ -52,7 +52,7 @@ import { ThemedCollectionPageComponent } from './themed-collection-page.componen
          },
          {
            path: ITEMTEMPLATE_PATH,
-            component: EditItemTemplatePageComponent,
+            component: ThemedEditItemTemplatePageComponent,
            canActivate: [AuthenticatedGuard],
            resolve: {
              item: ItemTemplatePageResolver,
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -13,7 +13,6 @@
                  <!-- Collection logo -->
                  <ds-comcol-page-logo *ngIf="logoRD$"
                                   [logo]="(logoRD$ | async)?.payload"
-                                   [alternateText]="'Collection Logo'"
                                   [alternateText]="'Collection Logo'">
                  </ds-comcol-page-logo>

@@ -34,7 +33,7 @@
                          [title]="'collection.page.news'">
                  </ds-comcol-page-content>
                </header>
-                <div class="pl-2">
+                <div class="pl-2 space-children-mr">
                  <ds-dso-page-edit-button *ngIf="isCollectionAdmin$ | async"  [pageRoute]="collectionPageRoute$ | async" [dso]="collection" [tooltipMsg]="'collection.page.edit'"></ds-dso-page-edit-button>
                </div>
              </div>
@@ -57,8 +56,8 @@
                </div>
                <ds-error *ngIf="itemRD?.hasFailed"
                          message="{{'error.recent-submissions' | translate}}"></ds-error>
-                <ds-loading *ngIf="!itemRD || itemRD.isLoading"
-                            message="{{'loading.recent-submissions' | translate}}"></ds-loading>
+                <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
+                            message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
                <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
                        {{'collection.page.browse.recent.empty' | translate}}
                </div>
@@ -75,7 +74,7 @@
    </div>
        <ds-error *ngIf="collectionRD?.hasFailed"
            message="{{'error.collection' | translate}}"></ds-error>
-        <ds-loading *ngIf="collectionRD?.isLoading"
-            message="{{'loading.collection' | translate}}"></ds-loading>
+        <ds-themed-loading *ngIf="collectionRD?.isLoading"
+            message="{{'loading.collection' | translate}}"></ds-themed-loading>
  </div>
 </div>
--- a/src/app/collection-page/collection-page.component.ts
+++ b/src/app/collection-page/collection-page.component.ts
@@ -16,7 +16,6 @@ import { Item } from '../core/shared/item.model';
 import {
  getAllSucceededRemoteDataPayload,
  getFirstSucceededRemoteData,
-  redirectOn4xx,
  toDSpaceObjectListRD
 } from '../core/shared/operators';

@@ -28,6 +27,7 @@ import { PaginationService } from '../core/pagination/pagination.service';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCollectionPageRoute } from './collection-page-routing-paths';
+import { redirectOn4xx } from '../core/shared/authorized.operators';

@Component({
  selector: 'ds-collection-page',
--- a/src/app/collection-page/collection-page.module.ts
+++ b/src/app/collection-page/collection-page.module.ts
@@ -8,6 +8,7 @@ import { CollectionPageRoutingModule } from './collection-page-routing.module';
 import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { EditItemPageModule } from '../item-page/edit-item-page/edit-item-page.module';
 import { CollectionItemMapperComponent } from './collection-item-mapper/collection-item-mapper.component';
 import { SearchService } from '../core/shared/search/search.service';
@@ -32,6 +33,7 @@ import { ComcolModule } from '../shared/comcol/comcol.module';
    CreateCollectionPageComponent,
    DeleteCollectionPageComponent,
    EditItemTemplatePageComponent,
+    ThemedEditItemTemplatePageComponent,
    CollectionItemMapperComponent
  ],
  providers: [
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
@@ -5,11 +5,11 @@
                <h2 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h2>
                <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dso.name } }}</p>
                <div class="form-group row">
-                  <div class="col text-right">
+                  <div class="col text-right space-children-mr">
                    <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
                      <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
                    </button>
-                    <button class="btn btn-danger mr-2" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                    <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
                      <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'collection.delete.processing' | translate}}</span>
                      <span *ngIf="!(processing$ | async)"><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
                    </button>
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts
@@ -5,7 +5,6 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { CollectionDataService } from '../../core/data/collection-data.service';
 import { Collection } from '../../core/shared/collection.model';
 import { TranslateService } from '@ngx-translate/core';
-import { RequestService } from '../../core/data/request.service';

 /**
 * Component that represents the page where a user can delete an existing Collection
@@ -24,8 +23,7 @@ export class DeleteCollectionPageComponent extends DeleteComColPageComponent<Col
    protected route: ActivatedRoute,
    protected notifications: NotificationsService,
    protected translate: TranslateService,
-    protected requestService: RequestService
  ) {
-    super(dsoDataService, router, route, notifications, translate, requestService);
+    super(dsoDataService, router, route, notifications, translate);
  }
 }
--- a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
@@ -1,6 +1,6 @@
 <div class="container-fluid mb-2" *ngVar="(itemTemplateRD$ | async) as itemTemplateRD">
  <label>{{ 'collection.edit.template.label' | translate}}</label>
-  <div class="button-row">
+  <div class="button-row space-children-mr">
    <button *ngIf="!itemTemplateRD?.payload" class="btn btn-success" (click)="addItemTemplate()">
      <i class="fas fa-plus"></i>
      <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.add-button" | translate}}</span>
--- a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
@@ -12,7 +12,6 @@ import { NotificationsService } from '../../../shared/notifications/notification
 import { Item } from '../../../core/shared/item.model';
 import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
 import { Collection } from '../../../core/shared/collection.model';
-import { ObjectCacheService } from '../../../core/cache/object-cache.service';
 import { RequestService } from '../../../core/data/request.service';
 import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { getCollectionItemTemplateRoute } from '../../collection-page-routing-paths';
@@ -49,9 +48,6 @@ describe('CollectionMetadataComponent', () => {
    success: {},
    error: {}
  });
-  const objectCache = jasmine.createSpyObj('objectCache', {
-    remove: {}
-  });
  const requestService = jasmine.createSpyObj('requestService', {
    setStaleByHrefSubstring: {}
  });
@@ -65,8 +61,7 @@ describe('CollectionMetadataComponent', () => {
        { provide: ItemTemplateDataService, useValue: itemTemplateServiceStub },
        { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } },
        { provide: NotificationsService, useValue: notificationsService },
-        { provide: ObjectCacheService, useValue: objectCache },
-        { provide: RequestService, useValue: requestService }
+        { provide: RequestService, useValue: requestService },
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
@@ -95,20 +90,18 @@ describe('CollectionMetadataComponent', () => {
  });

  describe('deleteItemTemplate', () => {
-    describe('when delete returns a success', () => {
    beforeEach(() => {
      (itemTemplateService.deleteByCollectionID as jasmine.Spy).and.returnValue(observableOf(true));
      comp.deleteItemTemplate();
    });

-      it('should display a success notification', () => {
-        expect(notificationsService.success).toHaveBeenCalled();
+    it('should call ItemTemplateService.deleteByCollectionID', () => {
+      expect(itemTemplateService.deleteByCollectionID).toHaveBeenCalledWith(template, 'collection-id');
    });

-      it('should reset related object and request cache', () => {
-        expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith(collectionTemplateHref);
-        expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith(template.self);
-        expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith(collection.self);
+    describe('when delete returns a success', () => {
+      it('should display a success notification', () => {
+        expect(notificationsService.success).toHaveBeenCalled();
      });
    });

--- a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
@@ -8,10 +8,9 @@ import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { Item } from '../../../core/shared/item.model';
 import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
-import { switchMap, tap } from 'rxjs/operators';
+import { switchMap } from 'rxjs/operators';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
-import { ObjectCacheService } from '../../../core/cache/object-cache.service';
 import { RequestService } from '../../../core/data/request.service';
 import { getCollectionItemTemplateRoute } from '../../collection-page-routing-paths';

@@ -38,8 +37,7 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
    protected route: ActivatedRoute,
    protected notificationsService: NotificationsService,
    protected translate: TranslateService,
-    protected objectCache: ObjectCacheService,
-    protected requestService: RequestService
+    protected requestService: RequestService,
  ) {
    super(collectionDataService, router, route, notificationsService, translate);
  }
@@ -93,23 +91,9 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
        getFirstSucceededRemoteDataPayload(),
      )),
    );
-    const templateHref$ = collection$.pipe(
-      switchMap((collection) => this.itemTemplateService.getCollectionEndpoint(collection.id)),
-    );
-
-    combineLatestObservable(collection$, template$, templateHref$).pipe(
-      switchMap(([collection, template, templateHref]) => {
-        return this.itemTemplateService.deleteByCollectionID(template, collection.uuid).pipe(
-          tap((success: boolean) => {
-            if (success) {
-              this.objectCache.remove(templateHref);
-              this.objectCache.remove(template.self);
-              this.requestService.setStaleByHrefSubstring(template.self);
-              this.requestService.setStaleByHrefSubstring(templateHref);
-              this.requestService.setStaleByHrefSubstring(collection.self);
-            }
-          })
-        );
+    combineLatestObservable(collection$, template$).pipe(
+      switchMap(([collection, template]) => {
+        return this.itemTemplateService.deleteByCollectionID(template, collection.uuid);
      })
    ).subscribe((success: boolean) => {
      if (success) {
--- a/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts
@@ -13,6 +13,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ComcolModule } from '../../../shared/comcol/comcol.module';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';

 describe('CollectionRolesComponent', () => {

@@ -79,6 +81,7 @@ describe('CollectionRolesComponent', () => {
        { provide: ActivatedRoute, useValue: route },
        { provide: RequestService, useValue: requestService },
        { provide: GroupDataService, useValue: groupDataService },
+        { provide: NotificationsService, useClass: NotificationsServiceStub }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
--- 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
@@ -1,5 +1,5 @@
 <div *ngVar="(contentSource$ |async) as contentSource">
-    <div class="container-fluid" *ngIf="shouldShow">
+    <div class="container-fluid space-children-mr" *ngIf="shouldShow">
        <h4>{{ 'collection.source.controls.head' | translate }}</h4>
        <div>
            <span class="font-weight-bold">{{'collection.source.controls.harvest.status' | translate}}</span>
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -1,5 +1,5 @@
 <div class="container-fluid">
-    <div class="d-inline-block float-right">
+    <div class="d-inline-block float-right space-children-mr">
        <button class=" btn btn-danger" *ngIf="!(isReinstatable() | async)"
                [disabled]="!(hasChanges() | async)"
                (click)="discard()"><i
@@ -25,7 +25,7 @@
        <label class="form-check-label"
               for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}</label>
    </div>
-    <ds-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-loading>
+    <ds-themed-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-themed-loading>
    <h4 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{ 'collection.edit.tabs.source.form.head' | translate }}</h4>
 </div>
 <div class="row">
@@ -43,7 +43,7 @@
 <div class="container mt-2" *ngIf="(contentSource?.harvestType !== harvestTypeNone)">
    <div class="row">
        <div class="col-12">
-            <div class="d-inline-block float-right ml-1">
+            <div class="d-inline-block float-right ml-1 space-children-mr">
                <button class=" btn btn-danger" *ngIf="!(isReinstatable() | async)"
                        [disabled]="!(hasChanges() | async)"
                        (click)="discard()"><i
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.spec.ts
@@ -9,7 +9,6 @@ import { ContentSource, ContentSourceHarvestType } from '../../../core/shared/co
 import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
 import { INotification, Notification } from '../../../shared/notifications/models/notification.model';
 import { NotificationType } from '../../../shared/notifications/models/notification-type';
-import { FieldUpdate } from '../../../core/data/object-updates/object-updates.reducer';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { DynamicFormControlModel, DynamicFormService } from '@ng-dynamic-forms/core';
 import { hasValue } from '../../../shared/empty.util';
@@ -20,6 +19,7 @@ import { Collection } from '../../../core/shared/collection.model';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
 import { RequestService } from '../../../core/data/request.service';
 import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { FieldUpdate } from '../../../core/data/object-updates/field-update.model';

 const infoNotification: INotification = new Notification('id', NotificationType.Info, 'info');
 const warningNotification: INotification = new Notification('id', NotificationType.Warning, 'warning');
--- 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
@@ -23,7 +23,6 @@ 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 { FieldUpdate, FieldUpdates } from '../../../core/data/object-updates/object-updates.reducer';
 import { cloneDeep } from 'lodash';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
 import { getFirstSucceededRemoteData, getFirstCompletedRemoteData } from '../../../core/shared/operators';
@@ -31,6 +30,8 @@ import { MetadataConfig } from '../../../core/shared/metadata-config.model';
 import { INotification } from '../../../shared/notifications/models/notification.model';
 import { RequestService } from '../../../core/data/request.service';
 import { environment } from '../../../../environments/environment';
+import { FieldUpdate } from '../../../core/data/object-updates/field-update.model';
+import { FieldUpdates } from '../../../core/data/object-updates/field-updates.model';

 /**
 * Component for managing the content source of the collection
--- 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,10 +3,10 @@
    <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-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-item-metadata>
+        <ds-themed-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-themed-item-metadata>
        <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
      </ng-container>
-      <ds-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-loading>
+      <ds-themed-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-themed-loading>
      <ds-alert *ngIf="itemRD?.hasFailed" [type]="AlertTypeEnum.Error" [content]="'collection.edit.template.error' | translate"></ds-alert>
    </div>
  </div>
--- a/src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts
+++ b/src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { EditItemTemplatePageComponent } from './edit-item-template-page.component';
+
+@Component({
+  selector: 'ds-themed-edit-item-template-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+/**
+ * Component for editing the item template of a collection
+ */
+export class ThemedEditItemTemplatePageComponent extends ThemedComponent<EditItemTemplatePageComponent> {
+  protected getComponentName(): string {
+    return 'EditItemTemplatePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/collection-page/edit-item-template-page/edit-item-template-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./edit-item-template-page.component');
+  }
+}
--- a/src/app/collection-page/themed-collection-page.component.ts
+++ b/src/app/collection-page/themed-collection-page.component.ts
@@ -6,7 +6,7 @@ import { CollectionPageComponent } from './collection-page.component';
 * Themed wrapper for CollectionPageComponent
 */
@Component({
-  selector: 'ds-themed-community-page',
+  selector: 'ds-themed-collection-page',
  styleUrls: [],
  templateUrl: '../shared/theme-support/themed.component.html',
 })
--- a/src/app/community-list-page/community-list-datasource.ts
+++ b/src/app/community-list-page/community-list-datasource.ts
@@ -1,9 +1,10 @@
-import { FindListOptions } from '../core/data/request.models';
 import { hasValue } from '../shared/empty.util';
-import { CommunityListService, FlatNode } from './community-list-service';
+import { CommunityListService} from './community-list-service';
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { finalize } from 'rxjs/operators';
+import { FlatNode } from './flat-node.model';
+import { FindListOptions } from '../core/data/find-list-options.model';

 /**
 * DataSource object needed by a CDK Tree to render its nodes.
--- a/src/app/community-list-page/community-list-service.spec.ts
+++ b/src/app/community-list-page/community-list-service.spec.ts
@@ -7,13 +7,14 @@ import { SortDirection, SortOptions } from '../core/cache/models/sort-options.mo
 import { buildPaginatedList } from '../core/data/paginated-list.model';
 import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
 import { StoreMock } from '../shared/testing/store.mock';
-import { CommunityListService, FlatNode, toFlatNode } from './community-list-service';
+import { CommunityListService, toFlatNode } from './community-list-service';
 import { CollectionDataService } from '../core/data/collection-data.service';
 import { CommunityDataService } from '../core/data/community-data.service';
 import { Community } from '../core/shared/community.model';
 import { Collection } from '../core/shared/collection.model';
-import { FindListOptions } from '../core/data/request.models';
 import { PageInfo } from '../core/shared/page-info.model';
+import { FlatNode } from './flat-node.model';
+import { FindListOptions } from '../core/data/find-list-options.model';

 describe('CommunityListService', () => {
  let store: StoreMock<AppState>;
--- a/src/app/community-list-page/community-list-service.ts
+++ b/src/app/community-list-page/community-list-service.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Injectable } from '@angular/core';
 import { createSelector, Store } from '@ngrx/store';

@@ -6,45 +7,22 @@ import { filter, map, switchMap } from 'rxjs/operators';

 import { AppState } from '../app.reducer';
 import { CommunityDataService } from '../core/data/community-data.service';
-import { FindListOptions } from '../core/data/request.models';
 import { Community } from '../core/shared/community.model';
 import { Collection } from '../core/shared/collection.model';
 import { PageInfo } from '../core/shared/page-info.model';
 import { hasValue, isNotEmpty } from '../shared/empty.util';
 import { RemoteData } from '../core/data/remote-data';
-import { PaginatedList, buildPaginatedList } from '../core/data/paginated-list.model';
+import { buildPaginatedList, PaginatedList } from '../core/data/paginated-list.model';
 import { CollectionDataService } from '../core/data/collection-data.service';
 import { CommunityListSaveAction } from './community-list.actions';
 import { CommunityListState } from './community-list.reducer';
 import { getCommunityPageRoute } from '../community-page/community-page-routing-paths';
 import { getCollectionPageRoute } from '../collection-page/collection-page-routing-paths';
-import { getFirstSucceededRemoteData, getFirstCompletedRemoteData } from '../core/shared/operators';
+import { getFirstCompletedRemoteData, getFirstSucceededRemoteData } from '../core/shared/operators';
 import { followLink } from '../shared/utils/follow-link-config.model';
-
-/**
- * Each node in the tree is represented by a flatNode which contains info about the node itself and its position and
- *  state in the tree. There are nodes representing communities, collections and show more links.
- */
-export interface FlatNode {
-  isExpandable$: Observable<boolean>;
-  name: string;
-  id: string;
-  level: number;
-  isExpanded?: boolean;
-  parent?: FlatNode;
-  payload: Community | Collection | ShowMoreFlatNode;
-  isShowMoreNode: boolean;
-  route?: string;
-  currentCommunityPage?: number;
-  currentCollectionPage?: number;
-}
-
-/**
- * The show more links in the community tree are also represented by a flatNode so we know where in
- *  the tree it should be rendered an who its parent is (needed for the action resulting in clicking this link)
- */
-export class ShowMoreFlatNode {
-}
+import { FlatNode } from './flat-node.model';
+import { ShowMoreFlatNode } from './show-more-flat-node.model';
+import { FindListOptions } from '../core/data/find-list-options.model';

 // Helper method to combine an flatten an array of observables of flatNode arrays
 export const combineAndFlatten = (obsList: Observable<FlatNode[]>[]): Observable<FlatNode[]> =>
@@ -108,7 +86,6 @@ export const MAX_COMCOLS_PER_PAGE = 20;
 * Service class for the community list, responsible for the creating of the flat list used by communityList dataSource
 *  and connection to the store to retrieve and save the state of the community list
 */
-// tslint:disable-next-line:max-classes-per-file
@Injectable()
 export class CommunityListService {

--- a/src/app/community-list-page/community-list.actions.ts
+++ b/src/app/community-list-page/community-list.actions.ts
@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 import { type } from '../shared/ngrx/type';
-import { FlatNode } from './community-list-service';
+import { FlatNode } from './flat-node.model';

 /**
 * All the action types of the community-list
--- a/src/app/community-list-page/community-list.reducer.ts
+++ b/src/app/community-list-page/community-list.reducer.ts
@@ -1,5 +1,5 @@
-import { FlatNode } from './community-list-service';
 import { CommunityListActions, CommunityListActionTypes, CommunityListSaveAction } from './community-list.actions';
+import { FlatNode } from './flat-node.model';

 /**
 * States we wish to put in store concerning the community list
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -1,4 +1,4 @@
-<ds-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-loading"></ds-loading>
+<ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading>
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for show more node -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
@@ -8,11 +8,11 @@
        <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
      </button>
      <div class="align-middle pt-2">
-        <a *ngIf="node!==loadingNode" [routerLink]="" (click)="getNextPage(node)"
+        <a *ngIf="node!==loadingNode" [routerLink]="[]" (click)="getNextPage(node)"
           class="btn btn-outline-primary btn-sm" role="button">
           <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
        </a>
-        <ds-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-loading"></ds-loading>
+        <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
      </div>
    </div>
    <div class="text-muted" cdkTreeNodePadding>
@@ -57,7 +57,7 @@
        <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
              aria-hidden="true"></span>
      </button>
-      <ds-loading class="ds-loading"></ds-loading>
+      <ds-themed-loading class="ds-themed-loading"></ds-themed-loading>
    </div>
  </cdk-tree-node>
  <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->
--- a/src/app/community-list-page/community-list/community-list.component.spec.ts
+++ b/src/app/community-list-page/community-list/community-list.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';

 import { CommunityListComponent } from './community-list.component';
-import { CommunityListService, FlatNode, showMoreFlatNode, toFlatNode } from '../community-list-service';
+import { CommunityListService, showMoreFlatNode, toFlatNode } from '../community-list-service';
 import { CdkTreeModule } from '@angular/cdk/tree';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
@@ -15,6 +15,7 @@ import { Collection } from '../../core/shared/collection.model';
 import { of as observableOf } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { isEmpty, isNotEmpty } from '../../shared/empty.util';
+import { FlatNode } from '../flat-node.model';

 describe('CommunityListComponent', () => {
  let component: CommunityListComponent;
--- a/src/app/community-list-page/community-list/community-list.component.ts
+++ b/src/app/community-list-page/community-list/community-list.component.ts
@@ -1,11 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { FindListOptions } from '../../core/data/request.models';
-import { CommunityListService, FlatNode } from '../community-list-service';
+import { CommunityListService} from '../community-list-service';
 import { CommunityListDatasource } from '../community-list-datasource';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { isEmpty } from '../../shared/empty.util';
+import { FlatNode } from '../flat-node.model';
+import { FindListOptions } from '../../core/data/find-list-options.model';

 /**
 * A tree-structured list of nodes representing the communities, their subCommunities and collections.
--- a/src/app/community-list-page/community-list/themed-community-list.component.ts
+++ b/src/app/community-list-page/community-list/themed-community-list.component.ts
@@ -7,7 +7,8 @@ import { Component } from '@angular/core';
  selector: 'ds-themed-community-list',
  styleUrls: [],
  templateUrl: '../../shared/theme-support/themed.component.html',
-})export class ThemedCommunityListComponent extends ThemedComponent<CommunityListComponent> {
+})
+export class ThemedCommunityListComponent extends ThemedComponent<CommunityListComponent> {
  protected getComponentName(): string {
    return 'CommunityListComponent';
  }
--- a/src/app/community-list-page/flat-node.model.ts
+++ b/src/app/community-list-page/flat-node.model.ts
@@ -0,0 +1,22 @@
+import { Observable } from 'rxjs';
+import { Community } from '../core/shared/community.model';
+import { Collection } from '../core/shared/collection.model';
+import { ShowMoreFlatNode } from './show-more-flat-node.model';
+
+/**
+ * Each node in the tree is represented by a flatNode which contains info about the node itself and its position and
+ *  state in the tree. There are nodes representing communities, collections and show more links.
+ */
+export interface FlatNode {
+  isExpandable$: Observable<boolean>;
+  name: string;
+  id: string;
+  level: number;
+  isExpanded?: boolean;
+  parent?: FlatNode;
+  payload: Community | Collection | ShowMoreFlatNode;
+  isShowMoreNode: boolean;
+  route?: string;
+  currentCommunityPage?: number;
+  currentCollectionPage?: number;
+}
--- a/src/app/community-list-page/show-more-flat-node.model.ts
+++ b/src/app/community-list-page/show-more-flat-node.model.ts
@@ -0,0 +1,6 @@
+/**
+ * The show more links in the community tree are also represented by a flatNode so we know where in
+ *  the tree it should be rendered an who its parent is (needed for the action resulting in clicking this link)
+ */
+export class ShowMoreFlatNode {
+}
--- a/Show More
+++ b/Show More