feat(headless): add tab manager controller

packages/headless/src/controllers/core/tab-manager/headless-core-tab-manager.test.ts

@@ -0,0 +1,45 @@
+import {tabSetReducer as tabSet} from '../../../features/tab-set/tab-set-slice';
+import {
+  buildMockSearchEngine,
+  MockedSearchEngine,
+} from '../../../test/mock-engine-v2';
+import {createMockState} from '../../../test/mock-state';
+import {buildCoreTabManager} from './headless-core-tab-manager';
+
+jest.mock('../../../features/tab-set/tab-set-actions');
+
+describe('Core Tab Manager', () => {
+  let engine: MockedSearchEngine;
+
+  function initTabManager() {
+    buildCoreTabManager(engine);
+  }
+
+  beforeEach(() => {
+    engine = buildMockSearchEngine(createMockState());
+    initTabManager();
+  });
+
+  it('returns the current active tab', () => {
+    expect(engine.state.tabSet).toEqual({});
+
+    const tabId = '1';
+    const expectedTabSet = {
+      [tabId]: {
+        id: tabId,
+        expression: 'test',
+        isActive: true,
+      },
+    };
+
+    engine.state.tabSet = expectedTabSet;
+
+    expect(engine.state.tabSet).toEqual(expectedTabSet);
+  });
+
+  it('adds the correct reducers to engine', () => {
+    expect(engine.addReducers).toHaveBeenCalledWith({
+      tabSet,
+    });
+  });
+});

packages/headless/src/controllers/core/tab-manager/headless-core-tab-manager.ts

@@ -0,0 +1,55 @@
+import {createSelector} from '@reduxjs/toolkit';
+import {CoreEngine} from '../../../app/engine';
+import {tabSetReducer as tabSet} from '../../../features/tab-set/tab-set-slice';
+import {TabSection} from '../../../state/state-sections';
+import {loadReducerError} from '../../../utils/errors';
+import {
+  buildController,
+  Controller,
+} from '../../controller/headless-controller';
+
+export interface TabManager extends Controller {
+  /**
+   * The state of the `TabManager` controller.
+   */
+  state: TabManagerState;
+}
+
+/**
+ * A scoped and simplified part of the headless state that is relevant to the `TabManager` controller.
+ */
+export interface TabManagerState {
+  activeTab: string;
+}
+
+/**
+ * @internal
+ */
+export function buildCoreTabManager(engine: CoreEngine): TabManager {
+  if (!loadTabReducers(engine)) {
+    throw loadReducerError;
+  }
+
+  const controller = buildController(engine);
+
+  const currentTab = createSelector(
+    (state: typeof engine.state) => state.tabSet,
+    (state) => {
+      const activeTab = Object.values(state).find((tab) => tab.isActive);
+      return activeTab?.id ?? '';
+    }
+  );
+
+  return {
+    ...controller,
+
+    get state() {
+      return {activeTab: currentTab(engine.state)};
+    },
+  };
+}
+
+function loadTabReducers(engine: CoreEngine): engine is CoreEngine<TabSection> {
+  engine.addReducers({tabSet});
+  return true;
+}

packages/headless/src/controllers/core/tab/headless-core-tab.ts

@@ -2,6 +2,7 @@ import {BooleanValue, Schema} from '@coveo/bueno';
 import {configuration} from '../../../app/common-reducers';
 import {CoreEngine} from '../../../app/engine';
 import {getConfigurationInitialState} from '../../../features/configuration/configuration-state';
