Update version tag for 8.0-rc1 release

Add configuration option to disable inlined CSS in SSR HTML

.eslintrc.json

@@ -8,7 +8,10 @@
     "eslint-plugin-deprecation",
     "unused-imports",
     "eslint-plugin-lodash",
-    "eslint-plugin-jsonc"
+    "eslint-plugin-jsonc",
+    "eslint-plugin-rxjs",
+    "eslint-plugin-simple-import-sort",
+    "eslint-plugin-import-newlines"
   ],
   "overrides": [
     {
@@ -27,17 +30,29 @@
         "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
         "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:rxjs/recommended"
       ],
       "rules": {
+        "indent": [
+          "error",
+          2,
+          {
+            "SwitchCase": 1
+          }
+        ],
         "max-classes-per-file": [
           "error",
           1
         ],
         "comma-dangle": [
-          "off",
+          "error",
           "always-multiline"
         ],
+        "object-curly-spacing": [
+          "error",
+          "always"
+        ],
         "eol-last": [
           "error",
           "always"
@@ -104,15 +119,13 @@
             "allowTernary": true
           }
         ],
-        "prefer-const": "off",            // todo: re-enable & fix errors (more strict than it used to be in TSLint)
+        "prefer-const": "error",
+        "no-case-declarations": "error",
+        "no-extra-boolean-cast": "error",
         "prefer-spread": "off",
         "no-underscore-dangle": "off",
-
-        // todo: disabled rules from eslint:recommended, consider re-enabling & fixing
         "no-prototype-builtins": "off",
         "no-useless-escape": "off",
-        "no-case-declarations": "off",
-        "no-extra-boolean-cast": "off",
 
         "@angular-eslint/directive-selector": [
           "error",
@@ -139,7 +152,6 @@
           }
         ],
         "@angular-eslint/no-attribute-decorator": "error",
-        "@angular-eslint/no-forward-ref": "error",
         "@angular-eslint/no-output-native": "warn",
         "@angular-eslint/no-output-on-prefix": "warn",
         "@angular-eslint/no-conflicting-lifecycle": "warn",
@@ -183,7 +195,7 @@
         ],
         "@typescript-eslint/type-annotation-spacing": "error",
         "@typescript-eslint/unified-signatures": "error",
-        "@typescript-eslint/ban-types": "warn",  // todo: deal with {} type issues & re-enable
+        "@typescript-eslint/ban-types": "error",
         "@typescript-eslint/no-floating-promises": "warn",
         "@typescript-eslint/no-misused-promises": "warn",
         "@typescript-eslint/restrict-plus-operands": "warn",
@@ -203,14 +215,45 @@
 
         "deprecation/deprecation": "warn",
 
+        "simple-import-sort/imports": "error",
+        "simple-import-sort/exports": "error",
         "import/order": "off",
+        "import/first": "error",
+        "import/newline-after-import": "error",
+        "import/no-duplicates": "error",
         "import/no-deprecated": "warn",
         "import/no-namespace": "error",
