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/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/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 bb373916a6..c0a3843605 100644 --- a/package.json +++ b/package.json @@ -128,7 +128,7 @@ "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", @@ -171,7 +171,7 @@ "eslint-plugin-deprecation": "^1.4.1", "eslint-plugin-import": "^2.27.5", "eslint-plugin-import-newlines": "^1.3.1", - "eslint-plugin-jsdoc": "^39.6.4", + "eslint-plugin-jsdoc": "^45.0.0", "eslint-plugin-jsonc": "^2.6.0", "eslint-plugin-lodash": "^7.4.0", "eslint-plugin-rxjs": "^5.0.3", 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/epeople-registry/epeople-registry.component.spec.ts b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts index 6caccc8a5c..0278416cca 100644 --- a/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts +++ b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts @@ -1,41 +1,16 @@ import { CommonModule } from '@angular/common'; -import { - DebugElement, - NO_ERRORS_SCHEMA, -} from '@angular/core'; -import { - ComponentFixture, - fakeAsync, - TestBed, - tick, - waitForAsync, -} from '@angular/core/testing'; -import { - FormsModule, - ReactiveFormsModule, -} from '@angular/forms'; -import { - BrowserModule, - By, -} from '@angular/platform-browser'; +import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; +import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BrowserModule, By } from '@angular/platform-browser'; import { Router } from '@angular/router'; -import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { - TranslateLoader, - TranslateModule, - TranslateService, -} from '@ngx-translate/core'; -import { - Observable, - of as observableOf, -} from 'rxjs'; +import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { TranslateModule } from '@ngx-translate/core'; +import { Observable, of as observableOf } from 'rxjs'; import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service'; import { FindListOptions } from '../../core/data/find-list-options.model'; -import { - buildPaginatedList, - PaginatedList, -} from '../../core/data/paginated-list.model'; +import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model'; import { RemoteData } from '../../core/data/remote-data'; import { RequestService } from '../../core/data/request.service'; import { EPersonDataService } from '../../core/eperson/eperson-data.service'; @@ -44,14 +19,9 @@ import { PaginationService } from '../../core/pagination/pagination.service'; import { PageInfo } from '../../core/shared/page-info.model'; import { FormBuilderService } from '../../shared/form/builder/form-builder.service'; import { getMockFormBuilderService } from '../../shared/mocks/form-builder-service.mock'; -import { getMockTranslateService } from '../../shared/mocks/translate.service.mock'; -import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock'; import { NotificationsService } from '../../shared/notifications/notifications.service'; import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils'; -import { - EPersonMock, - EPersonMock2, -} from '../../shared/testing/eperson.mock'; +import { EPersonMock, EPersonMock2 } from '../../shared/testing/eperson.mock'; import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub'; import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub'; import { RouterStub } from '../../shared/testing/router.stub'; @@ -60,17 +30,15 @@ import { EPeopleRegistryComponent } from './epeople-registry.component'; describe('EPeopleRegistryComponent', () => { let component: EPeopleRegistryComponent; let fixture: ComponentFixture; - let translateService: TranslateService; let builderService: FormBuilderService; - let mockEPeople; + let mockEPeople: EPerson[]; let ePersonDataServiceStub: any; let authorizationService: AuthorizationDataService; - let modalService; + let modalService: NgbModal; + let paginationService: PaginationServiceStub; - let paginationService; - - beforeEach(waitForAsync(() => { + beforeEach(waitForAsync(async () => { jasmine.getEnv().allowRespy(true); mockEPeople = [EPersonMock, EPersonMock2]; ePersonDataServiceStub = { @@ -148,17 +116,11 @@ describe('EPeopleRegistryComponent', () => { isAuthorized: observableOf(true), }); builderService = getMockFormBuilderService(); - translateService = getMockTranslateService(); paginationService = new PaginationServiceStub(); - TestBed.configureTestingModule({ + await TestBed.configureTestingModule({ imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, - TranslateModule.forRoot({ - loader: { - provide: TranslateLoader, - useClass: TranslateLoaderMock, - }, - }), + TranslateModule.forRoot(), ], declarations: [EPeopleRegistryComponent], providers: [ @@ -177,7 +139,7 @@ describe('EPeopleRegistryComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(EPeopleRegistryComponent); component = fixture.componentInstance; - modalService = (component as any).modalService; + modalService = TestBed.inject(NgbModal); spyOn(modalService, 'open').and.returnValue(Object.assign({ componentInstance: Object.assign({ response: observableOf(true) }) })); fixture.detectChanges(); }); @@ -187,10 +149,10 @@ describe('EPeopleRegistryComponent', () => { }); it('should display list of ePeople', () => { - const ePeopleIdsFound = fixture.debugElement.queryAll(By.css('#epeople tr td:first-child')); + const ePeopleIdsFound: DebugElement[] = fixture.debugElement.queryAll(By.css('#epeople tr td:first-child')); expect(ePeopleIdsFound.length).toEqual(2); mockEPeople.map((ePerson: EPerson) => { - expect(ePeopleIdsFound.find((foundEl) => { + expect(ePeopleIdsFound.find((foundEl: DebugElement) => { return (foundEl.nativeElement.textContent.trim() === ePerson.uuid); })).toBeTruthy(); }); @@ -198,7 +160,7 @@ describe('EPeopleRegistryComponent', () => { describe('search', () => { describe('when searching with scope/query (scope metadata)', () => { - let ePeopleIdsFound; + let ePeopleIdsFound: DebugElement[]; beforeEach(fakeAsync(() => { component.search({ scope: 'metadata', query: EPersonMock2.name }); tick(); @@ -208,14 +170,14 @@ describe('EPeopleRegistryComponent', () => { it('should display search result', () => { expect(ePeopleIdsFound.length).toEqual(1); - expect(ePeopleIdsFound.find((foundEl) => { + expect(ePeopleIdsFound.find((foundEl: DebugElement) => { return (foundEl.nativeElement.textContent.trim() === EPersonMock2.uuid); })).toBeTruthy(); }); }); describe('when searching with scope/query (scope email)', () => { - let ePeopleIdsFound; + let ePeopleIdsFound: DebugElement[]; beforeEach(fakeAsync(() => { component.search({ scope: 'email', query: EPersonMock.email }); tick(); @@ -225,7 +187,7 @@ describe('EPeopleRegistryComponent', () => { it('should display search result', () => { expect(ePeopleIdsFound.length).toEqual(1); - expect(ePeopleIdsFound.find((foundEl) => { + expect(ePeopleIdsFound.find((foundEl: DebugElement) => { return (foundEl.nativeElement.textContent.trim() === EPersonMock.uuid); })).toBeTruthy(); }); @@ -257,19 +219,12 @@ describe('EPeopleRegistryComponent', () => { }); }); - describe('delete EPerson button when the isAuthorized returns false', () => { - let ePeopleDeleteButton; - beforeEach(() => { - spyOn(authorizationService, 'isAuthorized').and.returnValue(observableOf(false)); - component.initialisePage(); - fixture.detectChanges(); - }); - it('should be disabled', () => { - ePeopleDeleteButton = fixture.debugElement.queryAll(By.css('#epeople tr td div button.delete-button')); - ePeopleDeleteButton.forEach((deleteButton: DebugElement) => { - expect(deleteButton.nativeElement.disabled).toBe(true); - }); - }); + it('should hide delete EPerson button when the isAuthorized returns false', () => { + spyOn(authorizationService, 'isAuthorized').and.returnValue(observableOf(false)); + component.initialisePage(); + fixture.detectChanges(); + + expect(fixture.debugElement.query(By.css('#epeople tr td div button.delete-button'))).toBeNull(); }); }); diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.ts b/src/app/access-control/epeople-registry/epeople-registry.component.ts index 1eaf34f91e..c15729b9e6 100644 --- a/src/app/access-control/epeople-registry/epeople-registry.component.ts +++ b/src/app/access-control/epeople-registry/epeople-registry.component.ts @@ -1,31 +1,15 @@ -import { - Component, - OnDestroy, - OnInit, -} from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { UntypedFormBuilder } from '@angular/forms'; import { Router } from '@angular/router'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { TranslateService } from '@ngx-translate/core'; -import { - BehaviorSubject, - combineLatest, - Observable, - Subscription, -} from 'rxjs'; -import { - map, - switchMap, - take, -} from 'rxjs/operators'; +import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs'; +import { map, switchMap, take } from 'rxjs/operators'; import { DSONameService } from '../../core/breadcrumbs/dso-name.service'; import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service'; import { FeatureID } from '../../core/data/feature-authorization/feature-id'; -import { - buildPaginatedList, - PaginatedList, -} from '../../core/data/paginated-list.model'; +import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model'; import { RemoteData } from '../../core/data/remote-data'; import { RequestService } from '../../core/data/request.service'; import { EPersonDataService } from '../../core/eperson/eperson-data.service'; @@ -33,19 +17,13 @@ import { EPerson } from '../../core/eperson/models/eperson.model'; import { EpersonDtoModel } from '../../core/eperson/models/eperson-dto.model'; import { PaginationService } from '../../core/pagination/pagination.service'; import { NoContent } from '../../core/shared/NoContent.model'; -import { - getAllSucceededRemoteData, - getFirstCompletedRemoteData, -} from '../../core/shared/operators'; +import { getAllSucceededRemoteData, getFirstCompletedRemoteData } from '../../core/shared/operators'; import { PageInfo } from '../../core/shared/page-info.model'; import { ConfirmationModalComponent } from '../../shared/confirmation-modal/confirmation-modal.component'; import { hasValue } from '../../shared/empty.util'; import { NotificationsService } from '../../shared/notifications/notifications.service'; import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; -import { - getEPersonEditRoute, - getEPersonsRoute, -} from '../access-control-routing-paths'; +import { getEPersonEditRoute, getEPersonsRoute } from '../access-control-routing-paths'; @Component({ selector: 'ds-epeople-registry', @@ -224,7 +202,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy { deleteEPerson(ePerson: EPerson) { if (hasValue(ePerson.id)) { const modalRef = this.modalService.open(ConfirmationModalComponent); - modalRef.componentInstance.dso = ePerson; + modalRef.componentInstance.name = this.dsoNameService.getName(ePerson); modalRef.componentInstance.headerLabel = 'confirmation-modal.delete-eperson.header'; modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info'; modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel'; diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts index 10d0b7faf3..5797ef1add 100644 --- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts +++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts @@ -1,37 +1,11 @@ -import { - ChangeDetectorRef, - Component, - EventEmitter, - OnDestroy, - OnInit, - Output, -} from '@angular/core'; +import { ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; -import { - ActivatedRoute, - Router, -} from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; -import { - DynamicCheckboxModel, - DynamicFormControlModel, - DynamicFormLayout, - DynamicInputModel, -} from '@ng-dynamic-forms/core'; +import { DynamicCheckboxModel, DynamicFormControlModel, DynamicFormLayout, DynamicInputModel } from '@ng-dynamic-forms/core'; import { TranslateService } from '@ngx-translate/core'; -import { - combineLatest as observableCombineLatest, - Observable, - of as observableOf, - Subscription, -} from 'rxjs'; -import { - debounceTime, - finalize, - map, - switchMap, - take, -} from 'rxjs/operators'; +import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs'; +import { debounceTime, finalize, map, switchMap, take } from 'rxjs/operators'; import { AuthService } from '../../../core/auth/auth.service'; import { DSONameService } from '../../../core/breadcrumbs/dso-name.service'; @@ -47,11 +21,7 @@ import { EPerson } from '../../../core/eperson/models/eperson.model'; import { Group } from '../../../core/eperson/models/group.model'; import { PaginationService } from '../../../core/pagination/pagination.service'; import { NoContent } from '../../../core/shared/NoContent.model'; -import { - getFirstCompletedRemoteData, - getFirstSucceededRemoteData, - getRemoteDataPayload, -} from '../../../core/shared/operators'; +import { getFirstCompletedRemoteData, getFirstSucceededRemoteData, getRemoteDataPayload } from '../../../core/shared/operators'; import { PageInfo } from '../../../core/shared/page-info.model'; import { Registration } from '../../../core/shared/registration.model'; import { TYPE_REQUEST_FORGOT } from '../../../register-email-form/register-email-form.component'; @@ -510,7 +480,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy { take(1), switchMap((eperson: EPerson) => { const modalRef = this.modalService.open(ConfirmationModalComponent); - modalRef.componentInstance.dso = eperson; + modalRef.componentInstance.name = this.dsoNameService.getName(eperson); modalRef.componentInstance.headerLabel = 'confirmation-modal.delete-eperson.header'; modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info'; modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel'; diff --git a/src/app/access-control/group-registry/group-form/group-form.component.ts b/src/app/access-control/group-registry/group-form/group-form.component.ts index dde298b7d1..75e28cad13 100644 --- a/src/app/access-control/group-registry/group-form/group-form.component.ts +++ b/src/app/access-control/group-registry/group-form/group-form.component.ts @@ -1,40 +1,12 @@ -import { - ChangeDetectorRef, - Component, - EventEmitter, - HostListener, - OnDestroy, - OnInit, - Output, -} from '@angular/core'; +import { ChangeDetectorRef, Component, EventEmitter, HostListener, OnDestroy, OnInit, Output } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; -import { - ActivatedRoute, - Router, -} from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; -import { - DynamicFormControlModel, - DynamicFormLayout, - DynamicInputModel, - DynamicTextAreaModel, -} from '@ng-dynamic-forms/core'; +import { DynamicFormControlModel, DynamicFormLayout, DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core'; import { TranslateService } from '@ngx-translate/core'; import { Operation } from 'fast-json-patch'; -import { - combineLatest as observableCombineLatest, - Observable, - of as observableOf, - Subscription, -} from 'rxjs'; -import { - catchError, - debounceTime, - filter, - map, - switchMap, - take, -} from 'rxjs/operators'; +import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs'; +import { catchError, debounceTime, filter, map, switchMap, take } from 'rxjs/operators'; import { environment } from '../../../../environments/environment'; import { getCollectionEditRolesRoute } from '../../../collection-page/collection-page-routing-paths'; @@ -53,26 +25,14 @@ import { Collection } from '../../../core/shared/collection.model'; import { Community } from '../../../core/shared/community.model'; import { DSpaceObject } from '../../../core/shared/dspace-object.model'; import { NoContent } from '../../../core/shared/NoContent.model'; -import { - getFirstCompletedRemoteData, - getFirstSucceededRemoteData, - getFirstSucceededRemoteDataPayload, - getRemoteDataPayload, -} from '../../../core/shared/operators'; +import { getFirstCompletedRemoteData, getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload, getRemoteDataPayload } from '../../../core/shared/operators'; import { AlertType } from '../../../shared/alert/alert-type'; import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component'; -import { - hasValue, - hasValueOperator, - isNotEmpty, -} from '../../../shared/empty.util'; +import { hasValue, hasValueOperator, isNotEmpty } from '../../../shared/empty.util'; import { FormBuilderService } from '../../../shared/form/builder/form-builder.service'; import { NotificationsService } from '../../../shared/notifications/notifications.service'; import { followLink } from '../../../shared/utils/follow-link-config.model'; -import { - getGroupEditRoute, - getGroupsRoute, -} from '../../access-control-routing-paths'; +import { getGroupEditRoute, getGroupsRoute } from '../../access-control-routing-paths'; import { ValidateGroupExists } from './validators/group-exists.validator'; @Component({ @@ -446,7 +406,7 @@ export class GroupFormComponent implements OnInit, OnDestroy { delete() { this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((group: Group) => { const modalRef = this.modalService.open(ConfirmationModalComponent); - modalRef.componentInstance.dso = group; + modalRef.componentInstance.name = this.dsoNameService.getName(group); modalRef.componentInstance.headerLabel = this.messagePrefix + '.delete-group.modal.header'; modalRef.componentInstance.infoLabel = this.messagePrefix + '.delete-group.modal.info'; modalRef.componentInstance.cancelLabel = this.messagePrefix + '.delete-group.modal.cancel'; diff --git a/src/app/admin/admin-import-batch-page/batch-import-page.component.html b/src/app/admin/admin-import-batch-page/batch-import-page.component.html index 1092443436..c51ee7597c 100644 --- a/src/app/admin/admin-import-batch-page/batch-import-page.component.html +++ b/src/app/admin/admin-import-batch-page/batch-import-page.component.html @@ -1,5 +1,5 @@
- +

{{'admin.batch-import.page.header' | translate}}

{{'admin.batch-import.page.help' | translate}}

selected collection: {{getDspaceObjectName()}}  @@ -28,7 +28,7 @@ {{'admin.batch-import.page.toggle.help' | translate}} - + { + return {...route, data: { + ...route.data, + relatedRoutes: moduleRoutes.filter(relatedRoute => relatedRoute.path !== route.path) + .map((relatedRoute) => { + return {path: relatedRoute.path, data: relatedRoute.data}; + }) + }}; + })) + ] +}) +export class AdminLdnServicesRoutingModule { + +} diff --git a/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts new file mode 100644 index 0000000000..7d70a38fc0 --- /dev/null +++ b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AdminLdnServicesRoutingModule } from './admin-ldn-services-routing.module'; +import { LdnServicesOverviewComponent } from './ldn-services-directory/ldn-services-directory.component'; +import { SharedModule } from '../../shared/shared.module'; +import { LdnServiceFormComponent } from './ldn-service-form/ldn-service-form.component'; +import { FormsModule } from '@angular/forms'; +import { LdnItemfiltersService } from './ldn-services-data/ldn-itemfilters-data.service'; + +@NgModule({ + imports: [ + CommonModule, + SharedModule, + AdminLdnServicesRoutingModule, + FormsModule + ], + declarations: [ + LdnServicesOverviewComponent, + LdnServiceFormComponent, + ], + providers: [LdnItemfiltersService] +}) +export class AdminLdnServicesModule { +} diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html new file mode 100644 index 0000000000..0a7bc39fa3 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html @@ -0,0 +1,315 @@ +

+
+
+

{{ isNewService ? ('ldn-create-service.title' | translate) : ('ldn-edit-registered-service.title' | 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..8e44f47c02 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts @@ -0,0 +1,241 @@ +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; + +import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { LdnServiceFormComponent } from './ldn-service-form.component'; +import { ChangeDetectorRef, EventEmitter } from '@angular/core'; +import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { TranslateModule, TranslateService } from '@ngx-translate/core'; +import { PaginationService } from 'ngx-pagination'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service'; +import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; +import { RouterStub } from '../../../shared/testing/router.stub'; +import { MockActivatedRoute } from '../../../shared/mocks/active-router.mock'; +import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub'; +import { of as observableOf, of } from 'rxjs'; +import { RouteService } from '../../../core/services/route.service'; +import { provideMockStore } from '@ngrx/store/testing'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; +import { By } from '@angular/platform-browser'; + +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..2e585058c7 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts @@ -0,0 +1,565 @@ +import { ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core'; +import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; +import { ActivatedRoute, Router } from '@angular/router'; +import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; +import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns'; +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { TranslateService } from '@ngx-translate/core'; +import { LdnService } from '../ldn-services-model/ldn-services.model'; +import { RemoteData } from 'src/app/core/data/remote-data'; +import { Operation } from 'fast-json-patch'; +import { getFirstCompletedRemoteData } from '../../../core/shared/operators'; +import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service'; +import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { combineLatestWith, Observable, Subscription } from 'rxjs'; +import { PaginationService } from '../../../core/pagination/pagination.service'; +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { NotifyServicePattern } from '../ldn-services-model/ldn-service-patterns.model'; +import { IpV4Validator } from '../../../shared/utils/ipV4.validator'; + +/** + * 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'); + let 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(); + + let servicesToUse = this.ldnService.notifyServiceInboundPatterns; + + servicesToUse.forEach((patternObj: NotifyServicePattern) => { + let patternFormGroup; + 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..2b2a6576f6 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts @@ -0,0 +1,111 @@ +import { LdnService } from '../ldn-services-model/ldn-services.model'; +import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; +import { RemoteData } from '../../../core/data/remote-data'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { Observable, of } from 'rxjs'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; + +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..b5b0881727 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilter-data.service.spec.ts @@ -0,0 +1,89 @@ +import { TestScheduler } from 'rxjs/testing'; +import { LdnItemfiltersService } from './ldn-itemfilters-data.service'; +import { RequestService } from '../../../core/data/request.service'; +import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; +import { ObjectCacheService } from '../../../core/cache/object-cache.service'; +import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { RequestEntry } from '../../../core/data/request-entry.model'; +import { RemoteData } from '../../../core/data/remote-data'; +import { RequestEntryState } from '../../../core/data/request-entry-state.model'; +import { cold, getTestScheduler } from 'jasmine-marbles'; +import { RestResponse } from '../../../core/cache/response.models'; +import { of } from 'rxjs'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; +import { FindAllData } from '../../../core/data/base/find-all-data'; +import { testFindAllDataImplementation } from '../../../core/data/base/find-all-data.spec'; + +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..d4e417aba2 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts @@ -0,0 +1,60 @@ +import { Injectable } from '@angular/core'; +import { dataService } from '../../../core/data/base/data-service.decorator'; +import { LDN_SERVICE_CONSTRAINT_FILTERS } from '../ldn-services-model/ldn-service.resource-type'; +import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service'; +import { FindAllData, FindAllDataImpl } from '../../../core/data/base/find-all-data'; + +import { RequestService } from '../../../core/data/request.service'; +import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; +import { ObjectCacheService } from '../../../core/cache/object-cache.service'; +import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model'; +import { Observable } from 'rxjs'; +import { RemoteData } from '../../../core/data/remote-data'; +import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; + +/** + * 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..85cbb9d386 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.spec.ts @@ -0,0 +1,130 @@ +import { TestScheduler } from 'rxjs/testing'; +import { RequestService } from '../../../core/data/request.service'; +import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; +import { ObjectCacheService } from '../../../core/cache/object-cache.service'; +import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { RequestEntry } from '../../../core/data/request-entry.model'; +import { RemoteData } from '../../../core/data/remote-data'; +import { RequestEntryState } from '../../../core/data/request-entry-state.model'; +import { cold, getTestScheduler } from 'jasmine-marbles'; +import { RestResponse } from '../../../core/cache/response.models'; +import { of as observableOf } from 'rxjs'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; +import { FindAllData } from '../../../core/data/base/find-all-data'; +import { testFindAllDataImplementation } from '../../../core/data/base/find-all-data.spec'; +import { LdnServicesService } from './ldn-services-data.service'; +import { testDeleteDataImplementation } from '../../../core/data/base/delete-data.spec'; +import { DeleteData } from '../../../core/data/base/delete-data'; +import { testSearchDataImplementation } from '../../../core/data/base/search-data.spec'; +import { SearchData } from '../../../core/data/base/search-data'; +import { testPatchDataImplementation } from '../../../core/data/base/patch-data.spec'; +import { PatchData } from '../../../core/data/base/patch-data'; +import { CreateData } from '../../../core/data/base/create-data'; +import { testCreateDataImplementation } from '../../../core/data/base/create-data.spec'; +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { RequestParam } from '../../../core/cache/models/request-param.model'; +import { mockLdnService } from '../ldn-service-serviceMock/ldnServicesRD$-mock'; +import { createPaginatedList } from '../../../shared/testing/utils.test'; + +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..59525a5cf8 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts @@ -0,0 +1,216 @@ +import { Injectable } from '@angular/core'; +import { dataService } from '../../../core/data/base/data-service.decorator'; +import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; +import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service'; +import { FindAllData, FindAllDataImpl } from '../../../core/data/base/find-all-data'; +import { DeleteData, DeleteDataImpl } from '../../../core/data/base/delete-data'; +import { RequestService } from '../../../core/data/request.service'; +import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; +import { ObjectCacheService } from '../../../core/cache/object-cache.service'; +import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model'; +import { Observable } from 'rxjs'; +import { RemoteData } from '../../../core/data/remote-data'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { NoContent } from '../../../core/shared/NoContent.model'; +import { map, take } from 'rxjs/operators'; +import { URLCombiner } from '../../../core/url-combiner/url-combiner'; +import { MultipartPostRequest } from '../../../core/data/request.models'; +import { RestRequest } from '../../../core/data/rest-request.model'; + +import { LdnService } from '../ldn-services-model/ldn-services.model'; + +import { PatchData, PatchDataImpl } from '../../../core/data/base/patch-data'; +import { ChangeAnalyzer } from '../../../core/data/change-analyzer'; +import { Operation } from 'fast-json-patch'; +import { RestRequestMethod } from '../../../core/data/rest-request-method'; +import { CreateData, CreateDataImpl } from '../../../core/data/base/create-data'; +import { LdnServiceConstrain } from '../ldn-services-model/ldn-service.constrain.model'; +import { SearchDataImpl } from '../../../core/data/base/search-data'; +import { RequestParam } from '../../../core/cache/models/request-param.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..c7653a5d96 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts @@ -0,0 +1,163 @@ +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { ChangeDetectorRef, EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub'; +import { TranslateModule, TranslateService } from '@ngx-translate/core'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; +import { PaginationService } from '../../../core/pagination/pagination.service'; +import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub'; +import { of } from 'rxjs'; +import { LdnService } from '../ldn-services-model/ldn-services.model'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { RemoteData } from '../../../core/data/remote-data'; +import { LdnServicesOverviewComponent } from './ldn-services-directory.component'; +import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; +import { createPaginatedList } from '../../../shared/testing/utils.test'; + +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..c2be83e6c7 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts @@ -0,0 +1,167 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core'; +import { Observable, Subscription } from 'rxjs'; +import { RemoteData } from '../../../core/data/remote-data'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { LdnService } from '../ldn-services-model/ldn-services.model'; +import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model'; +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 { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { hasValue } from '../../../shared/empty.util'; +import { Operation } from 'fast-json-patch'; +import { getFirstCompletedRemoteData } from '../../../core/shared/operators'; +import { NotificationsService } from '../../../shared/notifications/notifications.service'; +import { TranslateService } from '@ngx-translate/core'; + +/** + * 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..e524286737 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts @@ -0,0 +1,31 @@ +import { autoserialize, deserialize, inheritSerialization } from 'cerialize'; +import { LDN_SERVICE_CONSTRAINT_FILTER } from './ldn-service.resource-type'; +import { CacheableObject } from '../../../core/cache/cacheable-object.model'; +import { typedObject } from '../../../core/cache/builders/build-decorators'; +import { excludeFromEquals } from '../../../core/utilities/equals.decorators'; +import { ResourceType } from '../../../core/shared/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..fac5a1d704 --- /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..8a20c50314 --- /dev/null +++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts @@ -0,0 +1,71 @@ +import { ResourceType } from '../../../core/shared/resource-type'; +import { CacheableObject } from '../../../core/cache/cacheable-object.model'; +import { autoserialize, deserialize, deserializeAs, inheritSerialization } from 'cerialize'; +import { LDN_SERVICE } from './ldn-service.resource-type'; +import { excludeFromEquals } from '../../../core/utilities/equals.decorators'; +import { typedObject } from '../../../core/cache/builders/build-decorators'; +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..f524cd56c2 --- /dev/null +++ b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page-resolver.service.ts @@ -0,0 +1,32 @@ +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..3a4db4ecba --- /dev/null +++ b/src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.spec.ts @@ -0,0 +1,38 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { CommonModule } from '@angular/common'; +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..2256a1bc36 --- /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 index 2820a9a2c7..9fcabedd64 100644 --- a/src/app/admin/admin-notifications/admin-notifications-routing-paths.ts +++ b/src/app/admin/admin-notifications/admin-notifications-routing-paths.ts @@ -1,8 +1,7 @@ -import { URLCombiner } from '../../core/url-combiner/url-combiner'; -import { getNotificationsModuleRoute } from '../admin-routing-paths'; export const QUALITY_ASSURANCE_EDIT_PATH = 'quality-assurance'; +export const PUBLICATION_CLAIMS_PATH = 'publication-claim'; -export function getQualityAssuranceRoute(id: string) { - return new URLCombiner(getNotificationsModuleRoute(), QUALITY_ASSURANCE_EDIT_PATH, id).toString(); +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 index ee6c02550f..8056c67ead 100644 --- a/src/app/admin/admin-notifications/admin-notifications-routing.module.ts +++ b/src/app/admin/admin-notifications/admin-notifications-routing.module.ts @@ -4,28 +4,46 @@ 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 { PUBLICATION_CLAIMS_PATH, QUALITY_ASSURANCE_EDIT_PATH } from './admin-notifications-routing-paths'; +import { AdminNotificationsPublicationClaimPageComponent } from './admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component'; +import { SiteAdministratorGuard } from '../../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard'; import { QualityAssuranceBreadcrumbResolver } from '../../core/breadcrumbs/quality-assurance-breadcrumb.resolver'; import { QualityAssuranceBreadcrumbService } from '../../core/breadcrumbs/quality-assurance-breadcrumb.service'; -import { QUALITY_ASSURANCE_EDIT_PATH } from './admin-notifications-routing-paths'; -import { AdminQualityAssuranceEventsPageComponent } from './admin-quality-assurance-events-page/admin-quality-assurance-events-page.component'; -import { AdminQualityAssuranceEventsPageResolver } from './admin-quality-assurance-events-page/admin-quality-assurance-events-page.resolver'; -import { SourceDataResolver } from './admin-quality-assurance-source-page-component/admin-quality-assurance-source-data.resolver'; -import { AdminQualityAssuranceSourcePageComponent } from './admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component'; -import { AdminQualityAssuranceSourcePageResolver } from './admin-quality-assurance-source-page-component/admin-quality-assurance-source-page-resolver.service'; -import { AdminQualityAssuranceTopicsPageComponent } from './admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component'; -import { AdminQualityAssuranceTopicsPageResolver } from './admin-quality-assurance-topics-page/admin-quality-assurance-topics-page-resolver.service'; +import { QualityAssuranceEventsPageResolver } from '../../quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.resolver'; +import { AdminNotificationsPublicationClaimPageResolver } from '../../quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-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 { 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 { SourceDataResolver } from '../../quality-assurance-notifications-pages/quality-assurance-source-page-component/quality-assurance-source-data.resolver'; +import { QualityAssuranceEventsPageComponent } from '../../quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component'; @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: AdminQualityAssuranceTopicsPageComponent, + component: QualityAssuranceTopicsPageComponent, pathMatch: 'full', resolve: { breadcrumb: QualityAssuranceBreadcrumbResolver, - openaireQualityAssuranceTopicsParams: AdminQualityAssuranceTopicsPageResolver, + openaireQualityAssuranceTopicsParams: QualityAssuranceTopicsPageResolver }, data: { title: 'admin.quality-assurance.page.title', @@ -35,13 +53,28 @@ import { AdminQualityAssuranceTopicsPageResolver } from './admin-quality-assuran }, { canActivate: [ AuthenticatedGuard ], - path: `${QUALITY_ASSURANCE_EDIT_PATH}`, - component: AdminQualityAssuranceSourcePageComponent, + path: `${QUALITY_ASSURANCE_EDIT_PATH}/:sourceId/target/:targetId`, + component: QualityAssuranceTopicsPageComponent, pathMatch: 'full', resolve: { breadcrumb: I18nBreadcrumbResolver, - openaireQualityAssuranceSourceParams: AdminQualityAssuranceSourcePageResolver, - sourceData: SourceDataResolver, + 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', @@ -52,11 +85,11 @@ import { AdminQualityAssuranceTopicsPageResolver } from './admin-quality-assuran { canActivate: [ AuthenticatedGuard ], path: `${QUALITY_ASSURANCE_EDIT_PATH}/:sourceId/:topicId`, - component: AdminQualityAssuranceEventsPageComponent, + component: QualityAssuranceEventsPageComponent, pathMatch: 'full', resolve: { breadcrumb: QualityAssuranceBreadcrumbResolver, - openaireQualityAssuranceEventsParams: AdminQualityAssuranceEventsPageResolver, + openaireQualityAssuranceEventsParams: QualityAssuranceEventsPageResolver }, data: { title: 'admin.notifications.event.page.title', @@ -69,10 +102,12 @@ import { AdminQualityAssuranceTopicsPageResolver } from './admin-quality-assuran providers: [ I18nBreadcrumbResolver, I18nBreadcrumbsService, + AdminNotificationsPublicationClaimPageResolver, SourceDataResolver, - AdminQualityAssuranceTopicsPageResolver, - AdminQualityAssuranceEventsPageResolver, - AdminQualityAssuranceSourcePageResolver, + QualityAssuranceSourcePageResolver, + QualityAssuranceTopicsPageResolver, + QualityAssuranceEventsPageResolver, + QualityAssuranceSourcePageResolver, QualityAssuranceBreadcrumbResolver, QualityAssuranceBreadcrumbService, ], diff --git a/src/app/admin/admin-notifications/admin-notifications.module.ts b/src/app/admin/admin-notifications/admin-notifications.module.ts index 5712cda774..d7eb3df2ec 100644 --- a/src/app/admin/admin-notifications/admin-notifications.module.ts +++ b/src/app/admin/admin-notifications/admin-notifications.module.ts @@ -1,13 +1,10 @@ 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 { AdminNotificationsRoutingModule } from './admin-notifications-routing.module'; -import { AdminQualityAssuranceEventsPageComponent } from './admin-quality-assurance-events-page/admin-quality-assurance-events-page.component'; -import { AdminQualityAssuranceSourcePageComponent } from './admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component'; -import { AdminQualityAssuranceTopicsPageComponent } from './admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component'; +import { AdminNotificationsPublicationClaimPageComponent } from './admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component'; +import { NotificationsModule } from '../../notifications/notifications.module'; @NgModule({ imports: [ @@ -18,9 +15,7 @@ import { AdminQualityAssuranceTopicsPageComponent } from './admin-quality-assura NotificationsModule, ], declarations: [ - AdminQualityAssuranceTopicsPageComponent, - AdminQualityAssuranceEventsPageComponent, - AdminQualityAssuranceSourcePageComponent, + AdminNotificationsPublicationClaimPageComponent, ], entryComponents: [], }) diff --git a/src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.component.spec.ts b/src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.component.spec.ts deleted file mode 100644 index 31ced46a2f..0000000000 --- a/src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.component.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { - async, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; - -import { AdminQualityAssuranceEventsPageComponent } from './admin-quality-assurance-events-page.component'; - -describe('AdminQualityAssuranceEventsPageComponent', () => { - let component: AdminQualityAssuranceEventsPageComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ AdminQualityAssuranceEventsPageComponent ], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(AdminQualityAssuranceEventsPageComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create AdminQualityAssuranceEventsPageComponent', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.spec.ts b/src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.spec.ts deleted file mode 100644 index 6166cf98b7..0000000000 --- a/src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { - ComponentFixture, - TestBed, -} from '@angular/core/testing'; - -import { AdminQualityAssuranceSourcePageComponent } from './admin-quality-assurance-source-page.component'; - -describe('AdminQualityAssuranceSourcePageComponent', () => { - let component: AdminQualityAssuranceSourcePageComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AdminQualityAssuranceSourcePageComponent ], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AdminQualityAssuranceSourcePageComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create AdminQualityAssuranceSourcePageComponent', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.ts b/src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.ts deleted file mode 100644 index 447e5a2e55..0000000000 --- a/src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -/** - * Component for the page that show the QA sources. - */ -@Component({ - selector: 'ds-admin-quality-assurance-source-page-component', - templateUrl: './admin-quality-assurance-source-page.component.html', -}) -export class AdminQualityAssuranceSourcePageComponent {} diff --git a/src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component.spec.ts b/src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component.spec.ts deleted file mode 100644 index df07bdd495..0000000000 --- a/src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { - async, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; - -import { AdminQualityAssuranceTopicsPageComponent } from './admin-quality-assurance-topics-page.component'; - -describe('AdminQualityAssuranceTopicsPageComponent', () => { - let component: AdminQualityAssuranceTopicsPageComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ AdminQualityAssuranceTopicsPageComponent ], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(AdminQualityAssuranceTopicsPageComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create AdminQualityAssuranceTopicsPageComponent', () => { - expect(component).toBeTruthy(); - }); -}); 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..7635b1effb --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard-routing.module.ts @@ -0,0 +1,58 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { I18nBreadcrumbResolver } from '../../core/breadcrumbs/i18n-breadcrumb.resolver'; +import { AdminNotifyDashboardComponent } from './admin-notify-dashboard.component'; +import { SiteAdministratorGuard } from '../../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard'; +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'; +import { NotifyInfoGuard } from '../../core/coar-notify/notify-info/notify-info.guard'; + +@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..74007055b4 --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.spec.ts @@ -0,0 +1,57 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AdminNotifyDashboardComponent } from './admin-notify-dashboard.component'; +import { TranslateModule } from '@ngx-translate/core'; +import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'; +import { SearchService } from '../../core/shared/search/search.service'; +import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils'; +import { buildPaginatedList } from '../../core/data/paginated-list.model'; +import { AdminNotifySearchResult } from './models/admin-notify-message-search-result.model'; +import { AdminNotifyMessage } from './models/admin-notify-message.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..bcec885345 --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.component.ts @@ -0,0 +1,94 @@ +import { Component, OnInit } from '@angular/core'; +import { SearchService } from '../../core/shared/search/search.service'; +import { environment } from '../../../environments/environment'; +import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model'; +import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; +import { forkJoin, Observable } from 'rxjs'; +import { getFirstCompletedRemoteData } from '../../core/shared/operators'; +import { map } from 'rxjs/operators'; +import { SearchObjects } from '../../shared/search/models/search-objects.model'; +import { AdminNotifyMetricsBox, AdminNotifyMetricsRow } from './admin-notify-metrics/admin-notify-metrics.model'; +import { DSpaceObject } from '../../core/shared/dspace-object.model'; +import { SEARCH_CONFIG_SERVICE } from '../../my-dspace-page/my-dspace-page.component'; +import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service'; + +@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..dc5c1a62d9 --- /dev/null +++ b/src/app/admin/admin-notify-dashboard/admin-notify-dashboard.module.ts @@ -0,0 +1,51 @@ +import { NgModule } from '@angular/core'; +import { CommonModule, DatePipe } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { AdminNotifyDashboardComponent } from './admin-notify-dashboard.component'; +import { AdminNotifyDashboardRoutingModule } from './admin-notify-dashboard-routing.module'; +import { AdminNotifyMetricsComponent } from './admin-notify-metrics/admin-notify-metrics.component'; +import { AdminNotifyIncomingComponent } from './admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component'; +import { SharedModule } from '../../shared/shared.module'; +import { SearchModule } from '../../shared/search/search.module'; +import { SearchPageModule } from '../../search-page/search-page.module'; +import { AdminNotifyOutgoingComponent } from './admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component'; +import { AdminNotifyDetailModalComponent } from './admin-notify-detail-modal/admin-notify-detail-modal.component'; +import { AdminNotifySearchResultComponent } from './admin-notify-search-result/admin-notify-search-result.component'; +import { AdminNotifyMessagesService } from './services/admin-notify-messages.service'; +import { AdminNotifyLogsResultComponent } from './admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component'; + +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..0ddf449e5c
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.spec.ts
@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminNotifyDetailModalComponent } from './admin-notify-detail-modal.component';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+
+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..54b14be64c
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.ts
@@ -0,0 +1,49 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { MissingTranslationHelper } from '../../../shared/translate/missing-translation.helper';
+import { fadeIn } from '../../../shared/animations/fade';
+
+@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..f7388c5210
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.spec.ts
@@ -0,0 +1,58 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminNotifyIncomingComponent } from './admin-notify-incoming.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { ActivatedRoute } from '@angular/router';
+import { MockActivatedRoute } from '../../../../shared/mocks/active-router.mock';
+import { provideMockStore } from '@ngrx/store/testing';
+import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+import { RouteService } from '../../../../core/services/route.service';
+import { routeServiceStub } from '../../../../shared/testing/route-service.stub';
+import { RequestService } from '../../../../core/data/request.service';
+import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
+import { getMockRemoteDataBuildService } from '../../../../shared/mocks/remote-data-build.service.mock';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+
+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..6c758b8d59
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-incoming/admin-notify-incoming.component.ts
@@ -0,0 +1,18 @@
+import { Component, Inject } from '@angular/core';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+
+@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..c26c2682e5
--- /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..e59a52198d
--- /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,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminNotifyLogsResultComponent } from './admin-notify-logs-result.component';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MockActivatedRoute } from '../../../../shared/mocks/active-router.mock';
+import { provideMockStore } from '@ngrx/store/testing';
+import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
+import { ObjectCacheService } from '../../../../core/cache/object-cache.service';
+import { RequestService } from '../../../../core/data/request.service';
+import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterStub } from '../../../../shared/testing/router.stub';
+import { RouteService } from '../../../../core/services/route.service';
+import { routeServiceStub } from '../../../../shared/testing/route-service.stub';
+
+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..a9c03cd2bd
--- /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,73 @@
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+import { Context } from '../../../../core/shared/context.model';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { Observable } from 'rxjs';
+import { ActivatedRoute, ActivatedRouteSnapshot, Router } from '@angular/router';
+import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { map } from 'rxjs/operators';
+
+@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..a8af9a7fd6
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.spec.ts
@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminNotifyOutgoingComponent } from './admin-notify-outgoing.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { ActivatedRoute } from '@angular/router';
+import { MockActivatedRoute } from '../../../../shared/mocks/active-router.mock';
+import { provideMockStore } from '@ngrx/store/testing';
+import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+import { RouteService } from '../../../../core/services/route.service';
+import { routeServiceStub } from '../../../../shared/testing/route-service.stub';
+import { RequestService } from '../../../../core/data/request.service';
+import { getMockRemoteDataBuildService } from '../../../../shared/mocks/remote-data-build.service.mock';
+import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+
+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..a99470a6ba
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-outgoing/admin-notify-outgoing.component.ts
@@ -0,0 +1,18 @@
+import { Component, Inject } from '@angular/core';
+import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+
+@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..57f21a4ef3
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.spec.ts
@@ -0,0 +1,71 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminNotifyMetricsComponent } from './admin-notify-metrics.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { Router } from '@angular/router';
+import { ViewMode } from '../../../core/shared/view-mode.model';
+import { RouterStub } from '../../../shared/testing/router.stub';
+
+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..8822e2bd1e
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.component.ts
@@ -0,0 +1,53 @@
+import { Component, Input } from '@angular/core';
+import { AdminNotifyMetricsRow } from './admin-notify-metrics.model';
+import { Router } from '@angular/router';
+import { ViewMode } from '../../../core/shared/view-mode.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..b42c1ae467
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.spec.ts
@@ -0,0 +1,181 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AdminNotifySearchResultComponent } from './admin-notify-search-result.component';
+import { AdminNotifyMessagesService } from '../services/admin-notify-messages.service';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { RequestService } from '../../../core/data/request.service';
+import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
+import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
+import { cold } from 'jasmine-marbles';
+import { ConfigurationProperty } from '../../../core/shared/configuration-property.model';
+import { RouteService } from '../../../core/services/route.service';
+import { routeServiceStub } from '../../../shared/testing/route-service.stub';
+import { ActivatedRoute } from '@angular/router';
+import { RouterStub } from '../../../shared/testing/router.stub';
+import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf, of } from 'rxjs';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AdminNotifyDetailModalComponent } from '../admin-notify-detail-modal/admin-notify-detail-modal.component';
+import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
+import { DatePipe } from '@angular/common';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+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..dc85261b0c
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.ts
@@ -0,0 +1,153 @@
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { AdminNotifySearchResult } from '../models/admin-notify-message-search-result.model';
+import { ViewMode } from '../../../core/shared/view-mode.model';
+import { Context } from '../../../core/shared/context.model';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+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 { PaginatedList } from '../../../core/data/paginated-list.model';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AdminNotifyDetailModalComponent } from '../admin-notify-detail-modal/admin-notify-detail-modal.component';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { AdminNotifyMessagesService } from '../services/admin-notify-messages.service';
+import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
+import { DatePipe } from '@angular/common';
+
+@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..fe811ceeef
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/models/admin-notify-message-search-result.model.ts
@@ -0,0 +1,7 @@
+import { AdminNotifyMessage } from './admin-notify-message.model';
+import { searchResultFor } from '../../../shared/search/search-result-element-decorator';
+import { SearchResult } from '../../../shared/search/models/search-result.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..5124686b42
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/models/admin-notify-message.model.ts
@@ -0,0 +1,166 @@
+import { autoserialize, deserialize, inheritSerialization } from 'cerialize';
+import { typedObject } from '../../../core/cache/builders/build-decorators';
+import { ADMIN_NOTIFY_MESSAGE } from './admin-notify-message.resource-type';
+import { excludeFromEquals } from '../../../core/utilities/equals.decorators';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
+import { ListableObject } from '../../../shared/object-collection/shared/listable-object.model';
+import { Observable } from 'rxjs';
+
+/**
+ * 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..bf521116fa
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/services/admin-notify-messages.service.spec.ts
@@ -0,0 +1,113 @@
+import { cold } from 'jasmine-marbles';
+import { AdminNotifyMessagesService } from './admin-notify-messages.service';
+import { RequestService } from '../../../core/data/request.service';
+import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { LdnServicesService } from '../../admin-ldn-services/ldn-services-data/ldn-services-data.service';
+import { ItemDataService } from '../../../core/data/item-data.service';
+import { RequestEntry } from '../../../core/data/request-entry.model';
+import { RestResponse } from '../../../core/cache/response.models';
+import { BehaviorSubject, of } from 'rxjs';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { RemoteData } from '../../../core/data/remote-data';
+import { RequestEntryState } from '../../../core/data/request-entry-state.model';
+import { mockAdminNotifyMessages } from '../admin-notify-search-result/admin-notify-search-result.component.spec';
+import { take } from 'rxjs/operators';
+import { deepClone } from 'fast-json-patch';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+
+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..0083761de5
--- /dev/null
+++ b/src/app/admin/admin-notify-dashboard/services/admin-notify-messages.service.ts
@@ -0,0 +1,100 @@
+import { Injectable } from '@angular/core';
+import { dataService } from '../../../core/data/base/data-service.decorator';
+import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service';
+import { RequestService } from '../../../core/data/request.service';
+import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { BehaviorSubject, from, Observable, of, scan } from 'rxjs';
+import { ADMIN_NOTIFY_MESSAGE } from '../models/admin-notify-message.resource-type';
+import { AdminNotifyMessage } from '../models/admin-notify-message.model';
+import { map, mergeMap, switchMap, tap } from 'rxjs/operators';
+import { getAllSucceededRemoteDataPayload, getFirstCompletedRemoteData } from '../../../core/shared/operators';
+import { LdnServicesService } from '../../admin-ldn-services/ldn-services-data/ldn-services-data.service';
+import { ItemDataService } from '../../../core/data/item-data.service';
+import { PostRequest } from '../../../core/data/request.models';
+import { RestRequest } from '../../../core/data/rest-request.model';
+
+/**
+ * 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/bitstream-formats/bitstream-formats.component.html b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
index ccf3020a92..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
@@ -19,7 +19,7 @@
           
-              
+              
@@ -35,6 +35,7 @@
                          [checked]="isSelected(bitstreamFormat) | async"
                          (change)="selectBitStreamFormat(bitstreamFormat, $event)"
                   >
+                  {{'admin.registries.bitstream-formats.select' | translate}}}
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 5034d16e3e..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 @@
                     

             
             
{{'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}}

-                            
+                            
@@ -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}}
diff --git a/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.html b/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.html
index a4a4613565..85d1e90692 100644
--- a/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.html
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.html
@@ -1,11 +1,11 @@
 

-    
{{messagePrefix + '.create' | translate}}

+    
{{messagePrefix + '.create' | translate}}

 
-    
{{messagePrefix + '.edit' | translate}}

+    
{{messagePrefix + '.edit' | translate}}

 
 
 
-    
{{messagePrefix + '.create' | translate}}

+    
{{messagePrefix + '.create' | translate}}

 
 
 
-    
{{messagePrefix + '.edit' | translate}}

+    
{{messagePrefix + '.edit' | translate}}

 
 
 
     

 
-      
+      
{{'admin.registries.schema.head' | translate}}: "{{schema?.prefix}}"

 
       
{{'admin.registries.schema.description' | translate:{ namespace: schema?.namespace } }}

 
@@ -10,7 +10,7 @@
         [metadataSchema]="schema"
         (submitForm)="forceUpdateFields()">
 
-      
{{'admin.registries.schema.fields.head' | translate}}

+      
{{'admin.registries.schema.fields.head' | translate}}

 
       
         
               

-                
+                
@@ -33,12 +33,11 @@
               
-                
diff --git a/src/app/admin/admin-reports/admin-reports-routing.module.ts b/src/app/admin/admin-reports/admin-reports-routing.module.ts
new file mode 100644
index 0000000000..9022429502
--- /dev/null
+++ b/src/app/admin/admin-reports/admin-reports-routing.module.ts
@@ -0,0 +1,37 @@
+import { FilteredCollectionsComponent } from './filtered-collections/filtered-collections.component';
+import { FilteredItemsComponent } from './filtered-items/filtered-items.component';
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { I18nBreadcrumbResolver } from '../../core/breadcrumbs/i18n-breadcrumb.resolver';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'collections',
+        resolve: { breadcrumb: I18nBreadcrumbResolver },
+        data: {title: 'admin.reports.collections.title', breadcrumbKey: 'admin.reports.collections'},
+        children: [
+          {
+            path: '',
+            component: FilteredCollectionsComponent
+          }
+        ]
+      },
+      {
+        path: 'queries',
+        resolve: { breadcrumb: I18nBreadcrumbResolver },
+        data: {title: 'admin.reports.items.title', breadcrumbKey: 'admin.reports.items'},
+        children: [
+          {
+            path: '',
+            component: FilteredItemsComponent
+          }
+        ]
+      }
+    ])
+  ]
+})
+export class AdminReportsRoutingModule {
+
+}
diff --git a/src/app/admin/admin-reports/admin-reports.module.ts b/src/app/admin/admin-reports/admin-reports.module.ts
new file mode 100644
index 0000000000..70dfba8a07
--- /dev/null
+++ b/src/app/admin/admin-reports/admin-reports.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FilteredCollectionsComponent } from './filtered-collections/filtered-collections.component';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '../../shared/shared.module';
+import { FormModule } from '../../shared/form/form.module';
+import { FilteredItemsComponent } from './filtered-items/filtered-items.component';
+import { AdminReportsRoutingModule } from './admin-reports-routing.module';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import { FiltersComponent } from './filters-section/filters-section.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule,
+    FormModule,
+    AdminReportsRoutingModule,
+    NgbAccordionModule
+  ],
+  declarations: [
+    FilteredCollectionsComponent,
+    FilteredItemsComponent,
+    FiltersComponent
+  ]
+})
+export class AdminReportsModule {
+}
diff --git a/src/app/admin/admin-reports/filtered-collections/filtered-collection.model.ts b/src/app/admin/admin-reports/filtered-collections/filtered-collection.model.ts
new file mode 100644
index 0000000000..a48b1e02fa
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-collections/filtered-collection.model.ts
@@ -0,0 +1,36 @@
+export class FilteredCollection {
+
+  public label: string;
+  public handle: string;
+  public communityLabel: string;
+  public communityHandle: string;
+  public nbTotalItems: number;
+  public values = {};
+  public allFiltersValue: number;
+
+  public clear() {
+    this.label = '';
+    this.handle = '';
+    this.communityLabel = '';
+    this.communityHandle = '';
+    this.nbTotalItems = 0;
+    this.values = {};
+    this.allFiltersValue = 0;
+  }
+
+  public deserialize(object: any) {
+    this.clear();
+    this.label = object.label;
+    this.handle = object.handle;
+    this.communityLabel = object.community_label;
+    this.communityHandle = object.community_handle;
+    this.nbTotalItems = object.nb_total_items;
+    let valuesPerFilter = object.values;
+    for (let filter in valuesPerFilter) {
+      if (valuesPerFilter.hasOwnProperty(filter)) {
+        this.values[filter] = valuesPerFilter[filter];
+      }
+    }
+    this.allFiltersValue = object.all_filters_value;
+  }
+}
diff --git a/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.html b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.html
new file mode 100644
index 0000000000..5199a115a6
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.html
@@ -0,0 +1,64 @@
+

+    

+        

+
+            
{{ "admin.reports.collections.head" | translate }}

+
+            

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

+                                

+                                    
+                                    
+                                

+                                
+                                

+                                    
+                                    
+                                

+                            

+                        
+                    
+                    
+                        
+                          {{ "admin.reports.collections.collections-report" | translate }}
+                        
+                        
+                            

                         
                         
{{'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..f4eaf50af3
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.spec.ts
@@ -0,0 +1,83 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from 'src/app/shared/mocks/translate-loader.mock';
+import { FormBuilder } from '@angular/forms';
+import { FilteredCollectionsComponent } from './filtered-collections.component';
+import { DspaceRestService } from 'src/app/core/dspace-rest/dspace-rest.service';
+import { NgbAccordion, NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { of as observableOf } from 'rxjs';
+import { RawRestResponse } from 'src/app/core/dspace-rest/raw-rest-response.model';
+
+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..23fde05278
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.ts
@@ -0,0 +1,70 @@
+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}`;
+    }
+    let scheme = environment.rest.ssl ? 'https' : 'http';
+    let 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 {
+    let 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..6ea5a2fc80
--- /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();
+    let summary = object.summary;
+    this.summary.deserialize(summary);
+    let collections = object.collections;
+    for (let i = 0; i < collections.length; i++) {
+      let collection = collections[i];
+      let 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..2c384fe39c
--- /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;
+    let items = object.items;
+    for (let i = 0; i < items.length; i++) {
+      let 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..7fbf90565d
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts
@@ -0,0 +1,336 @@
+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();
+
+    let 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 = [];
+    let 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 => {
+              let 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 => {
+                            let 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 = [];
+    let 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() {
+    let queryField = this.queryForm.controls.presetQuery as FormControl;
+    let value = queryField.value;
+    let 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() {
+    let form = this.queryForm.value;
+    return form.pageLimit;
+  }
+
+  canNavigatePrevious(): boolean {
+    return this.currentPage > 0;
+  }
+
+  prevPage() {
+    if (this.canNavigatePrevious()) {
+      this.currentPage--;
+      this.resubmit();
+    }
+  }
+
+  pageCount(): number {
+    let 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 => {
+          let 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}`;
+    }
+    let scheme = environment.rest.ssl ? 'https' : 'http';
+    let 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()}`;
+
+    let colls = this.queryForm.value.collections;
+    for (let i = 0; i < colls.length; i++) {
+      params += `&collections=${colls[i]}`;
+    }
+
+    let 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}`;
+      }
+    }
+
+    let filters = FiltersComponent.toQueryString(this.queryForm.value.filters);
+    if (filters.length > 0) {
+      params += `&${filters}`;
+    }
+
+    let 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..0aee34d070
--- /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 {
+    let 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 {
+    let opt = new OptionVO();
+    opt.id = id;
+    opt.name$ = name$;
+    opt.disabled = disabled;
+    return opt;
+  }
+
+  static item(id: string, name: string): OptionVO {
+    let opt = new OptionVO();
+    opt.id = id;
+    opt.name$ = OptionVO.toObservable(name);
+    return opt;
+  }
+
+  static itemLoc(id: string, name$: Observable): OptionVO {
+    let 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..73522f02cf
--- /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[]) {
+    let 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..c5f323ed2c
--- /dev/null
+++ b/src/app/admin/admin-reports/filtered-items/query-predicate.model.ts
@@ -0,0 +1,36 @@
+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 = '') {
+    let 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..fcbc171351
--- /dev/null
+++ b/src/app/admin/admin-reports/filters-section/filters-section.component.spec.ts
@@ -0,0 +1,101 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { FiltersComponent } from './filters-section.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from 'src/app/shared/mocks/translate-loader.mock';
+import { FormBuilder } from '@angular/forms';
+
+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: {}): 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: {}): 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..d5dc074f08
--- /dev/null
+++ b/src/app/admin/admin-reports/filters-section/filters-section.component.ts
@@ -0,0 +1,149 @@
+import { Component, Input } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { FilterGroup } from './filter-group.model';
+import { Filter } from './filter.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 {
+    let fields = {};
+    let allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; i < allFilters.length; i++) {
+      let group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        let filter = group.filters[j];
+        fields[filter.id] = new FormControl(false);
+      }
+    }
+    return formBuilder.group(fields);
+  }
+
+  static getFilter(filterId: string): Filter {
+    let allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; i < allFilters.length; i++) {
+      let group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        let filter = group.filters[j];
+        if (filter.id === filterId) {
+          return filter;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  static getGroup(filterId: string): FilterGroup {
+    let allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; i < allFilters.length; i++) {
+      let group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        let filter = group.filters[j];
+        if (filter.id === filterId) {
+          return group;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  static toQueryString(filters: Object): 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...
+    let fields = {};
+    let allFilters = FiltersComponent.FILTERS;
+    for (let i = 0; i < allFilters.length; i++) {
+      let group = allFilters[i];
+      for (let j = 0; j < group.filters.length; j++) {
+        let 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 ef3b788881..3c45081d70 100644
--- a/src/app/admin/admin-routing-paths.ts
+++ b/src/app/admin/admin-routing-paths.ts
@@ -1,13 +1,30 @@
-import { getAdminModuleRoute } from '../app-routing-paths';
 import { URLCombiner } from '../core/url-combiner/url-combiner';
+import { getAdminModuleRoute } from '../app-routing-paths';
+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 5868da1ccd..5ba0ba9722 100644
--- a/src/app/admin/admin-routing.module.ts
+++ b/src/app/admin/admin-routing.module.ts
@@ -6,12 +6,10 @@ import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.ser
 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 {
-  NOTIFICATIONS_MODULE_PATH,
-  REGISTRIES_MODULE_PATH,
-} from './admin-routing-paths';
+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';
+import { SiteAdministratorGuard } from '../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 
 @NgModule({
   imports: [
@@ -25,42 +23,70 @@ import { AdminWorkflowPageComponent } from './admin-workflow-page/admin-workflow
         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' },
+        canActivate: [SiteAdministratorGuard]
       },
       {
         path: 'workflow',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         component: AdminWorkflowPageComponent,
         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' },
+        canActivate: [SiteAdministratorGuard]
       },
       {
         path: 'metadata-import',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         component: MetadataImportPageComponent,
         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' },
+        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),
       },
     ]),
   ],
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.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 b613582cf7..34e66068d3 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,10 +1,4 @@
-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';
@@ -13,14 +7,12 @@ import { GenericConstructor } from '../../../../../core/shared/generic-construct
 import { Item } from '../../../../../core/shared/item.model';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
-import {
-  getListableObjectComponent,
-  listableObjectComponent,
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
+import { getListableObjectComponent, 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';
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { hasValue } from '../../../../../shared/empty.util';
 
 @listableObjectComponent(ItemSearchResult, ViewMode.GridElement, Context.AdminSearch)
 @Component({
@@ -31,17 +23,18 @@ import { TruncatableService } from '../../../../../shared/truncatable/truncatabl
 /**
  * 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);
   }
@@ -51,23 +44,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-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 ee2354579c..a594eb0cf4 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,9 +1,5 @@
 import { Component } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+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';
@@ -52,7 +48,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', () => {
@@ -92,7 +88,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', () => {
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 f76bc975eb..e0504a6712 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,9 +1,4 @@
-import {
-  Component,
-  Inject,
-  Injector,
-  OnInit,
-} from '@angular/core';
+import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { isEmpty } from '../../../shared/empty.util';
@@ -58,4 +53,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 c6d4d6df1d..03a8072d9d 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -1,54 +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 71900adf0c..0c6ab0165c 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
@@ -1,15 +1,5 @@
-import {
-  ChangeDetectionStrategy,
-  Injector,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  fakeAsync,
-  TestBed,
-  tick,
-  waitForAsync,
-} from '@angular/core/testing';
+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 { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';
@@ -153,7 +143,7 @@ describe('AdminSidebarComponent', () => {
   describe('when the collapse link is clicked', () => {
     beforeEach(() => {
       spyOn(menuService, 'toggleMenu');
-      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle > button'));
+      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle-container > a'));
       sidebarToggler.triggerEventHandler('click', {
         preventDefault: () => {/**/
         },
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
index 926a662c2d..390c7463e3 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -1,23 +1,6 @@
-import {
-  Component,
-  HostListener,
-  Injector,
-  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 { Component, HostListener, Injector, Input, OnInit } from '@angular/core';
+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';
@@ -26,6 +9,7 @@ import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
 import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { ThemeService } from '../../shared/theme-support/theme.service';
+import { ActivatedRoute } from '@angular/router';
 
 /**
  * Component representing the admin sidebar
@@ -44,9 +28,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
@@ -60,6 +49,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
    */
@@ -85,7 +80,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) {
@@ -150,6 +144,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') {
@@ -162,6 +157,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 af93341f26..99d3163edf 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,9 +1,5 @@
 import { Component } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+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';
@@ -53,14 +49,14 @@ 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: () => {/**/
         },
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 4fdf3d3751..c8b15faed1 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,14 +1,6 @@
-import {
-  Component,
-  Inject,
-  Injector,
-  OnInit,
-} from '@angular/core';
+import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import {
-  combineLatest as combineLatestObservable,
-  Observable,
-} from 'rxjs';
+import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { bgColor } from '../../../shared/animations/bgColor';
@@ -40,23 +32,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,
@@ -73,12 +65,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 0345bd15ca..1770b221be 100644
--- a/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { AdminSidebarComponent } from './admin-sidebar.component';
+import { Observable } from 'rxjs';
 
 /**
  * Themed wrapper for AdminSidebarComponent
@@ -12,6 +13,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-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 e7cb0502d9..3c82766e9d 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,24 +1,8 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-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 { 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';
@@ -135,7 +119,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';
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 fe02faa4b5..a8006a0c1c 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,9 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+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';
@@ -14,16 +10,16 @@ import { BitstreamDataService } from '../../../../../core/data/bitstream-data.se
 import { Item } from '../../../../../core/shared/item.model';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
+import { followLink } from '../../../../../shared/utils/follow-link-config.model';
+import { ItemGridElementComponent } from '../../../../../shared/object-grid/item-grid-element/item-types/item/item-grid-element.component';
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+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 { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
 import { CollectionElementLinkType } from '../../../../../shared/object-collection/collection-element-link.type';
-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 { 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', () => {
@@ -34,7 +30,7 @@ describe('WorkflowItemSearchResultAdminWorkflowGridElementComponent', () => {
   let itemRD$;
   let linkService;
   let object;
-  let themeService;
+  let themeService: ThemeService;
 
   function init() {
     itemRD$ = createSuccessfulRemoteDataObject$(new Item());
@@ -51,7 +47,11 @@ describe('WorkflowItemSearchResultAdminWorkflowGridElementComponent', () => {
     init();
     TestBed.configureTestingModule(
       {
-        declarations: [WorkflowItemSearchResultAdminWorkflowGridElementComponent, ItemGridElementComponent, ListableObjectDirective],
+        declarations: [
+          WorkflowItemSearchResultAdminWorkflowGridElementComponent,
+          ItemGridElementComponent,
+          DynamicComponentLoaderDirective,
+        ],
         imports: [
           NoopAnimationsModule,
           TranslateModule.forRoot(),
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 8abb17d7f8..37ff173ff6 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,34 +1,24 @@
-import {
-  Component,
-  ComponentFactoryResolver,
-  ElementRef,
-  ViewChild,
-} from '@angular/core';
+import { Component, ComponentRef, ElementRef, OnDestroy, OnInit, 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 { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
 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 { 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,
-} from '../../../../../core/shared/operators';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
-import {
-  getListableObjectComponent,
-  listableObjectComponent,
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
+import { getAllSucceededRemoteData, getRemoteDataPayload } from '../../../../../core/shared/operators';
 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 { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { hasValue } from '../../../../../shared/empty.util';
 import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 
 @listableObjectComponent(WorkflowItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
@@ -40,11 +30,11 @@ import { followLink } from '../../../../../shared/utils/follow-link-config.model
 /**
  * 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
@@ -61,9 +51,10 @@ 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,
@@ -81,26 +72,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;
+      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 a9e86b27f0..ebdf43a03b 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,9 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+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';
@@ -15,21 +11,18 @@ 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 { followLink } from '../../../../../shared/utils/follow-link-config.model';
+import { ItemGridElementComponent } from '../../../../../shared/object-grid/item-grid-element/item-types/item/item-grid-element.component';
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
 import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
 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 { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
-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$,
-} from '../../../../../shared/testing/supervision-order.mock';
+import { supervisionOrderPaginatedListRD, supervisionOrderPaginatedListRD$ } from '../../../../../shared/testing/supervision-order.mock';
 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', () => {
@@ -40,7 +33,7 @@ describe('WorkspaceItemSearchResultAdminWorkflowGridElementComponent', () => {
   let itemRD$;
   let linkService;
   let object;
-  let themeService;
+  let themeService: ThemeService;
   let supervisionOrderDataService;
 
   function init() {
@@ -62,7 +55,11 @@ describe('WorkspaceItemSearchResultAdminWorkflowGridElementComponent', () => {
     init();
     TestBed.configureTestingModule(
       {
-        declarations: [WorkspaceItemSearchResultAdminWorkflowGridElementComponent, ItemGridElementComponent, ListableObjectDirective],
+        declarations: [
+          WorkspaceItemSearchResultAdminWorkflowGridElementComponent,
+          ItemGridElementComponent,
+          DynamicComponentLoaderDirective,
+        ],
         imports: [
           NoopAnimationsModule,
           TranslateModule.forRoot(),
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 8033418ff1..28d2aacfe5 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,48 +1,30 @@
-import {
-  Component,
-  ComponentFactoryResolver,
-  ElementRef,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import {
-  BehaviorSubject,
-  Observable,
-} from 'rxjs';
-import {
-  map,
-  mergeMap,
-  take,
-  tap,
-} from 'rxjs/operators';
+import { Component, ComponentRef, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+
+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 { 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 { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.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 { 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,
-} from '../../../../../core/shared/operators';
-import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
+import { getAllSucceededRemoteData, getFirstCompletedRemoteData, getRemoteDataPayload } from '../../../../../core/shared/operators';
 import { SupervisionOrder } from '../../../../../core/supervision-order/models/supervision-order.model';
 import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
-import {
-  getListableObjectComponent,
-  listableObjectComponent,
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
-import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
+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 { hasValue } from '../../../../../shared/empty.util';
 import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 
 @listableObjectComponent(WorkspaceItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
@@ -54,7 +36,7 @@ import { followLink } from '../../../../../shared/utils/follow-link-config.model
 /**
  * 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
@@ -74,7 +56,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
@@ -86,9 +68,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,
@@ -107,24 +93,24 @@ 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;
+        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.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();
     },
     );
 
@@ -137,6 +123,13 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
     });
   }
 
+  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}
diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 3b04ae5c8e..b39387a86b 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -1,18 +1,18 @@
 import { NgModule } from '@angular/core';
-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 { AccessControlModule } from '../access-control/access-control.module';
 import { MetadataImportPageComponent } from './admin-import-metadata-page/metadata-import-page.component';
 import { AdminRegistriesModule } from './admin-registries/admin-registries.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 { AdminWorkflowModuleModule } from './admin-workflow-page/admin-workflow.module';
+import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
+import { AdminReportsModule } from './admin-reports/admin-reports.module';
+import { UiSwitchModule } from 'ngx-ui-switch';
+import { UploadModule } from '../shared/upload/upload.module';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -25,6 +25,7 @@ const ENTRY_COMPONENTS = [
   imports: [
     AdminRoutingModule,
     AdminRegistriesModule,
+    AdminReportsModule,
     AccessControlModule,
     AdminSearchModule.withEntryComponents(),
     AdminWorkflowModuleModule.withEntryComponents(),
diff --git a/src/app/app-routing-paths.ts b/src/app/app-routing-paths.ts
index f20697826f..4ff2a18dcc 100644
--- a/src/app/app-routing-paths.ts
+++ b/src/app/app-routing-paths.ts
@@ -5,10 +5,7 @@ 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 { getItemModuleRoute, getItemPageRoute } from './item-page/item-page-routing-paths';
 import { hasValue } from './shared/empty.util';
 
 export const BITSTREAM_MODULE_PATH = 'bitstreams';
@@ -34,6 +31,7 @@ export function getBitstreamRequestACopyRoute(item, bitstream): { routerLink: st
     },
   };
 }
+export const COAR_NOTIFY_SUPPORT = 'coar-notify-support';
 
 export const HOME_PAGE_PATH = 'admin';
 
@@ -135,3 +133,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 8d1e3523a8..de4a02f843 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,41 +1,24 @@
 import { NgModule } from '@angular/core';
-import {
-  NoPreloading,
-  RouterModule,
-} from '@angular/router';
-
-import {
-  ACCESS_CONTROL_MODULE_PATH,
-  ADMIN_MODULE_PATH,
-  BITSTREAM_MODULE_PATH,
-  ERROR_PAGE,
-  FORBIDDEN_PATH,
-  FORGOT_PASSWORD_PATH,
-  HEALTH_PAGE_PATH,
-  INFO_MODULE_PATH,
-  INTERNAL_SERVER_ERROR,
-  LEGACY_BITSTREAM_MODULE_PATH,
-  PROFILE_MODULE_PATH,
-  REGISTER_PATH,
-  REQUEST_COPY_MODULE_PATH,
-  WORKFLOW_ITEM_MODULE_PATH,
-} from './app-routing-paths';
+import { ACCESS_CONTROL_MODULE_PATH, ADMIN_MODULE_PATH, BITSTREAM_MODULE_PATH, ERROR_PAGE, FORBIDDEN_PATH, FORGOT_PASSWORD_PATH, HEALTH_PAGE_PATH, INFO_MODULE_PATH, INTERNAL_SERVER_ERROR, LEGACY_BITSTREAM_MODULE_PATH, PROFILE_MODULE_PATH, REGISTER_PATH, REQUEST_COPY_MODULE_PATH, WORKFLOW_ITEM_MODULE_PATH } 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 { 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 { SiteAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 import { SiteRegisterGuard } from './core/data/feature-authorization/feature-authorization-guard/site-register.guard';
 import { EndUserAgreementCurrentUserGuard } from './core/end-user-agreement/end-user-agreement-current-user.guard';
 import { ReloadGuard } from './core/reload/reload.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 { ThemedPageInternalServerErrorComponent } from './page-internal-server-error/themed-page-internal-server-error.component';
+import { SUGGESTION_MODULE_PATH } from './suggestions-page/suggestions-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 { NOTIFICATIONS_MODULE_PATH } from './admin/admin-routing-paths';
+import { ForgotPasswordCheckGuard } from './core/rest-property/forgot-password-check-guard.guard';
 import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
+import { NoPreloading, RouterModule } from '@angular/router';
+import { ITEM_MODULE_PATH } from './item-page/item-page-routing-paths';
 import { PROCESS_MODULE_PATH } from './process-page/process-page-routing.paths';
 
 @NgModule({
@@ -91,7 +74,7 @@ import { PROCESS_MODULE_PATH } from './process-page/process-page-routing.paths';
             path: FORGOT_PASSWORD_PATH,
             loadChildren: () => import('./forgot-password/forgot-password.module')
               .then((m) => m.ForgotPasswordModule),
-            canActivate: [EndUserAgreementCurrentUserGuard],
+            canActivate: [EndUserAgreementCurrentUserGuard, ForgotPasswordCheckGuard]
           },
           {
             path: COMMUNITY_MODULE_PATH,
@@ -151,7 +134,19 @@ import { PROCESS_MODULE_PATH } from './process-page/process-page-routing.paths';
             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',
@@ -199,6 +194,11 @@ import { PROCESS_MODULE_PATH } from './process-page/process-page-routing.paths';
               .then((m) => m.ProcessPageModule),
             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),
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.scss b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.scss
index 80adde4ecc..e69de29bb2 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.scss
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.scss
@@ -1,12 +0,0 @@
-:host {
-  ::ng-deep {
-    .switch {
-      position: absolute;
-      top: calc(var(--bs-spacer) * 2.5);
-    }
-  }
-}
-:host ::ng-deep ds-dynamic-form-control-container > div > label {
-  margin-top: 1.75rem;
-}
-
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
index a48177554a..e153ef3270 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
@@ -1,70 +1,31 @@
-import { Location } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { filter, map, switchMap, tap } from 'rxjs/operators';
+import { combineLatest, combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
+import { DynamicFormControlModel, DynamicFormGroupModel, DynamicFormLayout, DynamicFormService, DynamicInputModel, DynamicSelectModel } from '@ng-dynamic-forms/core';
 import { UntypedFormGroup } from '@angular/forms';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
-import {
-  DynamicFormControlModel,
-  DynamicFormGroupModel,
-  DynamicFormLayout,
-  DynamicFormService,
-  DynamicInputModel,
-  DynamicSelectModel,
-} from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
+import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
 import cloneDeep from 'lodash/cloneDeep';
-import {
-  combineLatest,
-  combineLatest as observableCombineLatest,
-  Observable,
-  of as observableOf,
-  Subscription,
-} from 'rxjs';
-import {
-  filter,
-  map,
-  switchMap,
-  tap,
-} from 'rxjs/operators';
 
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
+import { getAllSucceededRemoteDataPayload, getFirstCompletedRemoteData, getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload, getRemoteDataPayload } from '../../core/shared/operators';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PrimaryBitstreamService } from '../../core/data/primary-bitstream.service';
 import { RemoteData } from '../../core/data/remote-data';
-import { Bitstream } from '../../core/shared/bitstream.model';
 import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
 import { BitstreamFormatSupportLevel } from '../../core/shared/bitstream-format-support-level';
 import { Bundle } from '../../core/shared/bundle.model';
 import { Item } from '../../core/shared/item.model';
 import { Metadata } from '../../core/shared/metadata.utils';
-import {
-  getAllSucceededRemoteDataPayload,
-  getFirstCompletedRemoteData,
-  getFirstSucceededRemoteData,
-  getFirstSucceededRemoteDataPayload,
-  getRemoteDataPayload,
-} from '../../core/shared/operators';
 import { getEntityEditRoute } from '../../item-page/item-page-routing-paths';
-import {
-  hasValue,
-  hasValueOperator,
-  isEmpty,
-  isNotEmpty,
-} from '../../shared/empty.util';
-import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
+import { hasValue, hasValueOperator, isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { DsDynamicInputModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model';
 import { DsDynamicTextAreaModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
 
 @Component({
   selector: 'ds-edit-bitstream-page',
@@ -284,7 +245,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   /**
    * All input models in a simple array for easier iterations
    */
-  inputModels = [this.fileNameModel, this.primaryBitstreamModel, this.descriptionModel, this.selectedFormatModel,
+  inputModels = [this.primaryBitstreamModel, this.fileNameModel, this.descriptionModel, this.selectedFormatModel,
     this.newFormatModel];
 
   /**
@@ -295,9 +256,9 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     new DynamicFormGroupModel({
       id: 'fileNamePrimaryContainer',
       group: [
-        this.fileNameModel,
         this.primaryBitstreamModel,
-      ],
+        this.fileNameModel,
+      ]
     }, {
       grid: {
         host: 'form-row',
@@ -334,8 +295,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     },
     primaryBitstream: {
       grid: {
-        host: 'col col-sm-4 d-inline-block switch border-0',
+        container: 'col-12'
       },
+      element: {
+        container: 'text-right'
+      }
     },
     description: {
       grid: {
diff --git a/src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts b/src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts
deleted file mode 100644
index f4a63fbf2d..0000000000
--- a/src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
-import {
-  BrowseByDataType,
-  rendersBrowseBy,
-} from '../browse-by-switcher/browse-by-decorator';
-import { BrowseByDatePageComponent } from './browse-by-date-page.component';
-
-/**
- * Themed wrapper for BrowseByDatePageComponent
- * */
-@Component({
-  selector: 'ds-themed-browse-by-metadata-page',
-  styleUrls: [],
-  templateUrl: '../../shared/theme-support/themed.component.html',
-})
-
-@rendersBrowseBy(BrowseByDataType.Date)
-export class ThemedBrowseByDatePageComponent
-  extends ThemedComponent {
-  protected getComponentName(): string {
-    return 'BrowseByDatePageComponent';
-  }
-
-  protected importThemedComponent(themeName: string): Promise {
-    return import(`../../../themes/${themeName}/app/browse-by/browse-by-date-page/browse-by-date-page.component`);
-  }
-
-  protected importUnthemedComponent(): Promise {
-    return import(`./browse-by-date-page.component`);
-  }
-}
diff --git a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
similarity index 84%
rename from src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts
rename to src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
index 384b6cfa24..e3d54a9514 100644
--- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
@@ -1,17 +1,8 @@
+import { BrowseByDateComponent } from './browse-by-date.component';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectorRef,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
+import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
+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';
@@ -26,18 +17,18 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { Community } from '../../core/shared/community.model';
 import { Item } from '../../core/shared/item.model';
-import { RouterMock } from '../../shared/mocks/router.mock';
+import { toRemoteData } from '../browse-by-metadata/browse-by-metadata.component.spec';
+import { VarDirective } from '../../shared/utils/var.directive';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
+import { cold } from 'jasmine-marbles';
 import { EnumKeysPipe } from '../../shared/utils/enum-keys-pipe';
-import { VarDirective } from '../../shared/utils/var.directive';
-import { toRemoteData } from '../browse-by-metadata-page/browse-by-metadata-page.component.spec';
-import { BrowseByDatePageComponent } from './browse-by-date-page.component';
+import { RouterMock } from '../../shared/mocks/router.mock';
 
-describe('BrowseByDatePageComponent', () => {
-  let comp: BrowseByDatePageComponent;
-  let fixture: ComponentFixture;
+describe('BrowseByDateComponent', () => {
+  let comp: BrowseByDateComponent;
+  let fixture: ComponentFixture;
   let route: ActivatedRoute;
   let paginationService;
 
@@ -97,7 +88,7 @@ describe('BrowseByDatePageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
-      declarations: [BrowseByDatePageComponent, EnumKeysPipe, VarDirective],
+      declarations: [BrowseByDateComponent, EnumKeysPipe, VarDirective],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: BrowseService, useValue: mockBrowseService },
@@ -112,7 +103,7 @@ describe('BrowseByDatePageComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BrowseByDatePageComponent);
+    fixture = TestBed.createComponent(BrowseByDateComponent);
     const browseService = fixture.debugElement.injector.get(BrowseService);
     spyOn(browseService, 'getFirstItemFor')
       // ok to expect the default browse as first param since we just need the mock items obtained via sort direction.
@@ -123,9 +114,13 @@ describe('BrowseByDatePageComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should initialize the list of items', () => {
+  it('should initialize the list of items', (done: DoneFn) => {
+    expect(comp.loading$).toBeObservable(cold('(a|)', {
+      a: false,
+    }));
     comp.items$.subscribe((result) => {
       expect(result.payload.page).toEqual([firstItem]);
+      done();
     });
   });
 
diff --git a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
similarity index 65%
rename from src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
rename to src/app/browse-by/browse-by-date/browse-by-date.component.ts
index 1f4fe9ff98..0f5995dde6 100644
--- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
@@ -1,68 +1,50 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  Inject,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Params,
-  Router,
-} from '@angular/router';
-import { combineLatest as observableCombineLatest } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import {
-  APP_CONFIG,
-  AppConfig,
-} from '../../../config/app-config.interface';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
+import { BrowseByMetadataComponent, browseParamsToOptions, getBrowseSearchOptions } from '../browse-by-metadata/browse-by-metadata.component';
+import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BrowseService } from '../../core/browse/browse.service';
-import {
-  SortDirection,
-  SortOptions,
-} from '../../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { Item } from '../../core/shared/item.model';
 import { isValidDate } from '../../shared/date.util';
-import {
-  hasValue,
-  isNotEmpty,
-} from '../../shared/empty.util';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
-import {
-  BrowseByMetadataPageComponent,
-  browseParamsToOptions,
-  getBrowseSearchOptions,
-} from '../browse-by-metadata-page/browse-by-metadata-page.component';
+import { map } from 'rxjs/operators';
 
 @Component({
-  selector: 'ds-browse-by-date-page',
-  styleUrls: ['../browse-by-metadata-page/browse-by-metadata-page.component.scss'],
-  templateUrl: '../browse-by-metadata-page/browse-by-metadata-page.component.html',
+  selector: 'ds-browse-by-date',
+  styleUrls: ['../browse-by-metadata/browse-by-metadata.component.scss'],
+  templateUrl: '../browse-by-metadata/browse-by-metadata.component.html',
 })
 /**
  * Component for browsing items by metadata definition of type 'date'
  * A metadata definition (a.k.a. browse id) is a short term used to describe one or multiple metadata fields.
  * An example would be 'dateissued' for 'dc.date.issued'
  */
-export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
+@rendersBrowseBy(BrowseByDataType.Date)
+export class BrowseByDateComponent extends BrowseByMetadataComponent implements OnInit {
 
   /**
    * The default metadata keys to use for determining the lower limit of the StartsWith dropdown options
    */
   defaultMetadataKeys = ['dc.date.issued'];
 
-  public constructor(protected route: ActivatedRoute,
-                     protected browseService: BrowseService,
-                     protected dsoService: DSpaceObjectDataService,
-                     protected router: Router,
-                     protected paginationService: PaginationService,
-                     protected cdRef: ChangeDetectorRef,
-                     @Inject(APP_CONFIG) public appConfig: AppConfig,
-                     public dsoNameService: DSONameService,
+  public constructor(
+    protected route: ActivatedRoute,
+    protected browseService: BrowseService,
+    protected dsoService: DSpaceObjectDataService,
+    protected paginationService: PaginationService,
+    protected router: Router,
+    @Inject(APP_CONFIG) public appConfig: AppConfig,
+    public dsoNameService: DSONameService,
+    protected cdRef: ChangeDetectorRef,
   ) {
     super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService);
   }
@@ -75,19 +57,17 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
     this.subs.push(
-      observableCombineLatest([this.route.params, this.route.queryParams, this.route.data,
+      observableCombineLatest([this.route.params, this.route.queryParams, this.scope$, this.route.data,
         this.currentPagination$, this.currentSort$]).pipe(
-        map(([routeParams, queryParams, data, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams, data), currentPage, currentSort];
-        }),
-      ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
+        map(([routeParams, queryParams, scope, data, currentPage, currentSort]) => {
+          return [Object.assign({}, routeParams, queryParams, data), scope, currentPage, currentSort];
+        })
+      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
         const metadataKeys = params.browseDefinition ? params.browseDefinition.metadataKeys : this.defaultMetadataKeys;
         this.browseId = params.id || this.defaultBrowseId;
         this.startsWith = +params.startsWith || params.startsWith;
-        const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails);
+        const searchOptions = browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, this.fetchThumbnails);
         this.updatePageWithItems(searchOptions, this.value, undefined);
-        this.updateParent(params.scope);
-        this.updateLogo();
         this.updateStartsWithOptions(this.browseId, metadataKeys, params.scope);
       }));
   }
@@ -103,12 +83,21 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
    * @param scope           The scope under which to fetch the earliest item for
    */
   updateStartsWithOptions(definition: string, metadataKeys: string[], scope?: string) {
-    const firstItemRD = this.browseService.getFirstItemFor(definition, scope, SortDirection.ASC);
-    const lastItemRD = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
+    const firstItemRD$: Observable> = this.browseService.getFirstItemFor(definition, scope, SortDirection.ASC);
+    const lastItemRD$: Observable> = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
+    this.loading$ = observableCombineLatest([
+      firstItemRD$,
+      lastItemRD$,
+    ]).pipe(
+      map(([firstItemRD, lastItemRD]: [RemoteData, RemoteData]) => firstItemRD.isLoading || lastItemRD.isLoading)
+    );
     this.subs.push(
-      observableCombineLatest([firstItemRD, lastItemRD]).subscribe(([firstItem, lastItem]) => {
-        let lowerLimit: number = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
-        const upperLimit: number = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
+      observableCombineLatest([
+        firstItemRD$,
+        lastItemRD$,
+      ]).subscribe(([firstItemRD, lastItemRD]: [RemoteData, RemoteData]) => {
+        let lowerLimit: number = this.getLimit(firstItemRD, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
+        let upperLimit: number = this.getLimit(lastItemRD, metadataKeys, new Date().getUTCFullYear());
         const options: number[] = [];
         const oneYearBreak: number = Math.floor((upperLimit - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
         const fiveYearBreak: number = Math.floor((upperLimit - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
diff --git a/src/app/browse-by/browse-by-guard.spec.ts b/src/app/browse-by/browse-by-guard.spec.ts
index 7fab2ebc4f..603f8b531d 100644
--- a/src/app/browse-by/browse-by-guard.spec.ts
+++ b/src/app/browse-by/browse-by-guard.spec.ts
@@ -1,21 +1,13 @@
-import { of as observableOf } from 'rxjs';
 import { first } from 'rxjs/operators';
-
-import { DSONameService } from '../core/breadcrumbs/dso-name.service';
-import { ValueListBrowseDefinition } from '../core/shared/value-list-browse-definition.model';
-import { DSONameServiceMock } from '../shared/mocks/dso-name.service.mock';
-import {
-  createFailedRemoteDataObject$,
-  createSuccessfulRemoteDataObject$,
-} from '../shared/remote-data.utils';
-import { RouterStub } from '../shared/testing/router.stub';
 import { BrowseByGuard } from './browse-by-guard';
-import { BrowseByDataType } from './browse-by-switcher/browse-by-decorator';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
+import { ValueListBrowseDefinition } from '../core/shared/value-list-browse-definition.model';
+import { RouterStub } from '../shared/testing/router.stub';
+import { BrowseByDataType } from './browse-by-switcher/browse-by-data-type';
 
 describe('BrowseByGuard', () => {
   describe('canActivate', () => {
     let guard: BrowseByGuard;
-    let dsoService: any;
     let translateService: any;
     let browseDefinitionService: any;
     let router: any;
@@ -29,10 +21,6 @@ describe('BrowseByGuard', () => {
     const browseDefinition = Object.assign(new ValueListBrowseDefinition(), { type: BrowseByDataType.Metadata, metadataKeys: ['dc.contributor'] });
 
     beforeEach(() => {
-      dsoService = {
-        findById: (dsoId: string) => observableOf({ payload: { name: name }, hasSucceeded: true }),
-      };
-
       translateService = {
         instant: () => field,
       };
@@ -43,7 +31,7 @@ describe('BrowseByGuard', () => {
 
       router = new RouterStub() as any;
 
-      guard = new BrowseByGuard(dsoService, translateService, browseDefinitionService, new DSONameServiceMock() as DSONameService, router);
+      guard = new BrowseByGuard(translateService, browseDefinitionService, router);
     });
 
     it('should return true, and sets up the data correctly, with a scope and value', () => {
@@ -52,6 +40,7 @@ describe('BrowseByGuard', () => {
           title: field,
           browseDefinition,
         },
+        parent: null,
         params: {
           id,
         },
@@ -68,7 +57,7 @@ describe('BrowseByGuard', () => {
               title,
               id,
               browseDefinition,
-              collection: name,
+              scope,
               field,
               value: '"' + value + '"',
             };
@@ -101,7 +90,7 @@ describe('BrowseByGuard', () => {
               title,
               id,
               browseDefinition,
-              collection: name,
+              scope,
               field,
               value: '',
             };
@@ -112,12 +101,48 @@ describe('BrowseByGuard', () => {
         );
     });
 
+    it('should return true, and sets up the data correctly using the community/collection page id, with a scope and without value', () => {
+      const scopedNoValueRoute = {
+        data: {
+          title: field,
+          browseDefinition,
+        },
+        parent: {
+          params: {
+            id: scope,
+          },
+        },
+        params: {
+          id,
+        },
+        queryParams: {
+        },
+      };
+
+      guard.canActivate(scopedNoValueRoute as any, undefined).pipe(
+        first(),
+      ).subscribe((canActivate) => {
+        const result = {
+          title,
+          id,
+          browseDefinition,
+          scope,
+          field,
+          value: '',
+        };
+        expect(scopedNoValueRoute.data).toEqual(result);
+        expect(router.navigate).not.toHaveBeenCalled();
+        expect(canActivate).toEqual(true);
+      });
+    });
+
     it('should return true, and sets up the data correctly, without a scope and with a value', () => {
       const route = {
         data: {
           title: field,
           browseDefinition,
         },
+        parent: null,
         params: {
           id,
         },
@@ -133,7 +158,7 @@ describe('BrowseByGuard', () => {
               title,
               id,
               browseDefinition,
-              collection: '',
+              scope: undefined,
               field,
               value: '"' + value + '"',
             };
@@ -151,6 +176,7 @@ describe('BrowseByGuard', () => {
         data: {
           title: field,
         },
+        parent: null,
         params: {
           id,
         },
diff --git a/src/app/browse-by/browse-by-guard.ts b/src/app/browse-by/browse-by-guard.ts
index d9c664509e..5b8ec5f0ce 100644
--- a/src/app/browse-by/browse-by-guard.ts
+++ b/src/app/browse-by/browse-by-guard.ts
@@ -1,35 +1,15 @@
+import { ActivatedRouteSnapshot, CanActivate, Data, Router, RouterStateSnapshot } from '@angular/router';
 import { Injectable } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  CanActivate,
-  Router,
-  RouterStateSnapshot,
-} from '@angular/router';
+import { hasNoValue, hasValue } from '../shared/empty.util';
+import { map, switchMap } from 'rxjs/operators';
+import { getFirstCompletedRemoteData } from '../core/shared/operators';
 import { TranslateService } from '@ngx-translate/core';
-import {
-  Observable,
-  of as observableOf,
-} from 'rxjs';
-import {
-  map,
-  switchMap,
-} from 'rxjs/operators';
+import { Observable, of as observableOf } from 'rxjs';
 
 import { PAGE_NOT_FOUND_PATH } from '../app-routing-paths';
-import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 import { BrowseDefinitionDataService } from '../core/browse/browse-definition-data.service';
-import { DSpaceObjectDataService } from '../core/data/dspace-object-data.service';
 import { RemoteData } from '../core/data/remote-data';
 import { BrowseDefinition } from '../core/shared/browse-definition.model';
-import { DSpaceObject } from '../core/shared/dspace-object.model';
-import {
-  getFirstCompletedRemoteData,
-  getFirstSucceededRemoteDataPayload,
-} from '../core/shared/operators';
-import {
-  hasNoValue,
-  hasValue,
-} from '../shared/empty.util';
 
 @Injectable()
 /**
@@ -37,11 +17,10 @@ import {
  */
 export class BrowseByGuard implements CanActivate {
 
-  constructor(protected dsoService: DSpaceObjectDataService,
-              protected translate: TranslateService,
-              protected browseDefinitionService: BrowseDefinitionDataService,
-              protected dsoNameService: DSONameService,
-              protected router: Router,
+  constructor(
+    protected translate: TranslateService,
+    protected browseDefinitionService: BrowseDefinitionDataService,
+    protected router: Router,
   ) {
   }
 
@@ -57,25 +36,14 @@ export class BrowseByGuard implements CanActivate {
     } else {
       browseDefinition$ = observableOf(route.data.browseDefinition);
     }
-    const scope = route.queryParams.scope;
+    const scope = route.queryParams.scope ?? route.parent?.params.id;
     const value = route.queryParams.value;
     const metadataTranslated = this.translate.instant(`browse.metadata.${id}`);
     return browseDefinition$.pipe(
       switchMap((browseDefinition: BrowseDefinition | undefined) => {
         if (hasValue(browseDefinition)) {
-          if (hasValue(scope)) {
-            const dso$: Observable = this.dsoService.findById(scope).pipe(getFirstSucceededRemoteDataPayload());
-            return dso$.pipe(
-              map((dso: DSpaceObject) => {
-                const name = this.dsoNameService.getName(dso);
-                route.data = this.createData(title, id, browseDefinition, name, metadataTranslated, value, route);
-                return true;
-              }),
-            );
-          } else {
-            route.data = this.createData(title, id, browseDefinition, '', metadataTranslated, value, route);
-            return observableOf(true);
-          }
+          route.data = this.createData(title, id, browseDefinition, metadataTranslated, value, route, scope);
+          return observableOf(true);
         } else {
           void this.router.navigate([PAGE_NOT_FOUND_PATH]);
           return observableOf(false);
@@ -84,14 +52,14 @@ export class BrowseByGuard implements CanActivate {
     );
   }
 
-  private createData(title, id, browseDefinition, collection, field, value, route) {
+  private createData(title: string, id: string, browseDefinition: BrowseDefinition, field: string, value: string, route: ActivatedRouteSnapshot, scope: string): Data {
     return Object.assign({}, route.data, {
       title: title,
       id: id,
       browseDefinition: browseDefinition,
-      collection: collection,
       field: field,
       value: hasValue(value) ? `"${value}"` : '',
+      scope: scope,
     });
   }
 }
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
deleted file mode 100644
index cfc2cbe305..0000000000
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
+++ /dev/null
@@ -1,67 +0,0 @@
-

-    
-    
-        

-
-            

-        
-        
-        
-      
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-      

-        
-        

-      
-      
-      
-
-    

-    

-    
-    
-    
-  

-  

-  
-    
-  

-    

-
-      
-      
-      
-    

-  

-
-
-

diff --git a/src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts b/src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts
deleted file mode 100644
index fca70631d4..0000000000
--- a/src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
-import {
-  BrowseByDataType,
-  rendersBrowseBy,
-} from '../browse-by-switcher/browse-by-decorator';
-import { BrowseByMetadataPageComponent } from './browse-by-metadata-page.component';
-
-/**
- * Themed wrapper for BrowseByMetadataPageComponent
- **/
-@Component({
-  selector: 'ds-themed-browse-by-metadata-page',
-  styleUrls: [],
-  templateUrl: '../../shared/theme-support/themed.component.html',
-})
-
-@rendersBrowseBy(BrowseByDataType.Metadata)
-export class ThemedBrowseByMetadataPageComponent
-  extends ThemedComponent {
-  protected getComponentName(): string {
-    return 'BrowseByMetadataPageComponent';
-  }
-
-  protected importThemedComponent(themeName: string): Promise {
-    return import(`../../../themes/${themeName}/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component`);
-  }
-
-  protected importUnthemedComponent(): Promise {
-    return import(`./browse-by-metadata-page.component`);
-  }
-}
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
new file mode 100644
index 0000000000..52ef06206f
--- /dev/null
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
@@ -0,0 +1,21 @@
+

+  

+    
+    
+    
+  

+

diff --git a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.scss b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.scss
similarity index 100%
rename from src/app/community-page/sub-community-list/community-page-sub-community-list.component.scss
rename to src/app/browse-by/browse-by-metadata/browse-by-metadata.component.scss
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
similarity index 84%
rename from src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
rename to src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
index bd4ddedda0..623982b174 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
@@ -1,31 +1,19 @@
+import { BrowseByMetadataComponent, browseParamsToOptions, getBrowseSearchOptions } from './browse-by-metadata.component';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { BrowseService } from '../../core/browse/browse.service';
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
+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 {
-  Observable,
-  of as observableOf,
-} from 'rxjs';
+import { Observable, of as observableOf } from 'rxjs';
 
 import { APP_CONFIG } from '../../../config/app-config.interface';
-import { BrowseService } from '../../core/browse/browse.service';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
 import { SortDirection } from '../../core/cache/models/sort-options.model';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
-import {
-  buildPaginatedList,
-  PaginatedList,
-} from '../../core/data/paginated-list.model';
+import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { BrowseEntry } from '../../core/shared/browse-entry.model';
@@ -37,17 +25,11 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
-import { EnumKeysPipe } from '../../shared/utils/enum-keys-pipe';
-import { VarDirective } from '../../shared/utils/var.directive';
-import {
-  BrowseByMetadataPageComponent,
-  browseParamsToOptions,
-  getBrowseSearchOptions,
-} from './browse-by-metadata-page.component';
+import { cold } from 'jasmine-marbles';
 
-describe('BrowseByMetadataPageComponent', () => {
-  let comp: BrowseByMetadataPageComponent;
-  let fixture: ComponentFixture;
+describe('BrowseByMetadataComponent', () => {
+  let comp: BrowseByMetadataComponent;
+  let fixture: ComponentFixture;
   let browseService: BrowseService;
   let route: ActivatedRoute;
   let paginationService;
@@ -117,7 +99,7 @@ describe('BrowseByMetadataPageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
-      declarations: [BrowseByMetadataPageComponent, EnumKeysPipe, VarDirective],
+      declarations: [BrowseByMetadataComponent, EnumKeysPipe, VarDirective],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: BrowseService, useValue: mockBrowseService },
@@ -131,7 +113,7 @@ describe('BrowseByMetadataPageComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BrowseByMetadataPageComponent);
+    fixture = TestBed.createComponent(BrowseByMetadataComponent);
     comp = fixture.componentInstance;
     fixture.detectChanges();
     browseService = (comp as any).browseService;
@@ -158,20 +140,18 @@ describe('BrowseByMetadataPageComponent', () => {
 
       route.params = observableOf(paramsWithValue);
       comp.ngOnInit();
-      comp.updateParent('fake-scope');
-      comp.updateLogo();
       fixture.detectChanges();
     });
 
-    it('should fetch items', () => {
+    it('should fetch items', (done: DoneFn) => {
+      expect(comp.loading$).toBeObservable(cold('(a|)', {
+        a: false,
+      }));
       comp.items$.subscribe((result) => {
         expect(result.payload.page).toEqual(mockItems);
+        done();
       });
     });
-
-    it('should fetch the logo', () => {
-      expect(comp.logo$).toBeTruthy();
-    });
   });
 
   describe('when calling browseParamsToOptions', () => {
@@ -190,7 +170,7 @@ describe('BrowseByMetadataPageComponent', () => {
         field: 'fake-field',
       };
 
-      result = browseParamsToOptions(paramsScope, paginationOptions, sortOptions, 'author', comp.fetchThumbnails);
+      result = browseParamsToOptions(paramsScope, 'fake-scope', paginationOptions, sortOptions, 'author', comp.fetchThumbnails);
     });
 
     it('should return BrowseEntrySearchOptions with the correct properties', () => {
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
similarity index 74%
rename from src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
rename to src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
index eb87ff9223..bbcef69789 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -1,64 +1,34 @@
-import {
-  Component,
-  Inject,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Params,
-  Router,
-} from '@angular/router';
-import {
-  combineLatest as observableCombineLatest,
-  Observable,
-  Subscription,
-} from 'rxjs';
-import {
-  filter,
-  map,
-  mergeMap,
-} from 'rxjs/operators';
-
-import {
-  APP_CONFIG,
-  AppConfig,
-} from '../../../config/app-config.interface';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
+import { Component, Inject, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { RemoteData } from '../../core/data/remote-data';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { BrowseService } from '../../core/browse/browse.service';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
-import {
-  SortDirection,
-  SortOptions,
-} from '../../core/cache/models/sort-options.model';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
-import { PaginatedList } from '../../core/data/paginated-list.model';
-import { RemoteData } from '../../core/data/remote-data';
+import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
-import { Bitstream } from '../../core/shared/bitstream.model';
+import { map } from 'rxjs/operators';
+import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
+import { Context } from '../../core/shared/context.model';
 import { BrowseEntry } from '../../core/shared/browse-entry.model';
 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 { getFirstSucceededRemoteData } from '../../core/shared/operators';
-import {
-  hasValue,
-  isNotEmpty,
-} from '../../shared/empty.util';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
-import {
-  followLink,
-  FollowLinkConfig,
-} from '../../shared/utils/follow-link-config.model';
 
 export const BBM_PAGINATION_ID = 'bbm';
 
 @Component({
-  selector: 'ds-browse-by-metadata-page',
-  styleUrls: ['./browse-by-metadata-page.component.scss'],
-  templateUrl: './browse-by-metadata-page.component.html',
+  selector: 'ds-browse-by-metadata',
+  styleUrls: ['./browse-by-metadata.component.scss'],
+  templateUrl: './browse-by-metadata.component.html',
 })
 /**
  * Component for browsing (items) by metadata definition.
@@ -66,7 +36,30 @@ export const BBM_PAGINATION_ID = 'bbm';
  * or multiple metadata fields.  An example would be 'author' for
  * 'dc.contributor.*'
  */
-export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
+@rendersBrowseBy(BrowseByDataType.Metadata)
+export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
+
+  /**
+   * The optional context
+   */
+  @Input() context: Context;
+
+  /**
+   * The {@link BrowseByDataType} of this Component
+   */
+  @Input() browseByType: BrowseByDataType;
+
+  /**
+   * The ID of the {@link Community} or {@link Collection} of the scope to display
+   */
+  @Input() scope: string;
+
+  /**
+   * Display the h1 title in the section
+   */
+  @Input() displayTitle = true;
+
+  scope$: BehaviorSubject = new BehaviorSubject(undefined);
 
   /**
    * The list of browse-entries to display
@@ -78,16 +71,6 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
    */
   items$: Observable>>;
 
-  /**
-   * The current Community or Collection we're browsing metadata/items in
-   */
-  parent$: Observable>;
-
-  /**
-   * The logo of the current Community or Collection
-   */
-  logo$: Observable>;
-
   /**
    * The pagination config used to display the values
    */
@@ -128,7 +111,7 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
    * The list of StartsWith options
    * Should be defined after ngOnInit is called!
    */
-  startsWithOptions;
+  startsWithOptions: (string | number)[];
 
   /**
    * The value we're browsing items for
@@ -152,6 +135,11 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
    */
   fetchThumbnails: boolean;
 
+  /**
+   * Observable determining if the loading animation needs to be shown
+   */
+  loading$ = observableOf(true);
+
   public constructor(protected route: ActivatedRoute,
                      protected browseService: BrowseService,
                      protected dsoService: DSpaceObjectDataService,
@@ -160,7 +148,6 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
                      @Inject(APP_CONFIG) public appConfig: AppConfig,
                      public dsoNameService: DSONameService,
   ) {
-
     this.fetchThumbnails = this.appConfig.browseBy.showThumbnails;
     this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
       id: BBM_PAGINATION_ID,
@@ -177,11 +164,11 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
     this.subs.push(
-      observableCombineLatest([this.route.params, this.route.queryParams, this.currentPagination$, this.currentSort$]).pipe(
-        map(([routeParams, queryParams, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams),currentPage,currentSort];
-        }),
-      ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
+      observableCombineLatest([this.route.params, this.route.queryParams, this.scope$, this.currentPagination$, this.currentSort$]).pipe(
+        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
+          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
+        })
+      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
         this.browseId = params.id || this.defaultBrowseId;
         this.authority = params.authority;
 
@@ -200,18 +187,19 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
         }
 
         if (isNotEmpty(this.value)) {
-          this.updatePageWithItems(
-            browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails), this.value, this.authority);
+            this.updatePageWithItems(browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, this.fetchThumbnails), this.value, this.authority);
         } else {
-          this.updatePage(browseParamsToOptions(params, currentPage, currentSort, this.browseId, false));
+            this.updatePage(browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, false));
         }
-        this.updateParent(params.scope);
-        this.updateLogo();
       }));
     this.updateStartsWithTextOptions();
 
   }
 
+  ngOnChanges(): void {
+    this.scope$.next(this.scope);
+  }
+
   /**
    * Update the StartsWith options with text values
    * It adds the value "0-9" as well as all letters from A to Z
@@ -230,6 +218,9 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
    */
   updatePage(searchOptions: BrowseEntrySearchOptions) {
     this.browseEntries$ = this.browseService.getBrowseEntriesFor(searchOptions);
+    this.loading$ = this.browseEntries$.pipe(
+      map((browseEntriesRD: RemoteData>) => browseEntriesRD.isLoading),
+    );
     this.items$ = undefined;
   }
 
@@ -244,37 +235,9 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
    */
   updatePageWithItems(searchOptions: BrowseEntrySearchOptions, value: string, authority: string) {
     this.items$ = this.browseService.getBrowseItemsFor(value, authority, searchOptions);
-  }
-
-  /**
-   * Update the parent Community or Collection using their scope
-   * @param scope   The UUID of the Community or Collection to fetch
-   */
-  updateParent(scope: string) {
-    if (hasValue(scope)) {
-      const linksToFollow = () => {
-        return [followLink('logo')];
-      };
-      this.parent$ = this.dsoService.findById(scope,
-        true,
-        true,
-        ...linksToFollow() as FollowLinkConfig[]).pipe(
-        getFirstSucceededRemoteData(),
-      );
-    }
-  }
-
-  /**
-   * Update the parent Community or Collection logo
-   */
-  updateLogo() {
-    if (hasValue(this.parent$)) {
-      this.logo$ = this.parent$.pipe(
-        map((rd: RemoteData) => rd.payload),
-        filter((collectionOrCommunity: Collection | Community) => hasValue(collectionOrCommunity.logo)),
-        mergeMap((collectionOrCommunity: Collection | Community) => collectionOrCommunity.logo),
-      );
-    }
+    this.loading$ = this.items$.pipe(
+      map((itemsRD: RemoteData>) => itemsRD.isLoading),
+    );
   }
 
   /**
@@ -308,7 +271,7 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
+    this.subs.filter((sub: Subscription) => hasValue(sub)).forEach((sub: Subscription) => sub.unsubscribe());
     this.paginationService.clearPagination(this.paginationConfig.id);
   }
 
@@ -337,12 +300,14 @@ export function getBrowseSearchOptions(defaultBrowseId: string,
 /**
  * Function to transform query and url parameters into searchOptions used to fetch browse entries or items
  * @param params            URL and query parameters
+ * @param scope             The scope to show the results
  * @param paginationConfig  Pagination configuration
  * @param sortConfig        Sorting configuration
  * @param metadata          Optional metadata definition to fetch browse entries/items for
  * @param fetchThumbnail   Optional parameter for requesting thumbnail images
  */
 export function browseParamsToOptions(params: any,
+                                      scope: string,
   paginationConfig: PaginationComponentOptions,
   sortConfig: SortOptions,
   metadata?: string,
@@ -352,7 +317,7 @@ export function browseParamsToOptions(params: any,
     paginationConfig,
     sortConfig,
     params.startsWith,
-    params.scope,
+    scope,
     fetchThumbnail,
   );
 }
diff --git a/src/app/browse-by/browse-by-page.module.ts b/src/app/browse-by/browse-by-page.module.ts
index 22b93a99ab..34dfcf7f27 100644
--- a/src/app/browse-by/browse-by-page.module.ts
+++ b/src/app/browse-by/browse-by-page.module.ts
@@ -3,15 +3,22 @@ import { NgModule } from '@angular/core';
 import { BrowseService } from '../core/browse/browse.service';
 import { ItemDataService } from '../core/data/item-data.service';
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
+import { BrowseByPageComponent } from './browse-by-page/browse-by-page.component';
+import { SharedModule } from '../shared/shared.module';
 import { BrowseByModule } from './browse-by.module';
 import { BrowseByGuard } from './browse-by-guard';
 import { BrowseByRoutingModule } from './browse-by-routing.module';
 
+const DECLARATIONS = [
+  BrowseByPageComponent,
+];
+
 @NgModule({
   imports: [
     SharedBrowseByModule,
     BrowseByRoutingModule,
-    BrowseByModule.withEntryComponents(),
+    BrowseByModule,
+    SharedModule,
   ],
   providers: [
     ItemDataService,
@@ -19,7 +26,10 @@ import { BrowseByRoutingModule } from './browse-by-routing.module';
     BrowseByGuard,
   ],
   declarations: [
-
+    ...DECLARATIONS,
+  ],
+  exports: [
+    ...DECLARATIONS,
   ],
 })
 export class BrowseByPageModule {
diff --git a/src/app/browse-by/browse-by-page/browse-by-page.component.html b/src/app/browse-by/browse-by-page/browse-by-page.component.html
new file mode 100644
index 0000000000..6e9476e1e9
--- /dev/null
+++ b/src/app/browse-by/browse-by-page/browse-by-page.component.html
@@ -0,0 +1,4 @@
+

+  
+  
+

diff --git a/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-actions-loader/advanced-workflow-actions-loader.component.scss b/src/app/browse-by/browse-by-page/browse-by-page.component.scss
similarity index 100%
rename from src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-actions-loader/advanced-workflow-actions-loader.component.scss
rename to src/app/browse-by/browse-by-page/browse-by-page.component.scss
diff --git a/src/app/browse-by/browse-by-page/browse-by-page.component.spec.ts b/src/app/browse-by/browse-by-page/browse-by-page.component.spec.ts
new file mode 100644
index 0000000000..25483028eb
--- /dev/null
+++ b/src/app/browse-by/browse-by-page/browse-by-page.component.spec.ts
@@ -0,0 +1,69 @@
+// eslint-disable-next-line max-classes-per-file
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowseByPageComponent } from './browse-by-page.component';
+import { BrowseBySwitcherComponent } from '../browse-by-switcher/browse-by-switcher.component';
+import { DynamicComponentLoaderDirective } from '../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { ActivatedRoute } from '@angular/router';
+import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { Component } from '@angular/core';
+import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { By } from '@angular/platform-browser';
+import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
+
+@rendersBrowseBy('BrowseByPageComponent' as BrowseByDataType)
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '',
+  template: '',
+})
+class BrowseByTestComponent {
+}
+
+class TestBrowseByPageBrowseDefinition extends BrowseDefinition {
+  getRenderType(): BrowseByDataType {
+    return 'BrowseByPageComponent' as BrowseByDataType;
+  }
+}
+
+describe('BrowseByPageComponent', () => {
+  let component: BrowseByPageComponent;
+  let fixture: ComponentFixture;
+
+  let activatedRoute: ActivatedRouteStub;
+  let themeService: ThemeService;
+
+  beforeEach(async () => {
+    activatedRoute = new ActivatedRouteStub();
+    themeService = getMockThemeService();
+
+    await TestBed.configureTestingModule({
+      declarations: [
+        BrowseByPageComponent,
+        BrowseBySwitcherComponent,
+        DynamicComponentLoaderDirective,
+      ],
+      providers: [
+        BrowseByTestComponent,
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ThemeService, useValue: themeService },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BrowseByPageComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create the correct browse section based on the route browseDefinition', () => {
+    activatedRoute.testData = {
+      browseDefinition: new TestBrowseByPageBrowseDefinition(),
+    };
+
+    fixture.detectChanges();
+
+    expect(component).toBeTruthy();
+    expect(fixture.debugElement.query(By.css('#BrowseByTestComponent'))).not.toBeNull();
+  });
+});
diff --git a/src/app/browse-by/browse-by-page/browse-by-page.component.ts b/src/app/browse-by/browse-by-page/browse-by-page.component.ts
new file mode 100644
index 0000000000..9df02562c6
--- /dev/null
+++ b/src/app/browse-by/browse-by-page/browse-by-page.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
+
+@Component({
+  selector: 'ds-browse-by-page',
+  templateUrl: './browse-by-page.component.html',
+  styleUrls: ['./browse-by-page.component.scss'],
+})
+export class BrowseByPageComponent implements OnInit {
+
+  browseByType$: Observable;
+
+  constructor(
+    protected route: ActivatedRoute,
+  ) {
+  }
+
+  /**
+   * Fetch the correct browse-by component by using the relevant config from the route data
+   */
+  ngOnInit(): void {
+    this.browseByType$ = this.route.data.pipe(
+      map((data: { browseDefinition: BrowseDefinition }) => data.browseDefinition.getRenderType()),
+    );
+  }
+
+}
diff --git a/src/app/browse-by/browse-by-routing.module.ts b/src/app/browse-by/browse-by-routing.module.ts
index d1149c0381..5f92268b89 100644
--- a/src/app/browse-by/browse-by-routing.module.ts
+++ b/src/app/browse-by/browse-by-routing.module.ts
@@ -5,7 +5,7 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 import { BrowseByDSOBreadcrumbResolver } from './browse-by-dso-breadcrumb.resolver';
 import { BrowseByGuard } from './browse-by-guard';
 import { BrowseByI18nBreadcrumbResolver } from './browse-by-i18n-breadcrumb.resolver';
-import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-browse-by-switcher.component';
+import { BrowseByPageComponent } from './browse-by-page/browse-by-page.component';
 
 @NgModule({
   imports: [
@@ -19,7 +19,7 @@ import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-bro
         children: [
           {
             path: ':id',
-            component: ThemedBrowseBySwitcherComponent,
+            component: BrowseByPageComponent,
             canActivate: [BrowseByGuard],
             resolve: { breadcrumb: BrowseByI18nBreadcrumbResolver },
             data: { title: 'browse.title.page', breadcrumbKey: 'browse.metadata' },
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-data-type.ts b/src/app/browse-by/browse-by-switcher/browse-by-data-type.ts
new file mode 100644
index 0000000000..5324018b34
--- /dev/null
+++ b/src/app/browse-by/browse-by-switcher/browse-by-data-type.ts
@@ -0,0 +1,6 @@
+export enum BrowseByDataType {
+  Title = 'title',
+  Metadata = 'text',
+  Date = 'date',
+  Hierarchy = 'hierarchy',
+}
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts b/src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts
index fb51b5723c..64604cdc04 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts
@@ -1,7 +1,5 @@
-import {
-  BrowseByDataType,
-  rendersBrowseBy,
-} from './browse-by-decorator';
+import { BrowseByDataType } from './browse-by-data-type';
+import { rendersBrowseBy } from './browse-by-decorator';
 
 describe('BrowseByDecorator', () => {
   const titleDecorator = rendersBrowseBy(BrowseByDataType.Title);
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts b/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
index 6c81909256..62e666227d 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
@@ -1,41 +1,36 @@
-import { InjectionToken } from '@angular/core';
-
-import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { Component } from '@angular/core';
 import { hasNoValue } from '../../shared/empty.util';
-import {
-  DEFAULT_THEME,
-  resolveTheme,
-} from '../../shared/object-collection/shared/listable-object/listable-object.decorator';
-
-export enum BrowseByDataType {
-  Title = 'title',
-  Metadata = 'text',
-  Date = 'date'
-}
+import { DEFAULT_THEME, resolveTheme } from '../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { Context } from '../../core/shared/context.model';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { BrowseByDataType } from './browse-by-data-type';
 
 export const DEFAULT_BROWSE_BY_TYPE = BrowseByDataType.Metadata;
+export const DEFAULT_BROWSE_BY_CONTEXT = Context.Any;
 
-export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType, theme) => GenericConstructor>('getComponentByBrowseByType', {
-  providedIn: 'root',
-  factory: () => getComponentByBrowseByType,
-});
-
-const map = new Map();
+const map: Map>>> = new Map();
 
 /**
  * Decorator used for rendering Browse-By pages by type
  * @param browseByType  The type of page
+ * @param context The optional context for the component
  * @param theme The optional theme for the component
  */
-export function rendersBrowseBy(browseByType: string, theme = DEFAULT_THEME) {
+export function rendersBrowseBy(browseByType: BrowseByDataType, context = DEFAULT_BROWSE_BY_CONTEXT, theme = DEFAULT_THEME) {
   return function decorator(component: any) {
+    if (hasNoValue(browseByType)) {
+      return;
+    }
     if (hasNoValue(map.get(browseByType))) {
       map.set(browseByType, new Map());
     }
-    if (hasNoValue(map.get(browseByType).get(theme))) {
-      map.get(browseByType).set(theme, component);
+    if (hasNoValue(map.get(browseByType).get(context))) {
+      map.get(browseByType).set(context, new Map());
+    }
+    if (hasNoValue(map.get(browseByType).get(context).get(theme))) {
+      map.get(browseByType).get(context).set(theme, component);
     } else {
-      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}" and theme "${theme}"`);
+      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}", context "${context}" and theme "${theme}"`);
     }
   };
 }
@@ -43,12 +38,17 @@ export function rendersBrowseBy(browseByType: string, theme = DEFAULT_THEME) {
 /**
  * Get the component used for rendering a Browse-By page by type
  * @param browseByType  The type of page
+ * @param context The context to match
  * @param theme the theme to match
  */
-export function getComponentByBrowseByType(browseByType, theme) {
-  let themeMap = map.get(browseByType);
+export function getComponentByBrowseByType(browseByType: BrowseByDataType, context: Context, theme: string): GenericConstructor {
+  let contextMap: Map>> = map.get(browseByType);
+  if (hasNoValue(contextMap)) {
+    contextMap = map.get(DEFAULT_BROWSE_BY_TYPE);
+  }
+  let themeMap: Map> = contextMap.get(context);
   if (hasNoValue(themeMap)) {
-    themeMap = map.get(DEFAULT_BROWSE_BY_TYPE);
+    themeMap = contextMap.get(DEFAULT_BROWSE_BY_CONTEXT);
   }
   const comp = resolveTheme(themeMap, theme);
   if (hasNoValue(comp)) {
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.html b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.html
deleted file mode 100644
index afe79cf2b1..0000000000
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
index 83706ad01c..5d5eea230d 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
@@ -1,21 +1,23 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
-import { ActivatedRoute } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
-
+import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { Component, SimpleChange } from '@angular/core';
+import { rendersBrowseBy } from './browse-by-decorator';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 import { FlatBrowseDefinition } from '../../core/shared/flat-browse-definition.model';
 import { NonHierarchicalBrowseDefinition } from '../../core/shared/non-hierarchical-browse-definition';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
+import { DynamicComponentLoaderDirective } from '../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { BrowseByDataType } from './browse-by-data-type';
 import { ValueListBrowseDefinition } from '../../core/shared/value-list-browse-definition.model';
-import { ThemeService } from '../../shared/theme-support/theme.service';
-import {
-  BROWSE_BY_COMPONENT_FACTORY,
-  BrowseByDataType,
-} from './browse-by-decorator';
-import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
+
+@rendersBrowseBy('BrowseBySwitcherComponent' as BrowseByDataType)
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '',
+  template: '',
+})
+class BrowseByTestComponent {
+}
 
 describe('BrowseBySwitcherComponent', () => {
   let comp: BrowseBySwitcherComponent;
@@ -49,46 +51,45 @@ describe('BrowseBySwitcherComponent', () => {
     ),
   ];
 
-  const data = new BehaviorSubject(createDataWithBrowseDefinition(new FlatBrowseDefinition()));
-
-  const activatedRouteStub = {
-    data,
-  };
-
   let themeService: ThemeService;
-  let themeName: string;
+  const themeName = 'dspace';
 
   beforeEach(waitForAsync(() => {
-    themeName = 'dspace';
-    themeService = jasmine.createSpyObj('themeService', {
-      getThemeName: themeName,
-    });
+    themeService = getMockThemeService(themeName);
 
-    TestBed.configureTestingModule({
-      declarations: [BrowseBySwitcherComponent],
-      providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: ThemeService, useValue: themeService },
-        { provide: BROWSE_BY_COMPONENT_FACTORY, useValue: jasmine.createSpy('getComponentByBrowseByType').and.returnValue(null) },
+    void TestBed.configureTestingModule({
+      declarations: [
+        BrowseBySwitcherComponent,
+        DynamicComponentLoaderDirective,
+      ],
+      providers: [
+        BrowseByTestComponent,
+        { provide: ThemeService, useValue: themeService },
       ],
-      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(waitForAsync(() => {
     fixture = TestBed.createComponent(BrowseBySwitcherComponent);
     comp = fixture.componentInstance;
+    spyOn(comp, 'getComponent').and.returnValue(BrowseByTestComponent);
+    spyOn(comp, 'connectInputsAndOutputs').and.callThrough();
   }));
 
   types.forEach((type: NonHierarchicalBrowseDefinition) => {
     describe(`when switching to a browse-by page for "${type.id}"`, () => {
-      beforeEach(() => {
-        data.next(createDataWithBrowseDefinition(type));
+      beforeEach(async () => {
+        comp.browseByType = type.dataType;
+        comp.ngOnChanges({
+          browseByType: new SimpleChange(undefined, type.dataType, true),
+        });
         fixture.detectChanges();
+        await fixture.whenStable();
       });
 
-      it(`should call getComponentByBrowseByType with type "${type.dataType}"`, () => {
-        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.dataType, themeName);
+      it(`should call getComponent with type "${type.dataType}"`, () => {
+        expect(comp.getComponent).toHaveBeenCalled();
+        expect(comp.connectInputsAndOutputs).toHaveBeenCalled();
       });
     });
   });
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
index 84b8045b74..99b969417e 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
@@ -1,43 +1,38 @@
-import {
-  Component,
-  Inject,
-  OnInit,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { Component, Input } from '@angular/core';
+import { getComponentByBrowseByType } from './browse-by-decorator';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
-import { ThemeService } from '../../shared/theme-support/theme.service';
-import { BROWSE_BY_COMPONENT_FACTORY } from './browse-by-decorator';
+import { AbstractComponentLoaderComponent } from '../../shared/abstract-component-loader/abstract-component-loader.component';
+import { BrowseByDataType } from './browse-by-data-type';
+import { Context } from '../../core/shared/context.model';
 
 @Component({
   selector: 'ds-browse-by-switcher',
-  templateUrl: './browse-by-switcher.component.html',
+  templateUrl: '../../shared/abstract-component-loader/abstract-component-loader.component.html'
 })
-/**
- * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided
- */
-export class BrowseBySwitcherComponent implements OnInit {
+export class BrowseBySwitcherComponent extends AbstractComponentLoaderComponent {
 
-  /**
-   * Resolved browse-by component
-   */
-  browseByComponent: Observable;
+  @Input() context: Context;
 
-  public constructor(protected route: ActivatedRoute,
-                     protected themeService: ThemeService,
-                     @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor) {
-  }
+  @Input() browseByType: BrowseByDataType;
 
-  /**
-   * Fetch the correct browse-by component by using the relevant config from the route data
-   */
-  ngOnInit(): void {
-    this.browseByComponent = this.route.data.pipe(
-      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.getRenderType(), this.themeService.getThemeName())),
-    );
+  @Input() displayTitle: boolean;
+
+  @Input() scope: string;
+
+  protected inputNamesDependentForComponent: (keyof this & string)[] = [
+    'context',
+    'browseByType',
+  ];
+
+  protected inputNames: (keyof this & string)[] = [
+    'context',
+    'browseByType',
+    'displayTitle',
+    'scope',
+  ];
+
+  public getComponent(): GenericConstructor {
+    return getComponentByBrowseByType(this.browseByType, this.context, this.themeService.getThemeName());
   }
 
 }
diff --git a/src/app/browse-by/browse-by-switcher/dynamic-component-loader.directive.ts b/src/app/browse-by/browse-by-switcher/dynamic-component-loader.directive.ts
new file mode 100644
index 0000000000..8c77df1cdb
--- /dev/null
+++ b/src/app/browse-by/browse-by-switcher/dynamic-component-loader.directive.ts
@@ -0,0 +1,16 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+/**
+ * Directive used as a hook to know where to inject the dynamic loaded component
+ */
+@Directive({
+  selector: '[dsDynamicComponentLoader]'
+})
+export class DynamicComponentLoaderDirective {
+
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+  ) {
+  }
+
+}
diff --git a/src/app/browse-by/browse-by-switcher/themed-browse-by-switcher.component.ts b/src/app/browse-by/browse-by-switcher/themed-browse-by-switcher.component.ts
deleted file mode 100644
index fdd633b1c0..0000000000
--- a/src/app/browse-by/browse-by-switcher/themed-browse-by-switcher.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
-import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
-
-/**
- * Themed wrapper for BrowseBySwitcherComponent
- */
-@Component({
-  selector: 'ds-themed-browse-by-switcher',
-  styleUrls: [],
-  templateUrl: '../../shared/theme-support/themed.component.html',
-})
-export class ThemedBrowseBySwitcherComponent extends ThemedComponent {
-  protected getComponentName(): string {
-    return 'BrowseBySwitcherComponent';
-  }
-
-  protected importThemedComponent(themeName: string): Promise {
-    return import(`../../../themes/${themeName}/app/browse-by/browse-by-switcher/browse-by-switcher.component`);
-  }
-
-  protected importUnthemedComponent(): Promise {
-    return import(`./browse-by-switcher.component`);
-  }
-
-
-}
diff --git a/src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts b/src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts
deleted file mode 100644
index a08d1e47c8..0000000000
--- a/src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
-import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
-import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page.component';
-
-@Component({
-  selector: 'ds-themed-browse-by-taxonomy-page',
-  templateUrl: '../../shared/theme-support/themed.component.html',
-  styleUrls: [],
-})
-/**
- * Themed wrapper for BrowseByTaxonomyPageComponent
- */
-@rendersBrowseBy('hierarchy')
-export class ThemedBrowseByTaxonomyPageComponent extends ThemedComponent{
-
-  protected getComponentName(): string {
-    return 'BrowseByTaxonomyPageComponent';
-  }
-
-  protected importThemedComponent(themeName: string): Promise {
-    return import(`../../../themes/${themeName}/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component`);
-  }
-
-  protected importUnthemedComponent(): Promise {
-    return import(`./browse-by-taxonomy-page.component`);
-  }
-}
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
similarity index 70%
rename from src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
rename to src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
index c24ca93403..3dd9b6b25a 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
@@ -1,5 +1,11 @@
-

-  
{{ ('browse.taxonomy_' + vocabularyName + '.title') | translate }}

+

+  

+    {{ ('browse.title') | translate:{
+    field: 'browse.metadata.' + vocabularyName | translate,
+    startsWith: '',
+    value: '',
+  } }}
+  

   

     
     {{ 'browse.taxonomy.button' | translate }}
-

+

diff --git a/src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.html b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.html
rename to src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.scss
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.spec.ts b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
similarity index 66%
rename from src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.spec.ts
rename to src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
index 4d31b54e52..687dad9279 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
@@ -1,21 +1,18 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-} from '@angular/core/testing';
-import { ActivatedRoute } from '@angular/router';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowseByTaxonomyComponent } from './browse-by-taxonomy.component';
+import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 
 import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
-import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { ThemeService } from '../../shared/theme-support/theme.service';
 import { createDataWithBrowseDefinition } from '../browse-by-switcher/browse-by-switcher.component.spec';
-import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page.component';
 
-describe('BrowseByTaxonomyPageComponent', () => {
-  let component: BrowseByTaxonomyPageComponent;
-  let fixture: ComponentFixture;
+describe('BrowseByTaxonomyComponent', () => {
+  let component: BrowseByTaxonomyComponent;
+  let fixture: ComponentFixture;
   let themeService: ThemeService;
   let detail1: VocabularyEntryDetail;
   let detail2: VocabularyEntryDetail;
@@ -32,7 +29,9 @@ describe('BrowseByTaxonomyPageComponent', () => {
 
     await TestBed.configureTestingModule({
       imports: [ TranslateModule.forRoot() ],
-      declarations: [ BrowseByTaxonomyPageComponent ],
+      declarations: [
+        BrowseByTaxonomyComponent,
+      ],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: ThemeService, useValue: themeService },
@@ -43,8 +42,9 @@ describe('BrowseByTaxonomyPageComponent', () => {
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BrowseByTaxonomyPageComponent);
+    fixture = TestBed.createComponent(BrowseByTaxonomyComponent);
     component = fixture.componentInstance;
+    spyOn(component, 'updateQueryParams').and.callThrough();
     fixture.detectChanges();
     detail1 = new VocabularyEntryDetail();
     detail2 = new VocabularyEntryDetail();
@@ -64,6 +64,7 @@ describe('BrowseByTaxonomyPageComponent', () => {
     expect(component.selectedItems).toContain(detail1);
     expect(component.selectedItems.length).toBe(1);
     expect(component.filterValues).toEqual(['HUMANITIES and RELIGION,equals'] );
+    expect(component.updateQueryParams).toHaveBeenCalled();
   });
 
   it('should handle select event with multiple selected items', () => {
@@ -73,6 +74,7 @@ describe('BrowseByTaxonomyPageComponent', () => {
     expect(component.selectedItems).toContain(detail1, detail2);
     expect(component.selectedItems.length).toBe(2);
     expect(component.filterValues).toEqual(['HUMANITIES and RELIGION,equals', 'TECHNOLOGY,equals'] );
+    expect(component.updateQueryParams).toHaveBeenCalled();
   });
 
   it('should handle deselect event', () => {
@@ -85,6 +87,33 @@ describe('BrowseByTaxonomyPageComponent', () => {
     expect(component.selectedItems).toContain(detail2);
     expect(component.selectedItems.length).toBe(1);
     expect(component.filterValues).toEqual(['TECHNOLOGY,equals'] );
+    expect(component.updateQueryParams).toHaveBeenCalled();
+  });
+
+  describe('updateQueryParams', () => {
+    beforeEach(() => {
+      component.facetType = 'subject';
+      component.filterValues = ['HUMANITIES and RELIGION,equals', 'TECHNOLOGY,equals'];
+    });
+
+    it('should update the queryParams with the selected filterValues', () => {
+      component.updateQueryParams();
+
+      expect(component.queryParams).toEqual({
+        'f.subject': ['HUMANITIES and RELIGION,equals', 'TECHNOLOGY,equals'],
+      });
+    });
+
+    it('should include the scope if present', () => {
+      component.scope = '67f849f1-2499-4872-8c61-9e2b47d71068';
+
+      component.updateQueryParams();
+
+      expect(component.queryParams).toEqual({
+        'f.subject': ['HUMANITIES and RELIGION,equals', 'TECHNOLOGY,equals'],
+        'scope': '67f849f1-2499-4872-8c61-9e2b47d71068',
+      });
+    });
   });
 
   afterEach(() => {
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
similarity index 54%
rename from src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
rename to src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
index 167bd8dca7..5ee080d115 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
@@ -1,33 +1,48 @@
-import {
-  Component,
-  Inject,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import {
-  Observable,
-  Subscription,
-} from 'rxjs';
-import { map } from 'rxjs/operators';
-import { ThemeService } from 'src/app/shared/theme-support/theme.service';
-
-import { BrowseDefinition } from '../../core/shared/browse-definition.model';
-import { GenericConstructor } from '../../core/shared/generic-constructor';
-import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
-import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
+import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { VocabularyOptions } from '../../core/submission/vocabularies/models/vocabulary-options.model';
-import { BROWSE_BY_COMPONENT_FACTORY } from '../browse-by-switcher/browse-by-decorator';
+import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
+import { ActivatedRoute, Params } from '@angular/router';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { map } from 'rxjs/operators';
+import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
+import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
+import { Context } from '../../core/shared/context.model';
+import { hasValue } from '../../shared/empty.util';
 
 @Component({
-  selector: 'ds-browse-by-taxonomy-page',
-  templateUrl: './browse-by-taxonomy-page.component.html',
-  styleUrls: ['./browse-by-taxonomy-page.component.scss'],
+  selector: 'ds-browse-by-taxonomy',
+  templateUrl: './browse-by-taxonomy.component.html',
+  styleUrls: ['./browse-by-taxonomy.component.scss'],
 })
 /**
  * Component for browsing items by metadata in a hierarchical controlled vocabulary
  */
-export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
+@rendersBrowseBy(BrowseByDataType.Hierarchy)
+export class BrowseByTaxonomyComponent implements OnInit, OnChanges, OnDestroy {
+
+  /**
+   * The optional context
+   */
+  @Input() context: Context;
+
+  /**
+   * The {@link BrowseByDataType} of this Component
+   */
+  @Input() browseByType: BrowseByDataType;
+
+  /**
+   * The ID of the {@link Community} or {@link Collection} of the scope to display
+   */
+  @Input() scope: string;
+
+  /**
+   * Display the h1 title in the section
+   */
+  @Input() displayTitle = true;
+
+  scope$: BehaviorSubject = new BehaviorSubject(undefined);
 
   /**
    * The {@link VocabularyOptions} object
@@ -57,35 +72,41 @@ export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
   /**
    * The parameters used in the URL
    */
-  queryParams: any;
+  queryParams: Params;
 
   /**
-   * Resolved browse-by component
+   * Resolved browse-by definition
    */
-  browseByComponent: Observable;
+  browseDefinition$: Observable;
 
   /**
    * Subscriptions to track
    */
-  browseByComponentSubs: Subscription[] = [];
+  subs: Subscription[] = [];
 
-  public constructor( protected route: ActivatedRoute,
-                      protected themeService: ThemeService,
-                      @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor) {
+  public constructor(
+    protected route: ActivatedRoute,
+  ) {
   }
 
   ngOnInit(): void {
-    this.browseByComponent = this.route.data.pipe(
+    this.browseDefinition$ = this.route.data.pipe(
       map((data: { browseDefinition: BrowseDefinition }) => {
-        this.getComponentByBrowseByType(data.browseDefinition.getRenderType(), this.themeService.getThemeName());
         return data.browseDefinition;
       }),
     );
-    this.browseByComponentSubs.push(this.browseByComponent.subscribe((browseDefinition: HierarchicalBrowseDefinition) => {
+    this.subs.push(this.browseDefinition$.subscribe((browseDefinition: HierarchicalBrowseDefinition) => {
       this.facetType = browseDefinition.facetType;
       this.vocabularyName = browseDefinition.vocabulary;
       this.vocabularyOptions = { name: this.vocabularyName, closed: true };
     }));
+    this.subs.push(this.scope$.subscribe(() => {
+      this.updateQueryParams();
+    }));
+  }
+
+  ngOnChanges(): void {
+    this.scope$.next(this.scope);
   }
 
   /**
@@ -107,21 +128,28 @@ export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
    * @param detail VocabularyEntryDetail to be removed
    */
   onDeselect(detail: VocabularyEntryDetail): void {
-    this.selectedItems = this.selectedItems.filter((entry: VocabularyEntryDetail) => { return entry.id !== detail.id; });
-    this.filterValues = this.filterValues.filter((value: string) => { return value !== `${detail.value},equals`; });
+    this.selectedItems = this.selectedItems.filter((entry: VocabularyEntryDetail) => {
+      return entry.id !== detail.id;
+    });
+    this.filterValues = this.filterValues.filter((value: string) => {
+      return value !== `${detail.value},equals`;
+    });
     this.updateQueryParams();
   }
 
   /**
    * Updates queryParams based on the current facetType and filterValues.
    */
-  private updateQueryParams(): void {
+  updateQueryParams(): void {
     this.queryParams = {
       ['f.' + this.facetType]: this.filterValues,
     };
+    if (hasValue(this.scope)) {
+      this.queryParams.scope = this.scope;
+    }
   }
 
   ngOnDestroy(): void {
-    this.browseByComponentSubs.forEach((sub: Subscription) => sub.unsubscribe());
+    this.subs.forEach((sub: Subscription) => sub.unsubscribe());
   }
 }
diff --git a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
deleted file mode 100644
index 3304a9b1ff..0000000000
--- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import {
-  Component,
-  Inject,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Params,
-  Router,
-} from '@angular/router';
-import { combineLatest as observableCombineLatest } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import {
-  APP_CONFIG,
-  AppConfig,
-} from '../../../config/app-config.interface';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
-import { BrowseService } from '../../core/browse/browse.service';
-import {
-  SortDirection,
-  SortOptions,
-} from '../../core/cache/models/sort-options.model';
-import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { hasValue } from '../../shared/empty.util';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import {
-  BrowseByMetadataPageComponent,
-  browseParamsToOptions,
-  getBrowseSearchOptions,
-} from '../browse-by-metadata-page/browse-by-metadata-page.component';
-
-@Component({
-  selector: 'ds-browse-by-title-page',
-  styleUrls: ['../browse-by-metadata-page/browse-by-metadata-page.component.scss'],
-  templateUrl: '../browse-by-metadata-page/browse-by-metadata-page.component.html',
-})
-/**
- * Component for browsing items by title (dc.title)
- */
-export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
-
-  public constructor(protected route: ActivatedRoute,
-                     protected browseService: BrowseService,
-                     protected dsoService: DSpaceObjectDataService,
-                     protected paginationService: PaginationService,
-                     protected router: Router,
-                     @Inject(APP_CONFIG) public appConfig: AppConfig,
-                     public dsoNameService: DSONameService,
-  ) {
-    super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService);
-  }
-
-  ngOnInit(): void {
-    const sortConfig = new SortOptions('dc.title', SortDirection.ASC);
-    // include the thumbnail configuration in browse search options
-    this.updatePage(getBrowseSearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig, this.fetchThumbnails));
-    this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
-    this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
-    this.subs.push(
-      observableCombineLatest([this.route.params, this.route.queryParams, this.currentPagination$, this.currentSort$]).pipe(
-        map(([routeParams, queryParams, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams),currentPage,currentSort];
-        }),
-      ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
-        this.startsWith = +params.startsWith || params.startsWith;
-        this.browseId = params.id || this.defaultBrowseId;
-        this.updatePageWithItems(browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails), undefined, undefined);
-        this.updateParent(params.scope);
-        this.updateLogo();
-      }));
-    this.updateStartsWithTextOptions();
-  }
-
-  ngOnDestroy(): void {
-    this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
-  }
-
-}
diff --git a/src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts b/src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts
deleted file mode 100644
index 407e088b80..0000000000
--- a/src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
-import {
-  BrowseByDataType,
-  rendersBrowseBy,
-} from '../browse-by-switcher/browse-by-decorator';
-import { BrowseByTitlePageComponent } from './browse-by-title-page.component';
-
-/**
- * Themed wrapper for BrowseByTitlePageComponent
- */
-@Component({
-  selector: 'ds-themed-browse-by-title-page',
-  styleUrls: [],
-  templateUrl: '../../shared/theme-support/themed.component.html',
-})
-
-@rendersBrowseBy(BrowseByDataType.Title)
-export class ThemedBrowseByTitlePageComponent
-  extends ThemedComponent {
-  protected getComponentName(): string {
-    return 'BrowseByTitlePageComponent';
-  }
-
-  protected importThemedComponent(themeName: string): Promise {
-    return import(`../../../themes/${themeName}/app/browse-by/browse-by-title-page/browse-by-title-page.component`);
-  }
-
-  protected importUnthemedComponent(): Promise {
-    return import(`./browse-by-title-page.component`);
-  }
-}
diff --git a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts b/src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
similarity index 83%
rename from src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts
rename to src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
index ca94b86b7c..6e47668e1b 100644
--- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
@@ -1,14 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_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';
@@ -28,13 +21,12 @@ import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
 import { EnumKeysPipe } from '../../shared/utils/enum-keys-pipe';
 import { VarDirective } from '../../shared/utils/var.directive';
-import { toRemoteData } from '../browse-by-metadata-page/browse-by-metadata-page.component.spec';
-import { BrowseByTitlePageComponent } from './browse-by-title-page.component';
+import { BrowseByTitleComponent } from './browse-by-title.component';
+import { toRemoteData } from '../browse-by-metadata/browse-by-metadata.component.spec';
 
-
-describe('BrowseByTitlePageComponent', () => {
-  let comp: BrowseByTitlePageComponent;
-  let fixture: ComponentFixture;
+describe('BrowseByTitleComponent', () => {
+  let comp: BrowseByTitleComponent;
+  let fixture: ComponentFixture;
   let itemDataService: ItemDataService;
   let route: ActivatedRoute;
 
@@ -79,7 +71,7 @@ describe('BrowseByTitlePageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
-      declarations: [BrowseByTitlePageComponent, EnumKeysPipe, VarDirective],
+      declarations: [BrowseByTitleComponent, EnumKeysPipe, VarDirective],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: BrowseService, useValue: mockBrowseService },
@@ -93,7 +85,7 @@ describe('BrowseByTitlePageComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BrowseByTitlePageComponent);
+    fixture = TestBed.createComponent(BrowseByTitleComponent);
     comp = fixture.componentInstance;
     fixture.detectChanges();
     itemDataService = (comp as any).itemDataService;
diff --git a/src/app/browse-by/browse-by-title/browse-by-title.component.ts b/src/app/browse-by/browse-by-title/browse-by-title.component.ts
new file mode 100644
index 0000000000..e05ca46d33
--- /dev/null
+++ b/src/app/browse-by/browse-by-title/browse-by-title.component.ts
@@ -0,0 +1,41 @@
+import { combineLatest as observableCombineLatest } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { Params } from '@angular/router';
+import { BrowseByMetadataComponent, browseParamsToOptions, getBrowseSearchOptions } from '../browse-by-metadata/browse-by-metadata.component';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
+import { map } from 'rxjs/operators';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
+
+@Component({
+  selector: 'ds-browse-by-title',
+  styleUrls: ['../browse-by-metadata/browse-by-metadata.component.scss'],
+  templateUrl: '../browse-by-metadata/browse-by-metadata.component.html'
+})
+/**
+ * Component for browsing items by title (dc.title)
+ */
+@rendersBrowseBy(BrowseByDataType.Title)
+export class BrowseByTitleComponent extends BrowseByMetadataComponent implements OnInit {
+
+  ngOnInit(): void {
+    const sortConfig = new SortOptions('dc.title', SortDirection.ASC);
+    // include the thumbnail configuration in browse search options
+    this.updatePage(getBrowseSearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig, this.fetchThumbnails));
+    this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
+    this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
+    this.subs.push(
+      observableCombineLatest([this.route.params, this.route.queryParams, this.scope$, this.currentPagination$, this.currentSort$]).pipe(
+        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
+          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
+        })
+      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
+        this.startsWith = +params.startsWith || params.startsWith;
+        this.browseId = params.id || this.defaultBrowseId;
+        this.updatePageWithItems(browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, this.fetchThumbnails), undefined, undefined);
+      }));
+    this.updateStartsWithTextOptions();
+  }
+
+}
diff --git a/src/app/browse-by/browse-by.module.ts b/src/app/browse-by/browse-by.module.ts
index 46c89d2b6c..2d84cb6e2c 100644
--- a/src/app/browse-by/browse-by.module.ts
+++ b/src/app/browse-by/browse-by.module.ts
@@ -1,52 +1,43 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-
+import { BrowseByTitleComponent } from './browse-by-title/browse-by-title.component';
+import { BrowseByMetadataComponent } from './browse-by-metadata/browse-by-metadata.component';
+import { BrowseByDateComponent } from './browse-by-date/browse-by-date.component';
+import { BrowseBySwitcherComponent } from './browse-by-switcher/browse-by-switcher.component';
+import { BrowseByTaxonomyComponent } from './browse-by-taxonomy/browse-by-taxonomy.component';
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
-import { ComcolModule } from '../shared/comcol/comcol.module';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { FormModule } from '../shared/form/form.module';
 import { SharedModule } from '../shared/shared.module';
-import { BrowseByDatePageComponent } from './browse-by-date-page/browse-by-date-page.component';
-import { ThemedBrowseByDatePageComponent } from './browse-by-date-page/themed-browse-by-date-page.component';
-import { BrowseByMetadataPageComponent } from './browse-by-metadata-page/browse-by-metadata-page.component';
-import { ThemedBrowseByMetadataPageComponent } from './browse-by-metadata-page/themed-browse-by-metadata-page.component';
-import { BrowseBySwitcherComponent } from './browse-by-switcher/browse-by-switcher.component';
-import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-browse-by-switcher.component';
-import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/browse-by-taxonomy-page.component';
-import { ThemedBrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component';
-import { BrowseByTitlePageComponent } from './browse-by-title-page/browse-by-title-page.component';
-import { ThemedBrowseByTitlePageComponent } from './browse-by-title-page/themed-browse-by-title-page.component';
+
+const DECLARATIONS = [
+  BrowseBySwitcherComponent,
+];
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
-  BrowseByTitlePageComponent,
-  BrowseByMetadataPageComponent,
-  BrowseByDatePageComponent,
-  BrowseByTaxonomyPageComponent,
-
-  ThemedBrowseByMetadataPageComponent,
-  ThemedBrowseByDatePageComponent,
-  ThemedBrowseByTitlePageComponent,
-  ThemedBrowseByTaxonomyPageComponent,
+  BrowseByTitleComponent,
+  BrowseByMetadataComponent,
+  BrowseByDateComponent,
+  BrowseByTaxonomyComponent,
 ];
 
 @NgModule({
   imports: [
     SharedBrowseByModule,
     CommonModule,
-    ComcolModule,
     DsoPageModule,
     FormModule,
     SharedModule,
   ],
   declarations: [
-    BrowseBySwitcherComponent,
-    ThemedBrowseBySwitcherComponent,
-    ...ENTRY_COMPONENTS,
+    ...DECLARATIONS,
+    ...ENTRY_COMPONENTS
   ],
   exports: [
-    BrowseBySwitcherComponent,
-  ],
+    ...DECLARATIONS,
+    ...ENTRY_COMPONENTS,
+  ]
 })
 export class BrowseByModule {
   /**
diff --git a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html b/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
index 649aa9b43d..77f85d5f78 100644
--- a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
+++ b/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
@@ -6,7 +6,7 @@
       
{{'collection.edit.item-mapper.description' | translate}}

 
       
    
-        
  • 
+        
  • 
           {{'collection.edit.item-mapper.tabs.browse' | translate}}
           
             
    
@@ -23,7 +23,7 @@
             
    
               
         
    • 
-        
  • 
+        
  • 
           {{'collection.edit.item-mapper.tabs.map' | translate}}
           
             
    
diff --git a/src/app/collection-page/collection-page-routing.module.ts b/src/app/collection-page/collection-page-routing.module.ts
index f2d3c22950..72174b2b17 100644
--- a/src/app/collection-page/collection-page-routing.module.ts
+++ b/src/app/collection-page/collection-page-routing.module.ts
@@ -11,17 +11,17 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
 import { CollectionPageResolver } from './collection-page.resolver';
 import { CollectionPageAdministratorGuard } from './collection-page-administrator.guard';
-import {
-  COLLECTION_CREATE_PATH,
-  COLLECTION_EDIT_PATH,
-  ITEMTEMPLATE_PATH,
-} from './collection-page-routing-paths';
+import { COLLECTION_CREATE_PATH, COLLECTION_EDIT_PATH, ITEMTEMPLATE_PATH } from './collection-page-routing-paths';
 import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 import { CreateCollectionPageGuard } from './create-collection-page/create-collection-page.guard';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { ItemTemplatePageResolver } from './edit-item-template-page/item-template-page.resolver';
 import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { ThemedCollectionPageComponent } from './themed-collection-page.component';
+import { ComcolBrowseByComponent } from '../shared/comcol/sections/comcol-browse-by/comcol-browse-by.component';
+import { BrowseByGuard } from '../browse-by/browse-by-guard';
+import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
+import { ComcolSearchSectionComponent } from '../shared/comcol/sections/comcol-search-section/comcol-search-section.component';
 
 @NgModule({
   imports: [
@@ -65,8 +65,24 @@ import { ThemedCollectionPageComponent } from './themed-collection-page.componen
           {
             path: '',
             component: ThemedCollectionPageComponent,
-            pathMatch: 'full',
-          },
+            children: [
+              {
+                path: '',
+                pathMatch: 'full',
+                component: ComcolSearchSectionComponent,
+              },
+              {
+                path: 'browse/:id',
+                pathMatch: 'full',
+                component: ComcolBrowseByComponent,
+                canActivate: [BrowseByGuard],
+                resolve: {
+                  breadcrumb: BrowseByI18nBreadcrumbResolver,
+                },
+                data: { breadcrumbKey: 'browse.metadata' },
+              },
+            ],
+          }
         ],
         data: {
           menu: {
diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html
index 3cbd08f132..d5da37c12f 100644
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -1,78 +1,61 @@
 
    
-    
    
-              
    
-                      
    
-              
-              
    
-                
    
-                  
-                  
-                  
-                  
-                  
-                  
+  
    
+    
    
+      
    
+        
+        
    
+          
    
+            
+            
+            
+            
+            
+            
 
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                
    
-                
-              
    
-              
    
-              
-              
-              
+            
+            
+            
+            
+            
+            
+            
+            
+            
+          
    
+          
+        
    
+        
    
+          
+          
+          
 
-            
-                
    
-                    
    {{'collection.page.browse.recent.head' | translate}}
    
-                    
-                    
-                
    
-                
-                
-                
-                
-            
    
-            
    
+          
+        
+        
    
           
           
+              [content]="collection.copyrightText"
+              [hasInnerHtml]="true">
           
         
    
       
    
     
    
-        
-        
+    
+    
   
    
-
    
+
    
\ No newline at end of file
diff --git a/src/app/collection-page/collection-page.component.ts b/src/app/collection-page/collection-page.component.ts
index 97d5037d53..798f92412a 100644
--- a/src/app/collection-page/collection-page.component.ts
+++ b/src/app/collection-page/collection-page.component.ts
@@ -1,67 +1,21 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  OnInit,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
-import {
-  BehaviorSubject,
-  combineLatest as observableCombineLatest,
-  Observable,
-  Subject,
-} from 'rxjs';
-import {
-  filter,
-  map,
-  mergeMap,
-  startWith,
-  switchMap,
-  take,
-} from 'rxjs/operators';
-
-import {
-  APP_CONFIG,
-  AppConfig,
-} from '../../../src/config/app-config.interface';
-import { AuthService } from '../core/auth/auth.service';
-import { DSONameService } from '../core/breadcrumbs/dso-name.service';
-import { BROWSE_LINKS_TO_FOLLOW } from '../core/browse/browse.service';
-import {
-  SortDirection,
-  SortOptions,
-} from '../core/cache/models/sort-options.model';
-import { CollectionDataService } from '../core/data/collection-data.service';
-import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../core/data/feature-authorization/feature-id';
-import { PaginatedList } from '../core/data/paginated-list.model';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { filter, map, mergeMap, take } from 'rxjs/operators';
+import { SortOptions } from '../core/cache/models/sort-options.model';
 import { RemoteData } from '../core/data/remote-data';
-import { PaginationService } from '../core/pagination/pagination.service';
 import { redirectOn4xx } from '../core/shared/authorized.operators';
 import { Bitstream } from '../core/shared/bitstream.model';
 import { Collection } from '../core/shared/collection.model';
-import { DSpaceObjectType } from '../core/shared/dspace-object-type.model';
-import { Item } from '../core/shared/item.model';
-import {
-  getAllSucceededRemoteDataPayload,
-  getFirstSucceededRemoteData,
-  toDSpaceObjectListRD,
-} from '../core/shared/operators';
-import { SearchService } from '../core/shared/search/search.service';
-import {
-  fadeIn,
-  fadeInOut,
-} from '../shared/animations/fade';
-import {
-  hasValue,
-  isNotEmpty,
-} from '../shared/empty.util';
+import { getAllSucceededRemoteDataPayload } from '../core/shared/operators';
+import { fadeIn, fadeInOut } from '../shared/animations/fade';
+import { hasValue, isNotEmpty } from '../shared/empty.util';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { PaginatedSearchOptions } from '../shared/search/models/paginated-search-options.model';
+import { AuthService } from '../core/auth/auth.service';
+import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCollectionPageRoute } from './collection-page-routing-paths';
+import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-collection-page',
@@ -75,14 +29,9 @@ import { getCollectionPageRoute } from './collection-page-routing-paths';
 })
 export class CollectionPageComponent implements OnInit {
   collectionRD$: Observable>;
-  itemRD$: Observable>>;
   logoRD$: Observable>;
   paginationConfig: PaginationComponentOptions;
   sortConfig: SortOptions;
-  private paginationChanges$: Subject<{
-    paginationConfig: PaginationComponentOptions,
-    sortConfig: SortOptions
-  }>;
 
   /**
    * Whether the current user is a Community admin
@@ -95,23 +44,12 @@ export class CollectionPageComponent implements OnInit {
   collectionPageRoute$: Observable;
 
   constructor(
-    private collectionDataService: CollectionDataService,
-    private searchService: SearchService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private authService: AuthService,
-    private paginationService: PaginationService,
-    private authorizationDataService: AuthorizationDataService,
+    protected route: ActivatedRoute,
+    protected router: Router,
+    protected authService: AuthService,
+    protected authorizationDataService: AuthorizationDataService,
     public dsoNameService: DSONameService,
-    @Inject(APP_CONFIG) public appConfig: AppConfig,
   ) {
-    this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
-      id: 'cp',
-      currentPage: 1,
-      pageSize: this.appConfig.browseBy.pageSize,
-    });
-
-    this.sortConfig = new SortOptions('dc.date.accessioned', SortDirection.DESC);
   }
 
   ngOnInit(): void {
@@ -127,33 +65,6 @@ export class CollectionPageComponent implements OnInit {
     );
     this.isCollectionAdmin$ = this.authorizationDataService.isAuthorized(FeatureID.IsCollectionAdmin);
 
-    this.paginationChanges$ = new BehaviorSubject({
-      paginationConfig: this.paginationConfig,
-      sortConfig: this.sortConfig,
-    });
-
-    const currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
-    const currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, this.sortConfig);
-
-    this.itemRD$ = observableCombineLatest([currentPagination$, currentSort$]).pipe(
-      switchMap(([currentPagination, currentSort]) => this.collectionRD$.pipe(
-        getFirstSucceededRemoteData(),
-        map((rd) => rd.payload.id),
-        switchMap((id: string) => {
-          return this.searchService.search(
-            new PaginatedSearchOptions({
-              scope: id,
-              pagination: currentPagination,
-              sort: currentSort,
-              dsoTypes: [DSpaceObjectType.ITEM],
-            }), null, true, true, ...BROWSE_LINKS_TO_FOLLOW)
-            .pipe(toDSpaceObjectListRD()) as Observable>>;
-        }),
-        startWith(undefined), // Make sure switching pages shows loading component
-      ),
-      ),
-    );
-
     this.collectionPageRoute$ = this.collectionRD$.pipe(
       getAllSucceededRemoteDataPayload(),
       map((collection) => getCollectionPageRoute(collection.id)),
@@ -164,9 +75,5 @@ export class CollectionPageComponent implements OnInit {
     return isNotEmpty(object);
   }
 
-  ngOnDestroy(): void {
-    this.paginationService.clearPagination(this.paginationConfig.id);
-  }
-
 
 }
diff --git a/src/app/collection-page/collection-page.module.ts b/src/app/collection-page/collection-page.module.ts
index 0a4e415292..7071b842da 100644
--- a/src/app/collection-page/collection-page.module.ts
+++ b/src/app/collection-page/collection-page.module.ts
@@ -17,6 +17,17 @@ import { DeleteCollectionPageComponent } from './delete-collection-page/delete-c
 import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
 import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { ThemedCollectionPageComponent } from './themed-collection-page.component';
+import { BrowseByPageModule } from '../browse-by/browse-by-page.module';
+
+const DECLARATIONS = [
+  CollectionPageComponent,
+  ThemedCollectionPageComponent,
+  CreateCollectionPageComponent,
+  DeleteCollectionPageComponent,
+  EditItemTemplatePageComponent,
+  ThemedEditItemTemplatePageComponent,
+  CollectionItemMapperComponent,
+];
 
 @NgModule({
   imports: [
@@ -29,15 +40,10 @@ import { ThemedCollectionPageComponent } from './themed-collection-page.componen
     ComcolModule,
     DsoSharedModule,
     DsoPageModule,
+    BrowseByPageModule,
   ],
   declarations: [
-    CollectionPageComponent,
-    ThemedCollectionPageComponent,
-    CreateCollectionPageComponent,
-    DeleteCollectionPageComponent,
-    EditItemTemplatePageComponent,
-    ThemedEditItemTemplatePageComponent,
-    CollectionItemMapperComponent,
+    ...DECLARATIONS,
   ],
   providers: [
     SearchService,
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 51171b97f0..748e29a251 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,17 +1,44 @@
-import {
-  ComponentFixture,
-  TestBed,
-} from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CollectionAccessControlComponent } from './collection-access-control.component';
+import { ActivatedRoute } from '@angular/router';
+import { of, of as observableOf } from 'rxjs';
+import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
+import { Community } from '../../../core/shared/community.model';
 
-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 ],
+      providers: [{ provide: ActivatedRoute, useValue: routeStub }],
     })
       .compileComponents();
   });
@@ -20,9 +47,17 @@ xdescribe('CollectionAccessControlComponent', () => {
     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-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-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 7bb4ce22ad..98ae8e10ef 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}}
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts
index caac59ac2f..44b5014693 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts
@@ -1,10 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
@@ -93,7 +89,7 @@ describe('CollectionSourceControlsComponent', () => {
       invoke: createSuccessfulRemoteDataObject$(process),
     });
     processDataService = jasmine.createSpyObj('processDataService', {
-      findById: createSuccessfulRemoteDataObject$(process),
+      autoRefreshUntilCompletion: createSuccessfulRemoteDataObject$(process),
     });
     bitstreamService = jasmine.createSpyObj('bitstreamService', {
       findByHref: createSuccessfulRemoteDataObject$(bitstream),
@@ -142,7 +138,7 @@ describe('CollectionSourceControlsComponent', () => {
         { name: '-i', value: new ContentSourceSetSerializer().Serialize(contentSource.oaiSetId) },
       ], []);
 
-      expect(processDataService.findById).toHaveBeenCalledWith(process.processId, false);
+      expect(processDataService.autoRefreshUntilCompletion).toHaveBeenCalledWith(process.processId);
       expect(bitstreamService.findByHref).toHaveBeenCalledWith(process._links.output.href);
       expect(notificationsService.info).toHaveBeenCalledWith(jasmine.anything() as any, 'Script text');
     });
@@ -156,7 +152,7 @@ describe('CollectionSourceControlsComponent', () => {
         { name: '-r', value: null },
         { name: '-c', value: collection.uuid },
       ], []);
-      expect(processDataService.findById).toHaveBeenCalledWith(process.processId, false);
+      expect(processDataService.autoRefreshUntilCompletion).toHaveBeenCalledWith(process.processId);
       expect(notificationsService.success).toHaveBeenCalled();
     });
   });
@@ -169,7 +165,7 @@ describe('CollectionSourceControlsComponent', () => {
         { name: '-o', value: null },
         { name: '-c', value: collection.uuid },
       ], []);
-      expect(processDataService.findById).toHaveBeenCalledWith(process.processId, false);
+      expect(processDataService.autoRefreshUntilCompletion).toHaveBeenCalledWith(process.processId);
       expect(notificationsService.success).toHaveBeenCalled();
     });
   });
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts
index b7cc7549c1..67243c7bed 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts
@@ -1,43 +1,22 @@
-import { HttpClient } from '@angular/common/http';
-import {
-  Component,
-  Input,
-  OnDestroy,
-} from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import {
-  BehaviorSubject,
-  Observable,
-  Subscription,
-} from 'rxjs';
-import {
-  filter,
-  map,
-  switchMap,
-  tap,
-} from 'rxjs/operators';
-
-import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
-import { CollectionDataService } from '../../../../core/data/collection-data.service';
-import { ProcessDataService } from '../../../../core/data/processes/process-data.service';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ScriptDataService } from '../../../../core/data/processes/script-data.service';
 import { RequestService } from '../../../../core/data/request.service';
 import { Collection } from '../../../../core/shared/collection.model';
 import { ContentSource } from '../../../../core/shared/content-source.model';
 import { ContentSourceSetSerializer } from '../../../../core/shared/content-source-set-serializer';
-import {
-  getAllCompletedRemoteData,
-  getAllSucceededRemoteDataPayload,
-  getFirstCompletedRemoteData,
-  getFirstSucceededRemoteDataPayload,
-} from '../../../../core/shared/operators';
+import { getAllSucceededRemoteDataPayload, getFirstCompletedRemoteData, getFirstSucceededRemoteDataPayload } from '../../../../core/shared/operators';
+import { filter, map, switchMap, tap } from 'rxjs/operators';
+import { hasValue } from '../../../../shared/empty.util';
 import { Process } from '../../../../process-page/processes/process.model';
 import { ProcessStatus } from '../../../../process-page/processes/process-status.model';
-import {
-  hasValue,
-  hasValueOperator,
-} from '../../../../shared/empty.util';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+
+import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
+import { CollectionDataService } from '../../../../core/data/collection-data.service';
+import { ProcessDataService } from '../../../../core/data/processes/process-data.service';
 
 /**
  * Component that contains the controls to run, reset and test the harvest
@@ -47,7 +26,7 @@ import { NotificationsService } from '../../../../shared/notifications/notificat
   styleUrls: ['./collection-source-controls.component.scss'],
   templateUrl: './collection-source-controls.component.html',
 })
-export class CollectionSourceControlsComponent implements OnDestroy {
+export class CollectionSourceControlsComponent implements OnInit, OnDestroy {
 
   /**
    * Should the controls be enabled.
@@ -66,6 +45,7 @@ export class CollectionSourceControlsComponent implements OnDestroy {
 
   contentSource$: Observable;
   private subs: Subscription[] = [];
+  private autoRefreshIDs: string[] = [];
 
   testConfigRunning$ = new BehaviorSubject(false);
   importRunning$ = new BehaviorSubject(false);
@@ -112,19 +92,12 @@ export class CollectionSourceControlsComponent implements OnDestroy {
       }),
       // filter out responses that aren't successful since the pinging of the process only needs to happen when the invocation was successful.
       filter((rd) => rd.hasSucceeded && hasValue(rd.payload)),
-      switchMap((rd) => this.processDataService.findById(rd.payload.processId, false)),
-      getAllCompletedRemoteData(),
-      filter((rd) => !rd.isStale && (rd.hasSucceeded || rd.hasFailed)),
-      map((rd) => rd.payload),
-      hasValueOperator(),
+      switchMap((rd) => {
+        this.autoRefreshIDs.push(rd.payload.processId);
+        return this.processDataService.autoRefreshUntilCompletion(rd.payload.processId);
+      }),
+      map((rd) => rd.payload)
     ).subscribe((process: Process) => {
-      if (process.processStatus.toString() !== ProcessStatus[ProcessStatus.COMPLETED].toString() &&
-          process.processStatus.toString() !== ProcessStatus[ProcessStatus.FAILED].toString()) {
-        // Ping the current process state every 5s
-        setTimeout(() => {
-          this.requestService.setStaleByHrefSubstring(process._links.self.href);
-        }, 5000);
-      }
       if (process.processStatus.toString() === ProcessStatus[ProcessStatus.FAILED].toString()) {
         this.notificationsService.error(this.translateService.get('collection.source.controls.test.failed'));
         this.testConfigRunning$.next(false);
@@ -140,8 +113,7 @@ export class CollectionSourceControlsComponent implements OnDestroy {
         });
         this.testConfigRunning$.next(false);
       }
-    },
-    ));
+    }));
   }
 
   /**
@@ -164,20 +136,12 @@ export class CollectionSourceControlsComponent implements OnDestroy {
           }
         }),
         filter((rd) => rd.hasSucceeded && hasValue(rd.payload)),
-        switchMap((rd) => this.processDataService.findById(rd.payload.processId, false)),
-        getAllCompletedRemoteData(),
-        filter((rd) => !rd.isStale && (rd.hasSucceeded || rd.hasFailed)),
-        map((rd) => rd.payload),
-        hasValueOperator(),
+        switchMap((rd) => {
+          this.autoRefreshIDs.push(rd.payload.processId);
+          return this.processDataService.autoRefreshUntilCompletion(rd.payload.processId);
+        }),
+        map((rd) => rd.payload)
       ).subscribe((process) => {
-        if (process.processStatus.toString() !== ProcessStatus[ProcessStatus.COMPLETED].toString() &&
-            process.processStatus.toString() !== ProcessStatus[ProcessStatus.FAILED].toString()) {
-          // Ping the current process state every 5s
-          setTimeout(() => {
-            this.requestService.setStaleByHrefSubstring(process._links.self.href);
-            this.requestService.setStaleByHrefSubstring(this.collection._links.self.href);
-          }, 5000);
-        }
         if (process.processStatus.toString() === ProcessStatus[ProcessStatus.FAILED].toString()) {
           this.notificationsService.error(this.translateService.get('collection.source.controls.import.failed'));
           this.importRunning$.next(false);
@@ -187,8 +151,7 @@ export class CollectionSourceControlsComponent implements OnDestroy {
           this.requestService.setStaleByHrefSubstring(this.collection._links.self.href);
           this.importRunning$.next(false);
         }
-      },
-      ));
+      }));
   }
 
   /**
@@ -211,20 +174,12 @@ export class CollectionSourceControlsComponent implements OnDestroy {
           }
         }),
         filter((rd) => rd.hasSucceeded && hasValue(rd.payload)),
-        switchMap((rd) => this.processDataService.findById(rd.payload.processId, false)),
-        getAllCompletedRemoteData(),
-        filter((rd) => !rd.isStale && (rd.hasSucceeded || rd.hasFailed)),
-        map((rd) => rd.payload),
-        hasValueOperator(),
+        switchMap((rd) => {
+          this.autoRefreshIDs.push(rd.payload.processId);
+          return this.processDataService.autoRefreshUntilCompletion(rd.payload.processId);
+        }),
+        map((rd) => rd.payload)
       ).subscribe((process) => {
-        if (process.processStatus.toString() !== ProcessStatus[ProcessStatus.COMPLETED].toString() &&
-            process.processStatus.toString() !== ProcessStatus[ProcessStatus.FAILED].toString()) {
-          // Ping the current process state every 5s
-          setTimeout(() => {
-            this.requestService.setStaleByHrefSubstring(process._links.self.href);
-            this.requestService.setStaleByHrefSubstring(this.collection._links.self.href);
-          }, 5000);
-        }
         if (process.processStatus.toString() === ProcessStatus[ProcessStatus.FAILED].toString()) {
           this.notificationsService.error(this.translateService.get('collection.source.controls.reset.failed'));
           this.reImportRunning$.next(false);
@@ -234,8 +189,7 @@ export class CollectionSourceControlsComponent implements OnDestroy {
           this.requestService.setStaleByHrefSubstring(this.collection._links.self.href);
           this.reImportRunning$.next(false);
         }
-      },
-      ));
+      }));
   }
 
   ngOnDestroy(): void {
@@ -244,5 +198,9 @@ export class CollectionSourceControlsComponent implements OnDestroy {
         sub.unsubscribe();
       }
     });
+
+    this.autoRefreshIDs.forEach((id) => {
+      this.processDataService.stopAutoRefreshing(id);
+    });
   }
 }
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
index 2845277ebc..3a06a310e9 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -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 }}
    
 
    
 
    
     
     
    
-      
+      
       
    
         
+      
+      
       
    
         
-          
-            {{ 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 31026c3dac..67e961243e 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,20 +1,8 @@
 import { CdkTreeModule } from '@angular/cdk/tree';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  fakeAsync,
-  inject,
-  TestBed,
-  tick,
-  waitForAsync,
-} from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { RouterLinkWithHref } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
 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';
 
@@ -22,19 +10,14 @@ 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 { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import {
-  CommunityListService,
-  showMoreFlatNode,
-  toFlatNode,
-} from '../community-list-service';
+import { CommunityListService, showMoreFlatNode, toFlatNode } from '../community-list-service';
 import { FlatNode } from '../flat-node.model';
 import { CommunityListComponent } from './community-list.component';
+import { ComponentFixture, fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterLinkWithHref } from '@angular/router';
 
 describe('CommunityListComponent', () => {
   let component: CommunityListComponent;
@@ -317,12 +300,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();
         }
@@ -332,17 +317,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 09aa62bb81..05b0f8902b 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,16 +1,9 @@
 import { FlatTreeControl } from '@angular/cdk/tree';
-import {
-  Component,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
+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 { 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';
@@ -27,6 +20,7 @@ import { FlatNode } from '../flat-node.model';
 @Component({
   selector: 'ds-community-list',
   templateUrl: './community-list.component.html',
+  styleUrls: ['./community-list.component.scss'],
 })
 export class CommunityListComponent implements OnInit, OnDestroy {
 
diff --git a/src/app/community-page/community-page-routing.module.ts b/src/app/community-page/community-page-routing.module.ts
index f5c1e10a6b..36283af9ba 100644
--- a/src/app/community-page/community-page-routing.module.ts
+++ b/src/app/community-page/community-page-routing.module.ts
@@ -10,14 +10,17 @@ 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 { 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 { ThemedCommunityPageComponent } from './themed-community-page.component';
+import { ComcolSearchSectionComponent } from '../shared/comcol/sections/comcol-search-section/comcol-search-section.component';
+import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { ComcolBrowseByComponent } from '../shared/comcol/sections/comcol-browse-by/comcol-browse-by.component';
+import { BrowseByGuard } from '../browse-by/browse-by-guard';
+import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
 
 @NgModule({
   imports: [
@@ -51,7 +54,32 @@ import { ThemedCommunityPageComponent } from './themed-community-page.component'
           {
             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: {
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 @@
         
         
 
-        
-        
+        
       
-      
    
+      
    
         
         
         
diff --git a/src/app/community-page/community-page.component.ts b/src/app/community-page/community-page.component.ts
index 6c21f55e54..f59d1eb183 100644
--- a/src/app/community-page/community-page.component.ts
+++ b/src/app/community-page/community-page.component.ts
@@ -1,33 +1,19 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnInit,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs';
-import {
-  filter,
-  map,
-  mergeMap,
-} from 'rxjs/operators';
-
-import { AuthService } from '../core/auth/auth.service';
-import { DSONameService } from '../core/breadcrumbs/dso-name.service';
-import { CommunityDataService } from '../core/data/community-data.service';
-import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { RemoteData } from '../core/data/remote-data';
-import { MetadataService } from '../core/metadata/metadata.service';
 import { redirectOn4xx } from '../core/shared/authorized.operators';
 import { Bitstream } from '../core/shared/bitstream.model';
 import { Community } from '../core/shared/community.model';
-import { getAllSucceededRemoteDataPayload } from '../core/shared/operators';
 import { fadeInOut } from '../shared/animations/fade';
 import { hasValue } from '../shared/empty.util';
+import { getAllSucceededRemoteDataPayload } from '../core/shared/operators';
+import { AuthService } from '../core/auth/auth.service';
+import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCommunityPageRoute } from './community-page-routing-paths';
+import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-community-page',
@@ -61,8 +47,6 @@ export class CommunityPageComponent implements OnInit {
   communityPageRoute$: Observable;
 
   constructor(
-    private communityDataService: CommunityDataService,
-    private metadata: MetadataService,
     private route: ActivatedRoute,
     private router: Router,
     private authService: AuthService,
diff --git a/src/app/community-page/community-page.module.ts b/src/app/community-page/community-page.module.ts
index 8e3d93fe1e..49dd3aa335 100644
--- a/src/app/community-page/community-page.module.ts
+++ b/src/app/community-page/community-page.module.ts
@@ -10,20 +10,25 @@ import { CommunityPageComponent } from './community-page.component';
 import { CommunityPageRoutingModule } from './community-page-routing.module';
 import { CreateCommunityPageComponent } from './create-community-page/create-community-page.component';
 import { DeleteCommunityPageComponent } from './delete-community-page/delete-community-page.component';
-import { CommunityPageSubCollectionListComponent } from './sub-collection-list/community-page-sub-collection-list.component';
-import { ThemedCollectionPageSubCollectionListComponent } from './sub-collection-list/themed-community-page-sub-collection-list.component';
-import { CommunityPageSubCommunityListComponent } from './sub-community-list/community-page-sub-community-list.component';
-import { ThemedCommunityPageSubCommunityListComponent } from './sub-community-list/themed-community-page-sub-community-list.component';
 import { ThemedCommunityPageComponent } from './themed-community-page.component';
+import { ThemedCommunityPageSubCommunityListComponent } from './sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component';
+import { ThemedCollectionPageSubCollectionListComponent } from './sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component';
+import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
+import { BrowseByPageModule } from '../browse-by/browse-by-page.module';
+import { CommunityPageSubCollectionListComponent } from './sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component';
+import { CommunityPageSubCommunityListComponent } from './sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component';
 
-const DECLARATIONS = [CommunityPageComponent,
+const DECLARATIONS = [
+  CommunityPageComponent,
   ThemedCommunityPageComponent,
   ThemedCommunityPageSubCommunityListComponent,
   CommunityPageSubCollectionListComponent,
   ThemedCollectionPageSubCollectionListComponent,
   CommunityPageSubCommunityListComponent,
   CreateCommunityPageComponent,
-  DeleteCommunityPageComponent];
+  DeleteCommunityPageComponent,
+  SubComColSectionComponent,
+];
 
 @NgModule({
   imports: [
@@ -34,6 +39,7 @@ const DECLARATIONS = [CommunityPageComponent,
     CommunityFormModule,
     ComcolModule,
     DsoPageModule,
+    BrowseByPageModule,
   ],
   declarations: [
     ...DECLARATIONS,
diff --git a/src/app/community-page/delete-community-page/delete-community-page.component.html b/src/app/community-page/delete-community-page/delete-community-page.component.html
index 1da216777d..6a9021e805 100644
--- a/src/app/community-page/delete-community-page/delete-community-page.component.html
+++ b/src/app/community-page/delete-community-page/delete-community-page.component.html
@@ -7,11 +7,11 @@
                 
    
                     
    
                         
                         
                     
    
                 
    
diff --git a/src/app/community-page/edit-community-page/community-access-control/community-access-control.component.spec.ts b/src/app/community-page/edit-community-page/community-access-control/community-access-control.component.spec.ts
index 376162fba7..bec709e89a 100644
--- a/src/app/community-page/edit-community-page/community-access-control/community-access-control.component.spec.ts
+++ b/src/app/community-page/edit-community-page/community-access-control/community-access-control.component.spec.ts
@@ -1,28 +1,66 @@
-import {
-  ComponentFixture,
-  TestBed,
-} from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CommunityAccessControlComponent } from './community-access-control.component';
+import { Community } from '../../../core/shared/community.model';
+import { of, of as observableOf } from 'rxjs';
+import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
 
-xdescribe('CommunityAccessControlComponent', () => {
+import { ActivatedRoute } from '@angular/router';
+
+describe('CommunityAccessControlComponent', () => {
   let component: CommunityAccessControlComponent;
   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: [ CommunityAccessControlComponent ],
+      providers: [{ provide: ActivatedRoute, useValue: routeStub }],
     })
       .compileComponents();
   });
 
+
   beforeEach(() => {
     fixture = TestBed.createComponent(CommunityAccessControlComponent);
     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/community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
similarity index 90%
rename from src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html
rename to src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
index 69f16ee3ac..b5fbf1a01d 100644
--- a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
@@ -1,6 +1,6 @@
 
   
    
-    
    {{'community.sub-collection-list.head' | translate}}
    
+    
    {{'community.sub-collection-list.head' | translate}}
    
      {
+describe('CommunityPageSubCollectionListComponent', () => {
   let comp: CommunityPageSubCollectionListComponent;
   let fixture: ComponentFixture;
   let collectionDataServiceStub: any;
@@ -180,19 +176,19 @@ describe('CommunityPageSubCollectionList Component', () => {
   });
 
 
-  it('should display a list of collections', () => {
-    waitForAsync(() => {
-      subCollList = collections;
-      fixture.detectChanges();
+  it('should display a list of collections', async () => {
+    subCollList = collections;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
 
-      const collList = fixture.debugElement.queryAll(By.css('li'));
-      expect(collList.length).toEqual(5);
-      expect(collList[0].nativeElement.textContent).toContain('Collection 1');
-      expect(collList[1].nativeElement.textContent).toContain('Collection 2');
-      expect(collList[2].nativeElement.textContent).toContain('Collection 3');
-      expect(collList[3].nativeElement.textContent).toContain('Collection 4');
-      expect(collList[4].nativeElement.textContent).toContain('Collection 5');
-    });
+    const collList: DebugElement[] = fixture.debugElement.queryAll(By.css('ul[data-test="objects"] li'));
+    expect(collList.length).toEqual(5);
+    expect(collList[0].nativeElement.textContent).toContain('Collection 1');
+    expect(collList[1].nativeElement.textContent).toContain('Collection 2');
+    expect(collList[2].nativeElement.textContent).toContain('Collection 3');
+    expect(collList[3].nativeElement.textContent).toContain('Collection 4');
+    expect(collList[4].nativeElement.textContent).toContain('Collection 5');
   });
 
   it('should not display the header when list of collections is empty', () => {
diff --git a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
similarity index 74%
rename from src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
index 1d32c022dc..421707d700 100644
--- a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
@@ -1,30 +1,17 @@
-import {
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import {
-  BehaviorSubject,
-  combineLatest as observableCombineLatest,
-  Subscription,
-} from 'rxjs';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Subscription } from 'rxjs';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { Collection } from '../../../../core/shared/collection.model';
+import { Community } from '../../../../core/shared/community.model';
+import { fadeIn } from '../../../../shared/animations/fade';
+import { PaginatedList } from '../../../../core/data/paginated-list.model';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
+import { SortDirection, SortOptions } from '../../../../core/cache/models/sort-options.model';
+import { CollectionDataService } from '../../../../core/data/collection-data.service';
+import { PaginationService } from '../../../../core/pagination/pagination.service';
 import { switchMap } from 'rxjs/operators';
-
-import {
-  SortDirection,
-  SortOptions,
-} from '../../core/cache/models/sort-options.model';
-import { CollectionDataService } from '../../core/data/collection-data.service';
-import { PaginatedList } from '../../core/data/paginated-list.model';
-import { RemoteData } from '../../core/data/remote-data';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { Collection } from '../../core/shared/collection.model';
-import { Community } from '../../core/shared/community.model';
-import { fadeIn } from '../../shared/animations/fade';
-import { hasValue } from '../../shared/empty.util';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { hasValue } from '../../../../shared/empty.util';
 
 @Component({
   selector: 'ds-community-page-sub-collection-list',
diff --git a/src/app/community-page/sub-collection-list/themed-community-page-sub-collection-list.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component.ts
similarity index 64%
rename from src/app/community-page/sub-collection-list/themed-community-page-sub-collection-list.component.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component.ts
index a30b03ef7a..ebbec33e8e 100644
--- a/src/app/community-page/sub-collection-list/themed-community-page-sub-collection-list.component.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component.ts
@@ -1,16 +1,12 @@
-import {
-  Component,
-  Input,
-} from '@angular/core';
-
-import { Community } from '../../core/shared/community.model';
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ThemedComponent } from '../../../../shared/theme-support/themed.component';
 import { CommunityPageSubCollectionListComponent } from './community-page-sub-collection-list.component';
+import { Component, Input } from '@angular/core';
+import { Community } from '../../../../core/shared/community.model';
 
 @Component({
   selector: 'ds-themed-community-page-sub-collection-list',
   styleUrls: [],
-  templateUrl: '../../shared/theme-support/themed.component.html',
+  templateUrl: '../../../../shared/theme-support/themed.component.html',
 })
 export class ThemedCollectionPageSubCollectionListComponent extends ThemedComponent {
   @Input() community: Community;
@@ -22,7 +18,7 @@ export class ThemedCollectionPageSubCollectionListComponent extends ThemedCompon
   }
 
   protected importThemedComponent(themeName: string): Promise {
-    return import(`../../../themes/${themeName}/app/community-page/sub-collection-list/community-page-sub-collection-list.component`);
+    return import(`../../../../../themes/${themeName}/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component`);
   }
 
   protected importUnthemedComponent(): Promise {
diff --git a/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.html b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.html
new file mode 100644
index 0000000000..515e08ffdf
--- /dev/null
+++ b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.html
@@ -0,0 +1,8 @@
+
+  
+  
+  
+  
+
diff --git a/src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.scss b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.scss
rename to src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.scss
diff --git a/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.spec.ts b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.spec.ts
new file mode 100644
index 0000000000..cb3c41aa97
--- /dev/null
+++ b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.spec.ts
@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SubComColSectionComponent } from './sub-com-col-section.component';
+import { ActivatedRoute } from '@angular/router';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
+
+describe('SubComColSectionComponent', () => {
+  let component: SubComColSectionComponent;
+  let fixture: ComponentFixture;
+
+  let activatedRoute: ActivatedRouteStub;
+
+  beforeEach(async () => {
+    activatedRoute = new ActivatedRouteStub();
+    activatedRoute.parent = new ActivatedRouteStub();
+
+    await TestBed.configureTestingModule({
+      declarations: [
+        SubComColSectionComponent,
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SubComColSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.ts
new file mode 100644
index 0000000000..a72674adec
--- /dev/null
+++ b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { RemoteData } from '../../../core/data/remote-data';
+import { Community } from '../../../core/shared/community.model';
+import { ActivatedRoute, Data } from '@angular/router';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'ds-sub-com-col-section',
+  templateUrl: './sub-com-col-section.component.html',
+  styleUrls: ['./sub-com-col-section.component.scss'],
+})
+export class SubComColSectionComponent implements OnInit {
+
+  community$: Observable;
+
+  constructor(
+    private route: ActivatedRoute,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.community$ = this.route.parent.data.pipe(
+      map((data: Data) => (data.dso as RemoteData).payload),
+    );
+  }
+
+}
diff --git a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.html b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
similarity index 90%
rename from src/app/community-page/sub-community-list/community-page-sub-community-list.component.html
rename to src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
index be2788a9f4..0834d08ba5 100644
--- a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.html
+++ b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
@@ -1,6 +1,6 @@
 
   
    
-    
    {{'community.sub-community-list.head' | translate}}
    
+    
    {{'community.sub-community-list.head' | translate}}
    
      {
+describe('CommunityPageSubCommunityListComponent', () => {
   let comp: CommunityPageSubCommunityListComponent;
   let fixture: ComponentFixture;
   let communityDataServiceStub: any;
@@ -182,19 +177,19 @@ describe('CommunityPageSubCommunityListComponent Component', () => {
   });
 
 
-  it('should display a list of sub-communities', () => {
-    waitForAsync(() => {
-      subCommList = subcommunities;
-      fixture.detectChanges();
+  it('should display a list of sub-communities', async () => {
+    subCommList = subcommunities;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
 
-      const subComList = fixture.debugElement.queryAll(By.css('li'));
-      expect(subComList.length).toEqual(5);
-      expect(subComList[0].nativeElement.textContent).toContain('SubCommunity 1');
-      expect(subComList[1].nativeElement.textContent).toContain('SubCommunity 2');
-      expect(subComList[2].nativeElement.textContent).toContain('SubCommunity 3');
-      expect(subComList[3].nativeElement.textContent).toContain('SubCommunity 4');
-      expect(subComList[4].nativeElement.textContent).toContain('SubCommunity 5');
-    });
+    const subComList: DebugElement[] = fixture.debugElement.queryAll(By.css('ul[data-test="objects"] li'));
+    expect(subComList.length).toEqual(5);
+    expect(subComList[0].nativeElement.textContent).toContain('SubCommunity 1');
+    expect(subComList[1].nativeElement.textContent).toContain('SubCommunity 2');
+    expect(subComList[2].nativeElement.textContent).toContain('SubCommunity 3');
+    expect(subComList[3].nativeElement.textContent).toContain('SubCommunity 4');
+    expect(subComList[4].nativeElement.textContent).toContain('SubCommunity 5');
   });
 
   it('should not display the header when list of sub-communities is empty', () => {
diff --git a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
similarity index 76%
rename from src/app/community-page/sub-community-list/community-page-sub-community-list.component.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
index 7f67109a6d..6b83a3a03a 100644
--- a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
@@ -1,29 +1,17 @@
-import {
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import {
-  BehaviorSubject,
-  combineLatest as observableCombineLatest,
-  Subscription,
-} from 'rxjs';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Subscription } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
-import {
-  SortDirection,
-  SortOptions,
-} from '../../core/cache/models/sort-options.model';
-import { CommunityDataService } from '../../core/data/community-data.service';
-import { PaginatedList } from '../../core/data/paginated-list.model';
-import { RemoteData } from '../../core/data/remote-data';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { Community } from '../../core/shared/community.model';
-import { fadeIn } from '../../shared/animations/fade';
-import { hasValue } from '../../shared/empty.util';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { Community } from '../../../../core/shared/community.model';
+import { fadeIn } from '../../../../shared/animations/fade';
+import { PaginatedList } from '../../../../core/data/paginated-list.model';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
+import { SortDirection, SortOptions } from '../../../../core/cache/models/sort-options.model';
+import { CommunityDataService } from '../../../../core/data/community-data.service';
+import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { hasValue } from '../../../../shared/empty.util';
 
 @Component({
   selector: 'ds-community-page-sub-community-list',
diff --git a/src/app/community-page/sub-community-list/themed-community-page-sub-community-list.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component.ts
similarity index 64%
rename from src/app/community-page/sub-community-list/themed-community-page-sub-community-list.component.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component.ts
index d7a9711212..9c500cac10 100644
--- a/src/app/community-page/sub-community-list/themed-community-page-sub-community-list.component.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component.ts
@@ -1,16 +1,12 @@
-import {
-  Component,
-  Input,
-} from '@angular/core';
-
-import { Community } from '../../core/shared/community.model';
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ThemedComponent } from '../../../../shared/theme-support/themed.component';
 import { CommunityPageSubCommunityListComponent } from './community-page-sub-community-list.component';
+import { Component, Input } from '@angular/core';
+import { Community } from '../../../../core/shared/community.model';
 
 @Component({
   selector: 'ds-themed-community-page-sub-community-list',
   styleUrls: [],
-  templateUrl: '../../shared/theme-support/themed.component.html',
+  templateUrl: '../../../../shared/theme-support/themed.component.html',
 })
 export class ThemedCommunityPageSubCommunityListComponent extends ThemedComponent {
 
@@ -23,7 +19,7 @@ export class ThemedCommunityPageSubCommunityListComponent extends ThemedComponen
   }
 
   protected importThemedComponent(themeName: string): Promise {
-    return import(`../../../themes/${themeName}/app/community-page/sub-community-list/community-page-sub-community-list.component`);
+    return import(`../../../../../themes/${themeName}/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component`);
   }
 
   protected importUnthemedComponent(): Promise {
diff --git a/src/app/core/auth/auth.interceptor.spec.ts b/src/app/core/auth/auth.interceptor.spec.ts
index b1175f222b..e87ba3ae6c 100644
--- a/src/app/core/auth/auth.interceptor.spec.ts
+++ b/src/app/core/auth/auth.interceptor.spec.ts
@@ -1,8 +1,5 @@
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import {
-  HttpClientTestingModule,
-  HttpTestingController,
-} from '@angular/common/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
@@ -22,9 +19,7 @@ describe(`AuthInterceptor`, () => {
 
   const authServiceStub = new AuthServiceStub();
   const store: Store = jasmine.createSpyObj('store', {
-    /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
     dispatch: {},
-    /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
     select: observableOf(true),
   });
 
@@ -48,6 +43,10 @@ describe(`AuthInterceptor`, () => {
     httpMock = TestBed.inject(HttpTestingController);
   });
 
+  afterEach(() => {
+    httpMock.verify();
+  });
+
   describe('when has a valid token', () => {
 
     it('should not add an Authorization header when we’re sending a HTTP request to \'authn\' endpoint that is not the logout endpoint', () => {
@@ -97,14 +96,11 @@ describe(`AuthInterceptor`, () => {
     });
 
     it('should redirect to login', () => {
-
-      service.request(RestRequestMethod.POST, 'dspace-spring-rest/api/submission/workspaceitems', 'password=password&user=user').subscribe((response) => {
-        expect(response).toBeTruthy();
-      });
-
       service.request(RestRequestMethod.POST, 'dspace-spring-rest/api/submission/workspaceitems', 'password=password&user=user');
 
       httpMock.expectNone('dspace-spring-rest/api/submission/workspaceitems');
+      // HttpTestingController.expectNone will throw an error when a requests is made
+      expect().nothing();
     });
   });
 
diff --git a/src/app/core/auth/auth.service.ts b/src/app/core/auth/auth.service.ts
index 8fa078b739..8fff24df23 100644
--- a/src/app/core/auth/auth.service.ts
+++ b/src/app/core/auth/auth.service.ts
@@ -1,50 +1,20 @@
 import { HttpHeaders } from '@angular/common/http';
-import {
-  Inject,
-  Injectable,
-  Optional,
-} from '@angular/core';
+import { Inject, Injectable, Optional } from '@angular/core';
 import { Router } from '@angular/router';
-import {
-  select,
-  Store,
-} from '@ngrx/store';
-import {
-  REQUEST,
-  RESPONSE,
-} from '@nguniversal/express-engine/tokens';
+import { select, Store } from '@ngrx/store';
+import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
 import { TranslateService } from '@ngx-translate/core';
 import { CookieAttributes } from 'js-cookie';
-import {
-  Observable,
-  of as observableOf,
-} from 'rxjs';
-import {
-  filter,
-  map,
-  startWith,
-  switchMap,
-  take,
-} from 'rxjs/operators';
+import { Observable, of as observableOf } from 'rxjs';
+import { filter, map, startWith, switchMap, take } from 'rxjs/operators';
 
 import { environment } from '../../../environments/environment';
 import { AppState } from '../../app.reducer';
-import {
-  hasNoValue,
-  hasValue,
-  hasValueOperator,
-  isEmpty,
-  isNotEmpty,
-  isNotNull,
-  isNotUndefined,
-} from '../../shared/empty.util';
+import { hasNoValue, hasValue, hasValueOperator, isEmpty, isNotEmpty, isNotNull, isNotUndefined } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { followLink } from '../../shared/utils/follow-link-config.model';
-import {
-  buildPaginatedList,
-  PaginatedList,
-} from '../data/paginated-list.model';
+import { buildPaginatedList, PaginatedList } from '../data/paginated-list.model';
 import { RemoteData } from '../data/remote-data';
 import { HttpOptions } from '../dspace-rest/dspace-rest.service';
 import { EPersonDataService } from '../eperson/eperson-data.service';
@@ -53,41 +23,15 @@ import { Group } from '../eperson/models/group.model';
 import { CookieService } from '../services/cookie.service';
 import { HardRedirectService } from '../services/hard-redirect.service';
 import { RouteService } from '../services/route.service';
-import {
-  NativeWindowRef,
-  NativeWindowService,
-} from '../services/window.service';
-import {
-  getAllSucceededRemoteDataPayload,
-  getFirstCompletedRemoteData,
-} from '../shared/operators';
+import { NativeWindowRef, NativeWindowService } from '../services/window.service';
+import { getAllSucceededRemoteDataPayload, getFirstCompletedRemoteData } from '../shared/operators';
 import { PageInfo } from '../shared/page-info.model';
-import {
-  CheckAuthenticationTokenAction,
-  RefreshTokenAction,
-  ResetAuthenticationMessagesAction,
-  SetAuthCookieStatus,
-  SetRedirectUrlAction,
-  SetUserAsIdleAction,
-  UnsetUserAsIdleAction,
-} from './auth.actions';
+import { CheckAuthenticationTokenAction, RefreshTokenAction, ResetAuthenticationMessagesAction, SetAuthCookieStatus, SetRedirectUrlAction, SetUserAsIdleAction, UnsetUserAsIdleAction } from './auth.actions';
 import { AuthRequestService } from './auth-request.service';
 import { AuthMethod } from './models/auth.method';
 import { AuthStatus } from './models/auth-status.model';
-import {
-  AuthTokenInfo,
-  TOKENITEM,
-} from './models/auth-token-info.model';
-import {
-  getAuthenticatedUserId,
-  getAuthenticationToken,
-  getExternalAuthCookieStatus,
-  getRedirectUrl,
-  isAuthenticated,
-  isAuthenticatedLoaded,
-  isIdle,
-  isTokenRefreshing,
-} from './selectors';
+import { AuthTokenInfo, TOKENITEM } from './models/auth-token-info.model';
+import { getAuthenticatedUserId, getAuthenticationToken, getExternalAuthCookieStatus, getRedirectUrl, isAuthenticated, isAuthenticatedLoaded, isIdle, isTokenRefreshing } from './selectors';
 
 export const LOGIN_ROUTE = '/login';
 export const LOGOUT_ROUTE = '/logout';
@@ -151,7 +95,7 @@ export class AuthService {
         if (hasValue(rd.payload) && rd.payload.authenticated) {
           return rd.payload;
         } else {
-          throw (new Error('Invalid email or password'));
+          throw (new Error('auth.errors.invalid-user'));
         }
       }));
 
diff --git a/src/app/core/breadcrumbs/navigation-breadcrumb.resolver.spec.ts b/src/app/core/breadcrumbs/navigation-breadcrumb.resolver.spec.ts
new file mode 100644
index 0000000000..81b3b8ad2a
--- /dev/null
+++ b/src/app/core/breadcrumbs/navigation-breadcrumb.resolver.spec.ts
@@ -0,0 +1,52 @@
+import { NavigationBreadcrumbResolver } from './navigation-breadcrumb.resolver';
+
+describe('NavigationBreadcrumbResolver', () => {
+  describe('resolve', () => {
+    let resolver: NavigationBreadcrumbResolver;
+    let NavigationBreadcrumbService: any;
+    let i18nKey: string;
+    let relatedI18nKey: string;
+    let route: any;
+    let expectedPath;
+    let state;
+    beforeEach(() => {
+      i18nKey = 'example.key';
+      relatedI18nKey = 'related.key';
+      route = {
+        data: {
+          breadcrumbKey: i18nKey,
+          relatedRoutes: [
+            {
+              path: '',
+              data: {breadcrumbKey: relatedI18nKey},
+            }
+          ]
+        },
+        routeConfig: {
+          path: 'example'
+        },
+        parent: {
+          routeConfig: {
+            path: ''
+          },
+          url: [{
+            path: 'base'
+          }]
+        } as any
+      };
+
+      state = {
+        url: '/base/example'
+      };
+      expectedPath = '/base/example:/base';
+      NavigationBreadcrumbService = {};
+      resolver = new NavigationBreadcrumbResolver(NavigationBreadcrumbService);
+    });
+
+    it('should resolve the breadcrumb config', () => {
+      const resolvedConfig = resolver.resolve(route, state);
+      const expectedConfig = { provider: NavigationBreadcrumbService, key: `${i18nKey}:${relatedI18nKey}`, url: expectedPath };
+      expect(resolvedConfig).toEqual(expectedConfig);
+    });
+  });
+});
diff --git a/src/app/core/breadcrumbs/navigation-breadcrumb.resolver.ts b/src/app/core/breadcrumbs/navigation-breadcrumb.resolver.ts
new file mode 100644
index 0000000000..18ebfc395b
--- /dev/null
+++ b/src/app/core/breadcrumbs/navigation-breadcrumb.resolver.ts
@@ -0,0 +1,52 @@
+import { BreadcrumbConfig } from '../../breadcrumbs/breadcrumb/breadcrumb-config.model';
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { NavigationBreadcrumbsService } from './navigation-breadcrumb.service';
+
+/**
+ * The class that resolves a BreadcrumbConfig object with an i18n key string for a route and related parents
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class NavigationBreadcrumbResolver implements Resolve> {
+
+  private parentRoutes: ActivatedRouteSnapshot[] = [];
+  constructor(protected breadcrumbService: NavigationBreadcrumbsService) {
+  }
+
+  /**
+   * Method to collect all parent routes snapshot from current route snapshot
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   */
+  private getParentRoutes(route: ActivatedRouteSnapshot): void {
+    if (route.parent) {
+      this.parentRoutes.push(route.parent);
+      this.getParentRoutes(route.parent);
+    }
+  }
+  /**
+   * Method for resolving an I18n breadcrumb configuration object
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns BreadcrumbConfig object
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): BreadcrumbConfig {
+    this.getParentRoutes(route);
+    const relatedRoutes = route.data.relatedRoutes;
+    const parentPaths = this.parentRoutes.map(parent => parent.routeConfig?.path);
+    const relatedParentRoutes = relatedRoutes.filter(relatedRoute => parentPaths.includes(relatedRoute.path));
+    const baseUrlSegmentPath = route.parent.url[route.parent.url.length - 1].path;
+    const baseUrl = state.url.substring(0, state.url.lastIndexOf(baseUrlSegmentPath) + baseUrlSegmentPath.length);
+
+
+    const combinedParentBreadcrumbKeys = relatedParentRoutes.reduce((previous, current) => {
+      return `${previous}:${current.data.breadcrumbKey}`;
+    }, route.data.breadcrumbKey);
+    const combinedUrls = relatedParentRoutes.reduce((previous, current) => {
+      return `${previous}:${baseUrl}${current.path}`;
+    }, state.url);
+
+    return {provider: this.breadcrumbService, key: combinedParentBreadcrumbKeys, url: combinedUrls};
+  }
+}
diff --git a/src/app/core/breadcrumbs/navigation-breadcrumb.service.ts b/src/app/core/breadcrumbs/navigation-breadcrumb.service.ts
new file mode 100644
index 0000000000..beebeed94e
--- /dev/null
+++ b/src/app/core/breadcrumbs/navigation-breadcrumb.service.ts
@@ -0,0 +1,30 @@
+import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
+import { BreadcrumbsProviderService } from './breadcrumbsProviderService';
+import { Observable, of as observableOf } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+/**
+ * The postfix for i18n breadcrumbs
+ */
+export const BREADCRUMB_MESSAGE_POSTFIX = '.breadcrumbs';
+
+/**
+ * Service to calculate i18n breadcrumbs for a single part of the route
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class NavigationBreadcrumbsService implements BreadcrumbsProviderService {
+
+  /**
+   * Method to calculate the breadcrumbs
+   * @param key The key used to resolve the breadcrumb
+   * @param url The url to use as a link for this breadcrumb
+   */
+  getBreadcrumbs(key: string, url: string): Observable {
+    const keys = key.split(':');
+    const urls = url.split(':');
+    const breadcrumbs = keys.map((currentKey, index) => new Breadcrumb(currentKey + BREADCRUMB_MESSAGE_POSTFIX, urls[index] ));
+    return observableOf(breadcrumbs.reverse());
+  }
+}
diff --git a/src/app/core/breadcrumbs/navigation-breadcrumbs.service.spec.ts b/src/app/core/breadcrumbs/navigation-breadcrumbs.service.spec.ts
new file mode 100644
index 0000000000..98e20e285d
--- /dev/null
+++ b/src/app/core/breadcrumbs/navigation-breadcrumbs.service.spec.ts
@@ -0,0 +1,43 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
+import { getTestScheduler } from 'jasmine-marbles';
+import { BREADCRUMB_MESSAGE_POSTFIX } from './i18n-breadcrumbs.service';
+import { NavigationBreadcrumbsService } from './navigation-breadcrumb.service';
+
+describe('NavigationBreadcrumbsService', () => {
+  let service: NavigationBreadcrumbsService;
+  let exampleString;
+  let exampleURL;
+  let childrenString;
+  let childrenUrl;
+  let parentString;
+  let parentUrl;
+
+  function init() {
+    exampleString = 'example.string:parent.string';
+    exampleURL = 'example.com:parent.com';
+    childrenString = 'example.string';
+    childrenUrl = 'example.com';
+    parentString = 'parent.string';
+    parentUrl = 'parent.com';
+  }
+
+  beforeEach(waitForAsync(() => {
+    init();
+    TestBed.configureTestingModule({}).compileComponents();
+  }));
+
+  beforeEach(() => {
+    service = new NavigationBreadcrumbsService();
+  });
+
+  describe('getBreadcrumbs', () => {
+    it('should return an array of breadcrumbs based on strings by adding the postfix', () => {
+      const breadcrumbs = service.getBreadcrumbs(exampleString, exampleURL);
+      getTestScheduler().expectObservable(breadcrumbs).toBe('(a|)', { a: [
+          new Breadcrumb(childrenString + BREADCRUMB_MESSAGE_POSTFIX, childrenUrl),
+          new Breadcrumb(parentString + BREADCRUMB_MESSAGE_POSTFIX, parentUrl),
+        ].reverse() });
+    });
+  });
+});
diff --git a/src/app/core/breadcrumbs/publication-claim-breadcrumb.resolver.spec.ts b/src/app/core/breadcrumbs/publication-claim-breadcrumb.resolver.spec.ts
new file mode 100644
index 0000000000..b6f4142469
--- /dev/null
+++ b/src/app/core/breadcrumbs/publication-claim-breadcrumb.resolver.spec.ts
@@ -0,0 +1,31 @@
+import { PublicationClaimBreadcrumbResolver } from './publication-claim-breadcrumb.resolver';
+
+describe('PublicationClaimBreadcrumbResolver', () => {
+  describe('resolve', () => {
+    let resolver: PublicationClaimBreadcrumbResolver;
+    let publicationClaimBreadcrumbService: any;
+    const fullPath = '/test/publication-claim/openaire:6bee076d-4f2a-4555-a475-04a267769b2a';
+    const expectedKey = '6bee076d-4f2a-4555-a475-04a267769b2a';
+    const expectedId = 'openaire:6bee076d-4f2a-4555-a475-04a267769b2a';
+    let route;
+
+    beforeEach(() => {
+      route = {
+        paramMap: {
+          get: function (param) {
+            return this[param];
+          },
+          targetId: expectedId,
+        }
+      };
+      publicationClaimBreadcrumbService = {};
+      resolver = new PublicationClaimBreadcrumbResolver(publicationClaimBreadcrumbService);
+    });
+
+    it('should resolve the breadcrumb config', () => {
+      const resolvedConfig = resolver.resolve(route as any, {url: fullPath } as any);
+      const expectedConfig = { provider: publicationClaimBreadcrumbService, key: expectedKey };
+      expect(resolvedConfig).toEqual(expectedConfig);
+    });
+  });
+});
diff --git a/src/app/core/breadcrumbs/publication-claim-breadcrumb.resolver.ts b/src/app/core/breadcrumbs/publication-claim-breadcrumb.resolver.ts
new file mode 100644
index 0000000000..21bb9eab9f
--- /dev/null
+++ b/src/app/core/breadcrumbs/publication-claim-breadcrumb.resolver.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { BreadcrumbConfig } from '../../breadcrumbs/breadcrumb/breadcrumb-config.model';
+import { PublicationClaimBreadcrumbService } from './publication-claim-breadcrumb.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PublicationClaimBreadcrumbResolver implements Resolve>  {
+  constructor(protected breadcrumbService: PublicationClaimBreadcrumbService) {
+  }
+
+  /**
+   * Method that resolve Publication Claim item into a breadcrumb
+   * The parameter are retrieved by the url since part of the Publication Claim route config
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns BreadcrumbConfig object
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): BreadcrumbConfig {
+    const targetId = route.paramMap.get('targetId').split(':')[1];
+    return { provider: this.breadcrumbService, key: targetId };
+  }
+}
diff --git a/src/app/core/breadcrumbs/publication-claim-breadcrumb.service.spec.ts b/src/app/core/breadcrumbs/publication-claim-breadcrumb.service.spec.ts
new file mode 100644
index 0000000000..11062210bb
--- /dev/null
+++ b/src/app/core/breadcrumbs/publication-claim-breadcrumb.service.spec.ts
@@ -0,0 +1,51 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
+import { getTestScheduler } from 'jasmine-marbles';
+import { PublicationClaimBreadcrumbService } from './publication-claim-breadcrumb.service';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { of } from 'rxjs';
+
+describe('PublicationClaimBreadcrumbService', () => {
+  let service: PublicationClaimBreadcrumbService;
+  let dsoNameService: any = {
+    getName: (str) => str
+  };
+  let translateService: any = {
+    instant: (str) => str,
+  };
+
+  let dataService: any = {
+    findById: (str) => createSuccessfulRemoteDataObject$(str),
+  };
+
+  let authorizationService: any = {
+    isAuthorized: (str) => of(true),
+  };
+
+  let exampleKey;
+
+  const ADMIN_PUBLICATION_CLAIMS_PATH = 'admin/notifications/publication-claim';
+  const ADMIN_PUBLICATION_CLAIMS_BREADCRUMB_KEY = 'admin.notifications.publicationclaim.page.title';
+
+  function init() {
+    exampleKey = 'suggestion.suggestionFor.breadcrumb';
+  }
+
+  beforeEach(waitForAsync(() => {
+    init();
+    TestBed.configureTestingModule({}).compileComponents();
+  }));
+
+  beforeEach(() => {
+    service = new PublicationClaimBreadcrumbService(dataService,dsoNameService,translateService, authorizationService);
+  });
+
+  describe('getBreadcrumbs', () => {
+    it('should return a breadcrumb based on a string', () => {
+      const breadcrumbs = service.getBreadcrumbs(exampleKey);
+      getTestScheduler().expectObservable(breadcrumbs).toBe('(a|)', { a: [new Breadcrumb(ADMIN_PUBLICATION_CLAIMS_BREADCRUMB_KEY, ADMIN_PUBLICATION_CLAIMS_PATH),
+          new Breadcrumb(exampleKey, undefined)]
+      });
+    });
+  });
+});
diff --git a/src/app/core/breadcrumbs/publication-claim-breadcrumb.service.ts b/src/app/core/breadcrumbs/publication-claim-breadcrumb.service.ts
new file mode 100644
index 0000000000..f65c7c7cd7
--- /dev/null
+++ b/src/app/core/breadcrumbs/publication-claim-breadcrumb.service.ts
@@ -0,0 +1,44 @@
+import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
+import { BreadcrumbsProviderService } from './breadcrumbsProviderService';
+import { combineLatest, Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { ItemDataService } from '../data/item-data.service';
+import { getFirstCompletedRemoteData } from '../shared/operators';
+import { map } from 'rxjs/operators';
+import { DSONameService } from './dso-name.service';
+import { TranslateService } from '@ngx-translate/core';
+import { AuthorizationDataService } from '../data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../data/feature-authorization/feature-id';
+
+/**
+ * Service to calculate Publication claims breadcrumbs
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class PublicationClaimBreadcrumbService implements BreadcrumbsProviderService {
+  private ADMIN_PUBLICATION_CLAIMS_PATH = 'admin/notifications/publication-claim';
+  private ADMIN_PUBLICATION_CLAIMS_BREADCRUMB_KEY = 'admin.notifications.publicationclaim.page.title';
+
+  constructor(private dataService: ItemDataService,
+              private dsoNameService: DSONameService,
+              private tranlsateService: TranslateService,
+              protected authorizationService: AuthorizationDataService) {
+  }
+
+
+  /**
+   * Method to calculate the breadcrumbs
+   * @param key The key used to resolve the breadcrumb
+   */
+  getBreadcrumbs(key: string): Observable {
+    return combineLatest([this.dataService.findById(key).pipe(getFirstCompletedRemoteData()),this.authorizationService.isAuthorized(FeatureID.AdministratorOf)]).pipe(
+      map(([item, isAdmin]) => {
+        const itemName = this.dsoNameService.getName(item.payload);
+        return isAdmin ? [new Breadcrumb(this.tranlsateService.instant(this.ADMIN_PUBLICATION_CLAIMS_BREADCRUMB_KEY), this.ADMIN_PUBLICATION_CLAIMS_PATH),
+          new Breadcrumb(this.tranlsateService.instant('suggestion.suggestionFor.breadcrumb', {name: itemName}), undefined)] :
+          [new Breadcrumb(this.tranlsateService.instant('suggestion.suggestionFor.breadcrumb', {name: itemName}), undefined)];
+      })
+    );
+  }
+}
diff --git a/src/app/core/breadcrumbs/quality-assurance-breadcrumb.service.spec.ts b/src/app/core/breadcrumbs/quality-assurance-breadcrumb.service.spec.ts
index 86ee3565dc..11bd9a7781 100644
--- a/src/app/core/breadcrumbs/quality-assurance-breadcrumb.service.spec.ts
+++ b/src/app/core/breadcrumbs/quality-assurance-breadcrumb.service.spec.ts
@@ -1,7 +1,4 @@
-import {
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { getTestScheduler } from 'jasmine-marbles';
 
 import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
@@ -9,7 +6,6 @@ import { QualityAssuranceBreadcrumbService } from './quality-assurance-breadcrum
 
 describe('QualityAssuranceBreadcrumbService', () => {
   let service: QualityAssuranceBreadcrumbService;
-  let dataService: any;
   let translateService: any = {
     instant: (str) => str,
   };
@@ -30,7 +26,7 @@ describe('QualityAssuranceBreadcrumbService', () => {
   }));
 
   beforeEach(() => {
-    service = new QualityAssuranceBreadcrumbService(dataService,translateService);
+    service = new QualityAssuranceBreadcrumbService(translateService);
   });
 
   describe('getBreadcrumbs', () => {
diff --git a/src/app/core/breadcrumbs/quality-assurance-breadcrumb.service.ts b/src/app/core/breadcrumbs/quality-assurance-breadcrumb.service.ts
index a7cbaeee53..0d2eaf1f78 100644
--- a/src/app/core/breadcrumbs/quality-assurance-breadcrumb.service.ts
+++ b/src/app/core/breadcrumbs/quality-assurance-breadcrumb.service.ts
@@ -1,18 +1,10 @@
 import { Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import {
-  Observable,
-  of as observableOf,
-} from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, of as observableOf } from 'rxjs';
 
 import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
-import { QualityAssuranceTopicDataService } from '../notifications/qa/topics/quality-assurance-topic-data.service';
-import { getFirstCompletedRemoteData } from '../shared/operators';
 import { BreadcrumbsProviderService } from './breadcrumbsProviderService';
 
-
-
 /**
  * Service to calculate QA breadcrumbs for a single part of the route
  */
@@ -23,7 +15,6 @@ export class QualityAssuranceBreadcrumbService implements BreadcrumbsProviderSer
 
   private QUALITY_ASSURANCE_BREADCRUMB_KEY = 'admin.quality-assurance.breadcrumbs';
   constructor(
-    protected qualityAssuranceService: QualityAssuranceTopicDataService,
     private translationService: TranslateService,
   ) {
 
@@ -36,18 +27,14 @@ export class QualityAssuranceBreadcrumbService implements BreadcrumbsProviderSer
    * @param url The url to use as a link for this breadcrumb
    */
   getBreadcrumbs(key: string, url: string): Observable {
-    const sourceId = key.split(':')[0];
-    const topicId = key.split(':')[1];
+    const args = key.split(':');
+    const sourceId = args[0];
+    const topicId = args.length > 2 ? args[args.length - 1] : args[1];
 
     if (topicId) {
-      return this.qualityAssuranceService.getTopic(topicId).pipe(
-        getFirstCompletedRemoteData(),
-        map((topic) => {
-          return [new Breadcrumb(this.translationService.instant(this.QUALITY_ASSURANCE_BREADCRUMB_KEY), url),
+      return observableOf( [new Breadcrumb(this.translationService.instant(this.QUALITY_ASSURANCE_BREADCRUMB_KEY), url),
             new Breadcrumb(sourceId, `${url}${sourceId}`),
-            new Breadcrumb(topicId, undefined)];
-        }),
-      );
+        new Breadcrumb(topicId, undefined)]);
     } else {
       return observableOf([new Breadcrumb(this.translationService.instant(this.QUALITY_ASSURANCE_BREADCRUMB_KEY), url),
         new Breadcrumb(sourceId, `${url}${sourceId}`)]);
diff --git a/src/app/core/browse/browse.service.ts b/src/app/core/browse/browse.service.ts
index 376054e019..18da9223d0 100644
--- a/src/app/core/browse/browse.service.ts
+++ b/src/app/core/browse/browse.service.ts
@@ -1,21 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import {
-  distinctUntilChanged,
-  map,
-  startWith,
-} from 'rxjs/operators';
+import { distinctUntilChanged, map, startWith } from 'rxjs/operators';
 
-import {
-  hasValue,
-  hasValueOperator,
-  isEmpty,
-  isNotEmpty,
-} from '../../shared/empty.util';
-import {
-  followLink,
-  FollowLinkConfig,
-} from '../../shared/utils/follow-link-config.model';
+import { hasValue, hasValueOperator, isEmpty, isNotEmpty } from '../../shared/empty.util';
+import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { SortDirection } from '../cache/models/sort-options.model';
 import { HrefOnlyDataService } from '../data/href-only-data.service';
@@ -27,18 +15,11 @@ import { BrowseEntry } from '../shared/browse-entry.model';
 import { FlatBrowseDefinition } from '../shared/flat-browse-definition.model';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { Item } from '../shared/item.model';
-import {
-  getBrowseDefinitionLinks,
-  getFirstOccurrence,
-  getFirstSucceededRemoteData,
-  getPaginatedListPayload,
-  getRemoteDataPayload,
-} from '../shared/operators';
+import { getBrowseDefinitionLinks, getFirstOccurrence, getFirstSucceededRemoteData, getPaginatedListPayload, getRemoteDataPayload } from '../shared/operators';
 import { URLCombiner } from '../url-combiner/url-combiner';
 import { BrowseDefinitionDataService } from './browse-definition-data.service';
 import { BrowseEntrySearchOptions } from './browse-entry-search-options.model';
 
-
 export const BROWSE_LINKS_TO_FOLLOW: FollowLinkConfig[] = [
   followLink('thumbnail'),
 ];
@@ -118,7 +99,7 @@ export class BrowseService {
       }),
     );
     if (options.fetchThumbnail ) {
-      return this.hrefOnlyDataService.findListByHref(href$, {}, null, null, ...BROWSE_LINKS_TO_FOLLOW);
+      return this.hrefOnlyDataService.findListByHref(href$, {}, undefined, undefined, ...BROWSE_LINKS_TO_FOLLOW);
     }
     return this.hrefOnlyDataService.findListByHref(href$);
   }
@@ -166,7 +147,7 @@ export class BrowseService {
       }),
     );
     if (options.fetchThumbnail) {
-      return this.hrefOnlyDataService.findListByHref(href$, {}, null, null, ...BROWSE_LINKS_TO_FOLLOW);
+      return this.hrefOnlyDataService.findListByHref(href$, {}, undefined, undefined, ...BROWSE_LINKS_TO_FOLLOW);
     }
     return this.hrefOnlyDataService.findListByHref(href$);
   }
diff --git a/src/app/core/cache/builders/build-decorators.spec.ts b/src/app/core/cache/builders/build-decorators.spec.ts
index 6065dd3e5e..e4baaa4a5a 100644
--- a/src/app/core/cache/builders/build-decorators.spec.ts
+++ b/src/app/core/cache/builders/build-decorators.spec.ts
@@ -1,10 +1,7 @@
 import { HALLink } from '../../shared/hal-link.model';
 import { HALResource } from '../../shared/hal-resource.model';
 import { ResourceType } from '../../shared/resource-type';
-import {
-  getLinkDefinition,
-  link,
-} from './build-decorators';
+import { dataService, getDataServiceFor, getLinkDefinition, link } from './build-decorators';
 
 class TestHALResource implements HALResource {
   _links: {
@@ -49,5 +46,17 @@ describe('build decorators', () => {
         expect(result).toBeUndefined();
       });
     });
+
+    describe(`set data service`, () => {
+      it(`should throw error`, () => {
+        expect(dataService(null)).toThrow();
+      });
+
+      it(`should set properly data service for type`, () => {
+        const target = new TestHALResource();
+        dataService(testType)(target);
+        expect(getDataServiceFor(testType)).toEqual(target);
+      });
+    });
   });
 });
diff --git a/src/app/core/cache/builders/build-decorators.ts b/src/app/core/cache/builders/build-decorators.ts
index 849056051c..f1e42323d5 100644
--- a/src/app/core/cache/builders/build-decorators.ts
+++ b/src/app/core/cache/builders/build-decorators.ts
@@ -1,18 +1,20 @@
 import { InjectionToken } from '@angular/core';
 
-import {
-  hasNoValue,
-  hasValue,
-} from '../../../shared/empty.util';
+import { hasNoValue, hasValue } from '../../../shared/empty.util';
 import { GenericConstructor } from '../../shared/generic-constructor';
 import { HALResource } from '../../shared/hal-resource.model';
 import { ResourceType } from '../../shared/resource-type';
 import { getResourceTypeValueFor } from '../object-cache.reducer';
+import { CacheableObject } from '../cacheable-object.model';
 import { TypedObject } from '../typed-object.model';
 
+export const DATA_SERVICE_FACTORY = new InjectionToken<(resourceType: ResourceType) => GenericConstructor>('getDataServiceFor', {
+  providedIn: 'root',
+  factory: () => getDataServiceFor
+});
 export const LINK_DEFINITION_FACTORY = new InjectionToken<(source: GenericConstructor, linkName: keyof T['_links']) => LinkDefinition>('getLinkDefinition', {
   providedIn: 'root',
-  factory: () => getLinkDefinition,
+  factory: () => getLinkDefinition
 });
 export const LINK_DEFINITION_MAP_FACTORY = new InjectionToken<(source: GenericConstructor) => Map>>('getLinkDefinitions', {
   providedIn: 'root',
@@ -23,6 +25,7 @@ const resolvedLinkKey = Symbol('resolvedLink');
 
 const resolvedLinkMap = new Map();
 const typeMap = new Map();
+const dataServiceMap = new Map();
 const linkMap = new Map();
 
 /**
@@ -41,6 +44,39 @@ export function getClassForType(type: string | ResourceType) {
   return typeMap.get(getResourceTypeValueFor(type));
 }
 
+/**
+ * A class decorator to indicate that this class is a dataservice
+ * for a given resource type.
+ *
+ * "dataservice" in this context means that it has findByHref and
+ * findAllByHref methods.
+ *
+ * @param resourceType the resource type the class is a dataservice for
+ */
+export function dataService(resourceType: ResourceType): any {
+  return (target: any) => {
+    if (hasNoValue(resourceType)) {
+      throw new Error(`Invalid @dataService annotation on ${target}, resourceType needs to be defined`);
+    }
+    const existingDataservice = dataServiceMap.get(resourceType.value);
+
+    if (hasValue(existingDataservice)) {
+      throw new Error(`Multiple dataservices for ${resourceType.value}: ${existingDataservice} and ${target}`);
+    }
+
+    dataServiceMap.set(resourceType.value, target);
+  };
+}
+
+/**
+ * Return the dataservice matching the given resource type
+ *
+ * @param resourceType the resource type you want the matching dataservice for
+ */
+export function getDataServiceFor(resourceType: ResourceType) {
+  return dataServiceMap.get(resourceType.value);
+}
+
 /**
  * A class to represent the data that can be set by the @link decorator
  */
diff --git a/src/app/core/cache/builders/remote-data-build.service.ts b/src/app/core/cache/builders/remote-data-build.service.ts
index ee58c62047..b8dad613c4 100644
--- a/src/app/core/cache/builders/remote-data-build.service.ts
+++ b/src/app/core/cache/builders/remote-data-build.service.ts
@@ -1,50 +1,23 @@
 import { Injectable } from '@angular/core';
-import {
-  AsyncSubject,
-  combineLatest as observableCombineLatest,
-  Observable,
-  of as observableOf,
-} from 'rxjs';
-import {
-  distinctUntilKeyChanged,
-  filter,
-  map,
-  startWith,
-  switchMap,
-} from 'rxjs/operators';
+import { AsyncSubject, combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
+import { distinctUntilKeyChanged, filter, map, startWith, switchMap } from 'rxjs/operators';
 
-import {
-  hasNoValue,
-  hasValue,
-  isEmpty,
-  isNotEmpty,
-  isUndefined,
-} from '../../../shared/empty.util';
+import { hasNoValue, hasValue, isEmpty, isNotEmpty, isUndefined } from '../../../shared/empty.util';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
-import {
-  followLink,
-  FollowLinkConfig,
-} from '../../../shared/utils/follow-link-config.model';
+import { followLink, FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
 import { PaginatedList } from '../../data/paginated-list.model';
 import { PAGINATED_LIST } from '../../data/paginated-list.resource-type';
 import { RemoteData } from '../../data/remote-data';
 import { RequestService } from '../../data/request.service';
 import { RequestEntry } from '../../data/request-entry.model';
-import {
-  hasSucceeded,
-  isStale,
-  RequestEntryState,
-} from '../../data/request-entry-state.model';
+import { hasSucceeded, isStale, RequestEntryState } from '../../data/request-entry-state.model';
 import { ResponseState } from '../../data/response-state.model';
 import { getUrlWithoutEmbedParams } from '../../index/index.selectors';
 import { GenericConstructor } from '../../shared/generic-constructor';
 import { HALLink } from '../../shared/hal-link.model';
 import { HALResource } from '../../shared/hal-resource.model';
 import { getFirstCompletedRemoteData } from '../../shared/operators';
-import {
-  getRequestFromRequestHref,
-  getRequestFromRequestUUID,
-} from '../../shared/request.operators';
+import { getRequestFromRequestHref, getRequestFromRequestUUID } from '../../shared/request.operators';
 import { getResourceTypeValueFor } from '../object-cache.reducer';
 import { ObjectCacheService } from '../object-cache.service';
 import { getClassForType } from './build-decorators';
@@ -184,6 +157,7 @@ export class RemoteDataBuildService {
       } else {
         // in case the elements of the paginated list were already filled in, because they're UnCacheableObjects
         paginatedList.page = paginatedList.page
+          .filter((obj: any) => obj != null)
           .map((obj: any) => this.plainObjectToInstance(obj))
           .map((obj: any) =>
             this.linkService.resolveLinks(obj, ...pageLink.linksToFollow),
@@ -295,12 +269,13 @@ export class RemoteDataBuildService {
           return isStale(r2.state) ? r1 : r2;
         }
       }),
-      distinctUntilKeyChanged('lastUpdated'),
     );
 
     const payload$ = this.buildPayload(requestEntry$, href$, ...linksToFollow);
 
-    return this.toRemoteDataObservable(requestEntry$, payload$);
+    return this.toRemoteDataObservable(requestEntry$, payload$).pipe(
+      distinctUntilKeyChanged('lastUpdated'),
+    );
   }
 
   /**
diff --git a/src/app/core/cache/object-cache.reducer.spec.ts b/src/app/core/cache/object-cache.reducer.spec.ts
index a22c4a9f82..7ad9c068c3 100644
--- a/src/app/core/cache/object-cache.reducer.spec.ts
+++ b/src/app/core/cache/object-cache.reducer.spec.ts
@@ -3,15 +3,7 @@ import * as deepFreeze from 'deep-freeze';
 import { Operation } from 'fast-json-patch';
 
 import { Item } from '../shared/item.model';
-import {
-  AddDependentsObjectCacheAction,
-  AddPatchObjectCacheAction,
-  AddToObjectCacheAction,
-  ApplyPatchObjectCacheAction,
-  RemoveDependentsObjectCacheAction,
-  RemoveFromObjectCacheAction,
-  ResetObjectCacheTimestampsAction,
-} from './object-cache.actions';
+import { AddDependentsObjectCacheAction, AddPatchObjectCacheAction, AddToObjectCacheAction, ApplyPatchObjectCacheAction, RemoveDependentsObjectCacheAction, RemoveFromObjectCacheAction, ResetObjectCacheTimestampsAction } from './object-cache.actions';
 import { objectCacheReducer } from './object-cache.reducer';
 
 class NullAction extends RemoveFromObjectCacheAction {
@@ -126,6 +118,10 @@ describe('objectCacheReducer', () => {
     deepFreeze(state);
 
     objectCacheReducer(state, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should remove the specified object from the cache in response to the REMOVE action', () => {
@@ -149,6 +145,10 @@ describe('objectCacheReducer', () => {
     const action = new RemoveFromObjectCacheAction(selfLink1);
     // testState has already been frozen above
     objectCacheReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should set the timestamp of all objects in the cache in response to a RESET_TIMESTAMPS action', () => {
@@ -164,6 +164,10 @@ describe('objectCacheReducer', () => {
     const action = new ResetObjectCacheTimestampsAction(new Date().getTime());
     // testState has already been frozen above
     objectCacheReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should perform the ADD_PATCH action without affecting the previous state', () => {
@@ -174,6 +178,10 @@ describe('objectCacheReducer', () => {
     }]);
     // testState has already been frozen above
     objectCacheReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should when the ADD_PATCH action dispatched', () => {
diff --git a/src/app/core/cache/server-sync-buffer.reducer.spec.ts b/src/app/core/cache/server-sync-buffer.reducer.spec.ts
index 10ef132256..8dc8fd2195 100644
--- a/src/app/core/cache/server-sync-buffer.reducer.spec.ts
+++ b/src/app/core/cache/server-sync-buffer.reducer.spec.ts
@@ -3,10 +3,7 @@ import * as deepFreeze from 'deep-freeze';
 
 import { RestRequestMethod } from '../data/rest-request-method';
 import { RemoveFromObjectCacheAction } from './object-cache.actions';
-import {
-  AddToSSBAction,
-  EmptySSBAction,
-} from './server-sync-buffer.actions';
+import { AddToSSBAction, EmptySSBAction } from './server-sync-buffer.actions';
 import { serverSyncBufferReducer } from './server-sync-buffer.reducer';
 
 class NullAction extends RemoveFromObjectCacheAction {
@@ -56,12 +53,20 @@ describe('serverSyncBufferReducer', () => {
     const action = new AddToSSBAction(selfLink1, RestRequestMethod.POST);
     // testState has already been frozen above
     serverSyncBufferReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should perform the EMPTY action without affecting the previous state', () => {
     const action = new EmptySSBAction();
     // testState has already been frozen above
     serverSyncBufferReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should empty the buffer if the EmptySSBAction is dispatched without a payload', () => {
diff --git a/src/app/core/coar-notify/notify-info/notify-info.component.html b/src/app/core/coar-notify/notify-info/notify-info.component.html
new file mode 100644
index 0000000000..3370f83d03
--- /dev/null
+++ b/src/app/core/coar-notify/notify-info/notify-info.component.html
@@ -0,0 +1,18 @@
+
    
+    
+        {{ 'coar-notify-support.title' | translate }}
+    
+    
+    
    {{ 'coar-notify-support.title' | translate }}
    
+    
    
+
+    
    {{ 'coar-notify-support.ldn-inbox.title' | translate }}
    
+    
    
+
+    
    {{ 'coar-notify-support.message-moderation.title' | translate }}
    
+    
    
+      {{ 'coar-notify-support.message-moderation.content' | translate }}
+      {{ 'coar-notify-support.message-moderation.feedback-form' | translate }}
+    
    
+    
+
    
diff --git a/src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/core/coar-notify/notify-info/notify-info.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
rename to src/app/core/coar-notify/notify-info/notify-info.component.scss
diff --git a/src/app/core/coar-notify/notify-info/notify-info.component.spec.ts b/src/app/core/coar-notify/notify-info/notify-info.component.spec.ts
new file mode 100644
index 0000000000..881e1b67fb
--- /dev/null
+++ b/src/app/core/coar-notify/notify-info/notify-info.component.spec.ts
@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotifyInfoComponent } from './notify-info.component';
+import { NotifyInfoService } from './notify-info.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+describe('NotifyInfoComponent', () => {
+  let component: NotifyInfoComponent;
+  let fixture: ComponentFixture;
+  let notifyInfoServiceSpy: any;
+
+  beforeEach(async () => {
+    notifyInfoServiceSpy = jasmine.createSpyObj('NotifyInfoService', ['getCoarLdnLocalInboxUrls']);
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ NotifyInfoComponent ],
+      providers: [
+        { provide: NotifyInfoService, useValue: notifyInfoServiceSpy }
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotifyInfoComponent);
+    component = fixture.componentInstance;
+    component.coarRestApiUrl = of([]);
+    spyOn(component, 'generateCoarRestApiLinksHTML').and.returnValue(of(''));
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/coar-notify/notify-info/notify-info.component.ts b/src/app/core/coar-notify/notify-info/notify-info.component.ts
new file mode 100644
index 0000000000..ee3e1b9d57
--- /dev/null
+++ b/src/app/core/coar-notify/notify-info/notify-info.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { NotifyInfoService } from './notify-info.service';
+import { map, Observable, of } from 'rxjs';
+
+@Component({
+  selector: 'ds-notify-info',
+  templateUrl: './notify-info.component.html',
+  styleUrls: ['./notify-info.component.scss'],
+})
+/**
+ * Component for displaying COAR notification information.
+ */
+export class NotifyInfoComponent implements OnInit {
+  /**
+   * Observable containing the COAR REST INBOX API URLs.
+   */
+  coarRestApiUrl: Observable = of([]);
+
+  constructor(private notifyInfoService: NotifyInfoService) {}
+
+  ngOnInit() {
+    this.coarRestApiUrl = this.notifyInfoService.getCoarLdnLocalInboxUrls();
+  }
+
+  /**
+   * Generates HTML code for COAR REST API links.
+   * @returns An Observable that emits the generated HTML code.
+   */
+  generateCoarRestApiLinksHTML() {
+    return this.coarRestApiUrl.pipe(
+      // transform the data into HTML
+      map((urls) => {
+        return urls.map(url => `
+          ${url}
+        `).join(',');
+      })
+    );
+  }
+}
diff --git a/src/app/core/coar-notify/notify-info/notify-info.guard.spec.ts b/src/app/core/coar-notify/notify-info/notify-info.guard.spec.ts
new file mode 100644
index 0000000000..81ac0db8d8
--- /dev/null
+++ b/src/app/core/coar-notify/notify-info/notify-info.guard.spec.ts
@@ -0,0 +1,49 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NotifyInfoGuard } from './notify-info.guard';
+import { Router } from '@angular/router';
+import { NotifyInfoService } from './notify-info.service';
+import { of } from 'rxjs';
+
+describe('NotifyInfoGuard', () => {
+  let guard: NotifyInfoGuard;
+  let notifyInfoServiceSpy: any;
+  let router: any;
+
+  beforeEach(() => {
+    notifyInfoServiceSpy = jasmine.createSpyObj('NotifyInfoService', ['isCoarConfigEnabled']);
+    router = jasmine.createSpyObj('Router', ['parseUrl']);
+    TestBed.configureTestingModule({
+      providers: [
+        NotifyInfoGuard,
+        { provide: NotifyInfoService, useValue: notifyInfoServiceSpy},
+        { provide: Router, useValue: router}
+      ]
+    });
+    guard = TestBed.inject(NotifyInfoGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+
+  it('should return true if COAR config is enabled', (done) => {
+    notifyInfoServiceSpy.isCoarConfigEnabled.and.returnValue(of(true));
+
+    guard.canActivate(null, null).subscribe((result) => {
+      expect(result).toBe(true);
+      done();
+    });
+  });
+
+  it('should call parseUrl method of Router if COAR config is not enabled', (done) => {
+    notifyInfoServiceSpy.isCoarConfigEnabled.and.returnValue(of(false));
+    router.parseUrl.and.returnValue(of('/404'));
+
+    guard.canActivate(null, null).subscribe(() => {
+      expect(router.parseUrl).toHaveBeenCalledWith('/404');
+      done();
+    });
+  });
+
+});
diff --git a/src/app/core/coar-notify/notify-info/notify-info.guard.ts b/src/app/core/coar-notify/notify-info/notify-info.guard.ts
new file mode 100644
index 0000000000..7af0821618
--- /dev/null
+++ b/src/app/core/coar-notify/notify-info/notify-info.guard.ts
@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { NotifyInfoService } from './notify-info.service';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NotifyInfoGuard implements CanActivate {
+    constructor(
+        private notifyInfoService: NotifyInfoService,
+        private router: Router
+    ) {}
+
+    canActivate(
+        route: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot
+    ): Observable {
+        return this.notifyInfoService.isCoarConfigEnabled().pipe(
+            map(coarLdnEnabled => {
+                if (coarLdnEnabled) {
+                    return true;
+                } else {
+                    return this.router.parseUrl('/404');
+                }
+            })
+        );
+    }
+}
diff --git a/src/app/core/coar-notify/notify-info/notify-info.service.spec.ts b/src/app/core/coar-notify/notify-info/notify-info.service.spec.ts
new file mode 100644
index 0000000000..6d51c33c99
--- /dev/null
+++ b/src/app/core/coar-notify/notify-info/notify-info.service.spec.ts
@@ -0,0 +1,56 @@
+import { TestBed } from '@angular/core/testing';
+import { NotifyInfoService } from './notify-info.service';
+import { ConfigurationDataService } from '../../data/configuration-data.service';
+import { of } from 'rxjs';
+import { AuthorizationDataService } from '../../data/feature-authorization/authorization-data.service';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+
+describe('NotifyInfoService', () => {
+  let service: NotifyInfoService;
+  let configurationDataService: any;
+  let authorizationDataService: any;
+    beforeEach(() => {
+      authorizationDataService = {
+        isAuthorized: jasmine.createSpy('isAuthorized').and.returnValue(of(true)),
+      };
+      configurationDataService = {
+        findByPropertyName: jasmine.createSpy('findByPropertyName').and.returnValue(of({})),
+      };
+    TestBed.configureTestingModule({
+      providers: [
+        NotifyInfoService,
+        { provide: ConfigurationDataService, useValue: configurationDataService },
+        { provide: AuthorizationDataService, useValue: authorizationDataService }
+      ]
+    });
+    service = TestBed.inject(NotifyInfoService);
+    authorizationDataService = TestBed.inject(AuthorizationDataService);
+    configurationDataService = TestBed.inject(ConfigurationDataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should retrieve and map coar configuration', (done: DoneFn) => {
+    (configurationDataService.findByPropertyName as jasmine.Spy).and.returnValue(createSuccessfulRemoteDataObject$({ values: ['true'] }));
+
+    service.isCoarConfigEnabled().subscribe((result) => {
+      expect(result).toBe(true);
+      done();
+    });
+  });
+
+  it('should retrieve and map LDN local inbox URLs', (done: DoneFn) => {
+    (configurationDataService.findByPropertyName as jasmine.Spy).and.returnValue(createSuccessfulRemoteDataObject$({ values: ['inbox1', 'inbox2'] }));
+
+    service.getCoarLdnLocalInboxUrls().subscribe((result) => {
+      expect(result).toEqual(['inbox1', 'inbox2']);
+      done();
+    });
+  });
+
+  it('should return the inbox relation link', () => {
+    expect(service.getInboxRelationLink()).toBe('http://www.w3.org/ns/ldp#inbox');
+  });
+});
diff --git a/src/app/core/coar-notify/notify-info/notify-info.service.ts b/src/app/core/coar-notify/notify-info/notify-info.service.ts
new file mode 100644
index 0000000000..a15c64237c
--- /dev/null
+++ b/src/app/core/coar-notify/notify-info/notify-info.service.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { getFirstSucceededRemoteData, getRemoteDataPayload } from '../../shared/operators';
+import { ConfigurationDataService } from '../../data/configuration-data.service';
+import { map, Observable } from 'rxjs';
+import { ConfigurationProperty } from '../../shared/configuration-property.model';
+import { AuthorizationDataService } from '../../data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../data/feature-authorization/feature-id';
+
+/**
+ * Service to check COAR availability and LDN services information for the COAR Notify functionalities
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class NotifyInfoService {
+
+    /**
+     *  The relation link for the inbox
+     */
+    private _inboxRelationLink = 'http://www.w3.org/ns/ldp#inbox';
+
+    constructor(
+        private configService: ConfigurationDataService,
+        protected authorizationService: AuthorizationDataService,
+    ) {}
+
+    isCoarConfigEnabled(): Observable {
+        return this.authorizationService.isAuthorized(FeatureID.CoarNotifyEnabled);
+    }
+
+    /**
+     * Get the url of the local inbox from the REST configuration
+     * @returns the url of the local inbox
+     */
+    getCoarLdnLocalInboxUrls(): Observable {
+      return this.configService.findByPropertyName('ldn.notify.inbox').pipe(
+        getFirstSucceededRemoteData(),
+        getRemoteDataPayload(),
+        map((response: ConfigurationProperty) => {
+          return response.values;
+        })
+      );
+    }
+
+    /**
+     * Method to get the relation link for the inbox
+     * @returns the relation link for the inbox
+     */
+    getInboxRelationLink(): string {
+      return this._inboxRelationLink;
+    }
+}
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 9bcc6abb1d..c4824c604b 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -1,17 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import {
-  ModuleWithProviders,
-  NgModule,
-  Optional,
-  SkipSelf,
-} from '@angular/core';
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
 import { EffectsModule } from '@ngrx/effects';
-import {
-  Action,
-  StoreConfig,
-  StoreModule,
-} from '@ngrx/store';
+import { Action, StoreConfig, StoreModule } from '@ngrx/store';
 
 import { environment } from '../../environments/environment';
 import { storeModuleConfig } from '../app.reducer';
@@ -23,11 +14,7 @@ import { isNotEmpty } from '../shared/empty.util';
 import { HostWindowService } from '../shared/host-window.service';
 import { MenuService } from '../shared/menu/menu.service';
 import { EndpointMockingRestService } from '../shared/mocks/dspace-rest/endpoint-mocking-rest.service';
-import {
-  MOCK_RESPONSE_MAP,
-  mockResponseMap,
-  ResponseMapMock,
-} from '../shared/mocks/dspace-rest/mocks/response-map.mock';
+import { MOCK_RESPONSE_MAP, mockResponseMap, ResponseMapMock } from '../shared/mocks/dspace-rest/mocks/response-map.mock';
 import { NotificationsService } from '../shared/notifications/notifications.service';
 import { AccessStatusObject } from '../shared/object-collection/shared/badges/access-status-badge/access-status.model';
 import { IdentifierData } from '../shared/object-list/identifier-data/identifier-data.model';
@@ -124,10 +111,7 @@ import { ResourcePolicyDataService } from './resource-policy/resource-policy-dat
 import { RoleService } from './roles/role.service';
 import { LinkHeadService } from './services/link-head.service';
 import { ServerResponseService } from './services/server-response.service';
-import {
-  NativeWindowFactory,
-  NativeWindowService,
-} from './services/window.service';
+import { NativeWindowFactory, NativeWindowService } from './services/window.service';
 import { Authorization } from './shared/authorization.model';
 import { Bitstream } from './shared/bitstream.model';
 import { BitstreamFormat } from './shared/bitstream-format.model';
@@ -192,6 +176,19 @@ import { TaskObject } from './tasks/models/task-object.model';
 import { WorkflowAction } from './tasks/models/workflow-action-object.model';
 import { PoolTaskDataService } from './tasks/pool-task-data.service';
 import { TaskResponseParsingService } from './tasks/task-response-parsing.service';
+import { CorrectionTypeDataService } from './submission/correctiontype-data.service';
+import { LdnServicesService } from '../admin/admin-ldn-services/ldn-services-data/ldn-services-data.service';
+import { LdnItemfiltersService } from '../admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service';
+import { CoarNotifyConfigDataService } from '../submission/sections/section-coar-notify/coar-notify-config-data.service';
+import { NotifyRequestsStatusDataService } from './data/notify-services-status-data.service';
+import { SuggestionTarget } from './notifications/models/suggestion-target.model';
+import { SuggestionSource } from './notifications/models/suggestion-source.model';
+import { NotifyRequestsStatus } from '../item-page/simple/notify-requests-status/notify-requests-status.model';
+import { LdnService } from '../admin/admin-ldn-services/ldn-services-model/ldn-services.model';
+import { Itemfilter } from '../admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters';
+import { SubmissionCoarNotifyConfig } from '../submission/sections/section-coar-notify/submission-coar-notify.config';
+import { AdminNotifyMessage } from '../admin/admin-notify-dashboard/models/admin-notify-message.model';
+import { SubmissionDuplicateDataService } from './submission/submission-duplicate-data.service';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -228,6 +225,7 @@ const PROVIDERS = [
   HALEndpointService,
   HostWindowService,
   ItemDataService,
+  SubmissionDuplicateDataService,
   MetadataService,
   ObjectCacheService,
   PaginationComponentOptions,
@@ -315,6 +313,11 @@ const PROVIDERS = [
   OrcidQueueDataService,
   OrcidHistoryDataService,
   SupervisionOrderDataService,
+  CorrectionTypeDataService,
+  LdnServicesService,
+  LdnItemfiltersService,
+  CoarNotifyConfigDataService,
+  NotifyRequestsStatusDataService
 ];
 
 /**
@@ -394,6 +397,13 @@ export const models =
     Subscription,
     ItemRequest,
     BulkAccessConditionOptions,
+    SuggestionTarget,
+    SuggestionSource,
+    LdnService,
+    Itemfilter,
+    SubmissionCoarNotifyConfig,
+    NotifyRequestsStatus,
+    AdminNotifyMessage
   ];
 
 @NgModule({
diff --git a/src/app/core/data/base/base-data.service.spec.ts b/src/app/core/data/base/base-data.service.spec.ts
index 689d669152..80738a02cf 100644
--- a/src/app/core/data/base/base-data.service.spec.ts
+++ b/src/app/core/data/base/base-data.service.spec.ts
@@ -5,23 +5,13 @@
  *
  * http://www.dspace.org/license/
  */
-import {
-  fakeAsync,
-  tick,
-} from '@angular/core/testing';
-import {
-  combineLatest as observableCombineLatest,
-  Observable,
-  of as observableOf,
-} from 'rxjs';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
 import { getMockRemoteDataBuildService } from '../../../shared/mocks/remote-data-build.service.mock';
 import { getMockRequestService } from '../../../shared/mocks/request.service.mock';
-import {
-  createFailedRemoteDataObject$,
-  createSuccessfulRemoteDataObject$,
-} from '../../../shared/remote-data.utils';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { HALEndpointServiceStub } from '../../../shared/testing/hal-endpoint-service.stub';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
@@ -32,6 +22,10 @@ import { RemoteData } from '../remote-data';
 import { RequestService } from '../request.service';
 import { RequestEntryState } from '../request-entry-state.model';
 import { BaseDataService } from './base-data.service';
+import { ObjectCacheServiceStub } from '../../../shared/testing/object-cache-service.stub';
+import { ObjectCacheEntry } from '../../cache/object-cache.reducer';
+import { HALLink } from '../../shared/hal-link.model';
+import { createPaginatedList } from '../../../shared/testing/utils.test';
 
 const endpoint = 'https://rest.api/core';
 
@@ -57,34 +51,18 @@ describe('BaseDataService', () => {
   let requestService;
   let halService;
   let rdbService;
-  let objectCache;
+  let objectCache: ObjectCacheServiceStub;
   let selfLink;
   let linksToFollow;
   let testScheduler;
-  let remoteDataMocks;
+  let remoteDataMocks: { [responseType: string]: RemoteData };
+  let remoteDataPageMocks: { [responseType: string]: RemoteData };
 
   function initTestService(): TestService {
     requestService = getMockRequestService();
     halService = new HALEndpointServiceStub('url') as any;
     rdbService = getMockRemoteDataBuildService();
-    objectCache = {
-
-      addPatch: () => {
-        /* empty */
-      },
-      getObjectBySelfLink: () => {
-        /* empty */
-      },
-      getByHref: () => {
-        /* empty */
-      },
-      addDependency: () => {
-        /* empty */
-      },
-      removeDependents: () => {
-        /* empty */
-      },
-    } as any;
+    objectCache = new ObjectCacheServiceStub();
     selfLink = 'https://rest.api/endpoint/1698f1d3-be98-4c51-9fd8-6bfedcbd59b7';
     linksToFollow = [
       followLink('a'),
@@ -99,7 +77,27 @@ describe('BaseDataService', () => {
 
     const timeStamp = new Date().getTime();
     const msToLive = 15 * 60 * 1000;
-    const payload = { foo: 'bar' };
+    const payload = {
+      foo: 'bar',
+      followLink1: {},
+      followLink2: {},
+      _links: {
+        self: Object.assign(new HALLink(), {
+          href: 'self-test-link',
+        }),
+        followLink1: Object.assign(new HALLink(), {
+          href: 'follow-link-1',
+        }),
+        followLink2: [
+          Object.assign(new HALLink(), {
+            href: 'follow-link-2-1',
+          }),
+          Object.assign(new HALLink(), {
+            href: 'follow-link-2-2',
+          }),
+        ],
+      }
+    };
     const statusCodeSuccess = 200;
     const statusCodeError = 404;
     const errorMessage = 'not found';
@@ -112,11 +110,20 @@ describe('BaseDataService', () => {
       Error: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.Error, errorMessage, undefined, statusCodeError),
       ErrorStale: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.ErrorStale, errorMessage, undefined, statusCodeError),
     };
+    remoteDataPageMocks = {
+      RequestPending: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.RequestPending, undefined, undefined, undefined),
+      ResponsePending: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.ResponsePending, undefined, undefined, undefined),
+      ResponsePendingStale: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.ResponsePendingStale, undefined, undefined, undefined),
+      Success: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.Success, undefined, createPaginatedList([payload]), statusCodeSuccess),
+      SuccessStale: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.SuccessStale, undefined, createPaginatedList([payload]), statusCodeSuccess),
+      Error: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.Error, errorMessage, undefined, statusCodeError),
+      ErrorStale: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.ErrorStale, errorMessage, undefined, statusCodeError),
+    };
 
     return new TestService(
       requestService,
       rdbService,
-      objectCache,
+      objectCache as ObjectCacheService,
       halService,
     );
   }
@@ -391,6 +398,27 @@ describe('BaseDataService', () => {
 
     });
 
+    it('should link all the followLinks of a cached object by calling addDependency', () => {
+      spyOn(objectCache, 'addDependency').and.callThrough();
+      testScheduler.run(({ cold, expectObservable, flush }) => {
+        spyOn(rdbService, 'buildSingle').and.returnValue(cold('a-b-c-d', {
+          a: remoteDataMocks.Success,
+          b: remoteDataMocks.RequestPending,
+          c: remoteDataMocks.ResponsePending,
+          d: remoteDataMocks.Success,
+        }));
+        const expected = '--b-c-d';
+        const values = {
+          b: remoteDataMocks.RequestPending,
+          c: remoteDataMocks.ResponsePending,
+          d: remoteDataMocks.Success,
+        };
+
+        expectObservable(service.findByHref(selfLink, false, false, ...linksToFollow)).toBe(expected, values);
+        flush();
+        expect(objectCache.addDependency).toHaveBeenCalledTimes(3);
+      });
+    });
   });
 
   describe(`findListByHref`, () => {
@@ -403,8 +431,8 @@ describe('BaseDataService', () => {
     it(`should call buildHrefFromFindOptions with href and linksToFollow`, () => {
       testScheduler.run(({ cold }) => {
         spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
-        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
-        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.Success }));
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataPageMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataPageMocks.Success }));
 
         service.findListByHref(selfLink, findListOptions, true, true, ...linksToFollow);
         expect(service.buildHrefFromFindOptions).toHaveBeenCalledWith(selfLink, findListOptions, [], ...linksToFollow);
@@ -414,8 +442,8 @@ describe('BaseDataService', () => {
     it(`should call createAndSendGetRequest with the result from buildHrefFromFindOptions and useCachedVersionIfAvailable`, () => {
       testScheduler.run(({ cold, expectObservable }) => {
         spyOn(service, 'buildHrefFromFindOptions').and.returnValue('bingo!');
-        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
-        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.Success }));
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataPageMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataPageMocks.Success }));
 
         service.findListByHref(selfLink, findListOptions, true, true, ...linksToFollow);
         expect((service as any).createAndSendGetRequest).toHaveBeenCalledWith(jasmine.anything(), true);
@@ -430,8 +458,8 @@ describe('BaseDataService', () => {
     it(`should call rdbService.buildList with the result from buildHrefFromFindOptions and linksToFollow`, () => {
       testScheduler.run(({ cold, expectObservable }) => {
         spyOn(service, 'buildHrefFromFindOptions').and.returnValue('bingo!');
-        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
-        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.Success }));
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataPageMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataPageMocks.Success }));
 
         service.findListByHref(selfLink, findListOptions, true, true, ...linksToFollow);
         expect(rdbService.buildList).toHaveBeenCalledWith(jasmine.anything() as any, ...linksToFollow);
@@ -442,12 +470,12 @@ describe('BaseDataService', () => {
     it(`should call reRequestStaleRemoteData with reRequestOnStale and the exact same findListByHref call as a callback`, () => {
       testScheduler.run(({ cold, expectObservable }) => {
         spyOn(service, 'buildHrefFromFindOptions').and.returnValue('bingo!');
-        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.SuccessStale }));
-        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.SuccessStale }));
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataPageMocks.SuccessStale }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataPageMocks.SuccessStale }));
 
         service.findListByHref(selfLink, findListOptions, true, true, ...linksToFollow);
         expect((service as any).reRequestStaleRemoteData.calls.argsFor(0)[0]).toBeTrue();
-        spyOn(service, 'findListByHref').and.returnValue(cold('a', { a: remoteDataMocks.SuccessStale }));
+        spyOn(service, 'findListByHref').and.returnValue(cold('a', { a: remoteDataPageMocks.SuccessStale }));
         // prove that the spy we just added hasn't been called yet
         expect(service.findListByHref).not.toHaveBeenCalled();
         // call the callback passed to reRequestStaleRemoteData
@@ -462,7 +490,7 @@ describe('BaseDataService', () => {
     it(`should return a the output from reRequestStaleRemoteData`, () => {
       testScheduler.run(({ cold, expectObservable }) => {
         spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
-        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataPageMocks.Success }));
         spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: 'bingo!' }));
         const expected = 'a';
         const values = {
@@ -482,19 +510,19 @@ describe('BaseDataService', () => {
       it(`should emit a cached completed RemoteData immediately, and keep emitting if it gets rerequested`, () => {
         testScheduler.run(({ cold, expectObservable }) => {
           spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e', {
-            a: remoteDataMocks.Success,
-            b: remoteDataMocks.RequestPending,
-            c: remoteDataMocks.ResponsePending,
-            d: remoteDataMocks.Success,
-            e: remoteDataMocks.SuccessStale,
+            a: remoteDataPageMocks.Success,
+            b: remoteDataPageMocks.RequestPending,
+            c: remoteDataPageMocks.ResponsePending,
+            d: remoteDataPageMocks.Success,
+            e: remoteDataPageMocks.SuccessStale,
           }));
           const expected = 'a-b-c-d-e';
           const values = {
-            a: remoteDataMocks.Success,
-            b: remoteDataMocks.RequestPending,
-            c: remoteDataMocks.ResponsePending,
-            d: remoteDataMocks.Success,
-            e: remoteDataMocks.SuccessStale,
+            a: remoteDataPageMocks.Success,
+            b: remoteDataPageMocks.RequestPending,
+            c: remoteDataPageMocks.ResponsePending,
+            d: remoteDataPageMocks.Success,
+            e: remoteDataPageMocks.SuccessStale,
           };
 
           expectObservable(service.findListByHref(selfLink, findListOptions, true, true, ...linksToFollow)).toBe(expected, values);
@@ -504,20 +532,20 @@ describe('BaseDataService', () => {
       it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
         testScheduler.run(({ cold, expectObservable }) => {
           spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e-f-g', {
-            a: remoteDataMocks.ResponsePendingStale,
-            b: remoteDataMocks.SuccessStale,
-            c: remoteDataMocks.ErrorStale,
-            d: remoteDataMocks.RequestPending,
-            e: remoteDataMocks.ResponsePending,
-            f: remoteDataMocks.Success,
-            g: remoteDataMocks.SuccessStale,
+            a: remoteDataPageMocks.ResponsePendingStale,
+            b: remoteDataPageMocks.SuccessStale,
+            c: remoteDataPageMocks.ErrorStale,
+            d: remoteDataPageMocks.RequestPending,
+            e: remoteDataPageMocks.ResponsePending,
+            f: remoteDataPageMocks.Success,
+            g: remoteDataPageMocks.SuccessStale,
           }));
           const expected = '------d-e-f-g';
           const values = {
-            d: remoteDataMocks.RequestPending,
-            e: remoteDataMocks.ResponsePending,
-            f: remoteDataMocks.Success,
-            g: remoteDataMocks.SuccessStale,
+            d: remoteDataPageMocks.RequestPending,
+            e: remoteDataPageMocks.ResponsePending,
+            f: remoteDataPageMocks.Success,
+            g: remoteDataPageMocks.SuccessStale,
           };
 
           expectObservable(service.findListByHref(selfLink, findListOptions, true, true, ...linksToFollow)).toBe(expected, values);
@@ -536,18 +564,18 @@ describe('BaseDataService', () => {
       it(`should not emit a cached completed RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
         testScheduler.run(({ cold, expectObservable }) => {
           spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e', {
-            a: remoteDataMocks.Success,
-            b: remoteDataMocks.RequestPending,
-            c: remoteDataMocks.ResponsePending,
-            d: remoteDataMocks.Success,
-            e: remoteDataMocks.SuccessStale,
+            a: remoteDataPageMocks.Success,
+            b: remoteDataPageMocks.RequestPending,
+            c: remoteDataPageMocks.ResponsePending,
+            d: remoteDataPageMocks.Success,
+            e: remoteDataPageMocks.SuccessStale,
           }));
           const expected = '--b-c-d-e';
           const values = {
-            b: remoteDataMocks.RequestPending,
-            c: remoteDataMocks.ResponsePending,
-            d: remoteDataMocks.Success,
-            e: remoteDataMocks.SuccessStale,
+            b: remoteDataPageMocks.RequestPending,
+            c: remoteDataPageMocks.ResponsePending,
+            d: remoteDataPageMocks.Success,
+            e: remoteDataPageMocks.SuccessStale,
           };
 
           expectObservable(service.findListByHref(selfLink, findListOptions, false, true, ...linksToFollow)).toBe(expected, values);
@@ -557,20 +585,20 @@ describe('BaseDataService', () => {
       it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
         testScheduler.run(({ cold, expectObservable }) => {
           spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e-f-g', {
-            a: remoteDataMocks.ResponsePendingStale,
-            b: remoteDataMocks.SuccessStale,
-            c: remoteDataMocks.ErrorStale,
-            d: remoteDataMocks.RequestPending,
-            e: remoteDataMocks.ResponsePending,
-            f: remoteDataMocks.Success,
-            g: remoteDataMocks.SuccessStale,
+            a: remoteDataPageMocks.ResponsePendingStale,
+            b: remoteDataPageMocks.SuccessStale,
+            c: remoteDataPageMocks.ErrorStale,
+            d: remoteDataPageMocks.RequestPending,
+            e: remoteDataPageMocks.ResponsePending,
+            f: remoteDataPageMocks.Success,
+            g: remoteDataPageMocks.SuccessStale,
           }));
           const expected = '------d-e-f-g';
           const values = {
-            d: remoteDataMocks.RequestPending,
-            e: remoteDataMocks.ResponsePending,
-            f: remoteDataMocks.Success,
-            g: remoteDataMocks.SuccessStale,
+            d: remoteDataPageMocks.RequestPending,
+            e: remoteDataPageMocks.ResponsePending,
+            f: remoteDataPageMocks.Success,
+            g: remoteDataPageMocks.SuccessStale,
           };
 
 
@@ -578,6 +606,27 @@ describe('BaseDataService', () => {
         });
       });
 
+      it('should link all the followLinks of the cached objects by calling addDependency', () => {
+        spyOn(objectCache, 'addDependency').and.callThrough();
+        testScheduler.run(({ cold, expectObservable, flush }) => {
+          spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d', {
+            a: remoteDataPageMocks.SuccessStale,
+            b: remoteDataPageMocks.RequestPending,
+            c: remoteDataPageMocks.ResponsePending,
+            d: remoteDataPageMocks.Success,
+          }));
+          const expected = '--b-c-d';
+          const values = {
+            b: remoteDataPageMocks.RequestPending,
+            c: remoteDataPageMocks.ResponsePending,
+            d: remoteDataPageMocks.Success,
+          };
+
+          expectObservable(service.findListByHref(selfLink, findListOptions, false, false, ...linksToFollow)).toBe(expected, values);
+          flush();
+          expect(objectCache.addDependency).toHaveBeenCalledTimes(3);
+        });
+      });
     });
   });
 
@@ -588,7 +637,7 @@ describe('BaseDataService', () => {
       getByHrefSpy = spyOn(objectCache, 'getByHref').and.returnValue(observableOf({
         requestUUIDs: ['request1', 'request2', 'request3'],
         dependentRequestUUIDs: ['request4', 'request5'],
-      }));
+      } as ObjectCacheEntry));
 
     });
 
diff --git a/src/app/core/data/base/base-data.service.ts b/src/app/core/data/base/base-data.service.ts
index 27ac347578..f6e33b2325 100644
--- a/src/app/core/data/base/base-data.service.ts
+++ b/src/app/core/data/base/base-data.service.ts
@@ -6,27 +6,10 @@
  * http://www.dspace.org/license/
  */
 
-import {
-  AsyncSubject,
-  from as observableFrom,
-  Observable,
-  of as observableOf,
-} from 'rxjs';
-import {
-  map,
-  mergeMap,
-  skipWhile,
-  switchMap,
-  take,
-  tap,
-  toArray,
-} from 'rxjs/operators';
+import { AsyncSubject, from as observableFrom, Observable, of as observableOf } from 'rxjs';
+import { map, mergeMap, skipWhile, switchMap, take, tap, toArray } from 'rxjs/operators';
 
-import {
-  hasValue,
-  isNotEmpty,
-  isNotEmptyOperator,
-} from '../../../shared/empty.util';
+import { hasValue, isNotEmpty, isNotEmptyOperator } from '../../../shared/empty.util';
 import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import { CacheableObject } from '../../cache/cacheable-object.model';
@@ -42,16 +25,17 @@ import { RemoteData } from '../remote-data';
 import { GetRequest } from '../request.models';
 import { RequestService } from '../request.service';
 import { HALDataService } from './hal-data-service.interface';
+import { HALLink } from '../../shared/hal-link.model';
 
 export const EMBED_SEPARATOR = '%2F';
 /**
  * Common functionality for data services.
  * Specific functionality that not all services would need
- * is implemented in "DataService feature" classes (e.g. {@link CreateData}
+ * is implemented in "UpdateDataServiceImpl feature" classes (e.g. {@link CreateData}
  *
- * All DataService (or DataService feature) classes must
+ * All UpdateDataServiceImpl (or UpdateDataServiceImpl feature) classes must
  *   - extend this class (or {@link IdentifiableDataService})
- *   - implement any DataService features it requires in order to forward calls to it
+ *   - implement any UpdateDataServiceImpl features it requires in order to forward calls to it
  *
  * ```
  * export class SomeDataService extends BaseDataService implements CreateData, SearchData {
@@ -286,7 +270,7 @@ export class BaseDataService implements HALDataServic
 
     this.createAndSendGetRequest(requestHref$, useCachedVersionIfAvailable);
 
-    return this.rdbService.buildSingle(requestHref$, ...linksToFollow).pipe(
+    const response$: Observable> = this.rdbService.buildSingle(requestHref$, ...linksToFollow).pipe(
       // This skip ensures that if a stale object is present in the cache when you do a
       // call it isn't immediately returned, but we wait until the remote data for the new request
       // is created. If useCachedVersionIfAvailable is false it also ensures you don't get a
@@ -295,6 +279,25 @@ export class BaseDataService implements HALDataServic
       this.reRequestStaleRemoteData(reRequestOnStale, () =>
         this.findByHref(href$, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow)),
     );
+    return response$.pipe(
+      // Ensure all followLinks from the cached object are automatically invalidated when invalidating the cached object
+      tap((remoteDataObject: RemoteData) => {
+        if (hasValue(remoteDataObject?.payload?._links)) {
+          for (const followLinkName of Object.keys(remoteDataObject.payload._links)) {
+            // only add the followLinks if they are embedded
+            if (hasValue(remoteDataObject.payload[followLinkName]) && followLinkName !== 'self') {
+              // followLink can be either an individual HALLink or a HALLink[]
+              const followLinksList: HALLink[] = [].concat(remoteDataObject.payload._links[followLinkName]);
+              for (const individualFollowLink of followLinksList) {
+                if (hasValue(individualFollowLink?.href)) {
+                  this.addDependency(response$, individualFollowLink.href);
+                }
+              }
+            }
+          }
+        }
+      }),
+    );
   }
 
   /**
@@ -320,7 +323,7 @@ export class BaseDataService implements HALDataServic
 
     this.createAndSendGetRequest(requestHref$, useCachedVersionIfAvailable);
 
-    return this.rdbService.buildList(requestHref$, ...linksToFollow).pipe(
+    const response$: Observable>> = this.rdbService.buildList(requestHref$, ...linksToFollow).pipe(
       // This skip ensures that if a stale object is present in the cache when you do a
       // call it isn't immediately returned, but we wait until the remote data for the new request
       // is created. If useCachedVersionIfAvailable is false it also ensures you don't get a
@@ -329,6 +332,29 @@ export class BaseDataService implements HALDataServic
       this.reRequestStaleRemoteData(reRequestOnStale, () =>
         this.findListByHref(href$, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow)),
     );
+    return response$.pipe(
+      // Ensure all followLinks from the cached object are automatically invalidated when invalidating the cached object
+      tap((remoteDataObject: RemoteData>) => {
+        if (hasValue(remoteDataObject?.payload?.page)) {
+          for (const object of remoteDataObject.payload.page) {
+            if (hasValue(object?._links)) {
+              for (const followLinkName of Object.keys(object._links)) {
+                // only add the followLinks if they are embedded
+                if (hasValue(object[followLinkName]) && followLinkName !== 'self') {
+                  // followLink can be either an individual HALLink or a HALLink[]
+                  const followLinksList: HALLink[] = [].concat(object._links[followLinkName]);
+                  for (const individualFollowLink of followLinksList) {
+                    if (hasValue(individualFollowLink?.href)) {
+                      this.addDependency(response$, individualFollowLink.href);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }),
+    );
   }
 
   /**
@@ -403,7 +429,7 @@ export class BaseDataService implements HALDataServic
 
   /**
    * Return the links to traverse from the root of the api to the
-   * endpoint this DataService represents
+   * endpoint this UpdateDataServiceImpl represents
    *
    * e.g. if the api root links to 'foo', and the endpoint at 'foo'
    * links to 'bar' the linkPath for the BarDataService would be
diff --git a/src/app/core/data/base/create-data.ts b/src/app/core/data/base/create-data.ts
index daf69374b6..5e84b65402 100644
--- a/src/app/core/data/base/create-data.ts
+++ b/src/app/core/data/base/create-data.ts
@@ -6,17 +6,9 @@
  * http://www.dspace.org/license/
  */
 import { Observable } from 'rxjs';
-import {
-  distinctUntilChanged,
-  map,
-  take,
-  takeWhile,
-} from 'rxjs/operators';
+import { distinctUntilChanged, map, take, takeWhile } from 'rxjs/operators';
 
-import {
-  hasValue,
-  isNotEmptyOperator,
-} from '../../../shared/empty.util';
+import { hasValue, isNotEmptyOperator } from '../../../shared/empty.util';
 import { NotificationOptions } from '../../../shared/notifications/models/notification-options.model';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { getClassForType } from '../../cache/builders/build-decorators';
@@ -46,7 +38,7 @@ export interface CreateData {
 }
 
 /**
- * A DataService feature to create objects.
+ * A UpdateDataServiceImpl feature to create objects.
  *
  * Concrete data services can use this feature by implementing {@link CreateData}
  * and delegating its method to an inner instance of this class.
diff --git a/src/app/core/data/base/find-all-data.ts b/src/app/core/data/base/find-all-data.ts
index 7a5526c4ba..78d391676a 100644
--- a/src/app/core/data/base/find-all-data.ts
+++ b/src/app/core/data/base/find-all-data.ts
@@ -7,11 +7,7 @@
  */
 
 import { Observable } from 'rxjs';
-import {
-  distinctUntilChanged,
-  filter,
-  map,
-} from 'rxjs/operators';
+import { distinctUntilChanged, filter, map } from 'rxjs/operators';
 
 import { isNotEmpty } from '../../../shared/empty.util';
 import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
@@ -47,7 +43,7 @@ export interface FindAllData {
 }
 
 /**
- * A DataService feature to list all objects.
+ * A UpdateDataServiceImpl feature to list all objects.
  *
  * Concrete data services can use this feature by implementing {@link FindAllData}
  * and delegating its method to an inner instance of this class.
diff --git a/src/app/core/data/base/patch-data.ts b/src/app/core/data/base/patch-data.ts
index c6cd551716..f17e82e427 100644
--- a/src/app/core/data/base/patch-data.ts
+++ b/src/app/core/data/base/patch-data.ts
@@ -7,35 +7,20 @@
  */
 import { Operation } from 'fast-json-patch';
 import { Observable } from 'rxjs';
-import {
-  find,
-  map,
-  mergeMap,
-} from 'rxjs/operators';
+import { find, map, mergeMap } from 'rxjs/operators';
 
-import {
-  hasNoValue,
-  hasValue,
-  isNotEmpty,
-} from '../../../shared/empty.util';
+import { hasNoValue, hasValue, isNotEmpty } from '../../../shared/empty.util';
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import { CacheableObject } from '../../cache/cacheable-object.model';
 import { ObjectCacheService } from '../../cache/object-cache.service';
 import { HALEndpointService } from '../../shared/hal-endpoint.service';
-import {
-  getFirstSucceededRemoteData,
-  getRemoteDataPayload,
-} from '../../shared/operators';
+import { getFirstSucceededRemoteData, getRemoteDataPayload } from '../../shared/operators';
 import { ChangeAnalyzer } from '../change-analyzer';
 import { RemoteData } from '../remote-data';
 import { PatchRequest } from '../request.models';
 import { RequestService } from '../request.service';
 import { RestRequestMethod } from '../rest-request-method';
-import {
-  ConstructIdEndpoint,
-  IdentifiableDataService,
-} from './identifiable-data.service';
-
+import { ConstructIdEndpoint, IdentifiableDataService } from './identifiable-data.service';
 
 /**
  * Interface for a data service that can patch and update objects.
@@ -69,7 +54,7 @@ export interface PatchData {
 }
 
 /**
- * A DataService feature to patch and update objects.
+ * A UpdateDataServiceImpl feature to patch and update objects.
  *
  * Concrete data services can use this feature by implementing {@link PatchData}
  * and delegating its method to an inner instance of this class.
diff --git a/src/app/core/data/base/put-data.ts b/src/app/core/data/base/put-data.ts
index b1f3ec395c..e9d2b01eb8 100644
--- a/src/app/core/data/base/put-data.ts
+++ b/src/app/core/data/base/put-data.ts
@@ -32,7 +32,7 @@ export interface PutData {
 }
 
 /**
- * A DataService feature to send PUT requests.
+ * A UpdateDataServiceImpl feature to send PUT requests.
  *
  * Concrete data services can use this feature by implementing {@link PutData}
  * and delegating its method to an inner instance of this class.
diff --git a/src/app/core/data/base/search-data.ts b/src/app/core/data/base/search-data.ts
index 2a42283104..5647d1b0eb 100644
--- a/src/app/core/data/base/search-data.ts
+++ b/src/app/core/data/base/search-data.ts
@@ -6,15 +6,9 @@
  * http://www.dspace.org/license/
  */
 import { Observable } from 'rxjs';
-import {
-  filter,
-  map,
-} from 'rxjs/operators';
+import { filter, map } from 'rxjs/operators';
 
-import {
-  hasNoValue,
-  isNotEmpty,
-} from '../../../shared/empty.util';
+import { hasNoValue, isNotEmpty } from '../../../shared/empty.util';
 import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import { CacheableObject } from '../../cache/cacheable-object.model';
@@ -58,7 +52,7 @@ export interface SearchData {
 }
 
 /**
- * A DataService feature to search for objects.
+ * A UpdateDataServiceImpl feature to search for objects.
  *
  * Concrete data services can use this feature by implementing {@link SearchData}
  * and delegating its method to an inner instance of this class.
diff --git a/src/app/core/data/bitstream-data.service.spec.ts b/src/app/core/data/bitstream-data.service.spec.ts
index bab0f963c0..70cc3a40f3 100644
--- a/src/app/core/data/bitstream-data.service.spec.ts
+++ b/src/app/core/data/bitstream-data.service.spec.ts
@@ -1,8 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import {
-  Observable,
-  of as observableOf,
-} from 'rxjs';
+import { Observable, of as observableOf } from 'rxjs';
 
 import { getMockRemoteDataBuildService } from '../../shared/mocks/remote-data-build.service.mock';
 import { getMockRequestService } from '../../shared/mocks/request.service.mock';
@@ -20,14 +17,16 @@ import { testSearchDataImplementation } from './base/search-data.spec';
 import { BitstreamDataService } from './bitstream-data.service';
 import { BitstreamFormatDataService } from './bitstream-format-data.service';
 import { DSOChangeAnalyzer } from './dso-change-analyzer.service';
-import {
-  PatchRequest,
-  PutRequest,
-} from './request.models';
+import { PatchRequest, PutRequest } from './request.models';
 import { RequestService } from './request.service';
-import objectContaining = jasmine.objectContaining;
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { RemoteData } from './remote-data';
+import { BundleDataService } from './bundle-data.service';
+import { ItemMock } from 'src/app/shared/mocks/item.mock';
+import { createFailedRemoteDataObject, createSuccessfulRemoteDataObject } from 'src/app/shared/remote-data.utils';
+import { Bundle } from '../shared/bundle.model';
+import { cold } from 'jasmine-marbles';
+import objectContaining = jasmine.objectContaining;
 
 describe('BitstreamDataService', () => {
   let service: BitstreamDataService;
@@ -36,6 +35,7 @@ describe('BitstreamDataService', () => {
   let halService: HALEndpointService;
   let bitstreamFormatService: BitstreamFormatDataService;
   let rdbService: RemoteDataBuildService;
+  let bundleDataService: BundleDataService;
   const bitstreamFormatHref = 'rest-api/bitstreamformats';
 
   const bitstream1 = Object.assign(new Bitstream(), {
@@ -69,6 +69,7 @@ describe('BitstreamDataService', () => {
     bitstreamFormatService = jasmine.createSpyObj('bistreamFormatService', {
       getBrowseEndpoint: observableOf(bitstreamFormatHref),
     });
+
     rdbService = getMockRemoteDataBuildService();
 
     TestBed.configureTestingModule({
@@ -83,6 +84,7 @@ describe('BitstreamDataService', () => {
       ],
     });
     service = TestBed.inject(BitstreamDataService);
+    bundleDataService = TestBed.inject(BundleDataService);
   });
 
   describe('composition', () => {
@@ -125,6 +127,32 @@ describe('BitstreamDataService', () => {
       expect(service.invalidateByHref).toHaveBeenCalledWith('fake-bitstream1-self');
     });
 
+    describe('findPrimaryBitstreamByItemAndName', () => {
+      it('should return primary bitstream', () => {
+        const exprected$ = cold('(a|)', { a: bitstream1} );
+        const bundle = Object.assign(new Bundle(), {
+          primaryBitstream: observableOf(createSuccessfulRemoteDataObject(bitstream1)),
+        });
+        spyOn(bundleDataService, 'findByItemAndName').and.returnValue(observableOf(createSuccessfulRemoteDataObject(bundle)));
+        expect(service.findPrimaryBitstreamByItemAndName(ItemMock, 'ORIGINAL')).toBeObservable(exprected$);
+      });
+
+      it('should return null if primary bitstream has not be succeeded ', () => {
+        const exprected$ = cold('(a|)', { a: null} );
+        const bundle = Object.assign(new Bundle(), {
+          primaryBitstream: observableOf(createFailedRemoteDataObject()),
+        });
+        spyOn(bundleDataService, 'findByItemAndName').and.returnValue(observableOf(createSuccessfulRemoteDataObject(bundle)));
+        expect(service.findPrimaryBitstreamByItemAndName(ItemMock, 'ORIGINAL')).toBeObservable(exprected$);
+      });
+
+      it('should return EMPTY if nothing where found', () => {
+        const exprected$ = cold('(|)', {} );
+        spyOn(bundleDataService, 'findByItemAndName').and.returnValue(observableOf(createFailedRemoteDataObject()));
+        expect(service.findPrimaryBitstreamByItemAndName(ItemMock, 'ORIGINAL')).toBeObservable(exprected$);
+      });
+    });
+
     it('should be able to delete multiple bitstreams', () => {
       service.removeMultiple([bitstream1, bitstream2]);
 
diff --git a/src/app/core/data/bitstream-data.service.ts b/src/app/core/data/bitstream-data.service.ts
index 7a364ee750..c72d5431d0 100644
--- a/src/app/core/data/bitstream-data.service.ts
+++ b/src/app/core/data/bitstream-data.service.ts
@@ -1,24 +1,9 @@
 import { HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import {
-  Operation,
-  RemoveOperation,
-} from 'fast-json-patch';
-import {
-  combineLatest as observableCombineLatest,
-  Observable,
-} from 'rxjs';
-import {
-  find,
-  map,
-  switchMap,
-  take,
-} from 'rxjs/operators';
-
+import { combineLatest as observableCombineLatest, EMPTY, Observable } from 'rxjs';
+import { find, map, switchMap, take } from 'rxjs/operators';
 import { hasValue } from '../../shared/empty.util';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { RequestParam } from '../cache/models/request-param.model';
 import { ObjectCacheService } from '../cache/object-cache.service';
@@ -33,34 +18,23 @@ import { NoContent } from '../shared/NoContent.model';
 import { PageInfo } from '../shared/page-info.model';
 import { sendRequest } from '../shared/request.operators';
 import { dataService } from './base/data-service.decorator';
-import {
-  DeleteData,
-  DeleteDataImpl,
-} from './base/delete-data';
+import { DeleteData, DeleteDataImpl } from './base/delete-data';
 import { IdentifiableDataService } from './base/identifiable-data.service';
-import {
-  PatchData,
-  PatchDataImpl,
-} from './base/patch-data';
-import {
-  SearchData,
-  SearchDataImpl,
-} from './base/search-data';
+import { PatchData, PatchDataImpl } from './base/patch-data';
+import { SearchData, SearchDataImpl } from './base/search-data';
 import { BitstreamFormatDataService } from './bitstream-format-data.service';
 import { BundleDataService } from './bundle-data.service';
 import { DSOChangeAnalyzer } from './dso-change-analyzer.service';
 import { FindListOptions } from './find-list-options.model';
-import {
-  buildPaginatedList,
-  PaginatedList,
-} from './paginated-list.model';
+import { buildPaginatedList, PaginatedList } from './paginated-list.model';
 import { RemoteData } from './remote-data';
-import {
-  PatchRequest,
-  PutRequest,
-} from './request.models';
+import { PatchRequest, PutRequest } from './request.models';
 import { RequestService } from './request.service';
 import { RestRequestMethod } from './rest-request-method';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { Operation, RemoveOperation } from 'fast-json-patch';
+import { getFirstCompletedRemoteData } from '../shared/operators';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 
 /**
  * A service to retrieve {@link Bitstream}s from the REST API
@@ -228,6 +202,37 @@ export class BitstreamDataService extends IdentifiableDataService imp
     return this.searchData.getSearchByHref(searchMethod, options, ...linksToFollow);
   }
 
+
+  /**
+   *
+   * Make a request to get primary bitstream
+   * in all current use cases, and having it simplifies this method
+   *
+   * @param item                        the {@link Item} the {@link Bundle} is a part of
+   * @param bundleName                  the name of the {@link Bundle} we want to find
+   *                                    {@link Bitstream}s for
+   * @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
+   * @return {Observable}
+   *    Return an observable that constains primary bitstream information or null
+   */
+  public findPrimaryBitstreamByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true): Observable {
+    return this.bundleService.findByItemAndName(item, bundleName, useCachedVersionIfAvailable, reRequestOnStale, followLink('primaryBitstream')).pipe(
+      getFirstCompletedRemoteData(),
+      switchMap((rd: RemoteData) => {
+        if (!rd.hasSucceeded) {
+          return EMPTY;
+        }
+        return rd.payload.primaryBitstream.pipe(
+          getFirstCompletedRemoteData(),
+          map((rdb: RemoteData) => rdb.hasSucceeded ? rdb.payload : null)
+        );
+      })
+    );
+  }
+
   /**
    * Make a new FindListRequest with given search method
    *
diff --git a/src/app/core/data/collection-data.service.spec.ts b/src/app/core/data/collection-data.service.spec.ts
index 9ffba4a933..ebc1bca747 100644
--- a/src/app/core/data/collection-data.service.spec.ts
+++ b/src/app/core/data/collection-data.service.spec.ts
@@ -1,24 +1,13 @@
-import {
-  fakeAsync,
-  tick,
-} from '@angular/core/testing';
+import { fakeAsync, tick } from '@angular/core/testing';
 import { TranslateService } from '@ngx-translate/core';
-import {
-  cold,
-  getTestScheduler,
-  hot,
-} from 'jasmine-marbles';
+import { cold, getTestScheduler, hot } from 'jasmine-marbles';
 import { Observable } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
 import { hasNoValue } from '../../shared/empty.util';
 import { getMockRequestService } from '../../shared/mocks/request.service.mock';
 import { getMockTranslateService } from '../../shared/mocks/translate.service.mock';
-import {
-  createFailedRemoteDataObject$,
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../shared/remote-data.utils';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
@@ -30,14 +19,12 @@ import { testCreateDataImplementation } from './base/create-data.spec';
 import { testDeleteDataImplementation } from './base/delete-data.spec';
 import { testFindAllDataImplementation } from './base/find-all-data.spec';
 import { testPatchDataImplementation } from './base/patch-data.spec';
+import { ObjectCacheServiceStub } from '../../shared/testing/object-cache-service.stub';
 import { testSearchDataImplementation } from './base/search-data.spec';
 import { CollectionDataService } from './collection-data.service';
 import { buildPaginatedList } from './paginated-list.model';
 import { RemoteData } from './remote-data';
-import {
-  ContentSourceRequest,
-  UpdateContentSourceRequest,
-} from './request.models';
+import { ContentSourceRequest, UpdateContentSourceRequest } from './request.models';
 import { RequestService } from './request.service';
 
 const url = 'fake-url';
@@ -50,7 +37,7 @@ describe('CollectionDataService', () => {
   let translate: TranslateService;
   let notificationsService: any;
   let rdbService: RemoteDataBuildService;
-  let objectCache: ObjectCacheService;
+  let objectCache: ObjectCacheServiceStub;
   let halService: any;
 
   const mockCollection1: Collection = Object.assign(new Collection(), {
@@ -220,14 +207,12 @@ describe('CollectionDataService', () => {
       buildFromRequestUUID: buildResponse$,
       buildSingle: buildResponse$,
     });
-    objectCache = jasmine.createSpyObj('objectCache', {
-      remove: jasmine.createSpy('remove'),
-    });
+    objectCache = new ObjectCacheServiceStub();
     halService = new HALEndpointServiceStub(url);
     notificationsService = new NotificationsServiceStub();
     translate = getMockTranslateService();
 
-    service = new CollectionDataService(requestService, rdbService, objectCache, halService, null, notificationsService, null, null, translate);
+    service = new CollectionDataService(requestService, rdbService, objectCache as ObjectCacheService, halService, null, notificationsService, null, null, translate);
   }
 
 });
diff --git a/src/app/core/data/external-source-data.service.spec.ts b/src/app/core/data/external-source-data.service.spec.ts
index 7e4f453ec1..5e643cc549 100644
--- a/src/app/core/data/external-source-data.service.spec.ts
+++ b/src/app/core/data/external-source-data.service.spec.ts
@@ -97,12 +97,6 @@ describe('ExternalSourceService', () => {
         result.pipe(take(1)).subscribe();
         expect(requestService.send).toHaveBeenCalledWith(jasmine.any(GetRequest), false);
       });
-
-      it('should return the entries', () => {
-        result.subscribe((resultRD) => {
-          expect(resultRD.payload.page).toBe(entries);
-        });
-      });
     });
   });
 });
diff --git a/src/app/core/data/feature-authorization/feature-id.ts b/src/app/core/data/feature-authorization/feature-id.ts
index e2943f1762..3d5803b018 100644
--- a/src/app/core/data/feature-authorization/feature-id.ts
+++ b/src/app/core/data/feature-authorization/feature-id.ts
@@ -34,5 +34,7 @@ export enum FeatureID {
   CanEditItem = 'canEditItem',
   CanRegisterDOI = 'canRegisterDOI',
   CanSubscribe = 'canSubscribeDso',
-  CanSeeQA = 'canSeeQA'
+  CoarNotifyEnabled = 'coarNotifyEnabled',
+  CanSeeQA = 'canSeeQA',
+  EPersonForgotPassword = 'epersonForgotPassword'
 }
diff --git a/src/app/core/data/href-only-data.service.ts b/src/app/core/data/href-only-data.service.ts
index f58d292136..83fb431e9b 100644
--- a/src/app/core/data/href-only-data.service.ts
+++ b/src/app/core/data/href-only-data.service.ts
@@ -18,8 +18,8 @@ import { RemoteData } from './remote-data';
 import { RequestService } from './request.service';
 
 /**
- * A DataService with only findByHref methods. Its purpose is to be used for resources that don't
- * need to be retrieved by ID, or have any way to update them, but require a DataService in order
+ * A UpdateDataServiceImpl with only findByHref methods. Its purpose is to be used for resources that don't
+ * need to be retrieved by ID, or have any way to update them, but require a UpdateDataServiceImpl in order
  * for their links to be resolved by the LinkService.
  *
  * an @dataService annotation can be added for any number of these resource types
diff --git a/src/app/core/data/notify-services-status-data.service.spec.ts b/src/app/core/data/notify-services-status-data.service.spec.ts
new file mode 100644
index 0000000000..ade6ae4156
--- /dev/null
+++ b/src/app/core/data/notify-services-status-data.service.spec.ts
@@ -0,0 +1,81 @@
+import { NotifyRequestsStatusDataService } from './notify-services-status-data.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { TestScheduler } from 'rxjs/testing';
+import { RequestService } from './request.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { RequestEntry } from './request-entry.model';
+import { RemoteData } from './remote-data';
+import { RequestEntryState } from './request-entry-state.model';
+import { cold, getTestScheduler } from 'jasmine-marbles';
+import { RestResponse } from '../cache/response.models';
+import { of } from 'rxjs';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { NotifyRequestsStatus } from '../../item-page/simple/notify-requests-status/notify-requests-status.model';
+
+describe('NotifyRequestsStatusDataService test', () => {
+  let scheduler: TestScheduler;
+  let service: NotifyRequestsStatusDataService;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+  let objectCache: ObjectCacheService;
+  let halService: HALEndpointService;
+  let responseCacheEntry: RequestEntry;
+
+  const endpointURL = `https://rest.api/rest/api/suggestiontargets`;
+  const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+
+  const remoteDataMocks = {
+    Success: new RemoteData(null, null, null, RequestEntryState.Success, null, null, 200),
+  };
+
+  function initTestService() {
+    return new NotifyRequestsStatusDataService(
+      requestService,
+      rdbService,
+      objectCache,
+      halService,
+    );
+  }
+
+  beforeEach(() => {
+    scheduler = getTestScheduler();
+
+    objectCache = {} as ObjectCacheService;
+    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 }),
+      buildFromHref: createSuccessfulRemoteDataObject$({test: 'test'})
+    });
+
+
+    service = initTestService();
+  });
+
+  describe('getNotifyRequestsStatus', () => {
+    it('should get notify status', (done) => {
+      service.getNotifyRequestsStatus(requestUUID).subscribe((status) => {
+        expect(halService.getEndpoint).toHaveBeenCalled();
+        expect(requestService.generateRequestId).toHaveBeenCalled();
+        expect(status).toEqual(createSuccessfulRemoteDataObject({test: 'test'} as unknown as NotifyRequestsStatus));
+        done();
+      });
+    });
+  });
+});
diff --git a/src/app/core/data/notify-services-status-data.service.ts b/src/app/core/data/notify-services-status-data.service.ts
new file mode 100644
index 0000000000..5e02982c6a
--- /dev/null
+++ b/src/app/core/data/notify-services-status-data.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { RequestService } from './request.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { IdentifiableDataService } from './base/identifiable-data.service';
+import { dataService } from './base/data-service.decorator';
+import { NotifyRequestsStatus } from '../../item-page/simple/notify-requests-status/notify-requests-status.model';
+import { NOTIFYREQUEST } from '../../item-page/simple/notify-requests-status/notify-requests-status.resource-type';
+import { map, Observable, take } from 'rxjs';
+import { RemoteData } from './remote-data';
+import { GetRequest } from './request.models';
+
+@Injectable()
+@dataService(NOTIFYREQUEST)
+export class NotifyRequestsStatusDataService extends IdentifiableDataService {
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+  ) {
+    super('notifyrequests', requestService, rdbService, objectCache, halService);
+  }
+
+  /**
+   * Retrieves the status of notify requests for a specific item.
+   * @param itemUuid The UUID of the item.
+   * @returns An Observable that emits the remote data containing the notify requests status.
+   */
+  getNotifyRequestsStatus(itemUuid: string): Observable> {
+    const href$ = this.getEndpoint().pipe(
+      map((url: string) => url + '/' + itemUuid ),
+    );
+
+    href$.pipe(take(1)).subscribe((url: string) => {
+      const request = new GetRequest(this.requestService.generateRequestId(), url);
+      this.requestService.send(request, true);
+    });
+
+    return this.rdbService.buildFromHref(href$);
+  }
+}
diff --git a/src/app/core/data/object-updates/object-updates.effects.spec.ts b/src/app/core/data/object-updates/object-updates.effects.spec.ts
index daa0013e8b..5482ee7812 100644
--- a/src/app/core/data/object-updates/object-updates.effects.spec.ts
+++ b/src/app/core/data/object-updates/object-updates.effects.spec.ts
@@ -1,33 +1,15 @@
-import {
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { Observable, Subject } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { provideMockActions } from '@ngrx/effects/testing';
-import {
-  cold,
-  hot,
-} from 'jasmine-marbles';
-import {
-  Observable,
-  Subject,
-} from 'rxjs';
-import { filter } from 'rxjs/operators';
-
-import { hasValue } from '../../../shared/empty.util';
+import { cold, hot } from 'jasmine-marbles';
 import { NoOpAction } from '../../../shared/ngrx/no-op.action';
-import {
-  INotification,
-  Notification,
-} from '../../../shared/notifications/models/notification.model';
+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 {
-  DiscardObjectUpdatesAction,
-  ObjectUpdatesAction,
-  ReinstateObjectUpdatesAction,
-  RemoveFieldUpdateAction,
-  RemoveObjectUpdatesAction,
-} from './object-updates.actions';
+import { DiscardObjectUpdatesAction, ObjectUpdatesAction, ReinstateObjectUpdatesAction, RemoveFieldUpdateAction, RemoveObjectUpdatesAction } from './object-updates.actions';
+import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
+import { Action } from '@ngrx/store';
 import { ObjectUpdatesEffects } from './object-updates.effects';
 
 describe('ObjectUpdatesEffects', () => {
@@ -41,13 +23,7 @@ describe('ObjectUpdatesEffects', () => {
       providers: [
         ObjectUpdatesEffects,
         provideMockActions(() => actions),
-        {
-          provide: NotificationsService,
-          useValue: {
-            remove: (notification) => { /* empty */
-            },
-          },
-        },
+        { provide: NotificationsService, useClass: NotificationsServiceStub },
       ],
     });
   }));
@@ -69,7 +45,6 @@ describe('ObjectUpdatesEffects', () => {
         action = new RemoveObjectUpdatesAction(testURL);
       });
       it('should emit the action from the actionMap\'s value which key matches the action\'s URL', () => {
-        action = new RemoveObjectUpdatesAction(testURL);
         actions = hot('--a-', { a: action });
         (updatesEffects as any).actionMap$[testURL].subscribe((act) => emittedAction = act);
         const expected = cold('--b-', { b: undefined });
@@ -91,14 +66,19 @@ describe('ObjectUpdatesEffects', () => {
           removeAction = new RemoveObjectUpdatesAction(testURL);
         });
         it('should return a RemoveObjectUpdatesAction', () => {
-          actions = hot('a|', { a: new DiscardObjectUpdatesAction(testURL, infoNotification) });
-          updatesEffects.removeAfterDiscardOrReinstateOnUndo$.pipe(
-            filter(((action) => hasValue(action))))
-            .subscribe((t) => {
-              expect(t).toEqual(removeAction);
-            },
-            )
-          ;
+          actions = hot('a', { a: new DiscardObjectUpdatesAction(testURL, infoNotification) });
+
+          // Because we use Subject and not BehaviourSubject we need to subscribe to it beforehand because it does not
+          // keep track of the current state
+          let emittedAction: Action | undefined;
+          updatesEffects.removeAfterDiscardOrReinstateOnUndo$.subscribe((action: Action | NoOpAction) => {
+            emittedAction = action;
+          });
+
+          // This expect ensures that the mapLastActions$ was processed
+          expect(updatesEffects.mapLastActions$).toBeObservable(cold('a', { a: undefined }));
+
+          expect(emittedAction).toEqual(removeAction);
         });
       });
 
@@ -108,12 +88,24 @@ describe('ObjectUpdatesEffects', () => {
           infoNotification.options.timeOut = 10;
         });
         it('should return an action with type NO_ACTION', () => {
-          actions = hot('a', { a: new DiscardObjectUpdatesAction(testURL, infoNotification) });
-          actions = hot('b', { b: new ReinstateObjectUpdatesAction(testURL) });
-          updatesEffects.removeAfterDiscardOrReinstateOnUndo$.subscribe((t) => {
-            expect(t).toEqual(new NoOpAction());
-          },
-          );
+          actions = hot('--(ab)', {
+            a: new DiscardObjectUpdatesAction(testURL, infoNotification),
+            b: new ReinstateObjectUpdatesAction(testURL),
+          });
+
+          // Because we use Subject and not BehaviourSubject we need to subscribe to it beforehand because it does not
+          // keep track of the current state
+          let emittedAction: Action | undefined;
+          updatesEffects.removeAfterDiscardOrReinstateOnUndo$.pipe(
+            take(2)
+          ).subscribe((action: Action | NoOpAction) => {
+            emittedAction = action;
+          });
+
+          // This expect ensures that the mapLastActions$ was processed
+          expect(updatesEffects.mapLastActions$).toBeObservable(cold('--(ab)', { a: undefined, b: undefined }));
+
+          expect(emittedAction).toEqual(new RemoveObjectUpdatesAction(testURL));
         });
       });
 
@@ -123,12 +115,22 @@ describe('ObjectUpdatesEffects', () => {
           infoNotification.options.timeOut = 10;
         });
         it('should return a RemoveObjectUpdatesAction', () => {
-          actions = hot('a', { a: new DiscardObjectUpdatesAction(testURL, infoNotification) });
-          actions = hot('b', { b: new RemoveFieldUpdateAction(testURL, testUUID) });
+          actions = hot('--(ab)', {
+            a: new DiscardObjectUpdatesAction(testURL, infoNotification),
+            b: new RemoveFieldUpdateAction(testURL, testUUID),
+          });
 
-          updatesEffects.removeAfterDiscardOrReinstateOnUndo$.subscribe((t) =>
-            expect(t).toEqual(new RemoveObjectUpdatesAction(testURL)),
-          );
+          // Because we use Subject and not BehaviourSubject we need to subscribe to it beforehand because it does not
+          // keep track of the current state
+          let emittedAction: Action | undefined;
+          updatesEffects.removeAfterDiscardOrReinstateOnUndo$.subscribe((action: Action | NoOpAction) => {
+            emittedAction = action;
+          });
+
+          // This expect ensures that the mapLastActions$ was processed
+          expect(updatesEffects.mapLastActions$).toBeObservable(cold('--(ab)', { a: undefined, b: undefined }));
+
+          expect(emittedAction).toEqual(new RemoveObjectUpdatesAction(testURL));
         });
       });
     });
diff --git a/src/app/core/data/object-updates/object-updates.reducer.spec.ts b/src/app/core/data/object-updates/object-updates.reducer.spec.ts
index 557c1133e6..cf0aeb2946 100644
--- a/src/app/core/data/object-updates/object-updates.reducer.spec.ts
+++ b/src/app/core/data/object-updates/object-updates.reducer.spec.ts
@@ -3,22 +3,8 @@ import * as deepFreeze from 'deep-freeze';
 
 import { Relationship } from '../../shared/item-relationships/relationship.model';
 import { FieldChangeType } from './field-change-type.model';
-import {
-  AddFieldUpdateAction,
-  DiscardObjectUpdatesAction,
-  InitializeFieldsAction,
-  ReinstateObjectUpdatesAction,
-  RemoveAllObjectUpdatesAction,
-  RemoveFieldUpdateAction,
-  RemoveObjectUpdatesAction,
-  SelectVirtualMetadataAction,
-  SetEditableFieldUpdateAction,
-  SetValidFieldUpdateAction,
-} from './object-updates.actions';
-import {
-  OBJECT_UPDATES_TRASH_PATH,
-  objectUpdatesReducer,
-} from './object-updates.reducer';
+import { AddFieldUpdateAction, DiscardObjectUpdatesAction, InitializeFieldsAction, ReinstateObjectUpdatesAction, RemoveAllObjectUpdatesAction, RemoveFieldUpdateAction, RemoveObjectUpdatesAction, SelectVirtualMetadataAction, SetEditableFieldUpdateAction, SetValidFieldUpdateAction } from './object-updates.actions';
+import { OBJECT_UPDATES_TRASH_PATH, objectUpdatesReducer, ObjectUpdatesState } from './object-updates.reducer';
 
 class NullAction extends RemoveFieldUpdateAction {
   type = null;
@@ -60,7 +46,7 @@ const modDate = new Date(2010, 2, 11);
 const uuid = identifiable1.uuid;
 const url = 'test-object.url/edit';
 describe('objectUpdatesReducer', () => {
-  const testState = {
+  const testState: ObjectUpdatesState = {
     [url]: {
       fieldStates: {
         [identifiable1.uuid]: {
@@ -83,9 +69,6 @@ describe('objectUpdatesReducer', () => {
         [identifiable2.uuid]: {
           field: {
             uuid: identifiable2.uuid,
-            key: 'dc.titl',
-            language: null,
-            value: 'New title',
           },
           changeType: FieldChangeType.ADD,
         },
@@ -97,7 +80,7 @@ describe('objectUpdatesReducer', () => {
     },
   };
 
-  const discardedTestState = {
+  const discardedTestState: ObjectUpdatesState = {
     [url]: {
       fieldStates: {
         [identifiable1.uuid]: {
@@ -143,9 +126,6 @@ describe('objectUpdatesReducer', () => {
         [identifiable2.uuid]: {
           field: {
             uuid: identifiable2.uuid,
-            key: 'dc.titl',
-            language: null,
-            value: 'New title',
           },
           changeType: FieldChangeType.ADD,
         },
@@ -177,48 +157,80 @@ describe('objectUpdatesReducer', () => {
     const action = new InitializeFieldsAction(url, [identifiable1, identifiable2], modDate);
     // testState has already been frozen above
     objectUpdatesReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should perform the SET_EDITABLE_FIELD action without affecting the previous state', () => {
     const action = new SetEditableFieldUpdateAction(url, uuid, false);
     // testState has already been frozen above
     objectUpdatesReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should perform the ADD_FIELD action without affecting the previous state', () => {
     const action = new AddFieldUpdateAction(url, identifiable1update, FieldChangeType.UPDATE);
     // testState has already been frozen above
     objectUpdatesReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should perform the DISCARD action without affecting the previous state', () => {
     const action = new DiscardObjectUpdatesAction(url, null);
     // testState has already been frozen above
     objectUpdatesReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should perform the REINSTATE action without affecting the previous state', () => {
     const action = new ReinstateObjectUpdatesAction(url);
     // testState has already been frozen above
     objectUpdatesReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should perform the REMOVE action without affecting the previous state', () => {
     const action = new RemoveFieldUpdateAction(url, uuid);
     // testState has already been frozen above
     objectUpdatesReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should perform the REMOVE_FIELD action without affecting the previous state', () => {
     const action = new RemoveFieldUpdateAction(url, uuid);
     // testState has already been frozen above
     objectUpdatesReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should perform the SELECT_VIRTUAL_METADATA action without affecting the previous state', () => {
     const action = new SelectVirtualMetadataAction(url, relationship.uuid, identifiable1.uuid, true);
     // testState has already been frozen above
     objectUpdatesReducer(testState, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+    expect().nothing();
   });
 
   it('should initialize all fields when the INITIALIZE action is dispatched, based on the payload', () => {
diff --git a/src/app/core/data/object-updates/object-updates.reducer.ts b/src/app/core/data/object-updates/object-updates.reducer.ts
index 95ab702261..e5c66e9f72 100644
--- a/src/app/core/data/object-updates/object-updates.reducer.ts
+++ b/src/app/core/data/object-updates/object-updates.reducer.ts
@@ -1,7 +1,4 @@
-import {
-  hasNoValue,
-  hasValue,
-} from '../../../shared/empty.util';
+import { hasNoValue, hasValue } from '../../../shared/empty.util';
 import { GenericConstructor } from '../../shared/generic-constructor';
 import { Item } from '../../shared/item.model';
 import { Relationship } from '../../shared/item-relationships/relationship.model';
@@ -9,19 +6,7 @@ import { RelationshipType } from '../../shared/item-relationships/relationship-t
 import { FieldChangeType } from './field-change-type.model';
 import { FieldUpdates } from './field-updates.model';
 import { Identifiable } from './identifiable.model';
-import {
-  AddFieldUpdateAction,
-  DiscardObjectUpdatesAction,
-  InitializeFieldsAction,
-  ObjectUpdatesAction,
-  ObjectUpdatesActionTypes,
-  ReinstateObjectUpdatesAction,
-  RemoveFieldUpdateAction,
-  RemoveObjectUpdatesAction,
-  SelectVirtualMetadataAction,
-  SetEditableFieldUpdateAction,
-  SetValidFieldUpdateAction,
-} from './object-updates.actions';
+import { AddFieldUpdateAction, DiscardObjectUpdatesAction, InitializeFieldsAction, ObjectUpdatesAction, ObjectUpdatesActionTypes, ReinstateObjectUpdatesAction, RemoveFieldUpdateAction, RemoveObjectUpdatesAction, SelectVirtualMetadataAction, SetEditableFieldUpdateAction, SetValidFieldUpdateAction } from './object-updates.actions';
 import { PatchOperationService } from './patch-operation-service/patch-operation.service';
 
 /**
@@ -80,7 +65,7 @@ export interface DeleteRelationship extends RelationshipIdentifiable {
  */
 export interface ObjectUpdatesEntry {
   fieldStates: FieldStates;
-  fieldUpdates: FieldUpdates;
+  fieldUpdates?: FieldUpdates;
   virtualMetadataSources: VirtualMetadataSources;
   lastModified: Date;
   patchOperationService?: GenericConstructor;
diff --git a/src/app/core/data/processes/process-data.service.spec.ts b/src/app/core/data/processes/process-data.service.spec.ts
index 3261e86f4e..78f614ebd8 100644
--- a/src/app/core/data/processes/process-data.service.spec.ts
+++ b/src/app/core/data/processes/process-data.service.spec.ts
@@ -8,12 +8,186 @@
 
 import { testDeleteDataImplementation } from '../base/delete-data.spec';
 import { testFindAllDataImplementation } from '../base/find-all-data.spec';
-import { ProcessDataService } from './process-data.service';
+import { ProcessDataService, TIMER_FACTORY } from './process-data.service';
+import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { RequestService } from '../request.service';
+import { RemoteData } from '../remote-data';
+import { RequestEntryState } from '../request-entry-state.model';
+import { Process } from '../../../process-page/processes/process.model';
+import { ProcessStatus } from '../../../process-page/processes/process-status.model';
+import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../cache/object-cache.service';
+import { ReducerManager } from '@ngrx/store';
+import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { DSOChangeAnalyzer } from '../dso-change-analyzer.service';
+import { BitstreamFormatDataService } from '../bitstream-format-data.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { TestScheduler } from 'rxjs/testing';
+import { testSearchDataImplementation } from '../base/search-data.spec';
+import { PaginatedList } from '../paginated-list.model';
+import { FindListOptions } from '../find-list-options.model';
+import { of } from 'rxjs';
+import { getMockRequestService } from '../../../shared/mocks/request.service.mock';
 
 describe('ProcessDataService', () => {
+  let testScheduler;
+
+  const mockTimer = (fn: () => {}, interval: number) => {
+    fn();
+    return 555;
+  };
+
   describe('composition', () => {
-    const initService = () => new ProcessDataService(null, null, null, null, null, null);
+    const initService = () => new ProcessDataService(null, null, null, null, null, null, null, null);
     testFindAllDataImplementation(initService);
     testDeleteDataImplementation(initService);
+    testSearchDataImplementation(initService);
+  });
+
+  let requestService = getMockRequestService();
+  let processDataService;
+  let remoteDataBuildService;
+
+  describe('autoRefreshUntilCompletion', () => {
+    beforeEach(waitForAsync(() => {
+      testScheduler = new TestScheduler((actual, expected) => {
+        expect(actual).toEqual(expected);
+      });
+      TestBed.configureTestingModule({
+        imports: [],
+        providers: [
+          ProcessDataService,
+          { provide: RequestService, useValue: null },
+          { provide: RemoteDataBuildService, useValue: null },
+          { provide: ObjectCacheService, useValue: null },
+          { provide: ReducerManager, useValue: null },
+          { provide: HALEndpointService, useValue: null },
+          { provide: DSOChangeAnalyzer, useValue: null },
+          { provide: BitstreamFormatDataService, useValue: null },
+          { provide: NotificationsService, useValue: null },
+          { provide: TIMER_FACTORY, useValue: mockTimer },
+        ]
+      });
+
+      processDataService = TestBed.inject(ProcessDataService);
+      spyOn(processDataService, 'invalidateByHref');
+    }));
+
+    it('should not do any polling when the process is already completed', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        let completedProcess = new Process();
+        completedProcess.processStatus = ProcessStatus.COMPLETED;
+
+        const completedProcessRD = new RemoteData(0, 0, 0, RequestEntryState.Success, null, completedProcess);
+
+        spyOn(processDataService, 'findById').and.returnValue(
+          cold('c', {
+            'c': completedProcessRD
+          })
+        );
+
+        let process$ = processDataService.autoRefreshUntilCompletion('instantly');
+        expectObservable(process$).toBe('c', {
+          c: completedProcessRD
+        });
+      });
+
+      expect(processDataService.findById).toHaveBeenCalledTimes(1);
+      expect(processDataService.invalidateByHref).not.toHaveBeenCalled();
+    });
+
+    it('should poll until a process completes', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const runningProcess = Object.assign(new Process(), {
+          _links: {
+            self: {
+              href: 'https://rest.api/processes/123'
+            }
+          }
+        });
+        runningProcess.processStatus = ProcessStatus.RUNNING;
+        const completedProcess = new Process();
+        completedProcess.processStatus = ProcessStatus.COMPLETED;
+        const runningProcessRD = new RemoteData(0, 0, 0, RequestEntryState.Success, null, runningProcess);
+        const completedProcessRD = new RemoteData(0, 0, 0, RequestEntryState.Success, null, completedProcess);
+
+        spyOn(processDataService, 'findById').and.returnValue(
+          cold('r 150ms c', {
+            'r': runningProcessRD,
+            'c': completedProcessRD
+          })
+        );
+
+        let process$ = processDataService.autoRefreshUntilCompletion('foo', 100);
+        expectObservable(process$).toBe('r 150ms c', {
+          'r': runningProcessRD,
+          'c': completedProcessRD
+        });
+      });
+
+      expect(processDataService.findById).toHaveBeenCalledTimes(1);
+      expect(processDataService.invalidateByHref).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('autoRefreshingSearchBy', () => {
+    beforeEach(waitForAsync(() => {
+
+      TestBed.configureTestingModule({
+        imports: [],
+        providers: [
+          ProcessDataService,
+          { provide: RequestService, useValue: requestService },
+          { provide: RemoteDataBuildService, useValue: null },
+          { provide: ObjectCacheService, useValue: null },
+          { provide: ReducerManager, useValue: null },
+          { provide: HALEndpointService, useValue: null },
+          { provide: DSOChangeAnalyzer, useValue: null },
+          { provide: BitstreamFormatDataService, useValue: null },
+          { provide: NotificationsService, useValue: null },
+          { provide: TIMER_FACTORY, useValue: mockTimer },
+        ]
+      });
+
+      processDataService = TestBed.inject(ProcessDataService);
+    }));
+
+    it('should refresh after the specified interval', fakeAsync(() => {
+      const runningProcess = Object.assign(new Process(), {
+        _links: {
+          self: {
+            href: 'https://rest.api/processes/123'
+          }
+        }
+      });
+      runningProcess.processStatus = ProcessStatus.RUNNING;
+
+      const runningProcessPagination: PaginatedList = Object.assign(new PaginatedList(), {
+        page: [runningProcess],
+        _links: {
+          self: {
+            href: 'https://rest.api/processesList/456'
+          }
+        }
+      });
+
+      const runningProcessRD = new RemoteData(0, 0, 0, RequestEntryState.Success, null, runningProcessPagination);
+
+      spyOn(processDataService, 'searchBy').and.returnValue(
+        of(runningProcessRD)
+      );
+
+      expect(processDataService.searchBy).toHaveBeenCalledTimes(0);
+      expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledTimes(0);
+
+      let sub = processDataService.autoRefreshingSearchBy('id', 'byProperty', new FindListOptions(), 200).subscribe();
+      expect(processDataService.searchBy).toHaveBeenCalledTimes(1);
+
+      tick(250);
+
+      expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledTimes(1);
+
+      sub.unsubscribe();
+    }));
   });
 });
diff --git a/src/app/core/data/processes/process-data.service.ts b/src/app/core/data/processes/process-data.service.ts
index 78a03a7947..9aa204555a 100644
--- a/src/app/core/data/processes/process-data.service.ts
+++ b/src/app/core/data/processes/process-data.service.ts
@@ -1,6 +1,7 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
+import { Inject, Injectable, InjectionToken, NgZone } from '@angular/core';
+import { RequestService } from '../request.service';
+import { Observable, Subscription } from 'rxjs';
+import { distinctUntilChanged, filter, find, switchMap } from 'rxjs/operators';
 
 import { Process } from '../../../process-page/processes/process.model';
 import { PROCESS } from '../../../process-page/processes/process.resource-type';
@@ -8,30 +9,40 @@ import { NotificationsService } from '../../../shared/notifications/notification
 import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import { ObjectCacheService } from '../../cache/object-cache.service';
-import { Bitstream } from '../../shared/bitstream.model';
 import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { PaginatedList } from '../paginated-list.model';
+import { Bitstream } from '../../shared/bitstream.model';
 import { NoContent } from '../../shared/NoContent.model';
 import { dataService } from '../base/data-service.decorator';
-import {
-  DeleteData,
-  DeleteDataImpl,
-} from '../base/delete-data';
-import {
-  FindAllData,
-  FindAllDataImpl,
-} from '../base/find-all-data';
+import { DeleteData, DeleteDataImpl } from '../base/delete-data';
+import { FindAllData, FindAllDataImpl } from '../base/find-all-data';
 import { IdentifiableDataService } from '../base/identifiable-data.service';
 import { BitstreamDataService } from '../bitstream-data.service';
 import { FindListOptions } from '../find-list-options.model';
-import { PaginatedList } from '../paginated-list.model';
+import { getAllCompletedRemoteData } from '../../shared/operators';
+import { ProcessStatus } from 'src/app/process-page/processes/process-status.model';
+import { hasValue } from '../../../shared/empty.util';
+import { SearchData, SearchDataImpl } from '../base/search-data';
 import { RemoteData } from '../remote-data';
-import { RequestService } from '../request.service';
+
+/**
+ * Create an InjectionToken for the default JS setTimeout function, purely so we can mock it during
+ * testing. (fakeAsync isn't working for this case)
+ */
+export const TIMER_FACTORY = new InjectionToken<(callback: (...args: any[]) => void, ms?: number, ...args: any[]) => NodeJS.Timeout>('timer', {
+  providedIn: 'root',
+  factory: () => setTimeout
+});
 
 @Injectable()
 @dataService(PROCESS)
-export class ProcessDataService extends IdentifiableDataService implements FindAllData, DeleteData {
+export class ProcessDataService extends IdentifiableDataService implements FindAllData, DeleteData, SearchData {
+
   private findAllData: FindAllData;
   private deleteData: DeleteData;
+  private searchData: SearchData;
+  protected activelyBeingPolled: Map = new Map();
+  protected subs: Map = new Map();
 
   constructor(
     protected requestService: RequestService,
@@ -40,11 +51,30 @@ export class ProcessDataService extends IdentifiableDataService impleme
     protected halService: HALEndpointService,
     protected bitstreamDataService: BitstreamDataService,
     protected notificationsService: NotificationsService,
+    protected zone: NgZone,
+    @Inject(TIMER_FACTORY) protected timer: (callback: (...args: any[]) => void, ms?: number, ...args: any[]) => NodeJS.Timeout
   ) {
     super('processes', requestService, rdbService, objectCache, halService);
 
     this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
     this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
+    this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+  }
+
+  /**
+   * Return true if the given process has the given status
+   * @protected
+   */
+  protected static statusIs(process: Process, status: ProcessStatus): boolean {
+    return hasValue(process) && process.processStatus === status;
+  }
+
+  /**
+   * Return true if the given process has the status COMPLETED or FAILED
+   */
+  public static hasCompletedOrFailed(process: Process): boolean {
+    return ProcessDataService.statusIs(process, ProcessStatus.COMPLETED) ||
+      ProcessDataService.statusIs(process, ProcessStatus.FAILED);
   }
 
   /**
@@ -84,6 +114,71 @@ export class ProcessDataService extends IdentifiableDataService impleme
     return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
   }
 
+  /**
+   * @param searchMethod                The search method for the Process
+   * @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 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 automatically be resolved.
+   * @return {Observable>>}
+   *    Return an observable that emits a paginated list of processes
+   */
+  searchBy(searchMethod: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.searchData.searchBy(searchMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  /**
+   * @param id                          The id for this auto-refreshing search. Used to stop
+   *                                    auto-refreshing afterwards, and ensure we're not
+   *                                    auto-refreshing the same thing multiple times.
+   * @param searchMethod                The search method for the Process
+   * @param options                     The FindListOptions object
+   * @param pollingIntervalInMs         The interval by which the search will be repeated
+   * @param linksToFollow               List of {@link FollowLinkConfig} that indicate which
+   *                                    {@link HALLink}s should automatically be resolved.
+   * @return {Observable>>}
+   *    Return an observable that emits a paginated list of processes every interval
+   */
+  autoRefreshingSearchBy(id: string, searchMethod: string, options?: FindListOptions, pollingIntervalInMs: number = 5000, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+
+    const result$ = this.searchBy(searchMethod, options, true, true, ...linksToFollow).pipe(
+      getAllCompletedRemoteData()
+    );
+
+    const sub = result$.pipe(
+      filter(() =>
+        !this.activelyBeingPolled.has(id)
+      )
+    ).subscribe((processListRd: RemoteData>) => {
+      this.clearCurrentTimeout(id);
+      const nextTimeout = this.timer(() => {
+        this.activelyBeingPolled.delete(id);
+        this.requestService.setStaleByHrefSubstring(processListRd.payload._links.self.href);
+      }, pollingIntervalInMs);
+
+      this.activelyBeingPolled.set(id, nextTimeout);
+    });
+
+    this.subs.set(id, sub);
+
+    return result$;
+  }
+
+  /**
+   * Stop auto-refreshing the request with the given id
+   * @param id the id of the request to stop automatically refreshing
+   */
+  stopAutoRefreshing(id: string) {
+    this.clearCurrentTimeout(id);
+    if (hasValue(this.subs.get(id))) {
+      this.subs.get(id).unsubscribe();
+      this.subs.delete(id);
+    }
+  }
+
   /**
    * Delete an existing object on the server
    * @param   objectId The id of the object to be removed
@@ -108,4 +203,74 @@ export class ProcessDataService extends IdentifiableDataService impleme
   public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable> {
     return this.deleteData.deleteByHref(href, copyVirtualMetadata);
   }
+
+  /**
+   * Clear the timeout for the given id, if that timeout exists
+   * @protected
+   */
+  protected clearCurrentTimeout(id: string): void {
+    const timeout = this.activelyBeingPolled.get(id);
+    if (hasValue(timeout)) {
+      clearTimeout(timeout);
+    }
+    this.activelyBeingPolled.delete(id);
+  }
+
+  /**
+   * Poll the process with the given ID, using the given interval, until that process either
+   * completes successfully or fails
+   *
+   * Return an Observable for the Process. Note that this will also emit while the
+   * process is still running. It will only emit again when the process (not the RemoteData!) changes
+   * status. That makes it more convenient to retrieve that process for a component: you can replace
+   * a findByID call with this method, rather than having to do a separate findById, and then call
+   * this method
+   *
+   * @param processId           The ID of the {@link Process} to poll
+   * @param pollingIntervalInMs The interval for how often the request needs to be polled
+   * @param linksToFollow       List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be
+   *                            automatically resolved
+   */
+  public autoRefreshUntilCompletion(processId: string, pollingIntervalInMs = 5000, ...linksToFollow: FollowLinkConfig[]): Observable> {
+    const process$: Observable> = this.findById(processId, true, true, ...linksToFollow)
+      .pipe(
+        getAllCompletedRemoteData(),
+      );
+
+    // Create a subscription that marks the data as stale if the process hasn't been completed and
+    // the polling interval time has been exceeded.
+    const sub = process$.pipe(
+      filter((processRD: RemoteData) =>
+        !ProcessDataService.hasCompletedOrFailed(processRD.payload) &&
+        !this.activelyBeingPolled.has(processId)
+      )
+    ).subscribe((processRD: RemoteData) => {
+      this.clearCurrentTimeout(processId);
+      if (processRD.hasSucceeded) {
+        const nextTimeout = this.timer(() => {
+          this.activelyBeingPolled.delete(processId);
+          this.invalidateByHref(processRD.payload._links.self.href);
+        }, pollingIntervalInMs);
+
+        this.activelyBeingPolled.set(processId, nextTimeout);
+      }
+    });
+
+    this.subs.set(processId, sub);
+
+    // When the process completes create a one off subscription (the `find` completes the
+    // observable) that unsubscribes the previous one, removes the processId from the list of
+    // processes being polled and clears any running timeouts
+    process$.pipe(
+      find((processRD: RemoteData) => ProcessDataService.hasCompletedOrFailed(processRD.payload))
+    ).subscribe(() => {
+      this.stopAutoRefreshing(processId);
+    });
+
+    return process$.pipe(
+      distinctUntilChanged((previous: RemoteData, current: RemoteData) =>
+        previous.payload?.processStatus === current.payload?.processStatus,
+      )
+    );
+  }
 }
diff --git a/src/app/core/data/relationship-data.service.spec.ts b/src/app/core/data/relationship-data.service.spec.ts
index ce4d1f1a27..52327e62c8 100644
--- a/src/app/core/data/relationship-data.service.spec.ts
+++ b/src/app/core/data/relationship-data.service.spec.ts
@@ -2,11 +2,7 @@ import { of as observableOf } from 'rxjs';
 
 import { getMockRemoteDataBuildServiceHrefMap } from '../../shared/mocks/remote-data-build.service.mock';
 import { getMockRequestService } from '../../shared/mocks/request.service.mock';
-import {
-  createFailedRemoteDataObject$,
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../shared/remote-data.utils';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
 import { createPaginatedList } from '../../shared/testing/utils.test';
 import { followLink } from '../../shared/utils/follow-link-config.model';
@@ -24,6 +20,7 @@ import { RelationshipDataService } from './relationship-data.service';
 import { DeleteRequest } from './request.models';
 import { RequestService } from './request.service';
 import { RequestEntry } from './request-entry.model';
+import { ObjectCacheServiceStub } from '../../shared/testing/object-cache-service.stub';
 
 describe('RelationshipDataService', () => {
   let service: RelationshipDataService;
@@ -115,14 +112,7 @@ describe('RelationshipDataService', () => {
     'href': buildList$,
     'https://rest.api/core/publication/relationships': relationships$,
   });
-  const objectCache = Object.assign({
-    /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
-    remove: () => {
-    },
-    hasBySelfLinkObservable: () => observableOf(false),
-    hasByHref$: () => observableOf(false),
-    /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
-  }) as ObjectCacheService;
+  const objectCache = new ObjectCacheServiceStub();
 
   const itemService = jasmine.createSpyObj('itemService', {
     findById: (uuid) => createSuccessfulRemoteDataObject(relatedItems.find((relatedItem) => relatedItem.id === uuid)),
@@ -134,7 +124,7 @@ describe('RelationshipDataService', () => {
       requestService,
       rdbService,
       halService,
-      objectCache,
+      objectCache as ObjectCacheService,
       itemService,
       null,
       jasmine.createSpy('paginatedRelationsToItems').and.returnValue((v) => v),
diff --git a/src/app/core/data/relationship-type-data.service.spec.ts b/src/app/core/data/relationship-type-data.service.spec.ts
index d8bb7c0650..906ed47ae6 100644
--- a/src/app/core/data/relationship-type-data.service.spec.ts
+++ b/src/app/core/data/relationship-type-data.service.spec.ts
@@ -3,10 +3,7 @@ import { of as observableOf } from 'rxjs';
 import { hasValueOperator } from '../../shared/empty.util';
 import { getMockRemoteDataBuildService } from '../../shared/mocks/remote-data-build.service.mock';
 import { getMockRequestService } from '../../shared/mocks/request.service.mock';
-import {
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../shared/remote-data.utils';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
 import { createPaginatedList } from '../../shared/testing/utils.test';
 import { ObjectCacheService } from '../cache/object-cache.service';
@@ -14,6 +11,7 @@ import { ItemType } from '../shared/item-relationships/item-type.model';
 import { RelationshipType } from '../shared/item-relationships/relationship-type.model';
 import { RelationshipTypeDataService } from './relationship-type-data.service';
 import { RequestService } from './request.service';
+import { ObjectCacheServiceStub } from '../../shared/testing/object-cache-service.stub';
 
 describe('RelationshipTypeDataService', () => {
   let service: RelationshipTypeDataService;
@@ -32,7 +30,7 @@ describe('RelationshipTypeDataService', () => {
 
   let buildList;
   let rdbService;
-  let objectCache;
+  let objectCache: ObjectCacheServiceStub;
 
   function init() {
     restEndpointURL = 'https://rest.api/relationshiptypes';
@@ -64,21 +62,14 @@ describe('RelationshipTypeDataService', () => {
 
     buildList = createSuccessfulRemoteDataObject(createPaginatedList([relationshipType1, relationshipType2]));
     rdbService = getMockRemoteDataBuildService(undefined, observableOf(buildList));
-    objectCache = Object.assign({
-      /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
-      remove: () => {
-      },
-      hasBySelfLinkObservable: () => observableOf(false),
-      /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
-    }) as ObjectCacheService;
-
+    objectCache = new ObjectCacheServiceStub();
   }
 
   function initTestService() {
     return new RelationshipTypeDataService(
       requestService,
       rdbService,
-      objectCache,
+      objectCache as ObjectCacheService,
       halService,
     );
   }
diff --git a/src/app/core/data/update-data.service.spec.ts b/src/app/core/data/update-data.service.spec.ts
new file mode 100644
index 0000000000..426fa87eb6
--- /dev/null
+++ b/src/app/core/data/update-data.service.spec.ts
@@ -0,0 +1,144 @@
+import { of as observableOf } from 'rxjs';
+import { TestScheduler } from 'rxjs/testing';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { RequestService } from './request.service';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { HrefOnlyDataService } from './href-only-data.service';
+import { getMockHrefOnlyDataService } from '../../shared/mocks/href-only-data.service.mock';
+import { RestResponse } from '../cache/response.models';
+import { cold, getTestScheduler, hot } from 'jasmine-marbles';
+import { Item } from '../shared/item.model';
+import { Version } from '../shared/version.model';
+import { VersionHistory } from '../shared/version-history.model';
+import { RequestEntry } from './request-entry.model';
+import { testPatchDataImplementation } from './base/patch-data.spec';
+import { UpdateDataServiceImpl } from './update-data.service';
+import { testSearchDataImplementation } from './base/search-data.spec';
+import { testDeleteDataImplementation } from './base/delete-data.spec';
+import { testCreateDataImplementation } from './base/create-data.spec';
+import { testFindAllDataImplementation } from './base/find-all-data.spec';
+import { testPutDataImplementation } from './base/put-data.spec';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+
+describe('VersionDataService test', () => {
+  let scheduler: TestScheduler;
+  let service: UpdateDataServiceImpl;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+  let objectCache: ObjectCacheService;
+  let halService: HALEndpointService;
+  let hrefOnlyDataService: HrefOnlyDataService;
+  let responseCacheEntry: RequestEntry;
+
+  const notificationsService = {} as NotificationsService;
+
+  const item = Object.assign(new Item(), {
+    id: '1234-1234',
+    uuid: '1234-1234',
+    bundles: observableOf({}),
+    metadata: {
+      'dc.title': [
+        {
+          language: 'en_US',
+          value: 'This is just another title'
+        }
+      ],
+      'dc.type': [
+        {
+          language: null,
+          value: 'Article'
+        }
+      ],
+      'dc.contributor.author': [
+        {
+          language: 'en_US',
+          value: 'Smith, Donald'
+        }
+      ],
+      'dc.date.issued': [
+        {
+          language: null,
+          value: '2015-06-26'
+        }
+      ]
+    }
+  });
+
+  const versionHistory = Object.assign(new VersionHistory(), {
+    id: '1',
+    draftVersion: true,
+  });
+
+  const mockVersion: Version = Object.assign(new Version(), {
+    item: createSuccessfulRemoteDataObject$(item),
+    versionhistory: createSuccessfulRemoteDataObject$(versionHistory),
+    version: 1,
+  });
+  const mockVersionRD = createSuccessfulRemoteDataObject(mockVersion);
+
+  const endpointURL = `https://rest.api/rest/api/versioning/versions`;
+  const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+
+  objectCache = {} as ObjectCacheService;
+  const comparatorEntry = {} as any;
+  function initTestService() {
+    hrefOnlyDataService = getMockHrefOnlyDataService();
+    return new UpdateDataServiceImpl(
+      'testLinkPath',
+      requestService,
+      rdbService,
+      objectCache,
+      halService,
+      notificationsService,
+      comparatorEntry,
+      10 * 1000
+    );
+  }
+
+  beforeEach(() => {
+
+    scheduler = getTestScheduler();
+
+    halService = jasmine.createSpyObj('halService', {
+      getEndpoint: cold('a', { a: endpointURL })
+    });
+    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),
+    });
+    rdbService = jasmine.createSpyObj('rdbService', {
+      buildSingle: hot('(a|)', {
+        a: mockVersionRD
+      })
+    });
+
+    service = initTestService();
+
+    spyOn((service as any), 'findById').and.callThrough();
+  });
+
+  afterEach(() => {
+    service = null;
+  });
+
+  describe('composition', () => {
+    const initService = () => new UpdateDataServiceImpl(null, null, null, null, null, null, null, null);
+
+    testPatchDataImplementation(initService);
+    testSearchDataImplementation(initService);
+    testDeleteDataImplementation(initService);
+    testCreateDataImplementation(initService);
+    testFindAllDataImplementation(initService);
+    testPutDataImplementation(initService);
+  });
+
+});
diff --git a/src/app/core/data/update-data.service.ts b/src/app/core/data/update-data.service.ts
index 99e3dec9c0..27ef1fa192 100644
--- a/src/app/core/data/update-data.service.ts
+++ b/src/app/core/data/update-data.service.ts
@@ -1,14 +1,304 @@
 import { Operation } from 'fast-json-patch';
-import { Observable } from 'rxjs';
-
+import { AsyncSubject, from as observableFrom, Observable } from 'rxjs';
+import { find, map, mergeMap, switchMap, take, toArray } from 'rxjs/operators';
+import { hasValue } from '../../shared/empty.util';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { RequestParam } from '../cache/models/request-param.model';
+import { ObjectCacheEntry } from '../cache/object-cache.reducer';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { ChangeAnalyzer } from './change-analyzer';
+import { PaginatedList } from './paginated-list.model';
 import { RemoteData } from './remote-data';
+import { DeleteByIDRequest, PostRequest } from './request.models';
+import { RequestService } from './request.service';
 import { RestRequestMethod } from './rest-request-method';
+import { NoContent } from '../shared/NoContent.model';
+import { CacheableObject } from '../cache/cacheable-object.model';
+import { FindListOptions } from './find-list-options.model';
+import { FindAllData, FindAllDataImpl } from './base/find-all-data';
+import { SearchData, SearchDataImpl } from './base/search-data';
+import { CreateData, CreateDataImpl } from './base/create-data';
+import { PatchData, PatchDataImpl } from './base/patch-data';
+import { IdentifiableDataService } from './base/identifiable-data.service';
+import { PutData, PutDataImpl } from './base/put-data';
+import { DeleteData, DeleteDataImpl } from './base/delete-data';
 
 /**
- * Represents a data service to update a given object
+ * Interface to list the methods used by the injected service in components
  */
 export interface UpdateDataService {
   patch(dso: T, operations: Operation[]): Observable>;
   update(object: T): Observable>;
-  commitUpdates(method?: RestRequestMethod);
+  commitUpdates(method?: RestRequestMethod): void;
+}
+
+
+/**
+ * Specific functionalities that not all services would need.
+ * Goal of the class is to update remote objects, handling custom methods that don't belong to BaseDataService
+ * The class implements also the following common interfaces
+ *
+ * findAllData: FindAllData;
+ * searchData: SearchData;
+ * createData: CreateData;
+ * patchData: PatchData;
+ * putData: PutData;
+ * deleteData: DeleteData;
+ *
+ * Custom methods are:
+ *
+ * deleteOnRelated - delete all related objects to the given one
+ * postOnRelated - post all the related objects to the given one
+ * invalidate - invalidate the DSpaceObject making all requests as stale
+ * invalidateByHref - invalidate the href making all requests as stale
+ */
+
+export class UpdateDataServiceImpl extends IdentifiableDataService implements FindAllData, SearchData, CreateData, PatchData, PutData, DeleteData {
+  private findAllData: FindAllDataImpl;
+  private searchData: SearchDataImpl;
+  private createData: CreateDataImpl;
+  private patchData: PatchDataImpl;
+  private putData: PutDataImpl;
+  private deleteData: DeleteDataImpl;
+
+
+  constructor(
+    protected linkPath: string,
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected comparator: ChangeAnalyzer,
+    protected responseMsToLive: number,
+  ) {
+    super(linkPath, requestService, rdbService, objectCache, halService, responseMsToLive);
+    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.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService ,this.responseMsToLive);
+    this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, comparator ,this.responseMsToLive, this.constructIdEndpoint);
+    this.putData = new PutDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+    this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService ,this.responseMsToLive, this.constructIdEndpoint);
+  }
+
+
+  /**
+   * Create the HREF with given options object
+   *
+   * @param options The [[FindListOptions]] object
+   * @param linkPath The link path for the object
+   * @return {Observable}
+   *    Return an observable that emits created HREF
+   * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
+   */
+  public getFindAllHref(options: FindListOptions = {}, linkPath?: string, ...linksToFollow: FollowLinkConfig[]): Observable {
+    return this.findAllData.getFindAllHref(options, linkPath, ...linksToFollow);
+  }
+
+  /**
+   * Create the HREF for a specific object's search method with given options object
+   *
+   * @param searchMethod The search method for the object
+   * @param options The [[FindListOptions]] object
+   * @return {Observable}
+   *    Return an observable that emits created HREF
+   * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
+   */
+  public getSearchByHref(searchMethod: string, options: FindListOptions = {}, ...linksToFollow: FollowLinkConfig[]): Observable {
+    return this.searchData.getSearchByHref(searchMethod, options, ...linksToFollow);
+  }
+
+  /**
+   * Returns {@link RemoteData} of all object with a list of {@link FollowLinkConfig}, to indicate which embedded
+   * info should be added to the objects
+   *
+   * @param options                     Find list options 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 object list
+   */
+  findAll(options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  /**
+   * 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
+   */
+  searchBy(searchMethod: string, options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return  this.searchData.searchBy(searchMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  /**
+   * Send a patch request for a specified object
+   * @param {T} object The object to send a patch request for
+   * @param {Operation[]} operations The patch operations to be performed
+   */
+  patch(object: T, operations: Operation[]): Observable> {
+    return this.patchData.patch(object, operations);
+  }
+
+  createPatchFromCache(object: T): Observable {
+    return this.patchData.createPatchFromCache(object);
+  }
+
+  /**
+   * Send a PUT request for the specified object
+   *
+   * @param object The object to send a put request for.
+   */
+  put(object: T): Observable> {
+    return this.putData.put(object);
+  }
+
+  /**
+   * Add a new patch to the object cache
+   * The patch is derived from the differences between the given object and its version in the object cache
+   * @param {DSpaceObject} object The given object
+   */
+  update(object: T): Observable> {
+    return this.patchData.update(object);
+  }
+
+  /**
+   * Create a new DSpaceObject on the server, and store the response
+   * in the object cache
+   *
+   * @param {CacheableObject} object
+   *    The object to create
+   * @param {RequestParam[]} params
+   *    Array with additional params to combine with query string
+   */
+  create(object: T, ...params: RequestParam[]): Observable> {
+    return this.createData.create(object, ...params);
+  }
+  /**
+   * Perform a post on an endpoint related item with ID. Ex.: endpoint//related?item=
+   * @param itemId The item id
+   * @param relatedItemId The related item Id
+   * @param body The optional POST body
+   * @return the RestResponse as an Observable
+   */
+  public postOnRelated(itemId: string, relatedItemId: string, body?: any) {
+    const requestId = this.requestService.generateRequestId();
+    const hrefObs = this.getIDHrefObs(itemId);
+
+    hrefObs.pipe(
+      take(1)
+    ).subscribe((href: string) => {
+      const request = new PostRequest(requestId, href + '/related?item=' + relatedItemId, body);
+      if (hasValue(this.responseMsToLive)) {
+        request.responseMsToLive = this.responseMsToLive;
+      }
+      this.requestService.send(request);
+    });
+
+    return this.rdbService.buildFromRequestUUID(requestId);
+  }
+
+  /**
+   * Perform a delete on an endpoint related item. Ex.: endpoint//related
+   * @param itemId The item id
+   * @return the RestResponse as an Observable
+   */
+  public deleteOnRelated(itemId: string): Observable> {
+    const requestId = this.requestService.generateRequestId();
+    const hrefObs = this.getIDHrefObs(itemId);
+
+    hrefObs.pipe(
+      find((href: string) => hasValue(href)),
+      map((href: string) => {
+        const request = new DeleteByIDRequest(requestId, href + '/related', itemId);
+        if (hasValue(this.responseMsToLive)) {
+          request.responseMsToLive = this.responseMsToLive;
+        }
+        this.requestService.send(request);
+      })
+    ).subscribe();
+
+    return this.rdbService.buildFromRequestUUID(requestId);
+  }
+
+  /*
+   * Invalidate an existing DSpaceObject by marking all requests it is included in as stale
+   * @param   objectId The id of the object to be invalidated
+   * @return  An Observable that will emit `true` once all requests are stale
+   */
+  invalidate(objectId: string): Observable {
+    return this.getIDHrefObs(objectId).pipe(
+      switchMap((href: string) => this.invalidateByHref(href))
+    );
+  }
+
+  /**
+   * Invalidate an existing DSpaceObject by marking all requests it is included in as stale
+   * @param   href The self link of the object to be invalidated
+   * @return  An Observable that will emit `true` once all requests are stale
+   */
+  invalidateByHref(href: string): Observable {
+    const done$ = new AsyncSubject();
+
+    this.objectCache.getByHref(href).pipe(
+      switchMap((oce: ObjectCacheEntry) => observableFrom(oce.requestUUIDs).pipe(
+        mergeMap((requestUUID: string) => this.requestService.setStaleByUUID(requestUUID)),
+        toArray(),
+      )),
+    ).subscribe(() => {
+      done$.next(true);
+      done$.complete();
+    });
+
+    return done$;
+  }
+
+  /**
+   * Delete an existing DSpace Object on the server
+   * @param   objectId The id of the object to be removed
+   * @param   copyVirtualMetadata (optional parameter) the identifiers of the relationship types for which the virtual
+   *                            metadata should be saved as real metadata
+   * @return  A RemoteData observable with an empty payload, but still representing the state of the request: statusCode,
+   *          errorMessage, timeCompleted, etc
+   */
+  delete(objectId: string, copyVirtualMetadata?: string[]): Observable> {
+    return this.deleteData.delete(objectId, copyVirtualMetadata);
+  }
+
+  /**
+   * Delete an existing DSpace Object on the server
+   * @param   href The self link of the object to be removed
+   * @param   copyVirtualMetadata (optional parameter) the identifiers of the relationship types for which the virtual
+   *                            metadata should be saved as real metadata
+   * @return  A RemoteData observable with an empty payload, but still representing the state of the request: statusCode,
+   *          errorMessage, timeCompleted, etc
+   *          Only emits once all request related to the DSO has been invalidated.
+   */
+  deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable> {
+   return this.deleteData.deleteByHref(href, copyVirtualMetadata);
+  }
+
+  /**
+   * Commit current object changes to the server
+   * @param method The RestRequestMethod for which de server sync buffer should be committed
+   */
+  commitUpdates(method?: RestRequestMethod) {
+    this.patchData.commitUpdates(method);
+  }
 }
diff --git a/src/app/core/data/version-data.service.spec.ts b/src/app/core/data/version-data.service.spec.ts
index d6ac6060b0..9551779925 100644
--- a/src/app/core/data/version-data.service.spec.ts
+++ b/src/app/core/data/version-data.service.spec.ts
@@ -1,16 +1,9 @@
-import {
-  cold,
-  getTestScheduler,
-  hot,
-} from 'jasmine-marbles';
+import { cold, getTestScheduler, hot } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
 import { getMockHrefOnlyDataService } from '../../shared/mocks/href-only-data.service.mock';
-import {
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../shared/remote-data.utils';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { followLink } from '../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { ObjectCacheService } from '../cache/object-cache.service';
@@ -136,7 +129,7 @@ describe('VersionDataService test', () => {
     });
 
     describe('getHistoryFromVersion', () => {
-      it('should proxy the call to DataService.findByHref', () => {
+      it('should proxy the call to UpdateDataServiceImpl.findByHref', () => {
         scheduler.schedule(() => service.getHistoryFromVersion(mockVersion, true, true));
         scheduler.flush();
 
diff --git a/src/app/core/eperson/eperson-data.service.spec.ts b/src/app/core/eperson/eperson-data.service.spec.ts
index 8861cd2aa2..1762c901a6 100644
--- a/src/app/core/eperson/eperson-data.service.spec.ts
+++ b/src/app/core/eperson/eperson-data.service.spec.ts
@@ -1,68 +1,37 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
-import {
-  Store,
-  StoreModule,
-} from '@ngrx/store';
-import {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
-import {
-  compare,
-  Operation,
-} from 'fast-json-patch';
-import { getTestScheduler } from 'jasmine-marbles';
-import {
-  Observable,
-  of as observableOf,
-} from 'rxjs';
-import { TestScheduler } from 'rxjs/testing';
-
-import {
-  EPeopleRegistryCancelEPersonAction,
-  EPeopleRegistryEditEPersonAction,
-} from '../../access-control/epeople-registry/epeople-registry.actions';
+import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
+import { cold } from 'jasmine-marbles';
+import { of as observableOf } from 'rxjs';
+import { EPeopleRegistryCancelEPersonAction, EPeopleRegistryEditEPersonAction } from '../../access-control/epeople-registry/epeople-registry.actions';
 import { getMockRemoteDataBuildServiceHrefMap } from '../../shared/mocks/remote-data-build.service.mock';
 import { getMockRequestService } from '../../shared/mocks/request.service.mock';
-import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
-import {
-  createNoContentRemoteDataObject$,
-  createSuccessfulRemoteDataObject$,
-} from '../../shared/remote-data.utils';
-import {
-  EPersonMock,
-  EPersonMock2,
-} from '../../shared/testing/eperson.mock';
+import { createNoContentRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { EPersonMock, EPersonMock2 } from '../../shared/testing/eperson.mock';
 import { GroupMock } from '../../shared/testing/group-mock';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
-import {
-  createPaginatedList,
-  createRequestEntry$,
-} from '../../shared/testing/utils.test';
+import { createPaginatedList, createRequestEntry$ } from '../../shared/testing/utils.test';
 import { RequestParam } from '../cache/models/request-param.model';
-import { CoreState } from '../core-state.model';
-import { ChangeAnalyzer } from '../data/change-analyzer';
-import { FindListOptions } from '../data/find-list-options.model';
-import {
-  PatchRequest,
-  PostRequest,
-} from '../data/request.models';
+import { PatchRequest, PostRequest } from '../data/request.models';
 import { RequestService } from '../data/request.service';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
-import { Item } from '../shared/item.model';
-import { EPersonDataService } from './eperson-data.service';
+import { editEPersonSelector, EPersonDataService } from './eperson-data.service';
 import { EPerson } from './models/eperson.model';
+import { CoreState } from '../core-state.model';
+import { FindListOptions } from '../data/find-list-options.model';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { DSOChangeAnalyzer } from '../data/dso-change-analyzer.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { compare, Operation } from 'fast-json-patch';
+import { Item } from '../shared/item.model';
+import { ChangeAnalyzer } from '../data/change-analyzer';
 
 describe('EPersonDataService', () => {
   let service: EPersonDataService;
-  let store: Store;
+  let store: MockStore;
   let requestService: RequestService;
-  let scheduler: TestScheduler;
 
   let epeople;
 
@@ -72,50 +41,38 @@ describe('EPersonDataService', () => {
   let epeople$;
   let rdbService;
 
-  function initTestService() {
-    return new EPersonDataService(
-      requestService,
-      rdbService,
-      null,
-      halService,
-      new DummyChangeAnalyzer() as any,
-      null,
-      store,
-    );
-  }
+  const initialState = {
+    epeopleRegistry: {
+      editEPerson: null
+    },
+  };
 
-  function init() {
+  beforeEach(waitForAsync(() => {
     restEndpointURL = 'https://rest.api/dspace-spring-rest/api/eperson';
     epersonsEndpoint = `${restEndpointURL}/epersons`;
     epeople = [EPersonMock, EPersonMock2];
     epeople$ = createSuccessfulRemoteDataObject$(createPaginatedList([epeople]));
     rdbService = getMockRemoteDataBuildServiceHrefMap(undefined, { 'https://rest.api/dspace-spring-rest/api/eperson/epersons': epeople$ });
     halService = new HALEndpointServiceStub(restEndpointURL);
+    requestService = getMockRequestService(createRequestEntry$(epeople));
 
     TestBed.configureTestingModule({
-      imports: [
-        CommonModule,
-        StoreModule.forRoot({}),
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateLoaderMock,
-          },
-        }),
+      providers: [
+        EPersonDataService,
+        { provide: RequestService, useValue: requestService },
+        { provide: RemoteDataBuildService, useValue: rdbService },
+        { provide: HALEndpointService, useValue: halService },
+        provideMockStore({ initialState }),
+        { provide: ObjectCacheService, useValue: {} },
+        { provide: DSOChangeAnalyzer, useClass: DummyChangeAnalyzer },
+        { provide: NotificationsService, useClass: NotificationsServiceStub },
       ],
-      declarations: [],
-      providers: [],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     });
-  }
 
-  beforeEach(() => {
-    init();
-    requestService = getMockRequestService(createRequestEntry$(epeople));
-    store = new Store(undefined, undefined, undefined);
-    service = initTestService();
-    spyOn(store, 'dispatch');
-  });
+    service = TestBed.inject(EPersonDataService);
+    store = TestBed.inject(Store) as MockStore;
+    spyOn(store, 'dispatch').and.callThrough();
+  }));
 
   describe('searchByScope', () => {
     beforeEach(() => {
@@ -292,34 +249,29 @@ describe('EPersonDataService', () => {
   });
 
   describe('clearEPersonRequests', () => {
-    beforeEach(waitForAsync(() => {
-      scheduler = getTestScheduler();
-      halService = {
-        getEndpoint(linkPath: string): Observable {
-          return observableOf(restEndpointURL + '/' + linkPath);
-        },
-      } as HALEndpointService;
-      initTestService();
-      service.clearEPersonRequests();
-    }));
-    it('should remove the eperson hrefs in the request service', () => {
-      expect(requestService.removeByHrefSubstring).toHaveBeenCalledWith(epersonsEndpoint);
+    beforeEach(() => {
+      spyOn(halService, 'getEndpoint').and.callFake((linkPath: string) => {
+        return observableOf(`${restEndpointURL}/${linkPath}`);
+      });
     });
+    it('should remove the eperson hrefs in the request service', fakeAsync(() => {
+      service.clearEPersonRequests();
+      tick();
+
+      expect(requestService.removeByHrefSubstring).toHaveBeenCalledWith(epersonsEndpoint);
+    }));
   });
 
   describe('getActiveEPerson', () => {
     it('should retrieve the ePerson currently getting edited, if any', () => {
-      service.editEPerson(EPersonMock);
+      // Update the state with the ePerson (the provideMockStore doesn't update itself when dispatch is called)
+      store.overrideSelector(editEPersonSelector, EPersonMock);
 
-      service.getActiveEPerson().subscribe((activeEPerson: EPerson) => {
-        expect(activeEPerson).toEqual(EPersonMock);
-      });
+      expect(service.getActiveEPerson()).toBeObservable(cold('a', { a: EPersonMock }));
     });
 
     it('should retrieve the ePerson currently getting edited, null if none being edited', () => {
-      service.getActiveEPerson().subscribe((activeEPerson: EPerson) => {
-        expect(activeEPerson).toEqual(null);
-      });
+      expect(service.getActiveEPerson()).toBeObservable(cold('a', { a: null }));
     });
   });
 
@@ -343,7 +295,7 @@ describe('EPersonDataService', () => {
       service.deleteEPerson(EPersonMock).subscribe();
     });
 
-    it('should call DataService.delete with the EPerson\'s UUID', () => {
+    it('should call UpdateDataServiceImpl.delete with the EPerson\'s UUID', () => {
       expect(service.delete).toHaveBeenCalledWith(EPersonMock.id);
     });
   });
diff --git a/src/app/core/eperson/eperson-data.service.ts b/src/app/core/eperson/eperson-data.service.ts
index 94fc399ed5..c346faf124 100644
--- a/src/app/core/eperson/eperson-data.service.ts
+++ b/src/app/core/eperson/eperson-data.service.ts
@@ -1,70 +1,35 @@
 import { Injectable } from '@angular/core';
-import {
-  createSelector,
-  select,
-  Store,
-} from '@ngrx/store';
+import { createSelector, select, Store } from '@ngrx/store';
 import { Operation } from 'fast-json-patch';
 import { Observable } from 'rxjs';
-import {
-  find,
-  map,
-  take,
-} from 'rxjs/operators';
+import { find, map, take } from 'rxjs/operators';
 
 import { getEPersonEditRoute } from '../../access-control/access-control-routing-paths';
-import {
-  EPeopleRegistryCancelEPersonAction,
-  EPeopleRegistryEditEPersonAction,
-} from '../../access-control/epeople-registry/epeople-registry.actions';
+import { EPeopleRegistryCancelEPersonAction, EPeopleRegistryEditEPersonAction } from '../../access-control/epeople-registry/epeople-registry.actions';
 import { EPeopleRegistryState } from '../../access-control/epeople-registry/epeople-registry.reducers';
 import { AppState } from '../../app.reducer';
-import {
-  hasNoValue,
-  hasValue,
-} from '../../shared/empty.util';
+import { hasNoValue, hasValue } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { RequestParam } from '../cache/models/request-param.model';
 import { ObjectCacheService } from '../cache/object-cache.service';
-import {
-  CreateData,
-  CreateDataImpl,
-} from '../data/base/create-data';
+import { CreateData, CreateDataImpl } from '../data/base/create-data';
 import { dataService } from '../data/base/data-service.decorator';
-import {
-  DeleteData,
-  DeleteDataImpl,
-} from '../data/base/delete-data';
+import { DeleteData, DeleteDataImpl } from '../data/base/delete-data';
 import { IdentifiableDataService } from '../data/base/identifiable-data.service';
-import {
-  PatchData,
-  PatchDataImpl,
-} from '../data/base/patch-data';
-import {
-  SearchData,
-  SearchDataImpl,
-} from '../data/base/search-data';
+import { PatchData, PatchDataImpl } from '../data/base/patch-data';
+import { SearchData, SearchDataImpl } from '../data/base/search-data';
 import { DSOChangeAnalyzer } from '../data/dso-change-analyzer.service';
 import { FindListOptions } from '../data/find-list-options.model';
-import {
-  buildPaginatedList,
-  PaginatedList,
-} from '../data/paginated-list.model';
+import { buildPaginatedList, PaginatedList } from '../data/paginated-list.model';
 import { RemoteData } from '../data/remote-data';
-import {
-  PatchRequest,
-  PostRequest,
-} from '../data/request.models';
+import { PatchRequest, PostRequest } from '../data/request.models';
 import { RequestService } from '../data/request.service';
 import { RestRequestMethod } from '../data/rest-request-method';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { NoContent } from '../shared/NoContent.model';
-import {
-  getFirstSucceededRemoteData,
-  getRemoteDataPayload,
-} from '../shared/operators';
+import { getFirstSucceededRemoteData, getRemoteDataPayload } from '../shared/operators';
 import { PageInfo } from '../shared/page-info.model';
 import { EPerson } from './models/eperson.model';
 import { EPERSON } from './models/eperson.resource-type';
@@ -72,7 +37,7 @@ import { EPERSON } from './models/eperson.resource-type';
 // todo: optimize imports
 
 const ePeopleRegistryStateSelector = (state: AppState) => state.epeopleRegistry;
-const editEPersonSelector = createSelector(ePeopleRegistryStateSelector, (ePeopleRegistryState: EPeopleRegistryState) => ePeopleRegistryState.editEPerson);
+export const editEPersonSelector = createSelector(ePeopleRegistryStateSelector, (ePeopleRegistryState: EPeopleRegistryState) => ePeopleRegistryState.editEPerson);
 
 /**
  * A service to retrieve {@link EPerson}s from the REST API & EPerson related CRUD actions
diff --git a/src/app/core/json-patch/builder/json-patch-operations-builder.ts b/src/app/core/json-patch/builder/json-patch-operations-builder.ts
index c8b84cbd27..f3f0156b66 100644
--- a/src/app/core/json-patch/builder/json-patch-operations-builder.ts
+++ b/src/app/core/json-patch/builder/json-patch-operations-builder.ts
@@ -1,27 +1,13 @@
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
 
-import {
-  dateToISOFormat,
-  dateToString,
-  isNgbDateStruct,
-} from '../../../shared/date.util';
-import {
-  hasNoValue,
-  hasValue,
-  isEmpty,
-  isNotEmpty,
-} from '../../../shared/empty.util';
+import { dateToISOFormat, dateToString, isNgbDateStruct } from '../../../shared/date.util';
+import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../../shared/empty.util';
 import { FormFieldLanguageValueObject } from '../../../shared/form/builder/models/form-field-language-value.model';
 import { FormFieldMetadataValueObject } from '../../../shared/form/builder/models/form-field-metadata-value.model';
 import { CoreState } from '../../core-state.model';
 import { VocabularyEntry } from '../../submission/vocabularies/models/vocabulary-entry.model';
-import {
-  NewPatchAddOperationAction,
-  NewPatchMoveOperationAction,
-  NewPatchRemoveOperationAction,
-  NewPatchReplaceOperationAction,
-} from '../json-patch-operations.actions';
+import { FlushPatchOperationAction, NewPatchAddOperationAction, NewPatchMoveOperationAction, NewPatchRemoveOperationAction, NewPatchReplaceOperationAction } from '../json-patch-operations.actions';
 import { JsonPatchOperationPathObject } from './json-patch-operation-path-combiner';
 
 /**
@@ -109,6 +95,20 @@ export class JsonPatchOperationsBuilder {
         path.path));
   }
 
+  /**
+   * Dispatches a new FlushPatchOperationAction
+   *
+   * @param path
+   *    a JsonPatchOperationPathObject representing path
+   */
+  flushOperation(path: JsonPatchOperationPathObject) {
+    this.store.dispatch(
+        new FlushPatchOperationAction(
+            path.rootElement,
+            path.subRootElement,
+            path.path));
+  }
+
   protected prepareValue(value: any, plain: boolean, first: boolean) {
     let operationValue: any = null;
     if (hasValue(value)) {
diff --git a/src/app/core/json-patch/json-patch-operations.actions.ts b/src/app/core/json-patch/json-patch-operations.actions.ts
index 6fea7a58fb..81cce174ec 100644
--- a/src/app/core/json-patch/json-patch-operations.actions.ts
+++ b/src/app/core/json-patch/json-patch-operations.actions.ts
@@ -20,6 +20,7 @@ export const JsonPatchOperationsActionTypes = {
   COMMIT_JSON_PATCH_OPERATIONS: type('dspace/core/patch/COMMIT_JSON_PATCH_OPERATIONS'),
   ROLLBACK_JSON_PATCH_OPERATIONS: type('dspace/core/patch/ROLLBACK_JSON_PATCH_OPERATIONS'),
   FLUSH_JSON_PATCH_OPERATIONS: type('dspace/core/patch/FLUSH_JSON_PATCH_OPERATIONS'),
+  FLUSH_JSON_PATCH_OPERATION: type('dspace/core/patch/FLUSH_JSON_PATCH_OPERATION'),
   START_TRANSACTION_JSON_PATCH_OPERATIONS: type('dspace/core/patch/START_TRANSACTION_JSON_PATCH_OPERATIONS'),
   DELETE_PENDING_JSON_PATCH_OPERATIONS: type('dspace/core/patch/DELETE_PENDING_JSON_PATCH_OPERATIONS'),
 };
@@ -120,6 +121,32 @@ export class FlushPatchOperationsAction implements Action {
   }
 }
 
+
+/**
+ * An ngrx action to flush a single operation of the JSON Patch operations
+ */
+export class FlushPatchOperationAction implements Action {
+  type = JsonPatchOperationsActionTypes.FLUSH_JSON_PATCH_OPERATION;
+  payload: {
+    resourceType: string;
+    resourceId: string;
+    path: string
+  };
+
+  /**
+   * Create a new FlushPatchOperationsAction
+   *
+   * @param resourceType
+   *    the resource's type
+   * @param resourceId
+   *    the resource's ID
+   * @param path
+   *    the path of the operation
+   */
+  constructor(resourceType: string, resourceId: string, path: string) {
+    this.payload = { resourceType, resourceId, path };
+  }
+}
 /**
  * An ngrx action to Add new HTTP/PATCH ADD operations to state
  */
@@ -284,4 +311,5 @@ export type PatchOperationsActions
   | NewPatchReplaceOperationAction
   | RollbacktPatchOperationsAction
   | StartTransactionPatchOperationsAction
-  | DeletePendingJsonPatchOperationsAction;
+  | DeletePendingJsonPatchOperationsAction
+  | FlushPatchOperationAction;
diff --git a/src/app/core/json-patch/json-patch-operations.reducer.ts b/src/app/core/json-patch/json-patch-operations.reducer.ts
index d440558494..b33e9139fa 100644
--- a/src/app/core/json-patch/json-patch-operations.reducer.ts
+++ b/src/app/core/json-patch/json-patch-operations.reducer.ts
@@ -1,27 +1,6 @@
-import {
-  hasValue,
-  isNotEmpty,
-  isNotUndefined,
-  isNull,
-} from '../../shared/empty.util';
-import {
-  JsonPatchOperationModel,
-  JsonPatchOperationType,
-} from './json-patch.model';
-import {
-  CommitPatchOperationsAction,
-  DeletePendingJsonPatchOperationsAction,
-  FlushPatchOperationsAction,
-  JsonPatchOperationsActionTypes,
-  NewPatchAddOperationAction,
-  NewPatchCopyOperationAction,
-  NewPatchMoveOperationAction,
-  NewPatchRemoveOperationAction,
-  NewPatchReplaceOperationAction,
-  PatchOperationsActions,
-  RollbacktPatchOperationsAction,
-  StartTransactionPatchOperationsAction,
-} from './json-patch-operations.actions';
+import { hasValue, isNotEmpty, isNotUndefined, isNull } from '../../shared/empty.util';
+import { JsonPatchOperationModel, JsonPatchOperationType } from './json-patch.model';
+import { CommitPatchOperationsAction, DeletePendingJsonPatchOperationsAction, FlushPatchOperationAction, FlushPatchOperationsAction, JsonPatchOperationsActionTypes, NewPatchAddOperationAction, NewPatchCopyOperationAction, NewPatchMoveOperationAction, NewPatchRemoveOperationAction, NewPatchReplaceOperationAction, PatchOperationsActions, RollbacktPatchOperationsAction, StartTransactionPatchOperationsAction } from './json-patch-operations.actions';
 
 /**
  * An interface to represent JSON-PATCH Operation objects to execute
@@ -78,7 +57,7 @@ export function jsonPatchOperationsReducer(state = initialState, action: PatchOp
     }
 
     case JsonPatchOperationsActionTypes.FLUSH_JSON_PATCH_OPERATIONS: {
-      return flushOperation(state, action as FlushPatchOperationsAction);
+      return flushOperations(state, action as FlushPatchOperationsAction);
     }
 
     case JsonPatchOperationsActionTypes.NEW_JSON_PATCH_ADD_OPERATION: {
@@ -113,6 +92,10 @@ export function jsonPatchOperationsReducer(state = initialState, action: PatchOp
       return deletePendingOperations(state, action as DeletePendingJsonPatchOperationsAction);
     }
 
+    case JsonPatchOperationsActionTypes.FLUSH_JSON_PATCH_OPERATION: {
+      return flushOperation(state, action as FlushPatchOperationAction);
+    }
+
     default: {
       return state;
     }
@@ -204,6 +187,39 @@ function deletePendingOperations(state: JsonPatchOperationsState, action: Delete
   return null;
 }
 
+/**
+ * Flush one operation from JsonPatchOperationsState.
+ *
+ * @param state
+ *    the current state
+ * @param action
+ *    an FlushPatchOperationsAction
+ * @return JsonPatchOperationsState
+ *    the new state.
+ */
+function flushOperation(state: JsonPatchOperationsState, action: FlushPatchOperationAction): JsonPatchOperationsState {
+  const payload = action.payload;
+  if (state[payload.resourceType] && state[payload.resourceType].children) {
+    const body = state[payload.resourceType].children[payload.resourceId].body;
+    const operation = body.filter(operations => operations.operation.path === payload.path)[0];
+    const operationIndex = body.indexOf(operation);
+    const newBody = [...body];
+    newBody.splice(operationIndex, 1);
+
+    return Object.assign({}, state, {
+      [action.payload.resourceType]: Object.assign({}, {
+        children: {
+          [action.payload.resourceId]: {
+            body: newBody,
+          }
+        },
+      })
+    });
+  } else {
+    return state;
+  }
+}
+
 /**
  * Add new JSON patch operation list.
  *
@@ -280,7 +296,7 @@ function hasValidBody(state: JsonPatchOperationsState, resourceType: any, resour
  * @return SubmissionObjectState
  *    the new state, with the section new validity status.
  */
-function flushOperation(state: JsonPatchOperationsState, action: FlushPatchOperationsAction): JsonPatchOperationsState {
+function flushOperations(state: JsonPatchOperationsState, action: FlushPatchOperationsAction): JsonPatchOperationsState {
   if (hasValue(state[ action.payload.resourceType ])) {
     let newChildren;
     if (isNotUndefined(action.payload.resourceId)) {
@@ -358,7 +374,28 @@ function addOperationToList(body: JsonPatchOperationObject[], actionType, target
       newBody.push(makeOperationEntry({ op: JsonPatchOperationType.move, from: fromPath, path: targetPath }));
       break;
   }
-  return newBody;
+  return dedupeOperationEntries(newBody);
+}
+
+/**
+ * Dedupe operation entries by op and path. This prevents processing unnecessary patches in a single PATCH request.
+ *
+ * @param body JSON patch operation object entries
+ * @returns deduped JSON patch operation object entries
+ */
+function dedupeOperationEntries(body: JsonPatchOperationObject[]): JsonPatchOperationObject[] {
+  const ops = new Map();
+  for (let i = body.length - 1; i >= 0; i--) {
+    const patch = body[i].operation;
+    const key = `${patch.op}-${patch.path}`;
+    if (!ops.has(key)) {
+      ops.set(key, patch);
+    } else {
+      body.splice(i, 1);
+    }
+  }
+
+  return body;
 }
 
 function makeOperationEntry(operation) {
diff --git a/src/app/core/notifications/models/suggestion-objects.resource-type.ts b/src/app/core/notifications/models/suggestion-objects.resource-type.ts
new file mode 100644
index 0000000000..8f83d86376
--- /dev/null
+++ b/src/app/core/notifications/models/suggestion-objects.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from '../../shared/resource-type';
+
+/**
+ * The resource type for the Suggestion object
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const SUGGESTION = new ResourceType('suggestion');
diff --git a/src/app/core/notifications/models/suggestion-source-object.resource-type.ts b/src/app/core/notifications/models/suggestion-source-object.resource-type.ts
new file mode 100644
index 0000000000..e319ed5109
--- /dev/null
+++ b/src/app/core/notifications/models/suggestion-source-object.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from '../../shared/resource-type';
+
+/**
+ * The resource type for the Suggestion Source object
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const SUGGESTION_SOURCE = new ResourceType('suggestionsource');
diff --git a/src/app/core/notifications/models/suggestion-source.model.ts b/src/app/core/notifications/models/suggestion-source.model.ts
new file mode 100644
index 0000000000..f06cf7633d
--- /dev/null
+++ b/src/app/core/notifications/models/suggestion-source.model.ts
@@ -0,0 +1,47 @@
+import { autoserialize, deserialize } from 'cerialize';
+
+import { SUGGESTION_SOURCE } from './suggestion-source-object.resource-type';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { ResourceType } from '../../shared/resource-type';
+import { HALLink } from '../../shared/hal-link.model';
+import { typedObject } from '../../cache/builders/build-decorators';
+import { CacheableObject } from '../../cache/cacheable-object.model';
+
+/**
+ * The interface representing the Suggestion Source model
+ */
+@typedObject
+export class SuggestionSource implements CacheableObject {
+  /**
+   * A string representing the kind of object, e.g. community, item, …
+   */
+  static type = SUGGESTION_SOURCE;
+
+  /**
+   * The Suggestion Target id
+   */
+  @autoserialize
+  id: string;
+
+  /**
+   * The total number of suggestions provided by Suggestion Target for
+   */
+  @autoserialize
+  total: number;
+
+  /**
+   * The type of this ConfigObject
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  /**
+   * The links to all related resources returned by the rest api.
+   */
+  @deserialize
+  _links: {
+    self: HALLink,
+    suggestiontargets: HALLink
+  };
+}
diff --git a/src/app/core/notifications/models/suggestion-target-object.resource-type.ts b/src/app/core/notifications/models/suggestion-target-object.resource-type.ts
new file mode 100644
index 0000000000..81b1b5c261
--- /dev/null
+++ b/src/app/core/notifications/models/suggestion-target-object.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from '../../shared/resource-type';
+
+/**
+ * The resource type for the Suggestion Target object
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const SUGGESTION_TARGET = new ResourceType('suggestiontarget');
diff --git a/src/app/core/notifications/models/suggestion-target.model.ts b/src/app/core/notifications/models/suggestion-target.model.ts
new file mode 100644
index 0000000000..fd1cb3c715
--- /dev/null
+++ b/src/app/core/notifications/models/suggestion-target.model.ts
@@ -0,0 +1,60 @@
+import { autoserialize, deserialize } from 'cerialize';
+
+import { CacheableObject } from '../../cache/cacheable-object.model';
+import { SUGGESTION_TARGET } from './suggestion-target-object.resource-type';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { ResourceType } from '../../shared/resource-type';
+import { HALLink } from '../../shared/hal-link.model';
+import { typedObject } from '../../cache/builders/build-decorators';
+
+/**
+ * The interface representing the Suggestion Target model
+ */
+@typedObject
+export class SuggestionTarget implements CacheableObject {
+  /**
+   * A string representing the kind of object, e.g. community, item, …
+   */
+  static type = SUGGESTION_TARGET;
+
+  /**
+   * The Suggestion Target id
+   */
+  @autoserialize
+  id: string;
+
+  /**
+   * The Suggestion Target name to display
+   */
+  @autoserialize
+  display: string;
+
+  /**
+   * The Suggestion Target source to display
+   */
+  @autoserialize
+  source: string;
+
+  /**
+   * The total number of suggestions provided by Suggestion Target for
+   */
+  @autoserialize
+  total: number;
+
+  /**
+   * The type of this ConfigObject
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  /**
+   * The links to all related resources returned by the rest api.
+   */
+  @deserialize
+  _links: {
+    self: HALLink,
+    suggestions: HALLink,
+    target: HALLink
+  };
+}
diff --git a/src/app/core/notifications/models/suggestion.model.ts b/src/app/core/notifications/models/suggestion.model.ts
new file mode 100644
index 0000000000..99231c5219
--- /dev/null
+++ b/src/app/core/notifications/models/suggestion.model.ts
@@ -0,0 +1,88 @@
+import { autoserialize, autoserializeAs, deserialize } from 'cerialize';
+
+import { SUGGESTION } from './suggestion-objects.resource-type';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { ResourceType } from '../../shared/resource-type';
+import { HALLink } from '../../shared/hal-link.model';
+import { typedObject } from '../../cache/builders/build-decorators';
+import { MetadataMap, MetadataMapSerializer } from '../../shared/metadata.models';
+import { CacheableObject } from '../../cache/cacheable-object.model';
+
+/**
+ * The interface representing Suggestion Evidences such as scores (authorScore, datescore)
+ */
+export interface SuggestionEvidences {
+  [sectionId: string]: {
+    score: string;
+    notes: string
+  };
+}
+/**
+ * The interface representing the Suggestion Source model
+ */
+@typedObject
+export class Suggestion implements CacheableObject {
+  /**
+   * A string representing the kind of object, e.g. community, item, …
+   */
+  static type = SUGGESTION;
+
+  /**
+   * The Suggestion id
+   */
+  @autoserialize
+  id: string;
+
+  /**
+   * The Suggestion name to display
+   */
+  @autoserialize
+  display: string;
+
+  /**
+   * The Suggestion source to display
+   */
+  @autoserialize
+  source: string;
+
+  /**
+   * The Suggestion external source uri
+   */
+  @autoserialize
+  externalSourceUri: string;
+
+  /**
+   * The Total Score of the suggestion
+   */
+  @autoserialize
+  score: string;
+
+  /**
+   * The total number of suggestions provided by Suggestion Target for
+   */
+  @autoserialize
+  evidences: SuggestionEvidences;
+
+  /**
+   * All metadata of this suggestion object
+   */
+  @excludeFromEquals
+  @autoserializeAs(MetadataMapSerializer)
+  metadata: MetadataMap;
+
+  /**
+   * The type of this ConfigObject
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  /**
+   * The links to all related resources returned by the rest api.
+   */
+  @deserialize
+  _links: {
+    self: HALLink,
+    target: HALLink
+  };
+}
diff --git a/src/app/core/notifications/qa/events/quality-assurance-event-data.service.spec.ts b/src/app/core/notifications/qa/events/quality-assurance-event-data.service.spec.ts
index 14edc32965..df378b8a32 100644
--- a/src/app/core/notifications/qa/events/quality-assurance-event-data.service.spec.ts
+++ b/src/app/core/notifications/qa/events/quality-assurance-event-data.service.spec.ts
@@ -1,17 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { ReplaceOperation } from 'fast-json-patch';
-import {
-  cold,
-  getTestScheduler,
-} from 'jasmine-marbles';
+import { cold, getTestScheduler } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
-import {
-  qualityAssuranceEventObjectMissingPid,
-  qualityAssuranceEventObjectMissingPid2,
-  qualityAssuranceEventObjectMissingProjectFound,
-} from '../../../../shared/mocks/notifications.mock';
+import { qualityAssuranceEventObjectMissingPid, qualityAssuranceEventObjectMissingPid2, qualityAssuranceEventObjectMissingProjectFound } from '../../../../shared/mocks/notifications.mock';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { createSuccessfulRemoteDataObject } from '../../../../shared/remote-data.utils';
 import { RemoteDataBuildService } from '../../../cache/builders/remote-data-build.service';
@@ -24,6 +17,7 @@ import { RequestEntry } from '../../../data/request-entry.model';
 import { HALEndpointService } from '../../../shared/hal-endpoint.service';
 import { PageInfo } from '../../../shared/page-info.model';
 import { QualityAssuranceEventDataService } from './quality-assurance-event-data.service';
+import { ObjectCacheServiceStub } from '../../../../shared/testing/object-cache-service.stub';
 
 describe('QualityAssuranceEventDataService', () => {
   let scheduler: TestScheduler;
@@ -34,7 +28,7 @@ describe('QualityAssuranceEventDataService', () => {
   let responseCacheEntryC: RequestEntry;
   let requestService: RequestService;
   let rdbService: RemoteDataBuildService;
-  let objectCache: ObjectCacheService;
+  let objectCache: ObjectCacheServiceStub;
   let halService: HALEndpointService;
   let notificationsService: NotificationsService;
   let http: HttpClient;
@@ -93,7 +87,7 @@ describe('QualityAssuranceEventDataService', () => {
       buildFromRequestUUIDAndAwait: jasmine.createSpy('buildFromRequestUUIDAndAwait'),
     });
 
-    objectCache = {} as ObjectCacheService;
+    objectCache = new ObjectCacheServiceStub();
     halService = jasmine.createSpyObj('halService', {
       getEndpoint: cold('a|', { a: endpointURL }),
     });
@@ -105,7 +99,7 @@ describe('QualityAssuranceEventDataService', () => {
     service = new QualityAssuranceEventDataService(
       requestService,
       rdbService,
-      objectCache,
+      objectCache as ObjectCacheService,
       halService,
       notificationsService,
       comparator,
diff --git a/src/app/core/notifications/qa/events/quality-assurance-event-data.service.ts b/src/app/core/notifications/qa/events/quality-assurance-event-data.service.ts
index 20a93cdbf6..2d5b408262 100644
--- a/src/app/core/notifications/qa/events/quality-assurance-event-data.service.ts
+++ b/src/app/core/notifications/qa/events/quality-assurance-event-data.service.ts
@@ -1,47 +1,32 @@
 import { Injectable } from '@angular/core';
 import { ReplaceOperation } from 'fast-json-patch';
 import { Observable } from 'rxjs';
-import {
-  find,
-  take,
-} from 'rxjs/operators';
+import { find, switchMap, take } from 'rxjs/operators';
 
 import { hasValue } from '../../../../shared/empty.util';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { FollowLinkConfig } from '../../../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../../../cache/builders/remote-data-build.service';
 import { ObjectCacheService } from '../../../cache/object-cache.service';
-import {
-  CreateData,
-  CreateDataImpl,
-} from '../../../data/base/create-data';
+import { CreateData, CreateDataImpl } from '../../../data/base/create-data';
 import { dataService } from '../../../data/base/data-service.decorator';
-import {
-  DeleteData,
-  DeleteDataImpl,
-} from '../../../data/base/delete-data';
+import { DeleteData, DeleteDataImpl } from '../../../data/base/delete-data';
 import { IdentifiableDataService } from '../../../data/base/identifiable-data.service';
-import {
-  PatchData,
-  PatchDataImpl,
-} from '../../../data/base/patch-data';
-import {
-  SearchData,
-  SearchDataImpl,
-} from '../../../data/base/search-data';
+import { PatchData, PatchDataImpl } from '../../../data/base/patch-data';
+import { SearchData, SearchDataImpl } from '../../../data/base/search-data';
 import { DefaultChangeAnalyzer } from '../../../data/default-change-analyzer.service';
 import { FindListOptions } from '../../../data/find-list-options.model';
 import { PaginatedList } from '../../../data/paginated-list.model';
 import { RemoteData } from '../../../data/remote-data';
-import {
-  DeleteByIDRequest,
-  PostRequest,
-} from '../../../data/request.models';
+import { DeleteByIDRequest, PostRequest } from '../../../data/request.models';
 import { RequestService } from '../../../data/request.service';
 import { HALEndpointService } from '../../../shared/hal-endpoint.service';
 import { NoContent } from '../../../shared/NoContent.model';
 import { QualityAssuranceEventObject } from '../models/quality-assurance-event.model';
 import { QUALITY_ASSURANCE_EVENT_OBJECT } from '../models/quality-assurance-event-object.resource-type';
+import { HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpOptions } from '../../../dspace-rest/dspace-rest.service';
+import { QualityAssuranceEventData } from '../../../../notifications/qa/project-entry-import-modal/project-entry-import-modal.component';
 
 /**
  * The service handling all Quality Assurance topic REST requests.
@@ -101,6 +86,16 @@ export class QualityAssuranceEventDataService extends IdentifiableDataService[]): Observable>> {
+    return this.searchData.searchBy('findByTopic', options, true, true, ...linksToFollow);
+  }
+
   /**
    * Clear findByTopic requests from cache
    */
@@ -217,4 +212,38 @@ export class QualityAssuranceEventDataService extends IdentifiableDataService(requestId);
   }
+
+  /**
+   * Perform a post on an endpoint related to correction type
+   * @param data the data to post
+   * @returns the RestResponse as an Observable
+   */
+  postData(target: string, correctionType: string, related: string, reason: string): Observable> {
+    const requestId = this.requestService.generateRequestId();
+    const href$ = this.getBrowseEndpoint();
+
+    return href$.pipe(
+      switchMap((href: string) => {
+        const options: HttpOptions = Object.create({});
+        let headers = new HttpHeaders();
+        headers = headers.append('Content-Type', 'application/json');
+        options.headers = headers;
+        let params = new HttpParams();
+        params = params.append('target', target)
+                       .append('correctionType', correctionType);
+        options.params = params;
+        const request = new PostRequest(requestId, href, {'reason': reason} , options);
+        if (hasValue(this.responseMsToLive)) {
+          request.responseMsToLive = this.responseMsToLive;
+        }
+        this.requestService.send(request);
+        return this.rdbService.buildFromRequestUUID(requestId);
+      })
+    );
+  }
+
+  public deleteQAEvent(qaEvent: QualityAssuranceEventData): Observable> {
+      return this.deleteData.delete(qaEvent.id);
+  }
+
 }
diff --git a/src/app/core/notifications/qa/models/quality-assurance-event.model.ts b/src/app/core/notifications/qa/models/quality-assurance-event.model.ts
index 7ca22acac8..2a42000daf 100644
--- a/src/app/core/notifications/qa/models/quality-assurance-event.model.ts
+++ b/src/app/core/notifications/qa/models/quality-assurance-event.model.ts
@@ -1,15 +1,8 @@
 /* eslint-disable max-classes-per-file */
-import {
-  autoserialize,
-  autoserializeAs,
-  deserialize,
-} from 'cerialize';
+import { autoserialize, autoserializeAs, deserialize } from 'cerialize';
 import { Observable } from 'rxjs';
 
-import {
-  link,
-  typedObject,
-} from '../../../cache/builders/build-decorators';
+import { link, typedObject } from '../../../cache/builders/build-decorators';
 import { CacheableObject } from '../../../cache/cacheable-object.model';
 import { RemoteData } from '../../../data/remote-data';
 import { HALLink } from '../../../shared/hal-link.model';
@@ -36,6 +29,8 @@ export interface SourceQualityAssuranceEventMessageObject {
    */
   type: string;
 
+  reason: string;
+
   /**
    * The value suggested by Notifications
    */
diff --git a/src/app/core/notifications/qa/source/quality-assurance-source-data.service.spec.ts b/src/app/core/notifications/qa/source/quality-assurance-source-data.service.spec.ts
index 6f158627ed..0b4395cb23 100644
--- a/src/app/core/notifications/qa/source/quality-assurance-source-data.service.spec.ts
+++ b/src/app/core/notifications/qa/source/quality-assurance-source-data.service.spec.ts
@@ -1,15 +1,9 @@
 import { HttpClient } from '@angular/common/http';
-import {
-  cold,
-  getTestScheduler,
-} from 'jasmine-marbles';
+import { cold, getTestScheduler } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
-import {
-  qualityAssuranceSourceObjectMoreAbstract,
-  qualityAssuranceSourceObjectMorePid,
-} from '../../../../shared/mocks/notifications.mock';
+import { qualityAssuranceSourceObjectMoreAbstract, qualityAssuranceSourceObjectMorePid } from '../../../../shared/mocks/notifications.mock';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { createSuccessfulRemoteDataObject } from '../../../../shared/remote-data.utils';
 import { RemoteDataBuildService } from '../../../cache/builders/remote-data-build.service';
@@ -21,6 +15,7 @@ import { RequestEntry } from '../../../data/request-entry.model';
 import { HALEndpointService } from '../../../shared/hal-endpoint.service';
 import { PageInfo } from '../../../shared/page-info.model';
 import { QualityAssuranceSourceDataService } from './quality-assurance-source-data.service';
+import { ObjectCacheServiceStub } from '../../../../shared/testing/object-cache-service.stub';
 
 describe('QualityAssuranceSourceDataService', () => {
   let scheduler: TestScheduler;
@@ -28,7 +23,7 @@ describe('QualityAssuranceSourceDataService', () => {
   let responseCacheEntry: RequestEntry;
   let requestService: RequestService;
   let rdbService: RemoteDataBuildService;
-  let objectCache: ObjectCacheService;
+  let objectCache: ObjectCacheServiceStub;
   let halService: HALEndpointService;
   let notificationsService: NotificationsService;
   let http: HttpClient;
@@ -65,7 +60,7 @@ describe('QualityAssuranceSourceDataService', () => {
       }),
     });
 
-    objectCache = {} as ObjectCacheService;
+    objectCache = new ObjectCacheServiceStub();
     halService = jasmine.createSpyObj('halService', {
       getEndpoint: cold('a|', { a: endpointURL }),
     });
@@ -77,7 +72,7 @@ describe('QualityAssuranceSourceDataService', () => {
     service = new QualityAssuranceSourceDataService(
       requestService,
       rdbService,
-      objectCache,
+      objectCache as ObjectCacheService,
       halService,
       notificationsService,
     );
diff --git a/src/app/core/notifications/qa/source/quality-assurance-source-data.service.ts b/src/app/core/notifications/qa/source/quality-assurance-source-data.service.ts
index e182b8bcc8..62bd075483 100644
--- a/src/app/core/notifications/qa/source/quality-assurance-source-data.service.ts
+++ b/src/app/core/notifications/qa/source/quality-assurance-source-data.service.ts
@@ -6,10 +6,7 @@ import { FollowLinkConfig } from '../../../../shared/utils/follow-link-config.mo
 import { RemoteDataBuildService } from '../../../cache/builders/remote-data-build.service';
 import { ObjectCacheService } from '../../../cache/object-cache.service';
 import { dataService } from '../../../data/base/data-service.decorator';
-import {
-  FindAllData,
-  FindAllDataImpl,
-} from '../../../data/base/find-all-data';
+import { FindAllData, FindAllDataImpl } from '../../../data/base/find-all-data';
 import { IdentifiableDataService } from '../../../data/base/identifiable-data.service';
 import { FindListOptions } from '../../../data/find-list-options.model';
 import { PaginatedList } from '../../../data/paginated-list.model';
@@ -18,6 +15,7 @@ import { RequestService } from '../../../data/request.service';
 import { HALEndpointService } from '../../../shared/hal-endpoint.service';
 import { QualityAssuranceSourceObject } from '../models/quality-assurance-source.model';
 import { QUALITY_ASSURANCE_SOURCE_OBJECT } from '../models/quality-assurance-source-object.resource-type';
+import { SearchData, SearchDataImpl } from '../../../data/base/search-data';
 
 /**
  * The service handling all Quality Assurance source REST requests.
@@ -27,6 +25,9 @@ import { QUALITY_ASSURANCE_SOURCE_OBJECT } from '../models/quality-assurance-sou
 export class QualityAssuranceSourceDataService extends IdentifiableDataService {
 
   private findAllData: FindAllData;
+  private searchAllData: SearchData;
+
+  private searchByTargetMethod = 'byTarget';
 
   /**
    * Initialize service variables
@@ -45,6 +46,7 @@ export class QualityAssuranceSourceDataService extends IdentifiableDataService[]): Observable> {
     return this.findById(id, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
   }
+
+  /**
+   * Retrieves a paginated list of QualityAssuranceSourceObject objects that are associated with a given target object.
+   * @param options The options for the search query.
+   * @param useCachedVersionIfAvailable Whether to use a cached version of the data if available.
+   * @param reRequestOnStale Whether to re-request the data if the cached version is stale.
+   * @param linksToFollow The links to follow to retrieve the data.
+   * @returns An observable that emits a RemoteData object containing the paginated list of QualityAssuranceSourceObject objects.
+   */
+  public getSourcesByTarget(options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.searchAllData.searchBy(this.searchByTargetMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 }
diff --git a/src/app/core/notifications/qa/topics/quality-assurance-topic-data.service.spec.ts b/src/app/core/notifications/qa/topics/quality-assurance-topic-data.service.spec.ts
index 208e2f1599..5b51ef5bae 100644
--- a/src/app/core/notifications/qa/topics/quality-assurance-topic-data.service.spec.ts
+++ b/src/app/core/notifications/qa/topics/quality-assurance-topic-data.service.spec.ts
@@ -1,15 +1,9 @@
 import { HttpClient } from '@angular/common/http';
-import {
-  cold,
-  getTestScheduler,
-} from 'jasmine-marbles';
+import { cold, getTestScheduler } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
-import {
-  qualityAssuranceTopicObjectMoreAbstract,
-  qualityAssuranceTopicObjectMorePid,
-} from '../../../../shared/mocks/notifications.mock';
+import { qualityAssuranceTopicObjectMoreAbstract, qualityAssuranceTopicObjectMorePid } from '../../../../shared/mocks/notifications.mock';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { createSuccessfulRemoteDataObject } from '../../../../shared/remote-data.utils';
 import { RemoteDataBuildService } from '../../../cache/builders/remote-data-build.service';
@@ -21,6 +15,7 @@ import { RequestEntry } from '../../../data/request-entry.model';
 import { HALEndpointService } from '../../../shared/hal-endpoint.service';
 import { PageInfo } from '../../../shared/page-info.model';
 import { QualityAssuranceTopicDataService } from './quality-assurance-topic-data.service';
+import { ObjectCacheServiceStub } from '../../../../shared/testing/object-cache-service.stub';
 
 describe('QualityAssuranceTopicDataService', () => {
   let scheduler: TestScheduler;
@@ -28,7 +23,7 @@ describe('QualityAssuranceTopicDataService', () => {
   let responseCacheEntry: RequestEntry;
   let requestService: RequestService;
   let rdbService: RemoteDataBuildService;
-  let objectCache: ObjectCacheService;
+  let objectCache: ObjectCacheServiceStub;
   let halService: HALEndpointService;
   let notificationsService: NotificationsService;
   let http: HttpClient;
@@ -65,7 +60,7 @@ describe('QualityAssuranceTopicDataService', () => {
       }),
     });
 
-    objectCache = {} as ObjectCacheService;
+    objectCache = new ObjectCacheServiceStub();
     halService = jasmine.createSpyObj('halService', {
       getEndpoint: cold('a|', { a: endpointURL }),
     });
@@ -77,27 +72,34 @@ describe('QualityAssuranceTopicDataService', () => {
     service = new QualityAssuranceTopicDataService(
       requestService,
       rdbService,
-      objectCache,
+      objectCache as ObjectCacheService,
       halService,
       notificationsService,
     );
 
     spyOn((service as any).findAllData, 'findAll').and.callThrough();
     spyOn((service as any), 'findById').and.callThrough();
+    spyOn((service as any).searchData, 'searchBy').and.callThrough();
   });
 
-  describe('getTopics', () => {
-    it('should call findListByHref', (done) => {
-      service.getTopics().subscribe(
-        (res) => {
-          expect((service as any).findAllData.findAll).toHaveBeenCalledWith({}, true, true);
-        },
+  describe('searchTopicsByTarget', () => {
+    it('should call searchData.searchBy with the correct parameters', () => {
+      const options = { elementsPerPage: 10 };
+      const useCachedVersionIfAvailable = true;
+      const reRequestOnStale = true;
+
+      service.searchTopicsByTarget(options, useCachedVersionIfAvailable, reRequestOnStale);
+
+      expect((service as any).searchData.searchBy).toHaveBeenCalledWith(
+        'byTarget',
+        options,
+        useCachedVersionIfAvailable,
+        reRequestOnStale
       );
-      done();
     });
 
     it('should return a RemoteData> for the object with the given URL', () => {
-      const result = service.getTopics();
+      const result = service.searchTopicsByTarget();
       const expected = cold('(a)', {
         a: paginatedListRD,
       });
diff --git a/src/app/core/notifications/qa/topics/quality-assurance-topic-data.service.ts b/src/app/core/notifications/qa/topics/quality-assurance-topic-data.service.ts
index 8a94fc78e1..5681667988 100644
--- a/src/app/core/notifications/qa/topics/quality-assurance-topic-data.service.ts
+++ b/src/app/core/notifications/qa/topics/quality-assurance-topic-data.service.ts
@@ -6,10 +6,7 @@ import { FollowLinkConfig } from '../../../../shared/utils/follow-link-config.mo
 import { RemoteDataBuildService } from '../../../cache/builders/remote-data-build.service';
 import { ObjectCacheService } from '../../../cache/object-cache.service';
 import { dataService } from '../../../data/base/data-service.decorator';
-import {
-  FindAllData,
-  FindAllDataImpl,
-} from '../../../data/base/find-all-data';
+import { FindAllData, FindAllDataImpl } from '../../../data/base/find-all-data';
 import { IdentifiableDataService } from '../../../data/base/identifiable-data.service';
 import { FindListOptions } from '../../../data/find-list-options.model';
 import { PaginatedList } from '../../../data/paginated-list.model';
@@ -18,6 +15,7 @@ import { RequestService } from '../../../data/request.service';
 import { HALEndpointService } from '../../../shared/hal-endpoint.service';
 import { QualityAssuranceTopicObject } from '../models/quality-assurance-topic.model';
 import { QUALITY_ASSURANCE_TOPIC_OBJECT } from '../models/quality-assurance-topic-object.resource-type';
+import { SearchData, SearchDataImpl } from '../../../data/base/search-data';
 
 /**
  * The service handling all Quality Assurance topic REST requests.
@@ -27,6 +25,10 @@ import { QUALITY_ASSURANCE_TOPIC_OBJECT } from '../models/quality-assurance-topi
 export class QualityAssuranceTopicDataService extends IdentifiableDataService {
 
   private findAllData: FindAllData;
+  private searchData: SearchData;
+
+  private searchByTargetMethod = 'byTarget';
+  private searchBySourceMethod = 'bySource';
 
   /**
    * Initialize service variables
@@ -45,23 +47,31 @@ export class QualityAssuranceTopicDataService extends IdentifiableDataService>>
-   *    The list of Quality Assurance topics.
+   * Search for Quality Assurance topics.
+   * @param options The search options.
+   * @param useCachedVersionIfAvailable Whether to use cached version if available.
+   * @param reRequestOnStale Whether to re-request on stale.
+   * @param linksToFollow The links to follow.
+   * @returns An observable of remote data containing a paginated list of Quality Assurance topics.
    */
-  public getTopics(options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
-    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  public searchTopicsByTarget(options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.searchData.searchBy(this.searchByTargetMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  /**
+   * Searches for quality assurance topics by source.
+   * @param options The search options.
+   * @param useCachedVersionIfAvailable Whether to use a cached version if available.
+   * @param reRequestOnStale Whether to re-request the data if it's stale.
+   * @param linksToFollow The links to follow.
+   * @returns An observable of the remote data containing the paginated list of quality assurance topics.
+   */
+  public searchTopicsBySource(options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.searchData.searchBy(this.searchBySourceMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
   }
 
   /**
diff --git a/src/app/core/notifications/source/suggestion-source-data.service.ts b/src/app/core/notifications/source/suggestion-source-data.service.ts
new file mode 100644
index 0000000000..f00a84c95b
--- /dev/null
+++ b/src/app/core/notifications/source/suggestion-source-data.service.ts
@@ -0,0 +1,96 @@
+import { Injectable } from '@angular/core';
+import { dataService } from '../../data/base/data-service.decorator';
+import { SUGGESTION_SOURCE } from '../models/suggestion-source-object.resource-type';
+import { IdentifiableDataService } from '../../data/base/identifiable-data.service';
+import { SuggestionSource } from '../models/suggestion-source.model';
+import { FindAllData, FindAllDataImpl } from '../../data/base/find-all-data';
+import { Store } from '@ngrx/store';
+import { RequestService } from '../../data/request.service';
+import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
+import { CoreState } from '../../core-state.model';
+import { ObjectCacheService } from '../../cache/object-cache.service';
+import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { FindListOptions } from '../../data/find-list-options.model';
+import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
+import { PaginatedList } from '../../data/paginated-list.model';
+import { RemoteData } from '../../data/remote-data';
+import { Observable } from 'rxjs/internal/Observable';
+import { DefaultChangeAnalyzer } from '../../data/default-change-analyzer.service';
+
+/**
+ * Service that retrieves Suggestion Source data
+ */
+@Injectable()
+@dataService(SUGGESTION_SOURCE)
+export class SuggestionSourceDataService extends IdentifiableDataService {
+
+  protected linkPath = 'suggestionsources';
+
+  private findAllData: FindAllData;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected store: Store,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DefaultChangeAnalyzer) {
+    super('suggestionsources', requestService, rdbService, objectCache, halService);
+    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+  }
+  /**
+   * Return the list of Suggestion source.
+   *
+   * @param options                     Find list options 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>>
+   *    The list of Quality Assurance source.
+   */
+  public getSources(options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  /**
+   * Return a single Suggestoin source.
+   *
+   * @param id                          The Quality Assurance source id
+   * @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>    The Quality Assurance source.
+   */
+  public getSource(id: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable> {
+    return this.findById(id, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+
+  /**
+   * Returns {@link RemoteData} of all object with a list of {@link FollowLinkConfig}, to indicate which embedded
+   * info should be added to the objects
+   *
+   * @param options                     Find list options 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 object list
+   */
+  findAll(options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+}
diff --git a/src/app/core/notifications/source/suggestions-source-data.service.spec.ts b/src/app/core/notifications/source/suggestions-source-data.service.spec.ts
new file mode 100644
index 0000000000..9e064bf6da
--- /dev/null
+++ b/src/app/core/notifications/source/suggestions-source-data.service.spec.ts
@@ -0,0 +1,113 @@
+import { TestScheduler } from 'rxjs/testing';
+import { RequestService } from '../../data/request.service';
+import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../cache/object-cache.service';
+import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { RequestEntry } from '../../data/request-entry.model';
+import { cold, getTestScheduler } from 'jasmine-marbles';
+import { RestResponse } from '../../cache/response.models';
+import { of as observableOf } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../../core-state.model';
+import { HttpClient } from '@angular/common/http';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { DefaultChangeAnalyzer } from '../../data/default-change-analyzer.service';
+import { testFindAllDataImplementation } from '../../data/base/find-all-data.spec';
+import { FindAllData } from '../../data/base/find-all-data';
+import { GetRequest } from '../../data/request.models';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { RemoteData } from '../../data/remote-data';
+import { RequestEntryState } from '../../data/request-entry-state.model';
+import { SuggestionSourceDataService } from './suggestion-source-data.service';
+import { SuggestionSource } from '../models/suggestion-source.model';
+
+describe('SuggestionSourceDataService test', () => {
+  let scheduler: TestScheduler;
+  let service: SuggestionSourceDataService;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+  let objectCache: ObjectCacheService;
+  let halService: HALEndpointService;
+  let notificationsService: NotificationsService;
+  let http: HttpClient;
+  let comparator: DefaultChangeAnalyzer;
+  let responseCacheEntry: RequestEntry;
+
+  const store = {} as Store;
+  const endpointURL = `https://rest.api/rest/api/suggestionsources`;
+  const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+
+  const remoteDataMocks = {
+    Success: new RemoteData(null, null, null, RequestEntryState.Success, null, null, 200),
+  };
+
+  function initTestService() {
+    return new SuggestionSourceDataService(
+      requestService,
+      rdbService,
+      store,
+      objectCache,
+      halService,
+      notificationsService,
+      http,
+      comparator
+    );
+  }
+
+  beforeEach(() => {
+    scheduler = getTestScheduler();
+
+    objectCache = {} as ObjectCacheService;
+    http = {} as HttpClient;
+    notificationsService = {} as NotificationsService;
+    comparator = {} as DefaultChangeAnalyzer;
+    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),
+      buildList: cold('a', { a: remoteDataMocks.Success })
+    });
+
+
+    service = initTestService();
+  });
+
+  describe('composition', () => {
+    const initFindAllService = () => new SuggestionSourceDataService(null, null, null, null, null, null, null, null) as unknown as FindAllData;
+    testFindAllDataImplementation(initFindAllService);
+  });
+
+  describe('getSources', () => {
+    it('should send a new GetRequest', () => {
+      const expected = new GetRequest(requestService.generateRequestId(),  `${endpointURL}`);
+      scheduler.schedule(() => service.getSources().subscribe());
+      scheduler.flush();
+
+      expect(requestService.send).toHaveBeenCalledWith(expected, true);
+    });
+  });
+
+  describe('getSource', () => {
+    it('should send a new GetRequest', () => {
+      const expected = new GetRequest(requestService.generateRequestId(),  `${endpointURL}/testId`);
+      scheduler.schedule(() => service.getSource('testId').subscribe());
+      scheduler.flush();
+
+      expect(requestService.send).toHaveBeenCalledWith(expected, true);
+    });
+  });
+});
diff --git a/src/app/core/notifications/suggestion-data.service.spec.ts b/src/app/core/notifications/suggestion-data.service.spec.ts
new file mode 100644
index 0000000000..c0bc97ea12
--- /dev/null
+++ b/src/app/core/notifications/suggestion-data.service.spec.ts
@@ -0,0 +1,173 @@
+import { TestScheduler } from 'rxjs/testing';
+import { SuggestionDataServiceImpl, SuggestionsDataService } from './suggestions-data.service';
+import { RequestService } from '../data/request.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
+import { Suggestion } from './models/suggestion.model';
+import { cold, getTestScheduler } from 'jasmine-marbles';
+import { RequestEntry } from '../data/request-entry.model';
+import { RestResponse } from '../cache/response.models';
+import { of as observableOf } from 'rxjs';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { RemoteData } from '../data/remote-data';
+import { RequestEntryState } from '../data/request-entry-state.model';
+import { SuggestionSource } from './models/suggestion-source.model';
+import { SuggestionTarget } from './models/suggestion-target.model';
+import { SuggestionSourceDataService } from './source/suggestion-source-data.service';
+import { SuggestionTargetDataService } from './target/suggestion-target-data.service';
+import { RequestParam } from '../cache/models/request-param.model';
+
+describe('SuggestionDataService test', () => {
+  let scheduler: TestScheduler;
+  let service: SuggestionsDataService;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+  let objectCache: ObjectCacheService;
+  let halService: HALEndpointService;
+  let notificationsService: NotificationsService;
+  let http: HttpClient;
+  let comparatorSuggestion: DefaultChangeAnalyzer;
+  let comparatorSuggestionSource: DefaultChangeAnalyzer;
+  let comparatorSuggestionTarget: DefaultChangeAnalyzer;
+  let suggestionSourcesDataService: SuggestionSourceDataService;
+  let suggestionTargetsDataService: SuggestionTargetDataService;
+  let suggestionsDataService: SuggestionDataServiceImpl;
+  let responseCacheEntry: RequestEntry;
+
+
+  const testSource = 'test-source';
+  const testUserId = '1234-4321';
+  const endpointURL = `https://rest.api/rest/api/`;
+  const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+  const remoteDataMocks = {
+    Success: new RemoteData(null, null, null, RequestEntryState.Success, null, null, 200),
+  };
+
+  function initTestService() {
+    return new SuggestionsDataService(
+      requestService,
+      rdbService,
+      objectCache,
+      halService,
+      notificationsService,
+      http,
+      comparatorSuggestion,
+      comparatorSuggestionSource,
+      comparatorSuggestionTarget
+    );
+  }
+
+  beforeEach(() => {
+    scheduler = getTestScheduler();
+
+    objectCache = {} as ObjectCacheService;
+    http = {} as HttpClient;
+    notificationsService = {} as NotificationsService;
+    comparatorSuggestion = {} as DefaultChangeAnalyzer;
+    comparatorSuggestionTarget = {} as DefaultChangeAnalyzer;
+    comparatorSuggestionSource = {} as DefaultChangeAnalyzer;
+    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),
+      setStaleByHrefSubstring: observableOf(true)
+    });
+
+    halService = jasmine.createSpyObj('halService', {
+      getEndpoint: observableOf(endpointURL)
+    });
+
+    rdbService = jasmine.createSpyObj('rdbService', {
+      buildSingle: createSuccessfulRemoteDataObject$({}, 500),
+      buildList: cold('a', { a: remoteDataMocks.Success })
+    });
+
+
+    suggestionSourcesDataService = jasmine.createSpyObj('suggestionSourcesDataService', {
+      getSources: observableOf(null),
+    });
+
+    suggestionTargetsDataService = jasmine.createSpyObj('suggestionTargetsDataService', {
+      getTargets: observableOf(null),
+      getTargetsByUser: observableOf(null),
+      findById: observableOf(null),
+    });
+
+    suggestionsDataService = jasmine.createSpyObj('suggestionsDataService', {
+      searchBy: observableOf(null),
+      delete: observableOf(null),
+    });
+
+
+    service = initTestService();
+    /* eslint-disable-next-line @typescript-eslint/dot-notation */
+    service['suggestionSourcesDataService'] = suggestionSourcesDataService;
+    /* eslint-disable-next-line @typescript-eslint/dot-notation */
+    service['suggestionTargetsDataService'] = suggestionTargetsDataService;
+    /* eslint-disable-next-line @typescript-eslint/dot-notation */
+    service['suggestionsDataService'] = suggestionsDataService;
+  });
+
+  describe('Suggestion targets service', () => {
+    it('should call suggestionSourcesDataService.getTargets', () => {
+      const options = {
+        searchParams: [new RequestParam('source', testSource)]
+      };
+      service.getTargets(testSource);
+      expect(suggestionTargetsDataService.getTargets).toHaveBeenCalledWith('findBySource', options);
+    });
+
+    it('should call suggestionSourcesDataService.getTargetsByUser', () => {
+      const options = {
+        searchParams: [new RequestParam('target', testUserId)]
+      };
+      service.getTargetsByUser(testUserId);
+      expect(suggestionTargetsDataService.getTargetsByUser).toHaveBeenCalledWith(testUserId, options);
+    });
+
+    it('should call suggestionSourcesDataService.getTargetById', () => {
+      service.getTargetById('1');
+      expect(suggestionTargetsDataService.findById).toHaveBeenCalledWith('1');
+    });
+  });
+
+
+  describe('Suggestion sources service', () => {
+    it('should call suggestionSourcesDataService.getSources', () => {
+      service.getSources();
+      expect(suggestionSourcesDataService.getSources).toHaveBeenCalled();
+    });
+  });
+
+  describe('Suggestion service', () => {
+    it('should call suggestionsDataService.searchBy', () => {
+      const options = {
+        searchParams: [new RequestParam('target', testUserId), new RequestParam('source', testSource)]
+      };
+      service.getSuggestionsByTargetAndSource(testUserId, testSource);
+      expect(suggestionsDataService.searchBy).toHaveBeenCalledWith('findByTargetAndSource', options, false, true);
+    });
+
+    it('should call suggestionsDataService.delete', () => {
+      service.deleteSuggestion('1');
+      expect(suggestionsDataService.delete).toHaveBeenCalledWith('1');
+    });
+  });
+
+  describe('Request service', () => {
+    it('should call requestService.setStaleByHrefSubstring', () => {
+      service.clearSuggestionRequests();
+      expect(requestService.setStaleByHrefSubstring).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/app/core/notifications/suggestions-data.service.ts b/src/app/core/notifications/suggestions-data.service.ts
new file mode 100644
index 0000000000..17b1482578
--- /dev/null
+++ b/src/app/core/notifications/suggestions-data.service.ts
@@ -0,0 +1,229 @@
+/* eslint-disable max-classes-per-file */
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Store } from '@ngrx/store';
+
+import { Observable } from 'rxjs';
+
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { dataService } from '../cache/builders/build-decorators';
+import { RequestService } from '../data/request.service';
+import { UpdateDataServiceImpl } from '../data/update-data.service';
+import { ChangeAnalyzer } from '../data/change-analyzer';
+import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
+import { RemoteData } from '../data/remote-data';
+import { SUGGESTION } from './models/suggestion-objects.resource-type';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { PaginatedList } from '../data/paginated-list.model';
+import { SuggestionSource } from './models/suggestion-source.model';
+import { SuggestionTarget } from './models/suggestion-target.model';
+import { Suggestion } from './models/suggestion.model';
+import { RequestParam } from '../cache/models/request-param.model';
+import { NoContent } from '../shared/NoContent.model';
+import {CoreState} from '../core-state.model';
+import {FindListOptions} from '../data/find-list-options.model';
+import { SuggestionSourceDataService } from './source/suggestion-source-data.service';
+import { SuggestionTargetDataService } from './target/suggestion-target-data.service';
+
+/* tslint:disable:max-classes-per-file */
+
+/**
+ * A private UpdateDataServiceImpl implementation to delegate specific methods to.
+ */
+export class SuggestionDataServiceImpl extends UpdateDataServiceImpl {
+
+  /**
+   * Initialize service variables
+   * @param {RequestService} requestService
+   * @param {RemoteDataBuildService} rdbService
+   * @param {Store} store
+   * @param {ObjectCacheService} objectCache
+   * @param {HALEndpointService} halService
+   * @param {NotificationsService} notificationsService
+   * @param {HttpClient} http
+   * @param {ChangeAnalyzer} comparator
+   * @param responseMsToLive
+   */
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected store: Store,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: ChangeAnalyzer,
+    protected responseMsToLive: number,
+  ) {
+    super('suggestions', requestService, rdbService, objectCache, halService, notificationsService, comparator ,responseMsToLive);
+  }
+}
+
+/**
+ * The service handling all Suggestion Target REST requests.
+ */
+@Injectable()
+@dataService(SUGGESTION)
+export class SuggestionsDataService {
+  protected searchFindBySourceMethod = 'findBySource';
+  protected searchFindByTargetAndSourceMethod = 'findByTargetAndSource';
+
+  /**
+   * A private UpdateDataServiceImpl implementation to delegate specific methods to.
+   */
+  private suggestionsDataService: SuggestionDataServiceImpl;
+
+  /**
+   * A private UpdateDataServiceImpl implementation to delegate specific methods to.
+   */
+  private suggestionSourcesDataService: SuggestionSourceDataService;
+
+  /**
+   * A private UpdateDataServiceImpl implementation to delegate specific methods to.
+   */
+  private suggestionTargetsDataService: SuggestionTargetDataService;
+
+  private responseMsToLive = 10 * 1000;
+
+  /**
+   * Initialize service variables
+   * @param {RequestService} requestService
+   * @param {RemoteDataBuildService} rdbService
+   * @param {ObjectCacheService} objectCache
+   * @param {HALEndpointService} halService
+   * @param {NotificationsService} notificationsService
+   * @param {HttpClient} http
+   * @param {DefaultChangeAnalyzer} comparatorSuggestions
+   * @param {DefaultChangeAnalyzer} comparatorSources
+   * @param {DefaultChangeAnalyzer} comparatorTargets
+   */
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparatorSuggestions: DefaultChangeAnalyzer,
+    protected comparatorSources: DefaultChangeAnalyzer,
+    protected comparatorTargets: DefaultChangeAnalyzer,
+  ) {
+    this.suggestionsDataService = new SuggestionDataServiceImpl(requestService, rdbService, null, objectCache, halService, notificationsService, http, comparatorSuggestions, this.responseMsToLive);
+    this.suggestionSourcesDataService = new SuggestionSourceDataService(requestService, rdbService, null, objectCache, halService, notificationsService, http, comparatorSources);
+    this.suggestionTargetsDataService = new SuggestionTargetDataService(requestService, rdbService, null, objectCache, halService, notificationsService, http, comparatorTargets);
+  }
+
+  /**
+   * Return the list of Suggestion Sources
+   *
+   * @param options
+   *    Find list options object.
+   * @return Observable>>
+   *    The list of Suggestion Sources.
+   */
+  public getSources(options: FindListOptions = {}): Observable>> {
+    return this.suggestionSourcesDataService.getSources(options);
+  }
+
+  /**
+   * Return the list of Suggestion Target for a given source
+   *
+   * @param source
+   *    The source for which to find targets.
+   * @param options
+   *    Find list options object.
+   * @param linksToFollow
+   *    List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved.
+   * @return Observable>>
+   *    The list of Suggestion Target.
+   */
+  public getTargets(
+    source: string,
+    options: FindListOptions = {},
+    ...linksToFollow: FollowLinkConfig[]
+  ): Observable>> {
+    options.searchParams = [new RequestParam('source', source)];
+
+    return this.suggestionTargetsDataService.getTargets(this.searchFindBySourceMethod, options, ...linksToFollow);
+  }
+
+  /**
+   * Return the list of Suggestion Target for a given user
+   *
+   * @param userId
+   *    The user Id for which to find targets.
+   * @param options
+   *    Find list options object.
+   * @param linksToFollow
+   *    List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved.
+   * @return Observable>>
+   *    The list of Suggestion Target.
+   */
+  public getTargetsByUser(
+    userId: string,
+    options: FindListOptions = {},
+    ...linksToFollow: FollowLinkConfig[]
+  ): Observable>> {
+    options.searchParams = [new RequestParam('target', userId)];
+    return this.suggestionTargetsDataService.getTargetsByUser(userId, options, ...linksToFollow);
+  }
+
+  /**
+   * Return a Suggestion Target for a given id
+   *
+   * @param targetId
+   *    The target id to retrieve.
+   *
+   * @return Observable>
+   *    The list of Suggestion Target.
+   */
+  public getTargetById(targetId: string): Observable> {
+    return this.suggestionTargetsDataService.findById(targetId);
+  }
+
+  /**
+   * Used to delete Suggestion
+   * @suggestionId
+   */
+  public deleteSuggestion(suggestionId: string): Observable> {
+    return this.suggestionsDataService.delete(suggestionId);
+  }
+
+  /**
+   * Return the list of Suggestion for a given target and source
+   *
+   * @param target
+   *    The target for which to find suggestions.
+   * @param source
+   *    The source for which to find suggestions.
+   * @param options
+   *    Find list options object.
+   * @param linksToFollow
+   *    List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved.
+   * @return Observable>>
+   *    The list of Suggestion.
+   */
+  public getSuggestionsByTargetAndSource(
+    target: string,
+    source: string,
+    options: FindListOptions = {},
+    ...linksToFollow: FollowLinkConfig[]
+  ): Observable>> {
+    options.searchParams = [
+      new RequestParam('target', target),
+      new RequestParam('source', source)
+    ];
+
+    return this.suggestionsDataService.searchBy(this.searchFindByTargetAndSourceMethod, options, false, true, ...linksToFollow);
+  }
+
+  /**
+   * Clear findByTargetAndSource suggestions requests from cache
+   */
+  public clearSuggestionRequests() {
+    this.requestService.setStaleByHrefSubstring(this.searchFindByTargetAndSourceMethod);
+  }
+}
diff --git a/src/app/core/notifications/target/suggestion-target-data.service.ts b/src/app/core/notifications/target/suggestion-target-data.service.ts
new file mode 100644
index 0000000000..a2f1507b10
--- /dev/null
+++ b/src/app/core/notifications/target/suggestion-target-data.service.ts
@@ -0,0 +1,141 @@
+import { Injectable } from '@angular/core';
+import { dataService } from '../../data/base/data-service.decorator';
+
+import { IdentifiableDataService } from '../../data/base/identifiable-data.service';
+import { SuggestionTarget } from '../models/suggestion-target.model';
+import { FindAllData, FindAllDataImpl } from '../../data/base/find-all-data';
+import { Store } from '@ngrx/store';
+import { RequestService } from '../../data/request.service';
+import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
+import { CoreState } from '../../core-state.model';
+import { ObjectCacheService } from '../../cache/object-cache.service';
+import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { FindListOptions } from '../../data/find-list-options.model';
+import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
+import { PaginatedList } from '../../data/paginated-list.model';
+import { RemoteData } from '../../data/remote-data';
+import { Observable } from 'rxjs/internal/Observable';
+import { RequestParam } from '../../cache/models/request-param.model';
+import { SearchData, SearchDataImpl } from '../../data/base/search-data';
+import { DefaultChangeAnalyzer } from '../../data/default-change-analyzer.service';
+import { SUGGESTION_TARGET } from '../models/suggestion-target-object.resource-type';
+
+@Injectable()
+@dataService(SUGGESTION_TARGET)
+export class SuggestionTargetDataService extends IdentifiableDataService {
+
+  protected linkPath = 'suggestiontargets';
+  private findAllData: FindAllData;
+  private searchData: SearchData;
+  protected searchFindBySourceMethod = 'findBySource';
+  protected searchFindByTargetMethod = 'findByTarget';
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected store: Store,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DefaultChangeAnalyzer) {
+    super('suggestiontargets', 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);
+  }
+  /**
+   * Return the list of Suggestion Target for a given source
+   *
+   * @param source
+   *    The source for which to find targets.
+   * @param options
+   *    Find list options object.
+   * @param linksToFollow
+   *    List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved.
+   * @return Observable>>
+   *    The list of Suggestion Target.
+   */
+  public getTargets(
+    source: string,
+    options: FindListOptions = {},
+    ...linksToFollow: FollowLinkConfig[]
+  ): Observable>> {
+    options.searchParams = [new RequestParam('source', source)];
+
+    return this.searchBy(this.searchFindBySourceMethod, options, true, true, ...linksToFollow);
+  }
+
+  /**
+   * Return the list of Suggestion Target for a given user
+   *
+   * @param userId
+   *    The user Id for which to find targets.
+   * @param options
+   *    Find list options object.
+   * @param linksToFollow
+   *    List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved.
+   * @return Observable>>
+   *    The list of Suggestion Target.
+   */
+  public getTargetsByUser(
+    userId: string,
+    options: FindListOptions = {},
+    ...linksToFollow: FollowLinkConfig[]
+  ): Observable>> {
+    options.searchParams = [new RequestParam('target', userId)];
+
+    return this.searchBy(this.searchFindByTargetMethod, options, true, true, ...linksToFollow);
+  }
+  /**
+   * Return a Suggestion Target for a given id
+   *
+   * @param targetId
+   *    The target id to retrieve.
+   *
+   * @return Observable>
+   *    The list of Suggestion Target.
+   */
+  public getTargetById(targetId: string): Observable> {
+    return this.findById(targetId);
+  }
+
+  /**
+   * 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);
+  }
+
+
+  /**
+   * Returns {@link RemoteData} of all object with a list of {@link FollowLinkConfig}, to indicate which embedded
+   * info should be added to the objects
+   *
+   * @param options                     Find list options 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 object list
+   */
+  findAll(options: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+}
diff --git a/src/app/core/notifications/target/suggestions-target-data.service.spec.ts b/src/app/core/notifications/target/suggestions-target-data.service.spec.ts
new file mode 100644
index 0000000000..3dce7ad36c
--- /dev/null
+++ b/src/app/core/notifications/target/suggestions-target-data.service.spec.ts
@@ -0,0 +1,136 @@
+import { TestScheduler } from 'rxjs/testing';
+import { RequestService } from '../../data/request.service';
+import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../cache/object-cache.service';
+import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { RequestEntry } from '../../data/request-entry.model';
+import { cold, getTestScheduler } from 'jasmine-marbles';
+import { RestResponse } from '../../cache/response.models';
+import { of as observableOf } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../../core-state.model';
+import { HttpClient } from '@angular/common/http';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { SearchData } from '../../data/base/search-data';
+import { testSearchDataImplementation } from '../../data/base/search-data.spec';
+import { SuggestionTargetDataService } from './suggestion-target-data.service';
+import { DefaultChangeAnalyzer } from '../../data/default-change-analyzer.service';
+import { SuggestionTarget } from '../models/suggestion-target.model';
+import { testFindAllDataImplementation } from '../../data/base/find-all-data.spec';
+import { FindAllData } from '../../data/base/find-all-data';
+import { GetRequest } from '../../data/request.models';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { RequestParam } from '../../cache/models/request-param.model';
+import { RemoteData } from '../../data/remote-data';
+import { RequestEntryState } from '../../data/request-entry-state.model';
+
+describe('SuggestionTargetDataService test', () => {
+  let scheduler: TestScheduler;
+  let service: SuggestionTargetDataService;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+  let objectCache: ObjectCacheService;
+  let halService: HALEndpointService;
+  let notificationsService: NotificationsService;
+  let http: HttpClient;
+  let comparator: DefaultChangeAnalyzer;
+  let responseCacheEntry: RequestEntry;
+
+  const store = {} as Store;
+  const endpointURL = `https://rest.api/rest/api/suggestiontargets`;
+  const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+
+  const remoteDataMocks = {
+    Success: new RemoteData(null, null, null, RequestEntryState.Success, null, null, 200),
+  };
+
+  function initTestService() {
+    return new SuggestionTargetDataService(
+      requestService,
+      rdbService,
+      store,
+      objectCache,
+      halService,
+      notificationsService,
+      http,
+      comparator
+    );
+  }
+
+  beforeEach(() => {
+    scheduler = getTestScheduler();
+
+    objectCache = {} as ObjectCacheService;
+    http = {} as HttpClient;
+    notificationsService = {} as NotificationsService;
+    comparator = {} as DefaultChangeAnalyzer;
+    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),
+      buildList: cold('a', { a: remoteDataMocks.Success })
+    });
+
+
+    service = initTestService();
+  });
+
+  describe('composition', () => {
+    const initSearchService = () => new SuggestionTargetDataService(null, null, null, null, null, null, null, null) as unknown as SearchData;
+    const initFindAllService = () => new SuggestionTargetDataService(null, null, null, null, null, null, null, null) as unknown as FindAllData;
+    testSearchDataImplementation(initSearchService);
+    testFindAllDataImplementation(initFindAllService);
+  });
+
+  describe('getTargetById', () => {
+    it('should send a new GetRequest', () => {
+      const expected = new GetRequest(requestService.generateRequestId(), endpointURL + '/testId');
+      scheduler.schedule(() => service.getTargetById('testId').subscribe());
+      scheduler.flush();
+
+      expect(requestService.send).toHaveBeenCalledWith(expected, true);
+    });
+  });
+
+  describe('getTargetsByUser', () => {
+    it('should send a new GetRequest', () => {
+      const options = {
+        searchParams: [new RequestParam('target', 'testId')]
+      };
+      const searchFindByTargetMethod = 'findByTarget';
+      const expected = new GetRequest(requestService.generateRequestId(),  `${endpointURL}/search/${searchFindByTargetMethod}?target=testId`);
+      scheduler.schedule(() => service.getTargetsByUser('testId', options).subscribe());
+      scheduler.flush();
+
+      expect(requestService.send).toHaveBeenCalledWith(expected, true);
+    });
+  });
+
+  describe('getTargets', () => {
+    it('should send a new GetRequest', () => {
+      const options = {
+        searchParams: [new RequestParam('source', 'testId')]
+      };
+      const searchFindBySourceMethod = 'findBySource';
+      const expected = new GetRequest(requestService.generateRequestId(),  `${endpointURL}/search/${searchFindBySourceMethod}?source=testId`);
+      scheduler.schedule(() => service.getTargets('testId', options).subscribe());
+      scheduler.flush();
+
+      expect(requestService.send).toHaveBeenCalledWith(expected, true);
+    });
+  });
+});
diff --git a/src/app/core/resource-policy/resource-policy-data.service.spec.ts b/src/app/core/resource-policy/resource-policy-data.service.spec.ts
index 39050e6f88..56f0747b06 100644
--- a/src/app/core/resource-policy/resource-policy-data.service.spec.ts
+++ b/src/app/core/resource-policy/resource-policy-data.service.spec.ts
@@ -1,8 +1,4 @@
-import {
-  cold,
-  getTestScheduler,
-  hot,
-} from 'jasmine-marbles';
+import { cold, getTestScheduler, hot } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
@@ -19,6 +15,7 @@ import { RequestEntry } from '../data/request-entry.model';
 import { RestRequestMethod } from '../data/rest-request-method';
 import { EPersonDataService } from '../eperson/eperson-data.service';
 import { GroupDataService } from '../eperson/group-data.service';
+import { ObjectCacheServiceStub } from '../../shared/testing/object-cache-service.stub';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { PageInfo } from '../shared/page-info.model';
 import { ActionType } from './models/action-type.model';
@@ -30,7 +27,7 @@ describe('ResourcePolicyService', () => {
   let service: ResourcePolicyDataService;
   let requestService: RequestService;
   let rdbService: RemoteDataBuildService;
-  let objectCache: ObjectCacheService;
+  let objectCache: ObjectCacheServiceStub;
   let halService: HALEndpointService;
   let responseCacheEntry: RequestEntry;
   let ePersonService: EPersonDataService;
@@ -143,14 +140,14 @@ describe('ResourcePolicyService', () => {
         a: 'https://rest.api/rest/api/eperson/groups/' + groupUUID,
       }),
     });
-    objectCache = {} as ObjectCacheService;
+    objectCache = new ObjectCacheServiceStub();
     const notificationsService = {} as NotificationsService;
     const comparator = {} as any;
 
     service = new ResourcePolicyDataService(
       requestService,
       rdbService,
-      objectCache,
+      objectCache as ObjectCacheService,
       halService,
       notificationsService,
       comparator,
diff --git a/src/app/core/rest-property/forgot-password-check-guard.guard.ts b/src/app/core/rest-property/forgot-password-check-guard.guard.ts
new file mode 100644
index 0000000000..438a532c7b
--- /dev/null
+++ b/src/app/core/rest-property/forgot-password-check-guard.guard.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { AuthorizationDataService } from '../data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../data/feature-authorization/feature-id';
+import {
+  SingleFeatureAuthorizationGuard
+} from '../data/feature-authorization/feature-authorization-guard/single-feature-authorization.guard';
+import { AuthService } from '../auth/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+/**
+ * Guard that checks if the forgot-password feature is enabled
+ */
+export class ForgotPasswordCheckGuard extends SingleFeatureAuthorizationGuard {
+
+  constructor(
+    protected readonly authorizationService: AuthorizationDataService,
+    protected readonly router: Router,
+    protected readonly authService: AuthService
+  ) {
+    super(authorizationService, router, authService);
+  }
+
+  getFeatureID(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
+    return of(FeatureID.EPersonForgotPassword);
+  }
+
+}
diff --git a/src/app/core/shared/browse-definition.model.ts b/src/app/core/shared/browse-definition.model.ts
index 32c7a83538..e8197490db 100644
--- a/src/app/core/shared/browse-definition.model.ts
+++ b/src/app/core/shared/browse-definition.model.ts
@@ -1,6 +1,7 @@
 import { autoserialize } from 'cerialize';
 
 import { CacheableObject } from '../cache/cacheable-object.model';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-data-type';
 
 /**
  * Base class for BrowseDefinition models
@@ -13,5 +14,5 @@ export abstract class BrowseDefinition extends CacheableObject {
   /**
    * Get the render type of the BrowseDefinition model
    */
-  abstract getRenderType(): string;
+  abstract getRenderType(): BrowseByDataType;
 }
diff --git a/src/app/core/shared/context.model.ts b/src/app/core/shared/context.model.ts
index b4c02bee63..dcebf5794c 100644
--- a/src/app/core/shared/context.model.ts
+++ b/src/app/core/shared/context.model.ts
@@ -39,4 +39,6 @@ export enum Context {
   MyDSpaceValidation = 'mydspaceValidation',
 
   Bitstream = 'bitstream',
+
+  CoarNotify = 'coarNotify',
 }
diff --git a/src/app/core/shared/flat-browse-definition.model.ts b/src/app/core/shared/flat-browse-definition.model.ts
index 126c6426ff..b7dcf186c8 100644
--- a/src/app/core/shared/flat-browse-definition.model.ts
+++ b/src/app/core/shared/flat-browse-definition.model.ts
@@ -1,12 +1,10 @@
-import {
-  deserialize,
-  inheritSerialization,
-} from 'cerialize';
+import { deserialize, inheritSerialization } from 'cerialize';
 
 import { typedObject } from '../cache/builders/build-decorators';
 import { excludeFromEquals } from '../utilities/equals.decorators';
 import { FLAT_BROWSE_DEFINITION } from './flat-browse-definition.resource-type';
 import { HALLink } from './hal-link.model';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-data-type';
 import { NonHierarchicalBrowseDefinition } from './non-hierarchical-browse-definition';
 import { ResourceType } from './resource-type';
 
@@ -34,7 +32,7 @@ export class FlatBrowseDefinition extends NonHierarchicalBrowseDefinition {
     items: HALLink;
   };
 
-  getRenderType(): string {
+  getRenderType(): BrowseByDataType {
     return this.dataType;
   }
 }
diff --git a/src/app/core/shared/hierarchical-browse-definition.model.ts b/src/app/core/shared/hierarchical-browse-definition.model.ts
index 54b37d1e4e..8fa787c197 100644
--- a/src/app/core/shared/hierarchical-browse-definition.model.ts
+++ b/src/app/core/shared/hierarchical-browse-definition.model.ts
@@ -1,9 +1,4 @@
-import {
-  autoserialize,
-  autoserializeAs,
-  deserialize,
-  inheritSerialization,
-} from 'cerialize';
+import { autoserialize, autoserializeAs, deserialize, inheritSerialization } from 'cerialize';
 
 import { typedObject } from '../cache/builders/build-decorators';
 import { excludeFromEquals } from '../utilities/equals.decorators';
@@ -11,6 +6,7 @@ import { BrowseDefinition } from './browse-definition.model';
 import { HALLink } from './hal-link.model';
 import { HIERARCHICAL_BROWSE_DEFINITION } from './hierarchical-browse-definition.resource-type';
 import { ResourceType } from './resource-type';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-data-type';
 
 /**
  * BrowseDefinition model for browses of type 'hierarchicalBrowse'
@@ -45,7 +41,7 @@ export class HierarchicalBrowseDefinition extends BrowseDefinition {
     vocabulary: HALLink;
   };
 
-  getRenderType(): string {
-    return 'hierarchy';
+  getRenderType(): BrowseByDataType {
+    return BrowseByDataType.Hierarchy;
   }
 }
diff --git a/src/app/core/shared/item.model.spec.ts b/src/app/core/shared/item.model.spec.ts
index dc2eb6b610..7eaa6f10be 100644
--- a/src/app/core/shared/item.model.spec.ts
+++ b/src/app/core/shared/item.model.spec.ts
@@ -11,14 +11,13 @@ describe('Item', () => {
   const bitstream1Path = 'document.pdf';
   const bitstream2Path = 'otherfile.doc';
 
-  const nonExistingBundleName = 'c1e568f7-d14e-496b-bdd7-07026998cc00';
   let bitstreams;
   let remoteDataThumbnail;
   let remoteDataThumbnailList;
   let remoteDataFiles;
   let remoteDataBundles;
 
-  beforeEach(() => {
+  it('should be possible to create an Item without any errors', () => {
     const thumbnail = {
       content: thumbnailPath,
     };
@@ -50,5 +49,6 @@ describe('Item', () => {
     remoteDataBundles = createSuccessfulRemoteDataObject$(createPaginatedList(bundles));
 
     item = Object.assign(new Item(), { bundles: remoteDataBundles });
+    expect().nothing();
   });
 });
diff --git a/src/app/core/shared/non-hierarchical-browse-definition.ts b/src/app/core/shared/non-hierarchical-browse-definition.ts
index 91dfc5e4ab..8724094f28 100644
--- a/src/app/core/shared/non-hierarchical-browse-definition.ts
+++ b/src/app/core/shared/non-hierarchical-browse-definition.ts
@@ -1,12 +1,8 @@
-import {
-  autoserialize,
-  autoserializeAs,
-  inheritSerialization,
-} from 'cerialize';
-
-import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-decorator';
-import { BrowseDefinition } from './browse-definition.model';
+import { autoserialize, autoserializeAs, inheritSerialization } from 'cerialize';
 import { SortOption } from './sort-option.model';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-data-type';
+
+import { BrowseDefinition } from './browse-definition.model';
 
 /**
  * Super class for NonHierarchicalBrowseDefinition models,
diff --git a/src/app/core/shared/search/search-filter.service.ts b/src/app/core/shared/search/search-filter.service.ts
index 3d53652e62..427ee55fd5 100644
--- a/src/app/core/shared/search/search-filter.service.ts
+++ b/src/app/core/shared/search/search-filter.service.ts
@@ -49,6 +49,7 @@ const filterStateSelector = (state: SearchFiltersState) => state.searchFilter;
 export const FILTER_CONFIG: InjectionToken = new InjectionToken('filterConfig');
 export const IN_PLACE_SEARCH: InjectionToken = new InjectionToken('inPlaceSearch');
 export const REFRESH_FILTER: InjectionToken> = new InjectionToken('refreshFilters');
+export const SCOPE: InjectionToken = new InjectionToken('scope');
 
 /**
  * Service that performs all actions that have to do with search filters and facets
diff --git a/src/app/core/shared/value-list-browse-definition.model.ts b/src/app/core/shared/value-list-browse-definition.model.ts
index 87a3960299..e578e0dbfe 100644
--- a/src/app/core/shared/value-list-browse-definition.model.ts
+++ b/src/app/core/shared/value-list-browse-definition.model.ts
@@ -1,11 +1,9 @@
-import {
-  deserialize,
-  inheritSerialization,
-} from 'cerialize';
+import { deserialize, inheritSerialization } from 'cerialize';
 
 import { typedObject } from '../cache/builders/build-decorators';
 import { excludeFromEquals } from '../utilities/equals.decorators';
 import { HALLink } from './hal-link.model';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-data-type';
 import { NonHierarchicalBrowseDefinition } from './non-hierarchical-browse-definition';
 import { ResourceType } from './resource-type';
 import { VALUE_LIST_BROWSE_DEFINITION } from './value-list-browse-definition.resource-type';
@@ -34,7 +32,7 @@ export class ValueListBrowseDefinition extends NonHierarchicalBrowseDefinition {
     entries: HALLink;
   };
 
-  getRenderType(): string {
+  getRenderType(): BrowseByDataType {
     return this.dataType;
   }
 }
diff --git a/src/app/core/shared/view-mode.model.ts b/src/app/core/shared/view-mode.model.ts
index a27cb6954b..9c2f499b3d 100644
--- a/src/app/core/shared/view-mode.model.ts
+++ b/src/app/core/shared/view-mode.model.ts
@@ -7,4 +7,5 @@ export enum ViewMode {
   GridElement = 'grid',
   DetailedListElement = 'detailed',
   StandalonePage = 'standalone',
+  Table = 'table',
 }
diff --git a/src/app/core/submission/correctiontype-data.service.ts b/src/app/core/submission/correctiontype-data.service.ts
new file mode 100644
index 0000000000..291079f08a
--- /dev/null
+++ b/src/app/core/submission/correctiontype-data.service.ts
@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+
+import { dataService } from '../data/base/data-service.decorator';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { RequestService } from '../data/request.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { IdentifiableDataService } from '../data/base/identifiable-data.service';
+import { SearchDataImpl } from '../data/base/search-data';
+import { CorrectionType } from './models/correctiontype.model';
+import { map, Observable } from 'rxjs';
+import { RemoteData } from '../data/remote-data';
+import { PaginatedList } from '../data/paginated-list.model';
+import { FindListOptions } from '../data/find-list-options.model';
+import { RequestParam } from '../cache/models/request-param.model';
+import { getAllSucceededRemoteDataPayload, getPaginatedListPayload } from '../shared/operators';
+
+/**
+ * A service that provides methods to make REST requests with correctiontypes endpoint.
+ */
+@Injectable()
+@dataService(CorrectionType.type)
+export class CorrectionTypeDataService extends IdentifiableDataService {
+  protected linkPath = 'correctiontypes';
+  protected searchByTopic = 'findByTopic';
+  protected searchFindByItem = 'findByItem';
+  private searchData: SearchDataImpl;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+  ) {
+    super('correctiontypes', requestService, rdbService, objectCache, halService);
+
+    this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+  }
+
+  /**
+   * Get the correction type by id
+   * @param id the id of the correction type
+   * @param useCachedVersionIfAvailable use the cached version if available
+   * @param reRequestOnStale re-request on stale
+   * @returns {Observable>} the correction type
+   */
+  getCorrectionTypeById(id: string, useCachedVersionIfAvailable = true, reRequestOnStale = true): Observable> {
+    return this.findById(id, useCachedVersionIfAvailable, reRequestOnStale);
+  }
+
+  /**
+   * Search for the correction types for the item
+   * @param itemUuid the uuid of the item
+   * @param useCachedVersionIfAvailable use the cached version if available
+   * @returns the list of correction types for the item
+   */
+  findByItem(itemUuid: string, useCachedVersionIfAvailable): Observable>> {
+    const options = new FindListOptions();
+    options.searchParams = [new RequestParam('uuid', itemUuid)];
+    return this.searchData.searchBy(this.searchFindByItem, options, useCachedVersionIfAvailable);
+  }
+
+  /**
+   * Find the correction type for the topic
+   * @param topic the topic of the correction type to search for
+   * @param useCachedVersionIfAvailable use the cached version if available
+   * @param reRequestOnStale re-request on stale
+   * @returns the correction type for the topic
+   */
+  findByTopic(topic: string, useCachedVersionIfAvailable = true, reRequestOnStale = true): Observable {
+    const options = new FindListOptions();
+    options.searchParams = [
+      {
+        fieldName: 'topic',
+        fieldValue: topic,
+      },
+    ];
+
+    return this.searchData.searchBy(this.searchByTopic, options, useCachedVersionIfAvailable, reRequestOnStale).pipe(
+      getAllSucceededRemoteDataPayload(),
+      getPaginatedListPayload(),
+      map((list: CorrectionType[]) => {
+        return list[0];
+      })
+    );
+  }
+}
diff --git a/src/app/core/submission/models/correctiontype.model.ts b/src/app/core/submission/models/correctiontype.model.ts
new file mode 100644
index 0000000000..9329fa88d8
--- /dev/null
+++ b/src/app/core/submission/models/correctiontype.model.ts
@@ -0,0 +1,49 @@
+import { autoserialize, deserialize } from 'cerialize';
+import { typedObject } from '../../cache/builders/build-decorators';
+import { CacheableObject } from '../../cache/cacheable-object.model';
+import { ResourceType } from '../../shared/resource-type';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { HALLink } from '../../shared/hal-link.model';
+
+@typedObject
+/**
+ * Represents a correction type. It extends the CacheableObject.
+ * The correction type represents a type of correction that can be applied to a submission.
+ */
+export class CorrectionType extends CacheableObject {
+  static type = new ResourceType('correctiontype');
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+  @autoserialize
+  /**
+   * The unique identifier for the correction type mode.
+   */
+  id: string;
+  @autoserialize
+  /**
+   * The topic of the correction type mode.
+   */
+  topic: string;
+  @autoserialize
+  /**
+   * The discovery configuration for the correction type mode.
+   */
+  discoveryConfiguration: string;
+  @autoserialize
+  /**
+   * The form used for creating a correction type.
+   */
+  creationForm: string;
+  @deserialize
+  /**
+   * Represents the links associated with the correction type mode.
+   */
+  _links: {
+    self: HALLink;
+  };
+}
diff --git a/src/app/core/submission/models/workspaceitem-section-duplicates.model.ts b/src/app/core/submission/models/workspaceitem-section-duplicates.model.ts
new file mode 100644
index 0000000000..f9441fa790
--- /dev/null
+++ b/src/app/core/submission/models/workspaceitem-section-duplicates.model.ts
@@ -0,0 +1,8 @@
+/*
+ * Object model for the data returned by the REST API to present potential duplicates in a submission section
+ */
+import { Duplicate } from '../../../shared/object-list/duplicate-data/duplicate.model';
+
+export interface WorkspaceitemSectionDuplicatesObject {
+  potentialDuplicates?: Duplicate[]
+}
diff --git a/src/app/core/submission/models/workspaceitem-section-upload.model.ts b/src/app/core/submission/models/workspaceitem-section-upload.model.ts
index f98e0584eb..d992567df4 100644
--- a/src/app/core/submission/models/workspaceitem-section-upload.model.ts
+++ b/src/app/core/submission/models/workspaceitem-section-upload.model.ts
@@ -4,7 +4,10 @@ import { WorkspaceitemSectionUploadFileObject } from './workspaceitem-section-up
  * An interface to represent submission's upload section data.
  */
 export interface WorkspaceitemSectionUploadObject {
-
+  /**
+   * Primary bitstream flag
+   */
+  primary: string | null;
   /**
    * A list of [[WorkspaceitemSectionUploadFileObject]]
    */
diff --git a/src/app/core/submission/models/workspaceitem-sections.model.ts b/src/app/core/submission/models/workspaceitem-sections.model.ts
index 45f189fc36..5e688819ea 100644
--- a/src/app/core/submission/models/workspaceitem-sections.model.ts
+++ b/src/app/core/submission/models/workspaceitem-sections.model.ts
@@ -4,6 +4,7 @@ import { WorkspaceitemSectionFormObject } from './workspaceitem-section-form.mod
 import { WorkspaceitemSectionIdentifiersObject } from './workspaceitem-section-identifiers.model';
 import { WorkspaceitemSectionLicenseObject } from './workspaceitem-section-license.model';
 import { WorkspaceitemSectionSherpaPoliciesObject } from './workspaceitem-section-sherpa-policies.model';
+import { WorkspaceitemSectionDuplicatesObject } from './workspaceitem-section-duplicates.model';
 import { WorkspaceitemSectionUploadObject } from './workspaceitem-section-upload.model';
 
 /**
@@ -25,4 +26,7 @@ export type WorkspaceitemSectionDataType
   | WorkspaceitemSectionAccessesObject
   | WorkspaceitemSectionSherpaPoliciesObject
   | WorkspaceitemSectionIdentifiersObject
+  | WorkspaceitemSectionDuplicatesObject
   | string;
+
+
diff --git a/src/app/core/submission/submission-duplicate-data.service.spec.ts b/src/app/core/submission/submission-duplicate-data.service.spec.ts
new file mode 100644
index 0000000000..fff4f3a0bc
--- /dev/null
+++ b/src/app/core/submission/submission-duplicate-data.service.spec.ts
@@ -0,0 +1,30 @@
+import { SubmissionDuplicateDataService } from './submission-duplicate-data.service';
+import { FindListOptions } from '../data/find-list-options.model';
+import { RequestParam } from '../cache/models/request-param.model';
+
+/**
+ * Basic tests for the submission-duplicate-data.service.ts service
+ */
+describe('SubmissionDuplicateDataService', () => {
+  const duplicateDataService = new SubmissionDuplicateDataService(null, null, null, null);
+
+  // Test the findDuplicates method to make sure that a call results in an expected
+  // call to searchBy, using the 'findByItem' search method
+  describe('findDuplicates', () => {
+    beforeEach(() => {
+      spyOn(duplicateDataService, 'searchBy');
+    });
+
+    it('should call searchBy with the correct arguments', () => {
+      // Set up expected search parameters and find options
+      const searchParams = [];
+      searchParams.push(new RequestParam('uuid', 'test'));
+      let findListOptions = new FindListOptions();
+      findListOptions.searchParams = searchParams;
+      // Perform test search using uuid 'test' using the findDuplicates method
+      const result = duplicateDataService.findDuplicates('test', new FindListOptions(), true, true);
+      // Expect searchBy('findByItem'...) to have been used as SearchData impl with the expected options (uuid=test)
+      expect(duplicateDataService.searchBy).toHaveBeenCalledWith('findByItem', findListOptions, true, true);
+    });
+  });
+});
diff --git a/src/app/core/submission/submission-duplicate-data.service.ts b/src/app/core/submission/submission-duplicate-data.service.ts
new file mode 100644
index 0000000000..6be0006182
--- /dev/null
+++ b/src/app/core/submission/submission-duplicate-data.service.ts
@@ -0,0 +1,138 @@
+/* eslint-disable max-classes-per-file */
+import { Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { ResponseParsingService } from '../data/parsing.service';
+import { RemoteData } from '../data/remote-data';
+import { GetRequest } from '../data/request.models';
+import { RequestService } from '../data/request.service';
+import { GenericConstructor } from '../shared/generic-constructor';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { SearchResponseParsingService } from '../data/search-response-parsing.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { RestRequest } from '../data/rest-request.model';
+import { BaseDataService } from '../data/base/base-data.service';
+import { FindListOptions } from '../data/find-list-options.model';
+import { Duplicate } from '../../shared/object-list/duplicate-data/duplicate.model';
+import { PaginatedList } from '../data/paginated-list.model';
+import { RequestParam } from '../cache/models/request-param.model';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { SearchData, SearchDataImpl } from '../data/base/search-data';
+import { DUPLICATE } from '../../shared/object-list/duplicate-data/duplicate.resource-type';
+import { dataService } from '../data/base/data-service.decorator';
+
+/**
+ * Service that handles search requests for potential duplicate items.
+ * This uses the /api/submission/duplicates endpoint to look for other archived or in-progress items (if user
+ * has READ permission) that match the item (for the given uuid).
+ * Matching is configured in the backend in dspace/config/modulesduplicate-detection.cfg
+ * The returned results are small preview 'stubs' of items, and displayed in either a submission section
+ * or the workflow pooled/claimed task page.
+ *
+ */
+@Injectable()
+@dataService(DUPLICATE)
+export class SubmissionDuplicateDataService extends BaseDataService implements SearchData {
+
+  /**
+   * The ResponseParsingService constructor name
+   */
+  private parser: GenericConstructor = SearchResponseParsingService;
+
+  /**
+   * The RestRequest constructor name
+   */
+  private request: GenericConstructor = GetRequest;
+
+  /**
+   * SearchData interface to implement
+   * @private
+   */
+  private searchData: SearchData;
+
+  /**
+   * Subscription to unsubscribe from
+   */
+  private sub;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+  ) {
+    super('duplicates', requestService, rdbService, objectCache, halService);
+    this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+  }
+
+  /**
+   * Implement the searchBy method to return paginated lists of Duplicate resources
+   *
+   * @param searchMethod the search method name
+   * @param options find list options
+   * @param useCachedVersionIfAvailable whether to use cached version if available
+   * @param reRequestOnStale whether to rerequest results on stale
+   * @param linksToFollow links to follow in results
+   */
+  searchBy(searchMethod: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.searchData.searchBy(searchMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  /**
+   * Helper method to get the duplicates endpoint
+   * @protected
+   */
+  protected getEndpoint(): Observable {
+    return this.halService.getEndpoint(this.linkPath);
+  }
+
+  /**
+   * Method to set service options
+   * @param {GenericConstructor} parser The ResponseParsingService constructor name
+   * @param {boolean} request The RestRequest constructor name
+   */
+  setServiceOptions(parser: GenericConstructor, request: GenericConstructor) {
+    if (parser) {
+      this.parser = parser;
+    }
+    if (request) {
+      this.request = request;
+    }
+  }
+
+  /**
+   * Find duplicates for a given item UUID. Locates and returns results from the /api/submission/duplicates/search/findByItem
+   * SearchRestMethod, which is why this implements SearchData and searchBy
+   *
+   * @param uuid the item UUID
+   * @param options any find list options e.g. paging
+   * @param useCachedVersionIfAvailable whether to use cached version if available
+   * @param reRequestOnStale whether to rerequest results on stale
+   * @param linksToFollow links to follow in results
+   */
+  public findDuplicates(uuid: string, options?: FindListOptions, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    const searchParams = [new RequestParam('uuid', uuid)];
+    let findListOptions = new FindListOptions();
+    if (options) {
+      findListOptions = Object.assign(new FindListOptions(), options);
+    }
+    if (findListOptions.searchParams) {
+      findListOptions.searchParams = [...findListOptions.searchParams, ...searchParams];
+    } else {
+      findListOptions.searchParams = searchParams;
+    }
+
+    // Return actual search/findByItem results
+    return this.searchBy('findByItem', findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+
+  }
+
+  /**
+   * Unsubscribe from the subscription
+   */
+  ngOnDestroy(): void {
+    if (this.sub !== undefined) {
+      this.sub.unsubscribe();
+    }
+  }
+}
diff --git a/src/app/core/submission/vocabularies/vocabulary.data.service.spec.ts b/src/app/core/submission/vocabularies/vocabulary.data.service.spec.ts
index 6681714903..2c80bf3a2f 100644
--- a/src/app/core/submission/vocabularies/vocabulary.data.service.spec.ts
+++ b/src/app/core/submission/vocabularies/vocabulary.data.service.spec.ts
@@ -6,9 +6,17 @@
  * http://www.dspace.org/license/
  */
 import { testFindAllDataImplementation } from '../../data/base/find-all-data.spec';
+import { FindListOptions } from '../../data/find-list-options.model';
+import { RequestParam } from '../../cache/models/request-param.model';
+import { createSuccessfulRemoteDataObject$ } from 'src/app/shared/remote-data.utils';
 import { VocabularyDataService } from './vocabulary.data.service';
 
 describe('VocabularyDataService', () => {
+  let service: VocabularyDataService;
+  service = initTestService();
+  let restEndpointURL = 'https://rest.api/server/api/submission/vocabularies';
+  let vocabularyByMetadataAndCollectionEndpoint = `${restEndpointURL}/search/byMetadataAndCollection?metadata=dc.contributor.author&collection=1234-1234`;
+
   function initTestService() {
     return new VocabularyDataService(null, null, null, null);
   }
@@ -17,4 +25,18 @@ describe('VocabularyDataService', () => {
     const initService = () => new VocabularyDataService(null, null, null, null);
     testFindAllDataImplementation(initService);
   });
+
+  describe('getVocabularyByMetadataAndCollection', () => {
+    it('search vocabulary by metadata and collection calls expected methods', () => {
+      spyOn((service as any).searchData, 'getSearchByHref').and.returnValue(vocabularyByMetadataAndCollectionEndpoint);
+      spyOn(service, 'findByHref').and.returnValue(createSuccessfulRemoteDataObject$(null));
+      service.getVocabularyByMetadataAndCollection('dc.contributor.author', '1234-1234');
+      const options = Object.assign(new FindListOptions(), {
+        searchParams: [Object.assign(new RequestParam('metadata', encodeURIComponent('dc.contributor.author'))),
+                       Object.assign(new RequestParam('collection', encodeURIComponent('1234-1234')))]
+      });
+      expect((service as any).searchData.getSearchByHref).toHaveBeenCalledWith('byMetadataAndCollection', options);
+      expect(service.findByHref).toHaveBeenCalledWith(vocabularyByMetadataAndCollectionEndpoint, true, true);
+    });
+  });
 });
diff --git a/src/app/core/submission/vocabularies/vocabulary.data.service.ts b/src/app/core/submission/vocabularies/vocabulary.data.service.ts
index ac3b04e854..ebad6e035f 100644
--- a/src/app/core/submission/vocabularies/vocabulary.data.service.ts
+++ b/src/app/core/submission/vocabularies/vocabulary.data.service.ts
@@ -12,10 +12,7 @@ import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import { ObjectCacheService } from '../../cache/object-cache.service';
 import { dataService } from '../../data/base/data-service.decorator';
-import {
-  FindAllData,
-  FindAllDataImpl,
-} from '../../data/base/find-all-data';
+import { FindAllData, FindAllDataImpl } from '../../data/base/find-all-data';
 import { IdentifiableDataService } from '../../data/base/identifiable-data.service';
 import { FindListOptions } from '../../data/find-list-options.model';
 import { PaginatedList } from '../../data/paginated-list.model';
@@ -24,6 +21,8 @@ import { RequestService } from '../../data/request.service';
 import { HALEndpointService } from '../../shared/hal-endpoint.service';
 import { VOCABULARY } from './models/vocabularies.resource-type';
 import { Vocabulary } from './models/vocabulary.model';
+import { SearchDataImpl } from '../../data/base/search-data';
+import { RequestParam } from '../../cache/models/request-param.model';
 
 /**
  * Data service to retrieve vocabularies from the REST server.
@@ -31,7 +30,10 @@ import { Vocabulary } from './models/vocabulary.model';
 @Injectable()
 @dataService(VOCABULARY)
 export class VocabularyDataService extends IdentifiableDataService implements FindAllData {
+  protected searchByMetadataAndCollectionPath = 'byMetadataAndCollection';
+
   private findAllData: FindAllData;
+  private searchData: SearchDataImpl;
 
   constructor(
     protected requestService: RequestService,
@@ -42,6 +44,7 @@ export class VocabularyDataService extends IdentifiableDataService i
     super('vocabularies', 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);
   }
 
   /**
@@ -61,4 +64,23 @@ export class VocabularyDataService extends IdentifiableDataService i
   public findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig[]): Observable>> {
     return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
   }
+
+  /**
+   * Return the controlled vocabulary configured for the specified metadata and collection if any (/submission/vocabularies/search/{@link searchByMetadataAndCollectionPath}?metadata=<>&collection=<>)
+   * @param metadataField               metadata field to search
+   * @param collectionUUID              collection UUID where is configured the vocabulary
+   * @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
+   */
+  public getVocabularyByMetadataAndCollection(metadataField: string, collectionUUID: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable> {
+    const findListOptions = new FindListOptions();
+    findListOptions.searchParams = [new RequestParam('metadata', encodeURIComponent(metadataField)),
+                        new RequestParam('collection', encodeURIComponent(collectionUUID))];
+    const href$ = this.searchData.getSearchByHref(this.searchByMetadataAndCollectionPath, findListOptions, ...linksToFollow);
+    return this.findByHref(href$, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 }
diff --git a/src/app/core/submission/vocabularies/vocabulary.service.spec.ts b/src/app/core/submission/vocabularies/vocabulary.service.spec.ts
index b8e08e1f75..f130014f1b 100644
--- a/src/app/core/submission/vocabularies/vocabulary.service.spec.ts
+++ b/src/app/core/submission/vocabularies/vocabulary.service.spec.ts
@@ -1,18 +1,11 @@
-import {
-  cold,
-  getTestScheduler,
-  hot,
-} from 'jasmine-marbles';
+import { cold, getTestScheduler, hot } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
 import { getMockHrefOnlyDataService } from '../../../shared/mocks/href-only-data.service.mock';
 import { getMockRemoteDataBuildService } from '../../../shared/mocks/remote-data-build.service.mock';
 import { getMockRequestService } from '../../../shared/mocks/request.service.mock';
-import {
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../../shared/remote-data.utils';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { createPaginatedList } from '../../../shared/testing/utils.test';
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import { RequestParam } from '../../cache/models/request-param.model';
@@ -29,6 +22,7 @@ import { VocabularyOptions } from './models/vocabulary-options.model';
 import { VocabularyDataService } from './vocabulary.data.service';
 import { VocabularyService } from './vocabulary.service';
 import { VocabularyEntryDetailsDataService } from './vocabulary-entry-details.data.service';
+import { ObjectCacheServiceStub } from '../../../shared/testing/object-cache-service.stub';
 
 describe('VocabularyService', () => {
   let scheduler: TestScheduler;
@@ -209,6 +203,7 @@ describe('VocabularyService', () => {
 
   function initTestService() {
     hrefOnlyDataService = getMockHrefOnlyDataService();
+    objectCache = new ObjectCacheServiceStub() as ObjectCacheService;
 
     return new VocabularyService(
       requestService,
@@ -257,7 +252,9 @@ describe('VocabularyService', () => {
         spyOn((service as any).vocabularyDataService, 'findById').and.callThrough();
         spyOn((service as any).vocabularyDataService, 'findAll').and.callThrough();
         spyOn((service as any).vocabularyDataService, 'findByHref').and.callThrough();
+        spyOn((service as any).vocabularyDataService, 'getVocabularyByMetadataAndCollection').and.callThrough();
         spyOn((service as any).vocabularyDataService.findAllData, 'getFindAllHref').and.returnValue(observableOf(entriesRequestURL));
+        spyOn((service as any).vocabularyDataService.searchData, 'getSearchByHref').and.returnValue(observableOf(searchRequestURL));
       });
 
       afterEach(() => {
@@ -314,6 +311,23 @@ describe('VocabularyService', () => {
           expect(result).toBeObservable(expected);
         });
       });
+
+      describe('getVocabularyByMetadataAndCollection', () => {
+        it('should proxy the call to vocabularyDataService.getVocabularyByMetadataAndCollection', () => {
+          scheduler.schedule(() => service.getVocabularyByMetadataAndCollection(metadata, collectionUUID));
+          scheduler.flush();
+
+          expect((service as any).vocabularyDataService.getVocabularyByMetadataAndCollection).toHaveBeenCalledWith(metadata, collectionUUID, true, true);
+        });
+
+        it('should return a RemoteData for the object with the given metadata and collection', () => {
+          const result = service.getVocabularyByMetadataAndCollection(metadata, collectionUUID);
+          const expected = cold('a|', {
+            a: vocabularyRD
+          });
+          expect(result).toBeObservable(expected);
+        });
+      });
     });
 
     describe('vocabulary entries', () => {
diff --git a/src/app/core/submission/vocabularies/vocabulary.service.ts b/src/app/core/submission/vocabularies/vocabulary.service.ts
index 6e1487dff6..117f6d0417 100644
--- a/src/app/core/submission/vocabularies/vocabulary.service.ts
+++ b/src/app/core/submission/vocabularies/vocabulary.service.ts
@@ -95,6 +95,23 @@ export class VocabularyService {
     return this.vocabularyDataService.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
   }
 
+  /**
+     * Return the controlled vocabulary configured for the specified metadata and collection if any
+     * @param metadataField               metadata field to search
+     * @param collectionUUID              collection UUID where is configured the vocabulary
+     * @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 vocabulary object
+     */
+  getVocabularyByMetadataAndCollection(metadataField: string, collectionUUID: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig[]): Observable> {
+    return this.vocabularyDataService.getVocabularyByMetadataAndCollection(metadataField, collectionUUID, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
   /**
    * Return the {@link VocabularyEntry} list for a given {@link Vocabulary}
    *
diff --git a/src/app/core/submission/workflowitem-data.service.spec.ts b/src/app/core/submission/workflowitem-data.service.spec.ts
index 88bb78f863..65fc9ea3d4 100644
--- a/src/app/core/submission/workflowitem-data.service.spec.ts
+++ b/src/app/core/submission/workflowitem-data.service.spec.ts
@@ -1,10 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Store } from '@ngrx/store';
-import {
-  cold,
-  getTestScheduler,
-  hot,
-} from 'jasmine-marbles';
+import { cold, getTestScheduler, hot } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
@@ -130,7 +126,7 @@ describe('WorkflowItemDataService test', () => {
     });
 
     describe('findByItem', () => {
-      it('should proxy the call to DataService.findByHref', () => {
+      it('should proxy the call to UpdateDataServiceImpl.findByHref', () => {
         scheduler.schedule(() => service.findByItem('1234-1234', true, true, pageInfo));
         scheduler.flush();
 
diff --git a/src/app/core/submission/workspaceitem-data.service.spec.ts b/src/app/core/submission/workspaceitem-data.service.spec.ts
index e9490ff945..0f38f7be88 100644
--- a/src/app/core/submission/workspaceitem-data.service.spec.ts
+++ b/src/app/core/submission/workspaceitem-data.service.spec.ts
@@ -1,30 +1,31 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Store } from '@ngrx/store';
-import {
-  cold,
-  getTestScheduler,
-  hot,
-} from 'jasmine-marbles';
+import { cold, getTestScheduler, hot } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
 import { getMockHrefOnlyDataService } from '../../shared/mocks/href-only-data.service.mock';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { ObjectCacheService } from '../cache/object-cache.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { RequestService } from '../data/request.service';
+import { PageInfo } from '../shared/page-info.model';
+import { HrefOnlyDataService } from '../data/href-only-data.service';
+import { WorkspaceitemDataService } from './workspaceitem-data.service';
 import { RestResponse } from '../cache/response.models';
 import { CoreState } from '../core-state.model';
 import { testDeleteDataImplementation } from '../data/base/delete-data.spec';
 import { testSearchDataImplementation } from '../data/base/search-data.spec';
-import { HrefOnlyDataService } from '../data/href-only-data.service';
-import { RequestService } from '../data/request.service';
 import { RequestEntry } from '../data/request-entry.model';
-import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { Item } from '../shared/item.model';
-import { PageInfo } from '../shared/page-info.model';
 import { WorkspaceItem } from './models/workspaceitem.model';
-import { WorkspaceitemDataService } from './workspaceitem-data.service';
+import { SearchData } from '../data/base/search-data';
+import { DeleteData } from '../data/base/delete-data';
+import { RequestParam } from '../cache/models/request-param.model';
+import { PostRequest } from '../data/request.models';
+import { HttpOptions } from '../dspace-rest/dspace-rest.service';
 
 describe('WorkspaceitemDataService test', () => {
   let scheduler: TestScheduler;
@@ -72,15 +73,12 @@ describe('WorkspaceitemDataService test', () => {
   const wsiRD = createSuccessfulRemoteDataObject(wsi);
 
   const endpointURL = `https://rest.api/rest/api/submission/workspaceitems`;
-  const searchRequestURL = `https://rest.api/rest/api/submission/workspaceitems/search/item?uuid=1234-1234`;
-  const searchRequestURL$ = observableOf(searchRequestURL);
 
   const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
 
   objectCache = {} as ObjectCacheService;
   const notificationsService = {} as NotificationsService;
   const http = {} as HttpClient;
-  const comparator = {} as any;
   const comparatorEntry = {} as any;
   const store = {} as Store;
   const pageInfo = new PageInfo();
@@ -88,18 +86,23 @@ describe('WorkspaceitemDataService test', () => {
   function initTestService() {
     hrefOnlyDataService = getMockHrefOnlyDataService();
     return new WorkspaceitemDataService(
+      comparatorEntry,
+      halService,
+      http,
+      notificationsService,
       requestService,
       rdbService,
       objectCache,
-      halService,
-      notificationsService,
+      store
     );
   }
 
   describe('composition', () => {
-    const initService = () => new WorkspaceitemDataService(null, null, null, null, null);
-    testSearchDataImplementation(initService);
-    testDeleteDataImplementation(initService);
+    const initSearchService = () => new WorkspaceitemDataService(null, null, null, null, null, null, null, null) as unknown as SearchData;
+    const initDeleteService = () => new WorkspaceitemDataService(null, null, null, null, null, null, null, null) as unknown as DeleteData;
+
+    testSearchDataImplementation(initSearchService);
+    testDeleteDataImplementation(initDeleteService);
   });
 
   describe('', () => {
@@ -108,7 +111,7 @@ describe('WorkspaceitemDataService test', () => {
       scheduler = getTestScheduler();
 
       halService = jasmine.createSpyObj('halService', {
-        getEndpoint: cold('a', { a: endpointURL }),
+        getEndpoint: observableOf(endpointURL),
       });
       responseCacheEntry = new RequestEntry();
       responseCacheEntry.request = { href: 'https://rest.api/' } as any;
@@ -123,14 +126,14 @@ describe('WorkspaceitemDataService test', () => {
       });
       rdbService = jasmine.createSpyObj('rdbService', {
         buildSingle: hot('a|', {
-          a: wsiRD,
+          a: wsiRD
         }),
+        buildFromRequestUUID: createSuccessfulRemoteDataObject$({})
       });
 
       service = initTestService();
 
       spyOn((service as any), 'findByHref').and.callThrough();
-      spyOn((service as any), 'getSearchByHref').and.returnValue(searchRequestURL$);
     });
 
     afterEach(() => {
@@ -138,11 +141,11 @@ describe('WorkspaceitemDataService test', () => {
     });
 
     describe('findByItem', () => {
-      it('should proxy the call to DataService.findByHref', () => {
+      it('should proxy the call to UpdateDataServiceImpl.findByHref', () => {
         scheduler.schedule(() => service.findByItem('1234-1234', true, true, pageInfo));
         scheduler.flush();
-
-        expect((service as any).findByHref).toHaveBeenCalledWith(searchRequestURL$, true, true);
+        const searchUrl = service.getIDHref('item', [new RequestParam('uuid', encodeURIComponent('1234-1234'))]);
+        expect((service as any).findByHref).toHaveBeenCalledWith(searchUrl, true, true);
       });
 
       it('should return a RemoteData for the search', () => {
@@ -154,6 +157,19 @@ describe('WorkspaceitemDataService test', () => {
       });
 
     });
-  });
 
+    describe('importExternalSourceEntry', () => {
+      it('should send a POST request containing the provided item request', (done) => {
+        const options: HttpOptions = Object.create({});
+        let headers = new HttpHeaders();
+        headers = headers.append('Content-Type', 'text/uri-list');
+        options.headers = headers;
+
+        service.importExternalSourceEntry('externalHref', 'testId').subscribe(() => {
+          expect(requestService.send).toHaveBeenCalledWith(new PostRequest(requestUUID, `${endpointURL}?owningCollection=testId`, 'externalHref', options));
+          done();
+        });
+      });
+    });
+  });
 });
diff --git a/src/app/core/submission/workspaceitem-data.service.ts b/src/app/core/submission/workspaceitem-data.service.ts
index f7f3b1453d..564f057a35 100644
--- a/src/app/core/submission/workspaceitem-data.service.ts
+++ b/src/app/core/submission/workspaceitem-data.service.ts
@@ -1,110 +1,55 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { DSOChangeAnalyzer } from '../data/dso-change-analyzer.service';
+import { WorkspaceItem } from './models/workspaceitem.model';
+import { RemoteData } from '../data/remote-data';
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { RequestParam } from '../cache/models/request-param.model';
-import { ObjectCacheService } from '../cache/object-cache.service';
 import { dataService } from '../data/base/data-service.decorator';
-import {
-  DeleteData,
-  DeleteDataImpl,
-} from '../data/base/delete-data';
+import { DeleteData, DeleteDataImpl } from '../data/base/delete-data';
 import { IdentifiableDataService } from '../data/base/identifiable-data.service';
-import {
-  SearchData,
-  SearchDataImpl,
-} from '../data/base/search-data';
+import { SearchData, SearchDataImpl } from '../data/base/search-data';
+import { CoreState } from '../core-state.model';
 import { FindListOptions } from '../data/find-list-options.model';
+import { HttpOptions } from '../dspace-rest/dspace-rest.service';
+import { find, map } from 'rxjs/operators';
+import { PostRequest } from '../data/request.models';
+import { hasValue } from '../../shared/empty.util';
+import { NoContent } from '../shared/NoContent.model';
 import { PaginatedList } from '../data/paginated-list.model';
-import { RemoteData } from '../data/remote-data';
 import { RequestService } from '../data/request.service';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
-import { NoContent } from '../shared/NoContent.model';
-import { WorkspaceItem } from './models/workspaceitem.model';
 
 /**
  * A service that provides methods to make REST requests with workspaceitems endpoint.
  */
 @Injectable()
 @dataService(WorkspaceItem.type)
-export class WorkspaceitemDataService extends IdentifiableDataService implements SearchData, DeleteData {
+export class WorkspaceitemDataService extends IdentifiableDataService implements DeleteData, SearchData{
+  protected linkPath = 'workspaceitems';
   protected searchByItemLinkPath = 'item';
-
-  private searchData: SearchDataImpl;
-  private deleteData: DeleteDataImpl;
+  private deleteData: DeleteData;
+  private searchData: SearchData;
 
   constructor(
+    protected comparator: DSOChangeAnalyzer,
+    protected halService: HALEndpointService,
+    protected http: HttpClient,
+    protected notificationsService: NotificationsService,
     protected requestService: RequestService,
     protected rdbService: RemoteDataBuildService,
     protected objectCache: ObjectCacheService,
-    protected halService: HALEndpointService,
-    protected notificationsService: NotificationsService,
-  ) {
+    protected store: Store) {
     super('workspaceitems', requestService, rdbService, objectCache, halService);
-
-    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.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
   }
-
-  /**
-   * Return the WorkspaceItem object found through the UUID of an item
-   *
-   * @param uuid           The uuid of the item
-   * @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 options        The {@link FindListOptions} object
-   * @param linksToFollow  List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
-   */
-  public findByItem(uuid: string, useCachedVersionIfAvailable = false, reRequestOnStale = true, options: FindListOptions = {}, ...linksToFollow: FollowLinkConfig[]): Observable> {
-    const findListOptions = new FindListOptions();
-    findListOptions.searchParams = [new RequestParam('uuid', encodeURIComponent(uuid))];
-    const href$ = this.getSearchByHref(this.searchByItemLinkPath, findListOptions, ...linksToFollow);
-    return this.findByHref(href$, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-  }
-
-  /**
-   * Create the HREF for a specific object's search method with given options object
-   *
-   * @param searchMethod The search method for the object
-   * @param options The [[FindListOptions]] object
-   * @return {Observable}
-   *    Return an observable that emits created HREF
-   * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
-   */
-  public getSearchByHref(searchMethod: string, options?: FindListOptions, ...linksToFollow): Observable {
-    return this.searchData.getSearchByHref(searchMethod, options, ...linksToFollow);
-  }
-
-  /**
-   * 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);
-  }
-
-  /**
-   * Delete an existing object on the server
-   * @param   objectId The id of the object to be removed
-   * @param   copyVirtualMetadata (optional parameter) the identifiers of the relationship types for which the virtual
-   *                            metadata should be saved as real metadata
-   * @return  A RemoteData observable with an empty payload, but still representing the state of the request: statusCode,
-   *          errorMessage, timeCompleted, etc
-   */
   public delete(objectId: string, copyVirtualMetadata?: string[]): Observable> {
     return this.deleteData.delete(objectId, copyVirtualMetadata);
   }
@@ -122,4 +67,64 @@ export class WorkspaceitemDataService extends IdentifiableDataService[]): Observable> {
+    const findListOptions = new FindListOptions();
+    findListOptions.searchParams = [new RequestParam('uuid', encodeURIComponent(uuid))];
+    const href$ = this.getIDHref(this.searchByItemLinkPath, findListOptions, ...linksToFollow);
+    return this.findByHref(href$, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  /**
+   * Import an external source entry into a collection
+   * @param externalSourceEntryHref
+   * @param collectionId
+   */
+  public importExternalSourceEntry(externalSourceEntryHref: string, collectionId: string): Observable> {
+    const options: HttpOptions = Object.create({});
+    let headers = new HttpHeaders();
+    headers = headers.append('Content-Type', 'text/uri-list');
+    options.headers = headers;
+
+    const requestId = this.requestService.generateRequestId();
+    const href$ = this.halService.getEndpoint(this.linkPath).pipe(map((href) => `${href}?owningCollection=${collectionId}`));
+
+    href$.pipe(
+      find((href: string) => hasValue(href)),
+      map((href: string) => {
+        const request = new PostRequest(requestId, href, externalSourceEntryHref, options);
+        this.requestService.send(request);
+      })
+    ).subscribe();
+
+    return this.rdbService.buildFromRequestUUID(requestId);
+  }
+
+  /**
+   * 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
+   */
+  searchBy(searchMethod: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig[]): Observable>> {
+    return this.searchData.searchBy(searchMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 }
diff --git a/src/app/core/supervision-order/supervision-order-data.service.spec.ts b/src/app/core/supervision-order/supervision-order-data.service.spec.ts
index b4fd151efa..a5158a3791 100644
--- a/src/app/core/supervision-order/supervision-order-data.service.spec.ts
+++ b/src/app/core/supervision-order/supervision-order-data.service.spec.ts
@@ -17,6 +17,7 @@ import { buildPaginatedList } from '../data/paginated-list.model';
 import { RequestService } from '../data/request.service';
 import { RequestEntry } from '../data/request-entry.model';
 import { GroupDataService } from '../eperson/group-data.service';
+import { ObjectCacheServiceStub } from '../../shared/testing/object-cache-service.stub';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { PageInfo } from '../shared/page-info.model';
 import { ActionType } from './models/action-type.model';
@@ -27,7 +28,7 @@ describe('SupervisionOrderService', () => {
   let service: SupervisionOrderDataService;
   let requestService: RequestService;
   let rdbService: RemoteDataBuildService;
-  let objectCache: ObjectCacheService;
+  let objectCache: ObjectCacheServiceStub;
   let halService: HALEndpointService;
   let responseCacheEntry: RequestEntry;
   let groupService: GroupDataService;
@@ -131,14 +132,14 @@ describe('SupervisionOrderService', () => {
         a: 'https://rest.api/rest/api/group/groups/' + groupUUID,
       }),
     });
-    objectCache = {} as ObjectCacheService;
+    objectCache = new ObjectCacheServiceStub();
     const notificationsService = {} as NotificationsService;
     const comparator = {} as any;
 
     service = new SupervisionOrderDataService(
       requestService,
       rdbService,
-      objectCache,
+      objectCache as ObjectCacheService,
       halService,
       notificationsService,
       comparator,
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html
index 9f74216d54..aee9fb980c 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html
@@ -3,6 +3,7 @@
   
-  
    
+  
    
     
    {{ mdValue.newValue.value }}
    
-    
+    
+    
+    
+    
+    
    
+      
+        
+        {{ dsoType + '.edit.metadata.authority.label' | translate }} {{ mdValue.newValue.authority }}
+      
+    
    
+    
    
+      
    
+        
+        
+        
+        
+      
    
+    
    
     
    
       {{ mdRepresentationName$ | async }}
       
@@ -21,38 +68,38 @@
     
    
       
    
         
    
-          
-          
-          
-          
+          
         
    
       
    
-      
     
    
   
    
 
    
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
index 4a207ee1a4..e555191300 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
@@ -1,5 +1,5 @@
 .ds-success {
-  background-color: var(--bs-success-bg);
+  background-color: var(--ds-success-bg);
   border: 1px solid var(--bs-success);
 }
 
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts
index 0d4e95daf7..ba5376ffd2 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts
@@ -1,29 +1,32 @@
-import {
-  DebugElement,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { DebugElement, 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 { TranslateModule } from '@ngx-translate/core';
-import { of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { RelationshipDataService } from '../../../core/data/relationship-data.service';
-import {
-  MetadataValue,
-  VIRTUAL_METADATA_PREFIX,
-} from '../../../core/shared/metadata.models';
+import { MetadataValue, VIRTUAL_METADATA_PREFIX } from '../../../core/shared/metadata.models';
 import { ItemMetadataRepresentation } from '../../../core/shared/metadata-representation/item/item-metadata-representation.model';
+import { DsoEditMetadataChangeType, DsoEditMetadataValue } from '../dso-edit-metadata-form';
+import { ItemDataService } from '../../../core/data/item-data.service';
+import { Item } from '../../../core/shared/item.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { Collection } from '../../../core/shared/collection.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { Vocabulary } from 'src/app/core/submission/vocabularies/models/vocabulary.model';
+import { VocabularyServiceStub } from 'src/app/shared/testing/vocabulary-service.stub';
+import { VocabularyService } from 'src/app/core/submission/vocabularies/vocabulary.service';
+import { ConfidenceType } from 'src/app/core/shared/confidence-type';
+import { DynamicOneboxModel } from 'src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.model';
+import { DynamicScrollableDropdownModel } from 'src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
+import { RegistryService } from 'src/app/core/registry/registry.service';
+import { NotificationsService } from 'src/app/shared/notifications/notifications.service';
+import { createPaginatedList } from 'src/app/shared/testing/utils.test';
+import { MetadataField } from 'src/app/core/metadata/metadata-field.model';
+import { MetadataSchema } from 'src/app/core/metadata/metadata-schema.model';
 import { VarDirective } from '../../../shared/utils/var.directive';
-import {
-  DsoEditMetadataChangeType,
-  DsoEditMetadataValue,
-} from '../dso-edit-metadata-form';
 import { DsoEditMetadataValueComponent } from './dso-edit-metadata-value.component';
 
 const EDIT_BTN = 'edit';
@@ -38,17 +41,111 @@ describe('DsoEditMetadataValueComponent', () => {
 
   let relationshipService: RelationshipDataService;
   let dsoNameService: DSONameService;
+  let vocabularyServiceStub: any;
+  let itemService: ItemDataService;
+  let registryService: RegistryService;
+  let notificationsService: NotificationsService;
 
   let editMetadataValue: DsoEditMetadataValue;
   let metadataValue: MetadataValue;
+  let dso: DSpaceObject;
+
+  const collection =  Object.assign(new Collection(), {
+    uuid: 'fake-uuid'
+  });
+
+  const item = Object.assign(new Item(), {
+    _links: {
+      self: { href: 'fake-item-url/item' }
+    },
+    id: 'item',
+    uuid: 'item',
+    owningCollection: createSuccessfulRemoteDataObject$(collection)
+  });
+
+  const mockVocabularyScrollable: Vocabulary = {
+    id: 'scrollable',
+    name: 'scrollable',
+    scrollable: true,
+    hierarchical: false,
+    preloadLevel: 0,
+    type: 'vocabulary',
+    _links: {
+      self: {
+        href: 'self'
+      },
+      entries: {
+        href: 'entries'
+      }
+    }
+  };
+
+  const mockVocabularyHierarchical: Vocabulary = {
+    id: 'hierarchical',
+    name: 'hierarchical',
+    scrollable: false,
+    hierarchical: true,
+    preloadLevel: 2,
+    type: 'vocabulary',
+    _links: {
+      self: {
+        href: 'self'
+      },
+      entries: {
+        href: 'entries'
+      }
+    }
+  };
+
+  const mockVocabularySuggester: Vocabulary = {
+    id: 'suggester',
+    name: 'suggester',
+    scrollable: false,
+    hierarchical: false,
+    preloadLevel: 0,
+    type: 'vocabulary',
+    _links: {
+      self: {
+        href: 'self'
+      },
+      entries: {
+        href: 'entries'
+      }
+    }
+  };
+
+  let metadataSchema: MetadataSchema;
+  let metadataFields: MetadataField[];
 
   function initServices(): void {
+    metadataSchema = Object.assign(new MetadataSchema(), {
+      id: 0,
+      prefix: 'metadata',
+      namespace: 'http://example.com/',
+    });
+    metadataFields = [
+      Object.assign(new MetadataField(), {
+        id: 0,
+        element: 'regular',
+        qualifier: null,
+        schema: createSuccessfulRemoteDataObject$(metadataSchema),
+      }),
+    ];
+
     relationshipService = jasmine.createSpyObj('relationshipService', {
       resolveMetadataRepresentation: of(new ItemMetadataRepresentation(metadataValue)),
     });
     dsoNameService = jasmine.createSpyObj('dsoNameService', {
       getName: 'Related Name',
     });
+    itemService = jasmine.createSpyObj('itemService', {
+      findByHref: createSuccessfulRemoteDataObject$(item)
+    });
+    vocabularyServiceStub = new VocabularyServiceStub();
+    registryService = jasmine.createSpyObj('registryService', {
+      queryMetadataFields: createSuccessfulRemoteDataObject$(createPaginatedList(metadataFields)),
+    });
+    notificationsService = jasmine.createSpyObj('notificationsService', ['error', 'success']);
   }
 
   beforeEach(waitForAsync(() => {
@@ -59,6 +156,11 @@ describe('DsoEditMetadataValueComponent', () => {
       authority: undefined,
     });
     editMetadataValue = new DsoEditMetadataValue(metadataValue);
+    dso = Object.assign(new DSpaceObject(), {
+      _links: {
+        self: { href: 'fake-dso-url/dso' }
+      },
+    });
 
     initServices();
 
@@ -68,6 +170,10 @@ describe('DsoEditMetadataValueComponent', () => {
       providers: [
         { provide: RelationshipDataService, useValue: relationshipService },
         { provide: DSONameService, useValue: dsoNameService },
+        { provide: VocabularyService, useValue: vocabularyServiceStub },
+        { provide: ItemDataService, useValue: itemService },
+        { provide: RegistryService, useValue: registryService },
+        { provide: NotificationsService, useValue: notificationsService },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
@@ -77,6 +183,7 @@ describe('DsoEditMetadataValueComponent', () => {
     fixture = TestBed.createComponent(DsoEditMetadataValueComponent);
     component = fixture.componentInstance;
     component.mdValue = editMetadataValue;
+    component.dso = dso;
     component.saving$ = of(false);
     fixture.detectChanges();
   });
@@ -158,12 +265,228 @@ describe('DsoEditMetadataValueComponent', () => {
     assertButton(DRAG_BTN, true, false);
   });
 
+  describe('when the metadata field not uses a vocabulary and is editing', () => {
+    beforeEach(waitForAsync(() => {
+      spyOn(vocabularyServiceStub, 'getVocabularyByMetadataAndCollection').and.returnValue(createSuccessfulRemoteDataObject$(null, 204));
+      metadataValue = Object.assign(new MetadataValue(), {
+        value: 'Regular value',
+        language: 'en',
+        place: 0,
+        authority: null,
+      });
+      editMetadataValue = new DsoEditMetadataValue(metadataValue);
+      editMetadataValue.editing = true;
+      component.mdValue = editMetadataValue;
+      component.mdField = 'metadata.regular';
+      component.ngOnInit();
+      fixture.detectChanges();
+    }));
+
+    it('should render a textarea', () => {
+      expect(vocabularyServiceStub.getVocabularyByMetadataAndCollection).toHaveBeenCalled();
+      expect(fixture.debugElement.query(By.css('textarea'))).toBeTruthy();
+    });
+  });
+
+  describe('when the metadata field uses a scrollable vocabulary and is editing', () => {
+    beforeEach(waitForAsync(() => {
+      spyOn(vocabularyServiceStub, 'getVocabularyByMetadataAndCollection').and.returnValue(createSuccessfulRemoteDataObject$(mockVocabularyScrollable));
+      metadataValue = Object.assign(new MetadataValue(), {
+        value: 'Authority Controlled value',
+        language: 'en',
+        place: 0,
+        authority: null,
+      });
+      editMetadataValue = new DsoEditMetadataValue(metadataValue);
+      editMetadataValue.editing = true;
+      component.mdValue = editMetadataValue;
+      component.mdField = 'metadata.scrollable';
+      component.ngOnInit();
+      fixture.detectChanges();
+    }));
+
+    it('should render the DsDynamicScrollableDropdownComponent', () => {
+      expect(vocabularyServiceStub.getVocabularyByMetadataAndCollection).toHaveBeenCalled();
+      expect(fixture.debugElement.query(By.css('ds-dynamic-scrollable-dropdown'))).toBeTruthy();
+    });
+
+    it('getModel should return a DynamicScrollableDropdownModel', () => {
+      const result = component.getModel();
+
+      expect(result instanceof Observable).toBe(true);
+
+      result.subscribe((model) => {
+        expect(model instanceof DynamicScrollableDropdownModel).toBe(true);
+        expect(model.vocabularyOptions.name).toBe(mockVocabularyScrollable.name);
+      });
+    });
+  });
+
+  describe('when the  metadata field uses a hierarchical vocabulary and is editing', () => {
+    beforeEach(waitForAsync(() => {
+      spyOn(vocabularyServiceStub, 'getVocabularyByMetadataAndCollection').and.returnValue(createSuccessfulRemoteDataObject$(mockVocabularyHierarchical));
+      metadataValue = Object.assign(new MetadataValue(), {
+        value: 'Authority Controlled value',
+        language: 'en',
+        place: 0,
+        authority: null,
+      });
+      editMetadataValue = new DsoEditMetadataValue(metadataValue);
+      editMetadataValue.editing = true;
+      component.mdValue = editMetadataValue;
+      component.mdField = 'metadata.hierarchical';
+      component.ngOnInit();
+      fixture.detectChanges();
+    }));
+
+    it('should render the DsDynamicOneboxComponent', () => {
+      expect(vocabularyServiceStub.getVocabularyByMetadataAndCollection).toHaveBeenCalled();
+      expect(fixture.debugElement.query(By.css('ds-dynamic-onebox'))).toBeTruthy();
+    });
+
+    it('getModel should return a DynamicOneboxModel', () => {
+      const result = component.getModel();
+
+      expect(result instanceof Observable).toBe(true);
+
+      result.subscribe((model) => {
+        expect(model instanceof DynamicOneboxModel).toBe(true);
+        expect(model.vocabularyOptions.name).toBe(mockVocabularyHierarchical.name);
+      });
+    });
+  });
+
+  describe('when the metadata field uses a suggester vocabulary and is editing', () => {
+    beforeEach(waitForAsync(() => {
+      spyOn(vocabularyServiceStub, 'getVocabularyByMetadataAndCollection').and.returnValue(createSuccessfulRemoteDataObject$(mockVocabularySuggester));
+      spyOn(component.confirm, 'emit');
+      metadataValue = Object.assign(new MetadataValue(), {
+        value: 'Authority Controlled value',
+        language: 'en',
+        place: 0,
+        authority: 'authority-key',
+        confidence: ConfidenceType.CF_UNCERTAIN
+      });
+      editMetadataValue = new DsoEditMetadataValue(metadataValue);
+      editMetadataValue.editing = true;
+      component.mdValue = editMetadataValue;
+      component.mdField = 'metadata.suggester';
+      component.ngOnInit();
+      fixture.detectChanges();
+    }));
+
+    it('should render the DsDynamicOneboxComponent', () => {
+      expect(vocabularyServiceStub.getVocabularyByMetadataAndCollection).toHaveBeenCalled();
+      expect(fixture.debugElement.query(By.css('ds-dynamic-onebox'))).toBeTruthy();
+    });
+
+    it('getModel should return a DynamicOneboxModel', () => {
+      const result = component.getModel();
+
+      expect(result instanceof Observable).toBe(true);
+
+      result.subscribe((model) => {
+        expect(model instanceof DynamicOneboxModel).toBe(true);
+        expect(model.vocabularyOptions.name).toBe(mockVocabularySuggester.name);
+      });
+    });
+
+    describe('authority key edition', () => {
+
+      it('should update confidence to CF_NOVALUE when authority is cleared', () => {
+        component.mdValue.newValue.authority = '';
+
+        component.onChangeAuthorityKey();
+
+        expect(component.mdValue.newValue.confidence).toBe(ConfidenceType.CF_NOVALUE);
+        expect(component.confirm.emit).toHaveBeenCalledWith(false);
+      });
+
+      it('should update confidence to CF_ACCEPTED when authority key is edited', () => {
+        component.mdValue.newValue.authority = 'newAuthority';
+        component.mdValue.originalValue.authority = 'oldAuthority';
+
+        component.onChangeAuthorityKey();
+
+        expect(component.mdValue.newValue.confidence).toBe(ConfidenceType.CF_ACCEPTED);
+        expect(component.confirm.emit).toHaveBeenCalledWith(false);
+      });
+
+      it('should not update confidence when authority key remains the same', () => {
+        component.mdValue.newValue.authority = 'sameAuthority';
+        component.mdValue.originalValue.authority = 'sameAuthority';
+
+        component.onChangeAuthorityKey();
+
+        expect(component.mdValue.newValue.confidence).toBe(ConfidenceType.CF_UNCERTAIN);
+        expect(component.confirm.emit).not.toHaveBeenCalled();
+      });
+
+      it('should call onChangeEditingAuthorityStatus with true when clicking the lock button', () => {
+        spyOn(component, 'onChangeEditingAuthorityStatus');
+        const lockButton = fixture.nativeElement.querySelector('#metadata-confirm-btn');
+
+        lockButton.click();
+
+        expect(component.onChangeEditingAuthorityStatus).toHaveBeenCalledWith(true);
+      });
+
+      it('should disable the input when editingAuthority is false', () => {
+        component.editingAuthority = false;
+
+        fixture.detectChanges();
+
+        const inputElement = fixture.nativeElement.querySelector('input');
+        expect(inputElement.disabled).toBe(true);
+      });
+
+      it('should enable the input when editingAuthority is true', () => {
+        component.editingAuthority = true;
+
+        fixture.detectChanges();
+
+        const inputElement = fixture.nativeElement.querySelector('input');
+        expect(inputElement.disabled).toBe(false);
+      });
+
+      it('should update mdValue.newValue properties when authority is present', () => {
+        const event = {
+          value: 'Some value',
+          authority: 'Some authority',
+        };
+
+        component.onChangeAuthorityField(event);
+
+        expect(component.mdValue.newValue.value).toBe(event.value);
+        expect(component.mdValue.newValue.authority).toBe(event.authority);
+        expect(component.mdValue.newValue.confidence).toBe(ConfidenceType.CF_ACCEPTED);
+        expect(component.confirm.emit).toHaveBeenCalledWith(false);
+      });
+
+      it('should update mdValue.newValue properties when authority is not present', () => {
+        const event = {
+          value: 'Some value',
+          authority: null,
+        };
+
+        component.onChangeAuthorityField(event);
+
+        expect(component.mdValue.newValue.value).toBe(event.value);
+        expect(component.mdValue.newValue.authority).toBeNull();
+        expect(component.mdValue.newValue.confidence).toBe(ConfidenceType.CF_UNSET);
+        expect(component.confirm.emit).toHaveBeenCalledWith(false);
+      });
+
+    });
+
+  });
+
   function assertButton(name: string, exists: boolean, disabled: boolean = false): void {
     describe(`${name} button`, () => {
       let btn: DebugElement;
 
       beforeEach(() => {
-        btn = fixture.debugElement.query(By.css(`#metadata-${name}-btn`));
+        btn = fixture.debugElement.query(By.css(`button[data-test="metadata-${name}-btn"]`));
       });
 
       if (exists) {
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts
index d837e4c7b3..c8e49032cb 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts
@@ -1,29 +1,31 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-import {
-  EMPTY,
-  Observable,
-} from 'rxjs';
-import { map } from 'rxjs/operators';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { DsoEditMetadataChangeType, DsoEditMetadataValue } from '../dso-edit-metadata-form';
+import { EMPTY, Observable, of as observableOf } from 'rxjs';
+import { map, switchMap, take } from 'rxjs/operators';
 
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { RelationshipDataService } from '../../../core/data/relationship-data.service';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { ItemMetadataRepresentation } from '../../../core/shared/metadata-representation/item/item-metadata-representation.model';
-import {
-  MetadataRepresentation,
-  MetadataRepresentationType,
-} from '../../../core/shared/metadata-representation/metadata-representation.model';
 import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
-import {
-  DsoEditMetadataChangeType,
-  DsoEditMetadataValue,
-} from '../dso-edit-metadata-form';
+import { VocabularyService } from 'src/app/core/submission/vocabularies/vocabulary.service';
+import { Vocabulary } from '../../../core/submission/vocabularies/models/vocabulary.model';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
+import { ConfidenceType } from '../../../core/shared/confidence-type';
+import { getFirstCompletedRemoteData, getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload, getRemoteDataPayload, metadataFieldsToString } from '../../../core/shared/operators';
+import { DsDynamicOneboxModelConfig, DynamicOneboxModel } from '../../../shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.model';
+import { DynamicScrollableDropdownModel, DynamicScrollableDropdownModelConfig } from '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
+import { ItemDataService } from '../../../core/data/item-data.service';
+import { followLink } from '../../../shared/utils/follow-link-config.model';
+import { Item } from '../../../core/shared/item.model';
+import { Collection } from '../../../core/shared/collection.model';
+import { FormFieldMetadataValueObject } from '../../../shared/form/builder/models/form-field-metadata-value.model';
+import { isNotEmpty } from '../../../shared/empty.util';
+import { RegistryService } from 'src/app/core/registry/registry.service';
+import { TranslateService } from '@ngx-translate/core';
+import { NotificationsService } from 'src/app/shared/notifications/notifications.service';
+import { MetadataRepresentation, MetadataRepresentationType } from '../../../core/shared/metadata-representation/metadata-representation.model';
 
 @Component({
   selector: 'ds-dso-edit-metadata-value',
@@ -33,7 +35,7 @@ import {
 /**
  * Component displaying a single editable row for a metadata value
  */
-export class DsoEditMetadataValueComponent implements OnInit {
+export class DsoEditMetadataValueComponent implements OnInit, OnChanges {
   /**
    * The parent {@link DSpaceObject} to display a metadata form for
    * Also used to determine metadata-representations in case of virtual metadata
@@ -63,6 +65,11 @@ export class DsoEditMetadataValueComponent implements OnInit {
    */
   @Input() isOnlyValue = false;
 
+  /**
+   * MetadataField to edit
+   */
+  @Input() mdField?: string;
+
   /**
    * Emits when the user clicked edit
    */
@@ -94,6 +101,12 @@ export class DsoEditMetadataValueComponent implements OnInit {
    */
   public DsoEditMetadataChangeTypeEnum = DsoEditMetadataChangeType;
 
+  /**
+   * The ConfidenceType enumeration for access in the component's template
+   * @type {ConfidenceType}
+   */
+  public ConfidenceTypeEnum = ConfidenceType;
+
   /**
    * The item this metadata value represents in case it's virtual (if any, otherwise null)
    */
@@ -109,12 +122,48 @@ export class DsoEditMetadataValueComponent implements OnInit {
    */
   mdRepresentationName$: Observable;
 
+  /**
+   * Whether or not the authority field is currently being edited
+   */
+  public editingAuthority = false;
+
+  /**
+   * Field group used by authority field
+   * @type {UntypedFormGroup}
+   */
+  group = new UntypedFormGroup({ authorityField : new UntypedFormControl()});
+
+  /**
+   * Observable property of the model to use for editinf authorities values
+   */
+  private model$: Observable;
+
+  /**
+   * Observable with information about the authority vocabulary used
+   */
+  private vocabulary$: Observable;
+
+  /**
+   * Observables with information about the authority vocabulary type used
+   */
+  private isAuthorityControlled$: Observable;
+  private isHierarchicalVocabulary$: Observable;
+  private isScrollableVocabulary$: Observable;
+  private isSuggesterVocabulary$: Observable;
+
   constructor(protected relationshipService: RelationshipDataService,
-              protected dsoNameService: DSONameService) {
+              protected dsoNameService: DSONameService,
+              protected vocabularyService: VocabularyService,
+              protected itemService: ItemDataService,
+              protected cdr: ChangeDetectorRef,
+              protected registryService: RegistryService,
+              protected notificationsService: NotificationsService,
+              protected translate: TranslateService) {
   }
 
   ngOnInit(): void {
     this.initVirtualProperties();
+    this.initAuthorityProperties();
   }
 
   /**
@@ -135,4 +184,223 @@ export class DsoEditMetadataValueComponent implements OnInit {
       map((mdRepresentation: ItemMetadataRepresentation) => mdRepresentation ? this.dsoNameService.getName(mdRepresentation) : null),
     );
   }
+
+  /**
+   * Initialise potential properties of a authority controlled metadata field
+   */
+  initAuthorityProperties(): void {
+
+    if (isNotEmpty(this.mdField)) {
+
+      const owningCollection$: Observable = this.itemService.findByHref(this.dso._links.self.href, true, true, followLink('owningCollection'))
+        .pipe(
+          getFirstSucceededRemoteData(),
+          getRemoteDataPayload(),
+          switchMap((item: Item) => item.owningCollection),
+          getFirstSucceededRemoteData(),
+          getRemoteDataPayload()
+        );
+
+      this.vocabulary$ = owningCollection$.pipe(
+        switchMap((c: Collection) => this.vocabularyService
+          .getVocabularyByMetadataAndCollection(this.mdField, c.uuid)
+            .pipe(
+              getFirstSucceededRemoteDataPayload()
+        ))
+      );
+    } else {
+      this.vocabulary$ = observableOf(undefined);
+    }
+
+    this.isAuthorityControlled$ = this.vocabulary$.pipe(
+      map((result: Vocabulary) => isNotEmpty(result))
+    );
+
+    this.isHierarchicalVocabulary$ = this.vocabulary$.pipe(
+      map((result: Vocabulary) => isNotEmpty(result) && result.hierarchical)
+    );
+
+    this.isScrollableVocabulary$ = this.vocabulary$.pipe(
+      map((result: Vocabulary) => isNotEmpty(result) && result.scrollable)
+    );
+
+    this.isSuggesterVocabulary$ = this.vocabulary$.pipe(
+      map((result: Vocabulary) => isNotEmpty(result) && !result.hierarchical && !result.scrollable)
+    );
+
+    this.model$ = this.vocabulary$.pipe(
+        map((vocabulary: Vocabulary) => {
+          let formFieldValue;
+          if (isNotEmpty(this.mdValue.newValue.value)) {
+            formFieldValue = new FormFieldMetadataValueObject();
+            formFieldValue.value = this.mdValue.newValue.value;
+            formFieldValue.display = this.mdValue.newValue.value;
+            if (this.mdValue.newValue.authority) {
+              formFieldValue.authority = this.mdValue.newValue.authority;
+              formFieldValue.confidence = this.mdValue.newValue.confidence;
+            }
+          } else {
+            formFieldValue = this.mdValue.newValue.value;
+          }
+
+          let vocabularyOptions = vocabulary ? {
+            closed: false,
+            name: vocabulary.name
+          } as VocabularyOptions : null;
+
+          if (!vocabulary.scrollable) {
+            let model: DsDynamicOneboxModelConfig = {
+              id: 'authorityField',
+              label: `${this.dsoType}.edit.metadata.edit.value`,
+              vocabularyOptions: vocabularyOptions,
+              metadataFields: [this.mdField],
+              value: formFieldValue,
+              repeatable: false,
+              submissionId: 'edit-metadata',
+              hasSelectableMetadata: false,
+            };
+            return new DynamicOneboxModel(model);
+          } else {
+            let model: DynamicScrollableDropdownModelConfig = {
+              id: 'authorityField',
+              label: `${this.dsoType}.edit.metadata.edit.value`,
+              placeholder: `${this.dsoType}.edit.metadata.edit.value`,
+              vocabularyOptions: vocabularyOptions,
+              metadataFields: [this.mdField],
+              value: formFieldValue,
+              repeatable: false,
+              submissionId: 'edit-metadata',
+              hasSelectableMetadata: false,
+              maxOptions: 10
+            };
+            return new DynamicScrollableDropdownModel(model);
+          }
+      }));
+  }
+
+  /**
+   * Change callback for the component. Check if the mdField has changed to retrieve whether it is metadata
+   * that uses a controlled vocabulary and update the related properties
+   *
+   * @param {SimpleChanges} changes
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (isNotEmpty(changes.mdField) && !changes.mdField.firstChange) {
+      if (isNotEmpty(changes.mdField.currentValue) ) {
+        if (isNotEmpty(changes.mdField.previousValue) &&
+          changes.mdField.previousValue !== changes.mdField.currentValue) {
+          // Clear authority value in case it has been assigned with the previous metadataField used
+          this.mdValue.newValue.authority = null;
+          this.mdValue.newValue.confidence = ConfidenceType.CF_UNSET;
+        }
+
+        // Only ask if the current mdField have a period character to reduce request
+        if (changes.mdField.currentValue.includes('.')) {
+          this.validateMetadataField().subscribe((isValid: boolean) => {
+            if (isValid) {
+              this.initAuthorityProperties();
+              this.cdr.detectChanges();
+            }
+          });
+        }
+      }
+    }
+  }
+
+  /**
+   * Validate the metadata field to check if it exists on the server and return an observable boolean for success/error
+   */
+  validateMetadataField(): Observable {
+    return this.registryService.queryMetadataFields(this.mdField, null, true, false, followLink('schema')).pipe(
+      getFirstCompletedRemoteData(),
+      switchMap((rd) => {
+        if (rd.hasSucceeded) {
+          return observableOf(rd).pipe(
+            metadataFieldsToString(),
+            take(1),
+            map((fields: string[]) => fields.indexOf(this.mdField) > -1)
+          );
+        } else {
+          this.notificationsService.error(this.translate.instant(`${this.dsoType}.edit.metadata.metadatafield.error`), rd.errorMessage);
+          return [false];
+        }
+      }),
+    );
+  }
+
+  /**
+   * Checks if this field use a authority vocabulary
+   */
+  isAuthorityControlled(): Observable {
+    return this.isAuthorityControlled$;
+  }
+
+  /**
+   * Checks if configured vocabulary is Hierarchical or not
+   */
+  isHierarchicalVocabulary(): Observable {
+    return this.isHierarchicalVocabulary$;
+  }
+
+  /**
+   * Checks if configured vocabulary is Scrollable or not
+   */
+  isScrollableVocabulary(): Observable {
+    return this.isScrollableVocabulary$;
+  }
+
+  /**
+   * Checks if configured vocabulary is Suggester or not
+   * (a vocabulary not Scrollable and not Hierarchical that uses an autocomplete field)
+   */
+  isSuggesterVocabulary(): Observable {
+    return this.isSuggesterVocabulary$;
+  }
+
+  /**
+   * Process the change of authority field value updating the authority key and confidence as necessary
+   */
+  onChangeAuthorityField(event): void {
+    this.mdValue.newValue.value = event.value;
+    if (event.authority) {
+      this.mdValue.newValue.authority = event.authority;
+      this.mdValue.newValue.confidence = ConfidenceType.CF_ACCEPTED;
+    } else {
+      this.mdValue.newValue.authority = null;
+      this.mdValue.newValue.confidence = ConfidenceType.CF_UNSET;
+    }
+    this.confirm.emit(false);
+  }
+
+  /**
+   * Returns an observable with the {@link DynamicOneboxModel} or {@link DynamicScrollableDropdownModel} model used
+   * for the authority field
+   */
+  getModel(): Observable {
+    return this.model$;
+  }
+
+  /**
+   * Change the status of the editingAuthority property
+   * @param status
+   */
+  onChangeEditingAuthorityStatus(status: boolean) {
+    this.editingAuthority = status;
+  }
+
+  /**
+   * Processes the change in authority value, updating the confidence as necessary.
+   * If the authority key is cleared, the confidence is set to {@link ConfidenceType.CF_NOVALUE}.
+   * If the authority key is edited and differs from the original, the confidence is set to {@link ConfidenceType.CF_ACCEPTED}.
+   */
+  onChangeAuthorityKey() {
+    if (this.mdValue.newValue.authority === '') {
+      this.mdValue.newValue.confidence = ConfidenceType.CF_NOVALUE;
+      this.confirm.emit(false);
+    } else if (this.mdValue.newValue.authority !== this.mdValue.originalValue.authority) {
+      this.mdValue.newValue.confidence = ConfidenceType.CF_ACCEPTED;
+      this.confirm.emit(false);
+    }
+  }
+
 }
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
index 24c3dc5cd7..d6c72abdb9 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
@@ -2,23 +2,23 @@
   
    
     
     
     
     
   
    
@@ -40,6 +40,7 @@
                                       [dsoType]="dsoType"
                                       [saving$]="savingOrLoadingFieldValidation$"
                                       [isOnlyValue]="true"
+                                      [mdField]="newMdField"
                                       (confirm)="confirmNewValue($event)"
                                       (remove)="form.newValue = undefined"
                                       (undo)="form.newValue = undefined">
@@ -74,16 +75,19 @@
     
    
       
       
       
     
    
   
    
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss
index 4e5e9ff1d4..3a181fd130 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss
@@ -7,7 +7,7 @@
   border: 1px solid var(--bs-gray-200);
 
   &.ds-success {
-    background-color: var(--bs-success-bg);
+    background-color: var(--ds-success-bg);
     border: 1px solid var(--bs-success);
   }
 }
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
index e48f1d4ebe..89a30db9bc 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
@@ -1,42 +1,23 @@
-import {
-  Component,
-  Inject,
-  Injector,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Data,
-} from '@angular/router';
+import { Component, Inject, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Data } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import {
-  BehaviorSubject,
-  combineLatest as observableCombineLatest,
-  Observable,
-  Subscription,
-} from 'rxjs';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ArrayMoveChangeAnalyzer } from '../../core/data/array-move-change-analyzer.service';
 import { DATA_SERVICE_FACTORY } from '../../core/data/base/data-service.decorator';
 import { HALDataService } from '../../core/data/base/hal-data-service.interface';
 import { RemoteData } from '../../core/data/remote-data';
-import { UpdateDataService } from '../../core/data/update-data.service';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { hasNoValue, hasValue } from '../../shared/empty.util';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { ResourceType } from '../../core/shared/resource-type';
 import { AlertType } from '../../shared/alert/alert-type';
-import {
-  hasNoValue,
-  hasValue,
-} from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { DsoEditMetadataForm } from './dso-edit-metadata-form';
 import { MetadataFieldSelectorComponent } from './metadata-field-selector/metadata-field-selector.component';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { UpdateDataService } from '../../core/data/update-data.service';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
 
 @Component({
   selector: 'ds-dso-edit-metadata',
diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html
index 4c310bd81b..3f5af76051 100644
--- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html
@@ -1,6 +1,7 @@
 
    
   
     
    
       
     
    
   
    
diff --git a/src/app/dso-shared/dso-shared.module.ts b/src/app/dso-shared/dso-shared.module.ts
index ff6a48d2ab..0affc48d55 100644
--- a/src/app/dso-shared/dso-shared.module.ts
+++ b/src/app/dso-shared/dso-shared.module.ts
@@ -8,10 +8,12 @@ import { DsoEditMetadataValueComponent } from './dso-edit-metadata/dso-edit-meta
 import { DsoEditMetadataValueHeadersComponent } from './dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component';
 import { MetadataFieldSelectorComponent } from './dso-edit-metadata/metadata-field-selector/metadata-field-selector.component';
 import { ThemedDsoEditMetadataComponent } from './dso-edit-metadata/themed-dso-edit-metadata.component';
+import { FormModule } from '../shared/form/form.module';
 
 @NgModule({
   imports: [
     SharedModule,
+    FormModule
   ],
   declarations: [
     DsoEditMetadataComponent,
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
index 75f4587a3d..3648b53b51 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
@@ -1,4 +1,4 @@
-
+
 
    
   
   
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
index 213581a519..b906905b47 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
@@ -1,4 +1,4 @@
-
+
 
    
   
   
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
index 3b2cce061b..e8a6904242 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
@@ -1,4 +1,4 @@
-
+
 
    
   
   
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index c79d19e267..f28550a4e0 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -1,4 +1,4 @@
-
+
 
    
   
   
@@ -32,6 +32,18 @@
     
   
    
   
    
+    
+    
     
+
 
    
   
   
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index 0d9679ef1e..944766b6f7 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -1,4 +1,4 @@
-
+
 
    
   
   
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
index c4e31d3d81..58f39b8d0b 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
@@ -11,7 +11,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    
+    
     
    
         
    
             
    
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts
index e4b20402e7..cd78a800db 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts
@@ -1,13 +1,7 @@
-import {
-  ChangeDetectionStrategy,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { OrgUnitInputSuggestionsComponent } from './org-unit-input-suggestions.component';
 
@@ -29,6 +23,7 @@ describe('OrgUnitInputSuggestionsComponent', () => {
       declarations: [OrgUnitInputSuggestionsComponent],
       imports: [
         FormsModule,
+        TranslateModule.forRoot(),
       ],
       providers: [
       ],
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
index b1621dbd2c..53260ceaa3 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
@@ -12,7 +12,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    
+    
     
    
         
    
             
    
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index ac903929f6..b937b2ce60 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -82,6 +82,12 @@
         
    • 
       

     

+    

+      
+        
+        COAR Notify
+      
+    

   

   
 
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index f1a872c099..5f86137b44 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -22,6 +22,23 @@
     }
 
     .bottom-footer {
+      .notify-enabled {
+        position: absolute;
+        bottom: 4px;
+        right: 0;
+
+        .coar-notify-support-route {
+          padding: 0 calc(var(--bs-spacer) / 2);
+          color: inherit;
+        }
+
+        .n-coar {
+          height: var(--ds-footer-n-coar-height);
+          margin-bottom: 8.5px;
+        }
+
+        margin-top: 20px;
+      }
       ul {
         li {
           display: inline-flex;
@@ -55,3 +72,4 @@
 }
 
 
+
diff --git a/src/app/footer/footer.component.spec.ts b/src/app/footer/footer.component.spec.ts
index 41b0d1fe87..b7b9d30f6c 100644
--- a/src/app/footer/footer.component.spec.ts
+++ b/src/app/footer/footer.component.spec.ts
@@ -1,37 +1,35 @@
 // ... test imports
+import { ComponentFixture, fakeAsync, inject, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+
 import { CommonModule } from '@angular/common';
-import {
-  CUSTOM_ELEMENTS_SCHEMA,
-  DebugElement,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  inject,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { StoreModule } from '@ngrx/store';
-import {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 
 import { storeModuleConfig } from '../app.reducer';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
 import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
 import { AuthorizationDataServiceStub } from '../shared/testing/authorization-service.stub';
+import { NotifyInfoService } from '../core/coar-notify/notify-info/notify-info.service';
+import { environment } from 'src/environments/environment';
+
 // Load the implementations that should be tested
 import { FooterComponent } from './footer.component';
 
 let comp: FooterComponent;
+let compAny: any;
 let fixture: ComponentFixture;
 let de: DebugElement;
 let el: HTMLElement;
 
-describe('Footer component', () => {
+let notifyInfoService = {
+  isCoarConfigEnabled: () => of(true)
+};
 
-  // waitForAsync beforeEach
+describe('Footer component', () => {
   beforeEach(waitForAsync(() => {
     return TestBed.configureTestingModule({
       imports: [CommonModule, StoreModule.forRoot({}, storeModuleConfig), TranslateModule.forRoot({
@@ -44,6 +42,7 @@ describe('Footer component', () => {
       providers: [
         FooterComponent,
         { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
+        { provide: NotifyInfoService, useValue: notifyInfoService }
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     });
@@ -52,9 +51,8 @@ describe('Footer component', () => {
   // synchronous beforeEach
   beforeEach(() => {
     fixture = TestBed.createComponent(FooterComponent);
-
-    comp = fixture.componentInstance; // component test instance
-
+    comp = fixture.componentInstance;
+    compAny = comp as any;
     // query for the title 
 by CSS element selector
     de = fixture.debugElement.query(By.css('p'));
     el = de.nativeElement;
@@ -65,4 +63,56 @@ describe('Footer component', () => {
     expect(app).toBeTruthy();
   }));
 
+
+  it('should set showPrivacyPolicy to the value of environment.info.enablePrivacyStatement', () => {
+    expect(comp.showPrivacyPolicy).toBe(environment.info.enablePrivacyStatement);
+  });
+
+  it('should set showEndUserAgreement to the value of environment.info.enableEndUserAgreement', () => {
+    expect(comp.showEndUserAgreement).toBe(environment.info.enableEndUserAgreement);
+  });
+
+  describe('showCookieSettings', () => {
+    it('should call cookies.showSettings() if cookies is defined', () => {
+      const cookies = jasmine.createSpyObj('cookies', ['showSettings']);
+      compAny.cookies = cookies;
+      comp.showCookieSettings();
+      expect(cookies.showSettings).toHaveBeenCalled();
+    });
+
+    it('should not call cookies.showSettings() if cookies is undefined', () => {
+      compAny.cookies = undefined;
+      expect(() => comp.showCookieSettings()).not.toThrow();
+    });
+
+    it('should return false', () => {
+      expect(comp.showCookieSettings()).toBeFalse();
+    });
+  });
+
+  describe('when coarLdnEnabled is true', () => {
+    beforeEach(() => {
+      spyOn(notifyInfoService, 'isCoarConfigEnabled').and.returnValue(of(true));
+      fixture.detectChanges();
+    });
+
+    it('should set coarLdnEnabled based on notifyInfoService', () => {
+      expect(comp.coarLdnEnabled).toBeTruthy();
+      // Check if COAR Notify section is rendered
+      const notifySection = fixture.debugElement.query(By.css('.notify-enabled'));
+      expect(notifySection).toBeTruthy();
+    });
+
+    it('should redirect to info/coar-notify-support', () => {
+      // Check if the link to the COAR Notify support page is present
+      const routerLink = fixture.debugElement.query(By.css('a[routerLink="info/coar-notify-support"].coar-notify-support-route'));
+      expect(routerLink).toBeTruthy();
+    });
+
+    it('should have an img tag with the class "n-coar" when coarLdnEnabled is true', fakeAsync(() => {
+      // Check if the img tag with the class "n-coar" is present
+      const imgTag = fixture.debugElement.query(By.css('.notify-enabled img.n-coar'));
+      expect(imgTag).toBeTruthy();
+    }));
+  });
 });
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts
index f3640ac613..fdbf8c13b3 100644
--- a/src/app/footer/footer.component.ts
+++ b/src/app/footer/footer.component.ts
@@ -1,14 +1,11 @@
-import {
-  Component,
-  Optional,
-} from '@angular/core';
-import { Observable } from 'rxjs';
-
+import { Component, Optional } from '@angular/core';
+import { hasValue } from '../shared/empty.util';
+import { KlaroService } from '../shared/cookies/klaro.service';
 import { environment } from '../../environments/environment';
+import { NotifyInfoService } from '../core/coar-notify/notify-info/notify-info.service';
+import { Observable } from 'rxjs';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../core/data/feature-authorization/feature-id';
-import { KlaroService } from '../shared/cookies/klaro.service';
-import { hasValue } from '../shared/empty.util';
 
 @Component({
   selector: 'ds-footer',
@@ -25,12 +22,17 @@ export class FooterComponent {
   showPrivacyPolicy = environment.info.enablePrivacyStatement;
   showEndUserAgreement = environment.info.enableEndUserAgreement;
   showSendFeedback$: Observable;
+  coarLdnEnabled: boolean;
 
   constructor(
     @Optional() private cookies: KlaroService,
     private authorizationService: AuthorizationDataService,
+    private notifyInfoService: NotifyInfoService
   ) {
     this.showSendFeedback$ = this.authorizationService.isAuthorized(FeatureID.CanSendFeedback);
+    this.notifyInfoService.isCoarConfigEnabled().subscribe(coarLdnEnabled => {
+      this.coarLdnEnabled = coarLdnEnabled;
+    });
   }
 
   showCookieSettings() {
diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
index 5fb0006279..189d0bee40 100644
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
@@ -1,13 +1,13 @@
 

-    
{{'forgot-password.form.head' | translate}}

+    
{{'forgot-password.form.head' | translate}}

     

         
{{'forgot-password.form.identification.header' | translate}}

         

             

                 

-                    
-                    {{(registration$ |async).email}}

+                    {{'forgot-password.form.identification.email' | translate}} 
+                    {{(registration$ |async).email}}
+                

             

         

     

diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts
index b7a9ab8978..a92c487bf5 100644
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts
@@ -1,19 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
-import {
-  ReactiveFormsModule,
-  UntypedFormBuilder,
-} from '@angular/forms';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
@@ -24,11 +14,8 @@ import { CoreState } from '../../core/core-state.model';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { Registration } from '../../core/shared/registration.model';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
-import {
-  createFailedRemoteDataObject$,
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../shared/remote-data.utils';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
 import { RouterStub } from '../../shared/testing/router.stub';
 import { ForgotPasswordFormComponent } from './forgot-password-form.component';
@@ -65,7 +52,10 @@ describe('ForgotPasswordFormComponent', () => {
 
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), ReactiveFormsModule],
-      declarations: [ForgotPasswordFormComponent],
+      declarations: [
+        BrowserOnlyPipe,
+        ForgotPasswordFormComponent,
+      ],
       providers: [
         { provide: Router, useValue: router },
         { provide: ActivatedRoute, useValue: route },
@@ -86,7 +76,7 @@ describe('ForgotPasswordFormComponent', () => {
 
   describe('init', () => {
     it('should initialise mail address', () => {
-      const elem = fixture.debugElement.queryAll(By.css('span#email'))[0].nativeElement;
+      const elem = fixture.debugElement.queryAll(By.css('span[data-test="email"]'))[0].nativeElement;
       expect(elem.innerHTML).toContain('test@email.org');
     });
   });
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
index 65e08d08ce..3dd7313f97 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,4 +1,4 @@
-

+

     
     
 

diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
index ec8f649fe9..0a32b3a70e 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -1,19 +1,8 @@
-import {
-  Component,
-  HostBinding,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { Store } from '@ngrx/store';
-import {
-  Observable,
-  Subscription,
-} from 'rxjs';
-
-import { AppState } from '../app.reducer';
-import { hasValue } from '../shared/empty.util';
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
+import { HostWindowService, WidthCategory } from '../shared/host-window.service';
 
 /**
  * This component represents a wrapper for the horizontal navbar and the header
@@ -23,26 +12,22 @@ import { MenuID } from '../shared/menu/menu-id.model';
   styleUrls: ['header-navbar-wrapper.component.scss'],
   templateUrl: 'header-navbar-wrapper.component.html',
 })
-export class HeaderNavbarWrapperComponent implements OnInit, OnDestroy {
-  @HostBinding('class.open') isOpen = false;
-  private sub: Subscription;
-  public isNavBarCollapsed: Observable;
+export class HeaderNavbarWrapperComponent implements OnInit {
+  public isNavBarCollapsed$: Observable;
+  public isMobile$: Observable;
+
   menuID = MenuID.PUBLIC;
+  maxMobileWidth = WidthCategory.SM;
 
   constructor(
-    private store: Store,
     private menuService: MenuService,
+    protected windowService: HostWindowService,
   ) {
   }
 
   ngOnInit(): void {
-    this.isNavBarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
-    this.sub = this.isNavBarCollapsed.subscribe((isCollapsed) => this.isOpen = !isCollapsed);
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
+    this.isNavBarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID);
   }
 
-  ngOnDestroy() {
-    if (hasValue(this.sub)) {
-      this.sub.unsubscribe();
-    }
-  }
 }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 32b42dc8a7..e98959d162 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -11,11 +11,11 @@
         
         
         
-        

+        

           
         

       
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 8539ca8fbf..e002e0c347 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,31 +1,31 @@
-header {
-  background-color: var(--ds-header-bg);
-}
+:host {
+  header {
+    background-color: var(--ds-header-bg);
+  }
 
-.navbar-brand img {
-  max-height: var(--ds-header-logo-height);
-  max-width: 100%;
-  @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-    max-height: var(--ds-header-logo-height-xs);
+  .navbar-brand img {
+    max-height: var(--ds-header-logo-height);
+    max-width: 100%;
+  }
+
+  .navbar-toggler {
+    border: none;
+    color: var(--ds-header-icon-color);
+
+    &:hover, &:focus {
+      color: var(--ds-header-icon-color-hover);
+    }
+
+    .toggler-icon {
+      width: 1.5em;
+      height: 1.5em;
+      line-height: 1.5;
+    }
+  }
+
+  .navbar {
+    display: flex;
+    gap: calc(var(--bs-spacer) / 3);
+    align-items: center;
   }
 }
-
-.navbar-toggler .navbar-toggler-icon {
-  background-image: none !important;
-  line-height: 1.5;
-}
-
-.navbar-toggler {
-  border: none;
-  color: var(--ds-header-icon-color);
-
-  &:hover, &:focus {
-    color: var(--ds-header-icon-color-hover);
-  }
-}
-
-.navbar {
-  display: flex;
-  gap: calc(var(--bs-spacer) / 3);
-  align-items: center;
-}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index c8b39e1a45..4ff01b8d86 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,10 +1,7 @@
-import {
-  Component,
-  OnInit,
-} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
-import { HostWindowService } from '../shared/host-window.service';
+import { HostWindowService, WidthCategory } from '../shared/host-window.service';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
 
@@ -22,8 +19,10 @@ export class HeaderComponent implements OnInit {
    * @type {Observable}
    */
   public isAuthenticated: Observable;
-  public isXsOrSm$: Observable;
+  public isMobile$: Observable;
+
   menuID = MenuID.PUBLIC;
+  maxMobileWidth = WidthCategory.SM;
 
   constructor(
     protected menuService: MenuService,
@@ -32,7 +31,7 @@ export class HeaderComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.isXsOrSm$ = this.windowService.isXsOrSm();
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
   }
 
   public toggleNavbar(): void {
diff --git a/src/app/health-page/health-page.component.html b/src/app/health-page/health-page.component.html
index a18c261d0a..d8cba1d46d 100644
--- a/src/app/health-page/health-page.component.html
+++ b/src/app/health-page/health-page.component.html
@@ -1,5 +1,5 @@
 

-  
{{'health-page.heading' | translate}}

+  
{{'health-page.heading' | translate}}

   

     
    
       
  • 
diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html
index caa86ac290..c1d4b8a98c 100644
--- a/src/app/home-page/home-page.component.html
+++ b/src/app/home-page/home-page.component.html
@@ -1,9 +1,19 @@
 
-
    
-  
-    
-  
-  
-  
-  
+
    
+  
    
+    
    
+      
+    
    
+    
    
+      
+        
+      
+      
+      
+      
+    
    
+    
    
 
    
+
diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts
index 188faf8f81..1f382ce2ca 100644
--- a/src/app/home-page/home-page.component.ts
+++ b/src/app/home-page/home-page.component.ts
@@ -1,27 +1,56 @@
-import {
-  Component,
-  OnInit,
-} from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { map, switchMap } from 'rxjs/operators';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { Site } from '../core/shared/site.model';
 
 import { environment } from '../../environments/environment';
-import { Site } from '../core/shared/site.model';
+import { isPlatformServer } from '@angular/common';
+import { ServerResponseService } from '../core/services/server-response.service';
+import { NotifyInfoService } from '../core/coar-notify/notify-info/notify-info.service';
+import { LinkDefinition, LinkHeadService } from '../core/services/link-head.service';
+import { isNotEmpty } from '../shared/empty.util';
+
+import { APP_CONFIG, AppConfig } from 'src/config/app-config.interface';
 
 @Component({
   selector: 'ds-home-page',
   styleUrls: ['./home-page.component.scss'],
   templateUrl: './home-page.component.html',
 })
-export class HomePageComponent implements OnInit {
+export class HomePageComponent implements OnInit, OnDestroy {
 
   site$: Observable;
   recentSubmissionspageSize: number;
+  /**
+   * An array of LinkDefinition objects representing inbox links for the home page.
+   */
+  inboxLinks: LinkDefinition[] = [];
+
   constructor(
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
     private route: ActivatedRoute,
+    private responseService: ServerResponseService,
+    private notifyInfoService: NotifyInfoService,
+    protected linkHeadService: LinkHeadService,
+    @Inject(PLATFORM_ID) private platformId: string
   ) {
     this.recentSubmissionspageSize = environment.homePage.recentSubmissions.pageSize;
+    // Get COAR REST API URLs from REST configuration
+    // only if COAR configuration is enabled
+    this.notifyInfoService.isCoarConfigEnabled().pipe(
+      switchMap((coarLdnEnabled: boolean) => {
+        if (coarLdnEnabled) {
+          return this.notifyInfoService.getCoarLdnLocalInboxUrls();
+        } else {
+          return of([]);
+        }
+      })
+    ).subscribe((coarRestApiUrls: string[]) => {
+      if (coarRestApiUrls.length > 0) {
+        this.initPageLinks(coarRestApiUrls);
+      }
+    });
   }
 
   ngOnInit(): void {
@@ -29,4 +58,38 @@ export class HomePageComponent implements OnInit {
       map((data) => data.site as Site),
     );
   }
+
+  /**
+   * Initializes page links for COAR REST API URLs.
+   * @param coarRestApiUrls An array of COAR REST API URLs.
+   */
+  private initPageLinks(coarRestApiUrls: string[]): void {
+    const rel = this.notifyInfoService.getInboxRelationLink();
+    let links = '';
+    coarRestApiUrls.forEach((coarRestApiUrl: string) => {
+      // Add link to head
+      let tag: LinkDefinition = {
+        href: coarRestApiUrl,
+        rel: rel
+      };
+      this.inboxLinks.push(tag);
+      this.linkHeadService.addTag(tag);
+
+      links = links + (isNotEmpty(links) ? ', ' : '') + `<${coarRestApiUrl}> ; rel="${rel}"`;
+    });
+
+    if (isPlatformServer(this.platformId)) {
+      // Add link to response header
+      this.responseService.setHeader('Link', links);
+    }
+  }
+
+  /**
+   * It removes the inbox links from the head of the html.
+   */
+  ngOnDestroy(): void {
+    this.inboxLinks.forEach((link: LinkDefinition) => {
+      this.linkHeadService.removeTag(`href='${link.href}'`);
+    });
+  }
 }
diff --git a/src/app/home-page/home-page.module.ts b/src/app/home-page/home-page.module.ts
index cb507def89..a21383e5dc 100644
--- a/src/app/home-page/home-page.module.ts
+++ b/src/app/home-page/home-page.module.ts
@@ -6,13 +6,15 @@ import { ResearchEntitiesModule } from '../entity-groups/research-entities/resea
 import { SharedModule } from '../shared/shared.module';
 import { StatisticsModule } from '../statistics/statistics.module';
 import { HomeNewsComponent } from './home-news/home-news.component';
-import { ThemedHomeNewsComponent } from './home-news/themed-home-news.component';
-import { HomePageComponent } from './home-page.component';
 import { HomePageRoutingModule } from './home-page-routing.module';
+import { HomePageComponent } from './home-page.component';
+import { TopLevelCommunityListComponent } from './top-level-community-list/top-level-community-list.component';
+import { ThemedHomeNewsComponent } from './home-news/themed-home-news.component';
 import { RecentItemListComponent } from './recent-item-list/recent-item-list.component';
 import { ThemedHomePageComponent } from './themed-home-page.component';
 import { ThemedTopLevelCommunityListComponent } from './top-level-community-list/themed-top-level-community-list.component';
-import { TopLevelCommunityListComponent } from './top-level-community-list/top-level-community-list.component';
+import { SearchModule } from '../shared/search/search.module';
+import { NotificationsModule } from '../notifications/notifications.module';
 
 const DECLARATIONS = [
   HomePageComponent,
@@ -28,10 +30,12 @@ const DECLARATIONS = [
   imports: [
     CommonModule,
     SharedModule.withEntryComponents(),
+    SearchModule,
     JournalEntitiesModule.withEntryComponents(),
     ResearchEntitiesModule.withEntryComponents(),
     HomePageRoutingModule,
     StatisticsModule.forRoot(),
+    NotificationsModule
   ],
   declarations: [
     ...DECLARATIONS,
diff --git a/src/app/home-page/top-level-community-list/top-level-community-list.component.spec.ts b/src/app/home-page/top-level-community-list/top-level-community-list.component.spec.ts
index 9cc4eb1d44..457100d98e 100644
--- a/src/app/home-page/top-level-community-list/top-level-community-list.component.spec.ts
+++ b/src/app/home-page/top-level-community-list/top-level-community-list.component.spec.ts
@@ -35,7 +35,7 @@ import { createPaginatedList } from '../../shared/testing/utils.test';
 import { ThemeService } from '../../shared/theme-support/theme.service';
 import { TopLevelCommunityListComponent } from './top-level-community-list.component';
 
-describe('TopLevelCommunityList Component', () => {
+describe('TopLevelCommunityListComponent', () => {
   let comp: TopLevelCommunityListComponent;
   let fixture: ComponentFixture;
   let communityDataServiceStub: any;
@@ -176,17 +176,17 @@ describe('TopLevelCommunityList Component', () => {
   });
 
 
-  it('should display a list of top-communities', () => {
-    waitForAsync(() => {
-      const subComList = fixture.debugElement.queryAll(By.css('li'));
+  it('should display a list of top-communities', async () => {
+    await fixture.whenStable();
+    fixture.detectChanges();
+    const subComList = fixture.debugElement.queryAll(By.css('li'));
 
-      expect(subComList.length).toEqual(5);
-      expect(subComList[0].nativeElement.textContent).toContain('TopCommunity 1');
-      expect(subComList[1].nativeElement.textContent).toContain('TopCommunity 2');
-      expect(subComList[2].nativeElement.textContent).toContain('TopCommunity 3');
-      expect(subComList[3].nativeElement.textContent).toContain('TopCommunity 4');
-      expect(subComList[4].nativeElement.textContent).toContain('TopCommunity 5');
-    });
+    expect(subComList.length).toEqual(5);
+    expect(subComList[0].nativeElement.textContent).toContain('TopCommunity 1');
+    expect(subComList[1].nativeElement.textContent).toContain('TopCommunity 2');
+    expect(subComList[2].nativeElement.textContent).toContain('TopCommunity 3');
+    expect(subComList[3].nativeElement.textContent).toContain('TopCommunity 4');
+    expect(subComList[4].nativeElement.textContent).toContain('TopCommunity 5');
   });
 
 });
diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.html b/src/app/info/feedback/feedback-form/feedback-form.component.html
index 25be4ba445..a5de058854 100644
--- a/src/app/info/feedback/feedback-form/feedback-form.component.html
+++ b/src/app/info/feedback/feedback-form/feedback-form.component.html
@@ -1,45 +1,43 @@
 
    
   
    
-    
    
-      
    {{ 'info.feedback.head' | translate }}
    
-      
    {{ 'info.feedback.info' | translate }}
    
-      
    
-        
    
-          
    
-            
-            
-            {{ 'info.feedback.email_help' | translate }}
-          
    
+    
    {{ 'info.feedback.head' | translate }}
    
+    
    {{ 'info.feedback.info' | translate }}
    
+    
+      
    
+        
    
+          
+          
+          {{ 'info.feedback.email_help' | translate }}
         
    
+      
    
 
-        
-          
-          
-        
-        
    
-          
    
-            
-            
-          
    
+      
+        
+        
+      
+      
    
+        
    
+          
+          
         
    
-        
-          
-        
-        
    
-          
    
-            
-            
-            {{ 'info.feedback.page_help' | translate }}
-          
    
+      
    
+      
+        
+      
+      
    
+        
    
+          
+          
+          {{ 'info.feedback.page_help' | translate }}
         
    
-        
    
-          
    
-            
-          
    
+      
    
+      
    
+        
    
+          
         
    
-      
    
+      
    
     
   
    
 
    
diff --git a/src/app/info/info-routing.module.ts b/src/app/info/info-routing.module.ts
index e2e06613c7..720b4a4aee 100644
--- a/src/app/info/info-routing.module.ts
+++ b/src/app/info/info-routing.module.ts
@@ -6,14 +6,12 @@ import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.reso
 import { FeedbackGuard } from '../core/feedback/feedback.guard';
 import { ThemedEndUserAgreementComponent } from './end-user-agreement/themed-end-user-agreement.component';
 import { ThemedFeedbackComponent } from './feedback/themed-feedback.component';
-import {
-  END_USER_AGREEMENT_PATH,
-  FEEDBACK_PATH,
-  PRIVACY_PATH,
-} from './info-routing-paths';
+import { COAR_NOTIFY_SUPPORT } from '../app-routing-paths';
+import { NotifyInfoComponent } from '../core/coar-notify/notify-info/notify-info.component';
+import { NotifyInfoGuard } from '../core/coar-notify/notify-info/notify-info.guard';
+import { END_USER_AGREEMENT_PATH, FEEDBACK_PATH, PRIVACY_PATH } from './info-routing-paths';
 import { ThemedPrivacyComponent } from './privacy/themed-privacy.component';
 
-
 const imports = [
   RouterModule.forChild([
     {
@@ -21,9 +19,18 @@ const imports = [
       component: ThemedFeedbackComponent,
       resolve: { breadcrumb: I18nBreadcrumbResolver },
       data: { title: 'info.feedback.title', breadcrumbKey: 'info.feedback' },
-      canActivate: [FeedbackGuard],
-    },
+      canActivate: [FeedbackGuard]
+    }
   ]),
+  RouterModule.forChild([
+    {
+      path: COAR_NOTIFY_SUPPORT,
+      component: NotifyInfoComponent,
+      resolve: { breadcrumb: I18nBreadcrumbResolver },
+      data: { title: 'info.coar-notify-support.title', breadcrumbKey: 'info.coar-notify' },
+      canActivate: [NotifyInfoGuard]
+    }
+  ])
 ];
 
 if (environment.info.enableEndUserAgreement) {
diff --git a/src/app/info/info.module.ts b/src/app/info/info.module.ts
index 8ddf04af94..0ef4c22612 100644
--- a/src/app/info/info.module.ts
+++ b/src/app/info/info.module.ts
@@ -10,12 +10,12 @@ import { FeedbackComponent } from './feedback/feedback.component';
 import { FeedbackFormComponent } from './feedback/feedback-form/feedback-form.component';
 import { ThemedFeedbackFormComponent } from './feedback/feedback-form/themed-feedback-form.component';
 import { ThemedFeedbackComponent } from './feedback/themed-feedback.component';
+import { NotifyInfoComponent } from '../core/coar-notify/notify-info/notify-info.component';
 import { InfoRoutingModule } from './info-routing.module';
 import { PrivacyComponent } from './privacy/privacy.component';
 import { PrivacyContentComponent } from './privacy/privacy-content/privacy-content.component';
 import { ThemedPrivacyComponent } from './privacy/themed-privacy.component';
 
-
 const DECLARATIONS = [
   EndUserAgreementComponent,
   ThemedEndUserAgreementComponent,
@@ -27,6 +27,7 @@ const DECLARATIONS = [
   FeedbackFormComponent,
   ThemedFeedbackFormComponent,
   ThemedFeedbackComponent,
+  NotifyInfoComponent
 ];
 
 @NgModule({
diff --git a/src/app/info/privacy/privacy-content/privacy-content.component.html b/src/app/info/privacy/privacy-content/privacy-content.component.html
index f29a786e8b..003e6b0d51 100644
--- a/src/app/info/privacy/privacy-content/privacy-content.component.html
+++ b/src/app/info/privacy/privacy-content/privacy-content.component.html
@@ -22,7 +22,7 @@
 
    Information we collect about you and how we collect it
    
 
    We collect several types of information from and about users of our Website, including information:
    
 
      
-  
    • by which you may be personally identified, such as name, e-mail address, telephone number, or any other identifier by which you may be contacted online or offline ("personal information"); and/or
      • 
+  
    • by which you may be personally identified, such as name, email address, telephone number, or any other identifier by which you may be contacted online or offline ("personal information"); and/or
      • 
   
    • about your internet connection, the equipment you use to access our Website and usage details.
      • 
 
    
 
    We collect this information:
    
diff --git a/src/app/item-page/alerts/item-alerts.component.html b/src/app/item-page/alerts/item-alerts.component.html
index cd71d23a91..f6304340f3 100644
--- a/src/app/item-page/alerts/item-alerts.component.html
+++ b/src/app/item-page/alerts/item-alerts.component.html
@@ -6,7 +6,10 @@
         
             
    
                 {{'item.alerts.withdrawn' | translate}}
-                {{"404.link.home-page" | translate}}
+                
    
+                  {{"404.link.home-page" | translate}}
+                  {{ 'item.alerts.reinstate-request' | translate}}
+                
    
             
    
             
     

diff --git a/src/app/item-page/alerts/item-alerts.component.spec.ts b/src/app/item-page/alerts/item-alerts.component.spec.ts
index 2682ee20b0..00ad150c67 100644
--- a/src/app/item-page/alerts/item-alerts.component.spec.ts
+++ b/src/app/item-page/alerts/item-alerts.component.spec.ts
@@ -1,10 +1,14 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { DsoWithdrawnReinstateModalService, REQUEST_REINSTATE } from '../../shared/dso-page/dso-withdrawn-reinstate-service/dso-withdrawn-reinstate-modal.service';
+import { CorrectionTypeDataService } from '../../core/submission/correctiontype-data.service';
+import { TestScheduler } from 'rxjs/testing';
+import { CorrectionType } from '../../core/submission/models/correctiontype.model';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { createPaginatedList } from '../../shared/testing/utils.test';
+import { of } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { Item } from '../../core/shared/item.model';
@@ -14,11 +18,28 @@ describe('ItemAlertsComponent', () => {
   let component: ItemAlertsComponent;
   let fixture: ComponentFixture;
   let item: Item;
+  let authorizationService;
+  let dsoWithdrawnReinstateModalService;
+  let correctionTypeDataService;
+  let testScheduler: TestScheduler;
+
+  const itemMock = Object.assign(new Item(), {
+    uuid: 'item-uuid',
+    id: 'item-uuid',
+  });
 
   beforeEach(waitForAsync(() => {
+    authorizationService = jasmine.createSpyObj('authorizationService', ['isAuthorized']);
+    dsoWithdrawnReinstateModalService = jasmine.createSpyObj('dsoWithdrawnReinstateModalService', ['openCreateWithdrawnReinstateModal']);
+    correctionTypeDataService = jasmine.createSpyObj('correctionTypeDataService',  ['findByItem']);
     TestBed.configureTestingModule({
       declarations: [ItemAlertsComponent],
       imports: [TranslateModule.forRoot()],
+      providers: [
+        { provide: AuthorizationDataService, useValue: authorizationService },
+        { provide: DsoWithdrawnReinstateModalService, useValue: dsoWithdrawnReinstateModalService },
+        { provide: CorrectionTypeDataService, useValue: correctionTypeDataService }
+      ],
       schemas: [NO_ERRORS_SCHEMA],
     })
       .compileComponents();
@@ -26,7 +47,9 @@ describe('ItemAlertsComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ItemAlertsComponent);
+
     component = fixture.componentInstance;
+    component.item = itemMock;
     fixture.detectChanges();
   });
 
@@ -66,6 +89,7 @@ describe('ItemAlertsComponent', () => {
         isWithdrawn: true,
       });
       component.item = item;
+      (correctionTypeDataService.findByItem).and.returnValue(createSuccessfulRemoteDataObject$([]));
       fixture.detectChanges();
     });
 
@@ -81,6 +105,7 @@ describe('ItemAlertsComponent', () => {
         isWithdrawn: false,
       });
       component.item = item;
+      (correctionTypeDataService.findByItem).and.returnValue(createSuccessfulRemoteDataObject$([]));
       fixture.detectChanges();
     });
 
@@ -89,4 +114,43 @@ describe('ItemAlertsComponent', () => {
       expect(privateWarning).toBeNull();
     });
   });
+
+  describe('when the item is reinstated', () => {
+    const correctionType = Object.assign(new CorrectionType(), {
+      topic: REQUEST_REINSTATE
+    });
+    const correctionRD = createSuccessfulRemoteDataObject(createPaginatedList([correctionType]));
+
+    beforeEach(() => {
+      item =  itemMock;
+      component.item = item;
+      (correctionTypeDataService.findByItem).and.returnValue(of(correctionRD));
+
+       testScheduler = new TestScheduler((actual, expected) => {
+        expect(actual).toEqual(expected);
+      });
+      fixture.detectChanges();
+    });
+
+    it('should return true when user is not an admin and there is at least one correction with topic REQUEST_REINSTATE', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const isAdminMarble = 'a';
+        const correctionMarble = 'b';
+        const expectedMarble = 'c';
+
+        const isAdminValues = { a: false };
+        const correctionValues = { b: correctionRD };
+        const expectedValues = { c: true };
+
+        const isAdmin$ = cold(isAdminMarble, isAdminValues);
+        const correction$ = cold(correctionMarble, correctionValues);
+
+        (authorizationService.isAuthorized).and.returnValue(isAdmin$);
+        (correctionTypeDataService.findByItem).and.returnValue(correction$);
+
+        expectObservable(component.showReinstateButton$()).toBe(expectedMarble, expectedValues);
+      });
+    });
+
+  });
 });
diff --git a/src/app/item-page/alerts/item-alerts.component.ts b/src/app/item-page/alerts/item-alerts.component.ts
index 73a70ef9d5..dbee9b22a9 100644
--- a/src/app/item-page/alerts/item-alerts.component.ts
+++ b/src/app/item-page/alerts/item-alerts.component.ts
@@ -1,10 +1,13 @@
-import {
-  Component,
-  Input,
-} from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { Item } from '../../core/shared/item.model';
 import { AlertType } from '../../shared/alert/alert-type';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { combineLatest, map, Observable } from 'rxjs';
+import { DsoWithdrawnReinstateModalService, REQUEST_REINSTATE } from '../../shared/dso-page/dso-withdrawn-reinstate-service/dso-withdrawn-reinstate-modal.service';
+import { CorrectionTypeDataService } from '../../core/submission/correctiontype-data.service';
+import { getFirstCompletedRemoteData, getPaginatedListPayload, getRemoteDataPayload } from 'src/app/core/shared/operators';
 
 @Component({
   selector: 'ds-item-alerts',
@@ -25,4 +28,37 @@ export class ItemAlertsComponent {
    * @type {AlertType}
    */
   public AlertTypeEnum = AlertType;
+
+  constructor(
+    private authService: AuthorizationDataService,
+    private dsoWithdrawnReinstateModalService: DsoWithdrawnReinstateModalService,
+    private correctionTypeDataService: CorrectionTypeDataService
+  ) {
+  }
+
+  /**
+   * Determines whether to show the reinstate button.
+   * The button is shown if the user is not an admin and the item has a reinstate request.
+   * @returns An Observable that emits a boolean value indicating whether to show the reinstate button.
+   */
+  showReinstateButton$(): Observable  {
+   const correction$ = this.correctionTypeDataService.findByItem(this.item.uuid, true).pipe(
+      getFirstCompletedRemoteData(),
+      getRemoteDataPayload(),
+      getPaginatedListPayload()
+      );
+    const isAdmin$ = this.authService.isAuthorized(FeatureID.AdministratorOf);
+    return combineLatest([isAdmin$, correction$]).pipe(
+      map(([isAdmin, correction]) => {
+        return !isAdmin && correction.some((correctionType) => correctionType.topic === REQUEST_REINSTATE);
+      }
+    ));
+  }
+
+  /**
+   * Opens the reinstate modal for the item.
+   */
+  openReinstateModal() {
+    this.dsoWithdrawnReinstateModalService.openCreateWithdrawnReinstateModal(this.item, 'request-reinstate', this.item.isArchived);
+  }
 }
diff --git a/src/app/item-page/edit-item-page/edit-item-operators.spec.ts b/src/app/item-page/edit-item-page/edit-item-operators.spec.ts
index 41fbb4a820..777c09813d 100644
--- a/src/app/item-page/edit-item-page/edit-item-operators.spec.ts
+++ b/src/app/item-page/edit-item-page/edit-item-operators.spec.ts
@@ -19,7 +19,7 @@ describe('findSuccessfulAccordingTo', () => {
     mockItem1.isWithdrawn = true;
 
     mockItem2 = new Item();
-    mockItem1.isWithdrawn = false;
+    mockItem2.isWithdrawn = false;
 
     predicate = (rd: RemoteData) => isNotEmpty(rd.payload) ? rd.payload.isWithdrawn : false;
   });
@@ -35,7 +35,7 @@ describe('findSuccessfulAccordingTo', () => {
     const source = hot('abcde', testRD);
     const result = source.pipe(findSuccessfulAccordingTo(predicate));
 
-    result.subscribe((value) => expect(value).toEqual(testRD.d));
+    expect(result).toBeObservable(hot('---(d|)', { d: testRD.d }));
   });
 
 });
diff --git a/src/app/item-page/edit-item-page/edit-item-page.component.html b/src/app/item-page/edit-item-page/edit-item-page.component.html
index 8bfbfe5238..08675bae70 100644
--- a/src/app/item-page/edit-item-page/edit-item-page.component.html
+++ b/src/app/item-page/edit-item-page/edit-item-page.component.html
@@ -10,6 +10,7 @@
                            class="nav-link"
                            [ngClass]="{'active' : page.page === currentPage}"
                            [routerLink]="['./' + page.page]"
+                           [attr.data-test]="page.page"
                            role="tab">
                             {{'item.edit.tabs.' + page.page + '.head' | translate}}
                         
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
index 8a30b6fb89..be89fcd558 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
@@ -208,20 +208,6 @@ describe('ItemBitstreamsComponent', () => {
     });
   });
 
-  describe('when dropBitstream is called', () => {
-    const event = {
-      fromIndex: 0,
-      toIndex: 50,
-      // eslint-disable-next-line no-empty,@typescript-eslint/no-empty-function
-      finish: () => {
-      },
-    };
-
-    beforeEach(() => {
-      comp.dropBitstream(bundle, event);
-    });
-  });
-
   describe('when dropBitstream is called', () => {
     beforeEach((done) => {
       comp.dropBitstream(bundle, {
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
index e8791cbe4b..72c0a06925 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
@@ -1,12 +1,4 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
 
 import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 import { Bundle } from '../../../../core/shared/bundle.model';
@@ -25,7 +17,7 @@ import { getItemPageRoute } from '../../../item-page-routing-paths';
  * Creates an embedded view of the contents. This is to ensure the table structure won't break.
  * (which means it'll be added to the parents html without a wrapping ds-item-edit-bitstream-bundle element)
  */
-export class ItemEditBitstreamBundleComponent implements OnInit {
+export class ItemEditBitstreamBundleComponent implements OnInit, OnDestroy {
 
   /**
    * The view on the bundle information and bitstreams
@@ -76,4 +68,9 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
     this.viewContainerRef.createEmbeddedView(this.bundleView);
     this.itemPageRoute = getItemPageRoute(this.item);
   }
+
+  ngOnDestroy(): void {
+    this.viewContainerRef.clear();
+  }
+
 }
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.ts
index 8d63c2041d..5508bd3eff 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.ts
@@ -1,9 +1,4 @@
-import {
-  Component,
-  OnInit,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 
 @Component({
   selector: 'ds-item-edit-bitstream-drag-handle',
@@ -15,7 +10,7 @@ import {
  * Creates an embedded view of the contents
  * (which means it'll be added to the parents html without a wrapping ds-item-edit-bitstream-drag-handle element)
  */
-export class ItemEditBitstreamDragHandleComponent implements OnInit {
+export class ItemEditBitstreamDragHandleComponent implements OnInit, OnDestroy {
   /**
    * The view on the drag-handle
    */
@@ -28,4 +23,8 @@ export class ItemEditBitstreamDragHandleComponent implements OnInit {
     this.viewContainerRef.createEmbeddedView(this.handleView);
   }
 
+  ngOnDestroy(): void {
+    this.viewContainerRef.clear();
+  }
+
 }
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.ts
index f405a79a56..d95ee6a064 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.ts
@@ -1,12 +1,5 @@
-import {
-  Component,
-  Input,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
+import { Bitstream } from '../../../../core/shared/bitstream.model';
 import cloneDeep from 'lodash/cloneDeep';
 import { Observable } from 'rxjs';
 
@@ -15,12 +8,8 @@ import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 import { FieldChangeType } from '../../../../core/data/object-updates/field-change-type.model';
 import { FieldUpdate } from '../../../../core/data/object-updates/field-update.model';
 import { ObjectUpdatesService } from '../../../../core/data/object-updates/object-updates.service';
-import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
-import {
-  getFirstSucceededRemoteData,
-  getRemoteDataPayload,
-} from '../../../../core/shared/operators';
+import { getFirstSucceededRemoteData, getRemoteDataPayload } from '../../../../core/shared/operators';
 import { ResponsiveTableSizes } from '../../../../shared/responsive-table-sizes/responsive-table-sizes';
 
 @Component({
@@ -33,7 +22,7 @@ import { ResponsiveTableSizes } from '../../../../shared/responsive-table-sizes/
  * Creates an embedded view of the contents
  * (which means it'll be added to the parents html without a wrapping ds-item-edit-bitstream element)
  */
-export class ItemEditBitstreamComponent implements OnChanges, OnInit {
+export class ItemEditBitstreamComponent implements OnChanges, OnDestroy, OnInit {
 
   /**
    * The view on the bitstream
@@ -84,6 +73,10 @@ export class ItemEditBitstreamComponent implements OnChanges, OnInit {
     this.viewContainerRef.createEmbeddedView(this.bitstreamView);
   }
 
+  ngOnDestroy(): void {
+    this.viewContainerRef.clear();
+  }
+
   /**
    * Update the current bitstream and its format on changes
    * @param changes
diff --git a/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html b/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
index 1d025f6514..57287fdfe2 100644
--- a/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
+++ b/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
@@ -6,7 +6,7 @@
       
{{'item.edit.item-mapper.description' | translate}}

 
       
    
-        
  • 
+        
  • 
           {{'item.edit.item-mapper.tabs.browse' | translate}}
           
             
    
@@ -22,7 +22,7 @@
             
    
               
         
    • 
-        
  • 
+        
  • 
           {{'item.edit.item-mapper.tabs.map' | translate}}
           
             
    
diff --git a/src/app/item-page/edit-item-page/item-status/item-status.component.ts b/src/app/item-page/edit-item-page/item-status/item-status.component.ts
index ed92e2f51a..4c00cb4a48 100644
--- a/src/app/item-page/edit-item-page/item-status/item-status.component.ts
+++ b/src/app/item-page/edit-item-page/item-status/item-status.component.ts
@@ -1,50 +1,23 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import {
-  BehaviorSubject,
-  combineLatest,
-  Observable,
-  of,
-  Subscription,
-} from 'rxjs';
-import {
-  concatMap,
-  distinctUntilChanged,
-  first,
-  map,
-  mergeMap,
-  switchMap,
-  toArray,
-} from 'rxjs/operators';
+import { ItemOperation } from '../item-operation/itemOperation.model';
+import { concatMap, distinctUntilChanged, first, map, mergeMap, switchMap, toArray } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, Observable, of, Subscription } from 'rxjs';
+import { RemoteData } from '../../../core/data/remote-data';
+import { getItemEditRoute, getItemPageRoute } from '../../item-page-routing-paths';
 
 import { ConfigurationDataService } from '../../../core/data/configuration-data.service';
 import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
 import { IdentifierDataService } from '../../../core/data/identifier-data.service';
-import { RemoteData } from '../../../core/data/remote-data';
 import { OrcidAuthService } from '../../../core/orcid/orcid-auth.service';
 import { ConfigurationProperty } from '../../../core/shared/configuration-property.model';
 import { Item } from '../../../core/shared/item.model';
-import {
-  getAllSucceededRemoteDataPayload,
-  getFirstCompletedRemoteData,
-} from '../../../core/shared/operators';
-import {
-  fadeIn,
-  fadeInOut,
-} from '../../../shared/animations/fade';
+import { getAllSucceededRemoteDataPayload, getFirstCompletedRemoteData } from '../../../core/shared/operators';
+import { fadeIn, fadeInOut } from '../../../shared/animations/fade';
 import { hasValue } from '../../../shared/empty.util';
 import { Identifier } from '../../../shared/object-list/identifier-data/identifier.model';
 import { IdentifierData } from '../../../shared/object-list/identifier-data/identifier-data.model';
-import {
-  getItemEditRoute,
-  getItemPageRoute,
-} from '../../item-page-routing-paths';
-import { ItemOperation } from '../item-operation/itemOperation.model';
 
 @Component({
   selector: 'ds-item-status',
@@ -135,7 +108,19 @@ export class ItemStatusComponent implements OnInit {
         // Observable for configuration determining whether the Register DOI feature is enabled
         const registerConfigEnabled$: Observable = this.configurationService.findByPropertyName('identifiers.item-status.register-doi').pipe(
           getFirstCompletedRemoteData(),
-          map((enabledRD: RemoteData) => enabledRD.hasSucceeded && enabledRD.payload.values.length > 0),
+        map((response: RemoteData) => {
+          // Return true if a successful response with a 'true' value was retrieved, otherwise return false
+          if (response.hasSucceeded) {
+            const payload = response.payload;
+            if (payload.values.length > 0 && hasValue(payload.values[0])) {
+              return payload.values[0] === 'true';
+            } else {
+              return false;
+            }
+          } else {
+            return false;
+          }
+        })
         );
 
         /**
@@ -145,7 +130,7 @@ export class ItemStatusComponent implements OnInit {
          * The value is supposed to be a href for the button
          */
         const currentUrl = this.getCurrentUrl(item);
-        const inititalOperations: ItemOperation[] = [
+      const initialOperations: ItemOperation[] = [
           new ItemOperation('authorizations', `${currentUrl}/authorizations`, FeatureID.CanManagePolicies, true),
           new ItemOperation('mappedCollections', `${currentUrl}/mapper`, FeatureID.CanManageMappings, true),
           item.isWithdrawn
@@ -158,7 +143,7 @@ export class ItemStatusComponent implements OnInit {
           new ItemOperation('delete', `${currentUrl}/delete`, FeatureID.CanDelete, true),
         ];
 
-        this.operations$.next(inititalOperations);
+      this.operations$.next(initialOperations);
 
         /**
          *  When the identifier data stream changes, determine whether the register DOI button should be shown or not.
@@ -198,12 +183,12 @@ export class ItemStatusComponent implements OnInit {
           }),
           // Switch map pushes the register DOI operation onto a copy of the base array then returns to the pipe
           switchMap((showDoi: boolean) => {
-            const ops = [...inititalOperations];
+            const ops = [...initialOperations];
             if (showDoi) {
               const op = new ItemOperation('register-doi', `${currentUrl}/register-doi`, FeatureID.CanRegisterDOI, true);
               ops.splice(ops.length - 1, 0, op); // Add item before last
             }
-            return inititalOperations;
+            return ops;
           }),
           concatMap((op: ItemOperation) => {
             if (hasValue(op.featureID)) {
diff --git a/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html b/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html
index 9091beb6c7..4cef0a1592 100644
--- a/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html
+++ b/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html
@@ -1,5 +1,5 @@
 
-    
+    
        {{ linktext || mdValue.value }}
     
 
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.html b/src/app/item-page/field-components/metadata-values/metadata-values.component.html
index 61088edd16..857e82e3fc 100644
--- a/src/app/item-page/field-components/metadata-values/metadata-values.component.html
+++ b/src/app/item-page/field-components/metadata-values/metadata-values.component.html
@@ -3,8 +3,8 @@
       
-      
+      
       
       
     
@@ -23,6 +23,17 @@
     
 
 
+
+
+  
+    
+    {{value}}
+  
+
+
 
 
   {{value}}
@@ -32,7 +43,5 @@
 
   
-    {{value}}
-  
+     [queryParams]="getQueryParams(value)">{{value}}
 
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.ts b/src/app/item-page/field-components/metadata-values/metadata-values.component.ts
index 0a249d2110..0b25939373 100644
--- a/src/app/item-page/field-components/metadata-values/metadata-values.component.ts
+++ b/src/app/item-page/field-components/metadata-values/metadata-values.component.ts
@@ -13,6 +13,8 @@ import {
 import { BrowseDefinition } from '../../../core/shared/browse-definition.model';
 import { MetadataValue } from '../../../core/shared/metadata.models';
 import { VALUE_LIST_BROWSE_DEFINITION } from '../../../core/shared/value-list-browse-definition.resource-type';
+import { ImageField } from '../../simple/field-components/specific-field/item-page-field.component';
+import { environment } from '../../../../environments/environment';
 import { hasValue } from '../../../shared/empty.util';
 
 /**
@@ -65,6 +67,11 @@ export class MetadataValuesComponent implements OnChanges {
 
   @Input() browseDefinition?: BrowseDefinition;
 
+  /**
+   * Optional {@code ImageField} reference that represents an image to be displayed inline.
+   */
+  @Input() img?: ImageField;
+
   ngOnChanges(changes: SimpleChanges): void {
     this.renderMarkdown = !!this.appConfig.markdown.enabled && this.enableMarkdown;
   }
@@ -100,4 +107,14 @@ export class MetadataValuesComponent implements OnChanges {
     }
     return queryParams;
   }
+
+
+  /**
+   * Checks if the given link value is an internal link.
+   * @param linkValue - The link value to check.
+   * @returns True if the link value starts with the base URL defined in the environment configuration, false otherwise.
+   */
+  hasInternalLink(linkValue: string): boolean {
+    return linkValue.startsWith(environment.ui.baseUrl);
+  }
 }
diff --git a/src/app/item-page/full/full-item-page.component.spec.ts b/src/app/item-page/full/full-item-page.component.spec.ts
index 63b0881341..32639eef32 100644
--- a/src/app/item-page/full/full-item-page.component.spec.ts
+++ b/src/app/item-page/full/full-item-page.component.spec.ts
@@ -1,26 +1,11 @@
-import {
-  ChangeDetectionStrategy,
-  NO_ERRORS_SCHEMA,
-  PLATFORM_ID,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  fakeAsync,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA, PLATFORM_ID } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
-import {
-  BehaviorSubject,
-  of as observableOf,
-} from 'rxjs';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { BehaviorSubject, of as observableOf } from 'rxjs';
 
 import { AuthService } from '../../core/auth/auth.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
@@ -29,13 +14,11 @@ import { RemoteData } from '../../core/data/remote-data';
 import { SignpostingDataService } from '../../core/data/signposting-data.service';
 import { MetadataService } from '../../core/metadata/metadata.service';
 import { LinkHeadService } from '../../core/services/link-head.service';
+import { NotifyInfoService } from '../../core/coar-notify/notify-info/notify-info.service';
 import { ServerResponseService } from '../../core/services/server-response.service';
 import { Item } from '../../core/shared/item.model';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
-import {
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../shared/remote-data.utils';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { createPaginatedList } from '../../shared/testing/utils.test';
 import { TruncatePipe } from '../../shared/utils/truncate.pipe';
@@ -80,6 +63,7 @@ describe('FullItemPageComponent', () => {
   let serverResponseService: jasmine.SpyObj;
   let signpostingDataService: jasmine.SpyObj;
   let linkHeadService: jasmine.SpyObj;
+  let notifyInfoService: jasmine.SpyObj;
 
   const mocklink = {
     href: 'http://test.org',
@@ -124,6 +108,12 @@ describe('FullItemPageComponent', () => {
       removeTag: jasmine.createSpy('removeTag'),
     });
 
+    notifyInfoService = jasmine.createSpyObj('NotifyInfoService', {
+      isCoarConfigEnabled: observableOf(true),
+      getCoarLdnLocalInboxUrls: observableOf(['http://test.org']),
+      getInboxRelationLink: observableOf('http://test.org'),
+    });
+
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot({
         loader: {
@@ -141,7 +131,8 @@ describe('FullItemPageComponent', () => {
         { provide: ServerResponseService, useValue: serverResponseService },
         { provide: SignpostingDataService, useValue: signpostingDataService },
         { provide: LinkHeadService, useValue: linkHeadService },
-        { provide: PLATFORM_ID, useValue: 'server' },
+        { provide: NotifyInfoService, useValue: notifyInfoService },
+        { provide: PLATFORM_ID, useValue: 'server' }
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(FullItemPageComponent, {
@@ -197,7 +188,7 @@ describe('FullItemPageComponent', () => {
 
     it('should add the signposting links', () => {
       expect(serverResponseService.setHeader).toHaveBeenCalled();
-      expect(linkHeadService.addTag).toHaveBeenCalledTimes(2);
+      expect(linkHeadService.addTag).toHaveBeenCalledTimes(3);
     });
   });
   describe('when the item is withdrawn and the user is not an admin', () => {
@@ -226,7 +217,7 @@ describe('FullItemPageComponent', () => {
 
     it('should add the signposting links', () => {
       expect(serverResponseService.setHeader).toHaveBeenCalled();
-      expect(linkHeadService.addTag).toHaveBeenCalledTimes(2);
+      expect(linkHeadService.addTag).toHaveBeenCalledTimes(3);
     });
   });
 
@@ -243,7 +234,7 @@ describe('FullItemPageComponent', () => {
 
     it('should add the signposting links', () => {
       expect(serverResponseService.setHeader).toHaveBeenCalled();
-      expect(linkHeadService.addTag).toHaveBeenCalledTimes(2);
+      expect(linkHeadService.addTag).toHaveBeenCalledTimes(3);
     });
   });
 });
diff --git a/src/app/item-page/full/full-item-page.component.ts b/src/app/item-page/full/full-item-page.component.ts
index e81b96a412..37417b377d 100644
--- a/src/app/item-page/full/full-item-page.component.ts
+++ b/src/app/item-page/full/full-item-page.component.ts
@@ -1,25 +1,8 @@
 import { Location } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  OnDestroy,
-  OnInit,
-  PLATFORM_ID,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Data,
-  Router,
-} from '@angular/router';
-import {
-  BehaviorSubject,
-  Observable,
-} from 'rxjs';
-import {
-  filter,
-  map,
-} from 'rxjs/operators';
+import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { ActivatedRoute, Data, Router } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
 
 import { AuthService } from '../../core/auth/auth.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
@@ -32,6 +15,7 @@ import { Item } from '../../core/shared/item.model';
 import { MetadataMap } from '../../core/shared/metadata.models';
 import { fadeInOut } from '../../shared/animations/fade';
 import { hasValue } from '../../shared/empty.util';
+import { NotifyInfoService } from '../../core/coar-notify/notify-info/notify-info.service';
 import { ItemPageComponent } from '../simple/item-page.component';
 
 /**
@@ -69,9 +53,10 @@ export class FullItemPageComponent extends ItemPageComponent implements OnInit,
     protected responseService: ServerResponseService,
     protected signpostingDataService: SignpostingDataService,
     protected linkHeadService: LinkHeadService,
+    protected notifyInfoService: NotifyInfoService,
     @Inject(PLATFORM_ID) protected platformId: string,
   ) {
-    super(route, router, items, authService, authorizationService, responseService, signpostingDataService, linkHeadService, platformId);
+    super(route, router, items, authService, authorizationService, responseService, signpostingDataService, linkHeadService, notifyInfoService, platformId);
   }
 
   /*** AoT inheritance fix, will hopefully be resolved in the near future **/
diff --git a/src/app/item-page/item-page.module.ts b/src/app/item-page/item-page.module.ts
index abac310b57..71f30740bf 100644
--- a/src/app/item-page/item-page.module.ts
+++ b/src/app/item-page/item-page.module.ts
@@ -36,6 +36,9 @@ import { OrcidQueueComponent } from './orcid-page/orcid-queue/orcid-queue.compon
 import { OrcidSyncSettingsComponent } from './orcid-page/orcid-sync-settings/orcid-sync-settings.component';
 import { AbstractIncrementalListComponent } from './simple/abstract-incremental-list/abstract-incremental-list.component';
 import { FileSectionComponent } from './simple/field-components/file-section/file-section.component';
+import { QaEventNotificationComponent } from './simple/qa-event-notification/qa-event-notification.component';
+import { NotifyRequestsStatusComponent } from './simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component';
+import { RequestStatusAlertBoxComponent } from './simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component';
 import { ThemedFileSectionComponent } from './simple/field-components/file-section/themed-file-section.component';
 import { ItemPageAbstractFieldComponent } from './simple/field-components/specific-field/abstract/item-page-abstract-field.component';
 import { ItemPageAuthorFieldComponent } from './simple/field-components/specific-field/author/item-page-author-field.component';
@@ -92,6 +95,9 @@ const DECLARATIONS = [
   ItemAlertsComponent,
   ThemedItemAlertsComponent,
   BitstreamRequestACopyPageComponent,
+  QaEventNotificationComponent,
+  NotifyRequestsStatusComponent,
+  RequestStatusAlertBoxComponent
 ];
 
 @NgModule({
diff --git a/src/app/item-page/item-shared.module.ts b/src/app/item-page/item-shared.module.ts
index 0d6ba0cc1d..5180b8232c 100644
--- a/src/app/item-page/item-shared.module.ts
+++ b/src/app/item-page/item-shared.module.ts
@@ -1,24 +1,26 @@
-import { CommonModule } from '@angular/common';
+import { RelatedEntitiesSearchComponent } from './simple/related-entities/related-entities-search/related-entities-search.component';
 import { NgModule } from '@angular/core';
-import { DYNAMIC_FORM_CONTROL_MAP_FN } from '@ng-dynamic-forms/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { dsDynamicFormControlMapFn } from '../shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { SearchModule } from '../shared/search/search.module';
 import { SharedModule } from '../shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { DYNAMIC_FORM_CONTROL_MAP_FN } from '@ng-dynamic-forms/core';
+import { dsDynamicFormControlMapFn } from '../shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
+import { TabbedRelatedEntitiesSearchComponent } from './simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component';
+import { ItemVersionsDeleteModalComponent } from './versions/item-versions-delete-modal/item-versions-delete-modal.component';
+import { ItemVersionsSummaryModalComponent } from './versions/item-versions-summary-modal/item-versions-summary-modal.component';
 import { MetadataValuesComponent } from './field-components/metadata-values/metadata-values.component';
 import { GenericItemPageFieldComponent } from './simple/field-components/specific-field/generic/generic-item-page-field.component';
 import { MetadataRepresentationListComponent } from './simple/metadata-representation-list/metadata-representation-list.component';
 import { ThemedMetadataRepresentationListComponent } from './simple/metadata-representation-list/themed-metadata-representation-list.component';
-import { RelatedEntitiesSearchComponent } from './simple/related-entities/related-entities-search/related-entities-search.component';
-import { TabbedRelatedEntitiesSearchComponent } from './simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component';
 import { RelatedItemsComponent } from './simple/related-items/related-items-component';
-import { ItemVersionsDeleteModalComponent } from './versions/item-versions-delete-modal/item-versions-delete-modal.component';
-import { ItemVersionsSummaryModalComponent } from './versions/item-versions-summary-modal/item-versions-summary-modal.component';
+import { ItemWithdrawnReinstateModalComponent } from '../shared/correction-suggestion/withdrawn-reinstate-modal.component';
+import { ItemPageImgFieldComponent } from './simple/field-components/specific-field/img/item-page-img-field.component';
 
 const ENTRY_COMPONENTS = [
   ItemVersionsDeleteModalComponent,
   ItemVersionsSummaryModalComponent,
+  ItemWithdrawnReinstateModalComponent
 
 ];
 
@@ -31,6 +33,7 @@ const COMPONENTS = [
   MetadataRepresentationListComponent,
   ThemedMetadataRepresentationListComponent,
   RelatedItemsComponent,
+  ItemPageImgFieldComponent,
 ];
 
 @NgModule({
@@ -42,6 +45,7 @@ const COMPONENTS = [
     SearchModule,
     SharedModule,
     TranslateModule,
+    NgOptimizedImage,
   ],
   exports: [
     ...COMPONENTS,
diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.html b/src/app/item-page/simple/field-components/file-section/file-section.component.html
index 06f19c880a..e1748e8bcf 100644
--- a/src/app/item-page/simple/field-components/file-section/file-section.component.html
+++ b/src/app/item-page/simple/field-components/file-section/file-section.component.html
@@ -2,7 +2,10 @@
   
     
    
       
-        {{ dsoNameService.getName(file) }}
+        
+          {{ 'item.page.bitstreams.primary' | translate }} 
+          {{ dsoNameService.getName(file) }}
+        
          ({{(file?.sizeBytes) | dsFileSize }})
         
       
diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.spec.ts b/src/app/item-page/simple/field-components/file-section/file-section.component.spec.ts
index c55e8e11f9..1c4b814895 100644
--- a/src/app/item-page/simple/field-components/file-section/file-section.component.spec.ts
+++ b/src/app/item-page/simple/field-components/file-section/file-section.component.spec.ts
@@ -1,15 +1,8 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
 import { APP_CONFIG } from 'src/config/app-config.interface';
 import { environment } from 'src/environments/environment';
@@ -34,6 +27,7 @@ describe('FileSectionComponent', () => {
 
   const bitstreamDataService = jasmine.createSpyObj('bitstreamDataService', {
     findAllByItemAndBundleName: createSuccessfulRemoteDataObject$(createPaginatedList([])),
+    findPrimaryBitstreamByItemAndName: observableOf(null)
   });
 
   const mockBitstream: Bitstream = Object.assign(new Bitstream(),
@@ -89,6 +83,20 @@ describe('FileSectionComponent', () => {
     fixture.detectChanges();
   }));
 
+  it('should set the id of primary bitstream', () => {
+    comp.primaryBitsreamId = undefined;
+    bitstreamDataService.findPrimaryBitstreamByItemAndName.and.returnValue(observableOf(mockBitstream));
+    comp.ngOnInit();
+    expect(comp.primaryBitsreamId).toBe(mockBitstream.id);
+  });
+
+  it('should not set the id of primary bitstream', () => {
+    comp.primaryBitsreamId = undefined;
+    bitstreamDataService.findPrimaryBitstreamByItemAndName.and.returnValue(observableOf(null));
+    comp.ngOnInit();
+    expect(comp.primaryBitsreamId).toBeUndefined();
+  });
+
   describe('when the bitstreams are loading', () => {
     beforeEach(() => {
       comp.bitstreams$.next([mockBitstream]);
diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.ts b/src/app/item-page/simple/field-components/file-section/file-section.component.ts
index b2a733fc18..1c1cd8a6d5 100644
--- a/src/app/item-page/simple/field-components/file-section/file-section.component.ts
+++ b/src/app/item-page/simple/field-components/file-section/file-section.component.ts
@@ -1,15 +1,7 @@
-import {
-  Component,
-  Inject,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject } from 'rxjs';
-import {
-  APP_CONFIG,
-  AppConfig,
-} from 'src/config/app-config.interface';
+import { APP_CONFIG, AppConfig } from 'src/config/app-config.interface';
 
 import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
@@ -47,6 +39,8 @@ export class FileSectionComponent implements OnInit {
 
   pageSize: number;
 
+  primaryBitsreamId: string;
+
   constructor(
     protected bitstreamDataService: BitstreamDataService,
     protected notificationsService: NotificationsService,
@@ -58,9 +52,19 @@ export class FileSectionComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.getPrimaryBitstreamId();
     this.getNextPage();
   }
 
+  private getPrimaryBitstreamId() {
+    this.bitstreamDataService.findPrimaryBitstreamByItemAndName(this.item, 'ORIGINAL', true, true).subscribe((primaryBitstream: Bitstream | null) => {
+      if (!primaryBitstream) {
+        return;
+      }
+      this.primaryBitsreamId = primaryBitstream?.id;
+    });
+  }
+
   /**
    * This method will retrieve the next page of Bitstreams from the external BitstreamDataService call.
    * It'll retrieve the currentPage from the class variables and it'll add the next page of bitstreams with the
diff --git a/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts
new file mode 100644
index 0000000000..b96daa47ad
--- /dev/null
+++ b/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts
@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemPageImgFieldComponent } from './item-page-img-field.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../../../shared/testing/translate-loader.mock';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
+import { BrowseDefinitionDataService } from '../../../../../core/browse/browse-definition-data.service';
+import { BrowseDefinitionDataServiceStub } from '../../../../../shared/testing/browse-definition-data-service.stub';
+import { GenericItemPageFieldComponent } from '../generic/generic-item-page-field.component';
+import { MetadataValuesComponent } from '../../../../field-components/metadata-values/metadata-values.component';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { mockItemWithMetadataFieldsAndValue } from '../item-page-field.component.spec';
+import { By } from '@angular/platform-browser';
+import { ImageField } from '../item-page-field.component';
+
+let component: ItemPageImgFieldComponent;
+let fixture: ComponentFixture;
+
+const mockField = 'organization.identifier.ror';
+const mockValue = 'http://ror.org/awesome-identifier';
+const mockLabel = 'ROR label';
+const mockUrlRegex = '(.*)ror.org';
+const mockImg = {
+  URI: './assets/images/ror-icon.svg',
+  alt: 'item.page.image.alt.ROR',
+  heightVar: '--ds-item-page-img-field-ror-inline-height'
+} as ImageField;
+
+describe('ItemPageImgFieldComponent', () => {
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      providers: [
+        { provide: APP_CONFIG, useValue: environment },
+        { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub }
+      ],
+      declarations: [ItemPageImgFieldComponent, GenericItemPageFieldComponent, MetadataValuesComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .overrideComponent(GenericItemPageFieldComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItemPageImgFieldComponent);
+    component = fixture.componentInstance;
+    component.item = mockItemWithMetadataFieldsAndValue([mockField], mockValue);
+    component.fields = [mockField];
+    component.label = mockLabel;
+    component.urlRegex = mockUrlRegex;
+    component.img = mockImg;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display display img tag', () => {
+    const image = fixture.debugElement.query(By.css('img.link-logo'));
+    expect(image).not.toBeNull();
+  });
+
+  it('should have right attributes', () => {
+    const image = fixture.debugElement.query(By.css('img.link-logo'));
+    expect(image.attributes.src).toEqual(mockImg.URI);
+    expect(image.attributes.alt).toEqual(mockImg.alt);
+
+    const imageEl = image.nativeElement;
+    expect(imageEl.style.height).toContain(mockImg.heightVar);
+  });
+
+  it('should have the right value', () => {
+    const imageAnchor = fixture.debugElement.query(By.css('a.link-anchor'));
+    const anchorEl = imageAnchor.nativeElement;
+    expect(anchorEl.innerHTML).toContain(mockValue);
+  });
+});
diff --git a/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.ts b/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.ts
new file mode 100644
index 0000000000..d442323b53
--- /dev/null
+++ b/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { ImageField, ItemPageFieldComponent } from '../item-page-field.component';
+import { Item } from '../../../../../core/shared/item.model';
+
+@Component({
+  selector: 'ds-item-page-img-field',
+  templateUrl: '../item-page-field.component.html'
+})
+/**
+ * Component that renders an inline image for a given field.
+ * This component uses a given {@code ImageField} configuration to correctly render the img.
+ */
+export class ItemPageImgFieldComponent extends ItemPageFieldComponent {
+
+  /**
+   * The item to display metadata for
+   */
+  @Input() item: Item;
+
+  /**
+   * Separator string between multiple values of the metadata fields defined
+   * @type {string}
+   */
+  @Input() separator: string;
+
+  /**
+   * Fields (schema.element.qualifier) used to render their values.
+   */
+  @Input() fields: string[];
+
+  /**
+   * Label i18n key for the rendered metadata
+   */
+  @Input() label: string;
+
+  /**
+   * Image Configuration
+   */
+  @Input() img: ImageField;
+
+  /**
+   * Whether any valid HTTP(S) URL should be rendered as a link
+   */
+  @Input() urlRegex?: string;
+
+}
diff --git a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.html b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.html
index 91d40b0ad7..f45d4657a4 100644
--- a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.html
+++ b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.html
@@ -6,5 +6,6 @@
     [enableMarkdown]="enableMarkdown"
     [urlRegex]="urlRegex"
     [browseDefinition]="browseDefinition|async"
+    [img]="img"
   >
 
    
diff --git a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.spec.ts
index 9cbbf25f9e..c854b93167 100644
--- a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.spec.ts
+++ b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.spec.ts
@@ -1,27 +1,14 @@
-import {
-  ChangeDetectionStrategy,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ChangeDetectionStrategy, 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 {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 
 import { APP_CONFIG } from '../../../../../config/app-config.interface';
 import { environment } from '../../../../../environments/environment';
 import { BrowseDefinitionDataService } from '../../../../core/browse/browse-definition-data.service';
 import { Item } from '../../../../core/shared/item.model';
-import {
-  MetadataMap,
-  MetadataValue,
-} from '../../../../core/shared/metadata.models';
+import { MetadataMap, MetadataValue } from '../../../../core/shared/metadata.models';
 import { TranslateLoaderMock } from '../../../../shared/mocks/translate-loader.mock';
 import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
 import { SharedModule } from '../../../../shared/shared.module';
@@ -51,8 +38,8 @@ describe('ItemPageFieldComponent', () => {
     },
   });
 
-  const buildTestEnvironment = async () => {
-    await TestBed.configureTestingModule({
+  beforeEach(waitForAsync(() => {
+    void TestBed.configureTestingModule({
       imports: [
         RouterTestingModule.withRoutes([]),
         TranslateModule.forRoot({
@@ -79,19 +66,16 @@ describe('ItemPageFieldComponent', () => {
     comp.fields = mockFields;
     comp.label = mockLabel;
     fixture.detectChanges();
-  };
-
-  it('should display display the correct metadata value', waitForAsync(async () => {
-    await buildTestEnvironment();
-    expect(fixture.nativeElement.innerHTML).toContain(mockValue);
   }));
 
-  describe('when markdown is disabled in the environment config', () => {
+  it('should display display the correct metadata value', () => {
+    expect(fixture.nativeElement.innerHTML).toContain(mockValue);
+  });
 
-    beforeEach(waitForAsync(async () => {
+  describe('when markdown is disabled in the environment config', () => {
+    beforeEach( () => {
       appConfig.markdown.enabled = false;
-      await buildTestEnvironment();
-    }));
+    });
 
     describe('and markdown is disabled in this component', () => {
 
@@ -119,11 +103,9 @@ describe('ItemPageFieldComponent', () => {
   });
 
   describe('when markdown is enabled in the environment config', () => {
-
-    beforeEach(waitForAsync(async () => {
+    beforeEach(() => {
       appConfig.markdown.enabled = true;
-      await buildTestEnvironment();
-    }));
+    });
 
     describe('and markdown is disabled in this component', () => {
 
@@ -153,12 +135,13 @@ describe('ItemPageFieldComponent', () => {
 
   describe('test rendering of configured browse links', () => {
     beforeEach(() => {
+      appConfig.markdown.enabled = false;
+      comp.enableMarkdown = true;
       fixture.detectChanges();
     });
-    waitForAsync(() => {
-      it('should have a browse link', () => {
-        expect(fixture.debugElement.query(By.css('a.ds-browse-link')).nativeElement.innerHTML).toContain(mockValue);
-      });
+
+    it('should have a browse link', async () => {
+      expect(fixture.debugElement.query(By.css('a.ds-browse-link')).nativeElement.innerHTML).toContain(mockValue);
     });
   });
 
@@ -167,10 +150,9 @@ describe('ItemPageFieldComponent', () => {
       comp.urlRegex = '^test';
       fixture.detectChanges();
     });
-    waitForAsync(() => {
-      it('should have a rendered (non-browse) link since the value matches ^test', () => {
-        expect(fixture.debugElement.query(By.css('a.ds-simple-metadata-link')).nativeElement.innerHTML).toContain(mockValue);
-      });
+
+    it('should have a rendered (non-browse) link since the value matches ^test', () => {
+      expect(fixture.debugElement.query(By.css('a.ds-simple-metadata-link')).nativeElement.innerHTML).toContain(mockValue);
     });
   });
 
@@ -179,14 +161,11 @@ describe('ItemPageFieldComponent', () => {
       comp.urlRegex = '^nope';
       fixture.detectChanges();
     });
-    beforeEach(waitForAsync(() => {
-      it('should NOT have a rendered (non-browse) link since the value matches ^test', () => {
-        expect(fixture.debugElement.query(By.css('a.ds-simple-metadata-link'))).toBeNull();
-      });
-    }));
+
+    it('should NOT have a rendered (non-browse) link since the value matches ^test', () => {
+      expect(fixture.debugElement.query(By.css('a.ds-simple-metadata-link'))).toBeNull();
+    });
   });
-
-
 });
 
 export function mockItemWithMetadataFieldsAndValue(fields: string[], value: string): Item {
diff --git a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.ts b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.ts
index a17125ff5f..bfb0e144cc 100644
--- a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.ts
+++ b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.ts
@@ -1,7 +1,4 @@
-import {
-  Component,
-  Input,
-} from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -10,6 +7,25 @@ import { BrowseDefinition } from '../../../../core/shared/browse-definition.mode
 import { Item } from '../../../../core/shared/item.model';
 import { getRemoteDataPayload } from '../../../../core/shared/operators';
 
+/**
+ * Interface that encapsulate Image configuration for this component.
+ */
+export interface ImageField {
+  /**
+   * URI that is used to retrieve the image.
+   */
+  URI: string;
+  /**
+   * i18n Key that represents the alt text to display
+   */
+  alt: string;
+  /**
+   * CSS variable that contains the height of the inline image.
+   */
+  heightVar: string;
+}
+
+
 /**
  * This component can be used to represent metadata on a simple item page.
  * It expects one input parameter of type Item to which the metadata belongs.
@@ -55,6 +71,11 @@ export class ItemPageFieldComponent {
      */
     urlRegex?: string;
 
+    /**
+     * Image Configuration
+     */
+    img: ImageField;
+
     /**
      * Return browse definition that matches any field used in this component if it is configured as a browse
      * link in dspace.cfg (webui.browse.link.)
diff --git a/src/app/item-page/simple/item-page.component.html b/src/app/item-page/simple/item-page.component.html
index cc9983bb35..dc8ed87a86 100644
--- a/src/app/item-page/simple/item-page.component.html
+++ b/src/app/item-page/simple/item-page.component.html
@@ -2,6 +2,8 @@
   
    
     
    
       
+      
+      
       
       
       
diff --git a/src/app/item-page/simple/item-page.component.spec.ts b/src/app/item-page/simple/item-page.component.spec.ts
index 59f0275ec8..4d7090f21e 100644
--- a/src/app/item-page/simple/item-page.component.spec.ts
+++ b/src/app/item-page/simple/item-page.component.spec.ts
@@ -1,23 +1,9 @@
-import {
-  ChangeDetectionStrategy,
-  NO_ERRORS_SCHEMA,
-  PLATFORM_ID,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA, PLATFORM_ID } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
-import {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
 
 import { AuthService } from '../../core/auth/auth.service';
@@ -26,21 +12,14 @@ import { ItemDataService } from '../../core/data/item-data.service';
 import { SignpostingDataService } from '../../core/data/signposting-data.service';
 import { SignpostingLink } from '../../core/data/signposting-links.model';
 import { MetadataService } from '../../core/metadata/metadata.service';
-import {
-  LinkDefinition,
-  LinkHeadService,
-} from '../../core/services/link-head.service';
+import { LinkDefinition, LinkHeadService } from '../../core/services/link-head.service';
 import { ServerResponseService } from '../../core/services/server-response.service';
 import { Item } from '../../core/shared/item.model';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
-import {
-  createFailedRemoteDataObject$,
-  createPendingRemoteDataObject$,
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../shared/remote-data.utils';
+import { createFailedRemoteDataObject$, createPendingRemoteDataObject$, createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { createPaginatedList } from '../../shared/testing/utils.test';
+import { NotifyInfoService } from '../../core/coar-notify/notify-info/notify-info.service';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { ItemPageComponent } from './item-page.component';
 import { createRelationshipsObservable } from './item-types/shared/item.component.spec';
@@ -80,6 +59,7 @@ describe('ItemPageComponent', () => {
   let serverResponseService: jasmine.SpyObj;
   let signpostingDataService: jasmine.SpyObj;
   let linkHeadService: jasmine.SpyObj;
+  let notifyInfoService: jasmine.SpyObj;
 
   const mockMetadataService = {
     /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
@@ -91,6 +71,8 @@ describe('ItemPageComponent', () => {
     data: observableOf({ dso: createSuccessfulRemoteDataObject(mockItem) }),
   });
 
+  const getCoarLdnLocalInboxUrls = ['http://InboxUrls.org', 'http://InboxUrls2.org'];
+
   beforeEach(waitForAsync(() => {
     authService = jasmine.createSpyObj('authService', {
       isAuthenticated: observableOf(true),
@@ -112,6 +94,12 @@ describe('ItemPageComponent', () => {
       removeTag: jasmine.createSpy('removeTag'),
     });
 
+    notifyInfoService = jasmine.createSpyObj('NotifyInfoService', {
+      getInboxRelationLink: 'http://www.w3.org/ns/ldp#inbox',
+      isCoarConfigEnabled: observableOf(true),
+      getCoarLdnLocalInboxUrls: observableOf(getCoarLdnLocalInboxUrls),
+    });
+
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot({
         loader: {
@@ -130,6 +118,7 @@ describe('ItemPageComponent', () => {
         { provide: ServerResponseService, useValue: serverResponseService },
         { provide: SignpostingDataService, useValue: signpostingDataService },
         { provide: LinkHeadService, useValue: linkHeadService },
+        { provide: NotifyInfoService, useValue: notifyInfoService},
         { provide: PLATFORM_ID, useValue: 'server' },
       ],
 
@@ -184,7 +173,7 @@ describe('ItemPageComponent', () => {
 
     it('should add the signposting links', () => {
       expect(serverResponseService.setHeader).toHaveBeenCalled();
-      expect(linkHeadService.addTag).toHaveBeenCalledTimes(2);
+      expect(linkHeadService.addTag).toHaveBeenCalledTimes(4);
     });
 
 
@@ -193,7 +182,7 @@ describe('ItemPageComponent', () => {
       expect(comp.signpostingLinks).toEqual([mocklink, mocklink2]);
 
       // Check if linkHeadService.addTag() was called with the correct arguments
-      expect(linkHeadService.addTag).toHaveBeenCalledTimes(mockSignpostingLinks.length);
+      expect(linkHeadService.addTag).toHaveBeenCalledTimes(mockSignpostingLinks.length + getCoarLdnLocalInboxUrls.length);
       let expected: LinkDefinition = mockSignpostingLinks[0] as LinkDefinition;
       expect(linkHeadService.addTag).toHaveBeenCalledWith(expected);
       expected = {
@@ -204,8 +193,7 @@ describe('ItemPageComponent', () => {
     });
 
     it('should set Link header on the server', () => {
-
-      expect(serverResponseService.setHeader).toHaveBeenCalledWith('Link', ' ; rel="rel1" ; type="type1" ,  ; rel="rel2" ');
+      expect(serverResponseService.setHeader).toHaveBeenCalledWith('Link', ' ; rel="rel1" ; type="type1" ,  ; rel="rel2" ,  ; rel="http://www.w3.org/ns/ldp#inbox",  ; rel="http://www.w3.org/ns/ldp#inbox"');
     });
 
   });
@@ -235,7 +223,7 @@ describe('ItemPageComponent', () => {
 
     it('should add the signposting links', () => {
       expect(serverResponseService.setHeader).toHaveBeenCalled();
-      expect(linkHeadService.addTag).toHaveBeenCalledTimes(2);
+      expect(linkHeadService.addTag).toHaveBeenCalledTimes(4);
     });
   });
 
@@ -252,7 +240,7 @@ describe('ItemPageComponent', () => {
 
     it('should add the signposting links', () => {
       expect(serverResponseService.setHeader).toHaveBeenCalled();
-      expect(linkHeadService.addTag).toHaveBeenCalledTimes(2);
+      expect(linkHeadService.addTag).toHaveBeenCalledTimes(4);
     });
   });
 
diff --git a/src/app/item-page/simple/item-page.component.ts b/src/app/item-page/simple/item-page.component.ts
index d199c28b29..10105aeff5 100644
--- a/src/app/item-page/simple/item-page.component.ts
+++ b/src/app/item-page/simple/item-page.component.ts
@@ -1,21 +1,9 @@
 import { isPlatformServer } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  OnDestroy,
-  OnInit,
-  PLATFORM_ID,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
-import { Observable } from 'rxjs';
-import {
-  map,
-  take,
-} from 'rxjs/operators';
+
+import { combineLatest, Observable } from 'rxjs';
+import { map, switchMap, take } from 'rxjs/operators';
+import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { AuthService } from '../../core/auth/auth.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
@@ -24,10 +12,7 @@ import { ItemDataService } from '../../core/data/item-data.service';
 import { RemoteData } from '../../core/data/remote-data';
 import { SignpostingDataService } from '../../core/data/signposting-data.service';
 import { SignpostingLink } from '../../core/data/signposting-links.model';
-import {
-  LinkDefinition,
-  LinkHeadService,
-} from '../../core/services/link-head.service';
+import { LinkDefinition, LinkHeadService } from '../../core/services/link-head.service';
 import { ServerResponseService } from '../../core/services/server-response.service';
 import { redirectOn4xx } from '../../core/shared/authorized.operators';
 import { Item } from '../../core/shared/item.model';
@@ -35,6 +20,7 @@ import { getAllSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { ViewMode } from '../../core/shared/view-mode.model';
 import { fadeInOut } from '../../shared/animations/fade';
 import { isNotEmpty } from '../../shared/empty.util';
+import { NotifyInfoService } from 'src/app/core/coar-notify/notify-info/notify-info.service';
 import { getItemPageRoute } from '../item-page-routing-paths';
 
 /**
@@ -83,6 +69,13 @@ export class ItemPageComponent implements OnInit, OnDestroy {
    */
   signpostingLinks: SignpostingLink[] = [];
 
+  /**
+   * An array of LinkDefinition objects representing inbox links for the item page.
+   */
+  inboxTags: LinkDefinition[] = [];
+
+  coarRestApiUrls: string[] = [];
+
   constructor(
     protected route: ActivatedRoute,
     protected router: Router,
@@ -92,7 +85,8 @@ export class ItemPageComponent implements OnInit, OnDestroy {
     protected responseService: ServerResponseService,
     protected signpostingDataService: SignpostingDataService,
     protected linkHeadService: LinkHeadService,
-    @Inject(PLATFORM_ID) protected platformId: string,
+    protected notifyInfoService: NotifyInfoService,
+    @Inject(PLATFORM_ID) protected platformId: string
   ) {
     this.initPageLinks();
   }
@@ -121,7 +115,8 @@ export class ItemPageComponent implements OnInit, OnDestroy {
    */
   private initPageLinks(): void {
     this.route.params.subscribe(params => {
-      this.signpostingDataService.getLinks(params.id).pipe(take(1)).subscribe((signpostingLinks: SignpostingLink[]) => {
+      combineLatest([this.signpostingDataService.getLinks(params.id).pipe(take(1)), this.getCoarLdnLocalInboxUrls()])
+      .subscribe(([signpostingLinks, coarRestApiUrls]) => {
         let links = '';
         this.signpostingLinks = signpostingLinks;
 
@@ -139,6 +134,11 @@ export class ItemPageComponent implements OnInit, OnDestroy {
           this.linkHeadService.addTag(tag);
         });
 
+        if (coarRestApiUrls.length > 0) {
+          let inboxLinks = this.initPageInboxLinks(coarRestApiUrls);
+          links = links + (isNotEmpty(links) ? ', ' : '') + inboxLinks;
+        }
+
         if (isPlatformServer(this.platformId)) {
           this.responseService.setHeader('Link', links);
         }
@@ -146,9 +146,49 @@ export class ItemPageComponent implements OnInit, OnDestroy {
     });
   }
 
+  /**
+   * Sets the COAR LDN local inbox URL if COAR configuration is enabled.
+   * If the COAR LDN local inbox URL is retrieved successfully, initializes the page inbox links.
+   */
+  private getCoarLdnLocalInboxUrls(): Observable {
+   return this.notifyInfoService.isCoarConfigEnabled().pipe(
+      switchMap((coarLdnEnabled: boolean) => {
+        if (coarLdnEnabled) {
+          return this.notifyInfoService.getCoarLdnLocalInboxUrls();
+        }
+      })
+    );
+  }
+
+  /**
+   * Initializes the page inbox links.
+   * @param coarRestApiUrls - An array of COAR REST API URLs.
+   */
+  private initPageInboxLinks(coarRestApiUrls: string[]): string {
+    const rel = this.notifyInfoService.getInboxRelationLink();
+    let links = '';
+
+    coarRestApiUrls.forEach((coarRestApiUrl: string) => {
+      // Add link to head
+      let tag: LinkDefinition = {
+        href: coarRestApiUrl,
+        rel: rel
+      };
+      this.inboxTags.push(tag);
+      this.linkHeadService.addTag(tag);
+
+      links = links + (isNotEmpty(links) ? ', ' : '') + `<${coarRestApiUrl}> ; rel="${rel}"`;
+    });
+
+    return links;
+  }
+
   ngOnDestroy(): void {
     this.signpostingLinks.forEach((link: SignpostingLink) => {
       this.linkHeadService.removeTag(`href='${link.href}'`);
     });
+    this.inboxTags.forEach((link: LinkDefinition) => {
+      this.linkHeadService.removeTag(`href='${link.href}'`);
+    });
   }
 }
diff --git a/src/app/item-page/simple/item-types/publication/publication.component.html b/src/app/item-page/simple/item-types/publication/publication.component.html
index 3749f63964..d09b560042 100644
--- a/src/app/item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/item-page/simple/item-types/publication/publication.component.html
@@ -1,4 +1,4 @@
-
+
 
    
   
    
     
     
     
+    
+    
+    
+    
+    
+    
+    
+    
     
    
       
          {{"item.page.link.full" | translate}}
diff --git a/src/app/item-page/simple/item-types/shared/item.component.spec.ts b/src/app/item-page/simple/item-types/shared/item.component.spec.ts
index b3b06f22d0..0ff54b6a9d 100644
--- a/src/app/item-page/simple/item-types/shared/item.component.spec.ts
+++ b/src/app/item-page/simple/item-types/shared/item.component.spec.ts
@@ -482,30 +482,31 @@ describe('ItemComponent', () => {
       fixture.detectChanges();
     }));
 
-    it('should hide back button',() => {
+    it('should hide back button', () => {
       spyOn(mockRouteService, 'getPreviousUrl').and.returnValue(observableOf('/item'));
-      comp.showBackButton.subscribe((val) => {
+      comp.ngOnInit();
+      comp.showBackButton$.subscribe((val) => {
         expect(val).toBeFalse();
       });
     });
     it('should show back button for search', () => {
       spyOn(mockRouteService, 'getPreviousUrl').and.returnValue(observableOf(searchUrl));
       comp.ngOnInit();
-      comp.showBackButton.subscribe((val) => {
+      comp.showBackButton$.subscribe((val) => {
         expect(val).toBeTrue();
       });
     });
     it('should show back button for browse', () => {
       spyOn(mockRouteService, 'getPreviousUrl').and.returnValue(observableOf(browseUrl));
       comp.ngOnInit();
-      comp.showBackButton.subscribe((val) => {
+      comp.showBackButton$.subscribe((val) => {
         expect(val).toBeTrue();
       });
     });
     it('should show back button for recent submissions', () => {
       spyOn(mockRouteService, 'getPreviousUrl').and.returnValue(observableOf(recentSubmissionsUrl));
       comp.ngOnInit();
-      comp.showBackButton.subscribe((val) => {
+      comp.showBackButton$.subscribe((val) => {
         expect(val).toBeTrue();
       });
     });
diff --git a/src/app/item-page/simple/item-types/shared/item.component.ts b/src/app/item-page/simple/item-types/shared/item.component.ts
index c7bfddea15..8900666083 100644
--- a/src/app/item-page/simple/item-types/shared/item.component.ts
+++ b/src/app/item-page/simple/item-types/shared/item.component.ts
@@ -1,25 +1,13 @@
-import {
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
-import {
-  filter,
-  map,
-  take,
-} from 'rxjs/operators';
+import { map, take } from 'rxjs/operators';
 
 import { environment } from '../../../../../environments/environment';
 import { RouteService } from '../../../../core/services/route.service';
 import { Item } from '../../../../core/shared/item.model';
 import { getItemPageRoute } from '../../../item-page-routing-paths';
-import {
-  getDSpaceQuery,
-  isIiifEnabled,
-  isIiifSearchEnabled,
-} from './item-iiif-utils';
+import { getDSpaceQuery, isIiifEnabled, isIiifSearchEnabled } from './item-iiif-utils';
 
 @Component({
   selector: 'ds-item',
@@ -40,7 +28,7 @@ export class ItemComponent implements OnInit {
   /**
    * Used to show or hide the back to results button in the view.
    */
-  showBackButton: Observable;
+  showBackButton$: Observable;
 
   /**
    * Route to the item page
@@ -86,10 +74,9 @@ export class ItemComponent implements OnInit {
 
     this.itemPageRoute = getItemPageRoute(this.object);
     // hide/show the back button
-    this.showBackButton = this.routeService.getPreviousUrl().pipe(
-      filter(url => this.previousRoute.test(url)),
+    this.showBackButton$ = this.routeService.getPreviousUrl().pipe(
+      map((url: string) => this.previousRoute.test(url)),
       take(1),
-      map(() => true),
     );
     // check to see if iiif viewer is required.
     this.iiifEnabled = isIiifEnabled(this.object);
diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
index 904b7e039c..35a00dc7b7 100644
--- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -1,4 +1,4 @@
-
+
 
    
   
    
     
     
     
+    
+    
+    
+    
+    
+    
+    
+    
     
    
       
          {{"item.page.link.full" | translate}}
diff --git a/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.html b/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.html
new file mode 100644
index 0000000000..c68255f2ed
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.html
@@ -0,0 +1,5 @@
+
+  
+    
+  
+
diff --git a/src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss b/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss
rename to src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.scss
diff --git a/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.spec.ts b/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.spec.ts
new file mode 100644
index 0000000000..6146111c2c
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.spec.ts
@@ -0,0 +1,88 @@
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { NotifyRequestsStatusComponent } from './notify-requests-status.component';
+import { NotifyRequestsStatusDataService } from 'src/app/core/data/notify-services-status-data.service';
+import { NotifyRequestsStatus } from '../notify-requests-status.model';
+import { RequestStatusEnum } from '../notify-status.enum';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('NotifyRequestsStatusComponent', () => {
+  let component: NotifyRequestsStatusComponent;
+  let fixture: ComponentFixture;
+  let notifyInfoServiceSpy;
+
+  const mock: NotifyRequestsStatus = Object.assign(new NotifyRequestsStatus(), {
+    notifyStatus: [],
+    itemuuid: 'testUuid'
+  });
+
+  beforeEach(() => {
+    notifyInfoServiceSpy = {
+      getNotifyRequestsStatus:() => createSuccessfulRemoteDataObject$(mock)
+    };
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [NotifyRequestsStatusComponent],
+      providers: [
+        { provide: NotifyRequestsStatusDataService, useValue: notifyInfoServiceSpy }
+      ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotifyRequestsStatusComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should fetch data from the service on initialization', fakeAsync(() => {
+    const mockData: NotifyRequestsStatus = Object.assign(new NotifyRequestsStatus(), {
+      notifyStatus: [],
+      itemuuid: 'testUuid'
+    });
+    component.itemUuid = mockData.itemuuid;
+    spyOn(notifyInfoServiceSpy, 'getNotifyRequestsStatus').and.callThrough();
+    component.ngOnInit();
+    fixture.detectChanges();
+    tick();
+
+    expect(notifyInfoServiceSpy.getNotifyRequestsStatus).toHaveBeenCalledWith('testUuid');
+    component.requestMap$.subscribe((map) => {
+      expect(map.size).toBe(0);
+    });
+  }));
+
+  it('should group data by status', () => {
+    const mockData: NotifyRequestsStatus = Object.assign(new NotifyRequestsStatus(), {
+      notifyStatus: [
+        {
+          serviceName: 'test1',
+          serviceUrl: 'test',
+          status: RequestStatusEnum.ACCEPTED,
+        },
+        {
+          serviceName: 'test2',
+          serviceUrl: 'test',
+          status: RequestStatusEnum.REJECTED,
+        },
+        {
+          serviceName: 'test3',
+          serviceUrl: 'test',
+          status: RequestStatusEnum.ACCEPTED,
+        },
+      ],
+      itemUuid: 'testUuid'
+    });
+    spyOn(notifyInfoServiceSpy, 'getNotifyRequestsStatus').and.returnValue(createSuccessfulRemoteDataObject$(mockData));
+    fixture.detectChanges();
+    (component as any).groupDataByStatus(mockData);
+    component.requestMap$.subscribe((map) => {
+      expect(map.size).toBe(2);
+      expect(map.get(RequestStatusEnum.ACCEPTED)?.length).toBe(2);
+      expect(map.get(RequestStatusEnum.REJECTED)?.length).toBe(1);
+    });
+  });
+});
diff --git a/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.ts b/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.ts
new file mode 100644
index 0000000000..3bcab5e2a0
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/notify-requests-status-component/notify-requests-status.component.ts
@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { filter, map, Observable } from 'rxjs';
+import { NotifyRequestsStatus, NotifyStatuses } from '../notify-requests-status.model';
+import { NotifyRequestsStatusDataService } from '../../../../core/data/notify-services-status-data.service';
+import { RequestStatusEnum } from '../notify-status.enum';
+import { getFirstCompletedRemoteData, getRemoteDataPayload } from '../../../../core/shared/operators';
+import { hasValue } from '../../../../shared/empty.util';
+
+@Component({
+  selector: 'ds-notify-requests-status',
+  templateUrl: './notify-requests-status.component.html',
+  styleUrls: ['./notify-requests-status.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+/**
+ * Component to show an alert box for each update in th Notify feature (e.g. COAR updates)
+ */
+
+export class NotifyRequestsStatusComponent implements OnInit {
+  /**
+   * The UUID of the item.
+   */
+  @Input() itemUuid: string;
+
+  /**
+   * Observable representing the request map.
+   * The map contains request status enums as keys and arrays of notify statuses as values.
+   */
+  requestMap$: Observable>;
+
+  constructor(private notifyInfoService: NotifyRequestsStatusDataService) { }
+
+  ngOnInit(): void {
+    this.requestMap$ = this.notifyInfoService
+      .getNotifyRequestsStatus(this.itemUuid)
+      .pipe(
+        getFirstCompletedRemoteData(),
+        filter((data) => hasValue(data)),
+        getRemoteDataPayload(),
+        filter((data: NotifyRequestsStatus) => hasValue(data)),
+        map((data: NotifyRequestsStatus) => {
+          return this.groupDataByStatus(data);
+        })
+      );
+  }
+
+  /**
+   * Groups the notify requests status data by status.
+   * @param notifyRequestsStatus The notify requests status data.
+   */
+  private groupDataByStatus(notifyRequestsStatus: NotifyRequestsStatus) {
+    const statusMap: Map = new Map();
+    notifyRequestsStatus.notifyStatus?.forEach(
+      (notifyStatus: NotifyStatuses) => {
+        const status = notifyStatus.status;
+
+        if (!statusMap.has(status)) {
+          statusMap.set(status, []);
+        }
+
+        statusMap.get(status)?.push(notifyStatus);
+      }
+    );
+
+    return statusMap;
+  }
+}
diff --git a/src/app/item-page/simple/notify-requests-status/notify-requests-status.model.ts b/src/app/item-page/simple/notify-requests-status/notify-requests-status.model.ts
new file mode 100644
index 0000000000..95d8b0ba05
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/notify-requests-status.model.ts
@@ -0,0 +1,72 @@
+// eslint-disable-next-line max-classes-per-file
+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 { NOTIFYREQUEST } from './notify-requests-status.resource-type';
+import { HALLink } from '../../../core/shared/hal-link.model';
+import { RequestStatusEnum } from './notify-status.enum';
+
+/**
+ * Represents the status of notify requests for an item.
+ */
+@typedObject
+@inheritSerialization(CacheableObject)
+export class NotifyRequestsStatus implements CacheableObject {
+  static type = NOTIFYREQUEST;
+
+  /**
+   * The object type.
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  /**
+   * The notify statuses.
+   */
+  @autoserialize
+  notifyStatus: NotifyStatuses[];
+
+  /**
+   * The UUID of the item.
+   */
+  @autoserialize
+  itemuuid: string;
+
+  /**
+   * The links associated with the notify requests status.
+   */
+  @deserialize
+  _links: {
+    self: HALLink;
+    [k: string]: HALLink | HALLink[];
+  };
+}
+
+/**
+ * Represents the status of a notification request.
+ */
+export class NotifyStatuses {
+  /**
+   * The name of the service.
+   */
+  serviceName: string;
+
+  /**
+   * The URL of the service.
+   */
+  serviceUrl: string;
+
+  /**
+   * The status of the notification request.
+   */
+  status: RequestStatusEnum;
+  /**
+   * Type of request.
+   */
+  offerType: string;
+}
+
+
diff --git a/src/app/item-page/simple/notify-requests-status/notify-requests-status.resource-type.ts b/src/app/item-page/simple/notify-requests-status/notify-requests-status.resource-type.ts
new file mode 100644
index 0000000000..a450b0462b
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/notify-requests-status.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from '../../../core/shared/resource-type';
+
+/**
+ * The resource type for the root endpoint
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const NOTIFYREQUEST = new ResourceType('notifyrequests');
diff --git a/src/app/item-page/simple/notify-requests-status/notify-status.enum.ts b/src/app/item-page/simple/notify-requests-status/notify-status.enum.ts
new file mode 100644
index 0000000000..e44c614130
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/notify-status.enum.ts
@@ -0,0 +1,5 @@
+export enum RequestStatusEnum {
+  ACCEPTED = 'ACCEPTED',
+  REJECTED = 'REJECTED',
+  REQUESTED = 'REQUESTED',
+}
diff --git a/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.html b/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.html
new file mode 100644
index 0000000000..28022f4837
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.html
@@ -0,0 +1,33 @@
+
+  
    
+    
+    
+      
+        
    
+          
+            
    
+              
+        
    
+          
+        
+  
    
+    
diff --git a/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.scss b/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.scss
new file mode 100644
index 0000000000..f852bb8454
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.scss
@@ -0,0 +1,7 @@
+.source-logo {
+  max-height: var(--ds-header-logo-height);
+}
+
+.sections-gap {
+  gap: 1rem;
+}
diff --git a/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.spec.ts b/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.spec.ts
new file mode 100644
index 0000000000..b379af657f
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.spec.ts
@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
+import { RequestStatusAlertBoxComponent } from './request-status-alert-box.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { RequestStatusEnum } from '../notify-status.enum';
+
+describe('RequestStatusAlertBoxComponent', () => {
+  let component: RequestStatusAlertBoxComponent;
+  let componentAsAny: any;
+  let fixture: ComponentFixture;
+
+  const mockData = [
+    {
+      serviceName: 'test',
+      serviceUrl: 'test',
+      status: RequestStatusEnum.ACCEPTED,
+      offerType: 'test'
+    },
+    {
+      serviceName: 'test1',
+      serviceUrl: 'test',
+      status: RequestStatusEnum.REJECTED,
+      offerType: 'test'
+    },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [RequestStatusAlertBoxComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RequestStatusAlertBoxComponent);
+    component = fixture.componentInstance;
+    component.data = mockData;
+    component.displayOptions = {
+      alertType: 'alert-danger',
+      text: 'request-status-alert-box.rejected',
+    };
+    componentAsAny = component;
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the alert box when data is available', fakeAsync(() => {
+    const alertBoxElement = fixture.nativeElement.querySelector('.alert');
+    expect(alertBoxElement).toBeTruthy();
+  }));
+});
diff --git a/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.ts b/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.ts
new file mode 100644
index 0000000000..355980836a
--- /dev/null
+++ b/src/app/item-page/simple/notify-requests-status/request-status-alert-box/request-status-alert-box.component.ts
@@ -0,0 +1,82 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  type OnInit,
+} from '@angular/core';
+import { NotifyStatuses } from '../notify-requests-status.model';
+import { RequestStatusEnum } from '../notify-status.enum';
+
+@Component({
+  selector: 'ds-request-status-alert-box',
+  templateUrl: './request-status-alert-box.component.html',
+  styleUrls: ['./request-status-alert-box.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+/**
+ * Represents a component that displays the status of a request.
+ */
+export class RequestStatusAlertBoxComponent implements OnInit {
+  /**
+   * The status of the request.
+   */
+  @Input() status: RequestStatusEnum;
+
+  /**
+   * The input data for the request status alert box component.
+   * @type {NotifyStatuses[]}
+   */
+  @Input() data: NotifyStatuses[] = [];
+
+  /**
+   * The display options for the request status alert box.
+   */
+  displayOptions: NotifyRequestDisplayOptions;
+
+  ngOnInit(): void {
+    this.prepareDataToDisplay();
+  }
+
+  /**
+   * Prepares the data to be displayed based on the current status.
+   */
+  private prepareDataToDisplay() {
+    switch (this.status) {
+      case RequestStatusEnum.ACCEPTED:
+        this.displayOptions = {
+          alertType: 'alert-info',
+          text: 'request-status-alert-box.accepted',
+        };
+        break;
+
+      case RequestStatusEnum.REJECTED:
+        this.displayOptions = {
+          alertType: 'alert-danger',
+          text: 'request-status-alert-box.rejected',
+        };
+        break;
+
+      case RequestStatusEnum.REQUESTED:
+        this.displayOptions = {
+          alertType: 'alert-warning',
+          text: 'request-status-alert-box.requested',
+        };
+        break;
+    }
+  }
+}
+
+/**
+ * Represents the display options for a notification request.
+ */
+export interface NotifyRequestDisplayOptions {
+  /**
+   * The type of alert to display.
+   * Possible values are 'alert-danger', 'alert-warning', or 'alert-info'.
+   */
+  alertType: 'alert-danger' | 'alert-warning' | 'alert-info';
+  /**
+   * The text to display in the notification.
+   */
+  text: string;
+}
diff --git a/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html
new file mode 100644
index 0000000000..77370f462d
--- /dev/null
+++ b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html
@@ -0,0 +1,22 @@
+
+  
+    
    
+      
    
+        
+      
    
+      
    
+        
    
+          {{'item.qa-event-notification.check.notification-info' | translate : {num: source.totalEvents } }}
+        
    
+        
+      
    
+    
    
+      
+    
diff --git a/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.scss b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.scss
new file mode 100644
index 0000000000..2a62342b7c
--- /dev/null
+++ b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.scss
@@ -0,0 +1,13 @@
+.source-logo {
+  max-height: var(--ds-header-logo-height);
+}
+
+.source-logo-container {
+  width: var(--ds-qa-logo-width);
+  display: flex;
+  justify-content: center;
+}
+
+.sections-gap {
+  gap: 1rem;
+}
diff --git a/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.spec.ts b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.spec.ts
new file mode 100644
index 0000000000..ce231affee
--- /dev/null
+++ b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.spec.ts
@@ -0,0 +1,73 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { QaEventNotificationComponent } from './qa-event-notification.component';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { createPaginatedList } from '../../../shared/testing/utils.test';
+import { QualityAssuranceSourceObject } from '../../../core/notifications/qa/models/quality-assurance-source.model';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { QualityAssuranceSourceDataService } from '../../../core/notifications/qa/source/quality-assurance-source-data.service';
+import { RequestService } from '../../../core/data/request.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
+import { provideMockStore } from '@ngrx/store/testing';
+import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
+import { HALEndpointServiceStub } from '../../../shared/testing/hal-endpoint-service.stub';
+import { of } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { SplitPipe } from 'src/app/shared/utils/split.pipe';
+
+describe('QaEventNotificationComponent', () => {
+  let component: QaEventNotificationComponent;
+  let fixture: ComponentFixture;
+  let qualityAssuranceSourceDataServiceStub: any;
+
+  const obj = Object.assign(new QualityAssuranceSourceObject(), {
+    id: 'sourceName:target',
+    source: 'sourceName',
+    target: 'target',
+    totalEvents: 1
+  });
+
+  const objPL = createSuccessfulRemoteDataObject$(createPaginatedList([obj]));
+  const item = Object.assign({ uuid: '1234' });
+  beforeEach(async () => {
+
+    qualityAssuranceSourceDataServiceStub = {
+      getSourcesByTarget: () => objPL
+    };
+    await TestBed.configureTestingModule({
+      imports: [CommonModule, TranslateModule.forRoot()],
+      declarations: [QaEventNotificationComponent, SplitPipe],
+      providers: [
+        { provide: QualityAssuranceSourceDataService, useValue: qualityAssuranceSourceDataServiceStub },
+        { provide: RequestService, useValue: {} },
+        { provide: NotificationsService, useValue: {} },
+        { provide: HALEndpointService, useValue: new HALEndpointServiceStub('test') },
+        ObjectCacheService,
+        RemoteDataBuildService,
+        provideMockStore({})
+      ],
+    })
+      .compileComponents();
+    fixture = TestBed.createComponent(QaEventNotificationComponent);
+    component = fixture.componentInstance;
+    component.item = item;
+    component.sources$ = of([obj]);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display sources if present', () => {
+    const alertElements = fixture.debugElement.queryAll(By.css('.alert'));
+    expect(alertElements.length).toBe(1);
+  });
+
+  it('should return the quality assurance route when getQualityAssuranceRoute is called', () => {
+    const route = component.getQualityAssuranceRoute();
+    expect(route).toBe('/notifications/quality-assurance');
+  });
+});
diff --git a/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.ts b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.ts
new file mode 100644
index 0000000000..1557a65a0e
--- /dev/null
+++ b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.ts
@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Item } from '../../../core/shared/item.model';
+import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
+import { Observable } from 'rxjs';
+import { FindListOptions } from '../../../core/data/find-list-options.model';
+import { RequestParam } from '../../../core/cache/models/request-param.model';
+import { QualityAssuranceSourceDataService } from '../../../core/notifications/qa/source/quality-assurance-source-data.service';
+import { QualityAssuranceSourceObject } from '../../../core/notifications/qa/models/quality-assurance-source.model';
+import { catchError, map } from 'rxjs/operators';
+import { RemoteData } from '../../../core/data/remote-data';
+import { getNotificatioQualityAssuranceRoute } from '../../../admin/admin-routing-paths';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+
+@Component({
+  selector: 'ds-qa-event-notification',
+  templateUrl: './qa-event-notification.component.html',
+  styleUrls: ['./qa-event-notification.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [QualityAssuranceSourceDataService]
+})
+/**
+ * Component for displaying quality assurance event notifications for an item.
+ */
+export class QaEventNotificationComponent implements OnChanges {
+  /**
+   * The item to display quality assurance event notifications for.
+   */
+  @Input() item: Item;
+
+  /**
+   * An observable that emits an array of QualityAssuranceSourceObject.
+   */
+  sources$: Observable;
+
+  constructor(
+    private qualityAssuranceSourceDataService: QualityAssuranceSourceDataService,
+  ) {}
+
+  /**
+    * Detect changes to the item input and update the sources$ observable.
+   */
+   ngOnChanges(changes: SimpleChanges): void {
+    if (changes.item && changes.item.currentValue.uuid !== changes.item.previousValue?.uuid) {
+      this.sources$ = this.getQualityAssuranceSources$();
+    }
+   }
+  /**
+   * Returns an Observable of QualityAssuranceSourceObject[] for the current item.
+   * @returns An Observable of QualityAssuranceSourceObject[] for the current item.
+   * Note: sourceId is composed as: id: "sourceName:"
+   */
+  getQualityAssuranceSources$(): Observable {
+    const findListTopicOptions: FindListOptions = {
+      searchParams: [new RequestParam('target', this.item.uuid)]
+    };
+    return this.qualityAssuranceSourceDataService.getSourcesByTarget(findListTopicOptions, false)
+      .pipe(
+        getFirstCompletedRemoteData(),
+        map((data: RemoteData>) => {
+          if (data.hasSucceeded) {
+            return data.payload.page;
+          }
+          return [];
+        }),
+        catchError(() => [])
+      );
+  }
+
+  /**
+   * Returns the quality assurance route.
+   * @returns The quality assurance route.
+   */
+  getQualityAssuranceRoute(): string {
+    return getNotificatioQualityAssuranceRoute();
+  }
+}
diff --git a/src/app/item-page/versions/item-versions.component.spec.ts b/src/app/item-page/versions/item-versions.component.spec.ts
index ed303bf5c4..e714c7c851 100644
--- a/src/app/item-page/versions/item-versions.component.spec.ts
+++ b/src/app/item-page/versions/item-versions.component.spec.ts
@@ -1,26 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
-import {
-  FormsModule,
-  ReactiveFormsModule,
-  UntypedFormBuilder,
-} from '@angular/forms';
-import {
-  BrowserModule,
-  By,
-} from '@angular/platform-browser';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
+import { BrowserModule, By } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import {
-  EMPTY,
-  of as observableOf,
-  of,
-} from 'rxjs';
+import { EMPTY, of as observableOf, of } from 'rxjs';
 
 import { AuthService } from '../../core/auth/auth.service';
 import { ConfigurationDataService } from '../../core/data/configuration-data.service';
@@ -234,20 +219,21 @@ describe('ItemVersionsComponent', () => {
       authorizationServiceSpy.isAuthorized.and.callFake(canDelete);
     }));
     it('should not disable the delete button', () => {
-      const deleteButtons = fixture.debugElement.queryAll(By.css(`.version-row-element-delete`));
-      deleteButtons.forEach((btn) => {
+      const deleteButtons: DebugElement[] = fixture.debugElement.queryAll(By.css('.version-row-element-delete'));
+      expect(deleteButtons.length).not.toBe(0);
+      deleteButtons.forEach((btn: DebugElement) => {
         expect(btn.nativeElement.disabled).toBe(false);
       });
     });
-    it('should disable other buttons', () => {
-      const createButtons = fixture.debugElement.queryAll(By.css(`.version-row-element-create`));
-      createButtons.forEach((btn) => {
-        expect(btn.nativeElement.disabled).toBe(true);
-      });
-      const editButtons = fixture.debugElement.queryAll(By.css(`.version-row-element-create`));
-      editButtons.forEach((btn) => {
-        expect(btn.nativeElement.disabled).toBe(true);
-      });
+
+    it('should hide the create buttons', () => {
+      const createButtons: DebugElement[] = fixture.debugElement.queryAll(By.css('.version-row-element-create'));
+      expect(createButtons.length).toBe(0);
+    });
+
+    it('should hide the edit buttons', () => {
+      const editButtons: DebugElement[] = fixture.debugElement.queryAll(By.css('.version-row-element-edit'));
+      expect(editButtons.length).toBe(0);
     });
   });
 
diff --git a/src/app/menu.resolver.spec.ts b/src/app/menu.resolver.spec.ts
index 658e98e5f5..4cb895a4b4 100644
--- a/src/app/menu.resolver.spec.ts
+++ b/src/app/menu.resolver.spec.ts
@@ -1,8 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import {
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -19,9 +16,11 @@ import { MenuResolver } from './menu.resolver';
 import { MenuService } from './shared/menu/menu.service';
 import { MenuID } from './shared/menu/menu-id.model';
 import { MenuServiceStub } from './shared/testing/menu-service.stub';
-import createSpy = jasmine.createSpy;
 import { createSuccessfulRemoteDataObject$ } from './shared/remote-data.utils';
 import { createPaginatedList } from './shared/testing/utils.test';
+import { ConfigurationDataService } from './core/data/configuration-data.service';
+import { ConfigurationDataServiceStub } from './shared/testing/configuration-data.service.stub';
+import createSpy = jasmine.createSpy;
 
 const BOOLEAN = { t: true, f: false };
 const MENU_STATE = {
@@ -40,6 +39,7 @@ describe('MenuResolver', () => {
   let browseService;
   let authorizationService;
   let scriptService;
+  let configurationDataService;
 
   beforeEach(waitForAsync(() => {
     menuService = new MenuServiceStub();
@@ -56,6 +56,9 @@ describe('MenuResolver', () => {
       scriptWithNameExistsAndCanExecute: observableOf(true),
     });
 
+    configurationDataService = new ConfigurationDataServiceStub();
+    spyOn(configurationDataService, 'findByPropertyName').and.returnValue(observableOf(true));
+
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), NoopAnimationsModule, RouterTestingModule],
       declarations: [AdminSidebarComponent],
@@ -64,6 +67,7 @@ describe('MenuResolver', () => {
         { provide: BrowseService, useValue: browseService },
         { provide: AuthorizationDataService, useValue: authorizationService },
         { provide: ScriptDataService, useValue: scriptService },
+        { provide: ConfigurationDataService, useValue: configurationDataService },
         {
           provide: NgbModal, useValue: {
             open: () => {/*comment*/
diff --git a/src/app/menu.resolver.ts b/src/app/menu.resolver.ts
index 20030daf3f..18df997f7b 100644
--- a/src/app/menu.resolver.ts
+++ b/src/app/menu.resolver.ts
@@ -1,31 +1,18 @@
 import { Injectable } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  Resolve,
-  RouterStateSnapshot,
-} from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import {
-  combineLatest,
-  combineLatest as observableCombineLatest,
-  Observable,
-} from 'rxjs';
-import {
-  filter,
-  find,
-  map,
-  take,
-} from 'rxjs/operators';
+import { combineLatest, combineLatest as observableCombineLatest, Observable } from 'rxjs';
+import { filter, find, map, take } from 'rxjs/operators';
 
 import { BrowseService } from './core/browse/browse.service';
 import { AuthorizationDataService } from './core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from './core/data/feature-authorization/feature-id';
 import { PaginatedList } from './core/data/paginated-list.model';
-import {
-  METADATA_EXPORT_SCRIPT_NAME,
-  METADATA_IMPORT_SCRIPT_NAME,
-  ScriptDataService,
-} from './core/data/processes/script-data.service';
+import { METADATA_EXPORT_SCRIPT_NAME, METADATA_IMPORT_SCRIPT_NAME, ScriptDataService } from './core/data/processes/script-data.service';
+import { ExportBatchSelectorComponent } from './shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component';
+import { PUBLICATION_CLAIMS_PATH } from './admin/admin-notifications/admin-notifications-routing-paths';
+import { ConfigurationDataService } from './core/data/configuration-data.service';
+import { ConfigurationProperty } from './core/shared/configuration-property.model';
 import { RemoteData } from './core/data/remote-data';
 import { BrowseDefinition } from './core/shared/browse-definition.model';
 import { getFirstCompletedRemoteData } from './core/shared/operators';
@@ -35,7 +22,6 @@ import { ThemedCreateItemParentSelectorComponent } from './shared/dso-selector/m
 import { ThemedEditCollectionSelectorComponent } from './shared/dso-selector/modal-wrappers/edit-collection-selector/themed-edit-collection-selector.component';
 import { ThemedEditCommunitySelectorComponent } from './shared/dso-selector/modal-wrappers/edit-community-selector/themed-edit-community-selector.component';
 import { ThemedEditItemSelectorComponent } from './shared/dso-selector/modal-wrappers/edit-item-selector/themed-edit-item-selector.component';
-import { ExportBatchSelectorComponent } from './shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component';
 import { ExportMetadataSelectorComponent } from './shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component';
 import { hasValue } from './shared/empty.util';
 import { MenuService } from './shared/menu/menu.service';
@@ -59,6 +45,7 @@ export class MenuResolver implements Resolve {
     protected authorizationService: AuthorizationDataService,
     protected modalService: NgbModal,
     protected scriptDataService: ScriptDataService,
+    protected configurationDataService: ConfigurationDataService
   ) {
   }
 
@@ -153,6 +140,7 @@ export class MenuResolver implements Resolve {
     this.createExportMenuSections();
     this.createImportMenuSections();
     this.createAccessControlMenuSections();
+    this.createReportMenuSections();
 
     return this.waitForMenu$(MenuID.ADMIN);
   }
@@ -168,7 +156,9 @@ export class MenuResolver implements Resolve {
       this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
       this.authorizationService.isAuthorized(FeatureID.CanSubmit),
       this.authorizationService.isAuthorized(FeatureID.CanEditItem),
-    ]).subscribe(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin, canSubmit, canEditItem]) => {
+      this.authorizationService.isAuthorized(FeatureID.CanSeeQA),
+      this.authorizationService.isAuthorized(FeatureID.CoarNotifyEnabled),
+    ]).subscribe(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin, canSubmit, canEditItem, canSeeQa, isCoarNotifyEnabled]) => {
       const newSubMenuList = [
         {
           id: 'new_community',
@@ -219,6 +209,18 @@ export class MenuResolver implements Resolve {
             text: 'menu.section.new_process',
             link: '/processes/new',
           } as LinkMenuItemModel,
+        },/*  ldn_services */
+        {
+          id: 'ldn_services_new',
+          parentID: 'new',
+          active: false,
+          visible: isSiteAdmin && isCoarNotifyEnabled,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.services_new',
+            link: '/admin/ldn/services/new'
+          } as LinkMenuItemModel,
+          icon: '',
         },
       ];
       const editSubMenuList = [
@@ -347,6 +349,41 @@ export class MenuResolver implements Resolve {
           icon: 'terminal',
           index: 10,
         },
+        /* COAR Notify section */
+        {
+          id: 'coar_notify',
+          active: false,
+          visible: isSiteAdmin && isCoarNotifyEnabled,
+          model: {
+            type: MenuItemType.TEXT,
+            text: 'menu.section.coar_notify'
+          } as TextMenuItemModel,
+          icon: 'inbox',
+          index: 13
+        },
+        {
+          id: 'notify_dashboard',
+          active: false,
+          parentID: 'coar_notify',
+          visible: isSiteAdmin && isCoarNotifyEnabled,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.notify_dashboard',
+            link: '/admin/notify-dashboard'
+          } as LinkMenuItemModel,
+        },
+        /* LDN Services */
+        {
+          id: 'ldn_services',
+          active: false,
+          parentID: 'coar_notify',
+          visible: isSiteAdmin && isCoarNotifyEnabled,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.services',
+            link: '/admin/ldn/services'
+          } as LinkMenuItemModel,
+        },
         {
           id: 'health',
           active: false,
@@ -359,6 +396,41 @@ export class MenuResolver implements Resolve {
           icon: 'heartbeat',
           index: 11,
         },
+        /* Notifications */
+        {
+          id: 'notifications',
+          active: false,
+          visible: canSeeQa || isSiteAdmin,
+          model: {
+            type: MenuItemType.TEXT,
+            text: 'menu.section.notifications'
+          } as TextMenuItemModel,
+          icon: 'bell',
+          index: 4
+        },
+        {
+          id: 'notifications_quality-assurance',
+          parentID: 'notifications',
+          active: false,
+          visible: canSeeQa,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.quality-assurance',
+            link: '/notifications/quality-assurance'
+          } as LinkMenuItemModel,
+        },
+        {
+          id: 'notifications_publication-claim',
+          parentID: 'notifications',
+          active: false,
+          visible: isSiteAdmin,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.notifications_publication-claim',
+            link: '/admin/notifications/' + PUBLICATION_CLAIMS_PATH
+          } as LinkMenuItemModel,
+        },
+        /*  Admin Search */
       ];
       menuList.forEach((menuSection) => this.menuService.addSection(MenuID.ADMIN, Object.assign(menuSection, {
         shouldPersistOnRouteChange: true,
@@ -528,36 +600,9 @@ export class MenuResolver implements Resolve {
    * Create menu sections dependent on whether or not the current user is a site administrator
    */
   createSiteAdministratorMenuSections() {
-    combineLatest([
-      this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
-      this.authorizationService.isAuthorized(FeatureID.CanSeeQA),
-    ])
-      .subscribe(([authorized, canSeeQA]) => {
+    this.authorizationService.isAuthorized(FeatureID.AdministratorOf)
+    .subscribe((authorized) => {
         const menuList = [
-        /* Notifications */
-          {
-            id: 'notifications',
-            active: false,
-            visible: authorized && canSeeQA,
-            model: {
-              type: MenuItemType.TEXT,
-              text: 'menu.section.notifications',
-            } as TextMenuItemModel,
-            icon: 'bell',
-            index: 4,
-          },
-          {
-            id: 'notifications_quality-assurance',
-            parentID: 'notifications',
-            active: false,
-            visible: authorized,
-            model: {
-              type: MenuItemType.LINK,
-              text: 'menu.section.quality-assurance',
-              link: '/admin/notifications/quality-assurance',
-            } as LinkMenuItemModel,
-          },
-          /*  Admin Search */
           {
             id: 'admin_search',
             active: false,
@@ -725,4 +770,60 @@ export class MenuResolver implements Resolve {
       })));
     });
   }
+
+  /**
+   * Create menu sections dependent on whether or not the current user is a site administrator
+   */
+  createReportMenuSections() {
+    observableCombineLatest([
+      this.configurationDataService.findByPropertyName('contentreport.enable').pipe(
+        map((res: RemoteData) => res.hasSucceeded && res.payload && res.payload.values[0] === 'true')
+      ),
+      this.authorizationService.isAuthorized(FeatureID.AdministratorOf)
+    ]).subscribe(([isSiteAdmin]) => {
+      const menuList = [
+        {
+          id: 'reports',
+          active: false,
+          visible: isSiteAdmin,
+          model: {
+            type: MenuItemType.TEXT,
+            text: 'menu.section.reports'
+          } as TextMenuItemModel,
+          icon: 'file-alt',
+          index: 5
+        },
+        /* Collections Report */
+        {
+          id: 'reports_collections',
+          parentID: 'reports',
+          active: false,
+          visible: isSiteAdmin,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.reports.collections',
+            link: '/admin/reports/collections'
+          } as LinkMenuItemModel,
+          icon: 'user-check'
+        },
+        /* Queries Report */
+        {
+          id: 'reports_queries',
+          parentID: 'reports',
+          active: false,
+          visible: isSiteAdmin,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.reports.queries',
+            link: '/admin/reports/queries'
+          } as LinkMenuItemModel,
+          icon: 'user-check'
+        },
+      ];
+
+      menuList.forEach((menuSection) => this.menuService.addSection(MenuID.ADMIN, Object.assign(menuSection, {
+        shouldPersistOnRouteChange: true
+      })));
+    });
+  }
 }
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
index 80ba3b24b9..32f434c903 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
+++ b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
@@ -15,10 +15,10 @@
             [attr.data-test]="'import-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission-external' | translate}}">
       
-      
+      
     
         
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index ff48341b0f..8849fbd809 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -1,47 +1,24 @@
-.expandable-navbar-section {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: center;
-}
+:host {
+  .ds-menu-item-wrapper {
+    position: relative; // align dropdown menu with respect to this element
+  }
 
-.btn.nav-link {
-  text-align: left;
-  border: none;
+  .dropdown-menu {
+    overflow: hidden;
+    @include media-breakpoint-down(sm) {
+      border: 0;
+      background-color: var(--ds-expandable-navbar-bg);
+    }
+    @include media-breakpoint-up(md) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      background-color: var(--ds-navbar-dropdown-bg);
+    }
+  }
 
-  &:active, &:focus {
-    box-shadow: none !important;
+  .toggle-menu-icon {
+    &, &:hover {
+      text-decoration: none;
+    }
   }
 }
-
-.dropdown-menu {
-    background-color: var(--ds-expandable-navbar-bg);
-    overflow: hidden;
-    min-width: 100%;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    ::ng-deep a.nav-link {
-        color: var(--ds-expandable-navbar-link-color) !important;
-        padding-right: var(--bs-spacer);
-        padding-left: var(--bs-spacer);
-        white-space: nowrap;
-
-        &:hover, &:focus {
-          color: var(--ds-expandable-navbar-link-color-hover) !important;
-        }
-    }
-}
-
-/** Mobile menu styling **/
-@media screen and (max-width: map-get($grid-breakpoints, md)) {
-    .dropdown-toggle {
-        &:after {
-            float: right;
-            margin-top: calc(var(--bs-spacer) / 2);
-        }
-    }
-    .dropdown-menu {
-        border: 0;
-
-    }
-}
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
index 7296ae39a1..d3cc357a04 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
@@ -1,9 +1,5 @@
 import { Component } from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of as observableOf } from 'rxjs';
@@ -51,120 +47,138 @@ describe('ExpandableNavbarSectionComponent', () => {
       expect(component).toBeTruthy();
     });
 
-    describe('when the mouse enters the section header', () => {
+    describe('when the mouse enters the section header (while inactive)', () => {
       beforeEach(() => {
+        spyOn(component, 'onMouseEnter').and.callThrough();
+        spyOn(component, 'activateSection').and.callThrough();
         spyOn(menuService, 'activateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property.
+        spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false));
+        component.ngOnInit();
+        fixture.detectChanges();
+
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]'));
         sidebarToggler.triggerEventHandler('mouseenter', {
           preventDefault: () => {/**/
           },
         });
       });
 
-      it('should call activateSection on the menuService', () => {
+      it('should call onMouseEnter', () => {
+        expect(component.onMouseEnter).toHaveBeenCalled();
+      });
+
+      it('should activate the section', () => {
+        expect(component.activateSection).toHaveBeenCalled();
         expect(menuService.activateSection).toHaveBeenCalled();
       });
     });
 
-    describe('when the mouse leaves the section header', () => {
+    describe('when the mouse leaves the section header (while active)', () => {
       beforeEach(() => {
+        spyOn(component, 'onMouseLeave').and.callThrough();
+        spyOn(component, 'deactivateSection').and.callThrough();
         spyOn(menuService, 'deactivateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        // Make sure section is 'active'. Requires calling ngOnInit() to update component 'active' property.
+        spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(true));
+        component.ngOnInit();
+        component.mouseEntered = true;
+        fixture.detectChanges();
+
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]'));
         sidebarToggler.triggerEventHandler('mouseleave', {
           preventDefault: () => {/**/
           },
         });
       });
 
-      it('should call deactivateSection on the menuService', () => {
+      it('should call onMouseLeave', () => {
+        expect(component.onMouseLeave).toHaveBeenCalled();
+      });
+
+      it('should deactivate the section', () => {
+        expect(component.deactivateSection).toHaveBeenCalled();
         expect(menuService.deactivateSection).toHaveBeenCalled();
       });
     });
 
     describe('when Enter key is pressed on section header (while inactive)', () => {
       beforeEach(() => {
-        spyOn(menuService, 'activateSection');
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
         // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property.
         spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false));
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         // dispatch the (keyup.enter) action used in our component HTML
         sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
       });
 
       it('should call activateSection on the menuService', () => {
-        expect(menuService.activateSection).toHaveBeenCalled();
+        expect(component.toggleSection).toHaveBeenCalled();
+        expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
 
     describe('when Enter key is pressed on section header (while active)', () => {
       beforeEach(() => {
-        spyOn(menuService, 'deactivateSection');
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
         // Make sure section is 'active'. Requires calling ngOnInit() to update component 'active' property.
         spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(true));
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         // dispatch the (keyup.enter) action used in our component HTML
         sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
       });
 
-      it('should call deactivateSection on the menuService', () => {
-        expect(menuService.deactivateSection).toHaveBeenCalled();
+      it('should call toggleSection on the menuService', () => {
+        expect(component.toggleSection).toHaveBeenCalled();
+        expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
 
     describe('when spacebar is pressed on section header (while inactive)', () => {
       beforeEach(() => {
-        spyOn(menuService, 'activateSection');
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
         // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property.
         spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false));
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         // dispatch the (keyup.space) action used in our component HTML
         sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
       });
 
-      it('should call activateSection on the menuService', () => {
-        expect(menuService.activateSection).toHaveBeenCalled();
+      it('should call toggleSection on the menuService', () => {
+        expect(component.toggleSection).toHaveBeenCalled();
+        expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
 
     describe('when spacebar is pressed on section header (while active)', () => {
       beforeEach(() => {
-        spyOn(menuService, 'deactivateSection');
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
         // Make sure section is 'active'. Requires calling ngOnInit() to update component 'active' property.
         spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(true));
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         // dispatch the (keyup.space) action used in our component HTML
         sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
       });
 
-      it('should call deactivateSection on the menuService', () => {
-        expect(menuService.deactivateSection).toHaveBeenCalled();
-      });
-    });
-
-    describe('when a click occurs on the section header', () => {
-      beforeEach(() => {
-        spyOn(menuService, 'toggleActiveSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
-        sidebarToggler.triggerEventHandler('click', {
-          preventDefault: () => {/**/
-          },
-        });
-      });
-
-      it('should not call toggleActiveSection on the menuService', () => {
-        expect(menuService.toggleActiveSection).not.toHaveBeenCalled();
+      it('should call toggleSection on the menuService', () => {
+        expect(component.toggleSection).toHaveBeenCalled();
+        expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
   });
@@ -199,7 +213,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when the mouse enters the section header', () => {
       beforeEach(() => {
         spyOn(menuService, 'activateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]'));
         sidebarToggler.triggerEventHandler('mouseenter', {
           preventDefault: () => {/**/
           },
@@ -214,7 +228,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when the mouse leaves the section header', () => {
       beforeEach(() => {
         spyOn(menuService, 'deactivateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]'));
         sidebarToggler.triggerEventHandler('mouseleave', {
           preventDefault: () => {/**/
           },
@@ -229,7 +243,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when a click occurs on the section header link', () => {
       beforeEach(() => {
         spyOn(menuService, 'toggleActiveSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         sidebarToggler.triggerEventHandler('click', {
           preventDefault: () => {/**/
           },
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index c207a983a3..91189f3814 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -1,16 +1,11 @@
-import {
-  Component,
-  Inject,
-  Injector,
-  OnInit,
-} from '@angular/core';
-import { first } from 'rxjs/operators';
-
-import { slide } from '../../shared/animations/slide';
-import { HostWindowService } from '../../shared/host-window.service';
-import { MenuService } from '../../shared/menu/menu.service';
-import { MenuID } from '../../shared/menu/menu-id.model';
+import { Component, HostListener, Inject, Injector, OnInit } from '@angular/core';
 import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
+import { MenuService } from '../../shared/menu/menu.service';
+import { slide } from '../../shared/animations/slide';
+import { first } from 'rxjs/operators';
+import { HostWindowService } from '../../shared/host-window.service';
+import { MenuID } from '../../shared/menu/menu-id.model';
+import { Observable } from 'rxjs';
 
 /**
  * Represents an expandable section in the navbar
@@ -27,12 +22,42 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    */
   menuID = MenuID.PUBLIC;
 
+  /**
+   * True if mouse has entered the menu section toggler
+   */
+  mouseEntered = false;
+
+  /**
+   * True if screen size was small before a resize event
+   */
+  wasMobile = undefined;
+
+  /**
+   * Observable that emits true if the screen is small, false otherwise
+   */
+  isMobile$: Observable;
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isMobile$.pipe(
+      first()
+    ).subscribe((isMobile) => {
+      // When switching between desktop and mobile active sections should be deactivated
+      if (isMobile !== this.wasMobile) {
+        this.wasMobile = isMobile;
+        this.menuService.deactivateSection(this.menuID, this.section.id);
+        this.mouseEntered = false;
+      }
+    });
+  }
+
   constructor(@Inject('sectionDataProvider') menuSection,
               protected menuService: MenuService,
               protected injector: Injector,
               private windowService: HostWindowService,
   ) {
     super(menuSection, menuService, injector);
+    this.isMobile$ = this.windowService.isMobile();
   }
 
   ngOnInit() {
@@ -40,48 +65,42 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
   }
 
   /**
-   * Overrides the super function that activates this section (triggered on hover)
-   * Has an extra check to make sure the section can only be activated on non-mobile devices
-   * @param {Event} event The user event that triggered this function
+   * When the mouse enters the section toggler activate the menu section
+   * @param $event
+   * @param isActive
    */
-  activateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
-      first(),
+  onMouseEnter($event: Event, isActive: boolean) {
+    this.isMobile$.pipe(
+      first()
     ).subscribe((isMobile) => {
-      if (!isMobile) {
-        super.activateSection(event);
+      if (!isMobile && !isActive && !this.mouseEntered) {
+        this.activateSection($event);
       }
+      this.mouseEntered = true;
     });
   }
 
   /**
-   * Overrides the super function that deactivates this section (triggered on hover)
-   * Has an extra check to make sure the section can only be deactivated on non-mobile devices
-   * @param {Event} event The user event that triggered this function
+   * When the mouse leaves the section toggler deactivate the menu section
+   * @param $event
+   * @param isActive
    */
-  deactivateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
-      first(),
+  onMouseLeave($event: Event, isActive: boolean) {
+    this.isMobile$.pipe(
+      first()
     ).subscribe((isMobile) => {
-      if (!isMobile) {
-        super.deactivateSection(event);
+      if (!isMobile && isActive && this.mouseEntered) {
+        this.deactivateSection($event);
       }
+      this.mouseEntered = false;
     });
   }
 
   /**
-   * Overrides the super function that toggles this section (triggered on click)
-   * Has an extra check to make sure the section can only be toggled on mobile devices
-   * @param {Event} event The user event that triggered this function
+   * returns the ID of the DOM element representing the navbar section
+   * @param sectionId
    */
-  toggleSection(event): void {
-    event.preventDefault();
-    this.windowService.isXsOrSm().pipe(
-      first(),
-    ).subscribe((isMobile) => {
-      if (isMobile) {
-        super.toggleSection(event);
-      }
-    });
+  expandableNavbarSectionId(sectionId: string) {
+    return `expandable-navbar-section-${sectionId}-dropdown`;
   }
 }
diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html
index 42754be1e6..1411d3b6a6 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.html
+++ b/src/app/navbar/navbar-section/navbar-section.component.html
@@ -1,3 +1,4 @@
-
    
+
    
   
 
    
diff --git a/src/app/navbar/navbar-section/navbar-section.component.scss b/src/app/navbar/navbar-section/navbar-section.component.scss
index 7af4ada8e6..e69de29bb2 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.scss
+++ b/src/app/navbar/navbar-section/navbar-section.component.scss
@@ -1,5 +0,0 @@
-.navbar-section {
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 479a3a0e1a..97dfdc5a86 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,18 +1,21 @@
-
    
   
    
@@ -33,12 +39,17 @@
               
                 {{'quality-assurance.event.table.trust' | translate}}
                 {{'quality-assurance.event.table.publication' | translate}}
-                
-                  {{'quality-assurance.event.table.details' | translate}}
-                
                 
                   {{'quality-assurance.event.table.project-details' | translate}}
                 
+                
+                  
+                    {{'quality-assurance.event.table.reasons' | translate}}
+                  
+                  
+                    {{'quality-assurance.event.table.person-who-requested' | translate}}
+                  
+                
                 {{'quality-assurance.event.table.actions' | translate}}
               
               
@@ -51,6 +62,18 @@
                          rel="noopener noreferrer"
                          [routerLink]="['/items', eventElement?.target?.id]">{{eventElement.title}}
                     {{eventElement.title}}
+                    
    
+                      {{'quality-assurance.event.table.event.message.serviceUrl' | translate}}
+                      
+                        {{eventElement.event.message.serviceId}}
+                      
+                    
    
+                    
    
+                      {{'quality-assurance.event.table.event.message.link' | translate}}
+                      
+                        {{eventElement.event.message.href}}
+                      
+                    
    
                   
                   
                     
    {{'quality-assurance.event.table.pidtype' | translate}} {{eventElement.event.message.type}}
    
@@ -62,7 +85,8 @@
                     
    
                   
                   
-                    
    {{'quality-assurance.event.table.subjectValue' | translate}}
    {{eventElement.event.message.value}}
    
+                    
    {{'quality-assurance.event.table.subjectValue' | translate}}
+                       
    {{eventElement.event.message.value}}
    
                   
                   
                     
    
@@ -75,6 +99,23 @@
                       {{ (showMore ? 'quality-assurance.event.table.less': 'quality-assurance.event.table.more') | translate }}
                     
                   
+                  
+                    
+                      
    
+                        
+                          {{eventElement.event.message.reason}}
    
+                            
+                      
    
+                    
+                    
+                      
    
+                        
+                          
+                        
+                      
    
+                    
+                  
+
                   
                     
    
                       {{'quality-assurance.event.table.suggestedProject' | translate}}
@@ -115,7 +156,7 @@
                     
    
                   
                   
-                    
    
+                    
    
                       
                     
    
+                    
    
+                      
+                    
    
                   
                 
               
@@ -164,14 +215,6 @@
       
     
    
   
    
-  
    
-    
    
-      
-        
-        {{'quality-assurance.events.back' | translate}}
-      
-    
    
-  
    
 
    
 
 
@@ -225,3 +268,20 @@
     
   
    
 
+
+
+  
    
+    
+  
    
+  
    
+    
    {{'quality-assurance.event.undo.description' | translate}}
    
+    
+    
+  
    
+    
diff --git a/src/app/notifications/qa/events/quality-assurance-events.component.spec.ts b/src/app/notifications/qa/events/quality-assurance-events.component.spec.ts
index b65300ce79..46afa54d08 100644
--- a/src/app/notifications/qa/events/quality-assurance-events.component.spec.ts
+++ b/src/app/notifications/qa/events/quality-assurance-events.component.spec.ts
@@ -1,57 +1,30 @@
 import { CommonModule } from '@angular/common';
-import {
-  Component,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  inject,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import {
-  TranslateModule,
-  TranslateService,
-} from '@ngx-translate/core';
-import {
-  cold,
-  getTestScheduler,
-} from 'jasmine-marbles';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { cold, getTestScheduler } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
-import {
-  SortDirection,
-  SortOptions,
-} from '../../../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { buildPaginatedList } from '../../../core/data/paginated-list.model';
 import { QualityAssuranceEventDataService } from '../../../core/notifications/qa/events/quality-assurance-event-data.service';
 import { QualityAssuranceEventObject } from '../../../core/notifications/qa/models/quality-assurance-event.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PageInfo } from '../../../core/shared/page-info.model';
-import {
-  getMockQualityAssuranceEventRestService,
-  ItemMockPid8,
-  ItemMockPid9,
-  ItemMockPid10,
-  NotificationsMockDspaceObject,
-  qualityAssuranceEventObjectMissingProjectFound,
-  qualityAssuranceEventObjectMissingProjectNotFound,
-} from '../../../shared/mocks/notifications.mock';
+import { getMockQualityAssuranceEventRestService, ItemMockPid10, ItemMockPid8, ItemMockPid9, NotificationsMockDspaceObject, qualityAssuranceEventObjectMissingProjectFound, qualityAssuranceEventObjectMissingProjectNotFound } from '../../../shared/mocks/notifications.mock';
 import { getMockTranslateService } from '../../../shared/mocks/translate.service.mock';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import {
-  createNoContentRemoteDataObject$,
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../../shared/remote-data.utils';
+import { createNoContentRemoteDataObject$, createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
+import { ItemDataService } from 'src/app/core/data/item-data.service';
+import { AuthorizationDataService } from 'src/app/core/data/feature-authorization/authorization-data.service';
 import { createTestComponent } from '../../../shared/testing/utils.test';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
 import { QualityAssuranceEventData } from '../project-entry-import-modal/project-entry-import-modal.component';
@@ -132,7 +105,9 @@ describe('QualityAssuranceEventsComponent test suite', () => {
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },
         { provide: TranslateService, useValue: getMockTranslateService() },
         { provide: PaginationService, useValue: paginationService },
-        QualityAssuranceEventsComponent,
+        { provide: ItemDataService, useValue: {} },
+        { provide: AuthorizationDataService, useValue: {} },
+        QualityAssuranceEventsComponent
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents().then();
diff --git a/src/app/notifications/qa/events/quality-assurance-events.component.ts b/src/app/notifications/qa/events/quality-assurance-events.component.ts
index 5c4a04b56b..91142fb961 100644
--- a/src/app/notifications/qa/events/quality-assurance-events.component.ts
+++ b/src/app/notifications/qa/events/quality-assurance-events.component.ts
@@ -1,56 +1,32 @@
-import {
-  Component,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
-import {
-  BehaviorSubject,
-  combineLatest,
-  from,
-  Observable,
-  of,
-  Subscription,
-} from 'rxjs';
-import {
-  distinctUntilChanged,
-  last,
-  map,
-  mergeMap,
-  scan,
-  switchMap,
-  take,
-  tap,
-} from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, from, Observable, of, Subscription } from 'rxjs';
+import { distinctUntilChanged, last, map, mergeMap, scan, switchMap, take, tap } from 'rxjs/operators';
 
 import { environment } from '../../../../environments/environment';
-import {
-  SortDirection,
-  SortOptions,
-} from '../../../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 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 { QualityAssuranceEventDataService } from '../../../core/notifications/qa/events/quality-assurance-event-data.service';
-import {
-  QualityAssuranceEventObject,
-  SourceQualityAssuranceEventMessageObject,
-} from '../../../core/notifications/qa/models/quality-assurance-event.model';
+import { QualityAssuranceEventObject, SourceQualityAssuranceEventMessageObject } from '../../../core/notifications/qa/models/quality-assurance-event.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { Item } from '../../../core/shared/item.model';
 import { Metadata } from '../../../core/shared/metadata.utils';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
+import { getFirstCompletedRemoteData, getRemoteDataPayload } from '../../../core/shared/operators';
 import { hasValue } from '../../../shared/empty.util';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { ItemSearchResult } from '../../../shared/object-collection/shared/item-search-result.model';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
-import {
-  ProjectEntryImportModalComponent,
-  QualityAssuranceEventData,
-} from '../project-entry-import-modal/project-entry-import-modal.component';
+import { ProjectEntryImportModalComponent, QualityAssuranceEventData } from '../project-entry-import-modal/project-entry-import-modal.component';
+import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
+import { NoContent } from '../../../core/shared/NoContent.model';
+import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
+import { ItemDataService } from '../../../core/data/item-data.service';
 
 /**
  * Component to display the Quality Assurance event list.
@@ -96,6 +72,11 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
    * @type {string}
    */
   public topic: string;
+  /**
+   * The sourceId of the Quality Assurance events.
+   * @type {string}
+   */
+  sourceId: string;
   /**
    * The rejected/ignore reason.
    * @type {string}
@@ -106,6 +87,7 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
    * @type {Observable}
    */
   public isEventPageLoading: BehaviorSubject = new BehaviorSubject(false);
+
   /**
    * The modal reference.
    * @type {any}
@@ -130,6 +112,27 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
    */
   protected subs: Subscription[] = [];
 
+  /**
+   * The target item id, retrieved from the topic-id composition.
+   */
+  public targetId: string;
+
+  /**
+   * The URL of the item page/target.
+   */
+  public itemPageUrl: string;
+
+  /**
+   * Plain topic name (without the source id)
+   */
+  public selectedTopicName: string;
+
+
+  /**
+   * Observable that emits a boolean value indicating whether the user is an admin.
+   */
+  isAdmin$: Observable;
+
   /**
    * Initialize the component variables.
    * @param {ActivatedRoute} activatedRoute
@@ -138,6 +141,8 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
    * @param {QualityAssuranceEventDataService} qualityAssuranceEventRestService
    * @param {PaginationService} paginationService
    * @param {TranslateService} translateService
+   * @param authorizationService
+   * @param itemService
    */
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -146,6 +151,8 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
     private qualityAssuranceEventRestService: QualityAssuranceEventDataService,
     private paginationService: PaginationService,
     private translateService: TranslateService,
+    private authorizationService: AuthorizationDataService,
+    private itemService: ItemDataService,
   ) {
   }
 
@@ -154,10 +161,11 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
    */
   ngOnInit(): void {
     this.isEventPageLoading.next(true);
-
+    this.isAdmin$ = this.authorizationService.isAuthorized(FeatureID.AdministratorOf);
     this.activatedRoute.paramMap.pipe(
       tap((params) => {
         this.sourceUrlForProjectSearch = environment.qualityAssuranceConfig.sourceUrlMapForProjectSearch[params.get('sourceId')];
+        this.sourceId = params.get('sourceId');
       }),
       map((params) => params.get('topicId')),
       take(1),
@@ -165,12 +173,23 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
         const regEx = /!/g;
         this.showTopic = id.replace(regEx, '/');
         this.topic = id;
+        const splitList = this.showTopic?.split(':');
+        this.targetId = splitList.length > 2 ? splitList.pop() : null;
+        this.selectedTopicName = splitList[1];
+        this.sourceId = splitList[0];
         return this.getQualityAssuranceEvents();
-      }),
-    ).subscribe((events: QualityAssuranceEventData[]) => {
-      this.eventsUpdated$.next(events);
-      this.isEventPageLoading.next(false);
-    });
+      })
+    ).subscribe(
+      {
+        next: (events: QualityAssuranceEventData[]) => {
+          this.eventsUpdated$.next(events);
+          this.isEventPageLoading.next(false);
+        },
+        error: (error) => {
+          this.isEventPageLoading.next(false);
+        }
+      }
+    );
   }
 
   /**
@@ -180,6 +199,8 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
     return (this.showTopic.indexOf('/PROJECT') !== -1 ||
       this.showTopic.indexOf('/PID') !== -1 ||
       this.showTopic.indexOf('/SUBJECT') !== -1 ||
+      this.showTopic.indexOf('/WITHDRAWN') !== -1 ||
+      this.showTopic.indexOf('/REINSTATE') !== -1 ||
       this.showTopic.indexOf('/ABSTRACT') !== -1
     );
   }
@@ -264,8 +285,14 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
    */
   public executeAction(action: string, eventData: QualityAssuranceEventData): void {
     eventData.isRunning = true;
+    let operation;
+    if (action === 'UNDO') {
+      operation = this.delete(eventData);
+    } else {
+      operation = this.qualityAssuranceEventRestService.patchEvent(action, eventData.event, eventData.reason);
+    }
     this.subs.push(
-      this.qualityAssuranceEventRestService.patchEvent(action, eventData.event, eventData.reason).pipe(
+      operation.pipe(
         getFirstCompletedRemoteData(),
         switchMap((rd: RemoteData) => {
           if (rd.hasSucceeded) {
@@ -382,7 +409,7 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
       switchMap((rd: RemoteData>) => {
         if (rd.hasSucceeded) {
           this.totalElements$.next(rd.payload.totalElements);
-          if (rd.payload.totalElements > 0) {
+          if (rd.payload?.page?.length > 0) {
             return this.fetchEvents(rd.payload.page);
           } else {
             return of([]);
@@ -451,4 +478,30 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
       last(),
     );
   }
+
+  /**
+   * Deletes a quality assurance event.
+   * @param qaEvent The quality assurance event to delete.
+   * @returns An Observable of RemoteData containing NoContent.
+   */
+  delete(qaEvent: QualityAssuranceEventData): Observable> {
+    return this.qualityAssuranceEventRestService.deleteQAEvent(qaEvent);
+  }
+
+  /**
+   * Returns an Observable that emits the title of the target item.
+   * The target item is retrieved by its ID using the itemService.
+   * The title is extracted from the first metadata value of the item.
+   * The item page URL is also set in the component.
+   * @returns An Observable that emits the title of the target item.
+   */
+  public getTargetItemTitle(): Observable {
+    return this.itemService.findById(this.targetId).pipe(
+      take(1),
+      getFirstCompletedRemoteData(),
+      getRemoteDataPayload(),
+      tap((item: Item) => this.itemPageUrl = getItemPageRoute(item)),
+      map((item: Item) => item.firstMetadataValue('dc.title'))
+    );
+  }
 }
diff --git a/src/app/notifications/qa/source/quality-assurance-source.component.html b/src/app/notifications/qa/source/quality-assurance-source.component.html
index 61789f838b..6318edd9ab 100644
--- a/src/app/notifications/qa/source/quality-assurance-source.component.html
+++ b/src/app/notifications/qa/source/quality-assurance-source.component.html
@@ -34,12 +34,12 @@
                 
                   
                     {{sourceElement.id}}
-                    {{sourceElement.lastEvent}}
+                    {{sourceElement.lastEvent | date: 'dd/MM/yyyy hh:mm' }}
                     
                       
    
                         
diff --git a/src/app/notifications/qa/topics/quality-assurance-topics.component.spec.ts b/src/app/notifications/qa/topics/quality-assurance-topics.component.spec.ts
index 31bd5ac55e..feb6805271 100644
--- a/src/app/notifications/qa/topics/quality-assurance-topics.component.spec.ts
+++ b/src/app/notifications/qa/topics/quality-assurance-topics.component.spec.ts
@@ -1,31 +1,19 @@
 /* eslint-disable no-empty, @typescript-eslint/no-empty-function */
 import { CommonModule } from '@angular/common';
-import {
-  Component,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  inject,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { cold } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 
 import { PaginationService } from '../../../core/pagination/pagination.service';
-import {
-  getMockNotificationsStateService,
-  qualityAssuranceTopicObjectMoreAbstract,
-  qualityAssuranceTopicObjectMorePid,
-} from '../../../shared/mocks/notifications.mock';
+import { getMockNotificationsStateService, qualityAssuranceTopicObjectMoreAbstract, qualityAssuranceTopicObjectMorePid } from '../../../shared/mocks/notifications.mock';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
 import { createTestComponent } from '../../../shared/testing/utils.test';
 import { NotificationsStateService } from '../../notifications-state.service';
+import { ItemDataService } from 'src/app/core/data/item-data.service';
 import { QualityAssuranceTopicsComponent } from './quality-assurance-topics.component';
-import { QualityAssuranceTopicsService } from './quality-assurance-topics.service';
 
 describe('QualityAssuranceTopicsComponent test suite', () => {
   let fixture: ComponentFixture;
@@ -53,14 +41,14 @@ describe('QualityAssuranceTopicsComponent test suite', () => {
       providers: [
         { provide: NotificationsStateService, useValue: mockNotificationsStateService },
         { provide: ActivatedRoute, useValue: { data: observableOf(activatedRouteParams), snapshot: {
-          paramMap: {
-            get: () => 'openaire',
+          params: {
+            sourceId: 'openaire',
+            targetId: null
           },
         } } },
         { provide: PaginationService, useValue: paginationService },
+        { provide: ItemDataService, useValue: {} },
         QualityAssuranceTopicsComponent,
-        // tslint:disable-next-line: no-empty
-        { provide: QualityAssuranceTopicsService, useValue: { setSourceId: (sourceId: string) => { } } },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents().then(() => {
diff --git a/src/app/notifications/qa/topics/quality-assurance-topics.component.ts b/src/app/notifications/qa/topics/quality-assurance-topics.component.ts
index 80f01358ef..858073b019 100644
--- a/src/app/notifications/qa/topics/quality-assurance-topics.component.ts
+++ b/src/app/notifications/qa/topics/quality-assurance-topics.component.ts
@@ -1,25 +1,19 @@
-import {
-  Component,
-  OnInit,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import {
-  Observable,
-  Subscription,
-} from 'rxjs';
-import {
-  distinctUntilChanged,
-  take,
-} from 'rxjs/operators';
-
-import { AdminQualityAssuranceTopicsPageParams } from '../../../admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page-resolver.service';
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { distinctUntilChanged, map, take, tap } from 'rxjs/operators';
 import { SortOptions } from '../../../core/cache/models/sort-options.model';
 import { QualityAssuranceTopicObject } from '../../../core/notifications/qa/models/quality-assurance-topic.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { hasValue } from '../../../shared/empty.util';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { NotificationsStateService } from '../../notifications-state.service';
-import { QualityAssuranceTopicsService } from './quality-assurance-topics.service';
+import { ItemDataService } from '../../../core/data/item-data.service';
+import { getFirstCompletedRemoteData, getRemoteDataPayload } from '../../../core/shared/operators';
+import { Item } from '../../../core/shared/item.model';
+import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
+import { getNotificatioQualityAssuranceRoute } from '../../../admin/admin-routing-paths';
+import { QualityAssuranceTopicsPageParams } from '../../../quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page-resolver.service';
 
 /**
  * Component to display the Quality Assurance topic list.
@@ -29,7 +23,7 @@ import { QualityAssuranceTopicsService } from './quality-assurance-topics.servic
   templateUrl: './quality-assurance-topics.component.html',
   styleUrls: ['./quality-assurance-topics.component.scss'],
 })
-export class QualityAssuranceTopicsComponent implements OnInit {
+export class QualityAssuranceTopicsComponent implements OnInit, OnDestroy, AfterViewInit {
   /**
    * The pagination system configuration for HTML listing.
    * @type {PaginationComponentOptions}
@@ -64,28 +58,49 @@ export class QualityAssuranceTopicsComponent implements OnInit {
    */
   public sourceId: string;
 
+  /**
+   * This property represents a targetId (item-id) which is used to retrive a topic
+   * @type {string}
+   */
+  public targetId: string;
+
+  /**
+   * The URL of the item page.
+   */
+  public itemPageUrl: string;
+
   /**
    * Initialize the component variables.
    * @param {PaginationService} paginationService
    * @param {ActivatedRoute} activatedRoute
+   * @param itemService
    * @param {NotificationsStateService} notificationsStateService
-   * @param {QualityAssuranceTopicsService} qualityAssuranceTopicsService
+   * @param router
    */
   constructor(
     private paginationService: PaginationService,
     private activatedRoute: ActivatedRoute,
+    private itemService: ItemDataService,
     private notificationsStateService: NotificationsStateService,
-    private qualityAssuranceTopicsService: QualityAssuranceTopicsService,
+    private router: Router,
   ) {
+    this.sourceId = this.activatedRoute.snapshot.params.sourceId;
+    this.targetId = this.activatedRoute.snapshot.params.targetId;
   }
 
   /**
    * Component initialization.
    */
   ngOnInit(): void {
-    this.sourceId = this.activatedRoute.snapshot.paramMap.get('sourceId');
-    this.qualityAssuranceTopicsService.setSourceId(this.sourceId);
-    this.topics$ = this.notificationsStateService.getQualityAssuranceTopics();
+    this.topics$ = this.notificationsStateService.getQualityAssuranceTopics().pipe(
+      tap((topics: QualityAssuranceTopicObject[]) => {
+        const forward = this.activatedRoute.snapshot.queryParams?.forward === 'true';
+        if (topics.length === 1 && forward) {
+          // If there is only one topic, navigate to the first topic automatically
+          this.router.navigate([this.getQualityAssuranceRoute(), this.sourceId, topics[0].id]);
+        }
+      })
+    );
     this.totalElements$ = this.notificationsStateService.getQualityAssuranceTopicsTotals();
   }
 
@@ -97,8 +112,8 @@ export class QualityAssuranceTopicsComponent implements OnInit {
       this.notificationsStateService.isQualityAssuranceTopicsLoaded().pipe(
         take(1),
       ).subscribe(() => {
-        this.getQualityAssuranceTopics();
-      }),
+        this.getQualityAssuranceTopics(this.sourceId, this.targetId);
+      })
     );
   }
 
@@ -125,15 +140,17 @@ export class QualityAssuranceTopicsComponent implements OnInit {
   /**
    * Dispatch the Quality Assurance topics retrival.
    */
-  public getQualityAssuranceTopics(): void {
-    this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig).pipe(
+  public getQualityAssuranceTopics(source: string, target?: string): void {
+    this.subs.push(this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig).pipe(
       distinctUntilChanged(),
     ).subscribe((options: PaginationComponentOptions) => {
       this.notificationsStateService.dispatchRetrieveQualityAssuranceTopics(
         options.pageSize,
         options.currentPage,
+        source,
+        target
       );
-    });
+    }));
   }
 
   /**
@@ -141,7 +158,7 @@ export class QualityAssuranceTopicsComponent implements OnInit {
    *
    * @param eventsRouteParams
    */
-  protected updatePaginationFromRouteParams(eventsRouteParams: AdminQualityAssuranceTopicsPageParams) {
+  protected updatePaginationFromRouteParams(eventsRouteParams: QualityAssuranceTopicsPageParams) {
     if (eventsRouteParams.currentPage) {
       this.paginationConfig.currentPage = eventsRouteParams.currentPage;
     }
@@ -154,6 +171,40 @@ export class QualityAssuranceTopicsComponent implements OnInit {
     }
   }
 
+  /**
+   * Returns an Observable that emits the title of the target item.
+   * The target item is retrieved by its ID using the itemService.
+   * The title is extracted from the first metadata value of the item.
+   * The item page URL is also set in the component.
+   * @returns An Observable that emits the title of the target item.
+   */
+  getTargetItemTitle(): Observable {
+    return this.itemService.findById(this.targetId).pipe(
+      take(1),
+      getFirstCompletedRemoteData(),
+      getRemoteDataPayload(),
+      tap((item: Item) => this.itemPageUrl = getItemPageRoute(item)),
+      map((item: Item) => item.firstMetadataValue('dc.title'))
+    );
+  }
+
+  /**
+   * Returns the page route for the given item.
+   * @param item The item to get the page route for.
+   * @returns The page route for the given item.
+   */
+  getItemPageRoute(item: Item): string {
+    return getItemPageRoute(item);
+  }
+
+  /**
+   * Returns the quality assurance route.
+   * @returns The quality assurance route.
+   */
+  getQualityAssuranceRoute(): string {
+    return getNotificatioQualityAssuranceRoute();
+  }
+
   /**
    * Unsubscribe from all subscriptions.
    */
diff --git a/src/app/notifications/qa/topics/quality-assurance-topics.effects.ts b/src/app/notifications/qa/topics/quality-assurance-topics.effects.ts
index 58d5c57460..244feb9686 100644
--- a/src/app/notifications/qa/topics/quality-assurance-topics.effects.ts
+++ b/src/app/notifications/qa/topics/quality-assurance-topics.effects.ts
@@ -43,6 +43,8 @@ export class QualityAssuranceTopicsEffects {
       return this.qualityAssuranceTopicService.getTopics(
         action.payload.elementsPerPage,
         action.payload.currentPage,
+        action.payload.source,
+        action.payload.target
       ).pipe(
         map((topics: PaginatedList) =>
           new AddTopicsAction(topics.page, topics.totalPages, topics.currentPage, topics.totalElements),
diff --git a/src/app/notifications/qa/topics/quality-assurance-topics.reducer.spec.ts b/src/app/notifications/qa/topics/quality-assurance-topics.reducer.spec.ts
index ccea7f4988..8c1798da60 100644
--- a/src/app/notifications/qa/topics/quality-assurance-topics.reducer.spec.ts
+++ b/src/app/notifications/qa/topics/quality-assurance-topics.reducer.spec.ts
@@ -1,16 +1,6 @@
-import {
-  qualityAssuranceTopicObjectMoreAbstract,
-  qualityAssuranceTopicObjectMorePid,
-} from '../../../shared/mocks/notifications.mock';
-import {
-  AddTopicsAction,
-  RetrieveAllTopicsAction,
-  RetrieveAllTopicsErrorAction,
-} from './quality-assurance-topics.actions';
-import {
-  qualityAssuranceTopicsReducer,
-  QualityAssuranceTopicState,
-} from './quality-assurance-topics.reducer';
+import { qualityAssuranceTopicObjectMoreAbstract, qualityAssuranceTopicObjectMorePid } from '../../../shared/mocks/notifications.mock';
+import { AddTopicsAction, RetrieveAllTopicsAction, RetrieveAllTopicsErrorAction } from './quality-assurance-topics.actions';
+import { qualityAssuranceTopicsReducer, QualityAssuranceTopicState } from './quality-assurance-topics.reducer';
 
 describe('qualityAssuranceTopicsReducer test suite', () => {
   let qualityAssuranceTopicInitialState: QualityAssuranceTopicState;
@@ -32,7 +22,7 @@ describe('qualityAssuranceTopicsReducer test suite', () => {
     const expectedState = qualityAssuranceTopicInitialState;
     expectedState.processing = true;
 
-    const action = new RetrieveAllTopicsAction(elementPerPage, currentPage);
+    const action = new RetrieveAllTopicsAction(elementPerPage, currentPage, 'ENRICH!MORE!ABSTRACT');
     const newState = qualityAssuranceTopicsReducer(qualityAssuranceTopicInitialState, action);
 
     expect(newState).toEqual(expectedState);
diff --git a/src/app/notifications/qa/topics/quality-assurance-topics.service.spec.ts b/src/app/notifications/qa/topics/quality-assurance-topics.service.spec.ts
index a4d281d25d..ffe619a787 100644
--- a/src/app/notifications/qa/topics/quality-assurance-topics.service.spec.ts
+++ b/src/app/notifications/qa/topics/quality-assurance-topics.service.spec.ts
@@ -3,19 +3,12 @@ import { cold } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
 
 import { RequestParam } from '../../../core/cache/models/request-param.model';
-import {
-  SortDirection,
-  SortOptions,
-} from '../../../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { buildPaginatedList } from '../../../core/data/paginated-list.model';
 import { QualityAssuranceTopicDataService } from '../../../core/notifications/qa/topics/quality-assurance-topic-data.service';
 import { PageInfo } from '../../../core/shared/page-info.model';
-import {
-  getMockQualityAssuranceTopicRestService,
-  qualityAssuranceTopicObjectMoreAbstract,
-  qualityAssuranceTopicObjectMorePid,
-} from '../../../shared/mocks/notifications.mock';
+import { getMockQualityAssuranceTopicRestService, qualityAssuranceTopicObjectMoreAbstract, qualityAssuranceTopicObjectMorePid } from '../../../shared/mocks/notifications.mock';
 import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
 import { QualityAssuranceTopicsService } from './quality-assurance-topics.service';
 
@@ -44,30 +37,30 @@ describe('QualityAssuranceTopicsService', () => {
   beforeEach(() => {
     restService = TestBed.inject(QualityAssuranceTopicDataService);
     restServiceAsAny = restService;
-    restServiceAsAny.getTopics.and.returnValue(observableOf(paginatedListRD));
+    restServiceAsAny.searchTopicsBySource.and.returnValue(observableOf(paginatedListRD));
+    restServiceAsAny.searchTopicsByTarget.and.returnValue(observableOf(paginatedListRD));
     service = new QualityAssuranceTopicsService(restService);
     serviceAsAny = service;
   });
 
   describe('getTopics', () => {
-    it('Should proxy the call to qualityAssuranceTopicRestService.getTopics', () => {
+    it('should proxy the call to qualityAssuranceTopicRestService.searchTopicsBySource', () => {
       const sortOptions = new SortOptions('name', SortDirection.ASC);
       const findListOptions: FindListOptions = {
         elementsPerPage: elementsPerPage,
         currentPage: currentPage,
         sort: sortOptions,
-        searchParams: [new RequestParam('source', 'ENRICH!MORE!ABSTRACT')],
+        searchParams: [new RequestParam('source', 'openaire')]
       };
-      service.setSourceId('ENRICH!MORE!ABSTRACT');
-      const result = service.getTopics(elementsPerPage, currentPage);
-      expect((service as any).qualityAssuranceTopicRestService.getTopics).toHaveBeenCalledWith(findListOptions);
+      service.getTopics(elementsPerPage, currentPage, 'openaire');
+      expect((service as any).qualityAssuranceTopicRestService.searchTopicsBySource).toHaveBeenCalledWith(findListOptions);
     });
 
-    it('Should return a paginated list of Quality Assurance topics', () => {
+    it('should return a paginated list of Quality Assurance topics', () => {
       const expected = cold('(a|)', {
         a: paginatedList,
       });
-      const result = service.getTopics(elementsPerPage, currentPage);
+      const result = service.getTopics(elementsPerPage, currentPage, 'openaire');
       expect(result).toBeObservable(expected);
     });
   });
diff --git a/src/app/notifications/qa/topics/quality-assurance-topics.service.ts b/src/app/notifications/qa/topics/quality-assurance-topics.service.ts
index dbabbbbfab..fb527ffbdb 100644
--- a/src/app/notifications/qa/topics/quality-assurance-topics.service.ts
+++ b/src/app/notifications/qa/topics/quality-assurance-topics.service.ts
@@ -3,16 +3,14 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { RequestParam } from '../../../core/cache/models/request-param.model';
-import {
-  SortDirection,
-  SortOptions,
-} from '../../../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 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 { QualityAssuranceTopicObject } from '../../../core/notifications/qa/models/quality-assurance-topic.model';
 import { QualityAssuranceTopicDataService } from '../../../core/notifications/qa/topics/quality-assurance-topic-data.service';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
+import { hasValue } from '../../../shared/empty.util';
 
 /**
  * The service handling all Quality Assurance topic requests to the REST service.
@@ -28,10 +26,6 @@ export class QualityAssuranceTopicsService {
     private qualityAssuranceTopicRestService: QualityAssuranceTopicDataService,
   ) { }
 
-  /**
-   * sourceId used to get topics
-   */
-  sourceId: string;
 
   /**
    * Return the list of Quality Assurance topics managing pagination and errors.
@@ -43,17 +37,25 @@ export class QualityAssuranceTopicsService {
    * @return Observable>
    *    The list of Quality Assurance topics.
    */
-  public getTopics(elementsPerPage, currentPage): Observable> {
+  public getTopics(elementsPerPage, currentPage, source: string, target?: string): Observable> {
     const sortOptions = new SortOptions('name', SortDirection.ASC);
-
     const findListOptions: FindListOptions = {
       elementsPerPage: elementsPerPage,
       currentPage: currentPage,
       sort: sortOptions,
-      searchParams: [new RequestParam('source', this.sourceId)],
+      searchParams: [new RequestParam('source', source)]
     };
 
-    return this.qualityAssuranceTopicRestService.getTopics(findListOptions).pipe(
+    let request$: Observable>>;
+
+    if (hasValue(target)) {
+      findListOptions.searchParams.push(new RequestParam('target', target));
+      request$ = this.qualityAssuranceTopicRestService.searchTopicsByTarget(findListOptions);
+    } else {
+      request$ = this.qualityAssuranceTopicRestService.searchTopicsBySource(findListOptions);
+    }
+
+    return request$.pipe(
       getFirstCompletedRemoteData(),
       map((rd: RemoteData>) => {
         if (rd.hasSucceeded) {
@@ -64,12 +66,4 @@ export class QualityAssuranceTopicsService {
       }),
     );
   }
-
-  /**
-   * set sourceId which is used to get topics
-   * @param sourceId string
-   */
-  setSourceId(sourceId: string) {
-    this.sourceId = sourceId;
-  }
 }
diff --git a/src/app/notifications/suggestion-actions/suggestion-actions.component.html b/src/app/notifications/suggestion-actions/suggestion-actions.component.html
new file mode 100644
index 0000000000..2a46191dee
--- /dev/null
+++ b/src/app/notifications/suggestion-actions/suggestion-actions.component.html
@@ -0,0 +1,29 @@
+
    
+  
    
+    
+    
+      
+
+      
+    
+
+  
    
+  
+  
+
    
diff --git a/src/app/notifications/suggestion-actions/suggestion-actions.component.scss b/src/app/notifications/suggestion-actions/suggestion-actions.component.scss
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/app/notifications/suggestion-actions/suggestion-actions.component.scss
@@ -0,0 +1 @@
+
diff --git a/src/app/notifications/suggestion-actions/suggestion-actions.component.ts b/src/app/notifications/suggestion-actions/suggestion-actions.component.ts
new file mode 100644
index 0000000000..5f1443794c
--- /dev/null
+++ b/src/app/notifications/suggestion-actions/suggestion-actions.component.ts
@@ -0,0 +1,96 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ItemType } from '../../core/shared/item-relationships/item-type.model';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { Collection } from '../../core/shared/collection.model';
+import { take } from 'rxjs/operators';
+import { CreateItemParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component';
+import { Suggestion } from '../../core/notifications/models/suggestion.model';
+import { SuggestionApproveAndImport } from '../suggestion-list-element/suggestion-list-element.component';
+
+/**
+ * Show and trigger the actions to submit for a suggestion
+ */
+@Component({
+  selector: 'ds-suggestion-actions',
+  styleUrls: [ './suggestion-actions.component.scss' ],
+  templateUrl: './suggestion-actions.component.html'
+})
+export class SuggestionActionsComponent {
+
+  @Input() object: Suggestion;
+
+  @Input() isBulk = false;
+
+  @Input() hasEvidence = false;
+
+  @Input() seeEvidence = false;
+
+  @Input() isCollectionFixed = false;
+
+  /**
+   * The component is used to Delete suggestion
+   */
+  @Output() ignoreSuggestionClicked = new EventEmitter();
+
+  /**
+   * The component is used to approve & import
+   */
+  @Output() approveAndImport = new EventEmitter();
+
+  /**
+   * The component is used to approve & import
+   */
+  @Output() seeEvidences = new EventEmitter();
+
+  constructor(private modalService: NgbModal) { }
+
+  /**
+   * Method called on clicking the button "approve & import", It opens a dialog for
+   * select a collection and it emits an approveAndImport event.
+   */
+  openDialog(entity: ItemType) {
+
+    const modalRef = this.modalService.open(CreateItemParentSelectorComponent);
+    modalRef.componentInstance.emitOnly = true;
+    modalRef.componentInstance.entityType = entity.label;
+
+    modalRef.componentInstance.select.pipe(take(1))
+      .subscribe((collection: Collection) => {
+        this.approveAndImport.emit({
+          suggestion: this.isBulk ? undefined : this.object,
+          collectionId: collection.id
+        });
+      });
+  }
+
+  approveAndImportCollectionFixed() {
+    this.approveAndImport.emit({
+      suggestion: this.isBulk ? undefined : this.object,
+      collectionId: null
+    });
+  }
+
+
+  /**
+   * Delete the suggestion
+   */
+  ignoreSuggestion() {
+    this.ignoreSuggestionClicked.emit(this.isBulk ? undefined : this.object.id);
+  }
+
+  /**
+   * Toggle See Evidence
+   */
+  toggleSeeEvidences() {
+    this.seeEvidences.emit(!this.seeEvidence);
+  }
+
+  ignoreSuggestionLabel(): string {
+    return this.isBulk ? 'suggestion.ignoreSuggestion.bulk' : 'suggestion.ignoreSuggestion' ;
+  }
+
+  approveAndImportLabel(): string {
+    return this.isBulk ? 'suggestion.approveAndImport.bulk' : 'suggestion.approveAndImport';
+  }
+}
diff --git a/src/app/notifications/suggestion-list-element/suggestion-evidences/suggestion-evidences.component.html b/src/app/notifications/suggestion-list-element/suggestion-evidences/suggestion-evidences.component.html
new file mode 100644
index 0000000000..e23c244eb4
--- /dev/null
+++ b/src/app/notifications/suggestion-list-element/suggestion-evidences/suggestion-evidences.component.html
@@ -0,0 +1,20 @@
+
    
+  
    
+    
+      
+        
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+        
+      
+    
    {{'suggestion.evidence.score' | translate}}{{'suggestion.evidence.type' | translate}}{{'suggestion.evidence.notes' | translate}}
    {{evidences[evidence].score}}{{evidence | translate}}{{evidences[evidence].notes}}
    
+  
    
+
    
diff --git a/src/themes/custom/app/browse-by/browse-by-switcher/browse-by-switcher.component.scss b/src/app/notifications/suggestion-list-element/suggestion-evidences/suggestion-evidences.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-switcher/browse-by-switcher.component.scss
rename to src/app/notifications/suggestion-list-element/suggestion-evidences/suggestion-evidences.component.scss
diff --git a/src/app/notifications/suggestion-list-element/suggestion-evidences/suggestion-evidences.component.ts b/src/app/notifications/suggestion-list-element/suggestion-evidences/suggestion-evidences.component.ts
new file mode 100644
index 0000000000..2eb3af02f3
--- /dev/null
+++ b/src/app/notifications/suggestion-list-element/suggestion-evidences/suggestion-evidences.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { fadeIn } from '../../../shared/animations/fade';
+import { SuggestionEvidences } from '../../../core/notifications/models/suggestion.model';
+
+/**
+ * Show suggestion evidences such as score (authorScore, dateScore)
+ */
+@Component({
+  selector: 'ds-suggestion-evidences',
+  styleUrls: [ './suggestion-evidences.component.scss' ],
+  templateUrl: './suggestion-evidences.component.html',
+  animations: [fadeIn]
+})
+export class SuggestionEvidencesComponent {
+
+  @Input() evidences: SuggestionEvidences;
+
+}
diff --git a/src/app/notifications/suggestion-list-element/suggestion-list-element.component.html b/src/app/notifications/suggestion-list-element/suggestion-list-element.component.html
new file mode 100644
index 0000000000..ef27876f2c
--- /dev/null
+++ b/src/app/notifications/suggestion-list-element/suggestion-list-element.component.html
@@ -0,0 +1,45 @@
+
    
+  
    
+    
+    
    
+      
    
+        
+      
    
+    
    
+    
+    
    
+      
    
+        
     {{'suggestion.totalScore' | translate}} 
    
+        {{ object.score }}
+      
    
+    
    
+    
+    
    
+        
+        
+        
+      
+    
    
+  
    
+  
+  
    
+    
    
+      
+    
    
+  
    
+
    
+
    
diff --git a/src/app/notifications/suggestion-list-element/suggestion-list-element.component.scss b/src/app/notifications/suggestion-list-element/suggestion-list-element.component.scss
new file mode 100644
index 0000000000..1c52209518
--- /dev/null
+++ b/src/app/notifications/suggestion-list-element/suggestion-list-element.component.scss
@@ -0,0 +1,16 @@
+.issue-date {
+  color: #c8c8c8;
+}
+
+.parent {
+  display: flex;
+  gap:10px;
+}
+
+.import {
+  flex: initial;
+}
+
+.suggestion-score {
+  font-size: 1.5rem;
+}
diff --git a/src/app/notifications/suggestion-list-element/suggestion-list-element.component.spec.ts b/src/app/notifications/suggestion-list-element/suggestion-list-element.component.spec.ts
new file mode 100644
index 0000000000..b9339f35d2
--- /dev/null
+++ b/src/app/notifications/suggestion-list-element/suggestion-list-element.component.spec.ts
@@ -0,0 +1,80 @@
+import { SuggestionListElementComponent } from './suggestion-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TestScheduler } from 'rxjs/testing';
+import { getTestScheduler } from 'jasmine-marbles';
+import { mockSuggestionPublicationOne } from '../../shared/mocks/publication-claim.mock';
+import { Item } from '../../core/shared/item.model';
+
+describe('SuggestionListElementComponent', () => {
+  let component: SuggestionListElementComponent;
+  let fixture: ComponentFixture;
+  let scheduler: TestScheduler;
+
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot()
+      ],
+      declarations: [SuggestionListElementComponent],
+      providers: [
+        NgbModal
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents().then();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SuggestionListElementComponent);
+    component = fixture.componentInstance;
+    scheduler = getTestScheduler();
+
+    component.object = mockSuggestionPublicationOne;
+  });
+
+  describe('SuggestionListElementComponent test', () => {
+
+    it('should create', () => {
+      scheduler.schedule(() => fixture.detectChanges());
+      scheduler.flush();
+      const expectedIndexableObject = Object.assign(new Item(), {
+        id: mockSuggestionPublicationOne.id,
+        metadata: mockSuggestionPublicationOne.metadata
+      });
+      expect(component).toBeTruthy();
+      expect(component.listableObject.hitHighlights).toEqual({});
+      expect(component.listableObject.indexableObject).toEqual(expectedIndexableObject);
+    });
+
+    it('should check if has evidence', () => {
+      expect(component.hasEvidences()).toBeTruthy();
+    });
+
+    it('should set seeEvidences', () => {
+      component.onSeeEvidences(true);
+      expect(component.seeEvidence).toBeTruthy();
+    });
+
+    it('should emit selection', () => {
+      spyOn(component.selected, 'next');
+      component.changeSelected({target: { checked: true}});
+      expect(component.selected.next).toHaveBeenCalledWith(true);
+    });
+
+    it('should emit for deletion', () => {
+      spyOn(component.ignoreSuggestionClicked, 'emit');
+      component.onIgnoreSuggestion('1234');
+      expect(component.ignoreSuggestionClicked.emit).toHaveBeenCalledWith('1234');
+    });
+
+    it('should emit for approve and import', () => {
+      const event = {collectionId:'1234', suggestion: mockSuggestionPublicationOne};
+      spyOn(component.approveAndImport, 'emit');
+      component.onApproveAndImport(event);
+      expect(component.approveAndImport.emit).toHaveBeenCalledWith(event);
+    });
+  });
+});
diff --git a/src/app/notifications/suggestion-list-element/suggestion-list-element.component.ts b/src/app/notifications/suggestion-list-element/suggestion-list-element.component.ts
new file mode 100644
index 0000000000..f9728ec20e
--- /dev/null
+++ b/src/app/notifications/suggestion-list-element/suggestion-list-element.component.ts
@@ -0,0 +1,103 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Suggestion } from 'src/app/core/notifications/models/suggestion.model';
+import { fadeIn } from '../../shared/animations/fade';
+import { Item } from '../../core/shared/item.model';
+import { isNotEmpty } from '../../shared/empty.util';
+
+/**
+ * A simple interface to unite a specific suggestion and the id of the chosen collection
+ */
+export interface SuggestionApproveAndImport {
+  suggestion: Suggestion;
+  collectionId: string;
+}
+
+/**
+ * Show all the suggestions by researcher
+ */
+@Component({
+  selector: 'ds-suggestion-list-item',
+  styleUrls: ['./suggestion-list-element.component.scss'],
+  templateUrl: './suggestion-list-element.component.html',
+  animations: [fadeIn]
+})
+export class SuggestionListElementComponent implements OnInit {
+
+  @Input() object: Suggestion;
+
+  @Input() isSelected = false;
+
+  @Input() isCollectionFixed = false;
+
+  public listableObject: any;
+
+  public seeEvidence = false;
+
+  /**
+   * The component is used to Delete suggestion
+   */
+  @Output() ignoreSuggestionClicked = new EventEmitter();
+
+  /**
+   * The component is used to approve & import
+   */
+  @Output() approveAndImport = new EventEmitter();
+
+  /**
+   * New value whether the element is selected
+   */
+  @Output() selected = new EventEmitter();
+
+  /**
+   * Initialize instance variables
+   *
+   * @param {NgbModal} modalService
+   */
+  constructor(private modalService: NgbModal) { }
+
+  ngOnInit() {
+    this.listableObject = {
+      indexableObject: Object.assign(new Item(), {id: this.object.id, metadata: this.object.metadata}),
+      hitHighlights: {}
+    };
+  }
+
+  /**
+   * Approve and import the suggestion
+   */
+  onApproveAndImport(event: SuggestionApproveAndImport) {
+    this.approveAndImport.emit(event);
+  }
+
+  /**
+   * Delete the suggestion
+   */
+  onIgnoreSuggestion(suggestionId: string) {
+    this.ignoreSuggestionClicked.emit(suggestionId);
+  }
+
+  /**
+   * Change is selected value.
+   */
+  changeSelected(event) {
+    this.isSelected = event.target.checked;
+    this.selected.next(this.isSelected);
+  }
+
+  /**
+   * See the Evidence
+   */
+  hasEvidences() {
+    return isNotEmpty(this.object.evidences);
+  }
+
+  /**
+   * Set the see evidence variable.
+   */
+  onSeeEvidences(seeEvidence: boolean) {
+    this.seeEvidence = seeEvidence;
+  }
+
+}
diff --git a/src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.html b/src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.html
new file mode 100644
index 0000000000..f2ab1e5b65
--- /dev/null
+++ b/src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.html
@@ -0,0 +1,51 @@
+
    
+  
    
+    
    
+      
    {{'suggestion.title'| translate}}
    
+
+      
+      
+
+        
+        
+          
+          
    
+            
+              
+                
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                
+              
+            
    {{'suggestion.table.name' | translate}}{{'suggestion.table.actions' | translate}}
    
+                    {{targetElement.display}}
+                  
+                    
    
+                      
+                    
    
+                  
    
+          
    
+            
+          
+    
    
+  
    
+
    
diff --git a/src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html b/src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
rename to src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.scss
diff --git a/src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.ts b/src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.ts
new file mode 100644
index 0000000000..240c3b410b
--- /dev/null
+++ b/src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.ts
@@ -0,0 +1,143 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Observable, Subscription } from 'rxjs';
+import { distinctUntilChanged, take } from 'rxjs/operators';
+
+import { hasValue } from '../../../shared/empty.util';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import { getSuggestionPageRoute } from '../../../suggestions-page/suggestions-page-routing-paths';
+import { PaginationService } from '../../../core/pagination/pagination.service';
+import { SuggestionTarget } from '../../../core/notifications/models/suggestion-target.model';
+import { SuggestionTargetsStateService } from '../suggestion-targets.state.service';
+import { SuggestionsService } from '../../suggestions.service';
+
+/**
+ * Component to display the Suggestion Target list.
+ */
+@Component({
+  selector: 'ds-publication-claim',
+  templateUrl: './publication-claim.component.html',
+  styleUrls: ['./publication-claim.component.scss'],
+})
+export class PublicationClaimComponent implements OnInit {
+
+  /**
+   * The source for which to list targets
+   */
+  @Input() source: string;
+
+  /**
+   * The pagination system configuration for HTML listing.
+   * @type {PaginationComponentOptions}
+   */
+  public paginationConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'stp',
+    pageSizeOptions: [5, 10, 20, 40, 60]
+  });
+
+  /**
+   * The Suggestion Target list.
+   */
+  public targets$: Observable;
+  /**
+   * The total number of Suggestion Targets.
+   */
+  public totalElements$: Observable;
+  /**
+   * Array to track all the component subscriptions. Useful to unsubscribe them with 'onDestroy'.
+   * @type {Array}
+   */
+  protected subs: Subscription[] = [];
+
+  /**
+   * Initialize the component variables.
+   * @param {PaginationService} paginationService
+   * @param {SuggestionTargetsStateService} suggestionTargetsStateService
+   * @param {SuggestionsService} suggestionService
+   * @param {Router} router
+   */
+  constructor(
+    private paginationService: PaginationService,
+    private suggestionTargetsStateService: SuggestionTargetsStateService,
+    private suggestionService: SuggestionsService,
+    private router: Router
+  ) {
+  }
+
+  /**
+   * Component initialization.
+   */
+  ngOnInit(): void {
+    this.targets$ = this.suggestionTargetsStateService.getSuggestionTargets();
+    this.totalElements$ = this.suggestionTargetsStateService.getSuggestionTargetsTotals();
+
+    this.subs.push(
+      this.suggestionTargetsStateService.isSuggestionTargetsLoaded().pipe(
+        take(1)
+      ).subscribe(() => {
+        this.getSuggestionTargets();
+      })
+    );
+  }
+
+  /**
+   * Returns the information about the loading status of the Suggestion Targets (if it's running or not).
+   *
+   * @return Observable
+   *    'true' if the targets are loading, 'false' otherwise.
+   */
+  public isTargetsLoading(): Observable {
+    return this.suggestionTargetsStateService.isSuggestionTargetsLoading();
+  }
+
+  /**
+   * Returns the information about the processing status of the Suggestion Targets (if it's running or not).
+   *
+   * @return Observable
+   *    'true' if there are operations running on the targets (ex.: a REST call), 'false' otherwise.
+   */
+  public isTargetsProcessing(): Observable {
+    return this.suggestionTargetsStateService.isSuggestionTargetsProcessing();
+  }
+
+  /**
+   * Redirect to suggestion page.
+   *
+   * @param {string} id
+   *    the id of suggestion target
+   */
+  public redirectToSuggestions(id: string) {
+    this.router.navigate([getSuggestionPageRoute(id)]);
+  }
+
+  /**
+   * Unsubscribe from all subscriptions.
+   */
+  ngOnDestroy(): void {
+    this.suggestionTargetsStateService.dispatchClearSuggestionTargetsAction();
+    this.subs
+      .filter((sub) => hasValue(sub))
+      .forEach((sub) => sub.unsubscribe());
+  }
+
+  /**
+   * Dispatch the Suggestion Targets retrival.
+   */
+  public getSuggestionTargets(): void {
+    this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig).pipe(
+      distinctUntilChanged(),
+      take(1)
+    ).subscribe((options: PaginationComponentOptions) => {
+      this.suggestionTargetsStateService.dispatchRetrieveSuggestionTargets(
+        this.source,
+        options.pageSize,
+        options.currentPage
+      );
+    });
+  }
+
+  public getTargetUuid(target: SuggestionTarget) {
+    return this.suggestionService.getTargetUuid(target);
+  }
+}
diff --git a/src/app/notifications/suggestion-targets/suggestion-targets.actions.ts b/src/app/notifications/suggestion-targets/suggestion-targets.actions.ts
new file mode 100644
index 0000000000..fd4804c47b
--- /dev/null
+++ b/src/app/notifications/suggestion-targets/suggestion-targets.actions.ts
@@ -0,0 +1,156 @@
+/* eslint-disable max-classes-per-file */
+import { Action } from '@ngrx/store';
+import { type } from '../../shared/ngrx/type';
+import { SuggestionTarget } from '../../core/notifications/models/suggestion-target.model';
+
+/**
+ * For each action type in an action group, make a simple
+ * enum object for all of this group's action types.
+ *
+ * The 'type' utility function coerces strings into string
+ * literal types and runs a simple check to guarantee all
+ * action types in the application are unique.
+ */
+export const SuggestionTargetActionTypes = {
+  ADD_TARGETS: type('dspace/integration/openaire/suggestions/target/ADD_TARGETS'),
+  CLEAR_TARGETS: type('dspace/integration/openaire/suggestions/target/CLEAR_TARGETS'),
+  RETRIEVE_TARGETS_BY_SOURCE: type('dspace/integration/openaire/suggestions/target/RETRIEVE_TARGETS_BY_SOURCE'),
+  RETRIEVE_TARGETS_BY_SOURCE_ERROR: type('dspace/integration/openaire/suggestions/target/RETRIEVE_TARGETS_BY_SOURCE_ERROR'),
+  ADD_USER_SUGGESTIONS: type('dspace/integration/openaire/suggestions/target/ADD_USER_SUGGESTIONS'),
+  REFRESH_USER_SUGGESTIONS: type('dspace/integration/openaire/suggestions/target/REFRESH_USER_SUGGESTIONS'),
+  MARK_USER_SUGGESTIONS_AS_VISITED: type('dspace/integration/openaire/suggestions/target/MARK_USER_SUGGESTIONS_AS_VISITED')
+};
+
+/* tslint:disable:max-classes-per-file */
+
+/**
+ * An ngrx action to retrieve all the Suggestion Targets.
+ */
+export class RetrieveTargetsBySourceAction implements Action {
+  type = SuggestionTargetActionTypes.RETRIEVE_TARGETS_BY_SOURCE;
+  payload: {
+    source: string;
+    elementsPerPage: number;
+    currentPage: number;
+  };
+
+  /**
+   * Create a new RetrieveTargetsBySourceAction.
+   *
+   * @param source
+   *    the source for which to retrieve suggestion targets
+   * @param elementsPerPage
+   *    the number of targets per page
+   * @param currentPage
+   *    The page number to retrieve
+   */
+  constructor(source: string, elementsPerPage: number, currentPage: number) {
+    this.payload = {
+      source,
+      elementsPerPage,
+      currentPage
+    };
+  }
+}
+
+/**
+ * An ngrx action for retrieving 'all Suggestion Targets' error.
+ */
+export class RetrieveAllTargetsErrorAction implements Action {
+  type = SuggestionTargetActionTypes.RETRIEVE_TARGETS_BY_SOURCE_ERROR;
+}
+
+/**
+ * An ngrx action to load the Suggestion Target  objects.
+ */
+export class AddTargetAction implements Action {
+  type = SuggestionTargetActionTypes.ADD_TARGETS;
+  payload: {
+    targets: SuggestionTarget[];
+    totalPages: number;
+    currentPage: number;
+    totalElements: number;
+  };
+
+  /**
+   * Create a new AddTargetAction.
+   *
+   * @param targets
+   *    the list of targets
+   * @param totalPages
+   *    the total available pages of targets
+   * @param currentPage
+   *    the current page
+   * @param totalElements
+   *    the total available Suggestion Targets
+   */
+  constructor(targets: SuggestionTarget[], totalPages: number, currentPage: number, totalElements: number) {
+    this.payload = {
+      targets,
+      totalPages,
+      currentPage,
+      totalElements
+    };
+  }
+
+}
+
+/**
+ * An ngrx action to load the user Suggestion Target object.
+ * Called by the ??? effect.
+ */
+export class AddUserSuggestionsAction implements Action {
+  type = SuggestionTargetActionTypes.ADD_USER_SUGGESTIONS;
+  payload: {
+    suggestionTargets: SuggestionTarget[];
+  };
+
+  /**
+   * Create a new AddUserSuggestionsAction.
+   *
+   * @param suggestionTargets
+   *    the user suggestions target
+   */
+  constructor(suggestionTargets: SuggestionTarget[]) {
+    this.payload = { suggestionTargets };
+  }
+
+}
+
+/**
+ * An ngrx action to reload the user Suggestion Target object.
+ * Called by the ??? effect.
+ */
+export class RefreshUserSuggestionsAction implements Action {
+  type = SuggestionTargetActionTypes.REFRESH_USER_SUGGESTIONS;
+}
+
+/**
+ * An ngrx action to Mark User Suggestions As Visited.
+ * Called by the ??? effect.
+ */
+export class MarkUserSuggestionsAsVisitedAction implements Action {
+  type = SuggestionTargetActionTypes.MARK_USER_SUGGESTIONS_AS_VISITED;
+}
+
+/**
+ * An ngrx action to clear targets state.
+ */
+export class ClearSuggestionTargetsAction implements Action {
+  type = SuggestionTargetActionTypes.CLEAR_TARGETS;
+}
+
+/* tslint:enable:max-classes-per-file */
+
+/**
+ * Export a type alias of all actions in this action group
+ * so that reducers can easily compose action types.
+ */
+export type SuggestionTargetsActions
+  = AddTargetAction
+  | AddUserSuggestionsAction
+  | ClearSuggestionTargetsAction
+  | MarkUserSuggestionsAsVisitedAction
+  | RetrieveTargetsBySourceAction
+  | RetrieveAllTargetsErrorAction
+  | RefreshUserSuggestionsAction;
diff --git a/src/app/notifications/suggestion-targets/suggestion-targets.effects.ts b/src/app/notifications/suggestion-targets/suggestion-targets.effects.ts
new file mode 100644
index 0000000000..c9371241a3
--- /dev/null
+++ b/src/app/notifications/suggestion-targets/suggestion-targets.effects.ts
@@ -0,0 +1,91 @@
+import { Injectable } from '@angular/core';
+
+import { Store } from '@ngrx/store';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { TranslateService } from '@ngx-translate/core';
+import { catchError, map, switchMap, tap } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+import { AddTargetAction, AddUserSuggestionsAction, RetrieveAllTargetsErrorAction, RetrieveTargetsBySourceAction, SuggestionTargetActionTypes } from './suggestion-targets.actions';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { SuggestionsService } from '../suggestions.service';
+import { SuggestionTarget } from '../../core/notifications/models/suggestion-target.model';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+
+/**
+ * Provides effect methods for the Suggestion Targets actions.
+ */
+@Injectable()
+export class SuggestionTargetsEffects {
+
+  /**
+   * Retrieve all Suggestion Targets managing pagination and errors.
+   */
+  retrieveTargetsBySource$ = createEffect(() => this.actions$.pipe(
+    ofType(SuggestionTargetActionTypes.RETRIEVE_TARGETS_BY_SOURCE),
+    switchMap((action: RetrieveTargetsBySourceAction) => {
+      return this.suggestionsService.getTargets(
+        action.payload.source,
+        action.payload.elementsPerPage,
+        action.payload.currentPage
+      ).pipe(
+        map((targets: PaginatedList) =>
+          new AddTargetAction(targets.page, targets.totalPages, targets.currentPage, targets.totalElements)
+        ),
+        catchError((error: Error) => {
+          if (error) {
+            console.error(error.message);
+          }
+          return of(new RetrieveAllTargetsErrorAction());
+        })
+      );
+    })
+  ));
+
+  /**
+   * Show a notification on error.
+   */
+  retrieveAllTargetsErrorAction$ = createEffect(() => this.actions$.pipe(
+    ofType(SuggestionTargetActionTypes.RETRIEVE_TARGETS_BY_SOURCE_ERROR),
+    tap(() => {
+      this.notificationsService.error(null, this.translate.get('suggestion.target.error.service.retrieve'));
+    })
+  ), { dispatch: false });
+
+  /**
+   * Fetch the current user suggestion
+   */
+  refreshUserSuggestionsAction$ = createEffect(() => this.actions$.pipe(
+    ofType(SuggestionTargetActionTypes.REFRESH_USER_SUGGESTIONS),
+    switchMap(() => {
+      return this.store$.select((state: any) => state.core.auth.userId)
+        .pipe(
+          switchMap((userId: string) => {
+            return this.suggestionsService.retrieveCurrentUserSuggestions(userId)
+              .pipe(
+                map((suggestionTargets: SuggestionTarget[]) => new AddUserSuggestionsAction(suggestionTargets)),
+                catchError((errors) => of(errors))
+              );
+          }),
+          catchError((errors) => of(errors))
+        );
+    }))
+  );
+
+  /**
+   * Initialize the effect class variables.
+   * @param {Actions} actions$
+   * @param {Store} store$
+   * @param {TranslateService} translate
+   * @param {NotificationsService} notificationsService
+   * @param {SuggestionsService} suggestionsService
+   */
+  constructor(
+    private actions$: Actions,
+    private store$: Store,
+    private translate: TranslateService,
+    private notificationsService: NotificationsService,
+    private suggestionsService: SuggestionsService
+  ) {
+  }
+}
diff --git a/src/app/notifications/suggestion-targets/suggestion-targets.reducer.ts b/src/app/notifications/suggestion-targets/suggestion-targets.reducer.ts
new file mode 100644
index 0000000000..9d618db795
--- /dev/null
+++ b/src/app/notifications/suggestion-targets/suggestion-targets.reducer.ts
@@ -0,0 +1,100 @@
+import { SuggestionTarget } from '../../core/notifications/models/suggestion-target.model';
+import { SuggestionTargetActionTypes, SuggestionTargetsActions } from './suggestion-targets.actions';
+
+/**
+ * The interface representing the OpenAIRE suggestion targets state.
+ */
+export interface SuggestionTargetState {
+  targets: SuggestionTarget[];
+  processing: boolean;
+  loaded: boolean;
+  totalPages: number;
+  currentPage: number;
+  totalElements: number;
+  currentUserTargets: SuggestionTarget[];
+  currentUserTargetsVisited: boolean;
+}
+
+/**
+ * Used for the OpenAIRE Suggestion Target state initialization.
+ */
+const SuggestionTargetInitialState: SuggestionTargetState = {
+  targets: [],
+  processing: false,
+  loaded: false,
+  totalPages: 0,
+  currentPage: 0,
+  totalElements: 0,
+  currentUserTargets: null,
+  currentUserTargetsVisited: false
+};
+
+/**
+ * The OpenAIRE Broker Topic Reducer
+ *
+ * @param state
+ *    the current state initialized with SuggestionTargetInitialState
+ * @param action
+ *    the action to perform on the state
+ * @return SuggestionTargetState
+ *    the new state
+ */
+export function SuggestionTargetsReducer(state = SuggestionTargetInitialState, action: SuggestionTargetsActions): SuggestionTargetState {
+  switch (action.type) {
+    case SuggestionTargetActionTypes.RETRIEVE_TARGETS_BY_SOURCE: {
+      return Object.assign({}, state, {
+        targets: [],
+        processing: true
+      });
+    }
+
+    case SuggestionTargetActionTypes.ADD_TARGETS: {
+      return Object.assign({}, state, {
+        targets: state.targets.concat(action.payload.targets),
+        processing: false,
+        loaded: true,
+        totalPages: action.payload.totalPages,
+        currentPage: state.currentPage,
+        totalElements: action.payload.totalElements
+      });
+    }
+
+    case SuggestionTargetActionTypes.RETRIEVE_TARGETS_BY_SOURCE_ERROR: {
+      return Object.assign({}, state, {
+        targets: [],
+        processing: false,
+        loaded: true,
+        totalPages: 0,
+        currentPage: 0,
+        totalElements: 0,
+      });
+    }
+
+    case SuggestionTargetActionTypes.ADD_USER_SUGGESTIONS: {
+      return Object.assign({}, state, {
+        currentUserTargets: action.payload.suggestionTargets
+      });
+    }
+
+    case SuggestionTargetActionTypes.MARK_USER_SUGGESTIONS_AS_VISITED: {
+      return Object.assign({}, state, {
+        currentUserTargetsVisited: true
+      });
+    }
+
+    case SuggestionTargetActionTypes.CLEAR_TARGETS: {
+      return Object.assign({}, state, {
+        targets: [],
+        processing: false,
+        loaded: false,
+        totalPages: 0,
+        currentPage: 0,
+        totalElements: 0,
+      });
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/app/notifications/suggestion-targets/suggestion-targets.state.service.ts b/src/app/notifications/suggestion-targets/suggestion-targets.state.service.ts
new file mode 100644
index 0000000000..1ca01b10f2
--- /dev/null
+++ b/src/app/notifications/suggestion-targets/suggestion-targets.state.service.ts
@@ -0,0 +1,164 @@
+import { Injectable } from '@angular/core';
+
+import { select, Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+
+import {
+  ClearSuggestionTargetsAction,
+  MarkUserSuggestionsAsVisitedAction,
+  RefreshUserSuggestionsAction,
+  RetrieveTargetsBySourceAction
+} from './suggestion-targets.actions';
+import { SuggestionNotificationsState } from '../../notifications/notifications.reducer';
+import { SuggestionTarget } from '../../core/notifications/models/suggestion-target.model';
+import {
+  getCurrentUserSuggestionTargetsSelector, getCurrentUserSuggestionTargetsVisitedSelector,
+  getSuggestionTargetCurrentPageSelector,
+  getSuggestionTargetTotalsSelector,
+  isReciterSuggestionTargetProcessingSelector,
+  isSuggestionTargetLoadedSelector,
+  suggestionTargetObjectSelector
+} from '../../suggestion-notifications/selectors';
+
+/**
+ * The service handling the Suggestion targets State.
+ */
+@Injectable()
+export class SuggestionTargetsStateService {
+
+  /**
+   * Initialize the service variables.
+   * @param {Store} store
+   */
+  constructor(private store: Store) { }
+
+  /**
+   * Returns the list of Suggestion Targets from the state.
+   *
+   * @return Observable
+   *    The list of Suggestion Targets.
+   */
+  public getSuggestionTargets(): Observable {
+    return this.store.pipe(select(suggestionTargetObjectSelector()));
+  }
+
+  /**
+   * Returns the information about the loading status of the Suggestion Targets (if it's running or not).
+   *
+   * @return Observable
+   *    'true' if the targets are loading, 'false' otherwise.
+   */
+  public isSuggestionTargetsLoading(): Observable {
+    return this.store.pipe(
+      select(isSuggestionTargetLoadedSelector),
+      map((loaded: boolean) => !loaded)
+    );
+  }
+
+  /**
+   * Returns the information about the loading status of the Suggestion Targets (whether or not they were loaded).
+   *
+   * @return Observable
+   *    'true' if the targets are loaded, 'false' otherwise.
+   */
+  public isSuggestionTargetsLoaded(): Observable {
+    return this.store.pipe(select(isSuggestionTargetLoadedSelector));
+  }
+
+  /**
+   * Returns the information about the processing status of the Suggestion Targets (if it's running or not).
+   *
+   * @return Observable
+   *    'true' if there are operations running on the targets (ex.: a REST call), 'false' otherwise.
+   */
+  public isSuggestionTargetsProcessing(): Observable {
+    return this.store.pipe(select(isReciterSuggestionTargetProcessingSelector));
+  }
+
+  /**
+   * Returns, from the state, the total available pages of the Suggestion Targets.
+   *
+   * @return Observable
+   *    The number of the Suggestion Targets pages.
+   */
+  public getSuggestionTargetsTotalPages(): Observable {
+    return this.store.pipe(select(getSuggestionTargetTotalsSelector));
+  }
+
+  /**
+   * Returns the current page of the Suggestion Targets, from the state.
+   *
+   * @return Observable
+   *    The number of the current Suggestion Targets page.
+   */
+  public getSuggestionTargetsCurrentPage(): Observable {
+    return this.store.pipe(select(getSuggestionTargetCurrentPageSelector));
+  }
+
+  /**
+   * Returns the total number of the Suggestion Targets.
+   *
+   * @return Observable
+   *    The number of the Suggestion Targets.
+   */
+  public getSuggestionTargetsTotals(): Observable {
+    return this.store.pipe(select(getSuggestionTargetTotalsSelector));
+  }
+
+  /**
+   * Dispatch a request to change the Suggestion Targets state, retrieving the targets from the server.
+   *
+   * @param source
+   *    the source for which to retrieve suggestion targets
+   * @param elementsPerPage
+   *    The number of the targets per page.
+   * @param currentPage
+   *    The number of the current page.
+   */
+  public dispatchRetrieveSuggestionTargets(source: string, elementsPerPage: number, currentPage: number): void {
+    this.store.dispatch(new RetrieveTargetsBySourceAction(source, elementsPerPage, currentPage));
+  }
+
+  /**
+   * Returns, from the state, the suggestion targets for the current user.
+   *
+   * @return Observable
+   *    The Suggestion Targets object.
+   */
+  public getCurrentUserSuggestionTargets(): Observable {
+    return this.store.pipe(select(getCurrentUserSuggestionTargetsSelector));
+  }
+
+  /**
+   * Returns, from the state, whether or not the user has consulted their suggestion targets.
+   *
+   * @return Observable
+   *    True if user already visited, false otherwise.
+   */
+  public hasUserVisitedSuggestions(): Observable {
+    return this.store.pipe(select(getCurrentUserSuggestionTargetsVisitedSelector));
+  }
+
+  /**
+   * Dispatch a new MarkUserSuggestionsAsVisitedAction
+   */
+  public dispatchMarkUserSuggestionsAsVisitedAction(): void {
+    this.store.dispatch(new MarkUserSuggestionsAsVisitedAction());
+  }
+
+  /**
+   * Dispatch an action to clear the Reciter Suggestion Targets state.
+   */
+  public dispatchClearSuggestionTargetsAction(): void {
+    this.store.dispatch(new ClearSuggestionTargetsAction());
+  }
+
+  /**
+   * Dispatch an action to refresh the user suggestions.
+   */
+  public dispatchRefreshUserSuggestionsAction(): void {
+    this.store.dispatch(new RefreshUserSuggestionsAction());
+  }
+}
diff --git a/src/app/notifications/suggestion.service.spec.ts b/src/app/notifications/suggestion.service.spec.ts
new file mode 100644
index 0000000000..ed0fb57445
--- /dev/null
+++ b/src/app/notifications/suggestion.service.spec.ts
@@ -0,0 +1,174 @@
+import { SuggestionsService } from './suggestions.service';
+import { ResearcherProfileDataService } from '../core/profile/researcher-profile-data.service';
+
+import { TestScheduler } from 'rxjs/testing';
+import { getTestScheduler } from 'jasmine-marbles';
+import { of as observableOf } from 'rxjs';
+import { FindListOptions } from '../core/data/find-list-options.model';
+import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
+import { ResearcherProfile } from '../core/profile/model/researcher-profile.model';
+import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
+import { WorkspaceitemDataService } from '../core/submission/workspaceitem-data.service';
+import { mockSuggestionPublicationOne } from '../shared/mocks/publication-claim.mock';
+import { ResourceType } from '../core/shared/resource-type';
+import { SuggestionsDataService } from '../core/notifications/suggestions-data.service';
+import { SuggestionTargetDataService } from '../core/notifications/target/suggestion-target-data.service';
+import { SuggestionTarget } from '../core/notifications/models/suggestion-target.model';
+
+describe('SuggestionsService test', () => {
+  let scheduler: TestScheduler;
+  let service: SuggestionsService;
+  let researcherProfileService: ResearcherProfileDataService;
+  let suggestionsDataService: SuggestionsDataService;
+  let suggestionTargetDataService: SuggestionTargetDataService;
+  let translateService: any = {
+    instant: (str) => str,
+  };
+  const suggestionTarget = {
+    id: '1234:4321',
+    display: 'display',
+    source: 'source',
+    total: 8,
+    type: new ResourceType('suggestiontarget')
+  };
+
+  const mockResercherProfile = {
+    id: '1234',
+    uuid: '1234',
+    visible: true
+  };
+
+  function initTestService() {
+    return new SuggestionsService(
+      researcherProfileService,
+      suggestionsDataService,
+      suggestionTargetDataService,
+      translateService
+    );
+  }
+
+  beforeEach(() => {
+    scheduler = getTestScheduler();
+
+    researcherProfileService = jasmine.createSpyObj('researcherProfileService', {
+      findById: createSuccessfulRemoteDataObject$(mockResercherProfile as ResearcherProfile),
+      findRelatedItemId: observableOf('1234'),
+    });
+
+    suggestionTargetDataService = jasmine.createSpyObj('suggestionTargetsDataService', {
+      getTargets: observableOf(null),
+      findById: observableOf(null),
+    });
+
+    suggestionsDataService = jasmine.createSpyObj('suggestionsDataService', {
+      searchBy: observableOf(null),
+      delete: observableOf(null),
+      deleteSuggestion: createSuccessfulRemoteDataObject$({}),
+      getSuggestionsByTargetAndSource : observableOf(null),
+      clearSuggestionRequests : null,
+      getTargetsByUser: observableOf(null),
+    });
+
+    service = initTestService();
+
+  });
+
+  describe('Suggestion service', () => {
+    it('should create', () => {
+      expect(service).toBeDefined();
+    });
+
+    it('should get targets', () => {
+      const sortOptions = new SortOptions('display', SortDirection.ASC);
+      const findListOptions: FindListOptions = {
+        elementsPerPage: 10,
+        currentPage: 1,
+        sort: sortOptions
+      };
+      service.getTargets('source', 10, 1);
+      expect(suggestionTargetDataService.getTargets).toHaveBeenCalledWith('source', findListOptions);
+    });
+
+    it('should get suggestions', () => {
+      const sortOptions = new SortOptions('display', SortDirection.ASC);
+      const findListOptions: FindListOptions = {
+        elementsPerPage: 10,
+        currentPage: 1,
+        sort: sortOptions
+      };
+      service.getSuggestions('source:target', 10, 1, sortOptions);
+      expect(suggestionsDataService.getSuggestionsByTargetAndSource).toHaveBeenCalledWith('target', 'source', findListOptions);
+    });
+
+    it('should clear suggestions', () => {
+      service.clearSuggestionRequests();
+      expect(suggestionsDataService.clearSuggestionRequests).toHaveBeenCalled();
+    });
+
+    it('should delete reviewed suggestion', () => {
+      service.deleteReviewedSuggestion('1234');
+      expect(suggestionsDataService.deleteSuggestion).toHaveBeenCalledWith('1234');
+    });
+
+    it('should retrieve current user suggestions', () => {
+      service.retrieveCurrentUserSuggestions('1234');
+      expect(researcherProfileService.findById).toHaveBeenCalledWith('1234', true);
+    });
+
+    it('should approve and import suggestion', () => {
+      spyOn(service, 'resolveCollectionId');
+      const workspaceitemService = {importExternalSourceEntry: (x,y) => observableOf(null)};
+      service.approveAndImport(workspaceitemService as unknown as WorkspaceitemDataService, mockSuggestionPublicationOne, '1234');
+      expect(service.resolveCollectionId).toHaveBeenCalled();
+    });
+
+    it('should approve and import suggestions', () => {
+      spyOn(service, 'approveAndImport');
+      const workspaceitemService = {importExternalSourceEntry: (x,y) => observableOf(null)};
+      service.approveAndImportMultiple(workspaceitemService as unknown as WorkspaceitemDataService, [mockSuggestionPublicationOne], '1234');
+      expect(service.approveAndImport).toHaveBeenCalledWith(workspaceitemService as unknown as WorkspaceitemDataService, mockSuggestionPublicationOne, '1234');
+    });
+
+    it('should delete suggestion', () => {
+      spyOn(service, 'deleteReviewedSuggestion').and.returnValue(createSuccessfulRemoteDataObject$({}));
+      service.ignoreSuggestion('1234');
+      expect(service.deleteReviewedSuggestion).toHaveBeenCalledWith('1234');
+    });
+
+    it('should delete suggestions', () => {
+      spyOn(service, 'ignoreSuggestion');
+      service.ignoreSuggestionMultiple([mockSuggestionPublicationOne]);
+      expect(service.ignoreSuggestion).toHaveBeenCalledWith(mockSuggestionPublicationOne.id);
+    });
+
+    it('should get target Uuid', () => {
+      expect(service.getTargetUuid(suggestionTarget as SuggestionTarget)).toBe('4321');
+      expect(service.getTargetUuid({id: ''} as SuggestionTarget)).toBe(null);
+    });
+
+    it('should get suggestion interpolation', () => {
+      const result = service.getNotificationSuggestionInterpolation(suggestionTarget as SuggestionTarget);
+      expect(result.count).toEqual(suggestionTarget.total);
+      expect(result.source).toEqual('suggestion.source.' + suggestionTarget.source);
+      expect(result.type).toEqual('suggestion.type.' + suggestionTarget.source);
+      expect(result.suggestionId).toEqual(suggestionTarget.id);
+      expect(result.displayName).toEqual(suggestionTarget.display);
+    });
+
+    it('should translate suggestion type', () => {
+        expect(service.translateSuggestionType('source')).toEqual('suggestion.type.source');
+    });
+
+    it('should translate suggestion source', () => {
+        expect(service.translateSuggestionSource('source')).toEqual('suggestion.source.source');
+    });
+
+    it('should resolve collection id', () => {
+        expect(service.resolveCollectionId(mockSuggestionPublicationOne, '1234')).toEqual('1234');
+    });
+
+    it('should check if collection is fixed', () => {
+        expect(service.isCollectionFixed([mockSuggestionPublicationOne])).toBeFalse();
+    });
+  });
+});
diff --git a/src/app/notifications/suggestions-notification/suggestions-notification.component.html b/src/app/notifications/suggestions-notification/suggestions-notification.component.html
new file mode 100644
index 0000000000..838bdb95ad
--- /dev/null
+++ b/src/app/notifications/suggestions-notification/suggestions-notification.component.html
@@ -0,0 +1,9 @@
+
+  
+    
    
+      
    
+      {{ 'notification.suggestion.please' | translate }}
+       {{ 'notification.suggestion.review' | translate}} 
+    
    
+      
+    
diff --git a/src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss b/src/app/notifications/suggestions-notification/suggestions-notification.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss
rename to src/app/notifications/suggestions-notification/suggestions-notification.component.scss
diff --git a/src/app/notifications/suggestions-notification/suggestions-notification.component.ts b/src/app/notifications/suggestions-notification/suggestions-notification.component.ts
new file mode 100644
index 0000000000..107da67fce
--- /dev/null
+++ b/src/app/notifications/suggestions-notification/suggestions-notification.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+
+import { SuggestionTargetsStateService } from '../suggestion-targets/suggestion-targets.state.service';
+import { SuggestionsService } from '../suggestions.service';
+import { Observable } from 'rxjs';
+import { SuggestionTarget } from '../../core/notifications/models/suggestion-target.model';
+
+/**
+ * Show suggestions notification, used on myDSpace and Profile pages
+ */
+@Component({
+  selector: 'ds-suggestions-notification',
+  templateUrl: './suggestions-notification.component.html',
+  styleUrls: ['./suggestions-notification.component.scss']
+})
+export class SuggestionsNotificationComponent implements OnInit {
+
+  /**
+   * The user suggestion targets.
+   */
+  suggestionsRD$: Observable;
+
+  constructor(
+    private suggestionTargetsStateService: SuggestionTargetsStateService,
+    private suggestionsService: SuggestionsService
+  ) { }
+
+  ngOnInit() {
+    this.suggestionTargetsStateService.dispatchRefreshUserSuggestionsAction();
+    this.suggestionsRD$ = this.suggestionTargetsStateService.getCurrentUserSuggestionTargets();
+  }
+
+  /**
+   * Interpolated params to build the notification suggestions notification.
+   * @param suggestionTarget
+   */
+  public getNotificationSuggestionInterpolation(suggestionTarget: SuggestionTarget): any {
+    return this.suggestionsService.getNotificationSuggestionInterpolation(suggestionTarget);
+  }
+
+}
diff --git a/src/app/notifications/suggestions-popup/suggestions-popup.component.html b/src/app/notifications/suggestions-popup/suggestions-popup.component.html
new file mode 100644
index 0000000000..474dfa329e
--- /dev/null
+++ b/src/app/notifications/suggestions-popup/suggestions-popup.component.html
@@ -0,0 +1,27 @@
+
    
+  
+
    
+
+
diff --git a/src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.html b/src/app/notifications/suggestions-popup/suggestions-popup.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.html
rename to src/app/notifications/suggestions-popup/suggestions-popup.component.scss
diff --git a/src/app/notifications/suggestions-popup/suggestions-popup.component.spec.ts b/src/app/notifications/suggestions-popup/suggestions-popup.component.spec.ts
new file mode 100644
index 0000000000..c8d59115d8
--- /dev/null
+++ b/src/app/notifications/suggestions-popup/suggestions-popup.component.spec.ts
@@ -0,0 +1,77 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SuggestionsPopupComponent } from './suggestions-popup.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { SuggestionTargetsStateService } from '../suggestion-targets/suggestion-targets.state.service';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { of as observableOf } from 'rxjs';
+import { mockSuggestionTargetsObjectOne } from '../../shared/mocks/publication-claim-targets.mock';
+import { SuggestionsService } from '../suggestions.service';
+
+describe('SuggestionsPopupComponent', () => {
+  let component: SuggestionsPopupComponent;
+  let fixture: ComponentFixture;
+
+  const suggestionStateService = jasmine.createSpyObj('SuggestionTargetsStateService', {
+    hasUserVisitedSuggestions: jasmine.createSpy('hasUserVisitedSuggestions'),
+    getCurrentUserSuggestionTargets: jasmine.createSpy('getCurrentUserSuggestionTargets'),
+    dispatchMarkUserSuggestionsAsVisitedAction: jasmine.createSpy('dispatchMarkUserSuggestionsAsVisitedAction'),
+    dispatchRefreshUserSuggestionsAction: jasmine.createSpy('dispatchRefreshUserSuggestionsAction')
+  });
+
+  const mockNotificationInterpolation = { count: 12, source: 'source', suggestionId: 'id', displayName: 'displayName' };
+  const suggestionService = jasmine.createSpyObj('SuggestionService', {
+    getNotificationSuggestionInterpolation:
+      jasmine.createSpy('getNotificationSuggestionInterpolation').and.returnValue(mockNotificationInterpolation)
+  });
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ SuggestionsPopupComponent ],
+      providers: [
+        { provide: SuggestionTargetsStateService, useValue: suggestionStateService },
+        { provide: SuggestionsService, useValue: suggestionService },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+
+    })
+    .compileComponents();
+  }));
+
+  describe('should create', () => {
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SuggestionsPopupComponent);
+      component = fixture.componentInstance;
+      spyOn(component, 'initializePopup').and.returnValue(null);
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+      expect(component.initializePopup).toHaveBeenCalled();
+    });
+
+  });
+
+  describe('when there are publication suggestions', () => {
+
+    beforeEach(() => {
+      suggestionStateService.hasUserVisitedSuggestions.and.returnValue(observableOf(false));
+      suggestionStateService.getCurrentUserSuggestionTargets.and.returnValue(observableOf([mockSuggestionTargetsObjectOne]));
+      suggestionStateService.dispatchMarkUserSuggestionsAsVisitedAction.and.returnValue(observableOf(null));
+      suggestionStateService.dispatchRefreshUserSuggestionsAction.and.returnValue(observableOf(null));
+
+      fixture = TestBed.createComponent(SuggestionsPopupComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+
+    it('should show a notification when new publication suggestions are available', () => {
+      expect(suggestionStateService.dispatchRefreshUserSuggestionsAction).toHaveBeenCalled();
+      expect(suggestionStateService.dispatchMarkUserSuggestionsAsVisitedAction).toHaveBeenCalled();
+    });
+
+  });
+});
diff --git a/src/app/notifications/suggestions-popup/suggestions-popup.component.ts b/src/app/notifications/suggestions-popup/suggestions-popup.component.ts
new file mode 100644
index 0000000000..7466c1138c
--- /dev/null
+++ b/src/app/notifications/suggestions-popup/suggestions-popup.component.ts
@@ -0,0 +1,81 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { SuggestionTargetsStateService } from '../suggestion-targets/suggestion-targets.state.service';
+import { SuggestionsService } from '../suggestions.service';
+import { take, takeUntil } from 'rxjs/operators';
+import { isNotEmpty } from '../../shared/empty.util';
+import { combineLatest, Observable, of, Subject } from 'rxjs';
+import { trigger } from '@angular/animations';
+
+import { fromTopEnter } from '../../shared/animations/fromTop';
+import { SuggestionTarget } from '../../core/notifications/models/suggestion-target.model';
+
+/**
+ * Show suggestions on a popover window, used on the homepage
+ */
+@Component({
+  selector: 'ds-suggestions-popup',
+  templateUrl: './suggestions-popup.component.html',
+  styleUrls: ['./suggestions-popup.component.scss'],
+  animations: [
+    trigger('enterLeave', [
+      fromTopEnter
+    ])
+  ],
+})
+export class SuggestionsPopupComponent implements OnInit, OnDestroy {
+
+  labelPrefix = 'notification.';
+
+  subscription;
+
+  suggestionsRD$: Observable;
+
+
+  constructor(
+    private suggestionTargetsStateService: SuggestionTargetsStateService,
+    private suggestionsService: SuggestionsService
+  ) { }
+
+  ngOnInit() {
+    this.initializePopup();
+  }
+
+  public initializePopup() {
+    const notifier = new Subject();
+    this.subscription = combineLatest([
+      this.suggestionTargetsStateService.getCurrentUserSuggestionTargets().pipe(take(2)),
+      this.suggestionTargetsStateService.hasUserVisitedSuggestions()
+    ]).pipe(takeUntil(notifier)).subscribe(([suggestions, visited]) => {
+      this.suggestionTargetsStateService.dispatchRefreshUserSuggestionsAction();
+      if (isNotEmpty(suggestions)) {
+        if (!visited) {
+          this.suggestionsRD$ = of(suggestions);
+          this.suggestionTargetsStateService.dispatchMarkUserSuggestionsAsVisitedAction();
+          notifier.next(null);
+          notifier.complete();
+        }
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  /**
+   * Interpolated params to build the notification suggestions notification.
+   * @param suggestionTarget
+   */
+  public getNotificationSuggestionInterpolation(suggestionTarget: SuggestionTarget): any {
+    return this.suggestionsService.getNotificationSuggestionInterpolation(suggestionTarget);
+  }
+
+  /**
+   * Hide popup from view
+   */
+  public removePopup() {
+    this.suggestionsRD$ = null;
+  }
+}
diff --git a/src/app/notifications/suggestions.service.ts b/src/app/notifications/suggestions.service.ts
new file mode 100644
index 0000000000..a265e8d727
--- /dev/null
+++ b/src/app/notifications/suggestions.service.ts
@@ -0,0 +1,297 @@
+import { Injectable } from '@angular/core';
+
+import { forkJoin, Observable, of } from 'rxjs';
+import { catchError, map, mergeMap, take } from 'rxjs/operators';
+
+import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
+import { RemoteData } from '../core/data/remote-data';
+import { PaginatedList } from '../core/data/paginated-list.model';
+import { hasValue, isNotEmpty } from '../shared/empty.util';
+import { ResearcherProfile } from '../core/profile/model/researcher-profile.model';
+import { getAllSucceededRemoteDataPayload, getFinishedRemoteData, getFirstCompletedRemoteData, getFirstSucceededRemoteDataPayload, getFirstSucceededRemoteListPayload } from '../core/shared/operators';
+import { WorkspaceitemDataService } from '../core/submission/workspaceitem-data.service';
+import { TranslateService } from '@ngx-translate/core';
+import { NoContent } from '../core/shared/NoContent.model';
+import { environment } from '../../environments/environment';
+import { WorkspaceItem } from '../core/submission/models/workspaceitem.model';
+import { FindListOptions } from '../core/data/find-list-options.model';
+import { SuggestionConfig } from '../../config/suggestion-config.interfaces';
+import { ResearcherProfileDataService } from '../core/profile/researcher-profile-data.service';
+import { getSuggestionPageRoute } from '../suggestions-page/suggestions-page-routing-paths';
+import { SuggestionsDataService } from '../core/notifications/suggestions-data.service';
+import { SuggestionTargetDataService } from '../core/notifications/target/suggestion-target-data.service';
+import { SuggestionTarget } from '../core/notifications/models/suggestion-target.model';
+import { Suggestion } from '../core/notifications/models/suggestion.model';
+
+/**
+ * useful for multiple approvals and ignores operation
+ * */
+export interface SuggestionBulkResult {
+  success: number;
+  fails: number;
+}
+
+/**
+ * The service handling all Suggestion Target  requests to the REST service.
+ */
+@Injectable()
+export class SuggestionsService {
+
+  /**
+   * Initialize the service variables.
+   * @param {ResearcherProfileDataService} researcherProfileService
+   * @param {SuggestionTargetDataService} suggestionTargetDataService
+   * @param {SuggestionsDataService} suggestionsDataService
+   * @param translateService
+   */
+  constructor(
+    private researcherProfileService: ResearcherProfileDataService,
+    private suggestionsDataService: SuggestionsDataService,
+    private suggestionTargetDataService: SuggestionTargetDataService,
+    private translateService: TranslateService
+  ) {
+  }
+
+  /**
+   * Return the list of Suggestion Target managing pagination and errors.
+   *
+   * @param source
+   *    The source for which to retrieve targets
+   * @param elementsPerPage
+   *    The number of the target per page
+   * @param currentPage
+   *    The page number to retrieve
+   * @return Observable>
+   *    The list of Suggestion Targets.
+   */
+  public getTargets(source, elementsPerPage, currentPage): Observable> {
+    const sortOptions = new SortOptions('display', SortDirection.ASC);
+
+    const findListOptions: FindListOptions = {
+      elementsPerPage: elementsPerPage,
+      currentPage: currentPage,
+      sort: sortOptions
+    };
+
+    return this.suggestionTargetDataService.getTargets(source, findListOptions).pipe(
+      getFinishedRemoteData(),
+      take(1),
+      map((rd: RemoteData>) => {
+        if (rd.hasSucceeded) {
+          return rd.payload;
+        } else {
+          throw new Error('Can\'t retrieve Suggestion Target from the Search Target REST service');
+        }
+      })
+    );
+  }
+
+  /**
+   * Return the list of review suggestions Target managing pagination and errors.
+   *
+   * @param targetId
+   *    The target id for which to find suggestions.
+   * @param elementsPerPage
+   *    The number of the target per page
+   * @param currentPage
+   *    The page number to retrieve
+   * @param sortOptions
+   *    The sort options
+   * @return Observable>>
+   *    The list of Suggestion.
+   */
+  public getSuggestions(targetId: string, elementsPerPage, currentPage, sortOptions: SortOptions): Observable> {
+    const [source, target] = targetId.split(':');
+
+    const findListOptions: FindListOptions = {
+      elementsPerPage: elementsPerPage,
+      currentPage: currentPage,
+      sort: sortOptions
+    };
+
+    return this.suggestionsDataService.getSuggestionsByTargetAndSource(target, source, findListOptions).pipe(
+      getAllSucceededRemoteDataPayload()
+    );
+  }
+
+  /**
+   * Clear suggestions requests from cache
+   */
+  public clearSuggestionRequests() {
+    this.suggestionsDataService.clearSuggestionRequests();
+  }
+
+  /**
+   * Used to delete Suggestion
+   * @suggestionId
+   */
+  public deleteReviewedSuggestion(suggestionId: string): Observable> {
+    return this.suggestionsDataService.deleteSuggestion(suggestionId).pipe(
+      map((response: RemoteData) => {
+        if (response.isSuccess) {
+          return response;
+        } else {
+          throw new Error('Can\'t delete Suggestion from the Search Target REST service');
+        }
+      }),
+      take(1)
+    );
+  }
+
+  /**
+   * Retrieve suggestion targets for the given user
+   *
+   * @param userUuid
+   *   The EPerson id for which to retrieve suggestion targets
+   */
+  public retrieveCurrentUserSuggestions(userUuid: string): Observable {
+    return this.researcherProfileService.findById(userUuid, true).pipe(
+      getFirstCompletedRemoteData(),
+      mergeMap((profile: RemoteData ) => {
+        if (isNotEmpty(profile) && profile.hasSucceeded && isNotEmpty(profile.payload)) {
+          return this.researcherProfileService.findRelatedItemId(profile.payload).pipe(
+            mergeMap((itemId: string) => {
+              return this.suggestionsDataService.getTargetsByUser(itemId).pipe(
+                getFirstSucceededRemoteListPayload()
+              );
+            })
+          );
+        } else {
+          return of([]);
+        }
+      }),
+      catchError(() => of([]))
+    );
+  }
+
+  /**
+   * Perform the approve and import operation over a single suggestion
+   * @param suggestion target suggestion
+   * @param collectionId the collectionId
+   * @param workspaceitemService injected dependency
+   * @private
+   */
+  public approveAndImport(workspaceitemService: WorkspaceitemDataService,
+                          suggestion: Suggestion,
+                          collectionId: string): Observable {
+
+    const resolvedCollectionId = this.resolveCollectionId(suggestion, collectionId);
+    return workspaceitemService.importExternalSourceEntry(suggestion.externalSourceUri, resolvedCollectionId)
+      .pipe(
+        getFirstSucceededRemoteDataPayload(),
+        catchError(() => of(null))
+      );
+  }
+
+  /**
+   * Perform the delete operation over a single suggestion.
+   * @param suggestionId
+   */
+  public ignoreSuggestion(suggestionId): Observable> {
+    return this.deleteReviewedSuggestion(suggestionId).pipe(
+      catchError(() => of(null))
+    );
+  }
+
+  /**
+   * Perform a bulk approve and import operation.
+   * @param workspaceitemService injected dependency
+   * @param suggestions the array containing the suggestions
+   * @param collectionId the collectionId
+   */
+  public approveAndImportMultiple(workspaceitemService: WorkspaceitemDataService,
+                                  suggestions: Suggestion[],
+                                  collectionId: string): Observable {
+
+    return forkJoin(suggestions.map((suggestion: Suggestion) =>
+      this.approveAndImport(workspaceitemService, suggestion, collectionId)))
+      .pipe(map((results: WorkspaceItem[]) => {
+        return {
+          success: results.filter((result) => result != null).length,
+          fails: results.filter((result) => result == null).length
+        };
+      }), take(1));
+  }
+
+  /**
+   * Perform a bulk ignoreSuggestion operation.
+   * @param suggestions the array containing the suggestions
+   */
+  public ignoreSuggestionMultiple(suggestions: Suggestion[]): Observable {
+    return forkJoin(suggestions.map((suggestion: Suggestion) => this.ignoreSuggestion(suggestion.id)))
+      .pipe(map((results: RemoteData[]) => {
+        return {
+          success: results.filter((result) => result != null).length,
+          fails: results.filter((result) => result == null).length
+        };
+      }), take(1));
+  }
+
+  /**
+   * Get the researcher uuid (for navigation purpose) from a target instance.
+   * TODO Find a better way
+   * @param target
+   * @return the researchUuid
+   */
+  public getTargetUuid(target: SuggestionTarget): string {
+    const tokens = target.id.split(':');
+    return tokens.length === 2 ? tokens[1] : null;
+  }
+
+  /**
+   * Interpolated params to build the notification suggestions notification.
+   * @param suggestionTarget
+   */
+  public getNotificationSuggestionInterpolation(suggestionTarget: SuggestionTarget): any {
+    return {
+      count: suggestionTarget.total,
+      source: this.translateService.instant(this.translateSuggestionSource(suggestionTarget.source)),
+      type:  this.translateService.instant(this.translateSuggestionType(suggestionTarget.source)),
+      suggestionId: suggestionTarget.id,
+      displayName: suggestionTarget.display,
+      url: getSuggestionPageRoute(suggestionTarget.id)
+    };
+  }
+
+  public translateSuggestionType(source: string): string {
+    return 'suggestion.type.' + source;
+  }
+
+  public translateSuggestionSource(source: string): string {
+    return 'suggestion.source.' + source;
+  }
+
+  /**
+   * If the provided collectionId ha no value, tries to resolve it by suggestion source.
+   * @param suggestion
+   * @param collectionId
+   */
+  public resolveCollectionId(suggestion: Suggestion, collectionId): string {
+    if (hasValue(collectionId)) {
+      return collectionId;
+    }
+    return environment.suggestion
+      .find((suggestionConf: SuggestionConfig) => suggestionConf.source === suggestion.source)
+      .collectionId;
+  }
+
+  /**
+   * Return true if all the suggestion are configured with the same fixed collection
+   * in the configuration.
+   * @param suggestions
+   */
+  public isCollectionFixed(suggestions: Suggestion[]): boolean {
+    return this.getFixedCollectionIds(suggestions).length === 1;
+  }
+
+  private getFixedCollectionIds(suggestions: Suggestion[]): string[] {
+    const collectionIds = {};
+    suggestions.forEach((suggestion: Suggestion) => {
+      const conf = environment.suggestion.find((suggestionConf: SuggestionConfig) => suggestionConf.source === suggestion.source);
+      if (hasValue(conf)) {
+        collectionIds[conf.collectionId] = true;
+      }
+    });
+    return Object.keys(collectionIds);
+  }
+}
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index d64f3f07e0..8b9d667e07 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -5,8 +5,8 @@
           {{ 'process.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}
         
       
    
-      
    
-        Refreshing in {{ seconds }}s 
+      
    
+        {{ 'process.detail.refreshing' | translate }} 
       
    
     
    
 
diff --git a/src/app/process-page/detail/process-detail.component.spec.ts b/src/app/process-page/detail/process-detail.component.spec.ts
index 21028b7fe9..f427d3170e 100644
--- a/src/app/process-page/detail/process-detail.component.spec.ts
+++ b/src/app/process-page/detail/process-detail.component.spec.ts
@@ -1,20 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {
-  ComponentFixture,
-  discardPeriodicTasks,
-  fakeAsync,
-  flush,
-  flushMicrotasks,
-  TestBed,
-  tick,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, flushMicrotasks, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
@@ -26,20 +14,19 @@ import { ProcessDataService } from '../../core/data/processes/process-data.servi
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { AuthServiceMock } from '../../shared/mocks/auth.service.mock';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
-import {
-  createFailedRemoteDataObject$,
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$,
-} from '../../shared/remote-data.utils';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
 import { createPaginatedList } from '../../shared/testing/utils.test';
 import { FileSizePipe } from '../../shared/utils/file-size-pipe';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { getProcessListRoute } from '../process-page-routing.paths';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { RouterTestingModule } from '@angular/router/testing';
+import { RouterStub } from '../../shared/testing/router.stub';
+import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { Process } from '../processes/process.model';
-import { ProcessStatus } from '../processes/process-status.model';
 import { ProcessDetailComponent } from './process-detail.component';
 import { ProcessDetailFieldComponent } from './process-detail-field/process-detail-field.component';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 
 describe('ProcessDetailComponent', () => {
   let component: ProcessDetailComponent;
@@ -49,20 +36,35 @@ describe('ProcessDetailComponent', () => {
   let nameService: DSONameService;
   let bitstreamDataService: BitstreamDataService;
   let httpClient: HttpClient;
-  let route: ActivatedRoute;
+  let route: ActivatedRouteStub;
+  let router: RouterStub;
+  let modalService;
+  let notificationsService: NotificationsServiceStub;
 
   let process: Process;
   let fileName: string;
   let files: Bitstream[];
 
-  let processOutput;
-
-  let modalService;
-  let notificationsService;
-
-  let router;
+  let processOutput: string;
 
   function init() {
+    fileName = 'fake-file-name';
+    files = [
+      Object.assign(new Bitstream(), {
+        sizeBytes: 10000,
+        metadata: {
+          'dc.title': [
+            {
+              value: fileName,
+              language: null
+            }
+          ]
+        },
+        _links: {
+          content: { href: 'file-selflink' }
+        }
+      })
+    ];
     processOutput = 'Process Started';
     process = Object.assign(new Process(), {
       processId: 1,
@@ -78,32 +80,18 @@ describe('ProcessDetailComponent', () => {
           value: 'identifier',
         },
       ],
+      files: createSuccessfulRemoteDataObject$(Object.assign(new PaginatedList(), {
+        page: files,
+      })),
       _links: {
         self: {
           href: 'https://rest.api/processes/1',
         },
         output: {
-          href: 'https://rest.api/processes/1/output',
-        },
+          href: 'https://rest.api/processes/1/output'
+        }
       },
     });
-    fileName = 'fake-file-name';
-    files = [
-      Object.assign(new Bitstream(), {
-        sizeBytes: 10000,
-        metadata: {
-          'dc.title': [
-            {
-              value: fileName,
-              language: null,
-            },
-          ],
-        },
-        _links: {
-          content: { href: 'file-selflink' },
-        },
-      }),
-    ];
     const logBitstream = Object.assign(new Bitstream(), {
       id: 'output.log',
       _links: {
@@ -114,6 +102,7 @@ describe('ProcessDetailComponent', () => {
       getFiles: createSuccessfulRemoteDataObject$(createPaginatedList(files)),
       delete: createSuccessfulRemoteDataObject$(null),
       findById: createSuccessfulRemoteDataObject$(process),
+      autoRefreshUntilCompletion: createSuccessfulRemoteDataObject$(process)
     });
     bitstreamDataService = jasmine.createSpyObj('bitstreamDataService', {
       findByHref: createSuccessfulRemoteDataObject$(logBitstream),
@@ -131,28 +120,22 @@ describe('ProcessDetailComponent', () => {
 
     notificationsService = new NotificationsServiceStub();
 
-    router = jasmine.createSpyObj('router', {
-      navigateByUrl:{},
-    });
+    router = new RouterStub();
 
-    route = jasmine.createSpyObj('route', {
-      data: observableOf({ process: createSuccessfulRemoteDataObject(process) }),
-      snapshot: {
-        params: { id: process.processId },
-      },
+    route = new ActivatedRouteStub({
+      id: process.processId,
+    }, {
+      process: createSuccessfulRemoteDataObject$(process),
     });
   }
 
   beforeEach(waitForAsync(() => {
     init();
-    TestBed.configureTestingModule({
+    void TestBed.configureTestingModule({
       declarations: [ProcessDetailComponent, ProcessDetailFieldComponent, VarDirective, FileSizePipe],
-      imports: [TranslateModule.forRoot()],
+      imports: [TranslateModule.forRoot(), RouterTestingModule],
       providers: [
-        {
-          provide: ActivatedRoute,
-          useValue: { data: observableOf({ process: createSuccessfulRemoteDataObject(process) }), snapshot: { params: { id: 1 } } },
-        },
+        { provide: ActivatedRoute, useValue: route },
         { provide: ProcessDataService, useValue: processService },
         { provide: BitstreamDataService, useValue: bitstreamDataService },
         { provide: DSONameService, useValue: nameService },
@@ -257,6 +240,8 @@ describe('ProcessDetailComponent', () => {
   describe('deleteProcess', () => {
     it('should delete the process and navigate back to the overview page on success', () => {
       spyOn(component, 'closeModal');
+      spyOn(router, 'navigateByUrl').and.callThrough();
+
       component.deleteProcess(process);
 
       expect(processService.delete).toHaveBeenCalledWith(process.processId);
@@ -267,6 +252,7 @@ describe('ProcessDetailComponent', () => {
     it('should delete the process and not navigate on error', () => {
       (processService.delete as jasmine.Spy).and.returnValue(createFailedRemoteDataObject$());
       spyOn(component, 'closeModal');
+      spyOn(router, 'navigateByUrl').and.callThrough();
 
       component.deleteProcess(process);
 
@@ -276,98 +262,4 @@ describe('ProcessDetailComponent', () => {
       expect(router.navigateByUrl).not.toHaveBeenCalled();
     });
   });
-
-  describe('refresh counter', () => {
-    const queryRefreshCounter = () => fixture.debugElement.query(By.css('.refresh-counter'));
-
-    describe('if process is completed', () => {
-      beforeEach(() => {
-        process.processStatus = ProcessStatus.COMPLETED;
-        route.data = observableOf({ process: createSuccessfulRemoteDataObject(process) });
-      });
-
-      it('should not show',  () => {
-        spyOn(component, 'startRefreshTimer');
-
-        const refreshCounter = queryRefreshCounter();
-        expect(refreshCounter).toBeNull();
-
-        expect(component.startRefreshTimer).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('if process is not finished', () => {
-      beforeEach(() => {
-        process.processStatus = ProcessStatus.RUNNING;
-        route.data = observableOf({ process: createSuccessfulRemoteDataObject(process) });
-        fixture.detectChanges();
-        component.stopRefreshTimer();
-      });
-
-      it('should call startRefreshTimer',  () => {
-        spyOn(component, 'startRefreshTimer');
-
-        component.ngOnInit();
-        fixture.detectChanges(); // subscribe to process observable with async pipe
-
-        expect(component.startRefreshTimer).toHaveBeenCalled();
-      });
-
-      it('should call refresh method every 5 seconds, until process is completed', fakeAsync(() => {
-        spyOn(component, 'refresh').and.callThrough();
-        spyOn(component, 'stopRefreshTimer').and.callThrough();
-
-        // start off with a running process in order for the refresh counter starts counting up
-        process.processStatus = ProcessStatus.RUNNING;
-        // set findbyId to return a completed process
-        (processService.findById as jasmine.Spy).and.returnValue(observableOf(createSuccessfulRemoteDataObject(process)));
-
-        component.ngOnInit();
-        fixture.detectChanges(); // subscribe to process observable with async pipe
-
-        expect(component.refresh).not.toHaveBeenCalled();
-
-        expect(component.refreshCounter$.value).toBe(0);
-
-        tick(1001); // 1 second + 1 ms by the setTimeout
-        expect(component.refreshCounter$.value).toBe(5); // 5 - 0
-
-        tick(2001); // 2 seconds + 1 ms by the setTimeout
-        expect(component.refreshCounter$.value).toBe(3); // 5 - 2
-
-        tick(2001); // 2 seconds + 1 ms by the setTimeout
-        expect(component.refreshCounter$.value).toBe(1); // 3 - 2
-
-        tick(1001); // 1 second + 1 ms by the setTimeout
-        expect(component.refreshCounter$.value).toBe(0); // 1 - 1
-
-        // set the process to completed right before the counter checks the process
-        process.processStatus = ProcessStatus.COMPLETED;
-        (processService.findById as jasmine.Spy).and.returnValue(observableOf(createSuccessfulRemoteDataObject(process)));
-
-        tick(1000); // 1 second
-
-        expect(component.refresh).toHaveBeenCalledTimes(1);
-        expect(component.stopRefreshTimer).toHaveBeenCalled();
-
-        expect(component.refreshCounter$.value).toBe(0);
-
-        tick(1001); // 1 second + 1 ms by the setTimeout
-        // startRefreshTimer not called again
-        expect(component.refreshCounter$.value).toBe(0);
-
-        discardPeriodicTasks(); // discard any periodic tasks that have not yet executed
-      }));
-
-      it('should show if refreshCounter is different from 0', () => {
-        component.refreshCounter$.next(1);
-        fixture.detectChanges();
-
-        const refreshCounter = queryRefreshCounter();
-        expect(refreshCounter).not.toBeNull();
-      });
-
-    });
-
-  });
 });
diff --git a/src/app/process-page/detail/process-detail.component.ts b/src/app/process-page/detail/process-detail.component.ts
index e07a26efb4..aa0b871c4f 100644
--- a/src/app/process-page/detail/process-detail.component.ts
+++ b/src/app/process-page/detail/process-detail.component.ts
@@ -1,37 +1,9 @@
 import { isPlatformBrowser } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import {
-  Component,
-  Inject,
-  NgZone,
-  OnDestroy,
-  OnInit,
-  PLATFORM_ID,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
-import {
-  NgbModal,
-  NgbModalRef,
-} from '@ng-bootstrap/ng-bootstrap';
-import { TranslateService } from '@ngx-translate/core';
-import {
-  BehaviorSubject,
-  interval,
-  Observable,
-  shareReplay,
-  Subscription,
-} from 'rxjs';
-import {
-  finalize,
-  map,
-  switchMap,
-  take,
-  tap,
-} from 'rxjs/operators';
-
+import { Component, Inject, NgZone, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter, finalize, find, map, startWith, switchMap, take, tap } from 'rxjs/operators';
 import { AuthService } from '../../core/auth/auth.service';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
@@ -41,19 +13,17 @@ import { RemoteData } from '../../core/data/remote-data';
 import { redirectOn4xx } from '../../core/shared/authorized.operators';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import {
-  getFirstCompletedRemoteData,
-  getFirstSucceededRemoteData,
-  getFirstSucceededRemoteDataPayload,
-} from '../../core/shared/operators';
+import { getAllSucceededRemoteDataPayload, getFirstCompletedRemoteData, getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { URLCombiner } from '../../core/url-combiner/url-combiner';
 import { AlertType } from '../../shared/alert/alert-type';
 import { hasValue } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { followLink } from '../../shared/utils/follow-link-config.model';
+import { TranslateService } from '@ngx-translate/core';
+import { PROCESS_PAGE_FOLLOW_LINKS } from '../process-page.resolver';
 import { getProcessListRoute } from '../process-page-routing.paths';
 import { Process } from '../processes/process.model';
 import { ProcessStatus } from '../processes/process-status.model';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'ds-process-detail',
@@ -104,15 +74,17 @@ export class ProcessDetailComponent implements OnInit, OnDestroy {
    */
   dateFormat = 'yyyy-MM-dd HH:mm:ss ZZZZ';
 
-  refreshCounter$ = new BehaviorSubject(0);
+  isRefreshing$: Observable;
+
+  isDeleting: boolean;
+
+  protected autoRefreshingID: string;
 
   /**
    * Reference to NgbModal
    */
   protected modalRef: NgbModalRef;
 
-  private refreshTimerSub?: Subscription;
-
   constructor(
     @Inject(PLATFORM_ID) protected platformId: object,
     protected route: ActivatedRoute,
@@ -134,69 +106,36 @@ export class ProcessDetailComponent implements OnInit, OnDestroy {
    */
   ngOnInit(): void {
     this.processRD$ = this.route.data.pipe(
-      map((data) => {
+      switchMap((data) => {
         if (isPlatformBrowser(this.platformId)) {
-          if (!this.isProcessFinished(data.process.payload)) {
-            this.startRefreshTimer();
-          }
-        }
-
-        return data.process as RemoteData;
-      }),
-      redirectOn4xx(this.router, this.authService),
-      shareReplay({ refCount: false, bufferSize: 1 }),
-    );
-
-    this.filesRD$ = this.processRD$.pipe(
-      getFirstSucceededRemoteDataPayload(),
-      switchMap((process: Process) => this.processService.getFiles(process.processId)),
-    );
-  }
-
-  refresh() {
-    this.processRD$ = this.processService.findById(
-      this.route.snapshot.params.id,
-      false,
-      true,
-      followLink('script'),
-    ).pipe(
-      getFirstSucceededRemoteData(),
-      redirectOn4xx(this.router, this.authService),
-      tap((processRemoteData: RemoteData) => {
-        if (!this.isProcessFinished(processRemoteData.payload)) {
-          this.startRefreshTimer();
-        }
-      }),
-      shareReplay({ refCount: false, bufferSize: 1 }),
-    );
-
-    this.filesRD$ = this.processRD$.pipe(
-      getFirstSucceededRemoteDataPayload(),
-      switchMap((process: Process) => this.processService.getFiles(process.processId)),
-    );
-  }
-
-  startRefreshTimer() {
-    this.refreshCounter$.next(0);
-
-    this.refreshTimerSub = interval(1000).subscribe(
-      value => {
-        if (value > 5) {
-          setTimeout(() => {
-            this.refresh();
-            this.stopRefreshTimer();
-            this.refreshCounter$.next(0);
-          }, 1);
+          this.autoRefreshingID = this.route.snapshot.params.id;
+          return this.processService.autoRefreshUntilCompletion(this.autoRefreshingID, 5000, ...PROCESS_PAGE_FOLLOW_LINKS);
         } else {
-          this.refreshCounter$.next(5 - value);
+          return [data.process as RemoteData];
         }
-      });
+      }),
+      filter(() => !this.isDeleting),
+      redirectOn4xx(this.router, this.authService),
+    );
+
+    this.isRefreshing$ = this.processRD$.pipe(
+      find((processRD: RemoteData) => ProcessDataService.hasCompletedOrFailed(processRD.payload)),
+      map(() => false),
+      startWith(true)
+    );
+
+    this.filesRD$ = this.processRD$.pipe(
+      getAllSucceededRemoteDataPayload(),
+      switchMap((process: Process) => process.files),
+    );
   }
 
-  stopRefreshTimer() {
-    if (hasValue(this.refreshTimerSub)) {
-      this.refreshTimerSub.unsubscribe();
-      this.refreshTimerSub = undefined;
+  /**
+   * Make sure the autoRefreshUntilCompletion is cleaned up properly
+   */
+  ngOnDestroy() {
+    if (hasValue(this.autoRefreshingID)) {
+      this.processService.stopAutoRefreshing(this.autoRefreshingID);
     }
   }
 
@@ -275,15 +214,17 @@ export class ProcessDetailComponent implements OnInit, OnDestroy {
    * @param process
    */
   deleteProcess(process: Process) {
+    this.isDeleting = true;
     this.processService.delete(process.processId).pipe(
       getFirstCompletedRemoteData(),
     ).subscribe((rd) => {
       if (rd.hasSucceeded) {
         this.notificationsService.success(this.translateService.get('process.detail.delete.success'));
         this.closeModal();
-        this.router.navigateByUrl(getProcessListRoute());
+        void this.router.navigateByUrl(getProcessListRoute());
       } else {
         this.notificationsService.error(this.translateService.get('process.detail.delete.error'));
+        this.isDeleting = false;
       }
     });
   }
@@ -302,8 +243,4 @@ export class ProcessDetailComponent implements OnInit, OnDestroy {
   closeModal() {
     this.modalRef.close();
   }
-
-  ngOnDestroy(): void {
-    this.stopRefreshTimer();
-  }
 }
diff --git a/src/app/process-page/form/process-form.component.ts b/src/app/process-page/form/process-form.component.ts
index ef13f84d9f..95c2b90e67 100644
--- a/src/app/process-page/form/process-form.component.ts
+++ b/src/app/process-page/form/process-form.component.ts
@@ -1,26 +1,18 @@
-import {
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
-import {
-  ControlContainer,
-  NgForm,
-} from '@angular/forms';
-import { Router } from '@angular/router';
+import { Component, Input, OnInit } from '@angular/core';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { NavigationExtras, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 
 import { ScriptDataService } from '../../core/data/processes/script-data.service';
+import { ScriptParameter } from '../scripts/script-parameter.model';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { RemoteData } from '../../core/data/remote-data';
-import { RequestService } from '../../core/data/request.service';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { isEmpty } from '../../shared/empty.util';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { getProcessListRoute } from '../process-page-routing.paths';
 import { Process } from '../processes/process.model';
 import { ProcessParameter } from '../processes/process-parameter.model';
 import { Script } from '../scripts/script.model';
-import { ScriptParameter } from '../scripts/script-parameter.model';
 
 /**
  * Component to create a new script
@@ -65,7 +57,6 @@ export class ProcessFormComponent implements OnInit {
     private scriptService: ScriptDataService,
     private notificationsService: NotificationsService,
     private translationService: TranslateService,
-    private requestService: RequestService,
     private router: Router) {
   }
 
@@ -99,7 +90,7 @@ export class ProcessFormComponent implements OnInit {
           const title = this.translationService.get('process.new.notification.success.title');
           const content = this.translationService.get('process.new.notification.success.content');
           this.notificationsService.success(title, content);
-          this.sendBack();
+          this.sendBack(rd.payload);
         } else {
           const title = this.translationService.get('process.new.notification.error.title');
           const content = this.translationService.get('process.new.notification.error.content');
@@ -151,11 +142,17 @@ export class ProcessFormComponent implements OnInit {
     return this.missingParameters.length > 0;
   }
 
-  private sendBack() {
-    this.requestService.removeByHrefSubstring('/processes');
-    /* should subscribe on the previous method to know the action is finished and then navigate,
-    will fix this when the removeByHrefSubstring changes are merged */
-    this.router.navigateByUrl(getProcessListRoute());
+  /**
+   * Redirect the user to the processes overview page with the new process' ID,
+   * so it can be highlighted in the overview table.
+   * @param newProcess The newly created process
+   * @private
+   */
+  private sendBack(newProcess: Process) {
+    const extras: NavigationExtras = {
+      queryParams: { new_process_id: newProcess.processId },
+    };
+    void this.router.navigate([getProcessListRoute()], extras);
   }
 }
 
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index d193ca81f3..c460f5fa95 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -2,60 +2,46 @@
     
    
         
    {{'process.overview.title' | translate}}
    
     
    
-    
    
+    
+
+    
    
+        
+        
+        
+        
+    
    
+
+    
+
    
+
+
+    
    
         
         
         
-
+            class="fas fa-plus pr-2">{{'process.overview.new' | translate}}
     
    
-    
-        
    
-            
-                
-                
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                
-                
-                
-                
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                
-                
-            
    {{'process.overview.table.id' | translate}}{{'process.overview.table.name' | translate}}{{'process.overview.table.user' | translate}}{{'process.overview.table.start' | translate}}{{'process.overview.table.finish' | translate}}{{'process.overview.table.status' | translate}}{{'process.overview.table.actions' | translate}}
    {{process.processId}}{{process.scriptName}}{{ePersonName}}{{process.startTime | date:dateFormat:'UTC'}}{{process.endTime | date:dateFormat:'UTC'}}{{process.processStatus}}
-                        
-                    
    
-        
    
-        
-
    
+
 
 
 
@@ -90,4 +76,3 @@
 
 
 
-
diff --git a/src/app/process-page/overview/process-overview.component.spec.ts b/src/app/process-page/overview/process-overview.component.spec.ts
index 45941f88d4..cf882df52e 100644
--- a/src/app/process-page/overview/process-overview.component.spec.ts
+++ b/src/app/process-page/overview/process-overview.component.spec.ts
@@ -1,93 +1,29 @@
-import { DatePipe } from '@angular/common';
-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 { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule } from '@ngx-translate/core';
-import { BehaviorSubject } from 'rxjs';
-
-import { ProcessDataService } from '../../core/data/processes/process-data.service';
-import { EPersonDataService } from '../../core/eperson/eperson-data.service';
-import { EPerson } from '../../core/eperson/models/eperson.model';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
-import { createPaginatedList } from '../../shared/testing/utils.test';
-import { VarDirective } from '../../shared/utils/var.directive';
-import { Process } from '../processes/process.model';
-import { ProcessStatus } from '../processes/process-status.model';
-import { ProcessBulkDeleteService } from './process-bulk-delete.service';
 import { ProcessOverviewComponent } from './process-overview.component';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NO_ERRORS_SCHEMA, TemplateRef } from '@angular/core';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { By } from '@angular/platform-browser';
+import { BehaviorSubject } from 'rxjs';
+import { ProcessBulkDeleteService } from './process-bulk-delete.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ProcessOverviewService } from './process-overview.service';
 
 describe('ProcessOverviewComponent', () => {
   let component: ProcessOverviewComponent;
   let fixture: ComponentFixture;
 
   let processService: ProcessDataService;
-  let ePersonService: EPersonDataService;
-  let paginationService;
-
-  let processes: Process[];
-  let ePerson: EPerson;
 
   let processBulkDeleteService;
   let modalService;
 
-  const pipe = new DatePipe('en-US');
-
   function init() {
-    processes = [
-      Object.assign(new Process(), {
-        processId: 1,
-        scriptName: 'script-name',
-        startTime: '2020-03-19 00:30:00',
-        endTime: '2020-03-19 23:30:00',
-        processStatus: ProcessStatus.COMPLETED,
-      }),
-      Object.assign(new Process(), {
-        processId: 2,
-        scriptName: 'script-name',
-        startTime: '2020-03-20 00:30:00',
-        endTime: '2020-03-20 23:30:00',
-        processStatus: ProcessStatus.FAILED,
-      }),
-      Object.assign(new Process(), {
-        processId: 3,
-        scriptName: 'another-script-name',
-        startTime: '2020-03-21 00:30:00',
-        endTime: '2020-03-21 23:30:00',
-        processStatus: ProcessStatus.RUNNING,
-      }),
-    ];
-    ePerson = Object.assign(new EPerson(), {
-      metadata: {
-        'eperson.firstname': [
-          {
-            value: 'John',
-            language: null,
-          },
-        ],
-        'eperson.lastname': [
-          {
-            value: 'Doe',
-            language: null,
-          },
-        ],
-      },
+    processService = jasmine.createSpyObj('processOverviewService', {
+      timeStarted: '2024-02-05 16:43:32',
     });
-    processService = jasmine.createSpyObj('processService', {
-      findAll: createSuccessfulRemoteDataObject$(createPaginatedList(processes)),
-    });
-    ePersonService = jasmine.createSpyObj('ePersonService', {
-      findById: createSuccessfulRemoteDataObject$(ePerson),
-    });
-
-    paginationService = new PaginationServiceStub();
 
     processBulkDeleteService = jasmine.createSpyObj('processBulkDeleteService', {
       clearAllProcesses: {},
@@ -101,11 +37,7 @@ describe('ProcessOverviewComponent', () => {
     });
 
     (processBulkDeleteService.isToBeDeleted as jasmine.Spy).and.callFake((id) => {
-      if (id === 2) {
-        return true;
-      } else {
-        return false;
-      }
+      return id === 2;
     });
 
     modalService = jasmine.createSpyObj('modalService', {
@@ -119,9 +51,7 @@ describe('ProcessOverviewComponent', () => {
       declarations: [ProcessOverviewComponent, VarDirective],
       imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
       providers: [
-        { provide: ProcessDataService, useValue: processService },
-        { provide: EPersonDataService, useValue: ePersonService },
-        { provide: PaginationService, useValue: paginationService },
+        { provide: ProcessOverviewService, useValue: processService },
         { provide: ProcessBulkDeleteService, useValue: processBulkDeleteService },
         { provide: NgbModal, useValue: modalService },
       ],
@@ -135,73 +65,6 @@ describe('ProcessOverviewComponent', () => {
     fixture.detectChanges();
   });
 
-  describe('table structure', () => {
-    let rowElements;
-
-    beforeEach(() => {
-      rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
-    });
-
-    it(`should contain 3 rows`, () => {
-      expect(rowElements.length).toEqual(3);
-    });
-
-    it('should display the process IDs in the first column', () => {
-      rowElements.forEach((rowElement, index) => {
-        const el = rowElement.query(By.css('td:nth-child(1)')).nativeElement;
-        expect(el.textContent).toContain(processes[index].processId);
-      });
-    });
-
-    it('should display the script names in the second column', () => {
-      rowElements.forEach((rowElement, index) => {
-        const el = rowElement.query(By.css('td:nth-child(2)')).nativeElement;
-        expect(el.textContent).toContain(processes[index].scriptName);
-      });
-    });
-
-    it('should display the eperson\'s name in the third column', () => {
-      rowElements.forEach((rowElement, index) => {
-        const el = rowElement.query(By.css('td:nth-child(3)')).nativeElement;
-        expect(el.textContent).toContain(ePerson.name);
-      });
-    });
-
-    it('should display the start time in the fourth column', () => {
-      rowElements.forEach((rowElement, index) => {
-        const el = rowElement.query(By.css('td:nth-child(4)')).nativeElement;
-        expect(el.textContent).toContain(pipe.transform(processes[index].startTime, component.dateFormat, 'UTC'));
-      });
-    });
-
-    it('should display the end time in the fifth column', () => {
-      rowElements.forEach((rowElement, index) => {
-        const el = rowElement.query(By.css('td:nth-child(5)')).nativeElement;
-        expect(el.textContent).toContain(pipe.transform(processes[index].endTime, component.dateFormat, 'UTC'));
-      });
-    });
-
-    it('should display the status in the sixth column', () => {
-      rowElements.forEach((rowElement, index) => {
-        const el = rowElement.query(By.css('td:nth-child(6)')).nativeElement;
-        expect(el.textContent).toContain(processes[index].processStatus);
-      });
-    });
-    it('should display a delete button in the seventh column', () => {
-      rowElements.forEach((rowElement, index) => {
-        const el = rowElement.query(By.css('td:nth-child(7)'));
-        expect(el.nativeElement.innerHTML).toContain('fas fa-trash');
-
-        el.query(By.css('button')).triggerEventHandler('click', null);
-        expect(processBulkDeleteService.toggleDelete).toHaveBeenCalledWith(processes[index].processId);
-      });
-    });
-    it('should indicate a row that has been selected for deletion', () => {
-      const deleteRow = fixture.debugElement.query(By.css('.table-danger'));
-      expect(deleteRow.nativeElement.innerHTML).toContain('/processes/' + processes[1].processId);
-    });
-  });
-
   describe('overview buttons', () => {
     it('should show a button to clear selected processes when there are selected processes', () => {
       const clearButton = fixture.debugElement.query(By.css('.btn-primary'));
@@ -237,7 +100,7 @@ describe('ProcessOverviewComponent', () => {
 
   describe('openDeleteModal', () => {
     it('should open the modal', () => {
-      component.openDeleteModal({});
+      component.openDeleteModal({} as TemplateRef);
       expect(modalService.open).toHaveBeenCalledWith({});
     });
   });
@@ -245,13 +108,11 @@ describe('ProcessOverviewComponent', () => {
   describe('deleteSelected', () => {
     it('should call the deleteSelectedProcesses method on the processBulkDeleteService and close the modal when processing is done', () => {
       spyOn(component, 'closeModal');
-      spyOn(component, 'setProcesses');
 
       component.deleteSelected();
 
       expect(processBulkDeleteService.deleteSelectedProcesses).toHaveBeenCalled();
       expect(component.closeModal).toHaveBeenCalled();
-      expect(component.setProcesses).toHaveBeenCalled();
     });
   });
 });
diff --git a/src/app/process-page/overview/process-overview.component.ts b/src/app/process-page/overview/process-overview.component.ts
index 4fb9cdf8b0..7699f7e9bc 100644
--- a/src/app/process-page/overview/process-overview.component.ts
+++ b/src/app/process-page/overview/process-overview.component.ts
@@ -1,31 +1,10 @@
-import {
-  Component,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import {
-  Observable,
-  Subscription,
-} from 'rxjs';
-import {
-  map,
-  switchMap,
-} from 'rxjs/operators';
-
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
-import { FindListOptions } from '../../core/data/find-list-options.model';
-import { PaginatedList } from '../../core/data/paginated-list.model';
-import { ProcessDataService } from '../../core/data/processes/process-data.service';
-import { RemoteData } from '../../core/data/remote-data';
-import { EPersonDataService } from '../../core/eperson/eperson-data.service';
-import { EPerson } from '../../core/eperson/models/eperson.model';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
-import { hasValue } from '../../shared/empty.util';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { Process } from '../processes/process.model';
+import { Component, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { ProcessBulkDeleteService } from './process-bulk-delete.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { hasValue } from '../../shared/empty.util';
+import { ProcessOverviewService, ProcessSortField } from './process-overview.service';
+import { ProcessStatus } from '../processes/process-status.model';
 
 @Component({
   selector: 'ds-process-overview',
@@ -36,72 +15,25 @@ import { ProcessBulkDeleteService } from './process-bulk-delete.service';
  */
 export class ProcessOverviewComponent implements OnInit, OnDestroy {
 
-  /**
-   * List of all processes
-   */
-  processesRD$: Observable>>;
+  // Enums are redeclared here so they can be used in the template
+  protected readonly ProcessStatus = ProcessStatus;
+  protected readonly ProcessSortField = ProcessSortField;
 
-  /**
-   * The current pagination configuration for the page used by the FindAll method
-   */
-  config: FindListOptions = Object.assign(new FindListOptions(), {
-    elementsPerPage: 20,
-  });
-
-  /**
-   * The current pagination configuration for the page
-   */
-  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: 'po',
-    pageSize: 20,
-  });
-
-  /**
-   * Date format to use for start and end time of processes
-   */
-  dateFormat = 'yyyy-MM-dd HH:mm:ss';
-
-  processesToDelete: string[] = [];
   private modalRef: any;
 
   isProcessingSub: Subscription;
 
-  constructor(protected processService: ProcessDataService,
-              protected paginationService: PaginationService,
-              protected ePersonService: EPersonDataService,
+  constructor(protected processOverviewService: ProcessOverviewService,
               protected modalService: NgbModal,
               public processBulkDeleteService: ProcessBulkDeleteService,
-              protected dsoNameService: DSONameService,
   ) {
   }
 
   ngOnInit(): void {
-    this.setProcesses();
     this.processBulkDeleteService.clearAllProcesses();
   }
 
-  /**
-   * Send a request to fetch all processes for the current page
-   */
-  setProcesses() {
-    this.processesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
-      switchMap((config) => this.processService.findAll(config, true, false)),
-    );
-  }
-
-  /**
-   * Get the name of an EPerson by ID
-   * @param id  ID of the EPerson
-   */
-  getEpersonName(id: string): Observable {
-    return this.ePersonService.findById(id).pipe(
-      getFirstSucceededRemoteDataPayload(),
-      map((eperson: EPerson) => this.dsoNameService.getName(eperson)),
-    );
-  }
-
   ngOnDestroy(): void {
-    this.paginationService.clearPagination(this.pageConfig.id);
     if (hasValue(this.isProcessingSub)) {
       this.isProcessingSub.unsubscribe();
     }
@@ -111,7 +43,7 @@ export class ProcessOverviewComponent implements OnInit, OnDestroy {
    * Open a given modal.
    * @param content   - the modal content.
    */
-  openDeleteModal(content) {
+  openDeleteModal(content: TemplateRef) {
     this.modalRef = this.modalService.open(content);
   }
 
@@ -137,7 +69,6 @@ export class ProcessOverviewComponent implements OnInit, OnDestroy {
       .subscribe((isProcessing) => {
         if (!isProcessing) {
           this.closeModal();
-          this.setProcesses();
         }
       });
   }
diff --git a/src/app/process-page/overview/process-overview.service.ts b/src/app/process-page/overview/process-overview.service.ts
new file mode 100644
index 0000000000..47dc899288
--- /dev/null
+++ b/src/app/process-page/overview/process-overview.service.ts
@@ -0,0 +1,97 @@
+import { Injectable } from '@angular/core';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { FindListOptions } from '../../core/data/find-list-options.model';
+import { Observable } from 'rxjs';
+import { RemoteData } from '../../core/data/remote-data';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { Process } from '../processes/process.model';
+import { RequestParam } from '../../core/cache/models/request-param.model';
+import { ProcessStatus } from '../processes/process-status.model';
+import { DatePipe } from '@angular/common';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
+import { hasValue } from '../../shared/empty.util';
+
+/**
+ * The sortable fields for processes
+ * See [the endpoint documentation]{@link https://github.com/DSpace/RestContract/blob/main/processes-endpoint.md#search-processes-by-property}
+ * for details.
+ */
+export enum ProcessSortField {
+  creationTime = 'creationTime',
+  startTime = 'startTime',
+  endTime = 'endTime',
+}
+
+/**
+ * Service to manage the processes displayed in the
+ * {@Link ProcessOverviewComponent} and the {@Link ProcessOverviewTableComponent}
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class ProcessOverviewService {
+
+  constructor(protected processDataService: ProcessDataService) {
+  }
+
+  /**
+   * Date format to use for start and end time of processes
+   */
+  dateFormat = 'yyyy-MM-dd HH:mm:ss';
+
+  datePipe = new DatePipe('en-US');
+
+
+  timeCreated = (process: Process) => this.datePipe.transform(process.creationTime, this.dateFormat, 'UTC');
+  timeCompleted = (process: Process) => this.datePipe.transform(process.endTime, this.dateFormat, 'UTC');
+  timeStarted = (process: Process) => this.datePipe.transform(process.startTime, this.dateFormat, 'UTC');
+
+  /**
+   * Retrieve processes by their status
+   * @param processStatus              The status for which to retrieve processes
+   * @param findListOptions            The FindListOptions object
+   * @param autoRefreshingIntervalInMs Optional: The interval by which to automatically refresh the retrieved processes.
+   * Leave empty or set to null to only retrieve the processes once.
+   */
+  getProcessesByProcessStatus(processStatus: ProcessStatus, findListOptions?: FindListOptions, autoRefreshingIntervalInMs: number = null): Observable>> {
+    let requestParam = new RequestParam('processStatus', processStatus);
+    let options: FindListOptions = Object.assign(new FindListOptions(), {
+      searchParams: [requestParam],
+      elementsPerPage: 5,
+    }, findListOptions);
+
+    if (hasValue(autoRefreshingIntervalInMs) && autoRefreshingIntervalInMs > 0) {
+      this.processDataService.stopAutoRefreshing(processStatus);
+      return this.processDataService.autoRefreshingSearchBy(processStatus, 'byProperty', options, autoRefreshingIntervalInMs);
+    } else {
+      return this.processDataService.searchBy('byProperty', options);
+    }
+  }
+
+  /**
+   * Stop auto-refreshing the process with the given status
+   * @param processStatus the processStatus of the request to stop automatically refreshing
+   */
+  stopAutoRefreshing(processStatus: ProcessStatus) {
+    this.processDataService.stopAutoRefreshing(processStatus);
+  }
+
+  /**
+   * Map the provided paginationOptions to FindListOptions
+   * @param paginationOptions the PaginationComponentOptions to map
+   * @param sortField the field on which the processes are sorted
+   */
+  getFindListOptions(paginationOptions: PaginationComponentOptions, sortField: ProcessSortField): FindListOptions {
+    let sortOptions = new SortOptions(sortField, SortDirection.DESC);
+    return Object.assign(
+      new FindListOptions(),
+      {
+        currentPage: paginationOptions.currentPage,
+        elementsPerPage: paginationOptions.pageSize,
+        sort: sortOptions,
+      }
+    );
+  }
+
+}
diff --git a/src/app/process-page/overview/table/process-overview-table.component.html b/src/app/process-page/overview/table/process-overview-table.component.html
new file mode 100644
index 0000000000..c59c624b0f
--- /dev/null
+++ b/src/app/process-page/overview/table/process-overview-table.component.html
@@ -0,0 +1,66 @@
+
    
+  
    
+    
    
+      {{'process.overview.table.' + processStatus.toLowerCase() + '.title' | translate}}
+      
+        {{processesRD?.payload?.totalElements}}
+      
+      
+        
+      
+    
    
+  
    
+
+  
    
+
+    
+      
+
+      
+
+        
    
+          
+            
+            
+              
+              
+              
+              
+              
+            
+            
+
+            
+            
+              
+              
+              
+              
+              
+            
+            
+          
    {{'process.overview.table.id' | translate}}{{'process.overview.table.name' | translate}}{{'process.overview.table.user' | translate}}{{'process.overview.table.' + processStatus.toLowerCase() + '.info' | translate}}{{'process.overview.table.actions' | translate}}
    {{tableEntry.process.processId}}{{tableEntry.process.scriptName}}{{tableEntry.user}}{{tableEntry.info}}
+                
+              
    
+        
    
+
+          
+
+      
    
+        
    {{'process.overview.table.empty' | translate}}
    
+      
    
+        
+
+  
    
+
    
diff --git a/src/app/process-page/overview/table/process-overview-table.component.scss b/src/app/process-page/overview/table/process-overview-table.component.scss
new file mode 100644
index 0000000000..a9567be4c7
--- /dev/null
+++ b/src/app/process-page/overview/table/process-overview-table.component.scss
@@ -0,0 +1,28 @@
+.toggle-icon {
+  font-size: calc(var(--bs-small-font-size) * 0.6);
+}
+
+.badge-nb-processes {
+  font-size: var(--ds-process-overview-table-nb-processes-badge-size);
+  vertical-align: middle;
+}
+
+.id-header {
+  width: var(--ds-process-overview-table-id-column-width);
+}
+
+.name-header {
+  width: var(--ds-process-overview-table-name-column-width);
+}
+
+.user-header {
+  width: var(--ds-process-overview-table-user-column-width);
+}
+
+.info-header {
+  width: var(--ds-process-overview-table-info-column-width);
+}
+
+.actions-header {
+  width: var(--ds-process-overview-table-actions-column-width);
+}
diff --git a/src/app/process-page/overview/table/process-overview-table.component.spec.ts b/src/app/process-page/overview/table/process-overview-table.component.spec.ts
new file mode 100644
index 0000000000..91dfb1ec35
--- /dev/null
+++ b/src/app/process-page/overview/table/process-overview-table.component.spec.ts
@@ -0,0 +1,204 @@
+import { ProcessOverviewTableComponent } from './process-overview-table.component';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ProcessDataService } from '../../../core/data/processes/process-data.service';
+import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
+import { Process } from '../../processes/process.model';
+import { EPerson } from '../../../core/eperson/models/eperson.model';
+import { ProcessBulkDeleteService } from '../process-bulk-delete.service';
+import { ProcessStatus } from '../../processes/process-status.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { createPaginatedList } from '../../../shared/testing/utils.test';
+import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
+import { BehaviorSubject } from 'rxjs';
+import { NgbCollapse, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { VarDirective } from '../../../shared/utils/var.directive';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { PaginationService } from '../../../core/pagination/pagination.service';
+import { By } from '@angular/platform-browser';
+import { AuthService } from '../../../core/auth/auth.service';
+import { AuthServiceMock } from '../../../shared/mocks/auth.service.mock';
+import { RouteService } from '../../../core/services/route.service';
+import { routeServiceStub } from '../../../shared/testing/route-service.stub';
+import { ProcessOverviewService } from '../process-overview.service';
+import { take } from 'rxjs/operators';
+
+describe('ProcessOverviewTableComponent', () => {
+  let component: ProcessOverviewTableComponent;
+  let fixture: ComponentFixture;
+
+  let processOverviewService: ProcessOverviewService;
+  let processService: ProcessDataService;
+  let ePersonService: EPersonDataService;
+  let paginationService; // : PaginationService; Not typed as the stub does not fully implement PaginationService
+  let processBulkDeleteService: ProcessBulkDeleteService;
+  let modalService: NgbModal;
+  let authService; // : AuthService; Not typed as the mock does not fully implement AuthService
+  let routeService: RouteService;
+
+  let processes: Process[];
+  let ePerson: EPerson;
+
+  function init() {
+    processes = [
+      Object.assign(new Process(), {
+        processId: 1,
+        scriptName: 'script-a',
+        startTime: '2020-03-19 00:30:00',
+        endTime: '2020-03-19 23:30:00',
+        processStatus: ProcessStatus.COMPLETED
+      }),
+      Object.assign(new Process(), {
+        processId: 2,
+        scriptName: 'script-b',
+        startTime: '2020-03-20 00:30:00',
+        endTime: '2020-03-20 23:30:00',
+        processStatus: ProcessStatus.FAILED
+      }),
+      Object.assign(new Process(), {
+        processId: 3,
+        scriptName: 'script-c',
+        startTime: '2020-03-21 00:30:00',
+        endTime: '2020-03-21 23:30:00',
+        processStatus: ProcessStatus.RUNNING
+      }),
+    ];
+    ePerson = Object.assign(new EPerson(), {
+      metadata: {
+        'eperson.firstname': [
+          {
+            value: 'John',
+            language: null
+          }
+        ],
+        'eperson.lastname': [
+          {
+            value: 'Doe',
+            language: null
+          }
+        ]
+      }
+    });
+    processOverviewService = jasmine.createSpyObj('processOverviewService', {
+      getFindListOptions: {
+        currentPage: 1,
+        elementsPerPage: 5,
+        sort: 'creationTime'
+      },
+      getProcessesByProcessStatus: createSuccessfulRemoteDataObject$(createPaginatedList(processes)).pipe(take(1))
+    });
+    processService = jasmine.createSpyObj('processService', {
+      searchBy: createSuccessfulRemoteDataObject$(createPaginatedList(processes)).pipe(take(1))
+    });
+    ePersonService = jasmine.createSpyObj('ePersonService', {
+      findById: createSuccessfulRemoteDataObject$(ePerson)
+    });
+
+    paginationService = new PaginationServiceStub();
+
+    processBulkDeleteService = jasmine.createSpyObj('processBulkDeleteService', {
+      clearAllProcesses: {},
+      deleteSelectedProcesses: {},
+      isProcessing$: new BehaviorSubject(false),
+      hasSelected: true,
+      isToBeDeleted: true,
+      toggleDelete: {},
+      getAmountOfSelectedProcesses: 5
+
+    });
+
+    (processBulkDeleteService.isToBeDeleted as jasmine.Spy).and.callFake((id) => {
+      return id === 2;
+    });
+
+    modalService = jasmine.createSpyObj('modalService', {
+      open: {}
+    });
+
+    authService = new AuthServiceMock();
+    routeService = routeServiceStub;
+  }
+
+  beforeEach(waitForAsync(() => {
+    init();
+
+    void TestBed.configureTestingModule({
+      declarations: [ProcessOverviewTableComponent, VarDirective, NgbCollapse],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
+      providers: [
+        { provide: ProcessOverviewService, useValue: processOverviewService },
+        { provide: ProcessDataService, useValue: processService },
+        { provide: EPersonDataService, useValue: ePersonService },
+        { provide: PaginationService, useValue: paginationService },
+        { provide: ProcessBulkDeleteService, useValue: processBulkDeleteService },
+        { provide: NgbModal, useValue: modalService },
+        { provide: AuthService, useValue: authService },
+        { provide: RouteService, useValue: routeService },
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessOverviewTableComponent);
+    component = fixture.componentInstance;
+    component.getInfoValueMethod = (_process: Process) => 'process info';
+    component.processStatus = ProcessStatus.COMPLETED;
+    fixture.detectChanges();
+  });
+
+  describe('table structure', () => {
+    let rowElements;
+
+    beforeEach(() => {
+      rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+    });
+
+    it('should contain 3 rows', () => {
+      expect(rowElements.length).toEqual(3);
+    });
+
+    it('should display the process\' ID in the first column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(1)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].processId);
+      });
+    });
+
+    it('should display the scripts name in the second column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(2)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].scriptName);
+      });
+    });
+
+    it('should display the eperson\'s name in the third column', () => {
+      rowElements.forEach((rowElement, _index) => {
+        const el = rowElement.query(By.css('td:nth-child(3)')).nativeElement;
+        expect(el.textContent).toContain(ePerson.name);
+      });
+    });
+
+    it('should display the requested info in the fourth column', () => {
+      rowElements.forEach((rowElement, _index) => {
+        const el = rowElement.query(By.css('td:nth-child(4)')).nativeElement;
+        expect(el.textContent).toContain('process info');
+      });
+    });
+
+    it('should display a delete button in the fifth column', () => {
+      rowElements.forEach((rowElement, index) => {
+       const el = rowElement.query(By.css('td:nth-child(5)'));
+       expect(el.nativeElement.innerHTML).toContain('fas fa-trash');
+
+       el.query(By.css('button')).triggerEventHandler('click', null);
+       expect(processBulkDeleteService.toggleDelete).toHaveBeenCalledWith(processes[index].processId);
+      });
+    });
+
+    it('should indicate a row that has been selected for deletion', () => {
+      const deleteRow = fixture.debugElement.query(By.css('.table-danger'));
+      expect(deleteRow.nativeElement.innerHTML).toContain('/processes/' + processes[1].processId);
+    });
+
+  });
+});
diff --git a/src/app/process-page/overview/table/process-overview-table.component.ts b/src/app/process-page/overview/table/process-overview-table.component.ts
new file mode 100644
index 0000000000..a060654ca9
--- /dev/null
+++ b/src/app/process-page/overview/table/process-overview-table.component.ts
@@ -0,0 +1,244 @@
+import { Component, Inject, Input, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { ProcessStatus } from '../../processes/process-status.model';
+import { BehaviorSubject, from as observableFrom, mergeMap, Observable, Subscription } from 'rxjs';
+import { RemoteData } from '../../../core/data/remote-data';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { Process } from '../../processes/process.model';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import { ProcessOverviewService, ProcessSortField } from '../process-overview.service';
+import { ProcessBulkDeleteService } from '../process-bulk-delete.service';
+import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { getAllCompletedRemoteData, getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
+import { filter, map, switchMap, take, toArray } from 'rxjs/operators';
+import { EPerson } from '../../../core/eperson/models/eperson.model';
+import { PaginationService } from 'src/app/core/pagination/pagination.service';
+import { FindListOptions } from '../../../core/data/find-list-options.model';
+import { redirectOn4xx } from '../../../core/shared/authorized.operators';
+import { Router } from '@angular/router';
+import { AuthService } from '../../../core/auth/auth.service';
+import { isPlatformBrowser } from '@angular/common';
+import { RouteService } from '../../../core/services/route.service';
+import { hasValue } from '../../../shared/empty.util';
+
+const NEW_PROCESS_PARAM = 'new_process_id';
+
+/**
+ * An interface to store a process and extra information related to the process
+ * that is displayed in the overview table.
+ */
+export interface ProcessOverviewTableEntry {
+  process: Process,
+  user: string,
+  info: string,
+}
+
+@Component({
+  selector: 'ds-process-overview-table',
+  styleUrls: ['./process-overview-table.component.scss'],
+  templateUrl: './process-overview-table.component.html'
+})
+export class ProcessOverviewTableComponent implements OnInit, OnDestroy {
+
+  /**
+   * The status of the processes this sections should show
+   */
+  @Input() processStatus: ProcessStatus;
+
+  /**
+   * The field on which the processes in this table are sorted
+   * {@link ProcessSortField.creationTime} by default as every single process has a creation time,
+   * but not every process has a start or end time
+   */
+  @Input() sortField: ProcessSortField = ProcessSortField.creationTime;
+
+  /**
+   * Whether to use auto refresh for the processes shown in this table.
+   */
+  @Input() useAutoRefreshingSearchBy = false;
+
+  /**
+   * The interval by which to refresh if autoRefreshing is enabled
+   */
+  @Input() autoRefreshInterval = 5000;
+
+  /**
+   * The function used to retrieve the value that will be shown in the 'info' column of the table.
+   * {@Link ProcessOverviewService} contains some predefined functions.
+   */
+  @Input() getInfoValueMethod: (process: Process) => string;
+
+  /**
+   * List of processes and their info to be shown in this table
+   */
+  processesRD$: BehaviorSubject>>;
+
+  /**
+   * The pagination ID for this overview section
+   */
+  paginationId: string;
+
+  /**
+   * The current pagination options for the overview section
+   */
+  paginationOptions$: Observable;
+
+  /**
+   * Whether the table is collapsed
+   */
+  isCollapsed = false;
+
+  /**
+   * The id of the process to highlight
+   */
+  newProcessId: string;
+
+  /**
+   * List of subscriptions
+   */
+  subs: Subscription[] = [];
+
+  constructor(protected processOverviewService: ProcessOverviewService,
+              protected processBulkDeleteService: ProcessBulkDeleteService,
+              protected ePersonDataService: EPersonDataService,
+              protected dsoNameService: DSONameService,
+              protected paginationService: PaginationService,
+              protected routeService: RouteService,
+              protected router: Router,
+              protected auth: AuthService,
+              @Inject(PLATFORM_ID) protected platformId: object,
+              ) {
+  }
+
+  ngOnInit() {
+    // Only auto refresh on browsers
+    if (!isPlatformBrowser(this.platformId)) {
+      this.useAutoRefreshingSearchBy = false;
+    }
+
+    this.routeService.getQueryParameterValue(NEW_PROCESS_PARAM).pipe(take(1)).subscribe((id) => {
+      this.newProcessId = id;
+    });
+
+    // Creates an ID from the first 2 characters of the process status.
+    // Should two process status values ever start with the same substring,
+    // increase the number of characters until the ids are distinct.
+    this.paginationId = this.processStatus.toLowerCase().substring(0,2);
+
+    let defaultPaginationOptions = Object.assign(new PaginationComponentOptions(), {
+      id: this.paginationId,
+      pageSize: 5,
+    });
+
+    // Get the current pagination from the route
+    this.paginationOptions$ = this.paginationService.getCurrentPagination(this.paginationId, defaultPaginationOptions);
+
+    this.processesRD$ = new BehaviorSubject(undefined);
+
+    // Once we have the pagination, retrieve the processes matching the process type and the pagination
+    //
+    // Reasoning why this monstrosity is the way it is:
+    // To avoid having to recalculate the names of the submitters every time the page reloads, these have to be
+    // retrieved beforehand and stored with the process. This is where the ProcessOverviewTableEntry interface comes in.
+    // By storing the process together with the submitters name and the additional information to be shown in the table,
+    // the template can be as dumb as possible. As the retrieval of the name also is done through an observable, this
+    // complicates the construction of the data a bit though.
+    // The reason why we store these as RemoteData> and not simply as
+    // ProcessOverviewTableEntry[] is as follows:
+    // When storing the PaginatedList and ProcessOverviewTableEntry[] separately, there is a small delay
+    // between the update of the paginatedList and the entryArray. This results in the processOverviewPage showing
+    // no processes for a split second every time the processes are updated which in turn causes the different
+    // sections of the page to jump around. By combining these and causing the page to update only once this is avoided.
+    this.subs.push(this.paginationOptions$
+      .pipe(
+        // Map the paginationOptions to findListOptions
+        map((paginationOptions: PaginationComponentOptions) =>
+          this.processOverviewService.getFindListOptions(paginationOptions, this.sortField)),
+        // Use the findListOptions to retrieve the relevant processes every interval
+        switchMap((findListOptions: FindListOptions) =>
+          this.processOverviewService.getProcessesByProcessStatus(
+            this.processStatus, findListOptions, this.useAutoRefreshingSearchBy ? this.autoRefreshInterval : null)
+        ),
+        // Redirect the user when he is logged out
+        redirectOn4xx(this.router, this.auth),
+        getAllCompletedRemoteData(),
+        // Map RemoteData> to RemoteData>
+        switchMap((processesRD: RemoteData>) => {
+          // Create observable emitting all processes one by one
+          return  observableFrom(processesRD.payload.page).pipe(
+            // Map every Process to ProcessOverviewTableEntry
+            mergeMap((process: Process) => {
+              return this.getEPersonName(process.userId).pipe(
+                map((name) => {
+                  return {
+                    process: process,
+                    user: name,
+                    info: this.getInfoValueMethod(process),
+                  };
+                }),
+              );
+            }),
+            // Collect processOverviewTableEntries into array
+            toArray(),
+            // Create RemoteData>
+            map((entries: ProcessOverviewTableEntry[]) => {
+              const entriesPL: PaginatedList =
+                Object.assign(new PaginatedList(), processesRD.payload, { page: entries });
+              const entriesRD: RemoteData> =
+                Object.assign({}, processesRD, { payload: entriesPL });
+              return entriesRD;
+            }),
+          );
+        }),
+
+      ).subscribe((next: RemoteData>) => {
+        this.processesRD$.next(next);
+      }));
+
+    // Collapse this section when the number of processes is zero the first time processes are retrieved
+    this.subs.push(this.processesRD$.pipe(
+      filter((processListRd: RemoteData>) => hasValue(processListRd)),
+      take(1),
+    ).subscribe(
+      (processesRD: RemoteData>) => {
+        if (!(processesRD.payload.totalElements > 0)) {
+          this.isCollapsed = true;
+        }
+      }
+    ));
+
+  }
+
+  /**
+   * Get the name of an EPerson by ID
+   * @param id  ID of the EPerson
+   */
+  getEPersonName(id: string): Observable {
+    return this.ePersonDataService.findById(id).pipe(
+      getFirstSucceededRemoteDataPayload(),
+      map((eperson: EPerson) => this.dsoNameService.getName(eperson)),
+    );
+  }
+
+  /**
+   * Get the css class for a row depending on the state of the process
+   * @param process
+   */
+  getRowClass(process: Process): string {
+    if (this.processBulkDeleteService.isToBeDeleted(process.processId)) {
+      return 'table-danger';
+    } else if (this.newProcessId === process.processId) {
+      return 'table-info';
+    } else {
+      return '';
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subs
+      .filter((sub) => hasValue(sub))
+      .forEach((sub) => sub.unsubscribe());
+    this.processOverviewService.stopAutoRefreshing(this.processStatus);
+  }
+
+  }
diff --git a/src/app/process-page/process-breadcrumb.resolver.ts b/src/app/process-page/process-breadcrumb.resolver.ts
index b226d867da..0058c96b50 100644
--- a/src/app/process-page/process-breadcrumb.resolver.ts
+++ b/src/app/process-page/process-breadcrumb.resolver.ts
@@ -1,20 +1,14 @@
 import { Injectable } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  Resolve,
-  RouterStateSnapshot,
-} from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { BreadcrumbConfig } from '../breadcrumbs/breadcrumb/breadcrumb-config.model';
+import { getFirstCompletedRemoteData } from '../core/shared/operators';
 import { ProcessDataService } from '../core/data/processes/process-data.service';
-import {
-  getFirstSucceededRemoteData,
-  getRemoteDataPayload,
-} from '../core/shared/operators';
 import { followLink } from '../shared/utils/follow-link-config.model';
 import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+import { RemoteData } from '../core/data/remote-data';
 import { Process } from './processes/process.model';
 
 /**
@@ -36,13 +30,12 @@ export class ProcessBreadcrumbResolver implements Resolve {
+      getFirstCompletedRemoteData(),
+      map((object: RemoteData) => {
         const fullPath = state.url;
         const url = fullPath.substr(0, fullPath.indexOf(id)) + id;
-        return { provider: this.breadcrumbService, key: object, url: url };
-      }),
+        return { provider: this.breadcrumbService, key: object.payload, url: url };
+      })
     );
   }
 }
diff --git a/src/app/process-page/process-breadcrumbs.service.ts b/src/app/process-page/process-breadcrumbs.service.ts
index 5811dbae3d..2dd44cb49f 100644
--- a/src/app/process-page/process-breadcrumbs.service.ts
+++ b/src/app/process-page/process-breadcrumbs.service.ts
@@ -1,12 +1,10 @@
 import { Injectable } from '@angular/core';
-import {
-  Observable,
-  of as observableOf,
-} from 'rxjs';
+import { Observable, of as observableOf } from 'rxjs';
 
 import { Breadcrumb } from '../breadcrumbs/breadcrumb/breadcrumb.model';
 import { BreadcrumbsProviderService } from '../core/breadcrumbs/breadcrumbsProviderService';
 import { Process } from './processes/process.model';
+import { hasValue } from '../shared/empty.util';
 
 /**
  * Service to calculate process breadcrumbs for a single part of the route
@@ -20,6 +18,10 @@ export class ProcessBreadcrumbsService implements BreadcrumbsProviderService {
-    return observableOf([new Breadcrumb(key.processId + ' - ' + key.scriptName, url)]);
+    if (hasValue(key)) {
+      return observableOf([new Breadcrumb(key.processId + ' - ' + key.scriptName, url)]);
+    } else {
+      return observableOf([]);
+    }
   }
 }
diff --git a/src/app/process-page/process-page-shared.module.ts b/src/app/process-page/process-page-shared.module.ts
index 735438f542..e8859f5f9a 100644
--- a/src/app/process-page/process-page-shared.module.ts
+++ b/src/app/process-page/process-page-shared.module.ts
@@ -17,10 +17,14 @@ import { NewProcessComponent } from './new/new-process.component';
 import { ProcessOverviewComponent } from './overview/process-overview.component';
 import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
 import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+import { ProcessOverviewTableComponent } from './overview/table/process-overview-table.component';
+import { DatePipe } from '@angular/common';
 
 @NgModule({
   imports: [
     SharedModule,
+    NgbCollapseModule,
   ],
   declarations: [
     NewProcessComponent,
@@ -34,6 +38,7 @@ import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
     BooleanValueInputComponent,
     DateValueInputComponent,
     ProcessOverviewComponent,
+    ProcessOverviewTableComponent,
     ProcessDetailComponent,
     ProcessDetailFieldComponent,
     ProcessFormComponent,
@@ -41,7 +46,8 @@ import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
   providers: [
     ProcessBreadcrumbResolver,
     ProcessBreadcrumbsService,
-  ],
+    DatePipe,
+  ]
 })
 
 export class ProcessPageSharedModule {
diff --git a/src/app/process-page/process-page.resolver.ts b/src/app/process-page/process-page.resolver.ts
index 881429aa02..8f13af96e6 100644
--- a/src/app/process-page/process-page.resolver.ts
+++ b/src/app/process-page/process-page.resolver.ts
@@ -1,9 +1,5 @@
 import { Injectable } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  Resolve,
-  RouterStateSnapshot,
-} from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 
 import { ProcessDataService } from '../core/data/processes/process-data.service';
@@ -12,6 +8,10 @@ import { getFirstCompletedRemoteData } from '../core/shared/operators';
 import { followLink } from '../shared/utils/follow-link-config.model';
 import { Process } from './processes/process.model';
 
+export const PROCESS_PAGE_FOLLOW_LINKS = [
+  followLink('files'),
+];
+
 /**
  * This class represents a resolver that requests a specific process before the route is activated
  */
@@ -28,7 +28,7 @@ export class ProcessPageResolver implements Resolve> {
    * or an error if something went wrong
    */
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable> {
-    return this.processService.findById(route.params.id, false, true, followLink('script')).pipe(
+    return this.processService.findById(route.params.id, false, true, ...PROCESS_PAGE_FOLLOW_LINKS).pipe(
       getFirstCompletedRemoteData(),
     );
   }
diff --git a/src/app/process-page/processes/filetypes.model.ts b/src/app/process-page/processes/filetypes.model.ts
new file mode 100644
index 0000000000..28e9df71cd
--- /dev/null
+++ b/src/app/process-page/processes/filetypes.model.ts
@@ -0,0 +1,34 @@
+import { typedObject } from '../../core/cache/builders/build-decorators';
+import { excludeFromEquals } from '../../core/utilities/equals.decorators';
+import { autoserialize } from 'cerialize';
+import { ResourceType } from '../../core/shared/resource-type';
+import { FILETYPES } from './filetypes.resource-type';
+
+/**
+ * Object representing the file types of the {@link Bitstream}s of a {@link Process}
+ */
+@typedObject
+export class Filetypes {
+
+  static type = FILETYPES;
+
+  /**
+   * The id of this {@link Filetypes}
+   */
+  @autoserialize
+  id: string;
+
+  /**
+   * The values of this {@link Filetypes}
+   */
+  @autoserialize
+  values: string[];
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+}
diff --git a/src/app/process-page/processes/filetypes.resource-type.ts b/src/app/process-page/processes/filetypes.resource-type.ts
new file mode 100644
index 0000000000..29f9636208
--- /dev/null
+++ b/src/app/process-page/processes/filetypes.resource-type.ts
@@ -0,0 +1,8 @@
+/**
+ * The resource type for {@link Filetypes}
+ *
+ * Needs to be in a separate file to prevent circular dependencies in webpack.
+ */
+import { ResourceType } from '../../core/shared/resource-type';
+
+export const FILETYPES = new ResourceType('filetypes');
diff --git a/src/app/process-page/processes/process-status.model.ts b/src/app/process-page/processes/process-status.model.ts
index b43340bffb..1ff42789d8 100644
--- a/src/app/process-page/processes/process-status.model.ts
+++ b/src/app/process-page/processes/process-status.model.ts
@@ -2,8 +2,8 @@
  * List of process statuses
  */
 export enum ProcessStatus {
-  SCHEDULED,
-  RUNNING,
-  COMPLETED,
-  FAILED
+  SCHEDULED = 'SCHEDULED',
+  RUNNING = 'RUNNING',
+  COMPLETED = 'COMPLETED',
+  FAILED = 'FAILED'
 }
diff --git a/src/app/process-page/processes/process.model.ts b/src/app/process-page/processes/process.model.ts
index 79ab7ba2f3..5ccfb0766f 100644
--- a/src/app/process-page/processes/process.model.ts
+++ b/src/app/process-page/processes/process.model.ts
@@ -1,25 +1,23 @@
-import {
-  autoserialize,
-  deserialize,
-} from 'cerialize';
+import { autoserialize, autoserializeAs, deserialize } from 'cerialize';
 import { Observable } from 'rxjs';
 
-import {
-  link,
-  typedObject,
-} from '../../core/cache/builders/build-decorators';
+import { link, typedObject } from '../../core/cache/builders/build-decorators';
 import { CacheableObject } from '../../core/cache/cacheable-object.model';
 import { RemoteData } from '../../core/data/remote-data';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { HALLink } from '../../core/shared/hal-link.model';
 import { PROCESS_OUTPUT_TYPE } from '../../core/shared/process-output.resource-type';
-import { ResourceType } from '../../core/shared/resource-type';
+import { ProcessStatus } from './process-status.model';
+import { ProcessParameter } from './process-parameter.model';
+import { PROCESS } from './process.resource-type';
 import { excludeFromEquals } from '../../core/utilities/equals.decorators';
+import { ResourceType } from '../../core/shared/resource-type';
 import { Script } from '../scripts/script.model';
 import { SCRIPT } from '../scripts/script.resource-type';
-import { PROCESS } from './process.resource-type';
-import { ProcessParameter } from './process-parameter.model';
-import { ProcessStatus } from './process-status.model';
+import { BITSTREAM } from '../../core/shared/bitstream.resource-type';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { Filetypes } from './filetypes.model';
+import { FILETYPES } from './filetypes.resource-type';
 
 /**
  * Object representing a process
@@ -38,7 +36,7 @@ export class Process implements CacheableObject {
   /**
    * The identifier for this process
    */
-  @autoserialize
+  @autoserializeAs(String)
     processId: string;
 
   /**
@@ -47,6 +45,12 @@ export class Process implements CacheableObject {
   @autoserialize
     userId: string;
 
+  /**
+   * The creation time for this process
+   */
+  @autoserialize
+  creationTime: string;
+
   /**
    * The start time for this process
    */
@@ -85,7 +89,8 @@ export class Process implements CacheableObject {
     self: HALLink,
     script: HALLink,
     output: HALLink,
-    files: HALLink
+    files: HALLink,
+    filetypes: HALLink,
   };
 
   /**
@@ -101,4 +106,19 @@ export class Process implements CacheableObject {
    */
   @link(PROCESS_OUTPUT_TYPE)
     output?: Observable>;
+
+  /**
+   * The files created by this Process
+   * Will be undefined unless the output {@link HALLink} has been resolved.
+   */
+  @link(BITSTREAM, true)
+  files?: Observable>>;
+
+  /**
+   * The filetypes present in this Process
+   * Will be undefined unless the output {@link HALLink} has been resolved.
+   */
+  @link(FILETYPES)
+  filetypes?: Observable>;
+
 }
diff --git a/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts b/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts
index ef9665907e..b86b34c55b 100644
--- a/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts
+++ b/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts
@@ -1,15 +1,6 @@
-import {
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import {
-  DynamicFormControlModel,
-  DynamicFormValueControlModel,
-  DynamicInputModel,
-  DynamicSelectModel,
-} from '@ng-dynamic-forms/core';
+import { DynamicFormControlModel, DynamicFormValueControlModel, DynamicInputModel, DynamicSelectModel } from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
 import cloneDeep from 'lodash/cloneDeep';
 
@@ -17,14 +8,8 @@ import { LangConfig } from '../../../config/lang-config.interface';
 import { environment } from '../../../environments/environment';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
-import {
-  getFirstSucceededRemoteData,
-  getRemoteDataPayload,
-} from '../../core/shared/operators';
-import {
-  hasValue,
-  isNotEmpty,
-} from '../../shared/empty.util';
+import { getFirstSucceededRemoteData, getRemoteDataPayload } from '../../core/shared/operators';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { FormBuilderService } from '../../shared/form/builder/form-builder.service';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 
@@ -55,6 +40,7 @@ export class ProfilePageMetadataFormComponent implements OnInit {
       id: 'email',
       name: 'email',
       readOnly: true,
+      disabled: true,
     }),
     new DynamicInputModel({
       id: 'firstname',
@@ -66,6 +52,7 @@ export class ProfilePageMetadataFormComponent implements OnInit {
       errorMessages: {
         required: 'This field is required',
       },
+      autoComplete: 'given-name',
     }),
     new DynamicInputModel({
       id: 'lastname',
@@ -77,10 +64,12 @@ export class ProfilePageMetadataFormComponent implements OnInit {
       errorMessages: {
         required: 'This field is required',
       },
+      autoComplete: 'family-name',
     }),
     new DynamicInputModel({
       id: 'phone',
       name: 'eperson.phone',
+      autoComplete: 'tel',
     }),
     new DynamicSelectModel({
       id: 'language',
diff --git a/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts b/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts
index 9b74a620e8..9223a3ba11 100644
--- a/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts
+++ b/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts
@@ -1,26 +1,13 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import {
-  DynamicFormControlModel,
-  DynamicFormService,
-  DynamicInputModel,
-} from '@ng-dynamic-forms/core';
+import { DynamicFormControlModel, DynamicFormService, DynamicInputModel } from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { debounceTimeWorkaround as debounceTime } from '../../core/shared/operators';
-import {
-  hasValue,
-  isEmpty,
-} from '../../shared/empty.util';
+import { hasValue, isEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 
 @Component({
@@ -54,12 +41,14 @@ export class ProfilePageSecurityFormComponent implements OnInit {
       id: 'password',
       name: 'password',
       inputType: 'password',
+      autoComplete: 'new-password',
     }),
     new DynamicInputModel({
       id: 'passwordrepeat',
       name: 'passwordrepeat',
       inputType: 'password',
-    }),
+      autoComplete: 'new-password',
+    })
   ];
 
   /**
@@ -94,6 +83,7 @@ export class ProfilePageSecurityFormComponent implements OnInit {
         name: 'current-password',
         inputType: 'password',
         required: true,
+        autoComplete: 'current-password',
       }));
     }
     if (this.passwordCanBeEmpty) {
diff --git a/src/app/profile-page/profile-page.component.html b/src/app/profile-page/profile-page.component.html
index 187096b391..b5703c47a3 100644
--- a/src/app/profile-page/profile-page.component.html
+++ b/src/app/profile-page/profile-page.component.html
@@ -1,13 +1,14 @@
 
   
    
-    
-      
    {{'profile.head' | translate}}
    
+    
    {{'profile.title' | translate}}
    
+    
       
    
         
    {{'profile.card.researcher' | translate}}
    
         
    
           
    
             
           
    
+          
         
    
       
    
         
diff --git a/src/app/profile-page/profile-page.module.ts b/src/app/profile-page/profile-page.module.ts
index e953578901..088e63c761 100644
--- a/src/app/profile-page/profile-page.module.ts
+++ b/src/app/profile-page/profile-page.module.ts
@@ -11,7 +11,7 @@ import { ProfilePageResearcherFormComponent } from './profile-page-researcher-fo
 import { ProfilePageRoutingModule } from './profile-page-routing.module';
 import { ProfilePageSecurityFormComponent } from './profile-page-security-form/profile-page-security-form.component';
 import { ThemedProfilePageComponent } from './themed-profile-page.component';
-
+import { NotificationsModule } from '../notifications/notifications.module';
 
 @NgModule({
   imports: [
@@ -20,6 +20,7 @@ import { ThemedProfilePageComponent } from './themed-profile-page.component';
     SharedModule,
     FormModule,
     UiSwitchModule,
+    NotificationsModule
   ],
   exports: [
     ProfilePageComponent,
diff --git a/src/app/quality-assurance-notifications-pages/notifications-pages-routing-paths.ts b/src/app/quality-assurance-notifications-pages/notifications-pages-routing-paths.ts
new file mode 100644
index 0000000000..c517ddafd4
--- /dev/null
+++ b/src/app/quality-assurance-notifications-pages/notifications-pages-routing-paths.ts
@@ -0,0 +1,7 @@
+
+export const QUALITY_ASSURANCE_EDIT_PATH = 'quality-assurance';
+export const NOTIFICATIONS_RECITER_SUGGESTION_PATH = 'suggestion-targets';
+
+export function getQualityAssuranceEditRoute() {
+  return `/${QUALITY_ASSURANCE_EDIT_PATH}`;
+}
diff --git a/src/app/quality-assurance-notifications-pages/notifications-pages-routing.module.ts b/src/app/quality-assurance-notifications-pages/notifications-pages-routing.module.ts
new file mode 100644
index 0000000000..c98f697eaf
--- /dev/null
+++ b/src/app/quality-assurance-notifications-pages/notifications-pages-routing.module.ts
@@ -0,0 +1,119 @@
+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 { NOTIFICATIONS_RECITER_SUGGESTION_PATH, QUALITY_ASSURANCE_EDIT_PATH } from './notifications-pages-routing-paths';
+import { NotificationsSuggestionTargetsPageComponent } from './notifications-suggestion-targets-page/notifications-suggestion-targets-page.component';
+import { AdminNotificationsPublicationClaimPageResolver } from './notifications-suggestion-targets-page/notifications-suggestion-targets-page-resolver.service';
+import { QualityAssuranceTopicsPageComponent } from './quality-assurance-topics-page/quality-assurance-topics-page.component';
+import { QualityAssuranceEventsPageComponent } from './quality-assurance-events-page/quality-assurance-events-page.component';
+import { QualityAssuranceTopicsPageResolver } from './quality-assurance-topics-page/quality-assurance-topics-page-resolver.service';
+import { QualityAssuranceEventsPageResolver } from './quality-assurance-events-page/quality-assurance-events-page.resolver';
+import { QualityAssuranceSourcePageComponent } from './quality-assurance-source-page-component/quality-assurance-source-page.component';
+import { QualityAssuranceSourcePageResolver } from './quality-assurance-source-page-component/quality-assurance-source-page-resolver.service';
+import { QualityAssuranceBreadcrumbResolver } from '../core/breadcrumbs/quality-assurance-breadcrumb.resolver';
+import { QualityAssuranceBreadcrumbService } from '../core/breadcrumbs/quality-assurance-breadcrumb.service';
+import { SourceDataResolver } from './quality-assurance-source-page-component/quality-assurance-source-data.resolver';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        canActivate: [ AuthenticatedGuard ],
+        path: `${NOTIFICATIONS_RECITER_SUGGESTION_PATH}`,
+        component: NotificationsSuggestionTargetsPageComponent,
+        pathMatch: 'full',
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver,
+          reciterSuggestionTargetParams: AdminNotificationsPublicationClaimPageResolver
+        },
+        data: {
+          title: 'admin.notifications.recitersuggestion.page.title',
+          breadcrumbKey: 'admin.notifications.recitersuggestion',
+          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: [ AuthenticatedGuard ],
+        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 NotificationsPageRoutingModule {
+
+}
diff --git a/src/app/quality-assurance-notifications-pages/notifications-pages.module.ts b/src/app/quality-assurance-notifications-pages/notifications-pages.module.ts
new file mode 100644
index 0000000000..2c16696719
--- /dev/null
+++ b/src/app/quality-assurance-notifications-pages/notifications-pages.module.ts
@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NotificationsPageRoutingModule } from './notifications-pages-routing.module';
+import { NotificationsSuggestionTargetsPageComponent } from './notifications-suggestion-targets-page/notifications-suggestion-targets-page.component';
+import { QualityAssuranceTopicsPageComponent } from './quality-assurance-topics-page/quality-assurance-topics-page.component';
+import { QualityAssuranceEventsPageComponent } from './quality-assurance-events-page/quality-assurance-events-page.component';
+import { QualityAssuranceSourcePageComponent } from './quality-assurance-source-page-component/quality-assurance-source-page.component';
+import { NotificationsModule } from '../notifications/notifications.module';
+import { SharedModule } from '../shared/shared.module';
+import { CoreModule } from '../core/core.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    CoreModule.forRoot(),
+    NotificationsPageRoutingModule,
+    NotificationsModule
+  ],
+  declarations: [
+    NotificationsSuggestionTargetsPageComponent,
+    QualityAssuranceTopicsPageComponent,
+    QualityAssuranceEventsPageComponent,
+    QualityAssuranceSourcePageComponent
+  ],
+  entryComponents: []
+})
+/**
+ * This module handles all components related to the notifications pages
+ */
+export class NotificationsPageModule {
+
+}
diff --git a/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page-resolver.service.ts b/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page-resolver.service.ts
new file mode 100644
index 0000000000..783387281e
--- /dev/null
+++ b/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page-resolver.service.ts
@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+/**
+ * Interface for the route parameters.
+ */
+
+export interface AdminNotificationsPublicationClaimPageParams {
+  pageId?: string;
+  pageSize?: number;
+  currentPage?: number;
+}
+
+/**
+ * This class represents a resolver that retrieve the route data before the route is activated.
+ */
+@Injectable()
+
+export class AdminNotificationsPublicationClaimPageResolver 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): AdminNotificationsPublicationClaimPageParams {
+    return {
+      pageId: route.queryParams.pageId,
+      pageSize: parseInt(route.queryParams.pageSize, 10),
+      currentPage: parseInt(route.queryParams.page, 10)
+    };
+  }
+}
diff --git a/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.html b/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.html
new file mode 100644
index 0000000000..11db25fa7b
--- /dev/null
+++ b/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.html
@@ -0,0 +1 @@
+
diff --git a/src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.scss b/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.scss
rename to src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.scss
diff --git a/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.spec.ts b/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.spec.ts
new file mode 100644
index 0000000000..bbca7f8d39
--- /dev/null
+++ b/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.spec.ts
@@ -0,0 +1,41 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsSuggestionTargetsPageComponent } from './notifications-suggestion-targets-page.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  AdminNotificationsPublicationClaimPageComponent
+} from '../../admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component';
+
+describe('NotificationsSuggestionTargetsPageComponent', () => {
+  let component: NotificationsSuggestionTargetsPageComponent;
+  let fixture: ComponentFixture;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        TranslateModule.forRoot()
+      ],
+      declarations: [
+        NotificationsSuggestionTargetsPageComponent
+      ],
+      providers: [
+        AdminNotificationsPublicationClaimPageComponent
+      ],
+      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/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.ts b/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.ts
new file mode 100644
index 0000000000..65b7f7667e
--- /dev/null
+++ b/src/app/quality-assurance-notifications-pages/notifications-suggestion-targets-page/notifications-suggestion-targets-page.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ds-notifications-reciter-page',
+  templateUrl: './notifications-suggestion-targets-page.component.html',
+  styleUrls: ['./notifications-suggestion-targets-page.component.scss']
+})
+export class NotificationsSuggestionTargetsPageComponent {
+
+}
diff --git a/src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.component.html b/src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.html
similarity index 100%
rename from src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.component.html
rename to src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.html
diff --git a/src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.spec.ts b/src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.spec.ts
new file mode 100644
index 0000000000..8f504c4bdf
--- /dev/null
+++ b/src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.spec.ts
@@ -0,0 +1,26 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { QualityAssuranceEventsPageComponent } from './quality-assurance-events-page.component';
+
+describe('QualityAssuranceEventsPageComponent', () => {
+  let component: QualityAssuranceEventsPageComponent;
+  let fixture: ComponentFixture;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ QualityAssuranceEventsPageComponent ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QualityAssuranceEventsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create AdminQualityAssuranceEventsPageComponent', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.component.ts b/src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.ts
similarity index 60%
rename from src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.component.ts
rename to src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.ts
index cc7cce6de4..0f9ddd509f 100644
--- a/src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.component.ts
+++ b/src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.ts
@@ -5,8 +5,8 @@ import { Component } from '@angular/core';
  */
 @Component({
   selector: 'ds-quality-assurance-events-page',
-  templateUrl: './admin-quality-assurance-events-page.component.html',
+  templateUrl: './quality-assurance-events-page.component.html'
 })
-export class AdminQualityAssuranceEventsPageComponent {
+export class QualityAssuranceEventsPageComponent {
 
 }
diff --git a/src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.resolver.ts b/src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.resolver.ts
similarity index 72%
rename from src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.resolver.ts
rename to src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.resolver.ts
index f0853ecfd1..75b5678f79 100644
--- a/src/app/admin/admin-notifications/admin-quality-assurance-events-page/admin-quality-assurance-events-page.resolver.ts
+++ b/src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.resolver.ts
@@ -1,14 +1,10 @@
 import { Injectable } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  Resolve,
-  RouterStateSnapshot,
-} from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 
 /**
  * Interface for the route parameters.
  */
-export interface AdminQualityAssuranceEventsPageParams {
+export interface AssuranceEventsPageParams {
   pageId?: string;
   pageSize?: number;
   currentPage?: number;
@@ -18,7 +14,7 @@ export interface AdminQualityAssuranceEventsPageParams {
  * This class represents a resolver that retrieve the route data before the route is activated.
  */
 @Injectable()
-export class AdminQualityAssuranceEventsPageResolver implements Resolve {
+export class QualityAssuranceEventsPageResolver implements Resolve {
 
   /**
    * Method for resolving the parameters in the current route.
@@ -26,7 +22,7 @@ export class AdminQualityAssuranceEventsPageResolver implements Resolve {
+export class QualityAssuranceSourcePageResolver implements Resolve {
 
   /**
    * Method for resolving the parameters in the current route.
@@ -26,7 +22,7 @@ export class AdminQualityAssuranceSourcePageResolver implements Resolve {
+  let component: QualityAssuranceSourcePageComponent;
+  let fixture: ComponentFixture;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ QualityAssuranceSourcePageComponent ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QualityAssuranceSourcePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create QualityAssuranceSourcePageComponent', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/quality-assurance-notifications-pages/quality-assurance-source-page-component/quality-assurance-source-page.component.ts b/src/app/quality-assurance-notifications-pages/quality-assurance-source-page-component/quality-assurance-source-page.component.ts
new file mode 100644
index 0000000000..f066364708
--- /dev/null
+++ b/src/app/quality-assurance-notifications-pages/quality-assurance-source-page-component/quality-assurance-source-page.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+/**
+ * Component for the page that show the QA sources.
+ */
+@Component({
+  selector: 'ds-quality-assurance-source-page-component',
+  templateUrl: './quality-assurance-source-page.component.html',
+})
+export class QualityAssuranceSourcePageComponent {}
diff --git a/src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page-resolver.service.ts b/src/app/quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page-resolver.service.ts
similarity index 72%
rename from src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page-resolver.service.ts
rename to src/app/quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page-resolver.service.ts
index 0c8f23c61d..87c35faf74 100644
--- a/src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page-resolver.service.ts
+++ b/src/app/quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page-resolver.service.ts
@@ -1,14 +1,10 @@
 import { Injectable } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  Resolve,
-  RouterStateSnapshot,
-} from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 
 /**
  * Interface for the route parameters.
  */
-export interface AdminQualityAssuranceTopicsPageParams {
+export interface QualityAssuranceTopicsPageParams {
   pageId?: string;
   pageSize?: number;
   currentPage?: number;
@@ -18,7 +14,7 @@ export interface AdminQualityAssuranceTopicsPageParams {
  * This class represents a resolver that retrieve the route data before the route is activated.
  */
 @Injectable()
-export class AdminQualityAssuranceTopicsPageResolver implements Resolve {
+export class QualityAssuranceTopicsPageResolver implements Resolve {
 
   /**
    * Method for resolving the parameters in the current route.
@@ -26,7 +22,7 @@ export class AdminQualityAssuranceTopicsPageResolver implements Resolve {
+  let component: QualityAssuranceTopicsPageComponent;
+  let fixture: ComponentFixture;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ QualityAssuranceTopicsPageComponent ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QualityAssuranceTopicsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create QualityAssuranceTopicsPageComponent', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component.ts b/src/app/quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page.component.ts
similarity index 59%
rename from src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component.ts
rename to src/app/quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page.component.ts
index 4b23f38789..af0c8085af 100644
--- a/src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component.ts
+++ b/src/app/quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page.component.ts
@@ -5,8 +5,8 @@ import { Component } from '@angular/core';
  */
 @Component({
   selector: 'ds-notification-qa-page',
-  templateUrl: './admin-quality-assurance-topics-page.component.html',
+  templateUrl: './quality-assurance-topics-page.component.html'
 })
-export class AdminQualityAssuranceTopicsPageComponent {
+export class QualityAssuranceTopicsPageComponent {
 
 }
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index f545bd6f1f..5636b910eb 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -1,12 +1,12 @@
-
 
 
    
-  
+  
   
    
     
     
diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts
index 989691154b..c7dd106121 100644
--- a/src/app/root/root.component.ts
+++ b/src/app/root/root.component.ts
@@ -1,39 +1,17 @@
-import {
-  Component,
-  Inject,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { first, map, skipWhile, startWith } from 'rxjs/operators';
+import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Store } from '@ngrx/store';
-import { TranslateService } from '@ngx-translate/core';
-import {
-  combineLatest as combineLatestObservable,
-  Observable,
-  of,
-} from 'rxjs';
-import {
-  map,
-  startWith,
-} from 'rxjs/operators';
 
+import { combineLatest as combineLatestObservable, Observable, of } from 'rxjs';
+import { CSSVariableService } from '../shared/sass-helper/css-variable.service';
+import { MenuService } from '../shared/menu/menu.service';
+import { HostWindowService } from '../shared/host-window.service';
 import { ThemeConfig } from '../../config/theme.config';
 import { environment } from '../../environments/environment';
 import { getPageInternalServerErrorRoute } from '../app-routing-paths';
-import { AuthService } from '../core/auth/auth.service';
-import { MetadataService } from '../core/metadata/metadata.service';
-import {
-  NativeWindowRef,
-  NativeWindowService,
-} from '../core/services/window.service';
+import { INotificationBoardOptions } from 'src/config/notifications-config.interfaces';
 import { slideSidebarPadding } from '../shared/animations/slide';
-import { hasValueOperator } from '../shared/empty.util';
-import { HostWindowService } from '../shared/host-window.service';
-import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
-import { CSSVariableService } from '../shared/sass-helper/css-variable.service';
-import { HostWindowState } from '../shared/search/host-window.reducer';
-import { Angulartics2DSpace } from '../statistics/angulartics/dspace-provider';
 
 @Component({
   selector: 'ds-root',
@@ -42,13 +20,13 @@ import { Angulartics2DSpace } from '../statistics/angulartics/dspace-provider';
   animations: [slideSidebarPadding],
 })
 export class RootComponent implements OnInit {
-  sidebarVisible: Observable;
-  slideSidebarOver: Observable;
-  collapsedSidebarWidth: Observable;
-  totalSidebarWidth: Observable;
   theme: Observable = of({} as any);
-  notificationOptions;
-  models;
+  isSidebarVisible$: Observable;
+  slideSidebarOver$: Observable;
+  collapsedSidebarWidth$: Observable;
+  expandedSidebarWidth$: Observable;
+  notificationOptions: INotificationBoardOptions;
+  models: any;
 
   /**
    * Whether or not to show a full screen loader
@@ -61,12 +39,6 @@ export class RootComponent implements OnInit {
   @Input() shouldShowRouteLoader: boolean;
 
   constructor(
-    @Inject(NativeWindowService) private _window: NativeWindowRef,
-    private translate: TranslateService,
-    private store: Store,
-    private metadata: MetadataService,
-    private angulartics2DSpace: Angulartics2DSpace,
-    private authService: AuthService,
     private router: Router,
     private cssService: CSSVariableService,
     private menuService: MenuService,
@@ -76,13 +48,19 @@ export class RootComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.sidebarVisible = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN);
+    this.isSidebarVisible$ = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN);
 
-    this.collapsedSidebarWidth = this.cssService.getVariable('--ds-collapsed-sidebar-width').pipe(hasValueOperator());
-    this.totalSidebarWidth = this.cssService.getVariable('--ds-total-sidebar-width').pipe(hasValueOperator());
+    this.expandedSidebarWidth$ = this.cssService.getVariable('--ds-admin-sidebar-total-width').pipe(
+      skipWhile((val) => !val),
+      first(),
+    );
+    this.collapsedSidebarWidth$ = this.cssService.getVariable('--ds-admin-sidebar-fixed-element-width').pipe(
+      skipWhile((val) => !val),
+      first(),
+    );
 
     const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
-    this.slideSidebarOver = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()])
+    this.slideSidebarOver$ = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()])
       .pipe(
         map(([collapsed, mobile]) => collapsed || mobile),
         startWith(true),
diff --git a/src/app/search-navbar/search-navbar.component.spec.ts b/src/app/search-navbar/search-navbar.component.spec.ts
index 0db57e88e5..35a9757b43 100644
--- a/src/app/search-navbar/search-navbar.component.spec.ts
+++ b/src/app/search-navbar/search-navbar.component.spec.ts
@@ -1,25 +1,10 @@
-import {
-  ComponentFixture,
-  fakeAsync,
-  TestBed,
-  tick,
-  waitForAsync,
-} from '@angular/core/testing';
-import {
-  FormsModule,
-  ReactiveFormsModule,
-} from '@angular/forms';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  NavigationExtras,
-  Router,
-} from '@angular/router';
+import { NavigationExtras, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 
 import { SearchService } from '../core/shared/search/search.service';
 import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
@@ -103,7 +88,7 @@ describe('SearchNavbarComponent', () => {
           fixture.detectChanges();
         }));
         it('to search page with empty query', () => {
-          const extras: NavigationExtras = { queryParams: { query: '' }, queryParamsHandling: 'merge' };
+          const extras: NavigationExtras = { queryParams: { query: '' } };
           expect(component.onSubmit).toHaveBeenCalledWith({ query: '' });
           expect(router.navigate).toHaveBeenCalledWith(['search'], extras);
         });
@@ -128,7 +113,7 @@ describe('SearchNavbarComponent', () => {
           fixture.detectChanges();
         }));
         it('to search page with query', async () => {
-          const extras: NavigationExtras = { queryParams: { query: 'test' }, queryParamsHandling: 'merge' };
+          const extras: NavigationExtras = { queryParams: { query: 'test' } };
           expect(component.onSubmit).toHaveBeenCalledWith({ query: 'test' });
 
           expect(router.navigate).toHaveBeenCalledWith(['search'], extras);
diff --git a/src/app/search-navbar/search-navbar.component.ts b/src/app/search-navbar/search-navbar.component.ts
index 1fd46af11b..16a7609897 100644
--- a/src/app/search-navbar/search-navbar.component.ts
+++ b/src/app/search-navbar/search-navbar.component.ts
@@ -1,8 +1,4 @@
-import {
-  Component,
-  ElementRef,
-  ViewChild,
-} from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { UntypedFormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 
@@ -71,8 +67,7 @@ export class SearchNavbarComponent {
     this.searchForm.reset();
 
     this.router.navigate(linkToNavigateTo, {
-      queryParams: queryParams,
-      queryParamsHandling: 'merge',
+      queryParams: queryParams
     });
   }
 }
diff --git a/src/app/search-page/configuration-search-page.component.ts b/src/app/search-page/configuration-search-page.component.ts
index fa9d3f579a..1b47ca60b7 100644
--- a/src/app/search-page/configuration-search-page.component.ts
+++ b/src/app/search-page/configuration-search-page.component.ts
@@ -13,6 +13,7 @@ import { pushInOut } from '../shared/animations/push';
 import { HostWindowService } from '../shared/host-window.service';
 import { SearchComponent } from '../shared/search/search.component';
 import { SidebarService } from '../shared/sidebar/sidebar.service';
+import { APP_CONFIG, AppConfig } from '../../config/app-config.interface';
 
 /**
  * This component renders a search page using a configuration as input.
@@ -37,7 +38,9 @@ export class ConfigurationSearchPageComponent extends SearchComponent {
               protected windowService: HostWindowService,
               @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
               protected routeService: RouteService,
-              protected router: Router) {
-    super(service, sidebarService, windowService, searchConfigService, routeService, router);
+              protected router: Router,
+              @Inject(APP_CONFIG) protected appConfig: AppConfig,
+  ) {
+    super(service, sidebarService, windowService, searchConfigService, routeService, router, appConfig);
   }
 }
diff --git a/src/app/shared/abstract-component-loader/abstract-component-loader.component.html b/src/app/shared/abstract-component-loader/abstract-component-loader.component.html
new file mode 100644
index 0000000000..2035dbadd0
--- /dev/null
+++ b/src/app/shared/abstract-component-loader/abstract-component-loader.component.html
@@ -0,0 +1 @@
+
diff --git a/src/app/shared/abstract-component-loader/abstract-component-loader.component.ts b/src/app/shared/abstract-component-loader/abstract-component-loader.component.ts
new file mode 100644
index 0000000000..76b30fa10b
--- /dev/null
+++ b/src/app/shared/abstract-component-loader/abstract-component-loader.component.ts
@@ -0,0 +1,143 @@
+import { Component, ComponentRef, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
+import { ThemeService } from '../theme-support/theme.service';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { hasValue, isNotEmpty } from '../empty.util';
+import { Subscription } from 'rxjs';
+import { DynamicComponentLoaderDirective } from './dynamic-component-loader.directive';
+
+/**
+ * To create a new loader component you will need to:
+ * 
      
+ *   
    • Create a new LoaderComponent component extending this component
      • 
+ *   
    • Point the templateUrl to this component's templateUrl
      • 
+ *   
    • Add all the @Input()/@Output() names that the dynamically generated components should inherit from the loader to the inputNames/outputNames lists
      • 
+ *   
    • Create a decorator file containing the new decorator function, a map containing all the collected {@link Component}s and a function to retrieve the {@link Component}
      • 
+ *   
    • Call the function to retrieve the correct {@link Component} in getComponent()
      • 
+ *   
    • Add all the @Input()s you had to used in getComponent() in the inputNamesDependentForComponent array
      • 
+ * 
    
+ */
+@Component({
+  selector: 'ds-abstract-component-loader',
+  templateUrl: './abstract-component-loader.component.html',
+})
+export abstract class AbstractComponentLoaderComponent implements OnInit, OnChanges, OnDestroy {
+
+  /**
+   * Directive to determine where the dynamic child component is located
+   */
+  @ViewChild(DynamicComponentLoaderDirective, { static: true }) componentDirective: DynamicComponentLoaderDirective;
+
+  /**
+   * The reference to the dynamic component
+   */
+  protected compRef: ComponentRef;
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   */
+  protected subs: Subscription[] = [];
+
+  /**
+   * The @Input() that are used to find the matching component using {@link getComponent}. When the value of
+   * one of these @Input() change this loader needs to retrieve the best matching component again using the
+   * {@link getComponent} method.
+   */
+  protected inputNamesDependentForComponent: (keyof this & string)[] = [];
+
+  /**
+   * The list of the @Input() names that should be passed down to the dynamically created components.
+   */
+  protected inputNames: (keyof this & string)[] = [];
+
+  /**
+   * The list of the @Output() names that should be passed down to the dynamically created components.
+   */
+  protected outputNames: (keyof this & string)[] = [];
+
+  constructor(
+    protected themeService: ThemeService,
+  ) {
+  }
+
+  /**
+   * Set up the dynamic child component
+   */
+  ngOnInit(): void {
+    this.instantiateComponent();
+  }
+
+  /**
+   * Whenever the inputs change, update the inputs of the dynamic component
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (hasValue(this.compRef)) {
+      if (this.inputNamesDependentForComponent.some((name: keyof this & string) => hasValue(changes[name]) && changes[name].previousValue !== changes[name].currentValue)) {
+        // Recreate the component when the @Input()s used by getComponent() aren't up-to-date anymore
+        this.destroyComponentInstance();
+        this.instantiateComponent();
+      } else {
+        this.connectInputsAndOutputs();
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subs
+      .filter((subscription: Subscription) => hasValue(subscription))
+      .forEach((subscription: Subscription) => subscription.unsubscribe());
+    this.destroyComponentInstance();
+  }
+
+  /**
+   * Creates the component and connects the @Input() & @Output() from the ThemedComponent to its child Component.
+   */
+  public instantiateComponent(): void {
+    const component: GenericConstructor = this.getComponent();
+
+    const viewContainerRef: ViewContainerRef = this.componentDirective.viewContainerRef;
+    viewContainerRef.clear();
+
+    this.compRef = viewContainerRef.createComponent(
+      component, {
+        index: 0,
+        injector: undefined,
+      },
+    );
+
+    this.connectInputsAndOutputs();
+  }
+
+  /**
+   * Destroys the themed component and calls it's `ngOnDestroy`
+   */
+  public destroyComponentInstance(): void {
+    if (hasValue(this.compRef)) {
+      this.compRef.destroy();
+      this.compRef = null;
+    }
+  }
+
+  /**
+   * Fetch the component depending on the item's entity type, metadata representation type and context
+   */
+  public abstract getComponent(): GenericConstructor;
+
+  /**
+   * Connect the inputs and outputs of this component to the dynamic component,
+   * to ensure they're in sync, the ngOnChanges method will automatically be called by setInput
+   */
+  public connectInputsAndOutputs(): void {
+    if (isNotEmpty(this.inputNames) && hasValue(this.compRef) && hasValue(this.compRef.instance)) {
+      this.inputNames.filter((name: string) => this[name] !== undefined).filter((name: string) => this[name] !== this.compRef.instance[name]).forEach((name: string) => {
+        // Using setInput will automatically trigger the ngOnChanges
+        this.compRef.setInput(name, this[name]);
+      });
+    }
+    if (isNotEmpty(this.outputNames) && hasValue(this.compRef) && hasValue(this.compRef.instance)) {
+      this.outputNames.filter((name: string) => this[name] !== undefined).filter((name: string) => this[name] !== this.compRef.instance[name]).forEach((name: string) => {
+        this.compRef.instance[name] = this[name];
+      });
+    }
+  }
+
+}
diff --git a/src/app/shared/abstract-component-loader/dynamic-component-loader.directive.ts b/src/app/shared/abstract-component-loader/dynamic-component-loader.directive.ts
new file mode 100644
index 0000000000..8c77df1cdb
--- /dev/null
+++ b/src/app/shared/abstract-component-loader/dynamic-component-loader.directive.ts
@@ -0,0 +1,16 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+/**
+ * Directive used as a hook to know where to inject the dynamic loaded component
+ */
+@Directive({
+  selector: '[dsDynamicComponentLoader]'
+})
+export class DynamicComponentLoaderDirective {
+
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+  ) {
+  }
+
+}
diff --git a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
index e6ebabd707..2ec3b51219 100644
--- a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
+++ b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
@@ -88,7 +88,7 @@
       
    
 
       
    
-        
+        
         
    
 
           
    
 
-            
    
-              
    
+            
    
+              
                 {{ 'access-control-mode' | translate }}
-              
    
+              
               
    
                 
    
                   
                 
    
               
    
-            
    
+            
           
    
 
           
    
@@ -78,10 +78,10 @@
             
    
 
             
    
-            
    
-              {{'access-control-limit-to-specific' | translate}}
-            
    
-            
    
+            
    
+              
+                {{'access-control-limit-to-specific' | translate}}
+              
               
    
                 
               
    
-            
    
+            
             
    
           
    
 
-          
    
-            
    
+          
    
+            
               {{'access-control-mode' | translate}}
-            
    
+            
             
    
               
    
                 
               
    
             
    
-          
    
+          
 
           
    
             
    {{'access-control-access-conditions' | translate}}
    
diff --git a/src/app/shared/alert/alert.component.scss b/src/app/shared/alert/alert.component.scss
index 1a70081367..907edae24b 100644
--- a/src/app/shared/alert/alert.component.scss
+++ b/src/app/shared/alert/alert.component.scss
@@ -1,3 +1,9 @@
-.close:focus {
-  outline: none !important;
+.close {
+  opacity: 0.75;
+  &:focus {
+    outline: none !important;
+  }
+}
+button.close {
+  opacity: 0.6;
 }
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index dcbef6efd0..659e9c873e 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -1,13 +1,4 @@
-import {
-  animate,
-  animateChild,
-  group,
-  query,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
+import { animate, group, state, style, transition, trigger } from '@angular/animations';
 
 export const slide = trigger('slide', [
   state('expanded', style({ height: '*' })),
@@ -21,45 +12,35 @@ export const slide = trigger('slide', [
 
 export const slideMobileNav = trigger('slideMobileNav', [
 
-  state('expanded', style({ height: 'auto', 'min-height': '100vh' })),
+  state('expanded', style({ height: '*', minHeight: '*' })),
 
-  state('collapsed', style({ height: 0 })),
+  state('collapsed', style({ height: 0, minHeight: 0 })),
 
   transition('expanded <=> collapsed', animate('300ms')),
 ]);
 
-const collapsedStyle = style({ marginLeft: '-{{ sidebarWidth }}' });
-const expandedStyle = style({ marginLeft: '0' });
-const options = { params: { sidebarWidth: '*' } };
+const collapsedSidebarStyle = style({ maxWidth: '{{collapsedWidth}}' });
+const expandedSidebarStyle = style({ maxWidth: '{{expandedWidth}}' });
+const unpinnedSidebarPageStyle = style({ paddingLeft: '{{collapsedWidth}}' });
+const pinnedSidebarPageStyle = style({ paddingLeft: '{{expandedWidth}}' });
+const hiddenSidebarPageStyle = style({ paddingLeft: '0' });
+const options = { params: { collapsedWidth: '*', expandedWidth: '*' } };
+const animation = '300ms ease-in-out';
 
 export const slideSidebar = trigger('slideSidebar', [
-
-  transition('expanded => collapsed',
-    group(
-      [
-        query('@*', animateChild()),
-        query('.sidebar-collapsible', expandedStyle, options),
-        query('.sidebar-collapsible', animate('300ms ease-in-out', collapsedStyle)),
-      ],
-    )),
-
-  transition('collapsed => expanded',
-    group(
-      [
-        query('@*', animateChild()),
-        query('.sidebar-collapsible', collapsedStyle),
-        query('.sidebar-collapsible', animate('300ms ease-in-out', expandedStyle), options),
-      ],
-    )),
+  state('collapsed', collapsedSidebarStyle, options),
+  state('expanded', expandedSidebarStyle, options),
+  transition('expanded => collapsed', animate(animation, collapsedSidebarStyle)),
+  transition('collapsed => expanded', animate(animation, expandedSidebarStyle)),
 ]);
 
 export const slideSidebarPadding = trigger('slideSidebarPadding', [
-  state('hidden', style({ paddingLeft: 0 })),
-  state('shown', style({ paddingLeft: '{{ collapsedSidebarWidth }}' }), { params: { collapsedSidebarWidth: '*' } }),
-  state('expanded', style({ paddingLeft: '{{ totalSidebarWidth }}' }), { params: { totalSidebarWidth: '*' } }),
-  transition('hidden <=> shown', [animate('200ms')]),
-  transition('hidden <=> expanded', [animate('200ms')]),
-  transition('shown <=> expanded', [animate('200ms')]),
+  state('hidden', hiddenSidebarPageStyle),
+  state('unpinned', unpinnedSidebarPageStyle, options),
+  state('pinned', pinnedSidebarPageStyle, options),
+  transition('hidden <=> unpinned', animate(animation)),
+  transition('hidden <=> pinned', animate(animation)),
+  transition('unpinned <=> pinned', animate(animation)),
 ]);
 
 export const expandSearchInput = trigger('toggleAnimation', [
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index deb6a5506d..0dc1bb2942 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -1,40 +1,52 @@
-
    
+  
    
     
    
-      
-      
    
-        
+      
+        
+      
    
+        
       
    
     
    
-  
    • 
-  
  • 
-    
+  

+

+
+
+
+  
+
 
+
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
index ea64f7e74b..84e4916eff 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
@@ -1,10 +1,10 @@
-.loginDropdownMenu, .logoutDropdownMenu {
+#loginDropdownMenu, #logoutDropdownMenu {
   min-width: 330px;
   z-index: 1002;
 }
 
-.loginDropdownMenu {
-  min-height: 260px;
+#loginDropdownMenu {
+  min-height: 75px;
 }
 
 .dropdown-item.active, .dropdown-item:active,
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
index 5f016a021b..acc026bc7e 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
@@ -1,31 +1,18 @@
-import {
-  CUSTOM_ELEMENTS_SCHEMA,
-  DebugElement,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  inject,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  Store,
-  StoreModule,
-} from '@ngrx/store';
+import { Store, StoreModule } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 
 import { AppState } from '../../app.reducer';
-import {
-  authReducer,
-  AuthState,
-} from '../../core/auth/auth.reducer';
+import { authReducer, AuthState } from '../../core/auth/auth.reducer';
 import { AuthService } from '../../core/auth/auth.service';
 import { AuthTokenInfo } from '../../core/auth/models/auth-token-info.model';
 import { HostWindowService } from '../host-window.service';
 import { BrowserOnlyMockPipe } from '../testing/browser-only-mock.pipe';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { EPersonMock } from '../testing/eperson.mock';
 import { HostWindowServiceStub } from '../testing/host-window-service.stub';
 import { AuthNavMenuComponent } from './auth-nav-menu.component';
@@ -89,6 +76,7 @@ describe('AuthNavMenuComponent', () => {
             },
           }),
           TranslateModule.forRoot(),
+          NgbDropdownModule,
         ],
         declarations: [
           AuthNavMenuComponent,
@@ -130,10 +118,10 @@ describe('AuthNavMenuComponent', () => {
 
         fixture.detectChanges();
 
-        const navMenuSelector = '.navbar-nav';
+        const navMenuSelector = '[data-test="auth-nav"]';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-        const navMenuItemSelector = 'li';
+        const navMenuItemSelector = '.nav-item';
         deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
       afterEach(() => {
@@ -168,10 +156,10 @@ describe('AuthNavMenuComponent', () => {
 
         fixture.detectChanges();
 
-        const navMenuSelector = '.navbar-nav';
+        const navMenuSelector = '[data-test="auth-nav"]';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-        const navMenuItemSelector = 'li';
+        const navMenuItemSelector = '.nav-item';
         deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
 
@@ -210,10 +198,10 @@ describe('AuthNavMenuComponent', () => {
 
           fixture.detectChanges();
 
-          const navMenuSelector = '.navbar-nav';
+          const navMenuSelector = '[data-test="auth-nav"]';
           deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-          const navMenuItemSelector = 'li';
+          const navMenuItemSelector = '.nav-item';
           deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
         }));
 
@@ -223,7 +211,7 @@ describe('AuthNavMenuComponent', () => {
         });
 
         it('should render login dropdown menu', () => {
-          const loginDropdownMenu = deNavMenuItem.query(By.css('div.loginDropdownMenu'));
+          const loginDropdownMenu = deNavMenuItem.query(By.css('div#loginDropdownMenu'));
           expect(loginDropdownMenu.nativeElement).toBeDefined();
         });
       });
@@ -249,10 +237,10 @@ describe('AuthNavMenuComponent', () => {
 
           fixture.detectChanges();
 
-          const navMenuSelector = '.navbar-nav';
+          const navMenuSelector = '[data-test="auth-nav"]';
           deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-          const navMenuItemSelector = 'li';
+          const navMenuItemSelector = '.nav-item';
           deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
         }));
 
@@ -322,11 +310,8 @@ describe('AuthNavMenuComponent', () => {
 
         fixture.detectChanges();
 
-        const navMenuSelector = '.navbar-nav';
+        const navMenuSelector = '[data-test="auth-nav"]';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
-
-        const navMenuItemSelector = 'li';
-        deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
 
       afterEach(() => {
@@ -335,7 +320,7 @@ describe('AuthNavMenuComponent', () => {
       });
 
       it('should render login link', () => {
-        const loginDropdownMenu = deNavMenuItem.query(By.css('.loginLink'));
+        const loginDropdownMenu = deNavMenu.query(By.css('.loginLink'));
         expect(loginDropdownMenu.nativeElement).toBeDefined();
       });
     });
@@ -358,11 +343,8 @@ describe('AuthNavMenuComponent', () => {
 
         fixture.detectChanges();
 
-        const navMenuSelector = '.navbar-nav';
+        const navMenuSelector = '[data-test="auth-nav"]';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
-
-        const navMenuItemSelector = 'li';
-        deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
 
       afterEach(() => {
@@ -371,7 +353,7 @@ describe('AuthNavMenuComponent', () => {
       });
 
       it('should render logout link', inject([Store], (store: Store) => {
-        const logoutDropdownMenu = deNavMenuItem.query(By.css('a.logoutLink'));
+        const logoutDropdownMenu = deNavMenu.query(By.css('a.logoutLink'));
         expect(logoutDropdownMenu.nativeElement).toBeDefined();
       }));
     });
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts b/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
index 5a2ebe4698..ece29901bd 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
@@ -1,40 +1,14 @@
-import {
-  Component,
-  OnInit,
-} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterReducerState } from '@ngrx/router-store';
-import {
-  select,
-  Store,
-} from '@ngrx/store';
-import {
-  Observable,
-  of as observableOf,
-  Subscription,
-} from 'rxjs';
-import {
-  filter,
-  map,
-} from 'rxjs/operators';
+import { select, Store } from '@ngrx/store';
+import { Observable, of as observableOf, Subscription } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
 
-import {
-  AppState,
-  routerStateSelector,
-} from '../../app.reducer';
-import {
-  AuthService,
-  LOGIN_ROUTE,
-  LOGOUT_ROUTE,
-} from '../../core/auth/auth.service';
-import {
-  isAuthenticated,
-  isAuthenticationLoading,
-} from '../../core/auth/selectors';
+import { AppState, routerStateSelector } from '../../app.reducer';
+import { AuthService, LOGIN_ROUTE, LOGOUT_ROUTE } from '../../core/auth/auth.service';
+import { isAuthenticated, isAuthenticationLoading } from '../../core/auth/selectors';
 import { EPerson } from '../../core/eperson/models/eperson.model';
-import {
-  fadeInOut,
-  fadeOut,
-} from '../animations/fade';
+import { fadeInOut, fadeOut } from '../animations/fade';
 import { isNotUndefined } from '../empty.util';
 import { HostWindowService } from '../host-window.service';
 
@@ -57,7 +31,7 @@ export class AuthNavMenuComponent implements OnInit {
    */
   public loading: Observable;
 
-  public isXsOrSm$: Observable;
+  public isMobile$: Observable;
 
   public showAuth = observableOf(false);
 
@@ -69,7 +43,7 @@ export class AuthNavMenuComponent implements OnInit {
               private windowService: HostWindowService,
               private authService: AuthService,
   ) {
-    this.isXsOrSm$ = this.windowService.isXsOrSm();
+    this.isMobile$ = this.windowService.isMobile();
   }
 
   ngOnInit(): void {
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
index 00020a7d52..1ebaca4790 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
@@ -1,15 +1,32 @@
 
-

-  
+

+  
+  
+  
+  
+  
+    
+    
+  
+
 
 
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
index e69de29bb2..8fa0019bf1 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
@@ -0,0 +1,45 @@
+:host {
+  ul.user-menu  {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &.user-menu-dropdown {
+      .ds-menu-item-wrapper {
+        a.ds-menu-item, &.username-email-wrapper {
+          padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-dropdown-padding);
+        }
+
+        a.ds-menu-item {
+          display: block;
+          color: var(--ds-expandable-navbar-link-color);
+          &:hover {
+            color: var(--ds-expandable-navbar-link-color-hover);
+            background-color: var(--ds-user-menu-dropdown-link-background-hover);
+          }
+        }
+      }
+    }
+
+    &.user-menu-mobile {
+      .ds-menu-item-wrapper {
+        padding-top: var(--ds-user-menu-item-vertical-padding);
+        padding-bottom: var(--ds-user-menu-item-vertical-padding);
+      }
+
+      .ds-menu-item {
+        display: inline-block;
+      }
+
+      .ds-menu-item, .ds-menu-toggler-wrapper {
+        color: var(--ds-expandable-navbar-link-color) !important;
+
+        &:hover, &:focus {
+          color: var(--ds-expandable-navbar-link-background-hover) !important;
+        }
+      }
+
+    }
+  }
+
+}
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
index 83ebec3525..5c69987003 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
@@ -1,30 +1,13 @@
-import {
-  DebugElement,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  inject,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import {
-  Store,
-  StoreModule,
-} from '@ngrx/store';
-import {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
+import { Store, StoreModule } from '@ngrx/store';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { cold } from 'jasmine-marbles';
 import { of } from 'rxjs';
 
 import { AppState } from '../../../app.reducer';
-import {
-  authReducer,
-  AuthState,
-} from '../../../core/auth/auth.reducer';
+import { authReducer, AuthState } from '../../../core/auth/auth.reducer';
 import { AuthService } from '../../../core/auth/auth.service';
 import { AuthTokenInfo } from '../../../core/auth/models/auth-token-info.model';
 import { TranslateLoaderMock } from '../../mocks/translate-loader.mock';
@@ -156,7 +139,7 @@ describe('UserMenuComponent', () => {
 
       fixture.detectChanges();
 
-      deUserMenu = fixture.debugElement.query(By.css('div'));
+      deUserMenu = fixture.debugElement.query(By.css('ul#user-menu-dropdown'));
     }));
 
     afterEach(() => {
@@ -180,7 +163,7 @@ describe('UserMenuComponent', () => {
     it('should display user name and email', () => {
       const username = 'User Test';
       const email = 'test@test.com';
-      const span = deUserMenu.query(By.css('.dropdown-item-text'));
+      const span = deUserMenu.query(By.css('.username-email-wrapper'));
       expect(span).toBeDefined();
       expect(span.nativeElement.innerHTML).toContain(username);
       expect(span.nativeElement.innerHTML).toContain(email);
diff --git a/src/app/shared/browse-by/browse-by.component.html b/src/app/shared/browse-by/browse-by.component.html
index 37799e805f..7d7e726659 100644
--- a/src/app/shared/browse-by/browse-by.component.html
+++ b/src/app/shared/browse-by/browse-by.component.html
@@ -1,6 +1,7 @@
 
-  
{{title | translate}}

-  
+  
{{title | translate}}

+  
+  
   

       

         
diff --git a/src/app/shared/browse-by/browse-by.component.spec.ts b/src/app/shared/browse-by/browse-by.component.spec.ts
index a62726d290..77c1098495 100644
--- a/src/app/shared/browse-by/browse-by.component.spec.ts
+++ b/src/app/shared/browse-by/browse-by.component.spec.ts
@@ -1,30 +1,12 @@
 import { CommonModule } from '@angular/common';
-import {
-  Component,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { Component, NO_ERRORS_SCHEMA } 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 { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import {
-  TranslateLoader,
-  TranslateModule,
-} from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
-
-import { AccessControlRoutingModule } from '../../access-control/access-control-routing.module';
-import { BrowseByRoutingModule } from '../../browse-by/browse-by-routing.module';
-import {
-  SortDirection,
-  SortOptions,
-} from '../../core/cache/models/sort-options.model';
-import { ConfigurationDataService } from '../../core/data/configuration-data.service';
 import { buildPaginatedList } from '../../core/data/paginated-list.model';
 import { GroupDataService } from '../../core/eperson/group-data.service';
 import { PaginationService } from '../../core/pagination/pagination.service';
@@ -32,7 +14,6 @@ import { LinkHeadService } from '../../core/services/link-head.service';
 import { RouteService } from '../../core/services/route.service';
 import { BrowseEntry } from '../../core/shared/browse-entry.model';
 import { ConfigurationProperty } from '../../core/shared/configuration-property.model';
-import { Item } from '../../core/shared/item.model';
 import { ITEM } from '../../core/shared/item.resource-type';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service';
@@ -40,10 +21,7 @@ import { ViewMode } from '../../core/shared/view-mode.model';
 import { HostWindowService } from '../host-window.service';
 import { getMockThemeService } from '../mocks/theme-service.mock';
 import { TranslateLoaderMock } from '../mocks/translate-loader.mock';
-import {
-  DEFAULT_CONTEXT,
-  listableObjectComponent,
-} from '../object-collection/shared/listable-object/listable-object.decorator';
+import { DEFAULT_CONTEXT, listableObjectComponent } from '../object-collection/shared/listable-object/listable-object.decorator';
 import { ListableObjectComponentLoaderComponent } from '../object-collection/shared/listable-object/listable-object-component-loader.component';
 import { BrowseEntryListElementComponent } from '../object-list/browse-entry-list-element/browse-entry-list-element.component';
 import { SelectableListService } from '../object-list/selectable-list/selectable-list.service';
@@ -58,11 +36,16 @@ import { createPaginatedList } from '../testing/utils.test';
 import { ThemeService } from '../theme-support/theme.service';
 import { BrowseByComponent } from './browse-by.component';
 
-@listableObjectComponent(BrowseEntry, ViewMode.ListElement, DEFAULT_CONTEXT, 'custom')
+import { AccessControlRoutingModule } from '../../access-control/access-control-routing.module';
+import { BrowseByRoutingModule } from '../../browse-by/browse-by-routing.module';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
+import { ConfigurationDataService } from '../../core/data/configuration-data.service';
+
+@listableObjectComponent(BrowseEntry, ViewMode.ListElement, DEFAULT_CONTEXT, 'dspace')
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
-  selector: '',
-  template: '',
+  selector: 'ds-browse-entry-list-element',
+  template: ''
 })
 class MockThemedBrowseEntryListElementComponent {
 }
@@ -71,28 +54,6 @@ describe('BrowseByComponent', () => {
   let comp: BrowseByComponent;
   let fixture: ComponentFixture;
 
-  const mockItems = [
-    Object.assign(new Item(), {
-      id: 'fakeId-1',
-      metadata: [
-        {
-          key: 'dc.title',
-          value: 'First Fake Title',
-        },
-      ],
-    }),
-    Object.assign(new Item(), {
-      id: 'fakeId-2',
-      metadata: [
-        {
-          key: 'dc.title',
-          value: 'Second Fake Title',
-        },
-      ],
-    }),
-  ];
-  const mockItemsRD$ = createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), mockItems));
-
   const groupDataService = jasmine.createSpyObj('groupsDataService', {
     findListByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
     getGroupRegistryRouterLink: '',
@@ -123,8 +84,8 @@ describe('BrowseByComponent', () => {
   let themeService;
 
   beforeEach(waitForAsync(() => {
-    themeService = getMockThemeService('dspace');
-    TestBed.configureTestingModule({
+    themeService = getMockThemeService('base');
+    void TestBed.configureTestingModule({
       imports: [
         BrowseByRoutingModule,
         AccessControlRoutingModule,
@@ -210,40 +171,40 @@ describe('BrowseByComponent', () => {
     });
 
     describe('when theme is base', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         themeService.getThemeName.and.returnValue('base');
         themeService.getThemeName$.and.returnValue(observableOf('base'));
         fixture.detectChanges();
+        await fixture.whenStable();
+        fixture.detectChanges();
       });
 
       it('should use the base component to render browse entries', () => {
-        waitForAsync(() => {
-          const componentLoaders = fixture.debugElement.queryAll(By.directive(ListableObjectComponentLoaderComponent));
-          expect(componentLoaders.length).toEqual(browseEntries.length);
-          componentLoaders.forEach((componentLoader) => {
-            const browseEntry = componentLoader.query(By.css('ds-browse-entry-list-element'));
-            expect(browseEntry.componentInstance).toBeInstanceOf(BrowseEntryListElementComponent);
-          });
+        const componentLoaders = fixture.debugElement.queryAll(By.directive(ListableObjectComponentLoaderComponent));
+        expect(componentLoaders.length).toEqual(browseEntries.length);
+        componentLoaders.forEach((componentLoader) => {
+          const browseEntry = componentLoader.query(By.css('ds-browse-entry-list-element'));
+          expect(browseEntry.componentInstance).toBeInstanceOf(BrowseEntryListElementComponent);
         });
       });
     });
 
-    describe('when theme is custom', () => {
-      beforeEach(() => {
-        themeService.getThemeName.and.returnValue('custom');
-        themeService.getThemeName$.and.returnValue(observableOf('custom'));
+    describe('when theme is dspace', () => {
+      beforeEach(async () => {
+        themeService.getThemeName.and.returnValue('dspace');
+        themeService.getThemeName$.and.returnValue(observableOf('dspace'));
+        fixture.detectChanges();
+        await fixture.whenStable();
         fixture.detectChanges();
       });
 
       it('should use the themed component to render browse entries', () => {
-        waitForAsync(() => {
           const componentLoaders = fixture.debugElement.queryAll(By.directive(ListableObjectComponentLoaderComponent));
           expect(componentLoaders.length).toEqual(browseEntries.length);
           componentLoaders.forEach((componentLoader) => {
             const browseEntry = componentLoader.query(By.css('ds-browse-entry-list-element'));
             expect(browseEntry.componentInstance).toBeInstanceOf(MockThemedBrowseEntryListElementComponent);
           });
-        });
       });
     });
   });
diff --git a/src/app/shared/browse-by/browse-by.component.ts b/src/app/shared/browse-by/browse-by.component.ts
index 339a67eda0..7b8699dc05 100644
--- a/src/app/shared/browse-by/browse-by.component.ts
+++ b/src/app/shared/browse-by/browse-by.component.ts
@@ -1,41 +1,18 @@
-import {
-  Component,
-  EventEmitter,
-  Injector,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import {
-  BehaviorSubject,
-  combineLatest as observableCombineLatest,
-  Observable,
-  Subscription,
-} from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import {
-  SortDirection,
-  SortOptions,
-} from '../../core/cache/models/sort-options.model';
-import { PaginatedList } from '../../core/data/paginated-list.model';
+import { Component, EventEmitter, Injector, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
+import { fadeIn, fadeInOut } from '../animations/fade';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+import { StartsWithType } from '../starts-with/starts-with-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { RouteService } from '../../core/services/route.service';
 import { ViewMode } from '../../core/shared/view-mode.model';
-import {
-  fadeIn,
-  fadeInOut,
-} from '../animations/fade';
 import { hasValue } from '../empty.util';
-import { ListableObject } from '../object-collection/shared/listable-object.model';
-import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
-import {
-  getStartsWithComponent,
-  StartsWithType,
-} from '../starts-with/starts-with-decorator';
+import { map } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ds-browse-by',
@@ -49,7 +26,7 @@ import {
 /**
  * Component to display a browse-by page for any ListableObject
  */
-export class BrowseByComponent implements OnInit, OnDestroy {
+export class BrowseByComponent implements OnInit, OnChanges, OnDestroy {
 
   /**
    * ViewMode that should be passed to {@link ListableObjectComponentLoaderComponent}.
@@ -62,9 +39,10 @@ export class BrowseByComponent implements OnInit, OnDestroy {
   @Input() title: string;
 
   /**
-   * The parent name
+   * Whether the title should be displayed
    */
-  @Input() parentname: string;
+  @Input() displayTitle = true;
+
   /**
    * The list of objects to display
    */
@@ -89,7 +67,7 @@ export class BrowseByComponent implements OnInit, OnDestroy {
   /**
    * The list of options to render for the StartsWith component
    */
-  @Input() startsWithOptions = [];
+  @Input() startsWithOptions: (string | number)[] = [];
 
   /**
    * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
@@ -121,16 +99,6 @@ export class BrowseByComponent implements OnInit, OnDestroy {
    */
   @Output() sortDirectionChange = new EventEmitter();
 
-  /**
-   * An object injector used to inject the startsWithOptions to the switchable StartsWith component
-   */
-  objectInjector: Injector;
-
-  /**
-   * Declare SortDirection enumeration to use it in the template
-   */
-  public sortDirections = SortDirection;
-
   /**
    * Observable that tracks if the back button should be displayed based on the path parameters
    */
@@ -181,44 +149,19 @@ export class BrowseByComponent implements OnInit, OnDestroy {
     this.next.emit(true);
   }
 
-  /**
-   * Change the page size
-   * @param size
-   */
-  doPageSizeChange(size) {
-    this.paginationService.updateRoute(this.paginationConfig.id,{ pageSize: size });
-  }
-
-  /**
-   * Change the sort direction
-   * @param direction
-   */
-  doSortDirectionChange(direction) {
-    this.paginationService.updateRoute(this.paginationConfig.id,{ sortDirection: direction });
-  }
-
-  /**
-   * Get the switchable StartsWith component dependant on the type
-   */
-  getStartsWithComponent() {
-    return getStartsWithComponent(this.type);
-  }
-
   ngOnInit(): void {
-    this.objectInjector = Injector.create({
-      providers: [
-        { provide: 'startsWithOptions', useFactory: () => (this.startsWithOptions), deps:[] },
-        { provide: 'paginationId', useFactory: () => (this.paginationConfig?.id), deps:[] },
-      ],
-      parent: this.injector,
-    });
-
     const startsWith$ = this.routeService.getQueryParameterValue('startsWith');
     const value$ = this.routeService.getQueryParameterValue('value');
 
     this.shouldDisplayResetButton$ = observableCombineLatest([startsWith$, value$]).pipe(
       map(([startsWith, value]) => hasValue(startsWith) || hasValue(value)),
     );
+  }
+
+  ngOnChanges(): void {
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
     this.sub = this.routeService.getQueryParameterValue(this.paginationConfig.id + '.return').subscribe(this.previousPage$);
   }
 
diff --git a/src/app/shared/browse-by/shared-browse-by.module.ts b/src/app/shared/browse-by/shared-browse-by.module.ts
index a2a91c6849..d41733dbfd 100644
--- a/src/app/shared/browse-by/shared-browse-by.module.ts
+++ b/src/app/shared/browse-by/shared-browse-by.module.ts
@@ -28,4 +28,5 @@ const DECLARATIONS = [
     ...DECLARATIONS,
   ],
 })
-export class SharedBrowseByModule { }
+export class SharedBrowseByModule {
+}
diff --git a/src/app/shared/browse-by/themed-browse-by.component.ts b/src/app/shared/browse-by/themed-browse-by.component.ts
index ba7501ebb4..95809ad9b0 100644
--- a/src/app/shared/browse-by/themed-browse-by.component.ts
+++ b/src/app/shared/browse-by/themed-browse-by.component.ts
@@ -30,7 +30,7 @@ export class ThemedBrowseByComponent extends ThemedComponent
 
   @Input() title: string;
 
-  @Input() parentname: string;
+  @Input() displayTitle: boolean;
 
   @Input() objects$: Observable>>;
 
@@ -40,7 +40,7 @@ export class ThemedBrowseByComponent extends ThemedComponent
 
   @Input() type: StartsWithType;
 
-  @Input() startsWithOptions: number[];
+  @Input() startsWithOptions: (string | number)[];
 
   @Input() showPaginator: boolean;
 
@@ -56,7 +56,7 @@ export class ThemedBrowseByComponent extends ThemedComponent
 
   protected inAndOutputNames: (keyof BrowseByComponent & keyof this)[] = [
     'title',
-    'parentname',
+    'displayTitle',
     'objects$',
     'paginationConfig',
     'sortConfig',
diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html
index 875d289a19..30fcdf887b 100644
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.html
+++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html
@@ -1,4 +1,4 @@
-

+

   
 

-

-
    
+
diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.scss b/src/app/shared/collection-dropdown/collection-dropdown.component.scss
index 907a111900..8a28a3ff7e 100644
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.scss
+++ b/src/app/shared/collection-dropdown/collection-dropdown.component.scss
@@ -4,7 +4,8 @@
   overflow-x: hidden;
 }
 
-.collection-item {
+li:not(:last-of-type), .dropdown-divider {
+  border-top: none;
   border-bottom: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
 }
 
diff --git a/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html b/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
index b7b3d344b1..c79dba42b7 100644
--- a/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
+++ b/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
@@ -1,13 +1,13 @@
 
    
   
    
-    
    
-      
+    
    
+      {{type.value + '.edit.logo.label' | translate}}
     
    
     
       
    
         
    
           
    
-            
+            
           
    
           
    
             
    
@@ -27,6 +27,7 @@
       
    
       
    
         
   
 
diff --git a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
index c397966fba..a8ca674c26 100644
--- a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
+++ b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
@@ -5,8 +5,9 @@
         
    {{ type + '.edit.head' | translate }}
    
         
    
           
-             {{type + '.edit.delete' | translate}}
+             [routerLink]="((type === 'community') ? '/communities/' : '/collections/') + (dsoRD$ | async)?.payload.uuid + '/delete'"
+             data-test="delete-button">
+             {{type + '.edit.delete' | translate}}
         
    
       
    
       
    
@@ -14,7 +15,8 @@
           
  • 
             
+               [routerLink]="['./' + page]"
+               [attr.data-test]="page">
               {{ type + '.edit.tabs.' + page + '.head' | translate}}
             
           
    • 
@@ -25,7 +27,7 @@
           
    
           
    
             
-               {{ type + '.edit.return' | translate }}
+               {{ type + '.edit.return' | translate }}
             
           
    
         
    
diff --git a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
index 504d9f4bcd..b0d72f4a72 100644
--- a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
+++ b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
@@ -1,13 +1,17 @@
-
    {{'browse.comcol.head' | translate}}
    
-
    
     
    
         
-        
    
+        
    
             
    
             
    
                 {{'dso-selector.create.community.or-divider' | translate}}
             
    
-        
    
+        
    
 
-        
    {{'dso-selector.create.community.sub-level' | translate}}
    
+        {{'dso-selector.create.community.sub-level' | translate}}
         
     
    
 
    
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
index 5fccd58f48..5288f08e02 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
@@ -5,7 +5,7 @@
     
   
    
   
    
-    
    {{header | translate}}
    
+    {{header | translate}}
     
   
    
   
    
-    
    {{header | translate}}
    
+    {{header | translate}}
     
   
    
 
    
diff --git a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts
index 50b6dc6c3f..4d4271e4e9 100644
--- a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts
@@ -1,16 +1,7 @@
-import {
-  Component,
-  DebugElement,
-  NO_ERRORS_SCHEMA,
-  OnInit,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { Component, DebugElement, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
@@ -18,13 +9,11 @@ import { MockComponent } from 'ng-mocks';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { DSpaceObjectType } from '../../../core/shared/dspace-object-type.model';
 import { Item } from '../../../core/shared/item.model';
+import { DSOSelectorModalWrapperComponent, SelectorActionType } from './dso-selector-modal-wrapper.component';
+import { DSOSelectorComponent } from '../dso-selector/dso-selector.component';
 import { MetadataValue } from '../../../core/shared/metadata.models';
 import { createSuccessfulRemoteDataObject } from '../../remote-data.utils';
-import { DSOSelectorComponent } from '../dso-selector/dso-selector.component';
-import {
-  DSOSelectorModalWrapperComponent,
-  SelectorActionType,
-} from './dso-selector-modal-wrapper.component';
+import { hasValue } from '../../empty.util';
 
 describe('DSOSelectorModalWrapperComponent', () => {
   let component: DSOSelectorModalWrapperComponent;
@@ -96,6 +85,20 @@ describe('DSOSelectorModalWrapperComponent', () => {
     });
   });
 
+  describe('selectObject with emit only', () => {
+    beforeEach(() => {
+      spyOn(component, 'navigate');
+      spyOn(component, 'close');
+      spyOn(component.select, 'emit');
+      component.emitOnly = true;
+      component.selectObject(item);
+    });
+    it('should call the close and navigate method on the component with the given DSO', () => {
+      expect(component.close).toHaveBeenCalled();
+      expect(component.select.emit).toHaveBeenCalledWith(item);
+    });
+  });
+
   describe('close', () => {
     beforeEach(() => {
       component.close();
@@ -126,6 +129,19 @@ describe('DSOSelectorModalWrapperComponent', () => {
       expect(component.close).toHaveBeenCalled();
     });
   });
+
+  describe('should find route data', () => {
+    beforeEach(() => {
+      spyOn(component, 'findRouteData');
+      component.ngOnInit();
+    });
+    it('should call the findRouteData method on the component', () => {
+      expect(component.findRouteData).toHaveBeenCalled();
+    });
+    it('should return undefined', () => {
+      expect(component.findRouteData((route) => hasValue(route.data), {} as unknown as ActivatedRouteSnapshot)).toEqual(undefined);
+    });
+  });
 });
 
 @Component({
diff --git a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.ts b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.ts
index 028ce7cef3..2fba005d48 100644
--- a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.ts
@@ -1,22 +1,12 @@
-import {
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  ActivatedRouteSnapshot,
-} from '@angular/router';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { RemoteData } from '../../../core/data/remote-data';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { SortOptions } from '../../../core/cache/models/sort-options.model';
-import { RemoteData } from '../../../core/data/remote-data';
-import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { DSpaceObjectType } from '../../../core/shared/dspace-object-type.model';
-import {
-  hasValue,
-  isNotEmpty,
-} from '../../empty.util';
+import { hasValue, isNotEmpty } from '../../empty.util';
 
 export enum SelectorActionType {
   CREATE = 'create',
@@ -40,6 +30,11 @@ export abstract class DSOSelectorModalWrapperComponent implements OnInit {
    */
   @Input() dsoRD: RemoteData;
 
+  /**
+   * Representing if component should emit value of selected entries or navigate
+   */
+  @Input() emitOnly = false;
+
   /**
    * Optional header to display above the selection list
    * Supports i18n keys
@@ -61,6 +56,11 @@ export abstract class DSOSelectorModalWrapperComponent implements OnInit {
    */
   action: SelectorActionType;
 
+  /**
+   * Event emitted when a DSO entry is selected if emitOnly is set to true
+   */
+  @Output() select: EventEmitter = new EventEmitter();
+
   /**
    * Default DSO ordering
    */
@@ -104,7 +104,11 @@ export abstract class DSOSelectorModalWrapperComponent implements OnInit {
    */
   selectObject(dso: DSpaceObject) {
     this.close();
-    this.navigate(dso);
+    if (this.emitOnly) {
+      this.select.emit(dso);
+    } else {
+      this.navigate(dso);
+    }
   }
 
   /**
diff --git a/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
index 85d8797e66..999a96e730 100644
--- a/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
@@ -5,7 +5,7 @@
     
   
    
   
    
-    
    {{header | translate}}
    
+    {{header | translate}}
     
   
    
 
    
diff --git a/src/app/shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component.ts b/src/app/shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component.ts
index 1480b765d9..730c83e258 100644
--- a/src/app/shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component.ts
@@ -1,31 +1,13 @@
-import {
-  Component,
-  OnInit,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
-import {
-  NgbActiveModal,
-  NgbModal,
-} from '@ng-bootstrap/ng-bootstrap';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
-import {
-  Observable,
-  of as observableOf,
-} from 'rxjs';
-import {
-  map,
-  switchMap,
-} from 'rxjs/operators';
+import { Observable, of as observableOf } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 
 import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../../../core/data/feature-authorization/feature-id';
-import {
-  BATCH_EXPORT_SCRIPT_NAME,
-  ScriptDataService,
-} from '../../../../core/data/processes/script-data.service';
+import { BATCH_EXPORT_SCRIPT_NAME, ScriptDataService } from '../../../../core/data/processes/script-data.service';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { Collection } from '../../../../core/shared/collection.model';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
@@ -38,10 +20,8 @@ import { ConfirmationModalComponent } from '../../../confirmation-modal/confirma
 import { isNotEmpty } from '../../../empty.util';
 import { NotificationsService } from '../../../notifications/notifications.service';
 import { createSuccessfulRemoteDataObject } from '../../../remote-data.utils';
-import {
-  DSOSelectorModalWrapperComponent,
-  SelectorActionType,
-} from '../dso-selector-modal-wrapper.component';
+import { DSOSelectorModalWrapperComponent, SelectorActionType } from '../dso-selector-modal-wrapper.component';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * Component to wrap a list of existing dso's inside a modal
@@ -60,6 +40,7 @@ export class ExportBatchSelectorComponent extends DSOSelectorModalWrapperCompone
               protected notificationsService: NotificationsService, protected translationService: TranslateService,
               protected scriptDataService: ScriptDataService,
               protected authorizationDataService: AuthorizationDataService,
+              protected dsoNameService: DSONameService,
               private modalService: NgbModal) {
     super(activeModal, route);
   }
@@ -71,7 +52,7 @@ export class ExportBatchSelectorComponent extends DSOSelectorModalWrapperCompone
   navigate(dso: DSpaceObject): Observable {
     if (dso instanceof Collection) {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = dso;
+      modalRef.componentInstance.name = this.dsoNameService.getName(dso);
       modalRef.componentInstance.headerLabel = 'confirmation-modal.export-batch.header';
       modalRef.componentInstance.infoLabel = 'confirmation-modal.export-batch.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.export-batch.cancel';
diff --git a/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts b/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts
index c3b0aac2e1..11cb029e2a 100644
--- a/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts
@@ -1,31 +1,13 @@
-import {
-  Component,
-  OnInit,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Router,
-} from '@angular/router';
-import {
-  NgbActiveModal,
-  NgbModal,
-} from '@ng-bootstrap/ng-bootstrap';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
-import {
-  Observable,
-  of as observableOf,
-} from 'rxjs';
-import {
-  map,
-  switchMap,
-} from 'rxjs/operators';
+import { Observable, of as observableOf } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 
 import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../../../core/data/feature-authorization/feature-id';
-import {
-  METADATA_EXPORT_SCRIPT_NAME,
-  ScriptDataService,
-} from '../../../../core/data/processes/script-data.service';
+import { METADATA_EXPORT_SCRIPT_NAME, ScriptDataService } from '../../../../core/data/processes/script-data.service';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { Collection } from '../../../../core/shared/collection.model';
 import { Community } from '../../../../core/shared/community.model';
@@ -39,10 +21,8 @@ import { ConfirmationModalComponent } from '../../../confirmation-modal/confirma
 import { isNotEmpty } from '../../../empty.util';
 import { NotificationsService } from '../../../notifications/notifications.service';
 import { createSuccessfulRemoteDataObject } from '../../../remote-data.utils';
-import {
-  DSOSelectorModalWrapperComponent,
-  SelectorActionType,
-} from '../dso-selector-modal-wrapper.component';
+import { DSOSelectorModalWrapperComponent, SelectorActionType } from '../dso-selector-modal-wrapper.component';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * Component to wrap a list of existing dso's inside a modal
@@ -61,6 +41,7 @@ export class ExportMetadataSelectorComponent extends DSOSelectorModalWrapperComp
               protected notificationsService: NotificationsService, protected translationService: TranslateService,
               protected scriptDataService: ScriptDataService,
               protected authorizationDataService: AuthorizationDataService,
+              protected dsoNameService: DSONameService,
               private modalService: NgbModal) {
     super(activeModal, route);
   }
@@ -72,7 +53,7 @@ export class ExportMetadataSelectorComponent extends DSOSelectorModalWrapperComp
   navigate(dso: DSpaceObject): Observable {
     if (dso instanceof Collection || dso instanceof Community) {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = dso;
+      modalRef.componentInstance.name = this.dsoNameService.getName(dso);
       modalRef.componentInstance.headerLabel = 'confirmation-modal.export-metadata.header';
       modalRef.componentInstance.infoLabel = 'confirmation-modal.export-metadata.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.export-metadata.cancel';
diff --git a/src/app/shared/entity-dropdown/entity-dropdown.component.html b/src/app/shared/entity-dropdown/entity-dropdown.component.html
index 13f9b02749..40a704fb20 100644
--- a/src/app/shared/entity-dropdown/entity-dropdown.component.html
+++ b/src/app/shared/entity-dropdown/entity-dropdown.component.html
@@ -1,6 +1,5 @@
-
+  
+
diff --git a/src/app/shared/entity-dropdown/entity-dropdown.component.scss b/src/app/shared/entity-dropdown/entity-dropdown.component.scss
index a5f43f359b..4f9ca62310 100644
--- a/src/app/shared/entity-dropdown/entity-dropdown.component.scss
+++ b/src/app/shared/entity-dropdown/entity-dropdown.component.scss
@@ -1,5 +1,9 @@
-.list-item:active {
-  color: white !important;
+.dropdown-item {
+  padding: 0.35rem 1rem;
+
+  &:active {
+    color: white !important;
+  }
 }
 
 .scrollable-menu {
@@ -8,7 +12,7 @@
   overflow-x: hidden;
 }
 
-.entity-item {
+li:not(:last-of-type) .dropdown-item {
   border-bottom: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
 }
 
diff --git a/src/app/shared/entity-dropdown/entity-dropdown.component.spec.ts b/src/app/shared/entity-dropdown/entity-dropdown.component.spec.ts
index 44ed9687de..cdb59c4fe3 100644
--- a/src/app/shared/entity-dropdown/entity-dropdown.component.spec.ts
+++ b/src/app/shared/entity-dropdown/entity-dropdown.component.spec.ts
@@ -1,14 +1,5 @@
-import {
-  ChangeDetectorRef,
-  NO_ERRORS_SCHEMA,
-  Pipe,
-  PipeTransform,
-} from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
+import { ChangeDetectorRef, NO_ERRORS_SCHEMA, Pipe, PipeTransform } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { getTestScheduler } from 'jasmine-marbles';
 import { TestScheduler } from 'rxjs/testing';
@@ -133,7 +124,7 @@ describe('EntityDropdownComponent', () => {
     scheduler.flush();
 
     spyOn(component, 'onSelect');
-    const entityItem = fixture.debugElement.query(By.css('.entity-item:nth-child(2)'));
+    const entityItem = fixture.debugElement.query(By.css('.entity-item:nth-child(2) button'));
     entityItem.triggerEventHandler('click', null);
 
     scheduler.schedule(() => fixture.detectChanges());
diff --git a/src/app/shared/eperson-group-list/eperson-group-list.component.ts b/src/app/shared/eperson-group-list/eperson-group-list.component.ts
index 420022fcc8..e6f2c48a9a 100644
--- a/src/app/shared/eperson-group-list/eperson-group-list.component.ts
+++ b/src/app/shared/eperson-group-list/eperson-group-list.component.ts
@@ -1,18 +1,6 @@
-import {
-  Component,
-  EventEmitter,
-  Injector,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-} from '@angular/core';
+import { Component, EventEmitter, Injector, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import uniqueId from 'lodash/uniqueId';
-import {
-  BehaviorSubject,
-  Observable,
-  Subscription,
-} from 'rxjs';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
@@ -29,10 +17,7 @@ import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { ResourceType } from '../../core/shared/resource-type';
 import { fadeInOut } from '../animations/fade';
-import {
-  hasValue,
-  isNotEmpty,
-} from '../empty.util';
+import { hasValue, isNotEmpty } from '../empty.util';
 import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
 
 export interface SearchEvent {
@@ -110,7 +95,7 @@ export class EpersonGroupListComponent implements OnInit, OnDestroy {
   private pageConfigSub: Subscription;
 
   /**
-   * Initialize instance variables and inject the properly DataService
+   * Initialize instance variables and inject the properly UpdateDataServiceImpl
    *
    * @param {DSONameService} dsoNameService
    * @param {Injector} parentInjector
diff --git a/src/app/shared/file-download-link/file-download-link.component.html b/src/app/shared/file-download-link/file-download-link.component.html
index 4f4e4d15b9..d773519543 100644
--- a/src/app/shared/file-download-link/file-download-link.component.html
+++ b/src/app/shared/file-download-link/file-download-link.component.html
@@ -1,5 +1,5 @@
 
-  
+  
   
 
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
index 9e1f1d48aa..606db29db3 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -45,7 +45,9 @@
       
     
    
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html
index ed117a5021..5beb8d52da 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html
@@ -1,4 +1,4 @@
-
    
+
    
   
   
 
    
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.scss
index e69de29bb2..206ad17492 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.scss
@@ -0,0 +1,16 @@
+div.custom-switch {
+  &.custom-control-right {
+    margin-left: 0;
+    margin-right: 0;
+
+    &::after {
+      right: -1.5rem;
+      left: auto;
+    }
+
+    &::before {
+      right: -2.35rem;
+      left: auto;
+    }
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.spec.ts
index 32d75224a2..9e87fb4d7b 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.spec.ts
@@ -1,23 +1,12 @@
+import { DynamicFormsCoreModule, DynamicFormService } from '@ng-dynamic-forms/core';
+import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
-import {
-  ComponentFixture,
-  inject,
-  TestBed,
-  waitForAsync,
-} from '@angular/core/testing';
-import {
-  ReactiveFormsModule,
-  UntypedFormGroup,
-} from '@angular/forms';
-import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  DynamicFormsCoreModule,
-  DynamicFormService,
-} from '@ng-dynamic-forms/core';
 
 import { CustomSwitchComponent } from './custom-switch.component';
 import { DynamicCustomSwitchModel } from './custom-switch.model';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('CustomSwitchComponent', () => {
 
@@ -32,6 +21,7 @@ describe('CustomSwitchComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
+        TranslateModule.forRoot(),
         ReactiveFormsModule,
         NoopAnimationsModule,
         DynamicFormsCoreModule.forRoot(),
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
index 26803f3c67..3bf02c4abd 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
@@ -4,7 +4,7 @@
       {{model.placeholder}} *
     
     
 
     
 
      {
+  getInitValueFromModel(preserveConfidence = false): Observable {
     let initValue$: Observable;
     if (isNotEmpty(this.model.value) && (this.model.value instanceof FormFieldMetadataValueObject) && !this.model.value.hasAuthorityToGenerate()) {
       let initEntry$: Observable;
@@ -70,7 +59,7 @@ export abstract class DsDynamicVocabularyComponent extends DynamicFormControlCom
       initValue$ = initEntry$.pipe(map((initEntry: VocabularyEntry) => {
         if (isNotEmpty(initEntry)) {
           // Integrate FormFieldMetadataValueObject with retrieved information
-          return new FormFieldMetadataValueObject(
+          let formField = new FormFieldMetadataValueObject(
             initEntry.value,
             null,
             initEntry.authority,
@@ -79,6 +68,11 @@ export abstract class DsDynamicVocabularyComponent extends DynamicFormControlCom
             null,
             initEntry.otherInformation || null,
           );
+          // Preserve the original confidence
+          if (preserveConfidence) {
+            formField.confidence = (this.model.value as any).confidence;
+          }
+          return formField;
         } else {
           return this.model.value as any;
         }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
index 65d8a1176e..89e7af9aa6 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -88,7 +88,6 @@
        aria-expanded="false"
        [attr.aria-labelledby]="'label_' + model.id">
     
    
 
 
-
    
-  
-  
+  
+