Updated to latest version from main branch

.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/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'

.github/workflows/docker.yml

@@ -15,106 +15,288 @@ on:
 permissions:
   contents: read  #  to fetch code (actions/checkout)
 
+
+env:
+  REGISTRY_IMAGE: dspace/dspace-angular
+  # 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 'latest' 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=latest,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 manage the 'latest' tag ourselves to the 'main' branch (see settings above)
+  TAGS_FLAVOR: |
+    latest=false
+
 jobs:
-  docker:
+  #############################################################
+  # Build/Push the '${{ env.REGISTRY_IMAGE }}' 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
-    env:
-      # 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' || '' }}
 
+    strategy:
+        matrix:
+            # Architectures / Platforms for which we will build Docker images
+            arch: ['linux/amd64', 'linux/arm64']
+            os: [ubuntu-latest]
+            isPr:
+              - ${{ github.event_name == 'pull_request' }}
+            # If this is a PR, we ONLY build for AMD64. For PRs we only do a sanity check test to ensure Docker builds work.
+            # The below exclude therefore ensures we do NOT build ARM64 for PRs.
+            exclude:
+                - isPr: true
+                  os: ubuntu-latest
+                  arch: linux/arm64
+
+    runs-on: ${{ matrix.os }}
     steps:
       # https://github.com/actions/checkout
       - name: Checkout codebase
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # https://github.com/docker/setup-buildx-action
       - name: Setup Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       # https://github.com/docker/setup-qemu-action
       - name: Set up QEMU emulation to build for multiple architectures
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
 
       # 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
+        if: ${{ ! matrix.isPr }}
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ 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
+        uses: docker/metadata-action@v5
         with:
-          images: dspace/dspace-angular
+          images: ${{ env.REGISTRY_IMAGE }}
           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
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: ./Dockerfile
-          platforms: ${{ env.PLATFORMS }}
+          platforms: ${{ matrix.arch }}
           # 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' }}
+          push: ${{ ! matrix.isPr }}
           # 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)
-      #####################################################
+      # Export the digest of Docker build locally (for non PRs only)
+      - name: Export digest
+        if: ${{ ! matrix.isPr }}
+        run: |
+            mkdir -p /tmp/digests
+            digest="${{ steps.docker_build.outputs.digest }}"
+            touch "/tmp/digests/${digest#sha256:}"
+
+      # Upload digest to an artifact, so that it can be used in manifest below
+      - name: Upload digest
+        if: ${{ ! matrix.isPr }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: digests
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  # Merge digests into a manifest.
+  # This runs after all Docker builds complete above, and it tells hub.docker.com
+  # that these builds should be all included in the manifest for this tag.
+  # (e.g. AMD64 and ARM64 should be listed as options under the same tagged Docker image)
+  # Borrowed from https://docs.docker.com/build/ci/github-actions/multi-platform/#distribute-build-across-multiple-runners
+  dspace-angular_manifest:
+    if: ${{ github.event_name != 'pull_request' }}
+    runs-on: ubuntu-latest
+    needs:
+      - dspace-angular
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v3
+        with:
+          name: digests
+          path: /tmp/digests
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Add Docker metadata for image
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY_IMAGE }}
+          tags: ${{ env.IMAGE_TAGS }}
+          flavor: ${{ env.TAGS_FLAVOR }}
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_ACCESS_TOKEN }}
+
+      - name: Create manifest list from digests and push
+        working-directory: /tmp/digests
+        run: |
+            docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta.outputs.version }}
+
+  #############################################################
+  # Build/Push the '${{ env.REGISTRY_IMAGE }}' image ('-dist' tag)
+  #############################################################
+  dspace-angular-dist:
+    # Ensure this job never runs on forked repos. It's only executed for 'dspace/dspace-angular'
+    if: github.repository == 'dspace/dspace-angular'
+
+    strategy:
+        matrix:
+            # Architectures / Platforms for which we will build Docker images
+            arch: ['linux/amd64', 'linux/arm64']
+            os: [ubuntu-latest]
+            isPr:
+                - ${{ github.event_name == 'pull_request' }}
+            # If this is a PR, we ONLY build for AMD64. For PRs we only do a sanity check test to ensure Docker builds work.
+            # The below exclude therefore ensures we do NOT build ARM64 for PRs.
+            exclude:
+                - isPr: true
+                  os: ubuntu-latest
+                  arch: linux/arm64
+
+    runs-on: ${{ matrix.os }}
+    steps:
+      # https://github.com/actions/checkout
+      - name: Checkout codebase
+        uses: actions/checkout@v4
+
+      # https://github.com/docker/setup-buildx-action
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # https://github.com/docker/setup-qemu-action
+      - name: Set up QEMU emulation to build for multiple architectures
+        uses: docker/setup-qemu-action@v3
+
+      # 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: ${{ ! matrix.isPr }}
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_ACCESS_TOKEN }}
+
       # https://github.com/docker/metadata-action
       # Get Metadata for docker_build_dist step below
       - name: Sync metadata (tags, labels) from GitHub to Docker for 'dspace-angular-dist' image
         id: meta_build_dist
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
-          images: dspace/dspace-angular
+          images: ${{ env.REGISTRY_IMAGE }}
           tags: ${{ env.IMAGE_TAGS }}
           # 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.
+          # tagging logic as the primary '${{ env.REGISTRY_IMAGE }}' image above.
           flavor: ${{ env.TAGS_FLAVOR }}
             suffix=-dist
 
       - name: Build and push 'dspace-angular-dist' image
         id: docker_build_dist
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: ./Dockerfile.dist
-          platforms: ${{ env.PLATFORMS }}
+          platforms: ${{ matrix.arch }}
           # 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' }}
+          push: ${{ ! matrix.isPr }}
           # Use tags / labels provided by 'docker/metadata-action' above
           tags: ${{ steps.meta_build_dist.outputs.tags }}
           labels: ${{ steps.meta_build_dist.outputs.labels }}
+
+      # Export the digest of Docker build locally (for non PRs only)
+      - name: Export digest
+        if: ${{ ! matrix.isPr }}
+        run: |
+            mkdir -p /tmp/digests
+            digest="${{ steps.docker_build_dist.outputs.digest }}"
+            touch "/tmp/digests/${digest#sha256:}"
+
+      # Upload Digest to an artifact, so that it can be used in manifest below
+      - name: Upload digest
+        if: ${{ ! matrix.isPr }}
+        uses: actions/upload-artifact@v3
+        with:
+          # NOTE: It's important that this artifact has a unique name so that two
+          # image builds don't upload digests to the same artifact.
+          name: digests-dist
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  # Merge *-dist digests into a manifest.
+  # This runs after all Docker builds complete above, and it tells hub.docker.com
+  # that these builds should be all included in the manifest for this tag.
+  # (e.g. AMD64 and ARM64 should be listed as options under the same tagged Docker image)
+  dspace-angular-dist_manifest:
+    if: ${{ github.event_name != 'pull_request' }}
+    runs-on: ubuntu-latest
+    needs:
+      - dspace-angular-dist
+    steps:
+      - name: Download digests for -dist builds
+        uses: actions/download-artifact@v3
+        with:
+          name: digests-dist
+          path: /tmp/digests
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Add Docker metadata for image
+        id: meta_dist
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY_IMAGE }}
+          tags: ${{ env.IMAGE_TAGS }}
+          # As this is a "dist" image, its tags are all suffixed with "-dist". Otherwise, it uses the same
+          # tagging logic as the primary '${{ env.REGISTRY_IMAGE }}' image above.
+          flavor: ${{ env.TAGS_FLAVOR }}
+            suffix=-dist
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_ACCESS_TOKEN }}
+
+      - name: Create manifest list from digests and push
+        working-directory: /tmp/digests
+        run: |
+            docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta_dist.outputs.version }}

.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
-# NOTE: This means merge conflicts are only checked for when a PR is merged to main.
+# Run this for all pushes (i.e. merges) to 'main' or maintenance branches
 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@v3
+      # 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@v1
+        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@v1.6.2

.gitignore

@@ -39,3 +39,5 @@ package-lock.json
 /nbproject/
 
 junit.xml
+
+/src/mirador-viewer/config.local.js

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_UI_PORT=4200
+export DSPACE_HOST=demo.dspace.org
+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:
        ```
@@ -413,8 +413,7 @@ dspace-angular
 │   ├── merge-i18n-files.ts                             *
 │   ├── serve.ts                                        *
 │   ├── sync-i18n-files.ts                              *
-│   ├── test-rest.ts                                    *
-│   └── webpack.js                                      *
+│   └── test-rest.ts                                    *
 ├── src                                                 * The source of the application
 │   ├── app                                             * The source code of the application, subdivided by module/page.
 │   ├── assets                                          * Folder for static resources

config/config.example.yml

@@ -22,7 +22,7 @@ ui:
 # '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
@@ -208,6 +208,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 +235,9 @@ languages:
   - code: el
     label: Ελληνικά
     active: true
+  - code: sr-cyr
+    label: Српски
+    active: true
   - code: uk
     label: Yкраї́нська
     active: true
@@ -292,33 +298,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',
-  #   handle: '10673/1233'
+  # - name: custom
+  #   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',
-  #   regex: 'collections\/e8043bc2.*'
+  # - name: custom
+  #   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',
-  #   uuid: '0958c910-2037-42a9-81c7-dca80e3892b4'
+  # - name: custom
+  #   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',
-  #   extends: 'custom-B',
+  # - name: custom-A
+  #   extends: custom-B
   #   # Any of the matching properties above can be used
-  #   handle: '10673/34'
+  #   handle: 10673/34
   #
-  # - name: 'custom-B',
-  #   extends: 'custom',
-  #   handle: '10673/12'
+  # - name: custom-B
+  #   extends: custom
+  #   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

config/config.yml

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

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',
-            {
-                rules: {
-                    'heading-order': { enabled: false }
-                }
-            } as Options
-        );
+        testA11y('ds-community-list-page');
     });
 });

cypress/e2e/header.cy.ts

@@ -11,8 +11,7 @@ describe('Header', () => {
         testA11y({
             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
+                ['#search-navbar-container'] // search in navbar has duplicative ID. Will be fixed in #1174
             ],
         });
     });

cypress/e2e/homepage.cy.ts

@@ -6,8 +6,8 @@ describe('Homepage', () => {
     cy.visit('/');
   });
 
-  it('should display translated title "DSpace Angular :: Home"', () => {
-    cy.title().should('eq', 'DSpace Angular :: Home');
+  it('should display translated title "DSpace Repository :: Home"', () => {
+    cy.title().should('eq', 'DSpace Repository :: Home');
   });
 
   it('should contain a news section', () => {

cypress/e2e/item-page.cy.ts

@@ -1,4 +1,3 @@
-import { Options } from 'cypress-axe';
 import { TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
@@ -19,13 +18,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',
-            {
-                rules: {
-                    'heading-order': { enabled: false }
-                }
-            } as Options
-        );
+        testA11y('ds-item-page');
+    });
+
+    it('should pass accessibility tests on full item page', () => {
+        cy.visit(ENTITYPAGE + '/full');
+
+        // <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/login-modal.cy.ts

@@ -1,4 +1,5 @@
 import { TEST_ADMIN_PASSWORD, TEST_ADMIN_USER, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
+import { testA11y } from 'cypress/support/utils';
 
 const page = {
     openLoginMenu() {
@@ -123,4 +124,15 @@ describe('Login Modal', () => {
         cy.location('pathname').should('eq', '/forgot');
         cy.get('ds-forgot-email').should('exist');
     });
+
+    it('should pass accessibility tests', () => {
+        cy.visit('/');
+
+        page.openLoginMenu();
+
+        cy.get('ds-log-in').should('exist');
+
+        // Analyze <ds-log-in> for accessibility issues
+        testA11y('ds-log-in');
+    });
 });

cypress/e2e/my-dspace.cy.ts

@@ -19,21 +19,7 @@ describe('My DSpace page', () => {
         cy.get('.filter-toggle').click({ multiple: true });
 
         // Analyze <ds-my-dspace-page> for accessibility issues
-        testA11y(
-            {
-                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
-        );
+        testA11y('ds-my-dspace-page');
     });
 
     it('should have a working detailed view that passes accessibility tests', () => {

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-page.cy.ts

@@ -27,21 +27,7 @@ describe('Search Page', () => {
         cy.get('[data-test="filter-toggle"]').click({ multiple: true });
 
         // Analyze <ds-search-page> for accessibility issues
-        testA11y(
-            {
-                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
-        );
+        testA11y('ds-search-page');
     });
 
     it('should have a working grid view that passes accessibility tests', () => {

cypress/support/commands.ts

@@ -177,6 +177,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 },

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
-(https://api7.dspace.org/server/).
+This allows you to run the Angular UI in *production* mode, pointing it at the demo or sandbox backend
+(https://demo.dspace.org/server/ or https://sandbox.dspace.org/server/).
 
 ```
 docker-compose -f docker/docker-compose-dist.yml pull

docker/cli.yml

@@ -16,7 +16,7 @@ version: "3.7"
 
 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.

docker/docker-compose-ci.yml

@@ -35,7 +35,7 @@ services:
       solr__D__statistics__P__autoCommit: 'false'
     depends_on:
     - dspacedb
-    image: dspace/dspace:dspace-7_x-test
+    image: dspace/dspace:latest-test
     networks:
       dspacenet:
     ports:

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,7 +39,7 @@ 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:
@@ -82,7 +82,7 @@ services:
   # 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

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
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dspace-angular",
-  "version": "7.6.0-next",
+  "version": "8.0.0-next",
   "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",
@@ -82,7 +82,7 @@
     "@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",
@@ -99,6 +99,7 @@
     "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",
@@ -116,12 +117,12 @@
     "morgan": "^1.10.0",
     "ng-mocks": "^14.10.0",
     "ng2-file-upload": "1.4.0",
-    "ng2-nouislider": "^1.8.3",
+    "ng2-nouislider": "^2.0.0",
     "ngx-infinite-scroll": "^15.0.0",
     "ngx-pagination": "6.0.3",
     "ngx-sortablejs": "^11.1.0",
     "ngx-ui-switch": "^14.0.3",
-    "nouislider": "^14.6.3",
+    "nouislider": "^15.7.1",
     "pem": "1.14.7",
     "prop-types": "^15.8.1",
     "react-copy-to-clipboard": "^5.1.0",
@@ -159,11 +160,11 @@
     "@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",

scripts/webpack.js

@@ -1,13 +0,0 @@
-const path = require('path');
-const child_process = require('child_process');
-
-const heapSize = 4096;
-const webpackPath = path.join('node_modules', 'webpack', 'bin', 'webpack.js');
-
-const params = [
-  '--max_old_space_size=' + heapSize,
-  webpackPath,
-  ...process.argv.slice(2)
-];
-
-child_process.spawn('node', params, { stdio:'inherit' });

server.ts

@@ -26,15 +26,15 @@ import * as ejs from 'ejs';
 import * as compression from 'compression';
 import * as expressStaticGzip from 'express-static-gzip';
 /* eslint-enable import/no-namespace */
-
 import axios from 'axios';
 import LRU from 'lru-cache';
 import isbot from 'isbot';
 import { createCertificate } from 'pem';
 import { createServer } from 'https';
 import { json } from 'body-parser';
+import { createHttpTerminator } from 'http-terminator';
 
-import { existsSync, readFileSync } from 'fs';
+import { readFileSync } from 'fs';
 import { join } from 'path';
 
 import { enableProdMode } from '@angular/core';
@@ -54,7 +54,7 @@ import { buildAppConfig } from './src/config/config.server';
 import { APP_CONFIG, AppConfig } from './src/config/app-config.interface';
 import { extendEnvironmentWithAppConfig } from './src/config/config.util';
 import { logStartupMessage } from './startup-message';
-import { TOKENITEM } from 'src/app/core/auth/models/auth-token-info.model';
+import { TOKENITEM } from './src/app/core/auth/models/auth-token-info.model';
 
 
 /*
@@ -180,6 +180,15 @@ export function app() {
     changeOrigin: true
   }));
 
+  /**
+   * Proxy the linksets
+   */
+  router.use('/signposting**', createProxyMiddleware({
+    target: `${environment.rest.baseUrl}`,
+    pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
+    changeOrigin: true
+  }));
+
   /**
    * Checks if the rateLimiter property is present
    * When it is present, the rateLimiter will be enabled. When it is undefined, the rateLimiter will be disabled.
@@ -312,22 +321,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
-      allowStale: environment.cache.serverSide.botCache.allowStale ?? true // if object is stale, return stale value before deleting
+      ttl: environment.cache.serverSide.botCache.timeToLive,
+      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
-      allowStale: environment.cache.serverSide.anonymousCache.allowStale ?? true // if object is stale, return stale value before deleting
+      ttl: environment.cache.serverSide.anonymousCache.timeToLive,
+      allowStale: environment.cache.serverSide.anonymousCache.allowStale
     });
   }
 }
@@ -366,9 +376,19 @@ function cacheCheck(req, res, next) {
   }
 
   // If cached copy exists, return it to the user.
-  if (cachedCopy) {
+  if (cachedCopy && cachedCopy.page) {
+    if (cachedCopy.headers) {
+      Object.keys(cachedCopy.headers).forEach((header) => {
+        if (cachedCopy.headers[header]) {
+          if (environment.cache.serverSide.debug) {
+            console.log(`Restore cached ${header} header`);
+          }
+          res.setHeader(header, cachedCopy.headers[header]);
+        }
+      });
+    }
     res.locals.ssr = true;  // mark response as SSR-generated (enables text compression)
-    res.send(cachedCopy);
+    res.send(cachedCopy.page);
 
     // Tell Express to skip all other handlers for this path
     // This ensures we don't try to re-render the page since we've already returned the cached copy
@@ -443,22 +463,50 @@ function saveToCache(req, page: any) {
     const key = getCacheKey(req);
     // Avoid caching "/reload/[random]" paths (these are hard refreshes after logout)
     if (key.startsWith('/reload')) { return; }
+    // Avoid caching not successful responses (status code different from 2XX status)
+    if (hasNotSucceeded(req.res.statusCode)) { return; }
 
+    // Retrieve response headers to save, if any
+    const headers = retrieveHeaders(req.res);
     // If bot cache is enabled, save it to that cache if it doesn't exist or is expired
     // (NOTE: has() will return false if page is expired in cache)
     if (botCacheEnabled() && !botCache.has(key)) {
-      botCache.set(key, page);
+      botCache.set(key, { page, headers });
       if (environment.cache.serverSide.debug) { console.log(`CACHE SAVE FOR ${key} in bot cache.`); }
     }
 
     // If anonymous cache is enabled, save it to that cache if it doesn't exist or is expired
     if (anonymousCacheEnabled() && !anonymousCache.has(key)) {
-      anonymousCache.set(key, page);
+      anonymousCache.set(key, { page, headers });
       if (environment.cache.serverSide.debug) { console.log(`CACHE SAVE FOR ${key} in anonymous cache.`); }
     }
   }
 }
 
+/**
+ * Check if status code is different from 2XX
+ * @param statusCode
+ */
+function hasNotSucceeded(statusCode) {
+  const rgx = new RegExp(/^20+/);
+  return !rgx.test(statusCode);
+}
+
+function retrieveHeaders(response) {
+  const headers = Object.create({});
+  if (Array.isArray(environment.cache.serverSide.headers) && environment.cache.serverSide.headers.length > 0) {
+    environment.cache.serverSide.headers.forEach((header) => {
+      if (response.hasHeader(header)) {
+        if (environment.cache.serverSide.debug) {
+          console.log(`Save ${header} header to cache`);
+        }
+        headers[header] = response.getHeader(header);
+      }
+    });
+  }
+
+  return headers;
+}
 /**
  * Whether a user is authenticated or not
  */
