@budibase/frontend-core 2.9.38 → 2.9.39-alpha.0

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

@@ -14,7 +14,7 @@ export const createStores = context => {
   const focusedCellAPI = writable(null)
   const selectedRows = writable({})
   const hoveredRowId = writable(null)
-  const rowHeight = writable(props.fixedRowHeight || DefaultRowHeight)
+  const rowHeight = writable(get(props).fixedRowHeight || DefaultRowHeight)
   const previousFocusedRowId = writable(null)
   const gridFocused = writable(false)
   const isDragging = writable(false)
@@ -61,23 +61,13 @@ export const createStores = context => {
 }
 
 export const deriveStores = context => {
-  const {
-    focusedCellId,
-    selectedRows,
-    hoveredRowId,
-    enrichedRows,
-    rowLookupMap,
-    rowHeight,
-    stickyColumn,
-    width,
-    hasNonAutoColumn,
-    config,
-  } = context
+  const { focusedCellId, rows, rowLookupMap, rowHeight, stickyColumn, width } =
+    context
 
   // Derive the row that contains the selected cell
   const focusedRow = derived(
-    [focusedCellId, rowLookupMap, enrichedRows],
-    ([$focusedCellId, $rowLookupMap, $enrichedRows]) => {
+    [focusedCellId, rowLookupMap, rows],
+    ([$focusedCellId, $rowLookupMap, $rows]) => {
       const rowId = $focusedCellId?.split("-")[0]
 
       // Edge case for new rows
@@ -87,18 +77,11 @@ export const deriveStores = context => {
 
       // All normal rows
       const index = $rowLookupMap[rowId]
-      return $enrichedRows[index]
+      return $rows[index]
     },
     null
   )
 
-  // Callback when leaving the grid, deselecting all focussed or selected items
-  const blur = () => {
-    focusedCellId.set(null)
-    selectedRows.set({})
-    hoveredRowId.set(null)
-  }
-
   // Derive the amount of content lines to show in cells depending on row height
   const contentLines = derived(rowHeight, $rowHeight => {
     if ($rowHeight >= LargeRowHeight) {
@@ -114,19 +97,24 @@ export const deriveStores = context => {
     return ($stickyColumn?.width || 0) + $width + GutterWidth < 1100
   })
 
-  // Derive if we're able to add rows
-  const canAddRows = derived(
-    [config, hasNonAutoColumn],
-    ([$config, $hasNonAutoColumn]) => {
-      return $config.allowAddRows && $hasNonAutoColumn
-    }
-  )
-
   return {
-    canAddRows,
     focusedRow,
     contentLines,
     compact,
+  }
+}
+
+export const createActions = context => {
+  const { focusedCellId, selectedRows, hoveredRowId } = context
+
+  // Callback when leaving the grid, deselecting all focussed or selected items
+  const blur = () => {
+    focusedCellId.set(null)
+    selectedRows.set({})
+    hoveredRowId.set(null)
+  }
+
+  return {
     ui: {
       actions: {
         blur,
@@ -143,7 +131,7 @@ export const initialise = context => {
     focusedCellId,
     selectedRows,
     hoveredRowId,
-    table,
+    definition,
     rowHeight,
     fixedRowHeight,
   } = context
@@ -199,9 +187,9 @@ export const initialise = context => {
   })
 
   // Pull row height from table as long as we don't have a fixed height
-  table.subscribe($table => {
+  definition.subscribe($definition => {
     if (!get(fixedRowHeight)) {
-      rowHeight.set($table?.rowHeight || DefaultRowHeight)
+      rowHeight.set($definition?.rowHeight || DefaultRowHeight)
     }
   })
 
@@ -210,7 +198,7 @@ export const initialise = context => {
     if (height) {
       rowHeight.set(height)
     } else {
-      rowHeight.set(get(table)?.rowHeight || DefaultRowHeight)
+      rowHeight.set(get(definition)?.rowHeight || DefaultRowHeight)
     }
   })
 }

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

@@ -39,6 +39,14 @@ export const deriveStores = context => {
     }
   )
 
+  return {
+    selectedCellMap,
+  }
+}
+
+export const createActions = context => {
+  const { users } = context
+
   const updateUser = user => {
     const $users = get(users)
     if (!$users.some(x => x.sessionId === user.sessionId)) {
@@ -66,6 +74,5 @@ export const deriveStores = context => {
         removeUser,
       },
     },
-    selectedCellMap,
   }
 }

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

@@ -0,0 +1,212 @@
+import { get } from "svelte/store"
+
+const SuppressErrors = true
+
+export const createActions = context => {
+  const { definition, API, datasource, columns, stickyColumn } = context
+
+  const refreshDefinition = async () => {
+    const $datasource = get(datasource)
+    if (!$datasource) {
+      definition.set(null)
+      return
+    }
+    const table = await API.fetchTableDefinition($datasource.tableId)
+    const view = Object.values(table?.views || {}).find(
+      view => view.id === $datasource.id
+    )
+    definition.set(view)
+  }
+
+  const saveDefinition = async newDefinition => {
+    await API.viewV2.update(newDefinition)
+  }
+
+  const saveRow = async row => {
+    const $datasource = get(datasource)
+    row.tableId = $datasource?.tableId
+    row._viewId = $datasource?.id
+    return {
+      ...(await API.saveRow(row, SuppressErrors)),
+      _viewId: row._viewId,
+    }
+  }
+
+  const deleteRows = async rows => {
+    await API.deleteRows({
+      tableId: get(datasource).id,
+      rows,
+    })
+  }
+
+  const getRow = () => {
+    throw "Views don't support fetching individual rows"
+  }
+
+  const isDatasourceValid = datasource => {
+    return (
+      datasource?.type === "viewV2" && datasource?.id && datasource?.tableId
+    )
+  }
+
+  const canUseColumn = name => {
+    const $columns = get(columns)
+    const $sticky = get(stickyColumn)
+    return (
+      $columns.some(col => col.name === name && col.visible) ||
+      $sticky?.name === name
+    )
+  }
+
+  return {
+    viewV2: {
+      actions: {
+        refreshDefinition,
+        saveDefinition,
+        addRow: saveRow,
+        updateRow: saveRow,
+        deleteRows,
+        getRow,
+        isDatasourceValid,
+        canUseColumn,
+      },
+    },
+  }
+}
+
+export const initialise = context => {
+  const {
+    definition,
+    datasource,
+    sort,
+    rows,
+    filter,
+    subscribe,
+    viewV2,
+    initialFilter,
+    initialSortColumn,
+    initialSortOrder,
+    config,
+    fetch,
+  } = context
+
+  // Keep a list of subscriptions so that we can clear them when the datasource
+  // config changes
+  let unsubscribers = []
+
+  // Observe datasource changes and apply logic for view V2 datasources
+  datasource.subscribe($datasource => {
+    // Clear previous subscriptions
+    unsubscribers?.forEach(unsubscribe => unsubscribe())
+    unsubscribers = []
+    if (!viewV2.actions.isDatasourceValid($datasource)) {
+      return
+    }
+
+    // Reset state for new view
+    filter.set(get(initialFilter))
+    sort.set({
+      column: get(initialSortColumn),
+      order: get(initialSortOrder) || "ascending",
+    })
+
+    // Keep sort and filter state in line with the view definition
+    unsubscribers.push(
+      definition.subscribe($definition => {
+        if ($definition?.id !== $datasource.id) {
+          return
+        }
+        // Only override sorting if we don't have an initial sort column
+        if (!get(initialSortColumn)) {
+          sort.set({
+            column: $definition.sort?.field,
+            order: $definition.sort?.order || "ascending",
+          })
+        }
+        // Only override filter state if we don't have an initial filter
+        if (!get(initialFilter)) {
+          filter.set($definition.query)
+        }
+      })
+    )
+
+    // When sorting changes, ensure view definition is kept up to date
+    unsubscribers.push(
+      sort.subscribe(async $sort => {
+        // 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 (
+            $sort?.column !== $view.sort?.field ||
+            $sort?.order !== $view.sort?.order
+          ) {
+            await datasource.actions.saveDefinition({
+              ...$view,
+              sort: {
+                field: $sort.column,
+                order: $sort.order || "ascending",
+              },
+            })
+            await rows.actions.refreshData()
+          }
+        }
+        // Otherwise just update the fetch
+        else {
+          // Ensure we're updating the correct fetch
+          const $fetch = get(fetch)
+          if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+            return
+          }
+          $fetch.update({
+            sortOrder: $sort.order || "ascending",
+            sortColumn: $sort.column,
+          })
+        }
+      })
+    )
+
+    // 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,
+            })
+            await rows.actions.refreshData()
+          }
+        }
+        // Otherwise just update the fetch
+        else {
+          // Ensure we're updating the correct fetch
+          const $fetch = get(fetch)
+          if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+            return
+          }
+          $fetch.update({
+            filter: $filter,
+          })
+        }
+      })
+    )
+
+    // When hidden we show columns, we need to refresh data in order to fetch
+    // values for those columns
+    unsubscribers.push(
+      subscribe("show-column", async () => {
+        await rows.actions.refreshData()
+      })
+    )
+  })
+}

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

