Merge remote-tracking branch 'github/main' into DURACOM-191-20240304-align-to-main

# Conflicts:
#	src/app/admin/admin-notifications/admin-notifications-routing.module.ts
#	src/app/admin/admin-notifications/admin-notifications.module.ts
#	src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.spec.ts
#	src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.ts
#	src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component.spec.ts
#	src/app/admin/admin-routing.module.ts
#	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
#	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
#	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
#	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
#	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
#	src/app/admin/admin.module.ts
#	src/app/app-routing.module.ts
#	src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
#	src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts
#	src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
#	src/app/browse-by/browse-by-date/browse-by-date.component.ts
#	src/app/browse-by/browse-by-guard.spec.ts
#	src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts
#	src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
#	src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
#	src/app/browse-by/browse-by-page.module.ts
#	src/app/browse-by/browse-by-routing.module.ts
#	src/app/browse-by/browse-by-switcher/browse-by-data-type.ts
#	src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts
#	src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
#	src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
#	src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
#	src/app/browse-by/browse-by-switcher/dynamic-component-loader.directive.ts
#	src/app/browse-by/browse-by-switcher/themed-browse-by-switcher.component.ts
#	src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts
#	src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
#	src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
#	src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
#	src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts
#	src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
#	src/app/browse-by/browse-by.module.ts
#	src/app/collection-page/collection-page-routing.module.ts
#	src/app/collection-page/collection-page.component.ts
#	src/app/collection-page/collection-page.module.ts
#	src/app/community-page/community-page-routing.module.ts
#	src/app/community-page/community-page.module.ts
#	src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.spec.ts
#	src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
#	src/app/community-page/sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component.ts
#	src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.spec.ts
#	src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
#	src/app/community-page/sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component.ts
#	src/app/core/data/processes/process-data.service.ts
#	src/app/core/shared/non-hierarchical-browse-definition.ts
#	src/app/core/submission/vocabularies/vocabulary.data.service.ts
#	src/app/core/submission/workspaceitem-data.service.ts
#	src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts
#	src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts
#	src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
#	src/app/dso-shared/dso-shared.module.ts
#	src/app/footer/footer.component.spec.ts
#	src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
#	src/app/header/header.component.ts
#	src/app/home-page/home-page.component.ts
#	src/app/home-page/home-page.module.ts
#	src/app/info/info-routing.module.ts
#	src/app/item-page/alerts/item-alerts.component.spec.ts
#	src/app/item-page/alerts/item-alerts.component.ts
#	src/app/item-page/field-components/metadata-values/metadata-values.component.ts
#	src/app/item-page/full/full-item-page.component.spec.ts
#	src/app/item-page/full/full-item-page.component.ts
#	src/app/item-page/item-shared.module.ts
#	src/app/item-page/simple/item-page.component.spec.ts
#	src/app/item-page/simple/item-page.component.ts
#	src/app/menu.resolver.spec.ts
#	src/app/my-dspace-page/my-dspace-page.module.ts
#	src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
#	src/app/navbar/navbar.component.spec.ts
#	src/app/notifications/notifications.module.ts
#	src/app/notifications/qa/events/quality-assurance-events.component.ts
#	src/app/notifications/qa/source/quality-assurance-source.component.ts
#	src/app/notifications/qa/topics/quality-assurance-topics.component.spec.ts
#	src/app/notifications/qa/topics/quality-assurance-topics.component.ts
#	src/app/process-page/detail/process-detail.component.spec.ts
#	src/app/process-page/detail/process-detail.component.ts
#	src/app/process-page/form/process-form.component.ts
#	src/app/process-page/overview/process-overview.component.spec.ts
#	src/app/process-page/overview/process-overview.component.ts
#	src/app/process-page/process-page-shared.module.ts
#	src/app/profile-page/profile-page.module.ts
#	src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.spec.ts
#	src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.ts
#	src/app/quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page.component.ts
#	src/app/root/root.component.ts
#	src/app/search-page/configuration-search-page.component.ts
#	src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
#	src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts
#	src/app/shared/comcol/comcol.module.ts
#	src/app/shared/dso-page/dso-edit-menu.resolver.spec.ts
#	src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts
#	src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.spec.ts
#	src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
#	src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts
#	src/app/shared/menu/menu-item/external-link-menu-item.component.ts
#	src/app/shared/menu/menu-item/link-menu-item.component.ts
#	src/app/shared/menu/menu-item/onclick-menu-item.component.ts
#	src/app/shared/menu/menu-item/text-menu-item.component.ts
#	src/app/shared/metadata-representation/metadata-representation-loader.component.spec.ts
#	src/app/shared/metadata-representation/metadata-representation-loader.component.ts
#	src/app/shared/metadata-representation/metadata-representation.directive.ts
#	src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component.spec.ts
#	src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component.ts
#	src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions.directive.ts
#	src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.spec.ts
#	src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
#	src/app/shared/object-collection/shared/listable-object/listable-object.directive.ts
#	src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.spec.ts
#	src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts
#	src/app/shared/search/search-filters/search-filters.component.spec.ts
#	src/app/shared/search/search-filters/search-filters.component.ts
#	src/app/shared/search/search-settings/search-settings.component.spec.ts
#	src/app/shared/search/search.component.spec.ts
#	src/app/shared/search/search.component.ts
#	src/app/shared/search/themed-search.component.ts
#	src/app/shared/shared.module.ts
#	src/app/shared/starts-with/date/starts-with-date.component.spec.ts
#	src/app/shared/starts-with/date/starts-with-date.component.ts
#	src/app/shared/starts-with/text/starts-with-text.component.spec.ts
#	src/app/shared/testing/vocabulary-service.stub.ts
#	src/app/submission/form/submission-form.component.html
#	src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.spec.ts
#	src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts
#	src/app/submission/sections/upload/section-upload.component.html
#	src/app/submission/sections/upload/section-upload.component.ts
#	src/app/submission/submission.module.ts
#	src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-actions-loader/advanced-workflow-actions-loader.component.spec.ts
#	src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-actions-loader/advanced-workflow-actions-loader.component.ts
#	src/app/workflowitems-edit-page/workflowitems-edit-page.module.ts
#	src/config/app-config.interface.ts
#	src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
#	src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
#	src/themes/custom/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
#	src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
#	src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
#	src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts
#	src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.ts
#	src/themes/custom/eager-theme.module.ts
#	src/themes/custom/lazy-theme.module.ts
#	src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
#	src/themes/dspace/app/header/header.component.ts

.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:

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.
@@ -136,7 +136,7 @@ submission:
       # 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 +147,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 +294,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 +309,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 +415,21 @@ 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' ]

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

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

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

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

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

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

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

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

cypress/e2e/collection-edit.cy.ts

@@ -45,7 +45,7 @@ describe('Edit Collection > Content Source tab', () => {
         cy.get('#externalSourceCheck').check();
 
         // Wait for the source controls to appear
-        cy.get('ds-collection-source-controls').should('be.visible');
+        // cy.get('ds-collection-source-controls').should('be.visible');
 
         // Analyze entire page for accessibility issues
         testA11y('ds-collection-source');

cypress/e2e/collection-statistics.cy.ts

@@ -6,7 +6,7 @@ describe('Collection Statistics Page', () => {
 
     it('should load if you click on "Statistics" from a Collection page', () => {
         cy.visit('/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')));
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+        cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
         cy.location('pathname').should('eq', COLLECTIONSTATISTICSPAGE);
     });
 

cypress/e2e/community-statistics.cy.ts

@@ -6,7 +6,7 @@ describe('Community Statistics Page', () => {
 
     it('should load if you click on "Statistics" from a Community page', () => {
         cy.visit('/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')));
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+        cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
         cy.location('pathname').should('eq', COMMUNITYSTATISTICSPAGE);
     });
 

cypress/e2e/homepage-statistics.cy.ts

@@ -5,7 +5,7 @@ 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');
     });
 

cypress/e2e/item-statistics.cy.ts

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

cypress/e2e/login-modal.cy.ts

@@ -3,31 +3,31 @@ 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');
@@ -102,10 +102,10 @@ 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');
 
@@ -119,10 +119,10 @@ 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');
 

cypress/e2e/search-navbar.cy.ts

@@ -1,15 +1,15 @@
 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();
     }
 };
 

docker/cli.assetstore.yml

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

docker/cli.yml

@@ -13,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:

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:

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:

package.json

@@ -142,7 +142,7 @@
     "@angular-eslint/eslint-plugin-template": "15.2.1",
     "@angular-eslint/schematics": "15.2.1",
     "@angular-eslint/template-parser": "15.2.1",
-    "@angular/cli": "^15.2.6",
+    "@angular/cli": "^16.0.4",
     "@angular/compiler-cli": "^15.2.8",
     "@angular/language-service": "^15.2.8",
     "@cypress/schematic": "^1.5.0",
@@ -170,7 +170,7 @@
     "eslint": "^8.39.0",
     "eslint-plugin-deprecation": "^1.4.1",
     "eslint-plugin-import": "^2.27.5",
-    "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-unused-imports": "^2.0.0",

src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts

