This commit is contained in:
Adria Navarro 2025-01-22 16:20:33 +01:00
parent d3b22e461e
commit 84c8507bad
2 changed files with 9 additions and 9 deletions

View File

@ -103,7 +103,7 @@
let settingsDefinition let settingsDefinition
let settingsDefinitionMap let settingsDefinitionMap
let missingRequiredSettings = false let missingRequiredSettings = false
let invalidSettings = false let componentErrors = false
// Temporary styles which can be added in the app preview for things like // Temporary styles which can be added in the app preview for things like
// DND. We clear these whenever a new instance is received. // DND. We clear these whenever a new instance is received.
@ -138,12 +138,12 @@
// Derive definition properties which can all be optional, so need to be // Derive definition properties which can all be optional, so need to be
// coerced to booleans // coerced to booleans
$: invalidSettings = instance?._meta?.errors $: componentErrors = instance?._meta?.errors
$: hasChildren = !!definition?.hasChildren $: hasChildren = !!definition?.hasChildren
$: showEmptyState = definition?.showEmptyState !== false $: showEmptyState = definition?.showEmptyState !== false
$: hasMissingRequiredSettings = missingRequiredSettings?.length > 0 $: hasMissingRequiredSettings = missingRequiredSettings?.length > 0
$: editable = !!definition?.editable && !hasMissingRequiredSettings $: editable = !!definition?.editable && !hasMissingRequiredSettings
$: hasInvalidSettings = invalidSettings?.length > 0 $: hasComponentErrors = componentErrors?.length > 0
$: requiredAncestors = definition?.requiredAncestors || [] $: requiredAncestors = definition?.requiredAncestors || []
$: missingRequiredAncestors = requiredAncestors.filter( $: missingRequiredAncestors = requiredAncestors.filter(
ancestor => !$component.ancestors.includes(`${BudibasePrefix}${ancestor}`) ancestor => !$component.ancestors.includes(`${BudibasePrefix}${ancestor}`)
@ -152,7 +152,7 @@
$: errorState = $: errorState =
hasMissingRequiredSettings || hasMissingRequiredSettings ||
hasMissingRequiredAncestors || hasMissingRequiredAncestors ||
hasInvalidSettings hasComponentErrors
// Interactive components can be selected, dragged and highlighted inside // Interactive components can be selected, dragged and highlighted inside
// the builder preview // the builder preview
@ -698,7 +698,7 @@
<ComponentErrorState <ComponentErrorState
{missingRequiredSettings} {missingRequiredSettings}
{missingRequiredAncestors} {missingRequiredAncestors}
{invalidSettings} {componentErrors}
/> />
{:else} {:else}
<svelte:component this={constructor} bind:this={ref} {...initialSettings}> <svelte:component this={constructor} bind:this={ref} {...initialSettings}>

View File

@ -8,7 +8,7 @@
| { key: string; label: string }[] | { key: string; label: string }[]
| undefined | undefined
export let missingRequiredAncestors: string[] | undefined export let missingRequiredAncestors: string[] | undefined
export let invalidSettings: string[] | undefined export let componentErrors: string[] | undefined
const component = getContext("component") const component = getContext("component")
const { styleable, builderStore } = getContext("sdk") const { styleable, builderStore } = getContext("sdk")
@ -16,7 +16,7 @@
$: styles = { ...$component.styles, normal: {}, custom: null, empty: true } $: styles = { ...$component.styles, normal: {}, custom: null, empty: true }
$: requiredSetting = missingRequiredSettings?.[0] $: requiredSetting = missingRequiredSettings?.[0]
$: requiredAncestor = missingRequiredAncestors?.[0] $: requiredAncestor = missingRequiredAncestors?.[0]
$: invalidSetting = invalidSettings?.[0] $: errorMessage = componentErrors?.[0]
</script> </script>
{#if $builderStore.inBuilder} {#if $builderStore.inBuilder}
@ -25,8 +25,8 @@
<Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" /> <Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
{#if requiredAncestor} {#if requiredAncestor}
<MissingRequiredAncestor {requiredAncestor} /> <MissingRequiredAncestor {requiredAncestor} />
{:else if invalidSetting} {:else if errorMessage}
{invalidSetting} {errorMessage}
{:else if requiredSetting} {:else if requiredSetting}
<MissingRequiredSetting {requiredSetting} /> <MissingRequiredSetting {requiredSetting} />
{/if} {/if}