fix: enhance action sidebar functionality with infinite scroll and loading state management

Author: mjabascal10

frontend/src/app/incident-response/playbooks/playbook.service.ts

@@ -40,4 +40,9 @@ export class PlaybookService {
   loadData(request: any){
     this.request$.next(request);
   }
+
+  reset() {
+    this.request$.next(null);
+    this.totalItems.next(0);
+  }
 }

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

@@ -115,7 +115,7 @@ <h4 class="mb-1 font-weight-semibold text-muted">Start building</h4>
       </div>
     </div>
 
-    <app-utm-spinner class="position-absolute right-50"  [height]="'110px'" [loading]="(playbookService.loading$ | async)" [width]="'110px'"
+    <app-utm-spinner *ngIf="(playbookService.loading$ | async)" class="position-absolute right-50"  [height]="'110px'" [loading]="loading" [width]="'110px'"
                      label="Loading playbooks">
     </app-utm-spinner>
 
@@ -127,7 +127,7 @@ <h4 class="mb-1 font-weight-semibold text-muted">Start building</h4>
                         [boundaryLinks]="true"
                         [collectionSize]="totalItems"
                         [maxSize]="10"
-                        [pageSize]="5"
+                        [pageSize]="itemsPerPage"
                         [rotate]="true"
                         [size]="'sm'"></ngb-pagination>
 

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

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, OnInit} from '@angular/core';
+import {AfterViewInit, Component, OnDestroy, OnInit} from '@angular/core';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {Observable, of} from 'rxjs';
 import {catchError, finalize, map, tap} from 'rxjs/operators';
@@ -19,7 +19,7 @@ import {NewPlaybookComponent} from "../shared/component/new-playbook/new-playboo
   templateUrl: './playbooks.component.html',
   styleUrls: ['./playbooks.component.scss']
 })
-export class PlaybooksComponent implements OnInit, AfterViewInit {
+export class PlaybooksComponent implements OnInit, AfterViewInit, OnDestroy {
   loading = true;
   rules: IncidentRuleType[];
   range: TimeFilterType;
@@ -143,4 +143,8 @@ export class PlaybooksComponent implements OnInit, AfterViewInit {
   newPlaybook() {
     this.modalService.open(NewPlaybookComponent, {size: 'lg', backdrop: 'static', centered: true});
   }
+
+  ngOnDestroy(): void {
+    this.playbookService.reset();
+  }
 }

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

@@ -86,27 +86,26 @@ <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 (click)="openActionSidebar(action)" class="action-block cursor-pointer d-flex flex-column w-100 p-2" style="height: 120px;">
+            <div 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>
+              <div style="min-height: 37px" class="d-flex justify-content-between align-items-end w-100 mb-1">
+                <div class="fw-bold action-title">{{ action.title }}</div>
                 <div class="d-flex align-items-center">
                   <app-action-conditional
                     *ngIf="!first"
                     [option]="action.conditional"
                     (optionChange)="updateAction(action, $event)">
                   </app-action-conditional>
-                  <div
-                    class="icon-cross2 font-size-xs cursor-pointer ml-2"
+                  <div style="min-height: 37px" class="d-flex flex-column justify-content-start icon-cross2 font-size-xs cursor-pointer ml-2"
                     (click)="removeAction(action)">
                   </div>
                 </div>
               </div>
 
-              <div class="d-flex flex-grow-1 align-items-center w-100">
+              <div (click)="openActionSidebar(action)" class="d-flex flex-grow-1 align-items-center w-100">
                 <div class="icon-box mr-2" style="margin-right: 8px;"></div>
                 <div class="d-flex flex-column w-100 justify-content-center">
-                  <div class="card-body pl-2 pr-0 py-2 w-100">
+                  <div class="card-body p-0 pl-2 pb-2  w-100">
                     <div class="text-muted" style="
                       display: -webkit-box;
                       -webkit-line-clamp: 2;

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

@@ -141,5 +141,13 @@
   box-shadow: unset;
 }
 
+.action-title {
+  padding-left: 47px;
+}
+
+.icon-cross2:before {
+  color: #495057!important;
+}
+
 
 

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

@@ -19,7 +19,14 @@
     </div>
 
 
-    <div class="px-3 pb-3 overflow-auto flex-grow-1">
+    <div
+      infiniteScroll
+      (scrolled)="onScroll()"
+      [fromRoot]="true"
+      [infiniteScrollDistance]="1"
+      [infiniteScrollThrottle]="80"
+      [scrollWindow]="false"
+      class="px-3 pb-3 overflow-auto flex-grow-1">
       <div *ngFor="let action of actionSidebarService.actionTemplates$ | async"
            class="card mb-3 action-block shadow-sm cursor-pointer"
            (click)="addToWorkFlow(action)">
@@ -33,7 +40,9 @@
           </div>
         </div>
       </div>
-
+      <app-utm-spinner *ngIf="actionSidebarService.loading$ | async as loading"
+                       [loading]="loading" label="Loading actions...">
+      </app-utm-spinner>
       <div class="card mb-3 available-action phantom-action"
            (click)="openActionSidebar()">
         <div class="card-body d-flex flex-column px-2">

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {WorkflowActionsService} from '../../services/workflow-actions.service';
 import {ActionTerminalComponent} from '../action-terminal/action-terminal.component';
@@ -9,11 +9,11 @@ import {ActionSidebarService} from './action-sidebar.service';
   templateUrl: './action-sidebar.component.html',
   styleUrls: ['./action-sidebar.component.scss']
 })
