Update usages of utils and helpers in the builder

packages/builder/package.json

@@ -67,6 +67,7 @@
   "dependencies": {
     "@budibase/bbui": "^1.0.44-alpha.7",
     "@budibase/client": "^1.0.44-alpha.7",
+    "@budibase/frontend-core": "^1.0.44-alpha.7",
     "@budibase/colorpicker": "1.1.2",
     "@budibase/string-templates": "^1.0.44-alpha.7",
     "@sentry/browser": "5.19.1",

packages/builder/src/builderStore/api.js

@@ -1,6 +1,6 @@
 import { store } from "./index"
 import { get as svelteGet } from "svelte/store"
-import { removeCookie, Cookies } from "./cookies"
+import { CookieUtils, Constants } from "@budibase/frontend-core"
 
 const apiCall =
   method =>
@@ -16,7 +16,7 @@ const apiCall =
       if (url.includes("/api/templates")) {
         return { json: () => [] }
       }
-      removeCookie(Cookies.Auth)
+      CookieUtils.removeCookie(Constants.Cookies.Auth)
       // reload after removing cookie, go to login
       if (!url.includes("self") && !url.includes("login")) {
         location.reload()

packages/builder/src/builderStore/dataBinding.js

@@ -15,10 +15,7 @@ import {
   encodeJSBinding,
 } from "@budibase/string-templates"
 import { TableNames } from "../constants"
-import {
+import { JSONUtils } from "@budibase/frontend-core"
-  convertJSONSchemaToTableSchema,
-  getJSONArrayDatasourceSchema,
-} from "./jsonUtils"
 import ActionDefinitions from "components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json"
 
 // Regex to match all instances of template strings
@@ -439,7 +436,7 @@ export const getSchemaForDatasource = (asset, datasource, isForm = false) => {
     else if (type === "jsonarray") {
       table = tables.find(table => table._id === datasource.tableId)
       let tableSchema = table?.schema
-      schema = getJSONArrayDatasourceSchema(tableSchema, datasource)
+      schema = JSONUtils.getJSONArrayDatasourceSchema(tableSchema, datasource)
     }
 
     // Otherwise we assume we're targeting an internal table or a plus
@@ -471,9 +468,12 @@ export const getSchemaForDatasource = (asset, datasource, isForm = false) => {
       Object.keys(schema).forEach(fieldKey => {
         const fieldSchema = schema[fieldKey]
         if (fieldSchema?.type === "json") {
-          const jsonSchema = convertJSONSchemaToTableSchema(fieldSchema, {
+          const jsonSchema = JSONUtils.convertJSONSchemaToTableSchema(
-            squashObjects: true,
+            fieldSchema,
-          })
+            {
+              squashObjects: true,
+            }
+          )
           Object.keys(jsonSchema).forEach(jsonKey => {
             jsonAdditions[`${fieldKey}.${jsonKey}`] = {
               type: jsonSchema[jsonKey].type,

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

@@ -27,7 +27,7 @@ import {
   findComponent,
   getComponentSettings,
 } from "../componentUtils"
-import { uuid } from "../uuid"
+import { Helpers } from "@budibase/bbui"
 import { removeBindings } from "../dataBinding"
 
 const INITIAL_FRONTEND_STATE = {
@@ -397,7 +397,7 @@ export const getFrontendStore = () => {
         }
 
         return {
-          _id: uuid(),
+          _id: Helpers.uuid(),
           _component: definition.component,
           _styles: { normal: {}, hover: {}, active: {} },
           _instanceName: `New ${definition.name}`,
@@ -551,7 +551,7 @@ export const getFrontendStore = () => {
               if (!component) {
                 return
               }
-              component._id = uuid()
+              component._id = Helpers.uuid()
               component._children?.forEach(randomizeIds)
             }
             randomizeIds(componentToPaste)
@@ -664,7 +664,7 @@ export const getFrontendStore = () => {
               newLink = cloneDeep(nav._children[0])
 
               // Set our new props
-              newLink._id = uuid()
+              newLink._id = Helpers.uuid()
               newLink._instanceName = `${title} Link`
               newLink.url = url
               newLink.text = title

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

@@ -1,4 +1,4 @@
-import { uuid } from "builderStore/uuid"
+import { Helpers } from "@budibase/bbui"
 import { BaseStructure } from "./BaseStructure"
 
 export class Component extends BaseStructure {
@@ -6,7 +6,7 @@ export class Component extends BaseStructure {
     super(false)
     this._children = []
     this._json = {
-      _id: uuid(),
+      _id: Helpers.uuid(),
       _component: name,
       _styles: {
         normal: {},

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

@@ -1,5 +1,5 @@
 import { BaseStructure } from "./BaseStructure"
-import { uuid } from "builderStore/uuid"
+import { Helpers } from "@budibase/bbui"
 
 export class Screen extends BaseStructure {
   constructor() {
@@ -7,7 +7,7 @@ export class Screen extends BaseStructure {
     this._json = {
       layoutId: "layout_private_master",
       props: {
-        _id: uuid(),
+        _id: Helpers.uuid(),
         _component: "@budibase/standard-components/container",
         _styles: {
           normal: {},

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

@@ -1,4 +1,4 @@
-import { localStorageStore } from "./localStorage"
+import { createLocalStorageStore } from "@budibase/frontend-core"
 
 export const getThemeStore = () => {
   const themeElement = document.documentElement
@@ -6,7 +6,7 @@ export const getThemeStore = () => {
     theme: "darkest",
     options: ["lightest", "light", "dark", "darkest"],
   }
-  const store = localStorageStore("bb-theme", initialValue)
+  const store = createLocalStorageStore("bb-theme", initialValue)
 
   // Update theme class when store changes
   store.subscribe(state => {

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -28,7 +28,7 @@
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import FilterDrawer from "components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte"
   // need the client lucene builder to convert to the structure API expects
-  import { buildLuceneQuery } from "helpers/lucene"
+  import { LuceneUtils } from "@budibase/frontend-core"
 
   export let block
   export let testData
@@ -131,7 +131,7 @@
   }
 
   function saveFilters(key) {
-    const filters = buildLuceneQuery(tempFilters)
+    const filters = LuceneUtils.buildLuceneQuery(tempFilters)
     const defKey = `${key}-def`
     inputData[key] = filters
     inputData[defKey] = tempFilters

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationBuilder.svelte

@@ -2,7 +2,7 @@
   import { Table, Modal, Layout, ActionButton } from "@budibase/bbui"
   import AuthTypeRenderer from "./AuthTypeRenderer.svelte"
   import RestAuthenticationModal from "./RestAuthenticationModal.svelte"
-  import { uuid } from "builderStore/uuid"
+  import { Helpers } from "@budibase/bbui"
 
   export let configs = []
 
@@ -29,7 +29,7 @@
         return c
       })
     } else {
-      config._id = uuid()
+      config._id = Helpers.uuid()
       configs = [...configs, config]
     }
   }

packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte

@@ -9,7 +9,7 @@
     Body,
   } from "@budibase/bbui"
   import { tables } from "stores/backend"
-  import { uuid } from "builderStore/uuid"
+  import { Helpers } from "@budibase/bbui"
   import { writable } from "svelte/store"
 
   export let save
@@ -151,7 +151,7 @@
     const manyToMany =
       fromRelationship.relationshipType === RelationshipTypes.MANY_TO_MANY
     // main is simply used to know this is the side the user configured it from
-    const id = uuid()
+    const id = Helpers.uuid()
     if (!manyToMany) {
       delete fromRelationship.through
       delete toRelationship.through

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte

@@ -12,7 +12,7 @@
   import { dndzone } from "svelte-dnd-action"
   import { generate } from "shortid"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { OperatorOptions, getValidOperatorsForType } from "constants/lucene"
+  import { LuceneUtils, Constants } from "@budibase/frontend-core"
   import { selectedComponent } from "builderStore"
   import { getComponentForSettingType } from "./componentSettings"
   import PropertyControl from "./PropertyControl.svelte"
@@ -83,7 +83,7 @@
         valueType: "string",
         id: generate(),
         action: "hide",
-        operator: OperatorOptions.Equals.value,
+        operator: Constants.OperatorOptions.Equals.value,
       },
     ]
   }
@@ -108,13 +108,13 @@
   }
 
   const getOperatorOptions = condition => {
-    return getValidOperatorsForType(condition.valueType)
+    return LuceneUtils.getValidOperatorsForType(condition.valueType)
   }
 
   const onOperatorChange = (condition, newOperator) => {
     const noValueOptions = [
-      OperatorOptions.Empty.value,
+      Constants.OperatorOptions.Empty.value,
-      OperatorOptions.NotEmpty.value,
+      Constants.OperatorOptions.NotEmpty.value,
     ]
     condition.noValue = noValueOptions.includes(newOperator)
     if (condition.noValue) {
@@ -127,9 +127,12 @@
     condition.referenceValue = null
 
     // Ensure a valid operator is set
-    const validOperators = getValidOperatorsForType(newType).map(x => x.value)
+    const validOperators = LuceneUtils.getValidOperatorsForType(newType).map(
+      x => x.value
+    )
     if (!validOperators.includes(condition.operator)) {
-      condition.operator = validOperators[0] ?? OperatorOptions.Equals.value
+      condition.operator =
+        validOperators[0] ?? Constants.OperatorOptions.Equals.value
       onOperatorChange(condition, condition.operator)
     }
   }

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte

@@ -13,7 +13,7 @@
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { generate } from "shortid"
-  import { getValidOperatorsForType, OperatorOptions } from "constants/lucene"
+  import { LuceneUtils, Constants } from "@budibase/frontend-core"
   import { getFields } from "helpers/searchFields"
 
   export let schemaFields
@@ -32,7 +32,7 @@
       {
         id: generate(),
         field: null,
-        operator: OperatorOptions.Equals.value,
+        operator: Constants.OperatorOptions.Equals.value,
         value: null,
         valueType: "Value",
       },
@@ -54,11 +54,12 @@
     expression.type = enrichedSchemaFields.find(x => x.name === field)?.type
 
     // Ensure a valid operator is set
-    const validOperators = getValidOperatorsForType(expression.type).map(
+    const validOperators = LuceneUtils.getValidOperatorsForType(
-      x => x.value
+      expression.type
-    )
+    ).map(x => x.value)
     if (!validOperators.includes(expression.operator)) {
-      expression.operator = validOperators[0] ?? OperatorOptions.Equals.value
+      expression.operator =
+        validOperators[0] ?? Constants.OperatorOptions.Equals.value
       onOperatorChange(expression, expression.operator)
     }
 
@@ -73,8 +74,8 @@
 
   const onOperatorChange = (expression, operator) => {
     const noValueOptions = [
-      OperatorOptions.Empty.value,
+      Constants.OperatorOptions.Empty.value,
-      OperatorOptions.NotEmpty.value,
+      Constants.OperatorOptions.NotEmpty.value,
     ]
     expression.noValue = noValueOptions.includes(operator)
     if (expression.noValue) {
@@ -110,7 +111,7 @@
             />
             <Select
               disabled={!filter.field}
-              options={getValidOperatorsForType(filter.type)}
+              options={LuceneUtils.getValidOperatorsForType(filter.type)}
               bind:value={filter.operator}
               on:change={e => onOperatorChange(filter, e.detail)}
               placeholder={null}

packages/builder/src/helpers/fetchTableData.js

@@ -4,7 +4,7 @@
 // add a core package.
 import { writable, derived, get } from "svelte/store"
 import * as API from "../builderStore/api"
-import { buildLuceneQuery } from "./lucene"
+import { LuceneUtils } from "@budibase/frontend-core"
 
 const defaultOptions = {
   tableId: null,
@@ -113,7 +113,7 @@ export const fetchTableData = opts => {
     sortType = type === "number" ? "number" : "string"
 
     // Build the lucene query
-    query = buildLuceneQuery(filters)
+    query = LuceneUtils.buildLuceneQuery(filters)
 
     // Actually fetch data
     const page = await fetchPage()

packages/builder/src/pages/builder/_layout.svelte

@@ -2,12 +2,7 @@
   import { isActive, redirect, params } from "@roxi/routify"
   import { admin, auth } from "stores/portal"
   import { onMount } from "svelte"
-  import {
+  import { CookieUtils, Constants } from "@budibase/frontend-core"
-    Cookies,
-    getCookie,
-    removeCookie,
-    setCookie,
-  } from "builderStore/cookies"
 
   let loaded = false
 
@@ -79,7 +74,7 @@
       loaded &&
       apiReady &&
       !$auth.user &&
-      !getCookie(Cookies.ReturnUrl) &&
+      !CookieUtils.getCookie(Constants.Cookies.ReturnUrl) &&
       // logout triggers a page refresh, so we don't want to set the return url
       !$auth.postLogout &&
       // don't set the return url on pre-login pages
@@ -88,7 +83,7 @@
       !$isActive("./admin")
     ) {
       const url = window.location.pathname
-      setCookie(Cookies.ReturnUrl, url)
+      CookieUtils.setCookie(Constants.Cookies.ReturnUrl, url)
     }
 
     // if tenant is not set go to it
@@ -122,9 +117,9 @@
     }
     // lastly, redirect to the return url if it has been set
     else if (loaded && apiReady && $auth.user) {
-      const returnUrl = getCookie(Cookies.ReturnUrl)
+      const returnUrl = CookieUtils.getCookie(Constants.Cookies.ReturnUrl)
       if (returnUrl) {
-        removeCookie(Cookies.ReturnUrl)
+        CookieUtils.removeCookie(Constants.Cookies.ReturnUrl)
         window.location.href = returnUrl
       }
     }

packages/builder/src/pages/builder/portal/manage/auth/index.svelte

@@ -22,7 +22,7 @@
   import { onMount } from "svelte"
   import api from "builderStore/api"
   import { organisation, admin } from "stores/portal"
-  import { uuid } from "builderStore/uuid"
+  import { Helpers } from "@budibase/bbui"
   import analytics, { Events } from "analytics"
 
   const ConfigTypes = {
@@ -164,7 +164,7 @@
         //Add a UUID here so each config is distinguishable when it arrives at the login page
         for (let config of element.config.configs) {
           if (!config.uuid) {
-            config.uuid = uuid()
+            config.uuid = Helpers.uuid()
           }
           // callback urls shouldn't be included
           delete config.callbackURL

packages/client/src/components/app/dynamic-filter/FilterModal.svelte

@@ -11,12 +11,11 @@
     Select,
   } from "@budibase/bbui"
   import { generate } from "shortid"
-  import { LuceneUtils } from "@budibase/frontend-core"
+  import { LuceneUtils, Constants } from "@budibase/frontend-core"
 
   export let schemaFields
   export let filters = []
 
-  const operatorOptions = LuceneUtils.OperatorOptions
   const BannedTypes = ["link", "attachment", "formula", "json"]
 
   $: fieldOptions = (schemaFields ?? [])
@@ -29,7 +28,7 @@
       {
         id: generate(),
         field: null,
-        operator: operatorOptions.Equals.value,
+        operator: Constants.OperatorOptions.Equals.value,
         value: null,
         valueType: "Value",
       },
@@ -55,7 +54,8 @@
       expression.type
     ).map(x => x.value)
     if (!validOperators.includes(expression.operator)) {
-      expression.operator = validOperators[0] ?? operatorOptions.Equals.value
+      expression.operator =
+        validOperators[0] ?? Constants.OperatorOptions.Equals.value
       onOperatorChange(expression, expression.operator)
     }
 
@@ -70,8 +70,8 @@
 
   const onOperatorChange = (expression, operator) => {
     const noValueOptions = [
-      operatorOptions.Empty.value,
+      Constants.OperatorOptions.Empty.value,
-      operatorOptions.NotEmpty.value,
+      Constants.OperatorOptions.NotEmpty.value,
     ]
     expression.noValue = noValueOptions.includes(operator)
     if (expression.noValue) {

packages/frontend-core/src/constants.js

@@ -1,10 +1,65 @@
+/**
+ * Operator options for lucene queries
+ */
+export const OperatorOptions = {
+  Equals: {
+    value: "equal",
+    label: "Equals",
+  },
+  NotEquals: {
+    value: "notEqual",
+    label: "Not equals",
+  },
+  Empty: {
+    value: "empty",
+    label: "Is empty",
+  },
+  NotEmpty: {
+    value: "notEmpty",
+    label: "Is not empty",
+  },
+  StartsWith: {
+    value: "string",
+    label: "Starts with",
+  },
+  Like: {
+    value: "fuzzy",
+    label: "Like",
+  },
+  MoreThan: {
+    value: "rangeLow",
+    label: "More than",
+  },
+  LessThan: {
+    value: "rangeHigh",
+    label: "Less than",
+  },
+  Contains: {
+    value: "equal",
+    label: "Contains",
+  },
+  NotContains: {
+    value: "notEqual",
+    label: "Does Not Contain",
+  },
+}
+
+// Cookie names
+export const Cookies = {
+  Auth: "budibase:auth",
+  CurrentApp: "budibase:currentapp",
+  ReturnUrl: "budibase:returnurl",
+}
+
+// Table names
 export const TableNames = {
   USERS: "ta_users",
 }
 
-export const ApiVersion = "1"
 /**
- * API Version Changelog
+ * API version header attached to all requests.
+ * Version changelog:
  * v1:
  *   - Coerce types for search endpoint
  */
+export const ApiVersion = "1"

packages/frontend-core/src/utils/cookies.js

@@ -1,9 +1,3 @@
-export const Cookies = {
-  Auth: "budibase:auth",
-  CurrentApp: "budibase:currentapp",
-  ReturnUrl: "budibase:returnurl",
-}
-
 export function setCookie(name, value) {
   if (getCookie(name)) {
     removeCookie(name)

packages/frontend-core/src/utils/lucene.js

@@ -1,50 +1,5 @@
 import { Helpers } from "@budibase/bbui"
-
+import { OperatorOptions } from "../constants"
-/**
- * Operator options for lucene queries
- */
-export const OperatorOptions = {
-  Equals: {
-    value: "equal",
-    label: "Equals",
-  },
-  NotEquals: {
-    value: "notEqual",
-    label: "Not equals",
-  },
-  Empty: {
-    value: "empty",
-    label: "Is empty",
-  },
-  NotEmpty: {
-    value: "notEmpty",
-    label: "Is not empty",
-  },
-  StartsWith: {
-    value: "string",
-    label: "Starts with",
-  },
-  Like: {
-    value: "fuzzy",
-    label: "Like",
-  },
-  MoreThan: {
-    value: "rangeLow",
-    label: "More than",
-  },
-  LessThan: {
-    value: "rangeHigh",
-    label: "Less than",
-  },
-  Contains: {
-    value: "equal",
-    label: "Contains",
-  },
-  NotContains: {
-    value: "notEqual",
-    label: "Does Not Contain",
-  },
-}
 
 /**
  * Returns the valid operator options for a certain data type