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

Merge branch 'develop' into oracle-datasource

This commit is contained in:
Rory Powell 2021-11-22 11:07:11 +00:00
parent 9f73d3d0fa 7762c1cc80
commit 85ef7838af
42 changed files with 562 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lerna.json
View File

@ -1,5 +1,5 @@
{
"version": "0.9.185-alpha.10",
"version": "0.9.185-alpha.12",
"npmClient": "yarn",
"packages": [
"packages/*"

2
packages/auth/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/auth",
"version": "0.9.185-alpha.10",
"version": "0.9.185-alpha.12",
"description": "Authentication middlewares for budibase builder and apps",
"main": "src/index.js",
"author": "Budibase",

2
packages/bbui/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@budibase/bbui",
"description": "A UI solution used in the different Budibase projects.",
"version": "0.9.185-alpha.10",
"version": "0.9.185-alpha.12",
"license": "AGPL-3.0",
"svelte": "src/index.js",
"module": "dist/bbui.es.js",

6
packages/bbui/src/InlineAlert/InlineAlert.svelte
View File

@ -8,6 +8,8 @@
export let onConfirm = undefined
$: icon = selectIcon(type)
// if newlines used, convert them to different elements
$: split = message.split("\n")
function selectIcon(alertType) {
switch (alertType) {
@ -33,7 +35,9 @@
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
<div class="spectrum-InLineAlert-header">{header}</div>
<div class="spectrum-InLineAlert-content">{message}</div>
{#each split as splitMsg}
<div class="spectrum-InLineAlert-content">{splitMsg}</div>
{/each}
{#if onConfirm}
<div class="spectrum-InLineAlert-footer">
<Button secondary on:click={onConfirm}>OK</Button>

8
packages/builder/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/builder",
"version": "0.9.185-alpha.10",
"version": "0.9.185-alpha.12",
"license": "AGPL-3.0",
"private": true,
"scripts": {
@ -65,10 +65,10 @@
}
},
"dependencies": {
"@budibase/bbui": "^0.9.185-alpha.10",
"@budibase/client": "^0.9.185-alpha.10",
"@budibase/bbui": "^0.9.185-alpha.12",
"@budibase/client": "^0.9.185-alpha.12",
"@budibase/colorpicker": "1.1.2",
"@budibase/string-templates": "^0.9.185-alpha.10",
"@budibase/string-templates": "^0.9.185-alpha.12",
"@sentry/browser": "5.19.1",
"@spectrum-css/page": "^3.0.1",
"@spectrum-css/vars": "^3.0.1",

3
packages/builder/src/builderStore/store/frontend.js
View File

@ -620,6 +620,9 @@ export const getFrontendStore = () => {
if (!name || !component) {
return
}
if (component[name] === value) {
return
}
component[name] = value
store.update(state => {
state.selectedComponentId = component._id

51
packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
View File

@ -36,11 +36,9 @@
// Messages that can be sent from the iframe preview to the builder
// Budibase events are and initalisation events
const MessageTypes = {
IFRAME_LOADED: "iframe-loaded",
READY: "ready",
ERROR: "error",
BUDIBASE: "type",
KEYDOWN: "keydown"
}
// Construct iframe template
@ -69,7 +67,7 @@
theme: $store.theme,
customTheme: $store.customTheme,
previewDevice: $store.previewDevice,
messagePassing: $store.clientFeatures.messagePassing
messagePassing: $store.clientFeatures.messagePassing,
}
// Saving pages and screens to the DB causes them to have _revs.
@ -111,7 +109,6 @@
loading = false
error = event.error || "An unknown error occurred"
},
[MessageTypes.KEYDOWN]: handleKeydownEvent
}
const messageHandler = handlers[message.data.type] || handleBudibaseEvent
@ -122,15 +119,24 @@
window.addEventListener("message", receiveMessage)
if (!$store.clientFeatures.messagePassing) {
// Legacy - remove in later versions of BB
iframe.contentWindow.addEventListener("ready", () => {
receiveMessage({ data: { type: MessageTypes.READY }})
}, { once: true })
iframe.contentWindow.addEventListener("error", event => {
receiveMessage({ data: { type: MessageTypes.ERROR, error: event.detail }})
}, { once: true })
iframe.contentWindow.addEventListener(
"ready",
() => {
receiveMessage({ data: { type: MessageTypes.READY } })
},
{ once: true }
)
iframe.contentWindow.addEventListener(
"error",
event => {
receiveMessage({
data: { type: MessageTypes.ERROR, error: event.detail },
})
},
{ once: true }
)
// Add listener for events sent by client library in preview
iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
}
})
@ -140,14 +146,20 @@
window.removeEventListener("message", receiveMessage)
if (!$store.clientFeatures.messagePassing) {
// Legacy - remove in later versions of BB
iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
iframe.contentWindow.removeEventListener(
"bb-event",
handleBudibaseEvent
)
}
}
})
const handleBudibaseEvent = event => {
const { type, data } = event.data || event.detail
if (!type) {
return
}
if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id })
} else if (type === "update-prop") {
@ -183,19 +195,6 @@
}
}
const handleKeydownEvent = event => {
const { key } = event.data || event
if (
(key === "Delete" || key === "Backspace") &&
selectedComponentId &&
["input", "textarea"].indexOf(
iframe.contentWindow.document.activeElement?.tagName.toLowerCase()
) === -1
) {
confirmDeleteComponent(selectedComponentId)
}
}
const confirmDeleteComponent = componentId => {
idToDelete = componentId
confirmDeleteDialog.show()

5
packages/builder/src/components/design/AppPreview/iframeTemplate.js
View File

@ -84,7 +84,6 @@ export default `
if (window.loadBudibase) {
window.loadBudibase()
document.documentElement.classList.add("loaded")
window.parent.postMessage({ type: "iframe-loaded" })
} else {
throw "The client library couldn't be loaded"
}
@ -94,10 +93,6 @@ export default `
}
window.addEventListener("message", receiveMessage)
window.addEventListener("keydown", evt => {
window.parent.postMessage({ type: "keydown", key: event.key })
})
window.parent.postMessage({ type: "ready" })
</script>
</head>

8
packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
View File

