Merge pull request #5225 from Budibase/cheeks-fixes

Misc fixes

packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js

@@ -2,9 +2,15 @@ export default function (url) {
   return url
     .split("/")
     .map(part => {
-      // if parameter, then use as is
+      part = decodeURIComponent(part)
-      if (part.startsWith(":")) return part
+      part = part.replace(/ /g, "-")
-      return encodeURIComponent(part.replace(/ /g, "-"))
+
+      // If parameter, then use as is
+      if (!part.startsWith(":")) {
+        part = encodeURIComponent(part)
+      }
+
+      return part
     })
     .join("/")
     .toLowerCase()

packages/builder/src/components/common/TemplateCard.svelte

@@ -6,15 +6,10 @@
   export let overlayEnabled = true
 
   let imageError = false
-  let imageLoaded = false
 
   const imageRenderError = () => {
     imageError = true
   }
-
-  const imageLoadSuccess = () => {
-    imageLoaded = true
-  }
 </script>
 
 <div class="template-card" style="background-color:{backgroundColour};">
@@ -23,8 +18,7 @@
       alt={name}
       src={imageSrc}
       on:error={imageRenderError}
-      on:load={imageLoadSuccess}
+      class:error={imageError}
-      class={`${imageLoaded ? "loaded" : ""}`}
     />
     <div style={`display:${imageError ? "block" : "none"}`}>
       <svg
@@ -104,15 +98,14 @@
     width: 100%;
   }
 
-  .template-card img.loaded {
-    display: block;
-  }
-
   .template-card img {
-    display: none;
+    display: block;
     max-width: 100%;
     border-radius: var(--border-radius-s) 0px var(--border-radius-s) 0px;
   }
+  .template-card img.error {
+    display: none;
+  }
 
   .template-card:hover {
     background: var(--spectrum-alias-background-color-tertiary);

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte

@@ -3,13 +3,14 @@
   import PathTree from "./PathTree.svelte"
 
   let routes = {}
-  $: paths = Object.keys(routes || {}).sort()
+  let paths = []
 
-  $: {
+  $: allRoutes = $store.routes
-    const allRoutes = $store.routes
+  $: selectedScreenId = $store.selectedScreenId
+  $: updatePaths(allRoutes, $selectedAccessRole, selectedScreenId)
+
+  const updatePaths = (allRoutes, selectedRoleId, selectedScreenId) => {
     const sortedPaths = Object.keys(allRoutes || {}).sort()
-    const selectedRoleId = $selectedAccessRole
-    const selectedScreenId = $store.selectedScreenId
 
     let found = false
     let firstValidScreenId
@@ -41,11 +42,15 @@
         })
       })
     })
-    routes = filteredRoutes
+    routes = { ...filteredRoutes }
+    paths = Object.keys(routes || {}).sort()
 
     // Select the correct role for the current screen ID
     if (!found && screenRoleId) {
       selectedAccessRole.set(screenRoleId)
+      if (screenRoleId !== selectedRoleId) {
+        updatePaths(allRoutes, screenRoleId, selectedScreenId)
+      }
     }
 
     // If the selected screen isn't in this filtered list, select the first one

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/TriggerAutomation.svelte

