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

Adding in last components of UI that were missing.

This commit is contained in:
mike12345567 2021-12-03 18:39:05 +00:00
parent 0b9548260c
commit 65d6ca9249
7 changed files with 156 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/Form/Core/TextArea.svelte
View File

@ -7,6 +7,7 @@
export let disabled = false export let disabled = false
export let error = null export let error = null
export let id = null export let id = null
export let height = null
export const getCaretPosition = () => ({ export const getCaretPosition = () => ({
start: textarea.selectionStart, start: textarea.selectionStart,
end: textarea.selectionEnd, end: textarea.selectionEnd,
@ -22,6 +23,7 @@
</script> </script>
<div <div
style={height ? `height: ${height}px;` : ""}
class="spectrum-Textfield spectrum-Textfield--multiline" class="spectrum-Textfield spectrum-Textfield--multiline"
class:is-invalid={!!error} class:is-invalid={!!error}
class:is-disabled={disabled} class:is-disabled={disabled}

2
packages/bbui/src/Form/TextArea.svelte
View File

@ -10,6 +10,7 @@
export let disabled = false export let disabled = false
export let error = null export let error = null
export let getCaretPosition = null export let getCaretPosition = null
export let height = null
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
const onChange = e => { const onChange = e => {
@ -25,6 +26,7 @@
{disabled} {disabled}
{value} {value}
{placeholder} {placeholder}
{height}
on:change={onChange} on:change={onChange}
/> />
</Field> </Field>

6
packages/bbui/src/Tabs/Tabs.svelte
View File

@ -6,6 +6,8 @@
export let selected export let selected
export let vertical = false export let vertical = false
export let noPadding = false export let noPadding = false
// added as a separate option as noPadding is used for vertical padding
export let noHorizPadding = false
export let quiet = false export let quiet = false
export let emphasized = false export let emphasized = false
@ -59,6 +61,7 @@
<div <div
bind:this={container} bind:this={container}
class:quiet class:quiet
class:noHorizPadding
class="selected-border spectrum-Tabs {quiet && class="selected-border spectrum-Tabs {quiet &&
'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical 'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical
? 'vertical' ? 'vertical'
@ -99,6 +102,9 @@
.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator { .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
bottom: 0 !important; bottom: 0 !important;
} }
.noHorizPadding {
padding: 0;
}
.noPadding { .noPadding {
margin: 0; margin: 0;
} }

3
packages/builder/src/components/common/CodeMirrorEditor.svelte
View File

@ -15,6 +15,9 @@
name: "handlebars", name: "handlebars",
base: "text/html", base: "text/html",
}, },
Text: {
name: "text/html",
},
} }
</script> </script>

59
packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/RestBodyInput.svelte
View File

@ -1,13 +1,62 @@
<script> <script>
import { Body } from "@budibase/bbui" import { Body } from "@budibase/bbui"
import { RawRestBodyTypes } from "constants" import { RawRestBodyTypes } from "constants"
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import CodeMirrorEditor, {
EditorModes,
} from "components/common/CodeMirrorEditor.svelte"
const objectTypes = [RawRestBodyTypes.FORM, RawRestBodyTypes.ENCODED]
const textTypes = [RawRestBodyTypes.JSON, RawRestBodyTypes.TEXT]
export let query export let query
export let bodyType export let bodyType
$: checkRequestBody(bodyType)
function checkRequestBody(type) {
if (!bodyType || !query) {
return
}
const currentType = typeof query?.fields.requestBody
if (objectTypes.includes(type) && currentType !== "object") {
query.fields.requestBody = {}
} else if (textTypes.includes(type) && currentType !== "string") {
query.fields.requestBody = ""
}
}
</script> </script>
{#if bodyType === RawRestBodyTypes.NONE} <div class="margin">
<Body>The request does not have a body</Body> {#if bodyType === RawRestBodyTypes.NONE}
{:else if bodyType === RawRestBodyTypes.FORM} <div class="none">
<Body>Form</Body> <Body size="S" weight="800">THE REQUEST DOES NOT HAVE A BODY</Body>
{/if} </div>
{:else if objectTypes.includes(bodyType)}
<KeyValueBuilder
bind:object={query.fields.requestBody}
name="param"
headings
/>
{:else if textTypes.includes(bodyType)}
<CodeMirrorEditor
height={200}
mode={bodyType === RawRestBodyTypes.JSON
? EditorModes.JSON
: EditorModes.Text}
value={query.fields.requestBody}
resize="vertical"
on:change={e => (query.fields.requestBody = e.detail)}
/>
{/if}
</div>
<style>
.margin {
margin-top: var(--spacing-m);
}
.none {
display: flex;
justify-content: center;
}
</style>

95
packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/index.svelte
View File

@ -12,10 +12,15 @@
Button, Button,
Heading, Heading,
RadioGroup, RadioGroup,
Label,
TextArea,
Table,
} 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, {
EditorModes,
} from "components/common/CodeMirrorEditor.svelte"
import RestBodyInput from "../_components/RestBodyInput.svelte" import RestBodyInput from "../_components/RestBodyInput.svelte"
import { capitalise } from "helpers" import { capitalise } from "helpers"
import { onMount } from "svelte" import { onMount } from "svelte"
@ -24,6 +29,8 @@
let query let query
let breakQs = {} let breakQs = {}
let url = "" let url = ""
// test - { info: { code: 500, time: "455ms", size: "2.09KB" }}
let response
$: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId) $: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
$: datasourceType = datasource?.source $: datasourceType = datasource?.source
@ -31,6 +38,8 @@
$: queryConfig = integrationInfo?.query $: queryConfig = integrationInfo?.query
$: url = buildUrl(url, breakQs) $: url = buildUrl(url, breakQs)
$: checkQueryName(url) $: checkQueryName(url)
$: responseSuccess =
response?.info?.code >= 200 && response?.info?.code <= 206
function getSelectedQuery() { function getSelectedQuery() {
return ( return (
@ -95,6 +104,8 @@
function saveQuery() {} function saveQuery() {}
function sendQuery() {}
onMount(() => { onMount(() => {
query = getSelectedQuery() query = getSelectedQuery()
const qs = query?.fields.queryString const qs = query?.fields.queryString
@ -138,9 +149,9 @@
<div class="url"> <div class="url">
<Input bind:value={url} /> <Input bind:value={url} />
</div> </div>
<Button cta disabled={!url} on:click={saveQuery}>Send</Button> <Button cta disabled={!url} on:click={sendQuery}>Send</Button>
</div> </div>
<Tabs selected="Params" noPadding> <Tabs selected="Params" quiet noPadding noHorizPadding>
<Tab title="Params"> <Tab title="Params">
<KeyValueBuilder bind:object={breakQs} name="param" headings /> <KeyValueBuilder bind:object={breakQs} name="param" headings />
</Tab> </Tab>
@ -160,7 +171,7 @@
getOptionLabel={option => option.name} getOptionLabel={option => option.name}
getOptionValue={option => option.value} getOptionValue={option => option.value}
/> />
<RestBodyInput bind:bodyType={query.fields.bodyType} /> <RestBodyInput bind:bodyType={query.fields.bodyType} bind:query />
</Tab> </Tab>
<Tab title="Transformer"> <Tab title="Transformer">
<Layout noPadding> <Layout noPadding>
@ -175,6 +186,7 @@
{/if} {/if}
<CodeMirrorEditor <CodeMirrorEditor
height={200} height={200}
mode={EditorModes.JSON}
value={query.transformer} value={query.transformer}
resize="vertical" resize="vertical"
on:change={e => (query.transformer = e.detail)} on:change={e => (query.transformer = e.detail)}
@ -184,16 +196,72 @@
</Tabs> </Tabs>
</Layout> </Layout>
</div> </div>
<Layout paddingY="L"> <Layout paddingY="S" gap="S">
<Divider size="S" /> <Divider size="S" />
<Heading size="M">Response</Heading> {#if !response}
<Heading size="M">Response</Heading>
{:else}
<Tabs selected="JSON" quiet noPadding noHorizPadding>
<Tab title="JSON">
<CodeMirrorEditor
height={300}
value={response.text}
resize="vertical"
readonly
on:change={e => (query.transformer = e.detail)}
/>
</Tab>
<Tab title="Schema">
<KeyValueBuilder
bind:object={response.schemaFields}
name="header"
headings
activity
/>
</Tab>
<Tab title="Raw">
<TextArea disabled value={response.text} height="300" />
</Tab>
<Tab title="Preview">
{#if response}
<Table
schema={response?.schemaFields}
data={response?.rows}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={false}
/>
{/if}
</Tab>
<div class="stats">
<Label size="L">
Status: <span class={responseSuccess ? "green" : "red"}
>{response?.info.code}</span
>
</Label>
<Label size="L">
Time: <span class={responseSuccess ? "green" : "red"}
>{response?.info.time}</span
>
</Label>
<Label size="L">
Size: <span class={responseSuccess ? "green" : "red"}
>{response?.info.size}</span
>
</Label>
<Button disabled={!responseSuccess} cta on:click={saveQuery}
>Save query</Button
>
</div>
</Tabs>
{/if}
</Layout> </Layout>
</div> </div>
{/if} {/if}
<style> <style>
.inner { .inner {
width: 840px; width: 960px;
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
} }
@ -210,4 +278,17 @@
.top { .top {
min-height: 50%; min-height: 50%;
} }
.stats {
display: flex;
gap: var(--spacing-xl);
margin-left: auto !important;
margin-right: 0;
align-items: center;
}
.green {
color: #53a761;
}
.red {
color: #ea7d82;
}
</style> </style>

1
packages/server/src/integrations/rest.ts
View File

@ -32,6 +32,7 @@ const coreFields = {
}, },
bodyType: { bodyType: {
type: DatasourceFieldTypes.STRING, type: DatasourceFieldTypes.STRING,
enum: Object.values(BodyTypes),
}, },
} }