@budibase/frontend-core 3.2.37 → 3.2.39

package/src/fetch/{DataFetch.js → DataFetch.ts}

@@ -1,25 +1,103 @@
-import { writable, derived, get } from "svelte/store"
+import { writable, derived, get, Writable, Readable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import { QueryUtils } from "../utils"
 import { convertJSONSchemaToTableSchema } from "../utils/json"
-import { FieldType, SortOrder, SortType } from "@budibase/types"
+import {
+  FieldType,
+  LegacyFilter,
+  Row,
+  SearchFilters,
+  SortOrder,
+  SortType,
+  TableSchema,
+  UISearchFilter,
+} from "@budibase/types"
+import { APIClient } from "../api/types"
+import { DataFetchType } from "."
 
 const { buildQuery, limit: queryLimit, runQuery, sort } = QueryUtils
 
+interface DataFetchStore<TDefinition, TQuery> {
+  rows: Row[]
+  info: any
+  schema: TableSchema | null
+  loading: boolean
+  loaded: boolean
+  query: TQuery
+  pageNumber: number
+  cursor: string | null
+  cursors: string[]
+  resetKey: string
+  error: {
+    message: string
+    status: number
+  } | null
+  definition?: TDefinition | null
+}
+
+interface DataFetchDerivedStore<TDefinition, TQuery>
+  extends DataFetchStore<TDefinition, TQuery> {
+  hasNextPage: boolean
+  hasPrevPage: boolean
+  supportsSearch: boolean
+  supportsSort: boolean
+  supportsPagination: boolean
+}
+
+export interface DataFetchParams<
+  TDatasource,
+  TQuery = SearchFilters | undefined
+> {
+  API: APIClient
+  datasource: TDatasource
+  query: TQuery
+  options?: {}
+}
+
 /**
  * Parent class which handles the implementation of fetching data from an
  * internal table or datasource plus.
  * For other types of datasource, this class is overridden and extended.
  */
-export default class DataFetch {
+export default abstract class DataFetch<
+  TDatasource extends { type: DataFetchType },
+  TDefinition extends {
+    schema?: Record<string, any> | null
+    primaryDisplay?: string
+  },
+  TQuery extends {} = SearchFilters
+> {
+  API: APIClient
+  features: {
+    supportsSearch: boolean
+    supportsSort: boolean
+    supportsPagination: boolean
+  }
+  options: {
+    datasource: TDatasource
+    limit: number
+    // Search config
+    filter: UISearchFilter | LegacyFilter[] | null
+    query: TQuery
+    // Sorting config
+    sortColumn: string | null
+    sortOrder: SortOrder
+    sortType: SortType | null
+    // Pagination config
+    paginate: boolean
+    // Client side feature customisation
+    clientSideSearching: boolean
+    clientSideSorting: boolean
+    clientSideLimiting: boolean
+  }
+  store: Writable<DataFetchStore<TDefinition, TQuery>>
+  derivedStore: Readable<DataFetchDerivedStore<TDefinition, TQuery>>
+
   /**
    * Constructs a new DataFetch instance.
    * @param opts the fetch options
    */
-  constructor(opts) {
-    // API client
-    this.API = null
-
+  constructor(opts: DataFetchParams<TDatasource, TQuery>) {
     // Feature flags
     this.features = {
       supportsSearch: false,
@@ -29,12 +107,12 @@ export default class DataFetch {
 
     // Config
     this.options = {
-      datasource: null,
+      datasource: opts.datasource,
       limit: 10,
 
       // Search config
       filter: null,
-      query: null,
+      query: opts.query,
 
       // Sorting config
       sortColumn: null,
@@ -57,11 +135,11 @@ export default class DataFetch {
       schema: null,
       loading: false,
       loaded: false,
-      query: null,
+      query: opts.query,
       pageNumber: 0,
       cursor: null,
       cursors: [],
-      resetKey: Math.random(),
+      resetKey: Math.random().toString(),
       error: null,
     })
 
@@ -102,9 +180,6 @@ export default class DataFetch {
       this.store.update($store => ({ ...$store, loaded: true }))
       return
     }
-
-    // Initially fetch data but don't bother waiting for the result
-    this.getInitialData()
   }
 
   /**
@@ -118,7 +193,10 @@ export default class DataFetch {
   /**
    * Gets the default sort column for this datasource
    */
-  getDefaultSortColumn(definition, schema) {
+  getDefaultSortColumn(
+    definition: { primaryDisplay?: string } | null,
+    schema: Record<string, any>
+  ): string | null {
     if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
       return definition.primaryDisplay
     } else {
@@ -130,13 +208,13 @@ export default class DataFetch {
    * Fetches a fresh set of data from the server, resetting pagination
    */
   async getInitialData() {
-    const { datasource, filter, paginate } = this.options
+    const { filter, paginate } = this.options
 
     // Fetch datasource definition and extract sort properties if configured
-    const definition = await this.getDefinition(datasource)
+    const definition = await this.getDefinition()
 
     // Determine feature flags
-    const features = this.determineFeatureFlags(definition)
+    const features = await this.determineFeatureFlags()
     this.features = {
       supportsSearch: !!features?.supportsSearch,
       supportsSort: !!features?.supportsSort,
@@ -144,11 +222,11 @@ export default class DataFetch {
     }
 
     // Fetch and enrich schema
-    let schema = this.getSchema(datasource, definition)
-    schema = this.enrichSchema(schema)
+    let schema = this.getSchema(definition)
     if (!schema) {
       return
     }
+    schema = this.enrichSchema(schema)
 
     // If an invalid sort column is specified, delete it
     if (this.options.sortColumn && !schema[this.options.sortColumn]) {
@@ -172,20 +250,25 @@ export default class DataFetch {
       if (
         fieldSchema?.type === FieldType.NUMBER ||
         fieldSchema?.type === FieldType.BIGINT ||
-        fieldSchema?.calculationType
+        ("calculationType" in fieldSchema && fieldSchema?.calculationType)
       ) {
         this.options.sortType = SortType.NUMBER
       }
+
       // If no sort order, default to ascending
       if (!this.options.sortOrder) {
         this.options.sortOrder = SortOrder.ASCENDING
+      } else {
+        // Ensure sortOrder matches the enum
+        this.options.sortOrder =
+          this.options.sortOrder.toLowerCase() as SortOrder
       }
     }
 
     // Build the query
     let query = this.options.query
     if (!query) {
-      query = buildQuery(filter)
+      query = buildQuery(filter ?? undefined) as TQuery
     }
 
     // Update store
@@ -210,7 +293,7 @@ export default class DataFetch {
       info: page.info,
       cursors: paginate && page.hasNextPage ? [null, page.cursor] : [null],
       error: page.error,
-      resetKey: Math.random(),
+      resetKey: Math.random().toString(),
     }))
   }
 
@@ -238,8 +321,8 @@ export default class DataFetch {
     }
 
     // If we don't support sorting, do a client-side sort
-    if (!this.features.supportsSort && clientSideSorting) {
-      rows = sort(rows, sortColumn, sortOrder, sortType)
+    if (!this.features.supportsSort && clientSideSorting && sortType) {
+      rows = sort(rows, sortColumn as any, sortOrder, sortType)
     }
 
     // If we don't support pagination, do a client-side limit
@@ -256,49 +339,28 @@ export default class DataFetch {
     }
   }
 
-  /**
-   * Fetches a single page of data from the remote resource.
-   * Must be overridden by a datasource specific child class.
-   */
-  async getData() {
-    return {
-      rows: [],
-      info: null,
-      hasNextPage: false,
-      cursor: null,
-    }
-  }
+  abstract getData(): Promise<{
+    rows: Row[]
+    info?: any
+    hasNextPage?: boolean
+    cursor?: any
+    error?: any
+  }>
 
   /**
    * Gets the definition for this datasource.
-   * Defaults to fetching a table definition.
-   * @param datasource
+
    * @return {object} the definition
    */
-  async getDefinition(datasource) {
-    if (!datasource?.tableId) {
-      return null
-    }
-    try {
-      return await this.API.fetchTableDefinition(datasource.tableId)
-    } catch (error) {
-      this.store.update(state => ({
-        ...state,
-        error,
-      }))
-      return null
-    }
-  }
+  abstract getDefinition(): Promise<TDefinition | null>
 
   /**
    * Gets the schema definition for a datasource.
-   * Defaults to getting the "schema" property of the definition.
-   * @param datasource the datasource
    * @param definition the datasource definition
    * @return {object} the schema
    */
-  getSchema(datasource, definition) {
-    return definition?.schema
+  getSchema(definition: TDefinition | null): Record<string, any> | undefined {
+    return definition?.schema ?? undefined
   }
 
   /**
@@ -307,53 +369,56 @@ export default class DataFetch {
    * @param schema the datasource schema
    * @return {object} the enriched datasource schema
    */
-  enrichSchema(schema) {
-    if (schema == null) {
-      return null
-    }
-
+  enrichSchema(schema: TableSchema): TableSchema {
     // Check for any JSON fields so we can add any top level properties
-    let jsonAdditions = {}
-    Object.keys(schema).forEach(fieldKey => {
+    let jsonAdditions: Record<string, { type: string; nestedJSON: true }> = {}
+    for (const fieldKey of Object.keys(schema)) {
       const fieldSchema = schema[fieldKey]
-      if (fieldSchema?.type === FieldType.JSON) {
+      if (fieldSchema.type === FieldType.JSON) {
         const jsonSchema = convertJSONSchemaToTableSchema(fieldSchema, {
           squashObjects: true,
-        })
-        Object.keys(jsonSchema).forEach(jsonKey => {
-          jsonAdditions[`${fieldKey}.${jsonKey}`] = {
-            type: jsonSchema[jsonKey].type,
-            nestedJSON: true,
+        }) as Record<string, { type: string }> | null // TODO: remove when convertJSONSchemaToTableSchema is typed
+        if (jsonSchema) {
+          for (const jsonKey of Object.keys(jsonSchema)) {
+            jsonAdditions[`${fieldKey}.${jsonKey}`] = {
+              type: jsonSchema[jsonKey].type,
+              nestedJSON: true,
+            }
           }
-        })
+        }
       }
-    })
-    schema = { ...schema, ...jsonAdditions }
+    }
 
     // Ensure schema is in the correct structure
-    let enrichedSchema = {}
-    Object.entries(schema).forEach(([fieldName, fieldSchema]) => {
-      if (typeof fieldSchema === "string") {
-        enrichedSchema[fieldName] = {
-          type: fieldSchema,
-          name: fieldName,
-        }
-      } else {
-        enrichedSchema[fieldName] = {
-          ...fieldSchema,
-          name: fieldName,
+    let enrichedSchema: TableSchema = {}
+    Object.entries({ ...schema, ...jsonAdditions }).forEach(
+      ([fieldName, fieldSchema]) => {
+        if (typeof fieldSchema === "string") {
+          enrichedSchema[fieldName] = {
+            type: fieldSchema,
+            name: fieldName,
+          }
+        } else {
+          enrichedSchema[fieldName] = {
+            ...fieldSchema,
+            type: fieldSchema.type as any, // TODO: check type union definition conflicts
+            name: fieldName,
+          }
         }
       }
-    })
+    )
 
     return enrichedSchema
   }
 
   /**
-   * Determine the feature flag for this datasource definition
-   * @param definition
+   * Determine the feature flag for this datasource
    */
-  determineFeatureFlags(_definition) {
+  async determineFeatureFlags(): Promise<{
+    supportsPagination: boolean
+    supportsSearch?: boolean
+    supportsSort?: boolean
+  }> {
     return {
       supportsSearch: false,
       supportsSort: false,
@@ -365,12 +430,11 @@ export default class DataFetch {
    * Resets the data set and updates options
    * @param newOptions any new options
    */
-  async update(newOptions) {
+  async update(newOptions: any) {
     // Check if any settings have actually changed
     let refresh = false
-    const entries = Object.entries(newOptions || {})
-    for (let [key, value] of entries) {
-      const oldVal = this.options[key] == null ? null : this.options[key]
+    for (const [key, value] of Object.entries(newOptions || {})) {
+      const oldVal = this.options[key as keyof typeof this.options] ?? null
       const newVal = value == null ? null : value
       if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
         refresh = true
@@ -437,7 +501,7 @@ export default class DataFetch {
    * @param state the current store state
    * @return {boolean} whether there is a next page of data or not
    */
-  hasNextPage(state) {
+  private hasNextPage(state: DataFetchStore<TDefinition, TQuery>): boolean {
     return state.cursors[state.pageNumber + 1] != null
   }
 
@@ -447,7 +511,7 @@ export default class DataFetch {
    * @param state the current store state
    * @return {boolean} whether there is a previous page of data or not
    */
-  hasPrevPage(state) {
+  private hasPrevPage(state: { pageNumber: number }): boolean {
     return state.pageNumber > 0
   }
 

package/src/fetch/FieldFetch.ts

@@ -0,0 +1,67 @@
+import { Row } from "@budibase/types"
+import DataFetch from "./DataFetch"
+
+type Types = "field" | "queryarray" | "jsonarray"
+
+export interface FieldDatasource<TType extends Types> {
+  type: TType
+  tableId: string
+  fieldType: "attachment" | "array"
+  value: string[] | Row[]
+}
+
+export interface FieldDefinition {
+  schema?: Record<string, { type: string }> | null
+}
+
+function isArrayOfStrings(value: string[] | Row[]): value is string[] {
+  return Array.isArray(value) && !!value[0] && typeof value[0] !== "object"
+}
+
+export default class FieldFetch<TType extends Types> extends DataFetch<
+  FieldDatasource<TType>,
+  FieldDefinition
+> {
+  async getDefinition(): Promise<FieldDefinition | null> {
+    const { datasource } = this.options
+
+    // Field sources have their schema statically defined
+    let schema
+    if (datasource.fieldType === "attachment") {
+      schema = {
+        url: {
+          type: "string",
+        },
+        name: {
+          type: "string",
+        },
+      }
+    } else if (datasource.fieldType === "array") {
+      schema = {
+        value: {
+          type: "string",
+        },
+      }
+    }
+    return { schema }
+  }
+
+  async getData() {
+    const { datasource } = this.options
+
+    // These sources will be available directly from context
+    const data = datasource?.value || []
+    let rows: Row[]
+    if (isArrayOfStrings(data)) {
+      rows = data.map(value => ({ value }))
+    } else {
+      rows = data
+    }
+
+    return {
+      rows: rows || [],
+      hasNextPage: false,
+      cursor: null,
+    }
+  }
+}

package/src/fetch/{GroupUserFetch.js → GroupUserFetch.ts}

@@ -1,18 +1,33 @@
 import { get } from "svelte/store"
-import DataFetch from "./DataFetch.js"
+import DataFetch, { DataFetchParams } from "./DataFetch"
 import { TableNames } from "../constants"
 
-export default class GroupUserFetch extends DataFetch {
-  constructor(opts) {
+interface GroupUserQuery {
+  groupId: string
+  emailSearch: string
+}
+
+interface GroupUserDatasource {
+  type: "groupUser"
+  tableId: TableNames.USERS
+}
+
+export default class GroupUserFetch extends DataFetch<
+  GroupUserDatasource,
+  {},
+  GroupUserQuery
+> {
+  constructor(opts: DataFetchParams<GroupUserDatasource, GroupUserQuery>) {
     super({
       ...opts,
       datasource: {
+        type: "groupUser",
         tableId: TableNames.USERS,
       },
     })
   }
 
-  determineFeatureFlags() {
+  async determineFeatureFlags() {
     return {
       supportsSearch: true,
       supportsSort: false,
@@ -28,11 +43,12 @@ export default class GroupUserFetch extends DataFetch {
 
   async getData() {
     const { query, cursor } = get(this.store)
+
     try {
       const res = await this.API.getGroupUsers({
         id: query.groupId,
         emailSearch: query.emailSearch,
-        bookmark: cursor,
+        bookmark: cursor ?? undefined,
       })
 
       return {

package/src/fetch/{JSONArrayFetch.js → JSONArrayFetch.ts}

@@ -1,8 +1,10 @@
-import FieldFetch from "./FieldFetch.js"
+import FieldFetch from "./FieldFetch"
 import { getJSONArrayDatasourceSchema } from "../utils/json"
 
-export default class JSONArrayFetch extends FieldFetch {
-  async getDefinition(datasource) {
+export default class JSONArrayFetch extends FieldFetch<"jsonarray"> {
+  async getDefinition() {
+    const { datasource } = this.options
+
     // JSON arrays need their table definitions fetched.
     // We can then extract their schema as a subset of the table schema.
     try {

package/src/fetch/NestedProviderFetch.ts

@@ -0,0 +1,40 @@
+import { Row, TableSchema } from "@budibase/types"
+import DataFetch from "./DataFetch"
+
+interface NestedProviderDatasource {
+  type: "provider"
+  value?: {
+    schema: TableSchema
+    primaryDisplay: string
+    rows: Row[]
+  }
+}
+
+interface NestedProviderDefinition {
+  schema?: TableSchema
+  primaryDisplay?: string
+}
+export default class NestedProviderFetch extends DataFetch<
+  NestedProviderDatasource,
+  NestedProviderDefinition
+> {
+  async getDefinition() {
+    const { datasource } = this.options
+
+    // Nested providers should already have exposed their own schema
+    return {
+      schema: datasource?.value?.schema,
+      primaryDisplay: datasource?.value?.primaryDisplay,
+    }
+  }
+
+  async getData() {
+    const { datasource } = this.options
+    // Pull the rows from the existing data provider
+    return {
+      rows: datasource?.value?.rows || [],
+      hasNextPage: false,
+      cursor: null,
+    }
+  }
+}

package/src/fetch/{QueryArrayFetch.js → QueryArrayFetch.ts}

@@ -1,11 +1,13 @@
-import FieldFetch from "./FieldFetch.js"
+import FieldFetch from "./FieldFetch"
 import {
   getJSONArrayDatasourceSchema,
   generateQueryArraySchemas,
 } from "../utils/json"
 
-export default class QueryArrayFetch extends FieldFetch {
-  async getDefinition(datasource) {
+export default class QueryArrayFetch extends FieldFetch<"queryarray"> {
+  async getDefinition() {
+    const { datasource } = this.options
+
     if (!datasource?.tableId) {
       return null
     }
@@ -14,10 +16,14 @@ export default class QueryArrayFetch extends FieldFetch {
     try {
       const table = await this.API.fetchQueryDefinition(datasource.tableId)
       const schema = generateQueryArraySchemas(
-        table?.schema,
-        table?.nestedSchemaFields
+        table.schema,
+        table.nestedSchemaFields
       )
-      return { schema: getJSONArrayDatasourceSchema(schema, datasource) }
+      const result = {
+        schema: getJSONArrayDatasourceSchema(schema, datasource),
+      }
+
+      return result
     } catch (error) {
       return null
     }