@ -13,6 +13,12 @@
$: noChildrenAllowed = !component || !definition?.hasChildren
$: noPaste = !$store.componentToPaste
// "editable" has been repurposed for inline text editing.
// It remains here for legacy compatibility.
// Future components should define "static": true for indicate they should
// not show a context menu.
$: showMenu = definition?.editable !== false && definition?.static !== true
const moveUpComponent = () => {
const asset = get(currentAsset)
const parent = findComponentParent(asset.props, component._id)
@ -69,7 +75,7 @@
}
</script>
{#if definition?.editable !== false}
{#if showMenu}
<ActionMenu>
<div slot="control" class="icon">
<Icon size="S" hoverable name="MoreSmallList" />

2
packages/builder/src/pages/builder/app/[application]/data/index.svelte
View File

@ -7,7 +7,7 @@
let modal
$: setupComplete =
$datasources.list.find(x => (x._id = "bb_internal")).entities.length > 1 ||
$datasources.list.find(x => (x._id = "bb_internal"))?.entities.length > 1 ||
$datasources.list.length > 1
onMount(() => {

2
packages/cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/cli",
"version": "0.9.185-alpha.10",
"version": "0.9.185-alpha.12",
"description": "Budibase CLI, for developers, self hosting and migrations.",
"main": "src/index.js",
"bin": {

28
packages/client/manifest.json
View File

@ -240,13 +240,15 @@
"name": "Screenslot",
"icon": "WebPage",
"description": "Contains your app screens",
"editable": false
"static": true
},
"button": {
"name": "Button",
"description": "A basic html button that is ready for styling",
"icon": "Button",
"editable": true,
"illegalChildren": ["section"],
"showSettingsBar": true,
"settings": [
{
"type": "text",
@ -255,6 +257,7 @@
},
{
"type": "select",
"showInBar": true,
"label": "Variant",
"key": "type",
"options": [
@ -283,6 +286,7 @@
{
"type": "select",
"label": "Size",
"showInBar": true,
"key": "size",
"options": [
{
@ -307,11 +311,18 @@
{
"type": "boolean",
"label": "Quiet",
"key": "quiet"
"key": "quiet",
"showInBar": true,
"barIcon": "VisibilityOff",
"barTitle": "Quiet variant",
"barSeparator": false
},
{
"type": "boolean",
"label": "Disabled",
"showInBar": true,
"barIcon": "NoEdit",
"barTitle": "Disable button",
"key": "disabled"
},
{
@ -590,6 +601,7 @@
"icon": "TextParagraph",
"illegalChildren": ["section"],
"showSettingsBar": true,
"editable": true,
"settings": [
{
"type": "text",
@ -696,6 +708,7 @@
"description": "A component for displaying heading text",
"illegalChildren": ["section"],
"showSettingsBar": true,
"editable": true,
"settings": [
{
"type": "text",
@ -940,6 +953,7 @@
"description": "A basic link component for internal and external links",
"icon": "Link",
"showSettingsBar": true,
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1831,6 +1845,7 @@
"icon": "Text",
"illegalChildren": ["section"],
"styles": ["size"],
"editable": true,
"settings": [
{
"type": "field/string",
@ -1869,6 +1884,7 @@
"name": "Number Field",
"icon": "123",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1908,6 +1924,7 @@
"name": "Password Field",
"icon": "LockClosed",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1947,6 +1964,7 @@
"name": "Options Picker",
"icon": "ViewList",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2070,6 +2088,7 @@
"name": "Multi-select Picker",
"icon": "ViewList",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2171,6 +2190,7 @@
"booleanfield": {
"name": "Checkbox",
"icon": "Checkmark",
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2234,6 +2254,7 @@
"name": "Rich Text",
"icon": "TextParagraph",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2274,6 +2295,7 @@
"name": "Date Picker",
"icon": "DateInput",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2319,6 +2341,7 @@
"name": "Attachment",
"icon": "Attach",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2348,6 +2371,7 @@
"name": "Relationship Picker",
"icon": "TaskList",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{

6
packages/client/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/client",
"version": "0.9.185-alpha.10",
"version": "0.9.185-alpha.12",
"license": "MPL-2.0",
"module": "dist/budibase-client.js",
"main": "dist/budibase-client.js",
@ -19,9 +19,9 @@
"dev:builder": "rollup -cw"
},
"dependencies": {
"@budibase/bbui": "^0.9.185-alpha.10",
"@budibase/bbui": "^0.9.185-alpha.12",
"@budibase/standard-components": "^0.9.139",
"@budibase/string-templates": "^0.9.185-alpha.10",
"@budibase/string-templates": "^0.9.185-alpha.12",
"regexparam": "^1.3.0",
"shortid": "^2.2.15",
"svelte-spa-router": "^3.0.5"

6
packages/client/src/components/ClientApp.svelte
View File

@ -1,5 +1,5 @@
<script>
import { writable } from "svelte/store"
import { writable, get } from "svelte/store"
import { setContext, onMount } from "svelte"
import { Layout, Heading, Body } from "@budibase/bbui"
import Component from "./Component.svelte"
@ -25,6 +25,7 @@
import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
import DNDHandler from "components/preview/DNDHandler.svelte"
import ErrorSVG from "builder/assets/error.svg"
import KeyboardManager from "components/preview/KeyboardManager.svelte"
// Provide contexts
setContext("sdk", SDK)
@ -39,7 +40,7 @@
await initialise()
await authStore.actions.fetchUser()
dataLoaded = true
if ($builderStore.inBuilder) {
if (get(builderStore).inBuilder) {
builderStore.actions.notifyLoaded()
} else {
builderStore.actions.pingEndUser()
@ -143,6 +144,7 @@
</UserBindingsProvider>
{/if}
</div>
<KeyboardManager />
{/if}
<style>

210
packages/client/src/components/Component.svelte
View File

@ -4,7 +4,7 @@
<script>
import { getContext, setContext } from "svelte"
import { writable, get } from "svelte/store"
import { writable } from "svelte/store"
import * as AppComponents from "components/app"
import Router from "./Router.svelte"
import { enrichProps, propsAreSame } from "utils/componentProps"
@ -19,15 +19,22 @@
export let isScreen = false
export let isBlock = false
// Component settings are the un-enriched settings for this component that
// need to be enriched at this level.
// Nested settings are the un-enriched block settings that are to be passed on
// and enriched at a deeper level.
let componentSettings
let nestedSettings
// The enriched component settings
let enrichedSettings
// Any prop overrides that need to be applied due to conditional UI
// Any setting overrides that need to be applied due to conditional UI
let conditionalSettings
// Settings are hashed when inside the builder preview and used as a key,
// so that components fully remount whenever any settings change
let hash = 0
// Resultant cached settings which will be passed to the component instance.
// These are a combination of the enriched, nested and conditional settings.
let cachedSettings
// Latest timestamp that we started a props update.
// Due to enrichment now being async, we need to avoid overwriting newer
@ -63,6 +70,7 @@
$: selected =
$builderStore.inBuilder && $builderStore.selectedComponentId === id
$: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
$: inDragPath = inSelectedPath && $builderStore.editMode
// Interactive components can be selected, dragged and highlighted inside
// the builder preview
@ -70,7 +78,9 @@
$builderStore.inBuilder &&
($builderStore.previewType === "layout" || insideScreenslot) &&
!isBlock
$: draggable = interactive && !isLayout && !isScreen
$: editable = definition?.editable
$: editing = editable && selected && $builderStore.editMode
$: draggable = !inDragPath && interactive && !isLayout && !isScreen
$: droppable = interactive && !isLayout && !isScreen
// Empty components are those which accept children but do not have any.
@ -79,44 +89,39 @@
$: empty = interactive && !children.length && definition?.hasChildren
$: emptyState = empty && definition?.showEmptyState !== false
// Raw props are all props excluding internal props and children
// Raw settings are all settings excluding internal props and children
$: rawSettings = getRawSettings(instance)
$: instanceKey = hashString(JSON.stringify(rawSettings))
// Component settings are those which are intended for this component and
// which need to be enriched
$: componentSettings = getComponentSettings(rawSettings, settingsDefinition)
$: enrichComponentSettings(rawSettings, instanceKey, $context)
// Nested settings are those which are intended for child components inside
// blocks and which should not be enriched at this level
$: nestedSettings = getNestedSettings(rawSettings, settingsDefinition)
// Update and enrich component settings
$: updateSettings(rawSettings, instanceKey, settingsDefinition, $context)
// Evaluate conditional UI settings and store any component setting changes
// which need to be made
$: evaluateConditions(enrichedSettings?._conditions)
// Build up the final settings object to be passed to the component
$: settings = {
...enrichedSettings,
...nestedSettings,
...conditionalSettings,
}
// Render key is used when in the builder preview to fully remount
// components when settings are changed
$: renderKey = `${hash}-${emptyState}`
$: cacheSettings(enrichedSettings, nestedSettings, conditionalSettings)
// Update component context
$: componentStore.set({
id,
children: children.length,
styles: { ...instance._styles, id, empty: emptyState, interactive },
styles: {
...instance._styles,
id,
empty: emptyState,
interactive,
draggable,
editable,
},
empty: emptyState,
selected,
name,
editing,
})
// Extracts all settings from the component instance
const getRawSettings = instance => {
let validSettings = {}
Object.entries(instance)
@ -137,12 +142,14 @@
return AppComponents[name]
}
// Gets this component's definition from the manifest
const getComponentDefinition = component => {
const prefix = "@budibase/standard-components/"
const type = component?.replace(prefix, "")
return type ? Manifest[type] : null
}
// Gets the definition of this component's settings from the manifest
const getSettingsDefinition = definition => {
if (!definition) {
return []
@ -162,35 +169,50 @@
return settings
}
const getComponentSettings = (rawSettings, settingsDefinition) => {
let clone = { ...rawSettings }
settingsDefinition?.forEach(setting => {
if (setting.nested) {
delete clone[setting.key]
}
})
return clone
// Updates and enriches component settings when raw settings change
const updateSettings = (settings, key, settingsDefinition, context) => {
const instanceChanged = key !== lastInstanceKey
// Derive component and nested settings if the instance changed
if (instanceChanged) {
splitRawSettings(settings, settingsDefinition)
}
// Enrich component settings
enrichComponentSettings(componentSettings, context, instanceChanged)
// Update instance key
if (instanceChanged) {
lastInstanceKey = key
}
}
const getNestedSettings = (rawSettings, settingsDefinition) => {
let clone = { ...rawSettings }
// Splits the raw settings into those destined for the component itself
// and nexted settings for child components inside blocks
const splitRawSettings = (rawSettings, settingsDefinition) => {
let newComponentSettings = { ...rawSettings }
let newNestedSettings = { ...rawSettings }
settingsDefinition?.forEach(setting => {
if (!setting.nested) {
delete clone[setting.key]
if (setting.nested) {
delete newComponentSettings[setting.key]
} else {
delete newNestedSettings[setting.key]
}
})
return clone
componentSettings = newComponentSettings
nestedSettings = newNestedSettings
}
// Enriches any string component props using handlebars
const enrichComponentSettings = (rawSettings, instanceKey, context) => {
const instanceSame = instanceKey === lastInstanceKey
const contextSame = context.key === lastContextKey
const enrichComponentSettings = (rawSettings, context, instanceChanged) => {
const contextChanged = context.key !== lastContextKey
if (instanceSame && contextSame) {
return
// Skip enrichment if the context and instance are unchanged
if (!contextChanged) {
if (!instanceChanged) {
return
}
} else {
lastInstanceKey = instanceKey
lastContextKey = context.key
}
@ -206,31 +228,11 @@
return
}
// Update the component props.
// Most props are deeply compared so that svelte will only trigger reactive
// statements on props that have actually changed.
if (!newEnrichedSettings) {
return
}
let propsChanged = false
if (!enrichedSettings) {
enrichedSettings = {}
propsChanged = true
}
Object.keys(newEnrichedSettings).forEach(key => {
if (!propsAreSame(newEnrichedSettings[key], enrichedSettings[key])) {
propsChanged = true
enrichedSettings[key] = newEnrichedSettings[key]
}
})
// Update the hash if we're in the builder so we can fully remount this
// component
if (get(builderStore).inBuilder && propsChanged) {
hash = hashString(JSON.stringify(enrichedSettings))
}
enrichedSettings = newEnrichedSettings
}
// Evaluates the list of conditional UI conditions and determines any setting
// or visibility changes required
const evaluateConditions = conditions => {
if (!conditions?.length) {
return
@ -250,36 +252,51 @@
conditionalSettings = result.settingUpdates
visible = nextVisible
}
// Combines and caches all settings which will be passed to the component
// instance. Settings are aggressively memoized to avoid triggering svelte
// reactive statements as much as possible.
const cacheSettings = (enriched, nested, conditional) => {
const allSettings = { ...enriched, ...nested, ...conditional }
if (!cachedSettings) {
cachedSettings = allSettings
} else {
Object.keys(allSettings).forEach(key => {
if (!propsAreSame(allSettings[key], cachedSettings[key])) {
cachedSettings[key] = allSettings[key]
}
})
}
}
</script>
{#key renderKey}
{#if constructor && settings && (visible || inSelectedPath)}
<!-- The ID is used as a class because getElementsByClassName is O(1) -->
<!-- and the performance matters for the selection indicators -->
<div
class={`component ${id}`}
class:draggable
class:droppable
class:empty
class:interactive
class:block={isBlock}
data-id={id}
data-name={name}
>
<svelte:component this={constructor} {...settings}>
{#if children.length}
{#each children as child (child._id)}
<svelte:self instance={child} />
{/each}
{:else if emptyState}
<Placeholder />
{:else if isBlock}
<slot />
{/if}
</svelte:component>
</div>
{/if}
{/key}
{#if constructor && cachedSettings && (visible || inSelectedPath)}
<!-- The ID is used as a class because getElementsByClassName is O(1) -->
<!-- and the performance matters for the selection indicators -->
<div
class={`component ${id}`}
class:draggable
class:droppable
class:empty
class:interactive
class:editing
class:block={isBlock}
data-id={id}
data-name={name}
>
<svelte:component this={constructor} {...cachedSettings}>
{#if children.length}
{#each children as child (child._id)}
<svelte:self instance={child} />
{/each}
{:else if emptyState}
<Placeholder />
{:else if isBlock}
<slot />
{/if}
</svelte:component>
</div>
{/if}
<style>
.component {
@ -291,4 +308,7 @@
.draggable :global(*:hover) {
cursor: grab;
}
.editing :global(*:hover) {
cursor: auto;
}
</style>

5
packages/client/src/components/CustomThemeWrapper.svelte
View File

@ -79,4 +79,9 @@
scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-default);
}
/* Remove border when editing contenteditable components */
:global(*[contenteditable="true"]:focus) {
outline: none;
}
</style>

25
packages/client/src/components/app/Button.svelte
View File

@ -2,7 +2,7 @@
import { getContext } from "svelte"
import "@spectrum-css/button/dist/index-vars.css"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let disabled = false
@ -11,16 +11,35 @@
export let size = "M"
export let type = "primary"
export let quiet = false
let node
$: $component.editing && node?.focus()
$: componentText = getComponentText(text, $builderStore, $component)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || " "
}
return text || componentState.name || "Placeholder text"
}
const updateText = e => {
builderStore.actions.updateProp("text", e.target.textContent)
}
</script>
<button
class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
class:spectrum-Button--quiet={quiet}
disabled={disabled || false}
{disabled}
use:styleable={$component.styles}
on:click={onClick}
contenteditable={$component.editing}
on:blur={$component.editing ? updateText : null}
bind:this={node}
>
{text || ""}
{componentText}
</button>
<style>

48
packages/client/src/components/app/DataProvider.svelte
View File

@ -34,12 +34,18 @@
let bookmarks = [null]
let pageNumber = 0
let query = null
let queryExtensions = {}
// Sorting can be overridden at run time, so we can't use the prop directly
let currentSortColumn = sortColumn
let currentSortOrder = sortOrder
$: query = buildLuceneQuery(filter)
// Reset the current sort state to props if props change
$: currentSortColumn = sortColumn
$: currentSortOrder = sortOrder
$: defaultQuery = buildLuceneQuery(filter)
$: extendQuery(defaultQuery, queryExtensions)
$: internalTable = dataSource?.type === "table"
$: nestedProvider = dataSource?.type === "provider"
$: hasNextPage = bookmarks[pageNumber + 1] != null
@ -91,8 +97,12 @@
metadata: { dataSource },
},
{
type: ActionTypes.SetDataProviderQuery,
callback: newQuery => (query = newQuery),
type: ActionTypes.AddDataProviderQueryExtension,
callback: addQueryExtension,
},
{
type: ActionTypes.RemoveDataProviderQueryExtension,
callback: removeQueryExtension,
},
{
type: ActionTypes.SetDataProviderSorting,
@ -264,6 +274,38 @@
pageNumber--
allRows = res.rows
}
const addQueryExtension = (key, operator, field, value) => {
if (!key || !operator || !field) {
return
}
const extension = { operator, field, value }
queryExtensions = { ...queryExtensions, [key]: extension }
}
const removeQueryExtension = key => {
if (!key) {
return
}
const newQueryExtensions = { ...queryExtensions }
delete newQueryExtensions[key]
queryExtensions = newQueryExtensions
}
const extendQuery = (defaultQuery, extensions) => {
const extensionValues = Object.values(extensions || {})
let extendedQuery = { ...defaultQuery }
extensionValues.forEach(({ operator, field, value }) => {
extendedQuery[operator] = {
...extendedQuery[operator],
[field]: value,
}
})
if (JSON.stringify(query) !== JSON.stringify(extendedQuery)) {
query = extendedQuery
}
}
</script>
<div use:styleable={$component.styles} class="container">

49
packages/client/src/components/app/DateRangePicker.svelte
View File

@ -3,7 +3,7 @@
import { getContext } from "svelte"
import dayjs from "dayjs"
import utc from "dayjs/plugin/utc"
import { onMount } from "svelte"
import { onDestroy } from "svelte"
dayjs.extend(utc)
@ -14,7 +14,14 @@
const component = getContext("component")
const { styleable, ActionTypes, getAction } = getContext("sdk")
const setQuery = getAction(dataProvider?.id, ActionTypes.SetDataProviderQuery)
$: addExtension = getAction(
dataProvider?.id,
ActionTypes.AddDataProviderQueryExtension
)
$: removeExtension = getAction(
dataProvider?.id,
ActionTypes.RemoveDataProviderQueryExtension
)
const options = [
"Last 1 day",
"Last 7 days",
@ -25,44 +32,30 @@
]
let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
const updateDateRange = option => {
const query = dataProvider?.state?.query
if (!query || !setQuery) {
return
}
$: queryExtension = getQueryExtension(value)
$: addExtension?.($component.id, "range", field, queryExtension)
value = option
const getQueryExtension = value => {
let low = dayjs.utc().subtract(1, "year")
let high = dayjs.utc().add(1, "day")
if (option === "Last 1 day") {
if (value === "Last 1 day") {
low = dayjs.utc().subtract(1, "day")
} else if (option === "Last 7 days") {
} else if (value === "Last 7 days") {
low = dayjs.utc().subtract(7, "days")
} else if (option === "Last 30 days") {
} else if (value === "Last 30 days") {
low = dayjs.utc().subtract(30, "days")
} else if (option === "Last 3 months") {
} else if (value === "Last 3 months") {
low = dayjs.utc().subtract(3, "months")
} else if (option === "Last 6 months") {
} else if (value === "Last 6 months") {
low = dayjs.utc().subtract(6, "months")
}
// Update data provider query with the new filter
setQuery({
...query,
range: {
...query.range,
[field]: {
high: high.format(),
low: low.format(),
},
},
})
return { low: low.format(), high: high.format() }
}
// Update the range on mount to the initial value
onMount(() => {
updateDateRange(value)
onDestroy(() => {
removeExtension?.($component.id)
})
</script>
@ -71,6 +64,6 @@
placeholder={null}
{options}
{value}
on:change={e => updateDateRange(e.detail)}
on:change={e => (value = e.detail)}
/>
</div>

25
packages/client/src/components/app/Heading.svelte
View File

@ -13,10 +13,11 @@
export let underline
export let size
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || $component.name || "Placeholder text"
: text || ""
let node
$: $component.editing && node?.focus()
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
$: componentText = getComponentText(text, $builderStore, $component)
$: sizeClass = `spectrum-Heading--size${size || "M"}`
$: alignClass = `align--${align || "left"}`
@ -24,6 +25,13 @@
// overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || ""
}
return text || componentState.name || "Placeholder text"
}
const enrichStyles = (styles, color) => {
if (!color) {
return styles
@ -36,15 +44,24 @@
},
}
}
// Convert contenteditable HTML to text and save
const updateText = e => {
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
builderStore.actions.updateProp("text", sanitized)
}
</script>
<h1
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="spectrum-Heading {sizeClass} {alignClass}"
on:blur={$component.editing ? updateText : null}
>
{componentText}
</h1>

45
packages/client/src/components/app/Link.svelte
View File

@ -14,19 +14,25 @@
export let underline
export let size
$: external = url && typeof url === "string" && !url.startsWith("/")
let node
$: $component.editing && node?.focus()
$: externalLink = url && typeof url === "string" && !url.startsWith("/")
$: target = openInNewTab ? "_blank" : "_self"
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || "Placeholder link"
: text || ""
$: componentText = getComponentText(text, $builderStore, $component)
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || ""
}
return text || componentState.name || "Placeholder text"
}
const enrichStyles = (styles, color) => {
if (!color) {
return styles
@ -39,10 +45,27 @@
},
}
}
const updateText = e => {
builderStore.actions.updateProp("text", e.target.textContent)
}
</script>
{#if $builderStore.inBuilder || componentText}
{#if external}
{#if $component.editing}
<div
bind:this={node}
contenteditable
use:styleable={styles}
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
on:blur={$component.editing ? updateText : null}
>
{componentText}
</div>
{:else if $builderStore.inBuilder || componentText}
{#if externalLink}
<a
{target}
href={url || "/"}
@ -72,12 +95,12 @@
{/if}
<style>
a {
a,
div {
color: var(--spectrum-alias-text-color);
white-space: nowrap;
transition: color 130ms ease-in-out;
}
a:hover {
a:not(.placeholder):hover {
color: var(--spectrum-link-primary-m-text-color-hover) !important;
}
.placeholder {

25
packages/client/src/components/app/Text.svelte
View File

@ -12,10 +12,11 @@
export let underline
export let size
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || $component.name || "Placeholder text"
: text || ""
let node
$: $component.editing && node?.focus()
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
$: componentText = getComponentText(text, $builderStore, $component)
$: sizeClass = `spectrum-Body--size${size || "M"}`
$: alignClass = `align--${align || "left"}`
@ -23,6 +24,13 @@
// overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || ""
}
return text || componentState.name || "Placeholder text"
}
const enrichStyles = (styles, color) => {
if (!color) {
return styles
@ -35,15 +43,24 @@
},
}
}
// Convert contenteditable HTML to text and save
const updateText = e => {
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
builderStore.actions.updateProp("text", sanitized)
}
</script>
<p
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="spectrum-Body {sizeClass} {alignClass}"
on:blur={$component.editing ? updateText : null}
>
{componentText}
</p>

9
packages/client/src/components/app/blocks/CardsBlock.svelte
View File

@ -1,5 +1,5 @@
<script>
import { onMount, getContext } from "svelte"
import { getContext } from "svelte"
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import { Heading } from "@budibase/bbui"
@ -46,6 +46,7 @@
let repeaterId
let schema
$: fetchSchema(dataSource)
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
$: cardWidth = cardHorizontal ? 420 : 300
@ -107,12 +108,12 @@
return `${split[0]}/{{ ${safe(repeaterId)}.${safe(col)} }}`
}
// Load the datasource schema on mount so we can determine column types
onMount(async () => {
// Load the datasource schema so we can determine column types
const fetchSchema = async dataSource => {
if (dataSource) {
schema = await API.fetchDatasourceSchema(dataSource)
}
})
}
</script>
<Block>

9
packages/client/src/components/app/blocks/TableBlock.svelte
View File

@ -1,5 +1,5 @@
<script>
import { onMount, getContext } from "svelte"
import { getContext } from "svelte"
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import { Heading } from "@budibase/bbui"
@ -41,6 +41,7 @@
let dataProviderId
let schema
$: fetchSchema(dataSource)
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
$: titleButtonAction = [
@ -85,12 +86,12 @@
return enrichedColumns.slice(0, 3)
}
// Load the datasource schema on mount so we can determine column types
onMount(async () => {
// Load the datasource schema so we can determine column types
const fetchSchema = async dataSource => {
if (dataSource) {
schema = await API.fetchDatasourceSchema(dataSource)
}
})
}
</script>
<Block>

31
packages/client/src/components/app/forms/Field.svelte
View File

@ -17,54 +17,53 @@
const formContext = getContext("form")
const formStepContext = getContext("form-step")
const fieldGroupContext = getContext("field-group")
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
// Register field with form
const formApi = formContext?.formApi
const labelPos = fieldGroupContext?.labelPosition || "above"
const formField = formApi?.registerField(
$: formStep = formStepContext ? $formStepContext || 1 : 1
$: formField = formApi?.registerField(
field,
type,
defaultValue,
disabled,
validation,
formStepContext || 1
formStep
)
// Focus label when editing
let labelNode
$: $component.editing && labelNode?.focus()
// Update form properties in parent component on every store change
const unsubscribe = formField?.subscribe(value => {
$: unsubscribe = formField?.subscribe(value => {
fieldState = value?.fieldState
fieldApi = value?.fieldApi
fieldSchema = value?.fieldSchema
})
onDestroy(() => unsubscribe?.())
// Keep field state up to date with props which might change due to
// conditional UI
$: updateValidation(validation)
$: updateDisabled(disabled)
// Determine label class from position
$: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
const updateValidation = validation => {
fieldApi?.updateValidation(validation)
}
const updateDisabled = disabled => {
fieldApi?.setDisabled(disabled)
const updateLabel = e => {
builderStore.actions.updateProp("label", e.target.textContent)
}
</script>
<FieldGroupFallback>
<div class="spectrum-Form-item" use:styleable={$component.styles}>
<label
bind:this={labelNode}
contenteditable={$component.editing}
on:blur={$component.editing ? updateLabel : null}
class:hidden={!label}
for={fieldState?.fieldId}
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
>
{label || ""}
{label || " "}
</label>
<div class="spectrum-Form-itemField">
{#if !formContext}

18
packages/client/src/components/app/forms/Form.svelte
View File

@ -1,6 +1,7 @@
<script>
import { getContext, onMount } from "svelte"
import { getContext } from "svelte"
import InnerForm from "./InnerForm.svelte"
import { hashString } from "utils/helpers"
export let dataSource
export let theme
@ -15,6 +16,8 @@
let schema
let table
$: fetchSchema(dataSource)
// Returns the closes data context which isn't a built in context
const getInitialValues = (type, dataSource, context) => {
// Only inherit values for update forms
@ -35,7 +38,7 @@
}
// Fetches the form schema from this form's dataSource
const fetchSchema = async () => {
const fetchSchema = async dataSource => {
if (!dataSource) {
schema = {}
}
@ -62,14 +65,15 @@
schema = dataSourceSchema || {}
}
loaded = true
if (!loaded) {
loaded = true
}
}
$: initialValues = getInitialValues(actionType, dataSource, $context)
$: resetKey = JSON.stringify(initialValues)
// Load the form schema on mount
onMount(fetchSchema)
$: resetKey = hashString(
JSON.stringify(initialValues) + JSON.stringify(schema)
)
</script>
{#if loaded}

5
packages/client/src/components/app/forms/FormStep.svelte
View File

@ -1,5 +1,6 @@
<script>
import { getContext, setContext } from "svelte"
import { writable } from "svelte/store"
import Placeholder from "../Placeholder.svelte"
export let step = 1
@ -9,7 +10,9 @@
const formContext = getContext("form")
// Set form step context so fields know what step they are within
setContext("form-step", step || 1)
const stepStore = writable(step || 1)
$: stepStore.set(step || 1)
setContext("form-step", stepStore)
$: formState = formContext?.formState
$: currentStep = $formState?.currentStep

26
packages/client/src/components/app/forms/InnerForm.svelte
View File

@ -96,15 +96,14 @@
return
}
// If we've already registered this field then wipe any errors and
// return the existing field
// If we've already registered this field then keep some existing state
let initialValue = initialValues[field] ?? defaultValue
let fieldId = `id-${generateID()}`
const existingField = getField(field)
if (existingField) {
existingField.update(state => {
state.fieldState.error = null
return state
})
return existingField
const { fieldState } = get(existingField)
initialValue = fieldState.value ?? initialValue
fieldId = fieldState.fieldId
}
// Auto columns are always disabled
@ -125,8 +124,8 @@
type,
step: step || 1,
fieldState: {
fieldId: `id-${generateID()}`,
value: initialValues[field] ?? defaultValue,
fieldId,
value: initialValue,
error: null,
disabled: disabled || fieldDisabled || isAutoColumn,
defaultValue,
@ -137,7 +136,12 @@
})
// Add this field
fields = [...fields, fieldInfo]
if (existingField) {
const otherFields = fields.filter(info => get(info).name !== field)
fields = [...otherFields, fieldInfo]
} else {
fields = [...fields, fieldInfo]
}
return fieldInfo
},
@ -287,7 +291,7 @@
// Provide form step context so that forms without any step components
// register their fields to step 1
setContext("form-step", 1)
setContext("form-step", writable(1))
// Action context to pass to children
const actions = [

9
packages/client/src/components/app/table/Table.svelte
View File

@ -17,10 +17,6 @@
const component = getContext("component")
const { styleable, getAction, ActionTypes, routeStore } = getContext("sdk")
const setSorting = getAction(
dataProvider?.id,
ActionTypes.SetDataProviderSorting
)
const customColumnKey = `custom-${Math.random()}`
const customRenderers = [
{
@ -29,13 +25,16 @@
},
]
// Table state
$: hasChildren = $component.children
$: loading = dataProvider?.loading ?? false
$: data = dataProvider?.rows || []
$: fullSchema = dataProvider?.schema ?? {}
$: fields = getFields(fullSchema, columns, showAutoColumns)
$: schema = getFilteredSchema(fullSchema, fields, hasChildren)
$: setSorting = getAction(
dataProvider?.id,
ActionTypes.SetDataProviderSorting
)
const getFields = (schema, customColumns, showAutoColumns) => {
// Check for an invalid column selection

3
packages/client/src/components/preview/Indicator.svelte
View File

@ -17,10 +17,9 @@
<div
in:fade={{
delay: transition ? 50 : 0,
delay: transition ? 130 : 0,
duration: transition ? 130 : 0,
}}
out:fade={{ duration: transition ? 130 : 0 }}
class="indicator"
class:flipped
class:line

35
packages/client/src/components/preview/KeyboardManager.svelte Normal file
View File

@ -0,0 +1,35 @@
<script>
import { onMount, onDestroy } from "svelte"
import { get } from "svelte/store"
import { builderStore } from "stores"
onMount(() => {
if (get(builderStore).inBuilder) {
document.addEventListener("keydown", onKeyDown)
}
})
onDestroy(() => {
if (get(builderStore).inBuilder) {
document.removeEventListener("keydown", onKeyDown)
}
})
const onKeyDown = e => {
if (e.key === "Delete" || e.key === "Backspace") {
deleteSelectedComponent()
}
}
const deleteSelectedComponent = () => {
const state = get(builderStore)
if (!state.inBuilder || !state.selectedComponentId || state.editMode) {
return
}
const activeTag = document.activeElement?.tagName.toLowerCase()
if (["input", "textarea"].indexOf(activeTag) !== -1) {
return
}
builderStore.actions.deleteComponent(state.selectedComponentId)
}
</script>

6
packages/client/src/components/preview/SelectionIndicator.svelte
View File

@ -1,11 +1,15 @@
<script>
import { builderStore } from "stores"
import IndicatorSet from "./IndicatorSet.svelte"
$: color = $builderStore.editMode
? "var(--spectrum-global-color-static-green-500)"
: "var(--spectrum-global-color-static-blue-600)"
</script>
<IndicatorSet
componentId={$builderStore.selectedComponentId}
color="var(--spectrum-global-color-static-blue-600)"
{color}
zIndex="910"
transition
/>

4
packages/client/src/components/preview/SettingsBar.svelte
View File

@ -122,7 +122,7 @@
prop={setting.key}
value={option.value}
icon={option.barIcon}
title={option.barTitle}
title={option.barTitle || option.label}
/>
{/each}
{:else}
@ -136,7 +136,7 @@
<SettingsButton
prop={setting.key}
icon={setting.barIcon}
title={setting.barTitle}
title={setting.barTitle || setting.label}
bool
/>
{:else if setting.type === "color"}

3
packages/client/src/constants.js
View File

@ -25,7 +25,8 @@ export const UnsortableTypes = [
export const ActionTypes = {
ValidateForm: "ValidateForm",
RefreshDatasource: "RefreshDatasource",
SetDataProviderQuery: "SetDataProviderQuery",
AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",
SetDataProviderSorting: "SetDataProviderSorting",
ClearForm: "ClearForm",
ChangeFormStep: "ChangeFormStep",

26
packages/client/src/stores/builder.js
View File

@ -1,4 +1,4 @@
import { writable, derived } from "svelte/store"
import { writable, derived, get } from "svelte/store"
import Manifest from "manifest.json"
import { findComponentById, findComponentPathById } from "../utils/components"
import { pingEndUser } from "../api"
@ -14,6 +14,7 @@ const createBuilderStore = () => {
layout: null,
screen: null,
selectedComponentId: null,
editMode: false,
previewId: null,
previewType: null,
selectedPath: [],
@ -50,6 +51,10 @@ const createBuilderStore = () => {
const actions = {
selectComponent: id => {
if (id === get(writableStore).selectedComponentId) {
return
}
writableStore.update(state => ({ ...state, editMode: false }))
dispatchEvent("select-component", { id })
},
updateProp: (prop, value) => {
@ -65,10 +70,7 @@ const createBuilderStore = () => {
pingEndUser()
},
setSelectedPath: path => {
writableStore.update(state => {
state.selectedPath = path
return state
})
writableStore.update(state => ({ ...state, selectedPath: path }))
},
moveComponent: (componentId, destinationComponentId, mode) => {
dispatchEvent("move-component", {
@ -78,10 +80,16 @@ const createBuilderStore = () => {
})
},
setDragging: dragging => {
writableStore.update(state => {
state.isDragging = dragging
return state
})
if (dragging === get(writableStore).isDragging) {
return
}
writableStore.update(state => ({ ...state, isDragging: dragging }))
},
setEditMode: enabled => {
if (enabled === get(writableStore).editMode) {
return
}
writableStore.update(state => ({ ...state, editMode: enabled }))
},
}
return {

23
packages/client/src/utils/styleable.js
View File

@ -21,12 +21,7 @@ export const styleable = (node, styles = {}) => {
let applyNormalStyles
let applyHoverStyles
let selectComponent
// Allow dragging if required
const parent = node.closest(".component")
if (parent && parent.classList.contains("draggable")) {
node.setAttribute("draggable", true)
}
let editComponent
// Creates event listeners and applies initial styles
const setupStyles = (newStyles = {}) => {
@ -45,6 +40,9 @@ export const styleable = (node, styles = {}) => {
...(newStyles.hover || {}),
}
// Allow dragging if required
node.setAttribute("draggable", !!newStyles.draggable)
// Applies a style string to a DOM node
const applyStyles = styleString => {
node.style = styleString
@ -69,6 +67,17 @@ export const styleable = (node, styles = {}) => {
return false
}
// Handler to start editing a component (if applicable) when double
// clicking in the builder preview
editComponent = event => {
if (newStyles.interactive && newStyles.editable) {
builderStore.actions.setEditMode(true)
}
event.preventDefault()
event.stopPropagation()
return false
}
// Add listeners to toggle hover styles
node.addEventListener("mouseover", applyHoverStyles)
node.addEventListener("mouseout", applyNormalStyles)
@ -76,6 +85,7 @@ export const styleable = (node, styles = {}) => {
// Add builder preview click listener
if (newStyles.interactive) {
node.addEventListener("click", selectComponent, false)
node.addEventListener("dblclick", editComponent, false)
}
// Apply initial normal styles
@ -87,6 +97,7 @@ export const styleable = (node, styles = {}) => {
node.removeEventListener("mouseover", applyHoverStyles)
node.removeEventListener("mouseout", applyNormalStyles)
node.removeEventListener("click", selectComponent)
node.removeEventListener("dblclick", editComponent)
}
// Apply initial styles

8
packages/server/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@budibase/server",
"email": "hi@budibase.com",
"version": "0.9.185-alpha.10",
"version": "0.9.185-alpha.12",
"description": "Budibase Web Server",
"main": "src/index.js",
"repository": {
@ -68,9 +68,9 @@
"author": "Budibase",
"license": "AGPL-3.0-or-later",
"dependencies": {
"@budibase/auth": "^0.9.185-alpha.10",
"@budibase/client": "^0.9.185-alpha.10",
"@budibase/string-templates": "^0.9.185-alpha.10",
"@budibase/auth": "^0.9.185-alpha.12",
"@budibase/client": "^0.9.185-alpha.12",
"@budibase/string-templates": "^0.9.185-alpha.12",
"@bull-board/api": "^3.7.0",
"@bull-board/koa": "^3.7.0",
"@elastic/elasticsearch": "7.10.0",

42
packages/server/src/api/controllers/datasource.js
View File

@ -7,7 +7,7 @@ const {
BudibaseInternalDB,
getTableParams,
} = require("../../db/utils")
const { BuildSchemaErrors } = require("../../constants")
const { BuildSchemaErrors, InvalidColumns } = require("../../constants")
const { integrations } = require("../../integrations")
const { getDatasourceAndQuery } = require("./row/utils")
@ -152,6 +152,23 @@ exports.query = async function (ctx) {
}
}
function getErrorTables(errors, errorType) {
return Object.entries(errors)
.filter(entry => entry[1] === errorType)
.map(([name]) => name)
}
function updateError(error, newError, tables) {
if (!error) {
error = ""
}
if (error.length > 0) {
error += "\n"
}
error += `${newError} ${tables.join(", ")}`
return error
}
const buildSchemaHelper = async datasource => {
const Connector = integrations[datasource.source]
@ -176,12 +193,23 @@ const buildSchemaHelper = async datasource => {
const errors = connector.schemaErrors
let error = null
if (errors && Object.keys(errors).length > 0) {
const noKeyTables = Object.entries(errors)
.filter(entry => entry[1] === BuildSchemaErrors.NO_KEY)
.map(([name]) => name)
error = `No primary key constraint found for the following: ${noKeyTables.join(
", "
)}`
const noKey = getErrorTables(errors, BuildSchemaErrors.NO_KEY)
const invalidCol = getErrorTables(errors, BuildSchemaErrors.INVALID_COLUMN)
if (noKey.length) {
error = updateError(
error,
"No primary key constraint found for the following:",
noKey
)
}
if (invalidCol.length) {
const invalidCols = Object.values(InvalidColumns).join(", ")
error = updateError(
error,
`Cannot use columns ${invalidCols} found in following:`,
invalidCol
)
}
}
return { tables: connector.tables, error }
}

7
packages/server/src/constants/index.js
View File

@ -163,8 +163,15 @@ exports.MetadataTypes = {
AUTOMATION_TEST_HISTORY: "automationTestHistory",
}
exports.InvalidColumns = {
ID: "_id",
REV: "_rev",
TABLE_ID: "tableId",
}
exports.BuildSchemaErrors = {
NO_KEY: "no_key",
INVALID_COLUMN: "invalid_column",
}
// pass through the list from the auth/core lib

7
packages/server/src/integrations/utils.ts
View File

@ -2,7 +2,7 @@ import { SqlQuery } from "../definitions/datasource"
import { Datasource, Table } from "../definitions/common"
import { SourceNames } from "../definitions/datasource"
const { DocumentTypes, SEPARATOR } = require("../db/utils")
const { FieldTypes, BuildSchemaErrors } = require("../constants")
const { FieldTypes, BuildSchemaErrors, InvalidColumns } = require("../constants")
const DOUBLE_SEPARATOR = `${SEPARATOR}${SEPARATOR}`
const ROW_ID_REGEX = /^\[.*]$/g
@ -161,13 +161,18 @@ export function finaliseExternalTables(
tables: { [key: string]: any },
entities: { [key: string]: any }
) {
const invalidColumns = Object.values(InvalidColumns)
let finalTables: { [key: string]: any } = {}
const errors: { [key: string]: string } = {}
for (let [name, table] of Object.entries(tables)) {
const schemaFields = Object.keys(table.schema)
// make sure every table has a key
if (table.primary == null || table.primary.length === 0) {
errors[name] = BuildSchemaErrors.NO_KEY
continue
} else if (schemaFields.find(field => invalidColumns.includes(field))) {
errors[name] = BuildSchemaErrors.INVALID_COLUMN
continue
}
// make sure all previous props have been added back
finalTables[name] = copyExistingPropsOver(name, table, entities)

2
packages/string-templates/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/string-templates",
"version": "0.9.185-alpha.10",
"version": "0.9.185-alpha.12",
"description": "Handlebars wrapper for Budibase templating.",
"main": "src/index.cjs",
"module": "dist/bundle.mjs",

6
packages/worker/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@budibase/worker",
"email": "hi@budibase.com",
"version": "0.9.185-alpha.10",
"version": "0.9.185-alpha.12",
"description": "Budibase background service",
"main": "src/index.js",
"repository": {
@ -29,8 +29,8 @@
"author": "Budibase",
"license": "AGPL-3.0-or-later",
"dependencies": {
"@budibase/auth": "^0.9.185-alpha.10",
"@budibase/string-templates": "^0.9.185-alpha.10",
"@budibase/auth": "^0.9.185-alpha.12",
"@budibase/string-templates": "^0.9.185-alpha.12",
"@koa/router": "^8.0.0",
"@sentry/node": "^6.0.0",
"@techpass/passport-openidconnect": "^0.3.0",