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
2024-10-21 17:23:48 +01:00 · 2024-10-21 17:23:48 +01:00 · fe920dafc2
parent 80c9011892
commit fe920dafc2
13 changed files with 128 additions and 129 deletions
--- 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;
--- 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 {
--- 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 {
--- 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);
--- 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;
--- 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;
  }
--- 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>
--- 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;
  }

--- 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;
--- 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;
  }
--- 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;
--- 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,
--- 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: {