@tuturuuu/ui 0.26.1 → 0.28.0

package/src/components/ui/custom/workspace-access/types.ts

@@ -56,6 +56,7 @@ export type WorkspaceAccessInvitePayload = {
   confirmDefaultAdminMigration?: boolean;
   emails: string[];
   memberType: WorkspaceDefaultPermissionMemberType;
+  roleIds: string[];
 };
 
 export type WorkspaceAccessAdapter = {
@@ -91,6 +92,10 @@ export type WorkspaceAccessAdapter = {
     workspaceId: string,
     status?: WorkspaceAccessMemberStatus
   ) => Promise<InternalApiEnhancedWorkspaceMember[]>;
+  listRoleOptions: (
+    workspaceId: string,
+    query?: { page?: string; pageSize?: string }
+  ) => Promise<{ count: number; data: Array<{ id: string; name: string }> }>;
   listRoles: (
     workspaceId: string,
     query?: { page?: string; pageSize?: string; q?: string }
@@ -112,6 +117,14 @@ export type WorkspaceAccessAdapter = {
       userId?: null | string;
     }
   ) => Promise<unknown>;
+  updateInvitationRole?: (
+    workspaceId: string,
+    payload: {
+      email?: null | string;
+      roleIds: string[];
+      userId?: null | string;
+    }
+  ) => Promise<unknown>;
   updateDefaultRole: (
     workspaceId: string,
     memberType: WorkspaceDefaultPermissionMemberType,

package/src/components/ui/custom/workspace-access/workspace-access-invitation-role-menu.test.tsx

@@ -0,0 +1,79 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { WorkspaceAccessInvitationRoleMenu } from './workspace-access-invitation-role-menu';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, number>) =>
+    values?.count === undefined ? key : `${values.count} ${key}`,
+}));
+
+describe('WorkspaceAccessInvitationRoleMenu', () => {
+  it('presents an actionable empty state and adds roles to an email invite', async () => {
+    const onUpdate = vi.fn();
+    render(
+      <WorkspaceAccessInvitationRoleMenu
+        email="pending@example.com"
+        isMutating={false}
+        onUpdate={onUpdate}
+        assignedRoles={[]}
+        roles={[
+          { id: 'role-editor', name: 'Editor' },
+          { id: 'role-reviewer', name: 'Reviewer' },
+        ]}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', {
+        name: /ws-members.assign_invitation_role/i,
+      })
+    ).toBeDefined();
+    expect(screen.getByText('ws-members.invitation_role_helper')).toBeDefined();
+
+    fireEvent.pointerDown(
+      screen.getByRole('button', {
+        name: /ws-members.assign_invitation_role/i,
+      }),
+      { button: 0, ctrlKey: false }
+    );
+    fireEvent.click(await screen.findByText('Editor'));
+
+    expect(onUpdate).toHaveBeenCalledWith({
+      email: 'pending@example.com',
+      roleIds: ['role-editor'],
+      userId: undefined,
+    });
+  });
+
+  it('shows all assigned roles and removes only the selected role', async () => {
+    const onUpdate = vi.fn();
+    render(
+      <WorkspaceAccessInvitationRoleMenu
+        isMutating={false}
+        onUpdate={onUpdate}
+        assignedRoles={[
+          { id: 'role-editor', name: 'Editor' },
+          { id: 'role-reviewer', name: 'Reviewer' },
+        ]}
+        roles={[
+          { id: 'role-editor', name: 'Editor' },
+          { id: 'role-reviewer', name: 'Reviewer' },
+        ]}
+        userId="user-2"
+      />
+    );
+
+    fireEvent.pointerDown(
+      screen.getByRole('button', { name: /2 ws-members.roles_selected/i }),
+      { button: 0, ctrlKey: false }
+    );
+    const reviewerLabels = await screen.findAllByText('Reviewer');
+    fireEvent.click(reviewerLabels.at(-1)!);
+
+    expect(onUpdate).toHaveBeenCalledWith({
+      email: undefined,
+      roleIds: ['role-editor'],
+      userId: 'user-2',
+    });
+  });
+});

