Adding radio group of body types.

This commit is contained in:
mike12345567 2021-12-02 17:53:14 +00:00
parent 41d34861c3
commit 740abf8445
5 changed files with 83 additions and 74 deletions

View File

@ -9,6 +9,7 @@
export let labelPosition = "above" export let labelPosition = "above"
export let error = null export let error = null
export let options = [] export let options = []
export let direction = "vertical"
export let getOptionLabel = option => extractProperty(option, "label") export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value") export let getOptionValue = option => extractProperty(option, "value")
@ -31,6 +32,7 @@
{disabled} {disabled}
{value} {value}
{options} {options}
{direction}
{getOptionLabel} {getOptionLabel}
{getOptionValue} {getOptionValue}
on:change={onChange} on:change={onChange}

View File

@ -66,6 +66,22 @@ export const LAYOUT_NAMES = {
}, },
} }
export const RawRestBodyTypes = {
NONE: "none",
FORM: "form",
ENCODED: "encoded",
JSON: "json",
TEXT: "text",
}
export const RestBodyTypes = [
{ name: "none", value: "none" },
{ name: "form-data", value: "form" },
{ name: "x-www-form-encoded", value: "encoded" },
{ name: "raw (JSON)", value: "json" },
{ name: "raw (Text)", value: "text" },
]
export const BUDIBASE_INTERNAL_DB = "bb_internal" export const BUDIBASE_INTERNAL_DB = "bb_internal"
export const APP_NAME_REGEX = /^[\w\s]+$/ export const APP_NAME_REGEX = /^[\w\s]+$/

View File

@ -0,0 +1,13 @@
<script>
import { Body } from "@budibase/bbui"
import { RawRestBodyTypes } from "constants"
export let query
export let bodyType
</script>
{#if bodyType === RawRestBodyTypes.NONE}
<Body>The request does not have a body</Body>
{:else if bodyType === RawRestBodyTypes.FORM}
<Body>Form</Body>
{/if}

View File

@ -11,12 +11,15 @@
Divider, Divider,
Button, Button,
Heading, Heading,
RadioGroup,
} from "@budibase/bbui" } from "@budibase/bbui"
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte" import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import EditableLabel from "components/common/inputs/EditableLabel.svelte" import EditableLabel from "components/common/inputs/EditableLabel.svelte"
import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte" import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte"
import RestBodyInput from "../_components/RestBodyInput.svelte"
import { capitalise } from "helpers" import { capitalise } from "helpers"
import { onMount } from "svelte" import { onMount } from "svelte"
import { RestBodyTypes as bodyTypes } from "constants"
let query let query
let breakQs = {} let breakQs = {}
@ -106,6 +109,9 @@
bannerCleared: false, bannerCleared: false,
} }
} }
if (query && !query.fields.bodyType) {
query.fields.bodyType = "none"
}
}) })
</script> </script>
@ -134,7 +140,7 @@
</div> </div>
<Button cta disabled={!url} on:click={saveQuery}>Send</Button> <Button cta disabled={!url} on:click={saveQuery}>Send</Button>
</div> </div>
<Tabs selected="Params"> <Tabs selected="Params" noPadding>
<Tab title="Params"> <Tab title="Params">
<KeyValueBuilder bind:object={breakQs} name="param" headings /> <KeyValueBuilder bind:object={breakQs} name="param" headings />
</Tab> </Tab>
@ -146,7 +152,16 @@
activity activity
/> />
</Tab> </Tab>
<Tab title="Body" /> <Tab title="Body">
<RadioGroup
bind:value={query.fields.bodyType}
options={bodyTypes}
direction="horizontal"
getOptionLabel={option => option.name}
getOptionValue={option => option.value}
/>
<RestBodyInput bind:bodyType={query.fields.bodyType} />
</Tab>
<Tab title="Transformer"> <Tab title="Transformer">
<Layout noPadding> <Layout noPadding>
{#if !query.flags.bannerCleared} {#if !query.flags.bannerCleared}

View File

@ -5,6 +5,36 @@ import {
} from "../definitions/datasource" } from "../definitions/datasource"
import { IntegrationBase } from "./base/IntegrationBase" import { IntegrationBase } from "./base/IntegrationBase"
const BodyTypes = {
NONE: "none",
FORM_DATA: "form",
ENCODED: "encoded",
JSON: "json",
TEXT: "text",
}
const coreFields = {
path: {
type: DatasourceFieldTypes.STRING,
display: "URL",
},
queryString: {
type: DatasourceFieldTypes.STRING,
},
headers: {
type: DatasourceFieldTypes.OBJECT,
},
enabledHeaders: {
type: DatasourceFieldTypes.OBJECT,
},
requestBody: {
type: DatasourceFieldTypes.JSON,
},
bodyType: {
type: DatasourceFieldTypes.STRING,
},
}
module RestModule { module RestModule {
const fetch = require("node-fetch") const fetch = require("node-fetch")
@ -38,97 +68,30 @@ module RestModule {
readable: true, readable: true,
displayName: "POST", displayName: "POST",
type: QueryTypes.FIELDS, type: QueryTypes.FIELDS,
fields: { fields: coreFields,
path: {
type: DatasourceFieldTypes.STRING,
display: "URL",
},
queryString: {
type: DatasourceFieldTypes.STRING,
},
headers: {
type: DatasourceFieldTypes.OBJECT,
},
requestBody: {
type: DatasourceFieldTypes.JSON,
},
},
}, },
read: { read: {
displayName: "GET", displayName: "GET",
readable: true, readable: true,
type: QueryTypes.FIELDS, type: QueryTypes.FIELDS,
fields: { fields: coreFields,
path: {
type: DatasourceFieldTypes.STRING,
display: "URL",
},
queryString: {
type: DatasourceFieldTypes.STRING,
},
headers: {
type: DatasourceFieldTypes.OBJECT,
},
},
}, },
update: { update: {
displayName: "PUT", displayName: "PUT",
readable: true, readable: true,
type: QueryTypes.FIELDS, type: QueryTypes.FIELDS,
fields: { fields: coreFields,
path: {
type: DatasourceFieldTypes.STRING,
display: "URL",
},
queryString: {
type: DatasourceFieldTypes.STRING,
},
headers: {
type: DatasourceFieldTypes.OBJECT,
},
requestBody: {
type: DatasourceFieldTypes.JSON,
},
},
}, },
patch: { patch: {
displayName: "PATCH", displayName: "PATCH",
readable: true, readable: true,
type: QueryTypes.FIELDS, type: QueryTypes.FIELDS,
fields: { fields: coreFields,
path: {
type: DatasourceFieldTypes.STRING,
display: "URL",
},
queryString: {
type: DatasourceFieldTypes.STRING,
},
headers: {
type: DatasourceFieldTypes.OBJECT,
},
requestBody: {
type: DatasourceFieldTypes.JSON,
},
},
}, },
delete: { delete: {
displayName: "DELETE", displayName: "DELETE",
type: QueryTypes.FIELDS, type: QueryTypes.FIELDS,
fields: { fields: coreFields,
path: {
type: DatasourceFieldTypes.STRING,
display: "URL",
},
queryString: {
type: DatasourceFieldTypes.STRING,
},
headers: {
type: DatasourceFieldTypes.OBJECT,
},
requestBody: {
type: DatasourceFieldTypes.JSON,
},
},
}, },
}, },
} }