AAE-26189 Replaced observable based counter to avoid flickering (#10290)

* [AAE-26189] replaced observable based counter to avoid flickering

* Empty-Commit

lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html

@@ -22,12 +22,12 @@
                 </span>
             </div>
             <span
-                *ngIf="counters$[filter.key]"
+                *ngIf="counters[filter.key]"
                 [attr.data-automation-id]="filter.key + '_filter-counter'"
                 class="adf-process-filters__entry-counter"
                 [class.adf-active]="isFilterUpdated(filter.key)"
                >
-                {{ counters$[filter.key] | async }}
+                {{ counters[filter.key] }}
             </span>
         </div>
     </button>

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

@@ -118,6 +118,7 @@ describe('ProcessFiltersCloudComponent', () => {
         expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses');
         expect(filters[1].nativeElement.innerText).toContain('FakeRunningProcesses');
         expect(filters[2].nativeElement.innerText).toContain('FakeCompletedProcesses');
+        expect(Object.keys(component.counters).length).toBe(3);
     });
 
     it('should emit an error with a bad response', () => {
@@ -148,6 +149,7 @@ describe('ProcessFiltersCloudComponent', () => {
         expect(component.filters[0].name).toEqual('FakeAllProcesses');
         expect(component.filters[1].name).toEqual('FakeRunningProcesses');
         expect(component.filters[2].name).toEqual('FakeCompletedProcesses');
+        expect(Object.keys(component.counters).length).toBe(3);
     });
 
     it('should not select any filter as default', async () => {

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

@@ -66,7 +66,7 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
     filters$: Observable<ProcessFilterCloudModel[]>;
     currentFilter?: ProcessFilterCloudModel;
     filters: ProcessFilterCloudModel[] = [];
-    counters$: { [key: string]: Observable<number> } = {};
+    counters: { [key: string]: number } = {};
     enableNotifications: boolean;
     currentFiltersValues: { [key: string]: number } = {};
     updatedFiltersSet = new Set<string>();
@@ -109,6 +109,7 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
             next: (res) => {
                 this.resetFilter();
                 this.filters = res || [];
+                this.initFilterCounters();
                 this.selectFilterAndEmit(this.filterParam);
                 this.success.emit(res);
                 this.updateFilterCounters();
@@ -119,6 +120,13 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
         });
     }
 
+    /**
+     * Initialize counter collection for filters
+     */
+    initFilterCounters() {
+        this.filters.forEach((filter) => (this.counters[filter.key] = 0));
+    }
+
     /**
      * Pass the selected filter as next
      *
@@ -249,18 +257,33 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
         }
     }
 
+    /**
+     * Iterate over filters and update counters
+     */
     updateFilterCounters(): void {
         this.filters.forEach((filter: ProcessFilterCloudModel) => {
             this.updateFilterCounter(filter);
         });
     }
 
+    /**
+     *  Get current value for filter and check if value has changed
+     * @param filter filter
+     */
     updateFilterCounter(filter: ProcessFilterCloudModel): void {
-        this.counters$[filter.key] = this.processListCloudService.getProcessCounter(filter.appName, filter.status).pipe(
+        this.processListCloudService
-            tap((filterCounter) => {
+            .getProcessCounter(filter.appName, filter.status)
-                this.checkIfFilterValuesHasBeenUpdated(filter.key, filterCounter);
+            .pipe(
-            })
+                tap((filterCounter) => {
-        );
+                    this.checkIfFilterValuesHasBeenUpdated(filter.key, filterCounter);
+                })
+            )
+            .subscribe((data) => {
+                this.counters = {
+                    ...this.counters,
+                    [filter.key]: data
+                };
+            });
     }
 
     checkIfFilterValuesHasBeenUpdated(filterKey: string, filterValue: number): void {

lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.html

@@ -17,15 +17,15 @@
                         {{ filter.name | translate }}
                     </span>
                 </div>
-                <span *ngIf="counters$[filter.key]"
+                <span *ngIf="counters[filter.key]"
                     [attr.data-automation-id]="filter.key + '_filter-counter'"
                     class="adf-task-filters__entry-counter"
                     [class.adf-active]="wasFilterUpdated(filter.key)">
-                    {{ counters$[filter.key] | async }}
+                    {{ counters[filter.key] }}
                 </span>
             </div>
         </button>
-</mat-action-list>
+    </mat-action-list>
 <ng-template #loading>
     <ng-container>
         <div class="adf-app-list-spinner">

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

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { EventEmitter, Input, Output, OnDestroy, Directive } from '@angular/core';
+import { Directive, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { FilterParamsModel } from '../models/filter-cloud.model';
 
 @Directive()
@@ -45,7 +45,7 @@ export abstract class BaseTaskFiltersCloudComponent implements OnDestroy {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
-    counters$: { [key: string]: Observable<number> } = {};
+    counters: { [key: string]: number } = {};
     updatedCountersSet = new Set<string>();
 
     protected onDestroy$ = new Subject<boolean>();

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

@@ -283,8 +283,8 @@ describe('TaskFiltersCloudComponent', () => {
 
         const updatedFilterCounters = fixture.debugElement.queryAll(By.css('span.adf-active'));
         expect(updatedFilterCounters.length).toBe(1);
-        expect(Object.keys(component.counters$).length).toBe(1);
+        expect(Object.keys(component.counters).length).toBe(3);
-        expect(component.counters$['fake-involved-tasks']).toBeDefined();
+        expect(component.counters['fake-involved-tasks']).toBeDefined();
     });
 
     it('should not update filter counter when notifications are disabled from app.config.json', fakeAsync(() => {

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

@@ -87,6 +87,7 @@ export class TaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent imp
             (res) => {
                 this.resetFilter();
                 this.filters = res || [];
+                this.initFilterCounters();
                 this.selectFilterAndEmit(this.filterParam);
                 this.updateFilterCounters();
                 this.success.emit(res);
@@ -97,17 +98,39 @@ export class TaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent imp
         );
     }
 
-    updateFilterCounters() {
+    /**
+     * Initialize counter collection for filters
+     */
+    initFilterCounters(): void {
+        this.filters.forEach((filter) => (this.counters[filter.key] = 0));
+    }
+
+    /**
+     * Iterate over filters and update counters
+     */
+    updateFilterCounters(): void {
         this.filters.forEach((filter: TaskFilterCloudModel) => this.updateFilterCounter(filter));
     }
 
-    updateFilterCounter(filter: TaskFilterCloudModel) {
+    /**
+     *  Get current value for filter and check if value has changed
+     * @param filter filter
+     */
+    updateFilterCounter(filter: TaskFilterCloudModel): void {
         if (filter?.showCounter) {
-            this.counters$[filter.key] = this.taskFilterCloudService.getTaskFilterCounter(filter).pipe(
+            this.taskFilterCloudService
-                tap((filterCounter) => {
+                .getTaskFilterCounter(filter)
-                    this.checkIfFilterValuesHasBeenUpdated(filter.key, filterCounter);
+                .pipe(
-                })
+                    tap((filterCounter) => {
-            );
+                        this.checkIfFilterValuesHasBeenUpdated(filter.key, filterCounter);
+                    })
+                )
+                .subscribe((data) => {
+                    this.counters = {
+                        ...this.counters,
+                        [filter.key]: data
+                    };
+                });
         }
     }