@tuturuuu/ui 0.37.2 → 0.39.0

package/src/components/ui/legacy/calendar/provider-color-picker.test.tsx

@@ -0,0 +1,147 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { GoogleProviderColorOptions } from '@tuturuuu/types/primitives/google-calendar-color';
+import type { ComponentProps, ReactNode } from 'react';
+import { beforeEach, expect, it, vi } from 'vitest';
+import { ProviderColorPicker } from './provider-color-picker';
+
+const mocks = vi.hoisted(() => ({ query: vi.fn(), get: vi.fn() }));
+vi.mock('@tanstack/react-query', () => ({ useQuery: mocks.query }));
+vi.mock('@tuturuuu/internal-api', () => ({
+  getGoogleCalendarColorOptions: mocks.get,
+}));
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
+vi.mock('@tuturuuu/ui/label', () => ({
+  Label: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+}));
+vi.mock('./event-form-components', () => ({
+  EventColorPicker: () => <div>Legacy palette</div>,
+}));
+vi.mock('@tuturuuu/ui/select', () => ({
+  Select: ({
+    children,
+    value,
+    onValueChange,
+  }: {
+    children: ReactNode;
+    value?: string;
+    onValueChange: (value: string) => void;
+  }) => (
+    <select
+      aria-label="Provider palette"
+      value={value}
+      onChange={(event) => onValueChange(event.target.value)}
+    >
+      {children}
+    </select>
+  ),
+  SelectContent: ({ children }: { children: ReactNode }) => children,
+  SelectTrigger: () => null,
+  SelectValue: () => null,
+  SelectItem: ({ children, value }: { children: ReactNode; value: string }) => (
+    <option value={value}>{children}</option>
+  ),
+}));
+const options: GoogleProviderColorOptions = {
+  provider: 'google',
+  providerColorWrites: true,
+  connectionId: 'owned',
+  calendarId: 'source',
+  sourceColor: { background: '#123456', foreground: '#ffffff' },
+  options: [
+    {
+      kind: 'inherit',
+      id: null,
+      name: null,
+      background: '#123456',
+      foreground: null,
+    },
+    {
+      kind: 'event',
+      id: '3',
+      name: null,
+      background: '#987654',
+      foreground: null,
+    },
+    {
+      kind: 'label',
+      id: 'label-id',
+      name: 'Synthetic label',
+      background: '#abcdef',
+      foreground: null,
+    },
+  ],
+};
+const props = (): ComponentProps<typeof ProviderColorPicker> => ({
+  wsId: 'workspace',
+  source: { id: 'source', provider: 'google', connectionId: 'owned' } as never,
+  value: 'BLUE',
+  onNativeChange: vi.fn(),
+  onProviderChange: vi.fn(),
+});
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.query.mockReturnValue({ data: options });
+});
+it('keeps the legacy picker when capability is disabled', () => {
+  mocks.query.mockReturnValue({
+    data: { ...options, providerColorWrites: false },
+  });
+  render(<ProviderColorPicker {...props()} />);
+  expect(screen.getByText('Legacy palette')).toBeTruthy();
+  expect(screen.queryByRole('combobox')).toBeNull();
+});
+it('keeps another connection palette from supplying choices', () => {
+  mocks.query.mockReturnValue({
+    data: { ...options, connectionId: 'foreign' },
+  });
+  render(<ProviderColorPicker {...props()} />);
+  expect(screen.getByText('Legacy palette')).toBeTruthy();
+});
+it('sends exact provider namespace and ID for label and inherited choices', () => {
+  const input = props();
+  render(<ProviderColorPicker {...input} />);
+  fireEvent.change(screen.getByRole('combobox'), {
+    target: { value: 'label:label-id' },
+  });
+  expect(input.onProviderChange).toHaveBeenLastCalledWith({
+    connectionId: 'owned',
+    kind: 'label',
+    id: 'label-id',
+  });
+  fireEvent.change(screen.getByRole('combobox'), {
+    target: { value: 'inherit' },
+  });
+  expect(input.onProviderChange).toHaveBeenLastCalledWith({
+    connectionId: 'owned',
+    kind: 'inherit',
+  });
+  expect(input.onNativeChange).not.toHaveBeenCalled();
+  mocks.query.mock.calls[0]?.[0].queryFn();
+  expect(mocks.get).toHaveBeenCalledWith('workspace', 'owned');
+});
+it('initializes an imported label identity rather than the compatibility color', () => {
+  render(
+    <ProviderColorPicker
+      {...props()}
+      metadata={{
+        google_color: {
+          version: 1,
+          event_label_id: 'label-id',
+          inherited: false,
+          resolved_rgb: '#abcdef',
+        },
+      }}
+    />
+  );
+  expect((screen.getByRole('combobox') as HTMLSelectElement).value).toBe(
+    'label:label-id'
+  );
+});
+
+it('keeps the legacy picker while query data is unavailable', () => {
+  mocks.query.mockReturnValue({ data: undefined });
+  render(<ProviderColorPicker {...props()} />);
+  expect(screen.getByText('Legacy palette')).toBeTruthy();
+  expect(screen.queryByRole('combobox')).toBeNull();
+});

