Merge pull request #4724 from im-shubham-vish/fix-9814-backport-8x

[Port dspace-8_x] Fix for #8916 #8917 #8918 to 8.x: The Community Administrator should not be able to view all communities/collections in the create/edit community and collection sections (Previous PR #9814 #4639)

.eslintrc.json

@@ -12,7 +12,6 @@
     "eslint-plugin-rxjs",
     "eslint-plugin-simple-import-sort",
     "eslint-plugin-import-newlines",
-    "eslint-plugin-jsonc",
     "dspace-angular-ts",
     "dspace-angular-html"
   ],
@@ -165,6 +164,7 @@
         "@angular-eslint/no-output-native": "warn",
         "@angular-eslint/no-output-on-prefix": "warn",
         "@angular-eslint/no-conflicting-lifecycle": "warn",
+        "@angular-eslint/use-lifecycle-interface": "error",
 
         "@typescript-eslint/no-inferrable-types":[
           "error",
@@ -292,7 +292,8 @@
       ],
       "rules": {
         // Custom DSpace Angular rules
-        "dspace-angular-html/themed-component-usages": "error"
+        "dspace-angular-html/themed-component-usages": "error",
+        "dspace-angular-html/no-disabled-attribute-on-button": "error"
       }
     },
     {
@@ -300,10 +301,13 @@
         "*.json5"
       ],
       "extends": [
-        "plugin:jsonc/recommended-with-jsonc"
+        "plugin:jsonc/recommended-with-json5"
       ],
       "rules": {
-        "no-irregular-whitespace": "error",
+        // The ESLint core no-irregular-whitespace rule doesn't work well in JSON
+        // See: https://ota-meshi.github.io/eslint-plugin-jsonc/rules/no-irregular-whitespace.html
+        "no-irregular-whitespace": "off",
+        "jsonc/no-irregular-whitespace": "error",
         "no-trailing-spaces": "error",
         "jsonc/comma-dangle": [
           "error",

.github/workflows/build.yml

@@ -7,7 +7,8 @@ name: Build
 on: [push, pull_request]
 
 permissions:
-  contents: read  #  to fetch code (actions/checkout)
+  contents: read  # to fetch code (actions/checkout)
+  packages: read  # to fetch private images from GitHub Container Registry (GHCR)
 
 jobs:
   tests:
@@ -28,6 +29,8 @@ jobs:
       DSPACE_CACHE_SERVERSIDE_ANONYMOUSCACHE_MAX: 0
       # Tell Cypress to run e2e tests using the same UI URL
       CYPRESS_BASE_URL: http://127.0.0.1:4000
+      # Disable the cookie consent banner in e2e tests to avoid errors because of elements hidden by it
+      DSPACE_INFO_ENABLECOOKIECONSENTPOPUP: false
       # When Chrome version is specified, we pin to a specific version of Chrome
       # Comment this out to use the latest release
       #CHROME_VERSION: "90.0.4430.212-1"
@@ -35,6 +38,9 @@ jobs:
       NODE_OPTIONS: '--max-old-space-size=4096'
       # Project name to use when running "docker compose" prior to e2e tests
       COMPOSE_PROJECT_NAME: 'ci'
+      # Docker Registry to use for Docker compose scripts below.
+      # We use GitHub's Container Registry to avoid aggressive rate limits at DockerHub.
+      DOCKER_REGISTRY: ghcr.io
     strategy:
       # Create a matrix of Node versions to test against (in parallel)
       matrix:
@@ -114,6 +120,14 @@ jobs:
           path: 'coverage/dspace-angular/lcov.info'
           retention-days: 14
 
+      # Login to our Docker registry, so that we can access private Docker images using "docker compose" below.
+      - name: Login to ${{ env.DOCKER_REGISTRY }}
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.DOCKER_REGISTRY }}
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
       # Using "docker compose" start backend using CI configuration
       # and load assetstore from a cached copy
       - name: Start DSpace REST Backend via Docker (for e2e tests)
@@ -178,12 +192,115 @@ jobs:
       # Get homepage and verify that the <meta name="title"> tag includes "DSpace".
       # If it does, then SSR is working, as this tag is created by our MetadataService.
       # This step also prints entire HTML of homepage for easier debugging if grep fails.
-      - name: Verify SSR (server-side rendering)
+      - name: Verify SSR (server-side rendering) on Homepage
         run: |
           result=$(wget -O- -q http://127.0.0.1:4000/home)
           echo "$result"
           echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep DSpace
 
+      # Get a specific community in our test data and verify that the "<h1>" tag includes "Publications" (the community name).
+      # If it does, then SSR is working.
+      - name: Verify SSR on a Community page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/communities/0958c910-2037-42a9-81c7-dca80e3892b4)
+          echo "$result"
+          echo "$result" | grep -oE "<h1 [^>]*>[^><]*</h1>" | grep Publications
+
+      # Get a specific collection in our test data and verify that the "<h1>" tag includes "Articles" (the collection name).
+      # If it does, then SSR is working.
+      - name: Verify SSR on a Collection page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/collections/282164f5-d325-4740-8dd1-fa4d6d3e7200)
+          echo "$result"
+          echo "$result" | grep -oE "<h1 [^>]*>[^><]*</h1>" | grep Articles
+
+      # Get a specific publication in our test data and verify that the <meta name="title"> tag includes
+      # the title of this publication. If it does, then SSR is working.
+      - name: Verify SSR on a Publication page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/publication/6160810f-1e53-40db-81ef-f6621a727398)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "An Economic Model of Mortality Salience"
+
+      # Get a specific person in our test data and verify that the <meta name="title"> tag includes
+      # the name of the person. If it does, then SSR is working.
+      - name: Verify SSR on a Person page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/person/b1b2c768-bda1-448a-a073-fc541e8b24d9)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Simmons, Cameron"
+
+      # Get a specific project in our test data and verify that the <meta name="title"> tag includes
+      # the name of the project. If it does, then SSR is working.
+      - name: Verify SSR on a Project page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/project/46ccb608-a74c-4bf6-bc7a-e29cc7defea9)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "University Research Fellowship"
+
+      # Get a specific orgunit in our test data and verify that the <meta name="title"> tag includes
+      # the name of the orgunit. If it does, then SSR is working.
+      - name: Verify SSR on an OrgUnit page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/orgunit/9851674d-bd9a-467b-8d84-068deb568ccf)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Law and Development"
+
+      # Get a specific journal in our test data and verify that the <meta name="title"> tag includes
+      # the name of the journal. If it does, then SSR is working.
+      - name: Verify SSR on a Journal page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/journal/d4af6c3e-53d0-4757-81eb-566f3b45d63a)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Environmental &amp; Architectural Phenomenology"
+
+      # Get a specific journal volume in our test data and verify that the <meta name="title"> tag includes
+      # the name of the volume. If it does, then SSR is working.
+      - name: Verify SSR on a Journal Volume page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/journalvolume/07c6249f-4bf7-494d-9ce3-6ffdb2aed538)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Environmental &amp; Architectural Phenomenology Volume 28 (2017)"
+
+      # Get a specific journal issue in our test data and verify that the <meta name="title"> tag includes
+      # the name of the issue. If it does, then SSR is working.
+      - name: Verify SSR on a Journal Issue page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/journalissue/44c29473-5de2-48fa-b005-e5029aa1a50b)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Environmental &amp; Architectural Phenomenology Vol. 28, No. 1"
+
+      # Verify 301 Handle redirect behavior
+      # Note: /handle/123456789/260 is the same test Publication used by our e2e tests
+      - name: Verify 301 redirect from '/handle' URLs
+        run: |
+          result=$(wget --server-response --quiet http://127.0.0.1:4000/handle/123456789/260 2>&1 | head -1 | awk '{print $2}')
+          echo "$result"
+          [[ "$result" -eq "301" ]]
+
+      # Verify 403 error code behavior
+      - name: Verify 403 error code from '/403'
+        run: |
+          result=$(wget --server-response --quiet http://127.0.0.1:4000/403 2>&1 | head -1 | awk '{print $2}')
+          echo "$result"
+          [[ "$result" -eq "403" ]]
+
+      # Verify 404 error code behavior
+      - name: Verify 404 error code from '/404' and on invalid pages
+        run: |
+          result=$(wget --server-response --quiet http://127.0.0.1:4000/404 2>&1 | head -1 | awk '{print $2}')
+          echo "$result"
+          result2=$(wget --server-response --quiet http://127.0.0.1:4000/invalidurl 2>&1 | head -1 | awk '{print $2}')
+          echo "$result2"
+          [[ "$result" -eq "404" && "$result2" -eq "404" ]]
+
+      # Verify 500 error code behavior
+      - name: Verify 500 error code from '/500'
+        run: |
+          result=$(wget --server-response --quiet http://127.0.0.1:4000/500 2>&1 | head -1 | awk '{print $2}')
+          echo "$result"
+          [[ "$result" -eq "500" ]]
+
       - name: Stop running app
         run: kill -9 $(lsof -t -i:4000)
 

.github/workflows/codescan.yml

@@ -40,14 +40,14 @@ jobs:
       # Initializes the CodeQL tools for scanning.
       # https://github.com/github/codeql-action
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: javascript
 
       # Autobuild attempts to build any compiled languages
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       # Perform GitHub Code Scanning.
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

.github/workflows/docker.yml

@@ -16,7 +16,8 @@ on:
   pull_request:
 
 permissions:
-  contents: read  #  to fetch code (actions/checkout)
+  contents: read  # to fetch code (actions/checkout)
+  packages: write # to write images to GitHub Container Registry (GHCR)
 
 jobs:
   #############################################################

Dockerfile

@@ -1,7 +1,7 @@
 # This image will be published as dspace/dspace-angular
 # See https://github.com/DSpace/dspace-angular/tree/main/docker for usage details
 
-FROM node:18-alpine
+FROM docker.io/node:18-alpine
 
 # Ensure Python and other build tools are available
 # These are needed to install some node modules, especially on linux/arm64
@@ -24,5 +24,5 @@ ENV NODE_OPTIONS="--max_old_space_size=4096"
 # 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 URL. See https://github.com/DSpace/dspace-angular/issues/1485
-ENV NODE_ENV development
+ENV NODE_ENV=development
 CMD yarn serve --host 0.0.0.0

Dockerfile.dist

@@ -2,9 +2,9 @@
 # See https://github.com/DSpace/dspace-angular/tree/main/docker for usage details
 
 # Test build:
-# docker build -f Dockerfile.dist -t dspace/dspace-angular:latest-dist .
+# docker build -f Dockerfile.dist -t dspace/dspace-angular:dspace-8_x-dist .
 
-FROM node:18-alpine as build
+FROM docker.io/node:18-alpine AS build
 
 # Ensure Python and other build tools are available
 # These are needed to install some node modules, especially on linux/arm64
@@ -26,6 +26,6 @@ COPY --chown=node:node docker/dspace-ui.json /app/dspace-ui.json
 
 WORKDIR /app
 USER node
-ENV NODE_ENV production
+ENV NODE_ENV=production
 EXPOSE 4000
 CMD pm2-runtime start dspace-ui.json --json

README.md

@@ -35,7 +35,7 @@ https://wiki.lyrasis.org/display/DSDOC7x/Installing+DSpace
 Quick start
 -----------
 
-**Ensure you're running [Node](https://nodejs.org) `v16.x` or `v18.x`, [npm](https://www.npmjs.com/) >= `v5.x` and [yarn](https://yarnpkg.com) == `v1.x`**
+**Ensure you're running [Node](https://nodejs.org) `v18.x` or `v20.x`, [npm](https://www.npmjs.com/) >= `v10.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 `v16.x` or `v18.x` and yarn == `v1.x`
+-	Ensure you're running node `v18.x` or `v20.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.
 

angular.json

@@ -30,7 +30,6 @@
               "lodash",
               "jwt-decode",
               "uuid",
-              "webfontloader",
               "zone.js"
             ],
             "outputPath": "dist/browser",

config/config.example.yml

@@ -1,7 +1,7 @@
 # NOTE: will log all redux actions and transfers in console
 debug: false
 
-# Angular Universal server settings
+# Angular User Inteface settings
 # 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:
@@ -17,12 +17,51 @@ ui:
   # Trust X-FORWARDED-* headers from proxies (default = true)
   useProxies: true
 
-universal:
-  # Whether to inline "critical" styles into the server-side rendered HTML.
-  # Determining which styles are critical is a relatively expensive operation;
-  # this option can be disabled to boost server performance at the expense of
-  # loading smoothness.
-  inlineCriticalCss: true
+# Angular Server Side Rendering (SSR) settings
+ssr:
+  # Whether to tell Angular to inline "critical" styles into the server-side rendered HTML.
+  # Determining which styles are critical is a relatively expensive operation; this option is
+  # disabled (false) by default to boost server performance at the expense of loading smoothness.
+  inlineCriticalCss: false
+  # Patterns to be run as regexes against the path of the page to check if SSR is allowed.
+  # If the path match any of the regexes it will be served directly in CSR.
+  # By default, excludes community and collection browse, global browse, global search, community list, statistics and various administrative tools.
+  excludePathPatterns:
+    - pattern: "^/communities/[a-f0-9-]{36}/browse(/.*)?$"
+      flag: "i"
+    - pattern: "^/collections/[a-f0-9-]{36}/browse(/.*)?$"
+      flag: "i"
+    - pattern: "^/browse/"
+    - pattern: "^/search$"
+    - pattern: "^/community-list$"
+    - pattern: "^/admin/"
+    - pattern: "^/processes/?"
+    - pattern: "^/notifications/"
+    - pattern: "^/statistics/?"
+    - pattern: "^/access-control/"
+    - pattern: "^/health$"
+
+  # Whether to enable rendering of Search component on SSR.
+  # If set to true the component will be included in the HTML returned from the server side rendering.
+  # If set to false the component will not be included in the HTML returned from the server side rendering.
+  enableSearchComponent: false
+  # Whether to enable rendering of Browse component on SSR.
+  # If set to true the component will be included in the HTML returned from the server side rendering.
+  # If set to false the component will not be included in the HTML returned from the server side rendering.
+  enableBrowseComponent: false
+  # Enable state transfer from the server-side application to the client-side application.
+  # Defaults to true.
+  # Note: When using an external application cache layer, it's recommended not to transfer the state to avoid caching it.
+  # Disabling it ensures that dynamic state information is not inadvertently cached, which can improve security and
+  # ensure that users always use the most up-to-date state.
+  transferState: true
+  # When a different REST base URL is used for the server-side application, the generated state contains references to
+  # REST resources with the internal URL configured. By default, these internal URLs are replaced with public URLs.
+  # Disable this setting to avoid URL replacement during SSR. In this the state is not transferred to avoid security issues.
+  replaceRestUrl: true
+  # Enable request performance profiling data collection and printing the results in the server console.
+  # Defaults to false. Enabling in production is NOT recommended
+  #enablePerformanceProfiler: false
 
 # The REST API server settings
 # NOTE: these settings define which (publicly available) REST API to use. They are usually
@@ -33,6 +72,9 @@ rest:
   port: 443
   # NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
   nameSpace: /server
+  # Provide a different REST url to be used during SSR execution. It must contain the whole url including protocol, server port and
+  # server namespace (uncomment to use it).
+  #ssrBaseUrl: http://localhost:8080/server
 
 # Caching settings
 cache:
@@ -325,12 +367,20 @@ item:
 
 # Community Page Config
 community:
+  # Default tab to be shown when browsing a Community. Valid values are: comcols, search, or browse_<field>
+  # <field> must be any of the configured "browse by" fields, e.g., dateissued, author, title, or subject
+  # When the default tab is not the 'search' tab, the search tab is moved to the last position
+  defaultBrowseTab: search
   # Search tab config
   searchSection:
     showSidebar: true
 
 # Collection Page Config
 collection:
+  # Default tab to be shown when browsing a Collection. Valid values are: search, or browse_<field>
+  # <field> must be any of the configured "browse by" fields, e.g., dateissued, author, title, or subject
+  # When the default tab is not the 'search' tab, the search tab is moved to the last position
+  defaultBrowseTab: search
   # Search tab config
   searchSection:
     showSidebar: true
@@ -448,6 +498,12 @@ search:
     enabled: false
     # List of filters to enable in "Advanced Search" dropdown
     filter: [ 'title', 'author', 'subject', 'entityType' ]
+  #
+  # Number used to render n UI elements called loading skeletons that act as placeholders.
+  # These elements indicate that some content will be loaded in their stead.
+  # Since we don't know how many filters will be loaded before we receive a response from the server we use this parameter for the skeletons count.
+  # e.g. If we set 5 then 5 loading skeletons will be visualized before the actual filters are retrieved.
+  defaultFiltersCount: 5
 
 
 # Notify metrics
@@ -503,6 +559,21 @@ notifyMetrics:
     description: 'admin-notify-dashboard.NOTIFY.outgoing.delivered.description'
 
 
+# Live Region configuration
+# Live Region as defined by w3c, https://www.w3.org/TR/wai-aria-1.1/#terms:
+# Live regions are perceivable regions of a web page that are typically updated as a
+# result of an external event when user focus may be elsewhere.
+#
+# The DSpace live region is a component present at the bottom of all pages that is invisible by default, but is useful
+# for screen readers. Any message pushed to the live region will be announced by the screen reader. These messages
+# usually contain information about changes on the page that might not be in focus.
+liveRegion:
+  # The duration after which messages disappear from the live region in milliseconds
+  messageTimeOutDurationMs: 30000
+  # The visibility of the live region. Setting this to true is only useful for debugging purposes.
+  isVisible: false
 
-
-
+# Configuration for storing accessibility settings, used by the AccessibilitySettingsService
+accessibility:
+  # The duration in days after which the accessibility settings cookie expires
+  cookieExpirationDuration: 7

cypress.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
+  video: true,
   videosFolder: 'cypress/videos',
   screenshotsFolder: 'cypress/screenshots',
   fixturesFolder: 'cypress/fixtures',
@@ -18,6 +19,7 @@ export default defineConfig({
 
     // Admin account used for administrative tests
     DSPACE_TEST_ADMIN_USER: 'dspacedemo+admin@gmail.com',
+    DSPACE_TEST_ADMIN_USER_UUID: '335647b6-8a52-4ecb-a8c1-7ebabb199bda',
     DSPACE_TEST_ADMIN_PASSWORD: 'dspace',
     // Community/collection/publication used for view/edit tests
     DSPACE_TEST_COMMUNITY: '0958c910-2037-42a9-81c7-dca80e3892b4',
@@ -33,6 +35,8 @@ export default defineConfig({
     // Account used to test basic submission process
     DSPACE_TEST_SUBMIT_USER: 'dspacedemo+submit@gmail.com',
     DSPACE_TEST_SUBMIT_USER_PASSWORD: 'dspace',
+    // Administrator users group
+    DSPACE_ADMINISTRATOR_GROUP: 'e59f5659-bff9-451e-b28f-439e7bd467e4'
   },
   e2e: {
     // Setup our plugins for e2e tests

cypress/e2e/admin-add-new-modals.cy.ts

@@ -0,0 +1,54 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Admin Add New Modals', () => {
+  beforeEach(() => {
+    // Must login as an Admin for sidebar to appear
+    cy.visit('/login');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('Add new Community modal should pass accessibility tests', () => {
+    // Pin the sidebar open
+    cy.get('#sidebar-collapse-toggle').trigger('mouseover');
+    cy.get('#sidebar-collapse-toggle').click();
+
+    // Click on entry of menu
+    cy.get('#admin-menu-section-new-title').should('be.visible');
+    cy.get('#admin-menu-section-new-title').click();
+
+    cy.get('a[data-test="menu.section.new_community"]').click();
+
+    // Analyze <ds-create-community-parent-selector> for accessibility
+    testA11y('ds-create-community-parent-selector');
+  });
+
+  it('Add new Collection modal should pass accessibility tests', () => {
+    // Pin the sidebar open
+    cy.get('#sidebar-collapse-toggle').trigger('mouseover');
+    cy.get('#sidebar-collapse-toggle').click();
+
+    // Click on entry of menu
+    cy.get('#admin-menu-section-new-title').should('be.visible');
+    cy.get('#admin-menu-section-new-title').click();
+
+    cy.get('a[data-test="menu.section.new_collection"]').click();
+
+    // Analyze <ds-create-collection-parent-selector> for accessibility
+    testA11y('ds-create-collection-parent-selector');
+  });
+
+  it('Add new Item modal should pass accessibility tests', () => {
+    // Pin the sidebar open
+    cy.get('#sidebar-collapse-toggle').trigger('mouseover');
+    cy.get('#sidebar-collapse-toggle').click();
+
+    // Click on entry of menu
+    cy.get('#admin-menu-section-new-title').should('be.visible');
+    cy.get('#admin-menu-section-new-title').click();
+
+    cy.get('a[data-test="menu.section.new_item"]').click();
+
+    // Analyze <ds-create-item-parent-selector> for accessibility
+    testA11y('ds-create-item-parent-selector');
+  });
+});

cypress/e2e/admin-curation-tasks.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Admin Curation Tasks', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/admin/curation-tasks');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Page must first be visible
+    cy.get('ds-admin-curation-task').should('be.visible');
+    // Analyze <ds-admin-curation-task> for accessibility issues
+    testA11y('ds-admin-curation-task');
+  });
+});

cypress/e2e/admin-edit-modals.cy.ts

@@ -0,0 +1,54 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Admin Edit Modals', () => {
+  beforeEach(() => {
+    // Must login as an Admin for sidebar to appear
+    cy.visit('/login');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('Edit Community modal should pass accessibility tests', () => {
+    // Pin the sidebar open
+    cy.get('#sidebar-collapse-toggle').trigger('mouseover');
+    cy.get('#sidebar-collapse-toggle').click();
+
+    // Click on entry of menu
+    cy.get('#admin-menu-section-edit-title').should('be.visible');
+    cy.get('#admin-menu-section-edit-title').click();
+
+    cy.get('a[data-test="menu.section.edit_community"]').click();
+
+    // Analyze <ds-edit-community-selector> for accessibility
+    testA11y('ds-edit-community-selector');
+  });
+
+  it('Edit Collection modal should pass accessibility tests', () => {
+    // Pin the sidebar open
+    cy.get('#sidebar-collapse-toggle').trigger('mouseover');
+    cy.get('#sidebar-collapse-toggle').click();
+
+    // Click on entry of menu
+    cy.get('#admin-menu-section-edit-title').should('be.visible');
+    cy.get('#admin-menu-section-edit-title').click();
+
+    cy.get('a[data-test="menu.section.edit_collection"]').click();
+
+    // Analyze <ds-edit-collection-selector> for accessibility
+    testA11y('ds-edit-collection-selector');
+  });
+
+  it('Edit Item modal should pass accessibility tests', () => {
+    // Pin the sidebar open
+    cy.get('#sidebar-collapse-toggle').trigger('mouseover');
+    cy.get('#sidebar-collapse-toggle').click();
+
+    // Click on entry of menu
+    cy.get('#admin-menu-section-edit-title').should('be.visible');
+    cy.get('#admin-menu-section-edit-title').click();
+
+    cy.get('a[data-test="menu.section.edit_item"]').click();
+
+    // Analyze <ds-edit-item-selector> for accessibility
+    testA11y('ds-edit-item-selector');
+  });
+});

cypress/e2e/admin-export-modals.cy.ts

@@ -0,0 +1,39 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Admin Export Modals', () => {
+  beforeEach(() => {
+    // Must login as an Admin for sidebar to appear
+    cy.visit('/login');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('Export metadata modal should pass accessibility tests', () => {
+    // Pin the sidebar open
+    cy.get('#sidebar-collapse-toggle').trigger('mouseover');
+    cy.get('#sidebar-collapse-toggle').click();
+
+    // Click on entry of menu
+    cy.get('#admin-menu-section-export-title').should('be.visible');
+    cy.get('#admin-menu-section-export-title').click();
+
+    cy.get('a[data-test="menu.section.export_metadata"]').click();
+
+    // Analyze <ds-export-metadata-selector> for accessibility
+    testA11y('ds-export-metadata-selector');
+  });
+
+  it('Export batch modal should pass accessibility tests', () => {
+    // Pin the sidebar open
+    cy.get('#sidebar-collapse-toggle').trigger('mouseover');
+    cy.get('#sidebar-collapse-toggle').click();
+
+    // Click on entry of menu
+    cy.get('#admin-menu-section-export-title').should('be.visible');
+    cy.get('#admin-menu-section-export-title').click();
+
+    cy.get('a[data-test="menu.section.export_batch"]').click();
+
+    // Analyze <ds-export-batch-selector> for accessibility
+    testA11y('ds-export-batch-selector');
+  });
+});

cypress/e2e/admin-notifications-publication-claim-page.cy.ts

@@ -0,0 +1,17 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Admin Notifications Publication Claim Page', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/admin/notifications/publication-claim');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+
+    //Page must first be visible
+    cy.get('ds-admin-notifications-publication-claim-page').should('be.visible');
+    // Analyze <ds-admin-notifications-publication-claim-page> for accessibility issues
+    testA11y('ds-admin-notifications-publication-claim-page');
+  });
+});

cypress/e2e/admin-search-page.cy.ts

@@ -0,0 +1,21 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Admin Search Page', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/admin/search');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    //Page must first be visible
+    cy.get('ds-admin-search-page').should('be.visible');
+    // At least one search result should be displayed
+    cy.get('[data-test="list-object"]').should('be.visible');
+    // Click each filter toggle to open *every* filter
+    // (As we want to scan filter section for accessibility issues as well)
+    cy.get('[data-test="filter-toggle"]').click({ multiple: true });
+    // Analyze <ds-admin-search-page> for accessibility issues
+    testA11y('ds-admin-search-page');
+  });
+});

cypress/e2e/admin-workflow-page.cy.ts

@@ -0,0 +1,21 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Admin Workflow Page', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/admin/workflow');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Page must first be visible
+    cy.get('ds-admin-workflow-page').should('be.visible');
+    // At least one search result should be displayed
+    cy.get('[data-test="list-object"]').should('be.visible');
+    // Click each filter toggle to open *every* filter
+    // (As we want to scan filter section for accessibility issues as well)
+    cy.get('[data-test="filter-toggle"]').click({ multiple: true });
+    // Analyze <ds-admin-workflow-page> for accessibility issues
+    testA11y('ds-admin-workflow-page');
+  });
+});

cypress/e2e/batch-import-page.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Batch Import Page', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see processes
+    cy.visit('/admin/batch-import');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Batch import form must first be visible
+    cy.get('ds-batch-import-page').should('be.visible');
+    // Analyze <ds-batch-import-page> for accessibility issues
+    testA11y('ds-batch-import-page');
+  });
+});

cypress/e2e/bitstreams-format.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Bitstreams Formats', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/admin/registries/bitstream-formats');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Page must first be visible
+    cy.get('ds-bitstream-formats').should('be.visible');
+    // Analyze <ds-bitstream-formats> for accessibility issues
+    testA11y('ds-bitstream-formats');
+  });
+});

cypress/e2e/bulk-access.cy.ts

