From fe920dafc293100235335b3229d2935720130e3f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 21 Oct 2024 17:23:48 +0100
Subject: [PATCH] Updates to automation flow items

- changed backend log icon
- added static values for trigger icon and action icons
- added a background to external app actions
- changed layout of labels + fields
- resized automation cards
- removed automation label. Made Automation title more prominent.
- creation automation modal layout changed
- removed label for name field
- removed help text
- removed warning
- added background to icons
- changed item size
- added placeholder to name input
---
 .../FlowChart/ActionModal.svelte              | 29 +++++--
 .../FlowChart/BranchNode.svelte               | 39 +---------
 .../FlowChart/FlowItem.svelte                 |  4 +-
 .../FlowChart/FlowItemActions.svelte          |  2 +-
 .../FlowChart/FlowItemHeader.svelte           | 78 +++++++++----------
 .../AutomationPanel/AutomationPanel.svelte    |  2 +-
 .../CreateAutomationModal.svelte              | 74 +++++++++++-------
 .../SetupPanel/AutomationBlockSetup.svelte    |  6 +-
 .../SetupPanel/AutomationSelector.svelte      |  4 +-
 .../automation/SetupPanel/PropField.svelte    | 11 +--
 .../SetupPanel/QueryParamSelector.svelte      |  4 +-
 .../server/src/automations/steps/serverLog.ts |  2 +-
 .../server/src/tests/utilities/structures.ts  |  2 +-
 13 files changed, 128 insertions(+), 129 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index 9bd4645443..8eedef1748 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -197,12 +197,14 @@
           on:click={() => selectAction(action)}
         >
           <div class="item-body">
-            <img
-              width={24}
-              height={24}
-              src={externalActions[action.stepId].icon}
-              alt={externalActions[action.stepId].name}
-            />
+            <div class="icon-background-external">
+              <img
+                width={20}
+                height={20}
+                src={externalActions[action.stepId].icon}
+                alt={externalActions[action.stepId].name}
+              />
+            </div>
             <p>
               {action.stepTitle || idx.charAt(0).toUpperCase() + idx.slice(1)}
             </p>
@@ -259,7 +261,17 @@
     background: var(--spectrum-global-color-gray-200);
   }
   .icon-background {
-    background-color: var(--spectrum-global-color-indigo-500);
+    background-color: #5e12f7;
+    padding: 0;
+    border-radius: 6px;
+    min-height: 28px;
+    min-width: 28px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon-background-external {
+    background-color: var(--spectrum-global-color-gray-200);
     padding: 0;
     border-radius: 6px;
     min-height: 28px;
@@ -269,8 +281,9 @@
     align-items: center;
   }
   div:has(svg) {
-    color: var(--spectrum-global-color-gray-900);
+    color: white;
   }
+
   img {
     border-radius: 6px;
     padding: 2px;
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
index 739dad2204..33b44fe655 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
@@ -111,40 +111,7 @@
         await automationStore.actions.save(updatedAuto)
       }}
       on:toggle={() => (open = !open)}
