@designcrowd/library.brand-page 5.17.25-undo-21 → 5.17.25

package/src/brand-page-maker/components/quick-link-bar/UndoButton.test.ts

@@ -1,166 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import UndoButton from './UndoButton.vue';
-import { createPinia, setActivePinia } from 'pinia';
-
-// The i18n helper is imported with a constant key list. Translate to strings
-// so the template renders deterministically.
-vi.mock('@src/composables/useTranslate', () => ({
-  quickLinkBarTr: (key: string) => {
-    const translations: Record<string, string> = {
-      undoLabel: 'Undo',
-      redoLabel: 'Redo',
-    };
-
-    return translations[key] || key;
-  },
-}));
-
-// fe-shared-lib primitives. Replaced with minimal stubs that surface the
-// data-* attributes the component sets on them — so `wrapper.find(...)` can
-// match them in tests.
-vi.mock('@designcrowd/fe-shared-lib', () => ({
-  Icon: {
-    name: 'Icon',
-    inheritAttrs: true,
-    template: '<span v-bind="$attrs" @click="$emit(\'click\', $event)" />',
-  },
-  Tooltip: {
-    name: 'Tooltip',
-    // Render the named `open` slot (where UndoButton mounts the Icon) plus
-    // the named `content` slot (the tooltip body text).
-    template: '<div><slot name="open" /><slot name="content" /></div>',
-  },
-}));
-
-// History store mock — mutable so each test can set canUndo on it.
-const historyStoreMock = {
-  canUndo: true,
-  canRedo: false,
-  undo: vi.fn(),
-  redo: vi.fn(),
-};
-
-vi.mock('@brand-page-maker/stores/history/history-store', () => ({
-  useHistoryStore: vi.fn(() => historyStoreMock),
-}));
-
-// AI-processing store mock — mutable so each test can flip isProcessing.
-const aiStoreMock = {
-  isProcessing: false,
-};
-
-vi.mock(
-  '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store',
-  () => ({
-    useAiWebsiteBuilderThreadStore: vi.fn(() => aiStoreMock),
-  }),
-);
-
-// Container store mock — mutable so each test can flip isSaving.
-const containerStoreMock = {
-  isSaving: false,
-};
-
-vi.mock('@brand-page-maker/stores/brandpage-container', () => ({
-  useBrandPageContainerStore: vi.fn(() => containerStoreMock),
-}));
-
-describe('UndoButton.vue', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-    // Reset mock state so tests are independent.
-    historyStoreMock.canUndo = true;
-    historyStoreMock.canRedo = false;
-    historyStoreMock.undo = vi.fn();
-    historyStoreMock.redo = vi.fn();
-    aiStoreMock.isProcessing = false;
-    containerStoreMock.isSaving = false;
-  });
-
-  it('renders the expected data-test selector', () => {
-    const wrapper = mount(UndoButton);
-
-    expect(wrapper.find('[data-test-undo-button]').exists()).toBe(true);
-  });
-
-  it('renders the expected data-component attribute', () => {
-    const wrapper = mount(UndoButton);
-
-    expect(wrapper.find('[data-component="undo-button"]').exists()).toBe(true);
-  });
-
-  it('exposes the localized aria-label', () => {
-    const wrapper = mount(UndoButton);
-    const icon = wrapper.find('[data-test-undo-button]');
-
-    expect(icon.attributes('aria-label')).toBe('Undo');
-  });
-
-  it('marks itself disabled (via class) when canUndo is false', () => {
-    historyStoreMock.canUndo = false;
-
-    const wrapper = mount(UndoButton);
-    const icon = wrapper.find('[data-test-undo-button]');
-
-    expect(icon.classes()).toContain('tw-cursor-not-allowed');
-    expect(icon.classes()).toContain('tw-opacity-50');
-  });
-
-  it('marks itself disabled while the AI builder is processing', () => {
-    aiStoreMock.isProcessing = true;
-
-    const wrapper = mount(UndoButton);
-    const icon = wrapper.find('[data-test-undo-button]');
-
-    expect(icon.classes()).toContain('tw-cursor-not-allowed');
-  });
-
-  it('marks itself disabled while a save is in flight', () => {
-    containerStoreMock.isSaving = true;
-
-    const wrapper = mount(UndoButton);
-    const icon = wrapper.find('[data-test-undo-button]');
-
-    expect(icon.classes()).toContain('tw-cursor-not-allowed');
-  });
-
-  it('does not dispatch historyStore.undo on click while saving', async () => {
-    containerStoreMock.isSaving = true;
-
-    const wrapper = mount(UndoButton);
-    const icon = wrapper.find('[data-test-undo-button]');
-
-    await icon.trigger('click');
-
-    expect(historyStoreMock.undo).not.toHaveBeenCalled();
-  });
-
-  it('is interactive (no disabled class) at baseline with canUndo', () => {
-    const wrapper = mount(UndoButton);
-    const icon = wrapper.find('[data-test-undo-button]');
-
-    expect(icon.classes()).toContain('tw-cursor-pointer');
-    expect(icon.classes()).not.toContain('tw-cursor-not-allowed');
-  });
-
-  it('dispatches historyStore.undo on click when enabled', async () => {
-    const wrapper = mount(UndoButton);
-    const icon = wrapper.find('[data-test-undo-button]');
-
-    await icon.trigger('click');
-
-    expect(historyStoreMock.undo).toHaveBeenCalled();
-  });
-
-  it('does not dispatch historyStore.undo on click when disabled', async () => {
-    historyStoreMock.canUndo = false;
-
-    const wrapper = mount(UndoButton);
-    const icon = wrapper.find('[data-test-undo-button]');
-
-    await icon.trigger('click');
-
-    expect(historyStoreMock.undo).not.toHaveBeenCalled();
-  });
-});