+import {prepareForSearchWithQuery} from '../../../features/search/search-actions';
 import {
   registerTab,
   updateActiveTab,
@@ -30,6 +31,11 @@ export interface TabOptions {
    */
   expression: string;
 
+  /**
+   * Whether to clear the state when the active tab changes.
+   */
+  clearFiltersOnTabChange?: boolean;
+
   /**
    * A unique identifier for the tab. The value will be used as the originLevel2 when the tab is active.
    */
@@ -47,6 +53,7 @@ export interface TabInitialState {
 const optionsSchema = new Schema<Required<TabOptions>>({
   expression: requiredEmptyAllowedString,
   id: requiredNonEmptyString,
+  clearFiltersOnTabChange: new BooleanValue(),
 });
 
 const initialStateSchema = new Schema({
@@ -72,7 +79,6 @@ export interface Tab extends Controller {
    * Activates the tab.
    */
   select(): void;
-
   /**
    * The state of the `Tab` controller.
    */
@@ -105,7 +111,6 @@ export function buildCoreTab(engine: CoreEngine, props: TabProps): Tab {
 
   const controller = buildController(engine);
   const {dispatch} = engine;
-
   validateOptions(engine, optionsSchema, props.options, 'buildTab');
   const initialState = validateInitialState(
     engine,
@@ -126,6 +131,14 @@ export function buildCoreTab(engine: CoreEngine, props: TabProps): Tab {
     ...controller,
 
     select() {
+      if (props.options.clearFiltersOnTabChange) {
+        dispatch(
+          prepareForSearchWithQuery({
+            q: '',
+            clearFilters: true,
+          })
+        );
+      }
       dispatch(updateActiveTab(id));
     },
 

packages/headless/src/controllers/tab-manager/headless-tab-manager.ssr.ts

@@ -0,0 +1,19 @@
+import {SearchEngine} from '../../app/search-engine/search-engine';
+import {ControllerDefinitionWithoutProps} from '../../app/ssr-engine/types/common';
+import {TabManager, buildTabManager} from './headless-tab-manager';
+
+export * from './headless-tab-manager';
+
+export interface TabManagerDefinition
+  extends ControllerDefinitionWithoutProps<SearchEngine, TabManager> {}
+
+/**
+ * Defines a `TabManager` controller instance.
+ *
+ * @returns The `TabManager` controller definition.
+ * */
+export function defineTabManager(): TabManagerDefinition {
+  return {
+    build: (engine) => buildTabManager(engine),
+  };
+}

packages/headless/src/controllers/tab-manager/headless-tab-manager.test.ts

@@ -0,0 +1,27 @@
+import {
+  MockedSearchEngine,
+  buildMockSearchEngine,
+} from '../../test/mock-engine-v2';
+import {createMockState} from '../../test/mock-state';
+import {buildTabManager, TabManager} from './headless-tab-manager';
+
+jest.mock('../../features/search/search-actions');
+
+describe('Tab', () => {
+  let engine: MockedSearchEngine;
+  let tabManager: TabManager;
+
+  function initTabManager() {
+    tabManager = buildTabManager(engine);
+  }
+
+  beforeEach(() => {
+    engine = buildMockSearchEngine(createMockState());
+
+    initTabManager();
+  });
+
+  it('initializes', () => {
+    expect(tabManager).toBeTruthy();
+  });
+});

packages/headless/src/controllers/tab-manager/headless-tab-manager.ts

@@ -0,0 +1,27 @@
+import {SearchEngine} from '../../app/search-engine/search-engine';
+import {
+  TabManager,
+  TabManagerState,
+  buildCoreTabManager,
+} from '../core/tab-manager/headless-core-tab-manager';
+
+export type {TabManager, TabManagerState};
+
+/**
+ * Creates a `Tab Manager` controller instance.
+ *
+ * @param engine - The headless engine.
+ * @param props - The configurable `Tab Manager` properties.
+ * @returns A `Tab Manager` controller instance.
+ */
+export function buildTabManager(engine: SearchEngine): TabManager {
+  const tabManager = buildCoreTabManager(engine);
+
+  return {
+    ...tabManager,
+
+    get state() {
+      return tabManager.state;
+    },
+  };
+}

packages/headless/src/index.ts

@@ -283,6 +283,12 @@ export type {
 } from './controllers/tab/headless-tab';
 export {buildTab} from './controllers/tab/headless-tab';
 
+export type {
+  TabManagerState,
+  TabManager,
+} from './controllers/tab-manager/headless-tab-manager';
+export {buildTabManager} from './controllers/tab-manager/headless-tab-manager';
+
 export type {
   FacetManagerPayload,
   FacetManagerState,

packages/headless/src/ssr.index.ts

@@ -313,6 +313,12 @@ export type {
 } from './controllers/tab/headless-tab.ssr';
 export {defineTab} from './controllers/tab/headless-tab.ssr';
 
+export type {
+  TabManagerState,
+  TabManager,
+} from './controllers/tab-manager/headless-tab-manager.ssr';
+export {defineTabManager} from './controllers/tab-manager/headless-tab-manager.ssr';
+
 export type {
   FacetManagerPayload,
   FacetManagerState,