Merge remote-tracking branch '4Science-bitbucket/main' into CST-5337

.eslintrc.json

@@ -6,7 +6,8 @@
     "eslint-plugin-import",
     "eslint-plugin-jsdoc",
     "eslint-plugin-deprecation",
-    "eslint-plugin-unused-imports"
+    "unused-imports",
+    "eslint-plugin-lodash"
   ],
   "overrides": [
     {
@@ -202,7 +203,13 @@
         "deprecation/deprecation": "warn",
 
         "import/order": "off",
-        "import/no-deprecated": "warn"
+        "import/no-deprecated": "warn",
+        "import/no-namespace": "error",
+        "unused-imports/no-unused-imports": "error",
+        "lodash/import-scope": [
+          "error",
+          "method"
+        ]
       }
     },
     {

.gitattributes

@@ -1,2 +1,16 @@
-# Auto detect text files and perform LF normalization
+# By default, auto detect text files and perform LF normalization
+# This ensures code is always checked in with LF line endings
 * text=auto
+
+# JS and TS files must always use LF for Angular tools to work
+# Some Angular tools expect LF line endings, even on Windows.
+# This ensures Windows always checks out these files with LF line endings
+# We've copied many of these rules from https://github.com/angular/angular-cli/
+*.js eol=lf
+*.ts eol=lf
+*.json eol=lf
+*.json5 eol=lf
+*.css eol=lf
+*.scss eol=lf
+*.html eol=lf
+*.svg eol=lf

.github/workflows/build.yml

@@ -6,6 +6,9 @@ name: Build
 # Run this Build for all pushes / PRs to current branch
 on: [push, pull_request]
 
+permissions:
+  contents: read  #  to fetch code (actions/checkout)
+
 jobs:
   tests:
     runs-on: ubuntu-latest
@@ -29,11 +32,11 @@ jobs:
     steps:
       # https://github.com/actions/checkout
       - name: Checkout codebase
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       # https://github.com/actions/setup-node
       - name: Install Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -58,7 +61,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Cache Yarn dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           # Cache entire Yarn cache directory (see previous step)
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -85,7 +88,7 @@ jobs:
       # Upload coverage reports to Codecov (for one version of Node only)
       # https://github.com/codecov/codecov-action
       - name: Upload coverage to Codecov.io
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
         if: matrix.node-version == '16.x'
 
       # Using docker-compose start backend using CI configuration
@@ -100,7 +103,7 @@ jobs:
       # https://github.com/cypress-io/github-action
       # (NOTE: to run these e2e tests locally, just use 'ng e2e')
       - name: Run e2e tests (integration tests)
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         with:
           # Run tests in Chrome, headless mode
           browser: chrome
@@ -116,7 +119,7 @@ jobs:
       # Cypress always creates a video of all e2e tests (whether they succeeded or failed)
       # Save those in an Artifact
       - name: Upload e2e test videos to Artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: always()
         with:
           name: e2e-test-videos
@@ -125,7 +128,7 @@ jobs:
       # If e2e tests fail, Cypress creates a screenshot of what happened
       # Save those in an Artifact
       - name: Upload e2e test failure screenshots to Artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: e2e-test-screenshots

.github/workflows/docker.yml

@@ -12,6 +12,9 @@ on:
       - 'dspace-**'
   pull_request:
 
+permissions:
+  contents: read  #  to fetch code (actions/checkout)
+
 jobs:
   docker:
     # Ensure this job never runs on forked repos. It's only executed for 'dspace/dspace-angular'
@@ -39,11 +42,11 @@ jobs:
     steps:
       # https://github.com/actions/checkout
       - name: Checkout codebase
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       # https://github.com/docker/setup-buildx-action
       - name: Setup Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
 
       # https://github.com/docker/setup-qemu-action
       - name: Set up QEMU emulation to build for multiple architectures
@@ -53,7 +56,7 @@ jobs:
       - name: Login to DockerHub
         # Only login if not a PR, as PRs only trigger a Docker build and not a push
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_ACCESS_TOKEN }}
@@ -65,7 +68,7 @@ jobs:
       # Get Metadata for docker_build step below
       - name: Sync metadata (tags, labels) from GitHub to Docker for 'dspace-angular' image
         id: meta_build
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
         with:
           images: dspace/dspace-angular
           tags: ${{ env.IMAGE_TAGS }}
@@ -74,7 +77,7 @@ jobs:
       # https://github.com/docker/build-push-action
       - name: Build and push 'dspace-angular' image
         id: docker_build
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
         with:
           context: .
           file: ./Dockerfile

.github/workflows/issue_opened.yml

@@ -5,25 +5,22 @@ on:
   issues:
     types: [opened]
 
+permissions: {}
 jobs:
   automation:
     runs-on: ubuntu-latest
     steps:
     # Add the new issue to a project board, if it needs triage
-    # See https://github.com/marketplace/actions/create-project-card-action
-    - name: Add issue to project board
+    # See https://github.com/actions/add-to-project
+    - name: Add issue to triage board
       # Only add to project board if issue is flagged as "needs triage" or has no labels
       # NOTE: By default we flag new issues as "needs triage" in our issue template
       if: (contains(github.event.issue.labels.*.name, 'needs triage') || join(github.event.issue.labels.*.name) == '')
-      uses: technote-space/create-project-card-action@v1
+      uses: actions/add-to-project@v0.3.0
       # Note, the authentication token below is an ORG level Secret. 
-      # It must be created/recreated manually via a personal access token with "public_repo" and "admin:org" permissions
+      # It must be created/recreated manually via a personal access token with admin:org, project, public_repo permissions
       # See: https://docs.github.com/en/actions/configuring-and-managing-workflows/authenticating-with-the-github_token#permissions-for-the-github_token
       # This is necessary because the "DSpace Backlog" project is an org level project (i.e. not repo specific)
       with:
-        GITHUB_TOKEN: ${{ secrets.ORG_PROJECT_TOKEN }}
-        PROJECT: DSpace Backlog
-        COLUMN: Triage
-        CHECK_ORG_PROJECT: true
-      # Ignore errors
-      continue-on-error: true
+        github-token: ${{ secrets.TRIAGE_PROJECT_TOKEN }}
+        project-url: https://github.com/orgs/DSpace/projects/24

.github/workflows/label_merge_conflicts.yml

@@ -5,21 +5,32 @@ name: Check for merge conflicts
 # NOTE: This means merge conflicts are only checked for when a PR is merged to main.
 on:
   push:
-    branches:
-      - main
+    branches: [ main ]
+  # So that the `conflict_label_name` is removed if conflicts are resolved,
+  # we allow this to run for `pull_request_target` so that github secrets are available.
+  pull_request_target:
+    types: [ synchronize ]
+
+permissions: {}
 
 jobs:
   triage:
+    # Ensure this job never runs on forked repos. It's only executed for 'dspace/dspace-angular'
+    if: github.repository == 'dspace/dspace-angular'
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
     steps:
-      # See: https://github.com/mschilde/auto-label-merge-conflicts/
+      # See: https://github.com/prince-chrismc/label-merge-conflicts-action
       - name: Auto-label PRs with merge conflicts
-        uses: mschilde/auto-label-merge-conflicts@v2.0
+        uses: prince-chrismc/label-merge-conflicts-action@v2
         # Add "merge conflict" label if a merge conflict is detected. Remove it when resolved.
         # Note, the authentication token is created automatically
         # See: https://docs.github.com/en/actions/configuring-and-managing-workflows/authenticating-with-the-github_token
         with:
-          CONFLICT_LABEL_NAME: 'merge conflict'
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        # Ignore errors
-        continue-on-error: true
+          conflict_label_name: 'merge conflict'
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          conflict_comment: |
+            Hi @${author},
+            Conflicts have been detected against the base branch.
+            Please [resolve these conflicts](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/addressing-merge-conflicts/about-merge-conflicts) as soon as you can. Thanks!

README.md

@@ -179,7 +179,7 @@ If needing to update default configurations values for production, update local
 
 -	Update `environment.production.ts` file in `src/environment/` for a `production` environment;
 
-The environment object is provided for use as import in code and is extended with he runtime configuration on bootstrap of the application.
+The environment object is provided for use as import in code and is extended with the runtime configuration on bootstrap of the application.
 
 > Take caution moving runtime configs into the buildtime configuration. They will be overwritten by what is defined in the runtime config on bootstrap.
 
@@ -351,7 +351,7 @@ Documentation
 
 Official DSpace documentation is available in the DSpace wiki at https://wiki.lyrasis.org/display/DSDOC7x/
 
-Some UI specific configuration documentation is also found in the [`./docs`](docs) folder of htis codebase.
+Some UI specific configuration documentation is also found in the [`./docs`](docs) folder of this codebase.
 
 ### Building code documentation
 

config/config.example.yml

@@ -14,6 +14,8 @@ ui:
   rateLimiter:
     windowMs: 60000 # 1 minute
     max: 500 # limit each IP to 500 requests per windowMs
+  # Trust X-FORWARDED-* headers from proxies (default = true)
+  useProxies: true
 
 # The REST API server settings
 # NOTE: these settings define which (publicly available) REST API to use. They are usually
@@ -150,12 +152,24 @@ languages:
   - code: fi
     label: Suomi
     active: true
+  - code: sv
+    label: Svenska
+    active: true
   - code: tr
     label: Türkçe
     active: true
+  - code: kk
+    label: Қазақ
+    active: true
   - code: bn
     label: বাংলা
     active: true
+  - code: hi
+    label: हिंदी
+    active: true
+  - code: el
+    label: Ελληνικά
+    active: true
 
 # Browse-By Pages
 browseBy:
@@ -165,6 +179,27 @@ browseBy:
   fiveYearLimit: 30
   # The absolute lowest year to display in the dropdown (only used when no lowest date can be found for all items)
   defaultLowerLimit: 1900
+  # If true, thumbnail images for items will be added to BOTH search and browse result lists.
+  showThumbnails: true
+  # The number of entries in a paginated browse results list.
+  # Rounded to the nearest size in the list of selectable sizes on the
+  # settings menu.
+  pageSize: 20
+
+communityList:
+  # No. of communities to list per expansion (show more)
+  pageSize: 20
+
+homePage:
+  recentSubmissions:
+    # The number of item showing in recent submission components
+    pageSize: 5
+    # Sort record of recent submission
+    sortField: 'dc.date.accessioned'
+  topLevelCommunityList:
+    # 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
 
 # Item Config
 item:
@@ -240,7 +275,7 @@ themes:
 
 # The default bundles that should always be displayed as suggestions when you upload a new bundle
 bundle:
-  - standardBundles: [ ORIGINAL, THUMBNAIL, LICENSE ]
+  standardBundles: [ ORIGINAL, THUMBNAIL, LICENSE ]
 
 # Whether to enable media viewer for image and/or video Bitstreams (i.e. Bitstreams whose MIME type starts with 'image' or 'video').
 # For images, this enables a gallery viewer where you can zoom or page through images.
@@ -248,3 +283,16 @@ bundle:
 mediaViewer:
   image: false
   video: false
+
+# Whether the end user agreement is required before users use the repository.
+# If enabled, the user will be required to accept the agreement before they can use the repository.
+# And whether the privacy statement should exist or not.
+info:
+  enableEndUserAgreement: true
+  enablePrivacyStatement: true
+
+# Whether to enable Markdown (https://commonmark.org/) and MathJax (https://www.mathjax.org/)
+# display in supported metadata fields. By default, only dc.description.abstract is supported.
+markdown:
+  enabled: false
+  mathjax: false

cypress/.gitignore

@@ -1,2 +1,3 @@
 screenshots/
 videos/
+downloads/

cypress/integration/my-dspace.spec.ts

