Remove MissingRequired components from the client
This commit is contained in:
parent
5b3bd1ad17
commit
c793bd8f5e
|
@ -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}>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue