Merge pull request #12939 from Budibase/labday/small-ux-improvement-mike-d

A small UX improvement to the automation scripting system
2024-02-02 17:21:11 +00:00 · 2024-02-02 17:21:11 +00:00 · 10159e1852
parent 3f3a38f73a c932ad8c4f
commit 10159e1852
6 changed files with 117 additions and 95 deletions
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/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>
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/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) : ""
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/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}")`
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/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 => {
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/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
--- a/packages/builder/src/components/common/bindings/utils.js
+++ b/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
 }