@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LdnServicesOverviewComponent } from './ldn-services-directory/ldn-services-directory.component';
+import { NavigationBreadcrumbResolver } from '../../core/breadcrumbs/navigation-breadcrumb.resolver';
+import { I18nBreadcrumbResolver } from '../../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { LdnServiceFormComponent } from './ldn-service-form/ldn-service-form.component';
+
+
+const moduleRoutes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: LdnServicesOverviewComponent,
+    resolve: {breadcrumb: I18nBreadcrumbResolver},
+    data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
+  },
+  {
+    path: 'new',
+    resolve: {breadcrumb: NavigationBreadcrumbResolver},
+    component: LdnServiceFormComponent,
+    data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
+  },
+  {
+    path: 'edit/:serviceId',
+    resolve: {breadcrumb: NavigationBreadcrumbResolver},
+    component: LdnServiceFormComponent,
+    data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
+  },
+];
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(moduleRoutes.map(route => {
+      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 {
+
+}

src/app/admin/admin-ldn-services/admin-ldn-services.module.ts

@@ -0,0 +1,25 @@
+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 {
+}

src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html

@@ -0,0 +1,310 @@
+<div class="container">
+  <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
+    <div class="d-flex">
+      <h1 class="flex-grow-1">{{ isNewService ? ('ldn-create-service.title' | translate) : ('ldn-edit-registered-service.title' | translate) }}</h1>
+    </div>
+    <!-- In the toggle section -->
+    <div class="toggle-switch-container" *ngIf="!isNewService">
+      <label class="status-label font-weight-bold" for="enabled">{{ 'ldn-service-status' | translate }}</label>
+      <div>
+        <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
+        <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
+          <div class="slider"></div>
+        </div>
+      </div>
+    </div>
+    <!-- In the Name section -->
+    <div class="mb-5">
+      <label for="name" class="font-weight-bold">{{ 'ldn-new-service.form.label.name' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
+             formControlName="name"
+             id="name"
+             name="name"
+             type="text">
+      <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.name' | translate }}
+      </div>
+    </div>
+
+    <!-- In the description section -->
+    <div class="mb-5 mt-5 d-flex flex-column">
+      <label for="description" class="font-weight-bold">{{ 'ldn-new-service.form.label.description' | translate }}</label>
+      <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
+                class="form-control" formControlName="description" id="description" name="description"></textarea>
+    </div>
+
+    <div class="mb-5 mt-5">
+      <!-- In the url section -->
+      <div class="d-flex align-items-center">
+        <div class="d-flex flex-column w-50 mr-2">
+          <label for="url" class="font-weight-bold">{{ 'ldn-new-service.form.label.url' | translate }}</label>
+          <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
+                 [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
+                 formControlName="url"
+                 id="url"
+                 name="url"
+                 type="text">
+          <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
+            {{ 'ldn-new-service.form.error.url' | translate }}
+          </div>
+        </div>
+
+        <div class="d-flex flex-column w-50">
+          <label for="score" class="font-weight-bold">{{ 'ldn-new-service.form.label.score' | translate }}</label>
+          <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
+                 [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
+                 id="score"
+                 name="score"
+                 min="0"
+                 max="1"
+                 step=".01"
+                 class="form-control"
+                 type="number">
+          <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
+            {{ 'ldn-new-service.form.error.score' | translate }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- In the IP range section -->
+    <div class="mb-5 mt-5">
+      <label for="lowerIp" class="font-weight-bold">{{ 'ldn-new-service.form.label.ip-range' | translate }}</label>
+      <div class="d-flex">
+        <input [class.invalid-field]="formModel.get('lowerIp').invalid && formModel.get('lowerIp').touched"
+               [placeholder]="'ldn-new-service.form.placeholder.lowerIp' | translate" class="form-control mr-2"
+               formControlName="lowerIp"
+               id="lowerIp"
+               name="lowerIp"
+               type="text">
+        <input [class.invalid-field]="formModel.get('upperIp').invalid && formModel.get('upperIp').touched"
+               [placeholder]="'ldn-new-service.form.placeholder.upperIp' | translate" class="form-control"
+               formControlName="upperIp"
+               id="upperIp"
+               name="upperIp"
+               type="text">
+      </div>
+      <div *ngIf="(formModel.get('lowerIp').invalid && formModel.get('lowerIp').touched) || (formModel.get('upperIp').invalid && formModel.get('upperIp').touched)" class="error-text">
+        {{ 'ldn-new-service.form.error.ipRange' | translate }}
+      </div>
+      <div class="text-muted">
+        {{ 'ldn-new-service.form.hint.ipRange' | translate }}
+      </div>
+    </div>
+
+    <!-- In the ldnUrl section -->
+    <div class="mb-5 mt-5">
+      <label for="ldnUrl" class="font-weight-bold">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
+             formControlName="ldnUrl"
+             id="ldnUrl"
+             name="ldnUrl"
+             type="text">
+      <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.ldnurl' | translate }}
+      </div>
+    </div>
+
+
+    <!-- In the Inbound Patterns Labels section -->
+    <div class="row mb-1 mt-5" *ngIf="areControlsInitialized">
+      <div class="col">
+        <label class="font-weight-bold">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
+      </div>
+      <ng-container *ngIf="formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern">
+        <div class="col">
+          <label class="font-weight-bold">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+        <div class="col-sm-1">
+          <label class="font-weight-bold">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+        </div>
+      </ng-container>
+      <div class="col-sm-2">
+      </div>
+    </div>
+
+    <!-- In the Inbound Patterns section -->
+    <div *ngIf="areControlsInitialized">
+      <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
+           [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
+           formGroupName="notifyServiceInboundPatterns">
+
+        <ng-container [formGroupName]="i">
+
+
+          <div class="row mb-1 align-items-center">
+            <div class="col">
+              <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic"
+                   id="additionalInboundPattern{{i}}"
+                   ngbDropdown placement="top-start">
+                <div class="position-relative right-addon" role="combobox"  aria-expanded="false" aria-controls="inboundPatternDropdownButton">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="inboundPatternDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedInboundPatterns"
+                    class="form-control w-80 scrollable-dropdown-input"
+                    formControlName="patternLabel"
+                    id="inboundPatternDropdownButton"
+                    ngbDropdownAnchor
+                    type="text"
+                    [attr.aria-label]="'ldn-service-input-inbound-pattern-dropdown' | translate"
+                  />
+                  <div aria-labelledby="inboundPatternDropdownButton"
+                       class="dropdown-menu dropdown-menu-top w-100 "
+                       ngbDropdownMenu>
+                    <div class="scrollable-menu" role="listbox">
+                      <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                              *ngFor="let pattern of inboundPatterns; let internalIndex = index"
+                              [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                              class="dropdown-item collection-item text-truncate w-100"
+                              ngbDropdownItem
+                              type="button">
+                        <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col">
+              <ng-container
+                *ngIf="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern">
+                <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                     placement="top-start">
+                  <div class="position-relative right-addon" aria-expanded="false" aria-controls="inboundItemfilterDropdown" role="combobox">
+                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                       ngbDropdownToggle></i>
+                    <input
+                      [readonly]="true"
+                      class="form-control d-none w-100 scrollable-dropdown-input"
+                      formControlName="constraint"
+                      id="inboundItemfilterDropdown"
+                      ngbDropdownAnchor
+                      type="text"
+                      [attr.aria-label]="'ldn-service-input-inbound-item-filter-dropdown' | translate"
+                    />
+                    <input
+                      (click)="inboundItemfilterDropdown.open();"
+                      [readonly]="true"
+                      class="form-control w-100 scrollable-dropdown-input"
+                      formControlName="constraintFormatted"
+                      id="inboundItemfilterDropdownPrettified"
+                      ngbDropdownAnchor
+                      type="text"
+                      [attr.aria-label]="'ldn-service-input-inbound-item-filter-dropdown' | translate"
+                    />
+                    <div aria-labelledby="inboundItemfilterDropdownButton"
+                         class="dropdown-menu scrollable-dropdown-menu w-100 "
+                         ngbDropdownMenu>
+                      <div class="scrollable-menu" role="listbox">
+                        <button (click)="selectInboundItemFilter('', i); $event.stopPropagation()"
+                                class="dropdown-item collection-item text-truncate w-100" ngbDropdownItem type="button">
+                          <span> {{'ldn-service.control-constaint-select-none' | translate}} </span>
+                        </button>
+                        <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                                *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                                class="dropdown-item collection-item text-truncate w-100"
+                                ngbDropdownItem
+                                type="button">
+                          <div>{{ constraint.id + '.label' | translate }}</div>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </ng-container>
+            </div>
+
+            <div
+              [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
+              class="col-sm-1">
+              <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                     type="checkbox">
+              <div (click)="toggleAutomatic(i)"
+                   [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
+                   class="toggle-switch">
+                <div class="slider"></div>
+              </div>
+            </div>
+
+
+            <div class="col-sm-2">
+              <div class="btn-group">
+                <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark trash-button"
+                        [title]="'ldn-service-button-mark-inbound-deletion' | translate"
+                        type="button">
+                  <i class="fas fa-trash"></i>
+                </button>
+
+
+                <button (click)="unmarkForInboundPatternDeletion(i)"
+                        *ngIf="markedForDeletionInboundPattern.includes(i)"
+                        [title]="'ldn-service-button-unmark-inbound-deletion' | translate"
+                        class="btn btn-warning "
+                        type="button">
+                  <i class="fas fa-undo"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+
+    <span (click)="addInboundPattern()"
+          class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
+
+    <div class="submission-form-footer my-1 position-sticky d-flex justify-content-between" role="group">
+      <button (click)="resetFormAndLeave()" class="btn btn-primary" type="button">
+        <span>&nbsp;{{ 'submission.general.back.submit' | translate }}</span>
+      </button>
+      <button class="btn btn-primary" type="submit">
+        <span><i class="fas fa-save"></i>&nbsp;{{ 'ldn-new-service.form.label.submit' | translate }}</span>
+      </button>
+    </div>
+  </form>
+</div>
+<ng-template #confirmModal>
+    <div class="modal-header">
+      <h4 *ngIf="!isNewService">{{'service.overview.edit.modal' | translate }}</h4>
+      <h4 *ngIf="isNewService">{{'service.overview.create.modal' | translate }}</h4>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
+    </div>
+
+    <div class="modal-body">
+      <div *ngIf="!isNewService">
+        {{ 'service.overview.edit.body' | translate }}
+      </div>
+      <span *ngIf="isNewService">
+        {{ 'service.overview.create.body' | translate }}
+      </span>
+    </div>
+      <div class="modal-footer">
+        <div *ngIf="!isNewService">
+          <button (click)="closeModal()" class="btn btn-danger mr-2"
+                  id="delete-confirm-edit">{{ 'service.detail.return' | translate }}
+          </button>
+          <button *ngIf="!isNewService" (click)="patchService()"
+                  class="btn btn-primary">{{ 'service.detail.update' | translate }}
+          </button>
+        </div>
+        <div *ngIf="isNewService">
+          <button (click)="closeModal()" class="btn btn-danger mr-2 "
+                  id="delete-confirm-new">{{ 'service.refuse.create' | translate }}
+          </button>
+          <button (click)="createService()"
+                  class="btn btn-primary">{{ 'service.confirm.create' | translate }}
+          </button>
+        </div>
+      </div>
+</ng-template>
+
+

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);
+}
+
+

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<LdnServiceFormComponent>;
+
+  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();
+  });
+});

src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts

@@ -0,0 +1,557 @@
+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<any>;
+  @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
+
+  public inboundPatterns: string[] = notifyPatterns;
+  public isNewService: boolean;
+  public areControlsInitialized: boolean;
+  public itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+  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<LdnService>) => {
+      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 {
+        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<LdnService>) => {
+        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<LdnService>) => {
+        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 {
+          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: '',
+    });
+  }
+}

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<RemoteData<PaginatedList<LdnService>>> = of((mockLdnServices as unknown) as RemoteData<PaginatedList<LdnService>>);

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<any>;
+    testFindAllDataImplementation(initFindAllService);
+  });
+
+  describe('get endpoint', () => {
+    it('should retrieve correct endpoint', (done) => {
+      service.getEndpoint().subscribe(() => {
+        expect(halService.getEndpoint).toHaveBeenCalledWith('itemfilters');
+        done();
+      });
+    });
+  });
+
+});

src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts

@@ -0,0 +1,61 @@
+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<Itemfilter> implements FindAllData<Itemfilter> {
+  private findAllData: FindAllDataImpl<Itemfilter>;
+
+  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<Itemfilter>[]} linksToFollow - Configurations for following specific links.
+   * @returns {Observable<RemoteData<PaginatedList<Itemfilter>>>} - An observable of remote data containing a paginated list of itemfilters.
+   */
+  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+}

src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.spec.ts

@@ -0,0 +1,116 @@
+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),
+            buildList: cold('a', { a: remoteDataMocks.Success })
+        });
+
+
+        service = initTestService();
+    });
+
+    describe('composition', () => {
+        const initFindAllService = () => new LdnServicesService(null, null, null, null, null) as unknown as FindAllData<any>;
+        const initDeleteService = () => new LdnServicesService(null, null, null, null, null) as unknown as DeleteData<any>;
+        const initSearchService = () => new LdnServicesService(null, null, null, null, null) as unknown as SearchData<any>;
+        const initPatchService = () => new LdnServicesService(null, null, null, null, null) as unknown as PatchData<any>;
+        const initCreateService = () => new LdnServicesService(null, null, null, null, null) as unknown as CreateData<any>;
+
+        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();
+            });
+        });
+    });
+
+});

src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts

@@ -0,0 +1,217 @@
+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<LdnService>}
+ * @implements {FindAllData<LdnService>}
+ * @implements {DeleteData<LdnService>}
+ * @implements {PatchData<LdnService>}
+ * @implements {CreateData<LdnService>}
+ */
+@Injectable()
+@dataService(LDN_SERVICE)
+export class LdnServicesService extends IdentifiableDataService<LdnService> implements FindAllData<LdnService>, DeleteData<LdnService>, PatchData<LdnService>, CreateData<LdnService> {
+  createData: CreateDataImpl<LdnService>;
+  private findAllData: FindAllDataImpl<LdnService>;
+  private deleteData: DeleteDataImpl<LdnService>;
+  private patchData: PatchDataImpl<LdnService>;
+  private comparator: ChangeAnalyzer<LdnService>;
+  private searchData: SearchDataImpl<LdnService>;
+
+  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<RemoteData<LdnService>>} - Observable containing the result of the creation operation.
+   */
+  create(object: LdnService, ...params: RequestParam[]): Observable<RemoteData<LdnService>> {
+    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<RemoteData<LdnService>>} - Observable containing the result of the update operation.
+   */
+  patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
+    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<RemoteData<LdnService>>} - Observable containing the result of the update operation.
+   */
+  update(object: LdnService): Observable<RemoteData<LdnService>> {
+    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<Operation[]>} - Observable containing the patch operations.
+   */
+  createPatchFromCache(object: LdnService): Observable<Operation[]> {
+    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<LdnService>[]} linksToFollow - Optional links to follow during the request.
+   * @returns {Observable<RemoteData<PaginatedList<LdnService>>>} - Observable containing the result of the request.
+   */
+  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    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<LdnService>[]} linksToFollow - Optional links to follow during the request.
+   * @returns {Observable<RemoteData<PaginatedList<LdnService>>>} - Observable containing the result of the request.
+   */
+  findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    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<RemoteData<NoContent>>} - Observable containing the result of the deletion operation.
+   */
+  public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+    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<RemoteData<NoContent>>} - Observable containing the result of the deletion operation.
+   */
+  public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+    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<RemoteData<PaginatedList<T>>}
+   *    Return an observable that emits response from the server
+   */
+  public searchBy(searchMethod: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    return this.searchData.searchBy(searchMethod, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
+    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<LdnService>(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;
+  }
+}

src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html

@@ -0,0 +1,99 @@
+<div class="container">
+  <div class="d-flex">
+    <h1 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h1>
+  </div>
+  <div class="d-flex justify-content-end">
+    <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
+      class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
+  </div>
+  <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
+                 [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
+                 [hideGear]="true"
+                 [hidePagerWhenSinglePage]="true"
+                 [pageInfoState]="(ldnServicesRD$ | async)?.payload"
+                 [paginationOptions]="pageConfig">
+    <div class="table-responsive">
+      <table class="table table-striped table-hover">
+        <thead>
+        <tr>
+          <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
+          <td class="col-3">{{ ldnService.name }}</td>
+          <td>
+            <ds-truncatable [id]="ldnService.id">
+              <ds-truncatable-part [id]="ldnService.id" [minLines]="2">
+                <div>
+                  {{ ldnService.description }}
+                </div>
+              </ds-truncatable-part>
+            </ds-truncatable>
+          </td>
+          <td>
+                        <span (click)="toggleStatus(ldnService, ldnServicesService)"
+                              [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
+                              [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
+                              class="status-indicator">
+                            {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
+                        </span>
+          </td>
+          <td>
+            <div class="btn-group">
+              <button
+                (click)="selectServiceToDelete(ldnService.id)"
+                [attr.aria-label]="'ldn-service-overview-select-delete' | translate"
+                class="btn btn-outline-danger">
+                <i class="fas fa-trash"></i>
+              </button>
+              <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
+                      [attr.aria-label]="'ldn-service-overview-select-edit' | translate"
+                      class="btn btn-outline-dark">
+                <i class="fas fa-edit"></i>
+              </button>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </ds-pagination>
+</div>
+
+<ng-template #deleteModal>
+
+  <div>
+
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.delete.header' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              [attr.aria-label]="'ldn-service-overview-close-modal' | translate"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
+    </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.overview.delete.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()"
+                [attr.aria-label]="'ldn-service-overview-close-modal' | translate"
+                class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
+        <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
+                class="btn btn-danger"
+                [attr.aria-label]="'ldn-service-overview-select-delete' | translate"
+                id="delete-confirm">{{ 'service.overview.delete' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
+</ng-template>
+

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;
+}

src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts

@@ -0,0 +1,144 @@
+import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {ChangeDetectorRef, EventEmitter} 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<LdnServicesOverviewComponent>;
+  let ldnServicesService;
+  let paginationService;
+  let modalService: NgbModal;
+  let notificationsService: NotificationsService;
+  let translateService: TranslateService;
+
+  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', 'delete', 'patch']);
+    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: NotificationsServiceStub},
+        {provide: TranslateService, useValue: translateServiceStub},
+      ]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LdnServicesOverviewComponent);
+    component = fixture.componentInstance;
+    ldnServicesService = TestBed.inject(LdnServicesService);
+    paginationService = TestBed.inject(PaginationService);
+    modalService = TestBed.inject(NgbModal);
+    notificationsService = TestBed.inject(NotificationsService);
+    translateService = TestBed.inject(TranslateService);
+    component.modalRef = jasmine.createSpyObj({close: null});
+    component.isProcessingSub = jasmine.createSpyObj({unsubscribe: null});
+    component.ldnServicesRD$ = of({} as RemoteData<PaginatedList<LdnService>>);
+    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<PaginatedList<LdnService>>  */};
+      spyOn(component, 'setLdnServices').and.callThrough();
+      const deleteSpy = ldnServicesService.delete.and.returnValue(of(mockRemoteData as RemoteData<PaginatedList<LdnService>>));
+      component.selectedServiceId = serviceId;
+      component.deleteSelected(serviceId, ldnServicesService);
+      tick();
+      expect(deleteSpy).toHaveBeenCalledWith(serviceId);
+    }));
+  });
+});

src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts

@@ -0,0 +1,176 @@
+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<any>;
+  ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
+  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<LdnService>) => {
+        if (rd.hasSucceeded) {
+          this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
+          this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
+            map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
+              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<LdnService>) => {
+        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'));
+        }
+      }
+    );
+  }
+}

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;
+  }
+}

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;
+}

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,
+}

src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts

@@ -0,0 +1,3 @@
+export class LdnServiceConstrain {
+  void: any;
+}

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

src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts

