From dd343a594630d36b510ff6c6c46fbc5d016202ed Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Tue, 31 Jan 2023 19:34:32 +0000 Subject: [PATCH] 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}
diff --git a/packages/builder/src/pages/builder/portal/apps/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/_layout.svelte index fe10d4b08a..b91f5f0c5a 100644 --- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/apps/_layout.svelte @@ -2,7 +2,7 @@ import { notifications } from "@budibase/bbui" import { apps, templates, licensing, groups } from "stores/portal" import { onMount } from "svelte" - import { goto } from "@roxi/routify" + import { redirect } from "@roxi/routify" // Don't block loading if we've already hydrated state let loaded = $apps.length > 0 @@ -24,7 +24,7 @@ // Go to new app page if no apps exists if (!$apps.length) { - $goto("./create") + $redirect("./onboarding") } } catch (error) { notifications.error("Error loading apps and templates") diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte index 72ed203880..1f273360ab 100644 --- a/packages/builder/src/pages/builder/portal/apps/create.svelte +++ b/packages/builder/src/pages/builder/portal/apps/create.svelte @@ -1,5 +1,6 @@ - - - - - - -
-
- - -
-
- - - - - - - - +{#if !$apps.length} + +{:else} + + + + + + +
+
+ + +
+
+ + + + + + + +{/if} diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DataPanel.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DataPanel.svelte new file mode 100644 index 0000000000..9a7fffd893 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DataPanel.svelte @@ -0,0 +1,13 @@ + + +
+ + +
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte new file mode 100644 index 0000000000..a5f0fc138d --- /dev/null +++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte @@ -0,0 +1,109 @@ + + +
+ +
+ + {#each Object.entries(fields) as [name, { type, default: defaultValue, required }]} + {#if type !== "boolean"} + {}} + label={formatName(name)} + {type} + /> + {/if} + {/each} + {#each Object.entries(fields) as [name, { type, default: defaultValue, required }]} + {#if type === "boolean"} + + {/if} + {/each} + +
+ +
+ + diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte new file mode 100644 index 0000000000..3e970ac360 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte @@ -0,0 +1,254 @@ + + +
+
+
+ Budibase Logo +

{name}

+
+
Home
+ + + + + + + + + + + + + + {#each rows as row} + + {#each Object.values(row) as value} + + {/each} + + {/each} + +
FIRST NAMELAST NAMEEMAILADDRESSCITYPOSTCODEPHONE
{value}
+
+

{rows[0].firstName}

+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+ + diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte new file mode 100644 index 0000000000..740cfda8f2 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte @@ -0,0 +1,60 @@ + + +
+ + + + + + {#if url} +

{window.location.origin}/app/{url}

+ {:else} +

‎

+ {/if} + +
+ + diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte new file mode 100644 index 0000000000..34d612dc9e --- /dev/null +++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte @@ -0,0 +1,49 @@ + + +
+ +
+ {#if onBack} + + {/if} + {title} +
+ {subtitle} +
+ + diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte new file mode 100644 index 0000000000..6df756f119 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte @@ -0,0 +1,202 @@ + + + + goToApp(appId)} + /> + + + + {#if stage === "name"} + (stage = "data")} /> + {:else if integrationsLoading} +

loading...

+ {:else if stage === "data"} + (stage = "name")}> +
+ handleCreateApp({ useSampleData: true })}> +
+
+ +
+ Budibase Sample data +
+ +
+
+ +
+
+ +
+ Upload file +
+ +
+ {#each Object.entries(plusIntegrations) as [integrationType, schema]} +
+ (stage = integrationType)}> +
+
+ +
+ {schema.friendlyName} +
+ +
+ {/each} + + {:else if stage in plusIntegrations} + (stage = "data")} + onNext={data => handleCreateApp({ datasourceConfig: data })} + /> + {:else} +

There was an problem. Please refresh the page and try again.

+ {/if} +
+ +
+ + + diff --git a/packages/builder/vite.config.js b/packages/builder/vite.config.js index 95e2908995..c02f13e193 100644 --- a/packages/builder/vite.config.js +++ b/packages/builder/vite.config.js @@ -1,9 +1,16 @@ import { svelte } from "@sveltejs/vite-plugin-svelte" import replace from "@rollup/plugin-replace" import { defineConfig, loadEnv } from "vite" - import path from "path" +const ignoredWarnings = [ + "unused-export-let", + "css-unused-selector", + "module-script-reactive-declaration", + "a11y-no-onchange", + "a11y-click-events-have-key-events", +] + export default defineConfig(({ mode }) => { const isProduction = mode === "production" const env = loadEnv(mode, process.cwd()) @@ -29,6 +36,12 @@ export default defineConfig(({ mode }) => { svelte({ hot: !isProduction, emitCss: true, + onwarn: (warning, handler) => { + // Ignore some warnings + if (!ignoredWarnings.includes(warning.code)) { + handler(warning) + } + }, }), replace({ preventAssignment: true, diff --git a/packages/client/rollup.config.js b/packages/client/rollup.config.js index a69de38799..f56714b51a 100644 --- a/packages/client/rollup.config.js +++ b/packages/client/rollup.config.js @@ -17,6 +17,7 @@ const ignoredWarnings = [ "css-unused-selector", "module-script-reactive-declaration", "a11y-no-onchange", + "a11y-click-events-have-key-events", ] export default { @@ -88,7 +89,9 @@ export default { dedupe: ["svelte", "svelte/internal"], }), svg(), - image(), + image({ + exclude: "**/*.svg", + }), json(), production && terser(), !production && visualizer(), diff --git a/packages/frontend-core/src/components/SplitPage.svelte b/packages/frontend-core/src/components/SplitPage.svelte index 08ec519715..79886845de 100644 --- a/packages/frontend-core/src/components/SplitPage.svelte +++ b/packages/frontend-core/src/components/SplitPage.svelte @@ -9,7 +9,8 @@
- background + +
@@ -30,6 +31,7 @@ overflow-y: auto; } .right { + overflow: hidden; position: relative; } .right img {