Merge remote-tracking branch 'origin/main' into CST-3782-fix-repeatable-fields

# Conflicts:
#	src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss

.github/workflows/build.yml

@@ -19,7 +19,7 @@ jobs:
     strategy:
       # Create a matrix of Node versions to test against (in parallel)
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [12.x, 14.x]
       # Do NOT exit immediately if one matrix job fails
       fail-fast: false
     # These are the actual CI steps to perform per job

README.md

@@ -13,7 +13,7 @@ You can find additional information on the DSpace 7 Angular UI on the [wiki](htt
 Quick start
 -----------
 
-**Ensure you're running [Node](https://nodejs.org) `v10.x` or `v12.x`, [npm](https://www.npmjs.com/) >= `v5.x` and [yarn](https://yarnpkg.com) >= `v1.x`**
+**Ensure you're running [Node](https://nodejs.org) `v12.x` or `v14.x`, [npm](https://www.npmjs.com/) >= `v5.x` and [yarn](https://yarnpkg.com) >= `v1.x`**
 
 ```bash
 # clone the repo
@@ -65,7 +65,7 @@ Requirements
 ------------
 
 -	[Node.js](https://nodejs.org) and [yarn](https://yarnpkg.com)
--	Ensure you're running node `v10.x` or `v12.x` and yarn >= `v1.x`
+-	Ensure you're running node `v12.x` or `v14.x` and yarn >= `v1.x`
 
 If you have [`nvm`](https://github.com/creationix/nvm#install-script) or [`nvm-windows`](https://github.com/coreybutler/nvm-windows) installed, which is highly recommended, you can run `nvm install --lts && nvm use` to install and start using the latest Node LTS.
 
@@ -339,7 +339,6 @@ dspace-angular
 ├── tslint.json                                         * TSLint (https://palantir.github.io/tslint/) configuration
 ├── typedoc.json                                        * TYPEDOC configuration
 ├── webpack                                             * Webpack (https://webpack.github.io/) config directory
-│   ├── helpers.js                                      *
 │   ├── webpack.aot.js                                  * Webpack (https://webpack.github.io/) config for AoT build
 │   ├── webpack.client.js                               * Webpack (https://webpack.github.io/) config for client build
 │   ├── webpack.common.js                               *

angular.json

@@ -17,6 +17,7 @@
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "extractCss": true,
             "preserveSymlinks": true,
             "customWebpackConfig": {
               "path": "./webpack/webpack.browser.ts",
@@ -46,7 +47,16 @@
               "src/robots.txt"
             ],
             "styles": [
-              "src/styles.scss"
+              {
+                "input": "src/styles/base-theme.scss",
+                "inject": false,
+                "bundleName": "base-theme"
+              },
+              {
+                "input": "src/themes/custom/styles/theme.scss",
+                "inject": false,
+                "bundleName": "custom-theme"
+              }
             ],
             "scripts": []
           },
@@ -116,7 +126,11 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              {
+                "input": "src/styles/base-theme.scss",
+                "inject": false,
+                "bundleName": "base-theme"
+              }
             ],
             "scripts": []
           }

package.json

@@ -20,16 +20,17 @@
     "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
     "start:dev": "npm-run-all --parallel config:dev:watch serve",
     "start:prod": "yarn run build:prod && yarn run serve:ssr",
+    "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
     "build": "ng build",
+    "build:stats": "ng build --stats-json",
     "build:prod": "yarn run build:ssr",
     "build:ssr": "yarn run build:client-and-server-bundles && yarn run compile:server",
-    "ng-high-memory": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng",
-    "build:client-and-server-bundles": "npm run ng-high-memory -- build --prod && npm run ng-high-memory -- run dspace-angular:server:production --bundleDependencies true",
+    "build:client-and-server-bundles": "ng build --prod && ng run dspace-angular:server:production --bundleDependencies true",
     "test:watch": "npm-run-all --parallel config:test:watch test",
-    "test": "npm run ng-high-memory -- test --sourceMap=true --watch=true",
-    "test:headless": "npm run ng-high-memory -- test --watch=false --sourceMap=true --browsers=ChromeHeadless --code-coverage",
+    "test": "ng test --sourceMap=true --watch=true",
+    "test:headless": "ng test --watch=false --sourceMap=true --browsers=ChromeHeadless --code-coverage",
     "lint": "ng lint",
-    "lint-fix": "npm run ng-high-memory -- lint --fix=true",
+    "lint-fix": "ng lint --fix=true",
     "e2e": "ng e2e",
     "e2e:ci": "ng e2e --protractor-config=./e2e/protractor-ci.conf.js",
     "compile:server": "webpack --config webpack.server.config.js --progress --color",
@@ -143,7 +144,7 @@
     "@types/node": "^14.14.9",
     "codelyzer": "^6.0.1",
     "compression-webpack-plugin": "^3.0.1",
-    "copy-webpack-plugin": "^5.1.1",
+    "copy-webpack-plugin": "^6.4.1",
     "css-loader": "3.4.0",
     "cssnano": "^4.1.10",
     "deep-freeze": "0.0.1",
@@ -180,7 +181,7 @@
     "tslint": "^6.1.3",
     "typescript": "~4.0.5",
     "webpack": "^4.44.2",
-    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.2.0",
     "webpack-node-externals": "1.7.2"
   }

postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
     require('postcss-import')(),
-    require('postcss-cssnext')(),
+    require('postcss-preset-env')(),
     require('postcss-apply')(),
     require('postcss-responsive-type')()
   ]

scripts/sync-build-dir.js

@@ -1,22 +0,0 @@
-const syncBuildDir = require('copyfiles');
-const path = require('path');
-const {
-  projectRoot,
-  theme,
-  themePath,
-} = require('../webpack/helpers');
-
-const projectDepth = projectRoot('./').split(path.sep).length;
-
-let callback;
-
-if (theme !== null && theme !== undefined) {
-  callback = () => {
-    syncBuildDir([path.join(themePath, '**/*'), 'build'], { up: projectDepth + 2 }, () => {})
-  }
-}
-else {
-  callback = () => {};
-}
-
-syncBuildDir([projectRoot('src/**/*'), 'build'], { up: projectDepth + 1 }, callback);

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

@@ -16,6 +16,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
 import { ItemAdminSearchResultGridElementComponent } from './item-admin-search-result-grid-element.component';
 import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
+import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 
 describe('ItemAdminSearchResultGridElementComponent', () => {
   let component: ItemAdminSearchResultGridElementComponent;
@@ -29,6 +31,8 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
     }
   };
 
+  const mockThemeService = getMockThemeService();
+
   function init() {
     id = '780b2588-bda5-4112-a1cd-0b15000a5339';
     searchResult = new ItemSearchResult();
@@ -50,6 +54,7 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
         providers: [
           { provide: TruncatableService, useValue: mockTruncatableService },
           { provide: BitstreamDataService, useValue: mockBitstreamDataService },
+          { provide: ThemeService, useValue: mockThemeService },
         ],
         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.ts

@@ -12,6 +12,7 @@ import { TruncatableService } from '../../../../../shared/truncatable/truncatabl
 import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
 import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
 import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 
 @listableObjectComponent(ItemSearchResult, ViewMode.GridElement, Context.AdminSearch)
 @Component({
@@ -29,6 +30,7 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
 
   constructor(protected truncatableService: TruncatableService,
               protected bitstreamDataService: BitstreamDataService,
+              private themeService: ThemeService,
               private componentFactoryResolver: ComponentFactoryResolver
   ) {
     super(truncatableService, bitstreamDataService);
@@ -63,6 +65,6 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
    * @returns {GenericConstructor<Component>}
    */
   private getComponent(): GenericConstructor<Component> {
-    return getListableObjectComponent(this.object.getRenderTypes(), ViewMode.GridElement, undefined);
+    return getListableObjectComponent(this.object.getRenderTypes(), ViewMode.GridElement, undefined, this.themeService.getThemeName());
   }
 }

src/app/+admin/admin-sidebar/admin-sidebar.component.scss

@@ -1,12 +1,12 @@
-$icon-z-index: 10;
-
 :host {
+  --ds-icon-z-index: 10;
+
     left: 0;
     top: 0;
     height: 100vh;
     flex: 1 1 auto;
     nav {
-        background-color: $admin-sidebar-bg;
+        background-color: var(--ds-admin-sidebar-bg);
         height: 100%;
         flex-direction: column;
         > div {
@@ -19,12 +19,12 @@ $icon-z-index: 10;
         }
 
         &.inactive ::ng-deep .sidebar-collapsible {
-            margin-left: -#{$sidebar-items-width};
+            margin-left: calc(-1 * var(--ds-sidebar-items-width));
         }
 
         .navbar-nav {
             .admin-menu-header {
-                background-color: $admin-sidebar-header-bg;
+                background-color: var(--ds-admin-sidebar-header-bg);
                 .logo-wrapper {
                     img {
                         height: 20px;
@@ -43,29 +43,29 @@ $icon-z-index: 10;
                 .sidebar-section {
                     display: flex;
                     align-content: stretch;
-                    background-color: $admin-sidebar-bg;
+                    background-color: var(--ds-admin-sidebar-bg);
                     .nav-item {
-                        padding-top: $spacer;
-                        padding-bottom: $spacer;
+                        padding-top: var(--bs-spacer);
+                        padding-bottom: var(--bs-spacer);
                     }
                     .shortcut-icon {
-                        padding-left: $icon-padding;
-                        padding-right: $icon-padding;
+                        padding-left: var(--ds-icon-padding);
+                        padding-right: var(--ds-icon-padding);
                     }
                     .shortcut-icon, .icon-wrapper {
                         background-color: inherit;
-                        z-index: $icon-z-index;
+                        z-index: var(--ds-icon-z-index);
                     }
                     .sidebar-collapsible {
-                        width: $sidebar-items-width;
+                        width: var(--ds-sidebar-items-width);
                         position: relative;
                         a {
-                            padding-right: $spacer;
+                            padding-right: var(--bs-spacer);
                             width: 100%;
                         }
                     }
                     &.active > .sidebar-collapsible > .nav-link {
-                        color: $navbar-dark-active-color;
+                        color: var(--bs-navbar-dark-active-color);
                     }
                 }
             }

src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss

@@ -1,13 +1,13 @@
 :host ::ng-deep {
     .fa-chevron-right {
-        padding-left: $spacer/2;
+        padding-left: calc(var(--bs-spacer) / 2);
         font-size: 0.5rem;
         line-height: 3;
     }
 
     .sidebar-sub-level-items {
         list-style: disc;
-        color: $navbar-dark-color;
+        color: var(--bs-navbar-dark-color);
         overflow: hidden;
 
     }

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

@@ -19,6 +19,8 @@ import { BitstreamDataService } from '../../../../../core/data/bitstream-data.se
 import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
 import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
 import { of as observableOf } from 'rxjs';
+import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 
 describe('WorkflowItemAdminWorkflowGridElementComponent', () => {
   let component: WorkflowItemSearchResultAdminWorkflowGridElementComponent;
@@ -28,6 +30,7 @@ describe('WorkflowItemAdminWorkflowGridElementComponent', () => {
   let itemRD$;
   let linkService;
   let object;
+  let themeService;
 
   function init() {
     itemRD$ = createSuccessfulRemoteDataObject$(new Item());
@@ -37,6 +40,7 @@ describe('WorkflowItemAdminWorkflowGridElementComponent', () => {
     wfi.item = itemRD$;
     object.indexableObject = wfi;
     linkService = getMockLinkService();
+    themeService = getMockThemeService();
   }
 
   beforeEach(waitForAsync(() => {
@@ -51,6 +55,7 @@ describe('WorkflowItemAdminWorkflowGridElementComponent', () => {
         ],
         providers: [
           { provide: LinkService, useValue: linkService },
+          { provide: ThemeService, useValue: themeService },
           {
             provide: TruncatableService, useValue: {
               isCollapsed: () => observableOf(true),

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

@@ -1,7 +1,10 @@
 import { Component, ComponentFactoryResolver, ElementRef, ViewChild } from '@angular/core';
 import { Item } from '../../../../../core/shared/item.model';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { getListableObjectComponent, listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import {
+  getListableObjectComponent,
+  listableObjectComponent
+} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { Context } from '../../../../../core/shared/context.model';
 import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
@@ -13,9 +16,13 @@ import { Observable } from 'rxjs';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 import { RemoteData } from '../../../../../core/data/remote-data';
-import { getAllSucceededRemoteData, getRemoteDataPayload } from '../../../../../core/shared/operators';
+import {
+  getAllSucceededRemoteData,
+  getRemoteDataPayload
+} from '../../../../../core/shared/operators';
 import { take } from 'rxjs/operators';
 import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 
 @listableObjectComponent(WorkflowItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
 @Component({
@@ -51,6 +58,7 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
     private componentFactoryResolver: ComponentFactoryResolver,
     private linkService: LinkService,
     protected truncatableService: TruncatableService,
+    private themeService: ThemeService,
     protected bitstreamDataService: BitstreamDataService
   ) {
     super(truncatableService, bitstreamDataService);
@@ -92,7 +100,7 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
    * @returns {GenericConstructor<Component>}
    */
   private getComponent(item: Item): GenericConstructor<Component> {
-    return getListableObjectComponent(item.getRenderTypes(), ViewMode.GridElement, undefined);
+    return getListableObjectComponent(item.getRenderTypes(), ViewMode.GridElement, undefined, this.themeService.getThemeName());
   }
 
 }

src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.scss

@@ -2,7 +2,7 @@
   ::ng-deep {
     .switch {
       position: absolute;
-      top: $spacer*2.5;
+      top: calc(var(--bs-spacer) * 2.5);
     }
   }
 }

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

@@ -6,17 +6,21 @@ describe('CollectionPageResolver', () => {
   describe('resolve', () => {
     let resolver: CollectionPageResolver;
     let collectionService: any;
+    let store: any;
     const uuid = '1234-65487-12354-1235';
 
     beforeEach(() => {
       collectionService = {
         findById: (id: string) => createSuccessfulRemoteDataObject$({ id })
       };
-      resolver = new CollectionPageResolver(collectionService);
+      store = jasmine.createSpyObj('store', {
+        dispatch: {},
+      });
+      resolver = new CollectionPageResolver(collectionService, store);
     });
 
     it('should resolve a collection with the correct id', (done) => {
-      resolver.resolve({ params: { id: uuid } } as any, undefined)
+      resolver.resolve({ params: { id: uuid } } as any, { url: 'current-url' } as any)
         .pipe(first())
         .subscribe(
           (resolved) => {

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

@@ -4,15 +4,31 @@ import { Collection } from '../core/shared/collection.model';
 import { Observable } from 'rxjs';
 import { CollectionDataService } from '../core/data/collection-data.service';
 import { RemoteData } from '../core/data/remote-data';
-import { followLink } from '../shared/utils/follow-link-config.model';
+import { followLink, FollowLinkConfig } from '../shared/utils/follow-link-config.model';
 import { getFirstCompletedRemoteData } from '../core/shared/operators';
+import { Store } from '@ngrx/store';
+import { ResolvedAction } from '../core/resolving/resolver.actions';
+
+/**
+ * The self links defined in this list are expected to be requested somewhere in the near future
+ * Requesting them as embeds will limit the number of requests
+ */
+export const COLLECTION_PAGE_LINKS_TO_FOLLOW: FollowLinkConfig<Collection>[] = [
+  followLink('parentCommunity', undefined, true, true, true,
+    followLink('parentCommunity')
+  ),
+  followLink('logo')
+];
 
 /**
  * This class represents a resolver that requests a specific collection before the route is activated
  */
 @Injectable()
 export class CollectionPageResolver implements Resolve<RemoteData<Collection>> {
-  constructor(private collectionService: CollectionDataService) {
+  constructor(
+    private collectionService: CollectionDataService,
+    private store: Store<any>
+  ) {
   }
 
   /**
@@ -23,8 +39,19 @@ export class CollectionPageResolver implements Resolve<RemoteData<Collection>> {
    * or an error if something went wrong
    */
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Collection>> {
-    return this.collectionService.findById(route.params.id, true, false, followLink('logo')).pipe(
+    const collectionRD$ = this.collectionService.findById(
+      route.params.id,
+      true,
+      false,
+      ...COLLECTION_PAGE_LINKS_TO_FOLLOW
+    ).pipe(
       getFirstCompletedRemoteData()
     );
+
+    collectionRD$.subscribe((collectionRD: RemoteData<Collection>) => {
+      this.store.dispatch(new ResolvedAction(state.url, collectionRD.payload));
+    });
+
+    return collectionRD$;
   }
 }

src/app/+community-page/community-page.resolver.spec.ts

@@ -6,17 +6,21 @@ describe('CommunityPageResolver', () => {
   describe('resolve', () => {
     let resolver: CommunityPageResolver;
     let communityService: any;
+    let store: any;
     const uuid = '1234-65487-12354-1235';
 
     beforeEach(() => {
       communityService = {
         findById: (id: string) => createSuccessfulRemoteDataObject$({ id })
       };
-      resolver = new CommunityPageResolver(communityService);
+      store = jasmine.createSpyObj('store', {
+        dispatch: {},
+      });
+      resolver = new CommunityPageResolver(communityService, store);
     });
 
     it('should resolve a community with the correct id', (done) => {
-      resolver.resolve({ params: { id: uuid } } as any, undefined)
+      resolver.resolve({ params: { id: uuid } } as any, { url: 'current-url' } as any)
         .pipe(first())
         .subscribe(
           (resolved) => {

src/app/+community-page/community-page.resolver.ts

@@ -4,15 +4,31 @@ import { Observable } from 'rxjs';
 import { RemoteData } from '../core/data/remote-data';
 import { Community } from '../core/shared/community.model';
 import { CommunityDataService } from '../core/data/community-data.service';
-import { followLink } from '../shared/utils/follow-link-config.model';
+import { followLink, FollowLinkConfig } from '../shared/utils/follow-link-config.model';
 import { getFirstCompletedRemoteData } from '../core/shared/operators';
+import { ResolvedAction } from '../core/resolving/resolver.actions';
+import { Store } from '@ngrx/store';
+
+/**
+ * The self links defined in this list are expected to be requested somewhere in the near future
+ * Requesting them as embeds will limit the number of requests
+ */
+export const COMMUNITY_PAGE_LINKS_TO_FOLLOW: FollowLinkConfig<Community>[] = [
+  followLink('logo'),
+  followLink('subcommunities'),
+  followLink('collections'),
+  followLink('parentCommunity')
+];
 
 /**
  * This class represents a resolver that requests a specific community before the route is activated
  */
 @Injectable()
 export class CommunityPageResolver implements Resolve<RemoteData<Community>> {
-  constructor(private communityService: CommunityDataService) {
+  constructor(
+    private communityService: CommunityDataService,
+    private store: Store<any>
+  ) {
   }
 
   /**
@@ -23,15 +39,19 @@ export class CommunityPageResolver implements Resolve<RemoteData<Community>> {
    * or an error if something went wrong
    */
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Community>> {
-    return this.communityService.findById(
+    const communityRD$ = this.communityService.findById(
       route.params.id,
       true,
       false,
-      followLink('logo'),
-      followLink('subcommunities'),
-      followLink('collections')
+      ...COMMUNITY_PAGE_LINKS_TO_FOLLOW
     ).pipe(
       getFirstCompletedRemoteData(),
     );
+
+    communityRD$.subscribe((communityRD: RemoteData<Community>) => {
+      this.store.dispatch(new ResolvedAction(state.url, communityRD.payload));
+    });
+
+    return communityRD$;
   }
 }

src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts

@@ -18,11 +18,14 @@ import { PageInfo } from '../../core/shared/page-info.model';
 import { HostWindowService } from '../../shared/host-window.service';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 describe('CommunityPageSubCollectionList Component', () => {
   let comp: CommunityPageSubCollectionListComponent;
   let fixture: ComponentFixture<CommunityPageSubCollectionListComponent>;
   let collectionDataServiceStub: any;
+  let themeService;
   let subCollList = [];
 
   const collections = [Object.assign(new Community(), {
@@ -110,6 +113,8 @@ describe('CommunityPageSubCollectionList Component', () => {
     }
   };
 
+  themeService = getMockThemeService();
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -124,6 +129,7 @@ describe('CommunityPageSubCollectionList Component', () => {
         { provide: CollectionDataService, useValue: collectionDataServiceStub },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
         { provide: SelectableListService, useValue: {} },
+        { provide: ThemeService, useValue: themeService },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts

@@ -18,11 +18,14 @@ import { HostWindowService } from '../../shared/host-window.service';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { CommunityDataService } from '../../core/data/community-data.service';
 import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 describe('CommunityPageSubCommunityListComponent Component', () => {
   let comp: CommunityPageSubCommunityListComponent;
   let fixture: ComponentFixture<CommunityPageSubCommunityListComponent>;
   let communityDataServiceStub: any;
+  let themeService;
   let subCommList = [];
 
   const subcommunities = [Object.assign(new Community(), {
@@ -111,6 +114,8 @@ describe('CommunityPageSubCommunityListComponent Component', () => {
     }
   };
 
+  themeService = getMockThemeService();
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -125,6 +130,7 @@ describe('CommunityPageSubCommunityListComponent Component', () => {
         { provide: CommunityDataService, useValue: communityDataServiceStub },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
         { provide: SelectableListService, useValue: {} },
+        { provide: ThemeService, useValue: themeService },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

src/app/+home-page/home-news/home-news.component.scss

@@ -1,7 +1,7 @@
 :host {
     display: block;
-    margin-top: -$content-spacing;
-    margin-bottom: -$content-spacing;
+    margin-top: calc(-1 * var(--ds-content-spacing));
+    margin-bottom: calc(-1 * var(--ds-content-spacing));
 }
 
 .display-3 {

src/app/+home-page/home-news/home-news.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, } from '@angular/core';
 
 @Component({
   selector: 'ds-home-news',
@@ -10,5 +10,4 @@ import { Component } from '@angular/core';
  * Component to render the news section on the home page
  */
 export class HomeNewsComponent {
-
 }

src/app/+home-page/home-news/themed-home-news.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { HomeNewsComponent } from './home-news.component';
+
+@Component({
+  selector: 'ds-themed-home-news',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class ThemedHomeNewsComponent extends ThemedComponent<HomeNewsComponent> {
+  protected getComponentName(): string {
+    return 'HomeNewsComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+home-page/home-news/home-news.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./home-news.component`);
+  }
+
+}

