templates working end to end

5 years ago · 4c59087904
8 changed files with 109 additions and 1024 deletions
--- a/packages/builder/assets/budiworld.webp
+++ b/packages/builder/assets/budiworld.webp
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -31,11 +31,14 @@
        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)

  onMount(async () => {
@ -73,7 +76,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
@ -134,12 +137,12 @@
 </script>

 <ModalContent
-  title={template ? "Import app" : "Create app"}
-  confirmText={template ? "Import app" : "Create app"}
+  title={template?.fromFile ? "Import app" : "Create app"}
+  confirmText={template?.fromFile ? "Import app" : "Create app"}
  onConfirm={createNewApp}
  disabled={!valid}
 >
-  {#if template}
+  {#if template?.fromFile}
    <Dropzone
      error={$touched.file && $errors.file}
      gallery={false}
--- a/packages/builder/src/components/start/OnboardingModal.svelte
+++ b/packages/builder/src/components/start/OnboardingModal.svelte
@ -0,0 +1,68 @@
+<script>
+  import { ModalContent, Body } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+  import TemplateList from "./TemplateList.svelte"
+  import CreateAppModal from "./CreateAppModal.svelte"
+  import BudiWorldImage from "assets/budiworld.webp"
+
+  let step = 0
+  let template
+
+  function nextStep() {
+    step += 1
+  }
+
+  function selectTemplate(selectedTemplate) {
+    // get the template from the URL
+    template = selectedTemplate
+    nextStep()
+  }
+</script>
+
+{#if step === 0}
+  <ModalContent
+    title={`Welcome ${$auth.user?.firstName + "!" || "!"}`}
+    confirmText="Next"
+    onConfirm={() => {
+      nextStep()
+      return false
+    }}
+  >
+    <Body size="S">
+      <p>Welcome to Budibase!</p>
+
+      <p>
+        We're different from other development tools in some really special
+        ways, so we'd like to take you through them.
+      </p>
+    </Body>
+    <img
+      alt="Budibase community world"
+      class="budibase-world-image"
+      src={BudiWorldImage}
+    />
+  </ModalContent>
+{:else if step === 1}
+  <ModalContent
+    title={"Start from scratch or select a template"}
+    confirmText="Start from Scratch"
+    onConfirm={() => {
+      nextStep()
+      return false
+    }}
+  >
+    <Body size="S">
+      One of the coolest things about Budibase is that you don't have to start
+      from scratch. Simply select a template below, and get to work.
+    </Body>
+    <TemplateList onSelect={selectTemplate} />
+  </ModalContent>
+{:else if step === 2}
+  <CreateAppModal {template} />
+{/if}
+
+<style>
+  .budibase-world-image {
+    height: 200px;
+  }
+</style>
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Button, Heading, Body } from "@budibase/bbui"
+  import { Heading, Body } from "@budibase/bbui"
  import Spinner from "components/common/Spinner.svelte"
  import api from "builderStore/api"

@ -14,7 +14,6 @@
 </script>

 <div class="root">
-  <Heading size="M">Start With a Template</Heading>
  {#await templatesPromise}
    <div class="spinner-container">
      <Spinner size="30" />
@ -23,16 +22,14 @@
    <div class="templates">
      {#each templates as template}
        <div class="templates-card">
-          <Heading size="S">{template.name}</Heading>
-          <Body size="M" grey>{template.category}</Body>
+          <img
+            alt="template"
+            on:click={() => onSelect(template)}
+            src={template.image}
+            width="100%"
+          />
+          <Heading size="XS">{template.name}</Heading>
          <Body size="S" black>{template.description}</Body>
-          <div><img alt="template" src={template.image} width="100%" /></div>
-          <div class="card-footer">
-            <Button secondary on:click={() => onSelect(template)}>
-              Create
-              {template.name}
-            </Button>
-          </div>
        </div>
      {/each}
    </div>
@ -44,19 +41,20 @@
 <style>
  .templates {
    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
    grid-gap: var(--layout-m);
    justify-content: start;
  }

  .templates-card {
    background-color: var(--background);
-    padding: var(--spacing-xl);
-    border-radius: var(--border-radius-m);
-    border: var(--border-dark);
  }

-  .card-footer {
-    margin-top: var(--spacing-m);
+  img {
+    height: 135px;
+    width: 278px;
+    margin-bottom: var(--layout-m);
+    cursor: pointer;
  }
 </style>
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -159,8 +159,6 @@
    cursor: pointer;
    filter: brightness(110%);
  }
-  .group {
-  }
  .app {
    display: grid;
    grid-template-columns: auto 1fr auto;
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -16,6 +16,7 @@
  } from "@budibase/bbui"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
+  import OnboardingModal from "components/start/OnboardingModal.svelte"
  import { del } from "builderStore/api"
  import { onMount } from "svelte"
  import { apps, auth, admin } from "stores/portal"
@ -34,6 +35,7 @@
  let updatingModal
  let deletionModal
  let unpublishModal
+  let onboardingModal
  let creatingApp = false
  let loaded = false
  let searchTerm = ""
@ -197,6 +199,9 @@
  onMount(async () => {
    await apps.load()
    loaded = true
+    // TODO: only show when they have not onboarded yet
+    // If apps = 0 or user isn't onboarded?
+    onboardingModal.show()
  })
 </script>

@ -316,6 +321,9 @@
 </ConfirmDialog>

 <UpdateAppModal app={selectedApp} bind:this={updatingModal} />
+<Modal width={"100px"} bind:this={onboardingModal}>
+  <OnboardingModal />
+</Modal>

 <style>
  .title,
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
--- a/packages/server/src/utilities/fileSystem/index.js
+++ b/packages/server/src/utilities/fileSystem/index.js
@ -76,7 +76,7 @@ exports.getTemplateStream = async template => {
  if (template.file) {
    return fs.createReadStream(template.file.path)
  } else {
-    const tmpPath = await exports.downloadTemplate(...template.key.split("/"))
+    const tmpPath = await exports.downloadTemplate(template.key)
    return fs.createReadStream(join(tmpPath, "db", "dump.txt"))
  }
 }
@ -218,11 +218,13 @@ exports.deleteApp = async appId => {
 * @param name
 * @return {Promise<*>}
 */
-exports.downloadTemplate = async (type, name) => {
+exports.downloadTemplate = async path => {
+  const [type, name] = path.split("/")
+
  const DEFAULT_TEMPLATES_BUCKET =
    "prod-budi-templates.s3-eu-west-1.amazonaws.com"
  const templateUrl = `https://${DEFAULT_TEMPLATES_BUCKET}/templates/${type}/${name}.tar.gz`
-  return downloadTarball(templateUrl, ObjectStoreBuckets.TEMPLATES, type)
+  return downloadTarball(templateUrl, ObjectStoreBuckets.TEMPLATES, path)
 }

 /**