Merge pull request #3716 from Budibase/ak-fixes

Misc bug fixes

packages/bbui/src/Form/Core/Picker.svelte

@@ -63,9 +63,9 @@
   const getFilteredOptions = (options, term, getLabel) => {
     if (autocomplete && term) {
       const lowerCaseTerm = term.toLowerCase()
-      return options.filter(option =>
-        getLabel(option)?.toLowerCase().includes(lowerCaseTerm)
-      )
+      return options.filter(option => {
+        return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
+      })
     }
     return options
   }

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -96,13 +96,16 @@
         allSteps[idx].schema?.outputs?.properties ?? {}
       )
       bindings = bindings.concat(
-        outputs.map(([name, value]) => ({
-          label: name,
-          type: value.type,
-          description: value.description,
-          category: idx === 0 ? "Trigger outputs" : `Step ${idx} outputs`,
-          path: idx === 0 ? `trigger.${name}` : `steps.${idx}.${name}`,
-        }))
+        outputs.map(([name, value]) => {
+          const runtime = idx === 0 ? `trigger.${name}` : `steps.${idx}.${name}`
+          return {
+            label: runtime,
+            type: value.type,
+            description: value.description,
+            category: idx === 0 ? "Trigger outputs" : `Step ${idx} outputs`,
+            path: runtime,
+          }
+        })
       )
     }
     return bindings
@@ -261,7 +264,6 @@
               value={inputData[key]}
               on:change={e => onChange(e, key)}
               {bindings}
-              allowJS={false}
             />
           </div>
         {/if}

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

@@ -17,7 +17,6 @@
     queries as queriesStore,
   } from "stores/backend"
   import { datasources, integrations } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
@@ -31,6 +30,7 @@
   const arrayTypes = ["attachment", "array"]
   let anchorRight, dropdownRight
   let drawer
+  let tmpQueryParams
 
   $: text = value?.label ?? "Choose an option"
   $: tables = $tablesStore.list.map(m => ({
@@ -105,12 +105,12 @@
       }
     })
 
-  function handleSelected(selected) {
+  const handleSelected = selected => {
     dispatch("change", selected)
     dropdownRight.hide()
   }
 
-  function fetchQueryDefinition(query) {
+  const fetchQueryDefinition = query => {
     const source = $datasources.list.find(
       ds => ds._id === query.datasourceId
     ).source
@@ -124,6 +124,19 @@
   const getQueryDatasource = query => {
     return $datasources.list.find(ds => ds._id === query?.datasourceId)
   }
+
+  const openQueryParamsDrawer = () => {
+    tmpQueryParams = value.queryParams
+    drawer.show()
+  }
+
+  const saveQueryParams = () => {
+    handleSelected({
+      ...value,
+      queryParams: tmpQueryParams,
+    })
+    drawer.hide()
+  }
 </script>
 
 <div class="container" bind:this={anchorRight}>
@@ -134,24 +147,14 @@
     on:click={dropdownRight.show}
   />
   {#if value?.type === "query"}
-    <i class="ri-settings-5-line" on:click={drawer.show} />
+    <i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />
     <Drawer title={"Query Parameters"} bind:this={drawer}>
-      <Button
-        slot="buttons"
-        cta
-        on:click={() => {
-          notifications.success("Query parameters saved.")
-          handleSelected(value)
-          drawer.hide()
-        }}
-      >
-        Save
-      </Button>
+      <Button slot="buttons" cta on:click={saveQueryParams}>Save</Button>
       <DrawerContent slot="body">
         <Layout noPadding>
           {#if getQueryParams(value).length > 0}
             <ParameterBuilder
-              bind:customParams={value.queryParams}
+              bind:customParams={tmpQueryParams}
               parameters={getQueryParams(value)}
               {bindings}
             />

packages/client/manifest.json

@@ -393,13 +393,13 @@
           {
             "label": "Column",
             "value": "column",
-            "barIcon": "ViewRow",
+            "barIcon": "ViewColumn",
             "barTitle": "Column layout"
           },
           {
             "label": "Row",
             "value": "row",
-            "barIcon": "ViewColumn",
+            "barIcon": "ViewRow",
             "barTitle": "Row layout"
           }
         ],

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

@@ -21,11 +21,25 @@
   $: target = openInNewTab ? "_blank" : "_self"
   $: placeholder = $builderStore.inBuilder && !text
   $: componentText = getComponentText(text, $builderStore, $component)
+  $: sanitizedUrl = getSanitizedUrl(url, externalLink, openInNewTab)
 
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
   $: styles = enrichStyles($component.styles, color)
 
+  const getSanitizedUrl = (url, externalLink, newTab) => {
+    if (!url) {
+      return externalLink || newTab ? "#/" : "/"
+    }
+    if (externalLink) {
+      return url
+    }
+    if (openInNewTab) {
+      return `#${url}`
+    }
+    return url
+  }
+
   const getComponentText = (text, builderState, componentState) => {
     if (!builderState.inBuilder || componentState.editing) {
       return text || ""
@@ -65,10 +79,10 @@
     {componentText}
   </div>
 {:else if $builderStore.inBuilder || componentText}
-  {#if externalLink}
+  {#if externalLink || openInNewTab}
     <a
       {target}
-      href={url || "/"}
+      href={sanitizedUrl}
       use:styleable={styles}
       class:placeholder
       class:bold
@@ -79,18 +93,20 @@
       {componentText}
     </a>
   {:else}
-    <a
-      use:linkable
-      href={url || "/"}
-      use:styleable={styles}
-      class:placeholder
-      class:bold
-      class:italic
-      class:underline
-      class="align--{align || 'left'} size--{size || 'M'}"
-    >
-      {componentText}
-    </a>
+    {#key sanitizedUrl}
+      <a
+        use:linkable
+        href={sanitizedUrl}
+        use:styleable={styles}
+        class:placeholder
+        class:bold
+        class:italic
+        class:underline
+        class="align--{align || 'left'} size--{size || 'M'}"
+      >
+        {componentText}
+      </a>
+    {/key}
   {/if}
 {/if}