Merge remote-tracking branch 'origin/master' into BUDI-9127/allow-selecting-oauth2-configs

eslint.config.mjs

@@ -47,6 +47,9 @@ export default [
 
       parserOptions: {
         allowImportExportEverywhere: true,
+        svelteFeatures: {
+          experimentalGenerics: true,
+        },
       },
     },
 

packages/backend-core/src/sql/sqlTable.ts

@@ -141,19 +141,23 @@ function generateSchema(
             .references(`${tableName}.${relatedPrimary}`)
         }
         break
+      case FieldType.SIGNATURE_SINGLE:
+      case FieldType.ATTACHMENTS:
+      case FieldType.ATTACHMENT_SINGLE:
+        // single attachments are stored as an object, multi attachments
+        // are stored as an array
+        schema.json(key)
+        break
       case FieldType.FORMULA:
         // This is allowed, but nothing to do on the external datasource
         break
       case FieldType.AI:
         // This is allowed, but nothing to do on the external datasource
         break
-      case FieldType.ATTACHMENTS:
-      case FieldType.ATTACHMENT_SINGLE:
-      case FieldType.SIGNATURE_SINGLE:
       case FieldType.AUTO:
       case FieldType.JSON:
       case FieldType.INTERNAL:
-        throw `${column.type} is not a valid SQL type`
+        throw new Error(`${column.type} is not a valid SQL type`)
 
       default:
         utils.unreachable(columnType)

packages/bbui/src/Form/Core/Multiselect.svelte

@@ -20,7 +20,7 @@
   export let searchTerm: string | null = null
   export let customPopoverHeight: string | undefined = undefined
   export let open: boolean = false
-  export let loading: boolean
+  export let loading: boolean = false
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 

packages/bbui/src/Form/DatePicker.svelte

@@ -3,7 +3,7 @@
   import DatePicker from "./Core/DatePicker/DatePicker.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
+  export let value = undefined
   export let label = null
   export let labelPosition = "above"
   export let disabled = false

packages/bbui/src/Form/Multiselect.svelte

@@ -1,29 +1,31 @@
-<script>
+<script lang="ts" generics="Option">
   import { createEventDispatcher } from "svelte"
   import Multiselect from "./Core/Multiselect.svelte"
   import Field from "./Field.svelte"
 
-  export let value = []
+  export let value: string[] | string = []
-  export let label = null
+  export let label: string | undefined = undefined
   export let disabled = false
   export let readonly = false
   export let labelPosition = "above"
-  export let error = null
+  export let error: string | undefined = undefined
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
-  export let options = []
+  export let options: Option[] = []
-  export let getOptionLabel = option => option
+  export let getOptionLabel = (option: Option) => option
-  export let getOptionValue = option => option
+  export let getOptionValue = (option: Option) => option
   export let sort = false
   export let autoWidth = false
   export let autocomplete = false
-  export let searchTerm = null
+  export let searchTerm: string | undefined = undefined
-  export let customPopoverHeight
+  export let customPopoverHeight: string | undefined = undefined
-  export let helpText = null
+  export let helpText: string | undefined = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 
+  $: arrayValue = value && !Array.isArray(value) ? [value] : (value as string[])
+
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -31,10 +33,9 @@
 
 <Field {helpText} {label} {labelPosition} {error}>
   <Multiselect
-    {error}
     {disabled}
     {readonly}
-    {value}
+    bind:value={arrayValue}
     {options}
     {placeholder}
     {sort}

packages/bbui/src/Form/Toggle.svelte

@@ -3,10 +3,10 @@
   import Switch from "./Core/Switch.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
+  export let value = undefined
   export let label = null
   export let labelPosition = "above"
-  export let text = null
+  export let text = undefined
   export let disabled = false
   export let error = null
   export let helpText = null

packages/bbui/src/List/ListItem.svelte

