From 3298b66ebfd632484b5d21ee99930e38bf6ebcde Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Tue, 27 Jul 2021 14:29:06 +0200
Subject: [PATCH 1/4] convert automation icons into toggle

---
 .../automation/SetupPanel/SetupPanel.svelte   | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index ff3874a919..25d0839d2a 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
-  import { notifications, Icon, Button, Modal, Heading } from "@budibase/bbui"
+  import { notifications, Button, Modal, Heading, Toggle } from "@budibase/bbui"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
   import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"
 
@@ -12,10 +12,10 @@
   $: automationLive = automation?.live
 
   function setAutomationLive(live) {
-    if (automation.live === live) {
+    if (automationLive === live) {
       return
     }
-    automation.live = live
+    automation.live = live;
     automationStore.actions.save({ instanceId, automation })
     if (live) {
       notifications.info(`Automation ${automation.name} enabled.`)
@@ -48,20 +48,11 @@
 
 <div class="title">
   <Heading size="S">Setup</Heading>
-  <Icon
-    l
-    disabled={!automationLive}
-    hoverable={automationLive}
-    name="PauseCircle"
-    on:click={() => setAutomationLive(false)}
-  />
-  <Icon
-    l
-    name="PlayCircle"
-    disabled={automationLive}
-    hoverable={!automationLive}
+  <Toggle
+    value={automationLive}
+    on:change={() => setAutomationLive(!automationLive)}
     data-cy="activate-automation"
-    on:click={() => setAutomationLive(true)}
+    text="Live"
   />
 </div>
 {#if $automationStore.selectedBlock}

From 5df2242cf03f498777574565093da0f36f96c889 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Tue, 27 Jul 2021 21:19:31 +0200
Subject: [PATCH 2/4] fix lint issue

---
 .../src/components/automation/SetupPanel/SetupPanel.svelte      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index 25d0839d2a..c6235f6f40 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -15,7 +15,7 @@
     if (automationLive === live) {
       return
     }
-    automation.live = live;
+    automation.live = live
     automationStore.actions.save({ instanceId, automation })
     if (live) {
       notifications.info(`Automation ${automation.name} enabled.`)

From 101ca5f01e0c00e27d3d01700785b733a9188e45 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Tue, 27 Jul 2021 23:48:06 +0200
Subject: [PATCH 3/4] fix cypress test

---
 packages/bbui/src/Form/Core/Switch.svelte                   | 3 +++
 packages/bbui/src/Form/Toggle.svelte                        | 3 ++-
 .../builder/cypress/integration/createAutomation.spec.js    | 6 +++---
 .../src/components/automation/SetupPanel/SetupPanel.svelte  | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Switch.svelte b/packages/bbui/src/Form/Core/Switch.svelte
index 0d40e67007..a19675d872 100644
--- a/packages/bbui/src/Form/Core/Switch.svelte
+++ b/packages/bbui/src/Form/Core/Switch.svelte
@@ -6,15 +6,18 @@
   export let id = null
   export let text = null
   export let disabled = false
+  export let dataCy = null
 
   const dispatch = createEventDispatcher()
   const onChange = event => {
     dispatch("change", event.target.checked)
   }
+
 </script>
 
 <div class="spectrum-Switch spectrum-Switch--emphasized">
   <input
+    data-cy={dataCy}
     checked={value}
     {disabled}
     on:change={onChange}
diff --git a/packages/bbui/src/Form/Toggle.svelte b/packages/bbui/src/Form/Toggle.svelte
index 8cc6506651..37de2836ba 100644
--- a/packages/bbui/src/Form/Toggle.svelte
+++ b/packages/bbui/src/Form/Toggle.svelte
@@ -9,6 +9,7 @@
   export let text = null
   export let disabled = false
   export let error = null
+  export let dataCy = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -18,5 +19,5 @@
 </script>
 
 <Field {label} {labelPosition} {error}>
-  <Switch {error} {disabled} {text} {value} on:change={onChange} />
+  <Switch {dataCy} {error} {disabled} {text} {value} on:change={onChange} />
 </Field>
diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js
index 75611eff06..e82eeff670 100644
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/packages/builder/cypress/integration/createAutomation.spec.js
@@ -29,10 +29,10 @@ context("Create a automation", () => {
     cy.get(".setup").within(() => {
       cy.get(".spectrum-Picker-label").click()
       cy.contains("dog").click()
-      cy.get("input")
+      cy.get(".spectrum-Textfield-input")
         .first()
         .type("goodboy")
-      cy.get("input")
+      cy.get(".spectrum-Textfield-input")
         .eq(1)
         .type("11")
     })
@@ -41,7 +41,7 @@ context("Create a automation", () => {
     cy.contains("Save Automation").click()
 
     // Activate Automation
-    cy.get("[aria-label=PlayCircle]").click()
+    cy.get("[data-cy=activate-automation]").click()
   })
 
   it("should add row when a new row is added", () => {
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index c6235f6f40..06a0df1afa 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -51,7 +51,7 @@
   <Toggle
     value={automationLive}
     on:change={() => setAutomationLive(!automationLive)}
-    data-cy="activate-automation"
+    dataCy="activate-automation"
     text="Live"
   />
 </div>

From 5221cd83622db192fc72a8481121e44029a28a02 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Wed, 28 Jul 2021 00:06:03 +0200
Subject: [PATCH 4/4] fix lint issue

---
 packages/bbui/src/Form/Core/Switch.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/Switch.svelte b/packages/bbui/src/Form/Core/Switch.svelte
index a19675d872..667b2ab871 100644
--- a/packages/bbui/src/Form/Core/Switch.svelte
+++ b/packages/bbui/src/Form/Core/Switch.svelte
@@ -12,7 +12,6 @@
   const onChange = event => {
     dispatch("change", event.target.checked)
   }
-
 </script>
 
 <div class="spectrum-Switch spectrum-Switch--emphasized">