Merge pull request #12440 from Budibase/fix/pc-bug-fixes

Automations UI tweaks / fixes

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

@@ -57,16 +57,11 @@
       }}
       class="buttons"
     >
-      <Icon hoverable size="M" name="Play" />
+      <Icon size="M" name="Play" />
       <div>Run test</div>
     </div>
     <div class="buttons">
-      <Icon
-        disabled={!$automationStore.testResults}
-        hoverable
-        size="M"
-        name="Multiple"
-      />
+      <Icon disabled={!$automationStore.testResults} size="M" name="Multiple" />
       <div
         class:disabled={!$automationStore.testResults}
         on:click={() => {

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

@@ -97,6 +97,7 @@
   class:typing={typing && !automationNameError}
   class:typing-error={automationNameError}
   class="blockSection"
+  on:click={() => dispatch("toggle")}
 >
   <div class="splitHeader">
     <div class="center-items">
@@ -138,7 +139,20 @@
             on:input={e => {
               automationName = e.target.value.trim()
             }}
-            on:click={startTyping}
+            on:click={e => {
+              e.stopPropagation()
+              startTyping()
+            }}
+            on:keydown={async e => {
+              if (e.key === "Enter") {
+                typing = false
+                if (automationNameError) {
+                  automationName = stepNames[block.id] || block?.name
+                } else {
+                  await saveName()
+                }
+              }
+            }}
             on:blur={async () => {
               typing = false
               if (automationNameError) {
@@ -168,7 +182,11 @@
             </StatusLight>
           </div>
           <Icon
-            on:click={() => dispatch("toggle")}
+            e.stopPropagation()
+            on:click={e => {
+              e.stopPropagation()
+              dispatch("toggle")
+            }}
             hoverable
             name={open ? "ChevronUp" : "ChevronDown"}
           />
@@ -195,7 +213,10 @@
         {/if}
         {#if !showTestStatus}
           <Icon
-            on:click={() => dispatch("toggle")}
+            on:click={e => {
+              e.stopPropagation()
+              dispatch("toggle")
+            }}
             hoverable
             name={open ? "ChevronUp" : "ChevronDown"}
           />

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

@@ -1,11 +1,9 @@
 <script>
   import {
     ModalContent,
-    Tabs,
-    Tab,
     TextArea,
-    Label,
     notifications,
+    ActionButton,
   } from "@budibase/bbui"
   import { automationStore, selectedAutomation } from "builderStore"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
@@ -55,50 +53,69 @@
       notifications.error(error)
     }
   }
+
+  const toggle = () => {
+    selectedValues = !selectedValues
+    selectedJSON = !selectedJSON
+  }
+  let selectedValues = true
+  let selectedJSON = false
 </script>
 
 <ModalContent
   title="Add test data"
-  confirmText="Test"
-  size="M"
+  confirmText="Run test"
+  size="L"
   showConfirmButton={true}
   disabled={isError}
   onConfirm={testAutomation}
   cancelText="Cancel"
 >
-  <Tabs selected="Form" quiet>
-    <Tab icon="Form" title="Form">
-      <div class="tab-content-padding">
-        <AutomationBlockSetup
-          {testData}
-          {schemaProperties}
-          isTestModal
-          block={trigger}
-        />
-      </div></Tab
-    >
-    <Tab icon="FileJson" title="JSON">
-      <div class="tab-content-padding">
-        <Label>JSON</Label>
-        <div class="text-area-container">
-          <TextArea
-            value={JSON.stringify($selectedAutomation.testData, null, 2)}
-            error={failedParse}
-            on:change={e => parseTestJSON(e)}
-          />
-        </div>
-      </div>
-    </Tab>
-  </Tabs>
+  <div class="size">
+    <div class="options">
+      <ActionButton quiet selected={selectedValues} on:click={toggle}
+        >Use values</ActionButton
+      >
+      <ActionButton quiet selected={selectedJSON} on:click={toggle}
+        >Use JSON</ActionButton
+      >
+    </div>
+  </div>
+
+  {#if selectedValues}
+    <div class="tab-content-padding">
+      <AutomationBlockSetup
+        {testData}
+        {schemaProperties}
+        isTestModal
+        block={trigger}
+      />
+    </div>
+  {/if}
+  {#if selectedJSON}
+    <div class="text-area-container">
+      <TextArea
+        value={JSON.stringify($selectedAutomation.testData, null, 2)}
+        error={failedParse}
+        on:change={e => parseTestJSON(e)}
+      />
+    </div>
+  {/if}
 </ModalContent>
 
 <style>
   .text-area-container :global(textarea) {
-    min-height: 200px;
-    height: 200px;
+    min-height: 300px;
+    height: 300px;
   }
 
   .tab-content-padding {
-    padding: 0 var(--spacing-xl);
+    padding: 0 var(--spacing-s);
+  }
+
+  .options {
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
 </style>

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

@@ -9,7 +9,7 @@
 <div class="title">
   <div class="title-text">
     <Icon name="MultipleCheck" />
-    <div style="padding-left: var(--spacing-l)">Test Details</div>
+    <div style="padding-left: var(--spacing-l); ">Test Details</div>
   </div>
   <div style="padding-right: var(--spacing-xl)">
     <Icon
@@ -40,6 +40,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    padding-top: var(--spacing-s);
   }
 
   .title :global(h1) {

packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte

@@ -1,20 +1,44 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal, Button, Layout } from "@budibase/bbui"
+  import { Modal, Icon } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
 
   export let modal
   export let webhookModal
 </script>
 
-<Panel title="Automations" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Button cta on:click={modal.show}>Add automation</Button>
-  </Layout>
+<Panel title="Automations" borderRight noHeaderBorder titleCSS={false}>
+  <span class="panel-title-content" slot="panel-title-content">
+    <div class="header">
+      <div>Automations</div>
+      <div on:click={modal.show} class="add-automation-button">
+        <Icon name="Add" />
+      </div>
+    </div>
+  </span>
   <AutomationList />
 </Panel>
 
 <Modal bind:this={modal}>
   <CreateAutomationModal {webhookModal} />
 </Modal>
+
+<style>
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-m);
+  }
+
+  .add-automation-button {
+    margin-left: 130px;
+    color: var(--grey-7);
+    cursor: pointer;
+  }
+
+  .add-automation-button:hover {
+    color: var(--ink);
+  }
+</style>

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -149,7 +149,6 @@
   }
   const initialiseField = (field, savingColumn) => {
     isCreating = !field
-
     if (field && !savingColumn) {
       editableColumn = cloneDeep(field)
       originalName = editableColumn.name ? editableColumn.name + "" : null
@@ -171,7 +170,8 @@
           relationshipPart2 = part2
         }
       }
-    } else if (!savingColumn) {
+    }
+    if (!savingColumn) {
       let highestNumber = 0
       Object.keys(table.schema).forEach(columnName => {
         const columnNumber = extractColumnNumber(columnName)
@@ -529,8 +529,16 @@
 <Layout noPadding gap="S">
   {#if mounted}
     <Input
+      value={editableColumn.name}
       autofocus
-      bind:value={editableColumn.name}
+      on:input={e => {
+        if (
+          !uneditable &&
+          !(linkEditDisabled && editableColumn.type === LINK_TYPE)
+        ) {
+          editableColumn.name = e.target.value
+        }
+      }}
       disabled={uneditable ||
         (linkEditDisabled && editableColumn.type === LINK_TYPE)}
       error={errors?.name}

packages/builder/src/components/design/Panel.svelte

@@ -16,7 +16,8 @@
   export let wide = false
   export let extraWide = false
   export let closeButtonIcon = "Close"
-
+  export let noHeaderBorder = false
+  export let titleCSS = true
   $: customHeaderContent = $$slots["panel-header-content"]
   $: customTitleContent = $$slots["panel-title-content"]
 </script>
@@ -32,6 +33,7 @@
     class="header"
     class:custom={customHeaderContent}
     class:borderBottom={borderBottomHeader}
+    class:noHeaderBorder
   >
     {#if showBackButton}
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
@@ -41,7 +43,7 @@
         <Icon name={icon} />
       </AbsTooltip>
     {/if}
-    <div class="title">
+    <div class:title={titleCSS}>
       {#if customTitleContent}
         <slot name="panel-title-content" />
       {:else}
@@ -106,6 +108,10 @@
     padding: 0 var(--spacing-l);
     gap: var(--spacing-m);
   }
+
+  .noHeaderBorder {
+    border-bottom: none !important;
+  }
   .header.borderBottom {
     border-bottom: var(--border-light);
   }

packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte

@@ -110,7 +110,7 @@
   }
 
   .setup {
-    padding-top: var(--spectrum-global-dimension-size-200);
+    padding-top: 9px;
     border-left: var(--border-light);
     display: flex;
     flex-direction: column;