+        "import-newlines/enforce": [
+          "error",
+          {
+            "items": 1,
+            "semi": true,
+            "forceSingleLine": true
+          }
+        ],
+
         "unused-imports/no-unused-imports": "error",
         "lodash/import-scope": [
           "error",
           "method"
-        ]
+        ],
+
+        "rxjs/no-nested-subscribe": "off"     // todo: go over _all_ cases
+      }
+    },
+    {
+      "files": [
+        "*.spec.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "./tsconfig.json",
+          "./cypress/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "prefer-const": "off"
       }
     },
     {
@@ -219,12 +262,7 @@
       ],
       "extends": [
         "plugin:@angular-eslint/template/recommended"
-      ],
+      ]
-      "rules": {
-        // todo: re-enable & fix errors
-        "@angular-eslint/template/no-negated-async": "off",
-        "@angular-eslint/template/eqeqeq": "off"
-      }
     },
     {
       "files": [

.github/disabled-workflows/pull_request_opened.yml

@@ -1,26 +0,0 @@
-# This workflow runs whenever a new pull request is created
-# TEMPORARILY DISABLED. Unfortunately this doesn't work for PRs created from forked repositories (which is how we tend to create PRs).
-# There is no known workaround yet. See https://github.community/t/how-to-use-github-token-for-prs-from-forks/16818
-name: Pull Request opened
-
-# Only run for newly opened PRs against the "main" branch
-on: 
-  pull_request:
-    types: [opened]
-    branches: 
-      - main
-
-jobs:
-  automation:
-    runs-on: ubuntu-latest
-    steps:
-    # Assign the PR to whomever created it. This is useful for visualizing assignments on project boards
-    # See https://github.com/marketplace/actions/pull-request-assigner
-    - name: Assign PR to creator
-      uses: thomaseizinger/assign-pr-creator-action@v1.0.0
-      # Note, this authentication token is created automatically
-      # See: https://docs.github.com/en/actions/configuring-and-managing-workflows/authenticating-with-the-github_token
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-      # Ignore errors. It is possible the PR was created by someone who cannot be assigned
-      continue-on-error: true

.github/workflows/build.yml

@@ -33,21 +33,23 @@ jobs:
       #CHROME_VERSION: "90.0.4430.212-1"
       # Bump Node heap size (OOM in CI after upgrading to Angular 15)
       NODE_OPTIONS: '--max-old-space-size=4096'
+      # Project name to use when running "docker compose" prior to e2e tests
+      COMPOSE_PROJECT_NAME: 'ci'
     strategy:
       # Create a matrix of Node versions to test against (in parallel)
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
       # Do NOT exit immediately if one matrix job fails
       fail-fast: false
     # These are the actual CI steps to perform per job
     steps:
       # https://github.com/actions/checkout
       - name: Checkout codebase
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # https://github.com/actions/setup-node
       - name: Install Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -106,19 +108,19 @@ jobs:
           path: 'coverage/dspace-angular/lcov.info'
           retention-days: 14
 
-      # Using docker-compose start backend using CI configuration
+      # Using "docker compose" start backend using CI configuration
       # and load assetstore from a cached copy
       - name: Start DSpace REST Backend via Docker (for e2e tests)
         run: |
-          docker-compose -f ./docker/docker-compose-ci.yml up -d
+          docker compose -f ./docker/docker-compose-ci.yml up -d
-          docker-compose -f ./docker/cli.yml -f ./docker/cli.assetstore.yml run --rm dspace-cli
+          docker compose -f ./docker/cli.yml -f ./docker/cli.assetstore.yml run --rm dspace-cli
           docker container ls
 
       # Run integration tests via Cypress.io
       # https://github.com/cypress-io/github-action
       # (NOTE: to run these e2e tests locally, just use 'ng e2e')
       - name: Run e2e tests (integration tests)
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           # Run tests in Chrome, headless mode (default)
           browser: chrome
@@ -180,7 +182,7 @@ jobs:
         run: kill -9 $(lsof -t -i:4000)
 
       - name: Shutdown Docker containers
-        run: docker-compose -f ./docker/docker-compose-ci.yml down
+        run: docker compose -f ./docker/docker-compose-ci.yml down
 
   # Codecov upload is a separate job in order to allow us to restart this separate from the entire build/test
   # job above. This is necessary because Codecov uploads seem to randomly fail at times.
@@ -191,7 +193,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Download artifacts from previous 'tests' job
       - name: Download coverage artifacts
@@ -203,10 +205,14 @@ jobs:
       # Retry action: https://github.com/marketplace/actions/retry-action
       # Codecov action: https://github.com/codecov/codecov-action
       - name: Upload coverage to Codecov.io
-        uses: Wandalen/wretry.action@v1.0.36
+        uses: Wandalen/wretry.action@v1.3.0
         with:
           action: codecov/codecov-action@v3
-          # Try upload 5 times max
+          # Ensure codecov-action throws an error when it fails to upload
+          # This allows us to auto-restart the action if an error is thrown
+          with: |
+            fail_ci_if_error: true
+          # Try re-running action 5 times max
           attempt_limit: 5
           # Run again in 30 seconds
           attempt_delay: 30000

.github/workflows/codescan.yml

@@ -5,12 +5,16 @@
 # because CodeQL requires a fresh build with all tests *disabled*.
 name: "Code Scanning"
 
-# Run this code scan for all pushes / PRs to main branch. Also run once a week.
+# Run this code scan for all pushes / PRs to main or maintenance branches. Also run once a week.
 on:
   push:
-    branches: [ main ]
+    branches:
+      - main
+      - 'dspace-**'
   pull_request:
-    branches: [ main ]
+    branches:
+      - main
+      - 'dspace-**'
     # Don't run if PR is only updating static documentation
     paths-ignore:
       - '**/*.md'
@@ -31,7 +35,7 @@ jobs:
     steps:
       # https://github.com/actions/checkout
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       # https://github.com/github/codeql-action

.github/workflows/docker.yml

@@ -3,6 +3,9 @@ name: Docker images
 
 # Run this Build for all pushes to 'main' or maintenance branches, or tagged releases.
 # Also run for PRs to ensure PR doesn't break Docker build process
+# NOTE: uses "reusable-docker-build.yml" in DSpace/DSpace to actually build each of the Docker images
+# https://github.com/DSpace/DSpace/blob/main/.github/workflows/reusable-docker-build.yml
+# 
 on:
   push:
     branches:
@@ -16,105 +19,41 @@ permissions:
   contents: read  #  to fetch code (actions/checkout)
 
 jobs:
-  docker:
+  #############################################################
+  # Build/Push the 'dspace/dspace-angular' image
+  #############################################################
+  dspace-angular:
     # Ensure this job never runs on forked repos. It's only executed for 'dspace/dspace-angular'
     if: github.repository == 'dspace/dspace-angular'
-    runs-on: ubuntu-latest
+    # Use the reusable-docker-build.yml script from DSpace/DSpace repo to build our Docker image
-    env:
+    uses: DSpace/DSpace/.github/workflows/reusable-docker-build.yml@main
-      # Define tags to use for Docker images based on Git tags/branches (for docker/metadata-action)
-      # For a new commit on default branch (main), use the literal tag 'dspace-7_x' on Docker image.
-      # For a new commit on other branches, use the branch name as the tag for Docker image.
-      # For a new tag, copy that tag name as the tag for Docker image.
-      IMAGE_TAGS: |
-        type=raw,value=dspace-7_x,enable=${{ endsWith(github.ref, github.event.repository.default_branch) }}
-        type=ref,event=branch,enable=${{ !endsWith(github.ref, github.event.repository.default_branch) }}
-        type=ref,event=tag
-      # Define default tag "flavor" for docker/metadata-action per
-      # https://github.com/docker/metadata-action#flavor-input
-      # We turn off 'latest' tag by default.
-      TAGS_FLAVOR: |
-        latest=false
-      # Architectures / Platforms for which we will build Docker images
-      # If this is a PR, we ONLY build for AMD64. For PRs we only do a sanity check test to ensure Docker builds work.
-      # If this is NOT a PR (e.g. a tag or merge commit), also build for ARM64.
-      PLATFORMS: linux/amd64${{ github.event_name != 'pull_request' && ', linux/arm64' || '' }}
-
-    steps:
-      # https://github.com/actions/checkout
-      - name: Checkout codebase
-        uses: actions/checkout@v3
-
-      # https://github.com/docker/setup-buildx-action
-      - name: Setup Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      # https://github.com/docker/setup-qemu-action
-      - name: Set up QEMU emulation to build for multiple architectures
-        uses: docker/setup-qemu-action@v2
-
-      # https://github.com/docker/login-action
-      - name: Login to DockerHub
-        # Only login if not a PR, as PRs only trigger a Docker build and not a push
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
     with:
-          username: ${{ secrets.DOCKER_USERNAME }}
+      build_id: dspace-angular
-          password: ${{ secrets.DOCKER_ACCESS_TOKEN }}
+      image_name: dspace/dspace-angular
+      dockerfile_path: ./Dockerfile
+    secrets:
+      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+      DOCKER_ACCESS_TOKEN: ${{ secrets.DOCKER_ACCESS_TOKEN }}
 
-      ###############################################
+  #############################################################
-      # Build/Push the 'dspace/dspace-angular' image
-      ###############################################
-      # https://github.com/docker/metadata-action
-      # Get Metadata for docker_build step below
-      - name: Sync metadata (tags, labels) from GitHub to Docker for 'dspace-angular' image
-        id: meta_build
-        uses: docker/metadata-action@v4
-        with:
-          images: dspace/dspace-angular
-          tags: ${{ env.IMAGE_TAGS }}
-          flavor: ${{ env.TAGS_FLAVOR }}
-
-      # https://github.com/docker/build-push-action
-      - name: Build and push 'dspace-angular' image
-        id: docker_build
-        uses: docker/build-push-action@v3
-        with:
-          context: .
-          file: ./Dockerfile
-          platforms: ${{ env.PLATFORMS }}
-          # For pull requests, we run the Docker build (to ensure no PR changes break the build),
-          # but we ONLY do an image push to DockerHub if it's NOT a PR
-          push: ${{ github.event_name != 'pull_request' }}
-          # Use tags / labels provided by 'docker/metadata-action' above
-          tags: ${{ steps.meta_build.outputs.tags }}
-          labels: ${{ steps.meta_build.outputs.labels }}
-
-      #####################################################
   # Build/Push the 'dspace/dspace-angular' image ('-dist' tag)
-      #####################################################
+  #############################################################
-      # https://github.com/docker/metadata-action
+  dspace-angular-dist:
-      # Get Metadata for docker_build_dist step below
+    # Ensure this job never runs on forked repos. It's only executed for 'dspace/dspace-angular'
-      - name: Sync metadata (tags, labels) from GitHub to Docker for 'dspace-angular-dist' image
+    if: github.repository == 'dspace/dspace-angular'
-        id: meta_build_dist
+    # Use the reusable-docker-build.yml script from DSpace/DSpace repo to build our Docker image
-        uses: docker/metadata-action@v4
+    uses: DSpace/DSpace/.github/workflows/reusable-docker-build.yml@main
     with:
-          images: dspace/dspace-angular
+      build_id: dspace-angular-dist
-          tags: ${{ env.IMAGE_TAGS }}
+      image_name: dspace/dspace-angular
+      dockerfile_path: ./Dockerfile.dist
       # As this is a "dist" image, its tags are all suffixed with "-dist". Otherwise, it uses the same
       # tagging logic as the primary 'dspace/dspace-angular' image above.
-          flavor: ${{ env.TAGS_FLAVOR }}
+      tags_flavor: suffix=-dist
-            suffix=-dist
+    secrets:
-
+      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-      - name: Build and push 'dspace-angular-dist' image
+      DOCKER_ACCESS_TOKEN: ${{ secrets.DOCKER_ACCESS_TOKEN }}
-        id: docker_build_dist
+      # Enable redeploy of sandbox & demo if the branch for this image matches the deployment branch of
-        uses: docker/build-push-action@v3
+      # these sites as specified in reusable-docker-build.xml
-        with:
+      REDEPLOY_SANDBOX_URL:  ${{ secrets.REDEPLOY_SANDBOX_URL }}
-          context: .
+      REDEPLOY_DEMO_URL:  ${{ secrets.REDEPLOY_DEMO_URL }}
-          file: ./Dockerfile.dist
-          platforms: ${{ env.PLATFORMS }}
-          # For pull requests, we run the Docker build (to ensure no PR changes break the build),
-          # but we ONLY do an image push to DockerHub if it's NOT a PR
-          push: ${{ github.event_name != 'pull_request' }}
-          # Use tags / labels provided by 'docker/metadata-action' above
-          tags: ${{ steps.meta_build_dist.outputs.tags }}
-          labels: ${{ steps.meta_build_dist.outputs.labels }}

.github/workflows/label_merge_conflicts.yml

@@ -1,11 +1,12 @@
 # This workflow checks open PRs for merge conflicts and labels them when conflicts are found
 name: Check for merge conflicts
 
-# Run whenever the "main" branch is updated
+# Run this for all pushes (i.e. merges) to 'main' or maintenance branches
-# NOTE: This means merge conflicts are only checked for when a PR is merged to main.
 on:
   push:
-    branches: [ main ]
+    branches:
+      - main
+      - 'dspace-**'
   # So that the `conflict_label_name` is removed if conflicts are resolved,
   # we allow this to run for `pull_request_target` so that github secrets are available.
   pull_request_target:
@@ -24,6 +25,8 @@ jobs:
       # See: https://github.com/prince-chrismc/label-merge-conflicts-action
       - name: Auto-label PRs with merge conflicts
         uses: prince-chrismc/label-merge-conflicts-action@v3
+        # Ignore any failures -- may occur (randomly?) for older, outdated PRs.
+        continue-on-error: true
         # Add "merge conflict" label if a merge conflict is detected. Remove it when resolved.
         # Note, the authentication token is created automatically
         # See: https://docs.github.com/en/actions/configuring-and-managing-workflows/authenticating-with-the-github_token

.github/workflows/port_merged_pull_request.yml

@@ -0,0 +1,46 @@
+# This workflow will attempt to port a merged pull request to
+# the branch specified in a "port to" label (if exists)
+name: Port merged Pull Request
+
+# Only run for merged PRs against the "main" or maintenance branches
+# We allow this to run for `pull_request_target` so that github secrets are available
+# (This is required when the PR comes from a forked repo)
+on:
+  pull_request_target:
+    types: [ closed ]
+    branches:
+      - main
+      - 'dspace-**'
+
+permissions:
+  contents: write      # so action can add comments
+  pull-requests: write # so action can create pull requests
+
+jobs:
+  port_pr:
+    runs-on: ubuntu-latest
+    # Don't run on closed *unmerged* pull requests
+    if: github.event.pull_request.merged
+    steps:
+      # Checkout code
+      - uses: actions/checkout@v4
+      # Port PR to other branch (ONLY if labeled with "port to")
+      # See https://github.com/korthout/backport-action
+      - name: Create backport pull requests
+        uses: korthout/backport-action@v2
+        with:
+          # Trigger based on a "port to [branch]" label on PR
+          # (This label must specify the branch name to port to)
+          label_pattern: '^port to ([^ ]+)$'
+          # Title to add to the (newly created) port PR
+          pull_title: '[Port ${target_branch}] ${pull_title}'
+          # Description to add to the (newly created) port PR
+          pull_description: 'Port of #${pull_number} by @${pull_author} to `${target_branch}`.'
+          # Copy all labels from original PR to (newly created) port PR
+          # NOTE: The labels matching 'label_pattern' are automatically excluded
+          copy_labels_pattern: '.*'
+          # Skip any merge commits in the ported PR. This means only non-merge commits are cherry-picked to the new PR
+          merge_commits: 'skip'
+          # Use a personal access token (PAT) to create PR as 'dspace-bot' user.
+          # A PAT is required in order for the new PR to trigger its own actions (for CI checks)
+          github_token: ${{ secrets.PR_PORT_TOKEN }}

.github/workflows/pull_request_opened.yml

@@ -0,0 +1,24 @@
+# This workflow runs whenever a new pull request is created
+name: Pull Request opened
+
+# Only run for newly opened PRs against the "main" or maintenance branches
+# We allow this to run for `pull_request_target` so that github secrets are available
+# (This is required to assign a PR back to the creator when the PR comes from a forked repo)
+on:
+  pull_request_target:
+    types: [ opened ]
+    branches:
+      - main
+      - 'dspace-**'
+
+permissions:
+  pull-requests: write
+
+jobs:
+  automation:
+    runs-on: ubuntu-latest
+    steps:
+    # Assign the PR to whomever created it. This is useful for visualizing assignments on project boards
+    # See https://github.com/toshimaru/auto-author-assign
+    - name: Assign PR to creator
+      uses: toshimaru/auto-author-assign@v2.0.1

Dockerfile.dist

@@ -2,7 +2,7 @@
 # See https://github.com/DSpace/dspace-angular/tree/main/docker for usage details
 
 # Test build:
-# docker build -f Dockerfile.dist -t dspace/dspace-angular:dspace-7_x-dist .
+# docker build -f Dockerfile.dist -t dspace/dspace-angular:latest-dist .
 
 FROM node:18-alpine as build
 

README.md

@@ -157,8 +157,8 @@ DSPACE_UI_SSL => DSPACE_SSL
 
 The same settings can also be overwritten by setting system environment variables instead, E.g.:
 ```bash
-export DSPACE_HOST=api7.dspace.org
+export DSPACE_HOST=demo.dspace.org
-export DSPACE_UI_PORT=4200
+export DSPACE_UI_PORT=4000
 ```
 
 The priority works as follows: **environment variable** overrides **variable in `.env` file** overrides external config set by `DSPACE_APP_CONFIG_PATH` overrides **`config.(prod or dev).yml`**
@@ -288,7 +288,7 @@ E2E tests (aka integration tests) use [Cypress.io](https://www.cypress.io/). Con
 The test files can be found in the `./cypress/integration/` folder.
 
 Before you can run e2e tests, two things are REQUIRED:
-1. You MUST be running the DSpace backend (i.e. REST API) locally. The e2e tests will *NOT* succeed if run against our demo REST API (https://api7.dspace.org/server/), as that server is uncontrolled and may have content added/removed at any time.
+1. You MUST be running the DSpace backend (i.e. REST API) locally. The e2e tests will *NOT* succeed if run against our demo/sandbox REST API (https://demo.dspace.org/server/ or https://sandbox.dspace.org/server/), as those sites may have content added/removed at any time.
     * After starting up your backend on localhost, make sure either your `config.prod.yml` or `config.dev.yml` has its `rest` settings defined to use that localhost backend.
 	* If you'd prefer, you may instead use environment variables as described at [Configuring](#configuring). For example:
        ```

config/config.example.yml

@@ -17,12 +17,19 @@ ui:
   # Trust X-FORWARDED-* headers from proxies (default = true)
   useProxies: true
 
+universal:
+  # Whether to inline "critical" styles into the server-side rendered HTML.
+  # Determining which styles are critical is a relatively expensive operation;
+  # this option can be disabled to boost server performance at the expense of
+  # loading smoothness.
+  inlineCriticalCss: true
+
 # The REST API server settings
 # NOTE: these settings define which (publicly available) REST API to use. They are usually
 # 'synced' with the 'dspace.server.url' setting in your backend's local.cfg.
 rest:
   ssl: true
-  host: api7.dspace.org
+  host: sandbox.dspace.org
   port: 443
   # NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
   nameSpace: /server
@@ -131,12 +138,16 @@ submission:
     # NOTE: after how many time (milliseconds) submission is saved automatically
     # eg. timer: 5 * (1000 * 60); // 5 minutes
     timer: 0
+  # Always show the duplicate detection section if enabled, even if there are no potential duplicates detected
+  # (a message will be displayed to indicate no matches were found)
+  duplicateDetection:
+    alwaysShowSection: false
   icons:
     metadata:
       # NOTE: example of configuration
       #   # NOTE: metadata name
       # - name: dc.author
-      #   # NOTE: fontawesome (v5.x) icon classes and bootstrap utility classes can be used
+      #   # NOTE: fontawesome (v6.x) icon classes and bootstrap utility classes can be used
       #   style: fas fa-user
       - name: dc.author
         style: fas fa-user
@@ -147,18 +158,40 @@ submission:
       confidence:
         # NOTE: example of configuration
         #   # NOTE: confidence value
-        # - name: dc.author
+        # - value: 600
-        #   # NOTE: fontawesome (v5.x) icon classes and bootstrap utility classes can be used
+        #   # NOTE: fontawesome (v6.x) icon classes and bootstrap utility classes can be used
-        #   style: fa-user
+        #   style: text-success
+        #   icon: fa-circle-check
+        #   # NOTE: the class configured in property style is used by default, the icon property could be used in component
+        #           configured to use a 'icon mode' display (mainly in edit-item page)
         - value: 600
           style: text-success
+          icon: fa-circle-check
         - value: 500
           style: text-info
+          icon: fa-gear
         - value: 400
           style: text-warning
+          icon: fa-circle-question
+        - value: 300
+          style: text-muted
+          icon: fa-thumbs-down
+        - value: 200
+          style: text-muted
+          icon: fa-circle-exclamation
+        - value: 100
+          style: text-muted
+          icon: fa-circle-stop
+        - value: 0
+          style: text-muted
+          icon: fa-ban
+        - value: -1
+          style: text-muted
+          icon: fa-circle-xmark
         # default configuration
         - value: default
           style: text-muted
+          icon: fa-circle-xmark
 
 #  Default Language in which the UI will be rendered if the user's browser language is not an active language
 defaultLanguage: en
@@ -208,6 +241,9 @@ languages:
   - code: pt-BR
     label: Português do Brasil
     active: true
+  - code: sr-lat
+    label: Srpski (lat)
+    active: true
   - code: fi
     label: Suomi
     active: true
@@ -232,6 +268,9 @@ languages:
   - code: el
     label: Ελληνικά
     active: true
+  - code: sr-cyr
+    label: Српски
+    active: true
   - code: uk
     label: Yкраї́нська
     active: true
@@ -266,6 +305,8 @@ homePage:
     # No. of communities to list per page on the home page
     # This will always round to the nearest number from the list of page sizes. e.g. if you set it to 7 it'll use 10
     pageSize: 5
+  # Enable or disable the Discover filters on the homepage
+  showDiscoverFilters: false
 
 # Item Config
 item:
@@ -279,8 +320,17 @@ item:
     # settings menu.  See pageSizeOptions in 'pagination-component-options.model.ts'.
     pageSize: 5
 
+# Community Page Config
+community:
+  # Search tab config
+  searchSection:
+    showSidebar: true
+
 # Collection Page Config
 collection:
+  # Search tab config
+  searchSection:
+    showSidebar: true
   edit:
     undoTimeout: 10000 # 10 seconds
 
@@ -292,33 +342,33 @@ themes:
   #
   # # A theme with a handle property will match the community, collection or item with the given
   # # handle, and all collections and/or items within it
-  # - name: 'custom',
+  # - name: custom
-  #   handle: '10673/1233'
+  #   handle: 10673/1233
   #
   # # A theme with a regex property will match the route using a regular expression. If it
   # # matches the route for a community or collection it will also apply to all collections
   # # and/or items within it
-  # - name: 'custom',
+  # - name: custom
-  #   regex: 'collections\/e8043bc2.*'
+  #   regex: collections\/e8043bc2.*
   #
   # # A theme with a uuid property will match the community, collection or item with the given
   # # ID, and all collections and/or items within it
-  # - name: 'custom',
+  # - name: custom
-  #   uuid: '0958c910-2037-42a9-81c7-dca80e3892b4'
+  #   uuid: 0958c910-2037-42a9-81c7-dca80e3892b4
   #
   # # The extends property specifies an ancestor theme (by name). Whenever a themed component is not found
   # # in the current theme, its ancestor theme(s) will be checked recursively before falling back to default.
-  # - name: 'custom-A',
+  # - name: custom-A
-  #   extends: 'custom-B',
+  #   extends: custom-B
   #   # Any of the matching properties above can be used
-  #   handle: '10673/34'
+  #   handle: 10673/34
   #
-  # - name: 'custom-B',
+  # - name: custom-B
-  #   extends: 'custom',
+  #   extends: custom
-  #   handle: '10673/12'
+  #   handle: 10673/12
   #
   # # A theme with only a name will match every route
-  # name: 'custom'
+  # name: custom
   #
   # # This theme will use the default bootstrap styling for DSpace components
   # - name: BASE_THEME_NAME
@@ -380,3 +430,75 @@ vocabularies:
 comcolSelectionSort:
   sortField: 'dc.title'
   sortDirection: 'ASC'
+
+# Example of fallback collection for suggestions import
+# suggestion:
+  # - collectionId: 8f7df5ca-f9c2-47a4-81ec-8a6393d6e5af
+    # source: "openaire"
+
+
+# Search settings
+search:
+  # Settings to enable/disable or configure advanced search filters.
+  advancedFilters:
+    enabled: false
+    # List of filters to enable in "Advanced Search" dropdown
+    filter: [ 'title', 'author', 'subject', 'entityType' ]
+
+
+# Notify metrics
+# Configuration for Notify Admin Dashboard for metrics visualization
+notifyMetrics:
+  # Configuration for received messages
+- title: 'admin-notify-dashboard.received-ldn'
+  boxes:
+  - color: '#B8DAFF'
+    title: 'admin-notify-dashboard.NOTIFY.incoming.accepted'
+    config: 'NOTIFY.incoming.accepted'
+    description: 'admin-notify-dashboard.NOTIFY.incoming.accepted.description'
+  - color: '#D4EDDA'
+    title: 'admin-notify-dashboard.NOTIFY.incoming.processed'
+    config: 'NOTIFY.incoming.processed'
+    description: 'admin-notify-dashboard.NOTIFY.incoming.processed.description'
+  - color: '#FDBBC7'
+    title: 'admin-notify-dashboard.NOTIFY.incoming.failure'
+    config: 'NOTIFY.incoming.failure'
+    description: 'admin-notify-dashboard.NOTIFY.incoming.failure.description'
+  - color: '#FDBBC7'
+    title: 'admin-notify-dashboard.NOTIFY.incoming.untrusted'
+    config: 'NOTIFY.incoming.untrusted'
+    description: 'admin-notify-dashboard.NOTIFY.incoming.untrusted.description'
+  - color: '#43515F'
+    title: 'admin-notify-dashboard.NOTIFY.incoming.involvedItems'
+    textColor: '#fff'
+    config: 'NOTIFY.incoming.involvedItems'
+    description: 'admin-notify-dashboard.NOTIFY.incoming.involvedItems.description'
+# Configuration for outgoing messages
+- title: 'admin-notify-dashboard.generated-ldn'
+  boxes:
+  - color: '#B8DAFF'
+    title: 'admin-notify-dashboard.NOTIFY.outgoing.queued'
+    config: 'NOTIFY.outgoing.queued'
+    description: 'admin-notify-dashboard.NOTIFY.outgoing.queued.description'
+  - color: '#FDEEBB'
+    title: 'admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry'
+    config: 'NOTIFY.outgoing.queued_for_retry'
+    description: 'admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry.description'
+  - color: '#FDBBC7'
+    title: 'admin-notify-dashboard.NOTIFY.outgoing.failure'
+    config: 'NOTIFY.outgoing.failure'
+    description: 'admin-notify-dashboard.NOTIFY.outgoing.failure.description'
+  - color: '#43515F'
+    title: 'admin-notify-dashboard.NOTIFY.outgoing.involvedItems'
+    textColor: '#fff'
+    config: 'NOTIFY.outgoing.involvedItems'
+    description: 'admin-notify-dashboard.NOTIFY.outgoing.involvedItems.description'
+  - color: '#D4EDDA'
+    title: 'admin-notify-dashboard.NOTIFY.outgoing.delivered'
+    config: 'NOTIFY.outgoing.delivered'
+    description: 'admin-notify-dashboard.NOTIFY.outgoing.delivered.description'
+
+
+
+
+

config/config.yml

@@ -1,5 +1,5 @@
 rest:
   ssl: true
-  host: api7.dspace.org
+  host: sandbox.dspace.org
   port: 443
   nameSpace: /server

cypress.config.ts

@@ -9,8 +9,9 @@ export default defineConfig({
     openMode: 0,
   },
   env: {
-    // Global constants used in DSpace e2e tests (see also ./cypress/support/e2e.ts)
+    // Global DSpace environment variables used in all our Cypress e2e tests
-    // May be overridden in our cypress.json config file using specified environment variables.
+    // May be modified in this config, or overridden in a variety of ways.
+    // See Cypress environment variable docs: https://docs.cypress.io/guides/guides/environment-variables
     // Default values listed here are all valid for the Demo Entities Data set available at
     // https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data
     // (This is the data set used in our CI environment)
@@ -21,12 +22,14 @@ export default defineConfig({
     // Community/collection/publication used for view/edit tests
     DSPACE_TEST_COMMUNITY: '0958c910-2037-42a9-81c7-dca80e3892b4',
     DSPACE_TEST_COLLECTION: '282164f5-d325-4740-8dd1-fa4d6d3e7200',
-    DSPACE_TEST_ENTITY_PUBLICATION: 'e98b0f27-5c19-49a0-960d-eb6ad5287067',
+    DSPACE_TEST_ENTITY_PUBLICATION: '6160810f-1e53-40db-81ef-f6621a727398',
     // Search term (should return results) used in search tests
     DSPACE_TEST_SEARCH_TERM: 'test',
-    // Collection used for submission tests
+    // Main Collection used for submission tests. Should be able to accept normal Item objects
     DSPACE_TEST_SUBMIT_COLLECTION_NAME: 'Sample Collection',
     DSPACE_TEST_SUBMIT_COLLECTION_UUID: '9d8334e9-25d3-4a67-9cea-3dffdef80144',
+    // Collection used for Person entity submission tests. MUST be configured with EntityType=Person.
+    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_PASSWORD: 'dspace',

cypress/e2e/admin-sidebar.cy.ts

@@ -0,0 +1,28 @@
+import { testA11y } from 'cypress/support/utils';
+import { Options } from 'cypress-axe';
+
+describe('Admin Sidebar', () => {
+  beforeEach(() => {
+    // Must login as an Admin for sidebar to appear
+    cy.visit('/login');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('should be pinnable and pass accessibility tests', () => {
+    // Pin the sidebar open
+    cy.get('#sidebar-collapse-toggle').click();
+
+    // Click on every expandable section to open all menus
+    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);
+  });
+});

cypress/e2e/breadcrumbs.cy.ts

@@ -1,10 +1,9 @@
-import { TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Breadcrumbs', () => {
   it('should pass accessibility tests', () => {
     // Visit an Item, as those have more breadcrumbs
-        cy.visit('/entities/publication/'.concat(TEST_ENTITY_PUBLICATION));
+    cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')));
 
     // Wait for breadcrumbs to be visible
     cy.get('ds-breadcrumbs').should('be.visible');

cypress/e2e/browse-by-author.cy.ts

@@ -5,9 +5,9 @@ describe('Browse By Author', () => {
     cy.visit('/browse/author');
 
     // Wait for <ds-browse-by-metadata-page> to be visible
-        cy.get('ds-browse-by-metadata-page').should('be.visible');
+    cy.get('ds-browse-by-metadata').should('be.visible');
 
     // Analyze <ds-browse-by-metadata-page> for accessibility
-        testA11y('ds-browse-by-metadata-page');
+    testA11y('ds-browse-by-metadata');
   });
 });

cypress/e2e/browse-by-dateissued.cy.ts

@@ -5,9 +5,9 @@ describe('Browse By Date Issued', () => {
     cy.visit('/browse/dateissued');
 
     // Wait for <ds-browse-by-date-page> to be visible
-        cy.get('ds-browse-by-date-page').should('be.visible');
+    cy.get('ds-browse-by-date').should('be.visible');
 
     // Analyze <ds-browse-by-date-page> for accessibility
-        testA11y('ds-browse-by-date-page');
+    testA11y('ds-browse-by-date');
   });
 });

cypress/e2e/browse-by-subject.cy.ts

@@ -5,9 +5,9 @@ describe('Browse By Subject', () => {
     cy.visit('/browse/subject');
 
     // Wait for <ds-browse-by-metadata-page> to be visible
-        cy.get('ds-browse-by-metadata-page').should('be.visible');
+    cy.get('ds-browse-by-metadata').should('be.visible');
 
     // Analyze <ds-browse-by-metadata-page> for accessibility
-        testA11y('ds-browse-by-metadata-page');
+    testA11y('ds-browse-by-metadata');
   });
 });

cypress/e2e/browse-by-title.cy.ts

@@ -5,9 +5,9 @@ describe('Browse By Title', () => {
     cy.visit('/browse/title');
 
     // Wait for <ds-browse-by-title-page> to be visible
-        cy.get('ds-browse-by-title-page').should('be.visible');
+    cy.get('ds-browse-by-title').should('be.visible');
 
     // Analyze <ds-browse-by-title-page> for accessibility
-        testA11y('ds-browse-by-title-page');
+    testA11y('ds-browse-by-title');
   });
 });

cypress/e2e/collection-edit.cy.ts

@@ -0,0 +1,128 @@
+import { testA11y } from 'cypress/support/utils';
+
+const COLLECTION_EDIT_PAGE = '/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')).concat('/edit');
+
+beforeEach(() => {
+  // All tests start with visiting the Edit Collection Page
+  cy.visit(COLLECTION_EDIT_PAGE);
+
+  // This page is restricted, so we will be shown the login form. Fill it out & submit.
+  cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+});
+
+describe('Edit Collection > Edit Metadata tab', () => {
+  it('should pass accessibility tests', () => {
+    // <ds-edit-collection> tag must be loaded
+    cy.get('ds-edit-collection').should('be.visible');
+
+    // Analyze <ds-edit-collection> for accessibility issues
+    testA11y('ds-edit-collection');
+  });
+});
+
+describe('Edit Collection > Assign Roles tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="roles"]').click();
+
+    // <ds-collection-roles> tag must be loaded
+    cy.get('ds-collection-roles').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-collection-roles');
+  });
+});
+
+describe('Edit Collection > Content Source tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="source"]').click();
+
+    // <ds-collection-source> tag must be loaded
+    cy.get('ds-collection-source').should('be.visible');
+
+    // Check the external source checkbox (to display all fields on the page)
+    cy.get('#externalSourceCheck').check();
+
+    // Wait for the source controls to appear
+    // cy.get('ds-collection-source-controls').should('be.visible');
+
+    // Analyze entire page for accessibility issues
+    testA11y('ds-collection-source');
+  });
+});
+
+describe('Edit Collection > Curate tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="curate"]').click();
+
+    // <ds-collection-curate> tag must be loaded
+    cy.get('ds-collection-curate').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-collection-curate');
+  });
+});
+
+describe('Edit Collection > Access Control tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="access-control"]').click();
+
+    // <ds-collection-access-control> tag must be loaded
+    cy.get('ds-collection-access-control').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-collection-access-control');
+  });
+});
+
+describe('Edit Collection > Authorizations tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="authorizations"]').click();
+
+    // <ds-collection-authorizations> tag must be loaded
+    cy.get('ds-collection-authorizations').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-collection-authorizations');
+  });
+});
+
+describe('Edit Collection > Item Mapper tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="mapper"]').click();
+
+    // <ds-collection-item-mapper> tag must be loaded
+    cy.get('ds-collection-item-mapper').should('be.visible');
+
+    // Analyze entire page for accessibility issues
+    testA11y('ds-collection-item-mapper');
+
+    // Click on the "Map new Items" tab
+    cy.get('li[data-test="mapTab"] a').click();
+
+    // Make sure search form is now visible
+    cy.get('ds-search-form').should('be.visible');
+
+    // Analyze entire page (again) for accessibility issues
+    testA11y('ds-collection-item-mapper');
+  });
+});
+
+
+describe('Edit Collection > Delete page', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="delete-button"]').click();
+
+    // <ds-delete-collection> tag must be loaded
+    cy.get('ds-delete-collection').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-delete-collection');
+  });
+});

cypress/e2e/collection-page.cy.ts

@@ -1,10 +1,9 @@
-import { TEST_COLLECTION } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Collection Page', () => {
 
   it('should pass accessibility tests', () => {
-        cy.visit('/collections/'.concat(TEST_COLLECTION));
+    cy.visit('/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')));
 
     // <ds-collection-page> tag must be loaded
     cy.get('ds-collection-page').should('be.visible');

cypress/e2e/collection-statistics.cy.ts

@@ -1,12 +1,12 @@
-import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_COLLECTION } from 'cypress/support/e2e';
+import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Collection Statistics Page', () => {
-    const COLLECTIONSTATISTICSPAGE = '/statistics/collections/'.concat(TEST_COLLECTION);
+  const COLLECTIONSTATISTICSPAGE = '/statistics/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION'));
 
   it('should load if you click on "Statistics" from a Collection page', () => {
-        cy.visit('/collections/'.concat(TEST_COLLECTION));
+    cy.visit('/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')));
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+    cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
     cy.location('pathname').should('eq', COLLECTIONSTATISTICSPAGE);
   });
 
@@ -18,7 +18,7 @@ describe('Collection Statistics Page', () => {
   it('should contain a "Total visits per month" section', () => {
     cy.visit(COLLECTIONSTATISTICSPAGE);
     // Check just for existence because this table is empty in CI environment as it's historical data
-        cy.get('.'.concat(TEST_COLLECTION).concat('_TotalVisitsPerMonth')).should('exist');
+    cy.get('.'.concat(Cypress.env('DSPACE_TEST_COLLECTION')).concat('_TotalVisitsPerMonth')).should('exist');
   });
 
   it('should pass accessibility tests', () => {

cypress/e2e/community-edit.cy.ts

@@ -0,0 +1,86 @@
+import { testA11y } from 'cypress/support/utils';
+
+const COMMUNITY_EDIT_PAGE = '/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')).concat('/edit');
+
+beforeEach(() => {
+  // All tests start with visiting the Edit Community Page
+  cy.visit(COMMUNITY_EDIT_PAGE);
+
+  // This page is restricted, so we will be shown the login form. Fill it out & submit.
+  cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+});
+
+describe('Edit Community > Edit Metadata tab', () => {
+  it('should pass accessibility tests', () => {
+    // <ds-edit-community> tag must be loaded
+    cy.get('ds-edit-community').should('be.visible');
+
+    // Analyze <ds-edit-community> for accessibility issues
+    testA11y('ds-edit-community');
+  });
+});
+
+describe('Edit Community > Assign Roles tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="roles"]').click();
+
+    // <ds-community-roles> tag must be loaded
+    cy.get('ds-community-roles').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-community-roles');
+  });
+});
+
+describe('Edit Community > Curate tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="curate"]').click();
+
+    // <ds-community-curate> tag must be loaded
+    cy.get('ds-community-curate').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-community-curate');
+  });
+});
+
+describe('Edit Community > Access Control tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="access-control"]').click();
+
+    // <ds-community-access-control> tag must be loaded
+    cy.get('ds-community-access-control').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-community-access-control');
+  });
+});
+
+describe('Edit Community > Authorizations tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="authorizations"]').click();
+
+    // <ds-community-authorizations> tag must be loaded
+    cy.get('ds-community-authorizations').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-community-authorizations');
+  });
+});
+
+describe('Edit Community > Delete page', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="delete-button"]').click();
+
+    // <ds-delete-community> tag must be loaded
+    cy.get('ds-delete-community').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-delete-community');
+  });
+});

cypress/e2e/community-list.cy.ts

@@ -1,4 +1,3 @@
-import { Options } from 'cypress-axe';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Community List Page', () => {
@@ -13,13 +12,6 @@ describe('Community List Page', () => {
     cy.get('[data-test="expand-button"]').click({ multiple: true });
 
     // Analyze <ds-community-list-page> for accessibility issues
-        // Disable heading-order checks until it is fixed
+    testA11y('ds-community-list-page');
-        testA11y('ds-community-list-page',
-            {
-                rules: {
-                    'heading-order': { enabled: false }
-                }
-            } as Options
-        );
   });
 });

cypress/e2e/community-page.cy.ts

@@ -1,15 +1,14 @@
-import { TEST_COMMUNITY } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Community Page', () => {
 
   it('should pass accessibility tests', () => {
-        cy.visit('/communities/'.concat(TEST_COMMUNITY));
+    cy.visit('/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')));
 
     // <ds-community-page> tag must be loaded
     cy.get('ds-community-page').should('be.visible');
 
     // Analyze <ds-community-page> for accessibility issues
-        testA11y('ds-community-page',);
+    testA11y('ds-community-page');
   });
 });

cypress/e2e/community-statistics.cy.ts

@@ -1,12 +1,12 @@
-import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_COMMUNITY } from 'cypress/support/e2e';
+import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Community Statistics Page', () => {
-    const COMMUNITYSTATISTICSPAGE = '/statistics/communities/'.concat(TEST_COMMUNITY);
+  const COMMUNITYSTATISTICSPAGE = '/statistics/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY'));
 
   it('should load if you click on "Statistics" from a Community page', () => {
-        cy.visit('/communities/'.concat(TEST_COMMUNITY));
+    cy.visit('/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')));
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+    cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
     cy.location('pathname').should('eq', COMMUNITYSTATISTICSPAGE);
   });
 
@@ -18,7 +18,7 @@ describe('Community Statistics Page', () => {
   it('should contain a "Total visits per month" section', () => {
     cy.visit(COMMUNITYSTATISTICSPAGE);
     // Check just for existence because this table is empty in CI environment as it's historical data
-        cy.get('.'.concat(TEST_COMMUNITY).concat('_TotalVisitsPerMonth')).should('exist');
+    cy.get('.'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')).concat('_TotalVisitsPerMonth')).should('exist');
   });
 
   it('should pass accessibility tests', () => {

cypress/e2e/header.cy.ts

@@ -8,12 +8,6 @@ describe('Header', () => {
     cy.get('ds-header').should('be.visible');
 
     // Analyze <ds-header> for accessibility
-        testA11y({
+    testA11y('ds-header');
-            include: ['ds-header'],
-            exclude: [
-                ['#search-navbar-container'], // search in navbar has duplicative ID. Will be fixed in #1174
-                ['.dropdownLogin']            // "Log in" link has color contrast issues. Will be fixed in #1149
-            ],
-        });
   });
 });

cypress/e2e/homepage-statistics.cy.ts

@@ -1,18 +1,19 @@
-import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
-import { testA11y } from 'cypress/support/utils';
 import '../support/commands';
 
+import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e';
+import { testA11y } from 'cypress/support/utils';
+
 describe('Site Statistics Page', () => {
   it('should load if you click on "Statistics" from homepage', () => {
     cy.visit('/');
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+    cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
     cy.location('pathname').should('eq', '/statistics');
   });
 
   it('should pass accessibility tests', () => {
     // generate 2 view events on an Item's page
-        cy.generateViewEvent(TEST_ENTITY_PUBLICATION, 'item');
+    cy.generateViewEvent(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'), 'item');
-        cy.generateViewEvent(TEST_ENTITY_PUBLICATION, 'item');
+    cy.generateViewEvent(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'), 'item');
 
     cy.visit('/statistics');
 

cypress/e2e/item-edit.cy.ts

@@ -0,0 +1,135 @@
+import { testA11y } from 'cypress/support/utils';
+import { Options } from 'cypress-axe';
+
+const ITEM_EDIT_PAGE = '/items/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')).concat('/edit');
+
+beforeEach(() => {
+  // All tests start with visiting the Edit Item Page
+  cy.visit(ITEM_EDIT_PAGE);
+
+  // This page is restricted, so we will be shown the login form. Fill it out & submit.
+  cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+});
+
+describe('Edit Item > Edit Metadata tab', () => {
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="metadata"]').click();
+
+    // <ds-edit-item-page> tag must be loaded
+    cy.get('ds-edit-item-page').should('be.visible');
+
+    // Analyze <ds-edit-item-page> for accessibility issues
+    testA11y('ds-edit-item-page');
+  });
+});
+
+describe('Edit Item > Status tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="status"]').click();
+
+    // <ds-item-status> tag must be loaded
+    cy.get('ds-item-status').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-item-status');
+  });
+});
+
+describe('Edit Item > Bitstreams tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="bitstreams"]').click();
+
+    // <ds-item-bitstreams> tag must be loaded
+    cy.get('ds-item-bitstreams').should('be.visible');
+
+    // Table of item bitstreams must also be loaded
+    cy.get('div.item-bitstreams').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-item-bitstreams',
+            {
+              rules: {
+                // Currently Bitstreams page loads a pagination component per Bundle
+                // and they all use the same 'id="p-dad"'.
+                'duplicate-id': { enabled: false },
+              },
+            } as Options,
+    );
+  });
+});
+
+describe('Edit Item > Curate tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="curate"]').click();
+
+    // <ds-item-curate> tag must be loaded
+    cy.get('ds-item-curate').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-item-curate');
+  });
+});
+
+describe('Edit Item > Relationships tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="relationships"]').click();
+
+    // <ds-item-relationships> tag must be loaded
+    cy.get('ds-item-relationships').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-item-relationships');
+  });
+});
+
+describe('Edit Item > Version History tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="versionhistory"]').click();
+
+    // <ds-item-version-history> tag must be loaded
+    cy.get('ds-item-version-history').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-item-version-history');
+  });
+});
+
+describe('Edit Item > Access Control tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="access-control"]').click();
+
+    // <ds-item-access-control> tag must be loaded
+    cy.get('ds-item-access-control').should('be.visible');
+
+    // Analyze for accessibility issues
+    testA11y('ds-item-access-control');
+  });
+});
+
+describe('Edit Item > Collection Mapper tab', () => {
+
+  it('should pass accessibility tests', () => {
+    cy.get('a[data-test="mapper"]').click();
+
+    // <ds-item-collection-mapper> tag must be loaded
+    cy.get('ds-item-collection-mapper').should('be.visible');
+
+    // Analyze entire page for accessibility issues
+    testA11y('ds-item-collection-mapper');
+
+    // Click on the "Map new collections" tab
+    cy.get('li[data-test="mapTab"] a').click();
+
+    // Make sure search form is now visible
+    cy.get('ds-search-form').should('be.visible');
+
+    // Analyze entire page (again) for accessibility issues
+    testA11y('ds-item-collection-mapper');
+  });
+});

cypress/e2e/item-page.cy.ts

@@ -1,10 +1,8 @@
-import { Options } from 'cypress-axe';
-import { TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Item  Page', () => {
-    const ITEMPAGE = '/items/'.concat(TEST_ENTITY_PUBLICATION);
+  const ITEMPAGE = '/items/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'));
-    const ENTITYPAGE = '/entities/publication/'.concat(TEST_ENTITY_PUBLICATION);
+  const ENTITYPAGE = '/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'));
 
   // Test that entities will redirect to /entities/[type]/[uuid] when accessed via /items/[uuid]
   it('should redirect to the entity page when navigating to an item page', () => {
@@ -19,13 +17,16 @@ describe('Item  Page', () => {
     cy.get('ds-item-page').should('be.visible');
 
     // Analyze <ds-item-page> for accessibility issues
-        // Disable heading-order checks until it is fixed
+    testA11y('ds-item-page');
-        testA11y('ds-item-page',
+  });
-            {
+
-                rules: {
+  it('should pass accessibility tests on full item page', () => {
-                    'heading-order': { enabled: false }
+    cy.visit(ENTITYPAGE + '/full');
-                }
+
-            } as Options
+    // <ds-full-item-page> tag must be loaded
-        );
+    cy.get('ds-full-item-page').should('be.visible');
+
+    // Analyze <ds-full-item-page> for accessibility issues
+    testA11y('ds-full-item-page');
   });
 });

cypress/e2e/item-statistics.cy.ts

@@ -1,12 +1,12 @@
-import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
+import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Item Statistics Page', () => {
-    const ITEMSTATISTICSPAGE = '/statistics/items/'.concat(TEST_ENTITY_PUBLICATION);
+  const ITEMSTATISTICSPAGE = '/statistics/items/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'));
 
   it('should load if you click on "Statistics" from an Item/Entity page', () => {
-        cy.visit('/entities/publication/'.concat(TEST_ENTITY_PUBLICATION));
+    cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')));
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+    cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
     cy.location('pathname').should('eq', ITEMSTATISTICSPAGE);
   });
 
@@ -24,7 +24,7 @@ describe('Item Statistics Page', () => {
   it('should contain a "Total visits per month" section', () => {
     cy.visit(ITEMSTATISTICSPAGE);
     // Check just for existence because this table is empty in CI environment as it's historical data
-        cy.get('.'.concat(TEST_ENTITY_PUBLICATION).concat('_TotalVisitsPerMonth')).should('exist');
+    cy.get('.'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')).concat('_TotalVisitsPerMonth')).should('exist');
   });
 
   it('should pass accessibility tests', () => {

cypress/e2e/login-modal.cy.ts

@@ -1,42 +1,42 @@
-import { TEST_ADMIN_PASSWORD, TEST_ADMIN_USER, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
+import { testA11y } from 'cypress/support/utils';
 
 const page = {
   openLoginMenu() {
     // Click the "Log In" dropdown menu in header
-        cy.get('ds-themed-navbar [data-test="login-menu"]').click();
+    cy.get('ds-themed-header [data-test="login-menu"]').click();
   },
   openUserMenu() {
     // Once logged in, click the User menu in header
-        cy.get('ds-themed-navbar [data-test="user-menu"]').click();
+    cy.get('ds-themed-header [data-test="user-menu"]').click();
   },
   submitLoginAndPasswordByPressingButton(email, password) {
     // Enter email
-        cy.get('ds-themed-navbar [data-test="email"]').type(email);
+    cy.get('ds-themed-header [data-test="email"]').type(email);
     // Enter password
-        cy.get('ds-themed-navbar [data-test="password"]').type(password);
+    cy.get('ds-themed-header [data-test="password"]').type(password);
     // Click login button
-        cy.get('ds-themed-navbar [data-test="login-button"]').click();
+    cy.get('ds-themed-header [data-test="login-button"]').click();
   },
   submitLoginAndPasswordByPressingEnter(email, password) {
     // In opened Login modal, fill out email & password, then click Enter
-        cy.get('ds-themed-navbar [data-test="email"]').type(email);
+    cy.get('ds-themed-header [data-test="email"]').type(email);
-        cy.get('ds-themed-navbar [data-test="password"]').type(password);
+    cy.get('ds-themed-header [data-test="password"]').type(password);
-        cy.get('ds-themed-navbar [data-test="password"]').type('{enter}');
+    cy.get('ds-themed-header [data-test="password"]').type('{enter}');
   },
   submitLogoutByPressingButton() {
     // This is the POST command that will actually log us out
     cy.intercept('POST', '/server/api/authn/logout').as('logout');
     // Click logout button
-        cy.get('ds-themed-navbar [data-test="logout-button"]').click();
+    cy.get('ds-themed-header [data-test="logout-button"]').click();
     // Wait until above POST command responds before continuing
     // (This ensures next action waits until logout completes)
     cy.wait('@logout');
-    }
+  },
 };
 
 describe('Login Modal', () => {
   it('should login when clicking button & stay on same page', () => {
-        const ENTITYPAGE = '/entities/publication/'.concat(TEST_ENTITY_PUBLICATION);
+    const ENTITYPAGE = '/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'));
     cy.visit(ENTITYPAGE);
 
     // Login menu should exist
@@ -46,7 +46,7 @@ describe('Login Modal', () => {
     page.openLoginMenu();
     cy.get('.form-login').should('be.visible');
 
-        page.submitLoginAndPasswordByPressingButton(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
+    page.submitLoginAndPasswordByPressingButton(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
     cy.get('ds-log-in').should('not.exist');
 
     // Verify we are still on the same page
@@ -66,7 +66,7 @@ describe('Login Modal', () => {
     cy.get('.form-login').should('be.visible');
 
     // Login, and the <ds-log-in> tag should no longer exist
-        page.submitLoginAndPasswordByPressingEnter(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
+    page.submitLoginAndPasswordByPressingEnter(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
     cy.get('.form-login').should('not.exist');
 
     // Verify we are still on homepage
@@ -80,7 +80,7 @@ describe('Login Modal', () => {
 
   it('should support logout', () => {
     // First authenticate & access homepage
-        cy.login(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
+    cy.login(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
     cy.visit('/');
 
     // Verify ds-log-in tag doesn't exist, but ds-log-out tag does exist
@@ -102,12 +102,15 @@ describe('Login Modal', () => {
     page.openLoginMenu();
 
     // Registration link should be visible
-        cy.get('ds-themed-navbar [data-test="register"]').should('be.visible');
+    cy.get('ds-themed-header [data-test="register"]').should('be.visible');
 
     // Click registration link & you should go to registration page
-        cy.get('ds-themed-navbar [data-test="register"]').click();
+    cy.get('ds-themed-header [data-test="register"]').click();
     cy.location('pathname').should('eq', '/register');
     cy.get('ds-register-email').should('exist');
+
+    // Test accessibility of this page
+    testA11y('ds-register-email');
   });
 
   it('should allow forgot password', () => {
@@ -116,11 +119,32 @@ describe('Login Modal', () => {
     page.openLoginMenu();
 
     // Forgot password link should be visible
-        cy.get('ds-themed-navbar [data-test="forgot"]').should('be.visible');
+    cy.get('ds-themed-header [data-test="forgot"]').should('be.visible');
 
     // Click link & you should go to Forgot Password page
-        cy.get('ds-themed-navbar [data-test="forgot"]').click();
+    cy.get('ds-themed-header [data-test="forgot"]').click();
     cy.location('pathname').should('eq', '/forgot');
     cy.get('ds-forgot-email').should('exist');
+
+    // Test accessibility of this page
+    testA11y('ds-forgot-email');
+  });
+
+  it('should pass accessibility tests in menus', () => {
+    cy.visit('/');
+
+    // Open login menu & verify accessibility
+    page.openLoginMenu();
+    cy.get('ds-log-in').should('exist');
+    testA11y('ds-log-in');
+
+    // Now login
+    page.submitLoginAndPasswordByPressingButton(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+    cy.get('ds-log-in').should('not.exist');
+
+    // Open user menu, verify user menu accesibility
+    page.openUserMenu();
+    cy.get('ds-user-menu').should('be.visible');
+    testA11y('ds-user-menu');
   });
 });

cypress/e2e/my-dspace.cy.ts

@@ -1,5 +1,3 @@
-import { Options } from 'cypress-axe';
-import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('My DSpace page', () => {
@@ -7,7 +5,7 @@ describe('My DSpace page', () => {
     cy.visit('/mydspace');
 
     // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
     cy.get('ds-my-dspace-page').should('be.visible');
 
@@ -19,28 +17,14 @@ describe('My DSpace page', () => {
     cy.get('.filter-toggle').click({ multiple: true });
 
     // Analyze <ds-my-dspace-page> for accessibility issues
-        testA11y(
+    testA11y('ds-my-dspace-page');
-            {
-                include: ['ds-my-dspace-page'],
-                exclude: [
-                    ['nouislider'] // Date filter slider is missing ARIA labels. Will be fixed by #1175
-                ],
-            },
-            {
-                rules: {
-                    // Search filters fail these two "moderate" impact rules
-                    'heading-order': { enabled: false },
-                    'landmark-unique': { enabled: false }
-                }
-            } as Options
-        );
   });
 
   it('should have a working detailed view that passes accessibility tests', () => {
     cy.visit('/mydspace');
 
     // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
     cy.get('ds-my-dspace-page').should('be.visible');
 
@@ -49,16 +33,8 @@ describe('My DSpace page', () => {
 
     cy.get('ds-object-detail').should('be.visible');
 
-        // Analyze <ds-search-page> for accessibility issues
+    // Analyze <ds-my-dspace-page> for accessibility issues
-        testA11y('ds-my-dspace-page',
+    testA11y('ds-my-dspace-page');
-            {
-                rules: {
-                    // Search filters fail these two "moderate" impact rules
-                    'heading-order': { enabled: false },
-                    'landmark-unique': { enabled: false }
-                }
-            } as Options
-        );
   });
 
   // NOTE: Deleting existing submissions is exercised by submission.spec.ts
@@ -66,7 +42,7 @@ describe('My DSpace page', () => {
     cy.visit('/mydspace');
 
     // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
     // Open the New Submission dropdown
     cy.get('button[data-test="submission-dropdown"]').click();
@@ -77,10 +53,10 @@ describe('My DSpace page', () => {
     cy.get('ds-create-item-parent-selector').should('be.visible');
 
     // Type in a known Collection name in the search box
-        cy.get('ds-authorized-collection-selector input[type="search"]').type(TEST_SUBMIT_COLLECTION_NAME);
+    cy.get('ds-authorized-collection-selector input[type="search"]').type(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME'));
 
     // Click on the button matching that known Collection name
-        cy.get('ds-authorized-collection-selector button[title="'.concat(TEST_SUBMIT_COLLECTION_NAME).concat('"]')).click();
+    cy.get('ds-authorized-collection-selector button[title="'.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME')).concat('"]')).click();
 
     // New URL should include /workspaceitems, as we've started a new submission
     cy.url().should('include', '/workspaceitems');
@@ -89,7 +65,7 @@ describe('My DSpace page', () => {
     cy.get('ds-submission-edit').should('be.visible');
 
     // A Collection menu button should exist & its value should be the selected collection
-        cy.get('#collectionControlsMenuButton span').should('have.text', TEST_SUBMIT_COLLECTION_NAME);
+    cy.get('#collectionControlsMenuButton span').should('have.text', Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME'));
 
     // Now that we've created a submission, we'll test that we can go back and Edit it.
     // Get our Submission URL, to parse out the ID of this new submission
@@ -138,7 +114,7 @@ describe('My DSpace page', () => {
     cy.visit('/mydspace');
 
     // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
     // Open the New Import dropdown
     cy.get('button[data-test="import-dropdown"]').click();
@@ -150,6 +126,9 @@ describe('My DSpace page', () => {
 
     // The external import searchbox should be visible
     cy.get('ds-submission-import-external-searchbar').should('be.visible');
+
+    // Test for accessibility issues
+    testA11y('ds-submission-import-external');
   });
 
 });

cypress/e2e/pagenotfound.cy.ts

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

cypress/e2e/search-navbar.cy.ts

@@ -1,23 +1,21 @@
-import { TEST_SEARCH_TERM } from 'cypress/support/e2e';
-
 const page = {
   fillOutQueryInNavBar(query) {
     // Click the magnifying glass
-        cy.get('ds-themed-navbar [data-test="header-search-icon"]').click();
+    cy.get('ds-themed-header [data-test="header-search-icon"]').click();
     // Fill out a query in input that appears
-        cy.get('ds-themed-navbar [data-test="header-search-box"]').type(query);
+    cy.get('ds-themed-header [data-test="header-search-box"]').type(query);
   },
   submitQueryByPressingEnter() {
-        cy.get('ds-themed-navbar [data-test="header-search-box"]').type('{enter}');
+    cy.get('ds-themed-header [data-test="header-search-box"]').type('{enter}');
   },
   submitQueryByPressingIcon() {
-        cy.get('ds-themed-navbar [data-test="header-search-icon"]').click();
+    cy.get('ds-themed-header [data-test="header-search-icon"]').click();
-    }
+  },
 };
 
 describe('Search from Navigation Bar', () => {
   // NOTE: these tests currently assume this query will return results!
-    const query = TEST_SEARCH_TERM;
+  const query = Cypress.env('DSPACE_TEST_SEARCH_TERM');
 
   it('should go to search page with correct query if submitted (from home)', () => {
     cy.visit('/');

cypress/e2e/search-page.cy.ts

@@ -1,8 +1,10 @@
-import { Options } from 'cypress-axe';
-import { TEST_SEARCH_TERM } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
+import { Options } from 'cypress-axe';
 
 describe('Search Page', () => {
+  // NOTE: these tests currently assume this query will return results!
+  const query = Cypress.env('DSPACE_TEST_SEARCH_TERM');
+
   it('should redirect to the correct url when query was set and submit button was triggered', () => {
     const queryString = 'Another interesting query string';
     cy.visit('/search');
@@ -13,8 +15,8 @@ describe('Search Page', () => {
   });
 
   it('should load results and pass accessibility tests', () => {
-        cy.visit('/search?query='.concat(TEST_SEARCH_TERM));
+    cy.visit('/search?query='.concat(query));
-        cy.get('[data-test="search-box"]').should('have.value', TEST_SEARCH_TERM);
+    cy.get('[data-test="search-box"]').should('have.value', query);
 
     // <ds-search-page> tag must be loaded
     cy.get('ds-search-page').should('be.visible');
@@ -27,25 +29,11 @@ describe('Search Page', () => {
     cy.get('[data-test="filter-toggle"]').click({ multiple: true });
 
     // Analyze <ds-search-page> for accessibility issues
-        testA11y(
+    testA11y('ds-search-page');
-            {
-                include: ['ds-search-page'],
-                exclude: [
-                    ['nouislider'] // Date filter slider is missing ARIA labels. Will be fixed by #1175
-                ],
-            },
-            {
-                rules: {
-                    // Search filters fail these two "moderate" impact rules
-                    'heading-order': { enabled: false },
-                    'landmark-unique': { enabled: false }
-                }
-            } as Options
-        );
   });
 
   it('should have a working grid view that passes accessibility tests', () => {
-        cy.visit('/search?query='.concat(TEST_SEARCH_TERM));
+    cy.visit('/search?query='.concat(query));
 
     // Click button in sidebar to display grid view
     cy.get('ds-search-sidebar [data-test="grid-view"]').click();
@@ -60,11 +48,10 @@ describe('Search Page', () => {
     testA11y('ds-search-page',
             {
               rules: {
-                    // Search filters fail these two "moderate" impact rules
+                // Card titles fail this test currently
                 'heading-order': { enabled: false },
-                    'landmark-unique': { enabled: false }
+              },
-                }
+            } as Options,
-            } as Options
     );
   });
 });

cypress/e2e/submission.cy.ts

@@ -1,14 +1,16 @@
-import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME, TEST_SUBMIT_COLLECTION_UUID } from 'cypress/support/e2e';
+import { testA11y } from 'cypress/support/utils';
+//import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME, TEST_SUBMIT_COLLECTION_UUID, TEST_ADMIN_USER, TEST_ADMIN_PASSWORD } from 'cypress/support/e2e';
+import { Options } from 'cypress-axe';
 
 describe('New Submission page', () => {
-    // NOTE: We already test that new submissions can be started from MyDSpace in my-dspace.spec.ts
 
+  // NOTE: We already test that new Item submissions can be started from MyDSpace in my-dspace.spec.ts
   it('should create a new submission when using /submit path & pass accessibility', () => {
     // Test that calling /submit with collection & entityType will create a new submission
-        cy.visit('/submit?collection='.concat(TEST_SUBMIT_COLLECTION_UUID).concat('&entityType=none'));
+    cy.visit('/submit?collection='.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID')).concat('&entityType=none'));
 
     // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
     // Should redirect to /workspaceitems, as we've started a new submission
     cy.url().should('include', '/workspaceitems');
@@ -17,7 +19,7 @@ describe('New Submission page', () => {
     cy.get('ds-submission-edit').should('be.visible');
 
     // A Collection menu button should exist & it's value should be the selected collection
-        cy.get('#collectionControlsMenuButton span').should('have.text', TEST_SUBMIT_COLLECTION_NAME);
+    cy.get('#collectionControlsMenuButton span').should('have.text', Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME'));
 
     // 4 sections should be visible by default
     cy.get('div#section_traditionalpageone').should('be.visible');
@@ -25,6 +27,25 @@ describe('New Submission page', () => {
     cy.get('div#section_upload').should('be.visible');
     cy.get('div#section_license').should('be.visible');
 
+    // Test entire page for accessibility
+    testA11y('ds-submission-edit',
+            {
+              rules: {
+                // Author & Subject fields have invalid "aria-multiline" attrs.
+                // See https://github.com/DSpace/dspace-angular/issues/1272
+                'aria-allowed-attr': { enabled: false },
+                // All panels are accordians & fail "aria-required-children" and "nested-interactive".
+                // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216
+                'aria-required-children': { enabled: false },
+                'nested-interactive': { enabled: false },
+                // All select boxes fail to have a name / aria-label.
+                // This is a bug in ng-dynamic-forms and may require https://github.com/DSpace/dspace-angular/issues/2216
+                'select-name': { enabled: false },
+              },
+
+            } as Options,
+    );
+
     // Discard button should work
     // Clicking it will display a confirmation, which we will confirm with another click
     cy.get('button#discard').click();
@@ -33,10 +54,10 @@ describe('New Submission page', () => {
 
   it('should block submission & show errors if required fields are missing', () => {
     // Create a new submission
-        cy.visit('/submit?collection='.concat(TEST_SUBMIT_COLLECTION_UUID).concat('&entityType=none'));
+    cy.visit('/submit?collection='.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID')).concat('&entityType=none'));
 
     // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
     // Attempt an immediate deposit without filling out any fields
     cy.get('button#deposit').click();
@@ -93,10 +114,10 @@ describe('New Submission page', () => {
 
   it('should allow for deposit if all required fields completed & file uploaded', () => {
     // Create a new submission
-        cy.visit('/submit?collection='.concat(TEST_SUBMIT_COLLECTION_UUID).concat('&entityType=none'));
+    cy.visit('/submit?collection='.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID')).concat('&entityType=none'));
 
     // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
     // Fill out all required fields (Title, Date)
     cy.get('input#dc_title').type('DSpace logo uploaded via e2e tests');
@@ -117,7 +138,7 @@ describe('New Submission page', () => {
     // Upload our DSpace logo via drag & drop onto submission form
     // cy.get('div#section_upload')
     cy.get('div.ds-document-drop-zone').selectFile('src/assets/images/dspace-logo.png', {
-            action: 'drag-drop'
+      action: 'drag-drop',
     });
 
     // Wait for upload to complete before proceeding
@@ -131,4 +152,76 @@ describe('New Submission page', () => {
     cy.get('ds-notification div.alert-success').should('be.visible');
   });
 
+  it('is possible to submit a new "Person" and that form passes accessibility', () => {
+    // To submit a different entity type, we'll start from MyDSpace
+    cy.visit('/mydspace');
+
+    // This page is restricted, so we will be shown the login form. Fill it out & submit.
+    // NOTE: At this time, we MUST login as admin to submit Person objects
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+
+    // Open the New Submission dropdown
+    cy.get('button[data-test="submission-dropdown"]').click();
+    // Click on the "Person" type in that dropdown
+    cy.get('#entityControlsDropdownMenu button[title="Person"]').click();
+
+    // This should display the <ds-create-item-parent-selector> (popup window)
+    cy.get('ds-create-item-parent-selector').should('be.visible');
+
+    // Type in a known Collection name in the search box
+    cy.get('ds-authorized-collection-selector input[type="search"]').type(Cypress.env('DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME'));
+
+    // Click on the button matching that known Collection name
+    cy.get('ds-authorized-collection-selector button[title="'.concat(Cypress.env('DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME')).concat('"]')).click();
+
+    // New URL should include /workspaceitems, as we've started a new submission
+    cy.url().should('include', '/workspaceitems');
+
+    // The Submission edit form tag should be visible
+    cy.get('ds-submission-edit').should('be.visible');
+
+    // A Collection menu button should exist & its value should be the selected collection
+    cy.get('#collectionControlsMenuButton span').should('have.text', Cypress.env('DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME'));
+
+    // 3 sections should be visible by default
+    cy.get('div#section_personStep').should('be.visible');
+    cy.get('div#section_upload').should('be.visible');
+    cy.get('div#section_license').should('be.visible');
+
+    // Test entire page for accessibility
+    testA11y('ds-submission-edit',
+            {
+              rules: {
+                // All panels are accordians & fail "aria-required-children" and "nested-interactive".
+                // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216
+                'aria-required-children': { enabled: false },
+                'nested-interactive': { enabled: false },
+              },
+
+            } as Options,
+    );
+
+    // Click the lookup button next to "Publication" field
+    cy.get('button[data-test="lookup-button"]').click();
+
+    // A popup modal window should be visible
+    cy.get('ds-dynamic-lookup-relation-modal').should('be.visible');
+
+    // Popup modal should also pass accessibility tests
+    //testA11y('ds-dynamic-lookup-relation-modal');
+    testA11y({
+      include: ['ds-dynamic-lookup-relation-modal'],
+      exclude: [
+        ['ul.nav-tabs'], // Tabs at top of model have several issues which seem to be caused by ng-bootstrap
+      ],
+    });
+
+    // Close popup window
+    cy.get('ds-dynamic-lookup-relation-modal button.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
+    cy.get('button#discard').click();
+    cy.get('button#discard_submit').click();
+  });
 });

cypress/plugins/index.ts

@@ -1,5 +1,11 @@
 const fs = require('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()
+// method of e2e.ts. They can then be accessed by any tests via the getters below.
+let REST_BASE_URL: string;
+let REST_DOMAIN: string;
+
 // Plugins enable you to tap into, modify, or extend the internal behavior of Cypress
 // For more info, visit https://on.cypress.io/plugins-api
 module.exports = (on, config) => {
@@ -30,6 +36,24 @@ module.exports = (on, config) => {
       }
 
       return null;
-        }
+    },
+    // Save value of REST Base URL, looked up before all tests.
+    // This allows other tests to use it easily via getRestBaseURL() below.
+    saveRestBaseURL(url: string) {
+      return (REST_BASE_URL = url);
+    },
+    // Retrieve currently saved value of REST Base URL
+    getRestBaseURL() {
+      return REST_BASE_URL ;
+    },
+    // Save value of REST Domain, looked up before all tests.
+    // This allows other tests to use it easily via getRestBaseDomain() below.
+    saveRestBaseDomain(domain: string) {
+      return (REST_DOMAIN = domain);
+    },
+    // Retrieve currently saved value of REST Domain
+    getRestBaseDomain() {
+      return REST_DOMAIN ;
+    },
   });
 };

cypress/support/commands.ts

@@ -3,13 +3,15 @@
 // See docs at https://docs.cypress.io/api/cypress-api/custom-commands
 // ***********************************************
 
-import { AuthTokenInfo, TOKENITEM } from 'src/app/core/auth/models/auth-token-info.model';
+import {
-import { DSPACE_XSRF_COOKIE, XSRF_REQUEST_HEADER } from 'src/app/core/xsrf/xsrf.constants';
+  AuthTokenInfo,
-
+  TOKENITEM,
-// NOTE: FALLBACK_TEST_REST_BASE_URL is only used if Cypress cannot read the REST API BaseURL
+} from 'src/app/core/auth/models/auth-token-info.model';
-// from the Angular UI's config.json. See 'login()'.
+import {
-export const FALLBACK_TEST_REST_BASE_URL = 'http://localhost:8080/server';
+  DSPACE_XSRF_COOKIE,
-export const FALLBACK_TEST_REST_DOMAIN = 'localhost';
+  XSRF_REQUEST_HEADER,
+} from 'src/app/core/xsrf/xsrf.constants';
+import { v4 as uuidv4 } from 'uuid';
 
 // Declare Cypress namespace to help with Intellisense & code completion in IDEs
 // ALL custom commands MUST be listed here for code completion to work
@@ -41,6 +43,13 @@ declare global {
              * @param dsoType type of DSpace Object (e.g. "item", "collection", "community")
              */
             generateViewEvent(uuid: string, dsoType: string): typeof generateViewEvent;
+
+            /**
+             * Create a new CSRF token and add to required Cookie. CSRF Token is returned
+             * in chainable in order to allow it to be sent also in required CSRF header.
+             * @returns Chainable reference to allow CSRF token to also be sent in header.
+             */
+            createCSRFCookie(): Chainable<any>;
         }
     }
 }
@@ -54,42 +63,17 @@ declare global {
  * @param password password to login as
  */
 function login(email: string, password: string): void {
-    // Cypress doesn't have access to the running application in Node.js.
+  // Create a fake CSRF cookie/token to use in POST
-    // So, it's not possible to inject or load the AppConfig or environment of the Angular UI.
+  cy.createCSRFCookie().then((csrfToken: string) => {
-    // Instead, we'll read our running application's config.json, which contains the configs &
+    // get our REST API's base URL, also needed for POST
-    // is regenerated at runtime each time the Angular UI application starts up.
+    cy.task('getRestBaseURL').then((baseRestUrl: string) => {
-    cy.task('readUIConfig').then((str: string) => {
-        // Parse config into a JSON object
-        const config = JSON.parse(str);
-
-        // Find the URL of our REST API. Have a fallback ready, just in case 'rest.baseUrl' cannot be found.
-        let baseRestUrl = FALLBACK_TEST_REST_BASE_URL;
-        if (!config.rest.baseUrl) {
-            console.warn("Could not load 'rest.baseUrl' from config.json. Falling back to " + FALLBACK_TEST_REST_BASE_URL);
-        } else {
-            //console.log("Found 'rest.baseUrl' in config.json. Using this REST API for login: ".concat(config.rest.baseUrl));
-            baseRestUrl = config.rest.baseUrl;
-        }
-
-        // Now find domain of our REST API, again with a fallback.
-        let baseDomain = FALLBACK_TEST_REST_DOMAIN;
-        if (!config.rest.host) {
-            console.warn("Could not load 'rest.host' from config.json. Falling back to " + FALLBACK_TEST_REST_DOMAIN);
-        } else {
-            baseDomain = config.rest.host;
-        }
-
-        // Create a fake CSRF Token.  Set it in the required server-side cookie
-        const csrfToken = 'fakeLoginCSRFToken';
-        cy.setCookie(DSPACE_XSRF_COOKIE, csrfToken, { 'domain': baseDomain });
-
       // Now, send login POST request including that CSRF token
       cy.request({
         method: 'POST',
         url: baseRestUrl + '/api/authn/login',
         headers: { [XSRF_REQUEST_HEADER]: csrfToken },
         form: true, // indicates the body should be form urlencoded
-            body: { user: email, password: password }
+        body: { user: email, password: password },
       }).then((resp) => {
         // We expect a successful login
         expect(resp.status).to.eq(200);
@@ -104,9 +88,7 @@ function login(email: string, password: string): void {
         // This ensures the UI will recognize we are logged in on next "visit()"
         cy.setCookie(TOKENITEM, JSON.stringify(authinfo));
       });
-
+    });
-        // Remove cookie with fake CSRF token, as it's no longer needed
-        cy.clearCookie(DSPACE_XSRF_COOKIE);
   });
 }
 // Add as a Cypress command (i.e. assign to 'cy.login')
@@ -141,34 +123,10 @@ Cypress.Commands.add('loginViaForm', loginViaForm);
  * @param dsoType type of DSpace Object (e.g. "item", "collection", "community")
  */
 function generateViewEvent(uuid: string, dsoType: string): void {
-    // Cypress doesn't have access to the running application in Node.js.
+  // Create a fake CSRF cookie/token to use in POST
-    // So, it's not possible to inject or load the AppConfig or environment of the Angular UI.
+  cy.createCSRFCookie().then((csrfToken: string) => {
-    // Instead, we'll read our running application's config.json, which contains the configs &
+    // get our REST API's base URL, also needed for POST
-    // is regenerated at runtime each time the Angular UI application starts up.
+    cy.task('getRestBaseURL').then((baseRestUrl: string) => {
-    cy.task('readUIConfig').then((str: string) => {
-        // Parse config into a JSON object
-        const config = JSON.parse(str);
-
-        // Find the URL of our REST API. Have a fallback ready, just in case 'rest.baseUrl' cannot be found.
-        let baseRestUrl = FALLBACK_TEST_REST_BASE_URL;
-        if (!config.rest.baseUrl) {
-            console.warn("Could not load 'rest.baseUrl' from config.json. Falling back to " + FALLBACK_TEST_REST_BASE_URL);
-        } else {
-            baseRestUrl = config.rest.baseUrl;
-        }
-
-        // Now find domain of our REST API, again with a fallback.
-        let baseDomain = FALLBACK_TEST_REST_DOMAIN;
-        if (!config.rest.host) {
-            console.warn("Could not load 'rest.host' from config.json. Falling back to " + FALLBACK_TEST_REST_DOMAIN);
-        } else {
-            baseDomain = config.rest.host;
-        }
-
-        // Create a fake CSRF Token.  Set it in the required server-side cookie
-        const csrfToken = 'fakeGenerateViewEventCSRFToken';
-        cy.setCookie(DSPACE_XSRF_COOKIE, csrfToken, { 'domain': baseDomain });
-
       // Now, send 'statistics/viewevents' POST request including that fake CSRF token in required header
       cy.request({
         method: 'POST',
@@ -177,6 +135,8 @@ function generateViewEvent(uuid: string, dsoType: string): void {
           [XSRF_REQUEST_HEADER] : csrfToken,
           // use a known public IP address to avoid being seen as a "bot"
           'X-Forwarded-For': '1.1.1.1',
+          // Use a user-agent of a Firefox browser on Windows. This again avoids being seen as a "bot"
+          'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/119.0',
         },
         //form: true, // indicates the body should be form urlencoded
         body: { targetId: uuid, targetType: dsoType },
@@ -184,11 +144,32 @@ function generateViewEvent(uuid: string, dsoType: string): void {
         // We expect a 201 (which means statistics event was created)
         expect(resp.status).to.eq(201);
       });
-
+    });
-        // Remove cookie with fake CSRF token, as it's no longer needed
-        cy.clearCookie(DSPACE_XSRF_COOKIE);
   });
 }
 // Add as a Cypress command (i.e. assign to 'cy.generateViewEvent')
 Cypress.Commands.add('generateViewEvent', generateViewEvent);
 
+
+/**
+ * Can be used by tests to generate a random XSRF/CSRF token and save it to
+ * the required XSRF/CSRF cookie for usage when sending POST requests or similar.
+ * The generated CSRF token is returned in a Chainable to allow it to be also sent
+ * in the CSRF HTTP Header.
+ * @returns a Cypress Chainable which can be used to get the generated CSRF Token
+ */
+function createCSRFCookie(): Cypress.Chainable {
+  // Generate a new token which is a random UUID
+  const csrfToken: string = uuidv4();
+
+  // Save it to our required cookie
+  cy.task('getRestBaseDomain').then((baseDomain: string) => {
+    // Create a fake CSRF Token.  Set it in the required server-side cookie
+    cy.setCookie(DSPACE_XSRF_COOKIE, csrfToken, { 'domain': baseDomain });
+  });
+
+  // return the generated token wrapped in a chainable
+  return cy.wrap(csrfToken);
+}
+// Add as a Cypress command (i.e. assign to 'cy.createCSRFCookie')
+Cypress.Commands.add('createCSRFCookie', createCSRFCookie);

cypress/support/e2e.ts

@@ -15,49 +15,57 @@
 
 // Import all custom Commands (from commands.ts) for all tests
 import './commands';
-
 // Import Cypress Axe tools for all tests
 // https://github.com/component-driven/cypress-axe
 import 'cypress-axe';
 
+import { DSPACE_XSRF_COOKIE } from 'src/app/core/xsrf/xsrf.constants';
+
+// Runs once before all tests
+before(() => {
+  // Cypress doesn't have access to the running application in Node.js.
+  // So, it's not possible to inject or load the AppConfig or environment of the Angular UI.
+  // Instead, we'll read our running application's config.json, which contains the configs &
+  // is regenerated at runtime each time the Angular UI application starts up.
+  cy.task('readUIConfig').then((str: string) => {
+    // Parse config into a JSON object
+    const config = JSON.parse(str);
+
+    // Find URL of our REST API & save to global variable via task
+    let baseRestUrl = FALLBACK_TEST_REST_BASE_URL;
+    if (!config.rest.baseUrl) {
+      console.warn("Could not load 'rest.baseUrl' from config.json. Falling back to " + FALLBACK_TEST_REST_BASE_URL);
+    } else {
+      baseRestUrl = config.rest.baseUrl;
+    }
+    cy.task('saveRestBaseURL', baseRestUrl);
+
+    // Find domain of our REST API & save to global variable via task.
+    let baseDomain = FALLBACK_TEST_REST_DOMAIN;
+    if (!config.rest.host) {
+      console.warn("Could not load 'rest.host' from config.json. Falling back to " + FALLBACK_TEST_REST_DOMAIN);
+    } else {
+      baseDomain = config.rest.host;
+    }
+    cy.task('saveRestBaseDomain', baseDomain);
+
+  });
+});
+
 // Runs once before the first test in each "block"
 beforeEach(() => {
   // Pre-agree to all Klaro cookies by setting the klaro-anonymous cookie
   // This just ensures it doesn't get in the way of matching other objects in the page.
   cy.setCookie('klaro-anonymous', '{%22authentication%22:true%2C%22preferences%22:true%2C%22acknowledgement%22:true%2C%22google-analytics%22:true%2C%22google-recaptcha%22:true}');
+
+  // Remove any CSRF cookies saved from prior tests
+  cy.clearCookie(DSPACE_XSRF_COOKIE);
 });
 
-// For better stability between tests, we visit "about:blank" (i.e. blank page) after each test.
+// NOTE: FALLBACK_TEST_REST_BASE_URL is only used if Cypress cannot read the REST API BaseURL
-// This ensures any remaining/outstanding XHR requests are killed, so they don't affect the next test.
+// from the Angular UI's config.json. See 'before()' above.
-// Borrowed from: https://glebbahmutov.com/blog/visit-blank-page-between-tests/
+const FALLBACK_TEST_REST_BASE_URL = 'http://localhost:8080/server';
-/*afterEach(() => {
+const FALLBACK_TEST_REST_DOMAIN = 'localhost';
-    cy.window().then((win) => {
-      win.location.href = 'about:blank';
-    });
-});*/
-
-
-// Global constants used in tests
-// May be overridden in our cypress.json config file using specified environment variables.
-// Default values listed here are all valid for the Demo Entities Data set available at
-// https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data
-// (This is the data set used in our CI environment)
-
-// Admin account used for administrative tests
-export const TEST_ADMIN_USER = Cypress.env('DSPACE_TEST_ADMIN_USER') || 'dspacedemo+admin@gmail.com';
-export const TEST_ADMIN_PASSWORD = Cypress.env('DSPACE_TEST_ADMIN_PASSWORD') || 'dspace';
-// Community/collection/publication used for view/edit tests
-export const TEST_COLLECTION = Cypress.env('DSPACE_TEST_COLLECTION') || '282164f5-d325-4740-8dd1-fa4d6d3e7200';
-export const TEST_COMMUNITY = Cypress.env('DSPACE_TEST_COMMUNITY') || '0958c910-2037-42a9-81c7-dca80e3892b4';
-export const TEST_ENTITY_PUBLICATION = Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION') || 'e98b0f27-5c19-49a0-960d-eb6ad5287067';
-// Search term (should return results) used in search tests
-export const TEST_SEARCH_TERM = Cypress.env('DSPACE_TEST_SEARCH_TERM') || 'test';
-// Collection used for submission tests
-export const TEST_SUBMIT_COLLECTION_NAME = Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME') || 'Sample Collection';
-export const TEST_SUBMIT_COLLECTION_UUID = Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID') || '9d8334e9-25d3-4a67-9cea-3dffdef80144';
-export const TEST_SUBMIT_USER = Cypress.env('DSPACE_TEST_SUBMIT_USER') || 'dspacedemo+submit@gmail.com';
-export const TEST_SUBMIT_USER_PASSWORD = Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD') || 'dspace';
-
 
 // USEFUL REGEX for testing
 

cypress/support/utils.ts

@@ -7,7 +7,7 @@ import { Options } from 'cypress-axe';
 function terminalLog(violations: Result[]) {
   cy.task(
     'log',
-        `${violations.length} accessibility violation${violations.length === 1 ? '' : 's'} ${violations.length === 1 ? 'was' : 'were'} detected`
+    `${violations.length} accessibility violation${violations.length === 1 ? '' : 's'} ${violations.length === 1 ? 'was' : 'were'} detected`,
   );
   // pluck specific keys to keep the table readable
   const violationData = violations.map(
@@ -17,8 +17,8 @@ function terminalLog(violations: Result[]) {
       description,
       helpUrl,
       nodes: nodes.length,
-            html: nodes.map(node => node.html)
+      html: nodes.map(node => node.html),
-        })
+    }),
   );
 
   // Print violations as an array, since 'node.html' above often breaks table alignment
@@ -38,7 +38,7 @@ export const testA11y = (context?: any, options?: Options) => {
       // Disable color contrast checks as they are inaccurate / result in a lot of false positives
       // See also open issues in axe-core: https://github.com/dequelabs/axe-core/labels/color%20contrast
       { id: 'color-contrast', enabled: false },
-        ]
+    ],
   });
   cy.checkA11y(context, options, terminalLog);
 };

docker/README.md

@@ -23,14 +23,14 @@ the Docker compose scripts in this 'docker' folder.
 This Dockerfile is used to build a *development* DSpace 7 Angular UI image, published as 'dspace/dspace-angular'
 
 ```
-docker build -t dspace/dspace-angular:dspace-7_x .
+docker build -t dspace/dspace-angular:latest .
 ```
 
 This image is built *automatically* after each commit is made to the `main` branch.
 
 Admins to our DockerHub repo can manually publish with the following command.
 ```
-docker push dspace/dspace-angular:dspace-7_x
+docker push dspace/dspace-angular:latest
 ```
 
 ### Dockerfile.dist
@@ -39,7 +39,7 @@ The `Dockerfile.dist` is used to generate a *production* build and runtime envir
 
 ```bash
 # build the latest image
-docker build -f Dockerfile.dist -t dspace/dspace-angular:dspace-7_x-dist .
+docker build -f Dockerfile.dist -t dspace/dspace-angular:latest-dist .
 ```
 
 A default/demo version of this image is built *automatically*.
@@ -101,8 +101,8 @@ and the backend at http://localhost:8080/server/
 
 ## Run DSpace Angular dist build with DSpace Demo site backend
 
-This allows you to run the Angular UI in *production* mode, pointing it at the demo backend
+This allows you to run the Angular UI in *production* mode, pointing it at the demo or sandbox backend
-(https://api7.dspace.org/server/).
+(https://demo.dspace.org/server/ or https://sandbox.dspace.org/server/).
 
 ```
 docker-compose -f docker/docker-compose-dist.yml pull

docker/cli.assetstore.yml

@@ -14,13 +14,8 @@
 # Therefore, it should be kept in sync with that file
 version: "3.7"
 
-networks:
-  dspacenet:
-
 services:
   dspace-cli:
-    networks:
-      dspacenet: {}
     environment:
       # This assetstore zip is available from https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data
       - LOADASSETS=https://github.com/DSpace-Labs/AIP-Files/releases/download/demo-entities-data/assetstore.tar.gz

docker/cli.yml

@@ -13,10 +13,16 @@
 #
 # Therefore, it should be kept in sync with that file
 version: "3.7"
-
+networks:
+  # Default to using network named 'dspacenet' from docker-compose-rest.yml.
+  # Its full name will be prepended with the project name (e.g. "-p d7" means it will be named "d7_dspacenet")
+  # If COMPOSITE_PROJECT_NAME is missing, default value will be "docker" (name of folder this file is in)
+  default:
+    name: ${COMPOSE_PROJECT_NAME:-docker}_dspacenet
+    external: true
 services:
   dspace-cli:
-    image: "${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-dspace-7_x}"
+    image: "${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-latest}"
     container_name: dspace-cli
     environment:
       # Below syntax may look odd, but it is how to override dspace.cfg settings via env variables.
@@ -30,16 +36,12 @@ services:
       # solr.server: Ensure we are using the 'dspacesolr' image for Solr
       solr__P__server: http://dspacesolr:8983/solr
     volumes:
-    - "assetstore:/dspace/assetstore"
+    # Keep DSpace assetstore directory between reboots
+    - assetstore:/dspace/assetstore
     entrypoint: /dspace/bin/dspace
     command: help
-    networks:
-      - dspacenet
     tty: true
     stdin_open: true
 
 volumes:
   assetstore:
-
-networks:
-  dspacenet:

docker/docker-compose-ci.yml

@@ -33,11 +33,11 @@ services:
       # Tell Statistics to commit all views immediately instead of waiting on Solr's autocommit.
       # This allows us to generate statistics in e2e tests so that statistics pages can be tested thoroughly.
       solr__D__statistics__P__autoCommit: 'false'
+    image: "${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-latest-test}"
     depends_on:
     - dspacedb
-    image: dspace/dspace:dspace-7_x-test
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 8080
       target: 8080
@@ -45,8 +45,6 @@ services:
     tty: true
     volumes:
     - assetstore:/dspace/assetstore
-    # Mount DSpace's solr configs to a volume, so that we can share to 'dspacesolr' container (see below)
-    - solr_configs:/dspace/solr
     # Ensure that the database is ready BEFORE starting tomcat
     # 1. While a TCP connection to dspacedb port 5432 is not available, continue to sleep
     # 2. Then, run database migration to init database tables (including any out-of-order ignored migrations, if any)
@@ -70,21 +68,18 @@ services:
       PGDATA: /pgdata
     image: dspace/dspace-postgres-pgcrypto:loadsql
     networks:
-      dspacenet:
+      - dspacenet
     stdin_open: true
     tty: true
     volumes:
+     # Keep Postgres data directory between reboots
     - pgdata:/pgdata
   # DSpace Solr container
   dspacesolr:
     container_name: dspacesolr
-    # Uses official Solr image at https://hub.docker.com/_/solr/
+    image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}"
-    image: solr:8.11-slim
-    # Needs main 'dspace' container to start first to guarantee access to solr_configs
-    depends_on:
-    - dspace
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 8983
       target: 8983
@@ -92,9 +87,6 @@ services:
     tty: true
     working_dir: /var/solr/data
     volumes:
-    # Mount our "solr_configs" volume available under the Solr's configsets folder (in a 'dspace' subfolder)
-    # This copies the Solr configs from main 'dspace' container into 'dspacesolr' via that volume
-    - solr_configs:/opt/solr/server/solr/configsets/dspace
     # 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
@@ -103,14 +95,18 @@ services:
     - '-c'
     - |
       init-var-solr
-      precreate-core authority /opt/solr/server/solr/configsets/dspace/authority
+      precreate-core authority /opt/solr/server/solr/configsets/authority
-      precreate-core oai /opt/solr/server/solr/configsets/dspace/oai
+      cp -r /opt/solr/server/solr/configsets/authority/* authority
-      precreate-core search /opt/solr/server/solr/configsets/dspace/search
+      precreate-core oai /opt/solr/server/solr/configsets/oai
-      precreate-core statistics /opt/solr/server/solr/configsets/dspace/statistics
+      cp -r /opt/solr/server/solr/configsets/oai/* oai
+      precreate-core search /opt/solr/server/solr/configsets/search
+      cp -r /opt/solr/server/solr/configsets/search/* search
+      precreate-core statistics /opt/solr/server/solr/configsets/statistics
+      cp -r /opt/solr/server/solr/configsets/statistics/* statistics
+      precreate-core qaevent /opt/solr/server/solr/configsets/qaevent
+      cp -r /opt/solr/server/solr/configsets/qaevent/* qaevent
       exec solr -f
 volumes:
   assetstore:
   pgdata:
   solr_data:
-  # Special volume used to share Solr configs from 'dspace' to 'dspacesolr' container (see above)
-  solr_configs:

docker/docker-compose-dist.yml

@@ -24,10 +24,10 @@ services:
       # This is because Server Side Rendering (SSR) currently requires a public URL,
       # see this bug: https://github.com/DSpace/dspace-angular/issues/1485
       DSPACE_REST_SSL: 'true'
-      DSPACE_REST_HOST: api7.dspace.org
+      DSPACE_REST_HOST: sandbox.dspace.org
       DSPACE_REST_PORT: 443
       DSPACE_REST_NAMESPACE: /server
-    image: dspace/dspace-angular:dspace-7_x-dist
+    image: dspace/dspace-angular:${DSPACE_VER:-latest}-dist
     build:
       context: ..
       dockerfile: Dockerfile.dist

docker/docker-compose-rest.yml

@@ -39,11 +39,11 @@ services:
       # proxies.trusted.ipranges: This setting is required for a REST API running in Docker to trust requests 
       # from the host machine. This IP range MUST correspond to the 'dspacenet' subnet defined above.
       proxies__P__trusted__P__ipranges: '172.23.0'
-    image: "${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-dspace-7_x-test}"
+    image: "${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-latest-test}"
     depends_on:
     - dspacedb
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 8080
       target: 8080
@@ -51,8 +51,6 @@ services:
     tty: true
     volumes:
     - assetstore:/dspace/assetstore
-    # Mount DSpace's solr configs to a volume, so that we can share to 'dspacesolr' container (see below)
-    - solr_configs:/dspace/solr
     # Ensure that the database is ready BEFORE starting tomcat
     # 1. While a TCP connection to dspacedb port 5432 is not available, continue to sleep
     # 2. Then, run database migration to init database tables
@@ -69,25 +67,23 @@ services:
     container_name: dspacedb
     environment:
       PGDATA: /pgdata
-    image: dspace/dspace-postgres-pgcrypto
+    image: "${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-latest}"
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 5432
       target: 5432
     stdin_open: true
     tty: true
     volumes:
+    # Keep Postgres data directory between reboots
     - pgdata:/pgdata
   # DSpace Solr container  
   dspacesolr:
     container_name: dspacesolr
-    image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-dspace-7_x}"
+    image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}"
-    # Needs main 'dspace' container to start first to guarantee access to solr_configs
-    depends_on:
-    - dspace
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 8983
       target: 8983
@@ -115,10 +111,10 @@ services:
       cp -r /opt/solr/server/solr/configsets/search/* search
       precreate-core statistics /opt/solr/server/solr/configsets/statistics
       cp -r /opt/solr/server/solr/configsets/statistics/* statistics
+      precreate-core qaevent /opt/solr/server/solr/configsets/qaevent
+      cp -r /opt/solr/server/solr/configsets/qaevent/* qaevent
       exec solr -f
 volumes:
   assetstore:
   pgdata:
   solr_data:
-  # Special volume used to share Solr configs from 'dspace' to 'dspacesolr' container (see above)
-  solr_configs:

docker/docker-compose.yml

@@ -24,7 +24,7 @@ services:
       DSPACE_REST_HOST: localhost
       DSPACE_REST_PORT: 8080
       DSPACE_REST_NAMESPACE: /server
-    image: dspace/dspace-angular:dspace-7_x
+    image: dspace/dspace-angular:${DSPACE_VER:-latest}
     build:
       context: ..
       dockerfile: Dockerfile

docs/Configuration.md

@@ -48,7 +48,7 @@ dspace-angular connects to your DSpace installation by using its REST endpoint.
 ```yaml
 rest:
   ssl: true
-  host: api7.dspace.org
+  host: demo.dspace.org
   port: 443
   nameSpace: /server
 }
@@ -57,7 +57,7 @@ rest:
 Alternately you can set the following environment variables. If any of these are set, it will override all configuration files:
 ```
   DSPACE_REST_SSL=true
-  DSPACE_REST_HOST=api7.dspace.org
+  DSPACE_REST_HOST=demo.dspace.org
   DSPACE_REST_PORT=443
   DSPACE_REST_NAMESPACE=/server
 ```

karma.conf.js

@@ -15,7 +15,10 @@ module.exports = function (config) {
     ],
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
-      captureConsole: false
+      captureConsole: false,
+      jasmine: {
+        failSpecWithNoExpectations: true
+      }
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, './coverage/dspace-angular'),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dspace-angular",
-  "version": "7.6.0",
+  "version": "8.0.0-rc1",
   "scripts": {
     "ng": "ng",
     "config:watch": "nodemon",
@@ -15,14 +15,14 @@
     "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
     "build": "ng build --configuration development",
     "build:stats": "ng build --stats-json",
-    "build:prod": "yarn run build:ssr",
+    "build:prod": "cross-env NODE_ENV=production yarn run build:ssr",
     "build:ssr": "ng build --configuration production && ng run dspace-angular:server:production",
     "test": "ng test --source-map=true --watch=false --configuration test",
     "test:watch": "nodemon --exec \"ng test --source-map=true --watch=true --configuration test\"",
     "test:headless": "ng test --source-map=true --watch=false --configuration test --browsers=ChromeHeadless --code-coverage",
     "lint": "ng lint",
     "lint-fix": "ng lint --fix=true",
-    "e2e": "ng e2e",
+    "e2e": "cross-env NODE_ENV=production ng e2e",
     "clean:dev:config": "rimraf src/assets/config.json",
     "clean:coverage": "rimraf coverage",
     "clean:dist": "rimraf dist",
@@ -55,34 +55,34 @@
     "ts-node": "10.2.1"
   },
   "dependencies": {
-    "@angular/animations": "^15.2.8",
+    "@angular/animations": "^16.2.12",
-    "@angular/cdk": "^15.2.8",
+    "@angular/cdk": "^16.2.12",
-    "@angular/common": "^15.2.8",
+    "@angular/common": "^16.2.12",
-    "@angular/compiler": "^15.2.8",
+    "@angular/compiler": "^16.2.12",
-    "@angular/core": "^15.2.8",
+    "@angular/core": "^16.2.12",
-    "@angular/forms": "^15.2.8",
+    "@angular/forms": "^16.2.12",
-    "@angular/localize": "15.2.8",
+    "@angular/localize": "16.2.12",
-    "@angular/platform-browser": "^15.2.8",
+    "@angular/platform-browser": "^16.2.12",
-    "@angular/platform-browser-dynamic": "^15.2.8",
+    "@angular/platform-browser-dynamic": "^16.2.12",
-    "@angular/platform-server": "^15.2.8",
+    "@angular/platform-server": "^16.2.12",
-    "@angular/router": "^15.2.8",
+    "@angular/router": "^16.2.12",
     "@babel/runtime": "7.21.0",
     "@kolkov/ngx-gallery": "^2.0.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.11.3",
     "@ng-bootstrap/ng-bootstrap": "^11.0.0",
-    "@ng-dynamic-forms/core": "^15.0.0",
+    "@ng-dynamic-forms/core": "^16.0.0",
-    "@ng-dynamic-forms/ui-ng-bootstrap": "^15.0.0",
+    "@ng-dynamic-forms/ui-ng-bootstrap": "^16.0.0",
-    "@ngrx/effects": "^15.4.0",
+    "@ngrx/effects": "^16.3.0",
-    "@ngrx/router-store": "^15.4.0",
+    "@ngrx/router-store": "^16.3.0",
-    "@ngrx/store": "^15.4.0",
+    "@ngrx/store": "^16.3.0",
-    "@nguniversal/express-engine": "^15.2.1",
+    "@nguniversal/express-engine": "^16.2.0",
     "@ngx-translate/core": "^14.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "@types/grecaptcha": "^3.0.4",
     "angular-idle-preload": "3.0.0",
     "angulartics2": "^12.2.0",
-    "axios": "^0.27.2",
+    "axios": "^1.6.0",
     "bootstrap": "^4.6.1",
     "cerialize": "0.1.18",
     "cli-progress": "^3.12.0",
@@ -94,11 +94,12 @@
     "date-fns-tz": "^1.3.7",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.9",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "express-rate-limit": "^5.1.3",
     "fast-json-patch": "^3.1.1",
     "filesize": "^6.1.0",
     "http-proxy-middleware": "^1.0.5",
+    "http-terminator": "^3.2.0",
     "isbot": "^3.6.10",
     "js-cookie": "2.2.1",
     "js-yaml": "^4.1.0",
@@ -109,46 +110,44 @@
     "lodash": "^4.17.21",
     "lru-cache": "^7.14.1",
     "markdown-it": "^13.0.1",
-    "markdown-it-mathjax3": "^4.3.2",
     "mirador": "^3.3.0",
     "mirador-dl-plugin": "^0.13.0",
     "mirador-share-plugin": "^0.11.0",
     "morgan": "^1.10.0",
     "ng-mocks": "^14.10.0",
-    "ng2-file-upload": "1.4.0",
+    "ng2-file-upload": "5.0.0",
-    "ng2-nouislider": "^1.8.3",
+    "ng2-nouislider": "^2.0.0",
-    "ngx-infinite-scroll": "^15.0.0",
+    "ngx-infinite-scroll": "^16.0.0",
     "ngx-pagination": "6.0.3",
-    "ngx-sortablejs": "^11.1.0",
+    "ngx-ui-switch": "^14.1.0",
-    "ngx-ui-switch": "^14.0.3",
+    "nouislider": "^15.7.1",
-    "nouislider": "^14.6.3",
     "pem": "1.14.7",
     "prop-types": "^15.8.1",
     "react-copy-to-clipboard": "^5.1.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.0",
-    "sanitize-html": "^2.10.0",
+    "sanitize-html": "^2.12.1",
     "sortablejs": "1.15.0",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
-    "zone.js": "~0.11.5"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "~15.0.0",
+    "@angular-builders/custom-webpack": "~16.0.0",
-    "@angular-devkit/build-angular": "^15.2.6",
+    "@angular-devkit/build-angular": "^16.2.12",
-    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/builder": "16.3.1",
-    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin": "16.3.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "16.3.1",
-    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/schematics": "16.3.1",
-    "@angular-eslint/template-parser": "15.2.1",
+    "@angular-eslint/template-parser": "16.3.1",
-    "@angular/cli": "^15.2.6",
+    "@angular/cli": "^16.2.12",
-    "@angular/compiler-cli": "^15.2.8",
+    "@angular/compiler-cli": "^16.2.12",
-    "@angular/language-service": "^15.2.8",
+    "@angular/language-service": "^16.2.12",
     "@cypress/schematic": "^1.5.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@ngrx/store-devtools": "^15.4.0",
+    "@ngrx/store-devtools": "^16.3.0",
-    "@ngtools/webpack": "^15.2.6",
+    "@ngtools/webpack": "^16.2.12",
-    "@nguniversal/builders": "^15.2.1",
+    "@nguniversal/builders": "^16.2.0",
     "@types/deep-freeze": "0.1.2",
     "@types/ejs": "^3.1.2",
     "@types/express": "^4.17.17",
@@ -159,19 +158,22 @@
     "@types/sanitize-html": "^2.9.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
-    "axe-core": "^4.7.0",
+    "axe-core": "^4.7.2",
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
-    "cypress": "12.10.0",
+    "cypress": "12.17.4",
     "cypress-axe": "^1.4.0",
     "deep-freeze": "0.0.1",
     "eslint": "^8.39.0",
     "eslint-plugin-deprecation": "^1.4.1",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^39.6.4",
+    "eslint-plugin-import-newlines": "^1.3.1",
+    "eslint-plugin-jsdoc": "^45.0.0",
     "eslint-plugin-jsonc": "^2.6.0",
     "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-rxjs": "^5.0.3",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "express-static-gzip": "^2.1.7",
     "jasmine-core": "^3.8.0",
@@ -182,7 +184,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
-    "ngx-mask": "^13.1.7",
+    "ngx-mask": "14.2.4",
     "nodemon": "^2.0.22",
     "postcss": "^8.4",
     "postcss-apply": "0.12.0",
@@ -198,7 +200,7 @@
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.2.5",
     "ts-node": "^8.10.2",
-    "typescript": "~4.8.4",
+    "typescript": "~4.9.3",
     "webpack": "5.76.1",
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^4.2.0",

server.ts

@@ -32,6 +32,7 @@ import isbot from 'isbot';
 import { createCertificate } from 'pem';
 import { createServer } from 'https';
 import { json } from 'body-parser';
+import { createHttpTerminator } from 'http-terminator';
 
 import { readFileSync } from 'fs';
 import { join } from 'path';
@@ -47,7 +48,7 @@ import { hasNoValue, hasValue } from './src/app/shared/empty.util';
 
 import { UIServerConfig } from './src/config/ui-server-config.interface';
 
-import { ServerAppModule } from './src/main.server';
+import bootstrap from './src/main.server';
 
 import { buildAppConfig } from './src/config/config.server';
 import { APP_CONFIG, AppConfig } from './src/config/app-config.interface';
@@ -129,7 +130,8 @@ export function app() {
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
   server.engine('html', (_, options, callback) =>
     ngExpressEngine({
-      bootstrap: ServerAppModule,
+      bootstrap,
+      inlineCriticalCss: environment.universal.inlineCriticalCss,
       providers: [
         {
           provide: REQUEST,
@@ -141,10 +143,10 @@ export function app() {
         },
         {
           provide: APP_CONFIG,
-          useValue: environment
+          useValue: environment,
-        }
+        },
-      ]
+      ],
-    })(_, (options as any), callback)
+    })(_, (options as any), callback),
   );
 
   server.engine('ejs', ejs.renderFile);
@@ -161,7 +163,7 @@ export function app() {
   server.get('/robots.txt', (req, res) => {
     res.setHeader('content-type', 'text/plain');
     res.render('assets/robots.txt.ejs', {
-      'origin': req.protocol + '://' + req.headers.host
+      'origin': req.protocol + '://' + req.headers.host,
     });
   });
 
@@ -176,7 +178,7 @@ export function app() {
   router.use('/sitemap**', createProxyMiddleware({
     target: `${environment.rest.baseUrl}/sitemaps`,
     pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
-    changeOrigin: true
+    changeOrigin: true,
   }));
 
   /**
@@ -185,7 +187,7 @@ export function app() {
   router.use('/signposting**', createProxyMiddleware({
     target: `${environment.rest.baseUrl}`,
     pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
-    changeOrigin: true
+    changeOrigin: true,
   }));
 
   /**
@@ -196,7 +198,7 @@ export function app() {
     const RateLimit = require('express-rate-limit');
     const limiter = new RateLimit({
       windowMs: (environment.ui as UIServerConfig).rateLimiter.windowMs,
-      max: (environment.ui as UIServerConfig).rateLimiter.max
+      max: (environment.ui as UIServerConfig).rateLimiter.max,
     });
     server.use(limiter);
   }
@@ -320,22 +322,23 @@ function initCache() {
   if (botCacheEnabled()) {
     // Initialize a new "least-recently-used" item cache (where least recently used pages are removed first)
     // See https://www.npmjs.com/package/lru-cache
-    // When enabled, each page defaults to expiring after 1 day
+    // When enabled, each page defaults to expiring after 1 day (defined in default-app-config.ts)
     botCache = new LRU( {
       max: environment.cache.serverSide.botCache.max,
-      ttl: environment.cache.serverSide.botCache.timeToLive || 24 * 60 * 60 * 1000, // 1 day
+      ttl: environment.cache.serverSide.botCache.timeToLive,
-      allowStale: environment.cache.serverSide.botCache.allowStale ?? true // if object is stale, return stale value before deleting
+      allowStale: environment.cache.serverSide.botCache.allowStale,
     });
   }
 
   if (anonymousCacheEnabled()) {
     // NOTE: While caches may share SSR pages, this cache must be kept separately because the timeToLive
     // may expire pages more frequently.
-    // When enabled, each page defaults to expiring after 10 seconds (to minimize anonymous users seeing out-of-date content)
+    // When enabled, each page defaults to expiring after 10 seconds (defined in default-app-config.ts)
+    // to minimize anonymous users seeing out-of-date content
     anonymousCache = new LRU( {
       max: environment.cache.serverSide.anonymousCache.max,
-      ttl: environment.cache.serverSide.anonymousCache.timeToLive || 10 * 1000, // 10 seconds
+      ttl: environment.cache.serverSide.anonymousCache.timeToLive,
-      allowStale: environment.cache.serverSide.anonymousCache.allowStale ?? true // if object is stale, return stale value before deleting
+      allowStale: environment.cache.serverSide.anonymousCache.allowStale,
     });
   }
 }
@@ -413,7 +416,7 @@ function checkCacheForRequest(cacheName: string, cache: LRU<string, any>, req, r
   const key = getCacheKey(req);
 
   // Check if this page is in our cache
-  let cachedCopy = cache.get(key);
+  const cachedCopy = cache.get(key);
   if (cachedCopy) {
     if (environment.cache.serverSide.debug) { console.log(`CACHE HIT FOR ${key} in ${cacheName} cache`); }
 
@@ -487,7 +490,7 @@ function saveToCache(req, page: any) {
  */
 function hasNotSucceeded(statusCode) {
   const rgx = new RegExp(/^20+/);
-  return !rgx.test(statusCode)
+  return !rgx.test(statusCode);
 }
 
 function retrieveHeaders(response) {
@@ -525,23 +528,46 @@ function serverStarted() {
  * @param keys SSL credentials
  */
 function createHttpsServer(keys) {
-  createServer({
+  const listener = createServer({
     key: keys.serviceKey,
-    cert: keys.certificate
+    cert: keys.certificate,
   }, app).listen(environment.ui.port, environment.ui.host, () => {
     serverStarted();
   });
+
+  // Graceful shutdown when signalled
+  const terminator = createHttpTerminator({ server: listener });
+  process.on('SIGINT', () => {
+    void (async ()=> {
+      console.debug('Closing HTTPS server on signal');
+      await terminator.terminate().catch(e => { console.error(e); });
+      console.debug('HTTPS server closed');
+    })();
+  });
 }
 
+/**
+ * Create an HTTP server with the configured port and host.
+ */
 function run() {
   const port = environment.ui.port || 4000;
   const host = environment.ui.host || '/';
 
   // Start up the Node server
   const server = app();
-  server.listen(port, host, () => {
+  const listener = server.listen(port, host, () => {
     serverStarted();
   });
+
+  // Graceful shutdown when signalled
+  const terminator = createHttpTerminator({ server: listener });
+  process.on('SIGINT', () => {
+    void (async () => {
+      console.debug('Closing HTTP server on signal');
+      await terminator.terminate().catch(e => { console.error(e); });
+      console.debug('HTTP server closed.');return undefined;
+    })();
+  });
 }
 
 function start() {
@@ -572,7 +598,7 @@ function start() {
     if (serviceKey && certificate) {
       createHttpsServer({
         serviceKey: serviceKey,
-        certificate: certificate
+        certificate: certificate,
       });
     } else {
       console.warn('Disabling certificate validation and proceeding with a self-signed certificate. If this is a production server, it is recommended that you configure a valid certificate instead.');
@@ -581,7 +607,7 @@ function start() {
 
       createCertificate({
         days: 1,
-        selfSigned: true
+        selfSigned: true,
       }, (error, keys) => {
         createHttpsServer(keys);
       });
@@ -602,7 +628,7 @@ function healthCheck(req, res) {
     })
     .catch((error) => {
       res.status(error.response.status).send({
-        error: error.message
+        error: error.message,
       });
     });
 }

src/app/access-control/access-control-routes.ts

@@ -0,0 +1,117 @@
+import { AbstractControl } from '@angular/forms';
+import {
+  mapToCanActivate,
+  Route,
+} from '@angular/router';
+import {
+  DYNAMIC_ERROR_MESSAGES_MATCHER,
+  DynamicErrorMessagesMatcher,
+} from '@ng-dynamic-forms/core';
+
+import { i18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { GroupAdministratorGuard } from '../core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
+import { SiteAdministratorGuard } from '../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
+import {
+  EPERSON_PATH,
+  GROUP_PATH,
+} from './access-control-routing-paths';
+import { BulkAccessComponent } from './bulk-access/bulk-access.component';
+import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component';
+import { EPersonFormComponent } from './epeople-registry/eperson-form/eperson-form.component';
+import { EPersonResolver } from './epeople-registry/eperson-resolver.service';
+import { GroupFormComponent } from './group-registry/group-form/group-form.component';
+import { GroupPageGuard } from './group-registry/group-page.guard';
+import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
+
+/**
+ * Condition for displaying error messages on email form field
+ */
+export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher =
+  (control: AbstractControl, model: any, hasFocus: boolean) => {
+    return (control.touched && !hasFocus) || (control.errors?.emailTaken && hasFocus);
+  };
+
+const providers = [
+  {
+    provide: DYNAMIC_ERROR_MESSAGES_MATCHER,
+    useValue: ValidateEmailErrorStateMatcher,
+  },
+];
+export const ROUTES: Route[] = [
+  {
+    path: EPERSON_PATH,
+    component: EPeopleRegistryComponent,
+    resolve: {
+      breadcrumb: i18nBreadcrumbResolver,
+    },
+    providers,
+    data: { title: 'admin.access-control.epeople.title', breadcrumbKey: 'admin.access-control.epeople' },
+    canActivate: mapToCanActivate([SiteAdministratorGuard]),
+  },
+  {
+    path: `${EPERSON_PATH}/create`,
+    component: EPersonFormComponent,
+    resolve: {
+      breadcrumb: i18nBreadcrumbResolver,
+    },
+    providers,
+    data: { title: 'admin.access-control.epeople.add.title', breadcrumbKey: 'admin.access-control.epeople.add' },
+    canActivate: mapToCanActivate([SiteAdministratorGuard]),
+  },
+  {
+    path: `${EPERSON_PATH}/:id/edit`,
+    component: EPersonFormComponent,
+    resolve: {
+      breadcrumb: i18nBreadcrumbResolver,
+      ePerson: EPersonResolver,
+    },
+    providers,
+    data: { title: 'admin.access-control.epeople.edit.title', breadcrumbKey: 'admin.access-control.epeople.edit' },
+    canActivate: mapToCanActivate([SiteAdministratorGuard]),
+  },
+  {
+    path: GROUP_PATH,
+    component: GroupsRegistryComponent,
+    resolve: {
+      breadcrumb: i18nBreadcrumbResolver,
+    },
+    providers,
+    data: { title: 'admin.access-control.groups.title', breadcrumbKey: 'admin.access-control.groups' },
+    canActivate: mapToCanActivate([GroupAdministratorGuard]),
+  },
+  {
+    path: `${GROUP_PATH}/create`,
+    component: GroupFormComponent,
+    resolve: {
+      breadcrumb: i18nBreadcrumbResolver,
+    },
+    providers,
+    data: {
+      title: 'admin.access-control.groups.title.addGroup',
+      breadcrumbKey: 'admin.access-control.groups.addGroup',
+    },
+    canActivate: mapToCanActivate([GroupAdministratorGuard]),
+  },
+  {
+    path: `${GROUP_PATH}/:groupId/edit`,
+    component: GroupFormComponent,
+    resolve: {
+      breadcrumb: i18nBreadcrumbResolver,
+    },
+    providers,
+    data: {
+      title: 'admin.access-control.groups.title.singleGroup',
+      breadcrumbKey: 'admin.access-control.groups.singleGroup',
+    },
+    canActivate: mapToCanActivate([GroupPageGuard]),
+  },
+  {
+    path: 'bulk-access',
+    component: BulkAccessComponent,
+    resolve: {
+      breadcrumb: i18nBreadcrumbResolver,
+    },
+    data: { title: 'admin.access-control.bulk-access.title', breadcrumbKey: 'admin.access-control.bulk-access' },
+    canActivate: mapToCanActivate([SiteAdministratorGuard]),
+  },
+];

src/app/access-control/access-control-routing-paths.ts

@@ -1,12 +1,22 @@
-import { URLCombiner } from '../core/url-combiner/url-combiner';
 import { getAccessControlModuleRoute } from '../app-routing-paths';
+import { URLCombiner } from '../core/url-combiner/url-combiner';
 
-export const GROUP_EDIT_PATH = 'groups';
+export const EPERSON_PATH = 'epeople';
+
+export function getEPersonsRoute(): string {
+  return new URLCombiner(getAccessControlModuleRoute(), EPERSON_PATH).toString();
+}
+
+export function getEPersonEditRoute(id: string): string {
+  return new URLCombiner(getEPersonsRoute(), id, 'edit').toString();
+}
+
+export const GROUP_PATH = 'groups';
 
 export function getGroupsRoute() {
-  return new URLCombiner(getAccessControlModuleRoute(), GROUP_EDIT_PATH).toString();
+  return new URLCombiner(getAccessControlModuleRoute(), GROUP_PATH).toString();
 }
 
 export function getGroupEditRoute(id: string) {
-  return new URLCombiner(getAccessControlModuleRoute(), GROUP_EDIT_PATH, id).toString();
+  return new URLCombiner(getGroupsRoute(), id, 'edit').toString();
 }

src/app/access-control/access-control-routing.module.ts

@@ -1,73 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component';
-import { GroupFormComponent } from './group-registry/group-form/group-form.component';
-import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
-import { GROUP_EDIT_PATH } from './access-control-routing-paths';
-import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
-import { GroupPageGuard } from './group-registry/group-page.guard';
-import {
-  GroupAdministratorGuard
-} from '../core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
-import {
-  SiteAdministratorGuard
-} from '../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
-import { BulkAccessComponent } from './bulk-access/bulk-access.component';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      {
-        path: 'epeople',
-        component: EPeopleRegistryComponent,
-        resolve: {
-          breadcrumb: I18nBreadcrumbResolver
-        },
-        data: { title: 'admin.access-control.epeople.title', breadcrumbKey: 'admin.access-control.epeople' },
-        canActivate: [SiteAdministratorGuard]
-      },
-      {
-        path: GROUP_EDIT_PATH,
-        component: GroupsRegistryComponent,
-        resolve: {
-          breadcrumb: I18nBreadcrumbResolver
-        },
-        data: { title: 'admin.access-control.groups.title', breadcrumbKey: 'admin.access-control.groups' },
-        canActivate: [GroupAdministratorGuard]
-      },
-      {
-        path: `${GROUP_EDIT_PATH}/newGroup`,
-        component: GroupFormComponent,
-        resolve: {
-          breadcrumb: I18nBreadcrumbResolver
-        },
-        data: { title: 'admin.access-control.groups.title.addGroup', breadcrumbKey: 'admin.access-control.groups.addGroup' },
-        canActivate: [GroupAdministratorGuard]
-      },
-      {
-        path: `${GROUP_EDIT_PATH}/:groupId`,
-        component: GroupFormComponent,
-        resolve: {
-          breadcrumb: I18nBreadcrumbResolver
-        },
-        data: { title: 'admin.access-control.groups.title.singleGroup', breadcrumbKey: 'admin.access-control.groups.singleGroup' },
-        canActivate: [GroupPageGuard]
-      },
-      {
-        path: 'bulk-access',
-        component: BulkAccessComponent,
-        resolve: {
-          breadcrumb: I18nBreadcrumbResolver
-        },
-        data: { title: 'admin.access-control.bulk-access.title', breadcrumbKey: 'admin.access-control.bulk-access' },
-        canActivate: [SiteAdministratorGuard]
-      },
-    ])
-  ]
-})
-/**
- * Routing module for the AccessControl section of the admin sidebar
- */
-export class AccessControlRoutingModule {
-
-}

src/app/access-control/access-control.module.ts

@@ -1,67 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { SharedModule } from '../shared/shared.module';
-import { AccessControlRoutingModule } from './access-control-routing.module';
-import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component';
-import { EPersonFormComponent } from './epeople-registry/eperson-form/eperson-form.component';
-import { GroupFormComponent } from './group-registry/group-form/group-form.component';
-import { MembersListComponent } from './group-registry/group-form/members-list/members-list.component';
-import { SubgroupsListComponent } from './group-registry/group-form/subgroup-list/subgroups-list.component';
-import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
-import { FormModule } from '../shared/form/form.module';
-import { DYNAMIC_ERROR_MESSAGES_MATCHER, DynamicErrorMessagesMatcher } from '@ng-dynamic-forms/core';
-import { AbstractControl } from '@angular/forms';
-import { BulkAccessComponent } from './bulk-access/bulk-access.component';
-import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
-import { BulkAccessBrowseComponent } from './bulk-access/browse/bulk-access-browse.component';
-import { BulkAccessSettingsComponent } from './bulk-access/settings/bulk-access-settings.component';
-import { SearchModule } from '../shared/search/search.module';
-import { AccessControlFormModule } from '../shared/access-control-form-container/access-control-form.module';
-
-/**
- * Condition for displaying error messages on email form field
- */
-export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher =
-  (control: AbstractControl, model: any, hasFocus: boolean) => {
-    return (control.touched && !hasFocus) || (control.errors?.emailTaken && hasFocus);
-  };
-
-@NgModule({
-  imports: [
-    CommonModule,
-    SharedModule,
-    RouterModule,
-    AccessControlRoutingModule,
-    FormModule,
-    NgbAccordionModule,
-    SearchModule,
-    AccessControlFormModule,
-  ],
-  exports: [
-    MembersListComponent,
-  ],
-  declarations: [
-    EPeopleRegistryComponent,
-    EPersonFormComponent,
-    GroupsRegistryComponent,
-    GroupFormComponent,
-    SubgroupsListComponent,
-    MembersListComponent,
-    BulkAccessComponent,
-    BulkAccessBrowseComponent,
-    BulkAccessSettingsComponent,
-  ],
-  providers: [
-    {
-      provide: DYNAMIC_ERROR_MESSAGES_MATCHER,
-      useValue: ValidateEmailErrorStateMatcher
-    },
-  ]
-})
-/**
- * This module handles all components related to the access control pages
- */
-export class AccessControlModule {
-
-}

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

@@ -1,15 +1,15 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'browse'">
   <ngb-panel [id]="'browse'">
     <ng-template ngbPanelHeader>
-      <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
+      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (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')"
+                [attr.aria-expanded]="acc.isExpanded('browse')"
-                aria-controls="collapsePanels">
+                aria-controls="bulk-access-browse-panel-content">
           {{ 'admin.access-control.bulk-access-browse.header' | translate }}
         </button>
-        <div class="text-right d-flex">
+        <div class="text-right d-flex gap-2">
-          <div class="ml-3 d-inline-block">
+          <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>
@@ -17,8 +17,9 @@
       </div>
     </ng-template>
     <ng-template ngbPanelContent>
+      <div id="bulk-access-browse-panel-content">
         <ul ngbNav #nav="ngbNav" [(activeId)]="activateId" class="nav-pills">
-        <li [ngbNavItem]="'search'">
+          <li [ngbNavItem]="'search'" role="presentation">
             <a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
             <ng-template ngbNavContent>
               <div class="mx-n3">
@@ -29,7 +30,7 @@
               </div>
             </ng-template>
           </li>
-        <li [ngbNavItem]="'selected'">
+          <li [ngbNavItem]="'selected'" role="presentation">
             <a ngbNavLink>
               {{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}
             </a>
@@ -62,6 +63,7 @@
           </li>
         </ul>
         <div [ngbNavOutlet]="nav" class="mt-5"></div>
+      </div>
     </ng-template>
   </ngb-panel>
 </ngb-accordion>

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

@@ -1,16 +1,28 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-
+import {
-import { of } from 'rxjs';
+  ComponentFixture,
-import { NgbAccordionModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  NgbAccordionModule,
+  NgbNavModule,
+} from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
 
-import { BulkAccessBrowseComponent } from './bulk-access-browse.component';
+import { buildPaginatedList } from '../../../core/data/paginated-list.model';
+import { PageInfo } from '../../../core/shared/page-info.model';
+import { getMockThemeService } from '../../../shared/mocks/theme-service.mock';
+import { ListableObjectComponentLoaderComponent } from '../../../shared/object-collection/shared/listable-object/listable-object-component-loader.component';
+import { SelectableListItemControlComponent } from '../../../shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component';
 import { SelectableListService } from '../../../shared/object-list/selectable-list/selectable-list.service';
 import { SelectableObject } from '../../../shared/object-list/selectable-list/selectable-list.service.spec';
-import { PageInfo } from '../../../core/shared/page-info.model';
+import { PaginationComponent } from '../../../shared/pagination/pagination.component';
-import { buildPaginatedList } from '../../../core/data/paginated-list.model';
 import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
+import { ThemedSearchComponent } from '../../../shared/search/themed-search.component';
+import { ThemeService } from '../../../shared/theme-support/theme.service';
+import { BulkAccessBrowseComponent } from './bulk-access-browse.component';
 
 describe('BulkAccessBrowseComponent', () => {
   let component: BulkAccessBrowseComponent;
@@ -31,14 +43,28 @@ describe('BulkAccessBrowseComponent', () => {
       imports: [
         NgbAccordionModule,
         NgbNavModule,
-        TranslateModule.forRoot()
+        TranslateModule.forRoot(),
+        BulkAccessBrowseComponent,
+      ],
+      providers: [
+        { provide: SelectableListService, useValue: selectableListService },
+        { provide: ThemeService, useValue: getMockThemeService() },
       ],
-      declarations: [BulkAccessBrowseComponent],
-      providers: [ { provide: SelectableListService, useValue: selectableListService }, ],
       schemas: [
-        NO_ERRORS_SCHEMA
+        NO_ERRORS_SCHEMA,
-      ]
+      ],
-    }).compileComponents();
+    })
+      .overrideComponent(BulkAccessBrowseComponent, {
+        remove: {
+          imports: [
+            PaginationComponent,
+            ThemedSearchComponent,
+            SelectableListItemControlComponent,
+            ListableObjectComponentLoaderComponent,
+          ],
+        },
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -72,7 +98,7 @@ describe('BulkAccessBrowseComponent', () => {
       'elementsPerPage': 5,
       'totalElements': 2,
       'totalPages': 1,
-      'currentPage': 1
+      'currentPage': 1,
     }), [selected1, selected2]);
     const rd = createSuccessfulRemoteDataObject(list);
 

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

@@ -1,19 +1,48 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+  AsyncPipe,
+  NgForOf,
+  NgIf,
+} from '@angular/common';
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {
+  NgbAccordionModule,
+  NgbNavModule,
+} from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgxPaginationModule } from 'ngx-pagination';
+import {
+  BehaviorSubject,
+  Subscription,
+} from 'rxjs';
+import {
+  distinctUntilChanged,
+  map,
+} from 'rxjs/operators';
 
-import { BehaviorSubject, Subscription } from 'rxjs';
+import {
-import { distinctUntilChanged, map } from 'rxjs/operators';
+  buildPaginatedList,
-
+  PaginatedList,
-import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
+} from '../../../core/data/paginated-list.model';
-import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
-import { SelectableListService } from '../../../shared/object-list/selectable-list/selectable-list.service';
-import { SelectableListState } from '../../../shared/object-list/selectable-list/selectable-list.reducer';
 import { RemoteData } from '../../../core/data/remote-data';
-import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
-import { ListableObject } from '../../../shared/object-collection/shared/listable-object.model';
-import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
 import { PageInfo } from '../../../core/shared/page-info.model';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-configuration.service';
 import { hasValue } from '../../../shared/empty.util';
+import { ListableObject } from '../../../shared/object-collection/shared/listable-object.model';
+import { ListableObjectComponentLoaderComponent } from '../../../shared/object-collection/shared/listable-object/listable-object-component-loader.component';
+import { SelectableListItemControlComponent } from '../../../shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component';
+import { SelectableListState } from '../../../shared/object-list/selectable-list/selectable-list.reducer';
+import { SelectableListService } from '../../../shared/object-list/selectable-list/selectable-list.service';
+import { PaginationComponent } from '../../../shared/pagination/pagination.component';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
+import { ThemedSearchComponent } from '../../../shared/search/themed-search.component';
+import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
 
 @Component({
   selector: 'ds-bulk-access-browse',
@@ -22,9 +51,24 @@ import { hasValue } from '../../../shared/empty.util';
   providers: [
     {
       provide: SEARCH_CONFIG_SERVICE,
-      useClass: SearchConfigurationService
+      useClass: SearchConfigurationService,
-    }
+    },
-  ]
+  ],
+  imports: [
+    PaginationComponent,
+    AsyncPipe,
+    NgbAccordionModule,
+    TranslateModule,
+    NgIf,
+    NgbNavModule,
+    ThemedSearchComponent,
+    BrowserOnlyPipe,
+    NgForOf,
+    NgxPaginationModule,
+    SelectableListItemControlComponent,
+    ListableObjectComponentLoaderComponent,
+  ],
+  standalone: true,
 })
 export class BulkAccessBrowseComponent implements OnInit, OnDestroy {
 
@@ -49,7 +93,7 @@ export class BulkAccessBrowseComponent implements OnInit, OnDestroy {
   paginationOptions$: BehaviorSubject<PaginationComponentOptions> = new BehaviorSubject<PaginationComponentOptions>(Object.assign(new PaginationComponentOptions(), {
     id: 'bas',
     pageSize: 5,
-    currentPage: 1
+    currentPage: 1,
   }));
 
   /**
@@ -67,20 +111,20 @@ export class BulkAccessBrowseComponent implements OnInit, OnDestroy {
     this.subs.push(
       this.selectableListService.getSelectableList(this.listId).pipe(
         distinctUntilChanged(),
-        map((list: SelectableListState) => this.generatePaginatedListBySelectedElements(list))
+        map((list: SelectableListState) => this.generatePaginatedListBySelectedElements(list)),
-      ).subscribe(this.objectsSelected$)
+      ).subscribe(this.objectsSelected$),
     );
   }
 
   pageNext() {
     this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, {
-      currentPage: this.paginationOptions$.value.currentPage + 1
+      currentPage: this.paginationOptions$.value.currentPage + 1,
     }));
   }
 
   pagePrev() {
     this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, {
-      currentPage: this.paginationOptions$.value.currentPage - 1
+      currentPage: this.paginationOptions$.value.currentPage - 1,
     }));
   }
 
@@ -99,12 +143,12 @@ export class BulkAccessBrowseComponent implements OnInit, OnDestroy {
       elementsPerPage: this.paginationOptions$.value.pageSize,
       totalElements: list?.selection.length,
       totalPages: this.calculatePageCount(this.paginationOptions$.value.pageSize, list?.selection.length),
-      currentPage: this.paginationOptions$.value.currentPage
+      currentPage: this.paginationOptions$.value.currentPage,
     });
     if (pageInfo.currentPage > pageInfo.totalPages) {
       pageInfo.currentPage = pageInfo.totalPages;
       this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, {
-        currentPage: pageInfo.currentPage
+        currentPage: pageInfo.currentPage,
       }));
     }
     return createSuccessfulRemoteDataObject(buildPaginatedList(pageInfo, list?.selection || []));

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

@@ -1,4 +1,5 @@
 <div class="container">
+  <h1>{{ 'admin.access-control.bulk-access.title' | translate }}</h1>
   <ds-bulk-access-browse [listId]="listId"></ds-bulk-access-browse>
   <div class="clearfix mb-3"></div>
   <ds-bulk-access-settings #dsBulkSettings ></ds-bulk-access-settings>

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

@@ -1,18 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 
-import { BulkAccessComponent } from './bulk-access.component';
-import { BulkAccessControlService } from '../../shared/access-control-form-container/bulk-access-control.service';
-import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
-import { SelectableListState } from '../../shared/object-list/selectable-list/selectable-list.reducer';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { Process } from '../../process-page/processes/process.model';
-import { RouterTestingModule } from '@angular/router/testing';
+import { BulkAccessControlService } from '../../shared/access-control-form-container/bulk-access-control.service';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { SelectableListState } from '../../shared/object-list/selectable-list/selectable-list.reducer';
+import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { BulkAccessComponent } from './bulk-access.component';
+import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.component';
 
 describe('BulkAccessComponent', () => {
   let component: BulkAccessComponent;
@@ -31,35 +36,35 @@ describe('BulkAccessComponent', () => {
         'startDate': {
           'year': 2026,
           'month': 5,
-          'day': 31
+          'day': 31,
+        },
+        'endDate': null,
       },
-        'endDate': null
-      }
     ],
     'state': {
       'item': {
         'toggleStatus': true,
-        'accessMode': 'replace'
+        'accessMode': 'replace',
       },
       'bitstream': {
         'toggleStatus': false,
         'accessMode': '',
         'changesLimit': '',
-        'selectedBitstreams': []
+        'selectedBitstreams': [],
-      }
+      },
-    }
+    },
   };
 
   const mockFile = {
     'uuids': [
-      '1234', '5678'
+      '1234', '5678',
     ],
-    'file': {  }
+    'file': {  },
   };
 
   const mockSettings: any = jasmine.createSpyObj('AccessControlFormContainerComponent',  {
     getValue: jasmine.createSpy('getValue'),
-    reset: jasmine.createSpy('reset')
+    reset: jasmine.createSpy('reset'),
   });
   const selection: any[] = [{ indexableObject: { uuid: '1234' } }, { indexableObject: { uuid: '5678' } }];
   const selectableListState: SelectableListState = { id: 'test', selection };
@@ -71,15 +76,23 @@ describe('BulkAccessComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        TranslateModule.forRoot()
+        TranslateModule.forRoot(),
+        BulkAccessComponent,
       ],
-      declarations: [ BulkAccessComponent ],
       providers: [
         { provide: BulkAccessControlService, useValue: bulkAccessControlServiceMock },
         { provide: NotificationsService, useValue: NotificationsServiceStub },
-        { provide: SelectableListService, useValue: selectableListServiceMock }
+        { provide: SelectableListService, useValue: selectableListServiceMock },
+        { provide: ThemeService, useValue: getMockThemeService() },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(BulkAccessComponent, {
+        remove: {
+          imports: [
+            BulkAccessSettingsComponent,
+          ],
+        },
       })
       .compileComponents();
   });

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

@@ -1,17 +1,34 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  BehaviorSubject,
+  Subscription,
+} from 'rxjs';
+import {
+  distinctUntilChanged,
+  map,
+} from 'rxjs/operators';
 
-import { BehaviorSubject, Subscription } from 'rxjs';
-import { distinctUntilChanged, map } from 'rxjs/operators';
-
-import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.component';
 import { BulkAccessControlService } from '../../shared/access-control-form-container/bulk-access-control.service';
 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';
+import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.component';
 
 @Component({
   selector: 'ds-bulk-access',
   templateUrl: './bulk-access.component.html',
-  styleUrls: ['./bulk-access.component.scss']
+  styleUrls: ['./bulk-access.component.scss'],
+  imports: [
+    TranslateModule,
+    BulkAccessSettingsComponent,
+    BulkAccessBrowseComponent,
+  ],
+  standalone: true,
 })
 export class BulkAccessComponent implements OnInit {
 
@@ -37,7 +54,7 @@ export class BulkAccessComponent implements OnInit {
 
   constructor(
     private bulkAccessControlService: BulkAccessControlService,
-    private selectableListService: SelectableListService
+    private selectableListService: SelectableListService,
   ) {
   }
 
@@ -45,8 +62,8 @@ export class BulkAccessComponent implements OnInit {
     this.subs.push(
       this.selectableListService.getSelectableList(this.listId).pipe(
         distinctUntilChanged(),
-        map((list: SelectableListState) => this.generateIdListBySelectedElements(list))
+        map((list: SelectableListState) => this.generateIdListBySelectedElements(list)),
-      ).subscribe(this.objectsSelected$)
+      ).subscribe(this.objectsSelected$),
     );
   }
 
@@ -74,12 +91,12 @@ export class BulkAccessComponent implements OnInit {
     const { file } = this.bulkAccessControlService.createPayloadFile({
       bitstreamAccess,
       itemAccess,
-      state: settings.state
+      state: settings.state,
     });
 
     this.bulkAccessControlService.executeScript(
       this.objectsSelected$.value || [],
-      file
+      file,
     ).subscribe();
   }
 

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

@@ -1,13 +1,13 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'settings'">
   <ngb-panel [id]="'settings'">
     <ng-template ngbPanelHeader>
-      <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('settings')" data-test="settings">
+      <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('browse')"
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded('settings')"
-                aria-controls="collapsePanels">
+                aria-controls="bulk-access-settings-panel-content">
           {{ 'admin.access-control.bulk-access-settings.header' | translate }}
         </button>
-        <div class="text-right d-flex">
+        <div class="text-right d-flex gap-2">
-          <div class="ml-3 d-inline-block">
+          <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>
@@ -15,7 +15,7 @@
       </div>
     </ng-template>
     <ng-template ngbPanelContent>
-      <ds-access-control-form-container #dsAccessControlForm [showSubmit]="false"></ds-access-control-form-container>
+      <ds-access-control-form-container id="bulk-access-settings-panel-content" #dsAccessControlForm [showSubmit]="false"></ds-access-control-form-container>
     </ng-template>
   </ngb-panel>
 </ngb-accordion>

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

@@ -1,8 +1,13 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+
+import { AccessControlFormContainerComponent } from '../../../shared/access-control-form-container/access-control-form-container.component';
 import { BulkAccessSettingsComponent } from './bulk-access-settings.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('BulkAccessSettingsComponent', () => {
   let component: BulkAccessSettingsComponent;
@@ -15,36 +20,39 @@ describe('BulkAccessSettingsComponent', () => {
         'startDate': {
           'year': 2026,
           'month': 5,
-          'day': 31
+          'day': 31,
+        },
+        'endDate': null,
       },
-        'endDate': null
-      }
     ],
     'state': {
       'item': {
         'toggleStatus': true,
-        'accessMode': 'replace'
+        'accessMode': 'replace',
       },
       'bitstream': {
         'toggleStatus': false,
         'accessMode': '',
         'changesLimit': '',
-        'selectedBitstreams': []
+        'selectedBitstreams': [],
-      }
+      },
-    }
+    },
   };
 
   const mockControl: any = jasmine.createSpyObj('AccessControlFormContainerComponent',  {
     getFormValue: jasmine.createSpy('getFormValue'),
-    reset: jasmine.createSpy('reset')
+    reset: jasmine.createSpy('reset'),
   });
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [NgbAccordionModule, TranslateModule.forRoot()],
+      imports: [NgbAccordionModule, TranslateModule.forRoot(), BulkAccessSettingsComponent],
-      declarations: [BulkAccessSettingsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
-      schemas: [NO_ERRORS_SCHEMA]
+    })
-    }).compileComponents();
+      .overrideComponent(BulkAccessSettingsComponent, {
+        remove: { imports: [AccessControlFormContainerComponent] },
+      })
+      .compileComponents();
   });
 
   beforeEach(() => {

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

@@ -1,13 +1,25 @@
-import { Component, ViewChild } from '@angular/core';
+import { NgIf } from '@angular/common';
 import {
-  AccessControlFormContainerComponent
+  Component,
-} from '../../../shared/access-control-form-container/access-control-form-container.component';
+  ViewChild,
+} from '@angular/core';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { AccessControlFormContainerComponent } from '../../../shared/access-control-form-container/access-control-form-container.component';
 
 @Component({
   selector: 'ds-bulk-access-settings',
   templateUrl: 'bulk-access-settings.component.html',
   styleUrls: ['./bulk-access-settings.component.scss'],
-  exportAs: 'dsBulkSettings'
+  exportAs: 'dsBulkSettings',
+  imports: [
+    NgbAccordionModule,
+    TranslateModule,
+    NgIf,
+    AccessControlFormContainerComponent,
+  ],
+  standalone: true,
 })
 export class BulkAccessSettingsComponent {
 

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

@@ -1,5 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
+
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { type } from '../../shared/ngrx/type';
 

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

@@ -2,24 +2,20 @@
   <div class="epeople-registry row">
     <div class="col-12">
       <div class="d-flex justify-content-between border-bottom mb-3">
-        <h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>
+        <h1 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h1>
 
-        <div *ngIf="!isEPersonFormShown">
+        <div>
           <button class="mr-auto btn btn-success addEPerson-button"
-                  (click)="isEPersonFormShown = true">
+                  [routerLink]="'create'">
             <i class="fas fa-plus"></i>
             <span class="d-none d-sm-inline ml-1">{{labelPrefix + 'button.add' | translate}}</span>
           </button>
         </div>
       </div>
 
-      <ds-eperson-form *ngIf="isEPersonFormShown" (submitForm)="reset()"
+      <h2 id="search" class="border-bottom pb-2">
-                       (cancelForm)="isEPersonFormShown = false"></ds-eperson-form>
+        {{labelPrefix + 'search.head' | translate}}
-
+      </h2>
-      <div *ngIf="!isEPersonFormShown">
-        <h3 id="search" class="border-bottom pb-2">{{labelPrefix + 'search.head' | translate}}
-
-        </h3>
       <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">
@@ -47,7 +43,7 @@
 
       <ds-themed-loading *ngIf="searching$ | async"></ds-themed-loading>
       <ds-pagination
-          *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
+        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && (searching$ | async) !== true"
         [paginationOptions]="config"
         [pageInfoState]="pageInfoState$"
         [collectionSize]="(pageInfoState$ | async)?.totalElements"
@@ -72,12 +68,12 @@
               <td>{{epersonDto.eperson.email}}</td>
               <td>
                 <div class="btn-group edit-field">
-                    <button (click)="toggleEditEPerson(epersonDto.eperson)"
+                  <button [routerLink]="getEditEPeoplePage(epersonDto.eperson.id)"
                           class="btn btn-outline-primary btn-sm access-control-editEPersonButton"
                           title="{{labelPrefix + 'table.edit.buttons.edit' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
                     <i class="fas fa-edit fa-fw"></i>
                   </button>
-                    <button [disabled]="!epersonDto.ableToDelete" (click)="deleteEPerson(epersonDto.eperson)"
+                  <button *ngIf="epersonDto.ableToDelete" (click)="deleteEPerson(epersonDto.eperson)"
                           class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
                           title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
                     <i class="fas fa-trash-alt fa-fw"></i>
@@ -91,10 +87,9 @@
 
       </ds-pagination>
 
-        <div *ngIf="(pageInfoState$ | async)?.totalElements == 0" class="alert alert-info w-100 mb-2" role="alert">
+      <div *ngIf="(pageInfoState$ | async)?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
         {{labelPrefix + 'no-items' | translate}}
       </div>
     </div>
   </div>
 </div>
-</div>

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

@@ -1,47 +1,75 @@
-import { Router } from '@angular/router';
-import { Observable, of as observableOf } from 'rxjs';
 import { CommonModule } from '@angular/common';
-import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import {
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+  DebugElement,
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+  NO_ERRORS_SCHEMA,
-import { BrowserModule, By } from '@angular/platform-browser';
+} from '@angular/core';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import {
-import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+  ComponentFixture,
-import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
+  fakeAsync,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  BrowserModule,
+  By,
+} from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import {
+  NgbModal,
+  NgbModule,
+} from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  Observable,
+  of as observableOf,
+} from 'rxjs';
+
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { FindListOptions } from '../../core/data/find-list-options.model';
+import {
+  buildPaginatedList,
+  PaginatedList,
+} from '../../core/data/paginated-list.model';
 import { RemoteData } from '../../core/data/remote-data';
+import { RequestService } from '../../core/data/request.service';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
+import { PaginationService } from '../../core/pagination/pagination.service';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { FormBuilderService } from '../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
-import { EPeopleRegistryComponent } from './epeople-registry.component';
-import { EPersonMock, EPersonMock2 } from '../../shared/testing/eperson.mock';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { getMockFormBuilderService } from '../../shared/mocks/form-builder-service.mock';
-import { getMockTranslateService } from '../../shared/mocks/translate.service.mock';
+import { RouterMock } from '../../shared/mocks/router.mock';
-import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { PaginationComponent } from '../../shared/pagination/pagination.component';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import {
+  EPersonMock,
+  EPersonMock2,
+} from '../../shared/testing/eperson.mock';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
-import { RouterStub } from '../../shared/testing/router.stub';
-import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { RequestService } from '../../core/data/request.service';
-import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../core/data/find-list-options.model';
+import { EPeopleRegistryComponent } from './epeople-registry.component';
+import { EPersonFormComponent } from './eperson-form/eperson-form.component';
 
 describe('EPeopleRegistryComponent', () => {
   let component: EPeopleRegistryComponent;
   let fixture: ComponentFixture<EPeopleRegistryComponent>;
-  let translateService: TranslateService;
   let builderService: FormBuilderService;
 
-  let mockEPeople;
+  let mockEPeople: EPerson[];
   let ePersonDataServiceStub: any;
   let authorizationService: AuthorizationDataService;
-  let modalService;
+  let modalService: NgbModal;
+  let paginationService: PaginationServiceStub;
 
-  let paginationService;
+  beforeEach(waitForAsync(async () => {
-
-  beforeEach(waitForAsync(() => {
     jasmine.getEnv().allowRespy(true);
     mockEPeople = [EPersonMock, EPersonMock2];
     ePersonDataServiceStub = {
@@ -52,7 +80,7 @@ describe('EPeopleRegistryComponent', () => {
           elementsPerPage: this.allEpeople.length,
           totalElements: this.allEpeople.length,
           totalPages: 1,
-          currentPage: 1
+          currentPage: 1,
         }), this.allEpeople));
       },
       getActiveEPerson(): Observable<EPerson> {
@@ -67,7 +95,7 @@ describe('EPeopleRegistryComponent', () => {
             elementsPerPage: [result].length,
             totalElements: [result].length,
             totalPages: 1,
-            currentPage: 1
+            currentPage: 1,
           }), [result]));
         }
         if (scope === 'metadata') {
@@ -76,7 +104,7 @@ describe('EPeopleRegistryComponent', () => {
               elementsPerPage: this.allEpeople.length,
               totalElements: this.allEpeople.length,
               totalPages: 1,
-              currentPage: 1
+              currentPage: 1,
             }), this.allEpeople));
           }
           const result = this.allEpeople.find((ePerson: EPerson) => {
@@ -86,14 +114,14 @@ describe('EPeopleRegistryComponent', () => {
             elementsPerPage: [result].length,
             totalElements: [result].length,
             totalPages: 1,
-            currentPage: 1
+            currentPage: 1,
           }), [result]));
         }
         return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo({
           elementsPerPage: this.allEpeople.length,
           totalElements: this.allEpeople.length,
           totalPages: 1,
-          currentPage: 1
+          currentPage: 1,
         }), this.allEpeople));
       },
       deleteEPerson(ePerson: EPerson): Observable<boolean> {
@@ -113,42 +141,44 @@ describe('EPeopleRegistryComponent', () => {
       },
       getEPeoplePageRouterLink(): string {
         return '/access-control/epeople';
-      }
+      },
     };
     authorizationService = jasmine.createSpyObj('authorizationService', {
-      isAuthorized: observableOf(true)
+      isAuthorized: observableOf(true),
     });
     builderService = getMockFormBuilderService();
-    translateService = getMockTranslateService();
 
     paginationService = new PaginationServiceStub();
     TestBed.configureTestingModule({
-      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
+      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, RouterTestingModule.withRoutes([]),
-        TranslateModule.forRoot({
+        TranslateModule.forRoot(), EPeopleRegistryComponent],
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateLoaderMock
-          }
-        }),
-      ],
-      declarations: [EPeopleRegistryComponent],
       providers: [
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },
         { provide: AuthorizationDataService, useValue: authorizationService },
         { provide: FormBuilderService, useValue: builderService },
-        { provide: Router, useValue: new RouterStub() },
+        { provide: Router, useValue: new RouterMock() },
         { provide: RequestService, useValue: jasmine.createSpyObj('requestService', ['removeByHrefSubstring']) },
-        { provide: PaginationService, useValue: paginationService }
+        { provide: PaginationService, useValue: paginationService },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+    })
+      .overrideComponent(EPeopleRegistryComponent, {
+        remove: {
+          imports: [
+            EPersonFormComponent,
+            ThemedLoadingComponent,
+            PaginationComponent,
+          ],
+        },
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EPeopleRegistryComponent);
     component = fixture.componentInstance;
-    modalService = (component as any).modalService;
+    modalService = TestBed.inject(NgbModal);
     spyOn(modalService, 'open').and.returnValue(Object.assign({ componentInstance: Object.assign({ response: observableOf(true) }) }));
     fixture.detectChanges();
   });
@@ -158,10 +188,10 @@ describe('EPeopleRegistryComponent', () => {
   });
 
   it('should display list of ePeople', () => {
-    const ePeopleIdsFound = fixture.debugElement.queryAll(By.css('#epeople tr td:first-child'));
+    const ePeopleIdsFound: DebugElement[] = fixture.debugElement.queryAll(By.css('#epeople tr td:first-child'));
     expect(ePeopleIdsFound.length).toEqual(2);
     mockEPeople.map((ePerson: EPerson) => {
-      expect(ePeopleIdsFound.find((foundEl) => {
+      expect(ePeopleIdsFound.find((foundEl: DebugElement) => {
         return (foundEl.nativeElement.textContent.trim() === ePerson.uuid);
       })).toBeTruthy();
     });
@@ -169,7 +199,7 @@ describe('EPeopleRegistryComponent', () => {
 
   describe('search', () => {
     describe('when searching with scope/query (scope metadata)', () => {
-      let ePeopleIdsFound;
+      let ePeopleIdsFound: DebugElement[];
       beforeEach(fakeAsync(() => {
         component.search({ scope: 'metadata', query: EPersonMock2.name });
         tick();
@@ -179,14 +209,14 @@ describe('EPeopleRegistryComponent', () => {
 
       it('should display search result', () => {
         expect(ePeopleIdsFound.length).toEqual(1);
-        expect(ePeopleIdsFound.find((foundEl) => {
+        expect(ePeopleIdsFound.find((foundEl: DebugElement) => {
           return (foundEl.nativeElement.textContent.trim() === EPersonMock2.uuid);
         })).toBeTruthy();
       });
     });
 
     describe('when searching with scope/query (scope email)', () => {
-      let ePeopleIdsFound;
+      let ePeopleIdsFound: DebugElement[];
       beforeEach(fakeAsync(() => {
         component.search({ scope: 'email', query: EPersonMock.email });
         tick();
@@ -196,43 +226,13 @@ describe('EPeopleRegistryComponent', () => {
 
       it('should display search result', () => {
         expect(ePeopleIdsFound.length).toEqual(1);
-        expect(ePeopleIdsFound.find((foundEl) => {
+        expect(ePeopleIdsFound.find((foundEl: DebugElement) => {
           return (foundEl.nativeElement.textContent.trim() === EPersonMock.uuid);
         })).toBeTruthy();
       });
     });
   });
 
-  describe('toggleEditEPerson', () => {
-    describe('when you click on first edit eperson button', () => {
-      beforeEach(fakeAsync(() => {
-        const editButtons = fixture.debugElement.queryAll(By.css('.access-control-editEPersonButton'));
-        editButtons[0].triggerEventHandler('click', {
-          preventDefault: () => {/**/
-          }
-        });
-        tick();
-        fixture.detectChanges();
-      }));
-
-      it('editEPerson form is toggled', () => {
-        const ePeopleIds = fixture.debugElement.queryAll(By.css('#epeople tr td:first-child'));
-        ePersonDataServiceStub.getActiveEPerson().subscribe((activeEPerson: EPerson) => {
-          if (ePeopleIds[0] && activeEPerson === ePeopleIds[0].nativeElement.textContent) {
-            expect(component.isEPersonFormShown).toEqual(false);
-          } else {
-            expect(component.isEPersonFormShown).toEqual(true);
-          }
-
-        });
-      });
-
-      it('EPerson search section is hidden', () => {
-        expect(fixture.debugElement.query(By.css('#search'))).toBeNull();
-      });
-    });
-  });
-
   describe('deleteEPerson', () => {
     describe('when you click on first delete eperson button', () => {
       let ePeopleIdsFoundBeforeDelete;
@@ -242,7 +242,7 @@ describe('EPeopleRegistryComponent', () => {
         const deleteButtons = fixture.debugElement.queryAll(By.css('.access-control-deleteEPersonButton'));
         deleteButtons[0].triggerEventHandler('click', {
           preventDefault: () => {/**/
-          }
+          },
         });
         tick();
         fixture.detectChanges();
@@ -258,19 +258,12 @@ describe('EPeopleRegistryComponent', () => {
     });
   });
 
-  describe('delete EPerson button when the isAuthorized returns false', () => {
+
-    let ePeopleDeleteButton;
+  it('should hide delete EPerson button when the isAuthorized returns false', () => {
-    beforeEach(() => {
     spyOn(authorizationService, 'isAuthorized').and.returnValue(observableOf(false));
     component.initialisePage();
     fixture.detectChanges();
-    });
 
-    it('should be disabled', () => {
+    expect(fixture.debugElement.query(By.css('#epeople tr td div button.delete-button'))).toBeNull();
-      ePeopleDeleteButton = fixture.debugElement.queryAll(By.css('#epeople tr td div button.delete-button'));
-      ePeopleDeleteButton.forEach((deleteButton: DebugElement) => {
-        expect(deleteButton.nativeElement.disabled).toBe(true);
-      });
-    });
   });
 });

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

@@ -1,31 +1,86 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
-import { UntypedFormBuilder } from '@angular/forms';
+  AsyncPipe,
-import { Router } from '@angular/router';
+  NgClass,
-import { TranslateService } from '@ngx-translate/core';
+  NgForOf,
-import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
+  NgIf,
-import { map, switchMap, take } from 'rxjs/operators';
+} from '@angular/common';
-import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+} from '@angular/forms';
+import {
+  Router,
+  RouterModule,
+} from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import {
+  BehaviorSubject,
+  combineLatest,
+  Observable,
+  Subscription,
+} from 'rxjs';
+import {
+  map,
+  switchMap,
+  take,
+} from 'rxjs/operators';
+
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import {
+  buildPaginatedList,
+  PaginatedList,
+} from '../../core/data/paginated-list.model';
 import { RemoteData } from '../../core/data/remote-data';
+import { RequestService } from '../../core/data/request.service';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
-import { hasValue } from '../../shared/empty.util';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { EpersonDtoModel } from '../../core/eperson/models/eperson-dto.model';
-import { FeatureID } from '../../core/data/feature-authorization/feature-id';
-import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { getAllSucceededRemoteData, getFirstCompletedRemoteData } from '../../core/shared/operators';
-import { ConfirmationModalComponent } from '../../shared/confirmation-modal/confirmation-modal.component';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { RequestService } from '../../core/data/request.service';
-import { PageInfo } from '../../core/shared/page-info.model';
-import { NoContent } from '../../core/shared/NoContent.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { NoContent } from '../../core/shared/NoContent.model';
+import {
+  getAllSucceededRemoteData,
+  getFirstCompletedRemoteData,
+} from '../../core/shared/operators';
+import { PageInfo } from '../../core/shared/page-info.model';
+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';
+import { PaginationComponent } from '../../shared/pagination/pagination.component';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import {
+  getEPersonEditRoute,
+  getEPersonsRoute,
+} from '../access-control-routing-paths';
+import { EPersonFormComponent } from './eperson-form/eperson-form.component';
 
 @Component({
   selector: 'ds-epeople-registry',
   templateUrl: './epeople-registry.component.html',
+  imports: [
+    TranslateModule,
+    RouterModule,
+    AsyncPipe,
+    NgIf,
+    EPersonFormComponent,
+    ReactiveFormsModule,
+    ThemedLoadingComponent,
+    PaginationComponent,
+    NgClass,
+    NgForOf,
+  ],
+  standalone: true,
 })
 /**
  * A component used for managing all existing epeople within the repository.
@@ -61,14 +116,9 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
   config: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'elp',
     pageSize: 5,
-    currentPage: 1
+    currentPage: 1,
   });
 
-  /**
-   * Whether or not to show the EPerson form
-   */
-  isEPersonFormShown: boolean;
-
   // The search form
   searchForm;
 
@@ -114,26 +164,20 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    */
   initialisePage() {
     this.searching$.next(true);
-    this.isEPersonFormShown = false;
     this.search({ scope: this.currentSearchScope, query: this.currentSearchQuery });
-    this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
-      if (eperson != null && eperson.id) {
-        this.isEPersonFormShown = true;
-      }
-    }));
     this.subs.push(this.ePeople$.pipe(
       switchMap((epeople: PaginatedList<EPerson>) => {
         if (epeople.pageInfo.totalElements > 0) {
-          return combineLatest([...epeople.page.map((eperson: EPerson) => {
+          return combineLatest(epeople.page.map((eperson: EPerson) => {
             return this.authorizationService.isAuthorized(FeatureID.CanDelete, hasValue(eperson) ? eperson.self : undefined).pipe(
               map((authorized) => {
                 const epersonDtoModel: EpersonDtoModel = new EpersonDtoModel();
                 epersonDtoModel.ableToDelete = authorized;
                 epersonDtoModel.eperson = eperson;
                 return epersonDtoModel;
-              })
+              }),
             );
-          })]).pipe(map((dtos: EpersonDtoModel[]) => {
+          })).pipe(map((dtos: EpersonDtoModel[]) => {
             return buildPaginatedList(epeople.pageInfo, dtos);
           }));
         } else {
@@ -160,15 +204,15 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
         const query: string = data.query;
         const scope: string = data.scope;
         if (query != null && this.currentSearchQuery !== query) {
-            this.router.navigate([this.epersonService.getEPeoplePageRouterLink()], {
+          void this.router.navigate([getEPersonsRoute()], {
-              queryParamsHandling: 'merge'
+            queryParamsHandling: 'merge',
           });
           this.currentSearchQuery = query;
           this.paginationService.resetPage(this.config.id);
         }
         if (scope != null && this.currentSearchScope !== scope) {
-            this.router.navigate([this.epersonService.getEPeoplePageRouterLink()], {
+          void this.router.navigate([getEPersonsRoute()], {
-              queryParamsHandling: 'merge'
+            queryParamsHandling: 'merge',
           });
           this.currentSearchScope = scope;
           this.paginationService.resetPage(this.config.id);
@@ -176,15 +220,15 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
         }
         return this.epersonService.searchByScope(this.currentSearchScope, this.currentSearchQuery, {
           currentPage: findListOptions.currentPage,
-            elementsPerPage: findListOptions.pageSize
+          elementsPerPage: findListOptions.pageSize,
         });
-        }
+      },
       ),
       getAllSucceededRemoteData(),
     ).subscribe((peopleRD) => {
       this.ePeople$.next(peopleRD.payload);
       this.pageInfoState$.next(peopleRD.payload.pageInfo);
-      }
+    },
     );
   }
 
@@ -194,7 +238,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    */
   isActive(eperson: EPerson): Observable<boolean> {
     return this.getActiveEPerson().pipe(
-      map((activeEPerson) => eperson === activeEPerson)
+      map((activeEPerson) => eperson === activeEPerson),
     );
   }
 
@@ -205,30 +249,13 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
     return this.epersonService.getActiveEPerson();
   }
 
-  /**
-   * Start editing the selected EPerson
-   * @param ePerson
-   */
-  toggleEditEPerson(ePerson: EPerson) {
-    this.getActiveEPerson().pipe(take(1)).subscribe((activeEPerson: EPerson) => {
-      if (ePerson === activeEPerson) {
-        this.epersonService.cancelEditEPerson();
-        this.isEPersonFormShown = false;
-      } else {
-        this.epersonService.editEPerson(ePerson);
-        this.isEPersonFormShown = true;
-      }
-    });
-    this.scrollToTop();
-  }
-
   /**
    * Deletes EPerson, show notification on success/failure & updates EPeople list
    */
   deleteEPerson(ePerson: EPerson) {
     if (hasValue(ePerson.id)) {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = ePerson;
+      modalRef.componentInstance.name = this.dsoNameService.getName(ePerson);
       modalRef.componentInstance.headerLabel = 'confirmation-modal.delete-eperson.header';
       modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel';
@@ -242,7 +269,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
               if (restResponse.hasSucceeded) {
                 this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', { name: this.dsoNameService.getName(ePerson) }));
               } else {
-                this.notificationsService.error('Error occured when trying to delete EPerson with id: ' + ePerson.id + ' with code: ' + restResponse.statusCode + ' and message: ' + restResponse.errorMessage);
+                this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.deleted.success', { id: ePerson.id, statusCode: restResponse.statusCode, errorMessage: restResponse.errorMessage }));
               }
             });
           }
@@ -264,16 +291,6 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }
 
-  scrollToTop() {
-    (function smoothscroll() {
-      const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
-      if (currentScroll > 0) {
-        window.requestAnimationFrame(smoothscroll);
-        window.scrollTo(0, currentScroll - (currentScroll / 8));
-      }
-    })();
-  }
-
   /**
    * Reset all input-fields to be empty and search all search
    */
@@ -284,20 +301,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
     this.search({ query: '' });
   }
 