@@ -89,17 +89,18 @@
   /* Selection is only meant for standalone list items (non stacked) so we just set a fixed border radius */
   .list-item.selected {
     background-color: var(--spectrum-global-color-blue-100);
-    border: 1px solid var(--spectrum-global-color-blue-400);
+    border: none;
   }
   .list-item.selected:after {
     content: "";
     position: absolute;
     height: 100%;
     width: 100%;
+    border: 1px solid var(--spectrum-global-color-blue-400);
     pointer-events: none;
     top: 0;
     left: 0;
-    border-radius: 4px;
+    border-radius: inherit;
     box-sizing: border-box;
     z-index: 1;
     opacity: 0.5;

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

@@ -1,40 +1,42 @@
-<script>
+<script lang="ts">
   import {
-    Input,
-    Button,
-    Label,
-    Select,
-    Multiselect,
-    Toggle,
-    Icon,
-    DatePicker,
-    Modal,
-    notifications,
-    Layout,
     AbsTooltip,
+    Button,
+    DatePicker,
+    Icon,
+    Input,
+    Label,
+    Layout,
+    Modal,
+    Multiselect,
+    notifications,
     ProgressCircle,
+    Select,
+    Toggle,
+    TooltipPosition,
+    TooltipType,
   } from "@budibase/bbui"
   import {
+    canHaveDefaultColumn,
+    helpers,
+    PROTECTED_EXTERNAL_COLUMNS,
+    PROTECTED_INTERNAL_COLUMNS,
     SWITCHABLE_TYPES,
     ValidColumnNameRegex,
-    helpers,
-    PROTECTED_INTERNAL_COLUMNS,
-    PROTECTED_EXTERNAL_COLUMNS,
-    canHaveDefaultColumn,
   } from "@budibase/shared-core"
   import { makePropSafe } from "@budibase/string-templates"
   import { createEventDispatcher, getContext, onMount } from "svelte"
   import { cloneDeep } from "lodash/fp"
-  import { tables, datasources } from "@/stores/builder"
+  import { datasources, tables } from "@/stores/builder"
   import { licensing } from "@/stores/portal"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "@/constants"
   import {
-    FIELDS,
-    RelationshipType,
-    PrettyRelationshipDefinitions,
     DB_TYPE_EXTERNAL,
+    FIELDS,
+    PrettyRelationshipDefinitions,
+    RelationshipType,
   } from "@/constants/backend"
-  import { getAutoColumnInformation, buildAutoColumn } from "@/helpers/utils"
+  import { buildAutoColumn, getAutoColumnInformation } from "@/helpers/utils"
   import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import AIFieldConfiguration from "@/components/common/AIFieldConfiguration.svelte"
   import ModalBindableInput from "@/components/common/bindings/ModalBindableInput.svelte"
@@ -43,42 +45,52 @@
   import {
     BBReferenceFieldSubType,
     FieldType,
+    FormulaType,
     SourceName,
   } from "@budibase/types"
   import RelationshipSelector from "@/components/common/RelationshipSelector.svelte"
-  import { RowUtils, canBeDisplayColumn } from "@budibase/frontend-core"
+  import { canBeDisplayColumn, RowUtils } from "@budibase/frontend-core"
   import ServerBindingPanel from "@/components/common/bindings/ServerBindingPanel.svelte"
   import OptionsEditor from "./OptionsEditor.svelte"
   import { getUserBindings } from "@/dataBinding"
+  import type {
+    Table,
+    Datasource,
+    FieldSchema,
+    UIField,
+    AutoFieldSubType,
+    FormulaResponseType,
+    FieldSchemaConfig,
+  } from "@budibase/types"
 
-  export let field
+  export let field: FieldSchema
 
   const dispatch = createEventDispatcher()
-  const { dispatch: gridDispatch, rows } = getContext("grid")
+  const { dispatch: gridDispatch, rows } = getContext("grid") as any
   const SafeID = `${makePropSafe("user")}.${makePropSafe("_id")}`
   const SingleUserDefault = `{{ ${SafeID} }}`
   const MultiUserDefault = `{{ js "${btoa(`return [$("${SafeID}")]`)}" }}`
 
   let mounted = false
-  let originalName
+  let originalName: string | undefined
-  let linkEditDisabled
+  let linkEditDisabled: boolean = false
-  let primaryDisplay
+  let hasPrimaryDisplay: boolean
-  let indexes = [...($tables.selected.indexes || [])]
+  let isCreating: boolean | undefined
-  let isCreating = undefined
   let relationshipPart1 = PrettyRelationshipDefinitions.MANY
   let relationshipPart2 = PrettyRelationshipDefinitions.ONE
-  let relationshipTableIdPrimary = null
+  let relationshipTableIdPrimary: string | undefined
-  let relationshipTableIdSecondary = null
+  let relationshipTableIdSecondary: string | undefined
-  let table = $tables.selected
+  let table: Table | undefined = $tables.selected
-  let confirmDeleteDialog
+  let confirmDeleteDialog: any
-  let savingColumn
+  let savingColumn: boolean
-  let deleteColName
+  let deleteColName: string | undefined
-  let jsonSchemaModal
+  let jsonSchemaModal: any
-  let editableColumn = {
+  let editableColumn: FieldSchemaConfig = {
-    type: FIELDS.STRING.type,
+    type: FieldType.STRING,
-    constraints: FIELDS.STRING.constraints,
+    constraints: FIELDS.STRING.constraints as any,
+    name: "",
     // Initial value for column name in other table for linked records
-    fieldName: $tables.selected.name,
+    fieldName: $tables.selected?.name || "",
   }
   let relationshipOpts1 = Object.values(PrettyRelationshipDefinitions)
   let relationshipOpts2 = Object.values(PrettyRelationshipDefinitions)
@@ -99,17 +111,42 @@
   const autoColumnInfo = getAutoColumnInformation()
   let optionsValid = true
 
+  // a fixed order for the types to stop them moving around
+  // we've never really guaranteed an order to these, which means that
+  // they can move around very easily
+  const fixedTypeOrder = [
+    FIELDS.STRING,
+    FIELDS.NUMBER,
+    FIELDS.OPTIONS,
+    FIELDS.ARRAY,
+    FIELDS.BOOLEAN,
+    FIELDS.DATETIME,
+    FIELDS.LINK,
+    FIELDS.AI,
+    FIELDS.LONGFORM,
+    FIELDS.USER,
+    FIELDS.USERS,
+    FIELDS.ATTACHMENT_SINGLE,
+    FIELDS.ATTACHMENTS,
+    FIELDS.FORMULA,
+    FIELDS.JSON,
+    FIELDS.BARCODEQR,
+    FIELDS.SIGNATURE_SINGLE,
+    FIELDS.BIGINT,
+    FIELDS.AUTO,
+  ]
+
   $: rowGoldenSample = RowUtils.generateGoldenSample($rows)
   $: aiEnabled =
-    $licensing.customAIConfigsEnabled || $licensing.budibaseAiEnabled
+    $licensing.customAIConfigsEnabled || $licensing.budibaseAIEnabled
-  $: if (primaryDisplay) {
+  $: if (hasPrimaryDisplay && editableColumn.constraints) {
     editableColumn.constraints.presence = { allowEmpty: false }
   }
   $: {
     // this parses any changes the user has made when creating a new internal relationship
     // into what we expect the schema to look like
     if (editableColumn.type === FieldType.LINK) {
-      relationshipTableIdPrimary = table._id
+      relationshipTableIdPrimary = table?._id
       if (relationshipPart1 === PrettyRelationshipDefinitions.ONE) {
         relationshipOpts2 = relationshipOpts2.filter(
           opt => opt !== PrettyRelationshipDefinitions.ONE
@@ -129,36 +166,44 @@
       editableColumn.relationshipType = Object.entries(relationshipMap).find(
         ([_, parts]) =>
           parts.part1 === relationshipPart1 && parts.part2 === relationshipPart2
-      )?.[0]
+      )?.[0] as RelationshipType
+      if (relationshipTableIdSecondary) {
         // Set the tableId based on the selected table
         editableColumn.tableId = relationshipTableIdSecondary
       }
     }
+  }
   $: initialiseField(field, savingColumn)
   $: checkConstraints(editableColumn)
   $: required =
-    primaryDisplay ||
+    hasPrimaryDisplay ||
     editableColumn?.constraints?.presence === true ||
-    editableColumn?.constraints?.presence?.allowEmpty === false
+    (editableColumn?.constraints?.presence as any)?.allowEmpty === false
   $: uneditable =
     $tables.selected?._id === TableNames.USERS &&
-    UNEDITABLE_USER_FIELDS.includes(editableColumn.name)
+    UNEDITABLE_USER_FIELDS.includes(editableColumn.name || "")
   $: invalid =
     !editableColumn?.name ||
     (editableColumn?.type === FieldType.LINK && !editableColumn?.tableId) ||
-    Object.keys(errors).length !== 0 ||
+    Object.keys(errors || {}).length !== 0 ||
     !optionsValid
   $: errors = checkErrors(editableColumn)
   $: datasource = $datasources.list.find(
     source => source._id === table?.sourceId
-  )
+  ) as Datasource | undefined
   $: tableAutoColumnsTypes = getTableAutoColumnTypes($tables?.selected)
-  $: availableAutoColumns = Object.keys(autoColumnInfo).reduce((acc, key) => {
+  $: availableAutoColumns = Object.keys(autoColumnInfo).reduce(
+    (acc: Record<string, { enabled: boolean; name: string }>, key: string) => {
       if (!tableAutoColumnsTypes.includes(key)) {
-      acc[key] = autoColumnInfo[key]
+        const subtypeKey = key as AutoFieldSubType
+        if (autoColumnInfo[subtypeKey]) {
+          acc[key] = autoColumnInfo[subtypeKey]
+        }
       }
       return acc
-  }, {})
+    },
+    {}
+  )
   $: availableAutoColumnKeys = availableAutoColumns
     ? Object.keys(availableAutoColumns)
     : []
@@ -176,18 +221,23 @@
     !editableColumn.autocolumn
   $: hasDefault =
     editableColumn?.default != null && editableColumn?.default !== ""
-  $: externalTable = table.sourceType === DB_TYPE_EXTERNAL
+  $: isExternalTable = table?.sourceType === DB_TYPE_EXTERNAL
   // in the case of internal tables the sourceId will just be undefined
   $: tableOptions = $tables.list.filter(
     opt =>
-      opt.sourceType === table.sourceType && table.sourceId === opt.sourceId
+      opt.sourceType === table?.sourceType && table.sourceId === opt.sourceId
   )
   $: typeEnabled =
     !originalName ||
     (originalName &&
       SWITCHABLE_TYPES[field.type] &&
       !editableColumn?.autocolumn)
-  $: allowedTypes = getAllowedTypes(datasource).map(t => ({
+  $: allowedTypes = getAllowedTypes(datasource, table)
+  $: orderedAllowedTypes = fixedTypeOrder
+    .filter(ordered =>
+      allowedTypes.find(allowed => allowed.type === ordered.type)
+    )
+    .map(t => ({
       fieldId: makeFieldId(t.type, t.subtype),
       ...t,
     }))
@@ -210,7 +260,23 @@
     editableColumn.default
   )
 
-  const fieldDefinitions = Object.values(FIELDS).reduce(
+  const allTableFields = [
+    FIELDS.STRING,
+    FIELDS.NUMBER,
+    FIELDS.OPTIONS,
+    FIELDS.ARRAY,
+    FIELDS.BOOLEAN,
+    FIELDS.DATETIME,
+    FIELDS.LINK,
+    FIELDS.LONGFORM,
+    FIELDS.FORMULA,
+    FIELDS.BARCODEQR,
+    FIELDS.BIGINT,
+  ]
+
+  const fieldDefinitions: Record<string, UIField> = Object.values(
+    FIELDS
+  ).reduce(
     // Storing the fields by complex field id
     (acc, field) => ({
       ...acc,
@@ -219,7 +285,7 @@
     {}
   )
 
-  function makeFieldId(type, subtype, autocolumn) {
+  function makeFieldId(type: string, subtype?: string, autocolumn?: boolean) {
     // don't make field IDs for auto types
     if (type === FieldType.AUTO || autocolumn) {
       return type.toUpperCase()
@@ -233,23 +299,29 @@
     }
   }
 
-  const initialiseField = (field, savingColumn) => {
+  const initialiseField = (
+    field: FieldSchema | undefined,
+    savingColumn: boolean
+  ) => {
     isCreating = !field
     if (field && !savingColumn) {
-      editableColumn = cloneDeep(field)
+      editableColumn = cloneDeep(field) as FieldSchemaConfig
-      originalName = editableColumn.name ? editableColumn.name + "" : null
+      originalName = editableColumn.name ? editableColumn.name + "" : undefined
       linkEditDisabled = originalName != null
-      primaryDisplay =
+      hasPrimaryDisplay =
-        $tables.selected.primaryDisplay == null ||
+        $tables.selected?.primaryDisplay == null ||
-        $tables.selected.primaryDisplay === editableColumn.name
+        $tables.selected?.primaryDisplay === editableColumn.name
 
       // Here we are setting the relationship values based on the editableColumn
       // This part of the code is used when viewing an existing field hence the check
       // for the tableId
       if (editableColumn.type === FieldType.LINK && editableColumn.tableId) {
-        relationshipTableIdPrimary = table._id
+        relationshipTableIdPrimary = table?._id
         relationshipTableIdSecondary = editableColumn.tableId
-        if (editableColumn.relationshipType in relationshipMap) {
+        if (
+          editableColumn.relationshipType &&
+          editableColumn.relationshipType in relationshipMap
+        ) {
           const { part1, part2 } =
             relationshipMap[editableColumn.relationshipType]
           relationshipPart1 = part1
@@ -267,18 +339,21 @@
     }
   }
 
-  const getTableAutoColumnTypes = table => {
+  const getTableAutoColumnTypes = (table: Table | undefined) => {
-    return Object.keys(table?.schema).reduce((acc, key) => {
+    return Object.keys(table?.schema || {}).reduce(
+      (acc: string[], key: string) => {
         let fieldSchema = table?.schema[key]
-      if (fieldSchema.autocolumn) {
+        if (fieldSchema?.autocolumn && fieldSchema?.subtype) {
           acc.push(fieldSchema.subtype)
         }
         return acc
-    }, [])
+      },
+      []
+    )
   }
 
   async function saveColumn() {
-    if (errors?.length) {
+    if (Object.keys(errors || {}).length) {
       return
     }
 
@@ -287,14 +362,18 @@
 
     delete saveColumn.fieldId
 
-    if (saveColumn.type === FieldType.AUTO) {
+    if (
+      $tables.selected &&
+      saveColumn.name &&
+      saveColumn.type === FieldType.AUTO
+    ) {
       saveColumn = buildAutoColumn(
         $tables.selected.name,
         saveColumn.name,
-        saveColumn.subtype
+        saveColumn.subtype as AutoFieldSubType
-      )
+      ) as FieldSchemaConfig
     }
-    if (saveColumn.type !== FieldType.LINK) {
+    if ("fieldName" in saveColumn && saveColumn.type !== FieldType.LINK) {
       delete saveColumn.fieldName
     }
 
@@ -304,22 +383,21 @@
     }
 
     // Ensure primary display columns are always required and don't have default values
-    if (primaryDisplay) {
+    if (hasPrimaryDisplay) {
-      saveColumn.constraints.presence = { allowEmpty: false }
+      saveColumn.constraints!.presence = { allowEmpty: false }
       delete saveColumn.default
     }
 
     // Ensure the field is not required if we have a default value
     if (saveColumn.default) {
-      saveColumn.constraints.presence = false
+      saveColumn.constraints!.presence = false
     }
 
     try {
       await tables.saveField({
         originalName,
-        field: saveColumn,
+        field: saveColumn as FieldSchema,
-        primaryDisplay,
+        hasPrimaryDisplay,
-        indexes,
       })
       dispatch("updatecolumns")
       gridDispatch("close-edit-column")
@@ -329,7 +407,7 @@
       } else {
         notifications.success("Column created successfully")
       }
-    } catch (err) {
+    } catch (err: any) {
       notifications.error(`Error saving column: ${err.message}`)
     } finally {
       savingColumn = false
@@ -337,65 +415,83 @@
   }
 
   function cancelEdit() {
+    if (originalName) {
       editableColumn.name = originalName
+    }
     gridDispatch("close-edit-column")
   }
 
   async function deleteColumn() {
     try {
+      if (deleteColName) {
         editableColumn.name = deleteColName
-      if (editableColumn.name === $tables.selected.primaryDisplay) {
+      }
+      if (editableColumn.name === $tables.selected?.primaryDisplay) {
         notifications.error("You cannot delete the display column")
       } else {
-        await tables.deleteField(editableColumn)
+        await tables.deleteField({ name: editableColumn.name! })
         notifications.success(`Column ${editableColumn.name} deleted`)
         confirmDeleteDialog.hide()
         dispatch("updatecolumns")
         gridDispatch("close-edit-column")
       }
-    } catch (error) {
+    } catch (error: any) {
       notifications.error(`Error deleting column: ${error.message}`)
     }
   }
 
-  function onHandleTypeChange(event) {
+  function onHandleTypeChange(event: any) {
     handleTypeChange(event.detail)
   }
 
-  function handleTypeChange(type) {
+  function handleTypeChange(type?: string) {
     // remove any extra fields that may not be related to this type
-    delete editableColumn.autocolumn
+    const columnsToClear = [
-    delete editableColumn.subtype
+      "autocolumn",
-    delete editableColumn.tableId
+      "subtype",
-    delete editableColumn.relationshipType
+      "tableId",
-    delete editableColumn.formulaType
+      "relationshipType",
-    delete editableColumn.constraints
+      "formulaType",
-    delete editableColumn.responseType
+      "responseType",
+    ]
+    for (let column of columnsToClear) {
+      if (column in editableColumn) {
+        delete editableColumn[column as keyof FieldSchema]
+      }
+    }
+    editableColumn.constraints = {}
 
     // Add in defaults and initial definition
-    const definition = fieldDefinitions[type?.toUpperCase()]
+    const definition = fieldDefinitions[type?.toUpperCase() || ""]
     if (definition?.constraints) {
       editableColumn.constraints = cloneDeep(definition.constraints)
     }
 
     editableColumn.type = definition.type
+    if (definition.subtype) {
+      // @ts-expect-error the setting of sub-type here doesn't fit our definition with
+      // FieldSchema, there is no type checking, it simply sets it if it is provided
       editableColumn.subtype = definition.subtype
+    }
 
     // Default relationships many to many
     if (editableColumn.type === FieldType.LINK) {
       editableColumn.relationshipType = RelationshipType.MANY_TO_MANY
     } else if (editableColumn.type === FieldType.FORMULA) {
-      editableColumn.formulaType = "dynamic"
+      editableColumn.formulaType = FormulaType.DYNAMIC
-      editableColumn.responseType = field?.responseType || FIELDS.STRING.type
+      editableColumn.responseType =
+        field && "responseType" in field
+          ? field.responseType
+          : (FIELDS.STRING.type as FormulaResponseType)
     }
   }
 
-  function setRequired(req) {
+  function setRequired(req: boolean) {
-    editableColumn.constraints.presence = req ? { allowEmpty: false } : false
+    editableColumn.constraints!.presence = req ? { allowEmpty: false } : false
     required = req
   }
 
-  function onChangeRequired(e) {
+  function onChangeRequired(e: any) {
     setRequired(e.detail)
   }
 
@@ -412,10 +508,21 @@
     deleteColName = ""
   }
 
-  function getAllowedTypes(datasource) {
+  function getAllowedTypes(
+    datasource: Datasource | undefined,
+    table: Table | undefined
+  ): UIField[] {
+    const isSqlTable = table?.sql
+    const isGoogleSheet =
+      table?.sourceType === DB_TYPE_EXTERNAL &&
+      datasource?.source === SourceName.GOOGLE_SHEETS
     if (originalName) {
       let possibleTypes = SWITCHABLE_TYPES[field.type] || [editableColumn.type]
-      if (helpers.schema.isDeprecatedSingleUserColumn(editableColumn)) {
+      if (
+        helpers.schema.isDeprecatedSingleUserColumn(
+          editableColumn as FieldSchema
+        )
+      ) {
         // This will handle old single users columns
         return [
           {
@@ -442,60 +549,43 @@
         .map(([_, fieldDefinition]) => fieldDefinition)
     }
 
-    if (!externalTable) {
+    if (!isExternalTable) {
-      return [
+      const fields = [
-        FIELDS.STRING,
+        ...allTableFields,
-        FIELDS.NUMBER,
-        FIELDS.OPTIONS,
-        FIELDS.ARRAY,
-        FIELDS.BOOLEAN,
-        FIELDS.DATETIME,
-        FIELDS.LINK,
-        ...(aiEnabled ? [FIELDS.AI] : []),
-        FIELDS.LONGFORM,
         FIELDS.USER,
         FIELDS.USERS,
         FIELDS.ATTACHMENT_SINGLE,
         FIELDS.ATTACHMENTS,
-        FIELDS.FORMULA,
-        FIELDS.JSON,
-        FIELDS.BARCODEQR,
         FIELDS.SIGNATURE_SINGLE,
-        FIELDS.BIGINT,
+        FIELDS.JSON,
         FIELDS.AUTO,
       ]
-    } else {
+      if (aiEnabled) {
-      let fields = [
+        fields.push(FIELDS.AI)
-        FIELDS.STRING,
-        FIELDS.NUMBER,
-        FIELDS.OPTIONS,
-        FIELDS.ARRAY,
-        FIELDS.BOOLEAN,
-        FIELDS.DATETIME,
-        FIELDS.LINK,
-        FIELDS.LONGFORM,
-        FIELDS.USER,
-        FIELDS.USERS,
-        FIELDS.FORMULA,
-        FIELDS.BARCODEQR,
-        FIELDS.BIGINT,
-      ]
-
-      // Filter out multiple users for google sheets
-      if (datasource?.source === SourceName.GOOGLE_SHEETS) {
-        fields = fields.filter(x => x !== FIELDS.USERS)
       }
-
-      // Filter out SQL-specific types for non-SQL datasources
-      if (!table.sql) {
-        fields = fields.filter(x => x !== FIELDS.LINK && x !== FIELDS.ARRAY)
-      }
-
       return fields
     }
+    if (isExternalTable && isSqlTable) {
+      return [
+        ...allTableFields,
+        FIELDS.USER,
+        FIELDS.USERS,
+        FIELDS.ATTACHMENT_SINGLE,
+        FIELDS.ATTACHMENTS,
+        FIELDS.SIGNATURE_SINGLE,
+      ]
+    } else if (isExternalTable && isGoogleSheet) {
+      // google-sheets supports minimum set (no attachments or user references)
+      return allTableFields
+    } else if (isExternalTable && !isSqlTable) {
+      // filter out SQL-specific types for non-SQL datasources
+      return allTableFields.filter(x => x !== FIELDS.LINK && x !== FIELDS.ARRAY)
     }
 
-  function checkConstraints(fieldToCheck) {
+    throw new Error("No valid allowed types found")
+  }
+
+  function checkConstraints(fieldToCheck: FieldSchema) {
     if (!fieldToCheck) {
       return
     }
@@ -526,11 +616,11 @@
     }
   }
 
-  function checkErrors(fieldInfo) {
+  function checkErrors(fieldInfo: FieldSchema) {
     if (!editableColumn) {
-      return {}
+      return
     }
-    function inUse(tbl, column, ogName = null) {
+    function inUse(tbl?: Table, column?: string, ogName?: string) {
       const parsedColumn = column ? column.toLowerCase().trim() : column
 
       return Object.keys(tbl?.schema || {}).some(key => {
@@ -538,11 +628,12 @@
         return lowerKey !== ogName?.toLowerCase() && lowerKey === parsedColumn
       })
     }
-    const newError = {}
+    const newError: { name?: string; subtype?: string; relatedName?: string } =
-    const prohibited = externalTable
+      {}
+    const prohibited = isExternalTable
       ? PROTECTED_EXTERNAL_COLUMNS
       : PROTECTED_INTERNAL_COLUMNS
-    if (!externalTable && fieldInfo.name?.startsWith("_")) {
+    if (!isExternalTable && fieldInfo.name?.startsWith("_")) {
       newError.name = `Column name cannot start with an underscore.`
     } else if (fieldInfo.name && !fieldInfo.name.match(ValidColumnNameRegex)) {
       newError.name = `Illegal character; must be alpha-numeric.`
@@ -558,31 +649,52 @@
       newError.subtype = `Auto Column requires a type.`
     }
 
-    if (fieldInfo.fieldName && fieldInfo.tableId) {
+    if (
+      fieldInfo.type === FieldType.LINK &&
+      fieldInfo.fieldName &&
+      fieldInfo.tableId
+    ) {
       const relatedTable = $tables.list.find(
         tbl => tbl._id === fieldInfo.tableId
       )
       if (inUse(relatedTable, fieldInfo.fieldName) && !originalName) {
-        newError.relatedName = `Column name already in use in table ${relatedTable.name}`
+        newError.relatedName = `Column name already in use in table ${relatedTable?.name}`
       }
     }
     return newError
   }
 
-  const sanitiseDefaultValue = (type, options, defaultValue) => {
+  const sanitiseDefaultValue = (
+    type: FieldType,
+    options: string[],
+    defaultValue?: string[] | string
+  ) => {
     if (!defaultValue?.length) {
       return
     }
     // Delete default value for options fields if the option is no longer available
-    if (type === FieldType.OPTIONS && !options.includes(defaultValue)) {
+    if (
+      type === FieldType.OPTIONS &&
+      typeof defaultValue === "string" &&
+      !options.includes(defaultValue)
+    ) {
       delete editableColumn.default
     }
     // Filter array default values to only valid options
-    if (type === FieldType.ARRAY) {
+    if (type === FieldType.ARRAY && Array.isArray(defaultValue)) {
       editableColumn.default = defaultValue.filter(x => options.includes(x))
     }
   }
 
+  function handleNameInput(evt: any) {
+    if (
+      !uneditable &&
+      !(linkEditDisabled && editableColumn.type === FieldType.LINK)
+    ) {
+      editableColumn.name = evt.target.value
+    }
+  }
+
   onMount(() => {
     mounted = true
   })
@@ -593,25 +705,18 @@
     <Input
       value={editableColumn.name}
       autofocus
-      on:input={e => {
+      on:input={handleNameInput}
-        if (
-          !uneditable &&
-          !(linkEditDisabled && editableColumn.type === FieldType.LINK)
-        ) {
-          editableColumn.name = e.target.value
-        }
-      }}
       disabled={uneditable ||
         (linkEditDisabled && editableColumn.type === FieldType.LINK)}
       error={errors?.name}
     />
   {/if}
   <Select
-    placeholder={null}
+    placeholder={undefined}
     disabled={!typeEnabled}
     bind:value={editableColumn.fieldId}
     on:change={onHandleTypeChange}
-    options={allowedTypes}
+    options={orderedAllowedTypes}
     getOptionLabel={field => field.name}
     getOptionValue={field => field.fieldId}
     getOptionIcon={field => field.icon}
@@ -623,7 +728,7 @@
     }}
   />
 
-  {#if editableColumn.type === FieldType.STRING}
+  {#if editableColumn.type === FieldType.STRING && editableColumn.constraints.length}
     <Input
       type="number"
       label="Max Length"
@@ -640,8 +745,8 @@
       <div class="tooltip-alignment">
         <Label size="M">Formatting</Label>
         <AbsTooltip
-          position="top"
+          position={TooltipPosition.Top}
-          type="info"
+          type={TooltipType.Info}
           text={"Rich text includes support for images, link"}
         >
           <Icon size="XS" name="InfoOutline" />
@@ -664,6 +769,7 @@
       <div class="label-length">
         <Label size="M">Earliest</Label>
       </div>
+      {#if editableColumn.constraints.datetime}
         <div class="input-length">
           <DatePicker
             bind:value={editableColumn.constraints.datetime.earliest}
@@ -671,12 +777,14 @@
             timeOnly={editableColumn.timeOnly}
           />
         </div>
+      {/if}
     </div>
 
     <div class="split-label">
       <div class="label-length">
         <Label size="M">Latest</Label>
       </div>
+      {#if editableColumn.constraints.datetime}
         <div class="input-length">
           <DatePicker
             bind:value={editableColumn.constraints.datetime.latest}
@@ -684,6 +792,7 @@
             timeOnly={editableColumn.timeOnly}
           />
         </div>
+      {/if}
     </div>
     {#if !editableColumn.timeOnly}
       {#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
@@ -691,10 +800,10 @@
           <div class="row">
             <Label>Time zones</Label>
             <AbsTooltip
-              position="top"
+              position={TooltipPosition.Top}
-              type="info"
+              type={TooltipType.Info}
               text={isCreating
-                ? null
+                ? undefined
                 : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
             >
               <Icon size="XS" name="InfoOutline" />
@@ -713,6 +822,7 @@
       <div class="label-length">
         <Label size="M">Min Value</Label>
       </div>
+      {#if editableColumn.constraints.numericality}
         <div class="input-length">
           <Input
             type="number"
@@ -720,18 +830,22 @@
               .greaterThanOrEqualTo}
           />
         </div>
+      {/if}
     </div>
 
     <div class="split-label">
       <div class="label-length">
         <Label size="M">Max Value</Label>
       </div>
+      {#if editableColumn.constraints.numericality}
         <div class="input-length">
           <Input
             type="number"
-          bind:value={editableColumn.constraints.numericality.lessThanOrEqualTo}
+            bind:value={editableColumn.constraints.numericality
+              .lessThanOrEqualTo}
           />
         </div>
+      {/if}
     </div>
   {:else if editableColumn.type === FieldType.LINK && !editableColumn.autocolumn}
     <RelationshipSelector
@@ -747,7 +861,7 @@
       {errors}
     />
   {:else if editableColumn.type === FieldType.FORMULA}
-    {#if !externalTable}
+    {#if !isExternalTable}
       <div class="split-label">
         <div class="label-length">
           <Label size="M">Formula Type</Label>
@@ -797,10 +911,12 @@
           title="Formula"
           value={editableColumn.formula}
           on:change={e => {
+            if (editableColumn.type === FieldType.FORMULA) {
               editableColumn = {
                 ...editableColumn,
                 formula: e.detail,
               }
+            }
           }}
           bindings={getBindings({ table })}
           allowJS
@@ -808,7 +924,7 @@
         />
       </div>
     </div>
-  {:else if editableColumn.type === FieldType.AI}
+  {:else if editableColumn.type === FieldType.AI && table}
     <AIFieldConfiguration
       aiField={editableColumn}
       context={rowGoldenSample}
@@ -816,9 +932,7 @@
       schema={table.schema}
     />
   {:else if editableColumn.type === FieldType.JSON}
-    <Button primary text on:click={openJsonSchemaEditor}>
+    <Button primary on:click={openJsonSchemaEditor}>Open schema editor</Button>
-      Open schema editor
-    </Button>
   {/if}
   {#if editableColumn.type === FieldType.AUTO || editableColumn.autocolumn}
     <Select
@@ -839,8 +953,7 @@
         <Toggle
           value={required}
           on:change={onChangeRequired}
-          disabled={primaryDisplay || hasDefault}
+          disabled={hasPrimaryDisplay || hasDefault}
-          thin
           text="Required"
         />
       {/if}
@@ -895,7 +1008,7 @@
 
 <div class="action-buttons">
   {#if !uneditable && originalName != null}
-    <Button quiet warning text on:click={confirmDelete}>Delete</Button>
+    <Button quiet warning on:click={confirmDelete}>Delete</Button>
   {/if}
   <Button secondary newStyles on:click={cancelEdit}>Cancel</Button>
   <Button

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

@@ -1,16 +1,18 @@
-<script>
+<script lang="ts">
   import { Modal, ModalContent, Body } from "@budibase/bbui"
 
-  export let title = ""
+  export let title: string = ""
-  export let body = ""
+  export let body: string = ""
-  export let okText = "Confirm"
+  export let okText: string = "Confirm"
-  export let cancelText = "Cancel"
+  export let cancelText: string = "Cancel"
-  export let onOk = undefined
+  export let size: "S" | "M" | "L" | "XL" | undefined = undefined
-  export let onCancel = undefined
+  export let onOk: (() => void) | undefined = undefined
-  export let warning = true
+  export let onCancel: (() => void) | undefined = undefined
-  export let disabled = false
+  export let onClose: (() => void) | undefined = undefined
+  export let warning: boolean = true
+  export let disabled: boolean = false
 
-  let modal
+  let modal: Modal
 
   export const show = () => {
     modal.show()
@@ -20,14 +22,16 @@
   }
 </script>
 
-<Modal bind:this={modal} on:hide={onCancel}>
+<Modal bind:this={modal} on:hide={onClose ?? onCancel}>
   <ModalContent
     onConfirm={onOk}
+    {onCancel}
     {title}
     confirmText={okText}
     {cancelText}
     {warning}
     {disabled}
+    {size}
   >
     <Body size="S">
       {body}

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

@@ -11,8 +11,8 @@
   export let errors
   export let relationshipOpts1
   export let relationshipOpts2
-  export let primaryTableChanged
+  export let primaryTableChanged = undefined
-  export let secondaryTableChanged
+  export let secondaryTableChanged = undefined
   export let primaryDisabled = true
 </script>
 

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

@@ -1,5 +1,5 @@
 <script>
-  import { goto, params } from "@roxi/routify"
+  import { beforeUrlChange, goto, params } from "@roxi/routify"
   import { datasources, flags, integrations, queries } from "@/stores/builder"
   import { environment } from "@/stores/portal"
   import {
@@ -25,7 +25,7 @@
     EditorModes,
   } from "@/components/common/CodeMirrorEditor.svelte"
   import RestBodyInput from "./RestBodyInput.svelte"
-  import { capitalise } from "@/helpers"
+  import { capitalise, confirm } from "@/helpers"
   import { onMount } from "svelte"
   import restUtils from "@/helpers/data/utils"
   import {
@@ -64,6 +64,7 @@
   let nestedSchemaFields = {}
   let saving
   let queryNameLabel
+  let mounted = false
 
   $: staticVariables = datasource?.config?.staticVariables || {}
 
@@ -105,8 +106,10 @@
 
   $: runtimeUrlQueries = readableToRuntimeMap(mergedBindings, breakQs)
 
-  $: originalQuery = originalQuery ?? cloneDeep(query)
   $: builtQuery = buildQuery(query, runtimeUrlQueries, requestBindings)
+  $: originalQuery = mounted
+    ? originalQuery ?? cloneDeep(builtQuery)
+    : undefined
   $: isModified = JSON.stringify(originalQuery) !== JSON.stringify(builtQuery)
 
   function getSelectedQuery() {
@@ -209,11 +212,14 @@
       originalQuery = null
 
       queryNameLabel.disableEditingState()
+      return { ok: true }
     } catch (err) {
       notifications.error(`Error saving query`)
     } finally {
       saving = false
     }
+
+    return { ok: false }
   }
 
   const validateQuery = async () => {
@@ -475,6 +481,38 @@
       staticVariables,
       restBindings
     )
+
+    mounted = true
+  })
+
+  $beforeUrlChange(async () => {
+    if (!isModified) {
+      return true
+    }
+
+    return await confirm({
+      title: "Some updates are not saved",
+      body: "Some of your changes are not yet saved. Do you want to save them before leaving?",
+      okText: "Save and continue",
+      cancelText: "Discard and continue",
+      size: "M",
+      onConfirm: async () => {
+        const saveResult = await saveQuery()
+        if (!saveResult.ok) {
+          // We can't leave as the query was not properly saved
+          return false
+        }
+
+        return true
+      },
+      onCancel: () => {
+        // Leave without saving anything
+        return true
+      },
+      onClose: () => {
+        return false
+      },
+    })
   })
 </script>
 

packages/builder/src/components/integration/rest/AuthPicker.svelte

@@ -76,7 +76,7 @@
   </div>
 
   <Body size="S" color="var(--spectrum-global-color-gray-700)">
-    Basic (Username & Password Authentication)
+    Basic & Bearer Authentication
   </Body>
 
   {#if authConfigs.length}
@@ -92,7 +92,7 @@
   {/if}
   <div>
     <Button secondary icon="Add" on:click={addBasicConfiguration}
-      >Add Basic</Button
+      >Add config</Button
     >
   </div>
 

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

@@ -6,6 +6,7 @@ import {
   Hosting,
 } from "@budibase/types"
 import { Constants } from "@budibase/frontend-core"
+import { UIField } from "@budibase/types"
 
 const { TypeIconMap } = Constants
 
@@ -27,7 +28,7 @@ export const AUTO_COLUMN_DISPLAY_NAMES: Record<
   UPDATED_AT: "Updated At",
 }
 
-export const FIELDS = {
+export const FIELDS: Record<string, UIField> = {
   STRING: {
     name: "Text",
     type: FieldType.STRING,

packages/builder/src/helpers/confirm.ts

@@ -0,0 +1,41 @@
+import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+
+export enum ConfirmOutput {}
+
+export async function confirm(props: {
+  title: string
+  body?: string
+  okText?: string
+  cancelText?: string
+  size?: "S" | "M" | "L" | "XL"
+  onConfirm?: () => void
+  onCancel?: () => void
+  onClose?: () => void
+}) {
+  return await new Promise(resolve => {
+    const dialog = new ConfirmDialog({
+      target: document.body,
+      props: {
+        title: props.title,
+        body: props.body,
+        okText: props.okText,
+        cancelText: props.cancelText,
+        size: props.size,
+        warning: false,
+        onOk: () => {
+          dialog.$destroy()
+          resolve(props.onConfirm?.() || true)
+        },
+        onCancel: () => {
+          dialog.$destroy()
+          resolve(props.onCancel?.() || false)
+        },
+        onClose: () => {
+          dialog.$destroy()
+          resolve(props.onClose?.() || false)
+        },
+      },
+    })
+    dialog.show()
+  })
+}

packages/builder/src/helpers/index.ts

@@ -11,3 +11,4 @@ export {
 } from "./helpers"
 export * as featureFlag from "./featureFlags"
 export * as bindings from "./bindings"
+export * from "./confirm"

packages/builder/src/pages/builder/app/[application]/settings/oauth2/AddButton.svelte

@@ -7,22 +7,79 @@
     Divider,
     Heading,
     Input,
+    keepOpen,
     Link,
     Modal,
     ModalContent,
+    notifications,
   } from "@budibase/bbui"
+  import type { ZodType } from "zod"
+  import { z } from "zod"
 
   let modal: Modal
 
   function openModal() {
+    config = {}
+    errors = {}
+    hasBeenSubmitted = false
     modal.show()
   }
 
   let config: Partial<CreateOAuth2Config> = {}
+  let errors: Record<string, string> = {}
+  let hasBeenSubmitted = false
+
+  const requiredString = (errorMessage: string) =>
+    z.string({ required_error: errorMessage }).trim().min(1, errorMessage)
+
+  const validateConfig = (config: Partial<CreateOAuth2Config>) => {
+    const validator = z.object({
+      name: requiredString("Name is required.").refine(
+        val =>
+          !$oauth2.configs
+            .map(c => c.name.toLowerCase())
+            .includes(val.toLowerCase()),
+        {
+          message: "This name is already taken.",
+        }
+      ),
+      url: requiredString("Url is required.").url(),
+      clientId: requiredString("Client ID is required."),
+      clientSecret: requiredString("Client secret is required."),
+    }) satisfies ZodType<CreateOAuth2Config>
+
+    const validationResult = validator.safeParse(config)
+    errors = {}
+    if (!validationResult.success) {
+      errors = Object.entries(
+        validationResult.error.formErrors.fieldErrors
+      ).reduce<Record<string, string>>((acc, [field, errors]) => {
+        if (errors[0]) {
+          acc[field] = errors[0]
+        }
+        return acc
+      }, {})
+    }
+
+    return validationResult
+  }
 
   $: saveOAuth2Config = async () => {
-    await oauth2.create(config as any) // TODO
+    hasBeenSubmitted = true
+    const validationResult = validateConfig(config)
+    if (validationResult.error) {
+      return keepOpen
     }
+
+    try {
+      await oauth2.create(validationResult.data)
+    } catch (e: any) {
+      notifications.error(e.message)
+      return keepOpen
+    }
+  }
+
+  $: hasBeenSubmitted && validateConfig(config)
 </script>
 
 <Button cta size="M" on:click={openModal}>Add OAuth2</Button>
@@ -34,11 +91,11 @@
       machine) grant type.
     </Body>
     <Divider noGrid noMargin />
-    <Input label="Name*" placeholder="Type here..." bind:value={config.name} />
+    <Input error={errors.name} />
     <Input
       label="Service URL*"
       placeholder="E.g. www.google.com"
-      bind:value={config.url}
+      error={errors.url}
     />
     <div class="field-info">
       <Body size="XS" color="var(--spectrum-global-color-gray-700)">
@@ -50,11 +107,14 @@
       label="Client ID*"
       placeholder="Type here..."
       bind:value={config.clientId}
+      error={errors.clientId}
     />
     <Input
+      type="password"
       label="Client secret*"
       placeholder="Type here..."
       bind:value={config.clientSecret}
+      error={errors.clientSecret}
     />
     <Body size="S"
       >To learn how to configure OAuth2, our documentation <Link

packages/builder/src/pages/builder/app/[application]/settings/oauth2/index.svelte

@@ -41,7 +41,6 @@
     >
   </Layout>
   <Divider />
-</Layout>
 
   <Table
     data={configs}
@@ -52,6 +51,7 @@
     allowEditColumns={false}
     allowClickRows={false}
   />
+</Layout>
 
 <style>
   .header {

packages/builder/src/pages/builder/auth/reset.svelte

@@ -79,6 +79,7 @@
       <Heading size="M">Reset your password</Heading>
       <Body size="M">Must contain at least 12 characters</Body>
       <PasswordRepeatInput
+        bind:passwordForm={form}
         bind:password
         bind:error={passwordError}
         minLength={$admin.passwordMinLength || 12}

packages/builder/src/stores/builder/tables.ts

@@ -148,13 +148,11 @@ export class TableStore extends DerivedBudiStore<
   async saveField({
     originalName,
     field,
-    primaryDisplay = false,
+    hasPrimaryDisplay = false,
-    indexes,
   }: {
-    originalName: string
+    originalName?: string
     field: FieldSchema
-    primaryDisplay: boolean
+    hasPrimaryDisplay: boolean
-    indexes: Record<string, any>
   }) {
     const draft: SaveTableRequest = cloneDeep(get(this.derivedStore).selected!)
 
@@ -169,7 +167,7 @@ export class TableStore extends DerivedBudiStore<
     }
 
     // Optionally set display column
-    if (primaryDisplay) {
+    if (hasPrimaryDisplay) {
       draft.primaryDisplay = field.name
     } else if (draft.primaryDisplay === originalName) {
       const fields = Object.keys(draft.schema)
@@ -178,9 +176,6 @@ export class TableStore extends DerivedBudiStore<
         name => name !== originalName || name !== field.name
       )[0]
     }
-    if (indexes) {
-      draft.indexes = indexes
-    }
     draft.schema = {
       ...draft.schema,
       [field.name]: cloneDeep(field),

packages/builder/src/types/oauth2.ts

@@ -1,3 +1,3 @@
-import { CreateOAuth2ConfigRequest } from "@budibase/types"
+import { UpsertOAuth2ConfigRequest } from "@budibase/types"
 
-export interface CreateOAuth2Config extends CreateOAuth2ConfigRequest {}
+export interface CreateOAuth2Config extends UpsertOAuth2ConfigRequest {}

packages/client/src/components/app/Text.svelte

@@ -41,4 +41,15 @@
   div :global(img) {
     max-width: 100%;
   }
+  div :global(.editor-preview-full) {
+    height: auto;
+  }
+  div :global(h1),
+  div :global(h2),
+  div :global(h3),
+  div :global(h4),
+  div :global(h5),
+  div :global(h6) {
+    font-weight: 600;
+  }
 </style>

packages/client/src/components/app/forms/RelationshipField.svelte

@@ -1,17 +1,26 @@
-<script lang="ts">
+<script context="module" lang="ts">
+  type BasicRelatedRow = { _id: string; primaryDisplay: string }
+  type OptionsMap = Record<string, BasicRelatedRow>
+</script>
+
+<script lang="ts" generics="ValueType extends string | string[]">
   import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
-  import { BasicOperator, FieldType, InternalTable } from "@budibase/types"
+  import {
+    BasicOperator,
+    EmptyFilterOption,
+    FieldType,
+    InternalTable,
+    UILogicalOperator,
+    type LegacyFilter,
+    type SearchFilterGroup,
+    type UISearchFilter,
+  } from "@budibase/types"
   import { fetchData, Utils } from "@budibase/frontend-core"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
-  import type {
+  import type { RelationshipFieldMetadata, Row } from "@budibase/types"
-    SearchFilter,
-    RelationshipFieldMetadata,
-    Row,
-  } from "@budibase/types"
   import type { FieldApi, FieldState, FieldValidation } from "@/types"
-
+  import { utils } from "@budibase/shared-core"
-  type ValueType = string | string[]
 
   export let field: string | undefined = undefined
   export let label: string | undefined = undefined
@@ -22,7 +31,7 @@
   export let autocomplete: boolean = true
   export let defaultValue: ValueType | undefined = undefined
   export let onChange: (_props: { value: ValueType }) => void
-  export let filter: SearchFilter[]
+  export let filter: UISearchFilter | LegacyFilter[] | undefined = undefined
   export let datasourceType: "table" | "user" = "table"
   export let primaryDisplay: string | undefined = undefined
   export let span: number | undefined = undefined
@@ -32,14 +41,10 @@
     | FieldType.BB_REFERENCE
     | FieldType.BB_REFERENCE_SINGLE = FieldType.LINK
 
-  type BasicRelatedRow = { _id: string; primaryDisplay: string }
-  type OptionsMap = Record<string, BasicRelatedRow>
-
   const { API } = getContext("sdk")
 
   // Field state
   let fieldState: FieldState<string | string[]> | undefined
-
   let fieldApi: FieldApi
   let fieldSchema: RelationshipFieldMetadata | undefined
 
@@ -52,20 +57,29 @@
   let optionsMap: OptionsMap = {}
   let loadingMissingOptions: boolean = false
 
+  // Reset the available options when our base filter changes
+  $: filter, (optionsMap = {})
+
   // Determine if we can select multiple rows or not
   $: multiselect =
     [FieldType.LINK, FieldType.BB_REFERENCE].includes(type) &&
     fieldSchema?.relationshipType !== "one-to-many"
 
   // Get the proper string representation of the value
-  $: realValue = fieldState?.value
+  $: realValue = fieldState?.value as ValueType
   $: selectedValue = parseSelectedValue(realValue, multiselect)
   $: selectedIDs = getSelectedIDs(selectedValue)
 
   // If writable, we use a fetch to load options
   $: linkedTableId = fieldSchema?.tableId
   $: writable = !disabled && !readonly
-  $: fetch = createFetch(writable, datasourceType, filter, linkedTableId)
+  $: migratedFilter = migrateFilter(filter)
+  $: fetch = createFetch(
+    writable,
+    datasourceType,
+    migratedFilter,
+    linkedTableId
+  )
 
   // Attempt to determine the primary display field to use
   $: tableDefinition = $fetch?.definition
@@ -90,8 +104,8 @@
   // Ensure backwards compatibility
   $: enrichedDefaultValue = enrichDefaultValue(defaultValue)
 
-  $: emptyValue = multiselect ? [] : undefined
   // We need to cast value to pass it down, as those components aren't typed
+  $: emptyValue = multiselect ? [] : undefined
   $: displayValue = (missingIDs.length ? emptyValue : selectedValue) as any
 
   // Ensures that we flatten any objects so that only the IDs of the selected
@@ -107,7 +121,7 @@
   const createFetch = (
     writable: boolean,
     dsType: typeof datasourceType,
-    filter: SearchFilter[],
+    filter: UISearchFilter | undefined,
     linkedTableId?: string
   ) => {
     const datasource =
@@ -176,9 +190,16 @@
     option: string | BasicRelatedRow | Row,
     primaryDisplay?: string
   ): BasicRelatedRow | null => {
+    // For plain strings, check if we already have this option available
+    if (typeof option === "string" && optionsMap[option]) {
+      return optionsMap[option]
+    }
+
+    // Otherwise ensure we have a valid option object
     if (!option || typeof option !== "object" || !option?._id) {
       return null
     }
+
     // If this is a basic related row shape (_id and PD only) then just use
     // that
     if (Object.keys(option).length === 2 && "primaryDisplay" in option) {
@@ -300,24 +321,54 @@
     return val.includes(",") ? val.split(",") : val
   }
 
+  // We may need to migrate the filter structure, in the case of this being
+  // an old app with LegacyFilter[] saved
+  const migrateFilter = (
+    filter: UISearchFilter | LegacyFilter[] | undefined
+  ): UISearchFilter | undefined => {
+    if (Array.isArray(filter)) {
+      return utils.processSearchFilters(filter)
+    }
+    return filter
+  }
+
   // Searches for new options matching the given term
   async function searchOptions(searchTerm: string, primaryDisplay?: string) {
     if (!primaryDisplay) {
       return
     }
-
+    let newFilter: UISearchFilter | undefined = undefined
-    // Ensure we match all filters, rather than any
+    let searchFilter: SearchFilterGroup = {
-    let newFilter = filter
+      logicalOperator: UILogicalOperator.ALL,
-    if (searchTerm) {
+      filters: [
-      // @ts-expect-error this doesn't fit types, but don't want to change it yet
+        {
-      newFilter = (newFilter || []).filter(x => x.operator !== "allOr")
+          field: primaryDisplay,
-      newFilter.push({
-        // Use a big numeric prefix to avoid clashing with an existing filter
-        field: `999:${primaryDisplay}`,
           operator: BasicOperator.STRING,
           value: searchTerm,
-      })
+        },
+      ],
     }
+
+    // Determine the new filter to apply to the fetch
+    if (searchTerm && migratedFilter) {
+      // If we have both a search term and existing filter, filter by both
+      newFilter = {
+        logicalOperator: UILogicalOperator.ALL,
+        groups: [searchFilter, migratedFilter],
+        onEmptyFilter: EmptyFilterOption.RETURN_NONE,
+      }
+    } else if (searchTerm) {
+      // If we just have a search term them use that
+      newFilter = {
+        logicalOperator: UILogicalOperator.ALL,
+        groups: [searchFilter],
+        onEmptyFilter: EmptyFilterOption.RETURN_NONE,
+      }
+    } else {
+      // Otherwise use the supplied filter untouched
+      newFilter = migratedFilter
+    }
+
     await fetch?.update({
       filter: newFilter,
     })
@@ -389,7 +440,6 @@
       bind:searchTerm
       bind:open
       on:change={handleChange}
-      on:loadMore={() => fetch?.nextPage()}
     />
   {/if}
 </Field>

packages/frontend-core/src/api/oauth2.ts

@@ -1,16 +1,16 @@
 import {
   FetchOAuth2ConfigsResponse,
-  CreateOAuth2ConfigResponse,
   OAuth2ConfigResponse,
-  CreateOAuth2ConfigRequest,
+  UpsertOAuth2ConfigRequest,
+  UpsertOAuth2ConfigResponse,
 } from "@budibase/types"
 import { BaseAPIClient } from "./types"
 
 export interface OAuth2Endpoints {
   fetch: () => Promise<OAuth2ConfigResponse[]>
   create: (
-    config: CreateOAuth2ConfigRequest
+    config: UpsertOAuth2ConfigRequest
-  ) => Promise<CreateOAuth2ConfigResponse>
+  ) => Promise<UpsertOAuth2ConfigResponse>
 }
 
 export const buildOAuth2Endpoints = (API: BaseAPIClient): OAuth2Endpoints => ({
@@ -33,8 +33,8 @@ export const buildOAuth2Endpoints = (API: BaseAPIClient): OAuth2Endpoints => ({
    */
   create: async config => {
     return await API.post<
-      CreateOAuth2ConfigRequest,
+      UpsertOAuth2ConfigRequest,
-      CreateOAuth2ConfigResponse
+      UpsertOAuth2ConfigResponse
     >({
       url: `/api/oauth2`,
       body: {

packages/frontend-core/src/components/PasswordRepeatInput.svelte

@@ -1,13 +1,14 @@
-<script>
+<script lang="ts">
   import { FancyForm, FancyInput } from "@budibase/bbui"
   import { createValidationStore, requiredValidator } from "../utils/validation"
 
-  export let password
+  export let passwordForm: FancyForm | undefined = undefined
-  export let error
+  export let password: string
+  export let error: string
   export let minLength = "12"
 
-  const validatePassword = value => {
+  const validatePassword = (value: string | undefined) => {
-    if (!value || value.length < minLength) {
+    if (!value || value.length < parseInt(minLength)) {
       return `Please enter at least ${minLength} characters. We recommend using machine generated or random passwords.`
     }
     return null
@@ -35,7 +36,7 @@
     firstPasswordError
 </script>
 
-<FancyForm>
+<FancyForm bind:this={passwordForm}>
   <FancyInput
     label="Password"
     type="password"

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -465,7 +465,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    font-weight: bold;
+    font-weight: 600;
   }
   .header-cell.searching .name {
     opacity: 0;

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -219,7 +219,7 @@
     --grid-background-alt: var(--spectrum-global-color-gray-100);
     --header-cell-background: var(
       --custom-header-cell-background,
-      var(--grid-background-alt)
+      var(--spectrum-global-color-gray-100)
     );
     --cell-background: var(--grid-background);
     --cell-background-hover: var(--grid-background-alt);

packages/frontend-core/src/utils/utils.ts

@@ -397,14 +397,19 @@ export function parseFilter(filter: UISearchFilter) {
 
   const update = cloneDeep(filter)
 
+  if (update.groups) {
     update.groups = update.groups
-    ?.map(group => {
+      .map(group => {
-      group.filters = group.filters?.filter((filter: any) => {
+        if (group.filters) {
+          group.filters = group.filters.filter((filter: any) => {
             return filter.field && filter.operator
           })
           return group.filters?.length ? group : null
+        }
+        return group
       })
       .filter((group): group is SearchFilterGroup => !!group)
+  }
 
   return update
 }

packages/server/src/api/controllers/application.ts

@@ -358,8 +358,8 @@ async function performAppCreate(
       },
       theme: DefaultAppTheme,
       customTheme: {
-        primaryColor: "var(--spectrum-global-color-static-blue-1200)",
+        primaryColor: "var(--spectrum-global-color-blue-700)",
-        primaryColorHover: "var(--spectrum-global-color-static-blue-800)",
+        primaryColorHover: "var(--spectrum-global-color-blue-600)",
         buttonBorderRadius: "16px",
       },
       features: {

packages/server/src/api/controllers/oauth2.ts

@@ -1,6 +1,6 @@
 import {
-  CreateOAuth2ConfigRequest,
+  UpsertOAuth2ConfigRequest,
-  CreateOAuth2ConfigResponse,
+  UpsertOAuth2ConfigResponse,
   Ctx,
   FetchOAuth2ConfigsResponse,
   OAuth2Config,
@@ -22,7 +22,7 @@ export async function fetch(ctx: Ctx<void, FetchOAuth2ConfigsResponse>) {
 }
 
 export async function create(
-  ctx: Ctx<CreateOAuth2ConfigRequest, CreateOAuth2ConfigResponse>
+  ctx: Ctx<UpsertOAuth2ConfigRequest, UpsertOAuth2ConfigResponse>
 ) {
   const { body } = ctx.request
   const newConfig: RequiredKeys<Omit<OAuth2Config, "id">> = {
@@ -36,3 +36,28 @@ export async function create(
   ctx.status = 201
   ctx.body = { config }
 }
+
+export async function edit(
+  ctx: Ctx<UpsertOAuth2ConfigRequest, UpsertOAuth2ConfigResponse>
+) {
+  const { body } = ctx.request
+  const toUpdate: RequiredKeys<OAuth2Config> = {
+    id: ctx.params.id,
+    name: body.name,
+    url: body.url,
+    clientId: ctx.clientId,
+    clientSecret: ctx.clientSecret,
+  }
+
+  const config = await sdk.oauth2.update(toUpdate)
+  ctx.body = { config }
+}
+
+export async function remove(
+  ctx: Ctx<UpsertOAuth2ConfigRequest, UpsertOAuth2ConfigResponse>
+) {
+  const configToRemove = ctx.params.id
+
+  await sdk.oauth2.remove(configToRemove)
+  ctx.status = 204
+}

packages/server/src/api/routes/oauth2.ts

@@ -1,8 +1,22 @@
 import Router from "@koa/router"
 import { PermissionType } from "@budibase/types"
+import { middleware } from "@budibase/backend-core"
 import authorized from "../../middleware/authorized"
 
 import * as controller from "../controllers/oauth2"
+import Joi from "joi"
+
+function oAuth2ConfigValidator() {
+  return middleware.joiValidator.body(
+    Joi.object({
+      name: Joi.string().required(),
+      url: Joi.string().required(),
+      clientId: Joi.string().required(),
+      clientSecret: Joi.string().required(),
+    }),
+    { allowUnknown: false }
+  )
+}
 
 const router: Router = new Router()
 
@@ -10,7 +24,19 @@ router.get("/api/oauth2", authorized(PermissionType.BUILDER), controller.fetch)
 router.post(
   "/api/oauth2",
   authorized(PermissionType.BUILDER),
+  oAuth2ConfigValidator(),
   controller.create
 )
+router.put(
+  "/api/oauth2/:id",
+  authorized(PermissionType.BUILDER),
+  oAuth2ConfigValidator(),
+  controller.edit
+)
+router.delete(
+  "/api/oauth2/:id",
+  authorized(PermissionType.BUILDER),
+  controller.remove
+)
 
 export default router

packages/server/src/api/routes/tests/oauth2.spec.ts

@@ -1,11 +1,16 @@
-import { CreateOAuth2ConfigRequest, VirtualDocumentType } from "@budibase/types"
+import {
+  OAuth2Config,
+  UpsertOAuth2ConfigRequest,
+  VirtualDocumentType,
+} from "@budibase/types"
 import * as setup from "./utilities"
 import { generator } from "@budibase/backend-core/tests"
+import _ from "lodash/fp"
 
 describe("/oauth2", () => {
   let config = setup.getConfig()
 
-  function makeOAuth2Config(): CreateOAuth2ConfigRequest {
+  function makeOAuth2Config(): UpsertOAuth2ConfigRequest {
     return {
       name: generator.guid(),
       url: generator.url(),
@@ -19,7 +24,7 @@ describe("/oauth2", () => {
   beforeEach(async () => await config.newTenant())
 
   const expectOAuth2ConfigId = expect.stringMatching(
-    `^${VirtualDocumentType.ROW_ACTION}_.+$`
+    `^${VirtualDocumentType.OAUTH2_CONFIG}_.+$`
   )
 
   describe("fetch", () => {
@@ -92,4 +97,96 @@ describe("/oauth2", () => {
       ])
     })
   })
+
+  describe("update", () => {
+    let existingConfigs: OAuth2Config[] = []
+
+    beforeEach(async () => {
+      existingConfigs = []
+      for (let i = 0; i < 10; i++) {
+        const oauth2Config = makeOAuth2Config()
+        const result = await config.api.oauth2.create(oauth2Config)
+
+        existingConfigs.push({ ...oauth2Config, id: result.config.id })
+      }
+    })
+
+    it("can update an existing configuration", async () => {
+      const { id: configId, ...configData } = _.sample(existingConfigs)!
+
+      await config.api.oauth2.update(configId, {
+        ...configData,
+        name: "updated name",
+      })
+
+      const response = await config.api.oauth2.fetch()
+      expect(response.configs).toHaveLength(existingConfigs.length)
+      expect(response.configs).toEqual(
+        expect.arrayContaining([
+          {
+            id: configId,
+            name: "updated name",
+            url: configData.url,
+          },
+        ])
+      )
+    })
+
+    it("throw if config not found", async () => {
+      await config.api.oauth2.update("unexisting", makeOAuth2Config(), {
+        status: 404,
+        body: { message: "OAuth2 config with id 'unexisting' not found." },
+      })
+    })
+
+    it("throws if trying to use an existing name", async () => {
+      const [config1, config2] = _.sampleSize(2, existingConfigs)
+      const { id: configId, ...configData } = config1
+
+      await config.api.oauth2.update(
+        configId,
+        {
+          ...configData,
+          name: config2.name,
+        },
+        {
+          status: 400,
+          body: {
+            message: `OAuth2 config with name '${config2.name}' is already taken.`,
+          },
+        }
+      )
+    })
+  })
+
+  describe("delete", () => {
+    let existingConfigs: OAuth2Config[] = []
+
+    beforeEach(async () => {
+      existingConfigs = []
+      for (let i = 0; i < 5; i++) {
+        const oauth2Config = makeOAuth2Config()
+        const result = await config.api.oauth2.create(oauth2Config)
+
+        existingConfigs.push({ ...oauth2Config, id: result.config.id })
+      }
+    })
+
+    it("can delete an existing configuration", async () => {
+      const { id: configId } = _.sample(existingConfigs)!
+
+      await config.api.oauth2.delete(configId, { status: 204 })
+
+      const response = await config.api.oauth2.fetch()
+      expect(response.configs).toHaveLength(existingConfigs.length - 1)
+      expect(response.configs.find(c => c.id === configId)).toBeUndefined()
+    })
+
+    it("throw if config not found", async () => {
+      await config.api.oauth2.delete("unexisting", {
+        status: 404,
+        body: { message: "OAuth2 config with id 'unexisting' not found." },
+      })
+    })
+  })
 })

packages/server/src/api/routes/tests/row.spec.ts

@@ -2195,7 +2195,6 @@ if (descriptions.length) {
         })
       })
 
-      isInternal &&
       describe("attachments and signatures", () => {
         const coreAttachmentEnrichment = async (
           schema: TableSchema,

packages/server/src/integrations/rest.ts

@@ -381,12 +381,19 @@ export class RestIntegration implements IntegrationBase {
     authConfigId?: string,
     authConfigType?: RestAuthType
   ): Promise<{ [key: string]: any }> {
-    let headers: any = {}
+    if (!authConfigId) {
+      return {}
+    }
 
-    if (authConfigId) {
     if (authConfigType === RestAuthType.OAUTH2) {
-        headers.Authorization = await sdk.oauth2.generateToken(authConfigId)
+      return { Authorization: await sdk.oauth2.generateToken(authConfigId) }
-      } else if (this.config.authConfigs) {
+    }
+
+    if (!this.config.authConfigs) {
+      return {}
+    }
+
+    let headers: any = {}
     const authConfig = this.config.authConfigs.filter(
       c => c._id === authConfigId
     )[0]
@@ -407,8 +414,6 @@ export class RestIntegration implements IntegrationBase {
           throw utils.unreachable(type)
       }
     }
-      }
-    }
 
     return headers
   }

packages/server/src/sdk/app/oauth2/crud.ts

@@ -34,7 +34,7 @@ export async function create(
     throw new HTTPError("Name already used", 400)
   }
 
-  const id = `${VirtualDocumentType.ROW_ACTION}${SEPARATOR}${utils.newid()}`
+  const id = `${VirtualDocumentType.OAUTH2_CONFIG}${SEPARATOR}${utils.newid()}`
   doc.configs[id] = {
     id,
     ...config,
@@ -48,3 +48,49 @@ export async function get(id: string): Promise<OAuth2Config | undefined> {
   const doc = await getDocument()
   return doc?.configs?.[id]
 }
+
+export async function update(config: OAuth2Config): Promise<OAuth2Config> {
+  const db = context.getAppDB()
+  const doc: OAuth2Configs = (await getDocument(db)) ?? {
+    _id: DocumentType.OAUTH2_CONFIG,
+    configs: {},
+  }
+
+  if (!doc.configs[config.id]) {
+    throw new HTTPError(`OAuth2 config with id '${config.id}' not found.`, 404)
+  }
+
+  if (
+    Object.values(doc.configs).find(
+      c => c.name === config.name && c.id !== config.id
+    )
+  ) {
+    throw new HTTPError(
+      `OAuth2 config with name '${config.name}' is already taken.`,
+      400
+    )
+  }
+
+  doc.configs[config.id] = {
+    ...config,
+  }
+
+  await db.put(doc)
+  return doc.configs[config.id]
+}
+
+export async function remove(configId: string): Promise<void> {
+  const db = context.getAppDB()
+  const doc: OAuth2Configs = (await getDocument(db)) ?? {
+    _id: DocumentType.OAUTH2_CONFIG,
+    configs: {},
+  }
+
+  if (!doc.configs[configId]) {
+    throw new HTTPError(`OAuth2 config with id '${configId}' not found.`, 404)
+  }
+
+  delete doc.configs[configId]
+
+  await db.put(doc)
+}

packages/server/src/tests/utilities/api/oauth2.ts

@@ -1,6 +1,6 @@
 import {
-  CreateOAuth2ConfigRequest,
+  UpsertOAuth2ConfigRequest,
-  CreateOAuth2ConfigResponse,
+  UpsertOAuth2ConfigResponse,
   FetchOAuth2ConfigsResponse,
 } from "@budibase/types"
 import { Expectations, TestAPI } from "./base"
@@ -13,10 +13,10 @@ export class OAuth2API extends TestAPI {
   }
 
   create = async (
-    body: CreateOAuth2ConfigRequest,
+    body: UpsertOAuth2ConfigRequest,
     expectations?: Expectations
   ) => {
-    return await this._post<CreateOAuth2ConfigResponse>("/api/oauth2", {
+    return await this._post<UpsertOAuth2ConfigResponse>("/api/oauth2", {
       body,
       expectations: {
         status: expectations?.status ?? 201,
@@ -24,4 +24,21 @@ export class OAuth2API extends TestAPI {
       },
     })
   }
+
+  update = async (
+    id: string,
+    body: UpsertOAuth2ConfigRequest,
+    expectations?: Expectations
+  ) => {
+    return await this._put<UpsertOAuth2ConfigResponse>(`/api/oauth2/${id}`, {
+      body,
+      expectations,
+    })
+  }
+
+  delete = async (id: string, expectations?: Expectations) => {
+    return await this._delete<void>(`/api/oauth2/${id}`, {
+      expectations,
+    })
+  }
 }

packages/shared-core/src/filters.ts

@@ -1,30 +1,30 @@
 import {
-  Datasource,
+  ArrayOperator,
+  BasicOperator,
   BBReferenceFieldSubType,
+  Datasource,
+  EmptyFilterOption,
+  FieldConstraints,
   FieldType,
   FormulaType,
+  isArraySearchOperator,
+  isBasicSearchOperator,
+  isLogicalSearchOperator,
+  isRangeSearchOperator,
   LegacyFilter,
+  LogicalOperator,
+  RangeOperator,
+  RowSearchParams,
+  SearchFilter,
+  SearchFilterOperator,
   SearchFilters,
   SearchQueryFields,
-  ArrayOperator,
-  SearchFilterOperator,
-  SortType,
-  FieldConstraints,
-  SortOrder,
-  RowSearchParams,
-  EmptyFilterOption,
   SearchResponse,
+  SortOrder,
+  SortType,
   Table,
-  BasicOperator,
-  RangeOperator,
-  LogicalOperator,
-  isLogicalSearchOperator,
-  UISearchFilter,
   UILogicalOperator,
-  isBasicSearchOperator,
+  UISearchFilter,
-  isArraySearchOperator,
-  isRangeSearchOperator,
-  SearchFilter,
 } from "@budibase/types"
 import dayjs from "dayjs"
 import { OperatorOptions, SqlNumberTypeRangeMap } from "./constants"
@@ -444,6 +444,7 @@ export function buildQuery(
     return {}
   }
 
+  // Migrate legacy filters if required
   if (Array.isArray(filter)) {
     filter = processSearchFilters(filter)
     if (!filter) {
@@ -451,10 +452,7 @@ export function buildQuery(
     }
   }
 
-  const operator = logicalOperatorFromUI(
+  // Determine top level empty filter behaviour
-    filter.logicalOperator || UILogicalOperator.ALL
-  )
-
   const query: SearchFilters = {}
   if (filter.onEmptyFilter) {
     query.onEmptyFilter = filter.onEmptyFilter
@@ -462,8 +460,24 @@ export function buildQuery(
     query.onEmptyFilter = EmptyFilterOption.RETURN_ALL
   }
 
+  // Default to matching all groups/filters
+  const operator = logicalOperatorFromUI(
+    filter.logicalOperator || UILogicalOperator.ALL
+  )
+
   query[operator] = {
     conditions: (filter.groups || []).map(group => {
+      // Check if we contain more groups
+      if (group.groups) {
+        const searchFilter = buildQuery(group)
+
+        // We don't define this properly in the types, but certain fields should
+        // not be present in these nested search filters
+        delete searchFilter.onEmptyFilter
+        return searchFilter
+      }
+
+      // Otherwise handle filters
       const { allOr, onEmptyFilter, filters } = splitFiltersArray(
         group.filters || []
       )
@@ -471,7 +485,7 @@ export function buildQuery(
         query.onEmptyFilter = onEmptyFilter
       }
 
-      // logicalOperator takes precendence over allOr
+      // logicalOperator takes precedence over allOr
       let operator = allOr ? LogicalOperator.OR : LogicalOperator.AND
       if (group.logicalOperator) {
         operator = logicalOperatorFromUI(group.logicalOperator)

packages/shared-core/src/tests/filters.spec.ts

@@ -0,0 +1,156 @@
+import { buildQuery } from "../filters"
+import {
+  BasicOperator,
+  EmptyFilterOption,
+  FieldType,
+  UILogicalOperator,
+  UISearchFilter,
+} from "@budibase/types"
+
+describe("filter to query conversion", () => {
+  it("handles a filter with 1 group", () => {
+    const filter: UISearchFilter = {
+      logicalOperator: UILogicalOperator.ALL,
+      onEmptyFilter: EmptyFilterOption.RETURN_NONE,
+      groups: [
+        {
+          logicalOperator: UILogicalOperator.ALL,
+          filters: [
+            {
+              field: "city",
+              operator: BasicOperator.STRING,
+              value: "lon",
+            },
+          ],
+        },
+      ],
+    }
+    const query = buildQuery(filter)
+    expect(query).toEqual({
+      onEmptyFilter: "none",
+      $and: {
+        conditions: [
+          {
+            $and: {
+              conditions: [
+                {
+                  string: {
+                    city: "lon",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    })
+  })
+
+  it("handles an empty filter", () => {
+    const filter = undefined
+    const query = buildQuery(filter)
+    expect(query).toEqual({})
+  })
+
+  it("handles legacy filters", () => {
+    const filter = [
+      {
+        field: "city",
+        operator: BasicOperator.STRING,
+        value: "lon",
+      },
+    ]
+    const query = buildQuery(filter)
+    expect(query).toEqual({
+      onEmptyFilter: "all",
+      $and: {
+        conditions: [
+          {
+            $and: {
+              conditions: [
+                {
+                  string: {
+                    city: "lon",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    })
+  })
+
+  it("handles nested groups", () => {
+    const filter: UISearchFilter = {
+      logicalOperator: UILogicalOperator.ALL,
+      onEmptyFilter: EmptyFilterOption.RETURN_NONE,
+      groups: [
+        {
+          logicalOperator: UILogicalOperator.ALL,
+          filters: [
+            {
+              field: "city",
+              operator: BasicOperator.STRING,
+              value: "lon",
+            },
+          ],
+        },
+        {
+          logicalOperator: UILogicalOperator.ALL,
+          groups: [
+            {
+              logicalOperator: UILogicalOperator.ANY,
+              filters: [
+                {
+                  valueType: "Binding",
+                  field: "country.country_name",
+                  type: FieldType.STRING,
+                  operator: BasicOperator.EQUAL,
+                  noValue: false,
+                  value: "England",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    }
+    const query = buildQuery(filter)
+    expect(query).toEqual({
+      onEmptyFilter: "none",
+      $and: {
+        conditions: [
+          {
+            $and: {
+              conditions: [
+                {
+                  string: {
+                    city: "lon",
+                  },
+                },
+              ],
+            },
+          },
+          {
+            $and: {
+              conditions: [
+                {
+                  $or: {
+                    conditions: [
+                      {
+                        equal: {
+                          "country.country_name": "England",
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    })
+  })
+})

packages/types/src/api/web/app/oauth2.ts

@@ -7,13 +7,13 @@ export interface FetchOAuth2ConfigsResponse {
   configs: OAuth2ConfigResponse[]
 }
 
-export interface CreateOAuth2ConfigRequest {
+export interface UpsertOAuth2ConfigRequest {
   name: string
   url: string
   clientId: string
   clientSecret: string
 }
 
-export interface CreateOAuth2ConfigResponse {
+export interface UpsertOAuth2ConfigResponse {
   config: OAuth2ConfigResponse
 }

packages/types/src/api/web/searchFilter.ts

@@ -38,11 +38,19 @@ export type SearchFilter = {
 // involved. We convert this to a SearchFilters before use with the search SDK.
 export type LegacyFilter = AllOr | OnEmptyFilter | SearchFilter
 
+// A search filter group should either contain groups or filters, but not both
 export type SearchFilterGroup = {
   logicalOperator?: UILogicalOperator
-  groups?: SearchFilterGroup[]
+} & (
-  filters?: LegacyFilter[]
+  | {
+      groups?: (SearchFilterGroup | UISearchFilter)[]
+      filters?: never
     }
+  | {
+      filters?: LegacyFilter[]
+      groups?: never
+    }
+)
 
 // As of v3, this is the format that the frontend always sends when search
 // filters are involved. We convert this to SearchFilters before use with the

packages/types/src/documents/app/table/schema.ts

@@ -156,8 +156,8 @@ export interface FieldConstraints {
     message?: string
   }
   numericality?: {
-    greaterThanOrEqualTo: string | null
+    greaterThanOrEqualTo?: string | null
-    lessThanOrEqualTo: string | null
+    lessThanOrEqualTo?: string | null
   }
   presence?:
     | boolean
@@ -165,8 +165,8 @@ export interface FieldConstraints {
         allowEmpty?: boolean
       }
   datetime?: {
-    latest: string
+    latest?: string
-    earliest: string
+    earliest?: string
   }
 }
 
@@ -197,7 +197,7 @@ export interface BigIntFieldMetadata extends BaseFieldSchema {
   default?: string
 }
 
-interface BaseFieldSchema extends UIFieldMetadata {
+export interface BaseFieldSchema extends UIFieldMetadata {
   type: FieldType
   name: string
   sortable?: boolean

packages/types/src/ui/fields.ts

@@ -0,0 +1,43 @@
+import {
+  FieldType,
+  FieldConstraints,
+  type FieldSchema,
+  type FormulaResponseType,
+} from "../"
+
+export interface UIField {
+  name: string
+  type: FieldType
+  subtype?: string
+  icon: string
+  constraints?: {
+    type?: string
+    presence?: boolean
+    length?: any
+    inclusion?: string[]
+    numericality?: {
+      greaterThanOrEqualTo?: string
+      lessThanOrEqualTo?: string
+    }
+    datetime?: {
+      latest?: string
+      earliest?: string
+    }
+  }
+}
+
+// an empty/partial field schema which is used when building new columns in the UI
+// the current construction process of a column means that it is never certain what
+// this object contains, or what type it is currently set to, meaning that our
+// strict FieldSchema isn't really usable here, the strict fieldSchema only occurs
+// when the table is saved, but in the UI in can be in a real mix of states
+export type FieldSchemaConfig = FieldSchema & {
+  constraints: FieldConstraints
+  fieldName?: string
+  responseType?: FormulaResponseType
+  default?: any
+  fieldId?: string
+  optionColors?: string[]
+  schema?: any
+  json?: string
+}

packages/types/src/ui/index.ts

@@ -5,3 +5,4 @@ export * from "./dataFetch"
 export * from "./datasource"
 export * from "./common"
 export * from "./BudibaseApp"
+export * from "./fields"