@tuturuuu/ui 0.26.1 → 0.28.0

package/src/components/ui/custom/workspace-access/workspace-access-page.tsx

@@ -37,9 +37,16 @@ import { WorkspaceAccessMembers } from './workspace-access-members';
 import { WorkspaceAccessPageHeader } from './workspace-access-page-header';
 import { WorkspaceAccessPeopleFilters } from './workspace-access-people-filters';
 import { WorkspaceAccessRoleEditorDialog } from './workspace-access-role-editor-dialog';
+import { listAllWorkspaceAccessRoles } from './workspace-access-role-options';
 import { WorkspaceAccessRoles } from './workspace-access-roles';
 import { WorkspaceAccessTabsToolbar } from './workspace-access-tabs-toolbar';
 
+type InvitationRoleUpdate = {
+  email?: null | string;
+  roleIds: string[];
+  userId?: null | string;
+};
+
 export function WorkspaceAccessPage({
   adapter,
   disableInvite = false,
@@ -57,6 +64,7 @@ export function WorkspaceAccessPage({
   const [inviteAccessPreset, setInviteAccessPreset] = useState<
     'guest' | 'member' | 'pos_operator'
   >('member');
+  const [inviteRoleIds, setInviteRoleIds] = useState<string[]>([]);
   const [confirmDefaultAdminMigration, setConfirmDefaultAdminMigration] =
     useState(false);
   const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
@@ -92,6 +100,7 @@ export function WorkspaceAccessPage({
   const workspaceId = context.workspaceId;
   const canManageMembers = context.canManageMembers;
   const canManageRoles = context.canManageRoles;
+  const canAssignInviteRoles = canManageRoles && mode === 'workspace';
   const canInvite = canManageMembers && !disableInvite;
   const permissionUser = useMemo(
     () =>
@@ -145,6 +154,12 @@ export function WorkspaceAccessPage({
     queryKey: ['workspace-access', workspaceId, 'roles', search],
     staleTime: 30_000,
   });
+  const inviteRolesQuery = useQuery({
+    enabled: inviteDialogOpen && canAssignInviteRoles,
+    queryFn: () => listAllWorkspaceAccessRoles(adapter, workspaceId),
+    queryKey: ['workspace-access', workspaceId, 'invite-roles'],
+    staleTime: 30_000,
+  });
   const memberDefaultQuery = useQuery({
     enabled: canManageRoles,
     queryFn: () => adapter.getDefaultRole(workspaceId, 'MEMBER'),
@@ -166,6 +181,9 @@ export function WorkspaceAccessPage({
       queryClient.invalidateQueries({
         queryKey: ['workspace-access', workspaceId, 'roles'],
       }),
+      queryClient.invalidateQueries({
+        queryKey: ['workspace-access', workspaceId, 'invite-roles'],
+      }),
       queryClient.invalidateQueries({
         queryKey: ['workspace-access', workspaceId, 'defaults'],
       }),
@@ -179,12 +197,17 @@ export function WorkspaceAccessPage({
         confirmDefaultAdminMigration,
         emails: parseInviteEmails(inviteEmails),
         memberType: inviteAccessPreset === 'guest' ? 'GUEST' : 'MEMBER',
+        roleIds:
+          canAssignInviteRoles && inviteAccessPreset === 'member'
+            ? inviteRoleIds
+            : [],
       }),
     onError: (error) =>
       toast.error(error instanceof Error ? error.message : t('common.error')),
     onSuccess: async (result) => {
       setInviteEmails('');
       setInviteAccessPreset('member');
+      setInviteRoleIds([]);
       setConfirmDefaultAdminMigration(false);
       setInviteDialogOpen(false);
       toast.success(result.message ?? t('ws-members.invitation-sent'));
@@ -247,6 +270,66 @@ export function WorkspaceAccessPage({
       await invalidateAccessData();
     },
   });
+  const invitationRoleMutation = useMutation({
+    mutationFn: (payload: InvitationRoleUpdate) => {
+      if (!adapter.updateInvitationRole) {
+        throw new Error(t('common.error'));
+      }
+      return adapter.updateInvitationRole(workspaceId, payload);
+    },
+    onMutate: async (payload) => {
+      const queryKey = ['workspace-access', workspaceId, 'members'] as const;
+      await queryClient.cancelQueries({ queryKey });
+      const previousMembers =
+        queryClient.getQueryData<InternalApiEnhancedWorkspaceMember[]>(
+          queryKey
+        );
+      const roleById = new Map(
+        (inviteRolesQuery.data?.data ?? rolesQuery.data?.data ?? []).map(
+          (role) => [role.id, role]
+        )
+      );
+      const nextRoles = payload.roleIds.flatMap((roleId) => {
+        const role = roleById.get(roleId);
+        return role ? [{ id: role.id, name: role.name, permissions: [] }] : [];
+      });
+      const normalizedEmail = payload.email?.trim().toLowerCase() ?? null;
+
+      queryClient.setQueryData<InternalApiEnhancedWorkspaceMember[]>(
+        queryKey,
+        (members = []) =>
+          members.map((member) => {
+            const matchesUser = Boolean(
+              payload.userId && member.id === payload.userId
+            );
+            const matchesEmail = Boolean(
+              normalizedEmail &&
+                member.email?.trim().toLowerCase() === normalizedEmail
+            );
+            if (!member.pending || (!matchesUser && !matchesEmail)) {
+              return member;
+            }
+
+            return {
+              ...member,
+              roles: nextRoles,
+            };
+          })
+      );
+
+      return { previousMembers, queryKey };
+    },
+    onError: (error, _payload, context) => {
+      if (context?.previousMembers) {
+        queryClient.setQueryData(context.queryKey, context.previousMembers);
+      }
+      toast.error(error instanceof Error ? error.message : t('common.error'));
+    },
+    onSettled: invalidateAccessData,
+    onSuccess: () => {
+      toast.success(t('ws-members.invitation_role_updated'));
+    },
+  });
   const deleteRoleMutation = useMutation({
     mutationFn: (roleId: string) => adapter.deleteRole(workspaceId, roleId),
     onError: (error) =>
@@ -394,11 +477,15 @@ export function WorkspaceAccessPage({
             canEditProfiles={Boolean(adapter.updateMemberProfile)}
             canManageMembers={canManageMembers}
             canManageRoles={canManageRoles}
+            canUpdateInvitationRoles={
+              canManageRoles && Boolean(adapter.updateInvitationRole)
+            }
             defaultAdminEnabled={defaultAdminEnabled}
             isLoading={membersQuery.isPending}
             isMutating={
               removeMemberMutation.isPending ||
               roleMembershipMutation.isPending ||
+              invitationRoleMutation.isPending ||
               updateMemberProfileMutation.isPending
             }
             labels={labels}
@@ -411,7 +498,10 @@ export function WorkspaceAccessPage({
             onRemoveRole={(payload) =>
               roleMembershipMutation.mutate({ ...payload, action: 'remove' })
             }
-            roles={roles}
+            onUpdateInvitationRole={(payload) =>
+              invitationRoleMutation.mutate(payload)
+            }
+            roles={inviteRolesQuery.data?.data ?? roles}
             searchTerm={search}
             status={status}
           />
@@ -475,23 +565,32 @@ export function WorkspaceAccessPage({
 
       <WorkspaceAccessInviteDialog
         accessPreset={inviteAccessPreset}
-        canManageRoles={canManageRoles}
+        canManageRoles={canAssignInviteRoles}
         confirmDefaultAdminMigration={confirmDefaultAdminMigration}
         defaultAdminEnabled={defaultAdminEnabled}
         emails={inviteEmails}
         isSubmitting={inviteMutation.isPending}
         joinedMemberCount={joinedCount}
+        noRoleLabel={t('ws-members.no_role_assigned')}
         onAccessPresetChange={(value) => {
           setInviteAccessPreset(value);
-          if (value !== 'pos_operator') {
+          if (value === 'member') {
             setConfirmDefaultAdminMigration(false);
+          } else {
+            setInviteRoleIds([]);
+            if (value === 'guest') {
+              setConfirmDefaultAdminMigration(false);
+            }
           }
         }}
         onConfirmDefaultAdminMigrationChange={setConfirmDefaultAdminMigration}
         onEmailsChange={setInviteEmails}
         onOpenChange={setInviteDialogOpen}
+        onRoleIdsChange={setInviteRoleIds}
         onSubmit={() => inviteMutation.mutate()}
         open={inviteDialogOpen}
+        roleIds={inviteRoleIds}
+        roles={inviteRolesQuery.data?.data ?? []}
       />
 
       {profileMember ? (

package/src/components/ui/custom/workspace-access/workspace-access-role-options.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { WorkspaceAccessAdapter, WorkspaceAccessRole } from './types';
+import { listAllWorkspaceAccessRoles } from './workspace-access-role-options';
+
+function createRoles(start: number, count: number): WorkspaceAccessRole[] {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `role-${start + index}`,
+    name: `Role ${start + index}`,
+    permissions: [],
+  }));
+}
+
+describe('listAllWorkspaceAccessRoles', () => {
+  it('paginates beyond the first 100 assignable roles', async () => {
+    const listRoleOptions = vi
+      .fn()
+      .mockResolvedValueOnce({ count: 125, data: createRoles(0, 100) })
+      .mockResolvedValueOnce({ count: 125, data: createRoles(100, 25) });
+
+    const result = await listAllWorkspaceAccessRoles(
+      { listRoleOptions } as unknown as WorkspaceAccessAdapter,
+      'workspace-1'
+    );
+
+    expect(result.data).toHaveLength(125);
+    expect(listRoleOptions).toHaveBeenNthCalledWith(1, 'workspace-1', {
+      page: '1',
+      pageSize: '100',
+    });
+    expect(listRoleOptions).toHaveBeenNthCalledWith(2, 'workspace-1', {
+      page: '2',
+      pageSize: '100',
+    });
+  });
+});

package/src/components/ui/custom/workspace-access/workspace-access-role-options.ts

@@ -0,0 +1,21 @@
+import type { WorkspaceAccessAdapter, WorkspaceAccessRole } from './types';
+
+export async function listAllWorkspaceAccessRoles(
+  adapter: WorkspaceAccessAdapter,
+  workspaceId: string
+) {
+  const pageSize = 100;
+  const roles: WorkspaceAccessRole[] = [];
+
+  for (let page = 1; ; page += 1) {
+    const result = await adapter.listRoleOptions(workspaceId, {
+      page: String(page),
+      pageSize: String(pageSize),
+    });
+    roles.push(...result.data.map((role) => ({ ...role, permissions: [] })));
+
+    if (roles.length >= result.count || result.data.length < pageSize) {
+      return { count: result.count, data: roles };
+    }
+  }
+}

package/src/components/ui/custom/workspace-select-invitations.tsx

@@ -31,8 +31,9 @@ export function useWorkspaceInvitations({
     queryKey: ['workspace-invitations', ...(cacheScope ? [cacheScope] : [])],
     queryFn: async () => (await listWorkspaceInvitations()).invitations,
     enabled,
+    gcTime: 30 * 60_000,
     retry: 1,
-    staleTime: 30_000,
+    staleTime: 5 * 60_000,
   });
   const invitations = query.data ?? [];
   const mutation = useMutation({

package/src/components/ui/text-editor/__tests__/editor-classes.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { getRichTextEditorClasses } from '../editor-classes';
+
+describe('rich text editor classes', () => {
+  it('keeps regular and checklist nesting visibly indented', () => {
+    const classes = getRichTextEditorClasses({ readOnly: false });
+
+    expect(classes).toContain('[&_li_ul]:ml-6');
+    expect(classes).toContain('[&_li_ol]:ml-6');
+    expect(classes).toContain(
+      '[&_ul[data-type="taskList"]_ul[data-type="taskList"]]:ml-6'
+    );
+    expect(classes).not.toContain(
+      '[&_ul[data-type="taskList"]_ul[data-type="taskList"]]:ml-0'
+    );
+  });
+
+  it('styles toggle summaries by heading level and indents their body', () => {
+    const classes = getRichTextEditorClasses({ readOnly: false });
+
+    expect(classes).toContain('[&_summary[data-heading-level="1"]]:text-4xl');
+    expect(classes).toContain('[&_summary[data-heading-level="2"]]:text-3xl');
+    expect(classes).toContain('[&_summary[data-heading-level="3"]]:text-2xl');
+    expect(classes).toContain('[&_div[data-type="detailsContent"]]:border-l');
+  });
+
+  it('retains read-only interaction guards and custom classes', () => {
+    const classes = getRichTextEditorClasses({
+      className: 'task-description-editor',
+      readOnly: true,
+    });
+
+    expect(classes).toContain('task-description-editor');
+    expect(classes).toContain('[&_.task-list-checkbox]:!pointer-events-none');
+  });
+});

package/src/components/ui/text-editor/__tests__/inline-task-conversion.test.tsx

@@ -19,6 +19,7 @@ function createEditorStub(): Editor {
     toggleSubscript: vi.fn(() => chain),
     toggleSuperscript: vi.fn(() => chain),
     toggleTaskListSmart: vi.fn(() => chain),
+    toggleDetailsBlock: vi.fn(() => chain),
     run: vi.fn(() => true),
   };
 
@@ -43,4 +44,33 @@ describe('inline task conversion toolbar', () => {
 
     expect(onConvertToTask).toHaveBeenCalledTimes(1);
   });
+
+  it('exposes toggle blocks and delegates the command through the editor chain', () => {
+    const editor = createEditorStub();
+    render(<FixedToolbar editor={editor} />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Toggle List or Heading' })
+    );
+
+    const chain = vi.mocked(editor.chain).mock.results[0]?.value as {
+      toggleDetailsBlock: ReturnType<typeof vi.fn>;
+      run: ReturnType<typeof vi.fn>;
+    };
+    expect(chain.toggleDetailsBlock).toHaveBeenCalledTimes(1);
+    expect(chain.run).toHaveBeenCalled();
+  });
+
+  it('uses the localized toggle block label when provided', () => {
+    render(
+      <FixedToolbar
+        editor={createEditorStub()}
+        toggleBlockLabel="Liste ou titre repliable"
+      />
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Liste ou titre repliable' })
+    ).toBeInTheDocument();
+  });
 });

package/src/components/ui/text-editor/__tests__/keyboard.test.ts

@@ -2,7 +2,7 @@ import { Schema } from '@tiptap/pm/model';
 import { EditorState, TextSelection } from '@tiptap/pm/state';
 import type { EditorView } from '@tiptap/pm/view';
 import { describe, expect, it, vi } from 'vitest';
-import { handlePlainEnterFallback } from '../keyboard';
+import { handleListIndentation, handlePlainEnterFallback } from '../keyboard';
 
 const schema = new Schema({
   nodes: {
@@ -15,6 +15,10 @@ const schema = new Schema({
       group: 'block',
       content: 'listItem+',
     },
+    orderedList: {
+      group: 'block',
+      content: 'listItem+',
+    },
     listItem: {
       content: 'paragraph block*',
       defining: true,
@@ -37,11 +41,19 @@ const schema = new Schema({
   marks: {},
 });
 
-function stateWithSelection(doc: ReturnType<typeof schema.node>, offset = 1) {
+function stateWithSelection(
+  doc: ReturnType<typeof schema.node>,
+  offset = 1,
+  targetText?: string
+) {
   let textStart: number | null = null;
 
   doc.descendants((node, pos) => {
-    if (textStart === null && node.isText) {
+    if (
+      textStart === null &&
+      node.isText &&
+      (!targetText || node.text === targetText)
+    ) {
       textStart = pos;
       return false;
     }
@@ -69,6 +81,19 @@ function enterEvent(overrides: Partial<KeyboardEvent> = {}) {
   } as unknown as KeyboardEvent;
 }
 
+function tabEvent(overrides: Partial<KeyboardEvent> = {}) {
+  return {
+    altKey: false,
+    ctrlKey: false,
+    key: 'Tab',
+    metaKey: false,
+    preventDefault: vi.fn(),
+    shiftKey: false,
+    stopPropagation: vi.fn(),
+    ...overrides,
+  } as unknown as KeyboardEvent;
+}
+
 function viewForState(state: EditorState) {
   let currentState = state;
   const view = {
@@ -173,4 +198,149 @@ describe('text editor keyboard handling', () => {
     expect(handlePlainEnterFallback(view, event)).toBe(false);
     expect(event.preventDefault).not.toHaveBeenCalled();
   });
+
+  it.each(['bulletList', 'orderedList'] as const)(
+    'indents and outdents a second %s item with Tab and Shift+Tab',
+    (listType) => {
+      const state = stateWithSelection(
+        schema.node('doc', null, [
+          schema.node(listType, null, [
+            schema.node('listItem', null, [
+              schema.node('paragraph', null, schema.text('first')),
+            ]),
+            schema.node('listItem', null, [
+              schema.node('paragraph', null, schema.text('second')),
+            ]),
+          ]),
+        ]),
+        1,
+        'second'
+      );
+      const { view, getState } = viewForState(state);
+      const indentEvent = tabEvent();
+
+      expect(handleListIndentation(view, indentEvent)).toBe(true);
+      expect(indentEvent.preventDefault).toHaveBeenCalledTimes(1);
+      expect(indentEvent.stopPropagation).toHaveBeenCalledTimes(1);
+      expect(getState().doc.toJSON()).toMatchObject({
+        content: [
+          {
+            type: listType,
+            content: [
+              {
+                type: 'listItem',
+                content: [
+                  { type: 'paragraph' },
+                  {
+                    type: listType,
+                    content: [{ type: 'listItem' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      });
+
+      const outdentEvent = tabEvent({ shiftKey: true });
+      expect(handleListIndentation(view, outdentEvent)).toBe(true);
+      expect(getState().doc.child(0).childCount).toBe(2);
+    }
+  );
+
+  it('indents and outdents checklist items', () => {
+    const state = stateWithSelection(
+      schema.node('doc', null, [
+        schema.node('taskList', null, [
+          schema.node('taskItem', null, [
+            schema.node('paragraph', null, schema.text('first')),
+          ]),
+          schema.node('taskItem', null, [
+            schema.node('paragraph', null, schema.text('second')),
+          ]),
+        ]),
+      ]),
+      1,
+      'second'
+    );
+    const { view, getState } = viewForState(state);
+
+    expect(handleListIndentation(view, tabEvent())).toBe(true);
+    expect(getState().doc.toJSON()).toMatchObject({
+      content: [
+        {
+          type: 'taskList',
+          content: [
+            {
+              type: 'taskItem',
+              content: [
+                { type: 'paragraph' },
+                {
+                  type: 'taskList',
+                  content: [{ type: 'taskItem' }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(handleListIndentation(view, tabEvent({ shiftKey: true }))).toBe(
+      true
+    );
+    expect(getState().doc.child(0).childCount).toBe(2);
+  });
+
+  it('does not consume Tab outside a list or when the first item cannot indent', () => {
+    const paragraph = viewForState(
+      stateWithSelection(
+        schema.node('doc', null, [
+          schema.node('paragraph', null, schema.text('plain')),
+        ])
+      )
+    );
+    const paragraphEvent = tabEvent();
+
+    expect(handleListIndentation(paragraph.view, paragraphEvent)).toBe(false);
+    expect(paragraphEvent.preventDefault).not.toHaveBeenCalled();
+
+    const firstItem = viewForState(
+      stateWithSelection(
+        schema.node('doc', null, [
+          schema.node('bulletList', null, [
+            schema.node('listItem', null, [
+              schema.node('paragraph', null, schema.text('only')),
+            ]),
+          ]),
+        ])
+      )
+    );
+    const firstItemEvent = tabEvent();
+
+    expect(handleListIndentation(firstItem.view, firstItemEvent)).toBe(false);
+    expect(firstItemEvent.preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('does not hijack modified Tab shortcuts', () => {
+    const state = stateWithSelection(
+      schema.node('doc', null, [
+        schema.node('bulletList', null, [
+          schema.node('listItem', null, [
+            schema.node('paragraph', null, schema.text('first')),
+          ]),
+          schema.node('listItem', null, [
+            schema.node('paragraph', null, schema.text('second')),
+          ]),
+        ]),
+      ]),
+      1,
+      'second'
+    );
+    const { view } = viewForState(state);
+
+    expect(handleListIndentation(view, tabEvent({ metaKey: true }))).toBe(
+      false
+    );
+  });
 });