feat: add terminal template support to UTM code view and enhance playbook card navigation

Author: mjabascal10

frontend/src/app/incident-response/playbooks/playbooks.component.html

@@ -58,7 +58,8 @@ <h5 class="card-title mb-0 label-header">FLOWS</h5>
   <div class="d-flex flex-1 flex-column h-100 m-h-0">
     <div class="d-flex px-1 pt-3 h-100 m-h-0 justify-content-center playbooks-container">
       <div class="playbook-card" *ngFor="let item of playbookService.playbooks$ | async; trackBy: trackByFn">
-        <div class="h-100 text-card-foreground shadow-sm transition-all d-flex flex-column rounded-lg border border-border bg-background p-3 cursor-pointer">
+        <div [routerLink]="['/soar/create-flow']"
+             [queryParams]="{ id: item.id }" class="h-100 text-card-foreground shadow-sm transition-all d-flex flex-column rounded-lg border border-border bg-background p-3 cursor-pointer">
           <div class="card-header p-0 pb-1 d-flex align-items-center gap-3">
             <div [ngClass]="{'bg-primary': item.active, 'bg-secondary': !item.active}" class="icon-code d-flex justify-content-center  align-items-center">
             </div>

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

@@ -143,7 +143,7 @@ <h4 class="panel-title m-0">Flow Actions</h4>
           </div>
         </div>
 
-        <app-utm-code-view style="width: 800px" class="mt-3" *ngIf="command$ | async as command" [code]="command" [allowCopy]="false"></app-utm-code-view>
+        <app-utm-code-view [template]="'terminal'" style="width: 800px" class="mt-3" *ngIf="command$ | async as command" [code]="command" [allowCopy]="false"></app-utm-code-view>
 
       </div>
 

frontend/src/app/shared/components/utm/util/utm-code-view/utm-code-view.component.html

@@ -1,9 +1,20 @@
-<div class="card p-2 d-flex flex-row justify-content-between w-100 align-items-center">
-    <code *ngIf="code; else noCodePlaceholder" [innerHTML]="code" (copy)="preventCopy($event)" class="user-select"></code>
-    <i (click)="copyCode()" *ngIf="allowCopy" class="icon-copy cursor-pointer"
-       ngbTooltip="Copy"></i>
+<div *ngIf="template === 'default'" class="card p-2 d-flex flex-row justify-content-between w-100 align-items-center">
+  <code *ngIf="code; else noCodePlaceholder" [innerHTML]="code" (copy)="preventCopy($event)" class="user-select"></code>
+  <i (click)="copyCode()" *ngIf="allowCopy" class="icon-copy cursor-pointer"
+     ngbTooltip="Copy"></i>
   <ng-template  #noCodePlaceholder>
     <code class="user-select text-muted">No code available, you must select the platform first.</code>
     <i class="icon-warning"></i>
   </ng-template>
 </div>
+
+
+<div *ngIf="template === 'terminal'" class="window mb-3">
+  <div class="terminal">
+    <div class="d-flex justify-content-start align-items-start">
+      <span class="console-info">  $ </span>
+      <span [innerHTML]="code" (copy)="preventCopy($event)" class="command ml-2"></span>
+    </div>
+  </div>
+</div>
+

frontend/src/app/shared/components/utm/util/utm-code-view/utm-code-view.component.scss

@@ -1,4 +1,3 @@
-.user-select {
-  width: 95%;
-  user-select: none
+.window {
+  min-height: 200px;
 }

frontend/src/app/shared/components/utm/util/utm-code-view/utm-code-view.component.ts

@@ -9,6 +9,7 @@ import {UtmToastService} from '../../../../alert/utm-toast.service';
 export class UtmCodeViewComponent implements OnInit, OnChanges {
     @Input() code: string;
     @Input() allowCopy = true;
+    @Input() template: 'default' | 'terminal' = 'default';
     private copy: any;
     str: string;