Making app creation experience more cohesive, allowing app import even when no apps exist.

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}

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>

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>