diff --git a/lerna.json b/lerna.json index 0606169dd3..9332b26f66 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.2.12-alpha.32", + "version": "2.2.12-alpha.41", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json index ca87d6daa4..df2e19ea34 100644 --- a/packages/backend-core/package.json +++ b/packages/backend-core/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/backend-core", - "version": "2.2.12-alpha.32", + "version": "2.2.12-alpha.41", "description": "Budibase backend core libraries used in server and worker", "main": "dist/src/index.js", "types": "dist/src/index.d.ts", @@ -23,7 +23,7 @@ }, "dependencies": { "@budibase/nano": "10.1.1", - "@budibase/types": "2.2.12-alpha.32", + "@budibase/types": "2.2.12-alpha.41", "@shopify/jest-koa-mocks": "5.0.1", "@techpass/passport-openidconnect": "0.3.2", "aws-cloudfront-sign": "2.2.0", diff --git a/packages/bbui/package.json b/packages/bbui/package.json index 6b67ca77d0..6437628002 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.2.12-alpha.32", + "version": "2.2.12-alpha.41", "license": "MPL-2.0", "svelte": "src/index.js", "module": "dist/bbui.es.js", @@ -38,7 +38,8 @@ ], "dependencies": { "@adobe/spectrum-css-workflow-icons": "1.2.1", - "@budibase/string-templates": "2.2.12-alpha.32", + "@budibase/string-templates": "2.2.12-alpha.41", + "@spectrum-css/accordion": "3.0.24", "@spectrum-css/actionbutton": "1.0.1", "@spectrum-css/actiongroup": "1.0.1", "@spectrum-css/avatar": "3.0.2", diff --git a/packages/bbui/src/Accordion/Accordion.svelte b/packages/bbui/src/Accordion/Accordion.svelte new file mode 100644 index 0000000000..1c88450c9a --- /dev/null +++ b/packages/bbui/src/Accordion/Accordion.svelte @@ -0,0 +1,58 @@ + + +
+
+

+ + +

+
+ +
+
+
+ + diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte index ef254949c8..8735e2c30c 100644 --- a/packages/bbui/src/FancyForm/FancyInput.svelte +++ b/packages/bbui/src/FancyForm/FancyInput.svelte @@ -2,6 +2,7 @@ import { createEventDispatcher } from "svelte" import FancyField from "./FancyField.svelte" import FancyFieldLabel from "./FancyFieldLabel.svelte" + import { fade } from "svelte/transition" export let label export let value @@ -9,6 +10,7 @@ export let disabled = false export let error = null export let validate = null + export let suffix = null const dispatch = createEventDispatcher() @@ -38,6 +40,9 @@ on:blur={() => (focused = false)} class:placeholder /> + {#if suffix && !placeholder} +
{suffix}
+ {/if} diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte index 240871fc9a..ee43ecc3ca 100644 --- a/packages/bbui/src/FancyForm/FancySelect.svelte +++ b/packages/bbui/src/FancyForm/FancySelect.svelte @@ -21,6 +21,7 @@ let wrapper $: placeholder = !value + $: selectedLabel = getSelectedLabel(value) const extractProperty = (value, property) => { if (value && typeof value === "object") { @@ -37,6 +38,17 @@ } open = false } + + const getSelectedLabel = value => { + if (!value || !options?.length) { + return "" + } + const selectedOption = options.find(x => getOptionValue(x) === value) + if (!selectedOption) { + return value + } + return getOptionLabel(selectedOption) + } - {value || ""} + {selectedLabel || ""}
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 3de0bc2f46..b56aa597ad 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -75,6 +75,7 @@ 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 Slider } from "./Form/Slider.svelte" +export { default as Accordion } from "./Accordion/Accordion.svelte" // Renderers export { default as BoldRenderer } from "./Table/BoldRenderer.svelte" diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock index 72e36a6474..16f1feb920 100644 --- a/packages/bbui/yarn.lock +++ b/packages/bbui/yarn.lock @@ -109,6 +109,11 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@spectrum-css/accordion@3.0.24": + version "3.0.24" + resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.24.tgz#f89066c120c57b0cfc9aba66d60c39fc1cf69f74" + integrity sha512-jNOmUsxmiT3lRLButnN5KKHM94fd+87fjiF8L0c4uRNgJl6ZsBuxPXrM15lV4y1f8D2IACAw01/ZkGRAeaCOFA== + "@spectrum-css/actionbutton@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577" diff --git a/packages/builder/package.json b/packages/builder/package.json index 82c939d1f4..68ac91264c 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "2.2.12-alpha.32", + "version": "2.2.12-alpha.41", "license": "GPL-3.0", "private": true, "scripts": { @@ -71,11 +71,12 @@ } }, "dependencies": { - "@budibase/bbui": "2.2.12-alpha.32", - "@budibase/client": "2.2.12-alpha.32", - "@budibase/frontend-core": "2.2.12-alpha.32", - "@budibase/string-templates": "2.2.12-alpha.32", + "@budibase/bbui": "2.2.12-alpha.41", + "@budibase/client": "2.2.12-alpha.41", + "@budibase/frontend-core": "2.2.12-alpha.41", + "@budibase/string-templates": "2.2.12-alpha.41", "@sentry/browser": "5.19.1", + "@spectrum-css/accordion": "^3.0.24", "@spectrum-css/page": "^3.0.1", "@spectrum-css/vars": "^3.0.1", "codemirror": "^5.59.0", diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte index 05649e1773..6b35f3313f 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte @@ -6,6 +6,7 @@ Toggle, Button, TextArea, + Accordion, } from "@budibase/bbui" import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte" import { capitalise } from "helpers" @@ -51,15 +52,24 @@ let addButton - function getDisplayName(key) { + function getDisplayName(key, fieldKey) { let name - if (schema[key]?.display) { + if (fieldKey && schema[key]["fields"][fieldKey]?.display) { + name = schema[key]["fields"][fieldKey].display + } else if (fieldKey) { + name = fieldKey + } else if (schema[key]?.display) { name = schema[key].display } else { name = key } return capitalise(name) } + function getFieldGroupKeys(fieldGroup) { + return Object.entries(schema[fieldGroup].fields || {}) + .filter(el => filter(el)) + .map(([key]) => key) + }
@@ -100,6 +110,27 @@ error={$validation.errors[configKey]} />
+ {:else if schema[configKey].type === "fieldGroup"} + !!config[fieldKey] + )} + header={getDisplayName(configKey)} + > + + {#each getFieldGroupKeys(configKey) as fieldKey} +
+ + +
+ {/each} + + {:else}
diff --git a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte index e4cbbfc7aa..e43437d756 100644 --- a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte +++ b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte @@ -19,6 +19,8 @@ export let close const colNotSet = "Please specify a column name" + const relationshipAlreadyExists = + "A relationship between these tables already exists." const relationshipTypes = [ { label: "One to Many", @@ -154,6 +156,10 @@ if (!isMany && !fromPrimary) { errObj.fromPrimary = "Please pick the primary key" } + if (isMany && relationshipExists()) { + errObj.fromTable = relationshipAlreadyExists + errObj.toTable = relationshipAlreadyExists + } // currently don't support relationships back onto the table itself, needs to relate out const tableError = "From/to/through tables must be different" @@ -271,6 +277,35 @@ toRelationship = relateTo } + function relationshipExists() { + if ( + originalFromTable && + originalToTable && + originalFromTable === fromTable && + originalToTable === toTable + ) { + return false + } + let fromThroughLinks = Object.values( + datasource.entities[fromTable.name].schema + ).filter(value => value.through) + let toThroughLinks = Object.values( + datasource.entities[toTable.name].schema + ).filter(value => value.through) + + const matchAgainstUserInput = (fromTableId, toTableId) => + (fromTableId === fromId && toTableId === toId) || + (fromTableId === toId && toTableId === fromId) + + return !!fromThroughLinks.find(from => + toThroughLinks.find( + to => + from.through === to.through && + matchAgainstUserInput(from.tableId, to.tableId) + ) + ) + } + function removeExistingRelationship() { if (originalFromTable && originalFromColumnName) { delete datasource.entities[originalFromTable.name].schema[ @@ -332,8 +367,13 @@ bind:error={errors.fromTable} on:change={e => { fromColumn = tableOptions.find(opt => opt.value === e.detail)?.label || "" + if (errors.fromTable === relationshipAlreadyExists) { + errors.toColumn = null + } errors.fromTable = null errors.fromColumn = null + errors.toTable = null + errors.throughTable = null }} /> {#if isManyToOne && fromTable} @@ -352,8 +392,13 @@ bind:error={errors.toTable} on:change={e => { toColumn = tableOptions.find(opt => opt.value === e.detail)?.label || "" + if (errors.toTable === relationshipAlreadyExists) { + errors.fromColumn = null + } errors.toTable = null errors.toColumn = null + errors.fromTable = null + errors.throughTable = null }} /> {#if isManyToMany} @@ -362,6 +407,11 @@ options={tableOptions} bind:value={throughId} bind:error={errors.throughTable} + on:change={() => { + errors.fromTable = null + errors.toTable = null + errors.throughTable = null + }} /> {#if fromTable && toTable && throughTable}