Merge pull request #6828 from Budibase/bug/sev3/remove-validate-current-step-checkbox

Remove validate current step checkbox and show validation error messages

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ValidateForm.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Checkbox } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
   import { getActionProviderComponents } from "builderStore/dataBinding"
 
@@ -21,10 +21,6 @@
     getOptionValue={x => x._id}
   />
   <div />
-  <Checkbox
-    text="Validate only current step"
-    bind:value={parameters.onlyCurrentStep}
-  />
 </div>
 
 <style>

packages/client/src/api/api.js

@@ -58,9 +58,18 @@ export const API = createAPIClient({
         }
       }
       if (!ignore) {
+        const validationErrors = error?.json?.validationErrors
+        if (validationErrors) {
+          for (let field in validationErrors) {
+            notificationStore.actions.error(
+              `${field} ${validationErrors[field]}`
+            )
+          }
+        } else {
           notificationStore.actions.error(message)
         }
       }
+    }
 
     // Log all errors to console
     console.warn(`[Client] HTTP ${status} on ${method}:${url}\n\t${message}`)

packages/client/src/components/app/forms/InnerForm.svelte

@@ -204,14 +204,11 @@
 
       return fieldInfo
     },
-    validate: (onlyCurrentStep = false) => {
+    validate: () => {
       let valid = true
       let validationFields = fields
 
-      // Reduce fields to only the current step if required
-      if (onlyCurrentStep) {
       validationFields = fields.filter(f => get(f).step === get(currentStep))
-      }
 
       // Validate fields and check if any are invalid
       validationFields.forEach(field => {

packages/client/src/components/overlay/NotificationDisplay.svelte

@@ -6,7 +6,7 @@
 
 <div class="notifications">
   {#if $notificationStore}
-    {#key $notificationStore.id}
+    {#each $notificationStore as { type, icon, message, id, dismissable } (id)}
       <div
         in:fly={{
           duration: 300,
@@ -16,14 +16,14 @@
         out:fly={{ y: -20, duration: 150 }}
       >
         <Notification
-          type={$notificationStore.type}
-          message={$notificationStore.message}
-          icon={$notificationStore.icon}
-          dismissable={$notificationStore.dismissable}
-          on:dismiss={notificationStore.actions.dismiss}
+          {type}
+          {message}
+          {icon}
+          {dismissable}
+          on:dismiss={() => notificationStore.actions.dismiss(id)}
         />
       </div>
-    {/key}
+    {/each}
   {/if}
 </div>
 
@@ -31,6 +31,7 @@
   .notifications {
     position: fixed;
     top: 20px;
+    bottom: 40px;
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -41,5 +42,10 @@
     justify-content: flex-start;
     align-items: center;
     pointer-events: none;
+    gap: 10px;
+  }
+  .notifications :global(.spectrum-Toast) {
+    width: 400px;
+    max-width: 100vw;
   }
 </style>

packages/client/src/stores/notification.js

@@ -1,18 +1,12 @@
 import { writable, get } from "svelte/store"
-import { generate } from "shortid"
 import { routeStore } from "./routes"
 
 const NOTIFICATION_TIMEOUT = 3000
 
 const createNotificationStore = () => {
-  let timeout
   let block = false
 
-  const store = writable(null, () => {
-    return () => {
-      clearTimeout(timeout)
-    }
-  })
+  const store = writable([])
 
   const blockNotifications = (timeout = 1000) => {
     block = true
@@ -37,26 +31,31 @@ const createNotificationStore = () => {
       })
       return
     }
-
-    store.set({
-      id: generate(),
+    const _id = id()
+    store.update(state => {
+      return [
+        ...state,
+        {
+          id: _id,
           type,
           message,
           icon,
           dismissable: !autoDismiss,
           delay: get(store) != null,
+        },
+      ]
     })
-    clearTimeout(timeout)
     if (autoDismiss) {
-      timeout = setTimeout(() => {
-        store.set(null)
+      setTimeout(() => {
+        dismiss(_id)
       }, NOTIFICATION_TIMEOUT)
     }
   }
 
-  const dismiss = () => {
-    clearTimeout(timeout)
-    store.set(null)
+  const dismiss = id => {
+    store.update(state => {
+      return state.filter(n => n.id !== id)
+    })
   }
 
   return {
@@ -71,6 +70,10 @@ const createNotificationStore = () => {
       dismiss,
     },
   }
+
+  function id() {
+    return "_" + Math.random().toString(36).slice(2, 9)
+  }
 }
 
 export const notificationStore = createNotificationStore()

packages/client/src/utils/buttonActions.js

@@ -179,8 +179,7 @@ const validateFormHandler = async (action, context) => {
   return await executeActionHandler(
     context,
     action.parameters.componentId,
-    ActionTypes.ValidateForm,
-    action.parameters.onlyCurrentStep
+    ActionTypes.ValidateForm
   )
 }