package/src/components/ui/custom/workspace-access/workspace-access-invitation-role-menu.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { ChevronDown, Plus, ShieldUser, X } from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { useTranslations } from 'next-intl';
+import type { WorkspaceAccessRole } from './types';
+
+type Props = {
+  email?: null | string;
+  isMutating: boolean;
+  onUpdate: (payload: {
+    email?: null | string;
+    roleIds: string[];
+    userId?: null | string;
+  }) => void;
+  assignedRoles: Array<Pick<WorkspaceAccessRole, 'id' | 'name'>>;
+  roles: Array<Pick<WorkspaceAccessRole, 'id' | 'name'>>;
+  userId?: null | string;
+};
+
+export function WorkspaceAccessInvitationRoleMenu({
+  email,
+  isMutating,
+  onUpdate,
+  assignedRoles,
+  roles,
+  userId,
+}: Props) {
+  const t = useTranslations();
+  const assignedRoleIds = new Set(assignedRoles.map((role) => role.id));
+  const updateRole = (roleId: string) => {
+    const roleIds = assignedRoleIds.has(roleId)
+      ? assignedRoles
+          .filter((role) => role.id !== roleId)
+          .map((role) => role.id)
+      : [...assignedRoles.map((role) => role.id), roleId];
+    onUpdate({ email, roleIds, userId });
+  };
+
+  return (
+    <div className="space-y-2">
+      {assignedRoles.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {assignedRoles.map((role) => (
+            <Badge
+              key={role.id}
+              className="h-6 gap-1 border-dynamic-purple/35 bg-dynamic-purple/10 px-2 text-dynamic-purple text-xs"
+            >
+              <ShieldUser className="size-3" />
+              {role.name}
+            </Badge>
+          ))}
+        </div>
+      ) : null}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className={`h-7 max-w-full rounded-full px-2.5 text-xs active:scale-[0.98] ${assignedRoles.length > 0 ? 'border-dynamic-purple/40 bg-dynamic-purple/10 text-dynamic-purple hover:bg-dynamic-purple/15 hover:text-dynamic-purple' : 'border-dashed text-muted-foreground hover:text-foreground'}`}
+            disabled={isMutating}
+          >
+            {assignedRoles.length > 0 ? (
+              <ShieldUser className="size-3.5 shrink-0" />
+            ) : (
+              <Plus className="size-3.5 shrink-0" />
+            )}
+            <span className="truncate">
+              {assignedRoles.length > 0
+                ? t('ws-members.roles_selected', {
+                    count: assignedRoles.length,
+                  })
+                : t('ws-members.assign_invitation_role')}
+            </span>
+            <ChevronDown className="size-3 shrink-0 opacity-60" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-60">
+          <DropdownMenuLabel className="flex items-center gap-2">
+            <ShieldUser className="size-4 text-muted-foreground" />
+            {t('ws-members.invitation_role')}
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {roles.map((option) => (
+            <DropdownMenuCheckboxItem
+              checked={assignedRoleIds.has(option.id)}
+              key={option.id}
+              onSelect={(event) => {
+                event.preventDefault();
+                updateRole(option.id);
+              }}
+            >
+              <ShieldUser className="size-4" />
+              <span className="flex-1 truncate">{option.name}</span>
+            </DropdownMenuCheckboxItem>
+          ))}
+          {assignedRoles.length > 0 ? (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => onUpdate({ email, roleIds: [], userId })}
+              >
+                <X className="size-4" />
+                {t('ws-members.clear_all_roles')}
+              </DropdownMenuItem>
+            </>
+          ) : null}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <p className="text-muted-foreground text-xs leading-4">
+        {t('ws-members.invitation_role_helper')}
+      </p>
+    </div>
+  );
+}