-  /**
+  getEditEPeoplePage(id: string): string {
-   * This method will set everything to stale, which will cause the lists on this page to update.
+    return getEPersonEditRoute(id);
-   */
-  reset(): void {
-    this.epersonService.getBrowseEndpoint().pipe(
-      take(1),
-      switchMap((href: string) => {
-        return this.requestService.setStaleByHrefSubstring(href).pipe(
-          take(1),
-        );
-      })
-    ).subscribe(()=>{
-      this.epersonService.cancelEditEPerson();
-      this.isEPersonFormShown = false;
-    });
   }
 }

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

@@ -1,6 +1,12 @@
-import { EPeopleRegistryCancelEPersonAction, EPeopleRegistryEditEPersonAction } from './epeople-registry.actions';
-import { ePeopleRegistryReducer, EPeopleRegistryState } from './epeople-registry.reducers';
 import { EPersonMock } from '../../shared/testing/eperson.mock';
+import {
+  EPeopleRegistryCancelEPersonAction,
+  EPeopleRegistryEditEPersonAction,
+} from './epeople-registry.actions';
+import {
+  ePeopleRegistryReducer,
+  EPeopleRegistryState,
+} from './epeople-registry.reducers';
 
 const initialState: EPeopleRegistryState = {
   editEPerson: null,

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

@@ -2,7 +2,7 @@ import { EPerson } from '../../core/eperson/models/eperson.model';
 import {
   EPeopleRegistryAction,
   EPeopleRegistryActionTypes,
-  EPeopleRegistryEditEPersonAction
+  EPeopleRegistryEditEPersonAction,
 } from './epeople-registry.actions';
 
 /**
@@ -30,13 +30,13 @@ export function ePeopleRegistryReducer(state = initialState, action: EPeopleRegi
 
     case EPeopleRegistryActionTypes.EDIT_EPERSON: {
       return Object.assign({}, state, {
-        editEPerson: (action as EPeopleRegistryEditEPersonAction).eperson
+        editEPerson: (action as EPeopleRegistryEditEPersonAction).eperson,
       });
     }
 
     case EPeopleRegistryActionTypes.CANCEL_EDIT_EPERSON: {
       return Object.assign({}, state, {
-        editEPerson: null
+        editEPerson: null,
       });
     }
 

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

@@ -1,11 +1,15 @@
-<div *ngIf="epersonService.getActiveEPerson() | async; then editheader; else createHeader"></div>
+<div class="container">
+  <div class="group-form row">
+    <div class="col-12">
+
+      <div *ngIf="epersonService.getActiveEPerson() | async; then editHeader; else createHeader"></div>
 
       <ng-template #createHeader>
-  <h4>{{messagePrefix + '.create' | translate}}</h4>
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
       </ng-template>
 
-<ng-template #editheader>
+      <ng-template #editHeader>
-  <h4>{{messagePrefix + '.edit' | translate}}</h4>
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h1>
       </ng-template>
 
       <ds-form [formId]="formId"
@@ -16,23 +20,24 @@
                [submitLabel]="submitLabel"
                (submitForm)="onSubmit()">
         <div before class="btn-group">
-    <button (click)="onCancel()"
+          <button (click)="onCancel()" type="button" class="btn btn-outline-secondary">
-            class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
+            <i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}
+          </button>
         </div>
         <div *ngIf="displayResetPassword" between class="btn-group">
-    <button class="btn btn-primary" [disabled]="!(canReset$ | async)" (click)="resetPassword()">
+          <button class="btn btn-primary" [disabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
             <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
           </button>
         </div>
-  <div between class="btn-group ml-1">
+        <div *ngIf="canImpersonate$ | async" between class="btn-group">
-    <button *ngIf="!isImpersonated" class="btn btn-primary" [ngClass]="{'d-none' : !(canImpersonate$ | async)}" (click)="impersonate()">
+          <button *ngIf="!isImpersonated" class="btn btn-primary" type="button" (click)="impersonate()">
             <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
           </button>
-    <button *ngIf="isImpersonated" class="btn btn-primary" (click)="stopImpersonating()">
+          <button *ngIf="isImpersonated" class="btn btn-primary" type="button" (click)="stopImpersonating()">
             <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.stop-impersonating' | translate}}
           </button>
         </div>
-  <button after class="btn btn-danger delete-button" [disabled]="!(canDelete$ | async)" (click)="delete()">
+        <button *ngIf="canDelete$ | async" after class="btn btn-danger delete-button" type="button" (click)="delete()">
           <i class="fas fa-trash"></i> {{'admin.access-control.epeople.actions.delete' | translate}}
         </button>
       </ds-form>
@@ -40,15 +45,15 @@
       <ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>
 
       <div *ngIf="epersonService.getActiveEPerson() | async">
-  <h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>
+        <h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
 
-  <ds-themed-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-themed-loading>
+        <ds-themed-loading [showMessage]="false" *ngIf="groups$ | async | dsHasNoValue"></ds-themed-loading>
 
         <ds-pagination
-    *ngIf="(groups | async)?.payload?.totalElements > 0"
+          *ngIf="(groups$ | async)?.payload?.totalElements > 0"
           [paginationOptions]="config"
-    [pageInfoState]="(groups | async)?.payload"
+          [pageInfoState]="groupsPageInfoState$"
-    [collectionSize]="(groups | async)?.payload?.totalElements"
+          [collectionSize]="(groups$ | async)?.payload?.totalElements"
           [hideGear]="true"
           [hidePagerWhenSinglePage]="true"
           (pageChange)="onPageChange($event)">
@@ -63,7 +68,7 @@
               </tr>
               </thead>
               <tbody>
-        <tr *ngFor="let group of (groups | async)?.payload?.page">
+              <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)"
@@ -79,7 +84,7 @@
 
         </ds-pagination>
 
-  <div *ngIf="(groups | async)?.payload?.totalElements == 0" class="alert alert-info w-100 mb-2" role="alert">
+        <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()]"
@@ -87,3 +92,6 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
+</div>

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

@@ -1,36 +1,73 @@
-import { Observable, of as observableOf } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
-import { UntypedFormControl, UntypedFormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+  ComponentFixture,
-import { BrowserModule, By } from '@angular/platform-browser';
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+import {
+  BrowserModule,
+  By,
+} from '@angular/platform-browser';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import {
-import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
+import {
+  Observable,
+  of as observableOf,
+} from 'rxjs';
+
+import { AuthService } from '../../../core/auth/auth.service';
+import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';
+import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
+import { FindListOptions } from '../../../core/data/find-list-options.model';
+import {
+  buildPaginatedList,
+  PaginatedList,
+} from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
+import { RequestService } from '../../../core/data/request.service';
 import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { EPerson } from '../../../core/eperson/models/eperson.model';
+import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
+import { FormComponent } from '../../../shared/form/form.component';
+import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
+import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { PaginationComponent } from '../../../shared/pagination/pagination.component';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
+import { AuthServiceStub } from '../../../shared/testing/auth-service.stub';
+import {
+  EPersonMock,
+  EPersonMock2,
+} from '../../../shared/testing/eperson.mock';
+import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
+import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
+import { RouterStub } from '../../../shared/testing/router.stub';
+import { createPaginatedList } from '../../../shared/testing/utils.test';
+import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
+import { HasNoValuePipe } from '../../../shared/utils/has-no-value.pipe';
 import { EPeopleRegistryComponent } from '../epeople-registry.component';
 import { EPersonFormComponent } from './eperson-form.component';
-import { EPersonMock, EPersonMock2 } from '../../../shared/testing/eperson.mock';
-import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
-import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
-import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
-import { AuthService } from '../../../core/auth/auth.service';
-import { AuthServiceStub } from '../../../shared/testing/auth-service.stub';
-import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { GroupDataService } from '../../../core/eperson/group-data.service';
-import { createPaginatedList } from '../../../shared/testing/utils.test';
-import { RequestService } from '../../../core/data/request.service';
-import { PaginationService } from '../../../core/pagination/pagination.service';
-import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { ValidateEmailNotTaken } from './validators/email-taken.validator';
-import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';
 
 describe('EPersonFormComponent', () => {
   let component: EPersonFormComponent;
@@ -43,6 +80,8 @@ describe('EPersonFormComponent', () => {
   let authorizationService: AuthorizationDataService;
   let groupsDataService: GroupDataService;
   let epersonRegistrationService: EpersonRegistrationService;
+  let route: ActivatedRouteStub;
+  let router: RouterStub;
 
   let paginationService;
 
@@ -106,7 +145,10 @@ describe('EPersonFormComponent', () => {
       },
       getEPersonByEmail(email): Observable<RemoteData<EPerson>> {
         return createSuccessfulRemoteDataObject$(null);
-      }
+      },
+      findById(_id: string, _useCachedVersionIfAvailable = true, _reRequestOnStale = true, ..._linksToFollow: FollowLinkConfig<EPerson>[]): Observable<RemoteData<EPerson>> {
+        return createSuccessfulRemoteDataObject$(null);
+      },
     };
     builderService = Object.assign(getMockFormBuilderService(),{
       createFormGroup(formModel, options = null) {
@@ -169,7 +211,7 @@ describe('EPersonFormComponent', () => {
       },
       isObject(value) {
         return typeof value === 'object' && value !== null;
-      }
+      },
     });
     authService = new AuthServiceStub();
     authorizationService = jasmine.createSpyObj('authorizationService', {
@@ -178,20 +220,23 @@ describe('EPersonFormComponent', () => {
     });
     groupsDataService = jasmine.createSpyObj('groupsDataService', {
       findListByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
-      getGroupRegistryRouterLink: ''
+      getGroupRegistryRouterLink: '',
     });
 
     paginationService = new PaginationServiceStub();
+    route = new ActivatedRouteStub();
+    router = new RouterStub();
     TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
+            useClass: TranslateLoaderMock,
-          }
+          },
         }),
+        EPersonFormComponent,
+        HasNoValuePipe,
       ],
-      declarations: [EPersonFormComponent],
       providers: [
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: GroupDataService, useValue: groupsDataService },
@@ -202,14 +247,20 @@ describe('EPersonFormComponent', () => {
         { provide: PaginationService, useValue: paginationService },
         { provide: RequestService, useValue: jasmine.createSpyObj('requestService', ['removeByHrefSubstring']) },
         { provide: EpersonRegistrationService, useValue: epersonRegistrationService },
-        EPeopleRegistryComponent
+        { provide: ActivatedRoute, useValue: route },
+        { provide: Router, useValue: router },
+        EPeopleRegistryComponent,
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+    })
+      .overrideComponent(EPersonFormComponent, {
+        remove: { imports: [    ThemedLoadingComponent, PaginationComponent,FormComponent] },
+      })
+      .compileComponents();
   }));
 
   epersonRegistrationService = jasmine.createSpyObj('epersonRegistrationService', {
-    registerEmail: createSuccessfulRemoteDataObject$(null)
+    registerEmail: createSuccessfulRemoteDataObject$(null),
   });
 
   beforeEach(() => {
@@ -241,12 +292,12 @@ describe('EPersonFormComponent', () => {
         metadata: {
           'eperson.firstname': [
             {
-              value: firstName
+              value: firstName,
-            }
+            },
           ],
           'eperson.lastname': [
             {
-              value: lastName
+              value: lastName,
             },
           ],
         },
@@ -263,24 +314,18 @@ describe('EPersonFormComponent', () => {
       fixture.detectChanges();
     });
     describe('firstName, lastName and email should be required', () => {
-      it('form should be invalid because the firstName is required', waitForAsync(() => {
+      it('form should be invalid because the firstName is required', () => {
-        fixture.whenStable().then(() => {
         expect(component.formGroup.controls.firstName.valid).toBeFalse();
         expect(component.formGroup.controls.firstName.errors.required).toBeTrue();
       });
-      }));
+      it('form should be invalid because the lastName is required', () => {
-      it('form should be invalid because the lastName is required', waitForAsync(() => {
-        fixture.whenStable().then(() => {
         expect(component.formGroup.controls.lastName.valid).toBeFalse();
         expect(component.formGroup.controls.lastName.errors.required).toBeTrue();
       });
-      }));
+      it('form should be invalid because the email is required', () => {
-      it('form should be invalid because the email is required', waitForAsync(() => {
-        fixture.whenStable().then(() => {
         expect(component.formGroup.controls.email.valid).toBeFalse();
         expect(component.formGroup.controls.email.errors.required).toBeTrue();
       });
-      }));
     });
 
     describe('after inserting information firstName,lastName and email not required', () => {
@@ -290,24 +335,18 @@ describe('EPersonFormComponent', () => {
         component.formGroup.controls.email.setValue('test@test.com');
         fixture.detectChanges();
       });
-      it('firstName should be valid because the firstName is set', waitForAsync(() => {
+      it('firstName should be valid because the firstName is set', () => {
-        fixture.whenStable().then(() => {
         expect(component.formGroup.controls.firstName.valid).toBeTrue();
         expect(component.formGroup.controls.firstName.errors).toBeNull();
       });
-      }));
+      it('lastName should be valid because the lastName is set', () => {
-      it('lastName should be valid because the lastName is set', waitForAsync(() => {
-        fixture.whenStable().then(() => {
         expect(component.formGroup.controls.lastName.valid).toBeTrue();
         expect(component.formGroup.controls.lastName.errors).toBeNull();
       });
-      }));
+      it('email should be valid because the email is set', () => {
-      it('email should be valid because the email is set', waitForAsync(() => {
-        fixture.whenStable().then(() => {
         expect(component.formGroup.controls.email.valid).toBeTrue();
         expect(component.formGroup.controls.email.errors).toBeNull();
       });
-      }));
     });
 
 
@@ -316,12 +355,10 @@ describe('EPersonFormComponent', () => {
         component.formGroup.controls.email.setValue('test@test');
         fixture.detectChanges();
       });
-      it('email should not be valid because the email pattern', waitForAsync(() => {
+      it('email should not be valid because the email pattern', () => {
-        fixture.whenStable().then(() => {
         expect(component.formGroup.controls.email.valid).toBeFalse();
         expect(component.formGroup.controls.email.errors.pattern).toBeTruthy();
       });
-      }));
     });
 
     describe('after already utilized email', () => {
@@ -329,19 +366,17 @@ describe('EPersonFormComponent', () => {
         const ePersonServiceWithEperson = Object.assign(ePersonDataServiceStub,{
           getEPersonByEmail(): Observable<RemoteData<EPerson>> {
             return createSuccessfulRemoteDataObject$(EPersonMock);
-          }
+          },
         });
         component.formGroup.controls.email.setValue('test@test.com');
         component.formGroup.controls.email.setAsyncValidators(ValidateEmailNotTaken.createValidator(ePersonServiceWithEperson));
         fixture.detectChanges();
       });
 
-      it('email should not be valid because email is already taken', waitForAsync(() => {
+      it('email should not be valid because email is already taken', () => {
-        fixture.whenStable().then(() => {
         expect(component.formGroup.controls.email.valid).toBeFalse();
         expect(component.formGroup.controls.email.errors.emailTaken).toBeTruthy();
       });
-      }));
     });
 
 
@@ -366,12 +401,12 @@ describe('EPersonFormComponent', () => {
         metadata: {
           'eperson.firstname': [
             {
-              value: firstName
+              value: firstName,
-            }
+            },
           ],
           'eperson.lastname': [
             {
-              value: lastName
+              value: lastName,
             },
           ],
         },
@@ -393,11 +428,9 @@ describe('EPersonFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should emit a new eperson using the correct values', waitForAsync(() => {
+      it('should emit a new eperson using the correct values', () => {
-        fixture.whenStable().then(() => {
         expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
       });
-      }));
     });
 
     describe('with an active eperson', () => {
@@ -409,30 +442,28 @@ describe('EPersonFormComponent', () => {
           metadata: {
             'eperson.firstname': [
               {
-                value: firstName
+                value: firstName,
-              }
+              },
             ],
             'eperson.lastname': [
               {
-                value: lastName
+                value: lastName,
               },
             ],
           },
           email: email,
           canLogIn: canLogIn,
           requireCertificate: requireCertificate,
-          _links: undefined
+          _links: undefined,
         });
         spyOn(ePersonDataServiceStub, 'getActiveEPerson').and.returnValue(observableOf(expectedWithId));
         component.onSubmit();
         fixture.detectChanges();
       });
 
-      it('should emit the existing eperson using the correct values', waitForAsync(() => {
+      it('should emit the existing eperson using the correct values', () => {
-        fixture.whenStable().then(() => {
         expect(component.submitForm.emit).toHaveBeenCalledWith(expectedWithId);
       });
-      }));
     });
   });
 
@@ -443,7 +474,7 @@ describe('EPersonFormComponent', () => {
       spyOn(authService, 'impersonate').and.callThrough();
       ePersonId = 'testEPersonId';
       component.epersonInitial = Object.assign(new EPerson(), {
-        id: ePersonId
+        id: ePersonId,
       });
       component.impersonate();
     });
@@ -491,16 +522,16 @@ describe('EPersonFormComponent', () => {
 
     });
 
-    it('the delete button should be active if the eperson can be deleted', () => {
+    it('the delete button should be visible if the ePerson can be deleted', () => {
       const deleteButton = fixture.debugElement.query(By.css('.delete-button'));
-      expect(deleteButton.nativeElement.disabled).toBe(false);
+      expect(deleteButton).not.toBeNull();
     });
 
-    it('the delete button should be disabled if the eperson cannot be deleted', () => {
+    it('the delete button should be hidden if the ePerson cannot be deleted', () => {
       component.canDelete$ = observableOf(false);
       fixture.detectChanges();
       const deleteButton = fixture.debugElement.query(By.css('.delete-button'));
-      expect(deleteButton.nativeElement.disabled).toBe(true);
+      expect(deleteButton).toBeNull();
     });
 
     it('should call the epersonFormComponent delete when clicked on the button', () => {
@@ -531,7 +562,7 @@ describe('EPersonFormComponent', () => {
       ePersonEmail = 'person.email@4science.it';
       component.epersonInitial = Object.assign(new EPerson(), {
         id: ePersonId,
-        email: ePersonEmail
+        email: ePersonEmail,
       });
       component.resetPassword();
     });

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

@@ -1,47 +1,99 @@
-import { ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+  AsyncPipe,
+  NgClass,
+  NgFor,
+  NgIf,
+} from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import {
+  ActivatedRoute,
+  Router,
+  RouterLink,
+} from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import {
   DynamicCheckboxModel,
   DynamicFormControlModel,
   DynamicFormLayout,
-  DynamicInputModel
+  DynamicInputModel,
 } from '@ng-dynamic-forms/core';
-import { TranslateService } from '@ngx-translate/core';
+import {
-import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
+  TranslateModule,
-import { debounceTime, finalize, map, switchMap, take } from 'rxjs/operators';
+  TranslateService,
+} from '@ngx-translate/core';
+import {
+  combineLatest as observableCombineLatest,
+  Observable,
+  of as observableOf,
+  Subscription,
+} from 'rxjs';
+import {
+  debounceTime,
+  finalize,
+  map,
+  switchMap,
+  take,
+} from 'rxjs/operators';
+
+import { AuthService } from '../../../core/auth/auth.service';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';
+import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
+import { RequestService } from '../../../core/data/request.service';
 import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
 import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { EPerson } from '../../../core/eperson/models/eperson.model';
 import { Group } from '../../../core/eperson/models/group.model';
+import { PaginationService } from '../../../core/pagination/pagination.service';
+import { NoContent } from '../../../core/shared/NoContent.model';
 import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
-  getRemoteDataPayload
+  getRemoteDataPayload,
 } from '../../../core/shared/operators';
+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 { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
 import { hasValue } from '../../../shared/empty.util';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
+import { FormComponent } from '../../../shared/form/form.component';
+import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { PaginationComponent } from '../../../shared/pagination/pagination.component';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { AuthService } from '../../../core/auth/auth.service';
-import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
-import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { RequestService } from '../../../core/data/request.service';
-import { NoContent } from '../../../core/shared/NoContent.model';
-import { PaginationService } from '../../../core/pagination/pagination.service';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
+import { HasNoValuePipe } from '../../../shared/utils/has-no-value.pipe';
+import { getEPersonsRoute } from '../../access-control-routing-paths';
 import { ValidateEmailNotTaken } from './validators/email-taken.validator';
-import { Registration } from '../../../core/shared/registration.model';
-import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';
-import { TYPE_REQUEST_FORGOT } from '../../../register-email-form/register-email-form.component';
-import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-eperson-form',
   templateUrl: './eperson-form.component.html',
+  imports: [
+    FormComponent,
+    NgIf,
+    NgFor,
+    AsyncPipe,
+    TranslateModule,
+    NgClass,
+    ThemedLoadingComponent,
+    PaginationComponent,
+    RouterLink,
+    HasNoValuePipe,
+  ],
+  standalone: true,
 })
 /**
  * A form used for creating and editing EPeople
@@ -81,28 +133,28 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
   formLayout: DynamicFormLayout = {
     firstName: {
       grid: {
-        host: 'row'
+        host: 'row',
-      }
+      },
     },
     lastName: {
       grid: {
-        host: 'row'
+        host: 'row',
-      }
+      },
     },
     email: {
       grid: {
-        host: 'row'
+        host: 'row',
-      }
+      },
     },
     canLogIn: {
       grid: {
-        host: 'col col-sm-6 d-inline-block'
+        host: 'col col-sm-6 d-inline-block',
-      }
+      },
     },
     requireCertificate: {
       grid: {
-        host: 'col col-sm-6 d-inline-block'
+        host: 'col col-sm-6 d-inline-block',
-      }
+      },
     },
   };
 
@@ -145,7 +197,12 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
   /**
    * A list of all the groups this EPerson is a member of
    */
-  groups: Observable<RemoteData<PaginatedList<Group>>>;
+  groups$: Observable<RemoteData<PaginatedList<Group>>>;
+
+  /**
+   * The pagination of the {@link groups$} list.
+   */
+  groupsPageInfoState$: Observable<PageInfo>;
 
   /**
    * Pagination config used to display the list of groups
@@ -153,7 +210,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
   config: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'gem',
     pageSize: 5,
-    currentPage: 1
+    currentPage: 1,
   });
 
   /**
@@ -194,6 +251,8 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     public requestService: RequestService,
     private epersonRegistrationService: EpersonRegistrationService,
     public dsoNameService: DSONameService,
+    protected route: ActivatedRoute,
+    protected router: Router,
   ) {
     this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
       this.epersonInitial = eperson;
@@ -213,7 +272,9 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    * This method will initialise the page
    */
   initialisePage() {
-
+    this.subs.push(this.epersonService.findById(this.route.snapshot.params.id).subscribe((ePersonRD: RemoteData<EPerson>) => {
+      this.epersonService.editEPerson(ePersonRD.payload);
+    }));
     observableCombineLatest([
       this.translateService.get(`${this.messagePrefix}.firstName`),
       this.translateService.get(`${this.messagePrefix}.lastName`),
@@ -251,23 +312,23 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
         required: true,
         errorMessages: {
           emailTaken: 'error.validation.emailTaken',
-          pattern: 'error.validation.NotValidEmail'
+          pattern: 'error.validation.NotValidEmail',
         },
-        hint: emailHint
+        hint: emailHint,
       });
       this.canLogIn = new DynamicCheckboxModel(
         {
           id: 'canLogIn',
           label: canLogIn,
           name: 'canLogIn',
-          value: (this.epersonInitial != null ? this.epersonInitial.canLogIn : true)
+          value: (this.epersonInitial != null ? this.epersonInitial.canLogIn : true),
         });
       this.requireCertificate = new DynamicCheckboxModel(
         {
           id: 'requireCertificate',
           label: requireCertificate,
           name: 'requireCertificate',
-          value: (this.epersonInitial != null ? this.epersonInitial.requireCertificate : false)
+          value: (this.epersonInitial != null ? this.epersonInitial.requireCertificate : false),
         });
       this.formModel = [
         this.firstName,
@@ -279,9 +340,9 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
       this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
         if (eperson != null) {
-          this.groups = this.groupsDataService.findListByHref(eperson._links.groups.href, {
+          this.groups$ = this.groupsDataService.findListByHref(eperson._links.groups.href, {
             currentPage: 1,
-            elementsPerPage: this.config.pageSize
+            elementsPerPage: this.config.pageSize,
           });
         }
         this.formGroup.patchValue({
@@ -289,7 +350,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
           lastName: eperson != null ? eperson.firstMetadataValue('eperson.lastname') : '',
           email: eperson != null ? eperson.email : '',
           canLogIn: eperson != null ? eperson.canLogIn : true,
-          requireCertificate: eperson != null ? eperson.requireCertificate : false
+          requireCertificate: eperson != null ? eperson.requireCertificate : false,
         });
 
         if (eperson === null && !!this.formGroup.controls.email) {
@@ -302,11 +363,11 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
 
       const activeEPerson$ = this.epersonService.getActiveEPerson();
 
-      this.groups = activeEPerson$.pipe(
+      this.groups$ = activeEPerson$.pipe(
         switchMap((eperson) => {
           return observableCombineLatest([observableOf(eperson), this.paginationService.getFindListOptions(this.config.id, {
             currentPage: 1,
-            elementsPerPage: this.config.pageSize
+            elementsPerPage: this.config.pageSize,
           })]);
         }),
         switchMap(([eperson, findListOptions]) => {
@@ -314,7 +375,11 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
             return this.groupsDataService.findListByHref(eperson._links.groups.href, findListOptions, true, true, followLink('object'));
           }
           return observableOf(undefined);
-        })
+        }),
+      );
+
+      this.groupsPageInfoState$ = this.groups$.pipe(
+        map(groupsRD => groupsRD.payload.pageInfo),
       );
 
       this.canImpersonate$ = activeEPerson$.pipe(
@@ -324,10 +389,10 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
           } else {
             return observableOf(false);
           }
-        })
+        }),
       );
       this.canDelete$ = activeEPerson$.pipe(
-        switchMap((eperson) => this.authorizationService.isAuthorized(FeatureID.CanDelete, hasValue(eperson) ? eperson.self : undefined))
+        switchMap((eperson) => this.authorizationService.isAuthorized(FeatureID.CanDelete, hasValue(eperson) ? eperson.self : undefined)),
       );
       this.canReset$ = observableOf(true);
     });
