Merge pull request #1089 from david-roper/improve-error-desc

Improve error desc and add help button to upload page

Author: joshunrau

apps/web/src/features/upload/pages/UploadPage.tsx

@@ -4,7 +4,7 @@ import { Button, FileDropzone, Heading, Spinner } from '@douglasneuroinformatics
 import { useDownload, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
 import type { AnyUnilingualFormInstrument } from '@opendatacapture/runtime-core';
-import { DownloadIcon } from 'lucide-react';
+import { BadgeHelpIcon, DownloadIcon } from 'lucide-react';
 import { useParams } from 'react-router-dom';
 
 import { PageHeader } from '@/components/PageHeader';
@@ -121,13 +121,29 @@ export const UploadPage = () => {
             <Button disabled={!(file && instrument)} variant={'primary'} onClick={handleInstrumentCSV}>
               {t('core.submit')}
             </Button>
-            <Button className="gap-1.5" disabled={!instrument} variant={'primary'} onClick={handleTemplateDownload}>
-              <DownloadIcon />
-              {t({
-                en: 'Download Template',
-                fr: 'Télécharger le modèle'
-              })}
-            </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>
       ) : (

apps/web/src/features/upload/utils.ts

@@ -534,7 +534,7 @@ export async function processInstrumentCSV(
       if (!headers?.length) {
         return resolve({ message: 'headers is undefined or empty array', success: false });
       }
-
+      let rowNumber = 1;
       for (const elements of dataLines) {
         const jsonLine: { [key: string]: unknown } = {};
         for (let j = 0; j < headers.length; j++) {
@@ -577,7 +577,10 @@ export async function processInstrumentCSV(
             interpreterResult = interpretZodValue(rawValue, typeNameResult.typeName, typeNameResult.isOptional);
           }
           if (!interpreterResult.success) {
-            return resolve({ message: `${interpreterResult.message} at column name: '${key}'`, success: false });
+            return resolve({
+              message: `${interpreterResult.message} at column name: '${key}' and row number ${rowNumber}`,
+              success: false
+            });
           }
           jsonLine[headers[j]!] = interpreterResult.value;
         }
@@ -591,6 +594,7 @@ export async function processInstrumentCSV(
           return resolve({ message: zodIssues.join(), success: false });
         }
         result.push(zodCheck.data);
+        rowNumber++;
       }
       resolve({ success: true, value: result });
     };