Merge branch 'main' into feature/CST-9636

# Conflicts:
#	src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.ts

.browserslistrc

@@ -1,17 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.github/workflows/build.yml

@@ -31,6 +31,8 @@ jobs:
       # When Chrome version is specified, we pin to a specific version of Chrome
       # Comment this out to use the latest release
       #CHROME_VERSION: "90.0.4430.212-1"
+      # Bump Node heap size (OOM in CI after upgrading to Angular 15)
+      NODE_OPTIONS: '--max-old-space-size=4096'
     strategy:
       # Create a matrix of Node versions to test against (in parallel)
       matrix:

angular.json

@@ -274,9 +274,18 @@
       }
     }
   },
-  "defaultProject": "dspace-angular",
   "cli": {
     "analytics": false,
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

package.json

@@ -17,9 +17,9 @@
     "build:stats": "ng build --stats-json",
     "build:prod": "yarn run build:ssr",
     "build:ssr": "ng build --configuration production && ng run dspace-angular:server:production",
-    "test": "ng test --sourceMap=true --watch=false --configuration test",
+    "test": "ng test --source-map=true --watch=false --configuration test",
-    "test:watch": "nodemon --exec \"ng test --sourceMap=true --watch=true --configuration test\"",
+    "test:watch": "nodemon --exec \"ng test --source-map=true --watch=true --configuration test\"",
-    "test:headless": "ng test --sourceMap=true --watch=false --configuration test --browsers=ChromeHeadless --code-coverage",
+    "test:headless": "ng test --source-map=true --watch=false --configuration test --browsers=ChromeHeadless --code-coverage",
     "lint": "ng lint",
     "lint-fix": "ng lint --fix=true",
     "e2e": "ng e2e",
@@ -55,136 +55,136 @@
     "ts-node": "10.2.1"
   },
   "dependencies": {
-    "@angular/animations": "~13.3.12",
+    "@angular/animations": "^15.2.8",
-    "@angular/cdk": "^13.2.6",
+    "@angular/cdk": "^15.2.8",
-    "@angular/common": "~13.3.12",
+    "@angular/common": "^15.2.8",
-    "@angular/compiler": "~13.3.12",
+    "@angular/compiler": "^15.2.8",
-    "@angular/core": "~13.3.12",
+    "@angular/core": "^15.2.8",
-    "@angular/forms": "~13.3.12",
+    "@angular/forms": "^15.2.8",
-    "@angular/localize": "13.3.12",
+    "@angular/localize": "15.2.8",
-    "@angular/platform-browser": "~13.3.12",
+    "@angular/platform-browser": "^15.2.8",
-    "@angular/platform-browser-dynamic": "~13.3.12",
+    "@angular/platform-browser-dynamic": "^15.2.8",
-    "@angular/platform-server": "~13.3.12",
+    "@angular/platform-server": "^15.2.8",
-    "@angular/router": "~13.3.12",
+    "@angular/router": "^15.2.8",
-    "@babel/runtime": "7.17.2",
+    "@babel/runtime": "7.21.0",
     "@kolkov/ngx-gallery": "^2.0.1",
     "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "@material-ui/icons": "^4.11.3",
     "@ng-bootstrap/ng-bootstrap": "^11.0.0",
     "@ng-dynamic-forms/core": "^15.0.0",
     "@ng-dynamic-forms/ui-ng-bootstrap": "^15.0.0",
-    "@ngrx/effects": "^13.0.2",
+    "@ngrx/effects": "^15.4.0",
-    "@ngrx/router-store": "^13.0.2",
+    "@ngrx/router-store": "^15.4.0",
-    "@ngrx/store": "^13.0.2",
+    "@ngrx/store": "^15.4.0",
-    "@nguniversal/express-engine": "^13.0.2",
+    "@nguniversal/express-engine": "^15.2.1",
-    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/core": "^14.0.0",
-    "@nicky-lenaers/ngx-scroll-to": "^13.0.0",
+    "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "@types/grecaptcha": "^3.0.4",
     "angular-idle-preload": "3.0.0",
-    "angulartics2": "^12.0.0",
+    "angulartics2": "^12.2.0",
     "axios": "^0.27.2",
     "bootstrap": "^4.6.1",
     "cerialize": "0.1.18",
-    "cli-progress": "^3.8.0",
+    "cli-progress": "^3.12.0",
     "colors": "^1.4.0",
     "compression": "^1.7.4",
-    "cookie-parser": "1.4.5",
+    "cookie-parser": "1.4.6",
-    "core-js": "^3.7.0",
+    "core-js": "^3.30.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^1.3.7",
-    "deepmerge": "^4.2.2",
+    "deepmerge": "^4.3.1",
-    "ejs": "^3.1.8",
+    "ejs": "^3.1.9",
-    "express": "^4.17.1",
+    "express": "^4.18.2",
     "express-rate-limit": "^5.1.3",
-    "fast-json-patch": "^3.0.0-1",
+    "fast-json-patch": "^3.1.1",
     "filesize": "^6.1.0",
     "http-proxy-middleware": "^1.0.5",
-    "isbot": "^3.6.5",
+    "isbot": "^3.6.10",
     "js-cookie": "2.2.1",
     "js-yaml": "^4.1.0",
-    "json5": "^2.2.2",
+    "json5": "^2.2.3",
-    "jsonschema": "1.4.0",
+    "jsonschema": "1.4.1",
     "jwt-decode": "^3.1.2",
     "klaro": "^0.7.18",
     "lodash": "^4.17.21",
     "lru-cache": "^7.14.1",
     "markdown-it": "^13.0.1",
-    "markdown-it-mathjax3": "^4.3.1",
+    "markdown-it-mathjax3": "^4.3.2",
     "mirador": "^3.3.0",
     "mirador-dl-plugin": "^0.13.0",
     "mirador-share-plugin": "^0.11.0",
     "morgan": "^1.10.0",
-    "ng-mocks": "^13.1.1",
+    "ng-mocks": "^14.10.0",
     "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.3",
-    "ngx-infinite-scroll": "^10.0.1",
+    "ngx-infinite-scroll": "^15.0.0",
-    "ngx-pagination": "5.0.0",
+    "ngx-pagination": "6.0.3",
     "ngx-sortablejs": "^11.1.0",
-    "ngx-ui-switch": "^13.0.2",
+    "ngx-ui-switch": "^14.0.3",
     "nouislider": "^14.6.3",
-    "pem": "1.14.4",
+    "pem": "1.14.7",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
-    "react-copy-to-clipboard": "^5.0.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "reflect-metadata": "^0.1.13",
-    "rxjs": "^7.5.5",
+    "rxjs": "^7.8.0",
-    "sanitize-html": "^2.7.2",
+    "sanitize-html": "^2.10.0",
-    "sortablejs": "1.13.0",
+    "sortablejs": "1.15.0",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "~13.1.0",
+    "@angular-builders/custom-webpack": "~15.0.0",
-    "@angular-devkit/build-angular": "~13.3.10",
+    "@angular-devkit/build-angular": "^15.2.6",
-    "@angular-eslint/builder": "13.1.0",
+    "@angular-eslint/builder": "15.2.1",
-    "@angular-eslint/eslint-plugin": "13.1.0",
+    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular-eslint/eslint-plugin-template": "13.1.0",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
-    "@angular-eslint/schematics": "13.1.0",
+    "@angular-eslint/schematics": "15.2.1",
-    "@angular-eslint/template-parser": "13.1.0",
+    "@angular-eslint/template-parser": "15.2.1",
-    "@angular/cli": "~13.3.10",
+    "@angular/cli": "^15.2.6",
-    "@angular/compiler-cli": "~13.3.12",
+    "@angular/compiler-cli": "^15.2.8",
-    "@angular/language-service": "~13.3.12",
+    "@angular/language-service": "^15.2.8",
     "@cypress/schematic": "^1.5.0",
-    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-free": "^6.4.0",
-    "@ngrx/store-devtools": "^13.0.2",
+    "@ngrx/store-devtools": "^15.4.0",
-    "@ngtools/webpack": "^13.2.6",
+    "@ngtools/webpack": "^15.2.6",
-    "@nguniversal/builders": "^13.1.1",
+    "@nguniversal/builders": "^15.2.1",
     "@types/deep-freeze": "0.1.2",
-    "@types/ejs": "^3.1.1",
+    "@types/ejs": "^3.1.2",
-    "@types/express": "^4.17.9",
+    "@types/express": "^4.17.17",
     "@types/jasmine": "~3.6.0",
     "@types/js-cookie": "2.2.6",
-    "@types/lodash": "^4.14.165",
+    "@types/lodash": "^4.14.194",
     "@types/node": "^14.14.9",
-    "@types/sanitize-html": "^2.6.2",
+    "@types/sanitize-html": "^2.9.0",
-    "@typescript-eslint/eslint-plugin": "5.11.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "5.11.0",
+    "@typescript-eslint/parser": "^5.59.1",
-    "axe-core": "^4.4.3",
+    "axe-core": "^4.7.0",
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
-    "cypress": "12.9.0",
+    "cypress": "12.10.0",
-    "cypress-axe": "^1.1.0",
+    "cypress-axe": "^1.4.0",
     "deep-freeze": "0.0.1",
-    "eslint": "^8.2.0",
+    "eslint": "^8.39.0",
-    "eslint-plugin-deprecation": "^1.3.2",
+    "eslint-plugin-deprecation": "^1.4.1",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsdoc": "^39.6.4",
     "eslint-plugin-jsonc": "^2.6.0",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "express-static-gzip": "^2.1.5",
+    "express-static-gzip": "^2.1.7",
     "jasmine-core": "^3.8.0",
     "jasmine-marbles": "0.9.2",
-    "karma": "^6.3.14",
+    "karma": "^6.4.2",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
     "ngx-mask": "^13.1.7",
-    "nodemon": "^2.0.20",
+    "nodemon": "^2.0.22",
-    "postcss": "^8.1",
+    "postcss": "^8.4",
     "postcss-apply": "0.12.0",
     "postcss-import": "^14.0.0",
     "postcss-loader": "^4.0.3",
@@ -194,14 +194,14 @@
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
     "rxjs-spy": "^8.0.2",
-    "sass": "~1.33.0",
+    "sass": "~1.62.0",
     "sass-loader": "^12.6.0",
-    "sass-resources-loader": "^2.1.1",
+    "sass-resources-loader": "^2.2.5",
     "ts-node": "^8.10.2",
-    "typescript": "~4.5.5",
+    "typescript": "~4.8.4",
-    "webpack": "^5.76.0",
+    "webpack": "5.76.1",
-    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^4.5.0"
+    "webpack-dev-server": "^4.13.3"
   }
 }

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

@@ -68,18 +68,18 @@
               <tr *ngFor="let epersonDto of (ePeopleDto$ | async)?.page"
                   [ngClass]="{'table-primary' : isActive(epersonDto.eperson) | async}">
                 <td>{{epersonDto.eperson.id}}</td>
-                <td>{{epersonDto.eperson.name}}</td>
+                <td>{{ dsoNameService.getName(epersonDto.eperson) }}</td>
                 <td>{{epersonDto.eperson.email}}</td>
                 <td>
                   <div class="btn-group edit-field">
                     <button (click)="toggleEditEPerson(epersonDto.eperson)"
                             class="btn btn-outline-primary btn-sm access-control-editEPersonButton"
