CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-29 08:41:16 +13:00
Code Issues Projects Releases Wiki Activity

Modal integration

Browse source
This commit is contained in:
Rory Powell 2021-12-09 11:39:44 +00:00
parent 21c45a17ce
commit 01ab892a00
6 changed files with 138 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestAuthenticationBuilder.svelte
View file

@ -1,29 +0,0 @@
<script>
import { Table } from "@budibase/bbui"
import CapitaliseRenderer from "components/common/renderers/CapitaliseRenderer.svelte"
export let authConfigs = []
const schema = {
name: "",
type: "",
}
</script>
<div>
{#if authConfigs && authConfigs.length > 0}
<div class="query-list">
<Table
{schema}
data={authConfigs}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={false}
customRenderers={[{ column: "type", component: CapitaliseRenderer }]}
/>
</div>
{/if}
</div>
<style>
</style>

5
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte → packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Divider, Heading, ActionButton, Badge, Body } from "@budibase/bbui"
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import RestAuthenticationBuilder from "./RestAuthenticationBuilder.svelte"
import RestAuthenticationBuilder from "./auth/RestAuthenticationBuilder.svelte"
export let datasource
@ -42,9 +42,6 @@
Create an authentication config that can be shared with queries.
</Body>
<RestAuthenticationBuilder bind:authConfigs={datasource.config.authConfigs} />
<div>
<ActionButton icon="Add">Add authentication</ActionButton>
</div>
<style>
.section-header {

13
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/AuthTypeRenderer.svelte Normal file
View file

@ -0,0 +1,13 @@
<script>
import { AUTH_TYPE_LABELS } from "./authTypes"
export let value
const renderAuthType = () => {
return AUTH_TYPE_LABELS.filter(type => type.value === value).map(
type => type.label
)
}
</script>
{renderAuthType()}

108
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationBuilder.svelte Normal file
View file

@ -0,0 +1,108 @@
<script>
import {
Table,
Modal,
ModalContent,
Layout,
ActionButton,
Select,
Body,
Input,
} from "@budibase/bbui"
import AuthTypeRenderer from "./AuthTypeRenderer.svelte"
import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
export let authConfigs = []
let modal
let currentConfig
let isNew = false
const schema = {
name: "",
type: "",
}
const openConfigModal = config => {
if (!config) {
currentConfig = {
config: {},
}
isNew = true
} else {
currentConfig = { ...config }
isNew = false
}
modal.show()
}
const onConfirm = () => {
if (isNew) {
authConfigs.push(currentConfig)
} else {
authConfigs = authConfigs.map(c => {
if (c.name === currentConfig.name) {
return currentConfig
}
return c
})
}
}
const onCancel = () => {
currentConfig = {}
}
</script>
<Modal bind:this={modal}>
<ModalContent
title={isNew ? "Add Authentication" : "Update Authentication"}
{onConfirm}
{onCancel}
confirmText={isNew ? "Add" : "Update"}
cancelText="Cancel"
size="M"
>
<Layout gap="S">
<Body size="S">
The authorization header will be automatically generated when you
sendthe request.
</Body>
<Select
label="Type"
bind:value={currentConfig.type}
options={AUTH_TYPE_LABELS}
on:change={({ detail }) => (currentConfig.type = detail)}
/>
{#if currentConfig.type === AUTH_TYPES.BASIC}
<Input label="Username" bind:value={currentConfig.config.username} />
<Input label="Password" bind:value={currentConfig.config.password} />
{/if}
{#if currentConfig.type === AUTH_TYPES.BEARER}
<Input label="Token" bind:value={currentConfig.config.token} />
{/if}
</Layout>
</ModalContent>
</Modal>
<Layout gap="S" noPadding>
{#if authConfigs && authConfigs.length > 0}
<Table
on:click={({ detail }) => openConfigModal(detail)}
{schema}
data={authConfigs}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={false}
customRenderers={[{ column: "type", component: AuthTypeRenderer }]}
/>
{/if}
<div>
<ActionButton on:click={() => openConfigModal()} con="Add"
>Add authentication</ActionButton
>
</div>
</Layout>
<style>
</style>

15
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/authTypes.js Normal file
View file

@ -0,0 +1,15 @@
export const AUTH_TYPES = {
BEARER: "bearer",
BASIC: "basic",
}
export const AUTH_TYPE_LABELS = [
{
label: "Bearer Token",
value: AUTH_TYPES.BEARER,
},
{
label: "Basic Auth",
value: AUTH_TYPES.BASIC,
},
]

2
packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
View file

@ -12,7 +12,7 @@
} 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 CapitaliseRenderer from "components/common/renderers/CapitaliseRenderer.svelte"