Merge pull request #13746 from Budibase/cheeks-fixes

Misc fixes

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -237,7 +237,12 @@
 
   const onChangeJSValue = e => {
     jsValue = encodeJSBinding(e.detail)
-    updateValue(jsValue)
+    if (!e.detail?.trim()) {
+      // Don't bother saving empty values as JS
+      updateValue(null)
+    } else {
+      updateValue(jsValue)
+    }
   }
 
   onMount(() => {

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -4,7 +4,6 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "dataBinding"
-
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { screenStore, componentStore } from "stores/builder"
+  import { screenStore, componentStore, navigationStore } from "stores/builder"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ActionMenu,
@@ -12,6 +12,7 @@
   import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
   import sanitizeUrl from "helpers/sanitizeUrl"
   import { makeComponentUnique } from "helpers/components"
+  import { capitalise } from "helpers"
 
   export let screenId
 
@@ -48,6 +49,13 @@
     try {
       // Create the screen
       await screenStore.save(duplicateScreen)
+
+      // Add new screen to navigation
+      await navigationStore.saveLink(
+        duplicateScreen.routing.route,
+        capitalise(duplicateScreen.routing.route.split("/")[1]),
+        duplicateScreen.routing.roleId
+      )
     } catch (error) {
       notifications.error("Error duplicating screen")
     }

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

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import active from "svelte-spa-router/active"
   import { Icon } from "@budibase/bbui"
 
@@ -13,8 +13,6 @@
   export let navStateStore
 
   const dispatch = createEventDispatcher()
-  const sdk = getContext("sdk")
-  const { linkable } = sdk
 
   let renderKey
 
@@ -46,10 +44,9 @@
       styled
     -->
     <a
-      href={url}
+      href="#{url}"
       on:click={onClickLink}
       use:active={url}
-      use:linkable
       class:active={false}
     >
       {text}
@@ -73,10 +70,9 @@
           {#each subLinks || [] as subLink}
             {#if subLink.internalLink}
               <a
-                href={subLink.url}
+                href="#{subLink.url}"
                 on:click={onClickLink}
                 use:active={subLink.url}
-                use:linkable
               >
                 {subLink.text}
               </a>

packages/client/src/utils/buttonActions.js

@@ -238,7 +238,13 @@ const triggerAutomationHandler = async action => {
   }
 }
 const navigationHandler = action => {
-  const { url, peek, externalNewTab } = action.parameters
+  let { url, peek, externalNewTab, type } = action.parameters
+
+  // Ensure in-app navigation starts with a slash
+  if (type === "screen" && url && !url.startsWith("/")) {
+    url = `/${url}`
+  }
+
   routeStore.actions.navigate(url, peek, externalNewTab)
   closeSidePanelHandler()
 }