@@ -0,0 +1,72 @@
+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;
+  }
+}

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

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',
+
+];
+
+

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<NotificationsSuggestionTargetsPageParams> {
+
+  /**
+   * 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)
+    };
+  }
+}

src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.html

@@ -0,0 +1 @@
+<ds-publication-claim [source]="'openaire'"></ds-publication-claim>

src/app/admin/admin-notifications/admin-notifications-publication-claim-page/admin-notifications-publication-claim-page.component.spec.ts

@@ -0,0 +1,40 @@
+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<NotificationsSuggestionTargetsPageComponent>;
+
+  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();
+  });
+});

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

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

src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.spec.ts

@@ -1,35 +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';
-import { QualityAssuranceSourceComponent } from '../../../notifications/qa/source/quality-assurance-source.component';
-
-describe('AdminQualityAssuranceSourcePageComponent', () => {
-  let component: AdminQualityAssuranceSourcePageComponent;
-  let fixture: ComponentFixture<AdminQualityAssuranceSourcePageComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-    imports: [AdminQualityAssuranceSourcePageComponent],
-    schemas: [NO_ERRORS_SCHEMA]
-})
-      .overrideComponent(AdminQualityAssuranceSourcePageComponent, {
-        remove: {
-          imports: [
-            QualityAssuranceSourceComponent
-          ]
-        }
-      })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AdminQualityAssuranceSourcePageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create AdminQualityAssuranceSourcePageComponent', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { QualityAssuranceSourceComponent } from '../../../notifications/qa/source/quality-assurance-source.component';
-
-/**
- * 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',
-    standalone: true,
-    imports: [QualityAssuranceSourceComponent]
-})
-export class AdminQualityAssuranceSourcePageComponent {}

src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component.spec.ts

@@ -1,34 +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';
-import { QualityAssuranceTopicsComponent } from '../../../notifications/qa/topics/quality-assurance-topics.component';
-
-describe('AdminQualityAssuranceTopicsPageComponent', () => {
-  let component: AdminQualityAssuranceTopicsPageComponent;
-  let fixture: ComponentFixture<AdminQualityAssuranceTopicsPageComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-    imports: [AdminQualityAssuranceTopicsPageComponent],
-    schemas: [NO_ERRORS_SCHEMA]
-})
-      .overrideComponent(AdminQualityAssuranceTopicsPageComponent, {
-        remove: {
-          imports: [
-            QualityAssuranceTopicsComponent
-          ]
-        }
-      })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AdminQualityAssuranceTopicsPageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create AdminQualityAssuranceTopicsPageComponent', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

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

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;
+  }
+}

src/app/admin/admin-reports/filtered-collections/filtered-collections.component.html

@@ -0,0 +1,64 @@
+<div class="container">
+    <div class="metadata-registry row">
+        <div class="col-12">
+
+            <h1 id="header" class="border-bottom pb-2">{{ "admin.reports.collections.head" | translate }}</h1>
+
+            <div id="metadatadiv">
+                <ngb-accordion [closeOthers]="true" activeIds="filters" #acc="ngbAccordion">
+                    <ngb-panel id="filters">
+                        <ng-template ngbPanelTitle>
+                          {{ "admin.reports.commons.filters" | translate }}
+                        </ng-template>
+                        <ng-template ngbPanelContent>
+                            <div class="container">
+                                <div class="row">
+                                    <span class="col-3"></span>
+                                    <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{ "admin.reports.button.show-collections" | translate }}</button>
+                                </div>
+                                <ds-filters [filtersForm]="filtersFormGroup()"></ds-filters>
+                                <div class="row">
+                                    <span class="col-3"></span>
+                                    <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{ "admin.reports.button.show-collections" | translate }}</button>
+                                </div>
+                            </div>
+                        </ng-template>
+                    </ngb-panel>
+                    <ngb-panel id="collections">
+                        <ng-template ngbPanelTitle>
+                          {{ "admin.reports.collections.collections-report" | translate }}
+                        </ng-template>
+                        <ng-template ngbPanelContent>
+                            <table id="table" class="table table-striped">
+                                <thead>
+                                    <tr class="header">
+                                        <th rowspan="2">{{ "admin.reports.collections.community" | translate }}</th>
+                                        <th rowspan="2">{{ "admin.reports.collections.collection" | translate }}</th>
+                                        <th>{{ "admin.reports.collections.nb_items" | translate }}</th>
+                                        <th>{{ "admin.reports.collections.match_all_selected_filters" | translate }}</th>
+                                        <th *ngFor="let filter of results.summary.values | keyvalue">{{ ("admin.reports.commons.filters." + getGroup(filter.key) + "." + filter.key) | translate }}</th>
+                                    </tr>
+                                    <tr class="header">
+                                        <th class="num">{{ results.summary.nbTotalItems }}</th>
+                                        <th class="num">{{ results.summary.allFiltersValue }}</th>
+                                        <th class="num" *ngFor="let filter of results.summary.values | keyvalue">{{ filter.value }}</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr *ngFor="let coll of results.collections">
+                                        <td><a href="/handle/{{ coll.communityHandle }}" rel="noopener noreferrer" target="_blank">{{ coll.communityLabel }}</a></td>
+                                        <td><a href="/handle/{{ coll.handle }}" rel="noopener noreferrer" target="_blank">{{ coll.label }}</a></td>
+                                        <td class="num">{{ coll.nbTotalItems }}</td>
+                                        <td class="num">{{ coll.allFiltersValue }}</td>
+                                        <td class="num" *ngFor="let filter of results.summary.values | keyvalue">{{ coll.values[filter.key] || 0 }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </ng-template>
+                    </ngb-panel>
+                </ngb-accordion>
+            </div>
+
+        </div>
+    </div>
+</div>

src/app/admin/admin-reports/filtered-collections/filtered-collections.component.scss

@@ -0,0 +1,3 @@
+.num {
+    text-align: center;
+}

src/app/admin/admin-reports/filtered-collections/filtered-collections.component.spec.ts

@@ -0,0 +1,83 @@
+import { waitForAsync, ComponentFixture, TestBed} 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<FilteredCollectionsComponent>;
+  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();
+      });
+    }));
+  });
+});

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<RawRestResponse> {
+    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;
+  }
+
+}

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<FilteredCollection> = [];
+  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);
+    }
+  }
+
+}

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);
+    }
+  }
+
+}

src/app/admin/admin-reports/filtered-items/filtered-items.component.html

@@ -0,0 +1,175 @@
+<div class="container">
+    <div class="metadata-registry row">
+        <div class="col-12">
+
+            <h1 id="header" class="border-bottom pb-2">{{'admin.reports.items.head' | translate}}</h1>
+
+            <div id="querydiv" [formGroup]="queryForm">
+                <ngb-accordion [closeOthers]="true" activeIds="collectionSelector" #acc="ngbAccordion">
+                    <ngb-panel id="collectionSelector">
+                        <ng-template ngbPanelTitle>
+                            {{'admin.reports.items.section.collectionSelector' | translate}}
+                        </ng-template>
+                        <ng-template ngbPanelContent>
+                            <select id="collSel" name="collSel" class="form-control" multiple="multiple" size="10" formControlName="collections">
+                                <option *ngFor="let item of collections" [value]="item.id" [disabled]="item.disabled">{{item.name$ | async}}</option>
+                            </select>
+                            <div class="row">
+                                <span class="col-3"></span>
+                                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
+                            </div>
+                        </ng-template>
+                    </ngb-panel>
+                    <ngb-panel id="metadataFieldQueries">
+                        <ng-template ngbPanelTitle>
+                            {{'admin.reports.items.section.metadataFieldQueries' | translate}}
+                        </ng-template>
+                        <ng-template ngbPanelContent>
+                            <fieldset id="predefqueries" class="form-group">
+                                <label>
+                                    {{'admin.reports.items.predefinedQueries' | translate}}
+                                </label>
+                                <select id="predefselect" formControlName="presetQuery" class="form-control" (change)="setPresetQuery()">
+                                    <option *ngFor="let item of presetQueries" [value]="item.id" [selected]="item.isDefault">{{item.label | translate}}</option>
+                                </select>
+                            </fieldset>
+                            <div class="row">&nbsp;</div>
+                            <div id="queries">
+                                <div class="metadata" *ngFor="let pred of queryPredicatesArray().controls; let i = index">
+                                    <div [formGroup]="pred" class="form-group">
+                                        <div class="form-row">
+                                            <div class="col-4">
+                                                <select class="query-tool" formControlName="field" class="form-control">
+                                                    <option *ngFor="let item of metadataFieldsWithAny" [value]="item.id">{{item.name$ | async}}</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-auto">
+                                                <select class="query-tool" formControlName="operator" class="form-control">
+                                                    <option *ngFor="let item of predicates" [value]="item.id">{{item.name$ | async | translate}}</option>
+                                                </select>
+                                            </div>
+                                            <div class="col">
+                                                <input class="form-control" formControlName="value"/>
+                                            </div>
+                                            <div class="col-auto">
+                                                <button class="btn btn-light" (click)="addQueryPredicate()">+</button>
+                                                &nbsp;
+                                                <button class="btn btn-light" [disabled]="deleteQueryPredicateDisabled()" (click)="deleteQueryPredicate(i)">–</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <span class="col-3"></span>
+                                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
+                            </div>
+                        </ng-template>
+                    </ngb-panel>
+                    <ngb-panel id="limitPaginateQueries">
+                        <ng-template ngbPanelTitle>
+                            {{'admin.reports.items.section.limitPaginateQueries' | translate}}
+                        </ng-template>
+                        <ng-template ngbPanelContent>
+                            <div class="row align-items-center">
+                                <label for="limit" class="col-sm-2 col-form-label">{{'admin.reports.items.limit' | translate}}:</label>
+                                <div class="col-6">
+                                    <select id="limit" name="limit" formControlName="pageLimit" class="form-control col-6">
+                                        <option *ngFor="let item of pageLimits" value="{{item.id}}" [selected]="item.isDefault">{{item.name$ | async}}</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="row align-items-center">
+                                <label for="offset" class="col-sm-2 col-form-label">{{'admin.reports.items.offset' | translate}}:</label>
+                                <div class="col-6">
+                                    <input id="offset" name="offset" value="0" class="form-control col-6">
+                                </div>
+                            </div>
+                            <div class="row">
+                                <span class="col-3"></span>
+                                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
+                            </div>
+                        </ng-template>
+                    </ngb-panel>
+                    <ngb-panel id="filters">
+                        <ng-template ngbPanelTitle>
+                            {{'admin.reports.commons.filters' | translate}}
+                        </ng-template>
+                        <ng-template ngbPanelContent>
+                            <div class="row">
+                                <span class="col-3"></span>
+                                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
+                            </div>
+                            <ds-filters [filtersForm]="filtersFormGroup()"></ds-filters>
+                            <div class="row">
+                                <span class="col-3"></span>
+                                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
+                            </div>
+                        </ng-template>
+                    </ngb-panel>
+                    <ngb-panel id="additionalData">
+                        <ng-template ngbPanelTitle>
+                            {{'admin.reports.commons.additional-data' | translate}}
+                        </ng-template>
+                        <ng-template ngbPanelContent>
+                            <div id="show-fields">
+                                <select class="query-tool" name="show_fields" multiple="multiple" size="8" class="form-control" formControlName="additionalFields">
+                                    <option *ngFor="let item of metadataFields" [value]="item.id">{{item.name$ | async}}</option>
+                                </select>
+                            </div>
+                            <div class="row">
+                                <span class="col-3"></span>
+                                <button class="btn btn-primary mt-1 col-6" (click)="submit()">{{'admin.reports.items.run' | translate}}</button>
+                            </div>
+                        </ng-template>
+                    </ngb-panel>
+                    <ngb-panel id="itemResults">
+                        <ng-template ngbPanelTitle>
+                            {{'admin.reports.collections.item-results' | translate}}
+                        </ng-template>
+                        <ng-template ngbPanelContent>
+                            <table id="table" class="table table-striped">
+                                <thead>
+                                    <tr class="header">
+                                        <th>{{ "admin.reports.items.number" | translate }}</th>
+                                        <th>{{ "admin.reports.items.id" | translate }}</th>
+                                        <th>{{ "admin.reports.items.collection" | translate }}</th>
+                                        <th>{{ "admin.reports.items.handle" | translate }}</th>
+                                        <th>{{ "admin.reports.items.title" | translate }}</th>
+                                        <th *ngFor="let field of queryForm.value['additionalFields']">{{ field }}</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr *ngFor="let item of results$ | async">
+                                        <td class="num">{{ item.index }}</td>
+                                        <td>{{ item.uuid }}</td>
+                                        <td><a *ngIf="item.owningCollection" href="/handle/{{ item.owningCollection.handle }}" rel="noopener noreferrer" target="_blank">{{ item.owningCollection.name }}</a></td>
+                                        <td><a *ngIf="item.handle" href="/handle/{{ item.handle }}" rel="noopener noreferrer" target="_blank">{{ item.handle }}</a></td>
+                                        <td>{{ item.name }}</td>
+                                        <td class="num" *ngFor="let field of queryForm.value['additionalFields']">
+                                            <span *ngFor="let mdvalue of item.metadata[field]">
+                                                {{ mdvalue.value || "" }}
+                                            </span>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                            <div>
+                                {{'admin.reports.commons.page' | translate}} {{ currentPage + 1 }} {{'admin.reports.commons.of' | translate}} {{ pageCount() }}
+                            </div>
+                            <div>
+                                <button id="prev" class="btn btn-light" (click)="prevPage()" [disabled]="!canNavigatePrevious()">{{'admin.reports.commons.previous-page' | translate}}</button>
+                                <button id="next" class="btn btn-light" (click)="nextPage()" [disabled]="!canNavigateNext()">{{'admin.reports.commons.next-page' | translate}}</button>
+<!--
+                                <button id="export">{{'admin.reports.commons.export' | translate}}</button>
+-->
+                            </div>
+                            <table id="itemtable" class="sortable"></table>
+                        </ng-template>
+                    </ngb-panel>
+                </ngb-accordion>
+            </div>
+
+        </div>
+    </div>
+</div>

src/app/admin/admin-reports/filtered-items/filtered-items.component.scss

@@ -0,0 +1,3 @@
+.num {
+    text-align: center;
+}

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<Item[]>;
+  @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<RawRestResponse> {
+    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;
+  }
+
+}

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<string>;
+  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<string>, 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<string>): OptionVO {
+    let opt = new OptionVO();
+    opt.id = id;
+    opt.name$ = name$;
+    return opt;
+  }
+
+  private static toObservable<T>(value: T): Observable<T> {
+    return new Observable<T>(subscriber => {
+      subscriber.next(value);
+      subscriber.complete();
+    });
+
+  }
+}

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;
+  }
+
+}

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)
+    });
+  }
+
+}

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';
+      }
+    });
+  }
+
+}

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) {}
+
+}

src/app/admin/admin-reports/filters-section/filters-section.component.html

@@ -0,0 +1,19 @@
+<fieldset class="row row-cols-2">
+    <ng-container>
+        <span class="col-12">&nbsp;</span>
+        <span class="col-1">&nbsp;</span>
+        <button id="btnSelectAllFilters" class="btn btn-light mt-1 col-4" (click)="selectAll()">{{"admin.reports.commons.filters.select_all" | translate}}</button>
+        <span class="col-2">&nbsp;</span>
+        <button id="btnDeselectAllFilters" class="btn btn-light mt-1 col-4" (click)="deselectAll()">{{"admin.reports.commons.filters.deselect_all" | translate}}</button>
+        <span class="col-1">&nbsp;</span>
+        <span class="col-12">&nbsp;</span>
+    </ng-container>
+</fieldset>
+<fieldset class="row row-cols-2" *ngFor="let group of allFilters()">
+    <legend>{{group.key | translate}}</legend>
+    <ng-container [formGroup]="filtersForm">
+        <div *ngFor="let filter of group.filters" class="col-6">
+            <input type="checkbox" id="flt-{{filter.id}}" value="{{filter.id}}" class="form-check-input col-1 align-baseline" formControlName="{{filter.id}}"><label for="flt-{{filter.id}}" class="col-11 align-middle" title="{{filter.tooltipKey | translate}}">{{filter.key | translate}}</label>
+        </div>
+    </ng-container>
+</fieldset>

src/app/admin/admin-reports/filters-section/filters-section.component.spec.ts

@@ -0,0 +1,101 @@
+import { waitForAsync, ComponentFixture, TestBed } 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<FiltersComponent>;
+  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();
+  });
+});

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);
+  }
+
+}

src/app/admin/admin-routing-paths.ts

@@ -1,13 +1,30 @@
 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 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();
+}

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 @@
-<ng-template dsListableObject>
+<ng-template dsDynamicComponentLoader>
 </ng-template>
 <div #badges>
   <ng-content></ng-content>

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,4 +1,4 @@
-import { Component, ComponentFactoryResolver, ElementRef, OnInit, 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 {
@@ -14,10 +14,11 @@ import { TruncatableService } from '../../../../../shared/truncatable/truncatabl
 import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
 import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
 import {
-  ListableObjectDirective
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
+  DynamicComponentLoaderDirective
+} from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { hasValue } from '../../../../../shared/empty.util';
 
 @listableObjectComponent(ItemSearchResult, ViewMode.GridElement, Context.AdminSearch)
 @Component({
@@ -28,17 +29,18 @@ import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service
 /**
  * The component for displaying a list element for an item search result on the admin search page
  */
-export class ItemAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> implements OnInit {
-  @ViewChild(ListableObjectDirective, { static: true }) listableObjectDirective: ListableObjectDirective;
+export class ItemAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> implements OnDestroy, OnInit {
+  @ViewChild(DynamicComponentLoaderDirective, { static: true }) dynamicComponentLoaderDirective: DynamicComponentLoaderDirective;
   @ViewChild('badges', { static: true }) badges: ElementRef;
   @ViewChild('buttons', { static: true }) buttons: ElementRef;
 
+  protected compRef: ComponentRef<Component>;
+
   constructor(
     public dsoNameService: DSONameService,
     protected truncatableService: TruncatableService,
     protected bitstreamDataService: BitstreamDataService,
     private themeService: ThemeService,
-    private componentFactoryResolver: ComponentFactoryResolver,
   ) {
     super(dsoNameService, truncatableService, bitstreamDataService);
   }
@@ -48,23 +50,32 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
    */
   ngOnInit(): void {
     super.ngOnInit();
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent());
+    const component: GenericConstructor<Component> = 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;
+    }
   }
 
   /**

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

@@ -1,23 +1,21 @@
-<div class="sidebar-section">
-    <a class="nav-item nav-link d-flex flex-row flex-nowrap"
-       [ngClass]="{ disabled: isDisabled }"
-       [attr.aria-disabled]="isDisabled"
-       [attr.aria-labelledby]="'sidebarName-' + section.id"
-       [title]="('menu.section.icon.' + section.id) | translate"
-       [routerLink]="itemModel.link"
-       (keyup.space)="navigate($event)"
-       (keyup.enter)="navigate($event)"
-       href="javascript:void(0);"
-    >
-      <div class="shortcut-icon">
-        <i class="fas fa-{{section.icon}} fa-fw"></i>
+<div>
+  <a class="sidebar-section-wrapper"
+     [ngClass]="{ disabled: isDisabled }"
+     role="menuitem"
+     [attr.aria-disabled]="isDisabled"
+     [attr.aria-labelledby]="adminMenuSectionTitleId(section.id)"
+     [routerLink]="itemModel.link"
+     (keyup.space)="navigate($event)"
+     (keyup.enter)="navigate($event)"
+     href="javascript:void(0);"
+  >
+    <div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">
+      <i class="fas fa-{{section.icon}} fa-fw"></i>
+    </div>
+    <div class="sidebar-collapsible-element-outer-wrapper">
+      <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
+        <span [id]="adminMenuSectionTitleId(section.id)">{{itemModel.text | translate}}</span>
       </div>
-      <div class="sidebar-collapsible">
-        <div class="toggle">
-          <span id="sidebarName-{{section.id}}" class="section-header-text">
-            {{itemModel.text | translate}}
-          </span>
-        </div>
-      </div>
-    </a>
+    </div>
+  </a>
 </div>

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

@@ -47,7 +47,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', () => {
@@ -86,7 +86,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', () => {

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

@@ -54,4 +54,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`;
+  }
 }

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

@@ -1,54 +1,63 @@
-<nav class="navbar navbar-dark p-0"
-     [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
+<nav class="navbar navbar-dark p-0 vh-100"
+     id="admin-sidebar"
+     [attr.aria-label]="'menu.header.nav.description' | translate"
+     [ngClass]="{'expanded': sidebarOpen, 'collapsed': sidebarClosed, 'transitioning': sidebarTransitioning}"
      [@slideSidebar]="{
       value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),
-      params: {sidebarWidth: (sidebarWidth | async)}
+      params: { collapsedWidth: (collapsedSidebarWidth$ | async), expandedWidth: (expandedSidebarWidth$ | async) }
      }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)"
      *ngIf="menuVisible | async"
      (mouseenter)="handleMouseEnter($event)"
-     (mouseleave)="handleMouseLeave($event)"
-     role="navigation" [attr.aria-label]="'menu.header.admin.description' |translate">
-    <div class="sidebar-top-level-items">
-        <ul class="navbar-nav">
-            <li class="admin-menu-header">
-              <div class="sidebar-section">
-                <div href="javascript:void(0);" class="nav-item d-flex flex-row flex-nowrap py-0">
-                  <div class="shortcut-icon navbar-brand logo-wrapper">
-                    <img class="admin-logo" src="assets/images/dspace-logo-mini.svg"
-                         [alt]="('menu.header.image.logo') | translate">
-                  </div>
-                  <div class="sidebar-collapsible navbar-brand">
-                    <div class="mr-0">
-                      <h4 class="section-header-text mb-0">{{ 'menu.header.admin' | translate }}</h4>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </li>
+     (mouseleave)="handleMouseLeave($event)">
 
-            <li *ngFor="let section of (sections | async)">
-                <ng-container
-                        *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-            </li>
-        </ul>
-    </div>
-    <div class="navbar-nav">
-        <div class="sidebar-section" id="sidebar-collapse-toggle">
-            <button class="nav-item nav-link sidebar-section d-flex flex-row flex-nowrap border-0" type="button"
-               (click)="toggle($event)"
-               (keyup.space)="toggle($event)"
-            >
-              <span class="shortcut-icon">
-                <i *ngIf="(menuCollapsed | async)" class="fas fa-fw fa-angle-double-right"
-                   [title]="'menu.section.icon.pin' | translate"></i>
-                <i *ngIf="!(menuCollapsed | async)" class="fas fa-fw fa-angle-double-left"
-                   [title]="'menu.section.icon.unpin' | translate"></i>
-              </span>
-              <span class="sidebar-collapsible text-left">
-                <span *ngIf="menuCollapsed | async" class="section-header-text">{{'menu.section.pin' | translate }}</span>
-                <span *ngIf="!(menuCollapsed | async)" class="section-header-text">{{'menu.section.unpin' | translate }}</span>
-              </span>
-            </button>
+  <!-- HEADER -->
+
+  <div class="sidebar-full-width-container" id="sidebar-header-container" aria-hidden="true">
+    <div class="sidebar-section-wrapper">
+      <div class="sidebar-fixed-element-wrapper">
+        <img id="admin-sidebar-logo" src="assets/images/dspace-logo-mini.svg" [alt]="('menu.header.image.logo') | translate" aria-hidden="true">
+      </div>
+      <div class="sidebar-collapsible-element-outer-wrapper">
+        <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
+          <h4 class="my-1">{{ 'menu.header.admin' | translate }}</h4>
         </div>
+      </div>
     </div>
+  </div>
+
+  <!-- ITEMS -->
+
+  <div class="sidebar-full-width-container" id="sidebar-top-level-items-container">
+    <div class="sidebar-full-width-container" id="sidebar-top-level-items" role="menubar"
+        [attr.aria-label]="'menu.header.admin.description' |translate">
+      <ng-container *ngFor="let section of (sections | async)">
+        <ng-container
+          *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+      </ng-container>
+    </div>
+  </div>
+
+  <!-- TOGGLER -->
+
+  <div class="sidebar-full-width-container" id="sidebar-collapse-toggle-container">
+    <a class="sidebar-section-wrapper sidebar-full-width-container"
+       id="sidebar-collapse-toggle"
+       href="javascript:void(0);"
+       (click)="toggle($event)"
+       (keyup.space)="toggle($event)"
+    >
+      <div class="sidebar-fixed-element-wrapper">
+        <i *ngIf="(menuCollapsed | async)" class="fas fa-fw fa-angle-double-right"
+           [title]="'menu.section.icon.pin' | translate"></i>
+        <i *ngIf="!(menuCollapsed | async)" class="fas fa-fw fa-angle-double-left"
+           [title]="'menu.section.icon.unpin' | translate"></i>
+      </div>
+      <div class="sidebar-collapsible-element-outer-wrapper">
+        <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
+          {{ ((menuCollapsed | async) ? 'menu.section.pin' : 'menu.section.unpin' ) | translate }}
+        </div>
+      </div>
+    </a>
+  </div>
+
 </nav>

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

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

@@ -143,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: () => {/**/
         }

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

