Adding in last components of UI that were missing.

5 years ago · 65d6ca9249
7 changed files with 156 additions and 12 deletions
--- a/packages/bbui/src/Form/Core/TextArea.svelte
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@ -7,6 +7,7 @@
  export let disabled = false
  export let error = null
  export let id = null
+  export let height = null
  export const getCaretPosition = () => ({
    start: textarea.selectionStart,
    end: textarea.selectionEnd,
@ -22,6 +23,7 @@
 </script>

 <div
+  style={height ? `height: ${height}px;` : ""}
  class="spectrum-Textfield spectrum-Textfield--multiline"
  class:is-invalid={!!error}
  class:is-disabled={disabled}
--- a/packages/bbui/src/Form/TextArea.svelte
+++ b/packages/bbui/src/Form/TextArea.svelte
@ -10,6 +10,7 @@
  export let disabled = false
  export let error = null
  export let getCaretPosition = null
+  export let height = null

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -25,6 +26,7 @@
    {disabled}
    {value}
    {placeholder}
+    {height}
    on:change={onChange}
  />
 </Field>
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@ -6,6 +6,8 @@
  export let selected
  export let vertical = 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 emphasized = false

@ -59,6 +61,7 @@
 <div
  bind:this={container}
  class:quiet
+  class:noHorizPadding
  class="selected-border spectrum-Tabs {quiet &&
    'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical
    ? 'vertical'
@ -99,6 +102,9 @@
  .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
    bottom: 0 !important;
  }
+  .noHorizPadding {
+    padding: 0;
+  }
  .noPadding {
    margin: 0;
  }
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@ -15,6 +15,9 @@
      name: "handlebars",
      base: "text/html",
    },
+    Text: {
+      name: "text/html",
+    },
  }
 </script>

--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/RestBodyInput.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/RestBodyInput.svelte
@ -1,13 +1,62 @@
 <script>
  import { Body } from "@budibase/bbui"
  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 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>

-{#if bodyType === RawRestBodyTypes.NONE}
-  <Body>The request does not have a body</Body>
-{:else if bodyType === RawRestBodyTypes.FORM}
-  <Body>Form</Body>
-{/if}
+<div class="margin">
+  {#if bodyType === RawRestBodyTypes.NONE}
+    <div class="none">
+      <Body size="S" weight="800">THE REQUEST DOES NOT HAVE A BODY</Body>
+    </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>
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/index.svelte
@ -12,10 +12,15 @@
    Button,
    Heading,
    RadioGroup,
+    Label,
+    TextArea,
+    Table,
  } from "@budibase/bbui"
  import KeyValueBuilder from "components/integration/KeyValueBuilder.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 { capitalise } from "helpers"
  import { onMount } from "svelte"
@ -24,6 +29,8 @@
  let query
  let breakQs = {}
  let url = ""
+  // test - { info: { code: 500, time: "455ms", size: "2.09KB" }}
+  let response

  $: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
  $: datasourceType = datasource?.source
@ -31,6 +38,8 @@
  $: queryConfig = integrationInfo?.query
  $: url = buildUrl(url, breakQs)
  $: checkQueryName(url)
+  $: responseSuccess =
+    response?.info?.code >= 200 && response?.info?.code <= 206

  function getSelectedQuery() {
    return (
@ -95,6 +104,8 @@

  function saveQuery() {}

+  function sendQuery() {}
+
  onMount(() => {
    query = getSelectedQuery()
    const qs = query?.fields.queryString
@ -138,9 +149,9 @@
          <div class="url">
            <Input bind:value={url} />
          </div>
-          <Button cta disabled={!url} on:click={saveQuery}>Send</Button>
+          <Button cta disabled={!url} on:click={sendQuery}>Send</Button>
        </div>
-        <Tabs selected="Params" noPadding>
+        <Tabs selected="Params" quiet noPadding noHorizPadding>
          <Tab title="Params">
            <KeyValueBuilder bind:object={breakQs} name="param" headings />
          </Tab>
@ -160,7 +171,7 @@
              getOptionLabel={option => option.name}
              getOptionValue={option => option.value}
            />
-            <RestBodyInput bind:bodyType={query.fields.bodyType} />
+            <RestBodyInput bind:bodyType={query.fields.bodyType} bind:query />
          </Tab>
          <Tab title="Transformer">
            <Layout noPadding>
@ -175,6 +186,7 @@
              {/if}
              <CodeMirrorEditor
                height={200}
+                mode={EditorModes.JSON}
                value={query.transformer}
                resize="vertical"
                on:change={e => (query.transformer = e.detail)}
@ -184,16 +196,72 @@
        </Tabs>
      </Layout>
    </div>
-    <Layout paddingY="L">
+    <Layout paddingY="S" gap="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>
  </div>
 {/if}

 <style>
  .inner {
-    width: 840px;
+    width: 960px;
    margin: 0 auto;
    height: 100%;
  }
@ -210,4 +278,17 @@
  .top {
    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>
--- a/packages/server/src/integrations/rest.ts
+++ b/packages/server/src/integrations/rest.ts
@ -32,6 +32,7 @@ const coreFields = {
  },
  bodyType: {
    type: DatasourceFieldTypes.STRING,
+    enum: Object.values(BodyTypes),
  },
 }