@@ -479,23 +527,46 @@ function serverStarted() {
  * @param keys SSL credentials
  */
 function createHttpsServer(keys) {
-  createServer({
+  const listener = createServer({
     key: keys.serviceKey,
     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() {

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';
 
-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

@@ -3,17 +3,24 @@ 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 { EPERSON_PATH, GROUP_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 {
+  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';
+import { EPersonFormComponent } from './epeople-registry/eperson-form/eperson-form.component';
+import { EPersonResolver } from './epeople-registry/eperson-resolver.service';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
-        path: 'epeople',
+        path: EPERSON_PATH,
         component: EPeopleRegistryComponent,
         resolve: {
           breadcrumb: I18nBreadcrumbResolver
@@ -22,7 +29,26 @@ import { SiteAdministratorGuard } from '../core/data/feature-authorization/featu
         canActivate: [SiteAdministratorGuard]
       },
       {
-        path: GROUP_EDIT_PATH,
+        path: `${EPERSON_PATH}/create`,
+        component: EPersonFormComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver,
+        },
+        data: { title: 'admin.access-control.epeople.add.title', breadcrumbKey: 'admin.access-control.epeople.add' },
+        canActivate: [SiteAdministratorGuard],
+      },
+      {
+        path: `${EPERSON_PATH}/:id/edit`,
+        component: EPersonFormComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver,
+          ePerson: EPersonResolver,
+        },
+        data: { title: 'admin.access-control.epeople.edit.title', breadcrumbKey: 'admin.access-control.epeople.edit' },
+        canActivate: [SiteAdministratorGuard],
+      },
+      {
+        path: GROUP_PATH,
         component: GroupsRegistryComponent,
         resolve: {
           breadcrumb: I18nBreadcrumbResolver
@@ -31,7 +57,7 @@ import { SiteAdministratorGuard } from '../core/data/feature-authorization/featu
         canActivate: [GroupAdministratorGuard]
       },
       {
-        path: `${GROUP_EDIT_PATH}/newGroup`,
+        path: `${GROUP_PATH}/create`,
         component: GroupFormComponent,
         resolve: {
           breadcrumb: I18nBreadcrumbResolver
@@ -40,14 +66,23 @@ import { SiteAdministratorGuard } from '../core/data/feature-authorization/featu
         canActivate: [GroupAdministratorGuard]
       },
       {
-        path: `${GROUP_EDIT_PATH}/:groupId`,
+        path: `${GROUP_PATH}/:groupId/edit`,
         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]
+      },
     ])
   ]
 })

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

@@ -12,6 +12,12 @@ import { GroupsRegistryComponent } from './group-registry/groups-registry.compon
 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
@@ -28,6 +34,9 @@ export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher =
     RouterModule,
     AccessControlRoutingModule,
     FormModule,
+    NgbAccordionModule,
+    SearchModule,
+    AccessControlFormModule,
   ],
   exports: [
     MembersListComponent,
@@ -39,6 +48,9 @@ export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher =
     GroupFormComponent,
     SubgroupsListComponent,
     MembersListComponent,
+    BulkAccessComponent,
+    BulkAccessBrowseComponent,
+    BulkAccessSettingsComponent,
   ],
   providers: [
     {

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

@@ -0,0 +1,67 @@
+<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')"
+           data-test="browse">
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+                [attr.aria-expanded]="!acc.isExpanded('browse')"
+                aria-controls="collapsePanels">
+          {{ 'admin.access-control.bulk-access-browse.header' | translate }}
+        </button>
+        <div class="text-right d-flex">
+          <div class="ml-3 d-inline-block">
+            <span *ngIf="acc.isExpanded('browse')" class="fas fa-chevron-up fa-fw"></span>
+            <span *ngIf="!acc.isExpanded('browse')" class="fas fa-chevron-down fa-fw"></span>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+    <ng-template ngbPanelContent>
+      <ul ngbNav #nav="ngbNav" [(activeId)]="activateId" class="nav-pills">
+        <li [ngbNavItem]="'search'">
+          <a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
+          <ng-template ngbNavContent>
+            <div class="mx-n3">
+              <ds-themed-search [configuration]="'administrativeBulkAccess'"
+                                [selectable]="true"
+                                [selectionConfig]="{ repeatable: true, listId: listId }"
+                                [showThumbnails]="false"></ds-themed-search>
+            </div>
+          </ng-template>
+        </li>
+        <li [ngbNavItem]="'selected'">
+          <a ngbNavLink>
+            {{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}
+          </a>
+          <ng-template ngbNavContent>
+            <ds-pagination
+              [paginationOptions]="(paginationOptions$ | async)"
+              [pageInfoState]="(objectsSelected$|async)?.payload.pageInfo"
+              [collectionSize]="(objectsSelected$|async)?.payload?.totalElements"
+              [objects]="(objectsSelected$|async)"
+              [showPaginator]="false"
+              (prev)="pagePrev()"
+              (next)="pageNext()">
+              <ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
+                <li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
+                            currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
+                    class="mt-4 mb-4 d-flex"
+                    [attr.data-test]="'list-object' | dsBrowserOnly">
+                  <ds-selectable-list-item-control [index]="i"
+                                                   [object]="object"
+                                                   [selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
+                  <ds-listable-object-component-loader [listID]="listId"
+                                                       [index]="i"
+                                                       [object]="object"
+                                                       [showThumbnails]="false"
+                                                       [viewMode]="'list'"></ds-listable-object-component-loader>
+                </li>
+              </ul>
+            </ds-pagination>
+          </ng-template>
+        </li>
+      </ul>
+      <div [ngbNavOutlet]="nav" class="mt-5"></div>
+    </ng-template>
+  </ngb-panel>
+</ngb-accordion>

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

@@ -0,0 +1,82 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { of } from 'rxjs';
+import { NgbAccordionModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { BulkAccessBrowseComponent } from './bulk-access-browse.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 { buildPaginatedList } from '../../../core/data/paginated-list.model';
+import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
+
+describe('BulkAccessBrowseComponent', () => {
+  let component: BulkAccessBrowseComponent;
+  let fixture: ComponentFixture<BulkAccessBrowseComponent>;
+
+  const listID1 = 'id1';
+  const value1 = 'Selected object';
+  const value2 = 'Another selected object';
+
+  const selected1 = new SelectableObject(value1);
+  const selected2 = new SelectableObject(value2);
+
+  const testSelection = { id: listID1, selection: [selected1, selected2] } ;
+
+  const selectableListService = jasmine.createSpyObj('SelectableListService', ['getSelectableList', 'deselectAll']);
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        NgbAccordionModule,
+        NgbNavModule,
+        TranslateModule.forRoot()
+      ],
+      declarations: [BulkAccessBrowseComponent],
+      providers: [ { provide: SelectableListService, useValue: selectableListService }, ],
+      schemas: [
+        NO_ERRORS_SCHEMA
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BulkAccessBrowseComponent);
+    component = fixture.componentInstance;
+    (component as any).selectableListService.getSelectableList.and.returnValue(of(testSelection));
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+    component = null;
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have an initial active nav id of "search"', () => {
+    expect(component.activateId).toEqual('search');
+  });
+
+  it('should have an initial pagination options object with default values', () => {
+    expect(component.paginationOptions$.getValue().id).toEqual('bas');
+    expect(component.paginationOptions$.getValue().pageSize).toEqual(5);
+    expect(component.paginationOptions$.getValue().currentPage).toEqual(1);
+  });
+
+  it('should have an initial remote data with a paginated list as value', () => {
+    const list = buildPaginatedList(new PageInfo({
+      'elementsPerPage': 5,
+      'totalElements': 2,
+      'totalPages': 1,
+      'currentPage': 1
+    }), [selected1, selected2]) ;
+    const rd = createSuccessfulRemoteDataObject(list);
+
+    expect(component.objectsSelected$.value).toEqual(rd);
+  });
+
+});

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

@@ -0,0 +1,119 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+
+import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
+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 { hasValue } from '../../../shared/empty.util';
+
+@Component({
+  selector: 'ds-bulk-access-browse',
+  templateUrl: 'bulk-access-browse.component.html',
+  styleUrls: ['./bulk-access-browse.component.scss'],
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService
+    }
+  ]
+})
+export class BulkAccessBrowseComponent implements OnInit, OnDestroy {
+
+  /**
+   * The selection list id
+   */
+  @Input() listId!: string;
+
+  /**
+   * The active nav id
+   */
+  activateId = 'search';
+
+  /**
+   * The list of the objects already selected
+   */
+  objectsSelected$: BehaviorSubject<RemoteData<PaginatedList<ListableObject>>> = new BehaviorSubject<RemoteData<PaginatedList<ListableObject>>>(null);
+
+  /**
+   * The pagination options object used for the list of selected elements
+   */
+  paginationOptions$: BehaviorSubject<PaginationComponentOptions> = new BehaviorSubject<PaginationComponentOptions>(Object.assign(new PaginationComponentOptions(), {
+    id: 'bas',
+    pageSize: 5,
+    currentPage: 1
+  }));
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   */
+  private subs: Subscription[] = [];
+
+  constructor(private selectableListService: SelectableListService) {}
+
+  /**
+   * Subscribe to selectable list updates
+   */
+  ngOnInit(): void {
+
+    this.subs.push(
+      this.selectableListService.getSelectableList(this.listId).pipe(
+        distinctUntilChanged(),
+        map((list: SelectableListState) => this.generatePaginatedListBySelectedElements(list))
+      ).subscribe(this.objectsSelected$)
+    );
+  }
+
+  pageNext() {
+    this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, {
+      currentPage: this.paginationOptions$.value.currentPage + 1
+    }));
+  }
+
+  pagePrev() {
+    this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, {
+      currentPage: this.paginationOptions$.value.currentPage - 1
+    }));
+  }
+
+  private calculatePageCount(pageSize, totalCount = 0) {
+    // we suppose that if we have 0 items we want 1 empty page
+    return totalCount < pageSize ? 1 : Math.ceil(totalCount / pageSize);
+  }
+
+  /**
+   * Generate The RemoteData object containing the list of the selected elements
+   * @param list
+   * @private
+   */
+  private generatePaginatedListBySelectedElements(list: SelectableListState): RemoteData<PaginatedList<ListableObject>> {
+    const pageInfo = new PageInfo({
+      elementsPerPage: this.paginationOptions$.value.pageSize,
+      totalElements: list?.selection.length,
+      totalPages: this.calculatePageCount(this.paginationOptions$.value.pageSize, list?.selection.length),
+      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
+      }));
+    }
+    return createSuccessfulRemoteDataObject(buildPaginatedList(pageInfo, list?.selection || []));
+  }
+
+  ngOnDestroy(): void {
+    this.subs
+      .filter((sub) => hasValue(sub))
+      .forEach((sub) => sub.unsubscribe());
+    this.selectableListService.deselectAll(this.listId);
+  }
+}

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

@@ -0,0 +1,19 @@
+<div class="container">
+  <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>
+
+  <hr>
+
+  <div class="d-flex justify-content-end">
+    <button class="btn btn-outline-primary mr-3" (click)="reset()">
+      {{ 'access-control-cancel' | translate }}
+    </button>
+    <button class="btn btn-primary" [disabled]="!canExport()" (click)="submit()">
+      {{ 'access-control-execute' | translate }}
+    </button>
+  </div>
+</div>
+
+
+

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

@@ -0,0 +1,158 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+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 { NotificationsService } from '../../shared/notifications/notifications.service';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+
+describe('BulkAccessComponent', () => {
+  let component: BulkAccessComponent;
+  let fixture: ComponentFixture<BulkAccessComponent>;
+  let bulkAccessControlService: any;
+  let selectableListService: any;
+
+  const selectableListServiceMock = jasmine.createSpyObj('SelectableListService', ['getSelectableList', 'deselectAll']);
+  const bulkAccessControlServiceMock = jasmine.createSpyObj('bulkAccessControlService', ['createPayloadFile', 'executeScript']);
+
+  const mockFormState = {
+    'bitstream': [],
+    'item': [
+      {
+        'name': 'embargo',
+        'startDate': {
+          'year': 2026,
+          'month': 5,
+          'day': 31
+        },
+        'endDate': null
+      }
+    ],
+    'state': {
+      'item': {
+        'toggleStatus': true,
+        'accessMode': 'replace'
+      },
+      'bitstream': {
+        'toggleStatus': false,
+        'accessMode': '',
+        'changesLimit': '',
+        'selectedBitstreams': []
+      }
+    }
+  };
+
+  const mockFile = {
+    'uuids': [
+      '1234', '5678'
+    ],
+    'file': {  }
+  };
+
+  const mockSettings: any = jasmine.createSpyObj('AccessControlFormContainerComponent',  {
+    getValue: jasmine.createSpy('getValue'),
+    reset: jasmine.createSpy('reset')
+  });
+  const selection: any[] = [{ indexableObject: { uuid: '1234' } }, { indexableObject: { uuid: '5678' } }];
+  const selectableListState: SelectableListState = { id: 'test', selection };
+  const expectedIdList = ['1234', '5678'];
+
+  const selectableListStateEmpty: SelectableListState = { id: 'test', selection: [] };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        TranslateModule.forRoot()
+      ],
+      declarations: [ BulkAccessComponent ],
+      providers: [
+        { provide: BulkAccessControlService, useValue: bulkAccessControlServiceMock },
+        { provide: NotificationsService, useValue: NotificationsServiceStub },
+        { provide: SelectableListService, useValue: selectableListServiceMock }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BulkAccessComponent);
+    component = fixture.componentInstance;
+    bulkAccessControlService = TestBed.inject(BulkAccessControlService);
+    selectableListService = TestBed.inject(SelectableListService);
+
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  describe('when there are no elements selected', () => {
+
+    beforeEach(() => {
+
+      (component as any).selectableListService.getSelectableList.and.returnValue(of(selectableListStateEmpty));
+      fixture.detectChanges();
+      component.settings = mockSettings;
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should generate the id list by selected elements', () => {
+      expect(component.objectsSelected$.value).toEqual([]);
+    });
+
+    it('should disable the execute button when there are no objects selected', () => {
+      expect(component.canExport()).toBe(false);
+    });
+
+  });
+
+  describe('when there are elements selected', () => {
+
+    beforeEach(() => {
+
+      (component as any).selectableListService.getSelectableList.and.returnValue(of(selectableListState));
+      fixture.detectChanges();
+      component.settings = mockSettings;
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should generate the id list by selected elements', () => {
+      expect(component.objectsSelected$.value).toEqual(expectedIdList);
+    });
+
+    it('should enable the execute button when there are objects selected', () => {
+      component.objectsSelected$.next(['1234']);
+      expect(component.canExport()).toBe(true);
+    });
+
+    it('should call the settings reset method when reset is called', () => {
+      component.reset();
+      expect(component.settings.reset).toHaveBeenCalled();
+    });
+
+    it('should call the bulkAccessControlService executeScript method when submit is called', () => {
+      (component.settings as any).getValue.and.returnValue(mockFormState);
+      bulkAccessControlService.createPayloadFile.and.returnValue(mockFile);
+      bulkAccessControlService.executeScript.and.returnValue(createSuccessfulRemoteDataObject$(new Process()));
+      component.objectsSelected$.next(['1234']);
+      component.submit();
+      expect(bulkAccessControlService.executeScript).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,94 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+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';
+
+@Component({
+  selector: 'ds-bulk-access',
+  templateUrl: './bulk-access.component.html',
+  styleUrls: ['./bulk-access.component.scss']
+})
+export class BulkAccessComponent implements OnInit {
+
+  /**
+   * The selection list id
+   */
+  listId = 'bulk-access-list';
+
+  /**
+   * The list of the objects already selected
+   */
+  objectsSelected$: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   */
+  private subs: Subscription[] = [];
+
+  /**
+   * The SectionsDirective reference
+   */
+  @ViewChild('dsBulkSettings') settings: BulkAccessSettingsComponent;
+
+  constructor(
+    private bulkAccessControlService: BulkAccessControlService,
+    private selectableListService: SelectableListService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.subs.push(
+      this.selectableListService.getSelectableList(this.listId).pipe(
+        distinctUntilChanged(),
+        map((list: SelectableListState) => this.generateIdListBySelectedElements(list))
+      ).subscribe(this.objectsSelected$)
+    );
+  }
+
+  canExport(): boolean {
+    return this.objectsSelected$.value?.length > 0;
+  }
+
+  /**
+   * Reset the form to its initial state
+   * This will also reset the state of the child components (bitstream and item access)
+   */
+  reset(): void {
+    this.settings.reset();
+  }
+
+  /**
+   * Submit the form
+   * This will create a payload file and execute the script
+   */
+  submit(): void {
+    const settings = this.settings.getValue();
+    const bitstreamAccess = settings.bitstream;
+    const itemAccess = settings.item;
+
+    const { file } = this.bulkAccessControlService.createPayloadFile({
+      bitstreamAccess,
+      itemAccess,
+      state: settings.state
+    });
+
+    this.bulkAccessControlService.executeScript(
+      this.objectsSelected$.value || [],
+      file
+    ).subscribe();
+  }
+
+  /**
+   * Generate The RemoteData object containing the list of the selected elements
+   * @param list
+   * @private
+   */
+  private generateIdListBySelectedElements(list: SelectableListState): string[] {
+    return list?.selection?.map((entry: any) => entry.indexableObject.uuid);
+  }
+}

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

@@ -0,0 +1,21 @@
+<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">
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded('browse')"
+                aria-controls="collapsePanels">
+          {{ 'admin.access-control.bulk-access-settings.header' | translate }}
+        </button>
+        <div class="text-right d-flex">
+          <div class="ml-3 d-inline-block">
+            <span *ngIf="acc.isExpanded('settings')" class="fas fa-chevron-up fa-fw"></span>
+            <span *ngIf="!acc.isExpanded('settings')" class="fas fa-chevron-down fa-fw"></span>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+    <ng-template ngbPanelContent>
+      <ds-access-control-form-container #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

@@ -0,0 +1,81 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { BulkAccessSettingsComponent } from './bulk-access-settings.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+describe('BulkAccessSettingsComponent', () => {
+  let component: BulkAccessSettingsComponent;
+  let fixture: ComponentFixture<BulkAccessSettingsComponent>;
+  const mockFormState = {
+    'bitstream': [],
+    'item': [
+      {
+        'name': 'embargo',
+        'startDate': {
+          'year': 2026,
+          'month': 5,
+          'day': 31
+        },
+        'endDate': null
+      }
+    ],
+    'state': {
+      'item': {
+        'toggleStatus': true,
+        'accessMode': 'replace'
+      },
+      'bitstream': {
+        'toggleStatus': false,
+        'accessMode': '',
+        'changesLimit': '',
+        'selectedBitstreams': []
+      }
+    }
+  };
+
+  const mockControl: any = jasmine.createSpyObj('AccessControlFormContainerComponent',  {
+    getFormValue: jasmine.createSpy('getFormValue'),
+    reset: jasmine.createSpy('reset')
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NgbAccordionModule, TranslateModule.forRoot()],
+      declarations: [BulkAccessSettingsComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BulkAccessSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    component.controlForm = mockControl;
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have a method to get the form value', () => {
+    expect(component.getValue).toBeDefined();
+  });
+
+  it('should have a method to reset the form', () => {
+    expect(component.reset).toBeDefined();
+  });
+
+  it('should return the correct form value', () => {
+    const expectedValue = mockFormState;
+    (component.controlForm as any).getFormValue.and.returnValue(mockFormState);
+    const actualValue = component.getValue();
+    // @ts-ignore
+    expect(actualValue).toEqual(expectedValue);
+  });
+
+  it('should call reset on the control form', () => {
+    component.reset();
+    expect(component.controlForm.reset).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,34 @@
+import { Component, ViewChild } from '@angular/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'
+})
+export class BulkAccessSettingsComponent {
+
+  /**
+   * The SectionsDirective reference
+   */
+  @ViewChild('dsAccessControlForm') controlForm: AccessControlFormContainerComponent<any>;
+
+  /**
+   * Will be used from a parent component to read the value of the form
+   */
+  getValue() {
+    return this.controlForm.getFormValue();
+  }
+
+  /**
+   * Reset the form to its initial state
+   * This will also reset the state of the child components (bitstream and item access)
+   */
+  reset() {
+    this.controlForm.reset();
+  }
+
+}

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

@@ -4,96 +4,91 @@
       <div class="d-flex justify-content-between border-bottom mb-3">
         <h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>
 
-        <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()"
-                       (cancelForm)="isEPersonFormShown = false"></ds-eperson-form>
+      <h3 id="search" class="border-bottom pb-2">{{labelPrefix + 'search.head' | translate}}
 
-      <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">
-              <option value="metadata">{{labelPrefix + 'search.scope.metadata' | translate}}</option>
-              <option value="email">{{labelPrefix + 'search.scope.email' | translate}}</option>
-            </select>
-          </div>
-          <div class="flex-grow-1 mr-3 ml-3">
-            <div class="form-group input-group">
-              <input type="text" name="query" id="query" formControlName="query"
-                    class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
-                     [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
-              <span class="input-group-append">
+      </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">
+            <option value="metadata">{{labelPrefix + 'search.scope.metadata' | translate}}</option>
+            <option value="email">{{labelPrefix + 'search.scope.email' | translate}}</option>
+          </select>
+        </div>
+        <div class="flex-grow-1 mr-3 ml-3">
+          <div class="form-group input-group">
+            <input type="text" name="query" id="query" formControlName="query"
+                   class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
+                   [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
+            <span class="input-group-append">
                 <button type="submit" class="search-button btn btn-primary">
                   <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
                 </button>
               </span>
-            </div>
           </div>
-          <div>
-            <button (click)="clearFormAndResetResult();"
-                    class="search-button btn btn-secondary">{{labelPrefix + 'button.see-all' | translate}}</button>
-          </div>
-        </form>
-
-        <ds-themed-loading *ngIf="searching$ | async"></ds-themed-loading>
-        <ds-pagination
-          *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
-          [paginationOptions]="config"
-          [pageInfoState]="pageInfoState$"
-          [collectionSize]="(pageInfoState$ | async)?.totalElements"
-          [hideGear]="true"
-          [hidePagerWhenSinglePage]="true">
-
-          <div class="table-responsive">
-            <table id="epeople" class="table table-striped table-hover table-bordered">
-              <thead>
-              <tr>
-                <th scope="col">{{labelPrefix + 'table.id' | translate}}</th>
-                <th scope="col">{{labelPrefix + 'table.name' | translate}}</th>
-                <th scope="col">{{labelPrefix + 'table.email' | translate}}</th>
-                <th>{{labelPrefix + 'table.edit' | translate}}</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr *ngFor="let epersonDto of (ePeopleDto$ | async)?.page"
-                  [ngClass]="{'table-primary' : isActive(epersonDto.eperson) | async}">
-                <td>{{epersonDto.eperson.id}}</td>
-                <td>{{ dsoNameService.getName(epersonDto.eperson) }}</td>
-                <td>{{epersonDto.eperson.email}}</td>
-                <td>
-                  <div class="btn-group edit-field">
-                    <button (click)="toggleEditEPerson(epersonDto.eperson)"
-                            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)"
-                            class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
-                            title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
-                      <i class="fas fa-trash-alt fa-fw"></i>
-                    </button>
-                  </div>
-                </td>
-              </tr>
-              </tbody>
-            </table>
-          </div>
-
-        </ds-pagination>
-
-        <div *ngIf="(pageInfoState$ | async)?.totalElements == 0" class="alert alert-info w-100 mb-2" role="alert">
-          {{labelPrefix + 'no-items' | translate}}
         </div>
+        <div>
+          <button (click)="clearFormAndResetResult();"
+                  class="search-button btn btn-secondary">{{labelPrefix + 'button.see-all' | translate}}</button>
+        </div>
+      </form>
+
+      <ds-themed-loading *ngIf="searching$ | async"></ds-themed-loading>
+      <ds-pagination
+        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
+        [paginationOptions]="config"
+        [pageInfoState]="pageInfoState$"
+        [collectionSize]="(pageInfoState$ | async)?.totalElements"
+        [hideGear]="true"
+        [hidePagerWhenSinglePage]="true">
+
+        <div class="table-responsive">
+          <table id="epeople" class="table table-striped table-hover table-bordered">
+            <thead>
+            <tr>
+              <th scope="col">{{labelPrefix + 'table.id' | translate}}</th>
+              <th scope="col">{{labelPrefix + 'table.name' | translate}}</th>
+              <th scope="col">{{labelPrefix + 'table.email' | translate}}</th>
+              <th>{{labelPrefix + 'table.edit' | translate}}</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="let epersonDto of (ePeopleDto$ | async)?.page"
+                [ngClass]="{'table-primary' : isActive(epersonDto.eperson) | async}">
+              <td>{{epersonDto.eperson.id}}</td>
+              <td>{{ dsoNameService.getName(epersonDto.eperson) }}</td>
+              <td>{{epersonDto.eperson.email}}</td>
+              <td>
+                <div class="btn-group edit-field">
+                  <button [routerLink]="getEditEPeoplePage(epersonDto.eperson.id)"
+                          class="btn btn-outline-primary btn-sm access-control-editEPersonButton"
+                          title="{{labelPrefix + 'table.edit.buttons.edit' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
+                    <i class="fas fa-edit fa-fw"></i>
+                  </button>
+                  <button *ngIf="epersonDto.ableToDelete" (click)="deleteEPerson(epersonDto.eperson)"
+                          class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
+                          title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
+                    <i class="fas fa-trash-alt fa-fw"></i>
+                  </button>
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+
+      </ds-pagination>
+
+      <div *ngIf="(pageInfoState$ | async)?.totalElements == 0" class="alert alert-info w-100 mb-2" role="alert">
+        {{labelPrefix + 'no-items' | translate}}
       </div>
     </div>
   </div>

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

@@ -203,36 +203,6 @@ describe('EPeopleRegistryComponent', () => {
     });
   });
 
-  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;

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

@@ -22,6 +22,7 @@ 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 { getEPersonEditRoute, getEPersonsRoute } from '../access-control-routing-paths';
 
 @Component({
   selector: 'ds-epeople-registry',
@@ -64,11 +65,6 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
     currentPage: 1
   });
 
-  /**
-   * Whether or not to show the EPerson form
-   */
-  isEPersonFormShown: boolean;
-
   // The search form
   searchForm;
 
@@ -114,17 +110,11 @@ 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();
@@ -133,7 +123,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
                 return epersonDtoModel;
               })
             );
-          })]).pipe(map((dtos: EpersonDtoModel[]) => {
+          })).pipe(map((dtos: EpersonDtoModel[]) => {
             return buildPaginatedList(epeople.pageInfo, dtos);
           }));
         } else {
@@ -160,14 +150,14 @@ 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'
             });
             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'
             });
             this.currentSearchScope = scope;
