Merge pull request #2131 from mslourens/automation_live_toggle

convert automation icons into toggle

packages/bbui/src/Form/Core/Switch.svelte

@@ -6,6 +6,7 @@
   export let id = null
   export let text = null
   export let disabled = false
+  export let dataCy = null
 
   const dispatch = createEventDispatcher()
   const onChange = event => {
@@ -15,6 +16,7 @@
 
 <div class="spectrum-Switch spectrum-Switch--emphasized">
   <input
+    data-cy={dataCy}
     checked={value}
     {disabled}
     on:change={onChange}

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>

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", () => {

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,7 +12,7 @@
   $: automationLive = automation?.live
 
   function setAutomationLive(live) {
-    if (automation.live === live) {
+    if (automationLive === live) {
       return
     }
     automation.live = live
@@ -48,20 +48,11 @@
 
 <div class="title">
   <Heading size="S">Setup</Heading>
-  <Icon
+  <Toggle
-    l
+    value={automationLive}
-    disabled={!automationLive}
+    on:change={() => setAutomationLive(!automationLive)}
-    hoverable={automationLive}
+    dataCy="activate-automation"
-    name="PauseCircle"
+    text="Live"
-    on:click={() => setAutomationLive(false)}
-  />
-  <Icon
-    l
-    name="PlayCircle"
-    disabled={automationLive}
-    hoverable={!automationLive}
-    data-cy="activate-automation"
-    on:click={() => setAutomationLive(true)}
   />
 </div>
 {#if $automationStore.selectedBlock}