Merge pull request #13391 from Budibase/BUDI-8122/use-types

Type frontend field types

packages/builder/src/components/backend/DataTable/formula.js

@@ -1,3 +1,4 @@
+import { FieldType } from "@budibase/types"
 import { FIELDS } from "constants/backend"
 import { tables } from "stores/builder"
 import { get as svelteGet } from "svelte/store"
@@ -5,14 +6,12 @@ import { get as svelteGet } from "svelte/store"
 // currently supported level of relationship depth (server side)
 const MAX_DEPTH = 1
 
-//https://github.com/Budibase/budibase/issues/3030
-const internalType = "internal"
-
 const TYPES_TO_SKIP = [
-  FIELDS.FORMULA.type,
-  FIELDS.LONGFORM.type,
-  FIELDS.ATTACHMENT.type,
-  internalType,
+  FieldType.FORMULA,
+  FieldType.LONGFORM,
+  FieldType.ATTACHMENT,
+  //https://github.com/Budibase/budibase/issues/3030
+  FieldType.INTERNAL,
 ]
 
 export function getBindings({
@@ -26,7 +25,7 @@ export function getBindings({
     return bindings
   }
   for (let [column, schema] of Object.entries(table.schema)) {
-    const isRelationship = schema.type === FIELDS.LINK.type
+    const isRelationship = schema.type === FieldType.LINK
     // skip relationships after a certain depth and types which
     // can't bind to
     if (

packages/builder/src/components/backend/Datasources/relationshipErrors.js

@@ -1,4 +1,4 @@
-import { RelationshipType } from "constants/backend"
+import { RelationshipType } from "@budibase/types"
 
 const typeMismatch = "Column type of the foreign key must match the primary key"
 const columnBeingUsed = "Column name cannot be an existing column"

packages/builder/src/components/backend/TableNavigator/utils.js

@@ -12,7 +12,7 @@ const getDefaultSchema = rows => {
       newSchema[column] = {
         name: column,
         type: "string",
-        constraints: FIELDS["STRING"].constraints,
+        constraints: FIELDS.STRING.constraints,
       }
     })
   })

packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js

@@ -1,3 +1,5 @@
+import { FieldType } from "@budibase/types"
+
 export const convertOldFieldFormat = fields => {
   if (!fields) {
     return []
@@ -31,17 +33,17 @@ export const getComponentForField = (field, schema) => {
 }
 
 export const FieldTypeToComponentMap = {
-  string: "stringfield",
-  number: "numberfield",
-  bigint: "bigintfield",
-  options: "optionsfield",
-  array: "multifieldselect",
-  boolean: "booleanfield",
-  longform: "longformfield",
-  datetime: "datetimefield",
-  attachment: "attachmentfield",
-  link: "relationshipfield",
-  json: "jsonfield",
-  barcodeqr: "codescanner",
-  bb_reference: "bbreferencefield",
+  [FieldType.STRING]: "stringfield",
+  [FieldType.NUMBER]: "numberfield",
+  [FieldType.BIGINT]: "bigintfield",
+  [FieldType.OPTIONS]: "optionsfield",
+  [FieldType.ARRAY]: "multifieldselect",
+  [FieldType.BOOLEAN]: "booleanfield",
+  [FieldType.LONGFORM]: "longformfield",
+  [FieldType.DATETIME]: "datetimefield",
+  [FieldType.ATTACHMENT]: "attachmentfield",
+  [FieldType.LINK]: "relationshipfield",
+  [FieldType.JSON]: "jsonfield",
+  [FieldType.BARCODEQR]: "codescanner",
+  [FieldType.BB_REFERENCE]: "bbreferencefield",
 }

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

@@ -1,12 +1,14 @@
-import { FieldType, FieldSubtype } from "@budibase/types"
+import {
+  FieldType,
+  FieldSubtype,
+  INTERNAL_TABLE_SOURCE_ID,
+  AutoFieldSubType,
+  Hosting,
+} from "@budibase/types"
 
-export const AUTO_COLUMN_SUB_TYPES = {
-  AUTO_ID: "autoID",
-  CREATED_BY: "createdBy",
-  CREATED_AT: "createdAt",
-  UPDATED_BY: "updatedBy",
-  UPDATED_AT: "updatedAt",
-}
+export { RelationshipType } from "@budibase/types"
+
+export const AUTO_COLUMN_SUB_TYPES = AutoFieldSubType
 
 export const AUTO_COLUMN_DISPLAY_NAMES = {
   AUTO_ID: "Auto ID",
@@ -167,10 +169,7 @@ export const FILE_TYPES = {
   DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
 }
 
-export const HostingTypes = {
-  CLOUD: "cloud",
-  SELF: "self",
-}
+export const HostingTypes = Hosting
 
 export const Roles = {
   ADMIN: "ADMIN",
@@ -187,12 +186,6 @@ export function isAutoColumnUserRelationship(subtype) {
   )
 }
 
-export const RelationshipType = {
-  MANY_TO_MANY: "many-to-many",
-  ONE_TO_MANY: "one-to-many",
-  MANY_TO_ONE: "many-to-one",
-}
-
 export const PrettyRelationshipDefinitions = {
   MANY: "Many rows",
   ONE: "One row",
@@ -218,7 +211,7 @@ export const SWITCHABLE_TYPES = [
   ...ALLOWABLE_NUMBER_TYPES,
 ]
 
-export const BUDIBASE_INTERNAL_DB_ID = "bb_internal"
+export const BUDIBASE_INTERNAL_DB_ID = INTERNAL_TABLE_SOURCE_ID
 export const DEFAULT_BB_DATASOURCE_ID = "datasource_internal_bb_default"
 export const BUDIBASE_DATASOURCE_TYPE = "budibase"
 export const DB_TYPE_INTERNAL = "internal"
@@ -265,10 +258,10 @@ export const IntegrationNames = {
 }
 
 export const SchemaTypeOptions = [
-  { label: "Text", value: "string" },
-  { label: "Number", value: "number" },
-  { label: "Boolean", value: "boolean" },
-  { label: "Datetime", value: "datetime" },
+  { label: "Text", value: FieldType.STRING },
+  { label: "Number", value: FieldType.NUMBER },
+  { label: "Boolean", value: FieldType.BOOLEAN },
+  { label: "Datetime", value: FieldType.DATETIME },
 ]
 
 export const SchemaTypeOptionsExpanded = SchemaTypeOptions.map(el => ({
@@ -305,10 +298,10 @@ export const PaginationLocations = [
 ]
 
 export const BannedSearchTypes = [
-  "link",
-  "attachment",
-  "formula",
-  "json",
+  FieldType.LINK,
+  FieldType.ATTACHMENT,
+  FieldType.FORMULA,
+  FieldType.JSON,
   "jsonarray",
   "queryarray",
 ]

packages/builder/src/helpers/schemaGenerator.js

@@ -1,17 +1,17 @@
-import { FIELDS } from "constants/backend"
+import { FieldType } from "@budibase/types"
 
 function baseConversion(type) {
   if (type === "string") {
     return {
-      type: FIELDS.STRING.type,
+      type: FieldType.STRING,
     }
   } else if (type === "boolean") {
     return {
-      type: FIELDS.BOOLEAN.type,
+      type: FieldType.BOOLEAN,
     }
   } else if (type === "number") {
     return {
-      type: FIELDS.NUMBER.type,
+      type: FieldType.NUMBER,
     }
   }
 }
@@ -31,7 +31,7 @@ function recurse(schemaLevel = {}, objectLevel) {
       const schema = recurse(schemaLevel[key], value[0])
       if (schema) {
         schemaLevel[key] = {
-          type: FIELDS.ARRAY.type,
+          type: FieldType.ARRAY,
           schema,
         }
       }
@@ -45,7 +45,7 @@ function recurse(schemaLevel = {}, objectLevel) {
     }
   }
   if (!schemaLevel.type) {
-    return { type: FIELDS.JSON.type, schema: schemaLevel }
+    return { type: FieldType.JSON, schema: schemaLevel }
   } else {
     return schemaLevel
   }

packages/builder/src/helpers/utils.js

@@ -1,3 +1,4 @@
+import { FieldType } from "@budibase/types"
 import { ActionStepID } from "constants/backend/automations"
 import { TableNames } from "constants"
 import {
@@ -20,20 +21,20 @@ export function buildAutoColumn(tableName, name, subtype) {
   switch (subtype) {
     case AUTO_COLUMN_SUB_TYPES.UPDATED_BY:
     case AUTO_COLUMN_SUB_TYPES.CREATED_BY:
-      type = FIELDS.LINK.type
+      type = FieldType.LINK
       constraints = FIELDS.LINK.constraints
       break
     case AUTO_COLUMN_SUB_TYPES.AUTO_ID:
-      type = FIELDS.NUMBER.type
+      type = FieldType.NUMBER
       constraints = FIELDS.NUMBER.constraints
       break
     case AUTO_COLUMN_SUB_TYPES.UPDATED_AT:
     case AUTO_COLUMN_SUB_TYPES.CREATED_AT:
-      type = FIELDS.DATETIME.type
+      type = FieldType.DATETIME
       constraints = FIELDS.DATETIME.constraints
       break
     default:
-      type = FIELDS.STRING.type
+      type = FieldType.STRING
       constraints = FIELDS.STRING.constraints
       break
   }

packages/builder/src/stores/builder/tables.js

@@ -1,7 +1,8 @@
+import { FieldType } from "@budibase/types"
 import { get, writable, derived } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import { API } from "api"
-import { SWITCHABLE_TYPES, FIELDS } from "constants/backend"
+import { SWITCHABLE_TYPES } from "constants/backend"
 
 export function createTablesStore() {
   const store = writable({
@@ -83,14 +84,14 @@ export function createTablesStore() {
     // make sure tables up to date (related)
     let newTableIds = []
     for (let column of Object.values(updatedTable?.schema || {})) {
-      if (column.type === FIELDS.LINK.type) {
+      if (column.type === FieldType.LINK) {
         newTableIds.push(column.tableId)
       }
     }
 
     let oldTableIds = []
     for (let column of Object.values(oldTable?.schema || {})) {
-      if (column.type === FIELDS.LINK.type) {
+      if (column.type === FieldType.LINK) {
         oldTableIds.push(column.tableId)
       }
     }

packages/builder/src/templates/commonComponents.js

@@ -1,21 +1,7 @@
+import { FieldTypeToComponentMap } from "components/design/settings/controls/FieldConfiguration/utils"
 import { Component } from "./Component"
 import { getSchemaForDatasource } from "dataBinding"
 
-const fieldTypeToComponentMap = {
-  string: "stringfield",
-  number: "numberfield",
-  bigint: "bigintfield",
-  options: "optionsfield",
-  array: "multifieldselect",
-  boolean: "booleanfield",
-  longform: "longformfield",
-  datetime: "datetimefield",
-  attachment: "attachmentfield",
-  link: "relationshipfield",
-  json: "jsonfield",
-  barcodeqr: "codescanner",
-}
-
 export function makeDatasourceFormComponents(datasource) {
   const { schema } = getSchemaForDatasource(null, datasource, {
     formSchema: true,
@@ -30,7 +16,7 @@ export function makeDatasourceFormComponents(datasource) {
     }
     const fieldType =
       typeof fieldSchema === "object" ? fieldSchema.type : fieldSchema
-    const componentType = fieldTypeToComponentMap[fieldType]
+    const componentType = FieldTypeToComponentMap[fieldType]
     const fullComponentType = `@budibase/standard-components/${componentType}`
     if (componentType) {
       const component = new Component(fullComponentType)

packages/client/src/components/app/blocks/FormBlockComponent.svelte

@@ -7,19 +7,19 @@
   export let order
 
   const FieldTypeToComponentMap = {
-    string: "stringfield",
-    number: "numberfield",
-    bigint: "bigintfield",
-    options: "optionsfield",
-    array: "multifieldselect",
-    boolean: "booleanfield",
-    longform: "longformfield",
-    datetime: "datetimefield",
-    attachment: "attachmentfield",
-    link: "relationshipfield",
-    json: "jsonfield",
-    barcodeqr: "codescanner",
-    bb_reference: "bbreferencefield",
+    [FieldType.STRING]: "stringfield",
+    [FieldType.NUMBER]: "numberfield",
+    [FieldType.BIGINT]: "bigintfield",
+    [FieldType.OPTIONS]: "optionsfield",
+    [FieldType.ARRAY]: "multifieldselect",
+    [FieldType.BOOLEAN]: "booleanfield",
+    [FieldType.LONGFORM]: "longformfield",
+    [FieldType.DATETIME]: "datetimefield",
+    [FieldType.ATTACHMENT]: "attachmentfield",
+    [FieldType.LINK]: "relationshipfield",
+    [FieldType.JSON]: "jsonfield",
+    [FieldType.BARCODEQR]: "codescanner",
+    [FieldType.BB_REFERENCE]: "bbreferencefield",
   }
 
   const getFieldSchema = field => {

packages/frontend-core/package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@budibase/bbui": "0.0.0",
     "@budibase/shared-core": "0.0.0",
+    "@budibase/types": "0.0.0",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "socket.io-client": "^4.6.1"

packages/frontend-core/src/components/grid/lib/renderers.js

@@ -1,3 +1,5 @@
+import { FieldType } from "@budibase/types"
+
 import OptionsCell from "../cells/OptionsCell.svelte"
 import DateCell from "../cells/DateCell.svelte"
 import MultiSelectCell from "../cells/MultiSelectCell.svelte"
@@ -12,19 +14,19 @@ import AttachmentCell from "../cells/AttachmentCell.svelte"
 import BBReferenceCell from "../cells/BBReferenceCell.svelte"
 
 const TypeComponentMap = {
-  text: TextCell,
-  options: OptionsCell,
-  datetime: DateCell,
-  barcodeqr: TextCell,
-  longform: LongFormCell,
-  array: MultiSelectCell,
-  number: NumberCell,
-  boolean: BooleanCell,
-  attachment: AttachmentCell,
-  link: RelationshipCell,
-  formula: FormulaCell,
-  json: JSONCell,
-  bb_reference: BBReferenceCell,
+  [FieldType.STRING]: TextCell,
+  [FieldType.OPTIONS]: OptionsCell,
+  [FieldType.DATETIME]: DateCell,
+  [FieldType.BARCODEQR]: TextCell,
+  [FieldType.LONGFORM]: LongFormCell,
+  [FieldType.ARRAY]: MultiSelectCell,
+  [FieldType.NUMBER]: NumberCell,
+  [FieldType.BOOLEAN]: BooleanCell,
+  [FieldType.ATTACHMENT]: AttachmentCell,
+  [FieldType.LINK]: RelationshipCell,
+  [FieldType.FORMULA]: FormulaCell,
+  [FieldType.JSON]: JSONCell,
+  [FieldType.BB_REFERENCE]: BBReferenceCell,
 }
 export const getCellRenderer = column => {
   return TypeComponentMap[column?.schema?.type] || TextCell

packages/frontend-core/src/components/grid/lib/utils.js

@@ -1,3 +1,5 @@
+import { FieldType, FieldTypeSubtypes } from "@budibase/types"
+
 export const getColor = (idx, opacity = 0.3) => {
   if (idx == null || idx === -1) {
     idx = 0
@@ -6,22 +8,22 @@ export const getColor = (idx, opacity = 0.3) => {
 }
 
 const TypeIconMap = {
-  text: "Text",
-  options: "Dropdown",
-  datetime: "Date",
-  barcodeqr: "Camera",
-  longform: "TextAlignLeft",
-  array: "Dropdown",
-  number: "123",
-  boolean: "Boolean",
-  attachment: "AppleFiles",
-  link: "DataCorrelated",
-  formula: "Calculator",
-  json: "Brackets",
-  bigint: "TagBold",
-  bb_reference: {
-    user: "User",
-    users: "UserGroup",
+  [FieldType.STRING]: "Text",
+  [FieldType.OPTIONS]: "Dropdown",
+  [FieldType.DATETIME]: "Date",
+  [FieldType.BARCODEQR]: "Camera",
+  [FieldType.LONGFORM]: "TextAlignLeft",
+  [FieldType.ARRAY]: "Dropdown",
+  [FieldType.NUMBER]: "123",
+  [FieldType.BOOLEAN]: "Boolean",
+  [FieldType.ATTACHMENT]: "AppleFiles",
+  [FieldType.LINK]: "DataCorrelated",
+  [FieldType.FORMULA]: "Calculator",
+  [FieldType.JSON]: "Brackets",
+  [FieldType.BIGINT]: "TagBold",
+  [FieldType.BB_REFERENCE]: {
+    [FieldTypeSubtypes.BB_REFERENCE.USER]: "User",
+    [FieldTypeSubtypes.BB_REFERENCE.USERS]: "UserGroup",
   },
 }