add tasks to scenario detail view

src/app/app.module.ts

@@ -151,6 +151,7 @@ import {
   numberListIcon,
   syncIcon,
 } from '@cds/core/icon';
+import { ReadonlyTaskComponent } from './scenario/task/readonly-task/readonly-task.component';
 
 ClarityIcons.addIcons(
   plusIcon,
@@ -285,6 +286,7 @@ export function jwtOptionsFactory(): JwtConfig {
     DashboardDetailsComponent,
     TaskComponent,
     TaskFormComponent,
+    ReadonlyTaskComponent,
     SingleTaskVerificationMarkdownComponent,
   ],
   imports: [

src/app/configuration/code-with-syntax-highlighting/code-with-syntax-highlighting.component.html

@@ -1,5 +1,5 @@
 <div class="code-editor" #codeEditor>
-    <textarea (input)="onValueChange($event)" (resize)="manualResizeEvent($event)" [(ngModel)]="_textValue" #textarea>
+    <textarea (input)="onValueChange($event)" (resize)="manualResizeEvent($event)" [(ngModel)]="_textValue" readonly="readonly" #textarea>
     </textarea>
     <code #code class="{{ language }}" [innerHTML]="highlightedText"></code>
 </div>

src/app/configuration/code-with-syntax-highlighting/code-with-syntax-highlighting.component.ts

@@ -52,6 +52,9 @@ export class CodeWithSyntaxHighlightingComponent
   @Input()
   resizeable: boolean = false;
 
+  @Input()
+  readonly: boolean = false
+
   @Input()
   outline: string = 'solid 1px';
 

src/app/scenario/scenario-detail/scenario-detail.component.html

@@ -37,7 +37,9 @@
         >
       </clr-stack-block>
     </clr-stack-block>
-    <clr-stack-block *ngIf="scenario.categories.length > 0 || scenario.tags.length >0">
+    <clr-stack-block
+      *ngIf="scenario.categories.length > 0 || scenario.tags.length > 0"
+    >
       <clr-stack-label>Categories & Tags</clr-stack-label>
       <clr-stack-block *ngIf="scenario.categories.length > 0">
         <clr-stack-label>Categories</clr-stack-label>
@@ -48,13 +50,20 @@
         >
       </clr-stack-block>
       <clr-stack-block *ngIf="scenario.tags.length > 0">
-        <clr-stack-label >Tags</clr-stack-label>
-        <clr-stack-content 
+        <clr-stack-label>Tags</clr-stack-label>
+        <clr-stack-content
           ><span class="label" *ngFor="let tag of scenario.tags">
             {{ tag }}</span
           ></clr-stack-content
         >
       </clr-stack-block>
     </clr-stack-block>
+
+    <clr-stack-block *ngIf="scenario.vm_tasks.length > 0">
+      <clr-stack-label>Tasks</clr-stack-label>
+      <clr-stack-block id="single-column-block">
+        <clr-stack-label ><app-task [selectedScenario]="scenario" [readonly]="true"></app-task></clr-stack-label>
+      </clr-stack-block>
+    </clr-stack-block>
   </clr-stack-view>
 </div>

src/app/scenario/scenario-detail/scenario-detail.component.scss

@@ -0,0 +1,15 @@
+#single-column-block ::ng-deep .stack-block-label {
+    max-width: 100%;
+    flex-basis: 100%;
+}
+
+#single-column-block ::ng-deep .stack-view-key {
+    min-width: 100%;
+    // max-width: 100%;
+    // flex-basis: 100%;
+    // flex: 0 0 100%;
+}
+
+#single-column-block ::ng-deep .stack-block-content {
+    display: none;
+}

src/app/scenario/task-form/task-form.component.html

@@ -32,6 +32,7 @@
     <label>Command</label>
     <app-code-with-syntax-highlighting
       [language]="supportedLanguages.BASH"
