[ADF-4124] DemoShell - Show task-list inside process-cloud-details (#4420)

* [ADF-4124] DemoShell - Show task list inside process-cloud details

* [ADF-4124] ProcessServiceCloud - remove process header files

* Revert changes

* [ADF-4124] - add missing files

* [ADF-4124] - add process-cloud header in process details

* [ADF-4124] - change process details layout

* [ADF-4124] - lint

demo-shell/src/app/app.module.ts

@@ -102,7 +102,6 @@ import { NestedMenuPositionDirective } from './components/app-layout/cloud/direc
         ThemePickerModule,
         ChartsModule,
         MonacoEditorModule.forRoot(),
-        ProcessServicesCloudModule,
         GroupCloudModule
     ],
     declarations: [

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

@@ -5,7 +5,21 @@
 
 <h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
 
-<adf-cloud-process-header
+<div class="adf-process-cloud-container">
-    [appName]="appName"
+
-    [processInstanceId]="processInstanceId">
+    <adf-cloud-task-list
-</adf-cloud-process-header>
+        fxFlex
+        class="adf-cloud-layout-overflow"
+        [appName]="appName"
+        [processInstanceId]="processInstanceId"
+        (rowClick)="onRowClick($event)"
+        #taskCloud>
+    </adf-cloud-task-list>
+
+    <adf-cloud-process-header
+        class="adf-process-cloud-header"
+        [appName]="appName"
+        [processInstanceId]="processInstanceId">
+    </adf-cloud-process-header>
+</div>
+

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

@@ -0,0 +1,14 @@
+ .adf {
+    &-process-cloud-container {
+        display: flex;
+    }
+
+    &-cloud-layout-overflow {
+        width:67%;
+    }
+
+    &-process-cloud-header {
+        margin-left: 10px;
+        width: 25%;
+    }
+ }

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

@@ -40,4 +40,10 @@ export class ProcessDetailsCloudDemoComponent {
     onGoBack() {
         this.router.navigate([`/cloud/${this.appName}/`]);
     }
+
+    onRowClick(taskId: string) {
+        if (taskId) {
+            this.router.navigate([`/cloud/${this.appName}/task-details/${taskId}`]);
+        }
+    }
 }