-    >
-      <div slot="custom-actions" class="branch-actions">
-        <Icon
-          on:click={() => {
-            automationStore.actions.branchLeft(
-              branchBlockRef.pathTo,
-              $selectedAutomation.data,
-              step
-            )
-          }}
-          tooltip={"Move left"}
-          tooltipType={TooltipType.Info}
-          tooltipPosition={TooltipPosition.Top}
-          hoverable
-          disabled={branchIdx == 0}
-          name="ArrowLeft"
-        />
-        <Icon
-          on:click={() => {
-            automationStore.actions.branchRight(
-              branchBlockRef.pathTo,
-              $selectedAutomation.data,
-              step
-            )
-          }}
-          tooltip={"Move right"}
-          tooltipType={TooltipType.Info}
-          tooltipPosition={TooltipPosition.Top}
-          hoverable
-          disabled={isLast}
-          name="ArrowRight"
-        />
-      </div>
-    </FlowItemHeader>
+    />
     {#if open}
       <Divider noMargin />
       <div class="blockSection">
@@ -214,11 +181,11 @@
     display: inline-block;
   }
   .block {
-    width: 480px;
+    width: 360px;
     font-size: 16px;
     background-color: var(--background);
     border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px 4px 4px 4px;
+    border-radius: 12px;
   }
 
   .blockSection {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 3210db7f48..c956a9357a 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -264,11 +264,11 @@
     display: inline-block;
   }
   .block {
-    width: 480px;
+    width: 360px;
     font-size: 16px;
     background-color: var(--background);
     border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px 4px 4px 4px;
+    border-radius: 12px;
   }
 
   .blockSection {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte
index b96132af52..d2f7bfff38 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte
@@ -41,7 +41,7 @@
 <style>
   .action-bar {
     background-color: var(--background);
-    border-radius: 4px 4px 4px 4px;
+    border-radius: 8px;
     display: flex;
     gap: var(--spacing-m);
     padding: var(--spacing-m);
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index 1f417e35ec..8a6cf15a6f 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@@ -113,19 +113,21 @@
   <div class="splitHeader">
     <div class="center-items">
       {#if externalActions[block.stepId]}
-        <img
-          alt={externalActions[block.stepId].name}
-          width="32px"
-          height="32px"
-          src={externalActions[block.stepId].icon}
-        />
+        <div class="icon-background-external">
+          <img
+            alt={externalActions[block.stepId].name}
+            width="20px"
+            height="20px"
+            src={externalActions[block.stepId].icon}
+          />
+        </div>
       {:else if isHeaderTrigger}
         <div class="icon-background-trigger">
           <svg
-            width="24px"
-            height="24px"
+            width="20px"
+            height="20px"
             class="spectrum-Icon"
-            style="color:var(--spectrum-global-color-gray-900);"
+            style="color: black;"
             focusable="false"
           >
             <use xlink:href="#spectrum-icon-18-{block.icon}" />
@@ -134,10 +136,10 @@
       {:else}
         <div class="icon-background">
           <svg
-            width="24px"
-            height="24px"
+            width="20px"
+            height="20px"
             class="spectrum-Icon"
-            style="color:var(--spectrum-global-color-gray-900);"
+            style="color: white;"
             focusable="false"
           >
             <use xlink:href="#spectrum-icon-18-{block.icon}" />
@@ -145,12 +147,6 @@
         </div>
       {/if}
       <div class="iconAlign">
-        {#if isHeaderTrigger}
-          <Body size="XS"><b>Trigger</b></Body>
-        {:else}
-          <Body size="XS"><b>{isBranch ? "Branch" : "Step"}</b></Body>
-        {/if}
-
         {#if enableNaming}
           <input
             class="input-text"
@@ -180,6 +176,7 @@
         {/if}
       </div>
     </div>
+
     <div class="blockTitle">
       {#if showTestStatus && testResult}
         <div class="status-container">
@@ -199,7 +196,7 @@
               dispatch("toggle")
             }}
             hoverable
-            name={open ? "ChevronUp" : "ChevronDown"}
+            name={open ? "ChevronDown" : "ChevronRight"}
           />
         </div>
       {/if}
@@ -214,7 +211,12 @@
         {#if !showTestStatus}
           {#if !isHeaderTrigger && !isLooped && !isBranch && (block?.features?.[Features.LOOPING] || !block.features)}
             <AbsTooltip type="info" text="Add looping">
-              <Icon on:click={addLooping} hoverable name="RotateCW" />
+              <Icon
+                on:click={addLooping}
+                tooltip={"Loop automation step"}
+                hoverable
+                name="RotateCW"
+              />
             </AbsTooltip>
           {/if}
           {#if !isHeaderTrigger}
@@ -223,9 +225,6 @@
             </AbsTooltip>
           {/if}
         {/if}
-        {#if !showTestStatus && !isHeaderTrigger}
-          <span class="action-spacer" />
-        {/if}
         {#if !showTestStatus}
           <Icon
             on:click={e => {
@@ -233,7 +232,7 @@
               dispatch("toggle")
             }}
             hoverable
-            name={open ? "ChevronUp" : "ChevronDown"}
+            name={open ? "ChevronDown" : "ChevronRight"}
           />
         {/if}
       </div>
@@ -251,9 +250,6 @@
 </div>
 
 <style>
-  .action-spacer {
-    border-left: 1px solid var(--spectrum-global-color-gray-300);
-  }
   .status-container {
     display: flex;
     align-items: center;
@@ -261,7 +257,6 @@
     gap: var(--spacing-m);
     /* You can also add padding or margin to adjust the spacing between the text and the chevron if needed. */
   }
-
   .context-actions {
     display: flex;
     gap: var(--spacing-l);
@@ -272,9 +267,9 @@
     align-items: center;
   }
   .icon-background-trigger {
-    background-color: var(--spectrum-global-color-static-orange-400);
+    background-color: #6afdef;
     padding: 0;
-    border-radius: 7px;
+    border-radius: 8px;
     min-height: 32px;
     min-width: 32px;
     display: inline-flex;
@@ -282,16 +277,25 @@
     align-items: center;
   }
   .icon-background {
-    background-color: var(--spectrum-global-color-indigo-500);
+    background-color: #5e12f7;
     padding: 0;
-    border-radius: 7px;
+    border-radius: 8px;
+    min-height: 32px;
+    min-width: 32px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon-background-external {
+    background-color: var(--spectrum-global-color-gray-200);
+    padding: 0;
+    border-radius: 8px;
     min-height: 32px;
     min-width: 32px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
   }
-
   .splitHeader {
     display: flex;
     justify-content: space-between;
@@ -301,16 +305,13 @@
     padding: 0 0 0 var(--spacing-m);
     display: inline-block;
   }
-
   .blockSection {
     padding: var(--spacing-xl);
     border: 1px solid transparent;
   }
-
   .blockTitle {
     display: flex;
   }
-
   .hide-context-actions {
     display: none;
   }
@@ -318,14 +319,13 @@
     color: var(--ink);
     background-color: transparent;
     border: 1px solid transparent;
-    width: 230px;
+    width: 100%;
     box-sizing: border-box;
     overflow: hidden;
     white-space: nowrap;
   }
-
   .input-text {
-    font-size: var(--spectrum-alias-font-size-default);
+    font-size: 16px;
     font-family: var(--font-sans);
     text-overflow: ellipsis;
     padding-left: 0px;
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 6b96c4ebf5..59dcb5ec8e 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -146,7 +146,7 @@
     flex-direction: column;
     align-items: stretch;
     border-right: var(--border-light);
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--background);
     overflow: hidden;
     transition: margin-left 300ms ease-out;
   }
diff --git a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
index 365d3d358f..56a4f132a0 100644
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@@ -57,23 +57,15 @@
   onConfirm={createAutomation}
   disabled={!selectedTrigger || !name}
 >
-  <InlineAlert
-    header="You must publish your app to activate your automations."
-    message="To test your automation before publishing, you can use the 'Run Test' functionality on the next screen."
-  />
-  <Body size="S">
-    Please name your automation, then select a trigger.<br />
-    Every automation must start with a trigger.
-  </Body>
   <Input
     bind:value={name}
     on:input={() => (nameTouched = true)}
     bind:error={nameError}
-    label="Name"
+    placeholder="Name your automation"
   />
 
   <Layout noPadding gap="XS">
-    <Label size="S">Trigger</Label>
+    <Label size="L">Trigger</Label>
     <div class="item-list">
       {#each triggers as [_, trigger]}
         <div
@@ -82,10 +74,10 @@
           on:click={() => selectTrigger(trigger)}
         >
           <div class="item-body">
-            <Icon name={trigger.icon} />
-            <span class="icon-spacing">
-              <Body size="S">{trigger.name}</Body></span
-            >
+            <div class="icon-background-trigger">
+              <Icon name={trigger.icon} />
+            </div>
+            <Body size="S">{trigger.name}</Body>
           </div>
         </div>
       {/each}
@@ -94,35 +86,65 @@
 </ModalContent>
 
 <style>
-  .icon-spacing {
-    margin-left: var(--spacing-m);
-  }
   .item-body {
     display: flex;
     margin-left: var(--spacing-m);
+    gap: var(--spacing-m);
+    align-items: center;
   }
   .item-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    grid-gap: var(--spectrum-alias-grid-baseline);
+    grid-template-columns: repeat(2, minmax(200px, 1fr));
+    grid-gap: 10px;
   }
-
   .item {
     cursor: pointer;
-    display: grid;
     grid-gap: var(--spectrum-alias-grid-margin-xsmall);
     padding: var(--spectrum-alias-item-padding-s);
     background: var(--spectrum-alias-background-color-secondary);
     transition: 0.3s all;
-    border-radius: 5px;
+    border: solid var(--spectrum-global-color-gray-200);
+    border-radius: 6px;
     box-sizing: border-box;
-    border-width: 2px;
+    border-width: 1px;
+  }
+  .item p {
+    font-size: 16px !important;
+    margin: 0;
+    color: var(--spectrum-global-color-gray-900);
   }
 
-  .item:hover {
-    background: var(--spectrum-alias-background-color-tertiary);
-  }
+  .item:not(.disabled):hover,
   .selected {
     background: var(--spectrum-alias-background-color-tertiary);
   }
+  .disabled {
+    background: var(--spectrum-global-color-gray-200);
+    opacity: 0.5;
+  }
+  .disabled :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .tag-color :global(.spectrum-Tags-item) {
+    background: var(--spectrum-global-color-gray-200);
+  }
+  .icon-background-trigger {
+    background-color: #6afdef;
+    padding: 0;
+    border-radius: 6px;
+    min-height: 28px;
+    min-width: 28px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+  div:has(svg) {
+    color: black;
+  }
+
+  img {
+    border-radius: 6px;
+    padding: 2px;
+  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 25ced49a4d..aec90372ba 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -1000,9 +1000,9 @@
   .block-field {
     display: flex;
     justify-content: space-between;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
     flex: 1;
   }
 
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
index cda8f76de3..280496a6fb 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
@@ -73,8 +73,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
     gap: 10px;
     flex: 1;
     margin-bottom: 10px;
diff --git a/packages/builder/src/components/automation/SetupPanel/PropField.svelte b/packages/builder/src/components/automation/SetupPanel/PropField.svelte
index 2994d317cc..8cec4e49e1 100644
--- a/packages/builder/src/components/automation/SetupPanel/PropField.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/PropField.svelte
@@ -15,15 +15,16 @@
   <div class="prop-label" title={label}>
     <Label size="L" tooltip={labelTooltip}>{label}</Label>
   </div>
-  <div class="prop-control">
+  <div>
     <slot />
   </div>
 </div>
 
 <style>
   .prop-field {
-    display: grid;
-    grid-template-columns: 1fr var(--comp-width);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
   }
 
   .prop-field.fullWidth {
@@ -50,10 +51,6 @@
     overflow: hidden;
   }
 
-  .prop-control {
-    margin-left: var(--spacing-s);
-  }
-
   .prop-field.fullWidth .prop-control {
     margin-left: 0px;
   }
diff --git a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
index f46bca3090..37d9363ffc 100644
--- a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@@ -68,8 +68,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
     gap: 10px;
     flex: 1;
     margin-bottom: 10px;
diff --git a/packages/server/src/automations/steps/serverLog.ts b/packages/server/src/automations/steps/serverLog.ts
index ffc517c05e..1282c5fc79 100644
--- a/packages/server/src/automations/steps/serverLog.ts
+++ b/packages/server/src/automations/steps/serverLog.ts
@@ -17,7 +17,7 @@ import {
 export const definition: AutomationStepDefinition = {
   name: "Backend log",
   tagline: "Console log a value in the backend",
-  icon: "Monitoring",
+  icon: "FileCode",
   description: "Logs the given text to the server (using console.log)",
   type: AutomationStepType.ACTION,
   internal: true,
diff --git a/packages/server/src/tests/utilities/structures.ts b/packages/server/src/tests/utilities/structures.ts
index 16803f19cd..17d25df19c 100644
--- a/packages/server/src/tests/utilities/structures.ts
+++ b/packages/server/src/tests/utilities/structures.ts
@@ -273,7 +273,7 @@ export function serverLogAutomation(appId?: string): Automation {
           stepId: AutomationActionStepId.SERVER_LOG,
           name: "Backend log",
           tagline: "Console log a value in the backend",
-          icon: "Monitoring",
+          icon: "FileCode",
           description: "Logs the given text to the server (using console.log)",
           internal: true,
           features: {