@budibase/frontend-core 2.33.13 → 3.0.0

package/src/components/grid/stores/datasources/viewV2.js

@@ -1,4 +1,5 @@
 import { get } from "svelte/store"
+import { SortOrder } from "@budibase/types"
 
 const SuppressErrors = true
 
@@ -29,8 +30,18 @@ export const createActions = context => {
     })
   }
 
-  const getRow = () => {
-    throw "Views don't support fetching individual rows"
+  const getRow = async id => {
+    const res = await API.viewV2.fetch({
+      viewId: get(datasource).id,
+      limit: 1,
+      query: {
+        equal: {
+          _id: id,
+        },
+      },
+      paginate: false,
+    })
+    return res?.rows?.[0]
   }
 
   const isDatasourceValid = datasource => {
@@ -94,12 +105,15 @@ export const initialise = context => {
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),
-      order: get(initialSortOrder) || "ascending",
+      order: get(initialSortOrder) || SortOrder.ASCENDING,
     })
 
-    // Keep sort and filter state in line with the view definition
+    // Keep sort and filter state in line with the view definition when in builder
     unsubscribers.push(
       definition.subscribe($definition => {
+        if (!get(config).canSaveSchema) {
+          return
+        }
         if ($definition?.id !== $datasource.id) {
           return
         }
@@ -107,12 +121,12 @@ export const initialise = context => {
         if (!get(initialSortColumn)) {
           sort.set({
             column: $definition.sort?.field,
-            order: $definition.sort?.order || "ascending",
+            order: $definition.sort?.order || SortOrder.ASCENDING,
           })
         }
         // Only override filter state if we don't have an initial filter
         if (!get(initialFilter)) {
-          filter.set($definition.query)
+          filter.set($definition.queryUI)
         }
       })
     )
@@ -140,7 +154,7 @@ export const initialise = context => {
             ...$view,
             sort: {
               field: $sort.column,
-              order: $sort.order || "ascending",
+              order: $sort.order || SortOrder.ASCENDING,
             },
           })
         }
