Refactor Datasource Creation Modal (#10783)
This commit is contained in:
Gerard Burns
GitHub
parent
798d5d13ab
commit
1606ca0c84
|
|
@ -12,7 +12,6 @@
|
|||
const dispatch = createEventDispatcher()
|
||||
|
||||
$: updateSelected(selectedBooleans)
|
||||
$: dispatch("change", selected)
|
||||
$: allSelected = selected?.length === options.length
|
||||
$: noneSelected = !selected?.length
|
||||
|
||||
|
|
@ -28,6 +27,7 @@
|
|||
}
|
||||
}
|
||||
selected = array
|
||||
dispatch("change", selected)
|
||||
}
|
||||
|
||||
function toggleSelectAll() {
|
||||
|
|
@ -36,6 +36,7 @@
|
|||
} else {
|
||||
selectedBooleans = reset()
|
||||
}
|
||||
dispatch("change", selected)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
"dev:builder": "routify -c dev:vite",
|
||||
"dev:vite": "vite --host 0.0.0.0",
|
||||
"rollup": "rollup -c -w",
|
||||
"test": "vitest run"
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest"
|
||||
},
|
||||
"jest": {
|
||||
"globals": {
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { Heading, Detail } from "@budibase/bbui"
|
||||
import IntegrationIcon from "../IntegrationIcon.svelte"
|
||||
|
||||
export let integration
|
||||
export let integrationType
|
||||
export let schema
|
||||
|
||||
let dispatcher = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div
|
||||
class:selected={integration.type === integrationType}
|
||||
on:click={() => dispatcher("selected", integrationType)}
|
||||
class="item hoverable"
|
||||
>
|
||||
<div class="item-body" class:with-type={!!schema.type}>
|
||||
<IntegrationIcon {integrationType} {schema} size="25" />
|
||||
<div class="text">
|
||||
<Heading size="XXS">{schema.friendlyName}</Heading>
|
||||
{#if schema.type}
|
||||
<Detail size="S">{schema.type || ""}</Detail>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
|
||||
padding: var(--spectrum-alias-item-padding-s)
|
||||
var(--spectrum-alias-item-padding-m);
|
||||
background: var(--spectrum-alias-background-color-secondary);
|
||||
transition: background 0.13s ease-out;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
border-width: 2px;
|
||||
}
|
||||
.item:hover,
|
||||
.item.selected {
|
||||
background: var(--spectrum-alias-background-color-tertiary);
|
||||
}
|
||||
|
||||
.item-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.item-body.with-type {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.item-body.with-type :global(svg) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
<script>
|
||||
export let width = 100
|
||||
export let height = 100
|
||||
</script>
|
||||
|
||||
<svg
|
||||
{width}
|
||||
{height}
|
||||
viewBox="0 0 46 46"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
|
||||
>
|
||||
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>btn_google_dark_normal_ios</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<filter
|
||||
x="-50%"
|
||||
y="-50%"
|
||||
width="200%"
|
||||
height="200%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-1"
|
||||
>
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||
<feGaussianBlur
|
||||
stdDeviation="0.5"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
/>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.168 0"
|
||||
in="shadowBlurOuter1"
|
||||
type="matrix"
|
||||
result="shadowMatrixOuter1"
|
||||
/>
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2" />
|
||||
<feGaussianBlur
|
||||
stdDeviation="0.5"
|
||||
in="shadowOffsetOuter2"
|
||||
result="shadowBlurOuter2"
|
||||
/>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.084 0"
|
||||
in="shadowBlurOuter2"
|
||||
type="matrix"
|
||||
result="shadowMatrixOuter2"
|
||||
/>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1" />
|
||||
<feMergeNode in="shadowMatrixOuter2" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<rect id="path-2" x="0" y="0" width="40" height="40" rx="2" />
|
||||
<rect id="path-3" x="5" y="5" width="38" height="38" rx="1" />
|
||||
</defs>
|
||||
<g
|
||||
id="Google-Button"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
sketch:type="MSPage"
|
||||
>
|
||||
<g
|
||||
id="9-PATCH"
|
||||
sketch:type="MSArtboardGroup"
|
||||
transform="translate(-608.000000, -219.000000)"
|
||||
/>
|
||||
<g
|
||||
id="btn_google_dark_normal"
|
||||
sketch:type="MSArtboardGroup"
|
||||
transform="translate(-1.000000, -1.000000)"
|
||||
>
|
||||
<g
|
||||
id="button"
|
||||
sketch:type="MSLayerGroup"
|
||||
transform="translate(4.000000, 4.000000)"
|
||||
filter="url(#filter-1)"
|
||||
>
|
||||
<g id="button-bg">
|
||||
<use
|
||||
fill="#4285F4"
|
||||
fill-rule="evenodd"
|
||||
sketch:type="MSShapeGroup"
|
||||
xlink:href="#path-2"
|
||||
/>
|
||||
<use fill="none" xlink:href="#path-2" />
|
||||
<use fill="none" xlink:href="#path-2" />
|
||||
<use fill="none" xlink:href="#path-2" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="button-bg-copy">
|
||||
<use
|
||||
fill="#FFFFFF"
|
||||
fill-rule="evenodd"
|
||||
sketch:type="MSShapeGroup"
|
||||
xlink:href="#path-3"
|
||||
/>
|
||||
<use fill="none" xlink:href="#path-3" />
|
||||
<use fill="none" xlink:href="#path-3" />
|
||||
<use fill="none" xlink:href="#path-3" />
|
||||
</g>
|
||||
<g
|
||||
id="logo_googleg_48dp"
|
||||
sketch:type="MSLayerGroup"
|
||||
transform="translate(15.000000, 15.000000)"
|
||||
>
|
||||
<path
|
||||
d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z"
|
||||
id="Shape"
|
||||
fill="#4285F4"
|
||||
sketch:type="MSShapeGroup"
|
||||
/>
|
||||
<path
|
||||
d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z"
|
||||
id="Shape"
|
||||
fill="#34A853"
|
||||
sketch:type="MSShapeGroup"
|
||||
/>
|
||||
<path
|
||||
d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z"
|
||||
id="Shape"
|
||||
fill="#FBBC05"
|
||||
sketch:type="MSShapeGroup"
|
||||
/>
|
||||
<path
|
||||
d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z"
|
||||
id="Shape"
|
||||
fill="#EA4335"
|
||||
sketch:type="MSShapeGroup"
|
||||
/>
|
||||
<path
|
||||
d="M0,0 L18,0 L18,18 L0,18 L0,0 Z"
|
||||
id="Shape"
|
||||
sketch:type="MSShapeGroup"
|
||||
/>
|
||||
</g>
|
||||
<g id="handles_square" sketch:type="MSLayerGroup" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
Body,
|
||||
FancyCheckboxGroup,
|
||||
InlineAlert,
|
||||
Layout,
|
||||
Link,
|
||||
ModalContent,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import { IntegrationNames, IntegrationTypes } from "constants/backend"
|
||||
import GoogleButton from "../_components/GoogleButton.svelte"
|
||||
import { organisation } from "stores/portal"
|
||||
import { onDestroy, onMount } from "svelte"
|
||||
import {
|
||||
getDatasourceInfo,
|
||||
saveDatasource,
|
||||
validateDatasourceConfig,
|
||||
} from "builderStore/datasource"
|
||||
import cloneDeep from "lodash/cloneDeepWith"
|
||||
import IntegrationConfigForm from "../TableIntegrationMenu/IntegrationConfigForm.svelte"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { DatasourceFeature } from "@budibase/types"
|
||||
import { API } from "api"
|
||||
|
||||
export let integration
|
||||
export let continueSetupId = false
|
||||
|
||||
let datasource = cloneDeep(integration)
|
||||
datasource.config.continueSetupId = continueSetupId
|
||||
|
||||
let { schema } = datasource
|
||||
|
||||
$: isGoogleConfigured = !!$organisation.googleDatasourceConfigured
|
||||
|
||||
onMount(async () => {
|
||||
await organisation.init()
|
||||
})
|
||||
|
||||
const integrationName = IntegrationNames[IntegrationTypes.GOOGLE_SHEETS]
|
||||
|
||||
export const GoogleDatasouceConfigStep = {
|
||||
AUTH: "auth",
|
||||
SET_URL: "set_url",
|
||||
SET_SHEETS: "set_sheets",
|
||||
}
|
||||
|
||||
let step = continueSetupId
|
||||
? GoogleDatasouceConfigStep.SET_URL
|
||||
: GoogleDatasouceConfigStep.AUTH
|
||||
|
||||
let isValid = false
|
||||
|
||||
let allSheets
|
||||
let selectedSheets
|
||||
let setSheetsErrorTitle, setSheetsErrorMessage
|
||||
|
||||
$: modalConfig = {
|
||||
[GoogleDatasouceConfigStep.AUTH]: {
|
||||
title: `Connect to ${integrationName}`,
|
||||
},
|
||||
[GoogleDatasouceConfigStep.SET_URL]: {
|
||||
title: `Connect your spreadsheet`,
|
||||
confirmButtonText: "Connect",
|
||||
onConfirm: async () => {
|
||||
const checkConnection =
|
||||
integration.features[DatasourceFeature.CONNECTION_CHECKING]
|
||||
if (checkConnection) {
|
||||
const resp = await validateDatasourceConfig(datasource)
|
||||
if (!resp.connected) {
|
||||
notifications.error(`Unable to connect - ${resp.error}`)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
datasource = await saveDatasource(datasource, {
|
||||
tablesFilter: selectedSheets,
|
||||
skipFetch: true,
|
||||
})
|
||||
} catch (err) {
|
||||
notifications.error(err?.message ?? "Error saving datasource")
|
||||
// prevent the modal from closing
|
||||
return false
|
||||
}
|
||||
|
||||
if (!integration.features[DatasourceFeature.FETCH_TABLE_NAMES]) {
|
||||
notifications.success(`Datasource created successfully.`)
|
||||
return
|
||||
}
|
||||
|
||||
const info = await getDatasourceInfo(datasource)
|
||||
allSheets = info.tableNames
|
||||
|
||||
step = GoogleDatasouceConfigStep.SET_SHEETS
|
||||
notifications.success(
|
||||
checkConnection
|
||||
? "Connection Successful"
|
||||
: `Datasource created successfully.`
|
||||
)
|
||||
|
||||
// prevent the modal from closing
|
||||
return false
|
||||
},
|
||||
},
|
||||
[GoogleDatasouceConfigStep.SET_SHEETS]: {
|
||||
title: `Choose your sheets`,
|
||||
confirmButtonText: selectedSheets?.length
|
||||
? "Fetch sheets"
|
||||
: "Continue without fetching",
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
if (selectedSheets.length) {
|
||||
await API.buildDatasourceSchema({
|
||||
datasourceId: datasource._id,
|
||||
tablesFilter: selectedSheets,
|
||||
})
|
||||
}
|
||||
|
||||
return
|
||||
} catch (err) {
|
||||
const message = err?.message ?? "Error fetching the sheets"
|
||||
// Handling message with format: Error title - error description
|
||||
const indexSeparator = message.indexOf(" - ")
|
||||
if (indexSeparator >= 0) {
|
||||
setSheetsErrorTitle = message.substr(0, indexSeparator)
|
||||
setSheetsErrorMessage =
|
||||
message[indexSeparator + 3].toUpperCase() +
|
||||
message.substr(indexSeparator + 4)
|
||||
} else {
|
||||
setSheetsErrorTitle = null
|
||||
setSheetsErrorMessage = message
|
||||
}
|
||||
|
||||
// prevent the modal from closing
|
||||
return false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// This will handle the user closing the modal pressing outside the modal
|
||||
onDestroy(() => {
|
||||
if (step === GoogleDatasouceConfigStep.SET_SHEETS) {
|
||||
$goto(`./datasource/${datasource._id}`)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title={modalConfig[step].title}
|
||||
cancelText="Cancel"
|
||||
size="L"
|
||||
confirmText={modalConfig[step].confirmButtonText}
|
||||
showConfirmButton={!!modalConfig[step].onConfirm}
|
||||
onConfirm={modalConfig[step].onConfirm}
|
||||
disabled={!isValid}
|
||||
>
|
||||
{#if step === GoogleDatasouceConfigStep.AUTH}
|
||||
<!-- check true and false directly, don't render until flag is set -->
|
||||
{#if isGoogleConfigured === true}
|
||||
<Layout noPadding>
|
||||
<Body size="S"
|
||||
>Authenticate with your google account to use the {integrationName} integration.</Body
|
||||
>
|
||||
</Layout>
|
||||
<GoogleButton samePage />
|
||||
{:else if isGoogleConfigured === false}
|
||||
<Body size="S"
|
||||
>Google authentication is not enabled, please complete Google SSO
|
||||
configuration.</Body
|
||||
>
|
||||
<Link href="/builder/portal/settings/auth">Configure Google SSO</Link>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if step === GoogleDatasouceConfigStep.SET_URL}
|
||||
<Layout noPadding no>
|
||||
<Body size="S">Add the URL of the sheet you want to connect.</Body>
|
||||
|
||||
<IntegrationConfigForm
|
||||
{schema}
|
||||
bind:datasource
|
||||
creating={true}
|
||||
on:valid={e => (isValid = e.detail)}
|
||||
/>
|
||||
</Layout>
|
||||
{/if}
|
||||
{#if step === GoogleDatasouceConfigStep.SET_SHEETS}
|
||||
<Layout noPadding no>
|
||||
<Body size="S">Select which spreadsheets you want to connect.</Body>
|
||||
|
||||
<FancyCheckboxGroup
|
||||
options={allSheets}
|
||||
bind:selected={selectedSheets}
|
||||
selectAllText="Select all sheets"
|
||||
/>
|
||||
|
||||
{#if setSheetsErrorTitle || setSheetsErrorMessage}
|
||||
<InlineAlert
|
||||
type="error"
|
||||
header={setSheetsErrorTitle}
|
||||
message={setSheetsErrorMessage}
|
||||
/>
|
||||
{/if}
|
||||
</Layout>
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import ObjectField from "./fields/Object.svelte"
|
||||
import BooleanField from "./fields/Boolean.svelte"
|
||||
import LongFormField from "./fields/LongForm.svelte"
|
||||
import FieldGroupField from "./fields/FieldGroup.svelte"
|
||||
import StringField from "./fields/String.svelte"
|
||||
|
||||
export let type
|
||||
export let value
|
||||
export let error
|
||||
export let name
|
||||
export let showModal = () => {}
|
||||
|
||||
const selectComponent = type => {
|
||||
if (type === "object") {
|
||||
return ObjectField
|
||||
} else if (type === "boolean") {
|
||||
return BooleanField
|
||||
} else if (type === "longForm") {
|
||||
return LongFormField
|
||||
} else if (type === "fieldGroup") {
|
||||
return FieldGroupField
|
||||
} else {
|
||||
return StringField
|
||||
}
|
||||
}
|
||||
|
||||
$: component = selectComponent(type)
|
||||
</script>
|
||||
|
||||
<svelte:component
|
||||
this={component}
|
||||
{type}
|
||||
{value}
|
||||
{error}
|
||||
{name}
|
||||
{showModal}
|
||||
on:blur
|
||||
on:change
|
||||
/>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { Label, Toggle } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
export let name
|
||||
</script>
|
||||
|
||||
<div class="form-row">
|
||||
<Label>{name}</Label>
|
||||
<Toggle on:blur on:change text="" {value} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 1fr;
|
||||
grid-gap: var(--spacing-l);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { Label, Input, Layout, Accordion } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
export let name
|
||||
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
const handleChange = (updatedFieldKey, updatedFieldValue) => {
|
||||
const updatedValue = value.map(field => {
|
||||
return {
|
||||
key: field.key,
|
||||
value: field.key === updatedFieldKey ? updatedFieldValue : field.value,
|
||||
}
|
||||
})
|
||||
|
||||
dispatch("change", updatedValue)
|
||||
}
|
||||
</script>
|
||||
|
||||
<Accordion
|
||||
initialOpen={Object.values(value).some(properties => !!properties.value)}
|
||||
header={name}
|
||||
>
|
||||
<Layout gap="S">
|
||||
{#each value as field}
|
||||
<div class="form-row">
|
||||
<Label>{field.name}</Label>
|
||||
<Input
|
||||
type={field.type}
|
||||
on:change={e => handleChange(field.key, e.detail)}
|
||||
value={field.value}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</Accordion>
|
||||
|
||||
<style>
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 1fr;
|
||||
grid-gap: var(--spacing-l);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script>
|
||||
import { Label, TextArea } from "@budibase/bbui"
|
||||
|
||||
export let type
|
||||
export let name
|
||||
export let value
|
||||
export let error
|
||||
</script>
|
||||
|
||||
<div class="form-row">
|
||||
<Label>{name}</Label>
|
||||
<TextArea on:blur on:change {type} {value} {error} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 1fr;
|
||||
grid-gap: var(--spacing-l);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<script>
|
||||
import { Label, Button } from "@budibase/bbui"
|
||||
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
|
||||
|
||||
export let name
|
||||
export let value
|
||||
|
||||
let addButton
|
||||
</script>
|
||||
|
||||
<div class="form-row ssl">
|
||||
<Label>{name}</Label>
|
||||
<Button secondary thin outline on:click={addButton.addEntry()}>Add</Button>
|
||||
</div>
|
||||
<KeyValueBuilder
|
||||
on:change
|
||||
on:blur
|
||||
bind:this={addButton}
|
||||
defaults={value}
|
||||
noAddButton={true}
|
||||
/>
|
||||
|
||||
<style>
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 1fr;
|
||||
grid-gap: var(--spacing-l);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-row.ssl {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 20%;
|
||||
grid-gap: var(--spacing-l);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<script>
|
||||
import { Label, EnvDropdown } from "@budibase/bbui"
|
||||
import { environment, licensing } from "stores/portal"
|
||||
|
||||
export let type
|
||||
export let name
|
||||
export let value
|
||||
export let error
|
||||
export let showModal = () => {}
|
||||
|
||||
async function handleUpgradePanel() {
|
||||
await environment.upgradePanelOpened()
|
||||
$licensing.goToUpgradePage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="form-row">
|
||||
<Label>{name}</Label>
|
||||
<EnvDropdown
|
||||
on:change
|
||||
on:blur
|
||||
type={type === "port" ? "string" : type}
|
||||
{value}
|
||||
{error}
|
||||
variables={$environment.variables}
|
||||
environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
|
||||
{showModal}
|
||||
{handleUpgradePanel}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 1fr;
|
||||
grid-gap: var(--spacing-l);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<script>
|
||||
import {
|
||||
Modal,
|
||||
notifications,
|
||||
Body,
|
||||
Layout,
|
||||
ModalContent,
|
||||
} from "@budibase/bbui"
|
||||
import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
|
||||
import ConfigInput from "./ConfigInput.svelte"
|
||||
import { createConfigStore } from "./stores/config"
|
||||
import { createValidationStore } from "./stores/validation"
|
||||
import { createValidatedConfigStore } from "./stores/validatedConfig"
|
||||
import { datasources } from "stores/backend"
|
||||
import { get } from "svelte/store"
|
||||
import { environment } from "stores/portal"
|
||||
|
||||
export let integration
|
||||
export let config
|
||||
export let onDatasourceCreated = () => {}
|
||||
|
||||
$: configStore = createConfigStore(integration, config)
|
||||
$: validationStore = createValidationStore(integration)
|
||||
$: validatedConfigStore = createValidatedConfigStore(
|
||||
configStore,
|
||||
validationStore,
|
||||
integration
|
||||
)
|
||||
|
||||
const handleConfirm = async () => {
|
||||
validationStore.markAllFieldsActive()
|
||||
const config = get(configStore)
|
||||
|
||||
try {
|
||||
if (await validationStore.validate(config)) {
|
||||
const datasource = await datasources.create({
|
||||
integration,
|
||||
fields: config,
|
||||
})
|
||||
await onDatasourceCreated(datasource)
|
||||
} else {
|
||||
notifications.send("Invalid fields", {
|
||||
type: "error",
|
||||
icon: "Alert",
|
||||
autoDismiss: true,
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
// Do nothing on errors, alerts are handled by `datasources.create`
|
||||
}
|
||||
|
||||
// Prevent modal closing
|
||||
return false
|
||||
}
|
||||
|
||||
const handleBlur = key => {
|
||||
validationStore.markFieldActive(key)
|
||||
validationStore.validate(get(configStore))
|
||||
}
|
||||
|
||||
const handleChange = (key, newValue) => {
|
||||
configStore.updateFieldValue(key, newValue)
|
||||
validationStore.validate(get(configStore))
|
||||
}
|
||||
|
||||
let createVariableModal
|
||||
let selectedConfigKey
|
||||
|
||||
const showModal = key => {
|
||||
selectedConfigKey = key
|
||||
createVariableModal.show()
|
||||
}
|
||||
|
||||
async function save(data) {
|
||||
try {
|
||||
await environment.createVariable(data)
|
||||
configStore.updateFieldValue(selectedConfigKey, `{{ env.${data.name} }}`)
|
||||
createVariableModal.hide()
|
||||
} catch (err) {
|
||||
notifications.error(`Failed to create variable: ${err.message}`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title={`Connect to ${integration.friendlyName}`}
|
||||
onConfirm={handleConfirm}
|
||||
confirmText={integration.plus ? "Connect" : "Save and continue to query"}
|
||||
cancelText="Back"
|
||||
disabled={$validationStore.allFieldsActive && $validationStore.invalid}
|
||||
size="L"
|
||||
>
|
||||
<Layout noPadding>
|
||||
<Body size="XS">
|
||||
Connect your database to Budibase using the config below.
|
||||
</Body>
|
||||
</Layout>
|
||||
|
||||
{#each $validatedConfigStore as { type, key, value, error, name }}
|
||||
<ConfigInput
|
||||
{type}
|
||||
{value}
|
||||
{error}
|
||||
{name}
|
||||
showModal={() => showModal(key)}
|
||||
on:blur={() => handleBlur(key)}
|
||||
on:change={e => handleChange(key, e.detail)}
|
||||
/>
|
||||
{/each}
|
||||
</ModalContent>
|
||||
|
||||
<Modal bind:this={createVariableModal}>
|
||||
<CreateEditVariableModal {save} />
|
||||
</Modal>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { writable } from "svelte/store"
|
||||
|
||||
export const createConfigStore = (integration, config) => {
|
||||
const configStore = writable(config)
|
||||
|
||||
const updateFieldValue = (key, value) => {
|
||||
configStore.update($configStore => {
|
||||
const newStore = { ...$configStore }
|
||||
|
||||
if (integration.datasource[key].type === "fieldGroup") {
|
||||
value.forEach(field => {
|
||||
newStore[field.key] = field.value
|
||||
})
|
||||
} else {
|
||||
newStore[key] = value
|
||||
}
|
||||
|
||||
return newStore
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe: configStore.subscribe,
|
||||
updateFieldValue,
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { capitalise } from "helpers"
|
||||
import { derived } from "svelte/store"
|
||||
|
||||
export const createValidatedConfigStore = (
|
||||
configStore,
|
||||
validationStore,
|
||||
integration
|
||||
) => {
|
||||
return derived(
|
||||
[configStore, validationStore],
|
||||
([$configStore, $validationStore]) => {
|
||||
return Object.entries(integration.datasource).map(([key, properties]) => {
|
||||
const getValue = () => {
|
||||
if (properties.type === "fieldGroup") {
|
||||
return Object.entries(properties.fields).map(
|
||||
([fieldKey, fieldProperties]) => {
|
||||
return {
|
||||
key: fieldKey,
|
||||
name: capitalise(fieldProperties.display || fieldKey),
|
||||
type: fieldProperties.type,
|
||||
value: $configStore[fieldKey],
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return $configStore[key]
|
||||
}
|
||||
|
||||
return {
|
||||
key,
|
||||
value: getValue(),
|
||||
error: $validationStore.errors[key],
|
||||
name: capitalise(properties.display || key),
|
||||
type: properties.type,
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { capitalise } from "helpers"
|
||||
import { object, string, number } from "yup"
|
||||
import { derived, writable, get } from "svelte/store"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
|
||||
const propertyValidator = type => {
|
||||
if (type === "number") {
|
||||
return number().nullable()
|
||||
}
|
||||
|
||||
if (type === "email") {
|
||||
return string().email().nullable()
|
||||
}
|
||||
|
||||
return string().nullable()
|
||||
}
|
||||
|
||||
const getValidatorFields = integration => {
|
||||
const validatorFields = {}
|
||||
|
||||
Object.entries(integration?.datasource || {}).forEach(([key, properties]) => {
|
||||
if (properties.required) {
|
||||
validatorFields[key] = propertyValidator(properties.type).required()
|
||||
} else {
|
||||
validatorFields[key] = propertyValidator(properties.type).notRequired()
|
||||
}
|
||||
})
|
||||
|
||||
return validatorFields
|
||||
}
|
||||
|
||||
export const createValidationStore = integration => {
|
||||
const allValidators = getValidatorFields(integration)
|
||||
const selectedValidatorsStore = writable({})
|
||||
const errorsStore = writable({})
|
||||
|
||||
const markAllFieldsActive = () => {
|
||||
selectedValidatorsStore.set(allValidators)
|
||||
}
|
||||
|
||||
const markFieldActive = key => {
|
||||
selectedValidatorsStore.update($validatorsStore => ({
|
||||
...$validatorsStore,
|
||||
[key]: allValidators[key],
|
||||
}))
|
||||
}
|
||||
|
||||
const validate = async config => {
|
||||
try {
|
||||
await object()
|
||||
.shape(get(selectedValidatorsStore))
|
||||
.validate(config, { abortEarly: false })
|
||||
|
||||
errorsStore.set({})
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
// Yup error
|
||||
if (error.inner) {
|
||||
const errors = {}
|
||||
|
||||
error.inner.forEach(innerError => {
|
||||
errors[innerError.path] = capitalise(innerError.message)
|
||||
})
|
||||
|
||||
errorsStore.set(errors)
|
||||
} else {
|
||||
// Non-yup error
|
||||
notifications.error("Unexpected validation error")
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const combined = derived(
|
||||
[errorsStore, selectedValidatorsStore],
|
||||
([$errorsStore, $selectedValidatorsStore]) => {
|
||||
return {
|
||||
errors: $errorsStore,
|
||||
invalid: Object.keys($errorsStore).length > 0,
|
||||
allFieldsActive:
|
||||
Object.keys($selectedValidatorsStore).length ===
|
||||
Object.keys(allValidators).length,
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
subscribe: combined.subscribe,
|
||||
markAllFieldsActive,
|
||||
markFieldActive,
|
||||
validate,
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<script>
|
||||
import { ModalContent, Body, Layout, Link } from "@budibase/bbui"
|
||||
import { organisation } from "stores/portal"
|
||||
import GoogleButton from "./GoogleButton.svelte"
|
||||
|
||||
$: isGoogleConfigured = !!$organisation.googleDatasourceConfigured
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
showConfirmButton={false}
|
||||
title={`Connect to Google Sheets`}
|
||||
cancelText="Cancel"
|
||||
size="L"
|
||||
>
|
||||
<!-- check true and false directly, don't render until flag is set -->
|
||||
{#if isGoogleConfigured === true}
|
||||
<Layout noPadding>
|
||||
<Body size="S"
|
||||
>Authenticate with your Google account to use the Google Sheets
|
||||
integration.</Body
|
||||
>
|
||||
</Layout>
|
||||
<GoogleButton samePage />
|
||||
{:else if isGoogleConfigured === false}
|
||||
<Body size="S"
|
||||
>Google authentication is not enabled, please complete Google SSO
|
||||
configuration.</Body
|
||||
>
|
||||
<Link href="/builder/portal/settings/auth">Configure Google SSO</Link>
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<script>
|
||||
import {
|
||||
Body,
|
||||
FancyCheckboxGroup,
|
||||
InlineAlert,
|
||||
Layout,
|
||||
ModalContent,
|
||||
} from "@budibase/bbui"
|
||||
import { IntegrationTypes } from "constants/backend"
|
||||
import { createTableSelectionStore } from "./tableSelectionStore"
|
||||
|
||||
export let integration
|
||||
export let datasource
|
||||
export let onComplete = () => {}
|
||||
|
||||
$: store = createTableSelectionStore(integration, datasource)
|
||||
|
||||
$: isSheets = integration.name === IntegrationTypes.GOOGLE_SHEETS
|
||||
$: tableType = isSheets ? "sheets" : "tables"
|
||||
$: title = `Choose your ${tableType}`
|
||||
|
||||
$: confirmText = $store.hasSelected
|
||||
? `Fetch ${tableType}`
|
||||
: "Continue without fetching"
|
||||
|
||||
$: description = isSheets
|
||||
? "Select which spreadsheets you want to connect."
|
||||
: "Choose what tables you want to sync with Budibase"
|
||||
|
||||
$: selectAllText = isSheets ? "Select all sheets" : "Select all"
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
{title}
|
||||
cancelText="Cancel"
|
||||
size="L"
|
||||
{confirmText}
|
||||
onConfirm={() => store.importSelectedTables(onComplete)}
|
||||
disabled={$store.loading}
|
||||
>
|
||||
{#if $store.loading}
|
||||
<p>loading...</p>
|
||||
{:else}
|
||||
<Layout noPadding no>
|
||||
<Body size="S">{description}</Body>
|
||||
|
||||
<FancyCheckboxGroup
|
||||
options={$store.tableNames}
|
||||
selected={$store.selectedTableNames}
|
||||
on:change={e => store.setSelectedTableNames(e.detail)}
|
||||
{selectAllText}
|
||||
/>
|
||||
{#if $store.error}
|
||||
<InlineAlert
|
||||
type="error"
|
||||
header={$store.error.title}
|
||||
message={$store.error.description}
|
||||
/>
|
||||
{/if}
|
||||
</Layout>
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { derived, writable, get } from "svelte/store"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import { datasources, ImportTableError } from "stores/backend"
|
||||
|
||||
export const createTableSelectionStore = (integration, datasource) => {
|
||||
const tableNamesStore = writable([])
|
||||
const selectedTableNamesStore = writable([])
|
||||
const errorStore = writable(null)
|
||||
const loadingStore = writable(true)
|
||||
|
||||
datasources.getTableNames(datasource).then(tableNames => {
|
||||
tableNamesStore.set(tableNames)
|
||||
selectedTableNamesStore.set(tableNames)
|
||||
loadingStore.set(false)
|
||||
})
|
||||
|
||||
const setSelectedTableNames = selectedTableNames => {
|
||||
selectedTableNamesStore.set(selectedTableNames)
|
||||
}
|
||||
|
||||
const importSelectedTables = async onComplete => {
|
||||
errorStore.set(null)
|
||||
|
||||
try {
|
||||
await datasources.updateSchema(datasource, get(selectedTableNamesStore))
|
||||
|
||||
notifications.success(`Tables fetched successfully.`)
|
||||
await onComplete()
|
||||
} catch (err) {
|
||||
if (err instanceof ImportTableError) {
|
||||
errorStore.set(err)
|
||||
} else {
|
||||
notifications.error("Error fetching tables.")
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent modal closing
|
||||
return false
|
||||
}
|
||||
|
||||
const combined = derived(
|
||||
[tableNamesStore, selectedTableNamesStore, errorStore, loadingStore],
|
||||
([
|
||||
$tableNamesStore,
|
||||
$selectedTableNamesStore,
|
||||
$errorStore,
|
||||
$loadingStore,
|
||||
]) => {
|
||||
return {
|
||||
tableNames: $tableNamesStore,
|
||||
selectedTableNames: $selectedTableNamesStore,
|
||||
error: $errorStore,
|
||||
loading: $loadingStore,
|
||||
hasSelected: $selectedTableNamesStore.length > 0,
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
subscribe: combined.subscribe,
|
||||
setSelectedTableNames,
|
||||
importSelectedTables,
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<script>
|
||||
import { Modal } from "@budibase/bbui"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { IntegrationTypes } from "constants/backend"
|
||||
import GoogleAuthPrompt from "./GoogleAuthPrompt.svelte"
|
||||
|
||||
import TableImportSelection from "./TableImportSelection/index.svelte"
|
||||
import DatasourceConfigEditor from "./DatasourceConfigEditor/index.svelte"
|
||||
import { datasources } from "stores/backend"
|
||||
import { createOnGoogleAuthStore } from "./stores/onGoogleAuth.js"
|
||||
import { createDatasourceCreationStore } from "./stores/datasourceCreation.js"
|
||||
import { configFromIntegration } from "stores/selectors"
|
||||
|
||||
export let loading = false
|
||||
const store = createDatasourceCreationStore()
|
||||
const onGoogleAuth = createOnGoogleAuthStore()
|
||||
let modal
|
||||
|
||||
const handleStoreChanges = (store, modal, goto) => {
|
||||
store.stage === null ? modal?.hide() : modal?.show()
|
||||
|
||||
if (store.finished) {
|
||||
goto(`./datasource/${store.datasource._id}`)
|
||||
}
|
||||
}
|
||||
|
||||
$: handleStoreChanges($store, modal, $goto)
|
||||
|
||||
export function show(integration) {
|
||||
if (integration.name === IntegrationTypes.REST) {
|
||||
// A REST integration is created immediately, we don't need to display a config modal.
|
||||
loading = true
|
||||
datasources
|
||||
.create({ integration, fields: configFromIntegration(integration) })
|
||||
.then(datasource => {
|
||||
store.setIntegration(integration)
|
||||
store.setDatasource(datasource)
|
||||
})
|
||||
.finally(() => (loading = false))
|
||||
} else if (integration.name === IntegrationTypes.GOOGLE_SHEETS) {
|
||||
// This prompt redirects users to the Google OAuth flow, they'll be returned to this modal afterwards
|
||||
// with query params populated that trigger the `onGoogleAuth` store.
|
||||
store.googleAuthStage()
|
||||
} else {
|
||||
// All other integrations can generate config from data in the integration object.
|
||||
store.setIntegration(integration)
|
||||
store.setConfig(configFromIntegration(integration))
|
||||
store.editConfigStage()
|
||||
}
|
||||
}
|
||||
|
||||
// Triggers opening the config editor whenever Google OAuth returns the user to the page
|
||||
$: $onGoogleAuth((integration, config) => {
|
||||
store.setIntegration(integration)
|
||||
store.setConfig(config)
|
||||
store.editConfigStage()
|
||||
})
|
||||
</script>
|
||||
|
||||
<Modal on:hide={store.cancel} bind:this={modal}>
|
||||
{#if $store.stage === "googleAuth"}
|
||||
<GoogleAuthPrompt />
|
||||
{:else if $store.stage === "editConfig"}
|
||||
<DatasourceConfigEditor
|
||||
integration={$store.integration}
|
||||
config={$store.config}
|
||||
onDatasourceCreated={store.setDatasource}
|
||||
/>
|
||||
{:else if $store.stage === "selectTables"}
|
||||
<TableImportSelection
|
||||
integration={$store.integration}
|
||||
datasource={$store.datasource}
|
||||
onComplete={store.markAsFinished}
|
||||
/>
|
||||
{/if}
|
||||
</Modal>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import { get, writable } from "svelte/store"
|
||||
import { shouldIntegrationFetchTableNames } from "stores/selectors"
|
||||
|
||||
export const defaultStore = {
|
||||
finished: false,
|
||||
stage: null,
|
||||
integration: null,
|
||||
config: null,
|
||||
datasource: null,
|
||||
}
|
||||
|
||||
export const createDatasourceCreationStore = () => {
|
||||
const store = writable(defaultStore)
|
||||
|
||||
store.cancel = () => {
|
||||
const $store = get(store)
|
||||
// If the datasource has already been created, mark the store as finished.
|
||||
if ($store.stage === "selectTables") {
|
||||
store.markAsFinished()
|
||||
} else {
|
||||
store.set(defaultStore)
|
||||
}
|
||||
}
|
||||
|
||||
// Used only by Google Sheets
|
||||
store.googleAuthStage = () => {
|
||||
store.update($store => ({
|
||||
...$store,
|
||||
stage: "googleAuth",
|
||||
}))
|
||||
}
|
||||
|
||||
store.setIntegration = integration => {
|
||||
store.update($store => ({
|
||||
...$store,
|
||||
integration,
|
||||
}))
|
||||
}
|
||||
|
||||
store.setConfig = config => {
|
||||
store.update($store => ({
|
||||
...$store,
|
||||
config,
|
||||
}))
|
||||
}
|
||||
|
||||
// Used for every flow but REST
|
||||
store.editConfigStage = () => {
|
||||
store.update($store => ({
|
||||
...$store,
|
||||
stage: "editConfig",
|
||||
}))
|
||||
}
|
||||
|
||||
store.setDatasource = datasource => {
|
||||
const $store = get(store)
|
||||
store.set({ ...$store, datasource })
|
||||
|
||||
if (shouldIntegrationFetchTableNames($store.integration)) {
|
||||
store.selectTablesStage()
|
||||
} else {
|
||||
store.markAsFinished()
|
||||
}
|
||||
}
|
||||
|
||||
// Only used for datasource plus
|
||||
store.selectTablesStage = () => {
|
||||
store.update($store => ({
|
||||
...$store,
|
||||
stage: "selectTables",
|
||||
}))
|
||||
}
|
||||
|
||||
store.markAsFinished = () => {
|
||||
store.update($store => ({
|
||||
...$store,
|
||||
finished: true,
|
||||
}))
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe: store.subscribe,
|
||||
cancel: store.cancel,
|
||||
googleAuthStage: store.googleAuthStage,
|
||||
setIntegration: store.setIntegration,
|
||||
setConfig: store.setConfig,
|
||||
editConfigStage: store.editConfigStage,
|
||||
setDatasource: store.setDatasource,
|
||||
selectTablesStage: store.selectTablesStage,
|
||||
markAsFinished: store.markAsFinished,
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import { it, expect, describe, beforeEach, vi } from "vitest"
|
||||
import {
|
||||
defaultStore,
|
||||
createDatasourceCreationStore,
|
||||
} from "./datasourceCreation"
|
||||
import { get } from "svelte/store"
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { shouldIntegrationFetchTableNames } from "stores/selectors"
|
||||
|
||||
vi.mock("stores/selectors", () => ({
|
||||
shouldIntegrationFetchTableNames: vi.fn(),
|
||||
}))
|
||||
|
||||
describe("datasource creation store", () => {
|
||||
beforeEach(ctx => {
|
||||
vi.clearAllMocks()
|
||||
// eslint-disable-next-line no-import-assign
|
||||
ctx.store = createDatasourceCreationStore()
|
||||
|
||||
ctx.integration = { data: "integration" }
|
||||
ctx.config = { data: "config" }
|
||||
ctx.datasource = { data: "datasource" }
|
||||
})
|
||||
|
||||
describe("store creation", () => {
|
||||
it("returns the default values", ctx => {
|
||||
expect(get(ctx.store)).toEqual(defaultStore)
|
||||
})
|
||||
})
|
||||
|
||||
describe("cancel", () => {
|
||||
describe("when at the `selectTables` stage", () => {
|
||||
beforeEach(ctx => {
|
||||
ctx.store.selectTablesStage()
|
||||
ctx.store.cancel()
|
||||
})
|
||||
|
||||
it("marks the store as finished", ctx => {
|
||||
expect(get(ctx.store)).toEqual({
|
||||
...defaultStore,
|
||||
stage: "selectTables",
|
||||
finished: true,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe("When at any previous stage", () => {
|
||||
beforeEach(ctx => {
|
||||
ctx.store.cancel()
|
||||
})
|
||||
|
||||
it("resets to the default values", ctx => {
|
||||
expect(get(ctx.store)).toEqual(defaultStore)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe("googleAuthStage", () => {
|
||||
beforeEach(ctx => {
|
||||
ctx.store.googleAuthStage()
|
||||
})
|
||||
|
||||
it("sets the stage", ctx => {
|
||||
expect(get(ctx.store)).toEqual({ ...defaultStore, stage: "googleAuth" })
|
||||
})
|
||||
})
|
||||
|
||||
describe("setIntegration", () => {
|
||||
beforeEach(ctx => {
|
||||
ctx.store.setIntegration(ctx.integration)
|
||||
})
|
||||
|
||||
it("sets the integration", ctx => {
|
||||
expect(get(ctx.store)).toEqual({
|
||||
...defaultStore,
|
||||
integration: ctx.integration,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe("setConfig", () => {
|
||||
beforeEach(ctx => {
|
||||
ctx.store.setConfig(ctx.config)
|
||||
})
|
||||
|
||||
it("sets the config", ctx => {
|
||||
expect(get(ctx.store)).toEqual({
|
||||
...defaultStore,
|
||||
config: ctx.config,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe("editConfigStage", () => {
|
||||
beforeEach(ctx => {
|
||||
ctx.store.editConfigStage()
|
||||
})
|
||||
|
||||
it("sets the stage", ctx => {
|
||||
expect(get(ctx.store)).toEqual({ ...defaultStore, stage: "editConfig" })
|
||||
})
|
||||
})
|
||||
|
||||
describe("markAsFinished", () => {
|
||||
beforeEach(ctx => {
|
||||
ctx.store.markAsFinished()
|
||||
})
|
||||
|
||||
it("marks the store as finished", ctx => {
|
||||
expect(get(ctx.store)).toEqual({
|
||||
...defaultStore,
|
||||
finished: true,
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { derived } from "svelte/store"
|
||||
import { params } from "@roxi/routify"
|
||||
import { integrations } from "stores/backend"
|
||||
import { IntegrationTypes } from "constants/backend"
|
||||
|
||||
export const createOnGoogleAuthStore = () => {
|
||||
return derived([params, integrations], ([$params, $integrations]) => {
|
||||
const id = $params["?continue_google_setup"]
|
||||
|
||||
return callback => {
|
||||
if ($integrations && id) {
|
||||
history.replaceState({}, null, window.location.pathname)
|
||||
const integration = {
|
||||
name: IntegrationTypes.GOOGLE_SHEETS,
|
||||
...$integrations[IntegrationTypes.GOOGLE_SHEETS],
|
||||
}
|
||||
|
||||
const fields = { continueSetupId: id, sheetId: "" }
|
||||
|
||||
callback(integration, fields)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import { it, expect, describe, beforeEach, vi } from "vitest"
|
||||
import { createOnGoogleAuthStore } from "./onGoogleAuth"
|
||||
import { writable, get } from "svelte/store"
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { params } from "@roxi/routify"
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { integrations } from "stores/backend"
|
||||
import { IntegrationTypes } from "constants/backend"
|
||||
|
||||
vi.mock("@roxi/routify", () => ({
|
||||
params: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock("stores/backend", () => ({
|
||||
integrations: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.stubGlobal("history", { replaceState: vi.fn() })
|
||||
vi.stubGlobal("window", { location: { pathname: "/current-path" } })
|
||||
|
||||
describe("google auth store", () => {
|
||||
beforeEach(ctx => {
|
||||
vi.clearAllMocks()
|
||||
// eslint-disable-next-line no-import-assign
|
||||
integrations = writable({
|
||||
[IntegrationTypes.GOOGLE_SHEETS]: { data: "integration" },
|
||||
})
|
||||
ctx.callback = vi.fn()
|
||||
})
|
||||
|
||||
describe("with id present", () => {
|
||||
beforeEach(ctx => {
|
||||
// eslint-disable-next-line no-import-assign
|
||||
params = writable({ "?continue_google_setup": "googleId" })
|
||||
get(createOnGoogleAuthStore())(ctx.callback)
|
||||
})
|
||||
|
||||
it("invokes the provided callback with an integration and fields", ctx => {
|
||||
expect(ctx.callback).toHaveBeenCalledTimes(1)
|
||||
expect(ctx.callback).toHaveBeenCalledWith(
|
||||
{
|
||||
name: IntegrationTypes.GOOGLE_SHEETS,
|
||||
data: "integration",
|
||||
},
|
||||
{ continueSetupId: "googleId", sheetId: "" }
|
||||
)
|
||||
})
|
||||
|
||||
it("clears the query param", () => {
|
||||
expect(history.replaceState).toHaveBeenCalledTimes(1)
|
||||
expect(history.replaceState).toHaveBeenCalledWith(
|
||||
{},
|
||||
null,
|
||||
`/current-path`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe("without id present", () => {
|
||||
beforeEach(ctx => {
|
||||
// eslint-disable-next-line no-import-assign
|
||||
params = writable({})
|
||||
get(createOnGoogleAuthStore())(ctx.callback)
|
||||
})
|
||||
|
||||
it("doesn't invoke the provided callback", ctx => {
|
||||
expect(ctx.callback).toHaveBeenCalledTimes(0)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script>
|
||||
import { Modal, notifications } from "@budibase/bbui"
|
||||
import { goto } from "@roxi/routify"
|
||||
import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
|
||||
|
||||
let modal
|
||||
let promptUpload = false
|
||||
|
||||
export function show({ promptUpload: newPromptUpload = false }) {
|
||||
promptUpload = newPromptUpload
|
||||
modal.show()
|
||||
}
|
||||
|
||||
const handleInternalTableSave = table => {
|
||||
notifications.success(`Table created successfully.`)
|
||||
$goto(`./table/${table._id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:this={modal}>
|
||||
<CreateTableModal {promptUpload} afterSave={handleInternalTableSave} />
|
||||
</Modal>
|
||||
|
|
@ -1,39 +1,31 @@
|
|||
<script>
|
||||
import { API } from "api"
|
||||
import { tables, datasources } from "stores/backend"
|
||||
|
||||
import { Icon, Modal, notifications, Heading, Body } from "@budibase/bbui"
|
||||
import { params, goto } from "@roxi/routify"
|
||||
import {
|
||||
IntegrationTypes,
|
||||
DatasourceTypes,
|
||||
DEFAULT_BB_DATASOURCE_ID,
|
||||
} from "constants/backend"
|
||||
import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
|
||||
import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
|
||||
import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte"
|
||||
import { createRestDatasource } from "builderStore/datasource"
|
||||
tables,
|
||||
datasources,
|
||||
sortedIntegrations as integrations,
|
||||
} from "stores/backend"
|
||||
|
||||
import { hasData } from "stores/selectors"
|
||||
import { Icon, notifications, Heading, Body } from "@budibase/bbui"
|
||||
import { params, goto } from "@roxi/routify"
|
||||
import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte"
|
||||
import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte"
|
||||
import DatasourceOption from "./_components/DatasourceOption.svelte"
|
||||
import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
|
||||
import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
|
||||
import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
let internalTableModal
|
||||
let externalDatasourceModal
|
||||
let integrations = []
|
||||
let integration = null
|
||||
let disabled = false
|
||||
let promptUpload = false
|
||||
|
||||
$: hasData = $datasources.list.length > 1 || $tables.list.length > 1
|
||||
$: hasDefaultData =
|
||||
$datasources.list.findIndex(
|
||||
datasource => datasource._id === DEFAULT_BB_DATASOURCE_ID
|
||||
) !== -1
|
||||
let sampleDataLoading = false
|
||||
let externalDatasourceLoading = false
|
||||
|
||||
$: disabled = sampleDataLoading || externalDatasourceLoading
|
||||
|
||||
const createSampleData = async () => {
|
||||
disabled = true
|
||||
sampleDataLoading = true
|
||||
|
||||
try {
|
||||
await API.addSampleData($params.application)
|
||||
|
|
@ -41,136 +33,22 @@
|
|||
await datasources.fetch()
|
||||
$goto("./table")
|
||||
} catch (e) {
|
||||
disabled = false
|
||||
sampleDataLoading = false
|
||||
notifications.error("Error creating datasource")
|
||||
}
|
||||
}
|
||||
|
||||
const handleIntegrationSelect = integrationType => {
|
||||
const selected = integrations.find(([type]) => type === integrationType)[1]
|
||||
|
||||
// build the schema
|
||||
const config = {}
|
||||
|
||||
for (let key of Object.keys(selected.datasource)) {
|
||||
config[key] = selected.datasource[key].default
|
||||
}
|
||||
|
||||
integration = {
|
||||
type: integrationType,
|
||||
plus: selected.plus,
|
||||
config,
|
||||
schema: selected.datasource,
|
||||
auth: selected.auth,
|
||||
features: selected.features || [],
|
||||
}
|
||||
|
||||
if (selected.friendlyName) {
|
||||
integration.name = selected.friendlyName
|
||||
}
|
||||
|
||||
if (integration.type === IntegrationTypes.REST) {
|
||||
disabled = true
|
||||
|
||||
// Skip modal for rest, create straight away
|
||||
createRestDatasource(integration)
|
||||
.then(response => {
|
||||
$goto(`./datasource/${response._id}`)
|
||||
})
|
||||
.catch(() => {
|
||||
disabled = false
|
||||
notifications.error("Error creating datasource")
|
||||
})
|
||||
} else {
|
||||
externalDatasourceModal.show()
|
||||
}
|
||||
}
|
||||
|
||||
const handleInternalTable = () => {
|
||||
promptUpload = false
|
||||
internalTableModal.show()
|
||||
}
|
||||
|
||||
const handleDataImport = () => {
|
||||
promptUpload = true
|
||||
internalTableModal.show()
|
||||
}
|
||||
|
||||
const handleInternalTableSave = table => {
|
||||
notifications.success(`Table created successfully.`)
|
||||
$goto(`./table/${table._id}`)
|
||||
}
|
||||
|
||||
function sortIntegrations(integrations) {
|
||||
let integrationsArray = Object.entries(integrations)
|
||||
|
||||
function getTypeOrder(schema) {
|
||||
if (schema.type === DatasourceTypes.API) {
|
||||
return 1
|
||||
}
|
||||
|
||||
if (schema.type === DatasourceTypes.RELATIONAL) {
|
||||
return 2
|
||||
}
|
||||
|
||||
return schema.type?.charCodeAt(0)
|
||||
}
|
||||
|
||||
integrationsArray.sort((a, b) => {
|
||||
let typeOrderA = getTypeOrder(a[1])
|
||||
let typeOrderB = getTypeOrder(b[1])
|
||||
|
||||
if (typeOrderA === typeOrderB) {
|
||||
return a[1].friendlyName?.localeCompare(b[1].friendlyName)
|
||||
}
|
||||
|
||||
return typeOrderA < typeOrderB ? -1 : 1
|
||||
})
|
||||
|
||||
return integrationsArray
|
||||
}
|
||||
|
||||
let continueGoogleSetup
|
||||
onMount(() => {
|
||||
const urlParams = new URLSearchParams(window.location.search)
|
||||
continueGoogleSetup = urlParams.get("continue_google_setup")
|
||||
})
|
||||
|
||||
const fetchIntegrations = async () => {
|
||||
const unsortedIntegrations = await API.getIntegrations()
|
||||
integrations = sortIntegrations(unsortedIntegrations)
|
||||
|
||||
if (continueGoogleSetup) {
|
||||
handleIntegrationSelect(IntegrationTypes.GOOGLE_SHEETS)
|
||||
}
|
||||
}
|
||||
|
||||
$: fetchIntegrations()
|
||||
</script>
|
||||
|
||||
<Modal bind:this={internalTableModal}>
|
||||
<CreateTableModal {promptUpload} afterSave={handleInternalTableSave} />
|
||||
</Modal>
|
||||
<CreateInternalTableModal bind:this={internalTableModal} />
|
||||
|
||||
<Modal
|
||||
<CreateExternalDatasourceModal
|
||||
bind:loading={externalDatasourceLoading}
|
||||
bind:this={externalDatasourceModal}
|
||||
on:hide={() => {
|
||||
continueGoogleSetup = null
|
||||
}}
|
||||
>
|
||||
{#if integration?.auth?.type === "google"}
|
||||
<GoogleDatasourceConfigModal
|
||||
continueSetupId={continueGoogleSetup}
|
||||
{integration}
|
||||
/>
|
||||
{:else}
|
||||
<DatasourceConfigModal {integration} />
|
||||
{/if}
|
||||
</Modal>
|
||||
/>
|
||||
|
||||
<div class="page">
|
||||
<div class="closeButton">
|
||||
{#if hasData}
|
||||
{#if hasData($datasources, $tables)}
|
||||
<Icon hoverable name="Close" on:click={$goto("./table")} />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -191,7 +69,7 @@
|
|||
|
||||
<div class="options">
|
||||
<DatasourceOption
|
||||
on:click={handleInternalTable}
|
||||
on:click={internalTableModal.show}
|
||||
title="Create new table"
|
||||
description="Non-relational"
|
||||
{disabled}
|
||||
|
|
@ -202,12 +80,12 @@
|
|||
on:click={createSampleData}
|
||||
title="Use sample data"
|
||||
description="Non-relational"
|
||||
disabled={disabled || hasDefaultData}
|
||||
disabled={disabled || $datasources.hasDefaultData}
|
||||
>
|
||||
<svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
|
||||
</DatasourceOption>
|
||||
<DatasourceOption
|
||||
on:click={handleDataImport}
|
||||
on:click={() => internalTableModal.show({ promptUpload: true })}
|
||||
title="Upload data"
|
||||
description="Non-relational"
|
||||
{disabled}
|
||||
|
|
@ -221,14 +99,17 @@
|
|||
</div>
|
||||
|
||||
<div class="options">
|
||||
{#each integrations as [key, value]}
|
||||
{#each $integrations as integration}
|
||||
<DatasourceOption
|
||||
on:click={() => handleIntegrationSelect(key)}
|
||||
title={value.friendlyName}
|
||||
description={value.type}
|
||||
on:click={() => externalDatasourceModal.show(integration)}
|
||||
title={integration.friendlyName}
|
||||
description={integration.type}
|
||||
{disabled}
|
||||
>
|
||||
<IntegrationIcon integrationType={key} schema={value} />
|
||||
<IntegrationIcon
|
||||
integrationType={integration.name}
|
||||
schema={integration}
|
||||
/>
|
||||
</DatasourceOption>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,21 @@
|
|||
import { writable, derived, get } from "svelte/store"
|
||||
import { IntegrationTypes, DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
|
||||
import { queries, tables } from "./"
|
||||
import { API } from "api"
|
||||
import { DatasourceFeature } from "@budibase/types"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
|
||||
export class ImportTableError extends Error {
|
||||
constructor(message) {
|
||||
super(message)
|
||||
const [title, description] = message.split(" - ")
|
||||
|
||||
this.name = "TableSelectionError"
|
||||
// Capitalize the first character of both the title and description
|
||||
this.title = title[0].toUpperCase() + title.substr(1)
|
||||
this.description = description[0].toUpperCase() + description.substr(1)
|
||||
}
|
||||
}
|
||||
|
||||
export function createDatasourcesStore() {
|
||||
const store = writable({
|
||||
|
|
@ -8,9 +23,13 @@ export function createDatasourcesStore() {
|
|||
selectedDatasourceId: null,
|
||||
schemaError: null,
|
||||
})
|
||||
|
||||
const derivedStore = derived(store, $store => ({
|
||||
...$store,
|
||||
selected: $store.list?.find(ds => ds._id === $store.selectedDatasourceId),
|
||||
hasDefaultData: $store.list.some(
|
||||
datasource => datasource._id === DEFAULT_BB_DATASOURCE_ID
|
||||
),
|
||||
}))
|
||||
|
||||
const fetch = async () => {
|
||||
|
|
@ -50,27 +69,62 @@ export function createDatasourcesStore() {
|
|||
}
|
||||
|
||||
const updateSchema = async (datasource, tablesFilter) => {
|
||||
const response = await API.buildDatasourceSchema({
|
||||
datasourceId: datasource?._id,
|
||||
tablesFilter,
|
||||
})
|
||||
return updateDatasource(response)
|
||||
}
|
||||
|
||||
const save = async (body, { fetchSchema, tablesFilter } = {}) => {
|
||||
if (fetchSchema == null) {
|
||||
fetchSchema = false
|
||||
}
|
||||
let response
|
||||
if (body._id) {
|
||||
response = await API.updateDatasource(body)
|
||||
} else {
|
||||
response = await API.createDatasource({
|
||||
datasource: body,
|
||||
fetchSchema,
|
||||
try {
|
||||
const response = await API.buildDatasourceSchema({
|
||||
datasourceId: datasource?._id,
|
||||
tablesFilter,
|
||||
})
|
||||
updateDatasource(response)
|
||||
} catch (e) {
|
||||
// buildDatasourceSchema call returns user presentable errors with two parts divided with a " - ".
|
||||
if (e.message.split(" - ").length === 2) {
|
||||
throw new ImportTableError(e.message)
|
||||
} else {
|
||||
throw e
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const sourceCount = source => {
|
||||
return get(store).list.filter(datasource => datasource.source === source)
|
||||
.length
|
||||
}
|
||||
|
||||
const create = async ({ integration, fields }) => {
|
||||
try {
|
||||
const datasource = {
|
||||
type: "datasource",
|
||||
source: integration.name,
|
||||
config: fields,
|
||||
name: `${integration.friendlyName}-${
|
||||
sourceCount(integration.name) + 1
|
||||
}`,
|
||||
plus: integration.plus && integration.name !== IntegrationTypes.REST,
|
||||
}
|
||||
|
||||
if (integration.features?.[DatasourceFeature.CONNECTION_CHECKING]) {
|
||||
const { connected } = await API.validateDatasource(datasource)
|
||||
if (!connected) throw new Error("Unable to connect")
|
||||
}
|
||||
|
||||
const response = await API.createDatasource({
|
||||
datasource,
|
||||
fetchSchema:
|
||||
integration.plus &&
|
||||
integration.name !== IntegrationTypes.GOOGLE_SHEETS,
|
||||
})
|
||||
|
||||
notifications.success("Datasource created successfully.")
|
||||
|
||||
return updateDatasource(response)
|
||||
} catch (e) {
|
||||
notifications.error(`Error creating datasource: ${e.message}`)
|
||||
throw e
|
||||
}
|
||||
}
|
||||
|
||||
const save = async body => {
|
||||
const response = await API.updateDatasource(body)
|
||||
return updateDatasource(response)
|
||||
}
|
||||
|
||||
|
|
@ -132,16 +186,23 @@ export function createDatasourcesStore() {
|
|||
}
|
||||
}
|
||||
|
||||
const getTableNames = async datasource => {
|
||||
const info = await API.fetchInfoForDatasource(datasource)
|
||||
return info.tableNames || []
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe: derivedStore.subscribe,
|
||||
fetch,
|
||||
init: fetch,
|
||||
select,
|
||||
updateSchema,
|
||||
create,
|
||||
save,
|
||||
delete: deleteDatasource,
|
||||
removeSchemaError,
|
||||
replaceDatasource,
|
||||
getTableNames,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ export { tables } from "./tables"
|
|||
export { views } from "./views"
|
||||
export { permissions } from "./permissions"
|
||||
export { roles } from "./roles"
|
||||
export { datasources } from "./datasources"
|
||||
export { datasources, ImportTableError } from "./datasources"
|
||||
export { integrations } from "./integrations"
|
||||
export { sortedIntegrations } from "./sortedIntegrations"
|
||||
export { queries } from "./queries"
|
||||
export { flags } from "./flags"
|
||||
|
|
|
|||
|
|
@ -2,14 +2,16 @@ import { writable } from "svelte/store"
|
|||
import { API } from "api"
|
||||
|
||||
const createIntegrationsStore = () => {
|
||||
const store = writable(null)
|
||||
const store = writable({})
|
||||
|
||||
const init = async () => {
|
||||
const integrations = await API.getIntegrations()
|
||||
store.set(integrations)
|
||||
}
|
||||
|
||||
return {
|
||||
...store,
|
||||
init: async () => {
|
||||
const integrations = await API.getIntegrations()
|
||||
store.set(integrations)
|
||||
},
|
||||
init,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
39
packages/builder/src/stores/backend/sortedIntegrations.js
Normal file
39
packages/builder/src/stores/backend/sortedIntegrations.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { integrations } from "./integrations"
|
||||
import { derived } from "svelte/store"
|
||||
|
||||
import { DatasourceTypes } from "constants/backend"
|
||||
|
||||
const getIntegrationOrder = type => {
|
||||
if (type === DatasourceTypes.API) return 1
|
||||
if (type === DatasourceTypes.RELATIONAL) return 2
|
||||
if (type === DatasourceTypes.NON_RELATIONAL) return 3
|
||||
|
||||
// Sort all others arbitrarily by the first character of their name.
|
||||
// Character codes can technically be as low as 0, so make sure the number is at least 4
|
||||
return type.charCodeAt(0) + 4
|
||||
}
|
||||
|
||||
export const createSortedIntegrationsStore = () => {
|
||||
return derived(integrations, $integrations => {
|
||||
const integrationsAsArray = Object.entries($integrations).map(
|
||||
([name, integration]) => ({
|
||||
name,
|
||||
...integration,
|
||||
})
|
||||
)
|
||||
|
||||
return integrationsAsArray.sort((integrationA, integrationB) => {
|
||||
const integrationASortOrder = getIntegrationOrder(integrationA.type)
|
||||
const integrationBSortOrder = getIntegrationOrder(integrationB.type)
|
||||
if (integrationASortOrder === integrationBSortOrder) {
|
||||
return integrationA.friendlyName.localeCompare(
|
||||
integrationB.friendlyName
|
||||
)
|
||||
}
|
||||
|
||||
return integrationASortOrder < integrationBSortOrder ? -1 : 1
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const sortedIntegrations = createSortedIntegrationsStore()
|
||||
127
packages/builder/src/stores/backend/sortedIntegrations.test.js
Normal file
127
packages/builder/src/stores/backend/sortedIntegrations.test.js
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
import { it, expect, describe, beforeEach, vi } from "vitest"
|
||||
import { createSortedIntegrationsStore } from "./sortedIntegrations"
|
||||
import { DatasourceTypes } from "constants/backend"
|
||||
|
||||
import { derived } from "svelte/store"
|
||||
import { integrations } from "stores/backend/integrations"
|
||||
|
||||
vi.mock("svelte/store", () => ({
|
||||
derived: vi.fn(() => {}),
|
||||
}))
|
||||
|
||||
vi.mock("stores/backend/integrations", () => ({ integrations: vi.fn() }))
|
||||
|
||||
const inputA = {
|
||||
nonRelationalA: {
|
||||
friendlyName: "non-relational A",
|
||||
type: DatasourceTypes.NON_RELATIONAL,
|
||||
},
|
||||
relationalB: {
|
||||
friendlyName: "relational B",
|
||||
type: DatasourceTypes.RELATIONAL,
|
||||
},
|
||||
relationalA: {
|
||||
friendlyName: "relational A",
|
||||
type: DatasourceTypes.RELATIONAL,
|
||||
},
|
||||
api: {
|
||||
friendlyName: "api",
|
||||
type: DatasourceTypes.API,
|
||||
},
|
||||
relationalC: {
|
||||
friendlyName: "relational C",
|
||||
type: DatasourceTypes.RELATIONAL,
|
||||
},
|
||||
nonRelationalB: {
|
||||
friendlyName: "non-relational B",
|
||||
type: DatasourceTypes.NON_RELATIONAL,
|
||||
},
|
||||
otherC: {
|
||||
friendlyName: "other C",
|
||||
type: "random",
|
||||
},
|
||||
otherB: {
|
||||
friendlyName: "other B",
|
||||
type: "arbitrary",
|
||||
},
|
||||
otherA: {
|
||||
friendlyName: "other A",
|
||||
type: "arbitrary",
|
||||
},
|
||||
}
|
||||
|
||||
const inputB = Object.fromEntries(Object.entries(inputA).reverse())
|
||||
|
||||
const expectedOutput = [
|
||||
{
|
||||
name: "api",
|
||||
friendlyName: "api",
|
||||
type: DatasourceTypes.API,
|
||||
},
|
||||
{
|
||||
name: "relationalA",
|
||||
friendlyName: "relational A",
|
||||
type: DatasourceTypes.RELATIONAL,
|
||||
},
|
||||
{
|
||||
name: "relationalB",
|
||||
friendlyName: "relational B",
|
||||
type: DatasourceTypes.RELATIONAL,
|
||||
},
|
||||
{
|
||||
name: "relationalC",
|
||||
friendlyName: "relational C",
|
||||
type: DatasourceTypes.RELATIONAL,
|
||||
},
|
||||
{
|
||||
name: "nonRelationalA",
|
||||
friendlyName: "non-relational A",
|
||||
type: DatasourceTypes.NON_RELATIONAL,
|
||||
},
|
||||
{
|
||||
name: "nonRelationalB",
|
||||
friendlyName: "non-relational B",
|
||||
type: DatasourceTypes.NON_RELATIONAL,
|
||||
},
|
||||
{
|
||||
name: "otherA",
|
||||
friendlyName: "other A",
|
||||
type: "arbitrary",
|
||||
},
|
||||
{
|
||||
name: "otherB",
|
||||
friendlyName: "other B",
|
||||
type: "arbitrary",
|
||||
},
|
||||
{
|
||||
name: "otherC",
|
||||
friendlyName: "other C",
|
||||
type: "random",
|
||||
},
|
||||
]
|
||||
|
||||
describe("sorted integrations store", () => {
|
||||
beforeEach(ctx => {
|
||||
vi.clearAllMocks()
|
||||
|
||||
ctx.returnedStore = createSortedIntegrationsStore()
|
||||
|
||||
ctx.derivedCallback = derived.mock.calls[0][1]
|
||||
})
|
||||
|
||||
it("calls derived with the correct parameters", () => {
|
||||
expect(derived).toHaveBeenCalledTimes(1)
|
||||
expect(derived).toHaveBeenCalledWith(integrations, expect.toBeFunc())
|
||||
})
|
||||
|
||||
describe("derived callback", () => {
|
||||
it("When no integrations are loaded", ctx => {
|
||||
expect(ctx.derivedCallback({})).toEqual([])
|
||||
})
|
||||
|
||||
it("When integrations are present", ctx => {
|
||||
expect(ctx.derivedCallback(inputA)).toEqual(expectedOutput)
|
||||
expect(ctx.derivedCallback(inputB)).toEqual(expectedOutput)
|
||||
})
|
||||
})
|
||||
})
|
||||
35
packages/builder/src/stores/selectors.js
Normal file
35
packages/builder/src/stores/selectors.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
|
||||
import { DatasourceFeature } from "@budibase/types"
|
||||
|
||||
export const integrationForDatasource = (integrations, datasource) => ({
|
||||
name: datasource.source,
|
||||
...integrations[datasource.source],
|
||||
})
|
||||
|
||||
export const hasData = (datasources, tables) =>
|
||||
datasources.list.length > 1 || tables.list.length > 1
|
||||
|
||||
export const hasDefaultData = datasources =>
|
||||
datasources.list.some(
|
||||
datasource => datasource._id === DEFAULT_BB_DATASOURCE_ID
|
||||
)
|
||||
|
||||
export const configFromIntegration = integration => {
|
||||
const config = {}
|
||||
|
||||
Object.entries(integration?.datasource || {}).forEach(([key, properties]) => {
|
||||
if (properties.type === "fieldGroup") {
|
||||
Object.keys(properties.fields).forEach(fieldKey => {
|
||||
config[fieldKey] = null
|
||||
})
|
||||
} else {
|
||||
config[key] = properties.default ?? null
|
||||
}
|
||||
})
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
export const shouldIntegrationFetchTableNames = integration => {
|
||||
return integration.features?.[DatasourceFeature.FETCH_TABLE_NAMES]
|
||||
}
|
||||
56
packages/builder/src/stores/selectors.test.js
Normal file
56
packages/builder/src/stores/selectors.test.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { it, expect, describe, beforeEach, vi } from "vitest"
|
||||
import { DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
|
||||
import { integrationForDatasource, hasData, hasDefaultData } from "./selectors"
|
||||
|
||||
describe("selectors", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe("integrationForDatasource", () => {
|
||||
it("returns the integration corresponding to the given datasource", () => {
|
||||
expect(
|
||||
integrationForDatasource(
|
||||
{ integrationOne: { some: "data" } },
|
||||
{ source: "integrationOne" }
|
||||
)
|
||||
).toEqual({ some: "data", name: "integrationOne" })
|
||||
})
|
||||
})
|
||||
|
||||
describe("hasData", () => {
|
||||
describe("when the user has created a datasource in addition to the premade Budibase DB source", () => {
|
||||
it("returns true", () => {
|
||||
expect(hasData({ list: [1, 1] }, { list: [] })).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe("when the user has created a table in addition to the premade users table", () => {
|
||||
it("returns true", () => {
|
||||
expect(hasData({ list: [] }, { list: [1, 1] })).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe("when the user doesn't have data", () => {
|
||||
it("returns false", () => {
|
||||
expect(hasData({ list: [] }, { list: [] })).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe("hasDefaultData", () => {
|
||||
describe("when the user has default data", () => {
|
||||
it("returns true", () => {
|
||||
expect(
|
||||
hasDefaultData({ list: [{ _id: DEFAULT_BB_DATASOURCE_ID }] })
|
||||
).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe("when the user doesn't have default data", () => {
|
||||
it("returns false", () => {
|
||||
expect(hasDefaultData({ list: [{ _id: "some other id" }] })).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue