CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-15 11:15:59 +12:00
Code Issues Projects Releases Wiki Activity

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

Browse source 
Fix multiple issues with first app onboarding
This commit is contained in:
Andrew Kingston 2023-05-11 18:25:22 +01:00 committed by GitHub
parent 70705a8519 f7fbce3444
commit 732a051252
1 changed files with 83 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
View file

@ -107,8 +107,9 @@
useSampleData, useSampleData,
isGoogle, isGoogle,
}) => { }) => {
let app
try { try {
const app = await createApp(useSampleData) app = await createApp(useSampleData)
let datasource let datasource
if (datasourceConfig) { if (datasourceConfig) {
@ -134,6 +135,17 @@
console.log(e) console.log(e)
creationLoading = false creationLoading = false
notifications.error("There was a problem creating your app") 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> </script>
@ -146,80 +158,87 @@
/> />
</Modal> </Modal>
<SplitPage> <div class="full-width">
{#if stage === "name"} <SplitPage>
<NamePanel bind:name bind:url onNext={() => (stage = "data")} /> {#if stage === "name"}
{:else if googleComplete} <NamePanel bind:name bind:url onNext={() => (stage = "data")} />
<div class="centered"> {:else if googleComplete}
<Body <div class="centered">
>Please login to your Google account in the new tab which as opened to <Body
continue.</Body >Please login to your Google account in the new tab which as opened to
> continue.</Body
</div> >
{:else if integrationsLoading || creationLoading}
<div class="centered">
<Spinner />
</div>
{:else if stage === "data"}
<DataPanel onBack={() => (stage = "name")}>
<div class="dataButton">
<FancyButton on:click={() => handleCreateApp({ useSampleData: true })}>
<div class="dataButtonContent">
<div class="dataButtonIcon">
<img
alt="Budibase Logo"
class="budibaseLogo"
src={"https://i.imgur.com/Xhdt1YP.png"}
/>
</div>
Budibase Sample data
</div>
</FancyButton>
</div> </div>
<div class="dataButton"> {:else if integrationsLoading || creationLoading}
<FancyButton on:click={uploadModal.show}> <div class="centered">
<div class="dataButtonContent"> <Spinner />
<div class="dataButtonIcon">
<FontAwesomeIcon name="fa-solid fa-file-arrow-up" />
</div>
Upload data (CSV or JSON)
</div>
</FancyButton>
</div> </div>
{#each Object.entries(plusIntegrations) as [integrationType, schema]} {:else if stage === "data"}
<DataPanel onBack={() => (stage = "name")}>
<div class="dataButton"> <div class="dataButton">
<FancyButton on:click={() => (stage = integrationType)}> <FancyButton
on:click={() => handleCreateApp({ useSampleData: true })}
>
<div class="dataButtonContent"> <div class="dataButtonContent">
<div class="dataButtonIcon"> <div class="dataButtonIcon">
<IntegrationIcon {integrationType} {schema} /> <img
alt="Budibase Logo"
class="budibaseLogo"
src={"https://i.imgur.com/Xhdt1YP.png"}
/>
</div> </div>
{schema.friendlyName} Budibase Sample data
</div> </div>
</FancyButton> </FancyButton>
</div> </div>
{/each} <div class="dataButton">
</DataPanel> <FancyButton on:click={uploadModal.show}>
{:else if stage in plusIntegrations} <div class="dataButtonContent">
<DatasourceConfigPanel <div class="dataButtonIcon">
title={plusIntegrations[stage].friendlyName} <FontAwesomeIcon name="fa-solid fa-file-arrow-up" />
fields={plusIntegrations[stage].datasource} </div>
type={stage} Upload data (CSV or JSON)
onBack={() => (stage = "data")} </div>
onNext={data => { </FancyButton>
const isGoogle = data.isGoogle </div>
delete data.isGoogle {#each Object.entries(plusIntegrations) as [integrationType, schema]}
return handleCreateApp({ datasourceConfig: data, isGoogle }) <div class="dataButton">
}} <FancyButton on:click={() => (stage = integrationType)}>
/> <div class="dataButtonContent">
{:else} <div class="dataButtonIcon">
<p>There was an problem. Please refresh the page and try again.</p> <IntegrationIcon {integrationType} {schema} />
{/if} </div>
<div slot="right"> {schema.friendlyName}
<ExampleApp {name} showData={stage !== "name"} /> </div>
</div> </FancyButton>
</SplitPage> </div>
{/each}
</DataPanel>
{:else if stage in plusIntegrations}
<DatasourceConfigPanel
title={plusIntegrations[stage].friendlyName}
fields={plusIntegrations[stage].datasource}
type={stage}
onBack={() => (stage = "data")}
onNext={data => {
const isGoogle = data.isGoogle
delete data.isGoogle
return handleCreateApp({ datasourceConfig: data, isGoogle })
}}
/>
{:else}
<p>There was an problem. Please refresh the page and try again.</p>
{/if}
<div slot="right">
<ExampleApp {name} showData={stage !== "name"} />
</div>
</SplitPage>
</div>
<style> <style>
.full-width {
width: 100%;
}
.centered { .centered {
display: flex; display: flex;
justify-content: center; justify-content: center;