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 01/30] 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 02/30] 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 03/30] 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 04/30] 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 05/30] 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 06/30] 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 07/30] 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 08/30] 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 09/30] 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 10/30] 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 11/30] 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 12/30] 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 13/30] 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 14/30] 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 15/30] 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 16/30] 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 17/30] 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 18/30] 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 19/30] 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 20/30] 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 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 21/30] 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 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 22/30] 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 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 23/30] 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 24/30] 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 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 25/30] 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 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 26/30] 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 27/30] 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 28/30] 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 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 29/30] 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 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 30/30] 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>