feat(atomic): add atomic-tab-manager component

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

@@ -1,4 +1,3 @@
-import {configuration} from '../../../app/common-reducers';
 import {tabSetReducer as tabSet} from '../../../features/tab-set/tab-set-slice';
 import {
   buildMockSearchEngine,
@@ -21,9 +20,25 @@ describe('Core Tab Manager', () => {
     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({
-      configuration,
       tabSet,
     });
   });

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

@@ -1,7 +1,7 @@
-import {configuration} from '../../../app/common-reducers';
+import {createSelector} from '@reduxjs/toolkit';
 import {CoreEngine} from '../../../app/engine';
 import {tabSetReducer as tabSet} from '../../../features/tab-set/tab-set-slice';
-import {ConfigurationSection, TabSection} from '../../../state/state-sections';
+import {TabSection} from '../../../state/state-sections';
 import {loadReducerError} from '../../../utils/errors';
 import {
   buildController,
@@ -23,10 +23,7 @@ export interface TabManagerState {
 }
 
 /**
- * Creates a `TabManager` controller instance.
- *
- * @param engine - The headless engine.
- * @returns A `TabManager` controller instance.
+ * @internal
  */
 export function buildCoreTabManager(engine: CoreEngine): TabManager {
   if (!loadTabReducers(engine)) {
@@ -35,26 +32,24 @@ export function buildCoreTabManager(engine: CoreEngine): TabManager {
 
   const controller = buildController(engine);
 
-  const getCurrentTab = () => {
-    return (
-      Object.values(engine.state.tabSet ?? {}).find((tab) => tab.isActive)
-        ?.id ?? ''
-    );
-  };
+  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() {
-      const activeTab = getCurrentTab();
-      return {activeTab};
+      return {activeTab: currentTab(engine.state)};
     },
   };
 }
 
-function loadTabReducers(
-  engine: CoreEngine
-): engine is CoreEngine<ConfigurationSection & TabSection> {
-  engine.addReducers({configuration, tabSet});
+function loadTabReducers(engine: CoreEngine): engine is CoreEngine<TabSection> {
+  engine.addReducers({tabSet});
   return true;
 }

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

@@ -1,12 +1,8 @@
 import {BooleanValue, Schema} from '@coveo/bueno';
 import {configuration} from '../../../app/common-reducers';
 import {CoreEngine} from '../../../app/engine';
-import {
-  deselectAllBreadcrumbs,
-  deselectAllNonBreadcrumbs,
-} from '../../../features/breadcrumb/breadcrumb-actions';
 import {getConfigurationInitialState} from '../../../features/configuration/configuration-state';
-import {updateQuery} from '../../../features/query/query-actions';
+import {prepareForSearchWithQuery} from '../../../features/search/search-actions';
 import {
   registerTab,
   updateActiveTab,
@@ -136,9 +132,12 @@ export function buildCoreTab(engine: CoreEngine, props: TabProps): Tab {
 
     select() {
       if (props.options.clearFiltersOnTabChange) {
-        dispatch(deselectAllBreadcrumbs());
-        dispatch(deselectAllNonBreadcrumbs());
-        dispatch(updateQuery({q: ''}));
+        dispatch(
+          prepareForSearchWithQuery({
+            q: '',
+            clearFilters: true,
+          })
+        );
       }
       dispatch(updateActiveTab(id));
     },

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

@@ -7,6 +7,13 @@ import {
 
 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);