Merge pull request #1190 from DouglasNeuroInformatics/zod4-upload

Zod4 upload

Author: joshunrau

apps/api/package.json

@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "rm -rf dist && NODE_ENV=production libnest build -c libnest.config.ts",
-    "db:generate": "prisma generate",
+    "db:generate": "prisma generate --no-hints",
     "dev": "NODE_ENV=development NODE_OPTIONS='--conditions=development' env-cmd -f ../../.env libnest dev -c libnest.config.ts",
     "dev:test": "NODE_ENV=test env-cmd -f ../../.env libnest dev -c libnest.config.ts",
     "format": "prettier --write src",

apps/gateway/package.json

@@ -8,7 +8,7 @@
     "build": "rm -rf dist && pnpm build:client && pnpm build:server && NODE_ENV=production tsx scripts/build.ts",
     "build:client": "vite build --ssrManifest --outDir dist/client",
     "build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server",
-    "db:generate": "prisma generate",
+    "db:generate": "prisma generate --no-hints",
     "db:push": "env-cmd --silent -f ../../.env prisma db push --skip-generate",
     "dev": "NODE_ENV=development env-cmd -f ../../.env tsx scripts/dev.ts && env-cmd -f ../../.env node dist/main.js",
     "dev:test": "NODE_ENV=test env-cmd -f ../../.env tsx scripts/dev.ts && env-cmd -f ../../.env node dist/main.js",

apps/web/package.json

@@ -49,6 +49,7 @@
     "react": "workspace:react__19.x@*",
     "react-dom": "workspace:react-dom__19.x@*",
     "recharts": "^2.15.2",
+    "serialize-error": "catalog:",
     "ts-pattern": "workspace:ts-pattern__5.x@*",
     "type-fest": "workspace:type-fest__4.x@*",
     "xlsx": "^0.18.5",

apps/web/src/routes/_app/upload/$instrumentId.tsx

@@ -1,17 +1,18 @@
 import React, { useState } from 'react';
 
