Merge pull request #15229 from Budibase/typing/stores-grid-datasources

Typing grid datasources store

packages/frontend-core/src/components/grid/stores/datasources/nonPlus.ts

@@ -1,7 +1,24 @@
-import { SortOrder } from "@budibase/types"
+import { SortOrder, UIDatasource } from "@budibase/types"
 import { get } from "svelte/store"
+import { Store as StoreContext } from ".."
 
-export const createActions = context => {
+interface NonPlusActions {
+  nonPlus: {
+    actions: {
+      saveDefinition: () => Promise<void>
+      addRow: () => Promise<void>
+      updateRow: () => Promise<void>
+      deleteRows: () => Promise<void>
+      getRow: () => Promise<void>
+      isDatasourceValid: (datasource: UIDatasource) => boolean
+      canUseColumn: (name: string) => boolean
+    }
+  }
+}
+
+export type Store = NonPlusActions
+
+export const createActions = (context: StoreContext): NonPlusActions => {
   const { columns, table, viewV2 } = context
 
   const saveDefinition = async () => {
@@ -20,7 +37,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 +47,7 @@ export const createActions = context => {
     )
   }
 
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return get(columns).some(col => col.name === name)
   }
 
@@ -50,11 +67,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 +86,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 => {

packages/frontend-core/src/components/grid/stores/datasources/table.ts

@@ -1,16 +1,40 @@
-import { SortOrder } from "@budibase/types"
+import {
+  Row,
+  SaveRowRequest,
+  SaveRowResponse,
+  SaveTableRequest,
+  SortOrder,
+  UIDatasource,
+} from "@budibase/types"
 import { get } from "svelte/store"
+import { Store as StoreContext } from ".."
 
 const SuppressErrors = true
 
-export const createActions = context => {
+interface TableActions {
+  table: {
+    actions: {
+      saveDefinition: (newDefinition: SaveTableRequest) => Promise<void>
+      addRow: (row: SaveRowRequest) => Promise<SaveRowResponse>
+      updateRow: (row: SaveRowRequest) => Promise<SaveRowResponse>
+      deleteRows: (rows: (string | Row)[]) => Promise<void>
+      getRow: (id: string) => Promise<Row>
+      isDatasourceValid: (datasource: UIDatasource) => boolean
+      canUseColumn: (name: string) => boolean
+    }
+  }
+}
+
+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,
@@ -18,15 +42,15 @@ export const createActions = context => {
     return await API.saveRow(row, SuppressErrors)
   }
 
-  const deleteRows = async rows => {
+  const deleteRows = async (rows: (string | Row)[]) => {
     await API.deleteRows(get(datasource).tableId, rows)
   }
 
-  const isDatasourceValid = datasource => {
+  const isDatasourceValid = (datasource: UIDatasource) => {
-    return datasource?.type === "table" && datasource?.tableId
+    return datasource?.type === "table" && !!datasource?.tableId
   }
 
-  const getRow = async id => {
+  const getRow = async (id: any) => {
     const res = await API.searchTable(get(datasource).tableId, {
       limit: 1,
       query: {
@@ -39,7 +63,7 @@ export const createActions = context => {
     return res?.rows?.[0]
   }
 
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return get(columns).some(col => col.name === name)
   }
 
@@ -58,7 +82,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     datasource,
     fetch,
@@ -74,7 +98,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 => {

packages/frontend-core/src/components/grid/stores/datasources/viewV2.ts

@@ -1,16 +1,39 @@
 import { get } from "svelte/store"
-import { SortOrder } from "@budibase/types"
+import {
+  Row,
+  SaveRowRequest,
+  SortOrder,
+  UIDatasource,
+  UpdateViewRequest,
+} from "@budibase/types"
+import { Store as StoreContext } from ".."
 
 const SuppressErrors = true
 
-export const createActions = context => {
+interface ViewActions {
+  viewV2: {
+    actions: {
+      saveDefinition: (newDefinition: UpdateViewRequest) => Promise<void>
+      addRow: (row: SaveRowRequest) => Promise<Row>
+      updateRow: (row: SaveRowRequest) => Promise<Row>
+      deleteRows: (rows: (string | Row)[]) => Promise<void>
+      getRow: (id: string) => Promise<Row>
+      isDatasourceValid: (datasource: UIDatasource) => boolean
+      canUseColumn: (name: string) => boolean
+    }
+  }
+}
+
+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,
@@ -23,11 +46,11 @@ export const createActions = context => {
     }
   }
 
-  const deleteRows = async rows => {
+  const deleteRows = async (rows: (string | Row)[]) => {
     await API.deleteRows(get(datasource).id, rows)
   }
 
-  const getRow = async id => {
+  const getRow = async (id: string) => {
     const res = await API.viewV2.fetch(get(datasource).id, {
       limit: 1,
       query: {
@@ -40,13 +63,13 @@ export const createActions = context => {
     return res?.rows?.[0]
   }
 
-  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)
   }
 
@@ -65,7 +88,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     definition,
     datasource,
@@ -85,7 +108,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 => {

packages/frontend-core/src/components/grid/stores/index.ts

@@ -1,4 +1,5 @@
 import { Writable } from "svelte/store"
+import type { APIClient } from "../../../api/types"
 
 import * as Bounds from "./bounds"
 import * as Columns from "./columns"
@@ -44,20 +45,36 @@ const DependencyOrderedStores = [
   Users,
   Menu,
   Pagination,
-  Config,
+  Config as any,
   Clipboard,
   Notifications,
   Cache,
 ]
 
-export interface BaseStore {}
+export interface BaseStore {
+  API: APIClient
+}
 
 export type Store = BaseStore &
-  Columns.Store & {
+  Columns.Store &
+  Table.Store &
+  ViewV2.Store &
+  NonPlus.Store & {
     // TODO while typing the rest of stores
-    datasource: any
+    datasource: Writable<any> & { actions: any }
     definition: Writable<any>
     enrichedSchema: any
+    fetch: Writable<any>
+    filter: Writable<any>
+    inlineFilters: Writable<any>
+    allFilters: Writable<any>
+    sort: Writable<any>
+    initialFilter: Writable<any>
+    initialSortColumn: Writable<any>
+    initialSortOrder: Writable<any>
+    rows: Writable<any> & { actions: any }
+    subscribe: any
+    config: Writable<any>
   }
 
 export const attachStores = (context: Store): Store => {

packages/types/src/ui/stores/grid/datasource.ts

@@ -0,0 +1,5 @@
+export interface UIDatasource {
+  type: string
+  id: string
+  tableId: string
+}

packages/types/src/ui/stores/grid/index.ts

@@ -1 +1,2 @@
 export * from "./columns"
+export * from "./datasource"