From 123dc581f017da8af48469451c2fb0922f3f4a8c Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 13 Oct 2021 16:42:07 +0100
Subject: [PATCH] Some final tweaks.

---
 .../components/common/CodeMirrorEditor.svelte |  9 ++++++--
 .../components/integration/QueryViewer.svelte | 21 +++++++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)
diff --git a/packages/builder/src/components/common/CodeMirrorEditor.svelte b/packages/builder/src/components/common/CodeMirrorEditor.svelte
index 445e94dbf..e99fed0d4 100644
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@@ -28,6 +28,7 @@
   export let mode = EditorModes.JS
   export let value = ""
   export let height = 300
+  export let resize = "none"
   export let readonly = false
   export let hints = []
   export let label
@@ -118,19 +119,23 @@
     <Label small>{label}</Label>
   </div>
 {/if}
-<div style={`--code-mirror-height: ${height}px`}>
+<div
+  style={`--code-mirror-height: ${height}px; --code-mirror-resize: ${resize}`}
+>
   <textarea tabindex="0" bind:this={textarea} readonly {value} />
 </div>
 
 <style>
   div :global(.CodeMirror) {
     height: var(--code-mirror-height);
+    min-height: var(--code-mirror-height);
     font-family: monospace;
     line-height: 1.3;
     border: var(--spectrum-alias-border-size-thin) solid;
     border-color: var(--spectrum-alias-border-color);
-    overflow: hidden;
     border-radius: var(--border-radius-s);
+    resize: var(--code-mirror-resize);
+    overflow: hidden;
   }
 
   /* Override default active line highlight colour in dark theme */
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 2d3582b3e..3213adbbe 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -28,6 +28,8 @@
 
   let parameters
   let data = []
+  const transformerDocs =
+    "https://docs.budibase.com/building-apps/data/transformers"
   const typeOptions = [
     { label: "Text", value: "STRING" },
     { label: "Number", value: "NUMBER" },
@@ -174,14 +176,23 @@
       <Divider />
     </div>
     <div class="config">
-      <Heading size="S">Transformer</Heading>
+      <div class="help-heading">
+        <Heading size="S">Transformer</Heading>
+        <Icon
+          on:click={() => window.open(transformerDocs)}
+          hoverable
+          name="Help"
+          size="L"
+        />
+      </div>
       <Body size="S"
-        >Add a Javascript function to transform the query result.</Body
+        >Add a JavaScript function to transform the query result.</Body
       >
       <CodeMirrorEditor
         height={200}
         label="Transformer"
         value={query.transformer}
+        resize="vertical"
         on:change={e => (query.transformer = e.detail)}
       />
       <Divider />
@@ -240,6 +251,7 @@
     display: grid;
     grid-gap: var(--spacing-s);
   }
+
   .config-field {
     display: grid;
     grid-template-columns: 20% 1fr;
@@ -247,6 +259,11 @@
     align-items: center;
   }
 
+  .help-heading {
+    display: flex;
+    justify-content: space-between;
+  }
+
   .field {
     display: grid;
     grid-template-columns: 1fr 1fr 5%;
