Merge remote-tracking branch 'origin/main' into spike/react-19

apps/remix/app/components/general/app-command-menu.types.ts

@@ -0,0 +1,36 @@
+import type { MessageDescriptor } from '@lingui/core';
+import type { LucideIcon } from 'lucide-react';
+
+export type PromptItem = {
+  id: string;
+  label: string | MessageDescriptor;
+  sublabel?: string;
+  path?: string;
+  onAction?: () => void;
+  icon?: LucideIcon;
+  initials?: string;
+  shortcut?: string;
+  isChecked?: boolean;
+};
+
+export type PromptCategory = {
+  id: string;
+  label: MessageDescriptor;
+  items: PromptItem[];
+  /**
+   * The number of actual results, excluding utility rows such as the
+   * "View all results" link.
+   */
+  count: number;
+  /**
+   * The count shown on the category chip, or null to not show a chip at all.
+   * Categories which only contain hardcoded page links have no chip.
+   */
+  chipCount: number | null;
+  isCapped: boolean;
+  /**
+   * Global admin categories are marked with a globe icon to distinguish them
+   * from the equally named personal categories.
+   */
+  isGlobal: boolean;
+};

apps/remix/app/components/general/direct-template/direct-template-invalid-page.tsx

@@ -0,0 +1,23 @@
+import { Trans } from '@lingui/react/macro';
+import { AlertTriangleIcon } from 'lucide-react';
+
+export const DirectTemplateInvalidPageView = () => {
+  return (
+    <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
+      <div>
+        <AlertTriangleIcon className="h-10 w-10 text-destructive" />
+
+        <h1 className="mt-4 font-semibold text-3xl">
+          <Trans>Invalid direct link template</Trans>
+        </h1>
+
+        <p className="mt-2 text-muted-foreground text-sm">
+          <Trans>
+            This direct link template cannot be used because one or more signers do not have a signature field assigned.
+            Please contact the sender to update the template.
+          </Trans>
+        </p>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -54,6 +54,7 @@ import { useCurrentTeam } from '~/providers/team';
 
 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
 import { EnvelopeEditorFieldsPageRenderer } from './envelope-editor-fields-page-renderer';
+import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 import { EnvelopeRecipientSelector } from './envelope-recipient-selector';
 
@@ -238,6 +239,8 @@ export const EnvelopeEditorFieldsPage = () => {
           }
         />
 
+        <EnvelopeEditorInvalidDirectTemplateAlert />
+
         {/* Document View */}
         <div className="mt-4 flex h-full flex-col items-center justify-center">
           {envelope.recipients.length === 0 && (

apps/remix/app/components/general/envelope-editor/envelope-editor-invalid-direct-template-alert.tsx

@@ -0,0 +1,55 @@
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Trans } from '@lingui/react/macro';
+import { useMemo } from 'react';
+
+export type EnvelopeEditorInvalidDirectTemplateAlertProps = {
+  className?: string;
+};
+
+/**
+ * Warns that a direct link template cannot be used because one or more signers
+ * are missing a signature field.
+ */
+export const EnvelopeEditorInvalidDirectTemplateAlert = ({
+  className,
+}: EnvelopeEditorInvalidDirectTemplateAlertProps) => {
+  const { envelope, isTemplate } = useCurrentEnvelopeEditor();
+
+  const signersMissingSignatureFields = useMemo(() => {
+    if (!isTemplate || !envelope.directLink?.enabled) {
+      return [];
+    }
+
+    return getRecipientsWithMissingFields(envelope.recipients, envelope.fields);
+  }, [isTemplate, envelope.directLink, envelope.recipients, envelope.fields]);
+
+  if (signersMissingSignatureFields.length === 0) {
+    return null;
+  }
+
+  return (
+    <Alert
+      variant="destructive"
+      className={cn('mx-auto w-full max-w-[800px] flex-row items-start gap-3 rounded-sm', className)}
+    >
+      <AlertTitle>
+        <Trans>Invalid direct link template</Trans>
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans>
+          Recipients cannot use this direct link template because the following signers are missing a signature field
+        </Trans>
+
+        <ul className="list-disc pl-5">
+          {signersMissingSignatureFields.map((recipient, i) => (
+            <li key={recipient.id}>{recipient.email || recipient.name || `Recipient ${i + 1}`}</li>
+          ))}
+        </ul>
+      </AlertDescription>
+    </Alert>
+  );
+};

apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx

@@ -22,6 +22,7 @@ import { match } from 'ts-pattern';
 import { EnvelopeGenericPageRenderer } from '~/components/general/envelope-editor/envelope-generic-page-renderer';
 import { EnvelopePdfViewer } from '~/components/general/pdf-viewer/envelope-pdf-viewer';
 
+import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 
 export const EnvelopeEditorPreviewPage = () => {
@@ -228,6 +229,8 @@ export const EnvelopeEditorPreviewPage = () => {
           {/* Horizontal envelope item selector */}
           <EnvelopeRendererFileSelector className="px-0" fields={editorFields.localFields} />
 
+          <EnvelopeEditorInvalidDirectTemplateAlert className="mb-4" />
+
           <Alert variant="warning" className="mx-auto max-w-[800px]">
             <AlertTitle>
               <Trans>Preview Mode</Trans>

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -7,7 +7,12 @@ import { useOptionalSession } from '@documenso/lib/client-only/providers/session
 import type { TDetectedRecipientSchema } from '@documenso/lib/server-only/ai/envelope/detect-recipients/schema';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
-import { canRecipientBeModified as utilCanRecipientBeModified } from '@documenso/lib/utils/recipients';
+import {
+  isAssistantLastSigner,
+  isCcRecipient,
+  normalizeRecipientSigningOrders,
+  canRecipientBeModified as utilCanRecipientBeModified,
+} from '@documenso/lib/utils/recipients';
 import { trpc } from '@documenso/trpc/react';
 import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
 import {
@@ -156,16 +161,12 @@ export const EnvelopeEditorRecipientForm = () => {
   }, [watchedSigners]);
 
   const normalizeSigningOrders = (signers: typeof watchedSigners) => {
-    return signers
-      .sort((a, b) => (a.signingOrder ?? 0) - (b.signingOrder ?? 0))
-      .map((signer, index) => ({ ...signer, signingOrder: index + 1 }));
+    return normalizeRecipientSigningOrders(signers, (signer) => canRecipientBeModified(signer.id));
   };
 
-  const {
-    append: appendSigner,
-    fields: signers,
-    remove: removeSigner,
-  } = useFieldArray({
+  const activeRecipientCount = watchedSigners.filter((signer) => !isCcRecipient(signer)).length;
+
+  const { fields: signers, remove: removeSigner } = useFieldArray({
     control,
     name: 'signers',
     keyName: 'nativeId',
@@ -208,14 +209,31 @@ export const EnvelopeEditorRecipientForm = () => {
     return utilCanRecipientBeModified(recipient, fields);
   };
 
+  const appendNormalizedSigner = (signer: (typeof watchedSigners)[number], shouldFocus = false) => {
+    const updatedSigners = normalizeSigningOrders([...form.getValues('signers'), signer]);
+
+    form.setValue('signers', updatedSigners, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+
+    if (shouldFocus) {
+      const signerIndex = updatedSigners.findIndex((updatedSigner) => updatedSigner.formId === signer.formId);
+
+      if (signerIndex !== -1) {
+        requestAnimationFrame(() => form.setFocus(`signers.${signerIndex}.email`));
+      }
+    }
+  };
+
   const onAddSigner = () => {
-    appendSigner({
+    appendNormalizedSigner({
       formId: nanoid(12),
       name: '',
       email: '',
       role: RecipientRole.SIGNER,
       actionAuth: [],
-      signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
+      signingOrder: activeRecipientCount + 1,
     });
   };
 
@@ -323,18 +341,16 @@ export const EnvelopeEditorRecipientForm = () => {
 
       form.setFocus(`signers.${emptySignerIndex}.email`);
     } else {
-      appendSigner(
+      appendNormalizedSigner(
         {
           formId: nanoid(12),
           name: currentEditorName ?? '',
           email: currentEditorEmail ?? '',
           role: RecipientRole.SIGNER,
           actionAuth: [],
-          signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
-        },
-        {
-          shouldFocus: true,
+          signingOrder: activeRecipientCount + 1,
         },
+        true,
       );
 
       void form.trigger('signers');
@@ -369,18 +385,14 @@ export const EnvelopeEditorRecipientForm = () => {
 
       items.splice(insertIndex, 0, reorderedSigner);
 
-      const updatedSigners = items.map((signer, index) => ({
-        ...signer,
-        signingOrder: !canRecipientBeModified(signer.id) ? signer.signingOrder : index + 1,
-      }));
+      const updatedSigners = normalizeSigningOrders(items);
 
       form.setValue('signers', updatedSigners, {
         shouldValidate: true,
         shouldDirty: true,
       });
 
-      const lastSigner = updatedSigners[updatedSigners.length - 1];
-      if (lastSigner.role === RecipientRole.ASSISTANT) {
+      if (isAssistantLastSigner(updatedSigners)) {
         toast({
           title: t`Warning: Assistant as last signer`,
           description: t`Having an assistant as the last signer means they will be unable to take any action as there are no subsequent signers to assist.`,
@@ -411,18 +423,19 @@ export const EnvelopeEditorRecipientForm = () => {
         return;
       }
 
-      const updatedSigners = currentSigners.map((signer, idx) => ({
-        ...signer,
-        role: idx === index ? role : signer.role,
-        signingOrder: !canRecipientBeModified(signer.id) ? signer.signingOrder : idx + 1,
-      }));
+      const updatedSigners = normalizeSigningOrders(
+        currentSigners.map((signer, idx) => ({
+          ...signer,
+          role: idx === index ? role : signer.role,
+        })),
+      );
 
       form.setValue('signers', updatedSigners, {
         shouldValidate: true,
         shouldDirty: true,
       });
 
-      if (role === RecipientRole.ASSISTANT && index === updatedSigners.length - 1) {
+      if (role === RecipientRole.ASSISTANT && isAssistantLastSigner(updatedSigners)) {
         toast({
           title: t`Warning: Assistant as last signer`,
           description: t`Having an assistant as the last signer means they will be unable to take any action as there are no subsequent signers to assist.`,
@@ -447,22 +460,30 @@ export const EnvelopeEditorRecipientForm = () => {
       const currentSigners = form.getValues('signers');
       const signer = currentSigners[index];
 
-      // Remove signer from current position and insert at new position
-      const remainingSigners = currentSigners.filter((_, idx) => idx !== index);
-      const newPosition = Math.min(Math.max(0, newOrder - 1), currentSigners.length - 1);
-      remainingSigners.splice(newPosition, 0, signer);
+      if (isCcRecipient(signer)) {
+        return;
+      }
 
-      const updatedSigners = remainingSigners.map((s, idx) => ({
-        ...s,
-        signingOrder: !canRecipientBeModified(s.id) ? s.signingOrder : idx + 1,
-      }));
+      const nonCcSigners = currentSigners.filter((s) => !isCcRecipient(s));
+      const ccSigners = currentSigners.filter((s) => isCcRecipient(s));
+      const currentSigningOrderIndex = nonCcSigners.findIndex((s) => s.formId === signer.formId);
+
+      if (currentSigningOrderIndex === -1) {
+        return;
+      }
+
+      const [reorderedSigner] = nonCcSigners.splice(currentSigningOrderIndex, 1);
+      const newPosition = Math.min(Math.max(0, newOrder - 1), nonCcSigners.length);
+      nonCcSigners.splice(newPosition, 0, reorderedSigner);
+
+      const updatedSigners = normalizeSigningOrders([...nonCcSigners, ...ccSigners]);
 
       form.setValue('signers', updatedSigners, {
         shouldValidate: true,
         shouldDirty: true,
       });
 
-      if (signer.role === RecipientRole.ASSISTANT && newPosition === remainingSigners.length - 1) {
+      if (signer.role === RecipientRole.ASSISTANT && isAssistantLastSigner(updatedSigners)) {
         toast({
           title: t`Warning: Assistant as last signer`,
           description: t`Having an assistant as the last signer means they will be unable to take any action as there are no subsequent signers to assist.`,
@@ -476,10 +497,12 @@ export const EnvelopeEditorRecipientForm = () => {
     setShowSigningOrderConfirmation(false);
 
     const currentSigners = form.getValues('signers');
-    const updatedSigners = currentSigners.map((signer) => ({
-      ...signer,
-      role: signer.role === RecipientRole.ASSISTANT ? RecipientRole.SIGNER : signer.role,
-    }));
+    const updatedSigners = normalizeSigningOrders(
+      currentSigners.map((signer) => ({
+        ...signer,
+        role: signer.role === RecipientRole.ASSISTANT ? RecipientRole.SIGNER : signer.role,
+      })),
+    );
 
     form.setValue('signers', updatedSigners, {
       shouldValidate: true,
@@ -796,6 +819,7 @@ export const EnvelopeEditorRecipientForm = () => {
                         isDragDisabled={
                           !isSigningOrderSequential ||
                           isSubmitting ||
+                          isCcRecipient(signer) ||
                           !canRecipientBeModified(signer.id) ||
                           !signer.signingOrder
                         }
@@ -819,7 +843,11 @@ export const EnvelopeEditorRecipientForm = () => {
                               })}
                             >
                               <div className="flex flex-row items-center gap-x-2">
-                                {isSigningOrderSequential && (
+                                {isSigningOrderSequential && isCcRecipient(signer) && (
+                                  <div className="mt-auto h-10 w-[4.25rem] flex-shrink-0" />
+                                )}
+
+                                {isSigningOrderSequential && !isCcRecipient(signer) && (
                                   <FormField
                                     control={form.control}
                                     name={`signers.${index}.signingOrder`}
@@ -835,7 +863,7 @@ export const EnvelopeEditorRecipientForm = () => {
                                         <FormControl>
                                           <Input
                                             type="number"
-                                            max={signers.length}
+                                            max={activeRecipientCount}
                                             data-testid="signing-order-input"
                                             className={cn(
                                               'w-10 text-center',
@@ -976,7 +1004,6 @@ export const EnvelopeEditorRecipientForm = () => {
                                           onValueChange={(value) => {
                                             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                                             handleRoleChange(index, value as RecipientRole);
-                                            field.onChange(value);
                                           }}
                                           disabled={
                                             snapshot.isDragging || isSubmitting || !canRecipientBeModified(signer.id)

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -26,6 +26,7 @@ import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from
 
 import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog';
 
+import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeEditorRecipientForm } from './envelope-editor-recipient-form';
 import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
 
@@ -449,6 +450,9 @@ export const EnvelopeEditorUploadPage = () => {
   return (
     <div className="mx-auto max-w-4xl space-y-6 p-8">
       <input {...getReplaceInputProps()} />
+
+      <EnvelopeEditorInvalidDirectTemplateAlert className="max-w-none" />
+
       <Card backdropBlur={false} className="border">
         <CardHeader className="pb-3">
           <CardTitle>

apps/remix/app/components/general/use-admin-search-categories.ts

@@ -0,0 +1,144 @@
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION, SKIP_QUERY_BATCH_META } from '@documenso/lib/constants/trpc';
+import { isAdmin } from '@documenso/lib/utils/is-admin';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import type { TAdminSearchResultType } from '@documenso/trpc/server/admin-router/admin-search.types';
+import { ADMIN_SEARCH_MAX_QUERY_LENGTH } from '@documenso/trpc/server/admin-router/admin-search.types';
+
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { keepPreviousData } from '@tanstack/react-query';
+import type { LucideIcon } from 'lucide-react';
+import { ArrowRightIcon, Building2Icon, CreditCardIcon, FileTextIcon, UserIcon, UsersIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import type { PromptCategory, PromptItem } from './app-command-menu.types';
+
+/**
+ * The maximum number of results the admin search returns per resource type.
+ */
+const ADMIN_SEARCH_RESULTS_CAP = 5;
+
+const ADMIN_GROUP_LABELS: Record<TAdminSearchResultType, MessageDescriptor> = {
+  document: msg`Documents`,
+  user: msg`Users`,
+  organisation: msg`Organisations`,
+  team: msg`Teams`,
+  recipient: msg`Recipients`,
+  subscription: msg`Subscriptions`,
+};
+
+const ADMIN_GROUP_ICONS: Record<TAdminSearchResultType, LucideIcon> = {
+  document: FileTextIcon,
+  user: UserIcon,
+  organisation: Building2Icon,
+  team: UsersIcon,
+  recipient: UserIcon,
+  subscription: CreditCardIcon,
+};
+
+/**
+ * Admin list pages which support prefilling their search from the URL, used
+ * for the "View all results" links on capped groups. Teams, recipients and
+ * subscriptions have no admin list pages.
+ */
+const ADMIN_GROUP_LIST_PATHS: Partial<Record<TAdminSearchResultType, (_query: string) => string>> = {
+  document: (query) => `/admin/documents?term=${encodeURIComponent(query)}`,
+  user: (query) => `/admin/users?search=${encodeURIComponent(query)}`,
+  organisation: (query) => `/admin/organisations?query=${encodeURIComponent(query)}`,
+};
+
+export type UseAdminSearchCategoriesOptions = {
+  /**
+   * The trimmed, debounced search query.
+   */
+  query: string;
+  open: boolean;
+};
+
+/**
+ * The isolated admin portion of the command prompt: searches every admin
+ * resource and maps the results to prompt categories marked as global.
+ *
+ * Returns no categories and never queries for non admin users. The admin
+ * search endpoint is additionally guarded server side by the admin procedure.
+ */
+export const useAdminSearchCategories = ({ query, open }: UseAdminSearchCategoriesOptions) => {
+  const { user } = useSession();
+
+  const isUserAdmin = isAdmin(user);
+
+  // Admin searches hit every resource table, so require a longer query unless
+  // it is a number, which could be a resource ID of any length. Queries over
+  // the endpoint's length limit are skipped entirely instead of being sent
+  // and rejected.
+  const hasValidAdminSearch =
+    isUserAdmin && query.length <= ADMIN_SEARCH_MAX_QUERY_LENGTH && (query.length > 3 || /^\d+$/.test(query));
+
+  const {
+    data: adminSearchData,
+    isFetching,
+    isError,
+  } = trpcReact.admin.search.useQuery(
+    {
+      query,
+    },
+    {
+      enabled: open && hasValidAdminSearch,
+      placeholderData: keepPreviousData,
+      // Retyping is the retry in a search-as-you-type flow: fail fast so the
+      // prompt can surface an honest error state instead of retrying.
+      retry: false,
+      ...SKIP_QUERY_BATCH_META,
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    },
+  );
+
+  const categories = useMemo((): PromptCategory[] => {
+    if (!hasValidAdminSearch || !adminSearchData) {
+      return [];
+    }
+
+    return adminSearchData.groups.map((group) => {
+      const isCapped = group.results.length >= ADMIN_SEARCH_RESULTS_CAP;
+      const buildListPath = ADMIN_GROUP_LIST_PATHS[group.type];
+
+      const items: PromptItem[] = group.results.map((result) => ({
+        id: `admin-${group.type}-${result.value}`,
+        label: result.label,
+        sublabel: result.sublabel,
+        path: result.path,
+        icon: ADMIN_GROUP_ICONS[group.type],
+        initials: group.type === 'user' || group.type === 'recipient' ? extractInitials(result.label) : undefined,
+      }));
+
+      // Capped groups link to the full admin list page with the search
+      // prefilled so the cap is never a dead end.
+      if (isCapped && buildListPath) {
+        items.push({
+          id: `admin-${group.type}-view-all`,
+          label: msg`View all results`,
+          path: buildListPath(query),
+          icon: ArrowRightIcon,
+        });
+      }
+
+      return {
+        id: `admin-${group.type}`,
+        label: ADMIN_GROUP_LABELS[group.type],
+        items,
+        count: group.results.length,
+        chipCount: group.results.length,
+        isCapped,
+        isGlobal: true,
+      };
+    });
+  }, [hasValidAdminSearch, adminSearchData, query]);
+
+  return {
+    isUserAdmin,
+    categories,
+    isFetching,
+    isError,
+  };
+};