@tuturuuu/ui 0.8.0 → 0.9.0

package/src/components/ui/tu-do/boards/__tests__/board-share-dialog.test.tsx

@@ -0,0 +1,270 @@
+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 { BoardShareDialog } from '../board-share-dialog';
+
+const createWorkspaceTaskBoardShareMock = vi.fn();
+const deleteWorkspaceTaskBoardShareMock = vi.fn();
+const disableWorkspaceTaskBoardPublicLinkMock = vi.fn();
+const enableWorkspaceTaskBoardPublicLinkMock = vi.fn();
+const getWorkspaceTaskBoardPublicLinkMock = vi.fn();
+const listWorkspaceTaskBoardSharesMock = vi.fn();
+const listWorkspaceTaskBoardViewableMembersMock = vi.fn();
+const updateWorkspaceTaskBoardShareMock = vi.fn();
+
+vi.mock('next-intl', () => ({
+  useLocale: () => 'en',
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('@tuturuuu/ui/custom/combobox', () => ({
+  Combobox: ({
+    disabled,
+    onChange,
+    options,
+    placeholder,
+    selected,
+  }: {
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    options: { label: string; value: string }[];
+    placeholder?: string;
+    selected: string;
+  }) => (
+    <select
+      aria-label={placeholder}
+      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', () => ({
+  createWorkspaceTaskBoardShare: (
+    ...args: Parameters<typeof createWorkspaceTaskBoardShareMock>
+  ) => createWorkspaceTaskBoardShareMock(...args),
+  deleteWorkspaceTaskBoardShare: (
+    ...args: Parameters<typeof deleteWorkspaceTaskBoardShareMock>
+  ) => deleteWorkspaceTaskBoardShareMock(...args),
+  disableWorkspaceTaskBoardPublicLink: (
+    ...args: Parameters<typeof disableWorkspaceTaskBoardPublicLinkMock>
+  ) => disableWorkspaceTaskBoardPublicLinkMock(...args),
+  enableWorkspaceTaskBoardPublicLink: (
+    ...args: Parameters<typeof enableWorkspaceTaskBoardPublicLinkMock>
+  ) => enableWorkspaceTaskBoardPublicLinkMock(...args),
+  getWorkspaceTaskBoardPublicLink: (
+    ...args: Parameters<typeof getWorkspaceTaskBoardPublicLinkMock>
+  ) => getWorkspaceTaskBoardPublicLinkMock(...args),
+  listWorkspaceTaskBoardShares: (
+    ...args: Parameters<typeof listWorkspaceTaskBoardSharesMock>
+  ) => listWorkspaceTaskBoardSharesMock(...args),
+  listWorkspaceTaskBoardViewableMembers: (
+    ...args: Parameters<typeof listWorkspaceTaskBoardViewableMembersMock>
+  ) => listWorkspaceTaskBoardViewableMembersMock(...args),
+  updateWorkspaceTaskBoardShare: (
+    ...args: Parameters<typeof updateWorkspaceTaskBoardShareMock>
+  ) => updateWorkspaceTaskBoardShareMock(...args),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}));
+
+function renderBoardShareDialog() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BoardShareDialog
+        board={{ id: 'board-1', name: 'Tasks' }}
+        onOpenChange={vi.fn()}
+        open
+        wsId="ws-1"
+      />
+    </QueryClientProvider>
+  );
+}
+
+describe('BoardShareDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    getWorkspaceTaskBoardPublicLinkMock.mockResolvedValue({ publicLink: null });
+    enableWorkspaceTaskBoardPublicLinkMock.mockResolvedValue({
+      publicLink: { code: 'abc123' },
+    });
+    disableWorkspaceTaskBoardPublicLinkMock.mockResolvedValue({
+      publicLink: null,
+    });
+    createWorkspaceTaskBoardShareMock.mockResolvedValue({ share: null });
+    updateWorkspaceTaskBoardShareMock.mockResolvedValue({ share: null });
+    deleteWorkspaceTaskBoardShareMock.mockResolvedValue({ ok: true });
+    listWorkspaceTaskBoardSharesMock.mockResolvedValue({ shares: [] });
+    listWorkspaceTaskBoardViewableMembersMock.mockResolvedValue({
+      members: [
+        {
+          avatar_url: null,
+          display_name: 'Project Manager',
+          email: 'pm@example.com',
+          handle: null,
+          id: 'user-1',
+          is_creator: false,
+          roles: [{ id: 'role-1', name: 'Project manager' }],
+          user_id: 'user-1',
+          workspace_member_type: 'MEMBER',
+        },
+      ],
+    });
+  });
+
+  it('starts compact with all sections collapsed and tooltip copy hidden', async () => {
+    renderBoardShareDialog();
+
+    for (const title of [
+      'ws-task-boards.share.public.title',
+      'ws-task-boards.share.workspace_members.title',
+      'ws-task-boards.share.guests.title',
+    ]) {
+      expect(
+        screen.getByRole('button', { name: new RegExp(title) })
+      ).toHaveAttribute('aria-expanded', 'false');
+    }
+
+    expect(
+      screen.queryByText('ws-task-boards.share.public.description')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('ws-task-boards.share.public.tooltip')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('ws-task-boards.share.workspace_members.description')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('ws-task-boards.share.guests.description')
+    ).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(getWorkspaceTaskBoardPublicLinkMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1'
+      );
+    });
+    expect(listWorkspaceTaskBoardViewableMembersMock).not.toHaveBeenCalled();
+
+    expect(await screen.findByText('common.disabled')).toBeInTheDocument();
+    expect(screen.getByText('common.workspace')).toBeInTheDocument();
+    expect(screen.getByText('common.none')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', {
+        name: /ws-task-boards.share.shared_with/,
+      })
+    ).not.toBeInTheDocument();
+  });
+
+  it('fetches viewable members only when the workspace section opens', async () => {
+    renderBoardShareDialog();
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /ws-task-boards.share.workspace_members.title/,
+      })
+    );
+
+    await waitFor(() => {
+      expect(listWorkspaceTaskBoardViewableMembersMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1'
+      );
+    });
+    expect(await screen.findByText('Project Manager')).toBeInTheDocument();
+    expect(screen.getByText('pm@example.com')).toBeInTheDocument();
+  });
+
+  it('keeps direct board guests first-class for invite, update, and remove', async () => {
+    listWorkspaceTaskBoardSharesMock.mockResolvedValue({
+      shares: [
+        {
+          id: 'share-1',
+          email: 'guest@example.com',
+          permission: 'view',
+          user: null,
+          user_id: null,
+        },
+      ],
+    });
+
+    renderBoardShareDialog();
+    await waitFor(() => {
+      expect(listWorkspaceTaskBoardSharesMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1'
+      );
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', {
+          name: /ws-task-boards.share.guests.title/,
+        })
+      ).toHaveTextContent('1');
+    });
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /ws-task-boards.share.guests.title/,
+      })
+    );
+    fireEvent.change(
+      screen.getByPlaceholderText('ws-task-boards.share.email_placeholder'),
+      {
+        target: { value: 'new@example.com' },
+      }
+    );
+    fireEvent.click(screen.getByText('common.share'));
+
+    await waitFor(() => {
+      expect(createWorkspaceTaskBoardShareMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1',
+        { email: 'new@example.com', permission: 'view' }
+      );
+    });
+
+    expect(await screen.findAllByText('guest@example.com')).toHaveLength(2);
+
+    fireEvent.change(
+      screen.getAllByLabelText('ws-task-boards.share.permission.view').at(-1)!,
+      { target: { value: 'edit' } }
+    );
+    await waitFor(() => {
+      expect(updateWorkspaceTaskBoardShareMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1',
+        { shareId: 'share-1', permission: 'edit' }
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('common.remove'));
+    await waitFor(() => {
+      expect(deleteWorkspaceTaskBoardShareMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1',
+        'share-1'
+      );
+    });
+  });
+});

