diff --git a/packages/builder/assets/budiworld.webp b/packages/builder/assets/budiworld.webp new file mode 100644 index 0000000000..347036a797 Binary files /dev/null and b/packages/builder/assets/budiworld.webp differ diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 3c093dd1cf..cbdaa27270 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -30,7 +30,7 @@ Cypress.Commands.add("login", () => { Cypress.Commands.add("createApp", name => { cy.visit(`localhost:${Cypress.env("PORT")}/builder`) cy.wait(500) - cy.contains(/Create (new )?app/).click() + cy.contains(/Start from scratch/).click() cy.get(".spectrum-Modal") .within(() => { cy.get("input").eq(0).type(name).should("have.value", name).blur() diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte index 9ce9d746d7..fae0f80f0d 100644 --- a/packages/builder/src/components/start/CreateAppModal.svelte +++ b/packages/builder/src/components/start/CreateAppModal.svelte @@ -17,6 +17,7 @@ import { capitalise } from "helpers" import { goto } from "@roxi/routify" import { APP_NAME_REGEX } from "constants" + import TemplateList from "./TemplateList.svelte" export let template @@ -31,12 +32,16 @@ APP_NAME_REGEX, "App name must be letters, numbers and spaces only" ), - file: template ? mixed().required("Please choose a file to import") : null, + file: template?.fromFile + ? mixed().required("Please choose a file to import") + : null, } let submitting = false let valid = false + $: checkValidity($values, validator) + $: showTemplateSelection = !template?.fromFile && !template?.key onMount(async () => { await hostingStore.actions.fetchDeployedApps() @@ -73,7 +78,7 @@ submitting = true // Check a template exists if we are important - if (template && !$values.file) { + if (template?.fromFile && !$values.file) { $errors.file = "Please choose a file to import" valid = false submitting = false @@ -133,33 +138,59 @@ } - - {#if template} - { - $values.file = e.detail?.[0] - $touched.file = true +{#if showTemplateSelection} + { + showTemplateSelection = false + return false + }} + showCancelButton={false} + showCloseIcon={false} + > + Select a template below, or start from scratch. + { + if (!selected) { + showTemplateSelection = false + return + } + + template = selected }} /> - {/if} - - Give your new app a name, and choose which groups have access (paid plans - only). - - ($touched.name = true)} - label="Name" - /> - - + +{:else} + + {#if template?.fromFile} + { + $values.file = e.detail?.[0] + $touched.file = true + }} + /> + {/if} + + Give your new app a name, and choose which groups have access (paid plans + only). + + ($touched.name = true)} + label="Name" + /> + + +{/if} diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte index 7e7b5c74d5..576415762a 100644 --- a/packages/builder/src/components/start/TemplateList.svelte +++ b/packages/builder/src/components/start/TemplateList.svelte @@ -1,5 +1,5 @@ -
- Start With a Template + {#await templatesPromise}