Add primary display column and update all backend UI popovers with new form styles

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

@@ -8,7 +8,7 @@
   import LinkedRecord from "./LinkedRecord.svelte"
   import AttachmentList from "./AttachmentList.svelte"
   import TablePagination from "./TablePagination.svelte"
-  import { CreateEditRecordModal } from "./modals"
+  import CreateEditRecordModal from "./popovers/CreateEditRecord.svelte"
   import RowPopover from "./popovers/Row.svelte"
   import ColumnPopover from "./popovers/Column.svelte"
   import ViewPopover from "./popovers/View.svelte"
@@ -136,7 +136,6 @@
   }
   thead th {
     color: var(--ink);
-    text-transform: capitalize;
     font-weight: 500;
     font-size: 14px;
     text-rendering: optimizeLegibility;

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

@@ -8,7 +8,7 @@
   import ActionButton from "components/common/ActionButton.svelte"
   import AttachmentList from "./AttachmentList.svelte"
   import TablePagination from "./TablePagination.svelte"
-  import { CreateEditRecordModal } from "./modals"
+  import CreateEditRecordModal from "./popovers/CreateEditRecord.svelte"
   import RowPopover from "./popovers/Row.svelte"
   import ColumnPopover from "./popovers/Column.svelte"
   import ViewPopover from "./popovers/View.svelte"

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

@@ -9,7 +9,7 @@
   import ActionButton from "components/common/ActionButton.svelte"
   import LinkedRecord from "./LinkedRecord.svelte"
   import TablePagination from "./TablePagination.svelte"
-  import { CreateEditRecordModal } from "./modals"
+  import CreateEditRecordModal from "./popovers/CreateEditRecord.svelte"
   import RowPopover from "./popovers/Row.svelte"
   import ColumnPopover from "./popovers/Column.svelte"
   import ViewPopover from "./popovers/View.svelte"

packages/builder/src/components/backend/DataTable/popovers/Calculate.svelte

@@ -9,7 +9,7 @@
   } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+  import CreateEditRecord from "./CreateEditRecord.svelte"
 
   const CALCULATIONS = [
     {
@@ -90,7 +90,7 @@
 
   .input-group-row {
     display: grid;
-    grid-template-columns: 50px 1fr 20px 1fr;
+    grid-template-columns: 30px 1fr 20px 1fr;
     gap: var(--spacing-s);
     align-items: center;
   }

packages/builder/src/components/backend/DataTable/popovers/Column.svelte

@@ -8,7 +8,7 @@
     Select,
   } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
+  import CreateEditColumn from "./CreateEditColumn.svelte"
 
   let anchor
   let dropdown

packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte

@@ -2,14 +2,16 @@
   import { backendUiStore } from "builderStore"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import { CreateEditColumnModal } from "../modals"
+  import CreateEditColumnModal from "./CreateEditColumn.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { notifier } from "../../../../builderStore/store/notifications"
 
   export let field
 
   let anchor
   let dropdown
-
   let editing
+  let confirmDeleteDialog
 
   $: sortColumn = $backendUiStore.sort && $backendUiStore.sort.column
   $: sortDirection = $backendUiStore.sort && $backendUiStore.sort.direction
@@ -23,8 +25,13 @@
     editing = false
   }
 
-  function deleteField() {
+  function deleteColumn() {
-    backendUiStore.actions.models.deleteField(field)
+    if (field.name === $backendUiStore.selectedModel.primaryDisplay) {
+      notifier.danger("You cannot delete the primary display column")
+    } else {
+      backendUiStore.actions.models.deleteField(field)
+      notifier.success("Column deleted")
+    }
     hideEditor()
   }
 
@@ -38,7 +45,7 @@
 </script>
 
 <div class="container" bind:this={anchor} on:click={dropdown.show}>
-  {field.name}
+  <span>{field.name}</span>
   <Icon name="arrowdown" />
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
@@ -51,7 +58,9 @@
         <Icon name="edit" />
         Edit
       </li>
-      <li data-cy="delete-column-header" on:click={deleteField}>
+      <li
+        data-cy="delete-column-header"
+        on:click={() => confirmDeleteDialog.show()}>
         <Icon name="delete" />
         Delete
       </li>
@@ -70,6 +79,12 @@
     </ul>
   {/if}
 </DropdownMenu>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  body={`Are you sure you wish to delete this column? Your data will be deleted and this action cannot be undone.`}
+  okText="Delete Column"
+  onOk={deleteColumn}
+  title="Confirm Delete" />
 
 <style>
   .container {
@@ -79,6 +94,9 @@
     align-items: center;
     gap: var(--spacing-xs);
   }
+  .container span {
+    text-transform: capitalize;
+  }
 
   h5 {
     padding: var(--spacing-xl) 0 0 var(--spacing-xl);

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

@@ -1,6 +1,13 @@
 <script>
   import { onMount } from "svelte"
-  import { Input, TextArea, Button, Select } from "@budibase/bbui"
+  import {
+    Input,
+    TextArea,
+    Button,
+    Select,
+    Toggle,
+    Label,
+  } from "@budibase/bbui"
   import { cloneDeep, merge } from "lodash/fp"
   import { store, backendUiStore } from "builderStore"
   import { FIELDS } from "constants/backend"
@@ -25,18 +32,12 @@
 
   let originalName = field.name
 
-  $: required =
-    field.constraints &&
-    field.constraints.presence &&
-    !field.constraints.presence.allowEmpty
-
   async function saveColumn() {
     backendUiStore.update(state => {
       backendUiStore.actions.models.saveField({
         originalName,
         field,
       })
-
       return state
     })
     onClosed()
@@ -46,18 +47,18 @@
     const { type, constraints } = fieldDefinitions[
       event.target.value.toUpperCase()
     ]
-
     field.type = type
     field.constraints = constraints
   }
 </script>
 
 <div class="actions">
-  <Input placeholder="Name" thin bind:value={field.name} />
+  <Input label="Name" thin bind:value={field.name} />
 
   <Select
     secondary
     thin
+    label="Type"
     on:change={handleFieldConstraints}
     bind:value={field.type}>
     {#each Object.values(fieldDefinitions) as field}
@@ -65,16 +66,15 @@
     {/each}
   </Select>
 
-  <div class="field">
+  <Toggle
-    <label>Required</label>
+    bind:checked={field.constraints.presence.allowEmpty}
-    <input
+    thin
-      type="checkbox"
+    text="Required" />
-      bind:checked={required}
-      on:change={() => (field.constraints.presence.allowEmpty = required)} />
-  </div>
 
   {#if field.type === 'string' && field.constraints}
-    <NumberBox
+    <Input
+      thin
+      type="number"
       label="Max Length"
       bind:value={field.constraints.length.maximum} />
     <ValuesList label="Categories" bind:values={field.constraints.inclusion} />
@@ -84,23 +84,27 @@
       bind:value={field.constraints.datetime.earliest} />
     <DatePicker label="Latest" bind:value={field.constraints.datetime.latest} />
   {:else if field.type === 'number' && field.constraints}
-    <NumberBox
+    <Input
+      thin
+      type="number"
       label="Min Value"
       bind:value={field.constraints.numericality.greaterThanOrEqualTo} />
-    <NumberBox
+    <Input
+      thin
+      type="number"
       label="Max Value"
       bind:value={field.constraints.numericality.lessThanOrEqualTo} />
   {:else if field.type === 'link'}
     <div class="field">
       <label>Link</label>
-      <select class="budibase__input" bind:value={field.modelId}>
+      <Select bind:value={field.modelId}>
         <option value="">Choose an option</option>
         {#each $backendUiStore.models as model}
           {#if model._id !== $backendUiStore.draftModel._id}
             <option value={model._id}>{model.name}</option>
           {/if}
         {/each}
-      </select>
+      </Select>
     </div>
   {/if}
   <footer>
@@ -122,14 +126,4 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  .field {
-    display: grid;
-    grid-template-columns: auto 20px 1fr;
-    align-items: center;
-    grid-gap: 5px;
-    font-size: 14px;
-    font-weight: 500;
-    font-family: var(--font-normal);
-  }
 </style>

packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte

@@ -10,7 +10,7 @@
     Heading,
   } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import { CreateEditRecordModal } from "../modals"
+  import CreateEditRecordModal from "./CreateEditRecord.svelte"
   import * as api from "../api"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -29,7 +29,6 @@
   function hideEditor() {
     dropdown.hide()
     editing = false
-    close()
   }
 
   async function deleteRow() {

packages/builder/src/components/backend/DataTable/popovers/Filter.svelte

@@ -9,7 +9,7 @@
   } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+  import CreateEditRecord from "./CreateEditRecord.svelte"
 
   const CONDITIONS = [
     {
@@ -130,10 +130,7 @@
               {/each}
             </Select>
           {:else}
-            <Input
+            <Input thin placeholder="Value" bind:value={filter.value} />
-              thin
-              placeholder={filter.key || fields[0]}
-              bind:value={filter.value} />
           {/if}
           <i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
         {/each}

packages/builder/src/components/backend/DataTable/popovers/GroupBy.svelte

@@ -9,7 +9,7 @@
   } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+  import CreateEditRecord from "./CreateEditRecord.svelte"
 
   const CALCULATIONS = [
     {
@@ -38,14 +38,14 @@
 <div bind:this={anchor}>
   <TextButton text small active={!!view.groupBy} on:click={dropdown.show}>
     <Icon name="group" />
-    Group By
+    Group
   </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <div class="actions">
-    <h5>Group By</h5>
+    <h5>Group</h5>
     <div class="input-group-row">
-      <p>Group By</p>
+      <p>By</p>
       <Select secondary thin bind:value={view.groupBy}>
         <option value="">Choose an option</option>
         {#each fields as field}
@@ -79,7 +79,7 @@
 
   .input-group-row {
     display: grid;
-    grid-template-columns: 75px 1fr;
+    grid-template-columns: 20px 1fr;
     gap: var(--spacing-s);
     align-items: center;
   }

packages/builder/src/components/backend/DataTable/popovers/RecordFieldControl.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Input, Select, Label, DatePicker } from "@budibase/bbui"
+  import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
 
   export let meta
@@ -23,52 +23,31 @@
 
     return "text"
   }
-
-  const handleInput = event => {
-    if (event.target.type === "checkbox") {
-      value = event.target.checked
-      return
-    }
-
-    if (event.target.type === "number") {
-      value = parseInt(event.target.value)
-      return
-    }
-
-    value = event.target.value
-  }
 </script>
 
 {#if type === 'select'}
-  <Select thin secondary data-cy="{meta.name}-select" bind:value>
+  <Select
+    thin
+    secondary
+    label={meta.name}
+    data-cy="{meta.name}-select"
+    bind:value>
     <option value="">Choose an option</option>
     {#each meta.constraints.inclusion as opt}
       <option value={opt}>{opt}</option>
     {/each}
   </Select>
 {:else if type === 'date'}
-  <Label small forAttr={'datepicker-label'}>{meta.name}</Label>
+  <DatePicker label={meta.name} bind:value />
-  <DatePicker bind:value />
 {:else if type === 'file'}
-  <Label small forAttr={'dropzone-label'}>{meta.name}</Label>
+  <div>
-  <Dropzone bind:files={value} />
+    <Label extraSmall grey forAttr={'dropzone-label'}>{meta.name}</Label>
-{:else if type === 'checkbox'}
+    <Dropzone bind:files={value} />
-  <div class="checkbox">
-    <Label small forAttr={'checkbox-label'}>{meta.name}</Label>
-    <input
-      checked={value}
-      data-cy="{meta.name}-input"
-      {type}
-      on:change={handleInput} />
   </div>
+{:else if type === 'checkbox'}
+  <Toggle text={meta.name} bind:checked={value} data-cy="{meta.name}-input" />
 {:else}
-  <Input
+  <Input thin label={meta.name} data-cy="{meta.name}-input" {type} bind:value />
-    thin
-    placeholder={meta.name}
-    data-cy="{meta.name}-input"
-    {type}
-    {value}
-    on:change={handleInput} />
 {/if}
 
 <style>

packages/builder/src/components/backend/DataTable/popovers/Row.svelte

@@ -1,6 +1,6 @@
 <script>
   import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
-  import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+  import CreateEditRecord from "./CreateEditRecord.svelte"
 
   let anchor
   let dropdown

packages/builder/src/components/backend/DataTable/popovers/View.svelte

@@ -10,7 +10,7 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+  import CreateEditRecord from "./CreateEditRecord.svelte"
 
   let anchor
   let dropdown
@@ -50,7 +50,7 @@
 <Popover bind:this={dropdown} {anchor} align="left">
   <div class="actions">
     <h5>Create View</h5>
-    <Input placeholder="View Name" thin bind:value={name} />
+    <Input label="View Name" thin bind:value={name} />
     <div class="footer">
       <Button secondary on:click={dropdown.hide}>Cancel</Button>
       <Button primary on:click={saveView}>Save View</Button>

packages/builder/src/components/backend/ModelNavigator/CreateTable.svelte

@@ -35,8 +35,8 @@
     <h5>Create Table</h5>
     <Input
       data-cy="table-name-input"
-      placeholder="Table Name"
       thin
+      label="Table Name"
       bind:value={name} />
     <footer>
       <Button secondary on:click={onClosed}>Cancel</Button>

packages/builder/src/components/backend/ModelNavigator/EditTable.svelte

@@ -13,6 +13,8 @@
   let editing
   let confirmDeleteDialog
 
+  $: fields = Object.keys(table.schema)
+
   function showEditor() {
     editing = true
   }
@@ -20,7 +22,6 @@
   function hideEditor() {
     dropdown.hide()
     editing = false
-    close()
   }
 
   async function deleteTable() {
@@ -42,7 +43,17 @@
   {#if editing}
     <div class="actions">
       <h5>Edit Table</h5>
-      <Input placeholder="Table Name" thin bind:value={table.name} />
+      <Input label="Table Name" thin bind:value={table.name} />
+      <Select
+        label="Primary Display Column"
+        thin
+        secondary
+        bind:value={table.primaryDisplay}>
+        <option value="">Choose an option</option>
+        {#each fields as field}
+          <option value={field}>{field}</option>
+        {/each}
+      </Select>
       <footer>
         <Button secondary on:click={hideEditor}>Cancel</Button>
         <Button primary on:click={save}>Save</Button>

packages/builder/src/components/backend/ModelNavigator/EditView.svelte

@@ -22,7 +22,6 @@
   function hideEditor() {
     dropdown.hide()
     editing = false
-    close()
   }
 
   async function save() {
@@ -50,7 +49,7 @@
   {#if editing}
     <div class="actions">
       <h5>Edit View</h5>
-      <Input placeholder="View Name" thin bind:value={view.name} />
+      <Input label="View Name" thin bind:value={view.name} />
       <footer>
         <Button secondary on:click={hideEditor}>Cancel</Button>
         <Button primary on:click={save}>Save</Button>

packages/builder/src/components/common/DatePicker.svelte

@@ -11,4 +11,4 @@
   }
 </script>
 
-<DatePicker placeholder={label} on:change={onChange} {value} />
+<DatePicker {label} on:change={onChange} {value} />

packages/builder/src/components/common/ValuesList.svelte

@@ -1,5 +1,6 @@
 <script>
   import { join } from "lodash/fp"
+  import { TextArea, Label } from "@budibase/bbui"
 
   export let values
   export let label
@@ -15,32 +16,12 @@
   $: valuesText = join("\n")(values)
 </script>
 
-<div class="margin">
+<div class="container">
-  <label class="label">{label}</label>
+  <TextArea {label} value={valuesText} thin on:change={inputChanged} />
-  <textarea value={valuesText} on:change={inputChanged} />
 </div>
 
 <style>
-  .margin {
+  .container :global(textarea) {
-    display: grid;
+    min-height: 100px;
-  }
-  .label {
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 8px;
-  }
-  textarea {
-    font-size: 14px;
-    height: 200px;
-    width: 100%;
-    border-radius: 5px;
-    border: none;
-    cursor: text;
-    background: var(--grey-2);
-    padding: 12px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    font-family: Inter;
   }
 </style>

packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte

@@ -5,7 +5,7 @@
   import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "components/backend/DataTable/api"
-  import { CreateEditRecordModal } from "components/backend/DataTable/modals"
+  import CreateEditRecordModal from "components/backend/DataTable/popovers/CreateEditRecord.svelte"
 
   const { open, close } = getContext("simple-modal")
 

packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte

@@ -5,7 +5,7 @@
   import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "components/backend/DataTable/api"
-  import { CreateEditRecordModal } from "components/backend/DataTable/modals"
+  import CreateEditRecord from "components/backend/DataTable/popovers/CreateEditRecord.svelte"
 
   const { open, close } = getContext("simple-modal")