@designcrowd/library.brand-page 6.1.6 → 6.1.7

package/src/shared/side-bar/store/side-bar-store.test.ts

@@ -0,0 +1,124 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { useUiSideBarStore } from './side-bar-store';
+import {
+  PAGE_SETTINGS_SECTIONS,
+  useUiPageSettingsStore,
+} from '../../page-settings/store';
+import {
+  CONTENT_SETTINGS_MODES,
+  useUiContentSettingsStore,
+} from '../../content-settings/store';
+import { SIDE_BAR_TAB_NAMES } from '@src/brand-page-maker/constants/sidebar-constant';
+
+// Selecting the Pages tab lands the panel at the top (the "pages" section), so a
+// plain tab click always opens on the pages list. Content must no longer touch
+// the page section — Manage Pages left the Content tab in BP-5855.
+describe('side-bar store — Pages tab section coupling', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('selecting the Pages tab resets the page section to "pages"', () => {
+    const sideBarStore = useUiSideBarStore();
+    const pageSettingsStore = useUiPageSettingsStore();
+
+    pageSettingsStore.setSelectedSectionName({
+      sectionName: PAGE_SETTINGS_SECTIONS.header,
+    });
+
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
+    });
+
+    expect(pageSettingsStore.selectedSectionName).toBe(
+      PAGE_SETTINGS_SECTIONS.pages,
+    );
+  });
+
+  test('selecting the Content tab leaves the page section untouched', () => {
+    const sideBarStore = useUiSideBarStore();
+    const pageSettingsStore = useUiPageSettingsStore();
+
+    pageSettingsStore.setSelectedSectionName({
+      sectionName: PAGE_SETTINGS_SECTIONS.header,
+    });
+
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
+
+    expect(pageSettingsStore.selectedSectionName).toBe(
+      PAGE_SETTINGS_SECTIONS.header,
+    );
+  });
+});
+
+// Only one tab's component is ever mounted (BrandPageMaker.vue
+// `<component :is="selectedTabName">`), so a mode left on the shared
+// content-settings store by the tab being left has nowhere to render once the
+// switch happens. Covers both directions of the leak: a header/footer preview
+// deep-link landing on a stuck picker (BrandPageMakerPage.mixin.ts switches tabs
+// without resetting mode), and Pages -> Content carrying the picker over.
+describe('side-bar store — tab switches clear a leftover content-settings mode', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('switching to the Pages tab clears a leftover images mode', () => {
+    const sideBarStore = useUiSideBarStore();
+    const contentSettingsStore = useUiContentSettingsStore();
+
+    contentSettingsStore.pushMode({ mode: CONTENT_SETTINGS_MODES.images });
+    expect(contentSettingsStore.mode).toBe(CONTENT_SETTINGS_MODES.images);
+
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
+    });
+
+    expect(contentSettingsStore.mode).toBe(CONTENT_SETTINGS_MODES.edit);
+  });
+
+  test('switching to the Content tab clears a leftover images mode from the Pages tab', () => {
+    const sideBarStore = useUiSideBarStore();
+    const contentSettingsStore = useUiContentSettingsStore();
+
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
+    });
+    contentSettingsStore.pushMode({ mode: CONTENT_SETTINGS_MODES.images });
+
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
+
+    expect(contentSettingsStore.mode).toBe(CONTENT_SETTINGS_MODES.edit);
+  });
+
+  // Regression guard: SideBarTabButton fires setSelectedTabName unconditionally
+  // on every click, including re-clicking the tab you're already on. That must
+  // NOT reset an in-progress, same-tab mode — e.g. a focused content item on the
+  // Content tab — or clicking the active tab again would silently collapse it.
+  // (Caught by brandpage-maker-store.test.ts's
+  // "applyHistorySnapshot resets sidebar..." test, which sets up this exact
+  // precondition.)
+  test('re-selecting the tab already selected does not reset an in-progress mode', () => {
+    const sideBarStore = useUiSideBarStore();
+    const contentSettingsStore = useUiContentSettingsStore();
+
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
+    contentSettingsStore.pushMode({
+      mode: CONTENT_SETTINGS_MODES.focusedContentItem,
+    });
+
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
+
+    expect(contentSettingsStore.mode).toBe(
+      CONTENT_SETTINGS_MODES.focusedContentItem,
+    );
+  });
+});

package/src/shared/side-bar/store/side-bar-store.ts

@@ -9,6 +9,7 @@ import {
   PAGE_SETTINGS_SECTIONS,
   useUiPageSettingsStore,
 } from '../../page-settings/store';
+import { useUiContentSettingsStore } from '../../content-settings/store';
 
 export interface SideBarState {
   tabs: SideBarTab[];
@@ -20,7 +21,7 @@ export interface SideBarState {
 export const useUiSideBarStore = defineStore('uiSideBar', {
   state: (): SideBarState => ({
     tabs: DEFAULT_SIDE_BAR_TABS(),
-    selectedTabName: DEFAULT_SIDE_BAR_TABS()[1].name,
+    selectedTabName: SIDE_BAR_TAB_NAMES.TEMPLATE_SETTINGS,
     isSwitchingTab: false,
     selectedSettingsSection: undefined,
   }),
@@ -41,9 +42,23 @@ export const useUiSideBarStore = defineStore('uiSideBar', {
       this.isSwitchingTab = true;
 
       try {
+        const isActualTabChange = this.selectedTabName !== payload.tabName;
+
         this.selectedTabName = payload.tabName;
 
-        if (this.selectedTabName === SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS) {
+        // Only one tab's component is ever mounted at a time (BrandPageMaker.vue
+        // `<component :is="selectedTabName">`), so a mode left on the shared
+        // content-settings store by the tab we're leaving (e.g. an in-flight image
+        // replace) has nowhere to render once we've switched — clear it so every
+        // *actual* tab switch is a clean slate (BP-5855). Gated on a real change:
+        // re-selecting the tab you're already on (e.g. clicking the active sidebar
+        // tab again) must NOT reset an in-progress, same-tab mode such as a focused
+        // content item (SideBarTabButton fires this unconditionally on every click).
+        if (isActualTabChange) {
+          useUiContentSettingsStore().resetMode();
+        }
+
+        if (this.selectedTabName === SIDE_BAR_TAB_NAMES.PAGE_SETTINGS) {
           const pageSettingsStore = useUiPageSettingsStore();
 
           pageSettingsStore.setSelectedSectionName({