-export class ActionSidebarComponent implements OnInit {
+export class ActionSidebarComponent implements OnInit, OnDestroy {
 
   request = {
     page: 0,
-    size: 25,
+    size: 5,
     'systemOwner.equals': true
   };
 
@@ -53,4 +53,15 @@ export class ActionSidebarComponent implements OnInit {
       },
     );
   }
+
+  onScroll() {
+    this.actionSidebarService.loadData({
+      ...this.request,
+      size: this.request.size + 10,
+    });
+  }
+
+  ngOnDestroy() {
+    this.actionSidebarService.reset();
+  }
 }

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

@@ -1,7 +1,8 @@
 import {HttpResponse} from '@angular/common/http';
 import {Injectable} from '@angular/core';
-import {BehaviorSubject} from 'rxjs';
-import {map, switchMap} from 'rxjs/operators';
+import {BehaviorSubject, of} from 'rxjs';
+import {catchError, filter, finalize, map, switchMap, tap} from 'rxjs/operators';
+import {UtmToastService} from '../../../../shared/alert/utm-toast.service';
 import {
   IncidentResponseActionTemplate,
   IncidentResponseActionTemplateService
@@ -13,18 +14,36 @@ import {
 export class ActionSidebarService {
 
   private request = new BehaviorSubject<any>(null);
+  private loading = new BehaviorSubject<boolean>(false);
+
   request$ = this.request.asObservable();
+  loading$ = this.loading.asObservable();
 
   actionTemplates$ = this.request$
     .pipe(
-      switchMap((request) => this.incidentResponseActionTemplateService.query(request)),
-      map((response: HttpResponse<IncidentResponseActionTemplate[]>) => response.body)
+      filter(request => !!request),
+      tap(() => this.loading.next(true)),
+      switchMap((request) => this.incidentResponseActionTemplateService.query(request)
+        .pipe(
+          map((response: HttpResponse<IncidentResponseActionTemplate[]>) => response.body),
+          catchError(() => {
+            this.toastService.showError('Error', 'Failed to load action templates');
+            return of([]);
+          }),
+          finalize(() => this.loading.next(false))
+        )
+      ),
     );
 
-  constructor(private incidentResponseActionTemplateService: IncidentResponseActionTemplateService) {}
+  constructor(private incidentResponseActionTemplateService: IncidentResponseActionTemplateService,
+              private toastService: UtmToastService,) {}
 
   loadData(request: any) {
     this.request.next(request);
   }
 
+  reset() {
+    this.request.next(null);
+  }
+
 }