fix(atomic): enable/disable facet based on tab with updateActiveTab a…

…ction (#4313) This PR changes the atomic facet components to use the changes made in #4311 https://coveord.atlassian.net/browse/CDX-1590
coveo · Sep 19, 2024 · 08fe92a · 08fe92a
1 parent 6f75ad6
commit 08fe92a
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 195 deletions.
diff --git a/packages/atomic/src/components/common/facets/facet-tabs/facet-tabs-utils.ts b/packages/atomic/src/components/common/facets/facet-tabs/facet-tabs-utils.ts
diff --git a/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx b/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx
@@ -16,15 +16,7 @@ import {
   TabManager,
   buildTabManager,
 } from '@coveo/headless';
-import {
-  Component,
-  h,
-  State,
-  Prop,
-  Element,
-  Fragment,
-  Watch,
-} from '@stencil/core';
+import {Component, h, State, Prop, Element, Fragment} from '@stencil/core';
 import {
   AriaLiveRegion,
   FocusTargetController,
@@ -62,7 +54,6 @@ import {
   shouldDisplaySearchResults,
 } from '../../../common/facets/facet-search/facet-search-utils';
 import {FacetShowMoreLess} from '../../../common/facets/facet-show-more-less/facet-show-more-less';
-import {updateFacetVisibilityForActiveTab} from '../../../common/facets/facet-tabs/facet-tabs-utils';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
 import {initializePopover} from '../../../common/facets/popover/popover-type';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
@@ -287,6 +278,10 @@ export class AtomicCategoryFacet implements InitializableComponent {
       filterByBasePath: this.filterByBasePath,
       injectionDepth: this.injectionDepth,
       filterFacetCount: this.filterFacetCount,
+      tabs: {
+        included: [...this.tabsIncluded],
+        excluded: [...this.tabsExcluded],
+      },
     };
     this.facet = buildCategoryFacet(this.bindings.engine, {options});
     announceFacetSearchResultsWithAriaLive(
@@ -349,21 +344,6 @@ export class AtomicCategoryFacet implements InitializableComponent {
     );
   }
 
-  @Watch('tabManagerState')
-  watchTabManagerState(
-    newValue: {activeTab: string},
-    oldValue: {activeTab: string}
-  ) {
-    if (newValue?.activeTab !== oldValue?.activeTab) {
-      updateFacetVisibilityForActiveTab(
-        [...this.tabsIncluded],
-        [...this.tabsExcluded],
-        this.tabManagerState?.activeTab,
-        this.facet
-      );
-    }
-  }
-
   public componentShouldUpdate(
     next: unknown,
     prev: unknown,

diff --git a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
@@ -17,7 +17,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, h, State, Prop, VNode, Element, Watch} from '@stencil/core';
+import {Component, h, State, Prop, VNode, Element} from '@stencil/core';
 import {
   AriaLiveRegion,
   FocusTargetController,
@@ -45,7 +45,6 @@ import {
   shouldDisplaySearchResults,
 } from '../../../common/facets/facet-search/facet-search-utils';
 import {FacetShowMoreLess} from '../../../common/facets/facet-show-more-less/facet-show-more-less';
-import {updateFacetVisibilityForActiveTab} from '../../../common/facets/facet-tabs/facet-tabs-utils';
 import {FacetValueBox} from '../../../common/facets/facet-value-box/facet-value-box';
 import {FacetValueLabelHighlight} from '../../../common/facets/facet-value-label-highlight/facet-value-label-highlight';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
@@ -348,21 +347,6 @@ export class AtomicColorFacet implements InitializableComponent {
     );
   }
 
-  @Watch('tabManagerState')
-  watchTabManagerState(
-    newValue: {activeTab: string},
-    oldValue: {activeTab: string}
-  ) {
-    if (newValue?.activeTab !== oldValue?.activeTab) {
-      updateFacetVisibilityForActiveTab(
-        [...this.tabsIncluded],
-        [...this.tabsExcluded],
-        this.tabManagerState?.activeTab,
-        this.facet
-      );
-    }
-  }
-
   public componentShouldUpdate(
     next: unknown,
     prev: unknown,
@@ -606,6 +590,10 @@ export class AtomicColorFacet implements InitializableComponent {
         ? [...this.allowedValues]
         : undefined,
       customSort: this.customSort.length ? [...this.customSort] : undefined,
+      tabs: {
+        included: [...this.tabsIncluded],
+        excluded: [...this.tabsExcluded],
+      },
     };
   }
 

diff --git a/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx b/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx
@@ -24,7 +24,6 @@ import {
   Element,
   VNode,
   Fragment,
-  Watch,
 } from '@stencil/core';
 import {
   AriaLiveRegion,
@@ -53,7 +52,6 @@ import {
 } from '../../../common/facets/facet-search/facet-search-utils';
 import {FacetSearchValue} from '../../../common/facets/facet-search/facet-search-value';
 import {FacetShowMoreLess} from '../../../common/facets/facet-show-more-less/facet-show-more-less';
-import {updateFacetVisibilityForActiveTab} from '../../../common/facets/facet-tabs/facet-tabs-utils';
 import {
   FacetValueProps,
   FacetValue,
@@ -318,21 +316,6 @@ export class AtomicFacet implements InitializableComponent {
     this.facetConditionsManager?.stopWatching();
   }
 
-  @Watch('tabManagerState')
-  watchTabManagerState(
-    newValue: {activeTab: string},
-    oldValue: {activeTab: string}
-  ) {
-    if (newValue?.activeTab !== oldValue?.activeTab) {
-      updateFacetVisibilityForActiveTab(
-        [...this.tabsIncluded],
-        [...this.tabsExcluded],
-        this.tabManagerState?.activeTab,
-        this.facet
-      );
-    }
-  }
-
   public componentShouldUpdate(
     next: FacetState,
     prev: FacetState,
@@ -541,6 +524,10 @@ export class AtomicFacet implements InitializableComponent {
         ? [...this.allowedValues]
         : undefined,
       customSort: this.customSort.length ? [...this.customSort] : undefined,
+      tabs: {
+        included: [...this.tabsIncluded],
+        excluded: [...this.tabsExcluded],
+      },
     };
   }
 

diff --git a/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx b/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx
@@ -22,7 +22,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, Element, h, Listen, Prop, State, Watch} from '@stencil/core';
+import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
   BindStateToController,
@@ -39,7 +39,6 @@ import {FacetGuard} from '../../../common/facets/facet-guard';
 import {FacetHeader} from '../../../common/facets/facet-header/facet-header';
 import {NumberInputType} from '../../../common/facets/facet-number-input/number-input-type';
 import {FacetPlaceholder} from '../../../common/facets/facet-placeholder/facet-placeholder';
-import {updateFacetVisibilityForActiveTab} from '../../../common/facets/facet-tabs/facet-tabs-utils';
 import {formatHumanReadable} from '../../../common/facets/numeric-facet/formatter';
 import {NumericFacetValueLink} from '../../../common/facets/numeric-facet/value-link';
 import {NumericFacetValuesContainer} from '../../../common/facets/numeric-facet/values-container';
@@ -264,22 +263,6 @@ export class AtomicNumericFacet implements InitializableComponent {
   private initializeTabManager() {
     this.tabManager = buildTabManager(this.bindings.engine);
   }
-
-  @Watch('tabManagerState')
-  watchTabManagerState(
-    newValue: {activeTab: string},
-    oldValue: {activeTab: string}
-  ) {
-    if (newValue?.activeTab !== oldValue?.activeTab) {
-      updateFacetVisibilityForActiveTab(
-        [...this.tabsIncluded],
-        [...this.tabsExcluded],
-        this.tabManagerState?.activeTab,
-        this.facetForRange
-      );
-    }
-  }
-
   private initializeFacetForInput() {
     if (!this.withInput) {
       return;
@@ -294,6 +277,10 @@ export class AtomicNumericFacet implements InitializableComponent {
         rangeAlgorithm: this.rangeAlgorithm,
         filterFacetCount: this.filterFacetCount,
         injectionDepth: this.injectionDepth,
+        tabs: {
+          included: [...this.tabsIncluded],
+          excluded: [...this.tabsExcluded],
+        },
       },
     });
 

diff --git a/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx b/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx
@@ -18,7 +18,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, h, State, Prop, VNode, Element, Watch} from '@stencil/core';
+import {Component, h, State, Prop, VNode, Element} from '@stencil/core';
 import Star from '../../../../images/star.svg';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
@@ -33,7 +33,6 @@ import {FacetInfo} from '../../../common/facets/facet-common-store';
 import {FacetContainer} from '../../../common/facets/facet-container/facet-container';
 import {FacetHeader} from '../../../common/facets/facet-header/facet-header';
 import {FacetPlaceholder} from '../../../common/facets/facet-placeholder/facet-placeholder';
-import {updateFacetVisibilityForActiveTab} from '../../../common/facets/facet-tabs/facet-tabs-utils';
 import {FacetValueCheckbox} from '../../../common/facets/facet-value-checkbox/facet-value-checkbox';
 import {FacetValueLink} from '../../../common/facets/facet-value-link/facet-value-link';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
@@ -244,6 +243,10 @@ export class AtomicRatingFacet implements InitializableComponent {
       generateAutomaticRanges: false,
       filterFacetCount: this.filterFacetCount,
       injectionDepth: this.injectionDepth,
+      tabs: {
+        included: [...this.tabsIncluded],
+        excluded: [...this.tabsExcluded],
+      },
     };
     this.facet = buildNumericFacet(this.bindings.engine, {options});
     this.facetId = this.facet.state.facetId;
@@ -271,22 +274,6 @@ export class AtomicRatingFacet implements InitializableComponent {
     }
     this.dependenciesManager?.stopWatching();
   }
-
-  @Watch('tabManagerState')
-  watchTabManagerState(
-    newValue: {activeTab: string},
-    oldValue: {activeTab: string}
-  ) {
-    if (newValue?.activeTab !== oldValue?.activeTab) {
-      updateFacetVisibilityForActiveTab(
-        [...this.tabsIncluded],
-        [...this.tabsExcluded],
-        this.tabManagerState?.activeTab,
-        this.facet
-      );
-    }
-  }
-
   private get isHidden() {
     return (
       this.searchStatusState.hasError ||

diff --git a/...omic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx b/...omic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
@@ -17,7 +17,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, h, State, Prop, VNode, Element, Watch} from '@stencil/core';
+import {Component, h, State, Prop, VNode, Element} from '@stencil/core';
 import Star from '../../../../images/star.svg';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
@@ -32,7 +32,6 @@ import {FacetInfo} from '../../../common/facets/facet-common-store';
 import {FacetContainer} from '../../../common/facets/facet-container/facet-container';
 import {FacetHeader} from '../../../common/facets/facet-header/facet-header';
 import {FacetPlaceholder} from '../../../common/facets/facet-placeholder/facet-placeholder';
-import {updateFacetVisibilityForActiveTab} from '../../../common/facets/facet-tabs/facet-tabs-utils';
 import {FacetValueLink} from '../../../common/facets/facet-value-link/facet-value-link';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
 import {initializePopover} from '../../../common/facets/popover/popover-type';
@@ -216,20 +215,6 @@ export class AtomicRatingRangeFacet implements InitializableComponent {
     this.initializeFacet();
     this.initializeDependenciesManager();
   }
-  @Watch('tabManagerState')
-  watchTabManagerState(
-    newValue: {activeTab: string},
-    oldValue: {activeTab: string}
-  ) {
-    if (newValue?.activeTab !== oldValue?.activeTab) {
-      updateFacetVisibilityForActiveTab(
-        [...this.tabsIncluded],
-        [...this.tabsExcluded],
-        this.tabManagerState?.activeTab,
-        this.facet
-      );
-    }
-  }
   public disconnectedCallback() {
     if (this.host.isConnected) {
       return;
@@ -255,6 +240,10 @@ export class AtomicRatingRangeFacet implements InitializableComponent {
       generateAutomaticRanges: false,
       filterFacetCount: this.filterFacetCount,
       injectionDepth: this.injectionDepth,
+      tabs: {
+        included: [...this.tabsIncluded],
+        excluded: [...this.tabsExcluded],
+      },
     };
     this.facet = buildNumericFacet(this.bindings.engine, {options});
     this.facetId = this.facet.state.facetId;

diff --git a/...ges/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx b/...ges/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
@@ -16,7 +16,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, h, Prop, State, VNode, Watch} from '@stencil/core';
+import {Component, h, Prop, State, VNode} from '@stencil/core';
 import {getFieldValueCaption} from '../../../../utils/field-utils';
 import {
   BindStateToController,
@@ -25,7 +25,6 @@ import {
 } from '../../../../utils/initialization-utils';
 import {ArrayProp, MapProp} from '../../../../utils/props-utils';
 import {parseDependsOn} from '../../../common/facets/depends-on';
-import {updateFacetVisibilityForActiveTab} from '../../../common/facets/facet-tabs/facet-tabs-utils';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
 import {Hidden} from '../../../common/hidden';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
@@ -215,21 +214,6 @@ export class AtomicSegmentedFacet implements InitializableComponent {
     );
   }
 
-  @Watch('tabManagerState')
-  watchTabManagerState(
-    newValue: {activeTab: string},
-    oldValue: {activeTab: string}
-  ) {
-    if (newValue?.activeTab !== oldValue?.activeTab) {
-      updateFacetVisibilityForActiveTab(
-        [...this.tabsIncluded],
-        [...this.tabsExcluded],
-        this.tabManagerState?.activeTab,
-        this.facet
-      );
-    }
-  }
-
   disconnectedCallback() {
     this.dependenciesManager.stopWatching();
   }
@@ -298,6 +282,10 @@ export class AtomicSegmentedFacet implements InitializableComponent {
         ? [...this.allowedValues]
         : undefined,
       customSort: this.customSort.length ? [...this.customSort] : undefined,
+      tabs: {
+        included: [...this.tabsIncluded],
+        excluded: [...this.tabsExcluded],
+      },
     };
   }