@@ -1,4 +1,4 @@
-import { Component, HostListener, Injector, OnInit } from '@angular/core';
+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';
@@ -33,9 +33,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<string>;
+  @Input() expandedSidebarWidth$: Observable<string>;
+
+  /**
+   * Observable that emits the width of the sidebar when collapsed
+   */
+  @Input() collapsedSidebarWidth$: Observable<string>;
 
   /**
    * Is true when the sidebar is open, is false when the sidebar is animating or closed
@@ -49,6 +54,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
    */
@@ -74,7 +85,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) {
@@ -139,6 +149,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') {
@@ -151,6 +162,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') {

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

@@ -1,37 +1,46 @@
-<div class="sidebar-section" [ngClass]="{'expanded': (expanded | async)}"
+<div [ngClass]="{'expanded': (isExpanded$ | async)}"
     [@bgColor]="{
-     value: ((expanded | async) ? 'endBackground' : 'startBackground'),
-     params: {endColor: (sidebarActiveBg | async)}}">
-  <div class="nav-item nav-link d-flex flex-row flex-nowrap"
-     role="button" tabindex="0"
-     [attr.aria-labelledby]="'sidebarName-' + section.id"
-     [attr.aria-expanded]="expanded | async"
-     [title]="('menu.section.icon.' + section.id) | translate"
-       [class.disabled]="section.model?.disabled"
+     value: ((isExpanded$ | async) ? 'endBackground' : 'startBackground'),
+     params: {endColor: (sidebarActiveBg$ | async)}
+     }">
+  <a class="sidebar-section-wrapper"
+     role="menuitem" tabindex="0"
+     aria-haspopup="menu"
+     [attr.aria-controls]="adminMenuSectionId(section.id)"
+     [attr.aria-expanded]="isExpanded$ | async"
+     [attr.aria-label]="('menu.section.toggle.' + section.id) | translate"
+     [class.disabled]="section.model?.disabled"
      (click)="toggleSection($event)"
      (keyup.space)="toggleSection($event)"