@@ -4,10 +4,11 @@ import { testA11y } from 'cypress/support/utils';
 
 describe('My DSpace page', () => {
     it('should display recent submissions and pass accessibility tests', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
         cy.visit('/mydspace');
 
+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
         cy.get('ds-my-dspace-page').should('exist');
 
         // At least one recent submission should be displayed
@@ -36,10 +37,11 @@ describe('My DSpace page', () => {
     });
 
     it('should have a working detailed view that passes accessibility tests', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
         cy.visit('/mydspace');
 
+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
         cy.get('ds-my-dspace-page').should('exist');
 
         // Click button in sidebar to display detailed view
@@ -61,9 +63,11 @@ describe('My DSpace page', () => {
 
     // NOTE: Deleting existing submissions is exercised by submission.spec.ts
     it('should let you start a new submission & edit in-progress submissions', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
         cy.visit('/mydspace');
 
+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
         // Open the New Submission dropdown
         cy.get('button[data-test="submission-dropdown"]').click();
         // Click on the "Item" type in that dropdown
@@ -131,9 +135,11 @@ describe('My DSpace page', () => {
     });
 
     it('should let you import from external sources', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
         cy.visit('/mydspace');
 
+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
         // Open the New Import dropdown
         cy.get('button[data-test="import-dropdown"]').click();
         // Click on the "Item" type in that dropdown

cypress/integration/submission.spec.ts

@@ -6,11 +6,12 @@ describe('New Submission page', () => {
     // NOTE: We already test that new submissions can be started from MyDSpace in my-dspace.spec.ts
 
     it('should create a new submission when using /submit path & pass accessibility', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
         // Test that calling /submit with collection & entityType will create a new submission
         cy.visit('/submit?collection=' + TEST_SUBMIT_COLLECTION_UUID + '&entityType=none');
 
+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
         // Should redirect to /workspaceitems, as we've started a new submission
         cy.url().should('include', '/workspaceitems');
 
@@ -33,11 +34,12 @@ describe('New Submission page', () => {
     });
 
     it('should block submission & show errors if required fields are missing', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
         // Create a new submission
         cy.visit('/submit?collection=' + TEST_SUBMIT_COLLECTION_UUID + '&entityType=none');
 
+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
         // Attempt an immediate deposit without filling out any fields
         cy.get('button#deposit').click();
 
@@ -92,11 +94,12 @@ describe('New Submission page', () => {
     });
 
     it('should allow for deposit if all required fields completed & file uploaded', () => {
-        cy.login(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
-
         // Create a new submission
         cy.visit('/submit?collection=' + TEST_SUBMIT_COLLECTION_UUID + '&entityType=none');
 
+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+
         // Fill out all required fields (Title, Date)
         cy.get('input#dc_title').type('DSpace logo uploaded via e2e tests');
         cy.get('input#dc_date_issued_year').type('2022');

cypress/support/commands.ts

@@ -19,6 +19,14 @@ declare global {
              * @param password password to login as
              */
             login(email: string, password: string): typeof login;
+
+            /**
+             * Login via form before accessing the next page. Useful to fill out login
+             * form when a cy.visit() call is to an a page which requires authentication.
+             * @param email email to login as
+             * @param password password to login as
+             */
+             loginViaForm(email: string, password: string): typeof loginViaForm;
         }
     }
 }
@@ -26,6 +34,8 @@ declare global {
 /**
  * Login user via REST API directly, and pass authentication token to UI via
  * the UI's dsAuthInfo cookie.
+ * WARNING: WHILE THIS METHOD WORKS, OCCASIONALLY RANDOM AUTHENTICATION ERRORS OCCUR.
+ * At this time "loginViaForm()" seems more consistent/stable.
  * @param email email to login as
  * @param password password to login as
  */
@@ -81,3 +91,20 @@ function login(email: string, password: string): void {
 }
 // Add as a Cypress command (i.e. assign to 'cy.login')
 Cypress.Commands.add('login', login);
+
+
+/**
+ * Login user via displayed login form
+ * @param email email to login as
+ * @param password password to login as
+ */
+ function loginViaForm(email: string, password: string): void {
+    // Enter email
+    cy.get('ds-log-in [data-test="email"]').type(email);
+    // Enter password
+    cy.get('ds-log-in [data-test="password"]').type(password);
+    // Click login button
+    cy.get('ds-log-in [data-test="login-button"]').click();
+}
+// Add as a Cypress command (i.e. assign to 'cy.loginViaForm')
+Cypress.Commands.add('loginViaForm', loginViaForm);

cypress/support/index.ts

@@ -24,7 +24,7 @@ import 'cypress-axe';
 beforeEach(() => {
     // Pre-agree to all Klaro cookies by setting the klaro-anonymous cookie
     // This just ensures it doesn't get in the way of matching other objects in the page.
-    cy.setCookie('klaro-anonymous', '{%22authentication%22:true%2C%22preferences%22:true%2C%22acknowledgement%22:true%2C%22google-analytics%22:true}');
+    cy.setCookie('klaro-anonymous', '{%22authentication%22:true%2C%22preferences%22:true%2C%22acknowledgement%22:true%2C%22google-analytics%22:true%2C%22google-recaptcha%22:true}');
 });
 
 // For better stability between tests, we visit "about:blank" (i.e. blank page) after each test.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dspace-angular",
-  "version": "0.0.0",
+  "version": "7.5.0-next",
   "scripts": {
     "ng": "ng",
     "config:watch": "nodemon",
@@ -10,7 +10,7 @@
     "start:prod": "yarn run build:prod && cross-env NODE_ENV=production yarn run serve:ssr",
     "start:mirador:prod": "yarn run build:mirador && yarn run start:prod",
     "preserve": "yarn base-href",
-    "serve": "ng serve --configuration development",
+    "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
     "serve:ssr": "node dist/server/main",
     "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
     "build": "ng build --configuration development",
@@ -78,6 +78,7 @@
     "@nguniversal/express-engine": "^13.0.2",
     "@ngx-translate/core": "^13.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
+    "@types/grecaptcha": "^3.0.4",
     "angular-idle-preload": "3.0.0",
     "angulartics2": "^12.0.0",
     "axios": "^0.27.2",
@@ -88,6 +89,8 @@
     "compression": "^1.7.4",
     "cookie-parser": "1.4.5",
     "core-js": "^3.7.0",
+    "date-fns": "^2.29.3",
+    "date-fns-tz": "^1.3.7",
     "deepmerge": "^4.2.2",
     "express": "^4.17.1",
     "express-rate-limit": "^5.1.3",
@@ -102,20 +105,21 @@
     "json5": "^2.1.3",
     "jsonschema": "1.4.0",
     "jwt-decode": "^3.1.2",
-    "klaro": "^0.7.10",
+    "klaro": "^0.7.18",
     "lodash": "^4.17.21",
+    "markdown-it": "^13.0.1",
+    "markdown-it-mathjax3": "^4.3.1",
     "mirador": "^3.3.0",
     "mirador-dl-plugin": "^0.13.0",
     "mirador-share-plugin": "^0.11.0",
-    "moment": "^2.29.2",
     "morgan": "^1.10.0",
     "ng-mocks": "^13.1.1",
     "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.3",
     "ngx-infinite-scroll": "^10.0.1",
-    "ngx-moment": "^5.0.0",
     "ngx-pagination": "5.0.0",
     "ngx-sortablejs": "^11.1.0",
+    "ngx-ui-switch": "^11.0.1",
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
     "postcss-cli": "^9.1.0",
@@ -123,13 +127,13 @@
     "react-copy-to-clipboard": "^5.0.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.5.5",
+    "sanitize-html": "^2.7.2",
     "sortablejs": "1.13.0",
     "tslib": "^2.0.0",
     "url-parse": "^1.5.6",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
-    "zone.js": "~0.11.5",
-    "ngx-ui-switch": "^11.0.1"
+    "zone.js": "~0.11.5"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~13.1.0",
@@ -155,16 +159,17 @@
     "@types/js-cookie": "2.2.6",
     "@types/lodash": "^4.14.165",
     "@types/node": "^14.14.9",
+    "@types/sanitize-html": "^2.6.2",
     "@typescript-eslint/eslint-plugin": "5.11.0",
     "@typescript-eslint/parser": "5.11.0",
-    "axe-core": "^4.3.3",
+    "axe-core": "^4.4.3",
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.2.0",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "cssnano": "^5.0.6",
-    "cypress": "9.5.1",
+    "cypress": "9.7.0",
     "cypress-axe": "^0.14.0",
     "debug-loader": "^0.0.1",
     "deep-freeze": "0.0.1",
@@ -173,6 +178,7 @@
     "eslint-plugin-deprecation": "^1.3.2",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsdoc": "^38.0.6",
+    "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "express-static-gzip": "^2.1.5",
     "fork-ts-checker-webpack-plugin": "^6.0.3",

scripts/base-href.ts

@@ -1,4 +1,4 @@
-import * as fs from 'fs';
+import { existsSync, writeFileSync } from 'fs';
 import { join } from 'path';
 
 import { AppConfig } from '../src/config/app-config.interface';
@@ -16,7 +16,7 @@ const appConfig: AppConfig = buildAppConfig();
 
 const angularJsonPath = join(process.cwd(), 'angular.json');
 
-if (!fs.existsSync(angularJsonPath)) {
+if (!existsSync(angularJsonPath)) {
   console.error(`Error:\n${angularJsonPath} does not exist\n`);
   process.exit(1);
 }
@@ -30,7 +30,7 @@ try {
 
   angularJson.projects['dspace-angular'].architect.build.options.baseHref = baseHref;
 
-  fs.writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2) + '\n');
+  writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2) + '\n');
 } catch (e) {
   console.error(e);
 }

scripts/env-to-yaml.ts

@@ -1,5 +1,5 @@
-import * as fs from 'fs';
-import * as yaml from 'js-yaml';
+import { existsSync, writeFileSync } from 'fs';
+import { dump } from 'js-yaml';
 import { join } from 'path';
 
 /**
@@ -18,7 +18,7 @@ if (args[0] === undefined) {
 
 const envFullPath = join(process.cwd(), args[0]);
 
-if (!fs.existsSync(envFullPath)) {
+if (!existsSync(envFullPath)) {
   console.error(`Error:\n${envFullPath} does not exist\n`);
   process.exit(1);
 }
@@ -26,10 +26,10 @@ if (!fs.existsSync(envFullPath)) {
 try {
   const env = require(envFullPath).environment;
 
-  const config = yaml.dump(env);
+  const config = dump(env);
   if (args[1]) {
     const ymlFullPath = join(process.cwd(), args[1]);
-    fs.writeFileSync(ymlFullPath, config);
+    writeFileSync(ymlFullPath, config);
   } else {
     console.log(config);
   }

scripts/serve.ts

@@ -1,4 +1,4 @@
-import * as child from 'child_process';
+import { spawn } from 'child_process';
 
 import { AppConfig } from '../src/config/app-config.interface';
 import { buildAppConfig } from '../src/config/config.server';
@@ -7,8 +7,9 @@ const appConfig: AppConfig = buildAppConfig();
 
 /**
  * Calls `ng serve` with the following arguments configured for the UI in the app config: host, port, nameSpace, ssl
+ * Any CLI arguments given to this script are patched through to `ng serve` as well.
  */
-child.spawn(
-  `ng serve --host ${appConfig.ui.host} --port ${appConfig.ui.port} --serve-path ${appConfig.ui.nameSpace} --ssl ${appConfig.ui.ssl}`,
+spawn(
+  `ng serve --host ${appConfig.ui.host} --port ${appConfig.ui.port} --serve-path ${appConfig.ui.nameSpace} --ssl ${appConfig.ui.ssl} ${process.argv.slice(2).join(' ')} --configuration development`,
   { stdio: 'inherit', shell: true }
 );

scripts/test-rest.ts

@@ -1,5 +1,5 @@
-import * as http from 'http';
-import * as https from 'https';
+import { request } from 'http';
+import { request as https_request } from 'https';
 
 import { AppConfig } from '../src/config/app-config.interface';
 import { buildAppConfig } from '../src/config/config.server';
@@ -20,9 +20,15 @@ console.log(`...Testing connection to REST API at ${restUrl}...\n`);
 
 // If SSL enabled, test via HTTPS, else via HTTP
 if (appConfig.rest.ssl) {
-    const req = https.request(restUrl, (res) => {
+    const req = https_request(restUrl, (res) => {
         console.log(`RESPONSE: ${res.statusCode} ${res.statusMessage} \n`);
-        res.on('data', (data) => {
+        // We will keep reading data until the 'end' event fires.
+        // This ensures we don't just read the first chunk.
+        let data = '';
+        res.on('data', (chunk) => {
+            data += chunk;
+        });
+        res.on('end', () => {
             checkJSONResponse(data);
         });
     });
@@ -33,9 +39,15 @@ if (appConfig.rest.ssl) {
 
     req.end();
 } else {
-    const req = http.request(restUrl, (res) => {
+    const req = request(restUrl, (res) => {
         console.log(`RESPONSE: ${res.statusCode} ${res.statusMessage} \n`);
-        res.on('data', (data) => {
+        // We will keep reading data until the 'end' event fires.
+        // This ensures we don't just read the first chunk.
+        let data = '';
+        res.on('data', (chunk) => {
+            data += chunk;
+        });
+        res.on('end', () => {
             checkJSONResponse(data);
         });
     });

server.ts

@@ -19,14 +19,17 @@ import 'zone.js/node';
 import 'reflect-metadata';
 import 'rxjs';
 
-import axios from 'axios';
-import * as pem from 'pem';
-import * as https from 'https';
+/* eslint-disable import/no-namespace */
 import * as morgan from 'morgan';
 import * as express from 'express';
-import * as bodyParser from 'body-parser';
 import * as compression from 'compression';
 import * as expressStaticGzip from 'express-static-gzip';
+/* eslint-enable import/no-namespace */
+
+import axios from 'axios';
+import { createCertificate } from 'pem';
+import { createServer } from 'https';
+import { json } from 'body-parser';
 
 import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
@@ -48,6 +51,7 @@ import { ServerAppModule } from './src/main.server';
 import { buildAppConfig } from './src/config/config.server';
 import { APP_CONFIG, AppConfig } from './src/config/app-config.interface';
 import { extendEnvironmentWithAppConfig } from './src/config/config.util';
+import { logStartupMessage } from './startup-message';
 
 /*
  * Set path for the browser application's dist folder
@@ -75,6 +79,10 @@ export function app() {
    */
   const server = express();
 
+  // Tell Express to trust X-FORWARDED-* headers from proxies
+  // See https://expressjs.com/en/guide/behind-proxies.html
+  server.set('trust proxy', environment.ui.useProxies);
+
   /*
    * If production mode is enabled in the environment file:
    * - Enable Angular's production mode
@@ -105,7 +113,7 @@ export function app() {
    * Add parser for request bodies
    * See [morgan](https://github.com/expressjs/body-parser)
    */
-  server.use(bodyParser.json());
+  server.use(json());
 
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
   server.engine('html', (_, options, callback) =>
@@ -261,7 +269,7 @@ function serverStarted() {
  * @param keys SSL credentials
  */
 function createHttpsServer(keys) {
-  https.createServer({
+  createServer({
     key: keys.serviceKey,
     cert: keys.certificate
   }, app).listen(environment.ui.port, environment.ui.host, () => {
@@ -281,6 +289,8 @@ function run() {
 }
 
 function start() {
+  logStartupMessage(environment);
+
   /*
   * If SSL is enabled
   * - Read credentials from configuration files
@@ -313,7 +323,7 @@ function start() {
 
       process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; // lgtm[js/disabling-certificate-validation]
 
-      pem.createCertificate({
+      createCertificate({
         days: 1,
         selfSigned: true
       }, (error, keys) => {

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

@@ -45,7 +45,7 @@
           </div>
         </form>
 
-        <ds-loading *ngIf="searching$ | async"></ds-loading>
+        <ds-themed-loading *ngIf="searching$ | async"></ds-themed-loading>
         <ds-pagination
           *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
           [paginationOptions]="config"

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

@@ -238,7 +238,6 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
             this.epersonService.deleteEPerson(ePerson).pipe(getFirstCompletedRemoteData()).subscribe((restResponse: RemoteData<NoContent>) => {
               if (restResponse.hasSucceeded) {
                 this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', {name: ePerson.name}));
-                this.reset();
               } else {
                 this.notificationsService.error('Error occured when trying to delete EPerson with id: ' + ePerson.id + ' with code: ' + restResponse.statusCode + ' and message: ' + restResponse.errorMessage);
               }

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

@@ -36,12 +36,12 @@
   </button>
 </ds-form>
 
-<ds-loading [showMessage]="false" *ngIf="!formGroup"></ds-loading>
+<ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>
 
 <div *ngIf="epersonService.getActiveEPerson() | async">
   <h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>
 
-  <ds-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-loading>
+  <ds-themed-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-themed-loading>
 
   <ds-pagination
     *ngIf="(groups | async)?.payload?.totalElements > 0"

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

@@ -177,7 +177,7 @@ describe('EPersonFormComponent', () => {
 
     });
     groupsDataService = jasmine.createSpyObj('groupsDataService', {
-      findAllByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
+      findListByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
       getGroupRegistryRouterLink: ''
     });
 

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

@@ -265,7 +265,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
       this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
         if (eperson != null) {
-          this.groups = this.groupsDataService.findAllByHref(eperson._links.groups.href, {
+          this.groups = this.groupsDataService.findListByHref(eperson._links.groups.href, {
             currentPage: 1,
             elementsPerPage: this.config.pageSize
           });
@@ -297,7 +297,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
         }),
         switchMap(([eperson, findListOptions]) => {
           if (eperson != null) {
-            return this.groupsDataService.findAllByHref(eperson._links.groups.href, findListOptions, true, true, followLink('object'));
+            return this.groupsDataService.findListByHref(eperson._links.groups.href, findListOptions, true, true, followLink('object'));
           }
           return observableOf(undefined);
         })
@@ -554,7 +554,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    */
   private updateGroups(options) {
     this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
-      this.groups = this.groupsDataService.findAllByHref(eperson._links.groups.href, options);
+      this.groups = this.groupsDataService.findListByHref(eperson._links.groups.href, options);
     }));
   }
 }

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

@@ -53,7 +53,7 @@ describe('MembersListComponent', () => {
       activeGroup: activeGroup,
       epersonMembers: epersonMembers,
       subgroupMembers: subgroupMembers,
-      findAllByHref(href: string): Observable<RemoteData<PaginatedList<EPerson>>> {
+      findListByHref(href: string): Observable<RemoteData<PaginatedList<EPerson>>> {
         return createSuccessfulRemoteDataObject$(buildPaginatedList<EPerson>(new PageInfo(), groupsDataServiceStub.getEPersonMembers()));
       },
       searchByScope(scope: string, query: string): Observable<RemoteData<PaginatedList<EPerson>>> {

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

@@ -10,7 +10,7 @@ import {
   combineLatest as observableCombineLatest,
   ObservedValueOf,
 } from 'rxjs';
-import { map, mergeMap, switchMap, take } from 'rxjs/operators';
+import { defaultIfEmpty, map, mergeMap, switchMap, take } from 'rxjs/operators';
 import {buildPaginatedList, PaginatedList} from '../../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
@@ -129,7 +129,7 @@ export class MembersListComponent implements OnInit, OnDestroy {
     this.subs.set(SubKey.MembersDTO,
       this.paginationService.getCurrentPagination(this.config.id, this.config).pipe(
         switchMap((currentPagination) => {
-          return this.ePersonDataService.findAllByHref(this.groupBeingEdited._links.epersons.href, {
+          return this.ePersonDataService.findListByHref(this.groupBeingEdited._links.epersons.href, {
               currentPage: currentPagination.currentPage,
               elementsPerPage: currentPagination.pageSize
             }
@@ -144,7 +144,7 @@ export class MembersListComponent implements OnInit, OnDestroy {
         }
       }),
       switchMap((epersonListRD: RemoteData<PaginatedList<EPerson>>) => {
-        const dtos$ = observableCombineLatest(...epersonListRD.payload.page.map((member: EPerson) => {
+        const dtos$ = observableCombineLatest([...epersonListRD.payload.page.map((member: EPerson) => {
           const dto$: Observable<EpersonDtoModel> = observableCombineLatest(
             this.isMemberOfGroup(member), (isMember: ObservedValueOf<Observable<boolean>>) => {
               const epersonDtoModel: EpersonDtoModel = new EpersonDtoModel();
@@ -153,8 +153,8 @@ export class MembersListComponent implements OnInit, OnDestroy {
               return epersonDtoModel;
             });
           return dto$;
-        }));
-        return dtos$.pipe(map((dtos: EpersonDtoModel[]) => {
+        })]);
+        return dtos$.pipe(defaultIfEmpty([]), map((dtos: EpersonDtoModel[]) => {
           return buildPaginatedList(epersonListRD.payload.pageInfo, dtos);
         }));
       }))
@@ -171,10 +171,10 @@ export class MembersListComponent implements OnInit, OnDestroy {
     return this.groupDataService.getActiveGroup().pipe(take(1),
       mergeMap((group: Group) => {
         if (group != null) {
-          return this.ePersonDataService.findAllByHref(group._links.epersons.href, {
+          return this.ePersonDataService.findListByHref(group._links.epersons.href, {
             currentPage: 1,
             elementsPerPage: 9999
-          }, false)
+          })
             .pipe(
               getFirstSucceededRemoteData(),
               getRemoteDataPayload(),
@@ -209,7 +209,6 @@ export class MembersListComponent implements OnInit, OnDestroy {
       if (activeGroup != null) {
         const response = this.groupDataService.deleteMemberFromGroup(activeGroup, ePerson.eperson);
         this.showNotifications('deleteMember', response, ePerson.eperson.name, activeGroup);
-        this.search({ scope: this.currentSearchScope, query: this.currentSearchQuery });
       } else {
         this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.noActiveGroup'));
       }
@@ -274,7 +273,7 @@ export class MembersListComponent implements OnInit, OnDestroy {
           }
         }),
         switchMap((epersonListRD: RemoteData<PaginatedList<EPerson>>) => {
-          const dtos$ = observableCombineLatest(...epersonListRD.payload.page.map((member: EPerson) => {
+          const dtos$ = observableCombineLatest([...epersonListRD.payload.page.map((member: EPerson) => {
             const dto$: Observable<EpersonDtoModel> = observableCombineLatest(
               this.isMemberOfGroup(member), (isMember: ObservedValueOf<Observable<boolean>>) => {
                 const epersonDtoModel: EpersonDtoModel = new EpersonDtoModel();
@@ -283,8 +282,8 @@ export class MembersListComponent implements OnInit, OnDestroy {
                 return epersonDtoModel;
               });
             return dto$;
-          }));
-          return dtos$.pipe(map((dtos: EpersonDtoModel[]) => {
+          })]);
+          return dtos$.pipe(defaultIfEmpty([]), map((dtos: EpersonDtoModel[]) => {
             return buildPaginatedList(epersonListRD.payload.pageInfo, dtos);
           }));
         }))
@@ -315,7 +314,6 @@ export class MembersListComponent implements OnInit, OnDestroy {
     response.pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<any>) => {
       if (rd.hasSucceeded) {
         this.notificationsService.success(this.translateService.get(this.messagePrefix + '.notification.success.' + messageSuffix, { name: nameObject }));
-        this.ePersonDataService.clearLinkRequests(activeGroup._links.epersons.href);
       } else {
         this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.' + messageSuffix, { name: nameObject }));
       }

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

@@ -65,7 +65,7 @@ describe('SubgroupsListComponent', () => {
       getSubgroups(): Group {
         return this.activeGroup;
       },
-      findAllByHref(href: string): Observable<RemoteData<PaginatedList<Group>>> {
+      findListByHref(href: string): Observable<RemoteData<PaginatedList<Group>>> {
         return this.subgroups$.pipe(
           map((currentGroups: Group[]) => {
             return createSuccessfulRemoteDataObject(buildPaginatedList<Group>(new PageInfo(), currentGroups));

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

@@ -115,7 +115,7 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
     this.subs.set(
       SubKey.Members,
       this.paginationService.getCurrentPagination(this.config.id, this.config).pipe(
-        switchMap((config) => this.groupDataService.findAllByHref(this.groupBeingEdited._links.subgroups.href, {
+        switchMap((config) => this.groupDataService.findListByHref(this.groupBeingEdited._links.subgroups.href, {
             currentPage: config.currentPage,
             elementsPerPage: config.pageSize
           },
@@ -139,7 +139,7 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
           if (activeGroup.uuid === possibleSubgroup.uuid) {
             return observableOf(false);
           } else {
-            return this.groupDataService.findAllByHref(activeGroup._links.subgroups.href, {
+            return this.groupDataService.findListByHref(activeGroup._links.subgroups.href, {
               currentPage: 1,
               elementsPerPage: 9999
             })

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

@@ -33,7 +33,7 @@
         </div>
       </form>
 
-      <ds-loading *ngIf="loading$ | async"></ds-loading>
+      <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
       <ds-pagination
         *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(loading$ | async)"
         [paginationOptions]="config"

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

@@ -69,7 +69,7 @@ describe('GroupRegistryComponent', () => {
     mockGroups = [GroupMock, GroupMock2];
     mockEPeople = [EPersonMock, EPersonMock2];
     ePersonDataServiceStub = {
-      findAllByHref(href: string): Observable<RemoteData<PaginatedList<EPerson>>> {
+      findListByHref(href: string): Observable<RemoteData<PaginatedList<EPerson>>> {
         switch (href) {
           case 'https://dspace.4science.it/dspace-spring-rest/api/eperson/groups/testgroupid2/epersons':
             return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo({
@@ -97,7 +97,7 @@ describe('GroupRegistryComponent', () => {
     };
     groupsDataServiceStub = {
       allGroups: mockGroups,
-      findAllByHref(href: string): Observable<RemoteData<PaginatedList<Group>>> {
+      findListByHref(href: string): Observable<RemoteData<PaginatedList<Group>>> {
         switch (href) {
           case 'https://dspace.4science.it/dspace-spring-rest/api/eperson/groups/testgroupid2/groups':
             return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo({

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

@@ -5,11 +5,12 @@ import { TranslateService } from '@ngx-translate/core';
 import {
   BehaviorSubject,
   combineLatest as observableCombineLatest,
+  EMPTY,
   Observable,
   of as observableOf,
   Subscription
 } from 'rxjs';
-import { catchError, map, switchMap, tap } from 'rxjs/operators';
+import { catchError, defaultIfEmpty, map, switchMap, tap } from 'rxjs/operators';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
@@ -144,7 +145,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
         }
         return this.authorizationService.isAuthorized(FeatureID.AdministratorOf).pipe(
           switchMap((isSiteAdmin: boolean) => {
-            return observableCombineLatest(groups.page.map((group: Group) => {
+            return observableCombineLatest([...groups.page.map((group: Group) => {
               if (hasValue(group) && !this.deletedGroupsIds.includes(group.id)) {
                 return observableCombineLatest([
                   this.authorizationService.isAuthorized(FeatureID.CanDelete, group.self),
@@ -165,8 +166,10 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
                     }
                   )
                 );
+              } else {
+                return EMPTY;
               }
-            })).pipe(map((dtos: GroupDtoModel[]) => {
+            })]).pipe(defaultIfEmpty([]), map((dtos: GroupDtoModel[]) => {
               return buildPaginatedList(groups.pageInfo, dtos);
             }));
           })
@@ -213,7 +216,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
    * @param group
    */
   getMembers(group: Group): Observable<RemoteData<PaginatedList<EPerson>>> {
-    return this.ePersonDataService.findAllByHref(group._links.epersons.href).pipe(getFirstSucceededRemoteData());
+    return this.ePersonDataService.findListByHref(group._links.epersons.href).pipe(getFirstSucceededRemoteData());
   }
 
   /**
@@ -221,7 +224,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
    * @param group
    */
   getSubgroups(group: Group): Observable<RemoteData<PaginatedList<Group>>> {
-    return this.groupService.findAllByHref(group._links.subgroups.href).pipe(getFirstSucceededRemoteData());
+    return this.groupService.findListByHref(group._links.subgroups.href).pipe(getFirstSucceededRemoteData());
   }
 
   /**

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

@@ -0,0 +1,35 @@
+<div class="container">
+  <h2 id="header">{{'admin.batch-import.page.header' | translate}}</h2>
+  <p>{{'admin.batch-import.page.help' | translate}}</p>
+  <p *ngIf="dso">
+    selected collection: <b>{{getDspaceObjectName()}}</b>&nbsp;
+    <a href="javascript:void(0)" (click)="removeDspaceObject()">{{'admin.batch-import.page.remove' | translate}}</a>
+  </p>
+  <p>
+    <button class="btn btn-primary" (click)="this.selectCollection();">{{'admin.metadata-import.page.button.select-collection' | translate}}</button>
+  </p>
+  <div class="form-group">
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" id="validateOnly" [(ngModel)]="validateOnly">
+      <label class="form-check-label" for="validateOnly">
+        {{'admin.metadata-import.page.validateOnly' | translate}}
+      </label>
+    </div>
+    <small id="validateOnlyHelpBlock" class="form-text text-muted">
+      {{'admin.batch-import.page.validateOnly.hint' | translate}}
+    </small>
+  </div>
+
+  <ds-file-dropzone-no-uploader
+    (onFileAdded)="setFile($event)"
+    [dropMessageLabel]="'admin.batch-import.page.dropMsg'"
+    [dropMessageLabelReplacement]="'admin.batch-import.page.dropMsgReplace'">
+  </ds-file-dropzone-no-uploader>
+
+  <div class="space-children-mr">
+    <button class="btn btn-secondary" id="backButton"
+            (click)="this.onReturn();">{{'admin.metadata-import.page.button.return' | translate}}</button>
+    <button class="btn btn-primary" id="proceedButton"
+            (click)="this.importMetadata();">{{'admin.metadata-import.page.button.proceed' | translate}}</button>
+  </div>
+</div>

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

@@ -0,0 +1,151 @@
+import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
+import { BatchImportPageComponent } from './batch-import-page.component';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { FileValueAccessorDirective } from '../../shared/utils/file-value-accessor.directive';
+import { FileValidator } from '../../shared/utils/require-file.validator';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import {
+  BATCH_IMPORT_SCRIPT_NAME,
+  ScriptDataService
+} from '../../core/data/processes/script-data.service';
+import { Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ProcessParameter } from '../../process-page/processes/process-parameter.model';
+
+describe('BatchImportPageComponent', () => {
+  let component: BatchImportPageComponent;
+  let fixture: ComponentFixture<BatchImportPageComponent>;
+
+  let notificationService: NotificationsServiceStub;
+  let scriptService: any;
+  let router;
+  let locationStub;
+
+  function init() {
+    notificationService = new NotificationsServiceStub();
+    scriptService = jasmine.createSpyObj('scriptService',
+      {
+        invoke: createSuccessfulRemoteDataObject$({ processId: '46' })
+      }
+    );
+    router = jasmine.createSpyObj('router', {
+      navigateByUrl: jasmine.createSpy('navigateByUrl')
+    });
+    locationStub = jasmine.createSpyObj('location', {
+      back: jasmine.createSpy('back')
+    });
+  }
+
+  beforeEach(waitForAsync(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot(),
+        RouterTestingModule.withRoutes([])
+      ],
+      declarations: [BatchImportPageComponent, FileValueAccessorDirective, FileValidator],
+      providers: [
+        { provide: NotificationsService, useValue: notificationService },
+        { provide: ScriptDataService, useValue: scriptService },
+        { provide: Router, useValue: router },
+        { provide: Location, useValue: locationStub },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BatchImportPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('if back button is pressed', () => {
+    beforeEach(fakeAsync(() => {
+      const proceed = fixture.debugElement.query(By.css('#backButton')).nativeElement;
+      proceed.click();
+      fixture.detectChanges();
+    }));
+    it('should do location.back', () => {
+      expect(locationStub.back).toHaveBeenCalled();
+    });
+  });
+
+  describe('if file is set', () => {
+    let fileMock: File;
+
+    beforeEach(() => {
+      fileMock = new File([''], 'filename.zip', { type: 'application/zip' });
+      component.setFile(fileMock);
+    });
+
+    describe('if proceed button is pressed without validate only', () => {
+      beforeEach(fakeAsync(() => {
+        component.validateOnly = false;
+        const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
+        proceed.click();
+        fixture.detectChanges();
+      }));
+      it('metadata-import script is invoked with --zip fileName and the mockFile', () => {
+        const parameterValues: ProcessParameter[] = [
+          Object.assign(new ProcessParameter(), { name: '--zip', value: 'filename.zip' }),
+        ];
+        parameterValues.push(Object.assign(new ProcessParameter(), { name: '--add' }));
+        expect(scriptService.invoke).toHaveBeenCalledWith(BATCH_IMPORT_SCRIPT_NAME, parameterValues, [fileMock]);
+      });
+      it('success notification is shown', () => {
+        expect(notificationService.success).toHaveBeenCalled();
+      });
+      it('redirected to process page', () => {
+        expect(router.navigateByUrl).toHaveBeenCalledWith('/processes/46');
+      });
+    });
+
+    describe('if proceed button is pressed with validate only', () => {
+      beforeEach(fakeAsync(() => {
+        component.validateOnly = true;
+        const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
+        proceed.click();
+        fixture.detectChanges();
+      }));
+      it('metadata-import script is invoked with --zip fileName and the mockFile and -v validate-only', () => {
+        const parameterValues: ProcessParameter[] = [
+          Object.assign(new ProcessParameter(), { name: '--zip', value: 'filename.zip' }),
+          Object.assign(new ProcessParameter(), { name: '--add' }),
+          Object.assign(new ProcessParameter(), { name: '-v', value: true }),
+        ];
+        expect(scriptService.invoke).toHaveBeenCalledWith(BATCH_IMPORT_SCRIPT_NAME, parameterValues, [fileMock]);
+      });
+      it('success notification is shown', () => {
+        expect(notificationService.success).toHaveBeenCalled();
+      });
+      it('redirected to process page', () => {
+        expect(router.navigateByUrl).toHaveBeenCalledWith('/processes/46');
+      });
+    });
+
+    describe('if proceed is pressed; but script invoke fails', () => {
+      beforeEach(fakeAsync(() => {
+        jasmine.getEnv().allowRespy(true);
+        spyOn(scriptService, 'invoke').and.returnValue(createFailedRemoteDataObject$('Error', 500));
+        const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
+        proceed.click();
+        fixture.detectChanges();
+      }));
+      it('error notification is shown', () => {
+        expect(notificationService.error).toHaveBeenCalled();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,124 @@
+import { Component } from '@angular/core';
+import { Location } from '@angular/common';
+import { TranslateService } from '@ngx-translate/core';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { BATCH_IMPORT_SCRIPT_NAME, ScriptDataService } from '../../core/data/processes/script-data.service';
+import { Router } from '@angular/router';
+import { ProcessParameter } from '../../process-page/processes/process-parameter.model';
+import { getFirstCompletedRemoteData } from '../../core/shared/operators';
+import { RemoteData } from '../../core/data/remote-data';
+import { Process } from '../../process-page/processes/process.model';
+import { isNotEmpty } from '../../shared/empty.util';
+import { getProcessDetailRoute } from '../../process-page/process-page-routing.paths';
+import {
+  ImportBatchSelectorComponent
+} from '../../shared/dso-selector/modal-wrappers/import-batch-selector/import-batch-selector.component';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { take } from 'rxjs/operators';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+
+@Component({
+  selector: 'ds-batch-import-page',
+  templateUrl: './batch-import-page.component.html'
+})
+export class BatchImportPageComponent {
+  /**
+   * The current value of the file
+   */
+  fileObject: File;
+
+  /**
+   * The validate only flag
+   */
+  validateOnly = true;
+  /**
+   * dso object for community or collection
+   */
+  dso: DSpaceObject = null;
+
+  public constructor(private location: Location,
+                     protected translate: TranslateService,
+                     protected notificationsService: NotificationsService,
+                     private scriptDataService: ScriptDataService,
+                     private router: Router,
+                     private modalService: NgbModal,
+                     private dsoNameService: DSONameService) {
+  }
+
+  /**
+   * Set file
+   * @param file
+   */
+  setFile(file) {
+    this.fileObject = file;
+  }
+
+  /**
+   * When return button is pressed go to previous location
+   */
+  public onReturn() {
+    this.location.back();
+  }
+
+  public selectCollection() {
+    const modalRef = this.modalService.open(ImportBatchSelectorComponent);
+    modalRef.componentInstance.response.pipe(take(1)).subscribe((dso) => {
+      this.dso = dso || null;
+    });
+  }
+
+  /**
+   * Starts import-metadata script with --zip fileName (and the selected file)
+   */
+  public importMetadata() {
+    if (this.fileObject == null) {
+      this.notificationsService.error(this.translate.get('admin.metadata-import.page.error.addFile'));
+    } else {
+      const parameterValues: ProcessParameter[] = [
+        Object.assign(new ProcessParameter(), { name: '--zip', value: this.fileObject.name }),
+        Object.assign(new ProcessParameter(), { name: '--add' })
+      ];
+      if (this.dso) {
+        parameterValues.push(Object.assign(new ProcessParameter(), { name: '--collection', value: this.dso.uuid }));
+      }
+      if (this.validateOnly) {
+        parameterValues.push(Object.assign(new ProcessParameter(), { name: '-v', value: true }));
+      }
+
+      this.scriptDataService.invoke(BATCH_IMPORT_SCRIPT_NAME, parameterValues, [this.fileObject]).pipe(
+        getFirstCompletedRemoteData(),
+      ).subscribe((rd: RemoteData<Process>) => {
+        if (rd.hasSucceeded) {
+          const title = this.translate.get('process.new.notification.success.title');
+          const content = this.translate.get('process.new.notification.success.content');
+          this.notificationsService.success(title, content);
+          if (isNotEmpty(rd.payload)) {
+            this.router.navigateByUrl(getProcessDetailRoute(rd.payload.processId));
+          }
+        } else {
+          const title = this.translate.get('process.new.notification.error.title');
+          const content = this.translate.get('process.new.notification.error.content');
+          this.notificationsService.error(title, content);
+        }
+      });
+    }
+  }
+
+  /**
+   * return selected dspace object name
+  */
+  getDspaceObjectName(): string {
+    if (this.dso) {
+      return this.dsoNameService.getName(this.dso);
+    }
+    return null;
+  }
+
+  /**
+   * remove selected dso object
+   */
+  removeDspaceObject(): void {
+    this.dso = null;
+  }
+}

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

@@ -1,12 +1,8 @@
 import { Location } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
-import { AuthService } from '../../core/auth/auth.service';
 import { METADATA_IMPORT_SCRIPT_NAME, ScriptDataService } from '../../core/data/processes/script-data.service';
-import { EPerson } from '../../core/eperson/models/eperson.model';
 import { ProcessParameter } from '../../process-page/processes/process-parameter.model';
 import { isNotEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';

src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html

@@ -13,13 +13,14 @@
         [paginationOptions]="pageConfig"
         [pageInfoState]="(bitstreamFormats | async)?.payload"
         [collectionSize]="(bitstreamFormats | async)?.payload?.totalElements"
-        [hideGear]="true"
+        [hideGear]="false"
         [hidePagerWhenSinglePage]="true">
         <div class="table-responsive">
           <table id="formats" class="table table-striped table-hover">
             <thead>
             <tr>
               <th scope="col"></th>
+              <th scope="col">{{'admin.registries.bitstream-formats.table.id' | translate}}</th>
               <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
               <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
               <th scope="col">{{'admin.registries.bitstream-formats.table.supportLevel.head' | translate}}</th>
@@ -35,6 +36,7 @@
                   >
                 </label>
               </td>
+              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.id}}</a></td>
               <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.shortDescription}}</a></td>
               <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.mimetype}} <span *ngIf="bitstreamFormat.internal">({{'admin.registries.bitstream-formats.table.internal' | translate}})</span></a></td>
               <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{'admin.registries.bitstream-formats.table.supportLevel.'+bitstreamFormat.supportLevel | translate}}</a></td>

src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.spec.ts

@@ -20,14 +20,12 @@ import { TestScheduler } from 'rxjs/testing';
 import {
   createNoContentRemoteDataObject$,
   createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$
+  createSuccessfulRemoteDataObject$,
+  createFailedRemoteDataObject$
 } from '../../../shared/remote-data.utils';
 import { createPaginatedList } from '../../../shared/testing/utils.test';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
 
 describe('BitstreamFormatsComponent', () => {
   let comp: BitstreamFormatsComponent;
@@ -85,10 +83,6 @@ describe('BitstreamFormatsComponent', () => {
   ];
   const mockFormatsRD = createSuccessfulRemoteDataObject(createPaginatedList(mockFormatsList));
 
-  const pagination = Object.assign(new PaginationComponentOptions(), { currentPage: 1, pageSize: 20 });
-  const sort = new SortOptions('score', SortDirection.DESC);
-  const findlistOptions = Object.assign(new FindListOptions(), { currentPage: 1, elementsPerPage: 20 });
-
   const initAsync = () => {
     notificationsServiceStub = new NotificationsServiceStub();
 
@@ -135,16 +129,19 @@ describe('BitstreamFormatsComponent', () => {
     });
 
     it('should contain the correct formats', () => {
-      const unknownName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(1) td:nth-child(2)')).nativeElement;
+      const unknownName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(1) td:nth-child(3)')).nativeElement;
       expect(unknownName.textContent).toBe('Unknown');
 
-      const licenseName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(2) td:nth-child(2)')).nativeElement;
+      const UUID: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(1) td:nth-child(2)')).nativeElement;
+      expect(UUID.textContent).toBe('test-uuid-1');
+
+      const licenseName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(2) td:nth-child(3)')).nativeElement;
       expect(licenseName.textContent).toBe('License');
 
-      const ccLicenseName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(3) td:nth-child(2)')).nativeElement;
+      const ccLicenseName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(3) td:nth-child(3)')).nativeElement;
       expect(ccLicenseName.textContent).toBe('CC License');
 
-      const adobeName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(4) td:nth-child(2)')).nativeElement;
+      const adobeName: HTMLElement = fixture.debugElement.query(By.css('#formats tr:nth-child(4) td:nth-child(3)')).nativeElement;
       expect(adobeName.textContent).toBe('Adobe PDF');
     });
   });
@@ -246,7 +243,7 @@ describe('BitstreamFormatsComponent', () => {
     ));
 
     beforeEach(initBeforeEach);
-    it('should clear bitstream formats  ', () => {
+    it('should clear bitstream formats and show a success notification', () => {
       comp.deleteFormats();
 
       expect(bitstreamFormatService.clearBitStreamFormatRequests).toHaveBeenCalled();
@@ -275,7 +272,7 @@ describe('BitstreamFormatsComponent', () => {
           selectBitstreamFormat: {},
           deselectBitstreamFormat: {},
           deselectAllBitstreamFormats: {},
-          delete: observableOf(false),
+          delete: createFailedRemoteDataObject$(),
           clearBitStreamFormatRequests: observableOf('cleared')
         });
 
@@ -295,7 +292,7 @@ describe('BitstreamFormatsComponent', () => {
     ));
 
     beforeEach(initBeforeEach);
-    it('should clear bitstream formats  ', () => {
+    it('should clear bitstream formats and show an error notification', () => {
       comp.deleteFormats();
 
       expect(bitstreamFormatService.clearBitStreamFormatRequests).toHaveBeenCalled();

src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.ts

@@ -1,18 +1,18 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { combineLatest as observableCombineLatest, Observable, zip } from 'rxjs';
+import { combineLatest as observableCombineLatest, Observable} from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { BitstreamFormat } from '../../../core/shared/bitstream-format.model';
 import { BitstreamFormatDataService } from '../../../core/data/bitstream-format-data.service';
-import { map, switchMap, take } from 'rxjs/operators';
-import { hasValue } from '../../../shared/empty.util';
+import { map, mergeMap, switchMap, take, toArray } from 'rxjs/operators';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { NoContent } from '../../../core/shared/NoContent.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { FindListOptions } from '../../../core/data/find-list-options.model';
+import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 
 /**
  * This component renders a list of bitstream formats
@@ -28,21 +28,14 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {
    */
   bitstreamFormats: Observable<RemoteData<PaginatedList<BitstreamFormat>>>;
 
-  /**
-   * The current pagination configuration for the page used by the FindAll method
-   * Currently simply renders all bitstream formats
-   */
-  config: FindListOptions = Object.assign(new FindListOptions(), {
-    elementsPerPage: 20
-  });
-
   /**
    * The current pagination configuration for the page
    * Currently simply renders all bitstream formats
    */
   pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'rbp',
-    pageSize: 20
+    pageSize: 20,
+    pageSizeOptions: [20, 40, 60, 80, 100]
   });
 
   constructor(private notificationsService: NotificationsService,
@@ -58,18 +51,26 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {
    * Deletes the currently selected formats from the registry and updates the presented list
    */
   deleteFormats() {
-    this.bitstreamFormatService.clearBitStreamFormatRequests().subscribe();
-    this.bitstreamFormatService.getSelectedBitstreamFormats().pipe(take(1)).subscribe(
-      (formats) => {
-        const tasks$ = [];
-        for (const format of formats) {
-          if (hasValue(format.id)) {
-            tasks$.push(this.bitstreamFormatService.delete(format.id).pipe(map((response: RemoteData<NoContent>) => response.hasSucceeded)));
-          }
-        }
-        zip(...tasks$).subscribe((results: boolean[]) => {
+    this.bitstreamFormatService.clearBitStreamFormatRequests();
+    this.bitstreamFormatService.getSelectedBitstreamFormats().pipe(
+      take(1),
+      // emit all formats in the array one at a time
+      mergeMap((formats: BitstreamFormat[]) => formats),
+      // delete each format
+      mergeMap((format: BitstreamFormat) => this.bitstreamFormatService.delete(format.id).pipe(
+        // wait for each response to come back
+        getFirstCompletedRemoteData(),
+        // return a boolean to indicate whether a response succeeded
+        map((response: RemoteData<NoContent>) => response.hasSucceeded),
+      )),
+      // wait for all responses to come in and return them as a single array
+      toArray()
+    ).subscribe((results: boolean[]) => {
+      // Count the number of succeeded and failed deletions
       const successResponses = results.filter((result: boolean) => result);
       const failedResponses = results.filter((result: boolean) => !result);
+
+      // Show a notification indicating the number of succeeded and failed deletions
       if (successResponses.length > 0) {
         this.showNotification(true, successResponses.length);
       }
@@ -77,13 +78,13 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {
         this.showNotification(false, failedResponses.length);
       }
 
+      // reset the selection
       this.deselectAll();
 
+      // reload the page
       this.paginationService.resetPage(this.pageConfig.id);
     });
   }
-    );
-  }
 
   /**
    * Deselects all selecetd bitstream formats
@@ -140,7 +141,7 @@ export class BitstreamFormatsComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
 
-    this.bitstreamFormats = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
+    this.bitstreamFormats = this.paginationService.getFindListOptions(this.pageConfig.id, this.pageConfig).pipe(
       switchMap((findListOptions: FindListOptions) => {
         return this.bitstreamFormatService.findAll(findListOptions);
       })

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

@@ -19,10 +19,7 @@ import { RestResponse } from '../../../core/cache/response.models';
 import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { PaginationService } from '../../../core/pagination/pagination.service';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
 
 describe('MetadataRegistryComponent', () => {
   let comp: MetadataRegistryComponent;

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

@@ -25,6 +25,7 @@
               <thead>
               <tr>
                 <th></th>
+                <th scope="col">{{'admin.registries.schema.fields.table.id' | translate}}</th>
                 <th scope="col">{{'admin.registries.schema.fields.table.field' | translate}}</th>
                 <th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th>
               </tr>
@@ -39,6 +40,7 @@
                            (change)="selectMetadataField(field, $event)">
                   </label>
                 </td>
+                <td class="selectable-row" (click)="editField(field)">{{field.id}}</td>
                 <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}<label *ngIf="field.qualifier">.</label>{{field.qualifier}}</td>
                 <td class="selectable-row" (click)="editField(field)">{{field.scopeNote}}</td>
               </tr>

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

@@ -23,11 +23,8 @@ import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
 import { MetadataField } from '../../../core/metadata/metadata-field.model';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { VarDirective } from '../../../shared/utils/var.directive';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
 
 describe('MetadataSchemaComponent', () => {
   let comp: MetadataSchemaComponent;
@@ -169,10 +166,10 @@ describe('MetadataSchemaComponent', () => {
   });
 
   it('should contain the correct fields', () => {
-    const editorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(1) td:nth-child(2)')).nativeElement;
+    const editorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(1) td:nth-child(3)')).nativeElement;
     expect(editorField.textContent).toBe('mock.contributor.editor');
 
-    const illustratorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(2) td:nth-child(2)')).nativeElement;
+    const illustratorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(2) td:nth-child(3)')).nativeElement;
     expect(illustratorField.textContent).toBe('mock.contributor.illustrator');
   });
 

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

@@ -7,6 +7,7 @@ import { AdminWorkflowPageComponent } from './admin-workflow-page/admin-workflow
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
 import { AdminCurationTasksComponent } from './admin-curation-tasks/admin-curation-tasks.component';
 import { REGISTRIES_MODULE_PATH, NOTIFICATIONS_MODULE_PATH } from './admin-routing-paths';
+import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
 
 @NgModule({
   imports: [
@@ -45,6 +46,12 @@ import { REGISTRIES_MODULE_PATH, NOTIFICATIONS_MODULE_PATH } from './admin-routi
         component: MetadataImportPageComponent,
         data: { title: 'admin.metadata-import.title', breadcrumbKey: 'admin.metadata-import' }
       },
+      {
+        path: 'batch-import',
+        resolve: { breadcrumb: I18nBreadcrumbResolver },
+        component: BatchImportPageComponent,
+        data: { title: 'admin.batch-import.title', breadcrumbKey: 'admin.batch-import' }
+      },
     ])
   ],
   providers: [

src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.spec.ts

@@ -14,6 +14,14 @@ import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { getCollectionEditRoute } from '../../../../../collection-page/collection-page-routing-paths';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
+import { AuthService } from '../../../../../core/auth/auth.service';
+import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
+import { FileService } from '../../../../../core/shared/file.service';
+import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
+import { AuthorizationDataService } from '../../../../../core/data/feature-authorization/authorization-data.service';
+import { AuthorizationDataServiceStub } from '../../../../../shared/testing/authorization-service.stub';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
 
 describe('CollectionAdminSearchResultGridElementComponent', () => {
   let component: CollectionAdminSearchResultGridElementComponent;
@@ -45,7 +53,11 @@ describe('CollectionAdminSearchResultGridElementComponent', () => {
       providers: [
         { provide: TruncatableService, useValue: mockTruncatableService },
         { provide: BitstreamDataService, useValue: {} },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: AuthService, useClass: AuthServiceStub },
+        { provide: FileService, useClass: FileServiceStub },
+        { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
+        { provide: ThemeService, useValue: getMockThemeService() },
       ]
     })
       .compileComponents();

src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.spec.ts

@@ -16,6 +16,14 @@ import { CommunitySearchResult } from '../../../../../shared/object-collection/s
 import { Community } from '../../../../../core/shared/community.model';
 import { getCommunityEditRoute } from '../../../../../community-page/community-page-routing-paths';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
+import { AuthService } from '../../../../../core/auth/auth.service';
+import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
+import { FileService } from '../../../../../core/shared/file.service';
+import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
+import { AuthorizationDataService } from '../../../../../core/data/feature-authorization/authorization-data.service';
+import { AuthorizationDataServiceStub } from '../../../../../shared/testing/authorization-service.stub';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
 
 describe('CommunityAdminSearchResultGridElementComponent', () => {
   let component: CommunityAdminSearchResultGridElementComponent;
@@ -47,7 +55,11 @@ describe('CommunityAdminSearchResultGridElementComponent', () => {
       providers: [
         { provide: TruncatableService, useValue: mockTruncatableService },
         { provide: BitstreamDataService, useValue: {} },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: AuthService, useClass: AuthServiceStub },
+        { provide: FileService, useClass: FileServiceStub },
+        { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
+        { provide: ThemeService, useValue: getMockThemeService() },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })

src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts

@@ -20,6 +20,12 @@ import { getMockThemeService } from '../../../../../shared/mocks/theme-service.m
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 import { AccessStatusDataService } from '../../../../../core/data/access-status-data.service';
 import { AccessStatusObject } from '../../../../../shared/object-list/access-status-badge/access-status.model';
+import { AuthService } from '../../../../../core/auth/auth.service';
+import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
+import { FileService } from '../../../../../core/shared/file.service';
+import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
+import { AuthorizationDataService } from '../../../../../core/data/feature-authorization/authorization-data.service';
+import { AuthorizationDataServiceStub } from '../../../../../shared/testing/authorization-service.stub';
 
 describe('ItemAdminSearchResultGridElementComponent', () => {
   let component: ItemAdminSearchResultGridElementComponent;
@@ -64,6 +70,9 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
           { provide: BitstreamDataService, useValue: mockBitstreamDataService },
           { provide: ThemeService, useValue: mockThemeService },
           { provide: AccessStatusDataService, useValue: mockAccessStatusDataService },
+          { provide: AuthService, useClass: AuthServiceStub },
+          { provide: FileService, useClass: FileServiceStub },
+          { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
         ],
         schemas: [NO_ERRORS_SCHEMA]
       })

src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.spec.ts

@@ -13,6 +13,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { getCollectionEditRoute } from '../../../../../collection-page/collection-page-routing-paths';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
 
 describe('CollectionAdminSearchResultListElementComponent', () => {
   let component: CollectionAdminSearchResultListElementComponent;
@@ -36,7 +38,8 @@ describe('CollectionAdminSearchResultListElementComponent', () => {
       ],
       declarations: [CollectionAdminSearchResultListElementComponent],
       providers: [{ provide: TruncatableService, useValue: {} },
-        { provide: DSONameService, useClass: DSONameServiceMock }],
+        { provide: DSONameService, useClass: DSONameServiceMock },
+        { provide: APP_CONFIG, useValue: environment }],
       schemas: [NO_ERRORS_SCHEMA]
     })
       .compileComponents();

src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.spec.ts

@@ -13,6 +13,8 @@ import { Community } from '../../../../../core/shared/community.model';
 import { getCommunityEditRoute } from '../../../../../community-page/community-page-routing-paths';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
 
 describe('CommunityAdminSearchResultListElementComponent', () => {
   let component: CommunityAdminSearchResultListElementComponent;
@@ -36,7 +38,8 @@ describe('CommunityAdminSearchResultListElementComponent', () => {
       ],
       declarations: [CommunityAdminSearchResultListElementComponent],
       providers: [{ provide: TruncatableService, useValue: {} },
-        { provide: DSONameService, useClass: DSONameServiceMock }],
+        { provide: DSONameService, useClass: DSONameServiceMock },
+        { provide: APP_CONFIG, useValue: environment }],
       schemas: [NO_ERRORS_SCHEMA]
     })
       .compileComponents();

src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts

@@ -10,6 +10,8 @@ import { ItemAdminSearchResultListElementComponent } from './item-admin-search-r
 import { Item } from '../../../../../core/shared/item.model';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
 
 describe('ItemAdminSearchResultListElementComponent', () => {
   let component: ItemAdminSearchResultListElementComponent;
@@ -33,7 +35,8 @@ describe('ItemAdminSearchResultListElementComponent', () => {
       ],
       declarations: [ItemAdminSearchResultListElementComponent],
       providers: [{ provide: TruncatableService, useValue: {} },
-        { provide: DSONameService, useClass: DSONameServiceMock }],
+        { provide: DSONameService, useClass: DSONameServiceMock },
+        { provide: APP_CONFIG, useValue: environment }],
       schemas: [NO_ERRORS_SCHEMA]
     })
       .compileComponents();

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

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
 import { Component } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';

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

@@ -1,4 +1,4 @@
-<nav @slideHorizontal class="navbar navbar-dark p-0"
+<nav class="navbar navbar-dark p-0"
      [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
       value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),

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

@@ -6,7 +6,7 @@ import { ScriptDataService } from '../../core/data/processes/script-data.service
 import { AdminSidebarComponent } from './admin-sidebar.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../shared/testing/css-variable-service.stub';
 import { AuthServiceStub } from '../../shared/testing/auth-service.stub';
 import { AuthService } from '../../core/auth/auth.service';
@@ -16,10 +16,11 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import createSpy = jasmine.createSpy;
 import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
 import { Item } from '../../core/shared/item.model';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
 
 describe('AdminSidebarComponent', () => {
   let comp: AdminSidebarComponent;
@@ -60,6 +61,7 @@ describe('AdminSidebarComponent', () => {
       declarations: [AdminSidebarComponent],
       providers: [
         Injector,
+        { provide: ThemeService, useValue: getMockThemeService() },
         { provide: MenuService, useValue: menuService },
         { provide: CSSVariableService, useClass: CSSVariableServiceStub },
         { provide: AuthService, useClass: AuthServiceStub },

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

@@ -2,13 +2,14 @@ import { Component, HostListener, Injector, OnInit } from '@angular/core';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { debounceTime, distinctUntilChanged, first, map, withLatestFrom } from 'rxjs/operators';
 import { AuthService } from '../../core/auth/auth.service';
-import { slideHorizontal, slideSidebar } from '../../shared/animations/slide';
+import { slideSidebar } from '../../shared/animations/slide';
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
 import { ActivatedRoute } from '@angular/router';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 /**
  * Component representing the admin sidebar
@@ -17,7 +18,7 @@ import { ActivatedRoute } from '@angular/router';
   selector: 'ds-admin-sidebar',
   templateUrl: './admin-sidebar.component.html',
   styleUrls: ['./admin-sidebar.component.scss'],
-  animations: [slideHorizontal, slideSidebar]
+  animations: [slideSidebar]
 })
 export class AdminSidebarComponent extends MenuComponent implements OnInit {
   /**
@@ -56,9 +57,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
     private variableService: CSSVariableService,
     private authService: AuthService,
     public authorizationService: AuthorizationDataService,
-    public route: ActivatedRoute
+    public route: ActivatedRoute,
+    protected themeService: ThemeService
   ) {
-    super(menuService, injector, authorizationService, route);
+    super(menuService, injector, authorizationService, route, themeService);
     this.inFocus$ = new BehaviorSubject(false);
   }
 
@@ -67,7 +69,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
+    this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width');
     this.authService.isAuthenticated()
       .subscribe((loggedIn: boolean) => {
         if (loggedIn) {

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

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ExpandableAdminSidebarSectionComponent } from './expandable-admin-sidebar-section.component';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service.stub';
 import { of as observableOf } from 'rxjs';
 import { Component } from '@angular/core';

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

@@ -2,7 +2,7 @@ import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { rotate } from '../../../shared/animations/rotate';
 import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
 import { slide } from '../../../shared/animations/slide';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { bgColor } from '../../../shared/animations/bgColor';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
@@ -65,7 +65,7 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg');
+    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)

src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.spec.ts

@@ -18,6 +18,8 @@ import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-
 import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
 
 describe('WorkflowItemAdminWorkflowListElementComponent', () => {
   let component: WorkflowItemSearchResultAdminWorkflowListElementComponent;
@@ -51,7 +53,8 @@ describe('WorkflowItemAdminWorkflowListElementComponent', () => {
         providers: [
           { provide: TruncatableService, useValue: mockTruncatableService },
           { provide: LinkService, useValue: linkService },
-          { provide: DSONameService, useClass: DSONameServiceMock }
+          { provide: DSONameService, useClass: DSONameServiceMock },
+          { provide: APP_CONFIG, useValue: environment }
         ],
         schemas: [NO_ERRORS_SCHEMA]
       })

src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { Context } from '../../../../../core/shared/context.model';
@@ -13,6 +13,7 @@ import { SearchResultListElementComponent } from '../../../../../shared/object-l
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { APP_CONFIG, AppConfig } from '../../../../../../config/app-config.interface';
 
 @listableObjectComponent(WorkflowItemSearchResult, ViewMode.ListElement, Context.AdminWorkflowSearch)
 @Component({
@@ -32,9 +33,10 @@ export class WorkflowItemSearchResultAdminWorkflowListElementComponent extends S
 
   constructor(private linkService: LinkService,
               protected truncatableService: TruncatableService,
-              protected dsoNameService: DSONameService
+              protected dsoNameService: DSONameService,
+              @Inject(APP_CONFIG) protected appConfig: AppConfig
   ) {
-    super(truncatableService, dsoNameService);
+    super(truncatableService, dsoNameService, appConfig);
   }
 
   /**

src/app/admin/admin.module.ts

@@ -9,6 +9,7 @@ import { AdminWorkflowModuleModule } from './admin-workflow-page/admin-workflow.
 import { AdminSearchModule } from './admin-search-page/admin-search.module';
 import { AdminSidebarSectionComponent } from './admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
 import { ExpandableAdminSidebarSectionComponent } from './admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
+import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -28,7 +29,8 @@ const ENTRY_COMPONENTS = [
   ],
   declarations: [
     AdminCurationTasksComponent,
-    MetadataImportPageComponent
+    MetadataImportPageComponent,
+    BatchImportPageComponent
   ]
 })
 export class AdminModule {

src/app/app.component.spec.ts

@@ -1,10 +1,9 @@
 import { Store, StoreModule } from '@ngrx/store';
 import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { Angulartics2GoogleAnalytics } from 'angulartics2';
 
 // Load the implementations that should be tested
 import { AppComponent } from './app.component';
@@ -19,7 +18,7 @@ import { AngularticsProviderMock } from './shared/mocks/angulartics-provider.ser
 import { AuthServiceMock } from './shared/mocks/auth.service.mock';
 import { AuthService } from './core/auth/auth.service';
 import { MenuService } from './shared/menu/menu.service';
-import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from './shared/testing/css-variable-service.stub';
 import { MenuServiceStub } from './shared/testing/menu-service.stub';
 import { HostWindowService } from './shared/host-window.service';
@@ -32,7 +31,6 @@ import { storeModuleConfig } from './app.reducer';
 import { LocaleService } from './core/locale/locale.service';
 import { authReducer } from './core/auth/auth.reducer';
 import { provideMockStore } from '@ngrx/store/testing';
-import { GoogleAnalyticsService } from './statistics/google-analytics.service';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { getMockThemeService } from './shared/mocks/theme-service.mock';
 import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
@@ -46,16 +44,16 @@ const initialState = {
   core: { auth: { loading: false } }
 };
 
-describe('App component', () => {
-
-  let breadcrumbsServiceSpy;
-
-  function getMockLocaleService(): LocaleService {
+export function getMockLocaleService(): LocaleService {
   return jasmine.createSpyObj('LocaleService', {
     setCurrentLanguageCode: jasmine.createSpy('setCurrentLanguageCode')
   });
 }
 
+describe('App component', () => {
+
+  let breadcrumbsServiceSpy;
+
   const getDefaultTestBedConf = () => {
     breadcrumbsServiceSpy = jasmine.createSpyObj(['listenForRouteChanges']);
 
@@ -74,7 +72,6 @@ describe('App component', () => {
       providers: [
         { provide: NativeWindowService, useValue: new NativeWindowRef() },
         { provide: MetadataService, useValue: new MetadataServiceMock() },
-        { provide: Angulartics2GoogleAnalytics, useValue: new AngularticsProviderMock() },
         { provide: Angulartics2DSpace, useValue: new AngularticsProviderMock() },
         { provide: AuthService, useValue: new AuthServiceMock() },
         { provide: Router, useValue: new RouterMock() },
@@ -130,66 +127,4 @@ describe('App component', () => {
     });
 
   });
-
-  describe('the constructor', () => {
-    it('should call breadcrumbsService.listenForRouteChanges', () => {
-      expect(breadcrumbsServiceSpy.listenForRouteChanges).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('when GoogleAnalyticsService is provided', () => {
-    let googleAnalyticsSpy;
-
-    beforeEach(() => {
-      // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
-      TestBed.resetTestingModule();
-      TestBed.configureTestingModule(getDefaultTestBedConf());
-      googleAnalyticsSpy = jasmine.createSpyObj('googleAnalyticsService', [
-        'addTrackingIdToPage',
-      ]);
-      TestBed.overrideProvider(GoogleAnalyticsService, {useValue: googleAnalyticsSpy});
-      fixture = TestBed.createComponent(AppComponent);
-      comp = fixture.componentInstance;
-      fixture.detectChanges();
-    });
-
-    it('should create component', () => {
-      expect(comp).toBeTruthy();
-    });
-
-    describe('the constructor', () => {
-      it('should call googleAnalyticsService.addTrackingIdToPage()', () => {
-        expect(googleAnalyticsSpy.addTrackingIdToPage).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
-
-  describe('when ThemeService returns a custom theme', () => {
-    let document;
-    let headSpy;
-
-    beforeEach(() => {
-      // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
-      TestBed.resetTestingModule();
-      TestBed.configureTestingModule(getDefaultTestBedConf());
-      TestBed.overrideProvider(ThemeService, {useValue: getMockThemeService('custom')});
-      document = TestBed.inject(DOCUMENT);
-      headSpy = jasmine.createSpyObj('head', ['appendChild', 'getElementsByClassName']);
-      headSpy.getElementsByClassName.and.returnValue([]);
-      spyOn(document, 'getElementsByTagName').and.returnValue([headSpy]);
-      fixture = TestBed.createComponent(AppComponent);
-      comp = fixture.componentInstance;
-      fixture.detectChanges();
-    });
-
-    it('should append a link element with the correct attributes to the head element', () => {
-      const link = document.createElement('link');
-      link.setAttribute('rel', 'stylesheet');
-      link.setAttribute('type', 'text/css');
-      link.setAttribute('class', 'theme-css');
-      link.setAttribute('href', 'custom-theme.css');
-
-      expect(headSpy.appendChild).toHaveBeenCalledWith(link);
-    });
-  });
 });

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { distinctUntilChanged, filter, switchMap, take, withLatestFrom } from 'rxjs/operators';
+import { distinctUntilChanged, take, withLatestFrom } from 'rxjs/operators';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   AfterViewInit,
@@ -7,49 +7,30 @@ import {
   HostListener,
   Inject,
   OnInit,
-  Optional,
   PLATFORM_ID,
 } from '@angular/core';
 import {
-  ActivatedRouteSnapshot,
-  ActivationEnd,
   NavigationCancel,
   NavigationEnd,
-  NavigationStart, ResolveEnd,
+  NavigationStart,
   Router,
 } from '@angular/router';
 
-import { isEqual } from 'lodash';
-import { BehaviorSubject, Observable, of } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { select, Store } from '@ngrx/store';
 import { NgbModal, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
-import { Angulartics2GoogleAnalytics } from 'angulartics2';
-
-import { MetadataService } from './core/metadata/metadata.service';
 import { HostWindowResizeAction } from './shared/host-window.actions';
 import { HostWindowState } from './shared/search/host-window.reducer';
 import { NativeWindowRef, NativeWindowService } from './core/services/window.service';
 import { isAuthenticationBlocking } from './core/auth/selectors';
 import { AuthService } from './core/auth/auth.service';
-import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
-import { MenuService } from './shared/menu/menu.service';
-import { HostWindowService } from './shared/host-window.service';
-import { HeadTagConfig, ThemeConfig } from '../config/theme.model';
-import { Angulartics2DSpace } from './statistics/angulartics/dspace-provider';
+import { CSSVariableService } from './shared/sass-helper/css-variable.service';
 import { environment } from '../environments/environment';
 import { models } from './core/core.module';
-import { LocaleService } from './core/locale/locale.service';
-import { hasNoValue, hasValue, isNotEmpty } from './shared/empty.util';
-import { KlaroService } from './shared/cookies/klaro.service';
-import { GoogleAnalyticsService } from './statistics/google-analytics.service';
 import { ThemeService } from './shared/theme-support/theme.service';
-import { BASE_THEME_NAME } from './shared/theme-support/theme.constants';
-import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
 import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
-import { getDefaultThemeConfig } from '../config/config.util';
-import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
-import { ModalBeforeDismiss } from './shared/interfaces/modal-before-dismiss.interface';
+import { distinctNext } from './core/shared/distinct-next';
 
 @Component({
   selector: 'ds-app',
@@ -58,11 +39,6 @@ import { ModalBeforeDismiss } from './shared/interfaces/modal-before-dismiss.int
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit, AfterViewInit {
-  sidebarVisible: Observable<boolean>;
-  slideSidebarOver: Observable<boolean>;
-  collapsedSidebarWidth: Observable<string>;
-  totalSidebarWidth: Observable<string>;
-  theme: Observable<ThemeConfig> = of({} as any);
   notificationOptions;
   models;
 
@@ -79,9 +55,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   /**
    * Whether or not the theme is in the process of being swapped
    */
-  isThemeLoading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
-
-  isThemeCSSLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  isThemeLoading$: Observable<boolean>;
 
   /**
    * Whether or not the idle modal is is currently open
@@ -92,78 +66,26 @@ export class AppComponent implements OnInit, AfterViewInit {
     @Inject(NativeWindowService) private _window: NativeWindowRef,
     @Inject(DOCUMENT) private document: any,
     @Inject(PLATFORM_ID) private platformId: any,
-    @Inject(APP_CONFIG) private appConfig: AppConfig,
     private themeService: ThemeService,
     private translate: TranslateService,
     private store: Store<HostWindowState>,
-    private metadata: MetadataService,
-    private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
-    private angulartics2DSpace: Angulartics2DSpace,
     private authService: AuthService,
     private router: Router,
     private cssService: CSSVariableService,
-    private menuService: MenuService,
-    private windowService: HostWindowService,
-    private localeService: LocaleService,
-    private breadcrumbsService: BreadcrumbsService,
     private modalService: NgbModal,
     private modalConfig: NgbModalConfig,
-    @Optional() private cookiesService: KlaroService,
-    @Optional() private googleAnalyticsService: GoogleAnalyticsService,
   ) {
-
-    if (!isEqual(environment, this.appConfig)) {
-      throw new Error('environment does not match app config!');
-    }
-
     this.notificationOptions = environment.notifications;
 
     /* Use models object so all decorators are actually called */
     this.models = models;
 
-    this.themeService.getThemeName$().subscribe((themeName: string) => {
     if (isPlatformBrowser(this.platformId)) {
-        // the theme css will never download server side, so this should only happen on the browser
-        this.distinctNext(this.isThemeCSSLoading$, true);
-      }
-      if (hasValue(themeName)) {
-        this.loadGlobalThemeConfig(themeName);
-      } else {
-        const defaultThemeConfig = getDefaultThemeConfig();
-        if (hasValue(defaultThemeConfig)) {
-          this.loadGlobalThemeConfig(defaultThemeConfig.name);
-        } else {
-          this.loadGlobalThemeConfig(BASE_THEME_NAME);
-        }
-      }
-    });
-
-    if (isPlatformBrowser(this.platformId)) {
-      this.authService.trackTokenExpiration();
       this.trackIdleModal();
     }
 
-    // Load all the languages that are defined as active from the config file
-    translate.addLangs(environment.languages.filter((LangConfig) => LangConfig.active === true).map((a) => a.code));
+    this.isThemeLoading$ = this.themeService.isThemeLoading$;
 
-    // Load the default language from the config file
-    // translate.setDefaultLang(environment.defaultLanguage);
-
-    // set the current language code
-    this.localeService.setCurrentLanguageCode();
-
-    // analytics
-    if (hasValue(googleAnalyticsService)) {
-      googleAnalyticsService.addTrackingIdToPage();
-    }
-    angulartics2DSpace.startTracking();
-
-    metadata.listenForRouteChange();
-    breadcrumbsService.listenForRouteChanges();
-
-    if (environment.debug) {
-      console.info(environment);
-    }
     this.storeCSSVariables();
   }
 
@@ -178,85 +100,29 @@ export class AppComponent implements OnInit, AfterViewInit {
       return true;
     };
 
-    this.isAuthBlocking$ = this.store.pipe(select(isAuthenticationBlocking)).pipe(
+    this.isAuthBlocking$ = this.store.pipe(
+      select(isAuthenticationBlocking),
       distinctUntilChanged()
     );
-    this.isAuthBlocking$
-      .pipe(
-        filter((isBlocking: boolean) => isBlocking === false),
-        take(1)
-      ).subscribe(() => this.initializeKlaro());
 
-    const env: string = environment.production ? 'Production' : 'Development';
-    const color: string = environment.production ? 'red' : 'green';
-    console.info(`Environment: %c${env}`, `color: ${color}; font-weight: bold;`);
     this.dispatchWindowSize(this._window.nativeWindow.innerWidth, this._window.nativeWindow.innerHeight);
   }
 
   private storeCSSVariables() {
-    this.cssService.addCSSVariable('xlMin', '1200px');
-    this.cssService.addCSSVariable('mdMin', '768px');
-    this.cssService.addCSSVariable('lgMin', '576px');
-    this.cssService.addCSSVariable('smMin', '0');
-    this.cssService.addCSSVariable('adminSidebarActiveBg', '#0f1b28');
-    this.cssService.addCSSVariable('sidebarItemsWidth', '250px');
-    this.cssService.addCSSVariable('collapsedSidebarWidth', '53.234px');
-    this.cssService.addCSSVariable('totalSidebarWidth', '303.234px');
-    // const vars = variables.locals || {};
-    // Object.keys(vars).forEach((name: string) => {
-    //   this.cssService.addCSSVariable(name, vars[name]);
-    // })
+    this.cssService.clearCSSVariables();
+    this.cssService.addCSSVariables(this.cssService.getCSSVariablesFromStylesheets(this.document));
   }
 
   ngAfterViewInit() {
-    let updatingTheme = false;
-    let snapshot: ActivatedRouteSnapshot;
-
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationStart) {
-        updatingTheme = false;
-        this.distinctNext(this.isRouteLoading$, true);
-      } else if (event instanceof ResolveEnd) {
-        // this is the earliest point where we have all the information we need
-        // to update the theme, but this event is not emitted on first load
-        this.updateTheme(event.urlAfterRedirects, event.state.root);
-        updatingTheme = true;
-      } else if (!updatingTheme && event instanceof ActivationEnd) {
-        // if there was no ResolveEnd, keep track of the snapshot...
-        snapshot = event.snapshot;
-      } else if (event instanceof NavigationEnd) {
-        if (!updatingTheme) {
-          // ...and use it to update the theme on NavigationEnd instead
-          this.updateTheme(event.urlAfterRedirects, snapshot);
-          updatingTheme = true;
+        distinctNext(this.isRouteLoading$, true);
+      } else if (
+        event instanceof NavigationEnd ||
+        event instanceof NavigationCancel
+      ) {
+        distinctNext(this.isRouteLoading$, false);
       }
-        this.distinctNext(this.isRouteLoading$, false);
-      } else if (event instanceof NavigationCancel) {
-        if (!updatingTheme) {
-          this.distinctNext(this.isThemeLoading$, false);
-        }
-        this.distinctNext(this.isRouteLoading$, false);
-      }
-    });
-  }
-
-  /**
-   * Update the theme according to the current route, if applicable.
-   * @param urlAfterRedirects the current URL after redirects
-   * @param snapshot          the current route snapshot
-   * @private
-   */
-  private updateTheme(urlAfterRedirects: string, snapshot: ActivatedRouteSnapshot): void {
-    this.themeService.updateThemeOnRouteChange$(urlAfterRedirects, snapshot).pipe(
-      switchMap((changed) => {
-        if (changed) {
-          return this.isThemeCSSLoading$;
-        } else {
-          return [false];
-        }
-      })
-    ).subscribe((changed) => {
-      this.distinctNext(this.isThemeLoading$, changed);
     });
   }
 
@@ -271,125 +137,6 @@ export class AppComponent implements OnInit, AfterViewInit {
     );
   }
 
-  private initializeKlaro() {
-    if (hasValue(this.cookiesService)) {
-      this.cookiesService.initialize();
-    }
-  }
-
-  private loadGlobalThemeConfig(themeName: string): void {
-    this.setThemeCss(themeName);
-    this.setHeadTags(themeName);
-  }
-
-  /**
-   * Update the theme css file in <head>
-   *
-   * @param themeName The name of the new theme
-   * @private
-   */
-  private setThemeCss(themeName: string): void {
-    const head = this.document.getElementsByTagName('head')[0];
-    if (hasNoValue(head)) {
-      return;
-    }
-
-    // Array.from to ensure we end up with an array, not an HTMLCollection, which would be
-    // automatically updated if we add nodes later
-    const currentThemeLinks = Array.from(head.getElementsByClassName('theme-css'));
-    const link = this.document.createElement('link');
-    link.setAttribute('rel', 'stylesheet');
-    link.setAttribute('type', 'text/css');
-    link.setAttribute('class', 'theme-css');
-    link.setAttribute('href', `${encodeURIComponent(themeName)}-theme.css`);
-    // wait for the new css to download before removing the old one to prevent a
-    // flash of unstyled content
-    link.onload = () => {
-      if (isNotEmpty(currentThemeLinks)) {
-        currentThemeLinks.forEach((currentThemeLink: any) => {
-          if (hasValue(currentThemeLink)) {
-            currentThemeLink.remove();
-          }
-        });
-      }
-      // the fact that this callback is used, proves we're on the browser.
-      this.distinctNext(this.isThemeCSSLoading$, false);
-    };
-    head.appendChild(link);
-  }
-
-  private setHeadTags(themeName: string): void {
-    const head = this.document.getElementsByTagName('head')[0];
-    if (hasNoValue(head)) {
-      return;
-    }
-
-    // clear head tags
-    const currentHeadTags = Array.from(head.getElementsByClassName('theme-head-tag'));
-    if (hasValue(currentHeadTags)) {
-      currentHeadTags.forEach((currentHeadTag: any) => currentHeadTag.remove());
-    }
-
-    // create new head tags (not yet added to DOM)
-    const headTagFragment = this.document.createDocumentFragment();
-    this.createHeadTags(themeName)
-      .forEach(newHeadTag => headTagFragment.appendChild(newHeadTag));
-
-    // add new head tags to DOM
-    head.appendChild(headTagFragment);
-  }
-
-  private createHeadTags(themeName: string): HTMLElement[] {
-    const themeConfig = this.themeService.getThemeConfigFor(themeName);
-    const headTagConfigs = themeConfig?.headTags;
-
-    if (hasNoValue(headTagConfigs)) {
-      const parentThemeName = themeConfig?.extends;
-      if (hasValue(parentThemeName)) {
-        // inherit the head tags of the parent theme
-        return this.createHeadTags(parentThemeName);
-      }
-      const defaultThemeConfig = getDefaultThemeConfig();
-      const defaultThemeName = defaultThemeConfig.name;
-      if (
-        hasNoValue(defaultThemeName) ||
-        themeName === defaultThemeName ||
-        themeName === BASE_THEME_NAME
-      ) {
-        // last resort, use fallback favicon.ico
-        return [
-          this.createHeadTag({
-            'tagName': 'link',
-            'attributes': {
-              'rel': 'icon',
-              'href': 'assets/images/favicon.ico',
-              'sizes': 'any',
-            }
-          })
-        ];
-      }
-
-      // inherit the head tags of the default theme
-      return this.createHeadTags(defaultThemeConfig.name);
-    }
-
-    return headTagConfigs.map(this.createHeadTag.bind(this));
-  }
-
-  private createHeadTag(headTagConfig: HeadTagConfig): HTMLElement {
-    const tag = this.document.createElement(headTagConfig.tagName);
-
-    if (hasValue(headTagConfig.attributes)) {
-      Object.entries(headTagConfig.attributes)
-        .forEach(([key, value]) => tag.setAttribute(key, value));
-    }
-
-    // 'class' attribute should always be 'theme-head-tag' for removal
-    tag.setAttribute('class', 'theme-head-tag');
-
-    return tag;
-  }
-
   private trackIdleModal() {
     const isIdle$ = this.authService.isUserIdle();
     const isAuthenticated$ = this.authService.isAuthenticated();
@@ -409,16 +156,4 @@ export class AppComponent implements OnInit, AfterViewInit {
       });
   }
 
-  /**
-   * Use nextValue to update a given BehaviorSubject, only if it differs from its current value
-   *
-   * @param bs a BehaviorSubject
-   * @param nextValue the next value for that BehaviorSubject
-   * @protected
-   */
-  protected distinctNext<T>(bs: BehaviorSubject<T>, nextValue: T): void {
-    if (bs.getValue() !== nextValue) {
-      bs.next(nextValue);
-    }
-  }
 }

src/app/app.module.ts

@@ -1,18 +1,14 @@
 import { APP_BASE_HREF, CommonModule, DOCUMENT } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EffectsModule } from '@ngrx/effects';
 import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';
-import { MetaReducer, Store, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
-import {
-  DYNAMIC_ERROR_MESSAGES_MATCHER,
-  DYNAMIC_MATCHER_PROVIDERS,
-  DynamicErrorMessagesMatcher
-} from '@ng-dynamic-forms/core';
+import { MetaReducer, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
+import { DYNAMIC_ERROR_MESSAGES_MATCHER, DYNAMIC_MATCHER_PROVIDERS, DynamicErrorMessagesMatcher } from '@ng-dynamic-forms/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 import { AppRoutingModule } from './app-routing.module';
@@ -20,7 +16,6 @@ import { AppComponent } from './app.component';
 import { appEffects } from './app.effects';
 import { appMetaReducers, debugMetaReducers } from './app.metareducers';
 import { appReducers, AppState, storeModuleConfig } from './app.reducer';
-import { CheckAuthenticationTokenAction } from './core/auth/auth.actions';
 import { CoreModule } from './core/core.module';
 import { ClientCookieService } from './core/services/client-cookie.service';
 import { NavbarModule } from './navbar/navbar.module';
@@ -32,7 +27,6 @@ import { LocaleInterceptor } from './core/locale/locale.interceptor';
 import { XsrfInterceptor } from './core/xsrf/xsrf.interceptor';
 import { LogInterceptor } from './core/log/log.interceptor';
 import { EagerThemesModule } from '../themes/eager-themes.module';
-
 import { APP_CONFIG, AppConfig } from '../config/app-config.interface';
 import { NgxMaskModule } from 'ngx-mask';
 import { StoreDevModules } from '../config/store/devtools';
@@ -80,10 +74,6 @@ const IMPORTS = [
 ];
 
 const PROVIDERS = [
-  {
-    provide: APP_CONFIG,
-    useFactory: getConfig
-  },
   {
     provide: APP_BASE_HREF,
     useFactory: getBaseHref,
@@ -99,15 +89,6 @@ const PROVIDERS = [
     useClass: DSpaceRouterStateSerializer
   },
   ClientCookieService,
-  // Check the authentication token when the app initializes
-  {
-    provide: APP_INITIALIZER,
-    useFactory: (store: Store<AppState>,) => {
-      return () => store.dispatch(new CheckAuthenticationTokenAction());
-    },
-    deps: [Store],
-    multi: true
-  },
   // register AuthInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,

src/app/app.reducer.ts

@@ -1,4 +1,4 @@
-import * as fromRouter from '@ngrx/router-store';
+import { routerReducer, RouterReducerState } from '@ngrx/router-store';
 import { ActionReducerMap, createSelector, MemoizedSelector } from '@ngrx/store';
 import {
   ePeopleRegistryReducer,
@@ -35,7 +35,7 @@ import {
   ObjectSelectionListState,
   objectSelectionReducer
 } from './shared/object-select/object-select.reducer';
-import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/sass-helper.reducer';
+import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/css-variable.reducer';
 
 import { hostWindowReducer, HostWindowState } from './shared/search/host-window.reducer';
 import {
@@ -53,7 +53,7 @@ import { MenusState } from './shared/menu/menus-state.model';
 import { correlationIdReducer } from './correlation-id/correlation-id.reducer';
 
 export interface AppState {
-  router: fromRouter.RouterReducerState;
+  router: RouterReducerState;
   hostWindow: HostWindowState;
   forms: FormState;
   metadataRegistry: MetadataRegistryState;
@@ -75,7 +75,7 @@ export interface AppState {
 }
 
 export const appReducers: ActionReducerMap<AppState> = {
-  router: fromRouter.routerReducer,
+  router: routerReducer,
   hostWindow: hostWindowReducer,
   forms: formReducer,
   metadataRegistry: metadataRegistryReducer,

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

@@ -27,7 +27,7 @@
       </div>
     </div>
     <ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error>
-    <ds-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
-                message="{{'loading.bitstream' | translate}}"></ds-loading>
+    <ds-themed-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
+                message="{{'loading.bitstream' | translate}}"></ds-themed-loading>
   </div>
 </ng-container>

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

@@ -26,7 +26,7 @@ import {
 import { FormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
 import {
   getAllSucceededRemoteDataPayload,

src/app/bitstream-page/legacy-bitstream-url.resolver.spec.ts

@@ -1,5 +1,5 @@
 import { LegacyBitstreamUrlResolver } from './legacy-bitstream-url.resolver';
-import { of as observableOf, EMPTY } from 'rxjs';
+import { EMPTY } from 'rxjs';
 import { BitstreamDataService } from '../core/data/bitstream-data.service';
 import { RemoteData } from '../core/data/remote-data';
 import { TestScheduler } from 'rxjs/testing';

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

@@ -18,11 +18,10 @@ import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-
 import { toRemoteData } from '../browse-by-metadata-page/browse-by-metadata-page.component.spec';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../core/data/find-list-options.model';
+import { APP_CONFIG } from '../../../config/app-config.interface';
+import { environment } from '../../../environments/environment';
 
 describe('BrowseByDatePageComponent', () => {
   let comp: BrowseByDatePageComponent;
@@ -83,7 +82,8 @@ describe('BrowseByDatePageComponent', () => {
         { provide: DSpaceObjectDataService, useValue: mockDsoService },
         { provide: Router, useValue: new RouterMock() },
         { provide: PaginationService, useValue: paginationService },
-        { provide: ChangeDetectorRef, useValue: mockCdRef }
+        { provide: ChangeDetectorRef, useValue: mockCdRef },
+        { provide: APP_CONFIG, useValue: environment }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

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

@@ -1,9 +1,8 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject } from '@angular/core';
 import {
   BrowseByMetadataPageComponent,
-  browseParamsToOptions
+  browseParamsToOptions, getBrowseSearchOptions
 } from '../browse-by-metadata-page/browse-by-metadata-page.component';
-import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
 import { combineLatest as observableCombineLatest } from 'rxjs';
 import { RemoteData } from '../../core/data/remote-data';
 import { Item } from '../../core/shared/item.model';
@@ -12,13 +11,12 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BrowseService } from '../../core/browse/browse.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
-import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
-import { environment } from '../../../environments/environment';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { isValidDate } from '../../shared/date.util';
+import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
 
 @Component({
   selector: 'ds-browse-by-date-page',
@@ -30,7 +28,6 @@ import { isValidDate } from '../../shared/date.util';
  * 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'
  */
-@rendersBrowseBy(BrowseByDataType.Date)
 export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
 
   /**
@@ -43,14 +40,16 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
                      protected dsoService: DSpaceObjectDataService,
                      protected router: Router,
                      protected paginationService: PaginationService,
-                     protected cdRef: ChangeDetectorRef) {
-    super(route, browseService, dsoService, paginationService, router);
+                     protected cdRef: ChangeDetectorRef,
+                     @Inject(APP_CONFIG) public appConfig: AppConfig) {
+    super(route, browseService, dsoService, paginationService, router, appConfig);
   }
 
   ngOnInit(): void {
     const sortConfig = new SortOptions('default', SortDirection.ASC);
     this.startsWithType = StartsWithType.date;
-    this.updatePage(new BrowseEntrySearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig));
+    // include the thumbnail configuration in browse search options
+    this.updatePage(getBrowseSearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig, this.fetchThumbnails));
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
     this.subs.push(
@@ -63,7 +62,7 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
         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);
+        const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails);
         this.updatePageWithItems(searchOptions, this.value, undefined);
         this.updateParent(params.scope);
         this.updateStartsWithOptions(this.browseId, metadataKeys, params.scope);
@@ -83,7 +82,7 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
   updateStartsWithOptions(definition: string, metadataKeys: string[], scope?: string) {
     this.subs.push(
       this.browseService.getFirstItemFor(definition, scope).subscribe((firstItemRD: RemoteData<Item>) => {
-        let lowerLimit = environment.browseBy.defaultLowerLimit;
+        let lowerLimit = this.appConfig.browseBy.defaultLowerLimit;
         if (hasValue(firstItemRD.payload)) {
           const date = firstItemRD.payload.firstMetadataValue(metadataKeys);
           if (isNotEmpty(date) && isValidDate(date)) {
@@ -94,8 +93,8 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
         }
         const options = [];
         const currentYear = new Date().getUTCFullYear();
-        const oneYearBreak = Math.floor((currentYear - environment.browseBy.oneYearLimit) / 5) * 5;
-        const fiveYearBreak = Math.floor((currentYear - environment.browseBy.fiveYearLimit) / 10) * 10;
+        const oneYearBreak = Math.floor((currentYear - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
+        const fiveYearBreak = Math.floor((currentYear - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
         if (lowerLimit <= fiveYearBreak) {
           lowerLimit -= 10;
         } else if (lowerLimit <= oneYearBreak) {

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

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { BrowseByDatePageComponent } from './browse-by-date-page.component';
+import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by-decorator';
+
+/**
+ * Themed wrapper for BrowseByDatePageComponent
+ * */
+@Component({
+  selector: 'ds-themed-browse-by-metadata-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+@rendersBrowseBy(BrowseByDataType.Date)
+export class ThemedBrowseByDatePageComponent
+  extends ThemedComponent<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-guard.spec.ts

@@ -1,7 +1,6 @@
 import { first } from 'rxjs/operators';
 import { BrowseByGuard } from './browse-by-guard';
 import { of as observableOf } from 'rxjs';
-import { BrowseDefinitionDataService } from '../core/browse/browse-definition-data.service';
 import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
 import { BrowseDefinition } from '../core/shared/browse-definition.model';
 import { BrowseByDataType } from './browse-by-switcher/browse-by-decorator';

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

@@ -6,10 +6,10 @@
         <ds-comcol-page-header [name]="parentContext.name">
         </ds-comcol-page-header>
         <!-- Handle -->
-        <ds-comcol-page-handle
+        <ds-themed-comcol-page-handle
             [content]="parentContext.handle"
             [title]="parentContext.type+'.page.handle'" >
-        </ds-comcol-page-handle>
+        </ds-themed-comcol-page-handle>
         <!-- Introductory text -->
         <ds-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
         </ds-comcol-page-content>
@@ -40,7 +40,7 @@
       (prev)="goPrev()"
       (next)="goNext()">
     </ds-browse-by>
-    <ds-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-loading>
+    <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
   </div>
   </section>
   <ng-container *ngVar="(parent$ | async) as parent">

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

@@ -1,4 +1,8 @@
-import { BrowseByMetadataPageComponent, browseParamsToOptions } from './browse-by-metadata-page.component';
+import {
+  BrowseByMetadataPageComponent,
+  browseParamsToOptions,
+  getBrowseSearchOptions
+} from './browse-by-metadata-page.component';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowseService } from '../../core/browse/browse.service';
 import { CommonModule } from '@angular/common';
@@ -14,7 +18,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
+import { SortDirection } from '../../core/cache/models/sort-options.model';
 import { Item } from '../../core/shared/item.model';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { Community } from '../../core/shared/community.model';
@@ -25,6 +29,7 @@ import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.util
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
+import { APP_CONFIG } from '../../../config/app-config.interface';
 
 describe('BrowseByMetadataPageComponent', () => {
   let comp: BrowseByMetadataPageComponent;
@@ -43,6 +48,13 @@ describe('BrowseByMetadataPageComponent', () => {
     ]
   });
 
+  const environmentMock = {
+    browseBy: {
+      showThumbnails: true,
+      pageSize: 10
+    }
+  };
+
   const mockEntries = [
     {
       type: BrowseEntry.type,
@@ -97,7 +109,8 @@ describe('BrowseByMetadataPageComponent', () => {
         { provide: BrowseService, useValue: mockBrowseService },
         { provide: DSpaceObjectDataService, useValue: mockDsoService },
         { provide: PaginationService, useValue: paginationService },
-        { provide: Router, useValue: new RouterMock() }
+        { provide: Router, useValue: new RouterMock() },
+        { provide: APP_CONFIG, useValue: environmentMock }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -118,6 +131,10 @@ describe('BrowseByMetadataPageComponent', () => {
     expect(comp.items$).toBeUndefined();
   });
 
+  it('should set embed thumbnail property to true', () => {
+    expect(comp.fetchThumbnails).toBeTrue();
+  });
+
   describe('when a value is provided', () => {
     beforeEach(() => {
       const paramsWithValue = {
@@ -145,14 +162,14 @@ describe('BrowseByMetadataPageComponent', () => {
       };
       const paginationOptions = Object.assign(new PaginationComponentOptions(), {
         currentPage: 5,
-        pageSize: 10,
+        pageSize: comp.appConfig.browseBy.pageSize,
       });
       const sortOptions = {
         direction: SortDirection.ASC,
         field: 'fake-field',
       };
 
-      result = browseParamsToOptions(paramsScope, paginationOptions, sortOptions, 'author');
+      result = browseParamsToOptions(paramsScope, paginationOptions, sortOptions, 'author', comp.fetchThumbnails);
     });
 
     it('should return BrowseEntrySearchOptions with the correct properties', () => {
@@ -163,6 +180,36 @@ describe('BrowseByMetadataPageComponent', () => {
       expect(result.sort.direction).toEqual(SortDirection.ASC);
       expect(result.sort.field).toEqual('fake-field');
       expect(result.scope).toEqual('fake-scope');
+      expect(result.fetchThumbnail).toBeTrue();
+    });
+  });
+
+  describe('calling getBrowseSearchOptions', () => {
+    let result: BrowseEntrySearchOptions;
+
+    beforeEach(() => {
+      const paramsScope = {
+        scope: 'fake-scope'
+      };
+      const paginationOptions = Object.assign(new PaginationComponentOptions(), {
+        currentPage: 5,
+        pageSize: comp.appConfig.browseBy.pageSize,
+      });
+      const sortOptions = {
+        direction: SortDirection.ASC,
+        field: 'fake-field',
+      };
+
+      result = getBrowseSearchOptions('title', paginationOptions, sortOptions, comp.fetchThumbnails);
+    });
+    it('should return BrowseEntrySearchOptions with the correct properties', () => {
+
+      expect(result.metadataDefinition).toEqual('title');
+      expect(result.pagination.currentPage).toEqual(5);
+      expect(result.pagination.pageSize).toEqual(10);
+      expect(result.sort.direction).toEqual(SortDirection.ASC);
+      expect(result.sort.field).toEqual('fake-field');
+      expect(result.fetchThumbnail).toBeTrue();
     });
   });
 });

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

@@ -1,5 +1,5 @@
 import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
@@ -14,9 +14,11 @@ import { getFirstSucceededRemoteData } from '../../core/shared/operators';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
-import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
+import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
+
+export const BBM_PAGINATION_ID = 'bbm';
 
 @Component({
   selector: 'ds-browse-by-metadata-page',
@@ -24,12 +26,12 @@ import { map } from 'rxjs/operators';
   templateUrl: './browse-by-metadata-page.component.html'
 })
 /**
- * Component for browsing (items) by metadata definition
- * A metadata definition (a.k.a. browse id) is a short term used to describe one or multiple metadata fields.
- * An example would be 'author' for 'dc.contributor.*'
+ * Component for browsing (items) by metadata definition.
+ * A metadata definition (a.k.a. browse id) is a short term used to describe one
+ * or multiple metadata fields.  An example would be 'author' for
+ * 'dc.contributor.*'
  */
-@rendersBrowseBy(BrowseByDataType.Metadata)
-export class BrowseByMetadataPageComponent implements OnInit {
+export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
 
   /**
    * The list of browse-entries to display
@@ -49,11 +51,7 @@ export class BrowseByMetadataPageComponent implements OnInit {
   /**
    * The pagination config used to display the values
    */
-  paginationConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: 'bbm',
-    currentPage: 1,
-    pageSize: 20
-  });
+  paginationConfig: PaginationComponentOptions;
 
   /**
    * The pagination observable
@@ -93,7 +91,7 @@ export class BrowseByMetadataPageComponent implements OnInit {
   startsWithOptions;
 
   /**
-   * The value we're browing items for
+   * The value we're browsing items for
    * - When the value is not empty, we're browsing items
    * - When the value is empty, we're browsing browse-entries (values for the given metadata definition)
    */
@@ -109,16 +107,31 @@ export class BrowseByMetadataPageComponent implements OnInit {
    */
   startsWith: string;
 
+  /**
+   * Determines whether to request embedded thumbnail.
+   */
+  fetchThumbnails: boolean;
+
   public constructor(protected route: ActivatedRoute,
                      protected browseService: BrowseService,
                      protected dsoService: DSpaceObjectDataService,
                      protected paginationService: PaginationService,
-                     protected router: Router) {
+                     protected router: Router,
+                     @Inject(APP_CONFIG) public appConfig: AppConfig) {
+
+    this.fetchThumbnails = this.appConfig.browseBy.showThumbnails;
+    this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
+        id: BBM_PAGINATION_ID,
+        currentPage: 1,
+        pageSize: this.appConfig.browseBy.pageSize,
+        });
     }
 
+
   ngOnInit(): void {
+
     const sortConfig = new SortOptions('default', SortDirection.ASC);
-    this.updatePage(new BrowseEntrySearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig));
+    this.updatePage(getBrowseSearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig));
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
     this.subs.push(
@@ -131,15 +144,16 @@ export class BrowseByMetadataPageComponent implements OnInit {
           this.authority = params.authority;
           this.value = +params.value || params.value || '';
           this.startsWith = +params.startsWith || params.startsWith;
-          const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId);
           if (isNotEmpty(this.value)) {
-            this.updatePageWithItems(searchOptions, this.value, this.authority);
+            this.updatePageWithItems(
+              browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails), this.value, this.authority);
           } else {
-            this.updatePage(searchOptions);
+            this.updatePage(browseParamsToOptions(params, currentPage, currentSort, this.browseId, false));
           }
           this.updateParent(params.scope);
         }));
     this.updateStartsWithTextOptions();
+
   }
 
   /**
@@ -226,22 +240,44 @@ export class BrowseByMetadataPageComponent implements OnInit {
 
 }
 
+/**
+ * Creates browse entry search options.
+ * @param defaultBrowseId the metadata definition to fetch entries or items for
+ * @param paginationConfig the required pagination configuration
+ * @param sortConfig the required sort configuration
+ * @param fetchThumbnails optional boolean for fetching thumbnails
+ * @returns BrowseEntrySearchOptions instance
+ */
+export function getBrowseSearchOptions(defaultBrowseId: string,
+                                       paginationConfig: PaginationComponentOptions,
+                                       sortConfig: SortOptions,
+                                       fetchThumbnails?: boolean) {
+  if (!hasValue(fetchThumbnails)) {
+    fetchThumbnails = false;
+  }
+  return new BrowseEntrySearchOptions(defaultBrowseId, paginationConfig, sortConfig, null,
+    null, fetchThumbnails);
+}
+
 /**
  * Function to transform query and url parameters into searchOptions used to fetch browse entries or items
  * @param params            URL and query parameters
  * @param paginationConfig  Pagination configuration
  * @param sortConfig        Sorting configuration
  * @param metadata          Optional metadata definition to fetch browse entries/items for
+ * @param fetchThumbnail   Optional parameter for requesting thumbnail images
  */
 export function browseParamsToOptions(params: any,
                                       paginationConfig: PaginationComponentOptions,
                                       sortConfig: SortOptions,
-                                      metadata?: string): BrowseEntrySearchOptions {
+                                      metadata?: string,
+                                      fetchThumbnail?: boolean): BrowseEntrySearchOptions {
   return new BrowseEntrySearchOptions(
     metadata,
     paginationConfig,
     sortConfig,
     +params.startsWith || params.startsWith,
-    params.scope
+    params.scope,
+    fetchThumbnail
   );
 }

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

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

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

@@ -1,6 +1,10 @@
 import { hasNoValue } from '../../shared/empty.util';
 import { InjectionToken } from '@angular/core';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import {
+  DEFAULT_THEME,
+  resolveTheme
+} from '../../shared/object-collection/shared/listable-object/listable-object.decorator';
 
 export enum BrowseByDataType {
   Title = 'title',
@@ -10,7 +14,7 @@ export enum BrowseByDataType {
 
 export const DEFAULT_BROWSE_BY_TYPE = BrowseByDataType.Metadata;
 
-export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType) => GenericConstructor<any>>('getComponentByBrowseByType', {
+export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType, theme) => GenericConstructor<any>>('getComponentByBrowseByType', {
   providedIn: 'root',
   factory: () => getComponentByBrowseByType
 });
@@ -20,13 +24,17 @@ const map = new Map();
 /**
  * Decorator used for rendering Browse-By pages by type
  * @param browseByType  The type of page
+ * @param theme The optional theme for the component
  */
-export function rendersBrowseBy(browseByType: BrowseByDataType) {
+export function rendersBrowseBy(browseByType: BrowseByDataType, theme = DEFAULT_THEME) {
   return function decorator(component: any) {
     if (hasNoValue(map.get(browseByType))) {
-      map.set(browseByType, component);
+      map.set(browseByType, new Map());
+    }
+    if (hasNoValue(map.get(browseByType).get(theme))) {
+      map.get(browseByType).set(theme, component);
     } else {
-      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}"`);
+      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}" and theme "${theme}"`);
     }
   };
 }
@@ -34,11 +42,16 @@ export function rendersBrowseBy(browseByType: BrowseByDataType) {
 /**
  * Get the component used for rendering a Browse-By page by type
  * @param browseByType  The type of page
+ * @param theme the theme to match
  */
-export function getComponentByBrowseByType(browseByType) {
-  const comp = map.get(browseByType);
+export function getComponentByBrowseByType(browseByType, theme) {
+  let themeMap = map.get(browseByType);
+  if (hasNoValue(themeMap)) {
+    themeMap = map.get(DEFAULT_BROWSE_BY_TYPE);
+  }
+  const comp = resolveTheme(themeMap, theme);
   if (hasNoValue(comp)) {
-    map.get(DEFAULT_BROWSE_BY_TYPE);
+    return themeMap.get(DEFAULT_THEME);
   }
   return comp;
 }

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

@@ -4,7 +4,8 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BROWSE_BY_COMPONENT_FACTORY, BrowseByDataType } from './browse-by-decorator';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
-import { BehaviorSubject, of as observableOf } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 describe('BrowseBySwitcherComponent', () => {
   let comp: BrowseBySwitcherComponent;
@@ -44,11 +45,20 @@ describe('BrowseBySwitcherComponent', () => {
     data
   };
 
+  let themeService: ThemeService;
+  let themeName: string;
+
   beforeEach(waitForAsync(() => {
+    themeName = 'dspace';
+    themeService = jasmine.createSpyObj('themeService', {
+      getThemeName: themeName,
+    });
+
     TestBed.configureTestingModule({
       declarations: [BrowseBySwitcherComponent],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: ThemeService, useValue: themeService },
         { provide: BROWSE_BY_COMPONENT_FACTORY, useValue: jasmine.createSpy('getComponentByBrowseByType').and.returnValue(null) }
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -68,7 +78,7 @@ describe('BrowseBySwitcherComponent', () => {
       });
 
       it(`should call getComponentByBrowseByType with type "${type.dataType}"`, () => {
-        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.dataType);
+        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.dataType, themeName);
       });
     });
   });

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

@@ -5,6 +5,7 @@ import { map } from 'rxjs/operators';
 import { BROWSE_BY_COMPONENT_FACTORY } from './browse-by-decorator';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 @Component({
   selector: 'ds-browse-by-switcher',
@@ -21,7 +22,8 @@ export class BrowseBySwitcherComponent implements OnInit {
   browseByComponent: Observable<any>;
 
   public constructor(protected route: ActivatedRoute,
-                     @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType) => GenericConstructor<any>) {
+                     protected themeService: ThemeService,
+                     @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
   }
 
   /**
@@ -29,7 +31,7 @@ export class BrowseBySwitcherComponent implements OnInit {
    */
   ngOnInit(): void {
     this.browseByComponent = this.route.data.pipe(
-      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.dataType))
+      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.dataType, this.themeService.getThemeName()))
     );
   }
 

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

@@ -18,11 +18,11 @@ import { BrowseService } from '../../core/browse/browse.service';
 import { RouterMock } from '../../shared/mocks/router.mock';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../core/data/find-list-options.model';
+import { APP_CONFIG } from '../../../config/app-config.interface';
+import { environment } from '../../../environments/environment';
+
 
 describe('BrowseByTitlePageComponent', () => {
   let comp: BrowseByTitlePageComponent;
@@ -77,7 +77,8 @@ describe('BrowseByTitlePageComponent', () => {
         { provide: BrowseService, useValue: mockBrowseService },
         { provide: DSpaceObjectDataService, useValue: mockDsoService },
         { provide: PaginationService, useValue: paginationService },
-        { provide: Router, useValue: new RouterMock() }
+        { provide: Router, useValue: new RouterMock() },
+        { provide: APP_CONFIG, useValue: environment }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

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

@@ -1,19 +1,18 @@
 import { combineLatest as observableCombineLatest } from 'rxjs';
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { hasValue } from '../../shared/empty.util';
 import {
   BrowseByMetadataPageComponent,
-  browseParamsToOptions
+  browseParamsToOptions, getBrowseSearchOptions
 } from '../browse-by-metadata-page/browse-by-metadata-page.component';
-import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { BrowseService } from '../../core/browse/browse.service';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
 
 @Component({
   selector: 'ds-browse-by-title-page',
@@ -23,20 +22,21 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c
 /**
  * Component for browsing items by title (dc.title)
  */
-@rendersBrowseBy(BrowseByDataType.Title)
 export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
 
   public constructor(protected route: ActivatedRoute,
                      protected browseService: BrowseService,
                      protected dsoService: DSpaceObjectDataService,
                      protected paginationService: PaginationService,
-                     protected router: Router) {
-    super(route, browseService, dsoService, paginationService, router);
+                     protected router: Router,
+                     @Inject(APP_CONFIG) public appConfig: AppConfig) {
+    super(route, browseService, dsoService, paginationService, router, appConfig);
   }
 
   ngOnInit(): void {
     const sortConfig = new SortOptions('dc.title', SortDirection.ASC);
-    this.updatePage(new BrowseEntrySearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig));
+    // include the thumbnail configuration in browse search options
+    this.updatePage(getBrowseSearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig, this.fetchThumbnails));
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
     this.subs.push(
@@ -47,7 +47,7 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
       ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
         this.startsWith = +params.startsWith || params.startsWith;
         this.browseId = params.id || this.defaultBrowseId;
-        this.updatePageWithItems(browseParamsToOptions(params, currentPage, currentSort, this.browseId), undefined, undefined);
+        this.updatePageWithItems(browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails), undefined, undefined);
         this.updateParent(params.scope);
       }));
     this.updateStartsWithTextOptions();

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

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

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

@@ -7,12 +7,20 @@ import { BrowseByDatePageComponent } from './browse-by-date-page/browse-by-date-
 import { BrowseBySwitcherComponent } from './browse-by-switcher/browse-by-switcher.component';
 import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-browse-by-switcher.component';
 import { ComcolModule } from '../shared/comcol/comcol.module';
+import { ThemedBrowseByMetadataPageComponent } from './browse-by-metadata-page/themed-browse-by-metadata-page.component';
+import { ThemedBrowseByDatePageComponent } from './browse-by-date-page/themed-browse-by-date-page.component';
+import { ThemedBrowseByTitlePageComponent } from './browse-by-title-page/themed-browse-by-title-page.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   BrowseByTitlePageComponent,
   BrowseByMetadataPageComponent,
-  BrowseByDatePageComponent
+  BrowseByDatePageComponent,
+
+  ThemedBrowseByMetadataPageComponent,
+  ThemedBrowseByDatePageComponent,
+  ThemedBrowseByTitlePageComponent,
+
 ];
 
 @NgModule({

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

@@ -16,7 +16,7 @@ import { CommunityDataService } from '../../core/data/community-data.service';
 import { AuthService } from '../../core/auth/auth.service';
 import { RequestService } from '../../core/data/request.service';
 import { ObjectCacheService } from '../../core/cache/object-cache.service';
-import { EntityTypeService } from '../../core/data/entity-type.service';
+import { EntityTypeDataService } from '../../core/data/entity-type-data.service';
 import { ItemType } from '../../core/shared/item-relationships/item-type.model';
 import { MetadataValue } from '../../core/shared/metadata.models';
 import { getFirstSucceededRemoteListPayload } from '../../core/shared/operators';
@@ -61,7 +61,7 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> imp
                      protected dsoService: CommunityDataService,
                      protected requestService: RequestService,
                      protected objectCache: ObjectCacheService,
-                     protected entityTypeService: EntityTypeService) {
+                     protected entityTypeService: EntityTypeDataService) {
     super(formService, translate, notificationsService, authService, requestService, objectCache);
   }
 

src/app/collection-page/collection-item-mapper/collection-item-mapper.component.spec.ts

@@ -16,7 +16,7 @@ import { Collection } from '../../core/shared/collection.model';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { ChangeDetectionStrategy, EventEmitter } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 import { HostWindowService } from '../../shared/host-window.service';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { By } from '@angular/platform-browser';
@@ -41,7 +41,7 @@ import {
 } from '../../shared/remote-data.utils';
 import { createPaginatedList } from '../../shared/testing/utils.test';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { MyDSpacePageComponent, SEARCH_CONFIG_SERVICE } from '../../my-dspace-page/my-dspace-page.component';
+import { SEARCH_CONFIG_SERVICE } from '../../my-dspace-page/my-dspace-page.component';
 import { SearchConfigurationServiceStub } from '../../shared/testing/search-configuration-service.stub';
 import { GroupDataService } from '../../core/eperson/group-data.service';
 import { LinkHeadService } from '../../core/services/link-head.service';
@@ -94,7 +94,7 @@ describe('CollectionItemMapperComponent', () => {
   const emptyList = createSuccessfulRemoteDataObject(createPaginatedList([]));
   const itemDataServiceStub = {
     mapToCollection: () => createSuccessfulRemoteDataObject$({}),
-    findAllByHref: () => observableOf(emptyList)
+    findListByHref: () => observableOf(emptyList),
   };
   const activatedRouteStub = {
     parent: {
@@ -152,7 +152,7 @@ describe('CollectionItemMapperComponent', () => {
   });
 
   const groupDataService = jasmine.createSpyObj('groupsDataService', {
-    findAllByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
+    findListByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
     getGroupRegistryRouterLink: '',
     getUUIDFromString: '',
   });

src/app/collection-page/collection-item-mapper/collection-item-mapper.component.ts

@@ -143,7 +143,7 @@ export class CollectionItemMapperComponent implements OnInit {
         if (shouldUpdate === true) {
           this.shouldUpdate$.next(false);
         }
-        return this.itemDataService.findAllByHref(collectionRD.payload._links.mappedItems.href, Object.assign(options, {
+        return this.itemDataService.findListByHref(collectionRD.payload._links.mappedItems.href, Object.assign(options, {
           sort: this.defaultSortOptions
         }),!shouldUpdate, false, followLink('owningCollection')).pipe(
           getAllSucceededRemoteData()

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

@@ -6,7 +6,7 @@ import { CreateCollectionPageComponent } from './create-collection-page/create-c
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 import { CreateCollectionPageGuard } from './create-collection-page/create-collection-page.guard';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
-import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { ItemTemplatePageResolver } from './edit-item-template-page/item-template-page.resolver';
 import { CollectionBreadcrumbResolver } from '../core/breadcrumbs/collection-breadcrumb.resolver';
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
@@ -52,7 +52,7 @@ import { MenuItemType } from '../shared/menu/menu-item-type.model';
           },
           {
             path: ITEMTEMPLATE_PATH,
-            component: EditItemTemplatePageComponent,
+            component: ThemedEditItemTemplatePageComponent,
             canActivate: [AuthenticatedGuard],
             resolve: {
               item: ItemTemplatePageResolver,

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

@@ -17,10 +17,10 @@
                   </ds-comcol-page-logo>
 
                   <!-- Handle -->
-                  <ds-comcol-page-handle
+                  <ds-themed-comcol-page-handle
                           [content]="collection.handle"
                           [title]="'collection.page.handle'" >
-                  </ds-comcol-page-handle>
+                  </ds-themed-comcol-page-handle>
                   <!-- Introductory text -->
                   <ds-comcol-page-content
                           [content]="collection.introductoryText"
@@ -56,8 +56,8 @@
                 </div>
                 <ds-error *ngIf="itemRD?.hasFailed"
                           message="{{'error.recent-submissions' | translate}}"></ds-error>
-                <ds-loading *ngIf="!itemRD || itemRD.isLoading"
-                            message="{{'loading.recent-submissions' | translate}}"></ds-loading>
+                <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
+                            message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
                 <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
                         {{'collection.page.browse.recent.empty' | translate}}
                 </div>
@@ -74,7 +74,7 @@
     </div>
         <ds-error *ngIf="collectionRD?.hasFailed"
             message="{{'error.collection' | translate}}"></ds-error>
-        <ds-loading *ngIf="collectionRD?.isLoading"
-            message="{{'loading.collection' | translate}}"></ds-loading>
+        <ds-themed-loading *ngIf="collectionRD?.isLoading"
+            message="{{'loading.collection' | translate}}"></ds-themed-loading>
   </div>
 </div>

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

@@ -28,6 +28,7 @@ import { AuthorizationDataService } from '../core/data/feature-authorization/aut
 import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCollectionPageRoute } from './collection-page-routing-paths';
 import { redirectOn4xx } from '../core/shared/authorized.operators';
+import { BROWSE_LINKS_TO_FOLLOW } from '../core/browse/browse.service';
 
 @Component({
   selector: 'ds-collection-page',
@@ -74,6 +75,7 @@ export class CollectionPageComponent implements OnInit {
     this.paginationConfig.pageSize = 5;
     this.paginationConfig.currentPage = 1;
     this.sortConfig = new SortOptions('dc.date.accessioned', SortDirection.DESC);
+
   }
 
   ngOnInit(): void {
@@ -102,13 +104,14 @@ export class CollectionPageComponent implements OnInit {
         getFirstSucceededRemoteData(),
         map((rd) => rd.payload.id),
         switchMap((id: string) => {
-          return this.searchService.search(
+          return this.searchService.search<Item>(
             new PaginatedSearchOptions({
               scope: id,
               pagination: currentPagination,
               sort: currentSort,
               dsoTypes: [DSpaceObjectType.ITEM]
-            })).pipe(toDSpaceObjectListRD()) as Observable<RemoteData<PaginatedList<Item>>>;
+            }), null, true, true, ...BROWSE_LINKS_TO_FOLLOW)
+            .pipe(toDSpaceObjectListRD()) as Observable<RemoteData<PaginatedList<Item>>>;
         }),
         startWith(undefined) // Make sure switching pages shows loading component
       )

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

@@ -8,6 +8,7 @@ import { CollectionPageRoutingModule } from './collection-page-routing.module';
 import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { EditItemPageModule } from '../item-page/edit-item-page/edit-item-page.module';
 import { CollectionItemMapperComponent } from './collection-item-mapper/collection-item-mapper.component';
 import { SearchService } from '../core/shared/search/search.service';
@@ -32,6 +33,7 @@ import { ComcolModule } from '../shared/comcol/comcol.module';
     CreateCollectionPageComponent,
     DeleteCollectionPageComponent,
     EditItemTemplatePageComponent,
+    ThemedEditItemTemplatePageComponent,
     CollectionItemMapperComponent
   ],
   providers: [

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

@@ -17,7 +17,7 @@ export const COLLECTION_PAGE_LINKS_TO_FOLLOW: FollowLinkConfig<Collection>[] = [
   followLink('parentCommunity', {},
     followLink('parentCommunity')
   ),
-  followLink('logo')
+  followLink('logo'),
 ];
 
 /**

src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts

@@ -13,7 +13,7 @@ import { Item } from '../../../core/shared/item.model';
 import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
 import { Collection } from '../../../core/shared/collection.model';
 import { RequestService } from '../../../core/data/request.service';
-import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { getCollectionItemTemplateRoute } from '../../collection-page-routing-paths';
 
 describe('CollectionMetadataComponent', () => {
@@ -39,8 +39,8 @@ describe('CollectionMetadataComponent', () => {
 
   const itemTemplateServiceStub = jasmine.createSpyObj('itemTemplateService', {
     findByCollectionID: createSuccessfulRemoteDataObject$(template),
-    create: createSuccessfulRemoteDataObject$(template),
-    deleteByCollectionID: observableOf(true),
+    createByCollectionID: createSuccessfulRemoteDataObject$(template),
+    delete: observableOf(true),
     getCollectionEndpoint: observableOf(collectionTemplateHref),
   });
 
@@ -91,12 +91,12 @@ describe('CollectionMetadataComponent', () => {
 
   describe('deleteItemTemplate', () => {
     beforeEach(() => {
-      (itemTemplateService.deleteByCollectionID as jasmine.Spy).and.returnValue(observableOf(true));
+      (itemTemplateService.delete as jasmine.Spy).and.returnValue(createSuccessfulRemoteDataObject$({}));
       comp.deleteItemTemplate();
     });
 
-    it('should call ItemTemplateService.deleteByCollectionID', () => {
-      expect(itemTemplateService.deleteByCollectionID).toHaveBeenCalledWith(template, 'collection-id');
+    it('should call ItemTemplateService.delete', () => {
+      expect(itemTemplateService.delete).toHaveBeenCalledWith(template.uuid);
     });
 
     describe('when delete returns a success', () => {
@@ -107,7 +107,7 @@ describe('CollectionMetadataComponent', () => {
 
     describe('when delete returns a failure', () => {
       beforeEach(() => {
-        (itemTemplateService.deleteByCollectionID as jasmine.Spy).and.returnValue(observableOf(false));
+        (itemTemplateService.delete as jasmine.Spy).and.returnValue(createFailedRemoteDataObject$());
         comp.deleteItemTemplate();
       });
 

src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts

@@ -7,12 +7,14 @@ import { ItemTemplateDataService } from '../../../core/data/item-template-data.s
 import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { Item } from '../../../core/shared/item.model';
-import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
-import { switchMap } from 'rxjs/operators';
+import { getFirstCompletedRemoteData, getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RequestService } from '../../../core/data/request.service';
 import { getCollectionItemTemplateRoute } from '../../collection-page-routing-paths';
+import { NoContent } from '../../../core/shared/NoContent.model';
+import { hasValue } from '../../../shared/empty.util';
 
 /**
  * Component for editing a collection's metadata
@@ -65,7 +67,7 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
       getFirstSucceededRemoteDataPayload(),
     );
     const template$ = collection$.pipe(
-      switchMap((collection: Collection) => this.itemTemplateService.create(new Item(), collection.uuid).pipe(
+      switchMap((collection: Collection) => this.itemTemplateService.createByCollectionID(new Item(), collection.uuid).pipe(
         getFirstSucceededRemoteDataPayload(),
       )),
     );
@@ -83,18 +85,15 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
    * Delete the item template from the collection
    */
   deleteItemTemplate() {
-    const collection$ = this.dsoRD$.pipe(
+    this.dsoRD$.pipe(
       getFirstSucceededRemoteDataPayload(),
-    );
-    const template$ = collection$.pipe(
-      switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid).pipe(
+      switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid)),
       getFirstSucceededRemoteDataPayload(),
-      )),
-    );
-    combineLatestObservable(collection$, template$).pipe(
-      switchMap(([collection, template]) => {
-        return this.itemTemplateService.deleteByCollectionID(template, collection.uuid);
-      })
+      switchMap((template) => {
+        return this.itemTemplateService.delete(template.uuid);
+      }),
+      getFirstCompletedRemoteData(),
+      map((response: RemoteData<NoContent>) => hasValue(response) && response.hasSucceeded),
     ).subscribe((success: boolean) => {
       if (success) {
         this.notificationsService.success(null, this.translate.get('collection.edit.template.notifications.delete.success'));

src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html

@@ -11,11 +11,11 @@
         </div>
         <div>
             <span class="font-weight-bold">{{'collection.source.controls.harvest.last' | translate}}</span>
-            <span>{{contentSource?.message ? contentSource?.message : 'collection.source.controls.harvest.no-information'|translate }}</span>
+            <span>{{contentSource?.lastHarvested ? contentSource?.lastHarvested : 'collection.source.controls.harvest.no-information'|translate }}</span>
         </div>
         <div>
             <span class="font-weight-bold">{{'collection.source.controls.harvest.message' | translate}}</span>
-            <span>{{contentSource?.lastHarvested ? contentSource?.lastHarvested : 'collection.source.controls.harvest.no-information'|translate }}</span>
+            <span>{{contentSource?.message ? contentSource?.message: 'collection.source.controls.harvest.no-information'|translate }}</span>
         </div>
 
         <button *ngIf="!(testConfigRunning$ |async)" class="btn btn-secondary"

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

@@ -25,7 +25,7 @@
         <label class="form-check-label"
                for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}</label>
     </div>
-    <ds-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-loading>
+    <ds-themed-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-themed-loading>
     <h4 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{ 'collection.edit.tabs.source.form.head' | translate }}</h4>
 </div>
 <div class="row">

src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts

@@ -8,8 +8,7 @@ import {
   DynamicInputModel,
   DynamicOptionControlModel,
   DynamicRadioGroupModel,
-  DynamicSelectModel,
-  DynamicTextAreaModel
+  DynamicSelectModel
 } from '@ng-dynamic-forms/core';
 import { Location } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
@@ -23,7 +22,7 @@ import { RemoteData } from '../../../core/data/remote-data';
 import { Collection } from '../../../core/shared/collection.model';
 import { first, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
 import { getFirstSucceededRemoteData, getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { MetadataConfig } from '../../../core/shared/metadata-config.model';

src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html

@@ -3,10 +3,10 @@
     <div class="col-12" *ngVar="(itemRD$ | async) as itemRD">
       <ng-container *ngIf="itemRD?.hasSucceeded">
         <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: collection?.name } }}</h2>
-        <ds-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-item-metadata>
+        <ds-themed-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-themed-item-metadata>
         <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
       </ng-container>
-      <ds-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-loading>
+      <ds-themed-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-themed-loading>
       <ds-alert *ngIf="itemRD?.hasFailed" [type]="AlertTypeEnum.Error" [content]="'collection.edit.template.error' | translate"></ds-alert>
     </div>
   </div>

src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { EditItemTemplatePageComponent } from './edit-item-template-page.component';
+
+@Component({
+  selector: 'ds-themed-edit-item-template-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+/**
+ * Component for editing the item template of a collection
+ */
+export class ThemedEditItemTemplatePageComponent extends ThemedComponent<EditItemTemplatePageComponent> {
+  protected getComponentName(): string {
+    return 'EditItemTemplatePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/collection-page/edit-item-template-page/edit-item-template-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./edit-item-template-page.component');
+  }
+}

src/app/community-list-page/community-list-service.spec.ts

@@ -15,6 +15,8 @@ import { Collection } from '../core/shared/collection.model';
 import { PageInfo } from '../core/shared/page-info.model';
 import { FlatNode } from './flat-node.model';
 import { FindListOptions } from '../core/data/find-list-options.model';
+import { APP_CONFIG } from 'src/config/app-config.interface';
+import { environment } from 'src/environments/environment.test';
 
 describe('CommunityListService', () => {
   let store: StoreMock<AppState>;
@@ -191,13 +193,14 @@ describe('CommunityListService', () => {
     };
     TestBed.configureTestingModule({
       providers: [CommunityListService,
+        { provide: APP_CONFIG, useValue: environment },
         { provide: CollectionDataService, useValue: collectionDataServiceStub },
         { provide: CommunityDataService, useValue: communityDataServiceStub },
         { provide: Store, useValue: StoreMock },
       ],
     });
     store = TestBed.inject(Store as any);
-    service = new CommunityListService(communityDataServiceStub, collectionDataServiceStub, store);
+    service = new CommunityListService(environment, communityDataServiceStub, collectionDataServiceStub, store);
   });
 
   it('should create', inject([CommunityListService], (serviceIn: CommunityListService) => {

src/app/community-list-page/community-list-service.ts

@@ -1,5 +1,5 @@
 /* eslint-disable max-classes-per-file */
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { createSelector, Store } from '@ngrx/store';
 
 import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
@@ -23,6 +23,7 @@ import { followLink } from '../shared/utils/follow-link-config.model';
 import { FlatNode } from './flat-node.model';
 import { ShowMoreFlatNode } from './show-more-flat-node.model';
 import { FindListOptions } from '../core/data/find-list-options.model';
+import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
 
 // Helper method to combine an flatten an array of observables of flatNode arrays
 export const combineAndFlatten = (obsList: Observable<FlatNode[]>[]): Observable<FlatNode[]> =>
@@ -80,8 +81,6 @@ const communityListStateSelector = (state: AppState) => state.communityList;
 const expandedNodesSelector = createSelector(communityListStateSelector, (communityList: CommunityListState) => communityList.expandedNodes);
 const loadingNodeSelector = createSelector(communityListStateSelector, (communityList: CommunityListState) => communityList.loadingNode);
 
-export const MAX_COMCOLS_PER_PAGE = 20;
-
 /**
  * Service class for the community list, responsible for the creating of the flat list used by communityList dataSource
  *  and connection to the store to retrieve and save the state of the community list
@@ -89,8 +88,15 @@ export const MAX_COMCOLS_PER_PAGE = 20;
 @Injectable()
 export class CommunityListService {
 
-  constructor(private communityDataService: CommunityDataService, private collectionDataService: CollectionDataService,
-              private store: Store<any>) {
+  private pageSize: number;
+
+  constructor(
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
+    private communityDataService: CommunityDataService,
+    private collectionDataService: CollectionDataService,
+    private store: Store<any>
+  ) {
+    this.pageSize = appConfig.communityList.pageSize;
   }
 
   private configOnePage: FindListOptions = Object.assign(new FindListOptions(), {
@@ -145,7 +151,7 @@ export class CommunityListService {
   private getTopCommunities(options: FindListOptions): Observable<PaginatedList<Community>> {
     return this.communityDataService.findTop({
         currentPage: options.currentPage,
-        elementsPerPage: MAX_COMCOLS_PER_PAGE,
+        elementsPerPage: this.pageSize,
         sort: {
           field: options.sort.field,
           direction: options.sort.direction
@@ -216,7 +222,7 @@ export class CommunityListService {
       let subcoms = [];
       for (let i = 1; i <= currentCommunityPage; i++) {
         const nextSetOfSubcommunitiesPage = this.communityDataService.findByParent(community.uuid, {
-            elementsPerPage: MAX_COMCOLS_PER_PAGE,
+            elementsPerPage: this.pageSize,
             currentPage: i
           },
           followLink('subcommunities', { findListOptions: this.configOnePage }),
@@ -241,7 +247,7 @@ export class CommunityListService {
       let collections = [];
       for (let i = 1; i <= currentCollectionPage; i++) {
         const nextSetOfCollectionsPage = this.collectionDataService.findByParent(community.uuid, {
-          elementsPerPage: MAX_COMCOLS_PER_PAGE,
+          elementsPerPage: this.pageSize,
           currentPage: i
         })
           .pipe(

src/app/community-list-page/community-list/community-list.component.html

@@ -1,4 +1,4 @@
-<ds-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-loading"></ds-loading>
+<ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading>
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <!-- This is the tree node template for show more node -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
@@ -12,7 +12,7 @@
            class="btn btn-outline-primary btn-sm" role="button">
            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
         </a>
-        <ds-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-loading"></ds-loading>
+        <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
       </div>
     </div>
     <div class="text-muted" cdkTreeNodePadding>
@@ -57,7 +57,7 @@
         <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
               aria-hidden="true"></span>
       </button>
-      <ds-loading class="ds-loading"></ds-loading>
+      <ds-themed-loading class="ds-themed-loading"></ds-themed-loading>
     </div>
   </cdk-tree-node>
   <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->

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

@@ -10,8 +10,8 @@
           <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'Community Logo'">
           </ds-comcol-page-logo>
           <!-- Handle -->
-          <ds-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
-          </ds-comcol-page-handle>
+          <ds-themed-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
+          </ds-themed-comcol-page-handle>
           <!-- Introductory text -->
           <ds-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
           </ds-comcol-page-content>
@@ -25,12 +25,13 @@
         </div>
       </div>
       <section class="comcol-page-browse-section">
+
         <!-- Browse-By Links -->
         <ds-themed-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
         </ds-themed-comcol-page-browse-by>
 
-        <ds-community-page-sub-community-list [community]="communityPayload"></ds-community-page-sub-community-list>
-        <ds-community-page-sub-collection-list [community]="communityPayload"></ds-community-page-sub-collection-list>
+        <ds-themed-community-page-sub-community-list [community]="communityPayload"></ds-themed-community-page-sub-community-list>
+        <ds-themed-community-page-sub-collection-list [community]="communityPayload"></ds-themed-community-page-sub-collection-list>
       </section>
       <footer  *ngIf="communityPayload.copyrightText"  class="border-top my-5 pt-4">
         <!-- Copyright -->
@@ -41,5 +42,5 @@
   </div>
 
   <ds-error *ngIf="communityRD?.hasFailed" message="{{'error.community' | translate}}"></ds-error>
-  <ds-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-loading>
+  <ds-themed-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-themed-loading>
 </div>

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

@@ -13,10 +13,18 @@ import { StatisticsModule } from '../statistics/statistics.module';
 import { CommunityFormModule } from './community-form/community-form.module';
 import { ThemedCommunityPageComponent } from './themed-community-page.component';
 import { ComcolModule } from '../shared/comcol/comcol.module';
+import {
+  ThemedCommunityPageSubCommunityListComponent
+} from './sub-community-list/themed-community-page-sub-community-list.component';
+import {
+  ThemedCollectionPageSubCollectionListComponent
+} from './sub-collection-list/themed-community-page-sub-collection-list.component';
 
 const DECLARATIONS = [CommunityPageComponent,
   ThemedCommunityPageComponent,
+  ThemedCommunityPageSubCommunityListComponent,
   CommunityPageSubCollectionListComponent,
+  ThemedCollectionPageSubCollectionListComponent,
   CommunityPageSubCommunityListComponent,
   CreateCommunityPageComponent,
   DeleteCommunityPageComponent];