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

6538 - add validation to datasource config modal

This commit is contained in:
Maurits Lourens 2022-07-07 23:06:57 +02:00 committed by Mel O'Hagan
parent c737168718
commit c1ac00840c
3 changed files with 50 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
View File

@ -10,10 +10,14 @@
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte" import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import { capitalise } from "helpers" import { capitalise } from "helpers"
import { IntegrationTypes } from "constants/backend" import { IntegrationTypes } from "constants/backend"
import { createValidationStore } from "helpers/validation/yup"
import { createEventDispatcher } from "svelte"
export let datasource export let datasource
export let schema export let schema
export let creating export let creating
const validation = createValidationStore()
const dispatch = createEventDispatcher()
function filter([key, value]) { function filter([key, value]) {
if (!value) { if (!value) {
@ -31,6 +35,17 @@
.filter(el => filter(el)) .filter(el => filter(el))
.map(([key]) => key) .map(([key]) => key)
// setup the validation for each required field
$: configKeys.forEach(key => {
if (schema[key].required) {
validation.addValidatorType(key, schema[key].type, schema[key].required)
}
})
// run the validation whenever the config changes
$: validation.check(config)
// dispatch the validation result
$: dispatch("valid", $validation.valid)
let addButton let addButton
function getDisplayName(key) { function getDisplayName(key) {
@ -79,6 +94,9 @@
type={schema[configKey].type} type={schema[configKey].type}
on:change on:change
bind:value={config[configKey]} bind:value={config[configKey]}
on:blur={($validation.touched[configKey] = true)}
error={$validation.touched[configKey] &&
$validation.errors[configKey]}
/> />
</div> </div>
{:else} {:else}
@ -88,6 +106,9 @@
type={schema[configKey].type} type={schema[configKey].type}
on:change on:change
bind:value={config[configKey]} bind:value={config[configKey]}
on:blur={($validation.touched[configKey] = true)}
error={$validation.touched[configKey] &&
$validation.errors[configKey]}
/> />
</div> </div>
{/if} {/if}

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

@ -13,6 +13,7 @@
// 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 skipFetch = false let skipFetch = false
let isValid = false
$: name = $: name =
IntegrationNames[datasource.type] || datasource.name || datasource.type IntegrationNames[datasource.type] || datasource.name || datasource.type
@ -53,6 +54,7 @@
return true return true
}} }}
size="L" size="L"
disabled={!isValid}
> >
<Layout noPadding> <Layout noPadding>
<Body size="XS" <Body size="XS"
@ -63,5 +65,6 @@
schema={datasource.schema} schema={datasource.schema}
bind:datasource bind:datasource
creating={true} creating={true}
on:valid={e => (isValid = e.detail)}
/> />
</ModalContent> </ModalContent>

27
packages/builder/src/helpers/validation/yup/index.js
View File

@ -1,5 +1,5 @@
import { capitalise } from "helpers" import { capitalise } from "helpers"
import { object } from "yup" import { object, string, number } from "yup"
import { writable, get } from "svelte/store" import { writable, get } from "svelte/store"
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
@ -20,6 +20,30 @@ export const createValidationStore = () => {
validator[propertyName] = propertyValidator validator[propertyName] = propertyValidator
} }
const addValidatorType = (propertyName, type, required) => {
if (!type || !propertyName) {
return
}
let propertyValidator
switch (type) {
case "number":
propertyValidator = number()
break
case "email":
propertyValidator = string().email()
break
default:
propertyValidator = string()
}
if (required) {
propertyValidator = propertyValidator.required()
}
validator[propertyName] = propertyValidator
}
const check = async values => { const check = async values => {
const obj = object().shape(validator) const obj = object().shape(validator)
// clear the previous errors // clear the previous errors
@ -62,5 +86,6 @@ export const createValidationStore = () => {
set: validation.set, set: validation.set,
check, check,
addValidator, addValidator,
addValidatorType,
} }
} }