refactor(action-sidebar): improve layout and optimize scroll handling

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

Author: mjabascal10

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

@@ -6,7 +6,7 @@
     </label>
   </div>
 
-  <div class="card-body d-flex flex-column p-0 flex-grow-1">
+  <div class="card-body d-flex flex-column p-0 flex-grow-1 m-h-0">
     <!-- search -->
     <div class="p-2">
       <app-utm-search-input (searchFor)="searchReport($event)"
@@ -21,9 +21,8 @@
     <div class="d-flex px-2 flex-column h-100 m-h-0">
       <div infiniteScroll
            (scrolled)="onScroll()"
-           [fromRoot]="true"
            [infiniteScrollDistance]="1"
-           [infiniteScrollThrottle]="80"
+           [infiniteScrollThrottle]="150"
            [scrollWindow]="false"
            class="px-1 pb-0 mb-1 overflow-auto flex-grow-1">
         <div *ngFor="let action of actionSidebarService.actionTemplates$ | async; trackBy: trackByFn; let last = last"
@@ -40,7 +39,6 @@
             </div>
           </div>
         </div>
-
       </div>
       <app-utm-spinner *ngIf="actionSidebarService.loading$ | async as loading"
                        class="position-absolute top-50 right-35"

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

@@ -1,9 +1,9 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {last} from 'rxjs/operators';
 import {WorkflowActionsService} from '../../services/workflow-actions.service';
 import {ActionTerminalComponent} from '../action-terminal/action-terminal.component';
 import {ActionSidebarService} from './action-sidebar.service';
-import {last} from "rxjs/operators";
 
 @Component({
   selector: 'app-action-sidebar',
@@ -12,17 +12,18 @@ import {last} from "rxjs/operators";
 })
 export class ActionSidebarComponent implements OnInit, OnDestroy {
 
+  constructor(private workFlowActionService: WorkflowActionsService,
+              public actionSidebarService: ActionSidebarService,
+              private modalService: NgbModal) { }
+
   request = {
     page: 0,
     size: 10,
     'systemOwner.equals': true
   };
 
   searching: any;
-
-  constructor(private workFlowActionService: WorkflowActionsService,
-              public actionSidebarService: ActionSidebarService,
-              private modalService: NgbModal) { }
+  readonly last = last;
 
   ngOnInit() {
     this.actionSidebarService.loadData({
@@ -56,9 +57,14 @@ export class ActionSidebarComponent implements OnInit, OnDestroy {
   }
 
   onScroll() {
-    this.actionSidebarService.loadData({
+
+    this.request = {
       ...this.request,
-      size: this.request.size + 10,
+      size: this.request.size + 10
+    };
+
+    this.actionSidebarService.loadData({
+      ...this.request
     });
   }
 
@@ -69,6 +75,4 @@ export class ActionSidebarComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.actionSidebarService.reset();
   }
-
-  protected readonly last = last;
 }