From 6a2f711e77c2d7d28ed19d97065eff3eaf1adf22 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 16:15:00 +0100
Subject: [PATCH] Add empty state to apps screen

---
 .../src/pages/builder/portal/_layout.svelte   |   3 +-
 .../pages/builder/portal/apps/index.svelte    | 113 ++++++++++++------
 2 files changed, 81 insertions(+), 35 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index cd2b6ecccc..83657fb790 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -31,7 +31,6 @@
 
   onMount(() => {
     organisation.init()
-    apps.load()
     getInfo()
   })
 
@@ -162,5 +161,7 @@
   }
   .content {
     overflow: auto;
+    display: grid;
+    grid-template-rows: 1fr;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 04f1196b01..37d03a7efa 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -8,8 +8,10 @@
     ButtonGroup,
     Select,
     Modal,
+    ModalContent,
     Page,
     notifications,
+    Body,
   } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import api, { del } from "builderStore/api"
@@ -27,6 +29,8 @@
   let appToDelete
   let creationModal
   let deletionModal
+  let creatingApp = false
+  let loaded = false
 
   const checkKeys = async () => {
     const response = await api.get(`/api/keys/`)
@@ -36,9 +40,20 @@
     }
   }
 
+  const initiateAppCreation = () => {
+    creationModal.show()
+    creatingApp = true
+  }
+
   const initiateAppImport = () => {
     template = { fromFile: true }
     creationModal.show()
+    creatingApp = true
+  }
+
+  const stopAppCreation = () => {
+    template = null
+    creatingApp = false
   }
 
   const openApp = app => {
@@ -73,41 +88,42 @@
     appToDelete = null
   }
 
-  onMount(() => {
+  onMount(async () => {
     checkKeys()
-    apps.load()
+    await apps.load()
+    loaded = true
   })
 </script>
 
 <Page wide>
-  <Layout noPadding>
-    <div class="title">
-      <Heading>Apps</Heading>
-      <ButtonGroup>
-        <Button secondary on:click={initiateAppImport}>Import app</Button>
-        <Button cta on:click={creationModal.show}>Create new app</Button>
-      </ButtonGroup>
-    </div>
-    <div class="filter">
-      <div class="select">
-        <Select quiet placeholder="Filter by groups" />
+  {#if $apps.length}
+    <Layout noPadding>
+      <div class="title">
+        <Heading>Apps</Heading>
+        <ButtonGroup>
+          <Button secondary on:click={initiateAppImport}>Import app</Button>
+          <Button cta on:click={initiateAppCreation}>Create new app</Button>
+        </ButtonGroup>
+      </div>
+      <div class="filter">
+        <div class="select">
+          <Select quiet placeholder="Filter by groups" />
+        </div>
+        <ActionGroup>
+          <ActionButton
+            on:click={() => (layout = "grid")}
+            selected={layout === "grid"}
+            quiet
+            icon="ClassicGridView"
+          />
+          <ActionButton
+            on:click={() => (layout = "table")}
+            selected={layout === "table"}
+            quiet
+            icon="ViewRow"
+          />
+        </ActionGroup>
       </div>
-      <ActionGroup>
-        <ActionButton
-          on:click={() => (layout = "grid")}
-          selected={layout === "grid"}
-          quiet
-          icon="ClassicGridView"
-        />
-        <ActionButton
-          on:click={() => (layout = "table")}
-          selected={layout === "table"}
-          quiet
-          icon="ViewRow"
-        />
-      </ActionGroup>
-    </div>
-    {#if $apps.length}
       <div
         class:appGrid={layout === "grid"}
         class:appTable={layout === "table"}
@@ -123,16 +139,36 @@
           />
         {/each}
       </div>
-    {:else}
-      <div>No apps.</div>
-    {/if}
-  </Layout>
+    </Layout>
+  {/if}
+  {#if !$apps.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>
+      </Modal>
+    </div>
+  {/if}
 </Page>
 <Modal
   bind:this={creationModal}
   padding={false}
   width="600px"
-  on:hide={() => (template = null)}
+  on:hide={stopAppCreation}
 >
   <CreateAppModal {template} />
 </Modal>
@@ -183,4 +219,13 @@
   .appTable :global(> div:not(.last)) {
     border-bottom: var(--border-light);
   }
+
+  .empty-wrapper {
+    flex: 1 1 auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 </style>