From 12be9101e582f77f0b99be82d69d115776ab41bd Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 3 Oct 2019 13:16:46 +0200
Subject: [PATCH 01/84] 65272: ItemTemplateDataService

---
 src/app/core/core.module.ts                   |   2 +
 src/app/core/data/data.service.ts             |  29 +++--
 src/app/core/data/item-data.service.ts        |   2 +-
 .../core/data/item-template-data.service.ts   | 107 ++++++++++++++++++
 src/app/core/data/update-data.service.ts      |   8 ++
 src/app/core/shared/hal-endpoint.service.ts   |   4 +-
 6 files changed, 142 insertions(+), 10 deletions(-)
 create mode 100644 src/app/core/data/item-template-data.service.ts
 create mode 100644 src/app/core/data/update-data.service.ts

diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index f4d4dcb269..6571d26c88 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -119,6 +119,7 @@ import { MetadatafieldParsingService } from './data/metadatafield-parsing.servic
 import { NormalizedSubmissionUploadsModel } from './config/models/normalized-config-submission-uploads.model';
 import { NormalizedBrowseEntry } from './shared/normalized-browse-entry.model';
 import { BrowseDefinition } from './shared/browse-definition.model';
+import { ItemTemplateDataService } from './data/item-template-data.service';
 
 const IMPORTS = [
   CommonModule,
@@ -207,6 +208,7 @@ const PROVIDERS = [
   TaskResponseParsingService,
   ClaimedTaskDataService,
   PoolTaskDataService,
+  ItemTemplateDataService,
   // register AuthInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,
diff --git a/src/app/core/data/data.service.ts b/src/app/core/data/data.service.ts
index ad0db51980..20f727d627 100644
--- a/src/app/core/data/data.service.ts
+++ b/src/app/core/data/data.service.ts
@@ -37,8 +37,9 @@ import { NormalizedObjectBuildService } from '../cache/builders/normalized-objec
 import { ChangeAnalyzer } from './change-analyzer';
 import { RestRequestMethod } from './rest-request-method';
 import { getMapsToType } from '../cache/builders/build-decorators';
+import { UpdateDataService } from './update-data.service';
 
-export abstract class DataService<T extends CacheableObject> {
+export abstract class DataService<T extends CacheableObject> implements UpdateDataService<T> {
   protected abstract requestService: RequestService;
   protected abstract rdbService: RemoteDataBuildService;
   protected abstract dataBuildService: NormalizedObjectBuildService;
@@ -53,6 +54,13 @@ export abstract class DataService<T extends CacheableObject> {
 
   public abstract getBrowseEndpoint(options: FindAllOptions, linkPath?: string): Observable<string>
 
+  /**
+   * Get the base endpoint for all requests
+   */
+  protected getEndpoint(): Observable<string> {
+    return this.halService.getEndpoint(this.linkPath);
+  }
+
   /**
    * Create the HREF with given options object
    *
@@ -146,9 +154,17 @@ export abstract class DataService<T extends CacheableObject> {
     return `${endpoint}/${resourceID}`;
   }
 
+  /**
+   * Create an observable for the HREF of a specific object based on its identifier
+   * @param resourceID The identifier for the object
+   */
+  getIDHrefObs(resourceID: string): Observable<string> {
+    return this.getEndpoint().pipe(
+      map((endpoint: string) => this.getIDHref(endpoint, resourceID)));
+  }
+
   findById(id: string): Observable<RemoteData<T>> {
-    const hrefObs = this.halService.getEndpoint(this.linkPath).pipe(
-      map((endpoint: string) => this.getIDHref(endpoint, id)));
+    const hrefObs = this.getIDHrefObs(id);
 
     hrefObs.pipe(
       find((href: string) => hasValue(href)))
@@ -234,9 +250,9 @@ export abstract class DataService<T extends CacheableObject> {
    * @param {string} parentUUID
    *    The UUID of the parent to create the new object under
    */
-  create(dso: T, parentUUID: string): Observable<RemoteData<T>> {
+  create(dso: T, parentUUID?: string): Observable<RemoteData<T>> {
     const requestId = this.requestService.generateRequestId();
-    const endpoint$ = this.halService.getEndpoint(this.linkPath).pipe(
+    const endpoint$ = this.getEndpoint().pipe(
       isNotEmptyOperator(),
       distinctUntilChanged(),
       map((endpoint: string) => parentUUID ? `${endpoint}?parent=${parentUUID}` : endpoint)
@@ -286,8 +302,7 @@ export abstract class DataService<T extends CacheableObject> {
   delete(dso: T): Observable<boolean> {
     const requestId = this.requestService.generateRequestId();
 
-    const hrefObs = this.halService.getEndpoint(this.linkPath).pipe(
-      map((endpoint: string) => this.getIDHref(endpoint, dso.uuid)));
+    const hrefObs = this.getIDHrefObs(dso.uuid);
 
     hrefObs.pipe(
       find((href: string) => hasValue(href)),
diff --git a/src/app/core/data/item-data.service.ts b/src/app/core/data/item-data.service.ts
index 07d8ed8405..2777b14732 100644
--- a/src/app/core/data/item-data.service.ts
+++ b/src/app/core/data/item-data.service.ts
@@ -34,7 +34,7 @@ export class ItemDataService extends DataService<Item> {
     protected rdbService: RemoteDataBuildService,
     protected dataBuildService: NormalizedObjectBuildService,
     protected store: Store<CoreState>,
-    private bs: BrowseService,
+    protected bs: BrowseService,
     protected objectCache: ObjectCacheService,
     protected halService: HALEndpointService,
     protected notificationsService: NotificationsService,
diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
new file mode 100644
index 0000000000..f13a79893c
--- /dev/null
+++ b/src/app/core/data/item-template-data.service.ts
@@ -0,0 +1,107 @@
+import { Injectable } from '@angular/core';
+import { ItemDataService } from './item-data.service';
+import { UpdateDataService } from './update-data.service';
+import { Item } from '../shared/item.model';
+import { RestRequestMethod } from './rest-request-method';
+import { RemoteData } from './remote-data';
+import { Observable } from 'rxjs/internal/Observable';
+import { DSOChangeAnalyzer } from './dso-change-analyzer.service';
+import { RequestService } from './request.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../core.reducers';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { BrowseService } from '../browse/browse.service';
+import { CollectionDataService } from './collection-data.service';
+import { switchMap } from 'rxjs/operators';
+
+/* tslint:disable:max-classes-per-file */
+class DataServiceImpl extends ItemDataService {
+  protected linkPath = 'itemtemplate';
+
+  private collectionID: string;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected dataBuildService: NormalizedObjectBuildService,
+    protected store: Store<CoreState>,
+    protected bs: BrowseService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DSOChangeAnalyzer<Item>,
+    protected collectionService: CollectionDataService) {
+    super(requestService, rdbService, dataBuildService, store, bs, objectCache, halService, notificationsService, http, comparator);
+  }
+
+  protected getEndpoint(): Observable<string> {
+    return this.collectionService.getIDHrefObs(this.collectionID).pipe(
+      switchMap((href: string) => this.halService.getEndpoint(this.linkPath, href))
+    );
+  }
+
+  getIDHrefObs(resourceID: string): Observable<string> {
+    return this.getEndpoint();
+  }
+
+  findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
+    this.collectionID = collectionID;
+    return super.findById(collectionID);
+  }
+
+  create(item: Item, collectionID: string): Observable<RemoteData<Item>> {
+    this.collectionID = collectionID;
+    return super.create(item);
+  }
+
+  deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
+    this.collectionID = collectionID;
+    return super.delete(item);
+  }
+}
+
+@Injectable()
+export class ItemTemplateDataService implements UpdateDataService<Item> {
+  private dataService: DataServiceImpl;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected dataBuildService: NormalizedObjectBuildService,
+    protected store: Store<CoreState>,
+    protected bs: BrowseService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DSOChangeAnalyzer<Item>,
+    protected collectionService: CollectionDataService) {
+    this.dataService = new DataServiceImpl(requestService, rdbService, dataBuildService, store, bs, objectCache, halService, notificationsService, http, comparator, collectionService);
+  }
+
+  commitUpdates(method?: RestRequestMethod) {
+    this.dataService.commitUpdates(method);
+  }
+
+  update(object: Item): Observable<RemoteData<Item>> {
+    return this.dataService.update(object);
+  }
+
+  findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
+    return this.dataService.findByCollectionID(collectionID);
+  }
+
+  create(item: Item, collectionID: string): Observable<RemoteData<Item>> {
+    return this.dataService.create(item, collectionID);
+  }
+
+  deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
+    return this.dataService.deleteByCollectionID(item, collectionID);
+  }
+}
diff --git a/src/app/core/data/update-data.service.ts b/src/app/core/data/update-data.service.ts
new file mode 100644
index 0000000000..d0527f6fd2
--- /dev/null
+++ b/src/app/core/data/update-data.service.ts
@@ -0,0 +1,8 @@
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from './remote-data';
+import { RestRequestMethod } from './rest-request-method';
+
+export interface UpdateDataService<T> {
+  update(object: T): Observable<RemoteData<T>>;
+  commitUpdates(method?: RestRequestMethod);
+}
diff --git a/src/app/core/shared/hal-endpoint.service.ts b/src/app/core/shared/hal-endpoint.service.ts
index a93d54db64..117cc074ca 100644
--- a/src/app/core/shared/hal-endpoint.service.ts
+++ b/src/app/core/shared/hal-endpoint.service.ts
@@ -43,8 +43,8 @@ export class HALEndpointService {
       );
   }
 
-  public getEndpoint(linkPath: string): Observable<string> {
-    return this.getEndpointAt(this.getRootHref(), ...linkPath.split('/'));
+  public getEndpoint(linkPath: string, startHref?: string): Observable<string> {
+    return this.getEndpointAt(startHref || this.getRootHref(), ...linkPath.split('/'));
   }
 
   /**

From 143604fa4dded5d2caa50ad6ece962eafc8ef0a2 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 3 Oct 2019 15:07:05 +0200
Subject: [PATCH 02/84] 65272: Intermediate commit

---
 resources/i18n/en.json5                       |  1 +
 .../collection-metadata.component.html        |  3 +++
 .../collection-metadata.component.ts          | 22 +++++++++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 74fbb42a2d..3b71ff709a 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -139,6 +139,7 @@
   "collection.edit.tabs.roles.title": "Collection Edit - Roles",
   "collection.edit.tabs.source.head": "Content Source",
   "collection.edit.tabs.source.title": "Collection Edit - Content Source",
+  "collection.edit.template.label": "Item template",
   "collection.form.abstract": "Short Description",
   "collection.form.description": "Introductory text (HTML)",
   "collection.form.errors.title.required": "Please enter a collection name",
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
index cc7a0d5de0..b14b034842 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
@@ -1,3 +1,6 @@
+<div>
+  <label>{{ 'collection.edit.template.label' | translate}}</label>
+</div>
 <ds-collection-form (submitForm)="onSubmit($event)" [dso]="(dsoRD$ | async)?.payload"></ds-collection-form>
 <a class="btn btn-danger"
    [routerLink]="'/collections/' + (dsoRD$ | async)?.payload.uuid + '/delete'">{{'collection.edit.delete'
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
index 3a9d9c8af5..7ba692ef2b 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
@@ -3,6 +3,12 @@ import { ComcolMetadataComponent } from '../../../shared/comcol-forms/edit-comco
 import { Collection } from '../../../core/shared/collection.model';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../../core/data/remote-data';
+import { Item } from '../../../core/shared/item.model';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
+import { switchMap } from 'rxjs/operators';
 
 /**
  * Component for editing a collection's metadata
@@ -14,11 +20,27 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class CollectionMetadataComponent extends ComcolMetadataComponent<Collection> {
   protected frontendURL = '/collections/';
 
+  /**
+   * The collection's template item
+   */
+  templateItemRD$: Observable<RemoteData<Item>>;
+
   public constructor(
     protected collectionDataService: CollectionDataService,
+    protected itemTemplateService: ItemTemplateDataService,
     protected router: Router,
     protected route: ActivatedRoute
   ) {
     super(collectionDataService, router, route);
   }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+
+    this.templateItemRD$ = this.dsoRD$.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid))
+    );
+  }
 }

From cddaf539aad4e0f7c2dba4bf4133d80368dea4ce Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 3 Oct 2019 16:36:07 +0200
Subject: [PATCH 03/84] 65272: add, delete and edit button for collection item
 template

---
 resources/i18n/en.json5                       |  5 ++
 .../collection-metadata.component.html        | 17 +++++-
 .../collection-metadata.component.ts          | 57 +++++++++++++++++--
 3 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 3b71ff709a..9cb30fe3a2 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -139,7 +139,12 @@
   "collection.edit.tabs.roles.title": "Collection Edit - Roles",
   "collection.edit.tabs.source.head": "Content Source",
   "collection.edit.tabs.source.title": "Collection Edit - Content Source",
+  "collection.edit.template.add-button": "Add",
+  "collection.edit.template.delete-button": "Delete",
+  "collection.edit.template.edit-button": "Edit",
   "collection.edit.template.label": "Item template",
+  "collections.edit.template.notifications.delete.error": "Failed to delete the item template",
+  "collections.edit.template.notifications.delete.success": "Successfully deleted the item template",
   "collection.form.abstract": "Short Description",
   "collection.form.description": "Introductory text (HTML)",
   "collection.form.errors.title.required": "Please enter a collection name",
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
index b14b034842..d627f7e8ef 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
@@ -1,5 +1,20 @@
-<div>
+<div class="container-fluid mb-2" *ngVar="(itemTemplateRD$ | async) as itemTemplateRD">
   <label>{{ 'collection.edit.template.label' | translate}}</label>
+  <div class="button-row">
+    <button *ngIf="!itemTemplateRD?.payload" class="btn btn-success" (click)="addItemTemplate()">
+      <i class="fas fa-plus"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.add-button" | translate}}</span>
+    </button>
+    <button *ngIf="itemTemplateRD?.payload" class="btn btn-danger" (click)="deleteItemTemplate()">
+      <i class="fas fa-trash-alt"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.delete-button" | translate}}</span>
+    </button>
+    <button *ngIf="itemTemplateRD?.payload" class="btn btn-primary"
+            [routerLink]="'/collections/' + (dsoRD$ | async)?.payload.uuid + '/itemtemplate'">
+      <i class="fas fa-edit"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.edit-button" | translate}}</span>
+    </button>
+  </div>
 </div>
 <ds-collection-form (submitForm)="onSubmit($event)" [dso]="(dsoRD$ | async)?.payload"></ds-collection-form>
 <a class="btn btn-danger"
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
index 7ba692ef2b..6bafc9f4e7 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
@@ -8,7 +8,9 @@ import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from '../../../core/data/remote-data';
 import { Item } from '../../../core/shared/item.model';
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
-import { switchMap } from 'rxjs/operators';
+import { switchMap, take } from 'rxjs/operators';
+import { combineLatest as combineLatestObservable } from 'rxjs';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
 
 /**
  * Component for editing a collection's metadata
@@ -23,24 +25,71 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
   /**
    * The collection's template item
    */
-  templateItemRD$: Observable<RemoteData<Item>>;
+  itemTemplateRD$: Observable<RemoteData<Item>>;
 
   public constructor(
     protected collectionDataService: CollectionDataService,
     protected itemTemplateService: ItemTemplateDataService,
     protected router: Router,
-    protected route: ActivatedRoute
+    protected route: ActivatedRoute,
+    protected notificationsService: NotificationsService
   ) {
     super(collectionDataService, router, route);
   }
 
   ngOnInit(): void {
     super.ngOnInit();
+    this.initTemplateItem();
+  }
 
-    this.templateItemRD$ = this.dsoRD$.pipe(
+  initTemplateItem() {
+    this.itemTemplateRD$ = this.dsoRD$.pipe(
       getSucceededRemoteData(),
       getRemoteDataPayload(),
       switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid))
     );
   }
+
+  addItemTemplate() {
+    const collection$ = this.dsoRD$.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    );
+    const template$ = collection$.pipe(
+      switchMap((collection: Collection) => this.itemTemplateService.create(new Item(), collection.uuid)),
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    );
+
+    combineLatestObservable(collection$, template$).subscribe(([collection, template]) => {
+      this.router.navigate(['collections', collection.uuid, 'itemtemplate']);
+    });
+  }
+
+  deleteItemTemplate() {
+    const collection$ = this.dsoRD$.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    );
+    const template$ = collection$.pipe(
+      switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid)),
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    );
+
+    combineLatestObservable(collection$, template$).pipe(
+      switchMap(([collection, template]) => this.itemTemplateService.deleteByCollectionID(template, collection.uuid))
+    ).subscribe((success: boolean) => {
+      if (success) {
+        this.notificationsService.success(null, 'collections.edit.template.notifications.delete.success');
+        this.initTemplateItem();
+      } else {
+        this.notificationsService.error(null, 'collections.edit.template.notifications.delete.error');
+      }
+    });
+  }
 }

From 4cc1f55272e0637538dde5c08a563b865cce8c6c Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 3 Oct 2019 17:50:48 +0200
Subject: [PATCH 04/84] 65272: EditItemTemplatePageComponent

---
 .../collection-page-routing.module.ts         | 15 ++++++++++-
 .../collection-page.module.ts                 |  4 ++-
 .../edit-item-template-page.component.html    |  2 ++
 .../edit-item-template-page.component.ts      | 25 +++++++++++++++++
 .../item-template-page.resolver.ts            | 27 +++++++++++++++++++
 5 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
 create mode 100644 src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
 create mode 100644 src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts

diff --git a/src/app/+collection-page/collection-page-routing.module.ts b/src/app/+collection-page/collection-page-routing.module.ts
index ad142e8fcf..2ad0346da5 100644
--- a/src/app/+collection-page/collection-page-routing.module.ts
+++ b/src/app/+collection-page/collection-page-routing.module.ts
@@ -9,6 +9,8 @@ import { CreateCollectionPageGuard } from './create-collection-page/create-colle
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { URLCombiner } from '../core/url-combiner/url-combiner';
 import { getCollectionModulePath } from '../app-routing.module';
+import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ItemTemplatePageResolver } from './edit-item-template-page/item-template-page.resolver';
 
 export const COLLECTION_PARENT_PARAMETER = 'parent';
 
@@ -26,6 +28,7 @@ export function getCollectionCreatePath() {
 
 const COLLECTION_CREATE_PATH = 'create';
 const COLLECTION_EDIT_PATH = ':id/edit';
+const ITEMTEMPLATE_PATH = ':id/itemtemplate';
 
 @NgModule({
   imports: [
@@ -49,6 +52,15 @@ const COLLECTION_EDIT_PATH = ':id/edit';
           dso: CollectionPageResolver
         }
       },
+      {
+        path: ITEMTEMPLATE_PATH,
+        component: EditItemTemplatePageComponent,
+        canActivate: [AuthenticatedGuard],
+        resolve: {
+          collection: CollectionPageResolver,
+          item: ItemTemplatePageResolver
+        }
+      },
       {
         path: ':id',
         component: CollectionPageComponent,
@@ -61,7 +73,8 @@ const COLLECTION_EDIT_PATH = ':id/edit';
   ],
   providers: [
     CollectionPageResolver,
-    CreateCollectionPageGuard
+    CreateCollectionPageGuard,
+    ItemTemplatePageResolver
   ]
 })
 export class CollectionPageRoutingModule {
diff --git a/src/app/+collection-page/collection-page.module.ts b/src/app/+collection-page/collection-page.module.ts
index f7059deda0..d9cc0b1b14 100644
--- a/src/app/+collection-page/collection-page.module.ts
+++ b/src/app/+collection-page/collection-page.module.ts
@@ -9,6 +9,7 @@ import { CreateCollectionPageComponent } from './create-collection-page/create-c
 import { CollectionFormComponent } from './collection-form/collection-form.component';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { SearchService } from '../+search-page/search-service/search.service';
+import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
 
 @NgModule({
   imports: [
@@ -20,7 +21,8 @@ import { SearchService } from '../+search-page/search-service/search.service';
     CollectionPageComponent,
     CreateCollectionPageComponent,
     DeleteCollectionPageComponent,
-    CollectionFormComponent
+    CollectionFormComponent,
+    EditItemTemplatePageComponent
   ],
   exports: [
     CollectionFormComponent
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
new file mode 100644
index 0000000000..11c51c5a2c
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -0,0 +1,2 @@
+
+<!--<ds-item-metadata></ds-item-metadata>-->
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
new file mode 100644
index 0000000000..38ef0439b5
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { Collection } from '../../core/shared/collection.model';
+import { Item } from '../../core/shared/item.model';
+import { ActivatedRoute } from '@angular/router';
+import { first, map } from 'rxjs/operators';
+
+@Component({
+  selector: 'ds-edit-item-template-page',
+  templateUrl: './edit-item-template-page.component.html',
+})
+export class EditItemTemplatePageComponent implements OnInit {
+  collectionRD$: Observable<RemoteData<Collection>>;
+  itemRD$: Observable<RemoteData<Item>>;
+
+  constructor(protected route: ActivatedRoute) {
+  }
+
+  ngOnInit(): void {
+    this.collectionRD$ = this.route.parent.data.pipe(first(), map((data) => data.collection));
+    this.itemRD$ = this.route.parent.data.pipe(first(), map((data) => data.item));
+  }
+
+}
diff --git a/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
new file mode 100644
index 0000000000..dc2b3dc209
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { RemoteData } from '../../core/data/remote-data';
+import { Item } from '../../core/shared/item.model';
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
+import { Observable } from 'rxjs/internal/Observable';
+import { find } from 'rxjs/operators';
+import { hasValue } from '../../shared/empty.util';
+
+@Injectable()
+export class ItemTemplatePageResolver implements Resolve<RemoteData<Item>> {
+  constructor(private itemTemplateService: ItemTemplateDataService) {
+  }
+
+  /**
+   * Method for resolving a collection's template item based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns Observable<<RemoteData<Collection>> Emits the found template item based on the parameters in the current route,
+   * or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Item>> {
+    return this.itemTemplateService.findByCollectionID(route.params.id).pipe(
+      find((RD) => hasValue(RD.error) || RD.hasSucceeded),
+    );
+  }
+}

From ba436a6467d7640d426faccce51ad389ae6920d8 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 4 Oct 2019 11:46:14 +0200
Subject: [PATCH 05/84] 65272: Functional EditItemTemplatePageComponent

---
 resources/i18n/en.json5                         |  6 ++++--
 .../+collection-page/collection-page.module.ts  |  2 ++
 .../collection-metadata.component.ts            |  9 +++++----
 .../edit-item-template-page.component.html      | 11 +++++++++--
 .../edit-item-template-page.component.ts        | 14 +++++++++-----
 .../abstract-item-update.component.ts           | 12 +++++++-----
 .../edit-item-page/edit-item-page.module.ts     |  3 +++
 .../item-metadata/item-metadata.component.ts    | 17 ++++++++++++++---
 src/app/core/data/item-template-data.service.ts | 13 +------------
 9 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 9cb30fe3a2..cf9a03bc13 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -140,11 +140,13 @@
   "collection.edit.tabs.source.head": "Content Source",
   "collection.edit.tabs.source.title": "Collection Edit - Content Source",
   "collection.edit.template.add-button": "Add",
+  "collection.edit.template.cancel": "Cancel",
   "collection.edit.template.delete-button": "Delete",
   "collection.edit.template.edit-button": "Edit",
   "collection.edit.template.label": "Item template",
-  "collections.edit.template.notifications.delete.error": "Failed to delete the item template",
-  "collections.edit.template.notifications.delete.success": "Successfully deleted the item template",
+  "collection.edit.template.notifications.delete.error": "Failed to delete the item template",
+  "collection.edit.template.notifications.delete.success": "Successfully deleted the item template",
+  "collection.edit.template.title": "Edit Template Item for Collection \"{{ collection }}\"",
   "collection.form.abstract": "Short Description",
   "collection.form.description": "Introductory text (HTML)",
   "collection.form.errors.title.required": "Please enter a collection name",
diff --git a/src/app/+collection-page/collection-page.module.ts b/src/app/+collection-page/collection-page.module.ts
index d9cc0b1b14..79f5379771 100644
--- a/src/app/+collection-page/collection-page.module.ts
+++ b/src/app/+collection-page/collection-page.module.ts
@@ -10,11 +10,13 @@ import { CollectionFormComponent } from './collection-form/collection-form.compo
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { SearchService } from '../+search-page/search-service/search.service';
 import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { EditItemPageModule } from '../+item-page/edit-item-page/edit-item-page.module';
 
 @NgModule({
   imports: [
     CommonModule,
     SharedModule,
+    EditItemPageModule,
     CollectionPageRoutingModule
   ],
   declarations: [
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
index 6bafc9f4e7..22abdb3336 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
@@ -11,6 +11,7 @@ import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shar
 import { switchMap, take } from 'rxjs/operators';
 import { combineLatest as combineLatestObservable } from 'rxjs';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Component for editing a collection's metadata
@@ -32,7 +33,8 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
     protected itemTemplateService: ItemTemplateDataService,
     protected router: Router,
     protected route: ActivatedRoute,
-    protected notificationsService: NotificationsService
+    protected notificationsService: NotificationsService,
+    protected translate: TranslateService
   ) {
     super(collectionDataService, router, route);
   }
@@ -85,10 +87,9 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
       switchMap(([collection, template]) => this.itemTemplateService.deleteByCollectionID(template, collection.uuid))
     ).subscribe((success: boolean) => {
       if (success) {
-        this.notificationsService.success(null, 'collections.edit.template.notifications.delete.success');
-        this.initTemplateItem();
+        this.notificationsService.success(null, this.translate.get('collection.edit.template.notifications.delete.success'));
       } else {
-        this.notificationsService.error(null, 'collections.edit.template.notifications.delete.error');
+        this.notificationsService.error(null, this.translate.get('collection.edit.template.notifications.delete.error'));
       }
     });
   }
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
index 11c51c5a2c..d74cd26d8c 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -1,2 +1,9 @@
-
-<!--<ds-item-metadata></ds-item-metadata>-->
+<div class="container" *ngVar="(collectionRD$ | async)?.payload as collection">
+  <div class="row">
+    <div class="col-12">
+      <h2 class="border-bottom">{{ 'collection.edit.template.title' | translate:{ collection: collection?.name } }}</h2>
+      <ds-item-metadata [updateService]="itemTemplateService"></ds-item-metadata>
+      <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
index 38ef0439b5..214421d448 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -2,9 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from '../../core/data/remote-data';
 import { Collection } from '../../core/shared/collection.model';
-import { Item } from '../../core/shared/item.model';
 import { ActivatedRoute } from '@angular/router';
 import { first, map } from 'rxjs/operators';
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
+import { getCollectionEditPath } from '../collection-page-routing.module';
 
 @Component({
   selector: 'ds-edit-item-template-page',
@@ -12,14 +13,17 @@ import { first, map } from 'rxjs/operators';
 })
 export class EditItemTemplatePageComponent implements OnInit {
   collectionRD$: Observable<RemoteData<Collection>>;
-  itemRD$: Observable<RemoteData<Item>>;
 
-  constructor(protected route: ActivatedRoute) {
+  constructor(protected route: ActivatedRoute,
+              protected itemTemplateService: ItemTemplateDataService) {
   }
 
   ngOnInit(): void {
-    this.collectionRD$ = this.route.parent.data.pipe(first(), map((data) => data.collection));
-    this.itemRD$ = this.route.parent.data.pipe(first(), map((data) => data.item));
+    this.collectionRD$ = this.route.data.pipe(first(), map((data) => data.collection));
+  }
+
+  getCollectionEditUrl(collection: Collection): string {
+    return getCollectionEditPath(collection.uuid);
   }
 
 }
diff --git a/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts b/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
index c49def3dd2..6cfed8ffdf 100644
--- a/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
+++ b/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
@@ -10,6 +10,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../../config';
 import { first, map } from 'rxjs/operators';
 import { RemoteData } from '../../../core/data/remote-data';
+import { combineLatest as observableCombineLatest } from 'rxjs';
 
 @Injectable()
 /**
@@ -55,11 +56,12 @@ export abstract class AbstractItemUpdateComponent implements OnInit {
    * Initialize common properties between item-update components
    */
   ngOnInit(): void {
-    this.route.parent.data.pipe(map((data) => data.item))
-      .pipe(
-        first(),
-        map((data: RemoteData<Item>) => data.payload)
-      ).subscribe((item: Item) => {
+    observableCombineLatest(this.route.data, this.route.parent.data).pipe(
+      map(([data, parentData]) => Object.assign(data, parentData)),
+      map((data) => data.item),
+      first(),
+      map((data: RemoteData<Item>) => data.payload)
+    ).subscribe((item: Item) => {
       this.item = item;
     });
 
diff --git a/src/app/+item-page/edit-item-page/edit-item-page.module.ts b/src/app/+item-page/edit-item-page/edit-item-page.module.ts
index 236388109e..651d0ca3d4 100644
--- a/src/app/+item-page/edit-item-page/edit-item-page.module.ts
+++ b/src/app/+item-page/edit-item-page/edit-item-page.module.ts
@@ -47,6 +47,9 @@ import { ItemMoveComponent } from './item-move/item-move.component';
     EditRelationshipComponent,
     EditRelationshipListComponent,
     ItemMoveComponent,
+  ],
+  exports: [
+    ItemMetadataComponent
   ]
 })
 export class EditItemPageModule {
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
index be657d71dc..74282ab54c 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, Input } from '@angular/core';
 import { Item } from '../../../core/shared/item.model';
 import { ItemDataService } from '../../../core/data/item-data.service';
 import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
@@ -19,6 +19,8 @@ import { MetadatumViewModel } from '../../../core/shared/metadata.models';
 import { Metadata } from '../../../core/shared/metadata.utils';
 import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component';
 import { MetadataField } from '../../../core/metadata/metadata-field.model';
+import { UpdateDataService } from '../../../core/data/update-data.service';
+import { hasNoValue } from '../../../shared/empty.util';
 
 @Component({
   selector: 'ds-item-metadata',
@@ -30,6 +32,12 @@ import { MetadataField } from '../../../core/metadata/metadata-field.model';
  */
 export class ItemMetadataComponent extends AbstractItemUpdateComponent {
 
+  /**
+   * A custom update service to use for adding and committing patches
+   * This will default to the ItemDataService
+   */
+  @Input() updateService: UpdateDataService<Item>;
+
   /**
    * Observable with a list of strings with all existing metadata field keys
    */
@@ -54,6 +62,9 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
   ngOnInit(): void {
     super.ngOnInit();
     this.metadataFields$ = this.findMetadataFields();
+    if (hasNoValue(this.updateService)) {
+      this.updateService = this.itemService;
+    }
   }
 
   /**
@@ -97,9 +108,9 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
           first(),
           switchMap((metadata: MetadatumViewModel[]) => {
             const updatedItem: Item = Object.assign(cloneDeep(this.item), { metadata: Metadata.toMetadataMap(metadata) });
-            return this.itemService.update(updatedItem);
+            return this.updateService.update(updatedItem);
           }),
-          tap(() => this.itemService.commitUpdates()),
+          tap(() => this.updateService.commitUpdates()),
           getSucceededRemoteData()
         ).subscribe(
           (rd: RemoteData<Item>) => {
diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
index f13a79893c..a6e689e360 100644
--- a/src/app/core/data/item-template-data.service.ts
+++ b/src/app/core/data/item-template-data.service.ts
@@ -21,7 +21,6 @@ import { switchMap } from 'rxjs/operators';
 
 /* tslint:disable:max-classes-per-file */
 class DataServiceImpl extends ItemDataService {
-  protected linkPath = 'itemtemplate';
 
   private collectionID: string;
 
@@ -40,19 +39,9 @@ class DataServiceImpl extends ItemDataService {
     super(requestService, rdbService, dataBuildService, store, bs, objectCache, halService, notificationsService, http, comparator);
   }
 
-  protected getEndpoint(): Observable<string> {
-    return this.collectionService.getIDHrefObs(this.collectionID).pipe(
-      switchMap((href: string) => this.halService.getEndpoint(this.linkPath, href))
-    );
-  }
-
-  getIDHrefObs(resourceID: string): Observable<string> {
-    return this.getEndpoint();
-  }
-
   findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
     this.collectionID = collectionID;
-    return super.findById(collectionID);
+    return super.findById('961e137c-d815-4ade-aff1-0bb12f1fe965');
   }
 
   create(item: Item, collectionID: string): Observable<RemoteData<Item>> {

From cf8bba711280b5a0932ffb24c014a437fdba1f16 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 4 Oct 2019 12:38:47 +0200
Subject: [PATCH 06/84] 65272: Revert testing changes

---
 src/app/core/data/item-template-data.service.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
index a6e689e360..f13a79893c 100644
--- a/src/app/core/data/item-template-data.service.ts
+++ b/src/app/core/data/item-template-data.service.ts
@@ -21,6 +21,7 @@ import { switchMap } from 'rxjs/operators';
 
 /* tslint:disable:max-classes-per-file */
 class DataServiceImpl extends ItemDataService {
+  protected linkPath = 'itemtemplate';
 
   private collectionID: string;
 
@@ -39,9 +40,19 @@ class DataServiceImpl extends ItemDataService {
     super(requestService, rdbService, dataBuildService, store, bs, objectCache, halService, notificationsService, http, comparator);
   }
 
+  protected getEndpoint(): Observable<string> {
+    return this.collectionService.getIDHrefObs(this.collectionID).pipe(
+      switchMap((href: string) => this.halService.getEndpoint(this.linkPath, href))
+    );
+  }
+
+  getIDHrefObs(resourceID: string): Observable<string> {
+    return this.getEndpoint();
+  }
+
   findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
     this.collectionID = collectionID;
-    return super.findById('961e137c-d815-4ade-aff1-0bb12f1fe965');
+    return super.findById(collectionID);
   }
 
   create(item: Item, collectionID: string): Observable<RemoteData<Item>> {

From 644ab2cfabc08721033c806307c9cd820be82900 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 4 Oct 2019 13:05:15 +0200
Subject: [PATCH 07/84] 65272: JSDocs

---
 .../collection-metadata.component.ts          | 11 +++-
 .../edit-item-template-page.component.ts      | 11 ++++
 .../item-template-page.resolver.ts            |  7 ++-
 .../core/data/item-template-data.service.ts   | 55 +++++++++++++++++++
 src/app/core/data/update-data.service.ts      |  3 +
 5 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
index 22abdb3336..a46c4189bb 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
@@ -24,7 +24,7 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
   protected frontendURL = '/collections/';
 
   /**
-   * The collection's template item
+   * The collection's item template
    */
   itemTemplateRD$: Observable<RemoteData<Item>>;
 
@@ -44,6 +44,9 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
     this.initTemplateItem();
   }
 
+  /**
+   * Initialize the collection's item template
+   */
   initTemplateItem() {
     this.itemTemplateRD$ = this.dsoRD$.pipe(
       getSucceededRemoteData(),
@@ -52,6 +55,9 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
     );
   }
 
+  /**
+   * Add a new item template to the collection and redirect to the item template edit page
+   */
   addItemTemplate() {
     const collection$ = this.dsoRD$.pipe(
       getSucceededRemoteData(),
@@ -70,6 +76,9 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
     });
   }
 
+  /**
+   * Delete the item template from the collection
+   */
   deleteItemTemplate() {
     const collection$ = this.dsoRD$.pipe(
       getSucceededRemoteData(),
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
index 214421d448..56e21ecb37 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -11,7 +11,14 @@ import { getCollectionEditPath } from '../collection-page-routing.module';
   selector: 'ds-edit-item-template-page',
   templateUrl: './edit-item-template-page.component.html',
 })
+/**
+ * Component for editing the item template of a collection
+ */
 export class EditItemTemplatePageComponent implements OnInit {
+
+  /**
+   * The collection to edit the item template for
+   */
   collectionRD$: Observable<RemoteData<Collection>>;
 
   constructor(protected route: ActivatedRoute,
@@ -22,6 +29,10 @@ export class EditItemTemplatePageComponent implements OnInit {
     this.collectionRD$ = this.route.data.pipe(first(), map((data) => data.collection));
   }
 
+  /**
+   * Get the URL to the collection's edit page
+   * @param collection
+   */
   getCollectionEditUrl(collection: Collection): string {
     return getCollectionEditPath(collection.uuid);
   }
diff --git a/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
index dc2b3dc209..07ccfd9eee 100644
--- a/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
+++ b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
@@ -7,16 +7,19 @@ import { Observable } from 'rxjs/internal/Observable';
 import { find } from 'rxjs/operators';
 import { hasValue } from '../../shared/empty.util';
 
+/**
+ * This class represents a resolver that requests a specific collection's item template before the route is activated
+ */
 @Injectable()
 export class ItemTemplatePageResolver implements Resolve<RemoteData<Item>> {
   constructor(private itemTemplateService: ItemTemplateDataService) {
   }
 
   /**
-   * Method for resolving a collection's template item based on the parameters in the current route
+   * Method for resolving a collection's item template based on the parameters in the current route
    * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
    * @param {RouterStateSnapshot} state The current RouterStateSnapshot
-   * @returns Observable<<RemoteData<Collection>> Emits the found template item based on the parameters in the current route,
+   * @returns Observable<<RemoteData<Collection>> Emits the found item template based on the parameters in the current route,
    * or an error if something went wrong
    */
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Item>> {
diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
index f13a79893c..a8eecbad21 100644
--- a/src/app/core/data/item-template-data.service.ts
+++ b/src/app/core/data/item-template-data.service.ts
@@ -20,9 +20,16 @@ import { CollectionDataService } from './collection-data.service';
 import { switchMap } from 'rxjs/operators';
 
 /* tslint:disable:max-classes-per-file */
+/**
+ * A custom implementation of the ItemDataService, but for collection item templates
+ * Makes sure to change the endpoint before sending out CRUD requests for the item template
+ */
 class DataServiceImpl extends ItemDataService {
   protected linkPath = 'itemtemplate';
 
+  /**
+   * The ID of the collection we're currently sending requests for
+   */
   private collectionID: string;
 
   constructor(
@@ -40,34 +47,62 @@ class DataServiceImpl extends ItemDataService {
     super(requestService, rdbService, dataBuildService, store, bs, objectCache, halService, notificationsService, http, comparator);
   }
 
+  /**
+   * Get the base endpoint for all requests
+   * Uses the current collectionID to assemble a request endpoint for the collection's item template
+   */
   protected getEndpoint(): Observable<string> {
     return this.collectionService.getIDHrefObs(this.collectionID).pipe(
       switchMap((href: string) => this.halService.getEndpoint(this.linkPath, href))
     );
   }
 
+  /**
+   * Since the collection ID is included in the base endpoint, simply return the base endpoint
+   * @param resourceID
+   */
   getIDHrefObs(resourceID: string): Observable<string> {
     return this.getEndpoint();
   }
 
+  /**
+   * Set the collection ID and send a find by ID request
+   * @param collectionID
+   */
   findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
     this.collectionID = collectionID;
     return super.findById(collectionID);
   }
 
+  /**
+   * Set the collection ID and send a create request
+   * @param item
+   * @param collectionID
+   */
   create(item: Item, collectionID: string): Observable<RemoteData<Item>> {
     this.collectionID = collectionID;
     return super.create(item);
   }
 
+  /**
+   * Set the collection ID and send a delete request
+   * @param item
+   * @param collectionID
+   */
   deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
     this.collectionID = collectionID;
     return super.delete(item);
   }
 }
 
+/**
+ * A service responsible for fetching/sending data from/to the REST API on a collection's itemtemplate endpoint
+ */
 @Injectable()
 export class ItemTemplateDataService implements UpdateDataService<Item> {
+  /**
+   * The data service responsible for all CRUD actions on the item
+   */
   private dataService: DataServiceImpl;
 
   constructor(
@@ -85,22 +120,42 @@ export class ItemTemplateDataService implements UpdateDataService<Item> {
     this.dataService = new DataServiceImpl(requestService, rdbService, dataBuildService, store, bs, objectCache, halService, notificationsService, http, comparator, collectionService);
   }
 
+  /**
+   * Commit current object changes to the server
+   */
   commitUpdates(method?: RestRequestMethod) {
     this.dataService.commitUpdates(method);
   }
 
+  /**
+   * Add a new patch to the object cache
+   */
   update(object: Item): Observable<RemoteData<Item>> {
     return this.dataService.update(object);
   }
 
+  /**
+   * Find an item template by collection ID
+   * @param collectionID
+   */
   findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
     return this.dataService.findByCollectionID(collectionID);
   }
 
+  /**
+   * Create a new item template for a collection by ID
+   * @param item
+   * @param collectionID
+   */
   create(item: Item, collectionID: string): Observable<RemoteData<Item>> {
     return this.dataService.create(item, collectionID);
   }
 
+  /**
+   * Delete a template item by collection ID
+   * @param item
+   * @param collectionID
+   */
   deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
     return this.dataService.deleteByCollectionID(item, collectionID);
   }
diff --git a/src/app/core/data/update-data.service.ts b/src/app/core/data/update-data.service.ts
index d0527f6fd2..34835e14c1 100644
--- a/src/app/core/data/update-data.service.ts
+++ b/src/app/core/data/update-data.service.ts
@@ -2,6 +2,9 @@ import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from './remote-data';
 import { RestRequestMethod } from './rest-request-method';
 
+/**
+ * Represents a data service to update a given object
+ */
 export interface UpdateDataService<T> {
   update(object: T): Observable<RemoteData<T>>;
   commitUpdates(method?: RestRequestMethod);

From 90beee9a854ef1b868b030c3aea7c58ba62d0cc7 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 4 Oct 2019 13:34:56 +0200
Subject: [PATCH 08/84] 65272: Existing test fixes

---
 .../abstract-item-update/abstract-item-update.component.ts      | 2 +-
 .../item-metadata/item-metadata.component.spec.ts               | 1 +
 .../item-relationships/item-relationships.component.spec.ts     | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts b/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
index 6cfed8ffdf..3b23704af5 100644
--- a/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
+++ b/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
@@ -57,7 +57,7 @@ export abstract class AbstractItemUpdateComponent implements OnInit {
    */
   ngOnInit(): void {
     observableCombineLatest(this.route.data, this.route.parent.data).pipe(
-      map(([data, parentData]) => Object.assign(data, parentData)),
+      map(([data, parentData]) => Object.assign({}, data, parentData)),
       map((data) => data.item),
       first(),
       map((data: RemoteData<Item>) => data.payload)
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
index 0c164b7bc2..e5bf6ea0af 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
@@ -123,6 +123,7 @@ describe('ItemMetadataComponent', () => {
         commitUpdates: {}
       });
       routeStub = {
+        data: observableOf({}),
         parent: {
           data: observableOf({ item: createSuccessfulRemoteDataObject(item) })
         }
diff --git a/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts b/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts
index b1a4e11371..f9b950b343 100644
--- a/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts
@@ -122,6 +122,7 @@ describe('ItemRelationshipsComponent', () => {
       findById: observableOf(new RemoteData(false, false, true, undefined, item))
     });
     routeStub = {
+      data: observableOf({}),
       parent: {
         data: observableOf({ item: new RemoteData(false, false, true, null, item) })
       }

From cfdc227563ba12955d0fbfe2e8efa6e103e9ad1c Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 4 Oct 2019 14:46:59 +0200
Subject: [PATCH 09/84] 65272: CollectionMetadataComponent test import fixes

---
 .../collection-metadata.component.spec.ts            | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
index 67eab669d5..0db0b51490 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
@@ -8,18 +8,30 @@ import { ActivatedRoute } from '@angular/router';
 import { of as observableOf } from 'rxjs/internal/observable/of';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { CollectionMetadataComponent } from './collection-metadata.component';
+import { Item } from '../../../core/shared/item.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils';
+import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
 
 describe('CollectionMetadataComponent', () => {
   let comp: CollectionMetadataComponent;
   let fixture: ComponentFixture<CollectionMetadataComponent>;
 
+  const template = new Item();
+
+  const itemTemplateService = Object.assign({
+    findByCollectionID: () => createSuccessfulRemoteDataObject$(template)
+  });
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), SharedModule, CommonModule, RouterTestingModule],
       declarations: [CollectionMetadataComponent],
       providers: [
         { provide: CollectionDataService, useValue: {} },
+        { provide: ItemTemplateDataService, useValue: itemTemplateService },
         { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: { payload: {} } }) } } },
+        { provide: NotificationsService, useValue: {} }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

From 7fd4b41460df3c12cc3b0ae79cbb07bae3aaf5b4 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 4 Oct 2019 17:50:53 +0200
Subject: [PATCH 10/84] 65272: Added test cases

---
 .../collection-metadata.component.spec.ts     |  65 +++++++--
 .../edit-item-template-page.component.spec.ts |  51 +++++++
 .../edit-item-template-page.component.ts      |   6 +-
 .../item-template-page.resolver.spec.ts       |  28 ++++
 .../data/item-template-data.service.spec.ts   | 136 ++++++++++++++++++
 5 files changed, 277 insertions(+), 9 deletions(-)
 create mode 100644 src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
 create mode 100644 src/app/+collection-page/edit-item-template-page/item-template-page.resolver.spec.ts
 create mode 100644 src/app/core/data/item-template-data.service.spec.ts

diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
index 0db0b51490..2bd932b7d2 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
@@ -4,23 +4,38 @@ import { SharedModule } from '../../../shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { RouterTestingModule } from '@angular/router/testing';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { of as observableOf } from 'rxjs/internal/observable/of';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { CollectionMetadataComponent } from './collection-metadata.component';
 import { Item } from '../../../core/shared/item.model';
-import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils';
 import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { Collection } from '../../../core/shared/collection.model';
 
 describe('CollectionMetadataComponent', () => {
   let comp: CollectionMetadataComponent;
   let fixture: ComponentFixture<CollectionMetadataComponent>;
+  let router: Router;
+  let itemTemplateService: ItemTemplateDataService;
 
   const template = new Item();
+  const collection = Object.assign(new Collection(), {
+    uuid: 'collection-id',
+    id: 'collection-id',
+    name: 'Fake Collection'
+  });
 
-  const itemTemplateService = Object.assign({
-    findByCollectionID: () => createSuccessfulRemoteDataObject$(template)
+  const itemTemplateServiceStub = Object.assign({
+    findByCollectionID: () => createSuccessfulRemoteDataObject$(template),
+    create: () => createSuccessfulRemoteDataObject$(template),
+    deleteByCollectionID: () => observableOf(true)
+  });
+
+  const notificationsService = jasmine.createSpyObj('notificationsService', {
+    success: {},
+    error: {}
   });
 
   beforeEach(async(() => {
@@ -29,9 +44,9 @@ describe('CollectionMetadataComponent', () => {
       declarations: [CollectionMetadataComponent],
       providers: [
         { provide: CollectionDataService, useValue: {} },
-        { provide: ItemTemplateDataService, useValue: itemTemplateService },
-        { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: { payload: {} } }) } } },
-        { provide: NotificationsService, useValue: {} }
+        { provide: ItemTemplateDataService, useValue: itemTemplateServiceStub },
+        { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } },
+        { provide: NotificationsService, useValue: notificationsService }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -40,12 +55,46 @@ describe('CollectionMetadataComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(CollectionMetadataComponent);
     comp = fixture.componentInstance;
+    router = (comp as any).router;
+    itemTemplateService = (comp as any).itemTemplateService;
     fixture.detectChanges();
   });
 
   describe('frontendURL', () => {
     it('should have the right frontendURL set', () => {
       expect((comp as any).frontendURL).toEqual('/collections/');
-    })
+    });
+  });
+
+  describe('addItemTemplate', () => {
+    it('should navigate to the collection\'s itemtemplate page', () => {
+      spyOn(router, 'navigate');
+      comp.addItemTemplate();
+      expect(router.navigate).toHaveBeenCalledWith(['collections', collection.uuid, 'itemtemplate']);
+    });
+  });
+
+  describe('deleteItemTemplate', () => {
+    describe('when delete returns a success', () => {
+      beforeEach(() => {
+        spyOn(itemTemplateService, 'deleteByCollectionID').and.returnValue(observableOf(true));
+        comp.deleteItemTemplate();
+      });
+
+      it('should display a success notification', () => {
+        expect(notificationsService.success).toHaveBeenCalled();
+      });
+    });
+
+    describe('when delete returns a failure', () => {
+      beforeEach(() => {
+        spyOn(itemTemplateService, 'deleteByCollectionID').and.returnValue(observableOf(false));
+        comp.deleteItemTemplate();
+      });
+
+      it('should display an error notification', () => {
+        expect(notificationsService.error).toHaveBeenCalled();
+      });
+    });
   });
 });
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
new file mode 100644
index 0000000000..90857712b8
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
@@ -0,0 +1,51 @@
+import { EditItemTemplatePageComponent } from './edit-item-template-page.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../shared/shared.module';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CommonModule } from '@angular/common';
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
+import { ActivatedRoute } from '@angular/router';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { createSuccessfulRemoteDataObject } from '../../shared/testing/utils';
+import { Collection } from '../../core/shared/collection.model';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { getCollectionEditPath } from '../collection-page-routing.module';
+
+describe('EditItemTemplatePageComponent', () => {
+  let comp: EditItemTemplatePageComponent;
+  let fixture: ComponentFixture<EditItemTemplatePageComponent>;
+  let itemTemplateService: ItemTemplateDataService;
+  let collection: Collection;
+
+  beforeEach(async(() => {
+    collection = Object.assign(new Collection(), {
+      uuid: 'collection-id',
+      id: 'collection-id',
+      name: 'Fake Collection'
+    });
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), SharedModule, CommonModule, RouterTestingModule],
+      declarations: [EditItemTemplatePageComponent],
+      providers: [
+        { provide: ItemTemplateDataService, useValue: {} },
+        { provide: ActivatedRoute, useValue: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditItemTemplatePageComponent);
+    comp = fixture.componentInstance;
+    itemTemplateService = (comp as any).itemTemplateService;
+    fixture.detectChanges();
+  });
+
+  describe('getCollectionEditUrl', () => {
+    it('should return the collection\'s edit url', () => {
+      const url = comp.getCollectionEditUrl(collection);
+      expect(url).toEqual(getCollectionEditPath(collection.uuid));
+    });
+  });
+});
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
index 56e21ecb37..0170ab620b 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -34,7 +34,11 @@ export class EditItemTemplatePageComponent implements OnInit {
    * @param collection
    */
   getCollectionEditUrl(collection: Collection): string {
-    return getCollectionEditPath(collection.uuid);
+    if (collection) {
+      return getCollectionEditPath(collection.uuid);
+    } else {
+      return '';
+    }
   }
 
 }
diff --git a/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.spec.ts b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.spec.ts
new file mode 100644
index 0000000000..885adadb3f
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.spec.ts
@@ -0,0 +1,28 @@
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { first } from 'rxjs/operators';
+import { ItemTemplatePageResolver } from './item-template-page.resolver';
+
+describe('ItemTemplatePageResolver', () => {
+  describe('resolve', () => {
+    let resolver: ItemTemplatePageResolver;
+    let itemTemplateService: any;
+    const uuid = '1234-65487-12354-1235';
+
+    beforeEach(() => {
+      itemTemplateService = {
+        findByCollectionID: (id: string) => observableOf({ payload: { id }, hasSucceeded: true })
+      };
+      resolver = new ItemTemplatePageResolver(itemTemplateService);
+    });
+
+    it('should resolve an item template with the correct id', () => {
+      resolver.resolve({ params: { id: uuid } } as any, undefined)
+        .pipe(first())
+        .subscribe(
+          (resolved) => {
+            expect(resolved.payload.id).toEqual(uuid);
+          }
+        );
+    });
+  });
+});
diff --git a/src/app/core/data/item-template-data.service.spec.ts b/src/app/core/data/item-template-data.service.spec.ts
new file mode 100644
index 0000000000..38d72a6265
--- /dev/null
+++ b/src/app/core/data/item-template-data.service.spec.ts
@@ -0,0 +1,136 @@
+import { ItemTemplateDataService } from './item-template-data.service';
+import { RestRequest } from './request.models';
+import { RequestEntry } from './request.reducer';
+import { RestResponse } from '../cache/response.models';
+import { RequestService } from './request.service';
+import { of as observableOf } from 'rxjs';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../core.reducers';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { BrowseService } from '../browse/browse.service';
+import { Observable } from 'rxjs/internal/Observable';
+import { cold } from 'jasmine-marbles';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { CollectionDataService } from './collection-data.service';
+import { RestRequestMethod } from './rest-request-method';
+import { Item } from '../shared/item.model';
+
+describe('ItemTemplateDataService', () => {
+  let service: ItemTemplateDataService;
+  let itemService: any;
+
+  const item = new Item();
+  const collectionEndpoint = 'https://rest.api/core/collections/4af28e99-6a9c-4036-a199-e1b587046d39';
+  const itemEndpoint = `${collectionEndpoint}/itemtemplate`;
+  const scopeID = '4af28e99-6a9c-4036-a199-e1b587046d39';
+  const requestService = {
+    generateRequestId(): string {
+      return scopeID;
+    },
+    configure(request: RestRequest) {
+      // Do nothing
+    },
+    getByHref(requestHref: string) {
+      const responseCacheEntry = new RequestEntry();
+      responseCacheEntry.response = new RestResponse(true, 200, 'OK');
+      return observableOf(responseCacheEntry);
+    },
+    commit(method?: RestRequestMethod) {
+      // Do nothing
+    }
+  } as RequestService;
+  const rdbService = {} as RemoteDataBuildService;
+  const dataBuildService = {} as NormalizedObjectBuildService;
+  const store = {} as Store<CoreState>;
+  const bs = {} as BrowseService;
+  const objectCache = {
+    getObjectBySelfLink(self) {
+      return observableOf({})
+    },
+    addPatch(self, operations) {
+      // Do nothing
+    }
+  } as ObjectCacheService;
+  const halEndpointService = {
+    getEndpoint(linkPath: string): Observable<string> {
+      return cold('a', {a: itemEndpoint});
+    }
+  } as HALEndpointService;
+  const notificationsService = {} as NotificationsService;
+  const http = {} as HttpClient;
+  const comparator = {
+    diff(first, second) {
+      return [{}];
+    }
+  } as any;
+  const collectionService = {
+    getIDHrefObs(id): Observable<string> {
+      return observableOf(collectionEndpoint);
+    }
+  } as CollectionDataService;
+
+  function initTestService() {
+    service = new ItemTemplateDataService(
+      requestService,
+      rdbService,
+      dataBuildService,
+      store,
+      bs,
+      objectCache,
+      halEndpointService,
+      notificationsService,
+      http,
+      comparator,
+      collectionService
+    );
+    itemService = (service as any).dataService;
+  }
+
+  beforeEach(() => {
+    initTestService();
+  });
+
+  describe('commitUpdates', () => {
+    it('should call commitUpdates on the item service implementation', () => {
+      spyOn(itemService, 'commitUpdates');
+      service.commitUpdates();
+      expect(itemService.commitUpdates).toHaveBeenCalled();
+    });
+  });
+
+  describe('update', () => {
+    it('should call update on the item service implementation', () => {
+      spyOn(itemService, 'update');
+      service.update(item);
+      expect(itemService.update).toHaveBeenCalled();
+    });
+  });
+
+  describe('findByCollectionID', () => {
+    it('should call findByCollectionID on the item service implementation', () => {
+      spyOn(itemService, 'findByCollectionID');
+      service.findByCollectionID(scopeID);
+      expect(itemService.findByCollectionID).toHaveBeenCalled();
+    });
+  });
+
+  describe('create', () => {
+    it('should call create on the item service implementation', () => {
+      spyOn(itemService, 'create');
+      service.create(item, scopeID);
+      expect(itemService.create).toHaveBeenCalled();
+    });
+  });
+
+  describe('deleteByCollectionID', () => {
+    it('should call deleteByCollectionID on the item service implementation', () => {
+      spyOn(itemService, 'deleteByCollectionID');
+      service.deleteByCollectionID(item, scopeID);
+      expect(itemService.deleteByCollectionID).toHaveBeenCalled();
+    });
+  });
+});

From b3b8ea1dee4e2a5bef396fa2bba30845303d2f74 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Mon, 14 Oct 2019 16:47:35 +0200
Subject: [PATCH 11/84] 65272: item template REST contract endpoint changes

---
 .../core/data/item-template-data.service.ts   | 56 ++++++++++++++-----
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
index a8eecbad21..aaa664d7ec 100644
--- a/src/app/core/data/item-template-data.service.ts
+++ b/src/app/core/data/item-template-data.service.ts
@@ -25,12 +25,18 @@ import { switchMap } from 'rxjs/operators';
  * Makes sure to change the endpoint before sending out CRUD requests for the item template
  */
 class DataServiceImpl extends ItemDataService {
-  protected linkPath = 'itemtemplate';
+  protected collectionLinkPath = 'itemtemplate';
+  protected linkPath = 'itemtemplates';
 
   /**
-   * The ID of the collection we're currently sending requests for
+   * Endpoint dynamically changing depending on what request we're sending
    */
-  private collectionID: string;
+  private endpoint$: Observable<string>;
+
+  /**
+   * Is the current endpoint based on a collection?
+   */
+  private collectionEndpoint = false;
 
   constructor(
     protected requestService: RequestService,
@@ -48,21 +54,43 @@ class DataServiceImpl extends ItemDataService {
   }
 
   /**
-   * Get the base endpoint for all requests
-   * Uses the current collectionID to assemble a request endpoint for the collection's item template
+   * Set the endpoint to be based on a collection
+   * @param collectionID  The ID of the collection to base the endpoint on
    */
-  protected getEndpoint(): Observable<string> {
-    return this.collectionService.getIDHrefObs(this.collectionID).pipe(
-      switchMap((href: string) => this.halService.getEndpoint(this.linkPath, href))
+  private setCollectionEndpoint(collectionID: string) {
+    this.collectionEndpoint = true;
+    this.endpoint$ = this.collectionService.getIDHrefObs(collectionID).pipe(
+      switchMap((href: string) => this.halService.getEndpoint(this.collectionLinkPath, href))
     );
   }
 
   /**
-   * Since the collection ID is included in the base endpoint, simply return the base endpoint
+   * Set the endpoint to the regular linkPath
+   */
+  private setRegularEndpoint() {
+    this.collectionEndpoint = false;
+    this.endpoint$ = this.halService.getEndpoint(this.linkPath);
+  }
+
+  /**
+   * Get the base endpoint for all requests
+   * Uses the current collectionID to assemble a request endpoint for the collection's item template
+   */
+  protected getEndpoint(): Observable<string> {
+    return this.endpoint$;
+  }
+
+  /**
+   * If the current endpoint is based on a collection, simply return the collection's template endpoint, otherwise
+   * create a regular template endpoint
    * @param resourceID
    */
   getIDHrefObs(resourceID: string): Observable<string> {
-    return this.getEndpoint();
+    if (this.collectionEndpoint) {
+      return this.getEndpoint();
+    } else {
+      return super.getIDHrefObs(resourceID);
+    }
   }
 
   /**
@@ -70,7 +98,7 @@ class DataServiceImpl extends ItemDataService {
    * @param collectionID
    */
   findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
-    this.collectionID = collectionID;
+    this.setCollectionEndpoint(collectionID);
     return super.findById(collectionID);
   }
 
@@ -80,7 +108,7 @@ class DataServiceImpl extends ItemDataService {
    * @param collectionID
    */
   create(item: Item, collectionID: string): Observable<RemoteData<Item>> {
-    this.collectionID = collectionID;
+    this.setCollectionEndpoint(collectionID);
     return super.create(item);
   }
 
@@ -90,13 +118,13 @@ class DataServiceImpl extends ItemDataService {
    * @param collectionID
    */
   deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
-    this.collectionID = collectionID;
+    this.setRegularEndpoint();
     return super.delete(item);
   }
 }
 
 /**
- * A service responsible for fetching/sending data from/to the REST API on a collection's itemtemplate endpoint
+ * A service responsible for fetching/sending data from/to the REST API on a collection's itemtemplates endpoint
  */
 @Injectable()
 export class ItemTemplateDataService implements UpdateDataService<Item> {

From 24fc3e6c763c5cc6760cabe7954981405513df63 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 23 Jan 2020 15:14:25 +0100
Subject: [PATCH 12/84] 65272: TemplateItem object and normalized version

---
 .../models/normalized-template-item.model.ts  | 22 +++++++++++++++++++
 src/app/core/core.module.ts                   |  4 +++-
 src/app/core/shared/template-item.model.ts    | 18 +++++++++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/app/core/cache/models/normalized-template-item.model.ts
 create mode 100644 src/app/core/shared/template-item.model.ts

diff --git a/src/app/core/cache/models/normalized-template-item.model.ts b/src/app/core/cache/models/normalized-template-item.model.ts
new file mode 100644
index 0000000000..7a3259d74d
--- /dev/null
+++ b/src/app/core/cache/models/normalized-template-item.model.ts
@@ -0,0 +1,22 @@
+import { inheritSerialization, deserialize } from 'cerialize';
+
+import { mapsTo, relationship } from '../builders/build-decorators';
+import { TemplateItem } from '../../shared/template-item.model';
+import { NormalizedItem } from './normalized-item.model';
+import { Collection } from '../../shared/collection.model';
+
+/**
+ * Normalized model class for a DSpace Template Item
+ */
+@mapsTo(TemplateItem)
+@inheritSerialization(NormalizedItem)
+export class NormalizedTemplateItem extends NormalizedItem {
+
+  /**
+   * The Collection that this item is a template for
+   */
+  @deserialize
+  @relationship(Collection, false)
+  templateItemOf: string;
+
+}
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 55fe376294..57034a9737 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -141,6 +141,7 @@ import { NormalizedExternalSource } from './cache/models/normalized-external-sou
 import { NormalizedExternalSourceEntry } from './cache/models/normalized-external-source-entry.model';
 import { ExternalSourceService } from './data/external-source.service';
 import { LookupRelationService } from './data/lookup-relation.service';
+import { NormalizedTemplateItem } from './cache/models/normalized-template-item.model';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -302,7 +303,8 @@ export const normalizedModels =
     NormalizedRelationshipType,
     NormalizedItemType,
     NormalizedExternalSource,
-    NormalizedExternalSourceEntry
+    NormalizedExternalSourceEntry,
+    NormalizedTemplateItem
   ];
 
 @NgModule({
diff --git a/src/app/core/shared/template-item.model.ts b/src/app/core/shared/template-item.model.ts
new file mode 100644
index 0000000000..a58ec047ce
--- /dev/null
+++ b/src/app/core/shared/template-item.model.ts
@@ -0,0 +1,18 @@
+import { Item } from './item.model';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../data/remote-data';
+import { Collection } from './collection.model';
+import { ResourceType } from './resource-type';
+
+/**
+ * Class representing a DSpace Template Item
+ */
+export class TemplateItem extends Item {
+  static type = new ResourceType('templateItem');
+
+  /**
+   * The Collection that this item is a template for
+   */
+  templateItemOf: Observable<RemoteData<Collection>>;
+
+}

From 4ae5ee21b16aa1b047b7bc0a674839d130944852 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 23 Jan 2020 15:59:47 +0100
Subject: [PATCH 13/84] 65272: Edit template item - Empty metadata alert +
 alignment fixes

---
 resources/i18n/en.json5                       |  2 +
 .../item-metadata.component.html              | 39 ++++++++++---------
 .../item-metadata/item-metadata.component.ts  |  7 ++++
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 86d93044ac..16f06c9e4e 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -685,6 +685,8 @@
 
   "item.edit.metadata.edit.buttons.unedit": "Stop editing",
 
+  "item.edit.metadata.empty": "The item currently doesn't contain any metadata. Click Add to start adding a metadata value.",
+
   "item.edit.metadata.headers.edit": "Edit",
 
   "item.edit.metadata.headers.field": "Field",
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
index 496429a3ba..366f6fffe2 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
@@ -1,5 +1,5 @@
 <div class="item-metadata">
-    <div class="button-row top d-flex">
+    <div class="button-row top d-flex mb-2">
         <button class="mr-auto btn btn-success"
                 (click)="add()"><i
                 class="fas fa-plus"></i>
@@ -22,7 +22,7 @@
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
         </button>
     </div>
-    <table class="table table-responsive table-striped table-bordered">
+    <table class="table table-responsive table-striped table-bordered" *ngIf="((updates$ | async)| dsObjectValues).length > 0">
         <tbody>
         <tr>
             <th>{{'item.edit.metadata.headers.field' | translate}}</th>
@@ -44,21 +44,24 @@
         </tr>
         </tbody>
     </table>
-    <div class="button-row bottom">
-        <div class="my-2 float-right">
-            <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
-                    [disabled]="!(hasChanges() | async)"
-                    (click)="discard()"><i
-                    class="fas fa-times"></i> {{"item.edit.metadata.discard-button" | translate}}
-            </button>
-            <button class="btn btn-warning" *ngIf="isReinstatable() | async"
-                    (click)="reinstate()"><i
-                    class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
-            </button>
-            <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
-                    (click)="submit()"><i
-                    class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
-            </button>
-        </div>
+    <div *ngIf="((updates$ | async)| dsObjectValues).length == 0">
+      <ds-alert [content]="'item.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
     </div>
+    <div class="button-row bottom">
+          <div class="float-right">
+              <button class="btn btn-danger mr-1" *ngIf="!(isReinstatable() | async)"
+                      [disabled]="!(hasChanges() | async)"
+                      (click)="discard()"><i
+                      class="fas fa-times"></i> {{"item.edit.metadata.discard-button" | translate}}
+              </button>
+              <button class="btn btn-warning mr-1" *ngIf="isReinstatable() | async"
+                      (click)="reinstate()"><i
+                      class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
+              </button>
+              <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
+                      (click)="submit()"><i
+                      class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
+              </button>
+          </div>
+      </div>
 </div>
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
index 74282ab54c..9fcf16b62d 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
@@ -21,6 +21,7 @@ import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-it
 import { MetadataField } from '../../../core/metadata/metadata-field.model';
 import { UpdateDataService } from '../../../core/data/update-data.service';
 import { hasNoValue } from '../../../shared/empty.util';
+import { AlertType } from '../../../shared/alert/aletr-type';
 
 @Component({
   selector: 'ds-item-metadata',
@@ -32,6 +33,12 @@ import { hasNoValue } from '../../../shared/empty.util';
  */
 export class ItemMetadataComponent extends AbstractItemUpdateComponent {
 
+  /**
+   * The AlertType enumeration
+   * @type {AlertType}
+   */
+  public AlertTypeEnum = AlertType;
+
   /**
    * A custom update service to use for adding and committing patches
    * This will default to the ItemDataService

From a714958c04cf039623f983ce93f753afd85073cf Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 23 Jan 2020 16:49:31 +0100
Subject: [PATCH 14/84] 65272: Object update PUT to PATCH requests + option to
 add ignored metadata fields to update

---
 .../item-metadata/item-metadata.component.ts  | 21 ++++++++++++++++---
 .../core/cache/server-sync-buffer.effects.ts  | 21 ++++++++++++-------
 src/app/core/data/data.service.ts             | 15 +++++++++++--
 .../core/data/dso-change-analyzer.service.ts  | 19 ++++++++++++++++-
 .../core/data/item-template-data.service.ts   |  4 ++--
 src/app/core/data/request.models.ts           |  2 ++
 src/app/core/data/update-data.service.ts      |  2 +-
 7 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
index 9fcf16b62d..2635ba3f60 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
@@ -15,12 +15,12 @@ import { NotificationsService } from '../../../shared/notifications/notification
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../../config';
 import { TranslateService } from '@ngx-translate/core';
 import { RegistryService } from '../../../core/registry/registry.service';
-import { MetadatumViewModel } from '../../../core/shared/metadata.models';
+import { MetadataValue, MetadatumViewModel } from '../../../core/shared/metadata.models';
 import { Metadata } from '../../../core/shared/metadata.utils';
 import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component';
 import { MetadataField } from '../../../core/metadata/metadata-field.model';
 import { UpdateDataService } from '../../../core/data/update-data.service';
-import { hasNoValue } from '../../../shared/empty.util';
+import { hasNoValue, hasValue } from '../../../shared/empty.util';
 import { AlertType } from '../../../shared/alert/aletr-type';
 
 @Component({
@@ -115,13 +115,14 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
           first(),
           switchMap((metadata: MetadatumViewModel[]) => {
             const updatedItem: Item = Object.assign(cloneDeep(this.item), { metadata: Metadata.toMetadataMap(metadata) });
-            return this.updateService.update(updatedItem);
+            return this.updateService.update(updatedItem, ['relation.*', 'relationship.*']);
           }),
           tap(() => this.updateService.commitUpdates()),
           getSucceededRemoteData()
         ).subscribe(
           (rd: RemoteData<Item>) => {
             this.item = rd.payload;
+            this.checkAndFixMetadataUUIDs();
             this.initializeOriginalFields();
             this.updates$ = this.objectUpdatesService.getFieldUpdates(this.url, this.getMetadataAsListExcludingRelationships());
             this.notificationsService.success(this.getNotificationTitle('saved'), this.getNotificationContent('saved'));
@@ -143,7 +144,21 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
       map((remoteData$) => remoteData$.payload.page.map((field: MetadataField) => field.toString())));
   }
 
+  /**
+   * Get the object's metadata as a list and exclude relationship metadata
+   */
   getMetadataAsListExcludingRelationships(): MetadatumViewModel[] {
     return this.item.metadataAsList.filter((metadata: MetadatumViewModel) => !metadata.key.startsWith('relation.') && !metadata.key.startsWith('relationship.'));
   }
+
+  /**
+   * Check for empty metadata UUIDs and fix them (empty UUIDs would break the object-update service)
+   */
+  checkAndFixMetadataUUIDs() {
+    const metadata = cloneDeep(this.item.metadata);
+    Object.keys(this.item.metadata).forEach((key: string) => {
+      metadata[key] = this.item.metadata[key].map((value) => hasValue(value.uuid) ? value : Object.assign(new MetadataValue(), value));
+    });
+    this.item.metadata = metadata;
+  }
 }
diff --git a/src/app/core/cache/server-sync-buffer.effects.ts b/src/app/core/cache/server-sync-buffer.effects.ts
index 3aa6ad312f..61f758e5a4 100644
--- a/src/app/core/cache/server-sync-buffer.effects.ts
+++ b/src/app/core/cache/server-sync-buffer.effects.ts
@@ -15,7 +15,7 @@ import { Action, createSelector, MemoizedSelector, select, Store } from '@ngrx/s
 import { ServerSyncBufferEntry, ServerSyncBufferState } from './server-sync-buffer.reducer';
 import { combineLatest as observableCombineLatest, of as observableOf } from 'rxjs';
 import { RequestService } from '../data/request.service';
-import { PutRequest } from '../data/request.models';
+import { PatchRequest, PutRequest } from '../data/request.models';
 import { ObjectCacheService } from './object-cache.service';
 import { ApplyPatchObjectCacheAction } from './object-cache.actions';
 import { DSpaceRESTv2Serializer } from '../dspace-rest-v2/dspace-rest-v2.serializer';
@@ -23,6 +23,8 @@ import { GenericConstructor } from '../shared/generic-constructor';
 import { hasValue, isNotEmpty, isNotUndefined } from '../../shared/empty.util';
 import { Observable } from 'rxjs/internal/Observable';
 import { RestRequestMethod } from '../data/rest-request-method';
+import { Operation } from 'fast-json-patch';
+import { ObjectCacheEntry } from './object-cache.reducer';
 
 @Injectable()
 export class ServerSyncBufferEffects {
@@ -96,15 +98,18 @@ export class ServerSyncBufferEffects {
    * @returns {Observable<Action>} ApplyPatchObjectCacheAction to be dispatched
    */
   private applyPatch(href: string): Observable<Action> {
-    const patchObject = this.objectCache.getObjectBySelfLink(href).pipe(take(1));
+    const patchObject = this.objectCache.getBySelfLink(href).pipe(take(1));
 
     return patchObject.pipe(
-      map((object) => {
-        const serializedObject = new DSpaceRESTv2Serializer(object.constructor as GenericConstructor<{}>).serialize(object);
-
-        this.requestService.configure(new PutRequest(this.requestService.generateRequestId(), href, serializedObject));
-
-        return new ApplyPatchObjectCacheAction(href)
+      map((entry: ObjectCacheEntry) => {
+        if (isNotEmpty(entry.patches)) {
+          const flatPatch: Operation[] = [].concat(...entry.patches.map((patch) => patch.operations));
+          const objectPatch = flatPatch.filter((op: Operation) => op.path.startsWith('/metadata'));
+          if (isNotEmpty(objectPatch)) {
+            this.requestService.configure(new PatchRequest(this.requestService.generateRequestId(), href, objectPatch));
+          }
+        }
+        return new ApplyPatchObjectCacheAction(href);
       })
     )
   }
diff --git a/src/app/core/data/data.service.ts b/src/app/core/data/data.service.ts
index 04d1990eac..5a56fd5668 100644
--- a/src/app/core/data/data.service.ts
+++ b/src/app/core/data/data.service.ts
@@ -262,13 +262,24 @@ export abstract class DataService<T extends CacheableObject> implements UpdateDa
    * The patch is derived from the differences between the given object and its version in the object cache
    * @param {DSpaceObject} object The given object
    */
-  update(object: T): Observable<RemoteData<T>> {
+  update(object: T, ignoreMetadataFields: string[] = []): Observable<RemoteData<T>> {
+    const ignoreMetadataFieldsPrefix = ignoreMetadataFields.map((field) => field.indexOf('*') > -1 ? field.slice(0, field.indexOf('*')) : field);
     const oldVersion$ = this.findByHref(object.self);
     return oldVersion$.pipe(
       getSucceededRemoteData(),
       getRemoteDataPayload(),
       mergeMap((oldVersion: T) => {
-        const operations = this.comparator.diff(oldVersion, object);
+        // Fetch operations from difference between old version and new version
+        // Filter out any metadata operations for a field specified under ignoreMetadataFields
+        const operations = this.comparator.diff(oldVersion, object).filter((operation) => {
+          let ignoredFieldFound = false;
+          ignoreMetadataFieldsPrefix.forEach((fieldPrefix) => {
+            if (operation.path.indexOf('/metadata/' + fieldPrefix) > -1) {
+              ignoredFieldFound = true;
+            }
+          });
+          return !ignoredFieldFound;
+        });
         if (isNotEmpty(operations)) {
           this.objectCache.addPatch(object.self, operations);
         }
diff --git a/src/app/core/data/dso-change-analyzer.service.ts b/src/app/core/data/dso-change-analyzer.service.ts
index dd3487d3d0..ce3ed2452e 100644
--- a/src/app/core/data/dso-change-analyzer.service.ts
+++ b/src/app/core/data/dso-change-analyzer.service.ts
@@ -4,6 +4,8 @@ import { ChangeAnalyzer } from './change-analyzer';
 import { NormalizedDSpaceObject } from '../cache/models/normalized-dspace-object.model';
 import { Injectable } from '@angular/core';
 import { DSpaceObject } from '../shared/dspace-object.model';
+import { MetadataMap } from '../shared/metadata.models';
+import { cloneDeep } from 'lodash';
 
 /**
  * A class to determine what differs between two
@@ -22,6 +24,21 @@ export class DSOChangeAnalyzer<T extends DSpaceObject> implements ChangeAnalyzer
    *    The second object to compare
    */
   diff(object1: T | NormalizedDSpaceObject<T>, object2: T | NormalizedDSpaceObject<T>): Operation[] {
-    return compare(object1.metadata, object2.metadata).map((operation: Operation) => Object.assign({}, operation, { path: '/metadata' + operation.path }));
+    return compare(this.filterUUIDsFromMetadata(object1.metadata), this.filterUUIDsFromMetadata(object2.metadata))
+      .map((operation: Operation) => Object.assign({}, operation, { path: '/metadata' + operation.path }));
+  }
+
+  /**
+   * Filter the UUIDs out of a MetadataMap
+   * @param metadata
+   */
+  filterUUIDsFromMetadata(metadata: MetadataMap): MetadataMap {
+    const result = cloneDeep(metadata);
+    for (const key of Object.keys(result)) {
+      for (const metadataValue of result[key]) {
+        metadataValue.uuid = undefined;
+      }
+    }
+    return result;
   }
 }
diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
index aaa664d7ec..e5b862b947 100644
--- a/src/app/core/data/item-template-data.service.ts
+++ b/src/app/core/data/item-template-data.service.ts
@@ -158,8 +158,8 @@ export class ItemTemplateDataService implements UpdateDataService<Item> {
   /**
    * Add a new patch to the object cache
    */
-  update(object: Item): Observable<RemoteData<Item>> {
-    return this.dataService.update(object);
+  update(object: Item, ignoreMetadataFields: string[] = []): Observable<RemoteData<Item>> {
+    return this.dataService.update(object, ignoreMetadataFields);
   }
 
   /**
diff --git a/src/app/core/data/request.models.ts b/src/app/core/data/request.models.ts
index ca864f99de..f7546183ae 100644
--- a/src/app/core/data/request.models.ts
+++ b/src/app/core/data/request.models.ts
@@ -118,6 +118,8 @@ export class HeadRequest extends RestRequest {
 }
 
 export class PatchRequest extends RestRequest {
+  public responseMsToLive = 60 * 15 * 1000;
+
   constructor(
     public uuid: string,
     public href: string,
diff --git a/src/app/core/data/update-data.service.ts b/src/app/core/data/update-data.service.ts
index 34835e14c1..a429be4319 100644
--- a/src/app/core/data/update-data.service.ts
+++ b/src/app/core/data/update-data.service.ts
@@ -6,6 +6,6 @@ import { RestRequestMethod } from './rest-request-method';
  * Represents a data service to update a given object
  */
 export interface UpdateDataService<T> {
-  update(object: T): Observable<RemoteData<T>>;
+  update(object: T, ignoreMetadataFields?: string[]): Observable<RemoteData<T>>;
   commitUpdates(method?: RestRequestMethod);
 }

From 98937bd2408ea91a12eb34e3c56e9f2b17acc739 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 23 Jan 2020 17:24:46 +0100
Subject: [PATCH 15/84] 65272: Missing JSDocs + id and uuid serializing fix for
 NormalizedTemplateItem

---
 .../cache/models/normalized-template-item.model.ts | 14 +++++++++++++-
 src/app/core/data/data.service.ts                  |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app/core/cache/models/normalized-template-item.model.ts b/src/app/core/cache/models/normalized-template-item.model.ts
index 7a3259d74d..029306b2c3 100644
--- a/src/app/core/cache/models/normalized-template-item.model.ts
+++ b/src/app/core/cache/models/normalized-template-item.model.ts
@@ -1,4 +1,4 @@
-import { inheritSerialization, deserialize } from 'cerialize';
+import { inheritSerialization, deserialize, autoserializeAs } from 'cerialize';
 
 import { mapsTo, relationship } from '../builders/build-decorators';
 import { TemplateItem } from '../../shared/template-item.model';
@@ -12,6 +12,18 @@ import { Collection } from '../../shared/collection.model';
 @inheritSerialization(NormalizedItem)
 export class NormalizedTemplateItem extends NormalizedItem {
 
+  /**
+   * The human-readable identifier of this DSpaceObject
+   */
+  @autoserializeAs(String)
+  id: string;
+
+  /**
+   * The universally unique identifier of this DSpaceObject
+   */
+  @autoserializeAs(String, 'id')
+  uuid: string;
+
   /**
    * The Collection that this item is a template for
    */
diff --git a/src/app/core/data/data.service.ts b/src/app/core/data/data.service.ts
index 5a56fd5668..f20cc20b4c 100644
--- a/src/app/core/data/data.service.ts
+++ b/src/app/core/data/data.service.ts
@@ -261,6 +261,7 @@ export abstract class DataService<T extends CacheableObject> implements UpdateDa
    * Add a new patch to the object cache
    * The patch is derived from the differences between the given object and its version in the object cache
    * @param {DSpaceObject} object The given object
+   * @param ignoreMetadataFields  An optional list of metadata fields to ignore updates for (* is allowed as a wildcard, for example: dc.description.*)
    */
   update(object: T, ignoreMetadataFields: string[] = []): Observable<RemoteData<T>> {
     const ignoreMetadataFieldsPrefix = ignoreMetadataFields.map((field) => field.indexOf('*') > -1 ? field.slice(0, field.indexOf('*')) : field);

From d98ce7c97e60cd95e9809343eb64b743e1a2e7b1 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 23 Jan 2020 17:33:25 +0100
Subject: [PATCH 16/84] 65272: Logo spacing layout fix

---
 .../shared/comcol-forms/comcol-form/comcol-form.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
index 09f7e459e4..6d0a0f90be 100644
--- a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
+++ b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
@@ -4,7 +4,7 @@
       <label>{{type.value + '.edit.logo.label' | translate}}</label>
     </div>
     <ng-container *ngVar="(dso?.logo | async)?.payload as logo">
-      <div class="col-12 d-inline-block alert" [ngClass]="{'alert-danger': markLogoForDeletion}" id="logo-section">
+      <div class="col-12 d-inline-block alert" [ngClass]="{'alert-danger': markLogoForDeletion}" id="logo-section" *ngIf="logo">
         <div class="row">
           <div class="col-8 d-inline-block">
             <ds-comcol-page-logo [logo]="logo"></ds-comcol-page-logo>

From 53355d1fc4cf59b317b678a4dd35dda480f6c88f Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 23 Jan 2020 17:49:41 +0100
Subject: [PATCH 17/84] 65272: Test fixes

---
 .../item-metadata/item-metadata.component.spec.ts            | 2 +-
 src/app/core/cache/server-sync-buffer.effects.spec.ts        | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
index e5bf6ea0af..133ff6f046 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
@@ -218,7 +218,7 @@ describe('ItemMetadataComponent', () => {
 
     it('it should call reinstateFieldUpdates on the objectUpdatesService with the correct url and metadata', () => {
       expect(objectUpdatesService.getUpdatedFields).toHaveBeenCalledWith(url, comp.item.metadataAsList);
-      expect(itemService.update).toHaveBeenCalledWith(Object.assign(comp.item, { metadata: Metadata.toMetadataMap(comp.item.metadataAsList) }));
+      expect(itemService.update).toHaveBeenCalledWith(Object.assign(comp.item, { metadata: Metadata.toMetadataMap(comp.item.metadataAsList) }), ['relation.*', 'relationship.*']);
       expect(objectUpdatesService.getFieldUpdates).toHaveBeenCalledWith(url, comp.item.metadataAsList);
     });
   });
diff --git a/src/app/core/cache/server-sync-buffer.effects.spec.ts b/src/app/core/cache/server-sync-buffer.effects.spec.ts
index 773e0ab60c..66477adc20 100644
--- a/src/app/core/cache/server-sync-buffer.effects.spec.ts
+++ b/src/app/core/cache/server-sync-buffer.effects.spec.ts
@@ -50,6 +50,11 @@ describe('ServerSyncBufferEffects', () => {
               const object = new DSpaceObject();
               object.self = link;
               return observableOf(object);
+            },
+            getBySelfLink: (link) => {
+              const object = new DSpaceObject();
+              object.self = link;
+              return observableOf(object);
             }
           }
         },

From 1885845fefce9a8ab282731e3f3ce62c352f85da Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 7 Feb 2020 17:18:51 +0100
Subject: [PATCH 18/84] 65272: Clear template-item cache on removal

---
 .../collection-metadata.component.spec.ts     | 24 ++++++++++++++++---
 .../collection-metadata.component.ts          | 14 +++++++++--
 .../models/normalized-template-item.model.ts  | 14 +----------
 src/app/core/shared/template-item.model.ts    |  2 +-
 4 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
index a4336201fc..784fa81579 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
@@ -13,6 +13,8 @@ import { Item } from '../../../core/shared/item.model';
 import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils';
 import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
 import { Collection } from '../../../core/shared/collection.model';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { RequestService } from '../../../core/data/request.service';
 
 describe('CollectionMetadataComponent', () => {
   let comp: CollectionMetadataComponent;
@@ -20,11 +22,14 @@ describe('CollectionMetadataComponent', () => {
   let router: Router;
   let itemTemplateService: ItemTemplateDataService;
 
-  const template = new Item();
+  const template = Object.assign(new Item(), {
+    self: 'template-selflink'
+  });
   const collection = Object.assign(new Collection(), {
     uuid: 'collection-id',
     id: 'collection-id',
-    name: 'Fake Collection'
+    name: 'Fake Collection',
+    self: 'collection-selflink'
   });
 
   const itemTemplateServiceStub = Object.assign({
@@ -37,6 +42,12 @@ describe('CollectionMetadataComponent', () => {
     success: {},
     error: {}
   });
+  const objectCache = jasmine.createSpyObj('objectCache', {
+    remove: {}
+  });
+  const requestService = jasmine.createSpyObj('requestService', {
+    removeByHrefSubstring: {}
+  });
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -46,7 +57,9 @@ describe('CollectionMetadataComponent', () => {
         { provide: CollectionDataService, useValue: {} },
         { provide: ItemTemplateDataService, useValue: itemTemplateServiceStub },
         { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } },
-        { provide: NotificationsService, useValue: notificationsService }
+        { provide: NotificationsService, useValue: notificationsService },
+        { provide: ObjectCacheService, useValue: objectCache },
+        { provide: RequestService, useValue: requestService }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -84,6 +97,11 @@ describe('CollectionMetadataComponent', () => {
       it('should display a success notification', () => {
         expect(notificationsService.success).toHaveBeenCalled();
       });
+
+      it('should reset related object and request cache', () => {
+        expect(objectCache.remove).toHaveBeenCalledWith(template.self);
+        expect(requestService.removeByHrefSubstring).toHaveBeenCalledWith(collection.self);
+      });
     });
 
     describe('when delete returns a failure', () => {
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
index 72ebbb8508..ca2a38aa86 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
@@ -12,6 +12,8 @@ import { switchMap, take } from 'rxjs/operators';
 import { combineLatest as combineLatestObservable } from 'rxjs';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { RequestService } from '../../../core/data/request.service';
 
 /**
  * Component for editing a collection's metadata
@@ -35,7 +37,9 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
     protected router: Router,
     protected route: ActivatedRoute,
     protected notificationsService: NotificationsService,
-    protected translate: TranslateService
+    protected translate: TranslateService,
+    protected objectCache: ObjectCacheService,
+    protected requestService: RequestService
   ) {
     super(collectionDataService, router, route, notificationsService, translate);
   }
@@ -94,13 +98,19 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
     );
 
     combineLatestObservable(collection$, template$).pipe(
-      switchMap(([collection, template]) => this.itemTemplateService.deleteByCollectionID(template, collection.uuid))
+      switchMap(([collection, template]) => {
+        const success$ = this.itemTemplateService.deleteByCollectionID(template, collection.uuid);
+        this.objectCache.remove(template.self);
+        this.requestService.removeByHrefSubstring(collection.self);
+        return success$;
+      })
     ).subscribe((success: boolean) => {
       if (success) {
         this.notificationsService.success(null, this.translate.get('collection.edit.template.notifications.delete.success'));
       } else {
         this.notificationsService.error(null, this.translate.get('collection.edit.template.notifications.delete.error'));
       }
+      this.initTemplateItem();
     });
   }
 }
diff --git a/src/app/core/cache/models/normalized-template-item.model.ts b/src/app/core/cache/models/normalized-template-item.model.ts
index 029306b2c3..7a3259d74d 100644
--- a/src/app/core/cache/models/normalized-template-item.model.ts
+++ b/src/app/core/cache/models/normalized-template-item.model.ts
@@ -1,4 +1,4 @@
-import { inheritSerialization, deserialize, autoserializeAs } from 'cerialize';
+import { inheritSerialization, deserialize } from 'cerialize';
 
 import { mapsTo, relationship } from '../builders/build-decorators';
 import { TemplateItem } from '../../shared/template-item.model';
@@ -12,18 +12,6 @@ import { Collection } from '../../shared/collection.model';
 @inheritSerialization(NormalizedItem)
 export class NormalizedTemplateItem extends NormalizedItem {
 
-  /**
-   * The human-readable identifier of this DSpaceObject
-   */
-  @autoserializeAs(String)
-  id: string;
-
-  /**
-   * The universally unique identifier of this DSpaceObject
-   */
-  @autoserializeAs(String, 'id')
-  uuid: string;
-
   /**
    * The Collection that this item is a template for
    */
diff --git a/src/app/core/shared/template-item.model.ts b/src/app/core/shared/template-item.model.ts
index a58ec047ce..ef60c6906e 100644
--- a/src/app/core/shared/template-item.model.ts
+++ b/src/app/core/shared/template-item.model.ts
@@ -8,7 +8,7 @@ import { ResourceType } from './resource-type';
  * Class representing a DSpace Template Item
  */
 export class TemplateItem extends Item {
-  static type = new ResourceType('templateItem');
+  static type = new ResourceType('itemtemplate');
 
   /**
    * The Collection that this item is a template for

From e3facbd8c85fd9f018a549ab429c39b2ada122ab Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 11 Feb 2020 14:55:08 +0100
Subject: [PATCH 19/84] 65272: filter relationship metadata when displaying on
 item-metadata, keep them stored in the object-updates store

---
 .../item-metadata/item-metadata.component.ts     |  6 +++---
 src/app/core/data/data.service.ts                | 16 ++--------------
 src/app/core/data/item-template-data.service.ts  |  4 ++--
 .../object-updates/object-updates.service.ts     |  8 ++++++--
 src/app/core/data/update-data.service.ts         |  2 +-
 5 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
index 2635ba3f60..a37e7b0941 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
@@ -100,7 +100,7 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
    * Sends all initial values of this item to the object updates service
    */
   public initializeOriginalFields() {
-    this.objectUpdatesService.initialize(this.url, this.getMetadataAsListExcludingRelationships(), this.item.lastModified);
+    this.objectUpdatesService.initialize(this.url, this.item.metadataAsList, this.item.lastModified);
   }
 
   /**
@@ -110,12 +110,12 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
   public submit() {
     this.isValid().pipe(first()).subscribe((isValid) => {
       if (isValid) {
-        const metadata$: Observable<Identifiable[]> = this.objectUpdatesService.getUpdatedFields(this.url, this.getMetadataAsListExcludingRelationships()) as Observable<MetadatumViewModel[]>;
+        const metadata$: Observable<Identifiable[]> = this.objectUpdatesService.getUpdatedFields(this.url, this.item.metadataAsList) as Observable<MetadatumViewModel[]>;
         metadata$.pipe(
           first(),
           switchMap((metadata: MetadatumViewModel[]) => {
             const updatedItem: Item = Object.assign(cloneDeep(this.item), { metadata: Metadata.toMetadataMap(metadata) });
-            return this.updateService.update(updatedItem, ['relation.*', 'relationship.*']);
+            return this.updateService.update(updatedItem);
           }),
           tap(() => this.updateService.commitUpdates()),
           getSucceededRemoteData()
diff --git a/src/app/core/data/data.service.ts b/src/app/core/data/data.service.ts
index f20cc20b4c..04d1990eac 100644
--- a/src/app/core/data/data.service.ts
+++ b/src/app/core/data/data.service.ts
@@ -261,26 +261,14 @@ export abstract class DataService<T extends CacheableObject> implements UpdateDa
    * Add a new patch to the object cache
    * The patch is derived from the differences between the given object and its version in the object cache
    * @param {DSpaceObject} object The given object
-   * @param ignoreMetadataFields  An optional list of metadata fields to ignore updates for (* is allowed as a wildcard, for example: dc.description.*)
    */
-  update(object: T, ignoreMetadataFields: string[] = []): Observable<RemoteData<T>> {
-    const ignoreMetadataFieldsPrefix = ignoreMetadataFields.map((field) => field.indexOf('*') > -1 ? field.slice(0, field.indexOf('*')) : field);
+  update(object: T): Observable<RemoteData<T>> {
     const oldVersion$ = this.findByHref(object.self);
     return oldVersion$.pipe(
       getSucceededRemoteData(),
       getRemoteDataPayload(),
       mergeMap((oldVersion: T) => {
-        // Fetch operations from difference between old version and new version
-        // Filter out any metadata operations for a field specified under ignoreMetadataFields
-        const operations = this.comparator.diff(oldVersion, object).filter((operation) => {
-          let ignoredFieldFound = false;
-          ignoreMetadataFieldsPrefix.forEach((fieldPrefix) => {
-            if (operation.path.indexOf('/metadata/' + fieldPrefix) > -1) {
-              ignoredFieldFound = true;
-            }
-          });
-          return !ignoredFieldFound;
-        });
+        const operations = this.comparator.diff(oldVersion, object);
         if (isNotEmpty(operations)) {
           this.objectCache.addPatch(object.self, operations);
         }
diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
index e5b862b947..aaa664d7ec 100644
--- a/src/app/core/data/item-template-data.service.ts
+++ b/src/app/core/data/item-template-data.service.ts
@@ -158,8 +158,8 @@ export class ItemTemplateDataService implements UpdateDataService<Item> {
   /**
    * Add a new patch to the object cache
    */
-  update(object: Item, ignoreMetadataFields: string[] = []): Observable<RemoteData<Item>> {
-    return this.dataService.update(object, ignoreMetadataFields);
+  update(object: Item): Observable<RemoteData<Item>> {
+    return this.dataService.update(object);
   }
 
   /**
diff --git a/src/app/core/data/object-updates/object-updates.service.ts b/src/app/core/data/object-updates/object-updates.service.ts
index 08745f9223..91185551ed 100644
--- a/src/app/core/data/object-updates/object-updates.service.ts
+++ b/src/app/core/data/object-updates/object-updates.service.ts
@@ -97,9 +97,13 @@ export class ObjectUpdatesService {
         let fieldUpdate = objectEntry.fieldUpdates[uuid];
         if (isEmpty(fieldUpdate)) {
           const identifiable = initialFields.find((object: Identifiable) => object.uuid === uuid);
-          fieldUpdate = { field: identifiable, changeType: undefined };
+          if (hasValue(identifiable)) {
+            fieldUpdate = {field: identifiable, changeType: undefined};
+          }
+        }
+        if (hasValue(fieldUpdate)) {
+          fieldUpdates[uuid] = fieldUpdate;
         }
-        fieldUpdates[uuid] = fieldUpdate;
       });
       return fieldUpdates;
     }))
diff --git a/src/app/core/data/update-data.service.ts b/src/app/core/data/update-data.service.ts
index a429be4319..34835e14c1 100644
--- a/src/app/core/data/update-data.service.ts
+++ b/src/app/core/data/update-data.service.ts
@@ -6,6 +6,6 @@ import { RestRequestMethod } from './rest-request-method';
  * Represents a data service to update a given object
  */
 export interface UpdateDataService<T> {
-  update(object: T, ignoreMetadataFields?: string[]): Observable<RemoteData<T>>;
+  update(object: T): Observable<RemoteData<T>>;
   commitUpdates(method?: RestRequestMethod);
 }

From 46ab613481abbb83005187e65788cf50c1064698 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 11 Feb 2020 15:48:56 +0100
Subject: [PATCH 20/84] 65272: Filter autocomplete metadata fields + fix test

---
 .../edit-in-place-field/edit-in-place-field.component.ts       | 3 ++-
 .../item-metadata/item-metadata.component.spec.ts              | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
index 7dce025a73..29c57f5a0d 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
@@ -123,6 +123,7 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
   /**
    * Requests all metadata fields that contain the query string in their key
    * Then sets all found metadata fields as metadataFieldSuggestions
+   * Ignores fields from metadata schemas "relation" and "relationship"
    * @param query The query to look for
    */
   findMetadataFieldSuggestions(query: string): void {
@@ -133,7 +134,7 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
         map((data) => data.payload.page)
       ).subscribe(
         (fields: MetadataField[]) => this.metadataFieldSuggestions.next(
-          fields.map((field: MetadataField) => {
+          fields.filter((field: MetadataField) => field.schema.prefix !== 'relation' && field.schema.prefix !== 'relationship').map((field: MetadataField) => {
             return {
               displayValue: field.toString().split('.').join('.&#8203;'),
               value: field.toString()
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
index 133ff6f046..e5bf6ea0af 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
@@ -218,7 +218,7 @@ describe('ItemMetadataComponent', () => {
 
     it('it should call reinstateFieldUpdates on the objectUpdatesService with the correct url and metadata', () => {
       expect(objectUpdatesService.getUpdatedFields).toHaveBeenCalledWith(url, comp.item.metadataAsList);
-      expect(itemService.update).toHaveBeenCalledWith(Object.assign(comp.item, { metadata: Metadata.toMetadataMap(comp.item.metadataAsList) }), ['relation.*', 'relationship.*']);
+      expect(itemService.update).toHaveBeenCalledWith(Object.assign(comp.item, { metadata: Metadata.toMetadataMap(comp.item.metadataAsList) }));
       expect(objectUpdatesService.getFieldUpdates).toHaveBeenCalledWith(url, comp.item.metadataAsList);
     });
   });

From 1cb39cef4159f763d1f53a844d653042b30a94e7 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Thu, 19 Mar 2020 16:20:41 +0100
Subject: [PATCH 21/84] created new process page

---
 src/app/app-routing.module.ts                 |  1 +
 src/app/core/core.module.ts                   |  4 +
 .../new/new-process.component.html            | 10 +++
 .../new/new-process.component.scss            |  0
 .../process-page/new/new-process.component.ts | 16 ++++
 .../script-help/script-help.component.html    |  9 +++
 .../script-help/script-help.component.scss    |  0
 .../script-help/script-help.component.spec.ts | 25 +++++++
 .../new/script-help/script-help.component.ts  | 11 +++
 .../scripts-select.component.html             |  6 ++
 .../scripts-select.component.scss             |  0
 .../scripts-select.component.spec.ts          | 25 +++++++
 .../scripts-select.component.ts               | 41 ++++++++++
 .../process-page-routing.module.ts            | 17 +++++
 src/app/process-page/process-page.module.ts   | 30 ++++++++
 .../processes/process-data.service.ts         | 29 ++++++++
 .../processes/process-parameter.model.ts      | 13 ++++
 .../processes/process-status.model.ts         |  9 +++
 .../process-page/processes/process.model.ts   | 74 +++++++++++++++++++
 .../processes/process.resource-type.ts        |  9 +++
 .../scripts/script-data.service.ts            | 29 ++++++++
 .../scripts/script-parameter-type.model.ts    | 10 +++
 .../scripts/script-parameter.model.ts         | 31 ++++++++
 src/app/process-page/scripts/script.model.ts  | 52 +++++++++++++
 .../scripts/script.resource-type.ts           |  9 +++
 25 files changed, 460 insertions(+)
 create mode 100644 src/app/process-page/new/new-process.component.html
 create mode 100644 src/app/process-page/new/new-process.component.scss
 create mode 100644 src/app/process-page/new/new-process.component.ts
 create mode 100644 src/app/process-page/new/script-help/script-help.component.html
 create mode 100644 src/app/process-page/new/script-help/script-help.component.scss
 create mode 100644 src/app/process-page/new/script-help/script-help.component.spec.ts
 create mode 100644 src/app/process-page/new/script-help/script-help.component.ts
 create mode 100644 src/app/process-page/new/scripts-select/scripts-select.component.html
 create mode 100644 src/app/process-page/new/scripts-select/scripts-select.component.scss
 create mode 100644 src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
 create mode 100644 src/app/process-page/new/scripts-select/scripts-select.component.ts
 create mode 100644 src/app/process-page/process-page-routing.module.ts
 create mode 100644 src/app/process-page/process-page.module.ts
 create mode 100644 src/app/process-page/processes/process-data.service.ts
 create mode 100644 src/app/process-page/processes/process-parameter.model.ts
 create mode 100644 src/app/process-page/processes/process-status.model.ts
 create mode 100644 src/app/process-page/processes/process.model.ts
 create mode 100644 src/app/process-page/processes/process.resource-type.ts
 create mode 100644 src/app/process-page/scripts/script-data.service.ts
 create mode 100644 src/app/process-page/scripts/script-parameter-type.model.ts
 create mode 100644 src/app/process-page/scripts/script-parameter.model.ts
 create mode 100644 src/app/process-page/scripts/script.model.ts
 create mode 100644 src/app/process-page/scripts/script.resource-type.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 2927cd4e65..db018fff9d 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -86,6 +86,7 @@ export function getDSOPath(dso: DSpaceObject): string {
         path: PROFILE_MODULE_PATH,
         loadChildren: './profile-page/profile-page.module#ProfilePageModule', canActivate: [AuthenticatedGuard]
       },
+      { path: 'processes', loadChildren: './process-page/process-page.module#ProcessPageModule', canActivate: [AuthenticatedGuard] },
       { path: '**', pathMatch: 'full', component: PageNotFoundComponent },
     ],
     {
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 76b0e3e76c..4d04a79d73 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -139,6 +139,8 @@ import { VersionDataService } from './data/version-data.service';
 import { VersionHistoryDataService } from './data/version-history-data.service';
 import { Version } from './shared/version.model';
 import { VersionHistory } from './shared/version-history.model';
+import { Script } from '../process-page/scripts/script.model';
+import { Process } from '../process-page/processes/process.model';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -307,6 +309,8 @@ export const models =
     ItemType,
     ExternalSource,
     ExternalSourceEntry,
+    Script,
+    Process,
     Version,
     VersionHistory
   ];
diff --git a/src/app/process-page/new/new-process.component.html b/src/app/process-page/new/new-process.component.html
new file mode 100644
index 0000000000..9e050c37b5
--- /dev/null
+++ b/src/app/process-page/new/new-process.component.html
@@ -0,0 +1,10 @@
+<div class="container">
+    <div class="row">
+        <div class="col-12 col-md-6">
+            <ds-scripts-select (select)="selectScript($event)"></ds-scripts-select>
+        </div>
+        <div class="col-12 col-md-6">
+            <ds-script-help [script]="selectedScript"></ds-script-help>
+        </div>
+    </div>
+</div>
diff --git a/src/app/process-page/new/new-process.component.scss b/src/app/process-page/new/new-process.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
new file mode 100644
index 0000000000..c5fc786442
--- /dev/null
+++ b/src/app/process-page/new/new-process.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { Script } from '../scripts/script.model';
+
+@Component({
+  selector: 'ds-new-process',
+  templateUrl: './new-process.component.html',
+  styleUrls: ['./new-process.component.scss'],
+})
+export class NewProcessComponent {
+  public selectedScript: Script;
+
+  selectScript(script: Script) {
+    this.selectedScript = script;
+    console.log('selected script: ', script);
+  }
+}
diff --git a/src/app/process-page/new/script-help/script-help.component.html b/src/app/process-page/new/script-help/script-help.component.html
new file mode 100644
index 0000000000..937f7c007f
--- /dev/null
+++ b/src/app/process-page/new/script-help/script-help.component.html
@@ -0,0 +1,9 @@
+<h3>{{script?.name}}</h3>
+<span>{{script?.description}}</span>
+
+<table class="table-border less mt-3">
+    <tr *ngFor="let param of script?.parameters">
+        <td>{{param.name}} {{param.nameLong}}{{param.type !== 'boolean' ? '<<' + param.type + '>>' : ''}}</td>
+        <td>{{param.description}}</td>
+    </tr>
+</table>
diff --git a/src/app/process-page/new/script-help/script-help.component.scss b/src/app/process-page/new/script-help/script-help.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/script-help/script-help.component.spec.ts b/src/app/process-page/new/script-help/script-help.component.spec.ts
new file mode 100644
index 0000000000..286afa9922
--- /dev/null
+++ b/src/app/process-page/new/script-help/script-help.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScriptHelpComponent } from './script-help.component';
+
+describe('ScriptHelpComponent', () => {
+  let component: ScriptHelpComponent;
+  let fixture: ComponentFixture<ScriptHelpComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ScriptHelpComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScriptHelpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/script-help/script-help.component.ts b/src/app/process-page/new/script-help/script-help.component.ts
new file mode 100644
index 0000000000..0ff4a90ae4
--- /dev/null
+++ b/src/app/process-page/new/script-help/script-help.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { Script } from '../../scripts/script.model';
+
+@Component({
+  selector: 'ds-script-help',
+  templateUrl: './script-help.component.html',
+  styleUrls: ['./script-help.component.scss']
+})
+export class ScriptHelpComponent {
+  @Input() script: Script;
+}
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.html b/src/app/process-page/new/scripts-select/scripts-select.component.html
new file mode 100644
index 0000000000..69b1830941
--- /dev/null
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.html
@@ -0,0 +1,6 @@
+<select [(ngModel)]="selectedScript">
+  <option selected>Choose a script...</option>
+  <option *ngFor="let script of scripts | async" [ngValue]="script">
+    {{script.name}}
+  </option>
+</select>
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.scss b/src/app/process-page/new/scripts-select/scripts-select.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts b/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
new file mode 100644
index 0000000000..b433d633f1
--- /dev/null
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScriptsSelectComponent } from './scripts-select.component';
+
+describe('ScriptsSelectComponent', () => {
+  let component: ScriptsSelectComponent;
+  let fixture: ComponentFixture<ScriptsSelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ScriptsSelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScriptsSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.ts b/src/app/process-page/new/scripts-select/scripts-select.component.ts
new file mode 100644
index 0000000000..70b13c2e62
--- /dev/null
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.ts
@@ -0,0 +1,41 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ScriptDataService } from '../../scripts/script-data.service';
+import { Script } from '../../scripts/script.model';
+import { Observable } from 'rxjs';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
+import { PaginatedList } from '../../../core/data/paginated-list';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'ds-scripts-select',
+  templateUrl: './scripts-select.component.html',
+  styleUrls: ['./scripts-select.component.scss']
+})
+export class ScriptsSelectComponent implements OnInit {
+  @Output() select: EventEmitter<Script> = new EventEmitter<Script>();
+  scripts: Observable<Script[]>;
+  private _selectedScript;
+
+  constructor(
+    private scriptService: ScriptDataService
+  ) {
+  }
+
+  ngOnInit() {
+    this.scripts = this.scriptService.findAll({ elementsPerPage: Number.MAX_SAFE_INTEGER })
+      .pipe(
+        getSucceededRemoteData(),
+        getRemoteDataPayload(),
+        map((paginatedList: PaginatedList<Script>) => paginatedList.page)
+      )
+  }
+
+  get selectedScript() {
+    return this._selectedScript;
+  }
+
+  set selectedScript(value) {
+    this._selectedScript = value;
+    this.select.emit(value);
+  }
+}
diff --git a/src/app/process-page/process-page-routing.module.ts b/src/app/process-page/process-page-routing.module.ts
new file mode 100644
index 0000000000..d8ed79f039
--- /dev/null
+++ b/src/app/process-page/process-page-routing.module.ts
@@ -0,0 +1,17 @@
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { NewProcessComponent } from './new/new-process.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'new',
+        component: NewProcessComponent,
+      },
+    ])
+  ]
+})
+export class ProcessPageRoutingModule {
+
+}
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
new file mode 100644
index 0000000000..34252703dc
--- /dev/null
+++ b/src/app/process-page/process-page.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { ProcessPageRoutingModule } from './process-page-routing.module';
+import { ProcessDataService } from './processes/process-data.service';
+import { ScriptDataService } from './scripts/script-data.service';
+import { NewProcessComponent } from './new/new-process.component';
+import { ScriptsSelectComponent } from './new/scripts-select/scripts-select.component';
+import { ScriptHelpComponent } from './new/script-help/script-help.component';
+
+@NgModule({
+  imports: [
+    ProcessPageRoutingModule,
+    SharedModule,
+  ],
+  declarations: [
+    NewProcessComponent,
+    ScriptsSelectComponent,
+    ScriptHelpComponent
+  ],
+  entryComponents: [
+  ],
+  providers: [
+    ProcessDataService,
+    ScriptDataService
+  ]
+})
+
+export class ProcessPageModule {
+
+}
diff --git a/src/app/process-page/processes/process-data.service.ts b/src/app/process-page/processes/process-data.service.ts
new file mode 100644
index 0000000000..2e38266425
--- /dev/null
+++ b/src/app/process-page/processes/process-data.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { DataService } from '../../core/data/data.service';
+import { RequestService } from '../../core/data/request.service';
+import { RemoteDataBuildService } from '../../core/cache/builders/remote-data-build.service';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../../core/core.reducers';
+import { ObjectCacheService } from '../../core/cache/object-cache.service';
+import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { DefaultChangeAnalyzer } from '../../core/data/default-change-analyzer.service';
+import { Process } from './process.model';
+
+@Injectable()
+export class ProcessDataService extends DataService<Process> {
+  protected linkPath = 'processes';
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected store: Store<CoreState>,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DefaultChangeAnalyzer<Process>) {
+    super();
+  }
+}
diff --git a/src/app/process-page/processes/process-parameter.model.ts b/src/app/process-page/processes/process-parameter.model.ts
new file mode 100644
index 0000000000..4ce294a131
--- /dev/null
+++ b/src/app/process-page/processes/process-parameter.model.ts
@@ -0,0 +1,13 @@
+/**
+ * A parameter used for running a process
+ */
+export class ProcessParameter {
+  /**
+   * The name of the parameter Eg. '-d', '-f' etc.
+   */
+  name: string;
+  /**
+   * The value of the parameter
+   */
+  value: string;
+}
diff --git a/src/app/process-page/processes/process-status.model.ts b/src/app/process-page/processes/process-status.model.ts
new file mode 100644
index 0000000000..b43340bffb
--- /dev/null
+++ b/src/app/process-page/processes/process-status.model.ts
@@ -0,0 +1,9 @@
+/**
+ * List of process statuses
+ */
+export enum ProcessStatus {
+  SCHEDULED,
+  RUNNING,
+  COMPLETED,
+  FAILED
+}
diff --git a/src/app/process-page/processes/process.model.ts b/src/app/process-page/processes/process.model.ts
new file mode 100644
index 0000000000..4cf3d507a4
--- /dev/null
+++ b/src/app/process-page/processes/process.model.ts
@@ -0,0 +1,74 @@
+import { ProcessStatus } from './process-status.model';
+import { ProcessParameter } from './process-parameter.model';
+import { CacheableObject } from '../../core/cache/object-cache.reducer';
+import { HALLink } from '../../core/shared/hal-link.model';
+import { autoserialize, deserialize } from 'cerialize';
+import { PROCESS } from './process.resource-type';
+import { excludeFromEquals } from '../../core/utilities/equals.decorators';
+import { ResourceType } from '../../core/shared/resource-type';
+import { typedObject } from '../../core/cache/builders/build-decorators';
+
+@typedObject
+export class Process implements CacheableObject {
+  static type = PROCESS;
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  /**
+   * The identifier for this process
+   */
+  @autoserialize
+  processId: string;
+
+  /**
+   * The UUID for the user that started the process
+   */
+  @autoserialize
+  userId: string;
+
+  /**
+   * The start time for this process
+   */
+  @autoserialize
+  startTime: string;
+
+  /**
+   * The end time for this process
+   */
+  @autoserialize
+  endTime: string;
+
+  /**
+   * The name of the script run by this process
+   */
+  @autoserialize
+  scriptName: string;
+
+  /**
+   * The status of this process
+   */
+  @autoserialize
+  processStatus: ProcessStatus;
+
+  /**
+   * The parameters for this process
+   */
+  @autoserialize
+  parameters: ProcessParameter[];
+
+  /**
+   * The {@link HALLink}s for this Process
+   */
+  @deserialize
+  _links: {
+    self: HALLink,
+    script: HALLink,
+    output: HALLink,
+    files: HALLink
+  };
+}
diff --git a/src/app/process-page/processes/process.resource-type.ts b/src/app/process-page/processes/process.resource-type.ts
new file mode 100644
index 0000000000..47617ed4f4
--- /dev/null
+++ b/src/app/process-page/processes/process.resource-type.ts
@@ -0,0 +1,9 @@
+/**
+ * The resource type for Process
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+import { ResourceType } from '../../core/shared/resource-type';
+
+export const PROCESS = new ResourceType('process');
diff --git a/src/app/process-page/scripts/script-data.service.ts b/src/app/process-page/scripts/script-data.service.ts
new file mode 100644
index 0000000000..f097a3e19b
--- /dev/null
+++ b/src/app/process-page/scripts/script-data.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { DataService } from '../../core/data/data.service';
+import { RequestService } from '../../core/data/request.service';
+import { RemoteDataBuildService } from '../../core/cache/builders/remote-data-build.service';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../../core/core.reducers';
+import { ObjectCacheService } from '../../core/cache/object-cache.service';
+import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { DefaultChangeAnalyzer } from '../../core/data/default-change-analyzer.service';
+import { Script } from './script.model';
+
+@Injectable()
+export class ScriptDataService extends DataService<Script> {
+  protected linkPath = 'scripts';
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected store: Store<CoreState>,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DefaultChangeAnalyzer<Script>) {
+    super();
+  }
+}
diff --git a/src/app/process-page/scripts/script-parameter-type.model.ts b/src/app/process-page/scripts/script-parameter-type.model.ts
new file mode 100644
index 0000000000..de0bf8bc04
--- /dev/null
+++ b/src/app/process-page/scripts/script-parameter-type.model.ts
@@ -0,0 +1,10 @@
+/**
+ * List of parameter types used for scripts
+ */
+export enum ScriptParameterType {
+  STRING = 'string',
+  DATE = 'date',
+  BOOLEAN = 'boolean',
+  FILE = 'file',
+  OUTPUT = 'output'
+}
diff --git a/src/app/process-page/scripts/script-parameter.model.ts b/src/app/process-page/scripts/script-parameter.model.ts
new file mode 100644
index 0000000000..d6debe7dd7
--- /dev/null
+++ b/src/app/process-page/scripts/script-parameter.model.ts
@@ -0,0 +1,31 @@
+import { ScriptParameterType } from './script-parameter-type.model';
+
+/**
+ * A parameter that can be used when running a script
+ */
+export class ScriptParameter {
+  /**
+   * The name of the parameter Eg. '-d', '-f' etc.
+   */
+  name: string;
+
+  /**
+   * Short description about the purpose of this parameter
+   */
+  description: string;
+
+  /**
+   * The type of parameter
+   */
+  type: ScriptParameterType;
+
+  /**
+   * The long name for this parameter Eg. '--directory', '--force' etc.
+   */
+  nameLong: string;
+
+  /**
+   * Whether or not this parameter is mandatory
+   */
+  mandatory: boolean;
+}
diff --git a/src/app/process-page/scripts/script.model.ts b/src/app/process-page/scripts/script.model.ts
new file mode 100644
index 0000000000..1cd3136c88
--- /dev/null
+++ b/src/app/process-page/scripts/script.model.ts
@@ -0,0 +1,52 @@
+import { CacheableObject } from '../../core/cache/object-cache.reducer';
+import { HALLink } from '../../core/shared/hal-link.model';
+import { autoserialize, deserialize } from 'cerialize';
+import { SCRIPT } from './script.resource-type';
+import { ScriptParameter } from './script-parameter.model';
+import { typedObject } from '../../core/cache/builders/build-decorators';
+import { excludeFromEquals } from '../../core/utilities/equals.decorators';
+import { ResourceType } from '../../core/shared/resource-type';
+
+@typedObject
+export class Script implements CacheableObject {
+  static type = SCRIPT;
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  /**
+   * The identifier of this script
+   */
+  @autoserialize
+  id: string;
+
+  /**
+   * The name of this script
+   */
+  @autoserialize
+  name: string;
+
+  /**
+   * A short description of this script
+   */
+  @autoserialize
+  description: string;
+
+  /**
+   * The available parameters for this script
+   */
+  @autoserialize
+  parameters: ScriptParameter[];
+
+  /**
+   * The {@link HALLink}s for this Script
+   */
+  @deserialize
+  _links: {
+    self: HALLink,
+  };
+}
diff --git a/src/app/process-page/scripts/script.resource-type.ts b/src/app/process-page/scripts/script.resource-type.ts
new file mode 100644
index 0000000000..2b8c106191
--- /dev/null
+++ b/src/app/process-page/scripts/script.resource-type.ts
@@ -0,0 +1,9 @@
+/**
+ * The resource type for Script
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+import { ResourceType } from '../../core/shared/resource-type';
+
+export const SCRIPT = new ResourceType('script');

From 7c9c45b7cb9628a1a1bbfd6bac43d7a79557d08d Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Fri, 20 Mar 2020 15:56:35 +0100
Subject: [PATCH 22/84] added script parameters & route updates

---
 .../new/new-process.component.html            |  6 +-
 .../process-page/new/new-process.component.ts | 10 ++-
 .../parameter-select.component.html           | 14 +++++
 .../parameter-select.component.scss           |  0
 .../parameter-select.component.spec.ts        | 25 ++++++++
 .../parameter-select.component.ts             | 39 ++++++++++++
 .../string-value-input.component.html         |  1 +
 .../string-value-input.component.scss         |  0
 .../string-value-input.component.spec.ts      | 25 ++++++++
 .../string-value-input.component.ts           | 15 +++++
 .../process-parameters.component.html         |  8 +++
 .../process-parameters.component.scss         |  0
 .../process-parameters.component.spec.ts      | 25 ++++++++
 .../process-parameters.component.ts           | 35 +++++++++++
 .../script-help/script-help.component.html    |  2 +-
 .../scripts-select.component.html             | 26 ++++++--
 .../scripts-select.component.ts               | 63 ++++++++++++++-----
 src/app/process-page/process-page.module.ts   |  8 ++-
 18 files changed, 277 insertions(+), 25 deletions(-)
 create mode 100644 src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
 create mode 100644 src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
 create mode 100644 src/app/process-page/new/process-parameters/process-parameters.component.html
 create mode 100644 src/app/process-page/new/process-parameters/process-parameters.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/process-parameters.component.ts

diff --git a/src/app/process-page/new/new-process.component.html b/src/app/process-page/new/new-process.component.html
index 9e050c37b5..ca3e18546d 100644
--- a/src/app/process-page/new/new-process.component.html
+++ b/src/app/process-page/new/new-process.component.html
@@ -1,10 +1,14 @@
 <div class="container">
     <div class="row">
         <div class="col-12 col-md-6">
-            <ds-scripts-select (select)="selectScript($event)"></ds-scripts-select>
+            <form>
+                <ds-scripts-select (select)="selectScript($event)"></ds-scripts-select>
+                <ds-process-parameters [script]="selectedScript"></ds-process-parameters>
+            </form>
         </div>
         <div class="col-12 col-md-6">
             <ds-script-help [script]="selectedScript"></ds-script-help>
         </div>
     </div>
+
 </div>
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
index c5fc786442..57da770dd9 100644
--- a/src/app/process-page/new/new-process.component.ts
+++ b/src/app/process-page/new/new-process.component.ts
@@ -1,13 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Script } from '../scripts/script.model';
+import { Process } from '../processes/process.model';
 
 @Component({
   selector: 'ds-new-process',
   templateUrl: './new-process.component.html',
   styleUrls: ['./new-process.component.scss'],
 })
-export class NewProcessComponent {
+export class NewProcessComponent implements OnInit {
   public selectedScript: Script;
+  public process: Process;
+
+  ngOnInit(): void {
+    this.process = new Process();
+  }
 
   selectScript(script: Script) {
     this.selectedScript = script;
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
new file mode 100644
index 0000000000..4d72645772
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
@@ -0,0 +1,14 @@
+<div class="form-group">
+    <select required id="process-parameters"
+            class="form-control"
+            name="script"
+            [(ngModel)]="selectedParameter"
+            #param="ngModel">
+        <option [ngValue]="undefined">Add a parameter...</option>
+        <option *ngFor="let param of parameters">
+            {{param.nameLong || param.name}}
+        </option>
+    </select>
+    <ds-string-input></ds-string-input>
+    <button><span class="fas fa-trash"></span></button>
+</div>
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts
new file mode 100644
index 0000000000..0a435f6e27
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParameterSelectComponent } from './parameter-select.component';
+
+describe('ParameterSelectComponent', () => {
+  let component: ParameterSelectComponent;
+  let fixture: ComponentFixture<ParameterSelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ParameterSelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParameterSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
new file mode 100644
index 0000000000..3212fb4310
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ProcessParameter } from '../../../processes/process-parameter.model';
+import { ScriptParameter } from '../../../scripts/script-parameter.model';
+import { hasNoValue } from '../../../../shared/empty.util';
+
+@Component({
+  selector: 'ds-parameter-select',
+  templateUrl: './parameter-select.component.html',
+  styleUrls: ['./parameter-select.component.scss']
+})
+export class ParameterSelectComponent implements OnInit {
+  @Input() parameterValue: ProcessParameter;
+  @Input() parameters: ScriptParameter[];
+  @Output() changeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
+
+  ngOnInit(): void {
+    if (hasNoValue(this.parameterValue)) {
+      this.parameterValue = new ProcessParameter();
+    }
+  }
+
+  get selectedParameter(): string {
+    return this.parameterValue ? this.parameterValue.name : undefined;
+  }
+
+  set selectedParameter(value: string) {
+    this.parameterValue.name = value;
+    this.changeParameter.emit(this.parameterValue);
+  }
+
+  get selectedParameterValue(): any {
+    return this.parameterValue ? this.parameterValue.value : undefined;
+  }
+
+  set selectedParameterValue(value: any) {
+    this.parameterValue.value = value;
+    this.changeParameter.emit(this.parameterValue);
+  }
+}
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
new file mode 100644
index 0000000000..e572624f22
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
@@ -0,0 +1 @@
+<input type="input" class="form-control" id="string-value-input">
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
new file mode 100644
index 0000000000..11af3a4b23
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StringValueInputComponent } from './string-value-input.component';
+
+describe('StringValueInputComponent', () => {
+  let component: StringValueInputComponent;
+  let fixture: ComponentFixture<StringValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StringValueInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StringValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
new file mode 100644
index 0000000000..5c88523d8d
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ds-string-value-input',
+  templateUrl: './string-value-input.component.html',
+  styleUrls: ['./string-value-input.component.scss']
+})
+export class StringValueInputComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.html b/src/app/process-page/new/process-parameters/process-parameters.component.html
new file mode 100644
index 0000000000..7ec2f25a6b
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.html
@@ -0,0 +1,8 @@
+<div class="form-group" *ngIf="script">
+    <label>Parameters</label>
+    <ds-parameter-select
+            *ngFor="let value of parameterValues; let i = index;"
+            [parameters]="script.parameters"
+            [parameterValue]="value"
+            (changeParameter)="updateParameter($event, i)"></ds-parameter-select>
+</div>
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.scss b/src/app/process-page/new/process-parameters/process-parameters.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts b/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
new file mode 100644
index 0000000000..0eb4edb864
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProcessParametersComponent } from './process-parameters.component';
+
+describe('ProcessParametersComponent', () => {
+  let component: ProcessParametersComponent;
+  let fixture: ComponentFixture<ProcessParametersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProcessParametersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessParametersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.ts b/src/app/process-page/new/process-parameters/process-parameters.component.ts
new file mode 100644
index 0000000000..4979307f4a
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.ts
@@ -0,0 +1,35 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Script } from '../../scripts/script.model';
+import { ProcessParameter } from '../../processes/process-parameter.model';
+
+@Component({
+  selector: 'ds-process-parameters',
+  templateUrl: './process-parameters.component.html',
+  styleUrls: ['./process-parameters.component.scss']
+})
+export class ProcessParametersComponent implements OnChanges {
+  @Input() script: Script;
+  parameterValues: ProcessParameter[];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.script) {
+      this.initParameters()
+    }
+  }
+
+  initParameters() {
+    this.parameterValues = [];
+    this.addParameter();
+  }
+
+  updateParameter(processParameter: ProcessParameter, index: number) {
+    this.parameterValues[index] = processParameter;
+    if (index === this.parameterValues.length - 1) {
+      this.addParameter();
+    }
+  }
+
+  addParameter() {
+    this.parameterValues = [...this.parameterValues, new ProcessParameter()];
+  }
+}
diff --git a/src/app/process-page/new/script-help/script-help.component.html b/src/app/process-page/new/script-help/script-help.component.html
index 937f7c007f..a12fafdf4c 100644
--- a/src/app/process-page/new/script-help/script-help.component.html
+++ b/src/app/process-page/new/script-help/script-help.component.html
@@ -3,7 +3,7 @@
 
 <table class="table-border less mt-3">
     <tr *ngFor="let param of script?.parameters">
-        <td>{{param.name}} {{param.nameLong}}{{param.type !== 'boolean' ? '<<' + param.type + '>>' : ''}}</td>
+        <td>{{param.name}} {{param.nameLong}} {{param.type !== 'boolean' ? '<' + param.type + '>' : ''}}</td>
         <td>{{param.description}}</td>
     </tr>
 </table>
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.html b/src/app/process-page/new/scripts-select/scripts-select.component.html
index 69b1830941..781566aec8 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.html
@@ -1,6 +1,20 @@
-<select [(ngModel)]="selectedScript">
-  <option selected>Choose a script...</option>
-  <option *ngFor="let script of scripts | async" [ngValue]="script">
-    {{script.name}}
-  </option>
-</select>
+<div class="form-group" *ngIf="scripts$ | async">
+    <label for="process-script">Script</label>
+    <select required id="process-script"
+            class="form-control"
+            name="script"
+            [(ngModel)]="selectedScript"
+            #script="ngModel">
+        <option [ngValue]="undefined">Choose a script...</option>
+        <option *ngFor="let script of scripts$ | async" [ngValue]="script.id">
+            {{script.name}}
+        </option>
+    </select>
+
+    <div *ngIf="script.invalid && (script.dirty || script.touched)"
+         class="alert alert-danger">
+        <div *ngIf="script.errors.required">
+            Script is required.
+        </div>
+    </div>
+</div>
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.ts b/src/app/process-page/new/scripts-select/scripts-select.component.ts
index 70b13c2e62..75f9b6d5ed 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.ts
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.ts
@@ -1,41 +1,76 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { ScriptDataService } from '../../scripts/script-data.service';
 import { Script } from '../../scripts/script.model';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
 import { PaginatedList } from '../../../core/data/paginated-list';
-import { map } from 'rxjs/operators';
+import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { hasValue, hasValueOperator } from '../../../shared/empty.util';
+
+const SCRIPT_QUERY_PARAMETER = 'script';
 
 @Component({
   selector: 'ds-scripts-select',
   templateUrl: './scripts-select.component.html',
   styleUrls: ['./scripts-select.component.scss']
 })
-export class ScriptsSelectComponent implements OnInit {
+export class ScriptsSelectComponent implements OnInit, OnDestroy {
   @Output() select: EventEmitter<Script> = new EventEmitter<Script>();
-  scripts: Observable<Script[]>;
-  private _selectedScript;
+  scripts$: Observable<Script[]>;
+  private _selectedScript: Script;
+  private routeSub: Subscription;
 
   constructor(
-    private scriptService: ScriptDataService
+    private scriptService: ScriptDataService,
+    private router: Router,
+    private route: ActivatedRoute,
   ) {
   }
 
   ngOnInit() {
-    this.scripts = this.scriptService.findAll({ elementsPerPage: Number.MAX_SAFE_INTEGER })
+    this.scripts$ = this.scriptService.findAll({ elementsPerPage: Number.MAX_SAFE_INTEGER })
       .pipe(
         getSucceededRemoteData(),
         getRemoteDataPayload(),
         map((paginatedList: PaginatedList<Script>) => paginatedList.page)
-      )
+      );
+
+    this.routeSub = this.route.queryParams
+      .pipe(
+        map((params: Params) => params[SCRIPT_QUERY_PARAMETER]),
+        distinctUntilChanged(),
+        switchMap((id: string) =>
+          this.scripts$
+            .pipe(
+              take(1),
+              map((scripts) =>
+                scripts.find((script) => script.id === id)
+              )
+            )
+        )
+      ).subscribe((script: Script) => {
+        this._selectedScript = script;
+        this.select.emit(script);
+      });
   }
 
-  get selectedScript() {
-    return this._selectedScript;
+  get selectedScript(): string {
+    return this._selectedScript ? this._selectedScript.id : undefined;
   }
 
-  set selectedScript(value) {
-    this._selectedScript = value;
-    this.select.emit(value);
+  set selectedScript(value: string) {
+    this.router.navigate([],
+      {
+        queryParams: { [SCRIPT_QUERY_PARAMETER]: value },
+        queryParamsHandling: 'merge'
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (hasValue(this.routeSub)) {
+      this.routeSub.unsubscribe();
+    }
   }
 }
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index 34252703dc..3fb3afce96 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -6,6 +6,9 @@ import { ScriptDataService } from './scripts/script-data.service';
 import { NewProcessComponent } from './new/new-process.component';
 import { ScriptsSelectComponent } from './new/scripts-select/scripts-select.component';
 import { ScriptHelpComponent } from './new/script-help/script-help.component';
+import { ParameterSelectComponent } from './new/process-parameters/parameter-select/parameter-select.component';
+import { ProcessParametersComponent } from './new/process-parameters/process-parameters.component';
+import { StringValueInputComponent } from './new/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
 
 @NgModule({
   imports: [
@@ -15,7 +18,10 @@ import { ScriptHelpComponent } from './new/script-help/script-help.component';
   declarations: [
     NewProcessComponent,
     ScriptsSelectComponent,
-    ScriptHelpComponent
+    ScriptHelpComponent,
+    ParameterSelectComponent,
+    ProcessParametersComponent,
+    StringValueInputComponent,
   ],
   entryComponents: [
   ],

From 68e2a08af28c337170e3c927381dca3ad41e03a9 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Mon, 23 Mar 2020 10:49:45 +0100
Subject: [PATCH 23/84] added switch for parameter types

---
 .../parameter-select.component.html           | 28 ++++++++++---------
 .../parameter-select.component.ts             |  6 ++++
 .../parameter-value-input.component.html      |  3 ++
 .../parameter-value-input.component.scss      |  0
 .../parameter-value-input.component.spec.ts   | 25 +++++++++++++++++
 .../parameter-value-input.component.ts        | 13 +++++++++
 .../process-parameters.component.html         |  4 ++-
 .../process-parameters.component.ts           |  4 +++
 src/app/process-page/process-page.module.ts   |  2 ++
 .../scripts/script-parameter-type.model.ts    |  6 ++--
 10 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts

diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
index 4d72645772..d530996569 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
@@ -1,14 +1,16 @@
-<div class="form-group">
-    <select required id="process-parameters"
-            class="form-control"
-            name="script"
-            [(ngModel)]="selectedParameter"
-            #param="ngModel">
-        <option [ngValue]="undefined">Add a parameter...</option>
-        <option *ngFor="let param of parameters">
-            {{param.nameLong || param.name}}
-        </option>
-    </select>
-    <ds-string-input></ds-string-input>
-    <button><span class="fas fa-trash"></span></button>
+<div class="form-row">
+        <select required id="process-parameters"
+                class="form-control col"
+                name="script"
+                [(ngModel)]="selectedParameter"
+                #param="ngModel">
+            <option [ngValue]="undefined">Add a parameter...</option>
+            <option *ngFor="let param of parameters" [ngValue]="param.name">
+                {{param.nameLong || param.name}}
+            </option>
+        </select>
+        <ds-parameter-value-input [parameter]="selectedScriptParameter" class="d-block col"></ds-parameter-value-input>
+        <button *ngIf="removable" class="btn btn-light col-1" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
+        <span *ngIf="!removable" class="col-1"></span>
 </div>
+
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
index 3212fb4310..42ae16ca1c 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
@@ -11,6 +11,8 @@ import { hasNoValue } from '../../../../shared/empty.util';
 export class ParameterSelectComponent implements OnInit {
   @Input() parameterValue: ProcessParameter;
   @Input() parameters: ScriptParameter[];
+  @Input() removable: boolean;
+  @Output() removeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
   @Output() changeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
 
   ngOnInit(): void {
@@ -19,6 +21,10 @@ export class ParameterSelectComponent implements OnInit {
     }
   }
 
+  get selectedScriptParameter(): ScriptParameter {
+    return this.parameters.find((parameter: ScriptParameter) => parameter.name === this.selectedParameter);
+  }
+
   get selectedParameter(): string {
     return this.parameterValue ? this.parameterValue.name : undefined;
   }
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
new file mode 100644
index 0000000000..c76976fc33
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
@@ -0,0 +1,3 @@
+<div [ngSwitch]="parameter?.type">
+  <ds-string-value-input *ngSwitchCase="parameterTypes.STRING"></ds-string-value-input>
+</div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.scss b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
new file mode 100644
index 0000000000..91045ea0f4
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParameterValueInputComponent } from './parameter-value-input.component';
+
+describe('ParameterValueInputComponent', () => {
+  let component: ParameterValueInputComponent;
+  let fixture: ComponentFixture<ParameterValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ParameterValueInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParameterValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
new file mode 100644
index 0000000000..17c627b371
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
+import { ScriptParameter } from '../../../scripts/script-parameter.model';
+
+@Component({
+  selector: 'ds-parameter-value-input',
+  templateUrl: './parameter-value-input.component.html',
+  styleUrls: ['./parameter-value-input.component.scss']
+})
+export class ParameterValueInputComponent {
+  @Input() parameter: ScriptParameter;
+  parameterTypes = ScriptParameterType;
+}
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.html b/src/app/process-page/new/process-parameters/process-parameters.component.html
index 7ec2f25a6b..98c364cbee 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.html
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.html
@@ -1,8 +1,10 @@
 <div class="form-group" *ngIf="script">
     <label>Parameters</label>
     <ds-parameter-select
-            *ngFor="let value of parameterValues; let i = index;"
+            *ngFor="let value of parameterValues; let i = index; let last = last"
             [parameters]="script.parameters"
             [parameterValue]="value"
+            [removable]="!last"
+            (removeParameter)="removeParameter(i)"
             (changeParameter)="updateParameter($event, i)"></ds-parameter-select>
 </div>
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.ts b/src/app/process-page/new/process-parameters/process-parameters.component.ts
index 4979307f4a..2fb9f1c636 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.ts
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.ts
@@ -29,6 +29,10 @@ export class ProcessParametersComponent implements OnChanges {
     }
   }
 
+  removeParameter(index: number) {
+    this.parameterValues = this.parameterValues.filter((value, i) => i !== index);
+  }
+
   addParameter() {
     this.parameterValues = [...this.parameterValues, new ProcessParameter()];
   }
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index 3fb3afce96..bf231483b1 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -9,6 +9,7 @@ import { ScriptHelpComponent } from './new/script-help/script-help.component';
 import { ParameterSelectComponent } from './new/process-parameters/parameter-select/parameter-select.component';
 import { ProcessParametersComponent } from './new/process-parameters/process-parameters.component';
 import { StringValueInputComponent } from './new/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
+import { ParameterValueInputComponent } from './new/process-parameters/parameter-value-input/parameter-value-input.component';
 
 @NgModule({
   imports: [
@@ -22,6 +23,7 @@ import { StringValueInputComponent } from './new/process-parameters/parameter-va
     ParameterSelectComponent,
     ProcessParametersComponent,
     StringValueInputComponent,
+    ParameterValueInputComponent,
   ],
   entryComponents: [
   ],
diff --git a/src/app/process-page/scripts/script-parameter-type.model.ts b/src/app/process-page/scripts/script-parameter-type.model.ts
index de0bf8bc04..2b9fd358bf 100644
--- a/src/app/process-page/scripts/script-parameter-type.model.ts
+++ b/src/app/process-page/scripts/script-parameter-type.model.ts
@@ -2,9 +2,9 @@
  * List of parameter types used for scripts
  */
 export enum ScriptParameterType {
-  STRING = 'string',
+  STRING = 'String',
   DATE = 'date',
   BOOLEAN = 'boolean',
-  FILE = 'file',
-  OUTPUT = 'output'
+  FILE = 'InputStream',
+  OUTPUT = 'OutputStream'
 }

From ee649debfb74126c4b74e6b4404cb5bd6f358b39 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Mon, 23 Mar 2020 11:19:27 +0100
Subject: [PATCH 24/84] moved process data services

---
 src/app/core/core.module.ts                    | 11 +++++------
 .../data}/processes/process-data.service.ts    | 18 +++++++++---------
 .../data/processes}/script-data.service.ts     | 18 +++++++++---------
 .../scripts-select/scripts-select.component.ts |  2 +-
 src/app/process-page/process-page.module.ts    | 11 +++--------
 5 files changed, 27 insertions(+), 33 deletions(-)
 rename src/app/{process-page => core/data}/processes/process-data.service.ts (50%)
 rename src/app/{process-page/scripts => core/data/processes}/script-data.service.ts (50%)

diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 4d04a79d73..99931d8c6c 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
-
 import { DynamicFormLayoutService, DynamicFormService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
@@ -14,11 +13,7 @@ import { FormService } from '../shared/form/form.service';
 import { HostWindowService } from '../shared/host-window.service';
 import { MenuService } from '../shared/menu/menu.service';
 import { EndpointMockingRestService } from '../shared/mocks/dspace-rest-v2/endpoint-mocking-rest.service';
-import {
-  MOCK_RESPONSE_MAP,
-  MockResponseMap,
-  mockResponseMap
-} from '../shared/mocks/dspace-rest-v2/mocks/mock-response-map';
+import { MOCK_RESPONSE_MAP, MockResponseMap, mockResponseMap } from '../shared/mocks/dspace-rest-v2/mocks/mock-response-map';
 import { NotificationsService } from '../shared/notifications/notifications.service';
 import { SelectableListService } from '../shared/object-list/selectable-list/selectable-list.service';
 import { ObjectSelectService } from '../shared/object-select/object-select.service';
@@ -141,6 +136,8 @@ import { Version } from './shared/version.model';
 import { VersionHistory } from './shared/version-history.model';
 import { Script } from '../process-page/scripts/script.model';
 import { Process } from '../process-page/processes/process.model';
+import { ProcessDataService } from './data/processes/process-data.service';
+import { ScriptDataService } from './data/processes/script-data.service';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -261,6 +258,8 @@ const PROVIDERS = [
   VersionHistoryDataService,
   LicenseDataService,
   ItemTypeDataService,
+  ProcessDataService,
+  ScriptDataService,
   // register AuthInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,
diff --git a/src/app/process-page/processes/process-data.service.ts b/src/app/core/data/processes/process-data.service.ts
similarity index 50%
rename from src/app/process-page/processes/process-data.service.ts
rename to src/app/core/data/processes/process-data.service.ts
index 2e38266425..a2e34dd699 100644
--- a/src/app/process-page/processes/process-data.service.ts
+++ b/src/app/core/data/processes/process-data.service.ts
@@ -1,15 +1,15 @@
 import { Injectable } from '@angular/core';
-import { DataService } from '../../core/data/data.service';
-import { RequestService } from '../../core/data/request.service';
-import { RemoteDataBuildService } from '../../core/cache/builders/remote-data-build.service';
+import { DataService } from '../data.service';
+import { RequestService } from '../request.service';
+import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import { Store } from '@ngrx/store';
-import { CoreState } from '../../core/core.reducers';
-import { ObjectCacheService } from '../../core/cache/object-cache.service';
-import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { CoreState } from '../../core.reducers';
+import { ObjectCacheService } from '../../cache/object-cache.service';
+import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { HttpClient } from '@angular/common/http';
-import { DefaultChangeAnalyzer } from '../../core/data/default-change-analyzer.service';
-import { Process } from './process.model';
+import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
+import { Process } from '../../../process-page/processes/process.model';
 
 @Injectable()
 export class ProcessDataService extends DataService<Process> {
diff --git a/src/app/process-page/scripts/script-data.service.ts b/src/app/core/data/processes/script-data.service.ts
similarity index 50%
rename from src/app/process-page/scripts/script-data.service.ts
rename to src/app/core/data/processes/script-data.service.ts
index f097a3e19b..66f81baffe 100644
--- a/src/app/process-page/scripts/script-data.service.ts
+++ b/src/app/core/data/processes/script-data.service.ts
@@ -1,15 +1,15 @@
 import { Injectable } from '@angular/core';
-import { DataService } from '../../core/data/data.service';
-import { RequestService } from '../../core/data/request.service';
-import { RemoteDataBuildService } from '../../core/cache/builders/remote-data-build.service';
+import { DataService } from '../data.service';
+import { RequestService } from '../request.service';
+import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import { Store } from '@ngrx/store';
-import { CoreState } from '../../core/core.reducers';
-import { ObjectCacheService } from '../../core/cache/object-cache.service';
-import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { CoreState } from '../../core.reducers';
+import { ObjectCacheService } from '../../cache/object-cache.service';
+import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { HttpClient } from '@angular/common/http';
-import { DefaultChangeAnalyzer } from '../../core/data/default-change-analyzer.service';
-import { Script } from './script.model';
+import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
+import { Script } from '../../../process-page/scripts/script.model';
 
 @Injectable()
 export class ScriptDataService extends DataService<Script> {
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.ts b/src/app/process-page/new/scripts-select/scripts-select.component.ts
index 75f9b6d5ed..c0daa94fb0 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.ts
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
-import { ScriptDataService } from '../../scripts/script-data.service';
+import { ScriptDataService } from '../../../core/data/processes/script-data.service';
 import { Script } from '../../scripts/script.model';
 import { Observable, Subscription } from 'rxjs';
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index bf231483b1..6b2d88d71d 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { ProcessPageRoutingModule } from './process-page-routing.module';
-import { ProcessDataService } from './processes/process-data.service';
-import { ScriptDataService } from './scripts/script-data.service';
+import { ProcessDataService } from '../core/data/processes/process-data.service';
+import { ScriptDataService } from '../core/data/processes/script-data.service';
 import { NewProcessComponent } from './new/new-process.component';
 import { ScriptsSelectComponent } from './new/scripts-select/scripts-select.component';
 import { ScriptHelpComponent } from './new/script-help/script-help.component';
@@ -25,12 +25,7 @@ import { ParameterValueInputComponent } from './new/process-parameters/parameter
     StringValueInputComponent,
     ParameterValueInputComponent,
   ],
-  entryComponents: [
-  ],
-  providers: [
-    ProcessDataService,
-    ScriptDataService
-  ]
+  entryComponents: []
 })
 
 export class ProcessPageModule {

From 3e4704af0dc959a16d9639af12ec7c13172a2ba4 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Mon, 23 Mar 2020 16:19:37 +0100
Subject: [PATCH 25/84] working on upload functionality

---
 package.json                                  |  2 +-
 .../parameter-select.component.html           |  2 +-
 .../file-value-input.component.html           |  6 ++++
 .../file-value-input.component.scss           |  0
 .../file-value-input.component.spec.ts        | 25 ++++++++++++++
 .../file-value-input.component.ts             | 33 +++++++++++++++++++
 .../parameter-value-input.component.html      |  1 +
 src/app/process-page/process-page.module.ts   |  4 +--
 src/app/shared/uploader/uploader.component.ts |  3 ++
 yarn.lock                                     | 10 +++---
 10 files changed, 78 insertions(+), 8 deletions(-)
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts

diff --git a/package.json b/package.json
index 0f3fa03c1e..34bb976b9e 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,7 @@
     "moment-range": "^4.0.2",
     "morgan": "^1.9.1",
     "ng-mocks": "^8.1.0",
-    "ng2-file-upload": "1.2.1",
+    "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.2",
     "ngx-bootstrap": "^5.3.2",
     "ngx-infinite-scroll": "6.0.1",
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
index d530996569..63aa5afaf9 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
@@ -1,4 +1,4 @@
-<div class="form-row">
+<div class="form-row mb-2">
         <select required id="process-parameters"
                 class="form-control col"
                 name="script"
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
new file mode 100644
index 0000000000..cb211e607b
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -0,0 +1,6 @@
+<ds-uploader dropMsg="process.parameter.file-upload"
+              dropOverDocumentMsg="process.parameter.file-upload"
+              [enableDragOverDocument]="true"
+              [uploadFilesOptions]="uploadFilesOptions"
+              (onCompleteItem)="onCompleteItem()"
+              (onUploadError)="onUploadError()"></ds-uploader>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
new file mode 100644
index 0000000000..b7de5e5a23
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileValueInputComponent } from './file-value-input.component';
+
+describe('FileValueInputComponent', () => {
+  let component: FileValueInputComponent;
+  let fixture: ComponentFixture<FileValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FileValueInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
new file mode 100644
index 0000000000..d0fa9793d3
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { FileUploaderOptions } from 'ng2-file-upload';
+import { UploaderOptions } from '../../../../../shared/uploader/uploader-options.model';
+
+@Component({
+  selector: 'ds-file-value-input',
+  templateUrl: './file-value-input.component.html',
+  styleUrls: ['./file-value-input.component.scss']
+})
+export class FileValueInputComponent implements OnInit {
+  uploadFilesOptions: FileUploaderOptions;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    this.uploadFilesOptions = new UploaderOptions();
+    this.uploadFilesOptions.autoUpload = false;
+    this.uploadFilesOptions.url = 'bladibla';
+    this.uploadFilesOptions.authToken = 'bladibla';
+    this.uploadFilesOptions.disableMultipart = true;
+    this.uploadFilesOptions.formatDataFunctionIsAsync = false;
+    this.uploadFilesOptions.formatDataFunction((t) => console.log(t));
+  }
+
+  onCompleteItem() {
+
+  }
+
+  onUploadError() {
+
+  }
+}
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
index c76976fc33..22d60c8f7f 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
@@ -1,3 +1,4 @@
 <div [ngSwitch]="parameter?.type">
   <ds-string-value-input *ngSwitchCase="parameterTypes.STRING"></ds-string-value-input>
+  <ds-file-value-input *ngSwitchCase="parameterTypes.FILE"></ds-file-value-input>
 </div>
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index 6b2d88d71d..a20a111f9b 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -1,8 +1,6 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { ProcessPageRoutingModule } from './process-page-routing.module';
-import { ProcessDataService } from '../core/data/processes/process-data.service';
-import { ScriptDataService } from '../core/data/processes/script-data.service';
 import { NewProcessComponent } from './new/new-process.component';
 import { ScriptsSelectComponent } from './new/scripts-select/scripts-select.component';
 import { ScriptHelpComponent } from './new/script-help/script-help.component';
@@ -10,6 +8,7 @@ import { ParameterSelectComponent } from './new/process-parameters/parameter-sel
 import { ProcessParametersComponent } from './new/process-parameters/process-parameters.component';
 import { StringValueInputComponent } from './new/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
 import { ParameterValueInputComponent } from './new/process-parameters/parameter-value-input/parameter-value-input.component';
+import { FileValueInputComponent } from './new/process-parameters/parameter-value-input/file-value-input/file-value-input.component';
 
 @NgModule({
   imports: [
@@ -24,6 +23,7 @@ import { ParameterValueInputComponent } from './new/process-parameters/parameter
     ProcessParametersComponent,
     StringValueInputComponent,
     ParameterValueInputComponent,
+    FileValueInputComponent,
   ],
   entryComponents: []
 })
diff --git a/src/app/shared/uploader/uploader.component.ts b/src/app/shared/uploader/uploader.component.ts
index 935d196d08..26b094a584 100644
--- a/src/app/shared/uploader/uploader.component.ts
+++ b/src/app/shared/uploader/uploader.component.ts
@@ -113,12 +113,15 @@ export class UploaderComponent {
   ngAfterViewInit() {
     // Maybe to remove: needed to avoid CORS issue with our temp upload server
     this.uploader.onAfterAddingFile = ((item) => {
+      console.log(item);
+
       item.withCredentials = false;
     });
     if (isUndefined(this.onBeforeUpload)) {
       this.onBeforeUpload = () => {return};
     }
     this.uploader.onBeforeUploadItem = (item) => {
+
       if (item.url !== this.uploader.options.url) {
         item.url = this.uploader.options.url;
       }
diff --git a/yarn.lock b/yarn.lock
index 7035bb60c4..4df0bac826 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8646,10 +8646,12 @@ ng-mocks@^8.1.0:
   resolved "https://registry.yarnpkg.com/ng-mocks/-/ng-mocks-8.1.0.tgz#d00a5e53ae53587f35c68147826590fab71a1658"
   integrity sha512-/314nyU6UrONCUKfvFRuJPLpNBxqocwJmQBlPy4he5Vueu6gObXjy+KLUlbbENuA7zTeBjp//RA6w/Fa1yQ4Fw==
 
-ng2-file-upload@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/ng2-file-upload/-/ng2-file-upload-1.2.1.tgz#5563c5dfd6f43fbfbe815c206e343464a0a6a197"
-  integrity sha1-VWPF39b0P7++gVwgbjQ0ZKCmoZc=
+ng2-file-upload@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ng2-file-upload/-/ng2-file-upload-1.4.0.tgz#8dea28d573234c52af474ad2a4001b335271e5c4"
+  integrity sha512-3J/KPU/tyh/ad6TFeUbrxX+SihUj0iOEt2Zsg4EX7mB3GFiQscXOfcUOxCkBtPWWWaqt3azrYbVGzsYa3/7NzQ==
+  dependencies:
+    tslib "^1.9.0"
 
 ng2-nouislider@^1.8.2:
   version "1.8.2"

From e38aec831f1a9a257fe5ab8c60c292ecabd7ea15 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 24 Mar 2020 18:05:22 +0100
Subject: [PATCH 26/84] fixed file upload, styling, boolean/date/output inputs

---
 resources/i18n/en.json5                       | 18 ++++++++++
 .../data/processes/script-data.service.ts     | 26 ++++++++++++++-
 src/app/core/data/request.effects.ts          | 13 +++-----
 src/app/core/data/request.models.ts           | 14 ++++++++
 .../dspace-rest-v2/dspace-rest-v2.service.ts  |  4 +--
 .../new/new-process.component.html            | 10 +++---
 .../process-page/new/new-process.component.ts | 27 +++++++++++++--
 .../parameter-select.component.html           |  2 +-
 .../parameter-select.component.ts             |  1 +
 .../boolean-value-input.component.html        |  1 +
 .../boolean-value-input.component.scss        |  0
 .../boolean-value-input.component.spec.ts     | 25 ++++++++++++++
 .../boolean-value-input.component.ts          | 13 ++++++++
 .../date-value-input.component.html           |  7 ++++
 .../date-value-input.component.scss           |  0
 .../date-value-input.component.spec.ts        | 25 ++++++++++++++
 .../date-value-input.component.ts             | 16 +++++++++
 .../file-value-input.component.html           | 16 +++++----
 .../file-value-input.component.ts             | 33 +++++--------------
 .../parameter-value-input.component.html      |  7 ++--
 .../parameter-value-input.component.ts        |  3 +-
 .../string-value-input.component.html         |  8 ++++-
 .../string-value-input.component.ts           | 11 ++++---
 .../value-input.component.ts                  |  5 +++
 .../process-parameters.component.html         |  2 +-
 .../process-parameters.component.ts           |  5 ++-
 .../scripts-select.component.html             |  6 ++--
 src/app/process-page/process-page.module.ts   |  4 +++
 .../processes/process-parameter.model.ts      |  3 +-
 .../endpoint-mocking-rest.service.ts          |  4 +--
 src/app/shared/shared.module.ts               |  6 +++-
 src/app/shared/uploader/uploader.component.ts |  2 ++
 .../utils/file-value-accessor.directive.ts    | 24 ++++++++++++++
 .../shared/utils/require-file.validator.ts    | 19 +++++++++++
 34 files changed, 291 insertions(+), 69 deletions(-)
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
 create mode 100644 src/app/shared/utils/file-value-accessor.directive.ts
 create mode 100644 src/app/shared/utils/require-file.validator.ts

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 7b814fd5bc..385fefd156 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -1614,6 +1614,24 @@
 
 
 
+  "process.new.select-parameters": "Parameters",
+
+  "process.new.submit": "Submit",
+
+  "process.new.select-script": "Script",
+
+  "process.new.select-script.placeholder": "Choose a script...",
+
+  "process.new.select-script.required": "Script is required",
+
+  "process.new.parameter.file.upload-button": "Select file...",
+
+  "process.new.parameter.file.required": "Please select a file",
+
+  "process.new.parameter.string.required": "Parameter value is required",
+
+
+
   "publication.listelement.badge": "Publication",
 
   "publication.page.description": "Description",
diff --git a/src/app/core/data/processes/script-data.service.ts b/src/app/core/data/processes/script-data.service.ts
index 66f81baffe..9841ef3862 100644
--- a/src/app/core/data/processes/script-data.service.ts
+++ b/src/app/core/data/processes/script-data.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { DataService } from '../data.service';
-import { RequestService } from '../request.service';
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import { Store } from '@ngrx/store';
 import { CoreState } from '../../core.reducers';
@@ -10,6 +9,11 @@ import { NotificationsService } from '../../../shared/notifications/notification
 import { HttpClient } from '@angular/common/http';
 import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
 import { Script } from '../../../process-page/scripts/script.model';
+import { ProcessParameter } from '../../../process-page/processes/process-parameter.model';
+import { map } from 'rxjs/operators';
+import { URLCombiner } from '../../url-combiner/url-combiner';
+import { MultipartPostRequest, RestRequest } from '../request.models';
+import { RequestService } from '../request.service';
 
 @Injectable()
 export class ScriptDataService extends DataService<Script> {
@@ -26,4 +30,24 @@ export class ScriptDataService extends DataService<Script> {
     protected comparator: DefaultChangeAnalyzer<Script>) {
     super();
   }
+
+  public invocate(scriptName: string, parameters: ProcessParameter[], files: File[]) {
+    this.getBrowseEndpoint().pipe(
+      map((endpoint: string) => new URLCombiner(endpoint, scriptName, 'processes').toString()),
+      map((endpoint: string) => {
+        const body = this.getInvocationFormData(parameters, files);
+        return new MultipartPostRequest(this.requestService.generateRequestId(), endpoint, body)
+      }),
+      map((request: RestRequest) => this.requestService.configure(request))
+    ).subscribe();
+  }
+
+  private getInvocationFormData(parameters: ProcessParameter[], files: File[]): FormData {
+    const form: FormData = new FormData();
+    form.set('properties', JSON.stringify(parameters));
+    files.forEach((file: File) => {
+      form.append('file', file);
+    });
+    return form;
+  }
 }
diff --git a/src/app/core/data/request.effects.ts b/src/app/core/data/request.effects.ts
index a9052aa8dc..1f8f15c019 100644
--- a/src/app/core/data/request.effects.ts
+++ b/src/app/core/data/request.effects.ts
@@ -12,12 +12,7 @@ import { DSpaceRESTV2Response } from '../dspace-rest-v2/dspace-rest-v2-response.
 
 import { DSpaceRESTv2Service } from '../dspace-rest-v2/dspace-rest-v2.service';
 import { DSpaceSerializer } from '../dspace-rest-v2/dspace.serializer';
-import {
-  RequestActionTypes,
-  RequestCompleteAction,
-  RequestExecuteAction,
-  ResetResponseTimestampsAction
-} from './request.actions';
+import { RequestActionTypes, RequestCompleteAction, RequestExecuteAction, ResetResponseTimestampsAction } from './request.actions';
 import { RequestError, RestRequest } from './request.models';
 import { RequestEntry } from './request.reducer';
 import { RequestService } from './request.service';
@@ -43,12 +38,12 @@ export class RequestEffects {
     filter((entry: RequestEntry) => hasValue(entry)),
     map((entry: RequestEntry) => entry.request),
     flatMap((request: RestRequest) => {
-      let body;
-      if (isNotEmpty(request.body)) {
+      let body = request.body;
+      if (isNotEmpty(request.body) && !request.isMultipart) {
         const serializer = new DSpaceSerializer(getClassForType(request.body.type));
         body = serializer.serialize(request.body);
       }
-      return this.restApi.request(request.method, request.href, body, request.options).pipe(
+      return this.restApi.request(request.method, request.href, body, request.options, request.isMultipart).pipe(
         map((data: DSpaceRESTV2Response) => this.injector.get(request.getResponseParser()).parse(request, data)),
         addToResponseCacheAndCompleteAction(request, this.EnvConfig),
         catchError((error: RequestError) => observableOf(new ErrorResponse(error)).pipe(
diff --git a/src/app/core/data/request.models.ts b/src/app/core/data/request.models.ts
index 0655333502..f0c1266da5 100644
--- a/src/app/core/data/request.models.ts
+++ b/src/app/core/data/request.models.ts
@@ -32,6 +32,8 @@ export enum IdentifierType {
 export abstract class RestRequest {
   public responseMsToLive = 10 * 1000;
   public forceBypassCache = false;
+  public isMultipart = false;
+
   constructor(
     public uuid: string,
     public href: string,
@@ -74,6 +76,18 @@ export class PostRequest extends RestRequest {
   }
 }
 
+export class MultipartPostRequest extends RestRequest {
+  public isMultipart = true;
+  constructor(
+    public uuid: string,
+    public href: string,
+    public body?: any,
+    public options?: HttpOptions
+  )  {
+    super(uuid, href, RestRequestMethod.POST, body)
+  }
+}
+
 export class PutRequest extends RestRequest {
   constructor(
     public uuid: string,
diff --git a/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts b/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
index 6eb144580c..30e34cfcf2 100644
--- a/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
+++ b/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
@@ -72,7 +72,7 @@ export class DSpaceRESTv2Service {
    * @return {Observable<string>}
    *      An Observable<string> containing the response from the server
    */
-  request(method: RestRequestMethod, url: string, body?: any, options?: HttpOptions): Observable<DSpaceRESTV2Response> {
+  request(method: RestRequestMethod, url: string, body?: any, options?: HttpOptions, isMultipart?: boolean): Observable<DSpaceRESTV2Response> {
     const requestOptions: HttpOptions = {};
     requestOptions.body = body;
     if (method === RestRequestMethod.POST && isNotEmpty(body) && isNotEmpty(body.name)) {
@@ -98,7 +98,7 @@ export class DSpaceRESTv2Service {
       requestOptions.withCredentials = options.withCredentials;
     }
 
-    if (!requestOptions.headers.has('Content-Type')) {
+    if (!requestOptions.headers.has('Content-Type') && !isMultipart) {
       // Because HttpHeaders is immutable, the set method returns a new object instead of updating the existing headers
       requestOptions.headers = requestOptions.headers.set('Content-Type', DEFAULT_CONTENT_TYPE);
     }
diff --git a/src/app/process-page/new/new-process.component.html b/src/app/process-page/new/new-process.component.html
index ca3e18546d..09e6bfcdaa 100644
--- a/src/app/process-page/new/new-process.component.html
+++ b/src/app/process-page/new/new-process.component.html
@@ -1,14 +1,16 @@
+<script src="process-parameters/parameter-value-input/value-input.component.ts"></script>
 <div class="container">
     <div class="row">
         <div class="col-12 col-md-6">
-            <form>
-                <ds-scripts-select (select)="selectScript($event)"></ds-scripts-select>
-                <ds-process-parameters [script]="selectedScript"></ds-process-parameters>
+            <form #form="ngForm" (ngSubmit)="submitForm()">
+                <ds-scripts-select (select)="selectedScript = $event"></ds-scripts-select>
+                <ds-process-parameters [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
+                <button [disabled]="form.invalid" type="submit" class="btn btn-light float-right">{{ 'process.new.submit' | translate }}</button>
             </form>
         </div>
         <div class="col-12 col-md-6">
             <ds-script-help [script]="selectedScript"></ds-script-help>
         </div>
     </div>
-
 </div>
+
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
index 57da770dd9..0c98d4d8b4 100644
--- a/src/app/process-page/new/new-process.component.ts
+++ b/src/app/process-page/new/new-process.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Script } from '../scripts/script.model';
 import { Process } from '../processes/process.model';
+import { ProcessParameter } from '../processes/process-parameter.model';
+import { ScriptDataService } from '../../core/data/processes/script-data.service';
 
 @Component({
   selector: 'ds-new-process',
@@ -10,13 +12,32 @@ import { Process } from '../processes/process.model';
 export class NewProcessComponent implements OnInit {
   public selectedScript: Script;
   public process: Process;
+  public parameters: ProcessParameter[];
+  public files: File[] = [];
+
+  constructor(private scriptService: ScriptDataService) {
+  }
 
   ngOnInit(): void {
     this.process = new Process();
   }
 
-  selectScript(script: Script) {
-    this.selectedScript = script;
-    console.log('selected script: ', script);
+  submitForm() {
+    const stringParameters: ProcessParameter[] = this.parameters.map((parameter: ProcessParameter) => {
+        return {
+          name: parameter.name,
+          value: this.checkValue(parameter)
+        };
+      }
+    );
+    this.scriptService.invocate(this.selectedScript.id, stringParameters, this.files)
+  }
+
+  checkValue(processParameter: ProcessParameter): string {
+    if (typeof processParameter.value === 'object') {
+      this.files = [...this.files, processParameter.value];
+      return processParameter.value.name;
+    }
+    return processParameter.value;
   }
 }
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
index 63aa5afaf9..204b90dc77 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
@@ -9,7 +9,7 @@
                 {{param.nameLong || param.name}}
             </option>
         </select>
-        <ds-parameter-value-input [parameter]="selectedScriptParameter" class="d-block col"></ds-parameter-value-input>
+        <ds-parameter-value-input [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col"></ds-parameter-value-input>
         <button *ngIf="removable" class="btn btn-light col-1" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
         <span *ngIf="!removable" class="col-1"></span>
 </div>
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
index 42ae16ca1c..b0145b10a3 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
@@ -31,6 +31,7 @@ export class ParameterSelectComponent implements OnInit {
 
   set selectedParameter(value: string) {
     this.parameterValue.name = value;
+    this.selectedParameterValue = undefined;
     this.changeParameter.emit(this.parameterValue);
   }
 
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
new file mode 100644
index 0000000000..85b27713d2
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
@@ -0,0 +1 @@
+<input type="hidden" value="true"/>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
new file mode 100644
index 0000000000..824d922236
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BooleanValueInputComponent } from './boolean-value-input.component';
+
+describe('StringValueInputComponent', () => {
+  let component: BooleanValueInputComponent;
+  let fixture: ComponentFixture<BooleanValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BooleanValueInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BooleanValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
new file mode 100644
index 0000000000..0c4faf0667
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { ValueInputComponent } from '../value-input.component';
+
+@Component({
+  selector: 'ds-boolean-value-input',
+  templateUrl: './boolean-value-input.component.html',
+  styleUrls: ['./boolean-value-input.component.scss']
+})
+export class BooleanValueInputComponent extends ValueInputComponent<boolean> implements OnInit {
+  ngOnInit() {
+    this.updateValue.emit(true)
+  }
+}
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
new file mode 100644
index 0000000000..3b349bfd43
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
@@ -0,0 +1,7 @@
+<input required #string="ngModel" type="date" class="form-control" id="string-value-input" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<div *ngIf="string.invalid && (string.dirty || string.touched)"
+     class="alert alert-danger">
+    <div *ngIf="string.errors.required">
+        {{'process.new.parameter.string.required' | translate}}
+    </div>
+</div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
new file mode 100644
index 0000000000..5c4b44c3a3
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateValueInputComponent } from './date-value-input.component';
+
+describe('StringValueInputComponent', () => {
+  let component: DateValueInputComponent;
+  let fixture: ComponentFixture<DateValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DateValueInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DateValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
new file mode 100644
index 0000000000..f266bebb9a
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { ValueInputComponent } from '../value-input.component';
+
+@Component({
+  selector: 'ds-date-value-input',
+  templateUrl: './date-value-input.component.html',
+  styleUrls: ['./date-value-input.component.scss']
+})
+export class DateValueInputComponent extends ValueInputComponent<string> {
+  value: string;
+
+  setValue(value) {
+    this.value = value;
+    this.updateValue.emit(value)
+  }
+}
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
index cb211e607b..aa58d1ffac 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -1,6 +1,10 @@
-<ds-uploader dropMsg="process.parameter.file-upload"
-              dropOverDocumentMsg="process.parameter.file-upload"
-              [enableDragOverDocument]="true"
-              [uploadFilesOptions]="uploadFilesOptions"
-              (onCompleteItem)="onCompleteItem()"
-              (onUploadError)="onUploadError()"></ds-uploader>
+<label for="file-upload" class="btn btn-light">
+    {{'process.new.parameter.file.upload-button' | translate}}
+</label>
+<input requireFile #file="ngModel" type="file" id="file-upload" class="form-control-file d-none" [ngModel]="file" (ngModelChange)="setFile($event)"/>
+<div *ngIf="file.invalid && (file.dirty || file.touched)"
+     class="alert alert-danger">
+    <div *ngIf="file.errors.required">
+        {{'process.new.parameter.file.required' | translate}}
+    </div>
+</div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
index d0fa9793d3..ce54207312 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
@@ -1,33 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-import { FileUploaderOptions } from 'ng2-file-upload';
-import { UploaderOptions } from '../../../../../shared/uploader/uploader-options.model';
+import { Component } from '@angular/core';
+import { ValueInputComponent } from '../value-input.component';
 
 @Component({
   selector: 'ds-file-value-input',
   templateUrl: './file-value-input.component.html',
   styleUrls: ['./file-value-input.component.scss']
 })
-export class FileValueInputComponent implements OnInit {
-  uploadFilesOptions: FileUploaderOptions;
-
-  constructor() {
-  }
-
-  ngOnInit() {
-    this.uploadFilesOptions = new UploaderOptions();
-    this.uploadFilesOptions.autoUpload = false;
-    this.uploadFilesOptions.url = 'bladibla';
-    this.uploadFilesOptions.authToken = 'bladibla';
-    this.uploadFilesOptions.disableMultipart = true;
-    this.uploadFilesOptions.formatDataFunctionIsAsync = false;
-    this.uploadFilesOptions.formatDataFunction((t) => console.log(t));
-  }
-
-  onCompleteItem() {
-
-  }
-
-  onUploadError() {
-
+export class FileValueInputComponent extends ValueInputComponent<File> {
+  file: File;
+  setFile(files) {
+    this.file = files.length > 0 ? files[0] : undefined;
+    console.log(this.file);
+    this.updateValue.emit(this.file);
   }
 }
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
index 22d60c8f7f..15261975b9 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
@@ -1,4 +1,7 @@
 <div [ngSwitch]="parameter?.type">
-  <ds-string-value-input *ngSwitchCase="parameterTypes.STRING"></ds-string-value-input>
-  <ds-file-value-input *ngSwitchCase="parameterTypes.FILE"></ds-file-value-input>
+  <ds-string-value-input *ngSwitchCase="parameterTypes.STRING" (updateValue)="updateValue.emit($event)"></ds-string-value-input>
+  <ds-string-value-input *ngSwitchCase="parameterTypes.OUTPUT" (updateValue)="updateValue.emit($event)"></ds-string-value-input>
+  <ds-date-value-input *ngSwitchCase="parameterTypes.DATE" (updateValue)="updateValue.emit($event)"></ds-date-value-input>
+  <ds-file-value-input *ngSwitchCase="parameterTypes.FILE" (updateValue)="updateValue.emit($event)"></ds-file-value-input>
+  <ds-boolean-value-input *ngSwitchCase="parameterTypes.BOOLEAN" (updateValue)="updateValue.emit($event)"></ds-boolean-value-input>
 </div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
index 17c627b371..5adb96505d 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
 import { ScriptParameter } from '../../../scripts/script-parameter.model';
 
@@ -9,5 +9,6 @@ import { ScriptParameter } from '../../../scripts/script-parameter.model';
 })
 export class ParameterValueInputComponent {
   @Input() parameter: ScriptParameter;
+  @Output() updateValue: EventEmitter<any> = new EventEmitter();
   parameterTypes = ScriptParameterType;
 }
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
index e572624f22..e0693efffa 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
@@ -1 +1,7 @@
-<input type="input" class="form-control" id="string-value-input">
+<input required #string="ngModel" type="text" class="form-control" id="string-value-input" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<div *ngIf="string.invalid && (string.dirty || string.touched)"
+     class="alert alert-danger">
+    <div *ngIf="string.errors.required">
+        {{'process.new.parameter.string.required' | translate}}
+    </div>
+</div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
index 5c88523d8d..86db8b87d9 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
@@ -1,15 +1,16 @@
 import { Component, OnInit } from '@angular/core';
+import { ValueInputComponent } from '../value-input.component';
 
 @Component({
   selector: 'ds-string-value-input',
   templateUrl: './string-value-input.component.html',
   styleUrls: ['./string-value-input.component.scss']
 })
-export class StringValueInputComponent implements OnInit {
+export class StringValueInputComponent extends ValueInputComponent<string> {
+  value: string;
 
-  constructor() { }
-
-  ngOnInit() {
+  setValue(value) {
+    this.value = value;
+    this.updateValue.emit(value)
   }
-
 }
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
new file mode 100644
index 0000000000..949c48728d
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
@@ -0,0 +1,5 @@
+import { EventEmitter, Output } from '@angular/core';
+
+export abstract class ValueInputComponent<T> {
+  @Output() updateValue: EventEmitter<T> = new EventEmitter<T>()
+}
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.html b/src/app/process-page/new/process-parameters/process-parameters.component.html
index 98c364cbee..24e9c9b1e3 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.html
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.html
@@ -1,5 +1,5 @@
 <div class="form-group" *ngIf="script">
-    <label>Parameters</label>
+    <label>{{'process.new.select-parameters' | translate}}</label>
     <ds-parameter-select
             *ngFor="let value of parameterValues; let i = index; let last = last"
             [parameters]="script.parameters"
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.ts b/src/app/process-page/new/process-parameters/process-parameters.component.ts
index 2fb9f1c636..156c5a5ebf 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.ts
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.ts
@@ -1,6 +1,7 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { Script } from '../../scripts/script.model';
 import { ProcessParameter } from '../../processes/process-parameter.model';
+import { hasValue } from '../../../shared/empty.util';
 
 @Component({
   selector: 'ds-process-parameters',
@@ -9,6 +10,7 @@ import { ProcessParameter } from '../../processes/process-parameter.model';
 })
 export class ProcessParametersComponent implements OnChanges {
   @Input() script: Script;
+  @Output() updateParameters: EventEmitter<ProcessParameter[]> = new EventEmitter();
   parameterValues: ProcessParameter[];
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -27,6 +29,7 @@ export class ProcessParametersComponent implements OnChanges {
     if (index === this.parameterValues.length - 1) {
       this.addParameter();
     }
+    this.updateParameters.emit(this.parameterValues.filter((param: ProcessParameter) => hasValue(param.name)));
   }
 
   removeParameter(index: number) {
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.html b/src/app/process-page/new/scripts-select/scripts-select.component.html
index 781566aec8..44b06079ae 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.html
@@ -1,11 +1,11 @@
 <div class="form-group" *ngIf="scripts$ | async">
-    <label for="process-script">Script</label>
+    <label for="process-script"><label>{{'process.new.select-script' | translate}}</label></label>
     <select required id="process-script"
             class="form-control"
             name="script"
             [(ngModel)]="selectedScript"
             #script="ngModel">
-        <option [ngValue]="undefined">Choose a script...</option>
+        <option [ngValue]="undefined">{{'process.new.select-script.placeholder' | translate}}</option>
         <option *ngFor="let script of scripts$ | async" [ngValue]="script.id">
             {{script.name}}
         </option>
@@ -14,7 +14,7 @@
     <div *ngIf="script.invalid && (script.dirty || script.touched)"
          class="alert alert-danger">
         <div *ngIf="script.errors.required">
-            Script is required.
+            {{'process.new.select-script.required' | translate}}
         </div>
     </div>
 </div>
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index a20a111f9b..3652efe825 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -9,6 +9,8 @@ import { ProcessParametersComponent } from './new/process-parameters/process-par
 import { StringValueInputComponent } from './new/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
 import { ParameterValueInputComponent } from './new/process-parameters/parameter-value-input/parameter-value-input.component';
 import { FileValueInputComponent } from './new/process-parameters/parameter-value-input/file-value-input/file-value-input.component';
+import { BooleanValueInputComponent } from './new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component';
+import { DateValueInputComponent } from './new/process-parameters/parameter-value-input/date-value-input/date-value-input.component';
 
 @NgModule({
   imports: [
@@ -24,6 +26,8 @@ import { FileValueInputComponent } from './new/process-parameters/parameter-valu
     StringValueInputComponent,
     ParameterValueInputComponent,
     FileValueInputComponent,
+    BooleanValueInputComponent,
+    DateValueInputComponent,
   ],
   entryComponents: []
 })
diff --git a/src/app/process-page/processes/process-parameter.model.ts b/src/app/process-page/processes/process-parameter.model.ts
index 4ce294a131..a3ce62c5c6 100644
--- a/src/app/process-page/processes/process-parameter.model.ts
+++ b/src/app/process-page/processes/process-parameter.model.ts
@@ -6,8 +6,9 @@ export class ProcessParameter {
    * The name of the parameter Eg. '-d', '-f' etc.
    */
   name: string;
+
   /**
    * The value of the parameter
    */
-  value: string;
+  value: any;
 }
diff --git a/src/app/shared/mocks/dspace-rest-v2/endpoint-mocking-rest.service.ts b/src/app/shared/mocks/dspace-rest-v2/endpoint-mocking-rest.service.ts
index b0e89b80b5..8c81a8bea8 100644
--- a/src/app/shared/mocks/dspace-rest-v2/endpoint-mocking-rest.service.ts
+++ b/src/app/shared/mocks/dspace-rest-v2/endpoint-mocking-rest.service.ts
@@ -63,10 +63,10 @@ export class EndpointMockingRestService extends DSpaceRESTv2Service {
    * @return Observable<DSpaceRESTV2Response>
    *      An Observable<DSpaceRESTV2Response> containing the response from the server
    */
-  request(method: RestRequestMethod, url: string, body?: any, options?: HttpOptions): Observable<DSpaceRESTV2Response> {
+  request(method: RestRequestMethod, url: string, body?: any, options?: HttpOptions, isMultipart?: boolean): Observable<DSpaceRESTV2Response> {
     const mockData = this.getMockData(url);
     if (isEmpty(mockData)) {
-      return super.request(method, url, body, options);
+      return super.request(method, url, body, options, isMultipart);
     } else {
       return this.toMockResponse$(mockData);
     }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 698d9c936c..13f80d5d52 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -186,6 +186,8 @@ import { LogInPasswordComponent } from './log-in/methods/password/log-in-passwor
 import { LogInComponent } from './log-in/log-in.component';
 import { MissingTranslationHelper } from './translate/missing-translation.helper';
 import { ItemVersionsNoticeComponent } from './item/item-versions/notice/item-versions-notice.component';
+import { FileValidator } from './utils/require-file.validator';
+import { FileValueAccessorDirective } from './utils/file-value-accessor.directive';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -452,7 +454,9 @@ const DIRECTIVES = [
   AutoFocusDirective,
   RoleDirective,
   MetadataRepresentationDirective,
-  ListableObjectDirective
+  ListableObjectDirective,
+  FileValueAccessorDirective,
+  FileValidator
 ];
 
 @NgModule({
diff --git a/src/app/shared/uploader/uploader.component.ts b/src/app/shared/uploader/uploader.component.ts
index 26b094a584..a5fce98ceb 100644
--- a/src/app/shared/uploader/uploader.component.ts
+++ b/src/app/shared/uploader/uploader.component.ts
@@ -146,6 +146,8 @@ export class UploaderComponent {
     };
     this.uploader.onProgressAll = () => this.onProgress();
     this.uploader.onProgressItem = () => this.onProgress();
+
+    console.log(this.uploader.options.formatDataFunction());
   }
 
   /**
diff --git a/src/app/shared/utils/file-value-accessor.directive.ts b/src/app/shared/utils/file-value-accessor.directive.ts
new file mode 100644
index 0000000000..8c4f071cbe
--- /dev/null
+++ b/src/app/shared/utils/file-value-accessor.directive.ts
@@ -0,0 +1,24 @@
+import {Directive} from '@angular/core';
+import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
+
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'input[type=file]',
+    // tslint:disable-next-line:no-host-metadata-property
+    host : {
+        '(change)' : 'onChange($event.target.files)',
+        '(blur)': 'onTouched()'
+    },
+    providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: FileValueAccessorDirective, multi: true }
+    ]
+})
+export class FileValueAccessorDirective implements ControlValueAccessor {
+    value: any;
+    onChange = (_) => { /* empty */ };
+    onTouched = () => { /* empty */};
+
+    writeValue(value) { /* empty */}
+    registerOnChange(fn: any) { this.onChange = fn; }
+    registerOnTouched(fn: any) { this.onTouched = fn; }
+}
diff --git a/src/app/shared/utils/require-file.validator.ts b/src/app/shared/utils/require-file.validator.ts
new file mode 100644
index 0000000000..c6480e1715
--- /dev/null
+++ b/src/app/shared/utils/require-file.validator.ts
@@ -0,0 +1,19 @@
+import {Directive} from '@angular/core';
+import {NG_VALIDATORS, Validator, FormControl} from '@angular/forms';
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+    selector: '[requireFile]',
+    providers: [
+        { provide: NG_VALIDATORS, useExisting: FileValidator, multi: true },
+    ]
+})
+export class FileValidator implements Validator {
+    static validate(c: FormControl): {[key: string]: any} {
+      return c.value == null || c.value.length === 0 ? { required : true} : null;
+    }
+
+    validate(c: FormControl): {[key: string]: any} {
+      return FileValidator.validate(c);
+    }
+}

From ef3a235178bd02fb0ab4a653b51eefb393a00727 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Wed, 25 Mar 2020 13:18:46 +0100
Subject: [PATCH 27/84] added tests and typedoc

---
 .../data/processes/script-data.service.ts     |  2 +-
 src/app/core/data/request.models.ts           |  3 +
 .../dspace-rest-v2/dspace-rest-v2.service.ts  |  2 +
 .../new/new-process.component.html            |  4 +-
 .../new/new-process.component.spec.ts         | 68 +++++++++++++++
 .../process-page/new/new-process.component.ts | 56 ++++++++++++-
 .../parameter-select.component.html           |  2 +-
 .../parameter-select.component.spec.ts        | 50 ++++++++++-
 .../parameter-select.component.ts             | 40 +++++++++
 .../boolean-value-input.component.spec.ts     | 13 ++-
 .../boolean-value-input.component.ts          |  3 +
 .../date-value-input.component.html           |  4 +-
 .../date-value-input.component.spec.ts        | 53 +++++++++++-
 .../date-value-input.component.ts             |  6 ++
 .../file-value-input.component.html           |  2 +-
 .../file-value-input.component.spec.ts        | 38 ++++++++-
 .../file-value-input.component.ts             |  7 +-
 .../parameter-value-input.component.spec.ts   | 84 ++++++++++++++++++-
 .../parameter-value-input.component.ts        | 14 ++++
 .../string-value-input.component.html         |  2 +-
 .../string-value-input.component.spec.ts      | 51 ++++++++++-
 .../string-value-input.component.ts           |  8 +-
 .../value-input.component.ts                  |  6 ++
 .../process-parameters.component.spec.ts      | 43 +++++++++-
 .../process-parameters.component.ts           | 34 ++++++++
 .../script-help/script-help.component.html    |  2 +-
 .../script-help/script-help.component.spec.ts | 27 ++++++
 .../new/script-help/script-help.component.ts  |  6 ++
 .../scripts-select.component.html             |  2 +-
 .../scripts-select.component.spec.ts          | 80 +++++++++++++++++-
 .../scripts-select.component.ts               | 16 +++-
 .../process-page/processes/process.model.ts   |  3 +
 src/app/process-page/scripts/script.model.ts  |  3 +
 src/app/shared/uploader/uploader.component.ts |  5 --
 .../utils/file-value-accessor.directive.ts    |  3 +
 .../shared/utils/require-file.validator.ts    |  5 +-
 36 files changed, 701 insertions(+), 46 deletions(-)
 create mode 100644 src/app/process-page/new/new-process.component.spec.ts

diff --git a/src/app/core/data/processes/script-data.service.ts b/src/app/core/data/processes/script-data.service.ts
index 9841ef3862..6c7222451e 100644
--- a/src/app/core/data/processes/script-data.service.ts
+++ b/src/app/core/data/processes/script-data.service.ts
@@ -31,7 +31,7 @@ export class ScriptDataService extends DataService<Script> {
     super();
   }
 
-  public invocate(scriptName: string, parameters: ProcessParameter[], files: File[]) {
+  public invoke(scriptName: string, parameters: ProcessParameter[], files: File[]) {
     this.getBrowseEndpoint().pipe(
       map((endpoint: string) => new URLCombiner(endpoint, scriptName, 'processes').toString()),
       map((endpoint: string) => {
diff --git a/src/app/core/data/request.models.ts b/src/app/core/data/request.models.ts
index f0c1266da5..82149fbbc5 100644
--- a/src/app/core/data/request.models.ts
+++ b/src/app/core/data/request.models.ts
@@ -76,6 +76,9 @@ export class PostRequest extends RestRequest {
   }
 }
 
+/**
+ * Request representing a multipart post request
+ */
 export class MultipartPostRequest extends RestRequest {
   public isMultipart = true;
   constructor(
diff --git a/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts b/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
index 30e34cfcf2..8cb730c358 100644
--- a/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
+++ b/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
@@ -69,6 +69,8 @@ export class DSpaceRESTv2Service {
    *    an optional body for the request
    * @param options
    *    the HttpOptions object
+   * @param isMultipart
+   *     true when this concerns a multipart request
    * @return {Observable<string>}
    *      An Observable<string> containing the response from the server
    */
diff --git a/src/app/process-page/new/new-process.component.html b/src/app/process-page/new/new-process.component.html
index 09e6bfcdaa..dbda37c377 100644
--- a/src/app/process-page/new/new-process.component.html
+++ b/src/app/process-page/new/new-process.component.html
@@ -1,8 +1,7 @@
-<script src="process-parameters/parameter-value-input/value-input.component.ts"></script>
 <div class="container">
     <div class="row">
         <div class="col-12 col-md-6">
-            <form #form="ngForm" (ngSubmit)="submitForm()">
+            <form #form="ngForm" (ngSubmit)="submitForm(form)">
                 <ds-scripts-select (select)="selectedScript = $event"></ds-scripts-select>
                 <ds-process-parameters [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
                 <button [disabled]="form.invalid" type="submit" class="btn btn-light float-right">{{ 'process.new.submit' | translate }}</button>
@@ -13,4 +12,3 @@
         </div>
     </div>
 </div>
-
diff --git a/src/app/process-page/new/new-process.component.spec.ts b/src/app/process-page/new/new-process.component.spec.ts
new file mode 100644
index 0000000000..ed05dc9a33
--- /dev/null
+++ b/src/app/process-page/new/new-process.component.spec.ts
@@ -0,0 +1,68 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NewProcessComponent } from './new-process.component';
+import { ScriptDataService } from '../../core/data/processes/script-data.service';
+import { MockTranslateLoader } from '../../shared/testing/mock-translate-loader';
+import { ScriptParameter } from '../scripts/script-parameter.model';
+import { Script } from '../scripts/script.model';
+import { ProcessParameter } from '../processes/process-parameter.model';
+
+describe('NewProcessComponent', () => {
+  let component: NewProcessComponent;
+  let fixture: ComponentFixture<NewProcessComponent>;
+  let scriptService;
+  let parameterValues;
+  let script;
+
+  function init() {
+    const param1 = new ScriptParameter();
+    const param2 = new ScriptParameter();
+    script = Object.assign(new Script(), { parameters: [param1, param2] });
+    parameterValues = [
+      Object.assign(new ProcessParameter(), { name: '-a', value: 'bla' }),
+      Object.assign(new ProcessParameter(), { name: '-b', value: '123' }),
+      Object.assign(new ProcessParameter(), { name: '-c', value: 'value' }),
+    ];
+    scriptService = jasmine.createSpyObj('scriptService', ['invoke'])
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        })],
+      declarations: [NewProcessComponent],
+      providers: [
+        { provide: ScriptDataService, useValue: scriptService },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewProcessComponent);
+    component = fixture.componentInstance;
+    component.parameters = parameterValues;
+    component.selectedScript = script;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call invoke on the scriptService on submit', () => {
+    component.submitForm({ invalid: false });
+    expect(scriptService.invoke).toHaveBeenCalled();
+  });
+});
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
index 0c98d4d8b4..05cb4384af 100644
--- a/src/app/process-page/new/new-process.component.ts
+++ b/src/app/process-page/new/new-process.component.ts
@@ -3,16 +3,35 @@ import { Script } from '../scripts/script.model';
 import { Process } from '../processes/process.model';
 import { ProcessParameter } from '../processes/process-parameter.model';
 import { ScriptDataService } from '../../core/data/processes/script-data.service';
+import { NgForm } from '@angular/forms';
 
+/**
+ * Component to create a new script
+ */
 @Component({
   selector: 'ds-new-process',
   templateUrl: './new-process.component.html',
   styleUrls: ['./new-process.component.scss'],
 })
 export class NewProcessComponent implements OnInit {
+  /**
+   * The currently selected script
+   */
   public selectedScript: Script;
+
+  /**
+   * The process to create
+   */
   public process: Process;
+
+  /**
+   * The parameter values to use to start the process
+   */
   public parameters: ProcessParameter[];
+
+  /**
+   * Optional files that are used as parameter values
+   */
   public files: File[] = [];
 
   constructor(private scriptService: ScriptDataService) {
@@ -22,7 +41,15 @@ export class NewProcessComponent implements OnInit {
     this.process = new Process();
   }
 
-  submitForm() {
+  /**
+   * Validates the form, sets the parameters to correct values and invokes the script with the correct parameters
+   * @param form
+   */
+  submitForm(form: NgForm) {
+    if (!this.validateForm(form)) {
+      return;
+    }
+
     const stringParameters: ProcessParameter[] = this.parameters.map((parameter: ProcessParameter) => {
         return {
           name: parameter.name,
@@ -30,14 +57,35 @@ export class NewProcessComponent implements OnInit {
         };
       }
     );
-    this.scriptService.invocate(this.selectedScript.id, stringParameters, this.files)
+    this.scriptService.invoke(this.selectedScript.id, stringParameters, this.files)
   }
 
-  checkValue(processParameter: ProcessParameter): string {
+  /**
+   * Checks whether the parameter values are files
+   * Replaces file parameters by strings and stores the files in a separate list
+   * @param processParameter The parameter value to check
+   */
+  private checkValue(processParameter: ProcessParameter): string {
     if (typeof processParameter.value === 'object') {
       this.files = [...this.files, processParameter.value];
       return processParameter.value.name;
-    }
+  }
     return processParameter.value;
   }
+
+  /**
+   * Validates the form
+   * Returns false if the form is invalid
+   * Returns true if the form is valid
+   * @param form The NgForm object to validate
+   */
+  private validateForm(form: NgForm) {
+    if (form.invalid) {
+      Object.keys(form.controls).forEach((key) => {
+        form.controls[key].markAsDirty();
+      });
+      return false;
+    }
+    return true;
+  }
 }
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
index 204b90dc77..5b73c35f53 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
@@ -10,7 +10,7 @@
             </option>
         </select>
         <ds-parameter-value-input [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col"></ds-parameter-value-input>
-        <button *ngIf="removable" class="btn btn-light col-1" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
+        <button *ngIf="removable" class="btn btn-light col-1 remove-button" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
         <span *ngIf="!removable" class="col-1"></span>
 </div>
 
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts
index 0a435f6e27..97c0d7c3d0 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts
@@ -1,25 +1,71 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ParameterSelectComponent } from './parameter-select.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ScriptParameter } from '../../../scripts/script-parameter.model';
+import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
+import { By } from '@angular/platform-browser';
 
 describe('ParameterSelectComponent', () => {
   let component: ParameterSelectComponent;
   let fixture: ComponentFixture<ParameterSelectComponent>;
+  let scriptParams: ScriptParameter[];
 
+  function init() {
+    scriptParams = [
+      Object.assign(
+        new ScriptParameter(),
+        {
+          name: '-a',
+          type: ScriptParameterType.BOOLEAN
+        }
+      ),
+      Object.assign(
+        new ScriptParameter(),
+        {
+          name: '-f',
+          type: ScriptParameterType.FILE
+        }
+      ),
+    ]
+  }
   beforeEach(async(() => {
+    init();
     TestBed.configureTestingModule({
-      declarations: [ ParameterSelectComponent ]
+      imports: [FormsModule],
+      declarations: [ParameterSelectComponent],
+      schemas: [NO_ERRORS_SCHEMA]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ParameterSelectComponent);
     component = fixture.componentInstance;
+
+    component.parameters = scriptParams;
+    component.removable = false;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should show the remove button when removable', () => {
+    component.removable = true;
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button.remove-button'));
+    expect(button).not.toBeNull();
+  });
+
+  it('should hide the remove button when not removable', () => {
+    component.removable = false;
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button.remove-button'));
+    expect(button).toBeNull();
+  });
 });
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
index b0145b10a3..a9d5193b9e 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
@@ -3,16 +3,37 @@ import { ProcessParameter } from '../../../processes/process-parameter.model';
 import { ScriptParameter } from '../../../scripts/script-parameter.model';
 import { hasNoValue } from '../../../../shared/empty.util';
 
+/**
+ * Component to select a single parameter for a process
+ */
 @Component({
   selector: 'ds-parameter-select',
   templateUrl: './parameter-select.component.html',
   styleUrls: ['./parameter-select.component.scss']
 })
 export class ParameterSelectComponent implements OnInit {
+  /**
+   * The current parameter value of the selected parameter
+   */
   @Input() parameterValue: ProcessParameter;
+  /**
+   * The available script parameters for the script
+   */
   @Input() parameters: ScriptParameter[];
+
+  /**
+   * Whether or not this selected parameter can be removed from the list
+   */
   @Input() removable: boolean;
+
+  /**
+   * Emits the parameter value when it's removed
+   */
   @Output() removeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
+
+  /**
+   * Emits the updated parameter value when it changes
+   */
   @Output() changeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
 
   ngOnInit(): void {
@@ -21,24 +42,43 @@ export class ParameterSelectComponent implements OnInit {
     }
   }
 
+  /**
+   * Returns the script parameter based on the currently selected name
+   */
   get selectedScriptParameter(): ScriptParameter {
     return this.parameters.find((parameter: ScriptParameter) => parameter.name === this.selectedParameter);
   }
 
+  /**
+   * Return the currently selected parameter name
+   */
   get selectedParameter(): string {
     return this.parameterValue ? this.parameterValue.name : undefined;
   }
 
+  /**
+   * Sets the currently selected parameter based on the provided parameter name
+   * Emits the new value from the changeParameter output
+   * @param value The parameter name to set
+   */
   set selectedParameter(value: string) {
     this.parameterValue.name = value;
     this.selectedParameterValue = undefined;
     this.changeParameter.emit(this.parameterValue);
   }
 
+  /**
+   * Returns the currently selected parameter value
+   */
   get selectedParameterValue(): any {
     return this.parameterValue ? this.parameterValue.value : undefined;
   }
 
+  /**
+   * Sets the currently selected value for the parameter
+   * Emits the new value from the changeParameter output
+   * @param value The parameter value to set
+   */
   set selectedParameterValue(value: any) {
     this.parameterValue.value = value;
     this.changeParameter.emit(this.parameterValue);
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
index 824d922236..15f09d98f0 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
@@ -1,25 +1,32 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { BooleanValueInputComponent } from './boolean-value-input.component';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
 
-describe('StringValueInputComponent', () => {
+describe('BooleanValueInputComponent', () => {
   let component: BooleanValueInputComponent;
   let fixture: ComponentFixture<BooleanValueInputComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ BooleanValueInputComponent ]
+      declarations: [BooleanValueInputComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BooleanValueInputComponent);
     component = fixture.componentInstance;
+    spyOn(component.updateValue, 'emit');
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should emit true onInit', () => {
+    expect(component.updateValue.emit).toHaveBeenCalledWith(true);
+  });
 });
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
index 0c4faf0667..c75c5cf240 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
 
+/**
+ * Represents the value of a boolean parameter
+ */
 @Component({
   selector: 'ds-boolean-value-input',
   templateUrl: './boolean-value-input.component.html',
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
index 3b349bfd43..7eeca02974 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
@@ -1,6 +1,6 @@
-<input required #string="ngModel" type="date" class="form-control" id="string-value-input" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<input required #string="ngModel" type="text" class="form-control" id="string-value-input" [ngModel]="value" (ngModelChange)="setValue($event)"/>
 <div *ngIf="string.invalid && (string.dirty || string.touched)"
-     class="alert alert-danger">
+     class="alert alert-danger validation-error">
     <div *ngIf="string.errors.required">
         {{'process.new.parameter.string.required' | translate}}
     </div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
index 5c4b44c3a3..ab50efc93c 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
@@ -1,16 +1,28 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
 import { DateValueInputComponent } from './date-value-input.component';
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { MockTranslateLoader } from '../../../../../shared/mocks/mock-translate-loader';
+import { By } from '@angular/platform-browser';
 
-describe('StringValueInputComponent', () => {
+describe('DateValueInputComponent', () => {
   let component: DateValueInputComponent;
   let fixture: ComponentFixture<DateValueInputComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DateValueInputComponent ]
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        })],
+      declarations: [DateValueInputComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -22,4 +34,37 @@ describe('StringValueInputComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should not show a validation error if the input field was left untouched but left empty', () => {
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should show a validation error if the input field was touched but left empty',  fakeAsync(() => {
+    component.value = '';
+    fixture.detectChanges();
+    tick();
+
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeTruthy();
+  }));
+
+  it('should not show a validation error if the input field was touched but not left empty', fakeAsync(() => {
+    component.value = 'testValue';
+    fixture.detectChanges();
+    tick();
+
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  }));
 });
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
index f266bebb9a..7476e2ac6b 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
@@ -1,12 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
 
+/**
+ * Represents the user inputted value of a date parameter
+ */
 @Component({
   selector: 'ds-date-value-input',
   templateUrl: './date-value-input.component.html',
   styleUrls: ['./date-value-input.component.scss']
 })
 export class DateValueInputComponent extends ValueInputComponent<string> {
+  /**
+   * The current value of the date string
+   */
   value: string;
 
   setValue(value) {
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
index aa58d1ffac..9f61141a00 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -3,7 +3,7 @@
 </label>
 <input requireFile #file="ngModel" type="file" id="file-upload" class="form-control-file d-none" [ngModel]="file" (ngModelChange)="setFile($event)"/>
 <div *ngIf="file.invalid && (file.dirty || file.touched)"
-     class="alert alert-danger">
+     class="alert alert-danger validation-error">
     <div *ngIf="file.errors.required">
         {{'process.new.parameter.file.required' | translate}}
     </div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
index b7de5e5a23..a1d5b0dc43 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
@@ -1,6 +1,13 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { MockTranslateLoader } from '../../../../../shared/mocks/mock-translate-loader';
+import { By } from '@angular/platform-browser';
 import { FileValueInputComponent } from './file-value-input.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { FileValueAccessorDirective } from '../../../../../shared/utils/file-value-accessor.directive';
+import { FileValidator } from '../../../../../shared/utils/require-file.validator';
 
 describe('FileValueInputComponent', () => {
   let component: FileValueInputComponent;
@@ -8,9 +15,19 @@ describe('FileValueInputComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FileValueInputComponent ]
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        })],
+      declarations: [FileValueInputComponent, FileValueAccessorDirective, FileValidator],
+      schemas: [NO_ERRORS_SCHEMA]
+
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -22,4 +39,19 @@ describe('FileValueInputComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should not show a validation error if the input field was left untouched but left empty', () => {
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should show a validation error if the input field was touched but left empty',  () => {
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeTruthy();
+  });
 });
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
index ce54207312..da16119d35 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
@@ -1,16 +1,21 @@
 import { Component } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
 
+/**
+ * Represents the user inputted value of a file parameter
+ */
 @Component({
   selector: 'ds-file-value-input',
   templateUrl: './file-value-input.component.html',
   styleUrls: ['./file-value-input.component.scss']
 })
 export class FileValueInputComponent extends ValueInputComponent<File> {
+  /**
+   * The current value of the file
+   */
   file: File;
   setFile(files) {
     this.file = files.length > 0 ? files[0] : undefined;
-    console.log(this.file);
     this.updateValue.emit(this.file);
   }
 }
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
index 91045ea0f4..ef315ac981 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
@@ -1,25 +1,105 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ParameterValueInputComponent } from './parameter-value-input.component';
+import { ScriptParameter } from '../../../scripts/script-parameter.model';
+import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
+import { By } from '@angular/platform-browser';
+import { BooleanValueInputComponent } from './boolean-value-input/boolean-value-input.component';
+import { StringValueInputComponent } from './string-value-input/string-value-input.component';
+import { FileValueInputComponent } from './file-value-input/file-value-input.component';
+import { DateValueInputComponent } from './date-value-input/date-value-input.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { MockTranslateLoader } from '../../../../shared/testing/mock-translate-loader';
+import { FileValueAccessorDirective } from '../../../../shared/utils/file-value-accessor.directive';
+import { FileValidator } from '../../../../shared/utils/require-file.validator';
 
 describe('ParameterValueInputComponent', () => {
   let component: ParameterValueInputComponent;
   let fixture: ComponentFixture<ParameterValueInputComponent>;
+  let booleanParameter;
+  let stringParameter;
+  let fileParameter;
+  let dateParameter;
+  let outputParameter;
+
+  function init() {
+    booleanParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.BOOLEAN });
+    stringParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.STRING });
+    fileParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.FILE });
+    dateParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.DATE });
+    outputParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.OUTPUT });
+  }
 
   beforeEach(async(() => {
+    init();
     TestBed.configureTestingModule({
-      declarations: [ ParameterValueInputComponent ]
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        })],
+      declarations: [
+        ParameterValueInputComponent,
+        BooleanValueInputComponent,
+        StringValueInputComponent,
+        FileValueInputComponent,
+        DateValueInputComponent,
+        FileValueAccessorDirective,
+        FileValidator
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ParameterValueInputComponent);
     component = fixture.componentInstance;
+    component.parameter = stringParameter;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should show a BooleanValueInputComponent when the parameter type is boolean', () => {
+    component.parameter = booleanParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(BooleanValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
+
+  it('should show a StringValueInputComponent when the parameter type is string', () => {
+    component.parameter = stringParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(StringValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
+
+  it('should show a FileValueInputComponent when the parameter type is file', () => {
+    component.parameter = fileParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(FileValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
+
+  it('should show a DateValueInputComponent when the parameter type is date', () => {
+    component.parameter = dateParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(DateValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
+
+  it('should show a StringValueInputComponent when the parameter type is output', () => {
+    component.parameter = outputParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(StringValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
 });
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
index 5adb96505d..42479f4041 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
@@ -2,13 +2,27 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angu
 import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
 import { ScriptParameter } from '../../../scripts/script-parameter.model';
 
+/**
+ * Component that renders the correct parameter value input based the script parameter's type
+ */
 @Component({
   selector: 'ds-parameter-value-input',
   templateUrl: './parameter-value-input.component.html',
   styleUrls: ['./parameter-value-input.component.scss']
 })
 export class ParameterValueInputComponent {
+  /**
+   * The current script parameter
+   */
   @Input() parameter: ScriptParameter;
+
+  /**
+   * Emits the value of the input when its updated
+   */
   @Output() updateValue: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * The available script parameter types
+   */
   parameterTypes = ScriptParameterType;
 }
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
index e0693efffa..7eeca02974 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
@@ -1,6 +1,6 @@
 <input required #string="ngModel" type="text" class="form-control" id="string-value-input" [ngModel]="value" (ngModelChange)="setValue($event)"/>
 <div *ngIf="string.invalid && (string.dirty || string.touched)"
-     class="alert alert-danger">
+     class="alert alert-danger validation-error">
     <div *ngIf="string.errors.required">
         {{'process.new.parameter.string.required' | translate}}
     </div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
index 11af3a4b23..c6f04ada20 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
@@ -1,5 +1,9 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { MockTranslateLoader } from '../../../../../shared/mocks/mock-translate-loader';
+import { By } from '@angular/platform-browser';
 import { StringValueInputComponent } from './string-value-input.component';
 
 describe('StringValueInputComponent', () => {
@@ -8,9 +12,17 @@ describe('StringValueInputComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ StringValueInputComponent ]
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        })],
+      declarations: [StringValueInputComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -22,4 +34,37 @@ describe('StringValueInputComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should not show a validation error if the input field was left untouched but left empty', () => {
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should show a validation error if the input field was touched but left empty',  fakeAsync(() => {
+    component.value = '';
+    fixture.detectChanges();
+    tick();
+
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeTruthy();
+  }));
+
+  it('should not show a validation error if the input field was touched but not left empty', fakeAsync(() => {
+    component.value = 'testValue';
+    fixture.detectChanges();
+    tick();
+
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  }));
 });
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
index 86db8b87d9..bfcc277b3d 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
@@ -1,12 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
 
+/**
+ * Represents the user inputted value of a string parameter
+ */
 @Component({
   selector: 'ds-string-value-input',
   templateUrl: './string-value-input.component.html',
   styleUrls: ['./string-value-input.component.scss']
 })
 export class StringValueInputComponent extends ValueInputComponent<string> {
+  /**
+   * The current value of the string
+   */
   value: string;
 
   setValue(value) {
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
index 949c48728d..a46e059407 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
@@ -1,5 +1,11 @@
 import { EventEmitter, Output } from '@angular/core';
 
+/**
+ * Abstract class that represents value input components
+ */
 export abstract class ValueInputComponent<T> {
+  /**
+   * Used by the subclasses to emit the value when it's updated
+   */
   @Output() updateValue: EventEmitter<T> = new EventEmitter<T>()
 }
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts b/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
index 0eb4edb864..2a95d542f0 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
@@ -1,25 +1,64 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ProcessParametersComponent } from './process-parameters.component';
+import { ProcessParameter } from '../../processes/process-parameter.model';
+import { By } from '@angular/platform-browser';
+import { ParameterSelectComponent } from './parameter-select/parameter-select.component';
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { MockTranslateLoader } from '../../../shared/testing/mock-translate-loader';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Script } from '../../scripts/script.model';
+import { ScriptParameter } from '../../scripts/script-parameter.model';
 
 describe('ProcessParametersComponent', () => {
   let component: ProcessParametersComponent;
   let fixture: ComponentFixture<ProcessParametersComponent>;
+  let parameterValues;
+  let script;
+
+  function init() {
+    const param1 = new ScriptParameter();
+    const param2 = new ScriptParameter();
+    script = Object.assign(new Script(), { parameters: [param1, param2] });
+    parameterValues = [
+      Object.assign(new ProcessParameter(), { name: '-a', value: 'bla' }),
+      Object.assign(new ProcessParameter(), { name: '-b', value: '123' }),
+      Object.assign(new ProcessParameter(), { name: '-c', value: 'value' }),
+    ]
+  }
 
   beforeEach(async(() => {
+    init();
     TestBed.configureTestingModule({
-      declarations: [ ProcessParametersComponent ]
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        })],
+      declarations: [ProcessParametersComponent, ParameterSelectComponent],
+      schemas: [NO_ERRORS_SCHEMA]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ProcessParametersComponent);
     component = fixture.componentInstance;
+    component.script = script;
+    component.parameterValues = parameterValues;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render a ParameterSelectComponent for each parameter value of the component', () => {
+    const selectComponents = fixture.debugElement.queryAll(By.directive(ParameterSelectComponent));
+    expect(selectComponents.length).toBe(parameterValues.length);
+  });
 });
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.ts b/src/app/process-page/new/process-parameters/process-parameters.component.ts
index 156c5a5ebf..765410dc8d 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.ts
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.ts
@@ -3,27 +3,54 @@ import { Script } from '../../scripts/script.model';
 import { ProcessParameter } from '../../processes/process-parameter.model';
 import { hasValue } from '../../../shared/empty.util';
 
+/**
+ * Component that represents the selected list of parameters for a script
+ */
 @Component({
   selector: 'ds-process-parameters',
   templateUrl: './process-parameters.component.html',
   styleUrls: ['./process-parameters.component.scss']
 })
 export class ProcessParametersComponent implements OnChanges {
+  /**
+   * The currently selected script
+   */
   @Input() script: Script;
+  /**
+   * Emits the parameter values when they're updated
+   */
   @Output() updateParameters: EventEmitter<ProcessParameter[]> = new EventEmitter();
+
+  /**
+   * The current parameter values
+   */
   parameterValues: ProcessParameter[];
 
+  /**
+   * Makes sure the parameters are reset when the script changes
+   * @param changes
+   */
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.script) {
       this.initParameters()
     }
   }
 
+  /**
+   * Empties the parameter values
+   * Initializes the first parameter value
+   */
   initParameters() {
     this.parameterValues = [];
     this.addParameter();
   }
 
+  /**
+   * Updates a single parameter value using its new value and index
+   * Adds a new parameter when the last of the parameter values is changed
+   * @param processParameter The new value of the parameter
+   * @param index The index of the parameter
+   */
   updateParameter(processParameter: ProcessParameter, index: number) {
     this.parameterValues[index] = processParameter;
     if (index === this.parameterValues.length - 1) {
@@ -32,10 +59,17 @@ export class ProcessParametersComponent implements OnChanges {
     this.updateParameters.emit(this.parameterValues.filter((param: ProcessParameter) => hasValue(param.name)));
   }
 
+  /**
+   * Removes a parameter value from the list
+   * @param index The index of the parameter to remove
+   */
   removeParameter(index: number) {
     this.parameterValues = this.parameterValues.filter((value, i) => i !== index);
   }
 
+  /**
+   * Adds an empty parameter value to the end of the list
+   */
   addParameter() {
     this.parameterValues = [...this.parameterValues, new ProcessParameter()];
   }
diff --git a/src/app/process-page/new/script-help/script-help.component.html b/src/app/process-page/new/script-help/script-help.component.html
index a12fafdf4c..a9bb114f2e 100644
--- a/src/app/process-page/new/script-help/script-help.component.html
+++ b/src/app/process-page/new/script-help/script-help.component.html
@@ -1,7 +1,7 @@
 <h3>{{script?.name}}</h3>
 <span>{{script?.description}}</span>
 
-<table class="table-border less mt-3">
+<table class="table-borderless mt-3 text-secondary">
     <tr *ngFor="let param of script?.parameters">
         <td>{{param.name}} {{param.nameLong}} {{param.type !== 'boolean' ? '<' + param.type + '>' : ''}}</td>
         <td>{{param.description}}</td>
diff --git a/src/app/process-page/new/script-help/script-help.component.spec.ts b/src/app/process-page/new/script-help/script-help.component.spec.ts
index 286afa9922..6ebcb5b6c3 100644
--- a/src/app/process-page/new/script-help/script-help.component.spec.ts
+++ b/src/app/process-page/new/script-help/script-help.component.spec.ts
@@ -1,12 +1,29 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ScriptHelpComponent } from './script-help.component';
+import { ScriptParameter } from '../../scripts/script-parameter.model';
+import { Script } from '../../scripts/script.model';
+import { ScriptParameterType } from '../../scripts/script-parameter-type.model';
+import { By } from '@angular/platform-browser';
 
 describe('ScriptHelpComponent', () => {
   let component: ScriptHelpComponent;
   let fixture: ComponentFixture<ScriptHelpComponent>;
+  let script;
 
+  function init() {
+    const param1 = Object.assign(
+      new ScriptParameter(),
+      {name: '-d', description: 'Lorem ipsum dolor sit amet,', type: ScriptParameterType.DATE}
+    );
+    const param2 = Object.assign(
+      new ScriptParameter(),
+      {name: '-f', description: 'consetetur sadipscing elitr', type: ScriptParameterType.BOOLEAN}
+    );
+    script = Object.assign(new Script(), { parameters: [param1, param2] });
+  }
   beforeEach(async(() => {
+    init();
     TestBed.configureTestingModule({
       declarations: [ ScriptHelpComponent ]
     })
@@ -16,10 +33,20 @@ describe('ScriptHelpComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ScriptHelpComponent);
     component = fixture.componentInstance;
+    component.script = script;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should show the name and description for each parameter of the script', () => {
+    const rows = fixture.debugElement.queryAll(By.css('tr'));
+    expect(rows.length).toBe(script.parameters.length);
+    script.parameters.forEach((parameter, index) => {
+      expect(rows[index].queryAll(By.css('td'))[0].nativeElement.textContent).toContain(parameter.name);
+      expect(rows[index].queryAll(By.css('td'))[1].nativeElement.textContent.trim()).toEqual(parameter.description);
+    })
+  });
 });
diff --git a/src/app/process-page/new/script-help/script-help.component.ts b/src/app/process-page/new/script-help/script-help.component.ts
index 0ff4a90ae4..7061e59730 100644
--- a/src/app/process-page/new/script-help/script-help.component.ts
+++ b/src/app/process-page/new/script-help/script-help.component.ts
@@ -1,11 +1,17 @@
 import { Component, Input } from '@angular/core';
 import { Script } from '../../scripts/script.model';
 
+/**
+ * Components that represents a help section for the script use and parameters
+ */
 @Component({
   selector: 'ds-script-help',
   templateUrl: './script-help.component.html',
   styleUrls: ['./script-help.component.scss']
 })
 export class ScriptHelpComponent {
+  /**
+   * The current script to show the help information for
+   */
   @Input() script: Script;
 }
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.html b/src/app/process-page/new/scripts-select/scripts-select.component.html
index 44b06079ae..d34947c137 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.html
@@ -12,7 +12,7 @@
     </select>
 
     <div *ngIf="script.invalid && (script.dirty || script.touched)"
-         class="alert alert-danger">
+         class="alert alert-danger validation-error">
         <div *ngIf="script.errors.required">
             {{'process.new.select-script.required' | translate}}
         </div>
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts b/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
index b433d633f1..f7e1f82735 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
@@ -1,25 +1,99 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
 import { ScriptsSelectComponent } from './scripts-select.component';
+import { MockTranslateLoader } from '../../../shared/testing/mock-translate-loader';
+import { Script } from '../../scripts/script.model';
+import { ScriptDataService } from '../../../core/data/processes/script-data.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../shared/testing/router-stub';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router-stub';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils';
+import { PaginatedList } from '../../../core/data/paginated-list';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('ScriptsSelectComponent', () => {
   let component: ScriptsSelectComponent;
   let fixture: ComponentFixture<ScriptsSelectComponent>;
+  let scriptService;
+  let script1;
+  let script2;
+
+  function init() {
+    script1 = new Script();
+    script2 = new Script();
+    scriptService = jasmine.createSpyObj('scriptService',
+      {
+        findAll: createSuccessfulRemoteDataObject$(new PaginatedList(undefined, [script1, script2]))
+      }
+    )
+  }
 
   beforeEach(async(() => {
+    init();
     TestBed.configureTestingModule({
-      declarations: [ ScriptsSelectComponent ]
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        })],
+      declarations: [ScriptsSelectComponent],
+      providers: [
+        { provide: ScriptDataService, useValue: scriptService },
+        { provide: Router, useClass: RouterStub },
+        { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ScriptsSelectComponent);
     component = fixture.componentInstance;
+    (component as any)._selectedScript = new Script();
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should not show a validation error if the input field was left untouched but left empty', () => {
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should show a validation error if the input field was touched but left empty', fakeAsync(() => {
+    (component as any)._selectedScript.id = '';
+    fixture.detectChanges();
+    tick();
+
+    const select = fixture.debugElement.query(By.css('select'));
+    select.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeTruthy();
+  }));
+
+  it('should not show a validation error if the input field was touched but not left empty', fakeAsync(() => {
+    (component as any)._selectedScript.id = 'testValue';
+    fixture.detectChanges();
+    tick();
+
+    const select = fixture.debugElement.query(By.css('select'));
+    select.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  }));
 });
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.ts b/src/app/process-page/new/scripts-select/scripts-select.component.ts
index c0daa94fb0..a3d3095bf9 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.ts
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.ts
@@ -6,10 +6,13 @@ import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shar
 import { PaginatedList } from '../../../core/data/paginated-list';
 import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { hasValue, hasValueOperator } from '../../../shared/empty.util';
+import { hasValue } from '../../../shared/empty.util';
 
 const SCRIPT_QUERY_PARAMETER = 'script';
 
+/**
+ * Component used to select a script
+ */
 @Component({
   selector: 'ds-scripts-select',
   templateUrl: './scripts-select.component.html',
@@ -28,6 +31,10 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
   ) {
   }
 
+  /**
+   * Sets all available scripts
+   * Checks if the route contains a script ID and auto selects this scripts
+   */
   ngOnInit() {
     this.scripts$ = this.scriptService.findAll({ elementsPerPage: Number.MAX_SAFE_INTEGER })
       .pipe(
@@ -55,10 +62,17 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
       });
   }
 
+  /**
+   * Returns the identifier of the selected script
+   */
   get selectedScript(): string {
     return this._selectedScript ? this._selectedScript.id : undefined;
   }
 
+  /**
+   * Sets the currently selected script by navigating to the correct route using the scripts ID
+   * @param value The identifier of the script
+   */
   set selectedScript(value: string) {
     this.router.navigate([],
       {
diff --git a/src/app/process-page/processes/process.model.ts b/src/app/process-page/processes/process.model.ts
index 4cf3d507a4..cd2c03d6f7 100644
--- a/src/app/process-page/processes/process.model.ts
+++ b/src/app/process-page/processes/process.model.ts
@@ -8,6 +8,9 @@ import { excludeFromEquals } from '../../core/utilities/equals.decorators';
 import { ResourceType } from '../../core/shared/resource-type';
 import { typedObject } from '../../core/cache/builders/build-decorators';
 
+/**
+ * Object representing a process
+ */
 @typedObject
 export class Process implements CacheableObject {
   static type = PROCESS;
diff --git a/src/app/process-page/scripts/script.model.ts b/src/app/process-page/scripts/script.model.ts
index 1cd3136c88..e94d233fc2 100644
--- a/src/app/process-page/scripts/script.model.ts
+++ b/src/app/process-page/scripts/script.model.ts
@@ -7,6 +7,9 @@ import { typedObject } from '../../core/cache/builders/build-decorators';
 import { excludeFromEquals } from '../../core/utilities/equals.decorators';
 import { ResourceType } from '../../core/shared/resource-type';
 
+/**
+ * Object representing a script
+ */
 @typedObject
 export class Script implements CacheableObject {
   static type = SCRIPT;
diff --git a/src/app/shared/uploader/uploader.component.ts b/src/app/shared/uploader/uploader.component.ts
index a5fce98ceb..935d196d08 100644
--- a/src/app/shared/uploader/uploader.component.ts
+++ b/src/app/shared/uploader/uploader.component.ts
@@ -113,15 +113,12 @@ export class UploaderComponent {
   ngAfterViewInit() {
     // Maybe to remove: needed to avoid CORS issue with our temp upload server
     this.uploader.onAfterAddingFile = ((item) => {
-      console.log(item);
-
       item.withCredentials = false;
     });
     if (isUndefined(this.onBeforeUpload)) {
       this.onBeforeUpload = () => {return};
     }
     this.uploader.onBeforeUploadItem = (item) => {
-
       if (item.url !== this.uploader.options.url) {
         item.url = this.uploader.options.url;
       }
@@ -146,8 +143,6 @@ export class UploaderComponent {
     };
     this.uploader.onProgressAll = () => this.onProgress();
     this.uploader.onProgressItem = () => this.onProgress();
-
-    console.log(this.uploader.options.formatDataFunction());
   }
 
   /**
diff --git a/src/app/shared/utils/file-value-accessor.directive.ts b/src/app/shared/utils/file-value-accessor.directive.ts
index 8c4f071cbe..bcd3381329 100644
--- a/src/app/shared/utils/file-value-accessor.directive.ts
+++ b/src/app/shared/utils/file-value-accessor.directive.ts
@@ -13,6 +13,9 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
         { provide: NG_VALUE_ACCESSOR, useExisting: FileValueAccessorDirective, multi: true }
     ]
 })
+/**
+ * Value accessor directive for inputs of type 'file'
+ */
 export class FileValueAccessorDirective implements ControlValueAccessor {
     value: any;
     onChange = (_) => { /* empty */ };
diff --git a/src/app/shared/utils/require-file.validator.ts b/src/app/shared/utils/require-file.validator.ts
index c6480e1715..9fa89c4188 100644
--- a/src/app/shared/utils/require-file.validator.ts
+++ b/src/app/shared/utils/require-file.validator.ts
@@ -8,9 +8,12 @@ import {NG_VALIDATORS, Validator, FormControl} from '@angular/forms';
         { provide: NG_VALIDATORS, useExisting: FileValidator, multi: true },
     ]
 })
+/**
+ * Validator directive to validate if a file is selected
+ */
 export class FileValidator implements Validator {
     static validate(c: FormControl): {[key: string]: any} {
-      return c.value == null || c.value.length === 0 ? { required : true} : null;
+      return c.value == null || c.value.length === 0 ? { required : true } : null;
     }
 
     validate(c: FormControl): {[key: string]: any} {

From e7a5daad1895b99a013331eaab683cb5eac04c79 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Wed, 25 Mar 2020 18:22:20 +0100
Subject: [PATCH 28/84] fixed tests and feedback

---
 resources/i18n/en.json5                       | 20 ++++++++
 .../data/processes/script-data.service.ts     | 17 ++++---
 .../new/new-process.component.html            | 13 ++++-
 .../new/new-process.component.spec.ts         | 18 ++++++-
 .../process-page/new/new-process.component.ts | 49 +++++++++++++++++--
 .../parameter-select.component.html           |  6 +--
 .../parameter-select.component.ts             | 12 ++++-
 .../boolean-value-input.component.html        |  2 +-
 .../boolean-value-input.component.ts          |  9 +++-
 .../date-value-input.component.html           |  2 +-
 .../date-value-input.component.ts             |  9 +++-
 .../file-value-input.component.html           |  9 ++--
 .../file-value-input.component.scss           |  6 +++
 .../file-value-input.component.spec.ts        |  4 +-
 .../file-value-input.component.ts             | 15 ++++--
 .../parameter-value-input.component.html      | 10 ++--
 .../parameter-value-input.component.ts        | 11 ++++-
 .../string-value-input.component.html         |  2 +-
 .../string-value-input.component.spec.ts      |  8 +--
 .../string-value-input.component.ts           |  9 +++-
 .../value-input.component.ts                  |  3 +-
 .../process-parameters.component.html         |  1 +
 .../process-parameters.component.ts           | 26 ++++++++--
 .../script-help/script-help.component.html    | 11 ++++-
 .../script-help/script-help.component.spec.ts | 15 +++++-
 .../new/script-help/script-help.component.ts  |  6 +++
 .../scripts-select.component.html             |  2 +-
 .../scripts-select.component.ts               |  9 +++-
 .../process-page-routing.module.ts            |  1 +
 29 files changed, 248 insertions(+), 57 deletions(-)

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 385fefd156..2f6c604bc4 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -1616,6 +1616,8 @@
 
   "process.new.select-parameters": "Parameters",
 
+  "process.new.cancel": "Cancel",
+
   "process.new.submit": "Submit",
 
   "process.new.select-script": "Script",
@@ -1630,6 +1632,24 @@
 
   "process.new.parameter.string.required": "Parameter value is required",
 
+  "process.new.parameter.type.value": "value",
+
+  "process.new.parameter.type.file": "file",
+
+  "process.new.parameter.required.missing": "The following parameters are required but still missing:",
+
+  "process.new.notification.success.title": "Success",
+
+  "process.new.notification.success.content": "The process was successfully created",
+
+  "process.new.notification.error.title": "Error",
+
+  "process.new.notification.error.content": "An error occurred while creating this process",
+
+  "process.new.header": "Create a new process",
+
+  "process.new.title": "Create a new process",
+
 
 
   "publication.listelement.badge": "Publication",
diff --git a/src/app/core/data/processes/script-data.service.ts b/src/app/core/data/processes/script-data.service.ts
index 6c7222451e..b18c993a52 100644
--- a/src/app/core/data/processes/script-data.service.ts
+++ b/src/app/core/data/processes/script-data.service.ts
@@ -10,10 +10,12 @@ import { HttpClient } from '@angular/common/http';
 import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
 import { Script } from '../../../process-page/scripts/script.model';
 import { ProcessParameter } from '../../../process-page/processes/process-parameter.model';
-import { map } from 'rxjs/operators';
+import { find, map, switchMap, tap } from 'rxjs/operators';
 import { URLCombiner } from '../../url-combiner/url-combiner';
 import { MultipartPostRequest, RestRequest } from '../request.models';
 import { RequestService } from '../request.service';
+import { Observable } from 'rxjs';
+import { RequestEntry } from '../request.reducer';
 
 @Injectable()
 export class ScriptDataService extends DataService<Script> {
@@ -31,15 +33,18 @@ export class ScriptDataService extends DataService<Script> {
     super();
   }
 
-  public invoke(scriptName: string, parameters: ProcessParameter[], files: File[]) {
-    this.getBrowseEndpoint().pipe(
+  public invoke(scriptName: string, parameters: ProcessParameter[], files: File[]): Observable<RequestEntry> {
+    const requestId = this.requestService.generateRequestId();
+    return this.getBrowseEndpoint().pipe(
       map((endpoint: string) => new URLCombiner(endpoint, scriptName, 'processes').toString()),
       map((endpoint: string) => {
         const body = this.getInvocationFormData(parameters, files);
-        return new MultipartPostRequest(this.requestService.generateRequestId(), endpoint, body)
+        return new MultipartPostRequest(requestId, endpoint, body)
       }),
-      map((request: RestRequest) => this.requestService.configure(request))
-    ).subscribe();
+      map((request: RestRequest) => this.requestService.configure(request)),
+      switchMap(() => this.requestService.getByUUID(requestId)),
+      find((request: RequestEntry) => request.completed)
+    );
   }
 
   private getInvocationFormData(parameters: ProcessParameter[], files: File[]): FormData {
diff --git a/src/app/process-page/new/new-process.component.html b/src/app/process-page/new/new-process.component.html
index dbda37c377..f965ae43e9 100644
--- a/src/app/process-page/new/new-process.component.html
+++ b/src/app/process-page/new/new-process.component.html
@@ -1,14 +1,25 @@
 <div class="container">
     <div class="row">
+        <h2 class="col-12">
+            {{'process.new.header' | translate}}
+        </h2>
         <div class="col-12 col-md-6">
             <form #form="ngForm" (ngSubmit)="submitForm(form)">
                 <ds-scripts-select (select)="selectedScript = $event"></ds-scripts-select>
                 <ds-process-parameters [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
-                <button [disabled]="form.invalid" type="submit" class="btn btn-light float-right">{{ 'process.new.submit' | translate }}</button>
+                <button [routerLink]="['/processes']" class="btn btn-light float-left">{{ 'process.new.cancel' | translate }}</button>
+                <button type="submit" class="btn btn-light float-right">{{ 'process.new.submit' | translate }}</button>
             </form>
         </div>
         <div class="col-12 col-md-6">
             <ds-script-help [script]="selectedScript"></ds-script-help>
         </div>
     </div>
+
+    <div *ngIf="missingParameters.length > 0" class="alert alert-danger validation-error">
+        {{'process.new.parameter.required.missing' | translate}}
+        <ul>
+            <li *ngFor="let missing of missingParameters">{{missing}}</li>
+        </ul>
+    </div>
 </div>
diff --git a/src/app/process-page/new/new-process.component.spec.ts b/src/app/process-page/new/new-process.component.spec.ts
index ed05dc9a33..081bd36528 100644
--- a/src/app/process-page/new/new-process.component.spec.ts
+++ b/src/app/process-page/new/new-process.component.spec.ts
@@ -9,6 +9,9 @@ import { MockTranslateLoader } from '../../shared/testing/mock-translate-loader'
 import { ScriptParameter } from '../scripts/script-parameter.model';
 import { Script } from '../scripts/script.model';
 import { ProcessParameter } from '../processes/process-parameter.model';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service-stub';
+import { of as observableOf } from 'rxjs';
 
 describe('NewProcessComponent', () => {
   let component: NewProcessComponent;
@@ -26,7 +29,17 @@ describe('NewProcessComponent', () => {
       Object.assign(new ProcessParameter(), { name: '-b', value: '123' }),
       Object.assign(new ProcessParameter(), { name: '-c', value: 'value' }),
     ];
-    scriptService = jasmine.createSpyObj('scriptService', ['invoke'])
+    scriptService = jasmine.createSpyObj(
+      'scriptService',
+      {
+        invoke: observableOf({
+          response:
+            {
+              isSuccessful: true
+            }
+        })
+      }
+    )
   }
 
   beforeEach(async(() => {
@@ -43,6 +56,7 @@ describe('NewProcessComponent', () => {
       declarations: [NewProcessComponent],
       providers: [
         { provide: ScriptDataService, useValue: scriptService },
+        { provide: NotificationsService, useValue: NotificationsServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })
@@ -62,7 +76,7 @@ describe('NewProcessComponent', () => {
   });
 
   it('should call invoke on the scriptService on submit', () => {
-    component.submitForm({ invalid: false });
+    component.submitForm({ invalid: false } as any);
     expect(scriptService.invoke).toHaveBeenCalled();
   });
 });
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
index 05cb4384af..9d45354651 100644
--- a/src/app/process-page/new/new-process.component.ts
+++ b/src/app/process-page/new/new-process.component.ts
@@ -3,7 +3,13 @@ import { Script } from '../scripts/script.model';
 import { Process } from '../processes/process.model';
 import { ProcessParameter } from '../processes/process-parameter.model';
 import { ScriptDataService } from '../../core/data/processes/script-data.service';
-import { NgForm } from '@angular/forms';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { ScriptParameter } from '../scripts/script-parameter.model';
+import { RequestEntry } from '../../core/data/request.reducer';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { TranslateService } from '@ngx-translate/core';
+import { take } from 'rxjs/operators';
+import { pipe } from 'rxjs';
 
 /**
  * Component to create a new script
@@ -27,14 +33,19 @@ export class NewProcessComponent implements OnInit {
   /**
    * The parameter values to use to start the process
    */
-  public parameters: ProcessParameter[];
+  public parameters: ProcessParameter[] = [];
 
   /**
    * Optional files that are used as parameter values
    */
   public files: File[] = [];
 
-  constructor(private scriptService: ScriptDataService) {
+  /**
+   * Contains the missing parameters on submission
+   */
+  public missingParameters = [];
+
+  constructor(private scriptService: ScriptDataService, private notificationsService: NotificationsService, private translationService: TranslateService) {
   }
 
   ngOnInit(): void {
@@ -46,7 +57,7 @@ export class NewProcessComponent implements OnInit {
    * @param form
    */
   submitForm(form: NgForm) {
-    if (!this.validateForm(form)) {
+    if (!this.validateForm(form) || this.isRequiredMissing()) {
       return;
     }
 
@@ -58,6 +69,18 @@ export class NewProcessComponent implements OnInit {
       }
     );
     this.scriptService.invoke(this.selectedScript.id, stringParameters, this.files)
+      .pipe(take(1))
+      .subscribe((requestEntry: RequestEntry) => {
+        if (requestEntry.response.isSuccessful) {
+          const title = this.translationService.get('process.new.notification.success.title');
+          const content = this.translationService.get('process.new.notification.success.content');
+          this.notificationsService.success(title, content)
+        } else {
+          const title = this.translationService.get('process.new.notification.error.title');
+          const content = this.translationService.get('process.new.notification.error.content');
+          this.notificationsService.error(title, content)
+        }
+      })
   }
 
   /**
@@ -69,7 +92,7 @@ export class NewProcessComponent implements OnInit {
     if (typeof processParameter.value === 'object') {
       this.files = [...this.files, processParameter.value];
       return processParameter.value.name;
-  }
+    }
     return processParameter.value;
   }
 
@@ -88,4 +111,20 @@ export class NewProcessComponent implements OnInit {
     }
     return true;
   }
+
+  private isRequiredMissing() {
+    const setParams: string[] = this.parameters
+      .map((param) => param.name);
+    const requiredParams: ScriptParameter[] = this.selectedScript.parameters.filter((param) => param.mandatory)
+    for (const rp of requiredParams) {
+      if (!setParams.includes(rp.name)) {
+        this.missingParameters.push(rp.name);
+      }
+    }
+    return this.missingParameters.length > 0;
+  }
+}
+
+export function controlContainerFactory(controlContainer?: ControlContainer) {
+  return controlContainer;
 }
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
index 5b73c35f53..81f9c600ec 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
@@ -1,7 +1,7 @@
 <div class="form-row mb-2">
-        <select required id="process-parameters"
+        <select id="process-parameters"
                 class="form-control col"
-                name="script"
+                name="parameter-{{index}}"
                 [(ngModel)]="selectedParameter"
                 #param="ngModel">
             <option [ngValue]="undefined">Add a parameter...</option>
@@ -9,7 +9,7 @@
                 {{param.nameLong || param.name}}
             </option>
         </select>
-        <ds-parameter-value-input [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col"></ds-parameter-value-input>
+        <ds-parameter-value-input [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col" [index]="index"></ds-parameter-value-input>
         <button *ngIf="removable" class="btn btn-light col-1 remove-button" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
         <span *ngIf="!removable" class="col-1"></span>
 </div>
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
index a9d5193b9e..0c3dc0d55a 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
@@ -1,7 +1,9 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, Optional } from '@angular/core';
 import { ProcessParameter } from '../../../processes/process-parameter.model';
 import { ScriptParameter } from '../../../scripts/script-parameter.model';
 import { hasNoValue } from '../../../../shared/empty.util';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../new-process.component';
 
 /**
  * Component to select a single parameter for a process
@@ -9,13 +11,19 @@ import { hasNoValue } from '../../../../shared/empty.util';
 @Component({
   selector: 'ds-parameter-select',
   templateUrl: './parameter-select.component.html',
-  styleUrls: ['./parameter-select.component.scss']
+  styleUrls: ['./parameter-select.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
 })
 export class ParameterSelectComponent implements OnInit {
+  @Input() index: number;
+
   /**
    * The current parameter value of the selected parameter
    */
   @Input() parameterValue: ProcessParameter;
+
   /**
    * The available script parameters for the script
    */
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
index 85b27713d2..914b331413 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
@@ -1 +1 @@
-<input type="hidden" value="true"/>
+<input type="hidden" value="true" name="boolean-value-{{index}}" id="boolean-value-{{index}}"/>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
index c75c5cf240..383c9e9f97 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Optional } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../../new-process.component';
 
 /**
  * Represents the value of a boolean parameter
@@ -7,7 +9,10 @@ import { ValueInputComponent } from '../value-input.component';
 @Component({
   selector: 'ds-boolean-value-input',
   templateUrl: './boolean-value-input.component.html',
-  styleUrls: ['./boolean-value-input.component.scss']
+  styleUrls: ['./boolean-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
 })
 export class BooleanValueInputComponent extends ValueInputComponent<boolean> implements OnInit {
   ngOnInit() {
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
index 7eeca02974..f367d3779f 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
@@ -1,4 +1,4 @@
-<input required #string="ngModel" type="text" class="form-control" id="string-value-input" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<input required #string="ngModel" type="text" class="form-control" name="date-value-{{index}}" id="date-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
 <div *ngIf="string.invalid && (string.dirty || string.touched)"
      class="alert alert-danger validation-error">
     <div *ngIf="string.errors.required">
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
index 7476e2ac6b..37e6385791 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Optional } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../../new-process.component';
 
 /**
  * Represents the user inputted value of a date parameter
@@ -7,7 +9,10 @@ import { ValueInputComponent } from '../value-input.component';
 @Component({
   selector: 'ds-date-value-input',
   templateUrl: './date-value-input.component.html',
-  styleUrls: ['./date-value-input.component.scss']
+  styleUrls: ['./date-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
 })
 export class DateValueInputComponent extends ValueInputComponent<string> {
   /**
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
index 9f61141a00..5798b88c7f 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -1,7 +1,10 @@
-<label for="file-upload" class="btn btn-light">
-    {{'process.new.parameter.file.upload-button' | translate}}
+<label for="file-upload-{{index}}" class="d-flex align-items-center">
+    <span class="btn btn-light">
+        {{'process.new.parameter.file.upload-button' | translate}}
+    </span>
+    <span class="file-name ml-1">{{fileObject?.name}}</span>
 </label>
-<input requireFile #file="ngModel" type="file" id="file-upload" class="form-control-file d-none" [ngModel]="file" (ngModelChange)="setFile($event)"/>
+<input requireFile #file="ngModel" type="file" name="file-upload-{{index}}" id="file-upload-{{index}}" class="form-control-file d-none" [ngModel]="fileObject" (ngModelChange)="setFile($event)"/>
 <div *ngIf="file.invalid && (file.dirty || file.touched)"
      class="alert alert-danger validation-error">
     <div *ngIf="file.errors.required">
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
index e69de29bb2..29ea31add0 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
@@ -0,0 +1,6 @@
+.file-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
index a1d5b0dc43..68d9fded4a 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
@@ -1,6 +1,6 @@
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NgForm, ReactiveFormsModule } from '@angular/forms';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { MockTranslateLoader } from '../../../../../shared/mocks/mock-translate-loader';
 import { By } from '@angular/platform-browser';
@@ -9,7 +9,7 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { FileValueAccessorDirective } from '../../../../../shared/utils/file-value-accessor.directive';
 import { FileValidator } from '../../../../../shared/utils/require-file.validator';
 
-describe('FileValueInputComponent', () => {
+‡describe('FileValueInputComponent', () => {
   let component: FileValueInputComponent;
   let fixture: ComponentFixture<FileValueInputComponent>;
 
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
index da16119d35..b0c16eb2de 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, Optional } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../../new-process.component';
 
 /**
  * Represents the user inputted value of a file parameter
@@ -7,15 +9,18 @@ import { ValueInputComponent } from '../value-input.component';
 @Component({
   selector: 'ds-file-value-input',
   templateUrl: './file-value-input.component.html',
-  styleUrls: ['./file-value-input.component.scss']
+  styleUrls: ['./file-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
 })
 export class FileValueInputComponent extends ValueInputComponent<File> {
   /**
    * The current value of the file
    */
-  file: File;
+  fileObject: File;
   setFile(files) {
-    this.file = files.length > 0 ? files[0] : undefined;
-    this.updateValue.emit(this.file);
+    this.fileObject = files.length > 0 ? files[0] : undefined;
+    this.updateValue.emit(this.fileObject);
   }
 }
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
index 15261975b9..934c26d46d 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
@@ -1,7 +1,7 @@
 <div [ngSwitch]="parameter?.type">
-  <ds-string-value-input *ngSwitchCase="parameterTypes.STRING" (updateValue)="updateValue.emit($event)"></ds-string-value-input>
-  <ds-string-value-input *ngSwitchCase="parameterTypes.OUTPUT" (updateValue)="updateValue.emit($event)"></ds-string-value-input>
-  <ds-date-value-input *ngSwitchCase="parameterTypes.DATE" (updateValue)="updateValue.emit($event)"></ds-date-value-input>
-  <ds-file-value-input *ngSwitchCase="parameterTypes.FILE" (updateValue)="updateValue.emit($event)"></ds-file-value-input>
-  <ds-boolean-value-input *ngSwitchCase="parameterTypes.BOOLEAN" (updateValue)="updateValue.emit($event)"></ds-boolean-value-input>
+  <ds-string-value-input *ngSwitchCase="parameterTypes.STRING" (updateValue)="updateValue.emit($event)" [index]="index"></ds-string-value-input>
+  <ds-string-value-input *ngSwitchCase="parameterTypes.OUTPUT" (updateValue)="updateValue.emit($event)" [index]="index"></ds-string-value-input>
+  <ds-date-value-input *ngSwitchCase="parameterTypes.DATE" (updateValue)="updateValue.emit($event)" [index]="index"></ds-date-value-input>
+  <ds-file-value-input *ngSwitchCase="parameterTypes.FILE" (updateValue)="updateValue.emit($event)" [index]="index"></ds-file-value-input>
+  <ds-boolean-value-input *ngSwitchCase="parameterTypes.BOOLEAN" (updateValue)="updateValue.emit($event)" [index]="index"></ds-boolean-value-input>
 </div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
index 42479f4041..bcc9b49192 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
@@ -1,6 +1,8 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output } from '@angular/core';
 import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
 import { ScriptParameter } from '../../../scripts/script-parameter.model';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../new-process.component';
 
 /**
  * Component that renders the correct parameter value input based the script parameter's type
@@ -8,9 +10,14 @@ import { ScriptParameter } from '../../../scripts/script-parameter.model';
 @Component({
   selector: 'ds-parameter-value-input',
   templateUrl: './parameter-value-input.component.html',
-  styleUrls: ['./parameter-value-input.component.scss']
+  styleUrls: ['./parameter-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
 })
 export class ParameterValueInputComponent {
+  @Input() index: number;
+
   /**
    * The current script parameter
    */
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
index 7eeca02974..246c62a0f6 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
@@ -1,4 +1,4 @@
-<input required #string="ngModel" type="text" class="form-control" id="string-value-input" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<input required #string="ngModel" type="text" name="string-value-{{index}}" class="form-control" id="string-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
 <div *ngIf="string.invalid && (string.dirty || string.touched)"
      class="alert alert-danger validation-error">
     <div *ngIf="string.errors.required">
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
index c6f04ada20..c04b8034b6 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
@@ -1,6 +1,6 @@
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NgForm } from '@angular/forms';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { MockTranslateLoader } from '../../../../../shared/mocks/mock-translate-loader';
 import { By } from '@angular/platform-browser';
@@ -20,7 +20,9 @@ describe('StringValueInputComponent', () => {
             useClass: MockTranslateLoader
           }
         })],
-      declarations: [StringValueInputComponent]
+      declarations: [StringValueInputComponent],
+      providers: [
+      ]
     })
       .compileComponents();
   }));
@@ -40,7 +42,7 @@ describe('StringValueInputComponent', () => {
     expect(validationError).toBeFalsy();
   });
 
-  it('should show a validation error if the input field was touched but left empty',  fakeAsync(() => {
+  it('should show a validation error if the input field was touched but left empty', fakeAsync(() => {
     component.value = '';
     fixture.detectChanges();
     tick();
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
index bfcc277b3d..02a16b367b 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, Optional } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../../new-process.component';
 
 /**
  * Represents the user inputted value of a string parameter
@@ -7,7 +9,10 @@ import { ValueInputComponent } from '../value-input.component';
 @Component({
   selector: 'ds-string-value-input',
   templateUrl: './string-value-input.component.html',
-  styleUrls: ['./string-value-input.component.scss']
+  styleUrls: ['./string-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
 })
 export class StringValueInputComponent extends ValueInputComponent<string> {
   /**
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
index a46e059407..9e9a091dcd 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
@@ -1,9 +1,10 @@
-import { EventEmitter, Output } from '@angular/core';
+import { EventEmitter, Input, Output } from '@angular/core';
 
 /**
  * Abstract class that represents value input components
  */
 export abstract class ValueInputComponent<T> {
+  @Input() index: number;
   /**
    * Used by the subclasses to emit the value when it's updated
    */
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.html b/src/app/process-page/new/process-parameters/process-parameters.component.html
index 24e9c9b1e3..d7bbce6779 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.html
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.html
@@ -5,6 +5,7 @@
             [parameters]="script.parameters"
             [parameterValue]="value"
             [removable]="!last"
+            [index]="i"
             (removeParameter)="removeParameter(i)"
             (changeParameter)="updateParameter($event, i)"></ds-parameter-select>
 </div>
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.ts b/src/app/process-page/new/process-parameters/process-parameters.component.ts
index 765410dc8d..8df2ac4b31 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.ts
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.ts
@@ -1,7 +1,10 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Optional, Output, SimpleChanges } from '@angular/core';
 import { Script } from '../../scripts/script.model';
 import { ProcessParameter } from '../../processes/process-parameter.model';
 import { hasValue } from '../../../shared/empty.util';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { ScriptParameter } from '../../scripts/script-parameter.model';
+import { controlContainerFactory } from '../new-process.component';
 
 /**
  * Component that represents the selected list of parameters for a script
@@ -9,7 +12,10 @@ import { hasValue } from '../../../shared/empty.util';
 @Component({
   selector: 'ds-process-parameters',
   templateUrl: './process-parameters.component.html',
-  styleUrls: ['./process-parameters.component.scss']
+  styleUrls: ['./process-parameters.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
 })
 export class ProcessParametersComponent implements OnChanges {
   /**
@@ -42,7 +48,7 @@ export class ProcessParametersComponent implements OnChanges {
    */
   initParameters() {
     this.parameterValues = [];
-    this.addParameter();
+    this.initializeParameter();
   }
 
   /**
@@ -67,6 +73,20 @@ export class ProcessParametersComponent implements OnChanges {
     this.parameterValues = this.parameterValues.filter((value, i) => i !== index);
   }
 
+  /**
+   * Initializes parameter values based on the selected script
+   */
+  initializeParameter() {
+    if (hasValue(this.script)) {
+      this.parameterValues = this.script.parameters
+        .filter((param) => param.mandatory)
+        .map(
+          (parameter: ScriptParameter) => Object.assign(new ProcessParameter(), { name: parameter.name })
+        );
+    }
+    this.addParameter();
+  }
+
   /**
    * Adds an empty parameter value to the end of the list
    */
diff --git a/src/app/process-page/new/script-help/script-help.component.html b/src/app/process-page/new/script-help/script-help.component.html
index a9bb114f2e..49a109b459 100644
--- a/src/app/process-page/new/script-help/script-help.component.html
+++ b/src/app/process-page/new/script-help/script-help.component.html
@@ -3,7 +3,16 @@
 
 <table class="table-borderless mt-3 text-secondary">
     <tr *ngFor="let param of script?.parameters">
-        <td>{{param.name}} {{param.nameLong}} {{param.type !== 'boolean' ? '<' + param.type + '>' : ''}}</td>
+        <td class="align-top text-nowrap">{{param.name}} {{param.nameLong}} <ng-container *ngTemplateOutlet="type; context: param"></ng-container></td>
         <td>{{param.description}}</td>
     </tr>
 </table>
+
+<ng-template #type let-type="type">
+    <ng-container [ngSwitch]="type">
+        <span *ngSwitchCase="parameterTypes.DATE"><{{'process.new.parameter.type.value' | translate}}></span>
+        <span *ngSwitchCase="parameterTypes.STRING"><{{'process.new.parameter.type.value' | translate}}></span>
+        <span *ngSwitchCase="parameterTypes.OUTPUT"><{{'process.new.parameter.type.value' | translate}}></span>
+        <span *ngSwitchCase="parameterTypes.FILE"><{{'process.new.parameter.type.file' | translate}}></span>
+    </ng-container>
+</ng-template>
diff --git a/src/app/process-page/new/script-help/script-help.component.spec.ts b/src/app/process-page/new/script-help/script-help.component.spec.ts
index 6ebcb5b6c3..4ca582e83e 100644
--- a/src/app/process-page/new/script-help/script-help.component.spec.ts
+++ b/src/app/process-page/new/script-help/script-help.component.spec.ts
@@ -5,6 +5,10 @@ import { ScriptParameter } from '../../scripts/script-parameter.model';
 import { Script } from '../../scripts/script.model';
 import { ScriptParameterType } from '../../scripts/script-parameter-type.model';
 import { By } from '@angular/platform-browser';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
+import { MockTranslateLoader } from '../../../shared/testing/mock-translate-loader';
 
 describe('ScriptHelpComponent', () => {
   let component: ScriptHelpComponent;
@@ -25,7 +29,16 @@ describe('ScriptHelpComponent', () => {
   beforeEach(async(() => {
     init();
     TestBed.configureTestingModule({
-      declarations: [ ScriptHelpComponent ]
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        })],
+      declarations: [ ScriptHelpComponent ],
+      schemas: [NO_ERRORS_SCHEMA]
     })
     .compileComponents();
   }));
diff --git a/src/app/process-page/new/script-help/script-help.component.ts b/src/app/process-page/new/script-help/script-help.component.ts
index 7061e59730..7e230a4a42 100644
--- a/src/app/process-page/new/script-help/script-help.component.ts
+++ b/src/app/process-page/new/script-help/script-help.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Script } from '../../scripts/script.model';
+import { ScriptParameterType } from '../../scripts/script-parameter-type.model';
 
 /**
  * Components that represents a help section for the script use and parameters
@@ -14,4 +15,9 @@ export class ScriptHelpComponent {
    * The current script to show the help information for
    */
   @Input() script: Script;
+
+  /**
+   * The available script parameter types
+   */
+  parameterTypes = ScriptParameterType;
 }
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.html b/src/app/process-page/new/scripts-select/scripts-select.component.html
index d34947c137..9cd86d1a6d 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.html
@@ -1,5 +1,5 @@
 <div class="form-group" *ngIf="scripts$ | async">
-    <label for="process-script"><label>{{'process.new.select-script' | translate}}</label></label>
+    <label for="process-script">{{'process.new.select-script' | translate}}</label>
     <select required id="process-script"
             class="form-control"
             name="script"
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.ts b/src/app/process-page/new/scripts-select/scripts-select.component.ts
index a3d3095bf9..475dfd0798 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.ts
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Optional, Output } from '@angular/core';
 import { ScriptDataService } from '../../../core/data/processes/script-data.service';
 import { Script } from '../../scripts/script.model';
 import { Observable, Subscription } from 'rxjs';
@@ -7,6 +7,8 @@ import { PaginatedList } from '../../../core/data/paginated-list';
 import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { hasValue } from '../../../shared/empty.util';
+import { ControlContainer, FormControl, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../new-process.component';
 
 const SCRIPT_QUERY_PARAMETER = 'script';
 
@@ -16,7 +18,10 @@ const SCRIPT_QUERY_PARAMETER = 'script';
 @Component({
   selector: 'ds-scripts-select',
   templateUrl: './scripts-select.component.html',
-  styleUrls: ['./scripts-select.component.scss']
+  styleUrls: ['./scripts-select.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
 })
 export class ScriptsSelectComponent implements OnInit, OnDestroy {
   @Output() select: EventEmitter<Script> = new EventEmitter<Script>();
diff --git a/src/app/process-page/process-page-routing.module.ts b/src/app/process-page/process-page-routing.module.ts
index d8ed79f039..bfa7b59193 100644
--- a/src/app/process-page/process-page-routing.module.ts
+++ b/src/app/process-page/process-page-routing.module.ts
@@ -8,6 +8,7 @@ import { NewProcessComponent } from './new/new-process.component';
       {
         path: 'new',
         component: NewProcessComponent,
+        data: { title: 'process.new.title' }
       },
     ])
   ]

From 428abc8282c4c2730cf61df59e8c31d8b17998f7 Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Thu, 26 Mar 2020 11:39:27 +0100
Subject: [PATCH 29/84] fix file padding and help text color

---
 .../file-value-input.component.html              |  2 +-
 .../new/script-help/script-help.component.html   | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
index 5798b88c7f..cac3fbd82d 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -1,4 +1,4 @@
-<label for="file-upload-{{index}}" class="d-flex align-items-center">
+<label for="file-upload-{{index}}" class="d-flex align-items-center m-0">
     <span class="btn btn-light">
         {{'process.new.parameter.file.upload-button' | translate}}
     </span>
diff --git a/src/app/process-page/new/script-help/script-help.component.html b/src/app/process-page/new/script-help/script-help.component.html
index 49a109b459..f52ae4b6b9 100644
--- a/src/app/process-page/new/script-help/script-help.component.html
+++ b/src/app/process-page/new/script-help/script-help.component.html
@@ -1,12 +1,16 @@
-<h3>{{script?.name}}</h3>
-<span>{{script?.description}}</span>
+<div class="text-secondary">
+  <h3>{{script?.name}}</h3>
+  <span>{{script?.description}}</span>
 
-<table class="table-borderless mt-3 text-secondary">
+  <table class="table-borderless mt-3">
     <tr *ngFor="let param of script?.parameters">
-        <td class="align-top text-nowrap">{{param.name}} {{param.nameLong}} <ng-container *ngTemplateOutlet="type; context: param"></ng-container></td>
-        <td>{{param.description}}</td>
+      <td class="align-top text-nowrap">{{param.name}} {{param.nameLong}}
+        <ng-container *ngTemplateOutlet="type; context: param"></ng-container>
+      </td>
+      <td>{{param.description}}</td>
     </tr>
-</table>
+  </table>
+</div>
 
 <ng-template #type let-type="type">
     <ng-container [ngSwitch]="type">

From eacc13a95c1f9640c111fae364f0685d9f11d396 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 20 Mar 2020 17:11:17 +0100
Subject: [PATCH 30/84] 69940: Process overview page

---
 resources/i18n/en.json5                       | 16 ++++
 .../overview/process-overview.component.html  | 33 ++++++++
 .../overview/process-overview.component.ts    | 81 +++++++++++++++++++
 .../process-page-routing.module.ts            |  5 ++
 src/app/process-page/process-page.module.ts   |  2 +
 5 files changed, 137 insertions(+)
 create mode 100644 src/app/process-page/overview/process-overview.component.html
 create mode 100644 src/app/process-page/overview/process-overview.component.ts

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 2f6c604bc4..6a9b460014 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -1534,6 +1534,22 @@
 
 
 
+  "process.page.overview.table.finish" : "Finish time",
+
+  "process.page.overview.table.id" : "Process ID",
+
+  "process.page.overview.table.name" : "Name",
+
+  "process.page.overview.table.start" : "Start time",
+
+  "process.page.overview.table.status" : "Status",
+
+  "process.page.overview.table.user" : "User",
+
+  "process.page.overview.title": "Processes Overview",
+
+
+
   "profile.breadcrumbs": "Update Profile",
 
   "profile.card.identify": "Identify",
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
new file mode 100644
index 0000000000..fef4b72776
--- /dev/null
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -0,0 +1,33 @@
+<div class="container">
+  <h2>{{'process.page.overview.title' | translate}}</h2>
+  <ds-pagination  *ngIf="(processesRD$ | async)?.payload?.totalElements > 0"
+                  [paginationOptions]="pageConfig"
+                  [pageInfoState]="(processesRD$ | async)?.payload"
+                  [collectionSize]="(processesRD$ | async)?.payload?.totalElements"
+                  [hideGear]="true"
+                  [hidePagerWhenSinglePage]="true"
+                  (pageChange)="onPageChange($event)">
+    <table class="table table-striped table-hover table-responsive">
+      <thead>
+        <tr>
+          <th scope="col">{{'process.page.overview.table.id' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.name' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.user' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.start' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.finish' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.status' | translate}}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let process of (processesRD$ | async)?.payload?.page">
+          <td><a [routerLink]="['/processes/', process.processId]">{{process.processId}}</a></td>
+          <td><a [routerLink]="['/processes/', process.processId]">{{process.scriptName}}</a></td>
+          <td *ngVar="(getEpersonName(process.userId) | async) as ePersonName">{{ePersonName}}</td>
+          <td>{{process.startTime}}</td>
+          <td>{{process.endTime}}</td>
+          <td>{{process.processStatus}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </ds-pagination>
+</div>
diff --git a/src/app/process-page/overview/process-overview.component.ts b/src/app/process-page/overview/process-overview.component.ts
new file mode 100644
index 0000000000..67f03b07b3
--- /dev/null
+++ b/src/app/process-page/overview/process-overview.component.ts
@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { ProcessDataService } from '../processes/process-data.service';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { PaginatedList } from '../../core/data/paginated-list';
+import { Process } from '../processes/process.model';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { FindListOptions } from '../../core/data/request.models';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'ds-process-overview',
+  templateUrl: './process-overview.component.html',
+})
+/**
+ * Component displaying a list of all processes in a paginated table
+ */
+export class ProcessOverviewComponent implements OnInit {
+
+  /**
+   * List of all processes
+   */
+  processesRD$: Observable<RemoteData<PaginatedList<Process>>>;
+
+  /**
+   * The current pagination configuration for the page used by the FindAll method
+   */
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+
+  /**
+   * The current pagination configuration for the page
+   */
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'process-overview-pagination',
+    pageSize: 20
+  });
+
+  constructor(protected processService: ProcessDataService,
+              protected ePersonService: EPersonDataService) {
+  }
+
+  ngOnInit(): void {
+    this.setProcesses();
+  }
+
+  /**
+   * When the page is changed, make sure to update the list of processes to match the new page
+   * @param event The page change event
+   */
+  onPageChange(event) {
+    this.config = Object.assign(new FindListOptions(), this.config, {
+      currentPage: event,
+    });
+    this.pageConfig.currentPage = event;
+    this.setProcesses();
+  }
+
+  /**
+   * Send a request to fetch all processes for the current page
+   */
+  setProcesses() {
+    this.processesRD$ = this.processService.findAll(this.config);
+  }
+
+  /**
+   * Get the name of an EPerson by ID
+   * @param id  ID of the EPerson
+   */
+  getEpersonName(id: string): Observable<string> {
+    return this.ePersonService.findById(id).pipe(
+      getFirstSucceededRemoteDataPayload(),
+      map((eperson: EPerson) => eperson.name)
+    );
+  }
+
+}
diff --git a/src/app/process-page/process-page-routing.module.ts b/src/app/process-page/process-page-routing.module.ts
index bfa7b59193..6a73c4d210 100644
--- a/src/app/process-page/process-page-routing.module.ts
+++ b/src/app/process-page/process-page-routing.module.ts
@@ -1,10 +1,15 @@
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { NewProcessComponent } from './new/new-process.component';
+import { ProcessOverviewComponent } from './overview/process-overview.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
+      {
+        path: '',
+        component: ProcessOverviewComponent,
+      },
       {
         path: 'new',
         component: NewProcessComponent,
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index 3652efe825..4e0155661b 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -11,6 +11,7 @@ import { ParameterValueInputComponent } from './new/process-parameters/parameter
 import { FileValueInputComponent } from './new/process-parameters/parameter-value-input/file-value-input/file-value-input.component';
 import { BooleanValueInputComponent } from './new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component';
 import { DateValueInputComponent } from './new/process-parameters/parameter-value-input/date-value-input/date-value-input.component';
+import { ProcessOverviewComponent } from './overview/process-overview.component';
 
 @NgModule({
   imports: [
@@ -28,6 +29,7 @@ import { DateValueInputComponent } from './new/process-parameters/parameter-valu
     FileValueInputComponent,
     BooleanValueInputComponent,
     DateValueInputComponent,
+    ProcessOverviewComponent
   ],
   entryComponents: []
 })

From 07a5dceed10784c175cf7171e53680d0198efd52 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Mon, 23 Mar 2020 11:20:48 +0100
Subject: [PATCH 31/84] 69940: Process detail page intermediate commit

---
 resources/i18n/en.json5                       |  2 ++
 .../data/processes/process-data.service.ts    |  3 ++
 .../data/processes/script-data.service.ts     |  3 ++
 .../process-detail-field.component.html       |  2 ++
 .../process-detail-field.component.ts         |  9 ++++++
 .../detail/process-detail.component.html      |  7 +++++
 .../detail/process-detail.component.ts        | 28 +++++++++++++++++
 .../process-page-routing.module.ts            | 12 +++++++
 src/app/process-page/process-page.module.ts   |  6 +++-
 src/app/process-page/process-page.resolver.ts | 31 +++++++++++++++++++
 .../process-page/processes/process.model.ts   | 15 ++++++++-
 11 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 src/app/process-page/detail/process-detail-field/process-detail-field.component.html
 create mode 100644 src/app/process-page/detail/process-detail-field/process-detail-field.component.ts
 create mode 100644 src/app/process-page/detail/process-detail.component.html
 create mode 100644 src/app/process-page/detail/process-detail.component.ts
 create mode 100644 src/app/process-page/process-page.resolver.ts

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 6a9b460014..3d586fab44 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -1534,6 +1534,8 @@
 
 
 
+  "process.page.detail.title" : "Process: {{ id }} - {{ name }}",
+
   "process.page.overview.table.finish" : "Finish time",
 
   "process.page.overview.table.id" : "Process ID",
diff --git a/src/app/core/data/processes/process-data.service.ts b/src/app/core/data/processes/process-data.service.ts
index a2e34dd699..7d1d08eeca 100644
--- a/src/app/core/data/processes/process-data.service.ts
+++ b/src/app/core/data/processes/process-data.service.ts
@@ -10,8 +10,11 @@ import { NotificationsService } from '../../../shared/notifications/notification
 import { HttpClient } from '@angular/common/http';
 import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
 import { Process } from '../../../process-page/processes/process.model';
+import { dataService } from '../../cache/builders/build-decorators';
+import { PROCESS } from '../../../process-page/processes/process.resource-type';
 
 @Injectable()
+@dataService(PROCESS)
 export class ProcessDataService extends DataService<Process> {
   protected linkPath = 'processes';
 
diff --git a/src/app/core/data/processes/script-data.service.ts b/src/app/core/data/processes/script-data.service.ts
index b18c993a52..b5bfca075f 100644
--- a/src/app/core/data/processes/script-data.service.ts
+++ b/src/app/core/data/processes/script-data.service.ts
@@ -16,8 +16,11 @@ import { MultipartPostRequest, RestRequest } from '../request.models';
 import { RequestService } from '../request.service';
 import { Observable } from 'rxjs';
 import { RequestEntry } from '../request.reducer';
+import { dataService } from '../../cache/builders/build-decorators';
+import { SCRIPT } from '../../../process-page/scripts/script.resource-type';
 
 @Injectable()
+@dataService(SCRIPT)
 export class ScriptDataService extends DataService<Script> {
   protected linkPath = 'scripts';
 
diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.html b/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
new file mode 100644
index 0000000000..2db51f030d
--- /dev/null
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
@@ -0,0 +1,2 @@
+<h4 class="mt-3">{{title | translate}}</h4>
+<ng-content></ng-content>
diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts b/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts
new file mode 100644
index 0000000000..0c3dfd725a
--- /dev/null
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts
@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-process-detail-field',
+  templateUrl: './process-detail-field.component.html',
+})
+export class ProcessDetailFieldComponent {
+  @Input() title: string;
+}
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
new file mode 100644
index 0000000000..e1d91b64d2
--- /dev/null
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -0,0 +1,7 @@
+<div class="container" *ngVar="(processRD$ | async)?.payload as process">
+  <h2>{{'process.page.detail.title' | translate:{ id: process?.id, name: process?.scriptName } }}</h2>
+
+  <ds-process-detail-field [title]="'process.page.detail.script'">
+    <div>{{ process?.scriptName }}</div>
+  </ds-process-detail-field>
+</div>
diff --git a/src/app/process-page/detail/process-detail.component.ts b/src/app/process-page/detail/process-detail.component.ts
new file mode 100644
index 0000000000..922aef219f
--- /dev/null
+++ b/src/app/process-page/detail/process-detail.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { Process } from '../processes/process.model';
+import { map } from 'rxjs/operators';
+import { redirectToPageNotFoundOn404 } from '../../core/shared/operators';
+
+@Component({
+  selector: 'ds-process-detail',
+  templateUrl: './process-detail.component.html',
+})
+export class ProcessDetailComponent implements OnInit {
+
+  processRD$: Observable<RemoteData<Process>>;
+
+  constructor(protected route: ActivatedRoute,
+              protected router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.processRD$ = this.route.data.pipe(
+      map((data) => data.process as RemoteData<Process>),
+      redirectToPageNotFoundOn404(this.router)
+    );
+  }
+
+}
diff --git a/src/app/process-page/process-page-routing.module.ts b/src/app/process-page/process-page-routing.module.ts
index 6a73c4d210..5f39e33a00 100644
--- a/src/app/process-page/process-page-routing.module.ts
+++ b/src/app/process-page/process-page-routing.module.ts
@@ -2,6 +2,8 @@ import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { NewProcessComponent } from './new/new-process.component';
 import { ProcessOverviewComponent } from './overview/process-overview.component';
+import { ProcessPageResolver } from './process-page.resolver';
+import { ProcessDetailComponent } from './detail/process-detail.component';
 
 @NgModule({
   imports: [
@@ -15,7 +17,17 @@ import { ProcessOverviewComponent } from './overview/process-overview.component'
         component: NewProcessComponent,
         data: { title: 'process.new.title' }
       },
+      {
+        path: ':id',
+        component: ProcessDetailComponent,
+        resolve: {
+          process: ProcessPageResolver
+        }
+      }
     ])
+  ],
+  providers: [
+    ProcessPageResolver
   ]
 })
 export class ProcessPageRoutingModule {
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index 4e0155661b..baa4b66f6f 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -12,6 +12,8 @@ import { FileValueInputComponent } from './new/process-parameters/parameter-valu
 import { BooleanValueInputComponent } from './new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component';
 import { DateValueInputComponent } from './new/process-parameters/parameter-value-input/date-value-input/date-value-input.component';
 import { ProcessOverviewComponent } from './overview/process-overview.component';
+import { ProcessDetailComponent } from './detail/process-detail.component';
+import { ProcessDetailFieldComponent } from './detail/process-detail-field/process-detail-field.component';
 
 @NgModule({
   imports: [
@@ -29,7 +31,9 @@ import { ProcessOverviewComponent } from './overview/process-overview.component'
     FileValueInputComponent,
     BooleanValueInputComponent,
     DateValueInputComponent,
-    ProcessOverviewComponent
+    ProcessOverviewComponent,
+    ProcessDetailComponent,
+    ProcessDetailFieldComponent
   ],
   entryComponents: []
 })
diff --git a/src/app/process-page/process-page.resolver.ts b/src/app/process-page/process-page.resolver.ts
new file mode 100644
index 0000000000..aedfcf88af
--- /dev/null
+++ b/src/app/process-page/process-page.resolver.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { RemoteData } from '../core/data/remote-data';
+import { Observable } from 'rxjs/internal/Observable';
+import { find } from 'rxjs/operators';
+import { hasValue } from '../shared/empty.util';
+import { ProcessDataService } from './processes/process-data.service';
+import { Process } from './processes/process.model';
+import { followLink } from '../shared/utils/follow-link-config.model';
+
+/**
+ * This class represents a resolver that requests a specific process before the route is activated
+ */
+@Injectable()
+export class ProcessPageResolver implements Resolve<RemoteData<Process>> {
+  constructor(private processService: ProcessDataService) {
+  }
+
+  /**
+   * Method for resolving a process based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns Observable<<RemoteData<Process>> Emits the found process based on the parameters in the current route,
+   * or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Process>> {
+    return this.processService.findById(route.params.id, followLink('script')).pipe(
+      find((RD) => hasValue(RD.error) || RD.hasSucceeded),
+    );
+  }
+}
diff --git a/src/app/process-page/processes/process.model.ts b/src/app/process-page/processes/process.model.ts
index cd2c03d6f7..4d2879d3b1 100644
--- a/src/app/process-page/processes/process.model.ts
+++ b/src/app/process-page/processes/process.model.ts
@@ -6,7 +6,13 @@ import { autoserialize, deserialize } from 'cerialize';
 import { PROCESS } from './process.resource-type';
 import { excludeFromEquals } from '../../core/utilities/equals.decorators';
 import { ResourceType } from '../../core/shared/resource-type';
-import { typedObject } from '../../core/cache/builders/build-decorators';
+import { link, typedObject } from '../../core/cache/builders/build-decorators';
+import { COLLECTION } from '../../core/shared/collection.resource-type';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { Collection } from '../../core/shared/collection.model';
+import { SCRIPT } from '../scripts/script.resource-type';
+import { Script } from '../scripts/script.model';
 
 /**
  * Object representing a process
@@ -74,4 +80,11 @@ export class Process implements CacheableObject {
     output: HALLink,
     files: HALLink
   };
+
+  /**
+   * The Script that created this Process
+   * Will be undefined unless the owningCollection {@link HALLink} has been resolved.
+   */
+  @link(SCRIPT)
+  script?: Observable<RemoteData<Script>>;
 }

From b4bb3acb6360d97dd5076e654ce0893244d920c2 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Mon, 23 Mar 2020 12:54:20 +0100
Subject: [PATCH 32/84] 69940: Process details intermediate commit #2

---
 resources/i18n/en.json5                         | 12 ++++++++++++
 .../process-detail-field.component.html         |  2 +-
 .../process-detail-field.component.ts           |  6 ++++++
 .../detail/process-detail.component.html        | 14 +++++++++++++-
 .../detail/process-detail.component.ts          | 17 +++++++++++++++++
 .../overview/process-overview.component.ts      |  2 +-
 src/app/process-page/process-page.resolver.ts   |  2 +-
 7 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 3d586fab44..f6298e70c9 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -1534,6 +1534,18 @@
 
 
 
+  "process.page.detail.arguments" : "Arguments",
+
+  "process.page.detail.output" : "Process Output",
+
+  "process.page.detail.output.alert" : "Work in progress - Process output is not available yet",
+
+  "process.page.detail.output-files" : "Output Files",
+
+  "process.page.detail.output-files.alert" : "Work in progress - Output files are not available yet",
+
+  "process.page.detail.script" : "Script",
+
   "process.page.detail.title" : "Process: {{ id }} - {{ name }}",
 
   "process.page.overview.table.finish" : "Finish time",
diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.html b/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
index 2db51f030d..ce26008c28 100644
--- a/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
@@ -1,2 +1,2 @@
-<h4 class="mt-3">{{title | translate}}</h4>
+<h4 class="mt-4">{{title | translate}}</h4>
 <ng-content></ng-content>
diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts b/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts
index 0c3dfd725a..f8015b6788 100644
--- a/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts
@@ -4,6 +4,12 @@ import { Component, Input } from '@angular/core';
   selector: 'ds-process-detail-field',
   templateUrl: './process-detail-field.component.html',
 })
+/**
+ * A component displaying a single detail about a DSpace Process
+ */
 export class ProcessDetailFieldComponent {
+  /**
+   * I18n message for the header
+   */
   @Input() title: string;
 }
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index e1d91b64d2..322e076f54 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -1,7 +1,19 @@
 <div class="container" *ngVar="(processRD$ | async)?.payload as process">
-  <h2>{{'process.page.detail.title' | translate:{ id: process?.id, name: process?.scriptName } }}</h2>
+  <h2>{{'process.page.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}</h2>
 
   <ds-process-detail-field [title]="'process.page.detail.script'">
     <div>{{ process?.scriptName }}</div>
   </ds-process-detail-field>
+
+  <ds-process-detail-field [title]="'process.page.detail.arguments'">
+    <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
+  </ds-process-detail-field>
+
+  <ds-process-detail-field [title]="'process.page.detail.output-files'">
+    <ds-alert [content]="'process.page.detail.output-files.alert'" [type]="AlertTypeEnum.Warning"></ds-alert>
+  </ds-process-detail-field>
+
+  <ds-process-detail-field [title]="'process.page.detail.output'">
+    <pre class="font-weight-bold text-secondary bg-light p-3">{{'process.page.detail.output.alert' | translate}}</pre>
+  </ds-process-detail-field>
 </div>
diff --git a/src/app/process-page/detail/process-detail.component.ts b/src/app/process-page/detail/process-detail.component.ts
index 922aef219f..4252138979 100644
--- a/src/app/process-page/detail/process-detail.component.ts
+++ b/src/app/process-page/detail/process-detail.component.ts
@@ -5,19 +5,36 @@ import { RemoteData } from '../../core/data/remote-data';
 import { Process } from '../processes/process.model';
 import { map } from 'rxjs/operators';
 import { redirectToPageNotFoundOn404 } from '../../core/shared/operators';
+import { AlertType } from '../../shared/alert/aletr-type';
 
 @Component({
   selector: 'ds-process-detail',
   templateUrl: './process-detail.component.html',
 })
+/**
+ * A component displaying detailed information about a DSpace Process
+ */
 export class ProcessDetailComponent implements OnInit {
 
+  /**
+   * The AlertType enumeration
+   * @type {AlertType}
+   */
+  public AlertTypeEnum = AlertType;
+
+  /**
+   * The Process's Remote Data
+   */
   processRD$: Observable<RemoteData<Process>>;
 
   constructor(protected route: ActivatedRoute,
               protected router: Router) {
   }
 
+  /**
+   * Initialize component properties
+   * Display a 404 if the process doesn't exist
+   */
   ngOnInit(): void {
     this.processRD$ = this.route.data.pipe(
       map((data) => data.process as RemoteData<Process>),
diff --git a/src/app/process-page/overview/process-overview.component.ts b/src/app/process-page/overview/process-overview.component.ts
index 67f03b07b3..86a2aecbf5 100644
--- a/src/app/process-page/overview/process-overview.component.ts
+++ b/src/app/process-page/overview/process-overview.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ProcessDataService } from '../processes/process-data.service';
 import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list';
@@ -10,6 +9,7 @@ import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { map } from 'rxjs/operators';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
 
 @Component({
   selector: 'ds-process-overview',
diff --git a/src/app/process-page/process-page.resolver.ts b/src/app/process-page/process-page.resolver.ts
index aedfcf88af..84821a2574 100644
--- a/src/app/process-page/process-page.resolver.ts
+++ b/src/app/process-page/process-page.resolver.ts
@@ -4,9 +4,9 @@ import { RemoteData } from '../core/data/remote-data';
 import { Observable } from 'rxjs/internal/Observable';
 import { find } from 'rxjs/operators';
 import { hasValue } from '../shared/empty.util';
-import { ProcessDataService } from './processes/process-data.service';
 import { Process } from './processes/process.model';
 import { followLink } from '../shared/utils/follow-link-config.model';
+import { ProcessDataService } from '../core/data/processes/process-data.service';
 
 /**
  * This class represents a resolver that requests a specific process before the route is activated

From cf492a92c84d7e5da1b45cb2b2223bfcbe2cd657 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Mon, 23 Mar 2020 15:54:10 +0100
Subject: [PATCH 33/84] 69940: Process detail and overview test cases

---
 .../process-detail-field.component.spec.ts    |  38 +++++
 .../detail/process-detail.component.html      |   8 +-
 .../detail/process-detail.component.spec.ts   |  67 ++++++++
 .../process-overview.component.spec.ts        | 157 ++++++++++++++++++
 4 files changed, 266 insertions(+), 4 deletions(-)
 create mode 100644 src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts
 create mode 100644 src/app/process-page/detail/process-detail.component.spec.ts
 create mode 100644 src/app/process-page/overview/process-overview.component.spec.ts

diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts b/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts
new file mode 100644
index 0000000000..487adb2ac0
--- /dev/null
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts
@@ -0,0 +1,38 @@
+import { ProcessDetailFieldComponent } from './process-detail-field.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { VarDirective } from '../../../shared/utils/var.directive';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+describe('ProcessDetailFieldComponent', () => {
+  let component: ProcessDetailFieldComponent;
+  let fixture: ComponentFixture<ProcessDetailFieldComponent>;
+
+  let title;
+
+  beforeEach(async(() => {
+    title = 'fake.title.message';
+
+    TestBed.configureTestingModule({
+      declarations: [ProcessDetailFieldComponent, VarDirective],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
+      providers: [
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessDetailFieldComponent);
+    component = fixture.componentInstance;
+    component.title = title;
+    fixture.detectChanges();
+  });
+
+  it('should display the given title', () => {
+    const header = fixture.debugElement.query(By.css('h4')).nativeElement;
+    expect(header.textContent).toContain(title);
+  });
+});
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index 322e076f54..40bc344672 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -1,19 +1,19 @@
 <div class="container" *ngVar="(processRD$ | async)?.payload as process">
   <h2>{{'process.page.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}</h2>
 
-  <ds-process-detail-field [title]="'process.page.detail.script'">
+  <ds-process-detail-field id="process-name" [title]="'process.page.detail.script'">
     <div>{{ process?.scriptName }}</div>
   </ds-process-detail-field>
 
-  <ds-process-detail-field [title]="'process.page.detail.arguments'">
+  <ds-process-detail-field id="process-arguments" [title]="'process.page.detail.arguments'">
     <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
   </ds-process-detail-field>
 
-  <ds-process-detail-field [title]="'process.page.detail.output-files'">
+  <ds-process-detail-field id="process-files" [title]="'process.page.detail.output-files'">
     <ds-alert [content]="'process.page.detail.output-files.alert'" [type]="AlertTypeEnum.Warning"></ds-alert>
   </ds-process-detail-field>
 
-  <ds-process-detail-field [title]="'process.page.detail.output'">
+  <ds-process-detail-field id="process-output" [title]="'process.page.detail.output'">
     <pre class="font-weight-bold text-secondary bg-light p-3">{{'process.page.detail.output.alert' | translate}}</pre>
   </ds-process-detail-field>
 </div>
diff --git a/src/app/process-page/detail/process-detail.component.spec.ts b/src/app/process-page/detail/process-detail.component.spec.ts
new file mode 100644
index 0000000000..0acdb275de
--- /dev/null
+++ b/src/app/process-page/detail/process-detail.component.spec.ts
@@ -0,0 +1,67 @@
+import { ProcessDetailComponent } from './process-detail.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ProcessDetailFieldComponent } from './process-detail-field/process-detail-field.component';
+import { Process } from '../processes/process.model';
+import { ActivatedRoute } from '@angular/router';
+import { of as observableOf } from 'rxjs';
+import { createSuccessfulRemoteDataObject } from '../../shared/testing/utils';
+import { By } from '@angular/platform-browser';
+
+describe('ProcessDetailComponent', () => {
+  let component: ProcessDetailComponent;
+  let fixture: ComponentFixture<ProcessDetailComponent>;
+
+  let process: Process;
+
+  function init() {
+    process = Object.assign(new Process(), {
+      processId: 1,
+      scriptName: 'script-name',
+      parameters: [
+        {
+          name: '-f',
+          value: 'file.xml'
+        },
+        {
+          name: '-i',
+          value: 'identifier'
+        }
+      ]
+    });
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      declarations: [ProcessDetailComponent, ProcessDetailFieldComponent, VarDirective],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
+      providers: [
+        { provide: ActivatedRoute, useValue: { data: observableOf({ process: createSuccessfulRemoteDataObject(process) }) } }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should display the script\'s name', () => {
+    const name = fixture.debugElement.query(By.css('#process-name')).nativeElement;
+    expect(name.textContent).toContain(process.scriptName);
+  });
+
+  it('should display the process\'s parameters', () => {
+    const args = fixture.debugElement.query(By.css('#process-arguments')).nativeElement;
+    process.parameters.forEach((param) => {
+      expect(args.textContent).toContain(`${param.name} ${param.value}`)
+    });
+  });
+
+});
diff --git a/src/app/process-page/overview/process-overview.component.spec.ts b/src/app/process-page/overview/process-overview.component.spec.ts
new file mode 100644
index 0000000000..878fc352f9
--- /dev/null
+++ b/src/app/process-page/overview/process-overview.component.spec.ts
@@ -0,0 +1,157 @@
+import { ProcessOverviewComponent } from './process-overview.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { Process } from '../processes/process.model';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { createPaginatedList, createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils';
+import { By } from '@angular/platform-browser';
+import { ProcessStatus } from '../processes/process-status.model';
+
+describe('ProcessOverviewComponent', () => {
+  let component: ProcessOverviewComponent;
+  let fixture: ComponentFixture<ProcessOverviewComponent>;
+
+  let processService: ProcessDataService;
+  let ePersonService: EPersonDataService;
+
+  let processes: Process[];
+  let ePerson: EPerson;
+
+  function init() {
+    processes = [
+      Object.assign(new Process(), {
+        processId: 1,
+        scriptName: 'script-name',
+        startTime: '2020-03-19T13:20:23.535+0000',
+        endTime: '2020-03-19T13:27:36.720+0000',
+        processStatus: ProcessStatus.COMPLETED
+      }),
+      Object.assign(new Process(), {
+        processId: 2,
+        scriptName: 'script-name',
+        startTime: '2020-03-20T11:21:23.487+0000',
+        endTime: '2020-03-20T11:22:36.165+0000',
+        processStatus: ProcessStatus.FAILED
+      }),
+      Object.assign(new Process(), {
+        processId: 3,
+        scriptName: 'another-script-name',
+        startTime: '2020-03-21T20:05:00.784+0000',
+        endTime: '2020-03-21T20:15:56.126+0000',
+        processStatus: ProcessStatus.RUNNING
+      })
+    ];
+    ePerson = Object.assign(new EPerson(), {
+      metadata: {
+        'eperson.firstname': [
+          {
+            value: 'John',
+            language: null
+          }
+        ],
+        'eperson.lastname': [
+          {
+            value: 'Doe',
+            language: null
+          }
+        ]
+      }
+    });
+    processService = jasmine.createSpyObj('processService', {
+      findAll: createSuccessfulRemoteDataObject$(createPaginatedList(processes))
+    });
+    ePersonService = jasmine.createSpyObj('ePersonService', {
+      findById: createSuccessfulRemoteDataObject$(ePerson)
+    });
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      declarations: [ProcessOverviewComponent, VarDirective],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
+      providers: [
+        { provide: ProcessDataService, useValue: processService },
+        { provide: EPersonDataService, useValue: ePersonService }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('table structure', () => {
+    let rowElements;
+
+    beforeEach(() => {
+      rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+    });
+
+    it(`should contain 3 rows`, () => {
+      expect(rowElements.length).toEqual(3);
+    });
+
+    it('should display the process IDs in the first column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(1)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].processId);
+      });
+    });
+
+    it('should display the script names in the second column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(2)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].scriptName);
+      });
+    });
+
+    it('should display the eperson\'s name in the third column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(3)')).nativeElement;
+        expect(el.textContent).toContain(ePerson.name);
+      });
+    });
+
+    it('should display the start time in the fourth column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(4)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].startTime);
+      });
+    });
+
+    it('should display the end time in the fifth column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(5)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].endTime);
+      });
+    });
+
+    it('should display the status in the sixth column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(6)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].processStatus);
+      });
+    });
+  });
+
+  describe('onPageChange', () => {
+    const toPage = 2;
+
+    beforeEach(() => {
+      component.onPageChange(toPage);
+    });
+
+    it('should call a new findAll with the corresponding page', () => {
+      expect(processService.findAll).toHaveBeenCalledWith(jasmine.objectContaining({ currentPage: toPage }));
+    });
+  });
+});

From 3bac6cc1b3d75e431c63a745e9065ddb865df685 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Mon, 23 Mar 2020 17:38:36 +0100
Subject: [PATCH 34/84] 69940: Process files request

---
 src/app/core/core.module.ts                   |  2 +
 .../process-files-response-parsing.service.ts | 39 +++++++++++++++++++
 .../data/processes/process-data.service.ts    | 38 ++++++++++++++++++
 src/app/core/data/request.models.ts           | 10 +++++
 .../detail/process-detail.component.ts        | 20 ++++++++--
 5 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 src/app/core/data/process-files-response-parsing.service.ts

diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 99931d8c6c..c2d14663e6 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -138,6 +138,7 @@ import { Script } from '../process-page/scripts/script.model';
 import { Process } from '../process-page/processes/process.model';
 import { ProcessDataService } from './data/processes/process-data.service';
 import { ScriptDataService } from './data/processes/script-data.service';
+import { ProcessFilesResponseParsingService } from './data/process-files-response-parsing.service';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -260,6 +261,7 @@ const PROVIDERS = [
   ItemTypeDataService,
   ProcessDataService,
   ScriptDataService,
+  ProcessFilesResponseParsingService,
   // register AuthInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,
diff --git a/src/app/core/data/process-files-response-parsing.service.ts b/src/app/core/data/process-files-response-parsing.service.ts
new file mode 100644
index 0000000000..430869290e
--- /dev/null
+++ b/src/app/core/data/process-files-response-parsing.service.ts
@@ -0,0 +1,39 @@
+import { ResponseParsingService } from './parsing.service';
+import { RestRequest } from './request.models';
+import { GenericSuccessResponse, RestResponse } from '../cache/response.models';
+import { DSpaceRESTV2Response } from '../dspace-rest-v2/dspace-rest-v2-response.model';
+import { isEmpty, isNotEmpty } from '../../shared/empty.util';
+import { PaginatedList } from './paginated-list';
+import { PageInfo } from '../shared/page-info.model';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+/**
+ * A ResponseParsingService used to parse DSpaceRESTV2Response coming from the REST API to a GenericSuccessResponse
+ * containing a PaginatedList of a process's output files
+ */
+export class ProcessFilesResponseParsingService implements ResponseParsingService {
+  parse(request: RestRequest, data: DSpaceRESTV2Response): RestResponse {
+    const payload = data.payload;
+
+    let page;
+    if (isNotEmpty(payload._embedded) && isNotEmpty(Object.keys(payload._embedded))) {
+      const bitstreams = payload._embedded[Object.keys(payload._embedded)[0]];
+
+      if (isNotEmpty(bitstreams)) {
+        page = new PaginatedList(Object.assign(new PageInfo(), {
+          elementsPerPage: bitstreams.length,
+          totalElements: bitstreams.length,
+          totalPages: 1,
+          currentPage: 1
+        }), bitstreams);
+      }
+    }
+
+    if (isEmpty(page)) {
+      page = new PaginatedList(new PageInfo(), []);
+    }
+
+    return new GenericSuccessResponse(page, data.statusCode, data.statusText);
+  }
+}
diff --git a/src/app/core/data/processes/process-data.service.ts b/src/app/core/data/processes/process-data.service.ts
index 7d1d08eeca..48c1d502cc 100644
--- a/src/app/core/data/processes/process-data.service.ts
+++ b/src/app/core/data/processes/process-data.service.ts
@@ -12,6 +12,14 @@ import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
 import { Process } from '../../../process-page/processes/process.model';
 import { dataService } from '../../cache/builders/build-decorators';
 import { PROCESS } from '../../../process-page/processes/process.resource-type';
+import { Observable } from 'rxjs/internal/Observable';
+import { map, switchMap } from 'rxjs/operators';
+import { ProcessFilesRequest, RestRequest } from '../request.models';
+import { configureRequest, filterSuccessfulResponses } from '../../shared/operators';
+import { GenericSuccessResponse } from '../../cache/response.models';
+import { PaginatedList } from '../paginated-list';
+import { Bitstream } from '../../shared/bitstream.model';
+import { RemoteData } from '../remote-data';
 
 @Injectable()
 @dataService(PROCESS)
@@ -29,4 +37,34 @@ export class ProcessDataService extends DataService<Process> {
     protected comparator: DefaultChangeAnalyzer<Process>) {
     super();
   }
+
+  /**
+   * Get the endpoint for a process his files
+   * @param processId The ID of the process
+   */
+  getFilesEndpoint(processId: string): Observable<string> {
+    return this.getBrowseEndpoint().pipe(
+      switchMap((href) => this.halService.getEndpoint('files', `${href}/${processId}`))
+    );
+  }
+
+  /**
+   * Get a process his output files
+   * @param processId The ID of the process
+   */
+  getFiles(processId: string): Observable<RemoteData<PaginatedList<Bitstream>>> {
+    const request$ = this.getFilesEndpoint(processId).pipe(
+      map((href) => new ProcessFilesRequest(this.requestService.generateRequestId(), href)),
+      configureRequest(this.requestService)
+    );
+    const requestEntry$ = request$.pipe(
+      switchMap((request: RestRequest) => this.requestService.getByHref(request.href))
+    );
+    const payload$ = requestEntry$.pipe(
+      filterSuccessfulResponses(),
+      map((response: GenericSuccessResponse<PaginatedList<Bitstream>>) => response.payload)
+    );
+
+    return this.rdbService.toRemoteDataObservable(requestEntry$, payload$);
+  }
 }
diff --git a/src/app/core/data/request.models.ts b/src/app/core/data/request.models.ts
index 82149fbbc5..e5706253d5 100644
--- a/src/app/core/data/request.models.ts
+++ b/src/app/core/data/request.models.ts
@@ -20,6 +20,7 @@ import { URLCombiner } from '../url-combiner/url-combiner';
 import { TaskResponseParsingService } from '../tasks/task-response-parsing.service';
 import { ContentSourceResponseParsingService } from './content-source-response-parsing.service';
 import { MappedCollectionsReponseParsingService } from './mapped-collections-reponse-parsing.service';
+import { ProcessFilesResponseParsingService } from './process-files-response-parsing.service';
 
 /* tslint:disable:max-classes-per-file */
 
@@ -226,6 +227,15 @@ export class MappedCollectionsRequest extends GetRequest {
   }
 }
 
+/**
+ * Request to fetch the files of a process
+ */
+export class ProcessFilesRequest extends GetRequest {
+  getResponseParser(): GenericConstructor<ResponseParsingService> {
+    return ProcessFilesResponseParsingService;
+  }
+}
+
 export class ConfigRequest extends GetRequest {
   constructor(uuid: string, href: string, public options?: HttpOptions) {
     super(uuid, href, null, options);
diff --git a/src/app/process-page/detail/process-detail.component.ts b/src/app/process-page/detail/process-detail.component.ts
index 4252138979..e2609c1781 100644
--- a/src/app/process-page/detail/process-detail.component.ts
+++ b/src/app/process-page/detail/process-detail.component.ts
@@ -3,9 +3,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from '../../core/data/remote-data';
 import { Process } from '../processes/process.model';
-import { map } from 'rxjs/operators';
-import { redirectToPageNotFoundOn404 } from '../../core/shared/operators';
+import { map, switchMap } from 'rxjs/operators';
+import { getFirstSucceededRemoteDataPayload, redirectToPageNotFoundOn404 } from '../../core/shared/operators';
 import { AlertType } from '../../shared/alert/aletr-type';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { PaginatedList } from '../../core/data/paginated-list';
+import { Bitstream } from '../../core/shared/bitstream.model';
 
 @Component({
   selector: 'ds-process-detail',
@@ -27,8 +30,14 @@ export class ProcessDetailComponent implements OnInit {
    */
   processRD$: Observable<RemoteData<Process>>;
 
+  /**
+   * The Process's Output Files
+   */
+  filesRD$: Observable<RemoteData<PaginatedList<Bitstream>>>;
+
   constructor(protected route: ActivatedRoute,
-              protected router: Router) {
+              protected router: Router,
+              protected processService: ProcessDataService) {
   }
 
   /**
@@ -40,6 +49,11 @@ export class ProcessDetailComponent implements OnInit {
       map((data) => data.process as RemoteData<Process>),
       redirectToPageNotFoundOn404(this.router)
     );
+
+    this.filesRD$ = this.processRD$.pipe(
+      getFirstSucceededRemoteDataPayload(),
+      switchMap((process: Process) => this.processService.getFiles(process.processId))
+    );
   }
 
 }

From 5e890aca2c02524fcc2f94036aec22b6d4e25849 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Wed, 25 Mar 2020 10:54:40 +0100
Subject: [PATCH 35/84] 69940: Process detail - Output Files

---
 resources/i18n/en.json5                       |  4 +-
 .../process-files-response-parsing.service.ts |  4 +-
 .../detail/process-detail.component.html      | 15 ++++--
 .../detail/process-detail.component.spec.ts   | 51 +++++++++++++++++--
 .../detail/process-detail.component.ts        | 12 ++++-
 5 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index f6298e70c9..c06d33da8c 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -1536,13 +1536,15 @@
 
   "process.page.detail.arguments" : "Arguments",
 
+  "process.page.detail.arguments.empty" : "This process doesn't contain any arguments",
+
   "process.page.detail.output" : "Process Output",
 
   "process.page.detail.output.alert" : "Work in progress - Process output is not available yet",
 
   "process.page.detail.output-files" : "Output Files",
 
-  "process.page.detail.output-files.alert" : "Work in progress - Output files are not available yet",
+  "process.page.detail.output-files.empty" : "This process doesn't contain any output files",
 
   "process.page.detail.script" : "Script",
 
diff --git a/src/app/core/data/process-files-response-parsing.service.ts b/src/app/core/data/process-files-response-parsing.service.ts
index 430869290e..0fa7c66869 100644
--- a/src/app/core/data/process-files-response-parsing.service.ts
+++ b/src/app/core/data/process-files-response-parsing.service.ts
@@ -6,6 +6,8 @@ import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { PaginatedList } from './paginated-list';
 import { PageInfo } from '../shared/page-info.model';
 import { Injectable } from '@angular/core';
+import { DSpaceSerializer } from '../dspace-rest-v2/dspace.serializer';
+import { Bitstream } from '../shared/bitstream.model';
 
 @Injectable()
 /**
@@ -18,7 +20,7 @@ export class ProcessFilesResponseParsingService implements ResponseParsingServic
 
     let page;
     if (isNotEmpty(payload._embedded) && isNotEmpty(Object.keys(payload._embedded))) {
-      const bitstreams = payload._embedded[Object.keys(payload._embedded)[0]];
+      const bitstreams = new DSpaceSerializer(Bitstream).deserializeArray(payload._embedded[Object.keys(payload._embedded)[0]]);
 
       if (isNotEmpty(bitstreams)) {
         page = new PaginatedList(Object.assign(new PageInfo(), {
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index 40bc344672..602e3306f8 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -6,12 +6,21 @@
   </ds-process-detail-field>
 
   <ds-process-detail-field id="process-arguments" [title]="'process.page.detail.arguments'">
+    <ds-alert *ngIf="files?.length === 0" [content]="'process.page.detail.arguments.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
     <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
   </ds-process-detail-field>
 
-  <ds-process-detail-field id="process-files" [title]="'process.page.detail.output-files'">
-    <ds-alert [content]="'process.page.detail.output-files.alert'" [type]="AlertTypeEnum.Warning"></ds-alert>
-  </ds-process-detail-field>
+  <div *ngVar="(filesRD$ | async)?.payload?.page as files">
+    <ds-process-detail-field *ngIf="files" id="process-files" [title]="'process.page.detail.output-files'">
+      <ds-alert *ngIf="files?.length === 0" [content]="'process.page.detail.output-files.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
+      <div *ngIf="files?.length > 0">
+        <div *ngFor="let file of files">
+          <span><a [href]="file?._links?.content?.href">{{getFileName(file)}}</a></span>
+          <span>({{file?.sizeBytes | dsFileSize}})</span>
+        </div>
+      </div>
+    </ds-process-detail-field>
+  </div>
 
   <ds-process-detail-field id="process-output" [title]="'process.page.detail.output'">
     <pre class="font-weight-bold text-secondary bg-light p-3">{{'process.page.detail.output.alert' | translate}}</pre>
diff --git a/src/app/process-page/detail/process-detail.component.spec.ts b/src/app/process-page/detail/process-detail.component.spec.ts
index 0acdb275de..4b6fe16e10 100644
--- a/src/app/process-page/detail/process-detail.component.spec.ts
+++ b/src/app/process-page/detail/process-detail.component.spec.ts
@@ -8,14 +8,27 @@ import { ProcessDetailFieldComponent } from './process-detail-field/process-deta
 import { Process } from '../processes/process.model';
 import { ActivatedRoute } from '@angular/router';
 import { of as observableOf } from 'rxjs';
-import { createSuccessfulRemoteDataObject } from '../../shared/testing/utils';
+import {
+  createPaginatedList,
+  createSuccessfulRemoteDataObject,
+  createSuccessfulRemoteDataObject$
+} from '../../shared/testing/utils';
 import { By } from '@angular/platform-browser';
+import { FileSizePipe } from '../../shared/utils/file-size-pipe';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
-describe('ProcessDetailComponent', () => {
+fdescribe('ProcessDetailComponent', () => {
   let component: ProcessDetailComponent;
   let fixture: ComponentFixture<ProcessDetailComponent>;
 
+  let processService: ProcessDataService;
+  let nameService: DSONameService;
+
   let process: Process;
+  let fileName: string;
+  let files: Bitstream[];
 
   function init() {
     process = Object.assign(new Process(), {
@@ -32,15 +45,40 @@ describe('ProcessDetailComponent', () => {
         }
       ]
     });
+    fileName = 'fake-file-name';
+    files = [
+      Object.assign(new Bitstream(), {
+        sizeBytes: 10000,
+        metadata: {
+          'dc.title': [
+            {
+              value: fileName,
+              language: null
+            }
+          ]
+        },
+        _links: {
+          content: { href: 'file-selflink' }
+        }
+      })
+    ];
+    processService = jasmine.createSpyObj('processService', {
+      getFiles: createSuccessfulRemoteDataObject$(createPaginatedList(files))
+    });
+    nameService = jasmine.createSpyObj('nameService', {
+      getName: fileName
+    });
   }
 
   beforeEach(async(() => {
     init();
     TestBed.configureTestingModule({
-      declarations: [ProcessDetailComponent, ProcessDetailFieldComponent, VarDirective],
+      declarations: [ProcessDetailComponent, ProcessDetailFieldComponent, VarDirective, FileSizePipe],
       imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
       providers: [
-        { provide: ActivatedRoute, useValue: { data: observableOf({ process: createSuccessfulRemoteDataObject(process) }) } }
+        { provide: ActivatedRoute, useValue: { data: observableOf({ process: createSuccessfulRemoteDataObject(process) }) } },
+        { provide: ProcessDataService, useValue: processService },
+        { provide: DSONameService, useValue: nameService }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -64,4 +102,9 @@ describe('ProcessDetailComponent', () => {
     });
   });
 
+  it('should display the process\'s output files', () => {
+    const processFiles = fixture.debugElement.query(By.css('#process-files')).nativeElement;
+    expect(processFiles.textContent).toContain(fileName);
+  });
+
 });
diff --git a/src/app/process-page/detail/process-detail.component.ts b/src/app/process-page/detail/process-detail.component.ts
index e2609c1781..b0e2c7e378 100644
--- a/src/app/process-page/detail/process-detail.component.ts
+++ b/src/app/process-page/detail/process-detail.component.ts
@@ -9,6 +9,7 @@ import { AlertType } from '../../shared/alert/aletr-type';
 import { ProcessDataService } from '../../core/data/processes/process-data.service';
 import { PaginatedList } from '../../core/data/paginated-list';
 import { Bitstream } from '../../core/shared/bitstream.model';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-process-detail',
@@ -37,7 +38,8 @@ export class ProcessDetailComponent implements OnInit {
 
   constructor(protected route: ActivatedRoute,
               protected router: Router,
-              protected processService: ProcessDataService) {
+              protected processService: ProcessDataService,
+              protected nameService: DSONameService) {
   }
 
   /**
@@ -56,4 +58,12 @@ export class ProcessDetailComponent implements OnInit {
     );
   }
 
+  /**
+   * Get the name of a bitstream
+   * @param bitstream
+   */
+  getFileName(bitstream: Bitstream) {
+    return this.nameService.getName(bitstream);
+  }
+
 }

From 6b53c448c8c712fcd2a5fee0844d24a7182b5b81 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Wed, 25 Mar 2020 17:08:57 +0100
Subject: [PATCH 36/84] 69940: Processes - date format, back button and hiding
 empty fields

---
 resources/i18n/en.json5                       |  2 ++
 .../detail/process-detail.component.html      | 22 +++++++++----------
 .../overview/process-overview.component.html  |  4 ++--
 .../overview/process-overview.component.ts    |  5 +++++
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index c06d33da8c..90efd4f437 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -1538,6 +1538,8 @@
 
   "process.page.detail.arguments.empty" : "This process doesn't contain any arguments",
 
+  "process.page.detail.back" : "Back",
+
   "process.page.detail.output" : "Process Output",
 
   "process.page.detail.output.alert" : "Work in progress - Process output is not available yet",
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index 602e3306f8..d73b817ddc 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -5,24 +5,22 @@
     <div>{{ process?.scriptName }}</div>
   </ds-process-detail-field>
 
-  <ds-process-detail-field id="process-arguments" [title]="'process.page.detail.arguments'">
-    <ds-alert *ngIf="files?.length === 0" [content]="'process.page.detail.arguments.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
+  <ds-process-detail-field *ngIf="process?.parameters && process?.parameters?.length > 0" id="process-arguments" [title]="'process.page.detail.arguments'">
     <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
   </ds-process-detail-field>
 
   <div *ngVar="(filesRD$ | async)?.payload?.page as files">
-    <ds-process-detail-field *ngIf="files" id="process-files" [title]="'process.page.detail.output-files'">
-      <ds-alert *ngIf="files?.length === 0" [content]="'process.page.detail.output-files.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
-      <div *ngIf="files?.length > 0">
-        <div *ngFor="let file of files">
-          <span><a [href]="file?._links?.content?.href">{{getFileName(file)}}</a></span>
-          <span>({{file?.sizeBytes | dsFileSize}})</span>
-        </div>
+    <ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files" [title]="'process.page.detail.output-files'">
+      <div *ngFor="let file of files">
+        <span><a [href]="file?._links?.content?.href">{{getFileName(file)}}</a></span>
+        <span>({{file?.sizeBytes | dsFileSize}})</span>
       </div>
     </ds-process-detail-field>
   </div>
 
-  <ds-process-detail-field id="process-output" [title]="'process.page.detail.output'">
-    <pre class="font-weight-bold text-secondary bg-light p-3">{{'process.page.detail.output.alert' | translate}}</pre>
-  </ds-process-detail-field>
+  <!--<ds-process-detail-field id="process-output" [title]="'process.page.detail.output'">-->
+    <!--<pre class="font-weight-bold text-secondary bg-light p-3">{{'process.page.detail.output.alert' | translate}}</pre>-->
+  <!--</ds-process-detail-field>-->
+
+  <a class="btn btn-light mt-3" [routerLink]="'/processes'">{{'process.page.detail.back' | translate}}</a>
 </div>
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index fef4b72776..6240d15e30 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -23,8 +23,8 @@
           <td><a [routerLink]="['/processes/', process.processId]">{{process.processId}}</a></td>
           <td><a [routerLink]="['/processes/', process.processId]">{{process.scriptName}}</a></td>
           <td *ngVar="(getEpersonName(process.userId) | async) as ePersonName">{{ePersonName}}</td>
-          <td>{{process.startTime}}</td>
-          <td>{{process.endTime}}</td>
+          <td>{{process.startTime | date:dateFormat}}</td>
+          <td>{{process.endTime | date:dateFormat}}</td>
           <td>{{process.processStatus}}</td>
         </tr>
       </tbody>
diff --git a/src/app/process-page/overview/process-overview.component.ts b/src/app/process-page/overview/process-overview.component.ts
index 86a2aecbf5..29fbb9d733 100644
--- a/src/app/process-page/overview/process-overview.component.ts
+++ b/src/app/process-page/overview/process-overview.component.ts
@@ -40,6 +40,11 @@ export class ProcessOverviewComponent implements OnInit {
     pageSize: 20
   });
 
+  /**
+   * Date format to use for start and end time of processes
+   */
+  dateFormat = 'yyyy-MM-dd HH:mm:ss';
+
   constructor(protected processService: ProcessDataService,
               protected ePersonService: EPersonDataService) {
   }

From d4609b87eabadcbfa5411486a5c28e91de2c5bdf Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Wed, 25 Mar 2020 17:22:00 +0100
Subject: [PATCH 37/84] 69940: Fix tests

---
 .../detail/process-detail.component.spec.ts          |  2 +-
 .../overview/process-overview.component.spec.ts      | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/process-page/detail/process-detail.component.spec.ts b/src/app/process-page/detail/process-detail.component.spec.ts
index 4b6fe16e10..ed54ae7afd 100644
--- a/src/app/process-page/detail/process-detail.component.spec.ts
+++ b/src/app/process-page/detail/process-detail.component.spec.ts
@@ -19,7 +19,7 @@ import { Bitstream } from '../../core/shared/bitstream.model';
 import { ProcessDataService } from '../../core/data/processes/process-data.service';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
-fdescribe('ProcessDetailComponent', () => {
+describe('ProcessDetailComponent', () => {
   let component: ProcessDetailComponent;
   let fixture: ComponentFixture<ProcessDetailComponent>;
 
diff --git a/src/app/process-page/overview/process-overview.component.spec.ts b/src/app/process-page/overview/process-overview.component.spec.ts
index 878fc352f9..a13eda3821 100644
--- a/src/app/process-page/overview/process-overview.component.spec.ts
+++ b/src/app/process-page/overview/process-overview.component.spec.ts
@@ -27,22 +27,22 @@ describe('ProcessOverviewComponent', () => {
       Object.assign(new Process(), {
         processId: 1,
         scriptName: 'script-name',
-        startTime: '2020-03-19T13:20:23.535+0000',
-        endTime: '2020-03-19T13:27:36.720+0000',
+        startTime: '2020-03-19',
+        endTime: '2020-03-19',
         processStatus: ProcessStatus.COMPLETED
       }),
       Object.assign(new Process(), {
         processId: 2,
         scriptName: 'script-name',
-        startTime: '2020-03-20T11:21:23.487+0000',
-        endTime: '2020-03-20T11:22:36.165+0000',
+        startTime: '2020-03-20',
+        endTime: '2020-03-20',
         processStatus: ProcessStatus.FAILED
       }),
       Object.assign(new Process(), {
         processId: 3,
         scriptName: 'another-script-name',
-        startTime: '2020-03-21T20:05:00.784+0000',
-        endTime: '2020-03-21T20:15:56.126+0000',
+        startTime: '2020-03-21',
+        endTime: '2020-03-21',
         processStatus: ProcessStatus.RUNNING
       })
     ];

From b666e3f208af561ab901605f369c1813a78fd44d Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Fri, 27 Mar 2020 17:34:49 +0100
Subject: [PATCH 38/84] 70090: Added trail for processes pages

---
 .../breadcrumbs/i18n-breadcrumb.resolver.ts   |  3 +-
 .../process-breadcrumb.resolver.ts            | 40 ++++++++++++++++++
 .../process-breadcrumbs.service.ts            | 21 ++++++++++
 .../process-page-routing.module.ts            | 41 +++++++++++++------
 src/app/process-page/process-page.module.ts   |  6 +++
 src/app/shared/utils/route.utils.ts           | 12 +++++-
 6 files changed, 108 insertions(+), 15 deletions(-)
 create mode 100644 src/app/process-page/process-breadcrumb.resolver.ts
 create mode 100644 src/app/process-page/process-breadcrumbs.service.ts

diff --git a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts
index de7d061a3f..6b2a93e403 100644
--- a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts
+++ b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { I18nBreadcrumbsService } from './i18n-breadcrumbs.service';
 import { hasNoValue } from '../../shared/empty.util';
+import { currentPathFromSnapshot } from '../../shared/utils/route.utils';
 
 /**
  * The class that resolves a BreadcrumbConfig object with an i18n key string for a route
@@ -23,7 +24,7 @@ export class I18nBreadcrumbResolver implements Resolve<BreadcrumbConfig<string>>
     if (hasNoValue(key)) {
       throw new Error('You provided an i18nBreadcrumbResolver for url \"' + route.url + '\" but no breadcrumbKey in the route\'s data')
     }
-    const fullPath = route.url.join('');
+    const fullPath = currentPathFromSnapshot(route);
     return { provider: this.breadcrumbService, key: key, url: fullPath };
   }
 }
diff --git a/src/app/process-page/process-breadcrumb.resolver.ts b/src/app/process-page/process-breadcrumb.resolver.ts
new file mode 100644
index 0000000000..a306060d20
--- /dev/null
+++ b/src/app/process-page/process-breadcrumb.resolver.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+import { map } from 'rxjs/operators';
+import { Process } from './processes/process.model';
+import { followLink } from '../shared/utils/follow-link-config.model';
+import { ProcessDataService } from '../core/data/processes/process-data.service';
+import { BreadcrumbConfig } from '../breadcrumbs/breadcrumb/breadcrumb-config.model';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../core/shared/operators';
+import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+
+/**
+ * This class represents a resolver that requests a specific process before the route is activated
+ */
+@Injectable()
+export class ProcessBreadcrumbResolver implements Resolve<BreadcrumbConfig<Process>> {
+  constructor(protected breadcrumbService: ProcessBreadcrumbsService, private processService: ProcessDataService) {
+  }
+
+  /**
+   * Method for resolving a process based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns Observable<<RemoteData<Process>> Emits the found process based on the parameters in the current route,
+   * or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<BreadcrumbConfig<Process>> {
+    const id = route.params.id;
+
+    return this.processService.findById(route.params.id, followLink('script')).pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      map((object: Process) => {
+        const fullPath = state.url;
+        const url = fullPath.substr(0, fullPath.indexOf(id)) + id;
+        return { provider: this.breadcrumbService, key: object, url: url };
+      })
+    );
+  }
+}
diff --git a/src/app/process-page/process-breadcrumbs.service.ts b/src/app/process-page/process-breadcrumbs.service.ts
new file mode 100644
index 0000000000..ffd289e04e
--- /dev/null
+++ b/src/app/process-page/process-breadcrumbs.service.ts
@@ -0,0 +1,21 @@
+import { Observable, of as observableOf } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { BreadcrumbsService } from '../core/breadcrumbs/breadcrumbs.service';
+import { Breadcrumb } from '../breadcrumbs/breadcrumb/breadcrumb.model';
+import { Process } from './processes/process.model';
+
+/**
+ * Service to calculate process breadcrumbs for a single part of the route
+ */
+@Injectable()
+export class ProcessBreadcrumbsService implements BreadcrumbsService<Process> {
+
+  /**
+   * Method to calculate the breadcrumbs
+   * @param key The key used to resolve the breadcrumb
+   * @param url The url to use as a link for this breadcrumb
+   */
+  getBreadcrumbs(key: Process, url: string): Observable<Breadcrumb[]> {
+    return observableOf([new Breadcrumb(key.processId + ' - ' + key.scriptName, url)]);
+  }
+}
diff --git a/src/app/process-page/process-page-routing.module.ts b/src/app/process-page/process-page-routing.module.ts
index 5f39e33a00..e8a30d2815 100644
--- a/src/app/process-page/process-page-routing.module.ts
+++ b/src/app/process-page/process-page-routing.module.ts
@@ -4,26 +4,41 @@ import { NewProcessComponent } from './new/new-process.component';
 import { ProcessOverviewComponent } from './overview/process-overview.component';
 import { ProcessPageResolver } from './process-page.resolver';
 import { ProcessDetailComponent } from './detail/process-detail.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
+import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: ProcessOverviewComponent,
+        resolve: { breadcrumb: I18nBreadcrumbResolver },
+        data: { breadcrumbKey: 'process' },
+        canActivate: [AuthenticatedGuard],
+        children: [
+          {
+            path: '',
+            component: ProcessOverviewComponent,
+            data: { title: 'process.overview.title' },
+          },
+          {
+            path: 'new',
+            component: NewProcessComponent,
+            resolve: { breadcrumb: I18nBreadcrumbResolver },
+            data: { title: 'process.new.title', breadcrumbKey: 'process.new' }
+          },
+          {
+            path: ':id',
+            component: ProcessDetailComponent,
+            resolve: {
+              process: ProcessPageResolver,
+              breadcrumb: ProcessBreadcrumbResolver
+            }
+          }
+        ]
       },
-      {
-        path: 'new',
-        component: NewProcessComponent,
-        data: { title: 'process.new.title' }
-      },
-      {
-        path: ':id',
-        component: ProcessDetailComponent,
-        resolve: {
-          process: ProcessPageResolver
-        }
-      }
+
     ])
   ],
   providers: [
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index baa4b66f6f..5b998af820 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -14,6 +14,8 @@ import { DateValueInputComponent } from './new/process-parameters/parameter-valu
 import { ProcessOverviewComponent } from './overview/process-overview.component';
 import { ProcessDetailComponent } from './detail/process-detail.component';
 import { ProcessDetailFieldComponent } from './detail/process-detail-field/process-detail-field.component';
+import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
 
 @NgModule({
   imports: [
@@ -35,6 +37,10 @@ import { ProcessDetailFieldComponent } from './detail/process-detail-field/proce
     ProcessDetailComponent,
     ProcessDetailFieldComponent
   ],
+  providers: [
+    ProcessBreadcrumbResolver,
+    ProcessBreadcrumbsService
+  ],
   entryComponents: []
 })
 
diff --git a/src/app/shared/utils/route.utils.ts b/src/app/shared/utils/route.utils.ts
index 6510fb8894..b949852b88 100644
--- a/src/app/shared/utils/route.utils.ts
+++ b/src/app/shared/utils/route.utils.ts
@@ -1,4 +1,6 @@
-import { Router } from '@angular/router';
+import { ActivatedRoute, ActivatedRouteSnapshot, Router } from '@angular/router';
+import { hasValue } from '../empty.util';
+import { URLCombiner } from '../../core/url-combiner/url-combiner';
 
 /**
  * Util function to retrieve the current path (without query parameters) the user is on
@@ -8,3 +10,11 @@ export function currentPath(router: Router) {
   const urlTree = router.parseUrl(router.url);
   return '/' + urlTree.root.children.primary.segments.map((it) => it.path).join('/')
 }
+
+export function currentPathFromSnapshot(route: ActivatedRouteSnapshot): string {
+  if (hasValue(route.parent)) {
+    const parentRoute: string = currentPathFromSnapshot(route.parent);
+    return new URLCombiner(parentRoute, route.routeConfig.path).toString();
+  }
+  return route.routeConfig ? route.routeConfig.path : '';
+}

From c225c9015e7c0980c470dc4fa9f35bf45c3fd464 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Mon, 30 Mar 2020 10:58:45 +0200
Subject: [PATCH 39/84] Added messages and menu links + tests

---
 resources/i18n/en.json5                       | 121 ++++++++++--------
 .../admin-sidebar/admin-sidebar.component.ts  |  28 +++-
 .../i18n-breadcrumb.resolver.spec.ts          |  25 +++-
 .../detail/process-detail.component.html      |  14 +-
 .../file-value-input.component.spec.ts        |   2 +-
 .../overview/process-overview.component.html  |  14 +-
 .../process-breadcrumb.resolver.spec.ts       |  40 ++++++
 .../process-breadcrumbs.service.spec.ts       |  36 ++++++
 .../process-page-routing.module.ts            |   2 +-
 9 files changed, 203 insertions(+), 79 deletions(-)
 create mode 100644 src/app/process-page/process-breadcrumb.resolver.spec.ts
 create mode 100644 src/app/process-page/process-breadcrumbs.service.spec.ts

diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 90efd4f437..c5e2c0d751 100644
--- a/resources/i18n/en.json5
+++ b/resources/i18n/en.json5
@@ -1316,6 +1316,8 @@
 
   "menu.section.icon.pin": "Pin sidebar",
 
+  "menu.section.icon.processes": "Processes menu section",
+
   "menu.section.icon.registries": "Registries menu section",
 
   "menu.section.icon.statistics_task": "Statistics Task menu section",
@@ -1342,6 +1344,8 @@
 
   "menu.section.new_item_version": "Item Version",
 
+  "menu.section.new_process": "Process",
+
 
 
   "menu.section.pin": "Pin sidebar",
@@ -1350,6 +1354,10 @@
 
 
 
+  "menu.section.processes": "Processes",
+
+
+
   "menu.section.registries": "Registries",
 
   "menu.section.registries_format": "Format",
@@ -1534,38 +1542,81 @@
 
 
 
-  "process.page.detail.arguments" : "Arguments",
+  "process.new.select-parameters": "Parameters",
 
-  "process.page.detail.arguments.empty" : "This process doesn't contain any arguments",
+  "process.new.cancel": "Cancel",
 
-  "process.page.detail.back" : "Back",
+  "process.new.submit": "Submit",
 
-  "process.page.detail.output" : "Process Output",
+  "process.new.select-script": "Script",
 
-  "process.page.detail.output.alert" : "Work in progress - Process output is not available yet",
+  "process.new.select-script.placeholder": "Choose a script...",
 
-  "process.page.detail.output-files" : "Output Files",
+  "process.new.select-script.required": "Script is required",
 
-  "process.page.detail.output-files.empty" : "This process doesn't contain any output files",
+  "process.new.parameter.file.upload-button": "Select file...",
 
-  "process.page.detail.script" : "Script",
+  "process.new.parameter.file.required": "Please select a file",
 
-  "process.page.detail.title" : "Process: {{ id }} - {{ name }}",
+  "process.new.parameter.string.required": "Parameter value is required",
 
-  "process.page.overview.table.finish" : "Finish time",
+  "process.new.parameter.type.value": "value",
 
-  "process.page.overview.table.id" : "Process ID",
+  "process.new.parameter.type.file": "file",
 
-  "process.page.overview.table.name" : "Name",
+  "process.new.parameter.required.missing": "The following parameters are required but still missing:",
 
-  "process.page.overview.table.start" : "Start time",
+  "process.new.notification.success.title": "Success",
 
-  "process.page.overview.table.status" : "Status",
+  "process.new.notification.success.content": "The process was successfully created",
 
-  "process.page.overview.table.user" : "User",
+  "process.new.notification.error.title": "Error",
 
-  "process.page.overview.title": "Processes Overview",
+  "process.new.notification.error.content": "An error occurred while creating this process",
 
+  "process.new.header": "Create a new process",
+
+  "process.new.title": "Create a new process",
+
+  "process.new.breadcrumbs": "Create a new process",
+
+
+
+  "process.detail.arguments" : "Arguments",
+
+  "process.detail.arguments.empty" : "This process doesn't contain any arguments",
+
+  "process.detail.back" : "Back",
+
+  "process.detail.output" : "Process Output",
+
+  "process.detail.output.alert" : "Work in progress - Process output is not available yet",
+
+  "process.detail.output-files" : "Output Files",
+
+  "process.detail.output-files.empty" : "This process doesn't contain any output files",
+
+  "process.detail.script" : "Script",
+
+  "process.detail.title" : "Process: {{ id }} - {{ name }}",
+
+
+
+  "process.overview.table.finish" : "Finish time",
+
+  "process.overview.table.id" : "Process ID",
+
+  "process.overview.table.name" : "Name",
+
+  "process.overview.table.start" : "Start time",
+
+  "process.overview.table.status" : "Status",
+
+  "process.overview.table.user" : "User",
+
+  "process.overview.title": "Processes Overview",
+
+  "process.overview.breadcrumbs": "Processes Overview",
 
 
   "profile.breadcrumbs": "Update Profile",
@@ -1648,44 +1699,6 @@
 
 
 
-  "process.new.select-parameters": "Parameters",
-
-  "process.new.cancel": "Cancel",
-
-  "process.new.submit": "Submit",
-
-  "process.new.select-script": "Script",
-
-  "process.new.select-script.placeholder": "Choose a script...",
-
-  "process.new.select-script.required": "Script is required",
-
-  "process.new.parameter.file.upload-button": "Select file...",
-
-  "process.new.parameter.file.required": "Please select a file",
-
-  "process.new.parameter.string.required": "Parameter value is required",
-
-  "process.new.parameter.type.value": "value",
-
-  "process.new.parameter.type.file": "file",
-
-  "process.new.parameter.required.missing": "The following parameters are required but still missing:",
-
-  "process.new.notification.success.title": "Success",
-
-  "process.new.notification.success.content": "The process was successfully created",
-
-  "process.new.notification.error.title": "Error",
-
-  "process.new.notification.error.content": "An error occurred while creating this process",
-
-  "process.new.header": "Create a new process",
-
-  "process.new.title": "Create a new process",
-
-
-
   "publication.listelement.badge": "Publication",
 
   "publication.page.description": "Description",
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
index e3f55b8e18..89da09b21c 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
@@ -145,11 +145,17 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
             this.modalService.open(CreateItemParentSelectorComponent);
           }
         } as OnClickMenuItemModel,
-        // model: {
-        //   type: MenuItemType.LINK,
-        //   text: 'menu.section.new_item',
-        //   link: '/submit'
-        // } as LinkMenuItemModel,
+      },
+      {
+        id: 'new_process',
+        parentID: 'new',
+        active: false,
+        visible: true,
+        model: {
+          type: MenuItemType.LINK,
+          text: 'menu.section.new_process',
+          link: '/processes/new'
+        } as LinkMenuItemModel,
       },
       {
         id: 'new_item_version',
@@ -439,6 +445,18 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         icon: 'cogs',
         index: 9
       },
+      {
+        id: 'processes',
+        active: false,
+        visible: true,
+        model: {
+          type: MenuItemType.LINK,
+          text: 'menu.section.processes',
+          link: '/processes'
+        } as LinkMenuItemModel,
+        icon: 'terminal',
+        index: 10
+      },
     ];
     menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, menuSection));
 
diff --git a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts
index d34d6d8a9b..6b640a9db0 100644
--- a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts
+++ b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts
@@ -1,21 +1,38 @@
 import { I18nBreadcrumbResolver } from './i18n-breadcrumb.resolver';
+import { URLCombiner } from '../url-combiner/url-combiner';
 
 describe('I18nBreadcrumbResolver', () => {
   describe('resolve', () => {
     let resolver: I18nBreadcrumbResolver;
     let i18nBreadcrumbService: any;
     let i18nKey: string;
-    let path: string;
+    let route: any;
+    let parentSegment;
+    let segment;
+    let expectedPath;
     beforeEach(() => {
       i18nKey = 'example.key';
-      path = 'rest.com/path/to/breadcrumb';
+      parentSegment = 'path';
+      segment = 'breadcrumb';
+      route = {
+        data: { breadcrumbKey: i18nKey },
+        routeConfig: {
+          path: segment
+        },
+        parent: {
+          routeConfig: {
+            path: parentSegment
+          }
+        } as any
+      };
+      expectedPath = new URLCombiner(parentSegment, segment).toString();
       i18nBreadcrumbService = {};
       resolver = new I18nBreadcrumbResolver(i18nBreadcrumbService);
     });
 
     it('should resolve the breadcrumb config', () => {
-      const resolvedConfig = resolver.resolve({ data: { breadcrumbKey: i18nKey }, url: [path] } as any, {} as any);
-      const expectedConfig = { provider: i18nBreadcrumbService, key: i18nKey, url: path };
+      const resolvedConfig = resolver.resolve(route, {} as any);
+      const expectedConfig = { provider: i18nBreadcrumbService, key: i18nKey, url: expectedPath };
       expect(resolvedConfig).toEqual(expectedConfig);
     });
 
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index d73b817ddc..b93ad22d0c 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -1,16 +1,16 @@
 <div class="container" *ngVar="(processRD$ | async)?.payload as process">
-  <h2>{{'process.page.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}</h2>
+  <h2>{{'process.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}</h2>
 
-  <ds-process-detail-field id="process-name" [title]="'process.page.detail.script'">
+  <ds-process-detail-field id="process-name" [title]="'process.detail.script'">
     <div>{{ process?.scriptName }}</div>
   </ds-process-detail-field>
 
-  <ds-process-detail-field *ngIf="process?.parameters && process?.parameters?.length > 0" id="process-arguments" [title]="'process.page.detail.arguments'">
+  <ds-process-detail-field *ngIf="process?.parameters && process?.parameters?.length > 0" id="process-arguments" [title]="'process.detail.arguments'">
     <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
   </ds-process-detail-field>
 
   <div *ngVar="(filesRD$ | async)?.payload?.page as files">
-    <ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files" [title]="'process.page.detail.output-files'">
+    <ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files" [title]="'process.detail.output-files'">
       <div *ngFor="let file of files">
         <span><a [href]="file?._links?.content?.href">{{getFileName(file)}}</a></span>
         <span>({{file?.sizeBytes | dsFileSize}})</span>
@@ -18,9 +18,9 @@
     </ds-process-detail-field>
   </div>
 
-  <!--<ds-process-detail-field id="process-output" [title]="'process.page.detail.output'">-->
-    <!--<pre class="font-weight-bold text-secondary bg-light p-3">{{'process.page.detail.output.alert' | translate}}</pre>-->
+  <!--<ds-process-detail-field id="process-output" [title]="'process.detail.output'">-->
+    <!--<pre class="font-weight-bold text-secondary bg-light p-3">{{'process.detail.output.alert' | translate}}</pre>-->
   <!--</ds-process-detail-field>-->
 
-  <a class="btn btn-light mt-3" [routerLink]="'/processes'">{{'process.page.detail.back' | translate}}</a>
+  <a class="btn btn-light mt-3" [routerLink]="'/processes'">{{'process.detail.back' | translate}}</a>
 </div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
index 68d9fded4a..5bb41295ed 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
@@ -9,7 +9,7 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { FileValueAccessorDirective } from '../../../../../shared/utils/file-value-accessor.directive';
 import { FileValidator } from '../../../../../shared/utils/require-file.validator';
 
-‡describe('FileValueInputComponent', () => {
+describe('FileValueInputComponent', () => {
   let component: FileValueInputComponent;
   let fixture: ComponentFixture<FileValueInputComponent>;
 
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index 6240d15e30..6992286d95 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <h2>{{'process.page.overview.title' | translate}}</h2>
+  <h2>{{'process.overview.title' | translate}}</h2>
   <ds-pagination  *ngIf="(processesRD$ | async)?.payload?.totalElements > 0"
                   [paginationOptions]="pageConfig"
                   [pageInfoState]="(processesRD$ | async)?.payload"
@@ -10,12 +10,12 @@
     <table class="table table-striped table-hover table-responsive">
       <thead>
         <tr>
-          <th scope="col">{{'process.page.overview.table.id' | translate}}</th>
-          <th scope="col">{{'process.page.overview.table.name' | translate}}</th>
-          <th scope="col">{{'process.page.overview.table.user' | translate}}</th>
-          <th scope="col">{{'process.page.overview.table.start' | translate}}</th>
-          <th scope="col">{{'process.page.overview.table.finish' | translate}}</th>
-          <th scope="col">{{'process.page.overview.table.status' | translate}}</th>
+          <th scope="col">{{'process.overview.table.id' | translate}}</th>
+          <th scope="col">{{'process.overview.table.name' | translate}}</th>
+          <th scope="col">{{'process.overview.table.user' | translate}}</th>
+          <th scope="col">{{'process.overview.table.start' | translate}}</th>
+          <th scope="col">{{'process.overview.table.finish' | translate}}</th>
+          <th scope="col">{{'process.overview.table.status' | translate}}</th>
         </tr>
       </thead>
       <tbody>
diff --git a/src/app/process-page/process-breadcrumb.resolver.spec.ts b/src/app/process-page/process-breadcrumb.resolver.spec.ts
new file mode 100644
index 0000000000..2d4a0e296e
--- /dev/null
+++ b/src/app/process-page/process-breadcrumb.resolver.spec.ts
@@ -0,0 +1,40 @@
+import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
+import { Process } from './processes/process.model';
+import { createSuccessfulRemoteDataObject$ } from '../shared/testing/utils';
+import { ProcessDataService } from '../core/data/processes/process-data.service';
+
+describe('ProcessBreadcrumbResolver', () => {
+  describe('resolve', () => {
+    let resolver: ProcessBreadcrumbResolver;
+    let processDataService: ProcessDataService;
+    let processBreadcrumbService: any;
+    let process: Process;
+    let id: string;
+    let path: string;
+    beforeEach(() => {
+      id = '12345';
+      process = Object.assign(new Process(), { id });
+      path = 'rest.com/path/to/breadcrumb/12345';
+      processBreadcrumbService = {};
+      processDataService = {
+        findById: () => createSuccessfulRemoteDataObject$(process)
+      } as any;
+      resolver = new ProcessBreadcrumbResolver(processBreadcrumbService, processDataService);
+    });
+
+    it('should resolve the breadcrumb config', (done) => {
+      const resolvedConfig = resolver.resolve({ data: { breadcrumbKey: process }, params: { id: id} } as any, {url: path} as any);
+      const expectedConfig = { provider: processBreadcrumbService, key: process, url: path};
+      resolvedConfig.subscribe((config) => {
+        expect(config).toEqual(expectedConfig);
+        done();
+      })
+    });
+
+    it('should resolve throw an error when no breadcrumbKey is defined', () => {
+      expect(() => {
+        resolver.resolve({ data: {} } as any, undefined)
+      }).toThrow();
+    });
+  });
+});
diff --git a/src/app/process-page/process-breadcrumbs.service.spec.ts b/src/app/process-page/process-breadcrumbs.service.spec.ts
new file mode 100644
index 0000000000..7751c985ce
--- /dev/null
+++ b/src/app/process-page/process-breadcrumbs.service.spec.ts
@@ -0,0 +1,36 @@
+import { async, TestBed } from '@angular/core/testing';
+import { getTestScheduler } from 'jasmine-marbles';
+import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+import { Breadcrumb } from '../breadcrumbs/breadcrumb/breadcrumb.model';
+import { Process } from './processes/process.model';
+
+describe('ProcessBreadcrumbsService', () => {
+  let service: ProcessBreadcrumbsService;
+  let exampleId;
+  let exampleScriptName;
+  let exampleProcess;
+  let exampleURL;
+
+  function init() {
+    exampleId = '12345';
+    exampleScriptName = 'Example Script';
+    exampleProcess = Object.assign(new Process(), {processId: exampleId, scriptName: exampleScriptName});
+    exampleURL = 'example.com';
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({}).compileComponents();
+  }));
+
+  beforeEach(() => {
+    service = new ProcessBreadcrumbsService();
+  });
+
+  describe('getBreadcrumbs', () => {
+    it('should return a breadcrumb based on a id and scriptName of the process', () => {
+      const breadcrumbs = service.getBreadcrumbs(exampleProcess, exampleURL);
+      getTestScheduler().expectObservable(breadcrumbs).toBe('(a|)', { a: [new Breadcrumb(exampleId + ' - ' + exampleScriptName, exampleURL)] });
+    })
+  });
+});
diff --git a/src/app/process-page/process-page-routing.module.ts b/src/app/process-page/process-page-routing.module.ts
index e8a30d2815..881ca0e853 100644
--- a/src/app/process-page/process-page-routing.module.ts
+++ b/src/app/process-page/process-page-routing.module.ts
@@ -14,7 +14,7 @@ import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
       {
         path: '',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
-        data: { breadcrumbKey: 'process' },
+        data: { breadcrumbKey: 'process.overview' },
         canActivate: [AuthenticatedGuard],
         children: [
           {

From 3a73de90ba0c7d8cd5210bdefcfa250001cdba8f Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 31 Mar 2020 10:00:02 +0200
Subject: [PATCH 40/84] fixed alignment issue on new process page

---
 .../parameter-select.component.html           | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
index 81f9c600ec..f12596c6e4 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
@@ -1,16 +1,16 @@
-<div class="form-row mb-2">
-        <select id="process-parameters"
-                class="form-control col"
-                name="parameter-{{index}}"
-                [(ngModel)]="selectedParameter"
-                #param="ngModel">
-            <option [ngValue]="undefined">Add a parameter...</option>
-            <option *ngFor="let param of parameters" [ngValue]="param.name">
-                {{param.nameLong || param.name}}
-            </option>
-        </select>
-        <ds-parameter-value-input [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col" [index]="index"></ds-parameter-value-input>
-        <button *ngIf="removable" class="btn btn-light col-1 remove-button" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
-        <span *ngIf="!removable" class="col-1"></span>
+<div class="form-row mb-2 mx-0">
+    <select id="process-parameters"
+            class="form-control col"
+            name="parameter-{{index}}"
+            [(ngModel)]="selectedParameter"
+            #param="ngModel">
+        <option [ngValue]="undefined">Add a parameter...</option>
+        <option *ngFor="let param of parameters" [ngValue]="param.name">
+            {{param.nameLong || param.name}}
+        </option>
+    </select>
+    <ds-parameter-value-input [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col" [index]="index"></ds-parameter-value-input>
+    <button *ngIf="removable" class="btn btn-light col-1 remove-button" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
+    <span *ngIf="!removable" class="col-1"></span>
 </div>
 

From b5e1394fce6aed7dc4f142358049c7d9f5539df8 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Mon, 4 May 2020 17:38:31 +0200
Subject: [PATCH 41/84] 65272: Post-merge fixes

---
 .../edit-item-template-page.component.ts      |  2 +-
 .../item-template-page.resolver.ts            |  3 ++-
 .../models/normalized-template-item.model.ts  | 22 ------------------
 src/app/core/data/data.service.ts             | 11 +++++++--
 .../core/data/item-template-data.service.ts   | 23 +++++++++++--------
 src/app/core/shared/template-item.model.ts    | 10 ++++++--
 .../shared/template-item.resource-type.ts     |  9 ++++++++
 7 files changed, 42 insertions(+), 38 deletions(-)
 delete mode 100644 src/app/core/cache/models/normalized-template-item.model.ts
 create mode 100644 src/app/core/shared/template-item.resource-type.ts

diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
index 0170ab620b..d4b49ef280 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -26,7 +26,7 @@ export class EditItemTemplatePageComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.collectionRD$ = this.route.data.pipe(first(), map((data) => data.collection));
+    this.collectionRD$ = this.route.parent.data.pipe(first(), map((data) => data.dso));
   }
 
   /**
diff --git a/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
index 07ccfd9eee..919e131836 100644
--- a/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
+++ b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
@@ -6,6 +6,7 @@ import { ItemTemplateDataService } from '../../core/data/item-template-data.serv
 import { Observable } from 'rxjs/internal/Observable';
 import { find } from 'rxjs/operators';
 import { hasValue } from '../../shared/empty.util';
+import { followLink } from '../../shared/utils/follow-link-config.model';
 
 /**
  * This class represents a resolver that requests a specific collection's item template before the route is activated
@@ -23,7 +24,7 @@ export class ItemTemplatePageResolver implements Resolve<RemoteData<Item>> {
    * or an error if something went wrong
    */
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Item>> {
-    return this.itemTemplateService.findByCollectionID(route.params.id).pipe(
+    return this.itemTemplateService.findByCollectionID(route.params.id, followLink('templateItemOf')).pipe(
       find((RD) => hasValue(RD.error) || RD.hasSucceeded),
     );
   }
diff --git a/src/app/core/cache/models/normalized-template-item.model.ts b/src/app/core/cache/models/normalized-template-item.model.ts
deleted file mode 100644
index 7a3259d74d..0000000000
--- a/src/app/core/cache/models/normalized-template-item.model.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { inheritSerialization, deserialize } from 'cerialize';
-
-import { mapsTo, relationship } from '../builders/build-decorators';
-import { TemplateItem } from '../../shared/template-item.model';
-import { NormalizedItem } from './normalized-item.model';
-import { Collection } from '../../shared/collection.model';
-
-/**
- * Normalized model class for a DSpace Template Item
- */
-@mapsTo(TemplateItem)
-@inheritSerialization(NormalizedItem)
-export class NormalizedTemplateItem extends NormalizedItem {
-
-  /**
-   * The Collection that this item is a template for
-   */
-  @deserialize
-  @relationship(Collection, false)
-  templateItemOf: string;
-
-}
diff --git a/src/app/core/data/data.service.ts b/src/app/core/data/data.service.ts
index 0860bc5915..ff228e08fc 100644
--- a/src/app/core/data/data.service.ts
+++ b/src/app/core/data/data.service.ts
@@ -75,6 +75,13 @@ export abstract class DataService<T extends CacheableObject> implements UpdateDa
    * @returns {Observable<string>}
    */
   getBrowseEndpoint(options: FindListOptions = {}, linkPath?: string): Observable<string> {
+    return this.getEndpoint();
+  }
+
+  /**
+   * Get the base endpoint for all requests
+   */
+  protected getEndpoint(): Observable<string> {
     return this.halService.getEndpoint(this.linkPath);
   }
 
@@ -238,7 +245,7 @@ export abstract class DataService<T extends CacheableObject> implements UpdateDa
    * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
    */
   getIDHrefObs(resourceID: string, ...linksToFollow: Array<FollowLinkConfig<T>>): Observable<string> {
-    return this.getBrowseEndpoint().pipe(
+    return this.getEndpoint().pipe(
       map((endpoint: string) => this.getIDHref(endpoint, resourceID, ...linksToFollow)));
   }
 
@@ -395,7 +402,7 @@ export abstract class DataService<T extends CacheableObject> implements UpdateDa
    */
   create(dso: T, parentUUID?: string): Observable<RemoteData<T>> {
     const requestId = this.requestService.generateRequestId();
-    const endpoint$ = this.getBrowseEndpoint().pipe(
+    const endpoint$ = this.getEndpoint().pipe(
       isNotEmptyOperator(),
       distinctUntilChanged(),
       map((endpoint: string) => parentUUID ? `${endpoint}?parent=${parentUUID}` : endpoint)
diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
index aaa664d7ec..69e7ae91b1 100644
--- a/src/app/core/data/item-template-data.service.ts
+++ b/src/app/core/data/item-template-data.service.ts
@@ -8,7 +8,6 @@ import { Observable } from 'rxjs/internal/Observable';
 import { DSOChangeAnalyzer } from './dso-change-analyzer.service';
 import { RequestService } from './request.service';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
-import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
 import { Store } from '@ngrx/store';
 import { CoreState } from '../core.reducers';
 import { ObjectCacheService } from '../cache/object-cache.service';
@@ -18,6 +17,8 @@ import { HttpClient } from '@angular/common/http';
 import { BrowseService } from '../browse/browse.service';
 import { CollectionDataService } from './collection-data.service';
 import { switchMap } from 'rxjs/operators';
+import { BundleDataService } from './bundle-data.service';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 
 /* tslint:disable:max-classes-per-file */
 /**
@@ -41,7 +42,6 @@ class DataServiceImpl extends ItemDataService {
   constructor(
     protected requestService: RequestService,
     protected rdbService: RemoteDataBuildService,
-    protected dataBuildService: NormalizedObjectBuildService,
     protected store: Store<CoreState>,
     protected bs: BrowseService,
     protected objectCache: ObjectCacheService,
@@ -49,8 +49,9 @@ class DataServiceImpl extends ItemDataService {
     protected notificationsService: NotificationsService,
     protected http: HttpClient,
     protected comparator: DSOChangeAnalyzer<Item>,
+    protected bundleService: BundleDataService,
     protected collectionService: CollectionDataService) {
-    super(requestService, rdbService, dataBuildService, store, bs, objectCache, halService, notificationsService, http, comparator);
+    super(requestService, rdbService, store, bs, objectCache, halService, notificationsService, http, comparator, bundleService);
   }
 
   /**
@@ -96,10 +97,11 @@ class DataServiceImpl extends ItemDataService {
   /**
    * Set the collection ID and send a find by ID request
    * @param collectionID
+   * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
    */
-  findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
+  findByCollectionID(collectionID: string, ...linksToFollow: Array<FollowLinkConfig<Item>>): Observable<RemoteData<Item>> {
     this.setCollectionEndpoint(collectionID);
-    return super.findById(collectionID);
+    return super.findById(collectionID, ...linksToFollow);
   }
 
   /**
@@ -119,7 +121,7 @@ class DataServiceImpl extends ItemDataService {
    */
   deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
     this.setRegularEndpoint();
-    return super.delete(item);
+    return super.delete(item.uuid);
   }
 }
 
@@ -136,7 +138,6 @@ export class ItemTemplateDataService implements UpdateDataService<Item> {
   constructor(
     protected requestService: RequestService,
     protected rdbService: RemoteDataBuildService,
-    protected dataBuildService: NormalizedObjectBuildService,
     protected store: Store<CoreState>,
     protected bs: BrowseService,
     protected objectCache: ObjectCacheService,
@@ -144,8 +145,9 @@ export class ItemTemplateDataService implements UpdateDataService<Item> {
     protected notificationsService: NotificationsService,
     protected http: HttpClient,
     protected comparator: DSOChangeAnalyzer<Item>,
+    protected bundleService: BundleDataService,
     protected collectionService: CollectionDataService) {
-    this.dataService = new DataServiceImpl(requestService, rdbService, dataBuildService, store, bs, objectCache, halService, notificationsService, http, comparator, collectionService);
+    this.dataService = new DataServiceImpl(requestService, rdbService, store, bs, objectCache, halService, notificationsService, http, comparator, bundleService, collectionService);
   }
 
   /**
@@ -165,9 +167,10 @@ export class ItemTemplateDataService implements UpdateDataService<Item> {
   /**
    * Find an item template by collection ID
    * @param collectionID
+   * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
    */
-  findByCollectionID(collectionID: string): Observable<RemoteData<Item>> {
-    return this.dataService.findByCollectionID(collectionID);
+  findByCollectionID(collectionID: string, ...linksToFollow: Array<FollowLinkConfig<Item>>): Observable<RemoteData<Item>> {
+    return this.dataService.findByCollectionID(collectionID, ...linksToFollow);
   }
 
   /**
diff --git a/src/app/core/shared/template-item.model.ts b/src/app/core/shared/template-item.model.ts
index ef60c6906e..bfcf941e41 100644
--- a/src/app/core/shared/template-item.model.ts
+++ b/src/app/core/shared/template-item.model.ts
@@ -1,18 +1,24 @@
+import { inheritSerialization } from 'cerialize';
 import { Item } from './item.model';
 import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from '../data/remote-data';
 import { Collection } from './collection.model';
-import { ResourceType } from './resource-type';
+import { ITEM_TEMPLATE } from './template-item.resource-type';
+import { link, typedObject } from '../cache/builders/build-decorators';
+import { COLLECTION } from './collection.resource-type';
 
 /**
  * Class representing a DSpace Template Item
  */
+@typedObject
+@inheritSerialization(Item)
 export class TemplateItem extends Item {
-  static type = new ResourceType('itemtemplate');
+  static type = ITEM_TEMPLATE;
 
   /**
    * The Collection that this item is a template for
    */
+  @link(COLLECTION)
   templateItemOf: Observable<RemoteData<Collection>>;
 
 }
diff --git a/src/app/core/shared/template-item.resource-type.ts b/src/app/core/shared/template-item.resource-type.ts
new file mode 100644
index 0000000000..06692d8cc7
--- /dev/null
+++ b/src/app/core/shared/template-item.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from './resource-type';
+
+/**
+ * The resource type for TemplateItem.
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const ITEM_TEMPLATE = new ResourceType('itemtemplate');

From f5f4570116c8c01d26627aff04844261d053b4b8 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Mon, 4 May 2020 17:57:08 +0200
Subject: [PATCH 42/84] 65272: Allow relationship fields to be edited

---
 .../item-metadata/item-metadata.component.ts             | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
index 8c1ef9e0b4..127b38c8bd 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
@@ -124,7 +124,7 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
             this.item = rd.payload;
             this.checkAndFixMetadataUUIDs();
             this.initializeOriginalFields();
-            this.updates$ = this.objectUpdatesService.getFieldUpdates(this.url, this.getMetadataAsListExcludingRelationships());
+            this.updates$ = this.objectUpdatesService.getFieldUpdates(this.url, this.item.metadataAsList);
             this.notificationsService.success(this.getNotificationTitle('saved'), this.getNotificationContent('saved'));
           }
         )
@@ -144,13 +144,6 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
       map((remoteData$) => remoteData$.payload.page.map((field: MetadataField) => field.toString())));
   }
 
-  /**
-   * Get the object's metadata as a list and exclude relationship metadata
-   */
-  getMetadataAsListExcludingRelationships(): MetadatumViewModel[] {
-    return this.item.metadataAsList.filter((metadata: MetadatumViewModel) => !metadata.key.startsWith('relation.') && !metadata.key.startsWith('relationship.'));
-  }
-
   /**
    * Check for empty metadata UUIDs and fix them (empty UUIDs would break the object-update service)
    */

From a561f37b00edd6cf8585b309663086d89e43666d Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Mon, 11 May 2020 11:29:29 +0200
Subject: [PATCH 43/84] fixed missing comma

---
 src/app/shared/shared.module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7d29882331..f9f9626bb0 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -473,7 +473,7 @@ const DIRECTIVES = [
   RoleDirective,
   MetadataRepresentationDirective,
   ListableObjectDirective,
-  ClaimedTaskActionsDirective
+  ClaimedTaskActionsDirective,
   FileValueAccessorDirective,
   FileValidator
 ];

From 67b73ff921f7b55249ebfea082f3333866c7476d Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Mon, 11 May 2020 13:21:01 +0200
Subject: [PATCH 44/84] 70597: Test fixes

---
 .../collection-metadata.component.spec.ts                 | 8 ++++++--
 .../edit-item-template-page.component.spec.ts             | 2 +-
 .../item-bitstreams/item-bitstreams.component.spec.ts     | 1 +
 src/app/core/cache/server-sync-buffer.effects.spec.ts     | 5 -----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
index 784fa81579..84fc07efe9 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
@@ -23,13 +23,17 @@ describe('CollectionMetadataComponent', () => {
   let itemTemplateService: ItemTemplateDataService;
 
   const template = Object.assign(new Item(), {
-    self: 'template-selflink'
+    _links: {
+      self: { href: 'template-selflink' }
+    }
   });
   const collection = Object.assign(new Collection(), {
     uuid: 'collection-id',
     id: 'collection-id',
     name: 'Fake Collection',
-    self: 'collection-selflink'
+    _links: {
+      self: { href: 'collection-selflink' }
+    }
   });
 
   const itemTemplateServiceStub = Object.assign({
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
index 90857712b8..794134a5e5 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
@@ -29,7 +29,7 @@ describe('EditItemTemplatePageComponent', () => {
       declarations: [EditItemTemplatePageComponent],
       providers: [
         { provide: ItemTemplateDataService, useValue: {} },
-        { provide: ActivatedRoute, useValue: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } }
+        { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
index 9184889257..9ed107db58 100644
--- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
@@ -143,6 +143,7 @@ describe('ItemBitstreamsComponent', () => {
       parent: {
         data: observableOf({ item: createMockRD(item) })
       },
+      data: observableOf({}),
       url: url
     });
     bundleService = jasmine.createSpyObj('bundleService', {
diff --git a/src/app/core/cache/server-sync-buffer.effects.spec.ts b/src/app/core/cache/server-sync-buffer.effects.spec.ts
index e58e8406ed..c2aa7b14f9 100644
--- a/src/app/core/cache/server-sync-buffer.effects.spec.ts
+++ b/src/app/core/cache/server-sync-buffer.effects.spec.ts
@@ -59,11 +59,6 @@ describe('ServerSyncBufferEffects', () => {
                 }
               });
               return observableOf(object);
-            },
-            getBySelfLink: (link) => {
-              const object = new DSpaceObject();
-              object.self = link;
-              return observableOf(object);
             }
           }
         },

From 7ced70b7d316bb57ee06312d786075ff9bfe58f7 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 12 May 2020 16:33:42 +0200
Subject: [PATCH 45/84] fixed issues with tests

---
 .../detail/process-detail.component.spec.ts            |  7 ++-----
 src/app/process-page/new/new-process.component.spec.ts |  8 ++++----
 .../date-value-input.component.spec.ts                 |  4 ++--
 .../file-value-input.component.spec.ts                 |  4 ++--
 .../parameter-value-input.component.spec.ts            |  4 ++--
 .../string-value-input.component.spec.ts               |  4 ++--
 .../process-parameters.component.spec.ts               |  4 ++--
 .../new/script-help/script-help.component.spec.ts      |  4 ++--
 .../scripts-select/scripts-select.component.spec.ts    | 10 +++++-----
 .../overview/process-overview.component.spec.ts        |  3 ++-
 .../process-page/process-breadcrumb.resolver.spec.ts   |  2 +-
 11 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/app/process-page/detail/process-detail.component.spec.ts b/src/app/process-page/detail/process-detail.component.spec.ts
index ed54ae7afd..dff481fdc6 100644
--- a/src/app/process-page/detail/process-detail.component.spec.ts
+++ b/src/app/process-page/detail/process-detail.component.spec.ts
@@ -8,16 +8,13 @@ import { ProcessDetailFieldComponent } from './process-detail-field/process-deta
 import { Process } from '../processes/process.model';
 import { ActivatedRoute } from '@angular/router';
 import { of as observableOf } from 'rxjs';
-import {
-  createPaginatedList,
-  createSuccessfulRemoteDataObject,
-  createSuccessfulRemoteDataObject$
-} from '../../shared/testing/utils';
 import { By } from '@angular/platform-browser';
 import { FileSizePipe } from '../../shared/utils/file-size-pipe';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { ProcessDataService } from '../../core/data/processes/process-data.service';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { createPaginatedList } from '../../shared/testing/utils.test';
 
 describe('ProcessDetailComponent', () => {
   let component: ProcessDetailComponent;
diff --git a/src/app/process-page/new/new-process.component.spec.ts b/src/app/process-page/new/new-process.component.spec.ts
index 081bd36528..ae7a965ee1 100644
--- a/src/app/process-page/new/new-process.component.spec.ts
+++ b/src/app/process-page/new/new-process.component.spec.ts
@@ -5,13 +5,13 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { NewProcessComponent } from './new-process.component';
 import { ScriptDataService } from '../../core/data/processes/script-data.service';
-import { MockTranslateLoader } from '../../shared/testing/mock-translate-loader';
 import { ScriptParameter } from '../scripts/script-parameter.model';
 import { Script } from '../scripts/script.model';
 import { ProcessParameter } from '../processes/process-parameter.model';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { NotificationsServiceStub } from '../../shared/testing/notifications-service-stub';
 import { of as observableOf } from 'rxjs';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 
 describe('NewProcessComponent', () => {
   let component: NewProcessComponent;
@@ -50,13 +50,13 @@ describe('NewProcessComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: MockTranslateLoader
+            useClass: TranslateLoaderMock
           }
         })],
       declarations: [NewProcessComponent],
       providers: [
         { provide: ScriptDataService, useValue: scriptService },
-        { provide: NotificationsService, useValue: NotificationsServiceStub },
+        { provide: NotificationsService, useClass: NotificationsServiceStub },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
index ab50efc93c..4f2212eff6 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
@@ -3,8 +3,8 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core
 import { DateValueInputComponent } from './date-value-input.component';
 import { FormsModule } from '@angular/forms';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { MockTranslateLoader } from '../../../../../shared/mocks/mock-translate-loader';
 import { By } from '@angular/platform-browser';
+import { TranslateLoaderMock } from '../../../../../shared/mocks/translate-loader.mock';
 
 describe('DateValueInputComponent', () => {
   let component: DateValueInputComponent;
@@ -17,7 +17,7 @@ describe('DateValueInputComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: MockTranslateLoader
+            useClass: TranslateLoaderMock
           }
         })],
       declarations: [DateValueInputComponent]
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
index 5bb41295ed..434d5e4edb 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
@@ -2,12 +2,12 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core
 
 import { FormsModule, NgForm, ReactiveFormsModule } from '@angular/forms';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { MockTranslateLoader } from '../../../../../shared/mocks/mock-translate-loader';
 import { By } from '@angular/platform-browser';
 import { FileValueInputComponent } from './file-value-input.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { FileValueAccessorDirective } from '../../../../../shared/utils/file-value-accessor.directive';
 import { FileValidator } from '../../../../../shared/utils/require-file.validator';
+import { TranslateLoaderMock } from '../../../../../shared/mocks/translate-loader.mock';
 
 describe('FileValueInputComponent', () => {
   let component: FileValueInputComponent;
@@ -20,7 +20,7 @@ describe('FileValueInputComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: MockTranslateLoader
+            useClass: TranslateLoaderMock
           }
         })],
       declarations: [FileValueInputComponent, FileValueAccessorDirective, FileValidator],
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
index ef315ac981..4a89c4924d 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
@@ -11,9 +11,9 @@ import { DateValueInputComponent } from './date-value-input/date-value-input.com
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { MockTranslateLoader } from '../../../../shared/testing/mock-translate-loader';
 import { FileValueAccessorDirective } from '../../../../shared/utils/file-value-accessor.directive';
 import { FileValidator } from '../../../../shared/utils/require-file.validator';
+import { TranslateLoaderMock } from '../../../../shared/mocks/translate-loader.mock';
 
 describe('ParameterValueInputComponent', () => {
   let component: ParameterValueInputComponent;
@@ -40,7 +40,7 @@ describe('ParameterValueInputComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: MockTranslateLoader
+            useClass: TranslateLoaderMock
           }
         })],
       declarations: [
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
index c04b8034b6..e702746adc 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
@@ -2,9 +2,9 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core
 
 import { FormsModule, NgForm } from '@angular/forms';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { MockTranslateLoader } from '../../../../../shared/mocks/mock-translate-loader';
 import { By } from '@angular/platform-browser';
 import { StringValueInputComponent } from './string-value-input.component';
+import { TranslateLoaderMock } from '../../../../../shared/mocks/translate-loader.mock';
 
 describe('StringValueInputComponent', () => {
   let component: StringValueInputComponent;
@@ -17,7 +17,7 @@ describe('StringValueInputComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: MockTranslateLoader
+            useClass: TranslateLoaderMock
           }
         })],
       declarations: [StringValueInputComponent],
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts b/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
index 2a95d542f0..3fc94d92a1 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
+++ b/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
@@ -6,10 +6,10 @@ import { By } from '@angular/platform-browser';
 import { ParameterSelectComponent } from './parameter-select/parameter-select.component';
 import { FormsModule } from '@angular/forms';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { MockTranslateLoader } from '../../../shared/testing/mock-translate-loader';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { Script } from '../../scripts/script.model';
 import { ScriptParameter } from '../../scripts/script-parameter.model';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
 
 describe('ProcessParametersComponent', () => {
   let component: ProcessParametersComponent;
@@ -36,7 +36,7 @@ describe('ProcessParametersComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: MockTranslateLoader
+            useClass: TranslateLoaderMock
           }
         })],
       declarations: [ProcessParametersComponent, ParameterSelectComponent],
diff --git a/src/app/process-page/new/script-help/script-help.component.spec.ts b/src/app/process-page/new/script-help/script-help.component.spec.ts
index 4ca582e83e..4e4aa48276 100644
--- a/src/app/process-page/new/script-help/script-help.component.spec.ts
+++ b/src/app/process-page/new/script-help/script-help.component.spec.ts
@@ -8,7 +8,7 @@ import { By } from '@angular/platform-browser';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
-import { MockTranslateLoader } from '../../../shared/testing/mock-translate-loader';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
 
 describe('ScriptHelpComponent', () => {
   let component: ScriptHelpComponent;
@@ -34,7 +34,7 @@ describe('ScriptHelpComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: MockTranslateLoader
+            useClass: TranslateLoaderMock
           }
         })],
       declarations: [ ScriptHelpComponent ],
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts b/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
index f7e1f82735..db6d6e85b8 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
@@ -4,15 +4,15 @@ import { FormsModule } from '@angular/forms';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { By } from '@angular/platform-browser';
 import { ScriptsSelectComponent } from './scripts-select.component';
-import { MockTranslateLoader } from '../../../shared/testing/mock-translate-loader';
 import { Script } from '../../scripts/script.model';
 import { ScriptDataService } from '../../../core/data/processes/script-data.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../../shared/testing/router-stub';
-import { ActivatedRouteStub } from '../../../shared/testing/active-router-stub';
-import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils';
 import { PaginatedList } from '../../../core/data/paginated-list';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+import { RouterStub } from '../../../shared/testing/router.stub';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
 
 describe('ScriptsSelectComponent', () => {
   let component: ScriptsSelectComponent;
@@ -39,7 +39,7 @@ describe('ScriptsSelectComponent', () => {
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useClass: MockTranslateLoader
+            useClass: TranslateLoaderMock
           }
         })],
       declarations: [ScriptsSelectComponent],
diff --git a/src/app/process-page/overview/process-overview.component.spec.ts b/src/app/process-page/overview/process-overview.component.spec.ts
index a13eda3821..bbdd7d7a6c 100644
--- a/src/app/process-page/overview/process-overview.component.spec.ts
+++ b/src/app/process-page/overview/process-overview.component.spec.ts
@@ -8,9 +8,10 @@ import { ProcessDataService } from '../../core/data/processes/process-data.servi
 import { Process } from '../processes/process.model';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
-import { createPaginatedList, createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils';
 import { By } from '@angular/platform-browser';
 import { ProcessStatus } from '../processes/process-status.model';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { createPaginatedList } from '../../shared/testing/utils.test';
 
 describe('ProcessOverviewComponent', () => {
   let component: ProcessOverviewComponent;
diff --git a/src/app/process-page/process-breadcrumb.resolver.spec.ts b/src/app/process-page/process-breadcrumb.resolver.spec.ts
index 2d4a0e296e..4c2e6b8158 100644
--- a/src/app/process-page/process-breadcrumb.resolver.spec.ts
+++ b/src/app/process-page/process-breadcrumb.resolver.spec.ts
@@ -1,7 +1,7 @@
 import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
 import { Process } from './processes/process.model';
-import { createSuccessfulRemoteDataObject$ } from '../shared/testing/utils';
 import { ProcessDataService } from '../core/data/processes/process-data.service';
+import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
 
 describe('ProcessBreadcrumbResolver', () => {
   describe('resolve', () => {

From 8b78ed3a97549effbc4d541fae1266af49670eab Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 19 May 2020 11:11:07 +0200
Subject: [PATCH 46/84] 68067: Fix adding/removing menu sections

---
 src/app/shared/menu/menu.component.ts | 4 ++--
 src/app/shared/menu/menu.reducer.ts   | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index 1e81fa2dda..142471224d 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -3,7 +3,7 @@ import { Observable } from 'rxjs/internal/Observable';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID } from '../../shared/menu/initial-menus-state';
 import { MenuSection } from '../../shared/menu/menu.reducer';
-import { first, map } from 'rxjs/operators';
+import { distinctUntilChanged, first, map } from 'rxjs/operators';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { hasValue } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
@@ -72,7 +72,7 @@ export class MenuComponent implements OnInit {
     this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.menuVisible = this.menuService.isMenuVisible(this.menuID);
-    this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(first());
+    this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(distinctUntilChanged((x, y) => x.length === y.length));
     this.sections.subscribe((sections: MenuSection[]) => {
       sections.forEach((section: MenuSection) => {
         this.sectionInjectors.set(section.id, this.getSectionDataInjector(section));
diff --git a/src/app/shared/menu/menu.reducer.ts b/src/app/shared/menu/menu.reducer.ts
index 078343a990..e5a30770d8 100644
--- a/src/app/shared/menu/menu.reducer.ts
+++ b/src/app/shared/menu/menu.reducer.ts
@@ -176,7 +176,9 @@ function removeSection(state: MenusState, action: RemoveMenuSectionAction) {
   const menuState: MenuState = state[action.menuID];
   const id = action.id;
   const newState = removeFromIndex(state, menuState.sections[action.id], action.menuID);
-  const newMenuState = Object.assign({}, newState[action.menuID]);
+  const newMenuState = Object.assign({}, newState[action.menuID], {
+    sections: Object.assign({}, newState[action.menuID].sections)
+  });
   delete newMenuState.sections[id];
   return Object.assign({}, newState, { [action.menuID]: newMenuState });
 }

From 172d0d986b9b5bdd97d1aab7d23256d4cf4e3d05 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 19 May 2020 12:08:59 +0200
Subject: [PATCH 47/84] 68067: JSON.stringify to compare menu section changes

---
 src/app/shared/menu/menu.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index 142471224d..29a3e0a30a 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -3,7 +3,7 @@ import { Observable } from 'rxjs/internal/Observable';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID } from '../../shared/menu/initial-menus-state';
 import { MenuSection } from '../../shared/menu/menu.reducer';
-import { distinctUntilChanged, first, map } from 'rxjs/operators';
+import { distinctUntilChanged, first, map, tap } from 'rxjs/operators';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { hasValue } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
@@ -72,7 +72,7 @@ export class MenuComponent implements OnInit {
     this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.menuVisible = this.menuService.isMenuVisible(this.menuID);
-    this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(distinctUntilChanged((x, y) => x.length === y.length));
+    this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(distinctUntilChanged((x, y) => JSON.stringify(x) === JSON.stringify(y)));
     this.sections.subscribe((sections: MenuSection[]) => {
       sections.forEach((section: MenuSection) => {
         this.sectionInjectors.set(section.id, this.getSectionDataInjector(section));

From ff0750d0532e420da1891998d403b5efd2061dbd Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 19 May 2020 14:37:17 +0200
Subject: [PATCH 48/84] 68067: Add menu sections through route data

---
 .../admin-sidebar/admin-sidebar.component.ts  |  8 ++-
 src/app/navbar/navbar.component.ts            | 12 ++--
 src/app/shared/menu/menu.actions.ts           | 14 +++++
 src/app/shared/menu/menu.component.ts         | 55 ++++++++++++++++++-
 src/app/shared/menu/menu.reducer.ts           |  6 +-
 src/app/shared/menu/menu.service.ts           | 16 ++++--
 6 files changed, 93 insertions(+), 18 deletions(-)

diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
index 5d885b918b..d3633c86b2 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
@@ -18,6 +18,7 @@ import { TextMenuItemModel } from '../../shared/menu/menu-item/models/text.model
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Component representing the admin sidebar
@@ -59,18 +60,19 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
 
   constructor(protected menuService: MenuService,
               protected injector: Injector,
+              protected route: ActivatedRoute,
+              protected router: Router,
               private variableService: CSSVariableService,
               private authService: AuthService,
               private modalService: NgbModal
   ) {
-    super(menuService, injector);
+    super(menuService, injector, route, router);
   }
 
   /**
    * Set and calculate all initial values of the instance variables
    */
   ngOnInit(): void {
-    this.createMenu();
     super.ngOnInit();
     this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
     this.authService.isAuthenticated()
@@ -93,7 +95,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
   /**
    * Initialize all menu sections and items for this menu
    */
-  private createMenu() {
+  createMenu() {
     const menuList = [
       /* News */
       {
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 6055aac263..99e44ff489 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -7,6 +7,7 @@ import { TextMenuItemModel } from '../shared/menu/menu-item/models/text.model';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { HostWindowService } from '../shared/host-window.service';
 import { environment } from '../../environments/environment';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Component representing the public navbar
@@ -17,7 +18,7 @@ import { environment } from '../../environments/environment';
   templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
-export class NavbarComponent extends MenuComponent implements OnInit {
+export class NavbarComponent extends MenuComponent {
   /**
    * The menu ID of the Navbar is PUBLIC
    * @type {MenuID.PUBLIC}
@@ -26,14 +27,11 @@ export class NavbarComponent extends MenuComponent implements OnInit {
 
   constructor(protected menuService: MenuService,
               protected injector: Injector,
+              protected route: ActivatedRoute,
+              protected router: Router,
               public windowService: HostWindowService
   ) {
-    super(menuService, injector);
-  }
-
-  ngOnInit(): void {
-    this.createMenu();
-    super.ngOnInit();
+    super(menuService, injector, route, router);
   }
 
   /**
diff --git a/src/app/shared/menu/menu.actions.ts b/src/app/shared/menu/menu.actions.ts
index 00275441d6..5b9166641e 100644
--- a/src/app/shared/menu/menu.actions.ts
+++ b/src/app/shared/menu/menu.actions.ts
@@ -21,6 +21,7 @@ export const MenuActionTypes = {
   EXPAND_MENU_PREVIEW: type('dspace/menu/EXPAND_MENU_PREVIEW'),
   ADD_SECTION: type('dspace/menu-section/ADD_SECTION'),
   REMOVE_SECTION: type('dspace/menu-section/REMOVE_SECTION'),
+  RESET_SECTIONS: type('dspace/menu-section/RESET_SECTIONS'),
   SHOW_SECTION: type('dspace/menu-section/SHOW_SECTION'),
   HIDE_SECTION: type('dspace/menu-section/HIDE_SECTION'),
   ACTIVATE_SECTION: type('dspace/menu-section/ACTIVATE_SECTION'),
@@ -115,6 +116,18 @@ export class ExpandMenuPreviewAction implements Action {
   }
 }
 
+/**
+ * Action used to remove all sections from a certain menu
+ */
+export class ResetMenuSectionsAction implements Action {
+  type = MenuActionTypes.RESET_SECTIONS;
+  menuID: MenuID;
+
+  constructor(menuID: MenuID) {
+    this.menuID = menuID;
+  }
+}
+
 // MENU SECTION ACTIONS
 /**
  * Action used to perform state changes for a section of a certain menu
@@ -225,4 +238,5 @@ export type MenuAction =
   | ToggleActiveMenuSectionAction
   | CollapseMenuPreviewAction
   | ExpandMenuPreviewAction
+  | ResetMenuSectionsAction
 /* tslint:enable:max-classes-per-file */
diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index 29a3e0a30a..4e29ea0ee0 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -3,11 +3,13 @@ import { Observable } from 'rxjs/internal/Observable';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID } from '../../shared/menu/initial-menus-state';
 import { MenuSection } from '../../shared/menu/menu.reducer';
-import { distinctUntilChanged, first, map, tap } from 'rxjs/operators';
+import { distinctUntilChanged, filter, first, map, switchMap, tap } from 'rxjs/operators';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
-import { hasValue } from '../empty.util';
+import { hasNoValue, hasValue } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
 import { getComponentForMenu } from './menu-section.decorator';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { of as observableOf } from 'rxjs/internal/observable/of';
 
 /**
  * A basic implementation of a MenuComponent
@@ -62,13 +64,17 @@ export class MenuComponent implements OnInit {
    */
   private previewTimer;
 
-  constructor(protected menuService: MenuService, protected injector: Injector) {
+  constructor(protected menuService: MenuService,
+              protected injector: Injector,
+              protected route: ActivatedRoute,
+              protected router: Router) {
   }
 
   /**
    * Sets all instance variables to their initial values
    */
   ngOnInit(): void {
+    this.initSections();
     this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.menuVisible = this.menuService.isMenuVisible(this.menuID);
@@ -81,6 +87,49 @@ export class MenuComponent implements OnInit {
     });
   }
 
+  /**
+   * Initialize all menu sections and add them to the menu's store
+   */
+  initSections() {
+    this.router.events.pipe(
+      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
+      tap(() => this.menuService.resetSections(this.menuID)),
+      map(() => this.resolveMenuSections(this.route.root))
+    ).subscribe((sections: MenuSection[]) => {
+      this.createMenu();
+      sections.forEach((section: MenuSection) => {
+        this.menuService.addSection(this.menuID, section);
+      });
+    });
+  }
+
+  /**
+   * Initialize all static menu sections and items for this menu
+   * These sections will be available on any route. Route specific sections should be defined in the route's data instead.
+   */
+  createMenu() {
+    // Override this method to create and add a standard set of menu sections that should be available for the current menu type on all routes
+  }
+
+  /**
+   * Resolve menu sections defined in the current route data (including parent routes)
+   * @param route The route to resolve data for
+   */
+  resolveMenuSections(route: ActivatedRoute): MenuSection[] {
+    const data = route.snapshot.data;
+    const last: boolean = hasNoValue(route.firstChild);
+
+    if (hasValue(data) && hasValue(data.menu)) {
+      if (!last) {
+        return [...data.menu, ...this.resolveMenuSections(route.firstChild)]
+      } else {
+        return [...data.menu];
+      }
+    }
+
+    return !last ? this.resolveMenuSections(route.firstChild) : [];
+  }
+
   /**
    *  Collapse this menu when it's currently expanded, expand it when its currently collapsed
    * @param {Event} event The user event that triggered this method
diff --git a/src/app/shared/menu/menu.reducer.ts b/src/app/shared/menu/menu.reducer.ts
index e5a30770d8..85d6847e69 100644
--- a/src/app/shared/menu/menu.reducer.ts
+++ b/src/app/shared/menu/menu.reducer.ts
@@ -6,7 +6,7 @@ import {
   MenuAction,
   MenuActionTypes,
   MenuSectionAction,
-  RemoveMenuSectionAction,
+  RemoveMenuSectionAction, ResetMenuSectionsAction,
   ShowMenuSectionAction,
   ToggleActiveMenuSectionAction
 } from './menu.actions';
@@ -118,6 +118,10 @@ export function menusReducer(state: MenusState = initialMenusState, action: Menu
     case MenuActionTypes.SHOW_SECTION: {
       return showSection(state, action as ShowMenuSectionAction);
     }
+    case MenuActionTypes.RESET_SECTIONS: {
+      const newMenuState = Object.assign({}, menuState, { sections: {} });
+      return Object.assign({}, state, { [action.menuID]: newMenuState });
+    }
 
     default: {
       return state;
diff --git a/src/app/shared/menu/menu.service.ts b/src/app/shared/menu/menu.service.ts
index 95611daa21..9ff4c2f788 100644
--- a/src/app/shared/menu/menu.service.ts
+++ b/src/app/shared/menu/menu.service.ts
@@ -14,12 +14,12 @@ import {
   ExpandMenuAction,
   ExpandMenuPreviewAction,
   HideMenuAction,
-  RemoveMenuSectionAction,
+  RemoveMenuSectionAction, ResetMenuSectionsAction,
   ShowMenuAction,
   ToggleActiveMenuSectionAction,
   ToggleMenuAction,
 } from './menu.actions';
-import { hasNoValue, hasValue, isNotEmpty } from '../empty.util';
+import { hasNoValue, hasValue, hasValueOperator, isNotEmpty } from '../empty.util';
 
 export function menuKeySelector<T>(key: string, selector): MemoizedSelector<MenuState, T> {
   return createSelector(selector, (state) => {
@@ -98,7 +98,7 @@ export class MenuService {
       switchMap((ids: string[]) =>
         observableCombineLatest(ids.map((id: string) => this.getMenuSection(menuID, id)))
       ),
-      map((sections: MenuSection[]) => sections.filter((section: MenuSection) => !mustBeVisible || section.visible))
+      map((sections: MenuSection[]) => sections.filter((section: MenuSection) => hasValue(section) && (!mustBeVisible || section.visible)))
     );
   }
 
@@ -147,6 +147,14 @@ export class MenuService {
     this.store.dispatch(new RemoveMenuSectionAction(menuID, sectionID));
   }
 
+  /**
+   * Remove all sections within a menu from the store
+   * @param {MenuID} menuID The menu from which the sections are to be removed
+   */
+  resetSections(menuID: MenuID) {
+    this.store.dispatch(new ResetMenuSectionsAction(menuID));
+  }
+
   /**
    * Check if a given menu is collapsed
    * @param {MenuID} menuID The ID of the menu that is to be checked
@@ -270,7 +278,7 @@ export class MenuService {
    * @returns {Observable<boolean>} Emits true when the given section is currently active, false when the given section is currently inactive
    */
   isSectionActive(menuID: MenuID, id: string): Observable<boolean> {
-    return this.getMenuSection(menuID, id).pipe(map((section) => section.active));
+    return this.getMenuSection(menuID, id).pipe(hasValueOperator(), map((section) => section.active));
   }
 
   /**

From 245cb4550355835126419a4c040262da1016d071 Mon Sep 17 00:00:00 2001
From: Samuel <samuel@soundmarker.com>
Date: Tue, 28 Apr 2020 15:08:42 +0200
Subject: [PATCH 49/84] CC License Submission Step

---
 src/app/core/core.module.ts                   |   4 +
 .../submission-cc-licenses-data.service.ts    |  34 +++
 src/app/core/shared/hal-resource.model.ts     |   4 +
 .../submission-cc-licences.resource-type.ts   |   9 +
 .../shared/submission-cc-license.model.ts     |  35 +++
 .../workspaceitem-section-cc-license.model.ts |  11 +
 .../models/workspaceitem-sections.model.ts    |   2 +
 .../shared/ds-select/ds-select.component.html |  31 +++
 .../ds-select/ds-select.component.spec.ts     |  25 ++
 .../shared/ds-select/ds-select.component.ts   |  36 +++
 src/app/shared/shared.module.ts               |   2 +
 ...mission-section-cc-licenses.component.html | 114 +++++++++
 ...sion-section-cc-licenses.component.spec.ts | 220 ++++++++++++++++++
 ...ubmission-section-cc-licenses.component.ts | 197 ++++++++++++++++
 .../submission-form-collection.component.html |  90 ++++---
 src/app/submission/submission.module.ts       |   8 +-
 src/assets/i18n/en.json5                      |  10 +-
 17 files changed, 781 insertions(+), 51 deletions(-)
 create mode 100644 src/app/core/data/submission-cc-licenses-data.service.ts
 create mode 100644 src/app/core/shared/submission-cc-licences.resource-type.ts
 create mode 100644 src/app/core/shared/submission-cc-license.model.ts
 create mode 100644 src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
 create mode 100644 src/app/shared/ds-select/ds-select.component.html
 create mode 100644 src/app/shared/ds-select/ds-select.component.spec.ts
 create mode 100644 src/app/shared/ds-select/ds-select.component.ts
 create mode 100644 src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
 create mode 100644 src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
 create mode 100644 src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts

diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 356dad5ed8..c8f6dcedcd 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -145,6 +145,8 @@ import { Version } from './shared/version.model';
 import { VersionHistory } from './shared/version-history.model';
 import { WorkflowActionDataService } from './data/workflow-action-data.service';
 import { WorkflowAction } from './tasks/models/workflow-action-object.model';
+import { SubmissionCcLicensesDataService } from './data/submission-cc-licenses-data.service';
+import { SubmissionCcLicence } from './shared/submission-cc-license.model';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -214,6 +216,7 @@ const PROVIDERS = [
   BrowseItemsResponseParsingService,
   BrowseService,
   ConfigResponseParsingService,
+  SubmissionCcLicensesDataService,
   SubmissionDefinitionsConfigService,
   SubmissionFormsConfigService,
   SubmissionRestService,
@@ -296,6 +299,7 @@ export const models =
     License,
     WorkflowItem,
     WorkspaceItem,
+    SubmissionCcLicence,
     SubmissionDefinitionsModel,
     SubmissionFormsModel,
     SubmissionSectionModel,
diff --git a/src/app/core/data/submission-cc-licenses-data.service.ts b/src/app/core/data/submission-cc-licenses-data.service.ts
new file mode 100644
index 0000000000..057c4389f7
--- /dev/null
+++ b/src/app/core/data/submission-cc-licenses-data.service.ts
@@ -0,0 +1,34 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { dataService } from '../cache/builders/build-decorators';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { CoreState } from '../core.reducers';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { DataService } from './data.service';
+import { RequestService } from './request.service';
+import { SUBMISSION_CC_LICENSE } from '../shared/submission-cc-licences.resource-type';
+import { SubmissionCcLicence } from '../shared/submission-cc-license.model';
+import { DefaultChangeAnalyzer } from './default-change-analyzer.service';
+
+@Injectable()
+@dataService(SUBMISSION_CC_LICENSE)
+export class SubmissionCcLicensesDataService extends DataService<SubmissionCcLicence> {
+
+  protected linkPath = 'submissioncclicenses';
+
+  constructor(
+    protected comparator: DefaultChangeAnalyzer<SubmissionCcLicence>,
+    protected halService: HALEndpointService,
+    protected http: HttpClient,
+    protected notificationsService: NotificationsService,
+    protected objectCache: ObjectCacheService,
+    protected rdbService: RemoteDataBuildService,
+    protected requestService: RequestService,
+    protected store: Store<CoreState>,
+  ) {
+    super();
+  }
+}
diff --git a/src/app/core/shared/hal-resource.model.ts b/src/app/core/shared/hal-resource.model.ts
index b6ef822a23..334509007b 100644
--- a/src/app/core/shared/hal-resource.model.ts
+++ b/src/app/core/shared/hal-resource.model.ts
@@ -1,4 +1,5 @@
 import { HALLink } from './hal-link.model';
+import { deserialize } from 'cerialize';
 
 /**
  * Represents HAL resources.
@@ -6,10 +7,13 @@ import { HALLink } from './hal-link.model';
  * A HAL resource has a _links section with at least a self link.
  */
 export class HALResource {
+
   /**
    * The {@link HALLink}s for this {@link HALResource}
    */
+  @deserialize
   _links: {
+
     /**
      * The {@link HALLink} that refers to this {@link HALResource}
      */
diff --git a/src/app/core/shared/submission-cc-licences.resource-type.ts b/src/app/core/shared/submission-cc-licences.resource-type.ts
new file mode 100644
index 0000000000..1e65a433f6
--- /dev/null
+++ b/src/app/core/shared/submission-cc-licences.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from './resource-type';
+
+/**
+ * The resource type for License
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const SUBMISSION_CC_LICENSE = new ResourceType('submissioncclicense');
diff --git a/src/app/core/shared/submission-cc-license.model.ts b/src/app/core/shared/submission-cc-license.model.ts
new file mode 100644
index 0000000000..0b2cfbcca6
--- /dev/null
+++ b/src/app/core/shared/submission-cc-license.model.ts
@@ -0,0 +1,35 @@
+import { autoserialize, inheritSerialization } from 'cerialize';
+import { typedObject } from '../cache/builders/build-decorators';
+import { excludeFromEquals } from '../utilities/equals.decorators';
+import { ResourceType } from './resource-type';
+import { HALResource } from './hal-resource.model';
+import { SUBMISSION_CC_LICENSE } from './submission-cc-licences.resource-type';
+
+@typedObject
+@inheritSerialization(HALResource)
+export class SubmissionCcLicence extends HALResource {
+
+  static type = SUBMISSION_CC_LICENSE;
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  @autoserialize
+  name: string;
+
+  @autoserialize
+  fields: Array<{
+    id: string;
+    label: string;
+    description: string;
+    enums: Array<{
+      id: string;
+      label: string;
+      description: string;
+    }>;
+  }>;
+}
diff --git a/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts b/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
new file mode 100644
index 0000000000..65f6a5b9e4
--- /dev/null
+++ b/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
@@ -0,0 +1,11 @@
+/**
+ * An interface to represent the submission's creative commons license section data.
+ */
+export interface WorkspaceitemSectionCcLicenseObject {
+  ccLicense: {
+    name: string;
+    fields: {
+      [field: string]: string;
+    }
+  };
+}
diff --git a/src/app/core/submission/models/workspaceitem-sections.model.ts b/src/app/core/submission/models/workspaceitem-sections.model.ts
index 165e69869c..6ff756a323 100644
--- a/src/app/core/submission/models/workspaceitem-sections.model.ts
+++ b/src/app/core/submission/models/workspaceitem-sections.model.ts
@@ -1,6 +1,7 @@
 import { WorkspaceitemSectionFormObject } from './workspaceitem-section-form.model';
 import { WorkspaceitemSectionLicenseObject } from './workspaceitem-section-license.model';
 import { WorkspaceitemSectionUploadObject } from './workspaceitem-section-upload.model';
+import { WorkspaceitemSectionCcLicenseObject } from './workspaceitem-section-cc-license.model';
 
 /**
  * An interface to represent submission's section object.
@@ -17,4 +18,5 @@ export type WorkspaceitemSectionDataType
   = WorkspaceitemSectionUploadObject
   | WorkspaceitemSectionFormObject
   | WorkspaceitemSectionLicenseObject
+  | WorkspaceitemSectionCcLicenseObject
   | string;
diff --git a/src/app/shared/ds-select/ds-select.component.html b/src/app/shared/ds-select/ds-select.component.html
new file mode 100644
index 0000000000..5a15155d4f
--- /dev/null
+++ b/src/app/shared/ds-select/ds-select.component.html
@@ -0,0 +1,31 @@
+<div>
+
+  <div ngbDropdown class="btn-group" (openChange)="toggled.emit($event)">
+
+    <div class="input-group-prepend" *ngIf="label">
+      <span id="dsSelectMenuLabel" class="input-group-text">
+        {{ label | translate }}
+      </span>
+    </div>
+
+    <button aria-describedby="dsSelectMenuLabel"
+            id="dsSelectMenuButton"
+            class="btn btn-outline-primary selection"
+            (blur)="close.emit($event)"
+            (click)="close.emit($event)"
+            [disabled]="disabled"
+            ngbDropdownToggle>
+      <ng-content select=".selection"></ng-content>
+    </button>
+
+    <div ngbDropdownMenu
+         class="dropdown-menu"
+         id="dsSelectDropdownMenu"
+         aria-labelledby="dsSelectMenuButton">
+      <div aria-labelledby="dropdownMenuButton">
+        <ng-content select=".menu"></ng-content>
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/src/app/shared/ds-select/ds-select.component.spec.ts b/src/app/shared/ds-select/ds-select.component.spec.ts
new file mode 100644
index 0000000000..a3e70808d9
--- /dev/null
+++ b/src/app/shared/ds-select/ds-select.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DsSelectComponent } from './ds-select.component';
+
+describe('DsSelectComponent', () => {
+  let component: DsSelectComponent;
+  let fixture: ComponentFixture<DsSelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DsSelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DsSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/ds-select/ds-select.component.ts b/src/app/shared/ds-select/ds-select.component.ts
new file mode 100644
index 0000000000..4e2a1f6973
--- /dev/null
+++ b/src/app/shared/ds-select/ds-select.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+/**
+ * Component which represent a DSpace dropdown selector.
+ */
+@Component({
+  selector: 'ds-select',
+  templateUrl: './ds-select.component.html',
+  styleUrls: ['./ds-select.component.css']
+})
+export class DsSelectComponent {
+
+  /**
+   * An optional label for the dropdown selector.
+   */
+  @Input()
+  label: string;
+
+  /**
+   * Whether the dropdown selector is disabled.
+   */
+  @Input()
+  disabled: boolean;
+
+  /**
+   * Emits an event when the dropdown selector is opened or closed.
+   */
+  @Output()
+  toggled = new EventEmitter();
+
+  /**
+   * Emits an event when the dropdown selector or closed.
+   */
+  @Output()
+  close = new EventEmitter();
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 3d00f6bc35..4dd46941ea 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -193,6 +193,7 @@ import { ModifyItemOverviewComponent } from '../+item-page/edit-item-page/modify
 import { ClaimedTaskActionsLoaderComponent } from './mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component';
 import { ClaimedTaskActionsDirective } from './mydspace-actions/claimed-task/switcher/claimed-task-actions.directive';
 import { ClaimedTaskActionsEditMetadataComponent } from './mydspace-actions/claimed-task/edit-metadata/claimed-task-actions-edit-metadata.component';
+import { DsSelectComponent } from './ds-select/ds-select.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -269,6 +270,7 @@ const COMPONENTS = [
   DsDynamicFormGroupComponent,
   DsDynamicFormArrayComponent,
   DsDatePickerInlineComponent,
+  DsSelectComponent,
   ErrorComponent,
   FormComponent,
   LangSwitchComponent,
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
new file mode 100644
index 0000000000..f598be7af8
--- /dev/null
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
@@ -0,0 +1,114 @@
+<div class="mb-2 ccLicense-select">
+  <ds-select
+    [disabled]="!submissionCcLicenses"
+    [label]="'submission.sections.ccLicense.type'">
+
+    <ng-container class="selection">
+      <span *ngIf="!submissionCcLicenses">
+        <i class='fas fa-circle-notch fa-spin'></i>
+      </span>
+      <span *ngIf="getSelectedCcLicense()">
+        {{ getSelectedCcLicense().name }}
+      </span>
+      <span *ngIf="submissionCcLicenses && !getSelectedCcLicense()">
+        {{ 'submission.sections.ccLicense.select' | translate }}
+      </span>
+    </ng-container>
+
+    <ng-container class="menu">
+      <button *ngIf="submissionCcLicenses?.length == 0"
+              class="dropdown-item disabled">
+        {{ 'submission.sections.ccLicense.none' | translate }}
+      </button>
+      <button *ngFor="let license of submissionCcLicenses"
+              class="dropdown-item"
+              (click)="select(license)">
+        {{ license.name }}
+      </button>
+    </ng-container>
+
+  </ds-select>
+</div>
+
+<ng-container *ngIf="getSelectedCcLicense()">
+
+  <div *ngFor="let field of getSelectedCcLicense().fields"
+       class="mb-2">
+
+    <div class="d-flex flex-row mb-2">
+      <div class="label {{ field.id }}">
+        {{ field.label }}
+      </div>
+      <button
+        class="btn btn-outline-info btn-sm ml-2"
+        (click)="openInfoModal(infoModal)">
+        <i class="fas fa-question"></i>
+      </button>
+    </div>
+
+    <ng-template #infoModal>
+
+      <div>
+
+        <div class="modal-header">
+          <div>
+            <h4>
+              {{ field.label }}
+            </h4>
+            <div [innerHTML]="field.description"></div>
+          </div>
+          <button type="button" class="close"
+                  (click)="closeInfoModal()" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <div *ngFor="let value of field.enums"
+               class="mb-2">
+            <h5>
+              {{ value.label }}
+            </h5>
+            <div [innerHTML]="value.description"></div>
+          </div>
+        </div>
+
+      </div>
+
+    </ng-template>
+
+    <ds-select *ngIf="field.enums?.length > 5">
+      <ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field.id) as option">
+        <span *ngIf="option">
+          {{ option }}
+        </span>
+        <span *ngIf="!option">
+          {{ 'submission.sections.ccLicense.option.select' | translate }}
+        </span>
+      </ng-container>
+      <ng-container class="menu">
+        <button *ngFor="let value of field.enums"
+                class="dropdown-item"
+                (click)="selectOption(getSelectedCcLicense(), field.id, value.label)">
+          {{ value.label }}
+        </button>
+      </ng-container>
+    </ds-select>
+
+    <ng-container *ngIf="field.enums?.length <= 5">
+      <div *ngFor="let value of field.enums"
+           class="d-flex flex-row m-2"
+           (click)="selectOption(getSelectedCcLicense(), field.id, value.label)">
+        <input type="radio"
+               title="{{ value.label }}"
+               class="mr-1"
+               [checked]="isSelectedOption(getSelectedCcLicense(), field.id, value.label)">
+        <div class="label">
+          {{ value.label }}
+        </div>
+      </div>
+    </ng-container>
+
+  </div>
+
+</ng-container>
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
new file mode 100644
index 0000000000..38e4384b2e
--- /dev/null
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
@@ -0,0 +1,220 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SubmissionSectionCcLicensesComponent } from './submission-section-cc-licenses.component';
+import { SUBMISSION_CC_LICENSE } from '../../core/shared/submission-cc-licences.resource-type';
+import { of as observableOf } from 'rxjs';
+import { SubmissionCcLicensesDataService } from '../../core/data/submission-cc-licenses-data.service';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { SharedModule } from '../shared.module';
+import { SectionsService } from '../../submission/sections/sections.service';
+import { SectionDataObject } from '../../submission/sections/models/section-data.model';
+import { SectionsType } from '../../submission/sections/sections-type';
+import { RemoteData } from '../../core/data/remote-data';
+import { TranslateModule } from '@ngx-translate/core';
+import { PageInfo } from '../../core/shared/page-info.model';
+import { PaginatedList } from '../../core/data/paginated-list';
+import { SubmissionCcLicence } from '../../core/shared/submission-cc-license.model';
+import { cold } from 'jasmine-marbles';
+
+describe('SubmissionSectionCcLicensesComponent', () => {
+
+  let component: SubmissionSectionCcLicensesComponent;
+  let fixture: ComponentFixture<SubmissionSectionCcLicensesComponent>;
+  let de: DebugElement;
+
+  const sectionObject: SectionDataObject = {
+    config: 'test config',
+    mandatory: true,
+    data: {},
+    errors: [],
+    header: 'test header',
+    id: 'test section id',
+    sectionType: SectionsType.SubmissionForm
+  };
+
+  const submissionCcLicenses: SubmissionCcLicence[] = [
+    {
+      type: SUBMISSION_CC_LICENSE,
+      name: 'test license name 1',
+      fields: [
+        {
+          id: 'test-field-id-1a',
+          label: 'test field label 1a',
+          description: 'test field description 1a',
+          enums: [
+            {
+              id: 'test enum id 1a I',
+              label: 'test enum label 1a I',
+              description: 'test enum description 1a I',
+            },
+            {
+              id: 'test enum id 1a II',
+              label: 'test enum label 1a II',
+              description: 'test enum description 1a II',
+            },
+          ],
+        },
+        {
+          id: 'test-field-id-1b',
+          label: 'test field label 1b',
+          description: 'test field description 1b',
+          enums: [
+            {
+              id: 'test enum id 1b I',
+              label: 'test enum label 1b I',
+              description: 'test enum description 1b I',
+            },
+            {
+              id: 'test enum id 1b II',
+              label: 'test enum label 1b II',
+              description: 'test enum description 1b II',
+            },
+          ],
+        },
+      ],
+      _links: {
+        self: {
+          href: 'test link',
+        },
+      },
+    },
+    {
+      type: SUBMISSION_CC_LICENSE,
+      name: 'test license name 2',
+      fields: [
+        {
+          id: 'test-field-id-2a',
+          label: 'test field label 2a',
+          description: 'test field description 2a',
+          enums: [
+            {
+              id: 'test enum id 2a I',
+              label: 'test enum label 2a I',
+              description: 'test enum description 2a I'
+            },
+            {
+              id: 'test enum id 2a II',
+              label: 'test enum label 2a II',
+              description: 'test enum description 2a II'
+            },
+          ],
+        },
+        {
+          id: 'test-field-id-2b',
+          label: 'test field label 2b',
+          description: 'test field description 2b',
+          enums: [
+            {
+              id: 'test enum id 2b I',
+              label: 'test enum label 2b I',
+              description: 'test enum description 2b I'
+            },
+            {
+              id: 'test enum id 2b II',
+              label: 'test enum label 2b II',
+              description: 'test enum description 2b II'
+            },
+          ],
+        },
+      ],
+      _links: {
+        self: {
+          href: 'test link',
+        },
+      },
+    },
+  ];
+  const submissionCcLicensesDataService = {
+    findAll: () => observableOf(new RemoteData(
+      false,
+      false,
+      true,
+      undefined,
+      new PaginatedList(new PageInfo(), submissionCcLicenses),
+    )),
+  };
+
+  const sectionService = {
+    getSectionState: () => observableOf(
+      {
+        data: {},
+      }
+    ),
+    setSectionStatus: () => undefined,
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SharedModule,
+        TranslateModule.forRoot(),
+      ],
+      declarations: [
+        SubmissionSectionCcLicensesComponent,
+      ],
+      providers: [
+        {provide: SubmissionCcLicensesDataService, useValue: submissionCcLicensesDataService},
+        {provide: SectionsService, useValue: sectionService},
+        {provide: 'collectionIdProvider', useValue: 'test collection id'},
+        {provide: 'sectionDataProvider', useValue: sectionObject},
+        {provide: 'submissionIdProvider', useValue: 'test submission id'},
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubmissionSectionCcLicensesComponent);
+    component = fixture.componentInstance;
+    de = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  it('should display a dropdown with the different cc licenses', () => {
+    expect(
+      de.query(By.css('.ccLicense-select ds-select .dropdown-menu button:nth-child(1)')).nativeElement.innerText
+    ).toContain('test license name 1');
+    expect(
+      de.query(By.css('.ccLicense-select ds-select .dropdown-menu button:nth-child(2)')).nativeElement.innerText
+    ).toContain('test license name 2');
+  });
+
+  describe('when a license is selected', () => {
+
+    beforeEach(() => {
+      component.select(submissionCcLicenses[1]);
+      fixture.detectChanges();
+    });
+
+    it('should display the selected cc license', () => {
+      expect(
+        de.query(By.css('.ccLicense-select ds-select button.selection')).nativeElement.innerText
+      ).toContain('test license name 2');
+    });
+
+    it('should display all field labels of the selected cc license only', () => {
+      expect(de.query(By.css('div.test-field-id-1a'))).toBeNull();
+      expect(de.query(By.css('div.test-field-id-1b'))).toBeNull();
+      expect(de.query(By.css('div.test-field-id-2a'))).toBeTruthy();
+      expect(de.query(By.css('div.test-field-id-2b'))).toBeTruthy();
+    });
+
+    it('should have section status incomplete', () => {
+      expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: false }));
+    });
+
+    describe('when all options have a value selected', () => {
+
+      beforeEach(() => {
+        const ccLicence = submissionCcLicenses[1];
+        component.selectOption(ccLicence, ccLicence.fields[0].id, ccLicence.fields[0].enums[1].label);
+        component.selectOption(ccLicence, ccLicence.fields[1].id, ccLicence.fields[1].enums[0].label);
+        fixture.detectChanges();
+      });
+
+      it('should have section status complete', () => {
+        expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: true }));
+      });
+    });
+  });
+});
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
new file mode 100644
index 0000000000..d7241a3220
--- /dev/null
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
@@ -0,0 +1,197 @@
+import { Component, Inject } from '@angular/core';
+import { Observable, of as observableOf, Subscription } from 'rxjs';
+import { SubmissionCcLicence } from '../../core/shared/submission-cc-license.model';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../core/shared/operators';
+import { distinctUntilChanged, filter, map } from 'rxjs/operators';
+import { SubmissionCcLicensesDataService } from '../../core/data/submission-cc-licenses-data.service';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { renderSectionFor } from '../../submission/sections/sections-decorator';
+import { SectionsType } from '../../submission/sections/sections-type';
+import { SectionModelComponent } from '../../submission/sections/models/section.model';
+import { SectionDataObject } from '../../submission/sections/models/section-data.model';
+import { SectionsService } from '../../submission/sections/sections.service';
+import { WorkspaceitemSectionCcLicenseObject } from '../../core/submission/models/workspaceitem-section-cc-license.model';
+import { JsonPatchOperationPathCombiner } from '../../core/json-patch/builder/json-patch-operation-path-combiner';
+import { isNotEmpty } from '../empty.util';
+
+/**
+ * This component represents the submission section to select the Creative Commons license.
+ */
+@Component({
+  selector: 'ds-submission-section-cc-licenses',
+  templateUrl: './submission-section-cc-licenses.component.html',
+  styleUrls: ['./submission-section-cc-licenses.component.css']
+})
+@renderSectionFor(SectionsType.CcLicense)
+export class SubmissionSectionCcLicensesComponent extends SectionModelComponent {
+
+  /**
+   * The form id
+   * @type {string}
+   */
+  public formId: string;
+
+  /**
+   * A boolean representing if this section is loading
+   * @type {boolean}
+   */
+  public isLoading = true;
+
+  /**
+   * The [JsonPatchOperationPathCombiner] object
+   * @type {JsonPatchOperationPathCombiner}
+   */
+  protected pathCombiner: JsonPatchOperationPathCombiner;
+
+  /**
+   * The list of Subscriptions this component subscribes to.
+   */
+  private subscriptions: Subscription[] = [];
+
+  /**
+   * Cache of the available Creative Commons licenses.
+   */
+  submissionCcLicenses: SubmissionCcLicence[];
+
+  /**
+   * Reference to NgbModal
+   */
+  protected modalRef: NgbModalRef;
+
+  constructor(
+    protected modalService: NgbModal,
+    protected sectionService: SectionsService,
+    protected submissionCcLicensesDataService: SubmissionCcLicensesDataService,
+    @Inject('collectionIdProvider') public injectedCollectionId: string,
+    @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
+    @Inject('submissionIdProvider') public injectedSubmissionId: string
+  ) {
+    super(
+      injectedCollectionId,
+      injectedSectionData,
+      injectedSubmissionId,
+    );
+  }
+
+  /**
+   * The data of this section.
+   */
+  get data(): WorkspaceitemSectionCcLicenseObject {
+    return this.sectionData.data as WorkspaceitemSectionCcLicenseObject;
+  }
+
+  /**
+   * Select a given Creative Commons license.
+   * @param ccLicense the Creative Commons license to select.
+   */
+  select(ccLicense: SubmissionCcLicence) {
+    if (!!this.getSelectedCcLicense() && this.getSelectedCcLicense().name === ccLicense.name) {
+      return;
+    }
+    this.data.ccLicense = {
+      name: ccLicense.name,
+      fields: {},
+    };
+    this.updateSectionStatus();
+  }
+
+  /**
+   * Get the selected Creative Commons license.
+   */
+  getSelectedCcLicense(): SubmissionCcLicence {
+    if (!this.submissionCcLicenses || !this.data.ccLicense) {
+      return null;
+    }
+    return this.submissionCcLicenses.filter((ccLicense) => ccLicense.name === this.data.ccLicense.name)[0];
+  }
+
+  /**
+   * Select an option for a given license field.
+   * @param ccLicense   the related Creative Commons license.
+   * @param field       the field for which to select an option.
+   * @param value       the value of the selected option,.
+   */
+  selectOption(ccLicense: SubmissionCcLicence, field: string, value: string) {
+
+    this.data.ccLicense.fields[field] = value;
+    this.updateSectionStatus();
+  }
+
+  /**
+   * Get the selected option value for a given license field.
+   * @param ccLicense   the related Creative Commons license.
+   * @param field       the field for which to get the selected option value.
+   */
+  getSelectedOption(ccLicense: SubmissionCcLicence, field: string): string {
+    return this.data.ccLicense.fields[field];
+  }
+
+  /**
+   * Whether a given option value is selected for a given license field.
+   * @param ccLicense   the related Creative Commons license.
+   * @param field       the field for which to check whether the option is selected.
+   * @param value       the value for which to check whether it is selected.
+   */
+  isSelectedOption(ccLicense: SubmissionCcLicence, field: string, value: string): boolean {
+    return this.getSelectedOption(ccLicense, field) === value;
+  }
+
+  /**
+   * Open a given info modal.
+   * @param content   the modal content.
+   */
+  openInfoModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  /**
+   * Close the info modal.
+   */
+  closeInfoModal() {
+    this.modalRef.close();
+  }
+
+  /**
+   * Get section status
+   *
+   * @return Observable<boolean>
+   *     the section status
+   */
+  getSectionStatus(): Observable<boolean> {
+    return observableOf(
+      !!this.getSelectedCcLicense() && this.getSelectedCcLicense().fields.every(
+      (field) => !!this.getSelectedOption(this.getSelectedCcLicense(), field.id)
+      )
+    );
+  }
+
+  /**
+   * Unsubscribe from all subscriptions
+   */
+  onSectionDestroy(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+
+  /**
+   * Initialize the section.
+   */
+  onSectionInit(): void {
+    this.subscriptions.push(
+      this.sectionService.getSectionState(this.submissionId, this.sectionData.id).pipe(
+        filter((sectionState) => {
+          return isNotEmpty(sectionState) && (isNotEmpty(sectionState.data) || isNotEmpty(sectionState.errors))
+        }),
+        distinctUntilChanged(),
+      ).subscribe((sectionState) => {
+        this.sectionData.data = sectionState.data;
+      }),
+      this.submissionCcLicensesDataService.findAll({elementsPerPage: Number.MAX_SAFE_INTEGER}).pipe(
+        getSucceededRemoteData(),
+        getRemoteDataPayload(),
+        map((list) => list.page),
+      ).subscribe(
+        (licenses) => this.submissionCcLicenses = licenses
+      ),
+    );
+  }
+}
diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html
index 6f4a8a864c..1e3c07c703 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.html
+++ b/src/app/submission/form/collection/submission-form-collection.component.html
@@ -1,50 +1,44 @@
-<div>
-  <div ngbDropdown #collectionControls="ngbDropdown" class="btn-group input-group" (openChange)="toggled($event)">
-    <div class="input-group-prepend">
-      <span id="collectionControlsMenuLabel" class="input-group-text">
-        {{ 'submission.sections.general.collection' | translate }}
-      </span>
-    </div>
-    <button aria-describedby="collectionControlsMenuLabel"
-            id="collectionControlsMenuButton"
-            class="btn btn-outline-primary"
-            (blur)="onClose()"
-            (click)="onClose()"
-            [disabled]="(disabled$ | async) || (processingChange$ | async)"
-            ngbDropdownToggle>
-      <span *ngIf="(processingChange$ | async)"><i class='fas fa-circle-notch fa-spin'></i></span>
-      <span *ngIf="!(processingChange$ | async)">{{ selectedCollectionName$ | async }}</span>
-    </button>
+<ds-select
+  [label]="'submission.sections.general.collection'"
+  [disabled]="(disabled$ | async) || (processingChange$ | async)"
+  (toggled)="toggled($event)"
+  (close)="onClose()">
 
-    <div ngbDropdownMenu
-         class="dropdown-menu"
-         id="collectionControlsDropdownMenu"
-         aria-labelledby="collectionControlsMenuButton">
-      <div class="form-group w-100 pr-2 pl-2">
-        <input *ngIf="searchField"
-               type="search"
-               class="form-control w-100"
-               (click)="$event.stopPropagation();"
-               placeholder="{{ 'submission.sections.general.search-collection' | translate }}"
-               [formControl]="searchField">
-      </div>
-      <div class="dropdown-divider"></div>
-      <div class="scrollable-menu" aria-labelledby="dropdownMenuButton" (scroll)="onScroll($event)">
-        <button class="dropdown-item disabled" *ngIf="(searchListCollection$ | async)?.length == 0">
-          {{'submission.sections.general.no-collection' | translate}}
-        </button>
-        <button *ngFor="let listItem of (searchListCollection$ | async)"
-                class="dropdown-item collection-item"
-                title="{{ listItem.collection.name }}"
-                (click)="onSelect(listItem)">
-          <ul class="list-unstyled mb-0">
-            <li class="list-item text-truncate text-secondary" *ngFor="let item of listItem.communities">
-              {{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
-            </li>
-            <li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.collection.name}}</li>
-          </ul>
-        </button>
-      </div>
+  <ng-container class="selection">
+    <span *ngIf="(processingChange$ | async)">
+      <i class='fas fa-circle-notch fa-spin'></i>
+    </span>
+    <span *ngIf="!(processingChange$ | async)">
+      {{ selectedCollectionName$ | async }}
+    </span>
+  </ng-container>
+
+  <ng-container class="menu">
+    <div class="form-group w-100 pr-2 pl-2">
+      <input *ngIf="searchField"
+             type="search"
+             class="form-control w-100"
+             (click)="$event.stopPropagation();"
+             placeholder="{{ 'submission.sections.general.search-collection' | translate }}"
+             [formControl]="searchField">
     </div>
-  </div>
-</div>
+    <div class="dropdown-divider"></div>
+    <div class="scrollable-menu" aria-labelledby="dropdownMenuButton" (scroll)="onScroll($event)">
+      <button class="dropdown-item disabled" *ngIf="(searchListCollection$ | async)?.length == 0">
+        {{'submission.sections.general.no-collection' | translate}}
+      </button>
+      <button *ngFor="let listItem of (searchListCollection$ | async)"
+              class="dropdown-item collection-item"
+              title="{{ listItem.collection.name }}"
+              (click)="onSelect(listItem)">
+        <ul class="list-unstyled mb-0">
+          <li class="list-item text-truncate text-secondary" *ngFor="let item of listItem.communities">
+            {{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
+          </li>
+          <li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.collection.name}}</li>
+        </ul>
+      </button>
+    </div>
+  </ng-container>
+
+</ds-select>
diff --git a/src/app/submission/submission.module.ts b/src/app/submission/submission.module.ts
index 806258baa8..dc38c976e0 100644
--- a/src/app/submission/submission.module.ts
+++ b/src/app/submission/submission.module.ts
@@ -29,6 +29,7 @@ import { SubmissionSectionUploadAccessConditionsComponent } from './sections/upl
 import { SubmissionSubmitComponent } from './submit/submission-submit.component';
 import { storeModuleConfig } from '../app.reducer';
 import { CoreState } from '../core/core.reducers';
+import { SubmissionSectionCcLicensesComponent } from '../shared/submission-section-cc-licenses/submission-section-cc-licenses.component';
 
 @NgModule({
   imports: [
@@ -44,8 +45,8 @@ import { CoreState } from '../core/core.reducers';
     SubmissionSectionUploadComponent,
     SubmissionSectionformComponent,
     SubmissionSectionLicenseComponent,
+    SubmissionSectionCcLicensesComponent,
     SectionsDirective,
-    SubmissionSectionContainerComponent,
     SubmissionEditComponent,
     SubmissionFormSectionAddComponent,
     SubmissionFormCollectionComponent,
@@ -53,6 +54,7 @@ import { CoreState } from '../core/core.reducers';
     SubmissionFormFooterComponent,
     SubmissionSubmitComponent,
     SubmissionUploadFilesComponent,
+    SubmissionSectionContainerComponent,
     SubmissionSectionUploadFileComponent,
     SubmissionSectionUploadFileEditComponent,
     SubmissionSectionUploadFileViewComponent
@@ -61,7 +63,9 @@ import { CoreState } from '../core/core.reducers';
     SubmissionSectionUploadComponent,
     SubmissionSectionformComponent,
     SubmissionSectionLicenseComponent,
-    SubmissionSectionContainerComponent],
+    SubmissionSectionContainerComponent,
+    SubmissionSectionCcLicensesComponent,
+  ],
   exports: [
     SubmissionEditComponent,
     SubmissionFormComponent,
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 686ac66813..2dc1599396 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2426,6 +2426,14 @@
 
   "submission.sections.describe.relationship-lookup.name-variant.notification.decline": "Use only for this submission",
 
+  "submission.sections.ccLicense.type": "License Type",
+
+  "submission.sections.ccLicense.select": "Select a license…",
+
+  "submission.sections.ccLicense.none": "No licenses available",
+
+  "submission.sections.ccLicense.option.select": "Select an option…",
+
   "submission.sections.general.add-more": "Add more",
 
   "submission.sections.general.collection": "Collection",
@@ -2456,7 +2464,7 @@
 
 
 
-  "submission.sections.submit.progressbar.cclicense": "Creative commons license",
+  "submission.sections.submit.progressbar.CClicense": "Creative commons license",
 
   "submission.sections.submit.progressbar.describe.recycle": "Recycle",
 

From e8021856573ebd364a65c06980f0d9a578a57f24 Mon Sep 17 00:00:00 2001
From: Samuel <samuel@soundmarker.com>
Date: Wed, 29 Apr 2020 18:48:47 +0200
Subject: [PATCH 50/84] CC License Submission Step - fix tests

---
 src/app/shared/ds-select/ds-select.component.spec.ts     | 9 +++++++--
 .../submission-form-collection.component.spec.ts         | 6 ++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/ds-select/ds-select.component.spec.ts b/src/app/shared/ds-select/ds-select.component.spec.ts
index a3e70808d9..ddec73348c 100644
--- a/src/app/shared/ds-select/ds-select.component.spec.ts
+++ b/src/app/shared/ds-select/ds-select.component.spec.ts
@@ -1,6 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { DsSelectComponent } from './ds-select.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('DsSelectComponent', () => {
   let component: DsSelectComponent;
@@ -8,7 +8,12 @@ describe('DsSelectComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DsSelectComponent ]
+      imports: [
+        TranslateModule.forRoot(),
+      ],
+      declarations: [
+        DsSelectComponent,
+      ],
     })
     .compileComponents();
   }));
diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts
index 105d94b966..a964d9cd81 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts
+++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts
@@ -26,6 +26,7 @@ import { PageInfo } from '../../../core/shared/page-info.model';
 import { Collection } from '../../../core/shared/collection.model';
 import { createTestComponent } from '../../../shared/testing/utils.test';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
+import { SharedModule } from '../../../shared/shared.module';
 
 const subcommunities = [Object.assign(new Community(), {
   name: 'SubCommunity 1',
@@ -223,6 +224,7 @@ describe('SubmissionFormCollectionComponent Component', () => {
         FormsModule,
         ReactiveFormsModule,
         NgbModule,
+        SharedModule,
         TranslateModule.forRoot()
       ],
       declarations: [
@@ -366,8 +368,8 @@ describe('SubmissionFormCollectionComponent Component', () => {
 
         comp.searchListCollection$ = observableOf(mockCollectionList);
         fixture.detectChanges();
-        dropdowBtn = fixture.debugElement.query(By.css('#collectionControlsMenuButton'));
-        dropdownMenu = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu'));
+        dropdowBtn = fixture.debugElement.query(By.css('#dsSelectMenuButton'));
+        dropdownMenu = fixture.debugElement.query(By.css('#dsSelectDropdownMenu'));
       });
 
       it('should have dropdown menu closed', () => {

From 1071506133aa08fbe7f0658a0d0d1158718144a6 Mon Sep 17 00:00:00 2001
From: Samuel <samuel@soundmarker.com>
Date: Wed, 6 May 2020 14:58:41 +0200
Subject: [PATCH 51/84] CC License Submission Step 2 - Storing the results

---
 src/app/core/cache/response.models.ts         |  15 +++
 src/app/core/core.module.ts                   |   2 +
 .../data/string-response-parsing.service.ts   |  23 ++++
 .../submission-cc-licenses-data.service.ts    |  49 ++++++-
 .../shared/submission-cc-license.model.ts     |  27 ++--
 .../workspaceitem-section-cc-license.model.ts |  10 +-
 ...mission-section-cc-licenses.component.html |  60 ++++++---
 ...sion-section-cc-licenses.component.spec.ts |  88 ++++++++++---
 ...ubmission-section-cc-licenses.component.ts | 122 ++++++++++++++----
 src/assets/i18n/en.json5                      |   6 +
 10 files changed, 328 insertions(+), 74 deletions(-)
 create mode 100644 src/app/core/data/string-response-parsing.service.ts

diff --git a/src/app/core/cache/response.models.ts b/src/app/core/cache/response.models.ts
index 3f46ecf647..56b8947e08 100644
--- a/src/app/core/cache/response.models.ts
+++ b/src/app/core/cache/response.models.ts
@@ -29,6 +29,21 @@ export class RestResponse {
   }
 }
 
+/**
+ * A response containing a string.
+ */
+export class StringResponse extends RestResponse {
+
+  constructor(
+    public isSuccessful: boolean,
+    public statusCode: number,
+    public statusText: string,
+    public content: string,
+  ) {
+    super(isSuccessful, statusCode, statusText);
+  }
+}
+
 export class DSOSuccessResponse extends RestResponse {
   constructor(
     public resourceSelfLinks: string[],
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index c8f6dcedcd..0c3555a023 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -147,6 +147,7 @@ import { WorkflowActionDataService } from './data/workflow-action-data.service';
 import { WorkflowAction } from './tasks/models/workflow-action-object.model';
 import { SubmissionCcLicensesDataService } from './data/submission-cc-licenses-data.service';
 import { SubmissionCcLicence } from './shared/submission-cc-license.model';
+import { StringResponseParsingService } from './data/string-response-parsing.service';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -214,6 +215,7 @@ const PROVIDERS = [
   BrowseResponseParsingService,
   BrowseEntriesResponseParsingService,
   BrowseItemsResponseParsingService,
+  StringResponseParsingService,
   BrowseService,
   ConfigResponseParsingService,
   SubmissionCcLicensesDataService,
diff --git a/src/app/core/data/string-response-parsing.service.ts b/src/app/core/data/string-response-parsing.service.ts
new file mode 100644
index 0000000000..aea314e27a
--- /dev/null
+++ b/src/app/core/data/string-response-parsing.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import {RestResponse, StringResponse} from '../cache/response.models';
+import { DSpaceRESTV2Response } from '../dspace-rest-v2/dspace-rest-v2-response.model';
+import { ResponseParsingService } from './parsing.service';
+import { RestRequest } from './request.models';
+
+/**
+ * A responseparser that will parse the response body to a string.
+ */
+@Injectable()
+export class StringResponseParsingService implements ResponseParsingService {
+
+  /**
+   * Parse the response to a string.
+   *
+   * @param request The request that was sent to the server
+   * @param data The response to parse
+   */
+  parse(request: RestRequest, data: DSpaceRESTV2Response): RestResponse {
+    const isSuccessful = data.statusCode >= 200 && data.statusCode < 300;
+    return new StringResponse(isSuccessful, data.statusCode, data.statusText, data.payload as undefined as string);
+  }
+}
diff --git a/src/app/core/data/submission-cc-licenses-data.service.ts b/src/app/core/data/submission-cc-licenses-data.service.ts
index 057c4389f7..3610e4a3c6 100644
--- a/src/app/core/data/submission-cc-licenses-data.service.ts
+++ b/src/app/core/data/submission-cc-licenses-data.service.ts
@@ -10,8 +10,14 @@ import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { DataService } from './data.service';
 import { RequestService } from './request.service';
 import { SUBMISSION_CC_LICENSE } from '../shared/submission-cc-licences.resource-type';
-import { SubmissionCcLicence } from '../shared/submission-cc-license.model';
+import { Field, Option, SubmissionCcLicence } from '../shared/submission-cc-license.model';
 import { DefaultChangeAnalyzer } from './default-change-analyzer.service';
+import { GetRequest } from './request.models';
+import { configureRequest, getResponseFromEntry } from '../shared/operators';
+import { map, switchMap, tap } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { StringResponse } from '../cache/response.models';
+import { StringResponseParsingService } from './string-response-parsing.service';
 
 @Injectable()
 @dataService(SUBMISSION_CC_LICENSE)
@@ -31,4 +37,45 @@ export class SubmissionCcLicensesDataService extends DataService<SubmissionCcLic
   ) {
     super();
   }
+
+  /**
+   * Get the link to the Creative Commons license corresponding to the given type and options.
+   * @param ccLicense   the Creative Commons license type
+   * @param options     the selected options of the license fields
+   */
+  getCcLicenseLink(ccLicense: SubmissionCcLicence, options: Map<Field, Option>): Observable<StringResponse> {
+
+    const requestId = this.requestService.generateRequestId();
+
+    return this.getSearchByHref(
+      'rightsByQuestions',{
+        searchParams: [
+          {
+            fieldName: 'license',
+            fieldValue: ccLicense.id
+          },
+          ...ccLicense.fields.map(
+            (field) => {
+              return {
+                fieldName: `answer_${field.id}`,
+                fieldValue: options.get(field).id,
+              }
+            }),
+        ]
+      }
+    ).pipe(
+      map((endpoint) => new GetRequest(
+        requestId,
+        endpoint,
+        undefined, {
+          responseType: 'text',
+        },
+      )),
+      tap((request) => request.getResponseParser = () => StringResponseParsingService),
+      configureRequest(this.requestService),
+      switchMap(() => this.requestService.getByUUID(requestId)),
+      getResponseFromEntry(),
+      map((response) => response as StringResponse),
+    );
+  }
 }
diff --git a/src/app/core/shared/submission-cc-license.model.ts b/src/app/core/shared/submission-cc-license.model.ts
index 0b2cfbcca6..2796edf6f2 100644
--- a/src/app/core/shared/submission-cc-license.model.ts
+++ b/src/app/core/shared/submission-cc-license.model.ts
@@ -18,18 +18,25 @@ export class SubmissionCcLicence extends HALResource {
   @autoserialize
   type: ResourceType;
 
+  @autoserialize
+  id: string;
+
   @autoserialize
   name: string;
 
   @autoserialize
-  fields: Array<{
-    id: string;
-    label: string;
-    description: string;
-    enums: Array<{
-      id: string;
-      label: string;
-      description: string;
-    }>;
-  }>;
+  fields: Field[];
+}
+
+export interface Field {
+  id: string;
+  label: string;
+  description: string;
+  enums: Option[];
+}
+
+export interface Option {
+  id: string;
+  label: string;
+  description: string;
 }
diff --git a/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts b/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
index 65f6a5b9e4..9cc7af771c 100644
--- a/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
+++ b/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
@@ -1,11 +1,15 @@
+import {Option} from '../../shared/submission-cc-license.model';
+
 /**
  * An interface to represent the submission's creative commons license section data.
  */
 export interface WorkspaceitemSectionCcLicenseObject {
-  ccLicense: {
-    name: string;
+  ccLicense?: {
+    id: string;
     fields: {
-      [field: string]: string;
+      [fieldId: string]: Option;
     }
   };
+  uri?: string;
+  accepted?: boolean;
 }
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
index f598be7af8..52e6a6f1fa 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
@@ -11,7 +11,12 @@
         {{ getSelectedCcLicense().name }}
       </span>
       <span *ngIf="submissionCcLicenses && !getSelectedCcLicense()">
-        {{ 'submission.sections.ccLicense.select' | translate }}
+        <ng-container *ngIf="storedCcLicenseLink">
+          {{ 'submission.sections.ccLicense.change' | translate }}
+        </ng-container>
+        <ng-container *ngIf="!storedCcLicenseLink">
+          {{ 'submission.sections.ccLicense.select' | translate }}
+        </ng-container>
       </span>
     </ng-container>
 
@@ -22,7 +27,7 @@
       </button>
       <button *ngFor="let license of submissionCcLicenses"
               class="dropdown-item"
-              (click)="select(license)">
+              (click)="selectCcLicense(license)">
         {{ license.name }}
       </button>
     </ng-container>
@@ -78,33 +83,32 @@
     </ng-template>
 
     <ds-select *ngIf="field.enums?.length > 5">
-      <ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field.id) as option">
+      <ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field) as option">
         <span *ngIf="option">
-          {{ option }}
+          {{ option.label }}
         </span>
         <span *ngIf="!option">
           {{ 'submission.sections.ccLicense.option.select' | translate }}
         </span>
       </ng-container>
       <ng-container class="menu">
-        <button *ngFor="let value of field.enums"
+        <button *ngFor="let option of field.enums"
                 class="dropdown-item"
-                (click)="selectOption(getSelectedCcLicense(), field.id, value.label)">
-          {{ value.label }}
+                (click)="selectOption(getSelectedCcLicense(), field, option)">
+          {{ option.label }}
         </button>
       </ng-container>
     </ds-select>
 
     <ng-container *ngIf="field.enums?.length <= 5">
-      <div *ngFor="let value of field.enums"
-           class="d-flex flex-row m-2"
-           (click)="selectOption(getSelectedCcLicense(), field.id, value.label)">
-        <input type="radio"
-               title="{{ value.label }}"
-               class="mr-1"
-               [checked]="isSelectedOption(getSelectedCcLicense(), field.id, value.label)">
-        <div class="label">
-          {{ value.label }}
+      <div *ngFor="let option of field.enums"
+           class="d-flex flex-row m-2">
+        <div (click)="selectOption(getSelectedCcLicense(), field, option)">
+          <input type="radio"
+                 title="{{ option.label }}"
+                 class="mr-1"
+                 [checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
+          <span class="label">{{ option.label }}</span>
         </div>
       </div>
     </ng-container>
@@ -112,3 +116,27 @@
   </div>
 
 </ng-container>
+
+<ng-container *ngIf="getCcLicenseLink$()">
+  <ng-container *ngVar="getCcLicenseLink$() | async as licenseLink">
+    <div *ngIf="!licenseLink">
+      <i class='fas fa-circle-notch fa-spin m-2'></i>
+    </div>
+    <ng-container *ngIf="licenseLink">
+      <div>
+        {{ 'submission.sections.ccLicense.link' | translate }}
+      </div>
+      <a class="license-link" href="{{ licenseLink }}?target=_blank">
+        {{ licenseLink }}
+      </a>
+      <div class="m-2">
+        <div (click)="setAccepted(!accepted)">
+          <input type="checkbox"
+                 title="accepted"
+                 [checked]="accepted">
+          <span>{{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
+        </div>
+      </div>
+    </ng-container>
+  </ng-container>
+</ng-container>
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
index 38e4384b2e..125cfdadc9 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
@@ -15,6 +15,8 @@ import { PageInfo } from '../../core/shared/page-info.model';
 import { PaginatedList } from '../../core/data/paginated-list';
 import { SubmissionCcLicence } from '../../core/shared/submission-cc-license.model';
 import { cold } from 'jasmine-marbles';
+import { JsonPatchOperationsBuilder } from '../../core/json-patch/builder/json-patch-operations-builder';
+import { StringResponse } from '../../core/cache/response.models';
 
 describe('SubmissionSectionCcLicensesComponent', () => {
 
@@ -34,6 +36,7 @@ describe('SubmissionSectionCcLicensesComponent', () => {
 
   const submissionCcLicenses: SubmissionCcLicence[] = [
     {
+      id: 'test license id 1',
       type: SUBMISSION_CC_LICENSE,
       name: 'test license name 1',
       fields: [
@@ -79,6 +82,7 @@ describe('SubmissionSectionCcLicensesComponent', () => {
       },
     },
     {
+      id: 'test license id 2',
       type: SUBMISSION_CC_LICENSE,
       name: 'test license name 2',
       fields: [
@@ -124,25 +128,31 @@ describe('SubmissionSectionCcLicensesComponent', () => {
       },
     },
   ];
-  const submissionCcLicensesDataService = {
-    findAll: () => observableOf(new RemoteData(
+
+  const submissionCcLicensesDataService = jasmine.createSpyObj('submissionCcLicensesDataService', {
+    getCcLicenseLink: observableOf(new StringResponse(true, 200, '200', 'test cc license link')),
+    findAll: observableOf(new RemoteData(
       false,
       false,
       true,
       undefined,
       new PaginatedList(new PageInfo(), submissionCcLicenses),
     )),
-  };
+  });
 
   const sectionService = {
-    getSectionState: () => observableOf(
-      {
-        data: {},
-      }
-    ),
+    getSectionState: () => observableOf({
+      data: {}
+    }),
     setSectionStatus: () => undefined,
+    updateSectionData: () => undefined,
   };
 
+  const operationsBuilder = jasmine.createSpyObj('operationsBuilder', {
+    add: undefined,
+    remove: undefined,
+  });
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -153,11 +163,12 @@ describe('SubmissionSectionCcLicensesComponent', () => {
         SubmissionSectionCcLicensesComponent,
       ],
       providers: [
-        {provide: SubmissionCcLicensesDataService, useValue: submissionCcLicensesDataService},
-        {provide: SectionsService, useValue: sectionService},
-        {provide: 'collectionIdProvider', useValue: 'test collection id'},
-        {provide: 'sectionDataProvider', useValue: sectionObject},
-        {provide: 'submissionIdProvider', useValue: 'test submission id'},
+        { provide: SubmissionCcLicensesDataService, useValue: submissionCcLicensesDataService },
+        { provide: SectionsService, useValue: sectionService },
+        { provide: JsonPatchOperationsBuilder, useValue: operationsBuilder },
+        { provide: 'collectionIdProvider', useValue: 'test collection id' },
+        { provide: 'sectionDataProvider', useValue: sectionObject },
+        { provide: 'submissionIdProvider', useValue: 'test submission id' },
       ],
     })
       .compileComponents();
@@ -181,8 +192,10 @@ describe('SubmissionSectionCcLicensesComponent', () => {
 
   describe('when a license is selected', () => {
 
+    const ccLicence = submissionCcLicenses[1];
+
     beforeEach(() => {
-      component.select(submissionCcLicenses[1]);
+      component.selectCcLicense(ccLicence);
       fixture.detectChanges();
     });
 
@@ -199,6 +212,10 @@ describe('SubmissionSectionCcLicensesComponent', () => {
       expect(de.query(By.css('div.test-field-id-2b'))).toBeTruthy();
     });
 
+    it('should not display a license link', () => {
+      expect(de.query(By.css('.license-link'))).toBeNull();
+    });
+
     it('should have section status incomplete', () => {
       expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: false }));
     });
@@ -206,14 +223,47 @@ describe('SubmissionSectionCcLicensesComponent', () => {
     describe('when all options have a value selected', () => {
 
       beforeEach(() => {
-        const ccLicence = submissionCcLicenses[1];
-        component.selectOption(ccLicence, ccLicence.fields[0].id, ccLicence.fields[0].enums[1].label);
-        component.selectOption(ccLicence, ccLicence.fields[1].id, ccLicence.fields[1].enums[0].label);
+        component.selectOption(ccLicence, ccLicence.fields[0], ccLicence.fields[0].enums[1]);
+        component.selectOption(ccLicence, ccLicence.fields[1], ccLicence.fields[1].enums[0]);
         fixture.detectChanges();
       });
 
-      it('should have section status complete', () => {
-        expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: true }));
+      it('should call the submission cc licenses data service getCcLicenseLink method', () => {
+        expect(submissionCcLicensesDataService.getCcLicenseLink).toHaveBeenCalledWith(
+          ccLicence,
+          new Map([
+            [ccLicence.fields[0], ccLicence.fields[0].enums[1]],
+            [ccLicence.fields[1], ccLicence.fields[1].enums[0]],
+          ])
+        );
+      });
+
+      it('should display a cc license link', () => {
+        expect(de.query(By.css('.license-link'))).toBeTruthy();
+      });
+
+      it('should not be accepted', () => {
+        expect(component.accepted).toBeFalse();
+      });
+
+      it('should have section status incomplete', () => {
+        expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: false }));
+      });
+
+      describe('when the cc license is accepted', () => {
+
+        beforeEach(() => {
+          component.setAccepted(true);
+          fixture.detectChanges();
+        });
+
+        it('should call the operations builder add method', () => {
+          expect(operationsBuilder.add).toHaveBeenCalled();
+        });
+
+        it('should have section status complete', () => {
+          expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: true }));
+        });
       });
     });
   });
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
index d7241a3220..b76b67dcb3 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { Observable, of as observableOf, Subscription } from 'rxjs';
-import { SubmissionCcLicence } from '../../core/shared/submission-cc-license.model';
+import { Field, Option, SubmissionCcLicence } from '../../core/shared/submission-cc-license.model';
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../core/shared/operators';
 import { distinctUntilChanged, filter, map } from 'rxjs/operators';
 import { SubmissionCcLicensesDataService } from '../../core/data/submission-cc-licenses-data.service';
@@ -13,6 +13,7 @@ import { SectionsService } from '../../submission/sections/sections.service';
 import { WorkspaceitemSectionCcLicenseObject } from '../../core/submission/models/workspaceitem-section-cc-license.model';
 import { JsonPatchOperationPathCombiner } from '../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { isNotEmpty } from '../empty.util';
+import { JsonPatchOperationsBuilder } from '../../core/json-patch/builder/json-patch-operations-builder';
 
 /**
  * This component represents the submission section to select the Creative Commons license.
@@ -58,10 +59,28 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    */
   protected modalRef: NgbModalRef;
 
+  /**
+   * The Creative Commons link saved in the workspace item.
+   */
+  get storedCcLicenseLink(): string {
+    return this.data.uri;
+  }
+
+  /**
+   * The accepted state for the selected Creative Commons license.
+   */
+  get accepted(): boolean {
+    if (this.data.accepted === undefined) {
+      return !!this.data.uri;
+    }
+    return this.data.accepted;
+  }
+
   constructor(
     protected modalService: NgbModal,
     protected sectionService: SectionsService,
     protected submissionCcLicensesDataService: SubmissionCcLicensesDataService,
+    protected operationsBuilder: JsonPatchOperationsBuilder,
     @Inject('collectionIdProvider') public injectedCollectionId: string,
     @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
     @Inject('submissionIdProvider') public injectedSubmissionId: string
@@ -84,15 +103,16 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    * Select a given Creative Commons license.
    * @param ccLicense the Creative Commons license to select.
    */
-  select(ccLicense: SubmissionCcLicence) {
-    if (!!this.getSelectedCcLicense() && this.getSelectedCcLicense().name === ccLicense.name) {
+  selectCcLicense(ccLicense: SubmissionCcLicence) {
+    if (!!this.getSelectedCcLicense() && this.getSelectedCcLicense().id === ccLicense.id) {
       return;
     }
     this.data.ccLicense = {
-      name: ccLicense.name,
+      id: ccLicense.id,
       fields: {},
     };
-    this.updateSectionStatus();
+    this.data.uri = undefined;
+    this.setAccepted(false);
   }
 
   /**
@@ -102,38 +122,63 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
     if (!this.submissionCcLicenses || !this.data.ccLicense) {
       return null;
     }
-    return this.submissionCcLicenses.filter((ccLicense) => ccLicense.name === this.data.ccLicense.name)[0];
+    return this.submissionCcLicenses.filter((ccLicense) => ccLicense.id === this.data.ccLicense.id)[0];
   }
 
   /**
    * Select an option for a given license field.
    * @param ccLicense   the related Creative Commons license.
    * @param field       the field for which to select an option.
-   * @param value       the value of the selected option,.
+   * @param option      the option to select.
    */
-  selectOption(ccLicense: SubmissionCcLicence, field: string, value: string) {
-
-    this.data.ccLicense.fields[field] = value;
-    this.updateSectionStatus();
+  selectOption(ccLicense: SubmissionCcLicence, field: Field, option: Option) {
+    if (this.isSelectedOption(ccLicense, field, option)) {
+      return;
+    }
+    this.data.ccLicense.fields[field.id] = option;
+    this.setAccepted(false);
   }
 
   /**
-   * Get the selected option value for a given license field.
+   * Get the selected option for a given license field.
    * @param ccLicense   the related Creative Commons license.
    * @param field       the field for which to get the selected option value.
    */
-  getSelectedOption(ccLicense: SubmissionCcLicence, field: string): string {
-    return this.data.ccLicense.fields[field];
+  getSelectedOption(ccLicense: SubmissionCcLicence, field: Field): Option {
+    return this.data.ccLicense.fields[field.id];
   }
 
   /**
-   * Whether a given option value is selected for a given license field.
+   * Whether a given option is selected for a given Creative Commons license field.
    * @param ccLicense   the related Creative Commons license.
    * @param field       the field for which to check whether the option is selected.
-   * @param value       the value for which to check whether it is selected.
+   * @param option      the option for which to check whether it is selected.
    */
-  isSelectedOption(ccLicense: SubmissionCcLicence, field: string, value: string): boolean {
-    return this.getSelectedOption(ccLicense, field) === value;
+  isSelectedOption(ccLicense: SubmissionCcLicence, field: Field, option: Option): boolean {
+    return this.getSelectedOption(ccLicense, field) && this.getSelectedOption(ccLicense, field).id === option.id;
+  }
+
+  /**
+   * Get the link to the Creative Commons license corresponding with the selected options.
+   */
+  getCcLicenseLink$(): Observable<string> {
+
+    if (!!this.storedCcLicenseLink) {
+      return observableOf(this.storedCcLicenseLink);
+    }
+    if (!this.getSelectedCcLicense() || this.getSelectedCcLicense().fields.some(
+      (field) => !this.getSelectedOption(this.getSelectedCcLicense(), field))) {
+      return undefined;
+    }
+    const selectedCcLicense = this.getSelectedCcLicense();
+    return this.submissionCcLicensesDataService.getCcLicenseLink(
+      selectedCcLicense,
+      new Map(selectedCcLicense.fields.map(
+        (field) => [field, this.getSelectedOption(selectedCcLicense, field)]
+      )),
+    ).pipe(
+      map((response) => response.content),
+    );
   }
 
   /**
@@ -158,11 +203,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    *     the section status
    */
   getSectionStatus(): Observable<boolean> {
-    return observableOf(
-      !!this.getSelectedCcLicense() && this.getSelectedCcLicense().fields.every(
-      (field) => !!this.getSelectedOption(this.getSelectedCcLicense(), field.id)
-      )
-    );
+    return observableOf(this.accepted);
   }
 
   /**
@@ -176,14 +217,16 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    * Initialize the section.
    */
   onSectionInit(): void {
+    this.pathCombiner = new JsonPatchOperationPathCombiner('sections', this.sectionData.id);
     this.subscriptions.push(
       this.sectionService.getSectionState(this.submissionId, this.sectionData.id).pipe(
         filter((sectionState) => {
           return isNotEmpty(sectionState) && (isNotEmpty(sectionState.data) || isNotEmpty(sectionState.errors))
         }),
         distinctUntilChanged(),
-      ).subscribe((sectionState) => {
-        this.sectionData.data = sectionState.data;
+        map((sectionState) => sectionState.data as WorkspaceitemSectionCcLicenseObject),
+      ).subscribe((data) => {
+        this.sectionData.data = data;
       }),
       this.submissionCcLicensesDataService.findAll({elementsPerPage: Number.MAX_SAFE_INTEGER}).pipe(
         getSucceededRemoteData(),
@@ -194,4 +237,33 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
       ),
     );
   }
+
+  /**
+   * Set the accepted state for the Creative Commons license.
+   * @param accepted  the accepted state for the cc license.
+   */
+  setAccepted(accepted: boolean) {
+    const path = this.pathCombiner.getPath('uri');
+    if (accepted) {
+      this.getCcLicenseLink$().subscribe((link) => {
+          this.operationsBuilder.add(path, link.toString(), false, true);
+          this.data.accepted = true;
+          this.updateSectionData();
+          this.updateSectionStatus();
+        }
+      );
+    } else {
+      this.operationsBuilder.remove(path);
+      this.data.accepted = false;
+      this.updateSectionData();
+      this.updateSectionStatus();
+    }
+  }
+
+  /**
+   * Update the section data for this section.
+   */
+  updateSectionData() {
+    this.sectionService.updateSectionData(this.submissionId, this.sectionData.id, this.data);
+  }
 }
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 2dc1599396..5931ae5491 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2430,10 +2430,16 @@
 
   "submission.sections.ccLicense.select": "Select a license…",
 
+  "submission.sections.ccLicense.change": "Change your license…",
+
   "submission.sections.ccLicense.none": "No licenses available",
 
   "submission.sections.ccLicense.option.select": "Select an option…",
 
+  "submission.sections.ccLicense.link": "You’ve selected the following license:",
+
+  "submission.sections.ccLicense.confirmation": "I grant the license above",
+
   "submission.sections.general.add-more": "Add more",
 
   "submission.sections.general.collection": "Collection",

From 6d88381ead0933667ebeaef913772d684b88567c Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 19 May 2020 16:35:36 +0200
Subject: [PATCH 52/84] 68067: Route data menu sections - tests

---
 .../admin-sidebar.component.spec.ts           |  5 +-
 src/app/navbar/navbar.component.spec.ts       |  6 +-
 src/app/shared/menu/menu.component.spec.ts    | 75 ++++++++++++++++++-
 src/app/shared/menu/menu.component.ts         |  9 +--
 src/app/shared/testing/menu-service.stub.ts   |  3 +
 5 files changed, 89 insertions(+), 9 deletions(-)

diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts
index 581d3341da..e3e8d08753 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts
@@ -13,6 +13,8 @@ import { AuthService } from '../../core/auth/auth.service';
 import { of as observableOf } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
 
 describe('AdminSidebarComponent', () => {
   let comp: AdminSidebarComponent;
@@ -21,13 +23,14 @@ describe('AdminSidebarComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), NoopAnimationsModule],
+      imports: [TranslateModule.forRoot(), NoopAnimationsModule, RouterTestingModule],
       declarations: [AdminSidebarComponent],
       providers: [
         { provide: Injector, useValue: {} },
         { provide: MenuService, useValue: menuService },
         { provide: CSSVariableService, useClass: CSSVariableServiceStub },
         { provide: AuthService, useClass: AuthServiceStub },
+        { provide: ActivatedRoute, useValue: {} },
         {
           provide: NgbModal, useValue: {
             open: () => {/*comment*/}
diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts
index 206afda003..907ddc8b87 100644
--- a/src/app/navbar/navbar.component.spec.ts
+++ b/src/app/navbar/navbar.component.spec.ts
@@ -11,6 +11,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Injector, NO_ERRORS_SCHEMA } from '@angular/core';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuServiceStub } from '../shared/testing/menu-service.stub';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 
 let comp: NavbarComponent;
 let fixture: ComponentFixture<NavbarComponent>;
@@ -24,12 +26,14 @@ describe('NavbarComponent', () => {
       imports: [
         TranslateModule.forRoot(),
         NoopAnimationsModule,
-        ReactiveFormsModule],
+        ReactiveFormsModule,
+        RouterTestingModule],
       declarations: [NavbarComponent],
       providers: [
         { provide: Injector, useValue: {} },
         { provide: MenuService, useValue: menuService },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
+        { provide: ActivatedRoute, useValue: {} }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })
diff --git a/src/app/shared/menu/menu.component.spec.ts b/src/app/shared/menu/menu.component.spec.ts
index 625c96e795..c277725d20 100644
--- a/src/app/shared/menu/menu.component.spec.ts
+++ b/src/app/shared/menu/menu.component.spec.ts
@@ -7,19 +7,65 @@ import { MenuComponent } from './menu.component';
 import { MenuServiceStub } from '../testing/menu-service.stub';
 import { of as observableOf } from 'rxjs';
 import { MenuSection } from './menu.reducer';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { MenuItemType } from './initial-menus-state';
+import { LinkMenuItemModel } from './menu-item/models/link.model';
 
-describe('MenuComponent', () => {
+fdescribe('MenuComponent', () => {
   let comp: MenuComponent;
   let fixture: ComponentFixture<MenuComponent>;
   let menuService: MenuService;
+  let routeDataMenuSection: MenuSection;
+  let routeDataMenuChildSection: MenuSection;
+  let route: any;
+  let router: any;
 
   beforeEach(async(() => {
+    routeDataMenuSection = {
+      id: 'mockSection',
+      active: false,
+      visible: true,
+      model: {
+        type: MenuItemType.LINK,
+        text: 'menu.section.mockSection',
+        link: ''
+      } as LinkMenuItemModel
+    };
+    routeDataMenuChildSection = {
+      id: 'mockChildSection',
+      parentID: 'mockSection',
+      active: false,
+      visible: true,
+      model: {
+        type: MenuItemType.LINK,
+        text: 'menu.section.mockChildSection',
+        link: ''
+      } as LinkMenuItemModel
+    };
+    route = {
+      root: {
+        snapshot: {
+          data: {
+            menu: routeDataMenuSection
+          }
+        },
+        firstChild: {
+          snapshot: {
+            data: {
+              menu: routeDataMenuChildSection
+            }
+          }
+        }
+      }
+    };
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), NoopAnimationsModule],
+      imports: [TranslateModule.forRoot(), NoopAnimationsModule, RouterTestingModule],
       declarations: [MenuComponent],
       providers: [
         { provide: Injector, useValue: {} },
         { provide: MenuService, useClass: MenuServiceStub },
+        { provide: ActivatedRoute, useValue: route }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(MenuComponent, {
@@ -31,11 +77,36 @@ describe('MenuComponent', () => {
     fixture = TestBed.createComponent(MenuComponent);
     comp = fixture.componentInstance; // SearchPageComponent test instance
     menuService = (comp as any).menuService;
+    router = TestBed.get(Router);
     spyOn(comp as any, 'getSectionDataInjector').and.returnValue(MenuSection);
     spyOn(comp as any, 'getSectionComponent').and.returnValue(observableOf({}));
     fixture.detectChanges();
   });
 
+  describe('ngOnInit', () => {
+    beforeEach(() => {
+      spyOn(comp, 'resolveMenuSections').and.returnValue([]);
+    });
+
+    it('should call resolveMenuSections on init', () => {
+      router.events = observableOf(new NavigationEnd(0, '', ''));
+      comp.ngOnInit();
+      expect(comp.resolveMenuSections).toHaveBeenCalledWith(route.root);
+    })
+  });
+
+  describe('resolveMenuSections', () => {
+    let result: MenuSection[];
+
+    beforeEach(() => {
+      result = comp.resolveMenuSections(route.root);
+    });
+
+    it('should return the current route\'s menu sections', () => {
+      expect(result).toEqual([routeDataMenuSection, routeDataMenuChildSection])
+    });
+  });
+
   describe('toggle', () => {
     beforeEach(() => {
       spyOn(menuService, 'toggleMenu');
diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index 4e29ea0ee0..f351329fed 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -1,15 +1,14 @@
 import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
-import { MenuService } from '../../shared/menu/menu.service';
-import { MenuID } from '../../shared/menu/initial-menus-state';
-import { MenuSection } from '../../shared/menu/menu.reducer';
-import { distinctUntilChanged, filter, first, map, switchMap, tap } from 'rxjs/operators';
+import { MenuService } from './menu.service';
+import { MenuID } from './initial-menus-state';
+import { MenuSection } from './menu.reducer';
+import { distinctUntilChanged, filter, first, map, tap } from 'rxjs/operators';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { hasNoValue, hasValue } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
 import { getComponentForMenu } from './menu-section.decorator';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { of as observableOf } from 'rxjs/internal/observable/of';
 
 /**
  * A basic implementation of a MenuComponent
diff --git a/src/app/shared/testing/menu-service.stub.ts b/src/app/shared/testing/menu-service.stub.ts
index de71e3483d..0246aa39d1 100644
--- a/src/app/shared/testing/menu-service.stub.ts
+++ b/src/app/shared/testing/menu-service.stub.ts
@@ -59,6 +59,9 @@ export class MenuServiceStub {
   removeSection(): void { /***/
   };
 
+  resetSections(): void { /***/
+  };
+
   isMenuVisible(id: MenuID): Observable<boolean> {
     return observableOf(true)
   };

From 8761d0ac275786c97e9940e63f1004ea730fd7d8 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 19 May 2020 16:46:58 +0200
Subject: [PATCH 53/84] 68067: Add unsubscribes on open subscriptions in menu
 component

---
 src/app/shared/menu/menu.component.spec.ts |  2 +-
 src/app/shared/menu/menu.component.ts      | 28 +++++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/menu/menu.component.spec.ts b/src/app/shared/menu/menu.component.spec.ts
index c277725d20..3524dfaae3 100644
--- a/src/app/shared/menu/menu.component.spec.ts
+++ b/src/app/shared/menu/menu.component.spec.ts
@@ -12,7 +12,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { MenuItemType } from './initial-menus-state';
 import { LinkMenuItemModel } from './menu-item/models/link.model';
 
-fdescribe('MenuComponent', () => {
+describe('MenuComponent', () => {
   let comp: MenuComponent;
   let fixture: ComponentFixture<MenuComponent>;
   let menuService: MenuService;
diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index f351329fed..cf9c2752dd 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, OnDestroy, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { MenuService } from './menu.service';
 import { MenuID } from './initial-menus-state';
@@ -9,6 +9,7 @@ import { hasNoValue, hasValue } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
 import { getComponentForMenu } from './menu-section.decorator';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Subscription } from 'rxjs/internal/Subscription';
 
 /**
  * A basic implementation of a MenuComponent
@@ -17,7 +18,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
   selector: 'ds-menu',
   template: ''
 })
-export class MenuComponent implements OnInit {
+export class MenuComponent implements OnInit, OnDestroy {
   /**
    * The ID of the Menu (See MenuID)
    */
@@ -63,6 +64,12 @@ export class MenuComponent implements OnInit {
    */
   private previewTimer;
 
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   * @type {Array}
+   */
+  subs: Subscription[] = [];
+
   constructor(protected menuService: MenuService,
               protected injector: Injector,
               protected route: ActivatedRoute,
@@ -78,19 +85,19 @@ export class MenuComponent implements OnInit {
     this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.menuVisible = this.menuService.isMenuVisible(this.menuID);
     this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(distinctUntilChanged((x, y) => JSON.stringify(x) === JSON.stringify(y)));
-    this.sections.subscribe((sections: MenuSection[]) => {
+    this.subs.push(this.sections.subscribe((sections: MenuSection[]) => {
       sections.forEach((section: MenuSection) => {
         this.sectionInjectors.set(section.id, this.getSectionDataInjector(section));
         this.getSectionComponent(section).pipe(first()).subscribe((constr) => this.sectionComponents.set(section.id, constr));
       });
-    });
+    }));
   }
 
   /**
    * Initialize all menu sections and add them to the menu's store
    */
   initSections() {
-    this.router.events.pipe(
+    this.subs.push(this.router.events.pipe(
       filter((e): e is NavigationEnd => e instanceof NavigationEnd),
       tap(() => this.menuService.resetSections(this.menuID)),
       map(() => this.resolveMenuSections(this.route.root))
@@ -99,7 +106,7 @@ export class MenuComponent implements OnInit {
       sections.forEach((section: MenuSection) => {
         this.menuService.addSection(this.menuID, section);
       });
-    });
+    }));
   }
 
   /**
@@ -212,4 +219,13 @@ export class MenuComponent implements OnInit {
       parent: this.injector
     });
   }
+
+  /**
+   * Unsubscribe from open subscriptions
+   */
+  ngOnDestroy(): void {
+    this.subs
+      .filter((subscription) => hasValue(subscription))
+      .forEach((subscription) => subscription.unsubscribe());
+  }
 }

From 79eecc7c767e2197d4000e512a4d804abf3014d8 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 19 May 2020 17:34:56 +0200
Subject: [PATCH 54/84] 68067: Route menu data - menu ID

---
 src/app/shared/menu/menu.component.spec.ts | 13 ++++++++++---
 src/app/shared/menu/menu.component.ts      |  6 +++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/menu/menu.component.spec.ts b/src/app/shared/menu/menu.component.spec.ts
index 3524dfaae3..901f072dd7 100644
--- a/src/app/shared/menu/menu.component.spec.ts
+++ b/src/app/shared/menu/menu.component.spec.ts
@@ -9,7 +9,7 @@ import { of as observableOf } from 'rxjs';
 import { MenuSection } from './menu.reducer';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MenuItemType } from './initial-menus-state';
+import { MenuID, MenuItemType } from './initial-menus-state';
 import { LinkMenuItemModel } from './menu-item/models/link.model';
 
 describe('MenuComponent', () => {
@@ -21,6 +21,8 @@ describe('MenuComponent', () => {
   let route: any;
   let router: any;
 
+  const mockMenuID = 'mock-menuID' as MenuID;
+
   beforeEach(async(() => {
     routeDataMenuSection = {
       id: 'mockSection',
@@ -47,13 +49,17 @@ describe('MenuComponent', () => {
       root: {
         snapshot: {
           data: {
-            menu: routeDataMenuSection
+            menu: {
+              [mockMenuID]: routeDataMenuSection
+            }
           }
         },
         firstChild: {
           snapshot: {
             data: {
-              menu: routeDataMenuChildSection
+              menu: {
+                [mockMenuID]: routeDataMenuChildSection
+              }
             }
           }
         }
@@ -76,6 +82,7 @@ describe('MenuComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(MenuComponent);
     comp = fixture.componentInstance; // SearchPageComponent test instance
+    comp.menuID = mockMenuID;
     menuService = (comp as any).menuService;
     router = TestBed.get(Router);
     spyOn(comp as any, 'getSectionDataInjector').and.returnValue(MenuSection);
diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index cf9c2752dd..074d0f1e95 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -125,11 +125,11 @@ export class MenuComponent implements OnInit, OnDestroy {
     const data = route.snapshot.data;
     const last: boolean = hasNoValue(route.firstChild);
 
-    if (hasValue(data) && hasValue(data.menu)) {
+    if (hasValue(data) && hasValue(data.menu) && hasValue(data.menu[this.menuID])) {
       if (!last) {
-        return [...data.menu, ...this.resolveMenuSections(route.firstChild)]
+        return [...data.menu[this.menuID], ...this.resolveMenuSections(route.firstChild)]
       } else {
-        return [...data.menu];
+        return [...data.menu[this.menuID]];
       }
     }
 

From 18007048a32c9ee34708d777236c3fb2cb664a76 Mon Sep 17 00:00:00 2001
From: Samuel <samuel@soundmarker.com>
Date: Wed, 20 May 2020 13:55:42 +0200
Subject: [PATCH 55/84] CC License Submission Step 2 - Storing the results -
 feedback

---
 .../shared/ds-select/ds-select.component.scss |  0
 .../shared/ds-select/ds-select.component.ts   |  2 +-
 ...mission-section-cc-licenses.component.html | 25 +++++----
 ...mission-section-cc-licenses.component.scss |  0
 ...ubmission-section-cc-licenses.component.ts | 56 ++++++++++---------
 5 files changed, 45 insertions(+), 38 deletions(-)
 create mode 100644 src/app/shared/ds-select/ds-select.component.scss
 create mode 100644 src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.scss

diff --git a/src/app/shared/ds-select/ds-select.component.scss b/src/app/shared/ds-select/ds-select.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/ds-select/ds-select.component.ts b/src/app/shared/ds-select/ds-select.component.ts
index 4e2a1f6973..26d1560c01 100644
--- a/src/app/shared/ds-select/ds-select.component.ts
+++ b/src/app/shared/ds-select/ds-select.component.ts
@@ -6,7 +6,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
   selector: 'ds-select',
   templateUrl: './ds-select.component.html',
-  styleUrls: ['./ds-select.component.css']
+  styleUrls: ['./ds-select.component.scss']
 })
 export class DsSelectComponent {
 
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
index 52e6a6f1fa..6818b4d254 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
@@ -1,4 +1,4 @@
-<div class="mb-2 ccLicense-select">
+<div class="mb-4 ccLicense-select">
   <ds-select
     [disabled]="!submissionCcLicenses"
     [label]="'submission.sections.ccLicense.type'">
@@ -38,10 +38,10 @@
 <ng-container *ngIf="getSelectedCcLicense()">
 
   <div *ngFor="let field of getSelectedCcLicense().fields"
-       class="mb-2">
+       class="mb-4">
 
-    <div class="d-flex flex-row mb-2">
-      <div class="label {{ field.id }}">
+    <div class="d-flex flex-row">
+      <div class="font-weight-bold {{ field.id }}">
         {{ field.label }}
       </div>
       <button
@@ -55,7 +55,7 @@
 
       <div>
 
-        <div class="modal-header">
+        <div class="modal-header mb-4 ">
           <div>
             <h4>
               {{ field.label }}
@@ -70,11 +70,11 @@
 
         <div class="modal-body">
           <div *ngFor="let value of field.enums"
-               class="mb-2">
+               class="mb-4">
             <h5>
               {{ value.label }}
             </h5>
-            <div [innerHTML]="value.description"></div>
+            <div [innerHTML]="value.description" class="font-weight-light"></div>
           </div>
         </div>
 
@@ -102,13 +102,13 @@
 
     <ng-container *ngIf="field.enums?.length <= 5">
       <div *ngFor="let option of field.enums"
-           class="d-flex flex-row m-2">
+           class="d-flex flex-row m-1">
         <div (click)="selectOption(getSelectedCcLicense(), field, option)">
           <input type="radio"
                  title="{{ option.label }}"
                  class="mr-1"
                  [checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
-          <span class="label">{{ option.label }}</span>
+          <span>{{ option.label }}</span>
         </div>
       </div>
     </ng-container>
@@ -122,11 +122,12 @@
     <div *ngIf="!licenseLink">
       <i class='fas fa-circle-notch fa-spin m-2'></i>
     </div>
-    <ng-container *ngIf="licenseLink">
+    <div *ngIf="licenseLink"
+         class="mt-2 p-4 bg-light text-dark">
       <div>
         {{ 'submission.sections.ccLicense.link' | translate }}
       </div>
-      <a class="license-link" href="{{ licenseLink }}?target=_blank">
+      <a class="license-link" href="{{ licenseLink }}" target="_blank">
         {{ licenseLink }}
       </a>
       <div class="m-2">
@@ -137,6 +138,6 @@
           <span>{{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
         </div>
       </div>
-    </ng-container>
+    </div>
   </ng-container>
 </ng-container>
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.scss b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
index b76b67dcb3..c3890c12a1 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
@@ -21,7 +21,7 @@ import { JsonPatchOperationsBuilder } from '../../core/json-patch/builder/json-p
 @Component({
   selector: 'ds-submission-section-cc-licenses',
   templateUrl: './submission-section-cc-licenses.component.html',
-  styleUrls: ['./submission-section-cc-licenses.component.css']
+  styleUrls: ['./submission-section-cc-licenses.component.scss']
 })
 @renderSectionFor(SectionsType.CcLicense)
 export class SubmissionSectionCcLicensesComponent extends SectionModelComponent {
@@ -107,11 +107,13 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
     if (!!this.getSelectedCcLicense() && this.getSelectedCcLicense().id === ccLicense.id) {
       return;
     }
-    this.data.ccLicense = {
-      id: ccLicense.id,
-      fields: {},
-    };
-    this.data.uri = undefined;
+    this.updateSectionData({
+      ccLicense: {
+        id: ccLicense.id,
+        fields: {},
+      },
+      uri: undefined,
+    });
     this.setAccepted(false);
   }
 
@@ -135,8 +137,15 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
     if (this.isSelectedOption(ccLicense, field, option)) {
       return;
     }
-    this.data.ccLicense.fields[field.id] = option;
-    this.setAccepted(false);
+    this.updateSectionData({
+      ccLicense: {
+        id: ccLicense.id,
+        fields: Object.assign({}, this.data.ccLicense.fields, {
+          [field.id]: option
+        }),
+      },
+      accepted: false,
+    });
   }
 
   /**
@@ -227,6 +236,14 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
         map((sectionState) => sectionState.data as WorkspaceitemSectionCcLicenseObject),
       ).subscribe((data) => {
         this.sectionData.data = data;
+        const path = this.pathCombiner.getPath('uri');
+        if (this.accepted) {
+          this.getCcLicenseLink$().subscribe((link) => {
+            this.operationsBuilder.add(path, link.toString(), false, true);
+          });
+        } else {
+          this.operationsBuilder.remove(path);
+        }
       }),
       this.submissionCcLicensesDataService.findAll({elementsPerPage: Number.MAX_SAFE_INTEGER}).pipe(
         getSucceededRemoteData(),
@@ -243,27 +260,16 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    * @param accepted  the accepted state for the cc license.
    */
   setAccepted(accepted: boolean) {
-    const path = this.pathCombiner.getPath('uri');
-    if (accepted) {
-      this.getCcLicenseLink$().subscribe((link) => {
-          this.operationsBuilder.add(path, link.toString(), false, true);
-          this.data.accepted = true;
-          this.updateSectionData();
-          this.updateSectionStatus();
-        }
-      );
-    } else {
-      this.operationsBuilder.remove(path);
-      this.data.accepted = false;
-      this.updateSectionData();
-      this.updateSectionStatus();
-    }
+    this.updateSectionData({
+      accepted
+    });
+    this.updateSectionStatus();
   }
 
   /**
    * Update the section data for this section.
    */
-  updateSectionData() {
-    this.sectionService.updateSectionData(this.submissionId, this.sectionData.id, this.data);
+  updateSectionData(data: WorkspaceitemSectionCcLicenseObject) {
+    this.sectionService.updateSectionData(this.submissionId, this.sectionData.id, Object.assign({}, this.data, data));
   }
 }

From 0b67bd54fbfeddde3c1112226d251bac047c5e56 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 26 May 2020 11:54:33 +0200
Subject: [PATCH 56/84] 68067: Refactoring menu-component resolving route menu
 data to menu effects

---
 .../admin-sidebar/admin-sidebar.component.ts  | 10 +--
 src/app/core/core.effects.ts                  |  4 +-
 src/app/navbar/navbar.component.ts            | 14 ++--
 src/app/shared/menu/menu.actions.ts           | 14 ----
 src/app/shared/menu/menu.component.ts         | 50 +------------
 src/app/shared/menu/menu.effects.ts           | 72 +++++++++++++++++++
 src/app/shared/menu/menu.reducer.ts           |  7 +-
 src/app/shared/menu/menu.service.ts           | 20 +++---
 8 files changed, 103 insertions(+), 88 deletions(-)
 create mode 100644 src/app/shared/menu/menu.effects.ts

diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
index d3633c86b2..f11313fb6d 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
@@ -18,7 +18,6 @@ import { TextMenuItemModel } from '../../shared/menu/menu-item/models/text.model
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
-import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Component representing the admin sidebar
@@ -60,19 +59,18 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
 
   constructor(protected menuService: MenuService,
               protected injector: Injector,
-              protected route: ActivatedRoute,
-              protected router: Router,
               private variableService: CSSVariableService,
               private authService: AuthService,
               private modalService: NgbModal
   ) {
-    super(menuService, injector, route, router);
+    super(menuService, injector);
   }
 
   /**
    * Set and calculate all initial values of the instance variables
    */
   ngOnInit(): void {
+    this.createMenu();
     super.ngOnInit();
     this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
     this.authService.isAuthenticated()
@@ -455,7 +453,9 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         index: 10
       },
     ];
-    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, menuSection));
+    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
+      shouldPersistOnRouteChange: true
+    })));
 
   }
 
diff --git a/src/app/core/core.effects.ts b/src/app/core/core.effects.ts
index 9f4242cc9a..cd14a527e8 100644
--- a/src/app/core/core.effects.ts
+++ b/src/app/core/core.effects.ts
@@ -7,6 +7,7 @@ import { ServerSyncBufferEffects } from './cache/server-sync-buffer.effects';
 import { ObjectUpdatesEffects } from './data/object-updates/object-updates.effects';
 import { RouteEffects } from './services/route.effects';
 import { RouterEffects } from './router/router.effects';
+import { MenuEffects } from '../shared/menu/menu.effects';
 
 export const coreEffects = [
   RequestEffects,
@@ -17,5 +18,6 @@ export const coreEffects = [
   ServerSyncBufferEffects,
   ObjectUpdatesEffects,
   RouteEffects,
-  RouterEffects
+  RouterEffects,
+  MenuEffects
 ];
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 99e44ff489..ae9000352a 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -7,7 +7,6 @@ import { TextMenuItemModel } from '../shared/menu/menu-item/models/text.model';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { HostWindowService } from '../shared/host-window.service';
 import { environment } from '../../environments/environment';
-import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Component representing the public navbar
@@ -27,11 +26,14 @@ export class NavbarComponent extends MenuComponent {
 
   constructor(protected menuService: MenuService,
               protected injector: Injector,
-              protected route: ActivatedRoute,
-              protected router: Router,
               public windowService: HostWindowService
   ) {
-    super(menuService, injector, route, router);
+    super(menuService, injector);
+  }
+
+  ngOnInit(): void {
+    this.createMenu();
+    super.ngOnInit();
   }
 
   /**
@@ -91,7 +93,9 @@ export class NavbarComponent extends MenuComponent {
         } as LinkMenuItemModel
       });
     });
-    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, menuSection));
+    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
+      shouldPersistOnRouteChange: true
+    })));
 
   }
 
diff --git a/src/app/shared/menu/menu.actions.ts b/src/app/shared/menu/menu.actions.ts
index 5b9166641e..00275441d6 100644
--- a/src/app/shared/menu/menu.actions.ts
+++ b/src/app/shared/menu/menu.actions.ts
@@ -21,7 +21,6 @@ export const MenuActionTypes = {
   EXPAND_MENU_PREVIEW: type('dspace/menu/EXPAND_MENU_PREVIEW'),
   ADD_SECTION: type('dspace/menu-section/ADD_SECTION'),
   REMOVE_SECTION: type('dspace/menu-section/REMOVE_SECTION'),
-  RESET_SECTIONS: type('dspace/menu-section/RESET_SECTIONS'),
   SHOW_SECTION: type('dspace/menu-section/SHOW_SECTION'),
   HIDE_SECTION: type('dspace/menu-section/HIDE_SECTION'),
   ACTIVATE_SECTION: type('dspace/menu-section/ACTIVATE_SECTION'),
@@ -116,18 +115,6 @@ export class ExpandMenuPreviewAction implements Action {
   }
 }
 
-/**
- * Action used to remove all sections from a certain menu
- */
-export class ResetMenuSectionsAction implements Action {
-  type = MenuActionTypes.RESET_SECTIONS;
-  menuID: MenuID;
-
-  constructor(menuID: MenuID) {
-    this.menuID = menuID;
-  }
-}
-
 // MENU SECTION ACTIONS
 /**
  * Action used to perform state changes for a section of a certain menu
@@ -238,5 +225,4 @@ export type MenuAction =
   | ToggleActiveMenuSectionAction
   | CollapseMenuPreviewAction
   | ExpandMenuPreviewAction
-  | ResetMenuSectionsAction
 /* tslint:enable:max-classes-per-file */
diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index 074d0f1e95..329fabf703 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -8,7 +8,6 @@ import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { hasNoValue, hasValue } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
 import { getComponentForMenu } from './menu-section.decorator';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { Subscription } from 'rxjs/internal/Subscription';
 
 /**
@@ -70,17 +69,13 @@ export class MenuComponent implements OnInit, OnDestroy {
    */
   subs: Subscription[] = [];
 
-  constructor(protected menuService: MenuService,
-              protected injector: Injector,
-              protected route: ActivatedRoute,
-              protected router: Router) {
+  constructor(protected menuService: MenuService, protected injector: Injector) {
   }
 
   /**
    * Sets all instance variables to their initial values
    */
   ngOnInit(): void {
-    this.initSections();
     this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.menuVisible = this.menuService.isMenuVisible(this.menuID);
@@ -93,49 +88,6 @@ export class MenuComponent implements OnInit, OnDestroy {
     }));
   }
 
-  /**
-   * Initialize all menu sections and add them to the menu's store
-   */
-  initSections() {
-    this.subs.push(this.router.events.pipe(
-      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
-      tap(() => this.menuService.resetSections(this.menuID)),
-      map(() => this.resolveMenuSections(this.route.root))
-    ).subscribe((sections: MenuSection[]) => {
-      this.createMenu();
-      sections.forEach((section: MenuSection) => {
-        this.menuService.addSection(this.menuID, section);
-      });
-    }));
-  }
-
-  /**
-   * Initialize all static menu sections and items for this menu
-   * These sections will be available on any route. Route specific sections should be defined in the route's data instead.
-   */
-  createMenu() {
-    // Override this method to create and add a standard set of menu sections that should be available for the current menu type on all routes
-  }
-
-  /**
-   * Resolve menu sections defined in the current route data (including parent routes)
-   * @param route The route to resolve data for
-   */
-  resolveMenuSections(route: ActivatedRoute): MenuSection[] {
-    const data = route.snapshot.data;
-    const last: boolean = hasNoValue(route.firstChild);
-
-    if (hasValue(data) && hasValue(data.menu) && hasValue(data.menu[this.menuID])) {
-      if (!last) {
-        return [...data.menu[this.menuID], ...this.resolveMenuSections(route.firstChild)]
-      } else {
-        return [...data.menu[this.menuID]];
-      }
-    }
-
-    return !last ? this.resolveMenuSections(route.firstChild) : [];
-  }
-
   /**
    *  Collapse this menu when it's currently expanded, expand it when its currently collapsed
    * @param {Event} event The user event that triggered this method
diff --git a/src/app/shared/menu/menu.effects.ts b/src/app/shared/menu/menu.effects.ts
new file mode 100644
index 0000000000..f0a6c3f958
--- /dev/null
+++ b/src/app/shared/menu/menu.effects.ts
@@ -0,0 +1,72 @@
+import { ActivatedRoute } from '@angular/router';
+import { MenuSection } from './menu.reducer';
+import { hasNoValue, hasValue } from '../empty.util';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { MenuService } from './menu.service';
+import { Observable } from 'rxjs/internal/Observable';
+import { Action } from '@ngrx/store';
+import { ROUTER_NAVIGATED } from '@ngrx/router-store';
+import { Injectable } from '@angular/core';
+import { map, take, tap } from 'rxjs/operators';
+import { MenuID } from './initial-menus-state';
+
+@Injectable()
+export class MenuEffects {
+
+  constructor(private actions$: Actions,
+              private menuService: MenuService,
+              private route: ActivatedRoute) {
+  }
+
+  @Effect({ dispatch: false })
+  public buildRouteMenuSections$: Observable<Action> = this.actions$
+    .pipe(
+      ofType(ROUTER_NAVIGATED),
+      tap(() => {
+        Object.values(MenuID).forEach((menuID) => {
+          this.buildRouteMenuSections(menuID);
+        });
+      })
+    );
+
+  buildRouteMenuSections(menuID: MenuID) {
+    this.menuService.getNonPersistentMenuSections(menuID).pipe(
+      map((sections) => sections.map((section) => section.id)),
+      take(1)
+    ).subscribe((shouldNotPersistIDs: string[]) => {
+      const resolvedSections = this.resolveRouteMenuSections(this.route.root, menuID);
+      resolvedSections.forEach((section) => {
+        const index = shouldNotPersistIDs.indexOf(section.id);
+        if (index > -1) {
+          shouldNotPersistIDs.splice(index, 1);
+        } else {
+          this.menuService.addSection(menuID, section);
+        }
+      });
+      shouldNotPersistIDs.forEach((id) => {
+        this.menuService.removeSection(menuID, id);
+      });
+    });
+  }
+
+  /**
+   * Resolve menu sections defined in the current route data (including parent routes)
+   * @param route   The route to resolve data for
+   * @param menuID  The menu to resolve data for
+   */
+  resolveRouteMenuSections(route: ActivatedRoute, menuID: MenuID): MenuSection[] {
+    const data = route.snapshot.data;
+    const last: boolean = hasNoValue(route.firstChild);
+
+    if (hasValue(data) && hasValue(data.menu) && hasValue(data.menu[menuID])) {
+      if (!last) {
+        return [...data.menu[menuID], ...this.resolveRouteMenuSections(route.firstChild, menuID)]
+      } else {
+        return [...data.menu[menuID]];
+      }
+    }
+
+    return !last ? this.resolveRouteMenuSections(route.firstChild, menuID) : [];
+  }
+
+}
diff --git a/src/app/shared/menu/menu.reducer.ts b/src/app/shared/menu/menu.reducer.ts
index 85d6847e69..0ef328aa15 100644
--- a/src/app/shared/menu/menu.reducer.ts
+++ b/src/app/shared/menu/menu.reducer.ts
@@ -6,7 +6,7 @@ import {
   MenuAction,
   MenuActionTypes,
   MenuSectionAction,
-  RemoveMenuSectionAction, ResetMenuSectionsAction,
+  RemoveMenuSectionAction,
   ShowMenuSectionAction,
   ToggleActiveMenuSectionAction
 } from './menu.actions';
@@ -58,6 +58,7 @@ export class MenuSection {
   model: MenuItemModel;
   index?: number;
   icon?: string;
+  shouldPersistOnRouteChange? = false;
 }
 
 /**
@@ -118,10 +119,6 @@ export function menusReducer(state: MenusState = initialMenusState, action: Menu
     case MenuActionTypes.SHOW_SECTION: {
       return showSection(state, action as ShowMenuSectionAction);
     }
-    case MenuActionTypes.RESET_SECTIONS: {
-      const newMenuState = Object.assign({}, menuState, { sections: {} });
-      return Object.assign({}, state, { [action.menuID]: newMenuState });
-    }
 
     default: {
       return state;
diff --git a/src/app/shared/menu/menu.service.ts b/src/app/shared/menu/menu.service.ts
index 9ff4c2f788..fd3ba1ed5c 100644
--- a/src/app/shared/menu/menu.service.ts
+++ b/src/app/shared/menu/menu.service.ts
@@ -14,7 +14,7 @@ import {
   ExpandMenuAction,
   ExpandMenuPreviewAction,
   HideMenuAction,
-  RemoveMenuSectionAction, ResetMenuSectionsAction,
+  RemoveMenuSectionAction,
   ShowMenuAction,
   ToggleActiveMenuSectionAction,
   ToggleMenuAction,
@@ -129,6 +129,16 @@ export class MenuService {
     );
   }
 
+  /**
+   * Retrieve menu sections that shouldn't persist on route change
+   * @param menuID  The ID of the menu the sections reside in
+   */
+  getNonPersistentMenuSections(menuID: MenuID): Observable<MenuSection[]> {
+    return this.getMenu(menuID).pipe(
+      map((state: MenuState) => Object.values(state.sections).filter((section: MenuSection) => !section.shouldPersistOnRouteChange))
+    );
+  }
+
   /**
    * Add a new section to the store
    * @param {MenuID} menuID The menu to which the new section is to be added
@@ -147,14 +157,6 @@ export class MenuService {
     this.store.dispatch(new RemoveMenuSectionAction(menuID, sectionID));
   }
 
-  /**
-   * Remove all sections within a menu from the store
-   * @param {MenuID} menuID The menu from which the sections are to be removed
-   */
-  resetSections(menuID: MenuID) {
-    this.store.dispatch(new ResetMenuSectionsAction(menuID));
-  }
-
   /**
    * Check if a given menu is collapsed
    * @param {MenuID} menuID The ID of the menu that is to be checked

From 7b64d6bc3101dcd086ac096b1ea111c87a2cef17 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 26 May 2020 14:08:54 +0200
Subject: [PATCH 57/84] 68067: JSDocs + menu-effects tests

---
 src/app/shared/menu/menu.component.spec.ts |  76 +-----------
 src/app/shared/menu/menu.effects.spec.ts   | 129 +++++++++++++++++++++
 src/app/shared/menu/menu.effects.ts        |  12 ++
 3 files changed, 144 insertions(+), 73 deletions(-)
 create mode 100644 src/app/shared/menu/menu.effects.spec.ts

diff --git a/src/app/shared/menu/menu.component.spec.ts b/src/app/shared/menu/menu.component.spec.ts
index 901f072dd7..2b83ec4414 100644
--- a/src/app/shared/menu/menu.component.spec.ts
+++ b/src/app/shared/menu/menu.component.spec.ts
@@ -7,71 +7,25 @@ import { MenuComponent } from './menu.component';
 import { MenuServiceStub } from '../testing/menu-service.stub';
 import { of as observableOf } from 'rxjs';
 import { MenuSection } from './menu.reducer';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MenuID, MenuItemType } from './initial-menus-state';
-import { LinkMenuItemModel } from './menu-item/models/link.model';
+import { MenuID } from './initial-menus-state';
 
 describe('MenuComponent', () => {
   let comp: MenuComponent;
   let fixture: ComponentFixture<MenuComponent>;
   let menuService: MenuService;
-  let routeDataMenuSection: MenuSection;
-  let routeDataMenuChildSection: MenuSection;
-  let route: any;
   let router: any;
 
   const mockMenuID = 'mock-menuID' as MenuID;
 
   beforeEach(async(() => {
-    routeDataMenuSection = {
-      id: 'mockSection',
-      active: false,
-      visible: true,
-      model: {
-        type: MenuItemType.LINK,
-        text: 'menu.section.mockSection',
-        link: ''
-      } as LinkMenuItemModel
-    };
-    routeDataMenuChildSection = {
-      id: 'mockChildSection',
-      parentID: 'mockSection',
-      active: false,
-      visible: true,
-      model: {
-        type: MenuItemType.LINK,
-        text: 'menu.section.mockChildSection',
-        link: ''
-      } as LinkMenuItemModel
-    };
-    route = {
-      root: {
-        snapshot: {
-          data: {
-            menu: {
-              [mockMenuID]: routeDataMenuSection
-            }
-          }
-        },
-        firstChild: {
-          snapshot: {
-            data: {
-              menu: {
-                [mockMenuID]: routeDataMenuChildSection
-              }
-            }
-          }
-        }
-      }
-    };
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), NoopAnimationsModule, RouterTestingModule],
       declarations: [MenuComponent],
       providers: [
         { provide: Injector, useValue: {} },
-        { provide: MenuService, useClass: MenuServiceStub },
-        { provide: ActivatedRoute, useValue: route }
+        { provide: MenuService, useClass: MenuServiceStub }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(MenuComponent, {
@@ -90,30 +44,6 @@ describe('MenuComponent', () => {
     fixture.detectChanges();
   });
 
-  describe('ngOnInit', () => {
-    beforeEach(() => {
-      spyOn(comp, 'resolveMenuSections').and.returnValue([]);
-    });
-
-    it('should call resolveMenuSections on init', () => {
-      router.events = observableOf(new NavigationEnd(0, '', ''));
-      comp.ngOnInit();
-      expect(comp.resolveMenuSections).toHaveBeenCalledWith(route.root);
-    })
-  });
-
-  describe('resolveMenuSections', () => {
-    let result: MenuSection[];
-
-    beforeEach(() => {
-      result = comp.resolveMenuSections(route.root);
-    });
-
-    it('should return the current route\'s menu sections', () => {
-      expect(result).toEqual([routeDataMenuSection, routeDataMenuChildSection])
-    });
-  });
-
   describe('toggle', () => {
     beforeEach(() => {
       spyOn(menuService, 'toggleMenu');
diff --git a/src/app/shared/menu/menu.effects.spec.ts b/src/app/shared/menu/menu.effects.spec.ts
new file mode 100644
index 0000000000..11b468eded
--- /dev/null
+++ b/src/app/shared/menu/menu.effects.spec.ts
@@ -0,0 +1,129 @@
+import { MenuID, MenuItemType } from './initial-menus-state';
+import { MenuSection } from './menu.reducer';
+import { LinkMenuItemModel } from './menu-item/models/link.model';
+import { TestBed } from '@angular/core/testing';
+import { MenuService } from './menu.service';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { of as observableOf } from 'rxjs';
+import { cold, hot } from 'jasmine-marbles';
+import { ROUTER_NAVIGATED } from '@ngrx/router-store';
+import { MenuEffects } from './menu.effects';
+
+describe('MenuEffects', () => {
+  let menuEffects: MenuEffects;
+  let routeDataMenuSection: MenuSection;
+  let routeDataMenuChildSection: MenuSection;
+  let toBeRemovedMenuSection: MenuSection;
+  let alreadyPresentMenuSection: MenuSection;
+  let route;
+  let menuService;
+  let actions: Observable<any>;
+
+  function init() {
+    routeDataMenuSection = {
+      id: 'mockSection',
+      active: false,
+      visible: true,
+      model: {
+        type: MenuItemType.LINK,
+        text: 'menu.section.mockSection',
+        link: ''
+      } as LinkMenuItemModel
+    };
+    routeDataMenuChildSection = {
+      id: 'mockChildSection',
+      parentID: 'mockSection',
+      active: false,
+      visible: true,
+      model: {
+        type: MenuItemType.LINK,
+        text: 'menu.section.mockChildSection',
+        link: ''
+      } as LinkMenuItemModel
+    };
+    toBeRemovedMenuSection = {
+      id: 'toBeRemovedSection',
+      active: false,
+      visible: true,
+      model: {
+        type: MenuItemType.LINK,
+        text: 'menu.section.toBeRemovedSection',
+        link: ''
+      } as LinkMenuItemModel
+    };
+    alreadyPresentMenuSection = {
+      id: 'alreadyPresentSection',
+      active: false,
+      visible: true,
+      model: {
+        type: MenuItemType.LINK,
+        text: 'menu.section.alreadyPresentSection',
+        link: ''
+      } as LinkMenuItemModel
+    };
+    route = {
+      root: {
+        snapshot: {
+          data: {
+            menu: {
+              [MenuID.PUBLIC]: [routeDataMenuSection, alreadyPresentMenuSection]
+            }
+          }
+        },
+        firstChild: {
+          snapshot: {
+            data: {
+              menu: {
+                [MenuID.PUBLIC]: routeDataMenuChildSection
+              }
+            }
+          }
+        }
+      }
+    };
+
+    menuService = jasmine.createSpyObj('menuService', {
+      getNonPersistentMenuSections: observableOf([toBeRemovedMenuSection, alreadyPresentMenuSection]),
+      addSection: {},
+      removeSection: {}
+    });
+  }
+
+  beforeEach(() => {
+    init();
+    TestBed.configureTestingModule({
+      providers: [
+        MenuEffects,
+        { provide: MenuService, useValue: menuService },
+        { provide: ActivatedRoute, useValue: route },
+        provideMockActions(() => actions)
+      ]
+    });
+
+    menuEffects = TestBed.get(MenuEffects);
+  });
+
+  describe('buildRouteMenuSections$', () => {
+    it('should add and remove menu sections depending on the current route', () => {
+      actions = hot('--a-', {
+        a: {
+          type: ROUTER_NAVIGATED
+        }
+      });
+
+      const expected = cold('--b-', {
+        b: {
+          type: ROUTER_NAVIGATED
+        }
+      });
+
+      expect(menuEffects.buildRouteMenuSections$).toBeObservable(expected);
+      expect(menuService.addSection).toHaveBeenCalledWith(MenuID.PUBLIC, routeDataMenuSection);
+      expect(menuService.addSection).toHaveBeenCalledWith(MenuID.PUBLIC, routeDataMenuChildSection);
+      expect(menuService.addSection).not.toHaveBeenCalledWith(MenuID.PUBLIC, alreadyPresentMenuSection);
+      expect(menuService.removeSection).toHaveBeenCalledWith(MenuID.PUBLIC, toBeRemovedMenuSection.id);
+    });
+  });
+});
diff --git a/src/app/shared/menu/menu.effects.ts b/src/app/shared/menu/menu.effects.ts
index f0a6c3f958..92df41caff 100644
--- a/src/app/shared/menu/menu.effects.ts
+++ b/src/app/shared/menu/menu.effects.ts
@@ -10,6 +10,9 @@ import { Injectable } from '@angular/core';
 import { map, take, tap } from 'rxjs/operators';
 import { MenuID } from './initial-menus-state';
 
+/**
+ * Effects modifying the state of menus
+ */
 @Injectable()
 export class MenuEffects {
 
@@ -18,6 +21,9 @@ export class MenuEffects {
               private route: ActivatedRoute) {
   }
 
+  /**
+   * On route change, build menu sections for every menu type depending on the current route data
+   */
   @Effect({ dispatch: false })
   public buildRouteMenuSections$: Observable<Action> = this.actions$
     .pipe(
@@ -29,6 +35,12 @@ export class MenuEffects {
       })
     );
 
+  /**
+   * Build menu sections depending on the current route
+   * - Adds sections found in the current route data that aren't active yet
+   * - Removes sections that are active, but not present in the current route data
+   * @param menuID  The menu to add/remove sections to/from
+   */
   buildRouteMenuSections(menuID: MenuID) {
     this.menuService.getNonPersistentMenuSections(menuID).pipe(
       map((sections) => sections.map((section) => section.id)),

From 9a4fc65331cb0d841c15eb011f0637bf2f6a6216 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 11 Jun 2020 10:50:39 +0200
Subject: [PATCH 58/84] 68067: Fix instance field declaration

---
 src/app/shared/menu/menu.effects.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/shared/menu/menu.effects.ts b/src/app/shared/menu/menu.effects.ts
index 92df41caff..be314cfd49 100644
--- a/src/app/shared/menu/menu.effects.ts
+++ b/src/app/shared/menu/menu.effects.ts
@@ -16,11 +16,6 @@ import { MenuID } from './initial-menus-state';
 @Injectable()
 export class MenuEffects {
 
-  constructor(private actions$: Actions,
-              private menuService: MenuService,
-              private route: ActivatedRoute) {
-  }
-
   /**
    * On route change, build menu sections for every menu type depending on the current route data
    */
@@ -35,6 +30,11 @@ export class MenuEffects {
       })
     );
 
+  constructor(private actions$: Actions,
+              private menuService: MenuService,
+              private route: ActivatedRoute) {
+  }
+
   /**
    * Build menu sections depending on the current route
    * - Adds sections found in the current route data that aren't active yet

From 3db47f57919a6b6bac3d8afb0b5ca52caa38da94 Mon Sep 17 00:00:00 2001
From: Samuel <samuel@soundmarker.com>
Date: Wed, 20 May 2020 13:55:42 +0200
Subject: [PATCH 59/84] CC License Submission Step 2 - Storing the results -
 add SubmissionCcLicenceUrl model

---
 src/app/core/cache/response.models.ts         | 15 --------
 src/app/core/core.module.ts                   | 10 +++---
 .../data/string-response-parsing.service.ts   | 23 ------------
 ... => submission-cc-license-data.service.ts} | 36 ++++++++-----------
 .../submission-cc-license-url-data.service.ts | 34 ++++++++++++++++++
 ...ubmission-cc-licence-link.resource-type.ts |  9 +++++
 ...=> submission-cc-licence.resource-type.ts} |  0
 .../shared/submission-cc-license-url.model.ts | 23 ++++++++++++
 .../shared/submission-cc-license.model.ts     |  2 +-
 ...sion-section-cc-licenses.component.spec.ts | 35 ++++++++++--------
 ...ubmission-section-cc-licenses.component.ts |  6 ++--
 11 files changed, 110 insertions(+), 83 deletions(-)
 delete mode 100644 src/app/core/data/string-response-parsing.service.ts
 rename src/app/core/data/{submission-cc-licenses-data.service.ts => submission-cc-license-data.service.ts} (69%)
 create mode 100644 src/app/core/data/submission-cc-license-url-data.service.ts
 create mode 100644 src/app/core/shared/submission-cc-licence-link.resource-type.ts
 rename src/app/core/shared/{submission-cc-licences.resource-type.ts => submission-cc-licence.resource-type.ts} (100%)
 create mode 100644 src/app/core/shared/submission-cc-license-url.model.ts

diff --git a/src/app/core/cache/response.models.ts b/src/app/core/cache/response.models.ts
index 56b8947e08..3f46ecf647 100644
--- a/src/app/core/cache/response.models.ts
+++ b/src/app/core/cache/response.models.ts
@@ -29,21 +29,6 @@ export class RestResponse {
   }
 }
 
-/**
- * A response containing a string.
- */
-export class StringResponse extends RestResponse {
-
-  constructor(
-    public isSuccessful: boolean,
-    public statusCode: number,
-    public statusText: string,
-    public content: string,
-  ) {
-    super(isSuccessful, statusCode, statusText);
-  }
-}
-
 export class DSOSuccessResponse extends RestResponse {
   constructor(
     public resourceSelfLinks: string[],
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 0c3555a023..b7937f0472 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -145,9 +145,10 @@ import { Version } from './shared/version.model';
 import { VersionHistory } from './shared/version-history.model';
 import { WorkflowActionDataService } from './data/workflow-action-data.service';
 import { WorkflowAction } from './tasks/models/workflow-action-object.model';
-import { SubmissionCcLicensesDataService } from './data/submission-cc-licenses-data.service';
+import { SubmissionCcLicenseDataService } from './data/submission-cc-license-data.service';
 import { SubmissionCcLicence } from './shared/submission-cc-license.model';
-import { StringResponseParsingService } from './data/string-response-parsing.service';
+import { SubmissionCcLicenceUrl } from './shared/submission-cc-license-url.model';
+import { SubmissionCcLicenseUrlDataService } from './data/submission-cc-license-url-data.service';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -215,10 +216,10 @@ const PROVIDERS = [
   BrowseResponseParsingService,
   BrowseEntriesResponseParsingService,
   BrowseItemsResponseParsingService,
-  StringResponseParsingService,
   BrowseService,
   ConfigResponseParsingService,
-  SubmissionCcLicensesDataService,
+  SubmissionCcLicenseDataService,
+  SubmissionCcLicenseUrlDataService,
   SubmissionDefinitionsConfigService,
   SubmissionFormsConfigService,
   SubmissionRestService,
@@ -302,6 +303,7 @@ export const models =
     WorkflowItem,
     WorkspaceItem,
     SubmissionCcLicence,
+    SubmissionCcLicenceUrl,
     SubmissionDefinitionsModel,
     SubmissionFormsModel,
     SubmissionSectionModel,
diff --git a/src/app/core/data/string-response-parsing.service.ts b/src/app/core/data/string-response-parsing.service.ts
deleted file mode 100644
index aea314e27a..0000000000
--- a/src/app/core/data/string-response-parsing.service.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Injectable } from '@angular/core';
-import {RestResponse, StringResponse} from '../cache/response.models';
-import { DSpaceRESTV2Response } from '../dspace-rest-v2/dspace-rest-v2-response.model';
-import { ResponseParsingService } from './parsing.service';
-import { RestRequest } from './request.models';
-
-/**
- * A responseparser that will parse the response body to a string.
- */
-@Injectable()
-export class StringResponseParsingService implements ResponseParsingService {
-
-  /**
-   * Parse the response to a string.
-   *
-   * @param request The request that was sent to the server
-   * @param data The response to parse
-   */
-  parse(request: RestRequest, data: DSpaceRESTV2Response): RestResponse {
-    const isSuccessful = data.statusCode >= 200 && data.statusCode < 300;
-    return new StringResponse(isSuccessful, data.statusCode, data.statusText, data.payload as undefined as string);
-  }
-}
diff --git a/src/app/core/data/submission-cc-licenses-data.service.ts b/src/app/core/data/submission-cc-license-data.service.ts
similarity index 69%
rename from src/app/core/data/submission-cc-licenses-data.service.ts
rename to src/app/core/data/submission-cc-license-data.service.ts
index 3610e4a3c6..33e0f8ebac 100644
--- a/src/app/core/data/submission-cc-licenses-data.service.ts
+++ b/src/app/core/data/submission-cc-license-data.service.ts
@@ -9,19 +9,20 @@ import { CoreState } from '../core.reducers';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { DataService } from './data.service';
 import { RequestService } from './request.service';
-import { SUBMISSION_CC_LICENSE } from '../shared/submission-cc-licences.resource-type';
+import { SUBMISSION_CC_LICENSE } from '../shared/submission-cc-licence.resource-type';
 import { Field, Option, SubmissionCcLicence } from '../shared/submission-cc-license.model';
 import { DefaultChangeAnalyzer } from './default-change-analyzer.service';
-import { GetRequest } from './request.models';
-import { configureRequest, getResponseFromEntry } from '../shared/operators';
-import { map, switchMap, tap } from 'rxjs/operators';
+import {
+  getRemoteDataPayload,
+  getSucceededRemoteData,
+} from '../shared/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { Observable } from 'rxjs';
-import { StringResponse } from '../cache/response.models';
-import { StringResponseParsingService } from './string-response-parsing.service';
+import { SubmissionCcLicenseUrlDataService } from './submission-cc-license-url-data.service';
 
 @Injectable()
 @dataService(SUBMISSION_CC_LICENSE)
-export class SubmissionCcLicensesDataService extends DataService<SubmissionCcLicence> {
+export class SubmissionCcLicenseDataService extends DataService<SubmissionCcLicence> {
 
   protected linkPath = 'submissioncclicenses';
 
@@ -34,6 +35,7 @@ export class SubmissionCcLicensesDataService extends DataService<SubmissionCcLic
     protected rdbService: RemoteDataBuildService,
     protected requestService: RequestService,
     protected store: Store<CoreState>,
+    protected submissionCcLicenseUrlDataService: SubmissionCcLicenseUrlDataService,
   ) {
     super();
   }
@@ -43,9 +45,7 @@ export class SubmissionCcLicensesDataService extends DataService<SubmissionCcLic
    * @param ccLicense   the Creative Commons license type
    * @param options     the selected options of the license fields
    */
-  getCcLicenseLink(ccLicense: SubmissionCcLicence, options: Map<Field, Option>): Observable<StringResponse> {
-
-    const requestId = this.requestService.generateRequestId();
+  getCcLicenseLink(ccLicense: SubmissionCcLicence, options: Map<Field, Option>): Observable<string> {
 
     return this.getSearchByHref(
       'rightsByQuestions',{
@@ -64,18 +64,10 @@ export class SubmissionCcLicensesDataService extends DataService<SubmissionCcLic
         ]
       }
     ).pipe(
-      map((endpoint) => new GetRequest(
-        requestId,
-        endpoint,
-        undefined, {
-          responseType: 'text',
-        },
-      )),
-      tap((request) => request.getResponseParser = () => StringResponseParsingService),
-      configureRequest(this.requestService),
-      switchMap(() => this.requestService.getByUUID(requestId)),
-      getResponseFromEntry(),
-      map((response) => response as StringResponse),
+      switchMap((href) => this.submissionCcLicenseUrlDataService.findByHref(href)),
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      map((response) => response.url),
     );
   }
 }
diff --git a/src/app/core/data/submission-cc-license-url-data.service.ts b/src/app/core/data/submission-cc-license-url-data.service.ts
new file mode 100644
index 0000000000..581b7e2141
--- /dev/null
+++ b/src/app/core/data/submission-cc-license-url-data.service.ts
@@ -0,0 +1,34 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { dataService } from '../cache/builders/build-decorators';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { CoreState } from '../core.reducers';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { DataService } from './data.service';
+import { RequestService } from './request.service';
+import { DefaultChangeAnalyzer } from './default-change-analyzer.service';
+import { SubmissionCcLicenceUrl } from '../shared/submission-cc-license-url.model';
+import { SUBMISSION_CC_LICENSE_URL } from '../shared/submission-cc-licence-link.resource-type';
+
+@Injectable()
+@dataService(SUBMISSION_CC_LICENSE_URL)
+export class SubmissionCcLicenseUrlDataService extends DataService<SubmissionCcLicenceUrl> {
+
+  protected linkPath = 'submissioncclicenses';
+
+  constructor(
+    protected comparator: DefaultChangeAnalyzer<SubmissionCcLicenceUrl>,
+    protected halService: HALEndpointService,
+    protected http: HttpClient,
+    protected notificationsService: NotificationsService,
+    protected objectCache: ObjectCacheService,
+    protected rdbService: RemoteDataBuildService,
+    protected requestService: RequestService,
+    protected store: Store<CoreState>,
+  ) {
+    super();
+  }
+}
diff --git a/src/app/core/shared/submission-cc-licence-link.resource-type.ts b/src/app/core/shared/submission-cc-licence-link.resource-type.ts
new file mode 100644
index 0000000000..b96adbfe6e
--- /dev/null
+++ b/src/app/core/shared/submission-cc-licence-link.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from './resource-type';
+
+/**
+ * The resource type for License
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const SUBMISSION_CC_LICENSE_URL = new ResourceType('submissioncclicenseUrl');
diff --git a/src/app/core/shared/submission-cc-licences.resource-type.ts b/src/app/core/shared/submission-cc-licence.resource-type.ts
similarity index 100%
rename from src/app/core/shared/submission-cc-licences.resource-type.ts
rename to src/app/core/shared/submission-cc-licence.resource-type.ts
diff --git a/src/app/core/shared/submission-cc-license-url.model.ts b/src/app/core/shared/submission-cc-license-url.model.ts
new file mode 100644
index 0000000000..8ee444544c
--- /dev/null
+++ b/src/app/core/shared/submission-cc-license-url.model.ts
@@ -0,0 +1,23 @@
+import { autoserialize, inheritSerialization } from 'cerialize';
+import { typedObject } from '../cache/builders/build-decorators';
+import { excludeFromEquals } from '../utilities/equals.decorators';
+import { ResourceType } from './resource-type';
+import { HALResource } from './hal-resource.model';
+import { SUBMISSION_CC_LICENSE_URL } from './submission-cc-licence-link.resource-type';
+
+@typedObject
+@inheritSerialization(HALResource)
+export class SubmissionCcLicenceUrl extends HALResource {
+
+  static type = SUBMISSION_CC_LICENSE_URL;
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  @autoserialize
+  url: string;
+}
diff --git a/src/app/core/shared/submission-cc-license.model.ts b/src/app/core/shared/submission-cc-license.model.ts
index 2796edf6f2..20de01a826 100644
--- a/src/app/core/shared/submission-cc-license.model.ts
+++ b/src/app/core/shared/submission-cc-license.model.ts
@@ -3,7 +3,7 @@ import { typedObject } from '../cache/builders/build-decorators';
 import { excludeFromEquals } from '../utilities/equals.decorators';
 import { ResourceType } from './resource-type';
 import { HALResource } from './hal-resource.model';
-import { SUBMISSION_CC_LICENSE } from './submission-cc-licences.resource-type';
+import { SUBMISSION_CC_LICENSE } from './submission-cc-licence.resource-type';
 
 @typedObject
 @inheritSerialization(HALResource)
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
index 125cfdadc9..78ea927af6 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
@@ -1,8 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SubmissionSectionCcLicensesComponent } from './submission-section-cc-licenses.component';
-import { SUBMISSION_CC_LICENSE } from '../../core/shared/submission-cc-licences.resource-type';
+import { SUBMISSION_CC_LICENSE } from '../../core/shared/submission-cc-licence.resource-type';
 import { of as observableOf } from 'rxjs';
-import { SubmissionCcLicensesDataService } from '../../core/data/submission-cc-licenses-data.service';
+import { SubmissionCcLicenseDataService } from '../../core/data/submission-cc-license-data.service';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { SharedModule } from '../shared.module';
@@ -16,7 +16,7 @@ import { PaginatedList } from '../../core/data/paginated-list';
 import { SubmissionCcLicence } from '../../core/shared/submission-cc-license.model';
 import { cold } from 'jasmine-marbles';
 import { JsonPatchOperationsBuilder } from '../../core/json-patch/builder/json-patch-operations-builder';
-import { StringResponse } from '../../core/cache/response.models';
+import { SubmissionCcLicenseUrlDataService } from '../../core/data/submission-cc-license-url-data.service';
 
 describe('SubmissionSectionCcLicensesComponent', () => {
 
@@ -130,7 +130,15 @@ describe('SubmissionSectionCcLicensesComponent', () => {
   ];
 
   const submissionCcLicensesDataService = jasmine.createSpyObj('submissionCcLicensesDataService', {
-    getCcLicenseLink: observableOf(new StringResponse(true, 200, '200', 'test cc license link')),
+    getCcLicenseLink: observableOf(new RemoteData(
+      false,
+      false,
+      true,
+      undefined,
+      {
+        url: 'test cc license link',
+      }
+      )),
     findAll: observableOf(new RemoteData(
       false,
       false,
@@ -141,11 +149,13 @@ describe('SubmissionSectionCcLicensesComponent', () => {
   });
 
   const sectionService = {
-    getSectionState: () => observableOf({
-      data: {}
-    }),
+    getSectionState: () => {
+      return observableOf({});
+    },
     setSectionStatus: () => undefined,
-    updateSectionData: () => undefined,
+    updateSectionData: (submissionId, sectionId, updatedData) => {
+      component.sectionData.data = updatedData;
+    }
   };
 
   const operationsBuilder = jasmine.createSpyObj('operationsBuilder', {
@@ -163,7 +173,8 @@ describe('SubmissionSectionCcLicensesComponent', () => {
         SubmissionSectionCcLicensesComponent,
       ],
       providers: [
-        { provide: SubmissionCcLicensesDataService, useValue: submissionCcLicensesDataService },
+        { provide: SubmissionCcLicenseDataService, useValue: submissionCcLicensesDataService },
+        { provide: SubmissionCcLicenseUrlDataService, useValue: {} },
         { provide: SectionsService, useValue: sectionService },
         { provide: JsonPatchOperationsBuilder, useValue: operationsBuilder },
         { provide: 'collectionIdProvider', useValue: 'test collection id' },
@@ -212,7 +223,7 @@ describe('SubmissionSectionCcLicensesComponent', () => {
       expect(de.query(By.css('div.test-field-id-2b'))).toBeTruthy();
     });
 
-    it('should not display a license link', () => {
+    it('should not display a cc license link', () => {
       expect(de.query(By.css('.license-link'))).toBeNull();
     });
 
@@ -257,10 +268,6 @@ describe('SubmissionSectionCcLicensesComponent', () => {
           fixture.detectChanges();
         });
 
-        it('should call the operations builder add method', () => {
-          expect(operationsBuilder.add).toHaveBeenCalled();
-        });
-
         it('should have section status complete', () => {
           expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: true }));
         });
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
index c3890c12a1..6c3d52de55 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
+++ b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
@@ -3,7 +3,7 @@ import { Observable, of as observableOf, Subscription } from 'rxjs';
 import { Field, Option, SubmissionCcLicence } from '../../core/shared/submission-cc-license.model';
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../core/shared/operators';
 import { distinctUntilChanged, filter, map } from 'rxjs/operators';
-import { SubmissionCcLicensesDataService } from '../../core/data/submission-cc-licenses-data.service';
+import { SubmissionCcLicenseDataService } from '../../core/data/submission-cc-license-data.service';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { renderSectionFor } from '../../submission/sections/sections-decorator';
 import { SectionsType } from '../../submission/sections/sections-type';
@@ -79,7 +79,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
   constructor(
     protected modalService: NgbModal,
     protected sectionService: SectionsService,
-    protected submissionCcLicensesDataService: SubmissionCcLicensesDataService,
+    protected submissionCcLicensesDataService: SubmissionCcLicenseDataService,
     protected operationsBuilder: JsonPatchOperationsBuilder,
     @Inject('collectionIdProvider') public injectedCollectionId: string,
     @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
@@ -185,8 +185,6 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
       new Map(selectedCcLicense.fields.map(
         (field) => [field, this.getSelectedOption(selectedCcLicense, field)]
       )),
-    ).pipe(
-      map((response) => response.content),
     );
   }
 

From e963aa9af08122ab4adb392b0b4d67576993accd Mon Sep 17 00:00:00 2001
From: Samuel <samuelcambien@gmail.com>
Date: Thu, 18 Jun 2020 15:20:55 +0200
Subject: [PATCH 60/84] CC License Submission Step - feedback

---
 src/app/core/core.module.ts                   |  8 +-
 ...ubmission-cc-licence-link.resource-type.ts |  2 +-
 .../submission-cc-licence.resource-type.ts    |  2 +-
 .../submission-cc-license-url.model.ts        |  8 +-
 .../models}/submission-cc-license.model.ts    |  8 +-
 .../workspaceitem-section-cc-license.model.ts |  2 +-
 .../submission-cc-license-data.service.ts     | 10 +--
 .../submission-cc-license-url-data.service.ts | 10 +--
 ...mission-section-cc-licenses.component.scss |  0
 .../submission-form-collection.component.html | 90 ++++++++++---------
 ...bmission-form-collection.component.spec.ts |  6 +-
 ...mission-section-cc-licenses.component.html | 19 ++--
 ...mission-section-cc-licenses.component.scss |  3 +
 ...sion-section-cc-licenses.component.spec.ts | 24 ++---
 ...ubmission-section-cc-licenses.component.ts | 24 ++---
 src/app/submission/submission.module.ts       |  3 +-
 src/assets/i18n/en.json5                      |  4 +-
 17 files changed, 115 insertions(+), 108 deletions(-)
 rename src/app/core/{shared => submission/models}/submission-cc-licence-link.resource-type.ts (78%)
 rename src/app/core/{shared => submission/models}/submission-cc-licence.resource-type.ts (77%)
 rename src/app/core/{shared => submission/models}/submission-cc-license-url.model.ts (62%)
 rename src/app/core/{shared => submission/models}/submission-cc-license.model.ts (71%)
 rename src/app/core/{data => submission}/submission-cc-license-data.service.ts (87%)
 rename src/app/core/{data => submission}/submission-cc-license-url-data.service.ts (76%)
 delete mode 100644 src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.scss
 rename src/app/{shared/submission-section-cc-licenses => submission/sections/cc-license}/submission-section-cc-licenses.component.html (90%)
 create mode 100644 src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
 rename src/app/{shared/submission-section-cc-licenses => submission/sections/cc-license}/submission-section-cc-licenses.component.spec.ts (89%)
 rename src/app/{shared/submission-section-cc-licenses => submission/sections/cc-license}/submission-section-cc-licenses.component.ts (88%)

diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 93aa34d68d..8fe4d60260 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -145,10 +145,10 @@ import { Version } from './shared/version.model';
 import { VersionHistory } from './shared/version-history.model';
 import { WorkflowActionDataService } from './data/workflow-action-data.service';
 import { WorkflowAction } from './tasks/models/workflow-action-object.model';
-import { SubmissionCcLicenseDataService } from './data/submission-cc-license-data.service';
-import { SubmissionCcLicence } from './shared/submission-cc-license.model';
-import { SubmissionCcLicenceUrl } from './shared/submission-cc-license-url.model';
-import { SubmissionCcLicenseUrlDataService } from './data/submission-cc-license-url-data.service';
+import { SubmissionCcLicenseDataService } from './submission/submission-cc-license-data.service';
+import { SubmissionCcLicence } from './submission/models/submission-cc-license.model';
+import { SubmissionCcLicenceUrl } from './submission/models/submission-cc-license-url.model';
+import { SubmissionCcLicenseUrlDataService } from './submission/submission-cc-license-url-data.service';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
diff --git a/src/app/core/shared/submission-cc-licence-link.resource-type.ts b/src/app/core/submission/models/submission-cc-licence-link.resource-type.ts
similarity index 78%
rename from src/app/core/shared/submission-cc-licence-link.resource-type.ts
rename to src/app/core/submission/models/submission-cc-licence-link.resource-type.ts
index b96adbfe6e..b4e38970f0 100644
--- a/src/app/core/shared/submission-cc-licence-link.resource-type.ts
+++ b/src/app/core/submission/models/submission-cc-licence-link.resource-type.ts
@@ -1,4 +1,4 @@
-import { ResourceType } from './resource-type';
+import { ResourceType } from '../../shared/resource-type';
 
 /**
  * The resource type for License
diff --git a/src/app/core/shared/submission-cc-licence.resource-type.ts b/src/app/core/submission/models/submission-cc-licence.resource-type.ts
similarity index 77%
rename from src/app/core/shared/submission-cc-licence.resource-type.ts
rename to src/app/core/submission/models/submission-cc-licence.resource-type.ts
index 1e65a433f6..a15b8a0c66 100644
--- a/src/app/core/shared/submission-cc-licence.resource-type.ts
+++ b/src/app/core/submission/models/submission-cc-licence.resource-type.ts
@@ -1,4 +1,4 @@
-import { ResourceType } from './resource-type';
+import { ResourceType } from '../../shared/resource-type';
 
 /**
  * The resource type for License
diff --git a/src/app/core/shared/submission-cc-license-url.model.ts b/src/app/core/submission/models/submission-cc-license-url.model.ts
similarity index 62%
rename from src/app/core/shared/submission-cc-license-url.model.ts
rename to src/app/core/submission/models/submission-cc-license-url.model.ts
index 8ee444544c..a7c933ecb1 100644
--- a/src/app/core/shared/submission-cc-license-url.model.ts
+++ b/src/app/core/submission/models/submission-cc-license-url.model.ts
@@ -1,8 +1,8 @@
 import { autoserialize, inheritSerialization } from 'cerialize';
-import { typedObject } from '../cache/builders/build-decorators';
-import { excludeFromEquals } from '../utilities/equals.decorators';
-import { ResourceType } from './resource-type';
-import { HALResource } from './hal-resource.model';
+import { typedObject } from '../../cache/builders/build-decorators';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { ResourceType } from '../../shared/resource-type';
+import { HALResource } from '../../shared/hal-resource.model';
 import { SUBMISSION_CC_LICENSE_URL } from './submission-cc-licence-link.resource-type';
 
 @typedObject
diff --git a/src/app/core/shared/submission-cc-license.model.ts b/src/app/core/submission/models/submission-cc-license.model.ts
similarity index 71%
rename from src/app/core/shared/submission-cc-license.model.ts
rename to src/app/core/submission/models/submission-cc-license.model.ts
index 20de01a826..92c48fdbfe 100644
--- a/src/app/core/shared/submission-cc-license.model.ts
+++ b/src/app/core/submission/models/submission-cc-license.model.ts
@@ -1,8 +1,8 @@
 import { autoserialize, inheritSerialization } from 'cerialize';
-import { typedObject } from '../cache/builders/build-decorators';
-import { excludeFromEquals } from '../utilities/equals.decorators';
-import { ResourceType } from './resource-type';
-import { HALResource } from './hal-resource.model';
+import { typedObject } from '../../cache/builders/build-decorators';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { ResourceType } from '../../shared/resource-type';
+import { HALResource } from '../../shared/hal-resource.model';
 import { SUBMISSION_CC_LICENSE } from './submission-cc-licence.resource-type';
 
 @typedObject
diff --git a/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts b/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
index 9cc7af771c..ed7d68354c 100644
--- a/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
+++ b/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
@@ -1,4 +1,4 @@
-import {Option} from '../../shared/submission-cc-license.model';
+import { Option } from './submission-cc-license.model';
 
 /**
  * An interface to represent the submission's creative commons license section data.
diff --git a/src/app/core/data/submission-cc-license-data.service.ts b/src/app/core/submission/submission-cc-license-data.service.ts
similarity index 87%
rename from src/app/core/data/submission-cc-license-data.service.ts
rename to src/app/core/submission/submission-cc-license-data.service.ts
index 33e0f8ebac..5e738e0327 100644
--- a/src/app/core/data/submission-cc-license-data.service.ts
+++ b/src/app/core/submission/submission-cc-license-data.service.ts
@@ -7,11 +7,11 @@ import { RemoteDataBuildService } from '../cache/builders/remote-data-build.serv
 import { ObjectCacheService } from '../cache/object-cache.service';
 import { CoreState } from '../core.reducers';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
-import { DataService } from './data.service';
-import { RequestService } from './request.service';
-import { SUBMISSION_CC_LICENSE } from '../shared/submission-cc-licence.resource-type';
-import { Field, Option, SubmissionCcLicence } from '../shared/submission-cc-license.model';
-import { DefaultChangeAnalyzer } from './default-change-analyzer.service';
+import { DataService } from '../data/data.service';
+import { RequestService } from '../data/request.service';
+import { SUBMISSION_CC_LICENSE } from './models/submission-cc-licence.resource-type';
+import { Field, Option, SubmissionCcLicence } from './models/submission-cc-license.model';
+import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
 import {
   getRemoteDataPayload,
   getSucceededRemoteData,
diff --git a/src/app/core/data/submission-cc-license-url-data.service.ts b/src/app/core/submission/submission-cc-license-url-data.service.ts
similarity index 76%
rename from src/app/core/data/submission-cc-license-url-data.service.ts
rename to src/app/core/submission/submission-cc-license-url-data.service.ts
index 581b7e2141..08e1c16fa3 100644
--- a/src/app/core/data/submission-cc-license-url-data.service.ts
+++ b/src/app/core/submission/submission-cc-license-url-data.service.ts
@@ -7,11 +7,11 @@ import { RemoteDataBuildService } from '../cache/builders/remote-data-build.serv
 import { ObjectCacheService } from '../cache/object-cache.service';
 import { CoreState } from '../core.reducers';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
-import { DataService } from './data.service';
-import { RequestService } from './request.service';
-import { DefaultChangeAnalyzer } from './default-change-analyzer.service';
-import { SubmissionCcLicenceUrl } from '../shared/submission-cc-license-url.model';
-import { SUBMISSION_CC_LICENSE_URL } from '../shared/submission-cc-licence-link.resource-type';
+import { DataService } from '../data/data.service';
+import { RequestService } from '../data/request.service';
+import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
+import { SubmissionCcLicenceUrl } from './models/submission-cc-license-url.model';
+import { SUBMISSION_CC_LICENSE_URL } from './models/submission-cc-licence-link.resource-type';
 
 @Injectable()
 @dataService(SUBMISSION_CC_LICENSE_URL)
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.scss b/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html
index 1e3c07c703..6f4a8a864c 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.html
+++ b/src/app/submission/form/collection/submission-form-collection.component.html
@@ -1,44 +1,50 @@
-<ds-select
-  [label]="'submission.sections.general.collection'"
-  [disabled]="(disabled$ | async) || (processingChange$ | async)"
-  (toggled)="toggled($event)"
-  (close)="onClose()">
-
-  <ng-container class="selection">
-    <span *ngIf="(processingChange$ | async)">
-      <i class='fas fa-circle-notch fa-spin'></i>
-    </span>
-    <span *ngIf="!(processingChange$ | async)">
-      {{ selectedCollectionName$ | async }}
-    </span>
-  </ng-container>
-
-  <ng-container class="menu">
-    <div class="form-group w-100 pr-2 pl-2">
-      <input *ngIf="searchField"
-             type="search"
-             class="form-control w-100"
-             (click)="$event.stopPropagation();"
-             placeholder="{{ 'submission.sections.general.search-collection' | translate }}"
-             [formControl]="searchField">
+<div>
+  <div ngbDropdown #collectionControls="ngbDropdown" class="btn-group input-group" (openChange)="toggled($event)">
+    <div class="input-group-prepend">
+      <span id="collectionControlsMenuLabel" class="input-group-text">
+        {{ 'submission.sections.general.collection' | translate }}
+      </span>
     </div>
-    <div class="dropdown-divider"></div>
-    <div class="scrollable-menu" aria-labelledby="dropdownMenuButton" (scroll)="onScroll($event)">
-      <button class="dropdown-item disabled" *ngIf="(searchListCollection$ | async)?.length == 0">
-        {{'submission.sections.general.no-collection' | translate}}
-      </button>
-      <button *ngFor="let listItem of (searchListCollection$ | async)"
-              class="dropdown-item collection-item"
-              title="{{ listItem.collection.name }}"
-              (click)="onSelect(listItem)">
-        <ul class="list-unstyled mb-0">
-          <li class="list-item text-truncate text-secondary" *ngFor="let item of listItem.communities">
-            {{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
-          </li>
-          <li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.collection.name}}</li>
-        </ul>
-      </button>
-    </div>
-  </ng-container>
+    <button aria-describedby="collectionControlsMenuLabel"
+            id="collectionControlsMenuButton"
+            class="btn btn-outline-primary"
+            (blur)="onClose()"
+            (click)="onClose()"
+            [disabled]="(disabled$ | async) || (processingChange$ | async)"
+            ngbDropdownToggle>
+      <span *ngIf="(processingChange$ | async)"><i class='fas fa-circle-notch fa-spin'></i></span>
+      <span *ngIf="!(processingChange$ | async)">{{ selectedCollectionName$ | async }}</span>
+    </button>
 
-</ds-select>
+    <div ngbDropdownMenu
+         class="dropdown-menu"
+         id="collectionControlsDropdownMenu"
+         aria-labelledby="collectionControlsMenuButton">
+      <div class="form-group w-100 pr-2 pl-2">
+        <input *ngIf="searchField"
+               type="search"
+               class="form-control w-100"
+               (click)="$event.stopPropagation();"
+               placeholder="{{ 'submission.sections.general.search-collection' | translate }}"
+               [formControl]="searchField">
+      </div>
+      <div class="dropdown-divider"></div>
+      <div class="scrollable-menu" aria-labelledby="dropdownMenuButton" (scroll)="onScroll($event)">
+        <button class="dropdown-item disabled" *ngIf="(searchListCollection$ | async)?.length == 0">
+          {{'submission.sections.general.no-collection' | translate}}
+        </button>
+        <button *ngFor="let listItem of (searchListCollection$ | async)"
+                class="dropdown-item collection-item"
+                title="{{ listItem.collection.name }}"
+                (click)="onSelect(listItem)">
+          <ul class="list-unstyled mb-0">
+            <li class="list-item text-truncate text-secondary" *ngFor="let item of listItem.communities">
+              {{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
+            </li>
+            <li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.collection.name}}</li>
+          </ul>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts
index a964d9cd81..105d94b966 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts
+++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts
@@ -26,7 +26,6 @@ import { PageInfo } from '../../../core/shared/page-info.model';
 import { Collection } from '../../../core/shared/collection.model';
 import { createTestComponent } from '../../../shared/testing/utils.test';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
-import { SharedModule } from '../../../shared/shared.module';
 
 const subcommunities = [Object.assign(new Community(), {
   name: 'SubCommunity 1',
@@ -224,7 +223,6 @@ describe('SubmissionFormCollectionComponent Component', () => {
         FormsModule,
         ReactiveFormsModule,
         NgbModule,
-        SharedModule,
         TranslateModule.forRoot()
       ],
       declarations: [
@@ -368,8 +366,8 @@ describe('SubmissionFormCollectionComponent Component', () => {
 
         comp.searchListCollection$ = observableOf(mockCollectionList);
         fixture.detectChanges();
-        dropdowBtn = fixture.debugElement.query(By.css('#dsSelectMenuButton'));
-        dropdownMenu = fixture.debugElement.query(By.css('#dsSelectDropdownMenu'));
+        dropdowBtn = fixture.debugElement.query(By.css('#collectionControlsMenuButton'));
+        dropdownMenu = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu'));
       });
 
       it('should have dropdown menu closed', () => {
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
similarity index 90%
rename from src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
rename to src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
index 6818b4d254..d862cb598a 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.html
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
@@ -1,11 +1,10 @@
 <div class="mb-4 ccLicense-select">
   <ds-select
-    [disabled]="!submissionCcLicenses"
-    [label]="'submission.sections.ccLicense.type'">
+    [disabled]="!submissionCcLicenses">
 
     <ng-container class="selection">
       <span *ngIf="!submissionCcLicenses">
-        <i class='fas fa-circle-notch fa-spin'></i>
+        <ds-loading></ds-loading>
       </span>
       <span *ngIf="getSelectedCcLicense()">
         {{ getSelectedCcLicense().name }}
@@ -92,11 +91,13 @@
         </span>
       </ng-container>
       <ng-container class="menu">
-        <button *ngFor="let option of field.enums"
-                class="dropdown-item"
-                (click)="selectOption(getSelectedCcLicense(), field, option)">
-          {{ option.label }}
-        </button>
+        <div class="options-select-menu overflow-auto">
+          <button *ngFor="let option of field.enums"
+                  class="dropdown-item"
+                  (click)="selectOption(getSelectedCcLicense(), field, option)">
+            {{ option.label }}
+          </button>
+        </div>
       </ng-container>
     </ds-select>
 
@@ -120,7 +121,7 @@
 <ng-container *ngIf="getCcLicenseLink$()">
   <ng-container *ngVar="getCcLicenseLink$() | async as licenseLink">
     <div *ngIf="!licenseLink">
-      <i class='fas fa-circle-notch fa-spin m-2'></i>
+      <ds-loading></ds-loading>
     </div>
     <div *ngIf="licenseLink"
          class="mt-2 p-4 bg-light text-dark">
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
new file mode 100644
index 0000000000..62a902b79a
--- /dev/null
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
@@ -0,0 +1,3 @@
+.options-select-menu {
+  max-height: 25vh;
+}
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
similarity index 89%
rename from src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
rename to src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
index 78ea927af6..a69ab2971d 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.spec.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
@@ -1,22 +1,22 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SubmissionSectionCcLicensesComponent } from './submission-section-cc-licenses.component';
-import { SUBMISSION_CC_LICENSE } from '../../core/shared/submission-cc-licence.resource-type';
+import { SUBMISSION_CC_LICENSE } from '../../../core/submission/models/submission-cc-licence.resource-type';
 import { of as observableOf } from 'rxjs';
-import { SubmissionCcLicenseDataService } from '../../core/data/submission-cc-license-data.service';
+import { SubmissionCcLicenseDataService } from '../../../core/submission/submission-cc-license-data.service';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { SharedModule } from '../shared.module';
-import { SectionsService } from '../../submission/sections/sections.service';
-import { SectionDataObject } from '../../submission/sections/models/section-data.model';
-import { SectionsType } from '../../submission/sections/sections-type';
-import { RemoteData } from '../../core/data/remote-data';
+import { SharedModule } from '../../../shared/shared.module';
+import { SectionsService } from '../sections.service';
+import { SectionDataObject } from '../models/section-data.model';
+import { SectionsType } from '../sections-type';
+import { RemoteData } from '../../../core/data/remote-data';
 import { TranslateModule } from '@ngx-translate/core';
-import { PageInfo } from '../../core/shared/page-info.model';
-import { PaginatedList } from '../../core/data/paginated-list';
-import { SubmissionCcLicence } from '../../core/shared/submission-cc-license.model';
+import { PageInfo } from '../../../core/shared/page-info.model';
+import { PaginatedList } from '../../../core/data/paginated-list';
+import { SubmissionCcLicence } from '../../../core/submission/models/submission-cc-license.model';
 import { cold } from 'jasmine-marbles';
-import { JsonPatchOperationsBuilder } from '../../core/json-patch/builder/json-patch-operations-builder';
-import { SubmissionCcLicenseUrlDataService } from '../../core/data/submission-cc-license-url-data.service';
+import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
+import { SubmissionCcLicenseUrlDataService } from '../../../core/submission/submission-cc-license-url-data.service';
 
 describe('SubmissionSectionCcLicensesComponent', () => {
 
diff --git a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
similarity index 88%
rename from src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
rename to src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index 6c3d52de55..d2aa78d030 100644
--- a/src/app/shared/submission-section-cc-licenses/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -1,19 +1,19 @@
 import { Component, Inject } from '@angular/core';
 import { Observable, of as observableOf, Subscription } from 'rxjs';
-import { Field, Option, SubmissionCcLicence } from '../../core/shared/submission-cc-license.model';
-import { getRemoteDataPayload, getSucceededRemoteData } from '../../core/shared/operators';
+import { Field, Option, SubmissionCcLicence } from '../../../core/submission/models/submission-cc-license.model';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
 import { distinctUntilChanged, filter, map } from 'rxjs/operators';
-import { SubmissionCcLicenseDataService } from '../../core/data/submission-cc-license-data.service';
+import { SubmissionCcLicenseDataService } from '../../../core/submission/submission-cc-license-data.service';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { renderSectionFor } from '../../submission/sections/sections-decorator';
-import { SectionsType } from '../../submission/sections/sections-type';
-import { SectionModelComponent } from '../../submission/sections/models/section.model';
-import { SectionDataObject } from '../../submission/sections/models/section-data.model';
-import { SectionsService } from '../../submission/sections/sections.service';
-import { WorkspaceitemSectionCcLicenseObject } from '../../core/submission/models/workspaceitem-section-cc-license.model';
-import { JsonPatchOperationPathCombiner } from '../../core/json-patch/builder/json-patch-operation-path-combiner';
-import { isNotEmpty } from '../empty.util';
-import { JsonPatchOperationsBuilder } from '../../core/json-patch/builder/json-patch-operations-builder';
+import { renderSectionFor } from '../sections-decorator';
+import { SectionsType } from '../sections-type';
+import { SectionModelComponent } from '../models/section.model';
+import { SectionDataObject } from '../models/section-data.model';
+import { SectionsService } from '../sections.service';
+import { WorkspaceitemSectionCcLicenseObject } from '../../../core/submission/models/workspaceitem-section-cc-license.model';
+import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
+import { isNotEmpty } from '../../../shared/empty.util';
+import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
 
 /**
  * This component represents the submission section to select the Creative Commons license.
diff --git a/src/app/submission/submission.module.ts b/src/app/submission/submission.module.ts
index dc38c976e0..93bf06b193 100644
--- a/src/app/submission/submission.module.ts
+++ b/src/app/submission/submission.module.ts
@@ -28,8 +28,7 @@ import { SubmissionSectionUploadFileViewComponent } from './sections/upload/file
 import { SubmissionSectionUploadAccessConditionsComponent } from './sections/upload/accessConditions/submission-section-upload-access-conditions.component';
 import { SubmissionSubmitComponent } from './submit/submission-submit.component';
 import { storeModuleConfig } from '../app.reducer';
-import { CoreState } from '../core/core.reducers';
-import { SubmissionSectionCcLicensesComponent } from '../shared/submission-section-cc-licenses/submission-section-cc-licenses.component';
+import { SubmissionSectionCcLicensesComponent } from './sections/cc-license/submission-section-cc-licenses.component';
 
 @NgModule({
   imports: [
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index f60ef5c08b..5d1ae0f9f9 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2537,9 +2537,9 @@
 
   "submission.sections.ccLicense.type": "License Type",
 
-  "submission.sections.ccLicense.select": "Select a license…",
+  "submission.sections.ccLicense.select": "Select a license type…",
 
-  "submission.sections.ccLicense.change": "Change your license…",
+  "submission.sections.ccLicense.change": "Change your license type…",
 
   "submission.sections.ccLicense.none": "No licenses available",
 

From 9677e053f5bf3964c9a343faf415e814f28772df Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Fri, 26 Jun 2020 14:27:28 +0200
Subject: [PATCH 61/84] solved merge issues

---
 src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts | 4 ++--
 src/main.browser.ts                                       | 2 ++
 src/test.ts                                               | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts
index 7137d30cc1..6b640a9db0 100644
--- a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts
+++ b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts
@@ -31,8 +31,8 @@ describe('I18nBreadcrumbResolver', () => {
     });
 
     it('should resolve the breadcrumb config', () => {
-      const resolvedConfig = resolver.resolve({ data: { breadcrumbKey: i18nKey }, url: [path], pathFromRoot: [{ url: [path] }] } as any, {} as any);
-      const expectedConfig = { provider: i18nBreadcrumbService, key: i18nKey, url: path };
+      const resolvedConfig = resolver.resolve(route, {} as any);
+      const expectedConfig = { provider: i18nBreadcrumbService, key: i18nKey, url: expectedPath };
       expect(resolvedConfig).toEqual(expectedConfig);
     });
 
diff --git a/src/main.browser.ts b/src/main.browser.ts
index 783f6d7d06..5149014d88 100644
--- a/src/main.browser.ts
+++ b/src/main.browser.ts
@@ -50,3 +50,5 @@ if (hasValue(environment.universal) && environment.universal.preboot === false)
 } else {
   document.addEventListener('DOMContentLoaded', () => bootloader(main));
 }
+
+import 'zone.js/dist/zone';
diff --git a/src/test.ts b/src/test.ts
index 16317897b1..3406bf7d5a 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -18,3 +18,4 @@ getTestBed().initTestEnvironment(
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
+

From 32c8d9de035f339cc5aed63749dbd5e3e8e1720d Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Fri, 26 Jun 2020 15:27:48 +0200
Subject: [PATCH 62/84] scripts & processes improvements

---
 .../detail/process-detail.component.html      | 12 ++++
 .../new/new-process.component.spec.ts         |  4 ++
 .../process-page/new/new-process.component.ts | 18 ++++-
 .../overview/process-overview.component.html  | 67 ++++++++++---------
 src/assets/i18n/en.json5                      |  8 +++
 5 files changed, 76 insertions(+), 33 deletions(-)

diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index b93ad22d0c..f274469f0d 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -18,6 +18,18 @@
     </ds-process-detail-field>
   </div>
 
+  <ds-process-detail-field *ngIf="process && process.startTime" id="process-start-time" [title]="'process.detail.start-time' | translate">
+    <div>{{ process.startTime }}</div>
+  </ds-process-detail-field>
+
+  <ds-process-detail-field *ngIf="process && process.endTime"  id="process-end-time" [title]="'process.detail.end-time' | translate">
+    <div>{{ process.endTime }}</div>
+  </ds-process-detail-field>
+
+  <ds-process-detail-field *ngIf="process && process.processStatus"  id="process-status" [title]="'process.detail.status' | translate">
+    <div>{{ process.processStatus }}</div>
+  </ds-process-detail-field>
+
   <!--<ds-process-detail-field id="process-output" [title]="'process.detail.output'">-->
     <!--<pre class="font-weight-bold text-secondary bg-light p-3">{{'process.detail.output.alert' | translate}}</pre>-->
   <!--</ds-process-detail-field>-->
diff --git a/src/app/process-page/new/new-process.component.spec.ts b/src/app/process-page/new/new-process.component.spec.ts
index ae7a965ee1..826f2744ff 100644
--- a/src/app/process-page/new/new-process.component.spec.ts
+++ b/src/app/process-page/new/new-process.component.spec.ts
@@ -12,6 +12,8 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { of as observableOf } from 'rxjs';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { RequestService } from '../../core/data/request.service';
+import { Router } from '@angular/router';
 
 describe('NewProcessComponent', () => {
   let component: NewProcessComponent;
@@ -57,6 +59,8 @@ describe('NewProcessComponent', () => {
       providers: [
         { provide: ScriptDataService, useValue: scriptService },
         { provide: NotificationsService, useClass: NotificationsServiceStub },
+        { provide: RequestService, useValue: {} },
+        { provide: Router, useValue: {} },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
index 9d45354651..8bd5232e6d 100644
--- a/src/app/process-page/new/new-process.component.ts
+++ b/src/app/process-page/new/new-process.component.ts
@@ -9,7 +9,8 @@ import { RequestEntry } from '../../core/data/request.reducer';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 import { take } from 'rxjs/operators';
-import { pipe } from 'rxjs';
+import { RequestService } from '../../core/data/request.service';
+import { Router } from '@angular/router';
 
 /**
  * Component to create a new script
@@ -45,7 +46,12 @@ export class NewProcessComponent implements OnInit {
    */
   public missingParameters = [];
 
-  constructor(private scriptService: ScriptDataService, private notificationsService: NotificationsService, private translationService: TranslateService) {
+  constructor(
+    private scriptService: ScriptDataService,
+    private notificationsService: NotificationsService,
+    private translationService: TranslateService,
+    private requestService: RequestService,
+    private router: Router) {
   }
 
   ngOnInit(): void {
@@ -75,6 +81,7 @@ export class NewProcessComponent implements OnInit {
           const title = this.translationService.get('process.new.notification.success.title');
           const content = this.translationService.get('process.new.notification.success.content');
           this.notificationsService.success(title, content)
+          this.sendBack();
         } else {
           const title = this.translationService.get('process.new.notification.error.title');
           const content = this.translationService.get('process.new.notification.error.content');
@@ -123,6 +130,13 @@ export class NewProcessComponent implements OnInit {
     }
     return this.missingParameters.length > 0;
   }
+
+  private sendBack() {
+    this.requestService.removeByHrefSubstring('/processes');
+    /* should subscribe on the previous method to know the action is finished and then navigate,
+    will fix this when the removeByHrefSubstring changes are merged */
+    this.router.navigateByUrl('/processes');
+  }
 }
 
 export function controlContainerFactory(controlContainer?: ControlContainer) {
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index 6992286d95..30eb44430e 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -1,33 +1,38 @@
 <div class="container">
-  <h2>{{'process.overview.title' | translate}}</h2>
-  <ds-pagination  *ngIf="(processesRD$ | async)?.payload?.totalElements > 0"
-                  [paginationOptions]="pageConfig"
-                  [pageInfoState]="(processesRD$ | async)?.payload"
-                  [collectionSize]="(processesRD$ | async)?.payload?.totalElements"
-                  [hideGear]="true"
-                  [hidePagerWhenSinglePage]="true"
-                  (pageChange)="onPageChange($event)">
-    <table class="table table-striped table-hover table-responsive">
-      <thead>
-        <tr>
-          <th scope="col">{{'process.overview.table.id' | translate}}</th>
-          <th scope="col">{{'process.overview.table.name' | translate}}</th>
-          <th scope="col">{{'process.overview.table.user' | translate}}</th>
-          <th scope="col">{{'process.overview.table.start' | translate}}</th>
-          <th scope="col">{{'process.overview.table.finish' | translate}}</th>
-          <th scope="col">{{'process.overview.table.status' | translate}}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let process of (processesRD$ | async)?.payload?.page">
-          <td><a [routerLink]="['/processes/', process.processId]">{{process.processId}}</a></td>
-          <td><a [routerLink]="['/processes/', process.processId]">{{process.scriptName}}</a></td>
-          <td *ngVar="(getEpersonName(process.userId) | async) as ePersonName">{{ePersonName}}</td>
-          <td>{{process.startTime | date:dateFormat}}</td>
-          <td>{{process.endTime | date:dateFormat}}</td>
-          <td>{{process.processStatus}}</td>
-        </tr>
-      </tbody>
-    </table>
-  </ds-pagination>
+    <div class="d-flex">
+        <h2 class="flex-grow-1">{{'process.overview.title' | translate}}</h2>
+        <button class="btn btn-lg btn-success " routerLink="/processes/new"><i class="fas fa-plus pr-2"></i>{{'process.overview.new' | translate}}</button>
+    </div>
+    <ds-pagination *ngIf="(processesRD$ | async)?.payload?.totalElements > 0"
+                   [paginationOptions]="pageConfig"
+                   [pageInfoState]="(processesRD$ | async)?.payload"
+                   [collectionSize]="(processesRD$ | async)?.payload?.totalElements"
+                   [hideGear]="true"
+                   [hidePagerWhenSinglePage]="true"
+                   (pageChange)="onPageChange($event)">
+        <div class="table-responsive">
+            <table class="table table-striped table-hover">
+                <thead>
+                <tr>
+                    <th scope="col">{{'process.overview.table.id' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.name' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.user' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.start' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.finish' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.status' | translate}}</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngFor="let process of (processesRD$ | async)?.payload?.page">
+                    <td><a [routerLink]="['/processes/', process.processId]">{{process.processId}}</a></td>
+                    <td><a [routerLink]="['/processes/', process.processId]">{{process.scriptName}}</a></td>
+                    <td *ngVar="(getEpersonName(process.userId) | async) as ePersonName">{{ePersonName}}</td>
+                    <td>{{process.startTime | date:dateFormat}}</td>
+                    <td>{{process.endTime | date:dateFormat}}</td>
+                    <td>{{process.processStatus}}</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </ds-pagination>
 </div>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index d6becf67c9..05f9cb6f63 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1965,6 +1965,12 @@
 
   "process.detail.title" : "Process: {{ id }} - {{ name }}",
 
+  "process.detail.start-time" : "Start time",
+
+  "process.detail.end-time" : "Finish time",
+
+  "process.detail.status" : "Status",
+
 
 
   "process.overview.table.finish" : "Finish time",
@@ -1983,6 +1989,8 @@
 
   "process.overview.breadcrumbs": "Processes Overview",
 
+  "process.overview.new": "New",
+
 
   "profile.breadcrumbs": "Update Profile",
 

From 02ddf7c8c532060b75c29bfbb05ea18c43e238f2 Mon Sep 17 00:00:00 2001
From: Samuel <samuelcambien@gmail.com>
Date: Fri, 26 Jun 2020 16:58:45 +0200
Subject: [PATCH 63/84] CC License Submission Step - implement contract change

---
 .../submission-cc-license-data.service.ts     | 41 +----------------
 .../submission-cc-license-url-data.service.ts | 44 ++++++++++++++++++-
 ...ubmission-section-cc-licenses.component.ts |  4 +-
 3 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/src/app/core/submission/submission-cc-license-data.service.ts b/src/app/core/submission/submission-cc-license-data.service.ts
index 5e738e0327..5a3fa1ec2b 100644
--- a/src/app/core/submission/submission-cc-license-data.service.ts
+++ b/src/app/core/submission/submission-cc-license-data.service.ts
@@ -10,15 +10,8 @@ import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { DataService } from '../data/data.service';
 import { RequestService } from '../data/request.service';
 import { SUBMISSION_CC_LICENSE } from './models/submission-cc-licence.resource-type';
-import { Field, Option, SubmissionCcLicence } from './models/submission-cc-license.model';
+import { SubmissionCcLicence } from './models/submission-cc-license.model';
 import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
-import {
-  getRemoteDataPayload,
-  getSucceededRemoteData,
-} from '../shared/operators';
-import { map, switchMap } from 'rxjs/operators';
-import { Observable } from 'rxjs';
-import { SubmissionCcLicenseUrlDataService } from './submission-cc-license-url-data.service';
 
 @Injectable()
 @dataService(SUBMISSION_CC_LICENSE)
@@ -35,39 +28,7 @@ export class SubmissionCcLicenseDataService extends DataService<SubmissionCcLice
     protected rdbService: RemoteDataBuildService,
     protected requestService: RequestService,
     protected store: Store<CoreState>,
-    protected submissionCcLicenseUrlDataService: SubmissionCcLicenseUrlDataService,
   ) {
     super();
   }
-
-  /**
-   * Get the link to the Creative Commons license corresponding to the given type and options.
-   * @param ccLicense   the Creative Commons license type
-   * @param options     the selected options of the license fields
-   */
-  getCcLicenseLink(ccLicense: SubmissionCcLicence, options: Map<Field, Option>): Observable<string> {
-
-    return this.getSearchByHref(
-      'rightsByQuestions',{
-        searchParams: [
-          {
-            fieldName: 'license',
-            fieldValue: ccLicense.id
-          },
-          ...ccLicense.fields.map(
-            (field) => {
-              return {
-                fieldName: `answer_${field.id}`,
-                fieldValue: options.get(field).id,
-              }
-            }),
-        ]
-      }
-    ).pipe(
-      switchMap((href) => this.submissionCcLicenseUrlDataService.findByHref(href)),
-      getSucceededRemoteData(),
-      getRemoteDataPayload(),
-      map((response) => response.url),
-    );
-  }
 }
diff --git a/src/app/core/submission/submission-cc-license-url-data.service.ts b/src/app/core/submission/submission-cc-license-url-data.service.ts
index 08e1c16fa3..fc7547b3a6 100644
--- a/src/app/core/submission/submission-cc-license-url-data.service.ts
+++ b/src/app/core/submission/submission-cc-license-url-data.service.ts
@@ -12,12 +12,17 @@ import { RequestService } from '../data/request.service';
 import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
 import { SubmissionCcLicenceUrl } from './models/submission-cc-license-url.model';
 import { SUBMISSION_CC_LICENSE_URL } from './models/submission-cc-licence-link.resource-type';
+import { Field, Option, SubmissionCcLicence } from "./models/submission-cc-license.model";
+import { Observable } from "rxjs";
+import { filter, map, switchMap } from "rxjs/operators";
+import { getRemoteDataPayload, getSucceededRemoteData } from "../shared/operators";
+import { isNotEmpty } from "../../shared/empty.util";
 
 @Injectable()
 @dataService(SUBMISSION_CC_LICENSE_URL)
 export class SubmissionCcLicenseUrlDataService extends DataService<SubmissionCcLicenceUrl> {
 
-  protected linkPath = 'submissioncclicenses';
+  protected linkPath = 'submissioncclicenseUrl-search';
 
   constructor(
     protected comparator: DefaultChangeAnalyzer<SubmissionCcLicenceUrl>,
@@ -31,4 +36,41 @@ export class SubmissionCcLicenseUrlDataService extends DataService<SubmissionCcL
   ) {
     super();
   }
+
+  /**
+   * Get the link to the Creative Commons license corresponding to the given type and options.
+   * @param ccLicense   the Creative Commons license type
+   * @param options     the selected options of the license fields
+   */
+  getCcLicenseLink(ccLicense: SubmissionCcLicence, options: Map<Field, Option>): Observable<string> {
+
+    return this.getSearchByHref(
+      'rightsByQuestions',{
+        searchParams: [
+          {
+            fieldName: 'license',
+            fieldValue: ccLicense.id
+          },
+          ...ccLicense.fields.map(
+            (field) => {
+              return {
+                fieldName: `answer_${field.id}`,
+                fieldValue: options.get(field).id,
+              }
+            }),
+        ]
+      }
+    ).pipe(
+      switchMap((href) => this.findByHref(href)),
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      map((response) => response.url),
+    );
+  }
+
+  protected getSearchEndpoint(searchMethod: string): Observable<string> {
+    return this.halService.getEndpoint(`${this.linkPath}`).pipe(
+      filter((href: string) => isNotEmpty(href)),
+      map((href: string) => `${href}/${searchMethod}`));
+  }
 }
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index d2aa78d030..d608f21fbc 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -14,6 +14,7 @@ import { WorkspaceitemSectionCcLicenseObject } from '../../../core/submission/mo
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { isNotEmpty } from '../../../shared/empty.util';
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
+import { SubmissionCcLicenseUrlDataService } from "../../../core/submission/submission-cc-license-url-data.service";
 
 /**
  * This component represents the submission section to select the Creative Commons license.
@@ -80,6 +81,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
     protected modalService: NgbModal,
     protected sectionService: SectionsService,
     protected submissionCcLicensesDataService: SubmissionCcLicenseDataService,
+    protected submissionCcLicenseUrlDataService: SubmissionCcLicenseUrlDataService,
     protected operationsBuilder: JsonPatchOperationsBuilder,
     @Inject('collectionIdProvider') public injectedCollectionId: string,
     @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
@@ -180,7 +182,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
       return undefined;
     }
     const selectedCcLicense = this.getSelectedCcLicense();
-    return this.submissionCcLicensesDataService.getCcLicenseLink(
+    return this.submissionCcLicenseUrlDataService.getCcLicenseLink(
       selectedCcLicense,
       new Map(selectedCcLicense.fields.map(
         (field) => [field, this.getSelectedOption(selectedCcLicense, field)]

From 0888d8131014e4e292afedaeecda7f9589bc710f Mon Sep 17 00:00:00 2001
From: Samuel <samuelcambien@gmail.com>
Date: Fri, 26 Jun 2020 17:30:06 +0200
Subject: [PATCH 64/84] CC License Submission Step - fix lint issues

---
 .../submission-cc-license-url-data.service.ts          | 10 +++++-----
 .../submission-section-cc-licenses.component.html      |  2 +-
 .../submission-section-cc-licenses.component.ts        |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/core/submission/submission-cc-license-url-data.service.ts b/src/app/core/submission/submission-cc-license-url-data.service.ts
index fc7547b3a6..0ec40e1403 100644
--- a/src/app/core/submission/submission-cc-license-url-data.service.ts
+++ b/src/app/core/submission/submission-cc-license-url-data.service.ts
@@ -12,11 +12,11 @@ import { RequestService } from '../data/request.service';
 import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
 import { SubmissionCcLicenceUrl } from './models/submission-cc-license-url.model';
 import { SUBMISSION_CC_LICENSE_URL } from './models/submission-cc-licence-link.resource-type';
-import { Field, Option, SubmissionCcLicence } from "./models/submission-cc-license.model";
-import { Observable } from "rxjs";
-import { filter, map, switchMap } from "rxjs/operators";
-import { getRemoteDataPayload, getSucceededRemoteData } from "../shared/operators";
-import { isNotEmpty } from "../../shared/empty.util";
+import { Field, Option, SubmissionCcLicence } from './models/submission-cc-license.model';
+import { Observable } from 'rxjs';
+import { filter, map, switchMap } from 'rxjs/operators';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../shared/operators';
+import { isNotEmpty } from '../../shared/empty.util';
 
 @Injectable()
 @dataService(SUBMISSION_CC_LICENSE_URL)
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
index d862cb598a..20743540a8 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
@@ -128,7 +128,7 @@
       <div>
         {{ 'submission.sections.ccLicense.link' | translate }}
       </div>
-      <a class="license-link" href="{{ licenseLink }}" target="_blank">
+      <a class="license-link" href="{{ licenseLink }}" target="_blank" rel="noopener noreferrer">
         {{ licenseLink }}
       </a>
       <div class="m-2">
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index d608f21fbc..97c6ba85e0 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -14,7 +14,7 @@ import { WorkspaceitemSectionCcLicenseObject } from '../../../core/submission/mo
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { isNotEmpty } from '../../../shared/empty.util';
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
-import { SubmissionCcLicenseUrlDataService } from "../../../core/submission/submission-cc-license-url-data.service";
+import { SubmissionCcLicenseUrlDataService } from '../../../core/submission/submission-cc-license-url-data.service';
 
 /**
  * This component represents the submission section to select the Creative Commons license.

From 1cb0bb72e4af2192a43ac0cac3451cdccc3165f6 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Mon, 29 Jun 2020 22:17:41 +0200
Subject: [PATCH 65/84] added create-from functionality

---
 .../detail/process-detail.component.html      |  62 ++++----
 .../form/process-form.component.html          |  25 +++
 .../process-form.component.scss}              |   0
 .../form/process-form.component.spec.ts       |  86 +++++++++++
 .../form/process-form.component.ts            | 146 ++++++++++++++++++
 .../parameter-select.component.html           |   2 +-
 .../parameter-select.component.scss}          |   0
 .../parameter-select.component.spec.ts        |   0
 .../parameter-select.component.ts             |  18 +--
 .../boolean-value-input.component.html        |   0
 .../boolean-value-input.component.scss}       |   0
 .../boolean-value-input.component.spec.ts     |   0
 .../boolean-value-input.component.ts          |   2 +-
 .../date-value-input.component.html           |   0
 .../date-value-input.component.scss}          |   0
 .../date-value-input.component.spec.ts        |   0
 .../date-value-input.component.ts             |   9 +-
 .../file-value-input.component.html           |   0
 .../file-value-input.component.scss           |   0
 .../file-value-input.component.spec.ts        |   0
 .../file-value-input.component.ts             |   2 +-
 .../parameter-value-input.component.html      |   7 +
 .../parameter-value-input.component.scss}     |   0
 .../parameter-value-input.component.spec.ts   |   0
 .../parameter-value-input.component.ts        |   4 +-
 .../string-value-input.component.html         |   0
 .../string-value-input.component.scss}        |   0
 .../string-value-input.component.spec.ts      |   0
 .../string-value-input.component.ts           |   9 +-
 .../value-input.component.ts                  |   0
 .../process-parameters.component.html         |   0
 .../process-parameters.component.scss}        |   0
 .../process-parameters.component.spec.ts      |   0
 .../process-parameters.component.ts           |  23 ++-
 .../script-help/script-help.component.html    |   0
 .../script-help/script-help.component.scss}   |   0
 .../script-help/script-help.component.spec.ts |   0
 .../script-help/script-help.component.ts      |   0
 .../scripts-select.component.html             |   0
 .../scripts-select.component.scss             |   0
 .../scripts-select.component.spec.ts          |   0
 .../scripts-select.component.ts               |  17 +-
 .../new/new-process.component.html            |  31 +---
 .../new/new-process.component.spec.ts         |  18 +--
 .../process-page/new/new-process.component.ts | 144 +++--------------
 .../parameter-value-input.component.html      |   7 -
 src/app/process-page/process-page.module.ts   |  22 +--
 .../process-page/processes/process.model.ts   |   3 +-
 src/app/shared/testing/test-module.ts         |   6 +-
 src/assets/i18n/en.json5                      |   2 +
 50 files changed, 408 insertions(+), 237 deletions(-)
 create mode 100644 src/app/process-page/form/process-form.component.html
 rename src/app/process-page/{new/process-parameters/parameter-select/parameter-select.component.scss => form/process-form.component.scss} (100%)
 create mode 100644 src/app/process-page/form/process-form.component.spec.ts
 create mode 100644 src/app/process-page/form/process-form.component.ts
 rename src/app/process-page/{new => form}/process-parameters/parameter-select/parameter-select.component.html (75%)
 rename src/app/process-page/{new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss => form/process-parameters/parameter-select/parameter-select.component.scss} (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-select/parameter-select.component.spec.ts (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-select/parameter-select.component.ts (86%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html (100%)
 rename src/app/process-page/{new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss => form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss} (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts (90%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html (100%)
 rename src/app/process-page/{new/process-parameters/parameter-value-input/parameter-value-input.component.scss => form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss} (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts (75%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts (91%)
 create mode 100644 src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html
 rename src/app/process-page/{new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss => form/process-parameters/parameter-value-input/parameter-value-input.component.scss} (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/parameter-value-input.component.ts (91%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html (100%)
 rename src/app/process-page/{new/process-parameters/process-parameters.component.scss => form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss} (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts (100%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts (76%)
 rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/value-input.component.ts (100%)
 rename src/app/process-page/{new => form}/process-parameters/process-parameters.component.html (100%)
 rename src/app/process-page/{new/script-help/script-help.component.scss => form/process-parameters/process-parameters.component.scss} (100%)
 rename src/app/process-page/{new => form}/process-parameters/process-parameters.component.spec.ts (100%)
 rename src/app/process-page/{new => form}/process-parameters/process-parameters.component.ts (84%)
 rename src/app/process-page/{new => form}/script-help/script-help.component.html (100%)
 rename src/app/process-page/{new/scripts-select/scripts-select.component.scss => form/script-help/script-help.component.scss} (100%)
 rename src/app/process-page/{new => form}/script-help/script-help.component.spec.ts (100%)
 rename src/app/process-page/{new => form}/script-help/script-help.component.ts (100%)
 rename src/app/process-page/{new => form}/scripts-select/scripts-select.component.html (100%)
 create mode 100644 src/app/process-page/form/scripts-select/scripts-select.component.scss
 rename src/app/process-page/{new => form}/scripts-select/scripts-select.component.spec.ts (100%)
 rename src/app/process-page/{new => form}/scripts-select/scripts-select.component.ts (83%)
 delete mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html

diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index f274469f0d..eb6d0a6674 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -1,38 +1,42 @@
 <div class="container" *ngVar="(processRD$ | async)?.payload as process">
-  <h2>{{'process.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}</h2>
-
-  <ds-process-detail-field id="process-name" [title]="'process.detail.script'">
-    <div>{{ process?.scriptName }}</div>
-  </ds-process-detail-field>
-
-  <ds-process-detail-field *ngIf="process?.parameters && process?.parameters?.length > 0" id="process-arguments" [title]="'process.detail.arguments'">
-    <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
-  </ds-process-detail-field>
-
-  <div *ngVar="(filesRD$ | async)?.payload?.page as files">
-    <ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files" [title]="'process.detail.output-files'">
-      <div *ngFor="let file of files">
-        <span><a [href]="file?._links?.content?.href">{{getFileName(file)}}</a></span>
-        <span>({{file?.sizeBytes | dsFileSize}})</span>
-      </div>
+    <div class="d-flex">
+        <h2 class="flex-grow-1">{{'process.detail.title' | translate:{id: process?.processId, name: process?.scriptName} }}</h2>
+        <div>
+            <a class="btn btn-light" [routerLink]="'/processes/new'" [queryParams]="{id: process?.processId}">{{'process.detail.create' | translate}}</a>
+        </div>
+    </div>
+    <ds-process-detail-field id="process-name" [title]="'process.detail.script'">
+        <div>{{ process?.scriptName }}</div>
     </ds-process-detail-field>
-  </div>
 
-  <ds-process-detail-field *ngIf="process && process.startTime" id="process-start-time" [title]="'process.detail.start-time' | translate">
-    <div>{{ process.startTime }}</div>
-  </ds-process-detail-field>
+    <ds-process-detail-field *ngIf="process?.parameters && process?.parameters?.length > 0" id="process-arguments" [title]="'process.detail.arguments'">
+        <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
+    </ds-process-detail-field>
 
-  <ds-process-detail-field *ngIf="process && process.endTime"  id="process-end-time" [title]="'process.detail.end-time' | translate">
-    <div>{{ process.endTime }}</div>
-  </ds-process-detail-field>
+    <div *ngVar="(filesRD$ | async)?.payload?.page as files">
+        <ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files" [title]="'process.detail.output-files'">
+            <div *ngFor="let file of files">
+                <span><a [href]="file?._links?.content?.href">{{getFileName(file)}}</a></span>
+                <span>({{file?.sizeBytes | dsFileSize}})</span>
+            </div>
+        </ds-process-detail-field>
+    </div>
 
-  <ds-process-detail-field *ngIf="process && process.processStatus"  id="process-status" [title]="'process.detail.status' | translate">
-    <div>{{ process.processStatus }}</div>
-  </ds-process-detail-field>
+    <ds-process-detail-field *ngIf="process && process.startTime" id="process-start-time" [title]="'process.detail.start-time' | translate">
+        <div>{{ process.startTime }}</div>
+    </ds-process-detail-field>
 
-  <!--<ds-process-detail-field id="process-output" [title]="'process.detail.output'">-->
+    <ds-process-detail-field *ngIf="process && process.endTime" id="process-end-time" [title]="'process.detail.end-time' | translate">
+        <div>{{ process.endTime }}</div>
+    </ds-process-detail-field>
+
+    <ds-process-detail-field *ngIf="process && process.processStatus" id="process-status" [title]="'process.detail.status' | translate">
+        <div>{{ process.processStatus }}</div>
+    </ds-process-detail-field>
+
+    <!--<ds-process-detail-field id="process-output" [title]="'process.detail.output'">-->
     <!--<pre class="font-weight-bold text-secondary bg-light p-3">{{'process.detail.output.alert' | translate}}</pre>-->
-  <!--</ds-process-detail-field>-->
+    <!--</ds-process-detail-field>-->
 
-  <a class="btn btn-light mt-3" [routerLink]="'/processes'">{{'process.detail.back' | translate}}</a>
+    <a class="btn btn-light mt-3" [routerLink]="'/processes'">{{'process.detail.back' | translate}}</a>
 </div>
diff --git a/src/app/process-page/form/process-form.component.html b/src/app/process-page/form/process-form.component.html
new file mode 100644
index 0000000000..b587fe3943
--- /dev/null
+++ b/src/app/process-page/form/process-form.component.html
@@ -0,0 +1,25 @@
+<div class="container">
+    <div class="row">
+        <h2 class="col-12">
+            {{headerKey | translate}}
+        </h2>
+        <div class="col-12 col-md-6">
+            <form #form="ngForm" (ngSubmit)="submitForm(form)">
+                <ds-scripts-select [script]="selectedScript" (select)="selectedScript = $event; parameters = undefined"></ds-scripts-select>
+                <ds-process-parameters [initialParams]="parameters" [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
+                <button [routerLink]="['/processes']" class="btn btn-light float-left">{{ 'process.new.cancel' | translate }}</button>
+                <button type="submit" class="btn btn-light float-right">{{ 'process.new.submit' | translate }}</button>
+            </form>
+        </div>
+        <div class="col-12 col-md-6">
+            <ds-script-help [script]="selectedScript"></ds-script-help>
+        </div>
+    </div>
+
+    <div *ngIf="missingParameters.length > 0" class="alert alert-danger validation-error">
+        {{'process.new.parameter.required.missing' | translate}}
+        <ul>
+            <li *ngFor="let missing of missingParameters">{{missing}}</li>
+        </ul>
+    </div>
+</div>
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss b/src/app/process-page/form/process-form.component.scss
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss
rename to src/app/process-page/form/process-form.component.scss
diff --git a/src/app/process-page/form/process-form.component.spec.ts b/src/app/process-page/form/process-form.component.spec.ts
new file mode 100644
index 0000000000..78ea5fc271
--- /dev/null
+++ b/src/app/process-page/form/process-form.component.spec.ts
@@ -0,0 +1,86 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ProcessFormComponent } from './process-form.component';
+import { ScriptDataService } from '../../core/data/processes/script-data.service';
+import { ScriptParameter } from '../scripts/script-parameter.model';
+import { Script } from '../scripts/script.model';
+import { ProcessParameter } from '../processes/process-parameter.model';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { of as observableOf } from 'rxjs';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { RequestService } from '../../core/data/request.service';
+import { Router } from '@angular/router';
+
+describe('NewProcessComponent', () => {
+  let component: ProcessFormComponent;
+  let fixture: ComponentFixture<ProcessFormComponent>;
+  let scriptService;
+  let parameterValues;
+  let script;
+
+  function init() {
+    const param1 = new ScriptParameter();
+    const param2 = new ScriptParameter();
+    script = Object.assign(new Script(), { parameters: [param1, param2] });
+    parameterValues = [
+      Object.assign(new ProcessParameter(), { name: '-a', value: 'bla' }),
+      Object.assign(new ProcessParameter(), { name: '-b', value: '123' }),
+      Object.assign(new ProcessParameter(), { name: '-c', value: 'value' }),
+    ];
+    scriptService = jasmine.createSpyObj(
+      'scriptService',
+      {
+        invoke: observableOf({
+          response:
+            {
+              isSuccessful: true
+            }
+        })
+      }
+    )
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [ProcessFormComponent],
+      providers: [
+        { provide: ScriptDataService, useValue: scriptService },
+        { provide: NotificationsService, useClass: NotificationsServiceStub },
+        { provide: RequestService, useValue: {} },
+        { provide: Router, useValue: {} },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessFormComponent);
+    component = fixture.componentInstance;
+    component.parameters = parameterValues;
+    component.selectedScript = script;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call invoke on the scriptService on submit', () => {
+    component.submitForm({ invalid: false } as any);
+    expect(scriptService.invoke).toHaveBeenCalled();
+  });
+});
diff --git a/src/app/process-page/form/process-form.component.ts b/src/app/process-page/form/process-form.component.ts
new file mode 100644
index 0000000000..25c47e584b
--- /dev/null
+++ b/src/app/process-page/form/process-form.component.ts
@@ -0,0 +1,146 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Script } from '../scripts/script.model';
+import { Process } from '../processes/process.model';
+import { ProcessParameter } from '../processes/process-parameter.model';
+import { ScriptDataService } from '../../core/data/processes/script-data.service';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { ScriptParameter } from '../scripts/script-parameter.model';
+import { RequestEntry } from '../../core/data/request.reducer';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { TranslateService } from '@ngx-translate/core';
+import { take } from 'rxjs/operators';
+import { RequestService } from '../../core/data/request.service';
+import { Router } from '@angular/router';
+
+/**
+ * Component to create a new script
+ */
+@Component({
+  selector: 'ds-process-form',
+  templateUrl: './process-form.component.html',
+  styleUrls: ['./process-form.component.scss'],
+})
+export class ProcessFormComponent implements OnInit {
+  /**
+   * The currently selected script
+   */
+  @Input() public selectedScript: Script = undefined;
+
+  /**
+   * The process to create
+   */
+  @Input() public process: Process = undefined;
+
+  /**
+   * The parameter values to use to start the process
+   */
+  @Input() public parameters: ProcessParameter[];
+
+  /**
+   * Optional files that are used as parameter values
+   */
+  public files: File[] = [];
+
+  @Input() public headerKey: string;
+
+  /**
+   * Contains the missing parameters on submission
+   */
+  public missingParameters = [];
+
+  constructor(
+    private scriptService: ScriptDataService,
+    private notificationsService: NotificationsService,
+    private translationService: TranslateService,
+    private requestService: RequestService,
+    private router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.process = new Process();
+  }
+
+  /**
+   * Validates the form, sets the parameters to correct values and invokes the script with the correct parameters
+   * @param form
+   */
+  submitForm(form: NgForm) {
+    if (!this.validateForm(form) || this.isRequiredMissing()) {
+      return;
+    }
+
+    const stringParameters: ProcessParameter[] = this.parameters.map((parameter: ProcessParameter) => {
+        return {
+          name: parameter.name,
+          value: this.checkValue(parameter)
+        };
+      }
+    );
+    this.scriptService.invoke(this.selectedScript.id, stringParameters, this.files)
+      .pipe(take(1))
+      .subscribe((requestEntry: RequestEntry) => {
+        if (requestEntry.response.isSuccessful) {
+          const title = this.translationService.get('process.new.notification.success.title');
+          const content = this.translationService.get('process.new.notification.success.content');
+          this.notificationsService.success(title, content)
+          this.sendBack();
+        } else {
+          const title = this.translationService.get('process.new.notification.error.title');
+          const content = this.translationService.get('process.new.notification.error.content');
+          this.notificationsService.error(title, content)
+        }
+      })
+  }
+
+  /**
+   * Checks whether the parameter values are files
+   * Replaces file parameters by strings and stores the files in a separate list
+   * @param processParameter The parameter value to check
+   */
+  private checkValue(processParameter: ProcessParameter): string {
+    if (typeof processParameter.value === 'object') {
+      this.files = [...this.files, processParameter.value];
+      return processParameter.value.name;
+    }
+    return processParameter.value;
+  }
+
+  /**
+   * Validates the form
+   * Returns false if the form is invalid
+   * Returns true if the form is valid
+   * @param form The NgForm object to validate
+   */
+  private validateForm(form: NgForm) {
+    if (form.invalid) {
+      Object.keys(form.controls).forEach((key) => {
+        form.controls[key].markAsDirty();
+      });
+      return false;
+    }
+    return true;
+  }
+
+  private isRequiredMissing() {
+    const setParams: string[] = this.parameters
+      .map((param) => param.name);
+    const requiredParams: ScriptParameter[] = this.selectedScript.parameters.filter((param) => param.mandatory);
+    for (const rp of requiredParams) {
+      if (!setParams.includes(rp.name)) {
+        this.missingParameters.push(rp.name);
+      }
+    }
+    return this.missingParameters.length > 0;
+  }
+
+  private sendBack() {
+    this.requestService.removeByHrefSubstring('/processes');
+    /* should subscribe on the previous method to know the action is finished and then navigate,
+    will fix this when the removeByHrefSubstring changes are merged */
+    this.router.navigateByUrl('/processes');
+  }
+}
+
+export function controlContainerFactory(controlContainer?: ControlContainer) {
+  return controlContainer;
+}
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
similarity index 75%
rename from src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
rename to src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
index f12596c6e4..4bf06bbade 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
@@ -9,7 +9,7 @@
             {{param.nameLong || param.name}}
         </option>
     </select>
-    <ds-parameter-value-input [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col" [index]="index"></ds-parameter-value-input>
+    <ds-parameter-value-input [initialValue]="parameterValue.value" [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col" [index]="index"></ds-parameter-value-input>
     <button *ngIf="removable" class="btn btn-light col-1 remove-button" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
     <span *ngIf="!removable" class="col-1"></span>
 </div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.scss
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss
rename to src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.scss
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts
rename to src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts
similarity index 86%
rename from src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
rename to src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts
index 0c3dc0d55a..89f69c0980 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts
@@ -3,7 +3,7 @@ import { ProcessParameter } from '../../../processes/process-parameter.model';
 import { ScriptParameter } from '../../../scripts/script-parameter.model';
 import { hasNoValue } from '../../../../shared/empty.util';
 import { ControlContainer, NgForm } from '@angular/forms';
-import { controlContainerFactory } from '../../new-process.component';
+import { controlContainerFactory } from '../../process-form.component';
 
 /**
  * Component to select a single parameter for a process
@@ -12,17 +12,19 @@ import { controlContainerFactory } from '../../new-process.component';
   selector: 'ds-parameter-select',
   templateUrl: './parameter-select.component.html',
   styleUrls: ['./parameter-select.component.scss'],
-  viewProviders: [ { provide: ControlContainer,
+  viewProviders: [{
+    provide: ControlContainer,
     useFactory: controlContainerFactory,
-    deps: [[new Optional(), NgForm]] } ]
+    deps: [[new Optional(), NgForm]]
+  }]
 })
-export class ParameterSelectComponent implements OnInit {
+export class ParameterSelectComponent {
   @Input() index: number;
 
   /**
    * The current parameter value of the selected parameter
    */
-  @Input() parameterValue: ProcessParameter;
+  @Input() parameterValue: ProcessParameter = new ProcessParameter();
 
   /**
    * The available script parameters for the script
@@ -44,12 +46,6 @@ export class ParameterSelectComponent implements OnInit {
    */
   @Output() changeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
 
-  ngOnInit(): void {
-    if (hasNoValue(this.parameterValue)) {
-      this.parameterValue = new ProcessParameter();
-    }
-  }
-
   /**
    * Returns the script parameter based on the currently selected name
    */
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
rename to src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss
rename to src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
similarity index 90%
rename from src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
index 383c9e9f97..51b93cb6a1 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, Optional } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
 import { ControlContainer, NgForm } from '@angular/forms';
-import { controlContainerFactory } from '../../../new-process.component';
+import { controlContainerFactory } from '../../../process-form.component';
 
 /**
  * Represents the value of a boolean parameter
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
rename to src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.scss
rename to src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
similarity index 75%
rename from src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
index 37e6385791..600dcbb946 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit, Optional } from '@angular/core';
+import { Component, OnInit, Optional, Input } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
 import { ControlContainer, NgForm } from '@angular/forms';
-import { controlContainerFactory } from '../../../new-process.component';
+import { controlContainerFactory } from '../../../process-form.component';
 
 /**
  * Represents the user inputted value of a date parameter
@@ -19,6 +19,11 @@ export class DateValueInputComponent extends ValueInputComponent<string> {
    * The current value of the date string
    */
   value: string;
+  @Input() initialValue;
+
+  ngOnInit() {
+    this.value = this.initialValue;
+  }
 
   setValue(value) {
     this.value = value;
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
rename to src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
rename to src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
similarity index 91%
rename from src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
index b0c16eb2de..796a5de58e 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
@@ -1,7 +1,7 @@
 import { Component, Optional } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
 import { ControlContainer, NgForm } from '@angular/forms';
-import { controlContainerFactory } from '../../../new-process.component';
+import { controlContainerFactory } from '../../../process-form.component';
 
 /**
  * Represents the user inputted value of a file parameter
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html
new file mode 100644
index 0000000000..57bd4ee7e5
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html
@@ -0,0 +1,7 @@
+<div [ngSwitch]="parameter?.type">
+  <ds-string-value-input *ngSwitchCase="parameterTypes.STRING" [initialValue]="initialValue" (updateValue)="updateValue.emit($event)" [index]="index"></ds-string-value-input>
+  <ds-string-value-input *ngSwitchCase="parameterTypes.OUTPUT" [initialValue]="initialValue" (updateValue)="updateValue.emit($event)" [index]="index"></ds-string-value-input>
+  <ds-date-value-input *ngSwitchCase="parameterTypes.DATE" [initialValue]="initialValue" (updateValue)="updateValue.emit($event)" [index]="index"></ds-date-value-input>
+  <ds-file-value-input *ngSwitchCase="parameterTypes.FILE" (updateValue)="updateValue.emit($event)" [index]="index"></ds-file-value-input>
+  <ds-boolean-value-input *ngSwitchCase="parameterTypes.BOOLEAN" (updateValue)="updateValue.emit($event)" [index]="index"></ds-boolean-value-input>
+</div>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.scss
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
rename to src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.scss
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts
similarity index 91%
rename from src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts
index bcc9b49192..6626639068 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts
@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output } f
 import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
 import { ScriptParameter } from '../../../scripts/script-parameter.model';
 import { ControlContainer, NgForm } from '@angular/forms';
-import { controlContainerFactory } from '../../new-process.component';
+import { controlContainerFactory } from '../../process-form.component';
 
 /**
  * Component that renders the correct parameter value input based the script parameter's type
@@ -23,6 +23,8 @@ export class ParameterValueInputComponent {
    */
   @Input() parameter: ScriptParameter;
 
+
+  @Input() initialValue: any;
   /**
    * Emits the value of the input when its updated
    */
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
rename to src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
similarity index 100%
rename from src/app/process-page/new/process-parameters/process-parameters.component.scss
rename to src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
similarity index 76%
rename from src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
index 02a16b367b..12278a0e18 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
@@ -1,7 +1,7 @@
-import { Component, Optional } from '@angular/core';
+import { Component, Optional, Input } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
 import { ControlContainer, NgForm } from '@angular/forms';
-import { controlContainerFactory } from '../../../new-process.component';
+import { controlContainerFactory } from '../../../process-form.component';
 
 /**
  * Represents the user inputted value of a string parameter
@@ -19,7 +19,12 @@ export class StringValueInputComponent extends ValueInputComponent<string> {
    * The current value of the string
    */
   value: string;
+  @Input() initialValue;
 
+  ngOnInit() {
+    this.value = this.initialValue;
+  }
+  
   setValue(value) {
     this.value = value;
     this.updateValue.emit(value)
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/value-input.component.ts
similarity index 100%
rename from src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts
rename to src/app/process-page/form/process-parameters/parameter-value-input/value-input.component.ts
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.html b/src/app/process-page/form/process-parameters/process-parameters.component.html
similarity index 100%
rename from src/app/process-page/new/process-parameters/process-parameters.component.html
rename to src/app/process-page/form/process-parameters/process-parameters.component.html
diff --git a/src/app/process-page/new/script-help/script-help.component.scss b/src/app/process-page/form/process-parameters/process-parameters.component.scss
similarity index 100%
rename from src/app/process-page/new/script-help/script-help.component.scss
rename to src/app/process-page/form/process-parameters/process-parameters.component.scss
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts b/src/app/process-page/form/process-parameters/process-parameters.component.spec.ts
similarity index 100%
rename from src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
rename to src/app/process-page/form/process-parameters/process-parameters.component.spec.ts
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.ts b/src/app/process-page/form/process-parameters/process-parameters.component.ts
similarity index 84%
rename from src/app/process-page/new/process-parameters/process-parameters.component.ts
rename to src/app/process-page/form/process-parameters/process-parameters.component.ts
index 8df2ac4b31..4f5c61c8d7 100644
--- a/src/app/process-page/new/process-parameters/process-parameters.component.ts
+++ b/src/app/process-page/form/process-parameters/process-parameters.component.ts
@@ -4,7 +4,7 @@ import { ProcessParameter } from '../../processes/process-parameter.model';
 import { hasValue } from '../../../shared/empty.util';
 import { ControlContainer, NgForm } from '@angular/forms';
 import { ScriptParameter } from '../../scripts/script-parameter.model';
-import { controlContainerFactory } from '../new-process.component';
+import { controlContainerFactory } from '../process-form.component';
 
 /**
  * Component that represents the selected list of parameters for a script
@@ -13,15 +13,18 @@ import { controlContainerFactory } from '../new-process.component';
   selector: 'ds-process-parameters',
   templateUrl: './process-parameters.component.html',
   styleUrls: ['./process-parameters.component.scss'],
-  viewProviders: [ { provide: ControlContainer,
+  viewProviders: [{
+    provide: ControlContainer,
     useFactory: controlContainerFactory,
-    deps: [[new Optional(), NgForm]] } ]
+    deps: [[new Optional(), NgForm]]
+  }]
 })
 export class ProcessParametersComponent implements OnChanges {
   /**
    * The currently selected script
    */
   @Input() script: Script;
+  @Input() initialParams: ProcessParameter[];
   /**
    * Emits the parameter values when they're updated
    */
@@ -32,6 +35,12 @@ export class ProcessParametersComponent implements OnChanges {
    */
   parameterValues: ProcessParameter[];
 
+  ngOnInit() {
+    if (hasValue(this.initialParams)) {
+      this.parameterValues = this.initialParams;
+    }
+  }
+
   /**
    * Makes sure the parameters are reset when the script changes
    * @param changes
@@ -47,8 +56,12 @@ export class ProcessParametersComponent implements OnChanges {
    * Initializes the first parameter value
    */
   initParameters() {
-    this.parameterValues = [];
-    this.initializeParameter();
+    if (hasValue(this.initialParams)) {
+      this.parameterValues = this.initialParams;
+    } else {
+      this.parameterValues = [];
+      this.initializeParameter();
+    }
   }
 
   /**
diff --git a/src/app/process-page/new/script-help/script-help.component.html b/src/app/process-page/form/script-help/script-help.component.html
similarity index 100%
rename from src/app/process-page/new/script-help/script-help.component.html
rename to src/app/process-page/form/script-help/script-help.component.html
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.scss b/src/app/process-page/form/script-help/script-help.component.scss
similarity index 100%
rename from src/app/process-page/new/scripts-select/scripts-select.component.scss
rename to src/app/process-page/form/script-help/script-help.component.scss
diff --git a/src/app/process-page/new/script-help/script-help.component.spec.ts b/src/app/process-page/form/script-help/script-help.component.spec.ts
similarity index 100%
rename from src/app/process-page/new/script-help/script-help.component.spec.ts
rename to src/app/process-page/form/script-help/script-help.component.spec.ts
diff --git a/src/app/process-page/new/script-help/script-help.component.ts b/src/app/process-page/form/script-help/script-help.component.ts
similarity index 100%
rename from src/app/process-page/new/script-help/script-help.component.ts
rename to src/app/process-page/form/script-help/script-help.component.ts
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.html b/src/app/process-page/form/scripts-select/scripts-select.component.html
similarity index 100%
rename from src/app/process-page/new/scripts-select/scripts-select.component.html
rename to src/app/process-page/form/scripts-select/scripts-select.component.html
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.scss b/src/app/process-page/form/scripts-select/scripts-select.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
similarity index 100%
rename from src/app/process-page/new/scripts-select/scripts-select.component.spec.ts
rename to src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.ts b/src/app/process-page/form/scripts-select/scripts-select.component.ts
similarity index 83%
rename from src/app/process-page/new/scripts-select/scripts-select.component.ts
rename to src/app/process-page/form/scripts-select/scripts-select.component.ts
index 475dfd0798..98ed9f6dce 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.ts
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.ts
@@ -1,14 +1,14 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Optional, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Optional, Output } from '@angular/core';
 import { ScriptDataService } from '../../../core/data/processes/script-data.service';
 import { Script } from '../../scripts/script.model';
 import { Observable, Subscription } from 'rxjs';
+import { distinctUntilChanged, filter, map, switchMap, take } from 'rxjs/operators';
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
 import { PaginatedList } from '../../../core/data/paginated-list';
-import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { hasValue } from '../../../shared/empty.util';
-import { ControlContainer, FormControl, NgForm } from '@angular/forms';
-import { controlContainerFactory } from '../new-process.component';
+import { hasNoValue, hasValue } from '../../../shared/empty.util';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../process-form.component';
 
 const SCRIPT_QUERY_PARAMETER = 'script';
 
@@ -50,6 +50,7 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
 
     this.routeSub = this.route.queryParams
       .pipe(
+        filter((params: Params) => hasNoValue(params.id)),
         map((params: Params) => params[SCRIPT_QUERY_PARAMETER]),
         distinctUntilChanged(),
         switchMap((id: string) =>
@@ -82,11 +83,15 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
     this.router.navigate([],
       {
         queryParams: { [SCRIPT_QUERY_PARAMETER]: value },
-        queryParamsHandling: 'merge'
       }
     );
   }
 
+  @Input()
+  set script(value: Script) {
+     this._selectedScript = value;
+  }
+
   ngOnDestroy(): void {
     if (hasValue(this.routeSub)) {
       this.routeSub.unsubscribe();
diff --git a/src/app/process-page/new/new-process.component.html b/src/app/process-page/new/new-process.component.html
index f965ae43e9..f61764ffd2 100644
--- a/src/app/process-page/new/new-process.component.html
+++ b/src/app/process-page/new/new-process.component.html
@@ -1,25 +1,6 @@
-<div class="container">
-    <div class="row">
-        <h2 class="col-12">
-            {{'process.new.header' | translate}}
-        </h2>
-        <div class="col-12 col-md-6">
-            <form #form="ngForm" (ngSubmit)="submitForm(form)">
-                <ds-scripts-select (select)="selectedScript = $event"></ds-scripts-select>
-                <ds-process-parameters [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
-                <button [routerLink]="['/processes']" class="btn btn-light float-left">{{ 'process.new.cancel' | translate }}</button>
-                <button type="submit" class="btn btn-light float-right">{{ 'process.new.submit' | translate }}</button>
-            </form>
-        </div>
-        <div class="col-12 col-md-6">
-            <ds-script-help [script]="selectedScript"></ds-script-help>
-        </div>
-    </div>
-
-    <div *ngIf="missingParameters.length > 0" class="alert alert-danger validation-error">
-        {{'process.new.parameter.required.missing' | translate}}
-        <ul>
-            <li *ngFor="let missing of missingParameters">{{missing}}</li>
-        </ul>
-    </div>
-</div>
+<ng-container *ngIf="fromExisting$ && (fromExisting$ | async)">
+    <ds-process-form *ngVar="fromExisting$ | async as process" headerKey="process.new.header" [selectedScript]="script$ | async" [parameters]="process.parameters"></ds-process-form>
+</ng-container>
+<ng-container *ngIf="!fromExisting$ || !(fromExisting$ | async)">
+    <ds-process-form headerKey="process.new.header"></ds-process-form>
+</ng-container>
diff --git a/src/app/process-page/new/new-process.component.spec.ts b/src/app/process-page/new/new-process.component.spec.ts
index 826f2744ff..bb3ad24ed3 100644
--- a/src/app/process-page/new/new-process.component.spec.ts
+++ b/src/app/process-page/new/new-process.component.spec.ts
@@ -13,7 +13,10 @@ import { of as observableOf } from 'rxjs';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 import { RequestService } from '../../core/data/request.service';
-import { Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
+import { LinkService } from '../../core/cache/builders/link.service';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
 
 describe('NewProcessComponent', () => {
   let component: NewProcessComponent;
@@ -55,12 +58,14 @@ describe('NewProcessComponent', () => {
             useClass: TranslateLoaderMock
           }
         })],
-      declarations: [NewProcessComponent],
+      declarations: [NewProcessComponent, VarDirective],
       providers: [
         { provide: ScriptDataService, useValue: scriptService },
         { provide: NotificationsService, useClass: NotificationsServiceStub },
         { provide: RequestService, useValue: {} },
-        { provide: Router, useValue: {} },
+        { provide: ActivatedRoute, useValue: { snapshot: { queryParams: {} } } },
+        { provide: LinkService, useValue: {} },
+        { provide: ProcessDataService, useValue: {} },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })
@@ -70,17 +75,10 @@ describe('NewProcessComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(NewProcessComponent);
     component = fixture.componentInstance;
-    component.parameters = parameterValues;
-    component.selectedScript = script;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should call invoke on the scriptService on submit', () => {
-    component.submitForm({ invalid: false } as any);
-    expect(scriptService.invoke).toHaveBeenCalled();
-  });
 });
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
index 8bd5232e6d..882d974a6c 100644
--- a/src/app/process-page/new/new-process.component.ts
+++ b/src/app/process-page/new/new-process.component.ts
@@ -1,16 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { Script } from '../scripts/script.model';
 import { Process } from '../processes/process.model';
-import { ProcessParameter } from '../processes/process-parameter.model';
-import { ScriptDataService } from '../../core/data/processes/script-data.service';
-import { ControlContainer, NgForm } from '@angular/forms';
-import { ScriptParameter } from '../scripts/script-parameter.model';
-import { RequestEntry } from '../../core/data/request.reducer';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
-import { take } from 'rxjs/operators';
-import { RequestService } from '../../core/data/request.service';
-import { Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
+import { Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { LinkService } from '../../core/cache/builders/link.service';
+import { followLink } from '../../shared/utils/follow-link-config.model';
+import { Script } from '../scripts/script.model';
 
 /**
  * Component to create a new script
@@ -21,124 +18,23 @@ import { Router } from '@angular/router';
   styleUrls: ['./new-process.component.scss'],
 })
 export class NewProcessComponent implements OnInit {
-  /**
-   * The currently selected script
-   */
-  public selectedScript: Script;
+  fromExisting$?: Observable<Process>;
+  script$?: Observable<Script>;
 
-  /**
-   * The process to create
-   */
-  public process: Process;
+  constructor(private route: ActivatedRoute, private processService: ProcessDataService, private linkService: LinkService) {
 
-  /**
-   * The parameter values to use to start the process
-   */
-  public parameters: ProcessParameter[] = [];
-
-  /**
-   * Optional files that are used as parameter values
-   */
-  public files: File[] = [];
-
-  /**
-   * Contains the missing parameters on submission
-   */
-  public missingParameters = [];
-
-  constructor(
-    private scriptService: ScriptDataService,
-    private notificationsService: NotificationsService,
-    private translationService: TranslateService,
-    private requestService: RequestService,
-    private router: Router) {
   }
 
-  ngOnInit(): void {
-    this.process = new Process();
-  }
-
-  /**
-   * Validates the form, sets the parameters to correct values and invokes the script with the correct parameters
-   * @param form
-   */
-  submitForm(form: NgForm) {
-    if (!this.validateForm(form) || this.isRequiredMissing()) {
-      return;
+  ngOnInit() {
+    const id = this.route.snapshot.queryParams.id;
+    if (id) {
+      this.fromExisting$ = this.processService.findById(id).pipe(getFirstSucceededRemoteDataPayload());
+      this.script$ = this.fromExisting$.pipe(
+        map((process: Process) => this.linkService.resolveLink<Process>(process, followLink('script'))),
+        switchMap((process: Process) => process.script),
+        getFirstSucceededRemoteDataPayload()
+      );
     }
-
-    const stringParameters: ProcessParameter[] = this.parameters.map((parameter: ProcessParameter) => {
-        return {
-          name: parameter.name,
-          value: this.checkValue(parameter)
-        };
-      }
-    );
-    this.scriptService.invoke(this.selectedScript.id, stringParameters, this.files)
-      .pipe(take(1))
-      .subscribe((requestEntry: RequestEntry) => {
-        if (requestEntry.response.isSuccessful) {
-          const title = this.translationService.get('process.new.notification.success.title');
-          const content = this.translationService.get('process.new.notification.success.content');
-          this.notificationsService.success(title, content)
-          this.sendBack();
-        } else {
-          const title = this.translationService.get('process.new.notification.error.title');
-          const content = this.translationService.get('process.new.notification.error.content');
-          this.notificationsService.error(title, content)
-        }
-      })
-  }
-
-  /**
-   * Checks whether the parameter values are files
-   * Replaces file parameters by strings and stores the files in a separate list
-   * @param processParameter The parameter value to check
-   */
-  private checkValue(processParameter: ProcessParameter): string {
-    if (typeof processParameter.value === 'object') {
-      this.files = [...this.files, processParameter.value];
-      return processParameter.value.name;
-    }
-    return processParameter.value;
-  }
-
-  /**
-   * Validates the form
-   * Returns false if the form is invalid
-   * Returns true if the form is valid
-   * @param form The NgForm object to validate
-   */
-  private validateForm(form: NgForm) {
-    if (form.invalid) {
-      Object.keys(form.controls).forEach((key) => {
-        form.controls[key].markAsDirty();
-      });
-      return false;
-    }
-    return true;
-  }
-
-  private isRequiredMissing() {
-    const setParams: string[] = this.parameters
-      .map((param) => param.name);
-    const requiredParams: ScriptParameter[] = this.selectedScript.parameters.filter((param) => param.mandatory)
-    for (const rp of requiredParams) {
-      if (!setParams.includes(rp.name)) {
-        this.missingParameters.push(rp.name);
-      }
-    }
-    return this.missingParameters.length > 0;
-  }
-
-  private sendBack() {
-    this.requestService.removeByHrefSubstring('/processes');
-    /* should subscribe on the previous method to know the action is finished and then navigate,
-    will fix this when the removeByHrefSubstring changes are merged */
-    this.router.navigateByUrl('/processes');
   }
 }
 
-export function controlContainerFactory(controlContainer?: ControlContainer) {
-  return controlContainer;
-}
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
deleted file mode 100644
index 934c26d46d..0000000000
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div [ngSwitch]="parameter?.type">
-  <ds-string-value-input *ngSwitchCase="parameterTypes.STRING" (updateValue)="updateValue.emit($event)" [index]="index"></ds-string-value-input>
-  <ds-string-value-input *ngSwitchCase="parameterTypes.OUTPUT" (updateValue)="updateValue.emit($event)" [index]="index"></ds-string-value-input>
-  <ds-date-value-input *ngSwitchCase="parameterTypes.DATE" (updateValue)="updateValue.emit($event)" [index]="index"></ds-date-value-input>
-  <ds-file-value-input *ngSwitchCase="parameterTypes.FILE" (updateValue)="updateValue.emit($event)" [index]="index"></ds-file-value-input>
-  <ds-boolean-value-input *ngSwitchCase="parameterTypes.BOOLEAN" (updateValue)="updateValue.emit($event)" [index]="index"></ds-boolean-value-input>
-</div>
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index 5b998af820..44e3f62701 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -2,20 +2,21 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { ProcessPageRoutingModule } from './process-page-routing.module';
 import { NewProcessComponent } from './new/new-process.component';
-import { ScriptsSelectComponent } from './new/scripts-select/scripts-select.component';
-import { ScriptHelpComponent } from './new/script-help/script-help.component';
-import { ParameterSelectComponent } from './new/process-parameters/parameter-select/parameter-select.component';
-import { ProcessParametersComponent } from './new/process-parameters/process-parameters.component';
-import { StringValueInputComponent } from './new/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
-import { ParameterValueInputComponent } from './new/process-parameters/parameter-value-input/parameter-value-input.component';
-import { FileValueInputComponent } from './new/process-parameters/parameter-value-input/file-value-input/file-value-input.component';
-import { BooleanValueInputComponent } from './new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component';
-import { DateValueInputComponent } from './new/process-parameters/parameter-value-input/date-value-input/date-value-input.component';
+import { ScriptsSelectComponent } from './form/scripts-select/scripts-select.component';
+import { ScriptHelpComponent } from './form/script-help/script-help.component';
+import { ParameterSelectComponent } from './form/process-parameters/parameter-select/parameter-select.component';
+import { ProcessParametersComponent } from './form/process-parameters/process-parameters.component';
+import { StringValueInputComponent } from './form/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
+import { ParameterValueInputComponent } from './form/process-parameters/parameter-value-input/parameter-value-input.component';
+import { FileValueInputComponent } from './form/process-parameters/parameter-value-input/file-value-input/file-value-input.component';
+import { BooleanValueInputComponent } from './form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component';
+import { DateValueInputComponent } from './form/process-parameters/parameter-value-input/date-value-input/date-value-input.component';
 import { ProcessOverviewComponent } from './overview/process-overview.component';
 import { ProcessDetailComponent } from './detail/process-detail.component';
 import { ProcessDetailFieldComponent } from './detail/process-detail-field/process-detail-field.component';
 import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
 import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
+import { ProcessFormComponent } from './form/process-form.component';
 
 @NgModule({
   imports: [
@@ -35,7 +36,8 @@ import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
     DateValueInputComponent,
     ProcessOverviewComponent,
     ProcessDetailComponent,
-    ProcessDetailFieldComponent
+    ProcessDetailFieldComponent,
+    ProcessFormComponent
   ],
   providers: [
     ProcessBreadcrumbResolver,
diff --git a/src/app/process-page/processes/process.model.ts b/src/app/process-page/processes/process.model.ts
index 4d2879d3b1..cbf52701c9 100644
--- a/src/app/process-page/processes/process.model.ts
+++ b/src/app/process-page/processes/process.model.ts
@@ -13,6 +13,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { Collection } from '../../core/shared/collection.model';
 import { SCRIPT } from '../scripts/script.resource-type';
 import { Script } from '../scripts/script.model';
+import { PaginatedList } from '../../core/data/paginated-list';
 
 /**
  * Object representing a process
@@ -83,7 +84,7 @@ export class Process implements CacheableObject {
 
   /**
    * The Script that created this Process
-   * Will be undefined unless the owningCollection {@link HALLink} has been resolved.
+   * Will be undefined unless the script {@link HALLink} has been resolved.
    */
   @link(SCRIPT)
   script?: Observable<RemoteData<Script>>;
diff --git a/src/app/shared/testing/test-module.ts b/src/app/shared/testing/test-module.ts
index b2129435da..6721e3042b 100644
--- a/src/app/shared/testing/test-module.ts
+++ b/src/app/shared/testing/test-module.ts
@@ -22,7 +22,11 @@ import { RouterLinkDirectiveStub } from './router-link-directive.stub';
     MySimpleItemActionComponent,
     RouterLinkDirectiveStub,
     NgComponentOutletDirectiveStub
-  ], schemas: [
+  ],
+  exports: [
+    QueryParamsDirectiveStub
+  ],
+  schemas: [
     CUSTOM_ELEMENTS_SCHEMA
   ]
 })
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 05f9cb6f63..36c7f144fd 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1971,6 +1971,8 @@
 
   "process.detail.status" : "Status",
 
+  "process.detail.create" : "Create similar process",
+
 
 
   "process.overview.table.finish" : "Finish time",

From 3f397525507d958bb18dd2f1ed2ff43e7f11bd64 Mon Sep 17 00:00:00 2001
From: Samuel <samuelcambien@gmail.com>
Date: Tue, 30 Jun 2020 10:53:56 +0200
Subject: [PATCH 66/84] CC License Submission Step - fix tests

---
 ...sion-section-cc-licenses.component.spec.ts | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
index a69ab2971d..230c72b522 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
@@ -130,6 +130,16 @@ describe('SubmissionSectionCcLicensesComponent', () => {
   ];
 
   const submissionCcLicensesDataService = jasmine.createSpyObj('submissionCcLicensesDataService', {
+    findAll: observableOf(new RemoteData(
+      false,
+      false,
+      true,
+      undefined,
+      new PaginatedList(new PageInfo(), submissionCcLicenses),
+    )),
+  });
+
+  const submissionCcLicenseUrlDataService = jasmine.createSpyObj('submissionCcLicenseUrlDataService', {
     getCcLicenseLink: observableOf(new RemoteData(
       false,
       false,
@@ -139,13 +149,6 @@ describe('SubmissionSectionCcLicensesComponent', () => {
         url: 'test cc license link',
       }
       )),
-    findAll: observableOf(new RemoteData(
-      false,
-      false,
-      true,
-      undefined,
-      new PaginatedList(new PageInfo(), submissionCcLicenses),
-    )),
   });
 
   const sectionService = {
@@ -174,7 +177,7 @@ describe('SubmissionSectionCcLicensesComponent', () => {
       ],
       providers: [
         { provide: SubmissionCcLicenseDataService, useValue: submissionCcLicensesDataService },
-        { provide: SubmissionCcLicenseUrlDataService, useValue: {} },
+        { provide: SubmissionCcLicenseUrlDataService, useValue: submissionCcLicenseUrlDataService },
         { provide: SectionsService, useValue: sectionService },
         { provide: JsonPatchOperationsBuilder, useValue: operationsBuilder },
         { provide: 'collectionIdProvider', useValue: 'test collection id' },
@@ -240,7 +243,7 @@ describe('SubmissionSectionCcLicensesComponent', () => {
       });
 
       it('should call the submission cc licenses data service getCcLicenseLink method', () => {
-        expect(submissionCcLicensesDataService.getCcLicenseLink).toHaveBeenCalledWith(
+        expect(submissionCcLicenseUrlDataService.getCcLicenseLink).toHaveBeenCalledWith(
           ccLicence,
           new Map([
             [ccLicence.fields[0], ccLicence.fields[0].enums[1]],

From 09665dfbe24e3dbafe47d5adfd88a0c6de59e92b Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 30 Jun 2020 13:44:38 +0200
Subject: [PATCH 67/84] solved lint issues, added typedoc, fixed lgtm warnings

---
 src/app/core/data/processes/script-data.service.ts    |  2 +-
 src/app/process-page/form/process-form.component.ts   |  3 +++
 .../parameter-select/parameter-select.component.ts    |  3 +--
 .../date-value-input/date-value-input.component.ts    |  6 +++++-
 .../parameter-value-input.component.ts                |  6 ++++--
 .../string-value-input.component.ts                   |  6 +++++-
 .../process-parameters.component.ts                   |  4 ++++
 .../form/scripts-select/scripts-select.component.ts   |  6 ++++++
 src/app/process-page/new/new-process.component.ts     | 11 +++++++++--
 src/app/process-page/processes/process.model.ts       |  3 ---
 src/app/shared/utils/route.utils.ts                   |  2 +-
 src/test.ts                                           |  1 -
 12 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/app/core/data/processes/script-data.service.ts b/src/app/core/data/processes/script-data.service.ts
index b5bfca075f..6600444ea0 100644
--- a/src/app/core/data/processes/script-data.service.ts
+++ b/src/app/core/data/processes/script-data.service.ts
@@ -10,7 +10,7 @@ import { HttpClient } from '@angular/common/http';
 import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
 import { Script } from '../../../process-page/scripts/script.model';
 import { ProcessParameter } from '../../../process-page/processes/process-parameter.model';
-import { find, map, switchMap, tap } from 'rxjs/operators';
+import { find, map, switchMap } from 'rxjs/operators';
 import { URLCombiner } from '../../url-combiner/url-combiner';
 import { MultipartPostRequest, RestRequest } from '../request.models';
 import { RequestService } from '../request.service';
diff --git a/src/app/process-page/form/process-form.component.ts b/src/app/process-page/form/process-form.component.ts
index 25c47e584b..a4066a3178 100644
--- a/src/app/process-page/form/process-form.component.ts
+++ b/src/app/process-page/form/process-form.component.ts
@@ -41,6 +41,9 @@ export class ProcessFormComponent implements OnInit {
    */
   public files: File[] = [];
 
+  /**
+   * Message key for the header of the form
+   */
   @Input() public headerKey: string;
 
   /**
diff --git a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts
index 89f69c0980..e016d3442f 100644
--- a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts
@@ -1,7 +1,6 @@
-import { Component, EventEmitter, Input, OnInit, Output, Optional } from '@angular/core';
+import { Component, EventEmitter, Input, Optional, Output } from '@angular/core';
 import { ProcessParameter } from '../../../processes/process-parameter.model';
 import { ScriptParameter } from '../../../scripts/script-parameter.model';
-import { hasNoValue } from '../../../../shared/empty.util';
 import { ControlContainer, NgForm } from '@angular/forms';
 import { controlContainerFactory } from '../../process-form.component';
 
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
index 600dcbb946..7a4fbc0965 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Optional, Input } from '@angular/core';
+import { Component, Input, Optional } from '@angular/core';
 import { ValueInputComponent } from '../value-input.component';
 import { ControlContainer, NgForm } from '@angular/forms';
 import { controlContainerFactory } from '../../../process-form.component';
@@ -19,6 +19,10 @@ export class DateValueInputComponent extends ValueInputComponent<string> {
    * The current value of the date string
    */
   value: string;
+
+  /**
+   * Initial value of the field
+   */
   @Input() initialValue;
 
   ngOnInit() {
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts
index 6626639068..ec29ee5e1e 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Optional, Output } from '@angular/core';
 import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
 import { ScriptParameter } from '../../../scripts/script-parameter.model';
 import { ControlContainer, NgForm } from '@angular/forms';
@@ -23,7 +23,9 @@ export class ParameterValueInputComponent {
    */
   @Input() parameter: ScriptParameter;
 
-
+  /**
+   * Initial value for input
+   */
   @Input() initialValue: any;
   /**
    * Emits the value of the input when its updated
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
index 12278a0e18..0e55669432 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
@@ -19,12 +19,16 @@ export class StringValueInputComponent extends ValueInputComponent<string> {
    * The current value of the string
    */
   value: string;
+
+  /**
+   * Initial value of the field
+   */
   @Input() initialValue;
 
   ngOnInit() {
     this.value = this.initialValue;
   }
-  
+
   setValue(value) {
     this.value = value;
     this.updateValue.emit(value)
diff --git a/src/app/process-page/form/process-parameters/process-parameters.component.ts b/src/app/process-page/form/process-parameters/process-parameters.component.ts
index 4f5c61c8d7..dfbe078463 100644
--- a/src/app/process-page/form/process-parameters/process-parameters.component.ts
+++ b/src/app/process-page/form/process-parameters/process-parameters.component.ts
@@ -24,6 +24,10 @@ export class ProcessParametersComponent implements OnChanges {
    * The currently selected script
    */
   @Input() script: Script;
+
+  /**
+   * Initial parameters on load
+   */
   @Input() initialParams: ProcessParameter[];
   /**
    * Emits the parameter values when they're updated
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.ts b/src/app/process-page/form/scripts-select/scripts-select.component.ts
index 98ed9f6dce..1e3ecfda0d 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.ts
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.ts
@@ -24,7 +24,13 @@ const SCRIPT_QUERY_PARAMETER = 'script';
     deps: [[new Optional(), NgForm]] } ]
 })
 export class ScriptsSelectComponent implements OnInit, OnDestroy {
+  /**
+   * Emits the selected script when the selection changes
+   */
   @Output() select: EventEmitter<Script> = new EventEmitter<Script>();
+  /**
+   * All available scripts
+   */
   scripts$: Observable<Script[]>;
   private _selectedScript: Script;
   private routeSub: Subscription;
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
index 882d974a6c..f97ce1bc6b 100644
--- a/src/app/process-page/new/new-process.component.ts
+++ b/src/app/process-page/new/new-process.component.ts
@@ -18,13 +18,21 @@ import { Script } from '../scripts/script.model';
   styleUrls: ['./new-process.component.scss'],
 })
 export class NewProcessComponent implements OnInit {
+  /**
+   * Emits preselected process if there is one
+   */
   fromExisting$?: Observable<Process>;
+  /**
+   * Emits preselected script if there is one
+   */
   script$?: Observable<Script>;
 
   constructor(private route: ActivatedRoute, private processService: ProcessDataService, private linkService: LinkService) {
-
   }
 
+  /**
+   * If there's an id parameter, use this the process with this identifier as presets for the form
+   */
   ngOnInit() {
     const id = this.route.snapshot.queryParams.id;
     if (id) {
@@ -37,4 +45,3 @@ export class NewProcessComponent implements OnInit {
     }
   }
 }
-
diff --git a/src/app/process-page/processes/process.model.ts b/src/app/process-page/processes/process.model.ts
index cbf52701c9..85de5337e7 100644
--- a/src/app/process-page/processes/process.model.ts
+++ b/src/app/process-page/processes/process.model.ts
@@ -7,13 +7,10 @@ import { PROCESS } from './process.resource-type';
 import { excludeFromEquals } from '../../core/utilities/equals.decorators';
 import { ResourceType } from '../../core/shared/resource-type';
 import { link, typedObject } from '../../core/cache/builders/build-decorators';
-import { COLLECTION } from '../../core/shared/collection.resource-type';
 import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from '../../core/data/remote-data';
-import { Collection } from '../../core/shared/collection.model';
 import { SCRIPT } from '../scripts/script.resource-type';
 import { Script } from '../scripts/script.model';
-import { PaginatedList } from '../../core/data/paginated-list';
 
 /**
  * Object representing a process
diff --git a/src/app/shared/utils/route.utils.ts b/src/app/shared/utils/route.utils.ts
index b949852b88..f43204930d 100644
--- a/src/app/shared/utils/route.utils.ts
+++ b/src/app/shared/utils/route.utils.ts
@@ -1,4 +1,4 @@
-import { ActivatedRoute, ActivatedRouteSnapshot, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { hasValue } from '../empty.util';
 import { URLCombiner } from '../../core/url-combiner/url-combiner';
 
diff --git a/src/test.ts b/src/test.ts
index 3406bf7d5a..16317897b1 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -18,4 +18,3 @@ getTestBed().initTestEnvironment(
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
-

From 0348d23aacfe5128b5edbeeaa836c85ba53b3bd3 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 30 Jun 2020 14:28:58 +0200
Subject: [PATCH 68/84] fixed remove parameter bug

---
 .../form/process-parameters/process-parameters.component.ts      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/process-page/form/process-parameters/process-parameters.component.ts b/src/app/process-page/form/process-parameters/process-parameters.component.ts
index dfbe078463..de55f9ebca 100644
--- a/src/app/process-page/form/process-parameters/process-parameters.component.ts
+++ b/src/app/process-page/form/process-parameters/process-parameters.component.ts
@@ -88,6 +88,7 @@ export class ProcessParametersComponent implements OnChanges {
    */
   removeParameter(index: number) {
     this.parameterValues = this.parameterValues.filter((value, i) => i !== index);
+    this.updateParameters.emit(this.parameterValues.filter((param: ProcessParameter) => hasValue(param.name)));
   }
 
   /**

From a8b7035aff36bf602754c8986aa8ab46f24e90dc Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 30 Jun 2020 16:02:32 +0200
Subject: [PATCH 69/84] fixed issue with validation

---
 .../form/process-form.component.html           |  2 +-
 .../form/process-form.component.spec.ts        |  4 ++--
 .../form/process-form.component.ts             | 18 ++++++++++--------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/process-page/form/process-form.component.html b/src/app/process-page/form/process-form.component.html
index b587fe3943..ce6d62efec 100644
--- a/src/app/process-page/form/process-form.component.html
+++ b/src/app/process-page/form/process-form.component.html
@@ -16,7 +16,7 @@
         </div>
     </div>
 
-    <div *ngIf="missingParameters.length > 0" class="alert alert-danger validation-error">
+    <div *ngIf="missingParameters.length > 0" class="mt-3 alert alert-danger validation-error">
         {{'process.new.parameter.required.missing' | translate}}
         <ul>
             <li *ngFor="let missing of missingParameters">{{missing}}</li>
diff --git a/src/app/process-page/form/process-form.component.spec.ts b/src/app/process-page/form/process-form.component.spec.ts
index 78ea5fc271..e1871fbd2b 100644
--- a/src/app/process-page/form/process-form.component.spec.ts
+++ b/src/app/process-page/form/process-form.component.spec.ts
@@ -15,7 +15,7 @@ import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 import { RequestService } from '../../core/data/request.service';
 import { Router } from '@angular/router';
 
-describe('NewProcessComponent', () => {
+describe('ProcessFormComponent', () => {
   let component: ProcessFormComponent;
   let fixture: ComponentFixture<ProcessFormComponent>;
   let scriptService;
@@ -80,7 +80,7 @@ describe('NewProcessComponent', () => {
   });
 
   it('should call invoke on the scriptService on submit', () => {
-    component.submitForm({ invalid: false } as any);
+    component.submitForm({ controls: {} } as any);
     expect(scriptService.invoke).toHaveBeenCalled();
   });
 });
diff --git a/src/app/process-page/form/process-form.component.ts b/src/app/process-page/form/process-form.component.ts
index a4066a3178..ee7d7d85d2 100644
--- a/src/app/process-page/form/process-form.component.ts
+++ b/src/app/process-page/form/process-form.component.ts
@@ -85,12 +85,12 @@ export class ProcessFormComponent implements OnInit {
         if (requestEntry.response.isSuccessful) {
           const title = this.translationService.get('process.new.notification.success.title');
           const content = this.translationService.get('process.new.notification.success.content');
-          this.notificationsService.success(title, content)
+          this.notificationsService.success(title, content);
           this.sendBack();
         } else {
           const title = this.translationService.get('process.new.notification.error.title');
           const content = this.translationService.get('process.new.notification.error.content');
-          this.notificationsService.error(title, content)
+          this.notificationsService.error(title, content);
         }
       })
   }
@@ -115,16 +115,18 @@ export class ProcessFormComponent implements OnInit {
    * @param form The NgForm object to validate
    */
   private validateForm(form: NgForm) {
-    if (form.invalid) {
-      Object.keys(form.controls).forEach((key) => {
+    let valid = true;
+    Object.keys(form.controls).forEach((key) => {
+      if (form.controls[key].invalid) {
         form.controls[key].markAsDirty();
-      });
-      return false;
-    }
-    return true;
+        valid = false;
+      }
+    });
+    return valid;
   }
 
   private isRequiredMissing() {
+    this.missingParameters = [];
     const setParams: string[] = this.parameters
       .map((param) => param.name);
     const requiredParams: ScriptParameter[] = this.selectedScript.parameters.filter((param) => param.mandatory);

From ea28998bc1ffc4c1ab3af315cd313efa9355a5fe Mon Sep 17 00:00:00 2001
From: Samuel <samuelcambien@gmail.com>
Date: Tue, 30 Jun 2020 17:31:32 +0200
Subject: [PATCH 70/84] CC License Submission Step - fix tests bis

---
 src/app/community-list-page/community-list-service.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/community-list-page/community-list-service.spec.ts b/src/app/community-list-page/community-list-service.spec.ts
index f4955b2a36..e1a0f5c17f 100644
--- a/src/app/community-list-page/community-list-service.spec.ts
+++ b/src/app/community-list-page/community-list-service.spec.ts
@@ -450,7 +450,7 @@ describe('CommunityListService', () => {
         });
         let flatNodeList;
         describe('should return list containing only flatnode corresponding to that community', () => {
-          beforeAll((done) => {
+          beforeEach((done) => {
             service.transformCommunity(communityWithSubcoms, 0, null, null)
               .pipe(take(1))
               .subscribe((value) => {

From 5b46ec15708dfae270db73d165a8f771f3c10e49 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 30 Jun 2020 19:06:46 +0200
Subject: [PATCH 71/84] fixed test issue

---
 src/app/process-page/form/process-form.component.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/process-page/form/process-form.component.spec.ts b/src/app/process-page/form/process-form.component.spec.ts
index e1871fbd2b..12326111da 100644
--- a/src/app/process-page/form/process-form.component.spec.ts
+++ b/src/app/process-page/form/process-form.component.spec.ts
@@ -59,7 +59,7 @@ describe('ProcessFormComponent', () => {
       providers: [
         { provide: ScriptDataService, useValue: scriptService },
         { provide: NotificationsService, useClass: NotificationsServiceStub },
-        { provide: RequestService, useValue: {} },
+        { provide: RequestService, useValue: jasmine.createSpyObj('requestService', ['removeBySubstring']) },
         { provide: Router, useValue: {} },
       ],
       schemas: [NO_ERRORS_SCHEMA]

From 71da279d2fd2ed5ccdfa26abd9eaa27781d5d57a Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Wed, 1 Jul 2020 13:09:55 +0200
Subject: [PATCH 72/84] 70597: Build fix

---
 src/app/core/data/item-template-data.service.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
index 69e7ae91b1..d157c09a7c 100644
--- a/src/app/core/data/item-template-data.service.ts
+++ b/src/app/core/data/item-template-data.service.ts
@@ -109,7 +109,7 @@ class DataServiceImpl extends ItemDataService {
    * @param item
    * @param collectionID
    */
-  create(item: Item, collectionID: string): Observable<RemoteData<Item>> {
+  createTemplate(item: Item, collectionID: string): Observable<RemoteData<Item>> {
     this.setCollectionEndpoint(collectionID);
     return super.create(item);
   }
@@ -179,7 +179,7 @@ export class ItemTemplateDataService implements UpdateDataService<Item> {
    * @param collectionID
    */
   create(item: Item, collectionID: string): Observable<RemoteData<Item>> {
-    return this.dataService.create(item, collectionID);
+    return this.dataService.createTemplate(item, collectionID);
   }
 
   /**

From e0990aeb4bcaa334b0ae0e0cb7043e6ee5069e0f Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Wed, 1 Jul 2020 14:07:15 +0200
Subject: [PATCH 73/84] 65272: Test fixes

---
 .../collection-metadata.component.spec.ts         |  2 +-
 .../edit-item-template-page.component.spec.ts     |  2 +-
 .../core/data/item-template-data.service.spec.ts  | 15 +++++++++------
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
index 2ee552c251..aec843afa3 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
@@ -14,7 +14,7 @@ import { ItemTemplateDataService } from '../../../core/data/item-template-data.s
 import { Collection } from '../../../core/shared/collection.model';
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
 import { RequestService } from '../../../core/data/request.service';
-import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 
 describe('CollectionMetadataComponent', () => {
   let comp: CollectionMetadataComponent;
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
index 794134a5e5..6d5ffc8768 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
@@ -7,10 +7,10 @@ import { CommonModule } from '@angular/common';
 import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
 import { ActivatedRoute } from '@angular/router';
 import { of as observableOf } from 'rxjs/internal/observable/of';
-import { createSuccessfulRemoteDataObject } from '../../shared/testing/utils';
 import { Collection } from '../../core/shared/collection.model';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { getCollectionEditPath } from '../collection-page-routing.module';
+import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
 
 describe('EditItemTemplatePageComponent', () => {
   let comp: EditItemTemplatePageComponent;
diff --git a/src/app/core/data/item-template-data.service.spec.ts b/src/app/core/data/item-template-data.service.spec.ts
index 38d72a6265..d5f3e4b6f6 100644
--- a/src/app/core/data/item-template-data.service.spec.ts
+++ b/src/app/core/data/item-template-data.service.spec.ts
@@ -5,7 +5,6 @@ import { RestResponse } from '../cache/response.models';
 import { RequestService } from './request.service';
 import { of as observableOf } from 'rxjs';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
-import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
 import { Store } from '@ngrx/store';
 import { CoreState } from '../core.reducers';
 import { ObjectCacheService } from '../cache/object-cache.service';
@@ -39,12 +38,16 @@ describe('ItemTemplateDataService', () => {
       responseCacheEntry.response = new RestResponse(true, 200, 'OK');
       return observableOf(responseCacheEntry);
     },
+    getByUUID(uuid: string) {
+      const responseCacheEntry = new RequestEntry();
+      responseCacheEntry.response = new RestResponse(true, 200, 'OK');
+      return observableOf(responseCacheEntry);
+    },
     commit(method?: RestRequestMethod) {
       // Do nothing
     }
   } as RequestService;
   const rdbService = {} as RemoteDataBuildService;
-  const dataBuildService = {} as NormalizedObjectBuildService;
   const store = {} as Store<CoreState>;
   const bs = {} as BrowseService;
   const objectCache = {
@@ -77,7 +80,6 @@ describe('ItemTemplateDataService', () => {
     service = new ItemTemplateDataService(
       requestService,
       rdbService,
-      dataBuildService,
       store,
       bs,
       objectCache,
@@ -85,6 +87,7 @@ describe('ItemTemplateDataService', () => {
       notificationsService,
       http,
       comparator,
+      undefined,
       collectionService
     );
     itemService = (service as any).dataService;
@@ -119,10 +122,10 @@ describe('ItemTemplateDataService', () => {
   });
 
   describe('create', () => {
-    it('should call create on the item service implementation', () => {
-      spyOn(itemService, 'create');
+    it('should call createTemplate on the item service implementation', () => {
+      spyOn(itemService, 'createTemplate');
       service.create(item, scopeID);
-      expect(itemService.create).toHaveBeenCalled();
+      expect(itemService.createTemplate).toHaveBeenCalled();
     });
   });
 

From 1d0f0b8304976e494f0882b4ca33390d5b0748d3 Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Wed, 1 Jul 2020 16:11:49 +0200
Subject: [PATCH 74/84] move schema on metadatafields to an observable
 remotedata

---
 .../metadata-field-form.component.ts          |  6 +--
 .../metadata-schema.component.spec.ts         | 12 ++---
 .../metadata-schema.component.ts              |  5 +-
 .../edit-in-place-field.component.html        |  2 +-
 .../edit-in-place-field.component.ts          |  6 +--
 .../data/metadata-field-data.service.spec.ts  | 39 ---------------
 .../core/data/metadata-field-data.service.ts  | 19 +------
 src/app/core/metadata/metadata-field.model.ts | 10 ++--
 .../core/registry/registry.service.spec.ts    | 34 +++++++++----
 src/app/core/registry/registry.service.ts     | 49 ++++++++++++-------
 10 files changed, 78 insertions(+), 104 deletions(-)

diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
index 42f6441791..70cdc15b4d 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
@@ -157,19 +157,17 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
     this.registryService.getActiveMetadataField().pipe(take(1)).subscribe(
       (field) => {
         const values = {
-          schema: this.metadataSchema,
           element: this.element.value,
           qualifier: this.qualifier.value,
           scopeNote: this.scopeNote.value
         };
         if (field == null) {
-          this.registryService.createOrUpdateMetadataField(Object.assign(new MetadataField(), values)).subscribe((newField) => {
+          this.registryService.createMetadataField(Object.assign(new MetadataField(), values), this.metadataSchema).subscribe((newField) => {
             this.submitForm.emit(newField);
           });
         } else {
-          this.registryService.createOrUpdateMetadataField(Object.assign(new MetadataField(), field, {
+          this.registryService.updateMetadataField(Object.assign(new MetadataField(), field, {
             id: field.id,
-            schema: this.metadataSchema,
             element: (values.element ? values.element : field.element),
             qualifier: (values.qualifier ? values.qualifier : field.qualifier),
             scopeNote: (values.scopeNote ? values.scopeNote : field.scopeNote)
diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
index 26f4c90b0c..ef85bf5d1e 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
@@ -61,7 +61,7 @@ describe('MetadataSchemaComponent', () => {
       element: 'contributor',
       qualifier: 'advisor',
       scopeNote: null,
-      schema: mockSchemasList[0]
+      schema: createSuccessfulRemoteDataObject$(mockSchemasList[0])
     },
     {
       id: 2,
@@ -73,7 +73,7 @@ describe('MetadataSchemaComponent', () => {
       element: 'contributor',
       qualifier: 'author',
       scopeNote: null,
-      schema: mockSchemasList[0]
+      schema: createSuccessfulRemoteDataObject$(mockSchemasList[0])
     },
     {
       id: 3,
@@ -85,7 +85,7 @@ describe('MetadataSchemaComponent', () => {
       element: 'contributor',
       qualifier: 'editor',
       scopeNote: 'test scope note',
-      schema: mockSchemasList[1]
+      schema: createSuccessfulRemoteDataObject$(mockSchemasList[1])
     },
     {
       id: 4,
@@ -97,15 +97,15 @@ describe('MetadataSchemaComponent', () => {
       element: 'contributor',
       qualifier: 'illustrator',
       scopeNote: null,
-      schema: mockSchemasList[1]
+      schema: createSuccessfulRemoteDataObject$(mockSchemasList[1])
     }
   ];
   const mockSchemas = createSuccessfulRemoteDataObject$(new PaginatedList(null, mockSchemasList));
   /* tslint:disable:no-empty */
   const registryServiceStub = {
     getMetadataSchemas: () => mockSchemas,
-    getMetadataFieldsBySchema: (schema: MetadataSchema) => createSuccessfulRemoteDataObject$(new PaginatedList(null, mockFieldsList.filter((value) => value.schema === schema))),
-    getMetadataSchemaByName: (schemaName: string) => createSuccessfulRemoteDataObject$(mockSchemasList.filter((value) => value.prefix === schemaName)[0]),
+    getMetadataFieldsBySchema: (schema: MetadataSchema) => createSuccessfulRemoteDataObject$(new PaginatedList(null, mockFieldsList)),
+    getMetadataSchemaByPrefix: (schemaName: string) => createSuccessfulRemoteDataObject$(mockSchemasList.filter((value) => value.prefix === schemaName)[0]),
     getActiveMetadataField: () => observableOf(undefined),
     getSelectedMetadataFields: () => observableOf([]),
     editMetadataField: (schema) => {},
diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts
index 96872573b9..87f4b863c0 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts
@@ -17,6 +17,7 @@ import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operato
 import { toFindListOptions } from '../../../shared/pagination/pagination.utils';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { combineLatest } from 'rxjs/internal/observable/combineLatest';
+import { followLink } from '../../../shared/utils/follow-link-config.model';
 
 @Component({
   selector: 'ds-metadata-schema',
@@ -71,7 +72,7 @@ export class MetadataSchemaComponent implements OnInit {
    * @param params
    */
   initialize(params) {
-    this.metadataSchema$ = this.registryService.getMetadataSchemaByName(params.schemaName).pipe(getFirstSucceededRemoteDataPayload());
+    this.metadataSchema$ = this.registryService.getMetadataSchemaByPrefix(params.schemaName).pipe(getFirstSucceededRemoteDataPayload());
     this.updateFields();
   }
 
@@ -91,7 +92,7 @@ export class MetadataSchemaComponent implements OnInit {
     this.metadataFields$ = combineLatest(this.metadataSchema$, this.needsUpdate$).pipe(
       switchMap(([schema, update]: [MetadataSchema, boolean]) => {
         if (update) {
-          return this.registryService.getMetadataFieldsBySchema(schema, toFindListOptions(this.config));
+          return this.registryService.getMetadataFieldsBySchema(schema, toFindListOptions(this.config), followLink('schema'));
         }
       })
     );
diff --git a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
index e8ffc28920..80c78941c8 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
@@ -67,4 +67,4 @@
             <i class="fas fa-undo-alt fa-fw"></i>
         </button>
     </div>
-</td>
\ No newline at end of file
+</td>
diff --git a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
index e73465f905..7e09ac9bec 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
@@ -58,7 +58,7 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
   metadataFieldSuggestions: BehaviorSubject<InputSuggestion[]> = new BehaviorSubject([]);
 
   constructor(
-    private metadataFieldService: RegistryService,
+    private registryService: RegistryService,
     private objectUpdatesService: ObjectUpdatesService,
   ) {
   }
@@ -128,13 +128,13 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
    */
   findMetadataFieldSuggestions(query: string): void {
     if (isNotEmpty(query)) {
-      this.metadataFieldService.queryMetadataFields(query).pipe(
+      this.registryService.queryMetadataFields(query).pipe(
         // getSucceededRemoteData(),
         take(1),
         map((data) => data.payload.page)
       ).subscribe(
         (fields: MetadataField[]) => this.metadataFieldSuggestions.next(
-          fields.filter((field: MetadataField) => field.schema.prefix !== 'relation' && field.schema.prefix !== 'relationship').map((field: MetadataField) => {
+          fields.map((field: MetadataField) => {
             return {
               displayValue: field.toString().split('.').join('.&#8203;'),
               value: field.toString()
diff --git a/src/app/core/data/metadata-field-data.service.spec.ts b/src/app/core/data/metadata-field-data.service.spec.ts
index 5c17b56845..c4ca7f7efc 100644
--- a/src/app/core/data/metadata-field-data.service.spec.ts
+++ b/src/app/core/data/metadata-field-data.service.spec.ts
@@ -64,45 +64,6 @@ describe('MetadataFieldDataService', () => {
     });
   });
 
-  describe('createOrUpdateMetadataField', () => {
-    let field: MetadataField;
-
-    beforeEach(() => {
-      field = Object.assign(new MetadataField(), {
-        element: 'identifier',
-        qualifier: undefined,
-        schema: schema,
-        _links: {
-          self: { href: 'selflink' }
-        }
-      });
-    });
-
-    describe('called with a new metadata field', () => {
-      it('should send a CreateRequest', (done) => {
-        metadataFieldService.createOrUpdateMetadataField(field).subscribe(() => {
-          expect(requestService.configure).toHaveBeenCalledWith(jasmine.any(CreateRequest));
-          done();
-        });
-      });
-    });
-
-    describe('called with an existing metadata field', () => {
-      beforeEach(() => {
-        field = Object.assign(field, {
-          id: 'id-of-existing-field'
-        });
-      });
-
-      it('should send a PutRequest', (done) => {
-        metadataFieldService.createOrUpdateMetadataField(field).subscribe(() => {
-          expect(requestService.configure).toHaveBeenCalledWith(jasmine.any(PutRequest));
-          done();
-        });
-      });
-    });
-  });
-
   describe('clearRequests', () => {
     it('should remove requests on the data service\'s endpoint', (done) => {
       metadataFieldService.clearRequests().subscribe(() => {
diff --git a/src/app/core/data/metadata-field-data.service.ts b/src/app/core/data/metadata-field-data.service.ts
index f50be20f13..8065e45a9e 100644
--- a/src/app/core/data/metadata-field-data.service.ts
+++ b/src/app/core/data/metadata-field-data.service.ts
@@ -21,6 +21,7 @@ import { find, skipWhile, switchMap, tap } from 'rxjs/operators';
 import { RemoteData } from './remote-data';
 import { RequestParam } from '../cache/models/request-param.model';
 import { PaginatedList } from './paginated-list';
+import { getFirstSucceededRemoteDataPayload } from '../shared/operators';
 
 /**
  * A service responsible for fetching/sending data from/to the REST API on the metadatafields endpoint
@@ -56,24 +57,6 @@ export class MetadataFieldDataService extends DataService<MetadataField> {
     return this.searchBy(this.searchBySchemaLinkPath, optionsWithSchema, ...linksToFollow);
   }
 
-  /**
-   * Create or Update a MetadataField
-   *  If the MetadataField contains an id, it is assumed the field already exists and is updated instead
-   *  Since creating or updating is nearly identical, the only real difference is the request (and slight difference in endpoint):
-   *  - On creation, a CreateRequest is used
-   *  - On update, a PutRequest is used
-   * @param field    The MetadataField to create or update
-   */
-  createOrUpdateMetadataField(field: MetadataField): Observable<RemoteData<MetadataField>> {
-    const isUpdate = hasValue(field.id);
-
-    if (isUpdate) {
-      return this.put(field);
-    } else {
-      return this.create(field, new RequestParam('schemaId', field.schema.id));
-    }
-  }
-
   /**
    * Clear all metadata field requests
    * Used for refreshing lists after adding/updating/removing a metadata field from a metadata schema
diff --git a/src/app/core/metadata/metadata-field.model.ts b/src/app/core/metadata/metadata-field.model.ts
index ad7ec59b25..66171141c5 100644
--- a/src/app/core/metadata/metadata-field.model.ts
+++ b/src/app/core/metadata/metadata-field.model.ts
@@ -9,6 +9,9 @@ import { ResourceType } from '../shared/resource-type';
 import { excludeFromEquals } from '../utilities/equals.decorators';
 import { METADATA_FIELD } from './metadata-field.resource-type';
 import { MetadataSchema } from './metadata-schema.model';
+import { RemoteData } from '../data/remote-data';
+import { Observable } from 'rxjs';
+import { METADATA_SCHEMA } from './metadata-schema.resource-type';
 
 /**
  * Class the represents a metadata field
@@ -61,16 +64,15 @@ export class MetadataField extends ListableObject implements HALResource {
    * The MetadataSchema for this MetadataField
    * Will be undefined unless the schema {@link HALLink} has been resolved.
    */
-  // TODO the responseparsingservice assumes schemas are always embedded. This should use remotedata, and be a link instead.
-  // @link(METADATA_SCHEMA)
-  schema?: MetadataSchema;
+  @link(METADATA_SCHEMA)
+  schema?: Observable<RemoteData<MetadataSchema>>;
 
   /**
    * Method to print this metadata field as a string
    * @param separator The separator between the schema, element and qualifier in the string
    */
   toString(separator: string = '.'): string {
-    let key = this.schema.prefix + separator + this.element;
+    let key = this.element;
     if (isNotEmpty(this.qualifier)) {
       key += separator + this.qualifier;
     }
diff --git a/src/app/core/registry/registry.service.spec.ts b/src/app/core/registry/registry.service.spec.ts
index 203e58136c..6f6deb3e3f 100644
--- a/src/app/core/registry/registry.service.spec.ts
+++ b/src/app/core/registry/registry.service.spec.ts
@@ -82,7 +82,7 @@ describe('RegistryService', () => {
           element: 'contributor',
           qualifier: 'advisor',
           scopeNote: null,
-          schema: mockSchemasList[0],
+          schema: createSuccessfulRemoteDataObject$(mockSchemasList[0]),
           type: MetadataField.type
         }),
       Object.assign(new MetadataField(),
@@ -94,7 +94,7 @@ describe('RegistryService', () => {
           element: 'contributor',
           qualifier: 'author',
           scopeNote: null,
-          schema: mockSchemasList[0],
+          schema: createSuccessfulRemoteDataObject$(mockSchemasList[0]),
           type: MetadataField.type
         }),
       Object.assign(new MetadataField(),
@@ -106,7 +106,7 @@ describe('RegistryService', () => {
           element: 'contributor',
           qualifier: 'editor',
           scopeNote: 'test scope note',
-          schema: mockSchemasList[1],
+          schema: createSuccessfulRemoteDataObject$(mockSchemasList[1]),
           type: MetadataField.type
         }),
       Object.assign(new MetadataField(),
@@ -118,7 +118,7 @@ describe('RegistryService', () => {
           element: 'contributor',
           qualifier: 'illustrator',
           scopeNote: null,
-          schema: mockSchemasList[1],
+          schema: createSuccessfulRemoteDataObject$(mockSchemasList[1]),
           type: MetadataField.type
         })
     ];
@@ -134,7 +134,8 @@ describe('RegistryService', () => {
     metadataFieldService = jasmine.createSpyObj('metadataFieldService', {
       findAll: createSuccessfulRemoteDataObject$(createPaginatedList(mockFieldsList)),
       findById: createSuccessfulRemoteDataObject$(mockFieldsList[0]),
-      createOrUpdateMetadataField: createSuccessfulRemoteDataObject$(mockFieldsList[0]),
+      create: createSuccessfulRemoteDataObject$(mockFieldsList[0]),
+      put: createSuccessfulRemoteDataObject$(mockFieldsList[0]),
       deleteAndReturnResponse: observableOf(new RestResponse(true, 200, 'OK')),
       clearRequests: observableOf('href')
     });
@@ -178,7 +179,7 @@ describe('RegistryService', () => {
     let result;
 
     beforeEach(() => {
-      result = registryService.getMetadataSchemaByName(mockSchemasList[0].prefix);
+      result = registryService.getMetadataSchemaByPrefix(mockSchemasList[0].prefix);
     });
 
     it('should call metadataSchemaService.findById with the correct ID', (done) => {
@@ -325,14 +326,29 @@ describe('RegistryService', () => {
     });
   });
 
-  describe('when createOrUpdateMetadataField is called', () => {
+  describe('when createMetadataField is called', () => {
     let result: Observable<MetadataField>;
 
     beforeEach(() => {
-      result = registryService.createOrUpdateMetadataField(mockFieldsList[0]);
+      result = registryService.createMetadataField(mockFieldsList[0], mockSchemasList[0]);
     });
 
-    it('should return the created/updated metadata field', (done) => {
+    it('should return the created metadata field', (done) => {
+      result.subscribe((field: MetadataField) => {
+        expect(field).toEqual(mockFieldsList[0]);
+        done();
+      });
+    });
+  });
+
+  describe('when updateMetadataField is called', () => {
+    let result: Observable<MetadataField>;
+
+    beforeEach(() => {
+      result = registryService.updateMetadataField(mockFieldsList[0]);
+    });
+
+    it('should return the updated metadata field', (done) => {
       result.subscribe((field: MetadataField) => {
         expect(field).toEqual(mockFieldsList[0]);
         done();
diff --git a/src/app/core/registry/registry.service.ts b/src/app/core/registry/registry.service.ts
index 79b982da8a..75d1d5cc74 100644
--- a/src/app/core/registry/registry.service.ts
+++ b/src/app/core/registry/registry.service.ts
@@ -36,7 +36,8 @@ import { MetadataSchema } from '../metadata/metadata-schema.model';
 import { MetadataField } from '../metadata/metadata-field.model';
 import { MetadataSchemaDataService } from '../data/metadata-schema-data.service';
 import { MetadataFieldDataService } from '../data/metadata-field-data.service';
-import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { FollowLinkConfig, followLink } from '../../shared/utils/follow-link-config.model';
+import { RequestParam } from '../cache/models/request-param.model';
 
 const metadataRegistryStateSelector = (state: AppState) => state.metadataRegistry;
 const editMetadataSchemaSelector = createSelector(metadataRegistryStateSelector, (metadataState: MetadataRegistryState) => metadataState.editSchema);
@@ -68,11 +69,11 @@ export class RegistryService {
   }
 
   /**
-   * Retrieves a metadata schema by its name
-   * @param schemaName The name of the schema to find
+   * Retrieves a metadata schema by its prefix
+   * @param prefix The prefux of the schema to find
    * @param linksToFollow List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
    */
-  public getMetadataSchemaByName(schemaName: string, ...linksToFollow: Array<FollowLinkConfig<MetadataSchema>>): Observable<RemoteData<MetadataSchema>> {
+  public getMetadataSchemaByPrefix(prefix: string, ...linksToFollow: Array<FollowLinkConfig<MetadataSchema>>): Observable<RemoteData<MetadataSchema>> {
     // Temporary options to get ALL metadataschemas until there's a rest api endpoint for fetching a specific schema
     const options: FindListOptions = Object.assign(new FindListOptions(), {
       elementsPerPage: 10000
@@ -81,7 +82,7 @@ export class RegistryService {
       getFirstSucceededRemoteDataPayload(),
       map((schemas: PaginatedList<MetadataSchema>) => schemas.page),
       isNotEmptyOperator(),
-      map((schemas: MetadataSchema[]) => schemas.filter((schema) => schema.prefix === schemaName)[0]),
+      map((schemas: MetadataSchema[]) => schemas.filter((schema) => schema.prefix === prefix)[0]),
       flatMap((schema: MetadataSchema) => this.metadataSchemaService.findById(`${schema.id}`, ...linksToFollow))
     );
   }
@@ -240,25 +241,37 @@ export class RegistryService {
   }
 
   /**
-   * Create or Update a MetadataField
-   *  If the MetadataField contains an id, it is assumed the field already exists and is updated instead
-   *  Since creating or updating is nearly identical, the only real difference is the request (and slight difference in endpoint):
-   *  - On creation, a CreateRequest is used
-   *  - On update, a PutRequest is used
-   * @param field    The MetadataField to create or update
+   * Create a MetadataField
+   *
+   * @param field    The MetadataField to create
+   * @param schema   The MetadataSchema to create the field in
    */
-  public createOrUpdateMetadataField(field: MetadataField): Observable<MetadataField> {
-    const isUpdate = hasValue(field.id);
-    return this.metadataFieldService.createOrUpdateMetadataField(field).pipe(
+  public createMetadataField(field: MetadataField, schema: MetadataSchema): Observable<MetadataField> {
+    return this.metadataFieldService.create(field, new RequestParam('schemaId', schema.id)).pipe(
       getFirstSucceededRemoteDataPayload(),
       hasValueOperator(),
       tap(() => {
-        const fieldString = `${field.schema.prefix}.${field.element}${field.qualifier ? `.${field.qualifier}` : ''}`;
-        this.showNotifications(true, isUpdate, true, {field: fieldString});
+        this.showNotifications(true, false, true, {field: field.toString()});
       })
     );
   }
 
+  /**
+   * Update a MetadataField
+   *
+   * @param field    The MetadataField to update
+   */
+  public updateMetadataField(field: MetadataField): Observable<MetadataField> {
+    return this.metadataFieldService.put(field).pipe(
+      getFirstSucceededRemoteDataPayload(),
+      hasValueOperator(),
+      tap(() => {
+        this.showNotifications(true, true, true, {field: field.toString()});
+      })
+    );
+  }
+
+
   /**
    * Method to delete a metadata field
    * @param id The id of the metadata field to delete
@@ -296,12 +309,12 @@ export class RegistryService {
    * @returns an observable that emits a remote data object with a page of metadata fields that match the query
    */
   queryMetadataFields(query: string): Observable<RemoteData<PaginatedList<MetadataField>>> {
-    return this.getAllMetadataFields().pipe(
+    return this.getAllMetadataFields(undefined, followLink('schema')).pipe(
       map((rd: RemoteData<PaginatedList<MetadataField>>) => {
         const filteredFields: MetadataField[] = rd.payload.page.filter(
           (field: MetadataField) => field.toString().indexOf(query) >= 0
         );
-        const page: PaginatedList<MetadataField> = new PaginatedList<MetadataField>(new PageInfo(), filteredFields)
+        const page: PaginatedList<MetadataField> = new PaginatedList<MetadataField>(new PageInfo(), filteredFields);
         return Object.assign({}, rd, { payload: page });
       })
     );

From 09f1b7e01fac6746c373e0497ac9971800ffc8a7 Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Wed, 1 Jul 2020 16:40:16 +0200
Subject: [PATCH 75/84] disable fetching and querying all fields

---
 .../core/registry/registry.service.spec.ts    | 15 -------------
 src/app/core/registry/registry.service.ts     | 22 ++++++++-----------
 2 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/src/app/core/registry/registry.service.spec.ts b/src/app/core/registry/registry.service.spec.ts
index 6f6deb3e3f..8e4e191e0f 100644
--- a/src/app/core/registry/registry.service.spec.ts
+++ b/src/app/core/registry/registry.service.spec.ts
@@ -190,21 +190,6 @@ describe('RegistryService', () => {
     });
   });
 
-  describe('when requesting metadatafields', () => {
-    let result;
-
-    beforeEach(() => {
-      result = registryService.getAllMetadataFields();
-    });
-
-    it('should call metadataFieldService.findAll', (done) => {
-      result.subscribe(() => {
-        expect(metadataFieldService.findAll).toHaveBeenCalled();
-        done();
-      });
-    });
-  });
-
   describe('when dispatching to the store', () => {
     beforeEach(() => {
       spyOn(mockStore, 'dispatch');
diff --git a/src/app/core/registry/registry.service.ts b/src/app/core/registry/registry.service.ts
index 75d1d5cc74..4c54e80249 100644
--- a/src/app/core/registry/registry.service.ts
+++ b/src/app/core/registry/registry.service.ts
@@ -38,6 +38,7 @@ import { MetadataSchemaDataService } from '../data/metadata-schema-data.service'
 import { MetadataFieldDataService } from '../data/metadata-field-data.service';
 import { FollowLinkConfig, followLink } from '../../shared/utils/follow-link-config.model';
 import { RequestParam } from '../cache/models/request-param.model';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 
 const metadataRegistryStateSelector = (state: AppState) => state.metadataRegistry;
 const editMetadataSchemaSelector = createSelector(metadataRegistryStateSelector, (metadataState: MetadataRegistryState) => metadataState.editSchema);
@@ -104,11 +105,11 @@ export class RegistryService {
    * @param linksToFollow List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
    * @returns an observable that emits a remote data object with a page of metadata fields
    */
+  // TODO this is temporarily disabled. The performance is too bad.
+  // It is used down the line for validation. That validation will have to be rewritten against a new rest endpoint.
+  // Not by downloading the list of all fields.
   public getAllMetadataFields(options?: FindListOptions, ...linksToFollow: Array<FollowLinkConfig<MetadataField>>): Observable<RemoteData<PaginatedList<MetadataField>>> {
-    if (hasNoValue(options)) {
-      options = {currentPage: 1, elementsPerPage: 10000} as any;
-    }
-    return this.metadataFieldService.findAll(options, ...linksToFollow);
+    return createSuccessfulRemoteDataObject$(new PaginatedList<MetadataField>(null, []));
   }
 
   public editMetadataSchema(schema: MetadataSchema) {
@@ -308,15 +309,10 @@ export class RegistryService {
    * @param query {string} The query to filter the field names by
    * @returns an observable that emits a remote data object with a page of metadata fields that match the query
    */
+  // TODO this is temporarily disabled. The performance is too bad.
+  // Querying metadatafields will need to be implemented as a search endpoint on the rest api,
+  // not by downloading everything and preforming the query client side.
   queryMetadataFields(query: string): Observable<RemoteData<PaginatedList<MetadataField>>> {
-    return this.getAllMetadataFields(undefined, followLink('schema')).pipe(
-      map((rd: RemoteData<PaginatedList<MetadataField>>) => {
-        const filteredFields: MetadataField[] = rd.payload.page.filter(
-          (field: MetadataField) => field.toString().indexOf(query) >= 0
-        );
-        const page: PaginatedList<MetadataField> = new PaginatedList<MetadataField>(new PageInfo(), filteredFields);
-        return Object.assign({}, rd, { payload: page });
-      })
-    );
+    return createSuccessfulRemoteDataObject$(new PaginatedList<MetadataField>(null, []));
   }
 }

From 9bbdf95bee6df99016e90a5c492ed9edd6941908 Mon Sep 17 00:00:00 2001
From: Samuel <samuelcambien@gmail.com>
Date: Wed, 1 Jul 2020 18:28:48 +0200
Subject: [PATCH 76/84] CC License Submission Step - fix error when changing
 accepted license

---
 .../cc-license/submission-section-cc-licenses.component.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index 97c6ba85e0..46e1cd12ec 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -109,6 +109,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
     if (!!this.getSelectedCcLicense() && this.getSelectedCcLicense().id === ccLicense.id) {
       return;
     }
+    this.setAccepted(false);
     this.updateSectionData({
       ccLicense: {
         id: ccLicense.id,
@@ -116,7 +117,6 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
       },
       uri: undefined,
     });
-    this.setAccepted(false);
   }
 
   /**

From 7cfa0f17a57c3144e7bc14e0a0d2d1ad8ba84064 Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Wed, 1 Jul 2020 19:00:21 +0200
Subject: [PATCH 77/84] add support for authorized downloads

---
 src/app/process-page/detail/process-detail.component.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index eb6d0a6674..9cb1f1e6af 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -15,10 +15,10 @@
 
     <div *ngVar="(filesRD$ | async)?.payload?.page as files">
         <ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files" [title]="'process.detail.output-files'">
-            <div *ngFor="let file of files">
-                <span><a [href]="file?._links?.content?.href">{{getFileName(file)}}</a></span>
-                <span>({{file?.sizeBytes | dsFileSize}})</span>
-            </div>
+          <ds-file-download-link *ngFor="let file of files; let last=last;" [href]="file?._links?.content?.href" [download]="getFileName(file)">
+            <span>{{getFileName(file)}}</span>
+            <span>({{(file?.sizeBytes) | dsFileSize }})</span>
+          </ds-file-download-link>
         </ds-process-detail-field>
     </div>
 

From e9993c8e16a740468e7144763b6332c23986d6e9 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 2 Jul 2020 10:21:02 +0200
Subject: [PATCH 78/84] 65272: Fixed readonly error + test cases

---
 .../metadata-field-form/metadata-field-form.component.spec.ts | 4 ++--
 .../metadata-schema/metadata-schema.component.spec.ts         | 2 +-
 .../edit-in-place-field/edit-in-place-field.component.ts      | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
index 98128a6a61..0cb259c6d1 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
@@ -27,7 +27,8 @@ describe('MetadataFieldFormComponent', () => {
   /* tslint:disable:no-empty */
   const registryServiceStub = {
     getActiveMetadataField: () => observableOf(undefined),
-    createOrUpdateMetadataField: (field: MetadataField) => observableOf(field),
+    createMetadataField: (field: MetadataField) => observableOf(field),
+    updateMetadataField: (field: MetadataField) => observableOf(field),
     cancelEditMetadataField: () => {},
     cancelEditMetadataSchema: () => {},
     clearMetadataFieldRequests: () => observableOf(undefined)
@@ -75,7 +76,6 @@ describe('MetadataFieldFormComponent', () => {
     const scopeNote = 'fakeScopeNote';
 
     const expected = Object.assign(new MetadataField(), {
-      schema: metadataSchema,
       element: element,
       qualifier: qualifier,
       scopeNote: scopeNote
diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
index ef85bf5d1e..9532a64e84 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
@@ -104,7 +104,7 @@ describe('MetadataSchemaComponent', () => {
   /* tslint:disable:no-empty */
   const registryServiceStub = {
     getMetadataSchemas: () => mockSchemas,
-    getMetadataFieldsBySchema: (schema: MetadataSchema) => createSuccessfulRemoteDataObject$(new PaginatedList(null, mockFieldsList)),
+    getMetadataFieldsBySchema: (schema: MetadataSchema) => createSuccessfulRemoteDataObject$(new PaginatedList(null, mockFieldsList.filter((value) => value.id === 3 || value.id === 4))),
     getMetadataSchemaByPrefix: (schemaName: string) => createSuccessfulRemoteDataObject$(mockSchemasList.filter((value) => value.prefix === schemaName)[0]),
     getActiveMetadataField: () => observableOf(undefined),
     getSelectedMetadataFields: () => observableOf([]),
diff --git a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
index 7e09ac9bec..5a905fc7ea 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
@@ -75,7 +75,7 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
    * Sends a new change update for this field to the object updates service
    */
   update(ngModel?: NgModel) {
-    this.objectUpdatesService.saveChangeFieldUpdate(this.url, this.metadata);
+    this.objectUpdatesService.saveChangeFieldUpdate(this.url, cloneDeep(this.metadata));
     if (hasValue(ngModel)) {
       this.checkValidity(ngModel);
     }
@@ -103,7 +103,7 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
    * Sends a new remove update for this field to the object updates service
    */
   remove() {
-    this.objectUpdatesService.saveRemoveFieldUpdate(this.url, this.metadata);
+    this.objectUpdatesService.saveRemoveFieldUpdate(this.url, cloneDeep(this.metadata));
   }
 
   /**

From 6d802f50781d8790f5a6f88134bfb8ac2d8492ef Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 2 Jul 2020 11:07:41 +0200
Subject: [PATCH 79/84] 65272: Edit item template - breadcrumb + title

---
 .../+collection-page/collection-page-routing.module.ts    | 7 +++++--
 .../edit-item-template-page.component.html                | 2 +-
 src/assets/i18n/en.json5                                  | 8 ++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/app/+collection-page/collection-page-routing.module.ts b/src/app/+collection-page/collection-page-routing.module.ts
index a75aff0701..1ebd9b3630 100644
--- a/src/app/+collection-page/collection-page-routing.module.ts
+++ b/src/app/+collection-page/collection-page-routing.module.ts
@@ -15,6 +15,7 @@ import { CollectionItemMapperComponent } from './collection-item-mapper/collecti
 import { CollectionBreadcrumbResolver } from '../core/breadcrumbs/collection-breadcrumb.resolver';
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
 import { LinkService } from '../core/cache/builders/link.service';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 
 export const COLLECTION_PARENT_PARAMETER = 'parent';
 
@@ -66,8 +67,10 @@ const ITEMTEMPLATE_PATH = 'itemtemplate';
             component: EditItemTemplatePageComponent,
             canActivate: [AuthenticatedGuard],
             resolve: {
-              item: ItemTemplatePageResolver
-            }
+              item: ItemTemplatePageResolver,
+              breadcrumb: I18nBreadcrumbResolver
+            },
+            data: { title: 'collection.edit.template.title', breadcrumbKey: 'collection.edit.template' }
           },
           {
             path: '',
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
index d74cd26d8c..5b0f83fa22 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -1,7 +1,7 @@
 <div class="container" *ngVar="(collectionRD$ | async)?.payload as collection">
   <div class="row">
     <div class="col-12">
-      <h2 class="border-bottom">{{ 'collection.edit.template.title' | translate:{ collection: collection?.name } }}</h2>
+      <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: collection?.name } }}</h2>
       <ds-item-metadata [updateService]="itemTemplateService"></ds-item-metadata>
       <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
     </div>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index c7ac27fad2..e754b8df0e 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -684,19 +684,23 @@
 
   "collection.edit.template.add-button": "Add",
 
+  "collection.edit.template.breadcrumbs": "Item template",
+
   "collection.edit.template.cancel": "Cancel",
 
   "collection.edit.template.delete-button": "Delete",
 
   "collection.edit.template.edit-button": "Edit",
 
-  "collection.edit.template.label": "Item template",
+  "collection.edit.template.head": "Edit Template Item for Collection \"{{ collection }}\"",
+
+  "collection.edit.template.label": "Template item",
 
   "collection.edit.template.notifications.delete.error": "Failed to delete the item template",
 
   "collection.edit.template.notifications.delete.success": "Successfully deleted the item template",
 
-  "collection.edit.template.title": "Edit Template Item for Collection \"{{ collection }}\"",
+  "collection.edit.template.title": "Edit Template Item",
 
 
 

From e234c3a44d3d9dc152559e22c79ffb3c39d34773 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 2 Jul 2020 11:12:16 +0200
Subject: [PATCH 80/84] 65272: Fixed lint error

---
 src/app/core/registry/registry.service.ts | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/app/core/registry/registry.service.ts b/src/app/core/registry/registry.service.ts
index 4c54e80249..cad5478f7a 100644
--- a/src/app/core/registry/registry.service.ts
+++ b/src/app/core/registry/registry.service.ts
@@ -2,18 +2,10 @@ import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
 import { RemoteData } from '../data/remote-data';
 import { PaginatedList } from '../data/paginated-list';
-import { PageInfo } from '../shared/page-info.model';
 import { FindListOptions } from '../data/request.models';
-import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
-import { RequestService } from '../data/request.service';
-import {
-  MetadatafieldSuccessResponse,
-  MetadataschemaSuccessResponse,
-  RestResponse
-} from '../cache/response.models';
-import { HALEndpointService } from '../shared/hal-endpoint.service';
-import { hasNoValue, hasValue, hasValueOperator, isNotEmpty, isNotEmptyOperator } from '../../shared/empty.util';
-import { getAllSucceededRemoteDataPayload, getFirstSucceededRemoteDataPayload } from '../shared/operators';
+import { RestResponse } from '../cache/response.models';
+import { hasValue, hasValueOperator, isNotEmptyOperator } from '../../shared/empty.util';
+import { getFirstSucceededRemoteDataPayload } from '../shared/operators';
 import { createSelector, select, Store } from '@ngrx/store';
 import { AppState } from '../../app.reducer';
 import { MetadataRegistryState } from '../../+admin/admin-registries/metadata-registry/metadata-registry.reducers';
@@ -36,7 +28,7 @@ import { MetadataSchema } from '../metadata/metadata-schema.model';
 import { MetadataField } from '../metadata/metadata-field.model';
 import { MetadataSchemaDataService } from '../data/metadata-schema-data.service';
 import { MetadataFieldDataService } from '../data/metadata-field-data.service';
-import { FollowLinkConfig, followLink } from '../../shared/utils/follow-link-config.model';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { RequestParam } from '../cache/models/request-param.model';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 
@@ -272,7 +264,6 @@ export class RegistryService {
     );
   }
 
-
   /**
    * Method to delete a metadata field
    * @param id The id of the metadata field to delete

From 92e47dee075af2fe45e5dbd9c6ce8351197bdb37 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 2 Jul 2020 12:32:21 +0200
Subject: [PATCH 81/84] 65272: AoT Build fix + LGTM fixes

---
 .../edit-item-template-page.component.ts                  | 2 +-
 src/app/core/data/metadata-field-data.service.spec.ts     | 3 +--
 src/app/core/data/metadata-field-data.service.ts          | 8 ++------
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
index d4b49ef280..329c72d683 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -22,7 +22,7 @@ export class EditItemTemplatePageComponent implements OnInit {
   collectionRD$: Observable<RemoteData<Collection>>;
 
   constructor(protected route: ActivatedRoute,
-              protected itemTemplateService: ItemTemplateDataService) {
+              public itemTemplateService: ItemTemplateDataService) {
   }
 
   ngOnInit(): void {
diff --git a/src/app/core/data/metadata-field-data.service.spec.ts b/src/app/core/data/metadata-field-data.service.spec.ts
index c4ca7f7efc..be610e3d8c 100644
--- a/src/app/core/data/metadata-field-data.service.spec.ts
+++ b/src/app/core/data/metadata-field-data.service.spec.ts
@@ -4,9 +4,8 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { of as observableOf } from 'rxjs/internal/observable/of';
 import { RestResponse } from '../cache/response.models';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
-import { CreateRequest, FindListOptions, PutRequest } from './request.models';
+import { FindListOptions } from './request.models';
 import { MetadataFieldDataService } from './metadata-field-data.service';
-import { MetadataField } from '../metadata/metadata-field.model';
 import { MetadataSchema } from '../metadata/metadata-schema.model';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
diff --git a/src/app/core/data/metadata-field-data.service.ts b/src/app/core/data/metadata-field-data.service.ts
index 8065e45a9e..1f7a4b9089 100644
--- a/src/app/core/data/metadata-field-data.service.ts
+++ b/src/app/core/data/metadata-field-data.service.ts
@@ -13,15 +13,11 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { METADATA_FIELD } from '../metadata/metadata-field.resource-type';
 import { MetadataField } from '../metadata/metadata-field.model';
 import { MetadataSchema } from '../metadata/metadata-schema.model';
-import { FindListOptions, FindListRequest } from './request.models';
+import { FindListOptions } from './request.models';
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { Observable } from 'rxjs/internal/Observable';
-import { hasValue } from '../../shared/empty.util';
-import { find, skipWhile, switchMap, tap } from 'rxjs/operators';
-import { RemoteData } from './remote-data';
+import { tap } from 'rxjs/operators';
 import { RequestParam } from '../cache/models/request-param.model';
-import { PaginatedList } from './paginated-list';
-import { getFirstSucceededRemoteDataPayload } from '../shared/operators';
 
 /**
  * A service responsible for fetching/sending data from/to the REST API on the metadatafields endpoint

From f655f5d1490d28ead5dfce8ce1be348ddaf05db5 Mon Sep 17 00:00:00 2001
From: Samuel <samuelcambien@gmail.com>
Date: Thu, 2 Jul 2020 12:54:27 +0200
Subject: [PATCH 82/84] CC License Submission Step - fix error when saving
 submission

---
 ...ubmission-section-cc-licenses.component.ts | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index 46e1cd12ec..d455bd5e22 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -2,7 +2,7 @@ import { Component, Inject } from '@angular/core';
 import { Observable, of as observableOf, Subscription } from 'rxjs';
 import { Field, Option, SubmissionCcLicence } from '../../../core/submission/models/submission-cc-license.model';
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
-import { distinctUntilChanged, filter, map } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map, take } from 'rxjs/operators';
 import { SubmissionCcLicenseDataService } from '../../../core/submission/submission-cc-license-data.service';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { renderSectionFor } from '../sections-decorator';
@@ -235,15 +235,19 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
         distinctUntilChanged(),
         map((sectionState) => sectionState.data as WorkspaceitemSectionCcLicenseObject),
       ).subscribe((data) => {
-        this.sectionData.data = data;
-        const path = this.pathCombiner.getPath('uri');
-        if (this.accepted) {
-          this.getCcLicenseLink$().subscribe((link) => {
-            this.operationsBuilder.add(path, link.toString(), false, true);
-          });
-        } else {
-          this.operationsBuilder.remove(path);
+        if (this.data.accepted !== data.accepted) {
+          const path = this.pathCombiner.getPath('uri');
+          if (data.accepted) {
+            this.getCcLicenseLink$().pipe(
+              take(1),
+            ).subscribe((link) => {
+              this.operationsBuilder.add(path, link.toString(), false, true);
+            });
+          } else if (!!this.data.uri) {
+            this.operationsBuilder.remove(path);
+          }
         }
+        this.sectionData.data = data;
       }),
       this.submissionCcLicensesDataService.findAll({elementsPerPage: Number.MAX_SAFE_INTEGER}).pipe(
         getSucceededRemoteData(),

From cece770e8f16bc25caaeba254653b8873e800270 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paulo=20Gra=C3=A7a?= <paulo1978@gmail.com>
Date: Thu, 2 Jul 2020 14:54:25 +0100
Subject: [PATCH 83/84] DSPACE_HOST example fix

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 78d7816f65..5d8a323461 100644
--- a/README.md
+++ b/README.md
@@ -104,7 +104,7 @@ DSPACE_REST_SSL # Whether the angular REST uses SSL [true/false]
 
 The same settings can also be overwritten by setting system environment variables instead, E.g.:
 ```bash 
-export DSPACE_HOST=https://dspace7.4science.cloud/server
+export DSPACE_HOST=dspace7.4science.cloud
 ```
 
 The priority works as follows: **environment variable** overrides **variable in `.env` file** overrides **`environment.(prod, dev or test).ts`** overrides **`environment.common.ts`**

From 4fa8d02fb242d9d0667d66b3a2eb3875b6bea96c Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Thu, 2 Jul 2020 17:32:34 +0200
Subject: [PATCH 84/84] remove unused imports

---
 src/app/shared/menu/menu.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index 329fabf703..28e906c456 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -3,9 +3,9 @@ import { Observable } from 'rxjs/internal/Observable';
 import { MenuService } from './menu.service';
 import { MenuID } from './initial-menus-state';
 import { MenuSection } from './menu.reducer';
-import { distinctUntilChanged, filter, first, map, tap } from 'rxjs/operators';
+import { distinctUntilChanged, first, map } from 'rxjs/operators';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
-import { hasNoValue, hasValue } from '../empty.util';
+import { hasValue } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
 import { getComponentForMenu } from './menu-section.decorator';
 import { Subscription } from 'rxjs/internal/Subscription';