@@ -205,23 +195,6 @@ 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
    */
@@ -242,7 +215,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 +237,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,17 +247,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
     this.search({query: ''});
   }
 
-  /**
-   * This method will set everything to stale, which will cause the lists on this page to update.
-   */
-  reset() {
-    this.epersonService.getBrowseEndpoint().pipe(
-      take(1)
-    ).subscribe((href: string) => {
-      this.requestService.setStaleByHrefSubstring(href).pipe(take(1)).subscribe(() => {
-        this.epersonService.cancelEditEPerson();
-        this.isEPersonFormShown = false;
-      });
-    });
+  getEditEPeoplePage(id: string): string {
+    return getEPersonEditRoute(id);
   }
 }

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

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

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

@@ -31,6 +31,10 @@ import { PaginationServiceStub } from '../../../shared/testing/pagination-servic
 import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { ValidateEmailNotTaken } from './validators/email-taken.validator';
 import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';
+import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../shared/testing/router.stub';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
 
 describe('EPersonFormComponent', () => {
   let component: EPersonFormComponent;
@@ -43,6 +47,8 @@ describe('EPersonFormComponent', () => {
   let authorizationService: AuthorizationDataService;
   let groupsDataService: GroupDataService;
   let epersonRegistrationService: EpersonRegistrationService;
+  let route: ActivatedRouteStub;
+  let router: RouterStub;
 
   let paginationService;
 
@@ -106,6 +112,9 @@ 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(),{
@@ -182,6 +191,8 @@ describe('EPersonFormComponent', () => {
     });
 
     paginationService = new PaginationServiceStub();
+    route = new ActivatedRouteStub();
+    router = new RouterStub();
     TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot({
@@ -202,6 +213,8 @@ describe('EPersonFormComponent', () => {
         { provide: PaginationService, useValue: paginationService },
         { provide: RequestService, useValue: jasmine.createSpyObj('requestService', ['removeByHrefSubstring'])},
         { provide: EpersonRegistrationService, useValue: epersonRegistrationService },
+        { provide: ActivatedRoute, useValue: route },
+        { provide: Router, useValue: router },
         EPeopleRegistryComponent
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -263,24 +276,18 @@ describe('EPersonFormComponent', () => {
       fixture.detectChanges();
     });
     describe('firstName, lastName and email should be required', () => {
-      it('form should be invalid because the firstName is required', waitForAsync(() => {
-        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', 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', waitForAsync(() => {
-        fixture.whenStable().then(() => {
-          expect(component.formGroup.controls.email.valid).toBeFalse();
-          expect(component.formGroup.controls.email.errors.required).toBeTrue();
-        });
-      }));
+      it('form should be invalid because the firstName is required', () => {
+        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', () => {
+        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', () => {
+        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 +297,18 @@ describe('EPersonFormComponent', () => {
         component.formGroup.controls.email.setValue('test@test.com');
         fixture.detectChanges();
       });
-      it('firstName should be valid because the firstName is set', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('firstName should be valid because the firstName is set', () => {
           expect(component.formGroup.controls.firstName.valid).toBeTrue();
           expect(component.formGroup.controls.firstName.errors).toBeNull();
-        });
-      }));
-      it('lastName should be valid because the lastName is set', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      });
+      it('lastName should be valid because the lastName is set', () => {
           expect(component.formGroup.controls.lastName.valid).toBeTrue();
           expect(component.formGroup.controls.lastName.errors).toBeNull();
-        });
-      }));
-      it('email should be valid because the email is set', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      });
+      it('email should be valid because the email is set', () => {
           expect(component.formGroup.controls.email.valid).toBeTrue();
           expect(component.formGroup.controls.email.errors).toBeNull();
-        });
-      }));
+      });
     });
 
 
@@ -316,12 +317,10 @@ describe('EPersonFormComponent', () => {
         component.formGroup.controls.email.setValue('test@test');
         fixture.detectChanges();
       });
-      it('email should not be valid because the email pattern', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('email should not be valid because the email pattern', () => {
           expect(component.formGroup.controls.email.valid).toBeFalse();
           expect(component.formGroup.controls.email.errors.pattern).toBeTruthy();
-        });
-      }));
+      });
     });
 
     describe('after already utilized email', () => {
@@ -336,12 +335,10 @@ describe('EPersonFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('email should not be valid because email is already taken', waitForAsync(() => {
-        fixture.whenStable().then(() => {
+      it('email should not be valid because email is already taken', () => {
           expect(component.formGroup.controls.email.valid).toBeFalse();
           expect(component.formGroup.controls.email.errors.emailTaken).toBeTruthy();
-        });
-      }));
+      });
     });
 
 
@@ -393,11 +390,9 @@ describe('EPersonFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should emit a new eperson using the correct values', waitForAsync(() => {
-        fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
-        });
-      }));
+      it('should emit a new eperson using the correct values', () => {
+        expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
+      });
     });
 
     describe('with an active eperson', () => {
@@ -428,11 +423,9 @@ describe('EPersonFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should emit the existing eperson using the correct values', waitForAsync(() => {
-        fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expectedWithId);
-        });
-      }));
+      it('should emit the existing eperson using the correct values', () => {
+        expect(component.submitForm.emit).toHaveBeenCalledWith(expectedWithId);
+      });
     });
   });
 
@@ -491,16 +484,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', () => {

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

@@ -8,7 +8,7 @@ import {
 } from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
 import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
-import { debounceTime, switchMap, take } from 'rxjs/operators';
+import { debounceTime, finalize, map, switchMap, take } from 'rxjs/operators';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
@@ -38,6 +38,8 @@ 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';
+import { ActivatedRoute, Router } from '@angular/router';
+import { getEPersonsRoute } from '../../access-control-routing-paths';
 
 @Component({
   selector: 'ds-eperson-form',
@@ -194,6 +196,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 +217,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`),
@@ -339,6 +345,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
   onCancel() {
     this.epersonService.cancelEditEPerson();
     this.cancelForm.emit();
+    void this.router.navigate([getEPersonsRoute()]);
   }
 
   /**
@@ -390,6 +397,8 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       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();
@@ -429,6 +438,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();
@@ -463,31 +473,43 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    * Deletes the EPerson from the Repository. The EPerson will be the only that this form is showing.
    * It'll either show a success or error message depending on whether the delete was successful or not.
    */
-  delete() {
-    this.epersonService.getActiveEPerson().pipe(take(1)).subscribe((eperson: EPerson) => {
-      const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = 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';
-      modalRef.componentInstance.confirmLabel = 'confirmation-modal.delete-eperson.confirm';
-      modalRef.componentInstance.brandColor = 'danger';
-      modalRef.componentInstance.confirmIcon = 'fas fa-trash';
-      modalRef.componentInstance.response.pipe(take(1)).subscribe((confirm: boolean) => {
-        if (confirm) {
-          if (hasValue(eperson.id)) {
-            this.epersonService.deleteEPerson(eperson).pipe(getFirstCompletedRemoteData()).subscribe((restResponse: RemoteData<NoContent>) => {
-              if (restResponse.hasSucceeded) {
-                this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', { name: this.dsoNameService.getName(eperson) }));
-                this.submitForm.emit();
-              } else {
-                this.notificationsService.error('Error occured when trying to delete EPerson with id: ' + eperson.id + ' with code: ' + restResponse.statusCode + ' and message: ' + restResponse.errorMessage);
-              }
-              this.cancelForm.emit();
-            });
-          }
-        }
-      });
+  delete(): void {
+    this.epersonService.getActiveEPerson().pipe(
+      take(1),
+      switchMap((eperson: EPerson) => {
+        const modalRef = this.modalService.open(ConfirmationModalComponent);
+        modalRef.componentInstance.dso = 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';
+        modalRef.componentInstance.confirmLabel = 'confirmation-modal.delete-eperson.confirm';
+        modalRef.componentInstance.brandColor = 'danger';
+        modalRef.componentInstance.confirmIcon = 'fas fa-trash';
+
+        return modalRef.componentInstance.response.pipe(
+          take(1),
+          switchMap((confirm: boolean) => {
+            if (confirm && hasValue(eperson.id)) {
+              this.canDelete$ = observableOf(false);
+              return this.epersonService.deleteEPerson(eperson).pipe(
+                getFirstCompletedRemoteData(),
+                map((restResponse: RemoteData<NoContent>) => ({ restResponse, eperson }))
+              );
+            } else {
+              return observableOf(null);
+            }
+          }),
+          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}`);
+      }
+      this.cancelForm.emit();
     });
   }
 
