[ADF-4147] Add task details redirection toggle in cloud settings page (#4350)

demo-shell/resources/i18n/en.json

@@ -310,6 +310,7 @@
   "SETTINGS_CLOUD": {
       "MULTISELECTION": "Multiselection",
       "TESTING_MODE": "Testing Mode",
-      "SELECTION_MODE": "Selection Mode"
+      "SELECTION_MODE": "Selection Mode",
+      "TASK_DETAILS_REDIRECTION": "Display task details on task click"
   }
 }

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

@@ -1,10 +1,13 @@
 <div fxFlex fxLayout="column" class="adf-settings-container">
-    <mat-checkbox [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
+    <mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
         {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
-    </mat-checkbox>
+    </mat-slide-toggle>
-    <mat-checkbox [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
+    <mat-slide-toggle [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
         {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
-    </mat-checkbox>
+    </mat-slide-toggle>
+    <mat-slide-toggle [color]="'primary'" [checked]="taskDetailsRedirection" (change)="toggleTaskDetailsRedirection()" data-automation-id="taskDetailsRedirection">
+        {{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }}
+    </mat-slide-toggle>
     <mat-form-field>
         <mat-label>
             {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
@@ -15,4 +18,4 @@
             </mat-option>
         </mat-select>
     </mat-form-field>
-</div>
+</div>

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

@@ -28,6 +28,7 @@ export class CloudSettingsComponent implements OnInit {
     multiselect: boolean;
     selectionMode: string;
     testingMode: boolean;
+    taskDetailsRedirection: boolean;
 
     selectionModeOptions = [
         { value: '', title: 'None' },
@@ -43,14 +44,11 @@ export class CloudSettingsComponent implements OnInit {
     }
 
     setCurrentSettings(settings) {
-        if (settings.multiselect !== undefined) {
+        if (settings) {
             this.multiselect = settings.multiselect;
-        }
-        if (settings.testingMode !== undefined) {
             this.testingMode = settings.testingMode;
-        }
-        if (settings.selectionMode !== undefined) {
             this.selectionMode = settings.selectionMode;
+            this.taskDetailsRedirection = settings.taskDetailsRedirection;
         }
     }
 
@@ -64,6 +62,11 @@ export class CloudSettingsComponent implements OnInit {
         this.setSetting();
     }
 
+    toggleTaskDetailsRedirection() {
+        this.taskDetailsRedirection = !this.taskDetailsRedirection;
+        this.setSetting();
+    }
+
     onSelectionModeChange() {
         this.setSetting();
     }
@@ -72,7 +75,8 @@ export class CloudSettingsComponent implements OnInit {
         this.cloudLayoutService.setCurrentSettings({
             multiselect: this.multiselect,
             testingMode: this.testingMode,
-            selectionMode: this.selectionMode
+            selectionMode: this.selectionMode,
+            taskDetailsRedirection: this.taskDetailsRedirection
         });
     }
 }

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

@@ -85,13 +85,9 @@ export class ProcessesCloudDemoComponent implements OnInit {
     }
 
     setCurrentSettings(settings) {
-        if (settings.multiselect !== undefined) {
+        if (settings) {
             this.multiselect = settings.multiselect;
-        }
-        if (settings.testingMode !== undefined) {
             this.testingMode = settings.testingMode;
-        }
-        if (settings.selectionMode !== undefined) {
             this.selectionMode = settings.selectionMode;
         }
     }

demo-shell/src/app/components/app-layout/cloud/services/cloud-layout.service.ts

@@ -26,6 +26,7 @@ export class CloudLayoutService {
     private settings = {
         multiselect: false,
         testingMode: false,
+        taskDetailsRedirection: true,
         selectionMode: 'single'
     };
 

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

@@ -48,6 +48,7 @@ export class TasksCloudDemoComponent implements OnInit {
     selectedRows: string[] = [];
     testingMode: boolean;
     selectionMode: string;
+    taskDetailsRedirection: boolean;
 
     constructor(
         private cloudLayoutService: CloudLayoutService,
@@ -79,14 +80,11 @@ export class TasksCloudDemoComponent implements OnInit {
     }
 
     setCurrentSettings(settings) {
-        if (settings.multiselect !== undefined) {
+        if (settings) {
             this.multiselect = settings.multiselect;
-        }
-        if (settings.testingMode !== undefined) {
             this.testingMode = settings.testingMode;
-        }
-        if (settings.selectionMode !== undefined) {
             this.selectionMode = settings.selectionMode;
+            this.selectionMode = settings.taskDetailsRedirection;
         }
     }
 
@@ -99,7 +97,7 @@ export class TasksCloudDemoComponent implements OnInit {
     }
 
     onRowClick(taskId) {
-        if (!this.multiselect && this.selectionMode !== 'multiple') {
+        if (!this.multiselect && this.selectionMode !== 'multiple' && this.taskDetailsRedirection) {
             this.router.navigate([`/cloud/${this.appName}/task-details/${taskId}`]);
         }
     }