making the onboarding modal inline and shown when you have no apps

5 years ago · 0072f1cd6b
2 changed files with 6 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"
@ -17,15 +17,6 @@
    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}
@ -33,6 +24,8 @@
    title={`Welcome ${$auth.user?.firstName + "!" || "!"}`}
    confirmText="Next"
    onConfirm={nextStep}
+    showCancelButton={false}
+    showCloseIcon={false}
  >
    <Body size="S">
      <p>Welcome to Budibase!</p>
@ -53,6 +46,8 @@
    confirmText="Start from Scratch"
    size="L"
    onConfirm={nextStep}
+    showCancelButton={false}
+    showCloseIcon={false}
  >
    <Body size="S">
      One of the coolest things about Budibase is that you don't have to start
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -8,10 +8,8 @@
    ButtonGroup,
    Select,
    Modal,
-    ModalContent,
    Page,
    notifications,
-    Body,
    Search,
  } from "@budibase/bbui"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
@ -35,7 +33,6 @@
  let updatingModal
  let deletionModal
  let unpublishModal
-  let onboardingModal
  let creatingApp = false
  let loaded = false
  let searchTerm = ""
@ -45,7 +42,6 @@
  $: 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 => ({
@ -273,22 +269,7 @@
  {#if !enrichedApps.length && !creatingApp && loaded}
    <div class="empty-wrapper">
      <Modal inline>
-        <ModalContent
-          title="Create your first app"
-          confirmText="Create app"
-          showCancelButton={false}
-          showCloseIcon={false}
-          onConfirm={initiateAppCreation}
-          size="M"
-        >
-          <div slot="footer">
-            <Button on:click={initiateAppImport} secondary>Import app</Button>
-          </div>
-          <Body size="S">
-            The purpose of the Budibase builder is to help you build beautiful,
-            powerful applications quickly and easily.
-          </Body>
-        </ModalContent>
+        <OnboardingModal />
      </Modal>
    </div>
  {/if}
@ -319,9 +300,6 @@
 </ConfirmDialog>

 <UpdateAppModal app={selectedApp} bind:this={updatingModal} />
-<Modal bind:this={onboardingModal}>
-  <OnboardingModal />
-</Modal>

 <style>
  .title,