CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-16 11:45:47 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of github.com:Budibase/budibase into feature/audit-log-sqs

Browse source
This commit is contained in:
mike12345567 2024-05-24 12:22:20 +01:00
parent a3d2871330 6dfdf09cb9
commit b18ca2670a
29 changed files with 615 additions and 349 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lerna.json
View file

@ -22,4 +22,4 @@
"loadEnvFiles": false
}
}
}
}

49
packages/backend-core/src/sql/sql.ts
View file

@ -231,8 +231,7 @@ class InternalBuilder {
}
const contains = (mode: object, any: boolean = false) => {
const fnc = allOr ? "orWhere" : "where"
const rawFnc = `${fnc}Raw`
const rawFnc = allOr ? "orWhereRaw" : "whereRaw"
const not = mode === filters?.notContains ? "NOT " : ""
function stringifyArray(value: Array<any>, quoteStyle = '"'): string {
for (let i in value) {
@ -245,24 +244,24 @@ class InternalBuilder {
if (this.client === SqlClient.POSTGRES) {
iterate(mode, (key: string, value: Array<any>) => {
const wrap = any ? "" : "'"
const containsOp = any ? "\\?| array" : "@>"
const op = any ? "\\?| array" : "@>"
const fieldNames = key.split(/\./g)
const tableName = fieldNames[0]
const columnName = fieldNames[1]
// @ts-ignore
const table = fieldNames[0]
const col = fieldNames[1]
query = query[rawFnc](
`${not}"${tableName}"."${columnName}"::jsonb ${containsOp} ${wrap}${stringifyArray(
`${not}COALESCE("${table}"."${col}"::jsonb ${op} ${wrap}${stringifyArray(
value,
any ? "'" : '"'
)}${wrap}`
)}${wrap}, FALSE)`
)
})
} else if (this.client === SqlClient.MY_SQL) {
const jsonFnc = any ? "JSON_OVERLAPS" : "JSON_CONTAINS"
iterate(mode, (key: string, value: Array<any>) => {
// @ts-ignore
query = query[rawFnc](
`${not}${jsonFnc}(${key}, '${stringifyArray(value)}')`
`${not}COALESCE(${jsonFnc}(${key}, '${stringifyArray(
value
)}'), FALSE)`
)
})
} else {
@ -277,7 +276,7 @@ class InternalBuilder {
}
statement +=
(statement ? andOr : "") +
`LOWER(${likeKey(this.client, key)}) LIKE ?`
`COALESCE(LOWER(${likeKey(this.client, key)}), '') LIKE ?`
}
if (statement === "") {
@ -342,14 +341,34 @@ class InternalBuilder {
}
if (filters.equal) {
iterate(filters.equal, (key, value) => {
const fnc = allOr ? "orWhere" : "where"
query = query[fnc]({ [key]: value })
const fnc = allOr ? "orWhereRaw" : "whereRaw"
if (this.client === SqlClient.MS_SQL) {
query = query[fnc](
`CASE WHEN ${likeKey(this.client, key)} = ? THEN 1 ELSE 0 END = 1`,
[value]
)
} else {
query = query[fnc](
`COALESCE(${likeKey(this.client, key)} = ?, FALSE)`,
[value]
)
}
})
}
if (filters.notEqual) {
iterate(filters.notEqual, (key, value) => {
const fnc = allOr ? "orWhereNot" : "whereNot"
query = query[fnc]({ [key]: value })
const fnc = allOr ? "orWhereRaw" : "whereRaw"
if (this.client === SqlClient.MS_SQL) {
query = query[fnc](
`CASE WHEN ${likeKey(this.client, key)} = ? THEN 1 ELSE 0 END = 0`,
[value]
)
} else {
query = query[fnc](
`COALESCE(${likeKey(this.client, key)} != ?, TRUE)`,
[value]
)
}
})
}
if (filters.empty) {

2
packages/bbui/src/Form/Core/Picker.svelte
View file

@ -157,7 +157,7 @@
useAnchorWidth={!autoWidth}
maxWidth={autoWidth ? 400 : null}
customHeight={customPopoverHeight}
maxHeight={240}
maxHeight={360}
>
<div
class="popover-content"

252
packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte
View file

@ -1,252 +0,0 @@
<script>
import { flip } from "svelte/animate"
import { dndzone } from "svelte-dnd-action"
import Icon from "../Icon/Icon.svelte"
import Popover from "../Popover/Popover.svelte"
import { onMount } from "svelte"
const flipDurationMs = 150
export let constraints
export let optionColors = {}
let options = []
let colorPopovers = []
let anchors = []
let colorsArray = [
"hsla(0, 90%, 75%, 0.3)",
"hsla(50, 80%, 75%, 0.3)",
"hsla(120, 90%, 75%, 0.3)",
"hsla(200, 90%, 75%, 0.3)",
"hsla(240, 90%, 75%, 0.3)",
"hsla(320, 90%, 75%, 0.3)",
]
const removeInput = idx => {
delete optionColors[options[idx].name]
constraints.inclusion = constraints.inclusion.filter((e, i) => i !== idx)
options = options.filter((e, i) => i !== idx)
colorPopovers.pop(undefined)
anchors.pop(undefined)
}
const addNewInput = () => {
options = [
...options,
{ name: `Option ${constraints.inclusion.length + 1}`, id: Math.random() },
]
constraints.inclusion = [
...constraints.inclusion,
`Option ${constraints.inclusion.length + 1}`,
]
colorPopovers.push(undefined)
anchors.push(undefined)
}
const handleDndConsider = e => {
options = e.detail.items
}
const handleDndFinalize = e => {
options = e.detail.items
constraints.inclusion = options.map(option => option.name)
}
const handleColorChange = (optionName, color, idx) => {
optionColors[optionName] = color
colorPopovers[idx].hide()
}
const handleNameChange = (optionName, idx, value) => {
constraints.inclusion[idx] = value
options[idx].name = value
optionColors[value] = optionColors[optionName]
delete optionColors[optionName]
}
const openColorPickerPopover = (optionIdx, target) => {
colorPopovers[optionIdx].show()
anchors[optionIdx] = target
}
onMount(() => {
// Initialize anchor arrays on mount, assuming 'options' is already populated
colorPopovers = constraints.inclusion.map(() => undefined)
anchors = constraints.inclusion.map(() => undefined)
options = constraints.inclusion.map(value => ({
name: value,
id: Math.random(),
}))
})
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div>
<div
class="actions"
use:dndzone={{
items: options,
flipDurationMs,
dropTargetStyle: { outline: "none" },
}}
on:consider={handleDndConsider}
on:finalize={handleDndFinalize}
>
{#each options as option, idx (option.id)}
<div
class="no-border action-container"
animate:flip={{ duration: flipDurationMs }}
>
<div class="child drag-handle-spacing">
<Icon name="DragHandle" size="L" />
</div>
<div class="child color-picker">
<div
id="color-picker"
bind:this={anchors[idx]}
style="--color:{optionColors?.[option.name] ||
'hsla(0, 1%, 50%, 0.3)'}"
class="circle"
on:click={e => openColorPickerPopover(idx, e.target)}
>
<Popover
bind:this={colorPopovers[idx]}
anchor={anchors[idx]}
align="left"
offset={0}
style=""
popoverTarget={document.getElementById(`color-picker`)}
animate={false}
>
<div class="colors">
{#each colorsArray as color}
<div
on:click={() => handleColorChange(option.name, color, idx)}
style="--color:{color};"
class="circle circle-hover"
/>
{/each}
</div>
</Popover>
</div>
</div>
<div class="child">
<input
class="input-field"
type="text"
on:change={e => handleNameChange(option.name, idx, e.target.value)}
value={option.name}
placeholder="Option name"
/>
</div>
<div class="child">
<Icon name="Close" hoverable size="S" on:click={removeInput(idx)} />
</div>
</div>
{/each}
</div>
<div on:click={addNewInput} class="add-option">
<Icon hoverable name="Add" />
<div>Add option</div>
</div>
</div>
<style>
.action-container {
background-color: var(--spectrum-alias-background-color-primary);
border-radius: 0px;
border: 1px solid var(--spectrum-global-color-gray-300);
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
border-color 130ms ease-in-out;
display: flex;
flex-direction: row;
align-items: center;
}
.no-border {
border-bottom: none;
}
.action-container:last-child {
border-bottom: 1px solid var(--spectrum-global-color-gray-300) !important;
}
.child {
height: 30px;
}
.child:hover,
.child:focus {
background: var(--spectrum-global-color-gray-200);
}
.add-option {
display: flex;
flex-direction: row;
align-items: center;
padding: var(--spacing-m);
gap: var(--spacing-m);
cursor: pointer;
}
.input-field {
border: none;
outline: none;
background-color: transparent;
width: 100%;
color: var(--text);
}
.child input[type="text"] {
padding-left: 10px;
}
.input-field:hover,
.input-field:focus {
background: var(--spectrum-global-color-gray-200);
}
.action-container > :nth-child(1) {
flex-grow: 1;
justify-content: center;
display: flex;
}
.action-container > :nth-child(2) {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.action-container > :nth-child(3) {
flex-grow: 4;
display: flex;
}
.action-container > :nth-child(4) {
flex-grow: 1;
justify-content: center;
display: flex;
}
.circle {
height: 20px;
width: 20px;
background-color: var(--color);
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
}
.circle-hover:hover {
border: 1px solid var(--spectrum-global-color-blue-400);
cursor: pointer;
}
.colors {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--spacing-xl);
justify-items: center;
margin: var(--spacing-m);
}
</style>

1
packages/bbui/src/index.js
View file

@ -89,7 +89,6 @@ export { default as ListItem } from "./List/ListItem.svelte"
export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
export { default as Accordion } from "./Accordion/Accordion.svelte"
export { default as OptionSelectDnD } from "./OptionSelectDnD/OptionSelectDnD.svelte"
export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte"
export { TooltipPosition, TooltipType } from "./Tooltip/AbsTooltip.svelte"

2
packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
View file

@ -99,7 +99,7 @@
on:change={e => onChange(e, field)}
useLabel={false}
/>
{:else if schema.type === "bb_reference"}
{:else if schema.type === "bb_reference" || schema.type === "bb_reference_single"}
<LinkedRowSelector
linkedRows={value[field]}
{schema}

2
packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
View file

@ -92,7 +92,6 @@
/>
{:else if type === "attachment"}
<Dropzone
compact
{label}
{error}
{value}
@ -102,7 +101,6 @@
/>
{:else if type === "attachment_single"}
<Dropzone
compact
{label}
{error}
value={value ? [value] : []}

12
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View file

@ -9,7 +9,6 @@
DatePicker,
Modal,
notifications,
OptionSelectDnD,
Layout,
AbsTooltip,
ProgressCircle,
@ -42,6 +41,7 @@
import RelationshipSelector from "components/common/RelationshipSelector.svelte"
import { RowUtils } from "@budibase/frontend-core"
import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
import OptionsEditor from "./OptionsEditor.svelte"
const AUTO_TYPE = FieldType.AUTO
const FORMULA_TYPE = FieldType.FORMULA
@ -95,6 +95,7 @@
},
}
let autoColumnInfo = getAutoColumnInformation()
let optionsValid = true
$: rowGoldenSample = RowUtils.generateGoldenSample($rows)
$: if (primaryDisplay) {
@ -138,7 +139,8 @@
$: invalid =
!editableColumn?.name ||
(editableColumn?.type === LINK_TYPE && !editableColumn?.tableId) ||
Object.keys(errors).length !== 0
Object.keys(errors).length !== 0 ||
!optionsValid
$: errors = checkErrors(editableColumn)
$: datasource = $datasources.list.find(
source => source._id === table?.sourceId
@ -559,9 +561,10 @@
bind:value={editableColumn.constraints.length.maximum}
/>
{:else if editableColumn.type === FieldType.OPTIONS}
<OptionSelectDnD
<OptionsEditor
bind:constraints={editableColumn.constraints}
bind:optionColors={editableColumn.optionColors}
bind:valid={optionsValid}
/>
{:else if editableColumn.type === FieldType.LONGFORM}
<div>
@ -582,9 +585,10 @@
/>
</div>
{:else if editableColumn.type === FieldType.ARRAY}
<OptionSelectDnD
<OptionsEditor
bind:constraints={editableColumn.constraints}
bind:optionColors={editableColumn.optionColors}
bind:valid={optionsValid}
/>
{:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
<div class="split-label">

252
packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte Normal file
View file

@ -0,0 +1,252 @@
<script>
import { flip } from "svelte/animate"
import { dndzone } from "svelte-dnd-action"
import { Icon, Popover } from "@budibase/bbui"
import { tick } from "svelte"
import { Constants } from "@budibase/frontend-core"
import { getSequentialName } from "helpers/duplicate"
import { derived, writable } from "svelte/store"
export let constraints
export let optionColors = {}
export let valid = true
const flipDurationMs = 130
const { OptionColours } = Constants
const getDefaultColor = idx => OptionColours[idx % OptionColours.length]
const options = writable(
constraints.inclusion.map((value, idx) => ({
id: Math.random(),
name: value,
color: optionColors?.[value] || getDefaultColor(idx),
invalid: false,
}))
)
const enrichedOptions = derived(options, $options => {
let enriched = []
$options.forEach(option => {
enriched.push({
...option,
valid: option.name && !enriched.some(opt => opt.name === option.name),
})
})
return enriched
})
let openOption = null
let anchor = null
$: options.subscribe(updateConstraints)
$: valid = $enrichedOptions.every(option => option.valid)
const updateConstraints = options => {
constraints.inclusion = options.map(option => option.name)
optionColors = options.reduce(
(colors, option) => ({ ...colors, [option.name]: option.color }),
{}
)
}
const addNewInput = async () => {
const newId = Math.random()
const newName = getSequentialName($options, "Option ", {
numberFirstItem: true,
getName: option => option.name,
})
options.update(state => {
return [
...state,
{
name: newName,
id: newId,
color: getDefaultColor(state.length),
},
]
})
// Focus new option
await tick()
document.getElementById(`option-${newId}`)?.focus()
}
const removeInput = id => {
options.update(state => state.filter(option => option.id !== id))
}
const openColorPicker = id => {
anchor = document.getElementById(`color-${id}`)
openOption = id
}
const handleColorChange = (id, color) => {
options.update(state => {
state.find(option => option.id === id).color = color
return state.slice()
})
openOption = null
}
const handleNameChange = (id, name) => {
options.update(state => {
state.find(option => option.id === id).name = name
return state.slice()
})
}
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="wrapper">
<div
class="options"
use:dndzone={{
items: $options,
flipDurationMs,
dropTargetStyle: { outline: "none" },
}}
on:consider={e => options.set(e.detail.items)}
on:finalize={e => options.set(e.detail.items)}
>
{#each $enrichedOptions as option (option.id)}
<div
class="option"
animate:flip={{ duration: flipDurationMs }}
class:invalid={!option.valid}
>
<div class="drag-handle">
<Icon name="DragHandle" size="L" />
</div>
<div
id="color-{option.id}"
class="color-picker"
on:click={() => openColorPicker(option.id)}
>
<div class="circle" style="--color:{option.color}">
<Popover
open={openOption === option.id}
{anchor}
align="left"
offset={0}
animate={false}
resizable={false}
>
<div class="colors" data-ignore-click-outside="true">
{#each OptionColours as colorOption}
<div
on:click={() => handleColorChange(option.id, colorOption)}
style="--color:{colorOption};"
class="circle"
class:selected={colorOption === option.color}
/>
{/each}
</div>
</Popover>
</div>
</div>
<input
class="option-name"
type="text"
value={option.name}
placeholder="Option name"
id="option-{option.id}"
on:input={e => handleNameChange(option.id, e.target.value)}
/>
<Icon
name="Close"
hoverable
size="S"
on:click={() => removeInput(option.id)}
/>
</div>
{/each}
</div>
<div on:click={addNewInput} class="add-option">
<Icon name="Add" />
<div>Add option</div>
</div>
</div>
<style>
/* Container */
.wrapper {
overflow: hidden;
border-radius: 4px;
border: 1px solid var(--spectrum-global-color-gray-300);
background-color: var(--spectrum-global-color-gray-50);
}
.options > *,
.add-option {
height: 32px;
}
/* Options row */
.option {
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
border-color 130ms ease-in-out;
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid transparent;
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
gap: var(--spacing-m);
padding: 0 var(--spacing-m) 0 var(--spacing-s);
outline: none !important;
}
.option.invalid {
border: 1px solid var(--spectrum-global-color-red-400);
}
.option:not(.invalid):hover,
.option:not(.invalid):focus {
background: var(--spectrum-global-color-gray-100);
}
/* Option row components */
.color-picker {
align-self: stretch;
display: grid;
place-items: center;
}
.circle {
height: 20px;
width: 20px;
background-color: var(--color);
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
border: 1px solid transparent;
transition: border 130ms ease-out;
}
.circle:hover,
.circle.selected {
border: 1px solid var(--spectrum-global-color-blue-600);
cursor: pointer;
}
.colors {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--spacing-xl);
justify-items: center;
margin: var(--spacing-m);
}
.option-name {
border: none;
outline: none;
background-color: transparent;
width: 100%;
color: var(--text);
}
/* Add option */
.add-option {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: var(--spacing-m);
gap: var(--spacing-m);
}
.add-option:hover {
cursor: pointer !important;
background: var(--spectrum-global-color-gray-200);
}
</style>

2
packages/builder/src/components/common/LinkedRowSelector.svelte
View file

@ -43,7 +43,7 @@
<b>{linkedTable.name}</b>
table.
</Label>
{:else if schema.relationshipType === "one-to-many"}
{:else if schema.relationshipType === "one-to-many" || schema.type === "bb_reference_single"}
<Select
value={linkedIds?.[0]}
options={rows}

13
packages/builder/src/components/common/NavItem.svelte
View file

@ -1,5 +1,5 @@
<script>
import { AbsTooltip, Icon } from "@budibase/bbui"
import { Icon, TooltipType, TooltipPosition } from "@budibase/bbui"
import { createEventDispatcher, getContext } from "svelte"
import { helpers } from "@budibase/shared-core"
import { UserAvatars } from "@budibase/frontend-core"
@ -114,9 +114,14 @@
</div>
{:else if icon}
<div class="icon" class:right={rightAlignIcon}>
<AbsTooltip type="info" position="right" text={iconTooltip}>
<Icon color={iconColor} size="S" name={icon} />
</AbsTooltip>
<Icon
color={iconColor}
size="S"
name={icon}
tooltip={iconTooltip}
tooltipType={TooltipType.Info}
tooltipPosition={TooltipPosition.Right}
/>
</div>
{/if}
<div class="text" title={showTooltip ? text : null}>

11
packages/builder/src/helpers/duplicate.js
View file

@ -70,13 +70,18 @@ export const duplicateName = (name, allNames) => {
* @param getName optional function to extract the name for an item, if not a
* flat array of strings
*/
export const getSequentialName = (items, prefix, getName = x => x) => {
export const getSequentialName = (
items,
prefix,
{ getName = x => x, numberFirstItem = false } = {}
) => {
if (!prefix?.length || !getName) {
return null
}
const trimmedPrefix = prefix.trim()
const firstName = numberFirstItem ? `${prefix}1` : trimmedPrefix
if (!items?.length) {
return trimmedPrefix
return firstName
}
let max = 0
items.forEach(item => {
@ -96,5 +101,5 @@ export const getSequentialName = (items, prefix, getName = x => x) => {
max = num
}
})
return max === 0 ? trimmedPrefix : `${prefix}${max + 1}`
return max === 0 ? firstName : `${prefix}${max + 1}`
}

48
packages/builder/src/helpers/tests/duplicate.test.js
View file

@ -43,61 +43,71 @@ describe("duplicate", () => {
describe("getSequentialName", () => {
it("handles nullish items", async () => {
const name = getSequentialName(null, "foo", () => {})
const name = getSequentialName(null, "foo")
expect(name).toBe("foo")
})
it("handles nullish prefix", async () => {
const name = getSequentialName([], null, () => {})
expect(name).toBe(null)
})
it("handles nullish getName function", async () => {
const name = getSequentialName([], "foo", null)
const name = getSequentialName([], null)
expect(name).toBe(null)
})
it("handles just the prefix", async () => {
const name = getSequentialName(["foo"], "foo", x => x)
const name = getSequentialName(["foo"], "foo")
expect(name).toBe("foo2")
})
it("handles continuous ranges", async () => {
const name = getSequentialName(["foo", "foo2", "foo3"], "foo", x => x)
const name = getSequentialName(["foo", "foo2", "foo3"], "foo")
expect(name).toBe("foo4")
})
it("handles discontinuous ranges", async () => {
const name = getSequentialName(["foo", "foo3"], "foo", x => x)
const name = getSequentialName(["foo", "foo3"], "foo")
expect(name).toBe("foo4")
})
it("handles a space inside the prefix", async () => {
const name = getSequentialName(["foo", "foo 2", "foo 3"], "foo ", x => x)
const name = getSequentialName(["foo", "foo 2", "foo 3"], "foo ")
expect(name).toBe("foo 4")
})
it("handles a space inside the prefix with just the prefix", async () => {
const name = getSequentialName(["foo"], "foo ", x => x)
const name = getSequentialName(["foo"], "foo ")
expect(name).toBe("foo 2")
})
it("handles no matches", async () => {
const name = getSequentialName(["aaa", "bbb"], "foo", x => x)
const name = getSequentialName(["aaa", "bbb"], "foo")
expect(name).toBe("foo")
})
it("handles similar names", async () => {
const name = getSequentialName(
["fooo1", "2foo", "a3foo4", "5foo5"],
"foo",
x => x
)
const name = getSequentialName(["fooo1", "2foo", "a3foo4", "5foo5"], "foo")
expect(name).toBe("foo")
})
it("handles non-string names", async () => {
const name = getSequentialName([null, 4123, [], {}], "foo", x => x)
const name = getSequentialName([null, 4123, [], {}], "foo")
expect(name).toBe("foo")
})
it("handles deep getters", async () => {
const name = getSequentialName([{ a: "foo 1" }], "foo ", {
getName: x => x.a,
})
expect(name).toBe("foo 2")
})
it("handles a mixture of spaces and not", async () => {
const name = getSequentialName(["foo", "foo 1", "foo 2"], "foo")
expect(name).toBe("foo3")
})
it("handles numbering the first item", async () => {
const name = getSequentialName(["foo1", "foo2", "foo"], "foo ", {
numberFirstItem: true,
})
expect(name).toBe("foo 3")
})
})

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte
View file

@ -48,7 +48,9 @@
...navItems,
{
id: generate(),
text: getSequentialName(navItems, "Nav Item ", x => x.text),
text: getSequentialName(navItems, "Nav Item ", {
getName: x => x.text,
}),
url: "",
roleId: Constants.Roles.BASIC,
type: "link",

24
packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
View file

@ -29,6 +29,7 @@
focusedCellId,
filter,
inlineFilters,
keyboardBlocked,
} = getContext("grid")
const searchableTypes = [
@ -57,6 +58,8 @@
$: searching = searchValue != null
$: debouncedUpdateFilter(searchValue)
$: orderable = !column.primaryDisplay
$: editable = $config.canEditColumns && !column.schema.disabled
$: keyboardBlocked.set(open)
const close = () => {
open = false
@ -231,6 +234,14 @@
}
const debouncedUpdateFilter = debounce(updateFilter, 250)
const handleDoubleClick = () => {
if (!editable || searching) {
return
}
open = true
editColumn()
}
onMount(() => subscribe("close-edit-column", close))
</script>
@ -241,14 +252,15 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
bind:this={anchor}
class="header-cell"
style="flex: 0 0 {column.width}px;"
class:open
class:searchable
class:searching
style="flex: 0 0 {column.width}px;"
bind:this={anchor}
class:disabled={$isReordering || $isResizing}
class:sticky={idx === "sticky"}
on:dblclick={handleDoubleClick}
>
<GridCell
on:mousedown={onMouseDown}
@ -311,7 +323,7 @@
{#if open}
<GridPopover
{anchor}
align="right"
align="left"
on:close={close}
maxHeight={null}
resizable
@ -322,11 +334,7 @@
</div>
{:else}
<Menu>
<MenuItem
icon="Edit"
on:click={editColumn}
disabled={!$config.canEditColumns || column.schema.disabled}
>
<MenuItem icon="Edit" on:click={editColumn} disabled={!editable}>
Edit column
</MenuItem>
<MenuItem

11
packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
View file

@ -1,8 +1,8 @@
<script>
import { Icon } from "@budibase/bbui"
import { getColor } from "../lib/utils"
import { onMount } from "svelte"
import GridPopover from "../overlays/GridPopover.svelte"
import { OptionColours } from "../../../constants"
export let value
export let schema
@ -13,6 +13,8 @@
export let api
export let contentLines = 1
const InvalidColor = "hsla(0, 0%, 70%, 0.3)"
let isOpen = false
let focusedOptionIdx = null
let anchor
@ -38,8 +40,11 @@
}
const getOptionColor = value => {
const index = value ? options.indexOf(value) : null
return getColor(index)
let idx = value ? options.indexOf(value) : null
if (idx == null || idx === -1) {
return InvalidColor
}
return OptionColours[idx % OptionColours.length]
}
const toggleOption = option => {

4
packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
View file

@ -1,9 +1,9 @@
<script>
import { getColor } from "../lib/utils"
import { onMount, getContext } from "svelte"
import { Icon, Input, ProgressCircle } from "@budibase/bbui"
import { debounce } from "../../../utils/utils"
import GridPopover from "../overlays/GridPopover.svelte"
import { OptionColours } from "../../../constants"
const { API, cache } = getContext("grid")
@ -18,7 +18,7 @@
export let primaryDisplay
export let hideCounter = false
const color = getColor(0)
const color = OptionColours[0]
let isOpen = false
let searchResults

4
packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
View file

@ -3,7 +3,8 @@
import { Icon } from "@budibase/bbui"
import GridPopover from "../overlays/GridPopover.svelte"
const { visibleColumns, scroll, width, subscribe, ui } = getContext("grid")
const { visibleColumns, scroll, width, subscribe, ui, keyboardBlocked } =
getContext("grid")
let anchor
let isOpen = false
@ -14,6 +15,7 @@
)
$: end = columnsWidth - 1 - $scroll.left
$: left = Math.min($width - 40, end)
$: keyboardBlocked.set(isOpen)
const open = () => {
ui.actions.blur()

2
packages/frontend-core/src/components/grid/layout/NewRow.svelte
View file

@ -209,7 +209,7 @@
<GridScrollWrapper scrollHorizontally attachHandlers>
<div class="row">
{#each $visibleColumns as column}
{@const cellId = `new-${column.name}`}
{@const cellId = getCellID(NewRowID, column.name)}
<DataCell
{cellId}
{column}

2
packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
View file

@ -66,7 +66,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
<div class="content">
<GridScrollWrapper scrollVertically attachHandlers>
{#each $renderedRows as row, idx}
{@const rowSelected = !!$selectedRows[row._id]}

7
packages/frontend-core/src/components/grid/lib/utils.js
View file

@ -18,13 +18,6 @@ export const getCellID = (rowId, fieldName) => {
return `${rowId}${JOINING_CHARACTER}${fieldName}`
}
export const getColor = (idx, opacity = 0.3) => {
if (idx == null || idx === -1) {
idx = 0
}
return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, ${opacity})`
}
export const getColumnIcon = column => {
if (column.schema.autocolumn) {
return "MagicWand"

3
packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
View file

@ -17,6 +17,7 @@
config,
menu,
gridFocused,
keyboardBlocked,
} = getContext("grid")
const ignoredOriginSelectors = [
@ -29,7 +30,7 @@
// Global key listener which intercepts all key events
const handleKeyDown = e => {
// Ignore completely if the grid is not focused
if (!$gridFocused) {
if (!$gridFocused || $keyboardBlocked) {
return
}

2
packages/frontend-core/src/components/grid/stores/ui.js
View file

@ -19,6 +19,7 @@ export const createStores = context => {
const previousFocusedRowId = writable(null)
const previousFocusedCellId = writable(null)
const gridFocused = writable(false)
const keyboardBlocked = writable(false)
const isDragging = writable(false)
const buttonColumnWidth = writable(0)
@ -54,6 +55,7 @@ export const createStores = context => {
hoveredRowId,
rowHeight,
gridFocused,
keyboardBlocked,
isDragging,
buttonColumnWidth,
selectedRows: {

4
packages/frontend-core/src/constants.js
View file

@ -141,3 +141,7 @@ export const TypeIconMap = {
[BBReferenceFieldSubType.USER]: "User",
},
}
export const OptionColours = [...new Array(12).keys()].map(idx => {
return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
})

2
packages/server/src/api/controllers/view/exporters.ts
View file

@ -57,5 +57,5 @@ export function isFormat(format: any): format is Format {
}
export function parseCsvExport<T>(value: string) {
return JSON.parse(value?.replace(/'/g, '"')) as T
return JSON.parse(value) as T
}

223
packages/server/src/api/routes/tests/search.spec.ts
View file

@ -1,6 +1,6 @@
import { tableForDatasource } from "../../../tests/utilities/structures"
import { DatabaseName, getDatasource } from "../../../integrations/tests/utils"
import { db as dbCore } from "@budibase/backend-core"
import { db as dbCore, utils } from "@budibase/backend-core"
import * as setup from "./utilities"
import {
@ -87,21 +87,67 @@ describe.each([
class SearchAssertion {
constructor(private readonly query: RowSearchParams) {}
private popRow(expectedRow: any, foundRows: any[]) {
const row = foundRows.find(foundRow => _.isMatch(foundRow, expectedRow))
// We originally used _.isMatch to compare rows, but found that when
// comparing arrays it would return true if the source array was a subset of
// the target array. This would sometimes create false matches. This
// function is a more strict version of _.isMatch that only returns true if
// the source array is an exact match of the target.
//
// _.isMatch("100", "1") also returns true which is not what we want.
private isMatch<T extends Record<string, any>>(expected: T, found: T) {
if (!expected) {
throw new Error("Expected is undefined")
}
if (!found) {
return false
}
for (const key of Object.keys(expected)) {
if (Array.isArray(expected[key])) {
if (!Array.isArray(found[key])) {
return false
}
if (expected[key].length !== found[key].length) {
return false
}
if (!_.isMatch(found[key], expected[key])) {
return false
}
} else if (typeof expected[key] === "object") {
if (!this.isMatch(expected[key], found[key])) {
return false
}
} else {
if (expected[key] !== found[key]) {
return false
}
}
}
return true
}
// This function exists to ensure that the same row is not matched twice.
// When a row gets matched, we make sure to remove it from the list of rows
// we're matching against.
private popRow<T extends { [key: string]: any }>(
expectedRow: T,
foundRows: T[]
): NonNullable<T> {
const row = foundRows.find(row => this.isMatch(expectedRow, row))
if (!row) {
const fields = Object.keys(expectedRow)
// To make the error message more readable, we only include the fields
// that are present in the expected row.
const searchedObjects = foundRows.map(row => _.pick(row, fields))
throw new Error(
`Failed to find row: ${JSON.stringify(
expectedRow
)} in ${JSON.stringify(searchedObjects)}`
`Failed to find row:\n\n${JSON.stringify(
expectedRow,
null,
2
)}\n\nin\n\n${JSON.stringify(searchedObjects, null, 2)}`
)
}
// Ensuring the same row is not matched twice
foundRows.splice(foundRows.indexOf(row), 1)
return row
}
@ -1055,6 +1101,7 @@ describe.each([
describe("notEqual", () => {
it("successfully finds a row", () =>
expectQuery({ notEqual: { time: T_1000 } }).toContainExactly([
{ timeid: NULL_TIME__ID },
{ time: "10:45:00" },
{ time: "12:00:00" },
{ time: "15:30:00" },
@ -1064,6 +1111,7 @@ describe.each([
it("return all when requesting non-existing", () =>
expectQuery({ notEqual: { time: UNEXISTING_TIME } }).toContainExactly(
[
{ timeid: NULL_TIME__ID },
{ time: "10:00:00" },
{ time: "10:45:00" },
{ time: "12:00:00" },
@ -1530,14 +1578,169 @@ describe.each([
await createRows([{ "1:name": "bar" }, { "1:name": "foo" }])
})
it("successfully finds a row", () =>
expectQuery({ equal: { "1:1:name": "bar" } }).toContainExactly([
{ "1:name": "bar" },
]))
it("fails to find nonexistent row", () =>
expectQuery({ equal: { "1:1:name": "none" } }).toFindNothing())
})
describe("user", () => {
let user1: User
let user2: User
beforeAll(async () => {
user1 = await config.createUser({ _id: `us_${utils.newid()}` })
user2 = await config.createUser({ _id: `us_${utils.newid()}` })
table = await createTable({
user: {
name: "user",
type: FieldType.BB_REFERENCE_SINGLE,
subtype: BBReferenceFieldSubType.USER,
},
})
await createRows([
{ user: JSON.stringify(user1) },
{ user: JSON.stringify(user2) },
{ user: null },
])
})
describe("equal", () => {
it("successfully finds a row", () =>
expectQuery({ equal: { "1:1:name": "bar" } }).toContainExactly([
{ "1:name": "bar" },
expectQuery({ equal: { user: user1._id } }).toContainExactly([
{ user: { _id: user1._id } },
]))
it("fails to find nonexistent row", () =>
expectQuery({ equal: { "1:1:name": "none" } }).toFindNothing())
expectQuery({ equal: { user: "us_none" } }).toFindNothing())
})
describe("notEqual", () => {
it("successfully finds a row", () =>
expectQuery({ notEqual: { user: user1._id } }).toContainExactly([
{ user: { _id: user2._id } },
{},
]))
it("fails to find nonexistent row", () =>
expectQuery({ notEqual: { user: "us_none" } }).toContainExactly([
{ user: { _id: user1._id } },
{ user: { _id: user2._id } },
{},
]))
})
describe("oneOf", () => {
it("successfully finds a row", () =>
expectQuery({ oneOf: { user: [user1._id] } }).toContainExactly([
{ user: { _id: user1._id } },
]))
it("fails to find nonexistent row", () =>
expectQuery({ oneOf: { user: ["us_none"] } }).toFindNothing())
})
describe("empty", () => {
it("finds empty rows", () =>
expectQuery({ empty: { user: null } }).toContainExactly([{}]))
})
describe("notEmpty", () => {
it("finds non-empty rows", () =>
expectQuery({ notEmpty: { user: null } }).toContainExactly([
{ user: { _id: user1._id } },
{ user: { _id: user2._id } },
]))
})
})
describe("multi user", () => {
let user1: User
let user2: User
beforeAll(async () => {
user1 = await config.createUser({ _id: `us_${utils.newid()}` })
user2 = await config.createUser({ _id: `us_${utils.newid()}` })
table = await createTable({
users: {
name: "users",
type: FieldType.BB_REFERENCE,
subtype: BBReferenceFieldSubType.USER,
constraints: { type: "array" },
},
number: {
name: "number",
type: FieldType.NUMBER,
},
})
await createRows([
{ number: 1, users: JSON.stringify([user1]) },
{ number: 2, users: JSON.stringify([user2]) },
{ number: 3, users: JSON.stringify([user1, user2]) },
{ number: 4, users: JSON.stringify([]) },
])
})
describe("contains", () => {
it("successfully finds a row", () =>
expectQuery({ contains: { users: [user1._id] } }).toContainExactly([
{ users: [{ _id: user1._id }] },
{ users: [{ _id: user1._id }, { _id: user2._id }] },
]))
it("fails to find nonexistent row", () =>
expectQuery({ contains: { users: ["us_none"] } }).toFindNothing())
})
describe("notContains", () => {
it("successfully finds a row", () =>
expectQuery({ notContains: { users: [user1._id] } }).toContainExactly([
{ users: [{ _id: user2._id }] },
{},
]))
it("fails to find nonexistent row", () =>
expectQuery({ notContains: { users: ["us_none"] } }).toContainExactly([
{ users: [{ _id: user1._id }] },
{ users: [{ _id: user2._id }] },
{ users: [{ _id: user1._id }, { _id: user2._id }] },
{},
]))
})
describe("containsAny", () => {
it("successfully finds rows", () =>
expectQuery({
containsAny: { users: [user1._id, user2._id] },
}).toContainExactly([
{ users: [{ _id: user1._id }] },
{ users: [{ _id: user2._id }] },
{ users: [{ _id: user1._id }, { _id: user2._id }] },
]))
it("fails to find nonexistent row", () =>
expectQuery({ containsAny: { users: ["us_none"] } }).toFindNothing())
})
describe("multi-column equals", () => {
it("successfully finds a row", () =>
expectQuery({
equal: { number: 1 },
contains: { users: [user1._id] },
}).toContainExactly([{ users: [{ _id: user1._id }], number: 1 }]))
it("fails to find nonexistent row", () =>
expectQuery({
equal: { number: 2 },
contains: { users: [user1._id] },
}).toFindNothing())
})
})

2
packages/server/src/integrations/tests/sql.spec.ts
View file

@ -191,7 +191,7 @@ describe("SQL query builder", () => {
)
expect(query).toEqual({
bindings: ["%20%", "%25%", `%"john"%`, `%"mary"%`, limit],
sql: `select * from (select * from (select * from "test" where (LOWER("test"."age") LIKE :1 AND LOWER("test"."age") LIKE :2) and (LOWER("test"."name") LIKE :3 AND LOWER("test"."name") LIKE :4)) where rownum <= :5) "test"`,
sql: `select * from (select * from (select * from "test" where (COALESCE(LOWER("test"."age"), '') LIKE :1 AND COALESCE(LOWER("test"."age"), '') LIKE :2) and (COALESCE(LOWER("test"."name"), '') LIKE :3 AND COALESCE(LOWER("test"."name"), '') LIKE :4)) where rownum <= :5) "test"`,
})
query = new Sql(SqlClient.ORACLE, limit)._query(

17
packages/server/src/integrations/tests/sqlAlias.spec.ts
View file

@ -79,7 +79,7 @@ describe("Captures of real examples", () => {
"b"."completed" as "b.completed", "b"."qaid" as "b.qaid"
from (select * from "products" as "a" order by "a"."productname" asc nulls first limit $1) as "a"
left join "products_tasks" as "c" on "a"."productid" = "c"."productid"
left join "tasks" as "b" on "b"."taskid" = "c"."taskid" where "b"."taskname" = $2
left join "tasks" as "b" on "b"."taskid" = "c"."taskid" where COALESCE("b"."taskname" = $2, FALSE)
order by "a"."productname" asc nulls first limit $3`),
})
})
@ -139,12 +139,12 @@ describe("Captures of real examples", () => {
"c"."city" as "c.city", "c"."lastname" as "c.lastname", "c"."year" as "c.year", "c"."firstname" as "c.firstname",
"c"."personid" as "c.personid", "c"."address" as "c.address", "c"."age" as "c.age", "c"."type" as "c.type",
"c"."city" as "c.city", "c"."lastname" as "c.lastname"
from (select * from "tasks" as "a" where not "a"."completed" = $1
from (select * from "tasks" as "a" where COALESCE("a"."completed" != $1, TRUE)
order by "a"."taskname" asc nulls first limit $2) as "a"
left join "products_tasks" as "d" on "a"."taskid" = "d"."taskid"
left join "products" as "b" on "b"."productid" = "d"."productid"
left join "persons" as "c" on "a"."executorid" = "c"."personid" or "a"."qaid" = "c"."personid"
where "c"."year" between $3 and $4 and "b"."productname" = $5 order by "a"."taskname" asc nulls first limit $6`),
where "c"."year" between $3 and $4 and COALESCE("b"."productname" = $5, FALSE) order by "a"."taskname" asc nulls first limit $6`),
})
})
})
@ -156,7 +156,7 @@ describe("Captures of real examples", () => {
expect(query).toEqual({
bindings: [1990, "C", "A Street", 34, "designer", "London", "B", 5],
sql: multiline(`update "persons" as "a" set "year" = $1, "firstname" = $2, "address" = $3, "age" = $4,
"type" = $5, "city" = $6, "lastname" = $7 where "a"."personid" = $8 returning *`),
"type" = $5, "city" = $6, "lastname" = $7 where COALESCE("a"."personid" = $8, FALSE) returning *`),
})
})
@ -166,7 +166,7 @@ describe("Captures of real examples", () => {
expect(query).toEqual({
bindings: [1990, "C", "A Street", 34, "designer", "London", "B", 5],
sql: multiline(`update "persons" as "a" set "year" = $1, "firstname" = $2, "address" = $3, "age" = $4,
"type" = $5, "city" = $6, "lastname" = $7 where "a"."personid" = $8 returning *`),
"type" = $5, "city" = $6, "lastname" = $7 where COALESCE("a"."personid" = $8, FALSE) returning *`),
})
})
})
@ -177,8 +177,9 @@ describe("Captures of real examples", () => {
let query = new Sql(SqlClient.POSTGRES, limit)._query(queryJson)
expect(query).toEqual({
bindings: ["ddd", ""],
sql: multiline(`delete from "compositetable" as "a" where "a"."keypartone" = $1 and "a"."keyparttwo" = $2
returning "a"."keyparttwo" as "a.keyparttwo", "a"."keypartone" as "a.keypartone", "a"."name" as "a.name"`),
sql: multiline(`delete from "compositetable" as "a"
where COALESCE("a"."keypartone" = $1, FALSE) and COALESCE("a"."keyparttwo" = $2, FALSE)
returning "a"."keyparttwo" as "a.keyparttwo", "a"."keypartone" as "a.keypartone", "a"."name" as "a.name"`),
})
})
})
@ -199,7 +200,7 @@ describe("Captures of real examples", () => {
returningQuery = input
}, queryJson)
expect(returningQuery).toEqual({
sql: "select * from (select top (@p0) * from [people] where [people].[name] = @p1 and [people].[age] = @p2 order by [people].[name] asc) as [people]",
sql: "select * from (select top (@p0) * from [people] where CASE WHEN [people].[name] = @p1 THEN 1 ELSE 0 END = 1 and CASE WHEN [people].[age] = @p2 THEN 1 ELSE 0 END = 1 order by [people].[name] asc) as [people]",
bindings: [1, "Test", 22],
})
})

5
packages/server/src/sdk/app/rows/search/sqs.ts
View file

@ -117,6 +117,11 @@ async function runSqlQuery(json: QueryJson, tables: Table[]) {
// quick hack for docIds
sql = sql.replace(/`doc1`.`rowId`/g, "`doc1.rowId`")
sql = sql.replace(/`doc2`.`rowId`/g, "`doc2.rowId`")
if (Array.isArray(query)) {
throw new Error("SQS cannot currently handle multiple queries")
}
const db = context.getAppDB()
return await db.sql<Row>(sql, bindings)
})