src/app/+home-page/home-page-routing.module.ts

@@ -1,17 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { HomePageComponent } from './home-page.component';
 import { HomePageResolver } from './home-page.resolver';
 import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
+import { ThemedHomePageComponent } from './themed-home-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: HomePageComponent,
+        component: ThemedHomePageComponent,
         pathMatch: 'full',
         data: {
           title: 'home.title',

src/app/+home-page/home-page.component.html

@@ -1,4 +1,4 @@
-<ds-home-news></ds-home-news>
+<ds-themed-home-news></ds-themed-home-news>
 <div class="container">
   <ng-container *ngIf="(site$ | async) as site">
     <ds-view-tracker [object]="site"></ds-view-tracker>

src/app/+home-page/home-page.module.ts

@@ -7,6 +7,16 @@ import { HomePageRoutingModule } from './home-page-routing.module';
 import { HomePageComponent } from './home-page.component';
 import { TopLevelCommunityListComponent } from './top-level-community-list/top-level-community-list.component';
 import { StatisticsModule } from '../statistics/statistics.module';
+import { ThemedHomeNewsComponent } from './home-news/themed-home-news.component';
+import { ThemedHomePageComponent } from './themed-home-page.component';
+
+const DECLARATIONS = [
+  HomePageComponent,
+  ThemedHomePageComponent,
+  TopLevelCommunityListComponent,
+  ThemedHomeNewsComponent,
+  HomeNewsComponent,
+];
 
 @NgModule({
   imports: [
@@ -16,10 +26,11 @@ import { StatisticsModule } from '../statistics/statistics.module';
     StatisticsModule.forRoot()
   ],
   declarations: [
-    HomePageComponent,
-    TopLevelCommunityListComponent,
-    HomeNewsComponent,
-  ]
+    ...DECLARATIONS,
+  ],
+  exports: [
+    ...DECLARATIONS,
+  ],
 })
 export class HomePageModule {
 

src/app/+home-page/themed-home-page.component.ts

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

src/app/+home-page/top-level-community-list/top-level-community-list.component.spec.ts

@@ -18,11 +18,14 @@ import { HostWindowService } from '../../shared/host-window.service';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { CommunityDataService } from '../../core/data/community-data.service';
 import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 describe('TopLevelCommunityList Component', () => {
   let comp: TopLevelCommunityListComponent;
   let fixture: ComponentFixture<TopLevelCommunityListComponent>;
   let communityDataServiceStub: any;
+  let themeService;
 
   const topCommList = [Object.assign(new Community(), {
     id: '123456789-1',
@@ -101,6 +104,8 @@ describe('TopLevelCommunityList Component', () => {
     }
   };
 
+  themeService = getMockThemeService();
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -115,6 +120,7 @@ describe('TopLevelCommunityList Component', () => {
         { provide: CommunityDataService, useValue: communityDataServiceStub },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
         { provide: SelectableListService, useValue: {} },
+        { provide: ThemeService, useValue: themeService },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

src/app/+item-page/edit-item-page/edit-item-page.component.scss

@@ -1,3 +1,3 @@
 .btn {
-    min-width: $edit-item-button-min-width;
+    min-width: var(--ds-edit-item-button-min-width);
 }

src/app/+item-page/edit-item-page/edit-item-page.routing.module.ts

@@ -74,18 +74,18 @@ import { ItemPageWithdrawGuard } from './item-page-withdraw.guard';
                 component: ItemRelationshipsComponent,
                 data: { title: 'item.edit.tabs.relationships.title', showBreadcrumbs: true }
               },
+              /* TODO - uncomment & fix when view page exists
               {
                 path: 'view',
-                /* TODO - change when view page exists */
                 component: ItemBitstreamsComponent,
                 data: { title: 'item.edit.tabs.view.title', showBreadcrumbs: true }
-              },
+              }, */
+              /* TODO - uncomment & fix when curate page exists
               {
                 path: 'curate',
-                /* TODO - change when curate page exists */
                 component: ItemBitstreamsComponent,
                 data: { title: 'item.edit.tabs.curate.title', showBreadcrumbs: true }
-              },
+              }, */
               {
                 path: 'versionhistory',
                 component: ItemVersionHistoryComponent,

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss

@@ -1,19 +1,19 @@
 .header-row {
-  color: $table-dark-color;
-  background-color: $table-dark-bg;
-  border-color: $table-dark-border-color;
+  color: var(--bs-table-dark-color);
+  background-color: var(--bs-table-dark-bg);
+  border-color: var(--bs-table-dark-border-color);
 }
 
 .bundle-row {
-  color: $table-head-color;
-  background-color: $table-head-bg;
-  border-color: $table-border-color;
+  color: var(--bs-table-head-color);
+  background-color: var(--bs-table-head-bg);
+  border-color: var(--bs-table-border-color);
 }
 
 .row-element {
   padding: 12px;
   padding: 0.75em;
-  border-bottom: $table-border-width solid $table-border-color;
+  border-bottom: var(--bs-table-border-width) solid var(--bs-table-border-color);
 }
 
 .drag-handle {

src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss

@@ -1,13 +1,13 @@
 .btn[disabled] {
-    color: $gray-600;
-    border-color: $gray-600;
+    color: var(--bs-gray-600);
+    border-color: var(--bs-gray-600);
     z-index: 0; // prevent border colors jumping on hover
 }
 
 .metadata-field {
-    width: $edit-item-metadata-field-width;
+    width: var(--ds-edit-item-metadata-field-width);
 }
 
 .language-field {
-    width: $edit-item-language-field-width;
+    width: var(--ds-edit-item-language-field-width);
 }

src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss

@@ -1,19 +1,19 @@
 .button-row {
     .btn {
-        margin-right: 0.5 * $spacer;
+        margin-right: calc(0.5 * var(--bs-spacer));
 
         &:last-child {
             margin-right: 0;
         }
 
         @media screen and (min-width: map-get($grid-breakpoints, sm)) {
-            min-width: $edit-item-button-min-width;
+            min-width: var(--ds-edit-item-button-min-width);
         }
     }
 
     &.top .btn {
-        margin-top: $spacer/2;
-        margin-bottom: $spacer/2;
+        margin-top: calc(var(--bs-spacer) / 2);
+        margin-bottom: calc(var(--bs-spacer) / 2);
     }
 
 

src/app/+item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.scss

@@ -1,10 +1,10 @@
 .relationship-row:not(.alert) {
-  padding: $alert-padding-y 0;
+  padding: var(--bs-alert-padding-y) 0;
 }
 
 .relationship-row.alert {
-  margin-left: -$alert-padding-x;
-  margin-right: -$alert-padding-x;
+  margin-left: calc(-1 * var(--bs-alert-padding-x));
+  margin-right: calc(-1 * var(--bs-alert-padding-x));
   margin-top: -1px;
   margin-bottom: -1px;
 }

src/app/+item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.scss

@@ -1,6 +1,6 @@
 .btn[disabled] {
-  color: $gray-600;
-  border-color: $gray-600;
+  color: var(--bs-gray-600);
+  border-color: var(--bs-gray-600);
   z-index: 0; // prevent border colors jumping on hover
 }
 

src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.scss

@@ -1,19 +1,19 @@
 .button-row {
   .btn {
-    margin-right: 0.5 * $spacer;
+    margin-right: calc(0.5 * var(--bs-spacer));
 
     &:last-child {
       margin-right: 0;
     }
 
     @media screen and (min-width: map-get($grid-breakpoints, sm)) {
-      min-width: $edit-item-button-min-width;
+      min-width: var(--ds-edit-item-button-min-width);
     }
   }
 
   &.top .btn {
-    margin-top: $spacer/2;
-    margin-bottom: $spacer/2;
+    margin-top: calc(var(--bs-spacer) / 2);
+    margin-bottom: calc(var(--bs-spacer) / 2);
   }
 
 

src/app/+item-page/item-page.module.ts

@@ -32,6 +32,26 @@ const ENTRY_COMPONENTS = [
   UntypedItemComponent
 ];
 
+const DECLARATIONS = [
+  ItemPageComponent,
+  FullItemPageComponent,
+  MetadataUriValuesComponent,
+  ItemPageAuthorFieldComponent,
+  ItemPageDateFieldComponent,
+  ItemPageAbstractFieldComponent,
+  ItemPageUriFieldComponent,
+  ItemPageTitleFieldComponent,
+  ItemPageFieldComponent,
+  FileSectionComponent,
+  CollectionsComponent,
+  FullFileSectionComponent,
+  PublicationComponent,
+  UntypedItemComponent,
+  ItemComponent,
+  UploadBitstreamComponent,
+  AbstractIncrementalListComponent,
+];
+
 @NgModule({
   imports: [
     CommonModule,
@@ -43,23 +63,10 @@ const ENTRY_COMPONENTS = [
     ResearchEntitiesModule.withEntryComponents()
   ],
   declarations: [
-    ItemPageComponent,
-    FullItemPageComponent,
-    MetadataUriValuesComponent,
-    ItemPageAuthorFieldComponent,
-    ItemPageDateFieldComponent,
-    ItemPageAbstractFieldComponent,
-    ItemPageUriFieldComponent,
-    ItemPageTitleFieldComponent,
-    ItemPageFieldComponent,
-    FileSectionComponent,
-    CollectionsComponent,
-    FullFileSectionComponent,
-    PublicationComponent,
-    UntypedItemComponent,
-    ItemComponent,
-    UploadBitstreamComponent,
-    AbstractIncrementalListComponent,
+    ...DECLARATIONS
+  ],
+  exports: [
+    ...DECLARATIONS
   ]
 })
 export class ItemPageModule {

src/app/+item-page/item-page.resolver.ts

@@ -7,9 +7,18 @@ import { Item } from '../core/shared/item.model';
 import { followLink, FollowLinkConfig } from '../shared/utils/follow-link-config.model';
 import { FindListOptions } from '../core/data/request.models';
 import { getFirstCompletedRemoteData } from '../core/shared/operators';
+import { Store } from '@ngrx/store';
+import { ResolvedAction } from '../core/resolving/resolver.actions';
 
+/**
+ * The self links defined in this list are expected to be requested somewhere in the near future
+ * Requesting them as embeds will limit the number of requests
+ */
 export const ITEM_PAGE_LINKS_TO_FOLLOW: FollowLinkConfig<Item>[] = [
-  followLink('owningCollection'),
+  followLink('owningCollection', undefined, true, true, true,
+    followLink('parentCommunity', undefined, true, true, true,
+      followLink('parentCommunity'))
+  ),
   followLink('bundles', new FindListOptions(), true, true, true, followLink('bitstreams')),
   followLink('relationships'),
   followLink('version', undefined, true, true, true, followLink('versionhistory')),
@@ -20,7 +29,10 @@ export const ITEM_PAGE_LINKS_TO_FOLLOW: FollowLinkConfig<Item>[] = [
  */
 @Injectable()
 export class ItemPageResolver implements Resolve<RemoteData<Item>> {
-  constructor(private itemService: ItemDataService) {
+  constructor(
+    private itemService: ItemDataService,
+    private store: Store<any>
+  ) {
   }
 
   /**
@@ -31,12 +43,18 @@ export class ItemPageResolver implements Resolve<RemoteData<Item>> {
    * or an error if something went wrong
    */
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Item>> {
-    return this.itemService.findById(route.params.id,
+    const itemRD$ = this.itemService.findById(route.params.id,
       true,
       false,
       ...ITEM_PAGE_LINKS_TO_FOLLOW
     ).pipe(
       getFirstCompletedRemoteData(),
     );
+
+    itemRD$.subscribe((itemRD: RemoteData<Item>) => {
+      this.store.dispatch(new ResolvedAction(state.url, itemRD.payload));
+    });
+
+    return itemRD$;
   }
 }

src/app/+login-page/login-page.component.scss

@@ -1,4 +1,4 @@
 .login-logo {
-  height: $login-logo-height;
-  width: $login-logo-width;
+  height: var(--ds-login-logo-height);
+  width: var(--ds-login-logo-width);
 }

src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts

@@ -21,6 +21,10 @@ import { UploaderService } from '../../shared/uploader/uploader.service';
 import { HostWindowService } from '../../shared/host-window.service';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { UploaderComponent } from '../../shared/uploader/uploader.component';
+import { HttpXsrfTokenExtractor } from '@angular/common/http';
+import { CookieService } from '../../core/services/cookie.service';
+import { CookieServiceMock } from '../../shared/mocks/cookie.service.mock';
+import { HttpXsrfTokenExtractorMock } from '../../shared/mocks/http-xsrf-token-extractor.mock';
 
 describe('MyDSpaceNewSubmissionComponent test', () => {
 
@@ -55,6 +59,8 @@ describe('MyDSpaceNewSubmissionComponent test', () => {
         ChangeDetectorRef,
         MyDSpaceNewSubmissionComponent,
         UploaderService,
+        { provide: HttpXsrfTokenExtractor, useValue: new HttpXsrfTokenExtractorMock('mock-token') },
+        { provide: CookieService, useValue: new CookieServiceMock() },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/+my-dspace-page/my-dspace-page.component.html

@@ -6,6 +6,7 @@
                          [configurationList]="(configurationList$ | async)"
                          [resultCount]="(resultsRD$ | async)?.payload.totalElements"
                          [viewModeList]="viewModeList"
+                         [refreshFilters]="refreshFilters.asObservable()"
                          [inPlaceSearch]="inPlaceSearch"></ds-search-sidebar>
       <div class="col-12 col-md-9">
           <ds-search-form id="search-form"
@@ -26,6 +27,7 @@
                                      [resultCount]="(resultsRD$ | async)?.payload.totalElements"
                                      (toggleSidebar)="closeSidebar()"
                                      [ngClass]="{'active': !(isSidebarCollapsed() | async)}"
+                                     [refreshFilters]="refreshFilters.asObservable()"
                                      [inPlaceSearch]="inPlaceSearch">
                   </ds-search-sidebar>
                   <div id="search-content" class="col-12">
@@ -39,7 +41,8 @@
                       </div>
                       <ds-my-dspace-results [searchResults]="resultsRD$ | async"
                                             [searchConfig]="searchOptions$ | async"
-                                            [context]="context$ | async"></ds-my-dspace-results>
+                                            [context]="context$ | async"
+                                            (contentChange)="onResultsContentChange()"></ds-my-dspace-results>
                   </div>
               </div>
           </div>

src/app/+my-dspace-page/my-dspace-page.component.ts

@@ -7,7 +7,7 @@ import {
   OnInit
 } from '@angular/core';
 
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
 import { map, switchMap, tap, } from 'rxjs/operators';
 
 import { PaginatedList } from '../core/data/paginated-list.model';
@@ -101,6 +101,11 @@ export class MyDSpacePageComponent implements OnInit {
    */
   context$: Observable<Context>;
 
+  /**
+   * Emit an event every time search sidebars must refresh their contents.
+   */
+  refreshFilters: Subject<any> = new Subject<any>();
+
   constructor(private service: SearchService,
               private sidebarService: SidebarService,
               private windowService: HostWindowService,
@@ -148,6 +153,14 @@ export class MyDSpacePageComponent implements OnInit {
 
   }
 
+  /**
+   * Handle the contentChange event from within the my dspace content.
+   * Notify search sidebars to refresh their content.
+   */
+  onResultsContentChange() {
+    this.refreshFilters.next();
+  }
+
   /**
    * Set the sidebar to a collapsed state
    */
@@ -184,5 +197,6 @@ export class MyDSpacePageComponent implements OnInit {
     if (hasValue(this.sub)) {
       this.sub.unsubscribe();
     }
+    this.refreshFilters.complete();
   }
 }

src/app/+my-dspace-page/my-dspace-results/my-dspace-results.component.html

@@ -5,7 +5,8 @@
     [sortConfig]="searchConfig.sort"
     [objects]="searchResults"
     [hideGear]="true"
-    [context]="context">
+    [context]="context"
+    (contentChange)="contentChange.emit()">
   </ds-viewable-collection>
 </div>
 <ds-loading *ngIf="isLoading()" message="{{'loading.mydspace-results' | translate}}"></ds-loading>

src/app/+my-dspace-page/my-dspace-results/my-dspace-results.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
@@ -41,6 +41,12 @@ export class MyDSpaceResultsComponent {
    * The current context for the search results
    */
   @Input() context: Context;
+
+  /**
+   * Emit when one of the results has changed.
+   */
+  @Output() contentChange = new EventEmitter<any>();
+
   /**
    * A boolean representing if search results entry are separated by a line
    */

src/app/+my-dspace-page/my-dspace-search.module.ts

@@ -14,12 +14,16 @@ import { ClaimedTaskSearchResultDetailElementComponent } from '../shared/object-
 import { ItemSearchResultListElementSubmissionComponent } from '../shared/object-list/my-dspace-result-list-element/item-search-result/item-search-result-list-element-submission.component';
 import { WorkflowItemSearchResultListElementComponent } from '../shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component';
 import { PoolSearchResultDetailElementComponent } from '../shared/object-detail/my-dspace-result-detail-element/pool-search-result/pool-search-result-detail-element.component';
+import { ClaimedApprovedSearchResultListElementComponent } from '../shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component';
+import { ClaimedDeclinedSearchResultListElementComponent } from '../shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declined-search-result-list-element.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   WorkspaceItemSearchResultListElementComponent,
   WorkflowItemSearchResultListElementComponent,
   ClaimedSearchResultListElementComponent,
+  ClaimedApprovedSearchResultListElementComponent,
+  ClaimedDeclinedSearchResultListElementComponent,
   PoolSearchResultListElementComponent,
   ItemSearchResultDetailElementComponent,
   WorkspaceItemSearchResultDetailElementComponent,

src/app/+search-page/configuration-search-page.component.spec.ts

@@ -2,20 +2,63 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { configureSearchComponentTestingModule } from './search.component.spec';
 import { ConfigurationSearchPageComponent } from './configuration-search-page.component';
 import { SearchConfigurationService } from '../core/shared/search/search-configuration.service';
+import { Component, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { RouteService } from '../core/services/route.service';
+import createSpy = jasmine.createSpy;
+
+const CONFIGURATION = 'test-configuration';
+const QUERY = 'test query';
+
+@Component({
+  template: `
+    <ds-configuration-search-page [configuration]="'${CONFIGURATION}'"
+                                  [fixedFilterQuery]="'${QUERY}'"
+                                  #configurationSearchPage>
+    </ds-configuration-search-page>
+  `,
+})
+class HostComponent {
+  @ViewChild('configurationSearchPage') configurationSearchPage: ConfigurationSearchPageComponent;
+}
 
 describe('ConfigurationSearchPageComponent', () => {
   let comp: ConfigurationSearchPageComponent;
-  let fixture: ComponentFixture<ConfigurationSearchPageComponent>;
+  let fixture: ComponentFixture<HostComponent>;
   let searchConfigService: SearchConfigurationService;
+  let routeService: RouteService;
 
   beforeEach(waitForAsync(() => {
-    configureSearchComponentTestingModule(ConfigurationSearchPageComponent);
+    configureSearchComponentTestingModule(ConfigurationSearchPageComponent, [HostComponent]);
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ConfigurationSearchPageComponent);
-    comp = fixture.componentInstance;
-    searchConfigService = (comp as any).searchConfigService;
+    fixture = TestBed.createComponent(HostComponent);
+
+    // Set router url to a dummy value for SearchComponent#ngOnInit
+    spyOnProperty(TestBed.inject(Router), 'url', 'get').and.returnValue('some/url/here');
+
+    routeService = TestBed.inject(RouteService);
+    routeService.setParameter = createSpy('setParameter');
+
     fixture.detectChanges();
+
+    comp = fixture.componentInstance.configurationSearchPage;
+    searchConfigService = (comp as any).searchConfigService;
+  });
+
+  it('should set route parameters on init', () => {
+    expect(comp.configuration).toBe(CONFIGURATION);
+    expect(comp.fixedFilterQuery).toBe(QUERY);
+
+    expect(routeService.setParameter).toHaveBeenCalledWith('configuration', CONFIGURATION);
+    expect(routeService.setParameter).toHaveBeenCalledWith('fixedFilterQuery', QUERY);
+  });
+
+  it('should reset route parameters on destroy', () => {
+    fixture.destroy();
+
+    expect(routeService.setParameter).toHaveBeenCalledWith('configuration', undefined);
+    expect(routeService.setParameter).toHaveBeenCalledWith('fixedFilterQuery', undefined);
   });
 });

src/app/+search-page/configuration-search-page.component.ts

@@ -1,7 +1,7 @@
 import { HostWindowService } from '../shared/host-window.service';
 import { SidebarService } from '../shared/sidebar/sidebar.service';
 import { SearchComponent } from './search.component';
-import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { pushInOut } from '../shared/animations/push';
 import { SEARCH_CONFIG_SERVICE } from '../+my-dspace-page/my-dspace-page.component';
 import { SearchConfigurationService } from '../core/shared/search/search-configuration.service';
@@ -27,7 +27,7 @@ import { Router } from '@angular/router';
   ]
 })
 
-export class ConfigurationSearchPageComponent extends SearchComponent implements OnInit {
+export class ConfigurationSearchPageComponent extends SearchComponent implements OnInit, OnDestroy {
   /**
    * The configuration to use for the search options
    * If empty, the configuration will be determined by the route parameter called 'configuration'
@@ -65,4 +65,17 @@ export class ConfigurationSearchPageComponent extends SearchComponent implements
       this.routeService.setParameter('fixedFilterQuery', this.fixedFilterQuery);
     }
   }
+
+  /**
+   * Reset the updated query/configuration set in ngOnInit()
+   */
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+    if (hasValue(this.configuration)) {
+      this.routeService.setParameter('configuration', undefined);
+    }
+    if (hasValue(this.fixedFilterQuery)) {
+      this.routeService.setParameter('fixedFilterQuery', undefined);
+    }
+  }
 }

src/app/+search-page/search.component.scss

@@ -6,5 +6,5 @@
 }
 
 ::ng-deep .search-controls {
-    margin-bottom: $spacer;
+    margin-bottom: var(--bs-spacer);
 }

src/app/+search-page/search.component.spec.ts

@@ -84,10 +84,10 @@ const routeServiceStub = {
   }
 };
 
-export function configureSearchComponentTestingModule(compType) {
+export function configureSearchComponentTestingModule(compType, additionalDeclarations: any[] = []) {
   TestBed.configureTestingModule({
     imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, NgbCollapseModule],
-    declarations: [compType],
+    declarations: [compType, ...additionalDeclarations],
     providers: [
       { provide: SearchService, useValue: searchServiceStub },
       {

src/app/app-routing-paths.ts

@@ -5,6 +5,7 @@ import { Item } from './core/shared/item.model';
 import { getCommunityPageRoute } from './+community-page/community-page-routing-paths';
 import { getCollectionPageRoute } from './+collection-page/collection-page-routing-paths';
 import { getItemPageRoute } from './+item-page/item-page-routing-paths';
+import { hasValue } from './shared/empty.util';
 
 export const BITSTREAM_MODULE_PATH = 'bitstreams';
 
@@ -45,13 +46,15 @@ export function getWorkflowItemModuleRoute() {
 }
 
 export function getDSORoute(dso: DSpaceObject): string {
-  switch ((dso as any).type) {
-    case Community.type.value:
-      return getCommunityPageRoute(dso.uuid);
-    case Collection.type.value:
-      return getCollectionPageRoute(dso.uuid);
-    case Item.type.value:
-      return getItemPageRoute(dso.uuid);
+  if (hasValue(dso)) {
+    switch ((dso as any).type) {
+      case Community.type.value:
+        return getCommunityPageRoute(dso.uuid);
+      case Collection.type.value:
+        return getCollectionPageRoute(dso.uuid);
+      case Item.type.value:
+        return getItemPageRoute(dso.uuid);
+    }
   }
 }
 

src/app/app.component.html

@@ -1,30 +1 @@
-<div class="outer-wrapper" *ngIf="isNotAuthBlocking$ | async; else authLoader">
-    <ds-admin-sidebar></ds-admin-sidebar>
-    <div class="inner-wrapper"  [@slideSidebarPadding]="{
-     value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
-     params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
-    }">
-        <ds-header-navbar-wrapper></ds-header-navbar-wrapper>
-
-        <ds-notifications-board
-                [options]="notificationOptions">
-        </ds-notifications-board>
-        <main class="main-content">
-            <div class="container">
-                <ds-breadcrumbs></ds-breadcrumbs>
-            </div>
-
-            <div class="container" *ngIf="isLoading$ | async">
-                <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
-            </div>
-            <router-outlet></router-outlet>
-        </main>
-
-        <ds-footer></ds-footer>
-    </div>
-</div>
-<ng-template #authLoader>
-  <div class="text-center ds-full-screen-loader d-flex align-items-center flex-column justify-content-center">
-    <ds-loading [showMessage]="false"></ds-loading>
-  </div>
-</ng-template>
+<ds-themed-root [isNotAuthBlocking]="isNotAuthBlocking$ | async" [isLoading]="isLoading$ | async"></ds-themed-root>

src/app/app.component.scss

@@ -1,53 +0,0 @@
-@import '../styles/helpers/font_awesome_imports.scss';
-@import '../../node_modules/bootstrap/scss/bootstrap.scss';
-@import '../../node_modules/nouislider/distribute/nouislider.min';
-
-html {
-  position: relative;
-  min-height: 100%;
-}
-
-body {
-  overflow-x: hidden;
-}
-
-// Sticky Footer
-.outer-wrapper {
-  display: flex;
-  margin: 0;
-}
-
-.inner-wrapper {
-  flex: 1 1 auto;
-  flex-flow: column nowrap;
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-
-.main-content {
-  z-index: $main-z-index;
-  flex: 1 1 100%;
-  margin-top: $content-spacing;
-  margin-bottom: $content-spacing;
-}
-
-.alert.hide {
-  padding: 0;
-  margin: 0;
-}
-
-ds-header-navbar-wrapper {
-  z-index: $nav-z-index;
-}
-
-ds-admin-sidebar {
-  position: fixed;
-  z-index: $sidebar-z-index;
-}
-
-.ds-full-screen-loader {
-  height: 100vh;
-}

src/app/app.component.spec.ts

@@ -1,7 +1,7 @@
 import { Store, StoreModule } from '@ngrx/store';
 import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
@@ -32,7 +32,9 @@ 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 { GoogleAnalyticsService } from './statistics/google-analytics.service';
+import { ThemeService } from './shared/theme-support/theme.service';
+import { getMockThemeService } from './shared/mocks/theme-service.mock';
 
 let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
@@ -73,6 +75,7 @@ describe('App component', () => {
       { provide: CSSVariableService, useClass: CSSVariableServiceStub },
       { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
       { provide: LocaleService, useValue: getMockLocaleService() },
+      { provide: ThemeService, useValue: getMockThemeService() },
       provideMockStore({ initialState }),
       AppComponent,
       RouteService
@@ -143,4 +146,32 @@ describe('App component', () => {
       });
     });
   });
+
+  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(defaultTestBedConf);
+      TestBed.overrideProvider(ThemeService, {useValue: getMockThemeService('custom')});
+      document = TestBed.inject(DOCUMENT);
+      headSpy = jasmine.createSpyObj('head', ['appendChild']);
+      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

@@ -5,12 +5,12 @@ import {
   Component,
   HostListener,
   Inject,
-  OnInit, Optional,
-  ViewEncapsulation
+  OnInit,
+  Optional,
 } from '@angular/core';
 import { NavigationCancel, NavigationEnd, NavigationStart, Router } from '@angular/router';
 
-import { BehaviorSubject, combineLatest as combineLatestObservable, Observable, of } from 'rxjs';
+import { BehaviorSubject, Observable, of } from 'rxjs';
 import { select, Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
@@ -23,25 +23,25 @@ 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 { MenuID } from './shared/menu/initial-menus-state';
-import { slideSidebarPadding } from './shared/animations/slide';
 import { HostWindowService } from './shared/host-window.service';
-import { Theme } from '../config/theme.inferface';
+import { ThemeConfig } from '../config/theme.model';
 import { Angulartics2DSpace } from './statistics/angulartics/dspace-provider';
 import { environment } from '../environments/environment';
 import { models } from './core/core.module';
 import { LocaleService } from './core/locale/locale.service';
-import { hasValue } from './shared/empty.util';
+import { hasValue, isNotEmpty } from './shared/empty.util';
 import { KlaroService } from './shared/cookies/klaro.service';
-import {GoogleAnalyticsService} from './statistics/google-analytics.service';
+import { GoogleAnalyticsService } from './statistics/google-analytics.service';
+import { DOCUMENT } from '@angular/common';
+import { ThemeService } from './shared/theme-support/theme.service';
+import { BASE_THEME_NAME } from './shared/theme-support/theme.constants';
+import { DEFAULT_THEME_CONFIG } from './shared/theme-support/theme.effects';
 
 @Component({
   selector: 'ds-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  animations: [slideSidebarPadding]
 })
 export class AppComponent implements OnInit, AfterViewInit {
   isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(true);
@@ -49,7 +49,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   slideSidebarOver: Observable<boolean>;
   collapsedSidebarWidth: Observable<string>;
   totalSidebarWidth: Observable<string>;
-  theme: Observable<Theme> = of({} as any);
+  theme: Observable<ThemeConfig> = of({} as any);
   notificationOptions = environment.notifications;
   models;
 
@@ -60,6 +60,8 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   constructor(
     @Inject(NativeWindowService) private _window: NativeWindowRef,
+      @Inject(DOCUMENT) private document: any,
+    private themeService: ThemeService,
     private translate: TranslateService,
     private store: Store<HostWindowState>,
     private metadata: MetadataService,
@@ -77,6 +79,17 @@ export class AppComponent implements OnInit, AfterViewInit {
 
     /* Use models object so all decorators are actually called */
     this.models = models;
+
+    this.themeService.getThemeName$().subscribe((themeName: string) => {
+      if (hasValue(themeName)) {
+        this.setThemeCss(themeName);
+      } else if (hasValue(DEFAULT_THEME_CONFIG)) {
+        this.setThemeCss(DEFAULT_THEME_CONFIG.name);
+      } else {
+        this.setThemeCss(BASE_THEME_NAME);
+      }
+    });
+
     // 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));
 
@@ -116,17 +129,6 @@ export class AppComponent implements OnInit, AfterViewInit {
     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);
-
-    this.sidebarVisible = this.menuService.isMenuVisible(MenuID.ADMIN);
-
-    this.collapsedSidebarWidth = this.cssService.getVariable('collapsedSidebarWidth');
-    this.totalSidebarWidth = this.cssService.getVariable('totalSidebarWidth');
-
-    const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
-    this.slideSidebarOver = combineLatestObservable(sidebarCollapsed, this.windowService.isXsOrSm())
-      .pipe(
-        map(([collapsed, mobile]) => collapsed || mobile)
-      );
   }
 
   private storeCSSVariables() {
@@ -177,4 +179,34 @@ export class AppComponent implements OnInit, AfterViewInit {
       this.cookiesService.initialize();
     }
   }
+
+  /**
+   * 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];
+    // 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(this.document.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();
+          }
+        });
+      }
+    };
+    head.appendChild(link);
+  }
 }

src/app/app.effects.ts

@@ -3,11 +3,13 @@ import { NotificationsEffects } from './shared/notifications/notifications.effec
 import { NavbarEffects } from './navbar/navbar.effects';
 import { SidebarEffects } from './shared/sidebar/sidebar-effects.service';
 import { RelationshipEffects } from './shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects';
+import { ThemeEffects } from './shared/theme-support/theme.effects';
 
 export const appEffects = [
   StoreEffects,
   NavbarEffects,
   NotificationsEffects,
   SidebarEffects,
+  ThemeEffects,
   RelationshipEffects
 ];

src/app/app.module.ts

@@ -43,6 +43,9 @@ import { ForbiddenComponent } from './forbidden/forbidden.component';
 import { AuthInterceptor } from './core/auth/auth.interceptor';
 import { LocaleInterceptor } from './core/locale/locale.interceptor';
 import { XsrfInterceptor } from './core/xsrf/xsrf.interceptor';
+import { RootComponent } from './root/root.component';
+import { ThemedRootComponent } from './root/themed-root.component';
+import { ThemedEntryComponentModule } from '../themes/themed-entry-component.module';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -65,6 +68,7 @@ const IMPORTS = [
   EffectsModule.forRoot(appEffects),
   StoreModule.forRoot(appReducers, storeModuleConfig),
   StoreRouterConnectingModule.forRoot(),
+  ThemedEntryComponentModule.withEntryComponents(),
 ];
 
 IMPORTS.push(
@@ -120,6 +124,8 @@ const PROVIDERS = [
 
 const DECLARATIONS = [
   AppComponent,
+  RootComponent,
+  ThemedRootComponent,
   HeaderComponent,
   HeaderNavbarWrapperComponent,
   AdminSidebarComponent,
@@ -135,7 +141,6 @@ const DECLARATIONS = [
 ];
 
 const EXPORTS = [
-  AppComponent
 ];
 
 @NgModule({
@@ -150,7 +155,8 @@ const EXPORTS = [
     ...DECLARATIONS,
   ],
   exports: [
-    ...EXPORTS
+    ...EXPORTS,
+    ...DECLARATIONS,
   ]
 })
 export class AppModule {

src/app/app.reducer.ts

@@ -12,7 +12,10 @@ import {
   metadataRegistryReducer,
   MetadataRegistryState
 } from './+admin/admin-registries/metadata-registry/metadata-registry.reducers';
-import { CommunityListReducer, CommunityListState } from './community-list-page/community-list.reducer';
+import {
+  CommunityListReducer,
+  CommunityListState
+} from './community-list-page/community-list.reducer';
 import { hasValue } from './shared/empty.util';
 import {
   NameVariantListsState,
@@ -20,19 +23,32 @@ import {
 } from './shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/name-variant.reducer';
 import { formReducer, FormState } from './shared/form/form.reducer';
 import { menusReducer, MenusState } from './shared/menu/menu.reducer';
-import { notificationsReducer, NotificationsState } from './shared/notifications/notifications.reducers';
+import {
+  notificationsReducer,
+  NotificationsState
+} from './shared/notifications/notifications.reducers';
 import {
   selectableListReducer,
   SelectableListsState
 } from './shared/object-list/selectable-list/selectable-list.reducer';
-import { ObjectSelectionListState, objectSelectionReducer } from './shared/object-select/object-select.reducer';
+import {
+  ObjectSelectionListState,
+  objectSelectionReducer
+} from './shared/object-select/object-select.reducer';
 import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/sass-helper.reducer';
 
 import { hostWindowReducer, HostWindowState } from './shared/search/host-window.reducer';
-import { filterReducer, SearchFiltersState } from './shared/search/search-filters/search-filter/search-filter.reducer';
-import { sidebarFilterReducer, SidebarFiltersState } from './shared/sidebar/filter/sidebar-filter.reducer';
+import {
+  filterReducer,
+  SearchFiltersState
+} from './shared/search/search-filters/search-filter/search-filter.reducer';
+import {
+  sidebarFilterReducer,
+  SidebarFiltersState
+} from './shared/sidebar/filter/sidebar-filter.reducer';
 import { sidebarReducer, SidebarState } from './shared/sidebar/sidebar.reducer';
 import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer';
+import { ThemeState, themeReducer } from './shared/theme-support/theme.reducer';
 
 export interface AppState {
   router: fromRouter.RouterReducerState;
@@ -45,6 +61,7 @@ export interface AppState {
   searchFilter: SearchFiltersState;
   truncatable: TruncatablesState;
   cssVariables: CSSVariablesState;
+  theme: ThemeState;
   menus: MenusState;
   objectSelection: ObjectSelectionListState;
   selectableLists: SelectableListsState;
@@ -65,6 +82,7 @@ export const appReducers: ActionReducerMap<AppState> = {
   searchFilter: filterReducer,
   truncatable: truncatableReducer,
   cssVariables: cssVariablesReducer,
+  theme: themeReducer,
   menus: menusReducer,
   objectSelection: objectSelectionReducer,
   selectableLists: selectableListReducer,

src/app/core/breadcrumbs/collection-breadcrumb.resolver.ts

@@ -3,7 +3,8 @@ import { DSOBreadcrumbsService } from './dso-breadcrumbs.service';
 import { DSOBreadcrumbResolver } from './dso-breadcrumb.resolver';
 import { Collection } from '../shared/collection.model';
 import { CollectionDataService } from '../data/collection-data.service';
-import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { COLLECTION_PAGE_LINKS_TO_FOLLOW } from '../../+collection-page/collection-page.resolver';
 
 /**
  * The class that resolves the BreadcrumbConfig object for a Collection
@@ -22,10 +23,6 @@ export class CollectionBreadcrumbResolver extends DSOBreadcrumbResolver<Collecti
    * Requesting them as embeds will limit the number of requests
    */
   get followLinks(): FollowLinkConfig<Collection>[] {
-    return [
-      followLink('parentCommunity', undefined, true, true, true,
-        followLink('parentCommunity')
-      )
-    ];
+    return COLLECTION_PAGE_LINKS_TO_FOLLOW;
   }
 }

src/app/core/breadcrumbs/community-breadcrumb.resolver.ts

@@ -3,7 +3,8 @@ import { DSOBreadcrumbsService } from './dso-breadcrumbs.service';
 import { DSOBreadcrumbResolver } from './dso-breadcrumb.resolver';
 import { CommunityDataService } from '../data/community-data.service';
 import { Community } from '../shared/community.model';
-import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { COMMUNITY_PAGE_LINKS_TO_FOLLOW } from '../../+community-page/community-page.resolver';
 
 /**
  * The class that resolves the BreadcrumbConfig object for a Community
@@ -22,8 +23,6 @@ export class CommunityBreadcrumbResolver extends DSOBreadcrumbResolver<Community
    * Requesting them as embeds will limit the number of requests
    */
   get followLinks(): FollowLinkConfig<Community>[] {
-    return [
-      followLink('parentCommunity')
-    ];
+    return COMMUNITY_PAGE_LINKS_TO_FOLLOW;
   }
 }

src/app/core/breadcrumbs/dso-breadcrumbs.service.ts

@@ -28,7 +28,7 @@ export class DSOBreadcrumbsService implements BreadcrumbsService<ChildHALResourc
 
   /**
    * Method to recursively calculate the breadcrumbs
-   * This method returns the name and url of the key and all its parent DSO's recursively, top down
+   * This method returns the name and url of the key and all its parent DSOs recursively, top down
    * @param key The key (a DSpaceObject) used to resolve the breadcrumb
    * @param url The url to use as a link for this breadcrumb
    */

src/app/core/breadcrumbs/dso-name.service.ts

@@ -20,7 +20,7 @@ export class DSONameService {
    *
    * With only two exceptions those solutions seem overkill for now.
    */
-  private factories = {
+  private readonly factories = {
     Person: (dso: DSpaceObject): string => {
       return `${dso.firstMetadataValue('person.familyName')}, ${dso.firstMetadataValue('person.givenName')}`;
     },

src/app/core/breadcrumbs/item-breadcrumb.resolver.ts

@@ -3,7 +3,8 @@ import { DSOBreadcrumbsService } from './dso-breadcrumbs.service';
 import { ItemDataService } from '../data/item-data.service';
 import { Item } from '../shared/item.model';
 import { DSOBreadcrumbResolver } from './dso-breadcrumb.resolver';
-import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { ITEM_PAGE_LINKS_TO_FOLLOW } from '../../+item-page/item-page.resolver';
 
 /**
  * The class that resolves the BreadcrumbConfig object for an Item
@@ -22,13 +23,6 @@ export class ItemBreadcrumbResolver extends DSOBreadcrumbResolver<Item> {
    * Requesting them as embeds will limit the number of requests
    */
   get followLinks(): FollowLinkConfig<Item>[] {
-    return [
-      followLink('owningCollection', undefined, true, true, true,
-        followLink('parentCommunity', undefined, true, true, true,
-          followLink('parentCommunity'))
-      ),
-      followLink('bundles'),
-      followLink('relationships')
-    ];
+    return ITEM_PAGE_LINKS_TO_FOLLOW;
   }
 }

src/app/core/cache/builders/link.service.ts

@@ -3,7 +3,15 @@ import { hasNoValue, hasValue, isNotEmpty } from '../../../shared/empty.util';
 import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
 import { GenericConstructor } from '../../shared/generic-constructor';
 import { HALResource } from '../../shared/hal-resource.model';
-import { getDataServiceFor, getLinkDefinition, getLinkDefinitions, LinkDefinition } from './build-decorators';
+import {
+  getDataServiceFor,
+  getLinkDefinition,
+  getLinkDefinitions,
+  LinkDefinition
+} from './build-decorators';
+import { RemoteData } from '../../data/remote-data';
+import { Observable } from 'rxjs/internal/Observable';
+import { EMPTY } from 'rxjs';
 
 /**
  * A Service to handle the resolving and removing
@@ -33,12 +41,14 @@ export class LinkService {
   }
 
   /**
-   * Resolve the given {@link FollowLinkConfig} for the given model
+   * Resolve the given {@link FollowLinkConfig} for the given model and return the result. This does
+   * not attach the link result to the property on the model. Useful when you're working with a
+   * readonly object
    *
    * @param model the {@link HALResource} to resolve the link for
    * @param linkToFollow the {@link FollowLinkConfig} to resolve
    */
-  public resolveLink<T extends HALResource>(model, linkToFollow: FollowLinkConfig<T>): T {
+  public resolveLinkWithoutAttaching<T extends HALResource, U extends HALResource>(model, linkToFollow: FollowLinkConfig<T>): Observable<RemoteData<U>> {
     const matchingLinkDef = getLinkDefinition(model.constructor, linkToFollow.name);
 
     if (hasNoValue(matchingLinkDef)) {
@@ -61,9 +71,9 @@ export class LinkService {
 
         try {
           if (matchingLinkDef.isList) {
-            model[linkToFollow.name] = service.findAllByHref(href, linkToFollow.findListOptions, linkToFollow.useCachedVersionIfAvailable, linkToFollow.reRequestOnStale, ...linkToFollow.linksToFollow);
+            return service.findAllByHref(href, linkToFollow.findListOptions, linkToFollow.useCachedVersionIfAvailable, linkToFollow.reRequestOnStale, ...linkToFollow.linksToFollow);
           } else {
-            model[linkToFollow.name] = service.findByHref(href, linkToFollow.useCachedVersionIfAvailable, linkToFollow.reRequestOnStale, ...linkToFollow.linksToFollow);
+            return service.findByHref(href, linkToFollow.useCachedVersionIfAvailable, linkToFollow.reRequestOnStale, ...linkToFollow.linksToFollow);
           }
         } catch (e) {
           console.error(`Something went wrong when using @dataService(${matchingLinkDef.resourceType.value}) ${hasValue(service) ? '' : '(undefined) '}to resolve link ${linkToFollow.name} at ${href}`);
@@ -71,6 +81,18 @@ export class LinkService {
         }
       }
     }
+    return EMPTY;
+  }
+
+  /**
+   * Resolve the given {@link FollowLinkConfig} for the given model and return the model with the
+   * link property attached.
+   *
+   * @param model the {@link HALResource} to resolve the link for
+   * @param linkToFollow the {@link FollowLinkConfig} to resolve
+   */
+  public resolveLink<T extends HALResource>(model, linkToFollow: FollowLinkConfig<T>): T {
+    model[linkToFollow.name] = this.resolveLinkWithoutAttaching(model, linkToFollow);
     return model;
   }
 

src/app/core/cache/server-sync-buffer.effects.spec.ts

@@ -13,9 +13,14 @@ import { RestRequestMethod } from '../data/rest-request-method';
 import { DSpaceObject } from '../shared/dspace-object.model';
 import { ApplyPatchObjectCacheAction } from './object-cache.actions';
 import { ObjectCacheService } from './object-cache.service';
-import { CommitSSBAction, EmptySSBAction, ServerSyncBufferActionTypes } from './server-sync-buffer.actions';
+import {
+  CommitSSBAction,
+  EmptySSBAction,
+  ServerSyncBufferActionTypes
+} from './server-sync-buffer.actions';
 import { ServerSyncBufferEffects } from './server-sync-buffer.effects';
 import { storeModuleConfig } from '../../app.reducer';
+import { NoOpAction } from '../../shared/ngrx/no-op.action';
 
 describe('ServerSyncBufferEffects', () => {
   let ssbEffects: ServerSyncBufferEffects;
@@ -143,7 +148,7 @@ describe('ServerSyncBufferEffects', () => {
             payload: { method: RestRequestMethod.PATCH }
           }
         });
-        const expected = cold('b', { b: { type: 'NO_ACTION' } });
+        const expected = cold('b', { b: new NoOpAction() });
 
         expect(ssbEffects.commitServerSyncBuffer).toBeObservable(expected);
       });

src/app/core/cache/server-sync-buffer.effects.ts

@@ -21,6 +21,7 @@ import { RestRequestMethod } from '../data/rest-request-method';
 import { environment } from '../../../environments/environment';
 import { ObjectCacheEntry } from './object-cache.reducer';
 import { Operation } from 'fast-json-patch';
+import { NoOpAction } from '../../shared/ngrx/no-op.action';
 
 @Injectable()
 export class ServerSyncBufferEffects {
@@ -80,7 +81,7 @@ export class ServerSyncBufferEffects {
               switchMap((array) => [...array, new EmptySSBAction(action.payload)])
             );
             } else {
-              return observableOf({ type: 'NO_ACTION' });
+              return observableOf(new NoOpAction());
             }
           })
         );

src/app/core/config/models/config-access-condition-option.model.ts

@@ -8,16 +8,6 @@ export class AccessConditionOption {
    */
   name: string;
 
-  /**
-   * The uuid of the Group this Access Condition applies to
-   */
-  groupUUID: string;
-
-  /**
-   * The uuid of the Group that contains set of groups this Resource Policy applies to
-   */
-  selectGroupUUID: string;
-
   /**
    * A boolean representing if this Access Condition has a start date
    */

src/app/core/data/object-updates/object-updates.effects.spec.ts

@@ -11,10 +11,14 @@ import {
   RemoveFieldUpdateAction,
   RemoveObjectUpdatesAction
 } from './object-updates.actions';
-import { INotification, Notification } from '../../../shared/notifications/models/notification.model';
+import {
+  INotification,
+  Notification
+} from '../../../shared/notifications/models/notification.model';
 import { NotificationType } from '../../../shared/notifications/models/notification-type';
 import { filter } from 'rxjs/operators';
 import { hasValue } from '../../../shared/empty.util';
+import { NoOpAction } from '../../../shared/ngrx/no-op.action';
 
 describe('ObjectUpdatesEffects', () => {
   let updatesEffects: ObjectUpdatesEffects;
@@ -97,7 +101,7 @@ describe('ObjectUpdatesEffects', () => {
           actions = hot('a', { a: new DiscardObjectUpdatesAction(testURL, infoNotification) });
           actions = hot('b', { b: new ReinstateObjectUpdatesAction(testURL) });
           updatesEffects.removeAfterDiscardOrReinstateOnUndo$.subscribe((t) => {
-              expect(t).toEqual({ type: 'NO_ACTION' });
+              expect(t).toEqual(new NoOpAction());
             }
           );
         });

src/app/core/data/object-updates/object-updates.effects.ts

@@ -3,7 +3,8 @@ import { Actions, Effect, ofType } from '@ngrx/effects';
 import {
   DiscardObjectUpdatesAction,
   ObjectUpdatesAction,
-  ObjectUpdatesActionTypes, RemoveAllObjectUpdatesAction,
+  ObjectUpdatesActionTypes,
+  RemoveAllObjectUpdatesAction,
   RemoveObjectUpdatesAction
 } from './object-updates.actions';
 import { delay, filter, map, switchMap, take, tap } from 'rxjs/operators';
@@ -17,6 +18,7 @@ import {
   RemoveNotificationAction
 } from '../../../shared/notifications/notifications.actions';
 import { Action } from '@ngrx/store';
+import { NoOpAction } from '../../../shared/ngrx/no-op.action';
 
 /**
  * NGRX effects for ObjectUpdatesActions
@@ -111,7 +113,7 @@ export class ObjectUpdatesEffects {
               map((updateAction: ObjectUpdatesAction) => {
                 if (updateAction.type === ObjectUpdatesActionTypes.REINSTATE) {
                   // If someone reinstated, do nothing, just let the reinstating happen
-                  return { type: 'NO_ACTION' };
+                  return new NoOpAction();
                 }
                 // If someone performed another action, assume the user does not want to reinstate and remove all changes
                 return removeAction;

src/app/core/index/index.effects.spec.ts

@@ -8,6 +8,7 @@ import { Item } from '../shared/item.model';
 import { AddToIndexAction } from './index.actions';
 import { IndexName } from './index.reducer';
 import { provideMockStore } from '@ngrx/store/testing';
+import { NoOpAction } from '../../shared/ngrx/no-op.action';
 
 describe('ObjectUpdatesEffects', () => {
   let indexEffects: UUIDIndexEffects;
@@ -79,14 +80,14 @@ describe('ObjectUpdatesEffects', () => {
     it('should emit NO_ACTION when a AddToObjectCacheAction without an alternativeLink is dispatched', () => {
       action = new AddToObjectCacheAction(objectToCache, timeCompleted, msToLive, requestUUID, undefined);
       actions = hot('--a-', { a: action });
-      const expected = cold('--b-', { b: { type: 'NO_ACTION' } });
+      const expected = cold('--b-', { b: new NoOpAction() });
       expect(indexEffects.addAlternativeObjectLink$).toBeObservable(expected);
     });
 
     it('should emit NO_ACTION when a AddToObjectCacheAction with an alternativeLink that\'s the same as the objectToCache\'s selfLink is dispatched', () => {
       action = new AddToObjectCacheAction(objectToCache, timeCompleted, msToLive, requestUUID, objectToCache._links.self.href);
       actions = hot('--a-', { a: action });
-      const expected = cold('--b-', { b: { type: 'NO_ACTION' } });
+      const expected = cold('--b-', { b: new NoOpAction() });
       expect(indexEffects.addAlternativeObjectLink$).toBeObservable(expected);
     });
   });

src/app/core/index/index.effects.ts

@@ -19,6 +19,7 @@ import { RestRequestMethod } from '../data/rest-request-method';
 import { getUrlWithoutEmbedParams, uuidFromHrefSelector } from './index.selectors';
 import { Store, select } from '@ngrx/store';
 import { CoreState } from '../core.reducers';
+import { NoOpAction } from '../../shared/ngrx/no-op.action';
 
 @Injectable()
 export class UUIDIndexEffects {
@@ -53,7 +54,7 @@ export class UUIDIndexEffects {
             selfLink
           );
         } else {
-          return { type: 'NO_ACTION' };
+          return new NoOpAction();
         }
       })
     );

src/app/core/resolving/resolver.actions.ts

@@ -0,0 +1,27 @@
+import { type } from '../../shared/ngrx/type';
+import { Action } from '@ngrx/store';
+import { DSpaceObject } from '../shared/dspace-object.model';
+
+export const ResolverActionTypes = {
+  RESOLVED: type('dspace/resolver/RESOLVED')
+};
+
+/**
+ * An action that indicates a route object has been resolved.
+ *
+ * It isn't used in a reducer for now. Its purpose is to be able to be notified that an object
+ * has been resolved in an effect.
+ */
+export class ResolvedAction implements Action {
+  type = ResolverActionTypes.RESOLVED;
+  payload: {
+    url: string,
+    dso: DSpaceObject
+  };
+
+  constructor(url: string, dso: DSpaceObject) {
+    this.payload = { url, dso };
+  }
+}
+
+export type ResolverAction = ResolvedAction;

src/app/core/shared/context.model.ts

@@ -3,7 +3,7 @@
  */
 
 export enum Context {
-  Undefined = 'undefined',
+  Any = 'undefined',
   ItemPage = 'itemPage',
   Search = 'search',
   Workflow = 'workflow',

src/app/core/submission/models/submission-upload-file-access-condition.model.ts

@@ -13,11 +13,6 @@ export class SubmissionUploadFileAccessConditionObject {
    */
   name: string;
 
-  /**
-   * The access group UUID defined in this access condition
-   */
-  groupUUID: string;
-
   /**
    * Possible start date of the access condition
    */

src/app/core/tasks/claimed-task-data.service.spec.ts

@@ -8,9 +8,16 @@ import { RemoteDataBuildService } from '../cache/builders/remote-data-build.serv
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { CoreState } from '../core.reducers';
 import { ClaimedTaskDataService } from './claimed-task-data.service';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { FindListOptions } from '../data/request.models';
+import { RequestParam } from '../cache/models/request-param.model';
+import { getTestScheduler } from 'jasmine-marbles';
+import { TestScheduler } from 'rxjs/testing';
 import { HttpOptions } from '../dspace-rest/dspace-rest.service';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 
 describe('ClaimedTaskDataService', () => {
+  let scheduler: TestScheduler;
   let service: ClaimedTaskDataService;
   let options: HttpOptions;
   const taskEndpoint = 'https://rest.api/task';
@@ -45,6 +52,7 @@ describe('ClaimedTaskDataService', () => {
   }
 
   beforeEach(() => {
+    scheduler = getTestScheduler();
     service = initTestService();
     options = Object.create({});
     let headers = new HttpHeaders();
@@ -68,6 +76,24 @@ describe('ClaimedTaskDataService', () => {
     });
   });
 
+  describe('claimTask', () => {
+
+    it('should call postToEndpoint method', () => {
+
+      spyOn(service, 'postToEndpoint').and.returnValue(observableOf(null));
+
+      scheduler.schedule(() => service.claimTask('scopeId', 'poolTaskHref').subscribe());
+      scheduler.flush();
+
+      const postToEndpointOptions: HttpOptions = Object.create({});
+      let headers = new HttpHeaders();
+      headers = headers.append('Content-Type', 'text/uri-list');
+      postToEndpointOptions.headers = headers;
+
+      expect(service.postToEndpoint).toHaveBeenCalledWith(linkPath, 'poolTaskHref', null, postToEndpointOptions);
+    });
+  });
+
   describe('returnToPoolTask', () => {
     it('should call deleteById method', () => {
       const scopeId = '1234';
@@ -79,4 +105,21 @@ describe('ClaimedTaskDataService', () => {
       expect(service.deleteById).toHaveBeenCalledWith(linkPath, scopeId, options);
     });
   });
+
+  describe('findByItem', () => {
+
+    it('should call searchTask method', () => {
+      spyOn((service as any), 'searchTask').and.returnValue(observableOf(createSuccessfulRemoteDataObject$({})));
+
+      scheduler.schedule(() => service.findByItem('a0db0fde-1d12-4d43-bd0d-0f43df8d823c').subscribe());
+      scheduler.flush();
+
+      const findListOptions = new FindListOptions();
+      findListOptions.searchParams = [
+        new RequestParam('uuid', 'a0db0fde-1d12-4d43-bd0d-0f43df8d823c')
+      ];
+
+      expect(service.searchTask).toHaveBeenCalledWith('findByItem', findListOptions);
+    });
+  });
 });

src/app/core/tasks/claimed-task-data.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
 import { Store } from '@ngrx/store';
@@ -15,6 +15,11 @@ import { ClaimedTask } from './models/claimed-task-object.model';
 import { CLAIMED_TASK } from './models/claimed-task-object.resource-type';
 import { ProcessTaskResponse } from './models/process-task-response';
 import { TasksService } from './tasks.service';
+import { RemoteData } from '../data/remote-data';
+import { FindListOptions } from '../data/request.models';
+import { RequestParam } from '../cache/models/request-param.model';
+import { HttpOptions } from '../dspace-rest/dspace-rest.service';
+import { getFirstSucceededRemoteData } from '../shared/operators';
 
 /**
  * The service handling all REST requests for ClaimedTask
@@ -23,7 +28,7 @@ import { TasksService } from './tasks.service';
 @dataService(CLAIMED_TASK)
 export class ClaimedTaskDataService extends TasksService<ClaimedTask> {
 
-  protected responseMsToLive = 10 * 1000;
+  protected responseMsToLive = 1000;
 
   /**
    * The endpoint link name
@@ -54,6 +59,24 @@ export class ClaimedTaskDataService extends TasksService<ClaimedTask> {
     super();
   }
 
+  /**
+   * Make a request to claim the given task
+   *
+   * @param scopeId
+   *    The task id
+   * @param poolTaskHref
+   *    The pool task Href
+   * @return {Observable<ProcessTaskResponse>}
+   *    Emit the server response
+   */
+  public claimTask(scopeId: string, poolTaskHref: string): Observable<ProcessTaskResponse> {
+    const options: HttpOptions = Object.create({});
+    let headers = new HttpHeaders();
+    headers = headers.append('Content-Type', 'text/uri-list');
+    options.headers = headers;
+    return this.postToEndpoint(this.linkPath, poolTaskHref, null, options);
+  }
+
   /**
    * Make a request for the given task
    *
@@ -80,4 +103,19 @@ export class ClaimedTaskDataService extends TasksService<ClaimedTask> {
     return this.deleteById(this.linkPath, scopeId, this.makeHttpOptions());
   }
 
+  /**
+   * Search a claimed task by item uuid.
+   * @param uuid
+   *   The item uuid
+   * @return {Observable<RemoteData<ClaimedTask>>}
+   *    The server response
+   */
+  public findByItem(uuid: string): Observable<RemoteData<ClaimedTask>> {
+    const options = new FindListOptions();
+    options.searchParams = [
+      new RequestParam('uuid', uuid)
+    ];
+    return this.searchTask('findByItem', options).pipe(getFirstSucceededRemoteData());
+  }
+
 }

src/app/core/tasks/pool-task-data.service.spec.ts

@@ -8,9 +8,16 @@ import { RemoteDataBuildService } from '../cache/builders/remote-data-build.serv
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { CoreState } from '../core.reducers';
 import { PoolTaskDataService } from './pool-task-data.service';
+import { getTestScheduler } from 'jasmine-marbles';
+import { TestScheduler } from 'rxjs/testing';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { FindListOptions } from '../data/request.models';
+import { RequestParam } from '../cache/models/request-param.model';
 import { HttpOptions } from '../dspace-rest/dspace-rest.service';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 
 describe('PoolTaskDataService', () => {
+  let scheduler: TestScheduler;
   let service: PoolTaskDataService;
   let options: HttpOptions;
   const taskEndpoint = 'https://rest.api/task';
@@ -45,6 +52,7 @@ describe('PoolTaskDataService', () => {
   }
 
   beforeEach(() => {
+    scheduler = getTestScheduler();
     service = initTestService();
     options = Object.create({});
     let headers = new HttpHeaders();
@@ -52,14 +60,33 @@ describe('PoolTaskDataService', () => {
     options.headers = headers;
   });
 
-  describe('claimTask', () => {
+  describe('findByItem', () => {
 
-    it('should call postToEndpoint method', () => {
-      spyOn(service, 'postToEndpoint');
-      const scopeId = '1234';
-      service.claimTask(scopeId);
+    it('should call searchTask method', () => {
+      spyOn((service as any), 'searchTask').and.returnValue(observableOf(createSuccessfulRemoteDataObject$({})));
+
+      scheduler.schedule(() => service.findByItem('a0db0fde-1d12-4d43-bd0d-0f43df8d823c').subscribe());
+      scheduler.flush();
+
+      const findListOptions = new FindListOptions();
+      findListOptions.searchParams = [
+        new RequestParam('uuid', 'a0db0fde-1d12-4d43-bd0d-0f43df8d823c')
+      ];
+
+      expect(service.searchTask).toHaveBeenCalledWith('findByItem', findListOptions);
+    });
+  });
+
+  describe('getPoolTaskEndpointById', () => {
+
+    it('should call getEndpointById method', () => {
+      spyOn(service, 'getEndpointById').and.returnValue(observableOf(null));
+
+      scheduler.schedule(() => service.getPoolTaskEndpointById('a0db0fde-1d12-4d43-bd0d-0f43df8d823c').subscribe());
+      scheduler.flush();
+
+      expect(service.getEndpointById).toHaveBeenCalledWith('a0db0fde-1d12-4d43-bd0d-0f43df8d823c');
 
-      expect(service.postToEndpoint).toHaveBeenCalledWith(linkPath, {}, scopeId, options);
     });
   });
 });

src/app/core/tasks/pool-task-data.service.ts

@@ -13,8 +13,11 @@ import { RequestService } from '../data/request.service';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { PoolTask } from './models/pool-task-object.model';
 import { POOL_TASK } from './models/pool-task-object.resource-type';
-import { ProcessTaskResponse } from './models/process-task-response';
 import { TasksService } from './tasks.service';
+import { RemoteData } from '../data/remote-data';
+import { FindListOptions } from '../data/request.models';
+import { RequestParam } from '../cache/models/request-param.model';
+import { getFirstCompletedRemoteData } from '../shared/operators';
 
 /**
  * The service handling all REST requests for PoolTask
@@ -28,7 +31,7 @@ export class PoolTaskDataService extends TasksService<PoolTask> {
    */
   protected linkPath = 'pooltasks';
 
-  protected responseMsToLive = 10 * 1000;
+  protected responseMsToLive = 1000;
 
   /**
    * Initialize instance variables
@@ -56,14 +59,30 @@ export class PoolTaskDataService extends TasksService<PoolTask> {
   }
 
   /**
-   * Make a request to claim the given task
-   *
-   * @param scopeId
-   *    The task id
-   * @return {Observable<ProcessTaskResponse>}
-   *    Emit the server response
+   * Search a pool task by item uuid.
+   * @param uuid
+   *   The item uuid
+   * @return {Observable<RemoteData<ClaimedTask>>}
+   *    The server response
    */
-  public claimTask(scopeId: string): Observable<ProcessTaskResponse> {
-    return this.postToEndpoint(this.linkPath, {}, scopeId, this.makeHttpOptions());
+  public findByItem(uuid: string): Observable<RemoteData<PoolTask>> {
+    const options = new FindListOptions();
+    options.searchParams = [
+      new RequestParam('uuid', uuid)
+    ];
+    return this.searchTask('findByItem', options).pipe(getFirstCompletedRemoteData());
   }
+
+  /**
+   * Get the Href of the pool task
+   *
+   * @param poolTaskId
+   *   the poolTask id
+   * @return {Observable<string>>}
+   *    the Href
+   */
+  public getPoolTaskEndpointById(poolTaskId): Observable<string> {
+    return this.getEndpointById(poolTaskId);
+  }
+
 }

src/app/core/tasks/tasks.service.spec.ts

@@ -4,7 +4,7 @@ import { TestScheduler } from 'rxjs/testing';
 import { getMockRequestService } from '../../shared/mocks/request.service.mock';
 import { TasksService } from './tasks.service';
 import { RequestService } from '../data/request.service';
-import { TaskDeleteRequest, TaskPostRequest } from '../data/request.models';
+import { FindListOptions, TaskDeleteRequest, TaskPostRequest } from '../data/request.models';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
 import { TaskObject } from './models/task-object.model';
@@ -17,8 +17,11 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { DSOChangeAnalyzer } from '../data/dso-change-analyzer.service';
 import { ChangeAnalyzer } from '../data/change-analyzer';
 import { compare, Operation } from 'fast-json-patch';
+import { of as observableOf } from 'rxjs/internal/observable/of';
 import { HttpOptions } from '../dspace-rest/dspace-rest.service';
 import { getMockRemoteDataBuildService } from '../../shared/mocks/remote-data-build.service.mock';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { of } from 'rxjs';
 
 const LINK_NAME = 'test';
 
@@ -59,7 +62,7 @@ describe('TasksService', () => {
   const requestService = getMockRequestService();
   const halService: any = new HALEndpointServiceStub(taskEndpoint);
   const rdbService = getMockRemoteDataBuildService();
-  const notificationsService = {} as NotificationsService;
+  const notificationsService = new NotificationsServiceStub() as any;
   const http = {} as HttpClient;
   const comparator = new DummyChangeAnalyzer() as any;
   const objectCache = {
@@ -118,4 +121,38 @@ describe('TasksService', () => {
     });
   });
 
+  describe('searchTask', () => {
+
+    it('should call findByHref with the href generated by getSearchByHref', () => {
+
+      spyOn(service, 'getSearchByHref').and.returnValue(observableOf('generatedHref'));
+      spyOn(service, 'findByHref').and.returnValue(of(null));
+
+      const followLinks = {};
+      const options = new FindListOptions();
+      options.searchParams = [];
+
+      scheduler.schedule(() => service.searchTask('method', options, followLinks as any).subscribe());
+      scheduler.flush();
+
+      expect(service.getSearchByHref).toHaveBeenCalledWith('method', options, followLinks as any);
+      expect(service.findByHref).toHaveBeenCalledWith('generatedHref', false, true);
+    });
+  });
+
+  describe('getEndpointById', () => {
+
+    it('should call halService.getEndpoint and then getEndpointByIDHref', () => {
+
+      spyOn(halService, 'getEndpoint').and.returnValue(observableOf('generatedHref'));
+      spyOn(service, 'getEndpointByIDHref').and.returnValue(null);
+
+      scheduler.schedule(() => service.getEndpointById('scopeId').subscribe());
+      scheduler.flush();
+
+      expect(halService.getEndpoint).toHaveBeenCalledWith(service.getLinkPath());
+      expect(service.getEndpointByIDHref).toHaveBeenCalledWith('generatedHref', 'scopeId');
+    });
+  });
+
 });

src/app/core/tasks/tasks.service.ts

@@ -1,43 +1,29 @@
 import { HttpHeaders } from '@angular/common/http';
 
 import { Observable } from 'rxjs';
-import { distinctUntilChanged, filter, map, mergeMap, tap } from 'rxjs/operators';
+import { distinctUntilChanged, filter, find, map, mergeMap, tap } from 'rxjs/operators';
 
 import { DataService } from '../data/data.service';
-import { DeleteRequest, PostRequest, TaskDeleteRequest, TaskPostRequest } from '../data/request.models';
-import { isNotEmpty } from '../../shared/empty.util';
+import {
+  DeleteRequest,
+  FindListOptions,
+  PostRequest,
+  TaskDeleteRequest,
+  TaskPostRequest
+} from '../data/request.models';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { HttpOptions } from '../dspace-rest/dspace-rest.service';
 import { ProcessTaskResponse } from './models/process-task-response';
-import { getFirstCompletedRemoteData } from '../shared/operators';
+import { getAllCompletedRemoteData, getFirstCompletedRemoteData } from '../shared/operators';
 import { CacheableObject } from '../cache/object-cache.reducer';
 import { RemoteData } from '../data/remote-data';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 
 /**
  * An abstract class that provides methods to handle task requests.
  */
 export abstract class TasksService<T extends CacheableObject> extends DataService<T> {
 
-  /**
-   * Fetch a RestRequest
-   *
-   * @param requestId
-   *    The base endpoint for the type of object
-   * @return Observable<ProcessTaskResponse>
-   *     server response
-   */
-  protected fetchRequest(requestId: string): Observable<ProcessTaskResponse> {
-    return this.rdbService.buildFromRequestUUID(requestId).pipe(
-      getFirstCompletedRemoteData(),
-      map((response: RemoteData<any>) => {
-        if (response.hasFailed) {
-          return new ProcessTaskResponse(false, response.statusCode, response.errorMessage);
-        } else {
-          return new ProcessTaskResponse(true, response.statusCode);
-        }
-      })
-    );
-  }
-
   /**
    * Create the HREF for a specific submission object based on its identifier
    *
@@ -46,7 +32,7 @@ export abstract class TasksService<T extends CacheableObject> extends DataServic
    * @param resourceID
    *    The identifier for the object
    */
-  protected getEndpointByIDHref(endpoint, resourceID): string {
+  getEndpointByIDHref(endpoint, resourceID): string {
     return isNotEmpty(resourceID) ? `${endpoint}/${resourceID}` : `${endpoint}`;
   }
 
@@ -90,16 +76,67 @@ export abstract class TasksService<T extends CacheableObject> extends DataServic
    */
   public deleteById(linkPath: string, scopeId: string, options?: HttpOptions): Observable<ProcessTaskResponse> {
     const requestId = this.requestService.generateRequestId();
-    return this.halService.getEndpoint(linkPath || this.linkPath).pipe(
-      filter((href: string) => isNotEmpty(href)),
-      distinctUntilChanged(),
-      map((endpointURL: string) => this.getEndpointByIDHref(endpointURL, scopeId)),
+    return this.getEndpointById(scopeId, linkPath).pipe(
       map((endpointURL: string) => new TaskDeleteRequest(requestId, endpointURL, null, options)),
       tap((request: DeleteRequest) => this.requestService.send(request)),
       mergeMap((request: DeleteRequest) => this.fetchRequest(requestId)),
       distinctUntilChanged());
   }
 
+  /**
+   * Get the endpoint of a task by scopeId.
+   * @param linkPath
+   * @param scopeId
+   */
+  public getEndpointById(scopeId: string, linkPath?: string): Observable<string> {
+    return this.halService.getEndpoint(linkPath || this.linkPath).pipe(
+      filter((href: string) => isNotEmpty(href)),
+      distinctUntilChanged(),
+      map((endpointURL: string) => this.getEndpointByIDHref(endpointURL, scopeId)));
+  }
+
+  /**
+   * Search a task.
+   * @param searchMethod
+   *   the search method
+   * @param options
+   *   the find list options
+   * @param linksToFollow
+   *   links to follow
+   */
+  public searchTask(searchMethod: string, options: FindListOptions = {}, ...linksToFollow: FollowLinkConfig<T>[]): Observable<RemoteData<T>> {
+    const hrefObs = this.getSearchByHref(searchMethod, options, ...linksToFollow);
+    return hrefObs.pipe(
+      find((href: string) => hasValue(href)),
+      mergeMap((href) => this.findByHref(href, false, true).pipe(
+        getAllCompletedRemoteData(),
+        filter((rd: RemoteData<T>) => !rd.isSuccessStale),
+        tap(() => this.requestService.setStaleByHrefSubstring(href)))
+      )
+    );
+  }
+
+  /**
+   * Fetch a RestRequest
+   *
+   * @param requestId
+   *    The base endpoint for the type of object
+   * @return Observable<ProcessTaskResponse>
+   *     server response
+   */
+  protected fetchRequest(requestId: string): Observable<ProcessTaskResponse> {
+    return this.rdbService.buildFromRequestUUID(requestId).pipe(
+      getFirstCompletedRemoteData(),
+      map((response: RemoteData<any>) => {
+        if (response.hasFailed) {
+          return new ProcessTaskResponse(false, response.statusCode, response.errorMessage);
+        } else {
+          return new ProcessTaskResponse(true, response.statusCode);
+        }
+      })
+    );
+  }
+
   /**
    * Create a new HttpOptions
    */

src/app/core/xsrf/xsrf.interceptor.spec.ts

@@ -1,32 +1,20 @@
 import { TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { HttpHeaders, HTTP_INTERCEPTORS, HttpResponse, HttpXsrfTokenExtractor, HttpErrorResponse } from '@angular/common/http';
+import { HttpHeaders, HTTP_INTERCEPTORS, HttpXsrfTokenExtractor } from '@angular/common/http';
 import { DspaceRestService } from '../dspace-rest/dspace-rest.service';
 import { RestRequestMethod } from '../data/rest-request-method';
 import { CookieService } from '../services/cookie.service';
 import { CookieServiceMock } from '../../shared/mocks/cookie.service.mock';
 import { XsrfInterceptor } from './xsrf.interceptor';
-
-/**
- * A Mock TokenExtractor which just returns whatever token it is initialized with.
- * This mock object is injected into our XsrfInterceptor, so that it always finds
- * the same fake XSRF token.
- */
-class MockTokenExtractor extends HttpXsrfTokenExtractor {
-  constructor(private token: string | null) { super(); }
-
-  getToken(): string | null { return this.token; }
-}
+import { HttpXsrfTokenExtractorMock } from '../../shared/mocks/http-xsrf-token-extractor.mock';
 
 describe(`XsrfInterceptor`, () => {
   let service: DspaceRestService;
   let httpMock: HttpTestingController;
   let cookieService: CookieService;
 
-  // Create a MockTokenExtractor which always returns "test-token". This will
-  // be used as the test HttpXsrfTokenExtractor, see below.
+  // mock XSRF token
   const testToken = 'test-token';
-  const mockTokenExtractor = new MockTokenExtractor(testToken);
 
   // Mock payload/statuses are dummy content as we are not testing the results
   // of any below requests. We are only testing for X-XSRF-TOKEN header.
@@ -46,7 +34,7 @@ describe(`XsrfInterceptor`, () => {
           useClass: XsrfInterceptor,
           multi: true,
         },
-        { provide: HttpXsrfTokenExtractor, useValue: mockTokenExtractor },
+        { provide: HttpXsrfTokenExtractor, useValue: new HttpXsrfTokenExtractorMock(testToken) },
         { provide: CookieService, useValue: new CookieServiceMock() }
       ],
     });

src/app/core/xsrf/xsrf.interceptor.ts

@@ -6,6 +6,13 @@ import { RESTURLCombiner } from '../url-combiner/rest-url-combiner';
 import { CookieService } from '../services/cookie.service';
 import { throwError } from 'rxjs';
 
+// Name of XSRF header we may send in requests to backend (this is a standard name defined by Angular)
+export const XSRF_REQUEST_HEADER = 'X-XSRF-TOKEN';
+// Name of XSRF header we may receive in responses from backend
+export const XSRF_RESPONSE_HEADER = 'DSPACE-XSRF-TOKEN';
+// Name of cookie where we store the XSRF token
+export const XSRF_COOKIE = 'XSRF-TOKEN';
+
 /**
  * Custom Http Interceptor intercepting Http Requests & Responses to
  * exchange XSRF/CSRF tokens with the backend.
@@ -43,11 +50,6 @@ export class XsrfInterceptor implements HttpInterceptor {
      * @param next
      */
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-        // Name of XSRF header we may send in requests to backend (this is a standard name defined by Angular)
-        const requestCsrfHeader = 'X-XSRF-TOKEN';
-        // Name of XSRF header we may receive in responses from backend
-        const responseCsrfHeader = 'DSPACE-XSRF-TOKEN';
-
         // Ensure EVERY request from Angular includes "withCredentials: true".
         // This allows Angular to receive & send cookies via a CORS request (to
         // the backend). ONLY requests with credentials will:
@@ -71,8 +73,8 @@ export class XsrfInterceptor implements HttpInterceptor {
             const token = this.tokenExtractor.getToken() as string;
 
             // send token in request's X-XSRF-TOKEN header (anti-CSRF security) to backend
-            if (token !== null && !req.headers.has(requestCsrfHeader)) {
-                req = req.clone({ headers: req.headers.set(requestCsrfHeader, token) });
+            if (token !== null && !req.headers.has(XSRF_REQUEST_HEADER)) {
+                req = req.clone({ headers: req.headers.set(XSRF_REQUEST_HEADER, token) });
             }
         }
         // Pass to next interceptor, but intercept EVERY response event as well
@@ -82,9 +84,9 @@ export class XsrfInterceptor implements HttpInterceptor {
                 if (response instanceof HttpResponse) {
                     // For every response that comes back, check for the custom
                     // DSPACE-XSRF-TOKEN header sent from the backend.
-                    if (response.headers.has(responseCsrfHeader)) {
+                    if (response.headers.has(XSRF_RESPONSE_HEADER)) {
                         // value of header is a new XSRF token
-                        this.saveXsrfToken(response.headers.get(responseCsrfHeader));
+                        this.saveXsrfToken(response.headers.get(XSRF_RESPONSE_HEADER));
                     }
                 }
             }),
@@ -92,9 +94,9 @@ export class XsrfInterceptor implements HttpInterceptor {
                 if (error instanceof HttpErrorResponse) {
                     // For every error that comes back, also check for the custom
                     // DSPACE-XSRF-TOKEN header sent from the backend.
-                    if (error.headers.has(responseCsrfHeader)) {
+                    if (error.headers.has(XSRF_RESPONSE_HEADER)) {
                         // value of header is a new XSRF token
-                        this.saveXsrfToken(error.headers.get(responseCsrfHeader));
+                        this.saveXsrfToken(error.headers.get(XSRF_RESPONSE_HEADER));
                     }
                 }
                 // Return error response as is.
@@ -111,7 +113,7 @@ export class XsrfInterceptor implements HttpInterceptor {
         // Save token value as a *new* value of our client-side XSRF-TOKEN cookie.
         // This is the cookie that is parsed by Angular's tokenExtractor(),
         // which we will send back in the X-XSRF-TOKEN header per Angular best practices.
-        this.cookieService.remove('XSRF-TOKEN');
-        this.cookieService.set('XSRF-TOKEN', token);
+        this.cookieService.remove(XSRF_COOKIE);
+        this.cookieService.set(XSRF_COOKIE, token);
     }
 }

src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.scss

@@ -1,5 +1,3 @@
-$submission-relationship-thumbnail-width: 80px;
-
 .person-thumbnail {
-    width: $submission-relationship-thumbnail-width;
+    width: var(--ds-submission-relationship-thumbnail-width);
 }

src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.scss

@@ -1,5 +1,3 @@
-$submission-relationship-thumbnail-width: 80px;
-
 .person-thumbnail {
-    width: $submission-relationship-thumbnail-width;
+  width: var(--ds-submission-relationship-thumbnail-width);
 }

src/app/footer/footer.component.scss

@@ -1,40 +1,42 @@
-$footer-bg: $gray-100;
-$footer-border: 1px solid darken($footer-bg, 10%);
-$footer-padding: $spacer * 1.5;
-$footer-logo-height: 55px;
+:host {
+  --ds-footer-bg: var(--bs-gray-100);
+  --ds-footer-border: 1px solid var(--bs-gray-300);
+  --ds-footer-padding: calc(var(--bs-spacer) * 1.5);
+  --ds-footer-logo-height: 55px;
 
-.footer {
-    background-color: $footer-bg;
-    border-top: $footer-border;
+  .footer {
+    background-color: var(--ds-footer-bg);
+    border-top: var(--ds-footer-border);
     text-align: center;
-    padding: $footer-padding;
-    padding-bottom: $spacer;
+    padding: var(--ds-footer-padding);
+    padding-bottom: var(--bs-spacer);
 
     p {
-        margin: 0;
+      margin: 0;
     }
 
     img {
-        height: $footer-logo-height;
+      height: var(--ds-footer-logo-height);
     }
 
     ul {
-        padding-top: $spacer * 0.5;
+      padding-top: calc(var(--bs-spacer) * 0.5);
 
-        li {
-            display: inline-flex;
-            a {
-                padding: 0 $spacer/2;
-                color: inherit
-            }
-
-            &:not(:last-child) {
-                &:after {
-                    content: '';
-                    border-right: 1px map-get($theme-colors, secondary) solid;
-                }
-
-            }
+      li {
+        display: inline-flex;
+        a {
+          padding: 0 calc(var(--bs-spacer) / 2);
+          color: inherit
         }
+
+        &:not(:last-child) {
+          &:after {
+            content: '';
+            border-right: 1px var(--bs-secondary) solid;
+          }
+
+        }
+      }
     }
+  }
 }

src/app/header-nav-wrapper/header-navbar-wrapper.component.scss

@@ -1,6 +1,6 @@
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     :host.open {
-        background-color: $white;
+        background-color: var(--bs-white);
         top: 0;
         position: sticky;
     }

src/app/header/header.component.scss

@@ -1,7 +1,7 @@
 .navbar-brand img {
-    height: $header-logo-height;
+    height: var(--ds-header-logo-height);
     @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-        height: $header-logo-height-xs;
+        height: var(--ds-header-logo-height-xs);
     }
 }
 .navbar-toggler .navbar-toggler-icon {
@@ -11,10 +11,10 @@
 
 .navbar ::ng-deep {
   a {
-    color: $header-icon-color;
+    color: var(--ds-header-icon-color);
 
     &:hover, &focus {
-      color: darken($header-icon-color, 15%);
+      color: var(--ds-header-icon-color-hover);
     }
   }
 }

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss

@@ -4,8 +4,8 @@
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     ::ng-deep a.nav-link {
-        padding-right: $spacer;
-        padding-left: $spacer;
+        padding-right: var(--bs-spacer);
+        padding-left: var(--bs-spacer);
         white-space: nowrap;
     }
 }
@@ -15,7 +15,7 @@
     .dropdown-toggle {
         &:after {
             float: right;
-            margin-top: $spacer/2;
+            margin-top: calc(var(--bs-spacer) / 2);
         }
     }
     .dropdown-menu {

src/app/navbar/navbar.component.scss

@@ -1,5 +1,5 @@
 nav.navbar {
-    border-bottom: 1px $gray-400 solid;
+    border-bottom: 1px var(--bs-gray-400) solid;
     align-items: baseline;
 }
 
@@ -7,7 +7,7 @@ nav.navbar {
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     .navbar {
         width: 100%;
-        background-color: $white;
+        background-color: var(--bs-white);
         position: absolute;
         overflow: hidden;
         height: 0;
@@ -19,8 +19,8 @@ nav.navbar {
 
 @media screen and (min-width: map-get($grid-breakpoints, md)) {
     .reset-padding-md {
-        margin-left: -$spacer/2;
-        margin-right: -$spacer/2;
+        margin-left: calc(var(--bs-spacer) / -2);
+        margin-right: calc(var(--bs-spacer) / -2);
     }
 }
 
@@ -28,7 +28,7 @@ nav.navbar {
 .navbar-expand-md.navbar-container {
     @media screen and (max-width: map-get($grid-breakpoints, md)) {
         > .container {
-            padding: 0 $spacer;
+            padding: 0 var(--bs-spacer);
         }
         padding: 0;
     }

src/app/navbar/navbar.component.ts

@@ -85,5 +85,4 @@ export class NavbarComponent extends MenuComponent {
     })));
 
   }
-
 }

src/app/navbar/navbar.effects.ts

@@ -12,6 +12,7 @@ import {
 import { MenuID } from '../shared/menu/initial-menus-state';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuState } from '../shared/menu/menu.reducer';
+import { NoOpAction } from '../shared/ngrx/no-op.action';
 
 @Injectable()
 export class NavbarEffects {
@@ -51,7 +52,7 @@ export class NavbarEffects {
                 return new CollapseMenuAction(MenuID.PUBLIC);
               }
             }
-            return { type: 'NO_ACTION' };
+            return new NoOpAction();
           }));
       })
     );

src/app/navbar/navbar.module.ts

@@ -9,6 +9,7 @@ import { NavbarSectionComponent } from './navbar-section/navbar-section.componen
 import { ExpandableNavbarSectionComponent } from './expandable-navbar-section/expandable-navbar-section.component';
 import { NavbarComponent } from './navbar.component';
 import { MenuModule } from '../shared/menu/menu.module';
+import { FormsModule } from '@angular/forms';
 
 const effects = [
   NavbarEffects
@@ -24,6 +25,7 @@ const ENTRY_COMPONENTS = [
   imports: [
     CommonModule,
     MenuModule,
+    FormsModule,
     EffectsModule.forFeature(effects),
     CoreModule.forRoot()
   ],

src/app/root/root.component.html

@@ -0,0 +1,30 @@
+<div class="outer-wrapper" *ngIf="isNotAuthBlocking; else authLoader">
+  <ds-admin-sidebar></ds-admin-sidebar>
+  <div class="inner-wrapper"  [@slideSidebarPadding]="{
+     value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
+     params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
+    }">
+    <ds-header-navbar-wrapper></ds-header-navbar-wrapper>
+
+    <ds-notifications-board
+      [options]="notificationOptions">
+    </ds-notifications-board>
+    <main class="main-content">
+      <div class="container">
+        <ds-breadcrumbs></ds-breadcrumbs>
+      </div>
+
+      <div class="container" *ngIf="isLoading">
+        <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
+      </div>
+      <router-outlet></router-outlet>
+    </main>
+
+    <ds-footer></ds-footer>
+  </div>
+</div>
+<ng-template #authLoader>
+  <div class="text-center ds-full-screen-loader d-flex align-items-center flex-column justify-content-center">
+    <ds-loading [showMessage]="false"></ds-loading>
+  </div>
+</ng-template>

src/app/root/root.component.spec.ts

@@ -0,0 +1,77 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RootComponent } from './root.component';
+import { CommonModule } from '@angular/common';
+import { StoreModule } from '@ngrx/store';
+import { authReducer } from '../core/auth/auth.reducer';
+import { storeModuleConfig } from '../app.reducer';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
+import { NativeWindowRef, NativeWindowService } from '../core/services/window.service';
+import { MetadataService } from '../core/metadata/metadata.service';
+import { MetadataServiceMock } from '../shared/mocks/metadata-service.mock';
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+import { AngularticsProviderMock } from '../shared/mocks/angulartics-provider.service.mock';
+import { Angulartics2DSpace } from '../statistics/angulartics/dspace-provider';
+import { AuthService } from '../core/auth/auth.service';
+import { AuthServiceMock } from '../shared/mocks/auth.service.mock';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterMock } from '../shared/mocks/router.mock';
+import { MockActivatedRoute } from '../shared/mocks/active-router.mock';
+import { MenuService } from '../shared/menu/menu.service';
+import { CSSVariableService } from '../shared/sass-helper/sass-helper.service';
+import { CSSVariableServiceStub } from '../shared/testing/css-variable-service.stub';
+import { HostWindowService } from '../shared/host-window.service';
+import { HostWindowServiceStub } from '../shared/testing/host-window-service.stub';
+import { LocaleService } from '../core/locale/locale.service';
+import { provideMockStore } from '@ngrx/store/testing';
+import { RouteService } from '../core/services/route.service';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { MenuServiceStub } from '../shared/testing/menu-service.stub';
+
+describe('RootComponent', () => {
+  let component: RootComponent;
+  let fixture: ComponentFixture<RootComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        StoreModule.forRoot(authReducer, storeModuleConfig),
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+      ],
+      declarations: [RootComponent], // declare the test 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() },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
+        { provide: MenuService, useValue: new MenuServiceStub() },
+        { provide: CSSVariableService, useClass: CSSVariableServiceStub },
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
+        { provide: LocaleService, useValue: {} },
+        provideMockStore({ core: { auth: { loading: false } } } as any),
+        RootComponent,
+        RouteService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RootComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/root/root.component.ts

@@ -0,0 +1,79 @@
+import { map } from 'rxjs/operators';
+import { Component, Inject, OnInit, Optional, Input } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { combineLatest as combineLatestObservable, Observable, of } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+
+import { MetadataService } from '../core/metadata/metadata.service';
+import { HostWindowState } from '../shared/search/host-window.reducer';
+import { NativeWindowRef, NativeWindowService } from '../core/services/window.service';
+import { AuthService } from '../core/auth/auth.service';
+import { CSSVariableService } from '../shared/sass-helper/sass-helper.service';
+import { MenuService } from '../shared/menu/menu.service';
+import { MenuID } from '../shared/menu/initial-menus-state';
+import { HostWindowService } from '../shared/host-window.service';
+import { ThemeConfig } from '../../config/theme.model';
+import { Angulartics2DSpace } from '../statistics/angulartics/dspace-provider';
+import { environment } from '../../environments/environment';
+import { LocaleService } from '../core/locale/locale.service';
+import { KlaroService } from '../shared/cookies/klaro.service';
+import { slideSidebarPadding } from '../shared/animations/slide';
+
+@Component({
+  selector: 'ds-root',
+  templateUrl: './root.component.html',
+  styleUrls: ['./root.component.scss'],
+  animations: [slideSidebarPadding],
+})
+export class RootComponent implements OnInit {
+  sidebarVisible: Observable<boolean>;
+  slideSidebarOver: Observable<boolean>;
+  collapsedSidebarWidth: Observable<string>;
+  totalSidebarWidth: Observable<string>;
+  theme: Observable<ThemeConfig> = of({} as any);
+  notificationOptions = environment.notifications;
+  models;
+
+  /**
+   * Whether or not the authentication is currently blocking the UI
+   */
+  @Input() isNotAuthBlocking: boolean;
+
+  /**
+   * Whether or not the the application is loading;
+   */
+  @Input() isLoading: boolean;
+
+  constructor(
+    @Inject(NativeWindowService) private _window: NativeWindowRef,
+    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,
+    @Optional() private cookiesService: KlaroService
+  ) {
+  }
+
+  ngOnInit() {
+    this.sidebarVisible = this.menuService.isMenuVisible(MenuID.ADMIN);
+
+    this.collapsedSidebarWidth = this.cssService.getVariable('collapsedSidebarWidth');
+    this.totalSidebarWidth = this.cssService.getVariable('totalSidebarWidth');
+
+    const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
+    this.slideSidebarOver = combineLatestObservable(sidebarCollapsed, this.windowService.isXsOrSm())
+      .pipe(
+        map(([collapsed, mobile]) => collapsed || mobile)
+      );
+  }
+}

src/app/root/themed-root.component.ts

@@ -0,0 +1,35 @@
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { RootComponent } from './root.component';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-themed-root',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedRootComponent extends ThemedComponent<RootComponent> {
+  /**
+   * Whether or not the authentication is currently blocking the UI
+   */
+  @Input() isNotAuthBlocking: boolean;
+
+  /**
+   * Whether or not the the application is loading;
+   */
+  @Input() isLoading: boolean;
+
+  protected inAndOutputNames: (keyof RootComponent & keyof this)[] = ['isLoading', 'isNotAuthBlocking'];
+
+  protected getComponentName(): string {
+    return 'RootComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/root/root.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./root.component`);
+  }
+
+}

src/app/search-navbar/search-navbar.component.scss

@@ -1,5 +1,5 @@
 input[type="text"] {
-  margin-top: -0.5 * $font-size-base;
+  margin-top: calc(-0.5 * var(--bs-font-size-base));
 
   &:focus {
     background-color: rgba(255, 255, 255, 0.5) !important;

src/app/shared/chips/chips.component.scss

@@ -1,5 +1,5 @@
 .chip-selected {
-  background-color: map-get($theme-colors, info) !important;
+  background-color: var(--bs-info) !important;
 }
 
 .chip-label {

src/app/shared/collection-dropdown/collection-dropdown.component.scss

@@ -1,15 +1,15 @@
 .scrollable-menu {
   height: auto;
-  max-height: $dropdown-menu-max-height;
+  max-height: var(--ds-dropdown-menu-max-height);
   overflow-x: hidden;
 }
 
 .collection-item {
-  border-bottom: $dropdown-border-width solid $dropdown-border-color;
+  border-bottom: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
 }
 
 #collectionControlsDropdownMenu {
   outline: 0;
   left: 0 !important;
-  box-shadow: $btn-focus-box-shadow;
+  box-shadow: var(--bs-btn-focus-box-shadow);
 }

src/app/shared/dso-page/dso-page-edit-button/dso-page-edit-button.component.scss

@@ -1,3 +1,3 @@
 .btn-dark {
-  background-color: $admin-sidebar-bg;
+  background-color: var(--ds-admin-sidebar-bg);
 }