Adding the ability to create/control auto-columns from the create/edit column modal.

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -179,6 +179,10 @@ export function makeDatasourceFormComponents(datasource) {
   let fields = Object.keys(schema || {})
   fields.forEach(field => {
     const fieldSchema = schema[field]
+    // skip autocolumns
+    if (fieldSchema.autocolumn) {
+      return
+    }
     const fieldType =
       typeof fieldSchema === "object" ? fieldSchema.type : fieldSchema
     const componentType = fieldTypeToComponentMap[fieldType]

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

@@ -10,12 +10,13 @@
   import { cloneDeep } from "lodash/fp"
   import { backendUiStore } from "builderStore"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
-  import { FIELDS } from "constants/backend"
+  import { FIELDS, getAutoColumnInformation, buildAutoColumn, AUTO_COLUMN_SUB_TYPES } from "constants/backend"
   import { notifier } from "builderStore/store/notifications"
   import ValuesList from "components/common/ValuesList.svelte"
   import DatePicker from "components/common/DatePicker.svelte"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
+  const AUTO_COL = "auto"
   let fieldDefinitions = cloneDeep(FIELDS)
 
   export let onClosed
@@ -43,7 +44,17 @@
     $backendUiStore.selectedTable?._id === TableNames.USERS &&
     UNEDITABLE_USER_FIELDS.includes(field.name)
 
+  // used to select what different options can be displayed for column type
+  $: canBeSearched = field.type !== 'link' &&
+      field.subtype !== AUTO_COLUMN_SUB_TYPES.CREATED_BY &&
+      field.subtype !== AUTO_COLUMN_SUB_TYPES.UPDATED_BY
+  $: canBeDisplay = field.type !== 'link' && field.type !== AUTO_COL
+  $: canBeRequired = field.type !== 'link' && !uneditable && field.type !== AUTO_COL
+
   async function saveColumn() {
+    if (field.type === AUTO_COL) {
+      field = buildAutoColumn($backendUiStore.draftTable.name, field.name, field.subtype)
+    }
     backendUiStore.update(state => {
       backendUiStore.actions.tables.saveField({
         originalName,
@@ -67,11 +78,14 @@
   }
 
   function handleFieldConstraints(event) {
-    const { type, constraints } = fieldDefinitions[
+    const definition = fieldDefinitions[
       event.target.value.toUpperCase()
     ]
-    field.type = type
+    if (!definition) {
-    field.constraints = constraints
+      return
+    }
+    field.type = definition.type
+    field.constraints = definition.constraints
   }
 
   function onChangeRequired(e) {
@@ -124,9 +138,10 @@
     {#each Object.values(fieldDefinitions) as field}
       <option value={field.type}>{field.name}</option>
     {/each}
+    <option value={AUTO_COL}>Auto Column</option>
   </Select>
 
-  {#if field.type !== 'link' && !uneditable}
+  {#if canBeRequired}
     <Toggle
       checked={required}
       on:change={onChangeRequired}
@@ -135,7 +150,7 @@
       text="Required" />
   {/if}
 
-  {#if field.type !== 'link'}
+  {#if canBeDisplay}
     <Toggle
       bind:checked={primaryDisplay}
       on:change={onChangePrimaryDisplay}
@@ -143,6 +158,8 @@
       text="Use as table display column" />
 
     <Label grey small>Search Indexes</Label>
+  {/if}
+  {#if canBeSearched}
     <Toggle
       checked={indexes[0] === field.name}
       disabled={indexes[1] === field.name}
@@ -194,9 +211,16 @@
       label={`Column Name in Other Table`}
       thin
       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>
   {/if}
   <footer class="create-column-options">
-    {#if !uneditable && originalName}
+    {#if !uneditable && originalName != null}
       <TextButton text on:click={confirmDelete}>Delete Column</TextButton>
     {/if}
     <Button secondary on:click={onClosed}>Cancel</Button>

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

@@ -40,9 +40,11 @@
   onConfirm={saveRow}>
   <ErrorsBox {errors} />
   {#each tableSchema as [key, meta]}
+    {#if !meta.autocolumn}
       <div>
         <RowFieldControl {meta} bind:value={row[key]} />
       </div>
+    {/if}
   {/each}
 </ModalContent>
 

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

@@ -14,7 +14,7 @@
   import { NEW_ROW_TEMPLATE } from "builderStore/store/screenTemplates/newRowScreen"
   import { ROW_DETAIL_TEMPLATE } from "builderStore/store/screenTemplates/rowDetailScreen"
   import { ROW_LIST_TEMPLATE } from "builderStore/store/screenTemplates/rowListScreen"
-  import { AUTO_COLUMN_SUB_TYPES, buildAutoColumn } from "constants/backend"
+  import { buildAutoColumn, getAutoColumnInformation } from "constants/backend"
 
   const defaultScreens = [
     NEW_ROW_TEMPLATE,
@@ -29,13 +29,7 @@
   let dataImport
   let error = ""
   let createAutoscreens = true
-  let autoColumns = {
+  let autoColumns = getAutoColumnInformation()
-    [AUTO_COLUMN_SUB_TYPES.AUTO_ID]: {enabled: true, name: "Auto ID"},
-    [AUTO_COLUMN_SUB_TYPES.CREATED_BY]: {enabled: true, name: "Created By"},
-    [AUTO_COLUMN_SUB_TYPES.CREATED_AT]: {enabled: true, name: "Created At"},
-    [AUTO_COLUMN_SUB_TYPES.UPDATED_BY]: {enabled: true, name: "Updated By"},
-    [AUTO_COLUMN_SUB_TYPES.UPDATED_AT]: {enabled: true, name: "Updated At"},
-  }
 
   function addAutoColumns(tableName, schema) {
     for (let [subtype, col] of Object.entries(autoColumns)) {

packages/builder/src/components/integration/QueryViewer.svelte

@@ -13,7 +13,6 @@
   } from "@budibase/bbui"
   import { notifier } from "builderStore/store/notifications"
   import api from "builderStore/api"
-  import { FIELDS } from "constants/backend"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
   import EditQueryParamsPopover from "components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte"

packages/builder/src/constants/backend/index.js

@@ -79,15 +79,23 @@ export const FIELDS = {
       type: "array",
       presence: false,
     },
-  },
+  }
 }
 
 export const AUTO_COLUMN_SUB_TYPES = {
+  AUTO_ID: "autoID",
   CREATED_BY: "createdBy",
   CREATED_AT: "createdAt",
   UPDATED_BY: "updatedBy",
   UPDATED_AT: "updatedAt",
-  AUTO_ID: "autoID",
+}
+
+export const AUTO_COLUMN_DISPLAY_NAMES = {
+  AUTO_ID: "Auto ID",
+  CREATED_BY: "Created By",
+  CREATED_AT: "Created At",
+  UPDATED_BY: "Updated By",
+  UPDATED_AT: "Updated At",
 }
 
 export const FILE_TYPES = {
@@ -116,18 +124,29 @@ export function isAutoColumnUserRelationship(subtype) {
     subtype === AUTO_COLUMN_SUB_TYPES.UPDATED_BY
 }
 
+export function getAutoColumnInformation(enabled = true) {
+  let info = {}
+  for (let [key, subtype] of Object.entries(AUTO_COLUMN_SUB_TYPES)) {
+    info[subtype] = {enabled, name: AUTO_COLUMN_DISPLAY_NAMES[key]}
+  }
+  return info
+}
+
 export function buildAutoColumn(tableName, name, subtype) {
-  let type
+  let type, constraints
   switch (subtype) {
     case AUTO_COLUMN_SUB_TYPES.UPDATED_BY:
     case AUTO_COLUMN_SUB_TYPES.CREATED_BY:
       type = FIELDS.LINK.type
+      constraints = FIELDS.LINK.constraints
       break
     case AUTO_COLUMN_SUB_TYPES.AUTO_ID:
       type = FIELDS.NUMBER.type
+      constraints = FIELDS.NUMBER.constraints
       break
     default:
       type = FIELDS.STRING.type
+      constraints = FIELDS.STRING.constraints
       break
   }
   if (Object.values(AUTO_COLUMN_SUB_TYPES).indexOf(subtype) === -1) {
@@ -139,8 +158,7 @@ export function buildAutoColumn(tableName, name, subtype) {
     subtype,
     icon: "ri-magic-line",
     autocolumn: true,
-    // no constraints, this should never have valid inputs
+    constraints,
-    constraints: {},
   }
   if (isAutoColumnUserRelationship(subtype)) {
     base.tableId = USER_TABLE_ID