naming automations

packages/builder/src/builderStore/store/automation/index.js

@@ -221,6 +221,30 @@ const automationActions = store => ({
     newAutomation.definition.steps.splice(blockIdx, 0, block)
     await store.actions.save(newAutomation)
   },
+  saveAutomationName: async (stepId, name) => {
+    const automation = get(selectedAutomation)
+    let newAutomation = cloneDeep(automation)
+    if (!automation) {
+      return
+    }
+    newAutomation.definition.stepNames = {
+      ...newAutomation.definition.stepNames,
+      [stepId]: name,
+    }
+
+    await store.actions.save(newAutomation)
+  },
+  deleteAutomationName: async stepId => {
+    const automation = get(selectedAutomation)
+    let newAutomation = cloneDeep(automation)
+    if (!automation) {
+      return
+    }
+    delete newAutomation.definition.stepNames[stepId]
+
+    await store.actions.save(newAutomation)
+  },
+
   deleteAutomationBlock: async block => {
     const automation = get(selectedAutomation)
     let newAutomation = cloneDeep(automation)

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

@@ -3,6 +3,7 @@
   import { Icon, Body, StatusLight, AbsTooltip } from "@budibase/bbui"
   import { externalActions } from "./ExternalActions"
   import { createEventDispatcher } from "svelte"
+  import { Features } from "constants/backend/automations"
 
   export let block
   export let open
@@ -10,16 +11,19 @@
   export let testResult
   export let isTrigger
   export let idx
+  export let addLooping
+  export let deleteStep
 
-  $: console.log($selectedAutomation)
   let validRegex = /^[A-Za-z0-9_\s]+$/
   let typing = false
-  let automationName = block?.name || ""
-
-  $: automationNameError = getAutomationNameError(automationName)
 
   const dispatch = createEventDispatcher()
 
+  $: stepNames = $selectedAutomation.definition.stepNames
+  $: automationName = stepNames[block.id] || block.name || ""
+  $: automationNameError = getAutomationNameError(automationName)
+  $: status = updateStatus(testResult, isTrigger)
+  $: isTrigger = isTrigger || block.type === "TRIGGER"
   $: {
     if (!testResult) {
       testResult = $automationStore.testResults?.steps?.filter(step =>
@@ -27,9 +31,9 @@
       )?.[0]
     }
   }
-  $: isTrigger = isTrigger || block.type === "TRIGGER"
+  $: loopBlock = $selectedAutomation?.definition.steps.find(
-
+    x => x.blockToLoop === block.id
-  $: status = updateStatus(testResult, isTrigger)
+  )
 
   async function onSelect(block) {
     await automationStore.update(state => {
@@ -53,9 +57,11 @@
   }
 
   const getAutomationNameError = name => {
-    let invalidRoleName = !validRegex.test(name)
+    if (name.length > 0) {
-    if (invalidRoleName) {
+      let invalidRoleName = !validRegex.test(name)
-      return "Please enter a role name consisting of only alphanumeric symbols and underscores"
+      if (invalidRoleName) {
+        return "Please enter a role name consisting of only alphanumeric symbols and underscores"
+      }
     }
     return null
   }
@@ -63,6 +69,18 @@
   const startTyping = async () => {
     typing = true
   }
+
+  const saveName = async () => {
+    if (automationNameError) {
+      return
+    }
+
+    if (automationName.length === 0) {
+      automationStore.actions.deleteAutomationName(block.id)
+    } else {
+      automationStore.actions.saveAutomationName(block.id, automationName)
+    }
+  }
 </script>
 
 <div
@@ -99,6 +117,7 @@
         <input
           placeholder="Enter some text"
           name="name"
+          value={automationName}
           on:input={e => {
             automationNameError = getAutomationNameError(e.target.value)
             automationName = e.target.value
@@ -106,13 +125,14 @@
               automationNameError = false // Reset the error when input is valid
             }
           }}
-          value={automationName}
           on:click={startTyping}
-          on:blur={() => {
+          on:blur={async () => {
             typing = false
             if (automationNameError) {
-              automationName = block?.name
+              automationName = stepNames[block.id]
               automationNameError = null
+            } else {
+              await saveName()
             }
           }}
         />
@@ -137,11 +157,13 @@
         }}
       >
         {#if !showTestStatus}
-          <AbsTooltip type="info" text="Add looping">
+          {#if !isTrigger && !loopBlock && (block?.features?.[Features.LOOPING] || !block.features)}
-            <Icon hoverable name="RotateCW" />
+            <AbsTooltip type="info" text="Add looping">
-          </AbsTooltip>
+              <Icon on:click={addLooping} hoverable name="RotateCW" />
+            </AbsTooltip>
+          {/if}
           <AbsTooltip type="negative" text="Delete step">
-            <Icon hoverable name="DeleteOutline" />
+            <Icon on:click={deleteStep} hoverable name="DeleteOutline" />
           </AbsTooltip>
         {/if}
         <Icon