Merge branch 'nested-context-fix' of github.com:Budibase/budibase into nested-context-fix

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.17.2",
+  "version": "2.17.4",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

packages/account-portal

@@ -1 +1 @@
-Subproject commit 52f51dcfb96d3fe58c8cc7a905e7d733f7cd84c2
+Subproject commit cc12291732ee902dc832bc7d93cf2086ffdf0cff

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -15,7 +15,6 @@
     Icon,
     Checkbox,
     DatePicker,
-    Detail,
   } from "@budibase/bbui"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import { automationStore, selectedAutomation } from "builderStore"
@@ -33,6 +32,8 @@
   import Editor from "components/integration/QueryEditor.svelte"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import BindingPicker from "components/common/bindings/BindingPicker.svelte"
+  import { BindingHelpers } from "components/common/bindings/utils"
   import {
     bindingsToCompletions,
     hbAutocomplete,
@@ -56,7 +57,7 @@
   let drawer
   let fillWidth = true
   let inputData
-  let codeBindingOpen = false
+  let insertAtPos, getCaretPosition
   $: filters = lookForFilters(schemaProperties) || []
   $: tempFilters = filters
   $: stepId = block.stepId
@@ -75,6 +76,10 @@
   $: isUpdateRow = stepId === ActionStepID.UPDATE_ROW
   $: codeMode =
     stepId === "EXECUTE_BASH" ? EditorModes.Handlebars : EditorModes.JS
+  $: bindingsHelpers = new BindingHelpers(getCaretPosition, insertAtPos, {
+    disableWrapping: true,
+  })
+  $: editingJs = codeMode === EditorModes.JS
 
   $: stepCompletions =
     codeMode === EditorModes.Handlebars
@@ -539,39 +544,51 @@
             />
           {:else if value.customType === "code"}
             <CodeEditorModal>
-              {#if codeMode == EditorModes.JS}
-                <ActionButton
-                  on:click={() => (codeBindingOpen = !codeBindingOpen)}
-                  quiet
-                  icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"}
-                >
-                  <Detail size="S">Bindings</Detail>
-                </ActionButton>
-                {#if codeBindingOpen}
-                  <pre>{JSON.stringify(bindings, null, 2)}</pre>
-                {/if}
-              {/if}
-              <CodeEditor
-                value={inputData[key]}
-                on:change={e => {
-                  // need to pass without the value inside
-                  onChange({ detail: e.detail }, key)
-                  inputData[key] = e.detail
-                }}
-                completions={stepCompletions}
-                mode={codeMode}
-                autocompleteEnabled={codeMode != EditorModes.JS}
-                height={500}
-              />
-              <div class="messaging">
-                {#if codeMode == EditorModes.Handlebars}
-                  <Icon name="FlashOn" />
-                  <div class="messaging-wrap">
-                    <div>
-                      Add available bindings by typing <strong>
-                        &#125;&#125;
-                      </strong>
-                    </div>
+              <div class:js-editor={editingJs}>
+                <div class:js-code={editingJs} style="width: 100%">
+                  <CodeEditor
+                    value={inputData[key]}
+                    on:change={e => {
+                      // need to pass without the value inside
+                      onChange({ detail: e.detail }, key)
+                      inputData[key] = e.detail
+                    }}
+                    completions={stepCompletions}
+                    mode={codeMode}
+                    autocompleteEnabled={codeMode !== EditorModes.JS}
+                    bind:getCaretPosition
+                    bind:insertAtPos
+                    height={500}
+                  />
+                  <div class="messaging">
+                    {#if codeMode === EditorModes.Handlebars}
+                      <Icon name="FlashOn" />
+                      <div class="messaging-wrap">
+                        <div>
+                          Add available bindings by typing <strong>
+                            &#125;&#125;
+                          </strong>
+                        </div>
+                      </div>
+                    {/if}
+                  </div>
+                </div>
+                {#if editingJs}
+                  <div class="js-binding-picker">
+                    <BindingPicker
+                      {bindings}
+                      allowHelpers={false}
+                      addBinding={binding =>
+                        bindingsHelpers.onSelectBinding(
+                          inputData[key],
+                          binding,
+                          {
+                            js: true,
+                            dontDecode: true,
+                          }
+                        )}
+                      mode="javascript"
+                    />
                   </div>
                 {/if}
               </div>
@@ -658,4 +675,20 @@
   .test :global(.drawer) {
     width: 10000px !important;
   }
+
+  .js-editor {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .js-code {
+    flex: 7;
+  }
+
+  .js-binding-picker {
+    flex: 3;
+    margin-top: calc((var(--spacing-xl) * -1) + 1px);
+  }
 </style>

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -54,6 +54,7 @@
   export let placeholder = null
   export let autocompleteEnabled = true
   export let autofocus = false
+  export let jsBindingWrapping = true
 
   // Export a function to expose caret position
   export const getCaretPosition = () => {
@@ -187,7 +188,7 @@
       )
       complete.push(
         EditorView.inputHandler.of((view, from, to, insert) => {
-          if (insert === "$") {
+          if (jsBindingWrapping && insert === "$") {
             let { text } = view.state.doc.lineAt(from)
 
             const left = from ? text.substring(0, from) : ""

packages/builder/src/components/common/CodeEditor/index.js

@@ -286,13 +286,14 @@ export const hbInsert = (value, from, to, text) => {
   return parsedInsert
 }
 
-export function jsInsert(value, from, to, text, { helper } = {}) {
+export function jsInsert(value, from, to, text, { helper, disableWrapping }) {
   let parsedInsert = ""
 
   const left = from ? value.substring(0, from) : ""
   const right = to ? value.substring(to) : ""
-
-  if (helper) {
+  if (disableWrapping) {
+    parsedInsert = text
+  } else if (helper) {
     parsedInsert = `helpers.${text}()`
   } else if (!left.includes('$("') || !right.includes('")')) {
     parsedInsert = `$("${text}")`

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -29,10 +29,9 @@
     hbAutocomplete,
     EditorModes,
     bindingsToCompletions,
-    hbInsert,
-    jsInsert,
   } from "../CodeEditor"
   import BindingPicker from "./BindingPicker.svelte"
+  import { BindingHelpers } from "./utils"
 
   const dispatch = createEventDispatcher()
 
@@ -60,8 +59,10 @@
   let targetMode = null
 
   $: usingJS = mode === "JavaScript"
-  $: editorMode = mode == "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
+  $: editorMode =
+    mode === "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
   $: bindingCompletions = bindingsToCompletions(bindings, editorMode)
+  $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
 
   const updateValue = val => {
     valid = isValid(readableToRuntimeBinding(bindings, val))
@@ -70,31 +71,13 @@
     }
   }
 
-  // Adds a JS/HBS helper to the expression
   const onSelectHelper = (helper, js) => {
-    const pos = getCaretPosition()
-    const { start, end } = pos
-    if (js) {
-      let js = decodeJSBinding(jsValue)
-      const insertVal = jsInsert(js, start, end, helper.text, { helper: true })
-      insertAtPos({ start, end, value: insertVal })
-    } else {
-      const insertVal = hbInsert(hbsValue, start, end, helper.text)
-      insertAtPos({ start, end, value: insertVal })
-    }
+    bindingHelpers.onSelectHelper(js ? jsValue : hbsValue, helper, { js })
   }
 
-  // Adds a data binding to the expression
   const onSelectBinding = (binding, { forceJS } = {}) => {
-    const { start, end } = getCaretPosition()
-    if (usingJS || forceJS) {
-      let js = decodeJSBinding(jsValue)
-      const insertVal = jsInsert(js, start, end, binding.readableBinding)
-      insertAtPos({ start, end, value: insertVal })
-    } else {
-      const insertVal = hbInsert(hbsValue, start, end, binding.readableBinding)
-      insertAtPos({ start, end, value: insertVal })
-    }
+    const js = usingJS || forceJS
+    bindingHelpers.onSelectBinding(js ? jsValue : hbsValue, binding, { js })
   }
 
   const onChangeMode = e => {

packages/builder/src/components/common/bindings/BindingPicker.svelte

@@ -9,6 +9,7 @@
   export let bindings
   export let mode
   export let allowHelpers
+  export let noPaddingTop = false
 
   let search = ""
   let popover

packages/builder/src/components/common/bindings/utils.js

@@ -1,38 +1,41 @@
-export function addHBSBinding(value, caretPos, binding) {
-  binding = typeof binding === "string" ? binding : binding.path
-  value = value == null ? "" : value
+import { decodeJSBinding } from "@budibase/string-templates"
+import { hbInsert, jsInsert } from "components/common/CodeEditor"
 
-  const left = caretPos?.start ? value.substring(0, caretPos.start) : ""
-  const right = caretPos?.end ? value.substring(caretPos.end) : ""
-  if (!left.includes("{{") || !right.includes("}}")) {
-    binding = `{{ ${binding} }}`
+export class BindingHelpers {
+  constructor(getCaretPosition, insertAtPos, { disableWrapping } = {}) {
+    this.getCaretPosition = getCaretPosition
+    this.insertAtPos = insertAtPos
+    this.disableWrapping = disableWrapping
   }
-  if (caretPos.start) {
-    value =
-      value.substring(0, caretPos.start) +
-      binding +
-      value.substring(caretPos.end, value.length)
-  } else {
-    value += binding
-  }
-  return value
-}
 
-export function addJSBinding(value, caretPos, binding, { helper } = {}) {
-  binding = typeof binding === "string" ? binding : binding.path
-  value = value == null ? "" : value
-  if (!helper) {
-    binding = `$("${binding}")`
-  } else {
-    binding = `helpers.${binding}()`
+  // Adds a JS/HBS helper to the expression
+  onSelectHelper(value, helper, { js, dontDecode }) {
+    const pos = this.getCaretPosition()
+    const { start, end } = pos
+    if (js) {
+      const jsVal = dontDecode ? value : decodeJSBinding(value)
+      const insertVal = jsInsert(jsVal, start, end, helper.text, {
+        helper: true,
+      })
+      this.insertAtPos({ start, end, value: insertVal })
+    } else {
+      const insertVal = hbInsert(value, start, end, helper.text)
+      this.insertAtPos({ start, end, value: insertVal })
+    }
   }
-  if (caretPos.start) {
-    value =
-      value.substring(0, caretPos.start) +
-      binding +
-      value.substring(caretPos.end, value.length)
-  } else {
-    value += binding
+
+  // Adds a data binding to the expression
+  onSelectBinding(value, binding, { js, dontDecode }) {
+    const { start, end } = this.getCaretPosition()
+    if (js) {
+      const jsVal = dontDecode ? value : decodeJSBinding(value)
+      const insertVal = jsInsert(jsVal, start, end, binding.readableBinding, {
+        disableWrapping: this.disableWrapping,
+      })
+      this.insertAtPos({ start, end, value: insertVal })
+    } else {
+      const insertVal = hbInsert(value, start, end, binding.readableBinding)
+      this.insertAtPos({ start, end, value: insertVal })
+    }
   }
-  return value
 }

packages/client/manifest.json

@@ -6743,6 +6743,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "select",
         "label": "Layout",

packages/pro

@@ -1 +1 @@
-Subproject commit 4f9616f163039a0eea81319d8e2288340a2ebc79
+Subproject commit aaf7101cd1493215155cc8f83124c70d53eb1be4

packages/server/src/utilities/workerRequests.ts

@@ -1,4 +1,4 @@
-import fetch from "node-fetch"
+import { Response, default as fetch } from "node-fetch"
 import env from "../environment"
 import { checkSlashesInUrl } from "./index"
 import {
@@ -40,25 +40,21 @@ export function request(ctx?: Ctx, request?: any) {
 }
 
 async function checkResponse(
-  response: any,
+  response: Response,
   errorMsg: string,
   { ctx }: { ctx?: Ctx } = {}
 ) {
-  if (response.status !== 200) {
-    let error
-    try {
-      error = await response.json()
-      if (!error.message) {
-        error = JSON.stringify(error)
-      }
-    } catch (err) {
-      error = await response.text()
+  if (response.status >= 300) {
+    let responseErrorMessage
+    if (response.headers.get("content-type")?.includes("json")) {
+      const error = await response.json()
+      responseErrorMessage = error.message ?? JSON.stringify(error)
+    } else {
+      responseErrorMessage = await response.text()
     }
-    const msg = `Unable to ${errorMsg} - ${
-      error.message ? error.message : error
-    }`
+    const msg = `Unable to ${errorMsg} - ${responseErrorMessage}`
     if (ctx) {
-      ctx.throw(400, msg)
+      ctx.throw(msg, response.status)
     } else {
       throw msg
     }

packages/worker/package.json

@@ -63,7 +63,7 @@
     "koa-useragent": "^4.1.0",
     "lodash": "4.17.21",
     "node-fetch": "2.6.7",
-    "nodemailer": "6.7.2",
+    "nodemailer": "6.9.9",
     "passport-google-oauth": "2.0.0",
     "passport-local": "1.0.0",
     "pouchdb": "7.3.0",