@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/tu-do/shared/__tests__/board-header.test.tsx

@@ -1,26 +1,32 @@
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { BoardHeader } from '../board-header';
 
-let boardLayoutSettingsProps:
-  | React.ComponentProps<
-      typeof import('../board-layout-settings')['BoardLayoutSettings']
-    >
-  | undefined;
+const navigationMocks = vi.hoisted(() => ({
+  replace: vi.fn(),
+}));
+const internalApiMocks = vi.hoisted(() => ({
+  getWorkspaceTaskBoard: vi.fn(),
+}));
+const comboboxMocks = vi.hoisted(() => ({
+  seenOptions: [] as { description?: string; label: string; value: string }[][],
+}));
 
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
 }));
 
 vi.mock('next/navigation', () => ({
+  usePathname: () => '/ws-1/tasks/boards/board-1',
   useRouter: () => ({
     push: vi.fn(),
-    replace: vi.fn(),
+    replace: navigationMocks.replace,
     refresh: vi.fn(),
   }),
+  useSearchParams: () => new URLSearchParams('existing=1'),
 }));
 
 vi.mock('next/link', () => ({
@@ -40,23 +46,95 @@ vi.mock('@tuturuuu/ui/hooks/use-board-actions', () => ({
   }),
 }));
 
-vi.mock('../tasks-route-context', () => ({
-  useTasksHref: () => '/tasks',
-}));
+vi.mock('@tuturuuu/ui/custom/combobox', () => ({
+  Combobox: function MockCombobox({
+    ariaLabel,
+    className,
+    colorizeTriggerIcon,
+    disabled,
+    hideTriggerLabel,
+    onChange,
+    options,
+    placeholder,
+    selected,
+    triggerIcon,
+    triggerTooltip,
+  }: {
+    ariaLabel?: string;
+    className?: string;
+    colorizeTriggerIcon?: boolean;
+    disabled?: boolean;
+    hideTriggerLabel?: boolean;
+    onChange?: (value: string) => void;
+    options: { description?: string; label: string; value: string }[];
+    placeholder?: string;
+    selected: string;
+    triggerIcon?: React.ReactNode;
+    triggerTooltip?: React.ReactNode;
+  }) {
+    comboboxMocks.seenOptions.push(options);
 
-vi.mock('../board-layout-settings', () => ({
-  BoardLayoutSettings: (props: any) => {
-    boardLayoutSettingsProps = props;
     return (
-      <div
-        data-testid="board-layout-settings"
-        data-board-id={props.boardId}
-        data-ws-id={props.wsId ?? ''}
-      />
+      <select
+        aria-label={
+          ariaLabel ??
+          (hideTriggerLabel
+            ? options.find((option) => option.value === selected)?.label
+            : placeholder)
+        }
+        className={className}
+        data-colorize-trigger-icon={String(colorizeTriggerIcon)}
+        data-has-trigger-icon={String(Boolean(triggerIcon))}
+        data-trigger-tooltip={
+          typeof triggerTooltip === 'string' ? triggerTooltip : undefined
+        }
+        disabled={disabled}
+        value={selected}
+        onChange={(event) => onChange?.(event.target.value)}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
     );
   },
 }));
 
+vi.mock('@tuturuuu/internal-api/tasks', () => ({
+  getWorkspaceTaskBoard: (
+    ...args: Parameters<typeof internalApiMocks.getWorkspaceTaskBoard>
+  ) => internalApiMocks.getWorkspaceTaskBoard(...args),
+}));
+
+vi.mock('@tuturuuu/ui/dropdown-menu', () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuItem: ({
+    children,
+    onClick,
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+  }) => (
+    <button onClick={onClick} type="button">
+      {children}
+    </button>
+  ),
+  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
+vi.mock('../tasks-route-context', () => ({
+  useTasksHref: () => '/tasks',
+}));
+
 vi.mock('../board-switcher', () => ({
   BoardSwitcher: () => <div data-testid="board-switcher" />,
 }));
@@ -71,6 +149,16 @@ vi.mock('../boards/boardId/task-filter', () => ({
   TaskFilter: () => <div data-testid="task-filter" />,
 }));
 
+vi.mock('../boards/boardId/kanban/planner/kanban-planner-dialog', () => ({
+  KanbanPlannerDialog: ({ open }: { open: boolean }) =>
+    open ? <div role="dialog">planner-dialog</div> : null,
+}));
+
+vi.mock('../boards/board-share-dialog', () => ({
+  BoardShareDialog: ({ open }: { open: boolean }) =>
+    open ? <div role="dialog">share-dialog</div> : null,
+}));
+
 vi.mock('../boards/copy-board-dialog', () => ({
   CopyBoardDialog: () => <div data-testid="copy-board-dialog" />,
 }));
@@ -137,36 +225,251 @@ function renderBoardHeader(
 
 describe('BoardHeader', () => {
   beforeEach(() => {
-    boardLayoutSettingsProps = undefined;
+    comboboxMocks.seenOptions = [];
+    navigationMocks.replace.mockReset();
+    internalApiMocks.getWorkspaceTaskBoard.mockReset();
+    internalApiMocks.getWorkspaceTaskBoard.mockResolvedValue({
+      board: mockBoard,
+    });
+  });
+
+  it('renders a direct board settings button with compact outline header styling', () => {
+    renderBoardHeader();
+
+    const settingsButton = screen.getByRole('button', {
+      name: 'ws-task-boards.actions.board_settings',
+    });
+
+    expect(settingsButton).toHaveClass('border', 'h-7', 'w-7', 'px-0');
+    expect(settingsButton).toHaveClass('sm:h-8', 'sm:w-8');
+    expect(settingsButton).not.toHaveTextContent(
+      'ws-task-boards.actions.board_settings'
+    );
   });
 
-  it('passes the workspace id to board layout settings', () => {
+  it('prefetches current board settings before opening the dialog', async () => {
     renderBoardHeader();
 
-    expect(screen.getByTestId('board-layout-settings')).toHaveAttribute(
-      'data-ws-id',
-      'ws-1'
+    fireEvent.mouseEnter(
+      screen.getByRole('button', {
+        name: 'ws-task-boards.actions.board_settings',
+      })
+    );
+
+    await waitFor(() => {
+      expect(internalApiMocks.getWorkspaceTaskBoard).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1',
+        expect.objectContaining({ baseUrl: expect.any(String) })
+      );
+    });
+  });
+
+  it('calls the board settings intent hook before opening the dialog', () => {
+    const onBoardSettingsIntent = vi.fn();
+
+    renderBoardHeader({ onBoardSettingsIntent });
+
+    fireEvent.pointerDown(
+      screen.getByRole('button', {
+        name: 'ws-task-boards.actions.board_settings',
+      })
     );
-    expect(boardLayoutSettingsProps?.boardId).toBe('board-1');
-    expect(boardLayoutSettingsProps?.wsId).toBe('ws-1');
+
+    expect(onBoardSettingsIntent).toHaveBeenCalledTimes(1);
   });
 
-  it('uses the explicit workspace id when the board payload omits ws_id', () => {
+  it('opens contextual board settings through query state', () => {
+    renderBoardHeader();
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'ws-task-boards.actions.board_settings',
+      })
+    );
+
+    expect(navigationMocks.replace).toHaveBeenCalledWith(
+      '/ws-1/tasks/boards/board-1?existing=1&settingsDialog=open&settingsTab=task_board&settingsBoardId=board-1',
+      { scroll: false }
+    );
+  });
+
+  it('renders a natural public title and hides member-only controls in read-only mode', () => {
     renderBoardHeader({
-      workspaceId: 'ws-fallback',
-      board: {
-        archived_at: null,
-        id: 'board-1',
-        name: 'Roadmap',
-        ticket_prefix: 'RD',
-        ws_id: null,
-      },
+      publicView: true,
+      readOnly: true,
+      titlePrefix: <span data-testid="public-title-prefix">Tuturuuu /</span>,
+    });
+
+    expect(screen.queryByTestId('board-switcher')).not.toBeInTheDocument();
+    expect(screen.getByTestId('public-title-prefix')).toBeInTheDocument();
+    expect(screen.getByText('Roadmap')).toBeInTheDocument();
+    expect(screen.queryByTestId('board-user-presence')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('task-filter')).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('ws-task-boards.share.action')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('ws-task-plans.planner')
+    ).not.toBeInTheDocument();
+  });
+
+  it('hides the board picker when showing My Tasks', () => {
+    renderBoardHeader({
+      currentView: 'my_tasks',
+    });
+
+    expect(screen.queryByTestId('board-switcher')).not.toBeInTheDocument();
+    expect(
+      screen.getByText('ws-task-boards.views.my_tasks')
+    ).toBeInTheDocument();
+  });
+
+  it('shows planner as a personal kanban toolbar button and opens the dialog', () => {
+    renderBoardHeader({
+      isPersonalWorkspace: true,
+    });
+
+    fireEvent.click(screen.getByLabelText('ws-task-plans.planner'));
+
+    expect(screen.getByRole('dialog')).toHaveTextContent('planner');
+  });
+
+  it('hides planner outside personal kanban editing', () => {
+    const { rerender } = renderBoardHeader({
+      currentView: 'list',
+      isPersonalWorkspace: true,
+    });
+
+    expect(
+      screen.queryByLabelText('ws-task-plans.planner')
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <QueryClientProvider client={new QueryClient()}>
+        <BoardHeader
+          workspaceId="ws-1"
+          board={mockBoard}
+          currentView="kanban"
+          filters={{
+            assignees: [],
+            dueDateRange: null,
+            estimationRange: null,
+            includeMyTasks: false,
+            includeUnassigned: false,
+            labels: [],
+            priorities: [],
+            projects: [],
+            sourceBoardIds: [],
+            sourceScope: 'all_visible',
+            sourceWorkspaceIds: [],
+          }}
+          isMultiSelectMode={false}
+          isPersonalWorkspace
+          listStatusFilter="all"
+          onFiltersChange={vi.fn()}
+          onListStatusFilterChange={vi.fn()}
+          onUpdate={vi.fn()}
+          onViewChange={vi.fn()}
+          publicView
+          setIsMultiSelectMode={vi.fn()}
+        />
+      </QueryClientProvider>
+    );
+
+    expect(
+      screen.queryByLabelText('ws-task-plans.planner')
+    ).not.toBeInTheDocument();
+  });
+
+  it('updates status, view, and sort through combobox controls', () => {
+    const onFiltersChange = vi.fn();
+    const onListStatusFilterChange = vi.fn();
+    const onViewChange = vi.fn();
+
+    renderBoardHeader({
+      onFiltersChange,
+      onListStatusFilterChange,
+      onViewChange,
+    });
+
+    fireEvent.change(screen.getByLabelText('common.all'), {
+      target: { value: 'active' },
+    });
+    expect(onListStatusFilterChange).toHaveBeenCalledWith('active');
+
+    fireEvent.change(screen.getByLabelText('ws-task-boards.views.kanban'), {
+      target: { value: 'list' },
+    });
+    expect(onViewChange).toHaveBeenCalledWith('list');
+
+    fireEvent.change(screen.getByLabelText('common.sort'), {
+      target: { value: 'priority-high' },
+    });
+    expect(onFiltersChange).toHaveBeenCalledWith(
+      expect.objectContaining({ sortBy: 'priority-high' })
+    );
+  });
+
+  it('uses short board view descriptions including drafts and recycle bin keys', () => {
+    renderBoardHeader({
+      availableViews: ['kanban', 'list', 'timeline', 'drafts', 'recycle_bin'],
     });
 
-    expect(screen.getByTestId('board-layout-settings')).toHaveAttribute(
-      'data-ws-id',
-      'ws-fallback'
+    const viewOptions = comboboxMocks.seenOptions.find((options) =>
+      options.some((option) => option.value === 'kanban')
+    );
+
+    expect(viewOptions).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          value: 'kanban',
+          description: 'ws-task-boards.views.kanban_description',
+        }),
+        expect.objectContaining({
+          value: 'list',
+          description: 'ws-task-boards.views.list_description',
+        }),
+        expect.objectContaining({
+          value: 'timeline',
+          description: 'ws-task-boards.views.timeline_description',
+        }),
+        expect.objectContaining({
+          value: 'drafts',
+          description: 'task-drafts.board_view_description',
+        }),
+        expect.objectContaining({
+          value: 'recycle_bin',
+          description: 'common.recycle_bin_board_description',
+        }),
+      ])
+    );
+  });
+
+  it('passes instant tooltip labels and monochrome trigger mode to toolbar comboboxes', () => {
+    renderBoardHeader();
+
+    const status = screen.getByLabelText('common.all');
+    const view = screen.getByLabelText('ws-task-boards.views.kanban');
+    const sort = screen.getByLabelText('common.sort');
+
+    expect(status).toHaveAttribute(
+      'data-trigger-tooltip',
+      'common.status: common.all'
     );
-    expect(boardLayoutSettingsProps?.wsId).toBe('ws-fallback');
+    expect(view).toHaveAttribute(
+      'data-trigger-tooltip',
+      'common.view: ws-task-boards.views.kanban'
+    );
+    expect(view).toHaveAttribute('data-has-trigger-icon', 'true');
+    expect(sort).toHaveAttribute(
+      'data-trigger-tooltip',
+      'common.sort: common.sort'
+    );
+
+    for (const control of [status, view, sort]) {
+      expect(control).toHaveAttribute('data-colorize-trigger-icon', 'false');
+      expect(control.className).toContain('[&_button_svg]:text-current');
+    }
   });
 });

package/src/components/ui/tu-do/shared/__tests__/board-switcher.test.tsx

@@ -0,0 +1,253 @@
+import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { BoardSwitcher } from '../board-switcher';
+
+const {
+  createWorkspaceTaskBoardMock,
+  isTaskRememberLastBoardEnabledMock,
+  listWorkspaceTaskBoardsMock,
+  pushMock,
+  rememberLastBoardConfig,
+  updateUserWorkspaceConfigMock,
+  useUserWorkspaceConfigMock,
+} = vi.hoisted(() => ({
+  createWorkspaceTaskBoardMock: vi.fn(),
+  isTaskRememberLastBoardEnabledMock: vi.fn(
+    (value: string | null | undefined) => value !== 'false'
+  ),
+  listWorkspaceTaskBoardsMock: vi.fn(),
+  pushMock: vi.fn(),
+  rememberLastBoardConfig: {
+    value: 'true' as string | null | undefined,
+  },
+  updateUserWorkspaceConfigMock: vi.fn(),
+  useUserWorkspaceConfigMock: vi.fn(),
+}));
+
+let comboboxProps:
+  | {
+      createText?: string;
+      creatingText?: string;
+      onChange: (value: string) => void;
+      onCreate?: (value: string) => Promise<{ label: string; value: string }>;
+      options: Array<{ icon?: unknown; label: string; value: string }>;
+      searchPlaceholder?: string;
+      selected?: string;
+      showSelectedIcon?: boolean;
+    }
+  | undefined;
+
+vi.mock('@tuturuuu/internal-api/tasks', () => ({
+  createWorkspaceTaskBoard: (
+    ...args: Parameters<typeof createWorkspaceTaskBoardMock>
+  ) => createWorkspaceTaskBoardMock(...args),
+  listWorkspaceTaskBoards: (
+    ...args: Parameters<typeof listWorkspaceTaskBoardsMock>
+  ) => listWorkspaceTaskBoardsMock(...args),
+}));
+
+vi.mock('@tuturuuu/internal-api/users', () => ({
+  isTaskRememberLastBoardEnabled: (value: string | null | undefined): boolean =>
+    isTaskRememberLastBoardEnabledMock(value),
+  TASK_DEFAULT_BOARD_ID_CONFIG_ID: 'TASK_DEFAULT_BOARD_ID',
+  TASK_REMEMBER_LAST_BOARD_CONFIG_ID: 'TASK_REMEMBER_LAST_BOARD',
+}));
+
+vi.mock('../../../../../hooks/use-user-workspace-config', () => ({
+  useUpdateUserWorkspaceConfig: () => ({
+    isPending: false,
+    mutate: updateUserWorkspaceConfigMock,
+  }),
+  useUserWorkspaceConfig: (...args: unknown[]) => {
+    useUserWorkspaceConfigMock(...args);
+    return {
+      data: rememberLastBoardConfig.value,
+      isLoading: false,
+    };
+  },
+}));
+
+vi.mock('@tuturuuu/ui/custom/combobox', () => ({
+  Combobox: (props: any) => {
+    comboboxProps = props;
+    return (
+      <div>
+        <button
+          type="button"
+          data-testid="board-combobox"
+          onClick={() => props.onChange('board-2')}
+        >
+          {props.label}
+        </button>
+        <button
+          type="button"
+          data-testid="create-board"
+          onClick={async () => {
+            const result = await props.onCreate?.('Launch Board');
+            const boardId = typeof result === 'string' ? result : result?.value;
+            if (boardId) props.onChange(boardId);
+          }}
+        >
+          Create board
+        </button>
+      </div>
+    );
+  },
+}));
+
+vi.mock('@tuturuuu/ui/sonner', () => ({
+  toast: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}));
+
+vi.mock('../tasks-route-context', () => ({
+  useTasksHref: () => (path: string) => `/tasks${path}`,
+}));
+
+function renderBoardSwitcher() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BoardSwitcher
+        board={{
+          id: 'board-1',
+          name: 'Tasks',
+          ticket_prefix: 'T',
+          ws_id: 'ws-1',
+        }}
+        translations={{
+          activeBoards: 'Active boards',
+          archivedBoards: 'Archived boards',
+          deletedBoards: 'Deleted boards',
+          createBoard: 'Create Board',
+          creatingBoard: 'Creating',
+          searchBoards: 'Search boards...',
+          tasks: 'Tasks',
+        }}
+      />
+    </QueryClientProvider>
+  );
+}
+
+describe('BoardSwitcher', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    comboboxProps = undefined;
+    rememberLastBoardConfig.value = 'true';
+    listWorkspaceTaskBoardsMock.mockResolvedValue({
+      boards: [
+        {
+          archived_at: null,
+          created_at: '2026-06-01T00:00:00.000Z',
+          deleted_at: null,
+          icon: null,
+          id: 'board-2',
+          name: 'Roadmap',
+        },
+      ],
+    });
+  });
+
+  it('uses the shared combobox and navigates when a board is selected', async () => {
+    renderBoardSwitcher();
+
+    expect(screen.getByTestId('board-combobox')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(comboboxProps?.options).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            label: 'Roadmap',
+            value: 'board-2',
+          }),
+        ])
+      );
+    });
+
+    expect(comboboxProps).toMatchObject({
+      createText: 'Create Board',
+      creatingText: 'Creating',
+      searchPlaceholder: 'Search boards...',
+      selected: 'board-1',
+    });
+    expect(comboboxProps?.showSelectedIcon).toBeUndefined();
+    expect(comboboxProps?.options.some((option) => option.icon)).toBe(true);
+
+    fireEvent.click(screen.getByTestId('board-combobox'));
+
+    expect(pushMock).toHaveBeenCalledWith('/ws-1/tasks/boards/board-2');
+    expect(useUserWorkspaceConfigMock).toHaveBeenCalledWith(
+      'ws-1',
+      'TASK_REMEMBER_LAST_BOARD',
+      'true'
+    );
+    expect(isTaskRememberLastBoardEnabledMock).toHaveBeenCalledWith('true');
+    expect(updateUserWorkspaceConfigMock).toHaveBeenCalledWith({
+      configId: 'TASK_DEFAULT_BOARD_ID',
+      value: 'board-2',
+      workspaceId: 'ws-1',
+    });
+  });
+
+  it('navigates without updating the default board when board memory is disabled', async () => {
+    rememberLastBoardConfig.value = 'false';
+    renderBoardSwitcher();
+
+    await waitFor(() => {
+      expect(comboboxProps?.options.length).toBeGreaterThan(0);
+    });
+
+    fireEvent.click(screen.getByTestId('board-combobox'));
+
+    expect(pushMock).toHaveBeenCalledWith('/ws-1/tasks/boards/board-2');
+    expect(updateUserWorkspaceConfigMock).not.toHaveBeenCalled();
+  });
+
+  it('creates a new board from the picker and opens it', async () => {
+    createWorkspaceTaskBoardMock.mockResolvedValue({
+      board: {
+        archived_at: null,
+        created_at: '2026-06-24T00:00:00.000Z',
+        deleted_at: null,
+        icon: null,
+        id: 'board-3',
+        name: 'Launch Board',
+      },
+    });
+
+    renderBoardSwitcher();
+
+    fireEvent.click(screen.getByTestId('create-board'));
+
+    await waitFor(() => {
+      expect(createWorkspaceTaskBoardMock).toHaveBeenCalledWith('ws-1', {
+        name: 'Launch Board',
+      });
+    });
+
+    await waitFor(() => {
+      expect(pushMock).toHaveBeenCalledWith('/ws-1/tasks/boards/board-3');
+    });
+    expect(updateUserWorkspaceConfigMock).toHaveBeenCalledWith({
+      configId: 'TASK_DEFAULT_BOARD_ID',
+      value: 'board-3',
+      workspaceId: 'ws-1',
+    });
+  });
+});