diff --git a/.eslintrc.json b/.eslintrc.json index af1b97849b..cb5775ef1f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -8,7 +8,10 @@ "eslint-plugin-deprecation", "unused-imports", "eslint-plugin-lodash", - "eslint-plugin-jsonc" + "eslint-plugin-jsonc", + "eslint-plugin-rxjs", + "eslint-plugin-simple-import-sort", + "eslint-plugin-import-newlines" ], "overrides": [ { @@ -27,17 +30,29 @@ "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "plugin:@angular-eslint/recommended", - "plugin:@angular-eslint/template/process-inline-templates" + "plugin:@angular-eslint/template/process-inline-templates", + "plugin:rxjs/recommended" ], "rules": { + "indent": [ + "error", + 2, + { + "SwitchCase": 1 + } + ], "max-classes-per-file": [ "error", 1 ], "comma-dangle": [ - "off", + "error", "always-multiline" ], + "object-curly-spacing": [ + "error", + "always" + ], "eol-last": [ "error", "always" @@ -104,15 +119,13 @@ "allowTernary": true } ], - "prefer-const": "off", // todo: re-enable & fix errors (more strict than it used to be in TSLint) + "prefer-const": "error", + "no-case-declarations": "error", + "no-extra-boolean-cast": "error", "prefer-spread": "off", "no-underscore-dangle": "off", - - // todo: disabled rules from eslint:recommended, consider re-enabling & fixing "no-prototype-builtins": "off", "no-useless-escape": "off", - "no-case-declarations": "off", - "no-extra-boolean-cast": "off", "@angular-eslint/directive-selector": [ "error", @@ -183,7 +196,7 @@ ], "@typescript-eslint/type-annotation-spacing": "error", "@typescript-eslint/unified-signatures": "error", - "@typescript-eslint/ban-types": "warn", // todo: deal with {} type issues & re-enable + "@typescript-eslint/ban-types": "error", "@typescript-eslint/no-floating-promises": "warn", "@typescript-eslint/no-misused-promises": "warn", "@typescript-eslint/restrict-plus-operands": "warn", @@ -203,14 +216,45 @@ "deprecation/deprecation": "warn", + "simple-import-sort/imports": "error", + "simple-import-sort/exports": "error", "import/order": "off", + "import/first": "error", + "import/newline-after-import": "error", + "import/no-duplicates": "error", "import/no-deprecated": "warn", "import/no-namespace": "error", + "import-newlines/enforce": [ + "error", + { + "items": 1, + "semi": true, + "forceSingleLine": true + } + ], + "unused-imports/no-unused-imports": "error", "lodash/import-scope": [ "error", "method" - ] + ], + + "rxjs/no-nested-subscribe": "off" // todo: go over _all_ cases + } + }, + { + "files": [ + "*.spec.ts" + ], + "parserOptions": { + "project": [ + "./tsconfig.json", + "./cypress/tsconfig.json" + ], + "createDefaultProgram": true + }, + "rules": { + "prefer-const": "off" } }, { @@ -219,12 +263,7 @@ ], "extends": [ "plugin:@angular-eslint/template/recommended" - ], - "rules": { - // todo: re-enable & fix errors - "@angular-eslint/template/no-negated-async": "off", - "@angular-eslint/template/eqeqeq": "off" - } + ] }, { "files": [ diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index e2680420a2..52f20470a3 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -33,6 +33,8 @@ jobs: #CHROME_VERSION: "90.0.4430.212-1" # Bump Node heap size (OOM in CI after upgrading to Angular 15) NODE_OPTIONS: '--max-old-space-size=4096' + # Project name to use when running docker-compose prior to e2e tests + COMPOSE_PROJECT_NAME: 'ci' strategy: # Create a matrix of Node versions to test against (in parallel) matrix: diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index c482d8f29a..85a7216113 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -3,6 +3,9 @@ name: Docker images # Run this Build for all pushes to 'main' or maintenance branches, or tagged releases. # Also run for PRs to ensure PR doesn't break Docker build process +# NOTE: uses "reusable-docker-build.yml" in DSpace/DSpace to actually build each of the Docker images +# https://github.com/DSpace/DSpace/blob/main/.github/workflows/reusable-docker-build.yml +# on: push: branches: @@ -15,310 +18,42 @@ 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=${{ github.ref_name == github.event.repository.default_branch }} - type=ref,event=branch,enable=${{ github.ref_name != 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: ############################################################# - # Build/Push the '${{ env.REGISTRY_IMAGE }}' image + # Build/Push the 'dspace/dspace-angular' image ############################################################# dspace-angular: # Ensure this job never runs on forked repos. It's only executed for 'dspace/dspace-angular' if: github.repository == 'dspace/dspace-angular' - - 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 step below - - name: Sync metadata (tags, labels) from GitHub to Docker for 'dspace-angular' image - id: meta_build - uses: docker/metadata-action@v5 - with: - 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@v5 - with: - context: . - file: ./Dockerfile - 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: ${{ ! matrix.isPr }} - # Use tags / labels provided by 'docker/metadata-action' above - tags: ${{ steps.meta_build.outputs.tags }} - labels: ${{ steps.meta_build.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.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 }} + # Use the reusable-docker-build.yml script from DSpace/DSpace repo to build our Docker image + uses: DSpace/DSpace/.github/workflows/reusable-docker-build.yml@main + with: + build_id: dspace-angular + image_name: dspace/dspace-angular + dockerfile_path: ./Dockerfile + secrets: + DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }} + DOCKER_ACCESS_TOKEN: ${{ secrets.DOCKER_ACCESS_TOKEN }} ############################################################# - # Build/Push the '${{ env.REGISTRY_IMAGE }}' image ('-dist' tag) + # Build/Push the 'dspace/dspace-angular' 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@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: Build and push 'dspace-angular-dist' image - id: docker_build_dist - uses: docker/build-push-action@v5 - with: - context: . - file: ./Dockerfile.dist - 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: ${{ ! 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 }} - - # Deploy latest -dist image to Demo or Sandbox site, based on the branch updated - dspace-angular-dist_deploy: - if: ${{ github.event_name != 'pull_request' }} - runs-on: ubuntu-latest - needs: - # Requires manifest to be fully updated on DockerHub - - dspace-angular-dist_manifest - steps: - - name: Redeploy sandbox.dspace.org (based on main branch) - if: ${{ github.ref_name == github.event.repository.default_branch }} - run: | - curl -X POST -d '{}' $REDEPLOY_SANDBOX_URL - env: - REDEPLOY_SANDBOX_URL: ${{ secrets.REDEPLOY_SANDBOX_URL }} - - - name: Redeploy demo.dspace.org (based on maintenace branch) - if: ${{ github.ref_name == 'dspace-7_x' }} - run: | - curl -X POST -d '{}' $REDEPLOY_DEMO_URL - env: - REDEPLOY_DEMO_URL: ${{ secrets.REDEPLOY_DEMO_URL }} + # Use the reusable-docker-build.yml script from DSpace/DSpace repo to build our Docker image + uses: DSpace/DSpace/.github/workflows/reusable-docker-build.yml@main + with: + build_id: dspace-angular-dist + image_name: dspace/dspace-angular + dockerfile_path: ./Dockerfile.dist + # As this is a "dist" image, its tags are all suffixed with "-dist". Otherwise, it uses the same + # tagging logic as the primary 'dspace/dspace-angular' image above. + tags_flavor: suffix=-dist + secrets: + DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }} + DOCKER_ACCESS_TOKEN: ${{ secrets.DOCKER_ACCESS_TOKEN }} + # Enable redeploy of sandbox & demo if the branch for this image matches the deployment branch of + # these sites as specified in reusable-docker-build.xml + REDEPLOY_SANDBOX_URL: ${{ secrets.REDEPLOY_SANDBOX_URL }} + REDEPLOY_DEMO_URL: ${{ secrets.REDEPLOY_DEMO_URL }} \ No newline at end of file diff --git a/config/config.example.yml b/config/config.example.yml index 69a9ffd320..36d6a009d3 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -75,7 +75,7 @@ cache: anonymousCache: # Maximum number of pages to cache. Default is zero (0) which means anonymous user cache is disabled. # As all pages are cached in server memory, increasing this value will increase memory needs. - # Individual cached pages are usually small (<100KB), so a value of max=1000 would only require ~100MB of memory. + # Individual cached pages are usually small (<100KB), so a value of max=1000 would only require ~100MB of memory. max: 0 # Amount of time after which cached pages are considered stale (in ms). After becoming stale, the cached # copy is automatically refreshed on the next request. @@ -131,12 +131,16 @@ submission: # NOTE: after how many time (milliseconds) submission is saved automatically # eg. timer: 5 * (1000 * 60); // 5 minutes timer: 0 + # Always show the duplicate detection section if enabled, even if there are no potential duplicates detected + # (a message will be displayed to indicate no matches were found) + duplicateDetection: + alwaysShowSection: false icons: metadata: # NOTE: example of configuration # # NOTE: metadata name # - name: dc.author - # # NOTE: fontawesome (v5.x) icon classes and bootstrap utility classes can be used + # # NOTE: fontawesome (v6.x) icon classes and bootstrap utility classes can be used # style: fas fa-user - name: dc.author style: fas fa-user @@ -147,18 +151,40 @@ submission: confidence: # NOTE: example of configuration # # NOTE: confidence value - # - name: dc.author - # # NOTE: fontawesome (v5.x) icon classes and bootstrap utility classes can be used - # style: fa-user + # - value: 600 + # # NOTE: fontawesome (v6.x) icon classes and bootstrap utility classes can be used + # style: text-success + # icon: fa-circle-check + # # NOTE: the class configured in property style is used by default, the icon property could be used in component + # configured to use a 'icon mode' display (mainly in edit-item page) - value: 600 style: text-success + icon: fa-circle-check - value: 500 style: text-info + icon: fa-gear - value: 400 style: text-warning + icon: fa-circle-question + - value: 300 + style: text-muted + icon: fa-thumbs-down + - value: 200 + style: text-muted + icon: fa-circle-exclamation + - value: 100 + style: text-muted + icon: fa-circle-stop + - value: 0 + style: text-muted + icon: fa-ban + - value: -1 + style: text-muted + icon: fa-circle-xmark # default configuration - value: default style: text-muted + icon: fa-circle-xmark # Default Language in which the UI will be rendered if the user's browser language is not an active language defaultLanguage: en @@ -272,6 +298,8 @@ homePage: # No. of communities to list per page on the home page # This will always round to the nearest number from the list of page sizes. e.g. if you set it to 7 it'll use 10 pageSize: 5 + # Enable or disable the Discover filters on the homepage + showDiscoverFilters: false # Item Config item: @@ -285,8 +313,17 @@ item: # settings menu. See pageSizeOptions in 'pagination-component-options.model.ts'. pageSize: 5 +# Community Page Config +community: + # Search tab config + searchSection: + showSidebar: true + # Collection Page Config collection: + # Search tab config + searchSection: + showSidebar: true edit: undoTimeout: 10000 # 10 seconds @@ -382,7 +419,79 @@ vocabularies: vocabulary: 'srsc' enabled: true -# Default collection/community sorting order at Advanced search, Create/update community and collection when there are not a query. +# Default collection/community sorting order at Advanced search, Create/update community and collection when there are not a query. comcolSelectionSort: sortField: 'dc.title' sortDirection: 'ASC' + +# Example of fallback collection for suggestions import +# suggestion: + # - collectionId: 8f7df5ca-f9c2-47a4-81ec-8a6393d6e5af + # source: "openaire" + + +# Search settings +search: + # Settings to enable/disable or configure advanced search filters. + advancedFilters: + enabled: false + # List of filters to enable in "Advanced Search" dropdown + filter: [ 'title', 'author', 'subject', 'entityType' ] + + +# Notify metrics +# Configuration for Notify Admin Dashboard for metrics visualization +notifyMetrics: + # Configuration for received messages +- title: 'admin-notify-dashboard.received-ldn' + boxes: + - color: '#B8DAFF' + title: 'admin-notify-dashboard.NOTIFY.incoming.accepted' + config: 'NOTIFY.incoming.accepted' + description: 'admin-notify-dashboard.NOTIFY.incoming.accepted.description' + - color: '#D4EDDA' + title: 'admin-notify-dashboard.NOTIFY.incoming.processed' + config: 'NOTIFY.incoming.processed' + description: 'admin-notify-dashboard.NOTIFY.incoming.processed.description' + - color: '#FDBBC7' + title: 'admin-notify-dashboard.NOTIFY.incoming.failure' + config: 'NOTIFY.incoming.failure' + description: 'admin-notify-dashboard.NOTIFY.incoming.failure.description' + - color: '#FDBBC7' + title: 'admin-notify-dashboard.NOTIFY.incoming.untrusted' + config: 'NOTIFY.incoming.untrusted' + description: 'admin-notify-dashboard.NOTIFY.incoming.untrusted.description' + - color: '#43515F' + title: 'admin-notify-dashboard.NOTIFY.incoming.involvedItems' + textColor: '#fff' + config: 'NOTIFY.incoming.involvedItems' + description: 'admin-notify-dashboard.NOTIFY.incoming.involvedItems.description' +# Configuration for outgoing messages +- title: 'admin-notify-dashboard.generated-ldn' + boxes: + - color: '#B8DAFF' + title: 'admin-notify-dashboard.NOTIFY.outgoing.queued' + config: 'NOTIFY.outgoing.queued' + description: 'admin-notify-dashboard.NOTIFY.outgoing.queued.description' + - color: '#FDEEBB' + title: 'admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry' + config: 'NOTIFY.outgoing.queued_for_retry' + description: 'admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry.description' + - color: '#FDBBC7' + title: 'admin-notify-dashboard.NOTIFY.outgoing.failure' + config: 'NOTIFY.outgoing.failure' + description: 'admin-notify-dashboard.NOTIFY.outgoing.failure.description' + - color: '#43515F' + title: 'admin-notify-dashboard.NOTIFY.outgoing.involvedItems' + textColor: '#fff' + config: 'NOTIFY.outgoing.involvedItems' + description: 'admin-notify-dashboard.NOTIFY.outgoing.involvedItems.description' + - color: '#D4EDDA' + title: 'admin-notify-dashboard.NOTIFY.outgoing.delivered' + config: 'NOTIFY.outgoing.delivered' + description: 'admin-notify-dashboard.NOTIFY.outgoing.delivered.description' + + + + + diff --git a/cypress.config.ts b/cypress.config.ts index 91eeb9838b..458b035a48 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -9,8 +9,9 @@ export default defineConfig({ openMode: 0, }, env: { - // Global constants used in DSpace e2e tests (see also ./cypress/support/e2e.ts) - // May be overridden in our cypress.json config file using specified environment variables. + // Global DSpace environment variables used in all our Cypress e2e tests + // May be modified in this config, or overridden in a variety of ways. + // See Cypress environment variable docs: https://docs.cypress.io/guides/guides/environment-variables // Default values listed here are all valid for the Demo Entities Data set available at // https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data // (This is the data set used in our CI environment) @@ -21,12 +22,14 @@ export default defineConfig({ // Community/collection/publication used for view/edit tests DSPACE_TEST_COMMUNITY: '0958c910-2037-42a9-81c7-dca80e3892b4', DSPACE_TEST_COLLECTION: '282164f5-d325-4740-8dd1-fa4d6d3e7200', - DSPACE_TEST_ENTITY_PUBLICATION: 'e98b0f27-5c19-49a0-960d-eb6ad5287067', + DSPACE_TEST_ENTITY_PUBLICATION: '6160810f-1e53-40db-81ef-f6621a727398', // Search term (should return results) used in search tests DSPACE_TEST_SEARCH_TERM: 'test', - // Collection used for submission tests + // Main Collection used for submission tests. Should be able to accept normal Item objects DSPACE_TEST_SUBMIT_COLLECTION_NAME: 'Sample Collection', DSPACE_TEST_SUBMIT_COLLECTION_UUID: '9d8334e9-25d3-4a67-9cea-3dffdef80144', + // Collection used for Person entity submission tests. MUST be configured with EntityType=Person. + DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME: 'People', // Account used to test basic submission process DSPACE_TEST_SUBMIT_USER: 'dspacedemo+submit@gmail.com', DSPACE_TEST_SUBMIT_USER_PASSWORD: 'dspace', diff --git a/cypress/e2e/admin-sidebar.cy.ts b/cypress/e2e/admin-sidebar.cy.ts new file mode 100644 index 0000000000..7612eb5313 --- /dev/null +++ b/cypress/e2e/admin-sidebar.cy.ts @@ -0,0 +1,28 @@ +import { Options } from 'cypress-axe'; +import { testA11y } from 'cypress/support/utils'; + +describe('Admin Sidebar', () => { + beforeEach(() => { + // Must login as an Admin for sidebar to appear + cy.visit('/login'); + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); + }); + + it('should be pinnable and pass accessibility tests', () => { + // Pin the sidebar open + cy.get('#sidebar-collapse-toggle').click(); + + // Click on every expandable section to open all menus + cy.get('ds-expandable-admin-sidebar-section').click({multiple: true}); + + // Analyze for accessibility + testA11y('ds-admin-sidebar', + { + rules: { + // Currently all expandable sections have nested interactive elements + // See https://github.com/DSpace/dspace-angular/issues/2178 + 'nested-interactive': { enabled: false }, + } + } as Options); + }); +}); diff --git a/cypress/e2e/breadcrumbs.cy.ts b/cypress/e2e/breadcrumbs.cy.ts index ea6acdafcd..0cddbc723c 100644 --- a/cypress/e2e/breadcrumbs.cy.ts +++ b/cypress/e2e/breadcrumbs.cy.ts @@ -1,10 +1,9 @@ -import { TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; describe('Breadcrumbs', () => { it('should pass accessibility tests', () => { // Visit an Item, as those have more breadcrumbs - cy.visit('/entities/publication/'.concat(TEST_ENTITY_PUBLICATION)); + cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'))); // Wait for breadcrumbs to be visible cy.get('ds-breadcrumbs').should('be.visible'); diff --git a/cypress/e2e/browse-by-author.cy.ts b/cypress/e2e/browse-by-author.cy.ts index 07c20ad7c9..32c470231d 100644 --- a/cypress/e2e/browse-by-author.cy.ts +++ b/cypress/e2e/browse-by-author.cy.ts @@ -5,9 +5,9 @@ describe('Browse By Author', () => { cy.visit('/browse/author'); // Wait for to be visible - cy.get('ds-browse-by-metadata-page').should('be.visible'); + cy.get('ds-browse-by-metadata').should('be.visible'); // Analyze for accessibility - testA11y('ds-browse-by-metadata-page'); + testA11y('ds-browse-by-metadata'); }); }); diff --git a/cypress/e2e/browse-by-dateissued.cy.ts b/cypress/e2e/browse-by-dateissued.cy.ts index 4d22420227..7966f1c82e 100644 --- a/cypress/e2e/browse-by-dateissued.cy.ts +++ b/cypress/e2e/browse-by-dateissued.cy.ts @@ -5,9 +5,9 @@ describe('Browse By Date Issued', () => { cy.visit('/browse/dateissued'); // Wait for to be visible - cy.get('ds-browse-by-date-page').should('be.visible'); + cy.get('ds-browse-by-date').should('be.visible'); // Analyze for accessibility - testA11y('ds-browse-by-date-page'); + testA11y('ds-browse-by-date'); }); }); diff --git a/cypress/e2e/browse-by-subject.cy.ts b/cypress/e2e/browse-by-subject.cy.ts index 89b791f03c..57ca88d103 100644 --- a/cypress/e2e/browse-by-subject.cy.ts +++ b/cypress/e2e/browse-by-subject.cy.ts @@ -5,9 +5,9 @@ describe('Browse By Subject', () => { cy.visit('/browse/subject'); // Wait for to be visible - cy.get('ds-browse-by-metadata-page').should('be.visible'); + cy.get('ds-browse-by-metadata').should('be.visible'); // Analyze for accessibility - testA11y('ds-browse-by-metadata-page'); + testA11y('ds-browse-by-metadata'); }); }); diff --git a/cypress/e2e/browse-by-title.cy.ts b/cypress/e2e/browse-by-title.cy.ts index e4e027586a..09195c30df 100644 --- a/cypress/e2e/browse-by-title.cy.ts +++ b/cypress/e2e/browse-by-title.cy.ts @@ -5,9 +5,9 @@ describe('Browse By Title', () => { cy.visit('/browse/title'); // Wait for to be visible - cy.get('ds-browse-by-title-page').should('be.visible'); + cy.get('ds-browse-by-title').should('be.visible'); // Analyze for accessibility - testA11y('ds-browse-by-title-page'); + testA11y('ds-browse-by-title'); }); }); diff --git a/cypress/e2e/collection-edit.cy.ts b/cypress/e2e/collection-edit.cy.ts new file mode 100644 index 0000000000..63d873db3e --- /dev/null +++ b/cypress/e2e/collection-edit.cy.ts @@ -0,0 +1,128 @@ +import { testA11y } from 'cypress/support/utils'; + +const COLLECTION_EDIT_PAGE = '/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')).concat('/edit'); + +beforeEach(() => { + // All tests start with visiting the Edit Collection Page + cy.visit(COLLECTION_EDIT_PAGE); + + // This page is restricted, so we will be shown the login form. Fill it out & submit. + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); +}); + +describe('Edit Collection > Edit Metadata tab', () => { + it('should pass accessibility tests', () => { + // tag must be loaded + cy.get('ds-edit-collection').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-edit-collection'); + }); +}); + +describe('Edit Collection > Assign Roles tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="roles"]').click(); + + // tag must be loaded + cy.get('ds-collection-roles').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-collection-roles'); + }); +}); + +describe('Edit Collection > Content Source tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="source"]').click(); + + // tag must be loaded + cy.get('ds-collection-source').should('be.visible'); + + // Check the external source checkbox (to display all fields on the page) + cy.get('#externalSourceCheck').check(); + + // Wait for the source controls to appear + // cy.get('ds-collection-source-controls').should('be.visible'); + + // Analyze entire page for accessibility issues + testA11y('ds-collection-source'); + }); +}); + +describe('Edit Collection > Curate tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="curate"]').click(); + + // tag must be loaded + cy.get('ds-collection-curate').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-collection-curate'); + }); +}); + +describe('Edit Collection > Access Control tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="access-control"]').click(); + + // tag must be loaded + cy.get('ds-collection-access-control').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-collection-access-control'); + }); +}); + +describe('Edit Collection > Authorizations tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="authorizations"]').click(); + + // tag must be loaded + cy.get('ds-collection-authorizations').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-collection-authorizations'); + }); +}); + +describe('Edit Collection > Item Mapper tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="mapper"]').click(); + + // tag must be loaded + cy.get('ds-collection-item-mapper').should('be.visible'); + + // Analyze entire page for accessibility issues + testA11y('ds-collection-item-mapper'); + + // Click on the "Map new Items" tab + cy.get('li[data-test="mapTab"] a').click(); + + // Make sure search form is now visible + cy.get('ds-search-form').should('be.visible'); + + // Analyze entire page (again) for accessibility issues + testA11y('ds-collection-item-mapper'); + }); +}); + + +describe('Edit Collection > Delete page', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="delete-button"]').click(); + + // tag must be loaded + cy.get('ds-delete-collection').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-delete-collection'); + }); +}); diff --git a/cypress/e2e/collection-page.cy.ts b/cypress/e2e/collection-page.cy.ts index a034b4361d..55c10cc6e2 100644 --- a/cypress/e2e/collection-page.cy.ts +++ b/cypress/e2e/collection-page.cy.ts @@ -1,10 +1,9 @@ -import { TEST_COLLECTION } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; describe('Collection Page', () => { it('should pass accessibility tests', () => { - cy.visit('/collections/'.concat(TEST_COLLECTION)); + cy.visit('/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION'))); // tag must be loaded cy.get('ds-collection-page').should('be.visible'); diff --git a/cypress/e2e/collection-statistics.cy.ts b/cypress/e2e/collection-statistics.cy.ts index 6df4e9a454..a08f8cb198 100644 --- a/cypress/e2e/collection-statistics.cy.ts +++ b/cypress/e2e/collection-statistics.cy.ts @@ -1,12 +1,12 @@ -import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_COLLECTION } from 'cypress/support/e2e'; +import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; describe('Collection Statistics Page', () => { - const COLLECTIONSTATISTICSPAGE = '/statistics/collections/'.concat(TEST_COLLECTION); + const COLLECTIONSTATISTICSPAGE = '/statistics/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')); it('should load if you click on "Statistics" from a Collection page', () => { - cy.visit('/collections/'.concat(TEST_COLLECTION)); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.visit('/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION'))); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', COLLECTIONSTATISTICSPAGE); }); @@ -18,7 +18,7 @@ describe('Collection Statistics Page', () => { it('should contain a "Total visits per month" section', () => { cy.visit(COLLECTIONSTATISTICSPAGE); // Check just for existence because this table is empty in CI environment as it's historical data - cy.get('.'.concat(TEST_COLLECTION).concat('_TotalVisitsPerMonth')).should('exist'); + cy.get('.'.concat(Cypress.env('DSPACE_TEST_COLLECTION')).concat('_TotalVisitsPerMonth')).should('exist'); }); it('should pass accessibility tests', () => { diff --git a/cypress/e2e/community-edit.cy.ts b/cypress/e2e/community-edit.cy.ts new file mode 100644 index 0000000000..8fc1a7733e --- /dev/null +++ b/cypress/e2e/community-edit.cy.ts @@ -0,0 +1,86 @@ +import { testA11y } from 'cypress/support/utils'; + +const COMMUNITY_EDIT_PAGE = '/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')).concat('/edit'); + +beforeEach(() => { + // All tests start with visiting the Edit Community Page + cy.visit(COMMUNITY_EDIT_PAGE); + + // This page is restricted, so we will be shown the login form. Fill it out & submit. + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); +}); + +describe('Edit Community > Edit Metadata tab', () => { + it('should pass accessibility tests', () => { + // tag must be loaded + cy.get('ds-edit-community').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-edit-community'); + }); +}); + +describe('Edit Community > Assign Roles tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="roles"]').click(); + + // tag must be loaded + cy.get('ds-community-roles').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-community-roles'); + }); +}); + +describe('Edit Community > Curate tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="curate"]').click(); + + // tag must be loaded + cy.get('ds-community-curate').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-community-curate'); + }); +}); + +describe('Edit Community > Access Control tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="access-control"]').click(); + + // tag must be loaded + cy.get('ds-community-access-control').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-community-access-control'); + }); +}); + +describe('Edit Community > Authorizations tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="authorizations"]').click(); + + // tag must be loaded + cy.get('ds-community-authorizations').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-community-authorizations'); + }); +}); + +describe('Edit Community > Delete page', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="delete-button"]').click(); + + // tag must be loaded + cy.get('ds-delete-community').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-delete-community'); + }); +}); diff --git a/cypress/e2e/community-page.cy.ts b/cypress/e2e/community-page.cy.ts index 6c628e21ce..386bb592a0 100644 --- a/cypress/e2e/community-page.cy.ts +++ b/cypress/e2e/community-page.cy.ts @@ -1,15 +1,14 @@ -import { TEST_COMMUNITY } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; describe('Community Page', () => { it('should pass accessibility tests', () => { - cy.visit('/communities/'.concat(TEST_COMMUNITY)); + cy.visit('/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY'))); // tag must be loaded cy.get('ds-community-page').should('be.visible'); // Analyze for accessibility issues - testA11y('ds-community-page',); + testA11y('ds-community-page'); }); }); diff --git a/cypress/e2e/community-statistics.cy.ts b/cypress/e2e/community-statistics.cy.ts index 710450e797..6cafed0350 100644 --- a/cypress/e2e/community-statistics.cy.ts +++ b/cypress/e2e/community-statistics.cy.ts @@ -1,12 +1,12 @@ -import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_COMMUNITY } from 'cypress/support/e2e'; +import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; describe('Community Statistics Page', () => { - const COMMUNITYSTATISTICSPAGE = '/statistics/communities/'.concat(TEST_COMMUNITY); + const COMMUNITYSTATISTICSPAGE = '/statistics/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')); it('should load if you click on "Statistics" from a Community page', () => { - cy.visit('/communities/'.concat(TEST_COMMUNITY)); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.visit('/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY'))); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', COMMUNITYSTATISTICSPAGE); }); @@ -18,7 +18,7 @@ describe('Community Statistics Page', () => { it('should contain a "Total visits per month" section', () => { cy.visit(COMMUNITYSTATISTICSPAGE); // Check just for existence because this table is empty in CI environment as it's historical data - cy.get('.'.concat(TEST_COMMUNITY).concat('_TotalVisitsPerMonth')).should('exist'); + cy.get('.'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')).concat('_TotalVisitsPerMonth')).should('exist'); }); it('should pass accessibility tests', () => { diff --git a/cypress/e2e/header.cy.ts b/cypress/e2e/header.cy.ts index 1a9b841eb7..9852216e43 100644 --- a/cypress/e2e/header.cy.ts +++ b/cypress/e2e/header.cy.ts @@ -8,11 +8,6 @@ describe('Header', () => { cy.get('ds-header').should('be.visible'); // Analyze for accessibility - testA11y({ - include: ['ds-header'], - exclude: [ - ['#search-navbar-container'] // search in navbar has duplicative ID. Will be fixed in #1174 - ], - }); + testA11y('ds-header'); }); }); diff --git a/cypress/e2e/homepage-statistics.cy.ts b/cypress/e2e/homepage-statistics.cy.ts index 2a1ab9785a..ece38686b9 100644 --- a/cypress/e2e/homepage-statistics.cy.ts +++ b/cypress/e2e/homepage-statistics.cy.ts @@ -1,18 +1,18 @@ -import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e'; +import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; import '../support/commands'; describe('Site Statistics Page', () => { it('should load if you click on "Statistics" from homepage', () => { cy.visit('/'); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', '/statistics'); }); it('should pass accessibility tests', () => { // generate 2 view events on an Item's page - cy.generateViewEvent(TEST_ENTITY_PUBLICATION, 'item'); - cy.generateViewEvent(TEST_ENTITY_PUBLICATION, 'item'); + cy.generateViewEvent(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'), 'item'); + cy.generateViewEvent(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'), 'item'); cy.visit('/statistics'); diff --git a/cypress/e2e/item-edit.cy.ts b/cypress/e2e/item-edit.cy.ts new file mode 100644 index 0000000000..b4c01a1a94 --- /dev/null +++ b/cypress/e2e/item-edit.cy.ts @@ -0,0 +1,135 @@ +import { Options } from 'cypress-axe'; +import { testA11y } from 'cypress/support/utils'; + +const ITEM_EDIT_PAGE = '/items/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')).concat('/edit'); + +beforeEach(() => { + // All tests start with visiting the Edit Item Page + cy.visit(ITEM_EDIT_PAGE); + + // This page is restricted, so we will be shown the login form. Fill it out & submit. + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); +}); + +describe('Edit Item > Edit Metadata tab', () => { + it('should pass accessibility tests', () => { + cy.get('a[data-test="metadata"]').click(); + + // tag must be loaded + cy.get('ds-edit-item-page').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-edit-item-page'); + }); +}); + +describe('Edit Item > Status tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="status"]').click(); + + // tag must be loaded + cy.get('ds-item-status').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-item-status'); + }); +}); + +describe('Edit Item > Bitstreams tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="bitstreams"]').click(); + + // tag must be loaded + cy.get('ds-item-bitstreams').should('be.visible'); + + // Table of item bitstreams must also be loaded + cy.get('div.item-bitstreams').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-item-bitstreams', + { + rules: { + // Currently Bitstreams page loads a pagination component per Bundle + // and they all use the same 'id="p-dad"'. + 'duplicate-id': { enabled: false }, + } + } as Options + ); + }); +}); + +describe('Edit Item > Curate tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="curate"]').click(); + + // tag must be loaded + cy.get('ds-item-curate').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-item-curate'); + }); +}); + +describe('Edit Item > Relationships tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="relationships"]').click(); + + // tag must be loaded + cy.get('ds-item-relationships').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-item-relationships'); + }); +}); + +describe('Edit Item > Version History tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="versionhistory"]').click(); + + // tag must be loaded + cy.get('ds-item-version-history').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-item-version-history'); + }); +}); + +describe('Edit Item > Access Control tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="access-control"]').click(); + + // tag must be loaded + cy.get('ds-item-access-control').should('be.visible'); + + // Analyze for accessibility issues + testA11y('ds-item-access-control'); + }); +}); + +describe('Edit Item > Collection Mapper tab', () => { + + it('should pass accessibility tests', () => { + cy.get('a[data-test="mapper"]').click(); + + // tag must be loaded + cy.get('ds-item-collection-mapper').should('be.visible'); + + // Analyze entire page for accessibility issues + testA11y('ds-item-collection-mapper'); + + // Click on the "Map new collections" tab + cy.get('li[data-test="mapTab"] a').click(); + + // Make sure search form is now visible + cy.get('ds-search-form').should('be.visible'); + + // Analyze entire page (again) for accessibility issues + testA11y('ds-item-collection-mapper'); + }); +}); diff --git a/cypress/e2e/item-page.cy.ts b/cypress/e2e/item-page.cy.ts index 9dba6eb8ce..a6a208e9f4 100644 --- a/cypress/e2e/item-page.cy.ts +++ b/cypress/e2e/item-page.cy.ts @@ -1,9 +1,8 @@ -import { TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; describe('Item Page', () => { - const ITEMPAGE = '/items/'.concat(TEST_ENTITY_PUBLICATION); - const ENTITYPAGE = '/entities/publication/'.concat(TEST_ENTITY_PUBLICATION); + const ITEMPAGE = '/items/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')); + const ENTITYPAGE = '/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')); // Test that entities will redirect to /entities/[type]/[uuid] when accessed via /items/[uuid] it('should redirect to the entity page when navigating to an item page', () => { diff --git a/cypress/e2e/item-statistics.cy.ts b/cypress/e2e/item-statistics.cy.ts index 9b90cb24af..6caeacae8e 100644 --- a/cypress/e2e/item-statistics.cy.ts +++ b/cypress/e2e/item-statistics.cy.ts @@ -1,12 +1,12 @@ -import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e'; +import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; describe('Item Statistics Page', () => { - const ITEMSTATISTICSPAGE = '/statistics/items/'.concat(TEST_ENTITY_PUBLICATION); + const ITEMSTATISTICSPAGE = '/statistics/items/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')); it('should load if you click on "Statistics" from an Item/Entity page', () => { - cy.visit('/entities/publication/'.concat(TEST_ENTITY_PUBLICATION)); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'))); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', ITEMSTATISTICSPAGE); }); @@ -24,7 +24,7 @@ describe('Item Statistics Page', () => { it('should contain a "Total visits per month" section', () => { cy.visit(ITEMSTATISTICSPAGE); // Check just for existence because this table is empty in CI environment as it's historical data - cy.get('.'.concat(TEST_ENTITY_PUBLICATION).concat('_TotalVisitsPerMonth')).should('exist'); + cy.get('.'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')).concat('_TotalVisitsPerMonth')).should('exist'); }); it('should pass accessibility tests', () => { diff --git a/cypress/e2e/login-modal.cy.ts b/cypress/e2e/login-modal.cy.ts index d29c13c2f9..673041e9f3 100644 --- a/cypress/e2e/login-modal.cy.ts +++ b/cypress/e2e/login-modal.cy.ts @@ -1,34 +1,33 @@ -import { TEST_ADMIN_PASSWORD, TEST_ADMIN_USER, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; const page = { openLoginMenu() { // Click the "Log In" dropdown menu in header - cy.get('ds-themed-navbar [data-test="login-menu"]').click(); + cy.get('ds-themed-header [data-test="login-menu"]').click(); }, openUserMenu() { // Once logged in, click the User menu in header - cy.get('ds-themed-navbar [data-test="user-menu"]').click(); + cy.get('ds-themed-header [data-test="user-menu"]').click(); }, submitLoginAndPasswordByPressingButton(email, password) { // Enter email - cy.get('ds-themed-navbar [data-test="email"]').type(email); + cy.get('ds-themed-header [data-test="email"]').type(email); // Enter password - cy.get('ds-themed-navbar [data-test="password"]').type(password); + cy.get('ds-themed-header [data-test="password"]').type(password); // Click login button - cy.get('ds-themed-navbar [data-test="login-button"]').click(); + cy.get('ds-themed-header [data-test="login-button"]').click(); }, submitLoginAndPasswordByPressingEnter(email, password) { // In opened Login modal, fill out email & password, then click Enter - cy.get('ds-themed-navbar [data-test="email"]').type(email); - cy.get('ds-themed-navbar [data-test="password"]').type(password); - cy.get('ds-themed-navbar [data-test="password"]').type('{enter}'); + cy.get('ds-themed-header [data-test="email"]').type(email); + cy.get('ds-themed-header [data-test="password"]').type(password); + cy.get('ds-themed-header [data-test="password"]').type('{enter}'); }, submitLogoutByPressingButton() { // This is the POST command that will actually log us out cy.intercept('POST', '/server/api/authn/logout').as('logout'); // Click logout button - cy.get('ds-themed-navbar [data-test="logout-button"]').click(); + cy.get('ds-themed-header [data-test="logout-button"]').click(); // Wait until above POST command responds before continuing // (This ensures next action waits until logout completes) cy.wait('@logout'); @@ -37,7 +36,7 @@ const page = { describe('Login Modal', () => { it('should login when clicking button & stay on same page', () => { - const ENTITYPAGE = '/entities/publication/'.concat(TEST_ENTITY_PUBLICATION); + const ENTITYPAGE = '/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')); cy.visit(ENTITYPAGE); // Login menu should exist @@ -47,7 +46,7 @@ describe('Login Modal', () => { page.openLoginMenu(); cy.get('.form-login').should('be.visible'); - page.submitLoginAndPasswordByPressingButton(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD); + page.submitLoginAndPasswordByPressingButton(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); cy.get('ds-log-in').should('not.exist'); // Verify we are still on the same page @@ -67,7 +66,7 @@ describe('Login Modal', () => { cy.get('.form-login').should('be.visible'); // Login, and the tag should no longer exist - page.submitLoginAndPasswordByPressingEnter(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD); + page.submitLoginAndPasswordByPressingEnter(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); cy.get('.form-login').should('not.exist'); // Verify we are still on homepage @@ -81,7 +80,7 @@ describe('Login Modal', () => { it('should support logout', () => { // First authenticate & access homepage - cy.login(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD); + cy.login(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); cy.visit('/'); // Verify ds-log-in tag doesn't exist, but ds-log-out tag does exist @@ -103,12 +102,15 @@ describe('Login Modal', () => { page.openLoginMenu(); // Registration link should be visible - cy.get('ds-themed-navbar [data-test="register"]').should('be.visible'); + cy.get('ds-themed-header [data-test="register"]').should('be.visible'); // Click registration link & you should go to registration page - cy.get('ds-themed-navbar [data-test="register"]').click(); + cy.get('ds-themed-header [data-test="register"]').click(); cy.location('pathname').should('eq', '/register'); cy.get('ds-register-email').should('exist'); + + // Test accessibility of this page + testA11y('ds-register-email'); }); it('should allow forgot password', () => { @@ -117,22 +119,32 @@ describe('Login Modal', () => { page.openLoginMenu(); // Forgot password link should be visible - cy.get('ds-themed-navbar [data-test="forgot"]').should('be.visible'); + cy.get('ds-themed-header [data-test="forgot"]').should('be.visible'); // Click link & you should go to Forgot Password page - cy.get('ds-themed-navbar [data-test="forgot"]').click(); + cy.get('ds-themed-header [data-test="forgot"]').click(); cy.location('pathname').should('eq', '/forgot'); cy.get('ds-forgot-email').should('exist'); + + // Test accessibility of this page + testA11y('ds-forgot-email'); }); - it('should pass accessibility tests', () => { + it('should pass accessibility tests in menus', () => { cy.visit('/'); + // Open login menu & verify accessibility page.openLoginMenu(); - cy.get('ds-log-in').should('exist'); - - // Analyze for accessibility issues testA11y('ds-log-in'); + + // Now login + page.submitLoginAndPasswordByPressingButton(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); + cy.get('ds-log-in').should('not.exist'); + + // Open user menu, verify user menu accesibility + page.openUserMenu(); + cy.get('ds-user-menu').should('be.visible'); + testA11y('ds-user-menu'); }); }); diff --git a/cypress/e2e/my-dspace.cy.ts b/cypress/e2e/my-dspace.cy.ts index 13f4a1b547..c48656ffcc 100644 --- a/cypress/e2e/my-dspace.cy.ts +++ b/cypress/e2e/my-dspace.cy.ts @@ -1,5 +1,3 @@ -import { Options } from 'cypress-axe'; -import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; describe('My DSpace page', () => { @@ -7,7 +5,7 @@ describe('My DSpace page', () => { cy.visit('/mydspace'); // This page is restricted, so we will be shown the login form. Fill it out & submit. - cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD); + cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD')); cy.get('ds-my-dspace-page').should('be.visible'); @@ -26,7 +24,7 @@ describe('My DSpace page', () => { cy.visit('/mydspace'); // This page is restricted, so we will be shown the login form. Fill it out & submit. - cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD); + cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD')); cy.get('ds-my-dspace-page').should('be.visible'); @@ -35,16 +33,8 @@ describe('My DSpace page', () => { cy.get('ds-object-detail').should('be.visible'); - // Analyze for accessibility issues - testA11y('ds-my-dspace-page', - { - rules: { - // Search filters fail these two "moderate" impact rules - 'heading-order': { enabled: false }, - 'landmark-unique': { enabled: false } - } - } as Options - ); + // Analyze for accessibility issues + testA11y('ds-my-dspace-page'); }); // NOTE: Deleting existing submissions is exercised by submission.spec.ts @@ -52,7 +42,7 @@ describe('My DSpace page', () => { cy.visit('/mydspace'); // This page is restricted, so we will be shown the login form. Fill it out & submit. - cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD); + cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD')); // Open the New Submission dropdown cy.get('button[data-test="submission-dropdown"]').click(); @@ -63,10 +53,10 @@ describe('My DSpace page', () => { cy.get('ds-create-item-parent-selector').should('be.visible'); // Type in a known Collection name in the search box - cy.get('ds-authorized-collection-selector input[type="search"]').type(TEST_SUBMIT_COLLECTION_NAME); + cy.get('ds-authorized-collection-selector input[type="search"]').type(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME')); // Click on the button matching that known Collection name - cy.get('ds-authorized-collection-selector button[title="'.concat(TEST_SUBMIT_COLLECTION_NAME).concat('"]')).click(); + cy.get('ds-authorized-collection-selector button[title="'.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME')).concat('"]')).click(); // New URL should include /workspaceitems, as we've started a new submission cy.url().should('include', '/workspaceitems'); @@ -75,7 +65,7 @@ describe('My DSpace page', () => { cy.get('ds-submission-edit').should('be.visible'); // A Collection menu button should exist & its value should be the selected collection - cy.get('#collectionControlsMenuButton span').should('have.text', TEST_SUBMIT_COLLECTION_NAME); + cy.get('#collectionControlsMenuButton span').should('have.text', Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME')); // Now that we've created a submission, we'll test that we can go back and Edit it. // Get our Submission URL, to parse out the ID of this new submission @@ -124,7 +114,7 @@ describe('My DSpace page', () => { cy.visit('/mydspace'); // This page is restricted, so we will be shown the login form. Fill it out & submit. - cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD); + cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD')); // Open the New Import dropdown cy.get('button[data-test="import-dropdown"]').click(); @@ -136,6 +126,9 @@ describe('My DSpace page', () => { // The external import searchbox should be visible cy.get('ds-submission-import-external-searchbar').should('be.visible'); + + // Test for accessibility issues + testA11y('ds-submission-import-external'); }); }); diff --git a/cypress/e2e/search-navbar.cy.ts b/cypress/e2e/search-navbar.cy.ts index 648db17fe6..28a72bcc78 100644 --- a/cypress/e2e/search-navbar.cy.ts +++ b/cypress/e2e/search-navbar.cy.ts @@ -1,23 +1,21 @@ -import { TEST_SEARCH_TERM } from 'cypress/support/e2e'; - const page = { fillOutQueryInNavBar(query) { // Click the magnifying glass - cy.get('ds-themed-navbar [data-test="header-search-icon"]').click(); + cy.get('ds-themed-header [data-test="header-search-icon"]').click(); // Fill out a query in input that appears - cy.get('ds-themed-navbar [data-test="header-search-box"]').type(query); + cy.get('ds-themed-header [data-test="header-search-box"]').type(query); }, submitQueryByPressingEnter() { - cy.get('ds-themed-navbar [data-test="header-search-box"]').type('{enter}'); + cy.get('ds-themed-header [data-test="header-search-box"]').type('{enter}'); }, submitQueryByPressingIcon() { - cy.get('ds-themed-navbar [data-test="header-search-icon"]').click(); + cy.get('ds-themed-header [data-test="header-search-icon"]').click(); } }; describe('Search from Navigation Bar', () => { // NOTE: these tests currently assume this query will return results! - const query = TEST_SEARCH_TERM; + const query = Cypress.env('DSPACE_TEST_SEARCH_TERM'); it('should go to search page with correct query if submitted (from home)', () => { cy.visit('/'); diff --git a/cypress/e2e/search-page.cy.ts b/cypress/e2e/search-page.cy.ts index 755f8eaac6..429f4e6da4 100644 --- a/cypress/e2e/search-page.cy.ts +++ b/cypress/e2e/search-page.cy.ts @@ -1,8 +1,10 @@ import { Options } from 'cypress-axe'; -import { TEST_SEARCH_TERM } from 'cypress/support/e2e'; import { testA11y } from 'cypress/support/utils'; describe('Search Page', () => { + // NOTE: these tests currently assume this query will return results! + const query = Cypress.env('DSPACE_TEST_SEARCH_TERM'); + it('should redirect to the correct url when query was set and submit button was triggered', () => { const queryString = 'Another interesting query string'; cy.visit('/search'); @@ -13,8 +15,8 @@ describe('Search Page', () => { }); it('should load results and pass accessibility tests', () => { - cy.visit('/search?query='.concat(TEST_SEARCH_TERM)); - cy.get('[data-test="search-box"]').should('have.value', TEST_SEARCH_TERM); + cy.visit('/search?query='.concat(query)); + cy.get('[data-test="search-box"]').should('have.value', query); // tag must be loaded cy.get('ds-search-page').should('be.visible'); @@ -31,7 +33,7 @@ describe('Search Page', () => { }); it('should have a working grid view that passes accessibility tests', () => { - cy.visit('/search?query='.concat(TEST_SEARCH_TERM)); + cy.visit('/search?query='.concat(query)); // Click button in sidebar to display grid view cy.get('ds-search-sidebar [data-test="grid-view"]').click(); @@ -46,9 +48,8 @@ describe('Search Page', () => { testA11y('ds-search-page', { rules: { - // Search filters fail these two "moderate" impact rules - 'heading-order': { enabled: false }, - 'landmark-unique': { enabled: false } + // Card titles fail this test currently + 'heading-order': { enabled: false } } } as Options ); diff --git a/cypress/e2e/submission.cy.ts b/cypress/e2e/submission.cy.ts index ed10b2d13a..4402410f23 100644 --- a/cypress/e2e/submission.cy.ts +++ b/cypress/e2e/submission.cy.ts @@ -1,14 +1,16 @@ -import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME, TEST_SUBMIT_COLLECTION_UUID } from 'cypress/support/e2e'; +import { testA11y } from 'cypress/support/utils'; +//import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME, TEST_SUBMIT_COLLECTION_UUID, TEST_ADMIN_USER, TEST_ADMIN_PASSWORD } from 'cypress/support/e2e'; +import { Options } from 'cypress-axe'; describe('New Submission page', () => { - // NOTE: We already test that new submissions can be started from MyDSpace in my-dspace.spec.ts + // NOTE: We already test that new Item submissions can be started from MyDSpace in my-dspace.spec.ts it('should create a new submission when using /submit path & pass accessibility', () => { // Test that calling /submit with collection & entityType will create a new submission - cy.visit('/submit?collection='.concat(TEST_SUBMIT_COLLECTION_UUID).concat('&entityType=none')); + cy.visit('/submit?collection='.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID')).concat('&entityType=none')); // This page is restricted, so we will be shown the login form. Fill it out & submit. - cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD); + cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD')); // Should redirect to /workspaceitems, as we've started a new submission cy.url().should('include', '/workspaceitems'); @@ -17,7 +19,7 @@ describe('New Submission page', () => { cy.get('ds-submission-edit').should('be.visible'); // A Collection menu button should exist & it's value should be the selected collection - cy.get('#collectionControlsMenuButton span').should('have.text', TEST_SUBMIT_COLLECTION_NAME); + cy.get('#collectionControlsMenuButton span').should('have.text', Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME')); // 4 sections should be visible by default cy.get('div#section_traditionalpageone').should('be.visible'); @@ -25,6 +27,25 @@ describe('New Submission page', () => { cy.get('div#section_upload').should('be.visible'); cy.get('div#section_license').should('be.visible'); + // Test entire page for accessibility + testA11y('ds-submission-edit', + { + rules: { + // Author & Subject fields have invalid "aria-multiline" attrs. + // See https://github.com/DSpace/dspace-angular/issues/1272 + 'aria-allowed-attr': { enabled: false }, + // All panels are accordians & fail "aria-required-children" and "nested-interactive". + // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216 + 'aria-required-children': { enabled: false }, + 'nested-interactive': { enabled: false }, + // All select boxes fail to have a name / aria-label. + // This is a bug in ng-dynamic-forms and may require https://github.com/DSpace/dspace-angular/issues/2216 + 'select-name': { enabled: false }, + } + + } as Options + ); + // Discard button should work // Clicking it will display a confirmation, which we will confirm with another click cy.get('button#discard').click(); @@ -33,10 +54,10 @@ describe('New Submission page', () => { it('should block submission & show errors if required fields are missing', () => { // Create a new submission - cy.visit('/submit?collection='.concat(TEST_SUBMIT_COLLECTION_UUID).concat('&entityType=none')); + cy.visit('/submit?collection='.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID')).concat('&entityType=none')); // This page is restricted, so we will be shown the login form. Fill it out & submit. - cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD); + cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD')); // Attempt an immediate deposit without filling out any fields cy.get('button#deposit').click(); @@ -93,10 +114,10 @@ describe('New Submission page', () => { it('should allow for deposit if all required fields completed & file uploaded', () => { // Create a new submission - cy.visit('/submit?collection='.concat(TEST_SUBMIT_COLLECTION_UUID).concat('&entityType=none')); + cy.visit('/submit?collection='.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID')).concat('&entityType=none')); // This page is restricted, so we will be shown the login form. Fill it out & submit. - cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD); + cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD')); // Fill out all required fields (Title, Date) cy.get('input#dc_title').type('DSpace logo uploaded via e2e tests'); @@ -131,4 +152,76 @@ describe('New Submission page', () => { cy.get('ds-notification div.alert-success').should('be.visible'); }); + it('is possible to submit a new "Person" and that form passes accessibility', () => { + // To submit a different entity type, we'll start from MyDSpace + cy.visit('/mydspace'); + + // This page is restricted, so we will be shown the login form. Fill it out & submit. + // NOTE: At this time, we MUST login as admin to submit Person objects + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); + + // Open the New Submission dropdown + cy.get('button[data-test="submission-dropdown"]').click(); + // Click on the "Person" type in that dropdown + cy.get('#entityControlsDropdownMenu button[title="Person"]').click(); + + // This should display the (popup window) + cy.get('ds-create-item-parent-selector').should('be.visible'); + + // Type in a known Collection name in the search box + cy.get('ds-authorized-collection-selector input[type="search"]').type(Cypress.env('DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME')); + + // Click on the button matching that known Collection name + cy.get('ds-authorized-collection-selector button[title="'.concat(Cypress.env('DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME')).concat('"]')).click(); + + // New URL should include /workspaceitems, as we've started a new submission + cy.url().should('include', '/workspaceitems'); + + // The Submission edit form tag should be visible + cy.get('ds-submission-edit').should('be.visible'); + + // A Collection menu button should exist & its value should be the selected collection + cy.get('#collectionControlsMenuButton span').should('have.text', Cypress.env('DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME')); + + // 3 sections should be visible by default + cy.get('div#section_personStep').should('be.visible'); + cy.get('div#section_upload').should('be.visible'); + cy.get('div#section_license').should('be.visible'); + + // Test entire page for accessibility + testA11y('ds-submission-edit', + { + rules: { + // All panels are accordians & fail "aria-required-children" and "nested-interactive". + // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216 + 'aria-required-children': { enabled: false }, + 'nested-interactive': { enabled: false }, + } + + } as Options + ); + + // Click the lookup button next to "Publication" field + cy.get('button[data-test="lookup-button"]').click(); + + // A popup modal window should be visible + cy.get('ds-dynamic-lookup-relation-modal').should('be.visible'); + + // Popup modal should also pass accessibility tests + //testA11y('ds-dynamic-lookup-relation-modal'); + testA11y({ + include: ['ds-dynamic-lookup-relation-modal'], + exclude: [ + ['ul.nav-tabs'] // Tabs at top of model have several issues which seem to be caused by ng-bootstrap + ], + }); + + // Close popup window + cy.get('ds-dynamic-lookup-relation-modal button.close').click(); + + // Back on the form, click the discard button to remove new submission + // Clicking it will display a confirmation, which we will confirm with another click + cy.get('button#discard').click(); + cy.get('button#discard_submit').click(); + }); }); diff --git a/cypress/plugins/index.ts b/cypress/plugins/index.ts index ead38afb92..cc3dccba38 100644 --- a/cypress/plugins/index.ts +++ b/cypress/plugins/index.ts @@ -1,5 +1,11 @@ const fs = require('fs'); +// These two global variables are used to store information about the REST API used +// by these e2e tests. They are filled out prior to running any tests in the before() +// method of e2e.ts. They can then be accessed by any tests via the getters below. +let REST_BASE_URL: string; +let REST_DOMAIN: string; + // Plugins enable you to tap into, modify, or extend the internal behavior of Cypress // For more info, visit https://on.cypress.io/plugins-api module.exports = (on, config) => { @@ -30,6 +36,24 @@ module.exports = (on, config) => { } return null; + }, + // Save value of REST Base URL, looked up before all tests. + // This allows other tests to use it easily via getRestBaseURL() below. + saveRestBaseURL(url: string) { + return (REST_BASE_URL = url); + }, + // Retrieve currently saved value of REST Base URL + getRestBaseURL() { + return REST_BASE_URL ; + }, + // Save value of REST Domain, looked up before all tests. + // This allows other tests to use it easily via getRestBaseDomain() below. + saveRestBaseDomain(domain: string) { + return (REST_DOMAIN = domain); + }, + // Retrieve currently saved value of REST Domain + getRestBaseDomain() { + return REST_DOMAIN ; } }); }; diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 92f0b1aeeb..7da454e2d0 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -5,11 +5,7 @@ import { AuthTokenInfo, TOKENITEM } from 'src/app/core/auth/models/auth-token-info.model'; import { DSPACE_XSRF_COOKIE, XSRF_REQUEST_HEADER } from 'src/app/core/xsrf/xsrf.constants'; - -// NOTE: FALLBACK_TEST_REST_BASE_URL is only used if Cypress cannot read the REST API BaseURL -// from the Angular UI's config.json. See 'login()'. -export const FALLBACK_TEST_REST_BASE_URL = 'http://localhost:8080/server'; -export const FALLBACK_TEST_REST_DOMAIN = 'localhost'; +import { v4 as uuidv4 } from 'uuid'; // Declare Cypress namespace to help with Intellisense & code completion in IDEs // ALL custom commands MUST be listed here for code completion to work @@ -41,6 +37,13 @@ declare global { * @param dsoType type of DSpace Object (e.g. "item", "collection", "community") */ generateViewEvent(uuid: string, dsoType: string): typeof generateViewEvent; + + /** + * Create a new CSRF token and add to required Cookie. CSRF Token is returned + * in chainable in order to allow it to be sent also in required CSRF header. + * @returns Chainable reference to allow CSRF token to also be sent in header. + */ + createCSRFCookie(): Chainable; } } } @@ -54,59 +57,32 @@ declare global { * @param password password to login as */ function login(email: string, password: string): void { - // Cypress doesn't have access to the running application in Node.js. - // So, it's not possible to inject or load the AppConfig or environment of the Angular UI. - // Instead, we'll read our running application's config.json, which contains the configs & - // is regenerated at runtime each time the Angular UI application starts up. - cy.task('readUIConfig').then((str: string) => { - // Parse config into a JSON object - const config = JSON.parse(str); + // Create a fake CSRF cookie/token to use in POST + cy.createCSRFCookie().then((csrfToken: string) => { + // get our REST API's base URL, also needed for POST + cy.task('getRestBaseURL').then((baseRestUrl: string) => { + // Now, send login POST request including that CSRF token + cy.request({ + method: 'POST', + url: baseRestUrl + '/api/authn/login', + headers: { [XSRF_REQUEST_HEADER]: csrfToken}, + form: true, // indicates the body should be form urlencoded + body: { user: email, password: password } + }).then((resp) => { + // We expect a successful login + expect(resp.status).to.eq(200); + // We expect to have a valid authorization header returned (with our auth token) + expect(resp.headers).to.have.property('authorization'); - // Find the URL of our REST API. Have a fallback ready, just in case 'rest.baseUrl' cannot be found. - let baseRestUrl = FALLBACK_TEST_REST_BASE_URL; - if (!config.rest.baseUrl) { - console.warn("Could not load 'rest.baseUrl' from config.json. Falling back to " + FALLBACK_TEST_REST_BASE_URL); - } else { - //console.log("Found 'rest.baseUrl' in config.json. Using this REST API for login: ".concat(config.rest.baseUrl)); - baseRestUrl = config.rest.baseUrl; - } + // Initialize our AuthTokenInfo object from the authorization header. + const authheader = resp.headers.authorization as string; + const authinfo: AuthTokenInfo = new AuthTokenInfo(authheader); - // Now find domain of our REST API, again with a fallback. - let baseDomain = FALLBACK_TEST_REST_DOMAIN; - if (!config.rest.host) { - console.warn("Could not load 'rest.host' from config.json. Falling back to " + FALLBACK_TEST_REST_DOMAIN); - } else { - baseDomain = config.rest.host; - } - - // Create a fake CSRF Token. Set it in the required server-side cookie - const csrfToken = 'fakeLoginCSRFToken'; - cy.setCookie(DSPACE_XSRF_COOKIE, csrfToken, { 'domain': baseDomain }); - - // Now, send login POST request including that CSRF token - cy.request({ - method: 'POST', - url: baseRestUrl + '/api/authn/login', - headers: { [XSRF_REQUEST_HEADER]: csrfToken}, - form: true, // indicates the body should be form urlencoded - body: { user: email, password: password } - }).then((resp) => { - // We expect a successful login - expect(resp.status).to.eq(200); - // We expect to have a valid authorization header returned (with our auth token) - expect(resp.headers).to.have.property('authorization'); - - // Initialize our AuthTokenInfo object from the authorization header. - const authheader = resp.headers.authorization as string; - const authinfo: AuthTokenInfo = new AuthTokenInfo(authheader); - - // Save our AuthTokenInfo object to our dsAuthInfo UI cookie - // This ensures the UI will recognize we are logged in on next "visit()" - cy.setCookie(TOKENITEM, JSON.stringify(authinfo)); + // Save our AuthTokenInfo object to our dsAuthInfo UI cookie + // This ensures the UI will recognize we are logged in on next "visit()" + cy.setCookie(TOKENITEM, JSON.stringify(authinfo)); + }); }); - - // Remove cookie with fake CSRF token, as it's no longer needed - cy.clearCookie(DSPACE_XSRF_COOKIE); }); } // Add as a Cypress command (i.e. assign to 'cy.login') @@ -141,56 +117,53 @@ Cypress.Commands.add('loginViaForm', loginViaForm); * @param dsoType type of DSpace Object (e.g. "item", "collection", "community") */ function generateViewEvent(uuid: string, dsoType: string): void { - // Cypress doesn't have access to the running application in Node.js. - // So, it's not possible to inject or load the AppConfig or environment of the Angular UI. - // Instead, we'll read our running application's config.json, which contains the configs & - // is regenerated at runtime each time the Angular UI application starts up. - cy.task('readUIConfig').then((str: string) => { - // Parse config into a JSON object - const config = JSON.parse(str); - - // Find the URL of our REST API. Have a fallback ready, just in case 'rest.baseUrl' cannot be found. - let baseRestUrl = FALLBACK_TEST_REST_BASE_URL; - if (!config.rest.baseUrl) { - console.warn("Could not load 'rest.baseUrl' from config.json. Falling back to " + FALLBACK_TEST_REST_BASE_URL); - } else { - baseRestUrl = config.rest.baseUrl; - } - - // Now find domain of our REST API, again with a fallback. - let baseDomain = FALLBACK_TEST_REST_DOMAIN; - if (!config.rest.host) { - console.warn("Could not load 'rest.host' from config.json. Falling back to " + FALLBACK_TEST_REST_DOMAIN); - } else { - baseDomain = config.rest.host; - } - - // Create a fake CSRF Token. Set it in the required server-side cookie - const csrfToken = 'fakeGenerateViewEventCSRFToken'; - cy.setCookie(DSPACE_XSRF_COOKIE, csrfToken, { 'domain': baseDomain }); - - // Now, send 'statistics/viewevents' POST request including that fake CSRF token in required header - cy.request({ - method: 'POST', - url: baseRestUrl + '/api/statistics/viewevents', - headers: { - [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 }, - }).then((resp) => { - // We expect a 201 (which means statistics event was created) - expect(resp.status).to.eq(201); + // Create a fake CSRF cookie/token to use in POST + cy.createCSRFCookie().then((csrfToken: string) => { + // get our REST API's base URL, also needed for POST + cy.task('getRestBaseURL').then((baseRestUrl: string) => { + // Now, send 'statistics/viewevents' POST request including that fake CSRF token in required header + cy.request({ + method: 'POST', + url: baseRestUrl + '/api/statistics/viewevents', + headers: { + [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 }, + }).then((resp) => { + // We expect a 201 (which means statistics event was created) + expect(resp.status).to.eq(201); + }); }); - - // Remove cookie with fake CSRF token, as it's no longer needed - cy.clearCookie(DSPACE_XSRF_COOKIE); }); } // Add as a Cypress command (i.e. assign to 'cy.generateViewEvent') Cypress.Commands.add('generateViewEvent', generateViewEvent); + +/** + * Can be used by tests to generate a random XSRF/CSRF token and save it to + * the required XSRF/CSRF cookie for usage when sending POST requests or similar. + * The generated CSRF token is returned in a Chainable to allow it to be also sent + * in the CSRF HTTP Header. + * @returns a Cypress Chainable which can be used to get the generated CSRF Token + */ +function createCSRFCookie(): Cypress.Chainable { + // Generate a new token which is a random UUID + const csrfToken: string = uuidv4(); + + // Save it to our required cookie + cy.task('getRestBaseDomain').then((baseDomain: string) => { + // Create a fake CSRF Token. Set it in the required server-side cookie + cy.setCookie(DSPACE_XSRF_COOKIE, csrfToken, { 'domain': baseDomain }); + }); + + // return the generated token wrapped in a chainable + return cy.wrap(csrfToken); +} +// Add as a Cypress command (i.e. assign to 'cy.createCSRFCookie') +Cypress.Commands.add('createCSRFCookie', createCSRFCookie); diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index dd7ee1824c..b2255a7da6 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -19,45 +19,53 @@ import './commands'; // Import Cypress Axe tools for all tests // https://github.com/component-driven/cypress-axe import 'cypress-axe'; +import { DSPACE_XSRF_COOKIE } from 'src/app/core/xsrf/xsrf.constants'; + +// Runs once before all tests +before(() => { + // Cypress doesn't have access to the running application in Node.js. + // So, it's not possible to inject or load the AppConfig or environment of the Angular UI. + // Instead, we'll read our running application's config.json, which contains the configs & + // is regenerated at runtime each time the Angular UI application starts up. + cy.task('readUIConfig').then((str: string) => { + // Parse config into a JSON object + const config = JSON.parse(str); + + // Find URL of our REST API & save to global variable via task + let baseRestUrl = FALLBACK_TEST_REST_BASE_URL; + if (!config.rest.baseUrl) { + console.warn("Could not load 'rest.baseUrl' from config.json. Falling back to " + FALLBACK_TEST_REST_BASE_URL); + } else { + baseRestUrl = config.rest.baseUrl; + } + cy.task('saveRestBaseURL', baseRestUrl); + + // Find domain of our REST API & save to global variable via task. + let baseDomain = FALLBACK_TEST_REST_DOMAIN; + if (!config.rest.host) { + console.warn("Could not load 'rest.host' from config.json. Falling back to " + FALLBACK_TEST_REST_DOMAIN); + } else { + baseDomain = config.rest.host; + } + cy.task('saveRestBaseDomain', baseDomain); + + }); +}); // Runs once before the first test in each "block" beforeEach(() => { // Pre-agree to all Klaro cookies by setting the klaro-anonymous cookie // This just ensures it doesn't get in the way of matching other objects in the page. cy.setCookie('klaro-anonymous', '{%22authentication%22:true%2C%22preferences%22:true%2C%22acknowledgement%22:true%2C%22google-analytics%22:true%2C%22google-recaptcha%22:true}'); + + // Remove any CSRF cookies saved from prior tests + cy.clearCookie(DSPACE_XSRF_COOKIE); }); -// For better stability between tests, we visit "about:blank" (i.e. blank page) after each test. -// This ensures any remaining/outstanding XHR requests are killed, so they don't affect the next test. -// Borrowed from: https://glebbahmutov.com/blog/visit-blank-page-between-tests/ -/*afterEach(() => { - cy.window().then((win) => { - win.location.href = 'about:blank'; - }); -});*/ - - -// Global constants used in tests -// May be overridden in our cypress.json config file using specified environment variables. -// Default values listed here are all valid for the Demo Entities Data set available at -// https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data -// (This is the data set used in our CI environment) - -// Admin account used for administrative tests -export const TEST_ADMIN_USER = Cypress.env('DSPACE_TEST_ADMIN_USER') || 'dspacedemo+admin@gmail.com'; -export const TEST_ADMIN_PASSWORD = Cypress.env('DSPACE_TEST_ADMIN_PASSWORD') || 'dspace'; -// Community/collection/publication used for view/edit tests -export const TEST_COLLECTION = Cypress.env('DSPACE_TEST_COLLECTION') || '282164f5-d325-4740-8dd1-fa4d6d3e7200'; -export const TEST_COMMUNITY = Cypress.env('DSPACE_TEST_COMMUNITY') || '0958c910-2037-42a9-81c7-dca80e3892b4'; -export const TEST_ENTITY_PUBLICATION = Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION') || 'e98b0f27-5c19-49a0-960d-eb6ad5287067'; -// Search term (should return results) used in search tests -export const TEST_SEARCH_TERM = Cypress.env('DSPACE_TEST_SEARCH_TERM') || 'test'; -// Collection used for submission tests -export const TEST_SUBMIT_COLLECTION_NAME = Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME') || 'Sample Collection'; -export const TEST_SUBMIT_COLLECTION_UUID = Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID') || '9d8334e9-25d3-4a67-9cea-3dffdef80144'; -export const TEST_SUBMIT_USER = Cypress.env('DSPACE_TEST_SUBMIT_USER') || 'dspacedemo+submit@gmail.com'; -export const TEST_SUBMIT_USER_PASSWORD = Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD') || 'dspace'; - +// NOTE: FALLBACK_TEST_REST_BASE_URL is only used if Cypress cannot read the REST API BaseURL +// from the Angular UI's config.json. See 'before()' above. +const FALLBACK_TEST_REST_BASE_URL = 'http://localhost:8080/server'; +const FALLBACK_TEST_REST_DOMAIN = 'localhost'; // USEFUL REGEX for testing diff --git a/docker/cli.assetstore.yml b/docker/cli.assetstore.yml index 40e4974c7c..31bc53f64d 100644 --- a/docker/cli.assetstore.yml +++ b/docker/cli.assetstore.yml @@ -14,13 +14,8 @@ # Therefore, it should be kept in sync with that file version: "3.7" -networks: - dspacenet: - services: dspace-cli: - networks: - dspacenet: {} environment: # This assetstore zip is available from https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data - LOADASSETS=https://github.com/DSpace-Labs/AIP-Files/releases/download/demo-entities-data/assetstore.tar.gz diff --git a/docker/cli.yml b/docker/cli.yml index 223ec356b9..cc266b186f 100644 --- a/docker/cli.yml +++ b/docker/cli.yml @@ -13,7 +13,13 @@ # # Therefore, it should be kept in sync with that file version: "3.7" - +networks: + # Default to using network named 'dspacenet' from docker-compose-rest.yml. + # Its full name will be prepended with the project name (e.g. "-p d7" means it will be named "d7_dspacenet") + # If COMPOSITE_PROJECT_NAME is missing, default value will be "docker" (name of folder this file is in) + default: + name: ${COMPOSE_PROJECT_NAME:-docker}_dspacenet + external: true services: dspace-cli: image: "${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-latest}" @@ -30,16 +36,12 @@ services: # solr.server: Ensure we are using the 'dspacesolr' image for Solr solr__P__server: http://dspacesolr:8983/solr volumes: - - "assetstore:/dspace/assetstore" + # Keep DSpace assetstore directory between reboots + - assetstore:/dspace/assetstore entrypoint: /dspace/bin/dspace command: help - networks: - - dspacenet tty: true stdin_open: true volumes: assetstore: - -networks: - dspacenet: diff --git a/docker/docker-compose-ci.yml b/docker/docker-compose-ci.yml index edbb5b0759..07993e20c6 100644 --- a/docker/docker-compose-ci.yml +++ b/docker/docker-compose-ci.yml @@ -33,11 +33,11 @@ services: # Tell Statistics to commit all views immediately instead of waiting on Solr's autocommit. # This allows us to generate statistics in e2e tests so that statistics pages can be tested thoroughly. solr__D__statistics__P__autoCommit: 'false' + image: "${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-latest-test}" depends_on: - dspacedb - image: dspace/dspace:latest-test networks: - dspacenet: + - dspacenet ports: - published: 8080 target: 8080 @@ -45,8 +45,6 @@ services: tty: true volumes: - assetstore:/dspace/assetstore - # Mount DSpace's solr configs to a volume, so that we can share to 'dspacesolr' container (see below) - - solr_configs:/dspace/solr # Ensure that the database is ready BEFORE starting tomcat # 1. While a TCP connection to dspacedb port 5432 is not available, continue to sleep # 2. Then, run database migration to init database tables (including any out-of-order ignored migrations, if any) @@ -70,21 +68,18 @@ services: PGDATA: /pgdata image: dspace/dspace-postgres-pgcrypto:loadsql networks: - dspacenet: + - dspacenet stdin_open: true tty: true volumes: + # Keep Postgres data directory between reboots - pgdata:/pgdata # DSpace Solr container dspacesolr: container_name: dspacesolr - # Uses official Solr image at https://hub.docker.com/_/solr/ - image: solr:8.11-slim - # Needs main 'dspace' container to start first to guarantee access to solr_configs - depends_on: - - dspace + image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}" networks: - dspacenet: + - dspacenet ports: - published: 8983 target: 8983 @@ -92,9 +87,6 @@ services: tty: true working_dir: /var/solr/data volumes: - # Mount our "solr_configs" volume available under the Solr's configsets folder (in a 'dspace' subfolder) - # This copies the Solr configs from main 'dspace' container into 'dspacesolr' via that volume - - solr_configs:/opt/solr/server/solr/configsets/dspace # Keep Solr data directory between reboots - solr_data:/var/solr/data # Initialize all DSpace Solr cores using the mounted configsets (see above), then start Solr @@ -103,14 +95,18 @@ services: - '-c' - | init-var-solr - precreate-core authority /opt/solr/server/solr/configsets/dspace/authority - precreate-core oai /opt/solr/server/solr/configsets/dspace/oai - precreate-core search /opt/solr/server/solr/configsets/dspace/search - precreate-core statistics /opt/solr/server/solr/configsets/dspace/statistics + precreate-core authority /opt/solr/server/solr/configsets/authority + cp -r /opt/solr/server/solr/configsets/authority/* authority + precreate-core oai /opt/solr/server/solr/configsets/oai + cp -r /opt/solr/server/solr/configsets/oai/* oai + precreate-core search /opt/solr/server/solr/configsets/search + cp -r /opt/solr/server/solr/configsets/search/* search + precreate-core statistics /opt/solr/server/solr/configsets/statistics + cp -r /opt/solr/server/solr/configsets/statistics/* statistics + precreate-core qaevent /opt/solr/server/solr/configsets/qaevent + cp -r /opt/solr/server/solr/configsets/qaevent/* qaevent exec solr -f volumes: assetstore: pgdata: solr_data: - # Special volume used to share Solr configs from 'dspace' to 'dspacesolr' container (see above) - solr_configs: \ No newline at end of file diff --git a/docker/docker-compose-rest.yml b/docker/docker-compose-rest.yml index ea766600ef..e1577ec837 100644 --- a/docker/docker-compose-rest.yml +++ b/docker/docker-compose-rest.yml @@ -43,7 +43,7 @@ services: depends_on: - dspacedb networks: - dspacenet: + - dspacenet ports: - published: 8080 target: 8080 @@ -51,8 +51,6 @@ services: tty: true volumes: - assetstore:/dspace/assetstore - # Mount DSpace's solr configs to a volume, so that we can share to 'dspacesolr' container (see below) - - solr_configs:/dspace/solr # Ensure that the database is ready BEFORE starting tomcat # 1. While a TCP connection to dspacedb port 5432 is not available, continue to sleep # 2. Then, run database migration to init database tables @@ -69,25 +67,23 @@ services: container_name: dspacedb environment: PGDATA: /pgdata - image: dspace/dspace-postgres-pgcrypto + image: "${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-latest}" networks: - dspacenet: + - dspacenet ports: - published: 5432 target: 5432 stdin_open: true tty: true volumes: + # Keep Postgres data directory between reboots - pgdata:/pgdata # DSpace Solr container dspacesolr: container_name: dspacesolr image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}" - # Needs main 'dspace' container to start first to guarantee access to solr_configs - depends_on: - - dspace networks: - dspacenet: + - dspacenet ports: - published: 8983 target: 8983 @@ -115,10 +111,10 @@ services: cp -r /opt/solr/server/solr/configsets/search/* search precreate-core statistics /opt/solr/server/solr/configsets/statistics cp -r /opt/solr/server/solr/configsets/statistics/* statistics + precreate-core qaevent /opt/solr/server/solr/configsets/qaevent + cp -r /opt/solr/server/solr/configsets/qaevent/* qaevent exec solr -f volumes: assetstore: pgdata: solr_data: - # Special volume used to share Solr configs from 'dspace' to 'dspacesolr' container (see above) - solr_configs: diff --git a/karma.conf.js b/karma.conf.js index 8418312b1a..f96558bfaf 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -15,7 +15,10 @@ module.exports = function (config) { ], client: { clearContext: false, // leave Jasmine Spec Runner output visible in browser - captureConsole: false + captureConsole: false, + jasmine: { + failSpecWithNoExpectations: true + } }, coverageIstanbulReporter: { dir: require('path').join(__dirname, './coverage/dspace-angular'), diff --git a/package.json b/package.json index 553962dfeb..c0a3843605 100644 --- a/package.json +++ b/package.json @@ -121,14 +121,14 @@ "ngx-infinite-scroll": "^15.0.0", "ngx-pagination": "6.0.3", "ngx-sortablejs": "^11.1.0", - "ngx-ui-switch": "^14.0.3", + "ngx-ui-switch": "^14.1.0", "nouislider": "^15.7.1", "pem": "1.14.7", "prop-types": "^15.8.1", "react-copy-to-clipboard": "^5.1.0", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.0", - "sanitize-html": "^2.10.0", + "sanitize-html": "^2.12.1", "sortablejs": "1.15.0", "uuid": "^8.3.2", "webfontloader": "1.6.28", @@ -142,7 +142,7 @@ "@angular-eslint/eslint-plugin-template": "15.2.1", "@angular-eslint/schematics": "15.2.1", "@angular-eslint/template-parser": "15.2.1", - "@angular/cli": "^15.2.6", + "@angular/cli": "^16.0.4", "@angular/compiler-cli": "^15.2.8", "@angular/language-service": "^15.2.8", "@cypress/schematic": "^1.5.0", @@ -170,9 +170,12 @@ "eslint": "^8.39.0", "eslint-plugin-deprecation": "^1.4.1", "eslint-plugin-import": "^2.27.5", - "eslint-plugin-jsdoc": "^39.6.4", + "eslint-plugin-import-newlines": "^1.3.1", + "eslint-plugin-jsdoc": "^45.0.0", "eslint-plugin-jsonc": "^2.6.0", "eslint-plugin-lodash": "^7.4.0", + "eslint-plugin-rxjs": "^5.0.3", + "eslint-plugin-simple-import-sort": "^10.0.0", "eslint-plugin-unused-imports": "^2.0.0", "express-static-gzip": "^2.1.7", "jasmine-core": "^3.8.0", diff --git a/src/app/access-control/access-control-routing-paths.ts b/src/app/access-control/access-control-routing-paths.ts index 31f39f1c47..06ae032194 100644 --- a/src/app/access-control/access-control-routing-paths.ts +++ b/src/app/access-control/access-control-routing-paths.ts @@ -1,5 +1,5 @@ -import { URLCombiner } from '../core/url-combiner/url-combiner'; import { getAccessControlModuleRoute } from '../app-routing-paths'; +import { URLCombiner } from '../core/url-combiner/url-combiner'; export const EPERSON_PATH = 'epeople'; diff --git a/src/app/access-control/access-control-routing.module.ts b/src/app/access-control/access-control-routing.module.ts index 97d049ad83..e85961fd13 100644 --- a/src/app/access-control/access-control-routing.module.ts +++ b/src/app/access-control/access-control-routing.module.ts @@ -1,20 +1,20 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component'; -import { GroupFormComponent } from './group-registry/group-form/group-form.component'; -import { GroupsRegistryComponent } from './group-registry/groups-registry.component'; -import { 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'; + EPERSON_PATH, + GROUP_PATH, +} from './access-control-routing-paths'; import { BulkAccessComponent } from './bulk-access/bulk-access.component'; +import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component'; import { EPersonFormComponent } from './epeople-registry/eperson-form/eperson-form.component'; import { EPersonResolver } from './epeople-registry/eperson-resolver.service'; +import { GroupFormComponent } from './group-registry/group-form/group-form.component'; +import { GroupPageGuard } from './group-registry/group-page.guard'; +import { GroupsRegistryComponent } from './group-registry/groups-registry.component'; @NgModule({ imports: [ @@ -23,10 +23,10 @@ import { EPersonResolver } from './epeople-registry/eperson-resolver.service'; path: EPERSON_PATH, component: EPeopleRegistryComponent, resolve: { - breadcrumb: I18nBreadcrumbResolver + breadcrumb: I18nBreadcrumbResolver, }, data: { title: 'admin.access-control.epeople.title', breadcrumbKey: 'admin.access-control.epeople' }, - canActivate: [SiteAdministratorGuard] + canActivate: [SiteAdministratorGuard], }, { path: `${EPERSON_PATH}/create`, @@ -51,40 +51,40 @@ import { EPersonResolver } from './epeople-registry/eperson-resolver.service'; path: GROUP_PATH, component: GroupsRegistryComponent, resolve: { - breadcrumb: I18nBreadcrumbResolver + breadcrumb: I18nBreadcrumbResolver, }, data: { title: 'admin.access-control.groups.title', breadcrumbKey: 'admin.access-control.groups' }, - canActivate: [GroupAdministratorGuard] + canActivate: [GroupAdministratorGuard], }, { path: `${GROUP_PATH}/create`, component: GroupFormComponent, resolve: { - breadcrumb: I18nBreadcrumbResolver + breadcrumb: I18nBreadcrumbResolver, }, data: { title: 'admin.access-control.groups.title.addGroup', breadcrumbKey: 'admin.access-control.groups.addGroup' }, - canActivate: [GroupAdministratorGuard] + canActivate: [GroupAdministratorGuard], }, { path: `${GROUP_PATH}/:groupId/edit`, component: GroupFormComponent, resolve: { - breadcrumb: I18nBreadcrumbResolver + breadcrumb: I18nBreadcrumbResolver, }, data: { title: 'admin.access-control.groups.title.singleGroup', breadcrumbKey: 'admin.access-control.groups.singleGroup' }, - canActivate: [GroupPageGuard] + canActivate: [GroupPageGuard], }, { path: 'bulk-access', component: BulkAccessComponent, resolve: { - breadcrumb: I18nBreadcrumbResolver + breadcrumb: I18nBreadcrumbResolver, }, data: { title: 'admin.access-control.bulk-access.title', breadcrumbKey: 'admin.access-control.bulk-access' }, - canActivate: [SiteAdministratorGuard] + canActivate: [SiteAdministratorGuard], }, - ]) - ] + ]), + ], }) /** * Routing module for the AccessControl section of the admin sidebar diff --git a/src/app/access-control/access-control.module.ts b/src/app/access-control/access-control.module.ts index 3dc4b6cedc..87737987e0 100644 --- a/src/app/access-control/access-control.module.ts +++ b/src/app/access-control/access-control.module.ts @@ -1,23 +1,27 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { AbstractControl } from '@angular/forms'; import { RouterModule } from '@angular/router'; +import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'; +import { + DYNAMIC_ERROR_MESSAGES_MATCHER, + DynamicErrorMessagesMatcher, +} from '@ng-dynamic-forms/core'; + +import { AccessControlFormModule } from '../shared/access-control-form-container/access-control-form.module'; +import { FormModule } from '../shared/form/form.module'; +import { SearchModule } from '../shared/search/search.module'; import { SharedModule } from '../shared/shared.module'; import { AccessControlRoutingModule } from './access-control-routing.module'; +import { BulkAccessBrowseComponent } from './bulk-access/browse/bulk-access-browse.component'; +import { BulkAccessComponent } from './bulk-access/bulk-access.component'; +import { BulkAccessSettingsComponent } from './bulk-access/settings/bulk-access-settings.component'; import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component'; import { EPersonFormComponent } from './epeople-registry/eperson-form/eperson-form.component'; import { GroupFormComponent } from './group-registry/group-form/group-form.component'; import { MembersListComponent } from './group-registry/group-form/members-list/members-list.component'; import { SubgroupsListComponent } from './group-registry/group-form/subgroup-list/subgroups-list.component'; import { GroupsRegistryComponent } from './group-registry/groups-registry.component'; -import { FormModule } from '../shared/form/form.module'; -import { DYNAMIC_ERROR_MESSAGES_MATCHER, DynamicErrorMessagesMatcher } from '@ng-dynamic-forms/core'; -import { AbstractControl } from '@angular/forms'; -import { BulkAccessComponent } from './bulk-access/bulk-access.component'; -import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'; -import { BulkAccessBrowseComponent } from './bulk-access/browse/bulk-access-browse.component'; -import { BulkAccessSettingsComponent } from './bulk-access/settings/bulk-access-settings.component'; -import { SearchModule } from '../shared/search/search.module'; -import { AccessControlFormModule } from '../shared/access-control-form-container/access-control-form.module'; /** * Condition for displaying error messages on email form field @@ -55,9 +59,9 @@ export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher = providers: [ { provide: DYNAMIC_ERROR_MESSAGES_MATCHER, - useValue: ValidateEmailErrorStateMatcher + useValue: ValidateEmailErrorStateMatcher, }, - ] + ], }) /** * This module handles all components related to the access control pages diff --git a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html index c716aedb8b..6e967b53b5 100644 --- a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html +++ b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html @@ -1,15 +1,15 @@ -
-
-
+
+
@@ -17,51 +17,53 @@
- -
+
+ +
+
diff --git a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.spec.ts b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.spec.ts index 87b2a8d568..e99c25a195 100644 --- a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.spec.ts +++ b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.spec.ts @@ -1,16 +1,22 @@ -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 { + ComponentFixture, + TestBed, + waitForAsync, +} from '@angular/core/testing'; +import { + NgbAccordionModule, + NgbNavModule, +} from '@ng-bootstrap/ng-bootstrap'; import { TranslateModule } from '@ngx-translate/core'; +import { of } from 'rxjs'; -import { BulkAccessBrowseComponent } from './bulk-access-browse.component'; +import { buildPaginatedList } from '../../../core/data/paginated-list.model'; +import { PageInfo } from '../../../core/shared/page-info.model'; import { 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'; +import { BulkAccessBrowseComponent } from './bulk-access-browse.component'; describe('BulkAccessBrowseComponent', () => { let component: BulkAccessBrowseComponent; @@ -31,13 +37,13 @@ describe('BulkAccessBrowseComponent', () => { imports: [ NgbAccordionModule, NgbNavModule, - TranslateModule.forRoot() + TranslateModule.forRoot(), ], declarations: [BulkAccessBrowseComponent], - providers: [ { provide: SelectableListService, useValue: selectableListService }, ], + providers: [ { provide: SelectableListService, useValue: selectableListService } ], schemas: [ - NO_ERRORS_SCHEMA - ] + NO_ERRORS_SCHEMA, + ], }).compileComponents(); })); @@ -72,7 +78,7 @@ describe('BulkAccessBrowseComponent', () => { 'elementsPerPage': 5, 'totalElements': 2, 'totalPages': 1, - 'currentPage': 1 + 'currentPage': 1, }), [selected1, selected2]) ; const rd = createSuccessfulRemoteDataObject(list); diff --git a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.ts b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.ts index e806e729c8..6b221f107e 100644 --- a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.ts +++ b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.ts @@ -1,19 +1,32 @@ -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { + Component, + Input, + OnDestroy, + OnInit, +} from '@angular/core'; +import { + BehaviorSubject, + Subscription, +} from 'rxjs'; +import { + distinctUntilChanged, + map, +} from 'rxjs/operators'; -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 { + buildPaginatedList, + PaginatedList, +} from '../../../core/data/paginated-list.model'; import { RemoteData } from '../../../core/data/remote-data'; -import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model'; -import { ListableObject } from '../../../shared/object-collection/shared/listable-object.model'; -import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils'; import { PageInfo } from '../../../core/shared/page-info.model'; -import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model'; +import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service'; +import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component'; import { hasValue } from '../../../shared/empty.util'; +import { ListableObject } from '../../../shared/object-collection/shared/listable-object.model'; +import { SelectableListState } from '../../../shared/object-list/selectable-list/selectable-list.reducer'; +import { SelectableListService } from '../../../shared/object-list/selectable-list/selectable-list.service'; +import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model'; +import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils'; @Component({ selector: 'ds-bulk-access-browse', @@ -22,9 +35,9 @@ import { hasValue } from '../../../shared/empty.util'; providers: [ { provide: SEARCH_CONFIG_SERVICE, - useClass: SearchConfigurationService - } - ] + useClass: SearchConfigurationService, + }, + ], }) export class BulkAccessBrowseComponent implements OnInit, OnDestroy { @@ -49,7 +62,7 @@ export class BulkAccessBrowseComponent implements OnInit, OnDestroy { paginationOptions$: BehaviorSubject = new BehaviorSubject(Object.assign(new PaginationComponentOptions(), { id: 'bas', pageSize: 5, - currentPage: 1 + currentPage: 1, })); /** @@ -67,20 +80,20 @@ export class BulkAccessBrowseComponent implements OnInit, OnDestroy { this.subs.push( this.selectableListService.getSelectableList(this.listId).pipe( distinctUntilChanged(), - map((list: SelectableListState) => this.generatePaginatedListBySelectedElements(list)) - ).subscribe(this.objectsSelected$) + 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 + currentPage: this.paginationOptions$.value.currentPage + 1, })); } pagePrev() { this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, { - currentPage: this.paginationOptions$.value.currentPage - 1 + currentPage: this.paginationOptions$.value.currentPage - 1, })); } @@ -99,12 +112,12 @@ export class BulkAccessBrowseComponent implements OnInit, OnDestroy { elementsPerPage: this.paginationOptions$.value.pageSize, totalElements: list?.selection.length, totalPages: this.calculatePageCount(this.paginationOptions$.value.pageSize, list?.selection.length), - currentPage: this.paginationOptions$.value.currentPage + currentPage: this.paginationOptions$.value.currentPage, }); if (pageInfo.currentPage > pageInfo.totalPages) { pageInfo.currentPage = pageInfo.totalPages; this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, { - currentPage: pageInfo.currentPage + currentPage: pageInfo.currentPage, })); } return createSuccessfulRemoteDataObject(buildPaginatedList(pageInfo, list?.selection || [])); diff --git a/src/app/access-control/bulk-access/bulk-access.component.html b/src/app/access-control/bulk-access/bulk-access.component.html index 382caf85f4..c164cc5c31 100644 --- a/src/app/access-control/bulk-access/bulk-access.component.html +++ b/src/app/access-control/bulk-access/bulk-access.component.html @@ -1,4 +1,5 @@
+

{{ 'admin.access-control.bulk-access.title' | translate }}

diff --git a/src/app/access-control/bulk-access/bulk-access.component.spec.ts b/src/app/access-control/bulk-access/bulk-access.component.spec.ts index e9b253147d..e7ec28c132 100644 --- a/src/app/access-control/bulk-access/bulk-access.component.spec.ts +++ b/src/app/access-control/bulk-access/bulk-access.component.spec.ts @@ -1,18 +1,20 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; - +import { + ComponentFixture, + TestBed, +} from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; import { TranslateModule } from '@ngx-translate/core'; import { of } from 'rxjs'; -import { BulkAccessComponent } from './bulk-access.component'; -import { BulkAccessControlService } from '../../shared/access-control-form-container/bulk-access-control.service'; -import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service'; -import { SelectableListState } from '../../shared/object-list/selectable-list/selectable-list.reducer'; -import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils'; import { Process } from '../../process-page/processes/process.model'; -import { RouterTestingModule } from '@angular/router/testing'; +import { BulkAccessControlService } from '../../shared/access-control-form-container/bulk-access-control.service'; import { NotificationsService } from '../../shared/notifications/notifications.service'; +import { SelectableListState } from '../../shared/object-list/selectable-list/selectable-list.reducer'; +import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service'; +import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils'; import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub'; +import { BulkAccessComponent } from './bulk-access.component'; describe('BulkAccessComponent', () => { let component: BulkAccessComponent; @@ -31,35 +33,35 @@ describe('BulkAccessComponent', () => { 'startDate': { 'year': 2026, 'month': 5, - 'day': 31 + 'day': 31, }, - 'endDate': null - } + 'endDate': null, + }, ], 'state': { 'item': { 'toggleStatus': true, - 'accessMode': 'replace' + 'accessMode': 'replace', }, 'bitstream': { 'toggleStatus': false, 'accessMode': '', 'changesLimit': '', - 'selectedBitstreams': [] - } - } + 'selectedBitstreams': [], + }, + }, }; const mockFile = { 'uuids': [ - '1234', '5678' + '1234', '5678', ], - 'file': { } + 'file': { }, }; const mockSettings: any = jasmine.createSpyObj('AccessControlFormContainerComponent', { getValue: jasmine.createSpy('getValue'), - reset: jasmine.createSpy('reset') + reset: jasmine.createSpy('reset'), }); const selection: any[] = [{ indexableObject: { uuid: '1234' } }, { indexableObject: { uuid: '5678' } }]; const selectableListState: SelectableListState = { id: 'test', selection }; @@ -71,15 +73,15 @@ describe('BulkAccessComponent', () => { await TestBed.configureTestingModule({ imports: [ RouterTestingModule, - TranslateModule.forRoot() + TranslateModule.forRoot(), ], declarations: [ BulkAccessComponent ], providers: [ { provide: BulkAccessControlService, useValue: bulkAccessControlServiceMock }, { provide: NotificationsService, useValue: NotificationsServiceStub }, - { provide: SelectableListService, useValue: selectableListServiceMock } + { provide: SelectableListService, useValue: selectableListServiceMock }, ], - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) .compileComponents(); }); diff --git a/src/app/access-control/bulk-access/bulk-access.component.ts b/src/app/access-control/bulk-access/bulk-access.component.ts index 04724614cb..52faa97dbc 100644 --- a/src/app/access-control/bulk-access/bulk-access.component.ts +++ b/src/app/access-control/bulk-access/bulk-access.component.ts @@ -1,17 +1,26 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { + Component, + OnInit, + ViewChild, +} from '@angular/core'; +import { + BehaviorSubject, + Subscription, +} from 'rxjs'; +import { + distinctUntilChanged, + map, +} from 'rxjs/operators'; -import { BehaviorSubject, Subscription } from 'rxjs'; -import { distinctUntilChanged, map } from 'rxjs/operators'; - -import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.component'; import { BulkAccessControlService } from '../../shared/access-control-form-container/bulk-access-control.service'; import { SelectableListState } from '../../shared/object-list/selectable-list/selectable-list.reducer'; import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service'; +import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.component'; @Component({ selector: 'ds-bulk-access', templateUrl: './bulk-access.component.html', - styleUrls: ['./bulk-access.component.scss'] + styleUrls: ['./bulk-access.component.scss'], }) export class BulkAccessComponent implements OnInit { @@ -37,7 +46,7 @@ export class BulkAccessComponent implements OnInit { constructor( private bulkAccessControlService: BulkAccessControlService, - private selectableListService: SelectableListService + private selectableListService: SelectableListService, ) { } @@ -45,8 +54,8 @@ export class BulkAccessComponent implements OnInit { this.subs.push( this.selectableListService.getSelectableList(this.listId).pipe( distinctUntilChanged(), - map((list: SelectableListState) => this.generateIdListBySelectedElements(list)) - ).subscribe(this.objectsSelected$) + map((list: SelectableListState) => this.generateIdListBySelectedElements(list)), + ).subscribe(this.objectsSelected$), ); } @@ -74,12 +83,12 @@ export class BulkAccessComponent implements OnInit { const { file } = this.bulkAccessControlService.createPayloadFile({ bitstreamAccess, itemAccess, - state: settings.state + state: settings.state, }); this.bulkAccessControlService.executeScript( this.objectsSelected$.value || [], - file + file, ).subscribe(); } diff --git a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html index 01f36ef03f..c41053874e 100644 --- a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html +++ b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html @@ -1,13 +1,13 @@ -
- -
-
+
+
@@ -15,7 +15,7 @@
- + diff --git a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.spec.ts b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.spec.ts index 14e0fdefb2..f3c1cad04a 100644 --- a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.spec.ts +++ b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.spec.ts @@ -1,8 +1,12 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { + ComponentFixture, + TestBed, +} from '@angular/core/testing'; import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'; import { TranslateModule } from '@ngx-translate/core'; + import { BulkAccessSettingsComponent } from './bulk-access-settings.component'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; describe('BulkAccessSettingsComponent', () => { let component: BulkAccessSettingsComponent; @@ -15,35 +19,35 @@ describe('BulkAccessSettingsComponent', () => { 'startDate': { 'year': 2026, 'month': 5, - 'day': 31 + 'day': 31, }, - 'endDate': null - } + 'endDate': null, + }, ], 'state': { 'item': { 'toggleStatus': true, - 'accessMode': 'replace' + 'accessMode': 'replace', }, 'bitstream': { 'toggleStatus': false, 'accessMode': '', 'changesLimit': '', - 'selectedBitstreams': [] - } - } + 'selectedBitstreams': [], + }, + }, }; const mockControl: any = jasmine.createSpyObj('AccessControlFormContainerComponent', { getFormValue: jasmine.createSpy('getFormValue'), - reset: jasmine.createSpy('reset') + reset: jasmine.createSpy('reset'), }); beforeEach(async () => { await TestBed.configureTestingModule({ imports: [NgbAccordionModule, TranslateModule.forRoot()], declarations: [BulkAccessSettingsComponent], - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }).compileComponents(); }); diff --git a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.ts b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.ts index eecc016245..d0f95377eb 100644 --- a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.ts +++ b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.ts @@ -1,13 +1,15 @@ -import { Component, ViewChild } from '@angular/core'; import { - AccessControlFormContainerComponent -} from '../../../shared/access-control-form-container/access-control-form-container.component'; + 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' + exportAs: 'dsBulkSettings', }) export class BulkAccessSettingsComponent { diff --git a/src/app/access-control/epeople-registry/epeople-registry.actions.ts b/src/app/access-control/epeople-registry/epeople-registry.actions.ts index a07ea37df2..e6e7608ba3 100644 --- a/src/app/access-control/epeople-registry/epeople-registry.actions.ts +++ b/src/app/access-control/epeople-registry/epeople-registry.actions.ts @@ -1,5 +1,6 @@ /* eslint-disable max-classes-per-file */ import { Action } from '@ngrx/store'; + import { EPerson } from '../../core/eperson/models/eperson.model'; import { type } from '../../shared/ngrx/type'; diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.html b/src/app/access-control/epeople-registry/epeople-registry.component.html index 4979f85819..92968d2e28 100644 --- a/src/app/access-control/epeople-registry/epeople-registry.component.html +++ b/src/app/access-control/epeople-registry/epeople-registry.component.html @@ -2,7 +2,7 @@
- +

{{labelPrefix + 'head' | translate}}

- +
+
+
+
+
+
+ +
+ + +
+ {{ 'ldn-new-service.form.error.name' | translate }} +
+
+ + +
+ + +
+ +
+ +
+
+ + +
+ {{ 'ldn-new-service.form.error.url' | translate }} +
+
+ +
+ + +
+ {{ 'ldn-new-service.form.error.score' | translate }} +
+
+
+
+ + +
+ +
+ + +
+
+ {{ 'ldn-new-service.form.error.ipRange' | translate }} +
+
+ {{ 'ldn-new-service.form.hint.ipRange' | translate }} +
+
+ + +
+ + +
+
+ {{ 'ldn-new-service.form.error.ldnurl' | translate }} +
+
+ {{ 'ldn-new-service.form.error.ldnurl.ldnUrlAlreadyAssociated' | translate }} +
+
+
+ + + +
+
+ +
+ +
+ +
+
+ +
+ +
+
+
+ + +
+
+ + + + +
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+ + +
+
+ + + + +
+
+
+ +
+
+ + {{ 'ldn-new-service.form.label.addPattern' | translate }} + +
+ + +
+ +
+ +
+

{{'service.overview.edit.modal' | translate }}

+

{{'service.overview.create.modal' | translate }}

+ +
+ +
+
+ {{ 'service.overview.edit.body' | translate }} +
+ + {{ 'service.overview.create.body' | translate }} + +
+
+
+ + +
+
+ + +
+
+ + + diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss new file mode 100644 index 0000000000..afd5c80d1c --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss @@ -0,0 +1,143 @@ +@import '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss'; +@import '../../../shared/form/form.component.scss'; + +form { + font-size: 14px; + position: relative; +} + +input, +select { + max-width: 100%; + width: 100%; + padding: 8px; + font-size: 14px; +} + +option:not(:first-child) { + font-weight: bold; +} + +.trash-button { + width: 40px; + height: 40px; +} + +textarea { + height: 200px; + resize: none; +} + +.add-pattern-link { + color: #0048ff; + cursor: pointer; +} + +.remove-pattern-link { + color: #e34949; + cursor: pointer; + margin-left: 10px; +} + +.status-checkbox { + margin-top: 5px; +} + + +.invalid-field { + border: 1px solid red; + color: #000000; +} + +.error-text { + color: red; + font-size: 0.8em; + margin-top: 5px; +} + +.toggle-switch { + display: flex; + align-items: center; + opacity: 0.8; + position: relative; + width: 60px; + height: 30px; + background-color: #ccc; + border-radius: 15px; + cursor: pointer; + transition: background-color 0.3s; +} + +.toggle-switch.checked { + background-color: #24cc9a; +} + +.slider { + position: absolute; + width: 30px; + height: 30px; + border-radius: 50%; + background-color: #fff; + transition: transform 0.3s; +} + + +.toggle-switch .slider { + width: 22px; + height: 22px; + border-radius: 50%; + margin: 0 auto; +} + +.toggle-switch.checked .slider { + transform: translateX(30px); +} + +.toggle-switch-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-end; + margin-top: 10px; +} + +.small-text { + font-size: 0.7em; + color: #888; +} + +.toggle-switch { + cursor: pointer; + margin-top: 3px; + margin-right: 3px +} + +.label-box { + margin-left: 11px; +} + +.label-box-2 { + margin-left: 14px; +} + +.label-box-3 { + margin-left: 5px; +} + +.submission-form-footer { + border-radius: var(--bs-card-border-radius); + bottom: 0; + background-color: var(--bs-gray-400); + padding: calc(var(--bs-spacer) / 2); + z-index: calc(var(--ds-submission-footer-z-index) + 1); +} + +.marked-for-deletion { + background-color: lighten($red, 30%); +} + +.dropdown-menu-top, .scrollable-dropdown-menu { + z-index: var(--ds-submission-footer-z-index); +} + + diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts new file mode 100644 index 0000000000..b5d774b6c5 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts @@ -0,0 +1,267 @@ +import { + ChangeDetectorRef, + EventEmitter, +} from '@angular/core'; +import { + ComponentFixture, + fakeAsync, + TestBed, + tick, +} from '@angular/core/testing'; +import { + FormArray, + FormBuilder, + FormControl, + FormGroup, + ReactiveFormsModule, +} from '@angular/forms'; +import { By } from '@angular/platform-browser'; +import { + ActivatedRoute, + Router, +} from '@angular/router'; +import { + NgbDropdownModule, + NgbModal, +} from '@ng-bootstrap/ng-bootstrap'; +import { provideMockStore } from '@ngrx/store/testing'; +import { + TranslateModule, + TranslateService, +} from '@ngx-translate/core'; +import { PaginationService } from 'ngx-pagination'; +import { + of as observableOf, + of, +} from 'rxjs'; + +import { RouteService } from '../../../core/services/route.service'; +import { MockActivatedRoute } from '../../../shared/mocks/active-router.mock'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; +import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub'; +import { RouterStub } from '../../../shared/testing/router.stub'; +import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service'; +import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; +import { LdnServiceFormComponent } from './ldn-service-form.component'; + +describe('LdnServiceFormEditComponent', () => { + let component: LdnServiceFormComponent; + let fixture: ComponentFixture; + + let ldnServicesService: LdnServicesService; + let ldnItemfiltersService: any; + let cdRefStub: any; + let modalService: any; + let activatedRoute: MockActivatedRoute; + + const testId = '1234'; + const routeParams = { + serviceId: testId, + }; + const routeUrlSegments = [{ path: 'path' }]; + const formMockValue = { + 'id': '', + 'name': 'name', + 'description': 'description', + 'url': 'www.test.com', + 'ldnUrl': 'https://test.com', + 'lowerIp': '127.0.0.1', + 'upperIp': '100.100.100.100', + 'score': 1, + 'inboundPattern': '', + 'constraintPattern': '', + 'enabled': '', + 'type': 'ldnservice', + 'notifyServiceInboundPatterns': [ + { + 'pattern': '', + 'patternLabel': 'Select a pattern', + 'constraint': '', + 'automatic': false, + }, + ], + }; + + + const translateServiceStub = { + get: () => of('translated-text'), + instant: () => 'translated-text', + onLangChange: new EventEmitter(), + onTranslationChange: new EventEmitter(), + onDefaultLangChange: new EventEmitter(), + }; + + beforeEach(async () => { + ldnServicesService = jasmine.createSpyObj('ldnServicesService', { + create: observableOf(null), + update: observableOf(null), + findById: createSuccessfulRemoteDataObject$({}), + }); + + ldnItemfiltersService = { + findAll: () => of(['item1', 'item2']), + }; + cdRefStub = Object.assign({ + detectChanges: () => fixture.detectChanges(), + }); + modalService = { + open: () => {/*comment*/ + }, + }; + + + activatedRoute = new MockActivatedRoute(routeParams, routeUrlSegments); + + await TestBed.configureTestingModule({ + imports: [ReactiveFormsModule, TranslateModule.forRoot(), NgbDropdownModule], + declarations: [LdnServiceFormComponent], + providers: [ + { provide: LdnServicesService, useValue: ldnServicesService }, + { provide: LdnItemfiltersService, useValue: ldnItemfiltersService }, + { provide: Router, useValue: new RouterStub() }, + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: ChangeDetectorRef, useValue: cdRefStub }, + { provide: NgbModal, useValue: modalService }, + { provide: NotificationsService, useValue: new NotificationsServiceStub() }, + { provide: TranslateService, useValue: translateServiceStub }, + { provide: PaginationService, useValue: {} }, + FormBuilder, + RouteService, + provideMockStore({}), + ], + }) + .compileComponents(); + + fixture = TestBed.createComponent(LdnServiceFormComponent); + component = fixture.componentInstance; + spyOn(component, 'filterPatternObjectsAndAssignLabel').and.callFake((a) => a); + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + expect(component.formModel instanceof FormGroup).toBeTruthy(); + }); + + it('should init properties correctly', fakeAsync(() => { + spyOn(component, 'fetchServiceData'); + spyOn(component, 'setItemfilters'); + component.ngOnInit(); + tick(100); + expect((component as any).serviceId).toEqual(testId); + expect(component.isNewService).toBeFalsy(); + expect(component.areControlsInitialized).toBeTruthy(); + expect(component.formModel.controls.notifyServiceInboundPatterns).toBeDefined(); + expect(component.fetchServiceData).toHaveBeenCalledWith(testId); + expect(component.setItemfilters).toHaveBeenCalled(); + })); + + it('should unsubscribe on destroy', () => { + spyOn((component as any).routeSubscription, 'unsubscribe'); + component.ngOnDestroy(); + expect((component as any).routeSubscription.unsubscribe).toHaveBeenCalled(); + }); + + it('should handle create service with valid form', () => { + spyOn(component, 'fetchServiceData').and.callFake((a) => a); + component.formModel.addControl('notifyServiceInboundPatterns', (component as any).formBuilder.array([{ pattern: 'patternValue' }])); + const nameInput = fixture.debugElement.query(By.css('#name')); + const descriptionInput = fixture.debugElement.query(By.css('#description')); + const urlInput = fixture.debugElement.query(By.css('#url')); + const scoreInput = fixture.debugElement.query(By.css('#score')); + const lowerIpInput = fixture.debugElement.query(By.css('#lowerIp')); + const upperIpInput = fixture.debugElement.query(By.css('#upperIp')); + const ldnUrlInput = fixture.debugElement.query(By.css('#ldnUrl')); + component.formModel.patchValue(formMockValue); + + nameInput.nativeElement.value = 'testName'; + descriptionInput.nativeElement.value = 'testDescription'; + urlInput.nativeElement.value = 'tetsUrl.com'; + ldnUrlInput.nativeElement.value = 'tetsLdnUrl.com'; + scoreInput.nativeElement.value = 1; + lowerIpInput.nativeElement.value = '127.0.0.1'; + upperIpInput.nativeElement.value = '127.0.0.1'; + + fixture.detectChanges(); + + expect(component.formModel.valid).toBeTruthy(); + }); + + it('should handle create service with invalid form', () => { + const nameInput = fixture.debugElement.query(By.css('#name')); + + nameInput.nativeElement.value = 'testName'; + fixture.detectChanges(); + + expect(component.formModel.valid).toBeFalsy(); + }); + + it('should not create service with invalid form', () => { + spyOn(component.formModel, 'markAllAsTouched'); + spyOn(component, 'closeModal'); + component.createService(); + + expect(component.formModel.markAllAsTouched).toHaveBeenCalled(); + expect(component.closeModal).toHaveBeenCalled(); + }); + + it('should create service with valid form', () => { + spyOn(component.formModel, 'markAllAsTouched'); + spyOn(component, 'closeModal'); + spyOn(component, 'checkPatterns').and.callFake(() => true); + component.formModel.addControl('notifyServiceInboundPatterns', (component as any).formBuilder.array([{ pattern: 'patternValue' }])); + component.formModel.patchValue(formMockValue); + component.createService(); + + expect(component.formModel.markAllAsTouched).toHaveBeenCalled(); + expect(component.closeModal).not.toHaveBeenCalled(); + expect(ldnServicesService.create).toHaveBeenCalled(); + }); + + it('should check patterns', () => { + const arrValid = new FormArray([ + new FormGroup({ + pattern: new FormControl('pattern'), + }), + ]); + + const arrInvalid = new FormArray([ + new FormGroup({ + pattern: new FormControl(''), + }), + ]); + + expect(component.checkPatterns(arrValid)).toBeTruthy(); + expect(component.checkPatterns(arrInvalid)).toBeFalsy(); + }); + + it('should fetch service data', () => { + component.fetchServiceData(testId); + expect(ldnServicesService.findById).toHaveBeenCalledWith(testId); + expect(component.filterPatternObjectsAndAssignLabel).toHaveBeenCalled(); + expect((component as any).ldnService).toEqual({}); + }); + + it('should generate patch operations', () => { + spyOn(component as any, 'createReplaceOperation'); + spyOn(component as any, 'handlePatterns'); + component.generatePatchOperations(); + expect((component as any).createReplaceOperation).toHaveBeenCalledTimes(7); + expect((component as any).handlePatterns).toHaveBeenCalled(); + }); + + it('should open modal on submit', () => { + spyOn(component, 'openConfirmModal'); + component.onSubmit(); + expect(component.openConfirmModal).toHaveBeenCalled(); + }); + + + it('should reset form and leave', () => { + spyOn(component as any, 'sendBack'); + + component.resetFormAndLeave(); + expect((component as any).sendBack).toHaveBeenCalled(); + }); +}); diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts new file mode 100644 index 0000000000..cae913ecfd --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts @@ -0,0 +1,590 @@ +import { + animate, + state, + style, + transition, + trigger, +} from '@angular/animations'; +import { + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, +} from '@angular/core'; +import { + FormArray, + FormBuilder, + FormGroup, + Validators, +} from '@angular/forms'; +import { + ActivatedRoute, + Router, +} from '@angular/router'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { TranslateService } from '@ngx-translate/core'; +import { Operation } from 'fast-json-patch'; +import { + combineLatestWith, + Observable, + Subscription, +} from 'rxjs'; +import { RemoteData } from 'src/app/core/data/remote-data'; + +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { PaginationService } from '../../../core/pagination/pagination.service'; +import { getFirstCompletedRemoteData } from '../../../core/shared/operators'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { IpV4Validator } from '../../../shared/utils/ipV4.validator'; +import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service'; +import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; +import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; +import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters'; +import { NotifyServicePattern } from '../ldn-services-model/ldn-service-patterns.model'; +import { LdnService } from '../ldn-services-model/ldn-services.model'; +import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns'; + +/** + * Component for editing LDN service through a form that allows to create or edit the properties of a service + */ +@Component({ + selector: 'ds-ldn-service-form', + templateUrl: './ldn-service-form.component.html', + styleUrls: ['./ldn-service-form.component.scss'], + animations: [ + trigger('toggleAnimation', [ + state('true', style({})), + state('false', style({})), + transition('true <=> false', animate('300ms ease-in')), + ]), + ], +}) +export class LdnServiceFormComponent implements OnInit, OnDestroy { + formModel: FormGroup; + + @ViewChild('confirmModal', { static: true }) confirmModal: TemplateRef; + @ViewChild('resetFormModal', { static: true }) resetFormModal: TemplateRef; + + public inboundPatterns: string[] = notifyPatterns; + public isNewService: boolean; + public areControlsInitialized: boolean; + public itemfiltersRD$: Observable>>; + public config: FindListOptions = Object.assign(new FindListOptions(), { + elementsPerPage: 20, + }); + public markedForDeletionInboundPattern: number[] = []; + public selectedInboundPatterns: string[]; + + protected serviceId: string; + + private deletedInboundPatterns: number[] = []; + private modalRef: any; + private ldnService: LdnService; + private selectPatternDefaultLabeli18Key = 'ldn-service.form.label.placeholder.default-select'; + private routeSubscription: Subscription; + + constructor( + protected ldnServicesService: LdnServicesService, + private ldnItemfiltersService: LdnItemfiltersService, + private formBuilder: FormBuilder, + private router: Router, + private route: ActivatedRoute, + private cdRef: ChangeDetectorRef, + protected modalService: NgbModal, + private notificationService: NotificationsService, + private translateService: TranslateService, + protected paginationService: PaginationService, + ) { + + this.formModel = this.formBuilder.group({ + id: [''], + name: ['', Validators.required], + description: [''], + url: ['', Validators.required], + ldnUrl: ['', Validators.required], + lowerIp: ['', [Validators.required, new IpV4Validator()]], + upperIp: ['', [Validators.required, new IpV4Validator()]], + score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]], inboundPattern: [''], + constraintPattern: [''], + enabled: [''], + type: LDN_SERVICE.value, + }); + } + + ngOnInit(): void { + this.routeSubscription = this.route.params.pipe( + combineLatestWith(this.route.url), + ).subscribe(([params, segment]) => { + this.serviceId = params.serviceId; + this.isNewService = segment[0].path === 'new'; + this.formModel.addControl('notifyServiceInboundPatterns', this.formBuilder.array([this.createInboundPatternFormGroup()])); + this.areControlsInitialized = true; + if (this.serviceId && !this.isNewService) { + this.fetchServiceData(this.serviceId); + } + }); + this.setItemfilters(); + } + + ngOnDestroy(): void { + this.routeSubscription.unsubscribe(); + } + + /** + * Sets item filters using LDN item filters service + */ + setItemfilters() { + this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe( + getFirstCompletedRemoteData()); + } + + /** + * Handles the creation of an LDN service by retrieving and validating form fields, + * and submitting the form data to the LDN services endpoint. + */ + createService() { + this.formModel.markAllAsTouched(); + const notifyServiceInboundPatterns = this.formModel.get('notifyServiceInboundPatterns') as FormArray; + const hasInboundPattern = notifyServiceInboundPatterns?.length > 0 ? this.checkPatterns(notifyServiceInboundPatterns) : false; + + if (this.formModel.invalid) { + this.closeModal(); + return; + } + + if (!hasInboundPattern) { + this.notificationService.warning(this.translateService.get('ldn-service-notification.created.warning.title')); + this.closeModal(); + return; + } + + + this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.map((pattern: { + pattern: string; + patternLabel: string, + constraintFormatted: string; + }) => { + const { patternLabel, ...rest } = pattern; + delete rest.constraintFormatted; + return rest; + }); + + const values = { ...this.formModel.value, enabled: true }; + + const ldnServiceData = this.ldnServicesService.create(values); + + ldnServiceData.pipe( + getFirstCompletedRemoteData(), + ).subscribe((rd: RemoteData) => { + if (rd.hasSucceeded) { + this.notificationService.success(this.translateService.get('ldn-service-notification.created.success.title'), + this.translateService.get('ldn-service-notification.created.success.body')); + this.closeModal(); + this.sendBack(); + } else { + if (!this.formModel.errors) { + this.setLdnUrlError(); + } + this.notificationService.error(this.translateService.get('ldn-service-notification.created.failure.title'), + this.translateService.get('ldn-service-notification.created.failure.body')); + this.closeModal(); + } + }); + } + + /** + * Checks if at least one pattern in the specified form array has a value. + * + * @param {FormArray} formArray - The form array containing patterns to check. + * @returns {boolean} - True if at least one pattern has a value, otherwise false. + */ + checkPatterns(formArray: FormArray): boolean { + for (let i = 0; i < formArray.length; i++) { + const pattern = formArray.at(i).get('pattern').value; + if (pattern) { + return true; + } + } + return false; + } + + /** + * Fetches LDN service data by ID and updates the form + * @param serviceId - The ID of the LDN service + */ + fetchServiceData(serviceId: string): void { + this.ldnServicesService.findById(serviceId).pipe( + getFirstCompletedRemoteData(), + ).subscribe( + (data: RemoteData) => { + if (data.hasSucceeded) { + this.ldnService = data.payload; + this.formModel.patchValue({ + id: this.ldnService.id, + name: this.ldnService.name, + description: this.ldnService.description, + url: this.ldnService.url, + score: this.ldnService.score, + ldnUrl: this.ldnService.ldnUrl, + type: this.ldnService.type, + enabled: this.ldnService.enabled, + lowerIp: this.ldnService.lowerIp, + upperIp: this.ldnService.upperIp, + }); + this.filterPatternObjectsAndAssignLabel('notifyServiceInboundPatterns'); + const notifyServiceInboundPatternsFormArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray; + notifyServiceInboundPatternsFormArray.controls.forEach( + control => { + const controlFormGroup = control as FormGroup; + const controlConstraint = controlFormGroup.get('constraint').value; + controlFormGroup.patchValue({ + constraintFormatted: controlConstraint ? this.translateService.instant((controlConstraint as string) + '.label') : '', + }); + }, + ); + } + }, + ); + } + + /** + * Filters pattern objects, initializes form groups, assigns labels, and adds them to the specified form array so the correct string is shown in the dropdown.. + * @param formArrayName - The name of the form array to be populated + */ + filterPatternObjectsAndAssignLabel(formArrayName: string) { + const PatternsArray = this.formModel.get(formArrayName) as FormArray; + PatternsArray.clear(); + + const servicesToUse = this.ldnService.notifyServiceInboundPatterns; + + servicesToUse.forEach((patternObj: NotifyServicePattern) => { + const patternFormGroup = this.initializeInboundPatternFormGroup(); + const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), { + ...patternObj, + patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj?.pattern + '.label'), + }); + patternFormGroup.patchValue(newPatternObjWithLabel); + + PatternsArray.push(patternFormGroup); + this.cdRef.detectChanges(); + }); + } + + /** + * Generates an array of patch operations based on form changes + * @returns Array of patch operations + */ + generatePatchOperations(): any[] { + const patchOperations: any[] = []; + + this.createReplaceOperation(patchOperations, 'name', '/name'); + this.createReplaceOperation(patchOperations, 'description', '/description'); + this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl'); + this.createReplaceOperation(patchOperations, 'url', '/url'); + this.createReplaceOperation(patchOperations, 'score', '/score'); + this.createReplaceOperation(patchOperations, 'lowerIp', '/lowerIp'); + this.createReplaceOperation(patchOperations, 'upperIp', '/upperIp'); + + this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns'); + this.deletedInboundPatterns.forEach(index => { + const removeOperation: Operation = { + op: 'remove', + path: `notifyServiceInboundPatterns[${index}]`, + }; + patchOperations.push(removeOperation); + }); + + return patchOperations; + } + + /** + * Submits the form by opening the confirmation modal + */ + onSubmit() { + this.openConfirmModal(this.confirmModal); + } + + /** + * Adds a new inbound pattern form group to the array of inbound patterns in the form + */ + addInboundPattern() { + const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray; + notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup()); + } + + /** + * Selects an inbound pattern by updating its values based on the provided pattern value and index + * @param patternValue - The selected pattern value + * @param index - The index of the inbound pattern in the array + */ + selectInboundPattern(patternValue: string, index: number): void { + const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray); + patternArray.controls[index].patchValue({ pattern: patternValue }); + patternArray.controls[index].patchValue({ patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label') }); + } + + /** + * Selects an inbound item filter by updating its value based on the provided filter value and index + * @param filterValue - The selected filter value + * @param index - The index of the inbound pattern in the array + */ + selectInboundItemFilter(filterValue: string, index: number): void { + const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray); + filterArray.controls[index].patchValue({ + constraint: filterValue, + constraintFormatted: this.translateService.instant((filterValue !== '' ? filterValue : 'ldn.no-filter') + '.label'), + }); + filterArray.markAllAsTouched(); + } + + /** + * Toggles the automatic property of an inbound pattern at the specified index + * @param i - The index of the inbound pattern in the array + */ + toggleAutomatic(i: number) { + const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`); + if (automaticControl) { + automaticControl.markAsTouched(); + automaticControl.setValue(!automaticControl.value); + } + } + + /** + * Toggles the enabled status of the LDN service by sending a patch request + */ + toggleEnabled() { + const newStatus = !this.formModel.get('enabled').value; + + const patchOperation: Operation = { + op: 'replace', + path: '/enabled', + value: newStatus, + }; + + this.ldnServicesService.patch(this.ldnService, [patchOperation]).pipe( + getFirstCompletedRemoteData(), + ).subscribe( + () => { + this.formModel.get('enabled').setValue(newStatus); + this.cdRef.detectChanges(); + }, + ); + } + + /** + * Closes the modal + */ + closeModal() { + this.modalRef.close(); + this.cdRef.detectChanges(); + } + + /** + * Opens a confirmation modal with the specified content + * @param content - The content to be displayed in the modal + */ + openConfirmModal(content) { + this.modalRef = this.modalService.open(content); + } + + /** + * Patches the LDN service by retrieving and sending patch operations geenrated in generatePatchOperations() + */ + patchService() { + this.deleteMarkedInboundPatterns(); + + const patchOperations = this.generatePatchOperations(); + this.formModel.markAllAsTouched(); + // If the form is invalid, close the modal and return + if (this.formModel.invalid) { + this.closeModal(); + return; + } + + const notifyServiceInboundPatterns = this.formModel.get('notifyServiceInboundPatterns') as FormArray; + const deletedInboundPatternsLength = this.deletedInboundPatterns.length; + // If no inbound patterns are specified, close the modal and return + // notify the user that no patterns are specified + if (notifyServiceInboundPatterns.length === deletedInboundPatternsLength) { + this.notificationService.warning(this.translateService.get('ldn-service-notification.created.warning.title')); + this.deletedInboundPatterns = []; + this.closeModal(); + return; + } + + this.ldnServicesService.patch(this.ldnService, patchOperations).pipe( + getFirstCompletedRemoteData(), + ).subscribe( + (rd: RemoteData) => { + if (rd.hasSucceeded) { + this.closeModal(); + this.sendBack(); + this.notificationService.success(this.translateService.get('admin.registries.services-formats.modify.success.head'), + this.translateService.get('admin.registries.services-formats.modify.success.content')); + } else { + if (!this.formModel.errors) { + this.setLdnUrlError(); + } + this.notificationService.error(this.translateService.get('admin.registries.services-formats.modify.failure.head'), + this.translateService.get('admin.registries.services-formats.modify.failure.content')); + this.closeModal(); + } + }); + } + + /** + * Resets the form and navigates back to the LDN services page + */ + resetFormAndLeave() { + this.sendBack(); + } + + /** + * Marks the specified inbound pattern for deletion + * @param index - The index of the inbound pattern in the array + */ + markForInboundPatternDeletion(index: number) { + if (!this.markedForDeletionInboundPattern.includes(index)) { + this.markedForDeletionInboundPattern.push(index); + } + } + + /** + * Unmarks the specified inbound pattern for deletion + * @param index - The index of the inbound pattern in the array + */ + unmarkForInboundPatternDeletion(index: number) { + const i = this.markedForDeletionInboundPattern.indexOf(index); + if (i !== -1) { + this.markedForDeletionInboundPattern.splice(i, 1); + } + } + + /** + * Deletes marked inbound patterns from the form model + */ + deleteMarkedInboundPatterns() { + this.markedForDeletionInboundPattern.sort((a, b) => b - a); + const patternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray; + + for (const index of this.markedForDeletionInboundPattern) { + if (index >= 0 && index < patternsArray.length) { + const patternGroup = patternsArray.at(index) as FormGroup; + const patternValue = patternGroup.value; + if (patternValue.isNew) { + patternsArray.removeAt(index); + } else { + this.deletedInboundPatterns.push(index); + } + } + } + + this.markedForDeletionInboundPattern = []; + } + + /** + * Creates a replace operation and adds it to the patch operations if the form control is dirty + * @param patchOperations - The array to store patch operations + * @param formControlName - The name of the form control + * @param path - The JSON Patch path for the operation + */ + private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void { + if (this.formModel.get(formControlName).dirty) { + patchOperations.push({ + op: 'replace', + path, + value: this.formModel.get(formControlName).value.toString(), + }); + } + } + + /** + * Handles patterns in the form array, checking if an add or replace operations is required + * @param patchOperations - The array to store patch operations + * @param formArrayName - The name of the form array + */ + private handlePatterns(patchOperations: any[], formArrayName: string): void { + const patternsArray = this.formModel.get(formArrayName) as FormArray; + + for (let i = 0; i < patternsArray.length; i++) { + const patternGroup = patternsArray.at(i) as FormGroup; + + const patternValue = patternGroup.value; + delete patternValue.constraintFormatted; + if (patternGroup.touched && patternGroup.valid) { + delete patternValue?.patternLabel; + if (patternValue.isNew) { + delete patternValue.isNew; + const addOperation = { + op: 'add', + path: `${formArrayName}/-`, + value: patternValue, + }; + patchOperations.push(addOperation); + } else { + const replaceOperation = { + op: 'replace', + path: `${formArrayName}[${i}]`, + value: patternValue, + }; + patchOperations.push(replaceOperation); + } + } + } + } + + /** + * Navigates back to the LDN services page + */ + private sendBack() { + this.router.navigateByUrl('admin/ldn/services'); + } + + /** + * Creates a form group for inbound patterns + * @returns The form group for inbound patterns + */ + private createInboundPatternFormGroup(): FormGroup { + const inBoundFormGroup = { + pattern: '', + patternLabel: this.translateService.instant(this.selectPatternDefaultLabeli18Key), + constraint: '', + constraintFormatted: '', + automatic: false, + isNew: true, + }; + + if (this.isNewService) { + delete inBoundFormGroup.isNew; + } + + return this.formBuilder.group(inBoundFormGroup); + } + + /** + * Initializes an existing form group for inbound patterns + * @returns The initialized form group for inbound patterns + */ + private initializeInboundPatternFormGroup(): FormGroup { + return this.formBuilder.group({ + pattern: '', + patternLabel: '', + constraint: '', + constraintFormatted: '', + automatic: '', + }); + } + + + /** + * set ldnUrl error in case of unprocessable entity and provided value + */ + private setLdnUrlError(): void { + const control = this.formModel.controls.ldnUrl; + const controlErrors = control.errors || {}; + control.setErrors({ ...controlErrors, ldnUrlAlreadyAssociated: true }); + } +} diff --git a/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts new file mode 100644 index 0000000000..8494b67dab --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts @@ -0,0 +1,115 @@ +import { + Observable, + of, +} from 'rxjs'; + +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { RemoteData } from '../../../core/data/remote-data'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; +import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; +import { LdnService } from '../ldn-services-model/ldn-services.model'; + +export const mockLdnService: LdnService = { + uuid: '1', + enabled: false, + score: 0, + id: 1, + lowerIp: '192.0.2.146', + upperIp: '192.0.2.255', + name: 'Service Name', + description: 'Service Description', + url: 'Service URL', + ldnUrl: 'Service LDN URL', + notifyServiceInboundPatterns: [ + { + pattern: 'patternA', + constraint: 'itemFilterA', + automatic: 'false', + }, + { + pattern: 'patternB', + constraint: 'itemFilterB', + automatic: 'true', + }, + ], + type: LDN_SERVICE, + _links: { + self: { + href: 'http://localhost/api/ldn/ldnservices/1', + }, + }, + get self(): string { + return ''; + }, +}; + +export const mockLdnServiceRD$ = createSuccessfulRemoteDataObject$(mockLdnService); + + +export const mockLdnServices: LdnService[] = [{ + uuid: '1', + enabled: false, + score: 0, + id: 1, + lowerIp: '192.0.2.146', + upperIp: '192.0.2.255', + name: 'Service Name', + description: 'Service Description', + url: 'Service URL', + ldnUrl: 'Service LDN URL', + notifyServiceInboundPatterns: [ + { + pattern: 'patternA', + constraint: 'itemFilterA', + automatic: 'false', + }, + { + pattern: 'patternB', + constraint: 'itemFilterB', + automatic: 'true', + }, + ], + type: LDN_SERVICE, + _links: { + self: { + href: 'http://localhost/api/ldn/ldnservices/1', + }, + }, + get self(): string { + return ''; + }, +}, { + uuid: '2', + enabled: false, + score: 0, + id: 2, + lowerIp: '192.0.2.146', + upperIp: '192.0.2.255', + name: 'Service Name', + description: 'Service Description', + url: 'Service URL', + ldnUrl: 'Service LDN URL', + notifyServiceInboundPatterns: [ + { + pattern: 'patternA', + constraint: 'itemFilterA', + automatic: 'false', + }, + { + pattern: 'patternB', + constraint: 'itemFilterB', + automatic: 'true', + }, + ], + type: LDN_SERVICE, + _links: { + self: { + href: 'http://localhost/api/ldn/ldnservices/1', + }, + }, + get self(): string { + return ''; + }, +}, +]; +export const mockLdnServicesRD$: Observable>> = of((mockLdnServices as unknown) as RemoteData>); diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilter-data.service.spec.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilter-data.service.spec.ts new file mode 100644 index 0000000000..110a0779fb --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilter-data.service.spec.ts @@ -0,0 +1,93 @@ +import { + cold, + getTestScheduler, +} from 'jasmine-marbles'; +import { of } from 'rxjs'; +import { TestScheduler } from 'rxjs/testing'; + +import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; +import { ObjectCacheService } from '../../../core/cache/object-cache.service'; +import { RestResponse } from '../../../core/cache/response.models'; +import { FindAllData } from '../../../core/data/base/find-all-data'; +import { testFindAllDataImplementation } from '../../../core/data/base/find-all-data.spec'; +import { RemoteData } from '../../../core/data/remote-data'; +import { RequestService } from '../../../core/data/request.service'; +import { RequestEntry } from '../../../core/data/request-entry.model'; +import { RequestEntryState } from '../../../core/data/request-entry-state.model'; +import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; +import { LdnItemfiltersService } from './ldn-itemfilters-data.service'; + +describe('LdnItemfiltersService test', () => { + let scheduler: TestScheduler; + let service: LdnItemfiltersService; + let requestService: RequestService; + let rdbService: RemoteDataBuildService; + let objectCache: ObjectCacheService; + let halService: HALEndpointService; + let notificationsService: NotificationsService; + let responseCacheEntry: RequestEntry; + + const endpointURL = `https://rest.api/rest/api/ldn/itemfilters`; + const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a'; + + const remoteDataMocks = { + Success: new RemoteData(null, null, null, RequestEntryState.Success, null, null, 200), + }; + + function initTestService() { + return new LdnItemfiltersService( + requestService, + rdbService, + objectCache, + halService, + notificationsService, + ); + } + + beforeEach(() => { + scheduler = getTestScheduler(); + + objectCache = {} as ObjectCacheService; + notificationsService = {} as NotificationsService; + responseCacheEntry = new RequestEntry(); + responseCacheEntry.request = { href: 'https://rest.api/' } as any; + responseCacheEntry.response = new RestResponse(true, 200, 'Success'); + + requestService = jasmine.createSpyObj('requestService', { + generateRequestId: requestUUID, + send: true, + removeByHrefSubstring: {}, + getByHref: of(responseCacheEntry), + getByUUID: of(responseCacheEntry), + }); + + halService = jasmine.createSpyObj('halService', { + getEndpoint: of(endpointURL), + }); + + rdbService = jasmine.createSpyObj('rdbService', { + buildSingle: createSuccessfulRemoteDataObject$({}, 500), + buildList: cold('a', { a: remoteDataMocks.Success }), + }); + + + service = initTestService(); + }); + + describe('composition', () => { + const initFindAllService = () => new LdnItemfiltersService(null, null, null, null, null) as unknown as FindAllData; + testFindAllDataImplementation(initFindAllService); + }); + + describe('get endpoint', () => { + it('should retrieve correct endpoint', (done) => { + service.getEndpoint().subscribe(() => { + expect(halService.getEndpoint).toHaveBeenCalledWith('itemfilters'); + done(); + }); + }); + }); + +}); diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts new file mode 100644 index 0000000000..8222c69d79 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts @@ -0,0 +1,63 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; + +import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; +import { ObjectCacheService } from '../../../core/cache/object-cache.service'; +import { dataService } from '../../../core/data/base/data-service.decorator'; +import { + FindAllData, + FindAllDataImpl, +} from '../../../core/data/base/find-all-data'; +import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service'; +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { RemoteData } from '../../../core/data/remote-data'; +import { RequestService } from '../../../core/data/request.service'; +import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model'; +import { LDN_SERVICE_CONSTRAINT_FILTERS } from '../ldn-services-model/ldn-service.resource-type'; +import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters'; + +/** + * A service responsible for fetching/sending data from/to the REST API on the itemfilters endpoint + */ +@Injectable() +@dataService(LDN_SERVICE_CONSTRAINT_FILTERS) +export class LdnItemfiltersService extends IdentifiableDataService implements FindAllData { + private findAllData: FindAllDataImpl; + + constructor( + protected requestService: RequestService, + protected rdbService: RemoteDataBuildService, + protected objectCache: ObjectCacheService, + protected halService: HALEndpointService, + protected notificationsService: NotificationsService, + ) { + super('itemfilters', requestService, rdbService, objectCache, halService); + + this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive); + } + + /** + * Gets the endpoint URL for the itemfilters. + * + * @returns {string} - The endpoint URL. + */ + getEndpoint() { + return this.halService.getEndpoint(this.linkPath); + } + + /** + * Finds all itemfilters based on the provided options and link configurations. + * + * @param {FindListOptions} options - The options for finding a list of itemfilters. + * @param {boolean} useCachedVersionIfAvailable - Whether to use the cached version if available. + * @param {boolean} reRequestOnStale - Whether to re-request the data if it's stale. + * @param {...FollowLinkConfig[]} linksToFollow - Configurations for following specific links. + * @returns {Observable>>} - An observable of remote data containing a paginated list of itemfilters. + */ + findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig[]): Observable>> { + return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow); + } +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.spec.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.spec.ts new file mode 100644 index 0000000000..4ff781f629 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.spec.ts @@ -0,0 +1,134 @@ +import { + cold, + getTestScheduler, +} from 'jasmine-marbles'; +import { of as observableOf } from 'rxjs'; +import { TestScheduler } from 'rxjs/testing'; + +import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; +import { RequestParam } from '../../../core/cache/models/request-param.model'; +import { ObjectCacheService } from '../../../core/cache/object-cache.service'; +import { RestResponse } from '../../../core/cache/response.models'; +import { CreateData } from '../../../core/data/base/create-data'; +import { testCreateDataImplementation } from '../../../core/data/base/create-data.spec'; +import { DeleteData } from '../../../core/data/base/delete-data'; +import { testDeleteDataImplementation } from '../../../core/data/base/delete-data.spec'; +import { FindAllData } from '../../../core/data/base/find-all-data'; +import { testFindAllDataImplementation } from '../../../core/data/base/find-all-data.spec'; +import { PatchData } from '../../../core/data/base/patch-data'; +import { testPatchDataImplementation } from '../../../core/data/base/patch-data.spec'; +import { SearchData } from '../../../core/data/base/search-data'; +import { testSearchDataImplementation } from '../../../core/data/base/search-data.spec'; +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { RemoteData } from '../../../core/data/remote-data'; +import { RequestService } from '../../../core/data/request.service'; +import { RequestEntry } from '../../../core/data/request-entry.model'; +import { RequestEntryState } from '../../../core/data/request-entry-state.model'; +import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; +import { createPaginatedList } from '../../../shared/testing/utils.test'; +import { mockLdnService } from '../ldn-service-serviceMock/ldnServicesRD$-mock'; +import { LdnServicesService } from './ldn-services-data.service'; + +describe('LdnServicesService test', () => { + let scheduler: TestScheduler; + let service: LdnServicesService; + let requestService: RequestService; + let rdbService: RemoteDataBuildService; + let objectCache: ObjectCacheService; + let halService: HALEndpointService; + let notificationsService: NotificationsService; + let responseCacheEntry: RequestEntry; + + const endpointURL = `https://rest.api/rest/api/ldn/ldnservices`; + const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a'; + + const remoteDataMocks = { + Success: new RemoteData(null, null, null, RequestEntryState.Success, null, null, 200), + }; + + function initTestService() { + return new LdnServicesService( + requestService, + rdbService, + objectCache, + halService, + notificationsService, + ); + } + + beforeEach(() => { + scheduler = getTestScheduler(); + + objectCache = {} as ObjectCacheService; + notificationsService = {} as NotificationsService; + responseCacheEntry = new RequestEntry(); + responseCacheEntry.request = { href: 'https://rest.api/' } as any; + responseCacheEntry.response = new RestResponse(true, 200, 'Success'); + + requestService = jasmine.createSpyObj('requestService', { + generateRequestId: requestUUID, + send: true, + removeByHrefSubstring: {}, + getByHref: observableOf(responseCacheEntry), + getByUUID: observableOf(responseCacheEntry), + }); + + halService = jasmine.createSpyObj('halService', { + getEndpoint: observableOf(endpointURL), + }); + + rdbService = jasmine.createSpyObj('rdbService', { + buildSingle: createSuccessfulRemoteDataObject$({}, 500), + buildFromRequestUUID: createSuccessfulRemoteDataObject$({}, 500), + buildList: cold('a', { a: remoteDataMocks.Success }), + }); + + + service = initTestService(); + }); + + describe('composition', () => { + const initFindAllService = () => new LdnServicesService(null, null, null, null, null) as unknown as FindAllData; + const initDeleteService = () => new LdnServicesService(null, null, null, null, null) as unknown as DeleteData; + const initSearchService = () => new LdnServicesService(null, null, null, null, null) as unknown as SearchData; + const initPatchService = () => new LdnServicesService(null, null, null, null, null) as unknown as PatchData; + const initCreateService = () => new LdnServicesService(null, null, null, null, null) as unknown as CreateData; + + testFindAllDataImplementation(initFindAllService); + testDeleteDataImplementation(initDeleteService); + testSearchDataImplementation(initSearchService); + testPatchDataImplementation(initPatchService); + testCreateDataImplementation(initCreateService); + }); + + describe('custom methods', () => { + it('should find service by inbound pattern', (done) => { + const params = [new RequestParam('pattern', 'testPattern')]; + const findListOptions = Object.assign(new FindListOptions(), {}, { searchParams: params }); + spyOn(service, 'searchBy').and.returnValue(observableOf(null)); + spyOn((service as any).searchData, 'searchBy').and.returnValue(createSuccessfulRemoteDataObject$(createPaginatedList([mockLdnService]))); + + service.findByInboundPattern('testPattern').subscribe(() => { + expect(service.searchBy).toHaveBeenCalledWith('byInboundPattern', findListOptions, undefined, undefined ); + done(); + }); + }); + + it('should invoke service', (done) => { + const constraints = [{ void: true }]; + const files = [new File([],'fileName')]; + spyOn(service as any, 'getInvocationFormData'); + spyOn(service, 'getBrowseEndpoint').and.returnValue(observableOf('testEndpoint')); + service.invoke('serviceName', 'serviceId', constraints, files).subscribe(result => { + expect((service as any).getInvocationFormData).toHaveBeenCalledWith(constraints, files); + expect(service.getBrowseEndpoint).toHaveBeenCalled(); + expect(result).toBeInstanceOf(RemoteData); + done(); + }); + + }); + }); + +}); diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts new file mode 100644 index 0000000000..a41bf0c759 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts @@ -0,0 +1,230 @@ +import { Injectable } from '@angular/core'; +import { Operation } from 'fast-json-patch'; +import { Observable } from 'rxjs'; +import { + map, + take, +} from 'rxjs/operators'; + +import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; +import { RequestParam } from '../../../core/cache/models/request-param.model'; +import { ObjectCacheService } from '../../../core/cache/object-cache.service'; +import { + CreateData, + CreateDataImpl, +} from '../../../core/data/base/create-data'; +import { dataService } from '../../../core/data/base/data-service.decorator'; +import { + DeleteData, + DeleteDataImpl, +} from '../../../core/data/base/delete-data'; +import { + FindAllData, + FindAllDataImpl, +} from '../../../core/data/base/find-all-data'; +import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service'; +import { + PatchData, + PatchDataImpl, +} from '../../../core/data/base/patch-data'; +import { SearchDataImpl } from '../../../core/data/base/search-data'; +import { ChangeAnalyzer } from '../../../core/data/change-analyzer'; +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { RemoteData } from '../../../core/data/remote-data'; +import { MultipartPostRequest } from '../../../core/data/request.models'; +import { RequestService } from '../../../core/data/request.service'; +import { RestRequest } from '../../../core/data/rest-request.model'; +import { RestRequestMethod } from '../../../core/data/rest-request-method'; +import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; +import { NoContent } from '../../../core/shared/NoContent.model'; +import { URLCombiner } from '../../../core/url-combiner/url-combiner'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model'; +import { LdnServiceConstrain } from '../ldn-services-model/ldn-service.constrain.model'; +import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; +import { LdnService } from '../ldn-services-model/ldn-services.model'; + +/** + * Injectable service responsible for fetching/sending data from/to the REST API on the ldnservices endpoint. + * + * @export + * @class LdnServicesService + * @extends {IdentifiableDataService} + * @implements {FindAllData} + * @implements {DeleteData} + * @implements {PatchData} + * @implements {CreateData} + */ +@Injectable() +@dataService(LDN_SERVICE) +export class LdnServicesService extends IdentifiableDataService implements FindAllData, DeleteData, PatchData, CreateData { + createData: CreateDataImpl; + private findAllData: FindAllDataImpl; + private deleteData: DeleteDataImpl; + private patchData: PatchDataImpl; + private comparator: ChangeAnalyzer; + private searchData: SearchDataImpl; + + private findByPatternEndpoint = 'byInboundPattern'; + + constructor( + protected requestService: RequestService, + protected rdbService: RemoteDataBuildService, + protected objectCache: ObjectCacheService, + protected halService: HALEndpointService, + protected notificationsService: NotificationsService, + ) { + super('ldnservices', requestService, rdbService, objectCache, halService); + + this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive); + this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive); + this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint); + this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint); + this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive); + } + + /** + * Creates an LDN service by sending a POST request to the REST API. + * + * @param {LdnService} object - The LDN service object to be created. + * @param params Array with additional params to combine with query string + * @returns {Observable>} - Observable containing the result of the creation operation. + */ + create(object: LdnService, ...params: RequestParam[]): Observable> { + return this.createData.create(object, ...params); + } + + /** + * Updates an LDN service by applying a set of operations through a PATCH request to the REST API. + * + * @param {LdnService} object - The LDN service object to be updated. + * @param {Operation[]} operations - The patch operations to be applied. + * @returns {Observable>} - Observable containing the result of the update operation. + */ + patch(object: LdnService, operations: Operation[]): Observable> { + return this.patchData.patch(object, operations); + } + + /** + * Updates an LDN service by sending a PUT request to the REST API. + * + * @param {LdnService} object - The LDN service object to be updated. + * @returns {Observable>} - Observable containing the result of the update operation. + */ + update(object: LdnService): Observable> { + return this.patchData.update(object); + } + + /** + * Commits pending updates by sending a PATCH request to the REST API. + * + * @param {RestRequestMethod} [method] - The HTTP method to be used for the request. + */ + commitUpdates(method?: RestRequestMethod): void { + return this.patchData.commitUpdates(method); + } + + /** + * Creates a patch representing the changes made to the LDN service in the cache. + * + * @param {LdnService} object - The LDN service object for which to create the patch. + * @returns {Observable} - Observable containing the patch operations. + */ + createPatchFromCache(object: LdnService): Observable { + return this.patchData.createPatchFromCache(object); + } + + /** + * Retrieves all LDN services from the REST API based on the provided options. + * + * @param {FindListOptions} [options] - The options to be applied to the request. + * @param {boolean} [useCachedVersionIfAvailable] - Flag indicating whether to use cached data if available. + * @param {boolean} [reRequestOnStale] - Flag indicating whether to re-request data if it's stale. + * @param {...FollowLinkConfig[]} linksToFollow - Optional links to follow during the request. + * @returns {Observable>>} - Observable containing the result of the request. + */ + findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig[]): Observable>> { + return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow); + } + + /** + * Retrieves LDN services based on the inbound pattern from the REST API. + * + * @param {string} pattern - The inbound pattern to be used in the search. + * @param {FindListOptions} [options] - The options to be applied to the request. + * @param {boolean} [useCachedVersionIfAvailable] - Flag indicating whether to use cached data if available. + * @param {boolean} [reRequestOnStale] - Flag indicating whether to re-request data if it's stale. + * @param {...FollowLinkConfig[]} linksToFollow - Optional links to follow during the request. + * @returns {Observable>>} - Observable containing the result of the request. + */ + findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig[]): Observable>> { + const params = [new RequestParam('pattern', pattern)]; + const findListOptions = Object.assign(new FindListOptions(), options, { searchParams: params }); + return this.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow); + } + + /** + * Deletes an LDN service by sending a DELETE request to the REST API. + * + * @param {string} objectId - The ID of the LDN service to be deleted. + * @param {string[]} [copyVirtualMetadata] - Optional virtual metadata to be copied during the deletion. + * @returns {Observable>} - Observable containing the result of the deletion operation. + */ + public delete(objectId: string, copyVirtualMetadata?: string[]): Observable> { + return this.deleteData.delete(objectId, copyVirtualMetadata); + } + + /** + * Deletes an LDN service by its HATEOAS link. + * + * @param {string} href - The HATEOAS link of the LDN service to be deleted. + * @param {string[]} [copyVirtualMetadata] - Optional virtual metadata to be copied during the deletion. + * @returns {Observable>} - Observable containing the result of the deletion operation. + */ + public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable> { + return this.deleteData.deleteByHref(href, copyVirtualMetadata); + } + + + /** + * Make a new FindListRequest with given search method + * + * @param searchMethod The search method for the object + * @param options The [[FindListOptions]] object + * @param useCachedVersionIfAvailable If this is true, the request will only be sent if there's + * no valid cached version. Defaults to true + * @param reRequestOnStale Whether or not the request should automatically be re- + * requested after the response becomes stale + * @param linksToFollow List of {@link FollowLinkConfig} that indicate which + * {@link HALLink}s should be automatically resolved + * @return {Observable>} + * Return an observable that emits response from the server + */ + public searchBy(searchMethod: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig[]): Observable>> { + return this.searchData.searchBy(searchMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow); + } + + public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable> { + const requestId = this.requestService.generateRequestId(); + this.getBrowseEndpoint().pipe( + take(1), + map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()), + map((endpoint: string) => { + const body = this.getInvocationFormData(parameters, files); + return new MultipartPostRequest(requestId, endpoint, body); + }), + ).subscribe((request: RestRequest) => this.requestService.send(request)); + + return this.rdbService.buildFromRequestUUID(requestId); + } + + private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData { + const form: FormData = new FormData(); + form.set('properties', JSON.stringify(constrain)); + files.forEach((file: File) => { + form.append('file', file); + }); + return form; + } +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html new file mode 100644 index 0000000000..0aaa39bda2 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html @@ -0,0 +1,99 @@ +
+
+

{{ 'ldn-registered-services.title' | translate }}

+
+
+ +
+ +
+ + + + + + + + + + + + + + + + + +
{{ 'service.overview.table.name' | translate }}{{ 'service.overview.table.description' | translate }}{{ 'service.overview.table.status' | translate }}{{ 'service.overview.table.actions' | translate }}
{{ ldnService.name }} + + +
+ {{ ldnService.description }} +
+ + + 		+ + {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }} + + +
+ + +
+
+
+ +
+ + + +
+ +
+
+

{{'service.overview.delete.header' | translate }}

+
+ +
+ +
+
+ {{ 'service.overview.delete.body' | translate }} +
+
+ + +
+
+
+ + diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.scss b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.scss new file mode 100644 index 0000000000..07377d63d5 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.scss @@ -0,0 +1,29 @@ +.status-indicator { + padding: 2.5px 25px 2.5px 25px; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.5s; +} + +.status-enabled { + background-color: #daf7a6; + color: #4f5359; + font-size: 85%; + font-weight: bold; + +} + +.status-enabled:hover { + background-color: #faa0a0; +} + +.status-disabled { + background-color: #faa0a0; + color: #4f5359; + font-size: 85%; + font-weight: bold; +} + +.status-disabled:hover { + background-color: #daf7a6; +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts new file mode 100644 index 0000000000..babab8a5ab --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts @@ -0,0 +1,176 @@ +import { + ChangeDetectorRef, + EventEmitter, + NO_ERRORS_SCHEMA, +} from '@angular/core'; +import { + ComponentFixture, + fakeAsync, + TestBed, + tick, +} from '@angular/core/testing'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { + TranslateModule, + TranslateService, +} from '@ngx-translate/core'; +import { of } from 'rxjs'; + +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { RemoteData } from '../../../core/data/remote-data'; +import { PaginationService } from '../../../core/pagination/pagination.service'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; +import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub'; +import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub'; +import { createPaginatedList } from '../../../shared/testing/utils.test'; +import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; +import { LdnService } from '../ldn-services-model/ldn-services.model'; +import { LdnServicesOverviewComponent } from './ldn-services-directory.component'; + +describe('LdnServicesOverviewComponent', () => { + let component: LdnServicesOverviewComponent; + let fixture: ComponentFixture; + let ldnServicesService; + let paginationService; + let modalService: NgbModal; + + const translateServiceStub = { + get: () => of('translated-text'), + onLangChange: new EventEmitter(), + onTranslationChange: new EventEmitter(), + onDefaultLangChange: new EventEmitter(), + }; + + beforeEach(async () => { + paginationService = new PaginationServiceStub(); + ldnServicesService = jasmine.createSpyObj('ldnServicesService', { + 'findAll': createSuccessfulRemoteDataObject$({}), + 'delete': createSuccessfulRemoteDataObject$({}), + 'patch': createSuccessfulRemoteDataObject$({}), + }); + await TestBed.configureTestingModule({ + imports: [TranslateModule.forRoot()], + declarations: [LdnServicesOverviewComponent], + providers: [ + { + provide: LdnServicesService, + useValue: ldnServicesService, + }, + { provide: PaginationService, useValue: paginationService }, + { + provide: NgbModal, useValue: { + open: () => { /*comment*/ + }, + }, + }, + { provide: ChangeDetectorRef, useValue: {} }, + { provide: NotificationsService, useValue: new NotificationsServiceStub() }, + { provide: TranslateService, useValue: translateServiceStub }, + ], + schemas: [NO_ERRORS_SCHEMA], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LdnServicesOverviewComponent); + component = fixture.componentInstance; + ldnServicesService = TestBed.inject(LdnServicesService); + paginationService = TestBed.inject(PaginationService); + modalService = TestBed.inject(NgbModal); + component.modalRef = jasmine.createSpyObj({ close: null }); + component.isProcessingSub = jasmine.createSpyObj({ unsubscribe: null }); + component.ldnServicesRD$ = of({} as RemoteData>); + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('ngOnInit', () => { + it('should call setLdnServices', fakeAsync(() => { + spyOn(component, 'setLdnServices').and.callThrough(); + component.ngOnInit(); + tick(); + expect(component.setLdnServices).toHaveBeenCalled(); + })); + + it('should set ldnServicesRD$ with mock data', fakeAsync(() => { + spyOn(component, 'setLdnServices').and.callThrough(); + const testData: LdnService[] = Object.assign([new LdnService()], [ + { id: 1, name: 'Service 1', description: 'Description 1', enabled: true }, + { id: 2, name: 'Service 2', description: 'Description 2', enabled: false }, + { id: 3, name: 'Service 3', description: 'Description 3', enabled: true }]); + + const mockLdnServicesRD = createPaginatedList(testData); + component.ldnServicesRD$ = createSuccessfulRemoteDataObject$(mockLdnServicesRD); + fixture.detectChanges(); + + const tableRows = fixture.debugElement.nativeElement.querySelectorAll('tbody tr'); + expect(tableRows.length).toBe(testData.length); + const firstRowContent = tableRows[0].textContent; + expect(firstRowContent).toContain('Service 1'); + expect(firstRowContent).toContain('Description 1'); + })); + }); + + describe('ngOnDestroy', () => { + it('should call paginationService.clearPagination and unsubscribe', () => { + // spyOn(paginationService, 'clearPagination'); + // spyOn(component.isProcessingSub, 'unsubscribe'); + component.ngOnDestroy(); + expect(paginationService.clearPagination).toHaveBeenCalledWith(component.pageConfig.id); + expect(component.isProcessingSub.unsubscribe).toHaveBeenCalled(); + }); + }); + + describe('openDeleteModal', () => { + it('should open delete modal', () => { + spyOn(modalService, 'open'); + component.openDeleteModal(component.deleteModal); + expect(modalService.open).toHaveBeenCalledWith(component.deleteModal); + }); + }); + + describe('closeModal', () => { + it('should close modal and detect changes', () => { + // spyOn(component.modalRef, 'close'); + spyOn(component.cdRef, 'detectChanges'); + component.closeModal(); + expect(component.modalRef.close).toHaveBeenCalled(); + expect(component.cdRef.detectChanges).toHaveBeenCalled(); + }); + }); + + describe('deleteSelected', () => { + it('should delete selected service and update data', fakeAsync(() => { + const serviceId = '123'; + const mockRemoteData = { /* just an empty object to retrieve as as RemoteData> */}; + spyOn(component, 'setLdnServices').and.callThrough(); + const deleteSpy = ldnServicesService.delete.and.returnValue(of(mockRemoteData as RemoteData>)); + component.selectedServiceId = serviceId; + component.deleteSelected(serviceId, ldnServicesService); + tick(); + expect(deleteSpy).toHaveBeenCalledWith(serviceId); + })); + }); + + describe('selectServiceToDelete', () => { + it('should set service to delete', fakeAsync(() => { + spyOn(component, 'openDeleteModal'); + const serviceId = 123; + component.selectServiceToDelete(serviceId); + expect(component.selectedServiceId).toEqual(serviceId); + expect(component.openDeleteModal).toHaveBeenCalled(); + })); + }); + + describe('toggleStatus', () => { + it('should toggle status', (() => { + component.toggleStatus({ enabled: false }, ldnServicesService); + expect(ldnServicesService.patch).toHaveBeenCalled(); + })); + }); + +}); diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts new file mode 100644 index 0000000000..aa85ff1cbe --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts @@ -0,0 +1,182 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, +} from '@angular/core'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { TranslateService } from '@ngx-translate/core'; +import { Operation } from 'fast-json-patch'; +import { + Observable, + Subscription, +} from 'rxjs'; +import { + map, + switchMap, +} from 'rxjs/operators'; +import { LdnServicesService } from 'src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service'; +import { PaginationService } from 'src/app/core/pagination/pagination.service'; + +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { RemoteData } from '../../../core/data/remote-data'; +import { getFirstCompletedRemoteData } from '../../../core/shared/operators'; +import { hasValue } from '../../../shared/empty.util'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model'; +import { LdnService } from '../ldn-services-model/ldn-services.model'; + +/** + * The `LdnServicesOverviewComponent` is a component that provides an overview of LDN (Linked Data Notifications) services. + * It displays a paginated list of LDN services, allows users to edit and delete services, + * toggle the status of each service directly form the page and allows for creation of new services redirecting the user on the creation/edit form + */ +@Component({ + selector: 'ds-ldn-services-directory', + templateUrl: './ldn-services-directory.component.html', + styleUrls: ['./ldn-services-directory.component.scss'], + changeDetection: ChangeDetectionStrategy.Default, +}) +export class LdnServicesOverviewComponent implements OnInit, OnDestroy { + + selectedServiceId: string | number | null = null; + servicesData: any[] = []; + @ViewChild('deleteModal', { static: true }) deleteModal: TemplateRef; + ldnServicesRD$: Observable>>; + config: FindListOptions = Object.assign(new FindListOptions(), { + elementsPerPage: 10, + }); + pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), { + id: 'po', + pageSize: 10, + }); + isProcessingSub: Subscription; + modalRef: any; + + + constructor( + protected ldnServicesService: LdnServicesService, + protected paginationService: PaginationService, + protected modalService: NgbModal, + public cdRef: ChangeDetectorRef, + private notificationService: NotificationsService, + private translateService: TranslateService, + ) { + } + + ngOnInit(): void { + this.setLdnServices(); + } + + /** + * Sets up the LDN services by fetching and observing the paginated list of services. + */ + setLdnServices() { + this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe( + switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe( + getFirstCompletedRemoteData(), + )), + ); + } + + ngOnDestroy(): void { + this.paginationService.clearPagination(this.pageConfig.id); + if (hasValue(this.isProcessingSub)) { + this.isProcessingSub.unsubscribe(); + } + } + + /** + * Opens the delete confirmation modal. + * + * @param {any} content - The content of the modal. + */ + openDeleteModal(content) { + this.modalRef = this.modalService.open(content); + } + + /** + * Closes the currently open modal and triggers change detection. + */ + closeModal() { + this.modalRef.close(); + this.cdRef.detectChanges(); + } + + /** + * Sets the selected LDN service ID for deletion and opens the delete confirmation modal. + * + * @param {number} serviceId - The ID of the service to be deleted. + */ + selectServiceToDelete(serviceId: number) { + this.selectedServiceId = serviceId; + this.openDeleteModal(this.deleteModal); + } + + /** + * Deletes the selected LDN service. + * + * @param {string} serviceId - The ID of the service to be deleted. + * @param {LdnServicesService} ldnServicesService - The service for managing LDN services. + */ + deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void { + if (this.selectedServiceId !== null) { + ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData) => { + if (rd.hasSucceeded) { + this.servicesData = this.servicesData.filter(service => service.id !== serviceId); + this.ldnServicesRD$ = this.ldnServicesRD$.pipe( + map((remoteData: RemoteData>) => { + if (remoteData.hasSucceeded) { + remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId); + } + return remoteData; + }), + ); + this.cdRef.detectChanges(); + this.closeModal(); + this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'), + this.translateService.get('ldn-service-delete.notification.success.content')); + } else { + this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'), + this.translateService.get('ldn-service-delete.notification.error.content')); + this.cdRef.detectChanges(); + } + }); + } + } + + /** + * Toggles the status (enabled/disabled) of an LDN service. + * + * @param {any} ldnService - The LDN service object. + * @param {LdnServicesService} ldnServicesService - The service for managing LDN services. + */ + toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void { + const newStatus = !ldnService.enabled; + const originalStatus = ldnService.enabled; + + const patchOperation: Operation = { + op: 'replace', + path: '/enabled', + value: newStatus, + }; + + ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe( + (rd: RemoteData) => { + if (rd.hasSucceeded) { + ldnService.enabled = newStatus; + this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'), + this.translateService.get('ldn-enable-service.notification.success.content')); + } else { + ldnService.enabled = originalStatus; + this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'), + this.translateService.get('ldn-enable-service.notification.error.content')); + } + }, + ); + } +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts new file mode 100644 index 0000000000..73af060413 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts @@ -0,0 +1,36 @@ +import { + autoserialize, + deserialize, + inheritSerialization, +} from 'cerialize'; + +import { typedObject } from '../../../core/cache/builders/build-decorators'; +import { CacheableObject } from '../../../core/cache/cacheable-object.model'; +import { ResourceType } from '../../../core/shared/resource-type'; +import { excludeFromEquals } from '../../../core/utilities/equals.decorators'; +import { LDN_SERVICE_CONSTRAINT_FILTER } from './ldn-service.resource-type'; + +/** A single filter value and its properties. */ +@typedObject +@inheritSerialization(CacheableObject) +export class Itemfilter extends CacheableObject { + static type = LDN_SERVICE_CONSTRAINT_FILTER; + + @excludeFromEquals + @autoserialize + type: ResourceType; + + @autoserialize + id: string; + + @deserialize + _links: { + self: { + href: string; + }; + }; + + get self(): string { + return this._links.self.href; + } +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts new file mode 100644 index 0000000000..650511005c --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts @@ -0,0 +1,13 @@ +import { autoserialize } from 'cerialize'; + +/** + * A single notify service pattern and his properties + */ +export class NotifyServicePattern { + @autoserialize + pattern: string; + @autoserialize + constraint: string; + @autoserialize + automatic: string; +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts new file mode 100644 index 0000000000..040e4d37b8 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts @@ -0,0 +1,8 @@ +/** + * List of services statuses + */ +export enum LdnServiceStatus { + UNKOWN, + DISABLED, + ENABLED, +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts new file mode 100644 index 0000000000..5121e47f69 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts @@ -0,0 +1,3 @@ +export class LdnServiceConstrain { + void: any; +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts new file mode 100644 index 0000000000..05a881e7e7 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts @@ -0,0 +1,12 @@ +/** + * The resource type for Ldn-Services + * + * Needs to be in a separate file to prevent circular + * dependencies in webpack. + */ +import { ResourceType } from '../../../core/shared/resource-type'; + +export const LDN_SERVICE = new ResourceType('ldnservice'); +export const LDN_SERVICE_CONSTRAINT_FILTERS = new ResourceType('itemfilters'); + +export const LDN_SERVICE_CONSTRAINT_FILTER = new ResourceType('itemfilter'); diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts new file mode 100644 index 0000000000..69b84427d1 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts @@ -0,0 +1,77 @@ +import { + autoserialize, + deserialize, + deserializeAs, + inheritSerialization, +} from 'cerialize'; + +import { typedObject } from '../../../core/cache/builders/build-decorators'; +import { CacheableObject } from '../../../core/cache/cacheable-object.model'; +import { ResourceType } from '../../../core/shared/resource-type'; +import { excludeFromEquals } from '../../../core/utilities/equals.decorators'; +import { LDN_SERVICE } from './ldn-service.resource-type'; +import { NotifyServicePattern } from './ldn-service-patterns.model'; + +/** + * LDN Services bounded to each selected pattern, relation set in service creation + */ + +export interface LdnServiceByPattern { + allowsMultipleRequests: boolean; + services: LdnService[]; +} + +/** An LdnService and its properties. */ +@typedObject +@inheritSerialization(CacheableObject) +export class LdnService extends CacheableObject { + static type = LDN_SERVICE; + + @excludeFromEquals + @autoserialize + type: ResourceType; + + @autoserialize + id: number; + + @deserializeAs('id') + uuid: string; + + @autoserialize + name: string; + + @autoserialize + description: string; + + @autoserialize + url: string; + + @autoserialize + score: number; + + @autoserialize + enabled: boolean; + + @autoserialize + ldnUrl: string; + + @autoserialize + lowerIp: string; + + @autoserialize + upperIp: string; + + @autoserialize + notifyServiceInboundPatterns?: NotifyServicePattern[]; + + @deserialize + _links: { + self: { + href: string; + }; + }; + + get self(): string { + return this._links.self.href; + } +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts new file mode 100644 index 0000000000..c734503d95 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts @@ -0,0 +1,10 @@ +/** + * List of parameter types used for scripts + */ +export enum LdnServiceConstrainType { + STRING = 'String', + DATE = 'date', + BOOLEAN = 'boolean', + FILE = 'InputStream', + OUTPUT = 'OutputStream' +} diff --git a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts new file mode 100644 index 0000000000..faa7dc82d7 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts @@ -0,0 +1,16 @@ +/** + * All available patterns for LDN service creation. + * They are used to populate a dropdown in the LDN service form creation + */ + +export const notifyPatterns = [ + + 'request-endorsement', + + 'request-ingest', + + 'request-review', + +]; + + diff --git a/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page-resolver.service.ts b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page-resolver.service.ts new file mode 100644 index 0000000000..4d988e6908 --- /dev/null +++ b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page-resolver.service.ts @@ -0,0 +1,36 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + Resolve, + RouterStateSnapshot, +} from '@angular/router'; + +/** + * Interface for the route parameters. + */ +export interface NotificationsSuggestionTargetsPageParams { + pageId?: string; + pageSize?: number; + currentPage?: number; +} + +/** + * This class represents a resolver that retrieve the route data before the route is activated. + */ +@Injectable() +export class NotificationsSuggestionTargetsPageResolver implements Resolve { + + /** + * Method for resolving the parameters in the current route. + * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot + * @param {RouterStateSnapshot} state The current RouterStateSnapshot + * @returns AdminNotificationsSuggestionTargetsPageParams Emits the route parameters + */ + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): NotificationsSuggestionTargetsPageParams { + return { + pageId: route.queryParams.pageId, + pageSize: parseInt(route.queryParams.pageSize, 10), + currentPage: parseInt(route.queryParams.page, 10), + }; + } +} diff --git a/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.html b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.html new file mode 100644 index 0000000000..b04e7132f1 --- /dev/null +++ b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.html @@ -0,0 +1 @@ + diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.scss similarity index 100% rename from src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss rename to src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.scss diff --git a/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.spec.ts b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.spec.ts new file mode 100644 index 0000000000..0dcee41450 --- /dev/null +++ b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.spec.ts @@ -0,0 +1,42 @@ +import { CommonModule } from '@angular/common'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { + async, + ComponentFixture, + TestBed, +} from '@angular/core/testing'; +import { TranslateModule } from '@ngx-translate/core'; + +import { NotificationsSuggestionTargetsPageComponent } from '../../../quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component'; + +describe('NotificationsSuggestionTargetsPageComponent', () => { + let component: NotificationsSuggestionTargetsPageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + CommonModule, + TranslateModule.forRoot(), + ], + declarations: [ + NotificationsSuggestionTargetsPageComponent, + ], + providers: [ + NotificationsSuggestionTargetsPageComponent, + ], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NotificationsSuggestionTargetsPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.ts b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.ts new file mode 100644 index 0000000000..c25fc43d45 --- /dev/null +++ b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ds-admin-notifications-publication-claim-page', + templateUrl: './admin-notifications-publication-claim-page.component.html', + styleUrls: ['./admin-notifications-publication-claim-page.component.scss'], +}) +export class AdminNotificationsPublicationClaimPageComponent { + +} diff --git a/src/app/admin/admin-notifications/admin-notifications-routing-paths.ts b/src/app/admin/admin-notifications/admin-notifications-routing-paths.ts new file mode 100644 index 0000000000..9fcabedd64 --- /dev/null +++ b/src/app/admin/admin-notifications/admin-notifications-routing-paths.ts @@ -0,0 +1,7 @@ + +export const QUALITY_ASSURANCE_EDIT_PATH = 'quality-assurance'; +export const PUBLICATION_CLAIMS_PATH = 'publication-claim'; + +export function getQualityAssuranceEditRoute() { + return `/${QUALITY_ASSURANCE_EDIT_PATH}`; +} diff --git a/src/app/admin/admin-notifications/admin-notifications-routing.module.ts b/src/app/admin/admin-notifications/admin-notifications-routing.module.ts new file mode 100644 index 0000000000..abcc6587dd --- /dev/null +++ b/src/app/admin/admin-notifications/admin-notifications-routing.module.ts @@ -0,0 +1,123 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AuthenticatedGuard } from '../../core/auth/authenticated.guard'; +import { I18nBreadcrumbResolver } from '../../core/breadcrumbs/i18n-breadcrumb.resolver'; +import { I18nBreadcrumbsService } from '../../core/breadcrumbs/i18n-breadcrumbs.service'; +import { QualityAssuranceBreadcrumbResolver } from '../../core/breadcrumbs/quality-assurance-breadcrumb.resolver'; +import { QualityAssuranceBreadcrumbService } from '../../core/breadcrumbs/quality-assurance-breadcrumb.service'; +import { SiteAdministratorGuard } from '../../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard'; +import { AdminNotificationsPublicationClaimPageResolver } from '../../quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page-resolver.service'; +import { QualityAssuranceEventsPageComponent } from '../../quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component'; +import { QualityAssuranceEventsPageResolver } from '../../quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.resolver'; +import { SourceDataResolver } from '../../quality-assurance-notifications-pages/quality-assurance-source-page-component/quality-assurance-source-data.resolver'; +import { QualityAssuranceSourcePageComponent } from '../../quality-assurance-notifications-pages/quality-assurance-source-page-component/quality-assurance-source-page.component'; +import { QualityAssuranceSourcePageResolver } from '../../quality-assurance-notifications-pages/quality-assurance-source-page-component/quality-assurance-source-page-resolver.service'; +import { QualityAssuranceTopicsPageComponent } from '../../quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page.component'; +import { QualityAssuranceTopicsPageResolver } from '../../quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page-resolver.service'; +import { AdminNotificationsPublicationClaimPageComponent } from './admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component'; +import { + PUBLICATION_CLAIMS_PATH, + QUALITY_ASSURANCE_EDIT_PATH, +} from './admin-notifications-routing-paths'; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { + canActivate: [ AuthenticatedGuard ], + path: `${PUBLICATION_CLAIMS_PATH}`, + component: AdminNotificationsPublicationClaimPageComponent, + pathMatch: 'full', + resolve: { + breadcrumb: I18nBreadcrumbResolver, + suggestionTargetParams: AdminNotificationsPublicationClaimPageResolver, + }, + data: { + title: 'admin.notifications.publicationclaim.page.title', + breadcrumbKey: 'admin.notifications.publicationclaim', + showBreadcrumbsFluid: false, + }, + }, + { + canActivate: [ AuthenticatedGuard ], + path: `${QUALITY_ASSURANCE_EDIT_PATH}/:sourceId`, + component: QualityAssuranceTopicsPageComponent, + pathMatch: 'full', + resolve: { + breadcrumb: QualityAssuranceBreadcrumbResolver, + openaireQualityAssuranceTopicsParams: QualityAssuranceTopicsPageResolver, + }, + data: { + title: 'admin.quality-assurance.page.title', + breadcrumbKey: 'admin.quality-assurance', + showBreadcrumbsFluid: false, + }, + }, + { + canActivate: [ AuthenticatedGuard ], + path: `${QUALITY_ASSURANCE_EDIT_PATH}/:sourceId/target/:targetId`, + component: QualityAssuranceTopicsPageComponent, + pathMatch: 'full', + resolve: { + breadcrumb: I18nBreadcrumbResolver, + openaireQualityAssuranceTopicsParams: QualityAssuranceTopicsPageResolver, + }, + data: { + title: 'admin.quality-assurance.page.title', + breadcrumbKey: 'admin.quality-assurance', + showBreadcrumbsFluid: false, + }, + }, + { + canActivate: [ SiteAdministratorGuard ], + path: `${QUALITY_ASSURANCE_EDIT_PATH}`, + component: QualityAssuranceSourcePageComponent, + pathMatch: 'full', + resolve: { + breadcrumb: I18nBreadcrumbResolver, + openaireQualityAssuranceSourceParams: QualityAssuranceSourcePageResolver, + sourceData: SourceDataResolver, + }, + data: { + title: 'admin.notifications.source.breadcrumbs', + breadcrumbKey: 'admin.notifications.source', + showBreadcrumbsFluid: false, + }, + }, + { + canActivate: [ AuthenticatedGuard ], + path: `${QUALITY_ASSURANCE_EDIT_PATH}/:sourceId/:topicId`, + component: QualityAssuranceEventsPageComponent, + pathMatch: 'full', + resolve: { + breadcrumb: QualityAssuranceBreadcrumbResolver, + openaireQualityAssuranceEventsParams: QualityAssuranceEventsPageResolver, + }, + data: { + title: 'admin.notifications.event.page.title', + breadcrumbKey: 'admin.notifications.event', + showBreadcrumbsFluid: false, + }, + }, + ]), + ], + providers: [ + I18nBreadcrumbResolver, + I18nBreadcrumbsService, + AdminNotificationsPublicationClaimPageResolver, + SourceDataResolver, + QualityAssuranceSourcePageResolver, + QualityAssuranceTopicsPageResolver, + QualityAssuranceEventsPageResolver, + QualityAssuranceSourcePageResolver, + QualityAssuranceBreadcrumbResolver, + QualityAssuranceBreadcrumbService, + ], +}) +/** + * Routing module for the Notifications section of the admin sidebar + */ +export class AdminNotificationsRoutingModule { + +} diff --git a/src/app/admin/admin-notifications/admin-notifications.module.ts b/src/app/admin/admin-notifications/admin-notifications.module.ts new file mode 100644 index 0000000000..e2149cda7a --- /dev/null +++ b/src/app/admin/admin-notifications/admin-notifications.module.ts @@ -0,0 +1,28 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { CoreModule } from '../../core/core.module'; +import { NotificationsModule } from '../../notifications/notifications.module'; +import { SharedModule } from '../../shared/shared.module'; +import { AdminNotificationsPublicationClaimPageComponent } from './admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component'; +import { AdminNotificationsRoutingModule } from './admin-notifications-routing.module'; + +@NgModule({ + imports: [ + CommonModule, + SharedModule, + CoreModule.forRoot(), + AdminNotificationsRoutingModule, + NotificationsModule, + ], + declarations: [ + AdminNotificationsPublicationClaimPageComponent, + ], + entryComponents: [], +}) +/** + * This module handles all components related to the notifications pages + */ +export class AdminNotificationsModule { + +} diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-dashboard-routing.module.ts b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard-routing.module.ts new file mode 100644 index 0000000000..dc9312ec28 --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard-routing.module.ts @@ -0,0 +1,59 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { I18nBreadcrumbResolver } from '../../core/breadcrumbs/i18n-breadcrumb.resolver'; +import { NotifyInfoGuard } from '../../core/coar-notify/notify-info/notify-info.guard'; +import { SiteAdministratorGuard } from '../../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard'; +import { AdminNotifyDashboardComponent } from './admin-notify-dashboard.component'; +import { AdminNotifyIncomingComponent } from './admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component'; +import { AdminNotifyOutgoingComponent } from './admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component'; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { + canActivate: [SiteAdministratorGuard, NotifyInfoGuard], + path: '', + resolve: { + breadcrumb: I18nBreadcrumbResolver, + }, + component: AdminNotifyDashboardComponent, + pathMatch: 'full', + data: { + title: 'admin.notify.dashboard.page.title', + breadcrumbKey: 'admin.notify.dashboard', + }, + }, + { + path: 'inbound', + resolve: { + breadcrumb: I18nBreadcrumbResolver, + }, + component: AdminNotifyIncomingComponent, + canActivate: [SiteAdministratorGuard, NotifyInfoGuard], + data: { + title: 'admin.notify.dashboard.page.title', + breadcrumbKey: 'admin.notify.dashboard', + }, + }, + { + path: 'outbound', + resolve: { + breadcrumb: I18nBreadcrumbResolver, + }, + component: AdminNotifyOutgoingComponent, + canActivate: [SiteAdministratorGuard, NotifyInfoGuard], + data: { + title: 'admin.notify.dashboard.page.title', + breadcrumbKey: 'admin.notify.dashboard', + }, + }, + ]), + ], +}) +/** + * Routing module for the Notifications section of the admin sidebar + */ +export class AdminNotifyDashboardRoutingModule { + +} diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.html b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.html new file mode 100644 index 0000000000..3adb7e857b --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.html @@ -0,0 +1,23 @@ +
+
+
+

{{'admin-notify-dashboard.title'| translate}}

+
{{'admin-notify-dashboard.description' | translate}}
+ +
+
+
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.spec.ts b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.spec.ts new file mode 100644 index 0000000000..2629313363 --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.spec.ts @@ -0,0 +1,60 @@ +import { + ComponentFixture, + TestBed, +} from '@angular/core/testing'; +import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'; +import { TranslateModule } from '@ngx-translate/core'; + +import { buildPaginatedList } from '../../core/data/paginated-list.model'; +import { SearchService } from '../../core/shared/search/search.service'; +import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils'; +import { AdminNotifyDashboardComponent } from './admin-notify-dashboard.component'; +import { AdminNotifyMessage } from './models/admin-notify-message.model'; +import { AdminNotifySearchResult } from './models/admin-notify-message-search-result.model'; + +describe('AdminNotifyDashboardComponent', () => { + let component: AdminNotifyDashboardComponent; + let fixture: ComponentFixture; + + let item1; + let item2; + let item3; + let searchResult1; + let searchResult2; + let searchResult3; + let results; + + const mockBoxes = [ + { title: 'admin-notify-dashboard.received-ldn', boxes: [ undefined, undefined, undefined, undefined, undefined ] }, + { title: 'admin-notify-dashboard.generated-ldn', boxes: [ undefined, undefined, undefined, undefined, undefined ] }, + ]; + + beforeEach(async () => { + item1 = Object.assign(new AdminNotifyMessage(), { uuid: 'e1c51c69-896d-42dc-8221-1d5f2ad5516e' }); + item2 = Object.assign(new AdminNotifyMessage(), { uuid: 'c8279647-1acc-41ae-b036-951d5f65649b' }); + item3 = Object.assign(new AdminNotifyMessage(), { uuid: 'c3bcbff5-ec0c-4831-8e4c-94b9c933ccac' }); + searchResult1 = Object.assign(new AdminNotifySearchResult(), { indexableObject: item1 }); + searchResult2 = Object.assign(new AdminNotifySearchResult(), { indexableObject: item2 }); + searchResult3 = Object.assign(new AdminNotifySearchResult(), { indexableObject: item3 }); + results = buildPaginatedList(undefined, [searchResult1, searchResult2, searchResult3]); + + await TestBed.configureTestingModule({ + imports: [TranslateModule.forRoot(), NgbNavModule], + declarations: [ AdminNotifyDashboardComponent ], + providers: [{ provide: SearchService, useValue: { search: () => createSuccessfulRemoteDataObject$(results) } }], + }) + .compileComponents(); + + fixture = TestBed.createComponent(AdminNotifyDashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', (done) => { + component.notifyMetricsRows$.subscribe(boxes => { + expect(boxes).toEqual(mockBoxes); + done(); + }); + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.ts b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.ts new file mode 100644 index 0000000000..40100d8684 --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.ts @@ -0,0 +1,104 @@ +import { + Component, + OnInit, +} from '@angular/core'; +import { + forkJoin, + Observable, +} from 'rxjs'; +import { map } from 'rxjs/operators'; + +import { environment } from '../../../environments/environment'; +import { DSpaceObject } from '../../core/shared/dspace-object.model'; +import { getFirstCompletedRemoteData } from '../../core/shared/operators'; +import { SearchService } from '../../core/shared/search/search.service'; +import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service'; +import { SEARCH_CONFIG_SERVICE } from '../../my-dspace-page/my-dspace-page.component'; +import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; +import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model'; +import { SearchObjects } from '../../shared/search/models/search-objects.model'; +import { + AdminNotifyMetricsBox, + AdminNotifyMetricsRow, +} from './admin-notify-metrics/admin-notify-metrics.model'; + +@Component({ + selector: 'ds-admin-notify-dashboard', + templateUrl: './admin-notify-dashboard.component.html', + providers: [ + { + provide: SEARCH_CONFIG_SERVICE, + useClass: SearchConfigurationService, + }, + ], +}) + +/** + * Component used for visual representation and search of LDN messages for Admins + */ +export class AdminNotifyDashboardComponent implements OnInit{ + + public notifyMetricsRows$: Observable; + + private metricsConfig = environment.notifyMetrics; + private singleResultOptions = Object.assign(new PaginationComponentOptions(), { + id: 'single-result-options', + pageSize: 1, + }); + + constructor(private searchService: SearchService) { + } + + ngOnInit() { + const mertricsRowsConfigurations = this.metricsConfig + .map(row => row.boxes) + .map(boxes => boxes.map(box => box.config).filter(config => !!config)); + const flatConfigurations = [].concat(...mertricsRowsConfigurations.map((config) => config)); + const searchConfigurations = flatConfigurations + .map(config => Object.assign(new PaginatedSearchOptions({}), + { configuration: config, pagination: this.singleResultOptions }, + )); + + this.notifyMetricsRows$ = forkJoin(searchConfigurations.map(config => this.searchService.search(config) + .pipe( + getFirstCompletedRemoteData(), + map(response => this.mapSearchObjectsToMetricsBox(response.payload)), + ), + ), + ).pipe( + map(metricBoxes => this.mapUpdatedBoxesToMetricsRows(metricBoxes)), + ); + } + + /** + * Function to map received SearchObjects to notify boxes config + * + * @param searchObject The object to map + * @private + */ + private mapSearchObjectsToMetricsBox(searchObject: SearchObjects): AdminNotifyMetricsBox { + const count = searchObject.pageInfo.totalElements; + const objectConfig = searchObject.configuration; + const metricsBoxes = [].concat(...this.metricsConfig.map((config) => config.boxes)); + + return { + ...metricsBoxes.find(box => box.config === objectConfig), + count, + }; + } + + /** + * Function to map updated boxes with count to each row of the configuration + * + * @param boxesWithCount The object to map + * @private + */ + private mapUpdatedBoxesToMetricsRows(boxesWithCount: AdminNotifyMetricsBox[]): AdminNotifyMetricsRow[] { + return this.metricsConfig.map(row => { + return { + ...row, + boxes: row.boxes.map(rowBox => boxesWithCount.find(boxWithCount => boxWithCount.config === rowBox.config)), + }; + }); + } +} diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.module.ts b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.module.ts new file mode 100644 index 0000000000..d840197ea7 --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.module.ts @@ -0,0 +1,55 @@ +import { + CommonModule, + DatePipe, +} from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { SearchPageModule } from '../../search-page/search-page.module'; +import { SearchModule } from '../../shared/search/search.module'; +import { SharedModule } from '../../shared/shared.module'; +import { AdminNotifyDashboardComponent } from './admin-notify-dashboard.component'; +import { AdminNotifyDashboardRoutingModule } from './admin-notify-dashboard-routing.module'; +import { AdminNotifyDetailModalComponent } from './admin-notify-detail-modal/admin-notify-detail-modal.component'; +import { AdminNotifyIncomingComponent } from './admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component'; +import { AdminNotifyLogsResultComponent } from './admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component'; +import { AdminNotifyOutgoingComponent } from './admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component'; +import { AdminNotifyMetricsComponent } from './admin-notify-metrics/admin-notify-metrics.component'; +import { AdminNotifySearchResultComponent } from './admin-notify-search-result/admin-notify-search-result.component'; +import { AdminNotifyMessagesService } from './services/admin-notify-messages.service'; + +const ENTRY_COMPONENTS = [ + AdminNotifySearchResultComponent, +]; +@NgModule({ + imports: [ + CommonModule, + RouterModule, + SharedModule, + AdminNotifyDashboardRoutingModule, + SearchModule, + SearchPageModule, + ], + providers: [ + AdminNotifyMessagesService, + DatePipe, + ], + declarations: [ + ...ENTRY_COMPONENTS, + AdminNotifyDashboardComponent, + AdminNotifyMetricsComponent, + AdminNotifyIncomingComponent, + AdminNotifyOutgoingComponent, + AdminNotifyDetailModalComponent, + AdminNotifySearchResultComponent, + AdminNotifyLogsResultComponent, + ], +}) +export class AdminNotifyDashboardModule { + static withEntryComponents() { + return { + ngModule: AdminNotifyDashboardModule, + providers: ENTRY_COMPONENTS.map((component) => ({ provide: component })), + }; + } +} diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.html b/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.html new file mode 100644 index 0000000000..52d93cbb62 --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.html @@ -0,0 +1,22 @@ +
+

{{'notify-message-modal.title' | translate}}

+ +
+
+
+
+
{{ key + '.notify-detail-modal' | translate}}
+
{{'notify-detail-modal.' + notifyMessage[key] | translate: {default: notifyMessage[key] ?? "n/a" } }}
+
+
+ +
+ +
+ + 

+

diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.spec.ts b/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.spec.ts
new file mode 100644
index 0000000000..7fddf170ff
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.spec.ts
@@ -0,0 +1,39 @@
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { AdminNotifyDetailModalComponent } from './admin-notify-detail-modal.component';
+
+describe('AdminNotifyDetailModalComponent', () => {
+  let component: AdminNotifyDetailModalComponent;
+  let fixture: ComponentFixture;
+  const modalStub = jasmine.createSpyObj('modalStub', ['close']);
+
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ AdminNotifyDetailModalComponent ],
+      providers: [{ provide: NgbActiveModal, useValue: modalStub }],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AdminNotifyDetailModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should close', () => {
+    spyOn(component.response, 'emit');
+    component.closeModal();
+    expect(modalStub.close).toHaveBeenCalled();
+    expect(component.response.emit).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.ts b/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.ts
new file mode 100644
index 0000000000..3962d9cb50
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.ts
@@ -0,0 +1,55 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+
+import { fadeIn } from '../../../shared/animations/fade';
+import { MissingTranslationHelper } from '../../../shared/translate/missing-translation.helper';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+
+@Component({
+  selector: 'ds-admin-notify-detail-modal',
+  templateUrl: './admin-notify-detail-modal.component.html',
+  animations: [
+    fadeIn,
+  ],
+})
+/**
+ * Component for detailed view of LDN messages displayed in search result in AdminNotifyDashboardComponent
+ */
+
+export class AdminNotifyDetailModalComponent {
+  @Input() notifyMessage: AdminNotifyMessage;
+  @Input() notifyMessageKeys: string[];
+
+  /**
+   * An event fired when the modal is closed
+   */
+  @Output()
+    response = new EventEmitter();
+
+  public isCoarMessageVisible = false;
+
+
+  constructor(protected activeModal: NgbActiveModal,
+              public translationsService: TranslateService) {
+    this.translationsService.missingTranslationHandler = new MissingTranslationHelper();
+  }
+
+
+  /**
+   * Close the modal and set the response to true so RootComponent knows the modal was closed
+   */
+  closeModal() {
+    this.activeModal.close();
+    this.response.emit(true);
+  }
+
+  toggleCoarMessage() {
+    this.isCoarMessageVisible = !this.isCoarMessageVisible;
+  }
+}
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.html b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.html
new file mode 100644
index 0000000000..4c957ca630
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.html
@@ -0,0 +1,23 @@
+

+  

+    

+      
{{'admin-notify-dashboard.title'| translate}}

+      
+    

+  

+

diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.spec.ts b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.spec.ts
new file mode 100644
index 0000000000..70771bac54
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.spec.ts
@@ -0,0 +1,61 @@
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { provideMockStore } from '@ngrx/store/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
+import { RequestService } from '../../../../core/data/request.service';
+import { RouteService } from '../../../../core/services/route.service';
+import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+import { MockActivatedRoute } from '../../../../shared/mocks/active-router.mock';
+import { getMockRemoteDataBuildService } from '../../../../shared/mocks/remote-data-build.service.mock';
+import { routeServiceStub } from '../../../../shared/testing/route-service.stub';
+import { AdminNotifyIncomingComponent } from './admin-notify-incoming.component';
+
+describe('AdminNotifyIncomingComponent', () => {
+  let component: AdminNotifyIncomingComponent;
+  let fixture: ComponentFixture;
+  let halService: HALEndpointService;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+
+
+
+  beforeEach(async () => {
+    rdbService = getMockRemoteDataBuildService();
+    halService = jasmine.createSpyObj('halService', {
+      'getRootHref': '/api',
+    });
+    requestService = jasmine.createSpyObj('requestService', {
+      'generateRequestId': 'client/1234',
+      'send': '',
+    });
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ AdminNotifyIncomingComponent ],
+      providers: [
+        { provide: SEARCH_CONFIG_SERVICE, useValue: SearchConfigurationService },
+        { provide: RouteService, useValue: routeServiceStub },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
+        { provide: HALEndpointService, useValue: halService },
+        { provide: RequestService, useValue: requestService },
+        { provide: RemoteDataBuildService, useValue: rdbService },
+        provideMockStore({}),
+      ],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AdminNotifyIncomingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.ts b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.ts
new file mode 100644
index 0000000000..fc0f410ad5
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.ts
@@ -0,0 +1,22 @@
+import {
+  Component,
+  Inject,
+} from '@angular/core';
+
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+
+@Component({
+  selector: 'ds-admin-notify-incoming',
+  templateUrl: './admin-notify-incoming.component.html',
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService,
+    },
+  ],
+})
+export class AdminNotifyIncomingComponent {
+  constructor(@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService) {
+  }
+}
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html
new file mode 100644
index 0000000000..f7c4f77a70
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html
@@ -0,0 +1,25 @@
+

+  

+    
{{((isInbound$ | async) ? 'admin.notify.dashboard.inbound'  : 'admin.notify.dashboard.outbound') | translate}}

+    

+      

+        
+      

+      
+    

+  

+

+
+
+

+  
+

+
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.spec.ts b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.spec.ts
new file mode 100644
index 0000000000..16adbd17f3
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.spec.ts
@@ -0,0 +1,55 @@
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
+import { provideMockStore } from '@ngrx/store/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../../../core/cache/object-cache.service';
+import { RequestService } from '../../../../core/data/request.service';
+import { RouteService } from '../../../../core/services/route.service';
+import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
+import { MockActivatedRoute } from '../../../../shared/mocks/active-router.mock';
+import { routeServiceStub } from '../../../../shared/testing/route-service.stub';
+import { RouterStub } from '../../../../shared/testing/router.stub';
+import { AdminNotifyLogsResultComponent } from './admin-notify-logs-result.component';
+
+describe('AdminNotifyLogsResultComponent', () => {
+  let component: AdminNotifyLogsResultComponent;
+  let fixture: ComponentFixture;
+  let objectCache: ObjectCacheService;
+  let requestService: RequestService;
+  let halService: HALEndpointService;
+  let rdbService: RemoteDataBuildService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ AdminNotifyLogsResultComponent ],
+      providers: [
+        { provide: RouteService, useValue: routeServiceStub },
+        { provide: Router, useValue: new RouterStub() },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
+        { provide: HALEndpointService, useValue: halService },
+        { provide: ObjectCacheService, useValue: objectCache },
+        { provide: RequestService, useValue: requestService },
+        { provide: RemoteDataBuildService, useValue: rdbService },
+        provideMockStore({}),
+      ],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AdminNotifyLogsResultComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.ts b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.ts
new file mode 100644
index 0000000000..626cd2da1f
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.ts
@@ -0,0 +1,84 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  Input,
+  OnInit,
+} from '@angular/core';
+import {
+  ActivatedRoute,
+  ActivatedRouteSnapshot,
+  Router,
+} from '@angular/router';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { Context } from '../../../../core/shared/context.model';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+
+@Component({
+  selector: 'ds-admin-notify-logs-result',
+  templateUrl: './admin-notify-logs-result.component.html',
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService,
+    },
+  ],
+})
+
+/**
+ * Component for visualization of search page and related results for the logs of the Notify dashboard
+ */
+
+export class AdminNotifyLogsResultComponent implements OnInit {
+
+  @Input()
+    defaultConfiguration: string;
+
+
+  public selectedSearchConfig$: Observable;
+  public isInbound$: Observable;
+
+  protected readonly context = Context.CoarNotify;
+
+  constructor(@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
+              private router: Router,
+              private route: ActivatedRoute,
+              protected cdRef: ChangeDetectorRef) {
+  }
+
+  ngOnInit() {
+    this.selectedSearchConfig$ = this.searchConfigService.getCurrentConfiguration(this.defaultConfiguration);
+    this.isInbound$ = this.selectedSearchConfig$.pipe(
+      map(config => config.startsWith('NOTIFY.incoming')),
+    );
+  }
+
+  /**
+   * Reset route state to default configuration
+   */
+  public resetDefaultConfiguration() {
+    //Idle navigation to trigger rendering of result on same page
+    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
+      this.router.navigate([this.getResolvedUrl(this.route.snapshot)], {
+        queryParams: {
+          configuration: this.defaultConfiguration,
+          view: ViewMode.Table,
+        },
+      });
+    });
+  }
+
+  /**
+   * Get resolved url from route
+   *
+   * @param route url path
+   * @returns url path
+   */
+  private getResolvedUrl(route: ActivatedRouteSnapshot): string {
+    return route.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/');
+  }
+}
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.html b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.html
new file mode 100644
index 0000000000..e9bc1d10b2
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.html
@@ -0,0 +1,24 @@
+

+  

+    

+      
{{'admin-notify-dashboard.title'| translate}}

+      
+    

+  

+

diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.spec.ts b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.spec.ts
new file mode 100644
index 0000000000..73773736ff
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.spec.ts
@@ -0,0 +1,60 @@
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { provideMockStore } from '@ngrx/store/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
+import { RequestService } from '../../../../core/data/request.service';
+import { RouteService } from '../../../../core/services/route.service';
+import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+import { MockActivatedRoute } from '../../../../shared/mocks/active-router.mock';
+import { getMockRemoteDataBuildService } from '../../../../shared/mocks/remote-data-build.service.mock';
+import { routeServiceStub } from '../../../../shared/testing/route-service.stub';
+import { AdminNotifyOutgoingComponent } from './admin-notify-outgoing.component';
+
+describe('AdminNotifyOutgoingComponent', () => {
+  let component: AdminNotifyOutgoingComponent;
+  let fixture: ComponentFixture;
+  let halService: HALEndpointService;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+
+
+  beforeEach(async () => {
+    rdbService = getMockRemoteDataBuildService();
+    requestService = jasmine.createSpyObj('requestService', {
+      'generateRequestId': 'client/1234',
+      'send': '',
+    });
+    halService = jasmine.createSpyObj('halService', {
+      'getRootHref': '/api',
+    });
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ AdminNotifyOutgoingComponent ],
+      providers: [
+        { provide: SEARCH_CONFIG_SERVICE, useValue: SearchConfigurationService },
+        { provide: RouteService, useValue: routeServiceStub },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
+        { provide: HALEndpointService, useValue: halService },
+        { provide: RequestService, useValue: requestService },
+        { provide: RemoteDataBuildService, useValue: rdbService },
+        provideMockStore({}),
+      ],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AdminNotifyOutgoingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.ts b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.ts
new file mode 100644
index 0000000000..26d6d345be
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.ts
@@ -0,0 +1,22 @@
+import {
+  Component,
+  Inject,
+} from '@angular/core';
+
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+
+@Component({
+  selector: 'ds-admin-notify-outgoing',
+  templateUrl: './admin-notify-outgoing.component.html',
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService,
+    },
+  ],
+})
+export class AdminNotifyOutgoingComponent {
+  constructor(@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService) {
+  }
+}
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.html b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.html
new file mode 100644
index 0000000000..3257bdd5ba
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.html
@@ -0,0 +1,9 @@
+

+  
{{ row.title | translate }}

+  

+    

+      
+    

+  

+

+
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.spec.ts b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.spec.ts
new file mode 100644
index 0000000000..3411a6134f
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.spec.ts
@@ -0,0 +1,74 @@
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ViewMode } from '../../../core/shared/view-mode.model';
+import { RouterStub } from '../../../shared/testing/router.stub';
+import { AdminNotifyMetricsComponent } from './admin-notify-metrics.component';
+
+describe('AdminNotifyMetricsComponent', () => {
+  let component: AdminNotifyMetricsComponent;
+  let fixture: ComponentFixture;
+  let router: RouterStub;
+
+  beforeEach(async () => {
+    router = Object.assign(new RouterStub(),
+      { url : '/notify-dashboard' },
+    );
+
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ AdminNotifyMetricsComponent ],
+      providers: [{ provide: Router, useValue: router }],
+    })
+      .compileComponents();
+
+
+
+    fixture = TestBed.createComponent(AdminNotifyMetricsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should navigate to correct url based on config', () => {
+    const searchConfig = 'test.involvedItems';
+    const incomingConfig = 'NOTIFY.incoming.test';
+    const outgoingConfig = 'NOTIFY.outgoing.test';
+    const adminPath =  '/admin/search';
+    const routeExtras = {
+      queryParams: {
+        configuration: searchConfig,
+        view: ViewMode.ListElement,
+      },
+    };
+
+    const routeExtrasTable = {
+      queryParams: {
+        configuration: incomingConfig,
+        view: ViewMode.Table,
+      },
+    };
+
+    const routeExtrasTableOutgoing = {
+      queryParams: {
+        configuration: outgoingConfig,
+        view: ViewMode.Table,
+      },
+    };
+    component.navigateToSelectedSearchConfig(searchConfig);
+    expect(router.navigate).toHaveBeenCalledWith([adminPath], routeExtras);
+
+    component.navigateToSelectedSearchConfig(incomingConfig);
+    expect(router.navigate).toHaveBeenCalledWith(['/notify-dashboard/inbound'], routeExtrasTable);
+
+    component.navigateToSelectedSearchConfig(outgoingConfig);
+    expect(router.navigate).toHaveBeenCalledWith(['/notify-dashboard/outbound'], routeExtrasTableOutgoing);
+  });
+});
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.ts b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.ts
new file mode 100644
index 0000000000..6d08f21415
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.ts
@@ -0,0 +1,57 @@
+import {
+  Component,
+  Input,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ViewMode } from '../../../core/shared/view-mode.model';
+import { AdminNotifyMetricsRow } from './admin-notify-metrics.model';
+
+@Component({
+  selector: 'ds-admin-notify-metrics',
+  templateUrl: './admin-notify-metrics.component.html',
+})
+/**
+ * Component used to display the number of notification for each configured box in the notifyMetrics section
+ */
+
+export class AdminNotifyMetricsComponent {
+
+  @Input()
+    boxesConfig: AdminNotifyMetricsRow[];
+
+  private incomingConfiguration = 'NOTIFY.incoming';
+  private involvedItemsSuffix = 'involvedItems';
+  private inboundPath = '/inbound';
+  private outboundPath = '/outbound';
+  private adminSearchPath = '/admin/search';
+
+  constructor(private router: Router) {
+  }
+
+
+  public navigateToSelectedSearchConfig(searchConfig: string) {
+    const isRelatedItemsConfig = searchConfig.endsWith(this.involvedItemsSuffix);
+
+    if (isRelatedItemsConfig) {
+      this.router.navigate([this.adminSearchPath], {
+        queryParams: {
+          configuration: searchConfig,
+          view: ViewMode.ListElement,
+        },
+      });
+
+      return;
+    }
+
+    const isIncomingConfig = searchConfig.startsWith(this.incomingConfiguration);
+    const selectedPath = isIncomingConfig ? this.inboundPath : this.outboundPath;
+
+    this.router.navigate([`${this.router.url}${selectedPath}`], {
+      queryParams: {
+        configuration: searchConfig,
+        view: ViewMode.Table,
+      },
+    });
+  }
+}
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.model.ts b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.model.ts
new file mode 100644
index 0000000000..83b931c866
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.model.ts
@@ -0,0 +1,19 @@
+/**
+ * The properties for each Box to be displayed in rows in the AdminNotifyMetricsComponent
+ */
+
+export interface AdminNotifyMetricsBox {
+  color: string;
+  textColor?: string;
+  title: string;
+  description: string;
+  config: string;
+  count?: number;
+}
+/**
+ * The properties for each Row containing a list of AdminNotifyMetricsBox to be displayed in the AdminNotifyMetricsComponent
+ */
+export interface AdminNotifyMetricsRow {
+  title: string;
+  boxes: AdminNotifyMetricsBox[]
+}
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.html b/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.html
new file mode 100644
index 0000000000..af540b094e
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.html
@@ -0,0 +1,51 @@
+

+  
+    
+      
+        
+        
+        
+        
+        
+        
+      
+    
+    
+      
+        
+        
+        
+        
+        
+        
+      
+    
+  
{{ 'notify-message-result.timestamp' | translate}}{{'notify-message-result.repositoryItem' | translate}}{{ 'notify-message-result.ldnService' | translate}}{{ 'notify-message-result.type' | translate }}{{ 'notify-message-result.status' | translate  }}{{ 'notify-message-result.action' | translate }}

+          
{{ message.queueLastStartTime | date:"YYYY/MM/d hh:mm:ss" }}

+          
n/a

+        		
+          
+            
+              {{ message.relatedItem }}
+            
+          
+          
n/a

+        		
+          
{{ message.ldnService }}

+          
n/a

+        		
+          
{{ message.activityStreamType }}

+        		
+          
{{ 'notify-detail-modal.' + message.queueStatusLabel | translate }}

+        		
+          

+            
+            
+          

+        

+

diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.spec.ts b/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.spec.ts
new file mode 100644
index 0000000000..1a6411cb60
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.spec.ts
@@ -0,0 +1,188 @@
+import { DatePipe } from '@angular/common';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { cold } from 'jasmine-marbles';
+import {
+  of as observableOf,
+  of,
+} from 'rxjs';
+
+import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { RequestService } from '../../../core/data/request.service';
+import { RouteService } from '../../../core/services/route.service';
+import { ConfigurationProperty } from '../../../core/shared/configuration-property.model';
+import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
+import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
+import { routeServiceStub } from '../../../shared/testing/route-service.stub';
+import { RouterStub } from '../../../shared/testing/router.stub';
+import { AdminNotifyDetailModalComponent } from '../admin-notify-detail-modal/admin-notify-detail-modal.component';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+import { AdminNotifyMessagesService } from '../services/admin-notify-messages.service';
+import { AdminNotifySearchResultComponent } from './admin-notify-search-result.component';
+
+export const mockAdminNotifyMessages = [
+  {
+    'type': 'message',
+    'id': 'urn:uuid:5fb3af44-d4f8-4226-9475-2d09c2d8d9e0',
+    'coarNotifyType': 'coar-notify:ReviewAction',
+    'activityStreamType': 'TentativeReject',
+    'inReplyTo': 'urn:uuid:f7289ad5-0955-4c86-834c-fb54a736778b',
+    'object': null,
+    'context': '24d50450-9ff0-485f-82d4-fba1be42f3f9',
+    'queueAttempts': 1,
+    'queueLastStartTime': '2023-11-24T14:44:00.064+00:00',
+    'origin': 12,
+    'target': null,
+    'queueStatusLabel': 'notify-queue-status.processed',
+    'queueTimeout': '2023-11-24T15:44:00.064+00:00',
+    'queueStatus': 3,
+    '_links': {
+      'self': {
+        'href': 'http://localhost:8080/server/api/ldn/messages/urn:uuid:5fb3af44-d4f8-4226-9475-2d09c2d8d9e0',
+      },
+    },
+    'thumbnail': 'test',
+    'item': {},
+    'accessStatus': {},
+    'ldnService': 'NOTIFY inbox - Automatic service',
+    'relatedItem': 'test coar 2 demo',
+    'message': '{"@context":["https://www.w3.org/ns/activitystreams","https://purl.org/coar/notify"],"id":"urn:uuid:668f26e0-2e8d-4118-b0d2-ee713523bc45","type":["Reject","coar-notify:IngestAction"],"actor":{"id":"https://generic-service.com","type":["Service"],"name":"Generic Service"},"context":{"id":"https://dspace-coar.4science.cloud/handle/123456789/28","type":["Document"],"ietf:cite-as":"https://doi.org/10.4598/12123488"},"object":{"id":"https://dspace-coar.4science.cloud/handle/123456789/28","type":["Offer"]},"origin":{"id":"https://generic-service.com/system","type":["Service"],"inbox":"https://notify-inbox.info/inbox7"},"target":{"id":"https://some-organisation.org","type":["Organization"],"inbox":"https://dspace-coar.4science.cloud/server/ldn/inbox"},"inReplyTo":"urn:uuid:d9b4010a-f128-4815-abb2-83707a2ee9cf"}',
+  },
+  {
+    'type': 'message',
+    'id': 'urn:uuid:544c8777-e826-4810-a625-3e394cc3660d',
+    'coarNotifyType': 'coar-notify:IngestAction',
+    'activityStreamType': 'Announce',
+    'inReplyTo': 'urn:uuid:b2ad72d6-6ea9-464f-b385-29a78417f6b8',
+    'object': null,
+    'context': 'e657437a-0ee2-437d-916a-bba8c57bf40b',
+    'queueAttempts': 1,
+    'queueLastStartTime': null,
+    'origin': 12,
+    'target': null,
+    'queueStatusLabel': 'notify-queue-status.unmapped_action',
+    'queueTimeout': '2023-11-24T14:15:34.945+00:00',
+    'queueStatus': 6,
+    '_links': {
+      'self': {
+        'href': 'http://localhost:8080/server/api/ldn/messages/urn:uuid:544c8777-e826-4810-a625-3e394cc3660d',
+      },
+    },
+    'thumbnail': {},
+    'item': {},
+    'accessStatus': {},
+    'ldnService': 'NOTIFY inbox - Automatic service',
+    'relatedItem': 'test coar demo',
+    'message': '{"@context":["https://www.w3.org/ns/activitystreams","https://purl.org/coar/notify"],"id":"urn:uuid:668f26e0-2e8d-4118-b0d2-ee713523bc45","type":["Reject","coar-notify:IngestAction"],"actor":{"id":"https://generic-service.com","type":["Service"],"name":"Generic Service"},"context":{"id":"https://dspace-coar.4science.cloud/handle/123456789/28","type":["Document"],"ietf:cite-as":"https://doi.org/10.4598/12123488"},"object":{"id":"https://dspace-coar.4science.cloud/handle/123456789/28","type":["Offer"]},"origin":{"id":"https://generic-service.com/system","type":["Service"],"inbox":"https://notify-inbox.info/inbox7"},"target":{"id":"https://some-organisation.org","type":["Organization"],"inbox":"https://dspace-coar.4science.cloud/server/ldn/inbox"},"inReplyTo":"urn:uuid:d9b4010a-f128-4815-abb2-83707a2ee9cf"}',
+  },
+] as unknown as AdminNotifyMessage[];
+describe('AdminNotifySearchResultComponent', () => {
+  let component: AdminNotifySearchResultComponent;
+  let fixture: ComponentFixture;
+  let objectCache: ObjectCacheService;
+  let requestService: RequestService;
+  let halService: HALEndpointService;
+  let rdbService: RemoteDataBuildService;
+  let adminNotifyMessageService: AdminNotifyMessagesService;
+  let searchConfigService: SearchConfigurationService;
+  let modalService: NgbModal;
+  const requestUUID = '34cfed7c-f597-49ef-9cbe-ea351f0023c2';
+  const testObject = {
+    uuid: 'test-property',
+    name: 'test-property',
+    values: ['value-1', 'value-2'],
+  } as ConfigurationProperty;
+
+  beforeEach(async () => {
+    halService = jasmine.createSpyObj('halService', {
+      getEndpoint: cold('a', { a: '' }),
+    });
+    adminNotifyMessageService = jasmine.createSpyObj('adminNotifyMessageService', {
+      getDetailedMessages: of(mockAdminNotifyMessages),
+      reprocessMessage: of(mockAdminNotifyMessages),
+    });
+    requestService = jasmine.createSpyObj('requestService', {
+      generateRequestId: requestUUID,
+      send: true,
+    });
+    rdbService = jasmine.createSpyObj('rdbService', {
+      buildSingle: cold('a', {
+        a: {
+          payload: testObject,
+        },
+      }),
+    });
+
+    searchConfigService = jasmine.createSpyObj('searchConfigService', {
+      getCurrentConfiguration: of('NOTIFY.outgoing'),
+    });
+    objectCache = {} as ObjectCacheService;
+
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ AdminNotifySearchResultComponent, AdminNotifyDetailModalComponent ],
+      providers: [
+        { provide: AdminNotifyMessagesService, useValue: adminNotifyMessageService },
+        { provide: RouteService, useValue: routeServiceStub },
+        { provide: ActivatedRoute, useValue: new RouterStub() },
+        { provide: HALEndpointService, useValue: halService },
+        { provide: ObjectCacheService, useValue: objectCache },
+        { provide: RequestService, useValue: requestService },
+        { provide: RemoteDataBuildService, useValue: rdbService },
+        { provide: SEARCH_CONFIG_SERVICE, useValue: searchConfigService },
+        DatePipe,
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AdminNotifySearchResultComponent);
+    component = fixture.componentInstance;
+    component.searchConfigService = searchConfigService;
+    modalService = (component as any).modalService;
+    spyOn(modalService, 'open').and.returnValue(Object.assign({ componentInstance: Object.assign({ response: observableOf(true) }) }));
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    expect(component.isInbound).toBeFalsy();
+  });
+
+  it('should open modal', () => {
+    component.openDetailModal(mockAdminNotifyMessages[0]);
+    expect(modalService.open).toHaveBeenCalledWith(AdminNotifyDetailModalComponent);
+  });
+
+  it('should map messages', (done) => {
+    component.messagesSubject$.subscribe((messages) => {
+      expect(messages).toEqual(mockAdminNotifyMessages);
+      done();
+    });
+  });
+
+  it('should reprocess message', (done) => {
+    component.reprocessMessage(mockAdminNotifyMessages[0]);
+    component.messagesSubject$.subscribe((messages) => {
+      expect(messages).toEqual(mockAdminNotifyMessages);
+      done();
+    });
+  });
+
+  it('should unsubscribe on destroy', () => {
+    (component as any).subs = [of(null).subscribe()];
+
+    spyOn((component as any).subs[0], 'unsubscribe');
+    component.ngOnDestroy();
+    expect((component as any).subs[0].unsubscribe).toHaveBeenCalled();
+  });
+});
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.ts b/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.ts
new file mode 100644
index 0000000000..a9a329d0b5
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.ts
@@ -0,0 +1,162 @@
+import { DatePipe } from '@angular/common';
+import {
+  Component,
+  Inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {
+  BehaviorSubject,
+  Subscription,
+} from 'rxjs';
+
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { Context } from '../../../core/shared/context.model';
+import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
+import { ViewMode } from '../../../core/shared/view-mode.model';
+import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
+import { tabulatableObjectsComponent } from '../../../shared/object-collection/shared/tabulatable-objects/tabulatable-objects.decorator';
+import { TabulatableResultListElementsComponent } from '../../../shared/object-list/search-result-list-element/tabulatable-search-result/tabulatable-result-list-elements.component';
+import { AdminNotifyDetailModalComponent } from '../admin-notify-detail-modal/admin-notify-detail-modal.component';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+import { AdminNotifySearchResult } from '../models/admin-notify-message-search-result.model';
+import { AdminNotifyMessagesService } from '../services/admin-notify-messages.service';
+
+@tabulatableObjectsComponent(PaginatedList, ViewMode.Table, Context.CoarNotify)
+@Component({
+  selector: 'ds-admin-notify-search-result',
+  templateUrl: './admin-notify-search-result.component.html',
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService,
+    },
+  ],
+})
+/**
+ * Component for visualization in table format of the search results related to the AdminNotifyDashboardComponent
+ */
+
+
+export class AdminNotifySearchResultComponent extends TabulatableResultListElementsComponent, AdminNotifySearchResult> implements OnInit, OnDestroy{
+  public messagesSubject$: BehaviorSubject = new BehaviorSubject([]);
+  public reprocessStatus = 'QUEUE_STATUS_QUEUED_FOR_RETRY';
+  //we check on one type of config to render specific table headers
+  public isInbound: boolean;
+
+  /**
+   * Statuses for which we display the reprocess button
+   */
+  public validStatusesForReprocess = [
+    'QUEUE_STATUS_UNTRUSTED',
+    'QUEUE_STATUS_UNTRUSTED_IP',
+    'QUEUE_STATUS_FAILED',
+    'QUEUE_STATUS_UNMAPPED_ACTION',
+  ];
+
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   * @type {Array}
+   */
+  private subs: Subscription[] = [];
+
+  /**
+   * Keys to be formatted as date
+   * @private
+   */
+
+  private dateTypeKeys: string[] = ['queueLastStartTime', 'queueTimeout'];
+
+  /**
+   * Keys to be not shown in detail
+   * @private
+   */
+  private messageKeys: string[] = [
+    'type',
+    'id',
+    'coarNotifyType',
+    'activityStreamType',
+    'inReplyTo',
+    'queueAttempts',
+    'queueLastStartTime',
+    'queueStatusLabel',
+    'queueTimeout',
+  ];
+
+  /**
+   * The format for the date values
+   * @private
+   */
+  private dateFormat = 'YYYY/MM/d hh:mm:ss';
+
+  constructor(private modalService: NgbModal,
+                private adminNotifyMessagesService: AdminNotifyMessagesService,
+                private datePipe: DatePipe,
+                @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService) {
+    super();
+  }
+
+  /**
+   * Map messages on init for readable representation
+   */
+  ngOnInit() {
+    this.mapDetailsToMessages();
+    this.subs.push(this.searchConfigService.getCurrentConfiguration('')
+      .subscribe(configuration => {
+        this.isInbound = configuration.startsWith('NOTIFY.incoming');
+      }),
+    );
+  }
+
+  ngOnDestroy() {
+    this.subs.forEach(sub => sub.unsubscribe());
+  }
+
+  /**
+   * Open modal for details visualization
+   * @param notifyMessage the message to be displayed
+   */
+  openDetailModal(notifyMessage: AdminNotifyMessage) {
+    const modalRef = this.modalService.open(AdminNotifyDetailModalComponent);
+    const messageToOpen = { ...notifyMessage };
+
+    this.messageKeys.forEach(key => {
+      if (this.dateTypeKeys.includes(key)) {
+        messageToOpen[key] = this.datePipe.transform(messageToOpen[key], this.dateFormat);
+      }
+    });
+    // format COAR message for technical visualization
+    messageToOpen.message = JSON.stringify(JSON.parse(notifyMessage.message), null, 2);
+
+    modalRef.componentInstance.notifyMessage = messageToOpen;
+    modalRef.componentInstance.notifyMessageKeys = this.messageKeys;
+  }
+
+  /**
+   * Reprocess message in status QUEUE_STATUS_QUEUED_FOR_RETRY and update results
+   * @param message the message to be reprocessed
+   */
+  reprocessMessage(message: AdminNotifyMessage) {
+    this.subs.push(
+      this.adminNotifyMessagesService.reprocessMessage(message, this.messagesSubject$)
+        .subscribe(response => {
+          this.messagesSubject$.next(response);
+        },
+        ),
+    );
+  }
+
+
+  /**
+   * Map readable results to messages
+   * @private
+   */
+  private mapDetailsToMessages() {
+    this.subs.push(this.adminNotifyMessagesService.getDetailedMessages(this.objects?.page.map(pageResult => pageResult.indexableObject))
+      .subscribe(response => {
+        this.messagesSubject$.next(response);
+      }));
+  }
+}
diff --git a/src/app/admin/admin-notify-dashboard/models/admin-notify-message-search-result.model.ts b/src/app/admin/admin-notify-dashboard/models/admin-notify-message-search-result.model.ts
new file mode 100644
index 0000000000..5115118993
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/models/admin-notify-message-search-result.model.ts
@@ -0,0 +1,7 @@
+import { SearchResult } from '../../../shared/search/models/search-result.model';
+import { searchResultFor } from '../../../shared/search/search-result-element-decorator';
+import { AdminNotifyMessage } from './admin-notify-message.model';
+
+@searchResultFor(AdminNotifyMessage)
+export class AdminNotifySearchResult extends SearchResult {
+}
diff --git a/src/app/admin/admin-notify-dashboard/models/admin-notify-message.model.ts b/src/app/admin/admin-notify-dashboard/models/admin-notify-message.model.ts
new file mode 100644
index 0000000000..f32451eaff
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/models/admin-notify-message.model.ts
@@ -0,0 +1,171 @@
+import {
+  autoserialize,
+  deserialize,
+  inheritSerialization,
+} from 'cerialize';
+import { Observable } from 'rxjs';
+
+import { typedObject } from '../../../core/cache/builders/build-decorators';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
+import { excludeFromEquals } from '../../../core/utilities/equals.decorators';
+import { ListableObject } from '../../../shared/object-collection/shared/listable-object.model';
+import { ADMIN_NOTIFY_MESSAGE } from './admin-notify-message.resource-type';
+
+/**
+ * A message that includes admin notify info
+ */
+@typedObject
+@inheritSerialization(DSpaceObject)
+export class AdminNotifyMessage extends DSpaceObject {
+  static type = ADMIN_NOTIFY_MESSAGE;
+
+  /**
+   * The type of the resource
+   */
+  @excludeFromEquals
+    type = ADMIN_NOTIFY_MESSAGE;
+
+  /**
+   * The id of the message
+   */
+  @autoserialize
+    id: string;
+
+  /**
+   * The id of the notification
+   */
+  @autoserialize
+    notificationId: string;
+
+  /**
+   * The type of the notification
+   */
+  @autoserialize
+    notificationType: string;
+
+  /**
+   * The type of the notification
+   */
+  @autoserialize
+    coarNotifyType: string;
+
+  /**
+   * The type of the activity
+   */
+  @autoserialize
+    activityStreamType: string;
+
+  /**
+   * The object the message reply to
+   */
+  @autoserialize
+    inReplyTo: string;
+
+  /**
+   * The object the message relates to
+   */
+  @autoserialize
+    object: string;
+
+  /**
+   * The name of the related item
+   */
+  @autoserialize
+    relatedItem: string;
+
+  /**
+   * The name of the related ldn service
+   */
+  @autoserialize
+    ldnService: string;
+
+  /**
+   * The context of the message
+   */
+  @autoserialize
+    context: string;
+
+  /**
+   * The related COAR message
+   */
+  @autoserialize
+    message: string;
+
+  /**
+   * The attempts of the queue
+   */
+  @autoserialize
+    queueAttempts: number;
+
+  /**
+   * Timestamp of the last queue attempt
+   */
+  @autoserialize
+    queueLastStartTime: string;
+
+  /**
+   * The type of the activity stream
+   */
+  @autoserialize
+    origin: number | string;
+
+  /**
+   * The type of the activity stream
+   */
+  @autoserialize
+    target: number | string;
+
+  /**
+   * The label for the status of the queue
+   */
+  @autoserialize
+    queueStatusLabel: string;
+
+  /**
+   * The timeout of the queue
+   */
+  @autoserialize
+    queueTimeout: string;
+
+  /**
+   * The status of the queue
+   */
+  @autoserialize
+    queueStatus: number;
+
+  /**
+   * Thumbnail link used when browsing items with showThumbs config enabled.
+   */
+  @autoserialize
+    thumbnail: string;
+
+  /**
+   * The observable pointing to the item itself
+   */
+  @autoserialize
+    item: Observable;
+
+  /**
+   * The observable pointing to the access status of the item
+   */
+  @autoserialize
+    accessStatus: Observable;
+
+
+
+  @deserialize
+    _links: {
+    self: {
+      href: string;
+    };
+  };
+
+  get self(): string {
+    return this._links.self.href;
+  }
+
+  getRenderTypes(): (string | GenericConstructor)[] {
+    return [this.constructor as GenericConstructor];
+  }
+}
diff --git a/src/app/admin/admin-notify-dashboard/models/admin-notify-message.resource-type.ts b/src/app/admin/admin-notify-dashboard/models/admin-notify-message.resource-type.ts
new file mode 100644
index 0000000000..994146adb3
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/models/admin-notify-message.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from '../../../core/shared/resource-type';
+
+/**
+ * The resource type for AdminNotifyMessage
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const ADMIN_NOTIFY_MESSAGE = new ResourceType('message');
diff --git a/src/app/admin/admin-notify-dashboard/services/admin-notify-messages.service.spec.ts b/src/app/admin/admin-notify-dashboard/services/admin-notify-messages.service.spec.ts
new file mode 100644
index 0000000000..6178b20133
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/services/admin-notify-messages.service.spec.ts
@@ -0,0 +1,117 @@
+import { deepClone } from 'fast-json-patch';
+import { cold } from 'jasmine-marbles';
+import {
+  BehaviorSubject,
+  of,
+} from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { RestResponse } from '../../../core/cache/response.models';
+import { ItemDataService } from '../../../core/data/item-data.service';
+import { RemoteData } from '../../../core/data/remote-data';
+import { RequestService } from '../../../core/data/request.service';
+import { RequestEntry } from '../../../core/data/request-entry.model';
+import { RequestEntryState } from '../../../core/data/request-entry-state.model';
+import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { LdnServicesService } from '../../admin-ldn-services/ldn-services-data/ldn-services-data.service';
+import { mockAdminNotifyMessages } from '../admin-notify-search-result/admin-notify-search-result.component.spec';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+import { AdminNotifyMessagesService } from './admin-notify-messages.service';
+
+describe('AdminNotifyMessagesService test', () => {
+  let service: AdminNotifyMessagesService;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+  let objectCache: ObjectCacheService;
+  let halService: HALEndpointService;
+  let notificationsService: NotificationsService;
+  let ldnServicesService: LdnServicesService;
+  let itemDataService: ItemDataService;
+  let responseCacheEntry: RequestEntry;
+  let mockMessages: AdminNotifyMessage[];
+
+  const endpointURL = `https://rest.api/rest/api/ldn/messages`;
+  const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+  const remoteDataMocks = {
+    Success: new RemoteData(null, null, null, RequestEntryState.Success, null, null, 200),
+  };
+  const testLdnServiceName = 'testLdnService';
+  const testRelatedItemName = 'testRelatedItem';
+
+  function initTestService() {
+    return new AdminNotifyMessagesService(
+      requestService,
+      rdbService,
+      objectCache,
+      halService,
+      notificationsService,
+      ldnServicesService,
+      itemDataService,
+    );
+  }
+
+  beforeEach(() => {
+    mockMessages = deepClone(mockAdminNotifyMessages);
+    objectCache = {} as ObjectCacheService;
+    notificationsService = {} as NotificationsService;
+    responseCacheEntry = new RequestEntry();
+    responseCacheEntry.request = { href: endpointURL } as any;
+    responseCacheEntry.response = new RestResponse(true, 200, 'Success');
+
+
+    requestService = jasmine.createSpyObj('requestService', {
+      generateRequestId: requestUUID,
+      send: true,
+      removeByHrefSubstring: {},
+      getByHref: of(responseCacheEntry),
+      getByUUID: of(responseCacheEntry),
+    });
+
+    halService = jasmine.createSpyObj('halService', {
+      getEndpoint: of(endpointURL),
+    });
+
+    rdbService = jasmine.createSpyObj('rdbService', {
+      buildSingle: createSuccessfulRemoteDataObject$({}, 500),
+      buildList: cold('a', { a: remoteDataMocks.Success }),
+      buildFromRequestUUID: createSuccessfulRemoteDataObject$(mockMessages),
+    });
+
+    ldnServicesService = jasmine.createSpyObj('ldnServicesService', {
+      findById: createSuccessfulRemoteDataObject$({ name: testLdnServiceName }),
+    });
+
+    itemDataService = jasmine.createSpyObj('itemDataService', {
+      findById: createSuccessfulRemoteDataObject$({ name: testRelatedItemName }),
+    });
+
+    service = initTestService();
+  });
+
+  describe('Admin Notify service', () => {
+    it('should be defined', () => {
+      expect(service).toBeDefined();
+    });
+
+    it('should get details for messages', (done) => {
+      service.getDetailedMessages(mockMessages).pipe(take(1)).subscribe((detailedMessages) => {
+        expect(detailedMessages[0].ldnService).toEqual(testLdnServiceName);
+        expect(detailedMessages[0].relatedItem).toEqual(testRelatedItemName);
+        done();
+      });
+    });
+
+    it('should reprocess message', (done) => {
+      const behaviorSubject = new BehaviorSubject(mockMessages);
+      service.reprocessMessage(mockMessages[0], behaviorSubject).pipe(take(1)).subscribe((reprocessedMessages) => {
+        expect(reprocessedMessages.length).toEqual(2);
+        expect(reprocessedMessages).toEqual(mockMessages);
+        done();
+      });
+    });
+  });
+});
diff --git a/src/app/admin/admin-notify-dashboard/services/admin-notify-messages.service.ts b/src/app/admin/admin-notify-dashboard/services/admin-notify-messages.service.ts
new file mode 100644
index 0000000000..04f26c29af
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/services/admin-notify-messages.service.ts
@@ -0,0 +1,115 @@
+import { Injectable } from '@angular/core';
+import {
+  BehaviorSubject,
+  from,
+  Observable,
+  of,
+  scan,
+} from 'rxjs';
+import {
+  map,
+  mergeMap,
+  switchMap,
+  tap,
+} from 'rxjs/operators';
+
+import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { dataService } from '../../../core/data/base/data-service.decorator';
+import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service';
+import { ItemDataService } from '../../../core/data/item-data.service';
+import { PostRequest } from '../../../core/data/request.models';
+import { RequestService } from '../../../core/data/request.service';
+import { RestRequest } from '../../../core/data/rest-request.model';
+import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
+import {
+  getAllSucceededRemoteDataPayload,
+  getFirstCompletedRemoteData,
+} from '../../../core/shared/operators';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { LdnServicesService } from '../../admin-ldn-services/ldn-services-data/ldn-services-data.service';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+import { ADMIN_NOTIFY_MESSAGE } from '../models/admin-notify-message.resource-type';
+
+/**
+ * Injectable service responsible for fetching/sending data from/to the REST API on the messages endpoint.
+ *
+ * @export
+ * @class AdminNotifyMessagesService
+ * @extends {IdentifiableDataService}
+ */
+@Injectable()
+@dataService(ADMIN_NOTIFY_MESSAGE)
+export class AdminNotifyMessagesService extends IdentifiableDataService {
+
+  protected reprocessEndpoint = 'enqueueretry';
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    private ldnServicesService: LdnServicesService,
+    private itemDataService: ItemDataService,
+  ) {
+    super('messages', requestService, rdbService, objectCache, halService);
+  }
+
+
+  /**
+   * Add detailed information to each message
+   * @param messages the messages to which add detailded info
+   */
+  public getDetailedMessages(messages: AdminNotifyMessage[]): Observable {
+    return from(messages).pipe(
+      mergeMap(message =>
+        message.target || message.origin ? this.ldnServicesService.findById((message.target || message.origin).toString()).pipe(
+          getAllSucceededRemoteDataPayload(),
+          map(detail => ({ ...message, ldnService: detail.name })),
+        ) : of(message),
+      ),
+      mergeMap(message =>
+        message.object || message.context  ? this.itemDataService.findById(message.object || message.context).pipe(
+          getAllSucceededRemoteDataPayload(),
+          map(detail => ({ ...message, relatedItem: detail.name })),
+        ) : of(message),
+      ),
+      scan((acc: any, value: any) => [...acc, value], []),
+    );
+  }
+
+  /**
+   * Reprocess message in status QUEUE_STATUS_QUEUED_FOR_RETRY and update results
+   * @param message the message to reprocess
+   * @param messageSubject the current visualised messages source
+   */
+  public reprocessMessage(message: AdminNotifyMessage, messageSubject: BehaviorSubject): Observable {
+    const requestId = this.requestService.generateRequestId();
+
+    return this.halService.getEndpoint(this.reprocessEndpoint).pipe(
+      map(endpoint => endpoint.replace('{id}', message.id)),
+      map((endpointURL: string) => new PostRequest(requestId, endpointURL)),
+      tap(request => this.requestService.send(request)),
+      switchMap((request: RestRequest) => this.rdbService.buildFromRequestUUID(request.uuid)),
+      getFirstCompletedRemoteData(),
+      getAllSucceededRemoteDataPayload(),
+      mergeMap(reprocessedMessage => this.getDetailedMessages([reprocessedMessage])),
+    ).pipe(
+      mergeMap((newMessages) =>  messageSubject.pipe(
+        map(messages => {
+          const detailedReprocessedMessage = newMessages[0];
+          const messageToUpdate = messages.find(currentMessage => currentMessage.id === message.id);
+          const indexOfMessageToUpdate = messages.indexOf(messageToUpdate);
+          detailedReprocessedMessage.target = message.target;
+          detailedReprocessedMessage.object = message.object;
+          detailedReprocessedMessage.origin = message.origin;
+          detailedReprocessedMessage.context = message.context;
+          messages[indexOfMessageToUpdate] = detailedReprocessedMessage;
+
+          return messages;
+        }),
+      )),
+    );
+  }
+}
diff --git a/src/app/admin/admin-registries/admin-registries-routing.module.ts b/src/app/admin/admin-registries/admin-registries-routing.module.ts
index 49a76708cc..3134d3285e 100644
--- a/src/app/admin/admin-registries/admin-registries-routing.module.ts
+++ b/src/app/admin/admin-registries/admin-registries-routing.module.ts
@@ -1,9 +1,10 @@
-import { MetadataRegistryComponent } from './metadata-registry/metadata-registry.component';
-import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { MetadataSchemaComponent } from './metadata-schema/metadata-schema.component';
+import { RouterModule } from '@angular/router';
+
 import { I18nBreadcrumbResolver } from '../../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { BITSTREAMFORMATS_MODULE_PATH } from './admin-registries-routing-paths';
+import { MetadataRegistryComponent } from './metadata-registry/metadata-registry.component';
+import { MetadataSchemaComponent } from './metadata-schema/metadata-schema.component';
 
 @NgModule({
   imports: [
@@ -11,29 +12,29 @@ import { BITSTREAMFORMATS_MODULE_PATH } from './admin-registries-routing-paths';
       {
         path: 'metadata',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
-        data: {title: 'admin.registries.metadata.title', breadcrumbKey: 'admin.registries.metadata'},
+        data: { title: 'admin.registries.metadata.title', breadcrumbKey: 'admin.registries.metadata' },
         children: [
           {
             path: '',
-            component: MetadataRegistryComponent
+            component: MetadataRegistryComponent,
           },
           {
             path: ':schemaName',
             resolve: { breadcrumb: I18nBreadcrumbResolver },
             component: MetadataSchemaComponent,
-            data: {title: 'admin.registries.schema.title', breadcrumbKey: 'admin.registries.schema'}
-          }
-        ]
+            data: { title: 'admin.registries.schema.title', breadcrumbKey: 'admin.registries.schema' },
+          },
+        ],
       },
       {
         path: BITSTREAMFORMATS_MODULE_PATH,
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         loadChildren: () => import('./bitstream-formats/bitstream-formats.module')
           .then((m) => m.BitstreamFormatsModule),
-        data: {title: 'admin.registries.bitstream-formats.title', breadcrumbKey: 'admin.registries.bitstream-formats'}
+        data: { title: 'admin.registries.bitstream-formats.title', breadcrumbKey: 'admin.registries.bitstream-formats' },
       },
-    ])
-  ]
+    ]),
+  ],
 })
 export class AdminRegistriesRoutingModule {
 
diff --git a/src/app/admin/admin-registries/admin-registries.module.ts b/src/app/admin/admin-registries/admin-registries.module.ts
index 65f7b61419..42432a90ed 100644
--- a/src/app/admin/admin-registries/admin-registries.module.ts
+++ b/src/app/admin/admin-registries/admin-registries.module.ts
@@ -1,14 +1,15 @@
-import { NgModule } from '@angular/core';
-import { MetadataRegistryComponent } from './metadata-registry/metadata-registry.component';
-import { AdminRegistriesRoutingModule } from './admin-registries-routing.module';
 import { CommonModule } from '@angular/common';
-import { MetadataSchemaComponent } from './metadata-schema/metadata-schema.component';
+import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+
+import { FormModule } from '../../shared/form/form.module';
 import { SharedModule } from '../../shared/shared.module';
+import { AdminRegistriesRoutingModule } from './admin-registries-routing.module';
+import { BitstreamFormatsModule } from './bitstream-formats/bitstream-formats.module';
+import { MetadataRegistryComponent } from './metadata-registry/metadata-registry.component';
 import { MetadataSchemaFormComponent } from './metadata-registry/metadata-schema-form/metadata-schema-form.component';
 import { MetadataFieldFormComponent } from './metadata-schema/metadata-field-form/metadata-field-form.component';
-import { BitstreamFormatsModule } from './bitstream-formats/bitstream-formats.module';
-import { FormModule } from '../../shared/form/form.module';
+import { MetadataSchemaComponent } from './metadata-schema/metadata-schema.component';
 
 @NgModule({
   imports: [
@@ -17,14 +18,14 @@ import { FormModule } from '../../shared/form/form.module';
     RouterModule,
     BitstreamFormatsModule,
     AdminRegistriesRoutingModule,
-    FormModule
+    FormModule,
   ],
   declarations: [
     MetadataRegistryComponent,
     MetadataSchemaComponent,
     MetadataSchemaFormComponent,
-    MetadataFieldFormComponent
-  ]
+    MetadataFieldFormComponent,
+  ],
 })
 export class AdminRegistriesModule {
 
diff --git a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
index 2b65b369b2..d1be68633f 100644
--- a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
@@ -1,11 +1,11 @@
 

     

         

-            
{{ 'admin.registries.bitstream-formats.create.new' | translate }}

+            
{{ 'admin.registries.bitstream-formats.create.new' | translate }}

 
             
 
         

     

-

\ No newline at end of file
+

diff --git a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.spec.ts b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.spec.ts
index 6787350d86..72d2795170 100644
--- a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.spec.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.spec.ts
@@ -1,19 +1,27 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
+
 import { BitstreamFormatDataService } from '../../../../core/data/bitstream-format-data.service';
-import { BitstreamFormatSupportLevel } from '../../../../core/shared/bitstream-format-support-level';
 import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
+import { BitstreamFormatSupportLevel } from '../../../../core/shared/bitstream-format-support-level';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import {
+  createFailedRemoteDataObject$,
+  createSuccessfulRemoteDataObject$,
+} from '../../../../shared/remote-data.utils';
 import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
 import { RouterStub } from '../../../../shared/testing/router.stub';
 import { AddBitstreamFormatComponent } from './add-bitstream-format.component';
-import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
 
 describe('AddBitstreamFormatComponent', () => {
   let comp: AddBitstreamFormatComponent;
@@ -38,7 +46,7 @@ describe('AddBitstreamFormatComponent', () => {
     notificationService = new NotificationsServiceStub();
     bitstreamFormatDataService = jasmine.createSpyObj('bitstreamFormatDataService', {
       createBitstreamFormat: createSuccessfulRemoteDataObject$({}),
-      clearBitStreamFormatRequests: observableOf(null)
+      clearBitStreamFormatRequests: observableOf(null),
     });
 
     TestBed.configureTestingModule({
@@ -49,7 +57,7 @@ describe('AddBitstreamFormatComponent', () => {
         { provide: NotificationsService, useValue: notificationService },
         { provide: BitstreamFormatDataService, useValue: bitstreamFormatDataService },
       ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   };
 
@@ -78,7 +86,7 @@ describe('AddBitstreamFormatComponent', () => {
       notificationService = new NotificationsServiceStub();
       bitstreamFormatDataService = jasmine.createSpyObj('bitstreamFormatDataService', {
         createBitstreamFormat: createFailedRemoteDataObject$('Error', 500),
-        clearBitStreamFormatRequests: observableOf(null)
+        clearBitStreamFormatRequests: observableOf(null),
       });
 
       TestBed.configureTestingModule({
@@ -89,7 +97,7 @@ describe('AddBitstreamFormatComponent', () => {
           { provide: NotificationsService, useValue: notificationService },
           { provide: BitstreamFormatDataService, useValue: bitstreamFormatDataService },
         ],
-        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
       }).compileComponents();
     }));
     beforeEach(initBeforeEach);
diff --git a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.ts b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.ts
index 132343dcf0..4dc43480c0 100644
--- a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.ts
@@ -1,12 +1,13 @@
-import { Router } from '@angular/router';
 import { Component } from '@angular/core';
-import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
-import { BitstreamFormatDataService } from '../../../../core/data/bitstream-format-data.service';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { getBitstreamFormatsModuleRoute } from '../../admin-registries-routing-paths';
+
+import { BitstreamFormatDataService } from '../../../../core/data/bitstream-format-data.service';
 import { RemoteData } from '../../../../core/data/remote-data';
+import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
 import { getFirstCompletedRemoteData } from '../../../../core/shared/operators';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { getBitstreamFormatsModuleRoute } from '../../admin-registries-routing-paths';
 
 /**
  * This component renders the page to create a new bitstream format.
@@ -35,16 +36,16 @@ export class AddBitstreamFormatComponent {
     this.bitstreamFormatDataService.createBitstreamFormat(bitstreamFormat).pipe(
       getFirstCompletedRemoteData(),
     ).subscribe((response: RemoteData) => {
-        if (response.hasSucceeded) {
-          this.notificationService.success(this.translateService.get('admin.registries.bitstream-formats.create.success.head'),
-            this.translateService.get('admin.registries.bitstream-formats.create.success.content'));
-          this.router.navigate([getBitstreamFormatsModuleRoute()]);
-          this.bitstreamFormatDataService.clearBitStreamFormatRequests().subscribe();
-        } else {
-          this.notificationService.error(this.translateService.get('admin.registries.bitstream-formats.create.failure.head'),
-            this.translateService.get('admin.registries.bitstream-formats.create.failure.content'));
-        }
+      if (response.hasSucceeded) {
+        this.notificationService.success(this.translateService.get('admin.registries.bitstream-formats.create.success.head'),
+          this.translateService.get('admin.registries.bitstream-formats.create.success.content'));
+        this.router.navigate([getBitstreamFormatsModuleRoute()]);
+        this.bitstreamFormatDataService.clearBitStreamFormatRequests().subscribe();
+      } else {
+        this.notificationService.error(this.translateService.get('admin.registries.bitstream-formats.create.failure.head'),
+          this.translateService.get('admin.registries.bitstream-formats.create.failure.content'));
       }
+    },
     );
   }
 }
diff --git a/src/app/admin/admin-registries/bitstream-formats/bitstream-format.actions.ts b/src/app/admin/admin-registries/bitstream-formats/bitstream-format.actions.ts
index c5bebb292b..874274af8b 100644
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-format.actions.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-format.actions.ts
@@ -1,7 +1,8 @@
 /* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
-import { type } from '../../../shared/ngrx/type';
+
 import { BitstreamFormat } from '../../../core/shared/bitstream-format.model';
+import { type } from '../../../shared/ngrx/type';
 
 /**
  * For each action type in an action group, make a simple
@@ -15,7 +16,7 @@ export const BitstreamFormatsRegistryActionTypes = {
 
   SELECT_FORMAT: type('dspace/bitstream-formats-registry/SELECT_FORMAT'),
   DESELECT_FORMAT: type('dspace/bitstream-formats-registry/DESELECT_FORMAT'),
-  DESELECT_ALL_FORMAT: type('dspace/bitstream-formats-registry/DESELECT_ALL_FORMAT')
+  DESELECT_ALL_FORMAT: type('dspace/bitstream-formats-registry/DESELECT_ALL_FORMAT'),
 };
 
 /**
diff --git a/src/app/admin/admin-registries/bitstream-formats/bitstream-format.reducers.spec.ts b/src/app/admin/admin-registries/bitstream-formats/bitstream-format.reducers.spec.ts
index 76576afc7a..09c867bc72 100644
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-format.reducers.spec.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-format.reducers.spec.ts
@@ -1,11 +1,15 @@
 import { Action } from '@ngrx/store';
+
 import { BitstreamFormat } from '../../../core/shared/bitstream-format.model';
-import { bitstreamFormatReducer, BitstreamFormatRegistryState } from './bitstream-format.reducers';
 import {
   BitstreamFormatsRegistryDeselectAction,
   BitstreamFormatsRegistryDeselectAllAction,
-  BitstreamFormatsRegistrySelectAction
+  BitstreamFormatsRegistrySelectAction,
 } from './bitstream-format.actions';
+import {
+  bitstreamFormatReducer,
+  BitstreamFormatRegistryState,
+} from './bitstream-format.reducers';
 
 const bitstreamFormat1: BitstreamFormat = new BitstreamFormat();
 bitstreamFormat1.id = 'test-uuid-1';
@@ -16,15 +20,15 @@ bitstreamFormat2.id = 'test-uuid-2';
 bitstreamFormat2.shortDescription = 'test-short-2';
 
 const initialState: BitstreamFormatRegistryState = {
-  selectedBitstreamFormats: []
+  selectedBitstreamFormats: [],
 };
 
 const bitstream1SelectedState: BitstreamFormatRegistryState = {
-  selectedBitstreamFormats: [bitstreamFormat1]
+  selectedBitstreamFormats: [bitstreamFormat1],
 };
 
 const bitstream1and2SelectedState: BitstreamFormatRegistryState = {
-  selectedBitstreamFormats: [bitstreamFormat1, bitstreamFormat2]
+  selectedBitstreamFormats: [bitstreamFormat1, bitstreamFormat2],
 };
 
 describe('BitstreamFormatReducer', () => {
diff --git a/src/app/admin/admin-registries/bitstream-formats/bitstream-format.reducers.ts b/src/app/admin/admin-registries/bitstream-formats/bitstream-format.reducers.ts
index 41880bf16c..40642a5fdb 100644
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-format.reducers.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-format.reducers.ts
@@ -3,7 +3,7 @@ import {
   BitstreamFormatsRegistryAction,
   BitstreamFormatsRegistryActionTypes,
   BitstreamFormatsRegistryDeselectAction,
-  BitstreamFormatsRegistrySelectAction
+  BitstreamFormatsRegistrySelectAction,
 } from './bitstream-format.actions';
 
 /**
@@ -32,21 +32,21 @@ export function bitstreamFormatReducer(state = initialState, action: BitstreamFo
 
     case BitstreamFormatsRegistryActionTypes.SELECT_FORMAT: {
       return Object.assign({}, state, {
-        selectedBitstreamFormats: [...state.selectedBitstreamFormats, (action as BitstreamFormatsRegistrySelectAction).bitstreamFormat]
+        selectedBitstreamFormats: [...state.selectedBitstreamFormats, (action as BitstreamFormatsRegistrySelectAction).bitstreamFormat],
       });
     }
 
     case BitstreamFormatsRegistryActionTypes.DESELECT_FORMAT: {
       return Object.assign({}, state, {
         selectedBitstreamFormats: state.selectedBitstreamFormats.filter(
-          (selectedBitstreamFormats) => selectedBitstreamFormats !== (action as BitstreamFormatsRegistryDeselectAction).bitstreamFormat
-        )
+          (selectedBitstreamFormats) => selectedBitstreamFormats !== (action as BitstreamFormatsRegistryDeselectAction).bitstreamFormat,
+        ),
       });
     }
 
     case BitstreamFormatsRegistryActionTypes.DESELECT_ALL_FORMAT: {
       return Object.assign({}, state, {
-        selectedBitstreamFormats: []
+        selectedBitstreamFormats: [],
       });
     }
     default:
diff --git a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats-routing.module.ts b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats-routing.module.ts
index 2f08f8257c..e4a2a36f26 100644
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats-routing.module.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats-routing.module.ts
@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+
+import { I18nBreadcrumbResolver } from '../../../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { AddBitstreamFormatComponent } from './add-bitstream-format/add-bitstream-format.component';
+import { BitstreamFormatsComponent } from './bitstream-formats.component';
 import { BitstreamFormatsResolver } from './bitstream-formats.resolver';
 import { EditBitstreamFormatComponent } from './edit-bitstream-format/edit-bitstream-format.component';
-import { BitstreamFormatsComponent } from './bitstream-formats.component';
-import { AddBitstreamFormatComponent } from './add-bitstream-format/add-bitstream-format.component';
-import { I18nBreadcrumbResolver } from '../../../core/breadcrumbs/i18n-breadcrumb.resolver';
 
 const BITSTREAMFORMAT_EDIT_PATH = ':id/edit';
 const BITSTREAMFORMAT_ADD_PATH = 'add';
@@ -14,28 +15,28 @@ const BITSTREAMFORMAT_ADD_PATH = 'add';
     RouterModule.forChild([
       {
         path: '',
-        component: BitstreamFormatsComponent
+        component: BitstreamFormatsComponent,
       },
       {
         path: BITSTREAMFORMAT_ADD_PATH,
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         component: AddBitstreamFormatComponent,
-        data: {breadcrumbKey: 'admin.registries.bitstream-formats.create'}
+        data: { breadcrumbKey: 'admin.registries.bitstream-formats.create' },
       },
       {
         path: BITSTREAMFORMAT_EDIT_PATH,
         component: EditBitstreamFormatComponent,
         resolve: {
           bitstreamFormat: BitstreamFormatsResolver,
-          breadcrumb: I18nBreadcrumbResolver
+          breadcrumb: I18nBreadcrumbResolver,
         },
-        data: {breadcrumbKey: 'admin.registries.bitstream-formats.edit'}
+        data: { breadcrumbKey: 'admin.registries.bitstream-formats.edit' },
       },
-    ])
+    ]),
   ],
   providers: [
     BitstreamFormatsResolver,
-  ]
+  ],
 })
 export class BitstreamFormatsRoutingModule {
 
diff --git a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
index 0a2e9f0f92..b61d7ea525 100644
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
@@ -2,7 +2,7 @@
   

     

 
-      
{{'admin.registries.bitstream-formats.head' | translate}}

+      
{{'admin.registries.bitstream-formats.head' | translate}}

 
       
{{'admin.registries.bitstream-formats.description' | translate}}

       
{{'admin.registries.bitstream-formats.create.new' | translate}}

@@ -19,7 +19,7 @@
           
-              
+              
@@ -31,9 +31,11 @@
               
@@ -45,7 +47,7 @@
           

             
             
{{'admin.registries.bitstream-formats.table.selected' | translate}}
               {{'admin.registries.bitstream-formats.table.id' | translate}}
               {{'admin.registries.bitstream-formats.table.name' | translate}}
               {{'admin.registries.bitstream-formats.table.mimetype' | translate}}
                 
               
               {{bitstreamFormat.id}}

         

       
-      
diff --git a/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.spec.ts b/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.spec.ts
index b09c50c70a..5df6f74c13 100644
--- a/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.spec.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.spec.ts
@@ -1,24 +1,32 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ActivatedRoute, Router } from '@angular/router';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
+
 import { BitstreamFormatDataService } from '../../../../core/data/bitstream-format-data.service';
 import { RemoteData } from '../../../../core/data/remote-data';
-import { BitstreamFormatSupportLevel } from '../../../../core/shared/bitstream-format-support-level';
 import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
+import { BitstreamFormatSupportLevel } from '../../../../core/shared/bitstream-format-support-level';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
-import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
-import { RouterStub } from '../../../../shared/testing/router.stub';
-import { EditBitstreamFormatComponent } from './edit-bitstream-format.component';
 import {
   createFailedRemoteDataObject$,
   createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$
+  createSuccessfulRemoteDataObject$,
 } from '../../../../shared/remote-data.utils';
+import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
+import { RouterStub } from '../../../../shared/testing/router.stub';
+import { EditBitstreamFormatComponent } from './edit-bitstream-format.component';
 
 describe('EditBitstreamFormatComponent', () => {
   let comp: EditBitstreamFormatComponent;
@@ -36,8 +44,8 @@ describe('EditBitstreamFormatComponent', () => {
 
   const routeStub = {
     data: observableOf({
-      bitstreamFormat: createSuccessfulRemoteDataObject(bitstreamFormat)
-    })
+      bitstreamFormat: createSuccessfulRemoteDataObject(bitstreamFormat),
+    }),
   };
 
   let router;
@@ -48,7 +56,7 @@ describe('EditBitstreamFormatComponent', () => {
     router = new RouterStub();
     notificationService = new NotificationsServiceStub();
     bitstreamFormatDataService = jasmine.createSpyObj('bitstreamFormatDataService', {
-      updateBitstreamFormat: createSuccessfulRemoteDataObject$({})
+      updateBitstreamFormat: createSuccessfulRemoteDataObject$({}),
     });
 
     TestBed.configureTestingModule({
@@ -60,7 +68,7 @@ describe('EditBitstreamFormatComponent', () => {
         { provide: NotificationsService, useValue: notificationService },
         { provide: BitstreamFormatDataService, useValue: bitstreamFormatDataService },
       ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   };
 
@@ -99,7 +107,7 @@ describe('EditBitstreamFormatComponent', () => {
       router = new RouterStub();
       notificationService = new NotificationsServiceStub();
       bitstreamFormatDataService = jasmine.createSpyObj('bitstreamFormatDataService', {
-        updateBitstreamFormat: createFailedRemoteDataObject$('Error', 500)
+        updateBitstreamFormat: createFailedRemoteDataObject$('Error', 500),
       });
 
       TestBed.configureTestingModule({
@@ -111,7 +119,7 @@ describe('EditBitstreamFormatComponent', () => {
           { provide: NotificationsService, useValue: notificationService },
           { provide: BitstreamFormatDataService, useValue: bitstreamFormatDataService },
         ],
-        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
       }).compileComponents();
     }));
     beforeEach(initBeforeEach);
diff --git a/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.ts b/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.ts
index 14b109fe26..e7d1d501af 100644
--- a/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.ts
@@ -1,14 +1,21 @@
-import { map } from 'rxjs/operators';
-import { ActivatedRoute, Router } from '@angular/router';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { Component, OnInit } from '@angular/core';
+import { map } from 'rxjs/operators';
+
+import { BitstreamFormatDataService } from '../../../../core/data/bitstream-format-data.service';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
-import { BitstreamFormatDataService } from '../../../../core/data/bitstream-format-data.service';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
-import { getBitstreamFormatsModuleRoute } from '../../admin-registries-routing-paths';
 import { getFirstCompletedRemoteData } from '../../../../core/shared/operators';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { getBitstreamFormatsModuleRoute } from '../../admin-registries-routing-paths';
 
 /**
  * This component renders the edit page of a bitstream format.
@@ -36,7 +43,7 @@ export class EditBitstreamFormatComponent implements OnInit {
 
   ngOnInit(): void {
     this.bitstreamFormatRD$ = this.route.data.pipe(
-      map((data) => data.bitstreamFormat as RemoteData)
+      map((data) => data.bitstreamFormat as RemoteData),
     );
   }
 
@@ -49,15 +56,15 @@ export class EditBitstreamFormatComponent implements OnInit {
     this.bitstreamFormatDataService.updateBitstreamFormat(bitstreamFormat).pipe(
       getFirstCompletedRemoteData(),
     ).subscribe((response: RemoteData) => {
-        if (response.hasSucceeded) {
-          this.notificationService.success(this.translateService.get('admin.registries.bitstream-formats.edit.success.head'),
-            this.translateService.get('admin.registries.bitstream-formats.edit.success.content'));
-          this.router.navigate([getBitstreamFormatsModuleRoute()]);
-        } else {
-          this.notificationService.error('admin.registries.bitstream-formats.edit.failure.head',
-            'admin.registries.bitstream-formats.create.edit.content');
-        }
+      if (response.hasSucceeded) {
+        this.notificationService.success(this.translateService.get('admin.registries.bitstream-formats.edit.success.head'),
+          this.translateService.get('admin.registries.bitstream-formats.edit.success.content'));
+        this.router.navigate([getBitstreamFormatsModuleRoute()]);
+      } else {
+        this.notificationService.error('admin.registries.bitstream-formats.edit.failure.head',
+          'admin.registries.bitstream-formats.create.edit.content');
       }
+    },
     );
   }
 }
diff --git a/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.spec.ts b/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.spec.ts
index ca3fbcbc99..ceeb313a9d 100644
--- a/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.spec.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.spec.ts
@@ -1,17 +1,29 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { RouterStub } from '../../../../shared/testing/router.stub';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
 import { Router } from '@angular/router';
-import { FormatFormComponent } from './format-form.component';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  DynamicCheckboxModel,
+  DynamicFormArrayModel,
+  DynamicInputModel,
+} from '@ng-dynamic-forms/core';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
 import { BitstreamFormatSupportLevel } from '../../../../core/shared/bitstream-format-support-level';
-import { DynamicCheckboxModel, DynamicFormArrayModel, DynamicInputModel } from '@ng-dynamic-forms/core';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { isEmpty } from '../../../../shared/empty.util';
+import { RouterStub } from '../../../../shared/testing/router.stub';
+import { FormatFormComponent } from './format-form.component';
 
 describe('FormatFormComponent', () => {
   let comp: FormatFormComponent;
@@ -45,7 +57,7 @@ describe('FormatFormComponent', () => {
       providers: [
         { provide: Router, useValue: router },
       ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   };
 
diff --git a/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts b/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts
index 142f6fb83d..42a1e4baff 100644
--- a/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts
@@ -1,6 +1,11 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
-import { BitstreamFormatSupportLevel } from '../../../../core/shared/bitstream-format-support-level';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { Router } from '@angular/router';
 import {
   DynamicCheckboxModel,
   DynamicFormArrayModel,
@@ -9,20 +14,25 @@ import {
   DynamicFormService,
   DynamicInputModel,
   DynamicSelectModel,
-  DynamicTextAreaModel
+  DynamicTextAreaModel,
 } from '@ng-dynamic-forms/core';
-import { Router } from '@angular/router';
-import { hasValue, isEmpty } from '../../../../shared/empty.util';
 import { TranslateService } from '@ngx-translate/core';
-import { getBitstreamFormatsModuleRoute } from '../../admin-registries-routing-paths';
+
 import { environment } from '../../../../../environments/environment';
+import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
+import { BitstreamFormatSupportLevel } from '../../../../core/shared/bitstream-format-support-level';
+import {
+  hasValue,
+  isEmpty,
+} from '../../../../shared/empty.util';
+import { getBitstreamFormatsModuleRoute } from '../../admin-registries-routing-paths';
 
 /**
  * The component responsible for rendering the form to create/edit a bitstream format
  */
 @Component({
   selector: 'ds-bitstream-format-form',
-  templateUrl: './format-form.component.html'
+  templateUrl: './format-form.component.html',
 })
 export class FormatFormComponent implements OnInit {
 
@@ -40,9 +50,9 @@ export class FormatFormComponent implements OnInit {
   /**
    * The different supported support level of the bitstream format
    */
-  supportLevelOptions = [{label: BitstreamFormatSupportLevel.Known, value: BitstreamFormatSupportLevel.Known},
-    {label: BitstreamFormatSupportLevel.Unknown, value: BitstreamFormatSupportLevel.Unknown},
-    {label: BitstreamFormatSupportLevel.Supported, value: BitstreamFormatSupportLevel.Supported}];
+  supportLevelOptions = [{ label: BitstreamFormatSupportLevel.Known, value: BitstreamFormatSupportLevel.Known },
+    { label: BitstreamFormatSupportLevel.Unknown, value: BitstreamFormatSupportLevel.Unknown },
+    { label: BitstreamFormatSupportLevel.Supported, value: BitstreamFormatSupportLevel.Supported }];
 
   /**
    * Styling element for repeatable field
@@ -58,8 +68,8 @@ export class FormatFormComponent implements OnInit {
    */
   arrayInputElementLayout: DynamicFormControlLayout = {
     grid: {
-      host: 'col'
-    }
+      host: 'col',
+    },
   };
 
   /**
@@ -73,10 +83,10 @@ export class FormatFormComponent implements OnInit {
       hint: 'admin.registries.bitstream-formats.edit.shortDescription.hint',
       required: true,
       validators: {
-        required: null
+        required: null,
       },
       errorMessages: {
-        required: 'Please enter a name for this bitstream format'
+        required: 'Please enter a name for this bitstream format',
       },
     }),
     new DynamicInputModel({
@@ -100,7 +110,7 @@ export class FormatFormComponent implements OnInit {
       options: this.supportLevelOptions,
       label: 'admin.registries.bitstream-formats.edit.supportLevel.label',
       hint: 'admin.registries.bitstream-formats.edit.supportLevel.hint',
-      value: this.supportLevelOptions[0].value
+      value: this.supportLevelOptions[0].value,
 
     }),
     new DynamicCheckboxModel({
@@ -117,8 +127,8 @@ export class FormatFormComponent implements OnInit {
         new DynamicInputModel({
           id: 'extension',
           placeholder: 'admin.registries.bitstream-formats.edit.extensions.placeholder',
-        }, this.arrayInputElementLayout)
-      ]
+        }, this.arrayInputElementLayout),
+      ],
     }, this.arrayElementLayout),
   ];
 
@@ -146,7 +156,7 @@ export class FormatFormComponent implements OnInit {
             for (let i = 0; i < extenstions.length; i++) {
               formArray.insertGroup(i).group[0] = new DynamicInputModel({
                 id: `extension-${i}`,
-                value: extenstions[i]
+                value: extenstions[i],
               }, this.arrayInputElementLayout);
             }
           }
@@ -165,7 +175,7 @@ export class FormatFormComponent implements OnInit {
   onSubmit() {
     const updatedBitstreamFormat = Object.assign(new BitstreamFormat(),
       {
-        id: this.bitstreamFormat.id
+        id: this.bitstreamFormat.id,
       });
 
     this.formModel.forEach(
diff --git a/src/app/admin/admin-registries/metadata-registry/metadata-registry.actions.ts b/src/app/admin/admin-registries/metadata-registry/metadata-registry.actions.ts
index 3fc872ca43..2e06d168ce 100644
--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.actions.ts
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.actions.ts
@@ -1,8 +1,9 @@
 /* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
-import { type } from '../../../shared/ngrx/type';
-import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
+
 import { MetadataField } from '../../../core/metadata/metadata-field.model';
+import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
+import { type } from '../../../shared/ngrx/type';
 
 /**
  * For each action type in an action group, make a simple
@@ -24,7 +25,7 @@ export const MetadataRegistryActionTypes = {
   CANCEL_EDIT_FIELD: type('dspace/metadata-registry/CANCEL_FIELD'),
   SELECT_FIELD: type('dspace/metadata-registry/SELECT_FIELD'),
   DESELECT_FIELD: type('dspace/metadata-registry/DESELECT_FIELD'),
-  DESELECT_ALL_FIELD: type('dspace/metadata-registry/DESELECT_ALL_FIELD')
+  DESELECT_ALL_FIELD: type('dspace/metadata-registry/DESELECT_ALL_FIELD'),
 };
 
 /**
diff --git a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
index 35bffad185..63242b4795 100644
--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
@@ -2,7 +2,7 @@
     

         

 
-            
+            
{{'admin.registries.metadata.head' | translate}}

 
             
{{'admin.registries.metadata.description' | translate}}

 
@@ -19,7 +19,7 @@
                     
-                            
+                            
@@ -34,6 +34,7 @@
                                            [checked]="isSelected(schema) | async"
                                            (change)="selectMetadataSchema(schema, $event)"
                                     >
+                                    {{((isSelected(schema) | async) ? 'admin.registries.metadata.schemas.deselect' : 'admin.registries.metadata.schemas.select') | translate}}
@@ -46,7 +47,7 @@
 
             
 
-            
-                
+                
@@ -33,12 +33,11 @@
               
-                
@@ -49,7 +48,7 @@
           
 
-        

                         
                         
{{'admin.registries.metadata.schemas.table.selected' | translate}}
                             {{'admin.registries.metadata.schemas.table.id' | translate}}
                             {{'admin.registries.metadata.schemas.table.namespace' | translate}}
                             {{'admin.registries.metadata.schemas.table.name' | translate}}
                                 
                             
                             {{schema.id}}

               
{{'admin.registries.schema.fields.table.selected' | translate}}
                 {{'admin.registries.schema.fields.table.id' | translate}}
                 {{'admin.registries.schema.fields.table.field' | translate}}
                 {{'admin.registries.schema.fields.table.scopenote' | translate}}

               

-                  
+                
+                  
                 
                 {{field.id}}
                 {{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}
         

+                                
+                                    
+                                        
+                                        
+                                        
+                                        
+                                        
+                                    
+                                    
+                                        
+                                        
+                                        
+                                    
+                                
+                                
+                                    
+                                        
+                                        
+                                        
+                                        
+                                        
+                                    
+                                
+                            
{{ "admin.reports.collections.community" | translate }}{{ "admin.reports.collections.collection" | translate }}{{ "admin.reports.collections.nb_items" | translate }}{{ "admin.reports.collections.match_all_selected_filters" | translate }}{{ ("admin.reports.commons.filters." + getGroup(filter.key) + "." + filter.key) | translate }}
{{ results.summary.nbTotalItems }}{{ results.summary.allFiltersValue }}{{ filter.value }}
{{ coll.communityLabel }}{{ coll.label }}{{ coll.nbTotalItems }}{{ coll.allFiltersValue }}{{ coll.values[filter.key] || 0 }}

+                        
+                    
+                
+            

+
+        

+    

+

diff --git a/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.scss b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.scss
new file mode 100644
index 0000000000..73ce5275e5
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.scss
@@ -0,0 +1,3 @@
+.num {
+    text-align: center;
+}
diff --git a/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.spec.ts b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.spec.ts
new file mode 100644
index 0000000000..1fa350645b
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.spec.ts
@@ -0,0 +1,94 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { FormBuilder } from '@angular/forms';
+import {
+  NgbAccordion,
+  NgbAccordionModule,
+} from '@ng-bootstrap/ng-bootstrap';
+import {
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+import { DspaceRestService } from 'src/app/core/dspace-rest/dspace-rest.service';
+import { RawRestResponse } from 'src/app/core/dspace-rest/raw-rest-response.model';
+import { TranslateLoaderMock } from 'src/app/shared/mocks/translate-loader.mock';
+
+import { FilteredCollectionsComponent } from './filtered-collections.component';
+
+describe('FiltersComponent', () => {
+  let component: FilteredCollectionsComponent;
+  let fixture: ComponentFixture;
+  let formBuilder: FormBuilder;
+
+  const expected = {
+    payload: {
+      collections: [],
+      summary: {
+        label: 'Test',
+      },
+    },
+    statusCode: 200,
+    statusText: 'OK',
+  } as RawRestResponse;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [FilteredCollectionsComponent],
+      imports: [
+        NgbAccordionModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock,
+          },
+        }),
+        HttpClientTestingModule,
+      ],
+      providers: [
+        FormBuilder,
+        DspaceRestService,
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+  }));
+
+  beforeEach(waitForAsync(() => {
+    formBuilder = TestBed.inject(FormBuilder);
+
+    fixture = TestBed.createComponent(FilteredCollectionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should be displaying the filters panel initially', () => {
+    let accordion: NgbAccordion = component.accordionComponent;
+    expect(accordion.isExpanded('filters')).toBeTrue();
+  });
+
+  describe('toggle', () => {
+    beforeEach(() => {
+      spyOn(component, 'getFilteredCollections').and.returnValue(observableOf(expected));
+      spyOn(component.results, 'deserialize');
+      spyOn(component.accordionComponent, 'expand').and.callThrough();
+      component.submit();
+      fixture.detectChanges();
+    });
+
+    it('should be displaying the collections panel after submitting', waitForAsync(() => {
+      fixture.whenStable().then(() => {
+        expect(component.accordionComponent.expand).toHaveBeenCalledWith('collections');
+        expect(component.accordionComponent.isExpanded('collections')).toBeTrue();
+      });
+    }));
+  });
+});
diff --git a/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.ts b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.ts
new file mode 100644
index 0000000000..84e334e971
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.ts
@@ -0,0 +1,77 @@
+import {
+  Component,
+  ViewChild,
+} from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+} from '@angular/forms';
+import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';
+import { Observable } from 'rxjs';
+import { RestRequestMethod } from 'src/app/core/data/rest-request-method';
+import { DspaceRestService } from 'src/app/core/dspace-rest/dspace-rest.service';
+import { RawRestResponse } from 'src/app/core/dspace-rest/raw-rest-response.model';
+import { environment } from 'src/environments/environment';
+
+import { FiltersComponent } from '../filters-section/filters-section.component';
+import { FilteredCollections } from './filtered-collections.model';
+
+/**
+ * Component representing the Filtered Collections content report
+ */
+@Component({
+  selector: 'ds-report-filtered-collections',
+  templateUrl: './filtered-collections.component.html',
+  styleUrls: ['./filtered-collections.component.scss'],
+})
+export class FilteredCollectionsComponent {
+
+  queryForm: FormGroup;
+  results: FilteredCollections = new FilteredCollections();
+  @ViewChild('acc') accordionComponent: NgbAccordion;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private restService: DspaceRestService) {}
+
+  ngOnInit() {
+    this.queryForm = this.formBuilder.group({
+      filters: FiltersComponent.formGroup(this.formBuilder),
+    });
+  }
+
+  filtersFormGroup(): FormGroup {
+    return this.queryForm.get('filters') as FormGroup;
+  }
+
+  getGroup(filterId: string): string {
+    return FiltersComponent.getGroup(filterId).id;
+  }
+
+  submit() {
+    this
+      .getFilteredCollections()
+      .subscribe(
+        response => {
+          this.results.deserialize(response.payload);
+          this.accordionComponent.expand('collections');
+        },
+      );
+  }
+
+  getFilteredCollections(): Observable {
+    let params = this.toQueryString();
+    if (params.length > 0) {
+      params = `?${params}`;
+    }
+    const scheme = environment.rest.ssl ? 'https' : 'http';
+    const urlRestApp = `${scheme}://${environment.rest.host}:${environment.rest.port}${environment.rest.nameSpace}`;
+    return this.restService.request(RestRequestMethod.GET, `${urlRestApp}/api/contentreport/filteredcollections${params}`);
+  }
+
+  private toQueryString(): string {
+    const params = FiltersComponent.toQueryString(this.queryForm.value.filters);
+    return params;
+  }
+
+}
diff --git a/src/app/admin/admin-reports/filtered-collections/filtered-collections.model.ts b/src/app/admin/admin-reports/filtered-collections/filtered-collections.model.ts
new file mode 100644
index 0000000000..248924c761
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-collections/filtered-collections.model.ts
@@ -0,0 +1,26 @@
+import { FilteredCollection } from './filtered-collection.model';
+
+export class FilteredCollections {
+
+  public collections: Array = [];
+  public summary: FilteredCollection = new FilteredCollection();
+
+  public clear() {
+    this.collections.splice(0, this.collections.length);
+    this.summary.clear();
+  }
+
+  public deserialize(object: any) {
+    this.clear();
+    const summary = object.summary;
+    this.summary.deserialize(summary);
+    const collections = object.collections;
+    for (let i = 0; i < collections.length; i++) {
+      const collection = collections[i];
+      const coll = new FilteredCollection();
+      coll.deserialize(collection);
+      this.collections.push(coll);
+    }
+  }
+
+}
diff --git a/src/app/admin/admin-reports/filtered-items/filtered-items-model.ts b/src/app/admin/admin-reports/filtered-items/filtered-items-model.ts
new file mode 100644
index 0000000000..b5bc55f6ff
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-items/filtered-items-model.ts
@@ -0,0 +1,23 @@
+import { Item } from 'src/app/core/shared/item.model';
+
+export class FilteredItems {
+
+  public items: Item[] = [];
+  public itemCount: number;
+
+  public clear() {
+    this.items.splice(0, this.items.length);
+  }
+
+  public deserialize(object: any, offset: number = 0) {
+    this.clear();
+    this.itemCount = object.itemCount;
+    const items = object.items;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      item.index = this.items.length + offset + 1;
+      this.items.push(item);
+    }
+  }
+
+}
diff --git a/src/app/admin/admin-reports/filtered-items/filtered-items.component.html b/src/app/admin/admin-reports/filtered-items/filtered-items.component.html
new file mode 100644
index 0000000000..4b6679bdbc
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-items/filtered-items.component.html
@@ -0,0 +1,175 @@
+

+    

+        

+
+            
{{'admin.reports.items.head' | translate}}

+
+            

+                
+                    
+                        
+                            {{'admin.reports.items.section.collectionSelector' | translate}}
+                        
+                        
+                            
+                            

+                                
+                                
+                            

+                        
+                    
+                    
+                        
+                            {{'admin.reports.items.section.metadataFieldQueries' | translate}}
+                        
+                        
+                            

+                                
+                                
+                            

+                            
 

+                            

+                                

+                                    

+                                        

+                                            

+                                                
+                                            

+                                            

+                                                
+                                            

+                                            

+                                                
+                                            

+                                            

+                                                
+                                                 
+                                                
+                                            

+                                        

+                                    

+                                

+                            

+                            

+                                
+                                
+                            

+                        
+                    
+                    
+                        
+                            {{'admin.reports.items.section.limitPaginateQueries' | translate}}
+                        
+                        
+                            

+                                
+                                

+                                    
+                                

+                            

+                            

+                                
+                                

+                                    
+                                

+                            

+                            

+                                
+                                
+                            

+                        
+                    
+                    
+                        
+                            {{'admin.reports.commons.filters' | translate}}
+                        
+                        
+                            

+                                
+                                
+                            

+                            
+                            

+                                
+                                
+                            

+                        
+                    
+                    
+                        
+                            {{'admin.reports.commons.additional-data' | translate}}
+                        
+                        
+                            

+                                
+                            

+                            

+                                
+                                
+                            

+                        
+                    
+                    
+                        
+                            {{'admin.reports.collections.item-results' | translate}}
+                        
+                        
+                            
+                                
+                                    
+                                        
+                                        
+                                        
+                                        
+                                        
+                                        
+                                    
+                                
+                                
+                                    
+                                        
+                                        
+                                        
+                                        
+                                        
+                                        
+                                    
+                                
+                            
{{ "admin.reports.items.number" | translate }}{{ "admin.reports.items.id" | translate }}{{ "admin.reports.items.collection" | translate }}{{ "admin.reports.items.handle" | translate }}{{ "admin.reports.items.title" | translate }}{{ field }}
{{ item.index }}{{ item.uuid }}{{ item.owningCollection.name }}{{ item.handle }}{{ item.name }}
+                                            
+                                                {{ mdvalue.value || "" }}
+                                            
+                                        

+                            

+                                {{'admin.reports.commons.page' | translate}} {{ currentPage + 1 }} {{'admin.reports.commons.of' | translate}} {{ pageCount() }}
+                            

+                            

+                                
+                                
+
+                            

+                            

+                        
+                    
+                
+            

+
+        

+    

+

diff --git a/src/app/admin/admin-reports/filtered-items/filtered-items.component.scss b/src/app/admin/admin-reports/filtered-items/filtered-items.component.scss
new file mode 100644
index 0000000000..73ce5275e5
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-items/filtered-items.component.scss
@@ -0,0 +1,3 @@
+.num {
+    text-align: center;
+}
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss b/src/app/admin/admin-reports/filtered-items/filtered-items.component.spec.ts
similarity index 100%
rename from src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss
rename to src/app/admin/admin-reports/filtered-items/filtered-items.component.spec.ts
diff --git a/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts b/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts
new file mode 100644
index 0000000000..c63880ae48
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts
@@ -0,0 +1,348 @@
+import {
+  Component,
+  ViewChild,
+} from '@angular/core';
+import {
+  FormArray,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+} from '@angular/forms';
+import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import {
+  map,
+  Observable,
+} from 'rxjs';
+import { CollectionDataService } from 'src/app/core/data/collection-data.service';
+import { CommunityDataService } from 'src/app/core/data/community-data.service';
+import { MetadataFieldDataService } from 'src/app/core/data/metadata-field-data.service';
+import { MetadataSchemaDataService } from 'src/app/core/data/metadata-schema-data.service';
+import { RestRequestMethod } from 'src/app/core/data/rest-request-method';
+import { DspaceRestService } from 'src/app/core/dspace-rest/dspace-rest.service';
+import { RawRestResponse } from 'src/app/core/dspace-rest/raw-rest-response.model';
+import { MetadataField } from 'src/app/core/metadata/metadata-field.model';
+import { MetadataSchema } from 'src/app/core/metadata/metadata-schema.model';
+import { Collection } from 'src/app/core/shared/collection.model';
+import { Community } from 'src/app/core/shared/community.model';
+import { Item } from 'src/app/core/shared/item.model';
+import { getFirstSucceededRemoteListPayload } from 'src/app/core/shared/operators';
+import { isEmpty } from 'src/app/shared/empty.util';
+import { environment } from 'src/environments/environment';
+
+import { FiltersComponent } from '../filters-section/filters-section.component';
+import { FilteredItems } from './filtered-items-model';
+import { OptionVO } from './option-vo.model';
+import { PresetQuery } from './preset-query.model';
+import { QueryPredicate } from './query-predicate.model';
+
+/**
+ * Component representing the Filtered Items content report.
+ */
+@Component({
+  selector: 'ds-report-filtered-items',
+  templateUrl: './filtered-items.component.html',
+  styleUrls: ['./filtered-items.component.scss'],
+})
+export class FilteredItemsComponent {
+
+  collections: OptionVO[];
+  presetQueries: PresetQuery[];
+  metadataFields: OptionVO[];
+  metadataFieldsWithAny: OptionVO[];
+  predicates: OptionVO[];
+  pageLimits: OptionVO[];
+
+  queryForm: FormGroup;
+  currentPage = 0;
+  results: FilteredItems = new FilteredItems();
+  results$: Observable;
+  @ViewChild('acc') accordionComponent: NgbAccordion;
+
+  constructor(
+    private communityService: CommunityDataService,
+    private collectionService: CollectionDataService,
+    private metadataSchemaService: MetadataSchemaDataService,
+    private metadataFieldService: MetadataFieldDataService,
+    private translateService: TranslateService,
+    private formBuilder: FormBuilder,
+    private restService: DspaceRestService) {}
+
+  ngOnInit() {
+    this.loadCollections();
+    this.loadPresetQueries();
+    this.loadMetadataFields();
+    this.loadPredicates();
+    this.loadPageLimits();
+
+    const formQueryPredicates: FormGroup[] = [
+      new QueryPredicate().toFormGroup(this.formBuilder),
+    ];
+
+    this.queryForm = this.formBuilder.group({
+      collections: this.formBuilder.control([''], []),
+      presetQuery: this.formBuilder.control('new', []),
+      queryPredicates: this.formBuilder.array(formQueryPredicates),
+      pageLimit: this.formBuilder.control('10', []),
+      filters: FiltersComponent.formGroup(this.formBuilder),
+      additionalFields: this.formBuilder.control([], []),
+    });
+  }
+
+  loadCollections(): void {
+    this.collections = [];
+    const wholeRepo$ = this.translateService.stream('admin.reports.items.wholeRepo');
+    this.collections.push(OptionVO.collectionLoc('', wholeRepo$));
+
+    this.communityService.findAll({ elementsPerPage: 10000, currentPage: 1 }).pipe(
+      getFirstSucceededRemoteListPayload(),
+    ).subscribe(
+      (communitiesRest: Community[]) => {
+        communitiesRest.forEach(community => {
+          const commVO = OptionVO.collection(community.uuid, community.name, true);
+          this.collections.push(commVO);
+
+          this.collectionService.findByParent(community.uuid, { elementsPerPage: 10000, currentPage: 1 }).pipe(
+            getFirstSucceededRemoteListPayload(),
+          ).subscribe(
+            (collectionsRest: Collection[]) => {
+              collectionsRest.filter(collection => collection.firstMetadataValue('dspace.entity.type') === 'Publication')
+                .forEach(collection => {
+                  const collVO = OptionVO.collection(collection.uuid, '–' + collection.name);
+                  this.collections.push(collVO);
+                });
+            },
+          );
+        });
+      },
+    );
+  }
+
+  loadPresetQueries(): void {
+    this.presetQueries = [
+      PresetQuery.of('new', 'admin.reports.items.preset.new', []),
+      PresetQuery.of('q1', 'admin.reports.items.preset.hasNoTitle', [
+        QueryPredicate.of('dc.title', QueryPredicate.DOES_NOT_EXIST),
+      ]),
+      PresetQuery.of('q2', 'admin.reports.items.preset.hasNoIdentifierUri', [
+        QueryPredicate.of('dc.identifier.uri', QueryPredicate.DOES_NOT_EXIST),
+      ]),
+      PresetQuery.of('q3', 'admin.reports.items.preset.hasCompoundSubject', [
+        QueryPredicate.of('dc.subject.*', QueryPredicate.LIKE, '%;%'),
+      ]),
+      PresetQuery.of('q4', 'admin.reports.items.preset.hasCompoundAuthor', [
+        QueryPredicate.of('dc.contributor.author', QueryPredicate.LIKE, '% and %'),
+      ]),
+      PresetQuery.of('q5', 'admin.reports.items.preset.hasCompoundCreator', [
+        QueryPredicate.of('dc.creator', QueryPredicate.LIKE, '% and %'),
+      ]),
+      PresetQuery.of('q6', 'admin.reports.items.preset.hasUrlInDescription', [
+        QueryPredicate.of('dc.description', QueryPredicate.MATCHES, '^.*(http://|https://|mailto:).*$'),
+      ]),
+      PresetQuery.of('q7', 'admin.reports.items.preset.hasFullTextInProvenance', [
+        QueryPredicate.of('dc.description.provenance', QueryPredicate.MATCHES, '^.*No\. of bitstreams(.|\r|\n|\r\n)*\.(PDF|pdf|DOC|doc|PPT|ppt|DOCX|docx|PPTX|pptx).*$'),
+      ]),
+      PresetQuery.of('q8', 'admin.reports.items.preset.hasNonFullTextInProvenance', [
+        QueryPredicate.of('dc.description.provenance', QueryPredicate.DOES_NOT_MATCH, '^.*No\. of bitstreams(.|\r|\n|\r\n)*\.(PDF|pdf|DOC|doc|PPT|ppt|DOCX|docx|PPTX|pptx).*$'),
+      ]),
+      PresetQuery.of('q9', 'admin.reports.items.preset.hasEmptyMetadata', [
+        QueryPredicate.of('*', QueryPredicate.MATCHES, '^\s*$'),
+      ]),
+      PresetQuery.of('q10', 'admin.reports.items.preset.hasUnbreakingDataInDescription', [
+        QueryPredicate.of('dc.description.*', QueryPredicate.MATCHES, '^.*[^\s]{50,}.*$'),
+      ]),
+      PresetQuery.of('q12', 'admin.reports.items.preset.hasXmlEntityInMetadata', [
+        QueryPredicate.of('*', QueryPredicate.MATCHES, '^.*&#.*$'),
+      ]),
+      PresetQuery.of('q13', 'admin.reports.items.preset.hasNonAsciiCharInMetadata', [
+        QueryPredicate.of('*', QueryPredicate.MATCHES, '^.*[^[:ascii:]].*$'),
+      ]),
+    ];
+  }
+
+  loadMetadataFields(): void {
+    this.metadataFields = [];
+    this.metadataFieldsWithAny = [];
+    const anyField$ = this.translateService.stream('admin.reports.items.anyField');
+    this.metadataFieldsWithAny.push(OptionVO.itemLoc('*', anyField$));
+    this.metadataSchemaService.findAll({ elementsPerPage: 10000, currentPage: 1 }).pipe(
+      getFirstSucceededRemoteListPayload(),
+    ).subscribe(
+      (schemasRest: MetadataSchema[]) => {
+        schemasRest.forEach(schema => {
+          this.metadataFieldService.findBySchema(schema, { elementsPerPage: 10000, currentPage: 1 }).pipe(
+            getFirstSucceededRemoteListPayload(),
+          ).subscribe(
+            (fieldsRest: MetadataField[]) => {
+              fieldsRest.forEach(field => {
+                let fieldName = schema.prefix + '.' + field.toString();
+                let fieldVO = OptionVO.item(fieldName, fieldName);
+                this.metadataFields.push(fieldVO);
+                this.metadataFieldsWithAny.push(fieldVO);
+                if (isEmpty(field.qualifier)) {
+                  fieldName = schema.prefix + '.' + field.element + '.*';
+                  fieldVO = OptionVO.item(fieldName, fieldName);
+                  this.metadataFieldsWithAny.push(fieldVO);
+                }
+              });
+            },
+          );
+        });
+      },
+    );
+  }
+
+  loadPredicates(): void {
+    this.predicates = [
+      OptionVO.item(QueryPredicate.EXISTS, 'admin.reports.items.predicate.exists'),
+      OptionVO.item(QueryPredicate.DOES_NOT_EXIST, 'admin.reports.items.predicate.doesNotExist'),
+      OptionVO.item(QueryPredicate.EQUALS, 'admin.reports.items.predicate.equals'),
+      OptionVO.item(QueryPredicate.DOES_NOT_EQUAL, 'admin.reports.items.predicate.doesNotEqual'),
+      OptionVO.item(QueryPredicate.LIKE, 'admin.reports.items.predicate.like'),
+      OptionVO.item(QueryPredicate.NOT_LIKE, 'admin.reports.items.predicate.notLike'),
+      OptionVO.item(QueryPredicate.CONTAINS, 'admin.reports.items.predicate.contains'),
+      OptionVO.item(QueryPredicate.DOES_NOT_CONTAIN, 'admin.reports.items.predicate.doesNotContain'),
+      OptionVO.item(QueryPredicate.MATCHES, 'admin.reports.items.predicate.matches'),
+      OptionVO.item(QueryPredicate.DOES_NOT_MATCH, 'admin.reports.items.predicate.doesNotMatch'),
+    ];
+  }
+
+  loadPageLimits(): void {
+    this.pageLimits = [
+      OptionVO.item('10', '10'),
+      OptionVO.item('25', '25'),
+      OptionVO.item('50', '50'),
+      OptionVO.item('100', '100'),
+    ];
+  }
+
+  queryPredicatesArray(): FormArray {
+    return (this.queryForm.get('queryPredicates') as FormArray);
+  }
+
+  addQueryPredicate(newItem: FormGroup = new QueryPredicate().toFormGroup(this.formBuilder)) {
+    this.queryPredicatesArray().push(newItem);
+  }
+
+  deleteQueryPredicateDisabled(): boolean {
+    return this.queryPredicatesArray().length < 2;
+  }
+
+  deleteQueryPredicate(index: number, nbToDelete: number = 1) {
+    if (index > -1) {
+      this.queryPredicatesArray().removeAt(index);
+    }
+  }
+
+  setPresetQuery() {
+    const queryField = this.queryForm.controls.presetQuery as FormControl;
+    const value = queryField.value;
+    const query = this.presetQueries.find(q => q.id === value);
+    if (query !== undefined) {
+      this.queryPredicatesArray().clear();
+      query.predicates
+        .map(qp => qp.toFormGroup(this.formBuilder))
+        .forEach(qp => this.addQueryPredicate(qp));
+      if (query.predicates.length === 0) {
+        this.addQueryPredicate(new QueryPredicate().toFormGroup(this.formBuilder));
+      }
+    }
+  }
+
+  filtersFormGroup(): FormGroup {
+    return this.queryForm.get('filters') as FormGroup;
+  }
+
+  private pageSize() {
+    const form = this.queryForm.value;
+    return form.pageLimit;
+  }
+
+  canNavigatePrevious(): boolean {
+    return this.currentPage > 0;
+  }
+
+  prevPage() {
+    if (this.canNavigatePrevious()) {
+      this.currentPage--;
+      this.resubmit();
+    }
+  }
+
+  pageCount(): number {
+    const total = this.results.itemCount || 0;
+    return Math.ceil(total / this.pageSize());
+  }
+
+  canNavigateNext(): boolean {
+    return this.currentPage + 1 < this.pageCount();
+  }
+
+  nextPage() {
+    if (this.canNavigateNext()) {
+      this.currentPage++;
+      this.resubmit();
+    }
+  }
+
+  submit() {
+    this.accordionComponent.expand('itemResults');
+    this.currentPage = 0;
+    this.resubmit();
+  }
+
+  resubmit() {
+    this.results$ = this
+      .getFilteredItems()
+      .pipe(
+        map(response => {
+          const offset = this.currentPage * this.pageSize();
+          this.results.deserialize(response.payload, offset);
+          return this.results.items;
+        }),
+      );
+  }
+
+  getFilteredItems(): Observable {
+    let params = this.toQueryString();
+    if (params.length > 0) {
+      params = `?${params}`;
+    }
+    const scheme = environment.rest.ssl ? 'https' : 'http';
+    const urlRestApp = `${scheme}://${environment.rest.host}:${environment.rest.port}${environment.rest.nameSpace}`;
+    return this.restService.request(RestRequestMethod.GET, `${urlRestApp}/api/contentreport/filtereditems${params}`);
+  }
+
+  private toQueryString(): string {
+    let params = `pageNumber=${this.currentPage}&pageLimit=${this.pageSize()}`;
+
+    const colls = this.queryForm.value.collections;
+    for (let i = 0; i < colls.length; i++) {
+      params += `&collections=${colls[i]}`;
+    }
+
+    const preds = this.queryForm.value.queryPredicates;
+    for (let i = 0; i < preds.length; i++) {
+      const field = preds[i].field;
+      const op = preds[i].operator;
+      const value = preds[i].value;
+      params += `&queryPredicates=${field}:${op}`;
+      if (value) {
+        params += `:${value}`;
+      }
+    }
+
+    const filters = FiltersComponent.toQueryString(this.queryForm.value.filters);
+    if (filters.length > 0) {
+      params += `&${filters}`;
+    }
+
+    const addFlds = this.queryForm.value.additionalFields;
+    for (let i = 0; i < addFlds.length; i++) {
+      params += `&additionalFields=${addFlds[i]}`;
+    }
+
+    return params;
+  }
+
+}
diff --git a/src/app/admin/admin-reports/filtered-items/option-vo.model.ts b/src/app/admin/admin-reports/filtered-items/option-vo.model.ts
new file mode 100644
index 0000000000..56334b041f
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-items/option-vo.model.ts
@@ -0,0 +1,50 @@
+import { Observable } from 'rxjs';
+
+/**
+ * Component representing an option in each selectable list of values
+ * used in the Filtered Items report query interface
+ */
+export class OptionVO {
+
+  id: string;
+  name$: Observable;
+  disabled = false;
+
+  static collection(id: string, name: string, disabled: boolean = false): OptionVO {
+    const opt = new OptionVO();
+    opt.id = id;
+    opt.name$ = OptionVO.toObservable(name);
+    opt.disabled = disabled;
+    return opt;
+  }
+
+  static collectionLoc(id: string, name$: Observable, disabled: boolean = false): OptionVO {
+    const opt = new OptionVO();
+    opt.id = id;
+    opt.name$ = name$;
+    opt.disabled = disabled;
+    return opt;
+  }
+
+  static item(id: string, name: string): OptionVO {
+    const opt = new OptionVO();
+    opt.id = id;
+    opt.name$ = OptionVO.toObservable(name);
+    return opt;
+  }
+
+  static itemLoc(id: string, name$: Observable): OptionVO {
+    const opt = new OptionVO();
+    opt.id = id;
+    opt.name$ = name$;
+    return opt;
+  }
+
+  private static toObservable(value: T): Observable {
+    return new Observable(subscriber => {
+      subscriber.next(value);
+      subscriber.complete();
+    });
+
+  }
+}
diff --git a/src/app/admin/admin-reports/filtered-items/preset-query.model.ts b/src/app/admin/admin-reports/filtered-items/preset-query.model.ts
new file mode 100644
index 0000000000..213819b70e
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-items/preset-query.model.ts
@@ -0,0 +1,17 @@
+import { QueryPredicate } from './query-predicate.model';
+
+export class PresetQuery {
+
+  id: string;
+  label: string;
+  predicates: QueryPredicate[];
+
+  static of(id: string, label: string, predicates: QueryPredicate[]) {
+    const query = new PresetQuery();
+    query.id = id;
+    query.label = label;
+    query.predicates = predicates;
+    return query;
+  }
+
+}
diff --git a/src/app/admin/admin-reports/filtered-items/query-predicate.model.ts b/src/app/admin/admin-reports/filtered-items/query-predicate.model.ts
new file mode 100644
index 0000000000..1c12d72e27
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-items/query-predicate.model.ts
@@ -0,0 +1,40 @@
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+} from '@angular/forms';
+
+export class QueryPredicate {
+
+  static EXISTS = 'exists';
+  static DOES_NOT_EXIST = 'doesnt_exist';
+  static EQUALS = 'equals';
+  static DOES_NOT_EQUAL = 'not_equals';
+  static LIKE = 'like';
+  static NOT_LIKE = 'not_like';
+  static CONTAINS = 'contains';
+  static DOES_NOT_CONTAIN = 'doesnt_contain';
+  static MATCHES = 'matches';
+  static DOES_NOT_MATCH = 'doesnt_match';
+
+  field = '*';
+  operator: string;
+  value: string;
+
+  static of(field: string, operator: string, value: string = '') {
+    const pred = new QueryPredicate();
+    pred.field = field;
+    pred.operator = operator;
+    pred.value = value;
+    return pred;
+  }
+
+  toFormGroup(formBuilder: FormBuilder): FormGroup {
+    return formBuilder.group({
+      field: new FormControl(this.field),
+      operator: new FormControl(this.operator),
+      value: new FormControl(this.value),
+    });
+  }
+
+}
diff --git a/src/app/admin/admin-reports/filters-section/filter-group.model.ts b/src/app/admin/admin-reports/filters-section/filter-group.model.ts
new file mode 100644
index 0000000000..975b43a986
--- /dev/null
+++ b/src/app/admin/admin-reports/filters-section/filter-group.model.ts
@@ -0,0 +1,19 @@
+import { Filter } from './filter.model';
+
+export class FilterGroup {
+
+  id: string;
+  key: string;
+
+  constructor(id: string, public filters: Filter[]) {
+    this.id = id;
+    this.key = 'admin.reports.commons.filters.' + id;
+    filters.forEach(filter => {
+      filter.key = this.key + '.' + filter.id;
+      if (filter.hasTooltip) {
+        filter.tooltipKey = filter.key + '.tooltip';
+      }
+    });
+  }
+
+}
diff --git a/src/app/admin/admin-reports/filters-section/filter.model.ts b/src/app/admin/admin-reports/filters-section/filter.model.ts
new file mode 100644
index 0000000000..63eeb114cd
--- /dev/null
+++ b/src/app/admin/admin-reports/filters-section/filter.model.ts
@@ -0,0 +1,8 @@
+export class Filter {
+
+  key: string;
+  tooltipKey: string;
+
+  constructor(public id: string, public hasTooltip: boolean = false) {}
+
+}
diff --git a/src/app/admin/admin-reports/filters-section/filters-section.component.html b/src/app/admin/admin-reports/filters-section/filters-section.component.html
new file mode 100644
index 0000000000..1e7856f09c
--- /dev/null
+++ b/src/app/admin/admin-reports/filters-section/filters-section.component.html
@@ -0,0 +1,19 @@
+

+    
+         
+         
+        
+         
+        
+         
+         
+    
+

+

+    {{group.key | translate}}
+    
+        

+            
+        

+    
+

diff --git a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss b/src/app/admin/admin-reports/filters-section/filters-section.component.scss
similarity index 100%
rename from src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss
rename to src/app/admin/admin-reports/filters-section/filters-section.component.scss
diff --git a/src/app/admin/admin-reports/filters-section/filters-section.component.spec.ts b/src/app/admin/admin-reports/filters-section/filters-section.component.spec.ts
new file mode 100644
index 0000000000..6b8b069f93
--- /dev/null
+++ b/src/app/admin/admin-reports/filters-section/filters-section.component.spec.ts
@@ -0,0 +1,109 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { FormBuilder } from '@angular/forms';
+import {
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
+import { TranslateLoaderMock } from 'src/app/shared/mocks/translate-loader.mock';
+
+import { FiltersComponent } from './filters-section.component';
+
+describe('FiltersComponent', () => {
+  let component: FiltersComponent;
+  let fixture: ComponentFixture;
+  let formBuilder: FormBuilder;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [FiltersComponent],
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock,
+          },
+        }),
+      ],
+      providers: [
+        FormBuilder,
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+  }));
+
+  beforeEach(waitForAsync(() => {
+    formBuilder = TestBed.inject(FormBuilder);
+
+    fixture = TestBed.createComponent(FiltersComponent);
+    component = fixture.componentInstance;
+    component.filtersForm = FiltersComponent.formGroup(formBuilder);
+    fixture.detectChanges();
+  }));
+
+  const isOneSelected = (values: any): boolean => {
+    let oneSelected = false;
+    let allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; !oneSelected && i < allFilters.length; i++) {
+      let group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        let filter = group.filters[j];
+        oneSelected = oneSelected || values[filter.id];
+      }
+    }
+    return oneSelected;
+  };
+
+  const isAllSelected = (values: any): boolean => {
+    let allSelected = true;
+    let allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; allSelected && i < allFilters.length; i++) {
+      let group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        let filter = group.filters[j];
+        allSelected = allSelected && values[filter.id];
+      }
+    }
+    return allSelected;
+  };
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should select all checkboxes', () => {
+    // By default, nothing is selected, so at least one item is not selected.
+    let values = component.filtersForm.value;
+    let allSelected: boolean = isAllSelected(values);
+    expect(allSelected).toBeFalse();
+
+    // Now we select everything...
+    component.selectAll();
+
+    // We must retrieve the form values again since selectAll() injects a new dictionary.
+    values = component.filtersForm.value;
+    allSelected = isAllSelected(values);
+    expect(allSelected).toBeTrue();
+  });
+
+  it('should deselect all checkboxes', () => {
+    // Since nothing is selected by default, we select at least an item
+    // so that deselectAll() actually deselects something.
+    let values = component.filtersForm.value;
+    values.is_item = true;
+    let oneSelected: boolean = isOneSelected(values);
+    expect(oneSelected).toBeTrue();
+
+    // Now we deselect everything...
+    component.deselectAll();
+
+    // We must retrieve the form values again since deselectAll() injects a new dictionary.
+    values = component.filtersForm.value;
+    oneSelected = isOneSelected(values);
+    expect(oneSelected).toBeFalse();
+  });
+});
diff --git a/src/app/admin/admin-reports/filters-section/filters-section.component.ts b/src/app/admin/admin-reports/filters-section/filters-section.component.ts
new file mode 100644
index 0000000000..a739d849f8
--- /dev/null
+++ b/src/app/admin/admin-reports/filters-section/filters-section.component.ts
@@ -0,0 +1,157 @@
+import {
+  Component,
+  Input,
+} from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+} from '@angular/forms';
+
+import { Filter } from './filter.model';
+import { FilterGroup } from './filter-group.model';
+
+/**
+ * Component representing the Query Filters section used in both
+ * Filtered Collections and Filtered Items content reports
+ */
+@Component({
+  selector: 'ds-filters',
+  templateUrl: './filters-section.component.html',
+  styleUrls: ['./filters-section.component.scss'],
+})
+export class FiltersComponent {
+
+  static FILTERS = [
+    new FilterGroup('property', [
+      new Filter('is_item'),
+      new Filter('is_withdrawn'),
+      new Filter('is_not_withdrawn'),
+      new Filter('is_discoverable'),
+      new Filter('is_not_discoverable'),
+    ]),
+    new FilterGroup('bitstream', [
+      new Filter('has_multiple_originals'),
+      new Filter('has_no_originals'),
+      new Filter('has_one_original'),
+    ]),
+    new FilterGroup('bitstream_mime', [
+      new Filter('has_doc_original'),
+      new Filter('has_image_original'),
+      new Filter('has_unsupp_type'),
+      new Filter('has_mixed_original'),
+      new Filter('has_pdf_original'),
+      new Filter('has_jpg_original'),
+      new Filter('has_small_pdf'),
+      new Filter('has_large_pdf'),
+      new Filter('has_doc_without_text'),
+    ]),
+    new FilterGroup('mime', [
+      new Filter('has_only_supp_image_type'),
+      new Filter('has_unsupp_image_type'),
+      new Filter('has_only_supp_doc_type'),
+      new Filter('has_unsupp_doc_type'),
+    ]),
+    new FilterGroup('bundle', [
+      new Filter('has_unsupported_bundle'),
+      new Filter('has_small_thumbnail'),
+      new Filter('has_original_without_thumbnail'),
+      new Filter('has_invalid_thumbnail_name'),
+      new Filter('has_non_generated_thumb'),
+      new Filter('no_license'),
+      new Filter('has_license_documentation'),
+    ]),
+    new FilterGroup('permission', [
+      new Filter('has_restricted_original', true),
+      new Filter('has_restricted_thumbnail', true),
+      new Filter('has_restricted_metadata', true),
+    ]),
+  ];
+
+  @Input() filtersForm: FormGroup;
+
+  static formGroup(formBuilder: FormBuilder): FormGroup {
+    const fields = {};
+    const allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; i < allFilters.length; i++) {
+      const group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        const filter = group.filters[j];
+        fields[filter.id] = new FormControl(false);
+      }
+    }
+    return formBuilder.group(fields);
+  }
+
+  static getFilter(filterId: string): Filter {
+    const allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; i < allFilters.length; i++) {
+      const group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        const filter = group.filters[j];
+        if (filter.id === filterId) {
+          return filter;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  static getGroup(filterId: string): FilterGroup {
+    const allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; i < allFilters.length; i++) {
+      const group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        const filter = group.filters[j];
+        if (filter.id === filterId) {
+          return group;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  static toQueryString(filters: { [key: string]: any }): string {
+    let params = '';
+    let first = true;
+    for (const key in filters) {
+      if (filters[key]) {
+        if (first) {
+          first = false;
+        } else {
+          params += '&';
+        }
+        params += `filters=${key}`;
+      }
+    }
+    return params;
+  }
+
+  allFilters(): FilterGroup[] {
+    return FiltersComponent.FILTERS;
+  }
+
+  private setAllFilters(value: boolean) {
+    // I don't know why, but patchValue() with individual controls doesn't work.
+    // I therefore use setValue() with the whole set, which mercifully works...
+    const fields = {};
+    const allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; i < allFilters.length; i++) {
+      const group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        const filter = group.filters[j];
+        fields[filter.id] = value;
+      }
+    }
+    this.filtersForm.setValue(fields);
+  }
+
+  selectAll(): void {
+    this.setAllFilters(true);
+  }
+
+  deselectAll(): void {
+    this.setAllFilters(false);
+  }
+
+}
diff --git a/src/app/admin/admin-routing-paths.ts b/src/app/admin/admin-routing-paths.ts
index 3168ea93c9..bfcd16d18d 100644
--- a/src/app/admin/admin-routing-paths.ts
+++ b/src/app/admin/admin-routing-paths.ts
@@ -1,8 +1,30 @@
-import { URLCombiner } from '../core/url-combiner/url-combiner';
 import { getAdminModuleRoute } from '../app-routing-paths';
+import { URLCombiner } from '../core/url-combiner/url-combiner';
+import { getQualityAssuranceEditRoute } from './admin-notifications/admin-notifications-routing-paths';
 
 export const REGISTRIES_MODULE_PATH = 'registries';
+export const NOTIFICATIONS_MODULE_PATH = 'notifications';
+export const LDN_PATH = 'ldn';
+export const REPORTS_MODULE_PATH = 'reports';
+export const NOTIFY_DASHBOARD_MODULE_PATH = 'notify-dashboard';
+
 
 export function getRegistriesModuleRoute() {
   return new URLCombiner(getAdminModuleRoute(), REGISTRIES_MODULE_PATH).toString();
 }
+
+export function getLdnServicesModuleRoute() {
+  return new URLCombiner(getAdminModuleRoute(), LDN_PATH).toString();
+}
+
+export function getNotificationsModuleRoute() {
+  return new URLCombiner(getAdminModuleRoute(), NOTIFICATIONS_MODULE_PATH).toString();
+}
+
+export function getNotificatioQualityAssuranceRoute() {
+  return new URLCombiner(`/${NOTIFICATIONS_MODULE_PATH}`, getQualityAssuranceEditRoute()).toString();
+}
+
+export function getReportsModuleRoute() {
+  return new URLCombiner(getAdminModuleRoute(), REPORTS_MODULE_PATH).toString();
+}
diff --git a/src/app/admin/admin-routing.module.ts b/src/app/admin/admin-routing.module.ts
index 8e4f13b164..d9255e6482 100644
--- a/src/app/admin/admin-routing.module.ts
+++ b/src/app/admin/admin-routing.module.ts
@@ -1,64 +1,105 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MetadataImportPageComponent } from './admin-import-metadata-page/metadata-import-page.component';
-import { AdminSearchPageComponent } from './admin-search-page/admin-search-page.component';
+
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
-import { AdminWorkflowPageComponent } from './admin-workflow-page/admin-workflow-page.component';
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
+import { SiteAdministratorGuard } from '../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 import { AdminCurationTasksComponent } from './admin-curation-tasks/admin-curation-tasks.component';
-import { REGISTRIES_MODULE_PATH } from './admin-routing-paths';
 import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
+import { MetadataImportPageComponent } from './admin-import-metadata-page/metadata-import-page.component';
+import {
+  LDN_PATH,
+  NOTIFICATIONS_MODULE_PATH,
+  NOTIFY_DASHBOARD_MODULE_PATH,
+  REGISTRIES_MODULE_PATH,
+  REPORTS_MODULE_PATH,
+} from './admin-routing-paths';
+import { AdminSearchPageComponent } from './admin-search-page/admin-search-page.component';
+import { AdminWorkflowPageComponent } from './admin-workflow-page/admin-workflow-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
+      {
+        path: NOTIFICATIONS_MODULE_PATH,
+        loadChildren: () => import('./admin-notifications/admin-notifications.module')
+          .then((m) => m.AdminNotificationsModule),
+      },
       {
         path: REGISTRIES_MODULE_PATH,
         loadChildren: () => import('./admin-registries/admin-registries.module')
           .then((m) => m.AdminRegistriesModule),
+        canActivate: [SiteAdministratorGuard],
       },
       {
         path: 'search',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         component: AdminSearchPageComponent,
-        data: { title: 'admin.search.title', breadcrumbKey: 'admin.search' }
+        data: { title: 'admin.search.title', breadcrumbKey: 'admin.search' },
+        canActivate: [SiteAdministratorGuard],
       },
       {
         path: 'workflow',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         component: AdminWorkflowPageComponent,
-        data: { title: 'admin.workflow.title', breadcrumbKey: 'admin.workflow' }
+        data: { title: 'admin.workflow.title', breadcrumbKey: 'admin.workflow' },
+        canActivate: [SiteAdministratorGuard],
       },
       {
         path: 'curation-tasks',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         component: AdminCurationTasksComponent,
-        data: { title: 'admin.curation-tasks.title', breadcrumbKey: 'admin.curation-tasks' }
+        data: { title: 'admin.curation-tasks.title', breadcrumbKey: 'admin.curation-tasks' },
+        canActivate: [SiteAdministratorGuard],
       },
       {
         path: 'metadata-import',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         component: MetadataImportPageComponent,
-        data: { title: 'admin.metadata-import.title', breadcrumbKey: 'admin.metadata-import' }
+        data: { title: 'admin.metadata-import.title', breadcrumbKey: 'admin.metadata-import' },
+        canActivate: [SiteAdministratorGuard],
       },
       {
         path: 'batch-import',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         component: BatchImportPageComponent,
-        data: { title: 'admin.batch-import.title', breadcrumbKey: 'admin.batch-import' }
+        data: { title: 'admin.batch-import.title', breadcrumbKey: 'admin.batch-import' },
+        canActivate: [SiteAdministratorGuard],
       },
       {
         path: 'system-wide-alert',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         loadChildren: () => import('../system-wide-alert/system-wide-alert.module').then((m) => m.SystemWideAlertModule),
-        data: {title: 'admin.system-wide-alert.title', breadcrumbKey: 'admin.system-wide-alert'}
+        data: { title: 'admin.system-wide-alert.title', breadcrumbKey: 'admin.system-wide-alert' },
+        canActivate: [SiteAdministratorGuard],
       },
-    ])
+      {
+        path: LDN_PATH,
+        children: [
+          { path: '', pathMatch: 'full', redirectTo: 'services' },
+          {
+            path: 'services',
+            loadChildren: () => import('./admin-ldn-services/admin-ldn-services.module')
+              .then((m) => m.AdminLdnServicesModule),
+          },
+        ],
+      },
+      {
+        path: REPORTS_MODULE_PATH,
+        loadChildren: () => import('./admin-reports/admin-reports.module')
+          .then((m) => m.AdminReportsModule),
+      },
+      {
+        path: NOTIFY_DASHBOARD_MODULE_PATH,
+        loadChildren: () => import('./admin-notify-dashboard/admin-notify-dashboard.module')
+          .then((m) => m.AdminNotifyDashboardModule),
+      },
+    ]),
   ],
   providers: [
     I18nBreadcrumbResolver,
-    I18nBreadcrumbsService
-  ]
+    I18nBreadcrumbsService,
+  ],
 })
 export class AdminRoutingModule {
 
diff --git a/src/app/admin/admin-search-page/admin-search-page.component.spec.ts b/src/app/admin/admin-search-page/admin-search-page.component.spec.ts
index 7be486d7da..43c7d86a08 100644
--- a/src/app/admin/admin-search-page/admin-search-page.component.spec.ts
+++ b/src/app/admin/admin-search-page/admin-search-page.component.spec.ts
@@ -1,7 +1,11 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 
 import { AdminSearchPageComponent } from './admin-search-page.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('AdminSearchPageComponent', () => {
   let component: AdminSearchPageComponent;
@@ -10,7 +14,7 @@ describe('AdminSearchPageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AdminSearchPageComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-search-page/admin-search-page.component.ts b/src/app/admin/admin-search-page/admin-search-page.component.ts
index c9c6b84245..6508b20efa 100644
--- a/src/app/admin/admin-search-page/admin-search-page.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-page.component.ts
@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+
 import { Context } from '../../core/shared/context.model';
 
 @Component({
   selector: 'ds-admin-search-page',
   templateUrl: './admin-search-page.component.html',
-  styleUrls: ['./admin-search-page.component.scss']
+  styleUrls: ['./admin-search-page.component.scss'],
 })
 
 /**
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.spec.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.spec.ts
index 1ea27b36b6..249c6b15bb 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.spec.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.spec.ts
@@ -1,27 +1,32 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
-import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
-import { SharedModule } from '../../../../../shared/shared.module';
-import { CollectionAdminSearchResultGridElementComponent } from './collection-admin-search-result-grid-element.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { CollectionSearchResult } from '../../../../../shared/object-collection/shared/collection-search-result.model';
-import { Collection } from '../../../../../core/shared/collection.model';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { getCollectionEditRoute } from '../../../../../collection-page/collection-page-routing-paths';
-import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { AuthService } from '../../../../../core/auth/auth.service';
-import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
-import { FileService } from '../../../../../core/shared/file.service';
-import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
+import { LinkService } from '../../../../../core/cache/builders/link.service';
+import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
 import { AuthorizationDataService } from '../../../../../core/data/feature-authorization/authorization-data.service';
-import { AuthorizationDataServiceStub } from '../../../../../shared/testing/authorization-service.stub';
-import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { Collection } from '../../../../../core/shared/collection.model';
+import { FileService } from '../../../../../core/shared/file.service';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
 import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { CollectionSearchResult } from '../../../../../shared/object-collection/shared/collection-search-result.model';
+import { SharedModule } from '../../../../../shared/shared.module';
+import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
+import { AuthorizationDataServiceStub } from '../../../../../shared/testing/authorization-service.stub';
+import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { CollectionAdminSearchResultGridElementComponent } from './collection-admin-search-result-grid-element.component';
 
 describe('CollectionAdminSearchResultGridElementComponent', () => {
   let component: CollectionAdminSearchResultGridElementComponent;
@@ -37,7 +42,7 @@ describe('CollectionAdminSearchResultGridElementComponent', () => {
   }
 
   const linkService = jasmine.createSpyObj('linkService', {
-    resolveLink: {}
+    resolveLink: {},
   });
 
   beforeEach(waitForAsync(() => {
@@ -47,7 +52,7 @@ describe('CollectionAdminSearchResultGridElementComponent', () => {
         NoopAnimationsModule,
         TranslateModule.forRoot(),
         RouterTestingModule.withRoutes([]),
-        SharedModule
+        SharedModule,
       ],
       declarations: [CollectionAdminSearchResultGridElementComponent],
       providers: [
@@ -58,7 +63,7 @@ describe('CollectionAdminSearchResultGridElementComponent', () => {
         { provide: FileService, useClass: FileServiceStub },
         { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
         { provide: ThemeService, useValue: getMockThemeService() },
-      ]
+      ],
     })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.ts
index 1412090e0f..5d39b79da5 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.ts
@@ -1,17 +1,18 @@
 import { Component } from '@angular/core';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
-import { CollectionSearchResult } from '../../../../../shared/object-collection/shared/collection-search-result.model';
-import { Collection } from '../../../../../core/shared/collection.model';
-import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
+
 import { getCollectionEditRoute } from '../../../../../collection-page/collection-page-routing-paths';
+import { Collection } from '../../../../../core/shared/collection.model';
+import { Context } from '../../../../../core/shared/context.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { CollectionSearchResult } from '../../../../../shared/object-collection/shared/collection-search-result.model';
+import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
 
 @listableObjectComponent(CollectionSearchResult, ViewMode.GridElement, Context.AdminSearch)
 @Component({
   selector: 'ds-collection-admin-search-result-list-element',
   styleUrls: ['./collection-admin-search-result-grid-element.component.scss'],
-  templateUrl: './collection-admin-search-result-grid-element.component.html'
+  templateUrl: './collection-admin-search-result-grid-element.component.html',
 })
 /**
  * The component for displaying a list element for a collection search result on the admin search page
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.spec.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.spec.ts
index 996366e20a..137f5be5f2 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.spec.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.spec.ts
@@ -1,29 +1,33 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslateModule } from '@ngx-translate/core';
-import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
-import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
-import { SharedModule } from '../../../../../shared/shared.module';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { CommunityAdminSearchResultGridElementComponent } from './community-admin-search-result-grid-element.component';
-import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
-import { Community } from '../../../../../core/shared/community.model';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { getCommunityEditRoute } from '../../../../../community-page/community-page-routing-paths';
-import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { AuthService } from '../../../../../core/auth/auth.service';
-import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
-import { FileService } from '../../../../../core/shared/file.service';
-import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
+import { LinkService } from '../../../../../core/cache/builders/link.service';
+import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
 import { AuthorizationDataService } from '../../../../../core/data/feature-authorization/authorization-data.service';
-import { AuthorizationDataServiceStub } from '../../../../../shared/testing/authorization-service.stub';
-import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { Community } from '../../../../../core/shared/community.model';
+import { FileService } from '../../../../../core/shared/file.service';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
 import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
+import { SharedModule } from '../../../../../shared/shared.module';
+import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
+import { AuthorizationDataServiceStub } from '../../../../../shared/testing/authorization-service.stub';
+import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { CommunityAdminSearchResultGridElementComponent } from './community-admin-search-result-grid-element.component';
 
 describe('CommunityAdminSearchResultGridElementComponent', () => {
   let component: CommunityAdminSearchResultGridElementComponent;
@@ -39,7 +43,7 @@ describe('CommunityAdminSearchResultGridElementComponent', () => {
   }
 
   const linkService = jasmine.createSpyObj('linkService', {
-    resolveLink: {}
+    resolveLink: {},
   });
 
   beforeEach(waitForAsync(() => {
@@ -49,7 +53,7 @@ describe('CommunityAdminSearchResultGridElementComponent', () => {
         NoopAnimationsModule,
         TranslateModule.forRoot(),
         RouterTestingModule.withRoutes([]),
-        SharedModule
+        SharedModule,
       ],
       declarations: [CommunityAdminSearchResultGridElementComponent],
       providers: [
@@ -61,7 +65,7 @@ describe('CommunityAdminSearchResultGridElementComponent', () => {
         { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
         { provide: ThemeService, useValue: getMockThemeService() },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.ts
index b0d603338b..9dd672e54c 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.ts
@@ -1,17 +1,18 @@
 import { Component } from '@angular/core';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
-import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
-import { Community } from '../../../../../core/shared/community.model';
-import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
+
 import { getCommunityEditRoute } from '../../../../../community-page/community-page-routing-paths';
+import { Community } from '../../../../../core/shared/community.model';
+import { Context } from '../../../../../core/shared/context.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
+import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
 
 @listableObjectComponent(CommunitySearchResult, ViewMode.GridElement, Context.AdminSearch)
 @Component({
   selector: 'ds-community-admin-search-result-grid-element',
   styleUrls: ['./community-admin-search-result-grid-element.component.scss'],
-  templateUrl: './community-admin-search-result-grid-element.component.html'
+  templateUrl: './community-admin-search-result-grid-element.component.html',
 })
 /**
  * The component for displaying a list element for a community search result on the admin search page
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.html b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.html
index c4b737849b..639c47f7f8 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.html
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.html
@@ -1,4 +1,4 @@
-
+
 
 

   
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts
index ee3de42131..80bd4469f6 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts
@@ -1,31 +1,36 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
+
+import { AuthService } from '../../../../../core/auth/auth.service';
+import { AccessStatusDataService } from '../../../../../core/data/access-status-data.service';
 import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
+import { AuthorizationDataService } from '../../../../../core/data/feature-authorization/authorization-data.service';
 import { RemoteData } from '../../../../../core/data/remote-data';
 import { Bitstream } from '../../../../../core/shared/bitstream.model';
-import { Item } from '../../../../../core/shared/item.model';
-import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
-import { SharedModule } from '../../../../../shared/shared.module';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { RouterTestingModule } from '@angular/router/testing';
-import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
-import { ItemAdminSearchResultGridElementComponent } from './item-admin-search-result-grid-element.component';
-import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
-import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
-import { ThemeService } from '../../../../../shared/theme-support/theme.service';
-import { AccessStatusDataService } from '../../../../../core/data/access-status-data.service';
-import { AccessStatusObject } from '../../../../../shared/object-collection/shared/badges/access-status-badge/access-status.model';
-import { AuthService } from '../../../../../core/auth/auth.service';
-import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
 import { FileService } from '../../../../../core/shared/file.service';
-import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
-import { AuthorizationDataService } from '../../../../../core/data/feature-authorization/authorization-data.service';
+import { Item } from '../../../../../core/shared/item.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
+import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { AccessStatusObject } from '../../../../../shared/object-collection/shared/badges/access-status-badge/access-status.model';
+import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
+import { SharedModule } from '../../../../../shared/shared.module';
+import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
 import { AuthorizationDataServiceStub } from '../../../../../shared/testing/authorization-service.stub';
+import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { ItemAdminSearchResultGridElementComponent } from './item-admin-search-result-grid-element.component';
 
 describe('ItemAdminSearchResultGridElementComponent', () => {
   let component: ItemAdminSearchResultGridElementComponent;
@@ -36,13 +41,13 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
   const mockBitstreamDataService = {
     getThumbnailFor(item: Item): Observable> {
       return createSuccessfulRemoteDataObject$(new Bitstream());
-    }
+    },
   };
 
   const mockAccessStatusDataService = {
     findAccessStatusFor(item: Item): Observable> {
       return createSuccessfulRemoteDataObject$(new AccessStatusObject());
-    }
+    },
   };
 
   const mockThemeService = getMockThemeService();
@@ -63,7 +68,7 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
           NoopAnimationsModule,
           TranslateModule.forRoot(),
           RouterTestingModule.withRoutes([]),
-          SharedModule
+          SharedModule,
         ],
         providers: [
           { provide: TruncatableService, useValue: mockTruncatableService },
@@ -74,7 +79,7 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
           { provide: FileService, useClass: FileServiceStub },
           { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
         ],
-        schemas: [NO_ERRORS_SCHEMA]
+        schemas: [NO_ERRORS_SCHEMA],
       })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts
index dab6694f36..b337df8ed2 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts
@@ -1,40 +1,50 @@
-import { Component, ComponentFactoryResolver, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {
+  Component,
+  ComponentRef,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
+import { Context } from '../../../../../core/shared/context.model';
+import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
 import { Item } from '../../../../../core/shared/item.model';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { hasValue } from '../../../../../shared/empty.util';
+import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
 import {
   getListableObjectComponent,
-  listableObjectComponent
+  listableObjectComponent,
 } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
-import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
 import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
-import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
-import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 
 @listableObjectComponent(ItemSearchResult, ViewMode.GridElement, Context.AdminSearch)
 @Component({
   selector: 'ds-item-admin-search-result-grid-element',
   styleUrls: ['./item-admin-search-result-grid-element.component.scss'],
-  templateUrl: './item-admin-search-result-grid-element.component.html'
+  templateUrl: './item-admin-search-result-grid-element.component.html',
 })
 /**
  * The component for displaying a list element for an item search result on the admin search page
  */
-export class ItemAdminSearchResultGridElementComponent extends SearchResultGridElementComponent implements OnInit {
-  @ViewChild(ListableObjectDirective, { static: true }) listableObjectDirective: ListableObjectDirective;
+export class ItemAdminSearchResultGridElementComponent extends SearchResultGridElementComponent implements OnDestroy, OnInit {
+  @ViewChild(DynamicComponentLoaderDirective, { static: true }) dynamicComponentLoaderDirective: DynamicComponentLoaderDirective;
   @ViewChild('badges', { static: true }) badges: ElementRef;
   @ViewChild('buttons', { static: true }) buttons: ElementRef;
 
+  protected compRef: ComponentRef;
+
   constructor(
     public dsoNameService: DSONameService,
     protected truncatableService: TruncatableService,
     protected bitstreamDataService: BitstreamDataService,
     private themeService: ThemeService,
-    private componentFactoryResolver: ComponentFactoryResolver,
   ) {
     super(dsoNameService, truncatableService, bitstreamDataService);
   }
@@ -44,23 +54,32 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
    */
   ngOnInit(): void {
     super.ngOnInit();
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent());
+    const component: GenericConstructor = this.getComponent();
 
-    const viewContainerRef = this.listableObjectDirective.viewContainerRef;
+    const viewContainerRef = this.dynamicComponentLoaderDirective.viewContainerRef;
     viewContainerRef.clear();
 
-    const componentRef = viewContainerRef.createComponent(
-      componentFactory,
-      0,
-      undefined,
-      [
-        [this.badges.nativeElement],
-        [this.buttons.nativeElement]
-      ]);
-    (componentRef.instance as any).object = this.object;
-    (componentRef.instance as any).index = this.index;
-    (componentRef.instance as any).linkType = this.linkType;
-    (componentRef.instance as any).listID = this.listID;
+    this.compRef = viewContainerRef.createComponent(
+      component, {
+        index: 0,
+        injector: undefined,
+        projectableNodes: [
+          [this.badges.nativeElement],
+          [this.buttons.nativeElement],
+        ],
+      },
+    );
+    this.compRef.setInput('object',this.object);
+    this.compRef.setInput('index', this.index);
+    this.compRef.setInput('linkType', this.linkType);
+    this.compRef.setInput('listID', this.listID);
+  }
+
+  ngOnDestroy(): void {
+    if (hasValue(this.compRef)) {
+      this.compRef.destroy();
+      this.compRef = undefined;
+    }
   }
 
   /**
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.spec.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.spec.ts
index 8937847ff5..cd7e7a237b 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.spec.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.spec.ts
@@ -1,20 +1,24 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { CollectionAdminSearchResultListElementComponent } from './collection-admin-search-result-list-element.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { CollectionSearchResult } from '../../../../../shared/object-collection/shared/collection-search-result.model';
-import { Collection } from '../../../../../core/shared/collection.model';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
-import { getCollectionEditRoute } from '../../../../../collection-page/collection-page-routing-paths';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
-import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { APP_CONFIG } from '../../../../../../config/app-config.interface';
 import { environment } from '../../../../../../environments/environment';
+import { getCollectionEditRoute } from '../../../../../collection-page/collection-page-routing-paths';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { Collection } from '../../../../../core/shared/collection.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { CollectionSearchResult } from '../../../../../shared/object-collection/shared/collection-search-result.model';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { CollectionAdminSearchResultListElementComponent } from './collection-admin-search-result-list-element.component';
 
 describe('CollectionAdminSearchResultListElementComponent', () => {
   let component: CollectionAdminSearchResultListElementComponent;
@@ -34,13 +38,13 @@ describe('CollectionAdminSearchResultListElementComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot(),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([]),
       ],
       declarations: [CollectionAdminSearchResultListElementComponent],
       providers: [{ provide: TruncatableService, useValue: {} },
         { provide: DSONameService, useClass: DSONameServiceMock },
         { provide: APP_CONFIG, useValue: environment }],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.ts
index 8bcf20b230..4ca4c3af4d 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.ts
@@ -1,17 +1,18 @@
 import { Component } from '@angular/core';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
-import { SearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
-import { CollectionSearchResult } from '../../../../../shared/object-collection/shared/collection-search-result.model';
-import { Collection } from '../../../../../core/shared/collection.model';
+
 import { getCollectionEditRoute } from '../../../../../collection-page/collection-page-routing-paths';
+import { Collection } from '../../../../../core/shared/collection.model';
+import { Context } from '../../../../../core/shared/context.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { CollectionSearchResult } from '../../../../../shared/object-collection/shared/collection-search-result.model';
+import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { SearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
 
 @listableObjectComponent(CollectionSearchResult, ViewMode.ListElement, Context.AdminSearch)
 @Component({
   selector: 'ds-collection-admin-search-result-list-element',
   styleUrls: ['./collection-admin-search-result-list-element.component.scss'],
-  templateUrl: './collection-admin-search-result-list-element.component.html'
+  templateUrl: './collection-admin-search-result-list-element.component.html',
 })
 /**
  * The component for displaying a list element for a collection search result on the admin search page
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.spec.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.spec.ts
index 110d77b1e5..3c1315cc64 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.spec.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.spec.ts
@@ -1,20 +1,24 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
-import { CommunityAdminSearchResultListElementComponent } from './community-admin-search-result-list-element.component';
-import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
-import { Community } from '../../../../../core/shared/community.model';
-import { getCommunityEditRoute } from '../../../../../community-page/community-page-routing-paths';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
-import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { APP_CONFIG } from '../../../../../../config/app-config.interface';
 import { environment } from '../../../../../../environments/environment';
+import { getCommunityEditRoute } from '../../../../../community-page/community-page-routing-paths';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { Community } from '../../../../../core/shared/community.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { CommunityAdminSearchResultListElementComponent } from './community-admin-search-result-list-element.component';
 
 describe('CommunityAdminSearchResultListElementComponent', () => {
   let component: CommunityAdminSearchResultListElementComponent;
@@ -34,13 +38,13 @@ describe('CommunityAdminSearchResultListElementComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot(),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([]),
       ],
       declarations: [CommunityAdminSearchResultListElementComponent],
       providers: [{ provide: TruncatableService, useValue: {} },
         { provide: DSONameService, useClass: DSONameServiceMock },
         { provide: APP_CONFIG, useValue: environment }],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.ts
index 9419ae3f3f..a3f8b42a13 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.ts
@@ -1,17 +1,18 @@
 import { Component } from '@angular/core';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
-import { SearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
-import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
-import { Community } from '../../../../../core/shared/community.model';
+
 import { getCommunityEditRoute } from '../../../../../community-page/community-page-routing-paths';
+import { Community } from '../../../../../core/shared/community.model';
+import { Context } from '../../../../../core/shared/context.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
+import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { SearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
 
 @listableObjectComponent(CommunitySearchResult, ViewMode.ListElement, Context.AdminSearch)
 @Component({
   selector: 'ds-community-admin-search-result-list-element',
   styleUrls: ['./community-admin-search-result-list-element.component.scss'],
-  templateUrl: './community-admin-search-result-list-element.component.html'
+  templateUrl: './community-admin-search-result-list-element.component.html',
 })
 /**
  * The component for displaying a list element for a community search result on the admin search page
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts
index 667e8edea9..f34c2709d8 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts
@@ -1,17 +1,22 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
-import { ItemAdminSearchResultListElementComponent } from './item-admin-search-result-list-element.component';
-import { Item } from '../../../../../core/shared/item.model';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
-import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { APP_CONFIG } from '../../../../../../config/app-config.interface';
 import { environment } from '../../../../../../environments/environment';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { Item } from '../../../../../core/shared/item.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { ItemAdminSearchResultListElementComponent } from './item-admin-search-result-list-element.component';
 
 describe('ItemAdminSearchResultListElementComponent', () => {
   let component: ItemAdminSearchResultListElementComponent;
@@ -31,13 +36,13 @@ describe('ItemAdminSearchResultListElementComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot(),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([]),
       ],
       declarations: [ItemAdminSearchResultListElementComponent],
       providers: [{ provide: TruncatableService, useValue: {} },
         { provide: DSONameService, useClass: DSONameServiceMock },
         { provide: APP_CONFIG, useValue: environment }],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.ts b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.ts
index b1dea11341..c181640c2c 100644
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.ts
@@ -1,16 +1,17 @@
 import { Component } from '@angular/core';
+
+import { Context } from '../../../../../core/shared/context.model';
 import { Item } from '../../../../../core/shared/item.model';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
+import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { SearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
 
 @listableObjectComponent(ItemSearchResult, ViewMode.ListElement, Context.AdminSearch)
 @Component({
   selector: 'ds-item-admin-search-result-list-element',
   styleUrls: ['./item-admin-search-result-list-element.component.scss'],
-  templateUrl: './item-admin-search-result-list-element.component.html'
+  templateUrl: './item-admin-search-result-list-element.component.html',
 })
 /**
  * The component for displaying a list element for an item search result on the admin search page
diff --git a/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.spec.ts b/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.spec.ts
index f354ac5f89..33a2cacb80 100644
--- a/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.spec.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.spec.ts
@@ -1,21 +1,25 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ItemAdminSearchResultActionsComponent } from './item-admin-search-result-actions.component';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { Item } from '../../../core/shared/item.model';
 import { URLCombiner } from '../../../core/url-combiner/url-combiner';
-import { getItemEditRoute } from '../../../item-page/item-page-routing-paths';
 import {
   ITEM_EDIT_DELETE_PATH,
   ITEM_EDIT_MOVE_PATH,
   ITEM_EDIT_PRIVATE_PATH,
   ITEM_EDIT_PUBLIC_PATH,
   ITEM_EDIT_REINSTATE_PATH,
-  ITEM_EDIT_WITHDRAW_PATH
+  ITEM_EDIT_WITHDRAW_PATH,
 } from '../../../item-page/edit-item-page/edit-item-page.routing-paths';
+import { getItemEditRoute } from '../../../item-page/item-page-routing-paths';
+import { ItemAdminSearchResultActionsComponent } from './item-admin-search-result-actions.component';
 
 describe('ItemAdminSearchResultActionsComponent', () => {
   let component: ItemAdminSearchResultActionsComponent;
@@ -34,10 +38,10 @@ describe('ItemAdminSearchResultActionsComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot(),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([]),
       ],
       declarations: [ItemAdminSearchResultActionsComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.ts b/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.ts
index fcc3cf0f17..54f6c82f3b 100644
--- a/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.ts
@@ -1,20 +1,24 @@
-import { Component, Input } from '@angular/core';
+import {
+  Component,
+  Input,
+} from '@angular/core';
+
 import { Item } from '../../../core/shared/item.model';
 import { URLCombiner } from '../../../core/url-combiner/url-combiner';
-import { getItemEditRoute } from '../../../item-page/item-page-routing-paths';
 import {
-  ITEM_EDIT_MOVE_PATH,
   ITEM_EDIT_DELETE_PATH,
-  ITEM_EDIT_PUBLIC_PATH,
+  ITEM_EDIT_MOVE_PATH,
   ITEM_EDIT_PRIVATE_PATH,
+  ITEM_EDIT_PUBLIC_PATH,
   ITEM_EDIT_REINSTATE_PATH,
-  ITEM_EDIT_WITHDRAW_PATH
+  ITEM_EDIT_WITHDRAW_PATH,
 } from '../../../item-page/edit-item-page/edit-item-page.routing-paths';
+import { getItemEditRoute } from '../../../item-page/item-page-routing-paths';
 
 @Component({
   selector: 'ds-item-admin-search-result-actions-element',
   styleUrls: ['./item-admin-search-result-actions.component.scss'],
-  templateUrl: './item-admin-search-result-actions.component.html'
+  templateUrl: './item-admin-search-result-actions.component.html',
 })
 /**
  * The component for displaying the actions for a list element for an item search result on the admin search page
diff --git a/src/app/admin/admin-search-page/admin-search.module.ts b/src/app/admin/admin-search-page/admin-search.module.ts
index 353d6dd498..f8eec908ff 100644
--- a/src/app/admin/admin-search-page/admin-search.module.ts
+++ b/src/app/admin/admin-search-page/admin-search.module.ts
@@ -1,16 +1,17 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../shared/shared.module';
-import { AdminSearchPageComponent } from './admin-search-page.component';
-import { ItemAdminSearchResultListElementComponent } from './admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component';
-import { CommunityAdminSearchResultListElementComponent } from './admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component';
-import { CollectionAdminSearchResultListElementComponent } from './admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component';
-import { ItemAdminSearchResultGridElementComponent } from './admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component';
-import { CommunityAdminSearchResultGridElementComponent } from './admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component';
-import { CollectionAdminSearchResultGridElementComponent } from './admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component';
-import { ItemAdminSearchResultActionsComponent } from './admin-search-results/item-admin-search-result-actions.component';
+
 import { JournalEntitiesModule } from '../../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../../entity-groups/research-entities/research-entities.module';
 import { SearchModule } from '../../shared/search/search.module';
+import { SharedModule } from '../../shared/shared.module';
+import { AdminSearchPageComponent } from './admin-search-page.component';
+import { CollectionAdminSearchResultGridElementComponent } from './admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component';
+import { CommunityAdminSearchResultGridElementComponent } from './admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component';
+import { ItemAdminSearchResultGridElementComponent } from './admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component';
+import { CollectionAdminSearchResultListElementComponent } from './admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component';
+import { CommunityAdminSearchResultListElementComponent } from './admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component';
+import { ItemAdminSearchResultListElementComponent } from './admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component';
+import { ItemAdminSearchResultActionsComponent } from './admin-search-results/item-admin-search-result-actions.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -20,7 +21,7 @@ const ENTRY_COMPONENTS = [
   ItemAdminSearchResultGridElementComponent,
   CommunityAdminSearchResultGridElementComponent,
   CollectionAdminSearchResultGridElementComponent,
-  ItemAdminSearchResultActionsComponent
+  ItemAdminSearchResultActionsComponent,
 ];
 
 @NgModule({
@@ -28,12 +29,12 @@ const ENTRY_COMPONENTS = [
     SearchModule,
     SharedModule.withEntryComponents(),
     JournalEntitiesModule.withEntryComponents(),
-    ResearchEntitiesModule.withEntryComponents()
+    ResearchEntitiesModule.withEntryComponents(),
   ],
   declarations: [
     AdminSearchPageComponent,
-    ...ENTRY_COMPONENTS
-  ]
+    ...ENTRY_COMPONENTS,
+  ],
 })
 export class AdminSearchModule {
   /**
@@ -43,7 +44,7 @@ export class AdminSearchModule {
   static withEntryComponents() {
     return {
       ngModule: SharedModule,
-      providers: ENTRY_COMPONENTS.map((component) => ({provide: component}))
+      providers: ENTRY_COMPONENTS.map((component) => ({ provide: component })),
     };
   }
 }
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
index 7f1e8716ba..24ba17fff4 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
@@ -1,23 +1,21 @@
-

-    
-      

-        
+
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
index 260a364d7a..3131899c49 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
@@ -1,15 +1,19 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { MenuService } from '../../../shared/menu/menu.service';
-import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
 import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
-import { Component } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
 import { AdminSidebarSectionComponent } from './admin-sidebar-section.component';
-import { RouterTestingModule } from '@angular/router/testing';
-import { By } from '@angular/platform-browser';
-import { TranslateModule } from '@ngx-translate/core';
 
 describe('AdminSidebarSectionComponent', () => {
   let component: AdminSidebarSectionComponent;
@@ -24,14 +28,14 @@ describe('AdminSidebarSectionComponent', () => {
         imports: [NoopAnimationsModule, RouterTestingModule, TranslateModule.forRoot()],
         declarations: [AdminSidebarSectionComponent, TestComponent],
         providers: [
-          {provide: 'sectionDataProvider', useValue: {model: {link: 'google.com'}, icon: iconString}},
-          {provide: MenuService, useValue: menuService},
-          {provide: CSSVariableService, useClass: CSSVariableServiceStub},
-        ]
+          { provide: 'sectionDataProvider', useValue: { model: { link: 'google.com' }, icon: iconString } },
+          { provide: MenuService, useValue: menuService },
+          { provide: CSSVariableService, useClass: CSSVariableServiceStub },
+        ],
       }).overrideComponent(AdminSidebarSectionComponent, {
         set: {
-          entryComponents: [TestComponent]
-        }
+          entryComponents: [TestComponent],
+        },
       })
         .compileComponents();
     }));
@@ -48,7 +52,7 @@ describe('AdminSidebarSectionComponent', () => {
     });
 
     it('should set the right icon', () => {
-      const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas'));
+      const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas'));
       expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
     });
     it('should not contain the disabled class', () => {
@@ -64,14 +68,14 @@ describe('AdminSidebarSectionComponent', () => {
         imports: [NoopAnimationsModule, RouterTestingModule, TranslateModule.forRoot()],
         declarations: [AdminSidebarSectionComponent, TestComponent],
         providers: [
-          {provide: 'sectionDataProvider', useValue: {model: {link: 'google.com', disabled: true}, icon: iconString}},
-          {provide: MenuService, useValue: menuService},
-          {provide: CSSVariableService, useClass: CSSVariableServiceStub},
-        ]
+          { provide: 'sectionDataProvider', useValue: { model: { link: 'google.com', disabled: true }, icon: iconString } },
+          { provide: MenuService, useValue: menuService },
+          { provide: CSSVariableService, useClass: CSSVariableServiceStub },
+        ],
       }).overrideComponent(AdminSidebarSectionComponent, {
         set: {
-          entryComponents: [TestComponent]
-        }
+          entryComponents: [TestComponent],
+        },
       })
         .compileComponents();
     }));
@@ -88,7 +92,7 @@ describe('AdminSidebarSectionComponent', () => {
     });
 
     it('should set the right icon', () => {
-      const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas'));
+      const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas'));
       expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
     });
     it('should contain the disabled class', () => {
@@ -102,7 +106,7 @@ describe('AdminSidebarSectionComponent', () => {
 // declare a test component
 @Component({
   selector: 'ds-test-cmp',
-  template: ``
+  template: ``,
 })
 class TestComponent {
 }
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
index b195526d1c..d677c7f8ba 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -1,13 +1,19 @@
-import { Component, Inject, Injector, OnInit } from '@angular/core';
-import { MenuSectionComponent } from '../../../shared/menu/menu-section/menu-section.component';
-import { MenuService } from '../../../shared/menu/menu.service';
-import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
-import { LinkMenuItemModel } from '../../../shared/menu/menu-item/models/link.model';
-import { MenuSection } from '../../../shared/menu/menu-section.model';
-import { MenuID } from '../../../shared/menu/menu-id.model';
-import { isEmpty } from '../../../shared/empty.util';
+import {
+  Component,
+  Inject,
+  Injector,
+  OnInit,
+} from '@angular/core';
 import { Router } from '@angular/router';
 
+import { isEmpty } from '../../../shared/empty.util';
+import { MenuService } from '../../../shared/menu/menu.service';
+import { MenuID } from '../../../shared/menu/menu-id.model';
+import { LinkMenuItemModel } from '../../../shared/menu/menu-item/models/link.model';
+import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
+import { MenuSection } from '../../../shared/menu/menu-section.model';
+import { MenuSectionComponent } from '../../../shared/menu/menu-section/menu-section.component';
+
 /**
  * Represents a non-expandable section in the admin sidebar
  */
@@ -52,4 +58,12 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement
       this.router.navigate(this.itemModel.link);
     }
   }
+
+  adminMenuSectionId(sectionId: string) {
+    return `admin-menu-section-${sectionId}`;
+  }
+
+  adminMenuSectionTitleId(sectionId: string) {
+    return `admin-menu-section-${sectionId}-title`;
+  }
 }
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
index fe7e5595ab..f3d5409a64 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -1,55 +1,63 @@
-
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
index 5ed0142c7f..d3607ca625 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
@@ -1,123 +1,140 @@
 :host {
-  --ds-icon-z-index: 10;
 
-    left: 0;
-    top: 0;
-    height: 100vh;
-    flex: 1 1 auto;
-    nav {
-        background-color: var(--ds-admin-sidebar-bg);
-        height: 100%;
-        flex-direction: column;
-        > div {
-            width: 100%;
-            &.sidebar-top-level-items {
-                flex: 1;
-                overflow: auto;
-                @include dark-scrollbar;
-            }
+  /* SIDEBAR SIZE AND POSITION */
+
+  /* Sidebar hierarchy:
+   § nav
+     § .sidebar-full-width-container (any OPTIONAL full width element with no horizontal margin or padding - it can be nested)
+       § .sidebar-section-wrapper
+         § .sidebar-fixed-element-wrapper
+         § .sidebar-collapsible-element-outer-wrapper
+           § .sidebar-collapsible-element-inner-wrapper
+             § .sidebar-item
+   */
+
+  // Sidebar position
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: var(--ds-sidebar-z-index);
+
+  // Sidebar size and content position
+  nav#admin-sidebar {
+
+    max-width: var(--ds-admin-sidebar-fixed-element-width); // Sidebar collapsed width
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    div#sidebar-top-level-items-container {
+      flex: 1 1 auto; // Fill available vertical space
+      overflow-x: hidden;
+      overflow-y: auto;
+      @include dark-scrollbar;
+    }
+
+    img#admin-sidebar-logo {
+      height: var(--ds-admin-sidebar-logo-height);
+    }
+
+    ::ng-deep {
+
+      // This class must be applied to any nested wrapper containing a sidebar section
+      .sidebar-full-width-container {
+        width: 100%;
+        padding-left: 0;
+        padding-right: 0;
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      // This class must be applied to the innermost block element containing a section or subsection link
+      // (it can be applied together with `sidebar-collapsible-element-inner-wrapper`)
+      .sidebar-item {
+        padding-top: var(--ds-admin-sidebar-item-padding);
+        padding-bottom: var(--ds-admin-sidebar-item-padding);
+      }
+
+      // These classes handle the collapsing behavior
+      .sidebar-section-wrapper {
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: stretch;
+
+        // These elements have fixed width and determine the width of the collapsed sidebar
+        & > .sidebar-fixed-element-wrapper {
+          min-width: var(--ds-admin-sidebar-fixed-element-width);
+          flex: 1 1 auto; // Fill available space
+
+          // Align the icons
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
         }
 
-        &.inactive ::ng-deep .sidebar-collapsible {
-            margin-left: calc(-1 * var(--ds-sidebar-items-width));
-        }
-
-        .navbar-nav {
-            .admin-menu-header {
-                background-color: var(--ds-admin-sidebar-header-bg);
-
-                .sidebar-section {
-                  background-color: inherit;
-                }
-
-                .logo-wrapper {
-                    img {
-                        height: 20px;
-                    }
-                }
-                .section-header-text {
-                    line-height: 1.5;
-                }
-
-                .navbar-brand {
-                  margin-right: 0;
-                }
-
-            }
-        }
-
-
-        ::ng-deep {
-            .navbar-nav {
-                .sidebar-section {
-                    display: flex;
-                    align-content: stretch;
-                    background-color: var(--ds-admin-sidebar-bg);
-                    overflow-x: visible;
-
-                    .nav-item {
-                        padding-top: var(--bs-spacer);
-                        padding-bottom: var(--bs-spacer);
-                        background-color: inherit;
-
-                      &:focus-visible {
-                        // since links fill the whole sidebar, we _inset_ the outline
-                        outline-offset: -4px;
-
-                        // replace padding with margins so it doesn't extend over the :focus-visible outline
-                        //  → can't remove the padding altogether; the icon needs to fill out
-                        //    the collapsed width of the sidebar for the slide animation to look decent.
-                        .shortcut-icon {
-                          padding-left: 0;
-                          padding-right: 0;
-                          margin-left: var(--ds-icon-padding);
-                          margin-right: var(--ds-icon-padding);
-                        }
-                        .logo-wrapper {
-                          margin-right: var(--bs-navbar-padding-x) !important;
-                        }
-                        .navbar-brand {
-                          padding-top: 0;
-                          padding-bottom: 0;
-                          margin-top: var(--bs-navbar-brand-padding-y);
-                          margin-bottom: var(--bs-navbar-brand-padding-y);
-                        }
-                      }
-                    }
-
-                    .shortcut-icon {
-                        background-color: inherit;
-                        padding-left: var(--ds-icon-padding);
-                        padding-right: var(--ds-icon-padding);
-                        z-index: var(--ds-icon-z-index);
-                        align-self: baseline;
-                    }
-
-                    .sidebar-collapsible {
-                        padding-left: 0;
-                        padding-right: var(--bs-spacer);
-                        width: var(--ds-sidebar-items-width);
-                        position: relative;
-                        .toggle {
-                          width: 100%;
-                        }
-
-                        ul {
-                          padding-top: var(--bs-spacer);
-
-                          li a {
-                            padding-left: var(--bs-spacer);
-                          }
-                        }
-                    }
-
-                    &.active > .sidebar-collapsible > .nav-link {
-                        color: var(--bs-navbar-dark-active-color);
-                    }
-                }
-            }
+        & > .sidebar-collapsible-element-outer-wrapper {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-end; // make inner wrapper slide on the left when collapsing
+          max-width: calc(100% - var(--ds-admin-sidebar-fixed-element-width)); // fill available space
+          padding-left: var(--ds-dark-scrollbar-width); // leave room for scrollbar
+          overflow-x: hidden; // hide inner wrapper when sidebar is collapsed
+
+          // These elements have fixed width and slide on the left when the sidebar is collapsed
+          // Their content should fill all available space
+          & > .sidebar-collapsible-element-inner-wrapper {
+            min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width));
+            height: 100%;
+            padding-right: var(--ds-admin-sidebar-item-padding);
+          }
         }
+      }
 
     }
 
+    // Set here any style that depends on the sidebar status
+    &.collapsed, &.transitioning, &.expanded { }
+
+  }
+
+  /* SIDEBAR STYLE */
+
+  nav#admin-sidebar {
+
+    background-color: var(--ds-admin-sidebar-bg);
+
+    ::ng-deep {
+
+      color: white;
+
+      // Set here the style of the *-menu-item nested components
+      .ds-menu-item {
+      }
+
+      a {
+        color: var(--ds-admin-sidebar-link-color);
+        text-decoration: none;
+
+        &:hover, &:focus {
+          color: var(--ds-admin-sidebar-link-hover-color);
+        }
+      }
+    }
+
+    div#sidebar-header-container {
+      background-color: var(--ds-admin-sidebar-header-bg);
+      .sidebar-fixed-element-wrapper {
+        background-color: var(--ds-admin-sidebar-header-bg);
+      }
+    }
+
+    div#sidebar-collapse-toggle-container {
+      .sidebar-collapsible-element-inner-wrapper {
+      }
+    }
+  }
 }
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
index 88efd2a711..b8de30031b 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
@@ -1,26 +1,36 @@
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslateModule } from '@ngx-translate/core';
-import { ChangeDetectionStrategy, Injector, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ScriptDataService } from '../../core/data/processes/script-data.service';
-import { AdminSidebarComponent } from './admin-sidebar.component';
-import { MenuService } from '../../shared/menu/menu.service';
-import { MenuServiceStub } from '../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
-import { CSSVariableServiceStub } from '../../shared/testing/css-variable-service.stub';
-import { AuthServiceStub } from '../../shared/testing/auth-service.stub';
-import { AuthService } from '../../core/auth/auth.service';
-import { of as observableOf } from 'rxjs';
+import {
+  ChangeDetectionStrategy,
+  Injector,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { RouterTestingModule } from '@angular/router/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+
+import { AuthService } from '../../core/auth/auth.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import createSpy = jasmine.createSpy;
-import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
+import { ScriptDataService } from '../../core/data/processes/script-data.service';
 import { Item } from '../../core/shared/item.model';
-import { ThemeService } from '../../shared/theme-support/theme.service';
+import { MenuService } from '../../shared/menu/menu.service';
 import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
+import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
+import { AuthServiceStub } from '../../shared/testing/auth-service.stub';
+import { CSSVariableServiceStub } from '../../shared/testing/css-variable-service.stub';
+import { MenuServiceStub } from '../../shared/testing/menu-service.stub';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { AdminSidebarComponent } from './admin-sidebar.component';
 
 describe('AdminSidebarComponent', () => {
   let comp: AdminSidebarComponent;
@@ -37,23 +47,23 @@ describe('AdminSidebarComponent', () => {
     lastModified: '2018',
     _links: {
       self: {
-        href: 'https://localhost:8000/items/fake-id'
-      }
-    }
+        href: 'https://localhost:8000/items/fake-id',
+      },
+    },
   });
 
 
   const routeStub = {
     data: observableOf({
-      dso: createSuccessfulRemoteDataObject(mockItem)
+      dso: createSuccessfulRemoteDataObject(mockItem),
     }),
-    children: []
+    children: [],
   };
 
 
   beforeEach(waitForAsync(() => {
     authorizationService = jasmine.createSpyObj('authorizationService', {
-      isAuthorized: observableOf(true)
+      isAuthorized: observableOf(true),
     });
     scriptService = jasmine.createSpyObj('scriptService', { scriptWithNameExistsAndCanExecute: observableOf(true) });
     TestBed.configureTestingModule({
@@ -72,15 +82,15 @@ describe('AdminSidebarComponent', () => {
         {
           provide: NgbModal, useValue: {
             open: () => {/*comment*/
-            }
-          }
-        }
+            },
+          },
+        },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(AdminSidebarComponent, {
       set: {
         changeDetection: ChangeDetectionStrategy.Default,
-      }
+      },
     }).compileComponents();
   }));
 
@@ -143,10 +153,10 @@ describe('AdminSidebarComponent', () => {
   describe('when the collapse link is clicked', () => {
     beforeEach(() => {
       spyOn(menuService, 'toggleMenu');
-      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle > a'));
+      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle-container > a'));
       sidebarToggler.triggerEventHandler('click', {
         preventDefault: () => {/**/
-        }
+        },
       });
     });
 
@@ -161,7 +171,7 @@ describe('AdminSidebarComponent', () => {
       const sidebarToggler = fixture.debugElement.query(By.css('nav.navbar'));
       sidebarToggler.triggerEventHandler('mouseenter', {
         preventDefault: () => {/**/
-        }
+        },
       });
       tick(99);
       expect(menuService.expandMenuPreview).not.toHaveBeenCalled();
@@ -176,7 +186,7 @@ describe('AdminSidebarComponent', () => {
       const sidebarToggler = fixture.debugElement.query(By.css('nav.navbar'));
       sidebarToggler.triggerEventHandler('mouseleave', {
         preventDefault: () => {/**/
-        }
+        },
       });
       tick(399);
       expect(menuService.collapseMenuPreview).not.toHaveBeenCalled();
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
index 26ded965d4..37bc8bbf98 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -1,14 +1,31 @@
-import { Component, HostListener, Injector, OnInit } from '@angular/core';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged, first, map, withLatestFrom } from 'rxjs/operators';
+import {
+  Component,
+  HostListener,
+  Injector,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {
+  BehaviorSubject,
+  combineLatest,
+  Observable,
+} from 'rxjs';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  first,
+  map,
+  withLatestFrom,
+} from 'rxjs/operators';
+
 import { AuthService } from '../../core/auth/auth.service';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { slideSidebar } from '../../shared/animations/slide';
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
-import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
-import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
-import { ActivatedRoute } from '@angular/router';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { ThemeService } from '../../shared/theme-support/theme.service';
 
 /**
@@ -18,7 +35,7 @@ import { ThemeService } from '../../shared/theme-support/theme.service';
   selector: 'ds-admin-sidebar',
   templateUrl: './admin-sidebar.component.html',
   styleUrls: ['./admin-sidebar.component.scss'],
-  animations: [slideSidebar]
+  animations: [slideSidebar],
 })
 export class AdminSidebarComponent extends MenuComponent implements OnInit {
   /**
@@ -28,9 +45,14 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
   menuID = MenuID.ADMIN;
 
   /**
-   * Observable that emits the width of the collapsible menu sections
+   * Observable that emits the width of the sidebar when expanded
    */
-  sidebarWidth: Observable;
+  @Input() expandedSidebarWidth$: Observable;
+
+  /**
+   * Observable that emits the width of the sidebar when collapsed
+   */
+  @Input() collapsedSidebarWidth$: Observable;
 
   /**
    * Is true when the sidebar is open, is false when the sidebar is animating or closed
@@ -44,6 +66,12 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    */
   sidebarClosed = !this.sidebarOpen; // Closed in UI, animation finished
 
+  /**
+   * Is true when the sidebar is opening or closing
+   * @type {boolean}
+   */
+  sidebarTransitioning = !this.sidebarOpen; // Animation in progress
+
   /**
    * Emits true when either the menu OR the menu's preview is expanded, else emits false
    */
@@ -58,7 +86,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
     private authService: AuthService,
     public authorizationService: AuthorizationDataService,
     public route: ActivatedRoute,
-    protected themeService: ThemeService
+    protected themeService: ThemeService,
   ) {
     super(menuService, injector, authorizationService, route, themeService);
     this.inFocus$ = new BehaviorSubject(false);
@@ -69,7 +97,6 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width');
     this.authService.isAuthenticated()
       .subscribe((loggedIn: boolean) => {
         if (loggedIn) {
@@ -83,13 +110,13 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
       });
     this.sidebarExpanded = combineLatest([this.menuCollapsed, this.menuPreviewCollapsed])
       .pipe(
-        map(([collapsed, previewCollapsed]) => (!collapsed || !previewCollapsed))
+        map(([collapsed, previewCollapsed]) => (!collapsed || !previewCollapsed)),
       );
     this.inFocus$.pipe(
       debounceTime(50),
       distinctUntilChanged(),  // disregard focusout in situations like --(focusout)-(focusin)--
       withLatestFrom(
-        combineLatest([this.menuCollapsed, this.menuPreviewCollapsed])
+        combineLatest([this.menuCollapsed, this.menuPreviewCollapsed]),
       ),
     ).subscribe(([inFocus, [collapsed, previewCollapsed]]) => {
       if (collapsed) {
@@ -134,6 +161,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    * @param event The animation event
    */
   startSlide(event: any): void {
+    this.sidebarTransitioning = true;
     if (event.toState === 'expanded') {
       this.sidebarClosed = false;
     } else if (event.toState === 'collapsed') {
@@ -146,6 +174,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    * @param event The animation event
    */
   finishSlide(event: any): void {
+    this.sidebarTransitioning = false;
     if (event.fromState === 'expanded') {
       this.sidebarClosed = true;
     } else if (event.fromState === 'collapsed') {
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
index 1f4666bbd0..636938b7b6 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -1,37 +1,46 @@
-

-  

+  
-    

+    
-    

-      

-        
+    

+      

+        
           
         
-        
       

-      
    
-        
  • 
-          
-        
    • 
-      

+    

+  
+  

+    

+    

+      

+        
+      

     

   

 

diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
index 802fade8c1..845ba734df 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
@@ -1,23 +1,24 @@
-:host ::ng-deep {
-    .fa-chevron-right {
-        padding-left: calc(var(--bs-spacer) / 2);
-        font-size: 0.5rem;
-        line-height: 3;
+:host {
+  .sidebar-sub-level-item-list  {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    ::ng-deep .ds-menu-item {
+      margin-left: var(--ds-admin-sidebar-section-indent);
     }
+  }
 
-    .sidebar-sub-level-items {
-        list-style: disc;
-        color: var(--bs-navbar-dark-color);
-        overflow: hidden;
-        margin-bottom: calc(-1 * var(--bs-spacer)); // the bottom-most nav-item is padded, no need for double spacing
-    }
+  .toggler-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+  }
 
-    .sidebar-collapsible {
-        display: flex;
-        flex-direction: column;
-    }
-
-    li.sidebar-section.expanded {
-      background-color: var(--ds-admin-sidebar-active-bg) !important;
+  .subsection {
+    .sidebar-collapsible-element-inner-wrapper {
+      overflow-y: hidden;
     }
+  }
 }
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
index dd31f757c2..d01f4693ef 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
@@ -1,17 +1,21 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
 
-import { ExpandableAdminSidebarSectionComponent } from './expandable-admin-sidebar-section.component';
 import { MenuService } from '../../../shared/menu/menu.service';
-import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
 import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
-import { of as observableOf } from 'rxjs';
-import { Component } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { By } from '@angular/platform-browser';
-import { TranslateModule } from '@ngx-translate/core';
-import { Router } from '@angular/router';
+import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
 import { RouterStub } from '../../../shared/testing/router.stub';
+import { ExpandableAdminSidebarSectionComponent } from './expandable-admin-sidebar-section.component';
 
 describe('ExpandableAdminSidebarSectionComponent', () => {
   let component: ExpandableAdminSidebarSectionComponent;
@@ -27,11 +31,11 @@ describe('ExpandableAdminSidebarSectionComponent', () => {
         { provide: MenuService, useValue: menuService },
         { provide: CSSVariableService, useClass: CSSVariableServiceStub },
         { provide: Router, useValue: new RouterStub() },
-      ]
+      ],
     }).overrideComponent(ExpandableAdminSidebarSectionComponent, {
       set: {
-        entryComponents: [TestComponent]
-      }
+        entryComponents: [TestComponent],
+      },
     })
       .compileComponents();
   }));
@@ -49,17 +53,17 @@ describe('ExpandableAdminSidebarSectionComponent', () => {
   });
 
   it('should set the right icon', () => {
-    const icon = fixture.debugElement.query(By.css('.shortcut-icon > i.fas'));
+    const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"] > i.fas'));
     expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
   });
 
   describe('when the header text is clicked', () => {
     beforeEach(() => {
       spyOn(menuService, 'toggleActiveSection');
-      const sidebarToggler = fixture.debugElement.query(By.css('.sidebar-section > div.nav-item'));
+      const sidebarToggler = fixture.debugElement.query(By.css('a.sidebar-section-wrapper'));
       sidebarToggler.triggerEventHandler('click', {
         preventDefault: () => {/**/
-        }
+        },
       });
     });
 
@@ -72,7 +76,7 @@ describe('ExpandableAdminSidebarSectionComponent', () => {
 // declare a test component
 @Component({
   selector: 'ds-test-cmp',
-  template: ``
+  template: ``,
 })
 class TestComponent {
 }
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
index 8591fef97e..a43be47879 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -1,15 +1,24 @@
-import { Component, Inject, Injector, OnInit } from '@angular/core';
-import { rotate } from '../../../shared/animations/rotate';
-import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
-import { slide } from '../../../shared/animations/slide';
-import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
-import { bgColor } from '../../../shared/animations/bgColor';
-import { MenuService } from '../../../shared/menu/menu.service';
-import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
-import { MenuID } from '../../../shared/menu/menu-id.model';
+import {
+  Component,
+  Inject,
+  Injector,
+  OnInit,
+} from '@angular/core';
 import { Router } from '@angular/router';
+import {
+  combineLatest as combineLatestObservable,
+  Observable,
+} from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { bgColor } from '../../../shared/animations/bgColor';
+import { rotate } from '../../../shared/animations/rotate';
+import { slide } from '../../../shared/animations/slide';
+import { MenuService } from '../../../shared/menu/menu.service';
+import { MenuID } from '../../../shared/menu/menu-id.model';
+import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
+import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
 
 /**
  * Represents a expandable section in the sidebar
@@ -18,7 +27,7 @@ import { Router } from '@angular/router';
   selector: 'ds-expandable-admin-sidebar-section',
   templateUrl: './expandable-admin-sidebar-section.component.html',
   styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
-  animations: [rotate, slide, bgColor]
+  animations: [rotate, slide, bgColor],
 })
 
 @rendersSectionForMenu(MenuID.ADMIN, true)
@@ -31,23 +40,23 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
   /**
    * The background color of the section when it's active
    */
-  sidebarActiveBg;
+  sidebarActiveBg$: Observable;
 
   /**
    * Emits true when the sidebar is currently collapsed, true when it's expanded
    */
-  sidebarCollapsed: Observable;
+  isSidebarCollapsed$: Observable;
 
   /**
    * Emits true when the sidebar's preview is currently collapsed, true when it's expanded
    */
-  sidebarPreviewCollapsed: Observable;
+  isSidebarPreviewCollapsed$: Observable;
 
   /**
    * Emits true when the menu section is expanded, else emits false
    * This is true when the section is active AND either the sidebar or it's preview is open
    */
-  expanded: Observable;
+  isExpanded$: Observable;
 
   constructor(
     @Inject('sectionDataProvider') menuSection,
@@ -64,12 +73,20 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarActiveBg = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
-    this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
-    this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
-    this.expanded = combineLatestObservable(this.active, this.sidebarCollapsed, this.sidebarPreviewCollapsed)
-      .pipe(
-        map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed)))
-      );
+    this.sidebarActiveBg$ = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
+    this.isSidebarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID);
+    this.isSidebarPreviewCollapsed$ = this.menuService.isMenuPreviewCollapsed(this.menuID);
+    this.isExpanded$ = combineLatestObservable([this.active, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe(
+      map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed))),
+    );
+  }
+
+  toggleSection($event: Event) {
+    this.menuService.expandMenuPreview(this.menuID); // fixes accessibility issue
+    super.toggleSection($event);
+  }
+
+  adminMenuSubsectionId(sectionId: string, subsectionId: string) {
+    return `admin-menu-section-${sectionId}-${subsectionId}`;
   }
 }
diff --git a/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts b/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
index f2f35725e8..30f1a60ee2 100644
--- a/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
@@ -1,4 +1,9 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  Input,
+} from '@angular/core';
+import { Observable } from 'rxjs';
+
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { AdminSidebarComponent } from './admin-sidebar.component';
 
@@ -11,6 +16,19 @@ import { AdminSidebarComponent } from './admin-sidebar.component';
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
 export class ThemedAdminSidebarComponent extends ThemedComponent {
+
+  /**
+   * Observable that emits the width of the sidebar when expanded
+   */
+  @Input() expandedSidebarWidth$: Observable;
+
+  /**
+   * Observable that emits the width of the sidebar when collapsed
+   */
+  @Input() collapsedSidebarWidth$: Observable;
+
+  protected inAndOutputNames: (keyof AdminSidebarComponent & keyof this)[] = ['collapsedSidebarWidth$', 'expandedSidebarWidth$'];
+
   protected getComponentName(): string {
     return 'AdminSidebarComponent';
   }
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-page.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-page.component.spec.ts
index c80bc677f2..b422cfd7c7 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-page.component.spec.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-page.component.spec.ts
@@ -1,7 +1,11 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 
 import { AdminWorkflowPageComponent } from './admin-workflow-page.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('AdminSearchPageComponent', () => {
   let component: AdminWorkflowPageComponent;
@@ -10,7 +14,7 @@ describe('AdminSearchPageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AdminWorkflowPageComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-page.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-page.component.ts
index c3ccc9555a..0b66fe711c 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-page.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-page.component.ts
@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+
 import { Context } from '../../core/shared/context.model';
 
 @Component({
   selector: 'ds-admin-workflow-page',
   templateUrl: './admin-workflow-page.component.html',
-  styleUrls: ['./admin-workflow-page.component.scss']
+  styleUrls: ['./admin-workflow-page.component.scss'],
 })
 
 /**
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component.spec.ts
index 04377fcc81..8aaec2bbf8 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component.spec.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component.spec.ts
@@ -1,20 +1,24 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
-import { URLCombiner } from '../../../../../core/url-combiner/url-combiner';
-import { WorkflowItemAdminWorkflowActionsComponent } from './workflow-item-admin-workflow-actions.component';
-import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
-import {
-  getWorkflowItemDeleteRoute,
-  getWorkflowItemSendBackRoute
-} from '../../../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
+import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
-import { Item } from '../../../../../core/shared/item.model';
+
 import { RemoteData } from '../../../../../core/data/remote-data';
 import { RequestEntryState } from '../../../../../core/data/request-entry-state.model';
+import { Item } from '../../../../../core/shared/item.model';
+import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
+import { URLCombiner } from '../../../../../core/url-combiner/url-combiner';
+import {
+  getWorkflowItemDeleteRoute,
+  getWorkflowItemSendBackRoute,
+} from '../../../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
+import { WorkflowItemAdminWorkflowActionsComponent } from './workflow-item-admin-workflow-actions.component';
 
 describe('WorkflowItemAdminWorkflowActionsComponent', () => {
   let component: WorkflowItemAdminWorkflowActionsComponent;
@@ -37,10 +41,10 @@ describe('WorkflowItemAdminWorkflowActionsComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot(),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([]),
       ],
       declarations: [WorkflowItemAdminWorkflowActionsComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component.ts
index 480c48f25e..1f724c351e 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component.ts
@@ -1,15 +1,18 @@
-import { Component, Input } from '@angular/core';
+import {
+  Component,
+  Input,
+} from '@angular/core';
 
 import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
 import {
   getWorkflowItemDeleteRoute,
-  getWorkflowItemSendBackRoute
+  getWorkflowItemSendBackRoute,
 } from '../../../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
 
 @Component({
   selector: 'ds-workflow-item-admin-workflow-actions-element',
   styleUrls: ['./workflow-item-admin-workflow-actions.component.scss'],
-  templateUrl: './workflow-item-admin-workflow-actions.component.html'
+  templateUrl: './workflow-item-admin-workflow-actions.component.html',
 })
 /**
  * The component for displaying the actions for a list element for a workflow-item on the admin workflow search page
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.spec.ts
index 6e917ed088..9415c4f9fb 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.spec.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.spec.ts
@@ -1,13 +1,21 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  DebugElement,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { SupervisionOrderGroupSelectorComponent } from './supervision-order-group-selector.component';
-import { SupervisionOrderDataService } from '../../../../../../core/supervision-order/supervision-order-data.service';
-import { NotificationsService } from '../../../../../../shared/notifications/notifications.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
+
 import { Group } from '../../../../../../core/eperson/models/group.model';
 import { SupervisionOrder } from '../../../../../../core/supervision-order/models/supervision-order.model';
-import { of } from 'rxjs';
+import { SupervisionOrderDataService } from '../../../../../../core/supervision-order/supervision-order-data.service';
+import { NotificationsService } from '../../../../../../shared/notifications/notifications.service';
+import { SupervisionOrderGroupSelectorComponent } from './supervision-order-group-selector.component';
 
 describe('SupervisionOrderGroupSelectorComponent', () => {
   let component: SupervisionOrderGroupSelectorComponent;
@@ -17,7 +25,7 @@ describe('SupervisionOrderGroupSelectorComponent', () => {
   const modalStub = jasmine.createSpyObj('modalStub', ['close']);
 
   const supervisionOrderDataService: any = jasmine.createSpyObj('supervisionOrderDataService', {
-    create: of(new SupervisionOrder())
+    create: of(new SupervisionOrder()),
   });
 
   const selectedOrderType = 'NONE';
@@ -38,7 +46,7 @@ describe('SupervisionOrderGroupSelectorComponent', () => {
         { provide: SupervisionOrderDataService, useValue: supervisionOrderDataService },
         { provide: NotificationsService, useValue: {} },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
 
   }));
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.ts
index 2eec0cfd0c..0ddc588c1a 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.ts
@@ -1,13 +1,18 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Output,
+} from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { getFirstCompletedRemoteData } from 'src/app/core/shared/operators';
 import { NotificationsService } from 'src/app/shared/notifications/notifications.service';
+
 import { DSONameService } from '../../../../../../core/breadcrumbs/dso-name.service';
+import { RemoteData } from '../../../../../../core/data/remote-data';
 import { Group } from '../../../../../../core/eperson/models/group.model';
 import { SupervisionOrder } from '../../../../../../core/supervision-order/models/supervision-order.model';
 import { SupervisionOrderDataService } from '../../../../../../core/supervision-order/supervision-order-data.service';
-import { RemoteData } from '../../../../../../core/data/remote-data';
 
 /**
  * Component to wrap a dropdown - for type of order -
@@ -76,7 +81,7 @@ export class SupervisionOrderGroupSelectorComponent {
   save() {
     this.isSubmitted = true;
     if (this.selectedOrderType && this.selectedGroup) {
-      let supervisionDataObject = new SupervisionOrder();
+      const supervisionDataObject = new SupervisionOrder();
       supervisionDataObject.ordertype = this.selectedOrderType;
       this.supervisionOrderDataService.create(supervisionDataObject, this.itemUUID, this.selectedGroup.uuid, this.selectedOrderType).pipe(
         getFirstCompletedRemoteData(),
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.spec.ts
index 2f4ed631cc..1a30bff969 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.spec.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.spec.ts
@@ -1,14 +1,22 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import {
+  NO_ERRORS_SCHEMA,
+  SimpleChange,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import {
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
 
-import { SupervisionOrderStatusComponent } from './supervision-order-status.component';
-import { VarDirective } from '../../../../../../shared/utils/var.directive';
 import { TranslateLoaderMock } from '../../../../../../shared/mocks/translate-loader.mock';
 import { supervisionOrderListMock } from '../../../../../../shared/testing/supervision-order.mock';
+import { VarDirective } from '../../../../../../shared/utils/var.directive';
+import { SupervisionOrderStatusComponent } from './supervision-order-status.component';
 
 describe('SupervisionOrderStatusComponent', () => {
   let component: SupervisionOrderStatusComponent;
@@ -21,16 +29,16 @@ describe('SupervisionOrderStatusComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
-          }
-        })
+            useClass: TranslateLoaderMock,
+          },
+        }),
       ],
       declarations: [ SupervisionOrderStatusComponent, VarDirective ],
       schemas: [
-        NO_ERRORS_SCHEMA
-      ]
+        NO_ERRORS_SCHEMA,
+      ],
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {
@@ -38,7 +46,7 @@ describe('SupervisionOrderStatusComponent', () => {
     component = fixture.componentInstance;
     component.supervisionOrderList = supervisionOrderListMock;
     component.ngOnChanges(    {
-      supervisionOrderList: new SimpleChange(null, supervisionOrderListMock, true)
+      supervisionOrderList: new SimpleChange(null, supervisionOrderListMock, true),
     });
     fixture.detectChanges();
   });
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.ts
index 93c6441e92..37b5903f0c 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.ts
@@ -1,14 +1,28 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  BehaviorSubject,
+  from,
+  Observable,
+} from 'rxjs';
+import {
+  map,
+  mergeMap,
+  reduce,
+} from 'rxjs/operators';
 
-import { BehaviorSubject, from, Observable } from 'rxjs';
-import { map, mergeMap, reduce } from 'rxjs/operators';
-
-import { SupervisionOrder } from '../../../../../../core/supervision-order/models/supervision-order.model';
+import { DSONameService } from '../../../../../../core/breadcrumbs/dso-name.service';
+import { RemoteData } from '../../../../../../core/data/remote-data';
 import { Group } from '../../../../../../core/eperson/models/group.model';
 import { getFirstCompletedRemoteData } from '../../../../../../core/shared/operators';
+import { SupervisionOrder } from '../../../../../../core/supervision-order/models/supervision-order.model';
 import { isNotEmpty } from '../../../../../../shared/empty.util';
-import { RemoteData } from '../../../../../../core/data/remote-data';
-import { DSONameService } from '../../../../../../core/breadcrumbs/dso-name.service';
 
 export interface SupervisionOrderListEntry {
   supervisionOrder: SupervisionOrder;
@@ -18,7 +32,7 @@ export interface SupervisionOrderListEntry {
 @Component({
   selector: 'ds-supervision-order-status',
   templateUrl: './supervision-order-status.component.html',
-  styleUrls: ['./supervision-order-status.component.scss']
+  styleUrls: ['./supervision-order-status.component.scss'],
 })
 export class SupervisionOrderStatusComponent implements OnChanges {
 
@@ -61,13 +75,13 @@ export class SupervisionOrderStatusComponent implements OnChanges {
           if (sogRD.hasSucceeded) {
             const entry: SupervisionOrderListEntry = {
               supervisionOrder: so,
-              group: sogRD.payload
+              group: sogRD.payload,
             };
             return entry;
           } else {
             return null;
           }
-        })
+        }),
       )),
       reduce((acc: SupervisionOrderListEntry[], value: any) => {
         if (isNotEmpty(value)) {
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.spec.ts
index a8f0581ec0..ee5aaa40af 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.spec.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.spec.ts
@@ -1,31 +1,30 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
-
-import { of } from 'rxjs';
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
 
-import { URLCombiner } from '../../../../../core/url-combiner/url-combiner';
-import { WorkspaceItemAdminWorkflowActionsComponent } from './workspace-item-admin-workflow-actions.component';
-import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
-import {
- getWorkspaceItemDeleteRoute,
-} from '../../../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
-import { Item } from '../../../../../core/shared/item.model';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { RemoteData } from '../../../../../core/data/remote-data';
 import { RequestEntryState } from '../../../../../core/data/request-entry-state.model';
-import { NotificationsServiceStub } from '../../../../../shared/testing/notifications-service.stub';
-import { NotificationsService } from '../../../../../shared/notifications/notifications.service';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
-import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { Item } from '../../../../../core/shared/item.model';
+import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
 import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
+import { URLCombiner } from '../../../../../core/url-combiner/url-combiner';
 import { ConfirmationModalComponent } from '../../../../../shared/confirmation-modal/confirmation-modal.component';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { NotificationsService } from '../../../../../shared/notifications/notifications.service';
+import { NotificationsServiceStub } from '../../../../../shared/testing/notifications-service.stub';
 import { supervisionOrderEntryMock } from '../../../../../shared/testing/supervision-order.mock';
-import {
-  SupervisionOrderGroupSelectorComponent
-} from './supervision-order-group-selector/supervision-order-group-selector.component';
+import { getWorkspaceItemDeleteRoute } from '../../../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
+import { SupervisionOrderGroupSelectorComponent } from './supervision-order-group-selector/supervision-order-group-selector.component';
+import { WorkspaceItemAdminWorkflowActionsComponent } from './workspace-item-admin-workflow-actions.component';
 
 describe('WorkspaceItemAdminWorkflowActionsComponent', () => {
   let component: WorkspaceItemAdminWorkflowActionsComponent;
@@ -56,15 +55,15 @@ describe('WorkspaceItemAdminWorkflowActionsComponent', () => {
       imports: [
         NgbModalModule,
         TranslateModule.forRoot(),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([]),
       ],
       declarations: [WorkspaceItemAdminWorkflowActionsComponent],
       providers: [
         { provide: DSONameService, useClass: DSONameServiceMock },
         { provide: NotificationsService, useValue: notificationService },
-        { provide: SupervisionOrderDataService, useValue: supervisionOrderDataService }
+        { provide: SupervisionOrderDataService, useValue: supervisionOrderDataService },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
   }));
@@ -97,7 +96,7 @@ describe('WorkspaceItemAdminWorkflowActionsComponent', () => {
     beforeEach(() => {
       spyOn(component.delete, 'emit');
       spyOn((component as any).modalService, 'open').and.returnValue({
-        componentInstance: { response: of(true) }
+        componentInstance: { response: of(true) },
       });
     });
 
@@ -138,7 +137,7 @@ describe('WorkspaceItemAdminWorkflowActionsComponent', () => {
     beforeEach(() => {
       spyOn(component.create, 'emit');
       spyOn((component as any).modalService, 'open').and.returnValue({
-        componentInstance: { create: of(true) }
+        componentInstance: { create: of(true) },
       });
     });
 
@@ -146,7 +145,7 @@ describe('WorkspaceItemAdminWorkflowActionsComponent', () => {
       component.openSupervisionModal();
       expect((component as any).modalService.open).toHaveBeenCalledWith(SupervisionOrderGroupSelectorComponent, {
         size: 'lg',
-        backdrop: 'static'
+        backdrop: 'static',
       });
       expect(component.create.emit).toHaveBeenCalled();
     });
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts
index 36678460da..7ef5896b3c 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts
@@ -1,34 +1,45 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-
-import { map, Observable } from 'rxjs';
-import { switchMap, take, tap } from 'rxjs/operators';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import {
+  NgbModal,
+  NgbModalRef,
+} from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
+import {
+  map,
+  Observable,
+} from 'rxjs';
+import {
+  switchMap,
+  take,
+  tap,
+} from 'rxjs/operators';
 
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
 import { Item } from '../../../../../core/shared/item.model';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../core/shared/operators';
-import {
-  SupervisionOrderGroupSelectorComponent
-} from './supervision-order-group-selector/supervision-order-group-selector.component';
-import {
- getWorkspaceItemDeleteRoute
-} from '../../../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
-import { ITEM_EDIT_AUTHORIZATIONS_PATH } from '../../../../../item-page/edit-item-page/edit-item-page.routing-paths';
 import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
 import { SupervisionOrder } from '../../../../../core/supervision-order/models/supervision-order.model';
-import { SupervisionOrderListEntry } from './supervision-order-status/supervision-order-status.component';
+import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
+import { ITEM_EDIT_AUTHORIZATIONS_PATH } from '../../../../../item-page/edit-item-page/edit-item-page.routing-paths';
 import { ConfirmationModalComponent } from '../../../../../shared/confirmation-modal/confirmation-modal.component';
 import { hasValue } from '../../../../../shared/empty.util';
 import { NotificationsService } from '../../../../../shared/notifications/notifications.service';
-import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
-import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
 import { getSearchResultFor } from '../../../../../shared/search/search-result-element-decorator';
+import { getWorkspaceItemDeleteRoute } from '../../../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
+import { SupervisionOrderGroupSelectorComponent } from './supervision-order-group-selector/supervision-order-group-selector.component';
+import { SupervisionOrderListEntry } from './supervision-order-status/supervision-order-status.component';
 
 @Component({
   selector: 'ds-workspace-item-admin-workflow-actions-element',
   styleUrls: ['./workspace-item-admin-workflow-actions.component.scss'],
-  templateUrl: './workspace-item-admin-workflow-actions.component.html'
+  templateUrl: './workspace-item-admin-workflow-actions.component.html',
 })
 /**
  * The component for displaying the actions for a list element for a workspace-item on the admin workflow search page
@@ -94,7 +105,7 @@ export class WorkspaceItemAdminWorkflowActionsComponent implements OnInit {
     );
 
     item$.pipe(
-      map((item: Item) => this.getPoliciesRoute(item))
+      map((item: Item) => this.getPoliciesRoute(item)),
     ).subscribe((route: string[]) => {
       this.resourcePoliciesPageRoute = route;
     });
@@ -124,7 +135,7 @@ export class WorkspaceItemAdminWorkflowActionsComponent implements OnInit {
    */
   deleteSupervisionOrder(supervisionOrderEntry: SupervisionOrderListEntry) {
     const modalRef = this.modalService.open(ConfirmationModalComponent);
-    modalRef.componentInstance.dso = supervisionOrderEntry.group;
+    modalRef.componentInstance.name = this.dsoNameService.getName(supervisionOrderEntry.group);
     modalRef.componentInstance.headerLabel = this.messagePrefix + '.delete-supervision.modal.header';
     modalRef.componentInstance.infoLabel = this.messagePrefix + '.delete-supervision.modal.info';
     modalRef.componentInstance.cancelLabel = this.messagePrefix + '.delete-supervision.modal.cancel';
@@ -143,22 +154,22 @@ export class WorkspaceItemAdminWorkflowActionsComponent implements OnInit {
                   null,
                   this.translateService.get(
                     this.messagePrefix + '.notification.deleted.success',
-                    { name: this.dsoNameService.getName(supervisionOrderEntry.group) }
-                  )
+                    { name: this.dsoNameService.getName(supervisionOrderEntry.group) },
+                  ),
                 );
               } else {
                 this.notificationsService.error(
                   null,
                   this.translateService.get(
                     this.messagePrefix + '.notification.deleted.failure',
-                    { name: this.dsoNameService.getName(supervisionOrderEntry.group) }
-                  )
+                    { name: this.dsoNameService.getName(supervisionOrderEntry.group) },
+                  ),
                 );
               }
-            })
+            }),
           );
         }
-      })
+      }),
     ).subscribe((result: boolean) => {
       if (result) {
         this.delete.emit(this.convertReloadedObject());
@@ -172,7 +183,7 @@ export class WorkspaceItemAdminWorkflowActionsComponent implements OnInit {
   openSupervisionModal() {
     const supervisionModal: NgbModalRef = this.modalService.open(SupervisionOrderGroupSelectorComponent, {
       size: 'lg',
-      backdrop: 'static'
+      backdrop: 'static',
     });
     supervisionModal.componentInstance.itemUUID = this.item.uuid;
     supervisionModal.componentInstance.create.subscribe(() => {
@@ -186,7 +197,7 @@ export class WorkspaceItemAdminWorkflowActionsComponent implements OnInit {
   private convertReloadedObject(): DSpaceObject {
     const constructor = getSearchResultFor((this.wsi as any).constructor);
     return Object.assign(new constructor(), this.wsi, {
-      indexableObject: this.wsi
+      indexableObject: this.wsi,
     });
   }
 }
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html
index 87bae0c261..c5c2a5331a 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html
@@ -1,4 +1,4 @@
-
+
 
 

     

diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.spec.ts
index 8035c53547..732a691102 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.spec.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.spec.ts
@@ -1,34 +1,30 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslateModule } from '@ngx-translate/core';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { RouterTestingModule } from '@angular/router/testing';
-import {
-  WorkflowItemSearchResultAdminWorkflowGridElementComponent
-} from './workflow-item-search-result-admin-workflow-grid-element.component';
-import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
-import { LinkService } from '../../../../../core/cache/builders/link.service';
-import { followLink } from '../../../../../shared/utils/follow-link-config.model';
-import { Item } from '../../../../../core/shared/item.model';
-import {
-  ItemGridElementComponent
-} from '../../../../../shared/object-grid/item-grid-element/item-types/item/item-grid-element.component';
-import {
-  ListableObjectDirective
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
-import {
-  WorkflowItemSearchResult
-} from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
-import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
-import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
-import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
+import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
+
+import { LinkService } from '../../../../../core/cache/builders/link.service';
+import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
+import { Item } from '../../../../../core/shared/item.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
 import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { ItemGridElementComponent } from '../../../../../shared/object-grid/item-grid-element/item-types/item/item-grid-element.component';
+import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { followLink } from '../../../../../shared/utils/follow-link-config.model';
+import { WorkflowItemSearchResultAdminWorkflowGridElementComponent } from './workflow-item-search-result-admin-workflow-grid-element.component';
 
 describe('WorkflowItemSearchResultAdminWorkflowGridElementComponent', () => {
   let component: WorkflowItemSearchResultAdminWorkflowGridElementComponent;
@@ -38,7 +34,7 @@ describe('WorkflowItemSearchResultAdminWorkflowGridElementComponent', () => {
   let itemRD$;
   let linkService;
   let object;
-  let themeService;
+  let themeService: ThemeService;
 
   function init() {
     itemRD$ = createSuccessfulRemoteDataObject$(new Item());
@@ -55,7 +51,11 @@ describe('WorkflowItemSearchResultAdminWorkflowGridElementComponent', () => {
     init();
     TestBed.configureTestingModule(
       {
-        declarations: [WorkflowItemSearchResultAdminWorkflowGridElementComponent, ItemGridElementComponent, ListableObjectDirective],
+        declarations: [
+          WorkflowItemSearchResultAdminWorkflowGridElementComponent,
+          ItemGridElementComponent,
+          DynamicComponentLoaderDirective,
+        ],
         imports: [
           NoopAnimationsModule,
           TranslateModule.forRoot(),
@@ -67,16 +67,16 @@ describe('WorkflowItemSearchResultAdminWorkflowGridElementComponent', () => {
           {
             provide: TruncatableService, useValue: {
               isCollapsed: () => observableOf(true),
-            }
+            },
           },
           { provide: BitstreamDataService, useValue: {} },
         ],
-        schemas: [NO_ERRORS_SCHEMA]
+        schemas: [NO_ERRORS_SCHEMA],
       })
       .overrideComponent(WorkflowItemSearchResultAdminWorkflowGridElementComponent, {
         set: {
-          entryComponents: [ItemGridElementComponent]
-        }
+          entryComponents: [ItemGridElementComponent],
+        },
       })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts
index fd9d21e227..a94a96e9d5 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts
@@ -1,44 +1,53 @@
-import { Component, ComponentFactoryResolver, ElementRef, ViewChild } from '@angular/core';
-import { Item } from '../../../../../core/shared/item.model';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import {
-  getListableObjectComponent,
-  listableObjectComponent
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
-import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
-import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
-import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
-import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
+  Component,
+  ComponentRef,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
-import { followLink } from '../../../../../shared/utils/follow-link-config.model';
+import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
 import { RemoteData } from '../../../../../core/data/remote-data';
+import { Context } from '../../../../../core/shared/context.model';
+import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
+import { Item } from '../../../../../core/shared/item.model';
 import {
   getAllSucceededRemoteData,
-  getRemoteDataPayload
+  getRemoteDataPayload,
 } from '../../../../../core/shared/operators';
-import { take } from 'rxjs/operators';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { hasValue } from '../../../../../shared/empty.util';
+import {
+  getListableObjectComponent,
+  listableObjectComponent,
+} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 
 @listableObjectComponent(WorkflowItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
 @Component({
   selector: 'ds-workflow-item-search-result-admin-workflow-grid-element',
   styleUrls: ['./workflow-item-search-result-admin-workflow-grid-element.component.scss'],
-  templateUrl: './workflow-item-search-result-admin-workflow-grid-element.component.html'
+  templateUrl: './workflow-item-search-result-admin-workflow-grid-element.component.html',
 })
 /**
  * The component for displaying a grid element for an workflow item on the admin workflow search page
  */
-export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent {
+export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent implements OnDestroy, OnInit {
   /**
    * Directive used to render the dynamic component in
    */
-  @ViewChild(ListableObjectDirective, { static: true }) listableObjectDirective: ListableObjectDirective;
+  @ViewChild(DynamicComponentLoaderDirective, { static: true }) dynamicComponentLoaderDirective: DynamicComponentLoaderDirective;
 
   /**
    * The html child that contains the badges html
@@ -55,13 +64,14 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
    */
   public item$: Observable;
 
+  protected compRef: ComponentRef;
+
   constructor(
     public dsoNameService: DSONameService,
-    private componentFactoryResolver: ComponentFactoryResolver,
     private linkService: LinkService,
     protected truncatableService: TruncatableService,
     private themeService: ThemeService,
-    protected bitstreamDataService: BitstreamDataService
+    protected bitstreamDataService: BitstreamDataService,
   ) {
     super(dsoNameService, truncatableService, bitstreamDataService);
   }
@@ -75,26 +85,34 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
     this.dso = this.linkService.resolveLink(this.dso, followLink('item'));
     this.item$ = (this.dso.item as Observable>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload());
     this.item$.pipe(take(1)).subscribe((item: Item) => {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent(item));
+      const component: GenericConstructor = this.getComponent(item);
 
-        const viewContainerRef = this.listableObjectDirective.viewContainerRef;
-        viewContainerRef.clear();
+      const viewContainerRef = this.dynamicComponentLoaderDirective.viewContainerRef;
+      viewContainerRef.clear();
 
-        const componentRef = viewContainerRef.createComponent(
-          componentFactory,
-          0,
-          undefined,
-          [
+      this.compRef = viewContainerRef.createComponent(
+        component, {
+          index: 0,
+          injector: undefined,
+          projectableNodes: [
             [this.badges.nativeElement],
-            [this.buttons.nativeElement]
-          ]);
-        (componentRef.instance as any).object = item;
-        (componentRef.instance as any).index = this.index;
-        (componentRef.instance as any).linkType = this.linkType;
-        (componentRef.instance as any).listID = this.listID;
-        componentRef.changeDetectorRef.detectChanges();
-      }
-    );
+            [this.buttons.nativeElement],
+          ],
+        },
+      );
+      this.compRef.setInput('object', item);
+      this.compRef.setInput('index', this.index);
+      this.compRef.setInput('linkType', this.linkType);
+      this.compRef.setInput('listID', this.listID);
+      this.compRef.changeDetectorRef.detectChanges();
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (hasValue(this.compRef)) {
+      this.compRef.destroy();
+      this.compRef = undefined;
+    }
   }
 
   /**
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.html
index 767ad79786..f78a0a3ca4 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.html
@@ -1,4 +1,4 @@
-
+
 
 

     

diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.spec.ts
index b9e752c104..b9781fb4f9 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.spec.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.spec.ts
@@ -1,41 +1,36 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-import { of as observableOf } from 'rxjs';
+import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
 
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import {
-  WorkspaceItemSearchResultAdminWorkflowGridElementComponent
-} from './workspace-item-search-result-admin-workflow-grid-element.component';
-import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
-import { followLink } from '../../../../../shared/utils/follow-link-config.model';
-import { Item } from '../../../../../core/shared/item.model';
-import {
-  ItemGridElementComponent
-} from '../../../../../shared/object-grid/item-grid-element/item-types/item/item-grid-element.component';
-import {
-  ListableObjectDirective
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
-import {
-  WorkflowItemSearchResult
-} from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
 import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
-import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
+import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
+import { Item } from '../../../../../core/shared/item.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
+import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
 import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
 import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
-import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { ItemGridElementComponent } from '../../../../../shared/object-grid/item-grid-element/item-types/item/item-grid-element.component';
+import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
 import {
   supervisionOrderPaginatedListRD,
-  supervisionOrderPaginatedListRD$
+  supervisionOrderPaginatedListRD$,
 } from '../../../../../shared/testing/supervision-order.mock';
-import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
-import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { followLink } from '../../../../../shared/utils/follow-link-config.model';
+import { WorkspaceItemSearchResultAdminWorkflowGridElementComponent } from './workspace-item-search-result-admin-workflow-grid-element.component';
 
 describe('WorkspaceItemSearchResultAdminWorkflowGridElementComponent', () => {
   let component: WorkspaceItemSearchResultAdminWorkflowGridElementComponent;
@@ -45,7 +40,7 @@ describe('WorkspaceItemSearchResultAdminWorkflowGridElementComponent', () => {
   let itemRD$;
   let linkService;
   let object;
-  let themeService;
+  let themeService: ThemeService;
   let supervisionOrderDataService;
 
   function init() {
@@ -67,7 +62,11 @@ describe('WorkspaceItemSearchResultAdminWorkflowGridElementComponent', () => {
     init();
     TestBed.configureTestingModule(
       {
-        declarations: [WorkspaceItemSearchResultAdminWorkflowGridElementComponent, ItemGridElementComponent, ListableObjectDirective],
+        declarations: [
+          WorkspaceItemSearchResultAdminWorkflowGridElementComponent,
+          ItemGridElementComponent,
+          DynamicComponentLoaderDirective,
+        ],
         imports: [
           NoopAnimationsModule,
           TranslateModule.forRoot(),
@@ -79,17 +78,17 @@ describe('WorkspaceItemSearchResultAdminWorkflowGridElementComponent', () => {
           {
             provide: TruncatableService, useValue: {
               isCollapsed: () => observableOf(true),
-            }
+            },
           },
           { provide: BitstreamDataService, useValue: {} },
-          { provide: SupervisionOrderDataService, useValue: supervisionOrderDataService }
+          { provide: SupervisionOrderDataService, useValue: supervisionOrderDataService },
         ],
-        schemas: [NO_ERRORS_SCHEMA]
+        schemas: [NO_ERRORS_SCHEMA],
       })
       .overrideComponent(WorkspaceItemSearchResultAdminWorkflowGridElementComponent, {
         set: {
-          entryComponents: [ItemGridElementComponent]
-        }
+          entryComponents: [ItemGridElementComponent],
+        },
       })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.ts
index d6f39e79fe..a25b8c6f00 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.ts
@@ -1,53 +1,62 @@
-import { Component, ComponentFactoryResolver, ElementRef, ViewChild, OnInit } from '@angular/core';
+import {
+  Component,
+  ComponentRef,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {
+  BehaviorSubject,
+  Observable,
+} from 'rxjs';
+import {
+  map,
+  mergeMap,
+  take,
+  tap,
+} from 'rxjs/operators';
 
-import { BehaviorSubject, Observable } from 'rxjs';
-import { map, mergeMap, take, tap } from 'rxjs/operators';
-
-import { Item } from '../../../../../core/shared/item.model';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import {
-  getListableObjectComponent,
-  listableObjectComponent
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
-import {
-  SearchResultGridElementComponent
-} from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
-import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
-import {
-  ListableObjectDirective
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
-import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
-import { followLink } from '../../../../../shared/utils/follow-link-config.model';
+import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
+import { PaginatedList } from '../../../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../../../core/data/remote-data';
+import { Context } from '../../../../../core/shared/context.model';
+import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
+import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
+import { Item } from '../../../../../core/shared/item.model';
 import {
   getAllSucceededRemoteData,
   getFirstCompletedRemoteData,
-  getRemoteDataPayload
+  getRemoteDataPayload,
 } from '../../../../../core/shared/operators';
-import {
-  WorkspaceItemSearchResult
-} from '../../../../../shared/object-collection/shared/workspace-item-search-result.model';
-import { ThemeService } from '../../../../../shared/theme-support/theme.service';
-import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
 import { SupervisionOrder } from '../../../../../core/supervision-order/models/supervision-order.model';
-import { PaginatedList } from '../../../../../core/data/paginated-list.model';
 import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { hasValue } from '../../../../../shared/empty.util';
+import {
+  getListableObjectComponent,
+  listableObjectComponent,
+} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { WorkspaceItemSearchResult } from '../../../../../shared/object-collection/shared/workspace-item-search-result.model';
+import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 
 @listableObjectComponent(WorkspaceItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
 @Component({
   selector: 'ds-workflow-item-search-result-admin-workflow-grid-element',
   styleUrls: ['./workspace-item-search-result-admin-workflow-grid-element.component.scss'],
-  templateUrl: './workspace-item-search-result-admin-workflow-grid-element.component.html'
+  templateUrl: './workspace-item-search-result-admin-workflow-grid-element.component.html',
 })
 /**
  * The component for displaying a grid element for an workflow item on the admin workflow search page
  */
-export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent implements OnInit {
+export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent implements OnDestroy, OnInit {
 
   /**
    * The item linked to the workspace item
@@ -67,7 +76,7 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
   /**
    * Directive used to render the dynamic component in
    */
-  @ViewChild(ListableObjectDirective, { static: true }) listableObjectDirective: ListableObjectDirective;
+  @ViewChild(DynamicComponentLoaderDirective, { static: true }) dynamicComponentLoaderDirective: DynamicComponentLoaderDirective;
 
   /**
    * The html child that contains the badges html
@@ -79,9 +88,13 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
    */
   @ViewChild('buttons', { static: true }) buttons: ElementRef;
 
+  /**
+   * The reference to the dynamic component
+   */
+  protected compRef: ComponentRef;
+
   constructor(
     public dsoNameService: DSONameService,
-    private componentFactoryResolver: ComponentFactoryResolver,
     private linkService: LinkService,
     protected truncatableService: TruncatableService,
     private themeService: ThemeService,
@@ -100,36 +113,43 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
     this.dso = this.linkService.resolveLink(this.dso, followLink('item'));
     this.item$ = (this.dso.item as Observable>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload());
     this.item$.pipe(take(1)).subscribe((item: Item) => {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent(item));
+      const component: GenericConstructor = this.getComponent(item);
 
-        const viewContainerRef = this.listableObjectDirective.viewContainerRef;
-        viewContainerRef.clear();
+      const viewContainerRef = this.dynamicComponentLoaderDirective.viewContainerRef;
+      viewContainerRef.clear();
 
-        const componentRef = viewContainerRef.createComponent(
-          componentFactory,
-          0,
-          undefined,
-          [
+      this.compRef = viewContainerRef.createComponent(
+        component, {
+          index: 0,
+          projectableNodes: [
             [this.badges.nativeElement],
-            [this.buttons.nativeElement]
-          ]);
-        (componentRef.instance as any).object = item;
-        (componentRef.instance as any).index = this.index;
-        (componentRef.instance as any).linkType = this.linkType;
-        (componentRef.instance as any).listID = this.listID;
-        componentRef.changeDetectorRef.detectChanges();
-      }
+            [this.buttons.nativeElement],
+          ],
+        });
+      this.compRef.setInput('object', item);
+      this.compRef.setInput('index', this.index);
+      this.compRef.setInput('linkType', this.linkType);
+      this.compRef.setInput('listID', this.listID);
+      this.compRef.changeDetectorRef.detectChanges();
+    },
     );
 
     this.item$.pipe(
       take(1),
       tap((item: Item) => this.itemId = item.id),
-      mergeMap((item: Item) => this.retrieveSupervisorOrders(item.id))
+      mergeMap((item: Item) => this.retrieveSupervisorOrders(item.id)),
     ).subscribe((supervisionOrderList: SupervisionOrder[]) => {
       this.supervisionOrder$.next(supervisionOrderList);
     });
   }
 
+  ngOnDestroy(): void {
+    if (hasValue(this.compRef)) {
+      this.compRef.destroy();
+      this.compRef = undefined;
+    }
+  }
+
   /**
    * Fetch the component depending on the item's entity type, view mode and context
    * @returns {GenericConstructor}
@@ -147,10 +167,10 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
    */
   private retrieveSupervisorOrders(itemId): Observable {
     return this.supervisionOrderDataService.searchByItem(
-      itemId, false, true, followLink('group')
+      itemId, false, true, followLink('group'),
     ).pipe(
       getFirstCompletedRemoteData(),
-      map((soRD: RemoteData>) => soRD.hasSucceeded && !soRD.hasNoContent ? soRD.payload.page : [])
+      map((soRD: RemoteData>) => soRD.hasSucceeded && !soRD.hasNoContent ? soRD.payload.page : []),
     );
   }
 
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.spec.ts
index ab5d8b79a8..5b79a2ff8c 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.spec.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.spec.ts
@@ -1,29 +1,29 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslateModule } from '@ngx-translate/core';
-import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { RouterTestingModule } from '@angular/router/testing';
-import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
-import {
-  WorkflowItemSearchResultAdminWorkflowListElementComponent
-} from './workflow-item-search-result-admin-workflow-list-element.component';
-import { LinkService } from '../../../../../core/cache/builders/link.service';
-import { followLink } from '../../../../../shared/utils/follow-link-config.model';
-import { Item } from '../../../../../core/shared/item.model';
-import {
-  WorkflowItemSearchResult
-} from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
-import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
-import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
-import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { APP_CONFIG } from '../../../../../../config/app-config.interface';
 import { environment } from '../../../../../../environments/environment';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { LinkService } from '../../../../../core/cache/builders/link.service';
+import { Item } from '../../../../../core/shared/item.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
+import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { followLink } from '../../../../../shared/utils/follow-link-config.model';
+import { WorkflowItemSearchResultAdminWorkflowListElementComponent } from './workflow-item-search-result-admin-workflow-list-element.component';
 
 describe('WorkflowItemSearchResultAdminWorkflowListElementComponent', () => {
   let component: WorkflowItemSearchResultAdminWorkflowListElementComponent;
@@ -58,9 +58,9 @@ describe('WorkflowItemSearchResultAdminWorkflowListElementComponent', () => {
           { provide: TruncatableService, useValue: mockTruncatableService },
           { provide: LinkService, useValue: linkService },
           { provide: DSONameService, useClass: DSONameServiceMock },
-          { provide: APP_CONFIG, useValue: environment }
+          { provide: APP_CONFIG, useValue: environment },
         ],
-        schemas: [NO_ERRORS_SCHEMA]
+        schemas: [NO_ERRORS_SCHEMA],
       })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.ts
index d0e773d696..247ba9f354 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.ts
@@ -1,31 +1,36 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import {
-  listableObjectComponent
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
-import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
+  Component,
+  Inject,
+  OnInit,
+} from '@angular/core';
 import { Observable } from 'rxjs';
+
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../../../../config/app-config.interface';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
-import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 import { RemoteData } from '../../../../../core/data/remote-data';
-import { getAllSucceededRemoteData, getRemoteDataPayload } from '../../../../../core/shared/operators';
+import { Context } from '../../../../../core/shared/context.model';
 import { Item } from '../../../../../core/shared/item.model';
 import {
-  SearchResultListElementComponent
-} from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
+  getAllSucceededRemoteData,
+  getRemoteDataPayload,
+} from '../../../../../core/shared/operators';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
+import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { SearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import {
-  WorkflowItemSearchResult
-} from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
-import { APP_CONFIG, AppConfig } from '../../../../../../config/app-config.interface';
+import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 
 @listableObjectComponent(WorkflowItemSearchResult, ViewMode.ListElement, Context.AdminWorkflowSearch)
 @Component({
   selector: 'ds-workflow-item-search-result-admin-workflow-list-element',
   styleUrls: ['./workflow-item-search-result-admin-workflow-list-element.component.scss'],
-  templateUrl: './workflow-item-search-result-admin-workflow-list-element.component.html'
+  templateUrl: './workflow-item-search-result-admin-workflow-list-element.component.html',
 })
 /**
  * The component for displaying a list element for a workflow item on the admin workflow search page
@@ -40,7 +45,7 @@ export class WorkflowItemSearchResultAdminWorkflowListElementComponent extends S
   constructor(private linkService: LinkService,
               protected truncatableService: TruncatableService,
               public dsoNameService: DSONameService,
-              @Inject(APP_CONFIG) protected appConfig: AppConfig
+              @Inject(APP_CONFIG) protected appConfig: AppConfig,
   ) {
     super(truncatableService, dsoNameService, appConfig);
   }
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.spec.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.spec.ts
index 19eefc9c48..e196ab30d3 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.spec.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.spec.ts
@@ -1,36 +1,35 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
+import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
-import {
-  WorkspaceItemSearchResultAdminWorkflowListElementComponent
-} from './workspace-item-search-result-admin-workflow-list-element.component';
-import { LinkService } from '../../../../../core/cache/builders/link.service';
-import { followLink } from '../../../../../shared/utils/follow-link-config.model';
-import { Item } from '../../../../../core/shared/item.model';
-import {
-  WorkflowItemSearchResult
-} from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
-import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
-import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
-import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 import { APP_CONFIG } from '../../../../../../config/app-config.interface';
 import { environment } from '../../../../../../environments/environment';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { LinkService } from '../../../../../core/cache/builders/link.service';
+import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
+import { Item } from '../../../../../core/shared/item.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
 import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
+import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
+import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
+import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
 import {
   supervisionOrderPaginatedListRD,
-  supervisionOrderPaginatedListRD$
+  supervisionOrderPaginatedListRD$,
 } from '../../../../../shared/testing/supervision-order.mock';
-import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { followLink } from '../../../../../shared/utils/follow-link-config.model';
+import { WorkspaceItemSearchResultAdminWorkflowListElementComponent } from './workspace-item-search-result-admin-workflow-list-element.component';
 
 describe('WorkspaceItemSearchResultAdminWorkflowListElementComponent', () => {
   let component: WorkspaceItemSearchResultAdminWorkflowListElementComponent;
@@ -71,9 +70,9 @@ describe('WorkspaceItemSearchResultAdminWorkflowListElementComponent', () => {
           { provide: LinkService, useValue: linkService },
           { provide: DSONameService, useClass: DSONameServiceMock },
           { provide: SupervisionOrderDataService, useValue: supervisionOrderDataService },
-          { provide: APP_CONFIG, useValue: environment }
+          { provide: APP_CONFIG, useValue: environment },
         ],
-        schemas: [NO_ERRORS_SCHEMA]
+        schemas: [NO_ERRORS_SCHEMA],
       })
       .compileComponents();
   }));
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.ts
index 3d6d1c8e44..aa3c601da6 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.ts
@@ -1,42 +1,50 @@
-import { Component, Inject, OnInit } from '@angular/core';
-
-import { BehaviorSubject, Observable } from 'rxjs';
-import { map, mergeMap, take, tap } from 'rxjs/operators';
-
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import {
-  listableObjectComponent
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { Context } from '../../../../../core/shared/context.model';
-import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
+  Component,
+  Inject,
+  OnInit,
+} from '@angular/core';
+import {
+  BehaviorSubject,
+  Observable,
+} from 'rxjs';
+import {
+  map,
+  mergeMap,
+  take,
+  tap,
+} from 'rxjs/operators';
+
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../../../../config/app-config.interface';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
-import { followLink } from '../../../../../shared/utils/follow-link-config.model';
+import { PaginatedList } from '../../../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../../../core/data/remote-data';
+import { Context } from '../../../../../core/shared/context.model';
+import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
+import { Item } from '../../../../../core/shared/item.model';
 import {
   getAllSucceededRemoteData,
   getFirstCompletedRemoteData,
-  getRemoteDataPayload
+  getRemoteDataPayload,
 } from '../../../../../core/shared/operators';
-import { Item } from '../../../../../core/shared/item.model';
-import {
-  SearchResultListElementComponent
-} from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
-import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
-import { APP_CONFIG, AppConfig } from '../../../../../../config/app-config.interface';
-import {
-  WorkspaceItemSearchResult
-} from '../../../../../shared/object-collection/shared/workspace-item-search-result.model';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
 import { SupervisionOrder } from '../../../../../core/supervision-order/models/supervision-order.model';
 import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
-import { PaginatedList } from '../../../../../core/data/paginated-list.model';
-import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
+import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { WorkspaceItemSearchResult } from '../../../../../shared/object-collection/shared/workspace-item-search-result.model';
+import { SearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
+import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 
 @listableObjectComponent(WorkspaceItemSearchResult, ViewMode.ListElement, Context.AdminWorkflowSearch)
 @Component({
   selector: 'ds-workflow-item-search-result-admin-workflow-list-element',
   styleUrls: ['./workspace-item-search-result-admin-workflow-list-element.component.scss'],
-  templateUrl: './workspace-item-search-result-admin-workflow-list-element.component.html'
+  templateUrl: './workspace-item-search-result-admin-workflow-list-element.component.html',
 })
 /**
  * The component for displaying a list element for a workflow item on the admin workflow search page
@@ -62,7 +70,7 @@ export class WorkspaceItemSearchResultAdminWorkflowListElementComponent extends
               public dsoNameService: DSONameService,
               protected supervisionOrderDataService: SupervisionOrderDataService,
               protected truncatableService: TruncatableService,
-              @Inject(APP_CONFIG) protected appConfig: AppConfig
+              @Inject(APP_CONFIG) protected appConfig: AppConfig,
   ) {
     super(truncatableService, dsoNameService, appConfig);
   }
@@ -78,7 +86,7 @@ export class WorkspaceItemSearchResultAdminWorkflowListElementComponent extends
     this.item$.pipe(
       take(1),
       tap((item: Item) => this.itemId = item.id),
-      mergeMap((item: Item) => this.retrieveSupervisorOrders(item.id))
+      mergeMap((item: Item) => this.retrieveSupervisorOrders(item.id)),
     ).subscribe((supervisionOrderList: SupervisionOrder[]) => {
       this.supervisionOrder$.next(supervisionOrderList);
     });
@@ -92,10 +100,10 @@ export class WorkspaceItemSearchResultAdminWorkflowListElementComponent extends
    */
   private retrieveSupervisorOrders(itemId): Observable {
     return this.supervisionOrderDataService.searchByItem(
-      itemId, false, true, followLink('group')
+      itemId, false, true, followLink('group'),
     ).pipe(
       getFirstCompletedRemoteData(),
-      map((soRD: RemoteData>) => soRD.hasSucceeded && !soRD.hasNoContent ? soRD.payload.page : [])
+      map((soRD: RemoteData>) => soRD.hasSucceeded && !soRD.hasNoContent ? soRD.payload.page : []),
     );
   }
 
diff --git a/src/app/admin/admin-workflow-page/admin-workflow.module.ts b/src/app/admin/admin-workflow-page/admin-workflow.module.ts
index 21990c1ea9..97041ee64d 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow.module.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow.module.ts
@@ -1,45 +1,29 @@
 import { NgModule } from '@angular/core';
 
-import { SharedModule } from '../../shared/shared.module';
-import {
-  WorkflowItemSearchResultAdminWorkflowGridElementComponent
-} from './admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component';
-import {
-  WorkflowItemAdminWorkflowActionsComponent
-} from './admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component';
-import {
-  WorkflowItemSearchResultAdminWorkflowListElementComponent
-} from './admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component';
-import { AdminWorkflowPageComponent } from './admin-workflow-page.component';
 import { SearchModule } from '../../shared/search/search.module';
-import {
-  WorkspaceItemAdminWorkflowActionsComponent
-} from './admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component';
-import {
-  WorkspaceItemSearchResultAdminWorkflowListElementComponent
-} from './admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component';
-import {
-  WorkspaceItemSearchResultAdminWorkflowGridElementComponent
-} from './admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component';
-import {
-  SupervisionOrderGroupSelectorComponent
-} from './admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component';
-import {
-  SupervisionOrderStatusComponent
-} from './admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component';
+import { SharedModule } from '../../shared/shared.module';
+import { AdminWorkflowPageComponent } from './admin-workflow-page.component';
+import { WorkflowItemAdminWorkflowActionsComponent } from './admin-workflow-search-results/actions/workflow-item/workflow-item-admin-workflow-actions.component';
+import { SupervisionOrderGroupSelectorComponent } from './admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component';
+import { SupervisionOrderStatusComponent } from './admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component';
+import { WorkspaceItemAdminWorkflowActionsComponent } from './admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component';
+import { WorkflowItemSearchResultAdminWorkflowGridElementComponent } from './admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component';
+import { WorkspaceItemSearchResultAdminWorkflowGridElementComponent } from './admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component';
+import { WorkflowItemSearchResultAdminWorkflowListElementComponent } from './admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component';
+import { WorkspaceItemSearchResultAdminWorkflowListElementComponent } from './admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   WorkflowItemSearchResultAdminWorkflowListElementComponent,
   WorkflowItemSearchResultAdminWorkflowGridElementComponent,
   WorkspaceItemSearchResultAdminWorkflowListElementComponent,
-  WorkspaceItemSearchResultAdminWorkflowGridElementComponent
+  WorkspaceItemSearchResultAdminWorkflowGridElementComponent,
 ];
 
 @NgModule({
   imports: [
     SearchModule,
-    SharedModule.withEntryComponents()
+    SharedModule.withEntryComponents(),
   ],
   declarations: [
     AdminWorkflowPageComponent,
@@ -47,11 +31,11 @@ const ENTRY_COMPONENTS = [
     SupervisionOrderStatusComponent,
     WorkflowItemAdminWorkflowActionsComponent,
     WorkspaceItemAdminWorkflowActionsComponent,
-    ...ENTRY_COMPONENTS
+    ...ENTRY_COMPONENTS,
   ],
   exports: [
-    AdminWorkflowPageComponent
-  ]
+    AdminWorkflowPageComponent,
+  ],
 })
 export class AdminWorkflowModuleModule {
   /**
@@ -61,7 +45,7 @@ export class AdminWorkflowModuleModule {
   static withEntryComponents() {
     return {
       ngModule: SharedModule,
-      providers: ENTRY_COMPONENTS.map((component) => ({provide: component}))
+      providers: ENTRY_COMPONENTS.map((component) => ({ provide: component })),
     };
   }
 }
diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 3dc0036854..d75d4457f7 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -1,17 +1,19 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared/shared.module';
+import { UiSwitchModule } from 'ngx-ui-switch';
+
 import { AccessControlModule } from '../access-control/access-control.module';
+import { SharedModule } from '../shared/shared.module';
+import { UploadModule } from '../shared/upload/upload.module';
+import { AdminCurationTasksComponent } from './admin-curation-tasks/admin-curation-tasks.component';
+import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
 import { MetadataImportPageComponent } from './admin-import-metadata-page/metadata-import-page.component';
 import { AdminRegistriesModule } from './admin-registries/admin-registries.module';
+import { AdminReportsModule } from './admin-reports/admin-reports.module';
 import { AdminRoutingModule } from './admin-routing.module';
-import { AdminCurationTasksComponent } from './admin-curation-tasks/admin-curation-tasks.component';
-import { AdminWorkflowModuleModule } from './admin-workflow-page/admin-workflow.module';
 import { AdminSearchModule } from './admin-search-page/admin-search.module';
 import { AdminSidebarSectionComponent } from './admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
 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 { UiSwitchModule } from 'ngx-ui-switch';
-import { UploadModule } from '../shared/upload/upload.module';
+import { AdminWorkflowModuleModule } from './admin-workflow-page/admin-workflow.module';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -24,6 +26,7 @@ const ENTRY_COMPONENTS = [
   imports: [
     AdminRoutingModule,
     AdminRegistriesModule,
+    AdminReportsModule,
     AccessControlModule,
     AdminSearchModule.withEntryComponents(),
     AdminWorkflowModuleModule.withEntryComponents(),
@@ -34,8 +37,8 @@ const ENTRY_COMPONENTS = [
   declarations: [
     AdminCurationTasksComponent,
     MetadataImportPageComponent,
-    BatchImportPageComponent
-  ]
+    BatchImportPageComponent,
+  ],
 })
 export class AdminModule {
   /**
@@ -45,7 +48,7 @@ export class AdminModule {
   static withEntryComponents() {
     return {
       ngModule: AdminModule,
-      providers: ENTRY_COMPONENTS.map((component) => ({provide: component}))
+      providers: ENTRY_COMPONENTS.map((component) => ({ provide: component })),
     };
   }
 }
diff --git a/src/app/app-routing-paths.ts b/src/app/app-routing-paths.ts
index fe2837c6e3..9b95ee0d0a 100644
--- a/src/app/app-routing-paths.ts
+++ b/src/app/app-routing-paths.ts
@@ -1,12 +1,15 @@
-import { DSpaceObject } from './core/shared/dspace-object.model';
-import { Community } from './core/shared/community.model';
-import { Collection } from './core/shared/collection.model';
-import { Item } from './core/shared/item.model';
-import { getCommunityPageRoute } from './community-page/community-page-routing-paths';
 import { getCollectionPageRoute } from './collection-page/collection-page-routing-paths';
-import { getItemModuleRoute, getItemPageRoute } from './item-page/item-page-routing-paths';
-import { hasValue } from './shared/empty.util';
+import { getCommunityPageRoute } from './community-page/community-page-routing-paths';
+import { Collection } from './core/shared/collection.model';
+import { Community } from './core/shared/community.model';
+import { DSpaceObject } from './core/shared/dspace-object.model';
+import { Item } from './core/shared/item.model';
 import { URLCombiner } from './core/url-combiner/url-combiner';
+import {
+  getItemModuleRoute,
+  getItemPageRoute,
+} from './item-page/item-page-routing-paths';
+import { hasValue } from './shared/empty.util';
 
 export const BITSTREAM_MODULE_PATH = 'bitstreams';
 
@@ -27,10 +30,11 @@ export function getBitstreamRequestACopyRoute(item, bitstream): { routerLink: st
   return {
     routerLink: url,
     queryParams: {
-      bitstream: bitstream.uuid
-    }
+      bitstream: bitstream.uuid,
+    },
   };
 }
+export const COAR_NOTIFY_SUPPORT = 'coar-notify-support';
 
 export const HOME_PAGE_PATH = 'admin';
 
@@ -132,3 +136,10 @@ export const SUBSCRIPTIONS_MODULE_PATH = 'subscriptions';
 export function getSubscriptionsModuleRoute() {
   return `/${SUBSCRIPTIONS_MODULE_PATH}`;
 }
+
+export const EDIT_ITEM_PATH = 'edit-items';
+export function getEditItemPageRoute() {
+  return `/${EDIT_ITEM_PATH}`;
+}
+export const CORRECTION_TYPE_PATH = 'corrections';
+
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index deb68f1ea9..84b6fa9275 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, NoPreloading } from '@angular/router';
-import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';
-
-import { AuthenticatedGuard } from './core/auth/authenticated.guard';
 import {
-  SiteAdministratorGuard
-} from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
+  NoPreloading,
+  RouterModule,
+} from '@angular/router';
+
+import { NOTIFICATIONS_MODULE_PATH } from './admin/admin-routing-paths';
 import {
   ACCESS_CONTROL_MODULE_PATH,
   ADMIN_MODULE_PATH,
@@ -24,22 +23,22 @@ import {
 } from './app-routing-paths';
 import { COLLECTION_MODULE_PATH } from './collection-page/collection-page-routing-paths';
 import { COMMUNITY_MODULE_PATH } from './community-page/community-page-routing-paths';
-import { ITEM_MODULE_PATH } from './item-page/item-page-routing-paths';
-import { PROCESS_MODULE_PATH } from './process-page/process-page-routing.paths';
-import { ReloadGuard } from './core/reload/reload.guard';
-import { EndUserAgreementCurrentUserGuard } from './core/end-user-agreement/end-user-agreement-current-user.guard';
+import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';
+import { AuthenticatedGuard } from './core/auth/authenticated.guard';
+import { GroupAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
 import { SiteRegisterGuard } from './core/data/feature-authorization/feature-authorization-guard/site-register.guard';
-import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
-import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
-import {
-  GroupAdministratorGuard
-} from './core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
-import {
-  ThemedPageInternalServerErrorComponent
-} from './page-internal-server-error/themed-page-internal-server-error.component';
+import { EndUserAgreementCurrentUserGuard } from './core/end-user-agreement/end-user-agreement-current-user.guard';
+import { ReloadGuard } from './core/reload/reload.guard';
+import { ForgotPasswordCheckGuard } from './core/rest-property/forgot-password-check-guard.guard';
 import { ServerCheckGuard } from './core/server-check/server-check.guard';
+import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
+import { ITEM_MODULE_PATH } from './item-page/item-page-routing-paths';
 import { MenuResolver } from './menu.resolver';
 import { ThemedPageErrorComponent } from './page-error/themed-page-error.component';
+import { ThemedPageInternalServerErrorComponent } from './page-internal-server-error/themed-page-internal-server-error.component';
+import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
+import { PROCESS_MODULE_PATH } from './process-page/process-page-routing.paths';
+import { SUGGESTION_MODULE_PATH } from './suggestions-page/suggestions-page-routing-paths';
 
 @NgModule({
   imports: [
@@ -57,163 +56,180 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone
             path: 'reload/:rnd',
             component: ThemedPageNotFoundComponent,
             pathMatch: 'full',
-            canActivate: [ReloadGuard]
+            canActivate: [ReloadGuard],
           },
           {
             path: 'home',
             loadChildren: () => import('./home-page/home-page.module')
               .then((m) => m.HomePageModule),
             data: { showBreadcrumbs: false },
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'community-list',
             loadChildren: () => import('./community-list-page/community-list-page.module')
               .then((m) => m.CommunityListPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'id',
             loadChildren: () => import('./lookup-by-id/lookup-by-id.module')
               .then((m) => m.LookupIdModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'handle',
             loadChildren: () => import('./lookup-by-id/lookup-by-id.module')
               .then((m) => m.LookupIdModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: REGISTER_PATH,
             loadChildren: () => import('./register-page/register-page.module')
               .then((m) => m.RegisterPageModule),
-            canActivate: [SiteRegisterGuard]
+            canActivate: [SiteRegisterGuard],
           },
           {
             path: FORGOT_PASSWORD_PATH,
             loadChildren: () => import('./forgot-password/forgot-password.module')
               .then((m) => m.ForgotPasswordModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard, ForgotPasswordCheckGuard],
           },
           {
             path: COMMUNITY_MODULE_PATH,
             loadChildren: () => import('./community-page/community-page.module')
               .then((m) => m.CommunityPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: COLLECTION_MODULE_PATH,
             loadChildren: () => import('./collection-page/collection-page.module')
               .then((m) => m.CollectionPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: ITEM_MODULE_PATH,
             loadChildren: () => import('./item-page/item-page.module')
               .then((m) => m.ItemPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'entities/:entity-type',
             loadChildren: () => import('./item-page/item-page.module')
               .then((m) => m.ItemPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: LEGACY_BITSTREAM_MODULE_PATH,
             loadChildren: () => import('./bitstream-page/bitstream-page.module')
               .then((m) => m.BitstreamPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: BITSTREAM_MODULE_PATH,
             loadChildren: () => import('./bitstream-page/bitstream-page.module')
               .then((m) => m.BitstreamPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'mydspace',
             loadChildren: () => import('./my-dspace-page/my-dspace-page.module')
               .then((m) => m.MyDSpacePageModule),
-            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard]
+            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'search',
             loadChildren: () => import('./search-page/search-page-routing.module')
               .then((m) => m.SearchPageRoutingModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'browse',
             loadChildren: () => import('./browse-by/browse-by-page.module')
               .then((m) => m.BrowseByPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: ADMIN_MODULE_PATH,
             loadChildren: () => import('./admin/admin.module')
               .then((m) => m.AdminModule),
-            canActivate: [SiteAdministratorGuard, EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
+          },
+          {
+            path: NOTIFICATIONS_MODULE_PATH,
+            loadChildren: () => import('./admin/admin-notifications/admin-notifications.module')
+              .then((m) => m.AdminNotificationsModule),
+            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard],
+          },
+          {
+            path: NOTIFICATIONS_MODULE_PATH,
+            loadChildren: () => import('./quality-assurance-notifications-pages/notifications-pages.module')
+              .then((m) => m.NotificationsPageModule),
+            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'login',
             loadChildren: () => import('./login-page/login-page.module')
-              .then((m) => m.LoginPageModule)
+              .then((m) => m.LoginPageModule),
           },
           {
             path: 'logout',
             loadChildren: () => import('./logout-page/logout-page.module')
-              .then((m) => m.LogoutPageModule)
+              .then((m) => m.LogoutPageModule),
           },
           {
             path: 'submit',
             loadChildren: () => import('./submit-page/submit-page.module')
               .then((m) => m.SubmitPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'import-external',
             loadChildren: () => import('./import-external-page/import-external-page.module')
               .then((m) => m.ImportExternalPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: 'workspaceitems',
             loadChildren: () => import('./workspaceitems-edit-page/workspaceitems-edit-page.module')
               .then((m) => m.WorkspaceitemsEditPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: WORKFLOW_ITEM_MODULE_PATH,
             loadChildren: () => import('./workflowitems-edit-page/workflowitems-edit-page.module')
               .then((m) => m.WorkflowItemsEditPageModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: PROFILE_MODULE_PATH,
             loadChildren: () => import('./profile-page/profile-page.module')
               .then((m) => m.ProfilePageModule),
-            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard]
+            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard],
           },
           {
             path: PROCESS_MODULE_PATH,
             loadChildren: () => import('./process-page/process-page.module')
               .then((m) => m.ProcessPageModule),
-            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard]
+            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard],
+          },
+          { path: SUGGESTION_MODULE_PATH,
+            loadChildren: () => import('./suggestions-page/suggestions-page.module')
+              .then((m) => m.SuggestionsPageModule),
+            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard],
           },
           {
             path: INFO_MODULE_PATH,
-            loadChildren: () => import('./info/info.module').then((m) => m.InfoModule)
+            loadChildren: () => import('./info/info.module').then((m) => m.InfoModule),
           },
           {
             path: REQUEST_COPY_MODULE_PATH,
             loadChildren: () => import('./request-copy/request-copy.module').then((m) => m.RequestCopyModule),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard],
           },
           {
             path: FORBIDDEN_PATH,
-            component: ThemedForbiddenComponent
+            component: ThemedForbiddenComponent,
           },
           {
             path: 'statistics',
@@ -224,7 +240,7 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone
           {
             path: HEALTH_PAGE_PATH,
             loadChildren: () => import('./health-page/health-page.module')
-              .then((m) => m.HealthPageModule)
+              .then((m) => m.HealthPageModule),
           },
           {
             path: ACCESS_CONTROL_MODULE_PATH,
@@ -235,11 +251,11 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone
             path: 'subscriptions',
             loadChildren: () => import('./subscriptions-page/subscriptions-page-routing.module')
               .then((m) => m.SubscriptionsPageRoutingModule),
-            canActivate: [AuthenticatedGuard]
+            canActivate: [AuthenticatedGuard],
           },
           { path: '**', pathMatch: 'full', component: ThemedPageNotFoundComponent },
-        ]
-      }
+        ],
+      },
     ], {
       // enableTracing: true,
       useHash: false,
@@ -248,7 +264,7 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone
       initialNavigation: 'enabledBlocking',
       preloadingStrategy: NoPreloading,
       onSameUrlNavigation: 'reload',
-})
+    }),
   ],
   exports: [RouterModule],
 })
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index e921c67ace..70694a1fbb 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,52 +1,68 @@
-import { Store, StoreModule } from '@ngrx/store';
-import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-
-// Load the implementations that should be tested
-import { AppComponent } from './app.component';
-import { HostWindowState } from './shared/search/host-window.reducer';
-import { HostWindowResizeAction } from './shared/host-window.actions';
-import { MetadataService } from './core/metadata/metadata.service';
-
-import { NativeWindowRef, NativeWindowService } from './core/services/window.service';
-import { TranslateLoaderMock } from './shared/mocks/translate-loader.mock';
-import { MetadataServiceMock } from './shared/mocks/metadata-service.mock';
-import { AngularticsProviderMock } from './shared/mocks/angulartics-provider.service.mock';
-import { AuthServiceMock } from './shared/mocks/auth.service.mock';
-import { AuthService } from './core/auth/auth.service';
-import { MenuService } from './shared/menu/menu.service';
-import { CSSVariableService } from './shared/sass-helper/css-variable.service';
-import { CSSVariableServiceStub } from './shared/testing/css-variable-service.stub';
-import { MenuServiceStub } from './shared/testing/menu-service.stub';
-import { HostWindowService } from './shared/host-window.service';
-import { HostWindowServiceStub } from './shared/testing/host-window-service.stub';
-import { RouteService } from './core/services/route.service';
-import { MockActivatedRoute } from './shared/mocks/active-router.mock';
-import { RouterMock } from './shared/mocks/router.mock';
-import { Angulartics2DSpace } from './statistics/angulartics/dspace-provider';
-import { storeModuleConfig } from './app.reducer';
-import { LocaleService } from './core/locale/locale.service';
-import { authReducer } from './core/auth/auth.reducer';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  inject,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
+import {
+  Store,
+  StoreModule,
+} from '@ngrx/store';
 import { provideMockStore } from '@ngrx/store/testing';
-import { ThemeService } from './shared/theme-support/theme.service';
-import { getMockThemeService } from './shared/mocks/theme-service.mock';
-import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
+import {
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
+
 import { APP_CONFIG } from '../config/app-config.interface';
 import { environment } from '../environments/environment';
+// Load the implementations that should be tested
+import { AppComponent } from './app.component';
+import { storeModuleConfig } from './app.reducer';
+import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
+import { authReducer } from './core/auth/auth.reducer';
+import { AuthService } from './core/auth/auth.service';
+import { LocaleService } from './core/locale/locale.service';
+import { MetadataService } from './core/metadata/metadata.service';
+import { RouteService } from './core/services/route.service';
+import {
+  NativeWindowRef,
+  NativeWindowService,
+} from './core/services/window.service';
+import { HostWindowResizeAction } from './shared/host-window.actions';
+import { HostWindowService } from './shared/host-window.service';
+import { MenuService } from './shared/menu/menu.service';
+import { MockActivatedRoute } from './shared/mocks/active-router.mock';
+import { AngularticsProviderMock } from './shared/mocks/angulartics-provider.service.mock';
+import { AuthServiceMock } from './shared/mocks/auth.service.mock';
+import { MetadataServiceMock } from './shared/mocks/metadata-service.mock';
+import { RouterMock } from './shared/mocks/router.mock';
+import { getMockThemeService } from './shared/mocks/theme-service.mock';
+import { TranslateLoaderMock } from './shared/mocks/translate-loader.mock';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
+import { HostWindowState } from './shared/search/host-window.reducer';
+import { CSSVariableServiceStub } from './shared/testing/css-variable-service.stub';
+import { HostWindowServiceStub } from './shared/testing/host-window-service.stub';
+import { MenuServiceStub } from './shared/testing/menu-service.stub';
+import { ThemeService } from './shared/theme-support/theme.service';
+import { Angulartics2DSpace } from './statistics/angulartics/dspace-provider';
 
 let comp: AppComponent;
 let fixture: ComponentFixture;
 const menuService = new MenuServiceStub();
 const initialState = {
-  core: { auth: { loading: false } }
+  core: { auth: { loading: false } },
 };
 
 export function getMockLocaleService(): LocaleService {
   return jasmine.createSpyObj('LocaleService', {
-    setCurrentLanguageCode: jasmine.createSpy('setCurrentLanguageCode')
+    setCurrentLanguageCode: jasmine.createSpy('setCurrentLanguageCode'),
   });
 }
 
@@ -64,8 +80,8 @@ describe('App component', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
-          }
+            useClass: TranslateLoaderMock,
+          },
         }),
       ],
       declarations: [AppComponent], // declare the test component
@@ -85,9 +101,9 @@ describe('App component', () => {
         { provide: APP_CONFIG, useValue: environment },
         provideMockStore({ initialState }),
         AppComponent,
-        RouteService
+        RouteService,
       ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     };
   };
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ba7b738227..edb1c7966b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,7 @@
-import { distinctUntilChanged, take, withLatestFrom } from 'rxjs/operators';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import {
+  DOCUMENT,
+  isPlatformBrowser,
+} from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -15,22 +17,39 @@ import {
   NavigationStart,
   Router,
 } from '@angular/router';
-
-import { BehaviorSubject, Observable } from 'rxjs';
-import { select, Store } from '@ngrx/store';
-import { NgbModal, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbModal,
+  NgbModalConfig,
+} from '@ng-bootstrap/ng-bootstrap';
+import {
+  select,
+  Store,
+} from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
-import { HostWindowResizeAction } from './shared/host-window.actions';
-import { HostWindowState } from './shared/search/host-window.reducer';
-import { NativeWindowRef, NativeWindowService } from './core/services/window.service';
-import { isAuthenticationBlocking } from './core/auth/selectors';
-import { AuthService } from './core/auth/auth.service';
-import { CSSVariableService } from './shared/sass-helper/css-variable.service';
+import {
+  BehaviorSubject,
+  Observable,
+} from 'rxjs';
+import {
+  distinctUntilChanged,
+  take,
+  withLatestFrom,
+} from 'rxjs/operators';
+
 import { environment } from '../environments/environment';
+import { AuthService } from './core/auth/auth.service';
+import { isAuthenticationBlocking } from './core/auth/selectors';
 import { models } from './core/core.module';
-import { ThemeService } from './shared/theme-support/theme.service';
-import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
+import {
+  NativeWindowRef,
+  NativeWindowService,
+} from './core/services/window.service';
 import { distinctNext } from './core/shared/distinct-next';
+import { HostWindowResizeAction } from './shared/host-window.actions';
+import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
+import { HostWindowState } from './shared/search/host-window.reducer';
+import { ThemeService } from './shared/theme-support/theme.service';
 
 @Component({
   selector: 'ds-app',
@@ -102,7 +121,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
     this.isAuthBlocking$ = this.store.pipe(
       select(isAuthenticationBlocking),
-      distinctUntilChanged()
+      distinctUntilChanged(),
     );
 
     this.dispatchWindowSize(this._window.nativeWindow.innerWidth, this._window.nativeWindow.innerHeight);
@@ -133,7 +152,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   private dispatchWindowSize(width, height): void {
     this.store.dispatch(
-      new HostWindowResizeAction(width, height)
+      new HostWindowResizeAction(width, height),
     );
   }
 
diff --git a/src/app/app.effects.ts b/src/app/app.effects.ts
index 871fae8d6b..92b5d880d0 100644
--- a/src/app/app.effects.ts
+++ b/src/app/app.effects.ts
@@ -1,9 +1,9 @@
-import { StoreEffects } from './store.effects';
-import { NotificationsEffects } from './shared/notifications/notifications.effects';
 import { NavbarEffects } from './navbar/navbar.effects';
-import { SidebarEffects } from './shared/sidebar/sidebar-effects.service';
 import { RelationshipEffects } from './shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects';
+import { NotificationsEffects } from './shared/notifications/notifications.effects';
+import { SidebarEffects } from './shared/sidebar/sidebar-effects.service';
 import { ThemeEffects } from './shared/theme-support/theme.effects';
+import { StoreEffects } from './store.effects';
 
 export const appEffects = [
   StoreEffects,
@@ -11,5 +11,5 @@ export const appEffects = [
   NotificationsEffects,
   SidebarEffects,
   ThemeEffects,
-  RelationshipEffects
+  RelationshipEffects,
 ];
diff --git a/src/app/app.metareducers.ts b/src/app/app.metareducers.ts
index 4cdecdc797..559389ccd3 100644
--- a/src/app/app.metareducers.ts
+++ b/src/app/app.metareducers.ts
@@ -29,9 +29,9 @@ export function universalMetaReducer(reducer) {
 }
 
 export const debugMetaReducers = [
-  debugMetaReducer
+  debugMetaReducer,
 ];
 
 export const appMetaReducers = [
-  universalMetaReducer
+  universalMetaReducer,
 ];
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 89e361821b..a452459a4a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,35 +1,58 @@
-import { APP_BASE_HREF, CommonModule, DOCUMENT } from '@angular/common';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import {
+  APP_BASE_HREF,
+  CommonModule,
+  DOCUMENT,
+} from '@angular/common';
+import {
+  HTTP_INTERCEPTORS,
+  HttpClientModule,
+} from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { DYNAMIC_MATCHER_PROVIDERS } from '@ng-dynamic-forms/core';
 import { EffectsModule } from '@ngrx/effects';
-import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';
-import { MetaReducer, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
+import {
+  RouterStateSerializer,
+  StoreRouterConnectingModule,
+} from '@ngrx/router-store';
+import {
+  MetaReducer,
+  StoreModule,
+  USER_PROVIDED_META_REDUCERS,
+} from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
-import { DYNAMIC_MATCHER_PROVIDERS } from '@ng-dynamic-forms/core';
 
-import { AppRoutingModule } from './app-routing.module';
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../config/app-config.interface';
+import { StoreDevModules } from '../config/store/devtools';
+import { environment } from '../environments/environment';
+import { EagerThemesModule } from '../themes/eager-themes.module';
 import { AppComponent } from './app.component';
 import { appEffects } from './app.effects';
-import { appMetaReducers, debugMetaReducers } from './app.metareducers';
-import { appReducers, AppState, storeModuleConfig } from './app.reducer';
+import {
+  appMetaReducers,
+  debugMetaReducers,
+} from './app.metareducers';
+import {
+  appReducers,
+  AppState,
+  storeModuleConfig,
+} from './app.reducer';
+import { AppRoutingModule } from './app-routing.module';
+import { AuthInterceptor } from './core/auth/auth.interceptor';
 import { CoreModule } from './core/core.module';
+import { LocaleInterceptor } from './core/locale/locale.interceptor';
+import { LogInterceptor } from './core/log/log.interceptor';
 import { ClientCookieService } from './core/services/client-cookie.service';
+import { XsrfInterceptor } from './core/xsrf/xsrf.interceptor';
 import { NavbarModule } from './navbar/navbar.module';
+import { RootModule } from './root.module';
 import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer';
 import { SharedModule } from './shared/shared.module';
-import { environment } from '../environments/environment';
-import { AuthInterceptor } from './core/auth/auth.interceptor';
-import { LocaleInterceptor } from './core/locale/locale.interceptor';
-import { XsrfInterceptor } from './core/xsrf/xsrf.interceptor';
-import { LogInterceptor } from './core/log/log.interceptor';
-import { EagerThemesModule } from '../themes/eager-themes.module';
-import { APP_CONFIG, AppConfig } from '../config/app-config.interface';
-import { StoreDevModules } from '../config/store/devtools';
-import { RootModule } from './root.module';
 
 export function getConfig() {
   return environment;
@@ -67,41 +90,41 @@ const PROVIDERS = [
   {
     provide: APP_BASE_HREF,
     useFactory: getBaseHref,
-    deps: [DOCUMENT, APP_CONFIG]
+    deps: [DOCUMENT, APP_CONFIG],
   },
   {
     provide: USER_PROVIDED_META_REDUCERS,
     useFactory: getMetaReducers,
-    deps: [APP_CONFIG]
+    deps: [APP_CONFIG],
   },
   {
     provide: RouterStateSerializer,
-    useClass: DSpaceRouterStateSerializer
+    useClass: DSpaceRouterStateSerializer,
   },
   ClientCookieService,
   // register AuthInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,
     useClass: AuthInterceptor,
-    multi: true
+    multi: true,
   },
   // register LocaleInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,
     useClass: LocaleInterceptor,
-    multi: true
+    multi: true,
   },
   // register XsrfInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,
     useClass: XsrfInterceptor,
-    multi: true
+    multi: true,
   },
   // register LogInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,
     useClass: LogInterceptor,
-    multi: true
+    multi: true,
   },
   // register the dynamic matcher used by form. MUST be provided by the app module
   ...DYNAMIC_MATCHER_PROVIDERS,
@@ -117,10 +140,10 @@ const EXPORTS = [
 @NgModule({
   imports: [
     BrowserModule.withServerTransition({ appId: 'dspace-angular' }),
-    ...IMPORTS
+    ...IMPORTS,
   ],
   providers: [
-    ...PROVIDERS
+    ...PROVIDERS,
   ],
   declarations: [
     ...DECLARATIONS,
@@ -128,7 +151,7 @@ const EXPORTS = [
   exports: [
     ...EXPORTS,
     ...DECLARATIONS,
-  ]
+  ],
 })
 export class AppModule {
 
diff --git a/src/app/app.reducer.ts b/src/app/app.reducer.ts
index 802ad1aff5..d79a3c1aaa 100644
--- a/src/app/app.reducer.ts
+++ b/src/app/app.reducer.ts
@@ -1,53 +1,81 @@
-import { routerReducer, RouterReducerState } from '@ngrx/router-store';
-import { ActionReducerMap, createSelector, MemoizedSelector } from '@ngrx/store';
+import {
+  routerReducer,
+  RouterReducerState,
+} from '@ngrx/router-store';
+import {
+  ActionReducerMap,
+  createSelector,
+  MemoizedSelector,
+} from '@ngrx/store';
+
 import {
   ePeopleRegistryReducer,
-  EPeopleRegistryState
+  EPeopleRegistryState,
 } from './access-control/epeople-registry/epeople-registry.reducers';
 import {
   groupRegistryReducer,
-  GroupRegistryState
+  GroupRegistryState,
 } from './access-control/group-registry/group-registry.reducers';
 import {
   metadataRegistryReducer,
-  MetadataRegistryState
+  MetadataRegistryState,
 } from './admin/admin-registries/metadata-registry/metadata-registry.reducers';
 import {
   CommunityListReducer,
-  CommunityListState
+  CommunityListState,
 } from './community-list-page/community-list.reducer';
+import { correlationIdReducer } from './correlation-id/correlation-id.reducer';
+import {
+  contextHelpReducer,
+  ContextHelpState,
+} from './shared/context-help.reducer';
 import { hasValue } from './shared/empty.util';
 import {
   NameVariantListsState,
-  nameVariantReducer
+  nameVariantReducer,
 } from './shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/name-variant.reducer';
-import { formReducer, FormState } from './shared/form/form.reducer';
-import { menusReducer} from './shared/menu/menu.reducer';
+import {
+  formReducer,
+  FormState,
+} from './shared/form/form.reducer';
+import { menusReducer } from './shared/menu/menu.reducer';
+import { MenusState } from './shared/menu/menus-state.model';
 import {
   notificationsReducer,
-  NotificationsState
+  NotificationsState,
 } from './shared/notifications/notifications.reducers';
 import {
   selectableListReducer,
-  SelectableListsState
+  SelectableListsState,
 } from './shared/object-list/selectable-list/selectable-list.reducer';
 import {
   ObjectSelectionListState,
-  objectSelectionReducer
+  objectSelectionReducer,
 } from './shared/object-select/object-select.reducer';
-import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/css-variable.reducer';
-
-import { hostWindowReducer, HostWindowState } from './shared/search/host-window.reducer';
+import {
+  cssVariablesReducer,
+  CSSVariablesState,
+} from './shared/sass-helper/css-variable.reducer';
+import {
+  hostWindowReducer,
+  HostWindowState,
+} from './shared/search/host-window.reducer';
 import {
   filterReducer,
-  SearchFiltersState
+  SearchFiltersState,
 } from './shared/search/search-filters/search-filter/search-filter.reducer';
-import { sidebarReducer, SidebarState } from './shared/sidebar/sidebar.reducer';
-import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer';
-import { ThemeState, themeReducer } from './shared/theme-support/theme.reducer';
-import { MenusState } from './shared/menu/menus-state.model';
-import { correlationIdReducer } from './correlation-id/correlation-id.reducer';
-import { contextHelpReducer, ContextHelpState } from './shared/context-help.reducer';
+import {
+  sidebarReducer,
+  SidebarState,
+} from './shared/sidebar/sidebar.reducer';
+import {
+  themeReducer,
+  ThemeState,
+} from './shared/theme-support/theme.reducer';
+import {
+  truncatableReducer,
+  TruncatablesState,
+} from './shared/truncatable/truncatable.reducer';
 
 export interface AppState {
   router: RouterReducerState;
@@ -108,6 +136,6 @@ export function keySelector(key: string, selector): MemoizedSelector {
   let comp: BitstreamAuthorizationsComponent;
@@ -23,21 +32,21 @@ describe('BitstreamAuthorizationsComponent', () => {
       'dc.title': [
         {
           value: 'file name',
-          language: null
-        }
-      ]
+          language: null,
+        },
+      ],
     },
     _links: {
-      content: { href: 'file-selflink' }
-    }
+      content: { href: 'file-selflink' },
+    },
   });
 
   const bitstreamRD = createSuccessfulRemoteDataObject(bitstream);
 
   const routeStub = {
     data: observableOf({
-      bitstream: bitstreamRD
-    })
+      bitstream: bitstreamRD,
+    }),
   };
 
   beforeEach(waitForAsync(() => {
@@ -47,9 +56,9 @@ describe('BitstreamAuthorizationsComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
-          }
-        })
+            useClass: TranslateLoaderMock,
+          },
+        }),
       ],
       declarations: [BitstreamAuthorizationsComponent],
       providers: [
diff --git a/src/app/bitstream-page/bitstream-authorizations/bitstream-authorizations.component.ts b/src/app/bitstream-page/bitstream-authorizations/bitstream-authorizations.component.ts
index adc0638780..c65a0ee9c2 100644
--- a/src/app/bitstream-page/bitstream-authorizations/bitstream-authorizations.component.ts
+++ b/src/app/bitstream-page/bitstream-authorizations/bitstream-authorizations.component.ts
@@ -1,8 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-
 import { Observable } from 'rxjs';
-import { first, map } from 'rxjs/operators';
+import {
+  first,
+  map,
+} from 'rxjs/operators';
 
 import { RemoteData } from '../../core/data/remote-data';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
@@ -27,7 +32,7 @@ export class BitstreamAuthorizationsComponent impl
    * @param {ActivatedRoute} route
    */
   constructor(
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
   ) {
   }
 
diff --git a/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html b/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html
index af3afe98f8..1467ffb0cc 100644
--- a/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html
+++ b/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html
@@ -1,5 +1,5 @@
 

-  
{{'bitstream.download.page' | translate:{ bitstream: dsoNameService.getName((bitstream$ | async)) } }}

+  
{{'bitstream.download.page' | translate:{ bitstream: dsoNameService.getName((bitstream$ | async)) } }}

   

     
                     
                   

                 

diff --git a/src/app/collection-page/delete-collection-page/delete-collection-page.component.spec.ts b/src/app/collection-page/delete-collection-page/delete-collection-page.component.spec.ts
index 9fc88932d0..986faafedb 100644
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.spec.ts
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.spec.ts
@@ -1,17 +1,22 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ActivatedRoute } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { SharedModule } from '../../shared/shared.module';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { DeleteCollectionPageComponent } from './delete-collection-page.component';
+
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { CollectionDataService } from '../../core/data/collection-data.service';
 import { RequestService } from '../../core/data/request.service';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock } from '../../shared/mocks/dso-name.service.mock';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { SharedModule } from '../../shared/shared.module';
+import { DeleteCollectionPageComponent } from './delete-collection-page.component';
 
 describe('DeleteCollectionPageComponent', () => {
   let comp: DeleteCollectionPageComponent;
@@ -26,9 +31,9 @@ describe('DeleteCollectionPageComponent', () => {
         { provide: CollectionDataService, useValue: {} },
         { provide: ActivatedRoute, useValue: { data: observableOf({ dso: { payload: {} } }) } },
         { provide: NotificationsService, useValue: {} },
-        { provide: RequestService, useValue: {} }
+        { provide: RequestService, useValue: {} },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
diff --git a/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts b/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts
index 0a1b87e58b..87b21d3432 100644
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts
@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { DeleteComColPageComponent } from '../../shared/comcol/comcol-forms/delete-comcol-page/delete-comcol-page.component';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { CollectionDataService } from '../../core/data/collection-data.service';
 import { Collection } from '../../core/shared/collection.model';
-import { TranslateService } from '@ngx-translate/core';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { DeleteComColPageComponent } from '../../shared/comcol/comcol-forms/delete-comcol-page/delete-comcol-page.component';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
 
 /**
  * Component that represents the page where a user can delete an existing Collection
@@ -13,7 +17,7 @@ import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 @Component({
   selector: 'ds-delete-collection',
   styleUrls: ['./delete-collection-page.component.scss'],
-  templateUrl: './delete-collection-page.component.html'
+  templateUrl: './delete-collection-page.component.html',
 })
 export class DeleteCollectionPageComponent extends DeleteComColPageComponent {
   protected frontendURL = '/collections/';
diff --git a/src/app/collection-page/edit-collection-page/collection-access-control/collection-access-control.component.spec.ts b/src/app/collection-page/edit-collection-page/collection-access-control/collection-access-control.component.spec.ts
index 04da8bbcd9..de28e4a23c 100644
--- a/src/app/collection-page/edit-collection-page/collection-access-control/collection-access-control.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-access-control/collection-access-control.component.spec.ts
@@ -1,25 +1,69 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import {
+  of as observableOf,
+  of,
+} from 'rxjs';
 
+import { Community } from '../../../core/shared/community.model';
+import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
 import { CollectionAccessControlComponent } from './collection-access-control.component';
 
-xdescribe('CollectionAccessControlComponent', () => {
+describe('CollectionAccessControlComponent', () => {
   let component: CollectionAccessControlComponent;
   let fixture: ComponentFixture;
+  const testCommunity = Object.assign(new Community(),
+    {
+      type: 'community',
+      metadata: {
+        'dc.title': [{ value: 'community' }],
+      },
+      uuid: 'communityUUID',
+      parentCommunity: observableOf(Object.assign(createSuccessfulRemoteDataObject(undefined), { statusCode: 204 })),
+
+      _links: {
+        parentCommunity: 'site',
+        self: '/' + 'communityUUID',
+      },
+    },
+  );
+
+  const routeStub = {
+    parent: {
+      parent: {
+        data: of({
+          dso: createSuccessfulRemoteDataObject(testCommunity),
+        }),
+      },
+    },
+  };
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CollectionAccessControlComponent ]
+      declarations: [ CollectionAccessControlComponent ],
+      providers: [{ provide: ActivatedRoute, useValue: routeStub }],
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CollectionAccessControlComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    component.ngOnInit();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should set itemRD$', (done) => {
+    component.itemRD$.subscribe(result => {
+      expect(result).toEqual(createSuccessfulRemoteDataObject(testCommunity));
+      done();
+    });
+  });
 });
diff --git a/src/app/collection-page/edit-collection-page/collection-access-control/collection-access-control.component.ts b/src/app/collection-page/edit-collection-page/collection-access-control/collection-access-control.component.ts
index 4192fe5a9a..490a8d13ce 100644
--- a/src/app/collection-page/edit-collection-page/collection-access-control/collection-access-control.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-access-control/collection-access-control.component.ts
@@ -1,9 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
 import { RemoteData } from '../../../core/data/remote-data';
 import { Community } from '../../../core/shared/community.model';
-import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs/operators';
 import { getFirstSucceededRemoteData } from '../../../core/shared/operators';
 
 @Component({
@@ -18,7 +22,7 @@ export class CollectionAccessControlComponent  implements OnInit {
 
   ngOnInit(): void {
     this.itemRD$ = this.route.parent.parent.data.pipe(
-      map((data) => data.dso)
+      map((data) => data.dso),
     ).pipe(getFirstSucceededRemoteData()) as Observable>;
   }
 }
diff --git a/src/app/collection-page/edit-collection-page/collection-authorizations/collection-authorizations.component.spec.ts b/src/app/collection-page/edit-collection-page/collection-authorizations/collection-authorizations.component.spec.ts
index c8e529443a..95d8b0ba04 100644
--- a/src/app/collection-page/edit-collection-page/collection-authorizations/collection-authorizations.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-authorizations/collection-authorizations.component.spec.ts
@@ -1,15 +1,21 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
+  ChangeDetectorRef,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
-
 import { cold } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 
-import { DSpaceObject } from '../../../core/shared/dspace-object.model';
-import { CollectionAuthorizationsComponent } from './collection-authorizations.component';
 import { Collection } from '../../../core/shared/collection.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
+import { CollectionAuthorizationsComponent } from './collection-authorizations.component';
 
 describe('CollectionAuthorizationsComponent', () => {
   let comp: CollectionAuthorizationsComponent;
@@ -19,8 +25,8 @@ describe('CollectionAuthorizationsComponent', () => {
     uuid: 'collection',
     id: 'collection',
     _links: {
-      self: { href: 'collection-selflink' }
-    }
+      self: { href: 'collection-selflink' },
+    },
   });
 
   const collectionRD = createSuccessfulRemoteDataObject(collection);
@@ -29,16 +35,16 @@ describe('CollectionAuthorizationsComponent', () => {
     parent: {
       parent: {
         data: observableOf({
-          dso: collectionRD
-        })
-      }
-    }
+          dso: collectionRD,
+        }),
+      },
+    },
   };
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        CommonModule
+        CommonModule,
       ],
       declarations: [CollectionAuthorizationsComponent],
       providers: [
diff --git a/src/app/collection-page/edit-collection-page/collection-authorizations/collection-authorizations.component.ts b/src/app/collection-page/edit-collection-page/collection-authorizations/collection-authorizations.component.ts
index d1b59a0c90..ad8ccbd690 100644
--- a/src/app/collection-page/edit-collection-page/collection-authorizations/collection-authorizations.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-authorizations/collection-authorizations.component.ts
@@ -1,8 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-
 import { Observable } from 'rxjs';
-import { first, map } from 'rxjs/operators';
+import {
+  first,
+  map,
+} from 'rxjs/operators';
 
 import { RemoteData } from '../../../core/data/remote-data';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
@@ -27,7 +32,7 @@ export class CollectionAuthorizationsComponent imp
    * @param {ActivatedRoute} route
    */
   constructor(
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
   ) {
   }
 
diff --git a/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.html b/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.html
index 38c9d22f4e..4fbe60d6b1 100644
--- a/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.html
@@ -1,5 +1,5 @@
 

-    
{{'collection.curate.header' |translate:{collection: (collectionName$ |async)} }}

+    
{{'collection.curate.header' |translate:{collection: (collectionName$ |async)} }}

     
diff --git a/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.spec.ts b/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.spec.ts
index 2cf25734e1..1925478e3b 100644
--- a/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.spec.ts
@@ -1,12 +1,20 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
-import { CollectionCurateComponent } from './collection-curate.component';
-import { of as observableOf } from 'rxjs';
-import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
-import { Collection } from '../../../core/shared/collection.model';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  DebugElement,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { Collection } from '../../../core/shared/collection.model';
+import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
+import { CollectionCurateComponent } from './collection-curate.component';
 
 describe('CollectionCurateComponent', () => {
   let comp: CollectionCurateComponent;
@@ -17,30 +25,30 @@ describe('CollectionCurateComponent', () => {
   let dsoNameService;
 
   const collection = Object.assign(new Collection(), {
-    metadata: {'dc.title': ['Collection Name'], 'dc.identifier.uri': [ { value: '123456789/1'}]}
+    metadata: { 'dc.title': ['Collection Name'], 'dc.identifier.uri': [ { value: '123456789/1' }] },
   });
 
   beforeEach(waitForAsync(() => {
     routeStub = {
       parent: {
         data: observableOf({
-          dso: createSuccessfulRemoteDataObject(collection)
-        })
-      }
+          dso: createSuccessfulRemoteDataObject(collection),
+        }),
+      },
     };
 
     dsoNameService = jasmine.createSpyObj('dsoNameService', {
-      getName: 'Collection Name'
+      getName: 'Collection Name',
     });
 
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
       declarations: [CollectionCurateComponent],
       providers: [
-        {provide: ActivatedRoute, useValue: routeStub},
-        {provide: DSONameService, useValue: dsoNameService}
+        { provide: ActivatedRoute, useValue: routeStub },
+        { provide: DSONameService, useValue: dsoNameService },
       ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   }));
 
@@ -58,7 +66,7 @@ describe('CollectionCurateComponent', () => {
     });
     it('should contain the collection information provided in the route', () => {
       comp.dsoRD$.subscribe((value) => {
-        expect(value.payload.handle
+        expect(value.payload.handle,
         ).toEqual('123456789/1');
       });
       comp.collectionName$.subscribe((value) => {
diff --git a/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.ts b/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.ts
index e20f229cd6..ea2f0265fa 100644
--- a/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.ts
@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
-import { filter, map, take } from 'rxjs/operators';
-import { RemoteData } from '../../../core/data/remote-data';
-import { Observable } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import {
+  filter,
+  map,
+  take,
+} from 'rxjs/operators';
+
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { RemoteData } from '../../../core/data/remote-data';
 import { Collection } from '../../../core/shared/collection.model';
 import { hasValue } from '../../../shared/empty.util';
 
@@ -34,7 +39,7 @@ export class CollectionCurateComponent {
       filter((rd: RemoteData) => hasValue(rd)),
       map((rd: RemoteData) => {
         return this.dsoNameService.getName(rd.payload);
-      })
+      }),
     );
   }
 }
diff --git a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
index ffd8f71343..1cf40159ec 100644
--- a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
@@ -1,17 +1,17 @@
 

-  
+  {{ 'collection.edit.template.label' | translate}}
   

     
     
     
   

diff --git a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
index 7cc54bd994..3e87f05148 100644
--- a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
@@ -1,20 +1,33 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { SharedModule } from '../../../shared/shared.module';
 import { CommonModule } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
-import { CollectionDataService } from '../../../core/data/collection-data.service';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { of as observableOf } from 'rxjs';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { CollectionMetadataComponent } from './collection-metadata.component';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { Item } from '../../../core/shared/item.model';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  ActivatedRoute,
+  NavigationEnd,
+  Router,
+} from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+
+import { CollectionDataService } from '../../../core/data/collection-data.service';
 import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
-import { Collection } from '../../../core/shared/collection.model';
 import { RequestService } from '../../../core/data/request.service';
-import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { Collection } from '../../../core/shared/collection.model';
+import { Item } from '../../../core/shared/item.model';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import {
+  createFailedRemoteDataObject$,
+  createSuccessfulRemoteDataObject,
+  createSuccessfulRemoteDataObject$,
+} from '../../../shared/remote-data.utils';
+import { SharedModule } from '../../../shared/shared.module';
 import { getCollectionItemTemplateRoute } from '../../collection-page-routing-paths';
+import { CollectionMetadataComponent } from './collection-metadata.component';
 
 describe('CollectionMetadataComponent', () => {
   let comp: CollectionMetadataComponent;
@@ -24,16 +37,16 @@ describe('CollectionMetadataComponent', () => {
 
   const template = Object.assign(new Item(), {
     _links: {
-      self: { href: 'template-selflink' }
-    }
+      self: { href: 'template-selflink' },
+    },
   });
   const collection = Object.assign(new Collection(), {
     uuid: 'collection-id',
     id: 'collection-id',
     name: 'Fake Collection',
     _links: {
-      self: { href: 'collection-selflink' }
-    }
+      self: { href: 'collection-selflink' },
+    },
   });
   const collectionTemplateHref = 'rest/api/test/collections/template';
 
@@ -46,10 +59,10 @@ describe('CollectionMetadataComponent', () => {
 
   const notificationsService = jasmine.createSpyObj('notificationsService', {
     success: {},
-    error: {}
+    error: {},
   });
   const requestService = jasmine.createSpyObj('requestService', {
-    setStaleByHrefSubstring: {}
+    setStaleByHrefSubstring: {},
   });
 
   const routerMock = {
@@ -67,9 +80,9 @@ describe('CollectionMetadataComponent', () => {
         { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } },
         { provide: NotificationsService, useValue: notificationsService },
         { provide: RequestService, useValue: requestService },
-        { provide: Router, useValue: routerMock}
+        { provide: Router, useValue: routerMock },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
diff --git a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
index 634363527f..d71732840a 100644
--- a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
@@ -1,20 +1,39 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { ComcolMetadataComponent } from '../../../shared/comcol/comcol-forms/edit-comcol-page/comcol-metadata/comcol-metadata.component';
-import { Collection } from '../../../core/shared/collection.model';
-import { CollectionDataService } from '../../../core/data/collection-data.service';
-import { ActivatedRoute, NavigationEnd, Router, Scroll } from '@angular/router';
-import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
-import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
-import { Item } from '../../../core/shared/item.model';
-import { getFirstCompletedRemoteData, getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
-import { map, switchMap } from 'rxjs/operators';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import {
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+} from '@angular/core';
+import {
+  ActivatedRoute,
+  NavigationEnd,
+  Router,
+  Scroll,
+} from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import {
+  combineLatest as combineLatestObservable,
+  Observable,
+} from 'rxjs';
+import {
+  map,
+  switchMap,
+} from 'rxjs/operators';
+
+import { CollectionDataService } from '../../../core/data/collection-data.service';
+import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
+import { RemoteData } from '../../../core/data/remote-data';
 import { RequestService } from '../../../core/data/request.service';
-import { getCollectionItemTemplateRoute } from '../../collection-page-routing-paths';
+import { Collection } from '../../../core/shared/collection.model';
+import { Item } from '../../../core/shared/item.model';
 import { NoContent } from '../../../core/shared/NoContent.model';
+import {
+  getFirstCompletedRemoteData,
+  getFirstSucceededRemoteDataPayload,
+} from '../../../core/shared/operators';
+import { ComcolMetadataComponent } from '../../../shared/comcol/comcol-forms/edit-comcol-page/comcol-metadata/comcol-metadata.component';
 import { hasValue } from '../../../shared/empty.util';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { getCollectionItemTemplateRoute } from '../../collection-page-routing-paths';
 
 /**
  * Component for editing a collection's metadata
@@ -40,7 +59,7 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent this.itemTemplateService.findByCollectionID(collection.uuid))
+      switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid)),
     );
   }
 
diff --git a/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts b/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts
index c375a23ddf..21a252b4cf 100644
--- a/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts
@@ -1,22 +1,32 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { ActivatedRoute } from '@angular/router';
-import { of as observableOf } from 'rxjs';
-import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  DebugElement,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { CollectionRolesComponent } from './collection-roles.component';
-import { Collection } from '../../../core/shared/collection.model';
-import { SharedModule } from '../../../shared/shared.module';
-import { GroupDataService } from '../../../core/eperson/group-data.service';
-import { RequestService } from '../../../core/data/request.service';
-import { RouterTestingModule } from '@angular/router/testing';
-import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { ComcolModule } from '../../../shared/comcol/comcol.module';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { RequestService } from '../../../core/data/request.service';
+import { GroupDataService } from '../../../core/eperson/group-data.service';
+import { Collection } from '../../../core/shared/collection.model';
+import { ComcolModule } from '../../../shared/comcol/comcol.module';
 import { DSONameServiceMock } from '../../../shared/mocks/dso-name.service.mock';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import {
+  createSuccessfulRemoteDataObject,
+  createSuccessfulRemoteDataObject$,
+} from '../../../shared/remote-data.utils';
+import { SharedModule } from '../../../shared/shared.module';
+import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
+import { CollectionRolesComponent } from './collection-roles.component';
 
 describe('CollectionRolesComponent', () => {
 
@@ -54,10 +64,10 @@ describe('CollectionRolesComponent', () => {
                   },
                 ],
               },
-            })
+            }),
           ),
-        })
-      }
+        }),
+      },
     };
 
     const requestService = {
@@ -74,7 +84,7 @@ describe('CollectionRolesComponent', () => {
         SharedModule,
         RouterTestingModule.withRoutes([]),
         TranslateModule.forRoot(),
-        NoopAnimationsModule
+        NoopAnimationsModule,
       ],
       declarations: [
         CollectionRolesComponent,
@@ -84,9 +94,9 @@ describe('CollectionRolesComponent', () => {
         { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: RequestService, useValue: requestService },
         { provide: GroupDataService, useValue: groupDataService },
-        { provide: NotificationsService, useClass: NotificationsServiceStub }
+        { provide: NotificationsService, useClass: NotificationsServiceStub },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CollectionRolesComponent);
diff --git a/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.ts b/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.ts
index 0177cc3a38..586a8fa8a6 100644
--- a/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.ts
@@ -1,11 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import { first, map } from 'rxjs/operators';
+import {
+  first,
+  map,
+} from 'rxjs/operators';
+
 import { RemoteData } from '../../../core/data/remote-data';
 import { Collection } from '../../../core/shared/collection.model';
-import { getRemoteDataPayload, getFirstSucceededRemoteData } from '../../../core/shared/operators';
 import { HALLink } from '../../../core/shared/hal-link.model';
+import {
+  getFirstSucceededRemoteData,
+  getRemoteDataPayload,
+} from '../../../core/shared/operators';
 import { hasValue } from '../../../shared/empty.util';
 
 /**
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
index 4d7b3e657e..7edaadb0a1 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
@@ -1,6 +1,6 @@
 

     

-        
{{ 'collection.source.controls.head' | translate }}

+        
{{ 'collection.source.controls.head' | translate }}

         

             {{'collection.source.controls.harvest.status' | translate}}
             {{contentSource?.harvestStatus}}
@@ -18,7 +18,7 @@
             {{contentSource?.message ? contentSource?.message: 'collection.source.controls.harvest.no-information'|translate }}
         

 
-        
-        
-        
         
     

-    
{{ 'collection.edit.tabs.source.head' | translate }}

+    
{{ 'collection.edit.tabs.source.head' | translate }}

     

         
@@ -26,7 +26,7 @@
                for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}
     

     
-    
{{ 'collection.edit.tabs.source.form.head' | translate }}

+    
{{ 'collection.edit.tabs.source.form.head' | translate }}

 

 

     
         

             

-                
                 

 

 
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.spec.ts b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.spec.ts
index e7e98d9523..fb00b3243b 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.spec.ts
@@ -1,25 +1,48 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterTestingModule } from '@angular/router/testing';
-import { ActivatedRoute, Router } from '@angular/router';
-import { of as observableOf } from 'rxjs';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { CollectionSourceComponent } from './collection-source.component';
-import { ContentSource, ContentSourceHarvestType } from '../../../core/shared/content-source.model';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import {
+  DynamicFormControlModel,
+  DynamicFormService,
+} from '@ng-dynamic-forms/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+
+import { CollectionDataService } from '../../../core/data/collection-data.service';
+import { FieldUpdate } from '../../../core/data/object-updates/field-update.model';
 import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
-import { INotification, Notification } from '../../../shared/notifications/models/notification.model';
+import { RequestService } from '../../../core/data/request.service';
+import { Collection } from '../../../core/shared/collection.model';
+import {
+  ContentSource,
+  ContentSourceHarvestType,
+} from '../../../core/shared/content-source.model';
+import { hasValue } from '../../../shared/empty.util';
+import {
+  INotification,
+  Notification,
+} from '../../../shared/notifications/models/notification.model';
 import { NotificationType } from '../../../shared/notifications/models/notification-type';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { DynamicFormControlModel, DynamicFormService } from '@ng-dynamic-forms/core';
-import { hasValue } from '../../../shared/empty.util';
-import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import {
+  createSuccessfulRemoteDataObject,
+  createSuccessfulRemoteDataObject$,
+} from '../../../shared/remote-data.utils';
 import { RouterStub } from '../../../shared/testing/router.stub';
-import { By } from '@angular/platform-browser';
-import { Collection } from '../../../core/shared/collection.model';
-import { CollectionDataService } from '../../../core/data/collection-data.service';
-import { RequestService } from '../../../core/data/request.service';
-import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
-import { FieldUpdate } from '../../../core/data/object-updates/field-update.model';
+import { CollectionSourceComponent } from './collection-source.component';
 
 const infoNotification: INotification = new Notification('id', NotificationType.Info, 'info');
 const warningNotification: INotification = new Notification('id', NotificationType.Warning, 'warning');
@@ -50,29 +73,29 @@ describe('CollectionSourceComponent', () => {
         {
           id: 'dc',
           label: 'Simple Dublin Core',
-          nameSpace: 'http://www.openarchives.org/OAI/2.0/oai_dc/'
+          nameSpace: 'http://www.openarchives.org/OAI/2.0/oai_dc/',
         },
         {
           id: 'qdc',
           label: 'Qualified Dublin Core',
-          nameSpace: 'http://purl.org/dc/terms/'
+          nameSpace: 'http://purl.org/dc/terms/',
         },
         {
           id: 'dim',
           label: 'DSpace Intermediate Metadata',
-          nameSpace: 'http://www.dspace.org/xmlns/dspace/dim'
-        }
+          nameSpace: 'http://www.dspace.org/xmlns/dspace/dim',
+        },
       ],
-      _links: { self: { href: 'contentsource-selflink' } }
+      _links: { self: { href: 'contentsource-selflink' } },
     });
     fieldUpdate = {
       field: contentSource,
-      changeType: undefined
+      changeType: undefined,
     };
     objectUpdatesService = jasmine.createSpyObj('objectUpdatesService',
       {
         getFieldUpdates: observableOf({
-          [contentSource.uuid]: fieldUpdate
+          [contentSource.uuid]: fieldUpdate,
         }),
         saveAddFieldUpdate: {},
         discardFieldUpdates: {},
@@ -82,15 +105,15 @@ describe('CollectionSourceComponent', () => {
         getLastModified: observableOf(date),
         hasUpdates: observableOf(true),
         isReinstatable: observableOf(false),
-        isValidPage: observableOf(true)
-      }
+        isValidPage: observableOf(true),
+      },
     );
     notificationsService = jasmine.createSpyObj('notificationsService',
       {
         info: infoNotification,
         warning: warningNotification,
-        success: successNotification
-      }
+        success: successNotification,
+      },
     );
     location = jasmine.createSpyObj('location', ['back']);
     formService = Object.assign({
@@ -103,18 +126,18 @@ describe('CollectionSourceComponent', () => {
           return new UntypedFormGroup(controls);
         }
         return undefined;
-      }
+      },
     });
     router = Object.assign(new RouterStub(), {
-      url: 'http://test-url.com/test-url'
+      url: 'http://test-url.com/test-url',
     });
     collection = Object.assign(new Collection(), {
-      uuid: 'fake-collection-id'
+      uuid: 'fake-collection-id',
     });
     collectionService = jasmine.createSpyObj('collectionService', {
       getContentSource: createSuccessfulRemoteDataObject$(contentSource),
       updateContentSource: observableOf(contentSource),
-      getHarvesterEndpoint: observableOf('harvester-endpoint')
+      getHarvesterEndpoint: observableOf('harvester-endpoint'),
     });
     requestService = jasmine.createSpyObj('requestService', ['removeByHrefSubstring', 'setStaleByHrefSubstring']);
 
@@ -129,9 +152,9 @@ describe('CollectionSourceComponent', () => {
         { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } },
         { provide: Router, useValue: router },
         { provide: CollectionDataService, useValue: collectionService },
-        { provide: RequestService, useValue: requestService }
+        { provide: RequestService, useValue: requestService },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts
index 2d1308cc83..168ef543e8 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts
@@ -1,5 +1,14 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AbstractTrackableComponent } from '../../../shared/trackable/abstract-trackable.component';
+import { Location } from '@angular/common';
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import {
   DynamicFormControlModel,
   DynamicFormGroupModel,
@@ -8,29 +17,46 @@ import {
   DynamicInputModel,
   DynamicOptionControlModel,
   DynamicRadioGroupModel,
-  DynamicSelectModel
+  DynamicSelectModel,
 } from '@ng-dynamic-forms/core';
-import { Location } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
-import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { UntypedFormGroup } from '@angular/forms';
-import { hasNoValue, hasValue, isNotEmpty } from '../../../shared/empty.util';
-import { ContentSource, ContentSourceHarvestType } from '../../../core/shared/content-source.model';
-import { Observable, Subscription } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
-import { Collection } from '../../../core/shared/collection.model';
-import { first, map, switchMap, take } from 'rxjs/operators';
-import { ActivatedRoute, Router } from '@angular/router';
 import cloneDeep from 'lodash/cloneDeep';
-import { CollectionDataService } from '../../../core/data/collection-data.service';
-import { getFirstSucceededRemoteData, getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { MetadataConfig } from '../../../core/shared/metadata-config.model';
-import { INotification } from '../../../shared/notifications/models/notification.model';
-import { RequestService } from '../../../core/data/request.service';
+import {
+  Observable,
+  Subscription,
+} from 'rxjs';
+import {
+  first,
+  map,
+  switchMap,
+  take,
+} from 'rxjs/operators';
+
 import { environment } from '../../../../environments/environment';
+import { CollectionDataService } from '../../../core/data/collection-data.service';
 import { FieldUpdate } from '../../../core/data/object-updates/field-update.model';
 import { FieldUpdates } from '../../../core/data/object-updates/field-updates.model';
+import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
+import { RemoteData } from '../../../core/data/remote-data';
+import { RequestService } from '../../../core/data/request.service';
+import { Collection } from '../../../core/shared/collection.model';
+import {
+  ContentSource,
+  ContentSourceHarvestType,
+} from '../../../core/shared/content-source.model';
+import { MetadataConfig } from '../../../core/shared/metadata-config.model';
+import {
+  getFirstCompletedRemoteData,
+  getFirstSucceededRemoteData,
+} from '../../../core/shared/operators';
+import {
+  hasNoValue,
+  hasValue,
+  isNotEmpty,
+} from '../../../shared/empty.util';
+import { INotification } from '../../../shared/notifications/models/notification.model';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { AbstractTrackableComponent } from '../../../shared/trackable/abstract-trackable.component';
 
 /**
  * Component for managing the content source of the collection
@@ -84,11 +110,11 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
     name: 'oaiSource',
     required: true,
     validators: {
-      required: null
+      required: null,
     },
     errorMessages: {
-      required: 'You must provide a set id of the target collection.'
-    }
+      required: 'You must provide a set id of the target collection.',
+    },
   });
 
   /**
@@ -96,7 +122,7 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
    */
   oaiSetIdModel = new DynamicInputModel({
     id: 'oaiSetId',
-    name: 'oaiSetId'
+    name: 'oaiSetId',
   });
 
   /**
@@ -104,7 +130,7 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
    */
   metadataConfigIdModel = new DynamicSelectModel({
     id: 'metadataConfigId',
-    name: 'metadataConfigId'
+    name: 'metadataConfigId',
   });
 
   /**
@@ -115,15 +141,15 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
     name: 'harvestType',
     options: [
       {
-        value: ContentSourceHarvestType.Metadata
+        value: ContentSourceHarvestType.Metadata,
       },
       {
-        value: ContentSourceHarvestType.MetadataAndRef
+        value: ContentSourceHarvestType.MetadataAndRef,
       },
       {
-        value: ContentSourceHarvestType.MetadataAndBitstreams
-      }
-    ]
+        value: ContentSourceHarvestType.MetadataAndBitstreams,
+      },
+    ],
   });
 
   /**
@@ -139,22 +165,22 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
     new DynamicFormGroupModel({
       id: 'oaiSourceContainer',
       group: [
-        this.oaiSourceModel
-      ]
+        this.oaiSourceModel,
+      ],
     }),
     new DynamicFormGroupModel({
       id: 'oaiSetContainer',
       group: [
         this.oaiSetIdModel,
-        this.metadataConfigIdModel
-      ]
+        this.metadataConfigIdModel,
+      ],
     }),
     new DynamicFormGroupModel({
       id: 'harvestTypeContainer',
       group: [
-        this.harvestTypeModel
-      ]
-    })
+        this.harvestTypeModel,
+      ],
+    }),
   ];
 
   /**
@@ -163,40 +189,40 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
   formLayout: DynamicFormLayout = {
     oaiSource: {
       grid: {
-        host: 'col-12 d-inline-block'
-      }
+        host: 'col-12 d-inline-block',
+      },
     },
     oaiSetId: {
       grid: {
-        host: 'col col-sm-6 d-inline-block'
-      }
+        host: 'col col-sm-6 d-inline-block',
+      },
     },
     metadataConfigId: {
       grid: {
-        host: 'col col-sm-6 d-inline-block'
-      }
+        host: 'col col-sm-6 d-inline-block',
+      },
     },
     harvestType: {
       grid: {
         host: 'col-12',
-        option: 'btn-outline-secondary'
-      }
+        option: 'btn-outline-secondary',
+      },
     },
     oaiSetContainer: {
       grid: {
-        host: 'row'
-      }
+        host: 'row',
+      },
     },
     oaiSourceContainer: {
       grid: {
-        host: 'row'
-      }
+        host: 'row',
+      },
     },
     harvestTypeContainer: {
       grid: {
-        host: 'row'
-      }
-    }
+        host: 'row',
+      },
+    },
   };
 
   /**
@@ -279,7 +305,7 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
     const initialContentSource = cloneDeep(this.contentSource);
     this.objectUpdatesService.initialize(this.url, [initialContentSource], new Date());
     this.update$ = this.objectUpdatesService.getFieldUpdates(this.url, [initialContentSource]).pipe(
-      map((updates: FieldUpdates) => updates[initialContentSource.uuid])
+      map((updates: FieldUpdates) => updates[initialContentSource.uuid]),
     );
     this.updateSub = this.update$.subscribe((update: FieldUpdate) => {
       if (update) {
@@ -294,15 +320,15 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
         if (hasValue(field)) {
           this.formGroup.patchValue({
             oaiSourceContainer: {
-              oaiSource: field.oaiSource
+              oaiSource: field.oaiSource,
             },
             oaiSetContainer: {
               oaiSetId: field.oaiSetId,
-              metadataConfigId: configId
+              metadataConfigId: configId,
             },
             harvestTypeContainer: {
-              harvestType: field.harvestType
-            }
+              harvestType: field.harvestType,
+            },
           });
           this.contentSource = cloneDeep(field);
         }
@@ -320,8 +346,8 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
     if (this.metadataConfigIdModel.options.length > 0) {
       this.formGroup.patchValue({
         oaiSetContainer: {
-          metadataConfigId: this.metadataConfigIdModel.options[0].value
-        }
+          metadataConfigId: this.metadataConfigIdModel.options[0].value,
+        },
       });
     }
   }
@@ -333,7 +359,7 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
     this.inputModels.forEach(
       (fieldModel: DynamicFormControlModel) => {
         this.updateFieldTranslation(fieldModel);
-      }
+      },
     );
   }
 
@@ -378,7 +404,7 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
       getFirstSucceededRemoteData(),
       map((col) => col.payload.uuid),
       switchMap((uuid) => this.collectionService.getHarvesterEndpoint(uuid)),
-      take(1)
+      take(1),
     ).subscribe((endpoint) => this.requestService.removeByHrefSubstring(endpoint));
     this.requestService.setStaleByHrefSubstring(this.contentSource._links.self.href);
     // Update harvester
@@ -386,7 +412,7 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
       getFirstSucceededRemoteData(),
       map((col) => col.payload.uuid),
       switchMap((uuid) => this.collectionService.updateContentSource(uuid, this.contentSource)),
-      take(1)
+      take(1),
     ).subscribe((result: ContentSource | INotification) => {
       if (hasValue((result as any).harvestType)) {
         this.clearNotifications();
@@ -433,7 +459,7 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
     this.inputModels.forEach(
       (fieldModel: DynamicInputModel) => {
         this.updateContentSourceField(fieldModel, updateHarvestType);
-      }
+      },
     );
     this.saveFieldUpdate();
   }
diff --git a/src/app/collection-page/edit-collection-page/edit-collection-page.component.spec.ts b/src/app/collection-page/edit-collection-page/edit-collection-page.component.spec.ts
index 00f05f50c0..f3d51f3f61 100644
--- a/src/app/collection-page/edit-collection-page/edit-collection-page.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/edit-collection-page.component.spec.ts
@@ -1,39 +1,44 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ActivatedRoute } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { EditCollectionPageComponent } from './edit-collection-page.component';
-import { SharedModule } from '../../shared/shared.module';
-import { CollectionDataService } from '../../core/data/collection-data.service';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
 
+import { CollectionDataService } from '../../core/data/collection-data.service';
+import { SharedModule } from '../../shared/shared.module';
+import { EditCollectionPageComponent } from './edit-collection-page.component';
+
 describe('EditCollectionPageComponent', () => {
   let comp: EditCollectionPageComponent;
   let fixture: ComponentFixture;
 
   const routeStub = {
     data: observableOf({
-      dso: { payload: {} }
+      dso: { payload: {} },
     }),
     routeConfig: {
       children: [
         {
           path: 'mockUrl',
           data: {
-            hideReturnButton: false
-          }
-        }
-      ]
+            hideReturnButton: false,
+          },
+        },
+      ],
     },
     snapshot: {
       firstChild: {
         routeConfig: {
-          path: 'mockUrl'
-        }
-      }
-    }
+          path: 'mockUrl',
+        },
+      },
+    },
   };
 
   beforeEach(waitForAsync(() => {
@@ -44,7 +49,7 @@ describe('EditCollectionPageComponent', () => {
         { provide: CollectionDataService, useValue: {} },
         { provide: ActivatedRoute, useValue: routeStub },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
diff --git a/src/app/collection-page/edit-collection-page/edit-collection-page.component.ts b/src/app/collection-page/edit-collection-page/edit-collection-page.component.ts
index 62fbb3ee3d..ca0a98be72 100644
--- a/src/app/collection-page/edit-collection-page/edit-collection-page.component.ts
+++ b/src/app/collection-page/edit-collection-page/edit-collection-page.component.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { EditComColPageComponent } from '../../shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
+
 import { Collection } from '../../core/shared/collection.model';
+import { EditComColPageComponent } from '../../shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component';
 import { getCollectionPageRoute } from '../collection-page-routing-paths';
 
 /**
@@ -9,14 +13,14 @@ import { getCollectionPageRoute } from '../collection-page-routing-paths';
  */
 @Component({
   selector: 'ds-edit-collection',
-  templateUrl: '../../shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html'
+  templateUrl: '../../shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html',
 })
 export class EditCollectionPageComponent extends EditComColPageComponent {
   type = 'collection';
 
   public constructor(
     protected router: Router,
-    protected route: ActivatedRoute
+    protected route: ActivatedRoute,
   ) {
     super(router, route);
   }
diff --git a/src/app/collection-page/edit-collection-page/edit-collection-page.module.ts b/src/app/collection-page/edit-collection-page/edit-collection-page.module.ts
index 8d0cb179f1..e3791011b1 100644
--- a/src/app/collection-page/edit-collection-page/edit-collection-page.module.ts
+++ b/src/app/collection-page/edit-collection-page/edit-collection-page.module.ts
@@ -1,22 +1,21 @@
-import { NgModule } from '@angular/core';
-import { EditCollectionPageComponent } from './edit-collection-page.component';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { AccessControlFormModule } from '../../shared/access-control-form-container/access-control-form.module';
+import { ComcolModule } from '../../shared/comcol/comcol.module';
+import { FormModule } from '../../shared/form/form.module';
+import { ResourcePoliciesModule } from '../../shared/resource-policies/resource-policies.module';
 import { SharedModule } from '../../shared/shared.module';
-import { EditCollectionPageRoutingModule } from './edit-collection-page.routing.module';
+import { CollectionFormModule } from '../collection-form/collection-form.module';
+import { CollectionAccessControlComponent } from './collection-access-control/collection-access-control.component';
+import { CollectionAuthorizationsComponent } from './collection-authorizations/collection-authorizations.component';
+import { CollectionCurateComponent } from './collection-curate/collection-curate.component';
 import { CollectionMetadataComponent } from './collection-metadata/collection-metadata.component';
 import { CollectionRolesComponent } from './collection-roles/collection-roles.component';
-import { CollectionCurateComponent } from './collection-curate/collection-curate.component';
 import { CollectionSourceComponent } from './collection-source/collection-source.component';
-import { CollectionAuthorizationsComponent } from './collection-authorizations/collection-authorizations.component';
-import { CollectionFormModule } from '../collection-form/collection-form.module';
-import {
-  CollectionSourceControlsComponent
-} from './collection-source/collection-source-controls/collection-source-controls.component';
-import { ResourcePoliciesModule } from '../../shared/resource-policies/resource-policies.module';
-import { FormModule } from '../../shared/form/form.module';
-import { ComcolModule } from '../../shared/comcol/comcol.module';
-import { CollectionAccessControlComponent } from './collection-access-control/collection-access-control.component';
-import { AccessControlFormModule } from '../../shared/access-control-form-container/access-control-form.module';
+import { CollectionSourceControlsComponent } from './collection-source/collection-source-controls/collection-source-controls.component';
+import { EditCollectionPageComponent } from './edit-collection-page.component';
+import { EditCollectionPageRoutingModule } from './edit-collection-page.routing.module';
 
 /**
  * Module that contains all components related to the Edit Collection page administrator functionality
@@ -40,8 +39,8 @@ import { AccessControlFormModule } from '../../shared/access-control-form-contai
     CollectionSourceComponent,
     CollectionAccessControlComponent,
     CollectionSourceControlsComponent,
-    CollectionAuthorizationsComponent
-  ]
+    CollectionAuthorizationsComponent,
+  ],
 })
 export class EditCollectionPageModule {
 
diff --git a/src/app/collection-page/edit-collection-page/edit-collection-page.routing.module.ts b/src/app/collection-page/edit-collection-page/edit-collection-page.routing.module.ts
index c4481985c0..3a5aae54ed 100644
--- a/src/app/collection-page/edit-collection-page/edit-collection-page.routing.module.ts
+++ b/src/app/collection-page/edit-collection-page/edit-collection-page.routing.module.ts
@@ -1,19 +1,20 @@
-import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { I18nBreadcrumbResolver } from '../../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { CollectionAdministratorGuard } from '../../core/data/feature-authorization/feature-authorization-guard/collection-administrator.guard';
+import { ResourcePolicyCreateComponent } from '../../shared/resource-policies/create/resource-policy-create.component';
+import { ResourcePolicyEditComponent } from '../../shared/resource-policies/edit/resource-policy-edit.component';
+import { ResourcePolicyResolver } from '../../shared/resource-policies/resolvers/resource-policy.resolver';
+import { ResourcePolicyTargetResolver } from '../../shared/resource-policies/resolvers/resource-policy-target.resolver';
 import { CollectionItemMapperComponent } from '../collection-item-mapper/collection-item-mapper.component';
-import { EditCollectionPageComponent } from './edit-collection-page.component';
+import { CollectionAccessControlComponent } from './collection-access-control/collection-access-control.component';
+import { CollectionAuthorizationsComponent } from './collection-authorizations/collection-authorizations.component';
+import { CollectionCurateComponent } from './collection-curate/collection-curate.component';
 import { CollectionMetadataComponent } from './collection-metadata/collection-metadata.component';
 import { CollectionRolesComponent } from './collection-roles/collection-roles.component';
 import { CollectionSourceComponent } from './collection-source/collection-source.component';
-import { CollectionCurateComponent } from './collection-curate/collection-curate.component';
-import { CollectionAuthorizationsComponent } from './collection-authorizations/collection-authorizations.component';
-import { I18nBreadcrumbResolver } from '../../core/breadcrumbs/i18n-breadcrumb.resolver';
-import { ResourcePolicyTargetResolver } from '../../shared/resource-policies/resolvers/resource-policy-target.resolver';
-import { ResourcePolicyCreateComponent } from '../../shared/resource-policies/create/resource-policy-create.component';
-import { ResourcePolicyResolver } from '../../shared/resource-policies/resolvers/resource-policy.resolver';
-import { ResourcePolicyEditComponent } from '../../shared/resource-policies/edit/resource-policy-edit.component';
-import { CollectionAdministratorGuard } from '../../core/data/feature-authorization/feature-authorization-guard/collection-administrator.guard';
-import { CollectionAccessControlComponent } from './collection-access-control/collection-access-control.component';
+import { EditCollectionPageComponent } from './edit-collection-page.component';
 
 /**
  * Routing module that handles the routing for the Edit Collection page administrator functionality
@@ -24,7 +25,7 @@ import { CollectionAccessControlComponent } from './collection-access-control/co
       {
         path: '',
         resolve: {
-          breadcrumb: I18nBreadcrumbResolver
+          breadcrumb: I18nBreadcrumbResolver,
         },
         data: { breadcrumbKey: 'collection.edit' },
         component: EditCollectionPageComponent,
@@ -33,7 +34,7 @@ import { CollectionAccessControlComponent } from './collection-access-control/co
           {
             path: '',
             redirectTo: 'metadata',
-            pathMatch: 'full'
+            pathMatch: 'full',
           },
           {
             path: 'metadata',
@@ -41,30 +42,30 @@ import { CollectionAccessControlComponent } from './collection-access-control/co
             data: {
               title: 'collection.edit.tabs.metadata.title',
               hideReturnButton: true,
-              showBreadcrumbs: true
-            }
+              showBreadcrumbs: true,
+            },
           },
           {
             path: 'roles',
             component: CollectionRolesComponent,
-            data: { title: 'collection.edit.tabs.roles.title', showBreadcrumbs: true }
+            data: { title: 'collection.edit.tabs.roles.title', showBreadcrumbs: true },
           },
           {
             path: 'source',
             component: CollectionSourceComponent,
-            data: { title: 'collection.edit.tabs.source.title', showBreadcrumbs: true }
+            data: { title: 'collection.edit.tabs.source.title', showBreadcrumbs: true },
           },
           {
             path: 'curate',
             component: CollectionCurateComponent,
-            data: { title: 'collection.edit.tabs.curate.title', showBreadcrumbs: true }
+            data: { title: 'collection.edit.tabs.curate.title', showBreadcrumbs: true },
           },
           {
             path: 'access-control',
             component: CollectionAccessControlComponent,
-            data: { title: 'collection.edit.tabs.access-control.title', showBreadcrumbs: true }
+            data: { title: 'collection.edit.tabs.access-control.title', showBreadcrumbs: true },
           },
-/*          {
+          /*          {
             path: 'authorizations',
             component: CollectionAuthorizationsComponent,
             data: { title: 'collection.edit.tabs.authorizations.title', showBreadcrumbs: true }
@@ -76,39 +77,39 @@ import { CollectionAccessControlComponent } from './collection-access-control/co
               {
                 path: 'create',
                 resolve: {
-                  resourcePolicyTarget: ResourcePolicyTargetResolver
+                  resourcePolicyTarget: ResourcePolicyTargetResolver,
                 },
                 component: ResourcePolicyCreateComponent,
-                data: { title: 'resource-policies.create.page.title' }
+                data: { title: 'resource-policies.create.page.title' },
               },
               {
                 path: 'edit',
                 resolve: {
-                  resourcePolicy: ResourcePolicyResolver
+                  resourcePolicy: ResourcePolicyResolver,
                 },
                 component: ResourcePolicyEditComponent,
-                data: { title: 'resource-policies.edit.page.title' }
+                data: { title: 'resource-policies.edit.page.title' },
               },
               {
                 path: '',
                 component: CollectionAuthorizationsComponent,
-                data: { title: 'collection.edit.tabs.authorizations.title', showBreadcrumbs: true }
-              }
-            ]
+                data: { title: 'collection.edit.tabs.authorizations.title', showBreadcrumbs: true },
+              },
+            ],
           },
           {
             path: 'mapper',
             component: CollectionItemMapperComponent,
-            data: { title: 'collection.edit.tabs.item-mapper.title', hideReturnButton: true, showBreadcrumbs: true }
+            data: { title: 'collection.edit.tabs.item-mapper.title', hideReturnButton: true, showBreadcrumbs: true },
           },
-        ]
-      }
-    ])
+        ],
+      },
+    ]),
   ],
   providers: [
     ResourcePolicyResolver,
-    ResourcePolicyTargetResolver
-  ]
+    ResourcePolicyTargetResolver,
+  ],
 })
 export class EditCollectionPageRoutingModule {
 
diff --git a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
index 20afd701ff..8d095dd229 100644
--- a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
+++ b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -2,7 +2,7 @@
   

     

       
-        
{{ 'collection.edit.template.head' | translate:{ collection: dsoNameService.getName(collection) } }}

+        
{{ 'collection.edit.template.head' | translate:{ collection: dsoNameService.getName(collection) } }}

         
         
       
diff --git a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
index 72b776dd7d..068f799681 100644
--- a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
+++ b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
@@ -1,16 +1,24 @@
-import { EditItemTemplatePageComponent } from './edit-item-template-page.component';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { SharedModule } from '../../shared/shared.module';
-import { RouterTestingModule } from '@angular/router/testing';
 import { CommonModule } from '@angular/common';
-import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
-import { ActivatedRoute } from '@angular/router';
-import { of as observableOf } from 'rxjs';
-import { Collection } from '../../core/shared/collection.model';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
+import { Collection } from '../../core/shared/collection.model';
+import {
+  createSuccessfulRemoteDataObject,
+  createSuccessfulRemoteDataObject$,
+} from '../../shared/remote-data.utils';
+import { SharedModule } from '../../shared/shared.module';
 import { getCollectionEditRoute } from '../collection-page-routing-paths';
+import { EditItemTemplatePageComponent } from './edit-item-template-page.component';
 
 describe('EditItemTemplatePageComponent', () => {
   let comp: EditItemTemplatePageComponent;
@@ -22,19 +30,19 @@ describe('EditItemTemplatePageComponent', () => {
     collection = Object.assign(new Collection(), {
       uuid: 'collection-id',
       id: 'collection-id',
-      name: 'Fake Collection'
+      name: 'Fake Collection',
     });
     itemTemplateService = jasmine.createSpyObj('itemTemplateService', {
-      findByCollectionID: createSuccessfulRemoteDataObject$({})
+      findByCollectionID: createSuccessfulRemoteDataObject$({}),
     });
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), SharedModule, CommonModule, RouterTestingModule],
       declarations: [EditItemTemplatePageComponent],
       providers: [
         { provide: ItemTemplateDataService, useValue: itemTemplateService },
-        { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } }
+        { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
diff --git a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts
index 238ec5e37a..9dfe14e72d 100644
--- a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts
+++ b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -1,15 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
+import {
+  first,
+  map,
+  switchMap,
+} from 'rxjs/operators';
+
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
 import { RemoteData } from '../../core/data/remote-data';
 import { Collection } from '../../core/shared/collection.model';
-import { ActivatedRoute } from '@angular/router';
-import { first, map, switchMap } from 'rxjs/operators';
-import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
-import { getCollectionEditRoute } from '../collection-page-routing-paths';
 import { Item } from '../../core/shared/item.model';
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { AlertType } from '../../shared/alert/alert-type';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { getCollectionEditRoute } from '../collection-page-routing-paths';
 
 @Component({
   selector: 'ds-edit-item-template-page',
diff --git a/src/app/collection-page/edit-item-template-page/item-template-page.resolver.spec.ts b/src/app/collection-page/edit-item-template-page/item-template-page.resolver.spec.ts
index 95f0d888e4..ced1ca9323 100644
--- a/src/app/collection-page/edit-item-template-page/item-template-page.resolver.spec.ts
+++ b/src/app/collection-page/edit-item-template-page/item-template-page.resolver.spec.ts
@@ -1,9 +1,9 @@
 import { first } from 'rxjs/operators';
 
-import { ItemTemplatePageResolver } from './item-template-page.resolver';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock } from '../../shared/mocks/dso-name.service.mock';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { ItemTemplatePageResolver } from './item-template-page.resolver';
 
 describe('ItemTemplatePageResolver', () => {
   describe('resolve', () => {
@@ -14,7 +14,7 @@ describe('ItemTemplatePageResolver', () => {
 
     beforeEach(() => {
       itemTemplateService = {
-        findByCollectionID: (id: string) => createSuccessfulRemoteDataObject$({ id })
+        findByCollectionID: (id: string) => createSuccessfulRemoteDataObject$({ id }),
       };
       dsoNameService = new DSONameServiceMock();
       resolver = new ItemTemplatePageResolver(dsoNameService as DSONameService, itemTemplateService);
@@ -27,7 +27,7 @@ describe('ItemTemplatePageResolver', () => {
           (resolved) => {
             expect(resolved.payload.id).toEqual(uuid);
             done();
-          }
+          },
         );
     });
   });
diff --git a/src/app/collection-page/edit-item-template-page/item-template-page.resolver.ts b/src/app/collection-page/edit-item-template-page/item-template-page.resolver.ts
index 586617c44c..08553d9e93 100644
--- a/src/app/collection-page/edit-item-template-page/item-template-page.resolver.ts
+++ b/src/app/collection-page/edit-item-template-page/item-template-page.resolver.ts
@@ -1,12 +1,17 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import {
+  ActivatedRouteSnapshot,
+  Resolve,
+  RouterStateSnapshot,
+} from '@angular/router';
+import { Observable } from 'rxjs';
+
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
 import { RemoteData } from '../../core/data/remote-data';
 import { Item } from '../../core/shared/item.model';
-import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
-import { Observable } from 'rxjs';
-import { followLink } from '../../shared/utils/follow-link-config.model';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { followLink } from '../../shared/utils/follow-link-config.model';
 
 /**
  * This class represents a resolver that requests a specific collection's item template before the route is activated
diff --git a/src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts b/src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts
index b53f4e6c45..3cf4eafdc7 100644
--- a/src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts
+++ b/src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { EditItemTemplatePageComponent } from './edit-item-template-page.component';
 
diff --git a/src/app/collection-page/themed-collection-page.component.ts b/src/app/collection-page/themed-collection-page.component.ts
index 2faf418423..ff4e246e7d 100644
--- a/src/app/collection-page/themed-collection-page.component.ts
+++ b/src/app/collection-page/themed-collection-page.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { CollectionPageComponent } from './collection-page.component';
 
diff --git a/src/app/community-list-page/community-list-datasource.ts b/src/app/community-list-page/community-list-datasource.ts
index e2a2bb748f..95acc9dd86 100644
--- a/src/app/community-list-page/community-list-datasource.ts
+++ b/src/app/community-list-page/community-list-datasource.ts
@@ -1,10 +1,18 @@
-import { hasValue } from '../shared/empty.util';
-import { CommunityListService} from './community-list-service';
-import { CollectionViewer, DataSource } from '@angular/cdk/collections';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import {
+  CollectionViewer,
+  DataSource,
+} from '@angular/cdk/collections';
+import {
+  BehaviorSubject,
+  Observable,
+  Subscription,
+} from 'rxjs';
 import { finalize } from 'rxjs/operators';
-import { FlatNode } from './flat-node.model';
+
 import { FindListOptions } from '../core/data/find-list-options.model';
+import { hasValue } from '../shared/empty.util';
+import { CommunityListService } from './community-list-service';
+import { FlatNode } from './flat-node.model';
 
 /**
  * DataSource object needed by a CDK Tree to render its nodes.
diff --git a/src/app/community-list-page/community-list-page.component.spec.ts b/src/app/community-list-page/community-list-page.component.spec.ts
index 080a0a9e18..60933a0677 100644
--- a/src/app/community-list-page/community-list-page.component.spec.ts
+++ b/src/app/community-list-page/community-list-page.component.spec.ts
@@ -1,9 +1,17 @@
-import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { CommunityListPageComponent } from './community-list-page.component';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  inject,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import {
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
+
+import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
+import { CommunityListPageComponent } from './community-list-page.component';
 
 describe('CommunityListPageComponent', () => {
   let component: CommunityListPageComponent;
@@ -15,7 +23,7 @@ describe('CommunityListPageComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
+            useClass: TranslateLoaderMock,
           },
         }),
       ],
diff --git a/src/app/community-list-page/community-list-page.module.ts b/src/app/community-list-page/community-list-page.module.ts
index 15946b2e89..330e3f0346 100644
--- a/src/app/community-list-page/community-list-page.module.ts
+++ b/src/app/community-list-page/community-list-page.module.ts
@@ -1,19 +1,20 @@
+import { CdkTreeModule } from '@angular/cdk/tree';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+
 import { SharedModule } from '../shared/shared.module';
+import { CommunityListComponent } from './community-list/community-list.component';
+import { ThemedCommunityListComponent } from './community-list/themed-community-list.component';
 import { CommunityListPageComponent } from './community-list-page.component';
 import { CommunityListPageRoutingModule } from './community-list-page.routing.module';
-import { CommunityListComponent } from './community-list/community-list.component';
 import { ThemedCommunityListPageComponent } from './themed-community-list-page.component';
-import { ThemedCommunityListComponent } from './community-list/themed-community-list.component';
-import { CdkTreeModule } from '@angular/cdk/tree';
 
 
 const DECLARATIONS = [
   CommunityListPageComponent,
   CommunityListComponent,
   ThemedCommunityListPageComponent,
-  ThemedCommunityListComponent
+  ThemedCommunityListComponent,
 ];
 /**
  * The page which houses a title and the community list, as described in community-list.component
@@ -26,7 +27,7 @@ const DECLARATIONS = [
     CdkTreeModule,
   ],
   declarations: [
-    ...DECLARATIONS
+    ...DECLARATIONS,
   ],
   exports: [
     ...DECLARATIONS,
diff --git a/src/app/community-list-page/community-list-page.routing.module.ts b/src/app/community-list-page/community-list-page.routing.module.ts
index 1754b1b7cf..98d305c312 100644
--- a/src/app/community-list-page/community-list-page.routing.module.ts
+++ b/src/app/community-list-page/community-list-page.routing.module.ts
@@ -1,10 +1,10 @@
+import { CdkTreeModule } from '@angular/cdk/tree';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { CdkTreeModule } from '@angular/cdk/tree';
 
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { CommunityListService } from './community-list-service';
 import { ThemedCommunityListPageComponent } from './themed-community-list-page.component';
-import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 
 /**
  * RouterModule to help navigate to the page with the community list tree
@@ -17,14 +17,14 @@ import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.reso
         component: ThemedCommunityListPageComponent,
         pathMatch: 'full',
         resolve: {
-          breadcrumb: I18nBreadcrumbResolver
+          breadcrumb: I18nBreadcrumbResolver,
         },
-        data: { title: 'communityList.tabTitle', breadcrumbKey: 'communityList' }
-      }
+        data: { title: 'communityList.tabTitle', breadcrumbKey: 'communityList' },
+      },
     ]),
     CdkTreeModule,
   ],
-  providers: [CommunityListService]
+  providers: [CommunityListService],
 })
 export class CommunityListPageRoutingModule {
 }
diff --git a/src/app/community-list-page/community-list-service.spec.ts b/src/app/community-list-page/community-list-service.spec.ts
index 410dd9f804..28d3cfe1a9 100644
--- a/src/app/community-list-page/community-list-service.spec.ts
+++ b/src/app/community-list-page/community-list-service.spec.ts
@@ -1,23 +1,36 @@
-import { inject, TestBed } from '@angular/core/testing';
+import {
+  inject,
+  TestBed,
+} from '@angular/core/testing';
 import { Store } from '@ngrx/store';
 import { of as observableOf } from 'rxjs';
 import { take } from 'rxjs/operators';
-import { AppState } from '../app.reducer';
-import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
-import { buildPaginatedList } from '../core/data/paginated-list.model';
-import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
-import { StoreMock } from '../shared/testing/store.mock';
-import { CommunityListService, toFlatNode } from './community-list-service';
-import { CollectionDataService } from '../core/data/collection-data.service';
-import { CommunityDataService } from '../core/data/community-data.service';
-import { Community } from '../core/shared/community.model';
-import { Collection } from '../core/shared/collection.model';
-import { PageInfo } from '../core/shared/page-info.model';
-import { FlatNode } from './flat-node.model';
-import { FindListOptions } from '../core/data/find-list-options.model';
 import { APP_CONFIG } from 'src/config/app-config.interface';
 import { environment } from 'src/environments/environment.test';
 
+import { AppState } from '../app.reducer';
+import {
+  SortDirection,
+  SortOptions,
+} from '../core/cache/models/sort-options.model';
+import { CollectionDataService } from '../core/data/collection-data.service';
+import { CommunityDataService } from '../core/data/community-data.service';
+import { FindListOptions } from '../core/data/find-list-options.model';
+import { buildPaginatedList } from '../core/data/paginated-list.model';
+import { Collection } from '../core/shared/collection.model';
+import { Community } from '../core/shared/community.model';
+import { PageInfo } from '../core/shared/page-info.model';
+import {
+  createFailedRemoteDataObject$,
+  createSuccessfulRemoteDataObject$,
+} from '../shared/remote-data.utils';
+import { StoreMock } from '../shared/testing/store.mock';
+import {
+  CommunityListService,
+  toFlatNode,
+} from './community-list-service';
+import { FlatNode } from './flat-node.model';
+
 describe('CommunityListService', () => {
   let store: StoreMock;
   const standardElementsPerPage = 2;
@@ -38,34 +51,34 @@ describe('CommunityListService', () => {
       id: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88',
       uuid: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88',
     }),
-      Object.assign(new Community(), {
-        id: '59ee713b-ee53-4220-8c3f-9860dc84fe33',
-        uuid: '59ee713b-ee53-4220-8c3f-9860dc84fe33',
-      })
+    Object.assign(new Community(), {
+      id: '59ee713b-ee53-4220-8c3f-9860dc84fe33',
+      uuid: '59ee713b-ee53-4220-8c3f-9860dc84fe33',
+    }),
     ];
     mockCollectionsPage1 = [
       Object.assign(new Collection(), {
         id: 'e9dbf393-7127-415f-8919-55be34a6e9ed',
         uuid: 'e9dbf393-7127-415f-8919-55be34a6e9ed',
-        name: 'Collection 1'
+        name: 'Collection 1',
       }),
       Object.assign(new Collection(), {
         id: '59da2ff0-9bf4-45bf-88be-e35abd33f304',
         uuid: '59da2ff0-9bf4-45bf-88be-e35abd33f304',
-        name: 'Collection 2'
-      })
+        name: 'Collection 2',
+      }),
     ];
     mockCollectionsPage2 = [
       Object.assign(new Collection(), {
         id: 'a5159760-f362-4659-9e81-e3253ad91ede',
         uuid: 'a5159760-f362-4659-9e81-e3253ad91ede',
-        name: 'Collection 3'
+        name: 'Collection 3',
       }),
       Object.assign(new Collection(), {
         id: 'a392e16b-fcf2-400a-9a88-53ef7ecbdcd3',
         uuid: 'a392e16b-fcf2-400a-9a88-53ef7ecbdcd3',
-        name: 'Collection 4'
-      })
+        name: 'Collection 4',
+      }),
     ];
     mockListOfTopCommunitiesPage1 = [
       Object.assign(new Community(), {
@@ -164,7 +177,7 @@ describe('CommunityListService', () => {
         } else {
           return createFailedRemoteDataObject$();
         }
-      }
+      },
     };
     collectionDataServiceStub = {
       findByParent(parentUUID: string, options: FindListOptions = {}) {
@@ -189,7 +202,7 @@ describe('CommunityListService', () => {
         } else {
           return createFailedRemoteDataObject$();
         }
-      }
+      },
     };
     TestBed.configureTestingModule({
       providers: [CommunityListService,
@@ -217,7 +230,7 @@ describe('CommunityListService', () => {
 
           service.loadCommunities({
             currentPage: 2,
-            sort: new SortOptions('dc.title', SortDirection.ASC)
+            sort: new SortOptions('dc.title', SortDirection.ASC),
           }, null)
             .pipe(take(1))
             .subscribe((value) => {
@@ -246,7 +259,7 @@ describe('CommunityListService', () => {
         beforeEach((done) => {
           service.loadCommunities({
             currentPage: 1,
-            sort: new SortOptions('dc.title', SortDirection.ASC)
+            sort: new SortOptions('dc.title', SortDirection.ASC),
           }, null)
             .pipe(take(1))
             .subscribe((value) => {
@@ -279,7 +292,7 @@ describe('CommunityListService', () => {
           });
           service.loadCommunities({
             currentPage: 1,
-            sort: new SortOptions('dc.title', SortDirection.ASC)
+            sort: new SortOptions('dc.title', SortDirection.ASC),
           }, expandedNodes)
             .pipe(take(1))
             .subscribe((value) => {
@@ -307,7 +320,7 @@ describe('CommunityListService', () => {
           const expandedNodes = [communityFlatNode];
           service.loadCommunities({
             currentPage: 1,
-            sort: new SortOptions('dc.title', SortDirection.ASC)
+            sort: new SortOptions('dc.title', SortDirection.ASC),
           }, expandedNodes)
             .pipe(take(1))
             .subscribe((value) => {
@@ -332,7 +345,7 @@ describe('CommunityListService', () => {
           const expandedNodes = [communityFlatNode];
           service.loadCommunities({
             currentPage: 1,
-            sort: new SortOptions('dc.title', SortDirection.ASC)
+            sort: new SortOptions('dc.title', SortDirection.ASC),
           }, expandedNodes)
             .pipe(take(1))
             .subscribe((value) => {
@@ -429,8 +442,8 @@ describe('CommunityListService', () => {
           collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
           metadata: {
             'dc.description': [{ language: 'en_US', value: 'no subcoms, 2 coll' }],
-            'dc.title': [{ language: 'en_US', value: 'Community 2' }]
-          }
+            'dc.title': [{ language: 'en_US', value: 'Community 2' }],
+          },
         });
         let flatNodeList;
         describe('should return list containing only flatnode corresponding to that community', () => {
@@ -461,8 +474,8 @@ describe('CommunityListService', () => {
           collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
           metadata: {
             'dc.description': [{ language: 'en_US', value: '2 subcoms, no coll' }],
-            'dc.title': [{ language: 'en_US', value: 'Community 1' }]
-          }
+            'dc.title': [{ language: 'en_US', value: 'Community 1' }],
+          },
         });
         let flatNodeList;
         describe('should return list containing only flatnode corresponding to that community', () => {
@@ -495,8 +508,8 @@ describe('CommunityListService', () => {
             collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
             metadata: {
               'dc.description': [{ language: 'en_US', value: '2 subcoms, no coll' }],
-              'dc.title': [{ language: 'en_US', value: 'Community 1' }]
-            }
+              'dc.title': [{ language: 'en_US', value: 'Community 1' }],
+            },
           });
           let flatNodeList;
           beforeEach((done) => {
@@ -540,8 +553,8 @@ describe('CommunityListService', () => {
               collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [...mockCollectionsPage1, ...mockCollectionsPage2])),
               metadata: {
                 'dc.description': [{ language: 'en_US', value: '2 subcoms, no coll' }],
-                'dc.title': [{ language: 'en_US', value: 'Community 1' }]
-              }
+                'dc.title': [{ language: 'en_US', value: 'Community 1' }],
+              },
             });
             const communityFlatNode = toFlatNode(communityWithCollections, observableOf(true), 0, true, null);
             communityFlatNode.currentCollectionPage = 2;
@@ -591,8 +604,8 @@ describe('CommunityListService', () => {
           collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
           metadata: {
             'dc.description': [{ language: 'en_US', value: '2 subcoms, no coll' }],
-            'dc.title': [{ language: 'en_US', value: 'Community 1' }]
-          }
+            'dc.title': [{ language: 'en_US', value: 'Community 1' }],
+          },
         });
         service.getIsExpandable(communityWithSubcoms).pipe(take(1)).subscribe((result) => {
           expect(result).toEqual(true);
@@ -607,8 +620,8 @@ describe('CommunityListService', () => {
           collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), mockCollectionsPage1)),
           metadata: {
             'dc.description': [{ language: 'en_US', value: 'no subcoms, 2 coll' }],
-            'dc.title': [{ language: 'en_US', value: 'Community 2' }]
-          }
+            'dc.title': [{ language: 'en_US', value: 'Community 2' }],
+          },
         });
         service.getIsExpandable(communityWithCollections).pipe(take(1)).subscribe((result) => {
           expect(result).toEqual(true);
@@ -625,8 +638,8 @@ describe('CommunityListService', () => {
           collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
           metadata: {
             'dc.description': [{ language: 'en_US', value: 'no subcoms, no coll' }],
-            'dc.title': [{ language: 'en_US', value: 'Community 3' }]
-          }
+            'dc.title': [{ language: 'en_US', value: 'Community 3' }],
+          },
         });
         service.getIsExpandable(communityWithNoSubcomsOrColls).pipe(take(1)).subscribe((result) => {
           expect(result).toEqual(false);
diff --git a/src/app/community-list-page/community-list-service.ts b/src/app/community-list-page/community-list-service.ts
index bbf1c7cdb5..705dcc7e5d 100644
--- a/src/app/community-list-page/community-list-service.ts
+++ b/src/app/community-list-page/community-list-service.ts
@@ -1,30 +1,55 @@
 /* eslint-disable max-classes-per-file */
-import { Inject, Injectable } from '@angular/core';
-import { createSelector, Store } from '@ngrx/store';
-
-import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
-import { filter, map, switchMap } from 'rxjs/operators';
+import {
+  Inject,
+  Injectable,
+} from '@angular/core';
+import {
+  createSelector,
+  Store,
+} from '@ngrx/store';
+import {
+  combineLatest as observableCombineLatest,
+  Observable,
+  of as observableOf,
+} from 'rxjs';
+import {
+  filter,
+  map,
+  switchMap,
+} from 'rxjs/operators';
+import {
+  APP_CONFIG,
+  AppConfig,
+} from 'src/config/app-config.interface';
+import { v4 as uuidv4 } from 'uuid';
 
 import { AppState } from '../app.reducer';
-import { CommunityDataService } from '../core/data/community-data.service';
-import { Community } from '../core/shared/community.model';
-import { Collection } from '../core/shared/collection.model';
-import { PageInfo } from '../core/shared/page-info.model';
-import { hasValue, isNotEmpty } from '../shared/empty.util';
-import { RemoteData } from '../core/data/remote-data';
-import { buildPaginatedList, PaginatedList } from '../core/data/paginated-list.model';
+import { getCollectionPageRoute } from '../collection-page/collection-page-routing-paths';
+import { getCommunityPageRoute } from '../community-page/community-page-routing-paths';
 import { CollectionDataService } from '../core/data/collection-data.service';
+import { CommunityDataService } from '../core/data/community-data.service';
+import { FindListOptions } from '../core/data/find-list-options.model';
+import {
+  buildPaginatedList,
+  PaginatedList,
+} from '../core/data/paginated-list.model';
+import { RemoteData } from '../core/data/remote-data';
+import { Collection } from '../core/shared/collection.model';
+import { Community } from '../core/shared/community.model';
+import {
+  getFirstCompletedRemoteData,
+  getFirstSucceededRemoteData,
+} from '../core/shared/operators';
+import { PageInfo } from '../core/shared/page-info.model';
+import {
+  hasValue,
+  isNotEmpty,
+} from '../shared/empty.util';
+import { followLink } from '../shared/utils/follow-link-config.model';
 import { CommunityListSaveAction } from './community-list.actions';
 import { CommunityListState } from './community-list.reducer';
-import { getCommunityPageRoute } from '../community-page/community-page-routing-paths';
-import { getCollectionPageRoute } from '../collection-page/collection-page-routing-paths';
-import { getFirstCompletedRemoteData, getFirstSucceededRemoteData } from '../core/shared/operators';
-import { followLink } from '../shared/utils/follow-link-config.model';
 import { FlatNode } from './flat-node.model';
 import { ShowMoreFlatNode } from './show-more-flat-node.model';
-import { FindListOptions } from '../core/data/find-list-options.model';
-import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
-import { v4 as uuidv4 } from 'uuid';
 
 // Helper method to combine and flatten an array of observables of flatNode arrays
 export const combineAndFlatten = (obsList: Observable[]): Observable =>
@@ -46,7 +71,7 @@ export const toFlatNode = (
   isExpandable: Observable,
   level: number,
   isExpanded: boolean,
-  parent?: FlatNode
+  parent?: FlatNode,
 ): FlatNode => ({
   isExpandable$: isExpandable,
   name: c.name,
@@ -65,7 +90,7 @@ export const toFlatNode = (
 export const showMoreFlatNode = (
   id: string,
   level: number,
-  parent: FlatNode
+  parent: FlatNode,
 ): FlatNode => ({
   isExpandable$: observableOf(false),
   name: 'Show More Flatnode',
@@ -95,13 +120,13 @@ export class CommunityListService {
     @Inject(APP_CONFIG) protected appConfig: AppConfig,
     private communityDataService: CommunityDataService,
     private collectionDataService: CollectionDataService,
-    private store: Store
+    private store: Store,
   ) {
     this.pageSize = appConfig.communityList.pageSize;
   }
 
   private configOnePage: FindListOptions = Object.assign(new FindListOptions(), {
-    elementsPerPage: 1
+    elementsPerPage: 1,
   });
 
   saveCommunityListStateToStore(expandedNodes: FlatNode[], loadingNode: FlatNode): void {
@@ -138,7 +163,7 @@ export class CommunityListService {
           newPageInfo = Object.assign({}, coms[0].pageInfo, { currentPage });
         }
         return buildPaginatedList(newPageInfo, newPage);
-      })
+      }),
     );
     return topComs$.pipe(
       switchMap((topComs: PaginatedList) => this.transformListOfCommunities(topComs, 0, null, expandedNodes)),
@@ -151,15 +176,15 @@ export class CommunityListService {
    */
   private getTopCommunities(options: FindListOptions): Observable> {
     return this.communityDataService.findTop({
-        currentPage: options.currentPage,
-        elementsPerPage: this.pageSize,
-        sort: {
-          field: options.sort.field,
-          direction: options.sort.direction
-        }
+      currentPage: options.currentPage,
+      elementsPerPage: this.pageSize,
+      sort: {
+        field: options.sort.field,
+        direction: options.sort.direction,
       },
-      followLink('subcommunities', { findListOptions: this.configOnePage }),
-      followLink('collections', { findListOptions: this.configOnePage }))
+    },
+    followLink('subcommunities', { findListOptions: this.configOnePage }),
+    followLink('collections', { findListOptions: this.configOnePage }))
       .pipe(
         getFirstSucceededRemoteData(),
         map((results) => results.payload),
@@ -174,9 +199,9 @@ export class CommunityListService {
    * @param expandedNodes                 List of expanded nodes; if a node is not expanded its subcommunities and collections need not be added to the list
    */
   public transformListOfCommunities(listOfPaginatedCommunities: PaginatedList,
-                                    level: number,
-                                    parent: FlatNode,
-                                    expandedNodes: FlatNode[]): Observable {
+    level: number,
+    parent: FlatNode,
+    expandedNodes: FlatNode[]): Observable {
     if (isNotEmpty(listOfPaginatedCommunities.page)) {
       let currentPage = listOfPaginatedCommunities.currentPage;
       if (isNotEmpty(parent)) {
@@ -223,11 +248,11 @@ export class CommunityListService {
       let subcoms = [];
       for (let i = 1; i <= currentCommunityPage; i++) {
         const nextSetOfSubcommunitiesPage = this.communityDataService.findByParent(community.uuid, {
-            elementsPerPage: this.pageSize,
-            currentPage: i
-          },
-          followLink('subcommunities', { findListOptions: this.configOnePage }),
-          followLink('collections', { findListOptions: this.configOnePage }))
+          elementsPerPage: this.pageSize,
+          currentPage: i,
+        },
+        followLink('subcommunities', { findListOptions: this.configOnePage }),
+        followLink('collections', { findListOptions: this.configOnePage }))
           .pipe(
             getFirstCompletedRemoteData(),
             switchMap((rd: RemoteData>) => {
@@ -236,7 +261,7 @@ export class CommunityListService {
               } else {
                 return observableOf([]);
               }
-            })
+            }),
           );
 
         subcoms = [...subcoms, nextSetOfSubcommunitiesPage];
@@ -249,7 +274,7 @@ export class CommunityListService {
       for (let i = 1; i <= currentCollectionPage; i++) {
         const nextSetOfCollectionsPage = this.collectionDataService.findByParent(community.uuid, {
           elementsPerPage: this.pageSize,
-          currentPage: i
+          currentPage: i,
         })
           .pipe(
             getFirstCompletedRemoteData(),
@@ -281,9 +306,7 @@ export class CommunityListService {
    * @param community     Community being checked whether it is expandable (if it has subcommunities or collections)
    */
   public getIsExpandable(community: Community): Observable {
-    let hasSubcoms$: Observable;
-    let hasColls$: Observable;
-    hasSubcoms$ = this.communityDataService.findByParent(community.uuid, this.configOnePage)
+    const hasSubcoms$ = this.communityDataService.findByParent(community.uuid, this.configOnePage)
       .pipe(
         map((rd: RemoteData>) => {
           if (hasValue(rd) && hasValue(rd.payload)) {
@@ -294,7 +317,7 @@ export class CommunityListService {
         }),
       );
 
-    hasColls$ = this.collectionDataService.findByParent(community.uuid, this.configOnePage)
+    const hasColls$ = this.collectionDataService.findByParent(community.uuid, this.configOnePage)
       .pipe(
         map((rd: RemoteData>) => {
           if (hasValue(rd) && hasValue(rd.payload)) {
@@ -305,12 +328,9 @@ export class CommunityListService {
         }),
       );
 
-    let hasChildren$: Observable;
-    hasChildren$ = observableCombineLatest(hasSubcoms$, hasColls$).pipe(
-      map(([hasSubcoms, hasColls]: [boolean, boolean]) => hasSubcoms || hasColls)
+    return observableCombineLatest(hasSubcoms$, hasColls$).pipe(
+      map(([hasSubcoms, hasColls]: [boolean, boolean]) => hasSubcoms || hasColls),
     );
-
-    return hasChildren$;
   }
 
 }
diff --git a/src/app/community-list-page/community-list.actions.ts b/src/app/community-list-page/community-list.actions.ts
index 8e8d6d87cf..47c72af9f7 100644
--- a/src/app/community-list-page/community-list.actions.ts
+++ b/src/app/community-list-page/community-list.actions.ts
@@ -1,4 +1,5 @@
 import { Action } from '@ngrx/store';
+
 import { type } from '../shared/ngrx/type';
 import { FlatNode } from './flat-node.model';
 
@@ -7,7 +8,7 @@ import { FlatNode } from './flat-node.model';
  */
 
 export const CommunityListActionTypes = {
-  SAVE: type('dspace/community-list-page/SAVE')
+  SAVE: type('dspace/community-list-page/SAVE'),
 };
 
 /**
diff --git a/src/app/community-list-page/community-list.reducer.spec.ts b/src/app/community-list-page/community-list.reducer.spec.ts
index 0d0f5c7580..abbd16d4cd 100644
--- a/src/app/community-list-page/community-list.reducer.spec.ts
+++ b/src/app/community-list-page/community-list.reducer.spec.ts
@@ -1,11 +1,12 @@
 import { of as observableOf } from 'rxjs';
+
 import { buildPaginatedList } from '../core/data/paginated-list.model';
 import { Community } from '../core/shared/community.model';
 import { PageInfo } from '../core/shared/page-info.model';
 import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
-import { toFlatNode } from './community-list-service';
 import { CommunityListSaveAction } from './community-list.actions';
 import { CommunityListReducer } from './community-list.reducer';
+import { toFlatNode } from './community-list-service';
 
 describe('communityListReducer', () => {
   const mockSubcommunities1Page1 = [Object.assign(new Community(), {
@@ -20,7 +21,7 @@ describe('communityListReducer', () => {
       subcommunities: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), mockSubcommunities1Page1)),
       collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
       name: 'community1',
-    }), observableOf(true), 0, false, null
+    }), observableOf(true), 0, false, null,
   );
 
   it ('should set init state of the expandedNodes and loadingNode', () => {
diff --git a/src/app/community-list-page/community-list.reducer.ts b/src/app/community-list-page/community-list.reducer.ts
index 99c8350cf4..7afcabf067 100644
--- a/src/app/community-list-page/community-list.reducer.ts
+++ b/src/app/community-list-page/community-list.reducer.ts
@@ -1,4 +1,8 @@
-import { CommunityListActions, CommunityListActionTypes, CommunityListSaveAction } from './community-list.actions';
+import {
+  CommunityListActions,
+  CommunityListActionTypes,
+  CommunityListSaveAction,
+} from './community-list.actions';
 import { FlatNode } from './flat-node.model';
 
 /**
diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index de67607bb4..ea34e02d56 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -4,11 +4,11 @@
   
     

-      
+      
       

-        
@@ -24,20 +24,21 @@
   
     

-      
+      
+      
       

         
-          
-            {{ dsoNameService.getName(node.payload) }}
-          
+          {{ dsoNameService.getName(node.payload) }}
            
           {{node.payload.archivedItemsCount}}
         
@@ -46,10 +47,9 @@
     
       

         

-          
+          
           
             {{node.payload.shortDescription}}
           
@@ -58,10 +58,9 @@
     
     

-      
+      
       
     

   
@@ -69,22 +68,19 @@
   
     

-      
+      
       

-        
-          {{ dsoNameService.getName(node.payload) }}
-        
+        {{ dsoNameService.getName(node.payload) }}
       

     

     
       

         

-          
+          
           
             {{node.payload.shortDescription}}
           
diff --git a/src/app/community-list-page/community-list/community-list.component.scss b/src/app/community-list-page/community-list/community-list.component.scss
new file mode 100644
index 0000000000..2e33380a29
--- /dev/null
+++ b/src/app/community-list-page/community-list/community-list.component.scss
@@ -0,0 +1,4 @@
+::ng-deep .fa-chevron-right::before {
+  display: block;
+  width: 16px;
+}
diff --git a/src/app/community-list-page/community-list/community-list.component.spec.ts b/src/app/community-list-page/community-list/community-list.component.spec.ts
index fb47f4994d..434a14a85f 100644
--- a/src/app/community-list-page/community-list/community-list.component.spec.ts
+++ b/src/app/community-list-page/community-list/community-list.component.spec.ts
@@ -1,24 +1,44 @@
-import { ComponentFixture, fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
-
-import { CommunityListComponent } from './community-list.component';
-import { CommunityListService, showMoreFlatNode, toFlatNode } from '../community-list-service';
 import { CdkTreeModule } from '@angular/cdk/tree';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Community } from '../../core/shared/community.model';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { buildPaginatedList } from '../../core/data/paginated-list.model';
-import { PageInfo } from '../../core/shared/page-info.model';
-import { Collection } from '../../core/shared/collection.model';
-import { of as observableOf } from 'rxjs';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  DebugElement,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  fakeAsync,
+  inject,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { isEmpty, isNotEmpty } from '../../shared/empty.util';
-import { FlatNode } from '../flat-node.model';
 import { RouterLinkWithHref } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import {
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
 import { v4 as uuidv4 } from 'uuid';
 
+import { buildPaginatedList } from '../../core/data/paginated-list.model';
+import { Collection } from '../../core/shared/collection.model';
+import { Community } from '../../core/shared/community.model';
+import { PageInfo } from '../../core/shared/page-info.model';
+import {
+  isEmpty,
+  isNotEmpty,
+} from '../../shared/empty.util';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import {
+  CommunityListService,
+  showMoreFlatNode,
+  toFlatNode,
+} from '../community-list-service';
+import { FlatNode } from '../flat-node.model';
+import { CommunityListComponent } from './community-list.component';
+
 describe('CommunityListComponent', () => {
   let component: CommunityListComponent;
   let fixture: ComponentFixture;
@@ -28,11 +48,11 @@ describe('CommunityListComponent', () => {
     uuid: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88',
     name: 'subcommunity1',
   }),
-    Object.assign(new Community(), {
-      id: '59ee713b-ee53-4220-8c3f-9860dc84fe33',
-      uuid: '59ee713b-ee53-4220-8c3f-9860dc84fe33',
-      name: 'subcommunity2',
-    })
+  Object.assign(new Community(), {
+    id: '59ee713b-ee53-4220-8c3f-9860dc84fe33',
+    uuid: '59ee713b-ee53-4220-8c3f-9860dc84fe33',
+    name: 'subcommunity2',
+  }),
   ];
   const mockCollectionsPage1 = [
     Object.assign(new Collection(), {
@@ -44,7 +64,7 @@ describe('CommunityListComponent', () => {
       id: '59da2ff0-9bf4-45bf-88be-e35abd33f304',
       uuid: '59da2ff0-9bf4-45bf-88be-e35abd33f304',
       name: 'collection2',
-    })
+    }),
   ];
   const mockCollectionsPage2 = [
     Object.assign(new Collection(), {
@@ -56,7 +76,7 @@ describe('CommunityListComponent', () => {
       id: 'a392e16b-fcf2-400a-9a88-53ef7ecbdcd3',
       uuid: 'a392e16b-fcf2-400a-9a88-53ef7ecbdcd3',
       name: 'collection4',
-    })
+    }),
   ];
 
   const mockTopCommunitiesWithChildrenArrays = [
@@ -87,7 +107,7 @@ describe('CommunityListComponent', () => {
         subcommunities: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), mockSubcommunities1Page1)),
         collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
         name: 'community1',
-      }), observableOf(true), 0, false, null
+      }), observableOf(true), 0, false, null,
     ),
     toFlatNode(
       Object.assign(new Community(), {
@@ -96,7 +116,7 @@ describe('CommunityListComponent', () => {
         subcommunities: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
         collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [...mockCollectionsPage1, ...mockCollectionsPage2])),
         name: 'community2',
-      }), observableOf(true), 0, false, null
+      }), observableOf(true), 0, false, null,
     ),
     toFlatNode(
       Object.assign(new Community(), {
@@ -105,7 +125,7 @@ describe('CommunityListComponent', () => {
         subcommunities: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
         collections: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
         name: 'community3',
-      }), observableOf(false), 0, false, null
+      }), observableOf(false), 0, false, null,
     ),
   ];
   let communityListServiceStub;
@@ -184,14 +204,14 @@ describe('CommunityListComponent', () => {
           }
           return observableOf(flatnodes);
         }
-      }
+      },
     };
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: TranslateLoaderMock
+            useClass: TranslateLoaderMock,
           },
         }),
         CdkTreeModule,
@@ -199,7 +219,7 @@ describe('CommunityListComponent', () => {
         RouterLinkWithHref],
       declarations: [CommunityListComponent],
       providers: [CommunityListComponent,
-        { provide: CommunityListService, useValue: communityListServiceStub },],
+        { provide: CommunityListService, useValue: communityListServiceStub }],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })
       .compileComponents();
@@ -243,7 +263,7 @@ describe('CommunityListComponent', () => {
       const showMoreLink = fixture.debugElement.query(By.css('.show-more-node .btn-outline-primary'));
       showMoreLink.triggerEventHandler('click', {
         preventDefault: () => {/**/
-        }
+        },
       });
       tick();
       fixture.detectChanges();
@@ -300,12 +320,14 @@ describe('CommunityListComponent', () => {
 
   describe('second top community node is expanded and has more children (collections) than page size of collection', () => {
     describe('children of second top com are added (page-limited pageSize 2)', () => {
-      let allNodes;
+      let allNodes: DebugElement[];
       beforeEach(fakeAsync(() => {
-        const chevronExpand = fixture.debugElement.queryAll(By.css('.expandable-node button'));
-        const chevronExpandSpan = fixture.debugElement.queryAll(By.css('.expandable-node button span'));
-        if (chevronExpandSpan[1].nativeElement.classList.contains('fa-chevron-right')) {
-          chevronExpand[1].nativeElement.click();
+        const toggleButtons: DebugElement[] = fixture.debugElement.queryAll(By.css('.expandable-node button'));
+        const toggleButtonText: DebugElement = toggleButtons[1].query(By.css('span'));
+        expect(toggleButtonText).not.toBeNull();
+
+        if (toggleButtonText.nativeElement.classList.contains('fa-chevron-right')) {
+          toggleButtons[1].nativeElement.click();
           tick();
           fixture.detectChanges();
         }
@@ -315,17 +337,18 @@ describe('CommunityListComponent', () => {
         allNodes = [...expandableNodesFound, ...childlessNodesFound];
       }));
       it('tree contains 2 (page-limited) top com, 2 (page-limited) coll of 2nd top com, a show more for those page-limited coll and show more for page-limited top com', () => {
-        mockTopFlatnodesUnexpanded.slice(0, 2).map((topFlatnode: FlatNode) => {
-          expect(allNodes.find((foundEl) => {
-            return (foundEl.nativeElement.textContent.trim() === topFlatnode.name);
-          })).toBeTruthy();
-        });
-        mockCollectionsPage1.map((coll) => {
-          expect(allNodes.find((foundEl) => {
-            return (foundEl.nativeElement.textContent.trim() === coll.name);
-          })).toBeTruthy();
-        });
+        const allNodeNames: string[] = allNodes.map((node: DebugElement) => node.nativeElement.innerText.trim());
         expect(allNodes.length).toEqual(4);
+        const flatNodes: string[] = mockTopFlatnodesUnexpanded.slice(0, 2).map((flatNode: FlatNode) => flatNode.name);
+        for (const flatNode of flatNodes) {
+          expect(allNodeNames).toContain(flatNode);
+        }
+        expect(flatNodes.length).toBe(2);
+        const page1CollectionNames: string[] = mockCollectionsPage1.map((collection: Collection) => collection.name);
+        for (const collectionName of page1CollectionNames) {
+          expect(allNodeNames).toContain(collectionName);
+        }
+        expect(page1CollectionNames.length).toBe(2);
         const showMoreEl = fixture.debugElement.queryAll(By.css('.show-more-node'));
         expect(showMoreEl.length).toEqual(2);
       });
diff --git a/src/app/community-list-page/community-list/community-list.component.ts b/src/app/community-list-page/community-list/community-list.component.ts
index 6b5c6578e1..369e51ea12 100644
--- a/src/app/community-list-page/community-list/community-list.component.ts
+++ b/src/app/community-list-page/community-list/community-list.component.ts
@@ -1,13 +1,21 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { take } from 'rxjs/operators';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { CommunityListService} from '../community-list-service';
-import { CommunityListDatasource } from '../community-list-datasource';
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { isEmpty } from '../../shared/empty.util';
-import { FlatNode } from '../flat-node.model';
-import { FindListOptions } from '../../core/data/find-list-options.model';
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { take } from 'rxjs/operators';
+
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import {
+  SortDirection,
+  SortOptions,
+} from '../../core/cache/models/sort-options.model';
+import { FindListOptions } from '../../core/data/find-list-options.model';
+import { isEmpty } from '../../shared/empty.util';
+import { CommunityListDatasource } from '../community-list-datasource';
+import { CommunityListService } from '../community-list-service';
+import { FlatNode } from '../flat-node.model';
 
 /**
  * A tree-structured list of nodes representing the communities, their subCommunities and collections.
@@ -19,6 +27,7 @@ import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 @Component({
   selector: 'ds-community-list',
   templateUrl: './community-list.component.html',
+  styleUrls: ['./community-list.component.scss'],
 })
 export class CommunityListComponent implements OnInit, OnDestroy {
 
@@ -26,7 +35,7 @@ export class CommunityListComponent implements OnInit, OnDestroy {
   public loadingNode: FlatNode;
 
   treeControl = new FlatTreeControl(
-    (node: FlatNode) => node.level, (node: FlatNode) => true
+    (node: FlatNode) => node.level, (node: FlatNode) => true,
   );
   dataSource: CommunityListDatasource;
   paginationConfig: FindListOptions;
diff --git a/src/app/community-list-page/community-list/themed-community-list.component.ts b/src/app/community-list-page/community-list/themed-community-list.component.ts
index 4a986e737c..9e494bdf47 100644
--- a/src/app/community-list-page/community-list/themed-community-list.component.ts
+++ b/src/app/community-list-page/community-list/themed-community-list.component.ts
@@ -1,6 +1,7 @@
+import { Component } from '@angular/core';
+
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { CommunityListComponent } from './community-list.component';
-import { Component } from '@angular/core';
 
 
 @Component({
diff --git a/src/app/community-list-page/flat-node.model.ts b/src/app/community-list-page/flat-node.model.ts
index 0aabbeb489..125ffc1e59 100644
--- a/src/app/community-list-page/flat-node.model.ts
+++ b/src/app/community-list-page/flat-node.model.ts
@@ -1,6 +1,7 @@
 import { Observable } from 'rxjs';
-import { Community } from '../core/shared/community.model';
+
 import { Collection } from '../core/shared/collection.model';
+import { Community } from '../core/shared/community.model';
 import { ShowMoreFlatNode } from './show-more-flat-node.model';
 
 /**
diff --git a/src/app/community-list-page/themed-community-list-page.component.ts b/src/app/community-list-page/themed-community-list-page.component.ts
index 20fa97bedd..2b5113bac9 100644
--- a/src/app/community-list-page/themed-community-list-page.component.ts
+++ b/src/app/community-list-page/themed-community-list-page.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { CommunityListPageComponent } from './community-list-page.component';
 
diff --git a/src/app/community-page/community-form/community-form.component.ts b/src/app/community-page/community-form/community-form.component.ts
index fa4809738d..0ac871ebb9 100644
--- a/src/app/community-page/community-form/community-form.component.ts
+++ b/src/app/community-page/community-form/community-form.component.ts
@@ -1,19 +1,26 @@
-import { Component, Input, OnChanges, SimpleChange, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnChanges,
+  SimpleChange,
+  SimpleChanges,
+} from '@angular/core';
 import {
   DynamicFormControlModel,
   DynamicFormService,
   DynamicInputModel,
-  DynamicTextAreaModel
+  DynamicTextAreaModel,
 } from '@ng-dynamic-forms/core';
+import { TranslateService } from '@ngx-translate/core';
+
+import { environment } from '../../../environments/environment';
+import { AuthService } from '../../core/auth/auth.service';
+import { ObjectCacheService } from '../../core/cache/object-cache.service';
+import { CommunityDataService } from '../../core/data/community-data.service';
+import { RequestService } from '../../core/data/request.service';
 import { Community } from '../../core/shared/community.model';
 import { ComColFormComponent } from '../../shared/comcol/comcol-forms/comcol-form/comcol-form.component';
-import { TranslateService } from '@ngx-translate/core';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { CommunityDataService } from '../../core/data/community-data.service';
-import { AuthService } from '../../core/auth/auth.service';
-import { RequestService } from '../../core/data/request.service';
-import { ObjectCacheService } from '../../core/cache/object-cache.service';
-import { environment } from '../../../environments/environment';
 
 /**
  * Form used for creating and editing communities
@@ -21,7 +28,7 @@ import { environment } from '../../../environments/environment';
 @Component({
   selector: 'ds-community-form',
   styleUrls: ['../../shared/comcol/comcol-forms/comcol-form/comcol-form.component.scss'],
-  templateUrl: '../../shared/comcol/comcol-forms/comcol-form/comcol-form.component.html'
+  templateUrl: '../../shared/comcol/comcol-forms/comcol-form/comcol-form.component.html',
 })
 export class CommunityFormComponent extends ComColFormComponent implements OnChanges {
   /**
@@ -44,10 +51,10 @@ export class CommunityFormComponent extends ComColFormComponent imple
       name: 'dc.title',
       required: true,
       validators: {
-        required: null
+        required: null,
       },
       errorMessages: {
-        required: 'Please enter a name for this title'
+        required: 'Please enter a name for this title',
       },
     }),
     new DynamicTextAreaModel({
@@ -85,7 +92,7 @@ export class CommunityFormComponent extends ComColFormComponent imple
   ngOnChanges(changes: SimpleChanges) {
     const dsoChange: SimpleChange = changes.dso;
     if (this.dso && dsoChange && !dsoChange.isFirstChange()) {
-       super.ngOnInit();
+      super.ngOnInit();
     }
   }
 }
diff --git a/src/app/community-page/community-form/community-form.module.ts b/src/app/community-page/community-form/community-form.module.ts
index 925d218973..fb337a7c98 100644
--- a/src/app/community-page/community-form/community-form.module.ts
+++ b/src/app/community-page/community-form/community-form.module.ts
@@ -1,22 +1,22 @@
 import { NgModule } from '@angular/core';
 
-import { CommunityFormComponent } from './community-form.component';
-import { SharedModule } from '../../shared/shared.module';
 import { ComcolModule } from '../../shared/comcol/comcol.module';
 import { FormModule } from '../../shared/form/form.module';
+import { SharedModule } from '../../shared/shared.module';
+import { CommunityFormComponent } from './community-form.component';
 
 @NgModule({
   imports: [
     ComcolModule,
     FormModule,
-    SharedModule
+    SharedModule,
   ],
   declarations: [
     CommunityFormComponent,
   ],
   exports: [
-    CommunityFormComponent
-  ]
+    CommunityFormComponent,
+  ],
 })
 export class CommunityFormModule {
 
diff --git a/src/app/community-page/community-page-administrator.guard.ts b/src/app/community-page/community-page-administrator.guard.ts
index fd7ce5f7bf..4a3816b225 100644
--- a/src/app/community-page/community-page-administrator.guard.ts
+++ b/src/app/community-page/community-page-administrator.guard.ts
@@ -1,15 +1,23 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
-import { Community } from '../core/shared/community.model';
-import { CommunityPageResolver } from './community-page.resolver';
+import {
+  ActivatedRouteSnapshot,
+  Router,
+  RouterStateSnapshot,
+} from '@angular/router';
+import {
+  Observable,
+  of as observableOf,
+} from 'rxjs';
+
+import { AuthService } from '../core/auth/auth.service';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
-import { Observable, of as observableOf } from 'rxjs';
 import { DsoPageSingleFeatureGuard } from '../core/data/feature-authorization/feature-authorization-guard/dso-page-single-feature.guard';
 import { FeatureID } from '../core/data/feature-authorization/feature-id';
-import { AuthService } from '../core/auth/auth.service';
+import { Community } from '../core/shared/community.model';
+import { CommunityPageResolver } from './community-page.resolver';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 /**
  * Guard for preventing unauthorized access to certain {@link Community} pages requiring administrator rights
diff --git a/src/app/community-page/community-page-routing.module.ts b/src/app/community-page/community-page-routing.module.ts
index c37f8832f8..2d86223801 100644
--- a/src/app/community-page/community-page-routing.module.ts
+++ b/src/app/community-page/community-page-routing.module.ts
@@ -1,20 +1,29 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { CommunityPageResolver } from './community-page.resolver';
-import { CreateCommunityPageComponent } from './create-community-page/create-community-page.component';
+import { BrowseByGuard } from '../browse-by/browse-by-guard';
+import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { CreateCommunityPageGuard } from './create-community-page/create-community-page.guard';
-import { DeleteCommunityPageComponent } from './delete-community-page/delete-community-page.component';
 import { CommunityBreadcrumbResolver } from '../core/breadcrumbs/community-breadcrumb.resolver';
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { LinkService } from '../core/cache/builders/link.service';
-import { COMMUNITY_EDIT_PATH, COMMUNITY_CREATE_PATH } from './community-page-routing-paths';
-import { CommunityPageAdministratorGuard } from './community-page-administrator.guard';
-import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
-import { ThemedCommunityPageComponent } from './themed-community-page.component';
-import { MenuItemType } from '../shared/menu/menu-item-type.model';
+import { ComcolBrowseByComponent } from '../shared/comcol/sections/comcol-browse-by/comcol-browse-by.component';
+import { ComcolSearchSectionComponent } from '../shared/comcol/sections/comcol-search-section/comcol-search-section.component';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
+import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
+import { MenuItemType } from '../shared/menu/menu-item-type.model';
+import { CommunityPageResolver } from './community-page.resolver';
+import { CommunityPageAdministratorGuard } from './community-page-administrator.guard';
+import {
+  COMMUNITY_CREATE_PATH,
+  COMMUNITY_EDIT_PATH,
+} from './community-page-routing-paths';
+import { CreateCommunityPageComponent } from './create-community-page/create-community-page.component';
+import { CreateCommunityPageGuard } from './create-community-page/create-community-page.guard';
+import { DeleteCommunityPageComponent } from './delete-community-page/delete-community-page.component';
+import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
+import { ThemedCommunityPageComponent } from './themed-community-page.component';
 
 @NgModule({
   imports: [
@@ -22,14 +31,14 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
       {
         path: COMMUNITY_CREATE_PATH,
         component: CreateCommunityPageComponent,
-        canActivate: [AuthenticatedGuard, CreateCommunityPageGuard]
+        canActivate: [AuthenticatedGuard, CreateCommunityPageGuard],
       },
       {
         path: ':id',
         resolve: {
           dso: CommunityPageResolver,
           breadcrumb: CommunityBreadcrumbResolver,
-          menu: DSOEditMenuResolver
+          menu: DSOEditMenuResolver,
         },
         runGuardsAndResolvers: 'always',
         children: [
@@ -37,7 +46,7 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
             path: COMMUNITY_EDIT_PATH,
             loadChildren: () => import('./edit-community-page/edit-community-page.module')
               .then((m) => m.EditCommunityPageModule),
-            canActivate: [CommunityPageAdministratorGuard]
+            canActivate: [CommunityPageAdministratorGuard],
           },
           {
             path: 'delete',
@@ -48,8 +57,33 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
           {
             path: '',
             component: ThemedCommunityPageComponent,
-            pathMatch: 'full',
-          }
+            children: [
+              {
+                path: '',
+                pathMatch: 'full',
+                component: ComcolSearchSectionComponent,
+              },
+              {
+                path: 'subcoms-cols',
+                pathMatch: 'full',
+                component: SubComColSectionComponent,
+                resolve: {
+                  breadcrumb: I18nBreadcrumbResolver,
+                },
+                data: { breadcrumbKey: 'community.subcoms-cols' },
+              },
+              {
+                path: 'browse/:id',
+                pathMatch: 'full',
+                component: ComcolBrowseByComponent,
+                canActivate: [BrowseByGuard],
+                resolve: {
+                  breadcrumb: BrowseByI18nBreadcrumbResolver,
+                },
+                data: { breadcrumbKey: 'browse.metadata' },
+              },
+            ],
+          },
         ],
         data: {
           menu: {
@@ -67,7 +101,7 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
           },
         },
       },
-    ])
+    ]),
   ],
   providers: [
     CommunityPageResolver,
@@ -76,7 +110,7 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
     LinkService,
     CreateCommunityPageGuard,
     CommunityPageAdministratorGuard,
-  ]
+  ],
 })
 export class CommunityPageRoutingModule {
 
diff --git a/src/app/community-page/community-page.component.html b/src/app/community-page/community-page.component.html
index 671bf28fd1..b3e577af7d 100644
--- a/src/app/community-page/community-page.component.html
+++ b/src/app/community-page/community-page.component.html
@@ -7,7 +7,7 @@
           
           
           
-          
+          
           
           
           
@@ -17,7 +17,7 @@
           
           
           
+                                  [title]="'community.page.news'">
           
         
         
@@ -28,10 +28,9 @@
         
         
 
-        
-        
+        
       
-