REST integration complete

packages/builder/src/components/backend/DatasourceNavigator/icons/Rest.svelte

@@ -0,0 +1,36 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 120 120"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M103.125 20.625H68.25L60.375
+    36.375H16.5V99.375H111V20.625H103.125ZM103.125 36.375H72.375L76.5
+    28.5H103.125V36.375Z"
+    fill="#FFBA58" />
+  <path
+    d="M75 46.875V52.5H60C58.0127 52.5059 56.1085 53.298 54.7033 54.7033C53.298
+    56.1085 52.5059 58.0127 52.5 60V75H46.875C44.3886 75 42.004 75.9877 40.2459
+    77.7459C38.4877 79.504 37.5 81.8886 37.5 84.375C37.5 86.8614 38.4877 89.246
+    40.2459 91.0041C42.004 92.7623 44.3886 93.75 46.875
+    93.75H52.5V108.75C52.5059 110.737 53.298 112.642 54.7033 114.047C56.1085
+    115.452 58.0127 116.244 60 116.25H74.25V110.625C74.25 107.94 75.3167 105.364
+    77.2155 103.466C79.1143 101.567 81.6897 100.5 84.375 100.5C87.0603 100.5
+    89.6357 101.567 91.5345 103.466C93.4333 105.364 94.5 107.94 94.5
+    110.625V116.25H108.75C110.737 116.244 112.642 115.452 114.047
+    114.047C115.452 112.642 116.244 110.737 116.25 108.75V94.5H110.625C107.94
+    94.5 105.364 93.4333 103.466 91.5345C101.567 89.6357 100.5 87.0603 100.5
+    84.375C100.5 81.6897 101.567 79.1143 103.466 77.2155C105.364 75.3167 107.94
+    74.25 110.625 74.25H116.25V60C116.244 58.0127 115.452 56.1085 114.047
+    54.7033C112.642 53.298 110.737 52.5059 108.75 52.5H93.75V46.875C93.75
+    44.3886 92.7623 42.004 91.0041 40.2459C89.246 38.4877 86.8614 37.5 84.375
+    37.5C81.8886 37.5 79.504 38.4877 77.7459 40.2459C75.9877 42.004 75 44.3886
+    75 46.875Z"
+    fill="#E76A00" />
+</svg>

packages/builder/src/components/backend/DatasourceNavigator/icons/index.js

@@ -8,6 +8,7 @@ import Airtable from "./Airtable.svelte"
 import SqlServer from "./SQLServer.svelte"
 import MySQL from "./MySQL.svelte"
 import ArangoDB from "./ArangoDB.svelte"
+import Rest from "./Rest.svelte"
 
 export default {
   POSTGRES: Postgres,
@@ -20,4 +21,5 @@ export default {
   AIRTABLE: Airtable,
   MYSQL: MySQL,
   ARANGODB: ArangoDB,
+  REST: Rest,
 }

packages/builder/src/components/integration/KeyValueBuilder.svelte

@@ -0,0 +1,45 @@
+<script>
+  import { Input } from "@budibase/bbui"
+
+  export let object = {}
+
+  let fields = []
+
+  $: object = fields.reduce(
+    (acc, next) => ({ ...acc, [next.name]: next.value }),
+    {}
+  )
+
+  function addEntry() {
+    fields = [...fields, {}]
+  }
+
+  function deleteEntry(idx) {
+    fields.splice(idx, 1)
+    fields = fields
+  }
+</script>
+
+<!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
+<div class="container">
+  {#each fields as field, idx}
+    <Input outline thin bind:value={field.name} />
+    <Input outline bind:value={field.value} />
+    <i class="ri-close-circle-fill" on:click={() => deleteEntry(idx)} />
+  {/each}
+</div>
+<i class="ri-add-circle-fill" on:click={addEntry} />
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 20px;
+    grid-gap: var(--spacing-m);
+    align-items: center;
+  }
+
+  .ri-close-circle-fill,
+  .ri-add-circle-fill {
+    cursor: pointer;
+  }
+</style>

packages/builder/src/components/integration/QueryFieldsBuilder.svelte

@@ -8,6 +8,7 @@
     Select,
   } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
+  import KeyValueBuilder from "./KeyValueBuilder.svelte"
 
   export let fields = {}
   export let schema
@@ -27,53 +28,21 @@
     fields.customData = detail.value
   }
 
-  function updateSubfieldName({ names, definition }) {
-    console.log(names, definition)
-    const temp = definition[names.old]
-    definition[names.new] = temp
-    delete definition[names.old]
-    // fields = fields
-  }
-
-  // function addCustomField() {
-
-  // }
-
-  // function removeCustomField() {
-
-  // }
 </script>
 
 <form on:submit|preventDefault>
   <div class="field">
     {#each schemaKeys as field}
-      <!-- New Stuff -->
       {#if schema.fields[field]?.type === "object"}
         <Label extraSmall grey>{field}</Label>
-        <div class="inner-fields"> 
+        <KeyValueBuilder bind:object={fields[field]} /> 
-          {#each Object.keys(fields[field] || {}) as subfield}
+      {:else if schema.fields[field]?.type === "json"}
-            <Input outline thin on:change={e => updateSubfieldName({ 
+        <Label extraSmall grey>{field}</Label>
-                names: { 
+        <Editor
-                  new: e.target.value, 
+          mode="json"
-                  old: subfield 
+          on:change={({ detail }) => fields[field] = detail.value}
-                }, 
+          readOnly={!editable}
-                definition: fields[field] 
+          value={fields[field]} />
-              })} 
-            />
-            <Input outline bind:value={fields[field][subfield]} />
-            <i class="ri-close-circle-fill" on:click={() => { 
-              delete fields[field][subfield] 
-              fields[field] = fields[field]
-            }} />
-          {/each}
-        </div>
-        <i class="ri-add-circle-fill" on:click={() => {
-          // set new empty field
-          fields[field] = {
-            ...fields[field] || {},
-            [""]: ""
-          }
-        }} />
       {:else}
         <Input
           label={field}
@@ -97,10 +66,6 @@
 {/if}
 
 <style>
-  form {
-    width: 600px;
-  }
-
   .field {
     margin-bottom: var(--spacing-m);
     display: grid;
@@ -109,11 +74,4 @@
     align-items: center;
   }
 
-  .inner-fields {
-    margin-bottom: var(--spacing-m);
-    display: grid;
-    grid-template-columns: 1fr 1fr 20px;
-    grid-gap: var(--spacing-m);
-    align-items: center;
-  }
 </style>

packages/builder/src/components/integration/QueryViewer.svelte

@@ -181,7 +181,13 @@
         {#if data}
           <Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
             {#if tab === 'JSON'}
-              <pre class="preview">{JSON.stringify(data[0], undefined, 2)}</pre>
+            <pre class="preview">
+              {#if !data[0]}
+                Please run your query to fetch some data.
+              {:else}
+                {JSON.stringify(data[0], undefined, 2)}
+              {/if}
+            </pre>
             {:else if tab === 'PREVIEW'}
               <ExternalDataSourceTable {query} {data} />
             {:else if tab === 'SCHEMA'}

packages/server/src/api/index.js

@@ -53,6 +53,8 @@ router.use(async (ctx, next) => {
 
 router.get("/health", ctx => (ctx.status = 200))
 
+router.post("/yeet", ctx => (ctx.body = ctx.request.body))
+
 router.use(authRoutes.routes())
 router.use(authRoutes.allowedMethods())
 

packages/server/src/integrations/Integration.js

@@ -10,4 +10,5 @@ exports.FIELD_TYPES = {
   PASSWORD: "password",
   LIST: "list",
   OBJECT: "object",
+  JSON: "json",
 }

packages/server/src/integrations/airtable.js

@@ -50,7 +50,7 @@ const SCHEMA = {
       },
     },
     delete: {
-      type: FIELD_TYPES.JSON,
+      type: QUERY_TYPES.JSON,
     },
   },
 }

packages/server/src/integrations/rest.js

@@ -11,6 +11,20 @@ const SCHEMA = {
     },
   },
   query: {
+    create: {
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        path: {
+          type: FIELD_TYPES.STRING,
+        },
+        headers: {
+          type: FIELD_TYPES.OBJECT,
+        },
+        requestBody: {
+          type: FIELD_TYPES.JSON,
+        },
+      },
+    },
     read: {
       type: QUERY_TYPES.FIELDS,
       fields: {
@@ -22,6 +36,34 @@ const SCHEMA = {
         },
       },
     },
+    update: {
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        path: {
+          type: FIELD_TYPES.STRING,
+        },
+        headers: {
+          type: FIELD_TYPES.OBJECT,
+        },
+        requestBody: {
+          type: FIELD_TYPES.JSON,
+        },
+      },
+    },
+    delete: {
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        path: {
+          type: FIELD_TYPES.STRING,
+        },
+        headers: {
+          type: FIELD_TYPES.OBJECT,
+        },
+        requestBody: {
+          type: FIELD_TYPES.JSON,
+        },
+      },
+    },
   },
 }
 
@@ -30,9 +72,15 @@ class RestIntegration {
     this.config = config
   }
 
-  // create(query) {
+  async create({ path, headers = {}, requestBody }) {
-  //   return this.query(query)
+    const response = await fetch(this.config.url + path, {
-  // }
+      method: "POST",
+      headers,
+      body: requestBody,
+    })
+
+    return await response.json()
+  }
 
   async read({ path, headers = {} }) {
     const response = await fetch(this.config.url + path, {
@@ -42,13 +90,24 @@ class RestIntegration {
     return await response.json()
   }
 
-  // update(query) {
+  async update({ path, headers = {}, requestBody }) {
-  //   return this.query(query)
+    const response = await fetch(this.config.url + path, {
-  // }
+      method: "POST",
+      headers,
+      body: requestBody,
+    })
+
+    return await response.json()
+  }
 
-  // delete(query) {
+  async delete({ path, headers = {} }) {
-  //   return this.query(query)
+    const response = await fetch(this.config.url + path, {
-  // }
+      method: "DELETE",
+      headers,
+    })
+
+    return await response.json()
+  }
 }
 
 module.exports = {