[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
2025-07-24 17:32:15 +00:00 · 2018-10-18 12:42:01 +03:00
parent 28a327216c
commit 63fb4fc857
7 changed files with 81 additions and 36 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -203,7 +203,25 @@
  },
  "SEARCH": {
    "RESULTS": "Search results",
-    "NO_RESULT": "No results found"
+    "NO_RESULT": "No results found",
+    "FACET_FIELDS": {
+      "TYPE": "1:Type",
+      "SIZE": "2:Size",
+      "CREATOR": "3:Creator",
+      "MODIFIER": "4:Modifier",
+      "CREATED": "5:Created"
+    },
+    "FACET_QUERIES": {
+      "MY_FACET_QUERIES": "My facet queries",
+      "CREATED_THIS_YEAR": "1.Created This Year",
+      "MIMETYPE": "2.Type",
+      "XTRASMALL": "3.Size: xtra small",
+      "SMALL": "4.Size: small",
+      "MEDIUM": "5.Size: medium",
+      "LARGE": "6.Size: large",
+      "XTRALARGE": "7.Size: xtra large",
+      "XXTRALARGE": "8.Size: XX large"
+    }
  },
  "SOCIAL": {
    "LIKE": "Like component",
--- a/demo-shell/src/app.config.json
+++ b/demo-shell/src/app.config.json
@@ -93,25 +93,25 @@
      "facetFields": {
        "expanded": true,
        "fields": [
-          { "field": "content.mimetype", "mincount": 1, "label": "1:Type" },
-          { "field": "content.size", "mincount": 1, "label": "2:Size" },
-          { "field": "creator", "mincount": 1, "label": "3:Creator" },
-          { "field": "modifier", "mincount": 1, "label": "4:Modifier" },
-          { "field": "created", "mincount": 1, "label": "5:Created" }
+          { "field": "content.mimetype", "mincount": 1, "label": "SEARCH.FACET_FIELDS.TYPE" },
+          { "field": "content.size", "mincount": 1, "label": "SEARCH.FACET_FIELDS.SIZE" },
+          { "field": "creator", "mincount": 1, "label": "SEARCH.FACET_FIELDS.CREATOR" },
+          { "field": "modifier", "mincount": 1, "label": "SEARCH.FACET_FIELDS.MODIFIER" },
+          { "field": "created", "mincount": 1, "label": "SEARCH.FACET_FIELDS.CREATED" }
        ]
      },
      "facetQueries": {
-        "label": "My facet queries",
+        "label": "SEARCH.FACET_QUERIES.MY_FACET_QUERIES",
        "pageSize": 5,
        "queries": [
-          { "query": "created:2018", "label": "1.Created This Year" },
-          { "query": "content.mimetype", "label": "2.Type" },
-          { "query": "content.size:[0 TO 10240]", "label": "3.Size: Extra small"},
-          { "query": "content.size:[10240 TO 102400]", "label": "4.Size: small"},
-          { "query": "content.size:[102400 TO 1048576]", "label": "5.Size: medium" },
-          { "query": "content.size:[1048576 TO 16777216]", "label": "6.Size: large" },
-          { "query": "content.size:[16777216 TO 134217728]", "label": "7.Size: Extra large" },
-          { "query": "content.size:[134217728 TO MAX]", "label": "8.Size: XX large" }
+          { "query": "created:2018", "label": "SEARCH.FACET_QUERIES.CREATED_THIS_YEAR" },
+          { "query": "content.mimetype", "label": "SEARCH.FACET_QUERIES.MIMETYPE" },
+          { "query": "content.size:[0 TO 10240]", "label": "SEARCH.FACET_QUERIES.XTRASMALL"},
+          { "query": "content.size:[10240 TO 102400]", "label": "SEARCH.FACET_QUERIES.SMALL"},
+          { "query": "content.size:[102400 TO 1048576]", "label": "SEARCH.FACET_QUERIES.MEDIUM" },
+          { "query": "content.size:[1048576 TO 16777216]", "label": "SEARCH.FACET_QUERIES.LARGE" },
+          { "query": "content.size:[16777216 TO 134217728]", "label": "SEARCH.FACET_QUERIES.XTRALARGE" },
+          { "query": "content.size:[134217728 TO MAX]", "label": "SEARCH.FACET_QUERIES.XXTRALARGE" }
        ]
      },
      "categories": [
--- a/e2e/pages/adf/searchFiltersPage.ts
+++ b/e2e/pages/adf/searchFiltersPage.ts
@@ -20,14 +20,14 @@ import Util = require('../../util/util');
 export class SearchFiltersPage {

    searchFilters = element(by.css('adf-search-filter'));
-    fileTypeFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-1:Type"'));
-    searchFileTypeFilter = element(by.css('input[data-automation-id="facet-result-filter-1:Type"'));
-    creatorFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-3:Creator"'));
-    searchCreatorFilter = element(by.css('input[data-automation-id="facet-result-filter-3:Creator"'));
-    fileSizeFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-2:Size"'));
+    fileTypeFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-SEARCH.FACET_FIELDS.TYPE"'));
+    searchFileTypeFilter = element(by.css('input[data-automation-id="facet-result-filter-SEARCH.FACET_FIELDS.TYPE"'));
+    creatorFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-SEARCH.FACET_FIELDS.CREATOR"'));
+    searchCreatorFilter = element(by.css('input[data-automation-id="facet-result-filter-SEARCH.FACET_FIELDS.CREATOR"'));
+    fileSizeFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-SEARCH.FACET_FIELDS.SIZE"'));
    showMoreButtonForSize = this.fileSizeFilter.element(by.css('button[title="Show more"]'));
    showLessButtonForSize = this.fileSizeFilter.element(by.css('button[title="Show less"]'));
-    numberOfCheckboxesforSize = element.all(by.css('mat-checkbox[data-automation-id*="checkbox-2:Size"]'));
+    numberOfCheckboxesforSize = element.all(by.css('mat-checkbox[data-automation-id*="checkbox-SEARCH.FACET_FIELDS.SIZE"]'));

    checkSearchFiltersIsDisplayed() {
        Util.waitUntilElementIsVisible(this.searchFilters);
@@ -62,13 +62,13 @@ export class SearchFiltersPage {
    }

    selectFileType(fileType) {
-        let result = element(by.css(`mat-checkbox[data-automation-id='checkbox-1:Type-${fileType}'] .mat-checkbox-inner-container`));
+        let result = element(by.css(`mat-checkbox[data-automation-id='checkbox-SEARCH.FACET_FIELDS.TYPE-${fileType}'] .mat-checkbox-inner-container`));
        Util.waitUntilElementIsClickable(result);
        result.click();
    }

    selectCreator(creatorName) {
-        let result = element(by.css(`mat-checkbox[data-automation-id='checkbox-3:Creator-${creatorName}'] .mat-checkbox-inner-container`));
+        let result = element(by.css(`mat-checkbox[data-automation-id='checkbox-SEARCH.FACET_FIELDS.CREATOR-${creatorName}'] .mat-checkbox-inner-container`));
        Util.waitUntilElementIsClickable(result);
        result.click();
    }
--- a/lib/content-services/search/components/search-filter/models/response-facet-query-list.model.ts
+++ b/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;
--- a/lib/content-services/search/components/search-filter/search-filter.component.html
+++ b/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>

--- a/lib/content-services/search/components/search-filter/search-filter.component.spec.ts
+++ b/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);
--- a/lib/content-services/search/components/search-filter/search-filter.component.ts
+++ b/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 {