@@ -0,0 +1,31 @@
+import { testA11y } from 'cypress/support/utils';
+import { Options } from 'cypress-axe';
+
+describe('Bulk Access', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/access-control/bulk-access');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Page must first be visible
+    cy.get('ds-bulk-access').should('be.visible');
+    // At least one search result should be displayed
+    cy.get('[data-test="list-object"]').should('be.visible');
+    // Click each filter toggle to open *every* filter
+    // (As we want to scan filter section for accessibility issues as well)
+    cy.get('[data-test="filter-toggle"]').click({ multiple: true });
+    // Analyze <ds-bulk-access> for accessibility issues
+    testA11y('ds-bulk-access', {
+      rules: {
+        // All panels are accordians & fail "aria-required-children" and "nested-interactive".
+        // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216
+        'aria-required-children': { enabled: false },
+        'nested-interactive': { enabled: false },
+        // Card titles fail this test currently
+        'heading-order': { enabled: false },
+      },
+    } as Options);
+  });
+});

cypress/e2e/create-eperson.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Create Eperson', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/access-control/epeople/create');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Form must first be visible
+    cy.get('ds-eperson-form').should('be.visible');
+    // Analyze <ds-eperson-form> for accessibility issues
+    testA11y('ds-eperson-form');
+  });
+});

cypress/e2e/create-group.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Create Group', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/access-control/groups/create');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Form must first be visible
+    cy.get('ds-group-form').should('be.visible');
+    // Analyze <ds-group-form> for accessibility issues
+    testA11y('ds-group-form');
+  });
+});

cypress/e2e/edit-eperson.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Edit Eperson', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/access-control/epeople/'.concat(Cypress.env('DSPACE_TEST_ADMIN_USER_UUID')).concat('/edit'));
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Form must first be visible
+    cy.get('ds-eperson-form').should('be.visible');
+    // Analyze <ds-eperson-form> for accessibility issues
+    testA11y('ds-eperson-form');
+  });
+});

cypress/e2e/edit-group.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Edit Group', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/access-control/groups/'.concat(Cypress.env('DSPACE_ADMINISTRATOR_GROUP')).concat('/edit'));
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Form must first be visible
+    cy.get('ds-group-form').should('be.visible');
+    // Analyze <ds-group-form> for accessibility issues
+    testA11y('ds-group-form');
+  });
+});

cypress/e2e/end-user-agreement.cy.ts

@@ -0,0 +1,13 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('End User Agreement', () => {
+  it('should pass accessibility tests', () => {
+    cy.visit('/info/end-user-agreement');
+
+    // Page must first be visible
+    cy.get('ds-end-user-agreement').should('be.visible');
+
+    // Analyze <ds-end-user-agreement> for accessibility
+    testA11y('ds-end-user-agreement');
+  });
+});

cypress/e2e/epeople-registry.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Epeople registry', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/access-control/epeople');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Epeople registry page must first be visible
+    cy.get('ds-epeople-registry').should('be.visible');
+    // Analyze <ds-epeople-registry> for accessibility issues
+    testA11y('ds-epeople-registry');
+  });
+});

cypress/e2e/feedback.cy.ts

@@ -0,0 +1,13 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Feedback', () => {
+  it('should pass accessibility tests', () => {
+    cy.visit('/info/feedback');
+
+    // Page must first be visible
+    cy.get('ds-feedback').should('be.visible');
+
+    // Analyze <ds-feedback> for accessibility
+    testA11y('ds-feedback');
+  });
+});

cypress/e2e/groups-registry.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Groups registry', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/access-control/groups');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Epeople registry page must first be visible
+    cy.get('ds-groups-registry').should('be.visible');
+    // Analyze <ds-groups-registry> for accessibility issues
+    testA11y('ds-groups-registry');
+  });
+});

cypress/e2e/header.cy.ts

@@ -10,4 +10,29 @@ describe('Header', () => {
     // Analyze <ds-header> for accessibility
     testA11y('ds-header');
   });
+
+  it('should allow for changing language to German (for example)', () => {
+    cy.visit('/');
+
+    // Click the language switcher (globe) in header
+    cy.get('button[data-test="lang-switch"]').click();
+    // Click on the "Deusch" language in dropdown
+    cy.get('#language-menu-list div[role="option"]').contains('Deutsch').click();
+
+    // HTML "lang" attribute should switch to "de"
+    cy.get('html').invoke('attr', 'lang').should('eq', 'de');
+
+    // Login menu should now be in German
+    cy.get('[data-test="login-menu"]').contains('Anmelden');
+
+    // Change back to English from language switcher
+    cy.get('button[data-test="lang-switch"]').click();
+    cy.get('#language-menu-list div[role="option"]').contains('English').click();
+
+    // HTML "lang" attribute should switch to "en"
+    cy.get('html').invoke('attr', 'lang').should('eq', 'en');
+
+    // Login menu should now be in English
+    cy.get('[data-test="login-menu"]').contains('Log In');
+  });
 });

cypress/e2e/health-page.cy.ts

@@ -0,0 +1,62 @@
+import { testA11y } from 'cypress/support/utils';
+import { Options } from 'cypress-axe';
+
+
+beforeEach(() => {
+  // Must login as an Admin to see the page
+  cy.visit('/health');
+  cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+});
+
+describe('Health Page > Status Tab', () => {
+  it('should pass accessibility tests', () => {
+    cy.intercept('GET', '/server/actuator/health').as('status');
+    cy.wait('@status');
+
+    cy.get('a[data-test="health-page.status-tab"]').click();
+    // Page must first be visible
+    cy.get('ds-health-page').should('be.visible');
+    cy.get('ds-health-panel').should('be.visible');
+
+    // wait for all the ds-health-info-component components to be rendered
+    cy.get('div[role="tabpanel"]').each(($panel: HTMLDivElement) => {
+      cy.wrap($panel).find('ds-health-component').should('be.visible');
+    });
+    // Analyze <ds-health-page> for accessibility issues
+    testA11y('ds-health-page', {
+      rules: {
+        // All panels are accordians & fail "aria-required-children" and "nested-interactive".
+        // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216
+        'aria-required-children': { enabled: false },
+        'nested-interactive': { enabled: false },
+      },
+    } as Options);
+  });
+});
+
+describe('Health Page > Info Tab', () => {
+  it('should pass accessibility tests', () => {
+    cy.intercept('GET', '/server/actuator/info').as('info');
+    cy.wait('@info');
+
+    cy.get('a[data-test="health-page.info-tab"]').click();
+    // Page must first be visible
+    cy.get('ds-health-page').should('be.visible');
+    cy.get('ds-health-info').should('be.visible');
+
+    // wait for all the ds-health-info-component components to be rendered
+    cy.get('div[role="tabpanel"]').each(($panel: HTMLDivElement) => {
+      cy.wrap($panel).find('ds-health-info-component').should('be.visible');
+    });
+
+    // Analyze <ds-health-info> for accessibility issues
+    testA11y('ds-health-info', {
+      rules: {
+        // All panels are accordions & fail "aria-required-children" and "nested-interactive".
+        // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216
+        'aria-required-children': { enabled: false },
+        'nested-interactive': { enabled: false },
+      },
+    } as Options);
+  });
+});

cypress/e2e/item-edit.cy.ts

