Move primary display column option in to column popover

packages/builder/src/builderStore/store/backend.js

@@ -91,7 +91,7 @@ export const getBackendUiStore = () => {
           return state
         })
       },
-      saveField: ({ originalName, field }) => {
+      saveField: ({ originalName, field, primaryDisplay = false }) => {
         store.update(state => {
           // delete the original if renaming
           if (originalName) {
@@ -102,8 +102,12 @@ export const getBackendUiStore = () => {
             }
           }
 
-          state.draftTable.schema[field.name] = cloneDeep(field)
+          // Optionally set primary display
+          if (primaryDisplay) {
+            state.draftTable.primaryDisplay = field.name
+          }
 
+          state.draftTable.schema[field.name] = cloneDeep(field)
           store.actions.tables.save(state.draftTable)
           return state
         })

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

@@ -28,9 +28,15 @@
   export let field = {
     type: "string",
     constraints: fieldDefinitions.STRING.constraints,
+
+    // Initial value for column name in other table for linked records
+    fieldName: $backendUiStore.selectedTable.name,
   }
 
   let originalName = field.name
+  let primaryDisplay =
+    $backendUiStore.selectedTable.primaryDisplay == null ||
+    $backendUiStore.selectedTable.primaryDisplay === field.name
   $: tableOptions = $backendUiStore.tables.filter(
     table => table._id !== $backendUiStore.draftTable._id
   )
@@ -41,6 +47,7 @@
       backendUiStore.actions.tables.saveField({
         originalName,
         field,
+        primaryDisplay,
       })
       return state
     })
@@ -86,6 +93,13 @@
       text="Required" />
   {/if}
 
+  {#if field.type !== 'link'}
+    <Toggle
+      bind:checked={primaryDisplay}
+      thin
+      text="Use as table display column" />
+  {/if}
+
   {#if field.type === 'string'}
     <Input
       thin

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -78,16 +78,6 @@
         bind:value={table.name}
         on:input={checkValid}
         {error} />
-      <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 disabled={error} on:click={save}>Save</Button>