@@ -523,7 +545,6 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    * Cancel the current edit when component is destroyed & unsub all subscriptions
    */
   ngOnDestroy(): void {
-    this.onCancel();
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
     this.paginationService.clearPagination(this.config.id);
     if (hasValue(this.emailValueChangeSubscribe)) {
@@ -531,16 +552,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

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

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { getFirstCompletedRemoteData } from '../../core/shared/operators';
+import { ResolvedAction } from '../../core/resolving/resolver.actions';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { Store } from '@ngrx/store';
+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 implements Resolve<RemoteData<EPerson>> {
+
+  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,13 +2,13 @@
   <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>
       </ng-template>
 
-      <ng-template #editheader>
+      <ng-template #editHeader>
         <h2 class="border-bottom pb-2">
           <span
             *dsContextHelp="{
@@ -36,12 +36,12 @@
                [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"
-                  (click)="delete()">
+                  (click)="delete()" type="button">
             <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
           </button>
         </div>

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

@@ -10,7 +10,6 @@ import {
 } from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
-  ObservedValueOf,
   combineLatest as observableCombineLatest,
   Observable,
   of as observableOf,
@@ -37,7 +36,7 @@ import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteDataPayload
 } from '../../../core/shared/operators';
-import { AlertType } from '../../../shared/alert/aletr-type';
+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 { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
@@ -48,6 +47,7 @@ import { Operation } from 'fast-json-patch';
 import { ValidateGroupExists } from './validators/group-exists.validator';
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { environment } from '../../../../environments/environment';
+import { getGroupEditRoute, getGroupsRoute } from '../../access-control-routing-paths';
 
 @Component({
   selector: 'ds-group-form',
@@ -165,19 +165,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>>) => {
-            return isAuthorized && !hasLinkedDSO;
-          });
-      })
+        ]).pipe(
+          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`)
-    ).subscribe(([groupName, groupCommunity, groupDescription]) => {
+    ]).subscribe(([groupName, groupCommunity, groupDescription]) => {
       this.groupName = new DynamicInputModel({
         id: 'groupName',
         label: groupName,
@@ -215,12 +215,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())))
-        ).subscribe(([activeGroup, canEdit, linkedObject]) => {
+        ]).subscribe(([activeGroup, canEdit, linkedObject]) => {
 
           if (activeGroup != null) {
 
@@ -230,12 +230,14 @@ export class GroupFormComponent implements OnInit, OnDestroy {
             this.groupBeingEdited = activeGroup;
 
             if (linkedObject?.name) {
-              this.formBuilderService.insertFormGroupControl(1, this.formGroup, this.formModel, this.groupCommunity);
-              this.formGroup.patchValue({
-                groupName: activeGroup.name,
-                groupCommunity: linkedObject?.name ?? '',
-                groupDescription: activeGroup.firstMetadataValue('dc.description'),
-              });
+              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,
@@ -263,7 +265,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()]);
   }
 
   /**
@@ -310,7 +312,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 }));

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

@@ -1,6 +1,60 @@
 <ng-container>
   <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
 
+  <h4>{{messagePrefix + '.headMembers' | translate}}</h4>
+
+  <ds-pagination *ngIf="(ePeopleMembersOfGroup | async)?.totalElements > 0"
+                 [paginationOptions]="config"
+                 [pageInfoState]="(ePeopleMembersOfGroup | async)"
+                 [collectionSize]="(ePeopleMembersOfGroup | async)?.totalElements"
+                 [hideGear]="true"
+                 [hidePagerWhenSinglePage]="true">
+
+    <div class="table-responsive">
+      <table id="ePeopleMembersOfGroup" class="table table-striped table-hover table-bordered">
+        <thead>
+        <tr>
+          <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
+          <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
+          <th scope="col" class="align-middle">{{messagePrefix + '.table.identity' | translate}}</th>
+          <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let eperson of (ePeopleMembersOfGroup | async)?.page">
+          <td class="align-middle">{{eperson.id}}</td>
+          <td class="align-middle">
+            <a (click)="ePersonDataService.startEditingNewEPerson(eperson)"
+               [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">
+              {{ 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)="deleteMemberFromGroup(eperson)"
+                      [disabled]="actionConfig.remove.disabled"
+                      [ngClass]="['btn btn-sm', actionConfig.remove.css]"
+                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(eperson) } }}">
+                <i [ngClass]="actionConfig.remove.icon"></i>
+              </button>
+            </div>
+          </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>
+
   <h4 id="search" class="border-bottom pb-2">
     <span
       *dsContextHelp="{
@@ -15,14 +69,8 @@
   </h4>
 
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
-    <div>
-      <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
-        <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">
+    <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">
@@ -37,10 +85,10 @@
     </div>
   </form>
 
-  <ds-pagination *ngIf="(ePeopleSearchDtos | async)?.totalElements > 0"
+  <ds-pagination *ngIf="(ePeopleSearch | async)?.totalElements > 0"
                  [paginationOptions]="configSearch"
-                 [pageInfoState]="(ePeopleSearchDtos | async)"
-                 [collectionSize]="(ePeopleSearchDtos | async)?.totalElements"
+                 [pageInfoState]="(ePeopleSearch | async)"
+                 [collectionSize]="(ePeopleSearch | async)?.totalElements"
                  [hideGear]="true"
                  [hidePagerWhenSinglePage]="true">
 
@@ -55,33 +103,24 @@
         </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let ePerson of (ePeopleSearchDtos | async)?.page">
-          <td class="align-middle">{{ePerson.eperson.id}}</td>
+        <tr *ngFor="let eperson of (ePeopleSearch | async)?.page">
+          <td class="align-middle">{{eperson.id}}</td>
           <td class="align-middle">
-            <a (click)="ePersonDataService.startEditingNewEPerson(ePerson.eperson)"
+            <a (click)="ePersonDataService.startEditingNewEPerson(eperson)"
                [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">
-              {{ dsoNameService.getName(ePerson.eperson) }}
+              {{ dsoNameService.getName(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 : '-' }}
+            {{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 *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)"
+              <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>
@@ -93,72 +132,10 @@
 
   </ds-pagination>
 
-  <div *ngIf="(ePeopleSearchDtos | async)?.totalElements == 0 && searchDone"
+  <div *ngIf="(ePeopleSearch | 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)"
-                 [collectionSize]="(ePeopleMembersOfGroupDtos | async)?.totalElements"
-                 [hideGear]="true"
-                 [hidePagerWhenSinglePage]="true">
-
-    <div class="table-responsive">
-      <table id="ePeopleMembersOfGroup" class="table table-striped table-hover table-bordered">
-        <thead>
-        <tr>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
-          <th scope="col" class="align-middle">{{messagePrefix + '.table.identity' | translate}}</th>
-          <th class="align-middle">{{messagePrefix + '.table.edit' | translate}}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let ePerson of (ePeopleMembersOfGroupDtos | 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="(ePeopleMembersOfGroupDtos | async) == undefined || (ePeopleMembersOfGroupDtos | async)?.totalElements == 0" class="alert alert-info w-100 mb-2"
-       role="alert">
-    {{messagePrefix + '.no-members-yet' | translate}}
-  </div>
-
 </ng-container>

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

@@ -17,7 +17,7 @@ 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 { GroupMock } 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';
@@ -39,28 +39,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];
-    allEPersons = [EPersonMock, EPersonMock2];
-    allGroups = [GroupMock, GroupMock2];
+    epersonNonMembers = [EPersonMock];
     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(), []));
       },
@@ -77,22 +75,22 @@ describe('MembersListComponent', () => {
     groupsDataServiceStub = {
       activeGroup: activeGroup,
       epersonMembers: epersonMembers,
-      subgroupMembers: subgroupMembers,
-      allGroups: allGroups,
+      epersonNonMembers: epersonNonMembers,
       getActiveGroup(): Observable<Group> {
         return observableOf(activeGroup);
       },
       getEPersonMembers() {
         return this.epersonMembers;
       },
-      searchGroups(query: string): Observable<RemoteData<PaginatedList<Group>>> {
-        if (query === '') {
-          return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), this.allGroups));
-        }
-        return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), []));
-      },
-      addMemberToGroup(parentGroup, eperson: EPerson): Observable<RestResponse> {
-        this.epersonMembers = [...this.epersonMembers, eperson];
+      addMemberToGroup(parentGroup, epersonToAdd: EPerson): Observable<RestResponse> {
+        // Add eperson to list of members
+        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 observableOf(new RestResponse(true, 200, 'Success'));
       },
       clearGroupsRequests() {
@@ -105,14 +103,14 @@ describe('MembersListComponent', () => {
         return '/access-control/groups/' + group.id;
       },
       deleteMemberFromGroup(parentGroup, epersonToDelete: EPerson): Observable<RestResponse> {
-        this.epersonMembers = this.epersonMembers.find((eperson: EPerson) => {
-          if (eperson.id !== epersonToDelete.id) {
-            return eperson;
+        // Remove eperson from list of members
+        this.epersonMembers.forEach( (eperson: EPerson, index: number) => {
+          if (eperson.id === epersonToDelete.id) {
+            this.epersonMembers.splice(index, 1);
           }
         });
-        if (this.epersonMembers === undefined) {
-          this.epersonMembers = [];
-        }
+        // Add eperson to list of non-members
+        this.epersonNonMembers = [...this.epersonNonMembers, epersonToDelete];
         return observableOf(new RestResponse(true, 200, 'Success'));
       }
     };
@@ -160,13 +158,37 @@ describe('MembersListComponent', () => {
     expect(comp).toBeDefined();
   }));
 
-  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);
-    epersonMembers.map((eperson: EPerson) => {
-      expect(epersonIdsFound.find((foundEl) => {
-        return (foundEl.nativeElement.textContent.trim() === eperson.uuid);
-      })).toBeTruthy();
+  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);
+      epersonMembers.map((eperson: EPerson) => {
+        expect(epersonIdsFound.find((foundEl) => {
+          return (foundEl.nativeElement.textContent.trim() === eperson.uuid);
+        })).toBeTruthy();
+      });
+    });
+
+    it('should show a delete button next to each member', () => {
+      const epersonsFound = fixture.debugElement.queryAll(By.css('#ePeopleMembersOfGroup tbody tr'));
+      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(addButton).toBeNull();
+        expect(deleteButton).not.toBeNull();
+      });
+    });
+
+    describe('if first delete button is pressed', () => {
+      beforeEach(() => {
+        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);
+      });
     });
   });
 
@@ -174,76 +196,40 @@ describe('MembersListComponent', () => {
     describe('when searching without query', () => {
       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);
+      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();
+        });
       });
 
-      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();
-            }
-          });
+      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(addButton).not.toBeNull();
+          expect(deleteButton).toBeNull();
         });
       });
 
       describe('if first add button is pressed', () => {
-        beforeEach(fakeAsync(() => {
+        beforeEach(() => {
           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'));
-            expect(addButton).toBeNull();
-            expect(deleteButton).not.toBeNull();
-          });
         });
-      });
-
-      describe('if first delete button is pressed', () => {
-        beforeEach(fakeAsync(() => {
-          const deleteButton: DebugElement = fixture.debugElement.query(By.css('#epersonsSearch tbody .fa-trash-alt'));
-          deleteButton.nativeElement.click();
-          tick();
-          fixture.detectChanges();
-        }));
-        it('then no ePerson is member of the active group', () => {
+        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(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'));
-            expect(deleteButton).toBeNull();
-            expect(addButton).not.toBeNull();
-          });
+          expect(epersonsFound.length).toEqual(0);
         });
       });
     });

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

@@ -4,28 +4,23 @@ import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import {
   Observable,
-  of as observableOf,
   Subscription,
-  BehaviorSubject,
-  combineLatest as observableCombineLatest,
-  ObservedValueOf,
+  BehaviorSubject
 } from 'rxjs';
-import { defaultIfEmpty, map, mergeMap, switchMap, take } from 'rxjs/operators';
-import { buildPaginatedList, PaginatedList } from '../../../../core/data/paginated-list.model';
+import { map, switchMap, take } from 'rxjs/operators';
+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';
 
@@ -34,8 +29,8 @@ import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
  */
 enum SubKey {
   ActiveGroup,
-  MembersDTO,
-  SearchResultsDTO,
+  Members,
+  SearchResults,
 }
 
 /**
@@ -96,11 +91,11 @@ export class MembersListComponent implements OnInit, OnDestroy {
   /**
    * 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
@@ -129,7 +124,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;
@@ -148,18 +142,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,8 +164,8 @@ export class MembersListComponent implements OnInit, OnDestroy {
    * @private
    */
   retrieveMembers(page: number): void {
-    this.unsubFrom(SubKey.MembersDTO);
-    this.subs.set(SubKey.MembersDTO,
+    this.unsubFrom(SubKey.Members);
+    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, {
@@ -189,49 +182,12 @@ export class MembersListComponent implements OnInit, OnDestroy {
             return rd;
           }
         }),
-        switchMap((epersonListRD: RemoteData<PaginatedList<EPerson>>) => {
-          const dtos$ = observableCombineLatest([...epersonListRD.payload.page.map((member: EPerson) => {
-            const dto$: Observable<EpersonDtoModel> = observableCombineLatest(
-              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);
+        getRemoteDataPayload())
+        .subscribe((paginatedListOfEPersons: PaginatedList<EPerson>) => {
+          this.ePeopleMembersOfGroup.next(paginatedListOfEPersons);
         }));
   }
 
-  /**
-   * 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);
-        }
-      }));
-  }
-
   /**
    * Unsubscribe from a subscription if it's still subscribed, and remove it from the map of
    * active subscriptions
@@ -248,14 +204,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) {
-    ePerson.memberOfGroup = false;
+  deleteMemberFromGroup(eperson: EPerson) {
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((activeGroup: Group) => {
       if (activeGroup != null) {
-        const response = this.groupDataService.deleteMemberFromGroup(activeGroup, ePerson.eperson);
-        this.showNotifications('deleteMember', response, this.dsoNameService.getName(ePerson.eperson), activeGroup);
+        const response = this.groupDataService.deleteMemberFromGroup(activeGroup, eperson);
+        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 +224,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) {
-    ePerson.memberOfGroup = true;
+  addMemberToGroup(eperson: EPerson) {
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((activeGroup: Group) => {
       if (activeGroup != null) {
-        const response = this.groupDataService.addMemberToGroup(activeGroup, ePerson.eperson);
-        this.showNotifications('addMember', response, this.dsoNameService.getName(ePerson.eperson), activeGroup);
+        const response = this.groupDataService.addMemberToGroup(activeGroup, eperson);
+        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 +243,25 @@ export class MembersListComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Search in the EPeople by name, email or metadata
-   * @param data  Contains scope and query param
+   * Search all EPeople who are NOT a member of the current group by name, email or metadata
+   * @param data  Contains query param
    */
   search(data: any) {
-    this.unsubFrom(SubKey.SearchResultsDTO);
-    this.subs.set(SubKey.SearchResultsDTO,
+    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;
-          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
-          });
+          }, false, true);
         }),
         getAllCompletedRemoteData(),
         map((rd: RemoteData<any>) => {
@@ -319,23 +271,9 @@ export class MembersListComponent implements OnInit, OnDestroy {
             return rd;
           }
         }),
-        switchMap((epersonListRD: RemoteData<PaginatedList<EPerson>>) => {
-          const dtos$ = observableCombineLatest([...epersonListRD.payload.page.map((member: EPerson) => {
-            const dto$: Observable<EpersonDtoModel> = observableCombineLatest(
-              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);
+        getRemoteDataPayload())
+        .subscribe((paginatedListOfEPersons: PaginatedList<EPerson>) => {
+          this.ePeopleSearch.next(paginatedListOfEPersons);
         }));
   }
 

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)"
-                      (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)"
+              <button (click)="addSubgroupToGroup(group)"
                       class="btn btn-outline-primary btn-sm addButton"
                       title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(group) } }}">
                 <i class="fas fa-plus fa-fw"></i>
@@ -90,53 +129,4 @@
     {{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,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
-import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
+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 { Router } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { Observable, of as observableOf, BehaviorSubject } from 'rxjs';
+import { Observable, of as observableOf } from 'rxjs';
 import { RestResponse } from '../../../../core/cache/response.models';
 import { buildPaginatedList, PaginatedList } from '../../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../../core/data/remote-data';
@@ -18,19 +18,18 @@ import { NotificationsService } from '../../../../shared/notifications/notificat
 import { GroupMock, GroupMock2 } from '../../../../shared/testing/group-mock';
 import { SubgroupsListComponent } from './subgroups-list.component';
 import {
-  createSuccessfulRemoteDataObject$,
-  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 { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
+import { EPersonMock2 } from 'src/app/shared/testing/eperson.mock';
 
 describe('SubgroupsListComponent', () => {
   let component: SubgroupsListComponent;
@@ -39,44 +38,70 @@ 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(
-          map((currentGroups: Group[]) => {
-            return createSuccessfulRemoteDataObject(buildPaginatedList<Group>(new PageInfo(), currentGroups));
-          })
-        );
+        return createSuccessfulRemoteDataObject$(buildPaginatedList<Group>(new PageInfo(), groupsDataServiceStub.getSubgroups()));
       },
       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(), []));
       },
-      addSubGroupToGroup(parentGroup, subgroup: Group): Observable<RestResponse> {
-        this.subgroups$.next([...this.subgroups$.getValue(), subgroup]);
+      addSubGroupToGroup(parentGroup, subgroupToAdd: Group): Observable<RestResponse> {
+        // 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,12 +110,15 @@ describe('SubgroupsListComponent', () => {
       clearGroupLinkRequests() {
         // empty
       },
-      deleteSubGroupFromGroup(parentGroup, subgroup: Group): Observable<RestResponse> {
-        this.subgroups$.next(this.subgroups$.getValue().filter((group: Group) => {
-          if (group.id !== subgroup.id) {
-            return group;
+      deleteSubGroupFromGroup(parentGroup, subgroupToDelete: Group): Observable<RestResponse> {
+        // Remove group from list of subgroups
+        this.subgroups.forEach( (group: Group, index: number) => {
+          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'));
       }
     };
@@ -99,7 +127,7 @@ describe('SubgroupsListComponent', () => {
     translateService = getMockTranslateService();
 
     paginationService = new PaginationServiceStub();
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot({
           loader: {
@@ -137,30 +165,38 @@ describe('SubgroupsListComponent', () => {
     expect(comp).toBeDefined();
   }));
 
-  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) => {
-      expect(groupIdsFound.find((foundEl) => {
-        return (foundEl.nativeElement.textContent.trim() === group.uuid);
-      })).toBeTruthy();
-    });
-  });
-
-  describe('if first group delete button is pressed', () => {
-    let groupsFound: DebugElement[];
-    beforeEach(fakeAsync(() => {
-      const addButton = fixture.debugElement.query(By.css('#subgroupsOfGroup tbody .deleteButton'));
-      addButton.triggerEventHandler('click', {
-        preventDefault: () => {/**/
-        }
+  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);
+      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(() => {
+        const deleteButton = fixture.debugElement.query(By.css('#subgroupsOfGroup tbody .deleteButton'));
+        deleteButton.nativeElement.click();
+        fixture.detectChanges();
+      });
+      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);
       });
-      tick();
-      fixture.detectChanges();
-    }));
-    it('one less subgroup in list from 1 to 0 (of 2 total groups)', () => {
-      groupsFound = fixture.debugElement.queryAll(By.css('#subgroupsOfGroup tbody tr'));
-      expect(groupsFound.length).toEqual(0);
     });
   });
 
@@ -169,54 +205,38 @@ describe('SubgroupsListComponent', () => {
       let groupsFound: DebugElement[];
       beforeEach(fakeAsync(() => {
         component.search({ query: '' });
+        fixture.detectChanges();
         groupsFound = fixture.debugElement.queryAll(By.css('#groupsSearch tbody tr'));
       }));
 
-      it('should display all groups', () => {
-        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'));
+      it('should display only non-member groups (i.e. groups that are not a subgroup)', () => {
         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 have delete button, else it should have add button', () => {
+      it('should display an add button next to non-member groups, not a delete button', () => {
+        groupsFound.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).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'));
-          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(groupsFound.length).toEqual(0);
         });
       });
     });

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

@@ -2,16 +2,15 @@ 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 { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs';
-import { map, mergeMap, switchMap, take } from 'rxjs/operators';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { map, switchMap, take } from 'rxjs/operators';
 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
+  getAllCompletedRemoteData,
+  getFirstCompletedRemoteData
 } from '../../../../core/shared/operators';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
@@ -103,6 +102,7 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
       if (activeGroup != null) {
         this.groupBeingEdited = activeGroup;
         this.retrieveSubGroups();
+        this.search({query: ''});
       }
     }));
   }
@@ -131,47 +131,6 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
       }));
   }
 
-  /**
-   * 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 +140,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 +161,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,28 +176,38 @@ 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) {
-    const query: string = data.query;
-    if (query != null && this.currentSearchQuery !== query) {
-      this.router.navigateByUrl(this.groupDataService.getGroupEditPageRouterLink(this.groupBeingEdited));
-      this.currentSearchQuery = query;
-      this.configSearch.currentPage = 1;
-    }
-    this.searchDone = true;
-
     this.unsubFrom(SubKey.SearchResults);
-    this.subs.set(SubKey.SearchResults, this.paginationService.getCurrentPagination(this.configSearch.id, this.configSearch).pipe(
-      switchMap((config) => this.groupDataService.searchGroups(this.currentSearchQuery, {
-        currentPage: config.currentPage,
-        elementsPerPage: config.pageSize
-      }, true, true, followLink('object')
-      ))
-    ).subscribe((rd: RemoteData<PaginatedList<Group>>) => {
-      this.searchResults$.next(rd);
-    }));
+    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 && this.groupBeingEdited) {
+            this.currentSearchQuery = query;
+            this.paginationService.resetPage(this.configSearch.id);
+          }
+          this.searchDone = true;
+
+          return this.groupDataService.searchNonMemberGroups(this.currentSearchQuery, this.groupBeingEdited.id, {
+            currentPage: paginationOptions.currentPage,
+            elementsPerPage: paginationOptions.pageSize
+          }, false, true, followLink('object'));
+        }),
+        getAllCompletedRemoteData(),
+        map((rd: RemoteData<any>) => {
+          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/groups-registry.component.html

@@ -5,7 +5,7 @@
         <h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
         <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>

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

@@ -216,18 +216,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-import-batch-page/batch-import-page.component.html

@@ -20,12 +20,29 @@
     </small>
   </div>
 
+  <ui-switch color="#ebebeb"
+             [checkedLabel]="'admin.metadata-import.page.toggle.upload' | translate"
+             [uncheckedLabel]="'admin.metadata-import.page.toggle.url' | translate"
+             [checked]="isUpload"
+             (change)="toggleUpload()" ></ui-switch>
+  <small class="form-text text-muted">
+    {{'admin.batch-import.page.toggle.help' | translate}}
+  </small>
+  
+
   <ds-file-dropzone-no-uploader
+    *ngIf="isUpload"
+    data-test="file-dropzone"
     (onFileAdded)="setFile($event)"
     [dropMessageLabel]="'admin.batch-import.page.dropMsg'"
     [dropMessageLabelReplacement]="'admin.batch-import.page.dropMsgReplace'">
   </ds-file-dropzone-no-uploader>
 
+  <div class="form-group mt-2" *ngIf="!isUpload">
+    <input class="form-control" type="text" placeholder="{{'admin.metadata-import.page.urlMsg' | translate}}"
+           data-test="file-url-input" [(ngModel)]="fileURL">
+  </div>
+
   <div class="space-children-mr">
     <button class="btn btn-secondary" id="backButton"
             (click)="this.onReturn();">{{'admin.metadata-import.page.button.return' | translate}}</button>

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

@@ -86,10 +86,18 @@ describe('BatchImportPageComponent', () => {
     let fileMock: File;
 
     beforeEach(() => {
+      component.isUpload = true;
       fileMock = new File([''], 'filename.zip', { type: 'application/zip' });
       component.setFile(fileMock);
     });
 
+    it('should show the file dropzone', () => {
+      const fileDropzone = fixture.debugElement.query(By.css('[data-test="file-dropzone"]'));
+      const fileUrlInput = fixture.debugElement.query(By.css('[data-test="file-url-input"]'));
+      expect(fileDropzone).toBeTruthy();
+      expect(fileUrlInput).toBeFalsy();
+    });
+
     describe('if proceed button is pressed without validate only', () => {
       beforeEach(fakeAsync(() => {
         component.validateOnly = false;
@@ -99,9 +107,9 @@ describe('BatchImportPageComponent', () => {
       }));
       it('metadata-import script is invoked with --zip fileName and the mockFile', () => {
         const parameterValues: ProcessParameter[] = [
-          Object.assign(new ProcessParameter(), { name: '--zip', value: 'filename.zip' }),
+          Object.assign(new ProcessParameter(), { name: '--add' }),
+          Object.assign(new ProcessParameter(), { name: '--zip', value: 'filename.zip' })
         ];
-        parameterValues.push(Object.assign(new ProcessParameter(), { name: '--add' }));
         expect(scriptService.invoke).toHaveBeenCalledWith(BATCH_IMPORT_SCRIPT_NAME, parameterValues, [fileMock]);
       });
       it('success notification is shown', () => {
@@ -121,8 +129,8 @@ describe('BatchImportPageComponent', () => {
       }));
       it('metadata-import script is invoked with --zip fileName and the mockFile and -v validate-only', () => {
         const parameterValues: ProcessParameter[] = [
-          Object.assign(new ProcessParameter(), { name: '--zip', value: 'filename.zip' }),
           Object.assign(new ProcessParameter(), { name: '--add' }),
+          Object.assign(new ProcessParameter(), { name: '--zip', value: 'filename.zip' }),
           Object.assign(new ProcessParameter(), { name: '-v', value: true }),
         ];
         expect(scriptService.invoke).toHaveBeenCalledWith(BATCH_IMPORT_SCRIPT_NAME, parameterValues, [fileMock]);
@@ -148,4 +156,77 @@ describe('BatchImportPageComponent', () => {
       });
     });
   });
+
+  describe('if url is set', () => {
+    beforeEach(fakeAsync(() => {
+      component.isUpload = false;
+      component.fileURL = 'example.fileURL.com';
+      fixture.detectChanges();
+    }));
+
+    it('should show the file url input', () => {
+      const fileDropzone = fixture.debugElement.query(By.css('[data-test="file-dropzone"]'));
+      const fileUrlInput = fixture.debugElement.query(By.css('[data-test="file-url-input"]'));
+      expect(fileDropzone).toBeFalsy();
+      expect(fileUrlInput).toBeTruthy();
+    });
+
+    describe('if proceed button is pressed without validate only', () => {
+      beforeEach(fakeAsync(() => {
+        component.validateOnly = false;
+        const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
+        proceed.click();
+        fixture.detectChanges();
+      }));
+      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' })
+        ];
+        expect(scriptService.invoke).toHaveBeenCalledWith(BATCH_IMPORT_SCRIPT_NAME, parameterValues, [null]);
+      });
+      it('success notification is shown', () => {
+        expect(notificationService.success).toHaveBeenCalled();
+      });
+      it('redirected to process page', () => {
+        expect(router.navigateByUrl).toHaveBeenCalledWith('/processes/46');
+      });
+    });
+
+    describe('if proceed button is pressed with validate only', () => {
+      beforeEach(fakeAsync(() => {
+        component.validateOnly = true;
+        const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
+        proceed.click();
+        fixture.detectChanges();
+      }));
+      it('metadata-import script is invoked with --url and the file url and -v validate-only', () => {
+        const parameterValues: ProcessParameter[] = [
+          Object.assign(new ProcessParameter(), { name: '--add' }),
+          Object.assign(new ProcessParameter(), { name: '--url', value: 'example.fileURL.com' }),
+          Object.assign(new ProcessParameter(), { name: '-v', value: true }),
+        ];
+        expect(scriptService.invoke).toHaveBeenCalledWith(BATCH_IMPORT_SCRIPT_NAME, parameterValues, [null]);
+      });
+      it('success notification is shown', () => {
+        expect(notificationService.success).toHaveBeenCalled();
+      });
+      it('redirected to process page', () => {
+        expect(router.navigateByUrl).toHaveBeenCalledWith('/processes/46');
+      });
+    });
+
+    describe('if proceed is pressed; but script invoke fails', () => {
+      beforeEach(fakeAsync(() => {
+        jasmine.getEnv().allowRespy(true);
+        spyOn(scriptService, 'invoke').and.returnValue(createFailedRemoteDataObject$('Error', 500));
+        const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
+        proceed.click();
+        fixture.detectChanges();
+      }));
+      it('error notification is shown', () => {
+        expect(notificationService.error).toHaveBeenCalled();
+      });
+    });
+  });
 });

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

@@ -8,7 +8,7 @@ import { ProcessParameter } from '../../process-page/processes/process-parameter
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { RemoteData } from '../../core/data/remote-data';
 import { Process } from '../../process-page/processes/process.model';
-import { isNotEmpty } from '../../shared/empty.util';
+import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { getProcessDetailRoute } from '../../process-page/process-page-routing.paths';
 import {
   ImportBatchSelectorComponent
@@ -32,11 +32,22 @@ export class BatchImportPageComponent {
    * The validate only flag
    */
   validateOnly = true;
+
   /**
    * dso object for community or collection
    */
   dso: DSpaceObject = null;
 
+  /**
+   * The flag between upload and url
+   */
+  isUpload = true;
+
+  /**
+   * File URL when flag is for url
+   */
+  fileURL: string;
+
   public constructor(private location: Location,
                      protected translate: TranslateService,
                      protected notificationsService: NotificationsService,
@@ -72,13 +83,22 @@ export class BatchImportPageComponent {
    * Starts import-metadata script with --zip fileName (and the selected file)
    */
   public importMetadata() {
-    if (this.fileObject == null) {
-      this.notificationsService.error(this.translate.get('admin.metadata-import.page.error.addFile'));
+    if (this.fileObject == null && isEmpty(this.fileURL)) {
+      if (this.isUpload) {
+        this.notificationsService.error(this.translate.get('admin.metadata-import.page.error.addFile'));
+      } else {
+        this.notificationsService.error(this.translate.get('admin.metadata-import.page.error.addFileUrl'));
+      }
     } else {
       const parameterValues: ProcessParameter[] = [
-        Object.assign(new ProcessParameter(), { name: '--zip', value: this.fileObject.name }),
         Object.assign(new ProcessParameter(), { name: '--add' })
       ];
+      if (this.isUpload) {
+        parameterValues.push(Object.assign(new ProcessParameter(), { name: '--zip', value: this.fileObject.name }));
+      } else {
+        this.fileObject = null;
+        parameterValues.push(Object.assign(new ProcessParameter(), { name: '--url', value: this.fileURL }));
+      }
       if (this.dso) {
         parameterValues.push(Object.assign(new ProcessParameter(), { name: '--collection', value: this.dso.uuid }));
       }
@@ -127,4 +147,11 @@ export class BatchImportPageComponent {
   removeDspaceObject(): void {
     this.dso = null;
   }
+
+  /**
+   * toggle the flag between upload and url
+   */
+  toggleUpload() {
+    this.isUpload = !this.isUpload;
+  }
 }

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

@@ -1,5 +1,4 @@
 import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { MetadataSchemaFormComponent } from './metadata-schema-form.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -29,14 +28,16 @@ describe('MetadataSchemaFormComponent', () => {
     createFormGroup: () => {
       return {
         patchValue: () => {
-        }
+        },
+        reset(_value?: any, _options?: { onlySelf?: boolean; emitEvent?: boolean; }): void {
+        },
       };
     }
   };
   /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
       declarations: [MetadataSchemaFormComponent, EnumKeysPipe],
       providers: [
@@ -64,7 +65,7 @@ describe('MetadataSchemaFormComponent', () => {
     const expected = Object.assign(new MetadataSchema(), {
       namespace: namespace,
       prefix: prefix
-    });
+    } as MetadataSchema);
 
     beforeEach(() => {
       spyOn(component.submitForm, 'emit');
@@ -79,11 +80,10 @@ describe('MetadataSchemaFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should emit a new schema using the correct values', waitForAsync(() => {
-        fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
-        });
-      }));
+      it('should emit a new schema using the correct values', async () => {
+        await fixture.whenStable();
+        expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
+      });
     });
 
     describe('with an active schema', () => {
@@ -91,7 +91,7 @@ describe('MetadataSchemaFormComponent', () => {
         id: 1,
         namespace: namespace,
         prefix: prefix
-      });
+      } as MetadataSchema);
 
       beforeEach(() => {
         spyOn(registryService, 'getActiveMetadataSchema').and.returnValue(observableOf(expectedWithId));
@@ -99,11 +99,10 @@ describe('MetadataSchemaFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should edit the existing schema using the correct values', waitForAsync(() => {
-        fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expectedWithId);
-        });
-      }));
+      it('should edit the existing schema using the correct values', async () => {
+        await fixture.whenStable();
+        expect(component.submitForm.emit).toHaveBeenCalledWith(expectedWithId);
+      });
     });
   });
 });

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

@@ -8,9 +8,9 @@ import {
 import { UntypedFormGroup } from '@angular/forms';
 import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { take } from 'rxjs/operators';
+import { switchMap, take, tap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
-import { combineLatest } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';
 
 @Component({
@@ -77,19 +77,24 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    combineLatest(
+    combineLatest([
       this.translateService.get(`${this.messagePrefix}.name`),
       this.translateService.get(`${this.messagePrefix}.namespace`)
-    ).subscribe(([name, namespace]) => {
+    ]).subscribe(([name, namespace]) => {
       this.name = new DynamicInputModel({
           id: 'name',
           label: name,
           name: 'name',
           validators: {
             required: null,
-            pattern: '^[^ ,_]{1,32}$'
+            pattern: '^[^. ,]*$',
+            maxLength: 32,
           },
           required: true,
+          errorMessages: {
+            pattern: 'error.validation.metadata.name.invalid-pattern',
+            maxLength: 'error.validation.metadata.name.max-length',
+          },
         });
       this.namespace = new DynamicInputModel({
           id: 'namespace',
@@ -97,8 +102,12 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
           name: 'namespace',
           validators: {
             required: null,
+            maxLength: 256,
           },
           required: true,
+          errorMessages: {
+            maxLength: 'error.validation.metadata.namespace.max-length',
+          },
         });
       this.formModel = [
         new DynamicFormGroupModel(
@@ -108,13 +117,18 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
           })
       ];
       this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-      this.registryService.getActiveMetadataSchema().subscribe((schema) => {
-        this.formGroup.patchValue({
-          metadatadataschemagroup:{
-            name: schema != null ? schema.prefix : '',
-            namespace: schema != null ? schema.namespace : ''
-          }
-        });
+      this.registryService.getActiveMetadataSchema().subscribe((schema: MetadataSchema) => {
+        if (schema == null) {
+          this.clearFields();
+        } else {
+          this.formGroup.patchValue({
+            metadatadataschemagroup: {
+              name: schema.prefix,
+              namespace: schema.namespace,
+            },
+          });
+          this.name.disabled = true;
+        }
       });
     });
   }
@@ -132,43 +146,57 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
    * When the schema has no id attached -> Create new schema
    * Emit the updated/created schema using the EventEmitter submitForm
    */
-  onSubmit() {
-    this.registryService.clearMetadataSchemaRequests().subscribe();
-    this.registryService.getActiveMetadataSchema().pipe(take(1)).subscribe(
-      (schema) => {
-        const values = {
-          prefix: this.name.value,
-          namespace: this.namespace.value
-        };
-        if (schema == null) {
-          this.registryService.createOrUpdateMetadataSchema(Object.assign(new MetadataSchema(), values)).subscribe((newSchema) => {
-            this.submitForm.emit(newSchema);
+  onSubmit(): void {
+        this.registryService
+          .getActiveMetadataSchema()
+          .pipe(
+            take(1),
+            switchMap((schema: MetadataSchema) => {
+              const metadataValues = {
+                prefix: this.name.value,
+                namespace: this.namespace.value,
+              };
+
+              let createOrUpdate$: Observable<MetadataSchema>;
+
+              if (schema == null) {
+                createOrUpdate$ =
+                  this.registryService.createOrUpdateMetadataSchema(
+                    Object.assign(new MetadataSchema(), metadataValues)
+                  );
+              } else {
+                const updatedSchema = Object.assign(
+                  new MetadataSchema(),
+                  schema,
+                  {
+                    namespace: metadataValues.namespace,
+                  }
+                );
+                createOrUpdate$ =
+                  this.registryService.createOrUpdateMetadataSchema(
+                    updatedSchema
+                  );
+              }
+
+              return createOrUpdate$;
+            }),
+            tap(() => {
+              this.registryService.clearMetadataSchemaRequests().subscribe();
+            })
+          )
+          .subscribe((updatedOrCreatedSchema: MetadataSchema) => {
+            this.submitForm.emit(updatedOrCreatedSchema);
+            this.clearFields();
+            this.registryService.cancelEditMetadataSchema();
           });
-        } else {
-          this.registryService.createOrUpdateMetadataSchema(Object.assign(new MetadataSchema(), schema, {
-            id: schema.id,
-            prefix: (values.prefix ? values.prefix : schema.prefix),
-            namespace: (values.namespace ? values.namespace : schema.namespace)
-          })).subscribe((updatedSchema) => {
-            this.submitForm.emit(updatedSchema);
-          });
-        }
-        this.clearFields();
-        this.registryService.cancelEditMetadataSchema();
-      }
-    );
   }
 
   /**
    * Reset all input-fields to be empty
    */
-  clearFields() {
-    this.formGroup.patchValue({
-      metadatadataschemagroup:{
-        prefix: '',
-        namespace: ''
-      }
-    });
+  clearFields(): void {
+    this.formGroup.reset('metadatadataschemagroup');
+    this.name.disabled = false;
   }
 
   /**

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

@@ -39,14 +39,16 @@ describe('MetadataFieldFormComponent', () => {
     createFormGroup: () => {
       return {
         patchValue: () => {
-        }
+        },
+        reset(_value?: any, _options?: { onlySelf?: boolean; emitEvent?: boolean; }): void {
+        },
       };
     }
   };
   /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
       declarations: [MetadataFieldFormComponent, EnumKeysPipe],
       providers: [
@@ -98,11 +100,10 @@ describe('MetadataFieldFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should emit a new field using the correct values', waitForAsync(() => {
-        fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
-        });
-      }));
+      it('should emit a new field using the correct values', async () => {
+        await fixture.whenStable();
+        expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
+      });
     });
 
     describe('with an active field', () => {
@@ -120,11 +121,10 @@ describe('MetadataFieldFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should edit the existing field using the correct values', waitForAsync(() => {
-        fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expectedWithId);
-        });
-      }));
+      it('should edit the existing field using the correct values', async () => {
+        await fixture.whenStable();
+        expect(component.submitForm.emit).toHaveBeenCalledWith(expectedWithId);
+      });
     });
   });
 });

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

@@ -3,7 +3,8 @@ import {
   DynamicFormControlModel,
   DynamicFormGroupModel,
   DynamicFormLayout,
-  DynamicInputModel
+  DynamicInputModel,
+  DynamicTextAreaModel
 } from '@ng-dynamic-forms/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { RegistryService } from '../../../../core/registry/registry.service';
@@ -51,7 +52,7 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
   /**
    * A dynamic input model for the scopeNote field
    */
-  scopeNote: DynamicInputModel;
+  scopeNote: DynamicTextAreaModel;
 
   /**
    * A list of all dynamic input models
@@ -98,31 +99,46 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
    * Initialize the component, setting up the necessary Models for the dynamic form
    */
   ngOnInit() {
-    combineLatest(
+    combineLatest([
       this.translateService.get(`${this.messagePrefix}.element`),
       this.translateService.get(`${this.messagePrefix}.qualifier`),
       this.translateService.get(`${this.messagePrefix}.scopenote`)
-    ).subscribe(([element, qualifier, scopenote]) => {
+    ]).subscribe(([element, qualifier, scopenote]) => {
       this.element = new DynamicInputModel({
         id: 'element',
         label: element,
         name: 'element',
         validators: {
           required: null,
+          pattern: '^[^. ,]*$',
+          maxLength: 64,
         },
         required: true,
+        errorMessages: {
+          pattern: 'error.validation.metadata.element.invalid-pattern',
+          maxLength: 'error.validation.metadata.element.max-length',
+        },
       });
       this.qualifier = new DynamicInputModel({
         id: 'qualifier',
         label: qualifier,
         name: 'qualifier',
+        validators: {
+          pattern: '^[^. ,]*$',
+          maxLength: 64,
+        },
         required: false,
+        errorMessages: {
+          pattern: 'error.validation.metadata.qualifier.invalid-pattern',
+          maxLength: 'error.validation.metadata.qualifier.max-length',
+        },
       });
-      this.scopeNote = new DynamicInputModel({
+      this.scopeNote = new DynamicTextAreaModel({
         id: 'scopeNote',
         label: scopenote,
         name: 'scopeNote',
         required: false,
+        rows: 5,
       });
       this.formModel = [
         new DynamicFormGroupModel(
@@ -132,14 +148,20 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
         })
       ];
       this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-      this.registryService.getActiveMetadataField().subscribe((field) => {
-        this.formGroup.patchValue({
-          metadatadatafieldgroup: {
-            element: field != null ? field.element : '',
-            qualifier: field != null ? field.qualifier : '',
-            scopeNote: field != null ? field.scopeNote : ''
-          }
-        });
+      this.registryService.getActiveMetadataField().subscribe((field: MetadataField): void => {
+        if (field == null) {
+          this.clearFields();
+        } else {
+          this.formGroup.patchValue({
+            metadatadatafieldgroup: {
+              element: field.element,
+              qualifier: field.qualifier,
+              scopeNote: field.scopeNote,
+            },
+          });
+          this.element.disabled = true;
+          this.qualifier.disabled = true;
+        }
       });
     });
   }
@@ -157,25 +179,24 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
    * When the field has no id attached -> Create new field
    * Emit the updated/created field using the EventEmitter submitForm
    */
-  onSubmit() {
+  onSubmit(): void {
     this.registryService.getActiveMetadataField().pipe(take(1)).subscribe(
-      (field) => {
-        const values = {
-          element: this.element.value,
-          qualifier: this.qualifier.value,
-          scopeNote: this.scopeNote.value
-        };
+      (field: MetadataField) => {
         if (field == null) {
-          this.registryService.createMetadataField(Object.assign(new MetadataField(), values), this.metadataSchema).subscribe((newField) => {
+          this.registryService.createMetadataField(Object.assign(new MetadataField(), {
+            element: this.element.value,
+            qualifier: this.qualifier.value,
+            scopeNote: this.scopeNote.value,
+          }), this.metadataSchema).subscribe((newField: MetadataField) => {
             this.submitForm.emit(newField);
           });
         } else {
           this.registryService.updateMetadataField(Object.assign(new MetadataField(), field, {
             id: field.id,
-            element: (values.element ? values.element : field.element),
-            qualifier: (values.qualifier ? values.qualifier : field.qualifier),
-            scopeNote: (values.scopeNote ? values.scopeNote : field.scopeNote)
-          })).subscribe((updatedField) => {
+            element: field.element,
+            qualifier: field.qualifier,
+            scopeNote: this.scopeNote.value,
+          })).subscribe((updatedField: MetadataField) => {
             this.submitForm.emit(updatedField);
           });
         }
@@ -188,14 +209,10 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
   /**
    * Reset all input-fields to be empty
    */
-  clearFields() {
-    this.formGroup.patchValue({
-      metadatadatafieldgroup: {
-        element: '',
-        qualifier: '',
-        scopeNote: ''
-      }
-    });
+  clearFields(): void {
+    this.formGroup.reset('metadatadatafieldgroup');
+    this.element.disabled = false;
+    this.qualifier.disabled = false;
   }
 
   /**

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

@@ -41,7 +41,7 @@
                   </label>
                 </td>
                 <td class="selectable-row" (click)="editField(field)">{{field.id}}</td>
-                <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}<label *ngIf="field.qualifier" class="mb-0">.</label>{{field.qualifier}}</td>
+                <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}</td>
                 <td class="selectable-row" (click)="editField(field)">{{field.scopeNote}}</td>
               </tr>
               </tbody>

src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts

@@ -12,8 +12,7 @@ import { Router } from '@angular/router';
  * Represents a non-expandable section in the admin sidebar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-admin-sidebar-section]',
+  selector: 'ds-admin-sidebar-section',
   templateUrl: './admin-sidebar-section.component.html',
   styleUrls: ['./admin-sidebar-section.component.scss'],
 

src/app/admin/admin-sidebar/admin-sidebar.component.html

@@ -26,10 +26,10 @@
               </div>
             </li>
 
-            <ng-container *ngFor="let section of (sections | async)">
+            <li *ngFor="let section of (sections | async)">
                 <ng-container
                         *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-            </ng-container>
+            </li>
         </ul>
     </div>
     <div class="navbar-nav">

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts

@@ -15,8 +15,7 @@ import { Router } from '@angular/router';
  * Represents a expandable section in the sidebar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-expandable-admin-sidebar-section]',
+  selector: 'ds-expandable-admin-sidebar-section',
   templateUrl: './expandable-admin-sidebar-section.component.html',
   styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
   animations: [rotate, slide, bgColor]

src/app/admin/admin.module.ts

@@ -11,6 +11,7 @@ import { AdminSidebarSectionComponent } from './admin-sidebar/admin-sidebar-sect
 import { ExpandableAdminSidebarSectionComponent } from './admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
 import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
 import { AdminReportsModule } from './admin-reports/admin-reports.module';
+import { UiSwitchModule } from 'ngx-ui-switch';
 import { UploadModule } from '../shared/upload/upload.module';
 
 const ENTRY_COMPONENTS = [
@@ -29,6 +30,7 @@ const ENTRY_COMPONENTS = [
     AdminSearchModule.withEntryComponents(),
     AdminWorkflowModuleModule.withEntryComponents(),
     SharedModule,
+    UiSwitchModule,
     UploadModule,
   ],
   declarations: [

src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.spec.ts

@@ -11,6 +11,9 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { getForbiddenRoute } from '../../app-routing-paths';
 import { TranslateModule } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
+import { SignpostingDataService } from '../../core/data/signposting-data.service';
+import { ServerResponseService } from '../../core/services/server-response.service';
+import { PLATFORM_ID } from '@angular/core';
 
 describe('BitstreamDownloadPageComponent', () => {
   let component: BitstreamDownloadPageComponent;
@@ -24,6 +27,20 @@ describe('BitstreamDownloadPageComponent', () => {
   let router;
 
   let bitstream: Bitstream;
+  let serverResponseService: jasmine.SpyObj<ServerResponseService>;
+  let signpostingDataService: jasmine.SpyObj<SignpostingDataService>;
+
+  const mocklink = {
+    href: 'http://test.org',
+    rel: 'test',
+    type: 'test'
+  };
+
+  const mocklink2 = {
+    href: 'http://test2.org',
+    rel: 'test',
+    type: 'test'
+  };
 
   function init() {
     authService = jasmine.createSpyObj('authService', {
@@ -44,8 +61,8 @@ describe('BitstreamDownloadPageComponent', () => {
     bitstream = Object.assign(new Bitstream(), {
       uuid: 'bitstreamUuid',
       _links: {
-        content: {href: 'bitstream-content-link'},
-        self: {href: 'bitstream-self-link'},
+        content: { href: 'bitstream-content-link' },
+        self: { href: 'bitstream-self-link' },
       }
     });
 
@@ -54,10 +71,21 @@ describe('BitstreamDownloadPageComponent', () => {
         bitstream: createSuccessfulRemoteDataObject(
           bitstream
         )
+      }),
+      params: observableOf({
+        id: 'testid'
       })
     };
 
     router = jasmine.createSpyObj('router', ['navigateByUrl']);
+
+    serverResponseService = jasmine.createSpyObj('ServerResponseService', {
+      setHeader: jasmine.createSpy('setHeader'),
+    });
+
+    signpostingDataService = jasmine.createSpyObj('SignpostingDataService', {
+      getLinks: observableOf([mocklink, mocklink2])
+    });
   }
 
   function initTestbed() {
@@ -65,12 +93,15 @@ describe('BitstreamDownloadPageComponent', () => {
       imports: [CommonModule, TranslateModule.forRoot()],
       declarations: [BitstreamDownloadPageComponent],
       providers: [
-        {provide: ActivatedRoute, useValue: activatedRoute},
-        {provide: Router, useValue: router},
-        {provide: AuthorizationDataService, useValue: authorizationService},
-        {provide: AuthService, useValue: authService},
-        {provide: FileService, useValue: fileService},
-        {provide: HardRedirectService, useValue: hardRedirectService},
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: Router, useValue: router },
+        { provide: AuthorizationDataService, useValue: authorizationService },
+        { provide: AuthService, useValue: authService },
+        { provide: FileService, useValue: fileService },
+        { provide: HardRedirectService, useValue: hardRedirectService },
+        { provide: ServerResponseService, useValue: serverResponseService },
+        { provide: SignpostingDataService, useValue: signpostingDataService },
+        { provide: PLATFORM_ID, useValue: 'server' }
       ]
     })
       .compileComponents();
@@ -107,6 +138,9 @@ describe('BitstreamDownloadPageComponent', () => {
       it('should redirect to the content link', () => {
         expect(hardRedirectService.redirect).toHaveBeenCalledWith('bitstream-content-link');
       });
+      it('should add the signposting links', () => {
+        expect(serverResponseService.setHeader).toHaveBeenCalled();
+      });
     });
     describe('when the user is authorized and logged in', () => {
       beforeEach(waitForAsync(() => {
@@ -134,7 +168,7 @@ describe('BitstreamDownloadPageComponent', () => {
         fixture.detectChanges();
       });
       it('should navigate to the forbidden route', () => {
-        expect(router.navigateByUrl).toHaveBeenCalledWith(getForbiddenRoute(), {skipLocationChange: true});
+        expect(router.navigateByUrl).toHaveBeenCalledWith(getForbiddenRoute(), { skipLocationChange: true });
       });
     });
     describe('when the user is not authorized and not logged in', () => {

src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { filter, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
-import { getRemoteDataPayload} from '../../core/shared/operators';
+import { getRemoteDataPayload } from '../../core/shared/operators';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
@@ -13,8 +13,11 @@ import { HardRedirectService } from '../../core/services/hard-redirect.service';
 import { getForbiddenRoute } from '../../app-routing-paths';
 import { RemoteData } from '../../core/data/remote-data';
 import { redirectOn4xx } from '../../core/shared/authorized.operators';
-import { Location } from '@angular/common';
+import { isPlatformServer, Location } from '@angular/common';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { SignpostingDataService } from '../../core/data/signposting-data.service';
+import { ServerResponseService } from '../../core/services/server-response.service';
+import { SignpostingLink } from '../../core/data/signposting-links.model';
 
 @Component({
   selector: 'ds-bitstream-download-page',
@@ -28,7 +31,6 @@ export class BitstreamDownloadPageComponent implements OnInit {
   bitstream$: Observable<Bitstream>;
   bitstreamRD$: Observable<RemoteData<Bitstream>>;
 
-
   constructor(
     private route: ActivatedRoute,
     protected router: Router,
@@ -38,8 +40,11 @@ export class BitstreamDownloadPageComponent implements OnInit {
     private hardRedirectService: HardRedirectService,
     private location: Location,
     public dsoNameService: DSONameService,
+    private signpostingDataService: SignpostingDataService,
+    private responseService: ServerResponseService,
+    @Inject(PLATFORM_ID) protected platformId: string
   ) {
-
+    this.initPageLinks();
   }
 
   back(): void {
@@ -89,4 +94,25 @@ export class BitstreamDownloadPageComponent implements OnInit {
       }
     });
   }
+
+  /**
+   * Create page links if any are retrieved by signposting endpoint
+   *
+   * @private
+   */
+  private initPageLinks(): void {
+    if (isPlatformServer(this.platformId)) {
+      this.route.params.subscribe(params => {
+        this.signpostingDataService.getLinks(params.id).pipe(take(1)).subscribe((signpostingLinks: SignpostingLink[]) => {
+          let links = '';
+
+          signpostingLinks.forEach((link: SignpostingLink) => {
+            links = links + (isNotEmpty(links) ? ', ' : '') + `<${link.href}> ; rel="${link.rel}"` + (isNotEmpty(link.type) ? ` ; type="${link.type}" ` : ' ');
+          });
+
+          this.responseService.setHeader('Link', links);
+        });
+      });
+    }
+  }
 }

src/app/bitstream-page/bitstream-page-routing.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { EditBitstreamPageComponent } from './edit-bitstream-page/edit-bitstream-page.component';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 import { BitstreamPageResolver } from './bitstream-page.resolver';
 import { BitstreamDownloadPageComponent } from './bitstream-download-page/bitstream-download-page.component';
@@ -13,6 +12,7 @@ import { LegacyBitstreamUrlResolver } from './legacy-bitstream-url.resolver';
 import { BitstreamBreadcrumbResolver } from '../core/breadcrumbs/bitstream-breadcrumb.resolver';
 import { BitstreamBreadcrumbsService } from '../core/breadcrumbs/bitstream-breadcrumbs.service';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { ThemedEditBitstreamPageComponent } from './edit-bitstream-page/themed-edit-bitstream-page.component';
 
 const EDIT_BITSTREAM_PATH = ':id/edit';
 const EDIT_BITSTREAM_AUTHORIZATIONS_PATH = ':id/authorizations';
@@ -49,7 +49,7 @@ const EDIT_BITSTREAM_AUTHORIZATIONS_PATH = ':id/authorizations';
       },
       {
         path: EDIT_BITSTREAM_PATH,
-        component: EditBitstreamPageComponent,
+        component: ThemedEditBitstreamPageComponent,
         resolve: {
           bitstream: BitstreamPageResolver,
           breadcrumb: BitstreamBreadcrumbResolver,

src/app/bitstream-page/bitstream-page.module.ts

@@ -7,6 +7,7 @@ import { BitstreamAuthorizationsComponent } from './bitstream-authorizations/bit
 import { FormModule } from '../shared/form/form.module';
 import { ResourcePoliciesModule } from '../shared/resource-policies/resource-policies.module';
 import { BitstreamDownloadPageComponent } from './bitstream-download-page/bitstream-download-page.component';
+import { ThemedEditBitstreamPageComponent } from './edit-bitstream-page/themed-edit-bitstream-page.component';
 
 /**
  * This module handles all components that are necessary for Bitstream related pages
@@ -22,6 +23,7 @@ import { BitstreamDownloadPageComponent } from './bitstream-download-page/bitstr
   declarations: [
     BitstreamAuthorizationsComponent,
     EditBitstreamPageComponent,
+    ThemedEditBitstreamPageComponent,
     BitstreamDownloadPageComponent,
   ]
 })

src/app/bitstream-page/bitstream-page.resolver.ts

@@ -12,7 +12,7 @@ import { getFirstCompletedRemoteData } from '../core/shared/operators';
  * Requesting them as embeds will limit the number of requests
  */
  export const BITSTREAM_PAGE_LINKS_TO_FOLLOW: FollowLinkConfig<Bitstream>[] = [
-  followLink('bundle', {}, followLink('item')),
+  followLink('bundle', {}, followLink('primaryBitstream'), followLink('item')),
   followLink('format')
 ];
 

src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts

@@ -24,6 +24,7 @@ import { createPaginatedList } from '../../shared/testing/utils.test';
 import { Item } from '../../core/shared/item.model';
 import { MetadataValueFilter } from '../../core/shared/metadata.models';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { PrimaryBitstreamService } from '../../core/data/primary-bitstream.service';
 
 const infoNotification: INotification = new Notification('id', NotificationType.Info, 'info');
 const warningNotification: INotification = new Notification('id', NotificationType.Warning, 'warning');
@@ -32,19 +33,27 @@ const successNotification: INotification = new Notification('id', NotificationTy
 let notificationsService: NotificationsService;
 let formService: DynamicFormService;
 let bitstreamService: BitstreamDataService;
+let primaryBitstreamService: PrimaryBitstreamService;
 let bitstreamFormatService: BitstreamFormatDataService;
 let dsoNameService: DSONameService;
 let bitstream: Bitstream;
+let bitstreamID: string;
 let selectedFormat: BitstreamFormat;
 let allFormats: BitstreamFormat[];
 let router: Router;
-
+let currentPrimary: string;
+let differentPrimary: string;
+let bundle;
 let comp: EditBitstreamPageComponent;
 let fixture: ComponentFixture<EditBitstreamPageComponent>;
 
 describe('EditBitstreamPageComponent', () => {
 
   beforeEach(() => {
+    bitstreamID = 'current-bitstream-id';
+    currentPrimary = bitstreamID;
+    differentPrimary = '12345-abcde-54321-edcba';
+
     allFormats = [
       Object.assign({
         id: '1',
@@ -53,7 +62,7 @@ describe('EditBitstreamPageComponent', () => {
         supportLevel: BitstreamFormatSupportLevel.Unknown,
         mimetype: 'application/octet-stream',
         _links: {
-          self: {href: 'format-selflink-1'}
+          self: { href: 'format-selflink-1' }
         }
       }),
       Object.assign({
@@ -63,7 +72,7 @@ describe('EditBitstreamPageComponent', () => {
         supportLevel: BitstreamFormatSupportLevel.Known,
         mimetype: 'image/png',
         _links: {
-          self: {href: 'format-selflink-2'}
+          self: { href: 'format-selflink-2' }
         }
       }),
       Object.assign({
@@ -73,7 +82,7 @@ describe('EditBitstreamPageComponent', () => {
         supportLevel: BitstreamFormatSupportLevel.Known,
         mimetype: 'image/gif',
         _links: {
-          self: {href: 'format-selflink-3'}
+          self: { href: 'format-selflink-3' }
         }
       })
     ] as BitstreamFormat[];
@@ -103,15 +112,52 @@ describe('EditBitstreamPageComponent', () => {
         success: successNotification
       }
     );
+
+    bundle = {
+      _links: {
+        primaryBitstream: {
+          href: 'bundle-selflink'
+        }
+      },
+      item: createSuccessfulRemoteDataObject$(Object.assign(new Item(), {
+        uuid: 'some-uuid',
+        firstMetadataValue(keyOrKeys: string | string[], valueFilter?: MetadataValueFilter): string {
+          return undefined;
+        },
+      }))
+    };
+
+    const result = createSuccessfulRemoteDataObject$(bundle);
+    primaryBitstreamService = jasmine.createSpyObj('PrimaryBitstreamService',
+    {
+      put: result,
+      create: result,
+      delete: result,
+    });
+
   });
 
   describe('EditBitstreamPageComponent no IIIF fields', () => {
 
     beforeEach(waitForAsync(() => {
-
+      bundle = {
+        _links: {
+          primaryBitstream: {
+            href: 'bundle-selflink'
+          }
+        },
+        item: createSuccessfulRemoteDataObject$(Object.assign(new Item(), {
+          uuid: 'some-uuid',
+          firstMetadataValue(keyOrKeys: string | string[], valueFilter?: MetadataValueFilter): string {
+            return undefined;
+          },
+        }))
+      };
       const bundleName = 'ORIGINAL';
 
       bitstream = Object.assign(new Bitstream(), {
+        uuid: bitstreamID,
+        id: bitstreamID,
         metadata: {
           'dc.description': [
             {
@@ -128,17 +174,11 @@ describe('EditBitstreamPageComponent', () => {
         _links: {
           self: 'bitstream-selflink'
         },
-        bundle: createSuccessfulRemoteDataObject$({
-          item: createSuccessfulRemoteDataObject$(Object.assign(new Item(), {
-            uuid: 'some-uuid',
-            firstMetadataValue(keyOrKeys: string | string[], valueFilter?: MetadataValueFilter): string {
-              return undefined;
-            },
-          }))
-        })
+        bundle: createSuccessfulRemoteDataObject$(bundle)
       });
       bitstreamService = jasmine.createSpyObj('bitstreamService', {
         findById: createSuccessfulRemoteDataObject$(bitstream),
+        findByHref: createSuccessfulRemoteDataObject$(bitstream),
         update: createSuccessfulRemoteDataObject$(bitstream),
         updateFormat: createSuccessfulRemoteDataObject$(bitstream),
         commitUpdates: {},
@@ -155,17 +195,19 @@ describe('EditBitstreamPageComponent', () => {
         imports: [TranslateModule.forRoot(), RouterTestingModule],
         declarations: [EditBitstreamPageComponent, FileSizePipe, VarDirective],
         providers: [
-          {provide: NotificationsService, useValue: notificationsService},
-          {provide: DynamicFormService, useValue: formService},
-          {provide: ActivatedRoute,
+          { provide: NotificationsService, useValue: notificationsService },
+          { provide: DynamicFormService, useValue: formService },
+          {
+            provide: ActivatedRoute,
             useValue: {
-              data: observableOf({bitstream: createSuccessfulRemoteDataObject(bitstream)}),
-              snapshot: {queryParams: {}}
+              data: observableOf({ bitstream: createSuccessfulRemoteDataObject(bitstream) }),
+              snapshot: { queryParams: {} }
             }
           },
-          {provide: BitstreamDataService, useValue: bitstreamService},
-          {provide: DSONameService, useValue: dsoNameService},
-          {provide: BitstreamFormatDataService, useValue: bitstreamFormatService},
+          { provide: BitstreamDataService, useValue: bitstreamService },
+          { provide: DSONameService, useValue: dsoNameService },
+          { provide: BitstreamFormatDataService, useValue: bitstreamFormatService },
+          { provide: PrimaryBitstreamService, useValue: primaryBitstreamService },
           ChangeDetectorRef
         ],
         schemas: [NO_ERRORS_SCHEMA]
@@ -203,6 +245,27 @@ describe('EditBitstreamPageComponent', () => {
       it('should put the \"New Format\" input on invisible', () => {
         expect(comp.formLayout.newFormat.grid.host).toContain('invisible');
       });
+      describe('when the bitstream is the primary bitstream on the bundle', () => {
+        beforeEach(() => {
+          (comp as any).primaryBitstreamUUID = currentPrimary;
+          comp.setForm();
+          rawForm = comp.formGroup.getRawValue();
+
+        });
+        it('should enable the primary bitstream toggle', () => {
+          expect(rawForm.fileNamePrimaryContainer.primaryBitstream).toEqual(true);
+        });
+      });
+      describe('when the bitstream is not the primary bitstream on the bundle', () => {
+        beforeEach(() => {
+          (comp as any).primaryBitstreamUUID = differentPrimary;
+          comp.setForm();
+          rawForm = comp.formGroup.getRawValue();
+        });
+        it('should disable the primary bitstream toggle', () => {
+          expect(rawForm.fileNamePrimaryContainer.primaryBitstream).toEqual(false);
+        });
+      });
     });
 
     describe('when an unknown format is selected', () => {
@@ -216,6 +279,83 @@ describe('EditBitstreamPageComponent', () => {
     });
 
     describe('onSubmit', () => {
+      describe('when the primaryBitstream changed', () => {
+        describe('to the current bitstream', () => {
+          beforeEach(() => {
+            const rawValue = Object.assign(comp.formGroup.getRawValue(), { fileNamePrimaryContainer: { primaryBitstream: true } });
+            spyOn(comp.formGroup, 'getRawValue').and.returnValue(rawValue);
+          });
+
+          describe('from a different primary bitstream', () => {
+            beforeEach(() => {
+              (comp as any).primaryBitstreamUUID = differentPrimary;
+              comp.onSubmit();
+            });
+
+            it('should call put with the correct bitstream on the PrimaryBitstreamService', () => {
+              expect(primaryBitstreamService.put).toHaveBeenCalledWith(jasmine.objectContaining({uuid: currentPrimary}), bundle);
+            });
+          });
+
+          describe('from no primary bitstream', () => {
+            beforeEach(() => {
+              (comp as any).primaryBitstreamUUID = null;
+              comp.onSubmit();
+            });
+
+            it('should call create with the correct bitstream on the PrimaryBitstreamService', () => {
+              expect(primaryBitstreamService.create).toHaveBeenCalledWith(jasmine.objectContaining({uuid: currentPrimary}), bundle);
+            });
+          });
+        });
+        describe('to no primary bitstream', () => {
+          beforeEach(() => {
+            const rawValue = Object.assign(comp.formGroup.getRawValue(), { fileNamePrimaryContainer: { primaryBitstream: false } });
+            spyOn(comp.formGroup, 'getRawValue').and.returnValue(rawValue);
+          });
+
+          describe('from the current bitstream', () => {
+            beforeEach(() => {
+              (comp as any).primaryBitstreamUUID = currentPrimary;
+              comp.onSubmit();
+            });
+
+            it('should call delete on the PrimaryBitstreamService', () => {
+              expect(primaryBitstreamService.delete).toHaveBeenCalledWith(jasmine.objectContaining(bundle));
+            });
+          });
+        });
+      });
+      describe('when the primaryBitstream did not change', () => {
+        describe('the current bitstream stayed the primary bitstream', () => {
+          beforeEach(() => {
+            const rawValue = Object.assign(comp.formGroup.getRawValue(), { fileNamePrimaryContainer: { primaryBitstream: true } });
+            spyOn(comp.formGroup, 'getRawValue').and.returnValue(rawValue);
+            (comp as any).primaryBitstreamUUID = currentPrimary;
+            comp.onSubmit();
+          });
+          it('should not call anything on the PrimaryBitstreamService', () => {
+            expect(primaryBitstreamService.put).not.toHaveBeenCalled();
+            expect(primaryBitstreamService.delete).not.toHaveBeenCalled();
+            expect(primaryBitstreamService.create).not.toHaveBeenCalled();
+          });
+        });
+
+        describe('the bitstream was not and did not become the primary bitstream', () => {
+          beforeEach(() => {
+            const rawValue = Object.assign(comp.formGroup.getRawValue(), { fileNamePrimaryContainer: { primaryBitstream: false } });
+            spyOn(comp.formGroup, 'getRawValue').and.returnValue(rawValue);
+            (comp as any).primaryBitstreamUUID = differentPrimary;
+            comp.onSubmit();
+          });
+          it('should not call anything on the PrimaryBitstreamService', () => {
+            expect(primaryBitstreamService.put).not.toHaveBeenCalled();
+            expect(primaryBitstreamService.delete).not.toHaveBeenCalled();
+            expect(primaryBitstreamService.create).not.toHaveBeenCalled();
+          });
+        });
+      });
+
       describe('when selected format hasn\'t changed', () => {
         beforeEach(() => {
           comp.onSubmit();
@@ -261,20 +401,13 @@ describe('EditBitstreamPageComponent', () => {
         expect(comp.navigateToItemEditBitstreams).toHaveBeenCalled();
       });
     });
-    describe('when navigateToItemEditBitstreams is called, and the component has an itemId', () => {
+    describe('when navigateToItemEditBitstreams is called', () => {
       it('should redirect to the item edit page on the bitstreams tab with the itemId from the component', () => {
         comp.itemId = 'some-uuid1';
         comp.navigateToItemEditBitstreams();
         expect(router.navigate).toHaveBeenCalledWith([getEntityEditRoute(null, 'some-uuid1'), 'bitstreams']);
       });
     });
-    describe('when navigateToItemEditBitstreams is called, and the component does not have an itemId', () => {
-      it('should redirect to the item edit page on the bitstreams tab with the itemId from the bundle links ', () => {
-        comp.itemId = undefined;
-        comp.navigateToItemEditBitstreams();
-        expect(router.navigate).toHaveBeenCalledWith([getEntityEditRoute(null, 'some-uuid'), 'bitstreams']);
-      });
-    });
   });
 
   describe('EditBitstreamPageComponent with IIIF fields', () => {
@@ -321,16 +454,22 @@ describe('EditBitstreamPageComponent', () => {
           self: 'bitstream-selflink'
         },
         bundle: createSuccessfulRemoteDataObject$({
+          _links: {
+            primaryBitstream: {
+              href: 'bundle-selflink'
+            }
+          },
           item: createSuccessfulRemoteDataObject$(Object.assign(new Item(), {
             uuid: 'some-uuid',
             firstMetadataValue(keyOrKeys: string | string[], valueFilter?: MetadataValueFilter): string {
               return 'True';
             }
           }))
-        })
+        }),
       });
       bitstreamService = jasmine.createSpyObj('bitstreamService', {
         findById: createSuccessfulRemoteDataObject$(bitstream),
+        findByHref: createSuccessfulRemoteDataObject$(bitstream),
         update: createSuccessfulRemoteDataObject$(bitstream),
         updateFormat: createSuccessfulRemoteDataObject$(bitstream),
         commitUpdates: {},
@@ -357,6 +496,7 @@ describe('EditBitstreamPageComponent', () => {
           {provide: BitstreamDataService, useValue: bitstreamService},
           {provide: DSONameService, useValue: dsoNameService},
           {provide: BitstreamFormatDataService, useValue: bitstreamFormatService},
+          { provide: PrimaryBitstreamService, useValue: primaryBitstreamService },
           ChangeDetectorRef
         ],
         schemas: [NO_ERRORS_SCHEMA]
@@ -371,7 +511,6 @@ describe('EditBitstreamPageComponent', () => {
       spyOn(router, 'navigate');
     });
 
-
     describe('on startup', () => {
       let rawForm;
 
@@ -440,16 +579,22 @@ describe('EditBitstreamPageComponent', () => {
             self: 'bitstream-selflink'
           },
           bundle: createSuccessfulRemoteDataObject$({
+            _links: {
+              primaryBitstream: {
+                href: 'bundle-selflink'
+              }
+            },
             item: createSuccessfulRemoteDataObject$(Object.assign(new Item(), {
               uuid: 'some-uuid',
               firstMetadataValue(keyOrKeys: string | string[], valueFilter?: MetadataValueFilter): string {
                 return 'True';
               }
             }))
-          })
+          }),
         });
         bitstreamService = jasmine.createSpyObj('bitstreamService', {
           findById: createSuccessfulRemoteDataObject$(bitstream),
+          findByHref: createSuccessfulRemoteDataObject$(bitstream),
           update: createSuccessfulRemoteDataObject$(bitstream),
           updateFormat: createSuccessfulRemoteDataObject$(bitstream),
           commitUpdates: {},
@@ -475,6 +620,7 @@ describe('EditBitstreamPageComponent', () => {
             {provide: BitstreamDataService, useValue: bitstreamService},
             {provide: DSONameService, useValue: dsoNameService},
             {provide: BitstreamFormatDataService, useValue: bitstreamFormatService},
+            { provide: PrimaryBitstreamService, useValue: primaryBitstreamService },
             ChangeDetectorRef
           ],
           schemas: [NO_ERRORS_SCHEMA]
@@ -496,7 +642,7 @@ describe('EditBitstreamPageComponent', () => {
           rawForm = comp.formGroup.getRawValue();
         });
 
-        it('should NOT set isIIIF to true', () => {
+        it('should NOT set is IIIF to true', () => {
           expect(comp.isIIIF).toBeFalse();
         });
         it('should put the \"IIIF Label\" input not to be shown', () => {

src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts

@@ -1,57 +1,31 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  OnInit
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { ActivatedRoute, Router } from '@angular/router';
-import { map, mergeMap, switchMap } from 'rxjs/operators';
-import {
-  combineLatest,
-  combineLatest as observableCombineLatest,
-  Observable,
-  of as observableOf,
-  Subscription
-} from 'rxjs';
-import {
-  DynamicFormControlModel,
-  DynamicFormGroupModel,
-  DynamicFormLayout,
-  DynamicFormService,
-  DynamicInputModel,
-  DynamicSelectModel
-} from '@ng-dynamic-forms/core';
+import { filter, map, switchMap, tap } from 'rxjs/operators';
+import { combineLatest, combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
+import { DynamicFormControlModel, DynamicFormGroupModel, DynamicFormLayout, DynamicFormService, DynamicInputModel, DynamicSelectModel } from '@ng-dynamic-forms/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
 import cloneDeep from 'lodash/cloneDeep';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
-import {
-  getAllSucceededRemoteDataPayload,
-  getFirstCompletedRemoteData,
-  getFirstSucceededRemoteData,
-  getFirstSucceededRemoteDataPayload,
-  getRemoteDataPayload
-} from '../../core/shared/operators';
+import { getAllSucceededRemoteDataPayload, getFirstCompletedRemoteData, getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload, getRemoteDataPayload } from '../../core/shared/operators';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service';
 import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
 import { BitstreamFormatSupportLevel } from '../../core/shared/bitstream-format-support-level';
-import { hasValue, isNotEmpty, isEmpty } from '../../shared/empty.util';
+import { hasValue, hasValueOperator, isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { Metadata } from '../../core/shared/metadata.utils';
 import { Location } from '@angular/common';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
-import { getEntityEditRoute, getItemEditRoute } from '../../item-page/item-page-routing-paths';
+import { getEntityEditRoute } from '../../item-page/item-page-routing-paths';
 import { Bundle } from '../../core/shared/bundle.model';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { Item } from '../../core/shared/item.model';
-import {
-  DsDynamicInputModel
-} from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import { DsDynamicInputModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model';
 import { DsDynamicTextAreaModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model';
+import { PrimaryBitstreamService } from '../../core/data/primary-bitstream.service';
 
 @Component({
   selector: 'ds-edit-bitstream-page',
@@ -76,6 +50,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    */
   bitstreamFormatsRD$: Observable<RemoteData<PaginatedList<BitstreamFormat>>>;
 
+  /**
+   * The UUID of the primary bitstream for this bundle
+   */
+  primaryBitstreamUUID: string;
+
   /**
    * The bitstream to edit
    */
@@ -191,19 +170,19 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    * The Dynamic Input Model for the iiif label
    */
   iiifLabelModel = new DsDynamicInputModel({
-    hasSelectableMetadata: false, metadataFields: [], repeatable: false, submissionId: '',
-    id: 'iiifLabel',
-    name: 'iiifLabel'
-  },
+      hasSelectableMetadata: false, metadataFields: [], repeatable: false, submissionId: '',
+      id: 'iiifLabel',
+      name: 'iiifLabel'
+    },
     {
-        grid: {
-          host: 'col col-lg-6 d-inline-block'
-        }
+      grid: {
+        host: 'col col-lg-6 d-inline-block'
+      }
     });
   iiifLabelContainer = new DynamicFormGroupModel({
     id: 'iiifLabelContainer',
     group: [this.iiifLabelModel]
-  },{
+  }, {
     grid: {
       host: 'form-row'
     }
@@ -213,7 +192,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     hasSelectableMetadata: false, metadataFields: [], repeatable: false, submissionId: '',
     id: 'iiifToc',
     name: 'iiifToc',
-  },{
+  }, {
     grid: {
       host: 'col col-lg-6 d-inline-block'
     }
@@ -221,7 +200,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   iiifTocContainer = new DynamicFormGroupModel({
     id: 'iiifTocContainer',
     group: [this.iiifTocModel]
-  },{
+  }, {
     grid: {
       host: 'form-row'
     }
@@ -231,7 +210,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     hasSelectableMetadata: false, metadataFields: [], repeatable: false, submissionId: '',
     id: 'iiifWidth',
     name: 'iiifWidth',
-  },{
+  }, {
     grid: {
       host: 'col col-lg-6 d-inline-block'
     }
@@ -239,7 +218,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   iiifWidthContainer = new DynamicFormGroupModel({
     id: 'iiifWidthContainer',
     group: [this.iiifWidthModel]
-  },{
+  }, {
     grid: {
       host: 'form-row'
     }
@@ -249,7 +228,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     hasSelectableMetadata: false, metadataFields: [], repeatable: false, submissionId: '',
     id: 'iiifHeight',
     name: 'iiifHeight'
-  },{
+  }, {
     grid: {
       host: 'col col-lg-6 d-inline-block'
     }
@@ -257,7 +236,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   iiifHeightContainer = new DynamicFormGroupModel({
     id: 'iiifHeightContainer',
     group: [this.iiifHeightModel]
-  },{
+  }, {
     grid: {
       host: 'form-row'
     }
@@ -280,11 +259,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
         this.fileNameModel,
         this.primaryBitstreamModel
       ]
-    },{
-        grid: {
-          host: 'form-row'
-        }
-      }),
+    }, {
+      grid: {
+        host: 'form-row'
+      }
+    }),
     new DynamicFormGroupModel({
       id: 'descriptionContainer',
       group: [
@@ -316,7 +295,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     },
     primaryBitstream: {
       grid: {
-        host: 'col col-sm-4 d-inline-block switch'
+        host: 'col col-sm-4 d-inline-block switch border-0'
       }
     },
     description: {
@@ -380,13 +359,17 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    */
   isIIIF = false;
 
-
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    * @type {Array}
    */
   protected subs: Subscription[] = [];
 
+  /**
+   * The parent bundle containing the Bitstream
+   * @private
+   */
+  private bundle: Bundle;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
@@ -397,7 +380,9 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
               private bitstreamService: BitstreamDataService,
               public dsoNameService: DSONameService,
               private notificationsService: NotificationsService,
-              private bitstreamFormatService: BitstreamFormatDataService) {
+              private bitstreamFormatService: BitstreamFormatDataService,
+              private primaryBitstreamService: PrimaryBitstreamService,
+              ) {
   }
 
   /**
@@ -410,35 +395,59 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
 
     this.itemId = this.route.snapshot.queryParams.itemId;
     this.entityType = this.route.snapshot.queryParams.entityType;
-    this.bitstreamRD$ = this.route.data.pipe(map((data) => data.bitstream));
+    this.bitstreamRD$ = this.route.data.pipe(map((data: any) => data.bitstream));
     this.bitstreamFormatsRD$ = this.bitstreamFormatService.findAll(this.findAllOptions);
 
     const bitstream$ = this.bitstreamRD$.pipe(
       getFirstSucceededRemoteData(),
-      getRemoteDataPayload()
+      getRemoteDataPayload(),
     );
 
     const allFormats$ = this.bitstreamFormatsRD$.pipe(
       getFirstSucceededRemoteData(),
-      getRemoteDataPayload()
+      getRemoteDataPayload(),
     );
 
+    const bundle$ = bitstream$.pipe(
+      switchMap((bitstream: Bitstream) => bitstream.bundle),
+      getFirstSucceededRemoteDataPayload(),
+    );
+
+    const primaryBitstream$ = bundle$.pipe(
+      hasValueOperator(),
+      switchMap((bundle: Bundle) => this.bitstreamService.findByHref(bundle._links.primaryBitstream.href)),
+      getFirstSucceededRemoteDataPayload(),
+    );
+
+    const item$ = bundle$.pipe(
+      switchMap((bundle: Bundle) => bundle.item),
+      getFirstSucceededRemoteDataPayload(),
+    );
     this.subs.push(
       observableCombineLatest(
         bitstream$,
-        allFormats$
-      ).subscribe(([bitstream, allFormats]) => {
-        this.bitstream = bitstream as Bitstream;
-        this.formats = allFormats.page;
-        this.setIiifStatus(this.bitstream);
-      })
+        allFormats$,
+        bundle$,
+        primaryBitstream$,
+        item$,
+      ).pipe()
+        .subscribe(([bitstream, allFormats, bundle, primaryBitstream, item]) => {
+          this.bitstream = bitstream as Bitstream;
+          this.formats = allFormats.page;
+          this.bundle = bundle;
+          // hasValue(primaryBitstream) because if there's no primaryBitstream on the bundle it will
+          // be a success response, but empty
+          this.primaryBitstreamUUID = hasValue(primaryBitstream) ? primaryBitstream.uuid : null;
+          this.itemId = item.uuid;
+          this.setIiifStatus(this.bitstream);
+        })
     );
 
     this.subs.push(
       this.translate.onLangChange
         .subscribe(() => {
-        this.updateFieldTranslations();
-      })
+          this.updateFieldTranslations();
+        })
     );
   }
 
@@ -460,7 +469,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     this.formGroup.patchValue({
       fileNamePrimaryContainer: {
         fileName: bitstream.name,
-        primaryBitstream: false
+        primaryBitstream: this.primaryBitstreamUUID === bitstream.uuid
       },
       descriptionContainer: {
         description: bitstream.firstMetadataValue('dc.description')
@@ -571,9 +580,56 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     const updatedBitstream = this.formToBitstream(updatedValues);
     const selectedFormat = this.formats.find((f: BitstreamFormat) => f.id === updatedValues.formatContainer.selectedFormat);
     const isNewFormat = selectedFormat.id !== this.originalFormat.id;
+    const isPrimary = updatedValues.fileNamePrimaryContainer.primaryBitstream;
+    const wasPrimary = this.primaryBitstreamUUID === this.bitstream.uuid;
 
     let bitstream$;
+    let bundle$: Observable<Bundle>;
+    let errorWhileSaving = false;
 
+    if (wasPrimary !== isPrimary) {
+      let bundleRd$: Observable<RemoteData<Bundle>>;
+      if (wasPrimary) {
+        bundleRd$ = this.primaryBitstreamService.delete(this.bundle);
+      } else if (hasValue(this.primaryBitstreamUUID)) {
+        bundleRd$ = this.primaryBitstreamService.put(this.bitstream, this.bundle);
+      } else {
+        bundleRd$ = this.primaryBitstreamService.create(this.bitstream, this.bundle);
+      }
+
+      const completedBundleRd$ = bundleRd$.pipe(getFirstCompletedRemoteData());
+
+      this.subs.push(completedBundleRd$.pipe(
+        filter((bundleRd: RemoteData<Bundle>) => bundleRd.hasFailed)
+      ).subscribe((bundleRd: RemoteData<Bundle>) => {
+        this.notificationsService.error(
+          this.translate.instant(this.NOTIFICATIONS_PREFIX + 'error.primaryBitstream.title'),
+          bundleRd.errorMessage
+        );
+        errorWhileSaving = true;
+      }));
+
+      bundle$ = completedBundleRd$.pipe(
+        map((bundleRd: RemoteData<Bundle>) => {
+          if (bundleRd.hasSucceeded) {
+            return bundleRd.payload;
+          } else {
+            return this.bundle;
+          }
+        })
+      );
+
+      this.subs.push(bundle$.pipe(
+        hasValueOperator(),
+        switchMap((bundle: Bundle) => this.bitstreamService.findByHref(bundle._links.primaryBitstream.href, false)),
+        getFirstSucceededRemoteDataPayload()
+      ).subscribe((bitstream: Bitstream) => {
+        this.primaryBitstreamUUID = hasValue(bitstream) ? bitstream.uuid : null;
+      }));
+
+    } else {
+      bundle$ = observableOf(this.bundle);
+    }
     if (isNewFormat) {
       bitstream$ = this.bitstreamService.updateFormat(this.bitstream, selectedFormat).pipe(
         getFirstCompletedRemoteData(),
@@ -592,7 +648,8 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       bitstream$ = observableOf(this.bitstream);
     }
 
-    bitstream$.pipe(
+    combineLatest([bundle$, bitstream$]).pipe(
+      tap(([bundle]) => this.bundle = bundle),
       switchMap(() => {
         return this.bitstreamService.update(updatedBitstream).pipe(
           getFirstSucceededRemoteDataPayload()
@@ -604,7 +661,9 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
         this.translate.instant(this.NOTIFICATIONS_PREFIX + 'saved.title'),
         this.translate.instant(this.NOTIFICATIONS_PREFIX + 'saved.content')
       );
-      this.navigateToItemEditBitstreams();
+      if (!errorWhileSaving) {
+        this.navigateToItemEditBitstreams();
+      }
     });
   }
 
@@ -615,8 +674,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   formToBitstream(rawForm): Bitstream {
     const updatedBitstream = cloneDeep(this.bitstream);
     const newMetadata = updatedBitstream.metadata;
-    // TODO: Set bitstream to primary when supported
-    const primary = rawForm.fileNamePrimaryContainer.primaryBitstream;
     Metadata.setFirstValue(newMetadata, 'dc.title', rawForm.fileNamePrimaryContainer.fileName);
     if (isEmpty(rawForm.descriptionContainer.description)) {
       delete newMetadata['dc.description'];
@@ -633,11 +690,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       } else {
         Metadata.setFirstValue(newMetadata, this.IIIF_LABEL_METADATA, rawForm.iiifLabelContainer.iiifLabel);
       }
-     if (isEmpty(rawForm.iiifTocContainer.iiifToc)) {
-       delete newMetadata[this.IIIF_TOC_METADATA];
-     } else {
+      if (isEmpty(rawForm.iiifTocContainer.iiifToc)) {
+        delete newMetadata[this.IIIF_TOC_METADATA];
+      } else {
         Metadata.setFirstValue(newMetadata, this.IIIF_TOC_METADATA, rawForm.iiifTocContainer.iiifToc);
-     }
+      }
       if (isEmpty(rawForm.iiifWidthContainer.iiifWidth)) {
         delete newMetadata[this.IMAGE_WIDTH_METADATA];
       } else {
@@ -668,15 +725,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    * otherwise retrieve the item ID based on the owning bundle's link
    */
   navigateToItemEditBitstreams() {
-    if (hasValue(this.itemId)) {
-      this.router.navigate([getEntityEditRoute(this.entityType, this.itemId), 'bitstreams']);
-    } else {
-      this.bitstream.bundle.pipe(getFirstSucceededRemoteDataPayload(),
-          mergeMap((bundle: Bundle) => bundle.item.pipe(getFirstSucceededRemoteDataPayload())))
-          .subscribe((item) => {
-            this.router.navigate(([getItemEditRoute(item), 'bitstreams']));
-          });
-    }
+    this.router.navigate([getEntityEditRoute(this.entityType, this.itemId), 'bitstreams']);
   }
 
   /**
@@ -701,11 +750,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     const isEnabled$ = this.bitstream.bundle.pipe(
       getFirstSucceededRemoteData(),
       map((bundle: RemoteData<Bundle>) => bundle.payload.item.pipe(
-          getFirstSucceededRemoteData(),
-          map((item: RemoteData<Item>) =>
-            (item.payload.firstMetadataValue('dspace.iiif.enabled') &&
-              item.payload.firstMetadataValue('dspace.iiif.enabled').match(regexIIIFItem) !== null)
-      ))));
+        getFirstSucceededRemoteData(),
+        map((item: RemoteData<Item>) =>
+          (item.payload.firstMetadataValue('dspace.iiif.enabled') &&
+            item.payload.firstMetadataValue('dspace.iiif.enabled').match(regexIIIFItem) !== null)
+        ))));
 
     const iiifSub = combineLatest(
       isImage$,

src/app/bitstream-page/edit-bitstream-page/themed-edit-bitstream-page.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { EditBitstreamPageComponent } from './edit-bitstream-page.component';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+
+@Component({
+  selector: 'ds-themed-edit-bitstream-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedEditBitstreamPageComponent extends ThemedComponent<EditBitstreamPageComponent> {
+  protected getComponentName(): string {
+    return 'EditBitstreamPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./edit-bitstream-page.component');
+  }
+}

src/app/breadcrumbs/breadcrumbs.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngVar="(breadcrumbs$ | async) as breadcrumbs">
     <nav *ngIf="(showBreadcrumbs$ | async)" aria-label="breadcrumb" class="nav-breadcrumb">
-        <ol class="container breadcrumb">
+        <ol class="container breadcrumb my-0">
             <ng-container
                     *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
             <ng-container *ngFor="let bc of breadcrumbs; let last = last;">

src/app/breadcrumbs/breadcrumbs.component.scss

@@ -4,9 +4,8 @@
 
 .breadcrumb {
   border-radius: 0;
-  margin-top: calc(-1 * var(--ds-content-spacing));
-  padding-bottom: var(--ds-content-spacing / 3);
-  padding-top: var(--ds-content-spacing / 3);
+  padding-bottom: calc(var(--ds-content-spacing) / 2);
+  padding-top: calc(var(--ds-content-spacing) / 2);
   background-color: var(--ds-breadcrumb-bg);
 }
 

src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts

@@ -89,11 +89,11 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
     const lastItemRD = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
     this.subs.push(
       observableCombineLatest([firstItemRD, lastItemRD]).subscribe(([firstItem, lastItem]) => {
-        let lowerLimit = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
-        let upperLimit = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
-        const options = [];
-        const oneYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
-        const fiveYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
+        let lowerLimit: number = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
+        let upperLimit: number = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
+        const options: number[] = [];
+        const oneYearBreak: number = Math.floor((upperLimit - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
+        const fiveYearBreak: number = Math.floor((upperLimit - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
         if (lowerLimit <= fiveYearBreak) {
           lowerLimit -= 10;
         } else if (lowerLimit <= oneYearBreak) {
@@ -101,7 +101,7 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
         } else {
           lowerLimit -= 1;
         }
-        let i = upperLimit;
+        let i: number = upperLimit;
         while (i > lowerLimit) {
           options.push(i);
           if (i <= fiveYearBreak) {

src/app/browse-by/browse-by-guard.spec.ts

@@ -1,11 +1,12 @@
 import { first } from 'rxjs/operators';
 import { BrowseByGuard } from './browse-by-guard';
 import { of as observableOf } from 'rxjs';
-import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
-import { BrowseDefinition } from '../core/shared/browse-definition.model';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
 import { BrowseByDataType } from './browse-by-switcher/browse-by-decorator';
+import { ValueListBrowseDefinition } from '../core/shared/value-list-browse-definition.model';
 import { DSONameServiceMock } from '../shared/mocks/dso-name.service.mock';
 import { DSONameService } from '../core/breadcrumbs/dso-name.service';
+import { RouterStub } from '../shared/testing/router.stub';
 
 describe('BrowseByGuard', () => {
   describe('canActivate', () => {
@@ -13,6 +14,7 @@ describe('BrowseByGuard', () => {
     let dsoService: any;
     let translateService: any;
     let browseDefinitionService: any;
+    let router: any;
 
     const name = 'An interesting DSO';
     const title = 'Author';
@@ -20,7 +22,7 @@ describe('BrowseByGuard', () => {
     const id = 'author';
     const scope = '1234-65487-12354-1235';
     const value = 'Filter';
-    const browseDefinition = Object.assign(new BrowseDefinition(), { type: BrowseByDataType.Metadata, metadataKeys: ['dc.contributor'] });
+    const browseDefinition = Object.assign(new ValueListBrowseDefinition(), { type: BrowseByDataType.Metadata, metadataKeys: ['dc.contributor'] });
 
     beforeEach(() => {
       dsoService = {
@@ -35,7 +37,9 @@ describe('BrowseByGuard', () => {
         findById: () => createSuccessfulRemoteDataObject$(browseDefinition)
       };
 
-      guard = new BrowseByGuard(dsoService, translateService, browseDefinitionService, new DSONameServiceMock() as DSONameService);
+      router = new RouterStub() as any;
+
+      guard = new BrowseByGuard(dsoService, translateService, browseDefinitionService, new DSONameServiceMock() as DSONameService, router);
     });
 
     it('should return true, and sets up the data correctly, with a scope and value', () => {
@@ -65,6 +69,7 @@ describe('BrowseByGuard', () => {
               value: '"' + value + '"'
             };
             expect(scopedRoute.data).toEqual(result);
+            expect(router.navigate).not.toHaveBeenCalled();
             expect(canActivate).toEqual(true);
           }
         );
@@ -97,6 +102,7 @@ describe('BrowseByGuard', () => {
               value: ''
             };
             expect(scopedNoValueRoute.data).toEqual(result);
+            expect(router.navigate).not.toHaveBeenCalled();
             expect(canActivate).toEqual(true);
           }
         );
@@ -128,9 +134,33 @@ describe('BrowseByGuard', () => {
               value: '"' + value + '"'
             };
             expect(route.data).toEqual(result);
+            expect(router.navigate).not.toHaveBeenCalled();
             expect(canActivate).toEqual(true);
           }
         );
     });
+
+    it('should return false, and sets up the data correctly, without a scope and with a value', () => {
+      jasmine.getEnv().allowRespy(true);
+      spyOn(browseDefinitionService, 'findById').and.returnValue(createFailedRemoteDataObject$());
+      const scopedRoute = {
+        data: {
+          title: field,
+        },
+        params: {
+          id,
+        },
+        queryParams: {
+          scope,
+          value
+        }
+      };
+      guard.canActivate(scopedRoute as any, undefined)
+        .pipe(first())
+        .subscribe((canActivate) => {
+          expect(router.navigate).toHaveBeenCalled();
+          expect(canActivate).toEqual(false);
+        });
+    });
   });
 });

src/app/browse-by/browse-by-guard.ts

@@ -1,15 +1,17 @@
-import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { DSpaceObjectDataService } from '../core/data/dspace-object-data.service';
 import { hasNoValue, hasValue } from '../shared/empty.util';
 import { map, switchMap } from 'rxjs/operators';
-import { getFirstSucceededRemoteDataPayload } from '../core/shared/operators';
+import { getFirstCompletedRemoteData, getFirstSucceededRemoteDataPayload } from '../core/shared/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable, of as observableOf } from 'rxjs';
 import { BrowseDefinitionDataService } from '../core/browse/browse-definition-data.service';
 import { BrowseDefinition } from '../core/shared/browse-definition.model';
 import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 import { DSpaceObject } from '../core/shared/dspace-object.model';
+import { RemoteData } from '../core/data/remote-data';
+import { PAGE_NOT_FOUND_PATH } from '../app-routing-paths';
 
 @Injectable()
 /**
@@ -21,15 +23,19 @@ export class BrowseByGuard implements CanActivate {
               protected translate: TranslateService,
               protected browseDefinitionService: BrowseDefinitionDataService,
               protected dsoNameService: DSONameService,
+              protected router: Router,
   ) {
   }
 
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
     const title = route.data.title;
     const id = route.params.id || route.queryParams.id || route.data.id;
-    let browseDefinition$: Observable<BrowseDefinition>;
+    let browseDefinition$: Observable<BrowseDefinition | undefined>;
     if (hasNoValue(route.data.browseDefinition) && hasValue(id)) {
-      browseDefinition$ = this.browseDefinitionService.findById(id).pipe(getFirstSucceededRemoteDataPayload());
+      browseDefinition$ = this.browseDefinitionService.findById(id).pipe(
+        getFirstCompletedRemoteData(),
+        map((browseDefinitionRD: RemoteData<BrowseDefinition>) => browseDefinitionRD.payload),
+      );
     } else {
       browseDefinition$ = observableOf(route.data.browseDefinition);
     }
@@ -37,19 +43,24 @@ export class BrowseByGuard implements CanActivate {
     const value = route.queryParams.value;
     const metadataTranslated = this.translate.instant(`browse.metadata.${id}`);
     return browseDefinition$.pipe(
-      switchMap((browseDefinition: BrowseDefinition) => {
-        if (hasValue(scope)) {
-          const dso$: Observable<DSpaceObject> = this.dsoService.findById(scope).pipe(getFirstSucceededRemoteDataPayload());
-          return dso$.pipe(
-            map((dso: DSpaceObject) => {
-              const name = this.dsoNameService.getName(dso);
-              route.data = this.createData(title, id, browseDefinition, name, metadataTranslated, value, route);
-              return true;
-            })
-          );
+      switchMap((browseDefinition: BrowseDefinition | undefined) => {
+        if (hasValue(browseDefinition)) {
+          if (hasValue(scope)) {
+            const dso$: Observable<DSpaceObject> = this.dsoService.findById(scope).pipe(getFirstSucceededRemoteDataPayload());
+            return dso$.pipe(
+              map((dso: DSpaceObject) => {
+                const name = this.dsoNameService.getName(dso);
+                route.data = this.createData(title, id, browseDefinition, name, metadataTranslated, value, route);
+                return true;
+              })
+            );
+          } else {
+            route.data = this.createData(title, id, browseDefinition, '', metadataTranslated, value, route);
+            return observableOf(true);
+          }
         } else {
-          route.data = this.createData(title, id, browseDefinition, '', metadataTranslated, value, route);
-          return observableOf(true);
+          void this.router.navigate([PAGE_NOT_FOUND_PATH]);
+          return observableOf(false);
         }
       })
     );

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html

@@ -32,7 +32,7 @@
 
     <section class="comcol-page-browse-section">
     <div class="browse-by-metadata w-100">
-    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+    <ds-themed-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
       title="{{'browse.title' | translate:
       {
         collection: dsoNameService.getName((parent$ | async)?.payload),
@@ -48,7 +48,7 @@
       [startsWithOptions]="startsWithOptions"
       (prev)="goPrev()"
       (next)="goNext()">
-    </ds-browse-by>
+    </ds-themed-browse-by>
     <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
   </div>
   </section>

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts

@@ -161,7 +161,11 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
             this.value = '';
           }
 
-          if (typeof params.startsWith === 'string'){
+          if (params.startsWith === undefined || params.startsWith === '') {
+            this.startsWith = undefined;
+          }
+
+        if (typeof params.startsWith === 'string'){
             this.startsWith = params.startsWith.trim();
           }
 

src/app/browse-by/browse-by-switcher/browse-by-decorator.ts

@@ -26,7 +26,7 @@ const map = new Map();
  * @param browseByType  The type of page
  * @param theme The optional theme for the component
  */
-export function rendersBrowseBy(browseByType: BrowseByDataType, theme = DEFAULT_THEME) {
+export function rendersBrowseBy(browseByType: string, theme = DEFAULT_THEME) {
   return function decorator(component: any) {
     if (hasNoValue(map.get(browseByType))) {
       map.set(browseByType, new Map());

src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts

@@ -3,9 +3,11 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BROWSE_BY_COMPONENT_FACTORY, BrowseByDataType } from './browse-by-decorator';
-import { BrowseDefinition } from '../../core/shared/browse-definition.model';
 import { BehaviorSubject } from 'rxjs';
 import { ThemeService } from '../../shared/theme-support/theme.service';
+import { FlatBrowseDefinition } from '../../core/shared/flat-browse-definition.model';
+import { ValueListBrowseDefinition } from '../../core/shared/value-list-browse-definition.model';
+import { NonHierarchicalBrowseDefinition } from '../../core/shared/non-hierarchical-browse-definition';
 
 describe('BrowseBySwitcherComponent', () => {
   let comp: BrowseBySwitcherComponent;
@@ -13,33 +15,33 @@ describe('BrowseBySwitcherComponent', () => {
 
   const types = [
     Object.assign(
-      new BrowseDefinition(), {
+      new FlatBrowseDefinition(), {
         id: 'title',
         dataType: BrowseByDataType.Title,
       }
     ),
     Object.assign(
-      new BrowseDefinition(), {
+      new FlatBrowseDefinition(), {
         id: 'dateissued',
         dataType: BrowseByDataType.Date,
         metadataKeys: ['dc.date.issued']
       }
     ),
     Object.assign(
-      new BrowseDefinition(), {
+      new ValueListBrowseDefinition(), {
         id: 'author',
         dataType: BrowseByDataType.Metadata,
       }
     ),
     Object.assign(
-      new BrowseDefinition(), {
+      new ValueListBrowseDefinition(), {
         id: 'subject',
         dataType: BrowseByDataType.Metadata,
       }
     ),
   ];
 
-  const data = new BehaviorSubject(createDataWithBrowseDefinition(new BrowseDefinition()));
+  const data = new BehaviorSubject(createDataWithBrowseDefinition(new FlatBrowseDefinition()));
 
   const activatedRouteStub = {
     data
@@ -70,7 +72,7 @@ describe('BrowseBySwitcherComponent', () => {
     comp = fixture.componentInstance;
   }));
 
-  types.forEach((type: BrowseDefinition) => {
+  types.forEach((type: NonHierarchicalBrowseDefinition) => {
     describe(`when switching to a browse-by page for "${type.id}"`, () => {
       beforeEach(() => {
         data.next(createDataWithBrowseDefinition(type));

src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts

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

src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html

@@ -0,0 +1,14 @@
+<div class="container">
+  <div class="mb-3">
+    <ds-vocabulary-treeview [vocabularyOptions]=vocabularyOptions
+                            [multiSelect]="true"
+                            (select)="onSelect($event)"
+                            (deselect)="onDeselect($event)">
+    </ds-vocabulary-treeview>
+  </div>
+  <a class="btn btn-primary"
+     [routerLink]="['/search']"
+     [queryParams]="queryParams"
+     [queryParamsHandling]="'merge'">
+    {{ 'browse.taxonomy.button' | translate }}</a>
+</div>

src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.spec.ts

@@ -0,0 +1,91 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page.component';
+import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
+import { TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { createDataWithBrowseDefinition } from '../browse-by-switcher/browse-by-switcher.component.spec';
+import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+
+describe('BrowseByTaxonomyPageComponent', () => {
+  let component: BrowseByTaxonomyPageComponent;
+  let fixture: ComponentFixture<BrowseByTaxonomyPageComponent>;
+  let themeService: ThemeService;
+  let detail1: VocabularyEntryDetail;
+  let detail2: VocabularyEntryDetail;
+
+  const data = new BehaviorSubject(createDataWithBrowseDefinition(new HierarchicalBrowseDefinition()));
+  const activatedRouteStub = {
+    data
+  };
+
+  beforeEach(async () => {
+    themeService = jasmine.createSpyObj('themeService', {
+      getThemeName: 'dspace',
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [ TranslateModule.forRoot() ],
+      declarations: [ BrowseByTaxonomyPageComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: ThemeService, useValue: themeService },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BrowseByTaxonomyPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    detail1 = new VocabularyEntryDetail();
+    detail2 = new VocabularyEntryDetail();
+    detail1.value = 'HUMANITIES and RELIGION';
+    detail2.value = 'TECHNOLOGY';
+    detail1.id = 'id-1';
+    detail2.id = 'id-2';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should handle select event', () => {
+    component.onSelect(detail1);
+    expect(component.selectedItems.length).toBe(1);
+    expect(component.selectedItems).toContain(detail1);
+    expect(component.selectedItems.length).toBe(1);
+    expect(component.filterValues).toEqual(['HUMANITIES and RELIGION,equals'] );
+  });
+
+  it('should handle select event with multiple selected items', () => {
+    component.onSelect(detail1);
+    component.onSelect(detail2);
+    expect(component.selectedItems.length).toBe(2);
+    expect(component.selectedItems).toContain(detail1, detail2);
+    expect(component.selectedItems.length).toBe(2);
+    expect(component.filterValues).toEqual(['HUMANITIES and RELIGION,equals', 'TECHNOLOGY,equals'] );
+  });
+
+  it('should handle deselect event', () => {
+    component.onSelect(detail1);
+    component.onSelect(detail2);
+    expect(component.selectedItems.length).toBe(2);
+    expect(component.selectedItems.length).toBe(2);
+    component.onDeselect(detail1);
+    expect(component.selectedItems.length).toBe(1);
+    expect(component.selectedItems).toContain(detail2);
+    expect(component.selectedItems.length).toBe(1);
+    expect(component.filterValues).toEqual(['TECHNOLOGY,equals'] );
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+    component = null;
+  });
+});

src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts

@@ -0,0 +1,118 @@
+import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { VocabularyOptions } from '../../core/submission/vocabularies/models/vocabulary-options.model';
+import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { BROWSE_BY_COMPONENT_FACTORY } from '../browse-by-switcher/browse-by-decorator';
+import { map } from 'rxjs/operators';
+import { ThemeService } from 'src/app/shared/theme-support/theme.service';
+import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
+
+@Component({
+  selector: 'ds-browse-by-taxonomy-page',
+  templateUrl: './browse-by-taxonomy-page.component.html',
+  styleUrls: ['./browse-by-taxonomy-page.component.scss']
+})
+/**
+ * Component for browsing items by metadata in a hierarchical controlled vocabulary
+ */
+export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
+
+  /**
+   * The {@link VocabularyOptions} object
+   */
+  vocabularyOptions: VocabularyOptions;
+
+  /**
+   * The selected vocabulary entries
+   */
+  selectedItems: VocabularyEntryDetail[] = [];
+
+  /**
+   * The query parameters, contain the selected entries
+   */
+  filterValues: string[];
+
+  /**
+   * The facet the use when filtering
+   */
+  facetType: string;
+
+  /**
+   * The used vocabulary
+   */
+  vocabularyName: string;
+
+  /**
+   * The parameters used in the URL
+   */
+  queryParams: any;
+
+  /**
+   * Resolved browse-by component
+   */
+  browseByComponent: Observable<any>;
+
+  /**
+   * Subscriptions to track
+   */
+  browseByComponentSubs: Subscription[] = [];
+
+  public constructor( protected route: ActivatedRoute,
+                      protected themeService: ThemeService,
+                      @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
+  }
+
+  ngOnInit(): void {
+    this.browseByComponent = this.route.data.pipe(
+      map((data: { browseDefinition: BrowseDefinition }) => {
+        this.getComponentByBrowseByType(data.browseDefinition.getRenderType(), this.themeService.getThemeName());
+        return data.browseDefinition;
+      })
+    );
+    this.browseByComponentSubs.push(this.browseByComponent.subscribe((browseDefinition: HierarchicalBrowseDefinition) => {
+      this.facetType = browseDefinition.facetType;
+      this.vocabularyName = browseDefinition.vocabulary;
+      this.vocabularyOptions = { name: this.vocabularyName, closed: true };
+    }));
+  }
+
+  /**
+   * Adds detail to selectedItems, transforms it to be used as query parameter
+   * and adds that to filterValues.
+   *
+   * @param detail VocabularyEntryDetail to be added
+   */
+  onSelect(detail: VocabularyEntryDetail): void {
+      this.selectedItems.push(detail);
+      this.filterValues = this.selectedItems
+        .map((item: VocabularyEntryDetail) => `${item.value},equals`);
+    this.updateQueryParams();
+  }
+
+  /**
+   * Removes detail from selectedItems and filterValues.
+   *
+   * @param detail VocabularyEntryDetail to be removed
+   */
+  onDeselect(detail: VocabularyEntryDetail): void {
+    this.selectedItems = this.selectedItems.filter((entry: VocabularyEntryDetail) => { return entry.id !== detail.id; });
+    this.filterValues = this.filterValues.filter((value: string) => { return value !== `${detail.value},equals`; });
+    this.updateQueryParams();
+  }
+
+  /**
+   * Updates queryParams based on the current facetType and filterValues.
+   */
+  private updateQueryParams(): void {
+    this.queryParams = {
+      ['f.' + this.facetType]: this.filterValues
+    };
+  }
+
+  ngOnDestroy(): void {
+    this.browseByComponentSubs.forEach((sub: Subscription) => sub.unsubscribe());
+  }
+}

src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page.component';
+
+@Component({
+  selector: 'ds-themed-browse-by-taxonomy-page',
+  templateUrl: '../../shared/theme-support/themed.component.html',
+  styleUrls: []
+})
+/**
+ * Themed wrapper for BrowseByTaxonomyPageComponent
+ */
+@rendersBrowseBy('hierarchy')
+export class ThemedBrowseByTaxonomyPageComponent extends ThemedComponent<BrowseByTaxonomyPageComponent>{
+
+  protected getComponentName(): string {
+    return 'BrowseByTaxonomyPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./browse-by-taxonomy-page.component`);
+  }
+}

