Merge pull request #15264 from Budibase/typing/stores-grid-config

Typing grid config store

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte

@@ -26,12 +26,14 @@
   const getSchema = (asset, datasource) => {
     const schema = getSchemaForDatasource(asset, datasource).schema
 
-    // Don't show ID and rev in tables
-    if (schema) {
-      delete schema._id
-      delete schema._rev
+    if (!schema) {
+      return
     }
 
+    // Don't show ID and rev in tables
+    delete schema._id
+    delete schema._rev
+
     const result = enrichSchemaWithRelColumns(schema)
     return result
   }

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -47,7 +47,6 @@
   export let buttonsCollapsedText = null
   export let darkMode = false
   export let isCloud = null
-  export let rowConditions = null
   export let aiEnabled = false
 
   // Unique identifier for DOM nodes inside this instance
@@ -106,7 +105,6 @@
     darkMode,
     isCloud,
     aiEnabled,
-    rowConditions,
   })
 
   // Derive min height and make available in context

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

@@ -156,11 +156,11 @@ export const initialise = (context: StoreContext) => {
 
   // Merge new schema fields with existing schema in order to preserve widths
   const processColumns = ($enrichedSchema: any) => {
-    if (!$enrichedSchema) {
+    const $definition = get(definition)
+    if (!$enrichedSchema || !$definition) {
       columns.set([])
       return
     }
-    const $definition = get(definition)
     const $columns = get(columns)
     const $displayColumn = get(displayColumn)
 

packages/frontend-core/src/components/grid/stores/config.js → packages/frontend-core/src/components/grid/stores/config.ts

@@ -1,10 +1,22 @@
 import { derivedMemo } from "../../../utils"
-import { derived } from "svelte/store"
+import { derived, Readable } from "svelte/store"
 import { ViewV2Type } from "@budibase/types"
+import { BaseStoreProps, Store as StoreContext } from "."
 
-export const createStores = context => {
+type ConfigStore = {
+  [key in keyof BaseStoreProps]: Readable<BaseStoreProps[key]>
+}
+
+interface ConfigDerivedStore {
+  config: Readable<BaseStoreProps>
+}
+
+export type Store = ConfigStore & ConfigDerivedStore
+
+export const createStores = (context: StoreContext): ConfigStore => {
   const { props } = context
-  const getProp = prop => derivedMemo(props, $props => $props[prop])
+  const getProp = <T extends keyof BaseStoreProps>(prop: T) =>
+    derivedMemo(props, $props => $props[prop])
 
   // Derive and memoize some props so that we can react to them in isolation
   const datasource = getProp("datasource")
@@ -15,7 +27,6 @@ export const createStores = context => {
   const schemaOverrides = getProp("schemaOverrides")
   const notifySuccess = getProp("notifySuccess")
   const notifyError = getProp("notifyError")
-  const rowConditions = getProp("rowConditions")
 
   return {
     datasource,
@@ -26,11 +37,10 @@ export const createStores = context => {
     schemaOverrides,
     notifySuccess,
     notifyError,
-    rowConditions,
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): ConfigDerivedStore => {
   const { props, definition, hasNonAutoColumn } = context
 
   // Derive features

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

@@ -12,11 +12,11 @@ import {
   UpdateViewRequest,
   ViewV2Type,
 } from "@budibase/types"
-import { Store as StoreContext } from "."
+import { Store as StoreContext, BaseStoreProps } from "."
 import { DatasourceActions } from "./datasources"
 
 interface DatasourceStore {
-  definition: Writable<UIDatasource>
+  definition: Writable<UIDatasource | null>
   schemaMutations: Writable<Record<string, UIFieldMutation>>
   subSchemaMutations: Writable<Record<string, Record<string, UIFieldMutation>>>
 }
@@ -28,7 +28,7 @@ interface DerivedDatasourceStore {
 }
 
 interface ActionDatasourceStore {
-  datasource: DatasourceStore["definition"] & {
+  datasource: BaseStoreProps["datasource"] & {
     actions: DatasourceActions & {
       refreshDefinition: () => Promise<void>
       changePrimaryDisplay: (column: string) => Promise<void>
@@ -218,7 +218,7 @@ export const createActions = (context: StoreContext): ActionDatasourceStore => {
 
   // Updates the datasources primary display column
   const changePrimaryDisplay = async (column: string) => {
-    let newDefinition = cloneDeep(get(definition))
+    let newDefinition = cloneDeep(get(definition)!)
 
     // Update primary display
     newDefinition.primaryDisplay = column

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

@@ -91,7 +91,7 @@ export const initialise = (context: StoreContext) => {
     }
 
     // Wipe state
-    filter.set(get(initialFilter))
+    filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),

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

@@ -108,7 +108,7 @@ export const initialise = (context: StoreContext) => {
     }
 
     // Wipe state
-    filter.set(get(initialFilter))
+    filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),

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

@@ -121,7 +121,7 @@ export const initialise = (context: StoreContext) => {
     }
 
     // Reset state for new view
-    filter.set(get(initialFilter))
+    filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),

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

@@ -26,7 +26,7 @@ export const createStores = (context: StoreContext): FilterStore => {
   const { props } = context
 
   // Initialise to default props
-  const filter = memo(get(props).initialFilter)
+  const filter = memo(get(props).initialFilter ?? undefined)
   const inlineFilters = memo([])
 
   return {
@@ -120,5 +120,7 @@ export const initialise = (context: StoreContext) => {
   const { filter, initialFilter } = context
 
   // Reset filter when initial filter prop changes
-  initialFilter.subscribe(filter.set)
+  initialFilter.subscribe($initialFilter =>
+    filter.set($initialFilter ?? undefined)
+  )
 }

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

@@ -24,6 +24,7 @@ import * as ViewV2 from "./datasources/viewV2"
 import * as NonPlus from "./datasources/nonPlus"
 import * as Cache from "./cache"
 import * as Conditions from "./conditions"
+import { SortOrder, UIDatasource, UISearchFilter } from "@budibase/types"
 
 const DependencyOrderedStores = [
   Sort,
@@ -51,8 +52,33 @@ const DependencyOrderedStores = [
   Cache,
 ]
 
+export interface BaseStoreProps {
+  datasource: UIDatasource
+  initialSortColumn: string | null
+  initialSortOrder: SortOrder | null
+  initialFilter: UISearchFilter | null
+  fixedRowHeight: number | null
+  schemaOverrides: Record<
+    string,
+    {
+      displayName?: string
+      disabled?: boolean
+    }
+  > | null
+  notifySuccess: (message: string) => void
+  notifyError: (message: string) => void
+  canAddRows?: boolean
+  canEditRows?: boolean
+  canDeleteRows?: boolean
+  canEditColumns?: boolean
+  canExpandRows?: boolean
+  canSaveSchema?: boolean
+}
+
 export interface BaseStore {
   API: APIClient
+  gridID: string
+  props: Writable<BaseStoreProps>
 }
 
 export type Store = BaseStore &
@@ -70,23 +96,16 @@ export type Store = BaseStore &
   Scroll.Store & {
     // TODO while typing the rest of stores
     sort: Writable<any>
-    initialFilter: Writable<any>
-    initialSortColumn: Writable<any>
-    initialSortOrder: Writable<any>
     subscribe: any
-    config: Writable<any>
     dispatch: (event: string, data: any) => any
     notifications: Writable<any>
-    schemaOverrides: Writable<any>
-    gridID: string
-    props: Writable<any>
     width: Writable<number>
-    fixedRowHeight: Writable<number>
     bounds: Readable<any>
     height: Readable<number>
   } & Rows.Store &
   Reorder.Store &
-  Resize.Store
+  Resize.Store &
+  Config.Store
 
 export const attachStores = (context: Store): Store => {
   // Atomic store creation

packages/frontend-core/src/utils/memo.d.ts

@@ -0,0 +1,10 @@
+import { Readable, Writable } from "svelte/store"
+
+declare module "./memo" {
+  export function memo<T>(value: T): Writable<T>
+
+  export function derivedMemo<TStore, TResult>(
+    store: Readable<TStore>,
+    derivation: (store: TStore) => TResult
+  ): Readable<TResult>
+}

packages/frontend-core/src/utils/relatedColumns.ts

@@ -46,10 +46,7 @@ const columnTypeManyParser = {
 
 export function enrichSchemaWithRelColumns(
   schema: Record<string, UIFieldSchema>
-): Record<string, UIFieldSchema> | undefined {
-  if (!schema) {
-    return
-  }
+): Record<string, UIFieldSchema> {
   const result = Object.keys(schema).reduce<Record<string, UIFieldSchema>>(
     (result, fieldName) => {
       const field = schema[fieldName]

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

@@ -27,6 +27,7 @@ export type UIFieldSchema = FieldSchema &
     related?: { field: string; subField: string }
     columns?: Record<string, UIRelationSchemaField>
     cellRenderType?: string
+    disabled?: boolean
   }
 
 interface UIRelationSchemaField extends RelationSchemaField {