AAE-28286 Show process variables columns in datatable fix (#10383)

* AAE-28286 Show process variables columns in datatable fix

* fix lint

lib/core/src/lib/datatable/data/data-table.schema.ts

@@ -16,7 +16,7 @@
  */
 
 import { ContentChild, Input, Directive } from '@angular/core';
-import { ReplaySubject } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 import { AppConfigService } from '../../app-config/app-config.service';
 import { DataColumnListComponent } from '../data-column/data-column-list.component';
 import { DataColumn } from './data-column.model';
@@ -42,18 +42,19 @@ export abstract class DataTableSchema<T = unknown> {
 
     private layoutPresets = {};
 
-    private columnsSchemaSubject$ = new ReplaySubject<boolean>();
+    protected columnsSchemaSubject$ = new BehaviorSubject<boolean>(false);
     isColumnSchemaCreated$ = this.columnsSchemaSubject$.asObservable();
 
     constructor(private appConfigService: AppConfigService, protected presetKey: string, protected presetsModel: any) {}
 
     public createDatatableSchema(): void {
         this.loadLayoutPresets();
+
         if (!this.columns || this.columns.length === 0) {
             this.createColumns();
             this.columnsSchemaSubject$.next(true);
         } else {
-            this.columnsSchemaSubject$.next(false);
+            this.columnsSchemaSubject$.next(true);
         }
     }
 

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts

@@ -203,7 +203,6 @@ describe('ProcessListCloudComponent', () => {
                 done();
             });
             component.appName = appName.currentValue;
-            component.ngAfterContentInit();
             component.ngOnChanges({ appName });
             fixture.detectChanges();
         });
@@ -480,7 +479,6 @@ describe('ProcessListCloudComponent', () => {
                 done();
             });
             component.appName = appName.currentValue;
-            component.ngAfterContentInit();
             component.ngOnChanges({ appName });
             fixture.detectChanges();
         });

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts

@@ -46,7 +46,7 @@ import {
     DataColumn
 } from '@alfresco/adf-core';
 import { ProcessListCloudService } from '../services/process-list-cloud.service';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { BehaviorSubject, combineLatest, Subject } from 'rxjs';
 import { processCloudPresetsDefaultModel } from '../models/process-cloud-preset.model';
 import { ProcessListRequestModel, ProcessQueryCloudRequestModel } from '../models/process-cloud-query-request.model';
 import { ProcessListCloudSortingModel } from '../models/process-list-sorting.model';
