Merge pull request #15545 from Budibase/execute-script-tweaks

Pull out new code editor field and drawer bindable slot into single component

Author: aptkingston

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

@@ -62,8 +62,7 @@
   } from "@budibase/types"
   import PropField from "./PropField.svelte"
   import { utils } from "@budibase/shared-core"
-  import { encodeJSBinding } from "@budibase/string-templates"
-  import CodeEditorField from "@/components/common/bindings/CodeEditorField.svelte"
+  import DrawerBindableCodeEditorField from "@/components/common/bindings/DrawerBindableCodeEditorField.svelte"
 
   export let automation
   export let block
@@ -908,32 +907,14 @@
               />
             {:else if value.customType === "code" && stepId === ActionStepID.EXECUTE_SCRIPT_V2}
               <div class="scriptv2-wrapper">
-                <DrawerBindableSlot
-                  title={"Edit Code"}
-                  panel={AutomationBindingPanel}
-                  type={"longform"}
+                <DrawerBindableCodeEditorField
+                  {bindings}
                   {schema}
+                  panel={AutomationBindingPanel}
                   on:change={e => onChange({ [key]: e.detail })}
-                  value={inputData[key]}
-                  {bindings}
-                  allowJS={true}
-                  allowHBS={false}
-                  updateOnChange={false}
                   context={$memoContext}
-                >
-                  <div class="field-wrap code-editor">
-                    <CodeEditorField
-                      value={inputData[key]}
-                      {bindings}
-                      context={$memoContext}
-                      allowHBS={false}
-                      allowJS
-                      placeholder={"Add bindings by typing $"}
-                      on:blur={e =>
-                        onChange({ [key]: encodeJSBinding(e.detail) })}
-                    />
-                  </div>
-                </DrawerBindableSlot>
+                  value={inputData[key]}
+                />
               </div>
             {:else if value.customType === "code" && stepId === ActionStepID.EXECUTE_SCRIPT}
               <!-- DEPRECATED -->
@@ -1086,23 +1067,4 @@
     flex: 3;
     margin-top: calc((var(--spacing-xl) * -1) + 1px);
   }
-
-  .field-wrap :global(.cm-editor),
-  .field-wrap :global(.cm-scroller) {
-    border-radius: 4px;
-  }
-  .field-wrap {
-    box-sizing: border-box;
-    border: 1px solid var(--spectrum-global-color-gray-400);
-    border-radius: 4px;
-  }
-  .field-wrap.code-editor {
-    height: 180px;
-  }
-  .scriptv2-wrapper :global(.icon.slot-icon) {
-    top: 1px;
-    border-bottom-left-radius: var(--spectrum-alias-border-radius-regular);
-    border-right: 0px;
-    border-bottom: 1px solid var(--spectrum-alias-border-color);
-  }
 </style>

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

@@ -61,6 +61,8 @@
   let mode: BindingMode | null
   let sidePanel: SidePanel | null
   let initialValueJS = value?.startsWith?.("{{ js ")
+  let jsValue = initialValueJS ? value : null
+  let hbsValue = initialValueJS ? null : value
   let getCaretPosition: CaretPositionFn | undefined
   let insertAtPos: InsertAtPositionFn | undefined
   let targetMode: BindingMode | null = null
@@ -69,10 +71,6 @@
   let expressionError: string | undefined
   let evaluating = false
 
-  // Ensure these values are not stale
-  $: jsValue = initialValueJS ? value : null
-  $: hbsValue = initialValueJS ? null : value
-
   $: useSnippets = allowSnippets && !$licensing.isFreePlan
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
   $: sidePanelOptions = getSidePanelOptions(

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

@@ -36,6 +36,7 @@
   export let context = null
   export let autofocusEditor = false
   export let placeholder = null
+  export let height = 180
 
   let getCaretPosition: CaretPositionFn | undefined
   let insertAtPos: InsertAtPositionFn | undefined
@@ -131,7 +132,7 @@
   }
 </script>
 
-<div class="code-panel">
+<div class="code-panel" style="height:{height}px;">
   <div class="editor">
     {#key jsCompletions}
       <CodeEditor
@@ -154,7 +155,6 @@
 
 <style>
   .code-panel {
-    height: 100%;
     display: flex;
   }
 

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

@@ -0,0 +1,68 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import {
+    ClientBindingPanel,
+    DrawerBindableSlot,
+  } from "@/components/common/bindings"
+  import CodeEditorField from "@/components/common/bindings/CodeEditorField.svelte"
+
+  export let value = ""
+  export let panel = ClientBindingPanel
+  export let schema = null
+  export let bindings = []
+  export let context = {}
+  export let height = 180
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="wrapper">
+  <DrawerBindableSlot
+    {panel}
+    {schema}
+    {value}
+    {bindings}
+    {context}
+    title="Edit Code"
+    type="longform"
+    allowJS={true}
+    allowHBS={false}
+    updateOnChange={false}
+    on:change={e => {
+      value = e.detail
+      dispatch("change", value)
+    }}
+  >
+    <div class="code-editor-wrapper">
+      <CodeEditorField
+        {value}
+        {bindings}
+        {context}
+        {height}
+        allowHBS={false}
+        allowJS
+        placeholder={"Add bindings by typing $"}
+        on:change={e => (value = e.detail)}
+        on:blur={() => dispatch("change", value)}
+      />
+    </div>
+  </DrawerBindableSlot>
+</div>
+
+<style>
+  .wrapper :global(.icon.slot-icon) {
+    top: 1px;
+    border-radius: 0 4px 0 4px;
+    border-right: 0;
+    border-bottom: 1px solid var(--spectrum-alias-border-color);
+  }
+  .wrapper :global(.cm-editor),
+  .wrapper :global(.cm-scroller) {
+    border-radius: 4px;
+  }
+  .code-editor-wrapper {
+    box-sizing: border-box;
+    border: 1px solid var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+  }
+</style>

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

@@ -22,7 +22,6 @@
   export let updateOnChange = true
   export let type
   export let schema
-
   export let allowHBS = true
   export let context = {}
 
@@ -174,7 +173,7 @@
   {:else}
     <slot />
   {/if}
-  {#if !disabled && type !== "formula" && !disabled && !attachmentTypes.includes(type)}
+  {#if !disabled && type !== "formula" && !attachmentTypes.includes(type)}
     <div
       class={`icon ${getIconClass(value, type)}`}
       on:click={() => {