Merge pull request #10551 from Budibase/fix-app-onboarding
Fix multiple issues with first app onboarding
This commit is contained in:
commit
732a051252
1 changed files with 83 additions and 64 deletions
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue