From 30b4c2467fb465456b56731f22bbdcb0cfd9026d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 30 Dec 2020 11:46:37 +0000
Subject: [PATCH] codemirror

---
 packages/builder/package.json                 |  1 +
 .../builder/src/builderStore/store/backend.js | 14 +++++++
 .../modals/CreateDatasourceModal.svelte       |  6 ++-
 .../src/components/integration/Editor.svelte  | 34 ++++++++++++++++
 .../components/integration/SqlEditor.svelte   |  0
 .../src/components/integration/codemirror.js  |  7 ++++
 .../src/components/integration/index.svelte   |  5 ++-
 .../[selectedDatasource]/[query]/index.svelte |  2 +-
 packages/builder/yarn.lock                    | 40 ++++++++++++++-----
 9 files changed, 95 insertions(+), 14 deletions(-)
 create mode 100644 packages/builder/src/components/integration/Editor.svelte
 delete mode 100644 packages/builder/src/components/integration/SqlEditor.svelte
 create mode 100644 packages/builder/src/components/integration/codemirror.js

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 6c023efd29..b4a382f7ac 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -71,6 +71,7 @@
     "@sentry/browser": "5.19.1",
     "@svelteschool/svelte-forms": "^0.7.0",
     "britecharts": "^2.16.0",
+    "codemirror": "^5.59.0",
     "d3-selection": "^1.4.1",
     "deepmerge": "^4.2.2",
     "fast-sort": "^2.2.0",
diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index a1e3cfffdb..4e6767fa70 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -81,6 +81,20 @@ export const getBackendUiStore = () => {
           }
 
           state.datasources = state.datasources
+          state.selectedDatasourceId = json._id
+          return state
+        })
+        return json
+      },
+      delete: async datasource => {
+        await api.delete(
+          `/api/datasources/${datasource._id}/${datasource._rev}`
+        )
+        store.update(state => {
+          state.datasources = state.datasources.filter(
+            existing => existing._id !== datasource._id
+          )
+          state.selectedDatasourceId = null
           return state
         })
       },
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 21c297c8a9..ef458c1953 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -27,7 +27,7 @@
     const { type, ...config } = integration
 
     // Create datasource
-    await backendUiStore.actions.datasources.save({
+    const response = await backendUiStore.actions.datasources.save({
       name,
       source: type,
       config
@@ -35,8 +35,10 @@
     notifier.success(`Datasource ${name} created successfully.`)
     analytics.captureEvent("Datasource Created", { name })
 
+    console.log(response)
+
     // Navigate to new datasource
-    $goto(`./datasource/${datasource._id}`)
+    $goto(`./datasource/${response._id}`)
   }
 </script>
 
diff --git a/packages/builder/src/components/integration/Editor.svelte b/packages/builder/src/components/integration/Editor.svelte
new file mode 100644
index 0000000000..f2bce2f222
--- /dev/null
+++ b/packages/builder/src/components/integration/Editor.svelte
@@ -0,0 +1,34 @@
+<script>
+  import cm from "./codemirror"
+  import { onMount, createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+
+  export let value
+  export let mode = "sql"
+
+  let editor
+  let codemirror
+
+  onMount(async () => {
+    codemirror = cm.fromTextArea(editor, {
+      lineNumbers: true,
+      mode,
+      lineWrapping: true,
+      indentUnit: 2,
+      tabSize: 2,
+      autoCloseBrackets: true,
+      autoCloseTags: true,
+      extraKeys: {
+        "Ctrl-/": "toggleComment",
+      },
+    })
+    codemirror.on("change", instance => {
+      const code = instance.getValue()
+      value = code
+      // dispatch("change", { value })
+    })
+  })
+</script>
+
+<textarea bind:value bind:this={editor} />
diff --git a/packages/builder/src/components/integration/SqlEditor.svelte b/packages/builder/src/components/integration/SqlEditor.svelte
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/builder/src/components/integration/codemirror.js b/packages/builder/src/components/integration/codemirror.js
new file mode 100644
index 0000000000..3b823a1c97
--- /dev/null
+++ b/packages/builder/src/components/integration/codemirror.js
@@ -0,0 +1,7 @@
+import CodeMirror from "codemirror"
+import "codemirror/lib/codemirror.css"
+import "codemirror/mode/sql/sql"
+import "codemirror/mode/handlebars/handlebars"
+import "codemirror/mode/javascript/javascript"
+
+export default CodeMirror
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index e7f0a7f47c..15021fe489 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -1,5 +1,6 @@
 <script>
   import { TextArea } from "@budibase/bbui"
+  import Editor from "./Editor.svelte"
 
   const QueryTypes = {
     SQL: "sql",
@@ -7,8 +8,10 @@
 
   export let queryType
   export let query
+
+  $: console.log(query)
 </script>
 
 {#if queryType === QueryTypes.SQL}
-  <TextArea thin label="Query" bind:value={query} />
+  <Editor label="Query" bind:value={query} />
 {/if}
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
index 0a692cf422..087c817c13 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@@ -8,7 +8,7 @@
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === $params.selectedDatasource
   )
-  $: query = datasource.queries[$params.query]
+  $: query = datasource?.queries[$params.query]
 </script>
 
 {#if $backendUiStore.selectedDatabase._id && query}
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index fe8713612a..04babb5420 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -855,9 +855,9 @@
     turndown "^7.0.0"
 
 "@budibase/client@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.4.2.tgz#cb146681377f96ca907234606cdfa9f66db2139e"
-  integrity sha512-3KjkSMFc8mYMw48oYhfszJHgG03P9XS8+bRlAsPtT0m5RP8GF7jxWNDDrpl80pbi1NA1D+QmMo5SjLeCAO1Y+Q==
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.4.3.tgz#eaf1ac83ed04722c29ea51907ac7c2190bd09b74"
+  integrity sha512-gfVIU7P1HCMuH9rgmqgv2pD5oFDwwuX0QF3+FXuKR3/Cr6JW+bstVsNZHGgwOrmbxT3oAxfeNX186zrQupJ42w==
   dependencies:
     deep-equal "^2.0.1"
     mustache "^4.0.1"
@@ -2255,6 +2255,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codemirror@^5.59.0:
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.0.tgz#6d8132055459aabf21d04cae5cf5c430e5c57bb9"
+  integrity sha512-UGzSkCacY9z0rSpQ3wnTWRN2nvRE6foDXnJltWW8pazInR/R+3gXHrao4IFQMv/bSBvFBxt8/HPpkpKAS54x5Q==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -3127,7 +3132,7 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
+es-abstract@^1.18.0-next.1:
   version "1.18.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
   integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
@@ -3632,7 +3637,7 @@ get-caller-file@^2.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
+get-intrinsic@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
   integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
@@ -3641,6 +3646,15 @@ get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-intrinsic@^1.0.1, get-intrinsic@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
+  integrity sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
@@ -5599,6 +5613,11 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
+object-inspect@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+
 object-is@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
@@ -6719,12 +6738,13 @@ shortid@^2.2.15:
     nanoid "^2.1.0"
 
 side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
   dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
 
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"