feat: enhance playbook component with improved layout and functionality

Signed-off-by: Manuel Abascal <[email protected]>

Author: mjabascal10

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

@@ -13,10 +13,8 @@ <h2 id="radix-:rf8:" class="font-semibold tracking-tight line-clamp-1 flex items
       </div>
 
       <div class="playbook-list-container m-h-0 d-flex flex-column gap-3 overflow-auto mt-3 px-1">
-        <div *ngFor="let item of playbookService.playbooks$ | async; trackBy: trackByFn"
-             class="playbook-item-card d-flex align-items-center rounded border p-3 cursor-pointer"
-             [routerLink]="['/soar/create-flow']"
-             [queryParams]="{ id: item.id, template: true }">
+        <div (click)="createNewPlaybook({ id: item.id, template: true })" *ngFor="let item of playbookService.playbooks$ | async; trackBy: trackByFn"
+             class="playbook-item-card d-flex align-items-center rounded border p-3 cursor-pointer">
 
           <div class="playbook-icon-small d-flex justify-content-center align-items-center flex-shrink-0">
             <i class="fa fa-sitemap"></i>

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

@@ -46,17 +46,17 @@ export class NewPlaybookComponent implements OnInit, AfterViewInit {
     this.playbookService.loadData({...this.request});
   }
 
-  createNewPlaybook() {
-    this.router.navigate(['/soar/create-flow']);
+  createNewPlaybook(params?: any) {
+    this.router.navigate(['/soar/create-flow'], { queryParams: params });
     this.activeModal.close();
   }
 
   searchByRule($event: string | number) {
-
-  }
-
-  selectPlatform(platform: string) {
-
+    this.request['name.contains'] = $event;
+    this.playbookService.loadData({
+      ...this.request,
+      page: 0,
+    });
   }
 
   trackByFn(index: number, item: any) {