package/src/components/ui/custom/workspace-access/workspace-access-invite-access-picker.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { CreditCard, ShieldUser, UserPlus } from '@tuturuuu/icons';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import { useTranslations } from 'next-intl';
+
+type AccessPreset = 'guest' | 'member' | 'pos_operator';
+
+const OPTIONS: Array<{
+  descriptionKey: string;
+  icon: typeof UserPlus;
+  labelKey: string;
+  shortLabelKey: string;
+  value: AccessPreset;
+}> = [
+  {
+    descriptionKey: 'ws-members.invite_membership_member_description',
+    icon: UserPlus,
+    labelKey: 'ws-members.invite_membership_member',
+    shortLabelKey: 'ws-members.invite_access_member_tab',
+    value: 'member',
+  },
+  {
+    descriptionKey: 'ws-members.invite_membership_guest_description',
+    icon: ShieldUser,
+    labelKey: 'ws-members.invite_membership_guest',
+    shortLabelKey: 'ws-members.invite_access_guest_tab',
+    value: 'guest',
+  },
+  {
+    descriptionKey: 'ws-members.pos_operator_description',
+    icon: CreditCard,
+    labelKey: 'ws-members.invite_membership_pos_operator',
+    shortLabelKey: 'ws-members.invite_access_pos_tab',
+    value: 'pos_operator',
+  },
+];
+
+export function WorkspaceAccessInviteAccessPicker({
+  canManageRoles,
+  onChange,
+  value,
+}: {
+  canManageRoles: boolean;
+  onChange: (value: AccessPreset) => void;
+  value: AccessPreset;
+}) {
+  const t = useTranslations() as (key: string) => string;
+  const options = canManageRoles
+    ? OPTIONS
+    : OPTIONS.filter((option) => option.value !== 'pos_operator');
+
+  return (
+    <div className="space-y-2">
+      <p className="font-medium text-sm">
+        {t('ws-members.invite_membership_label')}
+      </p>
+      <Tabs
+        value={value}
+        onValueChange={(nextValue) => onChange(nextValue as AccessPreset)}
+      >
+        <TabsList
+          aria-label={t('ws-members.invite_membership_label')}
+          className={`grid h-auto w-full gap-1 rounded-xl bg-muted/60 p-1 ${canManageRoles ? 'grid-cols-3' : 'grid-cols-2'}`}
+        >
+          {options.map((option) => {
+            const Icon = option.icon;
+
+            return (
+              <TabsTrigger
+                key={option.value}
+                value={option.value}
+                className="min-h-10 min-w-0 rounded-lg px-2.5 py-2 data-[state=active]:text-dynamic-blue"
+              >
+                <Icon className="size-4" />
+                <span className="truncate">{t(option.shortLabelKey)}</span>
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+
+        {options.map((option) => {
+          const Icon = option.icon;
+
+          return (
+            <TabsContent
+              key={option.value}
+              value={option.value}
+              className="mt-1 rounded-xl border bg-background px-3.5 py-3"
+            >
+              <div className="flex items-start gap-3">
+                <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-muted/30 text-dynamic-blue">
+                  <Icon className="size-4" />
+                </span>
+                <div className="min-w-0">
+                  <p className="font-medium text-sm">{t(option.labelKey)}</p>
+                  <p className="mt-0.5 text-muted-foreground text-xs leading-5">
+                    {t(option.descriptionKey)}
+                  </p>
+                </div>
+              </div>
+            </TabsContent>
+          );
+        })}
+      </Tabs>
+    </div>
+  );
+}

package/src/components/ui/custom/workspace-access/workspace-access-invite-dialog.test.tsx

@@ -0,0 +1,134 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { WorkspaceAccessInviteDialog } from './workspace-access-invite-dialog';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, number>) =>
+    values?.count === undefined ? key : `${values.count} ${key}`,
+}));
+
+describe('WorkspaceAccessInviteDialog', () => {
+  it('selects multiple workspace roles before the invitation is sent', () => {
+    const props = {
+      accessPreset: 'member',
+      canManageRoles: true,
+      confirmDefaultAdminMigration: false,
+      defaultAdminEnabled: false,
+      emails: 'editor@example.com',
+      isSubmitting: false,
+      joinedMemberCount: 1,
+      noRoleLabel: 'No assigned roles',
+      onAccessPresetChange: vi.fn(),
+      onConfirmDefaultAdminMigrationChange: vi.fn(),
+      onEmailsChange: vi.fn(),
+      onOpenChange: vi.fn(),
+      onRoleIdsChange: vi.fn(),
+      onSubmit: vi.fn(),
+      open: true,
+      roleIds: [],
+      roles: [
+        { id: 'role-editor', name: 'Editor' },
+        { id: 'role-reviewer', name: 'Reviewer' },
+      ],
+    } as ComponentProps<typeof WorkspaceAccessInviteDialog> & {
+      noRoleLabel: string;
+      onRoleIdsChange: (roleIds: string[]) => void;
+      roleIds: string[];
+      roles: Array<{ id: string; name: string }>;
+    };
+
+    const { rerender } = render(<WorkspaceAccessInviteDialog {...props} />);
+
+    expect(
+      screen.getByRole('tab', {
+        name: 'ws-members.invite_access_member_tab',
+      })
+    ).toHaveAttribute('data-state', 'active');
+    expect(screen.getByText('ws-members.role-placeholder')).toBeDefined();
+    expect(
+      screen.getByPlaceholderText('ws-members.invite_roles_search')
+    ).toBeDefined();
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Editor' }));
+    expect(props.onRoleIdsChange).toHaveBeenLastCalledWith(['role-editor']);
+
+    rerender(
+      <WorkspaceAccessInviteDialog {...props} roleIds={['role-editor']} />
+    );
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Reviewer' }));
+    expect(props.onRoleIdsChange).toHaveBeenLastCalledWith([
+      'role-editor',
+      'role-reviewer',
+    ]);
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Editor' }));
+    expect(props.onRoleIdsChange).toHaveBeenLastCalledWith([]);
+
+    fireEvent.mouseDown(
+      screen.getByRole('tab', {
+        name: 'ws-members.invite_access_guest_tab',
+      })
+    );
+    expect(props.onAccessPresetChange).toHaveBeenLastCalledWith('guest');
+
+    rerender(
+      <WorkspaceAccessInviteDialog
+        {...props}
+        accessPreset="guest"
+        roleIds={[]}
+      />
+    );
+    expect(screen.queryByRole('checkbox', { name: 'Editor' })).toBeNull();
+  });
+
+  it('filters roles, clears the selection, and lets the role section collapse', () => {
+    const onRoleIdsChange = vi.fn();
+
+    render(
+      <WorkspaceAccessInviteDialog
+        accessPreset="member"
+        canManageRoles
+        confirmDefaultAdminMigration={false}
+        defaultAdminEnabled={false}
+        emails="editor@example.com"
+        isSubmitting={false}
+        joinedMemberCount={1}
+        noRoleLabel="No assigned roles"
+        onAccessPresetChange={vi.fn()}
+        onConfirmDefaultAdminMigrationChange={vi.fn()}
+        onEmailsChange={vi.fn()}
+        onOpenChange={vi.fn()}
+        onRoleIdsChange={onRoleIdsChange}
+        onSubmit={vi.fn()}
+        open
+        roleIds={['role-editor', 'role-reviewer']}
+        roles={[
+          { id: 'role-editor', name: 'Editor' },
+          { id: 'role-reviewer', name: 'Reviewer' },
+        ]}
+      />
+    );
+
+    fireEvent.change(
+      screen.getByPlaceholderText('ws-members.invite_roles_search'),
+      { target: { value: 'review' } }
+    );
+    expect(screen.queryByRole('checkbox', { name: 'Editor' })).toBeNull();
+    expect(screen.getByRole('checkbox', { name: 'Reviewer' })).toBeDefined();
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'ws-members.clear_all_roles' })
+    );
+    expect(onRoleIdsChange).toHaveBeenLastCalledWith([]);
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /ws-members\.role-placeholder/,
+      })
+    );
+    expect(
+      screen.queryByPlaceholderText('ws-members.invite_roles_search')
+    ).toBeNull();
+  });
+});