diff --git a/lerna.json b/lerna.json index c7cc049819..0151229200 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.1.43-alpha.10", + "version": "2.1.43-alpha.12", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json index 17bf9c47f3..7225e27f66 100644 --- a/packages/backend-core/package.json +++ b/packages/backend-core/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/backend-core", - "version": "2.1.43-alpha.10", + "version": "2.1.43-alpha.12", "description": "Budibase backend core libraries used in server and worker", "main": "dist/src/index.js", "types": "dist/src/index.d.ts", @@ -20,7 +20,7 @@ "test:watch": "jest --watchAll" }, "dependencies": { - "@budibase/types": "2.1.43-alpha.10", + "@budibase/types": "2.1.43-alpha.12", "@shopify/jest-koa-mocks": "5.0.1", "@techpass/passport-openidconnect": "0.3.2", "aws-sdk": "2.1030.0", diff --git a/packages/bbui/package.json b/packages/bbui/package.json index dc7e23c70d..0dede0b475 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/bbui", "description": "A UI solution used in the different Budibase projects.", - "version": "2.1.43-alpha.10", + "version": "2.1.43-alpha.12", "license": "MPL-2.0", "svelte": "src/index.js", "module": "dist/bbui.es.js", @@ -38,7 +38,7 @@ ], "dependencies": { "@adobe/spectrum-css-workflow-icons": "^1.2.1", - "@budibase/string-templates": "2.1.43-alpha.10", + "@budibase/string-templates": "2.1.43-alpha.12", "@spectrum-css/actionbutton": "^1.0.1", "@spectrum-css/actiongroup": "^1.0.1", "@spectrum-css/avatar": "^3.0.2", diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 16d13ef2cc..97bd1394b4 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -205,7 +205,10 @@ width: 100%; } .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) { + max-width: 400px; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .spectrum-Picker { width: 100%; diff --git a/packages/builder/package.json b/packages/builder/package.json index e33b8f9232..d181c078eb 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "2.1.43-alpha.10", + "version": "2.1.43-alpha.12", "license": "GPL-3.0", "private": true, "scripts": { @@ -71,10 +71,10 @@ } }, "dependencies": { - "@budibase/bbui": "2.1.43-alpha.10", - "@budibase/client": "2.1.43-alpha.10", - "@budibase/frontend-core": "2.1.43-alpha.10", - "@budibase/string-templates": "2.1.43-alpha.10", + "@budibase/bbui": "2.1.43-alpha.12", + "@budibase/client": "2.1.43-alpha.12", + "@budibase/frontend-core": "2.1.43-alpha.12", + "@budibase/string-templates": "2.1.43-alpha.12", "@sentry/browser": "5.19.1", "@spectrum-css/page": "^3.0.1", "@spectrum-css/vars": "^3.0.1", diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 536692eecc..d188073b95 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -481,6 +481,7 @@ const getSelectedRowsBindings = asset => { block._id + "-table" )}.${makePropSafe("selectedRows")}`, readableBinding: `${block._instanceName}.Selected rows`, + category: "Selected rows", })) ) } @@ -1004,7 +1005,10 @@ const bindingReplacement = ( * {{ literal [componentId] }} */ const extractLiteralHandlebarsID = value => { - return value?.match(/{{\s*literal\s*\[+([^\]]+)].*}}/)?.[1] + if (!value || typeof value !== "string") { + return null + } + return value.match(/{{\s*literal\s*\[+([^\]]+)].*}}/)?.[1] } /** diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index e831f6a343..b596a13450 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -1049,8 +1049,8 @@ export const getFrontendStore = () => { const updatedSetting = settings.find(setting => setting.key === name) if ( - updatedSetting.type === "dataSource" || - updatedSetting.type === "table" + updatedSetting?.type === "dataSource" || + updatedSetting?.type === "table" ) { const { schema } = getSchemaForDatasource(null, value) const columnNames = Object.keys(schema || {}) diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index 4fd2f40391..d09faa34c9 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -38,13 +38,15 @@ export let testData export let schemaProperties export let isTestModal = false + let webhookModal let drawer - let tempFilters = lookForFilters(schemaProperties) || [] let fillWidth = true let codeBindingOpen = false let inputData + $: filters = lookForFilters(schemaProperties) || [] + $: tempFilters = filters $: stepId = block.stepId $: bindings = getAvailableBindings( block || $automationStore.selectedBlock, @@ -222,16 +224,17 @@ {:else if value.customType === "filters"} Define filters - + (tempFilters = e.detail)} /> {:else if value.customType === "password"} diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 7cb368830e..d5a365311b 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -25,6 +25,7 @@ import { API } from "api" let hideAutocolumns = true + let filters $: isUsersTable = $tables.selected?._id === TableNames.USERS $: type = $tables.selected?.type @@ -36,6 +37,7 @@ $: hasCols = checkHasCols(schema) $: hasRows = !!$fetch.rows?.length $: showError($fetch.error) + $: id, (filters = null) const showError = error => { if (error) { @@ -102,8 +104,9 @@ // Fetch data whenever filters change const onFilter = e => { + filters = e.detail fetch.update({ - filter: e.detail, + filter: filters, }) } @@ -178,6 +181,7 @@ {#key id} diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte index 633c7e1ad1..be9c6259c6 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte @@ -8,9 +8,10 @@ export let disabled = false const dispatch = createEventDispatcher() - let modal - let tempValue = filters || [] + let modal + + $: tempValue = filters || [] $: schemaFields = Object.values(schema || {}) @@ -34,8 +35,9 @@
(tempValue = e.detail)} />
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte index d105253e14..83fc19f388 100644 --- a/packages/builder/src/components/common/bindings/BindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte @@ -39,6 +39,7 @@ export let value = "" export let valid export let allowJS = false + export let allowHelpers = true let helpers = handlebarsCompletions() let getCaretPosition @@ -85,7 +86,7 @@ return helper.label.match(searchRgx) || helper.description.match(searchRgx) }) - $: categoryNames = [...categories.map(cat => cat[0]), "Helpers"] + $: categoryNames = getCategoryNames(categories) $: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`) @@ -96,6 +97,14 @@ } } + const getCategoryNames = categories => { + let names = [...categories.map(cat => cat[0])] + if (allowHelpers) { + names.push("Helpers") + } + return names + } + // Adds a JS/HBS helper to the expression const addHelper = (helper, js) => { let tempVal @@ -343,7 +352,7 @@ for more details.

{/if} - {#if $admin.isDev} + {#if $admin.isDev && allowJS}
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte index b220a15fc8..74e14574ab 100644 --- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte @@ -5,6 +5,7 @@ export let valid export let value = "" export let allowJS = false + export let allowHelpers = true $: enrichedBindings = enrichBindings(bindings) @@ -25,5 +26,6 @@ bindings={enrichedBindings} {value} {allowJS} + {allowHelpers} on:change /> diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte index 22d322985d..cc64e28835 100644 --- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte +++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte @@ -17,6 +17,7 @@ export let disabled = false export let fillWidth export let allowJS = true + export let allowHelpers = true export let updateOnChange = true export let drawerLeft @@ -77,6 +78,7 @@ on:change={event => (tempValue = event.detail)} {bindings} {allowJS} + {allowHelpers} /> diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte index 019a61a3bf..d495e37216 100644 --- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte +++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte @@ -17,22 +17,30 @@ import { generate } from "shortid" import { LuceneUtils, Constants } from "@budibase/frontend-core" import { getFields } from "helpers/searchFields" - import { createEventDispatcher, onMount } from "svelte" - - const dispatch = createEventDispatcher() - const { OperatorOptions } = Constants - const { getValidOperatorsForType } = LuceneUtils + import { createEventDispatcher } from "svelte" export let schemaFields export let filters = [] export let bindings = [] export let panel = ClientBindingPanel export let allowBindings = true - export let allOr = false export let fillWidth = false export let tableId - $: dispatch("change", filters) + const dispatch = createEventDispatcher() + const { OperatorOptions } = Constants + const { getValidOperatorsForType } = LuceneUtils + const KeyedFieldRegex = /\d[0-9]*:/g + const behaviourOptions = [ + { value: "and", label: "Match all filters" }, + { value: "or", label: "Match any filter" }, + ] + + let rawFilters + let matchAny = false + + $: parseFilters(filters) + $: dispatch("change", enrichFilters(rawFilters, matchAny)) $: enrichedSchemaFields = getFields( schemaFields || [], { allowLinks: true }, @@ -41,14 +49,41 @@ $: fieldOptions = enrichedSchemaFields.map(field => field.name) || [] $: valueTypeOptions = allowBindings ? ["Value", "Binding"] : ["Value"] - let behaviourValue - const behaviourOptions = [ - { value: "and", label: "Match all of the following filters" }, - { value: "or", label: "Match any of the following filters" }, - ] + // Remove field key prefixes and determine whether to use the "match all" + // or "match any" behaviour + const parseFilters = filters => { + matchAny = filters?.find(filter => filter.operator === "allOr") != null + rawFilters = (filters || []) + .filter(filter => filter.operator !== "allOr") + .map(filter => { + const { field } = filter + let newFilter = { ...filter } + delete newFilter.allOr + if (typeof field === "string" && field.match(KeyedFieldRegex) != null) { + const parts = field.split(":") + parts.shift() + newFilter.field = parts.join(":") + } + return newFilter + }) + } + + // Add field key prefixes and a special metadata filter object to indicate + // whether to use the "match all" or "match any" behaviour + const enrichFilters = (rawFilters, matchAny) => { + let count = 1 + return rawFilters + .filter(filter => filter.field) + .map(filter => ({ + ...filter, + field: `${count++}:${filter.field}`, + })) + .concat(matchAny ? [{ operator: "allOr" }] : []) + } + const addFilter = () => { - filters = [ - ...filters, + rawFilters = [ + ...rawFilters, { id: generate(), field: null, @@ -60,13 +95,13 @@ } const removeFilter = id => { - filters = filters.filter(field => field.id !== id) + rawFilters = rawFilters.filter(field => field.id !== id) } const duplicateFilter = id => { - const existingFilter = filters.find(filter => filter.id === id) + const existingFilter = rawFilters.find(filter => filter.id === id) const duplicate = { ...existingFilter, id: generate() } - filters = [...filters, duplicate] + rawFilters = [...rawFilters, duplicate] } const getSchema = filter => { @@ -133,32 +168,22 @@ const schema = enrichedSchemaFields.find(x => x.name === field) return schema?.constraints?.inclusion || [] } - - onMount(() => { - behaviourValue = allOr ? "or" : "and" - })
- - {#if !filters?.length} - Add your first filter expression. - {:else} - Results are filtered to only those which match all of the following - constraints. - {/if} - - {#if filters?.length} + {#if !rawFilters?.length} + Add your first filter expression. + {:else}
filter.operator !== "allOr") - if (allOr && filters) { - filters.push({ operator: "allOr" }) - } - // only save if anything was updated - if (filters) { - dispatch("change", addNumbering(filters)) - } - notifications.success("Filters saved.") + dispatch("change", tempValue) + notifications.success("Filters saved") drawer.hide() } @@ -85,13 +33,10 @@ { - toSaveFilters = event.detail - }} + on:change={e => (tempValue = e.detail)} /> diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte index 28db6b61c6..5d35498cfe 100644 --- a/packages/builder/src/components/integration/KeyValueBuilder.svelte +++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte @@ -33,6 +33,7 @@ export let showMenu = false export let bindings = [] export let bindingDrawerLeft + export let allowHelpers = true let fields = Object.entries(object || {}).map(([name, value]) => ({ name, @@ -122,6 +123,7 @@ disabled={readOnly} value={field.value} allowJS={false} + {allowHelpers} fillWidth={true} drawerLeft={bindingDrawerLeft} /> diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte index e70cf8330e..6a49ffa634 100644 --- a/packages/builder/src/components/integration/QueryViewer.svelte +++ b/packages/builder/src/components/integration/QueryViewer.svelte @@ -223,6 +223,7 @@ .config { display: grid; grid-gap: var(--spacing-s); + z-index: 1; } .config-field { diff --git a/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte b/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte index 8372e2af7e..049eecafcc 100644 --- a/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte +++ b/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte @@ -37,6 +37,7 @@ valuePlaceholder="Default" bindings={[...userBindings]} bindingDrawerLeft="260px" + allowHelpers={false} on:change />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte index c4b80dcc3a..e97e3ee15c 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte @@ -61,6 +61,13 @@ align-items: center; gap: var(--spacing-l); } + .header-left { + flex: 1 1 auto; + width: 0; + } + .header-left :global(> *) { + max-width: 100%; + } .header-left :global(.spectrum-Picker) { font-weight: 600; color: var(--spectrum-global-color-gray-900); diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte index 74f0c930cd..855c42173b 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte @@ -282,12 +282,16 @@ gap: var(--spacing-l); display: grid; align-items: center; - grid-template-columns: auto 160px auto 1fr 130px 130px 1fr auto auto; + grid-template-columns: + auto 150px auto minmax(140px, 1fr) 120px 100px minmax(140px, 1fr) + auto auto; border-radius: var(--border-radius-s); transition: background-color ease-in-out 130ms; } .condition.update { - grid-template-columns: auto 160px 1fr auto 1fr auto 1fr 130px 130px 1fr auto auto; + grid-template-columns: + auto 150px minmax(140px, 1fr) auto minmax(140px, 1fr) auto + minmax(140px, 1fr) 120px 100px minmax(140px, 1fr) auto auto; } .condition:hover { background-color: var(--spectrum-global-color-gray-100); diff --git a/packages/cli/package.json b/packages/cli/package.json index bb283d751a..527cba04b3 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/cli", - "version": "2.1.43-alpha.10", + "version": "2.1.43-alpha.12", "description": "Budibase CLI, for developers, self hosting and migrations.", "main": "src/index.js", "bin": { @@ -26,9 +26,9 @@ "outputPath": "build" }, "dependencies": { - "@budibase/backend-core": "2.1.43-alpha.10", - "@budibase/string-templates": "2.1.43-alpha.10", - "@budibase/types": "2.1.43-alpha.10", + "@budibase/backend-core": "2.1.43-alpha.12", + "@budibase/string-templates": "2.1.43-alpha.12", + "@budibase/types": "2.1.43-alpha.12", "axios": "0.21.2", "chalk": "4.1.0", "cli-progress": "3.11.2", diff --git a/packages/client/package.json b/packages/client/package.json index b74b5446a1..dad115fb49 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/client", - "version": "2.1.43-alpha.10", + "version": "2.1.43-alpha.12", "license": "MPL-2.0", "module": "dist/budibase-client.js", "main": "dist/budibase-client.js", @@ -19,9 +19,9 @@ "dev:builder": "rollup -cw" }, "dependencies": { - "@budibase/bbui": "2.1.43-alpha.10", - "@budibase/frontend-core": "2.1.43-alpha.10", - "@budibase/string-templates": "2.1.43-alpha.10", + "@budibase/bbui": "2.1.43-alpha.12", + "@budibase/frontend-core": "2.1.43-alpha.12", + "@budibase/string-templates": "2.1.43-alpha.12", "@spectrum-css/button": "^3.0.3", "@spectrum-css/card": "^3.0.3", "@spectrum-css/divider": "^1.0.3", diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 8731c7191e..825b401bb8 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -29,6 +29,17 @@ // Derive visibility $: open = $sidePanelStore.contentId === $component.id + // Derive a render key which is only changed whenever this panel is made + // visible after being hidden. We need to key the content to avoid showing + // stale data when re-revealing a side panel that was closed, but we cannot + // hide the content altogether when hidden as this breaks ejection. + let renderKey = null + $: { + if (open) { + renderKey = Math.random() + } + } + const showInSidePanel = (el, visible) => { const update = visible => { const target = document.getElementById("side-panel-container") @@ -47,7 +58,10 @@ // Apply initial visibility update(visible) - return { update } + return { + update, + destroy: () => update(false), + } } @@ -57,9 +71,9 @@ class="side-panel" class:open > - {#if $sidePanelStore.open} + {#key renderKey} - {/if} + {/key}