Bump webpack from 5.101.0 to 5.101.3 in the webpack group

Bumps the webpack group with 1 update: [webpack](https://github.com/webpack/webpack).


Updates `webpack` from 5.101.0 to 5.101.3
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](https://github.com/webpack/webpack/compare/v5.101.0...v5.101.3)

---
updated-dependencies:
- dependency-name: webpack
  dependency-version: 5.101.3
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: webpack
...

Signed-off-by: dependabot[bot] <support@github.com>

.editorconfig

@@ -15,6 +15,10 @@ trim_trailing_whitespace = false
 
 [*.ts]
 quote_type = single
+ij_typescript_enforce_trailing_comma = whenmultiline
+
+[*.js]
+ij_javascript_enforce_trailing_comma = whenmultiline
 
 [*.json5]
 ij_json_keep_blank_lines_in_code = 3

.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"
   ],
@@ -161,6 +160,9 @@
             ]
           }
         ],
+        "@angular-eslint/prefer-standalone": [
+          "error"
+        ],
         "@angular-eslint/no-attribute-decorator": "error",
         "@angular-eslint/no-output-native": "warn",
         "@angular-eslint/no-output-on-prefix": "warn",
@@ -251,6 +253,10 @@
             "forceSingleLine": true
           }
         ],
+        "import/enforce-node-protocol-usage": [
+          "error",
+          "always"
+        ],
 
         "unused-imports/no-unused-imports": "error",
         "lodash/import-scope": [
@@ -261,9 +267,48 @@
         "rxjs/no-nested-subscribe": "off",     // todo: go over _all_ cases
 
         // Custom DSpace Angular rules
+        "dspace-angular-ts/alias-imports": [
+          "error",
+          {
+            "aliases": [
+              {
+                "package": "rxjs",
+                "imported": "of",
+                "local": "of"
+              }
+            ]
+          }
+        ],
         "dspace-angular-ts/themed-component-classes": "error",
         "dspace-angular-ts/themed-component-selectors": "error",
-        "dspace-angular-ts/themed-component-usages": "error"
+        "dspace-angular-ts/themed-component-usages": "error",
+        "dspace-angular-ts/themed-decorators": [
+          "off",
+          {
+            "decorators": {
+              "listableObjectComponent": 3,
+              "rendersSectionForMenu": 2
+            }
+          }
+        ],
+        "dspace-angular-ts/themed-wrapper-no-input-defaults": "error",
+        "dspace-angular-ts/unique-decorators": [
+          "off",
+          {
+            "decorators": [
+              "listableObjectComponent"
+            ]
+          }
+        ],
+        "dspace-angular-ts/sort-standalone-imports": [
+          "error",
+          {
+            "locale": "en-US",
+            "maxItems": 0,
+            "indent": 2,
+            "trailingComma": true
+          }
+        ]
       }
     },
     {
@@ -293,7 +338,9 @@
       ],
       "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",
