MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Reworking implementation to a single modal, that changes content rather than progressing to a new modal.

This commit is contained in:
mike12345567 2023-06-05 17:40:12 +01:00
parent a330e606bf
commit 96f44c0a86
3 changed files with 61 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
View File

@ -1,14 +1,7 @@
<script> <script>
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { import { ModalContent, notifications, Body, Layout } from "@budibase/bbui"
ModalContent,
notifications,
Body,
Layout,
Modal,
} from "@budibase/bbui"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte" import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
import FetchTablesModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
import { IntegrationNames } from "constants/backend" import { IntegrationNames } from "constants/backend"
import cloneDeep from "lodash/cloneDeepWith" import cloneDeep from "lodash/cloneDeepWith"
import { import {
@ -22,13 +15,22 @@
// kill the reference so the input isn't saved // kill the reference so the input isn't saved
let datasource = cloneDeep(integration) let datasource = cloneDeep(integration)
let isValid = false let isValid = false
let fetchTablesModal let fetchTableStep = false
$: name = $: name =
IntegrationNames[datasource.type] || datasource.name || datasource.type IntegrationNames[datasource?.type] || datasource?.name || datasource?.type
$: datasourcePlus = datasource?.plus $: datasourcePlus = datasource?.plus
$: title = fetchTableStep ? "Fetch your tables" : `Connect to ${name}`
$: confirmText = fetchTableStep
? "Continue"
: datasourcePlus
? "Connect"
: "Save and continue to query"
async function validateConfig() { async function validateConfig() {
if (!integration.features[DatasourceFeature.CONNECTION_CHECKING]) {
return true
}
const displayError = message => const displayError = message =>
notifications.error(message ?? "Error validating datasource") notifications.error(message ?? "Error validating datasource")
@ -46,50 +48,61 @@
} }
async function saveDatasource() { async function saveDatasource() {
if (integration.features[DatasourceFeature.CONNECTION_CHECKING]) {
const valid = await validateConfig()
if (!valid) {
return false
}
}
try { try {
if (!datasource.name) { if (!datasource.name) {
datasource.name = name datasource.name = name
} }
const resp = await save(datasource) const resp = await save(datasource)
$goto(`./datasource/${resp._id}`) $goto(`./datasource/${resp._id}`)
notifications.success(`Datasource created successfully.`) notifications.success("Datasource created successfully.")
} catch (err) { } catch (err) {
notifications.error(err?.message ?? "Error saving datasource") notifications.error(err?.message ?? "Error saving datasource")
// prevent the modal from closing // prevent the modal from closing
return false return false
} }
} }
async function nextStep() {
let connected = true
if (datasourcePlus) {
connected = await validateConfig()
}
if (!connected) {
return false
}
if (datasourcePlus) {
notifications.success("Connected to datasource successfully.")
fetchTableStep = true
return false
} else {
await saveDatasource()
return true
}
}
</script> </script>
<Modal bind:this={fetchTablesModal}>
<FetchTablesModal {datasource} onConfirm={saveDatasource} />
</Modal>
<ModalContent <ModalContent
title={`Connect to ${name}`} {title}
onConfirm={() => onConfirm={() => nextStep()}
datasourcePlus ? saveDatasource() : fetchTablesModal.show()} {confirmText}
confirmText={datasourcePlus ? "Connect" : "Save and continue to query"} cancelText={fetchTableStep ? "Cancel" : "Back"}
cancelText="Back"
showSecondaryButton={datasourcePlus} showSecondaryButton={datasourcePlus}
size="L" size="L"
disabled={!isValid} disabled={!isValid}
> >
<Layout noPadding> {#if !fetchTableStep}
<Body size="XS" <Layout noPadding>
>Connect your database to Budibase using the config below. <Body size="XS"
</Body> >Connect your database to Budibase using the config below.
</Layout> </Body>
<IntegrationConfigForm </Layout>
schema={datasource.schema} <IntegrationConfigForm
bind:datasource schema={datasource?.schema}
creating={true} bind:datasource
on:valid={e => (isValid = e.detail)} creating={true}
/> on:valid={e => (isValid = e.detail)}
/>
{:else}
<Body>Some stuff here</Body>
{/if}
</ModalContent> </ModalContent>

21
packages/builder/src/components/backend/DatasourceNavigator/modals/FetchTablesModal.svelte
View File

@ -1,21 +0,0 @@
<script>
import { ModalContent, Body } from "@budibase/bbui"
export let datasource
export let onConfirm
export let prevModal
export let selected = []
</script>
<ModalContent
title={`Fetch your tables`}
{onConfirm}
onCancel={() => prevModal.show()}
confirmText="Continue"
cancelText="Back"
size="L"
disabled={selected.length === 0}
>
<Body>SOME TABLES HERE</Body>
</ModalContent>

11
packages/frontend-core/src/api/datasources.js
View File

@ -69,4 +69,15 @@ export const buildDatasourceEndpoints = API => ({
body: { datasource }, body: { datasource },
}) })
}, },
/**
* Fetch table names available within the datasource, for filtering out undesired tables
* @param datasource the datasource configuration to use for fetching tables
*/
fetchTablesForDatasource: async datasource => {
return await API.post({
url: `/api/datasources/tables`,
body: { datasource },
})
},
}) })