Merge pull request #1403 from tdonohue/angular_11

Upgrade to Angular 11

.vscode/settings.json

@@ -3,5 +3,6 @@
     "i18n-ally.localesPaths": [
         "src/assets/i18n",
         "src/app/core/locale"
-    ]
+    ],
+    "typescript.tsdk": "node_modules\\typescript\\lib"
 }

package.json

@@ -63,26 +63,26 @@
     "webdriver-manager": "^12.1.8"
   },
   "dependencies": {
-    "@angular/animations": "~10.2.3",
+    "@angular/animations": "~11.2.14",
-    "@angular/cdk": "^10.2.6",
+    "@angular/cdk": "^11.2.13",
-    "@angular/common": "~10.2.3",
+    "@angular/common": "~11.2.14",
-    "@angular/compiler": "~10.2.3",
+    "@angular/compiler": "~11.2.14",
-    "@angular/core": "~10.2.3",
+    "@angular/core": "~11.2.14",
-    "@angular/forms": "~10.2.3",
+    "@angular/forms": "~11.2.14",
-    "@angular/localize": "10.2.3",
+    "@angular/localize": "11.2.14",
-    "@angular/platform-browser": "~10.2.3",
+    "@angular/platform-browser": "~11.2.14",
-    "@angular/platform-browser-dynamic": "~10.2.3",
+    "@angular/platform-browser-dynamic": "~11.2.14",
-    "@angular/platform-server": "~10.2.3",
+    "@angular/platform-server": "~11.2.14",
-    "@angular/router": "~10.2.3",
+    "@angular/router": "~11.2.14",
     "@angularclass/bootloader": "1.0.1",
     "@kolkov/ngx-gallery": "^1.2.3",
-    "@ng-bootstrap/ng-bootstrap": "7.0.0",
+    "@ng-bootstrap/ng-bootstrap": "9.1.3",
-    "@ng-dynamic-forms/core": "^12.0.0",
+    "@ng-dynamic-forms/core": "^13.0.0",
-    "@ng-dynamic-forms/ui-ng-bootstrap": "^12.0.0",
+    "@ng-dynamic-forms/ui-ng-bootstrap": "^13.0.0",
-    "@ngrx/effects": "^10.0.1",
+    "@ngrx/effects": "^11.1.1",
-    "@ngrx/router-store": "^10.0.1",
+    "@ngrx/router-store": "^11.1.1",
-    "@ngrx/store": "^10.0.1",
+    "@ngrx/store": "^11.1.1",
-    "@nguniversal/express-engine": "10.1.0",
+    "@nguniversal/express-engine": "11.2.1",
     "@ngx-translate/core": "^13.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
     "angular-idle-preload": "3.0.0",
@@ -115,13 +115,13 @@
     "mirador-share-plugin": "^0.10.0",
     "moment": "^2.29.1",
     "morgan": "^1.10.0",
-    "ng-mocks": "10.5.4",
+    "ng-mocks": "11.11.2",
     "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.3",
     "ngx-infinite-scroll": "^10.0.1",
     "ngx-moment": "^5.0.0",
     "ngx-pagination": "5.0.0",
-    "ngx-sortablejs": "^10.0.0",
+    "ngx-sortablejs": "^11.1.0",
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
     "postcss-cli": "^8.3.0",
@@ -138,25 +138,25 @@
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "10.0.1",
-    "@angular-devkit/build-angular": "~0.1002.3",
+    "@angular-devkit/build-angular": "~0.1102.15",
-    "@angular/cli": "~10.2.0",
+    "@angular/cli": "~11.2.15",
-    "@angular/compiler-cli": "~10.2.3",
+    "@angular/compiler-cli": "~11.2.14",
-    "@angular/language-service": "~10.2.3",
+    "@angular/language-service": "~11.2.14",
     "@cypress/schematic": "^1.5.0",
     "@fortawesome/fontawesome-free": "^5.5.0",
-    "@ngrx/store-devtools": "^10.0.1",
+    "@ngrx/store-devtools": "^11.1.1",
     "@ngtools/webpack": "10.2.3",
-    "@nguniversal/builders": "~10.1.0",
+    "@nguniversal/builders": "~11.2.1",
     "@types/deep-freeze": "0.1.2",
     "@types/express": "^4.17.9",
     "@types/file-saver": "^2.0.1",
-    "@types/jasmine": "^3.6.2",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.8",
     "@types/js-cookie": "2.2.6",
     "@types/lodash": "^4.14.165",
     "@types/node": "^14.14.9",
     "axe-core": "^4.3.3",
-    "codelyzer": "^6.0.1",
+    "codelyzer": "^6.0.0",
     "compression-webpack-plugin": "^3.0.1",
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "3.4.0",
@@ -169,14 +169,14 @@
     "fork-ts-checker-webpack-plugin": "^6.0.3",
     "html-loader": "^1.3.2",
     "html-webpack-plugin": "^4.5.0",
-    "jasmine-core": "^3.6.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-marbles": "0.6.0",
-    "jasmine-spec-reporter": "^6.0.0",
+    "jasmine-spec-reporter": "~5.0.0",
     "karma": "^5.2.3",
-    "karma-chrome-launcher": "^3.1.0",
+    "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "^4.0.1",
+    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
     "nodemon": "^2.0.2",
     "npm-run-all": "^4.1.5",
@@ -204,4 +204,4 @@
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^4.5.0"
   }
-}
+}

src/app/app-routing.module.ts

@@ -202,8 +202,9 @@ import { GroupAdministratorGuard } from './core/data/feature-authorization/featu
           { path: '**', pathMatch: 'full', component: ThemedPageNotFoundComponent },
       ]}
     ],{
-      onSameUrlNavigation: 'reload',
+    onSameUrlNavigation: 'reload',
-    })
+    relativeLinkResolution: 'legacy'
+})
   ],
   exports: [RouterModule],
 })

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

@@ -5,9 +5,10 @@
       <p [innerHTML]="'collection.edit.item-mapper.collection' | translate:{ name: (collectionName$ |async) }" id="collection-name"></p>
       <p>{{'collection.edit.item-mapper.description' | translate}}</p>
 
-      <ngb-tabset (tabChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbTabset">
+      <ul ngbNav (navChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs">
-        <ngb-tab title="{{'collection.edit.item-mapper.tabs.browse' | translate}}" id="browseTab">
+        <li [ngbNavItem]="'browseTab'">
-          <ng-template ngbTabContent>
+          <a ngbNavLink>{{'collection.edit.item-mapper.tabs.browse' | translate}}</a>
+          <ng-template ngbNavContent>
             <div class="mt-2">
               <ds-item-select class="mt-2"
                 [key]="'browse'"
@@ -21,9 +22,10 @@
                 (cancel)="onCancel()"></ds-item-select>
             </div>
           </ng-template>
-        </ngb-tab>
+        </li>
-        <ngb-tab title="{{'collection.edit.item-mapper.tabs.map' | translate}}" id="mapTab">
+        <li [ngbNavItem]="'mapTab'">
-          <ng-template ngbTabContent>
+          <a ngbNavLink>{{'collection.edit.item-mapper.tabs.map' | translate}}</a>
+          <ng-template ngbNavContent>
             <div class="row mt-2">
               <div class="col-12 col-lg-6">
                 <ds-search-form id="search-form"
@@ -52,8 +54,9 @@
               {{'collection.edit.item-mapper.no-search' | translate}}
             </div>
           </ng-template>
-        </ngb-tab>
+        </li>
-      </ngb-tabset>
+      </ul>
+      <div [ngbNavOutlet]="tabs"></div>
     </div>
   </div>
 </div>

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

@@ -5,9 +5,10 @@
       <p [innerHTML]="'item.edit.item-mapper.item' | translate:{ name: (itemName$ | async) }" id="item-name"></p>
       <p>{{'item.edit.item-mapper.description' | translate}}</p>
 
-      <ngb-tabset (tabChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbTabset">
+      <ul ngbNav (navChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs">
-        <ngb-tab title="{{'item.edit.item-mapper.tabs.browse' | translate}}" id="browseTab">
+        <li [ngbNavItem]="'browseTab'">
-          <ng-template ngbTabContent>
+          <a ngbNavLink>{{'item.edit.item-mapper.tabs.browse' | translate}}</a>
+          <ng-template ngbNavContent>
             <div class="mt-2">
               <ds-collection-select class="mt-2"
                 [key]="'browse'"
@@ -20,9 +21,10 @@
                 (cancel)="onCancel()"></ds-collection-select>
             </div>
           </ng-template>
-        </ngb-tab>
+        </li>
-        <ngb-tab title="{{'item.edit.item-mapper.tabs.map' | translate}}" id="mapTab">
+        <li [ngbNavItem]="'mapTab'">
-          <ng-template ngbTabContent>
+          <a ngbNavLink>{{'item.edit.item-mapper.tabs.map' | translate}}</a>
+          <ng-template ngbNavContent>
             <div class="row mt-2">
               <div class="col-12 col-lg-6">
                 <ds-search-form id="search-form"
@@ -50,8 +52,9 @@
               {{'item.edit.item-mapper.no-search' | translate}}
             </div>
           </ng-template>
-        </ngb-tab>
+        </li>
-      </ngb-tabset>
+      </ul>
+      <div [ngbNavOutlet]="tabs"></div>
     </div>
   </div>
 </div>

src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts

@@ -1,5 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NgxGalleryOptions } from '@kolkov/ngx-gallery';
 import { Bitstream } from '../../../core/shared/bitstream.model';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
@@ -55,7 +55,7 @@ describe('MediaViewerImageComponent', () => {
     ]
   );
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports:[],
       declarations: [MediaViewerImageComponent],

src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts

@@ -1,5 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
@@ -17,7 +17,7 @@ describe('MediaViewerVideoComponent', () => {
   let component: MediaViewerVideoComponent;
   let fixture: ComponentFixture<MediaViewerVideoComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot({

src/app/item-page/media-viewer/media-viewer.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { createPaginatedList } from '../../shared/testing/utils.test';
@@ -60,7 +60,7 @@ describe('MediaViewerComponent', () => {
     { bitstream: mockBitstream, format: 'image', thumbnail: null }
   );
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot({

src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html

@@ -1,17 +1,21 @@
-<ngb-tabset *ngIf="relationTypes.length > 1" [destroyOnHide]="true" #tabs="ngbTabset" [activeId]="activeTab$ | async" (tabChange)="onTabChange($event)">
+<ng-container *ngIf="relationTypes.length > 1">
-  <ngb-tab *ngFor="let relationType of relationTypes" title="{{'item.page.relationships.' + relationType.label | translate}}" [id]="relationType.filter">
+  <ul ngbNav #tabs="ngbNav" [destroyOnHide]="true" [activeId]="activeTab$ | async" (navChange)="onTabChange($event)" class="nav-tabs">
-    <ng-template ngbTabContent>
+    <li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter">
-      <div class="mt-4">
+      <a ngbNavLink>{{'item.page.relationships.' + relationType.label | translate}}</a>
-        <ds-related-entities-search [item]="item"
+      <ng-template ngbNavContent>
-                                    [relationType]="relationType.filter"
+        <div class="mt-4">
-                                    [configuration]="relationType.configuration"
+          <ds-related-entities-search [item]="item"
-                                    [searchEnabled]="searchEnabled"
+                                      [relationType]="relationType.filter"
-                                    [sideBarWidth]="sideBarWidth">
+                                      [configuration]="relationType.configuration"
-        </ds-related-entities-search>
+                                      [searchEnabled]="searchEnabled"
-      </div>
+                                      [sideBarWidth]="sideBarWidth">
-    </ng-template>
+          </ds-related-entities-search>
-  </ngb-tab>
+        </div>
-</ngb-tabset>
+      </ng-template>
+    </li>
+  </ul>
+  <div [ngbNavOutlet]="tabs"></div>
+</ng-container>
 <div *ngIf="relationTypes.length === 1" class="mt-4">
   <ds-related-entities-search *ngVar="relationTypes[0] as relationType" [item]="item"
                               [relationType]="relationType.filter"

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

@@ -1,5 +1,5 @@
 import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { By } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
@@ -75,7 +75,7 @@ describe('MyDSpaceNewExternalDropdownComponent test', () => {
   };
 
   describe('With only one Entity', () => {
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [
           CommonModule,
@@ -126,7 +126,7 @@ describe('MyDSpaceNewExternalDropdownComponent test', () => {
   });
 
   describe('With more than one Entity', () => {
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [
           CommonModule,

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

@@ -1,5 +1,5 @@
 import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
@@ -79,7 +79,7 @@ describe('MyDSpaceNewSubmissionDropdownComponent test', () => {
   };
 
   describe('With only one Entity', () => {
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [
           CommonModule,
@@ -130,7 +130,7 @@ describe('MyDSpaceNewSubmissionDropdownComponent test', () => {
   });
 
   describe('With more than one Entity', () => {
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [
           CommonModule,

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { AuthService } from '../../core/auth/auth.service';
 import { FileService } from '../../core/shared/file.service';
 import { of as observableOf } from 'rxjs';
@@ -77,7 +77,7 @@ describe('BitstreamDownloadPageComponent', () => {
   }
 
   describe('init', () => {
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
       init();
       initTestbed();
     }));
@@ -93,7 +93,7 @@ describe('BitstreamDownloadPageComponent', () => {
 
   describe('bitstream retrieval', () => {
     describe('when the user is authorized and not logged in', () => {
-      beforeEach(async(() => {
+      beforeEach(waitForAsync(() => {
         init();
         (authService.isAuthenticated as jasmine.Spy).and.returnValue(observableOf(false));
 
@@ -109,7 +109,7 @@ describe('BitstreamDownloadPageComponent', () => {
       });
     });
     describe('when the user is authorized and logged in', () => {
-      beforeEach(async(() => {
+      beforeEach(waitForAsync(() => {
         init();
         initTestbed();
       }));
@@ -123,7 +123,7 @@ describe('BitstreamDownloadPageComponent', () => {
       });
     });
     describe('when the user is not authorized and logged in', () => {
-      beforeEach(async(() => {
+      beforeEach(waitForAsync(() => {
         init();
         (authorizationService.isAuthorized as jasmine.Spy).and.returnValue(observableOf(false));
         initTestbed();
@@ -138,7 +138,7 @@ describe('BitstreamDownloadPageComponent', () => {
       });
     });
     describe('when the user is not authorized and not logged in', () => {
-      beforeEach(async(() => {
+      beforeEach(waitForAsync(() => {
         init();
         (authService.isAuthenticated as jasmine.Spy).and.returnValue(observableOf(false));
         (authorizationService.isAuthorized as jasmine.Spy).and.returnValue(observableOf(false));

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html

@@ -7,59 +7,64 @@
 </div>
 <div class="modal-body">
     <ds-loading *ngIf="!item || !collection"></ds-loading>
-    <ngb-tabset *ngIf="item && collection">
+    <ng-container *ngIf="item && collection">
-        <ngb-tab [title]="'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate  : {count: (totalInternal$ | async)}">
+        <ul ngbNav #nav="ngbNav" class="nav-tabs">
-            <ng-template ngbTabContent>
+            <li ngbNavItem>
-                <ds-dynamic-lookup-relation-search-tab
+                <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate  : { count: (totalInternal$ | async)} }}</a>
-                        [selection$]="selection$"
+                <ng-template ngbNavContent>
-                        [listId]="listId"
+                    <ds-dynamic-lookup-relation-search-tab
-                        [relationship]="relationshipOptions"
+                            [selection$]="selection$"
-                        [repeatable]="repeatable"
+                            [listId]="listId"
-                        [context]="context"
+                            [relationship]="relationshipOptions"
-                        [query]="query"
+                            [repeatable]="repeatable"
-                        [relationshipType]="relationshipType"
+                            [context]="context"
-                        [isLeft]="isLeft"
+                            [query]="query"
-                        [item]="item"
+                            [relationshipType]="relationshipType"
-                        [isEditRelationship]="isEditRelationship"
+                            [isLeft]="isLeft"
-                        [toRemove]="toRemove"
+                            [item]="item"
-                        (selectObject)="select($event)"
+                            [isEditRelationship]="isEditRelationship"
-                        (deselectObject)="deselect($event)"
+                            [toRemove]="toRemove"
-                        class="d-block pt-3">
+                            (selectObject)="select($event)"
-                </ds-dynamic-lookup-relation-search-tab>
+                            (deselectObject)="deselect($event)"
-            </ng-template>
+                            class="d-block pt-3">
-        </ngb-tab>
+                    </ds-dynamic-lookup-relation-search-tab>
-        <ngb-tab *ngFor="let source of (externalSourcesRD$ | async); let idx = index"
+                </ng-template>
-                 [title]="'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate  : {count: (totalExternal$ | async)[idx]}">
+            </li>
-            <ng-template ngbTabContent>
+            <li ngbNavItem *ngFor="let source of (externalSourcesRD$ | async); let idx = index">
-                <ds-dynamic-lookup-relation-external-source-tab
+                <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate  : { count: (totalExternal$ | async)[idx] } }}</a>
-                        [label]="label"
+                <ng-template ngbNavContent>
-                        [listId]="listId"
+                    <ds-dynamic-lookup-relation-external-source-tab
-                        [repeatable]="repeatable"
+                            [label]="label"
-                        [item]="item"
+                            [listId]="listId"
-                        [collection]="collection"
+                            [repeatable]="repeatable"
-                        [relationship]="relationshipOptions"
+                            [item]="item"
-                        [context]="context"
+                            [collection]="collection"
-                        [externalSource]="source"
+                            [relationship]="relationshipOptions"
-                        (importedObject)="imported($event)"
+                            [context]="context"
-                        class="d-block pt-3">
+                            [externalSource]="source"
-                </ds-dynamic-lookup-relation-external-source-tab>
+                            (importedObject)="imported($event)"
-            </ng-template>
+                            class="d-block pt-3">
-        </ngb-tab>
+                    </ds-dynamic-lookup-relation-external-source-tab>
-        <ngb-tab *ngIf="!isEditRelationship" [title]="'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : {count: (selection$ | async)?.length}">
+                </ng-template>
-            <ng-template ngbTabContent>
+            </li>
-                <ds-dynamic-lookup-relation-selection-tab
+            <li ngbNavItem *ngIf="!isEditRelationship">
-                        [selection$]="selection$"
+                <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : { count: (selection$ | async)?.length } }}</a>
-                        [listId]="listId"
+                <ng-template ngbNavContent>
-                        [relationshipType]="relationshipOptions.relationshipType"
+                    <ds-dynamic-lookup-relation-selection-tab
-                        [repeatable]="repeatable"
+                            [selection$]="selection$"
-                        [context]="context"
+                            [listId]="listId"
-                        (selectObject)="select($event)"
+                            [relationshipType]="relationshipOptions.relationshipType"
-                        (deselectObject)="deselect($event)"
+                            [repeatable]="repeatable"
-                        class="d-block pt-3">
+                            [context]="context"
-                </ds-dynamic-lookup-relation-selection-tab>
+                            (selectObject)="select($event)"
-            </ng-template>
+                            (deselectObject)="deselect($event)"
-        </ngb-tab>
+                            class="d-block pt-3">
-    </ngb-tabset>
+                    </ds-dynamic-lookup-relation-selection-tab>
+                </ng-template>
+            </li>
+        </ul>
+        <div [ngbNavOutlet]="nav"></div>
+    </ng-container>
 </div>
 <div class="modal-footer">
     <small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>

src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.spec.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { of as observableOf } from 'rxjs';
@@ -60,7 +60,7 @@ mockResultObject.indexableObject = Object.assign(new ClaimedTask(), { workflowit
 const linkService = getMockLinkService();
 
 describe('ClaimedApprovedSearchResultListElementComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       declarations: [ClaimedApprovedSearchResultListElementComponent, VarDirective],
@@ -75,7 +75,7 @@ describe('ClaimedApprovedSearchResultListElementComponent', () => {
     }).compileComponents();
   }));
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     fixture = TestBed.createComponent(ClaimedApprovedSearchResultListElementComponent);
     component = fixture.componentInstance;
   }));

src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declided-search-result-list-element.component.spec.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { of as observableOf } from 'rxjs';
@@ -60,7 +60,7 @@ mockResultObject.indexableObject = Object.assign(new ClaimedTask(), { workflowit
 const linkService = getMockLinkService();
 
 describe('ClaimedDeclinedSearchResultListElementComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       declarations: [ClaimedDeclinedSearchResultListElementComponent, VarDirective],
@@ -75,7 +75,7 @@ describe('ClaimedDeclinedSearchResultListElementComponent', () => {
     }).compileComponents();
   }));
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     fixture = TestBed.createComponent(ClaimedDeclinedSearchResultListElementComponent);
     component = fixture.componentInstance;
   }));

src/app/shared/resource-policies/form/resource-policy-form.component.html

@@ -8,19 +8,24 @@
   <div class="container-fluid">
     <label for="ResourcePolicyObject">{{'resource-policies.form.eperson-group-list.label' | translate}}</label>
     <input id="ResourcePolicyObject" class="form-control mb-3" type="text" readonly [value]="resourcePolicyTargetName$ | async">
-    <ngb-tabset *ngIf="canSetGrant()" type="pills">
+    <ng-container *ngIf="canSetGrant()">
-      <ngb-tab [title]="'resource-policies.form.eperson-group-list.tab.eperson' | translate">
+      <ul ngbNav #nav="ngbNav" class="nav-pills">
-        <ng-template ngbTabContent>
+        <li ngbNavItem>
-          <ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
+          <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.eperson' | translate}}</a>
-        </ng-template>
+          <ng-template ngbNavContent>
-      </ngb-tab>
+            <ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
-      <ngb-tab [title]="'resource-policies.form.eperson-group-list.tab.group' | translate">
+          </ng-template>
-        <ng-template ngbTabContent>
+        </li>
-          <ds-eperson-group-list [isListOfEPerson]="false"
+        <li ngbNavItem>
-                                 (select)="updateObjectSelected($event, false)"></ds-eperson-group-list>
+          <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.group' | translate}}</a>
-        </ng-template>
+          <ng-template ngbNavContent>
-      </ngb-tab>
+            <ds-eperson-group-list [isListOfEPerson]="false"
-    </ngb-tabset>
+                                  (select)="updateObjectSelected($event, false)"></ds-eperson-group-list>
+          </ng-template>
+        </li>
+      </ul>
+      <div [ngbNavOutlet]="nav"></div>
+    </ng-container>
     <div>
       <hr>
       <div class="form-group row">

src/app/shared/resource-policies/form/resource-policy-form.component.spec.ts

@@ -3,6 +3,7 @@ import { ChangeDetectorRef, Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { getTestScheduler } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
@@ -30,6 +31,14 @@ import { ResourcePolicy } from '../../../core/resource-policy/models/resource-po
 import { RESOURCE_POLICY } from '../../../core/resource-policy/models/resource-policy.resource-type';
 import { EPersonMock } from '../../testing/eperson.mock';
 import { isNotEmptyOperator } from '../../empty.util';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RemoteData } from 'src/app/core/data/remote-data';
+import { RouterMock } from '../../mocks/router.mock';
+import { Store } from '@ngrx/store';
+import { PaginationServiceStub } from '../../testing/pagination-service.stub';
+import { PaginationService } from 'src/app/core/pagination/pagination.service';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { StoreMock } from '../../testing/store.mock';
 
 export const mockResourcePolicyFormData = {
   name: [
@@ -156,12 +165,23 @@ describe('ResourcePolicyFormComponent test suite', () => {
     findAll: jasmine.createSpy('findAll')
   });
 
+  const mockPolicyRD: RemoteData<ResourcePolicy> = createSuccessfulRemoteDataObject(resourcePolicy);
+  const activatedRouteStub = {
+    parent: {
+      data: observableOf({
+        dso: mockPolicyRD
+      })
+    }
+  };
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         BrowserModule,
         CommonModule,
         FormsModule,
+        NgbModule,
+        NoopAnimationsModule,
         ReactiveFormsModule,
         TranslateModule.forRoot()
       ],
@@ -172,9 +192,13 @@ describe('ResourcePolicyFormComponent test suite', () => {
         TestComponent
       ],
       providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useValue: new RouterMock() },
+        { provide: Store, useValue: StoreMock },
         { provide: EPersonDataService, useValue: epersonService },
         { provide: FormService, useValue: formService },
         { provide: GroupDataService, useValue: groupService },
+        { provide: PaginationService, useValue: new PaginationServiceStub() },
         { provide: RequestService, useValue: getMockRequestService() },
         FormBuilderService,
         ChangeDetectorRef,

src/modules/app/browser-app.module.ts

@@ -54,12 +54,12 @@ export function getRequest(transferState: TransferState): any {
     // forRoot ensures the providers are only created once
     IdlePreloadModule.forRoot(),
     RouterModule.forRoot([], {
-      // enableTracing: true,
+    // enableTracing: true,
-      useHash: false,
+    useHash: false,
-      scrollPositionRestoration: 'enabled',
+    scrollPositionRestoration: 'enabled',
-      anchorScrolling: 'enabled',
+    anchorScrolling: 'enabled',
-      preloadingStrategy: NoPreloading
+    preloadingStrategy: NoPreloading
-    }),
+}),
     StatisticsModule.forRoot(),
     Angulartics2RouterlessModule.forRoot(),
     BrowserAnimationsModule,