Merge pull request #15461 from Budibase/execute-script-v2-frontend

Execute Script V2 - UX

Author: deanhannigan

packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte

@@ -18,8 +18,12 @@
   import AutomationBindingPanel from "@/components/common/bindings/ServerBindingPanel.svelte"
   import FlowItemHeader from "./FlowItemHeader.svelte"
   import FlowItemActions from "./FlowItemActions.svelte"
-  import { automationStore, selectedAutomation } from "@/stores/builder"
-  import { QueryUtils, Utils } from "@budibase/frontend-core"
+  import {
+    automationStore,
+    selectedAutomation,
+    evaluationContext,
+  } from "@/stores/builder"
+  import { QueryUtils, Utils, memo } from "@budibase/frontend-core"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher, getContext } from "svelte"
   import DragZone from "./DragZone.svelte"
@@ -34,11 +38,14 @@
   export let automation
 
   const view = getContext("draggableView")
+  const memoContext = memo({})
 
   let drawer
   let open = true
   let confirmDeleteModal
 
+  $: memoContext.set($evaluationContext)
+
   $: branch = step.inputs?.branches?.[branchIdx]
   $: editableConditionUI = branch.conditionUI || {}
 
@@ -100,6 +107,7 @@
       allowOnEmpty={false}
       builderType={"condition"}
       docsURL={null}
+      evaluationContext={$memoContext}
     />
   </DrawerContent>
 </Drawer>

packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte

@@ -32,7 +32,6 @@
     })
 
   $: groupedAutomations = groupAutomations(filteredAutomations)
-
   $: showNoResults = searchString && !filteredAutomations.length
 
   const groupAutomations = automations => {
@@ -41,7 +40,6 @@
     for (let auto of automations) {
       let category = null
       let dataTrigger = false
-
       // Group by datasource if possible
       if (dsTriggers.includes(auto.definition?.trigger?.stepId)) {
         if (auto.definition.trigger.inputs?.tableId) {
@@ -97,7 +95,10 @@
           {triggerGroup?.name}
         </div>
         {#each triggerGroup.entries as automation}
-          <AutomationNavItem {automation} icon={triggerGroup.icon} />
+          <AutomationNavItem
+            {automation}
+            icon={automation?.definition?.trigger?.icon}
+          />
         {/each}
       </div>
     {/each}

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

@@ -22,7 +22,7 @@
   } from "@budibase/bbui"
 
   import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte"
-  import { automationStore, tables } from "@/stores/builder"
+  import { automationStore, tables, evaluationContext } from "@/stores/builder"
   import { environment } from "@/stores/portal"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
   import {
@@ -70,6 +70,7 @@
   } from "@budibase/types"
   import PropField from "./PropField.svelte"
   import { utils } from "@budibase/shared-core"
+  import DrawerBindableCodeEditorField from "@/components/common/bindings/DrawerBindableCodeEditorField.svelte"
   import { API } from "@/api"
   import InfoDisplay from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
 
@@ -84,6 +85,7 @@
 
   // Stop unnecessary rendering
   const memoBlock = memo(block)
+  const memoContext = memo({})
 
   const rowTriggers = [
     TriggerStepID.ROW_UPDATED,
@@ -109,6 +111,7 @@
   let selectedRow
 
   $: memoBlock.set(block)
+  $: memoContext.set($evaluationContext)
 
   $: filters = lookForFilters(schemaProperties)
   $: filterCount =
@@ -250,7 +253,6 @@
                     onChange({ ["revision"]: e.detail })
                   },
                   updateOnChange: false,
-                  forceModal: true,
                 },
               },
             ]
@@ -278,7 +280,6 @@
                 onChange({ [rowIdentifier]: e.detail })
               },
               updateOnChange: false,
-              forceModal: true,
             },
           },
         ]
@@ -569,6 +570,10 @@
           ...update,
         })
 
+      if (!updatedAutomation) {
+        return
+      }
+
       // Exclude default or invalid data from the test data
       let updatedFields = {}
       for (const key of Object.keys(block?.inputs?.fields || {})) {
@@ -640,7 +645,7 @@
             ...newTestData,
             body: {
               ...update,
-              ...automation.testData?.body,
+              ...(automation?.testData?.body || {}),
             },
           }
         }
@@ -770,6 +775,7 @@
                 {...config.props}
                 {bindings}
                 on:change={config.props.onChange}
+                context={$memoContext}
                 bind:searchTerm={rowSearchTerm}
               />
             </PropField>
@@ -779,6 +785,7 @@
               {...config.props}
               {bindings}
               on:change={config.props.onChange}
+              context={$memoContext}
             />
           {/if}
         {/each}
@@ -903,6 +910,7 @@
                         : "Add signature"}
                       keyPlaceholder={"URL"}
                       valuePlaceholder={"Filename"}
+                      context={$memoContext}
                     />
                   {:else if isTestModal}
                     <ModalBindableInput
@@ -927,6 +935,7 @@
                         ? queryLimit
                         : ""}
                       drawerLeft="260px"
+                      context={$memoContext}
                     />
                   {/if}
                 </div>
@@ -956,6 +965,7 @@
                     panel={AutomationBindingPanel}
                     showFilterEmptyDropdown={!rowTriggers.includes(stepId)}
                     on:change={e => (tempFilters = e.detail)}
+                    evaluationContext={$memoContext}
                   />
                 </DrawerContent>
               </Drawer>
@@ -998,7 +1008,19 @@
                 on:change={e => onChange({ [key]: e.detail })}
                 value={inputData[key]}
               />
