From c26d9f4e13cd39d8a18db90bd224666eeffb476f Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 11 Feb 2025 11:28:14 +0000 Subject: [PATCH] url bindings test values --- .../controls/URLVariableTestInput.svelte | 94 +++++++++ .../_components/Screen/GeneralPanel.svelte | 10 + .../builder/src/stores/builder/preview.ts | 4 + .../client/src/components/ClientApp.svelte | 187 +++++++++--------- .../context/TestUrlBindingsProvider.svelte | 8 + packages/client/src/index.js | 4 + packages/client/src/stores/routes.ts | 13 ++ 7 files changed, 228 insertions(+), 92 deletions(-) create mode 100644 packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte create mode 100644 packages/client/src/components/context/TestUrlBindingsProvider.svelte diff --git a/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte b/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte new file mode 100644 index 0000000000..67a372141b --- /dev/null +++ b/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte @@ -0,0 +1,94 @@ + + +
+
URL Variable Testing
+
Pattern: {baseRoute}
+
+
+ +
+
+ p.slice(1)).join("/")}` + : "Add test values"} + /> +
+
+
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte index 3a6e7a702c..1591331f45 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte +++ b/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 diff --git a/packages/builder/src/stores/builder/preview.ts b/packages/builder/src/stores/builder/preview.ts index 87b2b9355e..84d6447bb7 100644 --- a/packages/builder/src/stores/builder/preview.ts +++ b/packages/builder/src/stores/builder/preview.ts @@ -86,6 +86,10 @@ export class PreviewStore extends BudiStore { this.sendEvent("builder-state", data) } + updateUrl(data: Record) { + this.sendEvent("builder-test-url", data) + } + requestComponentContext() { this.sendEvent("request-context") } diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 2840d82f47..8169328b5f 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/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,107 +169,109 @@ - - - - {#key $builderStore.selectedComponentId} - {#if $builderStore.inBuilder} - - {/if} - {/key} - - -
- -
- {#if showDevTools} - + + + + + {#key $builderStore.selectedComponentId} + {#if $builderStore.inBuilder} + {/if} + {/key} -
- {#if permissionError} -
- - - {@html ErrorSVG} - - You don't have permission to use this app - - - Ask your administrator to grant you access - - -
- {:else if !$screenStore.activeLayout} -
- - - {@html ErrorSVG} - - Something went wrong rendering your app - - - Get in touch with support if this issue - persists - - -
- {:else if embedNoScreens} -
- - - {@html ErrorSVG} - - This Budibase app is not publicly accessible - - -
- {:else} - - {#key $screenStore.activeLayout._id} - - {/key} - - - - - - + +
+ +
+ {#if showDevTools} + {/if} - {#if showDevTools} - +
+ {#if permissionError} +
+ + + {@html ErrorSVG} + + You don't have permission to use this app + + + Ask your administrator to grant you access + + +
+ {:else if !$screenStore.activeLayout} +
+ + + {@html ErrorSVG} + + Something went wrong rendering your app + + + Get in touch with support if this issue + persists + + +
+ {:else if embedNoScreens} +
+ + + {@html ErrorSVG} + + This Budibase app is not publicly accessible + + +
+ {:else} + + {#key $screenStore.activeLayout._id} + + {/key} + + + + + + + {/if} + + {#if showDevTools} + + {/if} +
+ + {#if !$builderStore.inBuilder && $featuresStore.logoEnabled} + {/if}
- {#if !$builderStore.inBuilder && $featuresStore.logoEnabled} - + + {#if $appStore.isDevApp} + + {/if} + {#if $builderStore.inBuilder || $devToolsStore.allowSelection} + + {/if} + {#if $builderStore.inBuilder} + + {/if}
- - - {#if $appStore.isDevApp} - - {/if} - {#if $builderStore.inBuilder || $devToolsStore.allowSelection} - - {/if} - {#if $builderStore.inBuilder} - - - {/if} -
- + + diff --git a/packages/client/src/components/context/TestUrlBindingsProvider.svelte b/packages/client/src/components/context/TestUrlBindingsProvider.svelte new file mode 100644 index 0000000000..7f8c0f04da --- /dev/null +++ b/packages/client/src/components/context/TestUrlBindingsProvider.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 8a48aa08e5..b76186af8e 100644 --- a/packages/client/src/index.js +++ b/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) } } diff --git a/packages/client/src/stores/routes.ts b/packages/client/src/stores/routes.ts index 3f200a9c88..f9e2cca27e 100644 --- a/packages/client/src/stores/routes.ts +++ b/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 = {} + 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, }, } }