@@ -339,6 +404,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
   onCancel() {
     this.epersonService.cancelEditEPerson();
     this.cancelForm.emit();
+    void this.router.navigate([getEPersonsRoute()]);
   }
 
   /**
@@ -354,12 +420,12 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
           metadata: {
             'eperson.firstname': [
               {
-                value: this.firstName.value
+                value: this.firstName.value,
-              }
+              },
             ],
             'eperson.lastname': [
               {
-                value: this.lastName.value
+                value: this.lastName.value,
               },
             ],
           },
@@ -372,7 +438,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
         } else {
           this.editEPerson(ePerson, values);
         }
-      }
+      },
     );
   }
 
@@ -385,11 +451,13 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
 
     const response = this.epersonService.create(ePersonToCreate);
     response.pipe(
-      getFirstCompletedRemoteData()
+      getFirstCompletedRemoteData(),
     ).subscribe((rd: RemoteData<EPerson>) => {
       if (rd.hasSucceeded) {
         this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.created.success', { name: this.dsoNameService.getName(ePersonToCreate) }));
         this.submitForm.emit(ePersonToCreate);
+        this.epersonService.clearEPersonRequests();
+        void this.router.navigateByUrl(getEPersonsRoute());
       } else {
         this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.created.failure', { name: this.dsoNameService.getName(ePersonToCreate) }));
         this.cancelForm.emit();
@@ -409,12 +477,12 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       metadata: {
         'eperson.firstname': [
           {
-            value: (this.firstName.value ? this.firstName.value : ePerson.firstMetadataValue('eperson.firstname'))
+            value: (this.firstName.value ? this.firstName.value : ePerson.firstMetadataValue('eperson.firstname')),
-          }
+          },
         ],
         'eperson.lastname': [
           {
-            value: (this.lastName.value ? this.lastName.value : ePerson.firstMetadataValue('eperson.lastname'))
+            value: (this.lastName.value ? this.lastName.value : ePerson.firstMetadataValue('eperson.lastname')),
           },
         ],
       },
@@ -429,6 +497,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       if (rd.hasSucceeded) {
         this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.edited.success', { name: this.dsoNameService.getName(editedEperson) }));
         this.submitForm.emit(editedEperson);
+        void this.router.navigateByUrl(getEPersonsRoute());
       } else {
         this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.edited.failure', { name: this.dsoNameService.getName(editedEperson) }));
         this.cancelForm.emit();
@@ -447,7 +516,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
   onPageChange(event) {
     this.updateGroups({
       currentPage: event,
-      elementsPerPage: this.config.pageSize
+      elementsPerPage: this.config.pageSize,
     });
   }
 
@@ -468,7 +537,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       take(1),
       switchMap((eperson: EPerson) => {
         const modalRef = this.modalService.open(ConfirmationModalComponent);
-        modalRef.componentInstance.dso = eperson;
+        modalRef.componentInstance.name = this.dsoNameService.getName(eperson);
         modalRef.componentInstance.headerLabel = 'confirmation-modal.delete-eperson.header';
         modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info';
         modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel';
@@ -483,18 +552,19 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
               this.canDelete$ = observableOf(false);
               return this.epersonService.deleteEPerson(eperson).pipe(
                 getFirstCompletedRemoteData(),
-                map((restResponse: RemoteData<NoContent>) => ({ restResponse, eperson }))
+                map((restResponse: RemoteData<NoContent>) => ({ restResponse, eperson })),
               );
             } else {
               return observableOf(null);
             }
           }),
-          finalize(() => this.canDelete$ = observableOf(true))
+          finalize(() => this.canDelete$ = observableOf(true)),
         );
-      })
+      }),
     ).subscribe(({ restResponse, eperson }: { restResponse: RemoteData<NoContent> | null, eperson: EPerson }) => {
       if (restResponse?.hasSucceeded) {
         this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', { name: this.dsoNameService.getName(eperson) }));
+        void this.router.navigate([getEPersonsRoute()]);
       } else {
         this.notificationsService.error(`Error occurred when trying to delete EPerson with id: ${eperson?.id} with code: ${restResponse?.statusCode} and message: ${restResponse?.errorMessage}`);
       }
@@ -525,7 +595,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
             this.notificationsService.error(this.translateService.get('forgot-email.form.error.head'),
               this.translateService.get('forgot-email.form.error.content', { email: this.epersonInitial.email }));
           }
-          }
+        },
         );
     }
   }
@@ -541,16 +611,6 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * This method will ensure that the page gets reset and that the cache is cleared
-   */
-  reset() {
-    this.epersonService.getActiveEPerson().pipe(take(1)).subscribe((eperson: EPerson) => {
-      this.requestService.removeByHrefSubstring(eperson.self);
-    });
-    this.initialisePage();
-  }
-
   /**
    * Checks for the given ePerson if there is already an ePerson in the system with that email
    * and shows notification if this is the case
@@ -561,13 +621,13 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     // Relevant message for email in use
     this.subs.push(this.epersonService.searchByScope('email', ePerson.email, {
       currentPage: 1,
-      elementsPerPage: 0
+      elementsPerPage: 0,
     }).pipe(getFirstSucceededRemoteData(), getRemoteDataPayload())
       .subscribe((list: PaginatedList<EPerson>) => {
         if (list.totalElements > 0) {
           this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.' + notificationSection + '.failure.emailInUse', {
             name: this.dsoNameService.getName(ePerson),
-            email: ePerson.email
+            email: ePerson.email,
           }));
         }
       }));
@@ -578,7 +638,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    */
   private updateGroups(options) {
     this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
-      this.groups = this.groupsDataService.findListByHref(eperson._links.groups.href, options);
+      this.groups$ = this.groupsDataService.findListByHref(eperson._links.groups.href, options);
     }));
   }
 }