package/src/brand-page-maker/components/quick-link-bar/UndoButton.vue

@@ -1,66 +0,0 @@
-<template>
-  <Tooltip
-    direction="top"
-    alignment="center"
-    :should-show-icon="false"
-    class="c-undo-button-tooltip"
-  >
-    <template #open>
-      <Icon
-        data-component="undo-button"
-        data-test-undo-button
-        name="undo"
-        size="md"
-        :aria-label="quickLinkBarTr('undoLabel')"
-        role="button"
-        tabindex="0"
-        :class="[
-          'tw-p-2 tw-rounded tw-transition-colors',
-          isDisabled
-            ? 'tw-text-grayscale-500 tw-cursor-not-allowed tw-opacity-50'
-            : 'tw-text-grayscale-800 tw-cursor-pointer hover:tw-bg-grayscale-300',
-        ]"
-        @click.stop="onClick"
-        @keydown.enter.stop="onClick"
-        @keydown.space.stop.prevent="onClick"
-      />
-    </template>
-    <template #content>
-      <span class="tw-whitespace-nowrap tw-text-sm">
-        {{ quickLinkBarTr('undoLabel') }}
-      </span>
-    </template>
-  </Tooltip>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { Icon, Tooltip } from '@designcrowd/fe-shared-lib';
-import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
-import { useAiWebsiteBuilderThreadStore } from '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store';
-import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container';
-import { quickLinkBarTr } from '@src/composables/useTranslate';
-
-const historyStore = useHistoryStore();
-const aiThreadStore = useAiWebsiteBuilderThreadStore();
-const containerStore = useBrandPageContainerStore();
-
-const isDisabled = computed(
-  () =>
-    !historyStore.canUndo ||
-    aiThreadStore.isProcessing ||
-    containerStore.isSaving,
-);
-
-const onClick = () => {
-  if (isDisabled.value) return;
-  historyStore.undo();
-};
-</script>
-
-<style scoped>
-.c-undo-button-tooltip :deep(.shared-tooltip__body) {
-  width: auto;
-  padding: 4px 8px;
-}
-</style>

package/src/brand-page-maker/composables/useUndoRedoFlag.ts

@@ -1,26 +0,0 @@
-import { computed, type ComputedRef } from 'vue';
-import { useBrandPageMakerUserStore } from '@brand-page-maker/stores/user';
-import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
-
-/**
- * Returns whether undo/redo is active for the current maker session. Two
- * conditions must hold:
- *
- *   1. `userStore.features.canUseUndoRedo` is true. The flag is populated by
- *      the consumer (BrandCrowd.Net / web-renderer) via the
- *      `WebsiteDesignUserFeatures.CanUseUndoRedo` boolean on the ViewModel —
- *      same precedent as RichTextEditor / GettyVideos / AITextGenerator.
- *   2. The maker is a brand-site (Website Maker). V1 scope is brand-site
- *      only; brand-page (single-page profile) and brand-contact (vCard) are
- *      out of scope. The flag itself is global on LaunchDarkly so it can't
- *      gate this on its own — `isBrandSite` is the per-session
- *      discriminator.
- */
-export function useUndoRedoFlag(): ComputedRef<boolean> {
-  const userStore = useBrandPageMakerUserStore();
-  const brandPageMakerStore = useBrandPageMakerStore();
-
-  return computed(
-    () => userStore.features.canUseUndoRedo && brandPageMakerStore.isBrandSite,
-  );
-}