package/src/components/ui/tu-do/boards/board-public-link-section.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  ChevronDown,
+  Copy,
+  ExternalLink,
+  Globe2,
+  Info,
+  Loader2,
+  Trash2,
+} from '@tuturuuu/icons';
+import {
+  disableWorkspaceTaskBoardPublicLink,
+  enableWorkspaceTaskBoardPublicLink,
+  getWorkspaceTaskBoardPublicLink,
+  type WorkspaceTaskBoardPublicLink,
+} from '@tuturuuu/internal-api/tasks';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@tuturuuu/ui/collapsible';
+import { Input } from '@tuturuuu/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+import { useLocale, useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+interface BoardPublicLinkSectionProps {
+  boardId: string;
+  open: boolean;
+  wsId: string;
+}
+
+function buildPublicBoardUrl(
+  locale: string,
+  link: WorkspaceTaskBoardPublicLink | null
+) {
+  if (!link?.code) return '';
+
+  const path = `/${locale}/shared/task-boards/${link.code}`;
+  if (typeof window === 'undefined') return path;
+  return `${window.location.origin}${path}`;
+}
+
+export function BoardPublicLinkSection({
+  boardId,
+  open,
+  wsId,
+}: BoardPublicLinkSectionProps) {
+  const t = useTranslations();
+  const locale = useLocale();
+  const queryClient = useQueryClient();
+  const [sectionOpen, setSectionOpen] = useState(false);
+  const queryKey = ['task-board-public-link', wsId, boardId] as const;
+
+  const publicLinkQuery = useQuery({
+    queryKey,
+    queryFn: () => getWorkspaceTaskBoardPublicLink(wsId, boardId),
+    enabled: open,
+    staleTime: 60_000,
+  });
+
+  const enableMutation = useMutation({
+    mutationFn: () => enableWorkspaceTaskBoardPublicLink(wsId, boardId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey });
+      toast.success(t('ws-task-boards.share.public.enabled'));
+    },
+    onError: () => {
+      toast.error(t('ws-task-boards.share.public.enable_failed'));
+    },
+  });
+
+  const disableMutation = useMutation({
+    mutationFn: () => disableWorkspaceTaskBoardPublicLink(wsId, boardId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey });
+      toast.success(t('ws-task-boards.share.public.disabled'));
+    },
+    onError: () => {
+      toast.error(t('ws-task-boards.share.public.disable_failed'));
+    },
+  });
+
+  const publicLink = publicLinkQuery.data?.publicLink ?? null;
+  const publicUrl = buildPublicBoardUrl(locale, publicLink);
+  const isMutating = enableMutation.isPending || disableMutation.isPending;
+  const statusBadge = publicLinkQuery.isLoading ? (
+    <Badge variant="secondary" className="gap-1 px-2 py-0.5 text-[10px]">
+      <Loader2 className="h-3 w-3 animate-spin" />
+      {t('common.loading')}
+    </Badge>
+  ) : publicLink ? (
+    <Badge className="bg-dynamic-green/10 px-2 py-0.5 text-[10px] text-dynamic-green">
+      {t('common.enabled')}
+    </Badge>
+  ) : (
+    <Badge variant="secondary" className="px-2 py-0.5 text-[10px]">
+      {t('common.disabled')}
+    </Badge>
+  );
+
+  async function copyPublicUrl() {
+    if (!publicUrl) return;
+
+    try {
+      await navigator.clipboard.writeText(publicUrl);
+      toast.success(t('ws-task-boards.share.public.copy_success'));
+    } catch {
+      toast.error(t('ws-task-boards.share.public.copy_failed'));
+    }
+  }
+
+  function openPublicUrl() {
+    if (!publicUrl || typeof window === 'undefined') return;
+    window.open(publicUrl, '_blank', 'noopener,noreferrer');
+  }
+
+  return (
+    <Collapsible
+      open={sectionOpen}
+      onOpenChange={setSectionOpen}
+      className="rounded-md border"
+    >
+      <div className="flex min-h-11 items-center gap-2 px-3">
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex min-w-0 flex-1 items-center gap-2 text-left transition-colors hover:text-foreground"
+          >
+            <Globe2 className="h-4 w-4 text-muted-foreground" />
+            <span className="min-w-0 flex-1 truncate font-medium text-sm">
+              {t('ws-task-boards.share.public.title')}
+            </span>
+            {statusBadge}
+            <ChevronDown
+              className={cn(
+                'h-4 w-4 shrink-0 text-muted-foreground transition-transform',
+                sectionOpen && 'rotate-180'
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <TooltipProvider delayDuration={0} skipDelayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="text-muted-foreground transition-colors hover:text-foreground"
+                aria-label={t('ws-task-boards.share.note')}
+              >
+                <Info className="h-3.5 w-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-xs">
+              {t('ws-task-boards.share.public.tooltip')}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      <CollapsibleContent className="border-t p-3">
+        {publicLinkQuery.isLoading ? (
+          <div className="flex items-center gap-2 rounded-md border border-dashed p-3 text-muted-foreground text-sm">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            {t('common.loading')}
+          </div>
+        ) : publicLink ? (
+          <div className="grid gap-2 sm:grid-cols-[1fr_auto_auto_auto]">
+            <Input value={publicUrl} readOnly className="min-w-0" />
+            <Button
+              type="button"
+              variant="outline"
+              onClick={copyPublicUrl}
+              disabled={!publicUrl}
+            >
+              <Copy className="h-4 w-4" />
+              {t('ws-task-boards.share.public.copy')}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={openPublicUrl}
+              disabled={!publicUrl}
+            >
+              <ExternalLink className="h-4 w-4" />
+              {t('ws-task-boards.share.public.open')}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => disableMutation.mutate()}
+              disabled={isMutating}
+            >
+              {disableMutation.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4" />
+              )}
+              {t('ws-task-boards.share.public.disable')}
+            </Button>
+          </div>
+        ) : (
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => enableMutation.mutate()}
+            disabled={isMutating}
+          >
+            {enableMutation.isPending ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Globe2 className="h-4 w-4" />
+            )}
+            {t('ws-task-boards.share.public.enable')}
+          </Button>
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}