Merge pull request #8549 from Budibase/feature/martin-small-ux-updates

bunch of small UX updates around row creation, borders, new buttons

packages/builder/cypress/support/commands.js

@@ -781,7 +781,7 @@ Cypress.Commands.add("selectExternalDatasource", datasourceName => {
   cy.navigateToDataSection()
   // Open Datasource modal
   cy.get(".nav").within(() => {
-    cy.get(".add-button").click()
+    cy.get("[data-cy='new-datasource']").click()
   })
   // Clicks specified datasource & continue
   cy.get(".item-list", { timeout: 1000 }).contains(datasourceName).click()

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

@@ -1,7 +1,7 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
+  import { Modal, Tabs, Tab, Button, Layout } from "@budibase/bbui"
 
   export let modal
   export let webhookModal
@@ -10,23 +10,18 @@
 <div class="nav">
   <Tabs selected="Automations">
     <Tab title="Automations">
+      <Layout paddingX="L" paddingY="L" gap="S">
+        <Button cta wide on:click={modal.show}>Add automation</Button>
+      </Layout>
       <AutomationList />
       <Modal bind:this={modal}>
         <CreateAutomationModal {webhookModal} />
       </Modal>
     </Tab>
   </Tabs>
-  <div class="add-button">
-    <Icon hoverable name="AddCircle" on:click={modal.show} />
-  </div>
 </div>
 
 <style>
-  .add-button {
-    position: absolute;
-    top: var(--spacing-l);
-    right: var(--spacing-xl);
-  }
   .nav {
     overflow-y: auto;
     background: var(--background);

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

@@ -76,7 +76,7 @@
   </Body>
   <Input
     bind:value={name}
-    on:change={() => (nameTouched = true)}
+    on:input={() => (nameTouched = true)}
     bind:error={nameError}
     label="Name"
   />
@@ -124,11 +124,14 @@
     padding: var(--spectrum-alias-item-padding-s);
     background: var(--spectrum-alias-background-color-secondary);
     transition: 0.3s all;
-    border: solid var(--spectrum-alias-border-color);
     border-radius: 5px;
     box-sizing: border-box;
     border-width: 2px;
   }
+
+  .item:hover {
+    background: var(--spectrum-alias-background-color-tertiary);
+  }
   .selected {
     background: var(--spectrum-alias-background-color-tertiary);
   }

packages/builder/src/components/backend/DataTable/RowFieldControl.svelte

@@ -18,6 +18,7 @@
   export let meta
   export let value = defaultValue || (meta.type === "boolean" ? false : "")
   export let readonly
+  export let error
 
   const resolveTimeStamp = timestamp => {
     if (!timestamp) {
@@ -50,6 +51,7 @@
   />
 {:else if type === "datetime"}
   <DatePicker
+    {error}
     {label}
     timeOnly={isTimeStamp}
     enableTime={!meta?.dateOnly}
@@ -57,18 +59,23 @@
     bind:value
   />
 {:else if type === "attachment"}
-  <Dropzone {label} bind:value />
+  <Dropzone {label} {error} bind:value />
 {:else if type === "boolean"}
-  <Toggle text={label} bind:value data-cy="{meta.name}-input" />
+  <Toggle text={label} {error} bind:value data-cy="{meta.name}-input" />
 {:else if type === "array" && meta.constraints.inclusion.length !== 0}
-  <Multiselect bind:value {label} options={meta.constraints.inclusion} />
+  <Multiselect
+    bind:value
+    {error}
+    {label}
+    options={meta.constraints.inclusion}
+  />
 {:else if type === "link"}
-  <LinkedRowSelector bind:linkedRows={value} schema={meta} />
+  <LinkedRowSelector {error} bind:linkedRows={value} schema={meta} />
 {:else if type === "longform"}
   {#if meta.useRichText}
-    <RichTextField {label} height="150px" bind:value />
+    <RichTextField {error} {label} height="150px" bind:value />
   {:else}
-    <TextArea {label} height="150px" bind:value />
+    <TextArea {error} {label} height="150px" bind:value />
   {/if}
 {:else if type === "json"}
   <Label>{label}</Label>
@@ -77,12 +84,14 @@
     mode="json"
     on:change={({ detail }) => (value = detail.value)}
     value={stringVal}
+    {error}
   />
 {:else}
   <Input
     {label}
     data-cy="{meta.name}-input"
     {type}
+    {error}
     bind:value
     disabled={readonly}
   />

packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte

@@ -19,7 +19,7 @@
   $: text = `${item}${selectedRows?.length === 1 ? "" : "s"}`
 </script>
 
-<Button icon="Delete" size="s" primary quiet on:click={modal.show}>
+<Button icon="Delete" size="s" warning quiet on:click={modal.show}>
   Delete
   {selectedRows.length}
   {text}

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

@@ -5,7 +5,6 @@
   import RowFieldControl from "../RowFieldControl.svelte"
   import { API } from "api"
   import { ModalContent } from "@budibase/bbui"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
   import { FIELDS } from "constants/backend"
 
   const FORMULA_TYPE = FIELDS.FORMULA.type
@@ -32,13 +31,15 @@
       if (error.handled) {
         const response = error.json
         if (response?.errors) {
-          errors = Object.entries(response.errors)
+          errors = response.errors
-            .map(([key, error]) => ({ dataPath: key, message: error }))
+        } else if (response?.validationErrors) {
-            .flat()
+          const mappedErrors = {}
-        } else if (error.status === 400 && response?.validationErrors) {
+          for (let field in response.validationErrors) {
-          errors = Object.keys(response.validationErrors).map(field => ({
+            mappedErrors[
-            message: `${field} ${response.validationErrors[field][0]}`,
+              field
-          }))
+            ] = `${field} ${response.validationErrors[field][0]}`
+          }
+          errors = mappedErrors
         }
       } else {
         notifications.error("Failed to save row")
@@ -54,11 +55,10 @@
   confirmText={creating ? "Create Row" : "Save Row"}
   onConfirm={saveRow}
 >
-  <ErrorsBox {errors} />
   {#each tableSchema as [key, meta]}
     {#if !meta.autocolumn && meta.type !== FORMULA_TYPE}
       <div>
-        <RowFieldControl {meta} bind:value={row[key]} />
+        <RowFieldControl error={errors[key]} {meta} bind:value={row[key]} />
       </div>
     {/if}
   {/each}

packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte

@@ -35,7 +35,6 @@
       var(--spectrum-alias-item-padding-m);
     background: var(--spectrum-alias-background-color-secondary);
     transition: background 0.13s ease-out;
-    border: solid var(--spectrum-alias-border-color);
     border-radius: 5px;
     box-sizing: border-box;
     border-width: 2px;

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

@@ -201,7 +201,6 @@
       var(--spectrum-alias-item-padding-m);
     background: var(--spectrum-alias-background-color-secondary);
     transition: background 0.13s ease-out;
-    border: solid var(--spectrum-alias-border-color);
     border-radius: 5px;
     box-sizing: border-box;
     border-width: 2px;

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

@@ -1,6 +1,6 @@
 <script>
   import { redirect, params } from "@roxi/routify"
-  import { Icon, Tabs, Tab } from "@budibase/bbui"
+  import { Button, Tabs, Tab, Layout } from "@budibase/bbui"
   import { BUDIBASE_INTERNAL_DB } from "constants"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
   import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@@ -23,18 +23,15 @@
   <div class="nav">
     <Tabs {selected} on:select={selectFirstDatasource}>
       <Tab title="Sources">
-        <DatasourceNavigator />
+        <Layout paddingX="L" paddingY="L" gap="S">
+          <Button dataCy={`new-datasource`} cta wide on:click={modal.show}
+            >Add source</Button
+          >
+        </Layout>
         <CreateDatasourceModal bind:modal />
+        <DatasourceNavigator />
       </Tab>
     </Tabs>
-    <div
-      class="add-button"
-      data-cy={`new-${isExternal ? "datasource" : "table"}`}
-    >
-      {#if modal}
-        <Icon hoverable name="AddCircle" on:click={modal.show} />
-      {/if}
-    </div>
   </div>
   <div class="content">
     <slot />