+      [readonly]="readonly"
       [height]="'2rem'"
       [width]="'90%'"
       [outline]="'none'"
@@ -84,6 +85,7 @@
     <label>Regex to match</label>
     <app-code-with-syntax-highlighting
       [language]="supportedLanguages.REGEX"
+      [readonly]="readonly"
       [height]="'2rem'"
       [width]="'90%'"
       [outline]="'none'"

src/app/scenario/task-form/task-form.component.ts

@@ -18,6 +18,8 @@ export class TaskFormComponent implements OnInit {
 
   @Input() editTask: EditTask;
 
+  @Input() readonly = false;
+
   @Output() taskChanged = new EventEmitter<EditTask>();
 
   supportedLanguages = supportedLanguages;
@@ -75,6 +77,7 @@ export class TaskFormComponent implements OnInit {
       }
       this.previousReturnType = newValue;
     });
+    if (this.readonly) this.taskForm.disable()
   }
 
   private buildEditTaskFromFormData(): EditTask {

src/app/scenario/task/readonly-task/readonly-task.component.html

@@ -0,0 +1,102 @@
+<div class="container">
+  <div class="clr-row">
+    <!-- <div class="clr-col-6"></div> -->
+    <div class="clr-col-5">
+      <h6><b>Node</b></h6>
+    </div>
+    <div class="clr-col-6">
+      <p>{{ editTask.vmName }}</p>
+    </div>
+  </div>
+
+  <div class="clr-row">
+    <!-- <div class="clr-col-6"></div> -->
+    <div class="clr-col-5">
+      <h6><b>Name</b></h6>
+    </div>
+    <div class="clr-col-6">
+      <p>{{ editTask.name }}</p>
+    </div>
+  </div>
+
+  <div class="clr-row">
+    <!-- <div class="clr-col-6"></div> -->
+    <div class="clr-col-5">
+      <h6><b>Description</b></h6>
+    </div>
+    <div class="clr-col-6">
+      <p>{{ editTask.description }}</p>
+    </div>
+  </div>
+
+  <div class="clr-row">
+    <!-- <div class="clr-col-6"></div> -->
+    <div class="clr-col-5">
+      <h6><b>Command</b></h6>
+    </div>
+    <div class="clr-col-6">
+      <p></p>
+      <app-code-with-syntax-highlighting
+        [language]="supportedLanguages.BASH"
+        [readonly]="true"
+        [height]="'2rem'"
+        [width]="'90%'"
+        [outline]="'none'"
+        [textValue]="editTask.command"
+      ></app-code-with-syntax-highlighting>
+    </div>
+  </div>
+
+  <div class="clr-row">
+    <!-- <div class="clr-col-6"></div> -->
+    <div class="clr-col-5">
+      <h6><b>Return Type</b></h6>
+    </div>
+    <div class="clr-col-6">
+      <p>{{ translateReturnType(editTask.return_type) }}</p>
+    </div>
+  </div>
+  <div
+    class="clr-row"
+    *ngIf="isOfReturnType(['Return Text', 'Return Code and Text'])"
+  >
+    <!-- <div class="clr-col-6"></div> -->
+    <div class="clr-col-5">
+      <h6><b>Expected Output</b></h6>
+    </div>
+    <div class="clr-col-6">
+      <p>{{ editTask.expected_output_value }}</p>
+    </div>
+  </div>
+
+  <div class="clr-row" *ngIf="isOfReturnType(['Match Regex'])">
+    <!-- <div class="clr-col-6"></div> -->
+    <div class="clr-col-5">
+      <h6><b>Regex to match</b></h6>
+    </div>
+    <div class="clr-col-6">
+      <p></p>
+      <app-code-with-syntax-highlighting
+        [language]="supportedLanguages.REGEX"
+        [readonly]="true"
+        [height]="'2rem'"
+        [width]="'90%'"
+        [outline]="'none'"
+        [textValue]="editTask.expected_output_value"
+      ></app-code-with-syntax-highlighting>
+    </div>
+  </div>
+
+  <div
+    class="clr-row"
+    *ngIf="isOfReturnType(['Return Code', 'Return Code and Text'])"
+  >
+    <!-- <div class="clr-col-6"></div> -->
+    <div class="clr-col-5">
+      <h6><b>Return Code</b></h6>
+    </div>
+    <div class="clr-col-6">
+      <p>{{ editTask.expected_return_code }}</p>
+    </div>
+  </div>
+</div>

src/app/scenario/task/readonly-task/readonly-task.component.scss

@@ -0,0 +1,5 @@
+.container {
+    margin-bottom: 1rem;
+    margin-left: 1.5rem;
+    // width: 80%;
+}

src/app/scenario/task/readonly-task/readonly-task.component.ts

@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { ReturnType, Task } from 'src/app/data/vm-tasks';
+import { supportedLanguages } from 'src/app/configuration/code-with-syntax-highlighting/code-with-syntax-highlighting.component';
+
+export interface EditTask extends Task {
+  id: string;
+  vmName: string;
+}
+
+@Component({
+  selector: 'app-readonly-task',
+  templateUrl: './readonly-task.component.html',
+  styleUrls: ['./readonly-task.component.scss'],
+})
+export class ReadonlyTaskComponent {
+
+  @Input() editTask: EditTask;
+
+  supportedLanguages = supportedLanguages;
+
+  translateReturnType(rtype: string) {
+    return ReturnType[rtype]
+  }
+
+  isOfReturnType(returnTypes: string[]): boolean {
+    return returnTypes.includes(this.translateReturnType(this.editTask.return_type));
+  }
+}

src/app/scenario/task/task.component.html

@@ -1,12 +1,14 @@
 <div class="split-grid">
+  <ng-container *ngIf="!readonly">
   <h4 style="margin-bottom: 0.4rem">Tasks</h4>
-  <button
-    class="btn btn-sm btn-link add-task-btn"
-    (click)="addTask()"
-    *rbac="['scenarios.update']"
-  >
-    New Task
-  </button>
+    <button
+      class="btn btn-sm btn-link add-task-btn"
+      (click)="addTask()"
+      *rbac="['scenarios.update']"
+    >
+      New Task
+    </button>
+  </ng-container>
 </div>
 
 <clr-accordion>
@@ -15,21 +17,28 @@ <h4 style="margin-bottom: 0.4rem">Tasks</h4>
       <clr-accordion-title style="width: 100%"
         ><div class="split-grid">
           <div>{{ task.vmName }}: {{ task.name }}</div>
-          <button
-            class="btn btn-sm btn-link remove-task-btn"
-            (click)="deleteTask(task.id)"
-            *rbac="['scenarios.update']"
-          >
-            Delete Task
-          </button>
+          <ng-container *ngIf="!readonly">
+            <button
+              class="btn btn-sm btn-link remove-task-btn"
+              (click)="deleteTask(task.id)"
+              *rbac="['scenarios.update']"
+            >
+              Delete Task
+            </button>
+          </ng-container>
         </div>
       </clr-accordion-title>
       <clr-accordion-content *clrIfExpanded>
         <app-task-form
+          *ngIf="!readonly"
           [virtualMachineNames]="vmNames"
           [editTask]="task"
           (taskChanged)="updateTask($event)"
         ></app-task-form>
+        <app-readonly-task
+          *ngIf="readonly"
+          [editTask]="task"
+        ></app-readonly-task>
       </clr-accordion-content>
     </clr-accordion-panel>
   </ng-container>

src/app/scenario/task/task.component.ts

@@ -30,6 +30,8 @@ export class TaskComponent {
     });
   }
 
+  @Input() readonly = false
+
   editTasks: EditTask[] = [];
 
   changedTasks: EditTask[] = [];