[ADF-4123] Process Cloud Instance Details Header component (#4418)

* [ADF-4123] Added service to get process instance details

* [ADF-4123] Added process header component

* [ADF-4123] Added more properties to model

* [ADF-4123] Exported process sidebar

* [ADF-4123] Added new process instance details demo component

* [ADF-4123] Added tests for module

* [ADF-4123] Added tests for process-header

* [ADF-4123] Added documentation

demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.html

@@ -0,0 +1,11 @@
+
+<button data-automation-id="go-back" mat-icon-button (click)="onGoBack()">
+    <mat-icon>arrow_back</mat-icon> Go Back
+</button>
+
+<h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
+
+<adf-cloud-process-header
+    [appName]="appName"
+    [processInstanceId]="processInstanceId">
+</adf-cloud-process-header>

demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+    templateUrl: './process-details-cloud-demo.component.html',
+    styleUrls: ['./process-details-cloud-demo.component.scss']
+})
+export class ProcessDetailsCloudDemoComponent {
+
+    processInstanceId: string;
+    appName: string;
+
+    constructor(private route: ActivatedRoute, private router: Router) {
+        this.route.params.subscribe((params) => {
+            this.processInstanceId = params.processInstanceId;
+        });
+
+        this.route.parent.params.subscribe((params) => {
+            this.appName = params.appName;
+        });
+    }
+
+    onGoBack() {
+        this.router.navigate([`/cloud/${this.appName}/`]);
+    }
+}

demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.ts

@@ -100,8 +100,8 @@ export class ProcessesCloudDemoComponent implements OnInit {
         this.selectedRows = [];
     }
 
-    onRowClick($event) {
-        this.selectedRow = $event;
+    onRowClick(processInstanceId) {
+        this.router.navigate([`/cloud/${this.appName}/process-details/${processInstanceId}`]);
     }
 
     onFilterChange(query: any) {