@budibase/frontend-core 3.2.28 → 3.2.30

package/src/components/grid/stores/{datasource.js → datasource.ts}

@@ -1,10 +1,54 @@
-import { derived, get } from "svelte/store"
+import { derived, get, Readable, Writable } from "svelte/store"
 import { getDatasourceDefinition, getDatasourceSchema } from "../../../fetch"
 import { enrichSchemaWithRelColumns, memo } from "../../../utils"
 import { cloneDeep } from "lodash"
-import { ViewV2Type } from "@budibase/types"
+import {
+  SaveRowRequest,
+  SaveTableRequest,
+  UIDatasource,
+  UIFieldMutation,
+  UIFieldSchema,
+  UIRow,
+  UpdateViewRequest,
+  ViewV2Type,
+} from "@budibase/types"
+import { Store as StoreContext, BaseStoreProps } from "."
+import { DatasourceActions } from "./datasources"
+
+interface DatasourceStore {
+  definition: Writable<UIDatasource | null>
+  schemaMutations: Writable<Record<string, UIFieldMutation>>
+  subSchemaMutations: Writable<Record<string, Record<string, UIFieldMutation>>>
+}
+
+interface DerivedDatasourceStore {
+  schema: Readable<Record<string, UIFieldSchema> | null>
+  enrichedSchema: Readable<Record<string, UIFieldSchema> | null>
+  hasBudibaseIdentifiers: Readable<boolean>
+}
+
+interface ActionDatasourceStore {
+  datasource: BaseStoreProps["datasource"] & {
+    actions: DatasourceActions & {
+      refreshDefinition: () => Promise<void>
+      changePrimaryDisplay: (column: string) => Promise<void>
+      addSchemaMutation: (field: string, mutation: UIFieldMutation) => void
+      addSubSchemaMutation: (
+        field: string,
+        fromField: string,
+        mutation: UIFieldMutation
+      ) => void
+      saveSchemaMutations: () => Promise<void>
+      resetSchemaMutations: () => void
+    }
+  }
+}
+
+export type Store = DatasourceStore &
+  DerivedDatasourceStore &
+  ActionDatasourceStore
 