@@ -19,7 +19,7 @@
     .filter(a => a.definition.trigger?.stepId === "APP")
     .map(automation => {
       const schema = Object.entries(
-        automation.definition.trigger.inputs.fields
+        automation.definition.trigger.inputs.fields || {}
       ).map(([name, type]) => ({ name, type }))
 
       return {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte

@@ -3,6 +3,7 @@
   import { roles } from "stores/backend"
 
   export let value
+  export let error
 </script>
 
 <Select
@@ -11,4 +12,5 @@
   options={$roles}
   getOptionLabel={role => role.name}
   getOptionValue={role => role._id}
+  {error}
 />

packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte

@@ -8,14 +8,50 @@
   import { currentAsset, store } from "builderStore"
   import { FrontendTypes } from "constants"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
+  import { allScreens, selectedAccessRole } from "builderStore"
 
   export let componentInstance
   export let bindings
 
-  function setAssetProps(name, value, parser) {
+  let errors = {}
-    if (parser && typeof parser === "function") {
+
+  const routeTaken = url => {
+    const roleId = get(selectedAccessRole) || "BASIC"
+    return get(allScreens).some(
+      screen =>
+        screen.routing.route.toLowerCase() === url.toLowerCase() &&
+        screen.routing.roleId === roleId
+    )
+  }
+
+  const roleTaken = roleId => {
+    const url = get(currentAsset)?.routing.route
+    return get(allScreens).some(
+      screen =>
+        screen.routing.route.toLowerCase() === url.toLowerCase() &&
+        screen.routing.roleId === roleId
+    )
+  }
+
+  const setAssetProps = (name, value, parser, validate) => {
+    if (parser) {
       value = parser(value)
     }
+    if (validate) {
+      const error = validate(value)
+      errors = {
+        ...errors,
+        [name]: error,
+      }
+      if (error) {
+        return
+      }
+    } else {
+      errors = {
+        ...errors,
+        [name]: null,
+      }
+    }
 
     const selectedAsset = get(currentAsset)
     store.update(state => {
@@ -38,7 +74,6 @@
   }
 
   const screenSettings = [
-    // { key: "description", label: "Description", control: Input },
     {
       key: "routing.route",
       label: "Route",
@@ -49,8 +84,26 @@
         }
         return sanitizeUrl(val)
       },
+      validate: val => {
+        const exisingValue = get(currentAsset)?.routing.route
+        if (val !== exisingValue && routeTaken(val)) {
+          return "That URL is already in use for this role"
+        }
+        return null
+      },
+    },
+    {
+      key: "routing.roleId",
+      label: "Access",
+      control: RoleSelect,
+      validate: val => {
+        const exisingValue = get(currentAsset)?.routing.roleId
+        if (val !== exisingValue && roleTaken(val)) {
+          return "That role is already in use for this URL"
+        }
+        return null
+      },
     },
-    { key: "routing.roleId", label: "Access", control: RoleSelect },
     { key: "layoutId", label: "Layout", control: LayoutSelect },
   ]
 </script>
@@ -62,9 +115,11 @@
         control={def.control}
         label={def.label}
         key={def.key}
+        error="asdasds"
         value={deepGet($currentAsset, def.key)}
-        onChange={val => setAssetProps(def.key, val, def.parser)}
+        onChange={val => setAssetProps(def.key, val, def.parser, def.validate)}
         {bindings}
+        props={{ error: errors[def.key] }}
       />
     {/each}
   </DetailSummary>

packages/builder/src/pages/builder/portal/apps/create.svelte

@@ -15,7 +15,7 @@
   import { onMount } from "svelte"
   import { templates } from "stores/portal"
 
-  let loaded = false
+  let loaded = $templates?.length
   let template
   let creationModal = false
   let creatingApp = false

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -40,7 +40,7 @@
   let unpublishModal
   let iconModal
   let creatingApp = false
-  let loaded = false
+  let loaded = $apps?.length || $templates?.length
   let searchTerm = ""
   let cloud = $admin.cloud
   let appName = ""
@@ -292,8 +292,8 @@
       <div class="title">
         <div class="welcome">
           <Layout noPadding gap="XS">
-            <Heading size="M">{welcomeHeader}</Heading>
+            <Heading size="L">{welcomeHeader}</Heading>
-            <Body size="S">
+            <Body size="M">
               {welcomeBody}
             </Body>
           </Layout>
@@ -301,7 +301,7 @@
           <div class="buttons">
             <Button
               dataCy="create-app-btn"
-              size="L"
+              size="M"
               icon="Add"
               cta
               on:click={initiateAppCreation}
@@ -311,7 +311,7 @@
             {#if $apps?.length > 0}
               <Button
                 icon="Experience"
-                size="L"
+                size="M"
                 quiet
                 secondary
                 on:click={$goto("/builder/portal/apps/templates")}
@@ -348,7 +348,7 @@
       {#if enrichedApps.length}
         <Layout noPadding gap="S">
           <div class="title">
-            <Detail size="L">My apps</Detail>
+            <Detail size="L">Apps</Detail>
             {#if enrichedApps.length > 1}
               <div class="app-actions">
                 {#if cloud}

packages/builder/src/pages/builder/portal/apps/templates.svelte

@@ -5,7 +5,7 @@
   import { onMount } from "svelte"
   import { templates } from "stores/portal"
 
-  let loaded = false
+  let loaded = $templates?.length
 
   onMount(async () => {
     try {

packages/client/src/components/app/SpectrumCard.svelte

@@ -102,7 +102,7 @@
     white-space: nowrap;
   }
   .spectrum-Card-footer {
-    word-wrap: anywhere;
+    word-wrap: break-word;
     white-space: pre-wrap;
   }
   .horizontal .spectrum-Card-coverPhoto {

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -125,7 +125,11 @@
 {#if schemaLoaded}
   <Block>
     <div class="card-list" use:styleable={$component.styles}>
-      <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
+      <BlockComponent
+        type="form"
+        bind:id={formId}
+        props={{ dataSource, disableValidation: true }}
+      >
         {#if title || enrichedSearchColumns?.length || showTitleButton}
           <div class="header" class:mobile={$context.device.mobile}>
             <div class="title">

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -106,7 +106,11 @@
 {#if schemaLoaded}
   <Block>
     <div class={size} use:styleable={$component.styles}>
-      <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
+      <BlockComponent
+        type="form"
+        bind:id={formId}
+        props={{ dataSource, disableValidation: true }}
+      >
         {#if title || enrichedSearchColumns?.length || showTitleButton}
           <div class="header" class:mobile={$context.device.mobile}>
             <div class="title">

packages/client/src/components/app/charts/ApexChart.svelte

@@ -34,7 +34,7 @@
     color: var(--spectrum-global-color-gray-700) !important;
   }
   div :global(.apexcharts-datalabel) {
-    fill: var(--spectrum-global-color-gray-800);
+    fill: white;
   }
   div :global(.apexcharts-tooltip) {
     background-color: var(--spectrum-global-color-gray-200) !important;
@@ -45,4 +45,12 @@
     background-color: var(--spectrum-global-color-gray-100) !important;
     border-color: var(--spectrum-global-color-gray-300) !important;
   }
+  div :global(.apexcharts-theme-dark .apexcharts-tooltip-text) {
+    color: white;
+  }
+  div
+    :global(.apexcharts-theme-dark
+      .apexcharts-tooltip-series-group.apexcharts-active) {
+    padding-bottom: 0;
+  }
 </style>

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

@@ -9,6 +9,10 @@
   export let disabled = false
   export let actionType = "Create"
 
+  // Not exposed as a builder setting. Used internally to disable validation
+  // for fields rendered in things like search blocks.
+  export let disableValidation = false
+
   const context = getContext("context")
   const { API, fetchDatasourceSchema } = getContext("sdk")
 
@@ -102,6 +106,7 @@
       {schema}
       {table}
       {initialValues}
+      {disableValidation}
     >
       <slot />
     </InnerForm>

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

@@ -10,6 +10,7 @@
   export let size
   export let schema
   export let table
+  export let disableValidation = false
 
   const component = getContext("component")
   const { styleable, Provider, ActionTypes } = getContext("sdk")
@@ -141,12 +142,14 @@
 
       // Create validation function based on field schema
       const schemaConstraints = schema?.[field]?.constraints
-      const validator = createValidatorFromConstraints(
+      const validator = disableValidation
-        schemaConstraints,
+        ? null
-        validationRules,
+        : createValidatorFromConstraints(
-        field,
+            schemaConstraints,
-        table
+            validationRules,
-      )
+            field,
+            table
+          )
 
       // If we've already registered this field then keep some existing state
       let initialValue = Helpers.deepGet(initialValues, field) ?? defaultValue
@@ -164,7 +167,7 @@
         // If this field has already been registered and we previously had an
         // error set, then re-run the validator to see if we can unset it
         if (fieldState.error) {
-          initialError = validator(initialValue)
+          initialError = validator?.(initialValue)
         }
       }
 
@@ -254,7 +257,7 @@
       }
 
       // Update field state
-      const error = validator ? validator(value) : null
+      const error = validator?.(value)
       fieldInfo.update(state => {
         state.fieldState.value = value
         state.fieldState.error = error
@@ -288,12 +291,14 @@
 
       // Create new validator
       const schemaConstraints = schema?.[field]?.constraints
-      const validator = createValidatorFromConstraints(
+      const validator = disableValidation
-        schemaConstraints,
+        ? null
-        validationRules,
+        : createValidatorFromConstraints(
-        field,
+            schemaConstraints,
-        table
+            validationRules,
-      )
+            field,
+            table
+          )
 
       // Update validator
       fieldInfo.update(state => {

packages/client/src/utils/buttonActions.js

@@ -329,13 +329,13 @@ export const enrichButtonActions = (actions, context) => {
     return actions
   }
 
-  // Button context is built up as actions are executed.
-  // Inherit any previous button context which may have come from actions
-  // before a confirmable action since this breaks the chain.
-  let buttonContext = context.actions || []
-
   const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
   return async eventContext => {
+    // Button context is built up as actions are executed.
+    // Inherit any previous button context which may have come from actions
+    // before a confirmable action since this breaks the chain.
+    let buttonContext = context.actions || []
+
     for (let i = 0; i < handlers.length; i++) {
       try {
         // Skip any non-existent action definitions
@@ -346,6 +346,7 @@ export const enrichButtonActions = (actions, context) => {
         // Built total context for this action
         const totalContext = {
           ...context,
+          state: get(stateStore),
           actions: buttonContext,
           eventContext,
         }