feat: enhance playbook component with improved layout and functionality

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

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

@@ -104,9 +104,11 @@ <h5 class="card-title mb-0 label-header">FLOWS</h5>
       </div>
     </div>
 
-    <div class="col-12 text-center py-5" *ngIf="playbookService.loading$ | async as loading" >
-      <div *ngIf="playbookService.totalItems$ | async as totalItems" class="d-flex flex-column align-items-center justify-content-center">
-        <ng-container *ngIf="!loading && totalItems === 0">
+    <div class="col-12 text-center py-5">
+      <ng-container *ngIf="{ loading: playbookService.loading$ | async,
+                              totalItems: playbookService.totalItems$ | async
+                           } as data">
+        <ng-container *ngIf="!data.loading && data.totalItems === 0">
           <i class="icon-play text-muted mb-3" style="font-size: 48px;"></i>
           <h4 class="mb-1 font-weight-semibold text-muted">Start building</h4>
           <p class="text-muted mb-4">Begin with a template, or start from scratch.</p>
@@ -115,13 +117,18 @@ <h4 class="mb-1 font-weight-semibold text-muted">Start building</h4>
             New Flow
           </a>
         </ng-container>
-        <app-utm-spinner  class="position-absolute right-50"  [height]="'110px'" [loading]="loading" [width]="'110px'"
-                          label="Loading playbooks">
+        <app-utm-spinner
+          class="position-absolute right-50"
+          [height]="'110px'"
+          [loading]="data.loading"
+          [width]="'110px'"
+          label="Loading playbooks">
         </app-utm-spinner>
-      </div>
+      </ng-container>
     </div>
 
 
+
     <div *ngIf="playbookService.totalItems$ | async as totalItems" class="mt-3">
       <div class="row justify-content-center">
         <ngb-pagination (pageChange)="loadPage($event)"

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

@@ -110,7 +110,7 @@
   gap: 1rem;
   align-items: stretch;
   overflow-y: auto;
-  align-content: start;
+  align-content: flex-start;
 }
 
 .playbook-card {

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

@@ -32,7 +32,11 @@ export class ActionSidebarComponent implements OnInit, OnDestroy {
   }
 
   addToWorkFlow(action: any) {
-    this.workFlowActionService.addActions(action);
+    const actionToAdd = {
+      ...action,
+      id: null
+    };
+    this.workFlowActionService.addActions(actionToAdd);
   }
 
   searchReport($event: string ) {

frontend/src/app/incident-response/shared/component/new-playbook/new-playbook.component.ts

@@ -4,8 +4,8 @@ import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
 import {Observable, of} from 'rxjs';
 import {UtmToastService} from '../../../../shared/alert/utm-toast.service';
 import {InputClassResolve} from '../../../../shared/util/input-class-resolve';
-import {PlaybookService} from '../../services/playbook.service';
 import {IncidentResponseRuleService} from '../../services/incident-response-rule.service';
+import {PlaybookService} from '../../services/playbook.service';
 import {IncidentActionType} from '../../type/incident-action.type';
 
 @Component({