diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte index 7f2d7fbdb9..c18be1e4e1 100644 --- a/packages/bbui/src/Modal/ModalContent.svelte +++ b/packages/bbui/src/Modal/ModalContent.svelte @@ -21,6 +21,7 @@ export let showSecondaryButton = false export let secondaryButtonText = undefined export let secondaryAction = undefined + export let secondaryButtonWarning = false const { hide, cancel } = getContext(Context.Modal) let loading = false @@ -88,8 +89,11 @@ {#if showSecondaryButton && secondaryButtonText && secondaryAction}
- {secondaryButtonText}
{/if} diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte index 01ba071a3f..f736d29bee 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte @@ -12,7 +12,7 @@ import { datasources, integrations, tables } from "stores/backend" import CreateEditRelationship from "components/backend/Datasources/CreateEditRelationship.svelte" import CreateExternalTableModal from "./CreateExternalTableModal.svelte" - import ArrayRenderer from "components/common/ArrayRenderer.svelte" + import ArrayRenderer from "components/common/renderers/ArrayRenderer.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte" import { goto } from "@roxi/routify" diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte similarity index 65% rename from packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte rename to packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte index ce3881d82c..0272463d92 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte @@ -1,6 +1,7 @@ -
+
Headers Optional @@ -30,8 +31,20 @@
+ +
+
+ Authentication + Optional +
+
+ + Create an authentication config that can be shared with queries. + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/authTypes.js b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/authTypes.js new file mode 100644 index 0000000000..1e2b65dad9 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/authTypes.js @@ -0,0 +1,15 @@ +export const AUTH_TYPES = { + BASIC: "basic", + BEARER: "bearer", +} + +export const AUTH_TYPE_LABELS = [ + { + label: "Basic Auth", + value: AUTH_TYPES.BASIC, + }, + { + label: "Bearer Token", + value: AUTH_TYPES.BEARER, + }, +] diff --git a/packages/builder/src/components/common/ArrayRenderer.svelte b/packages/builder/src/components/common/renderers/ArrayRenderer.svelte similarity index 100% rename from packages/builder/src/components/common/ArrayRenderer.svelte rename to packages/builder/src/components/common/renderers/ArrayRenderer.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/VerbRenderer.svelte b/packages/builder/src/components/common/renderers/CapitaliseRenderer.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/VerbRenderer.svelte rename to packages/builder/src/components/common/renderers/CapitaliseRenderer.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte index fd6f791d5c..94cf2d8604 100644 --- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte @@ -12,33 +12,29 @@ } from "@budibase/bbui" import { datasources, integrations, queries, tables } from "stores/backend" import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte" - import RestExtraConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte" + import RestExtraConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte" import PlusConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte" import ICONS from "components/backend/DatasourceNavigator/icons" - import VerbRenderer from "./_components/VerbRenderer.svelte" + import CapitaliseRenderer from "components/common/renderers/CapitaliseRenderer.svelte" import { IntegrationTypes } from "constants/backend" import { isEqual } from "lodash" import { cloneDeep } from "lodash/fp" import ImportRestQueriesModal from "components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte" + import { onMount } from "svelte" let importQueriesModal - let baseDatasource, changed + let changed + let datasource const querySchema = { name: {}, queryVerb: { displayName: "Method" }, } - $: datasource = $datasources.list.find(ds => ds._id === $datasources.selected) + $: baseDatasource = $datasources.list.find( + ds => ds._id === $datasources.selected + ) $: integration = datasource && $integrations[datasource.source] - $: { - if ( - datasource && - (!baseDatasource || baseDatasource.source !== datasource.source) - ) { - baseDatasource = cloneDeep(datasource) - } - } $: queryList = $queries.list.filter( query => query.datasourceId === datasource?._id ) @@ -69,6 +65,10 @@ queries.select(query) $goto(`./${query._id}`) } + + onMount(() => { + datasource = cloneDeep(baseDatasource) + }) @@ -90,7 +90,7 @@ height="26" width="26" /> - {baseDatasource.name} + {datasource.name} {integration.description} @@ -135,7 +135,9 @@ allowEditColumns={false} allowEditRows={false} allowSelectRows={false} - customRenderers={[{ column: "queryVerb", component: VerbRenderer }]} + customRenderers={[ + { column: "queryVerb", component: CapitaliseRenderer }, + ]} />
{/if} diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte index a9d70c8b9e..f0d72feebf 100644 --- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte @@ -51,6 +51,7 @@ let saveId let response, schema, enabledHeaders let datasourceType, integrationInfo, queryConfig, responseSuccess + let authConfigId $: datasourceType = datasource?.source $: integrationInfo = $integrations[datasourceType] @@ -59,6 +60,7 @@ $: checkQueryName(url) $: responseSuccess = response?.info?.code >= 200 && response?.info?.code <= 206 + $: authConfigs = buildAuthConfigs(datasource) function getSelectedQuery() { return cloneDeep( @@ -94,6 +96,16 @@ return qs.length > 0 ? `${newUrl}?${qs}` : newUrl } + const buildAuthConfigs = datasource => { + if (datasource?.config?.authConfigs) { + return datasource.config.authConfigs.map(c => ({ + label: c.name, + value: c._id, + })) + } + return [] + } + function learnMoreBanner() { window.open("https://docs.budibase.com/building-apps/data/transformers") } @@ -103,6 +115,7 @@ const queryString = buildQueryString(breakQs) newQuery.fields.path = url.split("?")[0] newQuery.fields.queryString = queryString + newQuery.fields.authConfigId = authConfigId newQuery.fields.disabledHeaders = flipHeaderState(enabledHeaders) newQuery.schema = fieldsToSchema(schema) newQuery.parameters = keyValueToQueryParameters(bindings) @@ -136,8 +149,26 @@ } } - onMount(() => { + const getAuthConfigId = () => { + let id = query.fields.authConfigId + if (id) { + // find the matching config on the datasource + const matchedConfig = datasource?.config?.authConfigs?.filter( + c => c._id === id + )[0] + // clear the id if the config is not found (deleted) + // i.e. just show 'None' in the dropdown + if (!matchedConfig) { + id = undefined + } + } + return id + } + + onMount(async () => { query = getSelectedQuery() + // clear any unsaved changes to the datasource + await datasources.init() datasource = $datasources.list.find(ds => ds._id === query?.datasourceId) const datasourceUrl = datasource?.config.url const qs = query?.fields.queryString @@ -149,6 +180,7 @@ url = buildUrl(query.fields.path, breakQs) schema = schemaToFields(query.schema) bindings = queryParametersToKeyValue(query.parameters) + authConfigId = getAuthConfigId() if (!query.fields.disabledHeaders) { query.fields.disabledHeaders = {} } @@ -258,6 +290,19 @@ /> +
+
+ +
+