diff --git a/lerna.json b/lerna.json index 386fbe425a..81b35e2a6e 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.14.4", + "version": "2.14.5", "npmClient": "yarn", "packages": [ "packages/*", diff --git a/packages/account-portal b/packages/account-portal index bcd86d9034..b23fb3b179 160000 --- a/packages/account-portal +++ b/packages/account-portal @@ -1 +1 @@ -Subproject commit bcd86d9034ba954f013da4c10171bf495ab88189 +Subproject commit b23fb3b17961fb04badd9487913a683fcf26dbe6 diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 2d62a0667e..b05b127b1c 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -85,7 +85,6 @@ const INITIAL_FRONTEND_STATE = { selectedScreenId: null, selectedComponentId: null, selectedLayoutId: null, - hoverComponentId: null, // Client state selectedComponentInstance: null, @@ -93,6 +92,9 @@ const INITIAL_FRONTEND_STATE = { // Onboarding onboarding: false, tourNodes: null, + + // UI state + hoveredComponentId: null, } export const getFrontendStore = () => { @@ -1413,6 +1415,18 @@ export const getFrontendStore = () => { return state }) }, + hover: (componentId, notifyClient = true) => { + if (componentId === get(store).hoveredComponentId) { + return + } + store.update(state => { + state.hoveredComponentId = componentId + return state + }) + if (notifyClient) { + store.actions.preview.sendEvent("hover-component", componentId) + } + }, }, links: { save: async (url, title) => { diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte index 15dd864168..9f7aaa68ce 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte @@ -152,7 +152,7 @@ {#if isDisabled && !syncAutomationsEnabled && action.stepId === ActionStepID.COLLECT}
- Business + Premium
{:else if isDisabled} diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte index 851c5b39c9..937e3b6c69 100644 --- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte +++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte @@ -41,7 +41,7 @@ { label: "False", value: "false" }, ]} /> -{:else if schema.type === "array"} +{:else if schemaHasOptions(schema) && schema.type === "array"} onChange(e, field)} useLabel={false} /> -{:else if ["string", "number", "bigint", "barcodeqr"].includes(schema.type)} +{:else if ["string", "number", "bigint", "barcodeqr", "array"].includes(schema.type)} - import { currentAsset } from "builderStore" - import { findClosestMatchingComponent } from "builderStore/componentUtils" + import { currentAsset, store } from "builderStore" + import { + findClosestMatchingComponent, + findComponent, + } from "builderStore/componentUtils" import { getDatasourceForProvider, getSchemaForDatasource, @@ -20,8 +23,23 @@ component => component._component.endsWith("/form") ) + const resolveDatasource = (currentAsset, componentInstance, form) => { + if (!form && componentInstance._id != $store.selectedComponentId) { + const block = findComponent( + currentAsset.props, + $store.selectedComponentId + ) + const def = store.actions.components.getDefinition(block._component) + return def?.block === true + ? getDatasourceForProvider(currentAsset, block) + : {} + } else { + return getDatasourceForProvider(currentAsset, form) + } + } + // Get that form's schema - $: datasource = getDatasourceForProvider($currentAsset, form) + $: datasource = resolveDatasource($currentAsset, componentInstance, form) $: formSchema = getSchemaForDatasource($currentAsset, datasource)?.schema // Get the schema for the relationship field that this picker is using 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 1d2a1b9617..9928f19a7f 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 @@ -108,6 +108,8 @@ {componentInstance} {componentDefinition} {bindings} + iconTooltip={componentName} + componentTitle={title} /> {/if} {#if section == "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 59c1b5c620..d8508619f3 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 @@ -5,6 +5,9 @@ Drawer, Button, notifications, + AbsTooltip, + Icon, + Body, } from "@budibase/bbui" import { selectedScreen, store } from "builderStore" import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte" @@ -15,6 +18,9 @@ } from "builderStore/dataBinding" export let componentInstance + export let componentDefinition + export let iconTooltip + export let componentTitle let tempValue let drawer @@ -24,6 +30,8 @@ $store.selectedComponentId ) + $: icon = componentDefinition?.icon + const openDrawer = () => { tempValue = runtimeToReadableBinding( bindings, @@ -54,7 +62,19 @@ {#key componentInstance?._id} - Custom CSS overrides all other component styles. +
+ Your CSS will overwrite styles for: + {#if icon} + + + + {componentTitle || ""} + {/if} +
{/key} + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index 65ea172012..2127392bb9 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -36,14 +36,12 @@ // Determine selected component ID $: selectedComponentId = $store.selectedComponentId - $: hoverComponentId = $store.hoverComponentId $: previewData = { appId: $store.appId, layout, screen, selectedComponentId, - hoverComponentId, theme: $store.theme, customTheme: $store.customTheme, previewDevice: $store.previewDevice, @@ -119,8 +117,8 @@ error = event.error || "An unknown error occurred" } else if (type === "select-component" && data.id) { $store.selectedComponentId = data.id - } else if (type === "hover-component" && data.id) { - $store.hoverComponentId = data.id + } else if (type === "hover-component") { + store.actions.components.hover(data.id, false) } else if (type === "update-prop") { await store.actions.components.updateSetting(data.prop, data.value) } else if (type === "update-styles") { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte index 8d4d64e4be..315c0a331e 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte @@ -90,16 +90,7 @@ return findComponentPath($selectedComponent, component._id)?.length > 0 } - const handleMouseover = componentId => { - if ($store.hoverComponentId !== componentId) { - $store.hoverComponentId = componentId - } - } - const handleMouseout = componentId => { - if ($store.hoverComponentId === componentId) { - $store.hoverComponentId = null - } - } + const hover = store.actions.components.hover