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

Merge branch 'master' of github.com:budibase/budibase into budi-8417-check-error-responses-in-middleware-for-environment

This commit is contained in:
Sam Rose 2024-07-04 09:56:37 +01:00
parent 16e293a9ff d7931890f5
commit ea1b0d4f5c
No known key found for this signature in database
27 changed files with 1461 additions and 730 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": "2.29.11",
"version": "2.29.12",
"npmClient": "yarn",
"packages": [
"packages/*",

24
packages/bbui/src/Tooltip/TooltipWrapper.svelte
View File

@ -1,33 +1,25 @@
<script>
import Tooltip from "./Tooltip.svelte"
import Icon from "../Icon/Icon.svelte"
import AbsTooltip from "./AbsTooltip.svelte"
export let tooltip = ""
export let size = "M"
export let disabled = true
let showTooltip = false
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class:container={!!tooltip}>
<slot />
{#if tooltip}
<div class="icon-container">
<AbsTooltip text={tooltip}>
<div
class="icon"
class:icon-small={size === "M" || size === "S"}
on:mouseover={() => (showTooltip = true)}
on:mouseleave={() => (showTooltip = false)}
on:focus
>
<Icon name="InfoOutline" size="S" {disabled} />
<Icon name="InfoOutline" size="S" {disabled} hoverable />
</div>
{#if showTooltip}
<div class="tooltip">
<Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
</div>
{/if}
</AbsTooltip>
</div>
{/if}
</div>
@ -44,14 +36,6 @@
margin-left: 5px;
margin-right: 5px;
}
.tooltip {
position: absolute;
display: flex;
justify-content: center;
top: 15px;
z-index: 200;
width: 160px;
}
.icon {
transform: scale(0.75);
}

3
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
View File

@ -112,7 +112,7 @@
This action cannot be undone.
</ConfirmDialog>
<Modal bind:this={testDataModal} width="30%">
<Modal bind:this={testDataModal} width="30%" zIndex={5}>
<TestDataModal />
</Modal>
@ -148,7 +148,6 @@
.header.scrolling {
background: var(--background);
border-bottom: var(--border-light);
border-left: var(--border-light);
z-index: 1;
}

85
packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
View File

@ -8,11 +8,63 @@
import { automationStore, selectedAutomation } from "stores/builder"
import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
import { cloneDeep } from "lodash/fp"
import { memo } from "@budibase/frontend-core"
import { AutomationEventType } from "@budibase/types"
let failedParse = null
let trigger = {}
let schemaProperties = {}
const rowTriggers = [
AutomationEventType.ROW_DELETE,
AutomationEventType.ROW_UPDATE,
AutomationEventType.ROW_SAVE,
]
/**
* Parses the automation test data and ensures it is valid
* @param {object} testData contains all config for the test
* @returns {object} valid testData
* @todo Parse *all* data for each trigger type and relay adequate feedback
*/
const parseTestData = testData => {
const autoTrigger = $selectedAutomation?.definition?.trigger
const { tableId } = autoTrigger?.inputs || {}
// Ensure the tableId matches the trigger table for row trigger automations
if (
rowTriggers.includes(autoTrigger?.event) &&
testData?.row?.tableId !== tableId
) {
return {
// Reset Core fields
row: { tableId },
meta: {},
id: "",
revision: "",
}
} else {
// Leave the core data as it is
return testData
}
}
/**
* Before executing a test run, relay if an automation is in a valid state
* @param {object} trigger The automation trigger config
* @returns {boolean} validation status
* @todo Parse *all* trigger types relay adequate feedback
*/
const isTriggerValid = trigger => {
if (rowTriggers.includes(trigger?.event) && !trigger?.inputs?.tableId) {
return false
}
return true
}
const memoTestData = memo(parseTestData($selectedAutomation.testData))
$: memoTestData.set(parseTestData($selectedAutomation.testData))
$: {
// clone the trigger so we're not mutating the reference
trigger = cloneDeep($selectedAutomation.definition.trigger)
@ -20,34 +72,45 @@
// get the outputs so we can define the fields
let schema = Object.entries(trigger.schema?.outputs?.properties || {})
if (trigger?.event === "app:trigger") {
if (trigger?.event === AutomationEventType.APP_TRIGGER) {
schema = [["fields", { customType: "fields" }]]
}
schemaProperties = schema
}
// check to see if there is existing test data in the store
$: testData = $selectedAutomation.testData || {}
// Check the schema to see if required fields have been entered
$: isError = !trigger.schema.outputs.required.every(
required => testData[required] || required !== "row"
$: isError =
!isTriggerValid(trigger) ||
!trigger.schema.outputs.required.every(
required => $memoTestData?.[required] || required !== "row"
)
function parseTestJSON(e) {
let jsonUpdate
try {
const obj = JSON.parse(e.detail)
jsonUpdate = JSON.parse(e.detail)
failedParse = null
automationStore.actions.addTestDataToAutomation(obj)
} catch (e) {
failedParse = "Invalid JSON"
return false
}
if (rowTriggers.includes(trigger?.event)) {
const tableId = trigger?.inputs?.tableId
// Reset the tableId as it must match the trigger
if (jsonUpdate?.row?.tableId !== tableId) {
jsonUpdate.row.tableId = tableId
}
}
automationStore.actions.addTestDataToAutomation(jsonUpdate)
}
const testAutomation = async () => {
try {
await automationStore.actions.test($selectedAutomation, testData)
await automationStore.actions.test($selectedAutomation, $memoTestData)
$automationStore.showTestPanel = true
} catch (error) {
notifications.error(error)
@ -85,7 +148,7 @@
{#if selectedValues}
<div class="tab-content-padding">
<AutomationBlockSetup
{testData}
testData={$memoTestData}
{schemaProperties}
isTestModal
block={trigger}

652
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View File

@ -1,11 +1,10 @@
<script>
import TableSelector from "./TableSelector.svelte"
import RowSelector from "./RowSelector.svelte"
import FieldSelector from "./FieldSelector.svelte"
import SchemaSetup from "./SchemaSetup.svelte"
import RowSelector from "./RowSelector.svelte"
import {
Button,
Input,
Select,
Label,
ActionButton,
@ -15,26 +14,27 @@
Checkbox,
DatePicker,
DrawerContent,
Helpers,
Toggle,
Icon,
Divider,
} from "@budibase/bbui"
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
import { automationStore, selectedAutomation, tables } from "stores/builder"
import { environment, licensing } from "stores/portal"
import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
import {
BindingSidePanel,
DrawerBindableSlot,
DrawerBindableInput,
ServerBindingPanel as AutomationBindingPanel,
ModalBindableInput,
} from "components/common/bindings"
import CodeEditorModal from "./CodeEditorModal.svelte"
import QuerySelector from "./QuerySelector.svelte"
import QueryParamSelector from "./QueryParamSelector.svelte"
import AutomationSelector from "./AutomationSelector.svelte"
import CronBuilder from "./CronBuilder.svelte"
import Editor from "components/integration/QueryEditor.svelte"
import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
import BindingSidePanel from "components/common/bindings/BindingSidePanel.svelte"
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import { BindingHelpers, BindingType } from "components/common/bindings/utils"
import {
@ -43,31 +43,57 @@
EditorModes,
} from "components/common/CodeEditor"
import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
import { QueryUtils, Utils, search } from "@budibase/frontend-core"
import { QueryUtils, Utils, search, memo } from "@budibase/frontend-core"
import {
getSchemaForDatasourcePlus,
getEnvironmentBindings,
} from "dataBinding"
import { TriggerStepID, ActionStepID } from "constants/backend/automations"
import { onMount } from "svelte"
import { writable } from "svelte/store"
import { cloneDeep } from "lodash/fp"
import {
AutomationEventType,
AutomationStepType,
AutomationActionStepId,
} from "@budibase/types"
import { FIELDS } from "constants/backend"
import PropField from "./PropField.svelte"
export let block
export let testData
export let schemaProperties
export let isTestModal = false
// Stop unnecessary rendering
const memoBlock = memo(block)
const rowTriggers = [
TriggerStepID.ROW_UPDATED,
TriggerStepID.ROW_SAVED,
TriggerStepID.ROW_DELETED,
]
const rowEvents = [
AutomationEventType.ROW_DELETE,
AutomationEventType.ROW_SAVE,
AutomationEventType.ROW_UPDATE,
]
const rowSteps = [ActionStepID.UPDATE_ROW, ActionStepID.CREATE_ROW]
let webhookModal
let drawer
let inputData
let insertAtPos, getCaretPosition
let stepLayouts = {}
$: memoBlock.set(block)
$: filters = lookForFilters(schemaProperties) || []
$: tempFilters = filters
$: stepId = block.stepId
$: bindings = getAvailableBindings(block, $selectedAutomation?.definition)
$: getInputData(testData, block.inputs)
$: getInputData(testData, $memoBlock.inputs)
$: tableId = inputData ? inputData.tableId : null
$: table = tableId
? $tables.list.find(table => table._id === inputData.tableId)
@ -81,31 +107,33 @@
{ allowLinks: true }
)
$: queryLimit = tableId?.includes("datasource") ? "∞" : "1000"
$: isTrigger = block?.type === "TRIGGER"
$: isUpdateRow = stepId === ActionStepID.UPDATE_ROW
$: isTrigger = block?.type === AutomationStepType.TRIGGER
$: codeMode =
stepId === "EXECUTE_BASH" ? EditorModes.Handlebars : EditorModes.JS
stepId === AutomationActionStepId.EXECUTE_BASH
? EditorModes.Handlebars
: EditorModes.JS
$: bindingsHelpers = new BindingHelpers(getCaretPosition, insertAtPos, {
disableWrapping: true,
})
$: editingJs = codeMode === EditorModes.JS
$: requiredProperties = block.schema.inputs.required || []
$: requiredProperties = isTestModal ? [] : block.schema["inputs"].required
$: stepCompletions =
codeMode === EditorModes.Handlebars
? [hbAutocomplete([...bindingsToCompletions(bindings, codeMode)])]
: []
let testDataRowVisibility = {}
const getInputData = (testData, blockInputs) => {
// Test data is not cloned for reactivity
let newInputData = testData || cloneDeep(blockInputs)
// Ensures the app action fields are populated
if (block.event === "app:trigger" && !newInputData?.fields) {
if (
block.event === AutomationEventType.APP_TRIGGER &&
!newInputData?.fields
) {
newInputData = cloneDeep(blockInputs)
}
inputData = newInputData
setDefaultEnumValues()
}
@ -117,15 +145,338 @@
}
}
}
const onChange = Utils.sequential(async (e, key) => {
// Store for any UX related data
const stepStore = writable({})
$: currentStep = $stepStore?.[block.id]
$: customStepLayouts($memoBlock, schemaProperties, currentStep)
const customStepLayouts = block => {
if (
rowSteps.includes(block.stepId) ||
(rowTriggers.includes(block.stepId) && isTestModal)
) {
const schema = schemaProperties.reduce((acc, entry) => {
const [key, val] = entry
acc[key] = val
return acc
}, {})
// Optionally build the rev field config when its needed.
const getRevConfig = () => {
const rowRevEntry = schema["revision"]
if (!rowRevEntry) {
return []
}
const rowRevlabel = getFieldLabel("revision", rowRevEntry)
return isTestModal
? [
{
type: DrawerBindableInput,
title: rowRevlabel,
props: {
panel: AutomationBindingPanel,
value: inputData["revision"],
onChange: e => {
onChange({ ["revision"]: e.detail })
},
bindings,
updateOnChange: false,
forceModal: true,
},
},
]
: []
}
const getIdConfig = () => {
const rowIdentifier = isTestModal ? "id" : "rowId"
const rowIdEntry = schema[rowIdentifier]
if (!rowIdEntry) {
return []
}
const rowIdlabel = getFieldLabel(rowIdentifier, rowIdEntry)
return [
{
type: DrawerBindableInput,
title: rowIdlabel,
props: {
panel: AutomationBindingPanel,
value: inputData[rowIdentifier],
onChange: e => {
onChange({ [rowIdentifier]: e.detail })
},
bindings,
updateOnChange: false,
forceModal: true,
},
},
]
}
// A select to switch from `row` to `oldRow`
const getRowTypeConfig = () => {
if (!isTestModal || block.event !== AutomationEventType.ROW_UPDATE) {
return []
}
if (!$stepStore?.[block.id]) {
stepStore.update(state => ({
...state,
[block.id]: {
rowType: "row",
},
}))
}
return [
{
type: Select,
tooltip: `You can configure test data for both the updated row and
the old row, if you need it. Just select the one you wish to alter`,
title: "Row data",
props: {
value: $stepStore?.[block.id].rowType,
onChange: e => {
stepStore.update(state => ({
...state,
[block.id]: {
rowType: e.detail,
},
}))
},
getOptionLabel: type => type.name,
getOptionValue: type => type.id,
options: [
{
id: "row",
name: "Updated row",
},
{ id: "oldRow", name: "Old row" },
],
},
},
]
}
const getRowSelector = () => {
const baseProps = {
bindings,
isTestModal,
isUpdateRow: block.stepId === ActionStepID.UPDATE_ROW,
}
if (isTestModal && currentStep?.rowType === "oldRow") {
return [
{
type: RowSelector,
props: {
row: inputData["oldRow"] || {
tableId: inputData["row"].tableId,
},
meta: {
fields: inputData["meta"].oldFields || {},
},
onChange: e => {
onChange({
oldRow: e.detail.row,
meta: {
fields: inputData["meta"].fields,
oldFields: e.detail.meta.fields,
},
})
},
...baseProps,
},
},
]
}
return [
{
type: RowSelector,
props: {
row: inputData["row"],
meta: inputData["meta"] || {},
onChange: e => {
onChange(e.detail)
},
...baseProps,
},
},
]
}
stepLayouts[block.stepId] = {
row: {
schema: schema["row"],
//?layout: RowLayoutStepComponent.
content: [
{
type: TableSelector,
title: "Table",
props: {
isTrigger,
value: inputData["row"]?.tableId ?? "",
onChange: e => {
const rowKey = $stepStore?.[block.id]?.rowType || "row"
onChange({
_tableId: e.detail,
meta: {},
[rowKey]: e.detail
? {
tableId: e.detail,
}
: {},
})
},
disabled: isTestModal,
},
},
...getIdConfig(),
...getRevConfig(),
...getRowTypeConfig(),
{
type: Divider,
props: {
noMargin: true,
},
},
...getRowSelector(),
],
},
}
}
}
/**
* Handler for row trigger automation updates.
@param {object} update - An automation block.inputs update object
@example
onRowTriggerUpdate({
"tableId" : "ta_bb_employee"
})
*/
const onRowTriggerUpdate = async update => {
if (
Object.hasOwn(update, "tableId") &&
$selectedAutomation.testData?.row?.tableId !== update.tableId
) {
try {
const reqSchema = getSchemaForDatasourcePlus(update.tableId, {
searchableSchema: true,
}).schema
// Parse the block inputs as usual
const updatedAutomation =
await automationStore.actions.processBlockInputs(block, {
schema: reqSchema,
...update,
})
// Save the entire automation and reset the testData
await automationStore.actions.save({
...updatedAutomation,
testData: {
// Reset Core fields
row: { tableId: update.tableId },
oldRow: { tableId: update.tableId },
meta: {},
id: "",
revision: "",
},
})
return
} catch (e) {
console.error("Error saving automation", e)
notifications.error("Error saving automation")
}
}
}
/**
* Handler for App trigger automation updates.
* Ensure updates to the field list are reflected in testData
@param {object} update - An app trigger update object
@example
onAppTriggerUpdate({
"fields" : {"myField": "123", "myArray": "cat,dog,badger"}
})
*/
const onAppTriggerUpdate = async update => {
try {
// Parse the block inputs as usual
const updatedAutomation =
await automationStore.actions.processBlockInputs(block, {
schema: {},
...update,
})
// Exclude default or invalid data from the test data
let updatedFields = {}
for (const key of Object.keys(block?.inputs?.fields || {})) {
if (Object.hasOwn(update.fields, key)) {
if (key !== "") {
updatedFields[key] = updatedAutomation.testData?.fields?.[key]
}
}
}
// Save the entire automation and reset the testData
await automationStore.actions.save({
...updatedAutomation,
testData: {
fields: updatedFields,
},
})
} catch (e) {
console.error("Error saving automation", e)
notifications.error("Error saving automation")
}
}
/**
* Handler for automation block input updates.
@param {object} update - An automation inputs update object
@example
onChange({
meta: { fields : { "Photo": { useAttachmentBinding: false }} }
row: { "Active": true, "Order Id" : 14, ... }
})
*/
const onChange = Utils.sequential(async update => {
const request = cloneDeep(update)
// Process app trigger updates
if (isTrigger && !isTestModal) {
// Row trigger
if (rowEvents.includes(block.event)) {
await onRowTriggerUpdate(request)
return
}
// App trigger
if (block.event === AutomationEventType.APP_TRIGGER) {
await onAppTriggerUpdate(request)
return
}
}
// We need to cache the schema as part of the definition because it is
// used in the server to detect relationships. It would be far better to
// instead fetch the schema in the backend at runtime.
// If _tableId is explicitly included in the update request, the schema will be requested
let schema
if (e.detail?.tableId) {
schema = getSchemaForDatasourcePlus(e.detail.tableId, {
if (request?._tableId) {
schema = getSchemaForDatasourcePlus(request._tableId, {
searchableSchema: true,
}).schema
delete request._tableId
}
try {
if (isTestModal) {
@ -136,21 +487,22 @@
newTestData = {
...newTestData,
body: {
[key]: e.detail,
...update,
...$selectedAutomation.testData?.body,
},
}
}
newTestData = {
...newTestData,
[key]: e.detail,
...request,
}
await automationStore.actions.addTestDataToAutomation(newTestData)
} else {
const data = { schema, [key]: e.detail }
const data = { schema, ...request }
await automationStore.actions.updateBlockInputs(block, data)
}
} catch (error) {
console.error("Error saving automation", error)
notifications.error("Error saving automation")
}
})
@ -195,14 +547,17 @@
let runtimeName
/* Begin special cases for generating custom schemas based on triggers */
if (idx === 0 && automation.trigger?.event === "app:trigger") {
if (
idx === 0 &&
automation.trigger?.event === AutomationEventType.APP_TRIGGER
) {
return `trigger.fields.${name}`
}
if (
idx === 0 &&
(automation.trigger?.event === "row:update" ||
automation.trigger?.event === "row:save")
(automation.trigger?.event === AutomationEventType.ROW_UPDATE ||
automation.trigger?.event === AutomationEventType.ROW_SAVE)
) {
let noRowKeywordBindings = ["id", "revision", "oldRow"]
if (!noRowKeywordBindings.includes(name)) return `trigger.row.${name}`
@ -277,7 +632,10 @@
}
}
if (idx === 0 && automation.trigger?.event === "app:trigger") {
if (
idx === 0 &&
automation.trigger?.event === AutomationEventType.APP_TRIGGER
) {
schema = Object.fromEntries(
Object.keys(automation.trigger.inputs.fields || []).map(key => [
key,
@ -286,8 +644,9 @@
)
}
if (
(idx === 0 && automation.trigger.event === "row:update") ||
(idx === 0 && automation.trigger.event === "row:save")
(idx === 0 &&
automation.trigger.event === AutomationEventType.ROW_UPDATE) ||
(idx === 0 && automation.trigger.event === AutomationEventType.ROW_SAVE)
) {
let table = $tables.list.find(
table => table._id === automation.trigger.inputs.tableId
@ -353,10 +712,12 @@
function saveFilters(key) {
const filters = QueryUtils.buildQuery(tempFilters)
const defKey = `${key}-def`
onChange({ detail: filters }, key)
// need to store the builder definition in the automation
onChange({ detail: tempFilters }, defKey)
onChange({
[key]: filters,
[`${key}-def`]: tempFilters, // need to store the builder definition in the automation
})
drawer.hide()
}
@ -373,6 +734,7 @@
value.customType !== "cron" &&
value.customType !== "triggerSchema" &&
value.customType !== "automationFields" &&
value.customType !== "fields" &&
value.type !== "signature_single" &&
value.type !== "attachment" &&
value.type !== "attachment_single"
@ -381,11 +743,10 @@
function getFieldLabel(key, value) {
const requiredSuffix = requiredProperties.includes(key) ? "*" : ""
return `${value.title || (key === "row" ? "Row" : key)} ${requiredSuffix}`
}
function toggleTestDataRowVisibility(key) {
testDataRowVisibility[key] = !testDataRowVisibility[key]
const label = `${
value.title || (key === "row" ? "Row" : key)
} ${requiredSuffix}`
return Helpers.capitalise(label)
}
function handleAttachmentParams(keyValueObj) {
@ -398,16 +759,6 @@
return params
}
function toggleAttachmentBinding(e, key) {
onChange(
{
detail: "",
},
key
)
onChange({ detail: { useAttachmentBinding: e.detail } }, "meta")
}
onMount(async () => {
try {
await environment.loadVariables()
@ -417,7 +768,32 @@
})
</script>
<div class="fields">
<div class="step-fields">
<!-- Custom Layouts -->
{#if stepLayouts[block.stepId]}
{#each Object.keys(stepLayouts[block.stepId] || {}) as key}
{#if canShowField(key, stepLayouts[block.stepId].schema)}
{#each stepLayouts[block.stepId][key].content as config}
{#if config.title}
<PropField label={config.title} labelTooltip={config.tooltip}>
<svelte:component
this={config.type}
{...config.props}
on:change={config.props.onChange}
/>
</PropField>
{:else}
<svelte:component
this={config.type}
{...config.props}
on:change={config.props.onChange}
/>
{/if}
{/each}
{/if}
{/each}
{:else}
<!-- Default Schema Property Layout -->
{#each schemaProperties as [key, value]}
{#if canShowField(key, value)}
{@const label = getFieldLabel(key, value)}
@ -426,13 +802,15 @@
<Label
tooltip={value.title === "Binding / Value"
? "If using the String input type, please use a comma or newline separated string"
: null}>{label}</Label
: null}
>
{label}
</Label>
{/if}
<div class:field-width={shouldRenderField(value)}>
{#if value.type === "string" && value.enum && canShowField(key, value)}
<Select
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
value={inputData[key]}
placeholder={false}
options={value.enum}
@ -445,16 +823,14 @@
editorWidth="448"
mode="json"
value={inputData[key]?.value}
on:change={e => {
onChange(e, key)
}}
on:change={e => onChange({ [key]: e.detail })}
/>
{:else if value.type === "boolean"}
<div style="margin-top: 10px">
<Checkbox
text={value.title}
value={inputData[key]}
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
/>
</div>
{:else if value.type === "date"}
@ -463,7 +839,7 @@
panel={AutomationBindingPanel}
type={"date"}
value={inputData[key]}
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
{bindings}
allowJS={true}
updateOnChange={false}
@ -471,12 +847,12 @@
>
<DatePicker
value={inputData[key]}
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
/>
</DrawerBindableSlot>
{:else if value.customType === "column"}
<Select
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
value={inputData[key]}
options={Object.keys(table?.schema || {})}
/>
@ -490,7 +866,14 @@
value={inputData?.meta?.useAttachmentBinding}
text={"Use bindings"}
size={"XS"}
on:change={e => toggleAttachmentBinding(e, key)}
on:change={e => {
onChange({
[key]: null,
meta: {
useAttachmentBinding: e.detail,
},
})
}}
/>
</div>
@ -498,20 +881,19 @@
{#if !inputData?.meta?.useAttachmentBinding}
<KeyValueBuilder
on:change={e =>
onChange(
{
detail: e.detail.map(({ name, value }) => ({
onChange({
[key]: e.detail.map(({ name, value }) => ({
url: name,
filename: value,
})),
},
key
)}
})}
object={handleAttachmentParams(inputData[key])}
allowJS
{bindings}
keyBindings
customButtonText={"Add attachment"}
customButtonText={value.type === "attachment"
? "Add attachment"
: "Add signature"}
keyPlaceholder={"URL"}
valuePlaceholder={"Filename"}
/>
@ -521,18 +903,17 @@
value={inputData[key]}
panel={AutomationBindingPanel}
type={value.customType}
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
{bindings}
updateOnChange={false}
/>
{:else}
<div class="test">
<DrawerBindableInput
title={value.title ?? label}
panel={AutomationBindingPanel}
type={value.customType}
value={inputData[key]}
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
{bindings}
updateOnChange={false}
placeholder={value.customType === "queryLimit"
@ -540,7 +921,6 @@
: ""}
drawerLeft="260px"
/>
</div>
{/if}
</div>
</div>
@ -561,55 +941,20 @@
/>
</DrawerContent>
</Drawer>
{:else if value.customType === "password"}
<Input
type="password"
on:change={e => onChange(e, key)}
value={inputData[key]}
/>
{:else if value.customType === "email"}
{#if isTestModal}
<ModalBindableInput
title={value.title ?? label}
value={inputData[key]}
panel={AutomationBindingPanel}
type="email"
on:change={e => onChange(e, key)}
{bindings}
updateOnChange={false}
/>
{:else}
<DrawerBindableInput
title={value.title ?? label}
panel={AutomationBindingPanel}
type="email"
value={inputData[key]}
on:change={e => onChange(e, key)}
{bindings}
allowJS={false}
updateOnChange={false}
drawerLeft="260px"
/>
{/if}
{:else if value.customType === "query"}
<QuerySelector
on:change={e => onChange(e, key)}
value={inputData[key]}
/>
{:else if value.customType === "cron"}
<CronBuilder
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
value={inputData[key]}
/>
{:else if value.customType === "automationFields"}
<AutomationSelector
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
value={inputData[key]}
{bindings}
/>
{:else if value.customType === "queryParams"}
<QueryParamSelector
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
value={inputData[key]}
{bindings}
/>
@ -617,78 +962,35 @@
<TableSelector
{isTrigger}
value={inputData[key]}
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
/>
{:else if value.customType === "row"}
{#if isTestModal}
<div class="align-horizontally">
<Icon
name={testDataRowVisibility[key] ? "Remove" : "Add"}
hoverable
on:click={() => toggleTestDataRowVisibility(key)}
/>
<Label size="XL">{label}</Label>
</div>
{#if testDataRowVisibility[key]}
<RowSelector
value={inputData[key]}
meta={inputData["meta"] || {}}
on:change={e => {
if (e.detail?.key) {
onChange(e, e.detail.key)
} else {
onChange(e, key)
}
}}
{bindings}
{isTestModal}
{isUpdateRow}
/>
{/if}
<Divider />
{:else}
<RowSelector
value={inputData[key]}
meta={inputData["meta"] || {}}
on:change={e => {
if (e.detail?.key) {
onChange(e, e.detail.key)
} else {
onChange(e, key)
}
}}
{bindings}
{isTestModal}
{isUpdateRow}
/>
{/if}
{:else if value.customType === "webhookUrl"}
<WebhookDisplay
on:change={e => onChange(e, key)}
value={inputData[key]}
/>
<WebhookDisplay value={inputData[key]} />
{:else if value.customType === "fields"}
<FieldSelector
{block}
value={inputData[key]}
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
{bindings}
{isTestModal}
/>
{:else if value.customType === "triggerSchema"}
<SchemaSetup
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
value={inputData[key]}
/>
{:else if value.customType === "code"}
<CodeEditorModal>
<div class:js-editor={editingJs}>
<div class:js-code={editingJs} style="width:100%;height:500px;">
<div
class:js-code={editingJs}
style="width:100%;height:500px;"
>
<CodeEditor
value={inputData[key]}
on:change={e => {
// need to pass without the value inside
onChange({ detail: e.detail }, key)
onChange({ [key]: e.detail })
inputData[key] = e.detail
}}
completions={stepCompletions}
@ -724,7 +1026,7 @@
</CodeEditorModal>
{:else if value.customType === "loopOption"}
<Select
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
autoWidth
value={inputData[key]}
options={["Array", "String"]}
@ -737,18 +1039,18 @@
value={inputData[key]}
panel={AutomationBindingPanel}
type={value.customType}
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
{bindings}
updateOnChange={false}
/>
{:else}
<div class="test">
<div>
<DrawerBindableInput
title={value.title ?? label}
panel={AutomationBindingPanel}
type={value.customType}
value={inputData[key]}
on:change={e => onChange(e, key)}
on:change={e => onChange({ [key]: e.detail })}
{bindings}
updateOnChange={false}
placeholder={value.customType === "queryLimit"
@ -763,12 +1065,14 @@
</div>
{/if}
{/each}
{/if}
</div>
<Modal bind:this={webhookModal} width="30%">
<CreateWebhookModal />
</Modal>
{#if stepId === TriggerStepID.WEBHOOK}
{#if stepId === TriggerStepID.WEBHOOK && !isTestModal}
<Button secondary on:click={() => webhookModal.show()}>Set Up Webhook</Button>
{/if}
@ -777,18 +1081,12 @@
width: 320px;
}
.align-horizontally {
display: flex;
gap: var(--spacing-s);
align-items: center;
}
.fields {
.step-fields {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-s);
gap: var(--spacing-l);
}
.block-field {
@ -808,10 +1106,6 @@
margin-top: var(--spacing-s);
}
.test :global(.drawer) {
width: 10000px !important;
}
.js-editor {
display: flex;
flex-direction: row;

118
packages/builder/src/components/automation/SetupPanel/FieldSelector.svelte
View File

@ -1,19 +1,28 @@
<script>
import { createEventDispatcher } from "svelte"
import RowSelectorTypes from "./RowSelectorTypes.svelte"
import PropField from "./PropField.svelte"
import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
import ModalBindableInput from "../../common/bindings/ModalBindableInput.svelte"
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
import { DatePicker, Select } from "@budibase/bbui"
import { FieldType } from "@budibase/types"
const dispatch = createEventDispatcher()
export let value
export let value = {}
export let bindings
export let block
export let isTestModal
let schemaFields
const { STRING, NUMBER, ARRAY } = FieldType
let schemaFields = []
let editableValue
$: editableValue = { ...value }
$: {
let fields = {}
for (const [key, type] of Object.entries(block?.inputs?.fields ?? {})) {
fields = {
...fields,
@ -25,8 +34,8 @@
},
}
if (value[key] === type) {
value[key] = INITIAL_VALUES[type.toUpperCase()]
if (editableValue[key] === type) {
editableValue[key] = INITIAL_VALUES[type.toUpperCase()]
}
}
@ -38,77 +47,58 @@
NUMBER: null,
DATETIME: null,
STRING: "",
OPTIONS: [],
ARRAY: [],
ARRAY: "",
}
const coerce = (value, type) => {
const re = new RegExp(/{{([^{].*?)}}/g)
if (re.test(value)) {
return value
const onChange = (e, field) => {
if (e.detail !== editableValue[field]) {
editableValue[field] = e.detail
dispatch("change", editableValue)
}
if (type === "boolean") {
if (typeof value === "boolean") {
return value
}
return value === "true"
}
if (type === "number") {
if (typeof value === "number") {
return value
}
return Number(value)
}
if (type === "options") {
return [value]
}
if (type === "array") {
if (Array.isArray(value)) {
return value
}
return value.split(",").map(x => x.trim())
}
if (type === "link") {
if (Array.isArray(value)) {
return value
}
return [value]
}
return value
}
const onChange = (e, field, type) => {
value[field] = coerce(e.detail, type)
dispatch("change", value)
}
</script>
{#if schemaFields.length && isTestModal}
<div class="schema-fields">
{#if schemaFields?.length && isTestModal}
<div class="fields">
{#each schemaFields as [field, schema]}
<RowSelectorTypes
{isTestModal}
{field}
{schema}
<PropField label={field}>
{#if [STRING, NUMBER, ARRAY].includes(schema.type)}
<svelte:component
this={isTestModal ? ModalBindableInput : DrawerBindableInput}
panel={AutomationBindingPanel}
value={editableValue[field]}
on:change={e => onChange(e, field)}
type="string"
{bindings}
{value}
{onChange}
allowJS={true}
updateOnChange={false}
title={schema.name}
autocomplete="off"
/>
{:else if schema.type === "boolean"}
<Select
on:change={e => onChange(e, field)}
value={editableValue[field]}
options={[
{ label: "True", value: "true" },
{ label: "False", value: "false" },
]}
/>
{:else if schema.type === "datetime"}
<DatePicker
value={editableValue[field]}
on:change={e => onChange(e, field)}
/>
{/if}
</PropField>
{/each}
</div>
{/if}
<style>
.schema-fields {
display: grid;
grid-gap: var(--spacing-s);
margin-top: var(--spacing-s);
}
.schema-fields :global(label) {
text-transform: capitalize;
.fields {
display: flex;
flex-direction: column;
gap: var(--spacing-m);
}
</style>

60
packages/builder/src/components/automation/SetupPanel/PropField.svelte Normal file
View File

@ -0,0 +1,60 @@
<script>
import { Label } from "@budibase/bbui"
export let label
export let labelTooltip
export let fullWidth = false
export let componentWidth = 320
</script>
<div
class="prop-field"
class:fullWidth
style={`--comp-width: ${componentWidth}px;`}
>
<div class="prop-label" title={label}>
<Label tooltip={labelTooltip}>{label}</Label>
</div>
<div class="prop-control">
<slot />
</div>
</div>
<style>
.prop-field {
display: grid;
grid-template-columns: 1fr var(--comp-width);
}
.prop-field.fullWidth {
grid-template-columns: 1fr;
}
.prop-field.fullWidth .prop-label {
margin-bottom: var(--spacing-s);
}
.prop-label {
display: flex;
align-items: center;
overflow: hidden;
}
.prop-label :global(> div) {
width: 100%;
}
.prop-label :global(> div > label) {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.prop-control {
margin-left: var(--spacing-s);
}
.prop-field.fullWidth .prop-control {
margin-left: 0px;
}
</style>

375
packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
View File

@ -1,28 +1,43 @@
<script>
import { tables } from "stores/builder"
import { Select, Checkbox, Label } from "@budibase/bbui"
import {
ActionButton,
Popover,
Icon,
TooltipPosition,
TooltipType,
} from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { FieldType } from "@budibase/types"
import RowSelectorTypes from "./RowSelectorTypes.svelte"
import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
import { TableNames } from "constants"
import { FIELDS } from "constants/backend"
import { capitalise } from "helpers"
import { memo } from "@budibase/frontend-core"
import PropField from "./PropField.svelte"
import { cloneDeep, isPlainObject, mergeWith } from "lodash"
const dispatch = createEventDispatcher()
export let value
export let row
export let meta
export let bindings
export let isTestModal
export let isUpdateRow
$: parsedBindings = bindings.map(binding => {
let clone = Object.assign({}, binding)
clone.icon = "ShareAndroid"
return clone
const typeToField = Object.values(FIELDS).reduce((acc, field) => {
acc[field.type] = field
return acc
}, {})
const memoStore = memo({
row,
meta,
})
let table
// Row Schema Fields
let schemaFields
let attachmentTypes = [
FieldType.ATTACHMENTS,
@ -30,32 +45,123 @@
FieldType.SIGNATURE_SINGLE,
]
$: {
table = $tables.list.find(table => table._id === value?.tableId)
let customPopover
let popoverAnchor
let editableRow = {}
let editableFields = {}
// Just sorting attachment types to the bottom here for a cleaner UX
schemaFields = Object.entries(table?.schema ?? {}).sort(
([, schemaA], [, schemaB]) =>
(schemaA.type === "attachment") - (schemaB.type === "attachment")
// Avoid unnecessary updates
$: memoStore.set({
row,
meta,
})
$: parsedBindings = bindings.map(binding => {
let clone = Object.assign({}, binding)
clone.icon = "ShareAndroid"
return clone
})
$: tableId = $memoStore?.row?.tableId
$: initData(tableId, $memoStore?.meta?.fields, $memoStore?.row)
const initData = (tableId, metaFields, row) => {
if (!tableId) {
return
}
// Refesh the editable fields
editableFields = cloneDeep(metaFields || {})
// Refresh all the row data
editableRow = cloneDeep(row || {})
table = $tables.list.find(table => table._id === tableId)
if (table) {
editableRow["tableId"] = tableId
schemaFields = Object.entries(table?.schema ?? {})
.filter(entry => {
const [, field] = entry
return field.type !== "formula" && !field.autocolumn
})
.sort(([nameA], [nameB]) => {
return nameA < nameB ? -1 : 1
})
// Parse out any data not in the schema.
for (const column in editableFields) {
if (!Object.hasOwn(table?.schema, column)) {
delete editableFields[column]
}
}
}
// Go through the table schema and build out the editable content
for (const entry of schemaFields) {
const [key, fieldSchema] = entry
const emptyField =
editableRow[key] == null || editableRow[key]?.length === 0
// Put non-empty elements into the update and add their key to the fields list.
if (!emptyField && !Object.hasOwn(editableFields, key)) {
editableFields = {
...editableFields,
[key]: {},
}
}
// Legacy - clearRelationships
// Init the field and add it to the update.
if (emptyField) {
if (editableFields[key]?.clearRelationships === true) {
const emptyField = coerce(
!Object.hasOwn($memoStore?.row, key) ? "" : $memoStore?.row[key],
fieldSchema.type
)
schemaFields.forEach(([, schema]) => {
if (!schema.autocolumn && !value[schema.name]) {
value[schema.name] = ""
// remove this and place the field in the editable row.
delete editableFields[key]?.clearRelationships
// Default the field
editableRow = {
...editableRow,
[key]: emptyField,
}
} else {
// Purge from the update as its presence is not necessary.
delete editableRow[key]
}
})
}
const onChangeTable = e => {
value["tableId"] = e.detail
dispatch("change", value)
}
// Parse all known row schema keys
const schemaKeys = [
"tableId",
...schemaFields.map(entry => {
const [key] = entry
return key
}),
]
// Purge any row keys that are not present in the schema.
for (const rowKey of Object.keys(editableRow)) {
if (!schemaKeys.includes(rowKey)) {
delete editableRow[rowKey]
delete editableFields[rowKey]
}
}
}
// Row coerce
const coerce = (value, type) => {
const re = new RegExp(/{{([^{].*?)}}/g)
if (re.test(value)) {
if (typeof value === "string" && re.test(value)) {
return value
}
if (type === "number") {
if (typeof value === "number") {
return value
@ -66,6 +172,9 @@
return value
}
if (type === "array") {
if (!value) {
return []
}
if (Array.isArray(value)) {
return value
}
@ -73,7 +182,9 @@
}
if (type === "link") {
if (Array.isArray(value)) {
if (!value) {
return []
} else if (Array.isArray(value)) {
return value
}
return value.split(",").map(x => x.trim())
@ -86,70 +197,73 @@
return value
}
const onChange = (e, field, type) => {
let newValue = {
...value,
[field]: coerce(e.detail, type),
}
dispatch("change", newValue)
const isFullWidth = type => {
return (
attachmentTypes.includes(type) ||
type === FieldType.JSON ||
type === FieldType.LONGFORM
)
}
const onChangeSetting = (field, key, value) => {
let newField = {}
newField[field] = {
[key]: value,
const onChange = update => {
const customizer = (objValue, srcValue) => {
if (isPlainObject(objValue) && isPlainObject(srcValue)) {
const result = mergeWith({}, objValue, srcValue, customizer)
let outcome = Object.keys(result).reduce((acc, key) => {
if (result[key] !== null) {
acc[key] = result[key]
}
return acc
}, {})
return outcome
}
return srcValue
}
let updatedFields = {
...meta?.fields,
...newField,
const result = mergeWith(
{},
{
row: editableRow,
meta: {
fields: editableFields,
},
},
update,
customizer
)
dispatch("change", result)
}
dispatch("change", {
key: "meta",
fields: updatedFields,
})
}
// Ensure any nullish tableId values get set to empty string so
// that the select works
$: if (value?.tableId == null) value = { tableId: "" }
</script>
<div class="schema-fields">
<Label>Table</Label>
<div class="field-width">
<Select
on:change={onChangeTable}
value={value.tableId}
options={$tables.list.filter(table => table._id !== TableNames.USERS)}
getOptionLabel={table => table.name}
getOptionValue={table => table._id}
/>
</div>
</div>
{#if schemaFields.length}
{#each schemaFields as [field, schema]}
{#if !schema.autocolumn}
<div class:schema-fields={!attachmentTypes.includes(schema.type)}>
<Label>{field}</Label>
<div class:field-width={!attachmentTypes.includes(schema.type)}>
{#each schemaFields || [] as [field, schema]}
{#if !schema.autocolumn && Object.hasOwn(editableFields, field)}
<PropField label={field} fullWidth={isFullWidth(schema.type)}>
<div class="prop-control-wrap">
{#if isTestModal}
<RowSelectorTypes
{isTestModal}
{field}
{schema}
bindings={parsedBindings}
{value}
value={editableRow}
meta={{
fields: editableFields,
}}
{onChange}
/>
{:else}
<DrawerBindableSlot
title={value.title || field}
title={$memoStore?.row?.title || field}
panel={AutomationBindingPanel}
type={schema.type}
{schema}
value={value[field]}
on:change={e => onChange(e, field)}
value={editableRow[field]}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
{bindings}
allowJS={true}
updateOnChange={false}
@ -160,56 +274,99 @@
{field}
{schema}
bindings={parsedBindings}
{value}
{onChange}
useAttachmentBinding={meta?.fields?.[field]
?.useAttachmentBinding}
{onChangeSetting}
value={editableRow}
meta={{
fields: editableFields,
}}
onChange={change => onChange(change)}
/>
</DrawerBindableSlot>
{/if}
</div>
</PropField>
{/if}
{/each}
{#if isUpdateRow && schema.type === "link"}
<div class="checkbox-field">
<Checkbox
value={meta.fields?.[field]?.clearRelationships}
text={"Clear relationships if empty?"}
size={"S"}
on:change={e =>
onChangeSetting(field, "clearRelationships", e.detail)}
/>
{#if table && schemaFields}
{#key editableFields}
<div
class="add-fields-btn"
class:empty={Object.is(editableFields, {})}
bind:this={popoverAnchor}
>
<ActionButton
icon="Add"
fullWidth
on:click={() => {
customPopover.show()
}}
disabled={!schemaFields}
>Add fields
</ActionButton>
</div>
{/if}
</div>
</div>
{/if}
{/each}
{/key}
{/if}
<Popover
align="center"
bind:this={customPopover}
anchor={popoverAnchor}
useAnchorWidth
maxHeight={300}
resizable={false}
offset={10}
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul class="spectrum-Menu" role="listbox">
{#each schemaFields || [] as [field, schema]}
{#if !schema.autocolumn}
<li
class="table_field spectrum-Menu-item"
class:is-selected={Object.hasOwn(editableFields, field)}
on:click={() => {
if (Object.hasOwn(editableFields, field)) {
delete editableFields[field]
onChange({
meta: { fields: editableFields },
row: { [field]: null },
})
} else {
editableFields[field] = {}
onChange({ meta: { fields: editableFields } })
}
}}
>
<Icon
name={typeToField?.[schema.type]?.icon}
color={"var(--spectrum-global-color-gray-600)"}
tooltip={capitalise(schema.type)}
tooltipType={TooltipType.Info}
tooltipPosition={TooltipPosition.Left}
/>
<div class="field_name spectrum-Menu-itemLabel">{field}</div>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
{/if}
{/each}
</ul>
</Popover>
<style>
.field-width {
width: 320px;
.table_field {
display: flex;
padding: var(--spacing-s) var(--spacing-l);
gap: var(--spacing-s);
}
.schema-fields {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
align-items: center;
gap: 10px;
flex: 1;
margin-bottom: 10px;
}
.schema-fields :global(label) {
text-transform: capitalize;
}
.checkbox-field {
padding-bottom: var(--spacing-s);
padding-left: 1px;
padding-top: var(--spacing-s);
}
.checkbox-field :global(label) {
text-transform: none;
/* Override for general json field override */
.prop-control-wrap :global(.icon.json-slot-icon) {
right: 1px !important;
}
</style>

225
packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
View File

@ -11,17 +11,18 @@
import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
import ModalBindableInput from "../../common/bindings/ModalBindableInput.svelte"
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
import Editor from "components/integration/QueryEditor.svelte"
import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
export let onChange
export let field
export let schema
export let value
export let meta
export let bindings
export let isTestModal
export let useAttachmentBinding
export let onChangeSetting
$: fieldData = value[field]
$: parsedBindings = bindings.map(binding => {
let clone = Object.assign({}, binding)
@ -35,14 +36,15 @@
FieldType.SIGNATURE_SINGLE,
]
let previousBindingState = useAttachmentBinding
function schemaHasOptions(schema) {
return !!schema.constraints?.inclusion?.length
}
function handleAttachmentParams(keyValueObj) {
let params = {}
if (!keyValueObj) {
return null
}
if (!Array.isArray(keyValueObj) && keyValueObj) {
keyValueObj = [keyValueObj]
@ -50,45 +52,68 @@
if (keyValueObj.length) {
for (let param of keyValueObj) {
params[param.url] = param.filename
params[param.url || ""] = param.filename || ""
}
}
return params
}
async function handleToggleChange(toggleField, event) {
if (event.detail === true) {
value[toggleField] = []
} else {
value[toggleField] = ""
const handleMediaUpdate = e => {
const media = e.detail || []
const isSingle =
schema.type === FieldType.ATTACHMENT_SINGLE ||
schema.type === FieldType.SIGNATURE_SINGLE
const parsedMedia = media.map(({ name, value }) => ({
url: name,
filename: value,
}))
if (isSingle) {
const [singleMedia] = parsedMedia
// Return only the first entry
return singleMedia
? {
url: singleMedia.url,
filename: singleMedia.filename,
}
previousBindingState = event.detail
onChangeSetting(toggleField, "useAttachmentBinding", event.detail)
onChange({ detail: value[toggleField] }, toggleField)
: null
}
$: if (useAttachmentBinding !== previousBindingState) {
if (useAttachmentBinding) {
value[field] = []
} else {
value[field] = ""
}
previousBindingState = useAttachmentBinding
// Return the entire array
return parsedMedia
}
</script>
{#if schemaHasOptions(schema) && schema.type !== "array"}
<Select
on:change={e => onChange(e, field)}
value={value[field]}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
value={fieldData}
options={schema.constraints.inclusion}
/>
{:else if schema.type === "datetime"}
<DatePicker value={value[field]} on:change={e => onChange(e, field)} />
<DatePicker
value={fieldData}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
/>
{:else if schema.type === "boolean"}
<Select
on:change={e => onChange(e, field)}
value={value[field]}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
value={fieldData}
options={[
{ label: "True", value: "true" },
{ label: "False", value: "false" },
@ -96,83 +121,111 @@
/>
{:else if schemaHasOptions(schema) && schema.type === "array"}
<Multiselect
bind:value={value[field]}
value={fieldData}
options={schema.constraints.inclusion}
on:change={e => onChange(e, field)}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
/>
{:else if schema.type === "longform"}
<TextArea bind:value={value[field]} on:change={e => onChange(e, field)} />
<TextArea
value={fieldData}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
/>
{:else if schema.type === "json"}
<span>
<Editor
editorHeight="150"
mode="json"
<div class="field-wrap json-field">
<CodeEditor
value={fieldData}
on:change={e => {
if (e.detail?.value !== value[field]) {
onChange(e, field, schema.type)
}
onChange({
row: {
[field]: e.detail,
},
})
}}
value={value[field]}
/>
</div>
</span>
{:else if schema.type === "link"}
<LinkedRowSelector
linkedRows={value[field]}
linkedRows={fieldData}
{schema}
on:change={e => onChange(e, field)}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
useLabel={false}
/>
{:else if schema.type === "bb_reference" || schema.type === "bb_reference_single"}
<LinkedRowSelector
linkedRows={value[field]}
linkedRows={fieldData}
{schema}
linkedTableId={"ta_users"}
on:change={e => onChange(e, field)}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
useLabel={false}
/>
{:else if attachmentTypes.includes(schema.type)}
<div class="attachment-field-container">
<div class="toggle-container">
<Toggle
value={useAttachmentBinding}
value={meta?.fields?.[field]?.useAttachmentBinding}
text={"Use bindings"}
size={"XS"}
on:change={e => handleToggleChange(field, e)}
on:change={e => {
onChange({
row: {
[field]: null,
},
meta: {
fields: {
[field]: {
useAttachmentBinding: e.detail,
},
},
},
})
}}
/>
</div>
{#if !useAttachmentBinding}
{#if !meta?.fields?.[field]?.useAttachmentBinding}
<div class="attachment-field-spacing">
<KeyValueBuilder
on:change={async e => {
onChange(
{
detail:
schema.type === FieldType.ATTACHMENT_SINGLE ||
schema.type === FieldType.SIGNATURE_SINGLE
? e.detail.length > 0
? {
url: e.detail[0].name,
filename: e.detail[0].value,
}
: {}
: e.detail.map(({ name, value }) => ({
url: name,
filename: value,
})),
on:change={e => {
onChange({
row: {
[field]: handleMediaUpdate(e),
},
field
)
})
}}
object={handleAttachmentParams(value[field])}
object={handleAttachmentParams(fieldData)}
allowJS
{bindings}
keyBindings
customButtonText={"Add attachment"}
customButtonText={schema.type === FieldType.SIGNATURE_SINGLE
? "Add signature"
: "Add attachment"}
keyPlaceholder={"URL"}
valuePlaceholder={"Filename"}
actionButtonDisabled={(schema.type === FieldType.ATTACHMENT_SINGLE ||
schema.type === FieldType.SIGNATURE) &&
Object.keys(value[field]).length >= 1}
schema.type === FieldType.SIGNATURE_SINGLE) &&
fieldData}
/>
</div>
{:else}
@ -180,8 +233,13 @@
<svelte:component
this={isTestModal ? ModalBindableInput : DrawerBindableInput}
panel={AutomationBindingPanel}
value={value[field]}
on:change={e => onChange(e, field)}
value={fieldData}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
type="string"
bindings={parsedBindings}
allowJS={true}
@ -195,20 +253,41 @@
<svelte:component
this={isTestModal ? ModalBindableInput : DrawerBindableInput}
panel={AutomationBindingPanel}
value={value[field]}
on:change={e => onChange(e, field)}
value={fieldData}
on:change={e =>
onChange({
row: {
[field]: e.detail,
},
})}
type="string"
bindings={parsedBindings}
allowJS={true}
updateOnChange={false}
title={schema.name}
autocomplete="off"
/>
{/if}
<style>
.attachment-field-spacing,
.json-input-spacing {
margin-top: var(--spacing-s);
margin-bottom: var(--spacing-l);
.attachment-field-spacing {
border: 1px solid var(--spectrum-global-color-gray-400);
border-radius: 4px;
padding: var(--spacing-s);
}
.field-wrap.json-field {
height: 120px;
}
.field-wrap {
box-sizing: border-box;
border: 1px solid var(--spectrum-global-color-gray-400);
border-radius: 4px;
}
.field-wrap :global(.cm-editor),
.field-wrap :global(.cm-scroller) {
border-radius: 4px;
}
</style>

2
packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
View File

@ -8,6 +8,7 @@
export let value
export let isTrigger
export let disabled = false
$: filteredTables = $tables.list.filter(table => {
return !isTrigger || table._id !== TableNames.USERS
@ -25,4 +26,5 @@
options={filteredTables}
getOptionLabel={table => table.name}
getOptionValue={table => table._id}
{disabled}
/>

2
packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
View File

@ -23,6 +23,7 @@
export let disableBindings = false
export let forceModal = false
export let context = null
export let autocomplete
const dispatch = createEventDispatcher()
@ -71,6 +72,7 @@
on:blur={onBlur}
{placeholder}
{updateOnChange}
{autocomplete}
/>
{#if !disabled && !disableBindings}
<div

12
packages/builder/src/components/common/bindings/index.js Normal file
View File

@ -0,0 +1,12 @@
export { default as BindableCombobox } from "./BindableCombobox.svelte"
export { default as BindingPanel } from "./BindingPanel.svelte"
export { default as BindingSidePanel } from "./BindingSidePanel.svelte"
export { default as DrawerBindableCombobox } from "./DrawerBindableCombobox.svelte"
export { default as ClientBindingPanel } from "./ClientBindingPanel.svelte"
export { default as DrawerBindableInput } from "./DrawerBindableInput.svelte"
export { default as DrawerBindableSlot } from "./DrawerBindableSlot.svelte"
export { default as EvaluationSidePanel } from "./EvaluationSidePanel.svelte"
export { default as ModalBindableInput } from "./ModalBindableInput.svelte"
export { default as ServerBindingPanel } from "./ServerBindingPanel.svelte"
export { default as SnippetDrawer } from "./SnippetDrawer.svelte"
export { default as SnippetSidePanel } from "./SnippetSidePanel.svelte"

2
packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
View File

@ -11,7 +11,7 @@
notifications,
} from "@budibase/bbui"
import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
import BindableCombobox from "components/common/bindings/BindableCombobox.svelte"
import { BindableCombobox } from "components/common/bindings"
import { getAuthBindings, getEnvironmentBindings } from "dataBinding"
import { environment, licensing, auth } from "stores/portal"
import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"

11
packages/builder/src/stores/builder/automations.js
View File

@ -157,7 +157,8 @@ const automationActions = store => ({
)
}
},
updateBlockInputs: async (block, data) => {
processBlockInputs: async (block, data) => {
// Create new modified block
let newBlock = {
...block,
@ -184,6 +185,14 @@ const automationActions = store => ({
// Don't save if no changes were made
if (JSON.stringify(newAutomation) === JSON.stringify(automation)) {
return false
}
return newAutomation
},
updateBlockInputs: async (block, data) => {
const newAutomation = await store.actions.processBlockInputs(block, data)
if (newAutomation === false) {
return
}
await store.actions.save(newAutomation)

9
packages/server/src/automations/automationUtils.ts
View File

@ -100,7 +100,10 @@ export function getError(err: any) {
}
export function guardAttachment(attachmentObject: any) {
if (!("url" in attachmentObject) || !("filename" in attachmentObject)) {
if (
attachmentObject &&
(!("url" in attachmentObject) || !("filename" in attachmentObject))
) {
const providedKeys = Object.keys(attachmentObject).join(", ")
throw new Error(
`Attachments must have both "url" and "filename" keys. You have provided: ${providedKeys}`
@ -135,7 +138,9 @@ export async function sendAutomationAttachmentsToStorage(
}
for (const [prop, attachments] of Object.entries(attachmentRows)) {
if (Array.isArray(attachments)) {
if (!attachments) {
continue
} else if (Array.isArray(attachments)) {
if (attachments.length) {
row[prop] = await Promise.all(
attachments.map(attachment => generateAttachmentRow(attachment))

66
packages/server/src/automations/steps/updateRow.ts
View File

@ -82,39 +82,73 @@ export async function run({ inputs, appId, emitter }: AutomationStepInput) {
}
const tableId = inputs.row.tableId
// clear any undefined, null or empty string properties so that they aren't updated
for (let propKey of Object.keys(inputs.row)) {
const clearRelationships =
inputs.meta?.fields?.[propKey]?.clearRelationships
// Base update
let rowUpdate: Record<string, any>
// Legacy
// Find previously set values and add them to the update. Ensure empty relationships
// are added to the update if clearRelationships is true
const legacyUpdated = Object.keys(inputs.row || {}).reduce(
(acc: Record<string, any>, key: string) => {
const isEmpty = inputs.row[key] == null || inputs.row[key]?.length === 0
const fieldConfig = inputs.meta?.fields || {}
if (isEmpty) {
if (
(inputs.row[propKey] == null || inputs.row[propKey]?.length === 0) &&
!clearRelationships
Object.hasOwn(fieldConfig, key) &&
fieldConfig[key].clearRelationships === true
) {
delete inputs.row[propKey]
// Explicitly clear the field on update
acc[key] = []
}
} else {
// Keep non-empty values
acc[key] = inputs.row[key]
}
return acc
},
{}
)
// The source of truth for inclusion in the update is: inputs.meta?.fields
const parsedUpdate = Object.keys(inputs.meta?.fields || {}).reduce(
(acc: Record<string, any>, key: string) => {
const fieldConfig = inputs.meta?.fields?.[key] || {}
// Ignore legacy config.
if (Object.hasOwn(fieldConfig, "clearRelationships")) {
return acc
}
acc[key] =
!inputs.row[key] || inputs.row[key]?.length === 0 ? "" : inputs.row[key]
return acc
},
{}
)
rowUpdate = {
tableId,
...parsedUpdate,
...legacyUpdated,
}
try {
if (tableId) {
inputs.row = await automationUtils.cleanUpRow(
inputs.row.tableId,
inputs.row
)
rowUpdate = await automationUtils.cleanUpRow(tableId, rowUpdate)
inputs.row = await automationUtils.sendAutomationAttachmentsToStorage(
inputs.row.tableId,
inputs.row
rowUpdate = await automationUtils.sendAutomationAttachmentsToStorage(
tableId,
rowUpdate
)
}
// have to clean up the row, remove the table from it
const ctx: any = buildCtx(appId, emitter, {
body: {
...inputs.row,
...rowUpdate,
_id: inputs.rowId,
},
params: {
rowId: inputs.rowId,
tableId: tableId,
tableId,
},
})
await rowController.patch(ctx)

3
packages/server/src/automations/triggerInfo/app.ts
View File

@ -4,11 +4,12 @@ import {
AutomationStepType,
AutomationTriggerSchema,
AutomationTriggerStepId,
AutomationEventType,
} from "@budibase/types"
export const definition: AutomationTriggerSchema = {
name: "App Action",
event: "app:trigger",
event: AutomationEventType.APP_TRIGGER,
icon: "Apps",
tagline: "Automation fired from the frontend",
description: "Trigger an automation from an action inside your app",

3
packages/server/src/automations/triggerInfo/cron.ts
View File

@ -4,11 +4,12 @@ import {
AutomationStepType,
AutomationTriggerSchema,
AutomationTriggerStepId,
AutomationEventType,
} from "@budibase/types"
export const definition: AutomationTriggerSchema = {
name: "Cron Trigger",
event: "cron:trigger",
event: AutomationEventType.CRON_TRIGGER,
icon: "Clock",
tagline: "Cron Trigger (<b>{{inputs.cron}}</b>)",
description: "Triggers automation on a cron schedule.",

3
packages/server/src/automations/triggerInfo/rowDeleted.ts
View File

@ -4,11 +4,12 @@ import {
AutomationStepType,
AutomationTriggerSchema,
AutomationTriggerStepId,
AutomationEventType,
} from "@budibase/types"
export const definition: AutomationTriggerSchema = {
name: "Row Deleted",
event: "row:delete",
event: AutomationEventType.ROW_DELETE,
icon: "TableRowRemoveCenter",
tagline: "Row is deleted from {{inputs.enriched.table.name}}",
description: "Fired when a row is deleted from your database",

3
packages/server/src/automations/triggerInfo/rowSaved.ts
View File

@ -4,11 +4,12 @@ import {
AutomationStepType,
AutomationTriggerSchema,
AutomationTriggerStepId,
AutomationEventType,
} from "@budibase/types"
export const definition: AutomationTriggerSchema = {
name: "Row Created",
event: "row:save",
event: AutomationEventType.ROW_SAVE,
icon: "TableRowAddBottom",
tagline: "Row is added to {{inputs.enriched.table.name}}",
description: "Fired when a row is added to your database",

3
packages/server/src/automations/triggerInfo/rowUpdated.ts
View File

@ -4,11 +4,12 @@ import {
AutomationStepType,
AutomationTriggerSchema,
AutomationTriggerStepId,
AutomationEventType,
} from "@budibase/types"
export const definition: AutomationTriggerSchema = {
name: "Row Updated",
event: "row:update",
event: AutomationEventType.ROW_UPDATE,
icon: "Refresh",
tagline: "Row is updated in {{inputs.enriched.table.name}}",
description: "Fired when a row is updated in your database",

3
packages/server/src/automations/triggerInfo/webhook.ts
View File

@ -4,11 +4,12 @@ import {
AutomationStepType,
AutomationTriggerSchema,
AutomationTriggerStepId,
AutomationEventType,
} from "@budibase/types"
export const definition: AutomationTriggerSchema = {
name: "Webhook",
event: "web:trigger",
event: AutomationEventType.WEBHOOK_TRIGGER,
icon: "Send",
tagline: "Webhook endpoint is hit",
description: "Trigger an automation when a HTTP POST webhook is hit",

29
packages/server/src/automations/triggers.ts
View File

@ -13,6 +13,7 @@ import {
Row,
AutomationData,
AutomationJob,
AutomationEventType,
UpdatedRowEventEmitter,
} from "@budibase/types"
import { executeInThread } from "../threads/automation"
@ -71,28 +72,31 @@ async function queueRelevantRowAutomations(
})
}
emitter.on("row:save", async function (event: UpdatedRowEventEmitter) {
emitter.on(
AutomationEventType.ROW_SAVE,
async function (event: UpdatedRowEventEmitter) {
/* istanbul ignore next */
if (!event || !event.row || !event.row.tableId) {
return
}
await queueRelevantRowAutomations(event, "row:save")
await queueRelevantRowAutomations(event, AutomationEventType.ROW_SAVE)
}
)
emitter.on(AutomationEventType.ROW_UPDATE, async function (event) {
/* istanbul ignore next */
if (!event || !event.row || !event.row.tableId) {
return
}
await queueRelevantRowAutomations(event, AutomationEventType.ROW_UPDATE)
})
emitter.on("row:update", async function (event) {
emitter.on(AutomationEventType.ROW_DELETE, async function (event) {
/* istanbul ignore next */
if (!event || !event.row || !event.row.tableId) {
return
}
await queueRelevantRowAutomations(event, "row:update")
})
emitter.on("row:delete", async function (event) {
/* istanbul ignore next */
if (!event || !event.row || !event.row.tableId) {
return
}
await queueRelevantRowAutomations(event, "row:delete")
await queueRelevantRowAutomations(event, AutomationEventType.ROW_DELETE)
})
export async function externalTrigger(
@ -118,7 +122,6 @@ export async function externalTrigger(
}
params.fields = coercedFields
}
const data: AutomationData = { automation, event: params as any }
if (getResponses) {
data.event = {

5
packages/server/src/tests/utilities/structures.ts
View File

@ -24,6 +24,7 @@ import {
Query,
Webhook,
WebhookActionType,
AutomationEventType,
} from "@budibase/types"
import { LoopInput, LoopStepType } from "../../definitions/automations"
import { merge } from "lodash"
@ -305,7 +306,7 @@ export function loopAutomation(
trigger: {
id: "a",
type: "TRIGGER",
event: "row:save",
event: AutomationEventType.ROW_SAVE,
stepId: AutomationTriggerStepId.ROW_SAVED,
inputs: {
tableId,
@ -347,7 +348,7 @@ export function collectAutomation(tableId?: string): Automation {
trigger: {
id: "a",
type: "TRIGGER",
event: "row:save",
event: AutomationEventType.ROW_SAVE,
stepId: AutomationTriggerStepId.ROW_SAVED,
inputs: {
tableId,

10
packages/server/src/utilities/rowProcessor/map.ts
View File

@ -50,6 +50,13 @@ export const TYPE_TRANSFORM_MAP: any = {
[undefined]: undefined,
parse: parseArrayString,
},
[FieldType.BB_REFERENCE]: {
//@ts-ignore
[null]: [],
//@ts-ignore
[undefined]: undefined,
parse: parseArrayString,
},
[FieldType.STRING]: {
"": null,
//@ts-ignore
@ -113,6 +120,9 @@ export const TYPE_TRANSFORM_MAP: any = {
[undefined]: undefined,
parse: parseArrayString,
},
[FieldType.ATTACHMENT_SINGLE]: {
"": null,
},
[FieldType.BOOLEAN]: {
"": null,
//@ts-ignore

14
packages/server/src/utilities/rowProcessor/tests/inputProcessing.spec.ts
View File

@ -209,10 +209,22 @@ describe("rowProcessor - inputProcessing", () => {
const { row } = await inputProcessing(userId, table, newRow)
if (userValue === undefined) {
// The 'user' field is omitted
expect(row).toEqual({
name: "Jack",
})
} else {
// The update is processed if null or "". 'user' is changed to an empty array.
expect(row).toEqual({
name: "Jack",
user: [],
})
}
expect(
bbReferenceProcessor.processInputBBReferences
).not.toHaveBeenCalled()
expect(row).toEqual(newRow)
}
)

9
packages/types/src/documents/app/automation.ts
View File

@ -255,6 +255,15 @@ export type BucketedContent = AutomationAttachmentContent & {
path: string
}
export enum AutomationEventType {
ROW_SAVE = "row:save",
ROW_UPDATE = "row:update",
ROW_DELETE = "row:delete",
APP_TRIGGER = "app:trigger",
CRON_TRIGGER = "cron:trigger",
WEBHOOK_TRIGGER = "web:trigger",
}
export type UpdatedRowEventEmitter = {
row: Row
oldRow: Row