url bindings test values

packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte

@@ -0,0 +1,94 @@
+<script>
+  import { onMount } from "svelte"
+  import { Input } from "@budibase/bbui"
+  import { previewStore } from "@/stores/builder"
+
+  export let baseRoute = ""
+  export let testValue = ""
+
+  // Extract route parameters (anything starting with :)
+  $: routeParams = baseRoute.match(/:[a-zA-Z]+/g) || []
+  $: {
+    if ($previewStore.selectedComponentContext?.url?.testValue !== undefined) {
+      testValue = $previewStore.selectedComponentContext.url.testValue
+    }
+  }
+
+  const onVariableChange = e => {
+    previewStore.updateUrl({ route: baseRoute, testValue: e.detail })
+    previewStore.requestComponentContext()
+  }
+
+  onMount(() => {
+    previewStore.requestComponentContext()
+  })
+</script>
+
+<div class="url-test-section">
+  <div class="label">URL Variable Testing</div>
+  <div class="url-pattern">Pattern: {baseRoute}</div>
+  <div class="url-test-container">
+    <div class="base-input">
+      <Input disabled={true} value={`/${baseRoute.split("/")[1]}/`} />
+    </div>
+    <div class="variable-input">
+      <Input
+        value={testValue}
+        on:change={onVariableChange}
+        placeholder={routeParams.length
+          ? `e.g. ${routeParams.map(p => p.slice(1)).join("/")}`
+          : "Add test values"}
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  .url-test-section {
+    width: 100%;
+    margin-top: var(--spacing-xl);
+  }
+
+  .label {
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    font-weight: 500;
+    margin-bottom: var(--spacing-s);
+  }
+
+  .url-pattern {
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    color: var(--spectrum-global-color-gray-700);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  .url-test-container {
+    display: flex;
+    width: 100%;
+  }
+
+  .base-input {
+    width: 40%;
+    margin-right: -1px;
+  }
+
+  .base-input :global(.spectrum-Textfield-input) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    background-color: var(--spectrum-global-color-gray-200);
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .variable-input {
+    flex: 1;
+  }
+
+  .variable-input :global(.spectrum-Textfield-input) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  /* Override input styles to make them look connected */
+  .url-test-container :global(.spectrum-Textfield:focus-within) {
+    z-index: 1;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte

@@ -15,9 +15,11 @@
   import ButtonActionEditor from "@/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
   import { getBindableProperties } from "@/dataBinding"
   import BarButtonList from "@/components/design/settings/controls/BarButtonList.svelte"
+  import URLVariableTestInput from "@/components/design/settings/controls/URLVariableTestInput.svelte"
 
   $: bindings = getBindableProperties($selectedScreen, null)
   $: screenSettings = getScreenSettings($selectedScreen)
+  let urlTestValue = ""
 
   let errors = {}
 
@@ -93,6 +95,14 @@
           ],
         },
       },
+      {
+        key: "urlTest",
+        control: URLVariableTestInput,
+        props: {
+          baseRoute: screen.routing?.route,
+          testValue: urlTestValue,
+        },
+      },
     ]
 
     return settings

packages/builder/src/stores/builder/preview.ts

@@ -86,6 +86,10 @@ export class PreviewStore extends BudiStore<PreviewState> {
     this.sendEvent("builder-state", data)
   }
 
+  updateUrl(data: Record<string, any>) {
+    this.sendEvent("builder-test-url", data)
+  }
+
   requestComponentContext() {
     this.sendEvent("request-context")
   }

packages/client/src/components/ClientApp.svelte

@@ -29,6 +29,7 @@
   import UserBindingsProvider from "components/context/UserBindingsProvider.svelte"
   import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
   import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
+  import TestUrlBindingsProvider from "components/context/TestUrlBindingsProvider.svelte"
   import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
   import QueryParamsProvider from "components/context/QueryParamsProvider.svelte"
   import SettingsBar from "components/preview/SettingsBar.svelte"
@@ -168,6 +169,7 @@
             <StateBindingsProvider>
               <RowSelectionProvider>
                 <QueryParamsProvider>
+                  <TestUrlBindingsProvider>
                     <SnippetsProvider>
                       <!-- Settings bar can be rendered outside of device preview -->
                       <!-- Key block needs to be outside the if statement or it breaks -->
@@ -269,6 +271,7 @@
                         {/if}
                       </div>
                     </SnippetsProvider>
+                  </TestUrlBindingsProvider>
                 </QueryParamsProvider>
               </RowSelectionProvider>
             </StateBindingsProvider>

packages/client/src/components/context/TestUrlBindingsProvider.svelte

@@ -0,0 +1,8 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { routeStore } from "stores"
+</script>
+
+<Provider key="url" data={$routeStore.testUrlParams}>
+  <slot />
+</Provider>

packages/client/src/index.js

@@ -10,6 +10,7 @@ import {
   eventStore,
   hoverStore,
   stateStore,
+  routeStore,
 } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
 import { get } from "svelte/store"
@@ -108,6 +109,9 @@ const loadBudibase = async () => {
     } else if (type === "builder-state") {
       const [[key, value]] = Object.entries(data)
       stateStore.actions.setValue(key, value)
+    } else if (type === "builder-test-url") {
+      const { route, testValue } = data
+      routeStore.actions.setTestUrlParams(route, testValue)
     }
   }
 

packages/client/src/stores/routes.ts

@@ -119,7 +119,19 @@ const createRouteStore = () => {
     const base = window.location.href.split("#")[0]
     return `${base}#${relativeURL}`
   }
+  const setTestUrlParams = (route: string, testValue: string) => {
+    const routeSegments = route.split("/").slice(2)
+    const testSegments = testValue.split("/")
+    const params: Record<string, string> = {}
 
+    routeSegments.forEach((segment, index) => {
+      if (segment.startsWith(":") && index < testSegments.length) {
+        params[segment.slice(1)] = testSegments[index]
+      }
+    })
+
+    store.update(state => ({ ...state, testUrlParams: params }))
+  }
   return {
     subscribe: store.subscribe,
     actions: {
@@ -130,6 +142,7 @@ const createRouteStore = () => {
       setQueryParams,
       setActiveRoute,
       setRouterLoaded,
+      setTestUrlParams,
     },
   }
 }