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 feature/audit-log-sqs

This commit is contained in:
mike12345567 2024-05-20 14:09:57 +01:00
parent d1b6a542fa efa0c8289f
commit a2200a38fb
88 changed files with 1610 additions and 636 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/backend-core/src/context/types.ts
View File

@ -1,4 +1,6 @@
import { IdentityContext, Snippet, VM } from "@budibase/types"
import { OAuth2Client } from "google-auth-library"
import { GoogleSpreadsheet } from "google-spreadsheet"
// keep this out of Budibase types, don't want to expose context info
export type ContextMap = {
@ -12,4 +14,8 @@ export type ContextMap = {
vm?: VM
cleanup?: (() => void | Promise<void>)[]
snippets?: Snippet[]
googleSheets?: {
oauthClient: OAuth2Client
clients: Record<string, GoogleSpreadsheet>
}
}

1
packages/backend-core/src/sql/sqlTable.ts
View File

@ -126,6 +126,7 @@ function generateSchema(
break
case FieldType.ATTACHMENTS:
case FieldType.ATTACHMENT_SINGLE:
case FieldType.SIGNATURE_SINGLE:
case FieldType.AUTO:
case FieldType.JSON:
case FieldType.INTERNAL:

267
packages/bbui/src/Form/Core/Signature.svelte Normal file
View File

@ -0,0 +1,267 @@
<script>
import { onMount, createEventDispatcher } from "svelte"
import Atrament from "atrament"
import Icon from "../../Icon/Icon.svelte"
const dispatch = createEventDispatcher()
let last
export let value
export let disabled = false
export let editable = true
export let width = 400
export let height = 220
export let saveIcon = false
export let darkMode
export function toDataUrl() {
// PNG to preserve transparency
return canvasRef.toDataURL("image/png")
}
export function toFile() {
const data = canvasContext
.getImageData(0, 0, width, height)
.data.some(channel => channel !== 0)
if (!data) {
return
}
let dataURIParts = toDataUrl().split(",")
if (!dataURIParts.length) {
console.error("Could not retrieve signature data")
}
// Pull out the base64 encoded byte data
let binaryVal = atob(dataURIParts[1])
let blobArray = new Uint8Array(binaryVal.length)
let pos = 0
while (pos < binaryVal.length) {
blobArray[pos] = binaryVal.charCodeAt(pos)
pos++
}
const signatureBlob = new Blob([blobArray], {
type: "image/png",
})
return new File([signatureBlob], "signature.png", {
type: signatureBlob.type,
})
}
export function clearCanvas() {
return canvasContext.clearRect(0, 0, canvasWidth, canvasHeight)
}
let canvasRef
let canvasContext
let canvasWrap
let canvasWidth
let canvasHeight
let signature
let updated = false
let signatureFile
let urlFailed
$: if (value) {
signatureFile = value
}
$: if (signatureFile?.url) {
updated = false
}
$: if (last) {
dispatch("update")
}
onMount(() => {
if (!editable) {
return
}
const getPos = e => {
var rect = canvasRef.getBoundingClientRect()
const canvasX = e.offsetX || e.targetTouches?.[0].pageX - rect.left
const canvasY = e.offsetY || e.targetTouches?.[0].pageY - rect.top
return { x: canvasX, y: canvasY }
}
const checkUp = e => {
last = getPos(e)
}
canvasRef.addEventListener("pointerdown", e => {
const current = getPos(e)
//If the cursor didn't move at all, block the default pointerdown
if (last?.x === current?.x && last?.y === current?.y) {
e.preventDefault()
e.stopImmediatePropagation()
}
})
document.addEventListener("pointerup", checkUp)
signature = new Atrament(canvasRef, {
width,
height,
color: "white",
})
signature.weight = 4
signature.smoothing = 2
canvasWrap.style.width = `${width}px`
canvasWrap.style.height = `${height}px`
const { width: wrapWidth, height: wrapHeight } =
canvasWrap.getBoundingClientRect()
canvasHeight = wrapHeight
canvasWidth = wrapWidth
canvasContext = canvasRef.getContext("2d")
return () => {
signature.destroy()
document.removeEventListener("pointerup", checkUp)
}
})
</script>
<div class="signature" class:light={!darkMode} class:image-error={urlFailed}>
{#if !disabled}
<div class="overlay">
{#if updated && saveIcon}
<span class="save">
<Icon
name="Checkmark"
hoverable
tooltip={"Save"}
tooltipPosition={"top"}
tooltipType={"info"}
on:click={() => {
dispatch("change", toDataUrl())
}}
/>
</span>
{/if}
{#if signatureFile?.url && !updated}
<span class="delete">
<Icon
name="DeleteOutline"
hoverable
tooltip={"Delete"}
tooltipPosition={"top"}
tooltipType={"info"}
on:click={() => {
if (editable) {
clearCanvas()
}
dispatch("clear")
}}
/>
</span>
{/if}
</div>
{/if}
{#if !editable && signatureFile?.url}
<!-- svelte-ignore a11y-missing-attribute -->
{#if !urlFailed}
<img
src={signatureFile?.url}
on:error={() => {
urlFailed = true
}}
/>
{:else}
Could not load signature
{/if}
{:else}
<div bind:this={canvasWrap} class="canvas-wrap">
<canvas
id="signature-canvas"
bind:this={canvasRef}
style="--max-sig-width: {width}px; --max-sig-height: {height}px"
/>
{#if editable}
<div class="indicator-overlay">
<div class="sign-here">
<Icon name="Close" />
<hr />
</div>
</div>
{/if}
</div>
{/if}
</div>
<style>
.indicator-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
display: flex;
flex-direction: column;
justify-content: end;
padding: var(--spectrum-global-dimension-size-150);
box-sizing: border-box;
pointer-events: none;
}
.sign-here {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spectrum-global-dimension-size-150);
}
.sign-here hr {
border: 0;
border-top: 2px solid var(--spectrum-global-color-gray-200);
width: 100%;
}
.canvas-wrap {
position: relative;
margin: auto;
}
.signature img {
max-width: 100%;
}
#signature-canvas {
max-width: var(--max-sig-width);
max-height: var(--max-sig-height);
}
.signature.light img,
.signature.light #signature-canvas {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.signature.image-error .overlay {
padding-top: 0px;
}
.signature {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
padding: var(--spectrum-global-dimension-size-150);
text-align: right;
z-index: 2;
box-sizing: border-box;
}
.save,
.delete {
display: inline-block;
}
</style>

1
packages/bbui/src/Form/Core/index.js
View File

@ -16,3 +16,4 @@ export { default as CoreStepper } from "./Stepper.svelte"
export { default as CoreRichTextField } from "./RichTextField.svelte"
export { default as CoreSlider } from "./Slider.svelte"
export { default as CoreFile } from "./File.svelte"
export { default as CoreSignature } from "./Signature.svelte"

1
packages/bbui/src/Modal/Modal.svelte
View File

@ -173,6 +173,7 @@
}
.spectrum-Modal {
border: 2px solid var(--spectrum-global-color-gray-200);
overflow: visible;
max-height: none;
margin: 40px 0;

23
packages/bbui/src/Modal/ModalContent.svelte
View File

@ -27,6 +27,7 @@
export let secondaryButtonText = undefined
export let secondaryAction = undefined
export let secondaryButtonWarning = false
export let custom = false
const { hide, cancel } = getContext(Context.Modal)
let loading = false
@ -63,12 +64,13 @@
class:spectrum-Dialog--medium={size === "M"}
class:spectrum-Dialog--large={size === "L"}
class:spectrum-Dialog--extraLarge={size === "XL"}
class:no-grid={custom}
style="position: relative;"
role="dialog"
tabindex="-1"
aria-modal="true"
>
<div class="spectrum-Dialog-grid">
<div class="modal-core" class:spectrum-Dialog-grid={!custom}>
{#if title || $$slots.header}
<h1
class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
@ -153,6 +155,25 @@
.spectrum-Dialog-content {
overflow: visible;
}
.no-grid .spectrum-Dialog-content {
border-top: 2px solid var(--spectrum-global-color-gray-200);
border-bottom: 2px solid var(--spectrum-global-color-gray-200);
}
.no-grid .spectrum-Dialog-heading {
margin-top: 12px;
margin-left: 12px;
}
.spectrum-Dialog.no-grid {
width: 100%;
}
.spectrum-Dialog.no-grid .spectrum-Dialog-buttonGroup {
padding: 12px;
}
.spectrum-Dialog-heading {
font-family: var(--font-accent);
font-weight: 600;

69
packages/bbui/src/Tabs/Tab.svelte
View File

@ -1,40 +1,28 @@
<script>
import { getContext, onMount, createEventDispatcher } from "svelte"
import { getContext, onDestroy } from "svelte"
import Portal from "svelte-portal"
export let title
export let icon = ""
export let id
const dispatch = createEventDispatcher()
let selected = getContext("tab")
let tab_internal
let tabInfo
let observer
let ref
const setTabInfo = () => {
// If the tabs are being rendered inside a component which uses
// a svelte transition to enter, then this initial getBoundingClientRect
// will return an incorrect position.
// We just need to get this off the main thread to fix this, by using
// a 0ms timeout.
setTimeout(() => {
tabInfo = tab_internal?.getBoundingClientRect()
if (tabInfo && $selected.title === title) {
$selected.info = tabInfo
}
}, 0)
$: isSelected = $selected.title === title
$: {
if (isSelected && ref) {
observe()
} else {
stopObserving()
}
}
onMount(() => {
setTabInfo()
})
//Ensure that the underline is in the correct location
$: {
if ($selected.title === title && tab_internal) {
if ($selected.info?.left !== tab_internal.getBoundingClientRect().left) {
setTabInfo()
}
const setTabInfo = () => {
const tabInfo = ref?.getBoundingClientRect()
if (tabInfo) {
$selected.info = tabInfo
}
}
@ -42,10 +30,25 @@
$selected = {
...$selected,
title,
info: tab_internal.getBoundingClientRect(),
info: ref.getBoundingClientRect(),
}
dispatch("click")
}
const observe = () => {
if (!observer) {
observer = new ResizeObserver(setTabInfo)
observer.observe(ref)
}
}
const stopObserving = () => {
if (observer) {
observer.unobserve(ref)
observer = null
}
}
onDestroy(stopObserving)
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
@ -53,11 +56,12 @@
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div
{id}
bind:this={tab_internal}
bind:this={ref}
on:click={onClick}
class:is-selected={$selected.title === title}
on:click
class="spectrum-Tabs-item"
class:emphasized={$selected.title === title && $selected.emphasized}
class:is-selected={isSelected}
class:emphasized={isSelected && $selected.emphasized}
tabindex="0"
>
{#if icon}
@ -72,7 +76,8 @@
{/if}
<span class="spectrum-Tabs-itemLabel">{title}</span>
</div>
{#if $selected.title === title}
{#if isSelected}
<Portal target=".spectrum-Tabs-content-{$selected.id}">
<slot />
</Portal>

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

@ -364,6 +364,7 @@
value.customType !== "cron" &&
value.customType !== "triggerSchema" &&
value.customType !== "automationFields" &&
value.type !== "signature_single" &&
value.type !== "attachment" &&
value.type !== "attachment_single"
)
@ -456,7 +457,7 @@
value={inputData[key]}
options={Object.keys(table?.schema || {})}
/>
{:else if value.type === "attachment"}
{:else if value.type === "attachment" || value.type === "signature_single"}
<div class="attachment-field-wrapper">
<div class="label-wrapper">
<Label>{label}</Label>

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

@ -24,6 +24,11 @@
let table
let schemaFields
let attachmentTypes = [
FieldType.ATTACHMENTS,
FieldType.ATTACHMENT_SINGLE,
FieldType.SIGNATURE_SINGLE,
]
$: {
table = $tables.list.find(table => table._id === value?.tableId)
@ -120,15 +125,9 @@
{#if schemaFields.length}
{#each schemaFields as [field, schema]}
{#if !schema.autocolumn}
<div
class:schema-fields={schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE}
>
<div class:schema-fields={!attachmentTypes.includes(schema.type)}>
<Label>{field}</Label>
<div
class:field-width={schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE}
>
<div class:field-width={!attachmentTypes.includes(schema.type)}>
{#if isTestModal}
<RowSelectorTypes
{isTestModal}

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

@ -21,6 +21,12 @@
return clone
})
let attachmentTypes = [
FieldType.ATTACHMENTS,
FieldType.ATTACHMENT_SINGLE,
FieldType.SIGNATURE_SINGLE,
]
function schemaHasOptions(schema) {
return !!schema.constraints?.inclusion?.length
}
@ -29,7 +35,8 @@
let params = {}
if (
schema.type === FieldType.ATTACHMENT_SINGLE &&
(schema.type === FieldType.ATTACHMENT_SINGLE ||
schema.type === FieldType.SIGNATURE_SINGLE) &&
Object.keys(keyValueObj).length === 0
) {
return []
@ -100,16 +107,20 @@
on:change={e => onChange(e, field)}
useLabel={false}
/>
{:else if schema.type === FieldType.ATTACHMENTS || schema.type === FieldType.ATTACHMENT_SINGLE}
{:else if attachmentTypes.includes(schema.type)}
<div class="attachment-field-spacinng">
<KeyValueBuilder
on:change={e =>
onChange(
{
detail:
schema.type === FieldType.ATTACHMENT_SINGLE
schema.type === FieldType.ATTACHMENT_SINGLE ||
schema.type === FieldType.SIGNATURE_SINGLE
? e.detail.length > 0
? { url: e.detail[0].name, filename: e.detail[0].value }
? {
url: e.detail[0].name,
filename: e.detail[0].value,
}
: {}
: e.detail.map(({ name, value }) => ({
url: name,
@ -125,7 +136,8 @@
customButtonText={"Add attachment"}
keyPlaceholder={"URL"}
valuePlaceholder={"Filename"}
actionButtonDisabled={schema.type === FieldType.ATTACHMENT_SINGLE &&
actionButtonDisabled={(schema.type === FieldType.ATTACHMENT_SINGLE ||
schema.type === FieldType.SIGNATURE) &&
Object.keys(value[field]).length >= 1}
/>
</div>

98
packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
View File

@ -1,4 +1,5 @@
<script>
import { API } from "api"
import {
Input,
Select,
@ -8,11 +9,16 @@
Label,
RichTextField,
TextArea,
CoreSignature,
ActionButton,
notifications,
} from "@budibase/bbui"
import Dropzone from "components/common/Dropzone.svelte"
import { capitalise } from "helpers"
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
import Editor from "../../integration/QueryEditor.svelte"
import { SignatureModal } from "@budibase/frontend-core/src/components"
import { themeStore } from "stores/portal"
export let meta
export let value
@ -38,8 +44,35 @@
const timeStamp = resolveTimeStamp(value)
const isTimeStamp = !!timeStamp || meta?.timeOnly
$: currentTheme = $themeStore?.theme
$: darkMode = !currentTheme.includes("light")
let signatureModal
</script>
<SignatureModal
{darkMode}
onConfirm={async sigCanvas => {
const signatureFile = sigCanvas.toFile()
let attachRequest = new FormData()
attachRequest.append("file", signatureFile)
try {
const uploadReq = await API.uploadBuilderAttachment(attachRequest)
const [signatureAttachment] = uploadReq
value = signatureAttachment
} catch (error) {
$notifications.error(error.message || "Failed to save signature")
value = []
}
}}
title={meta.name}
{value}
bind:this={signatureModal}
/>
{#if type === "options" && meta.constraints.inclusion.length !== 0}
<Select
{label}
@ -58,7 +91,51 @@
bind:value
/>
{:else if type === "attachment"}
<Dropzone {label} {error} bind:value />
<Dropzone
compact
{label}
{error}
{value}
on:change={e => {
value = e.detail
}}
/>
{:else if type === "attachment_single"}
<Dropzone
compact
{label}
{error}
value={value ? [value] : []}
on:change={e => {
value = e.detail?.[0]
}}
maximum={1}
/>
{:else if type === "signature_single"}
<div class="signature">
<Label>{label}</Label>
<div class="sig-wrap" class:display={value}>
{#if value}
<CoreSignature
{darkMode}
{value}
editable={false}
on:clear={() => {
value = null
}}
/>
{:else}
<ActionButton
fullWidth
on:click={() => {
signatureModal.show()
}}
>
Add signature
</ActionButton>
{/if}
</div>
</div>
{:else if type === "boolean"}
<Toggle text={label} {error} bind:value />
{:else if type === "array" && meta.constraints.inclusion.length !== 0}
@ -94,3 +171,22 @@
{:else}
<Input {label} {type} {error} bind:value disabled={readonly} />
{/if}
<style>
.signature :global(label.spectrum-FieldLabel) {
padding-top: var(--spectrum-fieldlabel-padding-top);
padding-bottom: var(--spectrum-fieldlabel-padding-bottom);
}
.sig-wrap.display {
min-height: 50px;
justify-content: center;
width: 100%;
display: flex;
flex-direction: column;
background-color: var(--spectrum-global-color-gray-50);
box-sizing: border-box;
border: var(--spectrum-alias-border-size-thin)
var(--spectrum-alias-border-color) solid;
border-radius: var(--spectrum-alias-border-radius-regular);
}
</style>

6
packages/builder/src/components/backend/DataTable/TableDataTable.svelte
View File

@ -1,6 +1,6 @@
<script>
import { datasources, tables, integrations, appStore } from "stores/builder"
import { admin } from "stores/portal"
import { themeStore, admin } from "stores/portal"
import EditRolesButton from "./buttons/EditRolesButton.svelte"
import { TableNames } from "constants"
import { Grid } from "@budibase/frontend-core"
@ -38,6 +38,9 @@
})
$: relationshipsEnabled = relationshipSupport(tableDatasource)
$: currentTheme = $themeStore?.theme
$: darkMode = !currentTheme.includes("light")
const relationshipSupport = datasource => {
const integration = $integrations[datasource?.source]
return !isInternal && integration?.relationships !== false
@ -56,6 +59,7 @@
<div class="wrapper">
<Grid
{API}
{darkMode}
datasource={gridDatasource}
canAddRows={!isUsersTable}
canDeleteRows={!isUsersTable}

1
packages/builder/src/components/backend/DataTable/formula.js
View File

@ -9,6 +9,7 @@ const MAX_DEPTH = 1
const TYPES_TO_SKIP = [
FieldType.FORMULA,
FieldType.LONGFORM,
FieldType.SIGNATURE_SINGLE,
FieldType.ATTACHMENTS,
//https://github.com/Budibase/budibase/issues/3030
FieldType.INTERNAL,

1
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View File

@ -412,6 +412,7 @@
FIELDS.FORMULA,
FIELDS.JSON,
FIELDS.BARCODEQR,
FIELDS.SIGNATURE_SINGLE,
FIELDS.BIGINT,
FIELDS.AUTO,
]

3
packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedConfig.js
View File

@ -86,8 +86,9 @@ export const createValidatedConfigStore = (integration, config) => {
([$configStore, $errorsStore, $selectedValidatorsStore]) => {
const validatedConfig = []
const allowedRestKeys = ["rejectUnauthorized", "downloadImages"]
Object.entries(integration.datasource).forEach(([key, properties]) => {
if (integration.name === "REST" && key !== "rejectUnauthorized") {
if (integration.name === "REST" && !allowedRestKeys.includes(key)) {
return
}

4
packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
View File

@ -54,6 +54,10 @@
label: "Attachment",
value: FieldType.ATTACHMENT_SINGLE,
},
{
label: "Signature",
value: FieldType.SIGNATURE_SINGLE,
},
{
label: "Attachment list",
value: FieldType.ATTACHMENTS,

10
packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
View File

@ -28,6 +28,12 @@
let bindingDrawer
let currentVal = value
let attachmentTypes = [
FieldType.ATTACHMENT_SINGLE,
FieldType.ATTACHMENTS,
FieldType.SIGNATURE_SINGLE,
]
$: readableValue = runtimeToReadableBinding(bindings, value)
$: tempValue = readableValue
$: isJS = isJSBinding(value)
@ -105,6 +111,7 @@
boolean: isValidBoolean,
attachment: false,
attachment_single: false,
signature_single: false,
}
const isValid = value => {
@ -126,6 +133,7 @@
"bigint",
"barcodeqr",
"attachment",
"signature_single",
"attachment_single",
].includes(type)
) {
@ -169,7 +177,7 @@
{updateOnChange}
/>
{/if}
{#if !disabled && type !== "formula" && !disabled && type !== FieldType.ATTACHMENTS && !disabled && type !== FieldType.ATTACHMENT_SINGLE}
{#if !disabled && type !== "formula" && !disabled && !attachmentTypes.includes(type)}
<div
class={`icon ${getIconClass(value, type)}`}
on:click={() => {

3
packages/builder/src/components/design/settings/componentSettings.js
View File

@ -76,6 +76,7 @@ const componentMap = {
"field/array": FormFieldSelect,
"field/json": FormFieldSelect,
"field/barcodeqr": FormFieldSelect,
"field/signature_single": FormFieldSelect,
"field/bb_reference": FormFieldSelect,
// Some validation types are the same as others, so not all types are
// explicitly listed here. e.g. options uses string validation
@ -85,6 +86,8 @@ const componentMap = {
"validation/boolean": ValidationEditor,
"validation/datetime": ValidationEditor,
"validation/attachment": ValidationEditor,
"validation/attachment_single": ValidationEditor,
"validation/signature_single": ValidationEditor,
"validation/link": ValidationEditor,
"validation/bb_reference": ValidationEditor,
}

2
packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
View File

@ -1,5 +1,5 @@
<script>
import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
import EditComponentPopover from "../EditComponentPopover.svelte"
import { Icon } from "@budibase/bbui"
import { runtimeToReadableBinding } from "dataBinding"
import { isJSBinding } from "@budibase/string-templates"

3
packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
View File

@ -100,9 +100,6 @@
on:click={() => {
get(store).actions.select(draggableItem.id)
}}
on:mousedown={() => {
get(store).actions.select()
}}
bind:this={anchors[draggableItem.id]}
class:highlighted={draggableItem.id === $store.selected}
>

65
packages/builder/src/components/design/settings/controls/EditComponentPopover/EditComponentPopover.svelte → packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
View File

@ -3,7 +3,6 @@
import { componentStore } from "stores/builder"
import { cloneDeep } from "lodash/fp"
import { createEventDispatcher, getContext } from "svelte"
import { customPositionHandler } from "."
import ComponentSettingsSection from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
export let anchor
@ -18,76 +17,74 @@
let popover
let drawers = []
let open = false
let isOpen = false
// Auto hide the component when another item is selected
$: if (open && $draggable.selected !== componentInstance._id) {
popover.hide()
close()
}
// Open automatically if the component is marked as selected
$: if (!open && $draggable.selected === componentInstance._id && popover) {
popover.show()
open = true
open()
}
$: componentDef = componentStore.getDefinition(componentInstance._component)
$: parsedComponentDef = processComponentDefinitionSettings(componentDef)
const open = () => {
isOpen = true
drawers = []
$draggable.actions.select(componentInstance._id)
}
const close = () => {
// Slight delay allows us to be able to properly toggle open/close state by
// clicking again on the settings icon
setTimeout(() => {
isOpen = false
if ($draggable.selected === componentInstance._id) {
$draggable.actions.select()
}
}, 10)
}
const toggleOpen = () => {
if (isOpen) {
close()
} else {
open()
}
}
const processComponentDefinitionSettings = componentDef => {
if (!componentDef) {
return {}
}
const clone = cloneDeep(componentDef)
if (typeof parseSettings === "function") {
clone.settings = parseSettings(clone.settings)
}
return clone
}
const updateSetting = async (setting, value) => {
const nestedComponentInstance = cloneDeep(componentInstance)
const patchFn = componentStore.updateComponentSetting(setting.key, value)
patchFn(nestedComponentInstance)
dispatch("change", nestedComponentInstance)
}
</script>
<Icon
name="Settings"
hoverable
size="S"
on:click={() => {
if (!open) {
popover.show()
open = true
}
}}
/>
<Icon name="Settings" hoverable size="S" on:click={toggleOpen} />
<Popover
bind:this={popover}
on:open={() => {
drawers = []
$draggable.actions.select(componentInstance._id)
}}
on:close={() => {
open = false
if ($draggable.selected === componentInstance._id) {
$draggable.actions.select()
}
}}
open={isOpen}
on:close={close}
{anchor}
align="left-outside"
showPopover={drawers.length === 0}
clickOutsideOverride={drawers.length > 0}
maxHeight={600}
offset={18}
handlePostionUpdate={customPositionHandler}
>
<span class="popover-wrap">
<Layout noPadding noGap>

18
packages/builder/src/components/design/settings/controls/EditComponentPopover/index.js
View File

@ -1,18 +0,0 @@
export const customPositionHandler = (anchorBounds, eleBounds, cfg) => {
let { left, top, offset } = cfg
let percentageOffset = 30
// left-outside
left = anchorBounds.left - eleBounds.width - (offset || 5)
// shift up from the anchor, if space allows
let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
let defaultTop = anchorBounds.top - offsetPos
if (window.innerHeight - defaultTop < eleBounds.height) {
top = window.innerHeight - eleBounds.height - 5
} else {
top = anchorBounds.top - offsetPos
}
return { ...cfg, left, top }
}

2
packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
View File

@ -1,5 +1,5 @@
<script>
import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
import EditComponentPopover from "../EditComponentPopover.svelte"
import { Toggle, Icon } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { cloneDeep } from "lodash/fp"

1
packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
View File

@ -41,6 +41,7 @@ export const FieldTypeToComponentMap = {
[FieldType.BOOLEAN]: "booleanfield",
[FieldType.LONGFORM]: "longformfield",
[FieldType.DATETIME]: "datetimefield",
[FieldType.SIGNATURE_SINGLE]: "signaturesinglefield",
[FieldType.ATTACHMENTS]: "attachmentfield",
[FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
[FieldType.LINK]: "relationshipfield",

2
packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
View File

@ -1,5 +1,5 @@
<script>
import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
import EditComponentPopover from "../EditComponentPopover.svelte"
import { Toggle, Icon } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { cloneDeep } from "lodash/fp"

2
packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
View File

@ -1,5 +1,5 @@
<script>
import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
import EditComponentPopover from "../EditComponentPopover.svelte"
import { Icon } from "@budibase/bbui"
import { setContext } from "svelte"
import { writable } from "svelte/store"

2
packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
View File

@ -67,6 +67,7 @@ const toGridFormat = draggableListColumns => {
label: entry.label,
field: entry.field,
active: entry.active,
width: entry.width,
}))
}
@ -81,6 +82,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
field: column.field,
label: column.label,
columnType: schema[column.field].type,
width: column.width,
},
{}
)

2
packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
View File

@ -108,6 +108,8 @@
Constraints.MaxFileSize,
Constraints.MaxUploadSize,
],
["attachment_single"]: [Constraints.Required, Constraints.MaxUploadSize],
["signature_single"]: [Constraints.Required],
["link"]: [
Constraints.Required,
Constraints.Contains,

4
packages/builder/src/components/portal/onboarding/tours.js
View File

@ -10,7 +10,6 @@ import {
NewFormSteps,
} from "./steps"
import { API } from "api"
import { customPositionHandler } from "components/design/settings/controls/EditComponentPopover"
const ONBOARDING_EVENT_PREFIX = "onboarding"
@ -187,7 +186,6 @@ const getTours = () => {
tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_CREATE_STEPS)
builderStore.highlightSetting("steps", "info")
},
positionHandler: customPositionHandler,
align: "left-outside",
},
],
@ -203,7 +201,6 @@ const getTours = () => {
tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_ROW_ID)
builderStore.highlightSetting("rowId", "info")
},
positionHandler: customPositionHandler,
align: "left-outside",
},
{
@ -219,7 +216,6 @@ const getTours = () => {
tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_VIEW_UPDATE_STEPS)
builderStore.highlightSetting("steps", "info")
},
positionHandler: customPositionHandler,
align: "left-outside",
scrollIntoView: true,
},

8
packages/builder/src/constants/backend/index.js
View File

@ -127,6 +127,14 @@ export const FIELDS = {
presence: false,
},
},
SIGNATURE_SINGLE: {
name: "Signature",
type: FieldType.SIGNATURE_SINGLE,
icon: "AnnotatePen",
constraints: {
presence: false,
},
},
LINK: {
name: "Relationship",
type: FieldType.LINK,

28
packages/builder/src/pages/builder/app/[application]/_layout.svelte
View File

@ -105,10 +105,6 @@
}
onMount(async () => {
document.fonts.onloadingdone = e => {
builderStore.loadFonts(e.fontfaces)
}
if (!hasSynced && application) {
try {
await API.syncApp(application)
@ -149,19 +145,17 @@
/>
</span>
<Tabs {selected} size="M">
{#key $builderStore?.fonts}
{#each $layout.children as { path, title }}
<TourWrap stepKeys={[`builder-${title}-section`]}>
<Tab
quiet
selected={$isActive(path)}
on:click={topItemNavigate(path)}
title={capitalise(title)}
id={`builder-${title}-tab`}
/>
</TourWrap>
{/each}
{/key}
{#each $layout.children as { path, title }}
<TourWrap stepKeys={[`builder-${title}-section`]}>
<Tab
quiet
selected={$isActive(path)}
on:click={topItemNavigate(path)}
title={capitalise(title)}
id={`builder-${title}-tab`}
/>
</TourWrap>
{/each}
</Tabs>
</div>
<div class="topcenternav">

1
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
View File

@ -71,6 +71,7 @@
"multifieldselect",
"s3upload",
"codescanner",
"signaturesinglefield",
"bbreferencesinglefield",
"bbreferencefield"
]

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

@ -14,7 +14,6 @@ export const INITIAL_BUILDER_STATE = {
tourKey: null,
tourStepKey: null,
hoveredComponentId: null,
fonts: null,
}
export class BuilderStore extends BudiStore {
@ -37,16 +36,6 @@ export class BuilderStore extends BudiStore {
this.websocket
}
loadFonts(fontFaces) {
const ff = fontFaces.map(
fontFace => `${fontFace.family}-${fontFace.weight}`
)
this.update(state => ({
...state,
fonts: [...(state.fonts || []), ...ff],
}))
}
init(app) {
if (!app?.appId) {
console.error("BuilderStore: No appId supplied for websocket")

1
packages/cli/src/environment.ts
View File

@ -1,3 +1,4 @@
process.env.DISABLE_PINO_LOGGER = "1"
process.env.NO_JS = "1"
process.env.JS_BCRYPT = "1"
process.env.DISABLE_JWT_WARNING = "1"

2
packages/cli/src/index.ts
View File

@ -1,5 +1,5 @@
#!/usr/bin/env node
process.env.DISABLE_PINO_LOGGER = "1"
// have to import this before anything else
import "./environment"
import { getCommands } from "./options"
import { Command } from "commander"

2
packages/cli/start.sh
View File

@ -1,3 +1,3 @@
#!/bin/bash
dir="$(dirname -- "$(readlink -f "${BASH_SOURCE}")")"
${dir}/node_modules/ts-node/dist/bin.js ${dir}/src/index.ts $@
${dir}/../../node_modules/ts-node/dist/bin.js ${dir}/src/index.ts $@

59
packages/client/manifest.json
View File

@ -2746,6 +2746,14 @@
"type": "plainText",
"label": "Label",
"key": "label"
},
{
"type": "number",
"label": "Initial width",
"key": "width",
"placeholder": "Auto",
"min": 80,
"max": 9999
}
]
},
@ -4107,6 +4115,55 @@
}
]
},
"signaturesinglefield": {
"name": "Signature",
"icon": "AnnotatePen",
"styles": ["size"],
"size": {
"width": 400,
"height": 50
},
"settings": [
{
"type": "field/signature_single",
"label": "Field",
"key": "field",
"required": true
},
{
"type": "text",
"label": "Label",
"key": "label"
},
{
"type": "text",
"label": "Help text",
"key": "helpText"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
},
{
"type": "event",
"label": "On change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "validation/signature_single",
"label": "Validation",
"key": "validation"
}
]
},
"embeddedmap": {
"name": "Embedded Map",
"icon": "Location",
@ -4372,7 +4429,7 @@
"defaultValue": false
},
{
"type": "validation/attachment",
"type": "validation/attachment_single",
"label": "Validation",
"key": "validation"
},

3
packages/client/package.json
View File

@ -34,7 +34,8 @@
"screenfull": "^6.0.1",
"shortid": "^2.2.15",
"svelte-apexcharts": "^1.0.2",
"svelte-spa-router": "^4.0.1"
"svelte-spa-router": "^4.0.1",
"atrament": "^4.3.0"
},
"devDependencies": {
"@rollup/plugin-alias": "^5.1.0",

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

@ -193,6 +193,9 @@
$: pad = pad || (interactive && hasChildren && inDndPath)
$: $dndIsDragging, (pad = false)
$: currentTheme = $context?.device?.theme
$: darkMode = !currentTheme?.includes("light")
// Update component context
$: store.set({
id,
@ -222,6 +225,7 @@
parent: id,
ancestors: [...($component?.ancestors ?? []), instance._component],
path: [...($component?.path ?? []), id],
darkMode,
})
const initialise = (instance, force = false) => {

85
packages/client/src/components/app/GridBlock.svelte
View File

@ -37,13 +37,16 @@
let grid
let gridContext
let minHeight
let minHeight = 0
$: currentTheme = $context?.device?.theme
$: darkMode = !currentTheme?.includes("light")
$: parsedColumns = getParsedColumns(columns)
$: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
$: schemaOverrides = getSchemaOverrides(parsedColumns)
$: enrichedButtons = enrichButtons(buttons)
$: selectedRows = deriveSelectedRows(gridContext)
$: styles = patchStyles($component.styles, minHeight)
$: data = { selectedRows: $selectedRows }
$: actions = [
{
@ -84,9 +87,11 @@
const getSchemaOverrides = columns => {
let overrides = {}
columns.forEach(column => {
columns.forEach((column, idx) => {
overrides[column.field] = {
displayName: column.label,
width: column.width,
order: idx,
}
})
return overrides
@ -128,52 +133,55 @@
)
}
const patchStyles = (styles, minHeight) => {
return {
...styles,
normal: {
...styles?.normal,
"min-height": `${minHeight}px`,
},
}
}
onMount(() => {
gridContext = grid.getContext()
gridContext.minHeight.subscribe($height => (minHeight = $height))
})
</script>
<span style="--min-height:{minHeight}px">
<div
use:styleable={$component.styles}
class:in-builder={$builderStore.inBuilder}
>
<Grid
bind:this={grid}
datasource={table}
{API}
{stripeRows}
{quiet}
{initialFilter}
{initialSortColumn}
{initialSortOrder}
{fixedRowHeight}
{columnWhitelist}
{schemaOverrides}
canAddRows={allowAddRows}
canEditRows={allowEditRows}
canDeleteRows={allowDeleteRows}
canEditColumns={false}
canExpandRows={false}
canSaveSchema={false}
canSelectRows={true}
showControls={false}
notifySuccess={notificationStore.actions.success}
notifyError={notificationStore.actions.error}
buttons={enrichedButtons}
isCloud={$environmentStore.cloud}
on:rowclick={e => onRowClick?.({ row: e.detail })}
/>
</div>
</span>
<div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
<Grid
bind:this={grid}
datasource={table}
{API}
{stripeRows}
{quiet}
{darkMode}
{initialFilter}
{initialSortColumn}
{initialSortOrder}
{fixedRowHeight}
{columnWhitelist}
{schemaOverrides}
canAddRows={allowAddRows}
canEditRows={allowEditRows}
canDeleteRows={allowDeleteRows}
canEditColumns={false}
canExpandRows={false}
canSaveSchema={false}
canSelectRows={true}
showControls={false}
notifySuccess={notificationStore.actions.success}
notifyError={notificationStore.actions.error}
buttons={enrichedButtons}
isCloud={$environmentStore.cloud}
on:rowclick={e => onRowClick?.({ row: e.detail })}
/>
</div>
<Provider {data} {actions} />
<style>
span {
display: contents;
}
div {
display: flex;
flex-direction: column;
@ -182,7 +190,6 @@
border-radius: 4px;
overflow: hidden;
height: 410px;
min-height: var(--min-height);
}
div.in-builder :global(*) {
pointer-events: none;

1
packages/client/src/components/app/blocks/FormBlockComponent.svelte
View File

@ -15,6 +15,7 @@
[FieldType.BOOLEAN]: "booleanfield",
[FieldType.LONGFORM]: "longformfield",
[FieldType.DATETIME]: "datetimefield",
[FieldType.SIGNATURE_SINGLE]: "signaturesinglefield",
[FieldType.ATTACHMENTS]: "attachmentfield",
[FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
[FieldType.LINK]: "relationshipfield",

129
packages/client/src/components/app/forms/SignatureField.svelte Normal file
View File

@ -0,0 +1,129 @@
<script>
import { CoreSignature, ActionButton } from "@budibase/bbui"
import { getContext } from "svelte"
import Field from "./Field.svelte"
import { SignatureModal } from "@budibase/frontend-core/src/components"
export let field
export let label
export let disabled = false
export let readonly = false
export let validation
export let onChange
export let span
export let helpText = null
let fieldState
let fieldApi
let fieldSchema
let modal
const { API, notificationStore, builderStore } = getContext("sdk")
const context = getContext("context")
const formContext = getContext("form")
const saveSignature = async canvas => {
try {
const signatureFile = canvas.toFile()
let updateValue
if (signatureFile) {
let attachRequest = new FormData()
attachRequest.append("file", signatureFile)
const resp = await API.uploadAttachment({
data: attachRequest,
tableId: formContext?.dataSource?.tableId,
})
const [signatureAttachment] = resp
updateValue = signatureAttachment
} else {
updateValue = null
}
const changed = fieldApi.setValue(updateValue)
if (onChange && changed) {
onChange({ value: updateValue })
}
} catch (error) {
notificationStore.actions.error(
`There was a problem saving your signature`
)
console.error(error)
}
}
const deleteSignature = async () => {
const changed = fieldApi.setValue(null)
if (onChange && changed) {
onChange({ value: null })
}
}
$: currentTheme = $context?.device?.theme
$: darkMode = !currentTheme?.includes("light")
</script>
<SignatureModal
onConfirm={saveSignature}
title={label || fieldSchema?.name || ""}
value={fieldState?.value}
{darkMode}
bind:this={modal}
/>
<Field
{label}
{field}
{disabled}
{readonly}
{validation}
{span}
{helpText}
type="signature_single"
bind:fieldState
bind:fieldApi
bind:fieldSchema
defaultValue={[]}
>
{#if fieldState}
{#if (Array.isArray(fieldState?.value) && !fieldState?.value?.length) || !fieldState?.value}
<ActionButton
fullWidth
disabled={fieldState.disabled}
on:click={() => {
if (!$builderStore.inBuilder) {
modal.show()
}
}}
>
Add signature
</ActionButton>
{:else}
<div class="signature-field">
<CoreSignature
{darkMode}
disabled={$builderStore.inBuilder || fieldState.disabled}
editable={false}
value={fieldState?.value}
on:clear={deleteSignature}
/>
</div>
{/if}
{/if}
</Field>
<style>
.signature-field {
min-height: 50px;
justify-content: center;
width: 100%;
display: flex;
flex-direction: column;
background-color: var(--spectrum-global-color-gray-50);
box-sizing: border-box;
border: var(--spectrum-alias-border-size-thin)
var(--spectrum-alias-border-color) solid;
border-radius: var(--spectrum-alias-border-radius-regular);
}
</style>

1
packages/client/src/components/app/forms/index.js
View File

@ -16,5 +16,6 @@ export { default as formstep } from "./FormStep.svelte"
export { default as jsonfield } from "./JSONField.svelte"
export { default as s3upload } from "./S3Upload.svelte"
export { default as codescanner } from "./CodeScannerField.svelte"
export { default as signaturesinglefield } from "./SignatureField.svelte"
export { default as bbreferencefield } from "./BBReferenceField.svelte"
export { default as bbreferencesinglefield } from "./BBReferenceSingleField.svelte"

24
packages/client/src/components/app/forms/validation.js
View File

@ -200,6 +200,17 @@ const parseType = (value, type) => {
return value
}
// Parse attachment/signature single, treating no key as null
if (
type === FieldTypes.ATTACHMENT_SINGLE ||
type === FieldTypes.SIGNATURE_SINGLE
) {
if (!value?.key) {
return null
}
return value
}
// Parse links, treating no elements as null
if (type === FieldTypes.LINK) {
if (!Array.isArray(value) || !value.length) {
@ -246,10 +257,8 @@ const maxLengthHandler = (value, rule) => {
// Evaluates a max file size (MB) constraint
const maxFileSizeHandler = (value, rule) => {
const limit = parseType(rule.value, "number")
return (
value == null ||
!value.some(attachment => attachment.size / 1000000 > limit)
)
const check = attachment => attachment.size / 1000000 > limit
return value == null || !(value?.key ? check(value) : value.some(check))
}
// Evaluates a max total upload size (MB) constraint
@ -257,8 +266,11 @@ const maxUploadSizeHandler = (value, rule) => {
const limit = parseType(rule.value, "number")
return (
value == null ||
value.reduce((acc, currentItem) => acc + currentItem.size, 0) / 1000000 <=
limit
(value?.key
? value.size / 1000000 <= limit
: value.reduce((acc, currentItem) => acc + currentItem.size, 0) /
1000000 <=
limit)
)
}

59
packages/frontend-core/src/components/SignatureModal.svelte Normal file
View File

@ -0,0 +1,59 @@
<script>
import { Modal, ModalContent, Body, CoreSignature } from "@budibase/bbui"
export let onConfirm = () => {}
export let value
export let title
export let darkMode
export const show = () => {
edited = false
modal.show()
}
let modal
let canvas
let edited = false
</script>
<Modal bind:this={modal}>
<ModalContent
showConfirmButton
showCancelButton={false}
showCloseIcon={false}
custom
disabled={!edited}
showDivider={false}
onConfirm={() => {
onConfirm(canvas)
}}
>
<div slot="header">
<Body>{title}</Body>
</div>
<div class="signature-wrap modal">
<CoreSignature
{darkMode}
{value}
saveIcon={false}
bind:this={canvas}
on:update={() => {
edited = true
}}
/>
</div>
</ModalContent>
</Modal>
<style>
.signature-wrap {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: var(--spectrum-global-color-gray-50);
color: var(--spectrum-alias-text-color);
box-sizing: border-box;
position: relative;
}
</style>

9
packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
View File

@ -8,7 +8,6 @@
export let onChange
export let readonly = false
export let api
export let invertX = false
export let schema
export let maximum
@ -92,13 +91,7 @@
</div>
{#if isOpen}
<GridPopover
open={isOpen}
{anchor}
{invertX}
maxHeight={null}
on:close={close}
>
<GridPopover open={isOpen} {anchor} maxHeight={null} on:close={close}>
<div class="dropzone">
<Dropzone
{value}

4
packages/frontend-core/src/components/grid/cells/DataCell.svelte
View File

@ -18,8 +18,6 @@
export let row
export let cellId
export let updateValue = rows.actions.updateValue
export let invertX = false
export let invertY = false
export let contentLines = 1
export let hidden = false
@ -93,8 +91,6 @@
onChange={cellAPI.setValue}
{focused}
{readonly}
{invertY}
{invertX}
{contentLines}
/>
<slot />

3
packages/frontend-core/src/components/grid/cells/DateCell.svelte
View File

@ -10,7 +10,6 @@
export let focused = false
export let readonly = false
export let api
export let invertX = false
let isOpen
let anchor
@ -111,7 +110,7 @@
</div>
{#if isOpen}
<GridPopover {anchor} {invertX} maxHeight={null} on:close={close}>
<GridPopover {anchor} maxHeight={null} on:close={close}>
<CoreDatePickerPopoverContents
value={parsedValue}
useKeyboardShortcuts={false}

11
packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
View File

@ -23,7 +23,6 @@
subscribe,
config,
ui,
columns,
definition,
datasource,
schema,
@ -158,17 +157,13 @@
}
const makeDisplayColumn = () => {
columns.actions.changePrimaryDisplay(column.name)
datasource.actions.changePrimaryDisplay(column.name)
open = false
}
const hideColumn = () => {
columns.update(state => {
const index = state.findIndex(col => col.name === column.name)
state[index].visible = false
return state.slice()
})
columns.actions.saveChanges()
datasource.actions.addSchemaMutation(column.name, { visible: false })
datasource.actions.saveSchemaMutations()
open = false
}

3
packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
View File

@ -8,7 +8,6 @@
export let onChange
export let readonly = false
export let api
export let invertX = false
let textarea
let isOpen = false
@ -67,7 +66,7 @@
</div>
{#if isOpen}
<GridPopover {anchor} {invertX} on:close={close}>
<GridPopover {anchor} on:close={close}>
<textarea
bind:this={textarea}
value={value || ""}

3
packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
View File

@ -11,7 +11,6 @@
export let multi = false
export let readonly = false
export let api
export let invertX
export let contentLines = 1
let isOpen = false
@ -120,7 +119,7 @@
</div>
{#if isOpen}
<GridPopover {anchor} {invertX} on:close={close}>
<GridPopover {anchor} on:close={close}>
<div class="options">
{#each options as option, idx}
{@const color = optionColors[option] || getOptionColor(option)}

3
packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
View File

@ -13,7 +13,6 @@
export let focused
export let schema
export let onChange
export let invertX = false
export let contentLines = 1
export let searchFunction = API.searchTable
export let primaryDisplay
@ -275,7 +274,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
{#if isOpen}
<GridPopover open={isOpen} {anchor} {invertX} on:close={close}>
<GridPopover open={isOpen} {anchor} on:close={close}>
<div class="dropdown" on:wheel|stopPropagation>
<div class="search">
<Input

162
packages/frontend-core/src/components/grid/cells/SignatureCell.svelte Normal file
View File

@ -0,0 +1,162 @@
<script>
import { onMount, getContext } from "svelte"
import { SignatureModal } from "@budibase/frontend-core/src/components"
import { CoreSignature, ActionButton } from "@budibase/bbui"
import GridPopover from "../overlays/GridPopover.svelte"
export let schema
export let value
export let focused = false
export let onChange
export let readonly = false
export let api
const { API, notifications, props } = getContext("grid")
let isOpen = false
let modal
let anchor
$: editable = focused && !readonly
$: {
if (!focused) {
close()
}
}
const onKeyDown = () => {
return false
}
const open = () => {
isOpen = true
}
const close = () => {
isOpen = false
}
const deleteSignature = async () => {
onChange(null)
}
const saveSignature = async sigCanvas => {
const signatureFile = sigCanvas.toFile()
let attachRequest = new FormData()
attachRequest.append("file", signatureFile)
try {
const uploadReq = await API.uploadBuilderAttachment(attachRequest)
const [signatureAttachment] = uploadReq
onChange(signatureAttachment)
} catch (error) {
$notifications.error(error.message || "Failed to save signature")
return []
}
}
onMount(() => {
api = {
focus: () => open(),
blur: () => close(),
isActive: () => isOpen,
onKeyDown,
}
})
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="signature-cell"
class:light={!$props?.darkMode}
class:editable
bind:this={anchor}
on:click={editable ? open : null}
>
{#if value?.url}
<!-- svelte-ignore a11y-missing-attribute -->
<img src={value?.url} />
{/if}
</div>
<SignatureModal
onConfirm={saveSignature}
title={schema?.name}
{value}
darkMode={$props.darkMode}
bind:this={modal}
/>
{#if isOpen}
<GridPopover open={isOpen} {anchor} maxHeight={null} on:close={close}>
<div class="signature" class:empty={!value}>
{#if value?.key}
<div class="signature-wrap">
<CoreSignature
darkMode={$props.darkMode}
editable={false}
{value}
on:change={saveSignature}
on:clear={deleteSignature}
/>
</div>
{:else}
<div class="add-signature">
<ActionButton
fullWidth
on:click={() => {
modal.show()
}}
>
Add signature
</ActionButton>
</div>
{/if}
</div>
</GridPopover>
{/if}
<style>
.signature {
min-width: 320px;
padding: var(--cell-padding);
background: var(--grid-background-alt);
border: var(--cell-border);
}
.signature.empty {
width: 100%;
min-width: unset;
}
.signature-cell.light img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.signature-cell {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: stretch;
max-width: 320px;
padding-left: var(--cell-padding);
padding-right: var(--cell-padding);
flex-wrap: nowrap;
align-self: stretch;
overflow: hidden;
user-select: none;
}
.signature-cell.editable:hover {
cursor: pointer;
}
.signature-wrap {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: var(--spectrum-global-color-gray-50);
color: var(--spectrum-alias-text-color);
box-sizing: border-box;
position: relative;
}
</style>

44
packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
View File

@ -3,7 +3,7 @@
import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
import { getColumnIcon } from "../lib/utils"
const { columns, stickyColumn, dispatch } = getContext("grid")
const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
let open = false
let anchor
@ -11,36 +11,20 @@
$: anyHidden = $columns.some(col => !col.visible)
$: text = getText($columns)
const toggleVisibility = async (column, visible) => {
columns.update(state => {
const index = state.findIndex(col => col.name === column.name)
state[index].visible = visible
return state.slice()
})
await columns.actions.saveChanges()
const toggleColumn = async (column, visible) => {
datasource.actions.addSchemaMutation(column.name, { visible })
await datasource.actions.saveSchemaMutations()
dispatch(visible ? "show-column" : "hide-column")
}
const showAll = async () => {
columns.update(state => {
return state.map(col => ({
...col,
visible: true,
}))
const toggleAll = async visible => {
let mutations = {}
$columns.forEach(column => {
mutations[column.name] = { visible }
})
await columns.actions.saveChanges()
dispatch("show-column")
}
const hideAll = async () => {
columns.update(state => {
return state.map(col => ({
...col,
visible: false,
}))
})
await columns.actions.saveChanges()
dispatch("hide-column")
datasource.actions.addSchemaMutations(mutations)
await datasource.actions.saveSchemaMutations()
dispatch(visible ? "show-column" : "hide-column")
}
const getText = columns => {
@ -80,14 +64,14 @@
<Toggle
size="S"
value={column.visible}
on:change={e => toggleVisibility(column, e.detail)}
on:change={e => toggleColumn(column, e.detail)}
disabled={column.primaryDisplay}
/>
{/each}
</div>
<div class="buttons">
<ActionButton on:click={showAll}>Show all</ActionButton>
<ActionButton on:click={hideAll}>Hide all</ActionButton>
<ActionButton on:click={() => toggleAll(true)}>Show all</ActionButton>
<ActionButton on:click={() => toggleAll(false)}>Hide all</ActionButton>
</div>
</div>
</Popover>

2
packages/frontend-core/src/components/grid/layout/Grid.svelte
View File

@ -54,6 +54,7 @@
export let notifySuccess = null
export let notifyError = null
export let buttons = null
export let darkMode
export let isCloud = null
// Unique identifier for DOM nodes inside this instance
@ -109,6 +110,7 @@
notifySuccess,
notifyError,
buttons,
darkMode,
isCloud,
})

7
packages/frontend-core/src/components/grid/layout/GridBody.svelte
View File

@ -9,7 +9,6 @@
bounds,
renderedRows,
visibleColumns,
rowVerticalInversionIndex,
hoveredRowId,
dispatch,
isDragging,
@ -41,11 +40,7 @@
<div bind:this={body} class="grid-body">
<GridScrollWrapper scrollHorizontally scrollVertically attachHandlers>
{#each $renderedRows as row, idx}
<GridRow
{row}
top={idx === 0}
invertY={idx >= $rowVerticalInversionIndex}
/>
<GridRow {row} top={idx === 0} />
{/each}
{#if $config.canAddRows}
<div

6
packages/frontend-core/src/components/grid/layout/GridRow.svelte
View File

@ -5,7 +5,6 @@
export let row
export let top = false
export let invertY = false
const {
focusedCellId,
@ -15,7 +14,6 @@
hoveredRowId,
selectedCellMap,
focusedRow,
columnHorizontalInversionIndex,
contentLines,
isDragging,
dispatch,
@ -38,15 +36,13 @@
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
>
{#each $visibleColumns as column, columnIdx}
{#each $visibleColumns as column}
{@const cellId = getCellID(row._id, column.name)}
<DataCell
{cellId}
{column}
{row}
{invertY}
{rowFocused}
invertX={columnIdx >= $columnHorizontalInversionIndex}
highlighted={rowHovered || rowFocused || reorderSource === column.name}
selected={rowSelected}
rowIdx={row.__idx}

15
packages/frontend-core/src/components/grid/layout/NewRow.svelte
View File

@ -24,8 +24,6 @@
rowHeight,
hasNextPage,
maxScrollTop,
rowVerticalInversionIndex,
columnHorizontalInversionIndex,
selectedRows,
loaded,
refreshing,
@ -43,17 +41,9 @@
$: firstColumn = $stickyColumn || $visibleColumns[0]
$: width = GutterWidth + ($stickyColumn?.width || 0)
$: $datasource, (visible = false)
$: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
$: selectedRowCount = Object.values($selectedRows).length
$: hasNoRows = !$rows.length
const shouldInvertY = (offset, inversionIndex, rows) => {
if (offset === 0) {
return false
}
return rows.length >= inversionIndex
}
const addRow = async () => {
// Blur the active cell and tick to let final value updates propagate
isAdding = true
@ -205,7 +195,6 @@
width={$stickyColumn.width}
{updateValue}
topRow={offset === 0}
{invertY}
>
{#if $stickyColumn?.schema?.autocolumn}
<div class="readonly-overlay">Can't edit auto column</div>
@ -219,7 +208,7 @@
<div class="normal-columns" transition:fade|local={{ duration: 130 }}>
<GridScrollWrapper scrollHorizontally attachHandlers>
<div class="row">
{#each $visibleColumns as column, columnIdx}
{#each $visibleColumns as column}
{@const cellId = `new-${column.name}`}
<DataCell
{cellId}
@ -230,8 +219,6 @@
focused={$focusedCellId === cellId}
width={column.width}
topRow={offset === 0}
invertX={columnIdx >= $columnHorizontalInversionIndex}
{invertY}
hidden={!$columnRenderMap[column.name]}
>
{#if column?.schema?.autocolumn}

2
packages/frontend-core/src/components/grid/lib/renderers.js
View File

@ -13,6 +13,7 @@ import JSONCell from "../cells/JSONCell.svelte"
import AttachmentCell from "../cells/AttachmentCell.svelte"
import AttachmentSingleCell from "../cells/AttachmentSingleCell.svelte"
import BBReferenceCell from "../cells/BBReferenceCell.svelte"
import SignatureCell from "../cells/SignatureCell.svelte"
import BBReferenceSingleCell from "../cells/BBReferenceSingleCell.svelte"
const TypeComponentMap = {
@ -20,6 +21,7 @@ const TypeComponentMap = {
[FieldType.OPTIONS]: OptionsCell,
[FieldType.DATETIME]: DateCell,
[FieldType.BARCODEQR]: TextCell,
[FieldType.SIGNATURE_SINGLE]: SignatureCell,
[FieldType.LONGFORM]: LongFormCell,
[FieldType.ARRAY]: MultiSelectCell,
[FieldType.NUMBER]: NumberCell,

64
packages/frontend-core/src/components/grid/stores/columns.js
View File

@ -1,5 +1,4 @@
import { derived, get, writable } from "svelte/store"
import { cloneDeep } from "lodash/fp"
import { GutterWidth, DefaultColumnWidth } from "../lib/constants"
export const createStores = () => {
@ -75,72 +74,23 @@ export const deriveStores = context => {
}
export const createActions = context => {
const { columns, stickyColumn, datasource, definition, schema } = context
// Updates the datasources primary display column
const changePrimaryDisplay = async column => {
return await datasource.actions.saveDefinition({
...get(definition),
primaryDisplay: column,
})
}
const { columns, datasource, schema } = context
// Updates the width of all columns
const changeAllColumnWidths = async width => {
columns.update(state => {
return state.map(col => ({
...col,
width,
}))
})
if (get(stickyColumn)) {
stickyColumn.update(state => ({
...state,
width,
}))
}
await saveChanges()
}
// Persists column changes by saving metadata against datasource schema
const saveChanges = async () => {
const $columns = get(columns)
const $definition = get(definition)
const $stickyColumn = get(stickyColumn)
let newSchema = cloneDeep(get(schema)) || {}
// Build new updated datasource schema
Object.keys(newSchema).forEach(column => {
// Respect order specified by columns
const index = $columns.findIndex(x => x.name === column)
if (index !== -1) {
newSchema[column].order = index
} else {
delete newSchema[column].order
}
// Copy over metadata
if (column === $stickyColumn?.name) {
newSchema[column].visible = true
newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
} else {
newSchema[column].visible = $columns[index]?.visible ?? true
newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
}
})
await datasource.actions.saveDefinition({
...$definition,
schema: newSchema,
const $schema = get(schema)
let mutations = {}
Object.keys($schema).forEach(field => {
mutations[field] = { width }
})
datasource.actions.addSchemaMutations(mutations)
await datasource.actions.saveSchemaMutations()
}
return {
columns: {
...columns,
actions: {
saveChanges,
changePrimaryDisplay,
changeAllColumnWidths,
},
},

140
packages/frontend-core/src/components/grid/stores/datasource.js
View File

@ -4,15 +4,23 @@ import { memo } from "../../../utils"
export const createStores = () => {
const definition = memo(null)
const schemaMutations = memo({})
return {
definition,
schemaMutations,
}
}
export const deriveStores = context => {
const { API, definition, schemaOverrides, columnWhitelist, datasource } =
context
const {
API,
definition,
schemaOverrides,
columnWhitelist,
datasource,
schemaMutations,
} = context
const schema = derived(definition, $definition => {
let schema = getDatasourceSchema({
@ -35,42 +43,26 @@ export const deriveStores = context => {
return schema
})
// Derives the total enriched schema, made up of the saved schema and any
// prop and user overrides
const enrichedSchema = derived(
[schema, schemaOverrides, columnWhitelist],
([$schema, $schemaOverrides, $columnWhitelist]) => {
[schema, schemaOverrides, schemaMutations, columnWhitelist],
([$schema, $schemaOverrides, $schemaMutations, $columnWhitelist]) => {
if (!$schema) {
return null
}
let enrichedSchema = { ...$schema }
// Apply schema overrides
Object.keys($schemaOverrides || {}).forEach(field => {
if (enrichedSchema[field]) {
enrichedSchema[field] = {
...enrichedSchema[field],
...$schemaOverrides[field],
}
let enrichedSchema = {}
Object.keys($schema).forEach(field => {
// Apply whitelist if provided
if ($columnWhitelist?.length && !$columnWhitelist.includes(field)) {
return
}
enrichedSchema[field] = {
...$schema[field],
...$schemaOverrides?.[field],
...$schemaMutations[field],
}
})
// Apply whitelist if specified
if ($columnWhitelist?.length) {
const sortedColumns = {}
$columnWhitelist.forEach((columnKey, idx) => {
const enrichedColumn = enrichedSchema[columnKey]
if (enrichedColumn) {
sortedColumns[columnKey] = {
...enrichedColumn,
order: idx,
visible: true,
}
}
})
return sortedColumns
}
return enrichedSchema
}
)
@ -100,6 +92,8 @@ export const createActions = context => {
table,
viewV2,
nonPlus,
schemaMutations,
schema,
} = context
// Gets the appropriate API for the configured datasource type
@ -136,11 +130,81 @@ export const createActions = context => {
// Update server
if (get(config).canSaveSchema) {
await getAPI()?.actions.saveDefinition(newDefinition)
}
// Broadcast change to external state can be updated, as this change
// will not be received by the builder websocket because we caused it ourselves
dispatch("updatedatasource", newDefinition)
// Broadcast change so external state can be updated, as this change
// will not be received by the builder websocket because we caused it
// ourselves
dispatch("updatedatasource", newDefinition)
}
}
// Updates the datasources primary display column
const changePrimaryDisplay = async column => {
return await saveDefinition({
...get(definition),
primaryDisplay: column,
})
}
// Adds a schema mutation for a single field
const addSchemaMutation = (field, mutation) => {
if (!field || !mutation) {
return
}
schemaMutations.update($schemaMutations => {
return {
...$schemaMutations,
[field]: {
...$schemaMutations[field],
...mutation,
},
}
})
}
// Adds schema mutations for multiple fields at once
const addSchemaMutations = mutations => {
const fields = Object.keys(mutations || {})
if (!fields.length) {
return
}
schemaMutations.update($schemaMutations => {
let newSchemaMutations = { ...$schemaMutations }
fields.forEach(field => {
newSchemaMutations[field] = {
...newSchemaMutations[field],
...mutations[field],
}
})
return newSchemaMutations
})
}
// Saves schema changes to the server, if possible
const saveSchemaMutations = async () => {
// If we can't save schema changes then we just want to keep this in memory
if (!get(config).canSaveSchema) {
return
}
const $definition = get(definition)
const $schemaMutations = get(schemaMutations)
const $schema = get(schema)
let newSchema = {}
// Build new updated datasource schema
Object.keys($schema).forEach(column => {
newSchema[column] = {
...$schema[column],
...$schemaMutations[column],
}
})
// Save the changes, then reset our local mutations
await saveDefinition({
...$definition,
schema: newSchema,
})
schemaMutations.set({})
}
// Adds a row to the datasource
@ -185,6 +249,10 @@ export const createActions = context => {
getRow,
isDatasourceValid,
canUseColumn,
changePrimaryDisplay,
addSchemaMutation,
addSchemaMutations,
saveSchemaMutations,
},
},
}

30
packages/frontend-core/src/components/grid/stores/reorder.js
View File

@ -34,6 +34,7 @@ export const createActions = context => {
stickyColumn,
maxScrollLeft,
width,
datasource,
} = context
let autoScrollInterval
@ -173,20 +174,17 @@ export const createActions = context => {
document.removeEventListener("touchend", stopReordering)
document.removeEventListener("touchcancel", stopReordering)
// Ensure there's actually a change
let { sourceColumn, targetColumn } = get(reorder)
if (sourceColumn !== targetColumn) {
moveColumn(sourceColumn, targetColumn)
await columns.actions.saveChanges()
}
// Reset state
// Ensure there's actually a change before saving
const { sourceColumn, targetColumn } = get(reorder)
reorder.set(reorderInitialState)
if (sourceColumn !== targetColumn) {
await moveColumn(sourceColumn, targetColumn)
}
}
// Moves a column after another columns.
// An undefined target column will move the source to index 0.
const moveColumn = (sourceColumn, targetColumn) => {
const moveColumn = async (sourceColumn, targetColumn) => {
let $columns = get(columns)
let sourceIdx = $columns.findIndex(x => x.name === sourceColumn)
let targetIdx = $columns.findIndex(x => x.name === targetColumn)
@ -198,14 +196,21 @@ export const createActions = context => {
}
return state.toSpliced(targetIdx, 0, removed[0])
})
// Extract new orders as schema mutations
let mutations = {}
get(columns).forEach((column, idx) => {
mutations[column.name] = { order: idx }
})
datasource.actions.addSchemaMutations(mutations)
await datasource.actions.saveSchemaMutations()
}
// Moves a column one place left (as appears visually)
const moveColumnLeft = async column => {
const $visibleColumns = get(visibleColumns)
const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
await columns.actions.saveChanges()
await moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
}
// Moves a column one place right (as appears visually)
@ -215,8 +220,7 @@ export const createActions = context => {
if (sourceIdx === $visibleColumns.length - 1) {
return
}
moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
await columns.actions.saveChanges()
await moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
}
return {

44
packages/frontend-core/src/components/grid/stores/resize.js
View File

@ -6,7 +6,6 @@ const initialState = {
initialMouseX: null,
initialWidth: null,
column: null,
columnIdx: null,
width: 0,
left: 0,
}
@ -21,7 +20,7 @@ export const createStores = () => {
}
export const createActions = context => {
const { resize, columns, stickyColumn, ui } = context
const { resize, ui, datasource } = context
// Starts resizing a certain column
const startResizing = (column, e) => {
@ -32,12 +31,6 @@ export const createActions = context => {
e.preventDefault()
ui.actions.blur()
// Find and cache index
let columnIdx = get(columns).findIndex(col => col.name === column.name)
if (columnIdx === -1) {
columnIdx = "sticky"
}
// Set initial store state
resize.set({
width: column.width,
@ -45,7 +38,6 @@ export const createActions = context => {
initialWidth: column.width,
initialMouseX: x,
column: column.name,
columnIdx,
})
// Add mouse event listeners to handle resizing
@ -58,7 +50,7 @@ export const createActions = context => {
// Handler for moving the mouse to resize columns
const onResizeMouseMove = e => {
const { initialMouseX, initialWidth, width, columnIdx } = get(resize)
const { initialMouseX, initialWidth, width, column } = get(resize)
const { x } = parseEventLocation(e)
const dx = x - initialMouseX
const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
@ -69,17 +61,7 @@ export const createActions = context => {
}
// Update column state
if (columnIdx === "sticky") {
stickyColumn.update(state => ({
...state,
width: newWidth,
}))
} else {
columns.update(state => {
state[columnIdx].width = newWidth
return [...state]
})
}
datasource.actions.addSchemaMutation(column, { width })
// Update state
resize.update(state => ({
@ -101,26 +83,16 @@ export const createActions = context => {
// Persist width if it changed
if ($resize.width !== $resize.initialWidth) {
await columns.actions.saveChanges()
await datasource.actions.saveSchemaMutations()
}
}
// Resets a column size back to default
const resetSize = async column => {
const $stickyColumn = get(stickyColumn)
if (column.name === $stickyColumn?.name) {
stickyColumn.update(state => ({
...state,
width: DefaultColumnWidth,
}))
} else {
columns.update(state => {
const columnIdx = state.findIndex(x => x.name === column.name)
state[columnIdx].width = DefaultColumnWidth
return [...state]
})
}
await columns.actions.saveChanges()
datasource.actions.addSchemaMutation(column.name, {
width: DefaultColumnWidth,
})
await datasource.actions.saveSchemaMutations()
}
return {

47
packages/frontend-core/src/components/grid/stores/viewport.js
View File

@ -1,9 +1,5 @@
import { derived } from "svelte/store"
import {
MaxCellRenderOverflow,
MinColumnWidth,
ScrollBarSize,
} from "../lib/constants"
import { MinColumnWidth } from "../lib/constants"
export const deriveStores = context => {
const {
@ -85,51 +81,10 @@ export const deriveStores = context => {
}
)
// Determine the row index at which we should start vertically inverting cell
// dropdowns
const rowVerticalInversionIndex = derived(
[height, rowHeight, scrollTop],
([$height, $rowHeight, $scrollTop]) => {
const offset = $scrollTop % $rowHeight
// Compute the last row index with space to render popovers below it
const minBottom =
$height - ScrollBarSize * 3 - MaxCellRenderOverflow + offset
const lastIdx = Math.floor(minBottom / $rowHeight)
// Compute the first row index with space to render popovers above it
const minTop = MaxCellRenderOverflow + offset
const firstIdx = Math.ceil(minTop / $rowHeight)
// Use the greater of the two indices so that we prefer content below,
// unless there is room to render the entire popover above
return Math.max(lastIdx, firstIdx)
}
)
// Determine the column index at which we should start horizontally inverting
// cell dropdowns
const columnHorizontalInversionIndex = derived(
[visibleColumns, scrollLeft, width],
([$visibleColumns, $scrollLeft, $width]) => {
const cutoff = $width + $scrollLeft - ScrollBarSize * 3
let inversionIdx = $visibleColumns.length
for (let i = $visibleColumns.length - 1; i >= 0; i--, inversionIdx--) {
const rightEdge = $visibleColumns[i].left + $visibleColumns[i].width
if (rightEdge + MaxCellRenderOverflow <= cutoff) {
break
}
}
return inversionIdx
}
)
return {
scrolledRowCount,
visualRowCapacity,
renderedRows,
columnRenderMap,
rowVerticalInversionIndex,
columnHorizontalInversionIndex,
}
}

1
packages/frontend-core/src/components/index.js
View File

@ -1,5 +1,6 @@
export { default as SplitPage } from "./SplitPage.svelte"
export { default as TestimonialPage } from "./TestimonialPage.svelte"
export { default as SignatureModal } from "./SignatureModal.svelte"
export { default as Testimonial } from "./Testimonial.svelte"
export { default as UserAvatar } from "./UserAvatar.svelte"
export { default as UserAvatars } from "./UserAvatars.svelte"

1
packages/frontend-core/src/constants.js
View File

@ -121,6 +121,7 @@ export const TypeIconMap = {
[FieldType.OPTIONS]: "Dropdown",
[FieldType.DATETIME]: "Calendar",
[FieldType.BARCODEQR]: "Camera",
[FieldType.SIGNATURE_SINGLE]: "AnnotatePen",
[FieldType.LONGFORM]: "TextAlignLeft",
[FieldType.ARRAY]: "Duplicate",
[FieldType.NUMBER]: "123",

2
packages/server/package.json
View File

@ -79,7 +79,7 @@
"dotenv": "8.2.0",
"form-data": "4.0.0",
"global-agent": "3.0.0",
"google-spreadsheet": "4.1.2",
"google-spreadsheet": "npm:@budibase/google-spreadsheet@4.1.2",
"ioredis": "5.3.2",
"isolated-vm": "^4.7.2",
"jimp": "0.22.10",

128
packages/server/src/api/routes/tests/row.spec.ts
View File

@ -309,6 +309,11 @@ describe.each([
name: "attachments",
constraints: { type: "array", presence: false },
}
const signature: FieldSchema = {
type: FieldType.SIGNATURE_SINGLE,
name: "signature",
constraints: { presence: false },
}
const bool: FieldSchema = {
type: FieldType.BOOLEAN,
name: "boolean",
@ -375,6 +380,8 @@ describe.each([
attachmentListUndefined: attachmentList,
attachmentListEmpty: attachmentList,
attachmentListEmptyArrayStr: attachmentList,
signatureNull: signature,
signatureUndefined: signature,
arrayFieldEmptyArrayStr: arrayField,
arrayFieldArrayStrKnown: arrayField,
arrayFieldNull: arrayField,
@ -416,6 +423,8 @@ describe.each([
attachmentListUndefined: undefined,
attachmentListEmpty: "",
attachmentListEmptyArrayStr: "[]",
signatureNull: null,
signatureUndefined: undefined,
arrayFieldEmptyArrayStr: "[]",
arrayFieldUndefined: undefined,
arrayFieldNull: null,
@ -450,6 +459,8 @@ describe.each([
expect(row.attachmentListUndefined).toBe(undefined)
expect(row.attachmentListEmpty).toEqual([])
expect(row.attachmentListEmptyArrayStr).toEqual([])
expect(row.signatureNull).toEqual(null)
expect(row.signatureUndefined).toBe(undefined)
expect(row.arrayFieldEmptyArrayStr).toEqual([])
expect(row.arrayFieldNull).toEqual([])
expect(row.arrayFieldUndefined).toEqual(undefined)
@ -894,70 +905,91 @@ describe.each([
})
isInternal &&
describe("attachments", () => {
it("should allow enriching single attachment rows", async () => {
const table = await config.api.table.save(
describe("attachments and signatures", () => {
const coreAttachmentEnrichment = async (
schema: any,
field: string,
attachmentCfg: string | string[]
) => {
const testTable = await config.api.table.save(
defaultTable({
schema: {
attachment: {
type: FieldType.ATTACHMENT_SINGLE,
name: "attachment",
constraints: { presence: false },
},
},
schema,
})
)
const attachmentId = `${uuid.v4()}.csv`
const row = await config.api.row.save(table._id!, {
const attachmentToStoreKey = (attachmentId: string) => {
return {
key: `${config.getAppId()}/attachments/${attachmentId}`,
}
}
const draftRow = {
name: "test",
description: "test",
attachment: {
key: `${config.getAppId()}/attachments/${attachmentId}`,
},
[field]:
typeof attachmentCfg === "string"
? attachmentToStoreKey(attachmentCfg)
: attachmentCfg.map(attachmentToStoreKey),
tableId: testTable._id,
}
const row = await config.api.row.save(testTable._id!, draftRow)
tableId: table._id,
})
await config.withEnv({ SELF_HOSTED: "true" }, async () => {
return context.doInAppContext(config.getAppId(), async () => {
const enriched = await outputProcessing(table, [row])
expect((enriched as Row[])[0].attachment.url.split("?")[0]).toBe(
`/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
)
const enriched: Row[] = await outputProcessing(table, [row])
const [targetRow] = enriched
const attachmentEntries = Array.isArray(targetRow[field])
? targetRow[field]
: [targetRow[field]]
for (const entry of attachmentEntries) {
const attachmentId = entry.key.split("/").pop()
expect(entry.url.split("?")[0]).toBe(
`/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
)
}
})
})
}
it("should allow enriching single attachment rows", async () => {
await coreAttachmentEnrichment(
{
attachment: {
type: FieldType.ATTACHMENT_SINGLE,
name: "attachment",
constraints: { presence: false },
},
},
"attachment",
`${uuid.v4()}.csv`
)
})
it("should allow enriching attachment list rows", async () => {
const table = await config.api.table.save(
defaultTable({
schema: {
attachment: {
type: FieldType.ATTACHMENTS,
name: "attachment",
constraints: { type: "array", presence: false },
},
await coreAttachmentEnrichment(
{
attachments: {
type: FieldType.ATTACHMENTS,
name: "attachments",
constraints: { type: "array", presence: false },
},
})
},
"attachments",
[`${uuid.v4()}.csv`]
)
const attachmentId = `${uuid.v4()}.csv`
const row = await config.api.row.save(table._id!, {
name: "test",
description: "test",
attachment: [
{
key: `${config.getAppId()}/attachments/${attachmentId}`,
})
it("should allow enriching signature rows", async () => {
await coreAttachmentEnrichment(
{
signature: {
type: FieldType.SIGNATURE_SINGLE,
name: "signature",
constraints: { presence: false },
},
],
tableId: table._id,
})
await config.withEnv({ SELF_HOSTED: "true" }, async () => {
return context.doInAppContext(config.getAppId(), async () => {
const enriched = await outputProcessing(table, [row])
expect((enriched as Row[])[0].attachment[0].url.split("?")[0]).toBe(
`/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
)
})
})
},
"signature",
`${uuid.v4()}.png`
)
})
})

44
packages/server/src/api/routes/tests/search.spec.ts
View File

@ -21,9 +21,6 @@ import _ from "lodash"
import tk from "timekeeper"
import { encodeJSBinding } from "@budibase/string-templates"
const serverTime = new Date("2024-05-06T00:00:00.000Z")
tk.freeze(serverTime)
describe.each([
["lucene", undefined],
["sqs", undefined],
@ -251,8 +248,14 @@ describe.each([
describe("bindings", () => {
let globalUsers: any = []
const future = new Date(serverTime.getTime())
future.setDate(future.getDate() + 30)
const serverTime = new Date()
// In MariaDB and MySQL we only store dates to second precision, so we need
// to remove milliseconds from the server time to ensure searches work as
// expected.
serverTime.setMilliseconds(0)
const future = new Date(serverTime.getTime() + 1000 * 60 * 60 * 24 * 30)
const rows = (currentUser: User) => {
return [
@ -358,20 +361,22 @@ describe.each([
})
it("should parse the date binding and return all rows after the resolved value", async () => {
await expectQuery({
range: {
appointment: {
low: "{{ [now] }}",
high: "9999-00-00T00:00:00.000Z",
await tk.withFreeze(serverTime, async () => {
await expectQuery({
range: {
appointment: {
low: "{{ [now] }}",
high: "9999-00-00T00:00:00.000Z",
},
},
},
}).toContainExactly([
{
name: config.getUser().firstName,
appointment: future.toISOString(),
},
{ name: "serverDate", appointment: serverTime.toISOString() },
])
}).toContainExactly([
{
name: config.getUser().firstName,
appointment: future.toISOString(),
},
{ name: "serverDate", appointment: serverTime.toISOString() },
])
})
})
it("should parse the date binding and return all rows before the resolved value", async () => {
@ -407,8 +412,7 @@ describe.each([
})
it("should parse the encoded js binding. Return rows with appointments 2 weeks in the past", async () => {
const jsBinding =
"const currentTime = new Date()\ncurrentTime.setDate(currentTime.getDate()-14);\nreturn currentTime.toISOString();"
const jsBinding = `const currentTime = new Date(${Date.now()})\ncurrentTime.setDate(currentTime.getDate()-14);\nreturn currentTime.toISOString();`
const encodedBinding = encodeJSBinding(jsBinding)
await expectQuery({

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

@ -113,7 +113,8 @@ export async function sendAutomationAttachmentsToStorage(
const schema = table.schema[prop]
if (
schema?.type === FieldType.ATTACHMENTS ||
schema?.type === FieldType.ATTACHMENT_SINGLE
schema?.type === FieldType.ATTACHMENT_SINGLE ||
schema?.type === FieldType.SIGNATURE_SINGLE
) {
attachmentRows[prop] = value
}

64
packages/server/src/integrations/googlesheets.ts
View File

@ -72,6 +72,7 @@ const isTypeAllowed: Record<FieldType, boolean> = {
[FieldType.JSON]: false,
[FieldType.INTERNAL]: false,
[FieldType.BIGINT]: false,
[FieldType.SIGNATURE_SINGLE]: false,
}
const ALLOWED_TYPES = Object.entries(isTypeAllowed)
@ -228,32 +229,53 @@ class GoogleSheetsIntegration implements DatasourcePlus {
private async connect() {
try {
await setupCreationAuth(this.config)
const bbCtx = context.getCurrentContext()
let oauthClient = bbCtx?.googleSheets?.oauthClient
// Initialise oAuth client
const googleConfig = await configs.getGoogleDatasourceConfig()
if (!googleConfig) {
throw new HTTPError("Google config not found", 400)
if (!oauthClient) {
await setupCreationAuth(this.config)
// Initialise oAuth client
const googleConfig = await configs.getGoogleDatasourceConfig()
if (!googleConfig) {
throw new HTTPError("Google config not found", 400)
}
oauthClient = new OAuth2Client({
clientId: googleConfig.clientID,
clientSecret: googleConfig.clientSecret,
})
const tokenResponse = await this.fetchAccessToken({
client_id: googleConfig.clientID,
client_secret: googleConfig.clientSecret,
refresh_token: this.config.auth.refreshToken,
})
oauthClient.setCredentials({
refresh_token: this.config.auth.refreshToken,
access_token: tokenResponse.access_token,
})
if (bbCtx && !bbCtx.googleSheets) {
bbCtx.googleSheets = {
oauthClient,
clients: {},
}
bbCtx.cleanup = bbCtx.cleanup || []
}
}
const oauthClient = new OAuth2Client({
clientId: googleConfig.clientID,
clientSecret: googleConfig.clientSecret,
})
let client = bbCtx?.googleSheets?.clients[this.spreadsheetId]
if (!client) {
client = new GoogleSpreadsheet(this.spreadsheetId, oauthClient)
await client.loadInfo()
const tokenResponse = await this.fetchAccessToken({
client_id: googleConfig.clientID,
client_secret: googleConfig.clientSecret,
refresh_token: this.config.auth.refreshToken,
})
if (bbCtx?.googleSheets?.clients) {
bbCtx.googleSheets.clients[this.spreadsheetId] = client
}
}
oauthClient.setCredentials({
refresh_token: this.config.auth.refreshToken,
access_token: tokenResponse.access_token,
})
this.client = new GoogleSpreadsheet(this.spreadsheetId, oauthClient)
await this.client.loadInfo()
this.client = client
} catch (err: any) {
// this happens for xlsx imports
if (err.message?.includes("operation is not supported")) {

23
packages/server/src/integrations/rest.ts
View File

@ -1,22 +1,22 @@
import {
Integration,
DatasourceFieldType,
QueryType,
PaginationConfig,
HttpMethod,
Integration,
IntegrationBase,
PaginationConfig,
PaginationValues,
RestQueryFields as RestQuery,
RestConfig,
QueryType,
RestAuthType,
RestBasicAuthConfig,
RestBearerAuthConfig,
HttpMethod,
RestConfig,
RestQueryFields as RestQuery,
} from "@budibase/types"
import get from "lodash/get"
import * as https from "https"
import qs from "querystring"
import fetch from "node-fetch"
import type { Response } from "node-fetch"
import fetch from "node-fetch"
import { formatBytes } from "../utilities"
import { performance } from "perf_hooks"
import FormData from "form-data"
@ -87,6 +87,12 @@ const SCHEMA: Integration = {
default: true,
required: false,
},
downloadImages: {
display: "Download images",
type: DatasourceFieldType.BOOLEAN,
default: true,
required: false,
},
},
query: {
create: {
@ -139,7 +145,8 @@ class RestIntegration implements IntegrationBase {
filename: string | undefined
const { contentType, contentDisposition } = getAttachmentHeaders(
response.headers
response.headers,
{ downloadImages: this.config.downloadImages }
)
if (
contentDisposition.includes("filename") ||

14
packages/server/src/integrations/tests/restUtils.spec.ts
View File

@ -1,13 +1,13 @@
import { getAttachmentHeaders } from "../utils/restUtils"
import type { Headers } from "node-fetch"
function headers(dispositionValue: string) {
function headers(dispositionValue: string, contentType?: string) {
return {
get: (name: string) => {
if (name.toLowerCase() === "content-disposition") {
return dispositionValue
} else {
return "application/pdf"
return contentType || "application/pdf"
}
},
set: () => {},
@ -35,4 +35,14 @@ describe("getAttachmentHeaders", () => {
)
expect(contentDisposition).toBe(`inline; filename="report.pdf"`)
})
it("should handle an image", () => {
const { contentDisposition } = getAttachmentHeaders(
headers("", "image/png"),
{
downloadImages: true,
}
)
expect(contentDisposition).toBe(`attachment; filename="image.png"`)
})
})

14
packages/server/src/integrations/utils/restUtils.ts
View File

@ -1,6 +1,9 @@
import type { Headers } from "node-fetch"
export function getAttachmentHeaders(headers: Headers) {
export function getAttachmentHeaders(
headers: Headers,
opts?: { downloadImages?: boolean }
) {
const contentType = headers.get("content-type") || ""
let contentDisposition = headers.get("content-disposition") || ""
@ -23,6 +26,15 @@ export function getAttachmentHeaders(headers: Headers) {
}
}
}
// for images which don't supply a content disposition, make one up, as binary
// data for images in REST responses isn't really useful, we should always download them
else if (opts?.downloadImages && contentType.startsWith("image/")) {
const format = contentType.split("/")[1]
return {
contentDisposition: `attachment; filename="image.${format}"`,
contentType,
}
}
return { contentDisposition, contentType }
}

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

@ -254,6 +254,7 @@ function copyExistingPropsOver(
case FieldType.ARRAY:
case FieldType.ATTACHMENTS:
case FieldType.ATTACHMENT_SINGLE:
case FieldType.SIGNATURE_SINGLE:
case FieldType.JSON:
case FieldType.BB_REFERENCE:
case FieldType.BB_REFERENCE_SINGLE:

3
packages/server/src/sdk/app/backups/imports.ts
View File

@ -68,7 +68,8 @@ export async function updateAttachmentColumns(prodAppId: string, db: Database) {
rewriteAttachmentUrl(prodAppId, attachment)
)
} else if (
columnType === FieldType.ATTACHMENT_SINGLE &&
(columnType === FieldType.ATTACHMENT_SINGLE ||
columnType === FieldType.SIGNATURE_SINGLE) &&
row[column]
) {
row[column] = rewriteAttachmentUrl(prodAppId, row[column])

3
packages/server/src/sdk/app/rows/attachments.ts
View File

@ -32,7 +32,8 @@ export async function getRowsWithAttachments(appId: string, table: Table) {
for (let [key, column] of Object.entries(table.schema)) {
if (
column.type === FieldType.ATTACHMENTS ||
column.type === FieldType.ATTACHMENT_SINGLE
column.type === FieldType.ATTACHMENT_SINGLE ||
column.type === FieldType.SIGNATURE_SINGLE
) {
attachmentCols.push(key)
}

8
packages/server/src/sdk/app/rows/utils.ts
View File

@ -145,6 +145,10 @@ export async function validate({
throw new Error("Unable to fetch table for validation")
}
const errors: Record<string, any> = {}
const disallowArrayTypes = [
FieldType.ATTACHMENT_SINGLE,
FieldType.BB_REFERENCE_SINGLE,
]
for (let fieldName of Object.keys(fetchedTable.schema)) {
const column = fetchedTable.schema[fieldName]
const constraints = cloneDeep(column.constraints)
@ -161,6 +165,10 @@ export async function validate({
if (type === FieldType.OPTIONS && constraints?.inclusion) {
constraints.inclusion.push(null as any, "")
}
if (disallowArrayTypes.includes(type) && Array.isArray(row[fieldName])) {
errors[fieldName] = `Cannot accept arrays`
}
let res
// Validate.js doesn't seem to handle array

1
packages/server/src/sdk/app/tables/internal/sqs.ts
View File

@ -29,6 +29,7 @@ const FieldTypeMap: Record<FieldType, SQLiteType> = {
[FieldType.BARCODEQR]: SQLiteType.BLOB,
[FieldType.ATTACHMENTS]: SQLiteType.BLOB,
[FieldType.ATTACHMENT_SINGLE]: SQLiteType.BLOB,
[FieldType.SIGNATURE_SINGLE]: SQLiteType.BLOB,
[FieldType.ARRAY]: SQLiteType.BLOB,
[FieldType.LINK]: SQLiteType.BLOB,
[FieldType.BIGINT]: SQLiteType.TEXT,

63
packages/server/src/sdk/tests/attachments.spec.ts
View File

@ -23,13 +23,35 @@ describe("should be able to re-write attachment URLs", () => {
await config.init()
})
it("should update URLs on a number of rows over the limit", async () => {
const coreBehaviour = async (tblSchema: any, row: any) => {
const table = await config.api.table.save({
name: "photos",
type: "table",
sourceId: INTERNAL_TABLE_SOURCE_ID,
sourceType: TableSourceType.INTERNAL,
schema: {
schema: tblSchema,
})
for (let i = 0; i < FIND_LIMIT * 4; i++) {
await config.api.row.save(table._id!, {
...row,
})
}
const db = dbCore.getDB(config.getAppId())
await sdk.backups.updateAttachmentColumns(db.name, db)
return {
db,
rows: (await sdk.rows.getAllInternalRows(db.name)).filter(
row => row.tableId === table._id
),
}
}
it("Attachment field, should update URLs on a number of rows over the limit", async () => {
const { rows, db } = await coreBehaviour(
{
photo: {
type: FieldType.ATTACHMENT_SINGLE,
name: "photo",
@ -43,21 +65,11 @@ describe("should be able to re-write attachment URLs", () => {
name: "otherCol",
},
},
})
for (let i = 0; i < FIND_LIMIT * 4; i++) {
await config.api.row.save(table._id!, {
{
photo: { ...attachment },
gallery: [{ ...attachment }, { ...attachment }],
otherCol: "string",
})
}
const db = dbCore.getDB(config.getAppId())
await sdk.backups.updateAttachmentColumns(db.name, db)
const rows = (await sdk.rows.getAllInternalRows(db.name)).filter(
row => row.tableId === table._id
}
)
for (const row of rows) {
expect(row.otherCol).toBe("string")
@ -69,4 +81,27 @@ describe("should be able to re-write attachment URLs", () => {
expect(row.gallery[1].key).toBe(`${db.name}/attachments/a.png`)
}
})
it("Signature field, should update URLs on a number of rows over the limit", async () => {
const { rows, db } = await coreBehaviour(
{
signature: {
type: FieldType.SIGNATURE_SINGLE,
name: "signature",
},
otherCol: {
type: FieldType.STRING,
name: "otherCol",
},
},
{
signature: { ...attachment },
otherCol: "string",
}
)
for (const row of rows) {
expect(row.otherCol).toBe("string")
expect(row.signature.url).toBe("")
expect(row.signature.key).toBe(`${db.name}/attachments/a.png`)
}
})
})

13
packages/server/src/utilities/rowProcessor/attachments.ts
View File

@ -31,7 +31,8 @@ export class AttachmentCleanup {
): string[] {
if (
type !== FieldType.ATTACHMENTS &&
type !== FieldType.ATTACHMENT_SINGLE
type !== FieldType.ATTACHMENT_SINGLE &&
type !== FieldType.SIGNATURE_SINGLE
) {
return []
}
@ -62,7 +63,8 @@ export class AttachmentCleanup {
for (let [key, schema] of Object.entries(tableSchema)) {
if (
schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE
schema.type !== FieldType.ATTACHMENT_SINGLE &&
schema.type !== FieldType.SIGNATURE_SINGLE
) {
continue
}
@ -100,10 +102,12 @@ export class AttachmentCleanup {
for (let [key, schema] of Object.entries(table.schema)) {
if (
schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE
schema.type !== FieldType.ATTACHMENT_SINGLE &&
schema.type !== FieldType.SIGNATURE_SINGLE
) {
continue
}
rows.forEach(row => {
files = files.concat(
AttachmentCleanup.extractAttachmentKeys(schema.type, row[key])
@ -120,7 +124,8 @@ export class AttachmentCleanup {
for (let [key, schema] of Object.entries(table.schema)) {
if (
schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE
schema.type !== FieldType.ATTACHMENT_SINGLE &&
schema.type !== FieldType.SIGNATURE_SINGLE
) {
continue
}

8
packages/server/src/utilities/rowProcessor/index.ts
View File

@ -158,7 +158,10 @@ export async function inputProcessing(
delete attachment.url
})
}
} else if (field.type === FieldType.ATTACHMENT_SINGLE) {
} else if (
field.type === FieldType.ATTACHMENT_SINGLE ||
field.type === FieldType.SIGNATURE_SINGLE
) {
const attachment = clonedRow[key]
if (attachment?.url) {
delete clonedRow[key].url
@ -230,7 +233,8 @@ export async function outputProcessing<T extends Row[] | Row>(
for (let [property, column] of Object.entries(table.schema)) {
if (
column.type === FieldType.ATTACHMENTS ||
column.type === FieldType.ATTACHMENT_SINGLE
column.type === FieldType.ATTACHMENT_SINGLE ||
column.type === FieldType.SIGNATURE_SINGLE
) {
for (let row of enriched) {
if (row[property] == null) {

180
packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts
View File

@ -1,22 +1,30 @@
import { AttachmentCleanup } from "../attachments"
import { FieldType, Table, Row, TableSourceType } from "@budibase/types"
import { DEFAULT_BB_DATASOURCE_ID } from "../../../constants"
import { objectStore } from "@budibase/backend-core"
import { objectStore, db, context } from "@budibase/backend-core"
import * as uuid from "uuid"
const BUCKET = "prod-budi-app-assets"
const FILE_NAME = "file/thing.jpg"
const DEV_APPID = "abc_dev_123"
const PROD_APPID = "abc_123"
jest.mock("@budibase/backend-core", () => {
const actual = jest.requireActual("@budibase/backend-core")
return {
...actual,
context: {
...actual.context,
getAppId: jest.fn(),
},
objectStore: {
deleteFiles: jest.fn(),
ObjectStoreBuckets: actual.objectStore.ObjectStoreBuckets,
},
db: {
isProdAppID: () => jest.fn(() => false),
dbExists: () => jest.fn(() => false),
isProdAppID: jest.fn(),
getProdAppID: jest.fn(),
dbExists: jest.fn(),
},
}
})
@ -27,12 +35,18 @@ const mockedDeleteFiles = objectStore.deleteFiles as jest.MockedFunction<
const rowGenerators: [
string,
FieldType.ATTACHMENT_SINGLE | FieldType.ATTACHMENTS,
(
| FieldType.ATTACHMENT_SINGLE
| FieldType.ATTACHMENTS
| FieldType.SIGNATURE_SINGLE
),
string,
(fileKey?: string) => Row
][] = [
[
"row with a attachment list column",
FieldType.ATTACHMENTS,
"attach",
function rowWithAttachments(fileKey: string = FILE_NAME): Row {
return {
attach: [
@ -48,6 +62,7 @@ const rowGenerators: [
[
"row with a single attachment column",
FieldType.ATTACHMENT_SINGLE,
"attach",
function rowWithAttachments(fileKey: string = FILE_NAME): Row {
return {
attach: {
@ -58,11 +73,25 @@ const rowGenerators: [
}
},
],
[
"row with a single signature column",
FieldType.SIGNATURE_SINGLE,
"signature",
function rowWithSignature(): Row {
return {
signature: {
size: 1,
extension: "png",
key: `${uuid.v4()}.png`,
},
}
},
],
]
describe.each(rowGenerators)(
"attachment cleanup",
(_, attachmentFieldType, rowGenerator) => {
(_, attachmentFieldType, colKey, rowGenerator) => {
function tableGenerator(): Table {
return {
name: "table",
@ -75,97 +104,158 @@ describe.each(rowGenerators)(
type: attachmentFieldType,
constraints: {},
},
signature: {
name: "signature",
type: FieldType.SIGNATURE_SINGLE,
constraints: {},
},
},
}
}
const getRowKeys = (row: any, col: string) => {
return Array.isArray(row[col])
? row[col].map((entry: any) => entry.key)
: [row[col]?.key]
}
beforeEach(() => {
mockedDeleteFiles.mockClear()
jest.resetAllMocks()
jest.spyOn(context, "getAppId").mockReturnValue(DEV_APPID)
jest.spyOn(db, "isProdAppID").mockReturnValue(false)
jest.spyOn(db, "getProdAppID").mockReturnValue(PROD_APPID)
jest.spyOn(db, "dbExists").mockReturnValue(Promise.resolve(false))
})
it("should be able to cleanup a table update", async () => {
// Ignore calls to prune attachments when app is in production.
it(`${attachmentFieldType} - should not attempt to delete attachments/signatures if a published app exists`, async () => {
jest.spyOn(db, "dbExists").mockReturnValue(Promise.resolve(true))
const originalTable = tableGenerator()
delete originalTable.schema["attach"]
delete originalTable.schema[colKey]
await AttachmentCleanup.tableUpdate(originalTable, [rowGenerator()], {
oldTable: tableGenerator(),
})
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
})
it("should be able to cleanup a table deletion", async () => {
await AttachmentCleanup.tableDelete(tableGenerator(), [rowGenerator()])
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
})
it("should handle table column renaming", async () => {
const updatedTable = tableGenerator()
updatedTable.schema.attach2 = updatedTable.schema.attach
delete updatedTable.schema.attach
await AttachmentCleanup.tableUpdate(updatedTable, [rowGenerator()], {
oldTable: tableGenerator(),
rename: { old: "attach", updated: "attach2" },
})
expect(mockedDeleteFiles).not.toHaveBeenCalled()
})
it("shouldn't cleanup if no table changes", async () => {
it(`${attachmentFieldType} - should be able to cleanup a table update`, async () => {
const originalTable = tableGenerator()
delete originalTable.schema[colKey]
const targetRow = rowGenerator()
await AttachmentCleanup.tableUpdate(originalTable, [targetRow], {
oldTable: tableGenerator(),
})
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it(`${attachmentFieldType} - should be able to cleanup a table deletion`, async () => {
const targetRow = rowGenerator()
await AttachmentCleanup.tableDelete(tableGenerator(), [targetRow])
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it(`${attachmentFieldType} - should handle table column renaming`, async () => {
const updatedTable = tableGenerator()
updatedTable.schema.col2 = updatedTable.schema[colKey]
delete updatedTable.schema.attach
await AttachmentCleanup.tableUpdate(updatedTable, [rowGenerator()], {
oldTable: tableGenerator(),
rename: { old: colKey, updated: "col2" },
})
expect(mockedDeleteFiles).not.toHaveBeenCalled()
})
it(`${attachmentFieldType} - shouldn't cleanup if no table changes`, async () => {
await AttachmentCleanup.tableUpdate(tableGenerator(), [rowGenerator()], {
oldTable: tableGenerator(),
})
expect(mockedDeleteFiles).not.toHaveBeenCalled()
})
it("should handle row updates", async () => {
it(`${attachmentFieldType} - should handle row updates`, async () => {
const updatedRow = rowGenerator()
delete updatedRow.attach
delete updatedRow[colKey]
const targetRow = rowGenerator()
await AttachmentCleanup.rowUpdate(tableGenerator(), {
row: updatedRow,
oldRow: rowGenerator(),
oldRow: targetRow,
})
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it("should handle row deletion", async () => {
await AttachmentCleanup.rowDelete(tableGenerator(), [rowGenerator()])
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
it(`${attachmentFieldType} - should handle row deletion`, async () => {
const targetRow = rowGenerator()
await AttachmentCleanup.rowDelete(tableGenerator(), [targetRow])
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it("should handle row deletion and not throw when attachments are undefined", async () => {
it(`${attachmentFieldType} - should handle row deletion, prune signature`, async () => {
const targetRow = rowGenerator()
await AttachmentCleanup.rowDelete(tableGenerator(), [targetRow])
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it(`${attachmentFieldType} - should handle row deletion and not throw when attachments are undefined`, async () => {
await AttachmentCleanup.rowDelete(tableGenerator(), [
{
multipleAttachments: undefined,
[colKey]: undefined,
},
])
})
it("shouldn't cleanup attachments if row not updated", async () => {
it(`${attachmentFieldType} - shouldn't cleanup attachments if row not updated`, async () => {
const targetRow = rowGenerator()
await AttachmentCleanup.rowUpdate(tableGenerator(), {
row: rowGenerator(),
oldRow: rowGenerator(),
row: targetRow,
oldRow: targetRow,
})
expect(mockedDeleteFiles).not.toHaveBeenCalled()
})
it("should be able to cleanup a column and not throw when attachments are undefined", async () => {
it(`${attachmentFieldType} - should be able to cleanup a column and not throw when attachments are undefined`, async () => {
const originalTable = tableGenerator()
delete originalTable.schema["attach"]
delete originalTable.schema[colKey]
const row1 = rowGenerator("file 1")
const row2 = rowGenerator("file 2")
await AttachmentCleanup.tableUpdate(
originalTable,
[rowGenerator("file 1"), { attach: undefined }, rowGenerator("file 2")],
[row1, { [colKey]: undefined }, row2],
{
oldTable: tableGenerator(),
}
)
const expectedKeys = [row1, row2].reduce((acc: string[], row) => {
acc = [...acc, ...getRowKeys(row, colKey)]
return acc
}, [])
expect(mockedDeleteFiles).toHaveBeenCalledTimes(1)
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [
"file 1",
"file 2",
])
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, expectedKeys)
})
it("should be able to cleanup a column and not throw when ALL attachments are undefined", async () => {
it(`${attachmentFieldType} - should be able to cleanup a column and not throw when ALL attachments are undefined`, async () => {
const originalTable = tableGenerator()
delete originalTable.schema["attach"]
delete originalTable.schema[colKey]
await AttachmentCleanup.tableUpdate(
originalTable,
[{}, { attach: undefined }],

3
packages/server/src/utilities/schema.ts
View File

@ -151,7 +151,8 @@ export function parse(rows: Rows, schema: TableSchema): Rows {
parsedRow[columnName] = parsedValue?._id
} else if (
(columnType === FieldType.ATTACHMENTS ||
columnType === FieldType.ATTACHMENT_SINGLE) &&
columnType === FieldType.ATTACHMENT_SINGLE ||
columnType === FieldType.SIGNATURE_SINGLE) &&
typeof columnData === "string"
) {
parsedRow[columnName] = parseCsvExport(columnData)

3
packages/shared-core/src/table.ts
View File

@ -15,6 +15,7 @@ const allowDisplayColumnByType: Record<FieldType, boolean> = {
[FieldType.ARRAY]: false,
[FieldType.ATTACHMENTS]: false,
[FieldType.ATTACHMENT_SINGLE]: false,
[FieldType.SIGNATURE_SINGLE]: false,
[FieldType.LINK]: false,
[FieldType.JSON]: false,
[FieldType.BB_REFERENCE]: false,
@ -33,10 +34,10 @@ const allowSortColumnByType: Record<FieldType, boolean> = {
[FieldType.BIGINT]: true,
[FieldType.BOOLEAN]: true,
[FieldType.JSON]: true,
[FieldType.FORMULA]: false,
[FieldType.ATTACHMENTS]: false,
[FieldType.ATTACHMENT_SINGLE]: false,
[FieldType.SIGNATURE_SINGLE]: false,
[FieldType.ARRAY]: false,
[FieldType.LINK]: false,
[FieldType.BB_REFERENCE]: false,

1
packages/types/src/documents/app/datasource.ts
View File

@ -46,6 +46,7 @@ export interface DynamicVariable {
export interface RestConfig {
url: string
rejectUnauthorized: boolean
downloadImages?: boolean
defaultHeaders: {
[key: string]: any
}

5
packages/types/src/documents/app/row.ts
View File

@ -93,6 +93,11 @@ export enum FieldType {
* type is found. The column will contain the contents of any barcode scanned.
*/
BARCODEQR = "barcodeqr",
/**
* a JSON type, called Signature within Budibase. This type functions much the same as ATTACHMENTS but restricted
* only to signatures.
*/
SIGNATURE_SINGLE = "signature_single",
/**
* a string type, this allows representing very large integers, but they are held/managed within Budibase as
* strings. When stored in external databases Budibase will attempt to use a real big integer type and depend

6
yarn.lock
View File

@ -11540,10 +11540,10 @@ google-p12-pem@^4.0.0:
dependencies:
node-forge "^1.3.1"
google-spreadsheet@4.1.2:
"google-spreadsheet@npm:@budibase/google-spreadsheet@4.1.2":
version "4.1.2"
resolved "https://registry.yarnpkg.com/google-spreadsheet/-/google-spreadsheet-4.1.2.tgz#92e30fdba7e0d78c55d50731528df7835d58bfee"
integrity sha512-HFBweDAkOcyC2qO9kmWESKbNuOcn+R7UzZN/tj5LLNxVv8FHmg113u0Ow+yaKwwIOt/NnDtPLuptAhaxTs0FYw==
resolved "https://registry.yarnpkg.com/@budibase/google-spreadsheet/-/google-spreadsheet-4.1.2.tgz#90548ccba2284b3042b08d2974ef3caeaf772ad9"
integrity sha512-dxoY3rQGGnuNeZiXhNc9oYPduzU8xnIjWujFwNvaRRv3zWeUV7mj6HE2o/OJOeekPGt7o44B+w6DfkiaoteZgg==
dependencies:
axios "^1.4.0"
lodash "^4.17.21"