REST integration end to end

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

@@ -18,21 +18,72 @@
   $: fieldKeys = Object.keys(fields)
   $: schemaKeys = Object.keys(schema.fields)
 
+  $: console.log({
+    fields,
+    schema
+  })
+
   function updateCustomFields({ detail }) {
     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}
-      <Input
+      <!-- New Stuff -->
-        placeholder="Enter {field} name"
+      {#if schema.fields[field]?.type === "object"}
-        outline
+        <Label extraSmall grey>{field}</Label>
-        disabled={!editable}
+        <div class="inner-fields"> 
-        type={schema.fields[field]?.type}
+          {#each Object.keys(fields[field] || {}) as subfield}
-        required={schema.fields[field]?.required}
+            <Input outline thin on:change={e => updateSubfieldName({ 
-        bind:value={fields[field]} />
+                names: { 
+                  new: e.target.value, 
+                  old: subfield 
+                }, 
+                definition: 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}
+          placeholder="Enter {field} name"
+          outline
+          disabled={!editable}
+          type={schema.fields[field]?.type}
+          required={schema.fields[field]?.required}
+          bind:value={fields[field]} />
+      {/if}
     {/each}
   </div>
 </form>
@@ -46,10 +97,22 @@
 {/if}
 
 <style>
+  form {
+    width: 600px;
+  }
+
   .field {
     margin-bottom: var(--spacing-m);
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
+    grid-gap: var(--spacing-m);
+    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;
   }

packages/server/src/api/controllers/query.js

@@ -58,7 +58,13 @@ async function enrichQueryFields(fields, parameters) {
 
   // enrich the fields with dynamic parameters
   for (let key of Object.keys(fields)) {
-    enrichedQuery[key] = await processString(fields[key], parameters)
+    if (typeof fields[key] === "object") {
+      // enrich nested fields object
+      enrichedQuery[key] = await enrichQueryFields(fields[key], parameters)
+    } else {
+      // enrich string value as normal
+      enrichedQuery[key] = await processString(fields[key], parameters)
+    }
   }
 
   if (enrichedQuery.json || enrichedQuery.customData) {

packages/server/src/integrations/Integration.js

@@ -9,4 +9,5 @@ exports.FIELD_TYPES = {
   NUMBER: "number",
   PASSWORD: "password",
   LIST: "list",
+  OBJECT: "object",
 }

packages/server/src/integrations/index.js

@@ -8,6 +8,7 @@ const s3 = require("./s3")
 const airtable = require("./airtable")
 const mysql = require("./mysql")
 const arangodb = require("./arangodb")
+const rest = require("./rest")
 
 const DEFINITIONS = {
   POSTGRES: postgres.schema,
@@ -20,6 +21,7 @@ const DEFINITIONS = {
   AIRTABLE: airtable.schema,
   MYSQL: mysql.schema,
   ARANGODB: arangodb.schema,
+  REST: rest.schema,
 }
 
 const INTEGRATIONS = {
@@ -33,6 +35,7 @@ const INTEGRATIONS = {
   AIRTABLE: airtable.integration,
   MYSQL: mysql.integration,
   ARANGODB: arangodb.integration,
+  REST: rest.integration,
 }
 
 module.exports = {

packages/server/src/integrations/mysql.js

@@ -1,5 +1,5 @@
 const mysql = require("mysql")
-const { FIELD_TYPES } = require("./Integration")
+const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   docs: "https://github.com/mysqljs/mysql",
@@ -31,16 +31,16 @@ const SCHEMA = {
   },
   query: {
     create: {
-      type: "sql",
+      type: QUERY_TYPES.SQL,
     },
     read: {
-      type: "sql",
+      type: QUERY_TYPES.SQL,
     },
     update: {
-      type: "sql",
+      type: QUERY_TYPES.SQL,
     },
     delete: {
-      type: "sql",
+      type: QUERY_TYPES.SQL,
     },
   },
 }

packages/server/src/integrations/rest.js

@@ -0,0 +1,57 @@
+const fetch = require("node-fetch")
+const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
+
+const SCHEMA = {
+  docs: "https://github.com/node-fetch/node-fetch",
+  datasource: {
+    url: {
+      type: FIELD_TYPES.STRING,
+      default: "localhost",
+      required: true,
+    },
+  },
+  query: {
+    read: {
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        path: {
+          type: FIELD_TYPES.STRING,
+        },
+        headers: {
+          type: FIELD_TYPES.OBJECT,
+        },
+      },
+    },
+  },
+}
+
+class RestIntegration {
+  constructor(config) {
+    this.config = config
+  }
+
+  // create(query) {
+  //   return this.query(query)
+  // }
+
+  async read({ path, headers = {} }) {
+    const response = await fetch(this.config.url + path, {
+      headers,
+    })
+
+    return await response.json()
+  }
+
+  // update(query) {
+  //   return this.query(query)
+  // }
+
+  // delete(query) {
+  //   return this.query(query)
+  // }
+}
+
+module.exports = {
+  schema: SCHEMA,
+  integration: RestIntegration,
+}