ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Adding in last components of UI that were missing.

master
mike12345567 5 years ago
parent
039daf16d6
commit
e064237981
7 changed files with 156 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/bbui/src/Form/Core/TextArea.svelte
  2. 2
      packages/bbui/src/Form/TextArea.svelte
  3. 6
      packages/bbui/src/Tabs/Tabs.svelte
  4. 3
      packages/builder/src/components/common/CodeMirrorEditor.svelte
  5. 59
      packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/RestBodyInput.svelte
  6. 95
      packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/index.svelte
  7. 1
      packages/server/src/integrations/rest.ts

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),
}, },
} }

Write Preview
Loading…
Cancel
Save