-                            title="{{labelPrefix + 'table.edit.buttons.edit' | translate: {name: epersonDto.eperson.name} }}">
+                            title="{{labelPrefix + 'table.edit.buttons.edit' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
                       <i class="fas fa-edit fa-fw"></i>
                     </button>
                     <button [disabled]="!epersonDto.ableToDelete" (click)="deleteEPerson(epersonDto.eperson)"
                             class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
-                            title="{{labelPrefix + 'table.edit.buttons.remove' | translate: {name: epersonDto.eperson.name} }}">
+                            title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
                       <i class="fas fa-trash-alt fa-fw"></i>
                     </button>
                   </div>

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

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
@@ -21,6 +21,7 @@ import { RequestService } from '../../core/data/request.service';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { NoContent } from '../../core/shared/NoContent.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-epeople-registry',
@@ -89,11 +90,13 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
               private translateService: TranslateService,
               private notificationsService: NotificationsService,
               private authorizationService: AuthorizationDataService,
-              private formBuilder: FormBuilder,
+              private formBuilder: UntypedFormBuilder,
               private router: Router,
               private modalService: NgbModal,
               private paginationService: PaginationService,
-              public requestService: RequestService) {
+              public requestService: RequestService,
+              public dsoNameService: DSONameService,
+  ) {
     this.currentSearchQuery = '';
     this.currentSearchScope = 'metadata';
     this.searchForm = this.formBuilder.group(({
@@ -121,7 +124,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
     this.subs.push(this.ePeople$.pipe(
       switchMap((epeople: PaginatedList<EPerson>) => {
         if (epeople.pageInfo.totalElements > 0) {
-          return combineLatest(...epeople.page.map((eperson) => {
+          return combineLatest([...epeople.page.map((eperson: EPerson) => {
             return this.authorizationService.isAuthorized(FeatureID.CanDelete, hasValue(eperson) ? eperson.self : undefined).pipe(
               map((authorized) => {
                 const epersonDtoModel: EpersonDtoModel = new EpersonDtoModel();
@@ -130,7 +133,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
                 return epersonDtoModel;
               })
             );
-          })).pipe(map((dtos: EpersonDtoModel[]) => {
+          })]).pipe(map((dtos: EpersonDtoModel[]) => {
             return buildPaginatedList(epeople.pageInfo, dtos);
           }));
         } else {
@@ -237,7 +240,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
           if (hasValue(ePerson.id)) {
             this.epersonService.deleteEPerson(ePerson).pipe(getFirstCompletedRemoteData()).subscribe((restResponse: RemoteData<NoContent>) => {
               if (restResponse.hasSucceeded) {
-                this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', {name: ePerson.name}));
+                this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', {name: this.dsoNameService.getName(ePerson)}));
               } else {
                 this.notificationsService.error('Error occured when trying to delete EPerson with id: ' + ePerson.id + ' with code: ' + restResponse.statusCode + ' and message: ' + restResponse.errorMessage);
               }

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

@@ -65,9 +65,13 @@
         <tbody>
         <tr *ngFor="let group of (groups | async)?.payload?.page">
           <td class="align-middle">{{group.id}}</td>
-          <td class="align-middle"><a (click)="groupsDataService.startEditingNewGroup(group)"
+          <td class="align-middle">
-                 [routerLink]="[groupsDataService.getGroupEditPageRouterLink(group)]">{{group.name}}</a></td>
+            <a (click)="groupsDataService.startEditingNewGroup(group)"
-          <td class="align-middle">{{(group.object | async)?.payload?.name}}</td>
+               [routerLink]="[groupsDataService.getGroupEditPageRouterLink(group)]">
+            {{ dsoNameService.getName(group) }}
+          </a>
+          </td>
+          <td class="align-middle">{{ dsoNameService.getName(undefined) }}</td>
         </tr>
         </tbody>
       </table>

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

@@ -2,7 +2,7 @@ import { Observable, of as observableOf } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
@@ -116,9 +116,9 @@ describe('EPersonFormComponent', () => {
             const controlModel = model;
             const controlState = { value: controlModel.value, disabled: controlModel.disabled };
             const controlOptions = this.createAbstractControlOptions(controlModel.validators, controlModel.asyncValidators, controlModel.updateOn);
-            controls[model.id] = new FormControl(controlState, controlOptions);
+            controls[model.id] = new UntypedFormControl(controlState, controlOptions);
         });
-        return new FormGroup(controls, options);
+        return new UntypedFormGroup(controls, options);
       },
       createAbstractControlOptions(validatorsConfig = null, asyncValidatorsConfig = null, updateOn = null) {
         return {

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

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import {
   DynamicCheckboxModel,
   DynamicFormControlModel,
@@ -37,6 +37,7 @@ import { ValidateEmailNotTaken } from './validators/email-taken.validator';
 import { Registration } from '../../../core/shared/registration.model';
 import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';
 import { TYPE_REQUEST_FORGOT } from '../../../register-email-form/register-email-form.component';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-eperson-form',
@@ -108,7 +109,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
   /**
    * A FormGroup that combines all inputs
    */
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
 
   /**
    * An EventEmitter that's fired whenever the form is being submitted
@@ -192,6 +193,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     private paginationService: PaginationService,
     public requestService: RequestService,
     private epersonRegistrationService: EpersonRegistrationService,
+    public dsoNameService: DSONameService,
   ) {
     this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
       this.epersonInitial = eperson;
@@ -212,14 +214,14 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    */
   initialisePage() {
 
-    observableCombineLatest(
+    observableCombineLatest([
       this.translateService.get(`${this.messagePrefix}.firstName`),
       this.translateService.get(`${this.messagePrefix}.lastName`),
       this.translateService.get(`${this.messagePrefix}.email`),
       this.translateService.get(`${this.messagePrefix}.canLogIn`),
       this.translateService.get(`${this.messagePrefix}.requireCertificate`),
       this.translateService.get(`${this.messagePrefix}.emailHint`),
-    ).subscribe(([firstName, lastName, email, canLogIn, requireCertificate, emailHint]) => {
+    ]).subscribe(([firstName, lastName, email, canLogIn, requireCertificate, emailHint]) => {
       this.firstName = new DynamicInputModel({
         id: 'firstName',
         label: firstName,
@@ -386,10 +388,10 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       getFirstCompletedRemoteData()
     ).subscribe((rd: RemoteData<EPerson>) => {
       if (rd.hasSucceeded) {
-        this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.created.success', { name: ePersonToCreate.name }));
+        this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.created.success', { name: this.dsoNameService.getName(ePersonToCreate) }));
         this.submitForm.emit(ePersonToCreate);
       } else {
-        this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.created.failure', { name: ePersonToCreate.name }));
+        this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.created.failure', { name: this.dsoNameService.getName(ePersonToCreate) }));
         this.cancelForm.emit();
       }
     });
@@ -425,10 +427,10 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     const response = this.epersonService.updateEPerson(editedEperson);
     response.pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<EPerson>) => {
       if (rd.hasSucceeded) {
-        this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.edited.success', { name: editedEperson.name }));
+        this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.edited.success', { name: this.dsoNameService.getName(editedEperson) }));
         this.submitForm.emit(editedEperson);
       } else {
-        this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.edited.failure', { name: editedEperson.name }));
+        this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.edited.failure', { name: this.dsoNameService.getName(editedEperson) }));
         this.cancelForm.emit();
       }
     });
@@ -476,7 +478,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
           if (hasValue(eperson.id)) {
             this.epersonService.deleteEPerson(eperson).pipe(getFirstCompletedRemoteData()).subscribe((restResponse: RemoteData<NoContent>) => {
               if (restResponse.hasSucceeded) {
-                this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', { name: eperson.name }));
+                this.notificationsService.success(this.translateService.get(this.labelPrefix + 'notification.deleted.success', { name: this.dsoNameService.getName(eperson) }));
                 this.submitForm.emit();
               } else {
                 this.notificationsService.error('Error occured when trying to delete EPerson with id: ' + eperson.id + ' with code: ' + restResponse.statusCode + ' and message: ' + restResponse.errorMessage);
@@ -554,7 +556,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       .subscribe((list: PaginatedList<EPerson>) => {
         if (list.totalElements > 0) {
           this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.' + notificationSection + '.failure.emailInUse', {
-            name: ePerson.name,
+            name: this.dsoNameService.getName(ePerson),
             email: ePerson.email
           }));
         }

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

@@ -26,7 +26,7 @@
       <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
                 [content]="messagePrefix + '.alert.permanent'"></ds-alert>
       <ds-alert *ngIf="!(canEdit$ | async) && (groupDataService.getActiveGroup() | async)" [type]="AlertTypeEnum.Warning"
-                [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: (getLinkedDSO(groupBeingEdited) | async)?.payload?.name, comcol: (getLinkedDSO(groupBeingEdited) | async)?.payload?.type, comcolEditRolesRoute: (getLinkedEditRolesRoute(groupBeingEdited) | async) })">
+                [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: dsoNameService.getName((getLinkedDSO(groupBeingEdited) | async)?.payload), comcol: (getLinkedDSO(groupBeingEdited) | async)?.payload?.type, comcolEditRolesRoute: (getLinkedEditRolesRoute(groupBeingEdited) | async) })">
       </ds-alert>
 
       <ds-form [formId]="formId"

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

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -36,6 +36,8 @@ import { NotificationsServiceStub } from '../../../shared/testing/notifications-
 import { Operation } from 'fast-json-patch';
 import { ValidateGroupExists } from './validators/group-exists.validator';
 import { NoContent } from '../../../core/shared/NoContent.model';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../shared/mocks/dso-name.service.mock';
 
 describe('GroupFormComponent', () => {
   let component: GroupFormComponent;
@@ -130,9 +132,9 @@ describe('GroupFormComponent', () => {
             const controlModel = model;
             const controlState = { value: controlModel.value, disabled: controlModel.disabled };
             const controlOptions = this.createAbstractControlOptions(controlModel.validators, controlModel.asyncValidators, controlModel.updateOn);
-            controls[model.id] = new FormControl(controlState, controlOptions);
+            controls[model.id] = new UntypedFormControl(controlState, controlOptions);
         });
-        return new FormGroup(controls, options);
+        return new UntypedFormGroup(controls, options);
       },
       createAbstractControlOptions(validatorsConfig = null, asyncValidatorsConfig = null, updateOn = null) {
         return {
@@ -188,7 +190,7 @@ describe('GroupFormComponent', () => {
     translateService = getMockTranslateService();
     router = new RouterMock();
     notificationService = new NotificationsServiceStub();
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot({
           loader: {
@@ -198,7 +200,8 @@ describe('GroupFormComponent', () => {
         }),
       ],
       declarations: [GroupFormComponent],
-      providers: [GroupFormComponent,
+      providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: GroupDataService, useValue: groupsDataServiceStub },
         { provide: DSpaceObjectDataService, useValue: dsoDataServiceStub },
@@ -240,8 +243,8 @@ describe('GroupFormComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should emit a new group using the correct values', waitForAsync(() => {
+      it('should emit a new group using the correct values', (async () => {
-        fixture.whenStable().then(() => {
+        await fixture.whenStable().then(() => {
           expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
         });
       }));
@@ -303,8 +306,8 @@ describe('GroupFormComponent', () => {
         expect(groupsDataServiceStub.patch).toHaveBeenCalledWith(expected, operations);
       });
 
-      it('should emit the existing group using the correct new values', waitForAsync(() => {
+      it('should emit the existing group using the correct new values', (async () => {
-        fixture.whenStable().then(() => {
+        await fixture.whenStable().then(() => {
           expect(component.submitForm.emit).toHaveBeenCalledWith(expected2);
         });
       }));

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

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, HostListener, OnDestroy, OnInit, Output, ChangeDetectorRef } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import {
@@ -46,6 +46,7 @@ import { followLink } from '../../../shared/utils/follow-link-config.model';
 import { NoContent } from '../../../core/shared/NoContent.model';
 import { Operation } from 'fast-json-patch';
 import { ValidateGroupExists } from './validators/group-exists.validator';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { environment } from '../../../../environments/environment';
 
 @Component({
@@ -95,7 +96,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   /**
    * A FormGroup that combines all inputs
    */
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
 
   /**
    * An EventEmitter that's fired whenever the form is being submitted
@@ -134,7 +135,8 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   groupNameValueChangeSubscribe: Subscription;
 
 
-  constructor(public groupDataService: GroupDataService,
+  constructor(
+    public groupDataService: GroupDataService,
     private ePersonDataService: EPersonDataService,
     private dSpaceObjectDataService: DSpaceObjectDataService,
     private formBuilderService: FormBuilderService,
@@ -145,7 +147,9 @@ export class GroupFormComponent implements OnInit, OnDestroy {
     private authorizationService: AuthorizationDataService,
     private modalService: NgbModal,
     public requestService: RequestService,
-    protected changeDetectorRef: ChangeDetectorRef) {
+    protected changeDetectorRef: ChangeDetectorRef,
+    public dsoNameService: DSONameService,
+  ) {
   }
 
   ngOnInit() {
@@ -331,7 +335,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
       .subscribe((list: PaginatedList<Group>) => {
         if (list.totalElements > 0) {
           this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.' + notificationSection + '.failure.groupNameInUse', {
-            name: group.name
+            name: this.dsoNameService.getName(group),
           }));
         }
       }));
@@ -364,10 +368,10 @@ export class GroupFormComponent implements OnInit, OnDestroy {
       getFirstCompletedRemoteData()
     ).subscribe((rd: RemoteData<Group>) => {
       if (rd.hasSucceeded) {
-        this.notificationsService.success(this.translateService.get(this.messagePrefix + '.notification.edited.success', { name: rd.payload.name }));
+        this.notificationsService.success(this.translateService.get(this.messagePrefix + '.notification.edited.success', { name: this.dsoNameService.getName(rd.payload) }));
         this.submitForm.emit(rd.payload);
       } else {
-        this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.edited.failure', { name: group.name }));
+        this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.edited.failure', { name: this.dsoNameService.getName(group) }));
         this.cancelForm.emit();
       }
     });
@@ -427,11 +431,11 @@ export class GroupFormComponent implements OnInit, OnDestroy {
             this.groupDataService.delete(group.id).pipe(getFirstCompletedRemoteData())
               .subscribe((rd: RemoteData<NoContent>) => {
                 if (rd.hasSucceeded) {
-                  this.notificationsService.success(this.translateService.get(this.messagePrefix + '.notification.deleted.success', { name: group.name }));
+                  this.notificationsService.success(this.translateService.get(this.messagePrefix + '.notification.deleted.success', { name: this.dsoNameService.getName(group) }));
                   this.onCancel();
                 } else {
                   this.notificationsService.error(
-                    this.translateService.get(this.messagePrefix + '.notification.deleted.failure.title', { name: group.name }),
+                    this.translateService.get(this.messagePrefix + '.notification.deleted.failure.title', { name: this.dsoNameService.getName(group) }),
                     this.translateService.get(this.messagePrefix + '.notification.deleted.failure.content', { cause: rd.errorMessage }));
                 }
               });

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

@@ -57,8 +57,12 @@
         <tbody>
         <tr *ngFor="let ePerson of (ePeopleSearchDtos | async)?.page">
           <td class="align-middle">{{ePerson.eperson.id}}</td>
-          <td class="align-middle"><a (click)="ePersonDataService.startEditingNewEPerson(ePerson.eperson)"
+          <td class="align-middle">
-                 [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">{{ePerson.eperson.name}}</a></td>
+            <a (click)="ePersonDataService.startEditingNewEPerson(ePerson.eperson)"
+               [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">
+              {{ dsoNameService.getName(ePerson.eperson) }}
+            </a>
+          </td>
           <td class="align-middle">
             {{messagePrefix + '.table.email' | translate}}: {{ ePerson.eperson.email ? ePerson.eperson.email : '-' }}<br/>
             {{messagePrefix + '.table.netid' | translate}}: {{ ePerson.eperson.netid ? ePerson.eperson.netid : '-' }}
@@ -69,7 +73,7 @@
                       (click)="deleteMemberFromGroup(ePerson)"
                       [disabled]="actionConfig.remove.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.remove.css]"
-                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: {name: ePerson.eperson.name} }}">
+                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(ePerson.eperson) } }}">
                 <i [ngClass]="actionConfig.remove.icon"></i>
               </button>
 
@@ -77,7 +81,7 @@
                       (click)="addMemberToGroup(ePerson)"
                       [disabled]="actionConfig.add.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.add.css]"
-                      title="{{messagePrefix + '.table.edit.buttons.add' | translate: {name: ePerson.eperson.name} }}">
+                      title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(ePerson.eperson) } }}">
                 <i [ngClass]="actionConfig.add.icon"></i>
               </button>
             </div>
@@ -117,8 +121,12 @@
         <tbody>
         <tr *ngFor="let ePerson of (ePeopleMembersOfGroupDtos | async)?.page">
           <td class="align-middle">{{ePerson.eperson.id}}</td>
-          <td class="align-middle"><a (click)="ePersonDataService.startEditingNewEPerson(ePerson.eperson)"
+          <td class="align-middle">
-                 [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">{{ePerson.eperson.name}}</a></td>
+            <a (click)="ePersonDataService.startEditingNewEPerson(ePerson.eperson)"
+               [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">
+              {{ dsoNameService.getName(ePerson.eperson) }}
+            </a>
+          </td>
           <td class="align-middle">
             {{messagePrefix + '.table.email' | translate}}: {{ ePerson.eperson.email ? ePerson.eperson.email : '-' }}<br/>
             {{messagePrefix + '.table.netid' | translate}}: {{ ePerson.eperson.netid ? ePerson.eperson.netid : '-' }}
@@ -129,14 +137,14 @@
                       (click)="deleteMemberFromGroup(ePerson)"
                       [disabled]="actionConfig.remove.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.remove.css]"
-                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: {name: ePerson.eperson.name} }}">
+                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(ePerson.eperson) } }}">
                 <i [ngClass]="actionConfig.remove.icon"></i>
               </button>
               <button *ngIf="!ePerson.memberOfGroup"
                       (click)="addMemberToGroup(ePerson)"
                       [disabled]="actionConfig.add.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.add.css]"
-                      title="{{messagePrefix + '.table.edit.buttons.add' | translate: {name: ePerson.eperson.name} }}">
+                      title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(ePerson.eperson) } }}">
                 <i [ngClass]="actionConfig.add.icon"></i>
               </button>
             </div>

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

@@ -28,6 +28,8 @@ import { NotificationsServiceStub } from '../../../../shared/testing/notificatio
 import { RouterMock } from '../../../../shared/mocks/router.mock';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../../shared/testing/pagination-service.stub';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 describe('MembersListComponent', () => {
   let component: MembersListComponent;
@@ -118,7 +120,7 @@ describe('MembersListComponent', () => {
     translateService = getMockTranslateService();
 
     paginationService = new PaginationServiceStub();
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot({
           loader: {
@@ -135,6 +137,7 @@ describe('MembersListComponent', () => {
         { provide: FormBuilderService, useValue: builderService },
         { provide: Router, useValue: new RouterMock() },
         { provide: PaginationService, useValue: paginationService },
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import {
@@ -27,6 +27,7 @@ import { NotificationsService } from '../../../../shared/notifications/notificat
 import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
 import { EpersonDtoModel } from '../../../../core/eperson/models/eperson-dto.model';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * Keys to keep track of specific subscriptions
@@ -141,9 +142,10 @@ export class MembersListComponent implements OnInit, OnDestroy {
     public ePersonDataService: EPersonDataService,
     protected translateService: TranslateService,
     protected notificationsService: NotificationsService,
-    protected formBuilder: FormBuilder,
+    protected formBuilder: UntypedFormBuilder,
     protected paginationService: PaginationService,
-    private router: Router
+    protected router: Router,
+    public dsoNameService: DSONameService,
   ) {
     this.currentSearchQuery = '';
     this.currentSearchScope = 'metadata';
@@ -253,7 +255,7 @@ export class MembersListComponent implements OnInit, OnDestroy {
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((activeGroup: Group) => {
       if (activeGroup != null) {
         const response = this.groupDataService.deleteMemberFromGroup(activeGroup, ePerson.eperson);
-        this.showNotifications('deleteMember', response, ePerson.eperson.name, activeGroup);
+        this.showNotifications('deleteMember', response, this.dsoNameService.getName(ePerson.eperson), activeGroup);
       } else {
         this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.noActiveGroup'));
       }
@@ -269,7 +271,7 @@ export class MembersListComponent implements OnInit, OnDestroy {
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((activeGroup: Group) => {
       if (activeGroup != null) {
         const response = this.groupDataService.addMemberToGroup(activeGroup, ePerson.eperson);
-        this.showNotifications('addMember', response, ePerson.eperson.name, activeGroup);
+        this.showNotifications('addMember', response, this.dsoNameService.getName(ePerson.eperson), activeGroup);
       } else {
         this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.noActiveGroup'));
       }

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

@@ -53,15 +53,19 @@
         <tbody>
         <tr *ngFor="let group of (searchResults$ | async)?.payload?.page">
           <td class="align-middle">{{group.id}}</td>
-          <td class="align-middle"><a (click)="groupDataService.startEditingNewGroup(group)"
+          <td class="align-middle">
-                 [routerLink]="[groupDataService.getGroupEditPageRouterLink(group)]">{{group.name}}</a></td>
+            <a (click)="groupDataService.startEditingNewGroup(group)"
-          <td class="align-middle">{{(group.object | async)?.payload?.name}}</td>
+               [routerLink]="[groupDataService.getGroupEditPageRouterLink(group)]">
+              {{ dsoNameService.getName(group) }}
+            </a>
+          </td>
+          <td class="align-middle">{{ dsoNameService.getName((group.object | async)?.payload) }}</td>
           <td class="align-middle">
             <div class="btn-group edit-field">
               <button *ngIf="(isSubgroupOfGroup(group) | async) && !(isActiveGroup(group) | async)"
                       (click)="deleteSubgroupFromGroup(group)"
                       class="btn btn-outline-danger btn-sm deleteButton"
-                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: {name: group.name} }}">
+                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(group) } }}">
                 <i class="fas fa-trash-alt fa-fw"></i>
               </button>
 
@@ -70,7 +74,7 @@
               <button *ngIf="!(isSubgroupOfGroup(group) | async) && !(isActiveGroup(group) | async)"
                       (click)="addSubgroupToGroup(group)"
                       class="btn btn-outline-primary btn-sm addButton"
-                      title="{{messagePrefix + '.table.edit.buttons.add' | translate: {name: group.name} }}">
+                      title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(group) } }}">
                 <i class="fas fa-plus fa-fw"></i>
               </button>
             </div>
@@ -108,14 +112,18 @@
         <tbody>
         <tr *ngFor="let group of (subGroups$ | async)?.payload?.page">
           <td class="align-middle">{{group.id}}</td>
-          <td class="align-middle"><a (click)="groupDataService.startEditingNewGroup(group)"
+          <td class="align-middle">
-                 [routerLink]="[groupDataService.getGroupEditPageRouterLink(group)]">{{group.name}}</a></td>
+            <a (click)="groupDataService.startEditingNewGroup(group)"
-          <td class="align-middle">{{(group.object | async)?.payload?.name}}</td>
+               [routerLink]="[groupDataService.getGroupEditPageRouterLink(group)]">
+            {{ dsoNameService.getName(group) }}
+          </a>
+          </td>
+          <td class="align-middle">{{ dsoNameService.getName((group.object | async)?.payload)}}</td>
           <td class="align-middle">
             <div class="btn-group edit-field">
               <button (click)="deleteSubgroupFromGroup(group)"
                       class="btn btn-outline-danger btn-sm deleteButton"
-                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: {name: group.name} }}">
+                      title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(group) } }}">
                 <i class="fas fa-trash-alt fa-fw"></i>
               </button>
             </div>

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

@@ -29,6 +29,8 @@ import { NotificationsServiceStub } from '../../../../shared/testing/notificatio
 import { map } from 'rxjs/operators';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../../shared/testing/pagination-service.stub';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 describe('SubgroupsListComponent', () => {
   let component: SubgroupsListComponent;
@@ -108,6 +110,7 @@ describe('SubgroupsListComponent', () => {
       ],
       declarations: [SubgroupsListComponent],
       providers: [SubgroupsListComponent,
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: GroupDataService, useValue: groupsDataServiceStub },
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },
         { provide: FormBuilderService, useValue: builderService },

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs';
@@ -18,6 +18,7 @@ import { PaginationComponentOptions } from '../../../../shared/pagination/pagina
 import { NoContent } from '../../../../core/shared/NoContent.model';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
 import { followLink } from '../../../../shared/utils/follow-link-config.model';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * Keys to keep track of specific subscriptions
@@ -86,9 +87,11 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
   constructor(public groupDataService: GroupDataService,
               private translateService: TranslateService,
               private notificationsService: NotificationsService,
-              private formBuilder: FormBuilder,
+              private formBuilder: UntypedFormBuilder,
               private paginationService: PaginationService,
-              private router: Router) {
+              private router: Router,
+              public dsoNameService: DSONameService,
+  ) {
     this.currentSearchQuery = '';
   }
 
@@ -177,7 +180,7 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((activeGroup: Group) => {
       if (activeGroup != null) {
         const response = this.groupDataService.deleteSubGroupFromGroup(activeGroup, subgroup);
-        this.showNotifications('deleteSubgroup', response, subgroup.name, activeGroup);
+        this.showNotifications('deleteSubgroup', response, this.dsoNameService.getName(subgroup), activeGroup);
       } else {
         this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.noActiveGroup'));
       }
@@ -193,7 +196,7 @@ export class SubgroupsListComponent implements OnInit, OnDestroy {
       if (activeGroup != null) {
         if (activeGroup.uuid !== subgroup.uuid) {
           const response = this.groupDataService.addSubGroupToGroup(activeGroup, subgroup);
-          this.showNotifications('addSubgroup', response, subgroup.name, activeGroup);
+          this.showNotifications('addSubgroup', response, this.dsoNameService.getName(subgroup), activeGroup);
         } else {
           this.notificationsService.error(this.translateService.get(this.messagePrefix + '.notification.failure.subgroupToAddIsActiveGroup'));
         }

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

@@ -56,8 +56,8 @@
             <tbody>
             <tr *ngFor="let groupDto of (groupsDto$ | async)?.page">
               <td>{{groupDto.group.id}}</td>
-              <td>{{groupDto.group.name}}</td>
+              <td>{{ dsoNameService.getName(groupDto.group) }}</td>
-              <td>{{(groupDto.group.object | async)?.payload?.name}}</td>
+              <td>{{ dsoNameService.getName((groupDto.group.object | async)?.payload) }}</td>
               <td>{{groupDto.epersons?.totalElements + groupDto.subgroups?.totalElements}}</td>
               <td>
                 <div class="btn-group edit-field">
@@ -65,7 +65,7 @@
                     <button *ngSwitchCase="true"
                       [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
                       class="btn btn-outline-primary btn-sm btn-edit"
-                      title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: groupDto.group.name} }}"
+                      title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: dsoNameService.getName(groupDto.group) } }}"
                     >
                       <i class="fas fa-edit fa-fw"></i>
                     </button>
@@ -80,7 +80,7 @@
                   </ng-container>
                   <button *ngIf="!groupDto.group?.permanent && groupDto.ableToDelete"
                           (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
-                          title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: groupDto.group.name} }}">
+                          title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: dsoNameService.getName(groupDto.group) } }}">
                     <i class="fas fa-trash-alt fa-fw"></i>
                   </button>
                 </div>

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

@@ -32,8 +32,10 @@ import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import { NoContent } from '../../core/shared/NoContent.model';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock, UNDEFINED_NAME } from '../../shared/mocks/dso-name.service.mock';
 
-describe('GroupRegistryComponent', () => {
+describe('GroupsRegistryComponent', () => {
   let component: GroupsRegistryComponent;
   let fixture: ComponentFixture<GroupsRegistryComponent>;
   let ePersonDataServiceStub: any;
@@ -160,7 +162,7 @@ describe('GroupRegistryComponent', () => {
     authorizationService = jasmine.createSpyObj('authorizationService', ['isAuthorized']);
     setIsAuthorized(true, true);
     paginationService = new PaginationServiceStub();
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot({
           loader: {
@@ -171,6 +173,7 @@ describe('GroupRegistryComponent', () => {
       ],
       declarations: [GroupsRegistryComponent],
       providers: [GroupsRegistryComponent,
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: GroupDataService, useValue: groupsDataServiceStub },
         { provide: DSpaceObjectDataService, useValue: dsoDataServiceStub },
@@ -208,7 +211,7 @@ describe('GroupRegistryComponent', () => {
   it('should display community/collection name if present', () => {
     const collectionNamesFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(3)'));
     expect(collectionNamesFound.length).toEqual(2);
-    expect(collectionNamesFound[0].nativeElement.textContent).toEqual('');
+    expect(collectionNamesFound[0].nativeElement.textContent).toEqual(UNDEFINED_NAME);
     expect(collectionNamesFound[1].nativeElement.textContent).toEqual('testgroupid2objectName');
   });
 

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

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import {
@@ -37,6 +37,7 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c
 import { NoContent } from '../../core/shared/NoContent.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { followLink } from '../../shared/utils/follow-link-config.model';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-groups-registry',
@@ -99,12 +100,14 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
               private dSpaceObjectDataService: DSpaceObjectDataService,
               private translateService: TranslateService,
               private notificationsService: NotificationsService,
-              private formBuilder: FormBuilder,
+              private formBuilder: UntypedFormBuilder,
               protected routeService: RouteService,
               private router: Router,
               private authorizationService: AuthorizationDataService,
               private paginationService: PaginationService,
-              public requestService: RequestService) {
+              public requestService: RequestService,
+              public dsoNameService: DSONameService,
+  ) {
     this.currentSearchQuery = '';
     this.searchForm = this.formBuilder.group(({
       query: this.currentSearchQuery,
@@ -201,10 +204,10 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
         .subscribe((rd: RemoteData<NoContent>) => {
           if (rd.hasSucceeded) {
             this.deletedGroupsIds = [...this.deletedGroupsIds, group.group.id];
-            this.notificationsService.success(this.translateService.get(this.messagePrefix + 'notification.deleted.success', { name: group.group.name }));
+            this.notificationsService.success(this.translateService.get(this.messagePrefix + 'notification.deleted.success', { name: this.dsoNameService.getName(group.group) }));
           } else {
             this.notificationsService.error(
-              this.translateService.get(this.messagePrefix + 'notification.deleted.failure.title', { name: group.group.name }),
+              this.translateService.get(this.messagePrefix + 'notification.deleted.failure.title', { name: this.dsoNameService.getName(group.group) }),
               this.translateService.get(this.messagePrefix + 'notification.deleted.failure.content', { cause: rd.errorMessage }));
           }
       });

src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.ts

@@ -5,7 +5,7 @@ import {
   DynamicFormLayout,
   DynamicInputModel
 } from '@ng-dynamic-forms/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { take } from 'rxjs/operators';
@@ -66,7 +66,7 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
   /**
    * A FormGroup that combines all inputs
    */
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
 
   /**
    * An EventEmitter that's fired whenever the form is being submitted

src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts

@@ -5,7 +5,7 @@ import {
   DynamicFormLayout,
   DynamicInputModel
 } from '@ng-dynamic-forms/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { take } from 'rxjs/operators';
@@ -82,7 +82,7 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
   /**
    * A FormGroup that combines all inputs
    */
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
 
   /**
    * An EventEmitter that's fired whenever the form is being submitted

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

@@ -13,6 +13,7 @@ import { BitstreamDataService } from '../../../../../core/data/bitstream-data.se
 import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
 import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 
 @listableObjectComponent(ItemSearchResult, ViewMode.GridElement, Context.AdminSearch)
 @Component({
@@ -28,12 +29,14 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
   @ViewChild('badges', { static: true }) badges: ElementRef;
   @ViewChild('buttons', { static: true }) buttons: ElementRef;
 
-  constructor(protected truncatableService: TruncatableService,
+  constructor(
+    public dsoNameService: DSONameService,
+    protected truncatableService: TruncatableService,
     protected bitstreamDataService: BitstreamDataService,
     private themeService: ThemeService,
-              private componentFactoryResolver: ComponentFactoryResolver
+    private componentFactoryResolver: ComponentFactoryResolver,
   ) {
-    super(truncatableService, bitstreamDataService);
+    super(dsoNameService, truncatableService, bitstreamDataService);
   }
 
   /**

src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.ts

@@ -82,7 +82,7 @@ export class SupervisionOrderGroupSelectorComponent {
         getFirstCompletedRemoteData(),
       ).subscribe((rd: RemoteData<SupervisionOrder>) => {
         if (rd.state === 'Success') {
-          this.notificationsService.success(this.translateService.get('supervision-group-selector.notification.create.success.title', { name: this.selectedGroup.name }));
+          this.notificationsService.success(this.translateService.get('supervision-group-selector.notification.create.success.title', { name: this.dsoNameService.getName(this.selectedGroup) }));
           this.create.emit(rd.payload);
           this.close();
         } else {

src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.html

@@ -7,7 +7,7 @@
       <a class="badge badge-primary mr-1 mb-1 text-capitalize mw-100 text-truncate" *ngFor="let supervisionOrder of supervisionOrders" data-test="soBadge"
          [ngbTooltip]="'workflow-item.search.result.list.element.supervised.remove-tooltip' | translate"
          (click)="$event.preventDefault(); $event.stopImmediatePropagation(); deleteSupervisionOrder(supervisionOrder)" aria-label="Close">
-        {{supervisionOrder.group.name}}
+        {{ dsoNameService.getName(supervisionOrder.group) }}
         <span aria-hidden="true"> ×</span>
       </a>
     </div>

src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.ts

@@ -8,6 +8,7 @@ import { Group } from '../../../../../../core/eperson/models/group.model';
 import { getFirstCompletedRemoteData } from '../../../../../../core/shared/operators';
 import { isNotEmpty } from '../../../../../../shared/empty.util';
 import { RemoteData } from '../../../../../../core/data/remote-data';
+import { DSONameService } from '../../../../../../core/breadcrumbs/dso-name.service';
 
 export interface SupervisionOrderListEntry {
   supervisionOrder: SupervisionOrder;
@@ -33,6 +34,11 @@ export class SupervisionOrderStatusComponent implements OnChanges {
 
   @Output() delete: EventEmitter<SupervisionOrderListEntry> = new EventEmitter<SupervisionOrderListEntry>();
 
+  constructor(
+    public dsoNameService: DSONameService,
+  ) {
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes && changes.supervisionOrderList) {
       this.getSupervisionOrderEntries(changes.supervisionOrderList.currentValue)

src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.spec.ts

@@ -11,7 +11,7 @@ import { URLCombiner } from '../../../../../core/url-combiner/url-combiner';
 import { WorkspaceItemAdminWorkflowActionsComponent } from './workspace-item-admin-workflow-actions.component';
 import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
 import {
-  getWorkflowItemDeleteRoute,
+ getWorkspaceItemDeleteRoute,
 } from '../../../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
 import { Item } from '../../../../../core/shared/item.model';
 import { RemoteData } from '../../../../../core/data/remote-data';
@@ -83,7 +83,7 @@ describe('WorkspaceItemAdminWorkflowActionsComponent', () => {
   it('should render a delete button with the correct link', () => {
     const button = fixture.debugElement.query(By.css('a.delete-link'));
     const link = button.nativeElement.href;
-    expect(link).toContain(new URLCombiner(getWorkflowItemDeleteRoute(wsi.id)).toString());
+    expect(link).toContain(new URLCombiner(getWorkspaceItemDeleteRoute(wsi.id)).toString());
   });
 
   it('should render a policies button with the correct link', () => {

src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts

@@ -11,7 +11,7 @@ import {
   SupervisionOrderGroupSelectorComponent
 } from './supervision-order-group-selector/supervision-order-group-selector.component';
 import {
-  getWorkflowItemDeleteRoute
+ getWorkspaceItemDeleteRoute
 } from '../../../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
 import { ITEM_EDIT_AUTHORIZATIONS_PATH } from '../../../../../item-page/edit-item-page/edit-item-page.routing-paths';
 import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
@@ -105,10 +105,10 @@ export class WorkspaceItemAdminWorkflowActionsComponent implements OnInit {
   }
 
   /**
-   * Returns the path to the delete page of this workflow item
+   * Returns the path to the delete page of this workspace item
    */
   getDeleteRoute(): string {
-    return getWorkflowItemDeleteRoute(this.wsi.id);
+    return getWorkspaceItemDeleteRoute(this.wsi.id);
   }
 
   /**

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

@@ -23,6 +23,7 @@ import {
 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';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 
 @listableObjectComponent(WorkflowItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
 @Component({
@@ -55,13 +56,14 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
   public item$: Observable<Item>;
 
   constructor(
+    public dsoNameService: DSONameService,
     private componentFactoryResolver: ComponentFactoryResolver,
     private linkService: LinkService,
     protected truncatableService: TruncatableService,
     private themeService: ThemeService,
     protected bitstreamDataService: BitstreamDataService
   ) {
-    super(truncatableService, bitstreamDataService);
+    super(dsoNameService, truncatableService, bitstreamDataService);
   }
 
   /**

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

@@ -1,4 +1,4 @@
-import { Component, ComponentFactoryResolver, ElementRef, ViewChild } from '@angular/core';
+import { Component, ComponentFactoryResolver, ElementRef, ViewChild, OnInit } from '@angular/core';
 
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map, mergeMap, take, tap } from 'rxjs/operators';
@@ -36,6 +36,7 @@ import { DSpaceObject } from '../../../../../core/shared/dspace-object.model';
 import { SupervisionOrder } from '../../../../../core/supervision-order/models/supervision-order.model';
 import { PaginatedList } from '../../../../../core/data/paginated-list.model';
 import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 
 @listableObjectComponent(WorkspaceItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
 @Component({
@@ -46,7 +47,7 @@ import { SupervisionOrderDataService } from '../../../../../core/supervision-ord
 /**
  * The component for displaying a grid element for an workflow item on the admin workflow search page
  */
-export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkspaceItemSearchResult, WorkspaceItem> {
+export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkspaceItemSearchResult, WorkspaceItem> implements OnInit {
 
   /**
    * The item linked to the workspace item
@@ -79,6 +80,7 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
   @ViewChild('buttons', { static: true }) buttons: ElementRef;
 
   constructor(
+    public dsoNameService: DSONameService,
     private componentFactoryResolver: ComponentFactoryResolver,
     private linkService: LinkService,
     protected truncatableService: TruncatableService,
@@ -86,7 +88,7 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
     protected bitstreamDataService: BitstreamDataService,
     protected supervisionOrderDataService: SupervisionOrderDataService,
   ) {
-    super(truncatableService, bitstreamDataService);
+    super(dsoNameService, truncatableService, bitstreamDataService);
   }
 
   /**

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

@@ -39,7 +39,7 @@ export class WorkflowItemSearchResultAdminWorkflowListElementComponent extends S
 
   constructor(private linkService: LinkService,
               protected truncatableService: TruncatableService,
-              protected dsoNameService: DSONameService,
+              public dsoNameService: DSONameService,
               @Inject(APP_CONFIG) protected appConfig: AppConfig
   ) {
     super(truncatableService, dsoNameService, appConfig);

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

@@ -59,7 +59,7 @@ export class WorkspaceItemSearchResultAdminWorkflowListElementComponent extends
   public supervisionOrder$: BehaviorSubject<SupervisionOrder[]> = new BehaviorSubject<SupervisionOrder[]>([]);
 
   constructor(private linkService: LinkService,
-              protected dsoNameService: DSONameService,
+              public dsoNameService: DSONameService,
               protected supervisionOrderDataService: SupervisionOrderDataService,
               protected truncatableService: TruncatableService,
               @Inject(APP_CONFIG) protected appConfig: AppConfig

src/app/app-routing.module.ts

@@ -209,7 +209,7 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone
           {
             path: REQUEST_COPY_MODULE_PATH,
             loadChildren: () => import('./request-copy/request-copy.module').then((m) => m.RequestCopyModule),
-            canActivate: [AuthenticatedGuard, EndUserAgreementCurrentUserGuard]
+            canActivate: [EndUserAgreementCurrentUserGuard]
           },
           {
             path: FORBIDDEN_PATH,

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

@@ -1,5 +1,5 @@
 <div class="container">
-  <h3>{{'bitstream.download.page' | translate:{bitstream: (bitstream$ | async)?.name} }}</h3>
+  <h3>{{'bitstream.download.page' | translate:{ bitstream: dsoNameService.getName((bitstream$ | async)) } }}</h3>
   <div class="pt-3">
     <button (click)="back()" class="btn btn-outline-secondary">
       <i class="fas fa-arrow-left"></i> {{'bitstream.download.page.back' | translate}}

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

@@ -14,6 +14,7 @@ import { getForbiddenRoute } from '../../app-routing-paths';
 import { RemoteData } from '../../core/data/remote-data';
 import { redirectOn4xx } from '../../core/shared/authorized.operators';
 import { Location } from '@angular/common';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-bitstream-download-page',
@@ -36,6 +37,7 @@ export class BitstreamDownloadPageComponent implements OnInit {
     private fileService: FileService,
     private hardRedirectService: HardRedirectService,
     private location: Location,
+    public dsoNameService: DSONameService,
   ) {
 
   }

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

@@ -2,13 +2,13 @@
   <div class="container" *ngVar="(bitstreamFormatsRD$ | async) as formatsRD">
     <div class="row" *ngIf="bitstreamRD?.hasSucceeded && formatsRD?.hasSucceeded">
       <div class="col-md-2">
-        <ds-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-themed-thumbnail>
       </div>
       <div class="col-md-10">
         <div class="container">
           <div class="row">
             <div class="col-12">
-              <h3>{{bitstreamRD?.payload?.name}} <span class="text-muted">({{bitstreamRD?.payload?.sizeBytes | dsFileSize}})</span></h3>
+              <h3>{{dsoNameService.getName(bitstreamRD?.payload)}} <span class="text-muted">({{bitstreamRD?.payload?.sizeBytes | dsFileSize}})</span></h3>
             </div>
           </div>
         </div>

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

@@ -15,7 +15,7 @@ import { INotification, Notification } from '../../shared/notifications/models/n
 import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
 import { BitstreamFormatSupportLevel } from '../../core/shared/bitstream-format-support-level';
 import { hasValue } from '../../shared/empty.util';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { FileSizePipe } from '../../shared/utils/file-size-pipe';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
@@ -84,9 +84,9 @@ describe('EditBitstreamPageComponent', () => {
         const controls = {};
         if (hasValue(fModel)) {
           fModel.forEach((controlModel) => {
-            controls[controlModel.id] = new FormControl((controlModel as any).value);
+            controls[controlModel.id] = new UntypedFormControl((controlModel as any).value);
           });
-          return new FormGroup(controls);
+          return new UntypedFormGroup(controls);
         }
         return undefined;
       }

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

@@ -23,7 +23,7 @@ import {
   DynamicInputModel,
   DynamicSelectModel
 } from '@ng-dynamic-forms/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
 import cloneDeep from 'lodash/cloneDeep';
@@ -359,7 +359,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   /**
    * The form group of this form
    */
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
 
   /**
    * The ID of the item the bitstream originates from
@@ -395,7 +395,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
               private formService: DynamicFormService,
               private translate: TranslateService,
               private bitstreamService: BitstreamDataService,
-              private dsoNameService: DSONameService,
+              public dsoNameService: DSONameService,
               private notificationsService: NotificationsService,
               private bitstreamFormatService: BitstreamFormatDataService) {
   }

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

@@ -18,6 +18,7 @@ import { isValidDate } from '../../shared/date.util';
 import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
 import { RemoteData } from '../../core/data/remote-data';
 import { Item } from '../../core/shared/item.model';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-browse-by-date-page',
@@ -42,8 +43,10 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
                      protected router: Router,
                      protected paginationService: PaginationService,
                      protected cdRef: ChangeDetectorRef,
-                     @Inject(APP_CONFIG) public appConfig: AppConfig) {
+                     @Inject(APP_CONFIG) public appConfig: AppConfig,
-    super(route, browseService, dsoService, paginationService, router, appConfig);
+                     public dsoNameService: DSONameService,
+  ) {
+    super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService);
   }
 
   ngOnInit(): void {

src/app/browse-by/browse-by-guard.spec.ts

@@ -4,6 +4,8 @@ import { of as observableOf } from 'rxjs';
 import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
 import { BrowseDefinition } from '../core/shared/browse-definition.model';
 import { BrowseByDataType } from './browse-by-switcher/browse-by-decorator';
+import { DSONameServiceMock } from '../shared/mocks/dso-name.service.mock';
+import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 
 describe('BrowseByGuard', () => {
   describe('canActivate', () => {
@@ -33,7 +35,7 @@ describe('BrowseByGuard', () => {
         findById: () => createSuccessfulRemoteDataObject$(browseDefinition)
       };
 
-      guard = new BrowseByGuard(dsoService, translateService, browseDefinitionService);
+      guard = new BrowseByGuard(dsoService, translateService, browseDefinitionService, new DSONameServiceMock() as DSONameService);
     });
 
     it('should return true, and sets up the data correctly, with a scope and value', () => {

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

@@ -3,11 +3,13 @@ import { Injectable } from '@angular/core';
 import { DSpaceObjectDataService } from '../core/data/dspace-object-data.service';
 import { hasNoValue, hasValue } from '../shared/empty.util';
 import { map, switchMap } from 'rxjs/operators';
-import { getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload } from '../core/shared/operators';
+import { getFirstSucceededRemoteDataPayload } from '../core/shared/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable, of as observableOf } from 'rxjs';
 import { BrowseDefinitionDataService } from '../core/browse/browse-definition-data.service';
 import { BrowseDefinition } from '../core/shared/browse-definition.model';
+import { DSONameService } from '../core/breadcrumbs/dso-name.service';
+import { DSpaceObject } from '../core/shared/dspace-object.model';
 
 @Injectable()
 /**
@@ -17,7 +19,9 @@ export class BrowseByGuard implements CanActivate {
 
   constructor(protected dsoService: DSpaceObjectDataService,
               protected translate: TranslateService,
-              protected browseDefinitionService: BrowseDefinitionDataService) {
+              protected browseDefinitionService: BrowseDefinitionDataService,
+              protected dsoNameService: DSONameService,
+  ) {
   }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
@@ -31,14 +35,14 @@ export class BrowseByGuard implements CanActivate {
     }
     const scope = route.queryParams.scope;
     const value = route.queryParams.value;
-    const metadataTranslated = this.translate.instant('browse.metadata.' + id);
+    const metadataTranslated = this.translate.instant(`browse.metadata.${id}`);
     return browseDefinition$.pipe(
-      switchMap((browseDefinition) => {
+      switchMap((browseDefinition: BrowseDefinition) => {
         if (hasValue(scope)) {
-          const dsoAndMetadata$ = this.dsoService.findById(scope).pipe(getFirstSucceededRemoteData());
+          const dso$: Observable<DSpaceObject> = this.dsoService.findById(scope).pipe(getFirstSucceededRemoteDataPayload());
-          return dsoAndMetadata$.pipe(
+          return dso$.pipe(
-            map((dsoRD) => {
+            map((dso: DSpaceObject) => {
-              const name = dsoRD.payload.name;
+              const name = this.dsoNameService.getName(dso);
               route.data = this.createData(title, id, browseDefinition, name, metadataTranslated, value, route);
               return true;
             })

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

@@ -5,7 +5,7 @@
 
             <header class="comcol-header mr-auto">
         <!-- Parent Name -->
-        <ds-comcol-page-header [name]="parentContext.name">
+        <ds-comcol-page-header [name]="dsoNameService.getName(parentContext)">
         </ds-comcol-page-header>
       <!-- Collection logo -->
         <ds-comcol-page-logo *ngIf="logo$"
@@ -35,12 +35,12 @@
     <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
       title="{{'browse.title' | translate:
       {
-        collection: (parent$ | async)?.payload?.name || '',
+        collection: dsoNameService.getName((parent$ | async)?.payload),
         field: 'browse.metadata.' + browseId | translate,
         startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
         value: (value)? '&quot;' + value + '&quot;': ''
       } }}"
-      parentname="{{(parent$ | async)?.payload?.name || ''}}"
+      parentname="{{dsoNameService.getName((parent$ | async)?.payload)}}"
       [objects$]="(items$ !== undefined)? items$ : browseEntries$"
       [paginationConfig]="(currentPagination$ |async)"
       [sortConfig]="(currentSort$ |async)"

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

@@ -21,6 +21,7 @@ import { Bitstream } from '../../core/shared/bitstream.model';
 import { Collection } from '../../core/shared/collection.model';
 import { Community } from '../../core/shared/community.model';
 import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 export const BBM_PAGINATION_ID = 'bbm';
 
@@ -126,7 +127,9 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
                      protected dsoService: DSpaceObjectDataService,
                      protected paginationService: PaginationService,
                      protected router: Router,
-                     @Inject(APP_CONFIG) public appConfig: AppConfig) {
+                     @Inject(APP_CONFIG) public appConfig: AppConfig,
+                     public dsoNameService: DSONameService,
+  ) {
 
     this.fetchThumbnails = this.appConfig.browseBy.showThumbnails;
     this.paginationConfig = Object.assign(new PaginationComponentOptions(), {

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

@@ -13,6 +13,7 @@ import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-browse-by-title-page',
@@ -29,8 +30,10 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
                      protected dsoService: DSpaceObjectDataService,
                      protected paginationService: PaginationService,
                      protected router: Router,
-                     @Inject(APP_CONFIG) public appConfig: AppConfig) {
+                     @Inject(APP_CONFIG) public appConfig: AppConfig,
-    super(route, browseService, dsoService, paginationService, router, appConfig);
+                     public dsoNameService: DSONameService,
+  ) {
+    super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService);
   }
 
   ngOnInit(): void {

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

@@ -157,7 +157,7 @@ export class CollectionItemMapperComponent implements OnInit {
           scope: undefined,
           dsoTypes: [DSpaceObjectType.ITEM],
           sort: this.defaultSortOptions
-        }), 10000).pipe(
+        }), 10000, undefined, undefined, followLink('owningCollection')).pipe(
           toDSpaceObjectListRD(),
           startWith(undefined)
         );

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

@@ -8,7 +8,7 @@
                 <header class="comcol-header mr-auto">
                   <!-- Collection Name -->
                   <ds-comcol-page-header
-                          [name]="collection.name">
+                          [name]="dsoNameService.getName(collection)">
                   </ds-comcol-page-header>
                   <!-- Collection logo -->
                   <ds-comcol-page-logo *ngIf="logoRD$"

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

@@ -29,6 +29,7 @@ import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCollectionPageRoute } from './collection-page-routing-paths';
 import { redirectOn4xx } from '../core/shared/authorized.operators';
 import { BROWSE_LINKS_TO_FOLLOW } from '../core/browse/browse.service';
+import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 import { APP_CONFIG, AppConfig } from '../../../src/config/app-config.interface';
 
 @Component({
@@ -70,6 +71,7 @@ export class CollectionPageComponent implements OnInit {
     private authService: AuthService,
     private paginationService: PaginationService,
     private authorizationDataService: AuthorizationDataService,
+    public dsoNameService: DSONameService,
     @Inject(APP_CONFIG) public appConfig: AppConfig,
   ) {
     this.paginationConfig = Object.assign(new PaginationComponentOptions(), {

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

@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-12 pb-4">
-            <h2 id="sub-header" class="border-bottom pb-2">{{'collection.create.sub-head' | translate:{ parent: (parentRD$| async)?.payload.name } }}</h2>
+            <h2 id="sub-header" class="border-bottom pb-2">{{'collection.create.sub-head' | translate:{ parent: dsoNameService.getName((parentRD$| async)?.payload) } }}</h2>
         </div>
     </div>
     <ds-collection-form (submitForm)="onSubmit($event)"

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

@@ -13,16 +13,19 @@ import { CreateCollectionPageComponent } from './create-collection-page.componen
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
 import { RequestService } from '../../core/data/request.service';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../shared/mocks/dso-name.service.mock';
 
 describe('CreateCollectionPageComponent', () => {
   let comp: CreateCollectionPageComponent;
   let fixture: ComponentFixture<CreateCollectionPageComponent>;
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), SharedModule, CommonModule, RouterTestingModule],
       declarations: [CreateCollectionPageComponent],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: CollectionDataService, useValue: {} },
         {
           provide: CommunityDataService,

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

@@ -8,6 +8,7 @@ import { CollectionDataService } from '../../core/data/collection-data.service';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RequestService } from '../../core/data/request.service';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 /**
  * Component that represents the page where a user can create a new Collection
@@ -22,6 +23,7 @@ export class CreateCollectionPageComponent extends CreateComColPageComponent<Col
   protected type = Collection.type;
 
   public constructor(
+    public dsoNameService: DSONameService,
     protected communityDataService: CommunityDataService,
     protected collectionDataService: CollectionDataService,
     protected routeService: RouteService,
@@ -30,6 +32,6 @@ export class CreateCollectionPageComponent extends CreateComColPageComponent<Col
     protected translate: TranslateService,
     protected requestService: RequestService
   ) {
-    super(collectionDataService, communityDataService, routeService, router, notificationsService, translate, requestService);
+    super(collectionDataService, dsoNameService, communityDataService, routeService, router, notificationsService, translate, requestService);
   }
 }

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

@@ -3,7 +3,7 @@
         <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
             <div class="col-12 pb-4">
                 <h2 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h2>
-                <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dso.name } }}</p>
+                <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
                 <div class="form-group row">
                   <div class="col text-right space-children-mr">
                     <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">

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

@@ -10,6 +10,8 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { DeleteCollectionPageComponent } from './delete-collection-page.component';
 import { CollectionDataService } from '../../core/data/collection-data.service';
 import { RequestService } from '../../core/data/request.service';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../shared/mocks/dso-name.service.mock';
 
 describe('DeleteCollectionPageComponent', () => {
   let comp: DeleteCollectionPageComponent;
@@ -20,6 +22,7 @@ describe('DeleteCollectionPageComponent', () => {
       imports: [TranslateModule.forRoot(), SharedModule, CommonModule, RouterTestingModule],
       declarations: [DeleteCollectionPageComponent],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: CollectionDataService, useValue: {} },
         { provide: ActivatedRoute, useValue: { data: observableOf({ dso: { payload: {} } }) } },
         { provide: NotificationsService, useValue: {} },

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

@@ -5,6 +5,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { CollectionDataService } from '../../core/data/collection-data.service';
 import { Collection } from '../../core/shared/collection.model';
 import { TranslateService } from '@ngx-translate/core';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 /**
  * Component that represents the page where a user can delete an existing Collection
@@ -19,11 +20,12 @@ export class DeleteCollectionPageComponent extends DeleteComColPageComponent<Col
 
   public constructor(
     protected dsoDataService: CollectionDataService,
+    public dsoNameService: DSONameService,
     protected router: Router,
     protected route: ActivatedRoute,
     protected notifications: NotificationsService,
     protected translate: TranslateService,
   ) {
-    super(dsoDataService, router, route, notifications, translate);
+    super(dsoDataService, dsoNameService, router, route, notifications, translate);
   }
 }

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

@@ -15,6 +15,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ComcolModule } from '../../../shared/comcol/comcol.module';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../shared/mocks/dso-name.service.mock';
 
 describe('CollectionRolesComponent', () => {
 
@@ -79,6 +81,7 @@ describe('CollectionRolesComponent', () => {
       ],
       providers: [
         { provide: ActivatedRoute, useValue: route },
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: RequestService, useValue: requestService },
         { provide: GroupDataService, useValue: groupDataService },
         { provide: NotificationsService, useClass: NotificationsServiceStub }

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

@@ -12,7 +12,7 @@ import { NotificationType } from '../../../shared/notifications/models/notificat
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { DynamicFormControlModel, DynamicFormService } from '@ng-dynamic-forms/core';
 import { hasValue } from '../../../shared/empty.util';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { RouterStub } from '../../../shared/testing/router.stub';
 import { By } from '@angular/platform-browser';
 import { Collection } from '../../../core/shared/collection.model';
@@ -98,9 +98,9 @@ describe('CollectionSourceComponent', () => {
         const controls = {};
         if (hasValue(fModel)) {
           fModel.forEach((controlModel) => {
-            controls[controlModel.id] = new FormControl((controlModel as any).value);
+            controls[controlModel.id] = new UntypedFormControl((controlModel as any).value);
           });
-          return new FormGroup(controls);
+          return new UntypedFormGroup(controls);
         }
         return undefined;
       }

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

@@ -14,7 +14,7 @@ import { Location } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
 import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { hasNoValue, hasValue, isNotEmpty } from '../../../shared/empty.util';
 import { ContentSource, ContentSourceHarvestType } from '../../../core/shared/content-source.model';
 import { Observable, Subscription } from 'rxjs';
@@ -202,7 +202,7 @@ export class CollectionSourceComponent extends AbstractTrackableComponent implem
   /**
    * The form group of this form
    */
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
 
   /**
    * Subscription to update the current form

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

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-12" *ngVar="(itemRD$ | async) as itemRD">
       <ng-container *ngIf="itemRD?.hasSucceeded">
-        <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: collection?.name } }}</h2>
+        <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: dsoNameService.getName(collection) } }}</h2>
         <ds-themed-dso-edit-metadata [updateDataService]="itemTemplateService" [dso]="itemRD?.payload"></ds-themed-dso-edit-metadata>
         <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
       </ng-container>

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

@@ -9,6 +9,7 @@ import { getCollectionEditRoute } from '../collection-page-routing-paths';
 import { Item } from '../../core/shared/item.model';
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { AlertType } from '../../shared/alert/aletr-type';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-edit-item-template-page',
@@ -35,8 +36,11 @@ export class EditItemTemplatePageComponent implements OnInit {
    */
   AlertTypeEnum = AlertType;
 
-  constructor(protected route: ActivatedRoute,
+  constructor(
-              public itemTemplateService: ItemTemplateDataService) {
+    protected route: ActivatedRoute,
+    public itemTemplateService: ItemTemplateDataService,
+    public dsoNameService: DSONameService,
+  ) {
   }
 
   ngOnInit(): void {

src/app/collection-page/edit-item-template-page/item-template-page.resolver.spec.ts

@@ -2,18 +2,22 @@ import { first } from 'rxjs/operators';
 
 import { ItemTemplatePageResolver } from './item-template-page.resolver';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../shared/mocks/dso-name.service.mock';
 
 describe('ItemTemplatePageResolver', () => {
   describe('resolve', () => {
     let resolver: ItemTemplatePageResolver;
     let itemTemplateService: any;
+    let dsoNameService: DSONameServiceMock;
     const uuid = '1234-65487-12354-1235';
 
     beforeEach(() => {
       itemTemplateService = {
         findByCollectionID: (id: string) => createSuccessfulRemoteDataObject$({ id })
       };
-      resolver = new ItemTemplatePageResolver(itemTemplateService);
+      dsoNameService = new DSONameServiceMock();
+      resolver = new ItemTemplatePageResolver(dsoNameService as DSONameService, itemTemplateService);
     });
 
     it('should resolve an item template with the correct id', (done) => {

src/app/collection-page/edit-item-template-page/item-template-page.resolver.ts

@@ -6,13 +6,17 @@ import { ItemTemplateDataService } from '../../core/data/item-template-data.serv
 import { Observable } from 'rxjs';
 import { followLink } from '../../shared/utils/follow-link-config.model';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 /**
  * This class represents a resolver that requests a specific collection's item template before the route is activated
  */
 @Injectable()
 export class ItemTemplatePageResolver implements Resolve<RemoteData<Item>> {
-  constructor(private itemTemplateService: ItemTemplateDataService) {
+  constructor(
+    public dsoNameService: DSONameService,
+    private itemTemplateService: ItemTemplateDataService,
+  ) {
   }
 
   /**

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

@@ -25,8 +25,8 @@
                  class="example-tree-node expandable-node">
     <div class="btn-group">
       <button type="button" class="btn btn-default" cdkTreeNodeToggle
-              [title]="'toggle ' + node.name"
+              [title]="'toggle ' + dsoNameService.getName(node.payload)"
-              [attr.aria-label]="'toggle ' + node.name"
+              [attr.aria-label]="'toggle ' + dsoNameService.getName(node.payload)"
               (click)="toggleExpanded(node)"
               [ngClass]="(hasChild(null, node)| async) ? 'visible' : 'invisible'"
               [attr.data-test]="(hasChild(null, node)| async) ? 'expand-button' : ''">
@@ -35,7 +35,7 @@
       </button>
       <h5 class="align-middle pt-2">
         <a [routerLink]="node.route" class="lead">
-          {{node.name}}
+          {{ dsoNameService.getName(node.payload) }}
         </a>
       </h5>
     </div>
@@ -66,12 +66,11 @@
                  class="example-tree-node childless-node">
     <div class="btn-group">
       <button type="button" class="btn btn-default" cdkTreeNodeToggle>
-                <span class="fa fa-chevron-right invisible"
+        <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
-                      aria-hidden="true"></span>
       </button>
       <h6 class="align-middle pt-2">
         <a [routerLink]="node.route" class="lead">
-          {{node.name}}
+          {{ dsoNameService.getName(node.payload) }}
         </a>
       </h6>
     </div>

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

@@ -194,8 +194,9 @@ describe('CommunityListComponent', () => {
           },
         }),
         CdkTreeModule,
-        RouterTestingModule],
+        RouterTestingModule,
-      declarations: [CommunityListComponent, RouterLinkWithHref],
+        RouterLinkWithHref],
+      declarations: [CommunityListComponent],
       providers: [CommunityListComponent,
         { provide: CommunityListService, useValue: communityListServiceStub },],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],

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

@@ -7,6 +7,7 @@ import { FlatTreeControl } from '@angular/cdk/tree';
 import { isEmpty } from '../../shared/empty.util';
 import { FlatNode } from '../flat-node.model';
 import { FindListOptions } from '../../core/data/find-list-options.model';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 /**
  * A tree-structured list of nodes representing the communities, their subCommunities and collections.
@@ -32,7 +33,10 @@ export class CommunityListComponent implements OnInit, OnDestroy {
 
   paginationConfig: FindListOptions;
 
-  constructor(private communityListService: CommunityListService) {
+  constructor(
+    protected communityListService: CommunityListService,
+    public dsoNameService: DSONameService,
+  ) {
     this.paginationConfig = new FindListOptions();
     this.paginationConfig.elementsPerPage = 2;
     this.paginationConfig.currentPage = 1;

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

@@ -5,7 +5,7 @@
       <div class="d-flex flex-row border-bottom mb-4 pb-4">
         <header class="comcol-header mr-auto">
           <!-- Community name -->
-          <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
+          <ds-comcol-page-header [name]="dsoNameService.getName(communityPayload)"></ds-comcol-page-header>
           <!-- Community logo -->
           <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'Community Logo'">
           </ds-comcol-page-logo>

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

@@ -19,6 +19,7 @@ import { AuthorizationDataService } from '../core/data/feature-authorization/aut
 import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCommunityPageRoute } from './community-page-routing-paths';
 import { redirectOn4xx } from '../core/shared/authorized.operators';
+import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-community-page',
@@ -57,7 +58,8 @@ export class CommunityPageComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private authService: AuthService,
-    private authorizationDataService: AuthorizationDataService
+    private authorizationDataService: AuthorizationDataService,
+    public dsoNameService: DSONameService,
   ) {
 
   }

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

@@ -3,7 +3,7 @@
     <div class="col-12 pb-4">
       <ng-container *ngVar="(parentRD$ | async)?.payload as parent">
         <h2 *ngIf="!parent" id="header" class="border-bottom pb-2">{{ 'community.create.head' | translate }}</h2>
-        <h2 *ngIf="parent" id="sub-header" class="border-bottom pb-2">{{ 'community.create.sub-head' | translate:{ parent: parent.name } }}</h2>
+        <h2 *ngIf="parent" id="sub-header" class="border-bottom pb-2">{{ 'community.create.sub-head' | translate:{ parent: dsoNameService.getName(parent) } }}</h2>
       </ng-container>
     </div>
   </div>

src/app/community-page/create-community-page/create-community-page.component.ts

@@ -7,6 +7,7 @@ import { CreateComColPageComponent } from '../../shared/comcol/comcol-forms/crea
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RequestService } from '../../core/data/request.service';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 /**
  * Component that represents the page where a user can create a new Community
@@ -22,12 +23,13 @@ export class CreateCommunityPageComponent extends CreateComColPageComponent<Comm
 
   public constructor(
     protected communityDataService: CommunityDataService,
+    public dsoNameService: DSONameService,
     protected routeService: RouteService,
     protected router: Router,
     protected notificationsService: NotificationsService,
     protected translate: TranslateService,
     protected requestService: RequestService
   ) {
-    super(communityDataService, communityDataService, routeService, router, notificationsService, translate, requestService);
+    super(communityDataService, dsoNameService, communityDataService, routeService, router, notificationsService, translate, requestService);
   }
 }

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

@@ -3,7 +3,7 @@
         <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
             <div class="col-12 pb-4">
                 <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h2>
-                <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dso.name } }}</p>
+                <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
                 <div class="form-group row">
                     <div class="col text-right space-children-mr">
                         <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">

src/app/community-page/delete-community-page/delete-community-page.component.spec.ts

@@ -10,6 +10,8 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { SharedModule } from '../../shared/shared.module';
 import { DeleteCommunityPageComponent } from './delete-community-page.component';
 import { RequestService } from '../../core/data/request.service';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../shared/mocks/dso-name.service.mock';
 
 describe('DeleteCommunityPageComponent', () => {
   let comp: DeleteCommunityPageComponent;
@@ -20,6 +22,7 @@ describe('DeleteCommunityPageComponent', () => {
       imports: [TranslateModule.forRoot(), SharedModule, CommonModule, RouterTestingModule],
       declarations: [DeleteCommunityPageComponent],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: CommunityDataService, useValue: {} },
         { provide: ActivatedRoute, useValue: { data: observableOf({ dso: { payload: {} } }) } },
         { provide: NotificationsService, useValue: {} },

src/app/community-page/delete-community-page/delete-community-page.component.ts

@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { DeleteComColPageComponent } from '../../shared/comcol/comcol-forms/delete-comcol-page/delete-comcol-page.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 /**
  * Component that represents the page where a user can delete an existing Community
@@ -19,12 +20,13 @@ export class DeleteCommunityPageComponent extends DeleteComColPageComponent<Comm
 
   public constructor(
     protected dsoDataService: CommunityDataService,
+    public dsoNameService: DSONameService,
     protected router: Router,
     protected route: ActivatedRoute,
     protected notifications: NotificationsService,
     protected translate: TranslateService,
   ) {
-    super(dsoDataService, router, route, notifications, translate);
+    super(dsoDataService, dsoNameService, router, route, notifications, translate);
   }
 
 }

src/app/community-page/edit-community-page/community-roles/community-roles.component.spec.ts

@@ -15,6 +15,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ComcolModule } from '../../../shared/comcol/comcol.module';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../shared/mocks/dso-name.service.mock';
 
 describe('CommunityRolesComponent', () => {
 
@@ -63,6 +65,7 @@ describe('CommunityRolesComponent', () => {
         CommunityRolesComponent,
       ],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: ActivatedRoute, useValue: route },
         { provide: RequestService, useValue: requestService },
         { provide: GroupDataService, useValue: groupDataService },

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

@@ -27,11 +27,22 @@ export class DSONameService {
    * With only two exceptions those solutions seem overkill for now.
    */
   private readonly factories = {
+    EPerson: (dso: DSpaceObject): string => {
+      const firstName = dso.firstMetadataValue('eperson.firstname');
+      const lastName = dso.firstMetadataValue('eperson.lastname');
+      if (isEmpty(firstName) && isEmpty(lastName)) {
+        return this.translateService.instant('dso.name.unnamed');
+      } else if (isEmpty(firstName) || isEmpty(lastName)) {
+        return firstName || lastName;
+      } else {
+        return `${firstName} ${lastName}`;
+      }
+    },
     Person: (dso: DSpaceObject): string => {
       const familyName = dso.firstMetadataValue('person.familyName');
       const givenName = dso.firstMetadataValue('person.givenName');
       if (isEmpty(familyName) && isEmpty(givenName)) {
-        return dso.firstMetadataValue('dc.title') || dso.name;
+        return dso.firstMetadataValue('dc.title') || this.translateService.instant('dso.name.unnamed');
       } else if (isEmpty(familyName) || isEmpty(givenName)) {
         return familyName || givenName;
       } else {
@@ -52,7 +63,8 @@ export class DSONameService {
    *
    * @param dso  The {@link DSpaceObject} you want a name for
    */
-  getName(dso: DSpaceObject): string {
+  getName(dso: DSpaceObject | undefined): string {
+    if (dso) {
       const types = dso.getRenderTypes();
       const match = types
         .filter((type) => typeof type === 'string')
@@ -66,6 +78,9 @@ export class DSONameService {
         name = this.factories.Default(dso);
       }
       return name;
+    } else {
+      return '';
+    }
   }
 
   /**

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

@@ -60,7 +60,7 @@ export class LinkService {
       const provider = this.getDataServiceFor(matchingLinkDef.resourceType);
 
       if (hasNoValue(provider)) {
-        throw new Error(`The @link() for ${linkToFollow.name} on ${model.constructor.name} models uses the resource type ${matchingLinkDef.resourceType.value.toUpperCase()}, but there is no service with an @dataService(${matchingLinkDef.resourceType.value.toUpperCase()}) annotation in order to retrieve it`);
+        throw new Error(`The @link() for ${String(linkToFollow.name)} on ${model.constructor.name} models uses the resource type ${matchingLinkDef.resourceType.value.toUpperCase()}, but there is no service with an @dataService(${matchingLinkDef.resourceType.value.toUpperCase()}) annotation in order to retrieve it`);
       }
 
       const service: HALDataService<any> = Injector.create({
@@ -79,12 +79,12 @@ export class LinkService {
             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}`);
+          console.error(`Something went wrong when using @dataService(${matchingLinkDef.resourceType.value}) ${hasValue(service) ? '' : '(undefined) '}to resolve link ${String(linkToFollow.name)} at ${href}`);
           throw e;
         }
       }
     } else if (!linkToFollow.isOptional) {
-      throw new Error(`followLink('${linkToFollow.name}') was used as a required link for a ${model.constructor.name}, but there is no property on ${model.constructor.name} models with an @link() for ${linkToFollow.name}`);
+      throw new Error(`followLink('${String(linkToFollow.name)}') was used as a required link for a ${model.constructor.name}, but there is no property on ${model.constructor.name} models with an @link() for ${String(linkToFollow.name)}`);
     }
 
     return EMPTY;

src/app/core/cache/builders/remote-data-build.service.ts

@@ -73,7 +73,7 @@ export class RemoteDataBuildService {
           if (getResourceTypeValueFor((obj as any).type) === PAGINATED_LIST.value) {
             return this.buildPaginatedList<T>(obj, ...linksToFollow);
           } else if (isNotEmpty(linksToFollow)) {
-            return [this.linkService.resolveLinks(obj, ...linksToFollow)];
+            return [this.linkService.resolveLinks(obj as any, ...linksToFollow)];
           }
         }
         return [obj];

src/app/core/eperson/models/eperson.model.ts

@@ -9,6 +9,8 @@ import { HALLink } from '../../shared/hal-link.model';
 import { EPERSON } from './eperson.resource-type';
 import { Group } from './group.model';
 import { GROUP } from './group.resource-type';
+import { ListableObject } from '../../../shared/object-collection/shared/listable-object.model';
+import { GenericConstructor } from '../../shared/generic-constructor';
 
 @typedObject
 @inheritSerialization(DSpaceObject)
@@ -82,4 +84,8 @@ export class EPerson extends DSpaceObject {
   @link(GROUP, true)
   public groups?: Observable<RemoteData<PaginatedList<Group>>>;
 
+  getRenderTypes(): (string | GenericConstructor<ListableObject>)[] {
+    return [this.constructor.name, ...super.getRenderTypes()];
+  }
+
 }

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

@@ -28,7 +28,7 @@ describe('LocaleService test suite', () => {
     isAuthenticationLoaded: jasmine.createSpy('isAuthenticationLoaded')
   });
 
-  const langList = ['en', 'it', 'de'];
+  const langList = ['en', 'xx', 'de'];
 
   beforeEach(waitForAsync(() => {
     return TestBed.configureTestingModule({
@@ -82,8 +82,8 @@ describe('LocaleService test suite', () => {
     });
 
     it('should return language from browser setting', () => {
-      spyOn(translateService, 'getBrowserLang').and.returnValue('it');
+      spyOn(translateService, 'getBrowserLang').and.returnValue('xx');
-      expect(service.getCurrentLanguageCode()).toBe('it');
+      expect(service.getCurrentLanguageCode()).toBe('xx');
     });
 
     it('should return default language from config', () => {
@@ -114,9 +114,9 @@ describe('LocaleService test suite', () => {
     });
 
     it('should set the given language', () => {
-      service.setCurrentLanguageCode('it');
+      service.setCurrentLanguageCode('xx');
-      expect(translateService.use).toHaveBeenCalledWith('it');
+      expect(translateService.use).toHaveBeenCalledWith('xx');
-      expect(service.saveLanguageCodeToCookie).toHaveBeenCalledWith('it');
+      expect(service.saveLanguageCodeToCookie).toHaveBeenCalledWith('xx');
     });
 
     it('should set the current language', () => {
@@ -135,7 +135,7 @@ describe('LocaleService test suite', () => {
 
   describe('', () => {
     it('should set quality to current language list', () => {
-      const langListWithQuality = ['en;q=1', 'it;q=0.9', 'de;q=0.8'];
+      const langListWithQuality = ['en;q=1', 'xx;q=0.9', 'de;q=0.8'];
       spyOn(service, 'setQuality').and.returnValue(langListWithQuality);
       service.setQuality(langList, LANG_ORIGIN.BROWSER, false);
       expect(service.setQuality).toHaveBeenCalledWith(langList, LANG_ORIGIN.BROWSER, false);

src/app/curation-form/curation-form.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { ScriptDataService } from '../core/data/processes/script-data.service';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { getFirstCompletedRemoteData } from '../core/shared/operators';
 import { find, map } from 'rxjs/operators';
 import { NotificationsService } from '../shared/notifications/notifications.service';
@@ -28,7 +28,7 @@ export class CurationFormComponent implements OnInit {
 
   config: Observable<RemoteData<ConfigurationProperty>>;
   tasks: string[];
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   @Input()
   dsoHandle: string;
@@ -46,9 +46,9 @@ export class CurationFormComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.form = new FormGroup({
+    this.form = new UntypedFormGroup({
-      task: new FormControl(''),
+      task: new UntypedFormControl(''),
-      handle: new FormControl('')
+      handle: new UntypedFormControl('')
     });
 
     this.config = this.configurationDataService.findByPropertyName(CURATION_CFG);

src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts

@@ -17,7 +17,7 @@ import {
 } from '../../../core/shared/operators';
 import { Observable } from 'rxjs/internal/Observable';
 import { RegistryService } from '../../../core/registry/registry.service';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { hasValue } from '../../../shared/empty.util';
 import { Subscription } from 'rxjs/internal/Subscription';
@@ -70,7 +70,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV
   /**
    * FormControl for the input
    */
-  public input: FormControl = new FormControl();
+  public input: UntypedFormControl = new UntypedFormControl();
 
   /**
    * The current query to update mdFieldOptions$ for

src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.spec.ts

@@ -10,6 +10,8 @@ import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem = Object.assign(new Item(), {
   bundles: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
@@ -48,6 +50,7 @@ describe('JournalIssueGridElementComponent', () => {
       imports: [NoopAnimationsModule],
       declarations: [JournalIssueGridElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.spec.ts

@@ -10,6 +10,8 @@ import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem = Object.assign(new Item(), {
   bundles: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
@@ -48,6 +50,7 @@ describe('JournalVolumeGridElementComponent', () => {
       imports: [NoopAnimationsModule],
       declarations: [JournalVolumeGridElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.spec.ts

@@ -10,6 +10,8 @@ import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem = Object.assign(new Item(), {
   bundles: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
@@ -54,6 +56,7 @@ describe('JournalGridElementComponent', () => {
       imports: [NoopAnimationsModule],
       declarations: [JournalGridElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
                 <div>
-                    <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                    <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                    </ds-thumbnail>
+                    </ds-themed-thumbnail>
                 </div>
             </span>
     <div class="card-body">

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">

src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.spec.ts

@@ -6,6 +6,8 @@ import { of as observableOf } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem: Item = Object.assign(new Item(), {
   bundles: observableOf({}),
@@ -43,6 +45,7 @@ describe('JournalIssueListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [JournalIssueListElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.spec.ts

@@ -6,6 +6,8 @@ import { of as observableOf } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem: Item = Object.assign(new Item(), {
   bundles: observableOf({}),
@@ -43,6 +45,7 @@ describe('JournalVolumeListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [JournalVolumeListElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.spec.ts

@@ -6,6 +6,8 @@ import { of as observableOf } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem: Item = Object.assign(new Item(), {
   bundles: observableOf({}),
@@ -34,9 +36,10 @@ describe('JournalListElementComponent', () => {
   };
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       declarations: [JournalListElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -7,7 +7,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -7,7 +7,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -7,7 +7,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field class="item-page-fields" [item]="object"
       [fields]="['creativeworkseries.issn']"

src/app/entity-groups/research-entities/item-grid-elements/org-unit/org-unit-grid-element.component.spec.ts

@@ -10,6 +10,8 @@ import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem = Object.assign(new Item(), {
   bundles: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
@@ -54,6 +56,7 @@ describe('OrgUnitGridElementComponent', () => {
       imports: [NoopAnimationsModule],
       declarations: [OrgUnitGridElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.spec.ts

@@ -10,6 +10,8 @@ import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem = Object.assign(new Item(), {
   bundles: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
@@ -48,6 +50,7 @@ describe('PersonGridElementComponent', () => {
       imports: [NoopAnimationsModule],
       declarations: [PersonGridElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.spec.ts

@@ -10,6 +10,8 @@ import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem = Object.assign(new Item(), {
   bundles: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
@@ -42,6 +44,7 @@ describe('ProjectGridElementComponent', () => {
       imports: [NoopAnimationsModule],
       declarations: [ProjectGridElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        </ds-themed-thumbnail>
       </div>
     </span>
     <div class="card-body">

src/app/entity-groups/research-entities/item-list-elements/org-unit/org-unit-list-element.component.spec.ts

@@ -6,6 +6,8 @@ import { of as observableOf } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem: Item = Object.assign(new Item(), {
   bundles: observableOf({}),
@@ -37,6 +39,7 @@ describe('OrgUnitListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [OrgUnitListElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.spec.ts

@@ -6,6 +6,8 @@ import { of as observableOf } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem: Item = Object.assign(new Item(), {
   bundles: observableOf({}),
@@ -37,6 +39,7 @@ describe('PersonListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [PersonListElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.spec.ts

@@ -6,6 +6,8 @@ import { Item } from '../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
 import { ProjectListElementComponent } from './project-list-element.component';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../shared/mocks/dso-name.service.mock';
 
 const mockItem: Item = Object.assign(new Item(), {
   bundles: observableOf({}),
@@ -37,6 +39,7 @@ describe('ProjectListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ProjectListElementComponent, TruncatePipe],
       providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]