From c898c7d8d506a2e8f147f55465de8e40f3bc8b2e Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 15 Sep 2021 11:51:49 +0100
Subject: [PATCH 1/4] update icons

---
 packages/server/src/automations/steps/createRow.js        | 2 +-
 packages/server/src/automations/steps/deleteRow.js        | 2 +-
 packages/server/src/automations/triggerInfo/rowDeleted.js | 2 +-
 packages/server/src/automations/triggerInfo/rowSaved.js   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/server/src/automations/steps/createRow.js b/packages/server/src/automations/steps/createRow.js
index 6bb5e3c42e..9706126438 100644
--- a/packages/server/src/automations/steps/createRow.js
+++ b/packages/server/src/automations/steps/createRow.js
@@ -6,7 +6,7 @@ const usage = require("../../utilities/usageQuota")
 exports.definition = {
   name: "Create Row",
   tagline: "Create a {{inputs.enriched.table.name}} row",
-  icon: "SaveFloppy",
+  icon: "TableRowAddBottom",
   description: "Add a row to your database",
   type: "ACTION",
   internal: true,
diff --git a/packages/server/src/automations/steps/deleteRow.js b/packages/server/src/automations/steps/deleteRow.js
index 4e014ccc20..26623d628b 100644
--- a/packages/server/src/automations/steps/deleteRow.js
+++ b/packages/server/src/automations/steps/deleteRow.js
@@ -4,7 +4,7 @@ const usage = require("../../utilities/usageQuota")
 
 exports.definition = {
   description: "Delete a row from your database",
-  icon: "DeleteOutline",
+  icon: "TableRowRemoveCenter",
   name: "Delete Row",
   tagline: "Delete a {{inputs.enriched.table.name}} row",
   type: "ACTION",
diff --git a/packages/server/src/automations/triggerInfo/rowDeleted.js b/packages/server/src/automations/triggerInfo/rowDeleted.js
index ab6bbe320c..7a7de13b11 100644
--- 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: "Delete",
+  icon: "TableRowRemoveCenter",
   tagline: "Row is deleted from {{inputs.enriched.table.name}}",
   description: "Fired when a row is deleted from your database",
   stepId: "ROW_DELETED",
diff --git a/packages/server/src/automations/triggerInfo/rowSaved.js b/packages/server/src/automations/triggerInfo/rowSaved.js
index 456a6d424b..d763ca0a8a 100644
--- 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: "SaveFloppy",
+  icon: "TableRowAddBottom",
   tagline: "Row is added to {{inputs.enriched.table.name}}",
   description: "Fired when a row is added to your database",
   stepId: "ROW_SAVED",

From 9cd63c22236b1a65adaf951928420f678050aef8 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 15 Sep 2021 11:52:42 +0100
Subject: [PATCH 2/4] small css updates

---
 packages/builder/assets/slack.svg             | 30 ++++++------
 .../FlowChart/FlowItem.svelte                 | 16 +++----
 .../FlowChart/ResultsModal.svelte             | 36 ++++++++++++--
 .../FlowChart/TestDataModal.svelte            | 48 +++++++++++++------
 .../app/[application]/automate/_layout.svelte |  2 +-
 5 files changed, 88 insertions(+), 44 deletions(-)

diff --git a/packages/builder/assets/slack.svg b/packages/builder/assets/slack.svg
index c37dc5eb49..adcae7e39d 100644
--- a/packages/builder/assets/slack.svg
+++ b/packages/builder/assets/slack.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
+	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#E01E5A;}
 	.st1{fill:#36C5F0;}
@@ -10,24 +10,24 @@
 </style>
 <g>
 	<g>
-		<path class="st0" d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/>
-		<path class="st0" d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9
-			s-12.9-5.8-12.9-12.9V151.2z"/>
+		<path class="st0" d="M30.4,82.2c0,7.1-5.8,12.9-12.9,12.9S4.6,89.3,4.6,82.2c0-7.1,5.8-12.9,12.9-12.9h12.9V82.2z"/>
+		<path class="st0" d="M36.9,82.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9
+			C36.9,114.5,36.9,82.2,36.9,82.2z"/>
 	</g>
 	<g>
-		<path class="st1" d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/>
-		<path class="st1" d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9
-			s5.8-12.9,12.9-12.9H118.8z"/>
+		<path class="st1" d="M49.8,30.4c-7.1,0-12.9-5.8-12.9-12.9S42.7,4.6,49.8,4.6s12.9,5.8,12.9,12.9v12.9H49.8z"/>
+		<path class="st1" d="M49.8,36.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H17.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9
+			C17.5,36.9,49.8,36.9,49.8,36.9z"/>
 	</g>
 	<g>
-		<path class="st2" d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/>
-		<path class="st2" d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9
-			c7.1,0,12.9,5.8,12.9,12.9V118.8z"/>
+		<path class="st2" d="M101.6,49.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V49.8z"/>
+		<path class="st2" d="M95.1,49.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V17.5c0-7.1,5.8-12.9,12.9-12.9
+			c7.1,0,12.9,5.8,12.9,12.9V49.8z"/>
 	</g>
 	<g>
-		<path class="st3" d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/>
-		<path class="st3" d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
-			c0,7.1-5.8,12.9-12.9,12.9H151.2z"/>
+		<path class="st3" d="M82.2,101.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H82.2z"/>
+		<path class="st3" d="M82.2,95.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
+			c0,7.1-5.8,12.9-12.9,12.9H82.2z"/>
 	</g>
 </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 5e34dd7d55..133752fb39 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -73,18 +73,18 @@
       }}
       class="splitHeader"
     >
-      <div style="display: flex;">
+      <div class="center-items">
         {#if externalActions[block.stepId]}
           <img
             alt={externalActions[block.stepId].name}
-            width="35px"
-            height="35px"
+            width="28px"
+            height="28px"
             src={externalActions[block.stepId].icon}
           />
         {:else}
           <svg
-            width="35px"
-            height="35px"
+            width="28px"
+            height="28px"
             class="spectrum-Icon"
             style="color:grey;"
             focusable="false"
@@ -118,7 +118,7 @@
             on:click|stopPropagation={() => {
               setupToggled = !setupToggled
             }}
-            class="toggle"
+            class="center-items"
           >
             {#if setupToggled}
               <Icon size="M" name="ChevronDown" />
@@ -142,7 +142,7 @@
           />
           {#if lastStep}
             <Button on:click={() => testDataModal.show()} cta
-              >Continue and test automation</Button
+              >Finish and test automation</Button
             >
           {/if}
           <Button
@@ -173,7 +173,7 @@
 </div>
 
 <style>
-  .toggle {
+  .center-items {
     display: flex;
     align-items: center;
   }
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
index d7d9951f54..7dfdff20a7 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { ModalContent, Icon, Detail, Badge, TextArea } from "@budibase/bbui"
+  import { ModalContent, Icon, Detail, TextArea } from "@budibase/bbui"
 
   export let testResult
   export let isTrigger
@@ -16,9 +16,13 @@
   <div slot="header">
     <div style="float: right;">
       {#if isTrigger || testResult[0].outputs.success}
-        <Badge green><Icon size="S" name="CheckmarkCircle" /></Badge>
+        <div class="iconSuccess">
+          <Icon size="S" name="CheckmarkCircle" />
+        </div>
       {:else}
-        <Badge red><Icon size="S" name="CloseCircle" /></Badge>
+        <div class="iconFailure">
+          <Icon size="S" name="CloseCircle" />
+        </div>
       {/if}
     </div>
   </div>
@@ -45,7 +49,12 @@
     </div>
   </div>
   {#if inputToggled}
-    <TextArea disabled value={JSON.stringify(testResult[0].inputs, null, 2)} />
+    <div class="text-area-container">
+      <TextArea
+        disabled
+        value={JSON.stringify(testResult[0].inputs, null, 2)}
+      />
+    </div>
   {/if}
 
   <div
@@ -70,11 +79,24 @@
     </div>
   </div>
   {#if outputToggled}
-    <TextArea disabled value={JSON.stringify(testResult[0].outputs, null, 2)} />
+    <div class="text-area-container">
+      <TextArea
+        disabled
+        value={JSON.stringify(testResult[0].outputs, null, 2)}
+      />
+    </div>
   {/if}
 </ModalContent>
 
 <style>
+  .iconSuccess {
+    color: var(--spectrum-global-color-green-600);
+  }
+
+  .iconFailure {
+    color: var(--spectrum-global-color-red-600);
+  }
+
   .splitHeader {
     cursor: pointer;
     display: flex;
@@ -85,4 +107,8 @@
     display: flex;
     align-items: center;
   }
+
+  .text-area-container :global(textarea) {
+    height: 150px;
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index ec7d137652..12e9591ab4 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -48,23 +48,41 @@
   cancelText="Cancel"
 >
   <Tabs selected="Form" quiet
-    ><Tab icon="Form" title="Form"
-      ><AutomationBlockSetup
-        bind:testData
-        {schemaProperties}
-        block={trigger}
-      /></Tab
+    ><Tab icon="Form" title="Form">
+      <div class="tab-content-padding">
+        <AutomationBlockSetup
+          bind:testData
+          {schemaProperties}
+          block={trigger}
+        />
+      </div></Tab
     >
     <Tab icon="FileJson" title="JSON">
-      <Label>JSON</Label><TextArea
-        value={JSON.stringify(
-          $automationStore.selectedAutomation.automation.testData,
-          null,
-          2
-        )}
-        error={failedParse}
-        on:change={e => parseTestJSON(e)}
-      />
+      <div class="tab-content-padding">
+        <Label>JSON</Label>
+        <div class="text-area-container">
+          <TextArea
+            value={JSON.stringify(
+              $automationStore.selectedAutomation.automation.testData,
+              null,
+              2
+            )}
+            error={failedParse}
+            on:change={e => parseTestJSON(e)}
+          />
+        </div>
+      </div>
     </Tab>
   </Tabs>
 </ModalContent>
+
+<style>
+  .text-area-container :global(textarea) {
+    min-height: 200px;
+    height: 200px;
+  }
+
+  .tab-content-padding {
+    padding: 0 var(--spacing-xl);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
index 8dbfd72761..22a49e04d2 100644
--- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
@@ -3,7 +3,7 @@
   import { automationStore } from "builderStore"
   import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
   import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
-  import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte"
+  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   $: automation = $automationStore.automations[0]
   let modal
   let webhookModal

From 2b08916751d0d4b3d46b33bea30af24cf976aefd Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 15 Sep 2021 12:58:20 +0100
Subject: [PATCH 3/4] simplify parsing of internal / external actions

---
 .../FlowChart/ActionModal.svelte              | 31 ++++++-------------
 .../FlowChart/ExternalActions.js              |  2 --
 .../FlowChart/TestDataModal.svelte            |  2 +-
 3 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index 3a58d8c5fd..8820259e90 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -1,39 +1,26 @@
 <script>
   import { ModalContent, Layout, Detail, Body, Icon } from "@budibase/bbui"
   import { automationStore } from "builderStore"
-  import DiscordLogo from "assets/discord.svg"
-  import ZapierLogo from "assets/zapier.png"
-  import IntegromatLogo from "assets/integromat.png"
-  import SlackLogo from "assets/slack.svg"
-  import n8nlogo from "assets/n8n.png"
-
   import { database } from "stores/backend"
+  import { externalActions } from "./ExternalActions"
   $: instanceId = $database._id
 
   let selectedAction
   let actionVal
+  let actions = Object.entries($automationStore.blockDefinitions.ACTION)
   export let blockComplete
 
-  let externalActionsPredicate = [
-    { name: "zapier", logo: ZapierLogo },
-    { name: "discord", logo: DiscordLogo },
-    { name: "slack", logo: SlackLogo },
-    { name: "integromat", logo: IntegromatLogo },
-    { name: "n8n", logo: n8nlogo },
-  ]
-  let actions = Object.entries($automationStore.blockDefinitions.ACTION)
-
-  const externalActions = actions.reduce((acc, elm) => {
+  const external = actions.reduce((acc, elm) => {
     const [k, v] = elm
-    if (externalActionsPredicate.some(pred => pred.name === k)) {
+    if (!v.internal) {
       acc[k] = v
     }
     return acc
   }, {})
 
-  const internalActions = actions.reduce((acc, elm) => {
+  const internal = actions.reduce((acc, elm) => {
     const [k, v] = elm
-    if (!externalActionsPredicate.some(pred => pred.name === k)) {
+    if (v.internal) {
       acc[k] = v
     }
     return acc
@@ -73,7 +60,7 @@
     <Body size="S">Apps</Body>
 
     <div class="item-list">
-      {#each Object.entries(externalActions) as [idx, action]}
+      {#each Object.entries(external) as [idx, action]}
         <div
           class="item"
           class:selected={selectedAction === action.name}
@@ -83,7 +70,7 @@
             <img
               width="20"
               height="20"
-              src={externalActionsPredicate.find(val => val.name === idx).logo}
+              src={externalActions[action.stepId].icon}
               alt="zapier"
             />
             <span class="icon-spacing">
@@ -98,7 +85,7 @@
     <Detail size="S">Actions</Detail>
 
     <div class="item-list">
-      {#each Object.entries(internalActions) as [idx, action]}
+      {#each Object.entries(internal) as [idx, action]}
         <div
           class="item"
           class:selected={selectedAction === action.name}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js
index e03b3ad4c7..843445a3c2 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js
@@ -2,12 +2,10 @@ import DiscordLogo from "assets/discord.svg"
 import ZapierLogo from "assets/zapier.png"
 import IntegromatLogo from "assets/integromat.png"
 import SlackLogo from "assets/slack.svg"
-import n8nlogo from "assets/n8n.png"
 
 export const externalActions = {
   zapier: { name: "zapier", icon: ZapierLogo },
   discord: { name: "discord", icon: DiscordLogo },
   slack: { name: "slack", icon: SlackLogo },
   integromat: { name: "integromat", icon: IntegromatLogo },
-  n8n: { name: "n8n", icon: n8nlogo },
 }
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index 12e9591ab4..3031246a70 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -9,13 +9,13 @@
   let trigger = cloneDeep(
     $automationStore.selectedAutomation.automation.definition.trigger
   )
+  let schemaProperties = Object.entries(trigger.schema.outputs.properties || {})
 
   if (!$automationStore.selectedAutomation.automation.testData) {
     $automationStore.selectedAutomation.automation.testData = {}
   }
 
   // get the outputs so we can define the fields
-  let schemaProperties = Object.entries(trigger.schema.outputs.properties || {})
 
   // check to see if there is existing test data in the store
   $: testData = $automationStore.selectedAutomation.automation.testData

From 7260c32737952aadd8d57a1eaad2d39bb16c4f4e Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 15 Sep 2021 13:58:15 +0100
Subject: [PATCH 4/4] fix build

---
 .../automation/AutomationBuilder/FlowChart/FlowItem.svelte      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 133752fb39..3da2788fc9 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -11,7 +11,7 @@
     StatusLight,
   } from "@budibase/bbui"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
-  import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte"
+  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import ResultsModal from "./ResultsModal.svelte"
   import ActionModal from "./ActionModal.svelte"
   import { database } from "stores/backend"