Merge pull request #2902 from Budibase/bug/pc-ux-fixes

Some UX fixes for datasources and automations

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

@@ -17,7 +17,7 @@ export default class Automation {
     this.automation.testData = data
   }
 
-  addBlock(block) {
+  addBlock(block, idx) {
     // Make sure to add trigger if doesn't exist
     if (!this.hasTrigger() && block.type === "TRIGGER") {
       const trigger = { id: generate(), ...block }
@@ -26,10 +26,7 @@ export default class Automation {
     }
 
     const newBlock = { id: generate(), ...block }
-    this.automation.definition.steps = [
-      ...this.automation.definition.steps,
-      newBlock,
-    ]
+    this.automation.definition.steps.splice(idx, 0, newBlock)
     return newBlock
   }
 

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

@@ -104,9 +104,12 @@ const automationActions = store => ({
       return state
     })
   },
-  addBlockToAutomation: block => {
+  addBlockToAutomation: (block, blockIdx) => {
     store.update(state => {
-      const newBlock = state.selectedAutomation.addBlock(cloneDeep(block))
+      const newBlock = state.selectedAutomation.addBlock(
+        cloneDeep(block),
+        blockIdx
+      )
       state.selectedBlock = newBlock
       return state
     })

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

@@ -1,10 +1,9 @@
 <script>
   import { ModalContent, Layout, Detail, Body, Icon } from "@budibase/bbui"
   import { automationStore } from "builderStore"
-  import { database } from "stores/backend"
   import { externalActions } from "./ExternalActions"
-  $: instanceId = $database._id
 
+  export let blockIdx
   let selectedAction
   let actionVal
   let actions = Object.entries($automationStore.blockDefinitions.ACTION)
@@ -39,7 +38,8 @@
     )
     automationStore.actions.addBlockToAutomation(newBlock)
     await automationStore.actions.save(
-      $automationStore.selectedAutomation?.automation
+      $automationStore.selectedAutomation?.automation,
+      blockIdx
     )
   }
 </script>

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

@@ -4,9 +4,9 @@
   import FlowItem from "./FlowItem.svelte"
   import TestDataModal from "./TestDataModal.svelte"
   import { flip } from "svelte/animate"
-  import { fade, fly } from "svelte/transition"
+  import { fly } from "svelte/transition"
   import {
-    Detail,
+    Heading,
     Icon,
     ActionButton,
     notifications,
@@ -57,26 +57,24 @@
   <div class="content">
     <div class="title">
       <div class="subtitle">
-        <Detail size="L">{automation.name}</Detail>
-        <div
-          style="display:flex;
-          color: var(--spectrum-global-color-gray-400);"
-        >
-          <span class="iconPadding">
+        <Heading size="S">{automation.name}</Heading>
+        <div style="display:flex;">
+          <div class="iconPadding">
             <div class="icon">
               <Icon
                 on:click={confirmDeleteDialog.show}
                 hoverable
+                size="M"
                 name="DeleteOutline"
               />
             </div>
-          </span>
+          </div>
           <ActionButton
             on:click={() => {
               testDataModal.show()
             }}
             icon="MultipleCheck"
-            size="S">Run test</ActionButton
+            size="M">Run test</ActionButton
           >
         </div>
       </div>
@@ -84,16 +82,11 @@
     {#each blocks as block, idx (block.id)}
       <div
         class="block"
-        animate:flip={{ duration: 800 }}
-        in:fade|local
-        out:fly|local={{ x: 500 }}
+        animate:flip={{ duration: 500 }}
+        in:fly|local={{ x: 500, duration: 1500 }}
+        out:fly|local={{ x: 500, duration: 800 }}
       >
         <FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
-        {#if idx !== blocks.length - 1}
-          <div class="separator" />
-          <Icon name="AddCircle" size="S" />
-          <div class="separator" />
-        {/if}
       </div>
     {/each}
   </div>
@@ -114,14 +107,6 @@
 </div>
 
 <style>
-  .separator {
-    width: 1px;
-    height: 25px;
-    border-left: 1px dashed var(--grey-4);
-    color: var(--grey-4);
-    /* center horizontally */
-    align-self: center;
-  }
   .canvas {
     margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
     overflow-y: auto;
@@ -153,11 +138,14 @@
     padding-bottom: var(--spacing-xl);
     display: flex;
     justify-content: space-between;
+    align-items: center;
+  }
+  .iconPadding {
+    padding-top: var(--spacing-s);
   }
 
   .icon {
     cursor: pointer;
-    display: flex;
     padding-right: var(--spacing-m);
   }
 </style>

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

@@ -14,7 +14,6 @@
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import ResultsModal from "./ResultsModal.svelte"
   import ActionModal from "./ActionModal.svelte"
-  import { database } from "stores/backend"
   import { externalActions } from "./ExternalActions"
 
   export let onSelect
@@ -29,7 +28,6 @@
   $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
     step => step.stepId === block.stepId
   )
-  $: instanceId = $database._id
 
   $: isTrigger = block.type === "TRIGGER"
 
@@ -40,6 +38,10 @@
   $: blockIdx = steps.findIndex(step => step.id === block.id)
   $: lastStep = !isTrigger && blockIdx + 1 === steps.length
 
+  $: totalBlocks =
+    $automationStore.selectedAutomation?.automation?.definition?.steps.length +
+    1
+
   // Logic for hiding / showing the add button.first we check if it has a child
   // then we check to see whether its inputs have been commpleted
   $: disableAddButton = isTrigger
@@ -167,13 +169,24 @@
   </Modal>
 
   <Modal bind:this={actionModal} width="30%">
-    <ActionModal bind:blockComplete />
+    <ActionModal {blockIdx} bind:blockComplete />
   </Modal>
 
   <Modal bind:this={webhookModal} width="30%">
     <CreateWebhookModal />
   </Modal>
 </div>
+<div class="separator" />
+<Icon
+  on:click={() => actionModal.show()}
+  disabled={!hasCompletedInputs}
+  hoverable
+  name="AddCircle"
+  size="S"
+/>
+{#if isTrigger ? totalBlocks > 1 : blockIdx !== totalBlocks - 2}
+  <div class="separator" />
+{/if}
 
 <style>
   .center-items {
@@ -191,8 +204,7 @@
   .block {
     width: 360px;
     font-size: 16px;
-    background-color: var(--spectrum-alias-background-color-secondary);
-    color: var(--grey-9);
+    background-color: var(--background);
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px 4px 4px 4px;
   }
@@ -200,4 +212,13 @@
   .blockSection {
     padding: var(--spacing-xl);
   }
+
+  .separator {
+    width: 1px;
+    height: 25px;
+    border-left: 1px dashed var(--grey-4);
+    color: var(--grey-4);
+    /* center horizontally */
+    align-self: center;
+  }
 </style>

packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte

@@ -5,24 +5,29 @@
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
   import { datasources } from "stores/backend"
   import { IntegrationNames } from "constants"
+  import cloneDeep from "lodash/cloneDeepWith"
 
   export let integration
+  export let modal
+
+  // kill the reference so the input isn't saved
+  let config = cloneDeep(integration)
 
   function prepareData() {
     let datasource = {}
     let existingTypeCount = $datasources.list.filter(
-      ds => ds.source == integration.type
+      ds => ds.source == config.type
     ).length
 
-    let baseName = IntegrationNames[integration.type]
+    let baseName = IntegrationNames[config.type]
     let name =
       existingTypeCount == 0 ? baseName : `${baseName}-${existingTypeCount + 1}`
 
     datasource.type = "datasource"
-    datasource.source = integration.type
-    datasource.config = integration.config
+    datasource.source = config.type
+    datasource.config = config.config
     datasource.name = name
-    datasource.plus = integration.plus
+    datasource.plus = config.plus
 
     return datasource
   }
@@ -48,9 +53,10 @@
 </script>
 
 <ModalContent
-  title={`Connect to ${IntegrationNames[integration.type]}`}
+  title={`Connect to ${IntegrationNames[config.type]}`}
   onConfirm={() => saveDatasource()}
-  confirmText={integration.plus
+  onCancel={() => modal.show()}
+  confirmText={config.plus
     ? "Fetch tables from database"
     : "Save and continue to query"}
   cancelText="Back"
@@ -62,10 +68,7 @@
     </Body>
   </Layout>
 
-  <IntegrationConfigForm
-    schema={integration.schema}
-    bind:integration={integration.config}
-  />
+  <IntegrationConfigForm schema={config.schema} integration={config.config} />
 </ModalContent>
 
 <style>