From 83e23ef5789831d2ff4e68a3413f0d70b89dce62 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 7 Feb 2025 16:17:13 +0000 Subject: [PATCH 01/66] Restore format setting, fix conditional UI missing nested flag and component bindings, restrict format setting to own context only --- .../settings/controls/PropertyControl.svelte | 8 ++++++-- .../Component/ComponentSettingsPanel.svelte | 1 + .../Component/ComponentSettingsSection.svelte | 1 + .../Component/ConditionalUIDrawer.svelte | 5 +++++ .../Component/ConditionalUISection.svelte | 7 ++++++- packages/client/manifest.json | 10 +++++++++- .../src/components/app/GridBlock.svelte | 19 +++++++++++-------- packages/types/src/ui/components/index.ts | 2 ++ 8 files changed, 41 insertions(+), 12 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte index 2b63cdd748..c4eb3f04e6 100644 --- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte +++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte @@ -23,11 +23,12 @@ export let info = null export let disableBindings = false export let wide + export let isolated = false let highlightType $: highlightedProp = $builderStore.highlightedSetting - $: allBindings = getAllBindings(bindings, componentBindings, nested) + $: allBindings = getAllBindings(bindings, componentBindings, nested, isolated) $: safeValue = getSafeValue(value, defaultValue, allBindings) $: replaceBindings = val => readableToRuntimeBinding(allBindings, val) @@ -36,7 +37,10 @@ highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : "" } - const getAllBindings = (bindings, componentBindings, nested) => { + const getAllBindings = (bindings, componentBindings, nested, isolated) => { + if (isolated) { + bindings = [] + } if (!nested) { return bindings } diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte index de6993c661..020f86357b 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte @@ -147,6 +147,7 @@ {componentInstance} {componentDefinition} {bindings} + {componentBindings} /> {/if} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte index 0b147e867c..6940c8b6fc 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte @@ -151,6 +151,7 @@ propertyFocus={$builderStore.propertyFocus === setting.key} info={setting.info} disableBindings={setting.disableBindings} + isolated={setting.isolated} props={{ // Generic settings placeholder: setting.placeholder || null, diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte index 863333e91d..4b39022880 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte @@ -19,6 +19,7 @@ export let conditions = [] export let bindings = [] + export let componentBindings = [] const flipDurationMs = 150 const actionOptions = [ @@ -55,6 +56,7 @@ ] let dragDisabled = true + $: settings = componentStore .getComponentSettings($selectedComponent?._component) ?.concat({ @@ -213,7 +215,10 @@ options: definition.options, placeholder: definition.placeholder, }} + nested={definition.nested} + isolated={definition.isolated} {bindings} + {componentBindings} /> {:else} + +
+ 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 03/66] 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 917548bf84c42bc6017aae7352695955fe02b96f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 11 Feb 2025 16:14:24 +0000 Subject: [PATCH 04/66] Simplify and add new contextAccess manifest key to solve incompatibility with table format and condition settings --- .../ButtonConfiguration/ButtonSetting.svelte | 1 - .../controls/EditComponentPopover.svelte | 8 +++- .../FieldConfiguration/FieldSetting.svelte | 1 - .../settings/controls/PropertyControl.svelte | 48 +++++++++++++++---- .../Component/ComponentSettingsSection.svelte | 2 +- packages/client/manifest.json | 15 ++++-- .../src/components/app/GridBlock.svelte | 20 ++++++-- .../src/components/grid/stores/conditions.ts | 2 +- packages/types/src/ui/stores/grid/columns.ts | 10 +++- .../types/src/ui/stores/grid/condition.ts | 2 +- 10 files changed, 82 insertions(+), 27 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte index 726f3cdbea..85b3455172 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte @@ -43,7 +43,6 @@ import { Icon, Popover, Layout } from "@budibase/bbui" - import { componentStore } from "@/stores/builder" + import { componentStore, selectedScreen } from "@/stores/builder" import { cloneDeep } from "lodash/fp" import { createEventDispatcher, getContext } from "svelte" import ComponentSettingsSection from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte" + import { getComponentBindableProperties } from "@/dataBinding" export let anchor export let componentInstance - export let componentBindings export let bindings export let parseSettings @@ -28,6 +28,10 @@ } $: componentDef = componentStore.getDefinition(componentInstance._component) $: parsedComponentDef = processComponentDefinitionSettings(componentDef) + $: componentBindings = getComponentBindableProperties( + $selectedScreen, + $componentStore.selectedComponentId + ) const open = () => { isOpen = true diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte index d39af94ce1..d54fdfccbd 100644 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte @@ -45,7 +45,6 @@ readableToRuntimeBinding(allBindings, val) - $: if (value) { highlightType = highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : "" } - const getAllBindings = (bindings, componentBindings, nested, isolated) => { - if (isolated) { - bindings = [] + const getAllBindings = ( + bindings, + componentBindings, + nested, + contextAccess + ) => { + // contextAccess is a bit of an escape hatch to get around how we render + // certain settings types by using a pseudo component definition, leading + // to problems with the nested flag + if (contextAccess != null) { + // Optionally include global bindings + let allBindings = contextAccess.global ? bindings : [] + + // Optionally include or exclude self (component) bindings. + // If this is a nested setting then we will already have our own context + // bindings mixed in, so if we don't want self context we need to filter + // them out. + if (contextAccess.self) { + return [...allBindings, ...componentBindings] + } else { + return allBindings.filter(binding => { + return !componentBindings.some(componentBinding => { + return componentBinding.runtimeBinding === binding.runtimeBinding + }) + }) + } } - if (!nested) { + + // Otherwise just honour the normal nested flag + if (nested) { + return [...bindings, ...componentBindings] + } else { return bindings } - return [...(componentBindings || []), ...(bindings || [])] } // Handle a value change of any type diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte index 6940c8b6fc..1d31554df9 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte @@ -151,7 +151,7 @@ propertyFocus={$builderStore.propertyFocus === setting.key} info={setting.info} disableBindings={setting.disableBindings} - isolated={setting.isolated} + contextAccess={setting.contextAccess} props={{ // Generic settings placeholder: setting.placeholder || null, diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 711f2000aa..c240e17176 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3088,13 +3088,21 @@ { "type": "tableConditions", "label": "Conditions", - "key": "conditions" + "key": "conditions", + "contextAccess": { + "global": true, + "self": false + } }, { "type": "text", "label": "Format", "key": "format", - "info": "Changing format will display values as text" + "info": "Changing format will display values as text", + "contextAccess": { + "global": false, + "self": true + } } ] }, @@ -7692,8 +7700,7 @@ "type": "columns/grid", "key": "columns", "resetOn": "table", - "nested": true, - "isolated": true + "nested": true } ] }, diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 1ff273548a..c750ad4001 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -47,8 +47,8 @@ $: currentTheme = $context?.device?.theme $: darkMode = !currentTheme?.includes("light") $: parsedColumns = getParsedColumns(columns) - $: schemaOverrides = getSchemaOverrides(parsedColumns) $: enrichedButtons = enrichButtons(buttons) + $: schemaOverrides = getSchemaOverrides(parsedColumns, $context) $: selectedRows = deriveSelectedRows(gridContext) $: styles = patchStyles($component.styles, minHeight) $: data = { selectedRows: $selectedRows } @@ -97,18 +97,19 @@ })) } - const getSchemaOverrides = columns => { + const getSchemaOverrides = (columns, context) => { let overrides = {} columns.forEach((column, idx) => { overrides[column.field] = { displayName: column.label, order: idx, - conditions: column.conditions, visible: !!column.active, + conditions: enrichConditions(column.conditions, context), format: createFormatter(column), - // Small hack to ensure we react to all changes when inside the builder - rand: Math.random(), + // Small hack to ensure we react to all changes, as our + // memoization cannot compare differences in functions + rand: column.conditions?.length ? Math.random() : null, } if (column.width) { overrides[column.field].width = column.width @@ -117,6 +118,15 @@ return overrides } + const enrichConditions = (conditions, context) => { + return conditions?.map(condition => { + return { + ...condition, + referenceValue: processStringSync(condition.referenceValue, context), + } + }) + } + const createFormatter = column => { if (typeof column.format !== "string" || !column.format.trim().length) { return null diff --git a/packages/frontend-core/src/components/grid/stores/conditions.ts b/packages/frontend-core/src/components/grid/stores/conditions.ts index cf47456b44..214b89fb42 100644 --- a/packages/frontend-core/src/components/grid/stores/conditions.ts +++ b/packages/frontend-core/src/components/grid/stores/conditions.ts @@ -31,7 +31,7 @@ export const deriveStores = (context: StoreContext): ConditionDerivedStore => { // Derive and memoize the cell conditions present in our columns so that we // only recompute condition metadata when absolutely necessary const conditions = derivedMemo(columns, $columns => { - let newConditions = [] + let newConditions: UICondition[] = [] for (let column of $columns) { for (let condition of column.conditions || []) { newConditions.push({ diff --git a/packages/types/src/ui/stores/grid/columns.ts b/packages/types/src/ui/stores/grid/columns.ts index c6ea801713..0132128f9e 100644 --- a/packages/types/src/ui/stores/grid/columns.ts +++ b/packages/types/src/ui/stores/grid/columns.ts @@ -1,9 +1,15 @@ -import { CalculationType, FieldSchema, FieldType, UIRow } from "@budibase/types" +import { + CalculationType, + FieldSchema, + FieldType, + UICondition, + UIRow, +} from "@budibase/types" export type UIColumn = FieldSchema & { label: string readonly: boolean - conditions: any + conditions?: UICondition[] format?: (row: UIRow) => any related?: { field: string diff --git a/packages/types/src/ui/stores/grid/condition.ts b/packages/types/src/ui/stores/grid/condition.ts index dfd9ee867c..95b9977e4b 100644 --- a/packages/types/src/ui/stores/grid/condition.ts +++ b/packages/types/src/ui/stores/grid/condition.ts @@ -3,7 +3,7 @@ import { FieldType, SearchFilter } from "@budibase/types" export interface UICondition { column: string type: FieldType - referenceValue: string + referenceValue: any operator: SearchFilter["operator"] metadataKey: string metadataValue: string From 27f368ebd714b971a50271f1d14b64a06025f258 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 11 Feb 2025 16:23:00 +0000 Subject: [PATCH 05/66] Ensure conditional UI drawer accurately reflects real bindings --- .../_components/Component/ConditionalUIDrawer.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte index 4b39022880..a33d60a644 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte @@ -216,7 +216,7 @@ placeholder: definition.placeholder, }} nested={definition.nested} - isolated={definition.isolated} + contextAccess={definition.contextAccess} {bindings} {componentBindings} /> From af0c722af1a5c75b394f67f369145a7434b719fb Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Wed, 12 Feb 2025 12:10:53 +0000 Subject: [PATCH 06/66] 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}