fix(atomic): Facets don't update correctly in the refine modal when c…

…hanging tabs (#4280) This PR ensures that the facets in the refine modal are shown/hidden based on which tab is open. Prior to this fix, the refine modal would show the facets of the previous active tab, not the current one. https://coveord.atlassian.net/browse/CDX-1586
coveo · Aug 26, 2024 · 221e1bc · 221e1bc
1 parent 19cabeb
commit 221e1bc
Show file tree

Hide file tree

Showing 12 changed files with 291 additions and 263 deletions.
diff --git a/packages/atomic/cypress/e2e/breadbox.cypress.ts b/packages/atomic/cypress/e2e/breadbox.cypress.ts
@@ -271,7 +271,7 @@ describe('Breadbox Test Suites', () => {
   });
 
   describe('when excluding from a standard facet', () => {
-    const selectionIndex = 2;
+    const selectionIndex = 1;
 
     function setupFacetWithMultipleExcludedValues() {
       new TestFixture()

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,7 +16,15 @@ import {
   TabManager,
   buildTabManager,
 } from '@coveo/headless';
-import {Component, h, State, Prop, Element, Fragment} from '@stencil/core';
+import {
+  Component,
+  h,
+  State,
+  Prop,
+  Element,
+  Fragment,
+  Watch,
+} from '@stencil/core';
 import {
   AriaLiveRegion,
   FocusTargetController,
@@ -340,17 +348,26 @@ 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,
     propName: keyof AtomicCategoryFacet
   ) {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
     if (
       this.isCategoryFacetState(prev, propName) &&
       this.isCategoryFacetState(next, propName)

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} from '@stencil/core';
+import {Component, h, State, Prop, VNode, Element, Watch} from '@stencil/core';
 import {
   AriaLiveRegion,
   FocusTargetController,
@@ -348,17 +348,26 @@ 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,
     propName: keyof AtomicColorFacet
   ) {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
     if (propName === 'facetState' && prev && this.withSearch) {
       return shouldUpdateFacetSearchComponent(
         (next as FacetState).facetSearch,

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,6 +24,7 @@ import {
   Element,
   VNode,
   Fragment,
+  Watch,
 } from '@stencil/core';
 import {
   AriaLiveRegion,
@@ -317,17 +318,26 @@ 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: unknown,
-    prev: unknown,
+    next: FacetState,
+    prev: FacetState,
     propName: keyof AtomicFacet
   ) {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
     if (
       this.isFacetState(prev, propName) &&
       this.isFacetState(next, propName)

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} from '@stencil/core';
+import {Component, Element, h, Listen, Prop, State, Watch} from '@stencil/core';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
   BindStateToController,
@@ -265,13 +265,19 @@ export class AtomicNumericFacet implements InitializableComponent {
     this.tabManager = buildTabManager(this.bindings.engine);
   }
 
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facetForRange
-    );
+  @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() {

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} from '@stencil/core';
+import {Component, h, State, Prop, VNode, Element, Watch} from '@stencil/core';
 import Star from '../../../../images/star.svg';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
@@ -271,13 +271,19 @@ export class AtomicRatingFacet implements InitializableComponent {
     this.dependenciesManager?.stopWatching();
   }
 
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
+  @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() {

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} from '@stencil/core';
+import {Component, h, State, Prop, VNode, Element, Watch} from '@stencil/core';
 import Star from '../../../../images/star.svg';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
@@ -214,16 +214,20 @@ export class AtomicRatingRangeFacet implements InitializableComponent {
     this.initializeFacet();
     this.initializeDependenciesManager();
   }
-
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
+  @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;

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} from '@stencil/core';
+import {Component, h, Prop, State, VNode, Watch} from '@stencil/core';
 import {getFieldValueCaption} from '../../../../utils/field-utils';
 import {
   BindStateToController,
@@ -215,13 +215,19 @@ export class AtomicSegmentedFacet implements InitializableComponent {
     );
   }
 
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facet
-    );
+  @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() {

diff --git a/...ges/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx b/...ges/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx
@@ -20,7 +20,7 @@ import {
   TabManager,
   TabManagerState,
 } from '@coveo/headless';
-import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
+import {Component, Element, h, Listen, Prop, State, Watch} from '@stencil/core';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
   BindStateToController,
@@ -256,13 +256,19 @@ export class AtomicTimeframeFacet implements InitializableComponent {
     this.tabManager = buildTabManager(this.bindings.engine);
   }
 
-  public componentShouldUpdate(): void {
-    updateFacetVisibilityForActiveTab(
-      [...this.tabsIncluded],
-      [...this.tabsExcluded],
-      this.tabManagerState?.activeTab,
-      this.facetForDateRange
-    );
+  @Watch('tabManagerState')
+  watchTabManagerState(
+    newValue: {activeTab: string},
+    oldValue: {activeTab: string}
+  ) {
+    if (newValue?.activeTab !== oldValue?.activeTab) {
+      updateFacetVisibilityForActiveTab(
+        [...this.tabsIncluded],
+        [...this.tabsExcluded],
+        this.tabManagerState?.activeTab,
+        this.facetForDateRange
+      );
+    }
   }
 
   public disconnectedCallback() {