Remove MissingRequired components from the client

This commit is contained in:
Adria Navarro 2025-01-28 11:07:40 +01:00
parent 5b3bd1ad17
commit c793bd8f5e
4 changed files with 8 additions and 129 deletions

View File

@ -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}
<ComponentErrorState {componentErrors} />
{:else}
<svelte:component this={constructor} bind:this={ref} {...initialSettings}>

View File

@ -1,23 +1,15 @@
<script lang="ts">
import { getContext } from "svelte"
import { Icon } from "@budibase/bbui"
import MissingRequiredSetting from "./MissingRequiredSetting.svelte"
import MissingRequiredAncestor from "./MissingRequiredAncestor.svelte"
import { UIComponentError } from "@budibase/types"
import ComponentErrorStateCta from "./ComponentErrorStateCTA.svelte"
export let missingRequiredSettings:
| { key: string; label: string }[]
| undefined
export let missingRequiredAncestors: string[] | undefined
export let componentErrors: UIComponentError[] | undefined
const component = getContext("component")
const { styleable, builderStore } = getContext("sdk")
$: styles = { ...$component.styles, normal: {}, custom: null, empty: true }
$: requiredSetting = missingRequiredSettings?.[0]
$: requiredAncestor = missingRequiredAncestors?.[0]
$: errorMessage = componentErrors?.[0]
</script>
@ -25,13 +17,9 @@
{#if $component.errorState}
<div class="component-placeholder" use:styleable={styles}>
<Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
{#if requiredAncestor}
<MissingRequiredAncestor {requiredAncestor} />
{:else if errorMessage}
{#if errorMessage}
{@html errorMessage.message}
<ComponentErrorStateCta error={errorMessage} />
{:else if requiredSetting}
<MissingRequiredSetting {requiredSetting} />
{/if}
</div>
{/if}

View File

@ -1,43 +0,0 @@
<script>
import { getContext } from "svelte"
import { BudibasePrefix } from "stores/components"
export let requiredAncestor
const component = getContext("component")
const { builderStore, componentStore } = getContext("sdk")
$: definition = componentStore.actions.getComponentDefinition($component.type)
$: fullAncestorType = `${BudibasePrefix}${requiredAncestor}`
$: ancestorDefinition =
componentStore.actions.getComponentDefinition(fullAncestorType)
$: pluralName = getPluralName(definition?.name, $component.type)
$: ancestorName = getAncestorName(ancestorDefinition?.name, requiredAncestor)
const getPluralName = (name, type) => {
if (!name) {
name = type.replace(BudibasePrefix, "")
}
return name.endsWith("s") ? `${name}'` : `${name}s`
}
const getAncestorName = name => {
return name || requiredAncestor
}
</script>
<span>
{pluralName} need to be inside a
<mark>{ancestorName}</mark>
</span>
<span>-</span>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span
class="spectrum-Link"
on:click={() => {
builderStore.actions.addParentComponent($component.id, fullAncestorType)
}}
>
Add {ancestorName}
</span>

View File

@ -1,22 +0,0 @@
<script>
import { getContext } from "svelte"
export let requiredSetting
const { builderStore } = getContext("sdk")
</script>
<span>
Add the <mark>{requiredSetting.label}</mark> setting to start using your component
</span>
<span>-</span>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span
class="spectrum-Link"
on:click={() => {
builderStore.actions.highlightSetting(requiredSetting.key)
}}
>
Show me
</span>