-export const createStores = () => {
+export const createStores = (): DatasourceStore => {
   const definition = memo(null)
   const schemaMutations = memo({})
   const subSchemaMutations = memo({})
@@ -16,7 +60,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedDatasourceStore => {
   const {
     API,
     definition,
@@ -27,7 +71,7 @@ export const deriveStores = context => {
   } = context
 
   const schema = derived(definition, $definition => {
-    let schema = getDatasourceSchema({
+    let schema: Record<string, UIFieldSchema> = getDatasourceSchema({
       API,
       datasource: get(datasource),
       definition: $definition,
@@ -40,7 +84,7 @@ export const deriveStores = context => {
     // Certain datasources like queries use primitives.
     Object.keys(schema || {}).forEach(key => {
       if (typeof schema[key] !== "object") {
-        schema[key] = { type: schema[key] }
+        schema[key] = { name: key, type: schema[key] }
       }
     })
 
@@ -58,19 +102,18 @@ export const deriveStores = context => {
 
       const schemaWithRelatedColumns = enrichSchemaWithRelColumns($schema)
 
-      const enrichedSchema = {}
-      Object.keys(schemaWithRelatedColumns).forEach(field => {
+      const enrichedSchema: Record<string, UIFieldSchema> = {}
+      Object.keys(schemaWithRelatedColumns || {}).forEach(field => {
         enrichedSchema[field] = {
-          ...schemaWithRelatedColumns[field],
+          ...schemaWithRelatedColumns?.[field],
           ...$schemaOverrides?.[field],
           ...$schemaMutations[field],
         }
 
         if ($subSchemaMutations[field]) {
           enrichedSchema[field].columns ??= {}
-          for (const [fieldName, mutation] of Object.entries(
-            $subSchemaMutations[field]
-          )) {
+          for (const fieldName of Object.keys($subSchemaMutations[field])) {
+            const mutation = $subSchemaMutations[field][fieldName]
             enrichedSchema[field].columns[fieldName] = {
               ...enrichedSchema[field].columns[fieldName],
               ...mutation,
@@ -87,7 +130,7 @@ export const deriveStores = context => {
     ([$datasource, $definition]) => {
       let type = $datasource?.type
       if (type === "provider") {
-        type = $datasource.value?.datasource?.type
+        type = ($datasource as any).value?.datasource?.type
       }
       // Handle calculation views
       if (type === "viewV2" && $definition?.type === ViewV2Type.CALCULATION) {
@@ -104,7 +147,7 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ActionDatasourceStore => {
   const {
     API,
     datasource,
@@ -147,21 +190,23 @@ export const createActions = context => {
   }
 
   // Saves the datasource definition
-  const saveDefinition = async newDefinition => {
+  const saveDefinition = async (
+    newDefinition: SaveTableRequest | UpdateViewRequest
+  ) => {
     // Update local state
     const originalDefinition = get(definition)
-    definition.set(newDefinition)
+    definition.set(newDefinition as UIDatasource)
 
     // Update server
     if (get(config).canSaveSchema) {
       try {
-        await getAPI()?.actions.saveDefinition(newDefinition)
+        await getAPI()?.actions.saveDefinition(newDefinition as never)
 
         // Broadcast change so external state can be updated, as this change
         // will not be received by the builder websocket because we caused it
         // ourselves
         dispatch("updatedatasource", newDefinition)
-      } catch (error) {
+      } catch (error: any) {
         const msg = error?.message || error || "Unknown error"
         get(notifications).error(`Error saving schema: ${msg}`)
 
@@ -172,8 +217,8 @@ export const createActions = context => {
   }
 
   // Updates the datasources primary display column
-  const changePrimaryDisplay = async column => {
-    let newDefinition = cloneDeep(get(definition))
+  const changePrimaryDisplay = async (column: string) => {
+    let newDefinition = cloneDeep(get(definition)!)
 
     // Update primary display
     newDefinition.primaryDisplay = column
@@ -183,12 +228,14 @@ export const createActions = context => {
       newDefinition.schema[column].constraints = {}
     }
     newDefinition.schema[column].constraints.presence = { allowEmpty: false }
-    delete newDefinition.schema[column].default
-    return await saveDefinition(newDefinition)
+    if ("default" in newDefinition.schema[column]) {
+      delete newDefinition.schema[column].default
+    }
+    return await saveDefinition(newDefinition as any)
   }
 
   // Adds a schema mutation for a single field
-  const addSchemaMutation = (field, mutation) => {
+  const addSchemaMutation = (field: string, mutation: UIFieldMutation) => {
     if (!field || !mutation) {
       return
     }
@@ -204,7 +251,11 @@ export const createActions = context => {
   }
 
   // Adds a nested schema mutation for a single field
-  const addSubSchemaMutation = (field, fromField, mutation) => {
+  const addSubSchemaMutation = (
+    field: string,
+    fromField: string,
+    mutation: UIFieldMutation
+  ) => {
     if (!field || !fromField || !mutation) {
       return
     }
@@ -231,8 +282,8 @@ export const createActions = context => {
     const $definition = get(definition)
     const $schemaMutations = get(schemaMutations)
     const $subSchemaMutations = get(subSchemaMutations)
-    const $schema = get(schema)
-    let newSchema = {}
+    const $schema = get(schema) || {}
+    let newSchema: Record<string, UIFieldSchema> = {}
 
     // Build new updated datasource schema
     Object.keys($schema).forEach(column => {
@@ -242,9 +293,8 @@ export const createActions = context => {
       }
       if ($subSchemaMutations[column]) {
         newSchema[column].columns ??= {}
-        for (const [fieldName, mutation] of Object.entries(
-          $subSchemaMutations[column]
-        )) {
+        for (const fieldName of Object.keys($subSchemaMutations[column])) {
+          const mutation = $subSchemaMutations[column][fieldName]
           newSchema[column].columns[fieldName] = {
             ...newSchema[column].columns[fieldName],
             ...mutation,
@@ -257,7 +307,7 @@ export const createActions = context => {
     await saveDefinition({
       ...$definition,
       schema: newSchema,
-    })
+    } as any)
     resetSchemaMutations()
   }
 
@@ -267,32 +317,32 @@ export const createActions = context => {
   }
 
   // Adds a row to the datasource
-  const addRow = async row => {
+  const addRow = async (row: SaveRowRequest) => {
     return await getAPI()?.actions.addRow(row)
   }
 
   // Updates an existing row in the datasource
-  const updateRow = async row => {
+  const updateRow = async (row: SaveRowRequest) => {
     return await getAPI()?.actions.updateRow(row)
   }
 
   // Deletes rows from the datasource
-  const deleteRows = async rows => {
+  const deleteRows = async (rows: UIRow[]) => {
     return await getAPI()?.actions.deleteRows(rows)
   }
 
   // Gets a single row from a datasource
-  const getRow = async id => {
+  const getRow = async (id: string) => {
     return await getAPI()?.actions.getRow(id)
   }
 
   // Checks if a certain datasource config is valid
-  const isDatasourceValid = datasource => {
+  const isDatasourceValid = (datasource: UIDatasource) => {
     return getAPI()?.actions.isDatasourceValid(datasource)
   }
 
   // Checks if this datasource can use a specific column by name
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return getAPI()?.actions.canUseColumn(name)
   }
 

package/src/components/grid/stores/datasources/index.ts

@@ -0,0 +1,31 @@
+import {
+  SaveRowRequest,
+  SaveTableRequest,
+  UIDatasource,
+  UIRow,
+  UpdateViewRequest,
+} from "@budibase/types"
+
+interface DatasourceBaseActions<
+  TSaveDefinitionRequest = UpdateViewRequest | SaveTableRequest
+> {
+  saveDefinition: (newDefinition: TSaveDefinitionRequest) => Promise<void>
+  addRow: (row: SaveRowRequest) => Promise<UIRow | undefined>
+  updateRow: (row: SaveRowRequest) => Promise<UIRow | undefined>
+  deleteRows: (rows: UIRow[]) => Promise<void>
+  getRow: (id: string) => Promise<UIRow | void>
+  isDatasourceValid: (datasource: UIDatasource) => boolean | void
+  canUseColumn: (name: string) => boolean | void
+}
+
+export interface DatasourceTableActions
+  extends DatasourceBaseActions<SaveTableRequest> {}
+
+export interface DatasourceViewActions
+  extends DatasourceBaseActions<UpdateViewRequest> {}
+
+export interface DatasourceNonPlusActions
+  extends DatasourceBaseActions<never> {}
+
+export type DatasourceActions =
+  | DatasourceTableActions & DatasourceViewActions & DatasourceNonPlusActions

package/src/components/grid/stores/datasources/{nonPlus.js → nonPlus.ts}

@@ -1,7 +1,17 @@
-import { SortOrder } from "@budibase/types"
+import { SortOrder, UIDatasource } from "@budibase/types"
 import { get } from "svelte/store"
+import { Store as StoreContext } from ".."
+import { DatasourceNonPlusActions } from "."
 
-export const createActions = context => {
+interface NonPlusActions {
+  nonPlus: {
+    actions: DatasourceNonPlusActions
+  }
+}
+
+export type Store = NonPlusActions
+
+export const createActions = (context: StoreContext): NonPlusActions => {
   const { columns, table, viewV2 } = context
 
   const saveDefinition = async () => {
@@ -20,7 +30,7 @@ export const createActions = context => {
     throw "This datasource does not support fetching individual rows"
   }
 
-  const isDatasourceValid = datasource => {
+  const isDatasourceValid = (datasource: UIDatasource) => {
     // There are many different types and shapes of datasource, so we only
     // check that we aren't null
     return (
@@ -30,7 +40,7 @@ export const createActions = context => {
     )
   }
 
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return get(columns).some(col => col.name === name)
   }
 
@@ -50,11 +60,11 @@ export const createActions = context => {
 }
 
 // Small util to compare datasource definitions
-const isSameDatasource = (a, b) => {
+const isSameDatasource = (a: any, b: any) => {
   return JSON.stringify(a) === JSON.stringify(b)
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     datasource,
     sort,
@@ -69,7 +79,7 @@ export const initialise = context => {
   } = context
   // Keep a list of subscriptions so that we can clear them when the datasource
   // config changes
-  let unsubscribers = []
+  let unsubscribers: any[] = []
 
   // Observe datasource changes and apply logic for view V2 datasources
   datasource.subscribe($datasource => {
@@ -81,7 +91,7 @@ export const initialise = context => {
     }
 
     // Wipe state
-    filter.set(get(initialFilter))
+    filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),
@@ -96,7 +106,7 @@ export const initialise = context => {
         if (!isSameDatasource($fetch?.options?.datasource, $datasource)) {
           return
         }
-        $fetch.update({
+        $fetch?.update({
           filter: $allFilters,
         })
       })
@@ -110,9 +120,9 @@ export const initialise = context => {
         if (!isSameDatasource($fetch?.options?.datasource, $datasource)) {
           return
         }
-        $fetch.update({
+        $fetch?.update({
           sortOrder: $sort.order || SortOrder.ASCENDING,
-          sortColumn: $sort.column,
+          sortColumn: $sort.column ?? undefined,
         })
       })
     )

package/src/components/grid/stores/datasources/{table.js → table.ts}

@@ -1,37 +1,50 @@
-import { SortOrder } from "@budibase/types"
+import {
+  Row,
+  SaveRowRequest,
+  SaveTableRequest,
+  SortOrder,
+  UIDatasource,
+} from "@budibase/types"
 import { get } from "svelte/store"
+import { Store as StoreContext } from ".."
+import { DatasourceTableActions } from "."
 
 const SuppressErrors = true
 
-export const createActions = context => {
+interface TableActions {
+  table: {
+    actions: DatasourceTableActions
+  }
+}
+
+export type Store = TableActions
+
+export const createActions = (context: StoreContext): TableActions => {
   const { API, datasource, columns } = context
 
-  const saveDefinition = async newDefinition => {
+  const saveDefinition = async (newDefinition: SaveTableRequest) => {
     await API.saveTable(newDefinition)
   }
 
-  const saveRow = async row => {
+  const saveRow = async (row: SaveRowRequest) => {
     row = {
       ...row,
       tableId: get(datasource)?.tableId,
     }
-    return await API.saveRow(row, SuppressErrors)
+    const newRow = await API.saveRow(row, SuppressErrors)
+    return { ...newRow, _id: newRow._id! }
   }
 
-  const deleteRows = async rows => {
-    await API.deleteRows({
-      tableId: get(datasource).tableId,
-      rows,
-    })
+  const deleteRows = async (rows: Row[]) => {
+    await API.deleteRows(get(datasource).tableId, rows)
   }
 
-  const isDatasourceValid = datasource => {
-    return datasource?.type === "table" && datasource?.tableId
+  const isDatasourceValid = (datasource: UIDatasource) => {
+    return datasource?.type === "table" && !!datasource?.tableId
   }
 
-  const getRow = async id => {
-    const res = await API.searchTable({
-      tableId: get(datasource).tableId,
+  const getRow = async (id: any) => {
+    const res = await API.searchTable(get(datasource).tableId, {
       limit: 1,
       query: {
         equal: {
@@ -40,10 +53,15 @@ export const createActions = context => {
       },
       paginate: false,
     })
-    return res?.rows?.[0]
+    const row = res?.rows?.[0]
+    if (!row) {
+      return
+    }
+
+    return { ...row, _id: row._id! }
   }
 
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return get(columns).some(col => col.name === name)
   }
 
@@ -62,7 +80,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     datasource,
     fetch,
@@ -78,7 +96,7 @@ export const initialise = context => {
 
   // Keep a list of subscriptions so that we can clear them when the datasource
   // config changes
-  let unsubscribers = []
+  let unsubscribers: any[] = []
 
   // Observe datasource changes and apply logic for table datasources
   datasource.subscribe($datasource => {
@@ -90,7 +108,7 @@ export const initialise = context => {
     }
 
     // Wipe state
-    filter.set(get(initialFilter))
+    filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),
@@ -121,7 +139,7 @@ export const initialise = context => {
         }
         $fetch.update({
           sortOrder: $sort.order || SortOrder.ASCENDING,
-          sortColumn: $sort.column,
+          sortColumn: $sort.column ?? undefined,
         })
       })
     )

package/src/components/grid/stores/datasources/{viewV2.js → viewV2.ts}

@@ -1,38 +1,53 @@
 import { get } from "svelte/store"
-import { SortOrder } from "@budibase/types"
+import {
+  Row,
+  SaveRowRequest,
+  SortOrder,
+  UIDatasource,
+  UIView,
+  UpdateViewRequest,
+} from "@budibase/types"
+import { Store as StoreContext } from ".."
+import { DatasourceViewActions } from "."
 
 const SuppressErrors = true
 
-export const createActions = context => {
+interface ViewActions {
+  viewV2: {
+    actions: DatasourceViewActions
+  }
+}
+
+export type Store = ViewActions
+
+export const createActions = (context: StoreContext): ViewActions => {
   const { API, datasource, columns } = context
 
-  const saveDefinition = async newDefinition => {
+  const saveDefinition = async (newDefinition: UpdateViewRequest) => {
     await API.viewV2.update(newDefinition)
   }
 
-  const saveRow = async row => {
+  const saveRow = async (row: SaveRowRequest) => {
     const $datasource = get(datasource)
     row = {
       ...row,
       tableId: $datasource?.tableId,
       _viewId: $datasource?.id,
     }
+    const newRow = await API.saveRow(row, SuppressErrors)
     return {
-      ...(await API.saveRow(row, SuppressErrors)),
+      ...newRow,
+      _id: newRow._id!,
       _viewId: row._viewId,
     }
   }
 
-  const deleteRows = async rows => {
-    await API.deleteRows({
-      tableId: get(datasource).id,
-      rows,
-    })
+  const deleteRows = async (rows: Row[]) => {
+    await API.deleteRows(get(datasource).id, rows)
   }
 
-  const getRow = async id => {
-    const res = await API.viewV2.fetch({
-      viewId: get(datasource).id,
+  const getRow = async (id: string) => {
+    const res = await API.viewV2.fetch(get(datasource).id, {
       limit: 1,
       query: {
         equal: {
@@ -41,16 +56,21 @@ export const createActions = context => {
       },
       paginate: false,
     })
-    return res?.rows?.[0]
+    const row = res?.rows?.[0]
+    if (!row) {
+      return
+    }
+
+    return { ...row, _id: row._id! }
   }
 
-  const isDatasourceValid = datasource => {
+  const isDatasourceValid = (datasource: UIDatasource) => {
     return (
-      datasource?.type === "viewV2" && datasource?.id && datasource?.tableId
+      datasource?.type === "viewV2" && !!datasource?.id && !!datasource?.tableId
     )
   }
 
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return get(columns).some(col => col.name === name && col.visible)
   }
 
@@ -69,7 +89,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     definition,
     datasource,
@@ -89,7 +109,7 @@ export const initialise = context => {
 
   // Keep a list of subscriptions so that we can clear them when the datasource
   // config changes
-  let unsubscribers = []
+  let unsubscribers: any[] = []
 
   // Observe datasource changes and apply logic for view V2 datasources
   datasource.subscribe($datasource => {
@@ -101,7 +121,7 @@ export const initialise = context => {
     }
 
     // Reset state for new view
-    filter.set(get(initialFilter))
+    filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),
@@ -131,20 +151,46 @@ export const initialise = context => {
       })
     )
 
+    function sortHasChanged(
+      newSort: {
+        column: string | null | undefined
+        order: SortOrder
+      },
+      existingSort?: {
+        field: string
+        order?: SortOrder
+      }
+    ) {
+      const newColumn = newSort.column ?? null
+      const existingColumn = existingSort?.field ?? null
+      if (newColumn !== existingColumn) {
+        return true
+      }
+
+      if (!newColumn) {
+        return false
+      }
+
+      const newOrder = newSort.order ?? null
+      const existingOrder = existingSort?.order ?? null
+      if (newOrder !== existingOrder) {
+        return true
+      }
+
+      return false
+    }
+
     // When sorting changes, ensure view definition is kept up to date
     unsubscribers.push(
       sort.subscribe(async $sort => {
         // Ensure we're updating the correct view
-        const $view = get(definition)
+        const $view = get(definition) as UIView
         if ($view?.id !== $datasource.id) {
           return
         }
 
         // Skip if nothing actually changed
-        if (
-          $sort?.column === $view.sort?.field &&
-          $sort?.order === $view.sort?.order
-        ) {
+        if (!sortHasChanged($sort, $view.sort)) {
           return
         }
 
@@ -153,7 +199,7 @@ export const initialise = context => {
           await datasource.actions.saveDefinition({
             ...$view,
             sort: {
-              field: $sort.column,
+              field: $sort.column!,
               order: $sort.order || SortOrder.ASCENDING,
             },
           })
@@ -167,7 +213,7 @@ export const initialise = context => {
         }
         $fetch.update({
           sortOrder: $sort.order,
-          sortColumn: $sort.column,
+          sortColumn: $sort.column ?? undefined,
         })
       })
     )
@@ -186,7 +232,7 @@ export const initialise = context => {
           await datasource.actions.saveDefinition({
             ...$view,
             queryUI: $filter,
-          })
+          } as never as UpdateViewRequest)
 
           // Refresh data since view definition changed
           await rows.actions.refreshData()