rename automation

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

@@ -46,21 +46,24 @@ const automationActions = store => ({
       return state
     })
   },
-  save: async ({ automation }) => {
+  save: async automation => {
     const UPDATE_AUTOMATION_URL = `/api/automations`
     const response = await api.put(UPDATE_AUTOMATION_URL, automation)
     const json = await response.json()
     store.update(state => {
+      const newAutomation = json.automation
       const existingIdx = state.automations.findIndex(
         existing => existing._id === automation._id
       )
-      state.automations.splice(existingIdx, 1, json.automation)
-      state.automations = state.automations
-      store.actions.select(json.automation)
+      if (existingIdx !== -1) {
+        state.automations.splice(existingIdx, 1, newAutomation)
+        state.automations = [...state.automations]
+        store.actions.select(newAutomation)
         return state
+      }
     })
   },
-  delete: async ({ automation }) => {
+  delete: async automation => {
     const { _id, _rev } = automation
     const DELETE_AUTOMATION_URL = `/api/automations/${_id}/${_rev}`
     await api.delete(DELETE_AUTOMATION_URL)
@@ -70,7 +73,7 @@ const automationActions = store => ({
         existing => existing._id === _id
       )
       state.automations.splice(existingIdx, 1)
-      state.automations = state.automations
+      state.automations = [...state.automations]
       state.selectedAutomation = null
       state.selectedBlock = null
       return state

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

@@ -1,20 +1,17 @@
 <script>
   import { goto } from "@roxi/routify"
   import { automationStore } from "builderStore"
-  import { database } from "stores/backend"
   import { ActionMenu, MenuItem, notifications, Icon } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import UpdateAutomationModal from "components/automation/AutomationPanel/UpdateAutomationModal.svelte"
 
   export let automation
 
   let confirmDeleteDialog
-  $: instanceId = $database._id
+  let updateAutomationDialog
 
   async function deleteAutomation() {
-    await automationStore.actions.delete({
-      instanceId,
-      automation,
-    })
+    await automationStore.actions.delete(automation)
     notifications.success("Automation deleted.")
     $goto("../automate")
   }
@@ -24,9 +21,8 @@
   <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}>
-    Delete
-  </MenuItem>
+  <MenuItem icon="Edit" on:click={updateAutomationDialog.show}>Edit</MenuItem>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 
 <ConfirmDialog
@@ -39,6 +35,7 @@
   <i>{automation.name}?</i>
   This action cannot be undone.
 </ConfirmDialog>
+<UpdateAutomationModal {automation} bind:this={updateAutomationDialog} />
 
 <style>
   div.icon {

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

@@ -0,0 +1,76 @@
+<script>
+  import { automationStore } from "builderStore"
+  import { notifications } from "@budibase/bbui"
+  import { Icon, Input, ModalContent, Modal } from "@budibase/bbui"
+  import analytics from "analytics"
+
+  let name
+  let error = ""
+  let modal
+
+  export let automation
+  export let onCancel = undefined
+
+  export const show = () => {
+    name = automation?.name
+    modal.show()
+  }
+  export const hide = () => {
+    modal.hide()
+  }
+
+  async function saveAutomation() {
+    const updatedAutomation = {
+      ...automation,
+      name,
+    }
+    await automationStore.actions.save(updatedAutomation)
+    notifications.success(`Automation ${name} updated successfully.`)
+    analytics.captureEvent("Automation Saved", { name })
+    hide()
+  }
+
+  function checkValid(evt) {
+    name = evt.target.value
+    if (!name) {
+      error = "Name is required"
+      return
+    }
+    error = ""
+  }
+</script>
+
+<Modal bind:this={modal} on:hide={onCancel}>
+  <ModalContent
+    title="Edit Automation"
+    confirmText="Save"
+    size="L"
+    onConfirm={saveAutomation}
+    disabled={error}
+  >
+    <Input bind:value={name} label="Name" on:input={checkValid} {error} />
+    <a
+      slot="footer"
+      target="_blank"
+      href="https://docs.budibase.com/automate/introduction-to-automate"
+    >
+      <Icon name="InfoOutline" />
+      <span>Learn about automations</span>
+    </a>
+  </ModalContent>
+</Modal>
+
+<style>
+  a {
+    color: var(--ink);
+    font-size: 14px;
+    vertical-align: middle;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
+  a span {
+    text-decoration: underline;
+    margin-left: var(--spectrum-alias-item-padding-s);
+  }
+</style>