From c26d9f4e13cd39d8a18db90bd224666eeffb476f Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 11 Feb 2025 11:28:14 +0000 Subject: [PATCH 01/14] 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, }, } } From dc202f63a90f72b5f9fd8cc7d0d31db6a977cc9e Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 11 Feb 2025 13:27:12 +0000 Subject: [PATCH 02/14] tweaks --- .../controls/URLVariableTestInput.svelte | 55 ++++++++++++------- packages/client/src/stores/routes.ts | 3 +- 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte b/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte index 67a372141b..d1a20dbb44 100644 --- a/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte +++ b/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte @@ -1,13 +1,28 @@
-
URL Variable Testing
-
Pattern: {baseRoute}
+
+ URL Variable Testing + +
+ +
+ +
@@ -35,9 +60,7 @@ p.slice(1)).join("/")}` - : "Add test values"} + placeholder={`${placeholder}`} />
@@ -49,18 +72,13 @@ margin-top: var(--spacing-xl); } - .label { - font-size: var(--spectrum-global-dimension-font-size-75); - font-weight: 500; + .info { + display: flex; + align-items: center; + gap: var(--spacing-s); 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%; @@ -86,9 +104,4 @@ 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; - } diff --git a/packages/client/src/stores/routes.ts b/packages/client/src/stores/routes.ts index f9e2cca27e..50df18fa11 100644 --- a/packages/client/src/stores/routes.ts +++ b/packages/client/src/stores/routes.ts @@ -122,14 +122,13 @@ const createRouteStore = () => { const setTestUrlParams = (route: string, testValue: string) => { const routeSegments = route.split("/").slice(2) const testSegments = testValue.split("/") - const params: Record = {} + 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 { From af0c722af1a5c75b394f67f369145a7434b719fb Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Wed, 12 Feb 2025 12:10:53 +0000 Subject: [PATCH 03/14] further changes to support persisting values when component changes --- .../controls/URLVariableTestInput.svelte | 86 +++++++++++++------ .../_components/Screen/GeneralPanel.svelte | 2 - .../builder/src/stores/builder/preview.ts | 3 +- .../builder/src/stores/builder/screens.ts | 4 + packages/client/src/stores/routes.ts | 27 +++++- packages/types/src/ui/stores/preview.ts | 1 + 6 files changed, 90 insertions(+), 33 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte b/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte index d1a20dbb44..99f0fb7182 100644 --- a/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte +++ b/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte @@ -1,37 +1,71 @@ -

import { onMount } from "svelte" - import { - Input, - Icon, - Body, - AbsTooltip, - TooltipPosition, - } from "@budibase/bbui" + import { Input, Label } from "@budibase/bbui" import { previewStore, selectedScreen } from "@/stores/builder" import type { ComponentContext } from "@budibase/types" @@ -14,6 +8,8 @@ let testValue: string | undefined + $: routeParams = baseRoute.match(/:[a-zA-Z]+/g) || [] + $: hasUrlParams = routeParams.length > 0 $: placeholder = getPlaceholder(baseRoute) $: baseInput = createBaseInput(baseRoute) $: updateTestValueFromContext($previewStore.selectedComponentContext) @@ -73,28 +69,21 @@ }) -

-
- URL Variable Testing - -
- +{#if hasUrlParams} +
+
+ +
+
+
+ +
+
+
- -
-
-
- -
-
-
-
+{/if}