@@ -148,7 +162,7 @@ export const initialise = context => {
         // Also update the fetch to ensure the new sort is respected.
         // Ensure we're updating the correct fetch.
         const $fetch = get(fetch)
-        if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+        if ($fetch?.options?.datasource?.id !== $datasource.id) {
           return
         }
         $fetch.update({
@@ -161,32 +175,49 @@ export const initialise = context => {
     // When filters change, ensure view definition is kept up to date
     unsubscribers?.push(
       filter.subscribe(async $filter => {
-        // If we can mutate schema then update the view definition
-        if (get(config).canSaveSchema) {
-          // Ensure we're updating the correct view
-          const $view = get(definition)
-          if ($view?.id !== $datasource.id) {
-            return
-          }
-          if (JSON.stringify($filter) !== JSON.stringify($view.query)) {
-            await datasource.actions.saveDefinition({
-              ...$view,
-              query: $filter,
-            })
-          }
+        if (!get(config).canSaveSchema) {
+          return
+        }
+        const $view = get(definition)
+        if ($view?.id !== $datasource.id) {
+          return
+        }
+        if (JSON.stringify($filter) !== JSON.stringify($view.queryUI)) {
+          await datasource.actions.saveDefinition({
+            ...$view,
+            queryUI: $filter,
+          })
+
+          // Refresh data since view definition changed
+          await rows.actions.refreshData()
         }
       })
     )
 
-    // Keep fetch up to date with filters.
-    // If we're able to save filters against the view then we only need to apply
-    // inline filters to the fetch, as saved filters are applied server side.
-    // If we can't save filters, then all filters must be applied to the fetch.
+    // Keep fetch up to date with inline filters when in the data section
+    unsubscribers.push(
+      inlineFilters.subscribe($inlineFilters => {
+        if (!get(config).canSaveSchema) {
+          return
+        }
+        const $fetch = get(fetch)
+        if ($fetch?.options?.datasource?.id !== $datasource.id) {
+          return
+        }
+        $fetch.update({
+          filter: $inlineFilters,
+        })
+      })
+    )
+
+    // Keep fetch up to date with all filters when not in the data section
     unsubscribers.push(
       allFilters.subscribe($allFilters => {
-        // Ensure we're updating the correct fetch
+        if (get(config).canSaveSchema) {
+          return
+        }
         const $fetch = get(fetch)
-        if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+        if ($fetch?.options?.datasource?.id !== $datasource.id) {
           return
         }
         $fetch.update({

package/src/components/grid/stores/filter.js

@@ -1,12 +1,13 @@
-import { writable, get, derived } from "svelte/store"
-import { FieldType } from "@budibase/types"
+import { get, derived } from "svelte/store"
+import { FieldType, UILogicalOperator } from "@budibase/types"
+import { memo } from "../../../utils/memo"
 
 export const createStores = context => {
   const { props } = context
 
   // Initialise to default props
-  const filter = writable(get(props).initialFilter)
-  const inlineFilters = writable([])
+  const filter = memo(get(props).initialFilter)
+  const inlineFilters = memo([])
 
   return {
     filter,
@@ -16,11 +17,29 @@ export const createStores = context => {
 
 export const deriveStores = context => {
   const { filter, inlineFilters } = context
-
   const allFilters = derived(
     [filter, inlineFilters],
     ([$filter, $inlineFilters]) => {
-      return [...($filter || []), ...$inlineFilters]
+      // Just use filter prop if no inline filters
+      if (!$inlineFilters?.length) {
+        return $filter
+      }
+      let allFilters = {
+        logicalOperator: UILogicalOperator.ALL,
+        groups: [
+          {
+            logicalOperator: UILogicalOperator.ALL,
+            filters: $inlineFilters,
+          },
+        ],
+      }
+      // Just use inline if no filter
+      if (!$filter?.groups?.length) {
+        return allFilters
+      }
+      // Join them together if both
+      allFilters.groups = [...allFilters.groups, ...$filter.groups]
+      return allFilters
     }
   )
 
@@ -54,7 +73,6 @@ export const createActions = context => {
       inlineFilter.operator = "contains"
     }
 
-    // Add this filter
     inlineFilters.update($inlineFilters => {
       // Remove any existing inline filter for this column
       $inlineFilters = $inlineFilters?.filter(x => x.id !== filterId)

package/src/components/grid/stores/rows.js

@@ -1,7 +1,12 @@
 import { writable, derived, get } from "svelte/store"
 import { fetchData } from "../../../fetch"
 import { NewRowID, RowPageSize } from "../lib/constants"
-import { getCellID, parseCellID } from "../lib/utils"
+import {
+  generateRowID,
+  getCellID,
+  isGeneratedRowID,
+  parseCellID,
+} from "../lib/utils"
 import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 import { sleep } from "../../../utils/utils"
@@ -634,10 +639,10 @@ export const createActions = context => {
       newRow = newRows[i]
 
       // Ensure we have a unique _id.
-      // This means generating one for non DS+, overwriting any that may already
-      // exist as we cannot allow duplicates.
-      if (!$hasBudibaseIdentifiers) {
-        newRow._id = Helpers.uuid()
+      // We generate one for non DS+ where required, but trust that any existing
+      // _id values are unique (e.g. Mongo)
+      if (!$hasBudibaseIdentifiers && !newRow._id?.length) {
+        newRow._id = generateRowID()
       }
 
       if (!rowCacheMap[newRow._id]) {
@@ -674,7 +679,7 @@ export const createActions = context => {
     let clone = { ...row }
     delete clone.__idx
     delete clone.__metadata
-    if (!get(hasBudibaseIdentifiers)) {
+    if (!get(hasBudibaseIdentifiers) && isGeneratedRowID(clone._id)) {
       delete clone._id
     }
     return clone

package/src/components/grid/stores/sort.js

@@ -1,5 +1,6 @@
 import { derived, get } from "svelte/store"
 import { memo } from "../../../utils"
+import { SortOrder } from "@budibase/types"
 
 export const createStores = context => {
   const { props } = context
@@ -8,7 +9,7 @@ export const createStores = context => {
   // Initialise to default props
   const sort = memo({
     column: $props.initialSortColumn,
-    order: $props.initialSortOrder || "ascending",
+    order: $props.initialSortOrder || SortOrder.ASCENDING,
   })
 
   return {
@@ -24,7 +25,10 @@ export const initialise = context => {
     sort.update(state => ({ ...state, column: newSortColumn }))
   })
   initialSortOrder.subscribe(newSortOrder => {
-    sort.update(state => ({ ...state, order: newSortOrder || "ascending" }))
+    sort.update(state => ({
+      ...state,
+      order: newSortOrder || SortOrder.ASCENDING,
+    }))
   })
 
   // Derive if the current sort column exists in the schema
@@ -40,7 +44,7 @@ export const initialise = context => {
     if (!exists) {
       sort.set({
         column: null,
-        order: "ascending",
+        order: SortOrder.ASCENDING,
       })
     }
   })

package/src/components/index.js

@@ -7,5 +7,5 @@ export { default as UserAvatars } from "./UserAvatars.svelte"
 export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"
 export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
-export { default as FilterBuilder } from "./FilterBuilder.svelte"
+export { default as CoreFilterBuilder } from "./CoreFilterBuilder.svelte"
 export { default as FilterUsers } from "./FilterUsers.svelte"

package/src/constants.js

@@ -108,35 +108,6 @@ export const Roles = {
   CREATOR: "CREATOR",
 }
 
-export const Themes = [
-  {
-    class: "lightest",
-    name: "Lightest",
-  },
-  {
-    class: "light",
-    name: "Light",
-  },
-  {
-    class: "dark",
-    name: "Dark",
-  },
-  {
-    class: "darkest",
-    name: "Darkest",
-  },
-  {
-    class: "nord",
-    name: "Nord",
-    base: "darkest",
-  },
-  {
-    class: "midnight",
-    name: "Midnight",
-    base: "darkest",
-  },
-]
-
 export const EventPublishType = {
   ENV_VAR_UPGRADE_PANEL_OPENED: "environment_variable_upgrade_panel_opened",
 }
@@ -160,9 +131,10 @@ export const TypeIconMap = {
   [FieldType.ATTACHMENT_SINGLE]: "DocumentFragment",
   [FieldType.LINK]: "DataCorrelated",
   [FieldType.FORMULA]: "Calculator",
+  [FieldType.AI]: "MagicWand",
   [FieldType.JSON]: "Brackets",
   [FieldType.BIGINT]: "TagBold",
-  [FieldType.AUTO]: "MagicWand",
+  [FieldType.AUTO]: "Shapes",
   [FieldType.BB_REFERENCE]: {
     [BBReferenceFieldSubType.USER]: "UserGroup",
     [BBReferenceFieldSubType.USERS]: "UserGroup",
@@ -176,6 +148,21 @@ export const OptionColours = [...new Array(12).keys()].map(idx => {
   return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
 })
 
+export const FilterOperator = {
+  ANY: "any",
+  ALL: "all",
+}
+
+export const OnEmptyFilter = {
+  RETURN_ALL: "all",
+  RETURN_NONE: "none",
+}
+
+export const FilterValueType = {
+  BINDING: "Binding",
+  VALUE: "Value",
+}
+
 export const FieldPermissions = {
   WRITABLE: "writable",
   READONLY: "readonly",

package/src/fetch/DataFetch.js

@@ -2,6 +2,7 @@ import { writable, derived, get } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import { QueryUtils } from "../utils"
 import { convertJSONSchemaToTableSchema } from "../utils/json"
+import { FieldType, SortOrder, SortType } from "@budibase/types"
 
 const { buildQuery, limit: queryLimit, runQuery, sort } = QueryUtils
 
@@ -37,7 +38,7 @@ export default class DataFetch {
 
       // Sorting config
       sortColumn: null,
-      sortOrder: "ascending",
+      sortOrder: SortOrder.ASCENDING,
       sortType: null,
 
       // Pagination config
@@ -162,17 +163,22 @@ export default class DataFetch {
     // If we don't have a sort column specified then just ensure we don't set
     // any sorting params
     if (!this.options.sortColumn) {
-      this.options.sortOrder = "ascending"
+      this.options.sortOrder = SortOrder.ASCENDING
       this.options.sortType = null
     } else {
       // Otherwise determine what sort type to use base on sort column
-      const type = schema?.[this.options.sortColumn]?.type
-      this.options.sortType =
-        type === "number" || type === "bigint" ? "number" : "string"
-
+      this.options.sortType = SortType.STRING
+      const fieldSchema = schema?.[this.options.sortColumn]
+      if (
+        fieldSchema?.type === FieldType.NUMBER ||
+        fieldSchema?.type === FieldType.BIGINT ||
+        fieldSchema?.calculationType
+      ) {
+        this.options.sortType = SortType.NUMBER
+      }
       // If no sort order, default to ascending
       if (!this.options.sortOrder) {
-        this.options.sortOrder = "ascending"
+        this.options.sortOrder = SortOrder.ASCENDING
       }
     }
 
@@ -310,7 +316,7 @@ export default class DataFetch {
     let jsonAdditions = {}
     Object.keys(schema).forEach(fieldKey => {
       const fieldSchema = schema[fieldKey]
-      if (fieldSchema?.type === "json") {
+      if (fieldSchema?.type === FieldType.JSON) {
         const jsonSchema = convertJSONSchemaToTableSchema(fieldSchema, {
           squashObjects: true,
         })
@@ -364,7 +370,9 @@ export default class DataFetch {
     let refresh = false
     const entries = Object.entries(newOptions || {})
     for (let [key, value] of entries) {
-      if (JSON.stringify(value) !== JSON.stringify(this.options[key])) {
+      const oldVal = this.options[key] == null ? null : this.options[key]
+      const newVal = value == null ? null : value
+      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
         refresh = true
         break
       }

package/src/fetch/TableFetch.js

@@ -1,5 +1,6 @@
 import { get } from "svelte/store"
 import DataFetch from "./DataFetch.js"
+import { SortOrder } from "@budibase/types"
 
 export default class TableFetch extends DataFetch {
   determineFeatureFlags() {
@@ -23,7 +24,7 @@ export default class TableFetch extends DataFetch {
         query,
         limit,
         sort: sortColumn,
-        sortOrder: sortOrder?.toLowerCase() ?? "ascending",
+        sortOrder: sortOrder?.toLowerCase() ?? SortOrder.ASCENDING,
         sortType,
         paginate,
         bookmark: cursor,

package/src/fetch/UserFetch.js

@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import DataFetch from "./DataFetch.js"
 import { TableNames } from "../constants"
-import { QueryUtils } from "../utils"
+import { utils } from "@budibase/shared-core"
 
 export default class UserFetch extends DataFetch {
   constructor(opts) {
@@ -30,14 +30,13 @@ export default class UserFetch extends DataFetch {
   async getData() {
     const { limit, paginate } = this.options
     const { cursor, query } = get(this.store)
-    let finalQuery
-    // convert old format to new one - we now allow use of the lucene format
+
+    // Convert old format to new one - we now allow use of the lucene format
     const { appId, paginated, ...rest } = query || {}
-    if (!QueryUtils.hasFilters(query) && rest.email != null) {
-      finalQuery = { string: { email: rest.email } }
-    } else {
-      finalQuery = rest
-    }
+    const finalQuery = utils.isSupportedUserSearch(rest)
+      ? query
+      : { string: { email: null } }
+
     try {
       const opts = {
         bookmark: cursor,

package/src/fetch/ViewV2Fetch.js

@@ -1,3 +1,4 @@
+import { ViewV2Type } from "@budibase/types"
 import DataFetch from "./DataFetch.js"
 import { get } from "svelte/store"
 
@@ -35,17 +36,23 @@ export default class ViewV2Fetch extends DataFetch {
   }
 
   async getData() {
-    const {
-      datasource,
-      limit,
-      sortColumn,
-      sortOrder,
-      sortType,
-      paginate,
-      filter,
-    } = this.options
+    const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
+      this.options
     const { cursor, query, definition } = get(this.store)
 
+    // If this is a calculation view and we have no calculations, return nothing
+    if (
+      definition.type === ViewV2Type.CALCULATION &&
+      !Object.values(definition.schema || {}).some(x => x.calculationType)
+    ) {
+      return {
+        rows: [],
+        hasNextPage: false,
+        cursor: null,
+        error: null,
+      }
+    }
+
     // If sort/filter params are not defined, update options to store the
     // params built in to this view. This ensures that we can accurately
     // compare old and new params and skip a redundant API call.
@@ -53,14 +60,11 @@ export default class ViewV2Fetch extends DataFetch {
       this.options.sortColumn = definition.sort.field
       this.options.sortOrder = definition.sort.order
     }
-    if (!filter?.length && definition.query?.length) {
-      this.options.filter = definition.query
-    }
 
     try {
       const res = await this.API.viewV2.fetch({
         viewId: datasource.id,
-        query,
+        ...(query ? { query } : {}),
         paginate,
         limit,
         bookmark: cursor,
@@ -77,6 +81,7 @@ export default class ViewV2Fetch extends DataFetch {
       return {
         rows: [],
         hasNextPage: false,
+        cursor: null,
         error,
       }
     }

package/src/utils/index.js

@@ -5,10 +5,10 @@ export * as RoleUtils from "./roles"
 export * as Utils from "./utils"
 export * as RowUtils from "./rows"
 export * as search from "./searchFields"
+export * as SchemaUtils from "./schema"
 export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
-export * from "./theme"
 export * from "./settings"
 export * from "./relatedColumns"
 export * from "./table"

package/src/utils/relatedColumns.js

@@ -24,9 +24,9 @@ const columnTypeManyParser = {
       return parsed
     }
 
-    return value?.map(v => parseDate(v))
+    return value.map(v => parseDate(v))
   },
-  [FieldType.BOOLEAN]: value => value?.map(v => !!v),
+  [FieldType.BOOLEAN]: value => value.map(v => !!v),
   [FieldType.BB_REFERENCE_SINGLE]: value => [
     ...new Map(value.map(i => [i._id, i])).values(),
   ],
@@ -80,14 +80,10 @@ export function getRelatedTableValues(row, field, fromField) {
     result = row[field.related.field]?.[0]?.[field.related.subField]
   } else {
     const parser = columnTypeManyParser[field.type] || (value => value)
-
-    result = parser(
-      row[field.related.field]
-        ?.flatMap(r => r[field.related.subField])
-        ?.filter(i => i !== undefined && i !== null),
-      field
-    )
-
+    const value = row[field.related.field]
+      ?.flatMap(r => r[field.related.subField])
+      ?.filter(i => i !== undefined && i !== null)
+    result = parser(value || [], field)
     if (
       [
         FieldType.STRING,

package/src/utils/roles.js

@@ -7,20 +7,7 @@ const RolePriorities = {
   [Roles.BASIC]: 2,
   [Roles.PUBLIC]: 1,
 }
-const RoleColours = {
-  [Roles.ADMIN]: "var(--spectrum-global-color-static-red-400)",
-  [Roles.CREATOR]: "var(--spectrum-global-color-static-magenta-600)",
-  [Roles.POWER]: "var(--spectrum-global-color-static-orange-400)",
-  [Roles.BASIC]: "var(--spectrum-global-color-static-green-400)",
-  [Roles.PUBLIC]: "var(--spectrum-global-color-static-blue-400)",
-}
 
 export const getRolePriority = role => {
   return RolePriorities[role] ?? 0
 }
-
-export const getRoleColour = roleId => {
-  return (
-    RoleColours[roleId] ?? "var(--spectrum-global-color-static-magenta-400)"
-  )
-}

package/src/utils/schema.js

@@ -0,0 +1,24 @@
+import { helpers } from "@budibase/shared-core"
+import { TypeIconMap } from "../constants"
+
+export const getColumnIcon = column => {
+  if (column.schema.icon) {
+    return column.schema.icon
+  }
+  if (column.calculationType) {
+    return "Calculator"
+  }
+  if (column.schema.autocolumn) {
+    return "MagicWand"
+  }
+  if (helpers.schema.isDeprecatedSingleUserColumn(column.schema)) {
+    return "User"
+  }
+  const { type, subtype } = column.schema
+  const result =
+    typeof TypeIconMap[type] === "object" && subtype
+      ? TypeIconMap[type][subtype]
+      : TypeIconMap[type]
+
+  return result || "Text"
+}

package/src/utils/table.js

@@ -4,24 +4,24 @@ export function canBeDisplayColumn(column) {
   if (!sharedCore.canBeDisplayColumn(column.type)) {
     return false
   }
-
+  // If it's a related column (only available in the frontend), don't allow using it as display column
   if (column.related) {
-    // If it's a related column (only available in the frontend), don't allow using it as display column
     return false
   }
-
   return true
 }
 
 export function canBeSortColumn(column) {
+  // Allow sorting by calculation columns
+  if (column.calculationType) {
+    return true
+  }
   if (!sharedCore.canBeSortColumn(column.type)) {
     return false
   }
-
+  // If it's a related column (only available in the frontend), don't allow using it as display column
   if (column.related) {
-    // If it's a related column (only available in the frontend), don't allow using it as display column
     return false
   }
-
   return true
 }

package/src/utils/utils.js

@@ -240,7 +240,7 @@ export const buildFormBlockButtonConfig = props => {
       _component: "@budibase/standard-components/button",
       onClick: onDelete,
       quiet: true,
-      type: "secondary",
+      type: "warning",
     })
   }