UX improvements

5 years ago · 9e41b9cd8f
4 changed files with 28 additions and 33 deletions
--- a/packages/builder/src/components/start/OnboardingModal.svelte
+++ b/packages/builder/src/components/start/OnboardingModal.svelte
@ -1,6 +1,6 @@
 <script>
  import { ModalContent, Body } from "@budibase/bbui"
-  import { auth } from "stores/portal"
+  // import { auth } from "stores/portal"
  import TemplateList from "./TemplateList.svelte"
  import CreateAppModal from "./CreateAppModal.svelte"
  import BudiWorldImage from "assets/budiworld.webp"
@ -10,27 +10,32 @@

  function nextStep() {
    step += 1
+    return false
  }

  function selectTemplate(selectedTemplate) {
-    // get the template from the URL
    template = selectedTemplate
    nextStep()
  }
+
+  // TODO: mark user as onboarded if they close this?
+  // async function userOnboarded() {
+  //   try {
+  //     await auth.updateSelf({ onboarded: true })
+  //   } catch (error) {
+  //     notifications.error("An onboarding error has occurred.")
+  //   }
+  // }
 </script>

 {#if step === 0}
  <ModalContent
    title={`Welcome ${$auth.user?.firstName + "!" || "!"}`}
    confirmText="Next"
-    onConfirm={() => {
-      nextStep()
-      return false
-    }}
+    onConfirm={nextStep}
  >
    <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.
@ -46,10 +51,8 @@
  <ModalContent
    title={"Start from scratch or select a template"}
    confirmText="Start from Scratch"
-    onConfirm={() => {
-      nextStep()
-      return false
-    }}
+    size="L"
+    onConfirm={nextStep}
  >
    <Body size="S">
      One of the coolest things about Budibase is that you don't have to start
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Heading, Body } from "@budibase/bbui"
+  import { Heading, Body, Layout } from "@budibase/bbui"
  import Spinner from "components/common/Spinner.svelte"
  import api from "builderStore/api"

@ -13,7 +13,7 @@
  let templatesPromise = fetchTemplates()
 </script>

-<div class="root">
+<Layout gap="XS" noPadding>
  {#await templatesPromise}
    <div class="spinner-container">
      <Spinner size="30" />
@ -21,7 +21,7 @@
  {:then templates}
    <div class="templates">
      {#each templates as template}
-        <div class="templates-card">
+        <Layout gap="XS" noPadding>
          <img
            alt="template"
            on:click={() => onSelect(template)}
@ -30,13 +30,13 @@
          />
          <Heading size="XS">{template.name}</Heading>
          <Body size="S" black>{template.description}</Body>
-        </div>
+        </Layout>
      {/each}
    </div>
  {:catch err}
    <h1 style="color:red">{err}</h1>
  {/await}
-</div>
+</Layout>

 <style>
  .templates {
@ -45,16 +45,11 @@
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--layout-m);
    justify-content: start;
-  }
-
-  .templates-card {
-    background-color: var(--background);
+    margin-top: var(--layout-s);
  }

  img {
-    height: 135px;
-    width: 278px;
-    margin-bottom: var(--layout-m);
+    margin-bottom: var(--layout-s);
    cursor: pointer;
  }
 </style>
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -45,6 +45,7 @@
  $: filteredApps = enrichedApps.filter(app =>
    app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
  )
+  $: loaded && enrichedApps.length === 0 && onboardingModal?.show()

  const enrichApps = (apps, user, sortBy) => {
    const enrichedApps = apps.map(app => ({
@ -199,9 +200,6 @@
  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>

@ -321,7 +319,7 @@
 </ConfirmDialog>

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

--- a/packages/server/src/utilities/fileSystem/index.js
+++ b/packages/server/src/utilities/fileSystem/index.js
@ -76,8 +76,9 @@ exports.getTemplateStream = async template => {
  if (template.file) {
    return fs.createReadStream(template.file.path)
  } else {
-    const tmpPath = await exports.downloadTemplate(template.key)
-    return fs.createReadStream(join(tmpPath, "db", "dump.txt"))
+    const [type, name] = template.key.split("/")
+    const tmpPath = await exports.downloadTemplate(type, name)
+    return fs.createReadStream(join(tmpPath, name, "db", "dump.txt"))
  }
 }

@ -218,13 +219,11 @@ exports.deleteApp = async appId => {
 * @param name
 * @return {Promise<*>}
 */
-exports.downloadTemplate = async path => {
-  const [type, name] = path.split("/")
-
+exports.downloadTemplate = async (type, name) => {
  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, path)
+  return downloadTarball(templateUrl, ObjectStoreBuckets.TEMPLATES, type)
 }

 /**