diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte index 5118f7be2e..fa337e085b 100644 --- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte +++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte @@ -26,18 +26,14 @@ let highlightType - $: highlightedSettings = $builderStore.highlightedSettings + $: highlightedProp = $builderStore.highlightedSetting $: allBindings = getAllBindings(bindings, componentBindings, nested) $: safeValue = getSafeValue(value, defaultValue, allBindings) $: replaceBindings = val => readableToRuntimeBinding(allBindings, val) $: if (value) { - const highlightedSetting = highlightedSettings?.find( - setting => setting.key === key - ) - highlightType = highlightedSetting - ? `highlighted-${highlightedSetting.type}` - : "" + highlightType = + highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : "" } const getAllBindings = (bindings, componentBindings, nested) => { 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 121719a568..fcd0ddaafc 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 @@ -57,14 +57,13 @@ $: id, (section = tabs[0]) $: componentName = getComponentName(componentInstance) - $: highlightedSettings = $builderStore.highlightedSettings - $: if (highlightedSettings?.length) { - const settings = highlightedSettings.map(s => s.key) - if (settings.includes("_conditions")) { + $: highlightedSetting = $builderStore.highlightedSetting + $: if (highlightedSetting) { + if (highlightedSetting.key === "_conditions") { section = "conditions" - } else if (settings.includes("_styles")) { + } else if (highlightedSetting.key === "_styles") { section = "styles" - } else if (settings.includes("_settings")) { + } else if (highlightedSetting.key === "_settings") { section = "settings" } } diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte index 755aaea9ba..965aee33f4 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte @@ -19,9 +19,7 @@ let tempValue let drawer - $: highlighted = $builderStore.highlightedSettings?.find( - setting => setting.key === "_conditions" - ) + $: highlighted = $builderStore.highlightedSetting?.key === "_conditions" const openDrawer = () => { tempValue = JSON.parse(JSON.stringify(componentInstance?._conditions ?? [])) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte index e936b3bca1..7879a606a7 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte @@ -33,9 +33,7 @@ $: icon = componentDefinition?.icon - $: highlighted = $builderStore.highlightedSettings?.find( - setting => setting.key === "_styles" - ) + $: highlighted = $builderStore.highlightedSetting?.key === "_styles" const openDrawer = () => { tempValue = runtimeToReadableBinding( diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte index 108103cde3..d57e9431be 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte @@ -3,7 +3,6 @@ import AppPreview from "./AppPreview.svelte" import { screenStore, appStore } from "@/stores/builder" import UndoRedoControl from "@/components/common/UndoRedoControl.svelte" - import { ActionButton } from "@budibase/bbui" import BindingsPanel from "./BindingsPanel.svelte" diff --git a/packages/builder/src/stores/builder/builder.ts b/packages/builder/src/stores/builder/builder.ts index 36c47b2838..e4cbbba7f1 100644 --- a/packages/builder/src/stores/builder/builder.ts +++ b/packages/builder/src/stores/builder/builder.ts @@ -8,10 +8,10 @@ import { App } from "@budibase/types" interface BuilderState { previousTopNavPath: Record - highlightedSettings: Array<{ + highlightedSetting: { key: string type: "info" | string - }> | null + } | null propertyFocus: string | null builderSidePanel: boolean onboarding: boolean @@ -24,7 +24,7 @@ interface BuilderState { export const INITIAL_BUILDER_STATE: BuilderState = { previousTopNavPath: {}, - highlightedSettings: null, + highlightedSetting: null, propertyFocus: null, builderSidePanel: false, onboarding: false, @@ -76,29 +76,10 @@ export class BuilderStore extends BudiStore { } highlightSetting(key?: string, type?: string) { - this.update(state => { - if (!key) { - return { - ...state, - highlightedSettings: null, - } - } - - const currentSettings = state.highlightedSettings || [] - - const settingExists = currentSettings.some(setting => setting.key === key) - if (!settingExists) { - return { - ...state, - highlightedSettings: [ - ...currentSettings, - { key, type: type || "info" }, - ], - } - } - - return state - }) + this.update(state => ({ + ...state, + highlightedSetting: key ? { key, type: type || "info" } : null, + })) } propertyFocus(key: string | null) { diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts index 450487a52f..f1a4916973 100644 --- a/packages/builder/src/stores/builder/components.ts +++ b/packages/builder/src/stores/builder/components.ts @@ -718,7 +718,7 @@ export class ComponentStore extends BudiStore { */ select(componentId: string) { builderStore.update(state => { - state.highlightedSettings = null + state.highlightedSetting = null return state })