diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 345603fe3a..cbe93add57 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -29,7 +29,6 @@ import EmptyPlaceholder from "components/app/EmptyPlaceholder.svelte" import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte" import ComponentErrorState from "components/error-states/ComponentErrorState.svelte" - import { BudibasePrefix } from "../stores/components.js" import { decodeJSBinding, findHBSBlocks, @@ -102,7 +101,6 @@ let definition let settingsDefinition let settingsDefinitionMap - let missingRequiredSettings = false let componentErrors = false // Temporary styles which can be added in the app preview for things like @@ -141,18 +139,11 @@ $: componentErrors = instance?._meta?.errors $: hasChildren = !!definition?.hasChildren $: showEmptyState = definition?.showEmptyState !== false - $: hasMissingRequiredSettings = missingRequiredSettings?.length > 0 + $: hasMissingRequiredSettings = !!componentErrors?.find( + e => e.errorType === "setting" + ) $: editable = !!definition?.editable && !hasMissingRequiredSettings $: hasComponentErrors = componentErrors?.length > 0 - $: requiredAncestors = definition?.requiredAncestors || [] - $: missingRequiredAncestors = requiredAncestors.filter( - ancestor => !$component.ancestors.includes(`${BudibasePrefix}${ancestor}`) - ) - $: hasMissingRequiredAncestors = missingRequiredAncestors?.length > 0 - $: errorState = - hasMissingRequiredSettings || - hasMissingRequiredAncestors || - hasComponentErrors // Interactive components can be selected, dragged and highlighted inside // the builder preview @@ -218,7 +209,7 @@ styles: normalStyles, draggable, definition, - errored: errorState, + errored: hasComponentErrors, } // When dragging and dropping, pad components to allow dropping between @@ -251,9 +242,8 @@ name, editing, type: instance._component, - errorState, + errorState: hasComponentErrors, parent: id, - ancestors: [...($component?.ancestors ?? []), instance._component], path: [...($component?.path ?? []), id], darkMode, }) @@ -310,40 +300,6 @@ staticSettings = instanceSettings.staticSettings dynamicSettings = instanceSettings.dynamicSettings - // Check if we have any missing required settings - missingRequiredSettings = settingsDefinition.filter(setting => { - let empty = instance[setting.key] == null || instance[setting.key] === "" - let missing = setting.required && empty - - // Check if this setting depends on another, as it may not be required - if (setting.dependsOn) { - const dependsOnKey = setting.dependsOn.setting || setting.dependsOn - const dependsOnValue = setting.dependsOn.value - const realDependentValue = instance[dependsOnKey] - - const sectionDependsOnKey = - setting.sectionDependsOn?.setting || setting.sectionDependsOn - const sectionDependsOnValue = setting.sectionDependsOn?.value - const sectionRealDependentValue = instance[sectionDependsOnKey] - - if (dependsOnValue == null && realDependentValue == null) { - return false - } - if (dependsOnValue != null && dependsOnValue !== realDependentValue) { - return false - } - - if ( - sectionDependsOnValue != null && - sectionDependsOnValue !== sectionRealDependentValue - ) { - return false - } - } - - return missing - }) - // When considering bindings we can ignore children, so we remove that // before storing the reference stringified version const noChildren = JSON.stringify({ ...instance, _children: null }) @@ -686,7 +642,7 @@ class:pad class:parent={hasChildren} class:block={isBlock} - class:error={errorState} + class:error={hasComponentErrors} class:root={isRoot} data-id={id} data-name={name} @@ -694,7 +650,7 @@ data-parent={$component.id} use:gridLayout={gridMetadata} > - {#if errorState} + {#if hasComponentErrors} {:else} diff --git a/packages/client/src/components/error-states/ComponentErrorState.svelte b/packages/client/src/components/error-states/ComponentErrorState.svelte index 45740f4c2d..16c744b25f 100644 --- a/packages/client/src/components/error-states/ComponentErrorState.svelte +++ b/packages/client/src/components/error-states/ComponentErrorState.svelte @@ -1,23 +1,15 @@ @@ -25,13 +17,9 @@ {#if $component.errorState}
- {#if requiredAncestor} - - {:else if errorMessage} + {#if errorMessage} {@html errorMessage.message} - {:else if requiredSetting} - {/if}
{/if} diff --git a/packages/client/src/components/error-states/MissingRequiredAncestor.svelte b/packages/client/src/components/error-states/MissingRequiredAncestor.svelte deleted file mode 100644 index c251b1be4e..0000000000 --- a/packages/client/src/components/error-states/MissingRequiredAncestor.svelte +++ /dev/null @@ -1,43 +0,0 @@ - - - - {pluralName} need to be inside a - {ancestorName} - -- - - - { - builderStore.actions.addParentComponent($component.id, fullAncestorType) - }} -> - Add {ancestorName} - diff --git a/packages/client/src/components/error-states/MissingRequiredSetting.svelte b/packages/client/src/components/error-states/MissingRequiredSetting.svelte deleted file mode 100644 index 37e99a3cd1..0000000000 --- a/packages/client/src/components/error-states/MissingRequiredSetting.svelte +++ /dev/null @@ -1,22 +0,0 @@ - - - - Add the {requiredSetting.label} setting to start using your component - -- - - - { - builderStore.actions.highlightSetting(requiredSetting.key) - }} -> - Show me -