src/app/access-control/epeople-registry/eperson-form/validators/email-taken.validator.ts

@@ -1,9 +1,12 @@
-import { AbstractControl, ValidationErrors } from '@angular/forms';
+import {
+  AbstractControl,
+  ValidationErrors,
+} from '@angular/forms';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
-import { getFirstSucceededRemoteData, } from '../../../../core/shared/operators';
+import { getFirstSucceededRemoteData } from '../../../../core/shared/operators';
 
 export class ValidateEmailNotTaken {
 
@@ -17,8 +20,8 @@ export class ValidateEmailNotTaken {
         .pipe(
           getFirstSucceededRemoteData(),
           map(res => {
-            return !!res.payload ? { emailTaken: true } : null;
+            return res.payload ? { emailTaken: true } : null;
-          })
+          }),
         );
     };
   }

src/app/access-control/epeople-registry/eperson-resolver.service.ts

@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+} from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { RemoteData } from '../../core/data/remote-data';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { ResolvedAction } from '../../core/resolving/resolver.actions';
+import { getFirstCompletedRemoteData } from '../../core/shared/operators';
+import {
+  followLink,
+  FollowLinkConfig,
+} from '../../shared/utils/follow-link-config.model';
+
+export const EPERSON_EDIT_FOLLOW_LINKS: FollowLinkConfig<EPerson>[] = [
+  followLink('groups'),
+];
+
+/**
+ * This class represents a resolver that requests a specific {@link EPerson} before the route is activated
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class EPersonResolver  {
+
+  constructor(
+    protected ePersonService: EPersonDataService,
+    protected store: Store<any>,
+  ) {
+  }
+
+  /**
+   * Method for resolving a {@link EPerson} based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns `Observable<<RemoteData<EPerson>>` Emits the found {@link EPerson} based on the parameters in the current
+   * route, or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<EPerson>> {
+    const ePersonRD$: Observable<RemoteData<EPerson>> = this.ePersonService.findById(route.params.id,
+      true,
+      false,
+      ...EPERSON_EDIT_FOLLOW_LINKS,
+    ).pipe(
+      getFirstCompletedRemoteData(),
+    );
+
+    ePersonRD$.subscribe((ePersonRD: RemoteData<EPerson>) => {
+      this.store.dispatch(new ResolvedAction(state.url, ePersonRD.payload));
+    });
+
+    return ePersonRD$;
+  }
+
+}

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

@@ -2,14 +2,14 @@
   <div class="group-form row">
     <div class="col-12">
 
-      <div *ngIf="groupDataService.getActiveGroup() | async; then editheader; else createHeader"></div>
+      <div *ngIf="groupDataService.getActiveGroup() | async; then editHeader; else createHeader"></div>
 
       <ng-template #createHeader>
-        <h2 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h2>
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h1>
       </ng-template>
 
-      <ng-template #editheader>
+      <ng-template #editHeader>
-        <h2 class="border-bottom pb-2">
+        <h1 class="border-bottom pb-2">
           <span
             *dsContextHelp="{
               content: 'admin.access-control.groups.form.tooltip.editGroupPage',
@@ -20,12 +20,12 @@
           >
             {{messagePrefix + '.head.edit' | translate}}
           </span>
-        </h2>
+        </h1>
       </ng-template>
 
       <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
                 [content]="messagePrefix + '.alert.permanent'"></ds-alert>
-      <ds-alert *ngIf="!(canEdit$ | async) && (groupDataService.getActiveGroup() | async)" [type]="AlertTypeEnum.Warning"
+      <ds-alert *ngIf="(canEdit$ | async) !== true && (groupDataService.getActiveGroup() | async)" [type]="AlertTypeEnum.Warning"
                 [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: dsoNameService.getName((getLinkedDSO(groupBeingEdited) | async)?.payload), comcol: (getLinkedDSO(groupBeingEdited) | async)?.payload?.type, comcolEditRolesRoute: (getLinkedEditRolesRoute(groupBeingEdited) | async) })">
       </ds-alert>
 
@@ -36,22 +36,21 @@
                [displayCancel]="false"
                (submitForm)="onSubmit()">
         <div before class="btn-group">
-          <button (click)="onCancel()"
+          <button (click)="onCancel()" type="button"
                   class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
         </div>
-        <div after *ngIf="groupBeingEdited != null" class="btn-group">
+        <div after *ngIf="(canEdit$ | async) && !groupBeingEdited?.permanent" class="btn-group">
-          <button class="btn btn-danger delete-button" [disabled]="!(canEdit$ | async) || groupBeingEdited.permanent"
+          <button (click)="delete()" class="btn btn-danger delete-button" type="button">
-                  (click)="delete()">
             <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
           </button>
         </div>
       </ds-form>
 
       <div class="mb-5">
-        <ds-members-list *ngIf="groupBeingEdited != null"
+        <ds-members-list *ngIf="groupBeingEdited !== undefined"
                          [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
       </div>
-      <ds-subgroups-list *ngIf="groupBeingEdited != null"
+      <ds-subgroups-list *ngIf="groupBeingEdited !== undefined"
                          [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
 
 

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

@@ -1,43 +1,79 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
-import { UntypedFormControl, UntypedFormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+  ComponentFixture,
-import { BrowserModule, By } from '@angular/platform-browser';
+  TestBed,
-import { ActivatedRoute, Router } from '@angular/router';
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+import {
+  BrowserModule,
+  By,
+} from '@angular/platform-browser';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
-import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import {
-import { Observable, of as observableOf } from 'rxjs';
+  TranslateLoader,
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import { Operation } from 'fast-json-patch';
+import {
+  Observable,
+  of as observableOf,
+} from 'rxjs';
+
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
 import { DSOChangeAnalyzer } from '../../../core/data/dso-change-analyzer.service';
 import { DSpaceObjectDataService } from '../../../core/data/dspace-object-data.service';
 import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
+import {
+  buildPaginatedList,
+  PaginatedList,
+} from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
 import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { Group } from '../../../core/eperson/models/group.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
+import { NoContent } from '../../../core/shared/NoContent.model';
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { UUIDService } from '../../../core/shared/uuid.service';
+import { XSRFService } from '../../../core/xsrf/xsrf.service';
+import { AlertComponent } from '../../../shared/alert/alert.component';
+import { ContextHelpDirective } from '../../../shared/context-help.directive';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { FormComponent } from '../../../shared/form/form.component';
-import { GroupMock, GroupMock2 } from '../../../shared/testing/group-mock';
-import { GroupFormComponent } from './group-form.component';
-import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
-import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
-import { getMockTranslateService } from '../../../shared/mocks/translate.service.mock';
-import { TranslateLoaderMock } from '../../../shared/testing/translate-loader.mock';
-import { RouterMock } from '../../../shared/mocks/router.mock';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
-import { Operation } from 'fast-json-patch';
-import { ValidateGroupExists } from './validators/group-exists.validator';
-import { NoContent } from '../../../core/shared/NoContent.model';
-import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock } from '../../../shared/mocks/dso-name.service.mock';
+import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
+import { RouterMock } from '../../../shared/mocks/router.mock';
+import { getMockTranslateService } from '../../../shared/mocks/translate.service.mock';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import {
+  GroupMock,
+  GroupMock2,
+} from '../../../shared/testing/group-mock';
+import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
+import { TranslateLoaderMock } from '../../../shared/testing/translate-loader.mock';
+import { GroupFormComponent } from './group-form.component';
+import { MembersListComponent } from './members-list/members-list.component';
+import { SubgroupsListComponent } from './subgroup-list/subgroups-list.component';
+import { ValidateGroupExists } from './validators/group-exists.validator';
 
 describe('GroupFormComponent', () => {
   let component: GroupFormComponent;
@@ -65,8 +101,8 @@ describe('GroupFormComponent', () => {
       metadata: {
         'dc.description': [
           {
-            value: groupDescription
+            value: groupDescription,
-          }
+          },
         ],
       },
     });
@@ -105,7 +141,7 @@ describe('GroupFormComponent', () => {
       create(group: Group): Observable<RemoteData<Group>> {
         this.allGroups = [...this.allGroups, group];
         this.createdGroup = Object.assign({}, group, {
-          _links: { self: { href: 'group-selflink' } }
+          _links: { self: { href: 'group-selflink' } },
         });
         return createSuccessfulRemoteDataObject$(this.createdGroup);
       },
@@ -114,15 +150,15 @@ describe('GroupFormComponent', () => {
       },
       getGroupEditPageRouterLinkWithID(id: string) {
         return `group-edit-page-for-${id}`;
-      }
+      },
     };
     authorizationService = jasmine.createSpyObj('authorizationService', {
-      isAuthorized: observableOf(true)
+      isAuthorized: observableOf(true),
     });
     dsoDataServiceStub = {
       findByHref(href: string): Observable<RemoteData<DSpaceObject>> {
         return null;
-      }
+      },
     };
     builderService = Object.assign(getMockFormBuilderService(),{
       createFormGroup(formModel, options = null) {
@@ -185,7 +221,7 @@ describe('GroupFormComponent', () => {
       },
       isObject(value) {
         return typeof value === 'object' && value !== null;
-      }
+      },
     });
     translateService = getMockTranslateService();
     router = new RouterMock();
@@ -195,11 +231,9 @@ describe('GroupFormComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
+            useClass: TranslateLoaderMock,
-          }
+          },
-        }),
+        }), GroupFormComponent],
-      ],
-      declarations: [GroupFormComponent],
       providers: [
         { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
@@ -211,18 +245,29 @@ describe('GroupFormComponent', () => {
         { provide: HttpClient, useValue: {} },
         { provide: ObjectCacheService, useValue: {} },
         { provide: UUIDService, useValue: {} },
+        { provide: XSRFService, useValue: {} },
         { provide: Store, useValue: {} },
         { provide: RemoteDataBuildService, useValue: {} },
         { provide: HALEndpointService, useValue: {} },
         {
           provide: ActivatedRoute,
-          useValue: { data: observableOf({ dso: { payload: {} } }), params: observableOf({}) }
+          useValue: { data: observableOf({ dso: { payload: {} } }), params: observableOf({}) },
         },
         { provide: Router, useValue: router },
         { provide: AuthorizationDataService, useValue: authorizationService },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+    })
+      .overrideComponent(GroupFormComponent, {
+        remove: { imports: [
+          FormComponent,
+          AlertComponent,
+          ContextHelpDirective,
+          MembersListComponent,
+          SubgroupsListComponent,
+        ] },
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -257,8 +302,8 @@ describe('GroupFormComponent', () => {
           metadata: {
             'dc.description': [
               {
-                value: groupDescription
+                value: groupDescription,
-              }
+              },
             ],
           },
         });
@@ -273,11 +318,11 @@ describe('GroupFormComponent', () => {
         const operations = [{
           op: 'add',
           path: '/metadata/dc.description',
-          value: 'testDescription'
+          value: 'testDescription',
         }, {
           op: 'replace',
           path: '/name',
-          value: 'newGroupName'
+          value: 'newGroupName',
         }];
         expect(groupsDataServiceStub.patch).toHaveBeenCalledWith(expected, operations);
       });
@@ -289,7 +334,7 @@ describe('GroupFormComponent', () => {
         const operations = [{
           op: 'add',
           path: '/metadata/dc.description',
-          value: 'testDescription'
+          value: 'testDescription',
         }];
         expect(groupsDataServiceStub.patch).toHaveBeenCalledWith(expected, operations);
       });
@@ -301,7 +346,7 @@ describe('GroupFormComponent', () => {
         const operations = [{
           op: 'replace',
           path: '/name',
-          value: 'newGroupName'
+          value: 'newGroupName',
         }];
         expect(groupsDataServiceStub.patch).toHaveBeenCalledWith(expected, operations);
       });
@@ -338,8 +383,8 @@ describe('GroupFormComponent', () => {
         metadata: {
           'dc.description': [
             {
-              value: groupDescription
+              value: groupDescription,
-            }
+            },
           ],
         },
       });
@@ -376,7 +421,7 @@ describe('GroupFormComponent', () => {
         const groupsDataServiceStubWithGroup = Object.assign(groupsDataServiceStub,{
           searchGroups(query: string): Observable<RemoteData<PaginatedList<Group>>> {
             return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [expected]));
-          }
+          },
         });
         component.formGroup.controls.groupName.setValue('testName');
         component.formGroup.controls.groupName.setAsyncValidators(ValidateGroupExists.createValidator(groupsDataServiceStubWithGroup));
@@ -400,7 +445,7 @@ describe('GroupFormComponent', () => {
 
       component.canEdit$ = observableOf(true);
       component.groupBeingEdited = {
-        permanent: false
+        permanent: false,
       } as Group;
 
       fixture.detectChanges();

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

@@ -1,24 +1,52 @@
-import { Component, EventEmitter, HostListener, OnDestroy, OnInit, Output, ChangeDetectorRef } from '@angular/core';
+import {
+  AsyncPipe,
+  NgIf,
+} from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostListener,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import {
   DynamicFormControlModel,
   DynamicFormLayout,
   DynamicInputModel,
-  DynamicTextAreaModel
+  DynamicTextAreaModel,
 } from '@ng-dynamic-forms/core';
-import { TranslateService } from '@ngx-translate/core';
 import {
-  ObservedValueOf,
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import { Operation } from 'fast-json-patch';
+import {
   combineLatest as observableCombineLatest,
   Observable,
   of as observableOf,
   Subscription,
 } from 'rxjs';
-import { catchError, map, switchMap, take, filter, debounceTime } from 'rxjs/operators';
+import {
+  catchError,
+  debounceTime,
+  filter,
+  map,
+  switchMap,
+  take,
+} from 'rxjs/operators';
+
+import { environment } from '../../../../environments/environment';
 import { getCollectionEditRolesRoute } from '../../../collection-page/collection-page-routing-paths';
 import { getCommunityEditRolesRoute } from '../../../community-page/community-page-routing-paths';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { DSpaceObjectDataService } from '../../../core/data/dspace-object-data.service';
 import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
@@ -31,27 +59,48 @@ import { Group } from '../../../core/eperson/models/group.model';
 import { Collection } from '../../../core/shared/collection.model';
 import { Community } from '../../../core/shared/community.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { NoContent } from '../../../core/shared/NoContent.model';
 import {
-  getRemoteDataPayload,
-  getFirstSucceededRemoteData,
   getFirstCompletedRemoteData,
-  getFirstSucceededRemoteDataPayload
+  getFirstSucceededRemoteData,
+  getFirstSucceededRemoteDataPayload,
+  getRemoteDataPayload,
 } from '../../../core/shared/operators';
-import { AlertType } from '../../../shared/alert/aletr-type';
+import { AlertComponent } from '../../../shared/alert/alert.component';
+import { AlertType } from '../../../shared/alert/alert-type';
 import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
-import { hasValue, isNotEmpty, hasValueOperator } from '../../../shared/empty.util';
+import { ContextHelpDirective } from '../../../shared/context-help.directive';
+import {
+  hasValue,
+  hasValueOperator,
+  isNotEmpty,
+} from '../../../shared/empty.util';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
+import { FormComponent } from '../../../shared/form/form.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
-import { NoContent } from '../../../core/shared/NoContent.model';
+import {
-import { Operation } from 'fast-json-patch';
+  getGroupEditRoute,
+  getGroupsRoute,
+} from '../../access-control-routing-paths';
+import { MembersListComponent } from './members-list/members-list.component';
+import { SubgroupsListComponent } from './subgroup-list/subgroups-list.component';
 import { ValidateGroupExists } from './validators/group-exists.validator';
-import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
-import { environment } from '../../../../environments/environment';
 
 @Component({
   selector: 'ds-group-form',
-  templateUrl: './group-form.component.html'
+  templateUrl: './group-form.component.html',
+  imports: [
+    FormComponent,
+    AlertComponent,
+    NgIf,
+    AsyncPipe,
+    TranslateModule,
+    ContextHelpDirective,
+    MembersListComponent,
+    SubgroupsListComponent,
+  ],
+  standalone: true,
 })
 /**
  * A form used for creating and editing groups
@@ -83,13 +132,13 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   formLayout: DynamicFormLayout = {
     groupName: {
       grid: {
-        host: 'row'
+        host: 'row',
-      }
+      },
     },
     groupDescription: {
       grid: {
-        host: 'row'
+        host: 'row',
-      }
+      },
     },
   };
 
@@ -165,19 +214,19 @@ export class GroupFormComponent implements OnInit, OnDestroy {
     this.canEdit$ = this.groupDataService.getActiveGroup().pipe(
       hasValueOperator(),
       switchMap((group: Group) => {
-        return observableCombineLatest(
+        return observableCombineLatest([
           this.authorizationService.isAuthorized(FeatureID.CanDelete, isNotEmpty(group) ? group.self : undefined),
           this.hasLinkedDSO(group),
-          (isAuthorized: ObservedValueOf<Observable<boolean>>, hasLinkedDSO: ObservedValueOf<Observable<boolean>>) => {
+        ]).pipe(
-            return isAuthorized && !hasLinkedDSO;
+          map(([isAuthorized, hasLinkedDSO]: [boolean, boolean]) => isAuthorized && !hasLinkedDSO),
-          });
-      })
         );
-    observableCombineLatest(
+      }),
+    );
+    observableCombineLatest([
       this.translateService.get(`${this.messagePrefix}.groupName`),
       this.translateService.get(`${this.messagePrefix}.groupCommunity`),
-      this.translateService.get(`${this.messagePrefix}.groupDescription`)
+      this.translateService.get(`${this.messagePrefix}.groupDescription`),
-    ).subscribe(([groupName, groupCommunity, groupDescription]) => {
+    ]).subscribe(([groupName, groupCommunity, groupDescription]) => {
       this.groupName = new DynamicInputModel({
         id: 'groupName',
         label: groupName,
@@ -207,7 +256,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
       ];
       this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
 
-      if (!!this.formGroup.controls.groupName) {
+      if (this.formGroup.controls.groupName) {
         this.formGroup.controls.groupName.setAsyncValidators(ValidateGroupExists.createValidator(this.groupDataService));
         this.groupNameValueChangeSubscribe = this.groupName.valueChanges.pipe(debounceTime(300)).subscribe(() => {
           this.changeDetectorRef.detectChanges();
@@ -215,12 +264,12 @@ export class GroupFormComponent implements OnInit, OnDestroy {
       }
 
       this.subs.push(
-        observableCombineLatest(
+        observableCombineLatest([
           this.groupDataService.getActiveGroup(),
           this.canEdit$,
           this.groupDataService.getActiveGroup()
-            .pipe(filter((activeGroup) => hasValue(activeGroup)),switchMap((activeGroup) => this.getLinkedDSO(activeGroup).pipe(getFirstSucceededRemoteDataPayload())))
+            .pipe(filter((activeGroup) => hasValue(activeGroup)),switchMap((activeGroup) => this.getLinkedDSO(activeGroup).pipe(getFirstSucceededRemoteDataPayload()))),
-        ).subscribe(([activeGroup, canEdit, linkedObject]) => {
+        ]).subscribe(([activeGroup, canEdit, linkedObject]) => {
 
           if (activeGroup != null) {
 
@@ -230,12 +279,14 @@ export class GroupFormComponent implements OnInit, OnDestroy {
             this.groupBeingEdited = activeGroup;
 
             if (linkedObject?.name) {
+              if (!this.formGroup.controls.groupCommunity) {
                 this.formBuilderService.insertFormGroupControl(1, this.formGroup, this.formModel, this.groupCommunity);
                 this.formGroup.patchValue({
                   groupName: activeGroup.name,
                   groupCommunity: linkedObject?.name ?? '',
                   groupDescription: activeGroup.firstMetadataValue('dc.description'),
                 });
+              }
             } else {
               this.formModel = [
                 this.groupName,
@@ -252,7 +303,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
               }
             }, 200);
           }
-        })
+        }),
       );
     });
   }
@@ -263,7 +314,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   onCancel() {
     this.groupDataService.cancelEditGroup();
     this.cancelForm.emit();
-    this.router.navigate([this.groupDataService.getGroupRegistryRouterLink()]);
+    void this.router.navigate([getGroupsRoute()]);
   }
 
   /**
@@ -280,9 +331,9 @@ export class GroupFormComponent implements OnInit, OnDestroy {
           metadata: {
             'dc.description': [
               {
-                value: this.groupDescription.value
+                value: this.groupDescription.value,
-              }
+              },
-            ]
+            ],
           },
         };
         if (group === null) {
@@ -290,7 +341,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
         } else {
           this.editGroup(group);
         }
-      }
+      },
     );
   }
 
@@ -301,7 +352,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   createNewGroup(values) {
     const groupToCreate = Object.assign(new Group(), values);
     this.groupDataService.create(groupToCreate).pipe(
-      getFirstCompletedRemoteData()
+      getFirstCompletedRemoteData(),
     ).subscribe((rd: RemoteData<Group>) => {
       if (rd.hasSucceeded) {
         this.notificationsService.success(this.translateService.get(this.messagePrefix + '.notification.created.success', { name: groupToCreate.name }));
@@ -310,7 +361,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
           const groupSelfLink = rd.payload._links.self.href;
           this.setActiveGroupWithLink(groupSelfLink);
           this.groupDataService.clearGroupsRequests();
-          this.router.navigateByUrl(this.groupDataService.getGroupEditPageRouterLinkWithID(rd.payload.uuid));
+          void this.router.navigateByUrl(getGroupEditRoute(rd.payload.uuid));
         }
       } else {
         this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.created.failure', { name: groupToCreate.name }));
@@ -330,7 +381,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
     // Relevant message for group name in use
     this.subs.push(this.groupDataService.searchGroups(group.name, {
       currentPage: 1,
-      elementsPerPage: 0
+      elementsPerPage: 0,
     }).pipe(getFirstSucceededRemoteData(), getRemoteDataPayload())
       .subscribe((list: PaginatedList<Group>) => {
         if (list.totalElements > 0) {
@@ -352,7 +403,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
       operations = [...operations, {
         op: 'add',
         path: '/metadata/dc.description',
-        value: this.groupDescription.value
+        value: this.groupDescription.value,
       }];
     }
 
@@ -360,12 +411,12 @@ export class GroupFormComponent implements OnInit, OnDestroy {
       operations = [...operations, {
         op: 'replace',
         path: '/name',
-        value: this.groupName.value
+        value: this.groupName.value,
       }];
     }
 
     this.groupDataService.patch(group, operations).pipe(
-      getFirstCompletedRemoteData()
+      getFirstCompletedRemoteData(),
     ).subscribe((rd: RemoteData<Group>) => {
       if (rd.hasSucceeded) {
         this.notificationsService.success(this.translateService.get(this.messagePrefix + '.notification.edited.success', { name: this.dsoNameService.getName(rd.payload) }));
@@ -418,7 +469,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   delete() {
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((group: Group) => {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = group;
+      modalRef.componentInstance.name = this.dsoNameService.getName(group);
       modalRef.componentInstance.headerLabel = this.messagePrefix + '.delete-group.modal.header';
       modalRef.componentInstance.infoLabel = this.messagePrefix + '.delete-group.modal.info';
       modalRef.componentInstance.cancelLabel = this.messagePrefix + '.delete-group.modal.cancel';
@@ -504,7 +555,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
                 return getCollectionEditRolesRoute(rd.payload.id);
             }
           }
-        })
+        }),
       );
     }
   }

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

@@ -1,110 +1,12 @@
 <ng-container>
-  <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
+  <h2 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h2>
 
-  <h4 id="search" class="border-bottom pb-2">
+  <h3>{{messagePrefix + '.headMembers' | translate}}</h3>
-    <span
-      *dsContextHelp="{
-        content: 'admin.access-control.groups.form.tooltip.editGroup.addEpeople',
-        id: 'edit-group-add-epeople',
-        iconPlacement: 'right',
-        tooltipPlacement: ['top', 'right', 'bottom']
-      }"
-    >
-      {{messagePrefix + '.search.head' | translate}}
-    </span>
-  </h4>
 
-  <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
+  <ds-pagination *ngIf="(ePeopleMembersOfGroup | async)?.totalElements > 0"
-    <div>
-      <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
-        <option value="metadata">{{messagePrefix + '.search.scope.metadata' | translate}}</option>
-        <option value="email">{{messagePrefix + '.search.scope.email' | translate}}</option>
-      </select>
-    </div>
-    <div class="flex-grow-1 mr-3 ml-3">
-      <div class="form-group input-group">
-        <input type="text" name="query" id="query" formControlName="query"
-               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>
-      </div>
-    </div>
-    <div>
-      <button (click)="clearFormAndResetResult();"
-              class="btn btn-secondary">{{messagePrefix + '.button.see-all' | translate}}</button>
-    </div>
-  </form>
-
-  <ds-pagination *ngIf="(ePeopleSearchDtos | async)?.totalElements > 0"
-                 [paginationOptions]="configSearch"
-                 [pageInfoState]="(ePeopleSearchDtos | async)"
-                 [collectionSize]="(ePeopleSearchDtos | 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>
-        <tr *ngFor="let ePerson of (ePeopleSearchDtos | async)?.page">
-          <td class="align-middle">{{ePerson.eperson.id}}</td>
-          <td class="align-middle">
-            <a (click)="ePersonDataService.startEditingNewEPerson(ePerson.eperson)"
-               [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">
-              {{ dsoNameService.getName(ePerson.eperson) }}
-            </a>
-          </td>
-          <td class="align-middle">
-            {{messagePrefix + '.table.email' | translate}}: {{ ePerson.eperson.email ? ePerson.eperson.email : '-' }}<br/>
-            {{messagePrefix + '.table.netid' | translate}}: {{ ePerson.eperson.netid ? ePerson.eperson.netid : '-' }}
-          </td>
-          <td class="align-middle">
-            <div class="btn-group edit-field">
-              <button *ngIf="ePerson.memberOfGroup"
-                      (click)="deleteMemberFromGroup(ePerson)"
-                      [disabled]="actionConfig.remove.disabled"
-                      [ngClass]="['btn btn-sm', actionConfig.remove.css]"
-                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(ePerson.eperson) } }}">
-                <i [ngClass]="actionConfig.remove.icon"></i>
-              </button>
-
-              <button *ngIf="!ePerson.memberOfGroup"
-                      (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.eperson) } }}">
-                <i [ngClass]="actionConfig.add.icon"></i>
-              </button>
-            </div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-
-  </ds-pagination>
-
-  <div *ngIf="(ePeopleSearchDtos | async)?.totalElements == 0 && searchDone"
-       class="alert alert-info w-100 mb-2"
-       role="alert">
-    {{messagePrefix + '.no-items' | translate}}
-  </div>
-
-  <h4>{{messagePrefix + '.headMembers' | translate}}</h4>
-
-  <ds-pagination *ngIf="(ePeopleMembersOfGroupDtos | async)?.totalElements > 0"
                  [paginationOptions]="config"
-                 [pageInfoState]="(ePeopleMembersOfGroupDtos | async)"
+                 [pageInfoState]="(ePeopleMembersOfGroup | async)"
-                 [collectionSize]="(ePeopleMembersOfGroupDtos | async)?.totalElements"
+                 [collectionSize]="(ePeopleMembersOfGroup | async)?.totalElements"
                  [hideGear]="true"
                  [hidePagerWhenSinglePage]="true">
 
@@ -119,32 +21,104 @@
         </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let ePerson of (ePeopleMembersOfGroupDtos | async)?.page">
+        <tr *ngFor="let eperson of (ePeopleMembersOfGroup | async)?.page">
-          <td class="align-middle">{{ePerson.eperson.id}}</td>
+          <td class="align-middle">{{eperson.id}}</td>
           <td class="align-middle">
-            <a (click)="ePersonDataService.startEditingNewEPerson(ePerson.eperson)"
+            <a [routerLink]="getEPersonEditRoute(eperson.id)">
-               [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">
+              {{ dsoNameService.getName(eperson) }}
-              {{ dsoNameService.getName(ePerson.eperson) }}
             </a>
           </td>
           <td class="align-middle">
-            {{messagePrefix + '.table.email' | translate}}: {{ ePerson.eperson.email ? ePerson.eperson.email : '-' }}<br/>
+            {{messagePrefix + '.table.email' | translate}}: {{ eperson.email ? eperson.email : '-' }}<br/>
-            {{messagePrefix + '.table.netid' | translate}}: {{ ePerson.eperson.netid ? ePerson.eperson.netid : '-' }}
+            {{messagePrefix + '.table.netid' | translate}}: {{ eperson.netid ? eperson.netid : '-' }}
           </td>
           <td class="align-middle">
             <div class="btn-group edit-field">
-              <button *ngIf="ePerson.memberOfGroup"
+              <button (click)="deleteMemberFromGroup(eperson)"
-                      (click)="deleteMemberFromGroup(ePerson)"
                       [disabled]="actionConfig.remove.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.remove.css]"
-                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(ePerson.eperson) } }}">
+                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(eperson) } }}">
                 <i [ngClass]="actionConfig.remove.icon"></i>
               </button>
-              <button *ngIf="!ePerson.memberOfGroup"
+            </div>
-                      (click)="addMemberToGroup(ePerson)"
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </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
+      *dsContextHelp="{
+        content: 'admin.access-control.groups.form.tooltip.editGroup.addEpeople',
+        id: 'edit-group-add-epeople',
+        iconPlacement: 'right',
+        tooltipPlacement: ['top', 'right', 'bottom']
+      }"
+    >
+      {{messagePrefix + '.search.head' | translate}}
+    </span>
+  </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">
+        <input type="text" name="query" id="query" formControlName="query"
+               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>
+      </div>
+    </div>
+    <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"
+                 [pageInfoState]="(ePeopleSearch | async)"
+                 [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>
+        <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.eperson) } }}">
+                      title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(eperson) } }}">
                 <i [ngClass]="actionConfig.add.icon"></i>
               </button>
             </div>
@@ -156,9 +130,10 @@
 
   </ds-pagination>
 
-  <div *ngIf="(ePeopleMembersOfGroupDtos | async) == undefined || (ePeopleMembersOfGroupDtos | async)?.totalElements == 0" class="alert alert-info w-100 mb-2"
+  <div *ngIf="(ePeopleSearch | async)?.totalElements === 0 && searchDone"
+       class="alert alert-info w-100 mb-2"
        role="alert">
-    {{messagePrefix + '.no-members-yet' | translate}}
+    {{messagePrefix + '.no-items' | translate}}
   </div>
 
 </ng-container>

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

@@ -1,35 +1,74 @@
 import { CommonModule } from '@angular/common';
-import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import {
-import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
+  DebugElement,
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+  NO_ERRORS_SCHEMA,
-import { BrowserModule, By } from '@angular/platform-browser';
+} from '@angular/core';
-import { Router } from '@angular/router';
+import {
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  inject,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  BrowserModule,
+  By,
+} from '@angular/platform-browser';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import {
-import { Observable, of as observableOf } from 'rxjs';
+  TranslateLoader,
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import {
+  Observable,
+  of as observableOf,
+} from 'rxjs';
+
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 import { RestResponse } from '../../../../core/cache/response.models';
-import { buildPaginatedList, PaginatedList } from '../../../../core/data/paginated-list.model';
+import {
+  buildPaginatedList,
+  PaginatedList,
+} from '../../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
 import { GroupDataService } from '../../../../core/eperson/group-data.service';
 import { EPerson } from '../../../../core/eperson/models/eperson.model';
 import { Group } from '../../../../core/eperson/models/group.model';
-import { PageInfo } from '../../../../core/shared/page-info.model';
-import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
-import { GroupMock, GroupMock2 } from '../../../../shared/testing/group-mock';
-import { MembersListComponent } from './members-list.component';
-import { EPersonMock, EPersonMock2 } from '../../../../shared/testing/eperson.mock';
-import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
-import { getMockTranslateService } from '../../../../shared/mocks/translate.service.mock';
-import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
-import { TranslateLoaderMock } from '../../../../shared/testing/translate-loader.mock';
-import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
-import { RouterMock } from '../../../../shared/mocks/router.mock';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
-import { PaginationServiceStub } from '../../../../shared/testing/pagination-service.stub';
+import { PageInfo } from '../../../../core/shared/page-info.model';
-import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { ContextHelpDirective } from '../../../../shared/context-help.directive';
+import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
+import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
+import { RouterMock } from '../../../../shared/mocks/router.mock';
+import { getMockTranslateService } from '../../../../shared/mocks/translate.service.mock';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
+import { ActivatedRouteStub } from '../../../../shared/testing/active-router.stub';
+import {
+  EPersonMock,
+  EPersonMock2,
+} from '../../../../shared/testing/eperson.mock';
+import { GroupMock } from '../../../../shared/testing/group-mock';
+import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
+import { PaginationServiceStub } from '../../../../shared/testing/pagination-service.stub';
+import { TranslateLoaderMock } from '../../../../shared/testing/translate-loader.mock';
+import { MembersListComponent } from './members-list.component';
+
+// todo: optimize imports
 
 describe('MembersListComponent', () => {
   let component: MembersListComponent;
@@ -39,28 +78,26 @@ describe('MembersListComponent', () => {
   let ePersonDataServiceStub: any;
   let groupsDataServiceStub: any;
   let activeGroup;
-  let allEPersons: EPerson[];
-  let allGroups: Group[];
   let epersonMembers: EPerson[];
-  let subgroupMembers: Group[];
+  let epersonNonMembers: EPerson[];
   let paginationService;
 
   beforeEach(waitForAsync(() => {
     activeGroup = GroupMock;
     epersonMembers = [EPersonMock2];
-    subgroupMembers = [GroupMock2];
+    epersonNonMembers = [EPersonMock];
-    allEPersons = [EPersonMock, EPersonMock2];
-    allGroups = [GroupMock, GroupMock2];
     ePersonDataServiceStub = {
       activeGroup: activeGroup,
       epersonMembers: epersonMembers,
-      subgroupMembers: subgroupMembers,
+      epersonNonMembers: epersonNonMembers,
+      // This method is used to get all the current members
       findListByHref(_href: string): Observable<RemoteData<PaginatedList<EPerson>>> {
         return createSuccessfulRemoteDataObject$(buildPaginatedList<EPerson>(new PageInfo(), groupsDataServiceStub.getEPersonMembers()));
       },
-      searchByScope(scope: string, query: string): Observable<RemoteData<PaginatedList<EPerson>>> {
+      // This method is used to search across *non-members*
+      searchNonMembers(query: string, group: string): Observable<RemoteData<PaginatedList<EPerson>>> {
         if (query === '') {
-          return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), allEPersons));
+          return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), epersonNonMembers));
         }
         return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), []));
       },
@@ -70,29 +107,26 @@ describe('MembersListComponent', () => {
       clearLinkRequests() {
         // empty
       },
-      getEPeoplePageRouterLink(): string {
-        return '/access-control/epeople';
-      }
     };
     groupsDataServiceStub = {
       activeGroup: activeGroup,
       epersonMembers: epersonMembers,
-      subgroupMembers: subgroupMembers,
+      epersonNonMembers: epersonNonMembers,
-      allGroups: allGroups,
       getActiveGroup(): Observable<Group> {
         return observableOf(activeGroup);
       },
       getEPersonMembers() {
         return this.epersonMembers;
       },
-      searchGroups(query: string): Observable<RemoteData<PaginatedList<Group>>> {
+      addMemberToGroup(parentGroup, epersonToAdd: EPerson): Observable<RestResponse> {
-        if (query === '') {
+        // Add eperson to list of members
-          return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), this.allGroups));
+        this.epersonMembers = [...this.epersonMembers, epersonToAdd];
+        // Remove eperson from list of non-members
+        this.epersonNonMembers.forEach( (eperson: EPerson, index: number) => {
+          if (eperson.id === epersonToAdd.id) {
+            this.epersonNonMembers.splice(index, 1);
           }
-        return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), []));
+        });
-      },
-      addMemberToGroup(parentGroup, eperson: EPerson): Observable<RestResponse> {
-        this.epersonMembers = [...this.epersonMembers, eperson];
         return observableOf(new RestResponse(true, 200, 'Success'));
       },
       clearGroupsRequests() {
@@ -105,16 +139,16 @@ describe('MembersListComponent', () => {
         return '/access-control/groups/' + group.id;
       },
       deleteMemberFromGroup(parentGroup, epersonToDelete: EPerson): Observable<RestResponse> {
-        this.epersonMembers = this.epersonMembers.find((eperson: EPerson) => {
+        // Remove eperson from list of members
-          if (eperson.id !== epersonToDelete.id) {
+        this.epersonMembers.forEach( (eperson: EPerson, index: number) => {
-            return eperson;
+          if (eperson.id === epersonToDelete.id) {
+            this.epersonMembers.splice(index, 1);
           }
         });
-        if (this.epersonMembers === undefined) {
+        // Add eperson to list of non-members
-          this.epersonMembers = [];
+        this.epersonNonMembers = [...this.epersonNonMembers, epersonToDelete];
-        }
         return observableOf(new RestResponse(true, 200, 'Success'));
-      }
+      },
     };
     builderService = getMockFormBuilderService();
     translateService = getMockTranslateService();
@@ -125,11 +159,9 @@ describe('MembersListComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
+            useClass: TranslateLoaderMock,
-          }
+          },
-        }),
+        }), MembersListComponent],
-      ],
-      declarations: [MembersListComponent],
       providers: [MembersListComponent,
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: GroupDataService, useValue: groupsDataServiceStub },
@@ -138,9 +170,16 @@ describe('MembersListComponent', () => {
         { provide: Router, useValue: new RouterMock() },
         { provide: PaginationService, useValue: paginationService },
         { provide: DSONameService, useValue: new DSONameServiceMock() },
+        { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+    })
+      .overrideComponent(MembersListComponent, {
+        remove: {
+          imports: [PaginationComponent, ContextHelpDirective],
+        },
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -160,6 +199,7 @@ describe('MembersListComponent', () => {
     expect(comp).toBeDefined();
   }));
 
+  describe('current members list', () => {
     it('should show list of eperson members of current active group', () => {
       const epersonIdsFound = fixture.debugElement.queryAll(By.css('#ePeopleMembersOfGroup tr td:first-child'));
       expect(epersonIdsFound.length).toEqual(1);
@@ -170,55 +210,8 @@ describe('MembersListComponent', () => {
       });
     });
 
-  describe('search', () => {
+    it('should show a delete button next to each member', () => {
-    describe('when searching without query', () => {
+      const epersonsFound = fixture.debugElement.queryAll(By.css('#ePeopleMembersOfGroup tbody tr'));
-      let epersonsFound: DebugElement[];
-      beforeEach(fakeAsync(() => {
-        spyOn(component, 'isMemberOfGroup').and.callFake((ePerson: EPerson) => {
-          return observableOf(activeGroup.epersons.includes(ePerson));
-        });
-        component.search({ scope: 'metadata', query: '' });
-        tick();
-        fixture.detectChanges();
-        epersonsFound = fixture.debugElement.queryAll(By.css('#epersonsSearch tbody tr'));
-        // Stop using the fake spy function (because otherwise the clicking on the buttons will not change anything
-        // because they don't change the value of activeGroup.epersons)
-        jasmine.getEnv().allowRespy(true);
-        spyOn(component, 'isMemberOfGroup').and.callThrough();
-      }));
-
-      it('should display all epersons', () => {
-        expect(epersonsFound.length).toEqual(2);
-      });
-
-      describe('if eperson is already a eperson', () => {
-        it('should have delete button, else it should have add button', () => {
-          const memberIds: string[] = activeGroup.epersons.map((ePerson: EPerson) => ePerson.id);
-          epersonsFound.map((foundEPersonRowElement: DebugElement) => {
-            const epersonId: DebugElement = foundEPersonRowElement.query(By.css('td:first-child'));
-            const addButton: DebugElement = foundEPersonRowElement.query(By.css('td:last-child .fa-plus'));
-            const deleteButton: DebugElement = foundEPersonRowElement.query(By.css('td:last-child .fa-trash-alt'));
-            if (memberIds.includes(epersonId.nativeElement.textContent)) {
-              expect(addButton).toBeNull();
-              expect(deleteButton).not.toBeNull();
-            } else {
-              expect(deleteButton).toBeNull();
-              expect(addButton).not.toBeNull();
-            }
-          });
-        });
-      });
-
-      describe('if first add button is pressed', () => {
-        beforeEach(fakeAsync(() => {
-          const addButton: DebugElement = fixture.debugElement.query(By.css('#epersonsSearch tbody .fa-plus'));
-          addButton.nativeElement.click();
-          tick();
-          fixture.detectChanges();
-        }));
-        it('then all the ePersons are member of the active group', () => {
-          epersonsFound = fixture.debugElement.queryAll(By.css('#epersonsSearch tbody tr'));
-          expect(epersonsFound.length).toEqual(2);
       epersonsFound.map((foundEPersonRowElement: DebugElement) => {
         const addButton: DebugElement = foundEPersonRowElement.query(By.css('td:last-child .fa-plus'));
         const deleteButton: DebugElement = foundEPersonRowElement.query(By.css('td:last-child .fa-trash-alt'));
@@ -226,25 +219,59 @@ describe('MembersListComponent', () => {
         expect(deleteButton).not.toBeNull();
       });
     });
-      });
 
     describe('if first delete button is pressed', () => {
-        beforeEach(fakeAsync(() => {
+      beforeEach(() => {
-          const deleteButton: DebugElement = fixture.debugElement.query(By.css('#epersonsSearch tbody .fa-trash-alt'));
+        const deleteButton: DebugElement = fixture.debugElement.query(By.css('#ePeopleMembersOfGroup tbody .fa-trash-alt'));
         deleteButton.nativeElement.click();
+        fixture.detectChanges();
+      });
+      it('then no ePerson remains as a member of the active group.', () => {
+        const epersonsFound = fixture.debugElement.queryAll(By.css('#ePeopleMembersOfGroup tbody tr'));
+        expect(epersonsFound.length).toEqual(0);
+      });
+    });
+  });
+
+  describe('search', () => {
+    describe('when searching without query', () => {
+      let epersonsFound: DebugElement[];
+      beforeEach(fakeAsync(() => {
+        component.search({ scope: 'metadata', query: '' });
         tick();
         fixture.detectChanges();
-        }));
-        it('then no ePerson is member of the active group', () => {
         epersonsFound = fixture.debugElement.queryAll(By.css('#epersonsSearch tbody tr'));
-          expect(epersonsFound.length).toEqual(2);
+      }));
+
+      it('should display only non-members of the group', () => {
+        const epersonIdsFound = fixture.debugElement.queryAll(By.css('#epersonsSearch tbody tr td:first-child'));
+        expect(epersonIdsFound.length).toEqual(1);
+        epersonNonMembers.map((eperson: EPerson) => {
+          expect(epersonIdsFound.find((foundEl) => {
+            return (foundEl.nativeElement.textContent.trim() === eperson.uuid);
+          })).toBeTruthy();
+        });
+      });
+
+      it('should display an add button next to non-members, not a delete button', () => {
         epersonsFound.map((foundEPersonRowElement: DebugElement) => {
           const addButton: DebugElement = foundEPersonRowElement.query(By.css('td:last-child .fa-plus'));
           const deleteButton: DebugElement = foundEPersonRowElement.query(By.css('td:last-child .fa-trash-alt'));
-            expect(deleteButton).toBeNull();
           expect(addButton).not.toBeNull();
+          expect(deleteButton).toBeNull();
         });
       });
+
+      describe('if first add button is pressed', () => {
+        beforeEach(() => {
+          const addButton: DebugElement = fixture.debugElement.query(By.css('#epersonsSearch tbody .fa-plus'));
+          addButton.nativeElement.click();
+          fixture.detectChanges();
+        });
+        it('then all (two) ePersons are member of the active group. No non-members left', () => {
+          epersonsFound = fixture.debugElement.queryAll(By.css('#epersonsSearch tbody tr'));
+          expect(epersonsFound.length).toEqual(0);
+        });
       });
     });
   });

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

@@ -1,41 +1,66 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
-import { Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
 import {
-  Observable,
+  AsyncPipe,
-  of as observableOf,
+  NgClass,
-  Subscription,
+  NgForOf,
+  NgIf,
+} from '@angular/common';
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+} from '@angular/forms';
+import {
+  Router,
+  RouterLink,
+} from '@angular/router';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import {
   BehaviorSubject,
-  combineLatest as observableCombineLatest,
+  Observable,
-  ObservedValueOf,
+  Subscription,
 } from 'rxjs';
-import { defaultIfEmpty, map, mergeMap, switchMap, take } from 'rxjs/operators';
+import {
-import { buildPaginatedList, PaginatedList } from '../../../../core/data/paginated-list.model';
+  map,
+  switchMap,
+  take,
+} from 'rxjs/operators';
+
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { PaginatedList } from '../../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
 import { GroupDataService } from '../../../../core/eperson/group-data.service';
 import { EPerson } from '../../../../core/eperson/models/eperson.model';
 import { Group } from '../../../../core/eperson/models/group.model';
-import {
-  getFirstSucceededRemoteData,
-  getFirstCompletedRemoteData,
-  getAllCompletedRemoteData,
-  getRemoteDataPayload
-} from '../../../../core/shared/operators';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
-import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
-import { EpersonDtoModel } from '../../../../core/eperson/models/eperson-dto.model';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
-import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import {
+  getAllCompletedRemoteData,
+  getFirstCompletedRemoteData,
+  getRemoteDataPayload,
+} from '../../../../core/shared/operators';
+import { ContextHelpDirective } from '../../../../shared/context-help.directive';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
+import { getEPersonEditRoute } from '../../../access-control-routing-paths';
+
+// todo: optimize imports
 
 /**
  * Keys to keep track of specific subscriptions
  */
 enum SubKey {
   ActiveGroup,
-  MembersDTO,
+  Members,
-  SearchResultsDTO,
+  SearchResults,
 }
 
 /**
@@ -69,7 +94,19 @@ export interface EPersonListActionConfig {
 
 @Component({
   selector: 'ds-members-list',
-  templateUrl: './members-list.component.html'
+  templateUrl: './members-list.component.html',
+  imports: [
+    TranslateModule,
+    ContextHelpDirective,
+    ReactiveFormsModule,
+    PaginationComponent,
+    NgIf,
+    AsyncPipe,
+    RouterLink,
+    NgClass,
+    NgForOf,
+  ],
+  standalone: true,
 })
 /**
  * The list of members in the edit group page
@@ -89,18 +126,18 @@ export class MembersListComponent implements OnInit, OnDestroy {
       remove: {
         css: 'btn-outline-danger',
         disabled: false,
-      icon: 'fas fa-trash-alt fa-fw'
+        icon: 'fas fa-trash-alt fa-fw',
       },
     };
 
   /**
    * EPeople being displayed in search result, initially all members, after search result of search
    */