@@ -66,11 +66,9 @@ const PRESET_KEY = 'adf-cloud-process-list.presets';
     styleUrls: ['./process-list-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class ProcessListCloudComponent
+export class ProcessListCloudComponent extends DataTableSchema<ProcessListDataColumnCustomData> implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy {
-extends DataTableSchema<ProcessListDataColumnCustomData>
+
-implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy {
+    @ViewChild(DataTableComponent) dataTable: DataTableComponent;
-    @ViewChild(DataTableComponent)
-    dataTable: DataTableComponent;
 
     @ContentChild(CustomEmptyContentTemplateDirective)
     emptyCustomContent: CustomEmptyContentTemplateDirective;
@@ -274,6 +272,8 @@ implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy {
 
     private defaultSorting = { key: 'startDate', direction: 'desc' };
 
+    private fetchProcessesTrigger$ = new Subject<void>();
+
     constructor(
         @Inject(PROCESS_SEARCH_API_METHOD_TOKEN) @Optional() private searchMethod: 'GET' | 'POST',
         private processListCloudService: ProcessListCloudService,
@@ -292,6 +292,44 @@ implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy {
             skipCount: 0,
             totalItems: 0
         });
+
+        this.isLoading = true;
+
+        combineLatest([
+            this.isColumnSchemaCreated$,
+            this.fetchProcessesTrigger$
+        ]).pipe(
+            filter(([isColumnSchemaCreated]) => {
+                return isColumnSchemaCreated;
+            }),
+            switchMap(() => {
+                console.count('load');
+                if (this.searchMethod === 'POST') {
+                    const requestNode = this.createProcessListRequestNode();
+                    this.processListRequestNode = requestNode;
+                    return this.processListCloudService.fetchProcessList(requestNode).pipe(take(1));
+                } else {
+                    const requestNode = this.createRequestNode();
+                    this.requestNode = requestNode;
+                    return this.processListCloudService.getProcessByRequest(requestNode).pipe(take(1));
+                }
+            }),
+            takeUntil(this.onDestroy$)
+        ).subscribe({
+            next: (processes) => {
+                this.rows = this.variableMapperService.mapVariablesByColumnTitle(processes.list.entries, this.columns);
+
+                this.dataAdapter = new ProcessListDatatableAdapter(this.rows, this.columns);
+
+                this.success.emit(processes);
+                this.isLoading = false;
+                this.pagination.next(processes.list.pagination);
+            },
+            error: (error) => {
+                this.error.emit(error);
+                this.isLoading = false;
+            }
+        });
     }
 
     ngAfterContentInit() {
@@ -340,6 +378,7 @@ implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy {
         if (this.isPropertyChanged(changes, 'sorting')) {
             this.formatSorting(changes['sorting'].currentValue);
         }
+
         if (this.isAnyPropertyChanged(changes)) {
             this.reload();
         }
@@ -351,48 +390,12 @@ implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy {
 
     reload() {
         if (this.appName || this.appName === '') {
-            this.load();
+            this.fetchProcessesTrigger$.next();
         } else {
             this.rows = [];
         }
     }
 
-    private load() {
-        this.isLoading = true;
-
-        this.isColumnSchemaCreated$
-            .pipe(
-                filter((isColumnSchemaCreated) => !!isColumnSchemaCreated),
-                take(1),
-                switchMap(() => {
-                    if (this.searchMethod === 'POST') {
-                        const requestNode = this.createProcessListRequestNode();
-                        this.processListRequestNode = requestNode;
-                        return this.processListCloudService.fetchProcessList(requestNode).pipe(take(1));
-                    } else {
-                        const requestNode = this.createRequestNode();
-                        this.requestNode = requestNode;
-                        return this.processListCloudService.getProcessByRequest(requestNode).pipe(take(1));
-                    }
-                }),
-                takeUntil(this.onDestroy$)
-            )
-            .subscribe({
-                next: (processes) => {
-                    this.rows = this.variableMapperService.mapVariablesByColumnTitle(processes.list.entries, this.columns);
-
-                    this.dataAdapter = new ProcessListDatatableAdapter(this.rows, this.columns);
-
-                    this.success.emit(processes);
-                    this.isLoading = false;
-                    this.pagination.next(processes.list.pagination);
-                },
-                error: (error) => {
-                    this.error.emit(error);
-                    this.isLoading = false;
-                }
-            });
-    }
 
     private isAnyPropertyChanged(changes: SimpleChanges): boolean {
         for (const property in changes) {

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts

@@ -151,7 +151,6 @@ describe('TaskListCloudComponent', () => {
             spyOn(taskListCloudService, 'getTaskByRequest').and.returnValue(of(fakeGlobalTasks));
             const appName = new SimpleChange(null, 'FAKE-APP-NAME', true);
 
-            fixture.detectChanges();
             component.ngOnChanges({ appName });
             fixture.detectChanges();
 
@@ -214,7 +213,6 @@ describe('TaskListCloudComponent', () => {
             });
 
             component.reload();
-            fixture.detectChanges();
         });
 
         it('should call endpoint when a column visibility gets changed', () => {
@@ -244,16 +242,19 @@ describe('TaskListCloudComponent', () => {
                 component.status = 'mock-status';
                 component.lastModifiedFrom = 'mock-lastmodified-date';
                 component.owner = 'mock-owner-name';
+
                 const priorityChange = new SimpleChange(undefined, 1, true);
                 const statusChange = new SimpleChange(undefined, 'mock-status', true);
                 const lastModifiedFromChange = new SimpleChange(undefined, 'mock-lastmodified-date', true);
                 const ownerChange = new SimpleChange(undefined, 'mock-owner-name', true);
+
                 component.ngOnChanges({
                     priority: priorityChange,
                     status: statusChange,
                     lastModifiedFrom: lastModifiedFromChange,
                     owner: ownerChange
                 });
+
                 fixture.detectChanges();
                 expect(component.isListEmpty()).toBeFalsy();
                 expect(getTaskByRequestSpy).toHaveBeenCalled();
@@ -357,7 +358,6 @@ describe('TaskListCloudComponent', () => {
             });
 
             component.reload();
-            fixture.detectChanges();
         });
 
         it('should call endpoint when a column visibility gets changed', () => {

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts

@@ -197,6 +197,8 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent<ProcessLi
         map(([isLoadingPreferences, isReloading]) => isLoadingPreferences || isReloading)
     );
 
+    private fetchProcessesTrigger$ = new Subject<void>();
+
     constructor(
         @Inject(TASK_SEARCH_API_METHOD_TOKEN) @Optional() private searchMethod: 'GET' | 'POST',
         @Inject(TASK_LIST_CLOUD_TOKEN) public taskListCloudService: TaskListCloudServiceInterface,
@@ -207,20 +209,10 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent<ProcessLi
         private viewModelCreator: VariableMapperService
     ) {
         super(appConfigService, taskCloudService, userPreferences, PRESET_KEY, cloudPreferenceService);
-    }
 
-    ngOnDestroy() {
+        combineLatest([this.isColumnSchemaCreated$, this.fetchProcessesTrigger$])
-        this.onDestroyTaskList$.next(true);
-        this.onDestroyTaskList$.complete();
-    }
-
-    reload() {
-        this.isReloadingSubject$.next(true);
-
-        this.isColumnSchemaCreated$
             .pipe(
                 filter((isColumnSchemaCreated) => !!isColumnSchemaCreated),
-                take(1),
                 switchMap(() => {
                     if (this.searchMethod === 'POST') {
                         const requestNode = this.createTaskListRequestNode();
@@ -255,6 +247,16 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent<ProcessLi
             });
     }
 
+    ngOnDestroy() {
+        this.onDestroyTaskList$.next(true);
+        this.onDestroyTaskList$.complete();
+    }
+
+    reload() {
+        this.isReloadingSubject$.next(true);
+        this.fetchProcessesTrigger$.next();
+    }
+
     private createTaskListRequestNode(): TaskListRequestModel {
         const requestNode: TaskListRequestModel = {
             appName: this.appName,