package/src/components/ui/legacy/calendar/provider-color-picker.tsx

@@ -0,0 +1,115 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import {
+  type CalendarSourceOption,
+  type GoogleProviderColorChoice,
+  getGoogleCalendarColorOptions,
+} from '@tuturuuu/internal-api';
+import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
+import { Label } from '@tuturuuu/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { readGoogleEventColor } from '@tuturuuu/utils/google-calendar-colors';
+import { useTranslations } from 'next-intl';
+import { EventColorPicker } from './event-form-components';
+
+export function ProviderColorPicker({
+  wsId,
+  source,
+  value,
+  metadata,
+  choice,
+  onNativeChange,
+  onProviderChange,
+}: {
+  wsId?: string;
+  source?: CalendarSourceOption;
+  value: SupportedColor;
+  metadata?: unknown;
+  choice?: GoogleProviderColorChoice;
+  onNativeChange: (value: SupportedColor) => void;
+  onProviderChange: (choice: GoogleProviderColorChoice) => void;
+}) {
+  const t = useTranslations('calendar');
+  const connectionId =
+    source?.provider === 'google' ? source.connectionId : null;
+  const { data } = useQuery({
+    queryKey: ['google-calendar-color-options', wsId, connectionId],
+    enabled: !!wsId && !!connectionId,
+    queryFn: () => getGoogleCalendarColorOptions(wsId!, connectionId!),
+  });
+  if (
+    !connectionId ||
+    !data?.providerColorWrites ||
+    data.connectionId !== connectionId ||
+    !data.options.length
+  )
+    return <EventColorPicker value={value} onChange={onNativeChange} />;
+  const current = readGoogleEventColor(metadata);
+  const selected =
+    choice?.connectionId === connectionId
+      ? choice.kind === 'inherit'
+        ? 'inherit'
+        : `${choice.kind}:${choice.id}`
+      : current?.inherited
+        ? 'inherit'
+        : current?.event_label_id
+          ? `label:${current.event_label_id}`
+          : current?.color_id
+            ? `event:${current.color_id}`
+            : undefined;
+  return (
+    <div className="space-y-1">
+      <Label>{t('provider_color_label')}</Label>
+      <Select
+        value={selected}
+        onValueChange={(key) => {
+          const option = data.options.find(
+            (item) =>
+              (item.kind === 'inherit'
+                ? 'inherit'
+                : `${item.kind}:${item.id}`) === key
+          );
+          if (option)
+            onProviderChange(
+              option.kind === 'inherit'
+                ? { connectionId, kind: 'inherit' }
+                : { connectionId, kind: option.kind, id: option.id! }
+            );
+        }}
+      >
+        <SelectTrigger aria-label={t('provider_color_label')}>
+          <SelectValue placeholder={t('provider_color_label')} />
+        </SelectTrigger>
+        <SelectContent>
+          {data.options.map((option) => (
+            <SelectItem
+              key={`${option.kind}:${option.id}`}
+              value={
+                option.kind === 'inherit'
+                  ? 'inherit'
+                  : `${option.kind}:${option.id}`
+              }
+            >
+              <span className="flex items-center gap-2">
+                <span
+                  className="size-3 rounded-full"
+                  style={{ backgroundColor: option.background }}
+                />
+                {option.kind === 'inherit'
+                  ? t('inherit_calendar_color')
+                  : (option.name ??
+                    t('google_event_color', { id: option.id ?? '' }))}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/src/components/ui/legacy/calendar/provider-readonly-dialog.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@tuturuuu/ui/dialog', () => ({
+  Dialog: ({ children }: { children: ReactNode }) => (
+    <div role="dialog">{children}</div>
+  ),
+  DialogContent: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+vi.mock('next-intl', () => ({
+  useFormatter: () => ({ dateTime: (date: Date) => date.toISOString() }),
+}));
+vi.mock('./event-modal-header', () => ({
+  EventModalHeader: ({ event }: { event: CalendarEvent }) => (
+    <h1>{event.title}</h1>
+  ),
+}));
+
+import { ProviderReadonlyDialog } from './provider-readonly-dialog';
+
+describe('unsupported provider recurrence readonly details', () => {
+  it('shows details without editable form, destructive actions or raw HTML injection', () => {
+    render(
+      <ProviderReadonlyDialog
+        open
+        onOpenChange={vi.fn()}
+        event={
+          {
+            id: 'instance',
+            title: 'Provider series',
+            start_at: '2026-10-06T09:00:00Z',
+            end_at: '2026-10-06T10:00:00Z',
+            location: 'Room',
+            description: '<script>private fixture</script>',
+          } as CalendarEvent
+        }
+      />
+    );
+    expect(
+      screen.getByRole('heading', { name: 'Provider series' })
+    ).toBeTruthy();
+    expect(screen.getByText('Room')).toBeTruthy();
+    expect(screen.getByText('<script>private fixture</script>')).toBeTruthy();
+    expect(screen.queryByRole('textbox')).toBeNull();
+    expect(screen.queryByRole('button')).toBeNull();
+    expect(document.querySelector('script')).toBeNull();
+  });
+});

package/src/components/ui/legacy/calendar/provider-readonly-dialog.tsx

@@ -0,0 +1,48 @@
+'use client';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { Dialog, DialogContent } from '@tuturuuu/ui/dialog';
+import { useFormatter } from 'next-intl';
+import { EventModalHeader } from './event-modal-header';
+
+/** Unsupported provider rules never mount the ordinary editable event form. */
+export function ProviderReadonlyDialog({
+  event,
+  open,
+  onOpenChange,
+}: {
+  event: CalendarEvent;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const format = useFormatter();
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg gap-0 overflow-hidden p-0">
+        <EventModalHeader event={event} isEditing />
+        <div className="space-y-4 px-6 py-5">
+          <p className="text-muted-foreground text-sm">
+            <time dateTime={event.start_at}>
+              {format.dateTime(new Date(event.start_at), {
+                dateStyle: 'medium',
+                timeStyle: 'short',
+              })}
+            </time>
+            {' – '}
+            <time dateTime={event.end_at}>
+              {format.dateTime(new Date(event.end_at), {
+                dateStyle: 'medium',
+                timeStyle: 'short',
+              })}
+            </time>
+          </p>
+          {event.location && <p className="text-sm">{event.location}</p>}
+          {event.description && (
+            <p className="max-h-64 overflow-auto whitespace-pre-wrap text-sm">
+              {event.description}
+            </p>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/legacy/calendar/save-calendar-event-drafts.test.ts

@@ -1,6 +1,13 @@
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { expect, it, vi } from 'vitest';
-import { saveCalendarEventDrafts } from './save-calendar-event-drafts';
+import {
+  createCalendarCreationRequests,
+  newCalendarCreationRequestId,
+} from '../../../../hooks/calendar-creation-request';
+import {
+  prepareCalendarEventDrafts,
+  saveCalendarEventDrafts,
+} from './save-calendar-event-drafts';
 
 it('retains rejected or unconfirmed drafts and retries only those events', async () => {
   const drafts = [
@@ -23,3 +30,30 @@ it('retains rejected or unconfirmed drafts and retries only those events', async
     'Unconfirmed',
   ]);
 });
+
+it('retains distinct AI draft IDs and immutable payload across a lost-response batch retry', async () => {
+  const controller = createCalendarCreationRequests();
+  const manualId = newCalendarCreationRequestId();
+  controller.forAttempt({ title: 'Manual' }, manualId);
+  const drafts = prepareCalendarEventDrafts(
+    ['First AI', 'Second AI'].map((title) => ({ title }))
+  );
+  const attempts: { id: string; event: unknown }[] = [];
+  const addEvent = vi.fn(async (event, options) => {
+    attempts.push({
+      id: controller.forAttempt(event, options?.requestId),
+      event,
+    });
+    if (attempts.length <= 2) throw new Error('lost response');
+    return { id: 'confirmed' } as CalendarEvent;
+  });
+  const failed = await saveCalendarEventDrafts(drafts, addEvent, undefined);
+  expect(failed.failedEvents).toEqual(drafts);
+  await saveCalendarEventDrafts(failed.failedEvents, addEvent, undefined);
+  expect(new Set([manualId, attempts[0]!.id, attempts[1]!.id]).size).toBe(3);
+  expect(attempts[2]).toEqual(attempts[0]);
+  expect(attempts[3]).toEqual(attempts[1]);
+  expect(drafts.map((d) => d.requestId)).toEqual(
+    attempts.slice(0, 2).map((a) => a.id)
+  );
+});

package/src/components/ui/legacy/calendar/save-calendar-event-drafts.ts

@@ -1,10 +1,12 @@
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { newCalendarCreationRequestId } from '../../../../hooks/calendar-creation-request';
 
 /** Keep only unconfirmed drafts after a batch so retry never resends saved events. */
 export async function saveCalendarEventDrafts(
   drafts: Partial<CalendarEvent>[],
   addEvent: (
-    event: Omit<CalendarEvent, 'id'>
+    event: Omit<CalendarEvent, 'id'>,
+    options?: { requestId?: string }
   ) => Promise<CalendarEvent | undefined>,
   source: CalendarEvent['source']
 ) {
@@ -12,16 +14,19 @@ export async function saveCalendarEventDrafts(
   const failedEvents: Partial<CalendarEvent>[] = [];
   for (const draft of drafts) {
     try {
-      const saved = await addEvent({
-        title: draft.title || 'New Event',
-        description: draft.description || '',
-        start_at: draft.start_at || '',
-        end_at: draft.end_at || '',
-        color: draft.color || 'BLUE',
-        location: draft.location || '',
-        locked: draft.locked || false,
-        source,
-      });
+      const saved = await addEvent(
+        {
+          title: draft.title || 'New Event',
+          description: draft.description || '',
+          start_at: draft.start_at || '',
+          end_at: draft.end_at || '',
+          color: draft.color || 'BLUE',
+          location: draft.location || '',
+          locked: draft.locked || false,
+          source,
+        },
+        { requestId: draft.requestId }
+      );
       if (saved?.id) savedEvents.push(saved);
       else failedEvents.push(draft);
     } catch {
@@ -30,3 +35,10 @@ export async function saveCalendarEventDrafts(
   }
   return { savedEvents, failedEvents };
 }
+
+export function prepareCalendarEventDrafts(drafts: Partial<CalendarEvent>[]) {
+  return drafts.map((draft) => ({
+    ...draft,
+    requestId: newCalendarCreationRequestId(),
+  }));
+}

package/src/components/ui/legacy/calendar/use-calendar-draft-save.test.tsx

@@ -0,0 +1,119 @@
+// @vitest-environment jsdom
+import { act, renderHook } from '@testing-library/react';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { expect, it, vi } from 'vitest';
+import { useCalendarDraftSave } from './use-calendar-draft-save';
+
+const query = vi.hoisted(() => ({
+  data: { connectionId: 'owned', providerColorWrites: true },
+}));
+vi.mock('@tanstack/react-query', () => ({ useQuery: () => query }));
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
+vi.mock('@tuturuuu/ui/button', () => ({
+  Button: (props: any) => <button {...props} />,
+}));
+
+function fixture() {
+  query.data = { connectionId: 'owned', providerColorWrites: true };
+  const draft = {
+    requestId: '01900000-0000-7000-8000-000000000001',
+    ws_id: 'workspace',
+    title: 'Original',
+  };
+  const args = {
+    draft,
+    wsId: 'workspace',
+    source: { provider: 'google' as const, connectionId: 'owned' } as any,
+    original: { id: 'new' } as CalendarEvent,
+    buildPayload: () => ({ title: args.draft.title }),
+    addEvent: vi.fn().mockRejectedValueOnce(new Error('lost response')),
+    updateEvent: vi.fn().mockResolvedValue(undefined),
+    closeModal: vi.fn(),
+    setIsSaving: vi.fn(),
+    onError: vi.fn(),
+    isSaving: false,
+  };
+  return args;
+}
+
+it('retries immutable uncertain contents and ID, preserves edits, then explicitly updates the confirmed ID', async () => {
+  const args = fixture();
+  const { result, rerender } = renderHook(() => useCalendarDraftSave(args));
+  await act(() => result.current.save());
+  expect(result.current.recoveryNotice).not.toBeNull();
+  args.draft = { ...args.draft, title: 'Edited after uncertainty' };
+  rerender();
+  await act(() => result.current.save());
+  expect(args.addEvent).toHaveBeenCalledTimes(1);
+  args.addEvent.mockResolvedValueOnce({ id: 'confirmed', title: 'Original' });
+  const retry = (result.current.recoveryNotice!.props.children[1] as any).props
+    .onClick;
+  await act(() => retry());
+  expect(args.addEvent).toHaveBeenLastCalledWith(
+    { title: 'Original' },
+    { requestId: args.draft.requestId }
+  );
+  expect(args.closeModal).not.toHaveBeenCalled();
+  expect(args.draft.title).toBe('Edited after uncertainty');
+  await act(() => result.current.save());
+  expect(args.addEvent).toHaveBeenCalledTimes(2);
+  expect(args.updateEvent).toHaveBeenCalledWith('confirmed', {
+    title: 'Edited after uncertainty',
+  });
+  expect(args.closeModal).toHaveBeenCalledTimes(1);
+});
+
+it('keeps failed recovery uncertain without dispatching edited intent', async () => {
+  const args = fixture();
+  const { result } = renderHook(() => useCalendarDraftSave(args));
+  await act(() => result.current.save());
+  args.addEvent.mockRejectedValueOnce(new Error('still uncertain'));
+  const retry = (result.current.recoveryNotice!.props.children[1] as any).props
+    .onClick;
+  await act(() => retry());
+  expect(result.current.recoveryNotice).not.toBeNull();
+  expect(args.updateEvent).not.toHaveBeenCalled();
+  expect(args.closeModal).not.toHaveBeenCalled();
+});
+
+it('does not close or recover another draft after a stale retry response', async () => {
+  const args = fixture();
+  const { result, rerender } = renderHook(() => useCalendarDraftSave(args));
+  await act(() => result.current.save());
+  let resolve!: (event: unknown) => void;
+  args.addEvent.mockReturnValueOnce(
+    new Promise((r) => {
+      resolve = r;
+    })
+  );
+  const retry = (result.current.recoveryNotice!.props.children[1] as any).props
+    .onClick;
+  let pending!: Promise<void>;
+  act(() => {
+    pending = retry();
+  });
+  args.draft = {
+    ...args.draft,
+    requestId: 'another-draft',
+    title: 'New draft',
+  };
+  rerender();
+  await act(async () => {
+    resolve({ id: 'old-confirmed', title: 'Original' });
+    await pending;
+  });
+  expect(args.closeModal).not.toHaveBeenCalled();
+  expect(result.current.recoveryNotice).toBeNull();
+  expect(args.updateEvent).not.toHaveBeenCalled();
+});
+
+it('keeps legacy unconfirmed creates out of automatic retry', async () => {
+  const args = fixture();
+  query.data.providerColorWrites = false;
+  const { result } = renderHook(() => useCalendarDraftSave(args));
+  await act(() => result.current.save());
+  expect(result.current.recoveryNotice!.props.children[1]).toBe(false);
+  await act(() => result.current.save());
+  expect(args.addEvent).toHaveBeenCalledTimes(1);
+  expect(args.updateEvent).not.toHaveBeenCalled();
+});