diff --git a/lerna.json b/lerna.json index f50b005bd..b6a0685b3 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "0.9.185-alpha.10", + "version": "0.9.185-alpha.11", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/auth/package.json b/packages/auth/package.json index ee6f23051..a8320c0a0 100644 --- a/packages/auth/package.json +++ b/packages/auth/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/auth", - "version": "0.9.185-alpha.10", + "version": "0.9.185-alpha.11", "description": "Authentication middlewares for budibase builder and apps", "main": "src/index.js", "author": "Budibase", diff --git a/packages/bbui/package.json b/packages/bbui/package.json index 9870e81bd..abffe4e5b 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": "0.9.185-alpha.10", + "version": "0.9.185-alpha.11", "license": "AGPL-3.0", "svelte": "src/index.js", "module": "dist/bbui.es.js", diff --git a/packages/builder/assets/bb-space-man.svg b/packages/builder/assets/bb-space-man.svg new file mode 100644 index 000000000..bb6eda2bf --- /dev/null +++ b/packages/builder/assets/bb-space-man.svg @@ -0,0 +1,290 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index ca758e46d..2a5a7eb13 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -188,8 +188,16 @@ Cypress.Commands.add("navigateToFrontend", () => { Cypress.Commands.add("createScreen", (screenName, route) => { cy.get("[aria-label=AddCircle]").click() cy.get(".spectrum-Modal").within(() => { - cy.get("input").first().type(screenName) - cy.get("input").eq(1).type(route) + cy.get(".item").first().click() + cy.get(".spectrum-Button--cta").click() + }) + cy.get(".spectrum-Modal").within(() => { + cy.get("input").first().clear().type(screenName) + cy.get("input").eq(1).clear().type(route) + cy.get(".spectrum-Button--cta").click() + }) + cy.get(".spectrum-Modal").within(() => { + cy.get(`[data-cy="left-nav"]`).click() cy.get(".spectrum-Button--cta").click() }) }) diff --git a/packages/builder/package.json b/packages/builder/package.json index 43e1e30c0..478a9910a 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "0.9.185-alpha.10", + "version": "0.9.185-alpha.11", "license": "AGPL-3.0", "private": true, "scripts": { @@ -65,10 +65,10 @@ } }, "dependencies": { - "@budibase/bbui": "^0.9.185-alpha.10", - "@budibase/client": "^0.9.185-alpha.10", + "@budibase/bbui": "^0.9.185-alpha.11", + "@budibase/client": "^0.9.185-alpha.11", "@budibase/colorpicker": "1.1.2", - "@budibase/string-templates": "^0.9.185-alpha.10", + "@budibase/string-templates": "^0.9.185-alpha.11", "@sentry/browser": "5.19.1", "@spectrum-css/page": "^3.0.1", "@spectrum-css/vars": "^3.0.1", diff --git a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js index 817dfecee..d4b78740d 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js @@ -2,6 +2,7 @@ import { Screen } from "./utils/Screen" export default { name: `Create from scratch`, + id: `createFromScratch`, create: () => createScreen(), } diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index de5400d0b..51dd44026 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -10,10 +10,11 @@ import { roles } from "stores/backend" import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte" import Layout from "components/design/NavigationPanel/Layout.svelte" - import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte" import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui" + export let showModal + const tabs = [ { title: "Screens", @@ -85,9 +86,6 @@
- - - @@ -102,7 +100,7 @@
- +
diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte new file mode 100644 index 000000000..803528119 --- /dev/null +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -0,0 +1,179 @@ + + + (blankSelected ? chooseModal(1) : chooseModal(0))} + size="M" + onConfirm={() => { + save(createdScreens) + }} + disabled={!selectedNav} +> + Please select your preferred layout for the new application: + +
+
(selectedNav = "Left")} + class:unselected={selectedNav && selectedNav !== "Left"} + > +
+
+
+
Side Nav
+
+
(selectedNav = "Top")} + class:unselected={selectedNav && selectedNav !== "Top"} + > +
+
+
+
Top Nav
+
+
(selectedNav = "None")} + class:unselected={selectedNav && selectedNav !== "None"} + > +
+
No Nav
+
+
+ + + diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index 0671dce58..cfbcd444c 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -1,117 +1,115 @@ - if (routeError) return false + (autoSelected ? chooseModal(2) : chooseModal(1))} + disabled={!selectedScreens.length} + size="L" +> + Please select the screens you would like to add to your application. + Autogenerated screens come with CRUD functionality. - draftScreen.props._instanceName = name - draftScreen.props._component = baseComponent - draftScreen.routing = { route, roleId } + + Blank screen +
x.id.includes(blankScreen))} + on:click={() => + toggleScreenSelection(templates.find(t => t.id === blankScreen))} + class:disabled={autoSelected} + > +
+ Blank +
+
+ {#if selectedScreens.find(x => x.id === blankScreen)} + + {/if} +
+
+ Autogenerated Screens - await store.actions.screens.create(draftScreen) - if (createLink) { - await store.actions.components.links.save(route, name) - } - await store.actions.routing.fetch() + {#each $tables.list.filter(table => table.type !== "external") as table} +
x.name.includes(table.name))} + on:click={() => toggleScreenSelection(table)} + class="item" + > +
+ {table.name} +
+
+ {#if selectedScreens.find(x => x.name.includes(table.name))} + + {/if} +
+
+ {/each} + + - if (templateIndex !== undefined) { - const template = templates[templateIndex] - analytics.captureEvent(Events.SCREEN.CREATED, { - template: template.id || template.name, - }) - } + diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte new file mode 100644 index 000000000..f353da1a4 --- /dev/null +++ b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte @@ -0,0 +1,51 @@ + + + chooseModal(0)} + onConfirm={() => chooseModal(2)} + cancelText={"Back"} + disabled={!screenName || !url || routeError} +> + + + diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte new file mode 100644 index 000000000..33d3cbb4a --- /dev/null +++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte @@ -0,0 +1,48 @@ + + + + + + + + + + + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index d3e5d5d2d..784435728 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte @@ -5,6 +5,8 @@ selectedComponent, allScreens, } from "builderStore" + import { Detail, Layout, Button, Icon } from "@budibase/bbui" + import CurrentItemPreview from "components/design/AppPreview" import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte" import ComponentSelectionList from "components/design/AppPreview/ComponentSelectionList.svelte" @@ -16,6 +18,8 @@ import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte" import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte" import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte" + import Logo from "assets/bb-space-man.svg" + import ScreenWizard from "components/design/NavigationPanel/ScreenWizard.svelte" // Cache previous values so we don't update the URL more than necessary let previousType @@ -23,6 +27,9 @@ let previousComponentId let hydrationComplete = false + // Manage the layout modal flow from here + let showModal + // Hydrate state from URL params $: hydrateStateFromURL($params, $leftover) @@ -145,7 +152,7 @@
- +
@@ -166,6 +173,25 @@ {/key}
+ {:else} +
+
+ + logo +
+ Let's add some life to this screen +
+ + +
+
{/if}
@@ -178,6 +204,8 @@ + + diff --git a/packages/cli/package.json b/packages/cli/package.json index a84cbc33d..941db94f6 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/cli", - "version": "0.9.185-alpha.10", + "version": "0.9.185-alpha.11", "description": "Budibase CLI, for developers, self hosting and migrations.", "main": "src/index.js", "bin": { diff --git a/packages/client/package.json b/packages/client/package.json index 369c14af8..9d59376a9 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/client", - "version": "0.9.185-alpha.10", + "version": "0.9.185-alpha.11", "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": "^0.9.185-alpha.10", + "@budibase/bbui": "^0.9.185-alpha.11", "@budibase/standard-components": "^0.9.139", - "@budibase/string-templates": "^0.9.185-alpha.10", + "@budibase/string-templates": "^0.9.185-alpha.11", "regexparam": "^1.3.0", "shortid": "^2.2.15", "svelte-spa-router": "^3.0.5" diff --git a/packages/server/package.json b/packages/server/package.json index 4481bd6ed..16b1acaf7 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/server", "email": "hi@budibase.com", - "version": "0.9.185-alpha.10", + "version": "0.9.185-alpha.11", "description": "Budibase Web Server", "main": "src/index.js", "repository": { @@ -68,9 +68,9 @@ "author": "Budibase", "license": "AGPL-3.0-or-later", "dependencies": { - "@budibase/auth": "^0.9.185-alpha.10", - "@budibase/client": "^0.9.185-alpha.10", - "@budibase/string-templates": "^0.9.185-alpha.10", + "@budibase/auth": "^0.9.185-alpha.11", + "@budibase/client": "^0.9.185-alpha.11", + "@budibase/string-templates": "^0.9.185-alpha.11", "@bull-board/api": "^3.7.0", "@bull-board/koa": "^3.7.0", "@elastic/elasticsearch": "7.10.0", diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json index 9cfd5e963..693f5a7de 100644 --- a/packages/string-templates/package.json +++ b/packages/string-templates/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/string-templates", - "version": "0.9.185-alpha.10", + "version": "0.9.185-alpha.11", "description": "Handlebars wrapper for Budibase templating.", "main": "src/index.cjs", "module": "dist/bundle.mjs", diff --git a/packages/worker/package.json b/packages/worker/package.json index 9c9e24c8b..4036f3e99 100644 --- a/packages/worker/package.json +++ b/packages/worker/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/worker", "email": "hi@budibase.com", - "version": "0.9.185-alpha.10", + "version": "0.9.185-alpha.11", "description": "Budibase background service", "main": "src/index.js", "repository": { @@ -29,8 +29,8 @@ "author": "Budibase", "license": "AGPL-3.0-or-later", "dependencies": { - "@budibase/auth": "^0.9.185-alpha.10", - "@budibase/string-templates": "^0.9.185-alpha.10", + "@budibase/auth": "^0.9.185-alpha.11", + "@budibase/string-templates": "^0.9.185-alpha.11", "@koa/router": "^8.0.0", "@sentry/node": "^6.0.0", "@techpass/passport-openidconnect": "^0.3.0",