@@ -10,7 +10,7 @@ export const deriveStores = context => {
   const {
     rowHeight,
     visibleColumns,
-    enrichedRows,
+    rows,
     scrollTop,
     scrollLeft,
     width,
@@ -35,9 +35,9 @@ export const deriveStores = context => {
     0
   )
   const renderedRows = derived(
-    [enrichedRows, scrolledRowCount, visualRowCapacity],
-    ([$enrichedRows, $scrolledRowCount, $visualRowCapacity]) => {
-      return $enrichedRows.slice(
+    [rows, scrolledRowCount, visualRowCapacity],
+    ([$rows, $scrolledRowCount, $visualRowCapacity]) => {
+      return $rows.slice(
         $scrolledRowCount,
         $scrolledRowCount + $visualRowCapacity
       )

package/src/constants.js

@@ -2,6 +2,7 @@
  * Operator options for lucene queries
  */
 export { OperatorOptions, SqlNumberTypeRangeMap } from "@budibase/shared-core"
+export { Feature as Features } from "@budibase/types"
 
 // Cookie names
 export const Cookies = {
@@ -22,12 +23,29 @@ export const BudibaseRoles = {
   Admin: "admin",
 }
 
-export const BudibaseRoleOptions = [
-  { label: "App User", value: BudibaseRoles.AppUser },
+export const BudibaseRoleOptionsOld = [
   { label: "Developer", value: BudibaseRoles.Developer },
+  { label: "Member", value: BudibaseRoles.AppUser },
+  { label: "Admin", value: BudibaseRoles.Admin },
+]
+export const BudibaseRoleOptions = [
+  { label: "Member", value: BudibaseRoles.AppUser },
   { label: "Admin", value: BudibaseRoles.Admin },
 ]
 
+export const BudibaseRoleOptionsNew = [
+  {
+    label: "Admin",
+    value: "admin",
+    subtitle: "Has full access to all apps and settings in your account",
+  },
+  {
+    label: "Member",
+    value: "appUser",
+    subtitle: "Can only view apps they have access to",
+  },
+]
+
 export const BuilderRoleDescriptions = [
   {
     value: BudibaseRoles.AppUser,
@@ -62,17 +80,6 @@ export const PlanType = {
  */
 export const ApiVersion = "1"
 
-export const Features = {
-  USER_GROUPS: "userGroups",
-  BACKUPS: "appBackups",
-  ENVIRONMENT_VARIABLES: "environmentVariables",
-  AUDIT_LOGS: "auditLogs",
-  ENFORCEABLE_SSO: "enforceableSSO",
-  BRANDING: "branding",
-  SCIM: "scim",
-  SYNC_AUTOMATIONS: "syncAutomations",
-}
-
 // Role IDs
 export const Roles = {
   ADMIN: "ADMIN",
@@ -80,6 +87,7 @@ export const Roles = {
   BASIC: "BASIC",
   PUBLIC: "PUBLIC",
   BUILDER: "BUILDER",
+  CREATOR: "CREATOR",
 }
 
 export const Themes = [

package/src/fetch/DataFetch.js

@@ -110,14 +110,27 @@ export default class DataFetch {
     return this.derivedStore.subscribe
   }
 
+  /**
+   * Gets the default sort column for this datasource
+   */
+  getDefaultSortColumn(definition, schema) {
+    if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
+      return definition.primaryDisplay
+    } else {
+      return Object.keys(schema)[0]
+    }
+  }
+
   /**
    * Fetches a fresh set of data from the server, resetting pagination
    */
   async getInitialData() {
     const { datasource, filter, paginate } = this.options
 
-    // Fetch datasource definition and determine feature flags
+    // Fetch datasource definition and extract sort properties if configured
     const definition = await this.getDefinition(datasource)
+
+    // Determine feature flags
     const features = this.determineFeatureFlags(definition)
     this.features = {
       supportsSearch: !!features?.supportsSearch,
@@ -132,32 +145,32 @@ export default class DataFetch {
       return
     }
 
-    // If no sort order, default to descending
-    if (!this.options.sortOrder) {
-      this.options.sortOrder = "ascending"
+    // If an invalid sort column is specified, delete it
+    if (this.options.sortColumn && !schema[this.options.sortColumn]) {
+      this.options.sortColumn = null
     }
 
-    // If no sort column, or an invalid sort column is provided, use the primary
-    // display and fallback to first column
-    const sortValid = this.options.sortColumn && schema[this.options.sortColumn]
-    if (!sortValid) {
-      let newSortColumn
-      if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
-        newSortColumn = definition.primaryDisplay
-      } else {
-        newSortColumn = Object.keys(schema)[0]
-      }
-      this.options.sortColumn = newSortColumn
+    // If no sort column, get the default column for this datasource
+    if (!this.options.sortColumn) {
+      this.options.sortColumn = this.getDefaultSortColumn(definition, schema)
     }
-    const { sortOrder, sortColumn } = this.options
 
-    // Determine what sort type to use
-    let sortType = "string"
-    if (sortColumn) {
-      const type = schema?.[sortColumn]?.type
-      sortType = type === "number" || type === "bigint" ? "number" : "string"
+    // 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.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"
+
+      // If no sort order, default to ascending
+      if (!this.options.sortOrder) {
+        this.options.sortOrder = "ascending"
+      }
     }
-    this.options.sortType = sortType
 
     // Build the lucene query
     let query = this.options.query
@@ -174,8 +187,6 @@ export default class DataFetch {
       loading: true,
       cursors: [],
       cursor: null,
-      sortOrder,
-      sortColumn,
     }))
 
     // Actually fetch data

package/src/fetch/QueryFetch.js

@@ -29,6 +29,10 @@ export default class QueryFetch extends DataFetch {
     }
   }
 
+  getDefaultSortColumn() {
+    return null
+  }
+
   async getData() {
     const { datasource, limit, paginate } = this.options
     const { supportsPagination } = this.features

package/src/fetch/ViewV2Fetch.js

@@ -0,0 +1,65 @@
+import DataFetch from "./DataFetch.js"
+import { get } from "svelte/store"
+
+export default class ViewV2Fetch extends DataFetch {
+  determineFeatureFlags() {
+    return {
+      supportsSearch: true,
+      supportsSort: true,
+      supportsPagination: true,
+    }
+  }
+
+  getSchema(datasource, definition) {
+    return definition?.schema
+  }
+
+  async getDefinition(datasource) {
+    if (!datasource?.id) {
+      return null
+    }
+    try {
+      const res = await this.API.viewV2.fetchDefinition(datasource.id)
+      return res?.data
+    } catch (error) {
+      this.store.update(state => ({
+        ...state,
+        error,
+      }))
+      return null
+    }
+  }
+
+  getDefaultSortColumn() {
+    return null
+  }
+
+  async getData() {
+    const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
+      this.options
+    const { cursor, query } = get(this.store)
+    try {
+      const res = await this.API.viewV2.fetch({
+        viewId: datasource.id,
+        query,
+        paginate,
+        limit,
+        bookmark: cursor,
+        sort: sortColumn,
+        sortOrder: sortOrder?.toLowerCase(),
+        sortType,
+      })
+      return {
+        rows: res?.rows || [],
+        hasNextPage: res?.hasNextPage || false,
+        cursor: res?.bookmark || null,
+      }
+    } catch (error) {
+      return {
+        rows: [],
+        hasNextPage: false,
+        error,
+      }
+    }
+  }
+}

package/src/fetch/fetchData.js

@@ -1,5 +1,6 @@
 import TableFetch from "./TableFetch.js"
 import ViewFetch from "./ViewFetch.js"
+import ViewV2Fetch from "./ViewV2Fetch.js"
 import QueryFetch from "./QueryFetch.js"
 import RelationshipFetch from "./RelationshipFetch.js"
 import NestedProviderFetch from "./NestedProviderFetch.js"
@@ -11,6 +12,7 @@ import GroupUserFetch from "./GroupUserFetch.js"
 const DataFetchMap = {
   table: TableFetch,
   view: ViewFetch,
+  viewV2: ViewV2Fetch,
   query: QueryFetch,
   link: RelationshipFetch,
   user: UserFetch,

package/src/utils/roles.js

@@ -1,20 +1,22 @@
 import { Roles } from "../constants"
 
 const RolePriorities = {
-  [Roles.ADMIN]: 4,
+  [Roles.ADMIN]: 5,
+  [Roles.CREATOR]: 4,
   [Roles.POWER]: 3,
   [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 = roleId => {
-  return RolePriorities[roleId] ?? 0
+export const getRolePriority = role => {
+  return RolePriorities[role] ?? 0
 }
 
 export const getRoleColour = roleId => {