Update icons

packages/bbui/src/Badge/Badge.svelte

@@ -7,6 +7,7 @@
   export let orange = false
   export let yellow = false
   export let seafoam = false
+  export let green = false
   export let active = false
   export let inactive = false
 </script>
@@ -17,6 +18,7 @@
   class:spectrum-Label--large={size === "L"}
   class:spectrum-Label--grey={grey}
   class:spectrum-Label--red={red}
+  class:spectrum-Label--green={green}
   class:spectrum-Label--orange={orange}
   class:spectrum-Label--yellow={yellow}
   class:spectrum-Label--seafoam={seafoam}

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

@@ -17,7 +17,6 @@ const automationActions = store => ({
       state.blockDefinitions = {
         TRIGGER: jsonResponses[1].trigger,
         ACTION: jsonResponses[1].action,
-        LOGIC: jsonResponses[1].logic,
       }
       // if previously selected find the new obj and select it
       if (selected) {
@@ -47,10 +46,12 @@ const automationActions = store => ({
     })
   },
   save: async ({ automation }) => {
+    console.log(automation)
     const UPDATE_AUTOMATION_URL = `/api/automations`
     const response = await api.put(UPDATE_AUTOMATION_URL, automation)
     const json = await response.json()
     store.update(state => {
+      console.log(state)
       const existingIdx = state.automations.findIndex(
         existing => existing._id === automation._id
       )
@@ -85,7 +86,7 @@ const automationActions = store => ({
     const response = await api.post(`/api/automations/${_id}/test`, testData)
     const json = await response.json()
     store.update(state => {
-      state.testResults = json
+      state.selectedAutomation.testResults = json
       return state
     })
   },
@@ -143,7 +144,6 @@ export const getAutomationStore = () => {
     blockDefinitions: {
       TRIGGER: [],
       ACTION: [],
-      LOGIC: [],
     },
     selectedAutomation: null,
   }

packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte

@@ -1,114 +0,0 @@
-<script>
-  import { sortBy } from "lodash/fp"
-  import { automationStore } from "builderStore"
-  import { ActionButton, Popover, Modal } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
-  import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
-
-  $: hasTrigger = $automationStore.selectedAutomation.hasTrigger()
-  $: tabs = [
-    {
-      label: "Trigger",
-      value: "TRIGGER",
-      icon: "Algorithm",
-      disabled: hasTrigger,
-    },
-    {
-      label: "Internal",
-      value: "ACTION",
-      internal: true,
-      icon: "Actions",
-      disabled: !hasTrigger,
-    },
-    {
-      label: "External",
-      value: "ACTION",
-      internal: false,
-      icon: "Extension",
-      disabled: !hasTrigger,
-    },
-  ]
-
-  let selectedIndex
-  let anchors = []
-  let popover
-  let webhookModal
-  $: selectedTab = selectedIndex == null ? null : tabs[selectedIndex].value
-  $: selectedInternal =
-    selectedIndex == null ? null : tabs[selectedIndex].internal
-  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
-  $: blocks = sortBy(entry => entry[1].name)(
-    Object.entries($automationStore.blockDefinitions[selectedTab] ?? {})
-  ).filter(
-    entry => selectedInternal == null || entry[1].internal === selectedInternal
-  )
-
-  function onChangeTab(idx) {
-    selectedIndex = idx
-    popover.show()
-  }
-
-  function closePopover() {
-    selectedIndex = null
-    popover.hide()
-  }
-
-  function addBlockToAutomation(stepId, blockDefinition) {
-    const newBlock = $automationStore.selectedAutomation.constructBlock(
-      selectedTab,
-      stepId,
-      blockDefinition
-    )
-    automationStore.actions.addBlockToAutomation(newBlock)
-    closePopover()
-    if (stepId === "WEBHOOK") {
-      webhookModal.show()
-    }
-  }
-</script>
-
-<div class="tab-container">
-  {#each tabs as tab, idx}
-    <div bind:this={anchors[idx]}>
-      <ActionButton
-        quiet
-        size="S"
-        icon={tab.icon}
-        disabled={tab.disabled}
-        on:click={tab.disabled ? null : () => onChangeTab(idx)}
-      >
-        {tab.label}
-      </ActionButton>
-    </div>
-  {/each}
-</div>
-<Popover
-  on:close={() => (selectedIndex = null)}
-  bind:this={popover}
-  {anchor}
-  align="left"
->
-  <DropdownContainer>
-    {#each blocks as [stepId, blockDefinition]}
-      <DropdownItem
-        icon={blockDefinition.icon}
-        title={blockDefinition.name}
-        subtitle={blockDefinition.description}
-        on:click={() => addBlockToAutomation(stepId, blockDefinition)}
-      />
-    {/each}
-  </DropdownContainer>
-</Popover>
-<Modal bind:this={webhookModal} width="30%">
-  <CreateWebhookModal />
-</Modal>
-
-<style>
-  .tab-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    min-height: 24px;
-  }
-</style>

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

@@ -26,13 +26,10 @@
   let resultsModal
   let setupToggled
   let blockComplete
-
+  $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
-  $: testResult = $automationStore?.testResults
+    step => step.stepId === block.stepId
-    ? $automationStore.testResults.steps.filter(
+  )
-        step => step.stepId === block.stepId
+  $: console.log(testResult)
-      )
-    : null
-
   $: instanceId = $database._id
 
   $: isTrigger = block.type === "TRIGGER"
@@ -102,11 +99,11 @@
           <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
         </div>
       </div>
-      {#if !!testResult}
+      {#if testResult}
         <span on:click={() => resultsModal.show()}>
           <StatusLight
-            positive={testResult[0].outputs.success}
+            positive={isTrigger || testResult[0].outputs?.success}
-            negative={!testResult[0].outputs.success}
+            negative={!testResult[0].outputs?.success}
             ><Body size="XS">View response</Body></StatusLight
           >
         </span>
@@ -164,7 +161,7 @@
   {/if}
 
   <Modal bind:this={resultsModal} width="30%">
-    <ResultsModal {testResult} />
+    <ResultsModal {isTrigger} {testResult} />
   </Modal>
 
   <Modal bind:this={actionModal} width="30%">

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

@@ -2,8 +2,10 @@
   import { ModalContent, Icon, Detail, Badge, TextArea } from "@budibase/bbui"
 
   export let testResult
+  export let isTrigger
   let inputToggled
   let outputToggled
+  $: console.log(isTrigger)
 </script>
 
 <ModalContent
@@ -14,7 +16,11 @@
 >
   <div slot="header">
     <div style="float: right;">
-      <Badge red><Icon size="S" name="CheckmarkCircle" /></Badge>
+      {#if isTrigger || testResult[0].outputs.success}
+        <Badge green><Icon size="S" name="CheckmarkCircle" /></Badge>
+      {:else}
+        <Badge red><Icon size="S" name="CloseCircle" /></Badge>
+      {/if}
     </div>
   </div>
 

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

@@ -18,11 +18,7 @@
   let schemaProperties = Object.entries(trigger.schema.outputs.properties || {})
 
   // check to see if there is existing test data in the store
-  $: testData = Object.keys(
+  $: testData = $automationStore.selectedAutomation.automation.testData
-    $automationStore.selectedAutomation?.automation?.testData
-  ).length
-    ? $automationStore.selectedAutomation.automation.testData
-    : {}
 
   // Checj the schema to see if required fields have been entered
   $: isError = !trigger.schema.outputs.required.every(

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

@@ -6,7 +6,7 @@
   import EditAutomationPopover from "./EditAutomationPopover.svelte"
 
   $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
-
+  $: console.log($automationStore)
   onMount(() => {
     automationStore.actions.fetch()
   })

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

@@ -29,7 +29,7 @@
 
   $: inputData = testData ? testData : block.inputs
 
-  async function onChange(e, key) {
+  const onChange = debounce(async function (e, key) {
     if (testData) {
       testData[key] = e.detail
     } else {
@@ -39,7 +39,7 @@
         automation: $automationStore.selectedAutomation?.automation,
       })
     }
-  }
+  }, 800)
 
   function getAvailableBindings(block, automation) {
     if (!block || !automation) {
@@ -131,7 +131,7 @@
       {:else if value.customType === "row"}
         <RowSelector
           value={inputData[key]}
-          on:change={debounce(e => onChange(e, key), 800)}
+          on:change={e => onChange(e, key)}
           {bindings}
         />
       {:else if value.customType === "webhookUrl"}

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

@@ -1,95 +0,0 @@
-<script>
-  import { automationStore } from "builderStore"
-  import { database } from "stores/backend"
-  import { notifications, Button, Modal, Heading, Toggle } from "@budibase/bbui"
-  import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
-  import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"
-
-  let webhookModal
-
-  $: instanceId = $database._id
-  $: automation = $automationStore.selectedAutomation?.automation
-  $: automationLive = automation?.live
-  function setAutomationLive(live) {
-    if (automationLive === live) {
-      return
-    }
-    automation.live = live
-    automationStore.actions.save({ instanceId, automation })
-    if (live) {
-      notifications.info(`Automation ${automation.name} enabled.`)
-    } else {
-      notifications.error(`Automation ${automation.name} disabled.`)
-    }
-  }
-
-  async function testAutomation() {
-    const result = await automationStore.actions.test({
-      automation: $automationStore.selectedAutomation.automation,
-    })
-    if (result.status === 200) {
-      notifications.success(
-        `Automation ${automation.name} triggered successfully.`
-      )
-    } else {
-      notifications.error(`Failed to trigger automation ${automation.name}.`)
-    }
-  }
-
-  async function saveAutomation() {
-    await automationStore.actions.save({
-      instanceId,
-      automation,
-    })
-    notifications.success(`Automation ${automation.name} saved.`)
-  }
-</script>
-
-<div class="title">
-  <Heading size="S">Setup</Heading>
-  <Toggle
-    value={automationLive}
-    on:change={() => setAutomationLive(!automationLive)}
-    dataCy="activate-automation"
-    text="Live"
-  />
-</div>
-{#if $automationStore.selectedBlock}
-  <AutomationBlockSetup
-    bind:block={$automationStore.selectedBlock}
-    {webhookModal}
-  />
-{:else if automation}
-  <div class="block-label">{automation.name}</div>
-  <Button secondary on:click={testAutomation}>Test Automation</Button>
-{/if}
-<Button
-  secondary
-  wide
-  data-cy="save-automation-setup"
-  on:click={saveAutomation}
->
-  Save Automation
-</Button>
-<Modal bind:this={webhookModal} width="30%">
-  <CreateWebookModal />
-</Modal>
-
-<style>
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--spacing-xs);
-  }
-  .title :global(h1) {
-    flex: 1 1 auto;
-  }
-
-  .block-label {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    font-weight: 600;
-    color: var(--grey-7);
-  }
-</style>

packages/server/src/automations/triggerInfo/app.js

@@ -1,7 +1,7 @@
 exports.definition = {
   name: "App Action",
   event: "app:trigger",
-  icon: "ri-window-fill",
+  icon: "Apps",
   tagline: "Automation fired from the frontend",
   description: "Trigger an automation from an action inside your app",
   stepId: "APP",

packages/server/src/automations/triggerInfo/cron.js

@@ -1,7 +1,7 @@
 exports.definition = {
   name: "Cron Trigger",
   event: "cron:trigger",
-  icon: "ri-timer-line",
+  icon: "Clock",
   tagline: "Cron Trigger (<b>{{inputs.cron}}</b>)",
   description: "Triggers automation on a cron schedule.",
   stepId: "CRON",

packages/server/src/automations/triggerInfo/rowDeleted.js

@@ -1,7 +1,7 @@
 exports.definition = {
   name: "Row Deleted",
   event: "row:delete",
-  icon: "ri-delete-bin-line",
+  icon: "Delete",
   tagline: "Row is deleted from {{inputs.enriched.table.name}}",
   description: "Fired when a row is deleted from your database",
   stepId: "ROW_DELETED",

packages/server/src/automations/triggerInfo/rowSaved.js

@@ -1,7 +1,7 @@
 exports.definition = {
   name: "Row Created",
   event: "row:save",
-  icon: "ri-save-line",
+  icon: "SaveFloppy",
   tagline: "Row is added to {{inputs.enriched.table.name}}",
   description: "Fired when a row is added to your database",
   stepId: "ROW_SAVED",

packages/server/src/automations/triggerInfo/rowUpdated.js

@@ -1,7 +1,7 @@
 exports.definition = {
   name: "Row Updated",
   event: "row:update",
-  icon: "ri-refresh-line",
+  icon: "Refresh",
   tagline: "Row is updated in {{inputs.enriched.table.name}}",
   description: "Fired when a row is updated in your database",
   stepId: "ROW_UPDATED",

packages/server/src/automations/triggerInfo/webhook.js

@@ -1,7 +1,7 @@
 exports.definition = {
   name: "Webhook",
   event: "web:trigger",
-  icon: "ri-global-line",
+  icon: "Send",
   tagline: "Webhook endpoint is hit",
   description: "Trigger an automation when a HTTP POST webhook is hit",
   stepId: "WEBHOOK",