-     (keyup.enter)="toggleSection($event)"
+     href="javascript:void(0);"
   >
-    <div class="shortcut-icon h-100">
+    <div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">
       <i class="fas fa-{{section.icon}} fa-fw"></i>
     </div>
-    <div class="sidebar-collapsible">
-      <div class="toggle">
-        <span id="sidebarName-{{section.id}}" class="section-header-text">
+    <div class="sidebar-collapsible-element-outer-wrapper">
+      <div class="sidebar-collapsible-element-inner-wrapper sidebar-item toggler-wrapper">
+        <span [id]="adminMenuSectionTitleId(section.id)">
           <ng-container
             *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
         </span>
-        <i class="fas fa-chevron-right fa-pull-right"
-           [@rotate]="(expanded | async) ? 'expanded' : 'collapsed'"
-           [title]="('menu.section.toggle.' + section.id) | translate"
+        <i class="fas fa-chevron-right fa-xs" aria-hidden="true"
+           [@rotate]="(isExpanded$ | async) ? 'expanded' : 'collapsed'"
         ></i>
       </div>
-      <ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="(expanded | async)">
-        <li *ngFor="let subSection of (subSections$ | async)">
-          <ng-container
-            *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </li>
-      </ul>
+    </div>
+  </a>
+  <div class="sidebar-section-wrapper subsection" @slide *ngIf="(isExpanded$ | async)">
+    <div class="sidebar-fixed-element-wrapper"></div>
+    <div class="sidebar-collapsible-element-outer-wrapper">
+      <div class="sidebar-collapsible-element-inner-wrapper">
+        <div class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section.id)" [attr.aria-label]="('menu.section.' + section.id) | translate">
+          <div class="sidebar-item" *ngFor="let subSection of (subSections$ | async)">
+            {{ (sectionMap$ | async).get(subSection.id).component | json}}
+            <ng-container
+              *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

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;
     }
+  }
 }

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

@@ -48,14 +48,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: () => {/**/
         }

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

@@ -33,23 +33,23 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
   /**
    * The background color of the section when it's active
    */
-  sidebarActiveBg;
+  sidebarActiveBg$: Observable<string>;
 
   /**
    * Emits true when the sidebar is currently collapsed, true when it's expanded
    */
-  sidebarCollapsed: Observable<boolean>;
+  isSidebarCollapsed$: Observable<boolean>;
 
   /**
    * Emits true when the sidebar's preview is currently collapsed, true when it's expanded
    */
