[ADF-3435][ADF-3436] fix search chips (#3681)

* fix chip list remove

* fix tests

* better find criteria

* swap to fix e2e test

* set 'expanded' for facetFields from config

* fix e2e test

* remove comments

demo-shell/src/app.config.json

@@ -84,13 +84,16 @@
         { "query": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
         { "query": "NOT cm:creator:System" }
       ],
-      "facetFields": [
+      "facetFields": {
-        { "field": "content.mimetype", "mincount": 1, "label": "1:Type" },
+        "expanded": true,
-        { "field": "content.size", "mincount": 1, "label": "2:Size" },
+        "fields": [
-        { "field": "creator", "mincount": 1, "label": "3:Creator" },
+          { "field": "content.mimetype", "mincount": 1, "label": "1:Type" },
-        { "field": "modifier", "mincount": 1, "label": "4:Modifier" },
+          { "field": "content.size", "mincount": 1, "label": "2:Size" },
-        { "field": "created", "mincount": 1, "label": "5:Created" }
+          { "field": "creator", "mincount": 1, "label": "3:Creator" },
-      ],
+          { "field": "modifier", "mincount": 1, "label": "4:Modifier" },
+          { "field": "created", "mincount": 1, "label": "5:Created" }
+        ]
+      },
       "facetQueries": {
         "label": "My facet queries",
         "pageSize": 5,

e2e/content-services/search_multiselect.e2e.ts

@@ -192,14 +192,14 @@ describe('Search Component - Multi-Select Facet', () => {
         it('[C280056] Multiple items can be selected from multiple search facets', () => {
             searchFiltersPage.checkSearchFiltersIsDisplayed();
 
-            searchFiltersPage.filterByFileType('Plain Text');
+            searchFiltersPage.filterByCreator(userUploadingTxt.firstName, userUploadingTxt.lastName);
-            searchFiltersPage.filterByFileType('JPEG Image');
+            searchFiltersPage.filterByCreator(userUploadingImg.firstName, userUploadingImg.lastName);
 
             searchResultsPage.checkContentIsDisplayed(txtFile.entry.name);
             searchResultsPage.checkContentIsDisplayed(jpgFile.entry.name);
 
-            searchFiltersPage.filterByCreator(userUploadingTxt.firstName, userUploadingTxt.lastName);
+            searchFiltersPage.filterByFileType('Plain Text');
-            searchFiltersPage.filterByCreator(userUploadingImg.firstName, userUploadingImg.lastName);
+            searchFiltersPage.filterByFileType('JPEG Image');
 
             expect(searchResultsPage.numberOfResultsDisplayed()).toBe(2);
             searchResultsPage.checkContentIsDisplayed(txtFile.entry.name);

e2e/pages/adf/searchFiltersPage.js

@@ -81,7 +81,6 @@ var SearchFiltersPage = function () {
 
     this.filterByFileType = function (fileType) {
         this.checkFileTypeFilterIsDisplayed();
-        this.clickFileTypeFilter();
 
         this.checkSearchFileTypeFilterIsDisplayed();
         this.searchInFileTypeFilter(fileType);
@@ -90,7 +89,6 @@ var SearchFiltersPage = function () {
 
     this.filterByCreator = function (creatorFirstName, creatorLastName) {
         this.checkCreatorFilterIsDisplayed();
-        this.clickCreatorFilter();
 
         this.checkSearchCreatorFilterIsDisplayed();
         this.searchInCreatorFilter(`${creatorFirstName} ${creatorLastName}`);

lib/content-services/search/components/search-chip-list/search-chip-list.component.html

@@ -3,7 +3,7 @@
         <mat-chip
             *ngFor="let query of searchFilter.selectedFacetQueries"
             [removable]="true"
-            (remove)="searchFilter.unselectFacetQuery(query)">
+            (removed)="searchFilter.unselectFacetQuery(query)">
             {{ query.label | translate }}
             <mat-icon matChipRemove>cancel</mat-icon>
         </mat-chip>
@@ -12,7 +12,7 @@
         <mat-chip
             *ngFor="let selection of searchFilter.selectedBuckets"
             [removable]="true"
-            (remove)="searchFilter.unselectFacetBucket(selection.field, selection.bucket)">
+            (removed)="searchFilter.unselectFacetBucket(selection.field, selection.bucket)">
             {{ (selection.bucket.display || selection.bucket.label) | translate }}
             <mat-icon matChipRemove>cancel</mat-icon>
         </mat-chip>

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

@@ -69,7 +69,8 @@
     </ng-container>
 
     <ng-container *ngIf="responseFacetFields">
-        <mat-expansion-panel [attr.data-automation-id]="'expansion-panel-'+field.label" *ngFor="let field of responseFacetFields">
+        <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-expansion-panel-header>

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

@@ -190,10 +190,10 @@ describe('SearchFilterComponent', () => {
 
         queryBuilder.config = {
             categories: [],
-            facetFields: [
+            facetFields: { fields: [
                 { label: 'f1', field: 'f1' },
                 { label: 'f2', field: 'f2' }
-            ],
+            ]},
             facetQueries: {
                 queries: []
             }
@@ -221,10 +221,10 @@ describe('SearchFilterComponent', () => {
 
         queryBuilder.config = {
             categories: [],
-            facetFields: [
+            facetFields: { fields: [
                 { label: 'f1', field: 'f1' },
                 { label: 'f2', field: 'f2' }
-            ],
+            ]},
             facetQueries: {
                 queries: []
             }
@@ -257,10 +257,10 @@ describe('SearchFilterComponent', () => {
     it('should fetch facet fields from response payload and update the existing bucket values', () => {
         queryBuilder.config = {
             categories: [],
-            facetFields: [
+            facetFields: { fields: [
                 { label: 'f1', field: 'f1' },
                 { label: 'f2', field: 'f2' }
-            ],
+            ]},
             facetQueries: {
                 queries: []
             }
@@ -297,10 +297,10 @@ describe('SearchFilterComponent', () => {
         spyOn(queryBuilder, 'execute').and.stub();
         queryBuilder.config = {
             categories: [],
-            facetFields: [
+            facetFields: { fields: [
                 { label: 'f1', field: 'f1' },
                 { label: 'f2', field: 'f2' }
-            ],
+            ]},
             facetQueries: {
                 queries: []
             }
@@ -312,6 +312,7 @@ describe('SearchFilterComponent', () => {
                 { label: 'b2', count: 1, filterQuery: 'filter2' }] }},
             { label: 'f2', field: 'f2', buckets: {items: [] }}
         ];
+        component.queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, component.responseFacetFields[0].buckets.items[0]);
 
         const serverResponseFields: any = [
             { label: 'f1', field: 'f1', buckets: [
@@ -336,10 +337,10 @@ describe('SearchFilterComponent', () => {
         spyOn(queryBuilder, 'execute').and.stub();
         queryBuilder.config = {
             categories: [],
-            facetFields: [
+            facetFields: { fields: [
                 { label: 'f1', field: 'f1' },
                 { label: 'f2', field: 'f2' }
-            ],
+            ]},
             facetQueries: {
                 queries: []
             }
@@ -351,6 +352,7 @@ describe('SearchFilterComponent', () => {
                         { label: 'b2', count: 1, filterQuery: 'filter2' }] }},
             { label: 'f2', field: 'f2', buckets: {items: [] }}
         ];
+        component.queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, component.responseFacetFields[0].buckets.items[0]);
 
         const serverResponseFields: any = [
             { label: 'f1', field: 'f1', buckets: [
@@ -375,10 +377,10 @@ describe('SearchFilterComponent', () => {
         spyOn(queryBuilder, 'execute').and.stub();
         queryBuilder.config = {
             categories: [],
-            facetFields: [
+            facetFields: { fields: [
                 { label: 'f1', field: 'f1' },
                 { label: 'f2', field: 'f2' }
-            ],
+            ]},
             facetQueries: {
                 queries: []
             }
@@ -390,6 +392,7 @@ describe('SearchFilterComponent', () => {
                         { label: 'b2', count: 1, filterQuery: 'filter2' }] }},
             { label: 'f2', field: 'f2', buckets: {items: [] }}
         ];
+        component.queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, component.responseFacetFields[0].buckets.items[0]);
         const data = {
             list: {
                 context: {}

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

@@ -44,6 +44,7 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
     private facetQueriesPageSize = this.DEFAULT_PAGE_SIZE;
     facetQueriesLabel: string = 'Facet Queries';
     facetQueriesExpanded = false;
+    facetFieldsExpanded = false;
     canResetSelectedQueries = false;
 
     selectedFacetQueries: Array<FacetQuery> = [];
@@ -57,6 +58,9 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
             this.facetQueriesPageSize = queryBuilder.config.facetQueries.pageSize || this.DEFAULT_PAGE_SIZE;
             this.facetQueriesExpanded = queryBuilder.config.facetQueries.expanded;
         }
+        if (queryBuilder.config && queryBuilder.config.facetFields) {
+            this.facetFieldsExpanded = queryBuilder.config.facetFields.expanded;
+        }
 
         this.queryBuilder.updated.pipe(
             takeWhile(() => this.isAlive)
@@ -114,7 +118,7 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
             for (let field of this.responseFacetFields) {
                 if (field.buckets) {
                     this.selectedBuckets.push(
-                        ...field.buckets.items
+                        ...this.queryBuilder.getUserFacetBuckets(field.field)
                             .filter(bucket => bucket.checked)
                             .map(bucket => {
                                 return { field, bucket };
@@ -208,7 +212,7 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
     }
 
     private parseFacetFields(context: any) {
-        const configFacetFields = this.queryBuilder.config.facetFields || [];
+        const configFacetFields = this.queryBuilder.config.facetFields && this.queryBuilder.config.facetFields.fields || [];
 
         const bkpResponseFacetFields =  [...this.responseFacetFields || []];
         this.responseFacetFields = configFacetFields
@@ -242,7 +246,8 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
                 }
 
                 const buckets: FacetFieldBucket[] = ((responseField && responseField.buckets) || []).map(bucket => {
-                    const selectedBucket = this.selectedBuckets.find(facetBucket => facetBucket.bucket.label === bucket.label);
+                    const selectedBucket = this.selectedBuckets.find(facetBucket =>
+                        facetBucket.bucket.label === bucket.label && facetBucket.field.field === field.field);
 
                     return <FacetFieldBucket> {
                         ...bucket,

lib/content-services/search/search-configuration.interface.ts

@@ -32,7 +32,10 @@ export interface SearchConfiguration {
         expanded?: boolean;
         queries: Array<FacetQuery>;
     };
-    facetFields?: Array<FacetField>;
+    facetFields?: {
+        expanded?: boolean;
+        fields: Array<FacetField>;
+    };
     sorting?: {
         options: Array<SearchSortingDefinition>;
         defaults: Array<SearchSortingDefinition>;

lib/content-services/search/search-query-builder.service.spec.ts

@@ -190,10 +190,10 @@ describe('SearchQueryBuilder', () => {
     it('should fetch facet from the config by label', () => {
         const config: SearchConfiguration = {
             categories: [],
-            facetFields: [
+            facetFields: { 'fields': [
                 { 'field': 'content.mimetype', 'mincount': 1, 'label': 'Type' },
                 { 'field': 'content.size', 'mincount': 1, 'label': 'Size' }
-            ]
+            ]}
         };
         const builder = new SearchQueryBuilderService(buildConfig(config), null);
         const field = builder.getFacetField('Size');
@@ -205,10 +205,10 @@ describe('SearchQueryBuilder', () => {
     it('should not fetch facet from the config by label', () => {
         const config: SearchConfiguration = {
             categories: [],
-            facetFields: [
+            facetFields: { 'fields': [
                 { 'field': 'content.mimetype', 'mincount': 1, 'label': 'Type' },
                 { 'field': 'content.size', 'mincount': 1, 'label': 'Size' }
-            ]
+            ]}
         };
         const builder = new SearchQueryBuilderService(buildConfig(config), null);
         const field = builder.getFacetField('Missing');
@@ -359,16 +359,16 @@ describe('SearchQueryBuilder', () => {
             categories: [
                 <any> { id: 'cat1', enabled: true }
             ],
-            facetFields: [
+            facetFields: { fields: [
                 { field: 'field1', label: 'field1', mincount: 1, limit: null, offset: 0, prefix: null },
                 { field: 'field2', label: 'field2', mincount: 1, limit: null, offset: 0, prefix: null }
-            ]
+            ]}
         };
         const builder = new SearchQueryBuilderService(buildConfig(config), null);
         builder.queryFragments['cat1'] = 'cm:name:test';
 
         const compiled = builder.buildQuery();
-        expect(compiled.facetFields.facets).toEqual(jasmine.objectContaining(config.facetFields));
+        expect(compiled.facetFields.facets).toEqual(jasmine.objectContaining(config.facetFields.fields));
     });
 
     it('should build query with sorting', () => {

lib/content-services/search/search-query-builder.service.ts

@@ -106,6 +106,10 @@ export class SearchQueryBuilderService {
         }
     }
 
+    getUserFacetBuckets(field: string) {
+        return this.userFacetBuckets[field] || [];
+    }
+
     removeUserFacetBucket(field: FacetField, bucket: FacetFieldBucket) {
         if (field && field.field && bucket) {
             const buckets = this.userFacetBuckets[field.field] || [];
@@ -142,7 +146,7 @@ export class SearchQueryBuilderService {
 
     getFacetField(label: string): FacetField {
         if (label) {
-            const fields = this.config.facetFields || [];
+            const fields = this.config.facetFields.fields || [];
             const result = fields.find(field => field.label === label);
             if (result) {
                 return { ...result };
@@ -286,7 +290,7 @@ export class SearchQueryBuilderService {
     }
 
     protected get facetFields(): RequestFacetFields {
-        const facetFields = this.config.facetFields;
+        const facetFields = this.config.facetFields && this.config.facetFields.fields;
 
         if (facetFields && facetFields.length > 0) {
             return {