From 65d6ca924982e6a088fd1d0d37b7a94150d52a01 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 3 Dec 2021 18:39:05 +0000
Subject: [PATCH] Adding in last components of UI that were missing.

---
 packages/bbui/src/Form/Core/TextArea.svelte   |  2 +
 packages/bbui/src/Form/TextArea.svelte        |  2 +
 packages/bbui/src/Tabs/Tabs.svelte            |  6 ++
 .../components/common/CodeMirrorEditor.svelte |  3 +
 .../_components/RestBodyInput.svelte          | 59 +++++++++++-
 .../[selectedDatasource]/rest/index.svelte    | 95 +++++++++++++++++--
 packages/server/src/integrations/rest.ts      |  1 +
 7 files changed, 156 insertions(+), 12 deletions(-)

diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
index e4738b8e5..8b530cdb0 100644
--- 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}
diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte
index b12a89263..e8f53788b 100644
--- 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>
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 2a4017e60..c801ff44f 100644
--- 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;
   }
diff --git a/packages/builder/src/components/common/CodeMirrorEditor.svelte b/packages/builder/src/components/common/CodeMirrorEditor.svelte
index 84f6db74e..3eaebde03 100644
--- 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>
 
diff --git 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
index 8e5d267fd..c7f186c90 100644
--- 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>
diff --git 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
index 47532ae3b..0cdcb06f8 100644
--- 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>
diff --git a/packages/server/src/integrations/rest.ts b/packages/server/src/integrations/rest.ts
index c5a5edbed..89ba40b07 100644
--- 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),
   },
 }