+        "@angular-eslint/template/prefer-control-flow": "error"
       }
     },
     {
@@ -301,10 +348,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/pull_request_template.md

@@ -25,7 +25,7 @@ However, reviewers may request that you complete any actions in this list if you
 - [ ] My PR **doesn't introduce circular dependencies** (verified via `npm run check-circ-deps`)
 - [ ] My PR **includes [TypeDoc](https://typedoc.org/) comments** for _all new (or modified) public methods and classes_. It also includes TypeDoc for large or complex private methods.
 - [ ] My PR **passes all specs/tests and includes new/updated specs or tests** based on the [Code Testing Guide](https://wiki.lyrasis.org/display/DSPACE/Code+Testing+Guide).
-- [ ] My PR **aligns with [Accessibility guidelines](https://wiki.lyrasis.org/display/DSDOC8x/Accessibility)** if it makes changes to the user interface.
+- [ ] My PR **aligns with [Accessibility guidelines](https://wiki.lyrasis.org/display/DSDOC9x/Accessibility)** if it makes changes to the user interface.
 - [ ] My PR **uses i18n (internationalization) keys** instead of hardcoded English text, to allow for translations.
 - [ ] My PR **includes details on how to test it**. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
 - [ ] If my PR includes new libraries/dependencies (in `package.json`), I've made sure their licenses align with the [DSpace BSD License](https://github.com/DSpace/DSpace/blob/main/LICENSE) based on the [Licensing of Contributions](https://wiki.lyrasis.org/display/DSPACE/Code+Contribution+Guidelines#CodeContributionGuidelines-LicensingofContributions) documentation.

.github/workflows/build.yml

@@ -29,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"
@@ -190,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

CONTRIBUTING.md

@@ -10,7 +10,7 @@ DSpace is a community built and supported project. We do not have a centralized
 ## Contribute new code via a Pull Request
 
 We accept [GitHub Pull Requests (PRs)](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork) at any time from anyone.
-Contributors to each release are recognized in our [Release Notes](https://wiki.lyrasis.org/display/DSDOC8x/Release+Notes).
+Contributors to each release are recognized in our [Release Notes](https://wiki.lyrasis.org/display/DSDOC9x/Release+Notes).
 
 Code Contribution Checklist
 - [ ] PRs _should_ be smaller in size (ideally less than 1,000 lines of code, not including comments & tests)
@@ -18,7 +18,7 @@ Code Contribution Checklist
 - [ ] PRs **must** not introduce circular dependencies (verified via `yarn check-circ-deps`)
 - [ ] PRs **must** include [TypeDoc](https://typedoc.org/) comments for _all new (or modified) public methods and classes_. Large or complex private methods should also have TypeDoc.
 - [ ] PRs **must** pass all automated pecs/tests and includes new/updated specs or tests based on the [Code Testing Guide](https://wiki.lyrasis.org/display/DSPACE/Code+Testing+Guide).
-- [ ] User interface changes **must** align with [Accessibility guidelines](https://wiki.lyrasis.org/display/DSDOC8x/Accessibility)
+- [ ] User interface changes **must** align with [Accessibility guidelines](https://wiki.lyrasis.org/display/DSDOC9x/Accessibility)
 - [ ] PRs **must** use i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
 - [ ] Details on how to test the PR **must** be provided. Reviewers must be aware of any steps they need to take to successfully test your fix or feature.
 - [ ] If a PR includes new libraries/dependencies (in `package.json`), then their software licenses **must** align with the [DSpace BSD License](https://github.com/DSpace/dspace-angular/blob/main/LICENSE) based on the [Licensing of Contributions](https://wiki.lyrasis.org/display/DSPACE/Code+Contribution+Guidelines#CodeContributionGuidelines-LicensingofContributions) documentation.

README.md

@@ -30,12 +30,12 @@ Downloads
 Documentation for each release may be viewed online or downloaded via our [Documentation Wiki](https://wiki.lyrasis.org/display/DSDOC/).
 
 The latest DSpace Installation instructions are available at:
-https://wiki.lyrasis.org/display/DSDOC7x/Installing+DSpace
+https://wiki.lyrasis.org/display/DSDOC9x/Installing+DSpace
 
 Quick start
 -----------
 
-**Ensure you're running [Node](https://nodejs.org) `v16.x` or `v18.x`, [npm](https://www.npmjs.com/) >= `v5.x`**
+**Ensure you're running [Node](https://nodejs.org) `v18.x` or `v20.x`, [npm](https://www.npmjs.com/) >= `v10.x`**
 
 ```bash
 # clone the repo
@@ -90,7 +90,7 @@ Requirements
 ------------
 
 -	[Node.js](https://nodejs.org)
--	Ensure you're running node `v16.x` or `v18.x`
+-	Ensure you're running node `v18.x` or `v20.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.
 
@@ -349,7 +349,7 @@ See our [DSpace Code Testing Guide](https://wiki.lyrasis.org/display/DSPACE/Code
 Documentation
 --------------
 
-Official DSpace documentation is available in the DSpace wiki at https://wiki.lyrasis.org/display/DSDOC7x/
+Official DSpace documentation is available in the DSpace wiki at https://wiki.lyrasis.org/display/DSDOC9x/
 
 Some UI specific configuration documentation is also found in the [`./docs`](docs) folder of this codebase.
 

angular.json

@@ -58,7 +58,10 @@
                 "input": "src/themes/dspace/styles/theme.scss",
                 "inject": false,
                 "bundleName": "dspace-theme"
-              }
+              },
+              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.css"
             ],
             "scripts": [],
             "baseHref": "/"

config/config.example.yml

@@ -23,6 +23,45 @@ ssr:
   # 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:
@@ -223,6 +265,9 @@ languages:
   - code: es
     label: Español
     active: true
+  - code: fa
+    label: فارسی
+    active: true
   - code: fi
     label: Suomi
     active: true
@@ -232,6 +277,9 @@ languages:
   - code: gd
     label: Gàidhlig
     active: true
+  - code: gu
+    label: ગુજરાતી
+    active: true
   - code: hi
     label: हिंदी
     active: true
@@ -247,6 +295,9 @@ languages:
   - code: lv
     label: Latviešu
     active: true
+  - code: mr
+    label: मराठी
+    active: true
   - code: nl
     label: Nederlands
     active: true
@@ -259,6 +310,9 @@ languages:
   - code: pt-BR
     label: Português do Brasil
     active: true
+  - code: ru
+    label: Русский
+    active: true
   - code: sr-lat
     label: Srpski (lat)
     active: true
@@ -322,15 +376,25 @@ item:
     # Rounded to the nearest size in the list of selectable sizes on the
     # settings menu.  See pageSizeOptions in 'pagination-component-options.model.ts'.
     pageSize: 5
+    # Show the bitstream access status label on the item page
+    showAccessStatuses: false
 
 # 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
@@ -415,6 +479,8 @@ info:
   enableEndUserAgreement: true
   enablePrivacyStatement: true
   enableCOARNotifySupport: true
+  # Whether to show the cookie consent popup and the cookie settings footer link or not.
+  enableCookieConsentPopup: true
 
 # Whether to enable Markdown (https://commonmark.org/) and MathJax (https://www.mathjax.org/)
 # display in supported metadata fields. By default, only dc.description.abstract is supported.
@@ -448,6 +514,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
@@ -502,7 +574,6 @@ notifyMetrics:
     config: 'NOTIFY.outgoing.delivered'
     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
@@ -516,3 +587,42 @@ liveRegion:
   messageTimeOutDurationMs: 30000
   # The visibility of the live region. Setting this to true is only useful for debugging purposes.
   isVisible: false
+
+# Geospatial Map display options
+geospatialMapViewer:
+  # Which fields to use for parsing as geospatial points in search maps
+  # (note, the item page field component allows any field(s) to be used
+  # and is set as an input when declaring the component)
+  spatialMetadataFields:
+    - 'dcterms.spatial'
+  # Which discovery configuration to use for 'geospatial search', used
+  # in the browse map
+  spatialFacetDiscoveryConfiguration: 'geospatial'
+  # Which filter / facet name to use for faceted geospatial search
+  # used in the browse map
+  spatialPointFilterName: 'point'
+  # Whether item page geospatial metadata should be displayed
+  # (assumes they are wrapped in a test for this config in the template as
+  # per the default templates supplied with DSpace for untyped-item and publication)
+  enableItemPageFields: false
+  # Whether the browse map should be enabled and included in the browse menu
+  enableBrowseMap: false
+  # Whether a 'map view' mode should be included alongside list and grid views
+  # in search result pages
+  enableSearchViewMode: false
+  # The tile provider(s) to use for the map tiles drawn in the leaflet maps.
+  # (see https://leaflet-extras.github.io/leaflet-providers/preview/) for a full list
+  tileProviders:
+    - 'OpenStreetMap.Mapnik'
+  # Starting centre point for the map, as lat and lng coordinates. This is useful
+  # to set the centre of the map when the map is first loaded and if there are no
+  # points, shapes or markers to display.
+  # Defaults to the centre of Istanbul
+  defaultCentrePoint:
+    lat: 41.015137
+    lng: 28.979530
+
+# 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

@@ -34,6 +34,7 @@ export default defineConfig({
     DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME: 'People',
     // Account used to test basic submission process
     DSPACE_TEST_SUBMIT_USER: 'dspacedemo+submit@gmail.com',
+    DSPACE_TEST_SUBMIT_USER_UUID: '914955b1-cf2e-4884-8af7-a166aa24cf73',
     DSPACE_TEST_SUBMIT_USER_PASSWORD: 'dspace',
     // Administrator users group
     DSPACE_ADMINISTRATOR_GROUP: 'e59f5659-bff9-451e-b28f-439e7bd467e4'

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

@@ -9,9 +9,11 @@ describe('Admin Add New Modals', () => {
 
   it('Add new Community modal should pass accessibility tests', () => {
     // Pin the sidebar open
+    cy.get('[data-test="sidebar-collapse-toggle"]').trigger('mouseover');
     cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
+    cy.get('[data-test="admin-menu-section-new-title"]').should('be.visible');
     cy.get('[data-test="admin-menu-section-new-title"]').click();
 
     cy.get('a[data-test="menu.section.new_community"]').click();
@@ -22,9 +24,11 @@ describe('Admin Add New Modals', () => {
 
   it('Add new Collection modal should pass accessibility tests', () => {
     // Pin the sidebar open
+    cy.get('[data-test="sidebar-collapse-toggle"]').trigger('mouseover');
     cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
+    cy.get('[data-test="admin-menu-section-new-title"]').should('be.visible');
     cy.get('[data-test="admin-menu-section-new-title"]').click();
 
     cy.get('a[data-test="menu.section.new_collection"]').click();
@@ -35,9 +39,11 @@ describe('Admin Add New Modals', () => {
 
   it('Add new Item modal should pass accessibility tests', () => {
     // Pin the sidebar open
+    cy.get('[data-test="sidebar-collapse-toggle"]').trigger('mouseover');
     cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
+    cy.get('[data-test="admin-menu-section-new-title"]').should('be.visible');
     cy.get('[data-test="admin-menu-section-new-title"]').click();
 
     cy.get('a[data-test="menu.section.new_item"]').click();

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

@@ -9,10 +9,12 @@ describe('Admin Edit Modals', () => {
 
   it('Edit Community modal should pass accessibility tests', () => {
     // Pin the sidebar open
+    cy.get('[data-test="sidebar-collapse-toggle"]').trigger('mouseover');
     cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
-    cy.get('#admin-menu-section-edit-title').click();
+    cy.get('[data-test="admin-menu-section-edit-title"]').should('be.visible');
+    cy.get('[data-test="admin-menu-section-edit-title"]').click();
 
     cy.get('a[data-test="menu.section.edit_community"]').click();
 
@@ -22,10 +24,12 @@ describe('Admin Edit Modals', () => {
 
   it('Edit Collection modal should pass accessibility tests', () => {
     // Pin the sidebar open
+    cy.get('[data-test="sidebar-collapse-toggle"]').trigger('mouseover');
     cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
-    cy.get('#admin-menu-section-edit-title').click();
+    cy.get('[data-test="admin-menu-section-edit-title"]').should('be.visible');
+    cy.get('[data-test="admin-menu-section-edit-title"]').click();
 
     cy.get('a[data-test="menu.section.edit_collection"]').click();
 
@@ -35,10 +39,12 @@ describe('Admin Edit Modals', () => {
 
   it('Edit Item modal should pass accessibility tests', () => {
     // Pin the sidebar open
+    cy.get('[data-test="sidebar-collapse-toggle"]').trigger('mouseover');
     cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
-    cy.get('#admin-menu-section-edit-title').click();
+    cy.get('[data-test="admin-menu-section-edit-title"]').should('be.visible');
+    cy.get('[data-test="admin-menu-section-edit-title"]').click();
 
     cy.get('a[data-test="menu.section.edit_item"]').click();
 

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

@@ -9,10 +9,12 @@ describe('Admin Export Modals', () => {
 
   it('Export metadata modal should pass accessibility tests', () => {
     // Pin the sidebar open
+    cy.get('[data-test="sidebar-collapse-toggle"]').trigger('mouseover');
     cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
-    cy.get('#admin-menu-section-export-title').click();
+    cy.get('[data-test="admin-menu-section-export-title"]').should('be.visible');
+    cy.get('[data-test="admin-menu-section-export-title"]').click();
 
     cy.get('a[data-test="menu.section.export_metadata"]').click();
 
@@ -22,10 +24,12 @@ describe('Admin Export Modals', () => {
 
   it('Export batch modal should pass accessibility tests', () => {
     // Pin the sidebar open
+    cy.get('[data-test="sidebar-collapse-toggle"]').trigger('mouseover');
     cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
-    cy.get('#admin-menu-section-export-title').click();
+    cy.get('[data-test="admin-menu-section-export-title"]').should('be.visible');
+    cy.get('[data-test="admin-menu-section-export-title"]').click();
 
     cy.get('a[data-test="menu.section.export_batch"]').click();
 

cypress/e2e/admin-sidebar.cy.ts

@@ -1,5 +1,4 @@
 import { testA11y } from 'cypress/support/utils';
-import { Options } from 'cypress-axe';
 
 describe('Admin Sidebar', () => {
   beforeEach(() => {
@@ -16,13 +15,6 @@ describe('Admin Sidebar', () => {
     cy.get('ds-expandable-admin-sidebar-section').click({ multiple: true });
 
     // Analyze <ds-admin-sidebar> for accessibility
-    testA11y('ds-admin-sidebar',
-        {
-          rules: {
-            // Currently all expandable sections have nested interactive elements
-            // See https://github.com/DSpace/dspace-angular/issues/2178
-            'nested-interactive': { enabled: false },
-          },
-        } as Options);
+    testA11y('ds-admin-sidebar');
   });
 });

cypress/e2e/community-list.cy.ts

@@ -12,6 +12,13 @@ describe('Community List Page', () => {
     cy.get('[data-test="expand-button"]').click({ multiple: true });
 
     // Analyze <ds-community-list-page> for accessibility issues
-    testA11y('ds-community-list-page');
+    testA11y('ds-community-list-page', {
+      rules: {
+        // When expanding a cdk node on the community-list page, the 'aria-posinset' property becomes 0.
+        // 0 is not a valid value for 'aria-posinset' so the test fails.
+        // see https://github.com/DSpace/dspace-angular/issues/4068
+        'aria-valid-attr-value': { enabled: false },
+      },
+    });
   });
 });

cypress/e2e/header.cy.ts

@@ -15,24 +15,24 @@ describe('Header', () => {
     cy.visit('/');
 
     // Click the language switcher (globe) in header
-    cy.get('a[data-test="lang-switch"]').click();
+    cy.get('button[data-test="lang-switch"]').click();
     // Click on the "Deusch" language in dropdown
-    cy.get('#language-menu-list li').contains('Deutsch').click();
+    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('a[data-test="login-menu"]').contains('Anmelden');
+    cy.get('[data-test="login-menu"]').contains('Anmelden');
 
     // Change back to English from language switcher
-    cy.get('a[data-test="lang-switch"]').click();
-    cy.get('#language-menu-list li').contains('English').click();
+    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('a[data-test="login-menu"]').contains('Log In');
+    cy.get('[data-test="login-menu"]').contains('Log In');
   });
 });

cypress/e2e/health-page.cy.ts

@@ -4,13 +4,14 @@ import { Options } from 'cypress-axe';
 
 beforeEach(() => {
   // Must login as an Admin to see the page
+  cy.intercept('GET', '/server/actuator/health').as('status');
+  cy.intercept('GET', '/server/actuator/info').as('info');
   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();
@@ -36,7 +37,6 @@ describe('Health Page > Status Tab', () => {
 
 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();

cypress/e2e/homepage.cy.ts

@@ -26,6 +26,12 @@ describe('Homepage', () => {
     // Wait for homepage tag to appear
     cy.get('ds-home-page').should('be.visible');
 
+    // Wait for at least one loading component to show up
+    cy.get('ds-loading').should('exist');
+
+    // Wait until all loading components have disappeared
+    cy.get('ds-loading').should('not.exist');
+
     // Analyze <ds-home-page> for accessibility issues
     testA11y('ds-home-page');
   });

cypress/e2e/item-edit.cy.ts

@@ -13,9 +13,11 @@ 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 active
+    // 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
@@ -34,9 +36,11 @@ 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 active
+    // 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
@@ -50,9 +54,11 @@ 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 active
+    // 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
@@ -77,9 +83,11 @@ 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 active
+    // 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
@@ -93,9 +101,11 @@ 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 active
+    // 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
@@ -109,9 +119,11 @@ 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 active
+    // 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
@@ -125,9 +137,11 @@ 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 active
+    // 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
@@ -141,9 +155,11 @@ 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 active
+    // 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

cypress/e2e/item-statistics.cy.ts

@@ -7,7 +7,7 @@ describe('Item Statistics Page', () => {
   it('should load if you click on "Statistics" from an Item/Entity page', () => {
     cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')));
     cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
-    cy.location('pathname').should('eq', ITEMSTATISTICSPAGE);
+    cy.location('pathname').should('eq', '/statistics/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')));
   });
 
   it('should contain element ds-item-statistics-page when navigating to an item statistics page', () => {

cypress/e2e/my-dspace.cy.ts

@@ -84,7 +84,7 @@ describe('My DSpace page', () => {
       cy.url().should('include', '/mydspace');
 
       // Close any open notifications, to make sure they don't get in the way of next steps
-      cy.get('[data-dismiss="alert"]').click({ multiple: true });
+      cy.get('[data-bs-dismiss="alert"]').click({ multiple: true });
 
       // This is the GET command that will actually run the search
       cy.intercept('GET', '/server/api/discover/search/objects*').as('search-results');

cypress/e2e/submission.cy.ts

@@ -95,7 +95,7 @@ describe('New Submission page', () => {
       // A success alert should be visible
       cy.get('ds-notification div.alert-success').should('be.visible');
       // Now, dismiss any open alert boxes (may be multiple, as tests run quickly)
-      cy.get('[data-dismiss="alert"]').click({ multiple: true });
+      cy.get('[data-bs-dismiss="alert"]').click({ multiple: true });
 
       // This is the GET command that will actually run the search
       cy.intercept('GET', '/server/api/discover/search/objects*').as('search-results');
@@ -217,7 +217,7 @@ describe('New Submission page', () => {
     });
 
     // Close popup window
-    cy.get('ds-dynamic-lookup-relation-modal button.close').click();
+    cy.get('ds-dynamic-lookup-relation-modal button.btn-close').click();
 
     // Back on the form, click the discard button to remove new submission
     // Clicking it will display a confirmation, which we will confirm with another click

cypress/plugins/index.ts

@@ -1,4 +1,4 @@
-const fs = require('fs');
+const fs = require('node:fs');
 
 // These two global variables are used to store information about the REST API used
 // by these e2e tests. They are filled out prior to running any tests in the before()

cypress/support/e2e.ts

@@ -56,7 +56,7 @@ before(() => {
 beforeEach(() => {
   // Pre-agree to all Orejime cookies by setting the orejime-anonymous cookie
   // This just ensures it doesn't get in the way of matching other objects in the page.
-  cy.setCookie('orejime-anonymous', '{"authentication":true,"preferences":true,"acknowledgement":true,"google-analytics":true}');
+  cy.setCookie('orejime-anonymous', '{"authentication":true,"preferences":true,"acknowledgement":true,"google-analytics":true,"correlation-id":true,"accessibility":true}');
 
   // Remove any CSRF cookies saved from prior tests
   cy.clearCookie(DSPACE_XSRF_COOKIE);

cypress/tsconfig.json

@@ -1,10 +1,16 @@
 {
   "extends": "../tsconfig.json",
   "include": [
-    "**/*.ts"
+    "**/*.ts",
+    "../cypress.config.ts"
   ],
   "compilerOptions": {
     "sourceMap": false,
+    "typeRoots": [
+      "../node_modules",
+      "../node_modules/@types",
+      "../src/typings.d.ts"
+    ],
     "types": [
       "cypress",
       "cypress-axe",

docker/cli.yml

@@ -21,7 +21,7 @@ networks:
     external: true
 services:
   dspace-cli:
-    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-latest}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-dspace-9_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,7 +14,7 @@
 # # Therefore, it should be kept in sync with that file
 services:
   dspacedb:
-    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-latest}-loadsql"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-postgres-loadsql:${DSPACE_VER:-dspace-9_x}"
     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

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_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-latest-test}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-dspace-9_x-test}"
     depends_on:
     - dspacedb
     networks:
@@ -60,13 +60,15 @@ 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_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-latest}-loadsql"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-postgres-loadsql:${DSPACE_VER:-dspace-9_x}"
     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
       LOADSQL: https://github.com/DSpace-Labs/AIP-Files/releases/download/demo-entities-data/dspace7-entities-data.sql
       PGDATA: /pgdata
+      POSTGRES_DB: dspace
+      POSTGRES_USER: dspace
       POSTGRES_PASSWORD: dspace
     networks:
       - dspacenet
@@ -81,7 +83,7 @@ services:
   # DSpace Solr container
   dspacesolr:
     container_name: dspacesolr
-    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-dspace-9_x}"
     networks:
       - dspacenet
     ports:
@@ -93,7 +95,10 @@ services:
     volumes:
     # Keep Solr data directory between reboots
     - solr_data:/var/solr/data
-    # Initialize all DSpace Solr cores using the mounted configsets (see above), then start Solr
+    # NOTE: We are not running Solr as "root", but we need root permissions to copy our cores to the mounted
+    # /var/solr/data directory. Then we start Solr as the "solr" user.
+    user: root
+    # Initialize all DSpace Solr cores, then start Solr
     entrypoint:
     - /bin/bash
     - '-c'
@@ -111,7 +116,8 @@ services:
       cp -r /opt/solr/server/solr/configsets/qaevent/* qaevent
       precreate-core suggestion /opt/solr/server/solr/configsets/suggestion
       cp -r /opt/solr/server/solr/configsets/suggestion/* suggestion
-      exec solr -f
+      chown -R solr:solr /var/solr
+      runuser -u solr -- solr-foreground
 volumes:
   assetstore:
   pgdata:

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: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-angular:${DSPACE_VER:-latest}-dist"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-angular:${DSPACE_VER:-dspace-9_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_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-latest-test}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-dspace-9_x-test}"
     depends_on:
     - dspacedb
     networks:
@@ -67,10 +67,12 @@ services:
   # DSpace database container    
   dspacedb:
     container_name: dspacedb
-    # Uses a custom Postgres image with pgcrypto installed
-    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-latest}"
+    # Uses the base PostgreSQL image
+    image: "docker.io/postgres:${POSTGRES_VERSION:-15}"
     environment:
       PGDATA: /pgdata
+      POSTGRES_DB: dspace
+      POSTGRES_USER: dspace
       POSTGRES_PASSWORD: dspace
     networks:
       - dspacenet
@@ -85,7 +87,7 @@ services:
   # DSpace Solr container  
   dspacesolr:
     container_name: dspacesolr
-    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-dspace-9_x}"
     networks:
       - dspacenet
     ports:
@@ -97,11 +99,16 @@ services:
     volumes:
     # Keep Solr data directory between reboots
     - solr_data:/var/solr/data
+    # NOTE: We are not running Solr as "root", but we need root permissions to copy our cores to the mounted
+    # /var/solr/data directory. Then we start Solr as the "solr" user.
+    user: root
     # Initialize all DSpace Solr cores using the mounted local configsets (see above), then start Solr
     # * 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`
+    # * Third, ensure all new folders are owned by "solr" user
+    # * Finally, start Solr as the "solr" user via the provided solr-foreground script
     entrypoint:
     - /bin/bash
     - '-c'
@@ -119,7 +126,8 @@ services:
       cp -r /opt/solr/server/solr/configsets/qaevent/* qaevent
       precreate-core suggestion /opt/solr/server/solr/configsets/suggestion
       cp -r /opt/solr/server/solr/configsets/suggestion/* suggestion
-      exec solr -f
+      chown -R solr:solr /var/solr
+      runuser -u solr -- solr-foreground
 volumes:
   assetstore:
   pgdata:

docker/docker-compose.yml

@@ -23,7 +23,7 @@ services:
       DSPACE_REST_HOST: localhost
       DSPACE_REST_PORT: 8080
       DSPACE_REST_NAMESPACE: /server
-    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-angular:${DSPACE_VER:-latest}"
+    image: "${DOCKER_REGISTRY:-docker.io}/${DOCKER_OWNER:-dspace}/dspace-angular:${DSPACE_VER:-dspace-9_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,90 @@
+[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>
+```
+        
+    
+

docs/lint/html/rules/themed-component-usages.md

@@ -11,6 +11,8 @@ _______
 
 [Source code](../../../../lint/src/rules/html/themed-component-usages.ts)
 
+
+
 ### Examples
 
 
@@ -23,6 +25,7 @@ _______
 <ds-test-themeable></ds-test-themeable>
 <ds-test-themeable [test]="something"></ds-test-themeable>
 ```
+        
     
 ##### use no-prefix selectors in TypeScript templates
         
@@ -33,6 +36,7 @@ _______
 class Test {
 }
 ```
+        
     
 ##### use no-prefix selectors in TypeScript test templates
         
@@ -45,6 +49,7 @@ Filename: `lint/test/fixture/src/test.spec.ts`
 class Test {
 }
 ```
+        
     
 ##### base selectors are also allowed in TypeScript test templates
         
@@ -57,6 +62,7 @@ Filename: `lint/test/fixture/src/test.spec.ts`
 class Test {
 }
 ```
+        
     
 
 
@@ -69,6 +75,9 @@ class Test {
 <ds-themed-test-themeable/>
 <ds-themed-test-themeable></ds-themed-test-themeable>
 <ds-themed-test-themeable [test]="something"></ds-themed-test-themeable>
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -91,6 +100,9 @@ Result of `yarn lint --fix`:
 <ds-base-test-themeable/>
 <ds-base-test-themeable></ds-base-test-themeable>
 <ds-base-test-themeable [test]="something"></ds-base-test-themeable>
+
+        
+
 ```
 Will produce the following error(s):
 ```

docs/lint/ts/index.md

@@ -1,6 +1,11 @@
 [DSpace ESLint plugins](../../../lint/README.md) > TypeScript rules
 _______
 
+- [`dspace-angular-ts/alias-imports`](./rules/alias-imports.md): Unclear imports should be aliased for clarity
+- [`dspace-angular-ts/sort-standalone-imports`](./rules/sort-standalone-imports.md): Sorts the standalone `@Component` imports alphabetically
 - [`dspace-angular-ts/themed-component-classes`](./rules/themed-component-classes.md): Formatting rules for themeable component classes
 - [`dspace-angular-ts/themed-component-selectors`](./rules/themed-component-selectors.md): Themeable component selectors should follow the DSpace convention
 - [`dspace-angular-ts/themed-component-usages`](./rules/themed-component-usages.md): Themeable components should be used via their `ThemedComponent` wrapper class
+- [`dspace-angular-ts/themed-decorators`](./rules/themed-decorators.md): Entry components with theme support should declare the correct theme
+- [`dspace-angular-ts/themed-wrapper-no-input-defaults`](./rules/themed-wrapper-no-input-defaults.md): ThemedComponent wrappers should not declare input defaults (see [DSpace Angular #2164](https://github.com/DSpace/dspace-angular/pull/2164))
+- [`dspace-angular-ts/unique-decorators`](./rules/unique-decorators.md): Some decorators must be called with unique arguments (e.g. when they construct a mapping based on the argument values)

docs/lint/ts/rules/alias-imports.md

@@ -0,0 +1,148 @@
+[DSpace ESLint plugins](../../../../lint/README.md) > [TypeScript rules](../index.md) > `dspace-angular-ts/alias-imports`
+_______
+
+Unclear imports should be aliased for clarity
+
+_______
+
+[Source code](../../../../lint/src/rules/ts/alias-imports.ts)
+
+
+### Options
+
+#### `aliases`
+
+A list of all the imports that you want to alias for clarity. Every alias should be declared in the following format:
+```json
+{
+  "package": "rxjs",
+  "imported": "of",
+  "local": "observableOf"
+}
+```
+
+
+### Examples
+
+
+#### Valid code
+    
+##### correctly aliased imports
+        
+```typescript
+import { of as observableOf } from 'rxjs';
+```
+        
+With options:
+
+```json
+{
+  "aliases": [
+    {
+      "package": "rxjs",
+      "imported": "of",
+      "local": "observableOf"
+    }
+  ]
+}
+```
+        
+    
+##### enforce unaliased import
+        
+```typescript
+import { combineLatest } from 'rxjs';
+```
+        
+With options:
+
+```json
+{
+  "aliases": [
+    {
+      "package": "rxjs",
+      "imported": "combineLatest",
+      "local": "combineLatest"
+    }
+  ]
+}
+```
+        
+    
+
+
+
+#### Invalid code  & automatic fixes
+    
+##### imports without alias
+        
+```typescript
+import { of } from 'rxjs';
+
+        
+
+```
+Will produce the following error(s):
+```
+This import must be aliased
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+import { of as observableOf } from 'rxjs';
+```
+        
+    
+##### imports under the wrong alias
+        
+```typescript
+import { of as ofSomething } from 'rxjs';
+
+        
+
+```
+Will produce the following error(s):
+```
+This import uses the wrong alias (should be {{ local }})
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+import { of as observableOf } from 'rxjs';
+```
+        
+    
+##### disallow aliasing import
+        
+```typescript
+import { combineLatest as observableCombineLatest } from 'rxjs';
+
+        
+With options:
+
+```json
+{
+  "aliases": [
+    {
+      "package": "rxjs",
+      "imported": "combineLatest",
+      "local": "combineLatest"
+    }
+  ]
+}
+```
+        
+
+```
+Will produce the following error(s):
+```
+This import should not use an alias
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+import { combineLatest } from 'rxjs';
+```
+        
+    
+

docs/lint/ts/rules/sort-standalone-imports.md

@@ -0,0 +1,245 @@
+[DSpace ESLint plugins](../../../../lint/README.md) > [TypeScript rules](../index.md) > `dspace-angular-ts/sort-standalone-imports`
+_______
+
+Sorts the standalone `@Component` imports alphabetically
+
+_______
+
+[Source code](../../../../lint/src/rules/ts/sort-standalone-imports.ts)
+
+
+### Options
+
+#### `locale`
+
+The locale used to sort the imports.,
+#### `maxItems`
+
+The maximum number of imports that should be displayed before each import is separated onto its own line.,
+#### `indent`
+
+The indent used for the project.,
+#### `trailingComma`
+
+Whether the last import should have a trailing comma (only applicable for multiline imports).
+
+
+### Examples
+
+
+#### Valid code
+    
+##### should sort multiple imports on separate lines
+        
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    RootComponent,
+  ],
+})
+export class AppComponent {}
+```
+        
+    
+##### should not inlines singular imports when maxItems is 0
+        
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    RootComponent,
+  ],
+})
+export class AppComponent {}
+```
+        
+    
+##### should inline singular imports when maxItems is 1
+        
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [RootComponent],
+})
+export class AppComponent {}
+```
+        
+With options:
+
+```json
+{
+  "maxItems": 1
+}
+```
+        
+    
+
+
+
+#### Invalid code  & automatic fixes
+    
+##### should sort multiple imports alphabetically
+        
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    RootComponent,
+    AsyncPipe,
+  ],
+})
+export class AppComponent {}
+
+        
+
+```
+Will produce the following error(s):
+```
+Standalone imports should be sorted alphabetically
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    RootComponent,
+  ],
+})
+export class AppComponent {}
+```
+        
+    
+##### should not put singular imports on one line when maxItems is 0
+        
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [RootComponent],
+})
+export class AppComponent {}
+
+        
+
+```
+Will produce the following error(s):
+```
+Standalone imports should be sorted alphabetically
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    RootComponent,
+  ],
+})
+export class AppComponent {}
+```
+        
+    
+##### should not put singular imports on a separate line when maxItems is 1
+        
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    RootComponent,
+  ],
+})
+export class AppComponent {}
+
+        
+With options:
+
+```json
+{
+  "maxItems": 1
+}
+```
+        
+
+```
+Will produce the following error(s):
+```
+Standalone imports should be sorted alphabetically
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [RootComponent],
+})
+export class AppComponent {}
+```
+        
+    
+##### should not display multiple imports on the same line
+        
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [AsyncPipe, RootComponent],
+})
+export class AppComponent {}
+
+        
+
+```
+Will produce the following error(s):
+```
+Standalone imports should be sorted alphabetically
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    RootComponent,
+  ],
+})
+export class AppComponent {}
+```
+        
+    
+

docs/lint/ts/rules/themed-component-classes.md

@@ -11,6 +11,8 @@ _______
 
 [Source code](../../../../lint/src/rules/ts/themed-component-classes.ts)
 
+
+
 ### Examples
 
 
@@ -26,6 +28,7 @@ _______
 class Something {
 }
 ```
+        
     
 ##### Base component
         
@@ -34,9 +37,10 @@ class Something {
   selector: 'ds-base-test-themable',
   standalone: true,
 })
-class TestThemeableTomponent {
+class TestThemeableComponent {
 }
 ```
+        
     
 ##### Wrapper component
         
@@ -50,9 +54,10 @@ Filename: `lint/test/fixture/src/app/test/themed-test-themeable.component.ts`
     TestThemeableComponent,
   ],
 })
-class ThemedTestThemeableTomponent extends ThemedComponent<TestThemeableComponent> {
+class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
 }
 ```
+        
     
 ##### Override component
         
@@ -66,6 +71,7 @@ Filename: `lint/test/fixture/src/themes/test/app/test/test-themeable.component.t
 class Override extends BaseComponent {
 }
 ```
+        
     
 
 
@@ -80,6 +86,9 @@ class Override extends BaseComponent {
 })
 class TestThemeableComponent {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -107,6 +116,9 @@ Filename: `lint/test/fixture/src/app/test/themed-test-themeable.component.ts`
 })
 class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -137,6 +149,9 @@ Filename: `lint/test/fixture/src/app/test/themed-test-themeable.component.ts`
 })
 class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -171,6 +186,9 @@ import { SomethingElse } from './somewhere-else';
 })
 class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -207,6 +225,9 @@ import { Something, SomethingElse } from './somewhere-else';
 })
 class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -237,6 +258,9 @@ Filename: `lint/test/fixture/src/themes/test/app/test/test-themeable.component.t
 })
 class Override extends BaseComponent {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```

docs/lint/ts/rules/themed-component-selectors.md

@@ -17,6 +17,8 @@ _______
 
 [Source code](../../../../lint/src/rules/ts/themed-component-selectors.ts)
 
+
+
 ### Examples
 
 
@@ -31,6 +33,7 @@ _______
 class Something {
 }
 ```
+        
     
 ##### Themeable component selector should replace the original version, unthemed version should be changed to ds-base-
         
@@ -53,6 +56,7 @@ class ThemedSomething extends ThemedComponent<Something> {
 class OverrideSomething extends Something {
 }
 ```
+        
     
 ##### Other themed component wrappers should not interfere
         
@@ -69,6 +73,7 @@ class Something {
 class ThemedSomethingElse extends ThemedComponent<SomethingElse> {
 }
 ```
+        
     
 
 
@@ -85,6 +90,9 @@ Filename: `lint/test/fixture/src/app/test/test-themeable.component.ts`
 })
 class TestThemeableComponent {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -111,6 +119,9 @@ Filename: `lint/test/fixture/src/app/test/themed-test-themeable.component.ts`
 })
 class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -137,6 +148,9 @@ Filename: `lint/test/fixture/src/themes/test/app/test/test-themeable.component.t
 })
 class TestThememeableComponent extends BaseComponent {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```

docs/lint/ts/rules/themed-component-usages.md

@@ -15,6 +15,8 @@ _______
 
 [Source code](../../../../lint/src/rules/ts/themed-component-usages.ts)
 
+
+
 ### Examples
 
 
@@ -30,6 +32,7 @@ const config = {
   b: ChipsComponent,
 }
 ```
+        
     
 ##### allow base class in class declaration
         
@@ -37,6 +40,7 @@ const config = {
 export class TestThemeableComponent {
 }
 ```
+        
     
 ##### allow inheriting from base class
         
@@ -46,6 +50,7 @@ import { TestThemeableComponent } from './app/test/test-themeable.component';
 export class ThemedAdminSidebarComponent extends ThemedComponent<TestThemeableComponent> {
 }
 ```
+        
     
 ##### allow base class in ViewChild
         
@@ -56,6 +61,7 @@ export class Something {
   @ViewChild(TestThemeableComponent) test: TestThemeableComponent;
 }
 ```
+        
     
 ##### allow wrapper selectors in test queries
         
@@ -65,6 +71,7 @@ Filename: `lint/test/fixture/src/app/test/test.component.spec.ts`
 By.css('ds-themeable');
 By.css('#test > ds-themeable > #nest');
 ```
+        
     
 ##### allow wrapper selectors in cypress queries
         
@@ -74,6 +81,7 @@ Filename: `lint/test/fixture/src/app/test/test.component.cy.ts`
 By.css('ds-themeable');
 By.css('#test > ds-themeable > #nest');
 ```
+        
     
 
 
@@ -90,6 +98,9 @@ const config = {
   a: TestThemeableComponent,
   b: TestComponent,
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -120,6 +131,9 @@ const config = {
   b: TestComponent,
   c: Something,
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -150,6 +164,9 @@ const DECLARATIONS = [
   Something,
   ThemedTestThemeableComponent,
 ];
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -173,6 +190,9 @@ Filename: `lint/test/fixture/src/app/test/test.component.spec.ts`
 ```typescript
 By.css('ds-themed-themeable');
 By.css('#test > ds-themed-themeable > #nest');
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -194,6 +214,9 @@ Filename: `lint/test/fixture/src/app/test/test.component.spec.ts`
 ```typescript
 By.css('ds-base-themeable');
 By.css('#test > ds-base-themeable > #nest');
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -215,6 +238,9 @@ Filename: `lint/test/fixture/src/app/test/test.component.cy.ts`
 ```typescript
 cy.get('ds-themed-themeable');
 cy.get('#test > ds-themed-themeable > #nest');
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -236,6 +262,9 @@ Filename: `lint/test/fixture/src/app/test/test.component.cy.ts`
 ```typescript
 cy.get('ds-base-themeable');
 cy.get('#test > ds-base-themeable > #nest');
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -266,6 +295,9 @@ import { TestThemeableComponent } from '../../../../app/test/test-themeable.comp
 })
 export class UsageComponent {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```
@@ -306,6 +338,9 @@ import { ThemedTestThemeableComponent } from '../../../../app/test/themed-test-t
 })
 export class UsageComponent {
 }
+
+        
+
 ```
 Will produce the following error(s):
 ```

docs/lint/ts/rules/themed-decorators.md

@@ -0,0 +1,183 @@
+[DSpace ESLint plugins](../../../../lint/README.md) > [TypeScript rules](../index.md) > `dspace-angular-ts/themed-decorators`
+_______
+
+Entry components with theme support should declare the correct theme
+
+_______
+
+[Source code](../../../../lint/src/rules/ts/themed-decorators.ts)
+
+
+### Options
+
+#### `decorators`
+
+A mapping for all the existing themeable decorators, with the decorator name as the key and the index of the `theme` argument as the value.
+
+
+### Examples
+
+
+#### Valid code
+    
+##### theme file declares the correct theme in @listableObjectComponent
+        
+Filename: `lint/test/fixture/src/themes/test/app/dynamic-component/dynamic-component.ts`
+        
+```typescript
+@listableObjectComponent(something, somethingElse, undefined, 'test')
+export class Something extends SomethingElse {
+}
+```
+        
+    
+##### plain file declares no theme in @listableObjectComponent
+        
+Filename: `lint/test/fixture/src/app/dynamic-component/dynamic-component.ts`
+        
+```typescript
+@listableObjectComponent(something, somethingElse, undefined)
+export class Something extends SomethingElse {
+}
+```
+        
+    
+##### plain file declares explicit undefined theme in @listableObjectComponent
+        
+Filename: `lint/test/fixture/src/app/dynamic-component/dynamic-component.ts`
+        
+```typescript
+@listableObjectComponent(something, somethingElse, undefined, undefined)
+export class Something extends SomethingElse {
+}
+```
+        
+    
+##### test file declares theme outside of theme directory
+        
+Filename: `lint/test/fixture/src/app/dynamic-component/dynamic-component.spec.ts`
+        
+```typescript
+@listableObjectComponent(something, somethingElse, undefined, 'test')
+export class Something extends SomethingElse {
+}
+```
+        
+    
+##### only track configured decorators
+        
+Filename: `lint/test/fixture/src/app/dynamic-component/dynamic-component.ts`
+        
+```typescript
+@something('test')
+export class Something extends SomethingElse {
+}
+```
+        
+    
+
+
+
+#### Invalid code  & automatic fixes
+    
+##### theme file declares the wrong theme in @listableObjectComponent
+        
+Filename: `lint/test/fixture/src/themes/test/app/dynamic-component/dynamic-component.ts`
+        
+```typescript
+@listableObjectComponent(something, somethingElse, undefined, 'test-2')
+export class Something extends SomethingElse {
+}
+
+        
+
+```
+Will produce the following error(s):
+```
+Wrong theme declaration in decorator
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+@listableObjectComponent(something, somethingElse, undefined, 'test')
+export class Something extends SomethingElse {
+}
+```
+        
+    
+##### plain file declares a theme in @listableObjectComponent
+        
+Filename: `lint/test/fixture/src/app/dynamic-component/dynamic-component.ts`
+        
+```typescript
+@listableObjectComponent(something, somethingElse, undefined, 'test-2')
+export class Something extends SomethingElse {
+}
+
+        
+
+```
+Will produce the following error(s):
+```
+There is a theme declaration in decorator, but this file is not part of a theme
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+@listableObjectComponent(something, somethingElse, undefined)
+export class Something extends SomethingElse {
+}
+```
+        
+    
+##### theme file declares no theme in @listableObjectComponent
+        
+Filename: `lint/test/fixture/src/themes/test-2/app/dynamic-component/dynamic-component.ts`
+        
+```typescript
+@listableObjectComponent(something, somethingElse, undefined)
+export class Something extends SomethingElse {
+}
+
+        
+
+```
+Will produce the following error(s):
+```
+No theme declaration in decorator
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+@listableObjectComponent(something, somethingElse, undefined, 'test-2')
+export class Something extends SomethingElse {
+}
+```
+        
+    
+##### theme file declares explicit undefined theme in @listableObjectComponent
+        
+Filename: `lint/test/fixture/src/themes/test-2/app/dynamic-component/dynamic-component.ts`
+        
+```typescript
+@listableObjectComponent(something, somethingElse, undefined, undefined)
+export class Something extends SomethingElse {
+}
+
+        
+
+```
+Will produce the following error(s):
+```
+No theme declaration in decorator
+```
+        
+Result of `yarn lint --fix`:
+```typescript
+@listableObjectComponent(something, somethingElse, undefined, 'test-2')
+export class Something extends SomethingElse {
+}
+```
+        
+    
+

docs/lint/ts/rules/themed-wrapper-no-input-defaults.md

@@ -0,0 +1,92 @@
+[DSpace ESLint plugins](../../../../lint/README.md) > [TypeScript rules](../index.md) > `dspace-angular-ts/themed-wrapper-no-input-defaults`
+_______
+
+ThemedComponent wrappers should not declare input defaults (see [DSpace Angular #2164](https://github.com/DSpace/dspace-angular/pull/2164))
+
+_______
+
+[Source code](../../../../lint/src/rules/ts/themed-wrapper-no-input-defaults.ts)
+
+
+
+### Examples
+
+
+#### Valid code
+    
+##### ThemedComponent wrapper defines an input without a default value
+        
+```typescript
+export class TTest extends ThemedComponent<Test> {
+
+@Input()
+test;
+}
+```
+        
+    
+##### Regular class defines an input with a default value
+        
+```typescript
+export class Test {
+
+@Input()
+test = 'test';
+}
+```
+        
+    
+
+
+
+#### Invalid code 
+    
+##### ThemedComponent wrapper defines an input with a default value
+        
+```typescript
+export class TTest extends ThemedComponent<Test> {
+
+@Input()
+test1 = 'test';
+
+@Input()
+test2 = true;
+
+@Input()
+test2: number = 123;
+
+@Input()
+test3: number[] = [1,2,3];
+}
+
+        
+
+```
+Will produce the following error(s):
+```
+ThemedComponent wrapper declares inputs with defaults
+ThemedComponent wrapper declares inputs with defaults
+ThemedComponent wrapper declares inputs with defaults
+ThemedComponent wrapper declares inputs with defaults
+```
+        
+    
+##### ThemedComponent wrapper defines an input with an undefined default value
+        
+```typescript
+export class TTest extends ThemedComponent<Test> {
+
+@Input()
+test = undefined;
+}
+
+        
+
+```
+Will produce the following error(s):
+```
+ThemedComponent wrapper declares inputs with defaults
+```
+        
+    
+

docs/lint/ts/rules/unique-decorators.md

@@ -0,0 +1,86 @@
+[DSpace ESLint plugins](../../../../lint/README.md) > [TypeScript rules](../index.md) > `dspace-angular-ts/unique-decorators`
+_______
+
+Some decorators must be called with unique arguments (e.g. when they construct a mapping based on the argument values)
+
+_______
+
+[Source code](../../../../lint/src/rules/ts/unique-decorators.ts)
+
+
+### Options
+
+#### `decorators`
+
+The list of all the decorators for which you want to enforce this behavior.
+
+
+### Examples
+
+
+#### Valid code
+    
+##### checked decorator, no repetitions
+        
+```typescript
+@listableObjectComponent(a)
+export class A {
+}
+
+@listableObjectComponent(a, 'b')
+export class B {
+}
+
+@listableObjectComponent(a, 'b', 3)
+export class C {
+}
+
+@listableObjectComponent(a, 'b', 3, Enum.TEST1)
+export class C {
+}
+
+@listableObjectComponent(a, 'b', 3, Enum.TEST2)
+export class C {
+}
+```
+        
+    
+##### unchecked decorator, some repetitions
+        
+```typescript
+@something(a)
+export class A {
+}
+
+@something(a)
+export class B {
+}
+```
+        
+    
+
+
+
+#### Invalid code 
+    
+##### checked decorator, some repetitions
+        
+```typescript
+@listableObjectComponent(a)
+export class A {
+}
+
+@listableObjectComponent(a)
+export class B {
+}
+
+        
+
+```
+Will produce the following error(s):
+```
+Duplicate decorator call
+```
+        
+    
+

lint/generate-docs.ts

@@ -12,8 +12,8 @@ import {
   readFileSync,
   rmSync,
   writeFileSync,
-} from 'fs';
-import { join } from 'path';
+} from 'node:fs';
+import { join } from 'node:path';
 
 import { default as htmlPlugin } from './src/rules/html';
 import { default as tsPlugin } from './src/rules/ts';

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,148 @@
+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.',
+    },
+  },
+  optionDocs: [],
+  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

@@ -45,6 +45,7 @@ The only exception to this rule are unit tests, where we may want to use the bas
       [Message.WRONG_SELECTOR]: 'Themeable components should be used via their ThemedComponent wrapper\'s selector',
     },
   },
+  optionDocs: [],
   defaultOptions: [],
 } as DSpaceESLintRuleInfo;
 

lint/src/rules/ts/alias-imports.ts

@@ -0,0 +1,304 @@
+import {
+  AST_NODE_TYPES,
+  ESLintUtils,
+  TSESLint,
+  TSESTree,
+} from '@typescript-eslint/utils';
+import { Scope } from '@typescript-eslint/utils/ts-eslint';
+
+import {
+  DSpaceESLintRuleInfo,
+  NamedTests,
+  OptionDoc,
+} from '../../util/structure';
+
+export enum Message {
+  MISSING_ALIAS = 'missingAlias',
+  WRONG_ALIAS = 'wrongAlias',
+  MULTIPLE_ALIASES = 'multipleAliases',
+  UNNECESSARY_ALIAS = 'unnecessaryAlias',
+}
+
+interface AliasImportOptions {
+  aliases: AliasImportOption[];
+}
+
+interface AliasImportOption {
+  package: string;
+  imported: string;
+  local: string;
+}
+
+interface AliasImportDocOptions {
+  aliases: OptionDoc;
+}
+
+export const info: DSpaceESLintRuleInfo<[AliasImportOptions], [AliasImportDocOptions]> = {
+  name: 'alias-imports',
+  meta: {
+    docs: {
+      description: 'Unclear imports should be aliased for clarity',
+    },
+    messages: {
+      [Message.MISSING_ALIAS]: 'This import must be aliased',
+      [Message.WRONG_ALIAS]: 'This import uses the wrong alias (should be {{ local }})',
+      [Message.MULTIPLE_ALIASES]: 'This import was used twice with a different alias (should be {{ local }})',
+      [Message.UNNECESSARY_ALIAS]: 'This import should not use an alias',
+    },
+    fixable: 'code',
+    type: 'problem',
+    schema: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          package: { type: 'string' },
+          imported: { type: 'string' },
+          local: { type: 'string' },
+        },
+      },
+    },
+  },
+  optionDocs: [
+    {
+      aliases:  {
+        title: '`aliases`',
+        description: `A list of all the imports that you want to alias for clarity. Every alias should be declared in the following format:
+\`\`\`json
+{
+  "package": "rxjs",
+  "imported": "of",
+  "local": "observableOf"
+}
+\`\`\``,
+      },
+    },
+  ],
+  defaultOptions: [
+    {
+      aliases: [
+        {
+          package: 'rxjs',
+          imported: 'of',
+          local: 'observableOf',
+        },
+      ],
+    },
+  ],
+};
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  ...info,
+  create(context: TSESLint.RuleContext<Message, unknown[]>, options: any) {
+    return (options[0] as AliasImportOptions).aliases.reduce((selectors: any, option: AliasImportOption) => {
+      selectors[`ImportDeclaration[source.value = "${option.package}"] > ImportSpecifier[imported.name = "${option.imported}"][local.name != "${option.local}"]`] = (node: TSESTree.ImportSpecifier) => handleUnaliasedImport(context, option, node);
+      return selectors;
+    }, {});
+  },
+});
+
+export const tests: NamedTests = {
+  plugin: info.name,
+  valid: [
+    {
+      name: 'correctly aliased imports',
+      code: `
+import { of as observableOf } from 'rxjs';
+        `,
+      options: [
+        {
+          aliases: [
+            {
+              package: 'rxjs',
+              imported: 'of',
+              local: 'observableOf',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'enforce unaliased import',
+      code: `
+import { combineLatest } from 'rxjs';
+        `,
+      options: [
+        {
+          aliases: [
+            {
+              package: 'rxjs',
+              imported: 'combineLatest',
+              local: 'combineLatest',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  invalid: [
+    {
+      name: 'imports without alias',
+      code: `
+import { of } from 'rxjs';
+        `,
+      errors: [
+        {
+          messageId: 'missingAlias',
+        },
+      ],
+      output: `
+import { of as observableOf } from 'rxjs';
+        `,
+    },
+    {
+      name: 'imports under the wrong alias',
+      code: `
+import { of as ofSomething } from 'rxjs';
+        `,
+      errors: [
+        {
+          messageId: 'wrongAlias',
+        },
+      ],
+      output: `
+import { of as observableOf } from 'rxjs';
+        `,
+    },
+    {
+      name: 'disallow aliasing import',
+      code: `
+import { combineLatest as observableCombineLatest } from 'rxjs';
+        `,
+      errors: [
+        {
+          messageId: 'unnecessaryAlias',
+        },
+      ],
+      output: `
+import { combineLatest } from 'rxjs';
+        `,
+      options: [
+        {
+          aliases: [
+            {
+              package: 'rxjs',
+              imported: 'combineLatest',
+              local: 'combineLatest',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+/**
+ * Replaces the incorrectly aliased imports with the ones defined in the defaultOptions
+ *
+ * @param context The current {@link TSESLint.RuleContext}
+ * @param option The current {@link AliasImportOption} that needs to be handled
+ * @param node The incorrect import node that should be fixed
+ */
+function handleUnaliasedImport(context: TSESLint.RuleContext<Message, unknown[]>, option: AliasImportOption, node: TSESTree.ImportSpecifier): void {
+  const hasCorrectAliasedImport: boolean = (node.parent as TSESTree.ImportDeclaration).specifiers.find((specifier: TSESTree.ImportClause) => specifier.local.name === option.local && specifier.type === AST_NODE_TYPES.ImportSpecifier && (specifier as TSESTree.ImportSpecifier).imported.name === option.imported) !== undefined;
+  if (option.imported === option.local) {
+    if (hasCorrectAliasedImport) {
+      context.report({
+        messageId: Message.MULTIPLE_ALIASES,
+        data: { local: option.local },
+        node: node,
+        fix(fixer: TSESLint.RuleFixer) {
+          const fixes: TSESLint.RuleFix[] = [];
+
+          const commaAfter = context.sourceCode.getTokenAfter(node, {
+            filter: (token: TSESTree.Token) => token.value === ',',
+          });
+          if (commaAfter) {
+            fixes.push(fixer.removeRange([node.range[0], commaAfter.range[1]]));
+          } else {
+            fixes.push(fixer.remove(node));
+          }
+          fixes.push(...retrieveUsageReplacementFixes(context, fixer, node, option.local));
+
+          return fixes;
+        },
+      });
+    } else {
+      context.report({
+        messageId: Message.UNNECESSARY_ALIAS,
+        data: { local: option.local },
+        node: node,
+        fix(fixer: TSESLint.RuleFixer) {
+          const fixes: TSESLint.RuleFix[] = [];
+
+          fixes.push(fixer.replaceText(node, option.imported));
+          fixes.push(...retrieveUsageReplacementFixes(context, fixer, node, option.local));
+
+          return fixes;
+        },
+      });
+    }
+  } else {
+    if (hasCorrectAliasedImport) {
+      context.report({
+        messageId: Message.MULTIPLE_ALIASES,
+        data: { local: option.local },
+        node: node,
+        fix(fixer: TSESLint.RuleFixer) {
+          const fixes: TSESLint.RuleFix[] = [];
+
+          const commaAfter = context.sourceCode.getTokenAfter(node, {
+            filter: (token: TSESTree.Token) => token.value === ',',
+          });
+          if (commaAfter) {
+            fixes.push(fixer.removeRange([node.range[0], commaAfter.range[1]]));
+          } else {
+            fixes.push(fixer.remove(node));
+          }
+          fixes.push(...retrieveUsageReplacementFixes(context, fixer, node, option.local));
+
+          return fixes;
+        },
+      });
+    } else if (node.local.name === node.imported.name) {
+      context.report({
+        messageId: Message.MISSING_ALIAS,
+        node: node,
+        fix(fixer: TSESLint.RuleFixer) {
+          const fixes: TSESLint.RuleFix[] = [];
+
+          fixes.push(fixer.replaceText(node.local, `${option.imported} as ${option.local}`));
+          fixes.push(...retrieveUsageReplacementFixes(context, fixer, node, option.local));
+
+          return fixes;
+        },
+      });
+    } else {
+      context.report({
+        messageId: Message.WRONG_ALIAS,
+        data: { local: option.local },
+        node: node,
+        fix(fixer: TSESLint.RuleFixer) {
+          const fixes: TSESLint.RuleFix[] = [];
+
+          fixes.push(fixer.replaceText(node.local, option.local));
+          fixes.push(...retrieveUsageReplacementFixes(context, fixer, node, option.local));
+
+          return fixes;
+        },
+      });
+    }
+  }
+}
+
+/**
+ * Generates the {@link TSESLint.RuleFix}s for all the usages of the incorrect import.
+ *
+ * @param context The current {@link TSESLint.RuleContext}
+ * @param fixer The instance {@link TSESLint.RuleFixer}
+ * @param node The node which needs to be replaced
+ * @param newAlias The new import name
+ */
+function retrieveUsageReplacementFixes(context: TSESLint.RuleContext<Message, unknown[]>, fixer: TSESLint.RuleFixer, node: TSESTree.ImportSpecifier, newAlias: string): TSESLint.RuleFix[] {
+  return context.sourceCode.getDeclaredVariables(node)[0].references.map((reference: Scope.Reference) => fixer.replaceText(reference.identifier, newAlias));
+}

lint/src/rules/ts/index.ts

@@ -10,14 +10,24 @@ import {
   RuleExports,
 } from '../../util/structure';
 /* eslint-disable import/no-namespace */
+import * as aliasImports from './alias-imports';
+import * as sortStandaloneImports from './sort-standalone-imports';
 import * as themedComponentClasses from './themed-component-classes';
 import * as themedComponentSelectors from './themed-component-selectors';
 import * as themedComponentUsages from './themed-component-usages';
+import * as themedDecorators from './themed-decorators';
+import * as themedWrapperNoInputDefaults from './themed-wrapper-no-input-defaults';
+import * as uniqueDecorators from './unique-decorators';
 
 const index = [
+  aliasImports,
+  sortStandaloneImports,
   themedComponentClasses,
   themedComponentSelectors,
   themedComponentUsages,
+  themedDecorators,
+  themedWrapperNoInputDefaults,
+  uniqueDecorators,
 ] as unknown as RuleExports[];
 
 export = {

lint/src/rules/ts/sort-standalone-imports.ts

@@ -0,0 +1,306 @@
+import {
+  ASTUtils as TSESLintASTUtils,
+  ESLintUtils,
+  TSESLint,
+  TSESTree,
+} from '@typescript-eslint/utils';
+
+import {
+  DSpaceESLintRuleInfo,
+  NamedTests,
+  OptionDoc,
+} from '../../util/structure';
+
+const DEFAULT_LOCALE = 'en-US';
+const DEFAULT_MAX_SIZE = 0;
+const DEFAULT_SPACE_INDENT_AMOUNT = 2;
+const DEFAULT_TRAILING_COMMA = true;
+
+export enum Message {
+  SORT_STANDALONE_IMPORTS_ARRAYS = 'sortStandaloneImportsArrays',
+}
+
+export interface UniqueDecoratorsOptions {
+  locale: string;
+  maxItems: number;
+  indent: number;
+  trailingComma: boolean;
+}
+
+export interface UniqueDecoratorsDocOptions {
+  locale: OptionDoc;
+  maxItems: OptionDoc;
+  indent: OptionDoc;
+  trailingComma: OptionDoc;
+}
+
+export const info: DSpaceESLintRuleInfo<[UniqueDecoratorsOptions], [UniqueDecoratorsDocOptions]> = {
+  name: 'sort-standalone-imports',
+  meta: {
+    docs: {
+      description: 'Sorts the standalone `@Component` imports alphabetically',
+    },
+    messages: {
+      [Message.SORT_STANDALONE_IMPORTS_ARRAYS]: 'Standalone imports should be sorted alphabetically',
+    },
+    fixable: 'code',
+    type: 'problem',
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          locale: {
+            type: 'string',
+          },
+          maxItems: {
+            type: 'number',
+          },
+          indent: {
+            type: 'number',
+          },
+          trailingComma: {
+            type: 'boolean',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  optionDocs: [
+    {
+      locale: {
+        title: '`locale`',
+        description: 'The locale used to sort the imports.',
+      },
+      maxItems: {
+        title: '`maxItems`',
+        description: 'The maximum number of imports that should be displayed before each import is separated onto its own line.',
+      },
+      indent: {
+        title: '`indent`',
+        description: 'The indent used for the project.',
+      },
+      trailingComma: {
+        title: '`trailingComma`',
+        description: 'Whether the last import should have a trailing comma (only applicable for multiline imports).',
+      },
+    },
+  ],
+  defaultOptions: [
+    {
+      locale: DEFAULT_LOCALE,
+      maxItems: DEFAULT_MAX_SIZE,
+      indent: DEFAULT_SPACE_INDENT_AMOUNT,
+      trailingComma: DEFAULT_TRAILING_COMMA,
+    },
+  ],
+};
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  ...info,
+  create(context: TSESLint.RuleContext<Message, unknown[]>, [{ locale, maxItems, indent, trailingComma }]: any) {
+    return {
+      ['ClassDeclaration > Decorator > CallExpression[callee.name="Component"] > ObjectExpression > Property[key.name="imports"] > ArrayExpression']: (node: TSESTree.ArrayExpression) => {
+        const elements = node.elements.filter((element) => element !== null && (TSESLintASTUtils.isIdentifier(element) || element?.type === TSESTree.AST_NODE_TYPES.CallExpression));
+        const sortedNames: string[] = elements
+          .map((element) => context.sourceCode.getText(element!))
+          .sort((a: string, b: string) => a.localeCompare(b, locale));
+
+        const isSorted: boolean = elements.every((identifier, index) => context.sourceCode.getText(identifier!) === sortedNames[index]);
+
+        const requiresMultiline: boolean = maxItems < node.elements.length;
+        const isMultiline: boolean = /\n/.test(context.sourceCode.getText(node));
+
+        const incorrectFormat: boolean = requiresMultiline !== isMultiline;
+
+        if (isSorted && !incorrectFormat) {
+          return;
+        }
+
+        context.report({
+          node: node.parent,
+          messageId: Message.SORT_STANDALONE_IMPORTS_ARRAYS,
+          fix: (fixer: TSESLint.RuleFixer) => {
+            if (requiresMultiline) {
+              const multilineImports: string = sortedNames
+                .map((name: string) => `${' '.repeat(2 * indent)}${name}${trailingComma ? ',' : ''}`)
+                .join(trailingComma ? '\n' : ',\n');
+
+              return fixer.replaceText(node, `[\n${multilineImports}\n${' '.repeat(indent)}]`);
+            } else {
+              return fixer.replaceText(node, `[${sortedNames.join(', ')}]`);
+            }
+          },
+        });
+      },
+    };
+  },
+});
+
+export const tests: NamedTests = {
+  plugin: info.name,
+  valid: [
+    {
+      name: 'should sort multiple imports on separate lines',
+      code: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    RootComponent,
+  ],
+})
+export class AppComponent {}`,
+    },
+    {
+      name: 'should not inlines singular imports when maxItems is 0',
+      code: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    RootComponent,
+  ],
+})
+export class AppComponent {}`,
+    },
+    {
+      name: 'should inline singular imports when maxItems is 1',
+      options: [{ maxItems: 1 }],
+      code: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [RootComponent],
+})
+export class AppComponent {}`,
+    },
+  ],
+  invalid: [
+    {
+      name: 'should sort multiple imports alphabetically',
+      code: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    RootComponent,
+    AsyncPipe,
+  ],
+})
+export class AppComponent {}`,
+      errors: [
+        {
+          messageId: Message.SORT_STANDALONE_IMPORTS_ARRAYS,
+        },
+      ],
+      output: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    RootComponent,
+  ],
+})
+export class AppComponent {}`,
+    },
+    {
+      name: 'should not put singular imports on one line when maxItems is 0',
+      code: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [RootComponent],
+})
+export class AppComponent {}`,
+      errors: [
+        {
+          messageId: Message.SORT_STANDALONE_IMPORTS_ARRAYS,
+        },
+      ],
+      output: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    RootComponent,
+  ],
+})
+export class AppComponent {}`,
+    },
+    {
+      name: 'should not put singular imports on a separate line when maxItems is 1',
+      options: [{ maxItems: 1 }],
+      code: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    RootComponent,
+  ],
+})
+export class AppComponent {}`,
+      errors: [
+        {
+          messageId: Message.SORT_STANDALONE_IMPORTS_ARRAYS,
+        },
+      ],
+      output: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [RootComponent],
+})
+export class AppComponent {}`,
+    },
+    {
+      name: 'should not display multiple imports on the same line',
+      code: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [AsyncPipe, RootComponent],
+})
+export class AppComponent {}`,
+      errors: [
+        {
+          messageId: Message.SORT_STANDALONE_IMPORTS_ARRAYS,
+        },
+      ],
+      output: `
+@Component({
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    RootComponent,
+  ],
+})
+export class AppComponent {}`,
+    },
+  ],
+};

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

@@ -52,6 +52,7 @@ export const info = {
       [Message.WRAPPER_IMPORTS_BASE]: 'Themed component wrapper classes must only import the base class',
     },
   },
+  optionDocs: [],
   defaultOptions: [],
 } as DSpaceESLintRuleInfo;
 
@@ -180,7 +181,7 @@ class Something {
   selector: 'ds-base-test-themable',
   standalone: true,
 })
-class TestThemeableTomponent {
+class TestThemeableComponent {
 }
       `,
     },
@@ -195,7 +196,7 @@ class TestThemeableTomponent {
     TestThemeableComponent,
   ],
 })
-class ThemedTestThemeableTomponent extends ThemedComponent<TestThemeableComponent> {
+class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
 }
       `,
     },

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

@@ -53,6 +53,7 @@ Unit tests are exempt from this rule, because they may redefine components using
       [Message.THEMED]: 'Theme override of themeable component should have a selector starting with \'ds-themed-\'',
     },
   },
+  optionDocs: [],
   defaultOptions: [],
 } as DSpaceESLintRuleInfo;
 

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

@@ -63,6 +63,7 @@ There are a few exceptions where the base class can still be used:
       [Message.BASE_IN_MODULE]: 'Base themeable components shouldn\'t be declared in modules',
     },
   },
+  optionDocs: [],
   defaultOptions: [],
 } as DSpaceESLintRuleInfo;
 

lint/src/rules/ts/themed-decorators.ts

@@ -0,0 +1,280 @@
+import {
+  AST_NODE_TYPES,
+  ESLintUtils,
+  TSESLint,
+  TSESTree,
+} from '@typescript-eslint/utils';
+
+import { fixture } from '../../../test/fixture';
+import { isTestFile } from '../../util/filter';
+import {
+  DSpaceESLintRuleInfo,
+  NamedTests,
+  OptionDoc,
+} from '../../util/structure';
+import { getFileTheme } from '../../util/theme-support';
+
+export enum Message {
+  NO_THEME_DECLARED_IN_THEME_FILE = 'noThemeDeclaredInThemeFile',
+  THEME_DECLARED_IN_NON_THEME_FILE = 'themeDeclaredInNonThemeFile',
+  WRONG_THEME_DECLARED_IN_THEME_FILE = 'wrongThemeDeclaredInThemeFile',
+}
+
+interface ThemedDecoratorsOption {
+  decorators: { [name: string]: number };
+}
+
+interface ThemedDecoratorsDocsOption {
+  decorators: OptionDoc;
+}
+
+export const info: DSpaceESLintRuleInfo<[ThemedDecoratorsOption], [ThemedDecoratorsDocsOption]> = {
+  name: 'themed-decorators',
+  meta: {
+    docs: {
+      description: 'Entry components with theme support should declare the correct theme',
+    },
+    fixable: 'code',
+    messages: {
+      [Message.NO_THEME_DECLARED_IN_THEME_FILE]: 'No theme declaration in decorator',
+      [Message.THEME_DECLARED_IN_NON_THEME_FILE]: 'There is a theme declaration in decorator, but this file is not part of a theme',
+      [Message.WRONG_THEME_DECLARED_IN_THEME_FILE]: 'Wrong theme declaration in decorator',
+    },
+    type: 'problem',
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          decorators: {
+            type: 'object',
+          },
+        },
+      },
+    ],
+  },
+  optionDocs: [
+    {
+      decorators: {
+        title: '`decorators`',
+        description: 'A mapping for all the existing themeable decorators, with the decorator name as the key and the index of the `theme` argument as the value.',
+      },
+    },
+  ],
+  defaultOptions: [
+    {
+      decorators: {
+        listableObjectComponent: 3,
+        rendersSectionForMenu: 2,
+      },
+    },
+  ],
+};
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  ...info,
+  create(context: TSESLint.RuleContext<Message, unknown[]>, options: any) {
+    return {
+      [`ClassDeclaration > Decorator > CallExpression[callee.name=/^(${Object.keys(options[0].decorators).join('|')})$/]`]: (node: TSESTree.CallExpression) => {
+        if (isTestFile(context)) {
+          return;
+        }
+
+        if (node.callee.type !== AST_NODE_TYPES.Identifier) {
+          // We only support regular method identifiers
+          return;
+        }
+
+        const fileTheme = getFileTheme(context);
+        const themeDeclaration = getDeclaredTheme(options, node as TSESTree.CallExpression);
+
+        if (themeDeclaration === undefined) {
+          if (fileTheme !== undefined) {
+            context.report({
+              messageId: Message.NO_THEME_DECLARED_IN_THEME_FILE,
+              node: node,
+              fix(fixer) {
+                return fixer.insertTextAfter(node.arguments[node.arguments.length - 1], `, '${fileTheme as string}'`);
+              },
+            });
+          }
+        } else if (themeDeclaration?.type === AST_NODE_TYPES.Literal) {
+          if (fileTheme === undefined) {
+            context.report({
+              messageId: Message.THEME_DECLARED_IN_NON_THEME_FILE,
+              node: themeDeclaration,
+              fix(fixer) {
+                const idx = node.arguments.findIndex((v) => v.range === themeDeclaration.range);
+
+                if (idx === 0) {
+                  return fixer.remove(themeDeclaration);
+                } else {
+                  const previousArgument = node.arguments[idx - 1];
+                  return fixer.removeRange([previousArgument.range[1], themeDeclaration.range[1]]);  // todo: comma?
+                }
+              },
+            });
+          } else if (fileTheme !== themeDeclaration?.value) {
+            context.report({
+              messageId: Message.WRONG_THEME_DECLARED_IN_THEME_FILE,
+              node: themeDeclaration,
+              fix(fixer) {
+                return fixer.replaceText(themeDeclaration, `'${fileTheme as string}'`);
+              },
+            });
+          }
+        } else if (themeDeclaration?.type === AST_NODE_TYPES.Identifier && themeDeclaration.name === 'undefined') {
+          if (fileTheme !== undefined) {
+            context.report({
+              messageId: Message.NO_THEME_DECLARED_IN_THEME_FILE,
+              node: node,
+              fix(fixer) {
+                return fixer.replaceText(node.arguments[node.arguments.length - 1], `'${fileTheme as string}'`);
+              },
+            });
+          }
+        } else {
+          throw new Error('Unexpected theme declaration');
+        }
+      },
+    };
+  },
+});
+
+export const tests: NamedTests = {
+  plugin: info.name,
+  valid: [
+    {
+      name: 'theme file declares the correct theme in @listableObjectComponent',
+      code: `
+@listableObjectComponent(something, somethingElse, undefined, 'test')
+export class Something extends SomethingElse {
+}
+        `,
+      filename: fixture('src/themes/test/app/dynamic-component/dynamic-component.ts'),
+    },
+    {
+      name: 'plain file declares no theme in @listableObjectComponent',
+      code: `
+@listableObjectComponent(something, somethingElse, undefined)
+export class Something extends SomethingElse {
+}
+        `,
+      filename: fixture('src/app/dynamic-component/dynamic-component.ts'),
+    },
+    {
+      name: 'plain file declares explicit undefined theme in @listableObjectComponent',
+      code: `
+@listableObjectComponent(something, somethingElse, undefined, undefined)
+export class Something extends SomethingElse {
+}
+        `,
+      filename: fixture('src/app/dynamic-component/dynamic-component.ts'),
+    },
+    {
+      name: 'test file declares theme outside of theme directory',
+      code: `
+@listableObjectComponent(something, somethingElse, undefined, 'test')
+export class Something extends SomethingElse {
+}
+        `,
+      filename: fixture('src/app/dynamic-component/dynamic-component.spec.ts'),
+    },
+    {
+      name: 'only track configured decorators',
+      code: `
+@something('test')
+export class Something extends SomethingElse {
+}
+        `,
+      filename: fixture('src/app/dynamic-component/dynamic-component.ts'),
+    },
+  ],
+  invalid: [
+    {
+      name: 'theme file declares the wrong theme in @listableObjectComponent',
+      code: `
+@listableObjectComponent(something, somethingElse, undefined, 'test-2')
+export class Something extends SomethingElse {
+}
+        `,
+      filename: fixture('src/themes/test/app/dynamic-component/dynamic-component.ts'),
+      errors: [
+        {
+          messageId: 'wrongThemeDeclaredInThemeFile',
+        },
+      ],
+      output: `
+@listableObjectComponent(something, somethingElse, undefined, 'test')
+export class Something extends SomethingElse {
+}
+        `,
+    },
+    {
+      name: 'plain file declares a theme in @listableObjectComponent',
+      code: `
+@listableObjectComponent(something, somethingElse, undefined, 'test-2')
+export class Something extends SomethingElse {
+}
+        `,
+      filename: fixture('src/app/dynamic-component/dynamic-component.ts'),
+      errors: [
+        {
+          messageId: 'themeDeclaredInNonThemeFile',
+        },
+      ],
+      output: `
+@listableObjectComponent(something, somethingElse, undefined)
+export class Something extends SomethingElse {
+}
+        `,
+    },
+    {
+      name: 'theme file declares no theme in @listableObjectComponent',
+      code: `
+@listableObjectComponent(something, somethingElse, undefined)
+export class Something extends SomethingElse {
+}
+        `,
+      filename: fixture('src/themes/test-2/app/dynamic-component/dynamic-component.ts'),
+      errors: [
+        {
+          messageId: 'noThemeDeclaredInThemeFile',
+        },
+      ],
+      output: `
+@listableObjectComponent(something, somethingElse, undefined, 'test-2')
+export class Something extends SomethingElse {
+}
+        `,
+    },
+    {
+      name: 'theme file declares explicit undefined theme in @listableObjectComponent',
+      code: `
+@listableObjectComponent(something, somethingElse, undefined, undefined)
+export class Something extends SomethingElse {
+}
+        `,
+      filename: fixture('src/themes/test-2/app/dynamic-component/dynamic-component.ts'),
+      errors: [
+        {
+          messageId: 'noThemeDeclaredInThemeFile',
+        },
+      ],
+      output: `
+@listableObjectComponent(something, somethingElse, undefined, 'test-2')
+export class Something extends SomethingElse {
+}
+        `,
+    },
+  ],
+};
+
+function getDeclaredTheme(options: [ThemedDecoratorsOption], decoratorCall: TSESTree.CallExpression): TSESTree.Node | undefined {
+  const index: number = options[0].decorators[(decoratorCall.callee as TSESTree.Identifier).name];
+
+  if (decoratorCall.arguments.length >= index + 1) {
+    return decoratorCall.arguments[index];
+  }
+
+  return undefined;
+}

lint/src/rules/ts/themed-wrapper-no-input-defaults.ts

@@ -0,0 +1,158 @@
+import {
+  ESLintUtils,
+  TSESTree,
+} from '@typescript-eslint/utils';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';
+
+import {
+  DSpaceESLintRuleInfo,
+  NamedTests,
+} from '../../util/structure';
+import { isThemedComponentWrapper } from '../../util/theme-support';
+
+export enum Message {
+  WRAPPER_HAS_INPUT_DEFAULTS = 'wrapperHasInputDefaults',
+}
+
+export const info: DSpaceESLintRuleInfo = {
+  name: 'themed-wrapper-no-input-defaults',
+  meta: {
+    docs: {
+      description: 'ThemedComponent wrappers should not declare input defaults (see [DSpace Angular #2164](https://github.com/DSpace/dspace-angular/pull/2164))',
+    },
+    messages: {
+      [Message.WRAPPER_HAS_INPUT_DEFAULTS]: 'ThemedComponent wrapper declares inputs with defaults',
+    },
+    type: 'problem',
+    schema: [],
+  },
+  optionDocs: [],
+  defaultOptions: [],
+};
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  ...info,
+  create(context: RuleContext<any, any>, options: any) {
+    return {
+      'ClassBody > PropertyDefinition > Decorator > CallExpression[callee.name=\'Input\']': (node: TSESTree.CallExpression) => {
+        const classDeclaration = (node?.parent?.parent?.parent as TSESTree.Decorator);  // todo: clean this up
+        if (!isThemedComponentWrapper(classDeclaration)) {
+          return;
+        }
+
+        const propertyDefinition: TSESTree.PropertyDefinition = (node.parent.parent as any);  // todo: clean this up
+
+        if (propertyDefinition.value !== null) {
+          context.report({
+            messageId: Message.WRAPPER_HAS_INPUT_DEFAULTS,
+            node: propertyDefinition.value,
+            // fix(fixer) {
+            //   // todo: don't strip type annotations!
+            //   // todo: replace default with appropriate type annotation if not present!
+            //   return fixer.removeRange([propertyDefinition.key.range[1], (propertyDefinition.value as any).range[1]]);
+            // }
+          });
+        }
+      },
+    };
+  },
+});
+
+export const tests: NamedTests = {
+  plugin: info.name,
+  valid: [
+    {
+      name: 'ThemedComponent wrapper defines an input without a default value',
+      code: `
+export class TTest extends ThemedComponent<Test> {
+
+@Input()
+test;
+}
+    `,
+    },
+    {
+      name: 'Regular class defines an input with a default value',
+      code: `
+export class Test {
+
+@Input()
+test = 'test';
+}
+    `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'ThemedComponent wrapper defines an input with a default value',
+      code: `
+export class TTest extends ThemedComponent<Test> {
+
+@Input()
+test1 = 'test';
+
+@Input()
+test2 = true;
+
+@Input()
+test2: number = 123;
+
+@Input()
+test3: number[] = [1,2,3];
+}
+    `,
+      errors: [
+        {
+          messageId: 'wrapperHasInputDefaults',
+        },
+        {
+          messageId: 'wrapperHasInputDefaults',
+        },
+        {
+          messageId: 'wrapperHasInputDefaults',
+        },
+        {
+          messageId: 'wrapperHasInputDefaults',
+        },
+      ],
+      //         output: `
+      // export class TTest extends ThemedComponent<Test> {
+      //
+      // @Input()
+      // test1: string;
+      //
+      // @Input()
+      // test2: boolean;
+      //
+      // @Input()
+      // test2: number;
+      //
+      // @Input()
+      // test3: number[];
+      // }
+      //       `,
+    },
+    {
+      name: 'ThemedComponent wrapper defines an input with an undefined default value',
+      code: `
+export class TTest extends ThemedComponent<Test> {
+
+@Input()
+test = undefined;
+}
+    `,
+      errors: [
+        {
+          messageId: 'wrapperHasInputDefaults',
+        },
+      ],
+      //         output: `
+      // export class TTest extends ThemedComponent<Test> {
+      //
+      // @Input()
+      // test;
+      // }
+      //       `,
+    },
+  ],
+};

lint/src/rules/ts/unique-decorators.ts

@@ -0,0 +1,226 @@
+import {
+  AST_NODE_TYPES,
+  ESLintUtils,
+  TSESLint,
+  TSESTree,
+} from '@typescript-eslint/utils';
+
+import { isTestFile } from '../../util/filter';
+import {
+  DSpaceESLintRuleInfo,
+  NamedTests,
+  OptionDoc,
+} from '../../util/structure';
+
+export enum Message {
+  DUPLICATE_DECORATOR_CALL = 'duplicateDecoratorCall',
+}
+
+/**
+ * Saves the decorators by decoratorName → file → Set<String>
+ */
+const decoratorCalls: Map<string, Map<string, Set<string>>> = new Map();
+
+/**
+ * Keep a list of the files wo contain a decorator. This is done in order to prevent the `Program` selector from being
+ * run for every file.
+ */
+const fileWithDecorators: Set<string> = new Set();
+
+export interface UniqueDecoratorsOptions {
+  decorators: string[];
+}
+
+export interface UniqueDecoratorsDocOptions {
+  decorators: OptionDoc;
+}
+
+export const info: DSpaceESLintRuleInfo<[UniqueDecoratorsOptions], [UniqueDecoratorsDocOptions]> = {
+  name: 'unique-decorators',
+  meta: {
+    docs: {
+      description: 'Some decorators must be called with unique arguments (e.g. when they construct a mapping based on the argument values)',
+    },
+    messages: {
+      [Message.DUPLICATE_DECORATOR_CALL]: 'Duplicate decorator call',
+    },
+    type: 'problem',
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          decorators: {
+            type: 'array',
+            items: {
+              type: 'string',
+            },
+          },
+        },
+      },
+    ],
+  },
+  optionDocs: [
+    {
+      decorators: {
+        title: '`decorators`',
+        description: 'The list of all the decorators for which you want to enforce this behavior.',
+      },
+    },
+  ],
+  defaultOptions: [
+    {
+      decorators: [
+        'listableObjectComponent',  // todo: must take default arguments into account!
+      ],
+    },
+  ],
+};
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  ...info,
+  create(context: TSESLint.RuleContext<Message, unknown[]>, options: any) {
+
+    return {
+      ['Program']: () => {
+        if (fileWithDecorators.has(context.physicalFilename)) {
+          for (const decorator of options[0].decorators) {
+            decoratorCalls.get(decorator)?.get(context.physicalFilename)?.clear();
+          }
+        }
+      },
+      [`ClassDeclaration > Decorator > CallExpression[callee.name=/^(${options[0].decorators.join('|')})$/]`]: (node: TSESTree.CallExpression) => {
+        if (isTestFile(context)) {
+          return;
+        }
+
+        if (node.callee.type !== AST_NODE_TYPES.Identifier) {
+          // We only support regular method identifiers
+          return;
+        }
+
+        fileWithDecorators.add(context.physicalFilename);
+
+        if (!isUnique(node, context.physicalFilename)) {
+          context.report({
+            messageId: Message.DUPLICATE_DECORATOR_CALL,
+            node: node,
+          });
+        }
+      },
+    };
+  },
+});
+
+export const tests: NamedTests = {
+  plugin: info.name,
+  valid: [
+    {
+      name: 'checked decorator, no repetitions',
+      code: `
+@listableObjectComponent(a)
+export class A {
+}
+
+@listableObjectComponent(a, 'b')
+export class B {
+}
+
+@listableObjectComponent(a, 'b', 3)
+export class C {
+}
+
+@listableObjectComponent(a, 'b', 3, Enum.TEST1)
+export class C {
+}
+
+@listableObjectComponent(a, 'b', 3, Enum.TEST2)
+export class C {
+}
+      `,
+    },
+    {
+      name: 'unchecked decorator, some repetitions',
+      code: `
+@something(a)
+export class A {
+}
+
+@something(a)
+export class B {
+}
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'checked decorator, some repetitions',
+      code: `
+@listableObjectComponent(a)
+export class A {
+}
+
+@listableObjectComponent(a)
+export class B {
+}
+      `,
+      errors: [
+        {
+          messageId: 'duplicateDecoratorCall',
+        },
+      ],
+    },
+  ],
+};
+
+function callKey(node: TSESTree.CallExpression): string {
+  let key = '';
+
+  for (const arg of node.arguments) {
+    switch ((arg as TSESTree.Node).type) {
+      // todo: can we make this more generic somehow?
+      case AST_NODE_TYPES.Identifier:
+        key += (arg as TSESTree.Identifier).name;
+        break;
+      case AST_NODE_TYPES.Literal:
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
+        key += (arg as TSESTree.Literal).value;
+        break;
+      case AST_NODE_TYPES.MemberExpression:
+        key += (arg as any).object.name + '.' + (arg as any).property.name;
+        break;
+      default:
+        throw new Error(`Unrecognized decorator argument type: ${arg.type}`);
+    }
+
+    key += ', ';
+  }
+
+  return key;
+}
+
+function isUnique(node: TSESTree.CallExpression, filePath: string): boolean {
+  const decorator = (node.callee as TSESTree.Identifier).name;
+
+  if (!decoratorCalls.has(decorator)) {
+    decoratorCalls.set(decorator, new Map());
+  }
+
+  if (!decoratorCalls.get(decorator)!.has(filePath)) {
+    decoratorCalls.get(decorator)!.set(filePath, new Set());
+  }
+
+  const key = callKey(node);
+
+  let unique = true;
+
+  for (const decoratorCallsByFile of decoratorCalls.get(decorator)!.values()) {
+    if (decoratorCallsByFile.has(key)) {
+      unique = !unique;
+      break;
+    }
+  }
+
+  decoratorCalls.get(decorator)?.get(filePath)?.add(key);
+
+  return unique;
+}

lint/src/util/filter.ts

@@ -0,0 +1,10 @@
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';
+
+/**
+ * Determine whether the current file is a test file
+ * @param context the current ESLint rule context
+ */
+export function isTestFile(context: RuleContext<any, any>): boolean {
+  // note: shouldn't use plain .filename (doesn't work in DSpace Angular 7.4)
+  return context.getFilename()?.endsWith('.spec.ts')  ;
+}

lint/src/util/structure.ts

@@ -17,10 +17,16 @@ export type Meta = RuleMetaData<string, unknown[]>;
 export type Valid = ValidTestCase<unknown[]>;
 export type Invalid = InvalidTestCase<string, unknown[]>;
 
-export interface DSpaceESLintRuleInfo {
+export interface DSpaceESLintRuleInfo<T = unknown[], D = unknown[]> {
   name: string;
   meta: Meta,
-  defaultOptions: unknown[],
+  optionDocs: D,
+  defaultOptions: T,
+}
+
+export interface OptionDoc {
+  title: string;
+  description: string;
 }
 
 export interface NamedTests {

lint/src/util/templates/rule.ejs

@@ -7,6 +7,11 @@ _______
 
 [Source code](../../../../lint/src/rules/<%- plugin.name.replace('dspace-angular-', '') %>/<%- rule.name %>.ts)
 
+<% if (rule.optionDocs?.length > 0) { %>
+### Options
+<%- rule.optionDocs.map(optionDoc => Object.keys(optionDoc).map(option => '\n#### ' + optionDoc[option].title + '\n\n' + optionDoc[option].description)) %>
+<% } %>
+
 ### Examples
 
 <% if (tests.valid) {%>
@@ -19,6 +24,13 @@ Filename: `<%- test.filename %>`
 ```<%- plugin.language.toLowerCase() %>
 <%- test.code.trim() %>
 ```
+        <% if (test?.options?.length > 0) { %>
+With options:
+
+```json
+<%- JSON.stringify(test.options[0], null, 2) %>
+```
+        <% }%>
     <% }) %>
 <% } %>
 
@@ -31,6 +43,15 @@ Filename: `<%- test.filename %>`
         <% } %>
 ```<%- plugin.language.toLowerCase() %>
 <%- test.code.trim() %>
+
+        <% if (test?.options?.length > 0) { %>
+With options:
+
+```json
+<%- JSON.stringify(test.options[0], null, 2) %>
+```
+        <% }%>
+
 ```
 Will produce the following error(s):
 ```

lint/src/util/theme-support.ts

@@ -6,9 +6,11 @@
  * http://www.dspace.org/license/
  */
 
+import { readFileSync } from 'node:fs';
+import { basename } from 'node:path';
+
 import { TSESTree } from '@typescript-eslint/utils';
-import { readFileSync } from 'fs';
-import { basename } from 'path';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';
 import ts, { Identifier } from 'typescript';
 
 import {
@@ -263,3 +265,18 @@ export const DISALLOWED_THEME_SELECTORS = 'ds-(base|themed)-';
 export function fixSelectors(text: string): string {
   return text.replaceAll(/ds-(base|themed)-/g, 'ds-');
 }
+
+/**
+ * Determine the theme of the current file based on its path in the project.
+ * @param context the current ESLint rule context
+ */
+export function getFileTheme(context: RuleContext<any, any>): string | undefined {
+  // note: shouldn't use plain .filename (doesn't work in DSpace Angular 7.4)
+  const m = context.getFilename()?.match(/\/src\/themes\/([^/]+)\//);
+
+  if (m?.length === 2) {
+    return m[1];
+  }
+
+  return undefined;
+}

lint/test/structure.spec.ts

@@ -6,6 +6,8 @@
  * http://www.dspace.org/license/
  */
 
+import { RuleMetaData } from '@typescript-eslint/utils/ts-eslint';
+
 import { default as html } from '../src/rules/html';
 import { default as ts } from '../src/rules/ts';
 
@@ -69,6 +71,16 @@ describe('plugin structure', () => {
             expect(ruleExports.tests.valid.length).toBeGreaterThan(0);
             expect(ruleExports.tests.invalid.length).toBeGreaterThan(0);
           });
+
+          it('should contain a valid ESLint rule', () => {
+            // we don't have a better way to enforce this, but it's something at least
+            expect((ruleExports.rule as any).name).toBeUndefined(
+              'Rules should be passed to RuleCreator, omitting info.name since it is not part of the RuleWithMeta interface',
+            );
+
+            expect(ruleExports.rule.create).toBeTruthy();
+            expect(ruleExports.rule.meta).toEqual(ruleExports.info.meta as RuleMetaData<string, []>);
+          });
         });
       }
     });

package.json

@@ -1,12 +1,11 @@
 {
   "name": "dspace-angular",
-  "version": "9.0.0-next",
+  "version": "9.2.0-next",
   "scripts": {
     "ng": "ng",
-    "config:watch": "nodemon",
     "test:rest": "ts-node --project ./tsconfig.ts-node.json scripts/test-rest.ts",
     "start": "npm run start:prod",
-    "start:dev": "nodemon --exec \"cross-env NODE_ENV=development npm run serve\"",
+    "start:dev": "cross-env NODE_ENV=development npm run serve --watch",
     "start:prod": "npm run build:prod && cross-env NODE_ENV=production npm run serve:ssr",
     "start:mirador:prod": "npm run build:mirador && npm run start:prod",
     "preserve": "npm run base-href",
@@ -19,7 +18,7 @@
     "build:ssr": "ng build --configuration production && ng run dspace-angular:server:production",
     "build:lint": "rimraf 'lint/dist/**/*.js' 'lint/dist/**/*.js.map' && tsc -b lint/tsconfig.json",
     "test": "ng test --source-map=true --watch=false --configuration test",
-    "test:watch": "nodemon --exec \"ng test --source-map=true --watch=true --configuration test\"",
+    "test:watch": "ng test --source-map=true --watch=true --configuration test",
     "test:headless": "ng test --source-map=true --watch=false --configuration test --browsers=ChromeHeadless --code-coverage",
     "test:lint": "npm run build:lint && npm run test:lint:nobuild",
     "test:lint:nobuild": "jasmine --config=lint/jasmine.json",
@@ -57,106 +56,108 @@
   "private": true,
   "overrides": {
     "@kolkov/ngx-gallery": {
-      "@angular/animations": "^17.3.11",
-      "@angular/common": "^17.3.11",
-      "@angular/core": "^17.3.11"
+      "@angular/animations": "^18.2.12",
+      "@angular/common": "^18.2.12",
+      "@angular/core": "^18.2.12"
     },
     "@ng-bootstrap/ng-bootstrap": {
-      "@angular/common": "^17.3.11",
-      "@angular/core": "^17.3.11",
-      "@angular/forms": "^17.3.11",
-      "@angular/localize": "^17.3.11"
+      "@angular/common": "^18.2.12",
+      "@angular/core": "^18.2.12",
+      "@angular/forms": "^18.2.12",
+      "@angular/localize": "^18.2.12"
     },
     "@ng-dynamic-forms/core": {
-      "@angular/common": "^17.3.11",
-      "@angular/core": "^17.3.11",
-      "@angular/forms": "^17.3.11"
+      "@angular/common": "^18.2.12",
+      "@angular/core": "^18.2.12",
+      "@angular/forms": "^18.2.12"
     },
     "@ng-dynamic-forms/ui-ng-bootstrap": {
-      "ngx-mask": "14.2.4"
-    },
-    "@ngtools/webpack": {
-      "@angular/compiler-cli": "^17.3.11",
-      "typescript": "~5.4.5"
+      "ngx-mask": "14.2.4",
+      "@ng-bootstrap/ng-bootstrap": "^12.0.0",
+      "bootstrap": "^5.3"
     },
     "@nicky-lenaers/ngx-scroll-to": {
-      "@angular/common": "^17.3.11",
-      "@angular/core": "^17.3.11"
+      "@angular/common": "^18.2.12",
+      "@angular/core": "^18.2.12"
     },
     "eslint-plugin-unused-imports": {
       "@typescript-eslint/eslint-plugin": "^7.2.0"
     },
-    "ng2-file-upload": {
-      "@angular/common": "^17.3.11",
-      "@angular/core": "^17.3.11"
-    },
     "ngx-infinite-scroll": {
-      "@angular/common": "^17.3.11",
-      "@angular/core": "^17.3.11"
-    }
+      "@angular/common": "^18.2.12",
+      "@angular/core": "^18.2.12"
+    },
+    "notistack": "3.0.1"
   },
   "dependencies": {
-    "@angular/animations": "^17.3.12",
-    "@angular/cdk": "^17.3.10",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/forms": "^17.3.12",
-    "@angular/localize": "^17.3.12",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
-    "@angular/platform-server": "^17.3.12",
-    "@angular/router": "^17.3.12",
-    "@angular/ssr": "^17.3.11",
-    "@babel/runtime": "7.26.0",
+    "@angular/animations": "^18.2.12",
+    "@angular/cdk": "^18.2.12",
+    "@angular/common": "^18.2.12",
+    "@angular/compiler": "^18.2.12",
+    "@angular/core": "^18.2.12",
+    "@angular/forms": "^18.2.12",
+    "@angular/localize": "^18.2.12",
+    "@angular/platform-browser": "^18.2.12",
+    "@angular/platform-browser-dynamic": "^18.2.12",
+    "@angular/platform-server": "^18.2.12",
+    "@angular/router": "^18.2.12",
+    "@angular/ssr": "^18.2.20",
+    "@babel/runtime": "7.28.4",
     "@kolkov/ngx-gallery": "^2.0.1",
-    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@ng-dynamic-forms/core": "^16.0.0",
     "@ng-dynamic-forms/ui-ng-bootstrap": "^16.0.0",
-    "@ngrx/effects": "^17.1.1",
-    "@ngrx/router-store": "^17.1.1",
-    "@ngrx/store": "^17.1.1",
-    "@ngx-translate/core": "^14.0.0",
+    "@ngrx/effects": "^18.1.1",
+    "@ngrx/operators": "^18.0.0",
+    "@ngrx/router-store": "^18.1.1",
+    "@ngrx/store": "^18.1.1",
+    "@ngx-translate/core": "^16.0.3",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
+    "@terraformer/wkt": "^2.2.1",
+    "altcha": "^0.9.0",
     "angulartics2": "^12.2.0",
-    "axios": "^1.7.4",
-    "bootstrap": "^4.6.1",
+    "bootstrap": "^5.3",
     "cerialize": "0.1.18",
     "cli-progress": "^3.12.0",
     "colors": "^1.4.0",
-    "compression": "^1.7.5",
+    "compression": "^1.8.1",
     "cookie-parser": "1.4.7",
-    "core-js": "^3.39.0",
+    "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.21.1",
+    "express": "^4.21.2",
     "express-rate-limit": "^5.1.3",
     "fast-json-patch": "^3.1.1",
-    "filesize": "^6.1.0",
-    "http-proxy-middleware": "^2.0.7",
+    "filesize": "^10.1.6",
+    "http-proxy-middleware": "^2.0.9",
     "http-terminator": "^3.2.0",
-    "isbot": "^5.1.17",
+    "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",
-    "lodash": "^4.17.21",
+    "leaflet": "^1.9.4",
+    "leaflet-providers": "^2.0.0",
+    "leaflet.markercluster": "^1.5.3",
+    "lodash-es": "^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.16.0",
-    "morgan": "^1.10.0",
-    "ng2-file-upload": "5.0.0",
+    "morgan": "^1.10.1",
+    "ng2-file-upload": "7.0.1",
     "ng2-nouislider": "^2.0.0",
-    "ngx-infinite-scroll": "^16.0.0",
+    "ngx-infinite-scroll": "^18.0.0",
+    "ngx-matomo-client": "^6.4.1",
     "ngx-pagination": "6.0.3",
-    "ngx-ui-switch": "^14.1.0",
+    "ngx-skeleton-loader": "^9.0.0",
+    "ngx-ui-switch": "^15.0.0",
     "nouislider": "^15.7.1",
-    "orejime": "^2.3.0",
+    "orejime": "^2.3.1",
     "pem": "1.14.8",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.0",
@@ -164,30 +165,30 @@
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "~17.0.2",
-    "@angular-devkit/build-angular": "^17.3.11",
-    "@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-eslint/utils": "^17.5.3",
-    "@angular/cli": "^17.3.11",
-    "@angular/compiler-cli": "^17.3.11",
-    "@angular/language-service": "^17.3.12",
+    "@angular-builders/custom-webpack": "~18.0.0",
+    "@angular-devkit/build-angular": "^18.2.20",
+    "@angular-eslint/builder": "^18.4.1",
+    "@angular-eslint/bundled-angular-compiler": "^18.4.1",
+    "@angular-eslint/eslint-plugin": "^18.4.1",
+    "@angular-eslint/eslint-plugin-template": "^18.4.1",
+    "@angular-eslint/schematics": "^18.4.1",
+    "@angular-eslint/template-parser": "^18.4.1",
+    "@angular-eslint/utils": "^18.4.1",
+    "@angular/cli": "^18.2.20",
+    "@angular/compiler-cli": "^18.2.12",
+    "@angular/language-service": "^18.2.12",
     "@cypress/schematic": "^1.5.0",
-    "@fortawesome/fontawesome-free": "^6.6.0",
-    "@ngrx/store-devtools": "^17.1.1",
-    "@ngtools/webpack": "^16.2.16",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@ngrx/store-devtools": "^18.1.1",
+    "@ngtools/webpack": "^18.2.20",
     "@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.17.13",
-    "@types/node": "^14.14.9",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^18.19.124",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@typescript-eslint/rule-tester": "^7.18.0",
@@ -196,22 +197,22 @@
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
-    "cypress": "^13.16.0",
-    "cypress-axe": "^1.5.0",
+    "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": "file:./lint/dist/src/rules/html",
     "eslint-plugin-dspace-angular-ts": "file:./lint/dist/src/rules/ts",
-    "eslint-plugin-import": "^2.31.0",
+    "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": "^3.2.0",
-    "express-static-gzip": "^2.1.8",
+    "express-static-gzip": "^2.2.0",
     "jasmine": "^3.8.0",
     "jasmine-core": "^3.8.0",
     "jasmine-marbles": "0.9.2",
@@ -221,21 +222,20 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
-    "ng-mocks": "^14.13.1",
+    "ng-mocks": "^14.13.5",
     "ngx-mask": "14.2.4",
-    "nodemon": "^2.0.22",
-    "postcss": "^8.4",
+    "postcss": "^8.5",
     "postcss-import": "^14.0.0",
     "postcss-loader": "^4.0.3",
     "postcss-preset-env": "^7.4.2",
     "rimraf": "^3.0.2",
-    "sass": "~1.80.6",
+    "sass": "~1.92.1",
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.2.5",
     "ts-node": "^8.10.2",
     "typescript": "~5.4.5",
-    "webpack": "5.96.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack": "^5.102.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   }
 }

server.ts

@@ -20,12 +20,11 @@ import 'reflect-metadata';
 
 /* eslint-disable import/no-namespace */
 import * as morgan from 'morgan';
-import * as express from 'express';
+import express from 'express';
 import * as ejs from 'ejs';
 import * as compression from 'compression';
-import * as expressStaticGzip from 'express-static-gzip';
+import expressStaticGzip from 'express-static-gzip';
 /* eslint-enable import/no-namespace */
-import axios from 'axios';
 import LRU from 'lru-cache';
 import { isbot } from 'isbot';
 import { createCertificate } from 'pem';
@@ -58,6 +57,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 +81,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 +159,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 +168,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 +221,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 +268,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 +566,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,14 +633,29 @@ 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}`;
-  axios.get(baseUrl)
+  const baseUrl = `${REST_BASE_URL}${environment.actuators.endpointPath}`;
+  fetch(baseUrl)
     .then((response) => {
-      res.status(response.status).send(response.data);
+      res.status(response.status).send(response);
     })
     .catch((error) => {
       res.status(error.response.status).send({

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

@@ -1,19 +1,13 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'browse'">
   <ngb-panel [id]="'browse'">
-    <ng-template ngbPanelHeader>
-      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
-           data-test="browse">
+    <ng-template ngbPanelTitle>
+      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle('browse')"
+        data-test="browse">
         <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
-                [attr.aria-expanded]="acc.isExpanded('browse')"
-                aria-controls="bulk-access-browse-panel-content">
+          [attr.aria-expanded]="acc.isExpanded('browse')"
+          aria-controls="bulk-access-browse-panel-content">
           {{ 'admin.access-control.bulk-access-browse.header' | translate }}
         </button>
-        <div class="text-right d-flex gap-2">
-          <div class="d-flex my-auto">
-            <span *ngIf="acc.isExpanded('browse')" class="fas fa-chevron-up fa-fw"></span>
-            <span *ngIf="!acc.isExpanded('browse')" class="fas fa-chevron-down fa-fw"></span>
-          </div>
-        </div>
       </div>
     </ng-template>
     <ng-template ngbPanelContent>
@@ -22,11 +16,11 @@
           <li [ngbNavItem]="'search'" role="presentation">
             <a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
             <ng-template ngbNavContent>
-              <div class="mx-n3">
+              <div class="bulk-access-search">
                 <ds-search [configuration]="'administrativeBulkAccess'"
-                                  [selectable]="true"
-                                  [selectionConfig]="{ repeatable: true, listId: listId }"
-                                  [showThumbnails]="false"></ds-search>
+                  [selectable]="true"
+                  [selectionConfig]="{ repeatable: true, listId: listId }"
+                [showThumbnails]="false"></ds-search>
               </div>
             </ng-template>
           </li>
@@ -42,21 +36,25 @@
                 [showPaginator]="false"
                 (prev)="pagePrev()"
                 (next)="pageNext()">
-                <ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
-                  <li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
-                              currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
-                      class="mt-4 mb-4 d-flex"
-                      [attr.data-test]="'list-object' | dsBrowserOnly">
-                    <ds-selectable-list-item-control [index]="i"
-                                                     [object]="object"
-                                                     [selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
-                    <ds-listable-object-component-loader [listID]="listId"
-                                                         [index]="i"
-                                                         [object]="object"
-                                                         [showThumbnails]="false"
-                                                         [viewMode]="'list'"></ds-listable-object-component-loader>
-                  </li>
-                </ul>
+                @if ((objectsSelected$|async)?.hasSucceeded) {
+                  <ul class="list-unstyled ms-4">
+                    @for (object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
+                      currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; track object; let i = $index; let last = $last) {
+                      <li
+                        class="mt-4 mb-4 d-flex"
+                        [attr.data-test]="'list-object' | dsBrowserOnly">
+                        <ds-selectable-list-item-control [index]="i"
+                          [object]="object"
+                        [selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
+                        <ds-listable-object-component-loader [listID]="listId"
+                          [index]="i"
+                          [object]="object"
+                          [showThumbnails]="false"
+                        [viewMode]="'list'"></ds-listable-object-component-loader>
+                      </li>
+                    }
+                  </ul>
+                }
               </ds-pagination>
             </ng-template>
           </li>

src/app/access-control/bulk-access/browse/bulk-access-browse.component.scss

@@ -0,0 +1,4 @@
+.bulk-access-search {
+    margin-right: calc(var(--bs-gutter-x, 1.5rem) / -2);
+    margin-left: calc(var(--bs-gutter-x, 1.5rem) / -2);
+}

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

@@ -1,8 +1,4 @@
-import {
-  AsyncPipe,
-  NgForOf,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   Input,
@@ -55,18 +51,16 @@ import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
     },
   ],
   imports: [
-    PaginationComponent,
     AsyncPipe,
-    NgbAccordionModule,
-    TranslateModule,
-    NgIf,
-    NgbNavModule,
-    ThemedSearchComponent,
     BrowserOnlyPipe,
-    NgForOf,
-    NgxPaginationModule,
-    SelectableListItemControlComponent,
     ListableObjectComponentLoaderComponent,
+    NgbAccordionModule,
+    NgbNavModule,
+    NgxPaginationModule,
+    PaginationComponent,
+    SelectableListItemControlComponent,
+    ThemedSearchComponent,
+    TranslateModule,
   ],
   standalone: true,
 })

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

@@ -7,10 +7,10 @@
   <hr>
 
   <div class="d-flex justify-content-end">
-    <button class="btn btn-outline-primary mr-3" (click)="reset()">
+    <button class="btn btn-outline-primary me-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';
@@ -24,11 +26,13 @@ import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.com
   templateUrl: './bulk-access.component.html',
   styleUrls: ['./bulk-access.component.scss'],
   imports: [
-    TranslateModule,
-    BulkAccessSettingsComponent,
+    BtnDisabledDirective,
     BulkAccessBrowseComponent,
+    BulkAccessSettingsComponent,
+    TranslateModule,
   ],
   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.html

@@ -1,17 +1,11 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'settings'">
   <ngb-panel [id]="'settings'">
-    <ng-template ngbPanelHeader>
+    <ng-template ngbPanelTitle>
       <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('settings')" data-test="settings">
         <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded('settings')"
                 aria-controls="bulk-access-settings-panel-content">
           {{ 'admin.access-control.bulk-access-settings.header' | translate }}
         </button>
-        <div class="text-right d-flex gap-2">
-          <div class="d-flex my-auto">
-            <span *ngIf="acc.isExpanded('settings')" class="fas fa-chevron-up fa-fw"></span>
-            <span *ngIf="!acc.isExpanded('settings')" class="fas fa-chevron-down fa-fw"></span>
-          </div>
-        </div>
       </div>
     </ng-template>
     <ng-template ngbPanelContent>

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

@@ -1,4 +1,4 @@
-import { NgIf } from '@angular/common';
+
 import {
   Component,
   ViewChild,
@@ -14,10 +14,9 @@ import { AccessControlFormContainerComponent } from '../../../shared/access-cont
   styleUrls: ['./bulk-access-settings.component.scss'],
   exportAs: 'dsBulkSettings',
   imports: [
+    AccessControlFormContainerComponent,
     NgbAccordionModule,
     TranslateModule,
-    NgIf,
-    AccessControlFormContainerComponent,
   ],
   standalone: true,
 })
@@ -43,4 +42,8 @@ export class BulkAccessSettingsComponent {
     this.controlForm.reset();
   }
 
+  isFormValid() {
+    return this.controlForm.isValid();
+  }
+
 }

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

@@ -5,10 +5,10 @@
         <h1 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h1>
 
         <div>
-          <button class="mr-auto btn btn-success addEPerson-button"
-                  [routerLink]="'create'">
+          <button class="me-auto btn btn-success addEPerson-button"
+            [routerLink]="'create'">
             <i class="fas fa-plus"></i>
-            <span class="d-none d-sm-inline ml-1">{{labelPrefix + 'button.add' | translate}}</span>
+            <span class="d-none d-sm-inline ms-1">{{labelPrefix + 'button.add' | translate}}</span>
           </button>
         </div>
       </div>
@@ -18,77 +18,84 @@
       </h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
         <div>
-          <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
+          <select name="scope" id="scope" formControlName="scope" class="form-select" aria-label="Search scope">
             <option value="metadata">{{labelPrefix + 'search.scope.metadata' | translate}}</option>
             <option value="email">{{labelPrefix + 'search.scope.email' | translate}}</option>
           </select>
         </div>
-        <div class="flex-grow-1 mr-3 ml-3">
-          <div class="form-group input-group">
+        <div class="flex-grow-1 me-3 ms-3">
+          <div class="mb-3 input-group">
             <input type="text" name="query" id="query" formControlName="query"
-                   class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
-                   [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
+              class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
+              [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
             <span class="input-group-append">
-                <button type="submit" class="search-button btn btn-primary">
-                  <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
-                </button>
-              </span>
+              <button type="submit" class="search-button btn btn-primary">
+                <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
+              </button>
+            </span>
           </div>
         </div>
         <div>
           <button (click)="clearFormAndResetResult();"
-                  class="search-button btn btn-secondary">{{labelPrefix + 'button.see-all' | translate}}</button>
+          class="search-button btn btn-secondary">{{labelPrefix + 'button.see-all' | translate}}</button>
         </div>
       </form>
 
-      <ds-loading *ngIf="searching$ | async"></ds-loading>
-      <ds-pagination
-        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && (searching$ | async) !== true"
-        [paginationOptions]="config"
-        [collectionSize]="(pageInfoState$ | async)?.totalElements"
-        [hideGear]="true"
-        [hidePagerWhenSinglePage]="true">
-
-        <div class="table-responsive">
-          <table id="epeople" class="table table-striped table-hover table-bordered">
-            <thead>
-            <tr>
-              <th scope="col">{{labelPrefix + 'table.id' | translate}}</th>
-              <th scope="col">{{labelPrefix + 'table.name' | translate}}</th>
-              <th scope="col">{{labelPrefix + 'table.email' | translate}}</th>
-              <th>{{labelPrefix + 'table.edit' | translate}}</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr *ngFor="let epersonDto of (ePeopleDto$ | async)?.page"
-                [ngClass]="{'table-primary' : (activeEPerson$ | async) === epersonDto.eperson}">
-              <td>{{epersonDto.eperson.id}}</td>
-              <td>{{ dsoNameService.getName(epersonDto.eperson) }}</td>
-              <td>{{epersonDto.eperson.email}}</td>
-              <td>
-                <div class="btn-group edit-field">
-                  <button [routerLink]="getEditEPeoplePage(epersonDto.eperson.id)"
+      @if (searching$ | async) {
+        <ds-loading></ds-loading>
+      }
+      @if ((pageInfoState$ | async)?.totalElements > 0 && (searching$ | async) !== true) {
+        <ds-pagination
+          [paginationOptions]="config"
+          [collectionSize]="(pageInfoState$ | async)?.totalElements"
+          [hideGear]="true"
+          [hidePagerWhenSinglePage]="true">
+          <div class="table-responsive">
+            <table id="epeople" class="table table-striped table-hover table-bordered">
+              <thead>
+                <tr>
+                  <th scope="col">{{labelPrefix + 'table.id' | translate}}</th>
+                  <th scope="col">{{labelPrefix + 'table.name' | translate}}</th>
+                  <th scope="col">{{labelPrefix + 'table.email' | translate}}</th>
+                  <th>{{labelPrefix + 'table.edit' | translate}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (epersonDto of (ePeopleDto$ | async)?.page; track epersonDto) {
+                  <tr
+                    [ngClass]="{'table-primary' : (activeEPerson$ | async) === epersonDto.eperson}">
+                    <td>{{epersonDto.eperson.id}}</td>
+                    <td>{{ dsoNameService.getName(epersonDto.eperson) }}</td>
+                    <td>{{epersonDto.eperson.email}}</td>
+                    <td>
+                      <div class="btn-group edit-field">
+                        <button [routerLink]="getEditEPeoplePage(epersonDto.eperson.id)"
                           class="btn btn-outline-primary btn-sm access-control-editEPersonButton"
                           title="{{labelPrefix + 'table.edit.buttons.edit' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
-                    <i class="fas fa-edit fa-fw"></i>
-                  </button>
-                  <button *ngIf="epersonDto.ableToDelete" (click)="deleteEPerson(epersonDto.eperson)"
-                          class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
-                          title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
-                    <i class="fas fa-trash-alt fa-fw"></i>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            </tbody>
-          </table>
+                          <i class="fas fa-edit fa-fw"></i>
+                        </button>
+                        @if (epersonDto.ableToDelete) {
+                          <button (click)="deleteEPerson(epersonDto.eperson)"
+                            class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
+                            title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
+                            <i class="fas fa-trash-alt fa-fw"></i>
+                          </button>
+                        }
+                      </div>
+                    </td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </ds-pagination>
+      }
+
+      @if ((pageInfoState$ | async)?.totalElements === 0) {
+        <div class="alert alert-info w-100 mb-2" role="alert">
+          {{labelPrefix + 'no-items' | translate}}
         </div>
-
-      </ds-pagination>
-
-      <div *ngIf="(pageInfoState$ | async)?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
-        {{labelPrefix + 'no-items' | translate}}
-      </div>
+      }
     </div>
   </div>
 </div>

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

@@ -27,7 +27,7 @@ import {
 import { TranslateModule } from '@ngx-translate/core';
 import {
   Observable,
-  of as observableOf,
+  of,
 } from 'rxjs';
 
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
@@ -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';
@@ -84,7 +85,7 @@ describe('EPeopleRegistryComponent', () => {
         }), this.allEpeople));
       },
       getActiveEPerson(): Observable<EPerson> {
-        return observableOf(this.activeEPerson);
+        return of(this.activeEPerson);
       },
       searchByScope(scope: string, query: string, options: FindListOptions = {}): Observable<RemoteData<PaginatedList<EPerson>>> {
         if (scope === 'email') {
@@ -128,7 +129,7 @@ describe('EPeopleRegistryComponent', () => {
         this.allEpeople = this.allEpeople.filter((ePerson2: EPerson) => {
           return (ePerson2.uuid !== ePerson.uuid);
         });
-        return observableOf(true);
+        return of(true);
       },
       editEPerson(ePerson: EPerson) {
         this.activeEPerson = ePerson;
@@ -144,14 +145,14 @@ describe('EPeopleRegistryComponent', () => {
       },
     };
     authorizationService = jasmine.createSpyObj('authorizationService', {
-      isAuthorized: observableOf(true),
+      isAuthorized: of(true),
     });
     builderService = getMockFormBuilderService();
 
     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() },
@@ -179,7 +180,7 @@ describe('EPeopleRegistryComponent', () => {
     fixture = TestBed.createComponent(EPeopleRegistryComponent);
     component = fixture.componentInstance;
     modalService = TestBed.inject(NgbModal);
-    spyOn(modalService, 'open').and.returnValue(Object.assign({ componentInstance: Object.assign({ response: observableOf(true) }) }));
+    spyOn(modalService, 'open').and.returnValue(Object.assign({ componentInstance: Object.assign({ response: of(true) }) }));
     fixture.detectChanges();
   });
 
@@ -260,7 +261,7 @@ describe('EPeopleRegistryComponent', () => {
 
 
   it('should hide delete EPerson button when the isAuthorized returns false', () => {
-    spyOn(authorizationService, 'isAuthorized').and.returnValue(observableOf(false));
+    spyOn(authorizationService, 'isAuthorized').and.returnValue(of(false));
     component.initialisePage();
     fixture.detectChanges();
 

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

@@ -1,8 +1,6 @@
 import {
   AsyncPipe,
   NgClass,
-  NgForOf,
-  NgIf,
 } from '@angular/common';
 import {
   Component,
@@ -69,16 +67,14 @@ import { EPersonFormComponent } from './eperson-form/eperson-form.component';
   selector: 'ds-epeople-registry',
   templateUrl: './epeople-registry.component.html',
   imports: [
-    TranslateModule,
-    RouterModule,
     AsyncPipe,
-    NgIf,
     EPersonFormComponent,
-    ReactiveFormsModule,
-    ThemedLoadingComponent,
-    PaginationComponent,
     NgClass,
-    NgForOf,
+    PaginationComponent,
+    ReactiveFormsModule,
+    RouterModule,
+    ThemedLoadingComponent,
+    TranslateModule,
   ],
   standalone: true,
 })

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

@@ -2,97 +2,111 @@
   <div class="group-form row">
     <div class="col-12">
 
-      <div *ngIf="activeEPerson$ | async; then editHeader; else createHeader"></div>
-
-      <ng-template #createHeader>
-        <h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
-      </ng-template>
-
-      <ng-template #editHeader>
+      @if (activeEPerson$ | async) {
         <h1 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h1>
-      </ng-template>
+      } @else {
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
+      }
+
+
 
       <ds-form [formId]="formId"
-               [formModel]="formModel"
-               [formGroup]="formGroup"
-               [formLayout]="formLayout"
-               [displayCancel]="false"
-               [submitLabel]="submitLabel"
-               (submitForm)="onSubmit()">
+        [formModel]="formModel"
+        [formGroup]="formGroup"
+        [formLayout]="formLayout"
+        [displayCancel]="false"
+        [submitLabel]="submitLabel"
+        (submitForm)="onSubmit()">
         <div before class="btn-group">
           <button (click)="onCancel()" type="button" class="btn btn-outline-secondary">
             <i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}
           </button>
         </div>
-        <div *ngIf="displayResetPassword" between class="btn-group">
-          <button class="btn btn-primary" [disabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
-            <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
+        @if (displayResetPassword) {
+          <div between class="btn-group">
+            <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>
+        }
+        @if (canImpersonate$ | async) {
+          <div between class="btn-group">
+            @if (!isImpersonated) {
+              <button class="btn btn-primary" type="button" (click)="impersonate()">
+                <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
+              </button>
+            }
+            @if (isImpersonated) {
+              <button class="btn btn-primary" type="button" (click)="stopImpersonating()">
+                <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.stop-impersonating' | translate}}
+              </button>
+            }
+          </div>
+        }
+        @if (canDelete$ | async) {
+          <button after class="btn btn-danger delete-button" type="button" (click)="delete()">
+            <i class="fas fa-trash"></i> {{'admin.access-control.epeople.actions.delete' | translate}}
           </button>
-        </div>
-        <div *ngIf="canImpersonate$ | async" between class="btn-group">
-          <button *ngIf="!isImpersonated" class="btn btn-primary" type="button" (click)="impersonate()">
-            <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
-          </button>
-          <button *ngIf="isImpersonated" class="btn btn-primary" type="button" (click)="stopImpersonating()">
-            <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.stop-impersonating' | translate}}
-          </button>
-        </div>
-        <button *ngIf="canDelete$ | async" after class="btn btn-danger delete-button" type="button" (click)="delete()">
-          <i class="fas fa-trash"></i> {{'admin.access-control.epeople.actions.delete' | translate}}
-        </button>
+        }
       </ds-form>
 
-      <ds-loading [showMessage]="false" *ngIf="!formGroup"></ds-loading>
+      @if (!formGroup) {
+        <ds-loading [showMessage]="false"></ds-loading>
+      }
 
-      <div *ngIf="activeEPerson$ | async">
-        <h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
-
-        <ds-loading [showMessage]="false" *ngIf="groups$ | async | dsHasNoValue"></ds-loading>
-
-        <ds-pagination
-          *ngIf="(groups$ | async)?.payload?.totalElements > 0"
-          [paginationOptions]="config"
-          [collectionSize]="(groups$ | async)?.payload?.totalElements"
-          [hideGear]="true"
-          [hidePagerWhenSinglePage]="true"
-          (pageChange)="onPageChange($event)">
-
-          <div class="table-responsive">
-            <table id="groups" class="table table-striped table-hover table-bordered">
-              <thead>
-              <tr>
-                <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
-                <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
-                <th scope="col" class="align-middle">{{messagePrefix + '.table.collectionOrCommunity' | translate}}</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr *ngFor="let group of (groups$ | async)?.payload?.page">
-                <td class="align-middle">{{group.id}}</td>
-                <td class="align-middle">
-                  <a (click)="groupsDataService.startEditingNewGroup(group)"
-                     [routerLink]="[groupsDataService.getGroupEditPageRouterLink(group)]">
-                    {{ dsoNameService.getName(group) }}
-                  </a>
-                </td>
-                <td class="align-middle">
-                  {{ dsoNameService.getName((group.object | async)?.payload) }}
-                </td>
-              </tr>
-              </tbody>
-            </table>
-          </div>
-
-        </ds-pagination>
-
-        <div *ngIf="(groups$ | async)?.payload?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
-          <div>{{messagePrefix + '.memberOfNoGroups' | translate}}</div>
-          <div>
-            <button [routerLink]="[groupsDataService.getGroupRegistryRouterLink()]"
-                    class="btn btn-primary">{{messagePrefix + '.goToGroups' | translate}}</button>
-          </div>
+      @if (activeEPerson$ | async) {
+        <div>
+          <h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
+          @if (groups$ | async | dsHasNoValue) {
+            <ds-loading [showMessage]="false"></ds-loading>
+          }
+          @if ((groups$ | async)?.payload?.totalElements > 0) {
+            <ds-pagination
+              [paginationOptions]="config"
+              [collectionSize]="(groups$ | async)?.payload?.totalElements"
+              [hideGear]="true"
+              [hidePagerWhenSinglePage]="true"
+              (pageChange)="onPageChange($event)">
+              <div class="table-responsive">
+                <table id="groups" class="table table-striped table-hover table-bordered">
+                  <thead>
+                    <tr>
+                      <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
+                      <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
+                      <th scope="col" class="align-middle">{{messagePrefix + '.table.collectionOrCommunity' | translate}}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (group of (groups$ | async)?.payload?.page; track group) {
+                      <tr>
+                        <td class="align-middle">{{group.id}}</td>
+                        <td class="align-middle">
+                          <a (click)="groupsDataService.startEditingNewGroup(group)"
+                            [routerLink]="[groupsDataService.getGroupEditPageRouterLink(group)]">
+                            {{ dsoNameService.getName(group) }}
+                          </a>
+                        </td>
+                        <td class="align-middle">
+                          {{ dsoNameService.getName((group.object | async)?.payload) }}
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </ds-pagination>
+          }
+          @if ((groups$ | async)?.payload?.totalElements === 0) {
+            <div class="alert alert-info w-100 mb-2" role="alert">
+              <div>{{messagePrefix + '.memberOfNoGroups' | translate}}</div>
+              <div>
+                <button [routerLink]="[groupsDataService.getGroupRegistryRouterLink()]"
+                class="btn btn-primary">{{messagePrefix + '.goToGroups' | translate}}</button>
+              </div>
+            </div>
+          }
         </div>
-      </div>
+      }
     </div>
   </div>
 </div>

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

@@ -25,7 +25,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import {
   Observable,
-  of as observableOf,
+  of,
 } from 'rxjs';
 
 import { AuthService } from '../../../core/auth/auth.service';
@@ -43,6 +43,7 @@ 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';
@@ -90,7 +91,7 @@ describe('EPersonFormComponent', () => {
       activeEPerson: null,
       allEpeople: mockEPeople,
       getActiveEPerson(): Observable<EPerson> {
-        return observableOf(this.activeEPerson);
+        return of(this.activeEPerson);
       },
       searchByScope(scope: string, query: string, options: FindListOptions = {}): Observable<RemoteData<PaginatedList<EPerson>>> {
         if (scope === 'email') {
@@ -114,7 +115,7 @@ describe('EPersonFormComponent', () => {
         this.allEpeople = this.allEpeople.filter((ePerson2: EPerson) => {
           return (ePerson2.uuid !== ePerson.uuid);
         });
-        return observableOf(true);
+        return of(true);
       },
       create(ePerson: EPerson): Observable<RemoteData<EPerson>> {
         this.allEpeople = [...this.allEpeople, ePerson];
@@ -209,7 +210,7 @@ describe('EPersonFormComponent', () => {
     });
     authService = new AuthServiceStub();
     authorizationService = jasmine.createSpyObj('authorizationService', {
-      isAuthorized: observableOf(true),
+      isAuthorized: of(true),
 
     });
     groupsDataService = jasmine.createSpyObj('groupsDataService', {
@@ -221,7 +222,7 @@ describe('EPersonFormComponent', () => {
     route = new ActivatedRouteStub();
     router = new RouterStub();
     TestBed.configureTestingModule({
-      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
+      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BtnDisabledDirective, BrowserModule,
         RouterModule.forRoot([]),
         TranslateModule.forRoot(),
         EPersonFormComponent,
@@ -388,7 +389,7 @@ describe('EPersonFormComponent', () => {
     });
     describe('without active EPerson', () => {
       beforeEach(() => {
-        spyOn(ePersonDataServiceStub, 'getActiveEPerson').and.returnValue(observableOf(undefined));
+        spyOn(ePersonDataServiceStub, 'getActiveEPerson').and.returnValue(of(undefined));
         component.onSubmit();
         fixture.detectChanges();
       });
@@ -428,7 +429,7 @@ describe('EPersonFormComponent', () => {
             },
           },
         });
-        spyOn(ePersonDataServiceStub, 'getActiveEPerson').and.returnValue(observableOf(expectedWithId));
+        spyOn(ePersonDataServiceStub, 'getActiveEPerson').and.returnValue(of(expectedWithId));
         component.ngOnInit();
         component.onSubmit();
         fixture.detectChanges();
@@ -484,10 +485,10 @@ describe('EPersonFormComponent', () => {
       spyOn(authService, 'impersonate').and.callThrough();
       eperson = EPersonMock;
       component.epersonInitial = eperson;
-      component.canDelete$ = observableOf(true);
-      spyOn(component.epersonService, 'getActiveEPerson').and.returnValue(observableOf(eperson));
+      component.canDelete$ = of(true);
+      spyOn(component.epersonService, 'getActiveEPerson').and.returnValue(of(eperson));
       modalService = (component as any).modalService;
-      spyOn(modalService, 'open').and.returnValue(Object.assign({ componentInstance: Object.assign({ response: observableOf(true) }) }));
+      spyOn(modalService, 'open').and.returnValue(Object.assign({ componentInstance: Object.assign({ response: of(true) }) }));
       component.ngOnInit();
       fixture.detectChanges();
     });
@@ -498,7 +499,7 @@ describe('EPersonFormComponent', () => {
     });
 
     it('the delete button should be hidden if the ePerson cannot be deleted', () => {
-      component.canDelete$ = observableOf(false);
+      component.canDelete$ = of(false);
       fixture.detectChanges();
       const deleteButton = fixture.debugElement.query(By.css('.delete-button'));
       expect(deleteButton).toBeNull();
@@ -516,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,9 +1,4 @@
-import {
-  AsyncPipe,
-  NgClass,
-  NgFor,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -32,7 +27,7 @@ import {
 import {
   combineLatest as observableCombineLatest,
   Observable,
-  of as observableOf,
+  of,
   Subscription,
 } from 'rxjs';
 import {
@@ -65,6 +60,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';
@@ -82,16 +78,14 @@ import { ValidateEmailNotTaken } from './validators/email-taken.validator';
   selector: 'ds-eperson-form',
   templateUrl: './eperson-form.component.html',
   imports: [
-    FormComponent,
-    NgIf,
-    NgFor,
     AsyncPipe,
-    TranslateModule,
-    NgClass,
-    ThemedLoadingComponent,
+    BtnDisabledDirective,
+    FormComponent,
+    HasNoValuePipe,
     PaginationComponent,
     RouterLink,
-    HasNoValuePipe,
+    ThemedLoadingComponent,
+    TranslateModule,
   ],
   standalone: true,
 })
@@ -363,7 +357,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
 
     this.groups$ = this.activeEPerson$.pipe(
       switchMap((eperson) => {
-        return observableCombineLatest([observableOf(eperson), this.paginationService.getFindListOptions(this.config.id, {
+        return observableCombineLatest([of(eperson), this.paginationService.getFindListOptions(this.config.id, {
           currentPage: 1,
           elementsPerPage: this.config.pageSize,
         })]);
@@ -372,7 +366,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
         if (eperson != null) {
           return this.groupsDataService.findListByHref(eperson._links.groups.href, findListOptions, true, true, followLink('object'));
         }
-        return observableOf(undefined);
+        return of(undefined);
       }),
     );
 
@@ -385,14 +379,14 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
         if (hasValue(eperson)) {
           return this.authorizationService.isAuthorized(FeatureID.LoginOnBehalfOf, eperson.self);
         } else {
-          return observableOf(false);
+          return of(false);
         }
       }),
     );
     this.canDelete$ = this.activeEPerson$.pipe(
       switchMap((eperson) => this.authorizationService.isAuthorized(FeatureID.CanDelete, hasValue(eperson) ? eperson.self : undefined)),
     );
-    this.canReset$ = observableOf(true);
+    this.canReset$ = of(true);
   }
 
   /**
@@ -546,16 +540,16 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
           take(1),
           switchMap((confirm: boolean) => {
             if (confirm && hasValue(eperson.id)) {
-              this.canDelete$ = observableOf(false);
+              this.canDelete$ = of(false);
               return this.epersonService.deleteEPerson(eperson).pipe(
                 getFirstCompletedRemoteData(),
                 map((restResponse: RemoteData<NoContent>) => ({ restResponse, eperson })),
               );
             } else {
-              return observableOf(null);
+              return of(null);
             }
           }),
-          finalize(() => this.canDelete$ = observableOf(true)),
+          finalize(() => this.canDelete$ = of(true)),
         );
       }),
     ).subscribe(({ restResponse, eperson }: { restResponse: RemoteData<NoContent> | null, eperson: EPerson }) => {

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

@@ -2,13 +2,7 @@
   <div class="group-form row">
     <div class="col-12">
 
-      <div *ngIf="activeGroup$ | async; then editHeader; else createHeader"></div>
-
-      <ng-template #createHeader>
-        <h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h1>
-      </ng-template>
-
-      <ng-template #editHeader>
+      @if (activeGroup$ | async) {
         <h1 class="border-bottom pb-2">
           <span
             *dsContextHelp="{
@@ -17,47 +11,61 @@
               iconPlacement: 'right',
               tooltipPlacement: ['right', 'bottom']
             }"
-          >
+            >
             {{messagePrefix + '.head.edit' | translate}}
           </span>
         </h1>
-      </ng-template>
+      } @else {
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h1>
+      }
 
-      <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>
+
+
+      @if ((activeGroup$ | async); as groupBeingEdited) {
+        @if (groupBeingEdited?.permanent) {
+          <ds-alert [type]="AlertType.Warning"
+          [content]="messagePrefix + '.alert.permanent'"></ds-alert>
+        }
+        @if ((activeGroupLinkedDSO$ | async); as activeGroupLinkedDSO) {
+          @if ((canEdit$ | async) !== true) {
+            <ds-alert [type]="AlertType.Warning"
+              [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: dsoNameService.getName(activeGroupLinkedDSO), comcol: activeGroupLinkedDSO.type, comcolEditRolesRoute: (linkedEditRolesRoute$ | async) })">
+            </ds-alert>
+          }
+        }
+      }
 
       <ds-form [formId]="formId"
-               [formModel]="formModel"
-               [formGroup]="formGroup"
-               [formLayout]="formLayout"
-               [displayCancel]="false"
-               (submitForm)="onSubmit()">
+        [formModel]="formModel"
+        [formGroup]="formGroup"
+        [formLayout]="formLayout"
+        [displayCancel]="false"
+        (submitForm)="onSubmit()">
         <div before class="btn-group">
           <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) && !(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>
+            class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
+          </div>
+          @if ((canEdit$ | async) && !(activeGroup$ | async)?.permanent) {
+            <div after 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>
 
-      <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>
+        @if ((activeGroup$ | async); as groupBeingEdited) {
+          <div class="mb-5">
+            @if (groupBeingEdited !== undefined) {
+              <ds-members-list
+              [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
+            }
+          </div>
+          @if (groupBeingEdited !== undefined) {
+            <ds-subgroups-list
+            [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
+          }
+        }
+      </div>
     </div>
   </div>
-</div>

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

@@ -27,7 +27,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { Operation } from 'fast-json-patch';
 import {
   Observable,
-  of as observableOf,
+  of,
 } from 'rxjs';
 
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
@@ -116,7 +116,7 @@ describe('GroupFormComponent', () => {
       activeGroup: null,
       createdGroup: null,
       getActiveGroup(): Observable<Group> {
-        return observableOf(this.activeGroup);
+        return of(this.activeGroup);
       },
       getGroupRegistryRouterLink(): string {
         return '/access-control/groups';
@@ -137,7 +137,7 @@ describe('GroupFormComponent', () => {
         this.activeGroup = null;
       },
       findById(id: string) {
-        return observableOf({ payload: null, hasSucceeded: true });
+        return of({ payload: null, hasSucceeded: true });
       },
       findByHref(href: string) {
         return createSuccessfulRemoteDataObject$(this.createdGroup);
@@ -164,7 +164,7 @@ describe('GroupFormComponent', () => {
       },
     };
     authorizationService = jasmine.createSpyObj('authorizationService', {
-      isAuthorized: observableOf(true),
+      isAuthorized: of(true),
     });
     dsoDataServiceStub = {
       findByHref(href: string): Observable<RemoteData<DSpaceObject>> {
@@ -330,7 +330,7 @@ describe('GroupFormComponent', () => {
             },
           },
         });
-        spyOn(groupsDataServiceStub, 'getActiveGroup').and.returnValue(observableOf(expected));
+        spyOn(groupsDataServiceStub, 'getActiveGroup').and.returnValue(of(expected));
         spyOn(groupsDataServiceStub, 'patch').and.returnValue(createSuccessfulRemoteDataObject$(expected2));
         component.ngOnInit();
       });
@@ -417,7 +417,7 @@ describe('GroupFormComponent', () => {
         },
       });
       spyOn(component.submitForm, 'emit');
-      spyOn(dsoDataServiceStub, 'findByHref').and.returnValue(observableOf(expected));
+      spyOn(dsoDataServiceStub, 'findByHref').and.returnValue(of(expected));
 
       fixture.detectChanges();
       component.initialisePage();
@@ -471,11 +471,11 @@ describe('GroupFormComponent', () => {
 
     beforeEach(async () => {
       spyOn(groupsDataServiceStub, 'delete').and.callThrough();
-      component.activeGroup$ = observableOf({
+      component.activeGroup$ = of({
         id: 'active-group',
         permanent: false,
       } as Group);
-      component.canEdit$ = observableOf(true);
+      component.canEdit$ = of(true);
 
       component.initialisePage();
 

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

@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -90,14 +87,13 @@ import { ValidateGroupExists } from './validators/group-exists.validator';
   selector: 'ds-group-form',
   templateUrl: './group-form.component.html',
   imports: [
-    FormComponent,
     AlertComponent,
-    NgIf,
     AsyncPipe,
-    TranslateModule,
     ContextHelpDirective,
+    FormComponent,
     MembersListComponent,
     SubgroupsListComponent,
+    TranslateModule,
   ],
   standalone: true,
 })

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

@@ -3,63 +3,70 @@
 
   <h3>{{messagePrefix + '.headMembers' | translate}}</h3>
 
-  <ds-pagination *ngIf="(ePeopleMembersOfGroup | async)?.totalElements > 0"
-                 [paginationOptions]="config"
-                 [collectionSize]="(ePeopleMembersOfGroup | async)?.totalElements"
-                 [hideGear]="true"
-                 [hidePagerWhenSinglePage]="true">
+  @if ((ePeopleMembersOfGroup | async)?.totalElements > 0) {
+    <ds-pagination
+      [paginationOptions]="config"
+      [collectionSize]="(ePeopleMembersOfGroup | async)?.totalElements"
+      [hideGear]="true"
+      [hidePagerWhenSinglePage]="true">
+      <div class="table-responsive">
+        <table id="ePeopleMembersOfGroup" class="table table-striped table-hover table-bordered">
+          <thead>
+            <tr>
+              <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
+              <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
+              <th scope="col" class="align-middle">{{messagePrefix + '.table.identity' | translate}}</th>
+              <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (epersonDTO of (ePeopleMembersOfGroup | async)?.page; track epersonDTO) {
+              <tr>
+                <td class="align-middle">{{epersonDTO.eperson.id}}</td>
+                <td class="align-middle">
+                  <a [routerLink]="getEPersonEditRoute(epersonDTO.eperson.id)">
+                    {{ dsoNameService.getName(epersonDTO.eperson) }}
+                  </a>
+                </td>
+                <td class="align-middle">
+                  {{messagePrefix + '.table.email' | translate}}: {{ epersonDTO.eperson.email ? epersonDTO.eperson.email : '-' }}<br/>
+                  {{messagePrefix + '.table.netid' | translate}}: {{ epersonDTO.eperson.netid ? epersonDTO.eperson.netid : '-' }}
+                </td>
+                <td class="align-middle">
+                  <div class="btn-group edit-field">
+                    @if (epersonDTO.ableToDelete) {
+                      <button (click)="deleteMemberFromGroup(epersonDTO.eperson)"
+                        [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>
+                    }
+                    @if (!epersonDTO.ableToDelete) {
+                      <button
+                        (click)="addMemberToGroup(epersonDTO.eperson)"
+                        [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>
+                      </button>
+                    }
+                  </div>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </ds-pagination>
+  }
 
-    <div class="table-responsive">
-      <table id="ePeopleMembersOfGroup" class="table table-striped table-hover table-bordered">
-        <thead>
-        <tr>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.identity' | translate}}</th>
-          <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let epersonDTO of (ePeopleMembersOfGroup | async)?.page">
-          <td class="align-middle">{{epersonDTO.eperson.id}}</td>
-          <td class="align-middle">
-            <a [routerLink]="getEPersonEditRoute(epersonDTO.eperson.id)">
-              {{ dsoNameService.getName(epersonDTO.eperson) }}
-            </a>
-          </td>
-          <td class="align-middle">
-            {{messagePrefix + '.table.email' | translate}}: {{ epersonDTO.eperson.email ? epersonDTO.eperson.email : '-' }}<br/>
-            {{messagePrefix + '.table.netid' | translate}}: {{ epersonDTO.eperson.netid ? epersonDTO.eperson.netid : '-' }}
-          </td>
-          <td class="align-middle">
-            <div class="btn-group edit-field">
-              <button (click)="deleteMemberFromGroup(epersonDTO.eperson)"
-                      *ngIf="epersonDTO.ableToDelete"
-                      [disabled]="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"
-                      [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>
-              </button>
-            </div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
+  @if ((ePeopleMembersOfGroup | async) === undefined || (ePeopleMembersOfGroup | async)?.totalElements === 0) {
+    <div class="alert alert-info w-100 mb-2"
+      role="alert">
+      {{messagePrefix + '.no-members-yet' | translate}}
     </div>
-
-  </ds-pagination>
-
-  <div *ngIf="(ePeopleMembersOfGroup | async) === undefined || (ePeopleMembersOfGroup | async)?.totalElements === 0" class="alert alert-info w-100 mb-2"
-       role="alert">
-    {{messagePrefix + '.no-members-yet' | translate}}
-  </div>
+  }
 
   <h3 id="search" class="border-bottom pb-2">
     <span
@@ -69,77 +76,81 @@
         iconPlacement: 'right',
         tooltipPlacement: ['top', 'right', 'bottom']
       }"
-    >
+      >
       {{messagePrefix + '.search.head' | translate}}
     </span>
   </h3>
 
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
-    <div class="flex-grow-1 mr-3">
-      <div class="form-group input-group mr-3">
+    <div class="flex-grow-1 me-3">
+      <div class="mb-3 input-group me-3">
         <input type="text" name="query" id="query" formControlName="query"
-               class="form-control" aria-label="Search input">
+          class="form-control" aria-label="Search input">
         <span class="input-group-append">
-            <button type="submit" class="search-button btn btn-primary">
-              <i class="fas fa-search"></i> {{ messagePrefix + '.search.button' | translate }}</button>
-        </span>
+          <button type="submit" class="search-button btn btn-primary">
+            <i class="fas fa-search"></i> {{ messagePrefix + '.search.button' | translate }}</button>
+          </span>
+        </div>
       </div>
-    </div>
-    <div>
-      <button (click)="clearFormAndResetResult();"
-              class="btn btn-secondary">{{messagePrefix + '.button.see-all' | translate}}</button>
-    </div>
-  </form>
+      <div>
+        <button (click)="clearFormAndResetResult();"
+        class="btn btn-secondary">{{messagePrefix + '.button.see-all' | translate}}</button>
+      </div>
+    </form>
 
-  <ds-pagination *ngIf="(ePeopleSearch | async)?.totalElements > 0"
-                 [paginationOptions]="configSearch"
-                 [collectionSize]="(ePeopleSearch | async)?.totalElements"
-                 [hideGear]="true"
-                 [hidePagerWhenSinglePage]="true">
+    @if ((ePeopleSearch | async)?.totalElements > 0) {
+      <ds-pagination
+        [paginationOptions]="configSearch"
+        [collectionSize]="(ePeopleSearch | async)?.totalElements"
+        [hideGear]="true"
+        [hidePagerWhenSinglePage]="true">
+        <div class="table-responsive">
+          <table id="epersonsSearch" class="table table-striped table-hover table-bordered">
+            <thead>
+              <tr>
+                <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
+                <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
+                <th scope="col" class="align-middle">{{messagePrefix + '.table.identity' | translate}}</th>
+                <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (eperson of (ePeopleSearch | async)?.page; track eperson) {
+                <tr>
+                  <td class="align-middle">{{eperson.id}}</td>
+                  <td class="align-middle">
+                    <a [routerLink]="getEPersonEditRoute(eperson.id)">
+                      {{ dsoNameService.getName(eperson) }}
+                    </a>
+                  </td>
+                  <td class="align-middle">
+                    {{messagePrefix + '.table.email' | translate}}: {{ eperson.email ? eperson.email : '-' }}<br/>
+                    {{messagePrefix + '.table.netid' | translate}}: {{ eperson.netid ? eperson.netid : '-' }}
+                  </td>
+                  <td class="align-middle">
+                    <div class="btn-group edit-field">
+                      <button (click)="addMemberToGroup(eperson)"
+                        [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>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      </ds-pagination>
+    }
 
-    <div class="table-responsive">
-      <table id="epersonsSearch" class="table table-striped table-hover table-bordered">
-        <thead>
-        <tr>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.identity' | translate}}</th>
-          <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let eperson of (ePeopleSearch | async)?.page">
-          <td class="align-middle">{{eperson.id}}</td>
-          <td class="align-middle">
-            <a [routerLink]="getEPersonEditRoute(eperson.id)">
-              {{ dsoNameService.getName(eperson) }}
-            </a>
-          </td>
-          <td class="align-middle">
-            {{messagePrefix + '.table.email' | translate}}: {{ eperson.email ? eperson.email : '-' }}<br/>
-            {{messagePrefix + '.table.netid' | translate}}: {{ eperson.netid ? eperson.netid : '-' }}
-          </td>
-          <td class="align-middle">
-            <div class="btn-group edit-field">
-              <button (click)="addMemberToGroup(eperson)"
-                      [disabled]="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>
-              </button>
-            </div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
+    @if ((ePeopleSearch | async)?.totalElements === 0 && searchDone) {
+      <div
+        class="alert alert-info w-100 mb-2"
+        role="alert">
+        {{messagePrefix + '.no-items' | translate}}
+      </div>
+    }
 
-  </ds-pagination>
-
-  <div *ngIf="(ePeopleSearch | async)?.totalElements === 0 && searchDone"
-       class="alert alert-info w-100 mb-2"
-       role="alert">
-    {{messagePrefix + '.no-items' | translate}}
-  </div>
-
-</ng-container>
+  </ng-container>

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

@@ -32,7 +32,7 @@ import {
 } from '@ngx-translate/core';
 import {
   Observable,
-  of as observableOf,
+  of,
 } from 'rxjs';
 
 import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
@@ -113,7 +113,7 @@ describe('MembersListComponent', () => {
       epersonMembers: epersonMembers,
       epersonNonMembers: epersonNonMembers,
       getActiveGroup(): Observable<Group> {
-        return observableOf(activeGroup);
+        return of(activeGroup);
       },
       getEPersonMembers() {
         return this.epersonMembers;
@@ -127,7 +127,7 @@ describe('MembersListComponent', () => {
             this.epersonNonMembers.splice(index, 1);
           }
         });
-        return observableOf(new RestResponse(true, 200, 'Success'));
+        return of(new RestResponse(true, 200, 'Success'));
       },
       clearGroupsRequests() {
         // empty
@@ -147,7 +147,7 @@ describe('MembersListComponent', () => {
         });
         // Add eperson to list of non-members
         this.epersonNonMembers = [...this.epersonNonMembers, epersonToDelete];
-        return observableOf(new RestResponse(true, 200, 'Success'));
+        return of(new RestResponse(true, 200, 'Success'));
       },
     };
     builderService = getMockFormBuilderService();

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

@@ -1,8 +1,6 @@
 import {
   AsyncPipe,
   NgClass,
-  NgForOf,
-  NgIf,
 } from '@angular/common';
 import {
   Component,
@@ -27,7 +25,7 @@ import {
   combineLatest as observableCombineLatest,
   Observable,
   ObservedValueOf,
-  of as observableOf,
+  of,
   Subscription,
 } from 'rxjs';
 import {
@@ -54,6 +52,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';
@@ -104,15 +103,14 @@ export interface EPersonListActionConfig {
   selector: 'ds-members-list',
   templateUrl: './members-list.component.html',
   imports: [
-    TranslateModule,
-    ContextHelpDirective,
-    ReactiveFormsModule,
-    PaginationComponent,
-    NgIf,
     AsyncPipe,
-    RouterLink,
+    BtnDisabledDirective,
+    ContextHelpDirective,
     NgClass,
-    NgForOf,
+    PaginationComponent,
+    ReactiveFormsModule,
+    RouterLink,
+    TranslateModule,
   ],
   standalone: true,
 })
@@ -262,7 +260,7 @@ export class MembersListComponent implements OnInit, OnDestroy {
    * @param possibleMember  EPerson that is a possible member (being tested) of the group currently being edited
    */
   isMemberOfGroup(possibleMember: EPerson): Observable<boolean> {
-    return observableOf(true);
+    return of(true);
   }
 
   /**

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

@@ -3,51 +3,56 @@
 
   <h4>{{messagePrefix + '.headSubgroups' | translate}}</h4>
 
-  <ds-pagination *ngIf="(subGroups$ | async)?.payload?.totalElements > 0"
-                 [paginationOptions]="config"
-                 [collectionSize]="(subGroups$ | async)?.payload?.totalElements"
-                 [hideGear]="true"
-                 [hidePagerWhenSinglePage]="true">
-
-    <div class="table-responsive">
-      <table id="subgroupsOfGroup" class="table table-striped table-hover table-bordered">
-        <thead>
-        <tr>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.collectionOrCommunity' | translate}}</th>
-          <th>{{messagePrefix + '.table.edit' | translate}}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let group of (subGroups$ | async)?.payload?.page">
-          <td class="align-middle">{{group.id}}</td>
-          <td class="align-middle">
-            <a (click)="groupDataService.startEditingNewGroup(group)"
-               [routerLink]="[groupDataService.getGroupEditPageRouterLink(group)]">
-            {{ dsoNameService.getName(group) }}
-          </a>
-          </td>
-          <td class="align-middle">{{ dsoNameService.getName((group.object | async)?.payload)}}</td>
-          <td class="align-middle">
-            <div class="btn-group edit-field">
-              <button (click)="deleteSubgroupFromGroup(group)"
+  @if ((subGroups$ | async)?.payload?.totalElements > 0) {
+    <ds-pagination
+      [paginationOptions]="config"
+      [collectionSize]="(subGroups$ | async)?.payload?.totalElements"
+      [hideGear]="true"
+      [hidePagerWhenSinglePage]="true">
+      <div class="table-responsive">
+        <table id="subgroupsOfGroup" class="table table-striped table-hover table-bordered">
+          <thead>
+            <tr>
+              <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
+              <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
+              <th scope="col" class="align-middle">{{messagePrefix + '.table.collectionOrCommunity' | translate}}</th>
+              <th>{{messagePrefix + '.table.edit' | translate}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (group of (subGroups$ | async)?.payload?.page; track group) {
+              <tr>
+                <td class="align-middle">{{group.id}}</td>
+                <td class="align-middle">
+                  <a (click)="groupDataService.startEditingNewGroup(group)"
+                    [routerLink]="[groupDataService.getGroupEditPageRouterLink(group)]">
+                    {{ dsoNameService.getName(group) }}
+                  </a>
+                </td>
+                <td class="align-middle">{{ dsoNameService.getName((group.object | async)?.payload)}}</td>
+                <td class="align-middle">
+                  <div class="btn-group edit-field">
+                    <button (click)="deleteSubgroupFromGroup(group)"
                       class="btn btn-outline-danger btn-sm deleteButton"
                       title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(group) } }}">
-                <i class="fas fa-trash-alt fa-fw"></i>
-              </button>
-            </div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-  </ds-pagination>
+                      <i class="fas fa-trash-alt fa-fw"></i>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </ds-pagination>
+  }
 
-  <div *ngIf="(subGroups$ | async)?.payload?.totalElements === 0" class="alert alert-info w-100 mb-2"
-       role="alert">
-    {{messagePrefix + '.no-subgroups-yet' | translate}}
-  </div>
+  @if ((subGroups$ | async)?.payload?.totalElements === 0) {
+    <div class="alert alert-info w-100 mb-2"
+      role="alert">
+      {{messagePrefix + '.no-subgroups-yet' | translate}}
+    </div>
+  }
 
   <h4 id="search" class="border-bottom pb-2">
     <span *dsContextHelp="{
@@ -56,75 +61,80 @@
             iconPlacement: 'right',
             tooltipPlacement: ['top', 'right', 'bottom']
           }"
-    >
+      >
       {{messagePrefix + '.search.head' | translate}}
     </span>
 
   </h4>
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
-    <div class="flex-grow-1 mr-3">
-      <div class="form-group input-group mr-3">
+    <div class="flex-grow-1 me-3">
+      <div class="mb-3 input-group me-3">
         <input type="text" name="query" id="query" formControlName="query"
-               class="form-control" aria-label="Search input">
+          class="form-control" aria-label="Search input">
         <span class="input-group-append">
-            <button type="submit" class="search-button btn btn-primary">
-              <i class="fas fa-search"></i> {{ messagePrefix + '.search.button' | translate }}
-            </button>
+          <button type="submit" class="search-button btn btn-primary">
+            <i class="fas fa-search"></i> {{ messagePrefix + '.search.button' | translate }}
+          </button>
         </span>
 
       </div>
     </div>
     <div>
-      <button (click)="clearFormAndResetResult();" class="btn btn-secondary float-right">
+      <button (click)="clearFormAndResetResult();" class="btn btn-secondary float-end">
         {{messagePrefix + '.button.see-all' | translate}}
       </button>
     </div>
   </form>
 
-  <ds-pagination *ngIf="(searchResults$ | async)?.payload?.totalElements > 0"
-                 [paginationOptions]="configSearch"
-                 [collectionSize]="(searchResults$ | async)?.payload?.totalElements"
-                 [hideGear]="true"
-                 [hidePagerWhenSinglePage]="true">
-
-    <div class="table-responsive">
-      <table id="groupsSearch" class="table table-striped table-hover table-bordered">
-        <thead>
-        <tr>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.collectionOrCommunity' | translate}}</th>
-          <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let group of (searchResults$ | async)?.payload?.page">
-          <td class="align-middle">{{group.id}}</td>
-          <td class="align-middle">
-            <a (click)="groupDataService.startEditingNewGroup(group)"
-               [routerLink]="[groupDataService.getGroupEditPageRouterLink(group)]">
-              {{ dsoNameService.getName(group) }}
-            </a>
-          </td>
-          <td class="align-middle">{{ dsoNameService.getName((group.object | async)?.payload) }}</td>
-          <td class="align-middle">
-            <div class="btn-group edit-field">
-              <button (click)="addSubgroupToGroup(group)"
+  @if ((searchResults$ | async)?.payload?.totalElements > 0) {
+    <ds-pagination
+      [paginationOptions]="configSearch"
+      [collectionSize]="(searchResults$ | async)?.payload?.totalElements"
+      [hideGear]="true"
+      [hidePagerWhenSinglePage]="true">
+      <div class="table-responsive">
+        <table id="groupsSearch" class="table table-striped table-hover table-bordered">
+          <thead>
+            <tr>
+              <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
+              <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
+              <th scope="col" class="align-middle">{{messagePrefix + '.table.collectionOrCommunity' | translate}}</th>
+              <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (group of (searchResults$ | async)?.payload?.page; track group) {
+              <tr>
+                <td class="align-middle">{{group.id}}</td>
+                <td class="align-middle">
+                  <a (click)="groupDataService.startEditingNewGroup(group)"
+                    [routerLink]="[groupDataService.getGroupEditPageRouterLink(group)]">
+                    {{ dsoNameService.getName(group) }}
+                  </a>
+                </td>
+                <td class="align-middle">{{ dsoNameService.getName((group.object | async)?.payload) }}</td>
+                <td class="align-middle">
+                  <div class="btn-group edit-field">
+                    <button (click)="addSubgroupToGroup(group)"
                       class="btn btn-outline-primary btn-sm addButton"
                       title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(group) } }}">
-                <i class="fas fa-plus fa-fw"></i>
-              </button>
-            </div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-  </ds-pagination>
+                      <i class="fas fa-plus fa-fw"></i>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </ds-pagination>
+  }
 
-  <div *ngIf="(searchResults$ | async)?.payload?.totalElements === 0 && searchDone" class="alert alert-info w-100 mb-2"
-       role="alert">
-    {{messagePrefix + '.no-items' | translate}}
-  </div>
+  @if ((searchResults$ | async)?.payload?.totalElements === 0 && searchDone) {
+    <div class="alert alert-info w-100 mb-2"
+      role="alert">
+      {{messagePrefix + '.no-items' | translate}}
+    </div>
+  }
 
 </ng-container>

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

@@ -31,7 +31,7 @@ import {
 } from '@ngx-translate/core';
 import {
   Observable,
-  of as observableOf,
+  of,
 } from 'rxjs';
 import { EPersonMock2 } from 'src/app/shared/testing/eperson.mock';
 
@@ -108,7 +108,7 @@ describe('SubgroupsListComponent', () => {
       subgroups: subgroups,
       groupNonMembers: groupNonMembers,
       getActiveGroup(): Observable<Group> {
-        return observableOf(this.activeGroup);
+        return of(this.activeGroup);
       },
       getSubgroups(): Group {
         return this.subgroups;
@@ -138,7 +138,7 @@ describe('SubgroupsListComponent', () => {
             this.groupNonMembers.splice(index, 1);
           }
         });
-        return observableOf(new RestResponse(true, 200, 'Success'));
+        return of(new RestResponse(true, 200, 'Success'));
       },
       clearGroupsRequests() {
         // empty
@@ -155,7 +155,7 @@ describe('SubgroupsListComponent', () => {
         });
         // Add group to list of non-members
         this.groupNonMembers = [...this.groupNonMembers, subgroupToDelete];
-        return observableOf(new RestResponse(true, 200, 'Success'));
+        return of(new RestResponse(true, 200, 'Success'));
       },
     };
     routerStub = new RouterMock();

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

@@ -1,8 +1,4 @@
-import {
-  AsyncPipe,
-  NgForOf,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   Input,
@@ -63,14 +59,12 @@ enum SubKey {
   selector: 'ds-subgroups-list',
   templateUrl: './subgroups-list.component.html',
   imports: [
-    RouterLink,
     AsyncPipe,
-    NgForOf,
     ContextHelpDirective,
-    TranslateModule,
-    ReactiveFormsModule,
     PaginationComponent,
-    NgIf,
+    ReactiveFormsModule,
+    RouterLink,
+    TranslateModule,
   ],
   standalone: true,
 })

src/app/access-control/group-registry/group-page.guard.spec.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/router';
 import {
   Observable,
-  of as observableOf,
+  of,
 } from 'rxjs';
 
 import { AuthService } from '../../core/auth/auth.service';
@@ -37,7 +37,7 @@ describe('GroupPageGuard', () => {
 
   function init() {
     halEndpointService = jasmine.createSpyObj(['getEndpoint']);
-    ( halEndpointService as any ).getEndpoint.and.returnValue(observableOf(groupsEndpointUrl));
+    ( halEndpointService as any ).getEndpoint.and.returnValue(of(groupsEndpointUrl));
 
     authorizationService = jasmine.createSpyObj(['isAuthorized']);
     // NOTE: value is set in beforeEach
@@ -46,7 +46,7 @@ describe('GroupPageGuard', () => {
     ( router as any ).parseUrl.and.returnValue = {};
 
     authService = jasmine.createSpyObj(['isAuthenticated']);
-    ( authService as any ).isAuthenticated.and.returnValue(observableOf(true));
+    ( authService as any ).isAuthenticated.and.returnValue(of(true));
 
     TestBed.configureTestingModule({
       providers: [
@@ -69,7 +69,7 @@ describe('GroupPageGuard', () => {
   describe('canActivate', () => {
     describe('when the current user can manage the group', () => {
       beforeEach(() => {
-        ( authorizationService as any ).isAuthorized.and.returnValue(observableOf(true));
+        ( authorizationService as any ).isAuthorized.and.returnValue(of(true));
       });
 
       it('should return true', (done) => {
@@ -89,7 +89,7 @@ describe('GroupPageGuard', () => {
 
     describe('when the current user can not manage the group', () => {
       beforeEach(() => {
-        (authorizationService as any).isAuthorized.and.returnValue(observableOf(false));
+        (authorizationService as any).isAuthorized.and.returnValue(of(false));
       });
 
       it('should not return true', (done) => {

src/app/access-control/group-registry/group-page.guard.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/router';
 import {
   Observable,
-  of as observableOf,
+  of,
 } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -33,6 +33,6 @@ export const groupPageGuard = (
   getObjectUrl = defaultGroupPageGetObjectUrl,
   getEPersonUuid?: StringGuardParamFn,
 ): CanActivateFn => someFeatureAuthorizationGuard(
-  () => observableOf([FeatureID.CanManageGroup]),
+  () => of([FeatureID.CanManageGroup]),
   getObjectUrl,
   getEPersonUuid);

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

@@ -4,21 +4,21 @@
       <div class="d-flex justify-content-between border-bottom mb-3">
         <h1 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h1>
         <div>
-          <button class="mr-auto btn btn-success"
-                  [routerLink]="'create'">
+          <button class="me-auto btn btn-success"
+            [routerLink]="'create'">
             <i class="fas fa-plus"></i>
-            <span class="d-none d-sm-inline ml-1">{{messagePrefix + 'button.add' | translate}}</span>
+            <span class="d-none d-sm-inline ms-1">{{messagePrefix + 'button.add' | translate}}</span>
           </button>
         </div>
       </div>
 
       <h2 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
-        <div class="flex-grow-1 mr-3">
-          <div class="form-group input-group">
+        <div class="flex-grow-1 me-3">
+          <div class="mb-3 input-group">
             <input type="text" name="query" id="query" formControlName="query"
-                   class="form-control" [attr.aria-label]="messagePrefix + 'search.placeholder' | translate"
-                   [placeholder]="(messagePrefix + 'search.placeholder' | translate)" >
+              class="form-control" [attr.aria-label]="messagePrefix + 'search.placeholder' | translate"
+              [placeholder]="(messagePrefix + 'search.placeholder' | translate)" >
             <span class="input-group-append">
               <button type="submit" class="search-button btn btn-primary">
                 <i class="fas fa-search"></i> {{ messagePrefix + 'search.button' | translate }}
@@ -33,66 +33,78 @@
         </div>
       </form>
 
-      <ds-loading *ngIf="loading$ | async"></ds-loading>
-      <ds-pagination
-        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && (loading$ | async) !== true"
-        [paginationOptions]="config"
-        [collectionSize]="(pageInfoState$ | async)?.totalElements"
-        [hideGear]="true"
-        [hidePagerWhenSinglePage]="true">
+      @if (loading$ | async) {
+        <ds-loading></ds-loading>
+      }
+      @if ((pageInfoState$ | async)?.totalElements > 0 && (loading$ | async) !== true) {
+        <ds-pagination
+          [paginationOptions]="config"
+          [collectionSize]="(pageInfoState$ | async)?.totalElements"
+          [hideGear]="true"
+          [hidePagerWhenSinglePage]="true">
+          <div  class="table-responsive">
+            <table id="groups" class="table table-striped table-hover table-bordered">
+              <thead>
+                <tr>
+                  <th scope="col">{{messagePrefix + 'table.id' | translate}}</th>
+                  <th scope="col">{{messagePrefix + 'table.name' | translate}}</th>
+                  <th scope="col">{{messagePrefix + 'table.collectionOrCommunity' | translate}}</th>
+                  <th scope="col">{{messagePrefix + 'table.members' | translate}}</th>
+                  <th>{{messagePrefix + 'table.edit' | translate}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (groupDto of (groupsDto$ | async)?.page; track groupDto) {
+                  <tr>
+                    <td>{{groupDto.group.id}}</td>
+                    <td>{{ dsoNameService.getName(groupDto.group) }}</td>
+                    <td>{{ dsoNameService.getName((groupDto.group.object | async)?.payload) }}</td>
+                    <td>{{groupDto.epersons?.totalElements + groupDto.subgroups?.totalElements}}</td>
+                    <td>
+                      <div class="btn-group edit-field">
+                        @switch (groupDto.ableToEdit) {
+                          @case (true) {
+                            <button
+                              [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
+                              class="btn btn-outline-primary btn-sm btn-edit"
+                              title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: dsoNameService.getName(groupDto.group) } }}"
+                              >
+                              <i class="fas fa-edit fa-fw"></i>
+                            </button>
+                          }
+                          @case (false) {
+                            <button
+                              [dsBtnDisabled]="true"
+                              class="btn btn-outline-primary btn-sm btn-edit"
+                              placement="left"
+                              [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"
+                              >
+                              <i class="fas fa-edit fa-fw"></i>
+                            </button>
+                          }
+                        }
+                        @if (!groupDto.group?.permanent && groupDto.ableToDelete) {
+                          <button
+                            (click)="confirmDelete(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
+                            title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: dsoNameService.getName(groupDto.group) } }}">
+                            <i class="fas fa-trash-alt fa-fw"></i>
+                          </button>
+                        }
+                      </div>
+                    </td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </ds-pagination>
+      }
 
-        <div  class="table-responsive">
-          <table id="groups" class="table table-striped table-hover table-bordered">
-            <thead>
-            <tr>
-              <th scope="col">{{messagePrefix + 'table.id' | translate}}</th>
-              <th scope="col">{{messagePrefix + 'table.name' | translate}}</th>
-              <th scope="col">{{messagePrefix + 'table.collectionOrCommunity' | translate}}</th>
-              <th scope="col">{{messagePrefix + 'table.members' | translate}}</th>
-              <th>{{messagePrefix + 'table.edit' | translate}}</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr *ngFor="let groupDto of (groupsDto$ | async)?.page">
-              <td>{{groupDto.group.id}}</td>
-              <td>{{ dsoNameService.getName(groupDto.group) }}</td>
-              <td>{{ dsoNameService.getName((groupDto.group.object | async)?.payload) }}</td>
-              <td>{{groupDto.epersons?.totalElements + groupDto.subgroups?.totalElements}}</td>
-              <td>
-                <div class="btn-group edit-field">
-                  <ng-container [ngSwitch]="groupDto.ableToEdit">
-                    <button *ngSwitchCase="true"
-                      [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
-                      class="btn btn-outline-primary btn-sm btn-edit"
-                      title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: dsoNameService.getName(groupDto.group) } }}"
-                    >
-                      <i class="fas fa-edit fa-fw"></i>
-                    </button>
-                    <button *ngSwitchCase="false"
-                      [disabled]="true"
-                      class="btn btn-outline-primary btn-sm btn-edit"
-                      placement="left"
-                      [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"
-                    >
-                      <i class="fas fa-edit fa-fw"></i>
-                    </button>
-                  </ng-container>
-                  <button *ngIf="!groupDto.group?.permanent && groupDto.ableToDelete"
-                          (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
-                          title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: dsoNameService.getName(groupDto.group) } }}">
-                    <i class="fas fa-trash-alt fa-fw"></i>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            </tbody>
-          </table>
+      @if ((pageInfoState$ | async)?.totalElements === 0) {
+        <div class="alert alert-info w-100 mb-2" role="alert">
+          {{messagePrefix + 'no-items' | translate}}
         </div>
-      </ds-pagination>
-
-      <div *ngIf="(pageInfoState$ | async)?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
-        {{messagePrefix + 'no-items' | translate}}
-      </div>
+      }
 
     </div>
   </div>

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

@@ -25,7 +25,6 @@ import { provideMockStore } from '@ngrx/store/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import {
   Observable,
-  of as observableOf,
   of,
 } from 'rxjs';
 
@@ -50,6 +49,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,
@@ -94,11 +94,11 @@ describe('GroupsRegistryComponent', () => {
     (authorizationService as any).isAuthorized.and.callFake((featureId?: FeatureID) => {
       switch (featureId) {
         case FeatureID.AdministratorOf:
-          return observableOf(isAdmin);
+          return of(isAdmin);
         case FeatureID.CanManageGroup:
-          return observableOf(canManageGroup);
+          return of(canManageGroup);
         case FeatureID.CanDelete:
-          return observableOf(true);
+          return of(true);
         default:
           throw new Error(`setIsAuthorized: this fake implementation does not support ${featureId}.`);
       }
@@ -208,6 +208,7 @@ describe('GroupsRegistryComponent', () => {
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot(),
         GroupsRegistryComponent,
+        BtnDisabledDirective,
       ],
       providers: [GroupsRegistryComponent,
         { provide: DSONameService, useValue: new DSONameServiceMock() },
@@ -278,7 +279,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 +314,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 +334,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();
         });
       });
     });
@@ -377,6 +381,8 @@ describe('GroupsRegistryComponent', () => {
       deleteButton.click();
       fixture.detectChanges();
 
+      (document as any).querySelector('.modal-footer .confirm').click();
+
       expect(groupsDataServiceStub.delete).toHaveBeenCalledWith(mockGroups[0].id);
     });
   });

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

@@ -1,10 +1,4 @@
-import {
-  AsyncPipe,
-  NgForOf,
-  NgIf,
-  NgSwitch,
-  NgSwitchCase,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   OnDestroy,
@@ -15,7 +9,10 @@ import {
   UntypedFormBuilder,
 } from '@angular/forms';
 import { RouterLink } from '@angular/router';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbModal,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap';
 import {
   TranslateModule,
   TranslateService,
@@ -25,7 +22,7 @@ import {
   combineLatest as observableCombineLatest,
   EMPTY,
   Observable,
-  of as observableOf,
+  of,
   Subscription,
 } from 'rxjs';
 import {
@@ -33,6 +30,7 @@ import {
   defaultIfEmpty,
   map,
   switchMap,
+  takeUntil,
   tap,
 } from 'rxjs/operators';
 
@@ -62,6 +60,8 @@ import {
   getRemoteDataPayload,
 } from '../../core/shared/operators';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
+import { ConfirmationModalComponent } from '../../shared/confirmation-modal/confirmation-modal.component';
 import { hasValue } from '../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -73,17 +73,14 @@ import { followLink } from '../../shared/utils/follow-link-config.model';
   selector: 'ds-groups-registry',
   templateUrl: './groups-registry.component.html',
   imports: [
+    AsyncPipe,
+    BtnDisabledDirective,
+    NgbTooltipModule,
+    PaginationComponent,
+    ReactiveFormsModule,
+    RouterLink,
     ThemedLoadingComponent,
     TranslateModule,
-    RouterLink,
-    ReactiveFormsModule,
-    AsyncPipe,
-    NgIf,
-    PaginationComponent,
-    NgSwitch,
-    NgSwitchCase,
-    NgbTooltipModule,
-    NgForOf,
   ],
   standalone: true,
 })
@@ -150,6 +147,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
               private paginationService: PaginationService,
               public requestService: RequestService,
               public dsoNameService: DSONameService,
+              private modalService: NgbModal,
   ) {
     this.currentSearchQuery = '';
     this.searchForm = this.formBuilder.group(({
@@ -187,7 +185,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
       getRemoteDataPayload(),
       switchMap((groups: PaginatedList<Group>) => {
         if (groups.page.length === 0) {
-          return observableOf(buildPaginatedList(groups.pageInfo, []));
+          return of(buildPaginatedList(groups.pageInfo, []));
         }
         return this.authorizationService.isAuthorized(FeatureID.AdministratorOf).pipe(
           switchMap((isSiteAdmin: boolean) => {
@@ -232,7 +230,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
 
   canManageGroup$(isSiteAdmin: boolean, group: Group): Observable<boolean> {
     if (isSiteAdmin) {
-      return observableOf(true);
+      return of(true);
     } else {
       return this.authorizationService.isAuthorized(FeatureID.CanManageGroup, group.self);
     }
@@ -291,7 +289,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
     return this.dSpaceObjectDataService.findByHref(group._links.object.href).pipe(
       getFirstSucceededRemoteData(),
       map((rd: RemoteData<DSpaceObject>) => hasValue(rd) && hasValue(rd.payload)),
-      catchError(() => observableOf(false)),
+      catchError(() => of(false)),
     );
   }
 
@@ -322,4 +320,30 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
     this.paginationService.clearPagination(this.config.id);
   }
 
+  confirmDelete(group: GroupDtoModel): void {
+    const modalRef = this.modalService.open(ConfirmationModalComponent);
+    modalRef.componentInstance.name = this.dsoNameService.getName(group.group);
+    modalRef.componentInstance.headerLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.header';
+    modalRef.componentInstance.infoLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.info';
+    modalRef.componentInstance.cancelLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.cancel';
+    modalRef.componentInstance.confirmLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.confirm';
+    modalRef.componentInstance.brandColor = 'danger';
+    modalRef.componentInstance.confirmIcon = 'fas fa-trash';
+
+    const modalSub: Subscription = modalRef.componentInstance.response.pipe(
+      takeUntil(modalRef.closed),
+    ).subscribe((result: boolean) => {
+      if (result === true) {
+        this.deleteGroup(group);
+      }
+    });
+
+    void modalRef.result.then().finally(() => {
+      modalRef.close();
+      if (modalSub && !modalSub.closed) {
+        modalSub.unsubscribe();
+      }
+    });
+  }
+
 }

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 { OrejimeServiceStub } from '../shared/cookies/orejime.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 orejimeService: OrejimeServiceStub;
+  let appConfig: AppConfig;
+
+  beforeEach(() => {
+    cookieService = new CookieServiceMock();
+    authService = new AuthServiceStub();
+    orejimeService = new OrejimeServiceStub();
+    appConfig = { accessibility: { cookieExpirationDuration: 10 } } as AppConfig;
+
+    orejimeService.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,
+      orejimeService,
+      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(() => {
+      orejimeService.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 { OrejimeService } from '../shared/cookies/orejime.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 orejimeService: OrejimeService,
+    @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.orejimeService)) {
+      return of('failed');
+    }
+
+    return this.orejimeService.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');
+}