-  ePeopleSearchDtos: BehaviorSubject<PaginatedList<EpersonDtoModel>> = new BehaviorSubject<PaginatedList<EpersonDtoModel>>(undefined);
+  ePeopleSearch: BehaviorSubject<PaginatedList<EPerson>> = new BehaviorSubject<PaginatedList<EPerson>>(undefined);
   /**
    * List of EPeople members of currently active group being edited
    */
-  ePeopleMembersOfGroupDtos: BehaviorSubject<PaginatedList<EpersonDtoModel>> = new BehaviorSubject<PaginatedList<EpersonDtoModel>>(undefined);
+  ePeopleMembersOfGroup: BehaviorSubject<PaginatedList<EPerson>> = new BehaviorSubject<PaginatedList<EPerson>>(undefined);
 
   /**
    * Pagination config used to display the list of EPeople that are result of EPeople search
@@ -108,7 +145,7 @@ export class MembersListComponent implements OnInit, OnDestroy {
   configSearch: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'sml',
     pageSize: 5,
-    currentPage: 1
+    currentPage: 1,
   });
   /**
    * Pagination config used to display the list of EPerson Membes of active group being edited
@@ -116,7 +153,7 @@ export class MembersListComponent implements OnInit, OnDestroy {
   config: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'ml',
     pageSize: 5,
-    currentPage: 1
+    currentPage: 1,
   });
 
   /**
@@ -129,7 +166,6 @@ export class MembersListComponent implements OnInit, OnDestroy {
 
   // Current search in edit group - epeople search form
   currentSearchQuery: string;
-  currentSearchScope: string;
 
   // Whether or not user has done a EPeople search yet
   searchDone: boolean;
@@ -137,6 +173,8 @@ export class MembersListComponent implements OnInit, OnDestroy {
   // current active group being edited
   groupBeingEdited: Group;
 
+  readonly getEPersonEditRoute = getEPersonEditRoute;
+
   constructor(
     protected groupDataService: GroupDataService,
     public ePersonDataService: EPersonDataService,
@@ -148,18 +186,17 @@ export class MembersListComponent implements OnInit, OnDestroy {
     public dsoNameService: DSONameService,
   ) {
     this.currentSearchQuery = '';
-    this.currentSearchScope = 'metadata';
   }
 
   ngOnInit(): void {
     this.searchForm = this.formBuilder.group(({
-      scope: 'metadata',
       query: '',
     }));
     this.subs.set(SubKey.ActiveGroup, this.groupDataService.getActiveGroup().subscribe((activeGroup: Group) => {
       if (activeGroup != null) {
         this.groupBeingEdited = activeGroup;
         this.retrieveMembers(this.config.currentPage);
+        this.search({ query: '' });
       }
     }));
   }
@@ -171,14 +208,14 @@ export class MembersListComponent implements OnInit, OnDestroy {
    * @private
    */
   retrieveMembers(page: number): void {
-    this.unsubFrom(SubKey.MembersDTO);
+    this.unsubFrom(SubKey.Members);
-    this.subs.set(SubKey.MembersDTO,
+    this.subs.set(SubKey.Members,
       this.paginationService.getCurrentPagination(this.config.id, this.config).pipe(
         switchMap((currentPagination) => {
           return this.ePersonDataService.findListByHref(this.groupBeingEdited._links.epersons.href, {
             currentPage: currentPagination.currentPage,
-              elementsPerPage: currentPagination.pageSize
+            elementsPerPage: currentPagination.pageSize,
-            }
+          },
           );
         }),
         getAllCompletedRemoteData(),
@@ -189,46 +226,9 @@ export class MembersListComponent implements OnInit, OnDestroy {
             return rd;
           }
         }),
-        switchMap((epersonListRD: RemoteData<PaginatedList<EPerson>>) => {
+        getRemoteDataPayload())
-          const dtos$ = observableCombineLatest([...epersonListRD.payload.page.map((member: EPerson) => {
+        .subscribe((paginatedListOfEPersons: PaginatedList<EPerson>) => {
-            const dto$: Observable<EpersonDtoModel> = observableCombineLatest(
+          this.ePeopleMembersOfGroup.next(paginatedListOfEPersons);
-              this.isMemberOfGroup(member), (isMember: ObservedValueOf<Observable<boolean>>) => {
-                const epersonDtoModel: EpersonDtoModel = new EpersonDtoModel();
-                epersonDtoModel.eperson = member;
-                epersonDtoModel.memberOfGroup = isMember;
-                return epersonDtoModel;
-              });
-            return dto$;
-          })]);
-          return dtos$.pipe(defaultIfEmpty([]), map((dtos: EpersonDtoModel[]) => {
-            return buildPaginatedList(epersonListRD.payload.pageInfo, dtos);
-          }));
-        }))
-        .subscribe((paginatedListOfDTOs: PaginatedList<EpersonDtoModel>) => {
-          this.ePeopleMembersOfGroupDtos.next(paginatedListOfDTOs);
-        }));
-  }
-
-  /**
-   * Whether the given ePerson is a member of the group currently being edited
-   * @param possibleMember  EPerson that is a possible member (being tested) of the group currently being edited
-   */
-  isMemberOfGroup(possibleMember: EPerson): Observable<boolean> {
-    return this.groupDataService.getActiveGroup().pipe(take(1),
-      mergeMap((group: Group) => {
-        if (group != null) {
-          return this.ePersonDataService.findListByHref(group._links.epersons.href, {
-            currentPage: 1,
-            elementsPerPage: 9999
-          })
-            .pipe(
-              getFirstSucceededRemoteData(),
-              getRemoteDataPayload(),
-              map((listEPeopleInGroup: PaginatedList<EPerson>) => listEPeopleInGroup.page.filter((ePersonInList: EPerson) => ePersonInList.id === possibleMember.id)),
-              map((epeople: EPerson[]) => epeople.length > 0));
-        } else {
-          return observableOf(false);
-        }
         }));
   }
 