-import { isZodType } from '@douglasneuroinformatics/libjs';
+import { serializeError } from '@douglasneuroinformatics/libjs';
 import { Button, FileDropzone, Heading, Spinner } from '@douglasneuroinformatics/libui/components';
 import { useDownload, useNotificationsStore, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { AnyUnilingualFormInstrument } from '@opendatacapture/runtime-core';
 import { createFileRoute } from '@tanstack/react-router';
-import { BadgeHelpIcon, CircleAlertIcon, DownloadIcon } from 'lucide-react';
+import { BadgeHelpIcon, DownloadIcon } from 'lucide-react';
+import z from 'zod/v4';
 
 import { PageHeader } from '@/components/PageHeader';
 import { useInstrument } from '@/hooks/useInstrument';
 import { useUploadInstrumentRecordsMutation } from '@/hooks/useUploadInstrumentRecordsMutation';
 import { useAppStore } from '@/store';
-import { createUploadTemplateCSV, processInstrumentCSV, reformatInstrumentData } from '@/utils/upload';
+import { createUploadTemplateCSV, processInstrumentCSV, reformatInstrumentData, UploadError } from '@/utils/upload';
 
 const RouteComponent = () => {
   const [file, setFile] = useState<File | null>(null);
@@ -22,76 +23,109 @@ const RouteComponent = () => {
   const uploadInstrumentRecordsMutation = useUploadInstrumentRecordsMutation();
 
   const params = Route.useParams();
+  const { error } = Route.useSearch();
+  const navigate = Route.useNavigate();
+
   const instrument = useInstrument(params.instrumentId) as (AnyUnilingualFormInstrument & { id: string }) | null;
   const { t } = useTranslation();
 
   const handleTemplateDownload = () => {
     try {
-      const { content, fileName } = createUploadTemplateCSV(instrument!);
-      void download(fileName, content);
+      const { content, filename } = createUploadTemplateCSV(instrument!);
+      void download(filename, content);
     } catch (error) {
-      if (error instanceof Error) {
-        addNotification({
-          message: t({
-            en: `Error occurred downloading sample template with the following message:  ${error.message}`,
-            fr: `Un occurence d'un erreur quand le csv document est telecharger avec la message suivant: ${error.message}`
-          }),
-          type: 'error'
-        });
-      } else {
-        addNotification({
-          message: t({
-            en: `Error occurred downloading sample template.`,
-            fr: `Un occurence d'un erreur quand le csv est telecharger. `
-          }),
-          type: 'error'
-        });
-      }
       console.error(error);
+      void navigate({
+        search: {
+          error: {
+            description: error instanceof UploadError ? error.description : undefined,
+            title: {
+              en: `Error Occurred Downloading Sample Template`,
+              fr: `Une erreur s'est produite lors du téléchargement du CSV`
+            }
+          }
+        },
+        to: '.'
+      });
     }
   };
 
   const handleInstrumentCSV = async () => {
     try {
       setIsLoading(true);
       const processedDataResult = await processInstrumentCSV(file!, instrument!);
-      if (processedDataResult.success) {
-        const reformattedData = reformatInstrumentData({
-          currentGroup,
-          data: processedDataResult.value,
-          instrument: instrument!
-        });
-        if (reformattedData.records.length > 1000) {
-          addNotification({
-            message: t({
-              en: 'Lots of entries loading, please wait...',
-              fr: 'Beaucoup de données, veuillez patienter...'
-            }),
-            type: 'info'
-          });
-        }
-        await uploadInstrumentRecordsMutation.mutateAsync(reformattedData);
-      } else {
+      const reformattedData = reformatInstrumentData({
+        currentGroup,
+        data: processedDataResult,
+        instrument: instrument!
+      });
+      if (reformattedData.records.length > 1000) {
         addNotification({
-          message: processedDataResult.message,
-          type: 'error'
+          message: t({
+            en: 'Lots of entries loading, please wait...',
+            fr: 'Beaucoup de données, veuillez patienter...'
+          }),
+          type: 'info'
         });
       }
+      await uploadInstrumentRecordsMutation.mutateAsync(reformattedData);
       setFile(null);
     } catch (error) {
-      if (error instanceof Error)
-        addNotification({
-          message: t({
-            en: `An error has happened within the request: '${error.message}'`,
-            fr: `Une erreur s'est produite lors du téléversement :'${error.message}'.`
-          }),
-          type: 'error'
-        });
+      console.error(error);
+      void navigate({
+        search: {
+          error: {
+            description: error instanceof UploadError ? error.description : undefined,
+            title: {
+              en: `An error has happened within the request`,
+              fr: `Une erreur s'est produite lors du téléversement`
+            }
+          }
+        },
+        to: '.'
+      });
     } finally {
       setIsLoading(false);
     }
   };
 
+  if (error) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center gap-1 p-3 text-center">
+        <h3 className="text-2xl font-extrabold tracking-tight sm:text-3xl">{t(error.title)}</h3>
+        {error.description && (
+          <p className="text-muted-foreground mt-2 max-w-prose text-sm sm:text-base">{t(error.description)}</p>
+        )}
+        <div className="mt-6 flex gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              void download('error.json', JSON.stringify(serializeError(error), null, 2));
+            }}
+          >
+            {t({
+              en: 'Error Report',
+              fr: "Rapport d'erreur"
+            })}
+          </Button>
+          <Button
+            type="button"
+            variant="primary"
+            onClick={() => {
+              void navigate({ to: '.' });
+            }}
+          >
+            {t({
+              en: 'Try Again',
+              fr: 'Réessayer'
+            })}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
   if (!instrument) {
     return null;
   }
@@ -107,56 +141,44 @@ const RouteComponent = () => {
         </Heading>
       </PageHeader>
       {!isLoading ? (
-        isZodType(instrument.validationSchema, { version: 4 }) ? (
-          <div className="mb-2 flex items-center gap-2 rounded-md bg-red-300 p-4 dark:bg-red-800">
-            <CircleAlertIcon style={{ height: '20px', strokeWidth: '2px', width: '20px' }} />
-            <h5 className="font-medium tracking-tight">
-              {t({
-                en: 'Upload is Not Supported for Zod v4 Instruments',
-                fr: "Le téléchargement n'est pas pris en charge pour les instruments utilisant Zod v4"
-              })}
-            </h5>
-          </div>
-        ) : (
-          <div className="mx-auto flex w-full max-w-3xl grow flex-col justify-center">
-            <FileDropzone
-              acceptedFileTypes={{
-                'text/csv': ['.csv']
-              }}
-              className="flex h-80 w-full flex-col"
-              file={file}
-              setFile={setFile}
-            />
-            <div className="mt-4 flex justify-between space-x-2">
-              <Button disabled={!(file && instrument)} variant={'primary'} onClick={() => void handleInstrumentCSV()}>
-                {t('core.submit')}
+        <div className="mx-auto flex w-full max-w-3xl grow flex-col justify-center">
+          <FileDropzone
+            acceptedFileTypes={{
+              'text/csv': ['.csv']
+            }}
+            className="flex h-80 w-full flex-col"
+            file={file}
+            setFile={setFile}
+          />
+          <div className="mt-4 flex justify-between space-x-2">
+            <Button disabled={!(file && instrument)} variant={'primary'} onClick={() => void handleInstrumentCSV()}>
+              {t('core.submit')}
+            </Button>
+            <div className="flex justify-between space-x-1">
+              <Button className="gap-1" disabled={!instrument} variant={'primary'} onClick={handleTemplateDownload}>
+                <DownloadIcon />
+                {t({
+                  en: 'Download Template',
+                  fr: 'Télécharger le modèle'
+                })}
+              </Button>
+              <Button
+                className="gap-1"
+                disabled={!instrument}
+                variant={'primary'}
+                onClick={() => {
+                  window.open('https://opendatacapture.org/en/docs/guides/how-to-upload-data/');
+                }}
+              >
+                <BadgeHelpIcon />
+                {t({
+                  en: 'Help',
+                  fr: 'Aide'
+                })}
               </Button>
-              <div className="flex justify-between space-x-1">
-                <Button className="gap-1" disabled={!instrument} variant={'primary'} onClick={handleTemplateDownload}>
-                  <DownloadIcon />
-                  {t({
-                    en: 'Download Template',
-                    fr: 'Télécharger le modèle'
-                  })}
-                </Button>
-                <Button
-                  className="gap-1"
-                  disabled={!instrument}
-                  variant={'primary'}
-                  onClick={() => {
-                    window.open('https://opendatacapture.org/en/docs/guides/how-to-upload-data/');
-                  }}
-                >
-                  <BadgeHelpIcon />
-                  {t({
-                    en: 'Help',
-                    fr: 'Aide'
-                  })}
-                </Button>
-              </div>
             </div>
           </div>
-        )
+        </div>
       ) : (
         <>
           <div className="mx-auto flex w-full max-w-3xl grow flex-col justify-center">
@@ -175,5 +197,22 @@ const RouteComponent = () => {
 };
 
 export const Route = createFileRoute('/_app/upload/$instrumentId')({
-  component: RouteComponent
+  component: RouteComponent,
+  validateSearch: z.object({
+    error: z
+      .object({
+        description: z
+          .object({
+            en: z.string(),
+            fr: z.string()
+          })
+          .partial()
+          .optional(),
+        title: z.object({
+          en: z.string(),
+          fr: z.string()
+        })
+      })
+      .optional()
+  })
 });