-            {:else if value.customType === "code"}
+            {:else if value.customType === "code" && stepId === ActionStepID.EXECUTE_SCRIPT_V2}
+              <div class="scriptv2-wrapper">
+                <DrawerBindableCodeEditorField
+                  {bindings}
+                  {schema}
+                  panel={AutomationBindingPanel}
+                  on:change={e => onChange({ [key]: e.detail })}
+                  context={$memoContext}
+                  value={inputData[key]}
+                />
+              </div>
+            {:else if value.customType === "code" && stepId === ActionStepID.EXECUTE_SCRIPT}
+              <!-- DEPRECATED -->
               <CodeEditorModal
                 on:hide={() => {
                   // Push any pending changes when the window closes
@@ -1080,6 +1102,7 @@
                       ? queryLimit
                       : ""}
                     drawerLeft="260px"
+                    context={$memoContext}
                   />
                 </div>
               {/if}

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

@@ -25,6 +25,7 @@
   export let meta
   export let bindings
   export let isTestModal
+  export let context = {}
 
   const typeToField = Object.values(FIELDS).reduce((acc, field) => {
     acc[field.type] = field
@@ -58,7 +59,7 @@
 
   $: parsedBindings = bindings.map(binding => {
     let clone = Object.assign({}, binding)
-    clone.icon = "ShareAndroid"
+    clone.icon = clone.icon ?? "ShareAndroid"
     return clone
   })
 
@@ -258,6 +259,7 @@
               fields: editableFields,
             }}
             {onChange}
+            {context}
           />
         {:else}
           <DrawerBindableSlot
@@ -276,6 +278,7 @@
             allowJS={true}
             updateOnChange={false}
             drawerLeft="260px"
+            {context}
           >
             <RowSelectorTypes
               {isTestModal}
@@ -286,6 +289,7 @@
               meta={{
                 fields: editableFields,
               }}
+              {context}
               onChange={change => onChange(change)}
             />
           </DrawerBindableSlot>

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

@@ -25,12 +25,13 @@
   export let meta
   export let bindings
   export let isTestModal
+  export let context
 
   $: fieldData = value[field]
 
   $: parsedBindings = bindings.map(binding => {
     let clone = Object.assign({}, binding)
-    clone.icon = "ShareAndroid"
+    clone.icon = clone.icon ?? "ShareAndroid"
     return clone
   })
 
@@ -232,6 +233,7 @@
           actionButtonDisabled={(schema.type === FieldType.ATTACHMENT_SINGLE ||
             schema.type === FieldType.SIGNATURE_SINGLE) &&
             fieldData}
+          {context}
         />
       </div>
     {:else}

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

@@ -1,18 +1,11 @@
 <script>
   import { Input, Select, Button } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
+  import { memo } from "@budibase/frontend-core"
+  import { generate } from "shortid"
 
   export let value = {}
 
-  $: fieldsArray = value
-    ? Object.entries(value).map(([name, type]) => ({
-        name,
-        type,
-      }))
-    : []
-
   const typeOptions = [
     {
       label: "Text",
@@ -36,16 +29,42 @@
     },
   ]
 
+  const dispatch = createEventDispatcher()
+  const memoValue = memo({ data: {} })
+
+  $: memoValue.set({ data: value })
+
+  $: fieldsArray = $memoValue.data
+    ? Object.entries($memoValue.data).map(([name, type]) => ({
+        name,
+        type,
+        id: generate(),
+      }))
+    : []
+
   function addField() {
-    const newValue = { ...value }
+    const newValue = { ...$memoValue.data }
     newValue[""] = "string"
-    dispatch("change", newValue)
+    fieldsArray = [...fieldsArray, { name: "", type: "string", id: generate() }]
   }
 
-  function removeField(name) {
-    const newValues = { ...value }
-    delete newValues[name]
-    dispatch("change", newValues)
+  function removeField(idx) {
+    const entries = [...fieldsArray]
+
+    // Remove empty field
+    if (!entries[idx]?.name) {
+      fieldsArray.splice(idx, 1)
+      fieldsArray = [...fieldsArray]
+      return
+    }
+
+    entries.splice(idx, 1)
+
+    const update = entries.reduce((newVals, current) => {
+      newVals[current.name.trim()] = current.type
+      return newVals
+    }, {})
+    dispatch("change", update)
   }
 
   const fieldNameChanged = originalName => e => {
@@ -57,19 +76,24 @@
     } else {
       entries = entries.filter(f => f.name !== originalName)
     }
-    value = entries.reduce((newVals, current) => {
-      newVals[current.name.trim()] = current.type
-      return newVals
-    }, {})
-    dispatch("change", value)
+
+    const update = entries
+      .filter(entry => entry.name)
+      .reduce((newVals, current) => {
+        newVals[current.name.trim()] = current.type
+        return newVals
+      }, {})
+    if (Object.keys(update).length) {
+      dispatch("change", update)
+    }
   }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="root">
   <div class="spacer" />
-  {#each fieldsArray as field}
+  {#each fieldsArray as field, idx (field.id)}
     <div class="field">
       <Input
         value={field.name}
@@ -88,7 +112,9 @@
       />
       <i
         class="remove-field ri-delete-bin-line"
-        on:click={() => removeField(field.name)}
+        on:click={() => {
+          removeField(idx)
+        }}
       />
     </div>
   {/each}
@@ -115,4 +141,12 @@
     align-items: center;
     gap: var(--spacing-m);
   }
+
+  .remove-field {
+    cursor: pointer;
+  }
+
+  .remove-field:hover {
+    color: var(--spectrum-global-color-gray-900);
+  }
 </style>