fix: enhance action sidebar interaction and update action terminal for better context handling

Author: mjabascal10

frontend/src/app/incident-response/shared/component/action-builder/action-builder.component.html

@@ -86,7 +86,7 @@ <h4 class="panel-title m-0">Flow Actions</h4>
 
           <div *ngFor="let action of workflow; let first = first" class="action-wrapper d-flex flex-column w-100">
             <!-- Action block -->
-            <div class="action-block d-flex flex-column w-100 p-2" style="height: 120px;">
+            <div (click)="openActionSidebar(action)" class="action-block cursor-pointer d-flex flex-column w-100 p-2" style="height: 120px;">
 
               <div class="d-flex justify-content-between align-items-center w-100 mb-1">
                 <div class="fw-bold pl-2">{{ action.title }}</div>

frontend/src/app/incident-response/shared/component/action-builder/action-builder.component.ts

@@ -112,8 +112,9 @@ export class ActionBuilderComponent implements OnInit, OnDestroy {
       );
   }
 
-  openActionSidebar() {
+  openActionSidebar(action: any = null) {
     const dialogRef = this.modalService.open(ActionTerminalComponent, {size: 'lg', centered: true});
+    dialogRef.componentInstance.action = action || null;
 
     dialogRef.result.then(
       result => {

frontend/src/app/incident-response/shared/component/action-terminal/action-terminal.component.html

@@ -74,7 +74,7 @@ <h6 class="font-weight-semibold mt-3 mb-2">Alert fields</h6>
     </button>
 
     <button [disabled]="!form.valid" (click)="create()" class="btn utm-button utm-button-primary ml-2 ng-star-inserted">
-       Create
+      {{ action ? 'Update' : 'Create' }}
     </button>
   </div>
   </form>

frontend/src/app/incident-response/shared/component/action-terminal/action-terminal.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import {ALERT_FIELDS, INCIDENT_AUTOMATION_ALERT_FIELDS} from '../../../../shared/constants/alert/alert-field.constant';
@@ -9,7 +9,7 @@ import {ALERT_FIELDS, INCIDENT_AUTOMATION_ALERT_FIELDS} from '../../../../shared
   styleUrls: ['./action-terminal.component.scss']
 })
 export class ActionTerminalComponent implements OnInit {
-
+  @Input() action: any;
   form: FormGroup;
   alertFields = ALERT_FIELDS;
   command: any;
@@ -27,9 +27,9 @@ export class ActionTerminalComponent implements OnInit {
 
   ngOnInit() {
     this.form = this.fb.group({
-      title: ['', [Validators.required, Validators.minLength(5)]],
-      description: ['', [Validators.required, Validators.minLength(5)]],
-      command: ['', Validators.required],
+      title: [ this.action ? this.action.title : '', [Validators.required, Validators.minLength(5)]],
+      description: [this.action ? this.action.description : '', [Validators.required, Validators.minLength(5)]],
+      command: [this.action ? this.action.command : '', Validators.required],
     });
   }