From dd343a594630d36b510ff6c6c46fbc5d016202ed Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Tue, 31 Jan 2023 19:34:32 +0000 Subject: [PATCH 1/2] New App Onboarding (#9489) * New App Onboarding * Lint * Move app creation onboarding into its own route * Fix quiet action button variant * Fix alt attribute background image flashing * Update routing logic and redirects to show app creation onboarding * Navigate to data rather than design upon initial app creation to allow tour to function properly * Tidy up popover logic and remove tip functionality * Fix binding popovers * Lint * Silence spammy warnings from the builder * Exclude SVG files from rollup plugin image to fix spectrum icons * Fix help menu icon colours not working in light themes * Tweak help menu styles --------- Co-authored-by: Andrew Kingston --- .../bbui/src/ActionButton/ActionButton.svelte | 2 +- .../bbui/src/Actions/position_dropdown.js | 18 +- .../bbui/src/Form/Core/EnvDropdown.svelte | 4 - packages/bbui/src/Popover/Popover.svelte | 62 ++--- .../icons/GoogleSheets.svelte | 6 + .../DatasourceNavigator/icons/Oracle.svelte | 2 +- .../modals/CreateTableModal.svelte | 22 +- .../components/common/FontAwesomeIcon.svelte | 18 +- .../src/components/common/HelpMenu.svelte | 8 +- .../common/bindings/BindingPanel.svelte | 2 +- .../components/deploy/DeployNavigation.svelte | 1 - .../src/pages/builder/portal/_layout.svelte | 7 +- .../pages/builder/portal/apps/_layout.svelte | 4 +- .../pages/builder/portal/apps/create.svelte | 82 +++--- .../onboarding/_components/DataPanel.svelte | 13 + .../_components/DatasourceConfigPanel.svelte | 109 ++++++++ .../onboarding/_components/ExampleApp.svelte | 254 ++++++++++++++++++ .../onboarding/_components/NamePanel.svelte | 60 +++++ .../onboarding/_components/PanelHeader.svelte | 49 ++++ .../portal/apps/onboarding/index.svelte | 202 ++++++++++++++ packages/builder/vite.config.js | 15 +- packages/client/rollup.config.js | 5 +- .../src/components/SplitPage.svelte | 4 +- 23 files changed, 830 insertions(+), 119 deletions(-) create mode 100644 packages/builder/src/pages/builder/portal/apps/onboarding/_components/DataPanel.svelte create mode 100644 packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte create mode 100644 packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte create mode 100644 packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte create mode 100644 packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte create mode 100644 packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index cc4417be2a..640f696458 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -86,7 +86,7 @@ margin-left: 0; transition: color ease-out 130ms; } - .is-selected:not(.spectrum-ActionButton--emphasized) { + .is-selected:not(.spectrum-ActionButton--emphasized):not(.spectrum-ActionButton--quiet) { background: var(--spectrum-global-color-gray-300); border-color: var(--spectrum-global-color-gray-700); } diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index 09264d5250..1884bbf2d6 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -16,10 +16,10 @@ export default function positionDropdown( top: null, } - let popoverLeftPad = 20 - // Determine vertical styles - if (window.innerHeight - anchorBounds.bottom < 100) { + if (align === "right-outside") { + styles.top = anchorBounds.top + } else if (window.innerHeight - anchorBounds.bottom < 100) { styles.top = anchorBounds.top - elementBounds.height - 5 } else { styles.top = anchorBounds.bottom + 5 @@ -34,15 +34,9 @@ export default function positionDropdown( styles.minWidth = anchorBounds.width } if (align === "right") { - let left = - anchorBounds.left + anchorBounds.width / 2 - elementBounds.width - // Accommodate margin on popover: 1.25rem; ~20px - if (left + elementBounds.width + popoverLeftPad > window.innerWidth) { - left -= 20 - } - styles.left = left - } else if (align === "right-side") { - styles.left = anchorBounds.left + anchorBounds.width + styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width + } else if (align === "right-outside") { + styles.left = anchorBounds.right + 10 } else { styles.left = anchorBounds.left } diff --git a/packages/bbui/src/Form/Core/EnvDropdown.svelte b/packages/bbui/src/Form/Core/EnvDropdown.svelte index f40d6556e5..eb2d6baca9 100644 --- a/packages/bbui/src/Form/Core/EnvDropdown.svelte +++ b/packages/bbui/src/Form/Core/EnvDropdown.svelte @@ -247,10 +247,6 @@ width: 100%; } - .no-variables-height { - height: 100px; - } - .no-variables-text { padding: var(--spacing-m); color: var(--spectrum-global-color-gray-600); diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index 576c4b9338..c32f93ea2a 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -15,15 +15,10 @@ export let portalTarget export let dataCy export let maxWidth - export let direction = "bottom" - export let showTip = false export let open = false export let useAnchorWidth = false export let dismissible = true - $: tooltipClasses = showTip - ? `spectrum-Popover--withTip spectrum-Popover--${direction}` - : "" $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum" export const show = () => { @@ -62,29 +57,31 @@ {#if open} - -
{}, - anchor, - }} - on:keydown={handleEscape} - class={"spectrum-Popover is-open " + (tooltipClasses || "")} - role="presentation" - data-cy={dataCy} - transition:fly|local={{ y: -20, duration: 200 }} - > - -
-
+ {#key anchor} + +
{}, + anchor, + }} + on:keydown={handleEscape} + class="spectrum-Popover is-open" + role="presentation" + data-cy={dataCy} + transition:fly|local={{ y: -20, duration: 200 }} + > + +
+
+ {/key} {/if} diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/GoogleSheets.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/GoogleSheets.svelte index 0d376e4400..d38c92d27d 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/icons/GoogleSheets.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/GoogleSheets.svelte @@ -182,3 +182,9 @@ + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Oracle.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Oracle.svelte index c939a59d90..2767e904a0 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Oracle.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Oracle.svelte @@ -11,6 +11,6 @@ diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte index 175705732f..7808134fb4 100644 --- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte +++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte @@ -29,6 +29,18 @@ : BUDIBASE_INTERNAL_DB_ID export let name + export let beforeSave = async () => {} + export let afterSave = async table => { + notifications.success(`Table ${name} created successfully.`) + + // Navigate to new table + const currentUrl = $url() + const path = currentUrl.endsWith("data") + ? `./table/${table._id}` + : `../../table/${table._id}` + $goto(path) + } + let error = "" let autoColumns = getAutoColumnInformation() let schema = {} @@ -78,15 +90,9 @@ // Create table let table try { + await beforeSave() table = await tables.save(newTable) - notifications.success(`Table ${name} created successfully.`) - - // Navigate to new table - const currentUrl = $url() - const path = currentUrl.endsWith("data") - ? `./table/${table._id}` - : `../../table/${table._id}` - $goto(path) + await afterSave(table) } catch (e) { notifications.error(e) // reload in case the table was created diff --git a/packages/builder/src/components/common/FontAwesomeIcon.svelte b/packages/builder/src/components/common/FontAwesomeIcon.svelte index 7929f6d9ad..84c16abeda 100644 --- a/packages/builder/src/components/common/FontAwesomeIcon.svelte +++ b/packages/builder/src/components/common/FontAwesomeIcon.svelte @@ -6,10 +6,22 @@ faBook, faPlay, faLock, + faFileArrowUp, + faChevronLeft, } from "@fortawesome/free-solid-svg-icons" import { faGithub, faDiscord } from "@fortawesome/free-brands-svg-icons" - library.add(faXmark, faBook, faPlay, faLock, faGithub, faDiscord, faEnvelope) + library.add( + faXmark, + faBook, + faPlay, + faLock, + faGithub, + faDiscord, + faEnvelope, + faFileArrowUp, + faChevronLeft + ) dom.watch() @@ -24,8 +36,6 @@ diff --git a/packages/builder/src/components/common/HelpMenu.svelte b/packages/builder/src/components/common/HelpMenu.svelte index c06efecdfa..75c53f0ca5 100644 --- a/packages/builder/src/components/common/HelpMenu.svelte +++ b/packages/builder/src/components/common/HelpMenu.svelte @@ -143,11 +143,11 @@ display: flex; padding: 12px; align-items: center; - transition: filter 0.5s; + transition: filter 0.5s, background 0.13s ease-out; } a:hover { - background-color: var(--spectrum-global-color-gray-300); + background-color: var(--spectrum-global-color-gray-200); } a:last-child { @@ -168,14 +168,14 @@ } .disabled { - opacity: 70%; + opacity: 60%; } .premiumBadge { align-items: center; margin-left: auto; display: flex; - border: var(--border-light); + border: 1px solid var(--spectrum-global-color-gray-400); border-radius: 4px; padding: 4px 7px 5px 8px; } diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte index d995bd507b..7daf2173a7 100644 --- a/packages/builder/src/components/common/bindings/BindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte @@ -179,7 +179,7 @@ diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 71aec61465..1f95c2f694 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -1,7 +1,7 @@ -{#if $auth.user && loaded} +{#if fullScreen} + +{:else if $auth.user && loaded}
- background + +
@@ -30,6 +31,7 @@ overflow-y: auto; } .right { + overflow: hidden; position: relative; } .right img { From 1909407ab1cf6da7f1ad829e976a26c5a3a8f690 Mon Sep 17 00:00:00 2001 From: Budibase Staging Release Bot <> Date: Tue, 31 Jan 2023 19:45:03 +0000 Subject: [PATCH 2/2] v2.2.12-alpha.53 --- lerna.json | 2 +- packages/backend-core/package.json | 4 ++-- packages/bbui/package.json | 4 ++-- packages/builder/package.json | 10 +++++----- packages/cli/package.json | 8 ++++---- packages/client/package.json | 8 ++++---- packages/frontend-core/package.json | 4 ++-- packages/sdk/package.json | 2 +- packages/server/package.json | 10 +++++----- packages/string-templates/package.json | 2 +- packages/types/package.json | 2 +- packages/worker/package.json | 8 ++++---- 12 files changed, 32 insertions(+), 32 deletions(-) diff --git a/lerna.json b/lerna.json index 88005cc266..6f2cf29a7f 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json index 1d2328c530..c0c9bcdd52 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.52", + "version": "2.2.12-alpha.53", "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.52", + "@budibase/types": "2.2.12-alpha.53", "@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 7392a22185..16bf4ee6a3 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.52", + "version": "2.2.12-alpha.53", "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.2.12-alpha.52", + "@budibase/string-templates": "2.2.12-alpha.53", "@spectrum-css/accordion": "3.0.24", "@spectrum-css/actionbutton": "1.0.1", "@spectrum-css/actiongroup": "1.0.1", diff --git a/packages/builder/package.json b/packages/builder/package.json index 142fcee4b3..0e85314ad5 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "license": "GPL-3.0", "private": true, "scripts": { @@ -71,10 +71,10 @@ } }, "dependencies": { - "@budibase/bbui": "2.2.12-alpha.52", - "@budibase/client": "2.2.12-alpha.52", - "@budibase/frontend-core": "2.2.12-alpha.52", - "@budibase/string-templates": "2.2.12-alpha.52", + "@budibase/bbui": "2.2.12-alpha.53", + "@budibase/client": "2.2.12-alpha.53", + "@budibase/frontend-core": "2.2.12-alpha.53", + "@budibase/string-templates": "2.2.12-alpha.53", "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/free-brands-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1", diff --git a/packages/cli/package.json b/packages/cli/package.json index ac24542ed0..0a7df43473 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/cli", - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "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.2.12-alpha.52", - "@budibase/string-templates": "2.2.12-alpha.52", - "@budibase/types": "2.2.12-alpha.52", + "@budibase/backend-core": "2.2.12-alpha.53", + "@budibase/string-templates": "2.2.12-alpha.53", + "@budibase/types": "2.2.12-alpha.53", "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 0265f23608..4dffbef085 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/client", - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "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.2.12-alpha.52", - "@budibase/frontend-core": "2.2.12-alpha.52", - "@budibase/string-templates": "2.2.12-alpha.52", + "@budibase/bbui": "2.2.12-alpha.53", + "@budibase/frontend-core": "2.2.12-alpha.53", + "@budibase/string-templates": "2.2.12-alpha.53", "@spectrum-css/button": "^3.0.3", "@spectrum-css/card": "^3.0.3", "@spectrum-css/divider": "^1.0.3", diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json index 0f5327e5f3..c8523c3a7c 100644 --- a/packages/frontend-core/package.json +++ b/packages/frontend-core/package.json @@ -1,12 +1,12 @@ { "name": "@budibase/frontend-core", - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "description": "Budibase frontend core libraries used in builder and client", "author": "Budibase", "license": "MPL-2.0", "svelte": "src/index.js", "dependencies": { - "@budibase/bbui": "2.2.12-alpha.52", + "@budibase/bbui": "2.2.12-alpha.53", "lodash": "^4.17.21", "svelte": "^3.46.2" } diff --git a/packages/sdk/package.json b/packages/sdk/package.json index 52ac20c70a..363e56d8af 100644 --- a/packages/sdk/package.json +++ b/packages/sdk/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/sdk", - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "description": "Budibase Public API SDK", "author": "Budibase", "license": "MPL-2.0", diff --git a/packages/server/package.json b/packages/server/package.json index 9d0bc27b0c..8ba86d5f7a 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/server", "email": "hi@budibase.com", - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "description": "Budibase Web Server", "main": "src/index.ts", "repository": { @@ -43,11 +43,11 @@ "license": "GPL-3.0", "dependencies": { "@apidevtools/swagger-parser": "10.0.3", - "@budibase/backend-core": "2.2.12-alpha.52", - "@budibase/client": "2.2.12-alpha.52", + "@budibase/backend-core": "2.2.12-alpha.53", + "@budibase/client": "2.2.12-alpha.53", "@budibase/pro": "2.2.12-alpha.52", - "@budibase/string-templates": "2.2.12-alpha.52", - "@budibase/types": "2.2.12-alpha.52", + "@budibase/string-templates": "2.2.12-alpha.53", + "@budibase/types": "2.2.12-alpha.53", "@bull-board/api": "3.7.0", "@bull-board/koa": "3.9.4", "@elastic/elasticsearch": "7.10.0", diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json index 44bfa48ebf..35eab64384 100644 --- a/packages/string-templates/package.json +++ b/packages/string-templates/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/string-templates", - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "description": "Handlebars wrapper for Budibase templating.", "main": "src/index.cjs", "module": "dist/bundle.mjs", diff --git a/packages/types/package.json b/packages/types/package.json index ce7ad9c492..4c0801b5a7 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/types", - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "description": "Budibase types", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/worker/package.json b/packages/worker/package.json index 93b526b6a1..f29af7d8bb 100644 --- a/packages/worker/package.json +++ b/packages/worker/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/worker", "email": "hi@budibase.com", - "version": "2.2.12-alpha.52", + "version": "2.2.12-alpha.53", "description": "Budibase background service", "main": "src/index.ts", "repository": { @@ -36,10 +36,10 @@ "author": "Budibase", "license": "GPL-3.0", "dependencies": { - "@budibase/backend-core": "2.2.12-alpha.52", + "@budibase/backend-core": "2.2.12-alpha.53", "@budibase/pro": "2.2.12-alpha.52", - "@budibase/string-templates": "2.2.12-alpha.52", - "@budibase/types": "2.2.12-alpha.52", + "@budibase/string-templates": "2.2.12-alpha.53", + "@budibase/types": "2.2.12-alpha.53", "@koa/router": "8.0.8", "@sentry/node": "6.17.7", "@techpass/passport-openidconnect": "0.3.2",