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

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

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