Update some builder components to use new forms

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

@@ -21,12 +21,11 @@
 </script>
 
 {#if type === 'options'}
-  <Select thin secondary {label} 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>
+  <Select
+    {label}
+    data-cy="{meta.name}-select"
+    bind:value
+    options={meta.constraints.inclusion} />
 {:else if type === 'datetime'}
   <DatePicker {label} bind:value />
 {:else if type === 'attachment'}
@@ -47,7 +46,6 @@
   </div>
 {:else}
   <Input
-    thin
     {label}
     data-cy="{meta.name}-input"
     {type}

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

@@ -1,10 +1,5 @@
 <script>
-  import {
-    Button,
-    Icon,
-    Modal,
-    ModalContent,
-  } from "@budibase/bbui"
+  import { Button, Icon, Modal, ModalContent } from "@budibase/bbui"
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
   let modal
@@ -15,7 +10,7 @@
 </Button>
 <Modal bind:this={modal}>
   <ModalContent
-    size="large"
+    size="medium"
     showCancelButton={false}
     showConfirmButton={false}
     title={'Create Column'}>

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

@@ -1,12 +1,5 @@
 <script>
-  import {
-    Input,
-    Button,
-    Label,
-    Select,
-    Toggle,
-    Radio,
-  } from "@budibase/bbui"
+  import { Input, Button, Label, Select, Toggle, Radio } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
   import { tables } from "stores/backend"
 
@@ -54,8 +47,9 @@
     $tables.selected?._id === TableNames.USERS &&
     UNEDITABLE_USER_FIELDS.includes(field.name)
   $: invalid =
+    !field.name ||
     (field.type === LINK_TYPE && !field.tableId) ||
-    Object.keys($tables.draft.schema).some(key => key === field.name)
+    Object.keys($tables.draft?.schema ?? {}).some(key => key === field.name)
 
   // used to select what different options can be displayed for column type
   $: canBeSearched =
@@ -91,19 +85,19 @@
   }
 
   function handleTypeChange(event) {
-    const definition = fieldDefinitions[event.target.value.toUpperCase()]
-    if (!definition) {
-      return
-    }
     // remove any extra fields that may not be related to this type
     delete field.autocolumn
     delete field.subtype
     delete field.tableId
     delete field.relationshipType
-    // add in defaults and initial definition
-    field.type = definition.type
-    field.constraints = definition.constraints
-    // default relationships many to many
+
+    // Add in defaults and initial definition
+    const definition = fieldDefinitions[event.detail?.toUpperCase()]
+    if (definition?.constraints) {
+      field.constraints = definition.constraints
+    }
+
+    // Default relationships many to many
     if (field.type === LINK_TYPE) {
       field.relationshipType = RelationshipTypes.MANY_TO_MANY
     }
@@ -173,20 +167,15 @@
 </script>
 
 <div class="actions" class:hidden={deletion}>
-  <Input label="Name" thin bind:value={field.name} disabled={uneditable} />
+  <Input label="Name" bind:value={field.name} disabled={uneditable} />
 
   <Select
     disabled={originalName}
-    secondary
-    thin
     label="Type"
-    on:change={handleTypeChange}
-    bind:value={field.type}>
-    {#each Object.values(fieldDefinitions) as field}
-      <option value={field.type}>{field.name}</option>
-    {/each}
-    <option value={AUTO_COL}>Auto Column</option>
-  </Select>
+    bind:value={field.type}
+    options={[...Object.values(fieldDefinitions), { name: 'Auto Column', type: AUTO_COL }]}
+    getOptionLabel={field => field.name}
+    getOptionValue={field => field.type} />
 
   {#if canBeRequired}
     <Toggle
@@ -223,7 +212,6 @@
 
   {#if field.type === 'string'}
     <Input
-      thin
       type="number"
       label="Max Length"
       bind:value={field.constraints.length.maximum} />
@@ -238,22 +226,20 @@
     <DatePicker label="Latest" bind:value={field.constraints.datetime.latest} />
   {:else if field.type === 'number'}
     <Input
-      thin
       type="number"
       label="Min Value"
       bind:value={field.constraints.numericality.greaterThanOrEqualTo} />
     <Input
-      thin
       type="number"
       label="Max Value"
       bind:value={field.constraints.numericality.lessThanOrEqualTo} />
   {:else if field.type === 'link'}
-    <Select label="Table" thin secondary bind:value={field.tableId}>
-      <option value="">Choose an option</option>
-      {#each tableOptions as table}
-        <option value={table._id}>{table.name}</option>
-      {/each}
-    </Select>
+    <Select
+      label="Table"
+      bind:value={field.tableId}
+      options={tableOptions}
+      getOptionLabel={table => table.name}
+      getOptionValue={table => table._id} />
     {#if relationshipOptions && relationshipOptions.length > 0}
       <div>
         <Label grey extraSmall>Define the relationship</Label>
@@ -274,23 +260,24 @@
         </div>
       </div>
     {/if}
-    <Input
-      label={`Column Name in Other Table`}
-      thin
-      bind:value={field.fieldName} />
+    <Input label={`Column Name in Other Table`} bind:value={field.fieldName} />
   {:else if field.type === AUTO_COL}
-    <Select label="Auto Column Type" thin secondary bind:value={field.subtype}>
-      <option value="">Choose a subtype</option>
-      {#each Object.entries(getAutoColumnInformation()) as [subtype, info]}
-        <option value={subtype}>{info.name}</option>
-      {/each}
-    </Select>
+    <Select
+      label="Auto Column Type"
+      value={field.subtype}
+      on:change={e => (field.subtype = e.detail)}
+      options={Object.entries(getAutoColumnInformation())}
+      getOptionLabel={option => option[1].name}
+      getOptionValue={option => option[0]} />
   {/if}
-  <footer class="create-column-options">
+  <footer>
     {#if !uneditable && originalName != null}
-      <Button warning size="S" text on:click={confirmDelete}>Delete Column</Button>
+      <Button warning size="S" text on:click={confirmDelete}>
+        Delete Column
+      </Button>
     {/if}
-    <Button on:click={onClosed}>Cancel</Button>
+    <div class="spacer" />
+    <Button secondary on:click={onClosed}>Cancel</Button>
     <Button cta on:click={saveColumn} bind:disabled={invalid}>
       Save Column
     </Button>
@@ -322,12 +309,13 @@
 
   footer {
     display: flex;
+    flex-direction: row;
+    align-items: center;
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  :global(.create-column-options button:first-child) {
-    margin-right: auto;
+  .spacer {
+    flex: 1 1 auto;
   }
 
   .rel-type-center {

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

@@ -17,6 +17,7 @@
     : $tables.selected
   $: tableSchema = getUserSchema(table)
   $: customSchemaKeys = getCustomSchemaKeys(tableSchema)
+  $: if (!row.status) row.status = "active"
 
   const getUserSchema = table => {
     let schema = table?.schema ?? {}
@@ -86,20 +87,18 @@
   <!-- Defer rendering this select until roles load, otherwise the initial
        selection is always undefined -->
   <Select
-    thin
-    secondary
     label="Role"
     data-cy="roleId-select"
-    bind:value={row.roleId}>
-    <option value="">Choose an option</option>
-    {#each $roles as role}
-      <option value={role._id}>{role.name}</option>
-    {/each}
-  </Select>
-  <RowFieldControl
-    meta={{ name: 'status', type: 'options', constraints: { inclusion: ['active', 'inactive'] } }}
+    bind:value={row.roleId}
+    options={$roles}
+    getOptionLabel={role => role.name}
+    getOptionValue={role => role._id} />
+  <Select
+    label="Status"
     bind:value={row.status}
-    defaultValue={'active'} />
+    options={[{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }]}
+    getOptionLabel={status => status.label}
+    getOptionValue={status => status.value} />
   {#each customSchemaKeys as [key, meta]}
     {#if !meta.autocolumn}
       <RowFieldControl {meta} bind:value={row[key]} {creating} />

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -201,7 +201,7 @@
 
   .field {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: 2fr 4fr 1fr 1fr;
     margin-top: var(--spacing-m);
     align-items: center;
     grid-gap: var(--spacing-m);

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -92,6 +92,7 @@
 <ModalContent
   title="Create Table"
   confirmText="Create"
+  size="large"
   onConfirm={saveTable}
   disabled={error || !name || (dataImport && !dataImport.valid)}>
   <Input

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

@@ -42,27 +42,18 @@
 {:else}
   {#if schema.relationshipType === 'one-to-many'}
     <Select
-      thin
-      secondary
-      on:change={e => (linkedIds = e.target.value ? [e.target.value] : [])}
-      name={label}
-      {label}>
-      <option value="">Choose an option</option>
-      {#each rows as row}
-        <option selected={row._id === linkedIds[0]} value={row._id}>
-          {getPrettyName(row)}
-        </option>
-      {/each}
-    </Select>
+      value={linkedIds?.[0]}
+      options={rows}
+      getOptionLabel={getPrettyName}
+      getOptionValue={row => row._id}
+      on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
+      {label} />
   {:else}
     <Multiselect
-      secondary
       bind:value={linkedIds}
       {label}
-      placeholder="Choose some options">
-      {#each rows as row}
-        <option value={row._id}>{getPrettyName(row)}</option>
-      {/each}
-    </Multiselect>
+      options={rows}
+      getOptionLabel={getPrettyName}
+      getOptionValue={row => row._id} />
   {/if}
 {/if}

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -38,7 +38,7 @@
   }
 
   const updateAccessRole = event => {
-    const role = event.target.value
+    const role = event.detail
 
     // Select a valid screen with this new role - otherwise we'll not be
     // able to change role at all because ComponentNavigationTree will kick us
@@ -80,11 +80,10 @@
           secondary
           on:change={updateAccessRole}
           value={$selectedAccessRole}
-          label="Filter by Access">
-          {#each $roles as role}
-            <option value={role._id}>{role.name}</option>
-          {/each}
-        </Select>
+          label="Filter by Access"
+          getOptionLabel={role => role.name}
+          getOptionValue={role => role._id}
+          options={$roles} />
         <div class="search-screens">
           <Input
             extraThin