Standardise use of ConfirmDialog for automation deletion

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

@@ -1,89 +0,0 @@
-<script>
-  import { store, backendUiStore, automationStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import ActionButton from "components/common/ActionButton.svelte"
-
-  export let onClosed
-
-  let name
-
-  $: valid = !!name
-  $: instanceId = $backendUiStore.selectedDatabase._id
-
-  async function deleteAutomation() {
-    await automationStore.actions.delete({
-      instanceId,
-      automation: $automationStore.selectedAutomation.automation,
-    })
-    onClosed()
-    notifier.danger("Automation deleted.")
-  }
-</script>
-
-<header>
-  <i class="ri-stackshare-line" />
-  Delete Automation
-</header>
-<div>
-  <p>
-    Are you sure you want to delete this automation? This action can't be
-    undone.
-  </p>
-</div>
-<footer>
-  <a href="https://docs.budibase.com">
-    <i class="ri-information-line" />
-    Learn about automations
-  </a>
-  <ActionButton on:click={onClosed}>Cancel</ActionButton>
-  <ActionButton alert on:click={deleteAutomation}>Delete</ActionButton>
-</footer>
-
-<style>
-  header {
-    font-size: 24px;
-    color: var(--ink);
-    font-weight: bold;
-    padding: 30px;
-  }
-
-  header i {
-    margin-right: 10px;
-    font-size: 20px;
-    background: var(--blue-light);
-    color: var(--grey-4);
-    padding: 8px;
-  }
-
-  div {
-    padding: 0 30px 30px 30px;
-  }
-
-  label {
-    font-size: 18px;
-    font-weight: 500;
-  }
-
-  footer {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: 5px;
-    grid-auto-columns: 3fr 1fr 1fr;
-    padding: 20px;
-    background: var(--grey-1);
-    border-radius: 0.5rem;
-  }
-
-  footer a {
-    color: var(--primary);
-    font-size: 14px;
-    vertical-align: middle;
-    display: flex;
-    align-items: center;
-  }
-
-  footer i {
-    font-size: 20px;
-    margin-right: 10px;
-  }
-</style>

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

@@ -1,28 +1,19 @@
 <script>
-  import { getContext } from "svelte"
   import { backendUiStore, automationStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
-  import DeleteAutomationModal from "./DeleteAutomationModal.svelte"
   import { Button, Input, Label } from "@budibase/bbui"
-
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  const { open, close } = getContext("simple-modal")
 
   let selectedTab = "SETUP"
+  let confirmDeleteDialog
 
+  $: instanceId = $backendUiStore.selectedDatabase._id
   $: automation = $automationStore.selectedAutomation?.automation
   $: allowDeleteBlock =
     $automationStore.selectedBlock?.type !== "TRIGGER" ||
     !automation?.definition?.steps?.length
 
-  function deleteAutomation() {
-    open(
-      DeleteAutomationModal,
-      { onClosed: close },
-      { styleContent: { padding: "0" } }
-    )
-  }
-
   function deleteAutomationBlock() {
     automationStore.actions.deleteAutomationBlock(
       $automationStore.selectedBlock
@@ -42,11 +33,19 @@
 
   async function saveAutomation() {
     await automationStore.actions.save({
-      instanceId: $backendUiStore.selectedDatabase._id,
+      instanceId,
       automation,
     })
     notifier.success(`Automation ${automation.name} saved.`)
   }
+
+  async function deleteAutomation() {
+    await automationStore.actions.delete({
+      instanceId,
+      automation,
+    })
+    notifier.success("Automation deleted.")
+  }
 </script>
 
 <section>
@@ -93,11 +92,18 @@
         on:click={saveAutomation}>
         Save Automation
       </Button>
-      <Button red wide on:click={deleteAutomation}>Delete Automation</Button>
+      <Button red wide on:click={() => confirmDeleteDialog.show()}>
+        Delete Automation
+      </Button>
     {/if}
   </div>
-
 </section>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Delete"
+  body={`Are you sure you wish to delete the automation '${automation.name}'?`}
+  okText="Delete Automation"
+  onOk={deleteAutomation} />
 
 <style>
   section {