From f7a90615d80967d63669231c4a4b00e4f96e9864 Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Thu, 8 Aug 2024 18:28:21 -0400
Subject: [PATCH] feat(atomic): add tab support for atomic-sort-dropdown
 (#4222)

This PR allows atomic-sort-dropdown to be visible/hidden based on the
currently active tab in the tab manager.

https://coveord.atlassian.net/browse/CDX-1554

---------

Co-authored-by: GitHub Actions Bot <>
Co-authored-by: Alex Prudhomme <78121423+alexprudhomme@users.noreply.github.com>
---
 .../src/lib/stencil-generated/components.ts   |   4 +-
 packages/atomic/src/components.d.ts           |  16 ++
 .../atomic-refine-modal.tsx                   |  20 ++-
 .../search/atomic-search-interface/store.ts   |   1 +
 .../atomic-sort-dropdown.tsx                  |  59 ++++--
 .../atomic-sort-expression.tsx                |  33 ++++
 .../atomic-tab-manager.new.stories.tsx        |  29 +++
 .../e2e/atomic-tab-manager.e2e.ts             | 169 ++++++++++++------
 .../atomic-tab-manager/e2e/page-object.ts     |  23 +++
 packages/atomic/src/pages/examples/tabs.html  |  21 ++-
 10 files changed, 306 insertions(+), 69 deletions(-)

diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
index 9edae2ad224..759a27e5b19 100644
--- a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
+++ b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
@@ -2202,14 +2202,14 @@ export declare interface AtomicSortDropdown extends Components.AtomicSortDropdow
 
 
 @ProxyCmp({
-  inputs: ['expression', 'label']
+  inputs: ['expression', 'label', 'tabsExcluded', 'tabsIncluded']
 })
 @Component({
   selector: 'atomic-sort-expression',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['expression', 'label'],
+  inputs: ['expression', 'label', 'tabsExcluded', 'tabsIncluded'],
 })
 export class AtomicSortExpression {
   protected el: HTMLElement;
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
index 244806e18f0..d6961586dd2 100644
--- a/packages/atomic/src/components.d.ts
+++ b/packages/atomic/src/components.d.ts
@@ -3349,6 +3349,14 @@ export namespace Components {
           * The non-localized label to display for this expression.
          */
         "label": string;
+        /**
+          * The tabs on which the sort expression must not be displayed. This property should not be used at the same time as `tabs-included`.  Set this property as a stringified JSON array, e.g., ```html  <atomic-sort-expression tabs-excluded='["tabIDA", "tabIDB"]'></atomic-sort-expression> ``` If you don't set this property, the sort expression can be displayed on any tab. Otherwise, the sort expression won't be displayed on any of the specified tabs.
+         */
+        "tabsExcluded": string[] | string;
+        /**
+          * The tabs on which the sort expression can be displayed. This property should not be used at the same time as `tabs-excluded`.  Set this property as a stringified JSON array, e.g., ```html  <atomic-sort-expression tabs-included='["tabIDA", "tabIDB"]'></atomic-sort-expression snippet> ``` If you don't set this property, the sort expression can be displayed on any tab. Otherwise, the sort expression can only be displayed on the specified tabs.
+         */
+        "tabsIncluded": string[] | string;
     }
     interface AtomicTab {
         /**
@@ -8886,6 +8894,14 @@ declare namespace LocalJSX {
           * The non-localized label to display for this expression.
          */
         "label": string;
+        /**
+          * The tabs on which the sort expression must not be displayed. This property should not be used at the same time as `tabs-included`.  Set this property as a stringified JSON array, e.g., ```html  <atomic-sort-expression tabs-excluded='["tabIDA", "tabIDB"]'></atomic-sort-expression> ``` If you don't set this property, the sort expression can be displayed on any tab. Otherwise, the sort expression won't be displayed on any of the specified tabs.
+         */
+        "tabsExcluded"?: string[] | string;
+        /**
+          * The tabs on which the sort expression can be displayed. This property should not be used at the same time as `tabs-excluded`.  Set this property as a stringified JSON array, e.g., ```html  <atomic-sort-expression tabs-included='["tabIDA", "tabIDB"]'></atomic-sort-expression snippet> ``` If you don't set this property, the sort expression can be displayed on any tab. Otherwise, the sort expression can only be displayed on the specified tabs.
+         */
+        "tabsIncluded"?: string[] | string;
     }
     interface AtomicTab {
         /**
diff --git a/packages/atomic/src/components/search/atomic-refine-modal/atomic-refine-modal.tsx b/packages/atomic/src/components/search/atomic-refine-modal/atomic-refine-modal.tsx
index 04fa87001e7..2dd82fe3c0f 100644
--- a/packages/atomic/src/components/search/atomic-refine-modal/atomic-refine-modal.tsx
+++ b/packages/atomic/src/components/search/atomic-refine-modal/atomic-refine-modal.tsx
@@ -13,6 +13,9 @@ import {
   SearchStatus,
   FacetManager,
   buildFacetManager,
+  TabManager,
+  TabManagerState,
+  buildTabManager,
 } from '@coveo/headless';
 import {Component, h, State, Prop, Element, Watch} from '@stencil/core';
 import {
@@ -20,6 +23,7 @@ import {
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
+import {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';
 import {sortByDocumentPosition} from '../../../utils/utils';
 import {findSection} from '../../common/atomic-layout-section/sections';
 import {
@@ -95,6 +99,10 @@ export class AtomicRefineModal implements InitializableComponent {
   @State()
   public facetManagerState!: FacetManagerState;
   @State() @BindStateToController('sort') public sortState!: SortState;
+  public tabManager!: TabManager;
+  @BindStateToController('tabManager')
+  @State()
+  public tabManagerState!: TabManagerState;
   @State() public error!: Error;
 
   @Prop({mutable: true}) openButton?: HTMLElement;
@@ -126,6 +134,7 @@ export class AtomicRefineModal implements InitializableComponent {
     this.querySummary = buildQuerySummary(this.bindings.engine);
     this.searchStatus = buildSearchStatus(this.bindings.engine);
     this.facetManager = buildFacetManager(this.bindings.engine);
+    this.tabManager = buildTabManager(this.bindings.engine);
     this.watchEnabled(this.isOpen);
   }
 
@@ -229,7 +238,16 @@ export class AtomicRefineModal implements InitializableComponent {
     option && this.sort.sortBy(option.criteria);
   }
 
-  private buildOption({expression, criteria, label}: SortDropdownOption) {
+  private buildOption({expression, criteria, label, tabs}: SortDropdownOption) {
+    if (
+      !shouldDisplayOnCurrentTab(
+        [...tabs.included],
+        [...tabs.excluded],
+        this.tabManagerState?.activeTab
+      )
+    ) {
+      return;
+    }
     return (
       <option value={expression} selected={this.sort.isSortedBy(criteria)}>
         {this.bindings.i18n.t(label)}
diff --git a/packages/atomic/src/components/search/atomic-search-interface/store.ts b/packages/atomic/src/components/search/atomic-search-interface/store.ts
index 06b830cf155..8e5c9697245 100644
--- a/packages/atomic/src/components/search/atomic-search-interface/store.ts
+++ b/packages/atomic/src/components/search/atomic-search-interface/store.ts
@@ -18,6 +18,7 @@ import {
 import {makeDesktopQuery} from '../atomic-layout/search-layout';
 
 export interface SortDropdownOption {
+  tabs: {included: string[] | string; excluded: string[] | string};
   expression: string;
   criteria: SortCriterion[];
   label: string;
diff --git a/packages/atomic/src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.tsx b/packages/atomic/src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.tsx
index 15398665cf7..4ddfe22f2e3 100644
--- a/packages/atomic/src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.tsx
+++ b/packages/atomic/src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.tsx
@@ -7,6 +7,10 @@ import {
   buildSearchStatus,
   SearchStatus,
   SearchStatusState,
+  TabManager,
+  TabManagerState,
+  buildTabManager,
+  loadSortCriteriaActions,
 } from '@coveo/headless';
 import {Component, h, State, Element} from '@stencil/core';
 import {
@@ -14,6 +18,7 @@ import {
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
+import {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';
 import {randomID} from '../../../utils/utils';
 import {SortContainer} from '../../common/sort/container';
 import {SortGuard} from '../../common/sort/guard';
@@ -50,6 +55,10 @@ export class AtomicSortDropdown implements InitializableComponent {
   @BindStateToController('searchStatus')
   @State()
   private searchStatusState!: SearchStatusState;
+  public tabManager!: TabManager;
+  @BindStateToController('tabManager')
+  @State()
+  public tabManagerState!: TabManagerState;
   @State() public error!: Error;
 
   public initialize() {
@@ -60,6 +69,7 @@ export class AtomicSortDropdown implements InitializableComponent {
         criterion: this.bindings.store.state.sortOptions[0]?.criteria,
       },
     });
+    this.tabManager = buildTabManager(this.bindings.engine);
   }
 
   private buildOptions() {
@@ -76,22 +86,34 @@ export class AtomicSortDropdown implements InitializableComponent {
 
     this.bindings.store.set(
       'sortOptions',
-      sortExpressionElements.map(({expression, label}) => {
-        new Schema({
-          label: new StringValue({emptyAllowed: false, required: true}),
-        }).validate({label});
+      sortExpressionElements.map(
+        ({expression, label, tabsIncluded, tabsExcluded}) => {
+          new Schema({
+            label: new StringValue({emptyAllowed: false, required: true}),
+          }).validate({label});
 
-        return {
-          criteria: parseCriterionExpression(expression),
-          expression,
-          label,
-        };
-      })
+          return {
+            tabs: {
+              included: tabsIncluded,
+              excluded: tabsExcluded,
+            },
+            criteria: parseCriterionExpression(expression),
+            expression,
+            label,
+          };
+        }
+      )
     );
   }
 
   private get options() {
-    return this.bindings.store.state.sortOptions;
+    return this.bindings.store.state.sortOptions.filter(({tabs}) =>
+      shouldDisplayOnCurrentTab(
+        [...tabs.included],
+        [...tabs.excluded],
+        this.tabManagerState?.activeTab
+      )
+    );
   }
 
   private select(e: Event) {
@@ -101,6 +123,21 @@ export class AtomicSortDropdown implements InitializableComponent {
     );
     option && this.sort.sortBy(option.criteria);
   }
+  public componentShouldUpdate(): void {
+    if (
+      this.options.some(
+        (option) => option.expression === this.sortState.sortCriteria
+      )
+    ) {
+      return;
+    }
+
+    const action = loadSortCriteriaActions(
+      this.bindings.engine
+    ).updateSortCriterion(this.options[0]?.criteria);
+
+    this.bindings.engine.dispatch(action);
+  }
 
   public render() {
     const {hasError, hasResults, firstSearchExecuted} = this.searchStatusState;
diff --git a/packages/atomic/src/components/search/atomic-sort-expression/atomic-sort-expression.tsx b/packages/atomic/src/components/search/atomic-sort-expression/atomic-sort-expression.tsx
index d4ccc740c1c..0dd014e1825 100644
--- a/packages/atomic/src/components/search/atomic-sort-expression/atomic-sort-expression.tsx
+++ b/packages/atomic/src/components/search/atomic-sort-expression/atomic-sort-expression.tsx
@@ -1,4 +1,5 @@
 import {Component, Prop, Element, h} from '@stencil/core';
+import {ArrayProp} from '../../../utils/props-utils';
 
 /**
  * The `atomic-sort-expression` component defines a sort expression. This component must be inside an `atomic-sort-dropdown` component.
@@ -28,9 +29,41 @@ export class AtomicSortExpression {
    * You can specify multiple sort criteria to be used in the same request by separating them with a comma (e.g., `criteria="size ascending, date ascending"`).
    */
   @Prop({reflect: true}) public expression!: string;
+  /**
+   * The tabs on which the sort expression can be displayed. This property should not be used at the same time as `tabs-excluded`.
+   *
+   * Set this property as a stringified JSON array, e.g.,
+   * ```html
+   *  <atomic-sort-expression tabs-included='["tabIDA", "tabIDB"]'></atomic-sort-expression snippet>
+   * ```
+   * If you don't set this property, the sort expression can be displayed on any tab. Otherwise, the sort expression can only be displayed on the specified tabs.
+   */
+  @ArrayProp()
+  @Prop({reflect: true, mutable: true})
+  public tabsIncluded: string[] | string = '[]';
+
+  /**
+   * The tabs on which the sort expression must not be displayed. This property should not be used at the same time as `tabs-included`.
+   *
+   * Set this property as a stringified JSON array, e.g.,
+   * ```html
+   *  <atomic-sort-expression tabs-excluded='["tabIDA", "tabIDB"]'></atomic-sort-expression>
+   * ```
+   * If you don't set this property, the sort expression can be displayed on any tab. Otherwise, the sort expression won't be displayed on any of the specified tabs.
+   */
+  @ArrayProp()
+  @Prop({reflect: true, mutable: true})
+  public tabsExcluded: string[] | string = '[]';
 
   public render() {
+    if (this.tabsIncluded.length > 0 && this.tabsExcluded.length > 0) {
+      console.warn(
+        'Values for both "tabs-included" and "tabs-excluded" have been provided. This is could lead to unexpected behaviors.'
+      );
+    }
+
     const dropdownComponent = 'atomic-sort-dropdown';
+
     if (!this.host.closest(dropdownComponent)) {
       const error = new Error(
         `The "${this.host.nodeName.toLowerCase()}" component has to be used inside an ${dropdownComponent} element.`
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
index 0ff28f45b00..fbf50ae3ef6 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
@@ -62,6 +62,35 @@ export const Default: Story = {
   decorators: [
     (story) => html`
       ${story()}
+      <atomic-refine-toggle></atomic-refine-toggle>
+      <div style="padding:10px;">
+        <atomic-sort-dropdown>
+          <atomic-sort-expression
+            tabs-excluded='["article"]'
+            label="Name descending"
+            expression="name descending"
+          ></atomic-sort-expression>
+          <atomic-sort-expression
+            tabs-excluded='["article"]'
+            label="Name ascending"
+            expression="name ascending"
+          ></atomic-sort-expression>
+          <atomic-sort-expression
+            tabs-included='["article"]'
+            label="Most Recent"
+            expression="date descending"
+          ></atomic-sort-expression>
+          <atomic-sort-expression
+            tabs-included='["article"]'
+            label="Least Recent"
+            expression="date ascending"
+          ></atomic-sort-expression>
+          <atomic-sort-expression
+            label="relevance"
+            expression="relevancy"
+          ></atomic-sort-expression>
+        </atomic-sort-dropdown>
+      </div>
       <div style="display: flex;">
         <atomic-smart-snippet
           tabs-included='["article", "documentation"]'
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
index bce04089558..e949b7f8760 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
@@ -55,88 +55,125 @@ test.describe('AtomicTabManager', () => {
           await expect(excludedFacets[i]).toBeVisible();
         }
       });
+
       test('smart snippet', async ({tabManager}) => {
         await expect(tabManager.smartSnippet).not.toBeVisible();
       });
 
-      test('should display tab buttons for each atomic-tab elements', async ({
-        tabManager,
-      }) => {
-        await expect(tabManager.tabDropdown).not.toBeVisible();
+      test('sort dropdown', async ({tabManager}) => {
+        await tabManager.sortDropdown.waitFor({state: 'visible'});
 
-        await expect(tabManager.tabButtons()).toHaveText([
-          'All',
-          'Articles',
-          'Documentation',
+        await expect(tabManager.sortDropdownOptions).toHaveText([
+          'Name descending',
+          'Name ascending',
+          'Relevance',
         ]);
       });
+    });
+
+    test('should display tab buttons for each atomic-tab elements', async ({
+      tabManager,
+    }) => {
+      await expect(tabManager.tabDropdown).not.toBeVisible();
 
-      test.describe('when clicking on tab button', () => {
-        test.beforeEach(async ({tabManager}) => {
-          await tabManager.tabButtons('Articles').click();
+      await expect(tabManager.tabButtons()).toHaveText([
+        'All',
+        'Articles',
+        'Documentation',
+      ]);
+    });
+
+    test.describe('when clicking on tab button', () => {
+      test.beforeEach(async ({tabManager}) => {
+        await tabManager.tabButtons('Articles').click();
+      });
+
+      test('should change active tab', async ({tabManager}) => {
+        await expect(tabManager.activeTab).toHaveText('Articles');
+      });
+
+      test.describe('should change other component visibility', async () => {
+        test('facets', async ({tabManager}) => {
+          await tabManager.excludedFacet.last().waitFor({state: 'hidden'});
+          const includedFacets = await tabManager.includedFacet.all();
+          for (let i = 0; i < includedFacets.length; i++) {
+            await expect(includedFacets[i]).toBeVisible();
+          }
+
+          const excludedFacets = await tabManager.excludedFacet.all();
+          for (let i = 0; i < excludedFacets.length; i++) {
+            await expect(excludedFacets[i]).not.toBeVisible();
+          }
         });
 
-        test('should change active tab', async ({tabManager}) => {
-          await expect(tabManager.activeTab).toHaveText('Articles');
+        test('smart snippet', async ({tabManager}) => {
+          await expect(tabManager.smartSnippet).toBeVisible();
+        });
+
+        test('sort dropdown', async ({tabManager}) => {
+          await tabManager.sortDropdown.waitFor({state: 'visible'});
+
+          await expect(tabManager.sortDropdownOptions).toHaveText([
+            'Most Recent',
+            'Least Recent',
+            'Relevance',
+          ]);
+        });
+      });
+
+      test.describe('when selecting previous tab', () => {
+        test.beforeEach(async ({tabManager, facets}) => {
+          await tabManager.tabButtons('All').click();
+          await facets.getFacetValue.first().waitFor({state: 'visible'});
         });
 
         test.describe('should change other component visibility', async () => {
           test('facets', async ({tabManager}) => {
-            await tabManager.excludedFacet.last().waitFor({state: 'hidden'});
-            const includedFacets = await tabManager.includedFacet.all();
-            for (let i = 0; i < includedFacets.length; i++) {
-              await expect(includedFacets[i]).toBeVisible();
-            }
-
             const excludedFacets = await tabManager.excludedFacet.all();
             for (let i = 0; i < excludedFacets.length; i++) {
-              await expect(excludedFacets[i]).not.toBeVisible();
+              await expect(excludedFacets[i]).toBeVisible();
+            }
+
+            const includedFacets = await tabManager.includedFacet.all();
+            for (let i = 0; i < includedFacets.length; i++) {
+              await expect(includedFacets[i]).not.toBeVisible();
             }
           });
+
           test('smart snippet', async ({tabManager}) => {
-            await expect(tabManager.smartSnippet).toBeVisible();
+            await expect(tabManager.smartSnippet).not.toBeVisible();
           });
-        });
 
-        test.describe('when selecting previous tab', () => {
-          test.beforeEach(async ({tabManager, facets}) => {
-            await tabManager.tabButtons('All').click();
-            await facets.getFacetValue.first().waitFor({state: 'visible'});
-          });
+          test('sort dropdown', async ({tabManager}) => {
+            await tabManager.refineModalButton.click();
+            await tabManager.refineModalHeader.waitFor({state: 'visible'});
 
-          test.describe('should change other component visibility', async () => {
-            test('facets', async ({tabManager}) => {
-              const excludedFacets = await tabManager.excludedFacet.all();
-              for (let i = 0; i < excludedFacets.length; i++) {
-                await expect(excludedFacets[i]).toBeVisible();
-              }
-
-              const includedFacets = await tabManager.includedFacet.all();
-              for (let i = 0; i < includedFacets.length; i++) {
-                await expect(includedFacets[i]).not.toBeVisible();
-              }
-            });
+            await expect(tabManager.refineModalSortDropdownOptions).toHaveText([
+              'Name descending',
+              'Name ascending',
+              'Relevance',
+            ]);
           });
         });
+      });
 
-        test.describe('when resizing viewport', () => {
-          test.beforeEach(async ({page}) => {
-            await page.setViewportSize({width: 300, height: 500});
-          });
+      test.describe('when resizing viewport', () => {
+        test.beforeEach(async ({page}) => {
+          await page.setViewportSize({width: 300, height: 500});
+        });
 
-          test('should display tabs dropdown', async ({tabManager}) => {
-            await expect(tabManager.tabDropdown).toBeVisible();
-          });
+        test('should display tabs dropdown', async ({tabManager}) => {
+          await expect(tabManager.tabDropdown).toBeVisible();
+        });
 
-          test('should hide tabs area', async ({tabManager}) => {
-            await expect(tabManager.tabArea).not.toBeVisible();
-          });
+        test('should hide tabs area', async ({tabManager}) => {
+          await expect(tabManager.tabArea).not.toBeVisible();
+        });
 
-          test('should have the active tab selected in the dropdown', async ({
-            tabManager,
-          }) => {
-            await expect(tabManager.tabDropdown).toHaveValue('article');
-          });
+        test('should have the active tab selected in the dropdown', async ({
+          tabManager,
+        }) => {
+          await expect(tabManager.tabDropdown).toHaveValue('article');
         });
       });
     });
@@ -192,9 +229,21 @@ test.describe('AtomicTabManager', () => {
             await expect(excludedFacets[i]).not.toBeVisible();
           }
         });
+
         test('smart snippet', async ({tabManager}) => {
           await expect(tabManager.smartSnippet).toBeVisible();
         });
+
+        test('sort dropdown', async ({tabManager}) => {
+          await tabManager.refineModalButton.click();
+          await tabManager.refineModalHeader.waitFor({state: 'visible'});
+
+          await expect(tabManager.refineModalSortDropdownOptions).toHaveText([
+            'Most Recent',
+            'Least Recent',
+            'Relevance',
+          ]);
+        });
       });
 
       test.describe('when selecting previous dropdown option', () => {
@@ -215,9 +264,21 @@ test.describe('AtomicTabManager', () => {
               await expect(includedFacets[i]).not.toBeVisible();
             }
           });
+
           test('smart snippet', async ({tabManager}) => {
             await expect(tabManager.smartSnippet).not.toBeVisible();
           });
+
+          test('sort dropdown', async ({tabManager}) => {
+            await tabManager.refineModalButton.click();
+            await tabManager.refineModalHeader.waitFor({state: 'visible'});
+
+            await expect(tabManager.refineModalSortDropdownOptions).toHaveText([
+              'Name descending',
+              'Name ascending',
+              'Relevance',
+            ]);
+          });
         });
       });
 
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
index 7ebff75f43b..2d68f309c71 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
@@ -30,6 +30,29 @@ export class TabManagerPageObject extends BasePageObject<'atomic-tab-manager'> {
     return this.page.locator('atomic-smart-snippet [part="smart-snippet"]');
   }
 
+  get sortDropdown() {
+    return this.page.getByRole('combobox', {name: 'Sort by'});
+  }
+
+  get sortDropdownOptions() {
+    return this.page.getByLabel('Sort by').getByRole('option');
+  }
+
+  get refineModalSortDropdownOptions() {
+    return this.page
+      .locator('atomic-modal [part="select-wrapper"]')
+      .getByLabel('Sort by')
+      .getByRole('option');
+  }
+
+  get refineModalButton() {
+    return this.page.getByRole('button', {name: 'Sort & Filter'});
+  }
+
+  get refineModalHeader() {
+    return this.page.getByRole('heading', {name: 'Sort & Filter'});
+  }
+
   tabButtons(value?: string) {
     const baseLocator = this.page.getByLabel(/tab for .*/);
     return value ? baseLocator.filter({hasText: value}) : baseLocator;
diff --git a/packages/atomic/src/pages/examples/tabs.html b/packages/atomic/src/pages/examples/tabs.html
index 5bd1d9b32a2..8e92264fe18 100644
--- a/packages/atomic/src/pages/examples/tabs.html
+++ b/packages/atomic/src/pages/examples/tabs.html
@@ -233,8 +233,27 @@
             <atomic-query-summary></atomic-query-summary>
             <atomic-refine-toggle></atomic-refine-toggle>
             <atomic-sort-dropdown>
+              <atomic-sort-expression
+                tabs-excluded='["article"]'
+                label="Name descending"
+                expression="name descending"
+              ></atomic-sort-expression>
+              <atomic-sort-expression
+                tabs-excluded='["article"]'
+                label="Name ascending"
+                expression="name ascending"
+              ></atomic-sort-expression>
+              <atomic-sort-expression
+                tabs-included='["article"]'
+                label="Most Recent"
+                expression="date descending"
+              ></atomic-sort-expression>
+              <atomic-sort-expression
+                tabs-included='["article"]'
+                label="Least Recent"
+                expression="date ascending"
+              ></atomic-sort-expression>
               <atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
-              <atomic-sort-expression label="most-recent" expression="date descending"></atomic-sort-expression>
             </atomic-sort-dropdown>
             <atomic-did-you-mean></atomic-did-you-mean>
             <atomic-notifications></atomic-notifications>