[ADF-3668] Search filter buckets are set to 0 after any search filtering (#3891)

* [ADF-3668] Fix facet fields 0 buckets

* [ADF-3668] add test for case when labels are i18n keys

* [ADF-3668] add translations on demo-shell - for manual testing

* [ADF-3668] allow translations for the bucket labels

* [ADF-3668] Fix facet queries buckets for translated labels

* [ADF-3668] Fix e2e tests

* [ADF-3668] Fix facet queries filtering when having translated labels

* [ADF-3668] add translations on demo-shell - for manual testing

* [ADF-3668] case covered by translationMock custom instant

* [ADF-3668] move test translations to demo-shell resources

* [ADF-3668] code review changes

lib/content-services/search/components/search-filter/models/response-facet-query-list.model.ts

@@ -19,7 +19,7 @@ import { FacetQuery } from '../../../facet-query.interface';
 import { SearchFilterList } from './search-filter-list.model';
 
 export class ResponseFacetQueryList extends SearchFilterList<FacetQuery> {
-    constructor(items: FacetQuery[] = [], pageSize: number = 5) {
+    constructor(items: FacetQuery[] = [], translationService, pageSize: number = 5) {
         super(
             items
                 .filter(item => {
@@ -31,7 +31,7 @@ export class ResponseFacetQueryList extends SearchFilterList<FacetQuery> {
         this.filter = (query: FacetQuery) => {
             if (this.filterText && query.label) {
                 const pattern = (this.filterText || '').toLowerCase();
-                const label = query.label.toLowerCase();
+                const label = translationService.instant(query.label).toLowerCase();
                 return label.startsWith(pattern);
             }
             return true;

lib/content-services/search/components/search-filter/search-filter.component.html

@@ -41,7 +41,7 @@
                         [checked]="query.checked"
                         [attr.data-automation-id]="'checkbox-'+facetQueriesLabel+'-'+query.label"
                         (change)="onToggleFacetQuery($event, query)">
-                        {{ query.label }} ({{ query.count }})
+                        {{ query.label | translate }} ({{ query.count }})
                     </mat-checkbox>
                 </ng-container>
             </div>
@@ -72,7 +72,7 @@
         <mat-expansion-panel [attr.data-automation-id]="'expansion-panel-'+field.label" *ngFor="let field of responseFacetFields"
                              [expanded]="facetFieldsExpanded">
             <mat-expansion-panel-header>
-                <mat-panel-title>{{ field.label }}</mat-panel-title>
+                <mat-panel-title>{{ field.label | translate }}</mat-panel-title>
             </mat-expansion-panel-header>
 
             <div class="facet-result-filter">
@@ -96,7 +96,7 @@
                     [checked]="bucket.checked"
                     [attr.data-automation-id]="'checkbox-'+field.label+'-'+(bucket.display || bucket.label)"
                     (change)="onToggleBucket($event, field, bucket)">
-                    {{ bucket.display || bucket.label }} <span *ngIf="bucket.count!==null">(</span>{{ bucket.count }}<span *ngIf="bucket.count!==null">)</span>
+                    {{ bucket.display || bucket.label | translate }} <span *ngIf="bucket.count!==null">(</span>{{ bucket.count }}<span *ngIf="bucket.count!==null">)</span>
                 </mat-checkbox>
             </div>
 

lib/content-services/search/components/search-filter/search-filter.component.spec.ts

@@ -30,6 +30,7 @@ describe('SearchFilterComponent', () => {
     let component: SearchFilterComponent;
     let queryBuilder: SearchQueryBuilderService;
     let appConfig: AppConfigService;
+    const translationMock = new TranslationMock();
 
     beforeEach(() => {
         appConfig = new AppConfigService(null);
@@ -39,7 +40,7 @@ describe('SearchFilterComponent', () => {
         const searchMock: any = {
             dataLoaded: new Subject()
         };
-        const translationMock = new TranslationMock();
+        translationMock.instant = (key) => `translated${key}`;
         component = new SearchFilterComponent(queryBuilder, searchMock, translationMock);
         component.ngOnInit();
     });
@@ -293,6 +294,32 @@ describe('SearchFilterComponent', () => {
         expect(component.responseFacetFields[0].buckets.items[1].count).toEqual(0);
     });
 
+    it('should update correctly the existing facetFields bucket values', () => {
+        component.responseFacetFields = null;
+
+        queryBuilder.config = {
+            categories: [],
+            facetFields: { fields: [{ label: 'f1', field: 'f1' }] },
+            facetQueries: { queries: [] }
+        };
+
+        const firstCallFields: any = [{
+            label: 'f1',
+            buckets: [{ label: 'b1', count: 10 }]
+        }];
+        const firstCallData = { list: { context: { facetsFields: firstCallFields }}};
+        component.onDataLoaded(firstCallData);
+        expect(component.responseFacetFields[0].buckets.items[0].count).toEqual(10);
+
+        const secondCallFields: any = [{
+            label: 'f1',
+            buckets: [{ label: 'b1', count: 6 }]
+        }];
+        const secondCallData = { list: { context: { facetsFields: secondCallFields}}};
+        component.onDataLoaded(secondCallData);
+        expect(component.responseFacetFields[0].buckets.items[0].count).toEqual(6);
+    });
+
     it('should fetch facet fields from response payload and show the already checked items', () => {
         spyOn(queryBuilder, 'execute').and.stub();
         queryBuilder.config = {
@@ -490,7 +517,7 @@ describe('SearchFilterComponent', () => {
             { label: 'q1', query: 'q1', checked: true, count: 1 },
             { label: 'q2', query: 'q2', checked: false, count: 1 },
             { label: 'q3', query: 'q3', checked: true, count: 1 }
-        ]);
+        ], translationMock);
         component.resetSelectedQueries();
 
         expect(queryBuilder.removeUserFacetQuery).toHaveBeenCalledTimes(3);

lib/content-services/search/components/search-filter/search-filter.component.ts

@@ -224,22 +224,22 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
                     return <FacetFieldBucket> {
                         ...bucket,
                         checked: !!selectedBucket,
-                        display: this.translationService.instant(bucket.display),
-                        label: this.translationService.instant(bucket.label)
+                        display: bucket.display,
+                        label: bucket.label
                     };
                 });
                 const bucketList = new SearchFilterList<FacetFieldBucket>(buckets, field.pageSize);
                 bucketList.filter = (bucket: FacetFieldBucket): boolean => {
                     if (bucket && bucketList.filterText) {
                         const pattern = (bucketList.filterText || '').toLowerCase();
-                        const label = (bucket.display || bucket.label || '').toLowerCase();
+                        const label = (this.translationService.instant(bucket.display) || this.translationService.instant(bucket.label)).toLowerCase();
                         return label.startsWith(pattern);
                     }
                     return true;
                 };
                 return {
                     ...field,
-                    label: this.translationService.instant(field.label),
+                    label: field.label,
                     pageSize: field.pageSize | this.DEFAULT_PAGE_SIZE,
                     currentPageSize: field.pageSize | this.DEFAULT_PAGE_SIZE,
                     buckets: bucketList
@@ -282,7 +282,7 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
                     }
                     return <FacetQuery> {
                         ...query,
-                        label: this.translationService.instant(query.label),
+                        label: query.label,
                         count: queryResult.count
                     };
                 });
@@ -292,7 +292,7 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
                     this.responseFacetQueries.items = facetQueries;
 
                 } else {
-                    this.responseFacetQueries = new ResponseFacetQueryList(facetQueries, this.facetQueriesPageSize);
+                    this.responseFacetQueries = new ResponseFacetQueryList(facetQueries, this.translationService, this.facetQueriesPageSize);
                 }
 
             } else {