[ACS-5197] Disable empty facets (#8650)

* [ACS-5197] Disable empty facets

* [ACS-5197] CR fixes

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html

@@ -2,6 +2,7 @@
           disableRipple
           class="adf-search-filter-chip"
           [class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen"
+          [disabled]="!isPopulated()"
           tabIndex="0"
           [matMenuTriggerFor]="menu"
           (onMenuOpen)="onMenuOpen()"
@@ -18,7 +19,10 @@
           {{ displayValue | translate }}
     </span>
     <ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
-    <mat-icon>keyboard_arrow_down</mat-icon>
+    <mat-icon *ngIf="isPopulated(); else disabledIcon">keyboard_arrow_down</mat-icon>
+    <ng-template #disabledIcon>
+        <mat-icon>remove</mat-icon>
+    </ng-template>
 </mat-chip>
 
 <mat-menu #menu="matMenu" backdropClass="adf-search-filter-chip-menu" (closed)="onClosed()">

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss

@@ -0,0 +1,5 @@
+.adf-search-filter-chip {
+    &[disabled] {
+        pointer-events: none;
+    }
+}

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts

@@ -63,4 +63,27 @@ describe('SearchFacetChipComponent', () => {
         applyButton.triggerEventHandler('click', {});
         expect(queryBuilder.update).toHaveBeenCalled();
     });
+
+    it('should display arrow down icon and not disable the chip when items are loaded',  () => {
+        component.field.buckets.items = [{ count: 1, label: 'test', filterQuery: '' }];
+        fixture.detectChanges();
+        const chip = fixture.debugElement.query(By.css('mat-chip'));
+        const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
+        expect(chip.classes['mat-chip-disabled']).toBeUndefined();
+        expect(icon).toEqual('keyboard_arrow_down');
+    });
+
+    it('should display remove icon and disable facet when no items are loaded',  () => {
+        const chip = fixture.debugElement.query(By.css('mat-chip'));
+        const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
+        expect(chip.classes['mat-chip-disabled']).toBeTrue();
+        expect(icon).toEqual('remove');
+    });
+
+    it('should not open context menu when no items are loaded',  () => {
+        spyOn(component.menuTrigger, 'openMenu');
+        const chip = fixture.debugElement.query(By.css('mat-chip')).nativeElement;
+        chip.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+        expect(component.menuTrigger.openMenu).not.toHaveBeenCalled();
+    });
 });

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts

@@ -24,6 +24,7 @@ import { SearchFacetFieldComponent } from '../../search-facet-field/search-facet
 @Component({
   selector: 'adf-search-facet-chip',
   templateUrl: './search-facet-chip.component.html',
+  styleUrls: ['./search-facet-chip.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class SearchFacetChipComponent {
@@ -65,10 +66,12 @@ export class SearchFacetChipComponent {
     }
 
     onEnterKeydown(): void {
-        if (!this.menuTrigger.menuOpen) {
+        if (this.isPopulated()) {
-            this.menuTrigger.openMenu();
+            if (!this.menuTrigger.menuOpen) {
-        } else {
+                this.menuTrigger.openMenu();
-            this.menuTrigger.closeMenu();
+            } else {
+                this.menuTrigger.closeMenu();
+            }
         }
     }
 
@@ -77,4 +80,8 @@ export class SearchFacetChipComponent {
             this.menuTrigger.closeMenu();
         }
     }
+
+    isPopulated(): boolean {
+        return this.field.buckets?.items.length > 0;
+    }
 }