Merge pull request #10551 from Budibase/fix-app-onboarding

Fix multiple issues with first app onboarding

packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte

@@ -107,8 +107,9 @@
     useSampleData,
     isGoogle,
   }) => {
+    let app
     try {
-      const app = await createApp(useSampleData)
+      app = await createApp(useSampleData)
 
       let datasource
       if (datasourceConfig) {
@@ -134,6 +135,17 @@
       console.log(e)
       creationLoading = false
       notifications.error("There was a problem creating your app")
+
+      // Reset the store so that we don't send up stale headers
+      store.actions.reset()
+
+      // If we successfully created an app, delete it again so that we
+      // can try again once the error has been corrected.
+      // This also ensures onboarding can't be skipped by entering invalid
+      // data credentials.
+      if (app?.appId) {
+        await API.deleteApp(app.appId)
+      }
     }
   }
 </script>
@@ -146,6 +158,7 @@
   />
 </Modal>
 
+<div class="full-width">
   <SplitPage>
     {#if stage === "name"}
       <NamePanel bind:name bind:url onNext={() => (stage = "data")} />
@@ -163,7 +176,9 @@
     {:else if stage === "data"}
       <DataPanel onBack={() => (stage = "name")}>
         <div class="dataButton">
-        <FancyButton on:click={() => handleCreateApp({ useSampleData: true })}>
+          <FancyButton
+            on:click={() => handleCreateApp({ useSampleData: true })}
+          >
             <div class="dataButtonContent">
               <div class="dataButtonIcon">
                 <img
@@ -218,8 +233,12 @@
       <ExampleApp {name} showData={stage !== "name"} />
     </div>
   </SplitPage>
+</div>
 
 <style>
+  .full-width {
+    width: 100%;
+  }
   .centered {
     display: flex;
     justify-content: center;