From 5fa4546ed427862706524ea356df085caa341254 Mon Sep 17 00:00:00 2001
From: Stefan Verhoeven <stefan.verhoeven@gmail.com>
Date: Fri, 22 Mar 2024 08:22:52 +0100
Subject: [PATCH 1/3] When upload has errors show them to user

---
 packages/core/src/WorkflowUploadButton.tsx | 77 ++++++++++++++++------
 1 file changed, 57 insertions(+), 20 deletions(-)

diff --git a/packages/core/src/WorkflowUploadButton.tsx b/packages/core/src/WorkflowUploadButton.tsx
index 8be0502..68a4c6d 100644
--- a/packages/core/src/WorkflowUploadButton.tsx
+++ b/packages/core/src/WorkflowUploadButton.tsx
@@ -1,40 +1,77 @@
 import React, { useRef } from 'react'
 import { toast } from 'react-toastify'
 import { useWorkflow } from './store'
+import { ValidationError } from './validate'
+
+function flattenValidationErrors (error: ValidationError): Array<string> {
+  return error.errors.filter(e => e.workflowPath !== undefined && e.message !=== undefined).map((e) => {
+    let message = e.message
+    message = `Error in ${e.workflowPath}${e.instancePath}: ${message}`
+    if (e.params.additionalProperty) {
+      message += `: ${e.params.additionalProperty}`
+    }
+    if (e.params.allowedValues) {
+      message += `: ${e.params.allowedValues.join(', ')}`
+    }
+    return message
+  })
+}
+
+function ErrorsList ({ error }: { error: ValidationError }): JSX.Element {
+  return (
+    <>
+      <div>Workflow archive failed to load.</div>
+      <ul>
+        {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' })
+    } catch (error) {
+      if (error instanceof ValidationError) {
+        toast.update(toastId, {
+          type: 'error',
+          render: <ErrorsList error={error} />,
+          autoClose: false
+        })
+      } else {
+        console.error(error)
+        toast.update(toastId, {
+          type: 'error',
+          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'

From e9395ea2d0be0f2162d877d2734326169cdb2e78 Mon Sep 17 00:00:00 2001
From: sverhoeven <s.verhoeven@esciencecenter.nl>
Date: Fri, 22 Mar 2024 10:58:14 +0100
Subject: [PATCH 2/3] Make toast stay on error and disappear on success + Fix
 lint errors

---
 apps/haddock3-submit/src/useSubmit.tsx     |  6 +--
 packages/core/src/WorkflowUploadButton.tsx | 44 +++++++++++-----------
 packages/core/src/validate.ts              | 18 +++++++++
 packages/core/src/workflow.ts              |  1 -
 4 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/apps/haddock3-submit/src/useSubmit.tsx b/apps/haddock3-submit/src/useSubmit.tsx
index 315cde7..2c0a903 100644
--- a/apps/haddock3-submit/src/useSubmit.tsx
+++ b/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>
diff --git a/packages/core/src/WorkflowUploadButton.tsx b/packages/core/src/WorkflowUploadButton.tsx
index 68a4c6d..439f6bf 100644
--- a/packages/core/src/WorkflowUploadButton.tsx
+++ b/packages/core/src/WorkflowUploadButton.tsx
@@ -1,27 +1,13 @@
 import React, { useRef } from 'react'
-import { toast } from 'react-toastify'
+import { UpdateOptions, toast } from 'react-toastify'
 import { useWorkflow } from './store'
-import { ValidationError } from './validate'
-
-function flattenValidationErrors (error: ValidationError): Array<string> {
-  return error.errors.filter(e => e.workflowPath !== undefined && e.message !=== undefined).map((e) => {
-    let message = e.message
-    message = `Error in ${e.workflowPath}${e.instancePath}: ${message}`
-    if (e.params.additionalProperty) {
-      message += `: ${e.params.additionalProperty}`
-    }
-    if (e.params.allowedValues) {
-      message += `: ${e.params.allowedValues.join(', ')}`
-    }
-    return message
-  })
-}
+import { ValidationError, flattenValidationErrors } from './validate'
 
 function ErrorsList ({ error }: { error: ValidationError }): JSX.Element {
   return (
     <>
       <div>Workflow archive failed to load.</div>
-      <ul>
+      <ul style={{ maxHeight: '20rem', overflow: 'auto' }}>
         {flattenValidationErrors(error).map((message, index) => (
           <li key={index}>{message}</li>
         ))}
@@ -45,18 +31,32 @@ export const WorkflowUploadButton = (): JSX.Element => {
     const toastId = toast.loading('Loading workfow ...')
     try {
       await loadWorkflowArchive(url)
-      toast.update(toastId, { type: 'success', render: 'Workflow loaded' })
+      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, {
-          type: 'error',
-          render: <ErrorsList error={error} />,
-          autoClose: false
+          ...opts,
+          render: <ErrorsList error={error} />
         })
       } else {
         console.error(error)
         toast.update(toastId, {
-          type: 'error',
+          ...opts,
           render:
             'Workflow archive failed to load. See DevTools (F12) console for errors.'
         })
diff --git a/packages/core/src/validate.ts b/packages/core/src/validate.ts
index 0bd3c26..296c9ae 100644
--- a/packages/core/src/validate.ts
+++ b/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 !== '')
+}
diff --git a/packages/core/src/workflow.ts b/packages/core/src/workflow.ts
index 5ace7f0..97768bf 100644
--- a/packages/core/src/workflow.ts
+++ b/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 {

From ee5bb4d0ba7b880b03f888e0364e8ccb1a6732b6 Mon Sep 17 00:00:00 2001
From: sverhoeven <s.verhoeven@esciencecenter.nl>
Date: Fri, 22 Mar 2024 11:11:40 +0100
Subject: [PATCH 3/3] Update CHANGELOG

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a736c97..0af6df2 100644
--- a/CHANGELOG.md
+++ b/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