From fbba1b94a8d47aaacfc08974fd4f37d7927abfd0 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 19 Oct 2021 14:06:43 +0100
Subject: [PATCH] Making app creation experience more cohesive, allowing app
 import even when no apps exist.

---
 .../src/components/start/CreateAppModal.svelte | 13 +++++++++++--
 .../src/components/start/TemplateList.svelte   | 18 +++++++++++++++++-
 .../src/pages/builder/portal/apps/index.svelte |  7 -------
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 7c1602a454..e3e8c3515d 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -39,9 +39,11 @@
 
   let submitting = false
   let valid = false
+  let wasShowingTemplates
 
   $: checkValidity($values, validator)
-  $: showTemplateSelection = !template?.fromFile && !template?.key
+  $: showTemplateSelection =
+    !template || (!template?.fromFile && !template?.key)
 
   onMount(async () => {
     await hostingStore.actions.fetchDeployedApps()
@@ -145,15 +147,20 @@
     size="L"
     onConfirm={() => {
       showTemplateSelection = false
+      wasShowingTemplates = true
       return false
     }}
     showCancelButton={false}
     showCloseIcon={false}
   >
     <TemplateList
-      onSelect={selected => {
+      onSelect={(selected, { useImport } = {}) => {
         if (!selected) {
+          if (useImport) {
+            template = { fromFile: true }
+          }
           showTemplateSelection = false
+          wasShowingTemplates = true
           return
         }
 
@@ -166,6 +173,8 @@
     title={template?.fromFile ? "Import app" : "Create app"}
     confirmText={template?.fromFile ? "Import app" : "Create app"}
     onConfirm={createNewApp}
+    onCancel={wasShowingTemplates ? () => (template = null) : null}
+    cancelText={wasShowingTemplates ? "Back" : undefined}
     disabled={!valid}
   >
     {#if template?.fromFile}
diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
index d8e65062b5..2639f86404 100644
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@@ -7,7 +7,6 @@
 
   async function fetchTemplates() {
     const response = await api.get("/api/templates?type=app")
-    console.log("Responded")
     return await response.json()
   }
 
@@ -48,6 +47,19 @@
         <Heading size="XS">Start from scratch</Heading>
         <p class="detail">BLANK</p>
       </div>
+      <div
+        class="template import"
+        on:click={() => onSelect(null, { useImport: true })}
+      >
+        <div
+          class="background-icon"
+          style={`background: rgb(50, 50, 50); color: white;`}
+        >
+          <Icon name="Add" />
+        </div>
+        <Heading size="XS">Import app</Heading>
+        <p class="detail">BLANK</p>
+      </div>
     </div>
   {:catch err}
     <h1 style="color:red">{err}</h1>
@@ -95,4 +107,8 @@
     background: var(--spectrum-global-color-gray-50);
     margin-top: 20px;
   }
+
+  .import {
+    background: var(--spectrum-global-color-gray-50);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 01eaa8281e..319ef91d2e 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -84,12 +84,6 @@
     }
   }
 
-  const initiateAppImport = () => {
-    template = { fromFile: true }
-    creationModal.show()
-    creatingApp = true
-  }
-
   const stopAppCreation = () => {
     template = null
     creatingApp = false
@@ -207,7 +201,6 @@
           {#if cloud}
             <Button secondary on:click={initiateAppsExport}>Export apps</Button>
           {/if}
-          <Button secondary on:click={initiateAppImport}>Import app</Button>
           <Button cta on:click={initiateAppCreation}>Create app</Button>
         </ButtonGroup>
       </div>