@@ -13,8 +13,13 @@ beforeEach(() => {
 
 describe('Edit Item > Edit Metadata tab', () => {
   it('should pass accessibility tests', () => {
+    cy.get('a[data-test="metadata"]').should('be.visible');
     cy.get('a[data-test="metadata"]').click();
 
+    // Our selected tab should be both visible & active
+    cy.get('a[data-test="metadata"]').should('be.visible');
+    cy.get('a[data-test="metadata"]').should('have.class', 'active');
+
     // <ds-edit-item-page> tag must be loaded
     cy.get('ds-edit-item-page').should('be.visible');
 
@@ -31,8 +36,13 @@ describe('Edit Item > Edit Metadata tab', () => {
 describe('Edit Item > Status tab', () => {
 
   it('should pass accessibility tests', () => {
+    cy.get('a[data-test="status"]').should('be.visible');
     cy.get('a[data-test="status"]').click();
 
+    // Our selected tab should be both visible & active
+    cy.get('a[data-test="status"]').should('be.visible');
+    cy.get('a[data-test="status"]').should('have.class', 'active');
+
     // <ds-item-status> tag must be loaded
     cy.get('ds-item-status').should('be.visible');
 
@@ -44,8 +54,13 @@ describe('Edit Item > Status tab', () => {
 describe('Edit Item > Bitstreams tab', () => {
 
   it('should pass accessibility tests', () => {
+    cy.get('a[data-test="bitstreams"]').should('be.visible');
     cy.get('a[data-test="bitstreams"]').click();
 
+    // Our selected tab should be both visible & active
+    cy.get('a[data-test="bitstreams"]').should('be.visible');
+    cy.get('a[data-test="bitstreams"]').should('have.class', 'active');
+
     // <ds-item-bitstreams> tag must be loaded
     cy.get('ds-item-bitstreams').should('be.visible');
 
@@ -68,8 +83,13 @@ describe('Edit Item > Bitstreams tab', () => {
 describe('Edit Item > Curate tab', () => {
 
   it('should pass accessibility tests', () => {
+    cy.get('a[data-test="curate"]').should('be.visible');
     cy.get('a[data-test="curate"]').click();
 
+    // Our selected tab should be both visible & active
+    cy.get('a[data-test="curate"]').should('be.visible');
+    cy.get('a[data-test="curate"]').should('have.class', 'active');
+
     // <ds-item-curate> tag must be loaded
     cy.get('ds-item-curate').should('be.visible');
 
@@ -81,8 +101,13 @@ describe('Edit Item > Curate tab', () => {
 describe('Edit Item > Relationships tab', () => {
 
   it('should pass accessibility tests', () => {
+    cy.get('a[data-test="relationships"]').should('be.visible');
     cy.get('a[data-test="relationships"]').click();
 
+    // Our selected tab should be both visible & active
+    cy.get('a[data-test="relationships"]').should('be.visible');
+    cy.get('a[data-test="relationships"]').should('have.class', 'active');
+
     // <ds-item-relationships> tag must be loaded
     cy.get('ds-item-relationships').should('be.visible');
 
@@ -94,8 +119,13 @@ describe('Edit Item > Relationships tab', () => {
 describe('Edit Item > Version History tab', () => {
 
   it('should pass accessibility tests', () => {
+    cy.get('a[data-test="versionhistory"]').should('be.visible');
     cy.get('a[data-test="versionhistory"]').click();
 
+    // Our selected tab should be both visible & active
+    cy.get('a[data-test="versionhistory"]').should('be.visible');
+    cy.get('a[data-test="versionhistory"]').should('have.class', 'active');
+
     // <ds-item-version-history> tag must be loaded
     cy.get('ds-item-version-history').should('be.visible');
 
@@ -107,8 +137,13 @@ describe('Edit Item > Version History tab', () => {
 describe('Edit Item > Access Control tab', () => {
 
   it('should pass accessibility tests', () => {
+    cy.get('a[data-test="access-control"]').should('be.visible');
     cy.get('a[data-test="access-control"]').click();
 
+    // Our selected tab should be both visible & active
+    cy.get('a[data-test="access-control"]').should('be.visible');
+    cy.get('a[data-test="access-control"]').should('have.class', 'active');
+
     // <ds-item-access-control> tag must be loaded
     cy.get('ds-item-access-control').should('be.visible');
 
@@ -120,8 +155,13 @@ describe('Edit Item > Access Control tab', () => {
 describe('Edit Item > Collection Mapper tab', () => {
 
   it('should pass accessibility tests', () => {
+    cy.get('a[data-test="mapper"]').should('be.visible');
     cy.get('a[data-test="mapper"]').click();
 
+    // Our selected tab should be both visible & active
+    cy.get('a[data-test="mapper"]').should('be.visible');
+    cy.get('a[data-test="mapper"]').should('have.class', 'active');
+
     // <ds-item-collection-mapper> tag must be loaded
     cy.get('ds-item-collection-mapper').should('be.visible');
 

cypress/e2e/login-modal.cy.ts

@@ -3,31 +3,31 @@ import { testA11y } from 'cypress/support/utils';
 const page = {
   openLoginMenu() {
     // Click the "Log In" dropdown menu in header
-    cy.get('ds-header [data-test="login-menu"]').click();
+    cy.get('[data-test="login-menu"]').click();
   },
   openUserMenu() {
     // Once logged in, click the User menu in header
-    cy.get('ds-header [data-test="user-menu"]').click();
+    cy.get('[data-test="user-menu"]').click();
   },
   submitLoginAndPasswordByPressingButton(email, password) {
     // Enter email
-    cy.get('ds-header [data-test="email"]').type(email);
+    cy.get('[data-test="email"]').type(email);
     // Enter password
-    cy.get('ds-header [data-test="password"]').type(password);
+    cy.get('[data-test="password"]').type(password);
     // Click login button
-    cy.get('ds-header [data-test="login-button"]').click();
+    cy.get('[data-test="login-button"]').click();
   },
   submitLoginAndPasswordByPressingEnter(email, password) {
     // In opened Login modal, fill out email & password, then click Enter
-    cy.get('ds-header [data-test="email"]').type(email);
-    cy.get('ds-header [data-test="password"]').type(password);
-    cy.get('ds-header [data-test="password"]').type('{enter}');
+    cy.get('[data-test="email"]').type(email);
+    cy.get('[data-test="password"]').type(password);
+    cy.get('[data-test="password"]').type('{enter}');
   },
   submitLogoutByPressingButton() {
     // This is the POST command that will actually log us out
     cy.intercept('POST', '/server/api/authn/logout').as('logout');
     // Click logout button
-    cy.get('ds-header [data-test="logout-button"]').click();
+    cy.get('[data-test="logout-button"]').click();
     // Wait until above POST command responds before continuing
     // (This ensures next action waits until logout completes)
     cy.wait('@logout');
@@ -67,7 +67,7 @@ describe('Login Modal', () => {
 
     // Login, and the <ds-log-in> tag should no longer exist
     page.submitLoginAndPasswordByPressingEnter(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
-    cy.get('.form-login').should('not.exist');
+    cy.get('ds-log-in').should('not.exist');
 
     // Verify we are still on homepage
     cy.url().should('include', '/home');

cypress/e2e/metadata-import-page.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Metadata Import Page', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/admin/metadata-import');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Metadata import form must first be visible
+    cy.get('ds-metadata-import-page').should('be.visible');
+    // Analyze <ds-metadata-import-page> for accessibility issues
+    testA11y('ds-metadata-import-page');
+  });
+});

cypress/e2e/metadata-registry.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Metadata Registry', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/admin/registries/metadata');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Page must first be visible
+    cy.get('ds-metadata-registry').should('be.visible');
+    // Analyze <ds-metadata-registry> for accessibility issues
+    testA11y('ds-metadata-registry');
+  });
+});

cypress/e2e/metadata-schema.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Metadata Schema', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/admin/registries/metadata/dc');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Page must first be visible
+    cy.get('ds-metadata-schema').should('be.visible');
+    // Analyze <ds-metadata-schema> for accessibility issues
+    testA11y('ds-metadata-schema');
+  });
+});

cypress/e2e/new-process.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('New Process', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/processes/new');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Process form must first be visible
+    cy.get('ds-new-process').should('be.visible');
+    // Analyze <ds-new-process> for accessibility issues
+    testA11y('ds-new-process');
+  });
+});

cypress/e2e/privacy.cy.ts

@@ -0,0 +1,13 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Privacy', () => {
+  it('should pass accessibility tests', () => {
+    cy.visit('/info/privacy');
+
+    // Page must first be visible
+    cy.get('ds-privacy').should('be.visible');
+
+    // Analyze <ds-privacy> for accessibility
+    testA11y('ds-privacy');
+  });
+});

cypress/e2e/processes-overview.cy.ts

@@ -0,0 +1,17 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Processes Overview', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/processes');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+
+    // Process overview must first be visible
+    cy.get('ds-process-overview').should('be.visible');
+    // Analyze <ds-process-overview> for accessibility issues
+    testA11y('ds-process-overview');
+  });
+});

cypress/e2e/profile-page.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Profile page', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/profile');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Process form must first be visible
+    cy.get('ds-profile-page').should('be.visible');
+    // Analyze <ds-profile-page> for accessibility issues
+    testA11y('ds-profile-page');
+  });
+});

cypress/e2e/quality-assurance-source-page.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Quality Assurance Source Page', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/notifications/quality-assurance');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Source page must first be visible
+    cy.get('ds-quality-assurance-source-page-component').should('be.visible');
+    // Analyze <ds-quality-assurance-source-page-component> for accessibility issues
+    testA11y('ds-quality-assurance-source-page-component');
+  });
+});

cypress/e2e/system-wide-alert.cy.ts

@@ -0,0 +1,16 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('System Wide Alert', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/admin/system-wide-alert');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should pass accessibility tests', () => {
+    // Page must first be visible
+    cy.get('ds-system-wide-alert-form').should('be.visible');
+    // Analyze <ds-system-wide-alert-form> for accessibility issues
+    testA11y('ds-system-wide-alert-form');
+  });
+});

cypress/support/commands.ts

@@ -101,11 +101,11 @@ Cypress.Commands.add('login', login);
  */
 function loginViaForm(email: string, password: string): void {
   // Enter email
-  cy.get('ds-log-in [data-test="email"]').type(email);
+  cy.get('[data-test="email"]').type(email);
   // Enter password
-  cy.get('ds-log-in [data-test="password"]').type(password);
+  cy.get('[data-test="password"]').type(password);
   // Click login button
-  cy.get('ds-log-in [data-test="login-button"]').click();
+  cy.get('[data-test="login-button"]').click();
 }
 // Add as a Cypress command (i.e. assign to 'cy.loginViaForm')
 Cypress.Commands.add('loginViaForm', loginViaForm);

docker/README.md

@@ -23,14 +23,14 @@ the Docker compose scripts in this 'docker' folder.
 This Dockerfile is used to build a *development* DSpace Angular UI image, published as 'dspace/dspace-angular'
 
 ```
-docker build -t dspace/dspace-angular:latest .
+docker build -t dspace/dspace-angular:dspace-8_x .
 ```
 
 This image is built *automatically* after each commit is made to the `main` branch.
 
 Admins to our DockerHub repo can manually publish with the following command.
 ```
-docker push dspace/dspace-angular:latest
+docker push dspace/dspace-angular:dspace-8_x
 ```
 
 ### Dockerfile.dist
@@ -39,7 +39,7 @@ The `Dockerfile.dist` is used to generate a *production* build and runtime envir
 
 ```bash
 # build the latest image
-docker build -f Dockerfile.dist -t dspace/dspace-angular:latest-dist .
+docker build -f Dockerfile.dist -t dspace/dspace-angular:dspace-8_x-dist .
 ```
 
 A default/demo version of this image is built *automatically*.
@@ -59,19 +59,19 @@ A default/demo version of this image is built *automatically*.
 
 ## To refresh / pull DSpace images from Dockerhub
 ```
-docker-compose -f docker/docker-compose.yml pull
+docker compose -f docker/docker-compose.yml pull
 ```
 
 ## To build DSpace images using code in your branch
 ```
-docker-compose -f docker/docker-compose.yml build
+docker compose -f docker/docker-compose.yml build
 ```
 
 ## To start DSpace (REST and Angular) from your branch
 
 This command provides a quick way to start both the frontend & backend from this single codebase
 ```
-docker-compose -p d8 -f docker/docker-compose.yml -f docker/docker-compose-rest.yml up -d
+docker compose -p d8 -f docker/docker-compose.yml -f docker/docker-compose-rest.yml up -d
 ```
 
 Keep in mind, you may also start the backend by cloning the 'DSpace/DSpace' GitHub repository separately. See the next section.
@@ -86,14 +86,14 @@ _The system will be started in 2 steps. Each step shares the same docker network
 
 From 'DSpace/DSpace' clone (build first as needed):
 ```
-docker-compose -p d8 up -d
+docker compose -p d8 up -d
 ```
 
 NOTE: More detailed instructions on starting the backend via Docker can be found in the [Docker Compose instructions for the Backend](https://github.com/DSpace/DSpace/blob/main/dspace/src/main/docker-compose/README.md).
 
 From 'DSpace/dspace-angular' clone (build first as needed)
 ```
-docker-compose -p d8 -f docker/docker-compose.yml up -d
+docker compose -p d8 -f docker/docker-compose.yml up -d
 ```
 
 At this point, you should be able to access the UI from http://localhost:4000,
@@ -105,21 +105,21 @@ This allows you to run the Angular UI in *production* mode, pointing it at the d
 (https://demo.dspace.org/server/ or https://sandbox.dspace.org/server/).
 
 ```
-docker-compose -f docker/docker-compose-dist.yml pull
-docker-compose -f docker/docker-compose-dist.yml build
-docker-compose -p d8 -f docker/docker-compose-dist.yml up -d
+docker compose -f docker/docker-compose-dist.yml pull
+docker compose -f docker/docker-compose-dist.yml build
+docker compose -p d8 -f docker/docker-compose-dist.yml up -d
 ```
 
 ## Ingest test data from AIPDIR
 
 Create an administrator
 ```
-docker-compose -p d8 -f docker/cli.yml run --rm dspace-cli create-administrator -e test@test.edu -f admin -l user -p admin -c en
+docker compose -p d8 -f docker/cli.yml run --rm dspace-cli create-administrator -e test@test.edu -f admin -l user -p admin -c en
 ```
 
 Load content from AIP files
 ```
-docker-compose -p d8 -f docker/cli.yml -f ./docker/cli.ingest.yml run --rm dspace-cli
+docker compose -p d8 -f docker/cli.yml -f ./docker/cli.ingest.yml run --rm dspace-cli
 ```
 
 ## Alternative Ingest - Use Entities dataset
@@ -127,12 +127,12 @@ _Delete your docker volumes or use a unique project (-p) name_
 
 Start DSpace with Database Content from a database dump
 ```
-docker-compose -p d8 -f docker/docker-compose.yml -f docker/docker-compose-rest.yml -f docker/db.entities.yml up -d
+docker compose -p d8 -f docker/docker-compose.yml -f docker/docker-compose-rest.yml -f docker/db.entities.yml up -d
 ```
 
 Load assetstore content and trigger a re-index of the repository
 ```
-docker-compose -p d8 -f docker/cli.yml -f docker/cli.assetstore.yml run --rm dspace-cli
+docker compose -p d8 -f docker/cli.yml -f docker/cli.assetstore.yml run --rm dspace-cli
 ```
 
 ## End to end testing of the REST API (runs in GitHub Actions CI).
@@ -140,5 +140,5 @@ _In this instance, only the REST api runs in Docker using the Entities dataset.
 
 This command is only really useful for testing our Continuous Integration process.
 ```
-docker-compose -p d8ci -f docker/docker-compose-ci.yml up -d
+docker compose -p d8ci -f docker/docker-compose-ci.yml up -d
 ```

docker/cli.yml

@@ -14,14 +14,14 @@
 # Therefore, it should be kept in sync with that file
 networks:
   # Default to using network named 'dspacenet' from docker-compose-rest.yml.
-  # Its full name will be prepended with the project name (e.g. "-p d7" means it will be named "d7_dspacenet")
+  # Its full name will be prepended with the project name (e.g. "-p d8" means it will be named "d8_dspacenet")
   # If COMPOSITE_PROJECT_NAME is missing, default value will be "docker" (name of folder this file is in)
   default:
     name: ${COMPOSE_PROJECT_NAME:-docker}_dspacenet
     external: true
 services:
   dspace-cli:
-    image: "${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-latest}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-dspace-8_x}"
     container_name: dspace-cli
     environment:
       # Below syntax may look odd, but it is how to override dspace.cfg settings via env variables.

docker/db.entities.yml

@@ -14,10 +14,11 @@
 # # Therefore, it should be kept in sync with that file
 services:
   dspacedb:
-    image: dspace/dspace-postgres-pgcrypto::${DSPACE_VER:-latest}-loadsql
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-dspace-8_x}-loadsql"
     environment:
       # This LOADSQL should be kept in sync with the URL in DSpace/DSpace
       # This SQL is available from https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data
+      # NOTE: currently there is no dspace8 version
       - LOADSQL=https://github.com/DSpace-Labs/AIP-Files/releases/download/demo-entities-data/dspace7-entities-data.sql
   dspace:
     ### OVERRIDE default 'entrypoint' in 'docker-compose-rest.yml' ####
@@ -34,4 +35,4 @@ services:
       - |
         while (!</dev/tcp/dspacedb/5432) > /dev/null 2>&1; do sleep 1; done;
         /dspace/bin/dspace database migrate ignored
-        java -jar /dspace/webapps/server-boot.jar --dspace.dir=/dspace
+        java -jar /dspace/webapps/server-boot.jar --dspace.dir=/dspace

docker/docker-compose-ci.yml

@@ -33,7 +33,7 @@ services:
       # This allows us to generate statistics in e2e tests so that statistics pages can be tested thoroughly.
       solr__D__statistics__P__autoCommit: 'false'
       LOGGING_CONFIG: /dspace/config/log4j2-container.xml
-    image: "${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-latest-test}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-dspace-8_x-test}"
     depends_on:
     - dspacedb
     networks:
@@ -60,11 +60,12 @@ services:
   # NOTE: This is customized to use our loadsql image, so that we are using a database with existing test data
   dspacedb:
     container_name: dspacedb
-    image: "${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-latest}-loadsql"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-dspace-8_x}-loadsql"
     environment:
       # This LOADSQL should be kept in sync with the LOADSQL in
       # https://github.com/DSpace/DSpace/blob/main/dspace/src/main/docker-compose/db.entities.yml
       # This SQL is available from https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data
+      # NOTE: currently there is no dspace8 version
       LOADSQL: https://github.com/DSpace-Labs/AIP-Files/releases/download/demo-entities-data/dspace7-entities-data.sql
       PGDATA: /pgdata
       POSTGRES_PASSWORD: dspace
@@ -81,7 +82,7 @@ services:
   # DSpace Solr container
   dspacesolr:
     container_name: dspacesolr
-    image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-dspace-8_x}"
     networks:
       - dspacenet
     ports:

docker/docker-compose-dist.yml

@@ -26,7 +26,7 @@ services:
       DSPACE_REST_HOST: sandbox.dspace.org
       DSPACE_REST_PORT: 443
       DSPACE_REST_NAMESPACE: /server
-    image: dspace/dspace-angular:${DSPACE_VER:-latest}-dist
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-angular:${DSPACE_VER:-dspace-8_x}-dist"
     build:
       context: ..
       dockerfile: Dockerfile.dist

docker/docker-compose-rest.yml

@@ -40,7 +40,7 @@ services:
       # from the host machine. This IP range MUST correspond to the 'dspacenet' subnet defined above.
       proxies__P__trusted__P__ipranges: '172.23.0'
       LOGGING_CONFIG: /dspace/config/log4j2-container.xml
-    image: "${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-latest-test}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-dspace-8_x-test}"
     depends_on:
     - dspacedb
     networks:
@@ -68,7 +68,7 @@ services:
   dspacedb:
     container_name: dspacedb
     # Uses a custom Postgres image with pgcrypto installed
-    image: "${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-latest}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-dspace-8_x}"
     environment:
       PGDATA: /pgdata
       POSTGRES_PASSWORD: dspace
@@ -85,7 +85,7 @@ services:
   # DSpace Solr container  
   dspacesolr:
     container_name: dspacesolr
-    image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-dspace-8_x}"
     networks:
       - dspacenet
     ports:
@@ -101,7 +101,7 @@ services:
     # * First, run precreate-core to create the core (if it doesn't yet exist). If exists already, this is a no-op
     # * Second, copy configsets to this core:
     #   Updates to Solr configs require the container to be rebuilt/restarted:
-    #   `docker-compose -p d7 -f docker/docker-compose.yml -f docker/docker-compose-rest.yml up -d --build dspacesolr`
+    #   `docker compose -p d7 -f docker/docker-compose.yml -f docker/docker-compose-rest.yml up -d --build dspacesolr`
     entrypoint:
     - /bin/bash
     - '-c'

docker/docker-compose.yml

@@ -23,7 +23,7 @@ services:
       DSPACE_REST_HOST: localhost
       DSPACE_REST_PORT: 8080
       DSPACE_REST_NAMESPACE: /server
-    image: dspace/dspace-angular:${DSPACE_VER:-latest}
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-angular:${DSPACE_VER:-dspace-8_x}"
     build:
       context: ..
       dockerfile: Dockerfile

docs/lint/html/index.md

@@ -2,3 +2,4 @@
 _______
 
 - [`dspace-angular-html/themed-component-usages`](./rules/themed-component-usages.md): Themeable components should be used via the selector of their `ThemedComponent` wrapper class
+- [`dspace-angular-html/no-disabled-attribute-on-button`](./rules/no-disabled-attribute-on-button.md): Buttons should use the `dsBtnDisabled` directive instead of the HTML `disabled` attribute.

docs/lint/html/rules/no-disabled-attribute-on-button.md

@@ -0,0 +1,78 @@
+[DSpace ESLint plugins](../../../../lint/README.md) > [HTML rules](../index.md) > `dspace-angular-html/no-disabled-attribute-on-button`
+_______
+
+Buttons should use the `dsBtnDisabled` directive instead of the HTML `disabled` attribute.
+      This should be done to ensure that users with a screen reader are able to understand that the a button button is present, and that it is disabled.
+      The native html disabled attribute does not allow users to navigate to the button by keyboard, and thus they have no way of knowing that the button is present.
+
+_______
+
+[Source code](../../../../lint/src/rules/html/no-disabled-attribute-on-button.ts)
+
+### Examples
+
+
+#### Valid code
+    
+##### should use [dsBtnDisabled] in HTML templates
+        
+```html
+<button [dsBtnDisabled]="true">Submit</button>
+```
+    
+##### disabled attribute is still valid on non-button elements
+        
+```html
+<input disabled>
+```
+    
+##### [disabled] attribute is still valid on non-button elements
+        
+```html
+<input [disabled]="true">
+```
+    
+##### angular dynamic attributes that use disabled are still valid
+        
+```html
+<button [class.disabled]="isDisabled">Submit</button>
+```
+    
+
+
+
+#### Invalid code  &amp; automatic fixes
+    
+##### should not use disabled attribute in HTML templates
+        
+```html
+<button disabled>Submit</button>
+```
+Will produce the following error(s):
+```
+Buttons should use the `dsBtnDisabled` directive instead of the `disabled` attribute.
+```
+        
+Result of `yarn lint --fix`:
+```html
+<button [dsBtnDisabled]="true">Submit</button>
+```
+        
+    
+##### should not use [disabled] attribute in HTML templates
+        
+```html
+<button [disabled]="true">Submit</button>
+```
+Will produce the following error(s):
+```
+Buttons should use the `dsBtnDisabled` directive instead of the `disabled` attribute.
+```
+        
+Result of `yarn lint --fix`:
+```html
+<button [dsBtnDisabled]="true">Submit</button>
+```
+        
+    
+

lint/src/rules/html/index.ts

@@ -10,10 +10,13 @@ import {
   bundle,
   RuleExports,
 } from '../../util/structure';
+import * as noDisabledAttributeOnButton from './no-disabled-attribute-on-button';
 import * as themedComponentUsages from './themed-component-usages';
 
 const index = [
   themedComponentUsages,
+  noDisabledAttributeOnButton,
+
 ] as unknown as RuleExports[];
 
 export = {

lint/src/rules/html/no-disabled-attribute-on-button.ts

@@ -0,0 +1,147 @@
+import {
+  TmplAstBoundAttribute,
+  TmplAstTextAttribute,
+} from '@angular-eslint/bundled-angular-compiler';
+import { TemplateParserServices } from '@angular-eslint/utils';
+import {
+  ESLintUtils,
+  TSESLint,
+} from '@typescript-eslint/utils';
+
+import {
+  DSpaceESLintRuleInfo,
+  NamedTests,
+} from '../../util/structure';
+import { getSourceCode } from '../../util/typescript';
+
+export enum Message {
+  USE_DSBTN_DISABLED = 'mustUseDsBtnDisabled',
+}
+
+export const info = {
+  name: 'no-disabled-attribute-on-button',
+  meta: {
+    docs: {
+      description: `Buttons should use the \`dsBtnDisabled\` directive instead of the HTML \`disabled\` attribute.
+      This should be done to ensure that users with a screen reader are able to understand that the a button button is present, and that it is disabled.
+      The native html disabled attribute does not allow users to navigate to the button by keyboard, and thus they have no way of knowing that the button is present.`,
+    },
+    type: 'problem',
+    fixable: 'code',
+    schema: [],
+    messages: {
+      [Message.USE_DSBTN_DISABLED]: 'Buttons should use the `dsBtnDisabled` directive instead of the `disabled` attribute.',
+    },
+  },
+  defaultOptions: [],
+} as DSpaceESLintRuleInfo;
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  ...info,
+  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+    const parserServices = getSourceCode(context).parserServices as TemplateParserServices;
+
+    /**
+     * Some dynamic angular inputs will have disabled as name because of how Angular handles this internally (e.g [class.disabled]="isDisabled")
+     * But these aren't actually the disabled attribute we're looking for, we can determine this by checking the details of the keySpan
+     */
+    function isOtherAttributeDisabled(node: TmplAstBoundAttribute | TmplAstTextAttribute): boolean {
+      // if the details are not null, and the details are not 'disabled', then it's not the disabled attribute we're looking for
+      return node.keySpan?.details !== null && node.keySpan?.details !== 'disabled';
+    }
+
+    /**
+     * Replace the disabled text with [dsBtnDisabled] in the template
+     */
+    function replaceDisabledText(text: string ): string {
+      const hasBrackets = text.includes('[') && text.includes(']');
+      const newDisabledText = hasBrackets ? 'dsBtnDisabled' : '[dsBtnDisabled]="true"';
+      return text.replace('disabled', newDisabledText);
+    }
+
+    function inputIsChildOfButton(node: any): boolean {
+      return (node.parent?.tagName === 'button' || node.parent?.name === 'button');
+    }
+
+    function reportAndFix(node: TmplAstBoundAttribute | TmplAstTextAttribute) {
+      if (!inputIsChildOfButton(node) || isOtherAttributeDisabled(node)) {
+        return;
+      }
+
+      const sourceSpan = node.sourceSpan;
+      context.report({
+        messageId: Message.USE_DSBTN_DISABLED,
+        loc: parserServices.convertNodeSourceSpanToLoc(sourceSpan),
+        fix(fixer) {
+          const templateText = sourceSpan.start.file.content;
+          const disabledText = templateText.slice(sourceSpan.start.offset, sourceSpan.end.offset);
+          const newText = replaceDisabledText(disabledText);
+          return fixer.replaceTextRange([sourceSpan.start.offset, sourceSpan.end.offset], newText);
+        },
+      });
+    }
+
+    return {
+      'BoundAttribute[name="disabled"]'(node: TmplAstBoundAttribute) {
+        reportAndFix(node);
+      },
+      'TextAttribute[name="disabled"]'(node: TmplAstTextAttribute) {
+        reportAndFix(node);
+      },
+    };
+  },
+});
+
+export const tests = {
+  plugin: info.name,
+  valid: [
+    {
+      name: 'should use [dsBtnDisabled] in HTML templates',
+      code: `
+<button [dsBtnDisabled]="true">Submit</button>
+      `,
+    },
+    {
+      name: 'disabled attribute is still valid on non-button elements',
+      code: `
+<input disabled>
+      `,
+    },
+    {
+      name: '[disabled] attribute is still valid on non-button elements',
+      code: `
+<input [disabled]="true">
+      `,
+    },
+    {
+      name: 'angular dynamic attributes that use disabled are still valid',
+      code: `
+<button [class.disabled]="isDisabled">Submit</button>
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'should not use disabled attribute in HTML templates',
+      code: `
+<button disabled>Submit</button>
+      `,
+      errors: [{ messageId: Message.USE_DSBTN_DISABLED }],
+      output: `
+<button [dsBtnDisabled]="true">Submit</button>
+      `,
+    },
+    {
+      name: 'should not use [disabled] attribute in HTML templates',
+      code: `
+<button [disabled]="true">Submit</button>
+      `,
+      errors: [{ messageId: Message.USE_DSBTN_DISABLED }],
+      output: `
+<button [dsBtnDisabled]="true">Submit</button>
+      `,
+    },
+  ],
+} as NamedTests;
+
+export default rule;

lint/src/rules/html/themed-component-usages.ts

@@ -7,10 +7,8 @@
  */
 import { TmplAstElement } from '@angular-eslint/bundled-angular-compiler';
 import { TemplateParserServices } from '@angular-eslint/utils';
-import {
-  ESLintUtils,
-  TSESLint,
-} from '@typescript-eslint/utils';
+import { ESLintUtils } from '@typescript-eslint/utils';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';
 
 import { fixture } from '../../../test/fixture';
 import {
@@ -52,7 +50,7 @@ The only exception to this rule are unit tests, where we may want to use the bas
 
 export const rule = ESLintUtils.RuleCreator.withoutDocs({
   ...info,
-  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+  create(context: RuleContext<Message, unknown[]>) {
     if (getFilename(context).includes('.spec.ts')) {
       // skip inline templates in unit tests
       return {};

lint/src/rules/ts/themed-component-classes.ts

@@ -7,9 +7,9 @@
  */
 import {
   ESLintUtils,
-  TSESLint,
   TSESTree,
 } from '@typescript-eslint/utils';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';
 
 import { fixture } from '../../../test/fixture';
 import {
@@ -57,7 +57,7 @@ export const info = {
 
 export const rule = ESLintUtils.RuleCreator.withoutDocs({
   ...info,
-  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+  create(context: RuleContext<Message, unknown[]>) {
     const filename = getFilename(context);
 
     if (filename.endsWith('.spec.ts')) {

lint/src/rules/ts/themed-component-selectors.ts

@@ -7,9 +7,9 @@
  */
 import {
   ESLintUtils,
-  TSESLint,
   TSESTree,
 } from '@typescript-eslint/utils';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';
 
 import { fixture } from '../../../test/fixture';
 import { getComponentSelectorNode } from '../../util/angular';
@@ -58,7 +58,7 @@ Unit tests are exempt from this rule, because they may redefine components using
 
 export const rule = ESLintUtils.RuleCreator.withoutDocs({
   ...info,
-  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+  create(context: RuleContext<Message, unknown[]>) {
     const filename = getFilename(context);
 
     if (filename.endsWith('.spec.ts')) {

lint/src/rules/ts/themed-component-usages.ts

@@ -7,9 +7,9 @@
  */
 import {
   ESLintUtils,
-  TSESLint,
   TSESTree,
 } from '@typescript-eslint/utils';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';
 
 import { fixture } from '../../../test/fixture';
 import {
@@ -68,7 +68,7 @@ There are a few exceptions where the base class can still be used:
 
 export const rule = ESLintUtils.RuleCreator.withoutDocs({
   ...info,
-  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+  create(context: RuleContext<Message, unknown[]>) {
     const filename = getFilename(context);
 
     function handleUnthemedUsagesInTypescript(node: TSESTree.Identifier) {

lint/src/util/structure.ts

@@ -5,13 +5,17 @@
  *
  * http://www.dspace.org/license/
  */
-import { TSESLint } from '@typescript-eslint/utils';
-import { RuleTester } from 'eslint';
+import {
+  InvalidTestCase,
+  RuleMetaData,
+  RuleModule,
+  ValidTestCase,
+} from '@typescript-eslint/utils/ts-eslint';
 import { EnumType } from 'typescript';
 
-export type Meta = TSESLint.RuleMetaData<string>;
-export type Valid = TSESLint.ValidTestCase<unknown[]> | RuleTester.ValidTestCase;
-export type Invalid = TSESLint.InvalidTestCase<string, unknown[]> | RuleTester.InvalidTestCase;
+export type Meta = RuleMetaData<string, unknown[]>;
+export type Valid = ValidTestCase<unknown[]>;
+export type Invalid = InvalidTestCase<string, unknown[]>;
 
 export interface DSpaceESLintRuleInfo {
   name: string;
@@ -28,7 +32,7 @@ export interface NamedTests {
 export interface RuleExports {
   Message: EnumType,
   info: DSpaceESLintRuleInfo,
-  rule: TSESLint.RuleModule<string>,
+  rule: RuleModule<string>,
   tests: NamedTests,
   default: unknown,
 }

lint/src/util/typescript.ts

@@ -5,17 +5,18 @@
  *
  * http://www.dspace.org/license/
  */
+import { TSESTree } from '@typescript-eslint/utils';
 import {
-  TSESLint,
-  TSESTree,
-} from '@typescript-eslint/utils';
+  RuleContext,
+  SourceCode,
+} from '@typescript-eslint/utils/ts-eslint';
 
 import {
   match,
   toUnixStylePath,
 } from './misc';
 
-export type AnyRuleContext = TSESLint.RuleContext<string, unknown[]>;
+export type AnyRuleContext = RuleContext<string, unknown[]>;
 
 /**
  * Return the current filename based on the ESLint rule context as a Unix-style path.
@@ -27,7 +28,7 @@ export function getFilename(context: AnyRuleContext): string {
   return toUnixStylePath(context.getFilename());
 }
 
-export function getSourceCode(context: AnyRuleContext): TSESLint.SourceCode {
+export function getSourceCode(context: AnyRuleContext): SourceCode {
   // TSESLint claims this is deprecated, but the suggested alternative is undefined (could be a version mismatch between ESLint and TSESlint?)
   // eslint-disable-next-line deprecation/deprecation
   return context.getSourceCode();

lint/test/testing.ts

@@ -7,7 +7,7 @@
  */
 
 import { RuleTester as TypeScriptRuleTester } from '@typescript-eslint/rule-tester';
-import { RuleTester } from 'eslint';
+import { RuleTester } from '@typescript-eslint/utils/ts-eslint';
 
 import { themeableComponents } from '../src/util/theme-support';
 import {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dspace-angular",
-  "version": "8.0.0",
+  "version": "8.3.0-next",
   "scripts": {
     "ng": "ng",
     "config:watch": "nodemon",
@@ -12,7 +12,6 @@
     "preserve": "yarn base-href",
     "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
     "serve:ssr": "node dist/server/main",
-    "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
     "build": "ng build --configuration development",
     "build:stats": "ng build --stats-json",
     "build:prod": "cross-env NODE_ENV=production yarn run build:ssr",
@@ -55,11 +54,6 @@
     "https": false
   },
   "private": true,
-  "resolutions": {
-    "minimist": "^1.2.5",
-    "webdriver-manager": "^12.1.8",
-    "ts-node": "10.2.1"
-  },
   "dependencies": {
     "@angular/animations": "^17.3.11",
     "@angular/cdk": "^17.3.10",
@@ -67,16 +61,14 @@
     "@angular/compiler": "^17.3.11",
     "@angular/core": "^17.3.11",
     "@angular/forms": "^17.3.11",
-    "@angular/localize": "17.3.11",
+    "@angular/localize": "17.3.12",
     "@angular/platform-browser": "^17.3.11",
     "@angular/platform-browser-dynamic": "^17.3.11",
     "@angular/platform-server": "^17.3.11",
     "@angular/router": "^17.3.11",
-    "@angular/ssr": "^17.3.8",
-    "@babel/runtime": "7.21.0",
+    "@angular/ssr": "^17.3.17",
+    "@babel/runtime": "7.28.4",
     "@kolkov/ngx-gallery": "^2.0.1",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.11.3",
     "@ng-bootstrap/ng-bootstrap": "^11.0.0",
     "@ng-dynamic-forms/core": "^16.0.0",
     "@ng-dynamic-forms/ui-ng-bootstrap": "^16.0.0",
@@ -85,108 +77,103 @@
     "@ngrx/store": "^17.1.1",
     "@ngx-translate/core": "^14.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
-    "@types/grecaptcha": "^3.0.4",
-    "angular-idle-preload": "3.0.0",
     "angulartics2": "^12.2.0",
-    "axios": "^1.6.0",
+    "axios": "^1.11.0",
     "bootstrap": "^4.6.1",
     "cerialize": "0.1.18",
     "cli-progress": "^3.12.0",
     "colors": "^1.4.0",
-    "compression": "^1.7.4",
-    "cookie-parser": "1.4.6",
-    "core-js": "^3.30.1",
+    "compression": "^1.8.1",
+    "cookie-parser": "1.4.7",
+    "core-js": "^3.45.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^1.3.7",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",
-    "express": "^4.19.2",
+    "express": "^4.21.2",
     "express-rate-limit": "^5.1.3",
     "fast-json-patch": "^3.1.1",
     "filesize": "^6.1.0",
-    "http-proxy-middleware": "^1.0.5",
+    "http-proxy-middleware": "^2.0.9",
     "http-terminator": "^3.2.0",
-    "isbot": "^3.6.10",
+    "isbot": "^5.1.30",
     "js-cookie": "2.2.1",
     "js-yaml": "^4.1.0",
     "json5": "^2.2.3",
-    "jsonschema": "1.4.1",
+    "jsonschema": "1.5.0",
     "jwt-decode": "^3.1.2",
     "klaro": "^0.7.18",
     "lodash": "^4.17.21",
     "lru-cache": "^7.14.1",
     "markdown-it": "^13.0.1",
-    "mirador": "^3.3.0",
+    "mirador": "^3.4.3",
     "mirador-dl-plugin": "^0.13.0",
-    "mirador-share-plugin": "^0.11.0",
-    "morgan": "^1.10.0",
-    "ng-mocks": "^14.10.0",
+    "mirador-share-plugin": "^0.16.0",
+    "morgan": "^1.10.1",
     "ng2-file-upload": "5.0.0",
     "ng2-nouislider": "^2.0.0",
     "ngx-infinite-scroll": "^16.0.0",
     "ngx-pagination": "6.0.3",
+    "ngx-skeleton-loader": "^9.0.0",
     "ngx-ui-switch": "^14.1.0",
     "nouislider": "^15.7.1",
-    "pem": "1.14.7",
-    "prop-types": "^15.8.1",
-    "react-copy-to-clipboard": "^5.1.0",
-    "reflect-metadata": "^0.1.13",
-    "rxjs": "^7.8.0",
-    "sanitize-html": "^2.12.1",
-    "sortablejs": "1.15.0",
+    "pem": "1.14.8",
+    "reflect-metadata": "^0.2.2",
+    "rxjs": "^7.8.2",
     "uuid": "^8.3.2",
-    "webfontloader": "1.6.28",
-    "zone.js": "~0.14.4"
+    "zone.js": "~0.14.0"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~17.0.2",
-    "@angular-devkit/build-angular": "^17.3.8",
-    "@angular-eslint/builder": "17.2.1",
-    "@angular-eslint/bundled-angular-compiler": "17.2.1",
-    "@angular-eslint/eslint-plugin": "17.2.1",
-    "@angular-eslint/eslint-plugin-template": "17.2.1",
-    "@angular-eslint/schematics": "17.2.1",
-    "@angular-eslint/template-parser": "17.2.1",
-    "@angular/cli": "^17.3.8",
+    "@angular-devkit/build-angular": "^17.3.17",
+    "@angular-eslint/builder": "17.5.3",
+    "@angular-eslint/bundled-angular-compiler": "17.5.3",
+    "@angular-eslint/eslint-plugin": "17.5.3",
+    "@angular-eslint/eslint-plugin-template": "17.5.3",
+    "@angular-eslint/schematics": "17.5.3",
+    "@angular-eslint/template-parser": "17.5.3",
+    "@angular/cli": "^17.3.17",
     "@angular/compiler-cli": "^17.3.11",
     "@angular/language-service": "^17.3.11",
     "@cypress/schematic": "^1.5.0",
-    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@ngrx/store-devtools": "^17.1.1",
-    "@ngtools/webpack": "^16.2.12",
-    "@types/deep-freeze": "0.1.2",
+    "@ngtools/webpack": "^16.2.16",
+    "@types/deep-freeze": "0.1.5",
     "@types/ejs": "^3.1.2",
     "@types/express": "^4.17.17",
+    "@types/grecaptcha": "^3.0.9",
     "@types/jasmine": "~3.6.0",
     "@types/js-cookie": "2.2.6",
-    "@types/lodash": "^4.14.194",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^14.14.9",
-    "@types/sanitize-html": "^2.9.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@typescript-eslint/rule-tester": "^7.2.0",
     "@typescript-eslint/utils": "^7.2.0",
-    "axe-core": "^4.7.2",
-    "browser-sync": "^3.0.0",
+    "axe-core": "^4.10.3",
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
-    "cypress": "12.17.4",
-    "cypress-axe": "^1.4.0",
+    "csstype": "^3.1.3",
+    "cypress": "^13.17.0",
+    "cypress-axe": "^1.7.0",
     "deep-freeze": "0.0.1",
     "eslint": "^8.39.0",
     "eslint-plugin-deprecation": "^1.4.1",
     "eslint-plugin-dspace-angular-html": "link:./lint/dist/src/rules/html",
     "eslint-plugin-dspace-angular-ts": "link:./lint/dist/src/rules/ts",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-import-newlines": "^1.3.1",
     "eslint-plugin-jsdoc": "^45.0.0",
-    "eslint-plugin-jsonc": "^2.6.0",
+    "eslint-plugin-jsonc": "^2.20.1",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "express-static-gzip": "^2.1.7",
+    "eslint-plugin-unused-imports": "^3.2.0",
+    "express-static-gzip": "^2.2.0",
     "jasmine": "^3.8.0",
     "jasmine-core": "^3.8.0",
     "jasmine-marbles": "0.9.2",
@@ -196,26 +183,25 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
+    "ng-mocks": "^14.13.5",
     "ngx-mask": "14.2.4",
     "nodemon": "^2.0.22",
-    "postcss": "^8.4",
-    "postcss-apply": "0.12.0",
+    "postcss": "^8.5",
     "postcss-import": "^14.0.0",
     "postcss-loader": "^4.0.3",
     "postcss-preset-env": "^7.4.2",
-    "postcss-responsive-type": "1.0.0",
+    "prop-types": "^15.8.1",
     "react": "^16.14.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
-    "rxjs-spy": "^8.0.2",
-    "sass": "~1.62.0",
+    "sass": "~1.92.1",
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.2.5",
     "ts-node": "^8.10.2",
-    "typescript": "~5.3.3",
-    "webpack": "5.90.3",
-    "webpack-bundle-analyzer": "^4.8.0",
+    "typescript": "~5.4.5",
+    "webpack": "5.101.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.2.2"
   }
 }

postcss.config.js

@@ -1,8 +1,6 @@
 module.exports = {
   plugins: [
     require('postcss-import')(),
-    require('postcss-preset-env')(),
-    require('postcss-apply')(),
-    require('postcss-responsive-type')()
+    require('postcss-preset-env')()
   ]
 };

server.ts

@@ -27,7 +27,7 @@ import * as expressStaticGzip from 'express-static-gzip';
 /* eslint-enable import/no-namespace */
 import axios from 'axios';
 import LRU from 'lru-cache';
-import isbot from 'isbot';
+import { isbot } from 'isbot';
 import { createCertificate } from 'pem';
 import { createServer } from 'https';
 import { json } from 'body-parser';
@@ -58,6 +58,7 @@ import {
   REQUEST,
   RESPONSE,
 } from './src/express.tokens';
+import { SsrExcludePatterns } from "./src/config/ssr-config.interface";
 
 /*
  * Set path for the browser application's dist folder
@@ -81,6 +82,9 @@ let anonymousCache: LRU<string, any>;
 // extend environment with app config for server
 extendEnvironmentWithAppConfig(environment, appConfig);
 
+// The REST server base URL
+const REST_BASE_URL = environment.rest.ssrBaseUrl || environment.rest.baseUrl;
+
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {
 
@@ -156,7 +160,7 @@ export function app() {
    * Proxy the sitemaps
    */
   router.use('/sitemap**', createProxyMiddleware({
-    target: `${environment.rest.baseUrl}/sitemaps`,
+    target: `${REST_BASE_URL}/sitemaps`,
     pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
     changeOrigin: true,
   }));
@@ -165,7 +169,7 @@ export function app() {
    * Proxy the linksets
    */
   router.use('/signposting**', createProxyMiddleware({
-    target: `${environment.rest.baseUrl}`,
+    target: `${REST_BASE_URL}`,
     pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
     changeOrigin: true,
   }));
@@ -218,7 +222,7 @@ export function app() {
  * The callback function to serve server side angular
  */
 function ngApp(req, res, next) {
-  if (environment.ssr.enabled) {
+  if (environment.ssr.enabled && req.method === 'GET' && (req.path === '/' || !isExcludedFromSsr(req.path, environment.ssr.excludePathPatterns))) {
     // Render the page to user via SSR (server side rendering)
     serverSideRender(req, res, next);
   } else {
@@ -265,7 +269,18 @@ function serverSideRender(req, res, next, sendToUser: boolean = true) {
       ],
     })
     .then((html) => {
+      // If headers were already sent, then do nothing else, it is probably a
+      // redirect response
+      if (res.headersSent) {
+        return;
+      }
+
       if (hasValue(html)) {
+        // Replace REST URL with UI URL
+        if (environment.ssr.replaceRestUrl && REST_BASE_URL !== environment.rest.baseUrl) {
+          html = html.replace(new RegExp(REST_BASE_URL, 'g'), environment.rest.baseUrl);
+        }
+
         // save server side rendered page to cache (if any are enabled)
         saveToCache(req, html);
         if (sendToUser) {
@@ -552,8 +567,8 @@ function createHttpsServer(keys) {
  * Create an HTTP server with the configured port and host.
  */
 function run() {
-  const port = environment.ui.port || 4000;
-  const host = environment.ui.host || '/';
+  const port = environment.ui.port;
+  const host = environment.ui.host;
 
   // Start up the Node server
   const server = app();
@@ -619,11 +634,26 @@ function start() {
   }
 }
 
+/**
+ * Check if SSR should be skipped for path
+ *
+ * @param path
+ * @param excludePathPattern
+ */
+function isExcludedFromSsr(path: string, excludePathPattern: SsrExcludePatterns[]): boolean {
+  const patterns = excludePathPattern.map(p =>
+    new RegExp(p.pattern, p.flag || '')
+  );
+  return patterns.some((regex) => {
+    return regex.test(path)
+  });
+}
+
 /*
  * The callback function to serve health check requests
  */
 function healthCheck(req, res) {
-  const baseUrl = `${environment.rest.baseUrl}${environment.actuators.endpointPath}`;
+  const baseUrl = `${REST_BASE_URL}${environment.actuators.endpointPath}`;
   axios.get(baseUrl)
     .then((response) => {
       res.status(response.status).send(response.data);

src/app/access-control/bulk-access/bulk-access.component.html

@@ -10,7 +10,7 @@
     <button class="btn btn-outline-primary mr-3" (click)="reset()">
       {{ 'access-control-cancel' | translate }}
     </button>
-    <button class="btn btn-primary" [disabled]="!canExport()" (click)="submit()">
+    <button class="btn btn-primary" [dsBtnDisabled]="!canExport()" (click)="submit()">
       {{ 'access-control-execute' | translate }}
     </button>
   </div>

src/app/access-control/bulk-access/bulk-access.component.spec.ts

@@ -1,4 +1,7 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  Component,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
@@ -62,10 +65,17 @@ describe('BulkAccessComponent', () => {
     'file': {  },
   };
 
-  const mockSettings: any = jasmine.createSpyObj('AccessControlFormContainerComponent',  {
-    getValue: jasmine.createSpy('getValue'),
-    reset: jasmine.createSpy('reset'),
-  });
+  @Component({
+    selector: 'ds-bulk-access-settings',
+    template: '',
+    exportAs: 'dsBulkSettings',
+    standalone: true,
+  })
+  class MockBulkAccessSettingsComponent {
+    isFormValid = jasmine.createSpy('isFormValid').and.returnValue(false);
+    getValue = jasmine.createSpy('getValue');
+    reset = jasmine.createSpy('reset');
+  }
   const selection: any[] = [{ indexableObject: { uuid: '1234' } }, { indexableObject: { uuid: '5678' } }];
   const selectableListState: SelectableListState = { id: 'test', selection };
   const expectedIdList = ['1234', '5678'];
@@ -93,6 +103,9 @@ describe('BulkAccessComponent', () => {
             BulkAccessSettingsComponent,
           ],
         },
+        add: {
+          imports: [MockBulkAccessSettingsComponent],
+        },
       })
       .compileComponents();
   });
@@ -109,13 +122,12 @@ describe('BulkAccessComponent', () => {
     fixture.destroy();
   });
 
-  describe('when there are no elements selected', () => {
+  describe('when there are no elements selected and step two form is invalid', () => {
 
     beforeEach(() => {
 
       (component as any).selectableListService.getSelectableList.and.returnValue(of(selectableListStateEmpty));
       fixture.detectChanges();
-      component.settings = mockSettings;
     });
 
     it('should create', () => {
@@ -138,7 +150,6 @@ describe('BulkAccessComponent', () => {
 
       (component as any).selectableListService.getSelectableList.and.returnValue(of(selectableListState));
       fixture.detectChanges();
-      component.settings = mockSettings;
     });
 
     it('should create', () => {
@@ -149,15 +160,29 @@ describe('BulkAccessComponent', () => {
       expect(component.objectsSelected$.value).toEqual(expectedIdList);
     });
 
-    it('should enable the execute button when there are objects selected', () => {
+    it('should not enable the execute button when there are objects selected and step two form is invalid', () => {
       component.objectsSelected$.next(['1234']);
-      expect(component.canExport()).toBe(true);
+      expect(component.canExport()).toBe(false);
     });
 
     it('should call the settings reset method when reset is called', () => {
       component.reset();
       expect(component.settings.reset).toHaveBeenCalled();
     });
+  });
+  describe('when there are elements selected and the step two form is valid', () => {
+
+    beforeEach(() => {
+
+      (component as any).selectableListService.getSelectableList.and.returnValue(of(selectableListState));
+      fixture.detectChanges();
+      (component as any).settings.isFormValid.and.returnValue(true);
+    });
+
+    it('should enable the execute button when there are objects selected and step two form is valid', () => {
+      component.objectsSelected$.next(['1234']);
+      expect(component.canExport()).toBe(true);
+    });
 
     it('should call the bulkAccessControlService executeScript method when submit is called', () => {
       (component.settings as any).getValue.and.returnValue(mockFormState);

src/app/access-control/bulk-access/bulk-access.component.ts

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   OnInit,
   ViewChild,
@@ -14,6 +15,7 @@ import {
 } from 'rxjs/operators';
 
 import { BulkAccessControlService } from '../../shared/access-control-form-container/bulk-access-control.service';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { SelectableListState } from '../../shared/object-list/selectable-list/selectable-list.reducer';
 import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
 import { BulkAccessBrowseComponent } from './browse/bulk-access-browse.component';
@@ -27,8 +29,10 @@ import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.com
     TranslateModule,
     BulkAccessSettingsComponent,
     BulkAccessBrowseComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BulkAccessComponent implements OnInit {
 
@@ -68,7 +72,7 @@ export class BulkAccessComponent implements OnInit {
   }
 
   canExport(): boolean {
-    return this.objectsSelected$.value?.length > 0;
+    return this.objectsSelected$.value?.length > 0  && this.settings?.isFormValid();
   }
 
   /**

src/app/access-control/bulk-access/settings/bulk-access-settings.component.ts

@@ -43,4 +43,8 @@ export class BulkAccessSettingsComponent {
     this.controlForm.reset();
   }
 
+  isFormValid() {
+    return this.controlForm.isValid();
+  }
+
 }

src/app/access-control/epeople-registry/epeople-registry.component.html

@@ -61,7 +61,7 @@
             </thead>
             <tbody>
             <tr *ngFor="let epersonDto of (ePeopleDto$ | async)?.page"
-                [ngClass]="{'table-primary' : isActive(epersonDto.eperson) | async}">
+                [ngClass]="{'table-primary' : (activeEPerson$ | async) === epersonDto.eperson}">
               <td>{{epersonDto.eperson.id}}</td>
               <td>{{ dsoNameService.getName(epersonDto.eperson) }}</td>
               <td>{{epersonDto.eperson.email}}</td>

src/app/access-control/epeople-registry/epeople-registry.component.spec.ts

@@ -42,6 +42,7 @@ import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { FormBuilderService } from '../../shared/form/builder/form-builder.service';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { getMockFormBuilderService } from '../../shared/mocks/form-builder-service.mock';
@@ -151,7 +152,7 @@ describe('EPeopleRegistryComponent', () => {
     paginationService = new PaginationServiceStub();
     TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, RouterTestingModule.withRoutes([]),
-        TranslateModule.forRoot(), EPeopleRegistryComponent],
+        TranslateModule.forRoot(), EPeopleRegistryComponent, BtnDisabledDirective],
       providers: [
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },

src/app/access-control/epeople-registry/epeople-registry.component.ts

@@ -100,6 +100,8 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    */
   ePeopleDto$: BehaviorSubject<PaginatedList<EpersonDtoModel>> = new BehaviorSubject<PaginatedList<EpersonDtoModel>>({} as any);
 
+  activeEPerson$: Observable<EPerson>;
+
   /**
    * An observable for the pageInfo, needed to pass to the pagination component
    */
@@ -165,6 +167,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
   initialisePage() {
     this.searching$.next(true);
     this.search({ scope: this.currentSearchScope, query: this.currentSearchQuery });
+    this.activeEPerson$ = this.epersonService.getActiveEPerson();
     this.subs.push(this.ePeople$.pipe(
       switchMap((epeople: PaginatedList<EPerson>) => {
         if (epeople.pageInfo.totalElements > 0) {
@@ -232,23 +235,6 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
     );
   }
 
-  /**
-   * Checks whether the given EPerson is active (being edited)
-   * @param eperson
-   */
-  isActive(eperson: EPerson): Observable<boolean> {
-    return this.getActiveEPerson().pipe(
-      map((activeEPerson) => eperson === activeEPerson),
-    );
-  }
-
-  /**
-   * Gets the active eperson (being edited)
-   */
-  getActiveEPerson(): Observable<EPerson> {
-    return this.epersonService.getActiveEPerson();
-  }
-
   /**
    * Deletes EPerson, show notification on success/failure & updates EPeople list
    */

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html

@@ -2,7 +2,7 @@
   <div class="group-form row">
     <div class="col-12">
 
-      <div *ngIf="epersonService.getActiveEPerson() | async; then editHeader; else createHeader"></div>
+      <div *ngIf="activeEPerson$ | async; then editHeader; else createHeader"></div>
 
       <ng-template #createHeader>
         <h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
@@ -25,7 +25,7 @@
           </button>
         </div>
         <div *ngIf="displayResetPassword" between class="btn-group">
-          <button class="btn btn-primary" [disabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
+          <button class="btn btn-primary" [dsBtnDisabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
             <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
           </button>
         </div>
@@ -44,7 +44,7 @@
 
       <ds-loading [showMessage]="false" *ngIf="!formGroup"></ds-loading>
 
-      <div *ngIf="epersonService.getActiveEPerson() | async">
+      <div *ngIf="activeEPerson$ | async">
         <h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
 
         <ds-loading [showMessage]="false" *ngIf="groups$ | async | dsHasNoValue"></ds-loading>
@@ -75,7 +75,9 @@
                     {{ dsoNameService.getName(group) }}
                   </a>
                 </td>
-                <td class="align-middle">{{ dsoNameService.getName(undefined) }}</td>
+                <td class="align-middle">
+                  {{ dsoNameService.getName((group.object | async)?.payload) }}
+                </td>
               </tr>
               </tbody>
             </table>

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
@@ -19,12 +19,10 @@ import {
 import {
   ActivatedRoute,
   Router,
+  RouterModule,
 } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import {
   Observable,
   of as observableOf,
@@ -45,11 +43,11 @@ import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { EPerson } from '../../../core/eperson/models/eperson.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PageInfo } from '../../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
 import { FormComponent } from '../../../shared/form/form.component';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
-import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { PaginationComponent } from '../../../shared/pagination/pagination.component';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
@@ -92,9 +90,6 @@ describe('EPersonFormComponent', () => {
     ePersonDataServiceStub = {
       activeEPerson: null,
       allEpeople: mockEPeople,
-      getEPeople(): Observable<RemoteData<PaginatedList<EPerson>>> {
-        return createSuccessfulRemoteDataObject$(buildPaginatedList(null, this.allEpeople));
-      },
       getActiveEPerson(): Observable<EPerson> {
         return observableOf(this.activeEPerson);
       },
@@ -227,13 +222,9 @@ describe('EPersonFormComponent', () => {
     route = new ActivatedRouteStub();
     router = new RouterStub();
     TestBed.configureTestingModule({
-      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateLoaderMock,
-          },
-        }),
+      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BtnDisabledDirective, BrowserModule,
+        RouterModule.forRoot([]),
+        TranslateModule.forRoot(),
         EPersonFormComponent,
         HasNoValuePipe,
       ],
@@ -251,7 +242,7 @@ describe('EPersonFormComponent', () => {
         { provide: Router, useValue: router },
         EPeopleRegistryComponent,
       ],
-      schemas: [NO_ERRORS_SCHEMA],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })
       .overrideComponent(EPersonFormComponent, {
         remove: { imports: [    ThemedLoadingComponent, PaginationComponent,FormComponent] },
@@ -274,37 +265,13 @@ describe('EPersonFormComponent', () => {
   });
 
   describe('check form validation', () => {
-    let firstName;
-    let lastName;
-    let email;
-    let canLogIn;
-    let requireCertificate;
+    let canLogIn: boolean;
+    let requireCertificate: boolean;
 
-    let expected;
     beforeEach(() => {
-      firstName = 'testName';
-      lastName = 'testLastName';
-      email = 'testEmail@test.com';
       canLogIn = false;
       requireCertificate = false;
 
-      expected = Object.assign(new EPerson(), {
-        metadata: {
-          'eperson.firstname': [
-            {
-              value: firstName,
-            },
-          ],
-          'eperson.lastname': [
-            {
-              value: lastName,
-            },
-          ],
-        },
-        email: email,
-        canLogIn: canLogIn,
-        requireCertificate: requireCertificate,
-      });
       spyOn(component.submitForm, 'emit');
       component.canLogIn.value = canLogIn;
       component.requireCertificate.value = requireCertificate;
@@ -378,15 +345,13 @@ describe('EPersonFormComponent', () => {
         expect(component.formGroup.controls.email.errors.emailTaken).toBeTruthy();
       });
     });
-
-
-
   });
+
   describe('when submitting the form', () => {
     let firstName;
     let lastName;
     let email;
-    let canLogIn;
+    let canLogIn: boolean;
     let requireCertificate;
 
     let expected;
@@ -415,6 +380,7 @@ describe('EPersonFormComponent', () => {
         requireCertificate: requireCertificate,
       });
       spyOn(component.submitForm, 'emit');
+      component.ngOnInit();
       component.firstName.value = firstName;
       component.lastName.value = lastName;
       component.email.value = email;
@@ -454,9 +420,17 @@ describe('EPersonFormComponent', () => {
           email: email,
           canLogIn: canLogIn,
           requireCertificate: requireCertificate,
-          _links: undefined,
+          _links: {
+            groups: {
+              href: '',
+            },
+            self: {
+              href: '',
+            },
+          },
         });
         spyOn(ePersonDataServiceStub, 'getActiveEPerson').and.returnValue(observableOf(expectedWithId));
+        component.ngOnInit();
         component.onSubmit();
         fixture.detectChanges();
       });
@@ -504,22 +478,19 @@ describe('EPersonFormComponent', () => {
   });
 
   describe('delete', () => {
-
-    let ePersonId;
     let eperson: EPerson;
     let modalService;
 
     beforeEach(() => {
       spyOn(authService, 'impersonate').and.callThrough();
-      ePersonId = 'testEPersonId';
       eperson = EPersonMock;
       component.epersonInitial = eperson;
       component.canDelete$ = observableOf(true);
       spyOn(component.epersonService, 'getActiveEPerson').and.returnValue(observableOf(eperson));
       modalService = (component as any).modalService;
       spyOn(modalService, 'open').and.returnValue(Object.assign({ componentInstance: Object.assign({ response: observableOf(true) }) }));
+      component.ngOnInit();
       fixture.detectChanges();
-
     });
 
     it('the delete button should be visible if the ePerson can be deleted', () => {
@@ -546,7 +517,8 @@ describe('EPersonFormComponent', () => {
       // ePersonDataServiceStub.activeEPerson = eperson;
       spyOn(component.epersonService, 'deleteEPerson').and.returnValue(createSuccessfulRemoteDataObject$('No Content', 204));
       const deleteButton = fixture.debugElement.query(By.css('.delete-button'));
-      expect(deleteButton.nativeElement.disabled).toBe(false);
+      expect(deleteButton.nativeElement.getAttribute('aria-disabled')).toBeNull();
+      expect(deleteButton.nativeElement.classList.contains('disabled')).toBeFalse();
       deleteButton.triggerEventHandler('click', null);
       fixture.detectChanges();
       expect(component.epersonService.deleteEPerson).toHaveBeenCalledWith(eperson);

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts

@@ -1,6 +1,5 @@
 import {
   AsyncPipe,
-  NgClass,
   NgFor,
   NgIf,
 } from '@angular/common';
@@ -65,6 +64,7 @@ import {
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { Registration } from '../../../core/shared/registration.model';
 import { TYPE_REQUEST_FORGOT } from '../../../register-email-form/register-email-form.component';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
 import { hasValue } from '../../../shared/empty.util';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
@@ -87,11 +87,11 @@ import { ValidateEmailNotTaken } from './validators/email-taken.validator';
     NgFor,
     AsyncPipe,
     TranslateModule,
-    NgClass,
     ThemedLoadingComponent,
     PaginationComponent,
     RouterLink,
     HasNoValuePipe,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
@@ -189,6 +189,11 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    */
   canImpersonate$: Observable<boolean>;
 
+  /**
+   * The current {@link EPerson}
+   */
+  activeEPerson$: Observable<EPerson>;
+
   /**
    * List of subscriptions
    */
@@ -254,7 +259,11 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     protected route: ActivatedRoute,
     protected router: Router,
   ) {
-    this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
+  }
+
+  ngOnInit() {
+    this.activeEPerson$ = this.epersonService.getActiveEPerson();
+    this.subs.push(this.activeEPerson$.subscribe((eperson: EPerson) => {
       this.epersonInitial = eperson;
       if (hasValue(eperson)) {
         this.isImpersonated = this.authService.isImpersonatingUser(eperson.id);
@@ -262,9 +271,6 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
         this.submitLabel = 'form.submit';
       }
     }));
-  }
-
-  ngOnInit() {
     this.initialisePage();
   }
 
@@ -272,130 +278,121 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    * This method will initialise the page
    */
   initialisePage() {
-    this.subs.push(this.epersonService.findById(this.route.snapshot.params.id).subscribe((ePersonRD: RemoteData<EPerson>) => {
-      this.epersonService.editEPerson(ePersonRD.payload);
-    }));
-    observableCombineLatest([
-      this.translateService.get(`${this.messagePrefix}.firstName`),
-      this.translateService.get(`${this.messagePrefix}.lastName`),
-      this.translateService.get(`${this.messagePrefix}.email`),
-      this.translateService.get(`${this.messagePrefix}.canLogIn`),
-      this.translateService.get(`${this.messagePrefix}.requireCertificate`),
-      this.translateService.get(`${this.messagePrefix}.emailHint`),
-    ]).subscribe(([firstName, lastName, email, canLogIn, requireCertificate, emailHint]) => {
-      this.firstName = new DynamicInputModel({
-        id: 'firstName',
-        label: firstName,
-        name: 'firstName',
-        validators: {
-          required: null,
-        },
-        required: true,
-      });
-      this.lastName = new DynamicInputModel({
-        id: 'lastName',
-        label: lastName,
-        name: 'lastName',
-        validators: {
-          required: null,
-        },
-        required: true,
-      });
-      this.email = new DynamicInputModel({
-        id: 'email',
-        label: email,
-        name: 'email',
-        validators: {
-          required: null,
-          pattern: '^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$',
-        },
-        required: true,
-        errorMessages: {
-          emailTaken: 'error.validation.emailTaken',
-          pattern: 'error.validation.NotValidEmail',
-        },
-        hint: emailHint,
-      });
-      this.canLogIn = new DynamicCheckboxModel(
-        {
-          id: 'canLogIn',
-          label: canLogIn,
-          name: 'canLogIn',
-          value: (this.epersonInitial != null ? this.epersonInitial.canLogIn : true),
-        });
-      this.requireCertificate = new DynamicCheckboxModel(
-        {
-          id: 'requireCertificate',
-          label: requireCertificate,
-          name: 'requireCertificate',
-          value: (this.epersonInitial != null ? this.epersonInitial.requireCertificate : false),
-        });
-      this.formModel = [
-        this.firstName,
-        this.lastName,
-        this.email,
-        this.canLogIn,
-        this.requireCertificate,
-      ];
-      this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-      this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
-        if (eperson != null) {
-          this.groups$ = this.groupsDataService.findListByHref(eperson._links.groups.href, {
-            currentPage: 1,
-            elementsPerPage: this.config.pageSize,
-          });
-        }
-        this.formGroup.patchValue({
-          firstName: eperson != null ? eperson.firstMetadataValue('eperson.firstname') : '',
-          lastName: eperson != null ? eperson.firstMetadataValue('eperson.lastname') : '',
-          email: eperson != null ? eperson.email : '',
-          canLogIn: eperson != null ? eperson.canLogIn : true,
-          requireCertificate: eperson != null ? eperson.requireCertificate : false,
-        });
-
-        if (eperson === null && !!this.formGroup.controls.email) {
-          this.formGroup.controls.email.setAsyncValidators(ValidateEmailNotTaken.createValidator(this.epersonService));
-          this.emailValueChangeSubscribe = this.email.valueChanges.pipe(debounceTime(300)).subscribe(() => {
-            this.changeDetectorRef.detectChanges();
-          });
-        }
+    if (this.route.snapshot.params.id) {
+      this.subs.push(this.epersonService.findById(this.route.snapshot.params.id).subscribe((ePersonRD: RemoteData<EPerson>) => {
+        this.epersonService.editEPerson(ePersonRD.payload);
       }));
-
-      const activeEPerson$ = this.epersonService.getActiveEPerson();
-
-      this.groups$ = activeEPerson$.pipe(
-        switchMap((eperson) => {
-          return observableCombineLatest([observableOf(eperson), this.paginationService.getFindListOptions(this.config.id, {
-            currentPage: 1,
-            elementsPerPage: this.config.pageSize,
-          })]);
-        }),
-        switchMap(([eperson, findListOptions]) => {
-          if (eperson != null) {
-            return this.groupsDataService.findListByHref(eperson._links.groups.href, findListOptions, true, true, followLink('object'));
-          }
-          return observableOf(undefined);
-        }),
-      );
-
-      this.groupsPageInfoState$ = this.groups$.pipe(
-        map(groupsRD => groupsRD.payload.pageInfo),
-      );
-
-      this.canImpersonate$ = activeEPerson$.pipe(
-        switchMap((eperson) => {
-          if (hasValue(eperson)) {
-            return this.authorizationService.isAuthorized(FeatureID.LoginOnBehalfOf, eperson.self);
-          } else {
-            return observableOf(false);
-          }
-        }),
-      );
-      this.canDelete$ = activeEPerson$.pipe(
-        switchMap((eperson) => this.authorizationService.isAuthorized(FeatureID.CanDelete, hasValue(eperson) ? eperson.self : undefined)),
-      );
-      this.canReset$ = observableOf(true);
+    }
+    this.firstName = new DynamicInputModel({
+      id: 'firstName',
+      label: this.translateService.instant(`${this.messagePrefix}.firstName`),
+      name: 'firstName',
+      validators: {
+        required: null,
+      },
+      required: true,
     });
+    this.lastName = new DynamicInputModel({
+      id: 'lastName',
+      label: this.translateService.instant(`${this.messagePrefix}.lastName`),
+      name: 'lastName',
+      validators: {
+        required: null,
+      },
+      required: true,
+    });
+    this.email = new DynamicInputModel({
+      id: 'email',
+      label: this.translateService.instant(`${this.messagePrefix}.email`),
+      name: 'email',
+      validators: {
+        required: null,
+        pattern: '^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$',
+      },
+      required: true,
+      errorMessages: {
+        emailTaken: 'error.validation.emailTaken',
+        pattern: 'error.validation.NotValidEmail',
+      },
+      hint: this.translateService.instant(`${this.messagePrefix}.emailHint`),
+    });
+    this.canLogIn = new DynamicCheckboxModel(
+      {
+        id: 'canLogIn',
+        label: this.translateService.instant(`${this.messagePrefix}.canLogIn`),
+        name: 'canLogIn',
+        value: (this.epersonInitial != null ? this.epersonInitial.canLogIn : true),
+      });
+    this.requireCertificate = new DynamicCheckboxModel(
+      {
+        id: 'requireCertificate',
+        label: this.translateService.instant(`${this.messagePrefix}.requireCertificate`),
+        name: 'requireCertificate',
+        value: (this.epersonInitial != null ? this.epersonInitial.requireCertificate : false),
+      });
+    this.formModel = [
+      this.firstName,
+      this.lastName,
+      this.email,
+      this.canLogIn,
+      this.requireCertificate,
+    ];
+    this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+    this.subs.push(this.activeEPerson$.subscribe((eperson: EPerson) => {
+      if (eperson != null) {
+        this.groups$ = this.groupsDataService.findListByHref(eperson._links.groups.href, {
+          currentPage: 1,
+          elementsPerPage: this.config.pageSize,
+        }, undefined, undefined, followLink('object'));
+      }
+      this.formGroup.patchValue({
+        firstName: eperson != null ? eperson.firstMetadataValue('eperson.firstname') : '',
+        lastName: eperson != null ? eperson.firstMetadataValue('eperson.lastname') : '',
+        email: eperson != null ? eperson.email : '',
+        canLogIn: eperson != null ? eperson.canLogIn : true,
+        requireCertificate: eperson != null ? eperson.requireCertificate : false,
+      });
+
+      if (eperson === null && !!this.formGroup.controls.email) {
+        this.formGroup.controls.email.setAsyncValidators(ValidateEmailNotTaken.createValidator(this.epersonService));
+        this.emailValueChangeSubscribe = this.email.valueChanges.pipe(debounceTime(300)).subscribe(() => {
+          this.changeDetectorRef.detectChanges();
+        });
+      }
+    }));
+
+    this.groups$ = this.activeEPerson$.pipe(
+      switchMap((eperson) => {
+        return observableCombineLatest([observableOf(eperson), this.paginationService.getFindListOptions(this.config.id, {
+          currentPage: 1,
+          elementsPerPage: this.config.pageSize,
+        })]);
+      }),
+      switchMap(([eperson, findListOptions]) => {
+        if (eperson != null) {
+          return this.groupsDataService.findListByHref(eperson._links.groups.href, findListOptions, true, true, followLink('object'));
+        }
+        return observableOf(undefined);
+      }),
+    );
+
+    this.groupsPageInfoState$ = this.groups$.pipe(
+      map(groupsRD => groupsRD.payload.pageInfo),
+    );
+
+    this.canImpersonate$ = this.activeEPerson$.pipe(
+      switchMap((eperson) => {
+        if (hasValue(eperson)) {
+          return this.authorizationService.isAuthorized(FeatureID.LoginOnBehalfOf, eperson.self);
+        } else {
+          return observableOf(false);
+        }
+      }),
+    );
+    this.canDelete$ = this.activeEPerson$.pipe(
+      switchMap((eperson) => this.authorizationService.isAuthorized(FeatureID.CanDelete, hasValue(eperson) ? eperson.self : undefined)),
+    );
+    this.canReset$ = observableOf(true);
   }
 
   /**
@@ -414,7 +411,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    * Emit the updated/created eperson using the EventEmitter submitForm
    */
   onSubmit() {
-    this.epersonService.getActiveEPerson().pipe(take(1)).subscribe(
+    this.activeEPerson$.pipe(take(1)).subscribe(
       (ePerson: EPerson) => {
         const values = {
           metadata: {
@@ -533,7 +530,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    * It'll either show a success or error message depending on whether the delete was successful or not.
    */
   delete(): void {
-    this.epersonService.getActiveEPerson().pipe(
+    this.activeEPerson$.pipe(
       take(1),
       switchMap((eperson: EPerson) => {
         const modalRef = this.modalService.open(ConfirmationModalComponent);
@@ -637,7 +634,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    * Update the list of groups by fetching it from the rest api or cache
    */
   private updateGroups(options) {
-    this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
+    this.subs.push(this.activeEPerson$.subscribe((eperson: EPerson) => {
       this.groups$ = this.groupsDataService.findListByHref(eperson._links.groups.href, options);
     }));
   }

src/app/access-control/group-registry/group-form/group-form.component.html

@@ -2,7 +2,7 @@
   <div class="group-form row">
     <div class="col-12">
 
-      <div *ngIf="groupDataService.getActiveGroup() | async; then editHeader; else createHeader"></div>
+      <div *ngIf="activeGroup$ | async; then editHeader; else createHeader"></div>
 
       <ng-template #createHeader>
         <h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h1>
@@ -23,11 +23,15 @@
         </h1>
       </ng-template>
 
-      <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
-                [content]="messagePrefix + '.alert.permanent'"></ds-alert>
-      <ds-alert *ngIf="(canEdit$ | async) !== true && (groupDataService.getActiveGroup() | async)" [type]="AlertTypeEnum.Warning"
-                [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: dsoNameService.getName((getLinkedDSO(groupBeingEdited) | async)?.payload), comcol: (getLinkedDSO(groupBeingEdited) | async)?.payload?.type, comcolEditRolesRoute: (getLinkedEditRolesRoute(groupBeingEdited) | async) })">
-      </ds-alert>
+      <ng-container *ngIf="(activeGroup$ | async) as groupBeingEdited">
+        <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertType.Warning"
+                  [content]="messagePrefix + '.alert.permanent'"></ds-alert>
+        <ng-container *ngIf="(activeGroupLinkedDSO$ | async) as activeGroupLinkedDSO">
+          <ds-alert *ngIf="(canEdit$ | async) !== true" [type]="AlertType.Warning"
+                    [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: dsoNameService.getName(activeGroupLinkedDSO), comcol: activeGroupLinkedDSO.type, comcolEditRolesRoute: (linkedEditRolesRoute$ | async) })">
+          </ds-alert>
+        </ng-container>
+      </ng-container>
 
       <ds-form [formId]="formId"
                [formModel]="formModel"
@@ -39,22 +43,21 @@
           <button (click)="onCancel()" type="button"
                   class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
         </div>
-        <div after *ngIf="(canEdit$ | async) && !groupBeingEdited?.permanent" class="btn-group">
+        <div after *ngIf="(canEdit$ | async) && !(activeGroup$ | async)?.permanent" class="btn-group">
           <button (click)="delete()" class="btn btn-danger delete-button" type="button">
             <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
           </button>
         </div>
       </ds-form>
 
-      <div class="mb-5">
-        <ds-members-list *ngIf="groupBeingEdited !== undefined"
-                         [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
-      </div>
-      <ds-subgroups-list *ngIf="groupBeingEdited !== undefined"
-                         [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
-
-
-
+      <ng-container *ngIf="(activeGroup$ | async) as groupBeingEdited">
+        <div class="mb-5">
+          <ds-members-list *ngIf="groupBeingEdited !== undefined"
+                           [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
+        </div>
+        <ds-subgroups-list *ngIf="groupBeingEdited !== undefined"
+                           [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
+      </ng-container>
     </div>
   </div>
 </div>

src/app/access-control/group-registry/group-form/group-form.component.spec.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
@@ -23,11 +23,7 @@ import {
 } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
-import {
-  TranslateLoader,
-  TranslateModule,
-  TranslateService,
-} from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { Operation } from 'fast-json-patch';
 import {
   Observable,
@@ -61,15 +57,14 @@ import { FormComponent } from '../../../shared/form/form.component';
 import { DSONameServiceMock } from '../../../shared/mocks/dso-name.service.mock';
 import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
 import { RouterMock } from '../../../shared/mocks/router.mock';
-import { getMockTranslateService } from '../../../shared/mocks/translate.service.mock';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
 import {
   GroupMock,
   GroupMock2,
 } from '../../../shared/testing/group-mock';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
-import { TranslateLoaderMock } from '../../../shared/testing/translate-loader.mock';
 import { GroupFormComponent } from './group-form.component';
 import { MembersListComponent } from './members-list/members-list.component';
 import { SubgroupsListComponent } from './subgroup-list/subgroups-list.component';
@@ -78,19 +73,19 @@ import { ValidateGroupExists } from './validators/group-exists.validator';
 describe('GroupFormComponent', () => {
   let component: GroupFormComponent;
   let fixture: ComponentFixture<GroupFormComponent>;
-  let translateService: TranslateService;
   let builderService: FormBuilderService;
   let ePersonDataServiceStub: any;
   let groupsDataServiceStub: any;
   let dsoDataServiceStub: any;
   let authorizationService: AuthorizationDataService;
   let notificationService: NotificationsServiceStub;
-  let router;
+  let router: RouterMock;
+  let route: ActivatedRouteStub;
 
-  let groups;
-  let groupName;
-  let groupDescription;
-  let expected;
+  let groups: Group[];
+  let groupName: string;
+  let groupDescription: string;
+  let expected: Group;
 
   beforeEach(waitForAsync(() => {
     groups = [GroupMock, GroupMock2];
@@ -105,6 +100,15 @@ describe('GroupFormComponent', () => {
           },
         ],
       },
+      object: createSuccessfulRemoteDataObject$(undefined),
+      _links: {
+        self: {
+          href: 'group-selflink',
+        },
+        object: {
+          href: 'group-objectlink',
+        },
+      },
     });
     ePersonDataServiceStub = {};
     groupsDataServiceStub = {
@@ -141,7 +145,14 @@ describe('GroupFormComponent', () => {
       create(group: Group): Observable<RemoteData<Group>> {
         this.allGroups = [...this.allGroups, group];
         this.createdGroup = Object.assign({}, group, {
-          _links: { self: { href: 'group-selflink' } },
+          _links: {
+            self: {
+              href: 'group-selflink',
+            },
+            object: {
+              href: 'group-objectlink',
+            },
+          },
         });
         return createSuccessfulRemoteDataObject$(this.createdGroup);
       },
@@ -223,17 +234,15 @@ describe('GroupFormComponent', () => {
         return typeof value === 'object' && value !== null;
       },
     });
-    translateService = getMockTranslateService();
     router = new RouterMock();
+    route = new ActivatedRouteStub();
     notificationService = new NotificationsServiceStub();
+
     return TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateLoaderMock,
-          },
-        }), GroupFormComponent],
+        TranslateModule.forRoot(),
+        GroupFormComponent,
+      ],
       providers: [
         { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
@@ -249,14 +258,11 @@ describe('GroupFormComponent', () => {
         { provide: Store, useValue: {} },
         { provide: RemoteDataBuildService, useValue: {} },
         { provide: HALEndpointService, useValue: {} },
-        {
-          provide: ActivatedRoute,
-          useValue: { data: observableOf({ dso: { payload: {} } }), params: observableOf({}) },
-        },
+        { provide: ActivatedRoute, useValue: route },
         { provide: Router, useValue: router },
         { provide: AuthorizationDataService, useValue: authorizationService },
       ],
-      schemas: [NO_ERRORS_SCHEMA],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })
       .overrideComponent(GroupFormComponent, {
         remove: { imports: [
@@ -279,8 +285,8 @@ describe('GroupFormComponent', () => {
   describe('when submitting the form', () => {
     beforeEach(() => {
       spyOn(component.submitForm, 'emit');
-      component.groupName.value = groupName;
-      component.groupDescription.value = groupDescription;
+      component.groupName.setValue(groupName);
+      component.groupDescription.setValue(groupDescription);
     });
     describe('without active Group', () => {
       beforeEach(() => {
@@ -288,14 +294,22 @@ describe('GroupFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should emit a new group using the correct values', (async () => {
-        await fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
-        });
+      it('should emit a new group using the correct values', (() => {
+        expect(component.submitForm.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+          name: groupName,
+          metadata: {
+            'dc.description': [
+              {
+                value: groupDescription,
+              },
+            ],
+          },
+        }));
       }));
     });
+
     describe('with active Group', () => {
-      let expected2;
+      let expected2: Group;
       beforeEach(() => {
         expected2 = Object.assign(new Group(), {
           name: 'newGroupName',
@@ -306,15 +320,24 @@ describe('GroupFormComponent', () => {
               },
             ],
           },
+          object: createSuccessfulRemoteDataObject$(undefined),
+          _links: {
+            self: {
+              href: 'group-selflink',
+            },
+            object: {
+              href: 'group-objectlink',
+            },
+          },
         });
         spyOn(groupsDataServiceStub, 'getActiveGroup').and.returnValue(observableOf(expected));
         spyOn(groupsDataServiceStub, 'patch').and.returnValue(createSuccessfulRemoteDataObject$(expected2));
-        component.groupName.value = 'newGroupName';
-        component.onSubmit();
-        fixture.detectChanges();
+        component.ngOnInit();
       });
 
       it('should edit with name and description operations', () => {
+        component.groupName.setValue('newGroupName');
+        component.onSubmit();
         const operations = [{
           op: 'add',
           path: '/metadata/dc.description',
@@ -328,9 +351,8 @@ describe('GroupFormComponent', () => {
       });
 
       it('should edit with description operations', () => {
-        component.groupName.value = null;
+        component.groupName.setValue(null);
         component.onSubmit();
-        fixture.detectChanges();
         const operations = [{
           op: 'add',
           path: '/metadata/dc.description',
@@ -340,9 +362,9 @@ describe('GroupFormComponent', () => {
       });
 
       it('should edit with name operations', () => {
-        component.groupDescription.value = null;
+        component.groupName.setValue('newGroupName');
+        component.groupDescription.setValue(null);
         component.onSubmit();
-        fixture.detectChanges();
         const operations = [{
           op: 'replace',
           path: '/name',
@@ -351,12 +373,13 @@ describe('GroupFormComponent', () => {
         expect(groupsDataServiceStub.patch).toHaveBeenCalledWith(expected, operations);
       });
 
-      it('should emit the existing group using the correct new values', (async () => {
-        await fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expected2);
-        });
-      }));
+      it('should emit the existing group using the correct new values', () => {
+        component.onSubmit();
+        expect(component.submitForm.emit).toHaveBeenCalledWith(expected2);
+      });
+
       it('should emit success notification', () => {
+        component.onSubmit();
         expect(notificationService.success).toHaveBeenCalled();
       });
     });
@@ -371,11 +394,8 @@ describe('GroupFormComponent', () => {
 
 
   describe('check form validation', () => {
-    let groupCommunity;
-
     beforeEach(() => {
       groupName = 'testName';
-      groupCommunity = 'testgroupCommunity';
       groupDescription = 'testgroupDescription';
 
       expected = Object.assign(new Group(), {
@@ -387,8 +407,17 @@ describe('GroupFormComponent', () => {
             },
           ],
         },
+        _links: {
+          self: {
+            href: 'group-selflink',
+          },
+          object: {
+            href: 'group-objectlink',
+          },
+        },
       });
       spyOn(component.submitForm, 'emit');
+      spyOn(dsoDataServiceStub, 'findByHref').and.returnValue(observableOf(expected));
 
       fixture.detectChanges();
       component.initialisePage();
@@ -438,21 +467,20 @@ describe('GroupFormComponent', () => {
   });
 
   describe('delete', () => {
-    let deleteButton;
+    let deleteButton: HTMLButtonElement;
 
-    beforeEach(() => {
-      component.initialisePage();
-
-      component.canEdit$ = observableOf(true);
-      component.groupBeingEdited = {
+    beforeEach(async () => {
+      spyOn(groupsDataServiceStub, 'delete').and.callThrough();
+      component.activeGroup$ = observableOf({
+        id: 'active-group',
         permanent: false,
-      } as Group;
+      } as Group);
+      component.canEdit$ = observableOf(true);
+
+      component.initialisePage();
 
       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', () => {

src/app/access-control/group-registry/group-form/group-form.component.ts

@@ -11,7 +11,10 @@ import {
   OnInit,
   Output,
 } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
+import {
+  AbstractControl,
+  UntypedFormGroup,
+} from '@angular/forms';
 import {
   ActivatedRoute,
   Router,
@@ -31,13 +34,10 @@ import { Operation } from 'fast-json-patch';
 import {
   combineLatest as observableCombineLatest,
   Observable,
-  of as observableOf,
   Subscription,
 } from 'rxjs';
 import {
-  catchError,
   debounceTime,
-  filter,
   map,
   switchMap,
   take,
@@ -53,7 +53,6 @@ import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { RequestService } from '../../../core/data/request.service';
-import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
 import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { Group } from '../../../core/eperson/models/group.model';
 import { Collection } from '../../../core/shared/collection.model';
@@ -61,9 +60,9 @@ import { Community } from '../../../core/shared/community.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { NoContent } from '../../../core/shared/NoContent.model';
 import {
+  getAllCompletedRemoteData,
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
-  getFirstSucceededRemoteDataPayload,
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
 import { AlertComponent } from '../../../shared/alert/alert.component';
@@ -117,9 +116,9 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   /**
    * Dynamic models for the inputs of form
    */
-  groupName: DynamicInputModel;
-  groupCommunity: DynamicInputModel;
-  groupDescription: DynamicTextAreaModel;
+  groupName: AbstractControl;
+  groupCommunity: AbstractControl;
+  groupDescription: AbstractControl;
 
   /**
    * A list of all dynamic input models
@@ -162,21 +161,30 @@ export class GroupFormComponent implements OnInit, OnDestroy {
    */
   subs: Subscription[] = [];
 
-  /**
-   * Group currently being edited
-   */
-  groupBeingEdited: Group;
-
   /**
    * Observable whether or not the logged in user is allowed to delete the Group & doesn't have a linked object (community / collection linked to workspace group
    */
   canEdit$: Observable<boolean>;
 
   /**
-   * The AlertType enumeration
-   * @type {AlertType}
+   * The current {@link Group}
    */
-  public AlertTypeEnum = AlertType;
+  activeGroup$: Observable<Group>;
+
+  /**
+   * The current {@link Group}'s linked {@link Community}/{@link Collection}
+   */
+  activeGroupLinkedDSO$: Observable<DSpaceObject>;
+
+  /**
+   * Link to the current {@link Group}'s {@link Community}/{@link Collection} edit role tab
+   */
+  linkedEditRolesRoute$: Observable<string>;
+
+  /**
+   * The AlertType enumeration
+   */
+  public readonly AlertType = AlertType;
 
   /**
    * Subscription to email field value change
@@ -186,126 +194,121 @@ export class GroupFormComponent implements OnInit, OnDestroy {
 
   constructor(
     public groupDataService: GroupDataService,
-    private ePersonDataService: EPersonDataService,
-    private dSpaceObjectDataService: DSpaceObjectDataService,
-    private formBuilderService: FormBuilderService,
-    private translateService: TranslateService,
-    private notificationsService: NotificationsService,
-    private route: ActivatedRoute,
+    protected dSpaceObjectDataService: DSpaceObjectDataService,
+    protected formBuilderService: FormBuilderService,
+    protected translateService: TranslateService,
+    protected notificationsService: NotificationsService,
+    protected route: ActivatedRoute,
     protected router: Router,
-    private authorizationService: AuthorizationDataService,
-    private modalService: NgbModal,
+    protected authorizationService: AuthorizationDataService,
+    protected modalService: NgbModal,
     public requestService: RequestService,
     protected changeDetectorRef: ChangeDetectorRef,
     public dsoNameService: DSONameService,
   ) {
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
+    if (this.route.snapshot.params.groupId !== 'newGroup') {
+      this.setActiveGroup(this.route.snapshot.params.groupId);
+    }
+    this.activeGroup$ = this.groupDataService.getActiveGroup();
+    this.activeGroupLinkedDSO$ = this.getActiveGroupLinkedDSO();
+    this.linkedEditRolesRoute$ = this.getLinkedEditRolesRoute();
+    this.canEdit$ = this.activeGroupLinkedDSO$.pipe(
+      switchMap((dso: DSpaceObject) => {
+        if (hasValue(dso)) {
+          return [false];
+        } else {
+          return this.activeGroup$.pipe(
+            hasValueOperator(),
+            switchMap((group: Group) => this.authorizationService.isAuthorized(FeatureID.CanDelete, group.self)),
+          );
+        }
+      }),
+    );
     this.initialisePage();
   }
 
   initialisePage() {
-    this.subs.push(this.route.params.subscribe((params) => {
-      if (params.groupId !== 'newGroup') {
-        this.setActiveGroup(params.groupId);
-      }
-    }));
-    this.canEdit$ = this.groupDataService.getActiveGroup().pipe(
-      hasValueOperator(),
-      switchMap((group: Group) => {
-        return observableCombineLatest([
-          this.authorizationService.isAuthorized(FeatureID.CanDelete, isNotEmpty(group) ? group.self : undefined),
-          this.hasLinkedDSO(group),
-        ]).pipe(
-          map(([isAuthorized, hasLinkedDSO]: [boolean, boolean]) => isAuthorized && !hasLinkedDSO),
-        );
+    const groupNameModel = new DynamicInputModel({
+      id: 'groupName',
+      label: this.translateService.instant(`${this.messagePrefix}.groupName`),
+      name: 'groupName',
+      validators: {
+        required: null,
+      },
+      required: true,
+    });
+    const groupCommunityModel = new DynamicInputModel({
+      id: 'groupCommunity',
+      label: this.translateService.instant(`${this.messagePrefix}.groupCommunity`),
+      name: 'groupCommunity',
+      required: false,
+      readOnly: true,
+    });
+    const groupDescriptionModel = new DynamicTextAreaModel({
+      id: 'groupDescription',
+      label: this.translateService.instant(`${this.messagePrefix}.groupDescription`),
+      name: 'groupDescription',
+      required: false,
+      spellCheck: environment.form.spellCheck,
+    });
+    this.formModel = [
+      groupNameModel,
+      groupDescriptionModel,
+    ];
+    this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+    this.groupName = this.formGroup.get('groupName');
+    this.groupDescription = this.formGroup.get('groupDescription');
+
+    if (hasValue(this.groupName)) {
+      this.groupName.setAsyncValidators(ValidateGroupExists.createValidator(this.groupDataService));
+      this.groupNameValueChangeSubscribe = this.groupName.valueChanges.pipe(debounceTime(300)).subscribe(() => {
+        this.changeDetectorRef.detectChanges();
+      });
+    }
+
+    this.subs.push(
+      observableCombineLatest([
+        this.activeGroup$,
+        this.canEdit$,
+        this.activeGroupLinkedDSO$,
+      ]).subscribe(([activeGroup, canEdit, linkedObject]) => {
+
+        if (activeGroup != null) {
+
+          // Disable group name exists validator
+          this.formGroup.controls.groupName.clearAsyncValidators();
+
+          if (isNotEmpty(linkedObject?.name)) {
+            if (!this.formGroup.controls.groupCommunity) {
+              this.formBuilderService.insertFormGroupControl(1, this.formGroup, this.formModel, groupCommunityModel);
+              this.groupDescription = this.formGroup.get('groupCommunity');
+            }
+            this.formGroup.patchValue({
+              groupName: activeGroup.name,
+              groupCommunity: linkedObject?.name ?? '',
+              groupDescription: activeGroup.firstMetadataValue('dc.description'),
+            });
+          } else {
+            this.formModel = [
+              groupNameModel,
+              groupDescriptionModel,
+            ];
+            this.formGroup.patchValue({
+              groupName: activeGroup.name,
+              groupDescription: activeGroup.firstMetadataValue('dc.description'),
+            });
+          }
+          if (!canEdit || activeGroup.permanent) {
+            this.formGroup.disable();
+          } else {
+            this.formGroup.enable();
+          }
+        }
       }),
     );
-    observableCombineLatest([
-      this.translateService.get(`${this.messagePrefix}.groupName`),
-      this.translateService.get(`${this.messagePrefix}.groupCommunity`),
-      this.translateService.get(`${this.messagePrefix}.groupDescription`),
-    ]).subscribe(([groupName, groupCommunity, groupDescription]) => {
-      this.groupName = new DynamicInputModel({
-        id: 'groupName',
-        label: groupName,
-        name: 'groupName',
-        validators: {
-          required: null,
-        },
-        required: true,
-      });
-      this.groupCommunity = new DynamicInputModel({
-        id: 'groupCommunity',
-        label: groupCommunity,
-        name: 'groupCommunity',
-        required: false,
-        readOnly: true,
-      });
-      this.groupDescription = new DynamicTextAreaModel({
-        id: 'groupDescription',
-        label: groupDescription,
-        name: 'groupDescription',
-        required: false,
-        spellCheck: environment.form.spellCheck,
-      });
-      this.formModel = [
-        this.groupName,
-        this.groupDescription,
-      ];
-      this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-
-      if (this.formGroup.controls.groupName) {
-        this.formGroup.controls.groupName.setAsyncValidators(ValidateGroupExists.createValidator(this.groupDataService));
-        this.groupNameValueChangeSubscribe = this.groupName.valueChanges.pipe(debounceTime(300)).subscribe(() => {
-          this.changeDetectorRef.detectChanges();
-        });
-      }
-
-      this.subs.push(
-        observableCombineLatest([
-          this.groupDataService.getActiveGroup(),
-          this.canEdit$,
-          this.groupDataService.getActiveGroup()
-            .pipe(filter((activeGroup) => hasValue(activeGroup)),switchMap((activeGroup) => this.getLinkedDSO(activeGroup).pipe(getFirstSucceededRemoteDataPayload()))),
-        ]).subscribe(([activeGroup, canEdit, linkedObject]) => {
-
-          if (activeGroup != null) {
-
-            // Disable group name exists validator
-            this.formGroup.controls.groupName.clearAsyncValidators();
-
-            this.groupBeingEdited = activeGroup;
-
-            if (linkedObject?.name) {
-              if (!this.formGroup.controls.groupCommunity) {
-                this.formBuilderService.insertFormGroupControl(1, this.formGroup, this.formModel, this.groupCommunity);
-                this.formGroup.patchValue({
-                  groupName: activeGroup.name,
-                  groupCommunity: linkedObject?.name ?? '',
-                  groupDescription: activeGroup.firstMetadataValue('dc.description'),
-                });
-              }
-            } else {
-              this.formModel = [
-                this.groupName,
-                this.groupDescription,
-              ];
-              this.formGroup.patchValue({
-                groupName: activeGroup.name,
-                groupDescription: activeGroup.firstMetadataValue('dc.description'),
-              });
-            }
-            setTimeout(() => {
-              if (!canEdit || activeGroup.permanent) {
-                this.formGroup.disable();
-              }
-            }, 200);
-          }
-        }),
-      );
-    });
   }
 
   /**
@@ -324,9 +327,9 @@ export class GroupFormComponent implements OnInit, OnDestroy {
    * Emit the updated/created eperson using the EventEmitter submitForm
    */
   onSubmit() {
-    this.groupDataService.getActiveGroup().pipe(take(1)).subscribe(
-      (group: Group) => {
-        const values = {
+    this.activeGroup$.pipe(take(1)).subscribe((group: Group) => {
+      if (group === null) {
+        this.createNewGroup({
           name: this.groupName.value,
           metadata: {
             'dc.description': [
@@ -335,14 +338,11 @@ export class GroupFormComponent implements OnInit, OnDestroy {
               },
             ],
           },
-        };
-        if (group === null) {
-          this.createNewGroup(values);
-        } else {
-          this.editGroup(group);
-        }
-      },
-    );
+        });
+      } else {
+        this.editGroup(group);
+      }
+    });
   }
 
   /**
@@ -448,7 +448,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
    * @param groupSelfLink   SelfLink of group to set as active
    */
   setActiveGroupWithLink(groupSelfLink: string) {
-    this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((activeGroup: Group) => {
+    this.activeGroup$.pipe(take(1)).subscribe((activeGroup: Group) => {
       if (activeGroup === null) {
         this.groupDataService.cancelEditGroup();
         this.groupDataService.findByHref(groupSelfLink, false, false, followLink('subgroups'), followLink('epersons'), followLink('object'))
@@ -467,7 +467,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
    * It'll either show a success or error message depending on whether the delete was successful or not.
    */
   delete() {
-    this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((group: Group) => {
+    this.activeGroup$.pipe(take(1)).subscribe((group: Group) => {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
       modalRef.componentInstance.name = this.dsoNameService.getName(group);
       modalRef.componentInstance.headerLabel = this.messagePrefix + '.delete-group.modal.header';
@@ -504,59 +504,45 @@ export class GroupFormComponent implements OnInit, OnDestroy {
     this.groupDataService.cancelEditGroup();
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
 
-    if ( hasValue(this.groupNameValueChangeSubscribe) ) {
+    if (hasValue(this.groupNameValueChangeSubscribe)) {
       this.groupNameValueChangeSubscribe.unsubscribe();
     }
 
   }
 
   /**
-   * Check if group has a linked object (community or collection linked to a workflow group)
-   * @param group
+   * Get the active {@link Group}'s linked object if it has one ({@link Community} or {@link Collection} linked to a
+   * workflow group)
    */
-  hasLinkedDSO(group: Group): Observable<boolean> {
-    if (hasValue(group) && hasValue(group._links.object.href)) {
-      return this.getLinkedDSO(group).pipe(
-        map((rd: RemoteData<DSpaceObject>) => {
-          return hasValue(rd) && hasValue(rd.payload);
-        }),
-        catchError(() => observableOf(false)),
-      );
-    }
+  getActiveGroupLinkedDSO(): Observable<DSpaceObject> {
+    return this.activeGroup$.pipe(
+      hasValueOperator(),
+      switchMap((group: Group) => {
+        if (group.object === undefined) {
+          return this.dSpaceObjectDataService.findByHref(group._links.object.href);
+        }
+        return group.object;
+      }),
+      getAllCompletedRemoteData(),
+      getRemoteDataPayload(),
+    );
   }
 
   /**
-   * Get group's linked object if it has one (community or collection linked to a workflow group)
-   * @param group
+   * Get the route to the edit roles tab of the active {@link Group}'s linked object (community or collection linked
+   * to a workflow group) if it has one
    */
-  getLinkedDSO(group: Group): Observable<RemoteData<DSpaceObject>> {
-    if (hasValue(group) && hasValue(group._links.object.href)) {
-      if (group.object === undefined) {
-        return this.dSpaceObjectDataService.findByHref(group._links.object.href);
-      }
-      return group.object;
-    }
-  }
-
-  /**
-   * Get the route to the edit roles tab of the group's linked object (community or collection linked to a workflow group) if it has one
-   * @param group
-   */
-  getLinkedEditRolesRoute(group: Group): Observable<string> {
-    if (hasValue(group) && hasValue(group._links.object.href)) {
-      return this.getLinkedDSO(group).pipe(
-        map((rd: RemoteData<DSpaceObject>) => {
-          if (hasValue(rd) && hasValue(rd.payload)) {
-            const dso = rd.payload;
-            switch ((dso as any).type) {
-              case Community.type.value:
-                return getCommunityEditRolesRoute(rd.payload.id);
-              case Collection.type.value:
-                return getCollectionEditRolesRoute(rd.payload.id);
-            }
-          }
-        }),
-      );
-    }
+  getLinkedEditRolesRoute(): Observable<string> {
+    return this.activeGroupLinkedDSO$.pipe(
+      hasValueOperator(),
+      map((dso: DSpaceObject) => {
+        switch ((dso as any).type) {
+          case Community.type.value:
+            return getCommunityEditRolesRoute(dso.id);
+          case Collection.type.value:
+            return getCollectionEditRolesRoute(dso.id);
+        }
+      }),
+    );
   }
 }

src/app/access-control/group-registry/group-form/members-list/members-list.component.html

@@ -35,14 +35,14 @@
             <div class="btn-group edit-field">
               <button (click)="deleteMemberFromGroup(epersonDTO.eperson)"
                       *ngIf="epersonDTO.ableToDelete"
-                      [disabled]="actionConfig.remove.disabled"
+                      [dsBtnDisabled]="actionConfig.remove.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.remove.css]"
                       title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDTO.eperson) } }}">
                 <i [ngClass]="actionConfig.remove.icon"></i>
               </button>
               <button *ngIf="!epersonDTO.ableToDelete"
                       (click)="addMemberToGroup(epersonDTO.eperson)"
-                      [disabled]="actionConfig.add.disabled"
+                      [dsBtnDisabled]="actionConfig.add.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.add.css]"
                       title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(epersonDTO.eperson) } }}">
                 <i [ngClass]="actionConfig.add.icon"></i>
@@ -122,7 +122,7 @@
           <td class="align-middle">
             <div class="btn-group edit-field">
               <button (click)="addMemberToGroup(eperson)"
-                      [disabled]="actionConfig.add.disabled"
+                      [dsBtnDisabled]="actionConfig.add.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.add.css]"
                       title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(eperson) } }}">
                 <i [ngClass]="actionConfig.add.icon"></i>

src/app/access-control/group-registry/group-form/members-list/members-list.component.ts

@@ -54,6 +54,7 @@ import {
   getFirstCompletedRemoteData,
   getRemoteDataPayload,
 } from '../../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import { ContextHelpDirective } from '../../../../shared/context-help.directive';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
@@ -113,6 +114,7 @@ export interface EPersonListActionConfig {
     RouterLink,
     NgClass,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/access-control/group-registry/groups-registry.component.html

@@ -69,7 +69,7 @@
                       <i class="fas fa-edit fa-fw"></i>
                     </button>
                     <button *ngSwitchCase="false"
-                      [disabled]="true"
+                      [dsBtnDisabled]="true"
                       class="btn btn-outline-primary btn-sm btn-edit"
                       placement="left"
                       [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"

src/app/access-control/group-registry/groups-registry.component.spec.ts

@@ -50,6 +50,7 @@ import { RouteService } from '../../core/services/route.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { NoContent } from '../../core/shared/NoContent.model';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import {
   DSONameServiceMock,
   UNDEFINED_NAME,
@@ -208,6 +209,7 @@ describe('GroupsRegistryComponent', () => {
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot(),
         GroupsRegistryComponent,
+        BtnDisabledDirective,
       ],
       providers: [GroupsRegistryComponent,
         { provide: DSONameService, useValue: new DSONameServiceMock() },
@@ -278,7 +280,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBeNull();
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeFalse();
         });
       });
 
@@ -312,7 +315,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBeNull();
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeFalse();
         });
       });
     });
@@ -331,7 +335,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeTrue();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBe('true');
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeTrue();
         });
       });
     });

src/app/access-control/group-registry/groups-registry.component.ts

@@ -62,6 +62,7 @@ import {
   getRemoteDataPayload,
 } from '../../core/shared/operators';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { hasValue } from '../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -84,6 +85,7 @@ import { followLink } from '../../shared/utils/follow-link-config.model';
     NgSwitchCase,
     NgbTooltipModule,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/accessibility/accessibility-settings.config.ts

@@ -0,0 +1,11 @@
+import { Config } from '../../config/config.interface';
+
+/**
+ * Configuration interface used by the AccessibilitySettingsService
+ */
+export class AccessibilitySettingsConfig implements Config {
+  /**
+   * The duration in days after which the accessibility settings cookie expires
+   */
+  cookieExpirationDuration: number;
+}

src/app/accessibility/accessibility-settings.service.spec.ts

@@ -0,0 +1,419 @@
+import {
+  fakeAsync,
+  flush,
+} from '@angular/core/testing';
+import { of } from 'rxjs';
+
+import { AppConfig } from '../../config/app-config.interface';
+import { AuthService } from '../core/auth/auth.service';
+import { EPersonDataService } from '../core/eperson/eperson-data.service';
+import { EPerson } from '../core/eperson/models/eperson.model';
+import { CookieService } from '../core/services/cookie.service';
+import { KlaroServiceStub } from '../shared/cookies/klaro.service.stub';
+import { CookieServiceMock } from '../shared/mocks/cookie.service.mock';
+import {
+  createFailedRemoteDataObject$,
+  createSuccessfulRemoteDataObject$,
+} from '../shared/remote-data.utils';
+import { AuthServiceStub } from '../shared/testing/auth-service.stub';
+import {
+  ACCESSIBILITY_COOKIE,
+  ACCESSIBILITY_SETTINGS_METADATA_KEY,
+  AccessibilitySettings,
+  AccessibilitySettingsFormValues,
+  AccessibilitySettingsService,
+  FullAccessibilitySettings,
+} from './accessibility-settings.service';
+
+
+describe('accessibilitySettingsService', () => {
+  let service: AccessibilitySettingsService;
+  let cookieService: CookieServiceMock;
+  let authService: AuthServiceStub;
+  let ePersonService: EPersonDataService;
+  let klaroService: KlaroServiceStub;
+  let appConfig: AppConfig;
+
+  beforeEach(() => {
+    cookieService = new CookieServiceMock();
+    authService = new AuthServiceStub();
+    klaroService = new KlaroServiceStub();
+    appConfig = { accessibility: { cookieExpirationDuration: 10 } } as AppConfig;
+
+    klaroService.getSavedPreferences.and.returnValue(of({ accessibility: true }));
+
+    ePersonService = jasmine.createSpyObj('ePersonService', {
+      createPatchFromCache: of([{
+        op: 'add',
+        value: null,
+      }]),
+      patch: of({}),
+    });
+
+    service = new AccessibilitySettingsService(
+      cookieService as unknown as CookieService,
+      authService as unknown as AuthService,
+      ePersonService,
+      klaroService,
+      appConfig,
+    );
+  });
+
+  describe('get', () => {
+    it('should return the setting if it is set', () => {
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.getAll = jasmine.createSpy('getAll').and.returnValue(of(settings));
+
+      service.get('notificationTimeOut', 'default').subscribe(value =>
+        expect(value).toEqual('1000'),
+      );
+    });
+
+    it('should return the default value if the setting is not set', () => {
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.getAll = jasmine.createSpy('getAll').and.returnValue(of(settings));
+
+      service.get('liveRegionTimeOut', 'default').subscribe(value =>
+        expect(value).toEqual('default'),
+      );
+    });
+  });
+
+  describe('getAsNumber', () => {
+    it('should return the setting as number if the value for the setting can be parsed to a number', () => {
+      service.get = jasmine.createSpy('get').and.returnValue(of('1000'));
+
+      service.getAsNumber('notificationTimeOut').subscribe(value =>
+        expect(value).toEqual(1000),
+      );
+    });
+
+    it('should return the default value if no value is set for the setting', () => {
+      service.get = jasmine.createSpy('get').and.returnValue(of(null));
+
+      service.getAsNumber('notificationTimeOut', 123).subscribe(value =>
+        expect(value).toEqual(123),
+      );
+    });
+
+    it('should return the default value if the value for the setting can not be parsed to a number', () => {
+      service.get = jasmine.createSpy('get').and.returnValue(of('text'));
+
+      service.getAsNumber('notificationTimeOut', 123).subscribe(value =>
+        expect(value).toEqual(123),
+      );
+    });
+  });
+
+  describe('getAll', () => {
+    it('should attempt to get the settings from metadata first', () => {
+      service.getAllSettingsFromAuthenticatedUserMetadata =
+        jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata').and.returnValue(of({ }));
+
+      service.getAll().subscribe();
+      expect(service.getAllSettingsFromAuthenticatedUserMetadata).toHaveBeenCalled();
+    });
+
+    it('should attempt to get the settings from the cookie if the settings from metadata are empty', () => {
+      service.getAllSettingsFromAuthenticatedUserMetadata =
+        jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata').and.returnValue(of({ }));
+
+      service.getAllSettingsFromCookie = jasmine.createSpy('getAllSettingsFromCookie').and.returnValue({ });
+
+      service.getAll().subscribe();
+      expect(service.getAllSettingsFromCookie).toHaveBeenCalled();
+    });
+
+    it('should not attempt to get the settings from the cookie if the settings from metadata are not empty', () => {
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.getAllSettingsFromAuthenticatedUserMetadata =
+        jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata').and.returnValue(of(settings));
+
+      service.getAllSettingsFromCookie = jasmine.createSpy('getAllSettingsFromCookie').and.returnValue({ });
+
+      service.getAll().subscribe();
+      expect(service.getAllSettingsFromCookie).not.toHaveBeenCalled();
+    });
+
+    it('should return an empty object if both are empty', () => {
+      service.getAllSettingsFromAuthenticatedUserMetadata =
+        jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata').and.returnValue(of({ }));
+
+      service.getAllSettingsFromCookie = jasmine.createSpy('getAllSettingsFromCookie').and.returnValue({ });
+
+      service.getAll().subscribe(value => expect(value).toEqual({}));
+    });
+  });
+
+  describe('getAllSettingsFromCookie', () => {
+    it('should retrieve the settings from the cookie', () => {
+      cookieService.get = jasmine.createSpy();
+
+      service.getAllSettingsFromCookie();
+      expect(cookieService.get).toHaveBeenCalledWith(ACCESSIBILITY_COOKIE);
+    });
+  });
+
+  describe('getAllSettingsFromAuthenticatedUserMetadata', () => {
+    it('should retrieve all settings from the user\'s metadata', () => {
+      const settings = { 'liveRegionTimeOut': '1000' };
+
+      const user = new EPerson();
+      user.setMetadata(ACCESSIBILITY_SETTINGS_METADATA_KEY, null, JSON.stringify(settings));
+
+      authService.getAuthenticatedUserFromStoreIfAuthenticated =
+        jasmine.createSpy('getAuthenticatedUserFromStoreIfAuthenticated').and.returnValue(of(user));
+
+      service.getAllSettingsFromAuthenticatedUserMetadata().subscribe(value =>
+        expect(value).toEqual(settings),
+      );
+    });
+  });
+
+  describe('set', () => {
+    it('should correctly update the chosen setting', () => {
+      service.updateSettings = jasmine.createSpy('updateSettings');
+
+      service.set('liveRegionTimeOut', '500');
+      expect(service.updateSettings).toHaveBeenCalledWith({ liveRegionTimeOut: '500' });
+    });
+  });
+
+  describe('setSettings', () => {
+    beforeEach(() => {
+      service.setSettingsInCookie = jasmine.createSpy('setSettingsInCookie').and.returnValue(of('cookie'));
+    });
+
+    it('should attempt to set settings in metadata', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of('failed'));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe();
+      expect(service.setSettingsInAuthenticatedUserMetadata).toHaveBeenCalledWith(settings);
+    });
+
+    it('should set settings in cookie if metadata failed', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of(false));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe();
+      expect(service.setSettingsInCookie).toHaveBeenCalled();
+    });
+
+    it('should not set settings in cookie if metadata succeeded', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of('metadata'));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe();
+      expect(service.setSettingsInCookie).not.toHaveBeenCalled();
+    });
+
+    it('should return \'metadata\' if settings are stored in metadata', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of('metadata'));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe(value =>
+        expect(value).toEqual('metadata'),
+      );
+    });
+
+    it('should return \'cookie\' if settings are stored in cookie', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of(false));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe(value =>
+        expect(value).toEqual('cookie'),
+      );
+    });
+  });
+
+  describe('updateSettings', () => {
+    it('should call setSettings with the updated settings', () => {
+      const beforeSettings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.getAll = jasmine.createSpy('getAll').and.returnValue(of(beforeSettings));
+      service.setSettings = jasmine.createSpy('setSettings').and.returnValue(of('cookie'));
+
+      const newSettings: AccessibilitySettings = {
+        liveRegionTimeOut: '2000',
+      };
+
+      const combinedSettings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+        liveRegionTimeOut: '2000',
+      };
+
+      service.updateSettings(newSettings).subscribe();
+      expect(service.setSettings).toHaveBeenCalledWith(combinedSettings);
+    });
+  });
+
+  describe('setSettingsInAuthenticatedUserMetadata', () => {
+    beforeEach(() => {
+      service.setSettingsInMetadata = jasmine.createSpy('setSettingsInMetadata').and.returnValue(of(null));
+    });
+
+    it('should store settings in metadata when the user is authenticated', fakeAsync(() => {
+      const user = new EPerson();
+      authService.getAuthenticatedUserFromStoreIfAuthenticated = jasmine.createSpy().and.returnValue(of(user));
+
+      service.setSettingsInAuthenticatedUserMetadata({}).subscribe();
+      flush();
+
+      expect(service.setSettingsInMetadata).toHaveBeenCalled();
+    }));
+
+    it('should emit "failed" when the user is not authenticated', fakeAsync(() => {
+      authService.getAuthenticatedUserFromStoreIfAuthenticated = jasmine.createSpy().and.returnValue(of(null));
+
+      service.setSettingsInAuthenticatedUserMetadata({})
+        .subscribe(value => expect(value).toEqual('failed'));
+      flush();
+
+      expect(service.setSettingsInMetadata).not.toHaveBeenCalled();
+    }));
+  });
+
+  describe('setSettingsInMetadata', () => {
+    const ePerson = new EPerson();
+
+    beforeEach(() => {
+      ePerson.setMetadata = jasmine.createSpy('setMetadata');
+      ePerson.removeMetadata = jasmine.createSpy('removeMetadata');
+    });
+
+    it('should set the settings in metadata', () => {
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' }).subscribe();
+      expect(ePerson.setMetadata).toHaveBeenCalled();
+    });
+
+    it('should remove the metadata when the settings are emtpy', () => {
+      service.setSettingsInMetadata(ePerson, {}).subscribe();
+      expect(ePerson.setMetadata).not.toHaveBeenCalled();
+      expect(ePerson.removeMetadata).toHaveBeenCalled();
+    });
+
+    it('should create a patch with the metadata changes', () => {
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' }).subscribe();
+      expect(ePersonService.createPatchFromCache).toHaveBeenCalled();
+    });
+
+    it('should send the patch request', () => {
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' }).subscribe();
+      expect(ePersonService.patch).toHaveBeenCalled();
+    });
+
+    it('should emit "metadata" when the update succeeded', fakeAsync(() => {
+      ePersonService.patch = jasmine.createSpy().and.returnValue(createSuccessfulRemoteDataObject$({}));
+
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' })
+        .subscribe(value => {
+          expect(value).toEqual('metadata');
+        });
+
+      flush();
+    }));
+
+    it('should emit "failed" when the update failed', fakeAsync(() => {
+      ePersonService.patch = jasmine.createSpy().and.returnValue(createFailedRemoteDataObject$());
+
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' })
+        .subscribe(value => {
+          expect(value).toEqual('failed');
+        });
+
+      flush();
+    }));
+  });
+
+  describe('setSettingsInCookie', () => {
+    beforeEach(() => {
+      cookieService.set = jasmine.createSpy('set');
+      cookieService.remove = jasmine.createSpy('remove');
+    });
+
+    it('should fail to store settings in the cookie when the user has not accepted the cookie', fakeAsync(() => {
+      klaroService.getSavedPreferences.and.returnValue(of({ accessibility: false }));
+
+      service.setSettingsInCookie({ ['liveRegionTimeOut']: '500' }).subscribe(value => {
+        expect(value).toEqual('failed');
+      });
+      flush();
+      expect(cookieService.set).not.toHaveBeenCalled();
+    }));
+
+    it('should store the settings in a cookie', fakeAsync(() => {
+      service.setSettingsInCookie({ ['liveRegionTimeOut']: '500' }).subscribe(value => {
+        expect(value).toEqual('cookie');
+      });
+      flush();
+      expect(cookieService.set).toHaveBeenCalled();
+    }));
+
+    it('should remove the cookie when the settings are empty', fakeAsync(() => {
+      service.setSettingsInCookie({}).subscribe(value => {
+        expect(value).toEqual('cookie');
+      });
+
+      flush();
+
+      expect(cookieService.set).not.toHaveBeenCalled();
+      expect(cookieService.remove).toHaveBeenCalled();
+    }));
+  });
+
+  describe('convertFormValuesToStoredValues', () => {
+    it('should reset the notificationTimeOut when timeOut is enabled but set to "0"', () => {
+      const formValues: AccessibilitySettingsFormValues = {
+        notificationTimeOutEnabled: true,
+        notificationTimeOut: '0',
+        liveRegionTimeOut: null,
+      };
+
+      const storedValues: FullAccessibilitySettings = service.convertFormValuesToStoredValues(formValues);
+      expect('notificationTimeOut' in storedValues).toBeFalse();
+    });
+  });
+
+  it('should keep the notificationTimeOut when timeOut is enabled and differs from "0"', () => {
+    const formValues: AccessibilitySettingsFormValues = {
+      notificationTimeOutEnabled: true,
+      notificationTimeOut: '3',
+      liveRegionTimeOut: null,
+    };
+
+    const storedValues: FullAccessibilitySettings = service.convertFormValuesToStoredValues(formValues);
+    expect('notificationTimeOut' in storedValues).toBeTrue();
+  });
+});

src/app/accessibility/accessibility-settings.service.stub.ts

@@ -0,0 +1,45 @@
+import { of } from 'rxjs';
+
+import { AccessibilitySettingsService } from './accessibility-settings.service';
+
+export function getAccessibilitySettingsServiceStub(): AccessibilitySettingsService {
+  return new AccessibilitySettingsServiceStub() as unknown as AccessibilitySettingsService;
+}
+
+export class AccessibilitySettingsServiceStub {
+  getAllAccessibilitySettingKeys = jasmine.createSpy('getAllAccessibilitySettingKeys').and.returnValue([]);
+
+  get = jasmine.createSpy('get').and.returnValue(of(null));
+
+  getAsNumber = jasmine.createSpy('getAsNumber').and.returnValue(of(0));
+
+  getAll = jasmine.createSpy('getAll').and.returnValue(of({}));
+
+  getAllSettingsFromCookie = jasmine.createSpy('getAllSettingsFromCookie').and.returnValue({});
+
+  getAllSettingsFromAuthenticatedUserMetadata = jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata')
+    .and.returnValue(of({}));
+
+  set = jasmine.createSpy('setSettings').and.returnValue(of('cookie'));
+
+  updateSettings = jasmine.createSpy('updateSettings').and.returnValue(of('cookie'));
+
+  setSettingsInAuthenticatedUserMetadata = jasmine.createSpy('setSettingsInAuthenticatedUserMetadata')
+    .and.returnValue(of(false));
+
+  setSettingsInMetadata = jasmine.createSpy('setSettingsInMetadata').and.returnValue(of(false));
+
+  setSettingsInCookie = jasmine.createSpy('setSettingsInCookie');
+
+  getInputType = jasmine.createSpy('getInputType').and.returnValue('text');
+
+  convertFormValuesToStoredValues = jasmine.createSpy('convertFormValuesToStoredValues').and.returnValue({});
+
+  convertStoredValuesToFormValues = jasmine.createSpy('convertStoredValuesToFormValues').and.returnValue({});
+
+  getDefaultValue = jasmine.createSpy('getPlaceholder').and.returnValue('placeholder');
+
+  isValid = jasmine.createSpy('isValid').and.returnValue(true);
+
+  formValuesValid = jasmine.createSpy('allValid').and.returnValue(true);
+}

src/app/accessibility/accessibility-settings.service.ts

@@ -0,0 +1,381 @@
+import {
+  Inject,
+  Injectable,
+  Optional,
+} from '@angular/core';
+import cloneDeep from 'lodash/cloneDeep';
+import {
+  combineLatest,
+  Observable,
+  of,
+  switchMap,
+} from 'rxjs';
+import {
+  map,
+  take,
+} from 'rxjs/operators';
+
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../config/app-config.interface';
+import { environment } from '../../environments/environment';
+import { AuthService } from '../core/auth/auth.service';
+import { EPersonDataService } from '../core/eperson/eperson-data.service';
+import { EPerson } from '../core/eperson/models/eperson.model';
+import { CookieService } from '../core/services/cookie.service';
+import { getFirstCompletedRemoteData } from '../core/shared/operators';
+import { KlaroService } from '../shared/cookies/klaro.service';
+import {
+  hasNoValue,
+  hasValue,
+  isNotEmpty,
+} from '../shared/empty.util';
+import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
+
+/**
+ * Name of the cookie used to store the settings locally
+ */
+export const ACCESSIBILITY_COOKIE = 'dsAccessibilityCookie';
+
+/**
+ * Name of the metadata field to store settings on the ePerson
+ */
+export const ACCESSIBILITY_SETTINGS_METADATA_KEY = 'dspace.accessibility.settings';
+
+/**
+ * Array containing all possible accessibility settings.
+ * When adding new settings, make sure to add the new setting to the accessibility-settings component form.
+ * The converter methods to convert from stored format to form format (and vice-versa) need to be updated as well.
+ */
+export const accessibilitySettingKeys = ['notificationTimeOut', 'liveRegionTimeOut'] as const;
+
+/**
+ * Type representing the possible accessibility settings
+ */
+export type AccessibilitySetting = typeof accessibilitySettingKeys[number];
+
+/**
+ * Type representing an object that contains accessibility settings values for all accessibility settings.
+ */
+export type FullAccessibilitySettings = { [key in AccessibilitySetting]: string };
+
+/**
+ * Type representing an object that contains accessibility settings values for some accessibility settings.
+ */
+export type AccessibilitySettings = Partial<FullAccessibilitySettings>;
+
+/**
+ * The accessibility settings object format used by the accessibility-settings component form.
+ */
+export interface AccessibilitySettingsFormValues {
+  notificationTimeOutEnabled: boolean,
+  notificationTimeOut: string,
+  liveRegionTimeOut: string,
+}
+
+/**
+ * Service handling the retrieval and configuration of accessibility settings.
+ *
+ * This service stores the configured settings in either a cookie or on the user's metadata depending on whether
+ * the user is authenticated.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class AccessibilitySettingsService {
+
+  constructor(
+    protected cookieService: CookieService,
+    protected authService: AuthService,
+    protected ePersonService: EPersonDataService,
+    @Optional() protected klaroService: KlaroService,
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
+  ) {
+  }
+
+  /**
+   * Get the stored value for the provided {@link AccessibilitySetting}. If the value does not exist or if it is empty,
+   * the provided defaultValue is emitted instead.
+   */
+  get(setting: AccessibilitySetting, defaultValue: string = null): Observable<string> {
+    return this.getAll().pipe(
+      map(settings => settings[setting]),
+      map(value => isNotEmpty(value) ? value : defaultValue),
+    );
+  }
+
+  /**
+   * Get the stored value for the provided {@link AccessibilitySetting} as a number. If the stored value
+   * could not be converted to a number, the value of the defaultValue parameter is emitted instead.
+   */
+  getAsNumber(setting: AccessibilitySetting, defaultValue: number = null): Observable<number> {
+    return this.get(setting).pipe(
+      map(value => hasValue(value) ? parseInt(value, 10) : NaN),
+      map(number => !isNaN(number) ? number : defaultValue),
+    );
+  }
+
+  /**
+   * Get all currently stored accessibility settings
+   */
+  getAll(): Observable<AccessibilitySettings> {
+    return this.getAllSettingsFromAuthenticatedUserMetadata().pipe(
+      map(value => isNotEmpty(value) ? value : this.getAllSettingsFromCookie()),
+      map(value => isNotEmpty(value) ? value : {}),
+    );
+  }
+
+  /**
+   * Get all settings from the accessibility settings cookie
+   */
+  getAllSettingsFromCookie(): AccessibilitySettings {
+    return this.cookieService.get(ACCESSIBILITY_COOKIE);
+  }
+
+  /**
+   * Attempts to retrieve all settings from the authenticated user's metadata.
+   * Returns an empty object when no user is authenticated.
+   */
+  getAllSettingsFromAuthenticatedUserMetadata(): Observable<AccessibilitySettings> {
+    return this.authService.getAuthenticatedUserFromStoreIfAuthenticated().pipe(
+      take(1),
+      map(user => hasValue(user) && hasValue(user.firstMetadataValue(ACCESSIBILITY_SETTINGS_METADATA_KEY)) ?
+        JSON.parse(user.firstMetadataValue(ACCESSIBILITY_SETTINGS_METADATA_KEY)) :
+        {},
+      ),
+    );
+  }
+
+  /**
+   * Set a single accessibility setting value, leaving all other settings unchanged.
+   * When setting all values, {@link AccessibilitySettingsService#setSettings} should be used.
+   * When updating multiple values, {@link AccessibilitySettingsService#updateSettings} should be used.
+   *
+   * Returns 'cookie' when the changes were stored in the cookie.
+   * Returns 'metadata' when the changes were stored in metadata.
+   * Returns 'failed' when both options failed.
+   */
+  set(setting: AccessibilitySetting, value: string): Observable<'metadata' | 'cookie' | 'failed'> {
+    return this.updateSettings({ [setting]: value });
+  }
+
+  /**
+   * Set all accessibility settings simultaneously.
+   * This method removes existing settings if they are missing from the provided {@link AccessibilitySettings} object.
+   * Removes all settings if the provided object is empty.
+   *
+   * Returns 'cookie' when the changes were stored in the cookie.
+   * Returns 'metadata' when the changes were stored in metadata.
+   * Returns 'failed' when both options failed.
+   */
+  setSettings(settings: AccessibilitySettings): Observable<'metadata' | 'cookie' | 'failed'> {
+    return this.setSettingsInAuthenticatedUserMetadata(settings).pipe(
+      take(1),
+      map(saveLocation => saveLocation === 'metadata'),
+      switchMap((savedInMetadata) =>
+        savedInMetadata ? ofMetadata() : this.setSettingsInCookie(settings),
+      ),
+    );
+  }
+
+  /**
+   * Update multiple accessibility settings simultaneously.
+   * This method does not change the settings that are missing from the provided {@link AccessibilitySettings} object.
+   *
+   * Returns 'cookie' when the changes were stored in the cookie.
+   * Returns 'metadata' when the changes were stored in metadata.
+   * Returns 'failed' when both options failed.
+   */
+  updateSettings(settings: AccessibilitySettings): Observable<'metadata' | 'cookie' | 'failed'> {
+    return this.getAll().pipe(
+      take(1),
+      map(currentSettings => Object.assign({}, currentSettings, settings)),
+      switchMap(newSettings => this.setSettings(newSettings)),
+    );
+  }
+
+  /**
+   * Attempts to set the provided settings on the currently authorized user's metadata.
+   * Emits false when no user is authenticated or when the metadata update failed.
+   * Emits 'metadata' when the metadata update succeeded, and 'failed' otherwise.
+   */
+  setSettingsInAuthenticatedUserMetadata(settings: AccessibilitySettings): Observable<'metadata' | 'failed'> {
+    return this.authService.getAuthenticatedUserFromStoreIfAuthenticated().pipe(
+      take(1),
+      switchMap(user => {
+        if (hasValue(user)) {
+          // EPerson has to be cloned, otherwise the EPerson's metadata can't be modified
+          const clonedUser = cloneDeep(user);
+          return this.setSettingsInMetadata(clonedUser, settings);
+        } else {
+          return ofFailed();
+        }
+      }),
+    );
+  }
+
+  /**
+   * Attempts to set the provided settings on the user's metadata.
+   * Emits false when the update failed, true when the update succeeded.
+   */
+  setSettingsInMetadata(
+    user: EPerson,
+    settings: AccessibilitySettings,
+  ): Observable<'metadata' | 'failed'> {
+    if (isNotEmpty(settings)) {
+      user.setMetadata(ACCESSIBILITY_SETTINGS_METADATA_KEY, null, JSON.stringify(settings));
+    } else {
+      user.removeMetadata(ACCESSIBILITY_SETTINGS_METADATA_KEY);
+    }
+
+    return this.ePersonService.createPatchFromCache(user).pipe(
+      take(1),
+      switchMap(operations =>
+        isNotEmpty(operations) ? this.ePersonService.patch(user, operations) : createSuccessfulRemoteDataObject$({})),
+      getFirstCompletedRemoteData(),
+      switchMap(rd => rd.hasSucceeded ? ofMetadata() : ofFailed()),
+    );
+  }
+
+  /**
+   * Attempts to set the provided settings in a cookie.
+   * Emits 'failed' when setting in a cookie failed due to the cookie not being accepted, 'cookie' when it succeeded.
+   */
+  setSettingsInCookie(settings: AccessibilitySettings): Observable<'cookie' | 'failed'> {
+    if (hasNoValue(this.klaroService)) {
+      return of('failed');
+    }
+
+    return this.klaroService.getSavedPreferences().pipe(
+      map(preferences => preferences.accessibility),
+      map((accessibilityCookieAccepted: boolean) => {
+        if (accessibilityCookieAccepted) {
+          if (isNotEmpty(settings)) {
+            this.cookieService.set(ACCESSIBILITY_COOKIE, settings, { expires: this.appConfig.accessibility.cookieExpirationDuration });
+          } else {
+            this.cookieService.remove(ACCESSIBILITY_COOKIE);
+          }
+
+          return 'cookie';
+        } else {
+          return 'failed';
+        }
+      }),
+    );
+  }
+
+  /**
+   * Clears all settings in the cookie and attempts to clear settings in metadata.
+   * Emits an array mentioning which settings succeeded or failed.
+   */
+  clearSettings(): Observable<['cookie' | 'failed', 'metadata' | 'failed']> {
+    return combineLatest([
+      this.setSettingsInCookie({}),
+      this.setSettingsInAuthenticatedUserMetadata({}),
+    ]);
+  }
+
+  /**
+   * Retrieve the default value to be used for the provided AccessibilitySetting.
+   * Returns an empty string when no default value is specified for the provided setting.
+   */
+  getDefaultValue(setting: AccessibilitySetting): string {
+    switch (setting) {
+      case 'notificationTimeOut':
+        return millisecondsToSeconds(environment.notifications.timeOut.toString());
+      case 'liveRegionTimeOut':
+        return millisecondsToSeconds(environment.liveRegion.messageTimeOutDurationMs.toString());
+      default:
+        return '';
+    }
+  }
+
+  /**
+   * Convert values in the provided accessibility settings object to values ready to be stored.
+   */
+  convertFormValuesToStoredValues(settings: AccessibilitySettingsFormValues): FullAccessibilitySettings {
+    const storedValues = {
+      notificationTimeOut: settings.notificationTimeOutEnabled ?
+        secondsToMilliseconds(settings.notificationTimeOut) : '0',
+      liveRegionTimeOut: secondsToMilliseconds(settings.liveRegionTimeOut),
+    };
+
+    // When the user enables the timeout but does not change the timeout duration from 0,
+    // it is removed from the values to be stored so the default value is used.
+    // Keeping it at 0 would mean the notifications are not automatically removed.
+    if (settings.notificationTimeOutEnabled && settings.notificationTimeOut === '0') {
+      delete storedValues.notificationTimeOut;
+    }
+
+    return storedValues;
+  }
+
+  /**
+   * Convert values in the provided accessibility settings object to values ready to show in the form.
+   */
+  convertStoredValuesToFormValues(settings: AccessibilitySettings): AccessibilitySettingsFormValues {
+    return {
+      notificationTimeOutEnabled: parseFloat(settings.notificationTimeOut) !== 0,
+      notificationTimeOut: millisecondsToSeconds(settings.notificationTimeOut),
+      liveRegionTimeOut: millisecondsToSeconds(settings.liveRegionTimeOut),
+    };
+  }
+
+  /**
+   * Returns true if the provided AccessibilitySetting is valid in regard to the provided formValues.
+   */
+  isValid(setting: AccessibilitySetting, formValues: AccessibilitySettingsFormValues): boolean {
+    switch (setting) {
+      case 'notificationTimeOut':
+        return formValues.notificationTimeOutEnabled ?
+          hasNoValue(formValues.notificationTimeOut) || parseFloat(formValues.notificationTimeOut) > 0 :
+          true;
+      case 'liveRegionTimeOut':
+        return hasNoValue(formValues.liveRegionTimeOut) || parseFloat(formValues.liveRegionTimeOut) > 0;
+      default:
+        throw new Error(`Unhandled accessibility setting during validity check: ${setting}`);
+    }
+  }
+
+  /**
+   * Returns true if all settings in the provided AccessibilitySettingsFormValues object are valid
+   */
+  formValuesValid(formValues: AccessibilitySettingsFormValues) {
+    return accessibilitySettingKeys.every(setting => this.isValid(setting, formValues));
+  }
+}
+
+/**
+ * Converts a string representing seconds to a string representing milliseconds
+ * Returns null if the input could not be parsed to a float
+ */
+function secondsToMilliseconds(secondsStr: string): string {
+  const seconds = parseFloat(secondsStr);
+  if (isNaN(seconds)) {
+    return null;
+  } else {
+    return (seconds * 1000).toString();
+  }
+}
+
+/**
+ * Converts a string representing milliseconds to a string representing seconds
+ * Returns null if the input could not be parsed to a float
+ */
+function millisecondsToSeconds(millisecondsStr: string): string {
+  const milliseconds = parseFloat(millisecondsStr);
+  if (isNaN(milliseconds)) {
+    return null;
+  } else {
+    return (milliseconds / 1000).toString();
+  }
+}
+
+function ofMetadata(): Observable<'metadata'> {
+  return of('metadata');
+}
+
+function ofFailed(): Observable<'failed'> {
+  return of('failed');
+}

src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html

@@ -9,9 +9,9 @@
 
 
       <ds-pagination
-        *ngIf="(bitstreamFormats | async)?.payload?.totalElements > 0"
+        *ngIf="(bitstreamFormats$ | async)?.payload?.totalElements > 0"
         [paginationOptions]="pageConfig"
-        [collectionSize]="(bitstreamFormats | async)?.payload?.totalElements"
+        [collectionSize]="(bitstreamFormats$ | async)?.payload?.totalElements"
         [hideGear]="false"
         [hidePagerWhenSinglePage]="true">
         <div class="table-responsive">
@@ -26,12 +26,12 @@
             </tr>
             </thead>
             <tbody>
-            <tr *ngFor="let bitstreamFormat of (bitstreamFormats | async)?.payload?.page">
+            <tr *ngFor="let bitstreamFormat of (bitstreamFormats$ | async)?.payload?.page">
               <td>
                 <label class="mb-0">
                   <input type="checkbox"
                          [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"
-                         [checked]="isSelected(bitstreamFormat) | async"
+                         [checked]="(selectedBitstreamFormatIDs$ | async)?.includes(bitstreamFormat.id)"
                          (change)="selectBitStreamFormat(bitstreamFormat, $event)"
                   >
                   <span class="sr-only">{{'admin.registries.bitstream-formats.select' | translate}}&#125;</span>
@@ -46,13 +46,13 @@
           </table>
         </div>
       </ds-pagination>
-      <div *ngIf="(bitstreamFormats | async)?.payload?.totalElements === 0" class="alert alert-info" role="alert">
+      <div *ngIf="(bitstreamFormats$ | async)?.payload?.totalElements === 0" class="alert alert-info" role="alert">
         {{'admin.registries.bitstream-formats.no-items' | translate}}
       </div>
 
       <div>
-        <button *ngIf="(bitstreamFormats | async)?.payload?.page?.length > 0" class="btn btn-primary deselect" (click)="deselectAll()">{{'admin.registries.bitstream-formats.table.deselect-all' | translate}}</button>
-        <button *ngIf="(bitstreamFormats | async)?.payload?.page?.length > 0" type="submit" class="btn btn-danger float-right" (click)="deleteFormats()">{{'admin.registries.bitstream-formats.table.delete' | translate}}</button>
+        <button *ngIf="(bitstreamFormats$ | async)?.payload?.page?.length > 0" class="btn btn-primary deselect" (click)="deselectAll()">{{'admin.registries.bitstream-formats.table.deselect-all' | translate}}</button>
+        <button *ngIf="(bitstreamFormats$ | async)?.payload?.page?.length > 0" type="submit" class="btn btn-danger float-right" (click)="deleteFormats()">{{'admin.registries.bitstream-formats.table.delete' | translate}}</button>
       </div>
     </div>
   </div>

src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.spec.ts

@@ -8,10 +8,7 @@ import { By } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { provideMockStore } from '@ngrx/store/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import {
-  cold,
-  hot,
-} from 'jasmine-marbles';
+import { hot } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 
 import { BitstreamFormatDataService } from '../../../core/data/bitstream-format-data.service';
@@ -191,17 +188,17 @@ describe('BitstreamFormatsComponent', () => {
     beforeEach(waitForAsync(initAsync));
     beforeEach(initBeforeEach);
     it('should return an observable of true if the provided bistream is in the list returned by the service', () => {
-      const result = comp.isSelected(bitstreamFormat1);
-
-      expect(result).toBeObservable(cold('b', { b: true }));
+      comp.selectedBitstreamFormatIDs().subscribe((selectedBitstreamFormatIDs: string[]) => {
+        expect(selectedBitstreamFormatIDs).toContain(bitstreamFormat1.id);
+      });
     });
     it('should return an observable of false if the provided bistream is not in the list returned by the service', () => {
       const format = new BitstreamFormat();
       format.uuid = 'new';
 
-      const result = comp.isSelected(format);
-
-      expect(result).toBeObservable(cold('b', { b: false }));
+      comp.selectedBitstreamFormatIDs().subscribe((selectedBitstreamFormatIDs: string[]) => {
+        expect(selectedBitstreamFormatIDs).not.toContain(format.id);
+      });
     });
   });
 

src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.ts

@@ -13,10 +13,7 @@ import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
-import {
-  combineLatest as observableCombineLatest,
-  Observable,
-} from 'rxjs';
+import { Observable } from 'rxjs';
 import {
   map,
   mergeMap,
@@ -58,7 +55,12 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {
   /**
    * A paginated list of bitstream formats to be shown on the page
    */
-  bitstreamFormats: Observable<RemoteData<PaginatedList<BitstreamFormat>>>;
+  bitstreamFormats$: Observable<RemoteData<PaginatedList<BitstreamFormat>>>;
+
+  /**
+   * The currently selected {@link BitstreamFormat} IDs
+   */
+  selectedBitstreamFormatIDs$: Observable<string[]>;
 
   /**
    * The current pagination configuration for the page
@@ -125,14 +127,11 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Checks whether a given bitstream format is selected in the list (checkbox)
-   * @param bitstreamFormat
+   * Returns the list of all the bitstream formats that are selected in the list (checkbox)
    */
-  isSelected(bitstreamFormat: BitstreamFormat): Observable<boolean> {
+  selectedBitstreamFormatIDs(): Observable<string[]> {
     return this.bitstreamFormatService.getSelectedBitstreamFormats().pipe(
-      map((bitstreamFormats: BitstreamFormat[]) => {
-        return bitstreamFormats.find((selectedFormat) => selectedFormat.id === bitstreamFormat.id) != null;
-      }),
+      map((bitstreamFormats: BitstreamFormat[]) => bitstreamFormats.map((selectedFormat) => selectedFormat.id)),
     );
   }
 
@@ -156,27 +155,23 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {
     const prefix = 'admin.registries.bitstream-formats.delete';
     const suffix = success ? 'success' : 'failure';
 
-    const messages = observableCombineLatest(
-      this.translateService.get(`${prefix}.${suffix}.head`),
-      this.translateService.get(`${prefix}.${suffix}.amount`, { amount: amount }),
-    );
-    messages.subscribe(([head, content]) => {
+    const head: string = this.translateService.instant(`${prefix}.${suffix}.head`);
+    const content: string = this.translateService.instant(`${prefix}.${suffix}.amount`, { amount: amount });
 
-      if (success) {
-        this.notificationsService.success(head, content);
-      } else {
-        this.notificationsService.error(head, content);
-      }
-    });
+    if (success) {
+      this.notificationsService.success(head, content);
+    } else {
+      this.notificationsService.error(head, content);
+    }
   }
 
   ngOnInit(): void {
-
-    this.bitstreamFormats = this.paginationService.getFindListOptions(this.pageConfig.id, this.pageConfig).pipe(
+    this.bitstreamFormats$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.pageConfig).pipe(
       switchMap((findListOptions: FindListOptions) => {
         return this.bitstreamFormatService.findAll(findListOptions);
       }),
     );
+    this.selectedBitstreamFormatIDs$ = this.selectedBitstreamFormatIDs();
   }
 
 

src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html

@@ -27,14 +27,14 @@
                         </thead>
                         <tbody>
                         <tr *ngFor="let schema of (metadataSchemas | async)?.payload?.page"
-                            [ngClass]="{'table-primary' : isActive(schema) | async}">
+                            [ngClass]="{'table-primary' : (activeMetadataSchema$ | async)?.id === schema.id}">
                             <td>
                                 <label class="mb-0">
                                     <input type="checkbox"
-                                           [checked]="isSelected(schema) | async"
+                                           [checked]="(selectedMetadataSchemaIDs$ | async)?.includes(schema.id)"
                                            (change)="selectMetadataSchema(schema, $event)"
                                     >
-                                    <span class="sr-only">{{((isSelected(schema) | async) ? 'admin.registries.metadata.schemas.deselect' : 'admin.registries.metadata.schemas.select') | translate}}</span>
+                                    <span class="sr-only">{{(((selectedMetadataSchemaIDs$ | async)?.includes(schema.id)) ? 'admin.registries.metadata.schemas.deselect' : 'admin.registries.metadata.schemas.select') | translate}}</span>
                                 </label>
                             </td>
                             <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.id}}</a></td>

src/app/admin/admin-registries/metadata-registry/metadata-registry.component.spec.ts

@@ -17,9 +17,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
 import { FormBuilderService } from 'src/app/shared/form/builder/form-builder.service';
 
-import { RestResponse } from '../../../core/cache/response.models';
 import { ConfigurationDataService } from '../../../core/data/configuration-data.service';
-import { buildPaginatedList } from '../../../core/data/paginated-list.model';
 import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
@@ -36,7 +34,9 @@ import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.u
 import { HostWindowServiceStub } from '../../../shared/testing/host-window-service.stub';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
+import { RegistryServiceStub } from '../../../shared/testing/registry.service.stub';
 import { SearchConfigurationServiceStub } from '../../../shared/testing/search-configuration-service.stub';
+import { createPaginatedList } from '../../../shared/testing/utils.test';
 import { EnumKeysPipe } from '../../../shared/utils/enum-keys-pipe';
 import { MetadataRegistryComponent } from './metadata-registry.component';
 import { MetadataSchemaFormComponent } from './metadata-schema-form/metadata-schema-form.component';
@@ -44,9 +44,11 @@ import { MetadataSchemaFormComponent } from './metadata-schema-form/metadata-sch
 describe('MetadataRegistryComponent', () => {
   let comp: MetadataRegistryComponent;
   let fixture: ComponentFixture<MetadataRegistryComponent>;
-  let registryService: RegistryService;
-  let paginationService;
-  const mockSchemasList = [
+
+  let paginationService: PaginationServiceStub;
+  let registryService: RegistryServiceStub;
+
+  const mockSchemasList: MetadataSchema[] = [
     {
       id: 1,
       _links: {
@@ -67,25 +69,7 @@ describe('MetadataRegistryComponent', () => {
       prefix: 'mock',
       namespace: 'http://dspace.org/mockschema',
     },
-  ];
-  const mockSchemas = createSuccessfulRemoteDataObject$(buildPaginatedList(null, mockSchemasList));
-  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
-  const registryServiceStub = {
-    getMetadataSchemas: () => mockSchemas,
-    getActiveMetadataSchema: () => observableOf(undefined),
-    getSelectedMetadataSchemas: () => observableOf([]),
-    editMetadataSchema: (schema) => {
-    },
-    cancelEditMetadataSchema: () => {
-    },
-    deleteMetadataSchema: () => observableOf(new RestResponse(true, 200, 'OK')),
-    deselectAllMetadataSchema: () => {
-    },
-    clearMetadataSchemaRequests: () => observableOf(undefined),
-  };
-  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
-
-  paginationService = new PaginationServiceStub();
+  ] as MetadataSchema[];
 
   const configurationDataService = jasmine.createSpyObj('configurationDataService', {
     findByPropertyName: createSuccessfulRemoteDataObject$(Object.assign(new ConfigurationProperty(), {
@@ -109,6 +93,10 @@ describe('MetadataRegistryComponent', () => {
   );
 
   beforeEach(waitForAsync(() => {
+    paginationService = new PaginationServiceStub();
+    registryService = new RegistryServiceStub();
+    spyOn(registryService, 'getMetadataSchemas').and.returnValue(createSuccessfulRemoteDataObject$(createPaginatedList(mockSchemasList)));
+
     TestBed.configureTestingModule({
       imports: [
         CommonModule,
@@ -120,7 +108,7 @@ describe('MetadataRegistryComponent', () => {
         EnumKeysPipe,
       ],
       providers: [
-        { provide: RegistryService, useValue: registryServiceStub },
+        { provide: RegistryService, useValue: registryService },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
         { provide: PaginationService, useValue: paginationService },
         {
@@ -190,7 +178,7 @@ describe('MetadataRegistryComponent', () => {
     }));
 
     it('should cancel editing the selected schema when clicked again', waitForAsync(() => {
-      spyOn(registryService, 'getActiveMetadataSchema').and.returnValue(observableOf(mockSchemasList[0] as MetadataSchema));
+      comp.activeMetadataSchema$ = observableOf(mockSchemasList[0] as MetadataSchema);
       spyOn(registryService, 'cancelEditMetadataSchema');
       row.click();
       fixture.detectChanges();
@@ -205,7 +193,7 @@ describe('MetadataRegistryComponent', () => {
 
     beforeEach(() => {
       spyOn(registryService, 'deleteMetadataSchema').and.callThrough();
-      spyOn(registryService, 'getSelectedMetadataSchemas').and.returnValue(observableOf(selectedSchemas as MetadataSchema[]));
+      comp.selectedMetadataSchemaIDs$ = observableOf(selectedSchemas.map((selectedSchema: MetadataSchema) => selectedSchema.id));
       comp.deleteSchemas();
       fixture.detectChanges();
     });

src/app/admin/admin-registries/metadata-registry/metadata-registry.component.ts

@@ -4,19 +4,20 @@ import {
   NgForOf,
   NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
 import {
-  Router,
-  RouterLink,
-} from '@angular/router';
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
 import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
 import {
   BehaviorSubject,
-  combineLatest as observableCombineLatest,
   Observable,
+  Subscription,
   zip,
 } from 'rxjs';
 import {
@@ -33,7 +34,6 @@ import { PaginationService } from '../../../core/pagination/pagination.service';
 import { RegistryService } from '../../../core/registry/registry.service';
 import { NoContent } from '../../../core/shared/NoContent.model';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { hasValue } from '../../../shared/empty.util';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { PaginationComponent } from '../../../shared/pagination/pagination.component';
 import { toFindListOptions } from '../../../shared/pagination/pagination.utils';
@@ -60,13 +60,23 @@ import { MetadataSchemaFormComponent } from './metadata-schema-form/metadata-sch
  * A component used for managing all existing metadata schemas within the repository.
  * The admin can create, edit or delete metadata schemas here.
  */
-export class MetadataRegistryComponent {
+export class MetadataRegistryComponent implements OnDestroy, OnInit {
 
   /**
    * A list of all the current metadata schemas within the repository
    */
   metadataSchemas: Observable<RemoteData<PaginatedList<MetadataSchema>>>;
 
+  /**
+   * The {@link MetadataSchema}that is being edited
+   */
+  activeMetadataSchema$: Observable<MetadataSchema>;
+
+  /**
+   * The selected {@link MetadataSchema} IDs
+   */
+  selectedMetadataSchemaIDs$: Observable<number[]>;
+
   /**
    * Pagination config used to display the list of metadata schemas
    */
@@ -76,15 +86,25 @@ export class MetadataRegistryComponent {
   });
 
   /**
-   * Whether or not the list of MetadataSchemas needs an update
+   * Whether the list of MetadataSchemas needs an update
    */
   needsUpdate$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
 
-  constructor(private registryService: RegistryService,
-              private notificationsService: NotificationsService,
-              private router: Router,
-              private paginationService: PaginationService,
-              private translateService: TranslateService) {
+  subscriptions: Subscription[] = [];
+
+  constructor(
+    protected registryService: RegistryService,
+    protected notificationsService: NotificationsService,
+    protected paginationService: PaginationService,
+    protected translateService: TranslateService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.activeMetadataSchema$ = this.registryService.getActiveMetadataSchema();
+    this.selectedMetadataSchemaIDs$ = this.registryService.getSelectedMetadataSchemas().pipe(
+      map((schemas: MetadataSchema[]) => schemas.map((schema: MetadataSchema) => schema.id)),
+    );
     this.updateSchemas();
   }
 
@@ -113,30 +133,13 @@ export class MetadataRegistryComponent {
    * @param schema
    */
   editSchema(schema: MetadataSchema) {
-    this.getActiveSchema().pipe(take(1)).subscribe((activeSchema) => {
+    this.subscriptions.push(this.activeMetadataSchema$.pipe(take(1)).subscribe((activeSchema: MetadataSchema) => {
       if (schema === activeSchema) {
         this.registryService.cancelEditMetadataSchema();
       } else {
         this.registryService.editMetadataSchema(schema);
       }
-    });
-  }
-
-  /**
-   * Checks whether the given metadata schema is active (being edited)
-   * @param schema
-   */
-  isActive(schema: MetadataSchema): Observable<boolean> {
-    return this.getActiveSchema().pipe(
-      map((activeSchema) => schema === activeSchema),
-    );
-  }
-
-  /**
-   * Gets the active metadata schema (being edited)
-   */
-  getActiveSchema(): Observable<MetadataSchema> {
-    return this.registryService.getActiveMetadataSchema();
+    }));
   }
 
   /**
@@ -150,42 +153,25 @@ export class MetadataRegistryComponent {
       this.registryService.deselectMetadataSchema(schema);
   }
 
-  /**
-   * Checks whether a given metadata schema is selected in the list (checkbox)
-   * @param schema
-   */
-  isSelected(schema: MetadataSchema): Observable<boolean> {
-    return this.registryService.getSelectedMetadataSchemas().pipe(
-      map((schemas) => schemas.find((selectedSchema) => selectedSchema === schema) != null),
-    );
-  }
-
   /**
    * Delete all the selected metadata schemas
    */
   deleteSchemas() {
-    this.registryService.getSelectedMetadataSchemas().pipe(take(1)).subscribe(
-      (schemas) => {
-        const tasks$ = [];
-        for (const schema of schemas) {
-          if (hasValue(schema.id)) {
-            tasks$.push(this.registryService.deleteMetadataSchema(schema.id).pipe(getFirstCompletedRemoteData()));
-          }
-        }
-        zip(...tasks$).subscribe((responses: RemoteData<NoContent>[]) => {
-          const successResponses = responses.filter((response: RemoteData<NoContent>) => response.hasSucceeded);
-          const failedResponses = responses.filter((response: RemoteData<NoContent>) => response.hasFailed);
-          if (successResponses.length > 0) {
-            this.showNotification(true, successResponses.length);
-          }
-          if (failedResponses.length > 0) {
-            this.showNotification(false, failedResponses.length);
-          }
-          this.registryService.deselectAllMetadataSchema();
-          this.registryService.cancelEditMetadataSchema();
-        });
-      },
-    );
+    this.subscriptions.push(this.selectedMetadataSchemaIDs$.pipe(
+      take(1),
+      switchMap((schemaIDs: number[]) => zip(schemaIDs.map((schemaID: number) => this.registryService.deleteMetadataSchema(schemaID).pipe(getFirstCompletedRemoteData())))),
+    ).subscribe((responses: RemoteData<NoContent>[]) => {
+      const successResponses: RemoteData<NoContent>[] = responses.filter((response: RemoteData<NoContent>) => response.hasSucceeded);
+      const failedResponses: RemoteData<NoContent>[] = responses.filter((response: RemoteData<NoContent>) => response.hasFailed);
+      if (successResponses.length > 0) {
+        this.showNotification(true, successResponses.length);
+      }
+      if (failedResponses.length > 0) {
+        this.showNotification(false, failedResponses.length);
+      }
+      this.registryService.deselectAllMetadataSchema();
+      this.registryService.cancelEditMetadataSchema();
+    }));
   }
 
   /**
@@ -196,20 +182,20 @@ export class MetadataRegistryComponent {
   showNotification(success: boolean, amount: number) {
     const prefix = 'admin.registries.schema.notification';
     const suffix = success ? 'success' : 'failure';
-    const messages = observableCombineLatest(
-      this.translateService.get(success ? `${prefix}.${suffix}` : `${prefix}.${suffix}`),
-      this.translateService.get(`${prefix}.deleted.${suffix}`, { amount: amount }),
-    );
-    messages.subscribe(([head, content]) => {
-      if (success) {
-        this.notificationsService.success(head, content);
-      } else {
-        this.notificationsService.error(head, content);
-      }
-    });
+
+    const head: string = this.translateService.instant(success ? `${prefix}.${suffix}` : `${prefix}.${suffix}`);
+    const content: string = this.translateService.instant(`${prefix}.deleted.${suffix}`, { amount: amount });
+
+    if (success) {
+      this.notificationsService.success(head, content);
+    } else {
+      this.notificationsService.error(head, content);
+    }
   }
+
   ngOnDestroy(): void {
     this.paginationService.clearPagination(this.config.id);
+    this.subscriptions.map((subscription: Subscription) => subscription.unsubscribe());
   }
 
 }

src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="registryService.getActiveMetadataSchema() | async; then editheader; else createHeader"></div>
+<div *ngIf="activeMetadataSchema$ | async; then editheader; else createHeader"></div>
 
 <ng-template #createHeader>
     <h2>{{messagePrefix + '.create' | translate}}</h2>

src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.spec.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import {
   ComponentFixture,
   inject,
@@ -16,42 +16,26 @@ import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { FormComponent } from '../../../../shared/form/form.component';
 import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
+import { RegistryServiceStub } from '../../../../shared/testing/registry.service.stub';
 import { EnumKeysPipe } from '../../../../shared/utils/enum-keys-pipe';
 import { MetadataSchemaFormComponent } from './metadata-schema-form.component';
 
 describe('MetadataSchemaFormComponent', () => {
   let component: MetadataSchemaFormComponent;
   let fixture: ComponentFixture<MetadataSchemaFormComponent>;
-  let registryService: RegistryService;
 
-  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
-  const registryServiceStub = {
-    getActiveMetadataSchema: () => observableOf(undefined),
-    createOrUpdateMetadataSchema: (schema: MetadataSchema) => observableOf(schema),
-    cancelEditMetadataSchema: () => {
-    },
-    clearMetadataSchemaRequests: () => observableOf(undefined),
-  };
-  const formBuilderServiceStub = {
-    createFormGroup: () => {
-      return {
-        patchValue: () => {
-        },
-        reset(_value?: any, _options?: { onlySelf?: boolean; emitEvent?: boolean; }): void {
-        },
-      };
-    },
-  };
-  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
+  let registryService: RegistryServiceStub;
 
   beforeEach(waitForAsync(() => {
+    registryService = new RegistryServiceStub();
+
     return TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule, MetadataSchemaFormComponent, EnumKeysPipe],
       providers: [
-        { provide: RegistryService, useValue: registryServiceStub },
+        { provide: RegistryService, useValue: registryService },
         { provide: FormBuilderService, useValue: getMockFormBuilderService() },
       ],
-      schemas: [NO_ERRORS_SCHEMA],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })
       .overrideComponent(MetadataSchemaFormComponent, {
         remove: {
@@ -88,7 +72,7 @@ describe('MetadataSchemaFormComponent', () => {
 
     describe('without an active schema', () => {
       beforeEach(() => {
-        spyOn(registryService, 'getActiveMetadataSchema').and.returnValue(observableOf(undefined));
+        component.activeMetadataSchema$ = observableOf(undefined);
         component.onSubmit();
         fixture.detectChanges();
       });
@@ -107,7 +91,7 @@ describe('MetadataSchemaFormComponent', () => {
       } as MetadataSchema);
 
       beforeEach(() => {
-        spyOn(registryService, 'getActiveMetadataSchema').and.returnValue(observableOf(expectedWithId));
+        component.activeMetadataSchema$ = observableOf(expectedWithId);
         component.onSubmit();
         fixture.detectChanges();
       });

src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.ts

@@ -21,13 +21,13 @@ import {
   TranslateService,
 } from '@ngx-translate/core';
 import {
-  combineLatest,
   Observable,
+  Subscription,
 } from 'rxjs';
 import {
+  map,
   switchMap,
   take,
-  tap,
 } from 'rxjs/operators';
 
 import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';
@@ -102,64 +102,71 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
    */
   @Output() submitForm: EventEmitter<any> = new EventEmitter();
 
-  constructor(public registryService: RegistryService, private formBuilderService: FormBuilderService, private translateService: TranslateService) {
+  /**
+   * The {@link MetadataSchema} that is currently being edited
+   */
+  activeMetadataSchema$: Observable<MetadataSchema>;
+
+  subscriptions: Subscription[] = [];
+
+  constructor(
+    protected registryService: RegistryService,
+    protected formBuilderService: FormBuilderService,
+    protected translateService: TranslateService,
+  ) {
   }
 
   ngOnInit() {
-    combineLatest([
-      this.translateService.get(`${this.messagePrefix}.name`),
-      this.translateService.get(`${this.messagePrefix}.namespace`),
-    ]).subscribe(([name, namespace]) => {
-      this.name = new DynamicInputModel({
-        id: 'name',
-        label: name,
-        name: 'name',
-        validators: {
-          required: null,
-          pattern: '^[^. ,]*$',
-          maxLength: 32,
-        },
-        required: true,
-        errorMessages: {
-          pattern: 'error.validation.metadata.name.invalid-pattern',
-          maxLength: 'error.validation.metadata.name.max-length',
-        },
-      });
-      this.namespace = new DynamicInputModel({
-        id: 'namespace',
-        label: namespace,
-        name: 'namespace',
-        validators: {
-          required: null,
-          maxLength: 256,
-        },
-        required: true,
-        errorMessages: {
-          maxLength: 'error.validation.metadata.namespace.max-length',
-        },
-      });
-      this.formModel = [
-        new DynamicFormGroupModel(
-          {
-            id: 'metadatadataschemagroup',
-            group:[this.namespace, this.name],
-          }),
-      ];
-      this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-      this.registryService.getActiveMetadataSchema().subscribe((schema: MetadataSchema) => {
-        if (schema == null) {
-          this.clearFields();
-        } else {
-          this.formGroup.patchValue({
-            metadatadataschemagroup: {
-              name: schema.prefix,
-              namespace: schema.namespace,
-            },
-          });
-          this.name.disabled = true;
-        }
-      });
+    this.name = new DynamicInputModel({
+      id: 'name',
+      label: this.translateService.instant(`${this.messagePrefix}.name`),
+      name: 'name',
+      validators: {
+        required: null,
+        pattern: '^[^. ,]*$',
+        maxLength: 32,
+      },
+      required: true,
+      errorMessages: {
+        pattern: 'error.validation.metadata.name.invalid-pattern',
+        maxLength: 'error.validation.metadata.name.max-length',
+      },
     });
+    this.namespace = new DynamicInputModel({
+      id: 'namespace',
+      label: this.translateService.instant(`${this.messagePrefix}.namespace`),
+      name: 'namespace',
+      validators: {
+        required: null,
+        maxLength: 256,
+      },
+      required: true,
+      errorMessages: {
+        maxLength: 'error.validation.metadata.namespace.max-length',
+      },
+    });
+    this.formModel = [
+      new DynamicFormGroupModel(
+        {
+          id: 'metadatadataschemagroup',
+          group:[this.namespace, this.name],
+        }),
+    ];
+    this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+    this.activeMetadataSchema$ = this.registryService.getActiveMetadataSchema();
+    this.subscriptions.push(this.activeMetadataSchema$.subscribe((schema: MetadataSchema) => {
+      if (schema == null) {
+        this.clearFields();
+      } else {
+        this.formGroup.patchValue({
+          metadatadataschemagroup: {
+            name: schema.prefix,
+            namespace: schema.namespace,
+          },
+        });
+        this.name.disabled = true;
+      }
+    }));
   }
 
   /**
@@ -176,48 +183,29 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
    * Emit the updated/created schema using the EventEmitter submitForm
    */
   onSubmit(): void {
-    this.registryService
-      .getActiveMetadataSchema()
-      .pipe(
-        take(1),
-        switchMap((schema: MetadataSchema) => {
-          const metadataValues = {
-            prefix: this.name.value,
-            namespace: this.namespace.value,
-          };
-
-          let createOrUpdate$: Observable<MetadataSchema>;
-
-          if (schema == null) {
-            createOrUpdate$ =
-                  this.registryService.createOrUpdateMetadataSchema(
-                    Object.assign(new MetadataSchema(), metadataValues),
-                  );
-          } else {
-            const updatedSchema = Object.assign(
-              new MetadataSchema(),
-              schema,
-              {
-                namespace: metadataValues.namespace,
-              },
-            );
-            createOrUpdate$ =
-                  this.registryService.createOrUpdateMetadataSchema(
-                    updatedSchema,
-                  );
-          }
-
-          return createOrUpdate$;
-        }),
-        tap(() => {
-          this.registryService.clearMetadataSchemaRequests().subscribe();
-        }),
-      )
-      .subscribe((updatedOrCreatedSchema: MetadataSchema) => {
-        this.submitForm.emit(updatedOrCreatedSchema);
-        this.clearFields();
-        this.registryService.cancelEditMetadataSchema();
-      });
+    this.activeMetadataSchema$.pipe(
+      take(1),
+      switchMap((schema: MetadataSchema) => {
+        const metadataValues = {
+          prefix: this.name.value,
+          namespace: this.namespace.value,
+        };
+        if (schema == null) {
+          return this.registryService.createOrUpdateMetadataSchema(Object.assign(new MetadataSchema(), metadataValues));
+        } else {
+          return this.registryService.createOrUpdateMetadataSchema(Object.assign(new MetadataSchema(), schema, {
+            namespace: metadataValues.namespace,
+          }));
+        }
+      }),
+      switchMap((updatedOrCreatedSchema: MetadataSchema) => this.registryService.clearMetadataSchemaRequests().pipe(
+        map(() => updatedOrCreatedSchema),
+      )),
+    ).subscribe((updatedOrCreatedSchema: MetadataSchema) => {
+      this.submitForm.emit(updatedOrCreatedSchema);
+      this.clearFields();
+      this.registryService.cancelEditMetadataSchema();
+    });
   }
 
   /**
@@ -233,5 +221,6 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
    */
   ngOnDestroy(): void {
     this.onCancel();
+    this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
   }
 }

src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="registryService.getActiveMetadataField() | async; then editheader; else createHeader"></div>
+<div *ngIf="activeMetadataField$ | async; then editheader; else createHeader"></div>
 
 <ng-template #createHeader>
     <h2>{{messagePrefix + '.create' | translate}}</h2>

src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import {
   ComponentFixture,
   inject,
@@ -17,13 +17,15 @@ import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { FormComponent } from '../../../../shared/form/form.component';
 import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
+import { RegistryServiceStub } from '../../../../shared/testing/registry.service.stub';
 import { EnumKeysPipe } from '../../../../shared/utils/enum-keys-pipe';
 import { MetadataFieldFormComponent } from './metadata-field-form.component';
 
 describe('MetadataFieldFormComponent', () => {
   let component: MetadataFieldFormComponent;
   let fixture: ComponentFixture<MetadataFieldFormComponent>;
-  let registryService: RegistryService;
+
+  let registryService: RegistryServiceStub;
 
   const metadataSchema = Object.assign(new MetadataSchema(), {
     id: 1,
@@ -31,37 +33,16 @@ describe('MetadataFieldFormComponent', () => {
     prefix: 'fake',
   });
 
-  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
-  const registryServiceStub = {
-    getActiveMetadataField: () => observableOf(undefined),
-    createMetadataField: (field: MetadataField) => observableOf(field),
-    updateMetadataField: (field: MetadataField) => observableOf(field),
-    cancelEditMetadataField: () => {
-    },
-    cancelEditMetadataSchema: () => {
-    },
-    clearMetadataFieldRequests: () => observableOf(undefined),
-  };
-  const formBuilderServiceStub = {
-    createFormGroup: () => {
-      return {
-        patchValue: () => {
-        },
-        reset(_value?: any, _options?: { onlySelf?: boolean; emitEvent?: boolean; }): void {
-        },
-      };
-    },
-  };
-  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
-
   beforeEach(waitForAsync(() => {
+    registryService = new RegistryServiceStub();
+
     return TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule, MetadataFieldFormComponent, EnumKeysPipe],
       providers: [
-        { provide: RegistryService, useValue: registryServiceStub },
+        { provide: RegistryService, useValue: registryService },
         { provide: FormBuilderService, useValue: getMockFormBuilderService() },
       ],
-      schemas: [NO_ERRORS_SCHEMA],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })
       .overrideComponent(MetadataFieldFormComponent, {
         remove: { imports: [FormComponent] },

src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts

@@ -22,7 +22,7 @@ import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
-import { combineLatest } from 'rxjs';
+import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { MetadataField } from '../../../../core/metadata/metadata-field.model';
@@ -113,6 +113,8 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
    */
   @Output() submitForm: EventEmitter<any> = new EventEmitter();
 
+  activeMetadataField$: Observable<MetadataField>;
+
   constructor(public registryService: RegistryService,
               private formBuilderService: FormBuilderService,
               private translateService: TranslateService) {
@@ -121,71 +123,66 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
   /**
    * Initialize the component, setting up the necessary Models for the dynamic form
    */
-  ngOnInit() {
-    combineLatest([
-      this.translateService.get(`${this.messagePrefix}.element`),
-      this.translateService.get(`${this.messagePrefix}.qualifier`),
-      this.translateService.get(`${this.messagePrefix}.scopenote`),
-    ]).subscribe(([element, qualifier, scopenote]) => {
-      this.element = new DynamicInputModel({
-        id: 'element',
-        label: element,
-        name: 'element',
-        validators: {
-          required: null,
-          pattern: '^[^. ,]*$',
-          maxLength: 64,
-        },
-        required: true,
-        errorMessages: {
-          pattern: 'error.validation.metadata.element.invalid-pattern',
-          maxLength: 'error.validation.metadata.element.max-length',
-        },
-      });
-      this.qualifier = new DynamicInputModel({
-        id: 'qualifier',
-        label: qualifier,
-        name: 'qualifier',
-        validators: {
-          pattern: '^[^. ,]*$',
-          maxLength: 64,
-        },
-        required: false,
-        errorMessages: {
-          pattern: 'error.validation.metadata.qualifier.invalid-pattern',
-          maxLength: 'error.validation.metadata.qualifier.max-length',
-        },
-      });
-      this.scopeNote = new DynamicTextAreaModel({
-        id: 'scopeNote',
-        label: scopenote,
-        name: 'scopeNote',
-        required: false,
-        rows: 5,
-      });
-      this.formModel = [
-        new DynamicFormGroupModel(
-          {
-            id: 'metadatadatafieldgroup',
-            group:[this.element, this.qualifier, this.scopeNote],
-          }),
-      ];
-      this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-      this.registryService.getActiveMetadataField().subscribe((field: MetadataField): void => {
-        if (field == null) {
-          this.clearFields();
-        } else {
-          this.formGroup.patchValue({
-            metadatadatafieldgroup: {
-              element: field.element,
-              qualifier: field.qualifier,
-              scopeNote: field.scopeNote,
-            },
-          });
-          this.element.disabled = true;
-          this.qualifier.disabled = true;
-        }
-      });
+  ngOnInit(): void {
+    this.activeMetadataField$ = this.registryService.getActiveMetadataField();
+    this.element = new DynamicInputModel({
+      id: 'element',
+      label: this.translateService.instant(`${this.messagePrefix}.element`),
+      name: 'element',
+      validators: {
+        required: null,
+        pattern: '^[^. ,]*$',
+        maxLength: 64,
+      },
+      required: true,
+      errorMessages: {
+        pattern: 'error.validation.metadata.element.invalid-pattern',
+        maxLength: 'error.validation.metadata.element.max-length',
+      },
+    });
+    this.qualifier = new DynamicInputModel({
+      id: 'qualifier',
+      label: this.translateService.instant(`${this.messagePrefix}.qualifier`),
+      name: 'qualifier',
+      validators: {
+        pattern: '^[^. ,]*$',
+        maxLength: 64,
+      },
+      required: false,
+      errorMessages: {
+        pattern: 'error.validation.metadata.qualifier.invalid-pattern',
+        maxLength: 'error.validation.metadata.qualifier.max-length',
+      },
+    });
+    this.scopeNote = new DynamicTextAreaModel({
+      id: 'scopeNote',
+      label: this.translateService.instant(`${this.messagePrefix}.scopenote`),
+      name: 'scopeNote',
+      required: false,
+      rows: 5,
+    });
+    this.formModel = [
+      new DynamicFormGroupModel(
+        {
+          id: 'metadatadatafieldgroup',
+          group:[this.element, this.qualifier, this.scopeNote],
+        }),
+    ];
+    this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+    this.registryService.getActiveMetadataField().subscribe((field: MetadataField): void => {
+      if (field == null) {
+        this.clearFields();
+      } else {
+        this.formGroup.patchValue({
+          metadatadatafieldgroup: {
+            element: field.element,
+            qualifier: field.qualifier,
+            scopeNote: field.scopeNote,
+          },
+        });
+        this.element.disabled = true;
+        this.qualifier.disabled = true;
+      }
     });
   }
 

src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html

@@ -31,8 +31,8 @@
               </thead>
               <tbody>
               <tr *ngFor="let field of fields?.page"
-                  [ngClass]="{'table-primary' : isActive(field) | async}">
-                <td *ngVar="(isSelected(field) | async) as selected">
+                  [ngClass]="{'table-primary' : (activeField$ | async)?.id === field.id}">
+                <td *ngVar="(selectedMetadataFieldIDs$ | async)?.includes(field.id) as selected">
                   <input type="checkbox"
                          [attr.aria-label]="(selected ? 'admin.registries.schema.fields.deselect' : 'admin.registries.schema.fields.select') | translate"
                          [checked]="selected"

src/app/admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import {
   ComponentFixture,
   inject,
@@ -7,16 +7,12 @@ import {
   waitForAsync,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
 
-import { RestResponse } from '../../../core/cache/response.models';
 import { ConfigurationDataService } from '../../../core/data/configuration-data.service';
 import { buildPaginatedList } from '../../../core/data/paginated-list.model';
 import { GroupDataService } from '../../../core/eperson/group-data.service';
@@ -34,7 +30,7 @@ import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
 import { HostWindowServiceStub } from '../../../shared/testing/host-window-service.stub';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
-import { RouterStub } from '../../../shared/testing/router.stub';
+import { RegistryServiceStub } from '../../../shared/testing/registry.service.stub';
 import { SearchConfigurationServiceStub } from '../../../shared/testing/search-configuration-service.stub';
 import { createPaginatedList } from '../../../shared/testing/utils.test';
 import { EnumKeysPipe } from '../../../shared/utils/enum-keys-pipe';
@@ -45,8 +41,12 @@ import { MetadataSchemaComponent } from './metadata-schema.component';
 describe('MetadataSchemaComponent', () => {
   let comp: MetadataSchemaComponent;
   let fixture: ComponentFixture<MetadataSchemaComponent>;
-  let registryService: RegistryService;
-  const mockSchemasList = [
+
+  let registryService: RegistryServiceStub;
+  let activatedRoute: ActivatedRouteStub;
+  let paginationService: PaginationServiceStub;
+
+  const mockSchemasList: MetadataSchema[] = [
     {
       id: 1,
       _links: {
@@ -67,8 +67,8 @@ describe('MetadataSchemaComponent', () => {
       prefix: 'mock',
       namespace: 'http://dspace.org/mockschema',
     },
-  ];
-  const mockFieldsList = [
+  ] as MetadataSchema[];
+  const mockFieldsList: MetadataField[] = [
     {
       id: 1,
       _links: {
@@ -117,33 +117,8 @@ describe('MetadataSchemaComponent', () => {
       scopeNote: null,
       schema: createSuccessfulRemoteDataObject$(mockSchemasList[1]),
     },
-  ];
-  const mockSchemas = createSuccessfulRemoteDataObject$(buildPaginatedList(null, mockSchemasList));
-  /* 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))),
-    getMetadataSchemaByPrefix: (schemaName: string) => createSuccessfulRemoteDataObject$(mockSchemasList.filter((value) => value.prefix === schemaName)[0]),
-    getActiveMetadataField: () => observableOf(undefined),
-    getSelectedMetadataFields: () => observableOf([]),
-    editMetadataField: (schema) => {
-    },
-    cancelEditMetadataField: () => {
-    },
-    deleteMetadataField: () => observableOf(new RestResponse(true, 200, 'OK')),
-    deselectAllMetadataField: () => {
-    },
-    clearMetadataFieldRequests: () => observableOf(undefined),
-  };
-  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
+  ] as MetadataField[];
   const schemaNameParam = 'mock';
-  const activatedRouteStub = Object.assign(new ActivatedRouteStub(), {
-    params: observableOf({
-      schemaName: schemaNameParam,
-    }),
-  });
-
-  const paginationService = new PaginationServiceStub();
 
   const configurationDataService = jasmine.createSpyObj('configurationDataService', {
     findByPropertyName: createSuccessfulRemoteDataObject$(Object.assign(new ConfigurationProperty(), {
@@ -162,6 +137,14 @@ describe('MetadataSchemaComponent', () => {
 
 
   beforeEach(waitForAsync(() => {
+    activatedRoute = new ActivatedRouteStub({
+      schemaName: schemaNameParam,
+    });
+    paginationService = new PaginationServiceStub();
+    registryService = new RegistryServiceStub();
+    spyOn(registryService, 'getMetadataFieldsBySchema').and.returnValue(createSuccessfulRemoteDataObject$(buildPaginatedList(null, mockFieldsList.filter((value) => value.id === 3 || value.id === 4))));
+    spyOn(registryService, 'getMetadataSchemaByPrefix').and.callFake((schemaName) => createSuccessfulRemoteDataObject$(mockSchemasList.filter((value) => value.prefix === schemaName)[0]));
+
     TestBed.configureTestingModule({
       imports: [
         CommonModule,
@@ -174,10 +157,9 @@ describe('MetadataSchemaComponent', () => {
         VarDirective,
       ],
       providers: [
-        { provide: RegistryService, useValue: registryServiceStub },
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: RegistryService, useValue: registryService },
+        { provide: ActivatedRoute, useValue: activatedRoute },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
-        { provide: Router, useValue: new RouterStub() },
         { provide: PaginationService, useValue: paginationService },
         {
           provide: NotificationsService,
@@ -187,7 +169,7 @@ describe('MetadataSchemaComponent', () => {
         { provide: ConfigurationDataService, useValue: configurationDataService },
         { provide: SearchConfigurationService, useValue: new SearchConfigurationServiceStub()  },
       ],
-      schemas: [NO_ERRORS_SCHEMA],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })
       .overrideComponent(MetadataSchemaComponent, {
         remove: {
@@ -242,7 +224,7 @@ describe('MetadataSchemaComponent', () => {
     }));
 
     it('should cancel editing the selected field when clicked again', waitForAsync(() => {
-      spyOn(registryService, 'getActiveMetadataField').and.returnValue(observableOf(mockFieldsList[2] as MetadataField));
+      comp.activeField$ = observableOf(mockFieldsList[2] as MetadataField);
       spyOn(registryService, 'cancelEditMetadataField');
       row.click();
       fixture.detectChanges();
@@ -257,7 +239,7 @@ describe('MetadataSchemaComponent', () => {
 
     beforeEach(() => {
       spyOn(registryService, 'deleteMetadataField').and.callThrough();
-      spyOn(registryService, 'getSelectedMetadataFields').and.returnValue(observableOf(selectedFields as MetadataField[]));
+      comp.selectedMetadataFieldIDs$ = observableOf(selectedFields.map((metadataField: MetadataField) => metadataField.id));
       comp.deleteFields();
       fixture.detectChanges();
     });

src/app/admin/admin-registries/metadata-schema/metadata-schema.component.ts

@@ -20,9 +20,9 @@ import {
 import {
   BehaviorSubject,
   combineLatest,
-  combineLatest as observableCombineLatest,
   Observable,
   of as observableOf,
+  Subscription,
   zip,
 } from 'rxjs';
 import {
@@ -42,7 +42,6 @@ import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteDataPayload,
 } from '../../../core/shared/operators';
-import { hasValue } from '../../../shared/empty.util';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { PaginationComponent } from '../../../shared/pagination/pagination.component';
 import { toFindListOptions } from '../../../shared/pagination/pagination.utils';
@@ -71,7 +70,7 @@ import { MetadataFieldFormComponent } from './metadata-field-form/metadata-field
  * A component used for managing all existing metadata fields within the current metadata schema.
  * The admin can create, edit or delete metadata fields here.
  */
-export class MetadataSchemaComponent implements OnInit, OnDestroy {
+export class MetadataSchemaComponent implements OnDestroy, OnInit {
   /**
    * The metadata schema
    */
@@ -96,26 +95,33 @@ export class MetadataSchemaComponent implements OnInit, OnDestroy {
    */
   needsUpdate$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
 
-  constructor(private registryService: RegistryService,
-              private route: ActivatedRoute,
-              private notificationsService: NotificationsService,
-              private paginationService: PaginationService,
-              private translateService: TranslateService) {
+  /**
+   * The current {@link MetadataField} that is being edited
+   */
+  activeField$: Observable<MetadataField>;
 
+  /**
+   * The selected {@link MetadataField} IDs
+   */
+  selectedMetadataFieldIDs$: Observable<number[]>;
+
+  subscriptions: Subscription[] = [];
+
+  constructor(
+    protected registryService: RegistryService,
+    protected route: ActivatedRoute,
+    protected notificationsService: NotificationsService,
+    protected paginationService: PaginationService,
+    protected translateService: TranslateService,
+  ) {
   }
 
   ngOnInit(): void {
-    this.route.params.subscribe((params) => {
-      this.initialize(params);
-    });
-  }
-
-  /**
-   * Initialize the component using the params within the url (schemaName)
-   * @param params
-   */
-  initialize(params) {
-    this.metadataSchema$ = this.registryService.getMetadataSchemaByPrefix(params.schemaName).pipe(getFirstSucceededRemoteDataPayload());
+    this.metadataSchema$ = this.registryService.getMetadataSchemaByPrefix(this.route.snapshot.params.schemaName).pipe(getFirstSucceededRemoteDataPayload());
+    this.activeField$ = this.registryService.getActiveMetadataField();
+    this.selectedMetadataFieldIDs$ = this.registryService.getSelectedMetadataFields().pipe(
+      map((metadataFields: MetadataField[]) => metadataFields.map((metadataField: MetadataField) => metadataField.id)),
+    );
     this.updateFields();
   }
 
@@ -148,30 +154,13 @@ export class MetadataSchemaComponent implements OnInit, OnDestroy {
    * @param field
    */
   editField(field: MetadataField) {
-    this.getActiveField().pipe(take(1)).subscribe((activeField) => {
+    this.subscriptions.push(this.activeField$.pipe(take(1)).subscribe((activeField) => {
       if (field === activeField) {
         this.registryService.cancelEditMetadataField();
       } else {
         this.registryService.editMetadataField(field);
       }
-    });
-  }
-
-  /**
-   * Checks whether the given metadata field is active (being edited)
-   * @param field
-   */
-  isActive(field: MetadataField): Observable<boolean> {
-    return this.getActiveField().pipe(
-      map((activeField) => field === activeField),
-    );
-  }
-
-  /**
-   * Gets the active metadata field (being edited)
-   */
-  getActiveField(): Observable<MetadataField> {
-    return this.registryService.getActiveMetadataField();
+    }));
   }
 
   /**
@@ -185,42 +174,25 @@ export class MetadataSchemaComponent implements OnInit, OnDestroy {
       this.registryService.deselectMetadataField(field);
   }
 
-  /**
-   * Checks whether a given metadata field is selected in the list (checkbox)
-   * @param field
-   */
-  isSelected(field: MetadataField): Observable<boolean> {
-    return this.registryService.getSelectedMetadataFields().pipe(
-      map((fields) => fields.find((selectedField) => selectedField === field) != null),
-    );
-  }
-
   /**
    * Delete all the selected metadata fields
    */
   deleteFields() {
-    this.registryService.getSelectedMetadataFields().pipe(take(1)).subscribe(
-      (fields) => {
-        const tasks$ = [];
-        for (const field of fields) {
-          if (hasValue(field.id)) {
-            tasks$.push(this.registryService.deleteMetadataField(field.id).pipe(getFirstCompletedRemoteData()));
-          }
-        }
-        zip(...tasks$).subscribe((responses: RemoteData<NoContent>[]) => {
-          const successResponses = responses.filter((response: RemoteData<NoContent>) => response.hasSucceeded);
-          const failedResponses = responses.filter((response: RemoteData<NoContent>) => response.hasFailed);
-          if (successResponses.length > 0) {
-            this.showNotification(true, successResponses.length);
-          }
-          if (failedResponses.length > 0) {
-            this.showNotification(false, failedResponses.length);
-          }
-          this.registryService.deselectAllMetadataField();
-          this.registryService.cancelEditMetadataField();
-        });
-      },
-    );
+    this.subscriptions.push(this.selectedMetadataFieldIDs$.pipe(
+      take(1),
+      switchMap((fieldIDs) => zip(fieldIDs.map((fieldID) => this.registryService.deleteMetadataField(fieldID).pipe(getFirstCompletedRemoteData())))),
+    ).subscribe((responses: RemoteData<NoContent>[]) => {
+      const successResponses = responses.filter((response: RemoteData<NoContent>) => response.hasSucceeded);
+      const failedResponses = responses.filter((response: RemoteData<NoContent>) => response.hasFailed);
+      if (successResponses.length > 0) {
+        this.showNotification(true, successResponses.length);
+      }
+      if (failedResponses.length > 0) {
+        this.showNotification(false, failedResponses.length);
+      }
+      this.registryService.deselectAllMetadataField();
+      this.registryService.cancelEditMetadataField();
+    }));
   }
 
   /**
@@ -231,21 +203,19 @@ export class MetadataSchemaComponent implements OnInit, OnDestroy {
   showNotification(success: boolean, amount: number) {
     const prefix = 'admin.registries.schema.notification';
     const suffix = success ? 'success' : 'failure';
-    const messages = observableCombineLatest([
-      this.translateService.get(success ? `${prefix}.${suffix}` : `${prefix}.${suffix}`),
-      this.translateService.get(`${prefix}.field.deleted.${suffix}`, { amount: amount }),
-    ]);
-    messages.subscribe(([head, content]) => {
-      if (success) {
-        this.notificationsService.success(head, content);
-      } else {
-        this.notificationsService.error(head, content);
-      }
-    });
+    const head = this.translateService.instant(success ? `${prefix}.${suffix}` : `${prefix}.${suffix}`);
+    const content = this.translateService.instant(`${prefix}.field.deleted.${suffix}`, { amount: amount });
+    if (success) {
+      this.notificationsService.success(head, content);
+    } else {
+      this.notificationsService.error(head, content);
+    }
   }
+
   ngOnDestroy(): void {
     this.paginationService.clearPagination(this.config.id);
     this.registryService.deselectAllMetadataField();
+    this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
   }
 
 }