Merge remote-tracking branch 'dspace/main' into w2p-98422_Thumbnail-uploader_contribute-7.2

src/app/access-control/access-control.module.ts

@@ -10,6 +10,16 @@ import { MembersListComponent } from './group-registry/group-form/members-list/m
 import { SubgroupsListComponent } from './group-registry/group-form/subgroup-list/subgroups-list.component';
 import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
 import { FormModule } from '../shared/form/form.module';
+import { DYNAMIC_ERROR_MESSAGES_MATCHER, DynamicErrorMessagesMatcher } from '@ng-dynamic-forms/core';
+import { AbstractControl } from '@angular/forms';
+
+/**
+ * Condition for displaying error messages on email form field
+ */
+export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher =
+  (control: AbstractControl, model: any, hasFocus: boolean) => {
+    return (control.touched && !hasFocus) || (control.errors?.emailTaken && hasFocus);
+  };
 
 @NgModule({
   imports: [
@@ -26,6 +36,12 @@ import { FormModule } from '../shared/form/form.module';
     GroupFormComponent,
     SubgroupsListComponent,
     MembersListComponent
+  ],
+  providers: [
+    {
+      provide: DYNAMIC_ERROR_MESSAGES_MATCHER,
+      useValue: ValidateEmailErrorStateMatcher
+    },
   ]
 })
 /**

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { type } from '../../shared/ngrx/type';
@@ -16,7 +17,6 @@ export const EPeopleRegistryActionTypes = {
   CANCEL_EDIT_EPERSON: type('dspace/epeople-registry/CANCEL_EDIT_EPERSON'),
 };
 
-/* tslint:disable:max-classes-per-file */
 /**
  * Used to edit an EPerson in the EPeople registry
  */
@@ -37,7 +37,6 @@ export class EPeopleRegistryCancelEPersonAction implements Action {
   type = EPeopleRegistryActionTypes.CANCEL_EDIT_EPERSON;
 }
 
-/* tslint:enable:max-classes-per-file */
 
 /**
  * Export a type alias of all actions in this action group

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

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

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

@@ -9,7 +9,6 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
 import { RemoteData } from '../../core/data/remote-data';
-import { FindListOptions } from '../../core/data/request.models';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { PageInfo } from '../../core/shared/page-info.model';
@@ -27,6 +26,7 @@ import { AuthorizationDataService } from '../../core/data/feature-authorization/
 import { RequestService } from '../../core/data/request.service';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
+import { FindListOptions } from '../../core/data/find-list-options.model';
 
 describe('EPeopleRegistryComponent', () => {
   let component: EPeopleRegistryComponent;

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

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

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

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

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

@@ -8,7 +8,6 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
-import { FindListOptions } from '../../../core/data/request.models';
 import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
 import { EPerson } from '../../../core/eperson/models/eperson.model';
 import { PageInfo } from '../../../core/shared/page-info.model';
@@ -29,6 +28,7 @@ import { createPaginatedList } from '../../../shared/testing/utils.test';
 import { RequestService } from '../../../core/data/request.service';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
+import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { ValidateEmailNotTaken } from './validators/email-taken.validator';
 import { EpersonRegistrationService } from '../../../core/data/eperson-registration.service';
 
@@ -177,7 +177,7 @@ describe('EPersonFormComponent', () => {
 
     });
     groupsDataService = jasmine.createSpyObj('groupsDataService', {
-      findAllByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
+      findListByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
       getGroupRegistryRouterLink: ''
     });
 

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

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

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

@@ -2,8 +2,8 @@ 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 { FormsModule, ReactiveFormsModule, FormArray, FormControl, FormGroup,Validators, NG_VALIDATORS, NG_ASYNC_VALIDATORS } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
+import { FormControl, FormGroup, 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';
 import { Store } from '@ngrx/store';
@@ -35,6 +35,7 @@ import { RouterMock } from '../../../shared/mocks/router.mock';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
 import { Operation } from 'fast-json-patch';
 import { ValidateGroupExists } from './validators/group-exists.validator';
+import { NoContent } from '../../../core/shared/NoContent.model';
 
 describe('GroupFormComponent', () => {
   let component: GroupFormComponent;
@@ -87,6 +88,9 @@ describe('GroupFormComponent', () => {
       patch(group: Group, operations: Operation[]) {
         return null;
       },
+      delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+        return createSuccessfulRemoteDataObject$({});
+      },
       cancelEditGroup(): void {
         this.activeGroup = null;
       },
@@ -348,4 +352,46 @@ describe('GroupFormComponent', () => {
     });
   });
 
+  describe('delete', () => {
+    let deleteButton;
+
+    beforeEach(() => {
+      component.initialisePage();
+
+      component.canEdit$ = observableOf(true);
+      component.groupBeingEdited = {
+        permanent: false
+      } as Group;
+
+      fixture.detectChanges();
+      deleteButton = fixture.debugElement.query(By.css('.delete-button')).nativeElement;
+
+      spyOn(groupsDataServiceStub, 'delete').and.callThrough();
+      spyOn(groupsDataServiceStub, 'getActiveGroup').and.returnValue(observableOf({ id: 'active-group' }));
+    });
+
+    describe('if confirmed via modal', () => {
+      beforeEach(waitForAsync(() => {
+        deleteButton.click();
+        fixture.detectChanges();
+        (document as any).querySelector('.modal-footer .confirm').click();
+      }));
+
+      it('should call GroupDataService.delete', () => {
+        expect(groupsDataServiceStub.delete).toHaveBeenCalledWith('active-group');
+      });
+    });
+
+    describe('if canceled via modal', () => {
+      beforeEach(waitForAsync(() => {
+        deleteButton.click();
+        fixture.detectChanges();
+        (document as any).querySelector('.modal-footer .cancel').click();
+      }));
+
+      it('should not call GroupDataService.delete', () => {
+        expect(groupsDataServiceStub.delete).not.toHaveBeenCalled();
+      });
+    });
+  });
 });

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

@@ -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 { environment } from '../../../../environments/environment';
 
 @Component({
   selector: 'ds-group-form',
@@ -194,6 +195,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
         label: groupDescription,
         name: 'groupDescription',
         required: false,
+        spellCheck: environment.form.spellCheck,
       });
       this.formModel = [
         this.groupName,
@@ -426,7 +428,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
               .subscribe((rd: RemoteData<NoContent>) => {
                 if (rd.hasSucceeded) {
                   this.notificationsService.success(this.translateService.get(this.messagePrefix + '.notification.deleted.success', { name: group.name }));
-                  this.reset();
+                  this.onCancel();
                 } else {
                   this.notificationsService.error(
                     this.translateService.get(this.messagePrefix + '.notification.deleted.failure.title', { name: group.name }),
@@ -439,16 +441,6 @@ export class GroupFormComponent implements OnInit, OnDestroy {
     });
   }
 
-  /**
-   * This method will ensure that the page gets reset and that the cache is cleared
-   */
-  reset() {
-    this.groupDataService.getBrowseEndpoint().pipe(take(1)).subscribe((href: string) => {
-      this.requestService.removeByHrefSubstring(href);
-    });
-    this.onCancel();
-  }
-
   /**
    * Cancel the current edit when component is destroyed & unsub all subscriptions
    */

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

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

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

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

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

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

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

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

src/app/access-control/group-registry/group-registry.actions.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { Group } from '../../core/eperson/models/group.model';
 import { type } from '../../shared/ngrx/type';
@@ -16,7 +17,6 @@ export const GroupRegistryActionTypes = {
   CANCEL_EDIT_GROUP: type('dspace/epeople-registry/CANCEL_EDIT_GROUP'),
 };
 
-/* tslint:disable:max-classes-per-file */
 /**
  * Used to edit a Group in the Group registry
  */
@@ -37,7 +37,6 @@ export class GroupRegistryCancelGroupAction implements Action {
   type = GroupRegistryActionTypes.CANCEL_EDIT_GROUP;
 }
 
-/* tslint:enable:max-classes-per-file */
 
 /**
  * Export a type alias of all actions in this action group

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

@@ -33,7 +33,7 @@
         </div>
       </form>
 
-      <ds-loading *ngIf="loading$ | async"></ds-loading>
+      <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
       <ds-pagination
         *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(loading$ | async)"
         [paginationOptions]="config"
@@ -79,7 +79,7 @@
                     </button>
                   </ng-container>
                   <button *ngIf="!groupDto.group?.permanent && groupDto.ableToDelete"
-                          (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm"
+                          (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
                           title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: groupDto.group.name} }}">
                     <i class="fas fa-trash-alt fa-fw"></i>
                   </button>

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

@@ -31,6 +31,7 @@ import { RouterMock } from '../../shared/mocks/router.mock';
 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';
 
 describe('GroupRegistryComponent', () => {
   let component: GroupsRegistryComponent;
@@ -68,7 +69,7 @@ describe('GroupRegistryComponent', () => {
     mockGroups = [GroupMock, GroupMock2];
     mockEPeople = [EPersonMock, EPersonMock2];
     ePersonDataServiceStub = {
-      findAllByHref(href: string): Observable<RemoteData<PaginatedList<EPerson>>> {
+      findListByHref(href: string): Observable<RemoteData<PaginatedList<EPerson>>> {
         switch (href) {
           case 'https://dspace.4science.it/dspace-spring-rest/api/eperson/groups/testgroupid2/epersons':
             return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo({
@@ -96,7 +97,7 @@ describe('GroupRegistryComponent', () => {
     };
     groupsDataServiceStub = {
       allGroups: mockGroups,
-      findAllByHref(href: string): Observable<RemoteData<PaginatedList<Group>>> {
+      findListByHref(href: string): Observable<RemoteData<PaginatedList<Group>>> {
         switch (href) {
           case 'https://dspace.4science.it/dspace-spring-rest/api/eperson/groups/testgroupid2/groups':
             return createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo({
@@ -145,7 +146,10 @@ describe('GroupRegistryComponent', () => {
           totalPages: 1,
           currentPage: 1
         }), [result]));
-      }
+      },
+      delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+        return createSuccessfulRemoteDataObject$({});
+      },
     };
     dsoDataServiceStub = {
       findByHref(href: string): Observable<RemoteData<DSpaceObject>> {
@@ -301,4 +305,29 @@ describe('GroupRegistryComponent', () => {
       });
     });
   });
+
+  describe('delete', () => {
+    let deleteButton;
+
+    beforeEach(fakeAsync(() => {
+      spyOn(groupsDataServiceStub, 'delete').and.callThrough();
+
+      setIsAuthorized(true, true);
+
+      // force rerender after setup changes
+      component.search({ query: '' });
+      tick();
+      fixture.detectChanges();
+
+      // only mockGroup[0] is deletable, so we should only get one button
+      deleteButton = fixture.debugElement.query(By.css('.btn-delete')).nativeElement;
+    }));
+
+    it('should call GroupDataService.delete', () => {
+      deleteButton.click();
+      fixture.detectChanges();
+
+      expect(groupsDataServiceStub.delete).toHaveBeenCalledWith(mockGroups[0].id);
+    });
+  });
 });

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

@@ -5,11 +5,12 @@ import { TranslateService } from '@ngx-translate/core';
 import {
   BehaviorSubject,
   combineLatest as observableCombineLatest,
+  EMPTY,
   Observable,
   of as observableOf,
   Subscription
 } from 'rxjs';
-import { catchError, map, switchMap, take, tap } from 'rxjs/operators';
+import { catchError, defaultIfEmpty, map, switchMap, tap } from 'rxjs/operators';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
@@ -144,7 +145,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
         }
         return this.authorizationService.isAuthorized(FeatureID.AdministratorOf).pipe(
           switchMap((isSiteAdmin: boolean) => {
-            return observableCombineLatest(groups.page.map((group: Group) => {
+            return observableCombineLatest([...groups.page.map((group: Group) => {
               if (hasValue(group) && !this.deletedGroupsIds.includes(group.id)) {
                 return observableCombineLatest([
                   this.authorizationService.isAuthorized(FeatureID.CanDelete, group.self),
@@ -165,8 +166,10 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
                     }
                   )
                 );
+              } else {
+                return EMPTY;
               }
-            })).pipe(map((dtos: GroupDtoModel[]) => {
+            })]).pipe(defaultIfEmpty([]), map((dtos: GroupDtoModel[]) => {
               return buildPaginatedList(groups.pageInfo, dtos);
             }));
           })
@@ -199,7 +202,6 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
           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.reset();
           } else {
             this.notificationsService.error(
               this.translateService.get(this.messagePrefix + 'notification.deleted.failure.title', { name: group.group.name }),
@@ -209,23 +211,12 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * This method will set everything to stale, which will cause the lists on this page to update.
-   */
-  reset() {
-    this.groupService.getBrowseEndpoint().pipe(
-      take(1)
-    ).subscribe((href: string) => {
-      this.requestService.setStaleByHrefSubstring(href);
-    });
-  }
-
   /**
    * Get the members (epersons embedded value of a group)
    * @param group
    */
   getMembers(group: Group): Observable<RemoteData<PaginatedList<EPerson>>> {
-    return this.ePersonDataService.findAllByHref(group._links.epersons.href).pipe(getFirstSucceededRemoteData());
+    return this.ePersonDataService.findListByHref(group._links.epersons.href).pipe(getFirstSucceededRemoteData());
   }
 
   /**
@@ -233,7 +224,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
    * @param group
    */
   getSubgroups(group: Group): Observable<RemoteData<PaginatedList<Group>>> {
-    return this.groupService.findAllByHref(group._links.subgroups.href).pipe(getFirstSucceededRemoteData());
+    return this.groupService.findListByHref(group._links.subgroups.href).pipe(getFirstSucceededRemoteData());
   }
 
   /**

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

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

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

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

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

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

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

@@ -1,6 +1,17 @@
 <div class="container">
   <h2 id="header">{{'admin.metadata-import.page.header' | translate}}</h2>
   <p>{{'admin.metadata-import.page.help' | translate}}</p>
+  <div class="form-group">
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" id="validateOnly" [(ngModel)]="validateOnly">
+      <label class="form-check-label" for="validateOnly">
+        {{'admin.metadata-import.page.validateOnly' | translate}}
+      </label>
+    </div>
+    <small id="validateOnlyHelpBlock" class="form-text text-muted">
+      {{'admin.metadata-import.page.validateOnly.hint' | translate}}
+    </small>
+  </div>
 
   <ds-file-dropzone-no-uploader
     (onFileAdded)="setFile($event)"
@@ -8,8 +19,10 @@
     [dropMessageLabelReplacement]="'admin.metadata-import.page.dropMsgReplace'">
   </ds-file-dropzone-no-uploader>
 
-  <button class="btn btn-secondary" id="backButton"
-          (click)="this.onReturn();">{{'admin.metadata-import.page.button.return' | translate}}</button>
-  <button class="btn btn-primary" id="proceedButton"
-          (click)="this.importMetadata();">{{'admin.metadata-import.page.button.proceed' | translate}}</button>
+  <div class="space-children-mr">
+    <button class="btn btn-secondary" id="backButton"
+            (click)="this.onReturn();">{{'admin.metadata-import.page.button.return' | translate}}</button>
+    <button class="btn btn-primary" id="proceedButton"
+            (click)="this.importMetadata();">{{'admin.metadata-import.page.button.proceed' | translate}}</button>
+  </div>
 </div>

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

@@ -87,8 +87,9 @@ describe('MetadataImportPageComponent', () => {
       comp.setFile(fileMock);
     });
 
-    describe('if proceed button is pressed', () => {
+    describe('if proceed button is pressed without validate only', () => {
       beforeEach(fakeAsync(() => {
+        comp.validateOnly = false;
         const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
         proceed.click();
         fixture.detectChanges();
@@ -107,6 +108,28 @@ describe('MetadataImportPageComponent', () => {
       });
     });
 
+    describe('if proceed button is pressed with validate only', () => {
+      beforeEach(fakeAsync(() => {
+        comp.validateOnly = true;
+        const proceed = fixture.debugElement.query(By.css('#proceedButton')).nativeElement;
+        proceed.click();
+        fixture.detectChanges();
+      }));
+      it('metadata-import script is invoked with -f fileName and the mockFile and -v validate-only', () => {
+        const parameterValues: ProcessParameter[] = [
+          Object.assign(new ProcessParameter(), { name: '-f', value: 'filename.txt' }),
+          Object.assign(new ProcessParameter(), { name: '-v', value: true }),
+        ];
+        expect(scriptService.invoke).toHaveBeenCalledWith(METADATA_IMPORT_SCRIPT_NAME, parameterValues, [fileMock]);
+      });
+      it('success notification is shown', () => {
+        expect(notificationService.success).toHaveBeenCalled();
+      });
+      it('redirected to process page', () => {
+        expect(router.navigateByUrl).toHaveBeenCalledWith('/processes/45');
+      });
+    });
+
     describe('if proceed is pressed; but script invoke fails', () => {
       beforeEach(fakeAsync(() => {
         jasmine.getEnv().allowRespy(true);

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

@@ -1,12 +1,8 @@
 import { Location } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
-import { AuthService } from '../../core/auth/auth.service';
 import { METADATA_IMPORT_SCRIPT_NAME, ScriptDataService } from '../../core/data/processes/script-data.service';
-import { EPerson } from '../../core/eperson/models/eperson.model';
 import { ProcessParameter } from '../../process-page/processes/process-parameter.model';
 import { isNotEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -30,6 +26,11 @@ export class MetadataImportPageComponent {
    */
   fileObject: File;
 
+  /**
+   * The validate only flag
+   */
+  validateOnly = true;
+
   public constructor(private location: Location,
                      protected translate: TranslateService,
                      protected notificationsService: NotificationsService,
@@ -62,6 +63,9 @@ export class MetadataImportPageComponent {
       const parameterValues: ProcessParameter[] = [
         Object.assign(new ProcessParameter(), { name: '-f', value: this.fileObject.name }),
       ];
+      if (this.validateOnly) {
+        parameterValues.push(Object.assign(new ProcessParameter(), { name: '-v', value: true }));
+      }
 
       this.scriptDataService.invoke(METADATA_IMPORT_SCRIPT_NAME, parameterValues, [this.fileObject]).pipe(
         getFirstCompletedRemoteData(),

src/app/admin/admin-registries/bitstream-formats/bitstream-format.actions.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { type } from '../../../shared/ngrx/type';
 import { BitstreamFormat } from '../../../core/shared/bitstream-format.model';
@@ -17,7 +18,6 @@ export const BitstreamFormatsRegistryActionTypes = {
   DESELECT_ALL_FORMAT: type('dspace/bitstream-formats-registry/DESELECT_ALL_FORMAT')
 };
 
-/* tslint:disable:max-classes-per-file */
 /**
  * Used to select a single bitstream format in the bitstream format registry
  */
@@ -51,7 +51,6 @@ export class BitstreamFormatsRegistryDeselectAllAction implements Action {
   type = BitstreamFormatsRegistryActionTypes.DESELECT_ALL_FORMAT;
 }
 
-/* tslint:enable:max-classes-per-file */
 
 /**
  * Export a type alias of all actions in this action group

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

@@ -13,32 +13,34 @@
         [paginationOptions]="pageConfig"
         [pageInfoState]="(bitstreamFormats | async)?.payload"
         [collectionSize]="(bitstreamFormats | async)?.payload?.totalElements"
-        [hideGear]="true"
+        [hideGear]="false"
         [hidePagerWhenSinglePage]="true">
         <div class="table-responsive">
           <table id="formats" class="table table-striped table-hover">
             <thead>
-              <tr>
-                <th scope="col"></th>
-                <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
-                <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
-                <th scope="col">{{'admin.registries.bitstream-formats.table.supportLevel.head' | translate}}</th>
-              </tr>
+            <tr>
+              <th scope="col"></th>
+              <th scope="col">{{'admin.registries.bitstream-formats.table.id' | translate}}</th>
+              <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
+              <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
+              <th scope="col">{{'admin.registries.bitstream-formats.table.supportLevel.head' | translate}}</th>
+            </tr>
             </thead>
             <tbody>
-              <tr *ngFor="let bitstreamFormat of (bitstreamFormats | async)?.payload?.page">
-                <td>
-                  <label>
-                    <input type="checkbox"
-                           [checked]="isSelected(bitstreamFormat) | async"
-                           (change)="selectBitStreamFormat(bitstreamFormat, $event)"
-                    >
-                  </label>
-                </td>
-                <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.shortDescription}}</a></td>
-                <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.mimetype}} <span *ngIf="bitstreamFormat.internal">({{'admin.registries.bitstream-formats.table.internal' | translate}})</span></a></td>
-                <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{'admin.registries.bitstream-formats.table.supportLevel.'+bitstreamFormat.supportLevel | translate}}</a></td>
-              </tr>
+            <tr *ngFor="let bitstreamFormat of (bitstreamFormats | async)?.payload?.page">
+              <td>
+                <label>
+                  <input type="checkbox"
+                         [checked]="isSelected(bitstreamFormat) | async"
+                         (change)="selectBitStreamFormat(bitstreamFormat, $event)"
+                  >
+                </label>
+              </td>
+              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.id}}</a></td>
+              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.shortDescription}}</a></td>
+              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.mimetype}} <span *ngIf="bitstreamFormat.internal">({{'admin.registries.bitstream-formats.table.internal' | translate}})</span></a></td>
+              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{'admin.registries.bitstream-formats.table.supportLevel.'+bitstreamFormat.supportLevel | translate}}</a></td>
+            </tr>
             </tbody>
           </table>
         </div>

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

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

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

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

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

@@ -15,6 +15,7 @@ import { Router } from '@angular/router';
 import { hasValue, isEmpty } from '../../../../shared/empty.util';
 import { TranslateService } from '@ngx-translate/core';
 import { getBitstreamFormatsModuleRoute } from '../../admin-registries-routing-paths';
+import { environment } from '../../../../../environments/environment';
 
 /**
  * The component responsible for rendering the form to create/edit a bitstream format
@@ -90,6 +91,7 @@ export class FormatFormComponent implements OnInit {
       name: 'description',
       label: 'admin.registries.bitstream-formats.edit.description.label',
       hint: 'admin.registries.bitstream-formats.edit.description.hint',
+      spellCheck: environment.form.spellCheck,
 
     }),
     new DynamicSelectModel({

src/app/admin/admin-registries/metadata-registry/metadata-registry.actions.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Action } from '@ngrx/store';
 import { type } from '../../../shared/ngrx/type';
 import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
@@ -26,7 +27,6 @@ export const MetadataRegistryActionTypes = {
   DESELECT_ALL_FIELD: type('dspace/metadata-registry/DESELECT_ALL_FIELD')
 };
 
-/* tslint:disable:max-classes-per-file */
 /**
  * Used to edit a metadata schema in the metadata registry
  */
@@ -133,7 +133,6 @@ export class MetadataRegistryDeselectAllFieldAction implements Action {
   type = MetadataRegistryActionTypes.DESELECT_ALL_FIELD;
 }
 
-/* tslint:enable:max-classes-per-file */
 
 /**
  * Export a type alias of all actions in this action group

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

@@ -19,9 +19,6 @@ import { RestResponse } from '../../../core/cache/response.models';
 import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { PaginationService } from '../../../core/pagination/pagination.service';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
-import { FindListOptions } from '../../../core/data/request.models';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
 
 describe('MetadataRegistryComponent', () => {
@@ -52,7 +49,7 @@ describe('MetadataRegistryComponent', () => {
     }
   ];
   const mockSchemas = createSuccessfulRemoteDataObject$(buildPaginatedList(null, mockSchemasList));
-  /* tslint:disable:no-empty */
+  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
   const registryServiceStub = {
     getMetadataSchemas: () => mockSchemas,
     getActiveMetadataSchema: () => observableOf(undefined),
@@ -66,7 +63,7 @@ describe('MetadataRegistryComponent', () => {
     },
     clearMetadataSchemaRequests: () => observableOf(undefined)
   };
-  /* tslint:enable:no-empty */
+  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
 
   paginationService = new PaginationServiceStub();
 

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

@@ -128,7 +128,6 @@ export class MetadataRegistryComponent {
    * Delete all the selected metadata schemas
    */
   deleteSchemas() {
-    this.registryService.clearMetadataSchemaRequests().subscribe();
     this.registryService.getSelectedMetadataSchemas().pipe(take(1)).subscribe(
       (schemas) => {
         const tasks$ = [];
@@ -148,7 +147,6 @@ export class MetadataRegistryComponent {
           }
           this.registryService.deselectAllMetadataSchema();
           this.registryService.cancelEditMetadataSchema();
-          this.forceUpdateSchemas();
         });
       }
     );

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

@@ -17,7 +17,7 @@ describe('MetadataSchemaFormComponent', () => {
   let fixture: ComponentFixture<MetadataSchemaFormComponent>;
   let registryService: RegistryService;
 
-  /* tslint:disable:no-empty */
+  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
   const registryServiceStub = {
     getActiveMetadataSchema: () => observableOf(undefined),
     createOrUpdateMetadataSchema: (schema: MetadataSchema) => observableOf(schema),
@@ -33,7 +33,7 @@ describe('MetadataSchemaFormComponent', () => {
       };
     }
   };
-  /* tslint:enable:no-empty */
+  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({

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

@@ -24,7 +24,7 @@ describe('MetadataFieldFormComponent', () => {
     prefix: 'fake'
   });
 
-  /* tslint:disable:no-empty */
+  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
   const registryServiceStub = {
     getActiveMetadataField: () => observableOf(undefined),
     createMetadataField: (field: MetadataField) => observableOf(field),
@@ -43,7 +43,7 @@ describe('MetadataFieldFormComponent', () => {
       };
     }
   };
-  /* tslint:enable:no-empty */
+  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({

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

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

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

@@ -23,9 +23,6 @@ import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
 import { MetadataField } from '../../../core/metadata/metadata-field.model';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { VarDirective } from '../../../shared/utils/var.directive';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
-import { FindListOptions } from '../../../core/data/request.models';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
 
@@ -106,7 +103,7 @@ describe('MetadataSchemaComponent', () => {
     }
   ];
   const mockSchemas = createSuccessfulRemoteDataObject$(buildPaginatedList(null, mockSchemasList));
-  /* tslint:disable:no-empty */
+  /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
   const registryServiceStub = {
     getMetadataSchemas: () => mockSchemas,
     getMetadataFieldsBySchema: (schema: MetadataSchema) => createSuccessfulRemoteDataObject$(buildPaginatedList(null, mockFieldsList.filter((value) => value.id === 3 || value.id === 4))),
@@ -122,7 +119,7 @@ describe('MetadataSchemaComponent', () => {
     },
     clearMetadataFieldRequests: () => observableOf(undefined)
   };
-  /* tslint:enable:no-empty */
+  /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
   const schemaNameParam = 'mock';
   const activatedRouteStub = Object.assign(new ActivatedRouteStub(), {
     params: observableOf({
@@ -169,10 +166,10 @@ describe('MetadataSchemaComponent', () => {
   });
 
   it('should contain the correct fields', () => {
-    const editorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(1) td:nth-child(2)')).nativeElement;
+    const editorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(1) td:nth-child(3)')).nativeElement;
     expect(editorField.textContent).toBe('mock.contributor.editor');
 
-    const illustratorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(2) td:nth-child(2)')).nativeElement;
+    const illustratorField: HTMLElement = fixture.debugElement.query(By.css('#metadata-fields tr:nth-child(2) td:nth-child(3)')).nativeElement;
     expect(illustratorField.textContent).toBe('mock.contributor.illustrator');
   });
 

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

@@ -174,15 +174,12 @@ export class MetadataSchemaComponent implements OnInit {
           const failedResponses = responses.filter((response: RemoteData<NoContent>) => response.hasFailed);
           if (successResponses.length > 0) {
             this.showNotification(true, successResponses.length);
-            this.registryService.clearMetadataFieldRequests();
-
           }
           if (failedResponses.length > 0) {
             this.showNotification(false, failedResponses.length);
           }
           this.registryService.deselectAllMetadataField();
           this.registryService.cancelEditMetadataField();
-          this.forceUpdateFields();
         });
       }
     );

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

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

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

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

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

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

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

@@ -18,6 +18,14 @@ import { ItemAdminSearchResultGridElementComponent } from './item-admin-search-r
 import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
 import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
 import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { AccessStatusDataService } from '../../../../../core/data/access-status-data.service';
+import { AccessStatusObject } from '../../../../../shared/object-list/access-status-badge/access-status.model';
+import { AuthService } from '../../../../../core/auth/auth.service';
+import { AuthServiceStub } from '../../../../../shared/testing/auth-service.stub';
+import { FileService } from '../../../../../core/shared/file.service';
+import { FileServiceStub } from '../../../../../shared/testing/file-service.stub';
+import { AuthorizationDataService } from '../../../../../core/data/feature-authorization/authorization-data.service';
+import { AuthorizationDataServiceStub } from '../../../../../shared/testing/authorization-service.stub';
 
 describe('ItemAdminSearchResultGridElementComponent', () => {
   let component: ItemAdminSearchResultGridElementComponent;
@@ -31,6 +39,12 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
     }
   };
 
+  const mockAccessStatusDataService = {
+    findAccessStatusFor(item: Item): Observable<RemoteData<AccessStatusObject>> {
+      return createSuccessfulRemoteDataObject$(new AccessStatusObject());
+    }
+  };
+
   const mockThemeService = getMockThemeService();
 
   function init() {
@@ -55,6 +69,10 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
           { provide: TruncatableService, useValue: mockTruncatableService },
           { provide: BitstreamDataService, useValue: mockBitstreamDataService },
           { provide: ThemeService, useValue: mockThemeService },
+          { provide: AccessStatusDataService, useValue: mockAccessStatusDataService },
+          { provide: AuthService, useClass: AuthServiceStub },
+          { provide: FileService, useClass: FileServiceStub },
+          { provide: AuthorizationDataService, useClass: AuthorizationDataServiceStub },
         ],
         schemas: [NO_ERRORS_SCHEMA]
       })

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

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

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

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

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

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

src/app/admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html

@@ -1,28 +1,30 @@
-<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
-  <i class="fa fa-arrow-circle-right"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.move" | translate}}</span>
-</a>
+<div class="space-children-mr my-1">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-secondary move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
+    <i class="fa fa-arrow-circle-right"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.move" | translate}}</span>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-secondary my-1 private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-secondary private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
     <i class="fa fa-eye-slash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-private" | translate}}</span>
-</a>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-secondary my-1 public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-secondary public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
     <i class="fa fa-eye"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-public" | translate}}</span>
-</a>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
-  <i class="fa fa-edit"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.edit" | translate}}</span>
-</a>
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-secondary edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
+    <i class="fa fa-edit"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.edit" | translate}}</span>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-warning t my-1 withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
-  <i class="fa fa-ban"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.withdraw" | translate}}</span>
-</a>
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-warning t withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
+    <i class="fa fa-ban"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.withdraw" | translate}}</span>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-warning my-1 reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
-  <i class="fa fa-undo"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.reinstate" | translate}}</span>
-</a>
+  <a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-warning reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
+    <i class="fa fa-undo"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.reinstate" | translate}}</span>
+  </a>
 
-<a [ngClass]="{'btn-sm': small}" class="btn btn-danger my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-danger delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
     <i class="fa fa-trash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.delete" | translate}}</span>
-</a>
+  </a>
+</div>
 

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

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

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

@@ -1,10 +1,10 @@
 import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { MenuSectionComponent } from '../../../shared/menu/menu-section/menu-section.component';
-import { MenuID } from '../../../shared/menu/initial-menus-state';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
 import { LinkMenuItemModel } from '../../../shared/menu/menu-item/models/link.model';
-import { MenuSection } from '../../../shared/menu/menu.reducer';
+import { MenuSection } from '../../../shared/menu/menu-section.model';
+import { MenuID } from '../../../shared/menu/menu-id.model';
 import { isNotEmpty } from '../../../shared/empty.util';
 import { Router } from '@angular/router';
 
@@ -12,7 +12,7 @@ import { Router } from '@angular/router';
  * Represents a non-expandable section in the admin sidebar
  */
 @Component({
-  /* tslint:disable:component-selector */
+  /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-admin-sidebar-section]',
   templateUrl: './admin-sidebar-section.component.html',
   styleUrls: ['./admin-sidebar-section.component.scss'],

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

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

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

@@ -6,7 +6,7 @@ import { ScriptDataService } from '../../core/data/processes/script-data.service
 import { AdminSidebarComponent } from './admin-sidebar.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuServiceStub } from '../../shared/testing/menu-service.stub';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { CSSVariableServiceStub } from '../../shared/testing/css-variable-service.stub';
 import { AuthServiceStub } from '../../shared/testing/auth-service.stub';
 import { AuthService } from '../../core/auth/auth.service';
@@ -16,10 +16,11 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import createSpy = jasmine.createSpy;
 import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
 import { Item } from '../../core/shared/item.model';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
 
 describe('AdminSidebarComponent', () => {
   let comp: AdminSidebarComponent;
@@ -60,6 +61,7 @@ describe('AdminSidebarComponent', () => {
       declarations: [AdminSidebarComponent],
       providers: [
         Injector,
+        { provide: ThemeService, useValue: getMockThemeService() },
         { provide: MenuService, useValue: menuService },
         { provide: CSSVariableService, useClass: CSSVariableServiceStub },
         { provide: AuthService, useClass: AuthServiceStub },
@@ -182,150 +184,4 @@ describe('AdminSidebarComponent', () => {
       expect(menuService.collapseMenuPreview).toHaveBeenCalled();
     }));
   });
-
-  describe('menu', () => {
-    beforeEach(() => {
-      spyOn(menuService, 'addSection');
-    });
-
-    describe('for regular user', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake(() => {
-          return observableOf(false);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should not show site admin section', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'admin_search', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'registries', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          parentID: 'registries', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'curation_tasks', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'workflow', visible: false,
-        }));
-      });
-
-      it('should not show edit_community', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'edit_community', visible: false,
-        }));
-
-      });
-
-      it('should not show edit_collection', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'edit_collection', visible: false,
-        }));
-      });
-
-      it('should not show access control section', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'access_control', visible: false,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          parentID: 'access_control', visible: false,
-        }));
-
-      });
-    });
-
-    describe('for site admin', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
-          return observableOf(featureID === FeatureID.AdministratorOf);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should contain site admin section', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'admin_search', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'registries', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          parentID: 'registries', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'curation_tasks', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'workflow', visible: true,
-        }));
-      });
-    });
-
-    describe('for community admin', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
-          return observableOf(featureID === FeatureID.IsCommunityAdmin);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should show edit_community', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'edit_community', visible: true,
-        }));
-      });
-    });
-
-    describe('for collection admin', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
-          return observableOf(featureID === FeatureID.IsCollectionAdmin);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should show edit_collection', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'edit_collection', visible: true,
-        }));
-      });
-    });
-
-    describe('for group admin', () => {
-      beforeEach(() => {
-        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
-          return observableOf(featureID === FeatureID.CanManageGroups);
-        });
-      });
-
-      beforeEach(() => {
-        comp.createMenu();
-      });
-
-      it('should show access control section', () => {
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          id: 'access_control', visible: true,
-        }));
-        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
-          parentID: 'access_control', visible: true,
-        }));
-      });
-    });
-  });
 });

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

@@ -1,27 +1,15 @@
 import { Component, HostListener, Injector, OnInit } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { combineLatest, combineLatest as observableCombineLatest, Observable, BehaviorSubject } from 'rxjs';
-import { debounceTime, first, map, take, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged, first, map, withLatestFrom } from 'rxjs/operators';
 import { AuthService } from '../../core/auth/auth.service';
-import { ScriptDataService } from '../../core/data/processes/script-data.service';
-import { slideHorizontal, slideSidebar } from '../../shared/animations/slide';
-import { CreateCollectionParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component';
-import { CreateCommunityParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component';
-import { CreateItemParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component';
-import { EditCollectionSelectorComponent } from '../../shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component';
-import { EditCommunitySelectorComponent } from '../../shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component';
-import { EditItemSelectorComponent } from '../../shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component';
-import { ExportMetadataSelectorComponent } from '../../shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component';
-import { MenuID, MenuItemType } from '../../shared/menu/initial-menus-state';
-import { LinkMenuItemModel } from '../../shared/menu/menu-item/models/link.model';
-import { OnClickMenuItemModel } from '../../shared/menu/menu-item/models/onclick.model';
-import { TextMenuItemModel } from '../../shared/menu/menu-item/models/text.model';
+import { slideSidebar } from '../../shared/animations/slide';
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
-import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../core/data/feature-authorization/feature-id';
-import { Router, ActivatedRoute } from '@angular/router';
+import { MenuID } from '../../shared/menu/menu-id.model';
+import { ActivatedRoute } from '@angular/router';
+import { ThemeService } from '../../shared/theme-support/theme.service';
 
 /**
  * Component representing the admin sidebar
@@ -30,7 +18,7 @@ import { Router, ActivatedRoute } from '@angular/router';
   selector: 'ds-admin-sidebar',
   templateUrl: './admin-sidebar.component.html',
   styleUrls: ['./admin-sidebar.component.scss'],
-  animations: [slideHorizontal, slideSidebar]
+  animations: [slideSidebar]
 })
 export class AdminSidebarComponent extends MenuComponent implements OnInit {
   /**
@@ -63,16 +51,16 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
 
   inFocus$: BehaviorSubject<boolean>;
 
-  constructor(protected menuService: MenuService,
+  constructor(
+    protected menuService: MenuService,
     protected injector: Injector,
     private variableService: CSSVariableService,
     private authService: AuthService,
-    private modalService: NgbModal,
     public authorizationService: AuthorizationDataService,
-    private scriptDataService: ScriptDataService,
-    public route: ActivatedRoute
+    public route: ActivatedRoute,
+    protected themeService: ThemeService
   ) {
-    super(menuService, injector, authorizationService, route);
+    super(menuService, injector, authorizationService, route, themeService);
     this.inFocus$ = new BehaviorSubject(false);
   }
 
@@ -80,9 +68,8 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    * Set and calculate all initial values of the instance variables
    */
   ngOnInit(): void {
-    this.createMenu();
     super.ngOnInit();
-    this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
+    this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width');
     this.authService.isAuthenticated()
       .subscribe((loggedIn: boolean) => {
         if (loggedIn) {
@@ -115,501 +102,6 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
     });
   }
 
-  /**
-   * Initialize all menu sections and items for this menu
-   */
-  createMenu() {
-    this.createMainMenuSections();
-    this.createSiteAdministratorMenuSections();
-    this.createExportMenuSections();
-    this.createImportMenuSections();
-    this.createAccessControlMenuSections();
-  }
-
-  /**
-   * Initialize the main menu sections.
-   * edit_community / edit_collection is only included if the current user is a Community or Collection admin
-   */
-  createMainMenuSections() {
-    combineLatest([
-      this.authorizationService.isAuthorized(FeatureID.IsCollectionAdmin),
-      this.authorizationService.isAuthorized(FeatureID.IsCommunityAdmin),
-      this.authorizationService.isAuthorized(FeatureID.AdministratorOf)
-    ]).subscribe(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin]) => {
-      const menuList = [
-        /* News */
-        {
-          id: 'new',
-          active: false,
-          visible: true,
-          model: {
-            type: MenuItemType.TEXT,
-            text: 'menu.section.new'
-          } as TextMenuItemModel,
-          icon: 'plus',
-          index: 0
-        },
-        {
-          id: 'new_community',
-          parentID: 'new',
-          active: false,
-          visible: isCommunityAdmin,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.new_community',
-            function: () => {
-              this.modalService.open(CreateCommunityParentSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'new_collection',
-          parentID: 'new',
-          active: false,
-          visible: isCommunityAdmin,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.new_collection',
-            function: () => {
-              this.modalService.open(CreateCollectionParentSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'new_item',
-          parentID: 'new',
-          active: false,
-          visible: true,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.new_item',
-            function: () => {
-              this.modalService.open(CreateItemParentSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'new_process',
-          parentID: 'new',
-          active: false,
-          visible: isCollectionAdmin,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.new_process',
-            link: '/processes/new'
-          } as LinkMenuItemModel,
-        },
-        // TODO: enable this menu item once the feature has been implemented
-        // {
-        //   id: 'new_item_version',
-        //   parentID: 'new',
-        //   active: false,
-        //   visible: true,
-        //   model: {
-        //     type: MenuItemType.LINK,
-        //     text: 'menu.section.new_item_version',
-        //     link: ''
-        //   } as LinkMenuItemModel,
-        // },
-
-        /* Edit */
-        {
-          id: 'edit',
-          active: false,
-          visible: true,
-          model: {
-            type: MenuItemType.TEXT,
-            text: 'menu.section.edit'
-          } as TextMenuItemModel,
-          icon: 'pencil-alt',
-          index: 1
-        },
-        {
-          id: 'edit_community',
-          parentID: 'edit',
-          active: false,
-          visible: isCommunityAdmin,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.edit_community',
-            function: () => {
-              this.modalService.open(EditCommunitySelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'edit_collection',
-          parentID: 'edit',
-          active: false,
-          visible: isCollectionAdmin,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.edit_collection',
-            function: () => {
-              this.modalService.open(EditCollectionSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-        {
-          id: 'edit_item',
-          parentID: 'edit',
-          active: false,
-          visible: true,
-          model: {
-            type: MenuItemType.ONCLICK,
-            text: 'menu.section.edit_item',
-            function: () => {
-              this.modalService.open(EditItemSelectorComponent);
-            }
-          } as OnClickMenuItemModel,
-        },
-
-        /* Statistics */
-        // TODO: enable this menu item once the feature has been implemented
-        // {
-        //   id: 'statistics_task',
-        //   active: false,
-        //   visible: true,
-        //   model: {
-        //     type: MenuItemType.LINK,
-        //     text: 'menu.section.statistics_task',
-        //     link: ''
-        //   } as LinkMenuItemModel,
-        //   icon: 'chart-bar',
-        //   index: 8
-        // },
-
-        /* Control Panel */
-        // TODO: enable this menu item once the feature has been implemented
-        // {
-        //   id: 'control_panel',
-        //   active: false,
-        //   visible: isSiteAdmin,
-        //   model: {
-        //     type: MenuItemType.LINK,
-        //     text: 'menu.section.control_panel',
-        //     link: ''
-        //   } as LinkMenuItemModel,
-        //   icon: 'cogs',
-        //   index: 9
-        // },
-
-        /* Processes */
-        {
-          id: 'processes',
-          active: false,
-          visible: isSiteAdmin,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.processes',
-            link: '/processes'
-          } as LinkMenuItemModel,
-          icon: 'terminal',
-          index: 10
-        },
-      ];
-      menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-        shouldPersistOnRouteChange: true
-      })));
-    });
-  }
-
-  /**
-   * Create menu sections dependent on whether or not the current user is a site administrator and on whether or not
-   * the export scripts exist and the current user is allowed to execute them
-   */
-  createExportMenuSections() {
-    const menuList = [
-      /* Export */
-      {
-        id: 'export',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.TEXT,
-          text: 'menu.section.export'
-        } as TextMenuItemModel,
-        icon: 'file-export',
-        index: 3,
-        shouldPersistOnRouteChange: true
-      },
-      // TODO: enable this menu item once the feature has been implemented
-      // {
-      //   id: 'export_community',
-      //   parentID: 'export',
-      //   active: false,
-      //   visible: true,
-      //   model: {
-      //     type: MenuItemType.LINK,
-      //     text: 'menu.section.export_community',
-      //     link: ''
-      //   } as LinkMenuItemModel,
-      //   shouldPersistOnRouteChange: true
-      // },
-      // TODO: enable this menu item once the feature has been implemented
-      // {
-      //   id: 'export_collection',
-      //   parentID: 'export',
-      //   active: false,
-      //   visible: true,
-      //   model: {
-      //     type: MenuItemType.LINK,
-      //     text: 'menu.section.export_collection',
-      //     link: ''
-      //   } as LinkMenuItemModel,
-      //   shouldPersistOnRouteChange: true
-      // },
-      // TODO: enable this menu item once the feature has been implemented
-      // {
-      //   id: 'export_item',
-      //   parentID: 'export',
-      //   active: false,
-      //   visible: true,
-      //   model: {
-      //     type: MenuItemType.LINK,
-      //     text: 'menu.section.export_item',
-      //     link: ''
-      //   } as LinkMenuItemModel,
-      //   shouldPersistOnRouteChange: true
-      // },
-    ];
-    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, menuSection));
-
-    observableCombineLatest(
-      this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
-      // this.scriptDataService.scriptWithNameExistsAndCanExecute(METADATA_EXPORT_SCRIPT_NAME)
-    ).pipe(
-      // TODO uncomment when #635 (https://github.com/DSpace/dspace-angular/issues/635) is fixed; otherwise even in production mode, the metadata export button is only available after a refresh (and not in dev mode)
-      // filter(([authorized, metadataExportScriptExists]: boolean[]) => authorized && metadataExportScriptExists),
-      take(1)
-    ).subscribe(() => {
-      this.menuService.addSection(this.menuID, {
-        id: 'export_metadata',
-        parentID: 'export',
-        active: true,
-        visible: true,
-        model: {
-          type: MenuItemType.ONCLICK,
-          text: 'menu.section.export_metadata',
-          function: () => {
-            this.modalService.open(ExportMetadataSelectorComponent);
-          }
-        } as OnClickMenuItemModel,
-        shouldPersistOnRouteChange: true
-      });
-    });
-  }
-
-  /**
-   * Create menu sections dependent on whether or not the current user is a site administrator and on whether or not
-   * the import scripts exist and the current user is allowed to execute them
-   */
-  createImportMenuSections() {
-    const menuList = [
-      /* Import */
-      {
-        id: 'import',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.TEXT,
-          text: 'menu.section.import'
-        } as TextMenuItemModel,
-        icon: 'file-import',
-        index: 2
-      },
-      // TODO: enable this menu item once the feature has been implemented
-      // {
-      //   id: 'import_batch',
-      //   parentID: 'import',
-      //   active: false,
-      //   visible: true,
-      //   model: {
-      //     type: MenuItemType.LINK,
-      //     text: 'menu.section.import_batch',
-      //     link: ''
-      //   } as LinkMenuItemModel,
-      // }
-    ];
-    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-      shouldPersistOnRouteChange: true
-    })));
-
-    observableCombineLatest(
-      this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
-      // this.scriptDataService.scriptWithNameExistsAndCanExecute(METADATA_IMPORT_SCRIPT_NAME)
-    ).pipe(
-      // TODO uncomment when #635 (https://github.com/DSpace/dspace-angular/issues/635) is fixed
-      // filter(([authorized, metadataImportScriptExists]: boolean[]) => authorized && metadataImportScriptExists),
-      take(1)
-    ).subscribe(() => {
-      this.menuService.addSection(this.menuID, {
-        id: 'import_metadata',
-        parentID: 'import',
-        active: true,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.import_metadata',
-          link: '/admin/metadata-import'
-        } as LinkMenuItemModel,
-        shouldPersistOnRouteChange: true
-      });
-    });
-  }
-
-  /**
-   * Create menu sections dependent on whether or not the current user is a site administrator
-   */
-  createSiteAdministratorMenuSections() {
-    this.authorizationService.isAuthorized(FeatureID.AdministratorOf).subscribe((authorized) => {
-      const menuList = [
-        /*  Admin Search */
-        {
-          id: 'admin_search',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.admin_search',
-            link: '/admin/search'
-          } as LinkMenuItemModel,
-          icon: 'search',
-          index: 5
-        },
-        /*  Registries */
-        {
-          id: 'registries',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.TEXT,
-            text: 'menu.section.registries'
-          } as TextMenuItemModel,
-          icon: 'list',
-          index: 6
-        },
-        {
-          id: 'registries_metadata',
-          parentID: 'registries',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.registries_metadata',
-            link: 'admin/registries/metadata'
-          } as LinkMenuItemModel,
-        },
-        {
-          id: 'registries_format',
-          parentID: 'registries',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.registries_format',
-            link: 'admin/registries/bitstream-formats'
-          } as LinkMenuItemModel,
-        },
-
-        /* Curation tasks */
-        {
-          id: 'curation_tasks',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.curation_task',
-            link: 'admin/curation-tasks'
-          } as LinkMenuItemModel,
-          icon: 'filter',
-          index: 7
-        },
-
-        /* Workflow */
-        {
-          id: 'workflow',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.workflow',
-            link: '/admin/workflow'
-          } as LinkMenuItemModel,
-          icon: 'user-check',
-          index: 11
-        },
-      ];
-
-      menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-        shouldPersistOnRouteChange: true
-      })));
-    });
-  }
-
-  /**
-   * Create menu sections dependent on whether or not the current user can manage access control groups
-   */
-  createAccessControlMenuSections() {
-    observableCombineLatest(
-      this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
-      this.authorizationService.isAuthorized(FeatureID.CanManageGroups)
-    ).subscribe(([isSiteAdmin, canManageGroups]) => {
-      const menuList = [
-        /* Access Control */
-        {
-          id: 'access_control_people',
-          parentID: 'access_control',
-          active: false,
-          visible: isSiteAdmin,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.access_control_people',
-            link: '/access-control/epeople'
-          } as LinkMenuItemModel,
-        },
-        {
-          id: 'access_control_groups',
-          parentID: 'access_control',
-          active: false,
-          visible: canManageGroups,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.access_control_groups',
-            link: '/access-control/groups'
-          } as LinkMenuItemModel,
-        },
-        // TODO: enable this menu item once the feature has been implemented
-        // {
-        //   id: 'access_control_authorizations',
-        //   parentID: 'access_control',
-        //   active: false,
-        //   visible: authorized,
-        //   model: {
-        //     type: MenuItemType.LINK,
-        //     text: 'menu.section.access_control_authorizations',
-        //     link: ''
-        //   } as LinkMenuItemModel,
-        // },
-        {
-          id: 'access_control',
-          active: false,
-          visible: canManageGroups || isSiteAdmin,
-          model: {
-            type: MenuItemType.TEXT,
-            text: 'menu.section.access_control'
-          } as TextMenuItemModel,
-          icon: 'key',
-          index: 4
-        },
-      ];
-
-      menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-        shouldPersistOnRouteChange: true,
-      })));
-    });
-  }
-
   @HostListener('focusin')
   public handleFocusIn() {
     this.inFocus$.next(true);

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

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

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

@@ -2,20 +2,20 @@ import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { rotate } from '../../../shared/animations/rotate';
 import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
 import { slide } from '../../../shared/animations/slide';
-import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
+import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
 import { bgColor } from '../../../shared/animations/bgColor';
-import { MenuID } from '../../../shared/menu/initial-menus-state';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
+import { MenuID } from '../../../shared/menu/menu-id.model';
 import { Router } from '@angular/router';
 
 /**
  * Represents a expandable section in the sidebar
  */
 @Component({
-  /* tslint:disable:component-selector */
+  /* eslint-disable @angular-eslint/component-selector */
   selector: 'li[ds-expandable-admin-sidebar-section]',
   templateUrl: './expandable-admin-sidebar-section.component.html',
   styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
@@ -65,7 +65,7 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg');
+    this.sidebarActiveBg = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
     this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.expanded = combineLatestObservable(this.active, this.sidebarCollapsed, this.sidebarPreviewCollapsed)

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { AdminSidebarComponent } from './admin-sidebar.component';
+
+/**
+ * Themed wrapper for AdminSidebarComponent
+ */
+@Component({
+  selector: 'ds-themed-admin-sidebar',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedAdminSidebarComponent extends ThemedComponent<AdminSidebarComponent> {
+  protected getComponentName(): string {
+    return 'AdminSidebarComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/admin/admin-sidebar/admin-sidebar.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./admin-sidebar.component');
+  }
+}

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

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

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

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

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

@@ -1,7 +1,8 @@
-<a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.workflow.item.delete' | translate">
+<div class="space-children-mr">
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.workflow.item.delete' | translate">
     <i class="fa fa-trash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.workflow.item.delete" | translate}}</span>
-</a>
-
-<a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 send-back-link" [routerLink]="[getSendBackRoute()]" [title]="'admin.workflow.item.send-back' | translate">
+  </a>
+  <a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 send-back-link" [routerLink]="[getSendBackRoute()]" [title]="'admin.workflow.item.send-back' | translate">
     <i class="fa fa-hand-point-left"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.workflow.item.send-back" | translate}}</span>
-</a>
+  </a>
+</div>

src/app/admin/admin.module.ts

@@ -9,6 +9,8 @@ import { AdminWorkflowModuleModule } from './admin-workflow-page/admin-workflow.
 import { AdminSearchModule } from './admin-search-page/admin-search.module';
 import { AdminSidebarSectionComponent } from './admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
 import { ExpandableAdminSidebarSectionComponent } from './admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
+import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
+import { UploadModule } from '../shared/upload/upload.module';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -24,11 +26,13 @@ const ENTRY_COMPONENTS = [
     AccessControlModule,
     AdminSearchModule.withEntryComponents(),
     AdminWorkflowModuleModule.withEntryComponents(),
-    SharedModule
+    SharedModule,
+    UploadModule,
   ],
   declarations: [
     AdminCurationTasksComponent,
-    MetadataImportPageComponent
+    MetadataImportPageComponent,
+    BatchImportPageComponent
   ]
 })
 export class AdminModule {

src/app/app-routing-paths.ts

@@ -70,6 +70,12 @@ export function getWorkflowItemModuleRoute() {
   return `/${WORKFLOW_ITEM_MODULE_PATH}`;
 }
 
+export const WORKSPACE_ITEM_MODULE_PATH = 'workspaceitems';
+
+export function getWorkspaceItemModuleRoute() {
+  return `/${WORKSPACE_ITEM_MODULE_PATH}`;
+}
+
 export function getDSORoute(dso: DSpaceObject): string {
   if (hasValue(dso)) {
     switch ((dso as any).type) {
@@ -101,6 +107,8 @@ export function getPageInternalServerErrorRoute() {
   return `/${INTERNAL_SERVER_ERROR}`;
 }
 
+export const ERROR_PAGE = 'error';
+
 export const INFO_MODULE_PATH = 'info';
 export function getInfoModulePath() {
   return `/${INFO_MODULE_PATH}`;
@@ -116,3 +124,5 @@ export const REQUEST_COPY_MODULE_PATH = 'request-a-copy';
 export function getRequestCopyModulePath() {
   return `/${REQUEST_COPY_MODULE_PATH}`;
 }
+
+export const HEALTH_PAGE_PATH = 'health';

src/app/app-routing.module.ts

@@ -1,15 +1,19 @@
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, NoPreloading } from '@angular/router';
 import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';
 
 import { AuthenticatedGuard } from './core/auth/authenticated.guard';
-import { SiteAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
+import {
+  SiteAdministratorGuard
+} from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 import {
   ACCESS_CONTROL_MODULE_PATH,
   ADMIN_MODULE_PATH,
   BITSTREAM_MODULE_PATH,
+  ERROR_PAGE,
   FORBIDDEN_PATH,
   FORGOT_PASSWORD_PATH,
+  HEALTH_PAGE_PATH,
   INFO_MODULE_PATH,
   INTERNAL_SERVER_ERROR,
   LEGACY_BITSTREAM_MODULE_PATH,
@@ -27,18 +31,26 @@ import { EndUserAgreementCurrentUserGuard } from './core/end-user-agreement/end-
 import { SiteRegisterGuard } from './core/data/feature-authorization/feature-authorization-guard/site-register.guard';
 import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
 import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
-import { GroupAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
-import { ThemedPageInternalServerErrorComponent } from './page-internal-server-error/themed-page-internal-server-error.component';
+import {
+  GroupAdministratorGuard
+} from './core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
+import {
+  ThemedPageInternalServerErrorComponent
+} from './page-internal-server-error/themed-page-internal-server-error.component';
 import { ServerCheckGuard } from './core/server-check/server-check.guard';
+import { MenuResolver } from './menu.resolver';
+import { ThemedPageErrorComponent } from './page-error/themed-page-error.component';
 
 @NgModule({
   imports: [
     RouterModule.forRoot([
       { path: INTERNAL_SERVER_ERROR, component: ThemedPageInternalServerErrorComponent },
+      { path: ERROR_PAGE , component: ThemedPageErrorComponent },
       {
         path: '',
         canActivate: [AuthBlockingGuard],
         canActivateChild: [ServerCheckGuard],
+        resolve: [MenuResolver],
         children: [
           { path: '', redirectTo: '/home', pathMatch: 'full' },
           {
@@ -208,6 +220,11 @@ import { ServerCheckGuard } from './core/server-check/server-check.guard';
             loadChildren: () => import('./statistics-page/statistics-page-routing.module')
               .then((m) => m.StatisticsPageRoutingModule)
           },
+          {
+            path: HEALTH_PAGE_PATH,
+            loadChildren: () => import('./health-page/health-page.module')
+              .then((m) => m.HealthPageModule)
+          },
           {
             path: ACCESS_CONTROL_MODULE_PATH,
             loadChildren: () => import('./access-control/access-control.module').then((m) => m.AccessControlModule),
@@ -217,6 +234,12 @@ import { ServerCheckGuard } from './core/server-check/server-check.guard';
         ]
       }
     ], {
+      // enableTracing: true,
+      useHash: false,
+      scrollPositionRestoration: 'enabled',
+      anchorScrolling: 'enabled',
+      initialNavigation: 'enabledBlocking',
+      preloadingStrategy: NoPreloading,
       onSameUrlNavigation: 'reload',
 })
   ],

src/app/app.component.spec.ts

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

src/app/app.component.ts

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

src/app/app.module.ts

@@ -1,84 +1,48 @@
-import { APP_BASE_HREF, CommonModule } from '@angular/common';
+import { APP_BASE_HREF, CommonModule, DOCUMENT } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, NgModule } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EffectsModule } from '@ngrx/effects';
 import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';
-import { MetaReducer, Store, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import {
-  DYNAMIC_ERROR_MESSAGES_MATCHER,
-  DYNAMIC_MATCHER_PROVIDERS,
-  DynamicErrorMessagesMatcher
-} from '@ng-dynamic-forms/core';
+import { MetaReducer, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
-
-import { AdminSidebarSectionComponent } from './admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
-import { AdminSidebarComponent } from './admin/admin-sidebar/admin-sidebar.component';
-import { ExpandableAdminSidebarSectionComponent } from './admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { appEffects } from './app.effects';
 import { appMetaReducers, debugMetaReducers } from './app.metareducers';
 import { appReducers, AppState, storeModuleConfig } from './app.reducer';
-import { CheckAuthenticationTokenAction } from './core/auth/auth.actions';
 import { CoreModule } from './core/core.module';
 import { ClientCookieService } from './core/services/client-cookie.service';
-import { FooterComponent } from './footer/footer.component';
-import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component';
-import { HeaderComponent } from './header/header.component';
 import { NavbarModule } from './navbar/navbar.module';
-import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer';
-import { NotificationComponent } from './shared/notifications/notification/notification.component';
-import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component';
 import { SharedModule } from './shared/shared.module';
-import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
 import { environment } from '../environments/environment';
-import { ForbiddenComponent } from './forbidden/forbidden.component';
 import { AuthInterceptor } from './core/auth/auth.interceptor';
 import { LocaleInterceptor } from './core/locale/locale.interceptor';
 import { XsrfInterceptor } from './core/xsrf/xsrf.interceptor';
 import { LogInterceptor } from './core/log/log.interceptor';
-import { RootComponent } from './root/root.component';
-import { ThemedRootComponent } from './root/themed-root.component';
-import { ThemedEntryComponentModule } from '../themes/themed-entry-component.module';
-import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
-import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
-import { ThemedHeaderComponent } from './header/themed-header.component';
-import { ThemedFooterComponent } from './footer/themed-footer.component';
-import { ThemedBreadcrumbsComponent } from './breadcrumbs/themed-breadcrumbs.component';
-import { ThemedHeaderNavbarWrapperComponent } from './header-nav-wrapper/themed-header-navbar-wrapper.component';
-import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
-import { ThemedPageInternalServerErrorComponent } from './page-internal-server-error/themed-page-internal-server-error.component';
-import { PageInternalServerErrorComponent } from './page-internal-server-error/page-internal-server-error.component';
-
+import { EagerThemesModule } from '../themes/eager-themes.module';
 import { APP_CONFIG, AppConfig } from '../config/app-config.interface';
+import { StoreDevModules } from '../config/store/devtools';
+import { RootModule } from './root.module';
 
 export function getConfig() {
   return environment;
 }
 
-export function getBase(appConfig: AppConfig) {
-  return appConfig.ui.nameSpace;
-}
+const getBaseHref = (document: Document, appConfig: AppConfig): string => {
+  const baseTag = document.querySelector('head > base');
+  baseTag.setAttribute('href', `${appConfig.ui.nameSpace}${appConfig.ui.nameSpace.endsWith('/') ? '' : '/'}`);
+  return baseTag.getAttribute('href');
+};
 
 export function getMetaReducers(appConfig: AppConfig): MetaReducer<AppState>[] {
   return appConfig.debug ? [...appMetaReducers, ...debugMetaReducers] : appMetaReducers;
 }
 
-/**
- * Condition for displaying error messages on email form field
- */
-export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher =
-  (control: AbstractControl, model: any, hasFocus: boolean) => {
-    return (control.touched && !hasFocus) || (control.errors?.emailTaken && hasFocus);
-  };
-
 const IMPORTS = [
   CommonModule,
   SharedModule,
@@ -92,25 +56,16 @@ const IMPORTS = [
   EffectsModule.forRoot(appEffects),
   StoreModule.forRoot(appReducers, storeModuleConfig),
   StoreRouterConnectingModule.forRoot(),
-  ThemedEntryComponentModule.withEntryComponents(),
+  StoreDevModules,
+  EagerThemesModule,
+  RootModule,
 ];
 
-IMPORTS.push(
-  StoreDevtoolsModule.instrument({
-    maxAge: 1000,
-    logOnly: environment.production,
-  })
-);
-
 const PROVIDERS = [
-  {
-    provide: APP_CONFIG,
-    useFactory: getConfig
-  },
   {
     provide: APP_BASE_HREF,
-    useFactory: getBase,
-    deps: [APP_CONFIG]
+    useFactory: getBaseHref,
+    deps: [DOCUMENT, APP_CONFIG]
   },
   {
     provide: USER_PROVIDED_META_REDUCERS,
@@ -122,15 +77,6 @@ const PROVIDERS = [
     useClass: DSpaceRouterStateSerializer
   },
   ClientCookieService,
-  // Check the authentication token when the app initializes
-  {
-    provide: APP_INITIALIZER,
-    useFactory: (store: Store<AppState>,) => {
-      return () => store.dispatch(new CheckAuthenticationTokenAction());
-    },
-    deps: [Store],
-    multi: true
-  },
   // register AuthInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,
@@ -155,37 +101,10 @@ const PROVIDERS = [
     useClass: LogInterceptor,
     multi: true
   },
-  {
-    provide: DYNAMIC_ERROR_MESSAGES_MATCHER,
-    useValue: ValidateEmailErrorStateMatcher
-  },
-  ...DYNAMIC_MATCHER_PROVIDERS,
 ];
 
 const DECLARATIONS = [
   AppComponent,
-  RootComponent,
-  ThemedRootComponent,
-  HeaderComponent,
-  ThemedHeaderComponent,
-  HeaderNavbarWrapperComponent,
-  ThemedHeaderNavbarWrapperComponent,
-  AdminSidebarComponent,
-  AdminSidebarSectionComponent,
-  ExpandableAdminSidebarSectionComponent,
-  FooterComponent,
-  ThemedFooterComponent,
-  PageNotFoundComponent,
-  ThemedPageNotFoundComponent,
-  NotificationComponent,
-  NotificationsBoardComponent,
-  BreadcrumbsComponent,
-  ThemedBreadcrumbsComponent,
-  ForbiddenComponent,
-  ThemedForbiddenComponent,
-  IdleModalComponent,
-  ThemedPageInternalServerErrorComponent,
-  PageInternalServerErrorComponent
 ];
 
 const EXPORTS = [

src/app/app.reducer.ts

@@ -1,4 +1,4 @@
-import * as fromRouter from '@ngrx/router-store';
+import { routerReducer, RouterReducerState } from '@ngrx/router-store';
 import { ActionReducerMap, createSelector, MemoizedSelector } from '@ngrx/store';
 import {
   ePeopleRegistryReducer,
@@ -22,7 +22,7 @@ import {
   nameVariantReducer
 } from './shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/name-variant.reducer';
 import { formReducer, FormState } from './shared/form/form.reducer';
-import { menusReducer, MenusState } from './shared/menu/menu.reducer';
+import { menusReducer} from './shared/menu/menu.reducer';
 import {
   notificationsReducer,
   NotificationsState
@@ -35,30 +35,26 @@ import {
   ObjectSelectionListState,
   objectSelectionReducer
 } from './shared/object-select/object-select.reducer';
-import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/sass-helper.reducer';
+import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/css-variable.reducer';
 
 import { hostWindowReducer, HostWindowState } from './shared/search/host-window.reducer';
 import {
   filterReducer,
   SearchFiltersState
 } from './shared/search/search-filters/search-filter/search-filter.reducer';
-import {
-  sidebarFilterReducer,
-  SidebarFiltersState
-} from './shared/sidebar/filter/sidebar-filter.reducer';
 import { sidebarReducer, SidebarState } from './shared/sidebar/sidebar.reducer';
 import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer';
 import { ThemeState, themeReducer } from './shared/theme-support/theme.reducer';
+import { MenusState } from './shared/menu/menus-state.model';
 import { correlationIdReducer } from './correlation-id/correlation-id.reducer';
 
 export interface AppState {
-  router: fromRouter.RouterReducerState;
+  router: RouterReducerState;
   hostWindow: HostWindowState;
   forms: FormState;
   metadataRegistry: MetadataRegistryState;
   notifications: NotificationsState;
   sidebar: SidebarState;
-  sidebarFilter: SidebarFiltersState;
   searchFilter: SearchFiltersState;
   truncatable: TruncatablesState;
   cssVariables: CSSVariablesState;
@@ -74,13 +70,12 @@ export interface AppState {
 }
 
 export const appReducers: ActionReducerMap<AppState> = {
-  router: fromRouter.routerReducer,
+  router: routerReducer,
   hostWindow: hostWindowReducer,
   forms: formReducer,
   metadataRegistry: metadataRegistryReducer,
   notifications: notificationsReducer,
   sidebar: sidebarReducer,
-  sidebarFilter: sidebarFilterReducer,
   searchFilter: filterReducer,
   truncatable: truncatableReducer,
   cssVariables: cssVariablesReducer,

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

@@ -0,0 +1,8 @@
+<div class="container">
+  <h3>{{'bitstream.download.page' | translate:{bitstream: (bitstream$ | async)?.name} }}</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}}
+    </button>
+  </div>
+</div>

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

@@ -6,7 +6,7 @@ import { Bitstream } from '../../core/shared/bitstream.model';
 import { BitstreamDownloadPageComponent } from './bitstream-download-page.component';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { HardRedirectService } from '../../core/services/hard-redirect.service';
-import { createSuccessfulRemoteDataObject } from '../remote-data.utils';
+import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
 import { ActivatedRoute, Router } from '@angular/router';
 import { getForbiddenRoute } from '../../app-routing-paths';
 import { TranslateModule } from '@ngx-translate/core';

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

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { filter, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
-import { hasValue, isNotEmpty } from '../empty.util';
-import { getRemoteDataPayload, redirectOn4xx } from '../../core/shared/operators';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
+import { getRemoteDataPayload} from '../../core/shared/operators';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
@@ -12,6 +12,8 @@ import { FileService } from '../../core/shared/file.service';
 import { HardRedirectService } from '../../core/services/hard-redirect.service';
 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';
 
 @Component({
   selector: 'ds-bitstream-download-page',
@@ -33,10 +35,15 @@ export class BitstreamDownloadPageComponent implements OnInit {
     private auth: AuthService,
     private fileService: FileService,
     private hardRedirectService: HardRedirectService,
+    private location: Location,
   ) {
 
   }
 
+  back(): void {
+    this.location.back();
+  }
+
   ngOnInit(): void {
 
     this.bitstreamRD$ = this.route.data.pipe(

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

@@ -2,13 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 import { BitstreamPageResolver } from './bitstream-page.resolver';
-import { BitstreamDownloadPageComponent } from '../shared/bitstream-download-page/bitstream-download-page.component';
+import { BitstreamDownloadPageComponent } from './bitstream-download-page/bitstream-download-page.component';
 import { ResourcePolicyTargetResolver } from '../shared/resource-policies/resolvers/resource-policy-target.resolver';
 import { ResourcePolicyCreateComponent } from '../shared/resource-policies/create/resource-policy-create.component';
 import { ResourcePolicyResolver } from '../shared/resource-policies/resolvers/resource-policy.resolver';
 import { ResourcePolicyEditComponent } from '../shared/resource-policies/edit/resource-policy-edit.component';
 import { BitstreamAuthorizationsComponent } from './bitstream-authorizations/bitstream-authorizations.component';
 import { LegacyBitstreamUrlResolver } from './legacy-bitstream-url.resolver';
+import { BitstreamBreadcrumbResolver } from '../core/breadcrumbs/bitstream-breadcrumb.resolver';
+import { BitstreamBreadcrumbsService } from '../core/breadcrumbs/bitstream-breadcrumbs.service';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { ThemedEditBitstreamPageComponent } from './edit-bitstream-page/themed-edit-bitstream-page.component';
 
 const EDIT_BITSTREAM_PATH = ':id/edit';
@@ -48,7 +51,8 @@ const EDIT_BITSTREAM_AUTHORIZATIONS_PATH = ':id/authorizations';
         path: EDIT_BITSTREAM_PATH,
         component: ThemedEditBitstreamPageComponent,
         resolve: {
-          bitstream: BitstreamPageResolver
+          bitstream: BitstreamPageResolver,
+          breadcrumb: BitstreamBreadcrumbResolver,
         },
         canActivate: [AuthenticatedGuard]
       },
@@ -67,15 +71,17 @@ const EDIT_BITSTREAM_AUTHORIZATIONS_PATH = ':id/authorizations';
           {
             path: 'edit',
             resolve: {
+              breadcrumb: I18nBreadcrumbResolver,
               resourcePolicy: ResourcePolicyResolver
             },
             component: ResourcePolicyEditComponent,
-            data: { title: 'resource-policies.edit.page.title', showBreadcrumbs: true }
+            data: { breadcrumbKey: 'item.edit', title: 'resource-policies.edit.page.title', showBreadcrumbs: true }
           },
           {
             path: '',
             resolve: {
-              bitstream: BitstreamPageResolver
+              bitstream: BitstreamPageResolver,
+              breadcrumb: BitstreamBreadcrumbResolver,
             },
             component: BitstreamAuthorizationsComponent,
             data: { title: 'bitstream.edit.authorizations.title', showBreadcrumbs: true }
@@ -86,6 +92,8 @@ const EDIT_BITSTREAM_AUTHORIZATIONS_PATH = ':id/authorizations';
   ],
   providers: [
     BitstreamPageResolver,
+    BitstreamBreadcrumbResolver,
+    BitstreamBreadcrumbsService
   ]
 })
 export class BitstreamPageRoutingModule {

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

@@ -6,6 +6,7 @@ import { BitstreamPageRoutingModule } from './bitstream-page-routing.module';
 import { BitstreamAuthorizationsComponent } from './bitstream-authorizations/bitstream-authorizations.component';
 import { FormModule } from '../shared/form/form.module';
 import { ResourcePoliciesModule } from '../shared/resource-policies/resource-policies.module';
+import { BitstreamDownloadPageComponent } from './bitstream-download-page/bitstream-download-page.component';
 import { ThemedEditBitstreamPageComponent } from './edit-bitstream-page/themed-edit-bitstream-page.component';
 
 /**
@@ -23,6 +24,7 @@ import { ThemedEditBitstreamPageComponent } from './edit-bitstream-page/themed-e
     BitstreamAuthorizationsComponent,
     EditBitstreamPageComponent,
     ThemedEditBitstreamPageComponent,
+    BitstreamDownloadPageComponent,
   ]
 })
 export class BitstreamPageModule {

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

@@ -7,6 +7,15 @@ import { BitstreamDataService } from '../core/data/bitstream-data.service';
 import { followLink, FollowLinkConfig } from '../shared/utils/follow-link-config.model';
 import { getFirstCompletedRemoteData } from '../core/shared/operators';
 
+/**
+ * The self links defined in this list are expected to be requested somewhere in the near future
+ * Requesting them as embeds will limit the number of requests
+ */
+ export const BITSTREAM_PAGE_LINKS_TO_FOLLOW: FollowLinkConfig<Bitstream>[] = [
+  followLink('bundle', {}, followLink('item')),
+  followLink('format')
+];
+
 /**
  * This class represents a resolver that requests a specific bitstream before the route is activated
  */
@@ -34,9 +43,6 @@ export class BitstreamPageResolver implements Resolve<RemoteData<Bitstream>> {
      * Requesting them as embeds will limit the number of requests
      */
     get followLinks(): FollowLinkConfig<Bitstream>[] {
-        return [
-            followLink('bundle', {}, followLink('item')),
-            followLink('format')
-        ];
+      return BITSTREAM_PAGE_LINKS_TO_FOLLOW;
     }
 }

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

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

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

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

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

@@ -1,9 +1,9 @@
 import { LegacyBitstreamUrlResolver } from './legacy-bitstream-url.resolver';
-import { of as observableOf, EMPTY } from 'rxjs';
+import { EMPTY } from 'rxjs';
 import { BitstreamDataService } from '../core/data/bitstream-data.service';
 import { RemoteData } from '../core/data/remote-data';
-import { RequestEntryState } from '../core/data/request.reducer';
 import { TestScheduler } from 'rxjs/testing';
+import { RequestEntryState } from '../core/data/request-entry-state.model';
 
 describe(`LegacyBitstreamUrlResolver`, () => {
   let resolver: LegacyBitstreamUrlResolver;

src/app/breadcrumbs/breadcrumbs.component.html

@@ -10,7 +10,7 @@
     </nav>
 
     <ng-template #breadcrumb let-text="text" let-url="url">
-        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate">{{text | translate}}</a></div></li>
+        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate" [ngbTooltip]="text | translate" placement="bottom" >{{text | translate}}</a></div></li>
     </ng-template>
 
     <ng-template #activeBreadcrumb let-text="text">

src/app/breadcrumbs/breadcrumbs.component.scss

@@ -23,11 +23,14 @@ li.breadcrumb-item {
   }
 }
 
-li.breadcrumb-item > a {
-  color: var(--ds-breadcrumb-link-color) !important;
+li.breadcrumb-item {
+    a {
+        color: var(--ds-breadcrumb-link-color);
+    }
 }
+
 li.breadcrumb-item.active {
-  color: var(--ds-breadcrumb-link-active-color) !important;
+  color: var(--ds-breadcrumb-link-active-color);
 }
 
 .breadcrumb-item+ .breadcrumb-item::before {

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

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

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

@@ -1,9 +1,8 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject } from '@angular/core';
 import {
   BrowseByMetadataPageComponent,
-  browseParamsToOptions
+  browseParamsToOptions, getBrowseSearchOptions
 } from '../browse-by-metadata-page/browse-by-metadata-page.component';
-import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
 import { combineLatest as observableCombineLatest } from 'rxjs';
 import { RemoteData } from '../../core/data/remote-data';
 import { Item } from '../../core/shared/item.model';
@@ -12,12 +11,12 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BrowseService } from '../../core/browse/browse.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
-import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
-import { environment } from '../../../environments/environment';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
+import { isValidDate } from '../../shared/date.util';
+import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
 
 @Component({
   selector: 'ds-browse-by-date-page',
@@ -29,7 +28,6 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
  * A metadata definition (a.k.a. browse id) is a short term used to describe one or multiple metadata fields.
  * An example would be 'dateissued' for 'dc.date.issued'
  */
-@rendersBrowseBy(BrowseByDataType.Date)
 export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
 
   /**
@@ -42,14 +40,16 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
                      protected dsoService: DSpaceObjectDataService,
                      protected router: Router,
                      protected paginationService: PaginationService,
-                     protected cdRef: ChangeDetectorRef) {
-    super(route, browseService, dsoService, paginationService, router);
+                     protected cdRef: ChangeDetectorRef,
+                     @Inject(APP_CONFIG) public appConfig: AppConfig) {
+    super(route, browseService, dsoService, paginationService, router, appConfig);
   }
 
   ngOnInit(): void {
     const sortConfig = new SortOptions('default', SortDirection.ASC);
     this.startsWithType = StartsWithType.date;
-    this.updatePage(new BrowseEntrySearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig));
+    // include the thumbnail configuration in browse search options
+    this.updatePage(getBrowseSearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig, this.fetchThumbnails));
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
     this.subs.push(
@@ -62,7 +62,7 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
         const metadataKeys = params.browseDefinition ? params.browseDefinition.metadataKeys : this.defaultMetadataKeys;
         this.browseId = params.id || this.defaultBrowseId;
         this.startsWith = +params.startsWith || params.startsWith;
-        const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId);
+        const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails);
         this.updatePageWithItems(searchOptions, this.value, undefined);
         this.updateParent(params.scope);
         this.updateStartsWithOptions(this.browseId, metadataKeys, params.scope);
@@ -82,19 +82,19 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
   updateStartsWithOptions(definition: string, metadataKeys: string[], scope?: string) {
     this.subs.push(
       this.browseService.getFirstItemFor(definition, scope).subscribe((firstItemRD: RemoteData<Item>) => {
-        let lowerLimit = environment.browseBy.defaultLowerLimit;
+        let lowerLimit = this.appConfig.browseBy.defaultLowerLimit;
         if (hasValue(firstItemRD.payload)) {
           const date = firstItemRD.payload.firstMetadataValue(metadataKeys);
-          if (hasValue(date)) {
+          if (isNotEmpty(date) && isValidDate(date)) {
             const dateObj = new Date(date);
             // TODO: it appears that getFullYear (based on local time) is sometimes unreliable. Switching to UTC.
-            lowerLimit = dateObj.getUTCFullYear();
+            lowerLimit = isNaN(dateObj.getUTCFullYear()) ? lowerLimit : dateObj.getUTCFullYear();
           }
         }
         const options = [];
         const currentYear = new Date().getUTCFullYear();
-        const oneYearBreak = Math.floor((currentYear - environment.browseBy.oneYearLimit) / 5) * 5;
-        const fiveYearBreak = Math.floor((currentYear - environment.browseBy.fiveYearLimit) / 10) * 10;
+        const oneYearBreak = Math.floor((currentYear - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
+        const fiveYearBreak = Math.floor((currentYear - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
         if (lowerLimit <= fiveYearBreak) {
           lowerLimit -= 10;
         } else if (lowerLimit <= oneYearBreak) {

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

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

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

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

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

@@ -6,10 +6,10 @@
         <ds-comcol-page-header [name]="parentContext.name">
         </ds-comcol-page-header>
         <!-- Handle -->
-        <ds-comcol-page-handle
+        <ds-themed-comcol-page-handle
             [content]="parentContext.handle"
             [title]="parentContext.type+'.page.handle'" >
-        </ds-comcol-page-handle>
+        </ds-themed-comcol-page-handle>
         <!-- Introductory text -->
         <ds-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
         </ds-comcol-page-content>
@@ -18,24 +18,29 @@
         </ds-comcol-page-content>
       </header>
       <!-- Browse-By Links -->
-      <ds-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-comcol-page-browse-by>
+      <ds-themed-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-themed-comcol-page-browse-by>
       </ng-container></ng-container>
 
     <section class="comcol-page-browse-section">
     <div class="browse-by-metadata w-100">
     <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
-      title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + browseId | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
+      title="{{'browse.title' | translate:
+      {
+        collection: (parent$ | async)?.payload?.name || '',
+        field: 'browse.metadata.' + browseId | translate,
+        startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
+        value: (value)? '&quot;' + value + '&quot;': ''
+      } }}"
       parentname="{{(parent$ | async)?.payload?.name || ''}}"
       [objects$]="(items$ !== undefined)? items$ : browseEntries$"
       [paginationConfig]="(currentPagination$ |async)"
       [sortConfig]="(currentSort$ |async)"
       [type]="startsWithType"
       [startsWithOptions]="startsWithOptions"
-      [enableArrows]="true"
       (prev)="goPrev()"
       (next)="goNext()">
     </ds-browse-by>
-    <ds-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-loading>
+    <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
   </div>
   </section>
   <ng-container *ngVar="(parent$ | async) as parent">

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

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

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

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

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

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

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

@@ -17,7 +17,7 @@ import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-bro
             component: ThemedBrowseBySwitcherComponent,
             canActivate: [BrowseByGuard],
             resolve: { breadcrumb: BrowseByI18nBreadcrumbResolver },
-            data: { title: 'browse.title', breadcrumbKey: 'browse.metadata' }
+            data: { title: 'browse.title.page', breadcrumbKey: 'browse.metadata' }
           }
         ]
       }])

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import { DynamicFormControlModel, DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
 import { DynamicSelectModelConfig } from '@ng-dynamic-forms/core/lib/model/select/dynamic-select.model';
+import { environment } from '../../../environments/environment';
 
 export const collectionFormEntityTypeSelectionConfig: DynamicSelectModelConfig<string> = {
   id: 'entityType',
@@ -26,21 +27,26 @@ export const collectionFormModels: DynamicFormControlModel[] = [
   new DynamicTextAreaModel({
     id: 'description',
     name: 'dc.description',
+    spellCheck: environment.form.spellCheck,
   }),
   new DynamicTextAreaModel({
     id: 'abstract',
     name: 'dc.description.abstract',
+    spellCheck: environment.form.spellCheck,
   }),
   new DynamicTextAreaModel({
     id: 'rights',
     name: 'dc.rights',
+    spellCheck: environment.form.spellCheck,
   }),
   new DynamicTextAreaModel({
     id: 'tableofcontents',
     name: 'dc.description.tableofcontents',
+    spellCheck: environment.form.spellCheck,
   }),
   new DynamicTextAreaModel({
     id: 'license',
     name: 'dc.rights.license',
+    spellCheck: environment.form.spellCheck,
   })
 ];

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

@@ -41,6 +41,12 @@ import {
 } from '../../shared/remote-data.utils';
 import { createPaginatedList } from '../../shared/testing/utils.test';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { SEARCH_CONFIG_SERVICE } from '../../my-dspace-page/my-dspace-page.component';
+import { SearchConfigurationServiceStub } from '../../shared/testing/search-configuration-service.stub';
+import { GroupDataService } from '../../core/eperson/group-data.service';
+import { LinkHeadService } from '../../core/services/link-head.service';
+import { ConfigurationDataService } from '../../core/data/configuration-data.service';
+import { ConfigurationProperty } from '../../core/shared/configuration-property.model';
 
 describe('CollectionItemMapperComponent', () => {
   let comp: CollectionItemMapperComponent;
@@ -88,7 +94,7 @@ describe('CollectionItemMapperComponent', () => {
   const emptyList = createSuccessfulRemoteDataObject(createPaginatedList([]));
   const itemDataServiceStub = {
     mapToCollection: () => createSuccessfulRemoteDataObject$({}),
-    findAllByHref: () => observableOf(emptyList)
+    findListByHref: () => observableOf(emptyList),
   };
   const activatedRouteStub = {
     parent: {
@@ -110,15 +116,15 @@ describe('CollectionItemMapperComponent', () => {
   };
   const searchServiceStub = Object.assign(new SearchServiceStub(), {
     search: () => observableOf(emptyList),
-    /* tslint:disable:no-empty */
+    /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
     clearDiscoveryRequests: () => {}
-    /* tslint:enable:no-empty */
+    /* eslint-enable no-empty,@typescript-eslint/no-empty-function */
   });
   const collectionDataServiceStub = {
     getMappedItems: () => observableOf(emptyList),
-    /* tslint:disable:no-empty */
+    /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
     clearMappedItemsRequests: () => {}
-    /* tslint:enable:no-empty */
+    /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
   };
   const routeServiceStub = {
     getRouteParameterValue: () => {
@@ -141,6 +147,25 @@ describe('CollectionItemMapperComponent', () => {
     isAuthorized: observableOf(true)
   });
 
+  const linkHeadService = jasmine.createSpyObj('linkHeadService', {
+    addTag: ''
+  });
+
+  const groupDataService = jasmine.createSpyObj('groupsDataService', {
+    findListByHref: createSuccessfulRemoteDataObject$(createPaginatedList([])),
+    getGroupRegistryRouterLink: '',
+    getUUIDFromString: '',
+  });
+
+  const configurationDataService = jasmine.createSpyObj('configurationDataService', {
+    findByPropertyName: createSuccessfulRemoteDataObject$(Object.assign(new ConfigurationProperty(), {
+      name: 'test',
+      values: [
+        'org.dspace.ctask.general.ProfileFormats = test'
+      ]
+    }))
+  });
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, FormsModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
@@ -157,8 +182,19 @@ describe('CollectionItemMapperComponent', () => {
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
         { provide: ObjectSelectService, useValue: new ObjectSelectServiceStub() },
         { provide: RouteService, useValue: routeServiceStub },
-        { provide: AuthorizationDataService, useValue: authorizationDataService }
+        { provide: AuthorizationDataService, useValue: authorizationDataService },
+        { provide: GroupDataService, useValue: groupDataService },
+        { provide: LinkHeadService, useValue: linkHeadService },
+        { provide: ConfigurationDataService, useValue: configurationDataService },
       ]
+    }).overrideComponent(CollectionItemMapperComponent, {
+      set: {
+        providers: [
+          {
+            provide: SEARCH_CONFIG_SERVICE,
+            useClass: SearchConfigurationServiceStub
+          }
+        ] }
     }).compileComponents();
   }));
 

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

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

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

@@ -6,7 +6,7 @@ import { CreateCollectionPageComponent } from './create-collection-page/create-c
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 import { CreateCollectionPageGuard } from './create-collection-page/create-collection-page.guard';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
-import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { ItemTemplatePageResolver } from './edit-item-template-page/item-template-page.resolver';
 import { CollectionBreadcrumbResolver } from '../core/breadcrumbs/collection-breadcrumb.resolver';
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
@@ -18,9 +18,9 @@ import {
   COLLECTION_CREATE_PATH
 } from './collection-page-routing-paths';
 import { CollectionPageAdministratorGuard } from './collection-page-administrator.guard';
-import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { ThemedCollectionPageComponent } from './themed-collection-page.component';
+import { MenuItemType } from '../shared/menu/menu-item-type.model';
 
 @NgModule({
   imports: [
@@ -52,7 +52,7 @@ import { ThemedCollectionPageComponent } from './themed-collection-page.componen
           },
           {
             path: ITEMTEMPLATE_PATH,
-            component: EditItemTemplatePageComponent,
+            component: ThemedEditItemTemplatePageComponent,
             canActivate: [AuthenticatedGuard],
             resolve: {
               item: ItemTemplatePageResolver,
@@ -72,6 +72,7 @@ import { ThemedCollectionPageComponent } from './themed-collection-page.componen
               id: 'statistics_collection_:id',
               active: true,
               visible: true,
+              index: 2,
               model: {
                 type: MenuItemType.LINK,
                 text: 'menu.section.statistics',

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

@@ -1,8 +1,8 @@
 <div class="container">
     <div class="collection-page"
          *ngVar="(collectionRD$ | async) as collectionRD">
-        <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
-            <div *ngIf="collectionRD?.payload as collection">
+              <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
+                      <div *ngIf="collectionRD?.payload as collection">
               <ds-view-tracker [object]="collection"></ds-view-tracker>
               <div class="d-flex flex-row border-bottom mb-4 pb-4">
                 <header class="comcol-header mr-auto">
@@ -13,15 +13,14 @@
                   <!-- Collection logo -->
                   <ds-comcol-page-logo *ngIf="logoRD$"
                                    [logo]="(logoRD$ | async)?.payload"
-                                   [alternateText]="'Collection Logo'"
-                      [alternateText]="'Collection Logo'">
+                                   [alternateText]="'Collection Logo'">
                   </ds-comcol-page-logo>
 
                   <!-- Handle -->
-                  <ds-comcol-page-handle
+                  <ds-themed-comcol-page-handle
                           [content]="collection.handle"
                           [title]="'collection.page.handle'" >
-                  </ds-comcol-page-handle>
+                  </ds-themed-comcol-page-handle>
                   <!-- Introductory text -->
                   <ds-comcol-page-content
                           [content]="collection.introductoryText"
@@ -34,16 +33,16 @@
                           [title]="'collection.page.news'">
                   </ds-comcol-page-content>
                 </header>
-                <div class="pl-2">
+                <div class="pl-2 space-children-mr">
                   <ds-dso-page-edit-button *ngIf="isCollectionAdmin$ | async"  [pageRoute]="collectionPageRoute$ | async" [dso]="collection" [tooltipMsg]="'collection.page.edit'"></ds-dso-page-edit-button>
                 </div>
               </div>
               <section class="comcol-page-browse-section">
               <!-- Browse-By Links -->
-              <ds-comcol-page-browse-by
+              <ds-themed-comcol-page-browse-by
                       [id]="collection.id"
                       [contentType]="collection.type">
-              </ds-comcol-page-browse-by>
+              </ds-themed-comcol-page-browse-by>
 
             <ng-container *ngVar="(itemRD$ | async) as itemRD">
                 <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>
@@ -57,8 +56,8 @@
                 </div>
                 <ds-error *ngIf="itemRD?.hasFailed"
                           message="{{'error.recent-submissions' | translate}}"></ds-error>
-                <ds-loading *ngIf="!itemRD || itemRD.isLoading"
-                            message="{{'loading.recent-submissions' | translate}}"></ds-loading>
+                <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
+                            message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
                 <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
                         {{'collection.page.browse.recent.empty' | translate}}
                 </div>
@@ -75,7 +74,7 @@
     </div>
         <ds-error *ngIf="collectionRD?.hasFailed"
             message="{{'error.collection' | translate}}"></ds-error>
-        <ds-loading *ngIf="collectionRD?.isLoading"
-            message="{{'loading.collection' | translate}}"></ds-loading>
+        <ds-themed-loading *ngIf="collectionRD?.isLoading"
+            message="{{'loading.collection' | translate}}"></ds-themed-loading>
   </div>
 </div>

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

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

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

@@ -8,6 +8,7 @@ import { CollectionPageRoutingModule } from './collection-page-routing.module';
 import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { EditItemPageModule } from '../item-page/edit-item-page/edit-item-page.module';
 import { CollectionItemMapperComponent } from './collection-item-mapper/collection-item-mapper.component';
 import { SearchService } from '../core/shared/search/search.service';
@@ -24,7 +25,7 @@ import { ComcolModule } from '../shared/comcol/comcol.module';
     StatisticsModule.forRoot(),
     EditItemPageModule,
     CollectionFormModule,
-    ComcolModule
+    ComcolModule,
   ],
   declarations: [
     CollectionPageComponent,
@@ -32,11 +33,12 @@ import { ComcolModule } from '../shared/comcol/comcol.module';
     CreateCollectionPageComponent,
     DeleteCollectionPageComponent,
     EditItemTemplatePageComponent,
+    ThemedEditItemTemplatePageComponent,
     CollectionItemMapperComponent
   ],
   providers: [
     SearchService,
-  ]
+  ],
 })
 export class CollectionPageModule {
 

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

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

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

@@ -5,11 +5,11 @@
                 <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>
                 <div class="form-group row">
-                  <div class="col text-right">
+                  <div class="col text-right space-children-mr">
                     <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
                       <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
                     </button>
-                    <button class="btn btn-danger mr-2" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                    <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
                       <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'collection.delete.processing' | translate}}</span>
                       <span *ngIf="!(processing$ | async)"><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
                     </button>