diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index f004e0acc5..6ace2303d9 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -6,7 +6,7 @@ labels: bug assignees: '' --- -## Checklist +**Checklist** - [ ] I have searched budibase discussions and github issues to check if my issue already exists **Hosting** diff --git a/hosting/docker-compose.dev.yaml b/hosting/docker-compose.dev.yaml index 1626d520b6..7906a389fa 100644 --- a/hosting/docker-compose.dev.yaml +++ b/hosting/docker-compose.dev.yaml @@ -6,7 +6,8 @@ services: minio-service: container_name: budi-minio-dev restart: on-failure - image: minio/minio + # Last version that supports the "fs" backend + image: minio/minio:RELEASE.2022-10-24T18-35-07Z volumes: - minio_data:/data ports: diff --git a/lerna.json b/lerna.json index 4e6affc904..94fceeac7e 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.2.12-alpha.21", + "version": "2.2.12-alpha.44", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json index 54d31fe088..38054918cd 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.21", + "version": "2.2.12-alpha.44", "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.21", + "@budibase/types": "2.2.12-alpha.44", "@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 dd92a9101e..803e933fe2 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.21", + "version": "2.2.12-alpha.44", "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.21", + "@budibase/string-templates": "2.2.12-alpha.44", + "@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/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index cfc810807e..cc4417be2a 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -88,6 +88,7 @@ } .is-selected:not(.spectrum-ActionButton--emphasized) { background: var(--spectrum-global-color-gray-300); + border-color: var(--spectrum-global-color-gray-700); } .noPadding { padding: 0; diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 3a08484635..bdcbaa5d88 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -1,11 +1,11 @@ -const ignoredClasses = [".flatpickr-calendar", ".modal-container"] +const ignoredClasses = [".flatpickr-calendar", ".spectrum-Popover"] let clickHandlers = [] /** * Handle a body click event */ const handleClick = event => { - // Ignore click if needed + // Ignore click if this is an ignored class for (let className of ignoredClasses) { if (event.target.closest(className)) { return @@ -14,9 +14,18 @@ const handleClick = event => { // Process handlers clickHandlers.forEach(handler => { - if (!handler.element.contains(event.target)) { - handler.callback?.(event) + if (handler.element.contains(event.target)) { + return } + + // Ignore clicks for modals, unless the handler is registered from a modal + const sourceInModal = handler.anchor.closest(".spectrum-Modal") != null + const clickInModal = event.target.closest(".spectrum-Modal") != null + if (clickInModal && !sourceInModal) { + return + } + + handler.callback?.(event) }) } document.documentElement.addEventListener("click", handleClick, true) @@ -24,10 +33,10 @@ document.documentElement.addEventListener("click", handleClick, true) /** * Adds or updates a click handler */ -const updateHandler = (id, element, callback) => { +const updateHandler = (id, element, anchor, callback) => { let existingHandler = clickHandlers.find(x => x.id === id) if (!existingHandler) { - clickHandlers.push({ id, element, callback }) + clickHandlers.push({ id, element, anchor, callback }) } else { existingHandler.callback = callback } @@ -42,12 +51,22 @@ const removeHandler = id => { /** * Svelte action to apply a click outside handler for a certain element + * opts.anchor is an optional param specifying the real root source of the + * component being observed. This is required for things like popovers, where + * the element using the clickoutside action is the popover, but the popover is + * rendered at the root of the DOM somewhere, whereas the popover anchor is the + * element we actually want to consider when determining the source component. */ -export default (element, callback) => { +export default (element, opts) => { const id = Math.random() - updateHandler(id, element, callback) + const update = newOpts => { + const callback = newOpts?.callback || newOpts + const anchor = newOpts?.anchor || element + updateHandler(id, element, anchor, callback) + } + update(opts) return { - update: newCallback => updateHandler(id, element, newCallback), + update, destroy: () => removeHandler(id), } } diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index 7570a39c8c..463b69169f 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -1,75 +1,68 @@ -export default function positionDropdown(element, { anchor, align, maxWidth }) { - let positionSide = "top" - let maxHeight = 0 - let dimensions = getDimensions(anchor) +export default function positionDropdown( + element, + { anchor, align, maxWidth, useAnchorWidth } +) { + const update = () => { + const anchorBounds = anchor.getBoundingClientRect() + const elementBounds = element.getBoundingClientRect() + let styles = { + maxHeight: null, + minWidth: null, + maxWidth, + left: null, + top: null, + } - function getDimensions() { - const { - bottom, - top: spaceAbove, - left, - width, - } = anchor.getBoundingClientRect() - const spaceBelow = window.innerHeight - bottom - const containerRect = element.getBoundingClientRect() - - let y - - if (spaceAbove > spaceBelow) { - positionSide = "bottom" - maxHeight = spaceAbove - 20 - y = window.innerHeight - spaceAbove + 5 + // Determine vertical styles + if (window.innerHeight - anchorBounds.bottom < 100) { + styles.top = anchorBounds.top - elementBounds.height - 5 } else { - positionSide = "top" - y = bottom + 5 - maxHeight = spaceBelow - 20 + styles.top = anchorBounds.bottom + 5 + styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20 } - return { - [positionSide]: y, - left, - width, - containerWidth: containerRect.width, + // Determine horizontal styles + if (!maxWidth && useAnchorWidth) { + styles.maxWidth = anchorBounds.width } + if (useAnchorWidth) { + styles.minWidth = anchorBounds.width + } + if (align === "right") { + styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width + } else if (align === "right-side") { + styles.left = anchorBounds.left + anchorBounds.width + } else { + styles.left = anchorBounds.left + } + + // Apply styles + Object.entries(styles).forEach(([style, value]) => { + if (value) { + element.style[style] = `${value.toFixed(0)}px` + } else { + element.style[style] = null + } + }) } - function calcLeftPosition() { - let left - - if (align == "right") { - left = dimensions.left + dimensions.width - dimensions.containerWidth - } else if (align == "right-side") { - left = dimensions.left + dimensions.width - } else { - left = dimensions.left - } - - return left - } - + // Apply initial styles which don't need to change element.style.position = "absolute" element.style.zIndex = "9999" - if (maxWidth) { - element.style.maxWidth = `${maxWidth}px` - } - element.style.minWidth = `${dimensions.width}px` - element.style.maxHeight = `${maxHeight.toFixed(0)}px` - element.style.transformOrigin = `center ${positionSide}` - element.style[positionSide] = `${dimensions[positionSide]}px` - element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` + // Observe both anchor and element and resize the popover as appropriate const resizeObserver = new ResizeObserver(entries => { - entries.forEach(() => { - dimensions = getDimensions() - element.style[positionSide] = `${dimensions[positionSide]}px` - element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` - }) + entries.forEach(update) }) resizeObserver.observe(anchor) resizeObserver.observe(element) + + document.addEventListener("scroll", update, true) + return { destroy() { resizeObserver.disconnect() + document.removeEventListener("scroll", update, true) }, } } diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte index 136a4fe24b..1e4cefd8ce 100644 --- a/packages/bbui/src/Avatar/Avatar.svelte +++ b/packages/bbui/src/Avatar/Avatar.svelte @@ -58,5 +58,6 @@ overflow: hidden; user-select: none; text-transform: uppercase; + flex-shrink: 0; } diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index 36abcbf4da..979ec6a728 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -14,7 +14,7 @@ export let active = false export let tooltip = undefined export let dataCy - export let newStyles = false + export let newStyles = true let showTooltip = false @@ -28,6 +28,7 @@ class:spectrum-Button--quiet={quiet} class:new-styles={newStyles} class:active + class:disabled class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" {disabled} data-cy={dataCy} @@ -108,7 +109,10 @@ border-color: transparent; color: var(--spectrum-global-color-gray-900); } - .spectrum-Button--secondary.new-styles:hover { + .spectrum-Button--secondary.new-styles:not(.disabled):hover { background: var(--spectrum-global-color-gray-300); } + .spectrum-Button--secondary.new-styles.disabled { + color: var(--spectrum-global-color-gray-500); + } diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte index 28e0975d82..944a3f4313 100644 --- a/packages/bbui/src/Drawer/DrawerContent.svelte +++ b/packages/bbui/src/Drawer/DrawerContent.svelte @@ -34,7 +34,6 @@ display: none; } .main { - font-family: var(--font-sans); padding: var(--spacing-xl); } .main :global(textarea) { diff --git a/packages/bbui/src/FancyForm/FancyButton.svelte b/packages/bbui/src/FancyForm/FancyButton.svelte new file mode 100644 index 0000000000..d794980911 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyButton.svelte @@ -0,0 +1,30 @@ + + + + {#if icon} + {#if icon.includes("/")} + button + {:else} + + {/if} + {/if} + +
+ +
+ + + diff --git a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte new file mode 100644 index 0000000000..510fd8efb8 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte @@ -0,0 +1,70 @@ + + + + {#if label} + {label} + {/if} + +
+ {#each options as option} + onChange(getOptionValue(option))} + > + {getOptionLabel(option)} + + {/each} +
+ + + diff --git a/packages/bbui/src/FancyForm/FancyCheckbox.svelte b/packages/bbui/src/FancyForm/FancyCheckbox.svelte new file mode 100644 index 0000000000..191cc79485 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyCheckbox.svelte @@ -0,0 +1,53 @@ + + + + + + +
+ {#if text} + {text} + {/if} + +
+ + + diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte new file mode 100644 index 0000000000..89f2dec7d0 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyField.svelte @@ -0,0 +1,126 @@ + + +
+
+
+ +
+ {#if error} +
+ +
+ {/if} +
+ {#if error} +
+ {error} +
+ {/if} +
+ + diff --git a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte new file mode 100644 index 0000000000..181cff50e4 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte @@ -0,0 +1,25 @@ + + +
+ +
+ + diff --git a/packages/bbui/src/FancyForm/FancyForm.svelte b/packages/bbui/src/FancyForm/FancyForm.svelte new file mode 100644 index 0000000000..f874238572 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyForm.svelte @@ -0,0 +1,40 @@ + + +
+ +
+ + diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte new file mode 100644 index 0000000000..8735e2c30c --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyInput.svelte @@ -0,0 +1,77 @@ + + + + {#if label} + {label} + {/if} + (focused = true)} + 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 new file mode 100644 index 0000000000..ee43ecc3ca --- /dev/null +++ b/packages/bbui/src/FancyForm/FancySelect.svelte @@ -0,0 +1,147 @@ + + + (open = true)} +> + {#if label} + {label} + {/if} + +
+ {selectedLabel || ""} +
+ +
+ +
+ + + (open = false)} + useAnchorWidth={true} + maxWidth={null} +> +
+ {#if options.length} + {#each options as option, idx} +
onChange(getOptionValue(option, idx))} + > + + {getOptionLabel(option, idx)} + + {#if value === getOptionValue(option, idx)} + + {/if} +
+ {/each} + {/if} +
+ + + diff --git a/packages/bbui/src/FancyForm/index.js b/packages/bbui/src/FancyForm/index.js new file mode 100644 index 0000000000..241036fb35 --- /dev/null +++ b/packages/bbui/src/FancyForm/index.js @@ -0,0 +1,6 @@ +export { default as FancyInput } from "./FancyInput.svelte" +export { default as FancyCheckbox } from "./FancyCheckbox.svelte" +export { default as FancySelect } from "./FancySelect.svelte" +export { default as FancyButton } from "./FancyButton.svelte" +export { default as FancyForm } from "./FancyForm.svelte" +export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte" diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte index 6996525a76..10aae67ec6 100644 --- a/packages/bbui/src/Form/Core/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker.svelte @@ -264,7 +264,7 @@ max-height: 100%; } :global(.flatpickr-calendar) { - font-family: "Source Sans Pro", sans-serif; + font-family: var(--font-sans); } .is-disabled { pointer-events: none !important; diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 97bd1394b4..32cfcf3310 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -2,12 +2,12 @@ import "@spectrum-css/picker/dist/index-vars.css" import "@spectrum-css/popover/dist/index-vars.css" import "@spectrum-css/menu/dist/index-vars.css" - import { fly } from "svelte/transition" import { createEventDispatcher } from "svelte" import clickOutside from "../../Actions/click_outside" import Search from "./Search.svelte" import Icon from "../../Icon/Icon.svelte" import StatusLight from "../../StatusLight/StatusLight.svelte" + import Popover from "../../Popover/Popover.svelte" export let id = null export let disabled = false @@ -33,7 +33,10 @@ export let sort = false const dispatch = createEventDispatcher() + let searchTerm = null + let button + let popover $: sortedOptions = getSortedOptions(options, getOptionLabel, sort) $: filteredOptions = getFilteredOptions( @@ -42,7 +45,9 @@ getOptionLabel ) - const onClick = () => { + const onClick = e => { + e.preventDefault() + e.stopPropagation() dispatch("click") if (readonly) { return @@ -76,77 +81,119 @@ } -
(open = false)}> - - {#if open} -
- {#if autocomplete} - (searchTerm = event.detail)} - {disabled} - placeholder="Search" - /> + {/if} + + + + (open = false)} + useAnchorWidth={!autoWidth} + maxWidth={autoWidth ? 400 : null} +> +
(open = false)} + > + {#if autocomplete} + (searchTerm = event.detail)} + {disabled} + placeholder="Search" + /> + {/if} +
    + {#if placeholderOption} +
  • onSelectOption(null)} + > + {placeholderOption} + +
    • {/if} -
      - {#if placeholderOption} + {#if filteredOptions.length} + {#each filteredOptions as option, idx}
    • onSelectOption(null)} + on:click={() => onSelectOption(getOptionValue(option, idx))} + class:is-disabled={!isOptionEnabled(option)} > - {placeholderOption} + {#if getOptionIcon(option, idx)} + + + + {/if} + {#if getOptionColour(option, idx)} + + + + {/if} + + {getOptionLabel(option, idx)} +
      • - {/if} - {#if filteredOptions.length} - {#each filteredOptions as option, idx} -
    • onSelectOption(getOptionValue(option, idx))} - class:is-disabled={!isOptionEnabled(option)} - > - {#if getOptionIcon(option, idx)} - - - - {/if} - {#if getOptionColour(option, idx)} - - - - {/if} - - {getOptionLabel(option, idx)} - - -
      • - {/each} - {/if} -
    -
- {/if} -
+ {/each} + {/if} + +
+ diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte index 3e15b7f6ef..721083e3a6 100644 --- a/packages/bbui/src/Form/Core/Select.svelte +++ b/packages/bbui/src/Form/Core/Select.svelte @@ -18,8 +18,11 @@ export let autoWidth = false export let autocomplete = false export let sort = false + const dispatch = createEventDispatcher() + let open = false + $: fieldText = getFieldText(value, options, placeholder) $: fieldIcon = getFieldAttribute(getOptionIcon, value, options) $: fieldColour = getFieldAttribute(getOptionColour, value, options) diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte index 0a723c140a..6a64876a2c 100644 --- a/packages/bbui/src/Form/Core/TextField.svelte +++ b/packages/bbui/src/Form/Core/TextField.svelte @@ -112,8 +112,4 @@ .spectrum-Textfield { width: 100%; } - input:disabled { - color: var(--spectrum-global-color-gray-600) !important; - -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important; - } diff --git a/packages/bbui/src/Icon/IconAvatar.svelte b/packages/bbui/src/Icon/IconAvatar.svelte index b404cdea9f..add51f5bdc 100644 --- a/packages/bbui/src/Icon/IconAvatar.svelte +++ b/packages/bbui/src/Icon/IconAvatar.svelte @@ -19,6 +19,7 @@ .icon { width: 28px; height: 28px; + flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; @@ -34,6 +35,7 @@ .icon.size--S { width: 22px; height: 22px; + flex: 0 0 22px; } .icon.size--S :global(.spectrum-Icon) { width: 16px; @@ -46,6 +48,7 @@ .icon.size--L { width: 40px; height: 40px; + flex: 0 0 40px; } .icon.size--L :global(.spectrum-Icon) { width: 28px; diff --git a/packages/bbui/src/InlineAlert/InlineAlert.svelte b/packages/bbui/src/InlineAlert/InlineAlert.svelte index 94ac6b2c2a..57e7296234 100644 --- a/packages/bbui/src/InlineAlert/InlineAlert.svelte +++ b/packages/bbui/src/InlineAlert/InlineAlert.svelte @@ -56,5 +56,6 @@ --spectrum-semantic-positive-icon-color: #2d9d78; --spectrum-semantic-negative-icon-color: #e34850; min-width: 100px; + margin: 0; } diff --git a/packages/bbui/src/Label/Label.svelte b/packages/bbui/src/Label/Label.svelte index 6b3392ce2d..ee6d9adf76 100644 --- a/packages/bbui/src/Label/Label.svelte +++ b/packages/bbui/src/Label/Label.svelte @@ -21,6 +21,7 @@ label { padding: 0; white-space: nowrap; + color: var(--spectrum-global-color-gray-600); } .muted { diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 2996bcc613..01111fda9a 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -1,32 +1,101 @@ -
- +
+
+
+ +
+
+
+
{ + sidePanelVisble = false + }} + > + +
diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte index 3bbfdd8282..ea9496ba72 100644 --- a/packages/bbui/src/Link/Link.svelte +++ b/packages/bbui/src/Link/Link.svelte @@ -1,5 +1,6 @@ dispatch("click") && e.stopPropagation()} {href} {target} {download} diff --git a/packages/bbui/src/List/ListItem.svelte b/packages/bbui/src/List/ListItem.svelte index 40d3c5541c..28015c4c57 100644 --- a/packages/bbui/src/List/ListItem.svelte +++ b/packages/bbui/src/List/ListItem.svelte @@ -30,9 +30,11 @@ {/if}
-
- -
+ {#if $$slots.default} +
+ +
+ {/if}
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index cec270486a..19d361c8b1 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -21,6 +21,8 @@ * template: a HBS or JS binding to use as the value * background: the background color * color: the text color + * borderLeft: show a left border + * borderRight: show a right border */ export let data = [] export let schema = {} @@ -31,6 +33,7 @@ export let allowSelectRows export let allowEditRows = true export let allowEditColumns = true + export let allowClickRows = true export let selectedRows = [] export let customRenderers = [] export let disableSorting = false @@ -270,6 +273,17 @@ if (schema[field].align === "Right") { styles[field] += "justify-content: flex-end; text-align: right;" } + if (schema[field].borderLeft) { + styles[field] += + "border-left: 1px solid var(--spectrum-global-color-gray-200);" + } + if (schema[field].borderLeft) { + styles[field] += + "border-right: 1px solid var(--spectrum-global-color-gray-200);" + } + if (schema[field].minWidth) { + styles[field] += `min-width: ${schema[field].minWidth};` + } }) return styles } @@ -290,7 +304,11 @@ {:else} -
+
{#if fields.length}
{#if showEditColumn} @@ -356,7 +374,7 @@ {/if} {#if sortedRows?.length} {#each sortedRows as row, idx} -
+
{#if showEditColumn}
diff --git a/packages/bbui/src/Tags/Tag.svelte b/packages/bbui/src/Tags/Tag.svelte index f7089decdb..0cdd6c385d 100644 --- a/packages/bbui/src/Tags/Tag.svelte +++ b/packages/bbui/src/Tags/Tag.svelte @@ -37,7 +37,7 @@ diff --git a/packages/bbui/src/Tags/Tags.svelte b/packages/bbui/src/Tags/Tags.svelte index 36d34507f3..ebca64b774 100644 --- a/packages/bbui/src/Tags/Tags.svelte +++ b/packages/bbui/src/Tags/Tags.svelte @@ -5,3 +5,13 @@
+ + diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte index 077c0a4878..5f243ad5a6 100644 --- a/packages/bbui/src/Typography/Heading.svelte +++ b/packages/bbui/src/Typography/Heading.svelte @@ -15,3 +15,9 @@ > + + diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css index f98f27bf58..ef3483d3df 100644 --- a/packages/bbui/src/bbui.css +++ b/packages/bbui/src/bbui.css @@ -40,12 +40,14 @@ --rounded-medium: 8px; --rounded-large: 16px; - --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", - "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", + "Helvetica Neue", Arial, "Noto Sans", sans-serif; + --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", + "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-serif: "Georgia", Cambria, Times New Roman, Times, serif; --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --spectrum-alias-body-text-font-family: var(--font-sans); font-size: 16px; --font-size-xs: 0.75rem; @@ -89,6 +91,8 @@ --border-light-2: 2px var(--grey-3) solid; --border-blue: 2px var(--blue) solid; --border-transparent: 2px transparent solid; + + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600); } a { diff --git a/packages/bbui/src/context.js b/packages/bbui/src/context.js index bb95f8b425..919f2140d6 100644 --- a/packages/bbui/src/context.js +++ b/packages/bbui/src/context.js @@ -1,3 +1,4 @@ export default { Modal: "bbui-modal", + PopoverRoot: "bbui-popover-root", } diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 601c4dcbca..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" @@ -101,3 +102,6 @@ export { banner, BANNER_TYPES } from "./Stores/banner" // Helpers export * as Helpers from "./helpers" + +// Fancy form components +export * from "./FancyForm" 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/assets/bb-emblem.svg b/packages/builder/assets/bb-emblem.svg index 9f4f3690d5..7d499e4862 100644 --- a/packages/builder/assets/bb-emblem.svg +++ b/packages/builder/assets/bb-emblem.svg @@ -3,7 +3,7 @@ diff --git a/packages/builder/cypress.json b/packages/builder/cypress.json index f1eada481f..b779794543 100644 --- a/packages/builder/cypress.json +++ b/packages/builder/cypress.json @@ -11,9 +11,5 @@ "WORKER_PORT": "4200", "JWT_SECRET": "test", "HOST_IP": "" - }, - "retries": { - "runMode": 1, - "openMode": 0 } } \ No newline at end of file diff --git a/packages/builder/cypress/integration/adminAndManagement/authentication.spec.js b/packages/builder/cypress/integration/adminAndManagement/authentication.spec.js index 5cc42cb59a..140dfb9ff8 100644 --- a/packages/builder/cypress/integration/adminAndManagement/authentication.spec.js +++ b/packages/builder/cypress/integration/adminAndManagement/authentication.spec.js @@ -2,7 +2,7 @@ import filterTests from "../../support/filterTests" // const interact = require("../support/interact") filterTests(["smoke", "all"], () => { - context("Auth Configuration", () => { + xcontext("Auth Configuration", () => { before(() => { cy.login() }) @@ -21,7 +21,7 @@ filterTests(["smoke", "all"], () => { cy.get("[data-cy=oidc-active]").should('not.be.checked') cy.intercept("POST", "/api/global/configs").as("updateAuth") - cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true}) + cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true }) cy.wait("@updateAuth") cy.get("@updateAuth").its("response.statusCode").should("eq", 200) @@ -45,7 +45,7 @@ filterTests(["smoke", "all"], () => { cy.get("button[data-cy=oidc-save]").should("not.be.disabled"); cy.intercept("POST", "/api/global/configs").as("updateAuth") - cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true}) + cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true }) cy.wait("@updateAuth") cy.get("@updateAuth").its("response.statusCode").should("eq", 200) @@ -85,11 +85,11 @@ filterTests(["smoke", "all"], () => { cy.get(".auth-form input.spectrum-Textfield-input").type("Another ") cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 6) cy.get(".spectrum-Tags-item").contains("Another") - + cy.get("button[data-cy=oidc-save]").should("not.be.disabled"); cy.intercept("POST", "/api/global/configs").as("updateAuth") - cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true}) + cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true }) cy.wait("@updateAuth") cy.get("@updateAuth").its("response.statusCode").should("eq", 200) @@ -123,7 +123,7 @@ filterTests(["smoke", "all"], () => { cy.get("button[data-cy=oidc-save]").should("not.be.disabled"); cy.intercept("POST", "/api/global/configs").as("updateAuth") - cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true}) + cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true }) cy.wait("@updateAuth") cy.get("@updateAuth").its("response.statusCode").should("eq", 200) @@ -144,7 +144,7 @@ filterTests(["smoke", "all"], () => { cy.get("div.content").scrollTo("bottom") - cy.get("[data-cy=restore-oidc-default-scopes]").click({force: true}) + cy.get("[data-cy=restore-oidc-default-scopes]").click({ force: true }) cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 4) diff --git a/packages/builder/cypress/integration/adminAndManagement/userSettings.spec.js b/packages/builder/cypress/integration/adminAndManagement/userSettings.spec.js index a2b0d32d02..18362031c9 100644 --- a/packages/builder/cypress/integration/adminAndManagement/userSettings.spec.js +++ b/packages/builder/cypress/integration/adminAndManagement/userSettings.spec.js @@ -3,107 +3,112 @@ const interact = require('../../support/interact') filterTests(["smoke", "all"], () => { context("User Settings Menu", () => { - + before(() => { cy.login() }) - + it("should update user information via user settings menu", () => { - const fname = "test" - const lname = "user" + const fname = "test" + const lname = "user" - cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.updateUserInformation(fname, lname) + cy.visit(`${Cypress.config().baseUrl}/builder`) + cy.updateUserInformation(fname, lname) - // Go to user info and confirm name update - cy.contains("Users").click() - cy.contains("test@test.com").click() + // Go to user info and confirm name update + cy.contains("Users").click() + cy.contains("test@test.com").click() - cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => { - cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname) - }) - cy.get(interact.FIELD).eq(2).within(() => { - cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname) - }) + cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => { + cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname) + }) + cy.get(interact.FIELD).eq(2).within(() => { + cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname) + }) }) - it("should allow copying of the users API key", () => { - cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true }) - cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true }) - cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => { - cy.get(interact.SPECTRUM_ICON).click({force: true}) - }) - // There may be timing issues with this on the smoke build - cy.wait(500) - cy.get(".spectrum-Toast-content") + xit("should allow copying of the users API key", () => { + cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true }) + cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true }) + cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => { + cy.get(interact.SPECTRUM_ICON).click({ force: true }) + }) + // There may be timing issues with this on the smoke build + cy.wait(500) + cy.get(".spectrum-Toast-content") .contains("URL copied to clipboard") .should("be.visible") }) it("should allow API key regeneration", () => { - // Get initial API key value - cy.get(interact.SPECTRUM_DIALOG_CONTENT) + cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true }) + cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true }) + cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => { + cy.get(interact.SPECTRUM_ICON).click({ force: true }) + }) + // Get initial API key value + cy.get(interact.SPECTRUM_DIALOG_CONTENT) .find(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').as('keyOne') - // Click re-generate key button - cy.get("button").contains("Re-generate key").click({ force: true }) + // Click re-generate key button + cy.get("button").contains("Regenerate key").click({ force: true }) - // Verify API key was changed - cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => { - cy.get('@keyOne').then((keyOne) => { - cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne) - }) + // Verify API key was changed + cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => { + cy.get('@keyOne').then((keyOne) => { + cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne) }) - cy.closeModal() + }) + cy.closeModal() }) it("should update password", () => { - // Access Update password modal - cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true }) - cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true }) + // Access Update password modal + cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true }) + cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true }) - // Enter new password and update - cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => { - for (let i = 0; i < 2; i++) { - // password set to 'newpwd' - cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd") - } - cy.get("button").contains("Update password").click({ force: true }) - }) + // Enter new password and update + cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => { + for (let i = 0; i < 2; i++) { + // password set to 'newpwd' + cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd") + } + cy.get("button").contains("Update password").click({ force: true }) + }) - // Logout & in with new password - //cy.logOut() - cy.login("test@test.com", "newpwd") + // Logout & in with new password + //cy.logOut() + cy.login("test@test.com", "newpwd") }) - it("should open and close developer mode", () => { - cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true }) - - // Close developer mode & verify - cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true }) - cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections - cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button - cy.get(".app").should('not.exist') // At least one app should be available + xit("should open and close developer mode", () => { + cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true }) - // Open developer mode & verify - cy.get(".avatar > .icon").click({ force: true }) - cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true }) - cy.get(interact.SPECTRUM_SIDENAV).should('exist') // config sections available - cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available + // Close developer mode & verify + cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true }) + cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections + cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button + cy.get(".app").should('not.exist') // At least one app should be available + + // Open developer mode & verify + cy.get(".avatar > .icon").click({ force: true }) + cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true }) + cy.get(".app-table").should('exist') // config sections available + cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available }) after(() => { - // Change password back to original value - cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true }) - cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true }) - cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => { - for (let i = 0; i < 2; i++) { - cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test") - } - cy.get("button").contains("Update password").click({ force: true }) - }) - // Remove users name - cy.updateUserInformation() + // Change password back to original value + cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true }) + cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true }) + cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => { + for (let i = 0; i < 2; i++) { + cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test") + } + cy.get("button").contains("Update password").click({ force: true }) }) + // Remove users name + cy.updateUserInformation() + }) }) }) diff --git a/packages/builder/cypress/integration/appOverview.spec.js b/packages/builder/cypress/integration/appOverview.spec.js index 2afc0af277..60d0f2a06d 100644 --- a/packages/builder/cypress/integration/appOverview.spec.js +++ b/packages/builder/cypress/integration/appOverview.spec.js @@ -2,7 +2,7 @@ import filterTests from "../support/filterTests" import clientPackage from "@budibase/client/package.json" filterTests(["all"], () => { - context("Application Overview screen", () => { + xcontext("Application Overview screen", () => { before(() => { cy.login() cy.deleteAllApps() diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js index d37b0806c4..897c7f8b91 100644 --- a/packages/builder/cypress/integration/createApp.spec.js +++ b/packages/builder/cypress/integration/createApp.spec.js @@ -14,15 +14,15 @@ filterTests(['smoke', 'all'], () => { cy.visit(`${Cypress.config().baseUrl}/builder/portal/apps/create`, { timeout: 5000 }) //added /portal/apps/create cy.wait(1000) cy.get(interact.CREATE_APP_BUTTON, { timeout: 10000 }).contains('Start from scratch').should("exist") - + cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist") cy.get(interact.TEMPLATE_CATEGORY).should("exist") - + cy.get(interact.APP_TABLE).should("not.exist") }) } - it("should provide filterable templates", () => { + xit("should provide filterable templates", () => { cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 }) cy.wait(500) @@ -30,16 +30,16 @@ filterTests(['smoke', 'all'], () => { .its("body") .then(val => { if (val.length > 0) { - cy.get(interact.SPECTRUM_BUTTON).contains("Templates").click({force: true}) + cy.get(interact.SPECTRUM_BUTTON).contains("View Templates").click({ force: true }) } }) cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist") cy.get(interact.TEMPLATE_CATEGORY).should("exist") - + cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).its('length').should('be.gt', 1) cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).its('length').should('be.gt', 2) - + cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).eq(1).click() cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).should('have.length', 1) @@ -104,14 +104,14 @@ filterTests(['smoke', 'all'], () => { cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 }) cy.updateUserInformation("Ted", "Userman") - + cy.createApp("", false) cy.applicationInAppTable("Teds app") cy.deleteApp("Teds app") // Accomodate names that end in 'S' cy.updateUserInformation("Chris", "Userman") - + cy.createApp("", false) cy.applicationInAppTable("Chris app") cy.deleteApp("Chris app") @@ -123,35 +123,49 @@ filterTests(['smoke', 'all'], () => { const exportedApp = 'cypress/fixtures/exported-app.txt' cy.importApp(exportedApp, "") - cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 2000 }) - cy.applicationInAppTable("My app") - - cy.get(".appTable .name").eq(0).click() - - cy.deleteApp("My app") + cy.get(".app-table .name").eq(0).click() + cy.closeModal() + cy.get(`[aria-label="ShowMenu"]`).click() + cy.get(".spectrum-Menu").within(() => { + cy.contains("Overview").click() + }) + cy.get(".app-overview-actions-icon").within(() => { + cy.get(".spectrum-Icon").click({ force: true }) + }) + cy.get(".spectrum-Menu").contains("Delete").click({ force: true }) + cy.get(".spectrum-Dialog-grid").within(() => { + cy.get("input").type("My app") + }) + cy.get(".spectrum-Button--warning").click() }) it("should create an application from an export, using the users first name as the default app name", () => { const exportedApp = 'cypress/fixtures/exported-app.txt' cy.updateUserInformation("Ted", "Userman") - cy.importApp(exportedApp, "") - cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.applicationInAppTable("Teds app") - - cy.get(".appTable .name").eq(0).click() - - cy.deleteApp("Teds app") - + cy.get(".app-table .name").eq(0).click() + cy.closeModal() + cy.get(`[aria-label="ShowMenu"]`).click() + cy.get(".spectrum-Menu").within(() => { + cy.contains("Overview").click() + }) + cy.get(".app-overview-actions-icon").within(() => { + cy.get(".spectrum-Icon").click({ force: true }) + }) + cy.get(".spectrum-Menu").contains("Delete").click({ force: true }) + cy.get(".spectrum-Dialog-grid").within(() => { + cy.get("input").type("Teds app") + }) + cy.get(".spectrum-Button--warning").click() cy.updateUserInformation("", "") }) - it("should generate the first application from a template", () => { + xit("should generate the first application from a template", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) cy.wait(500) @@ -172,28 +186,28 @@ filterTests(['smoke', 'all'], () => { const card = cy.get('.template-card').eq(0).should("exist"); const cardOverlay = card.get('.template-thumbnail-action-overlay').should("exist") cardOverlay.invoke("show") - cardOverlay.get("button").contains("Use template").should("exist").click({force: true}) + cardOverlay.get("button").contains("Use template").should("exist").click({ force: true }) }) // CMD Create app from theme card cy.get(".spectrum-Modal").should('be.visible') - + const templateName = cy.get(".spectrum-Modal .template-thumbnail-text") templateName.invoke('text') - .then(templateNameText => { - const templateNameParsed = "/"+templateNameText.toLowerCase().replace(/\s+/g, "-") - cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText) - cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed) + .then(templateNameText => { + const templateNameParsed = "/" + templateNameText.toLowerCase().replace(/\s+/g, "-") + cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText) + cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed) - cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click() - cy.wait(5000) - - cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.wait(2000) + cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click() + cy.wait(5000) - cy.applicationInAppTable(templateNameText) - cy.deleteApp(templateNameText) - }); + cy.visit(`${Cypress.config().baseUrl}/builder`) + cy.wait(2000) + + cy.applicationInAppTable(templateNameText) + cy.deleteApp(templateNameText) + }); }) @@ -217,5 +231,5 @@ filterTests(['smoke', 'all'], () => { cy.deleteApp(secondAppName) }) - }) + }) }) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 4c44fd6672..e63fd41591 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -101,7 +101,7 @@ Cypress.Commands.add("deleteUser", email => { }) Cypress.Commands.add("updateUserInformation", (firstName, lastName) => { - cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ + cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true, }) @@ -132,7 +132,7 @@ Cypress.Commands.add("updateUserInformation", (firstName, lastName) => { .blur() } cy.get(".confirm-wrap").within(() => { - cy.get("button").contains("Update information").click({ force: true }) + cy.get("button").contains("Save").click({ force: true }) }) cy.get(".spectrum-Dialog-grid").should("not.exist") }) @@ -222,9 +222,12 @@ Cypress.Commands.add("deleteApp", name => { // Go to app overview const appIdParsed = appId.split("_").pop() const actionEleId = `[data-cy=row_actions_${appIdParsed}]` - cy.get(actionEleId).within(() => { - cy.contains("Manage").click({ force: true }) + cy.get(actionEleId).click() + cy.get(`[aria-label="ShowMenu"]`).click() + cy.get(".spectrum-Menu").within(() => { + cy.contains("Overview").click() }) + cy.wait(500) // Unpublish first if needed @@ -400,7 +403,7 @@ Cypress.Commands.add("searchForApplication", appName => { return } else { // Searches for the app - cy.get(".filter").then(() => { + cy.get(".spectrum-Search").then(() => { cy.get(".spectrum-Textfield").within(() => { cy.get("input").eq(0).clear({ force: true }) cy.get("input").eq(0).type(appName, { force: true }) @@ -413,7 +416,7 @@ Cypress.Commands.add("searchForApplication", appName => { // Assumes there are no others Cypress.Commands.add("applicationInAppTable", appName => { cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 }) - cy.get(".appTable", { timeout: 30000 }).within(() => { + cy.get(".app-table", { timeout: 30000 }).within(() => { cy.get(".title").contains(appName).should("exist") }) }) diff --git a/packages/builder/package.json b/packages/builder/package.json index f1e0fd203e..c76be56eb4 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "2.2.12-alpha.21", + "version": "2.2.12-alpha.44", "license": "GPL-3.0", "private": true, "scripts": { @@ -71,11 +71,12 @@ } }, "dependencies": { - "@budibase/bbui": "2.2.12-alpha.21", - "@budibase/client": "2.2.12-alpha.21", - "@budibase/frontend-core": "2.2.12-alpha.21", - "@budibase/string-templates": "2.2.12-alpha.21", + "@budibase/bbui": "2.2.12-alpha.44", + "@budibase/client": "2.2.12-alpha.44", + "@budibase/frontend-core": "2.2.12-alpha.44", + "@budibase/string-templates": "2.2.12-alpha.44", "@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", @@ -87,7 +88,7 @@ "shortid": "2.2.15", "svelte-dnd-action": "^0.9.8", "svelte-loading-spinners": "^0.1.1", - "svelte-portal": "0.1.0", + "svelte-portal": "1.0.0", "uuid": "8.3.1", "yup": "0.29.2" }, diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte index 4d193df104..04846e01bf 100644 --- a/packages/builder/src/App.svelte +++ b/packages/builder/src/App.svelte @@ -11,11 +11,8 @@