MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'refs/remotes/origin/state-and-bindings-panels' into budi-8980-create-state-panel

This commit is contained in:
Peter Clement 2025-01-29 09:54:10 +00:00
parent 680f52adbd 0cf7e5d4ad
commit 6c7667545e
21 changed files with 613 additions and 534 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lerna.json
View File

@ -1,6 +1,6 @@
{
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
"version": "3.3.1",
"version": "3.3.3",
"npmClient": "yarn",
"concurrency": 20,
"command": {

154
packages/bbui/src/Actions/position_dropdown.js → packages/bbui/src/Actions/position_dropdown.ts
View File

@ -1,28 +1,53 @@
import { PopoverAlignment } from "../constants"
// Strategies are defined as [Popover]To[Anchor].
// They can apply for both horizontal and vertical alignment.
const Strategies = {
StartToStart: "StartToStart", // e.g. left alignment
EndToEnd: "EndToEnd", // e.g. right alignment
StartToEnd: "StartToEnd", // e.g. right-outside alignment
EndToStart: "EndToStart", // e.g. left-outside alignment
MidPoint: "MidPoint", // centers relative to midpoints
ScreenEdge: "ScreenEdge", // locks to screen edge
import { PopoverAlignment } from "../constants"
type Strategy =
| "StartToStart"
| "EndToEnd"
| "StartToEnd"
| "EndToStart"
| "MidPoint"
| "ScreenEdge"
export interface Styles {
maxHeight?: number
minWidth?: number
maxWidth?: number
offset?: number
left: number
top: number
}
export default function positionDropdown(element, opts) {
let resizeObserver
export type UpdateHandler = (
anchorBounds: DOMRect,
elementBounds: DOMRect,
styles: Styles
) => Styles
interface Opts {
anchor?: HTMLElement
align: PopoverAlignment
maxHeight?: number
maxWidth?: number
minWidth?: number
useAnchorWidth: boolean
offset: number
customUpdate?: UpdateHandler
resizable: boolean
wrap: boolean
}
export default function positionDropdown(element: HTMLElement, opts: Opts) {
let resizeObserver: ResizeObserver
let latestOpts = opts
// We need a static reference to this function so that we can properly
// clean up the scroll listener.
const scrollUpdate = () => {
updatePosition(latestOpts)
}
const scrollUpdate = () => updatePosition(latestOpts)
// Updates the position of the dropdown
const updatePosition = opts => {
const updatePosition = (opts: Opts) => {
const {
anchor,
align,
@ -45,12 +70,12 @@ export default function positionDropdown(element, opts) {
const winWidth = window.innerWidth
const winHeight = window.innerHeight
const screenOffset = 8
let styles = {
let styles: Styles = {
maxHeight,
minWidth: useAnchorWidth ? anchorBounds.width : minWidth,
maxWidth: useAnchorWidth ? anchorBounds.width : maxWidth,
left: null,
top: null,
left: 0,
top: 0,
}
// Ignore all our logic for custom logic
@ -75,67 +100,67 @@ export default function positionDropdown(element, opts) {
}
// Applies a dynamic max height constraint if appropriate
const applyMaxHeight = height => {
const applyMaxHeight = (height: number) => {
if (!styles.maxHeight && resizable) {
styles.maxHeight = height
}
}
// Applies the X strategy to our styles
const applyXStrategy = strategy => {
const applyXStrategy = (strategy: Strategy) => {
switch (strategy) {
case Strategies.StartToStart:
case "StartToStart":
default:
styles.left = anchorBounds.left
break
case Strategies.EndToEnd:
case "EndToEnd":
styles.left = anchorBounds.right - elementBounds.width
break
case Strategies.StartToEnd:
case "StartToEnd":
styles.left = anchorBounds.right + offset
break
case Strategies.EndToStart:
case "EndToStart":
styles.left = anchorBounds.left - elementBounds.width - offset
break
case Strategies.MidPoint:
case "MidPoint":
styles.left =
anchorBounds.left +
anchorBounds.width / 2 -
elementBounds.width / 2
break
case Strategies.ScreenEdge:
case "ScreenEdge":
styles.left = winWidth - elementBounds.width - screenOffset
break
}
}
// Applies the Y strategy to our styles
const applyYStrategy = strategy => {
const applyYStrategy = (strategy: Strategy) => {
switch (strategy) {
case Strategies.StartToStart:
case "StartToStart":
styles.top = anchorBounds.top
applyMaxHeight(winHeight - anchorBounds.top - screenOffset)
break
case Strategies.EndToEnd:
case "EndToEnd":
styles.top = anchorBounds.bottom - elementBounds.height
applyMaxHeight(anchorBounds.bottom - screenOffset)
break
case Strategies.StartToEnd:
case "StartToEnd":
default:
styles.top = anchorBounds.bottom + offset
applyMaxHeight(winHeight - anchorBounds.bottom - screenOffset)
break
case Strategies.EndToStart:
case "EndToStart":
styles.top = anchorBounds.top - elementBounds.height - offset
applyMaxHeight(anchorBounds.top - screenOffset)
break
case Strategies.MidPoint:
case "MidPoint":
styles.top =
anchorBounds.top +
anchorBounds.height / 2 -
elementBounds.height / 2
break
case Strategies.ScreenEdge:
case "ScreenEdge":
styles.top = winHeight - elementBounds.height - screenOffset
applyMaxHeight(winHeight - 2 * screenOffset)
break
@ -144,21 +169,21 @@ export default function positionDropdown(element, opts) {
// Determine X strategy
if (align === PopoverAlignment.Right) {
applyXStrategy(Strategies.EndToEnd)
applyXStrategy("EndToEnd")
} else if (
align === PopoverAlignment.RightOutside ||
align === PopoverAlignment.RightContextMenu
) {
applyXStrategy(Strategies.StartToEnd)
applyXStrategy("StartToEnd")
} else if (
align === PopoverAlignment.LeftOutside ||
align === PopoverAlignment.LeftContextMenu
) {
applyXStrategy(Strategies.EndToStart)
applyXStrategy("EndToStart")
} else if (align === PopoverAlignment.Center) {
applyXStrategy(Strategies.MidPoint)
applyXStrategy("MidPoint")
} else {
applyXStrategy(Strategies.StartToStart)
applyXStrategy("StartToStart")
}
// Determine Y strategy
@ -166,68 +191,73 @@ export default function positionDropdown(element, opts) {
align === PopoverAlignment.RightOutside ||
align === PopoverAlignment.LeftOutside
) {
applyYStrategy(Strategies.MidPoint)
applyYStrategy("MidPoint")
} else if (
align === "right-context-menu" ||
align === "left-context-menu"
align === PopoverAlignment.RightContextMenu ||
align === PopoverAlignment.LeftContextMenu
) {
applyYStrategy(Strategies.StartToStart)
styles.top -= 5 // Manual adjustment for action menu padding
applyYStrategy("StartToStart")
if (styles.top) {
styles.top -= 5 // Manual adjustment for action menu padding
}
} else {
applyYStrategy(Strategies.StartToEnd)
applyYStrategy("StartToEnd")
}
// Handle screen overflow
if (doesXOverflow()) {
// Swap left to right
if (align === "left") {
applyXStrategy(Strategies.EndToEnd)
if (align === PopoverAlignment.Left) {
applyXStrategy("EndToEnd")
}
// Swap right-outside to left-outside
else if (align === "right-outside") {
applyXStrategy(Strategies.EndToStart)
else if (align === PopoverAlignment.RightOutside) {
applyXStrategy("EndToStart")
}
}
if (doesYOverflow()) {
// If wrapping, lock to the bottom of the screen and also reposition to
// the side to not block the anchor
if (wrap) {
applyYStrategy(Strategies.MidPoint)
applyYStrategy("MidPoint")
if (doesYOverflow()) {
applyYStrategy(Strategies.ScreenEdge)
applyYStrategy("ScreenEdge")
}
applyXStrategy(Strategies.StartToEnd)
applyXStrategy("StartToEnd")
if (doesXOverflow()) {
applyXStrategy(Strategies.EndToStart)
applyXStrategy("EndToStart")
}
}
// Othewise invert as normal
// Otherwise invert as normal
else {
// If using an outside strategy then lock to the bottom of the screen
if (align === "left-outside" || align === "right-outside") {
applyYStrategy(Strategies.ScreenEdge)
if (
align === PopoverAlignment.LeftOutside ||
align === PopoverAlignment.RightOutside
) {
applyYStrategy("ScreenEdge")
}
// Otherwise flip above
else {
applyYStrategy(Strategies.EndToStart)
applyYStrategy("EndToStart")
}
}
}
}
// Apply styles
Object.entries(styles).forEach(([style, value]) => {
for (const [key, value] of Object.entries(styles)) {
const name = key as keyof Styles
if (value != null) {
element.style[style] = `${value.toFixed(0)}px`
element.style[name] = `${value}px`
} else {
element.style[style] = null
element.style[name] = ""
}
})
}
}
// The actual svelte action callback which creates observers on the relevant
// DOM elements
const update = newOpts => {
const update = (newOpts: Opts) => {
latestOpts = newOpts
// Cleanup old state

15
packages/bbui/src/Form/Core/Checkbox.svelte
View File

@ -1,22 +1,23 @@
<script>
<script lang="ts">
import "@spectrum-css/checkbox/dist/index-vars.css"
import "@spectrum-css/fieldgroup/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
import type { ChangeEventHandler } from "svelte/elements"
export let value = false
export let id = null
export let text = null
export let id: string | undefined = undefined
export let text: string | undefined = undefined
export let disabled = false
export let readonly = false
export let size
export let size: "S" | "M" | "L" | "XL" = "M"
export let indeterminate = false
const dispatch = createEventDispatcher()
const onChange = event => {
dispatch("change", event.target.checked)
const onChange: ChangeEventHandler<HTMLInputElement> = event => {
dispatch("change", event.currentTarget.checked)
}
$: sizeClass = `spectrum-Checkbox--size${size || "M"}`
$: sizeClass = `spectrum-Checkbox--size${size}`
</script>
<label

21
packages/bbui/src/Form/Core/CheckboxGroup.svelte
View File

@ -1,19 +1,24 @@
<script>
<script lang="ts" context="module">
type O = any
type V = any
</script>
<script lang="ts" generics="O, V">
import "@spectrum-css/fieldgroup/dist/index-vars.css"
import "@spectrum-css/radio/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
export let direction = "vertical"
export let value = []
export let options = []
export let direction: "horizontal" | "vertical" = "vertical"
export let value: V[] = []
export let options: O[] = []
export let disabled = false
export let readonly = false
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let getOptionLabel = (option: O) => `${option}`
export let getOptionValue = (option: O) => option as unknown as V
const dispatch = createEventDispatcher()
const dispatch = createEventDispatcher<{ change: V[] }>()
const onChange = optionValue => {
const onChange = (optionValue: V) => {
if (!value.includes(optionValue)) {
dispatch("change", [...value, optionValue])
} else {

33
packages/bbui/src/Form/Core/Combobox.svelte
View File

@ -1,4 +1,10 @@
<script>
<script lang="ts" context="module">
type O = any
</script>
<script lang="ts" generics="O">
import type { ChangeEventHandler } from "svelte/elements"
import "@spectrum-css/inputgroup/dist/index-vars.css"
import "@spectrum-css/popover/dist/index-vars.css"
import "@spectrum-css/menu/dist/index-vars.css"
@ -6,33 +12,38 @@
import clickOutside from "../../Actions/click_outside"
import Popover from "../../Popover/Popover.svelte"
export let value = null
export let id = null
export let value: string | undefined = undefined
export let id: string | undefined = undefined
export let placeholder = "Choose an option or type"
export let disabled = false
export let readonly = false
export let options = []
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let options: O[] = []
export let getOptionLabel = (option: O) => `${option}`
export let getOptionValue = (option: O) => `${option}`
const dispatch = createEventDispatcher()
const dispatch = createEventDispatcher<{
change: string
blur: void
type: string
pick: string
}>()
let open = false
let focus = false
let anchor
const selectOption = value => {
const selectOption = (value: string) => {
dispatch("change", value)
open = false
}
const onType = e => {
const value = e.target.value
const onType: ChangeEventHandler<HTMLInputElement> = e => {
const value = e.currentTarget.value
dispatch("type", value)
selectOption(value)
}
const onPick = value => {
const onPick = (value: string) => {
dispatch("pick", value)
selectOption(value)
}

36
packages/bbui/src/Popover/Popover.svelte
View File

@ -9,36 +9,38 @@
import "@spectrum-css/popover/dist/index-vars.css"
import Portal from "svelte-portal"
import { createEventDispatcher, getContext, onDestroy } from "svelte"
import positionDropdown from "../Actions/position_dropdown"
import positionDropdown, {
type UpdateHandler,
} from "../Actions/position_dropdown"
import clickOutside from "../Actions/click_outside"
import { fly } from "svelte/transition"
import Context from "../context"
import type { KeyboardEventHandler } from "svelte/elements"
import { PopoverAlignment } from "../constants"
const dispatch = createEventDispatcher()
export let anchor: HTMLElement | undefined = undefined
export let anchor: HTMLElement
export let align: PopoverAlignment = PopoverAlignment.Right
export let portalTarget: string | undefined = undefined
export let minWidth: number | undefined = undefined
export let maxWidth: number | undefined = undefined
export let maxHeight: number | undefined = undefined
export let open: boolean = false
export let useAnchorWidth: boolean = false
export let dismissible: boolean = true
export let offset: number = 4
export let open = false
export let useAnchorWidth = false
export let dismissible = true
export let offset = 4
export let customHeight: string | undefined = undefined
export let animate: boolean = true
export let animate = true
export let customZIndex: number | undefined = undefined
export let handlePositionUpdate: Function | undefined = undefined
export let showPopover: boolean = true
export let clickOutsideOverride: boolean = false
export let resizable: boolean = true
export let wrap: boolean = false
export let handlePositionUpdate: UpdateHandler | undefined = undefined
export let showPopover = true
export let clickOutsideOverride = false
export let resizable = true
export let wrap = false
const dispatch = createEventDispatcher<{ open: void; close: void }>()
const animationDuration = 260
let timeout: ReturnType<typeof setTimeout> | undefined
let timeout: ReturnType<typeof setTimeout>
let blockPointerEvents = false
// Portal library lacks types, so we have to type this as any even though it's
@ -83,7 +85,7 @@
}
if (open) {
// Stop propagation if the source is the anchor
let node = e.target as Node
let node = e.target as Node | null
let fromAnchor = false
while (!fromAnchor && node && node.parentNode) {
fromAnchor = node === anchor
@ -98,7 +100,7 @@
}
}
function handleEscape(e: KeyboardEvent) {
const handleEscape: KeyboardEventHandler<HTMLDivElement> = e => {
if (!clickOutsideOverride) {
return
}

120
packages/bbui/src/Popover/Popover.svench
View File

@ -1,120 +0,0 @@
<script>
import { View } from "svench";
import Popover from "./Popover.svelte";
import Button from "../Button/Button.svelte";
import TextButton from "../Button/TextButton.svelte";
import Icon from "../Icons/Icon.svelte";
import Input from "../Form/Input.svelte";
import Select from "../Form/Select.svelte";
let anchorRight;
let anchorLeft;
let dropdownRight;
let dropdownLeft;
const options = ["Column 1", "Column 2", "Super cool column"];
const option1s = ["Is", "Is not", "Contains" , "Does not contain"];
</script>
<style>
.button-group {
margin-top: var(--spacing-l);
display: flex;
justify-content: flex-end;
gap: var(--spacing-s);
}
h6 {
font-size: var(--font-size-m);
margin: 0 0 var(--spacing-l) 0;
font-weight: 600;
}
.input-group-column {
display: flex;
flex-direction: column;
gap: var(--spacing-s);
}
.input-group-row {
display: grid;
grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];
gap: var(--spacing-s);
margin-bottom: var(--spacing-l);
align-items: center;
}
p {
margin:0;
font-size: var(--font-size-xs);
}
</style>
<View name="Simple popover">
<div bind:this={anchorLeft}>
<Button text on:click={dropdownLeft.show}>
<Icon name="view" />
Add View
</Button>
</div>
<Popover bind:this={dropdownLeft} anchor={anchorLeft} align="left">
<h6>Add New View</h6>
<Input thin placeholder="Enter your name" />
<div class="button-group">
<Button secondary on:click={() => alert('Clicked!')}>Cancel</Button>
<Button primary on:click={() => alert('Clicked!')}>Add New View</Button>
</div>
</Popover>
</View>
<View name="Stacked columns">
<div bind:this={anchorRight}>
<Button text on:click={dropdownRight.show}>
<Icon name="addrow" />
Add Row
</Button>
</div>
<Popover bind:this={dropdownRight} anchor={anchorRight}>
<h6>Add New Row</h6>
<div class="input-group-column">
<Input thin placeholder="Enter your string" />
<Input thin placeholder="Enter your string" />
<Input thin placeholder="Enter your string" />
</div>
<div class="button-group">
<Button secondary on:click={() => alert('Clicked!')}>Cancel</Button>
<Button primary on:click={() => alert('Clicked!')}>Add New Row</Button>
</div>
</Popover>
</View>
<View name="Multiple inputs in a row">
<div bind:this={anchorLeft}>
<Button text on:click={dropdownLeft.show}>
<Icon name="filter" />
Add Filter
</Button>
</div>
<Popover bind:this={dropdownLeft} anchor={anchorLeft} align="left">
<h6>Add New Filter</h6>
<div class="input-group-row">
<p>Where</p>
<Select secondary thin name="Test">
{#each options as option}
<option value={option}>{option}</option>
{/each}
</Select>
<Select secondary thin name="Test">
{#each option1s as option1}
<option value={option1}>{option1}</option>
{/each}
</Select>
<Input thin placeholder="Enter your name" />
<Button text on:click={() => alert('Clicked!')}>
<Icon name="close" />
</Button>
</div>
<Button text on:click={() => alert('Clicked!')}>Add Filter</Button>
</Popover>
</View>

2
packages/builder/src/components/common/DetailPopover.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import {
Popover,
PopoverAlignment,
Icon,
PopoverAlignment,
type PopoverAPI,
} from "@budibase/bbui"

69
packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
View File

@ -31,6 +31,11 @@
import IntegrationQueryEditor from "@/components/integration/index.svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
import { findAllComponents } from "@/helpers/components"
import {
extractFields,
extractJSONArrayFields,
extractRelationships,
} from "@/helpers/bindings"
import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
import DataSourceCategory from "@/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
import { API } from "@/api"
@ -81,67 +86,9 @@
value: `{{ literal ${safe(provider._id)} }}`,
type: "provider",
}))
$: links = bindings
// Get only link bindings
.filter(x => x.fieldSchema?.type === "link")
// Filter out bindings provided by forms
.filter(x => !x.component?.endsWith("/form"))
.map(binding => {
const { providerId, readableBinding, fieldSchema } = binding || {}
const { name, tableId } = fieldSchema || {}
const safeProviderId = safe(providerId)
return {
providerId,
label: readableBinding,
fieldName: name,
tableId,
type: "link",
// These properties will be enriched by the client library and provide
// details of the parent row of the relationship field, from context
rowId: `{{ ${safeProviderId}.${safe("_id")} }}`,
rowTableId: `{{ ${safeProviderId}.${safe("tableId")} }}`,
}
})
$: fields = bindings
.filter(
x =>
x.fieldSchema?.type === "attachment" ||
(x.fieldSchema?.type === "array" && x.tableId)
)
.map(binding => {
const { providerId, readableBinding, runtimeBinding } = binding
const { name, type, tableId } = binding.fieldSchema
return {
providerId,
label: readableBinding,
fieldName: name,
fieldType: type,
tableId,
type: "field",
value: `{{ literal ${runtimeBinding} }}`,
}
})
$: jsonArrays = bindings
.filter(
x =>
x.fieldSchema?.type === "jsonarray" ||
(x.fieldSchema?.type === "json" && x.fieldSchema?.subtype === "array")
)
.map(binding => {
const { providerId, readableBinding, runtimeBinding, tableId } = binding
const { name, type, prefixKeys, subtype } = binding.fieldSchema
return {
providerId,
label: readableBinding,
fieldName: name,
fieldType: type,
tableId,
prefixKeys,
type: type === "jsonarray" ? "jsonarray" : "queryarray",
subtype,
value: `{{ literal ${runtimeBinding} }}`,
}
})
$: links = extractRelationships(bindings)
$: fields = extractFields(bindings)
$: jsonArrays = extractJSONArrayFields(bindings)
$: custom = {
type: "custom",
label: "JSON / CSV",

74
packages/builder/src/helpers/bindings.ts Normal file
View File

@ -0,0 +1,74 @@
import { makePropSafe } from "@budibase/string-templates"
import { UIBinding } from "@budibase/types"
export function extractRelationships(bindings: UIBinding[]) {
return (
bindings
// Get only link bindings
.filter(x => x.fieldSchema?.type === "link")
// Filter out bindings provided by forms
.filter(x => !x.component?.endsWith("/form"))
.map(binding => {
const { providerId, readableBinding, fieldSchema } = binding || {}
const { name, tableId } = fieldSchema || {}
const safeProviderId = makePropSafe(providerId)
return {
providerId,
label: readableBinding,
fieldName: name,
tableId,
type: "link",
// These properties will be enriched by the client library and provide
// details of the parent row of the relationship field, from context
rowId: `{{ ${safeProviderId}.${makePropSafe("_id")} }}`,
rowTableId: `{{ ${safeProviderId}.${makePropSafe("tableId")} }}`,
}
})
)
}
export function extractFields(bindings: UIBinding[]) {
return bindings
.filter(
x =>
x.fieldSchema?.type === "attachment" ||
(x.fieldSchema?.type === "array" && x.tableId)
)
.map(binding => {
const { providerId, readableBinding, runtimeBinding } = binding
const { name, type, tableId } = binding.fieldSchema!
return {
providerId,
label: readableBinding,
fieldName: name,
fieldType: type,
tableId,
type: "field",
value: `{{ literal ${runtimeBinding} }}`,
}
})
}
export function extractJSONArrayFields(bindings: UIBinding[]) {
return bindings
.filter(
x =>
x.fieldSchema?.type === "jsonarray" ||
(x.fieldSchema?.type === "json" && x.fieldSchema?.subtype === "array")
)
.map(binding => {
const { providerId, readableBinding, runtimeBinding, tableId } = binding
const { name, type, prefixKeys, subtype } = binding.fieldSchema!
return {
providerId,
label: readableBinding,
fieldName: name,
fieldType: type,
tableId,
prefixKeys,
type: type === "jsonarray" ? "jsonarray" : "queryarray",
subtype,
value: `{{ literal ${runtimeBinding} }}`,
}
})
}

1
packages/builder/src/helpers/index.ts
View File

@ -10,3 +10,4 @@ export {
isBuilderInputFocused,
} from "./helpers"
export * as featureFlag from "./featureFlags"
export * as bindings from "./bindings"

7
packages/builder/src/stores/builder/componentTreeNodes.ts
View File

@ -49,7 +49,12 @@ export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
// Will ensure all parents of a node are expanded so that it is visible in the tree
makeNodeVisible(componentId: string) {
const selectedScreen: Screen = get(selectedScreenStore)
const selectedScreen: Screen | undefined = get(selectedScreenStore)
if (!selectedScreen) {
console.error("Invalid node " + componentId)
return {}
}
const path = findComponentPath(selectedScreen.props, componentId)

51
packages/builder/src/stores/builder/components.ts
View File

@ -34,7 +34,16 @@ import { Utils } from "@budibase/frontend-core"
import { Component, FieldType, Screen, Table } from "@budibase/types"
import { utils } from "@budibase/shared-core"
interface ComponentDefinition {
export interface ComponentState {
components: Record<string, ComponentDefinition>
customComponents: string[]
selectedComponentId?: string
componentToPaste?: Component
settingsCache: Record<string, ComponentSetting[]>
selectedScreenId?: string | null
}
export interface ComponentDefinition {
component: string
name: string
friendlyName?: string
@ -42,9 +51,11 @@ interface ComponentDefinition {
settings?: ComponentSetting[]
features?: Record<string, boolean>
typeSupportPresets?: Record<string, any>
legalDirectChildren: string[]
illegalChildren: string[]
}
interface ComponentSetting {
export interface ComponentSetting {
key: string
type: string
section?: string
@ -55,20 +66,9 @@ interface ComponentSetting {
settings?: ComponentSetting[]
}
interface ComponentState {
components: Record<string, ComponentDefinition>
customComponents: string[]
selectedComponentId: string | null
componentToPaste?: Component | null
settingsCache: Record<string, ComponentSetting[]>
selectedScreenId?: string | null
}
export const INITIAL_COMPONENTS_STATE: ComponentState = {
components: {},
customComponents: [],
selectedComponentId: null,
componentToPaste: null,
settingsCache: {},
}
@ -441,6 +441,11 @@ export class ComponentStore extends BudiStore<ComponentState> {
* @returns
*/
createInstance(componentName: string, presetProps: any, parent: any) {
const screen = get(selectedScreen)
if (!screen) {
throw "A valid screen must be selected"
}
const definition = this.getDefinition(componentName)
if (!definition) {
return null
@ -462,7 +467,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
// Standard post processing
this.enrichEmptySettings(instance, {
parent,
screen: get(selectedScreen),
screen,
useDefaultValues: true,
})
@ -482,7 +487,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
// Add step name to form steps
if (componentName.endsWith("/formstep")) {
const parentForm = findClosestMatchingComponent(
get(selectedScreen).props,
screen.props,
get(selectedComponent)._id,
(component: Component) => component._component.endsWith("/form")
)
@ -542,7 +547,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
// Find the selected component
let selectedComponentId = state.selectedComponentId
if (selectedComponentId?.startsWith(`${screen._id}-`)) {
selectedComponentId = screen.props._id || null
selectedComponentId = screen.props._id
}
const currentComponent = findComponent(
screen.props,
@ -653,7 +658,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
// Determine the next component to select, and select it before deletion
// to avoid an intermediate state of no component selection
const state = get(this.store)
let nextId: string | null = ""
let nextId = ""
if (state.selectedComponentId === component._id) {
nextId = this.getNext()
if (!nextId) {
@ -746,7 +751,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
if (!state.componentToPaste) {
return
}
let newComponentId: string | null = ""
let newComponentId = ""
// Remove copied component if cutting, regardless if pasting works
let componentToPaste = cloneDeep(state.componentToPaste)
@ -848,6 +853,9 @@ export class ComponentStore extends BudiStore<ComponentState> {
const state = get(this.store)
const componentId = state.selectedComponentId
const screen = get(selectedScreen)
if (!screen) {
throw "A valid screen must be selected"
}
const parent = findComponentParent(screen.props, componentId)
const index = parent?._children.findIndex(
(x: Component) => x._id === componentId
@ -897,6 +905,9 @@ export class ComponentStore extends BudiStore<ComponentState> {
const component = get(selectedComponent)
const componentId = component?._id
const screen = get(selectedScreen)
if (!screen) {
throw "A valid screen must be selected"
}
const parent = findComponentParent(screen.props, componentId)
const index = parent?._children.findIndex(
(x: Component) => x._id === componentId
@ -1163,7 +1174,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
}
async handleEjectBlock(componentId: string, ejectedDefinition: Component) {
let nextSelectedComponentId: string | null = null
let nextSelectedComponentId: string | undefined
await screenStore.patch((screen: Screen) => {
const block = findComponent(screen.props, componentId)
@ -1199,7 +1210,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
(x: Component) => x._id === componentId
)
parent._children[index] = ejectedDefinition
nextSelectedComponentId = ejectedDefinition._id ?? null
nextSelectedComponentId = ejectedDefinition._id
}, null)
// Select new root component

2
packages/builder/src/stores/builder/index.js
View File

@ -3,7 +3,7 @@ import { appStore } from "./app.js"
import { componentStore, selectedComponent } from "./components"
import { navigationStore } from "./navigation.js"
import { themeStore } from "./theme.js"
import { screenStore, selectedScreen, sortedScreens } from "./screens.js"
import { screenStore, selectedScreen, sortedScreens } from "./screens"
import { builderStore } from "./builder.js"
import { hoverStore } from "./hover.js"
import { previewStore } from "./preview.js"

36
packages/builder/src/stores/builder/screenComponent.ts
View File

@ -6,12 +6,13 @@ import { findComponentsBySettingsType } from "@/helpers/screen"
import { UIDatasourceType, Screen } from "@budibase/types"
import { queries } from "./queries"
import { views } from "./views"
import { featureFlag } from "@/helpers"
import { bindings, featureFlag } from "@/helpers"
import { getBindableProperties } from "@/dataBinding"
function reduceBy<TItem extends {}, TKey extends keyof TItem>(
key: TKey,
list: TItem[]
) {
): Record<string, any> {
return list.reduce(
(result, item) => ({
...result,
@ -31,6 +32,9 @@ const validationKeyByType: Record<UIDatasourceType, string | null> = {
viewV2: "id",
query: "_id",
custom: null,
link: "rowId",
field: "value",
jsonarray: "value",
}
export const screenComponentErrors = derived(
@ -52,6 +56,9 @@ export const screenComponentErrors = derived(
["table", "dataSource"]
)) {
const componentSettings = component[setting.key]
if (!componentSettings) {
continue
}
const { label } = componentSettings
const type = componentSettings.type as UIDatasourceType
@ -59,8 +66,26 @@ export const screenComponentErrors = derived(
if (!validationKey) {
continue
}
const componentBindings = getBindableProperties(
$selectedScreen,
component._id
)
const componentDatasources = {
...reduceBy(
"rowId",
bindings.extractRelationships(componentBindings)
),
...reduceBy("value", bindings.extractFields(componentBindings)),
...reduceBy(
"value",
bindings.extractJSONArrayFields(componentBindings)
),
}
const resourceId = componentSettings[validationKey]
if (!datasources[resourceId]) {
if (!{ ...datasources, ...componentDatasources }[resourceId]) {
const friendlyTypeName = friendlyNameByType[type] ?? type
result[component._id!] = [
`The ${friendlyTypeName} named "${label}" could not be found`,
@ -78,6 +103,11 @@ export const screenComponentErrors = derived(
...reduceBy("_id", $queries.list),
}
if (!$selectedScreen) {
// Skip validation if a screen is not selected.
return {}
}
return getInvalidDatasources($selectedScreen, datasources)
}
)

187
packages/builder/src/stores/builder/screens.js → packages/builder/src/stores/builder/screens.ts
View File

@ -13,15 +13,32 @@ import {
import { createHistoryStore } from "@/stores/builder/history"
import { API } from "@/api"
import { BudiStore } from "../BudiStore"
import {
FetchAppPackageResponse,
DeleteScreenResponse,
Screen,
Component,
SaveScreenResponse,
} from "@budibase/types"
import { ComponentDefinition } from "./components"
export const INITIAL_SCREENS_STATE = {
screens: [],
selectedScreenId: null,
interface ScreenState {
screens: Screen[]
selectedScreenId?: string
}
export class ScreenStore extends BudiStore {
export const initialScreenState: ScreenState = {
screens: [],
}
// Review the nulls
export class ScreenStore extends BudiStore<ScreenState> {
history: any
delete: any
save: any
constructor() {
super(INITIAL_SCREENS_STATE)
super(initialScreenState)
// Bind scope
this.select = this.select.bind(this)
@ -38,14 +55,16 @@ export class ScreenStore extends BudiStore {
this.removeCustomLayout = this.removeCustomLayout.bind(this)
this.history = createHistoryStore({
getDoc: id => get(this.store).screens?.find(screen => screen._id === id),
getDoc: (id: string) =>
get(this.store).screens?.find(screen => screen._id === id),
selectDoc: this.select,
beforeAction: () => {},
afterAction: () => {
// Ensure a valid component is selected
if (!get(selectedComponent)) {
this.update(state => ({
...state,
selectedComponentId: get(this.store).selected?.props._id,
selectedComponentId: get(selectedScreen)?.props._id,
}))
}
},
@ -59,14 +78,14 @@ export class ScreenStore extends BudiStore {
* Reset entire store back to base config
*/
reset() {
this.store.set({ ...INITIAL_SCREENS_STATE })
this.store.set({ ...initialScreenState })
}
/**
* Replace ALL store screens with application package screens
* @param {object} pkg
* @param {FetchAppPackageResponse} pkg
*/
syncAppScreens(pkg) {
syncAppScreens(pkg: FetchAppPackageResponse) {
this.update(state => ({
...state,
screens: [...pkg.screens],
@ -79,7 +98,7 @@ export class ScreenStore extends BudiStore {
* @param {string} screenId
* @returns
*/
select(screenId) {
select(screenId: string) {
// Check this screen exists
const state = get(this.store)
const screen = state.screens.find(screen => screen._id === screenId)
@ -103,18 +122,18 @@ export class ScreenStore extends BudiStore {
* Recursively parses the entire screen doc and checks for components
* violating illegal child configurations.
*
* @param {object} screen
* @param {Screen} screen
* @throws Will throw an error containing the name of the component causing
* the invalid screen state
*/
validate(screen) {
validate(screen: Screen) {
// Recursive function to find any illegal children in component trees
const findIllegalChild = (
component,
illegalChildren = [],
legalDirectChildren = []
) => {
const type = component._component
component: Component,
illegalChildren: string[] = [],
legalDirectChildren: string[] = []
): string | undefined => {
const type: string = component._component
if (illegalChildren.includes(type)) {
return type
@ -137,7 +156,13 @@ export class ScreenStore extends BudiStore {
illegalChildren = []
}
const definition = componentStore.getDefinition(component._component)
const definition: ComponentDefinition | null =
componentStore.getDefinition(component._component)
if (definition == null) {
throw `Invalid defintion ${component._component}`
}
// Reset whitelist for direct children
legalDirectChildren = []
if (definition?.legalDirectChildren?.length) {
@ -172,7 +197,7 @@ export class ScreenStore extends BudiStore {
const illegalChild = findIllegalChild(screen.props)
if (illegalChild) {
const def = componentStore.getDefinition(illegalChild)
throw `You can't place a ${def.name} here`
throw `You can't place a ${def?.name} here`
}
}
@ -180,10 +205,9 @@ export class ScreenStore extends BudiStore {
* Core save method. If creating a new screen, the store will sync the target
* screen id to ensure that it is selected in the builder
*
* @param {object} screen
* @returns {object}
* @param {Screen} screen The screen being modified/created
*/
async saveScreen(screen) {
async saveScreen(screen: Screen) {
const appState = get(appStore)
// Validate screen structure if the app supports it
@ -228,9 +252,9 @@ export class ScreenStore extends BudiStore {
/**
* After saving a screen, sync plugins and routes to the appStore
* @param {object} savedScreen
* @param {Screen} savedScreen
*/
async syncScreenData(savedScreen) {
async syncScreenData(savedScreen: Screen) {
const appState = get(appStore)
// If plugins changed we need to fetch the latest app metadata
let usedPlugins = appState.usedPlugins
@ -256,28 +280,32 @@ export class ScreenStore extends BudiStore {
* This is slightly better than just a traditional "patch" endpoint and this
* supports deeply mutating the current doc rather than just appending data.
*/
sequentialScreenPatch = Utils.sequential(async (patchFn, screenId) => {
const state = get(this.store)
const screen = state.screens.find(screen => screen._id === screenId)
if (!screen) {
return
}
let clone = cloneDeep(screen)
const result = patchFn(clone)
sequentialScreenPatch = Utils.sequential(
async (patchFn: (screen: Screen) => any, screenId: string) => {
const state = get(this.store)
const screen = state.screens.find(screen => screen._id === screenId)
if (!screen) {
return
}
let clone = cloneDeep(screen)
const result = patchFn(clone)
// An explicit false result means skip this change
if (result === false) {
return
// An explicit false result means skip this change
if (result === false) {
return
}
return this.save(clone)
}
return this.save(clone)
})
)
/**
* @param {function} patchFn
* @param {Function} patchFn the patch action to be applied
* @param {string | null} screenId
* @returns
*/
async patch(patchFn, screenId) {
async patch(
patchFn: (screen: Screen) => any,
screenId?: string | null
): Promise<SaveScreenResponse | void> {
// Default to the currently selected screen
if (!screenId) {
const state = get(this.store)
@ -294,11 +322,11 @@ export class ScreenStore extends BudiStore {
* the screen supplied. If no screen is provided, the target has
* been removed by another user and will be filtered from the store.
* Used to marshal updates for the websocket
* @param {string} screenId
* @param {object} screen
* @returns
*
* @param {string} screenId the target screen id
* @param {Screen} screen the replacement screen
*/
async replace(screenId, screen) {
async replace(screenId: string, screen: Screen) {
if (!screenId) {
return
}
@ -334,20 +362,27 @@ export class ScreenStore extends BudiStore {
* Any deleted screens will then have their routes/links purged
*
* Wrapped by {@link delete}
* @param {object | array} screens
* @returns
* @param {Screen | Screen[]} screens
*/
async deleteScreen(screens) {
async deleteScreen(screens: Screen | Screen[]) {
const screensToDelete = Array.isArray(screens) ? screens : [screens]
// Build array of promises to speed up bulk deletions
let promises = []
let deleteUrls = []
screensToDelete.forEach(screen => {
// Delete the screen
promises.push(API.deleteScreen(screen._id, screen._rev))
// Remove links to this screen
deleteUrls.push(screen.routing.route)
})
let promises: Promise<DeleteScreenResponse>[] = []
let deleteUrls: string[] = []
// In this instance _id will have been set
// Underline the expectation that _id and _rev will be set after filtering
screensToDelete
.filter(
(screen): screen is Screen & { _id: string; _rev: string } =>
!!screen._id || !!screen._rev
)
.forEach(screen => {
// Delete the screen
promises.push(API.deleteScreen(screen._id, screen._rev))
// Remove links to this screen
deleteUrls.push(screen.routing.route)
})
await Promise.all(promises)
await navigationStore.deleteLink(deleteUrls)
const deletedIds = screensToDelete.map(screen => screen._id)
@ -359,12 +394,15 @@ export class ScreenStore extends BudiStore {
})
// Deselect the current screen if it was deleted
if (deletedIds.includes(state.selectedScreenId)) {
state.selectedScreenId = null
componentStore.update(state => ({
...state,
selectedComponentId: null,
}))
if (
state.selectedScreenId &&
deletedIds.includes(state.selectedScreenId)
) {
delete state.selectedScreenId
componentStore.update(state => {
delete state.selectedComponentId
return state
})
}
// Update routing
@ -375,7 +413,6 @@ export class ScreenStore extends BudiStore {
return state
})
return null
}
/**
@ -384,18 +421,17 @@ export class ScreenStore extends BudiStore {
* After a successful update, this method ensures that there is only
* ONE home screen per user Role.
*
* @param {object} screen
* @param {Screen} screen
* @param {string} name e.g "routing.homeScreen" or "showNavigation"
* @param {any} value
* @returns
*/
async updateSetting(screen, name, value) {
async updateSetting(screen: Screen, name: string, value: any) {
if (!screen || !name) {
return
}
// Apply setting update
const patchFn = screen => {
const patchFn = (screen: Screen) => {
if (!screen) {
return false
}
@ -422,7 +458,7 @@ export class ScreenStore extends BudiStore {
)
})
if (otherHomeScreens.length && updatedScreen.routing.homeScreen) {
const patchFn = screen => {
const patchFn = (screen: Screen) => {
screen.routing.homeScreen = false
}
for (let otherHomeScreen of otherHomeScreens) {
@ -432,11 +468,11 @@ export class ScreenStore extends BudiStore {
}
// Move to layouts store
async removeCustomLayout(screen) {
async removeCustomLayout(screen: Screen) {
// Pull relevant settings from old layout, if required
const layout = get(layoutStore).layouts.find(x => x._id === screen.layoutId)
const patchFn = screen => {
screen.layoutId = null
const patchFn = (screen: Screen) => {
delete screen.layoutId
screen.showNavigation = layout?.props.navigation !== "None"
screen.width = layout?.props.width || "Large"
}
@ -446,11 +482,14 @@ export class ScreenStore extends BudiStore {
/**
* Parse the entire screen component tree and ensure settings are valid
* and up-to-date. Ensures stability after a product update.
* @param {object} screen
* @param {Screen} screen
*/
async enrichEmptySettings(screen) {
async enrichEmptySettings(screen: Screen) {
// Flatten the recursive component tree
const components = findAllMatchingComponents(screen.props, x => x)
const components = findAllMatchingComponents(
screen.props,
(x: Component) => x
)
// Iterate over all components and run checks
components.forEach(component => {

301
packages/builder/src/stores/builder/tests/screens.test.js
View File

@ -3,7 +3,7 @@ import { get, writable } from "svelte/store"
import { API } from "@/api"
import { Constants } from "@budibase/frontend-core"
import { componentStore, appStore } from "@/stores/builder"
import { INITIAL_SCREENS_STATE, ScreenStore } from "@/stores/builder/screens"
import { initialScreenState, ScreenStore } from "@/stores/builder/screens"
import {
getScreenFixture,
getComponentFixture,
@ -73,7 +73,7 @@ describe("Screens store", () => {
vi.clearAllMocks()
const screenStore = new ScreenStore()
ctx.test = {
ctx.bb = {
get store() {
return get(screenStore)
},
@ -81,74 +81,76 @@ describe("Screens store", () => {
}
})
it("Create base screen store with defaults", ctx => {
expect(ctx.test.store).toStrictEqual(INITIAL_SCREENS_STATE)
it("Create base screen store with defaults", ({ bb }) => {
expect(bb.store).toStrictEqual(initialScreenState)
})
it("Syncs all screens from the app package", ctx => {
expect(ctx.test.store.screens.length).toBe(0)
it("Syncs all screens from the app package", ({ bb }) => {
expect(bb.store.screens.length).toBe(0)
const screens = Array(2)
.fill()
.map(() => getScreenFixture().json())
ctx.test.screenStore.syncAppScreens({ screens })
bb.screenStore.syncAppScreens({ screens })
expect(ctx.test.store.screens).toStrictEqual(screens)
expect(bb.store.screens).toStrictEqual(screens)
})
it("Reset the screen store back to the default state", ctx => {
expect(ctx.test.store.screens.length).toBe(0)
it("Reset the screen store back to the default state", ({ bb }) => {
expect(bb.store.screens.length).toBe(0)
const screens = Array(2)
.fill()
.map(() => getScreenFixture().json())
ctx.test.screenStore.syncAppScreens({ screens })
expect(ctx.test.store.screens).toStrictEqual(screens)
bb.screenStore.syncAppScreens({ screens })
expect(bb.store.screens).toStrictEqual(screens)
ctx.test.screenStore.update(state => ({
bb.screenStore.update(state => ({
...state,
selectedScreenId: screens[0]._id,
}))
ctx.test.screenStore.reset()
bb.screenStore.reset()
expect(ctx.test.store).toStrictEqual(INITIAL_SCREENS_STATE)
expect(bb.store).toStrictEqual(initialScreenState)
})
it("Marks a valid screen as selected", ctx => {
it("Marks a valid screen as selected", ({ bb }) => {
const screens = Array(2)
.fill()
.map(() => getScreenFixture().json())
ctx.test.screenStore.syncAppScreens({ screens })
expect(ctx.test.store.screens.length).toBe(2)
bb.screenStore.syncAppScreens({ screens })
expect(bb.store.screens.length).toBe(2)
ctx.test.screenStore.select(screens[0]._id)
bb.screenStore.select(screens[0]._id)
expect(ctx.test.store.selectedScreenId).toEqual(screens[0]._id)
expect(bb.store.selectedScreenId).toEqual(screens[0]._id)
})
it("Skip selecting a screen if it is not present", ctx => {
it("Skip selecting a screen if it is not present", ({ bb }) => {
const screens = Array(2)
.fill()
.map(() => getScreenFixture().json())
ctx.test.screenStore.syncAppScreens({ screens })
expect(ctx.test.store.screens.length).toBe(2)
bb.screenStore.syncAppScreens({ screens })
expect(bb.store.screens.length).toBe(2)
ctx.test.screenStore.select("screen_abc")
bb.screenStore.select("screen_abc")
expect(ctx.test.store.selectedScreenId).toBeNull()
expect(bb.store.selectedScreenId).toBeUndefined()
})
it("Approve a valid empty screen config", ctx => {
it("Approve a valid empty screen config", ({ bb }) => {
const coreScreen = getScreenFixture()
ctx.test.screenStore.validate(coreScreen.json())
bb.screenStore.validate(coreScreen.json())
})
it("Approve a valid screen config with one component and no illegal children", ctx => {
it("Approve a valid screen config with one component and no illegal children", ({
bb,
}) => {
const coreScreen = getScreenFixture()
const formBlock = getComponentFixture(`${COMP_PREFIX}/formblock`)
@ -157,12 +159,12 @@ describe("Screens store", () => {
const defSpy = vi.spyOn(componentStore, "getDefinition")
defSpy.mockReturnValueOnce(COMPONENT_DEFINITIONS.formblock)
ctx.test.screenStore.validate(coreScreen.json())
bb.screenStore.validate(coreScreen.json())
expect(defSpy).toHaveBeenCalled()
})
it("Reject an attempt to nest invalid components", ctx => {
it("Reject an attempt to nest invalid components", ({ bb }) => {
const coreScreen = getScreenFixture()
const formOne = getComponentFixture(`${COMP_PREFIX}/form`)
@ -178,14 +180,14 @@ describe("Screens store", () => {
return defMap[comp]
})
expect(() => ctx.test.screenStore.validate(coreScreen.json())).toThrowError(
expect(() => bb.screenStore.validate(coreScreen.json())).toThrowError(
`You can't place a ${COMPONENT_DEFINITIONS.form.name} here`
)
expect(defSpy).toHaveBeenCalled()
})
it("Reject an attempt to deeply nest invalid components", ctx => {
it("Reject an attempt to deeply nest invalid components", ({ bb }) => {
const coreScreen = getScreenFixture()
const formOne = getComponentFixture(`${COMP_PREFIX}/form`)
@ -210,14 +212,16 @@ describe("Screens store", () => {
return defMap[comp]
})
expect(() => ctx.test.screenStore.validate(coreScreen.json())).toThrowError(
expect(() => bb.screenStore.validate(coreScreen.json())).toThrowError(
`You can't place a ${COMPONENT_DEFINITIONS.form.name} here`
)
expect(defSpy).toHaveBeenCalled()
})
it("Save a brand new screen and add it to the store. No validation", async ctx => {
it("Save a brand new screen and add it to the store. No validation", async ({
bb,
}) => {
const coreScreen = getScreenFixture()
const formOne = getComponentFixture(`${COMP_PREFIX}/form`)
@ -225,7 +229,7 @@ describe("Screens store", () => {
appStore.set({ features: { componentValidation: false } })
expect(ctx.test.store.screens.length).toBe(0)
expect(bb.store.screens.length).toBe(0)
const newDocId = getScreenDocId()
const newDoc = { ...coreScreen.json(), _id: newDocId }
@ -235,15 +239,15 @@ describe("Screens store", () => {
vi.spyOn(API, "fetchAppRoutes").mockResolvedValue({
routes: [],
})
await ctx.test.screenStore.save(coreScreen.json())
await bb.screenStore.save(coreScreen.json())
expect(saveSpy).toHaveBeenCalled()
expect(ctx.test.store.screens.length).toBe(1)
expect(bb.store.screens.length).toBe(1)
expect(ctx.test.store.screens[0]).toStrictEqual(newDoc)
expect(bb.store.screens[0]).toStrictEqual(newDoc)
expect(ctx.test.store.selectedScreenId).toBe(newDocId)
expect(bb.store.selectedScreenId).toBe(newDocId)
// The new screen should be selected
expect(get(componentStore).selectedComponentId).toBe(
@ -251,7 +255,7 @@ describe("Screens store", () => {
)
})
it("Sync an updated screen to the screen store on save", async ctx => {
it("Sync an updated screen to the screen store on save", async ({ bb }) => {
const existingScreens = Array(4)
.fill()
.map(() => {
@ -261,7 +265,7 @@ describe("Screens store", () => {
return screenDoc
})
ctx.test.screenStore.update(state => ({
bb.screenStore.update(state => ({
...state,
screens: existingScreens.map(screen => screen.json()),
}))
@ -279,16 +283,18 @@ describe("Screens store", () => {
})
// Saved the existing screen having modified it.
await ctx.test.screenStore.save(existingScreens[2].json())
await bb.screenStore.save(existingScreens[2].json())
expect(routeSpy).toHaveBeenCalled()
expect(saveSpy).toHaveBeenCalled()
// On save, the screen is spliced back into the store with the saved content
expect(ctx.test.store.screens[2]).toStrictEqual(existingScreens[2].json())
expect(bb.store.screens[2]).toStrictEqual(existingScreens[2].json())
})
it("Sync API data to relevant stores on save. Updated plugins", async ctx => {
it("Sync API data to relevant stores on save. Updated plugins", async ({
bb,
}) => {
const coreScreen = getScreenFixture()
const newDocId = getScreenDocId()
@ -318,7 +324,7 @@ describe("Screens store", () => {
routes: [],
})
await ctx.test.screenStore.syncScreenData(newDoc)
await bb.screenStore.syncScreenData(newDoc)
expect(routeSpy).toHaveBeenCalled()
expect(appPackageSpy).toHaveBeenCalled()
@ -326,7 +332,9 @@ describe("Screens store", () => {
expect(get(appStore).usedPlugins).toStrictEqual(plugins)
})
it("Sync API updates to relevant stores on save. Plugins unchanged", async ctx => {
it("Sync API updates to relevant stores on save. Plugins unchanged", async ({
bb,
}) => {
const coreScreen = getScreenFixture()
const newDocId = getScreenDocId()
@ -343,7 +351,7 @@ describe("Screens store", () => {
routes: [],
})
await ctx.test.screenStore.syncScreenData(newDoc)
await bb.screenStore.syncScreenData(newDoc)
expect(routeSpy).toHaveBeenCalled()
expect(appPackageSpy).not.toHaveBeenCalled()
@ -352,46 +360,48 @@ describe("Screens store", () => {
expect(get(appStore).usedPlugins).toStrictEqual([plugin])
})
it("Proceed to patch if appropriate config are supplied", async ctx => {
vi.spyOn(ctx.test.screenStore, "sequentialScreenPatch").mockImplementation(
() => {
return false
}
)
it("Proceed to patch if appropriate config are supplied", async ({ bb }) => {
vi.spyOn(bb.screenStore, "sequentialScreenPatch").mockImplementation(() => {
return false
})
const noop = () => {}
await ctx.test.screenStore.patch(noop, "test")
expect(ctx.test.screenStore.sequentialScreenPatch).toHaveBeenCalledWith(
await bb.screenStore.patch(noop, "test")
expect(bb.screenStore.sequentialScreenPatch).toHaveBeenCalledWith(
noop,
"test"
)
})
it("Return from the patch if all valid config are not present", async ctx => {
vi.spyOn(ctx.test.screenStore, "sequentialScreenPatch")
await ctx.test.screenStore.patch()
expect(ctx.test.screenStore.sequentialScreenPatch).not.toBeCalled()
it("Return from the patch if all valid config are not present", async ({
bb,
}) => {
vi.spyOn(bb.screenStore, "sequentialScreenPatch")
await bb.screenStore.patch()
expect(bb.screenStore.sequentialScreenPatch).not.toBeCalled()
})
it("Acquire the currently selected screen on patch, if not specified", async ctx => {
vi.spyOn(ctx.test.screenStore, "sequentialScreenPatch")
await ctx.test.screenStore.patch()
it("Acquire the currently selected screen on patch, if not specified", async ({
bb,
}) => {
vi.spyOn(bb.screenStore, "sequentialScreenPatch")
await bb.screenStore.patch()
const noop = () => {}
ctx.test.screenStore.update(state => ({
bb.screenStore.update(state => ({
...state,
selectedScreenId: "screen_123",
}))
await ctx.test.screenStore.patch(noop)
expect(ctx.test.screenStore.sequentialScreenPatch).toHaveBeenCalledWith(
await bb.screenStore.patch(noop)
expect(bb.screenStore.sequentialScreenPatch).toHaveBeenCalledWith(
noop,
"screen_123"
)
})
// Used by the websocket
it("Ignore a call to replace if no screenId is provided", ctx => {
it("Ignore a call to replace if no screenId is provided", ({ bb }) => {
const existingScreens = Array(4)
.fill()
.map(() => {
@ -400,14 +410,16 @@ describe("Screens store", () => {
screenDoc._json._id = existingDocId
return screenDoc.json()
})
ctx.test.screenStore.syncAppScreens({ screens: existingScreens })
bb.screenStore.syncAppScreens({ screens: existingScreens })
ctx.test.screenStore.replace()
bb.screenStore.replace()
expect(ctx.test.store.screens).toStrictEqual(existingScreens)
expect(bb.store.screens).toStrictEqual(existingScreens)
})
it("Remove a screen from the store if a single screenId is supplied", ctx => {
it("Remove a screen from the store if a single screenId is supplied", ({
bb,
}) => {
const existingScreens = Array(4)
.fill()
.map(() => {
@ -416,17 +428,17 @@ describe("Screens store", () => {
screenDoc._json._id = existingDocId
return screenDoc.json()
})
ctx.test.screenStore.syncAppScreens({ screens: existingScreens })
bb.screenStore.syncAppScreens({ screens: existingScreens })
ctx.test.screenStore.replace(existingScreens[1]._id)
bb.screenStore.replace(existingScreens[1]._id)
const filtered = existingScreens.filter(
screen => screen._id != existingScreens[1]._id
)
expect(ctx.test.store.screens).toStrictEqual(filtered)
expect(bb.store.screens).toStrictEqual(filtered)
})
it("Replace an existing screen with a new version of itself", ctx => {
it("Replace an existing screen with a new version of itself", ({ bb }) => {
const existingScreens = Array(4)
.fill()
.map(() => {
@ -436,7 +448,7 @@ describe("Screens store", () => {
return screenDoc
})
ctx.test.screenStore.update(state => ({
bb.screenStore.update(state => ({
...state,
screens: existingScreens.map(screen => screen.json()),
}))
@ -444,15 +456,14 @@ describe("Screens store", () => {
const formBlock = getComponentFixture(`${COMP_PREFIX}/formblock`)
existingScreens[2].addChild(formBlock)
ctx.test.screenStore.replace(
existingScreens[2]._id,
existingScreens[2].json()
)
bb.screenStore.replace(existingScreens[2]._id, existingScreens[2].json())
expect(ctx.test.store.screens.length).toBe(4)
expect(bb.store.screens.length).toBe(4)
})
it("Add a screen when attempting to replace one not present in the store", ctx => {
it("Add a screen when attempting to replace one not present in the store", ({
bb,
}) => {
const existingScreens = Array(4)
.fill()
.map(() => {
@ -462,7 +473,7 @@ describe("Screens store", () => {
return screenDoc
})
ctx.test.screenStore.update(state => ({
bb.screenStore.update(state => ({
...state,
screens: existingScreens.map(screen => screen.json()),
}))
@ -470,13 +481,13 @@ describe("Screens store", () => {
const newScreenDoc = getScreenFixture()
newScreenDoc._json._id = getScreenDocId()
ctx.test.screenStore.replace(newScreenDoc._json._id, newScreenDoc.json())
bb.screenStore.replace(newScreenDoc._json._id, newScreenDoc.json())
expect(ctx.test.store.screens.length).toBe(5)
expect(ctx.test.store.screens[4]).toStrictEqual(newScreenDoc.json())
expect(bb.store.screens.length).toBe(5)
expect(bb.store.screens[4]).toStrictEqual(newScreenDoc.json())
})
it("Delete a single screen and remove it from the store", async ctx => {
it("Delete a single screen and remove it from the store", async ({ bb }) => {
const existingScreens = Array(3)
.fill()
.map(() => {
@ -486,14 +497,14 @@ describe("Screens store", () => {
return screenDoc
})
ctx.test.screenStore.update(state => ({
bb.screenStore.update(state => ({
...state,
screens: existingScreens.map(screen => screen.json()),
}))
const deleteSpy = vi.spyOn(API, "deleteScreen")
await ctx.test.screenStore.delete(existingScreens[2].json())
await bb.screenStore.delete(existingScreens[2].json())
vi.spyOn(API, "fetchAppRoutes").mockResolvedValue({
routes: [],
@ -501,13 +512,15 @@ describe("Screens store", () => {
expect(deleteSpy).toBeCalled()
expect(ctx.test.store.screens.length).toBe(2)
expect(bb.store.screens.length).toBe(2)
// Just confirm that the routes at are being initialised
expect(get(appStore).routes).toEqual([])
})
it("Upon delete, reset selected screen and component ids if the screen was selected", async ctx => {
it("Upon delete, reset selected screen and component ids if the screen was selected", async ({
bb,
}) => {
const existingScreens = Array(3)
.fill()
.map(() => {
@ -517,7 +530,7 @@ describe("Screens store", () => {
return screenDoc
})
ctx.test.screenStore.update(state => ({
bb.screenStore.update(state => ({
...state,
screens: existingScreens.map(screen => screen.json()),
selectedScreenId: existingScreens[2]._json._id,
@ -528,14 +541,16 @@ describe("Screens store", () => {
selectedComponentId: existingScreens[2]._json._id,
}))
await ctx.test.screenStore.delete(existingScreens[2].json())
await bb.screenStore.delete(existingScreens[2].json())
expect(ctx.test.store.screens.length).toBe(2)
expect(get(componentStore).selectedComponentId).toBeNull()
expect(ctx.test.store.selectedScreenId).toBeNull()
expect(bb.store.screens.length).toBe(2)
expect(get(componentStore).selectedComponentId).toBeUndefined()
expect(bb.store.selectedScreenId).toBeUndefined()
})
it("Delete multiple is not supported and should leave the store unchanged", async ctx => {
it("Delete multiple is not supported and should leave the store unchanged", async ({
bb,
}) => {
const existingScreens = Array(3)
.fill()
.map(() => {
@ -547,7 +562,7 @@ describe("Screens store", () => {
const storeScreens = existingScreens.map(screen => screen.json())
ctx.test.screenStore.update(state => ({
bb.screenStore.update(state => ({
...state,
screens: existingScreens.map(screen => screen.json()),
}))
@ -556,42 +571,40 @@ describe("Screens store", () => {
const deleteSpy = vi.spyOn(API, "deleteScreen")
await ctx.test.screenStore.delete(targets)
await bb.screenStore.delete(targets)
expect(deleteSpy).not.toHaveBeenCalled()
expect(ctx.test.store.screens.length).toBe(3)
expect(ctx.test.store.screens).toStrictEqual(storeScreens)
expect(bb.store.screens.length).toBe(3)
expect(bb.store.screens).toStrictEqual(storeScreens)
})
it("Update a screen setting", async ctx => {
it("Update a screen setting", async ({ bb }) => {
const screenDoc = getScreenFixture()
const existingDocId = getScreenDocId()
screenDoc._json._id = existingDocId
await ctx.test.screenStore.update(state => ({
await bb.screenStore.update(state => ({
...state,
screens: [screenDoc.json()],
}))
const patchedDoc = screenDoc.json()
const patchSpy = vi
.spyOn(ctx.test.screenStore, "patch")
.spyOn(bb.screenStore, "patch")
.mockImplementation(async patchFn => {
patchFn(patchedDoc)
return
})
await ctx.test.screenStore.updateSetting(
patchedDoc,
"showNavigation",
false
)
await bb.screenStore.updateSetting(patchedDoc, "showNavigation", false)
expect(patchSpy).toBeCalled()
expect(patchedDoc.showNavigation).toBe(false)
})
it("Ensure only one homescreen per role after updating setting. All screens same role", async ctx => {
it("Ensure only one homescreen per role after updating setting. All screens same role", async ({
bb,
}) => {
const existingScreens = Array(3)
.fill()
.map(() => {
@ -611,23 +624,21 @@ describe("Screens store", () => {
// Set the 2nd screen as the home screen
storeScreens[1].routing.homeScreen = true
await ctx.test.screenStore.update(state => ({
await bb.screenStore.update(state => ({
...state,
screens: storeScreens,
}))
const patchSpy = vi
.spyOn(ctx.test.screenStore, "patch")
.spyOn(bb.screenStore, "patch")
.mockImplementation(async (patchFn, screenId) => {
const target = ctx.test.store.screens.find(
screen => screen._id === screenId
)
const target = bb.store.screens.find(screen => screen._id === screenId)
patchFn(target)
await ctx.test.screenStore.replace(screenId, target)
await bb.screenStore.replace(screenId, target)
})
await ctx.test.screenStore.updateSetting(
await bb.screenStore.updateSetting(
storeScreens[0],
"routing.homeScreen",
true
@ -637,13 +648,15 @@ describe("Screens store", () => {
expect(patchSpy).toBeCalledTimes(2)
// The new homescreen for BASIC
expect(ctx.test.store.screens[0].routing.homeScreen).toBe(true)
expect(bb.store.screens[0].routing.homeScreen).toBe(true)
// The previous home screen for the BASIC role is now unset
expect(ctx.test.store.screens[1].routing.homeScreen).toBe(false)
expect(bb.store.screens[1].routing.homeScreen).toBe(false)
})
it("Ensure only one homescreen per role when updating screen setting. Multiple screen roles", async ctx => {
it("Ensure only one homescreen per role when updating screen setting. Multiple screen roles", async ({
bb,
}) => {
const expectedRoles = [
Constants.Roles.BASIC,
Constants.Roles.POWER,
@ -675,30 +688,24 @@ describe("Screens store", () => {
sorted[9].routing.homeScreen = true
// Set screens state
await ctx.test.screenStore.update(state => ({
await bb.screenStore.update(state => ({
...state,
screens: sorted,
}))
const patchSpy = vi
.spyOn(ctx.test.screenStore, "patch")
.spyOn(bb.screenStore, "patch")
.mockImplementation(async (patchFn, screenId) => {
const target = ctx.test.store.screens.find(
screen => screen._id === screenId
)
const target = bb.store.screens.find(screen => screen._id === screenId)
patchFn(target)
await ctx.test.screenStore.replace(screenId, target)
await bb.screenStore.replace(screenId, target)
})
// ADMIN homeScreen updated from 0 to 2
await ctx.test.screenStore.updateSetting(
sorted[2],
"routing.homeScreen",
true
)
await bb.screenStore.updateSetting(sorted[2], "routing.homeScreen", true)
const results = ctx.test.store.screens.reduce((acc, screen) => {
const results = bb.store.screens.reduce((acc, screen) => {
if (screen.routing.homeScreen) {
acc[screen.routing.roleId] = acc[screen.routing.roleId] || []
acc[screen.routing.roleId].push(screen)
@ -706,7 +713,7 @@ describe("Screens store", () => {
return acc
}, {})
const screens = ctx.test.store.screens
const screens = bb.store.screens
// Should still only be one of each homescreen
expect(results[Constants.Roles.ADMIN].length).toBe(1)
expect(screens[2].routing.homeScreen).toBe(true)
@ -724,74 +731,80 @@ describe("Screens store", () => {
expect(patchSpy).toBeCalledTimes(2)
})
it("Sequential patch check. Exit if the screenId is not valid.", async ctx => {
it("Sequential patch check. Exit if the screenId is not valid.", async ({
bb,
}) => {
const screenDoc = getScreenFixture()
const existingDocId = getScreenDocId()
screenDoc._json._id = existingDocId
const original = screenDoc.json()
await ctx.test.screenStore.update(state => ({
await bb.screenStore.update(state => ({
...state,
screens: [original],
}))
const saveSpy = vi
.spyOn(ctx.test.screenStore, "save")
.spyOn(bb.screenStore, "save")
.mockImplementation(async () => {
return
})
// A screen with this Id does not exist
await ctx.test.screenStore.sequentialScreenPatch(() => {}, "123")
await bb.screenStore.sequentialScreenPatch(() => {}, "123")
expect(saveSpy).not.toBeCalled()
})
it("Sequential patch check. Exit if the patchFn result is false", async ctx => {
it("Sequential patch check. Exit if the patchFn result is false", async ({
bb,
}) => {
const screenDoc = getScreenFixture()
const existingDocId = getScreenDocId()
screenDoc._json._id = existingDocId
const original = screenDoc.json()
// Set screens state
await ctx.test.screenStore.update(state => ({
await bb.screenStore.update(state => ({
...state,
screens: [original],
}))
const saveSpy = vi
.spyOn(ctx.test.screenStore, "save")
.spyOn(bb.screenStore, "save")
.mockImplementation(async () => {
return
})
// Returning false from the patch will abort the save
await ctx.test.screenStore.sequentialScreenPatch(() => {
await bb.screenStore.sequentialScreenPatch(() => {
return false
}, "123")
expect(saveSpy).not.toBeCalled()
})
it("Sequential patch check. Patch applied and save requested", async ctx => {
it("Sequential patch check. Patch applied and save requested", async ({
bb,
}) => {
const screenDoc = getScreenFixture()
const existingDocId = getScreenDocId()
screenDoc._json._id = existingDocId
const original = screenDoc.json()
await ctx.test.screenStore.update(state => ({
await bb.screenStore.update(state => ({
...state,
screens: [original],
}))
const saveSpy = vi
.spyOn(ctx.test.screenStore, "save")
.spyOn(bb.screenStore, "save")
.mockImplementation(async () => {
return
})
await ctx.test.screenStore.sequentialScreenPatch(screen => {
await bb.screenStore.sequentialScreenPatch(screen => {
screen.name = "updated"
}, existingDocId)

9
packages/builder/src/stores/builder/websocket.ts
View File

@ -16,7 +16,14 @@ import { auth, appsStore } from "@/stores/portal"
import { screenStore } from "./screens"
import { SocketEvent, BuilderSocketEvent, helpers } from "@budibase/shared-core"
import { notifications } from "@budibase/bbui"
import { Automation, Datasource, Role, Table, UIUser } from "@budibase/types"
import {
Automation,
Datasource,
Role,
Table,
UIUser,
Screen,
} from "@budibase/types"
export const createBuilderWebsocket = (appId: string) => {
const socket = createWebsocket("/socket/builder")

2
packages/frontend-core/src/utils/utils.js
View File

@ -8,7 +8,7 @@ export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
* Utility to wrap an async function and ensure all invocations happen
* sequentially.
* @param fn the async function to run
* @return {Promise} a sequential version of the function
* @return {Function} a sequential version of the function
*/
export const sequential = fn => {
let queue = []

15
packages/types/src/ui/bindings/binding.ts
View File

@ -24,3 +24,18 @@ export type InsertAtPositionFn = (_: {
value: string
cursor?: { anchor: number }
}) => void
export interface UIBinding {
tableId?: string
fieldSchema?: {
name: string
tableId: string
type: string
subtype?: string
prefixKeys?: string
}
component?: string
providerId: string
readableBinding?: string
runtimeBinding?: string
}

10
packages/types/src/ui/datasource.ts
View File

@ -1 +1,9 @@
export type UIDatasourceType = "table" | "view" | "viewV2" | "query" | "custom"
export type UIDatasourceType =
| "table"
| "view"
| "viewV2"
| "query"
| "custom"
| "link"
| "field"
| "jsonarray"