When upload has errors show them to user

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+* Upload errors are rendered on screen instead of console ([#143](https://github.com/i-VRESSE/workflow-builder/pull/143))
+* In table moved buttons from last to first column ([#141](https://github.com/i-VRESSE/workflow-builder/issues/141))
+
 ## @i-vresse/wb-core 2.0.0 - 2024-03-18
 
 ### Removed

apps/haddock3-submit/src/useSubmit.tsx

@@ -6,11 +6,11 @@ interface Data extends IWorkflow {
   files: IFiles
 }
 
-interface Subission {
+interface Submission {
   progressUrl: string
 }
 
-async function submit2api (url: string, data: Data): Promise<Subission> {
+async function submit2api (url: string, data: Data): Promise<Submission> {
   const resp = await fetch(
     url,
     {
@@ -38,7 +38,7 @@ export const useSubmit: (url?: string) => () => Promise<void> = (url = '/api/run
       {
         pending: 'Submitting workfow ...',
         success: {
-          render ({ data }: { data: Subission}) {
+          render ({ data }: { data: Submission}) {
             // TODO instead of presenting link could redirect to progress page
             return (
               <div>

packages/core/src/WorkflowUploadButton.tsx

@@ -1,40 +1,77 @@
 import React, { useRef } from 'react'
-import { toast } from 'react-toastify'
+import { UpdateOptions, toast } from 'react-toastify'
 import { useWorkflow } from './store'
+import { ValidationError, flattenValidationErrors } from './validate'
+
+function ErrorsList ({ error }: { error: ValidationError }): JSX.Element {
+  return (
+    <>
+      <div>Workflow archive failed to load.</div>
+      <ul style={{ maxHeight: '20rem', overflow: 'auto' }}>
+        {flattenValidationErrors(error).map((message, index) => (
+          <li key={index}>{message}</li>
+        ))}
+      </ul>
+    </>
+  )
+}
 
 export const WorkflowUploadButton = (): JSX.Element => {
   const uploadRef = useRef<HTMLInputElement>(null)
   const { loadWorkflowArchive } = useWorkflow()
 
-  async function uploadWorkflow (event: React.ChangeEvent<HTMLInputElement>): Promise<void> {
+  async function uploadWorkflow (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): Promise<void> {
     if (event.target.files == null) {
       return
     }
     const file = event.target.files[0]
     const url = URL.createObjectURL(file)
-    await toast.promise(
-      async () => {
-        try {
-          await loadWorkflowArchive(url)
-        } finally {
-          URL.revokeObjectURL(url)
-        }
-      },
-      {
-        pending: 'Loading workfow ...',
-        success: 'Workflow loaded',
-        error: {
-          render ({ data }) {
-            console.error(data)
-            return 'Workflow archive failed to load. See DevTools (F12) console for errors.'
-          }
-        }
+    const toastId = toast.loading('Loading workfow ...')
+    try {
+      await loadWorkflowArchive(url)
+      toast.update(toastId, {
+        type: 'success',
+        render: 'Workflow loaded',
+        autoClose: 1000,
+        isLoading: false,
+        progress: 1
+      })
+      toast.dismiss(toastId)
+    } catch (error) {
+      const opts: Partial<UpdateOptions> = {
+        type: 'error',
+        autoClose: false,
+        closeOnClick: true,
+        closeButton: true,
+        isLoading: false,
+        progress: 1
+      }
+      if (error instanceof ValidationError) {
+        toast.update(toastId, {
+          ...opts,
+          render: <ErrorsList error={error} />
+        })
+      } else {
+        console.error(error)
+        toast.update(toastId, {
+          ...opts,
+          render:
+            'Workflow archive failed to load. See DevTools (F12) console for errors.'
+        })
       }
-    )
+    } finally {
+      URL.revokeObjectURL(url)
+    }
   }
 
   return (
-    <button className='btn btn-light' onClick={() => uploadRef.current?.click()} title='Upload an archive'>
+    <button
+      className='btn btn-light'
+      onClick={() => uploadRef.current?.click()}
+      title='Upload an archive'
+    >
       Upload
       <input
         type='file'

packages/core/src/validate.ts

@@ -179,3 +179,21 @@ export function validateCatalog (catalog: ICatalog): Errors {
   // TODO validate non schema fields
   return [...globalErrors, ...nodesErrors.flat(1)]
 }
+
+export function flattenValidationErrors (error: ValidationError): string[] {
+  return error.errors.map((e) => {
+    if (e.workflowPath === undefined || e.message === undefined) {
+      return ''
+    }
+    let message = e.message
+    message = `Error in ${e.workflowPath}${e.instancePath}: ${message}`
+    if (typeof e.params.additionalProperty === 'string') {
+      message += `: ${e.params.additionalProperty}`
+    }
+    if (Array.isArray(e.params.allowedValues)) {
+      const values = e.params.allowedValues.map(d => String(d))
+      message += `: ${values.join(', ')}`
+    }
+    return message
+  }).filter(m => m !== '')
+}

packages/core/src/workflow.ts

@@ -13,7 +13,6 @@ export async function loadWorkflowArchive (archiveURL: string, catalog: ICatalog
   const workflow = parseWorkflow(tomlstring, catalog)
   const errors = await validateWorkflow(workflow, catalog, files)
   if (errors.length > 0) {
-    console.error(errors)
     throw new ValidationError('Invalid workflow loaded', errors)
   }
   return {