@@ -248,14 +248,18 @@ export class MembersListComponent implements OnInit, OnDestroy {
 
   /**
    * Deletes a given EPerson from the members list of the group currently being edited
-   * @param ePerson   EPerson we want to delete as member from group that is currently being edited
+   * @param eperson   EPerson we want to delete as member from group that is currently being edited
    */
-  deleteMemberFromGroup(ePerson: EpersonDtoModel) {
+  deleteMemberFromGroup(eperson: EPerson) {
-    ePerson.memberOfGroup = false;
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((activeGroup: Group) => {
       if (activeGroup != null) {
-        const response = this.groupDataService.deleteMemberFromGroup(activeGroup, ePerson.eperson);
+        const response = this.groupDataService.deleteMemberFromGroup(activeGroup, eperson);
-        this.showNotifications('deleteMember', response, this.dsoNameService.getName(ePerson.eperson), activeGroup);
+        this.showNotifications('deleteMember', response, this.dsoNameService.getName(eperson), activeGroup);
+        // Reload search results (if there is an active query).
+        // This will potentially add this deleted subgroup into the list of search results.
+        if (this.currentSearchQuery != null) {
+          this.search({ query: this.currentSearchQuery });
+        }
       } else {
         this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.noActiveGroup'));
       }
@@ -264,14 +268,18 @@ export class MembersListComponent implements OnInit, OnDestroy {
 
   /**
    * Adds a given EPerson to the members list of the group currently being edited
-   * @param ePerson   EPerson we want to add as member to group that is currently being edited
+   * @param eperson   EPerson we want to add as member to group that is currently being edited
    */
-  addMemberToGroup(ePerson: EpersonDtoModel) {
+  addMemberToGroup(eperson: EPerson) {
-    ePerson.memberOfGroup = true;
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((activeGroup: Group) => {
       if (activeGroup != null) {
-        const response = this.groupDataService.addMemberToGroup(activeGroup, ePerson.eperson);
+        const response = this.groupDataService.addMemberToGroup(activeGroup, eperson);
-        this.showNotifications('addMember', response, this.dsoNameService.getName(ePerson.eperson), activeGroup);
+        this.showNotifications('addMember', response, this.dsoNameService.getName(eperson), activeGroup);
+        // Reload search results (if there is an active query).
+        // This will potentially add this deleted subgroup into the list of search results.
+        if (this.currentSearchQuery != null) {
+          this.search({ query: this.currentSearchQuery });
+        }
       } else {
         this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.noActiveGroup'));
       }
@@ -279,37 +287,25 @@ export class MembersListComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Search in the EPeople by name, email or metadata
+   * Search all EPeople who are NOT a member of the current group by name, email or metadata
-   * @param data  Contains scope and query param
+   * @param data  Contains query param
    */
   search(data: any) {
-    this.unsubFrom(SubKey.SearchResultsDTO);
+    this.unsubFrom(SubKey.SearchResults);
-    this.subs.set(SubKey.SearchResultsDTO,
+    this.subs.set(SubKey.SearchResults,
       this.paginationService.getCurrentPagination(this.configSearch.id, this.configSearch).pipe(
         switchMap((paginationOptions) => {
-
           const query: string = data.query;
-          const scope: string = data.scope;
           if (query != null && this.currentSearchQuery !== query && this.groupBeingEdited) {
-            this.router.navigate([], {
-              queryParamsHandling: 'merge'
-            });
             this.currentSearchQuery = query;
             this.paginationService.resetPage(this.configSearch.id);
           }
-          if (scope != null && this.currentSearchScope !== scope && this.groupBeingEdited) {
-            this.router.navigate([], {
-              queryParamsHandling: 'merge'
-            });
-            this.currentSearchScope = scope;
-            this.paginationService.resetPage(this.configSearch.id);
-          }
           this.searchDone = true;
 
-          return this.ePersonDataService.searchByScope(this.currentSearchScope, this.currentSearchQuery, {
+          return this.ePersonDataService.searchNonMembers(this.currentSearchQuery, this.groupBeingEdited.id, {
             currentPage: paginationOptions.currentPage,
-            elementsPerPage: paginationOptions.pageSize
+            elementsPerPage: paginationOptions.pageSize,
-          });
+          }, false, true);
         }),
         getAllCompletedRemoteData(),
         map((rd: RemoteData<any>) => {
@@ -319,23 +315,9 @@ export class MembersListComponent implements OnInit, OnDestroy {
             return rd;
           }
         }),
-        switchMap((epersonListRD: RemoteData<PaginatedList<EPerson>>) => {
+        getRemoteDataPayload())
-          const dtos$ = observableCombineLatest([...epersonListRD.payload.page.map((member: EPerson) => {
+        .subscribe((paginatedListOfEPersons: PaginatedList<EPerson>) => {
-            const dto$: Observable<EpersonDtoModel> = observableCombineLatest(
+          this.ePeopleSearch.next(paginatedListOfEPersons);
-              this.isMemberOfGroup(member), (isMember: ObservedValueOf<Observable<boolean>>) => {
-                const epersonDtoModel: EpersonDtoModel = new EpersonDtoModel();
-                epersonDtoModel.eperson = member;
-                epersonDtoModel.memberOfGroup = isMember;
-                return epersonDtoModel;
-              });
-            return dto$;
-          })]);
-          return dtos$.pipe(defaultIfEmpty([]), map((dtos: EpersonDtoModel[]) => {
-            return buildPaginatedList(epersonListRD.payload.pageInfo, dtos);
-          }));
-        }))
-        .subscribe((paginatedListOfDTOs: PaginatedList<EpersonDtoModel>) => {
-          this.ePeopleSearchDtos.next(paginatedListOfDTOs);
         }));
   }
 

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

@@ -1,6 +1,55 @@
 <ng-container>
   <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
 
+  <h4>{{messagePrefix + '.headSubgroups' | translate}}</h4>
+
+  <ds-pagination *ngIf="(subGroups$ | async)?.payload?.totalElements > 0"
+                 [paginationOptions]="config"
+                 [pageInfoState]="(subGroups$ | async)?.payload"
+                 [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)"
+                      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>
+
+  <div *ngIf="(subGroups$ | async)?.payload?.totalElements === 0" 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="{
             content: 'admin.access-control.groups.form.tooltip.editGroup.addSubgroups',
@@ -62,17 +111,7 @@
           <td class="align-middle">{{ dsoNameService.getName((group.object | async)?.payload) }}</td>
           <td class="align-middle">
             <div class="btn-group edit-field">
-              <button *ngIf="(isSubgroupOfGroup(group) | async) && !(isActiveGroup(group) | async)"
+              <button (click)="addSubgroupToGroup(group)"
-                      (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>
-
-              <span *ngIf="(isActiveGroup(group) | async)">{{ messagePrefix + '.table.edit.currentGroup' | translate }}</span>
-
-              <button *ngIf="!(isSubgroupOfGroup(group) | async) && !(isActiveGroup(group) | async)"
-                      (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>
@@ -85,58 +124,9 @@
     </div>
   </ds-pagination>
 
-  <div *ngIf="(searchResults$ | async)?.payload?.totalElements == 0 && searchDone" class="alert alert-info w-100 mb-2"
+  <div *ngIf="(searchResults$ | async)?.payload?.totalElements === 0 && searchDone" class="alert alert-info w-100 mb-2"
        role="alert">
     {{messagePrefix + '.no-items' | translate}}
   </div>
 
-  <h4>{{messagePrefix + '.headSubgroups' | translate}}</h4>
-
-  <ds-pagination *ngIf="(subGroups$ | async)?.payload?.totalElements > 0"
-                 [paginationOptions]="config"
-                 [pageInfoState]="(subGroups$ | async)?.payload"
-                 [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)"
-                      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>
-
-  <div *ngIf="(subGroups$ | async)?.payload?.totalElements == 0" class="alert alert-info w-100 mb-2"
-       role="alert">
-    {{messagePrefix + '.no-subgroups-yet' | translate}}
-  </div>
-
 </ng-container>

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

@@ -1,36 +1,69 @@
 import { CommonModule } from '@angular/common';
-import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
+import {
-import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
+  DebugElement,
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+  NO_ERRORS_SCHEMA,
-import { BrowserModule, By } from '@angular/platform-browser';
+} from '@angular/core';
-import { Router } from '@angular/router';
+import {
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  inject,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  BrowserModule,
+  By,
+} from '@angular/platform-browser';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import {
-import { Observable, of as observableOf, BehaviorSubject } from 'rxjs';
+  TranslateLoader,
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import {
+  Observable,
+  of as observableOf,
+} from 'rxjs';
+import { EPersonMock2 } from 'src/app/shared/testing/eperson.mock';
+
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 import { RestResponse } from '../../../../core/cache/response.models';
-import { buildPaginatedList, PaginatedList } from '../../../../core/data/paginated-list.model';
+import {
+  buildPaginatedList,
+  PaginatedList,
+} from '../../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { GroupDataService } from '../../../../core/eperson/group-data.service';
 import { Group } from '../../../../core/eperson/models/group.model';
-import { PageInfo } from '../../../../core/shared/page-info.model';
-import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
-import { GroupMock, GroupMock2 } from '../../../../shared/testing/group-mock';
-import { SubgroupsListComponent } from './subgroups-list.component';
-import {
-  createSuccessfulRemoteDataObject$,
-  createSuccessfulRemoteDataObject
-} from '../../../../shared/remote-data.utils';
-import { RouterMock } from '../../../../shared/mocks/router.mock';
-import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
-import { getMockTranslateService } from '../../../../shared/mocks/translate.service.mock';
-import { TranslateLoaderMock } from '../../../../shared/testing/translate-loader.mock';
-import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
-import { map } from 'rxjs/operators';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
-import { PaginationServiceStub } from '../../../../shared/testing/pagination-service.stub';
+import { PageInfo } from '../../../../core/shared/page-info.model';
-import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { ContextHelpDirective } from '../../../../shared/context-help.directive';
+import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
+import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
+import { RouterMock } from '../../../../shared/mocks/router.mock';
+import { getMockTranslateService } from '../../../../shared/mocks/translate.service.mock';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
+import { ActivatedRouteStub } from '../../../../shared/testing/active-router.stub';
+import {
+  GroupMock,
+  GroupMock2,
+} from '../../../../shared/testing/group-mock';
+import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
+import { PaginationServiceStub } from '../../../../shared/testing/pagination-service.stub';
+import { TranslateLoaderMock } from '../../../../shared/testing/translate-loader.mock';
+import { SubgroupsListComponent } from './subgroups-list.component';
 
 describe('SubgroupsListComponent', () => {
   let component: SubgroupsListComponent;
@@ -39,44 +72,72 @@ describe('SubgroupsListComponent', () => {
   let builderService: FormBuilderService;
   let ePersonDataServiceStub: any;
   let groupsDataServiceStub: any;
-  let activeGroup;
+  let activeGroup: Group;
   let subgroups: Group[];
-  let allGroups: Group[];
+  let groupNonMembers: Group[];
   let routerStub;
   let paginationService;
+  // Define a new mock activegroup for all tests below
+  let mockActiveGroup: Group = Object.assign(new Group(), {
+    handle: null,
+    subgroups: [GroupMock2],
+    epersons: [EPersonMock2],
+    selfRegistered: false,
+    permanent: false,
+    _links: {
+      self: {
+        href: 'https://rest.api/server/api/eperson/groups/activegroupid',
+      },
+      subgroups: { href: 'https://rest.api/server/api/eperson/groups/activegroupid/subgroups' },
+      object: { href: 'https://rest.api/server/api/eperson/groups/activegroupid/object' },
+      epersons: { href: 'https://rest.api/server/api/eperson/groups/activegroupid/epersons' },
+    },
+    _name: 'activegroupname',
+    id: 'activegroupid',
+    uuid: 'activegroupid',
+    type: 'group',
+  });
 
   beforeEach(waitForAsync(() => {
-    activeGroup = GroupMock;
+    activeGroup = mockActiveGroup;
     subgroups = [GroupMock2];
-    allGroups = [GroupMock, GroupMock2];
+    groupNonMembers = [GroupMock];
     ePersonDataServiceStub = {};
     groupsDataServiceStub = {
       activeGroup: activeGroup,
-      subgroups$: new BehaviorSubject(subgroups),
+      subgroups: subgroups,
+      groupNonMembers: groupNonMembers,
       getActiveGroup(): Observable<Group> {
         return observableOf(this.activeGroup);
       },
       getSubgroups(): Group {
-        return this.activeGroup;
+        return this.subgroups;
       },
+      // This method is used to get all the current subgroups
       findListByHref(_href: string): Observable<RemoteData<PaginatedList<Group>>> {
-        return this.subgroups$.pipe(
+        return createSuccessfulRemoteDataObject$(buildPaginatedList<Group>(new PageInfo(), groupsDataServiceStub.getSubgroups()));
-          map((currentGroups: Group[]) => {
-            return createSuccessfulRemoteDataObject(buildPaginatedList<Group>(new PageInfo(), currentGroups));
-          })
-        );
       },
       getGroupEditPageRouterLink(group: Group): string {
         return '/access-control/groups/' + group.id;
       },
-      searchGroups(query: string): Observable<RemoteData<PaginatedList<Group>>> {
+      // This method is used to get all groups which are NOT currently a subgroup member
+      searchNonMemberGroups(query: string, group: string): Observable<RemoteData<PaginatedList<Group>>> {
         if (query === '') {
-          return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), allGroups));
+          return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), groupNonMembers));
         }
-        return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), []));
+        return createSuccessfulRemoteDataObject$(
+          buildPaginatedList(new PageInfo(), []),
+        );
       },
-      addSubGroupToGroup(parentGroup, subgroup: Group): Observable<RestResponse> {
+      addSubGroupToGroup(parentGroup, subgroupToAdd: Group): Observable<RestResponse> {
-        this.subgroups$.next([...this.subgroups$.getValue(), subgroup]);
+        // Add group to list of subgroups
+        this.subgroups = [...this.subgroups, subgroupToAdd];
+        // Remove group from list of non-members
+        this.groupNonMembers.forEach( (group: Group, index: number) => {
+          if (group.id === subgroupToAdd.id) {
+            this.groupNonMembers.splice(index, 1);
+          }
+        });
         return observableOf(new RestResponse(true, 200, 'Success'));
       },
       clearGroupsRequests() {
@@ -85,40 +146,59 @@ describe('SubgroupsListComponent', () => {
       clearGroupLinkRequests() {
         // empty
       },
-      deleteSubGroupFromGroup(parentGroup, subgroup: Group): Observable<RestResponse> {
+      deleteSubGroupFromGroup(parentGroup, subgroupToDelete: Group): Observable<RestResponse> {
-        this.subgroups$.next(this.subgroups$.getValue().filter((group: Group) => {
+        // Remove group from list of subgroups
-          if (group.id !== subgroup.id) {
+        this.subgroups.forEach( (group: Group, index: number) => {
-            return group;
+          if (group.id === subgroupToDelete.id) {
+            this.subgroups.splice(index, 1);
           }
-        }));
+        });
+        // Add group to list of non-members
+        this.groupNonMembers = [...this.groupNonMembers, subgroupToDelete];
         return observableOf(new RestResponse(true, 200, 'Success'));
-      }
+      },
     };
     routerStub = new RouterMock();
     builderService = getMockFormBuilderService();
     translateService = getMockTranslateService();
-
     paginationService = new PaginationServiceStub();
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
-      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
+      imports: [
+        CommonModule,
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        BrowserModule,
+        // ContextHelpDirective,
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
+            useClass: TranslateLoaderMock,
-          }
+          },
         }),
+        SubgroupsListComponent,
       ],
-      declarations: [SubgroupsListComponent],
+      providers: [
-      providers: [SubgroupsListComponent,
+        SubgroupsListComponent,
         { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: GroupDataService, useValue: groupsDataServiceStub },
-        { provide: NotificationsService, useValue: new NotificationsServiceStub() },
+        {
+          provide: NotificationsService,
+          useValue: new NotificationsServiceStub(),
+        },
         { provide: FormBuilderService, useValue: builderService },
         { provide: Router, useValue: routerStub },
         { provide: PaginationService, useValue: paginationService },
+        { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+    })
+      .overrideComponent(SubgroupsListComponent, {
+        remove: {
+          imports: [ContextHelpDirective, PaginationComponent],
+        },
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -137,86 +217,78 @@ describe('SubgroupsListComponent', () => {
     expect(comp).toBeDefined();
   }));
 
+  describe('current subgroup list', () => {
     it('should show list of subgroups of current active group', () => {
       const groupIdsFound = fixture.debugElement.queryAll(By.css('#subgroupsOfGroup tr td:first-child'));
       expect(groupIdsFound.length).toEqual(1);
-    activeGroup.subgroups.map((group: Group) => {
+      subgroups.map((group: Group) => {
         expect(groupIdsFound.find((foundEl) => {
           return (foundEl.nativeElement.textContent.trim() === group.uuid);
         })).toBeTruthy();
       });
     });
 
+    it('should show a delete button next to each subgroup', () => {
+      const subgroupsFound = fixture.debugElement.queryAll(By.css('#subgroupsOfGroup tbody tr'));
+      subgroupsFound.map((foundGroupRowElement: DebugElement) => {
+        const addButton: DebugElement = foundGroupRowElement.query(By.css('td:last-child .fa-plus'));
+        const deleteButton: DebugElement = foundGroupRowElement.query(By.css('td:last-child .fa-trash-alt'));
+        expect(addButton).toBeNull();
+        expect(deleteButton).not.toBeNull();
+      });
+    });
+
     describe('if first group delete button is pressed', () => {
       let groupsFound: DebugElement[];
-    beforeEach(fakeAsync(() => {
+      beforeEach(() => {
-      const addButton = fixture.debugElement.query(By.css('#subgroupsOfGroup tbody .deleteButton'));
+        const deleteButton = fixture.debugElement.query(By.css('#subgroupsOfGroup tbody .deleteButton'));
-      addButton.triggerEventHandler('click', {
+        deleteButton.nativeElement.click();
-        preventDefault: () => {/**/
-        }
-      });
-      tick();
         fixture.detectChanges();
-    }));
+      });
-    it('one less subgroup in list from 1 to 0 (of 2 total groups)', () => {
+      it('then no subgroup remains as a member of the active group', () => {
         groupsFound = fixture.debugElement.queryAll(By.css('#subgroupsOfGroup tbody tr'));
         expect(groupsFound.length).toEqual(0);
       });
     });
+  });
 
   describe('search', () => {
     describe('when searching with empty query', () => {
       let groupsFound: DebugElement[];
       beforeEach(fakeAsync(() => {
         component.search({ query: '' });
+        fixture.detectChanges();
         groupsFound = fixture.debugElement.queryAll(By.css('#groupsSearch tbody tr'));
       }));
 
-      it('should display all groups', () => {
+      it('should display only non-member groups (i.e. groups that are not a subgroup)', () => {
-        fixture.detectChanges();
-        groupsFound = fixture.debugElement.queryAll(By.css('#groupsSearch tbody tr'));
-        expect(groupsFound.length).toEqual(2);
-        groupsFound = fixture.debugElement.queryAll(By.css('#groupsSearch tbody tr'));
         const groupIdsFound: DebugElement[] = fixture.debugElement.queryAll(By.css('#groupsSearch tbody tr td:first-child'));
-        allGroups.map((group: Group) => {
+        expect(groupIdsFound.length).toEqual(1);
+        groupNonMembers.map((group: Group) => {
           expect(groupIdsFound.find((foundEl: DebugElement) => {
             return (foundEl.nativeElement.textContent.trim() === group.uuid);
           })).toBeTruthy();
         });
       });
 
-      describe('if group is already a subgroup', () => {
+      it('should display an add button next to non-member groups, not a delete button', () => {
-        it('should have delete button, else it should have add button', () => {
-          fixture.detectChanges();
-          groupsFound = fixture.debugElement.queryAll(By.css('#groupsSearch tbody tr'));
-          const getSubgroups = groupsDataServiceStub.getSubgroups().subgroups;
-          if (getSubgroups !== undefined && getSubgroups.length > 0) {
         groupsFound.map((foundGroupRowElement: DebugElement) => {
-              const groupId: DebugElement = foundGroupRowElement.query(By.css('td:first-child'));
           const addButton: DebugElement = foundGroupRowElement.query(By.css('td:last-child .fa-plus'));
           const deleteButton: DebugElement = foundGroupRowElement.query(By.css('td:last-child .fa-trash-alt'));
-              expect(addButton).toBeNull();
-              if (activeGroup.id === groupId.nativeElement.textContent) {
-                expect(deleteButton).toBeNull();
-              } else {
-                expect(deleteButton).not.toBeNull();
-              }
-            });
-          } else {
-            const subgroupIds: string[] = activeGroup.subgroups.map((group: Group) => group.id);
-            groupsFound.map((foundGroupRowElement: DebugElement) => {
-              const groupId: DebugElement = foundGroupRowElement.query(By.css('td:first-child'));
-              const addButton: DebugElement = foundGroupRowElement.query(By.css('td:last-child .fa-plus'));
-              const deleteButton: DebugElement = foundGroupRowElement.query(By.css('td:last-child .fa-trash-alt'));
-              if (subgroupIds.includes(groupId.nativeElement.textContent)) {
-                expect(addButton).toBeNull();
-                expect(deleteButton).not.toBeNull();
-              } else {
-                expect(deleteButton).toBeNull();
           expect(addButton).not.toBeNull();
-              }
+          expect(deleteButton).toBeNull();
         });
-          }
+      });
+
+      describe('if first add button is pressed', () => {
+        beforeEach(() => {
+          const addButton: DebugElement = fixture.debugElement.query(By.css('#groupsSearch tbody .fa-plus'));
+          addButton.nativeElement.click();
+          fixture.detectChanges();
+        });
+        it('then all (two) Groups are subgroups of the active group. No non-members left', () => {
+          groupsFound = fixture.debugElement.queryAll(By.css('#groupsSearch tbody tr'));
+          expect(groupsFound.length).toEqual(0);
         });
       });
     });

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

@@ -1,24 +1,54 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import {
-import { UntypedFormBuilder } from '@angular/forms';
+  AsyncPipe,
-import { Router } from '@angular/router';
+  NgForOf,
-import { TranslateService } from '@ngx-translate/core';
+  NgIf,
-import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs';
+} from '@angular/common';
-import { map, mergeMap, switchMap, take } from 'rxjs/operators';
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+} from '@angular/forms';
+import {
+  Router,
+  RouterLink,
+} from '@angular/router';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import {
+  BehaviorSubject,
+  Observable,
+  Subscription,
+} from 'rxjs';
+import {
+  map,
+  switchMap,
+  take,
+} from 'rxjs/operators';
+
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 import { PaginatedList } from '../../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { GroupDataService } from '../../../../core/eperson/group-data.service';
 import { Group } from '../../../../core/eperson/models/group.model';
-import {
-  getFirstCompletedRemoteData,
-  getFirstSucceededRemoteData,
-  getRemoteDataPayload
-} from '../../../../core/shared/operators';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
-import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
-import { NoContent } from '../../../../core/shared/NoContent.model';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { NoContent } from '../../../../core/shared/NoContent.model';
+import {
+  getAllCompletedRemoteData,
+  getFirstCompletedRemoteData,
+} from '../../../../core/shared/operators';
+import { PageInfo } from '../../../../core/shared/page-info.model';
+import { ContextHelpDirective } from '../../../../shared/context-help.directive';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
 import { followLink } from '../../../../shared/utils/follow-link-config.model';
-import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * Keys to keep track of specific subscriptions
@@ -31,7 +61,18 @@ enum SubKey {
 
 @Component({
   selector: 'ds-subgroups-list',
-  templateUrl: './subgroups-list.component.html'
+  templateUrl: './subgroups-list.component.html',
+  imports: [
+    RouterLink,
+    AsyncPipe,
+    NgForOf,
+    ContextHelpDirective,
+    TranslateModule,
+    ReactiveFormsModule,
+    PaginationComponent,
+    NgIf,
+  ],
+  standalone: true,
 })
 /**
  * The list of subgroups in the edit group page
@@ -50,6 +91,8 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
    */
   subGroups$: BehaviorSubject<RemoteData<PaginatedList<Group>>> = new BehaviorSubject(undefined);
 
+  subGroupsPageInfoState$: Observable<PageInfo>;
+
   /**
    * Map of active subscriptions
    */
@@ -61,7 +104,7 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
   configSearch: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'ssgl',
     pageSize: 5,
-    currentPage: 1
+    currentPage: 1,
   });
   /**
    * Pagination config used to display the list of subgroups of currently active group being edited
@@ -69,7 +112,7 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
   config: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'sgl',
     pageSize: 5,
-    currentPage: 1
+    currentPage: 1,
   });
 
   // The search form
@@ -103,8 +146,12 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
       if (activeGroup != null) {
         this.groupBeingEdited = activeGroup;
         this.retrieveSubGroups();
+        this.search({ query: '' });
       }
     }));
+    this.subGroupsPageInfoState$ = this.subGroups$.pipe(
+      map(subGroupsRD => subGroupsRD?.payload?.pageInfo),
+    );
   }
 
   /**
@@ -120,58 +167,17 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
       this.paginationService.getCurrentPagination(this.config.id, this.config).pipe(
         switchMap((config) => this.groupDataService.findListByHref(this.groupBeingEdited._links.subgroups.href, {
           currentPage: config.currentPage,
-            elementsPerPage: config.pageSize
+          elementsPerPage: config.pageSize,
         },
         true,
         true,
-          followLink('object')
+        followLink('object'),
-        ))
+        )),
       ).subscribe((rd: RemoteData<PaginatedList<Group>>) => {
         this.subGroups$.next(rd);
       }));
   }
 
-  /**
-   * Whether or not the given group is a subgroup of the group currently being edited
-   * @param possibleSubgroup Group that is a possible subgroup (being tested) of the group currently being edited
-   */
-  isSubgroupOfGroup(possibleSubgroup: Group): Observable<boolean> {
-    return this.groupDataService.getActiveGroup().pipe(take(1),
-      mergeMap((activeGroup: Group) => {
-        if (activeGroup != null) {
-          if (activeGroup.uuid === possibleSubgroup.uuid) {
-            return observableOf(false);
-          } else {
-            return this.groupDataService.findListByHref(activeGroup._links.subgroups.href, {
-              currentPage: 1,
-              elementsPerPage: 9999
-            })
-              .pipe(
-                getFirstSucceededRemoteData(),
-                getRemoteDataPayload(),
-                map((listTotalGroups: PaginatedList<Group>) => listTotalGroups.page.filter((groupInList: Group) => groupInList.id === possibleSubgroup.id)),
-                map((groups: Group[]) => groups.length > 0));
-          }
-        } else {
-          return observableOf(false);
-        }
-      }));
-  }
-
-  /**
-   * Whether or not the given group is the current group being edited
-   * @param group Group that is possibly the current group being edited
-   */
-  isActiveGroup(group: Group): Observable<boolean> {
-    return this.groupDataService.getActiveGroup().pipe(take(1),
-      mergeMap((activeGroup: Group) => {
-        if (activeGroup != null && activeGroup.uuid === group.uuid) {
-          return observableOf(true);
-        }
-        return observableOf(false);
-      }));
-  }
-
   /**
    * Deletes given subgroup from the group currently being edited
    * @param subgroup  Group we want to delete from the subgroups of the group currently being edited
@@ -181,6 +187,11 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
       if (activeGroup != null) {
         const response = this.groupDataService.deleteSubGroupFromGroup(activeGroup, subgroup);
         this.showNotifications('deleteSubgroup', response, this.dsoNameService.getName(subgroup), activeGroup);
+        // Reload search results (if there is an active query).
+        // This will potentially add this deleted subgroup into the list of search results.
+        if (this.currentSearchQuery != null) {
+          this.search({ query: this.currentSearchQuery });
+        }
       } else {
         this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.noActiveGroup'));
       }
@@ -197,6 +208,11 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
         if (activeGroup.uuid !== subgroup.uuid) {
           const response = this.groupDataService.addSubGroupToGroup(activeGroup, subgroup);
           this.showNotifications('addSubgroup', response, this.dsoNameService.getName(subgroup), activeGroup);
+          // Reload search results (if there is an active query).
+          // This will potentially remove this added subgroup from search results.
+          if (this.currentSearchQuery != null) {
+            this.search({ query: this.currentSearchQuery });
+          }
         } else {
           this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.subgroupToAddIsActiveGroup'));
         }
@@ -207,26 +223,36 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Search in the groups (searches by group name and by uuid exact match)
+   * Search all non-member groups (searches by group name and by uuid exact match).  Used to search for
+   * groups that could be added to current group as a subgroup.
    * @param data  Contains query param
    */
   search(data: any) {
+    this.unsubFrom(SubKey.SearchResults);
+    this.subs.set(SubKey.SearchResults,
+      this.paginationService.getCurrentPagination(this.configSearch.id, this.configSearch).pipe(
+        switchMap((paginationOptions) => {
           const query: string = data.query;
-    if (query != null && this.currentSearchQuery !== query) {
+          if (query != null && this.currentSearchQuery !== query && this.groupBeingEdited) {
-      this.router.navigateByUrl(this.groupDataService.getGroupEditPageRouterLink(this.groupBeingEdited));
             this.currentSearchQuery = query;
-      this.configSearch.currentPage = 1;
+            this.paginationService.resetPage(this.configSearch.id);
           }
           this.searchDone = true;
 
-    this.unsubFrom(SubKey.SearchResults);
+          return this.groupDataService.searchNonMemberGroups(this.currentSearchQuery, this.groupBeingEdited.id, {
-    this.subs.set(SubKey.SearchResults, this.paginationService.getCurrentPagination(this.configSearch.id, this.configSearch).pipe(
+            currentPage: paginationOptions.currentPage,
-      switchMap((config) => this.groupDataService.searchGroups(this.currentSearchQuery, {
+            elementsPerPage: paginationOptions.pageSize,
-        currentPage: config.currentPage,
+          }, false, true, followLink('object'));
-        elementsPerPage: config.pageSize
+        }),
-      }, true, true, followLink('object')
+        getAllCompletedRemoteData(),
-      ))
+        map((rd: RemoteData<any>) => {
-    ).subscribe((rd: RemoteData<PaginatedList<Group>>) => {
+          if (rd.hasFailed) {
+            this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure', { cause: rd.errorMessage }));
+          } else {
+            return rd;
+          }
+        }))
+        .subscribe((rd: RemoteData<PaginatedList<Group>>) => {
           this.searchResults$.next(rd);
         }));
   }

src/app/access-control/group-registry/group-form/validators/group-exists.validator.ts

@@ -1,10 +1,13 @@
-import { AbstractControl, ValidationErrors } from '@angular/forms';
+import {
+  AbstractControl,
+  ValidationErrors,
+} from '@angular/forms';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { GroupDataService } from '../../../../core/eperson/group-data.service';
-import { getFirstSucceededRemoteListPayload } from '../../../../core/shared/operators';
 import { Group } from '../../../../core/eperson/models/group.model';
+import { getFirstSucceededRemoteListPayload } from '../../../../core/shared/operators';
 
 export class ValidateGroupExists {
 
@@ -17,7 +20,7 @@ export class ValidateGroupExists {
     return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
       return groupDataService.searchGroups(control.value, {
         currentPage: 1,
-            elementsPerPage: 100
+        elementsPerPage: 100,
       })
         .pipe(
           getFirstSucceededRemoteListPayload(),

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

@@ -1,10 +1,14 @@
-import { GroupPageGuard } from './group-page.guard';
+import {
-import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+  ActivatedRouteSnapshot,
-import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+  Router,
-import { ActivatedRouteSnapshot, Router } from '@angular/router';
+} from '@angular/router';
 import { of as observableOf } from 'rxjs';
+
 import { AuthService } from '../../core/auth/auth.service';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+import { GroupPageGuard } from './group-page.guard';
 
 describe('GroupPageGuard', () => {
   const groupsEndpointUrl = 'https://test.org/api/eperson/groups';
@@ -13,7 +17,7 @@ describe('GroupPageGuard', () => {
   const routeSnapshotWithGroupId = {
     params: {
       groupId: groupUuid,
-    }
+    },
   } as unknown as ActivatedRouteSnapshot;
 
   let guard: GroupPageGuard;
@@ -50,10 +54,10 @@ describe('GroupPageGuard', () => {
 
       it('should return true', (done) => {
         guard.canActivate(
-          routeSnapshotWithGroupId, { url: 'current-url'} as any
+          routeSnapshotWithGroupId, { url: 'current-url' } as any,
         ).subscribe((result) => {
           expect(authorizationService.isAuthorized).toHaveBeenCalledWith(
-            FeatureID.CanManageGroup, groupEndpointUrl, undefined
+            FeatureID.CanManageGroup, groupEndpointUrl, undefined,
           );
           expect(result).toBeTrue();
           done();
@@ -68,10 +72,10 @@ describe('GroupPageGuard', () => {
 
       it('should not return true', (done) => {
         guard.canActivate(
-          routeSnapshotWithGroupId, { url: 'current-url'} as any
+          routeSnapshotWithGroupId, { url: 'current-url' } as any,
         ).subscribe((result) => {
           expect(authorizationService.isAuthorized).toHaveBeenCalledWith(
-            FeatureID.CanManageGroup, groupEndpointUrl, undefined
+            FeatureID.CanManageGroup, groupEndpointUrl, undefined,
           );
           expect(result).not.toBeTrue();
           done();

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

@@ -1,15 +1,23 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import {
-import { Observable, of as observableOf } from 'rxjs';
+  ActivatedRouteSnapshot,
-import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+  Router,
-import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+  RouterStateSnapshot,
-import { AuthService } from '../../core/auth/auth.service';
+} from '@angular/router';
-import { SomeFeatureAuthorizationGuard } from '../../core/data/feature-authorization/feature-authorization-guard/some-feature-authorization.guard';
+import {
-import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+  Observable,
+  of as observableOf,
+} from 'rxjs';
 import { map } from 'rxjs/operators';
 
+import { AuthService } from '../../core/auth/auth.service';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { SomeFeatureAuthorizationGuard } from '../../core/data/feature-authorization/feature-authorization-guard/some-feature-authorization.guard';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class GroupPageGuard extends SomeFeatureAuthorizationGuard {
 
@@ -28,7 +36,7 @@ export class GroupPageGuard extends SomeFeatureAuthorizationGuard {
 
   getObjectUrl(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
     return this.halEndpointService.getEndpoint(this.groupsEndpoint).pipe(
-      map(groupsUrl => `${groupsUrl}/${route?.params?.groupId}`)
+      map(groupsUrl => `${groupsUrl}/${route?.params?.groupId}`),
     );
   }
 

src/app/access-control/group-registry/group-registry.actions.ts

@@ -1,5 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
+
 import { Group } from '../../core/eperson/models/group.model';
 import { type } from '../../shared/ngrx/type';
 

src/app/access-control/group-registry/group-registry.reducers.spec.ts

@@ -1,6 +1,12 @@
 import { GroupMock } from '../../shared/testing/group-mock';
-import { GroupRegistryCancelGroupAction, GroupRegistryEditGroupAction } from './group-registry.actions';
+import {
-import { groupRegistryReducer, GroupRegistryState } from './group-registry.reducers';
+  GroupRegistryCancelGroupAction,
+  GroupRegistryEditGroupAction,
+} from './group-registry.actions';
+import {
+  groupRegistryReducer,
+  GroupRegistryState,
+} from './group-registry.reducers';
 
 const initialState: GroupRegistryState = {
   editGroup: null,

src/app/access-control/group-registry/group-registry.reducers.ts

@@ -1,5 +1,9 @@
 import { Group } from '../../core/eperson/models/group.model';
-import { GroupRegistryAction, GroupRegistryActionTypes, GroupRegistryEditGroupAction } from './group-registry.actions';
+import {
+  GroupRegistryAction,
+  GroupRegistryActionTypes,
+  GroupRegistryEditGroupAction,
+} from './group-registry.actions';
 
 /**
  * The metadata registry state.
@@ -27,13 +31,13 @@ export function groupRegistryReducer(state = initialState, action: GroupRegistry
 
     case GroupRegistryActionTypes.EDIT_GROUP: {
       return Object.assign({}, state, {
-        editGroup: (action as GroupRegistryEditGroupAction).group
+        editGroup: (action as GroupRegistryEditGroupAction).group,
       });
     }
 
     case GroupRegistryActionTypes.CANCEL_EDIT_GROUP: {
       return Object.assign({}, state, {
-        editGroup: null
+        editGroup: null,
       });
     }
 

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

@@ -2,17 +2,17 @@
   <div class="groups-registry row">
     <div class="col-12">
       <div class="d-flex justify-content-between border-bottom mb-3">
-        <h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
+        <h1 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h1>
         <div>
           <button class="mr-auto btn btn-success"
-                  [routerLink]="['newGroup']">
+                  [routerLink]="'create'">
             <i class="fas fa-plus"></i>
             <span class="d-none d-sm-inline ml-1">{{messagePrefix + 'button.add' | translate}}</span>
           </button>
         </div>
       </div>
 
-      <h3 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h3>
+      <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">
@@ -35,7 +35,7 @@
 
       <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
       <ds-pagination
-        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(loading$ | async)"
+        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && (loading$ | async) !== true"
         [paginationOptions]="config"
         [pageInfoState]="pageInfoState$"
         [collectionSize]="(pageInfoState$ | async)?.totalElements"
@@ -91,7 +91,7 @@
         </div>
       </ds-pagination>
 
-      <div *ngIf="(pageInfoState$ | async)?.totalElements == 0" class="alert alert-info w-100 mb-2" role="alert">
+      <div *ngIf="(pageInfoState$ | async)?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
         {{messagePrefix + 'no-items' | translate}}
       </div>
 

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

@@ -1,39 +1,79 @@
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import {
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+  ComponentFixture,
-import { BrowserModule, By } from '@angular/platform-browser';
+  fakeAsync,
-import { Router } from '@angular/router';
+  inject,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  BrowserModule,
+  By,
+} from '@angular/platform-browser';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { provideMockStore } from '@ngrx/store/testing';
-import { Observable, of as observableOf } from 'rxjs';
+import {
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
+import {
+  Observable,
+  of as observableOf,
+  of,
+} from 'rxjs';
+
+import { APP_DATA_SERVICES_MAP } from '../../../config/app-config.interface';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { ConfigurationDataService } from '../../core/data/configuration-data.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import {
+  buildPaginatedList,
+  PaginatedList,
+} from '../../core/data/paginated-list.model';
 import { RemoteData } from '../../core/data/remote-data';
 import { RequestService } from '../../core/data/request.service';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { GroupDataService } from '../../core/eperson/group-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { Group } from '../../core/eperson/models/group.model';
+import { PaginationService } from '../../core/pagination/pagination.service';
 import { RouteService } from '../../core/services/route.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { PageInfo } from '../../core/shared/page-info.model';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { GroupMock, GroupMock2 } from '../../shared/testing/group-mock';
-import { GroupsRegistryComponent } from './groups-registry.component';
-import { EPersonMock, EPersonMock2 } from '../../shared/testing/eperson.mock';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { TranslateLoaderMock } from '../../shared/testing/translate-loader.mock';
-import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
-import { routeServiceStub } from '../../shared/testing/route-service.stub';
-import { RouterMock } from '../../shared/mocks/router.mock';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
-import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import { NoContent } from '../../core/shared/NoContent.model';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { PageInfo } from '../../core/shared/page-info.model';
-import { DSONameServiceMock, UNDEFINED_NAME } from '../../shared/mocks/dso-name.service.mock';
+import {
+  DSONameServiceMock,
+  UNDEFINED_NAME,
+} from '../../shared/mocks/dso-name.service.mock';
+import { RouterMock } from '../../shared/mocks/router.mock';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
+import {
+  EPersonMock,
+  EPersonMock2,
+} from '../../shared/testing/eperson.mock';
+import {
+  GroupMock,
+  GroupMock2,
+} from '../../shared/testing/group-mock';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
+import { routeServiceStub } from '../../shared/testing/route-service.stub';
+import { TranslateLoaderMock } from '../../shared/testing/translate-loader.mock';
+import { GroupsRegistryComponent } from './groups-registry.component';
 
 describe('GroupsRegistryComponent', () => {
   let component: GroupsRegistryComponent;
@@ -42,6 +82,7 @@ describe('GroupsRegistryComponent', () => {
   let groupsDataServiceStub: any;
   let dsoDataServiceStub: any;
   let authorizationService: AuthorizationDataService;
+  let configurationDataService: jasmine.SpyObj<ConfigurationDataService>;
 
   let mockGroups;
   let mockEPeople;
@@ -78,24 +119,24 @@ describe('GroupsRegistryComponent', () => {
               elementsPerPage: 1,
               totalElements: 0,
               totalPages: 0,
-              currentPage: 1
+              currentPage: 1,
             }), []));
           case 'https://dspace.4science.it/dspace-spring-rest/api/eperson/groups/testgroupid/epersons':
             return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo({
               elementsPerPage: 1,
               totalElements: 1,
               totalPages: 1,
-              currentPage: 1
+              currentPage: 1,
             }), [EPersonMock]));
           default:
             return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo({
               elementsPerPage: 1,
               totalElements: 0,
               totalPages: 0,
-              currentPage: 1
+              currentPage: 1,
             }), []));
         }
-      }
+      },
     };
     groupsDataServiceStub = {
       allGroups: mockGroups,
@@ -106,21 +147,21 @@ describe('GroupsRegistryComponent', () => {
               elementsPerPage: 1,
               totalElements: 0,
               totalPages: 0,
-              currentPage: 1
+              currentPage: 1,
             }), []));
           case 'https://dspace.4science.it/dspace-spring-rest/api/eperson/groups/testgroupid/groups':
             return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo({
               elementsPerPage: 1,
               totalElements: 1,
               totalPages: 1,
-              currentPage: 1
+              currentPage: 1,
             }), [GroupMock2]));
           default:
             return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo({
               elementsPerPage: 1,
               totalElements: 0,
               totalPages: 0,
-              currentPage: 1
+              currentPage: 1,
             }), []));
         }
       },
@@ -136,7 +177,7 @@ describe('GroupsRegistryComponent', () => {
             elementsPerPage: this.allGroups.length,
             totalElements: this.allGroups.length,
             totalPages: 1,
-            currentPage: 1
+            currentPage: 1,
           }), this.allGroups));
         }
         const result = this.allGroups.find((group: Group) => {
@@ -146,7 +187,7 @@ describe('GroupsRegistryComponent', () => {
           elementsPerPage: [result].length,
           totalElements: [result].length,
           totalPages: 1,
-          currentPage: 1
+          currentPage: 1,
         }), [result]));
       },
       delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
@@ -156,9 +197,13 @@ describe('GroupsRegistryComponent', () => {
     dsoDataServiceStub = {
       findByHref(href: string): Observable<RemoteData<DSpaceObject>> {
         return createSuccessfulRemoteDataObject$(undefined);
-      }
+      },
     };
 
+    configurationDataService = jasmine.createSpyObj('ConfigurationDataService', {
+      findByPropertyName: of({ payload: { value: 'test' } }),
+    });
+
     authorizationService = jasmine.createSpyObj('authorizationService', ['isAuthorized']);
     setIsAuthorized(true, true);
     paginationService = new PaginationServiceStub();
@@ -167,24 +212,26 @@ describe('GroupsRegistryComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
+            useClass: TranslateLoaderMock,
-          }
+          },
-        }),
+        }), GroupsRegistryComponent],
-      ],
-      declarations: [GroupsRegistryComponent],
       providers: [GroupsRegistryComponent,
         { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: GroupDataService, useValue: groupsDataServiceStub },
         { provide: DSpaceObjectDataService, useValue: dsoDataServiceStub },
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },
+        { provide: ConfigurationDataService, useValue: configurationDataService },
         { provide: RouteService, useValue: routeServiceStub },
+        { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
         { provide: Router, useValue: new RouterMock() },
         { provide: AuthorizationDataService, useValue: authorizationService },
         { provide: PaginationService, useValue: paginationService },
-        { provide: RequestService, useValue: jasmine.createSpyObj('requestService', ['removeByHrefSubstring']) }
+        { provide: RequestService, useValue: jasmine.createSpyObj('requestService', ['removeByHrefSubstring']) },
+        { provide: APP_DATA_SERVICES_MAP, useValue: {} },
+        provideMockStore(),
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
@@ -237,16 +284,16 @@ describe('GroupsRegistryComponent', () => {
 
       it('should not check the canManageGroup permissions', () => {
         expect(authorizationService.isAuthorized).not.toHaveBeenCalledWith(
-          FeatureID.CanManageGroup, mockGroups[0].self
+          FeatureID.CanManageGroup, mockGroups[0].self,
         );
         expect(authorizationService.isAuthorized).not.toHaveBeenCalledWith(
-          FeatureID.CanManageGroup, mockGroups[0].self, undefined // treated differently
+          FeatureID.CanManageGroup, mockGroups[0].self, undefined, // treated differently
         );
         expect(authorizationService.isAuthorized).not.toHaveBeenCalledWith(
-          FeatureID.CanManageGroup, mockGroups[1].self
+          FeatureID.CanManageGroup, mockGroups[1].self,
         );
         expect(authorizationService.isAuthorized).not.toHaveBeenCalledWith(
-          FeatureID.CanManageGroup, mockGroups[1].self, undefined // treated differently
+          FeatureID.CanManageGroup, mockGroups[1].self, undefined, // treated differently
         );
       });
     });

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

@@ -1,47 +1,94 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
-import { UntypedFormBuilder } from '@angular/forms';
+  AsyncPipe,
-import { Router } from '@angular/router';
+  NgForOf,
-import { TranslateService } from '@ngx-translate/core';
+  NgIf,
+  NgSwitch,
+  NgSwitchCase,
+} from '@angular/common';
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormBuilder,
+} from '@angular/forms';
+import {
+  Router,
+  RouterLink,
+} from '@angular/router';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 import {
   BehaviorSubject,
   combineLatest as observableCombineLatest,
   EMPTY,
   Observable,
   of as observableOf,
-  Subscription
+  Subscription,
 } from 'rxjs';
-import { catchError, defaultIfEmpty, map, switchMap, tap } from 'rxjs/operators';
+import {
+  catchError,
+  defaultIfEmpty,
+  map,
+  switchMap,
+  tap,
+} from 'rxjs/operators';
+
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
-import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
+import {
+  buildPaginatedList,
+  PaginatedList,
+} from '../../core/data/paginated-list.model';
 import { RemoteData } from '../../core/data/remote-data';
 import { RequestService } from '../../core/data/request.service';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { GroupDataService } from '../../core/eperson/group-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
-import { GroupDtoModel } from '../../core/eperson/models/group-dto.model';
 import { Group } from '../../core/eperson/models/group.model';
+import { GroupDtoModel } from '../../core/eperson/models/group-dto.model';
+import { PaginationService } from '../../core/pagination/pagination.service';
 import { RouteService } from '../../core/services/route.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { NoContent } from '../../core/shared/NoContent.model';
 import {
   getAllSucceededRemoteData,
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
-  getRemoteDataPayload
+  getRemoteDataPayload,
 } from '../../core/shared/operators';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { hasValue } from '../../shared/empty.util';
+import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { PaginationComponent } from '../../shared/pagination/pagination.component';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { NoContent } from '../../core/shared/NoContent.model';
-import { PaginationService } from '../../core/pagination/pagination.service';
 import { followLink } from '../../shared/utils/follow-link-config.model';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-groups-registry',
   templateUrl: './groups-registry.component.html',
+  imports: [
+    ThemedLoadingComponent,
+    TranslateModule,
+    RouterLink,
+    ReactiveFormsModule,
+    AsyncPipe,
+    NgIf,
+    PaginationComponent,
+    NgSwitch,
+    NgSwitchCase,
+    NgbTooltipModule,
+    NgForOf,
+  ],
+  standalone: true,
 })
 /**
  * A component used for managing all existing groups within the repository.
@@ -57,7 +104,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
   config: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'gl',
     pageSize: 5,
-    currentPage: 1
+    currentPage: 1,
   });
 
   /**
@@ -155,7 +202,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
                   this.canManageGroup$(isSiteAdmin, group),
                   this.hasLinkedDSO(group),
                   this.getSubgroups(group),
-                  this.getMembers(group)
+                  this.getMembers(group),
                 ]).pipe(
                   map(([canDelete, canManageGroup, hasLinkedDSO, subgroups, members]:
                          [boolean, boolean, boolean, RemoteData<PaginatedList<Group>>, RemoteData<PaginatedList<EPerson>>]) => {
@@ -166,8 +213,8 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
                     groupDtoModel.subgroups = subgroups.payload;
                     groupDtoModel.epersons = members.payload;
                     return groupDtoModel;
-                    }
+                  },
-                  )
+                  ),
                 );
               } else {
                 return EMPTY;
@@ -175,9 +222,9 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
             })]).pipe(defaultIfEmpty([]), map((dtos: GroupDtoModel[]) => {
               return buildPaginatedList(groups.pageInfo, dtos);
             }));
-          })
+          }),
         );
-      })
+      }),
     ).subscribe((value: PaginatedList<GroupDtoModel>) => {
       this.groupsDto$.next(value);
       this.pageInfoState$.next(value.pageInfo);
@@ -216,18 +263,28 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
 
   /**
    * Get the members (epersons embedded value of a group)
+   * NOTE: At this time we only grab the *first* member in order to receive the `totalElements` value
+   * needed for our HTML template.
    * @param group
    */
   getMembers(group: Group): Observable<RemoteData<PaginatedList<EPerson>>> {
-    return this.ePersonDataService.findListByHref(group._links.epersons.href).pipe(getFirstSucceededRemoteData());
+    return this.ePersonDataService.findListByHref(group._links.epersons.href, {
+      currentPage: 1,
+      elementsPerPage: 1,
+    }).pipe(getFirstSucceededRemoteData());
   }
 
   /**
    * Get the subgroups (groups embedded value of a group)
+   * NOTE: At this time we only grab the *first* subgroup in order to receive the `totalElements` value
+   * needed for our HTML template.
    * @param group
    */
   getSubgroups(group: Group): Observable<RemoteData<PaginatedList<Group>>> {
-    return this.groupService.findListByHref(group._links.subgroups.href).pipe(getFirstSucceededRemoteData());
+    return this.groupService.findListByHref(group._links.subgroups.href, {
+      currentPage: 1,
+      elementsPerPage: 1,
+    }).pipe(getFirstSucceededRemoteData());
   }
 
   /**

src/app/admin/admin-curation-tasks/admin-curation-tasks.component.html

@@ -1,4 +1,4 @@
 <div class="container">
-    <h2>{{'admin.curation-tasks.header' |translate }}</h2>
+    <h1>{{'admin.curation-tasks.header' |translate }}</h1>
     <ds-curation-form></ds-curation-form>
 </div>

src/app/admin/admin-curation-tasks/admin-curation-tasks.component.spec.ts

@@ -1,7 +1,13 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { AdminCurationTasksComponent } from './admin-curation-tasks.component';
-import { TranslateModule } from '@ngx-translate/core';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { CurationFormComponent } from '../../curation-form/curation-form.component';
+import { AdminCurationTasksComponent } from './admin-curation-tasks.component';
 
 describe('AdminCurationTasksComponent', () => {
   let comp: AdminCurationTasksComponent;
@@ -9,10 +15,15 @@ describe('AdminCurationTasksComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
+      imports: [TranslateModule.forRoot(), AdminCurationTasksComponent],
-      declarations: [AdminCurationTasksComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
-    }).compileComponents();
+      .overrideComponent(AdminCurationTasksComponent, {
+        remove: {
+          imports: [CurationFormComponent],
+        },
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/app/admin/admin-curation-tasks/admin-curation-tasks.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { CurationFormComponent } from '../../curation-form/curation-form.component';
 
 /**
  * Component responsible for rendering the system wide Curation Task UI
@@ -6,6 +9,11 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ds-admin-curation-task',
   templateUrl: './admin-curation-tasks.component.html',
+  imports: [
+    CurationFormComponent,
+    TranslateModule,
+  ],
+  standalone: true,
 })
 export class AdminCurationTasksComponent {
 

src/app/admin/admin-import-batch-page/batch-import-page.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <h2 id="header">{{'admin.batch-import.page.header' | translate}}</h2>
+  <h1 id="header">{{'admin.batch-import.page.header' | translate}}</h1>
   <p>{{'admin.batch-import.page.help' | translate}}</p>
   <p *ngIf="dso">
     selected collection: <b>{{getDspaceObjectName()}}</b>&nbsp;

src/app/admin/admin-import-batch-page/batch-import-page.component.spec.ts

@@ -1,22 +1,32 @@
-import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
-import { BatchImportPageComponent } from './batch-import-page.component';
-import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
-import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { FormsModule } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterTestingModule } from '@angular/router/testing';
-import { FileValueAccessorDirective } from '../../shared/utils/file-value-accessor.directive';
-import { FileValidator } from '../../shared/utils/require-file.validator';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
-import {
-  BATCH_IMPORT_SCRIPT_NAME,
-  ScriptDataService
-} from '../../core/data/processes/script-data.service';
-import { Router } from '@angular/router';
 import { Location } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import {
+  BATCH_IMPORT_SCRIPT_NAME,
+  ScriptDataService,
+} from '../../core/data/processes/script-data.service';
 import { ProcessParameter } from '../../process-page/processes/process-parameter.model';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import {
+  createFailedRemoteDataObject$,
+  createSuccessfulRemoteDataObject$,
+} from '../../shared/remote-data.utils';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { FileDropzoneNoUploaderComponent } from '../../shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component';
+import { FileValueAccessorDirective } from '../../shared/utils/file-value-accessor.directive';
+import { FileValidator } from '../../shared/utils/require-file.validator';
+import { BatchImportPageComponent } from './batch-import-page.component';
 
 describe('BatchImportPageComponent', () => {
   let component: BatchImportPageComponent;
@@ -31,14 +41,14 @@ describe('BatchImportPageComponent', () => {
     notificationService = new NotificationsServiceStub();
     scriptService = jasmine.createSpyObj('scriptService',
       {
-        invoke: createSuccessfulRemoteDataObject$({ processId: '46' })
+        invoke: createSuccessfulRemoteDataObject$({ processId: '46' }),
-      }
+      },
     );
     router = jasmine.createSpyObj('router', {
-      navigateByUrl: jasmine.createSpy('navigateByUrl')
+      navigateByUrl: jasmine.createSpy('navigateByUrl'),
     });
     locationStub = jasmine.createSpyObj('location', {
-      back: jasmine.createSpy('back')
+      back: jasmine.createSpy('back'),
     });
   }
 
@@ -48,17 +58,23 @@ describe('BatchImportPageComponent', () => {
       imports: [
         FormsModule,
         TranslateModule.forRoot(),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([]),
+        BatchImportPageComponent, FileValueAccessorDirective, FileValidator,
       ],
-      declarations: [BatchImportPageComponent, FileValueAccessorDirective, FileValidator],
       providers: [
         { provide: NotificationsService, useValue: notificationService },
         { provide: ScriptDataService, useValue: scriptService },
         { provide: Router, useValue: router },
         { provide: Location, useValue: locationStub },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+    })
+      .overrideComponent(BatchImportPageComponent, {
+        remove: {
+          imports: [FileDropzoneNoUploaderComponent],
+        },
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -108,7 +124,7 @@ describe('BatchImportPageComponent', () => {
       it('metadata-import script is invoked with --zip fileName and the mockFile', () => {
         const parameterValues: ProcessParameter[] = [
           Object.assign(new ProcessParameter(), { name: '--add' }),
-          Object.assign(new ProcessParameter(), { name: '--zip', value: 'filename.zip' })
+          Object.assign(new ProcessParameter(), { name: '--zip', value: 'filename.zip' }),
         ];
         expect(scriptService.invoke).toHaveBeenCalledWith(BATCH_IMPORT_SCRIPT_NAME, parameterValues, [fileMock]);
       });
@@ -181,7 +197,7 @@ describe('BatchImportPageComponent', () => {
       it('metadata-import script is invoked with --url and the file url', () => {
         const parameterValues: ProcessParameter[] = [
           Object.assign(new ProcessParameter(), { name: '--add' }),
-          Object.assign(new ProcessParameter(), { name: '--url', value: 'example.fileURL.com' })
+          Object.assign(new ProcessParameter(), { name: '--url', value: 'example.fileURL.com' }),
         ];
         expect(scriptService.invoke).toHaveBeenCalledWith(BATCH_IMPORT_SCRIPT_NAME, parameterValues, [null]);
       });

src/app/admin/admin-import-batch-page/batch-import-page.component.ts

@@ -1,26 +1,48 @@
-import { Component } from '@angular/core';
-import { Location } from '@angular/common';
-import { TranslateService } from '@ngx-translate/core';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { BATCH_IMPORT_SCRIPT_NAME, ScriptDataService } from '../../core/data/processes/script-data.service';
-import { Router } from '@angular/router';
-import { ProcessParameter } from '../../process-page/processes/process-parameter.model';
-import { getFirstCompletedRemoteData } from '../../core/shared/operators';
-import { RemoteData } from '../../core/data/remote-data';
-import { Process } from '../../process-page/processes/process.model';
-import { isEmpty, isNotEmpty } from '../../shared/empty.util';
-import { getProcessDetailRoute } from '../../process-page/process-page-routing.paths';
 import {
-  ImportBatchSelectorComponent
+  Location,
-} from '../../shared/dso-selector/modal-wrappers/import-batch-selector/import-batch-selector.component';
+  NgIf,
+} from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import { UiSwitchModule } from 'ngx-ui-switch';
 import { take } from 'rxjs/operators';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
+
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import {
+  BATCH_IMPORT_SCRIPT_NAME,
+  ScriptDataService,
+} from '../../core/data/processes/script-data.service';
+import { RemoteData } from '../../core/data/remote-data';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { getFirstCompletedRemoteData } from '../../core/shared/operators';
+import { getProcessDetailRoute } from '../../process-page/process-page-routing.paths';
+import { Process } from '../../process-page/processes/process.model';
+import { ProcessParameter } from '../../process-page/processes/process-parameter.model';
+import { ImportBatchSelectorComponent } from '../../shared/dso-selector/modal-wrappers/import-batch-selector/import-batch-selector.component';
+import {
+  isEmpty,
+  isNotEmpty,
+} from '../../shared/empty.util';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { FileDropzoneNoUploaderComponent } from '../../shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component';
 
 @Component({
   selector: 'ds-batch-import-page',
-  templateUrl: './batch-import-page.component.html'
+  templateUrl: './batch-import-page.component.html',
+  imports: [
+    NgIf,
+    TranslateModule,
+    FormsModule,
+    UiSwitchModule,
+    FileDropzoneNoUploaderComponent,
+  ],
+  standalone: true,
 })
 export class BatchImportPageComponent {
   /**
@@ -91,7 +113,7 @@ export class BatchImportPageComponent {
       }
     } else {
       const parameterValues: ProcessParameter[] = [
-        Object.assign(new ProcessParameter(), { name: '--add' })
+        Object.assign(new ProcessParameter(), { name: '--add' }),
       ];
       if (this.isUpload) {
         parameterValues.push(Object.assign(new ProcessParameter(), { name: '--zip', value: this.fileObject.name }));