src/app/browse-by/browse-by.module.ts

@@ -4,24 +4,29 @@ import { BrowseByTitlePageComponent } from './browse-by-title-page/browse-by-tit
 import { BrowseByMetadataPageComponent } from './browse-by-metadata-page/browse-by-metadata-page.component';
 import { BrowseByDatePageComponent } from './browse-by-date-page/browse-by-date-page.component';
 import { BrowseBySwitcherComponent } from './browse-by-switcher/browse-by-switcher.component';
+import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/browse-by-taxonomy-page.component';
 import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-browse-by-switcher.component';
 import { ComcolModule } from '../shared/comcol/comcol.module';
 import { ThemedBrowseByMetadataPageComponent } from './browse-by-metadata-page/themed-browse-by-metadata-page.component';
 import { ThemedBrowseByDatePageComponent } from './browse-by-date-page/themed-browse-by-date-page.component';
 import { ThemedBrowseByTitlePageComponent } from './browse-by-title-page/themed-browse-by-title-page.component';
+import { ThemedBrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component';
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
+import { FormModule } from '../shared/form/form.module';
+import { SharedModule } from '../shared/shared.module';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   BrowseByTitlePageComponent,
   BrowseByMetadataPageComponent,
   BrowseByDatePageComponent,
+  BrowseByTaxonomyPageComponent,
 
   ThemedBrowseByMetadataPageComponent,
   ThemedBrowseByDatePageComponent,
   ThemedBrowseByTitlePageComponent,
-
+  ThemedBrowseByTaxonomyPageComponent,
 ];
 
 @NgModule({
@@ -29,7 +34,9 @@ const ENTRY_COMPONENTS = [
     SharedBrowseByModule,
     CommonModule,
     ComcolModule,
-    DsoPageModule
+    DsoPageModule,
+    FormModule,
+    SharedModule,
   ],
   declarations: [
     BrowseBySwitcherComponent,

src/app/collection-page/collection-form/collection-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges } from '@angular/core';
 
 import { Observable } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
@@ -22,6 +22,8 @@ import { MetadataValue } from '../../core/shared/metadata.models';
 import { getFirstSucceededRemoteListPayload } from '../../core/shared/operators';
 import { collectionFormEntityTypeSelectionConfig, collectionFormModels, } from './collection-form.models';
 import { NONE_ENTITY_TYPE } from '../../core/shared/item-relationships/item-type.resource-type';
+import { hasNoValue, isNotNull } from 'src/app/shared/empty.util';
+
 
 /**
  * Form used for creating and editing collections
@@ -31,7 +33,7 @@ import { NONE_ENTITY_TYPE } from '../../core/shared/item-relationships/item-type
   styleUrls: ['../../shared/comcol/comcol-forms/comcol-form/comcol-form.component.scss'],
   templateUrl: '../../shared/comcol/comcol-forms/comcol-form/comcol-form.component.html'
 })
-export class CollectionFormComponent extends ComColFormComponent<Collection> implements OnInit {
+export class CollectionFormComponent extends ComColFormComponent<Collection> implements OnInit, OnChanges {
   /**
    * @type {Collection} A new collection when a collection is being created, an existing Input collection when a collection is being edited
    */
@@ -61,12 +63,29 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> imp
                      protected dsoService: CommunityDataService,
                      protected requestService: RequestService,
                      protected objectCache: ObjectCacheService,
-                     protected entityTypeService: EntityTypeDataService) {
+                     protected entityTypeService: EntityTypeDataService,
+                     protected chd: ChangeDetectorRef) {
     super(formService, translate, notificationsService, authService, requestService, objectCache);
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
+    if (hasNoValue(this.formModel) && isNotNull(this.dso)) {
+      this.initializeForm();
+    }
+  }
 
+  /**
+   * Detect changes to the dso and initialize the form,
+   * if the dso changes, exists and it is not the first change
+   */
+  ngOnChanges(changes: SimpleChanges) {
+    const dsoChange: SimpleChange = changes.dso;
+    if (this.dso && dsoChange && !dsoChange.isFirstChange()) {
+      this.initializeForm();
+    }
+  }
+
+  initializeForm() {
     let currentRelationshipValue: MetadataValue[];
     if (this.dso && this.dso.metadata) {
       currentRelationshipValue = this.dso.metadata['dspace.entity.type'];
@@ -79,9 +98,8 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> imp
     // retrieve all entity types to populate the dropdowns selection
     entities$.subscribe((entityTypes: ItemType[]) => {
 
-        entityTypes
-          .filter((type: ItemType) => type.label !== NONE_ENTITY_TYPE)
-          .forEach((type: ItemType, index: number) => {
+      entityTypes = entityTypes.filter((type: ItemType) => type.label !== NONE_ENTITY_TYPE);
+          entityTypes.forEach((type: ItemType, index: number) => {
           this.entityTypeSelection.add({
             disabled: false,
             label: type.label,
@@ -93,9 +111,10 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> imp
           }
         });
 
-        this.formModel = [...collectionFormModels, this.entityTypeSelection];
+      this.formModel = entityTypes.length === 0 ? collectionFormModels : [...collectionFormModels, this.entityTypeSelection];
 
         super.ngOnInit();
+        this.chd.detectChanges();
     });
 
   }

src/app/collection-page/collection-page.component.html

@@ -34,9 +34,6 @@
                   </ds-comcol-page-content>
                 </header>
                 <ds-dso-edit-menu></ds-dso-edit-menu>
-                <div class="pl-2 space-children-mr">
-                  <ds-dso-page-subscription-button [dso]="collection"></ds-dso-page-subscription-button>
-                </div>
               </div>
               <section class="comcol-page-browse-section">
               <!-- Browse-By Links -->