Update icons

2024-06-28 02:50:50 +12:00 · 2021-09-14 18:22:33 +01:00 · 2021-09-14 18:22:33 +01:00 · cdcd582c41
parent 3a5b27f744
commit cdcd582c41
15 changed files with 31 additions and 239 deletions
--- a/packages/bbui/src/Badge/Badge.svelte
+++ b/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}
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/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,
  }
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/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>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -26,13 +26,10 @@
  let resultsModal
  let setupToggled
  let blockComplete
-
-  $: testResult = $automationStore?.testResults
-    ? $automationStore.testResults.steps.filter(
-        step => step.stepId === block.stepId
-      )
-    : null
-
+  $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
+    step => step.stepId === block.stepId
+  )
+  $: console.log(testResult)
  $: 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}
-            negative={!testResult[0].outputs.success}
+            positive={isTrigger || 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%">
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
+++ b/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>

--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/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(
-    $automationStore.selectedAutomation?.automation?.testData
-  ).length
-    ? $automationStore.selectedAutomation.automation.testData
-    : {}
+  $: testData = $automationStore.selectedAutomation.automation.testData

  // Checj the schema to see if required fields have been entered
  $: isError = !trigger.schema.outputs.required.every(
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
+++ b/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()
  })
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/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"}
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/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>
--- a/packages/server/src/automations/triggerInfo/app.js
+++ b/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",
--- a/packages/server/src/automations/triggerInfo/cron.js
+++ b/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",
--- a/packages/server/src/automations/triggerInfo/rowDeleted.js
+++ b/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",
--- a/packages/server/src/automations/triggerInfo/rowSaved.js
+++ b/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",
--- a/packages/server/src/automations/triggerInfo/rowUpdated.js
+++ b/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",
--- a/packages/server/src/automations/triggerInfo/webhook.js
+++ b/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",