-  sidebarPreviewCollapsed: Observable<boolean>;
+  isSidebarPreviewCollapsed$: Observable<boolean>;
 
   /**
    * 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<boolean>;
+  isExpanded$: Observable<boolean>;
 
   constructor(
     @Inject('sectionDataProvider') menuSection,
@@ -66,12 +66,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}`;
   }
 }

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

@@ -1,6 +1,7 @@
-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';
     standalone: true
 })
 export class ThemedAdminSidebarComponent extends ThemedComponent<AdminSidebarComponent> {
+
+  /**
+   * Observable that emits the width of the sidebar when expanded
+   */
+  @Input() expandedSidebarWidth$: Observable<string>;
+
+  /**
+   * Observable that emits the width of the sidebar when collapsed
+   */
+  @Input() collapsedSidebarWidth$: Observable<string>;
+
+  protected inAndOutputNames: (keyof AdminSidebarComponent & keyof this)[] = ['collapsedSidebarWidth$', 'expandedSidebarWidth$'];
+
   protected getComponentName(): string {
     return 'AdminSidebarComponent';
   }

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 @@
-<ng-template dsListableObject>
+<ng-template dsDynamicComponentLoader>
 </ng-template>
 <div #badges class="position-absolute ml-1">
     <div class="workflow-badge">

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

@@ -15,7 +15,13 @@ import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 import { Item } from '../../../../../core/shared/item.model';
 import {
-  ListableObjectDirective
+  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 {
+ListableObjectDirective
 } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
 import {
   WorkflowItemSearchResult
@@ -40,7 +46,7 @@ describe('WorkflowItemSearchResultAdminWorkflowGridElementComponent', () => {
   let itemRD$;
   let linkService;
   let object;
-  let themeService;
+  let themeService: ThemeService;
 
   function init() {
     itemRD$ = createSuccessfulRemoteDataObject$(new Item());
@@ -58,6 +64,10 @@ describe('WorkflowItemSearchResultAdminWorkflowGridElementComponent', () => {
     TestBed.configureTestingModule(
       {
     imports: [
+        ListableObjectDirective,
+        WorkflowItemSearchResultAdminWorkflowGridElementComponent,
+        ItemGridElementComponent,
+        DynamicComponentLoaderDirective,
         NoopAnimationsModule,
         TranslateModule.forRoot(),
         RouterTestingModule.withRoutes([]),

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,4 +1,4 @@
-import { Component, ComponentFactoryResolver, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild, ComponentRef, OnDestroy, OnInit } from '@angular/core';
 import { Item } from '../../../../../core/shared/item.model';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import {
@@ -13,8 +13,8 @@ import { TruncatableService } from '../../../../../shared/truncatable/truncatabl
 import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
 import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
 import {
-  ListableObjectDirective
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
+  DynamicComponentLoaderDirective
+} from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
 import { WorkflowItem } from '../../../../../core/submission/models/workflowitem.model';
 import { Observable } from 'rxjs';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
@@ -27,6 +27,7 @@ import {
 } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { hasValue } from '../../../../../shared/empty.util';
 
 @listableObjectComponent(WorkflowItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
 @Component({
@@ -37,11 +38,11 @@ import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service
 /**
  * The component for displaying a grid element for an workflow item on the admin workflow search page
  */
-export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkflowItemSearchResult, WorkflowItem> {
+export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkflowItemSearchResult, WorkflowItem> 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
@@ -58,9 +59,10 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
    */
   public item$: Observable<Item>;
 
+  protected compRef: ComponentRef<Component>;
+
   constructor(
     public dsoNameService: DSONameService,
-    private componentFactoryResolver: ComponentFactoryResolver,
     private linkService: LinkService,
     protected truncatableService: TruncatableService,
     private themeService: ThemeService,
@@ -78,26 +80,34 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
     this.dso = this.linkService.resolveLink(this.dso, followLink('item'));
     this.item$ = (this.dso.item as Observable<RemoteData<Item>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload());
     this.item$.pipe(take(1)).subscribe((item: Item) => {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent(item));
+      const component: GenericConstructor<Component> = this.getComponent(item);
 
-        const viewContainerRef = this.listableObjectDirective.viewContainerRef;
-        viewContainerRef.clear();
+      const viewContainerRef = this.dynamicComponentLoaderDirective.viewContainerRef;
+      viewContainerRef.clear();
 
-        const componentRef = viewContainerRef.createComponent(
-          componentFactory,
-          0,
-          undefined,
-          [
+      this.compRef = viewContainerRef.createComponent(
+        component, {
+          index: 0,
+          injector: undefined,
+          projectableNodes: [
             [this.badges.nativeElement],
-            [this.buttons.nativeElement]
-          ]);
-        (componentRef.instance as any).object = item;
-        (componentRef.instance as any).index = this.index;
-        (componentRef.instance as any).linkType = this.linkType;
-        (componentRef.instance as any).listID = this.listID;
-        componentRef.changeDetectorRef.detectChanges();
-      }
-    );
+            [this.buttons.nativeElement],
+          ],
+        },
+      );
+      this.compRef.setInput('object', item);
+      this.compRef.setInput('index', this.index);
+      this.compRef.setInput('linkType', this.linkType);
+      this.compRef.setInput('listID', this.listID);
+      this.compRef.changeDetectorRef.detectChanges();
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (hasValue(this.compRef)) {
+      this.compRef.destroy();
+      this.compRef = undefined;
+    }
   }
 
   /**

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 @@
-<ng-template dsListableObject>
+<ng-template dsDynamicComponentLoader>
 </ng-template>
 <div #badges class="position-absolute ml-1">
     <div class="workflow-badge">

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

@@ -16,6 +16,12 @@ import { WorkflowItem } from '../../../../../core/submission/models/workflowitem
 import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 import { Item } from '../../../../../core/shared/item.model';
+import {
+  ItemGridElementComponent
+} from '../../../../../shared/object-grid/item-grid-element/item-types/item/item-grid-element.component';
+import {
+  DynamicComponentLoaderDirective
+} from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
 import {
   ListableObjectDirective
 } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
@@ -48,7 +54,7 @@ describe('WorkspaceItemSearchResultAdminWorkflowGridElementComponent', () => {
   let itemRD$;
   let linkService;
   let object;
-  let themeService;
+  let themeService: ThemeService;
   let supervisionOrderDataService;
 
   function init() {
@@ -71,6 +77,9 @@ describe('WorkspaceItemSearchResultAdminWorkflowGridElementComponent', () => {
     TestBed.configureTestingModule(
       {
         imports: [
+          WorkspaceItemSearchResultAdminWorkflowGridElementComponent,
+          ItemGridElementComponent,
+          DynamicComponentLoaderDirective,
           NoopAnimationsModule,
           TranslateModule.forRoot(),
           RouterTestingModule.withRoutes([]),

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,4 +1,4 @@
-import { Component, ComponentFactoryResolver, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ComponentFactoryResolver, ElementRef, OnInit, ViewChild, OnDestroy, ComponentRef } from '@angular/core';
 
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map, mergeMap, take, tap } from 'rxjs/operators';
@@ -16,9 +16,7 @@ import {
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
 import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
-import {
-  ListableObjectDirective
-} from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
+import { DynamicComponentLoaderDirective } from '../../../../../shared/abstract-component-loader/dynamic-component-loader.directive';
 import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { followLink } from '../../../../../shared/utils/follow-link-config.model';
@@ -37,6 +35,7 @@ import { SupervisionOrder } from '../../../../../core/supervision-order/models/s
 import { PaginatedList } from '../../../../../core/data/paginated-list.model';
 import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { hasValue } from '../../../../../shared/empty.util';
 
 @listableObjectComponent(WorkspaceItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
 @Component({
@@ -47,7 +46,7 @@ import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service
 /**
  * The component for displaying a grid element for an workflow item on the admin workflow search page
  */
-export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkspaceItemSearchResult, WorkspaceItem> implements OnInit {
+export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkspaceItemSearchResult, WorkspaceItem> implements OnDestroy, OnInit {
 
   /**
    * The item linked to the workspace item
@@ -67,7 +66,7 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
   /**
    * Directive used to render the dynamic component in
    */
-  @ViewChild(ListableObjectDirective, { static: true }) listableObjectDirective: ListableObjectDirective;
+  @ViewChild(DynamicComponentLoaderDirective, { static: true }) dynamicComponentLoaderDirective: DynamicComponentLoaderDirective;
 
   /**
    * The html child that contains the badges html
@@ -79,9 +78,13 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
    */
   @ViewChild('buttons', { static: true }) buttons: ElementRef;
 
+  /**
+   * The reference to the dynamic component
+   */
+  protected compRef: ComponentRef<Component>;
+
   constructor(
     public dsoNameService: DSONameService,
-    private componentFactoryResolver: ComponentFactoryResolver,
     private linkService: LinkService,
     protected truncatableService: TruncatableService,
     private themeService: ThemeService,
@@ -100,24 +103,24 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
     this.dso = this.linkService.resolveLink(this.dso, followLink('item'));
     this.item$ = (this.dso.item as Observable<RemoteData<Item>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload());
     this.item$.pipe(take(1)).subscribe((item: Item) => {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent(item));
+        const component: GenericConstructor<Component> = 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();
       }
     );
 
@@ -130,6 +133,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<Component>}

src/app/app-routing-paths.ts

@@ -31,6 +31,7 @@ export function getBitstreamRequestACopyRoute(item, bitstream): { routerLink: st
     }
   };
 }
+export const COAR_NOTIFY_SUPPORT = 'coar-notify-support';
 
 export const HOME_PAGE_PATH = 'admin';
 
@@ -132,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';
+

src/app/app-routing.module.ts

@@ -3,9 +3,6 @@ import { NoPreloading, RouterModule } from '@angular/router';
 import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';
 
 import { AuthenticatedGuard } from './core/auth/authenticated.guard';
-import {
-  SiteAdministratorGuard
-} from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 import {
   ACCESS_CONTROL_MODULE_PATH,
   ADMIN_MODULE_PATH,
@@ -38,6 +35,7 @@ import {
   ThemedPageInternalServerErrorComponent
 } from './page-internal-server-error/themed-page-internal-server-error.component';
 import { ServerCheckGuard } from './core/server-check/server-check.guard';
+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 { Action, StoreConfig, StoreModule } from '@ngrx/store';
@@ -45,6 +43,8 @@ import { storeModuleConfig } from './app.reducer';
 import { EffectsModule } from '@ngrx/effects';
 import { submissionReducers, SubmissionState } from './submission/submission.reducers';
 import { submissionEffects } from './submission/submission.effects';
+import { NOTIFICATIONS_MODULE_PATH } from './admin/admin-routing-paths';
+import { ForgotPasswordCheckGuard } from './core/rest-property/forgot-password-check-guard.guard';
 
 @NgModule({
   imports: [
@@ -99,7 +99,7 @@ import { submissionEffects } from './submission/submission.effects';
             path: FORGOT_PASSWORD_PATH,
             loadChildren: () => import('./forgot-password/forgot-password-routes')
               .then((m) => m.ROUTES),
-            canActivate: [EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard, ForgotPasswordCheckGuard]
           },
           {
             path: COMMUNITY_MODULE_PATH,
@@ -159,7 +159,19 @@ import { submissionEffects } from './submission/submission.effects';
             path: ADMIN_MODULE_PATH,
             loadChildren: () => import('./admin/admin-routes')
               .then((m) => m.ROUTES),
-            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',
@@ -222,6 +234,11 @@ import { submissionEffects } from './submission/submission.effects';
               .then((m) => m.ROUTES),
             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-routes').then((m) => m.ROUTES)
@@ -257,7 +274,7 @@ import { submissionEffects } from './submission/submission.effects';
               .then((m) => m.ROUTES),
             canActivate: [AuthenticatedGuard]
           },
-          { path: '**', pathMatch: 'full', component: ThemedPageNotFoundComponent },
+          { path: '**', pathMatch: 'full', component: ThemedPageNotFoundComponent }
         ]
       }
     ], {

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

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

@@ -2,14 +2,35 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { ActivatedRoute, Router, RouterLink } 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 {
+  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 { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
+import {
+  DynamicCustomSwitchModel
+} from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
 import cloneDeep from 'lodash/cloneDeep';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
-import { getAllSucceededRemoteDataPayload, getFirstCompletedRemoteData, getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload, getRemoteDataPayload } from '../../core/shared/operators';
+import {
+  getAllSucceededRemoteDataPayload,
+  getFirstCompletedRemoteData,
+  getFirstSucceededRemoteData,
+  getFirstSucceededRemoteDataPayload,
+  getRemoteDataPayload
+} from '../../core/shared/operators';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service';
 import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
@@ -264,7 +285,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];
 
   /**
@@ -275,8 +296,8 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     new DynamicFormGroupModel({
       id: 'fileNamePrimaryContainer',
       group: [
-        this.fileNameModel,
-        this.primaryBitstreamModel
+        this.primaryBitstreamModel,
+        this.fileNameModel
       ]
     }, {
       grid: {
@@ -314,7 +335,10 @@ 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: {

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

@@ -1,28 +0,0 @@
-import { Component } from '@angular/core';
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
-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',
-    standalone: true
-})
-
-export class ThemedBrowseByDatePageComponent
-  extends ThemedComponent<BrowseByDatePageComponent> {
-  protected getComponentName(): string {
-    return 'BrowseByDatePageComponent';
-  }
-
-  protected importThemedComponent(themeName: string): Promise<any> {
-    return import(`../../../themes/${themeName}/app/browse-by/browse-by-date-page/browse-by-date-page.component`);
-  }
-
-  protected importUnthemedComponent(): Promise<any> {
-    return import(`./browse-by-date-page.component`);
-  }
-}

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

@@ -1,4 +1,4 @@
-import { BrowseByDatePageComponent } from './browse-by-date-page.component';
+import { BrowseByDateComponent } from './browse-by-date.component';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -15,7 +15,7 @@ import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { Community } from '../../core/shared/community.model';
 import { Item } from '../../core/shared/item.model';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
-import { toRemoteData } from '../browse-by-metadata-page/browse-by-metadata-page.component.spec';
+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 { PaginationService } from '../../core/pagination/pagination.service';
@@ -23,10 +23,11 @@ import { PaginationServiceStub } from '../../shared/testing/pagination-service.s
 import { APP_CONFIG } from '../../../config/app-config.interface';
 import { environment } from '../../../environments/environment';
 import { SortDirection } from '../../core/cache/models/sort-options.model';
+import { cold } from 'jasmine-marbles';
 
-describe('BrowseByDatePageComponent', () => {
-  let comp: BrowseByDatePageComponent;
-  let fixture: ComponentFixture<BrowseByDatePageComponent>;
+describe('BrowseByDateComponent', () => {
+  let comp: BrowseByDateComponent;
+  let fixture: ComponentFixture<BrowseByDateComponent>;
   let route: ActivatedRoute;
   let paginationService;
 
@@ -61,11 +62,11 @@ describe('BrowseByDatePageComponent', () => {
     }
   });
 
-   const mockBrowseService = {
-     getBrowseEntriesFor: (options: BrowseEntrySearchOptions) => toRemoteData([]),
-     getBrowseItemsFor: (value: string, options: BrowseEntrySearchOptions) => toRemoteData([firstItem]),
-     getFirstItemFor: (definition: string, scope?: string, sortDirection?: SortDirection) => null
-   };
+  const mockBrowseService = {
+    getBrowseEntriesFor: (options: BrowseEntrySearchOptions) => toRemoteData([]),
+    getBrowseItemsFor: (value: string, options: BrowseEntrySearchOptions) => toRemoteData([firstItem]),
+    getFirstItemFor: (definition: string, scope?: string, sortDirection?: SortDirection) => null
+  };
 
   const mockDsoService = {
     findById: () => createSuccessfulRemoteDataObject$(mockCommunity)
@@ -74,7 +75,7 @@ describe('BrowseByDatePageComponent', () => {
   const activatedRouteStub = Object.assign(new ActivatedRouteStub(), {
     params: observableOf({}),
     queryParams: observableOf({}),
-    data: observableOf({ metadata: 'dateissued', metadataField: 'dc.date.issued' })
+    data: observableOf({metadata: 'dateissued', metadataField: 'dc.date.issued'})
   });
 
   const mockCdRef = Object.assign({
@@ -85,22 +86,28 @@ describe('BrowseByDatePageComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-    imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule, BrowseByDatePageComponent, EnumKeysPipe, VarDirective],
-    providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: BrowseService, useValue: mockBrowseService },
-        { provide: DSpaceObjectDataService, useValue: mockDsoService },
-        { provide: Router, useValue: new RouterMock() },
-        { provide: PaginationService, useValue: paginationService },
-        { provide: ChangeDetectorRef, useValue: mockCdRef },
-        { provide: APP_CONFIG, useValue: environment }
-    ],
-    schemas: [NO_ERRORS_SCHEMA]
-}).compileComponents();
+      imports: [CommonModule,
+        RouterTestingModule.withRoutes([]),
+        TranslateModule.forRoot(),
+        NgbModule,
+        BrowseByDateComponent,
+        EnumKeysPipe,
+        VarDirective],
+      providers: [
+        {provide: ActivatedRoute, useValue: activatedRouteStub},
+        {provide: BrowseService, useValue: mockBrowseService},
+        {provide: DSpaceObjectDataService, useValue: mockDsoService},
+        {provide: Router, useValue: new RouterMock()},
+        {provide: PaginationService, useValue: paginationService},
+        {provide: ChangeDetectorRef, useValue: mockCdRef},
+        {provide: APP_CONFIG, useValue: environment}
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
   }));
 
   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.
@@ -111,9 +118,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();
     });
   });
 

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

@@ -1,10 +1,10 @@
-import { ChangeDetectorRef, Component, Inject } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
 import {
-  BrowseByMetadataPageComponent,
+  BrowseByMetadataComponent,
   browseParamsToOptions,
   getBrowseSearchOptions
-} from '../browse-by-metadata-page/browse-by-metadata-page.component';
-import { combineLatest as observableCombineLatest } from 'rxjs';
+} 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';
@@ -35,11 +35,13 @@ import { BrowseByComponent } from '../../shared/browse-by/browse-by.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { ThemedBrowseByComponent } from 'src/app/shared/browse-by/themed-browse-by.component';
+import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
 
 @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',
   standalone: true,
   imports: [
     VarDirective,
@@ -62,21 +64,23 @@ import { ThemedBrowseByComponent } from 'src/app/shared/browse-by/themed-browse-
  * 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);
   }
@@ -89,19 +93,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];
+        map(([routeParams, queryParams, scope, data, currentPage, currentSort]) => {
+          return [Object.assign({}, routeParams, queryParams, data), scope, currentPage, currentSort];
         })
-      ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
+      ).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);
       }));
   }
@@ -117,12 +119,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<RemoteData<Item>> = this.browseService.getFirstItemFor(definition, scope, SortDirection.ASC);
+    const lastItemRD$: Observable<RemoteData<Item>> = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
+    this.loading$ = observableCombineLatest([
+      firstItemRD$,
+      lastItemRD$,
+    ]).pipe(
+      map(([firstItemRD, lastItemRD]: [RemoteData<Item>, RemoteData<Item>]) => firstItemRD.isLoading || lastItemRD.isLoading)
+    );
     this.subs.push(
-      observableCombineLatest([firstItemRD, lastItemRD]).subscribe(([firstItem, lastItem]) => {
-        let lowerLimit: number = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
-        let upperLimit: number = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
+      observableCombineLatest([
+        firstItemRD$,
+        lastItemRD$,
+      ]).subscribe(([firstItemRD, lastItemRD]: [RemoteData<Item>, RemoteData<Item>]) => {
+        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;