@stoker-platform/web-app 0.5.222 → 0.5.224

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @stoker-platform/web-app
 
+## 0.5.224
+
+### Patch Changes
+
+- feat: add field access groups feature
+- Updated dependencies
+    - @stoker-platform/node-client@0.5.87
+    - @stoker-platform/web-client@0.5.93
+    - @stoker-platform/utils@0.5.78
+
+## 0.5.223
+
+### Patch Changes
+
+- Updated dependencies
+    - @stoker-platform/node-client@0.5.86
+    - @stoker-platform/web-client@0.5.92
+    - @stoker-platform/utils@0.5.77
+
 ## 0.5.222
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.222",
+    "version": "0.5.224",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -51,9 +51,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-google-maps/api": "^2.20.8",
         "@sentry/react": "^10.56.0",
-        "@stoker-platform/node-client": "0.5.85",
-        "@stoker-platform/utils": "0.5.76",
-        "@stoker-platform/web-client": "0.5.91",
+        "@stoker-platform/node-client": "0.5.87",
+        "@stoker-platform/utils": "0.5.78",
+        "@stoker-platform/web-client": "0.5.93",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Calendar.tsx

@@ -21,6 +21,7 @@ import {
     preloadCollection,
     subscribeMany,
     onStokerPermissionsChange,
+    getCurrentUser,
 } from "@stoker-platform/web-client"
 import { useGoToRecord } from "./utils/goToRecord"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -259,6 +260,7 @@ export function Calendar({
     const customization = getCollectionConfigModule(labels.collection)
     const permissions = getCurrentUserPermissions()
     if (!permissions?.Role) throw new Error("PERMISSION_DENIED")
+    const claims = getCurrentUser()?.token.claims ?? {}
     const location = useLocation()
     const goToRecord = useGoToRecord()
     const { toast } = useToast()
@@ -524,21 +526,21 @@ export function Calendar({
             const allDayFieldSchema = getField(allFields, allDayField)
 
             const hasStartUpdateAccess = !!(
-                canUpdateField(collection, startFieldSchema, permissions) &&
+                canUpdateField(collection, startFieldSchema, permissions, claims) &&
                 !systemFields.map((field) => field.name).includes(startField)
             )
             const hasAllDayUpdateAccess =
-                allDayFieldSchema && !!canUpdateField(collection, allDayFieldSchema, permissions)
+                allDayFieldSchema && !!canUpdateField(collection, allDayFieldSchema, permissions, claims)
             setHasStartUpdateAccess(hasStartUpdateAccess && (!allDayField || hasAllDayUpdateAccess))
             if (endField) {
                 const hasEndUpdateAccess = !!(
-                    canUpdateField(collection, endFieldSchema, permissions) &&
+                    canUpdateField(collection, endFieldSchema, permissions, claims) &&
                     !systemFields.map((field) => field.name).includes(endField)
                 )
                 setHasEndUpdateAccess(hasEndUpdateAccess && (!allDayField || hasAllDayUpdateAccess))
             }
             if (resourceField) {
-                const hasResourceUpdateAccess = !!canUpdateField(collection, resourceFieldSchema, permissions)
+                const hasResourceUpdateAccess = !!canUpdateField(collection, resourceFieldSchema, permissions, claims)
                 setHasResourceUpdateAccess(hasResourceUpdateAccess)
             }
 
@@ -928,17 +930,17 @@ export function Calendar({
                     const systemFields = getSystemFieldsSchema()
 
                     const hasAllDayUpdateAccess =
-                        allDayFieldSchema && !!canUpdateField(additionalSchema, allDayFieldSchema, permissions)
+                        allDayFieldSchema && !!canUpdateField(additionalSchema, allDayFieldSchema, permissions, claims)
                     const hasStartUpdateAccessAdditional =
                         !!(
-                            canUpdateField(additionalSchema, startFieldSchema, permissions) &&
+                            canUpdateField(additionalSchema, startFieldSchema, permissions, claims) &&
                             !systemFields.map((field) => field.name).includes(startField)
                         ) &&
                         (!allDayField || hasAllDayUpdateAccess)
                     let hasEndUpdateAccessAdditional = false
                     if (endField) {
                         hasEndUpdateAccessAdditional = !!(
-                            canUpdateField(additionalSchema, endFieldSchema, permissions) &&
+                            canUpdateField(additionalSchema, endFieldSchema, permissions, claims) &&
                             !systemFields.map((field) => field.name).includes(endField) &&
                             (!allDayField || hasAllDayUpdateAccess)
                         )

package/src/Cards.tsx

@@ -19,6 +19,7 @@ import {
 import {
     Cursor,
     getCollectionConfigModule,
+    getCurrentUser,
     getCurrentUserPermissions,
     onStokerPermissionsChange,
     subscribeOne,
@@ -94,11 +95,12 @@ function CardItem({ index, style, data }: CardItemProps) {
     const systemFields = getSystemFieldsSchema()
     const customization = getCollectionConfigModule(labels.collection)
     const permissions = getCurrentUserPermissions()
+    const claims = getCurrentUser()?.token.claims ?? {}
     const location = useLocation()
     if (!permissions) {
         throw new Error("PERMISSION_DENIED")
     }
-    const hasUpdateAccess = !!canUpdateField(collection, statusField, permissions)
+    const hasUpdateAccess = !!canUpdateField(collection, statusField, permissions, claims)
     const goToRecord = useGoToRecord()
     const [connectionStatus] = useConnection()
     const { isGlobalLoading } = useGlobalLoading()

package/src/Collection.tsx

@@ -37,6 +37,7 @@ import {
     SubscribeManyOptions,
     updateRecord,
     getPreloadListeners,
+    getCurrentUser,
 } from "@stoker-platform/web-client"
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useLocation, useNavigate } from "react-router"
@@ -163,6 +164,7 @@ function Collection({
     const timezone = getTimezone()
     const [permissions, setPermissions] = useState<StokerPermissions | null>(() => getCurrentUserPermissions())
     if (!permissions?.Role) throw new Error("PERMISSION_DENIED")
+    const claims = getCurrentUser()?.token.claims ?? {}
     const { toast } = useToast()
 
     const isServerReadOnly = serverReadOnly(collection)
@@ -720,7 +722,7 @@ function Collection({
                                 }
                             }
                             if (!isPreloadCacheEnabled || relationList?.loadAll) {
-                                if (!isPreloadCacheEnabled) loadedKeys.current.add(key)
+                                loadedKeys.current.add(key)
                                 if (loadedKeys.current.size === keysLength.current) {
                                     setIsRouteLoading("-", location.pathname)
                                 }
@@ -1596,13 +1598,13 @@ function Collection({
                 if (!relationCollection?.fullTextSearch) return false
                 const collectionPermissions = permissions.collections?.[relationCollection.labels.collection]
                 const fullCollectionAccess = collectionPermissions && collectionAccess("Read", collectionPermissions)
-                const dependencyAccess = hasDependencyAccess(relationCollection, schema, permissions)
+                const dependencyAccess = hasDependencyAccess(relationCollection, schema, permissions, claims)
                 if (!fullCollectionAccess && dependencyAccess.length === 0) return false
             }
 
             return true
         })
-    }, [filters, excludedFilters, fields, permissions, schema])
+    }, [filters, excludedFilters, fields, permissions, schema, claims])
 
     const hasRangeFilter = useMemo(() => {
         return filters.some((filter) => filter.type === "range" && !isPreloadCacheEnabled)
@@ -1820,11 +1822,8 @@ function Collection({
         return schema.collections[collectionName] || collection
     }, [selectedCreateCollection, labels.collection, schema, collection])
 
-    const createRecordTitle = useMemo(() => {
-        return (
-            additionalTitles?.[selectedCreateCollection || labels.collection]?.record ||
-            createCollectionSchema.labels.record
-        )
+    const additionalRecordTitle = useMemo(() => {
+        return additionalTitles?.[selectedCreateCollection || labels.collection]?.record
     }, [createCollectionSchema, additionalTitles, selectedCreateCollection, labels.collection])
 
     const createPrePopulatedRecord = useCallback(() => {
@@ -2778,7 +2777,7 @@ function Collection({
                                                                                         className="font-medium leading-none"
                                                                                     >
                                                                                         Add{" "}
-                                                                                        {createRecordTitle ||
+                                                                                        {additionalRecordTitle ||
                                                                                             recordTitle}
                                                                                     </h4>
                                                                                     <Button

package/src/Filters.tsx

@@ -20,6 +20,7 @@ import {
 } from "@stoker-platform/utils"
 import {
     getCollectionConfigModule,
+    getCurrentUser,
     getCurrentUserPermissions,
     getOne,
     getSchema,
@@ -77,6 +78,7 @@ export function Filters({
     const schema = getSchema()
     const permissions = getCurrentUserPermissions()
     if (!permissions?.Role) throw new Error("PERMISSION_DENIED")
+    const claims = getCurrentUser()?.token.claims ?? {}
     const customization = getCollectionConfigModule(labels.collection)
 
     const { filters, setFilters } = useFilters()
@@ -125,19 +127,22 @@ export function Filters({
     const { offset: keyboardOffset, viewportHeight } = useKeyboardOffset(isMobile && someFilterOpen)
     const sheetHeight = Math.max(240, Math.min(viewportHeight - 16, viewportHeight * 0.9))
 
-    const hasRelationFilterAccess = useCallback((filter: Filter) => {
-        if (filter.type === "status" || filter.type === "range") return false
-        const field = getField(fields, filter.field)
-        if (!field || !isRelationField(field)) return false
-        const relationCollection = schema.collections[field.collection]
-        if (!relationCollection) return false
-        const collectionPermissions = permissions?.collections?.[relationCollection.labels.collection]
-        const fullCollectionAccess = collectionPermissions && collectionAccess("Read", collectionPermissions)
-        const dependencyAccess = hasDependencyAccess(relationCollection, schema, permissions)
-        if (!fullCollectionAccess && dependencyAccess.length === 0) return false
-        if (relationList && relationList.field === filter.field) return false
-        return true
-    }, [])
+    const hasRelationFilterAccess = useCallback(
+        (filter: Filter) => {
+            if (filter.type === "status" || filter.type === "range") return false
+            const field = getField(fields, filter.field)
+            if (!field || !isRelationField(field)) return false
+            const relationCollection = schema.collections[field.collection]
+            if (!relationCollection) return false
+            const collectionPermissions = permissions?.collections?.[relationCollection.labels.collection]
+            const fullCollectionAccess = collectionPermissions && collectionAccess("Read", collectionPermissions)
+            const dependencyAccess = hasDependencyAccess(relationCollection, schema, permissions, claims)
+            if (!fullCollectionAccess && dependencyAccess.length === 0) return false
+            if (relationList && relationList.field === filter.field) return false
+            return true
+        },
+        [permissions, claims, schema],
+    )
 
     useEffect(() => {
         const initialize = async () => {

package/src/Form.tsx

@@ -33,6 +33,7 @@ import {
     tryFunction,
     getInputSchema,
     getField,
+    privateFieldAccess,
     restrictCreateAccess,
     restrictUpdateAccess,
     collectionAccess,
@@ -42,6 +43,7 @@ import {
     addRecord,
     deleteRecord,
     getCollectionConfigModule,
+    getCurrentUser,
     getCurrentUserPermissions,
     getOne,
     updateRecord,
@@ -296,6 +298,7 @@ const RecordFormField = (props: FieldProps) => {
     const customization = getFieldCustomization(field, customizationFile)
     const admin = customization.admin
     const permissions = getCurrentUserPermissions()
+    const userClaims = getCurrentUser()?.token.claims ?? {}
     if (!permissions?.Role) throw new Error("PERMISSION_DENIED")
 
     const [label, setLabel] = useState("")
@@ -402,7 +405,7 @@ const RecordFormField = (props: FieldProps) => {
         return null
     }
 
-    if (operation === "create" && !restrictCreateAccess(field, permissions)) {
+    if (operation === "create" && !restrictCreateAccess(field, permissions, collection.labels.collection, userClaims)) {
         return null
     }
 
@@ -413,7 +416,11 @@ const RecordFormField = (props: FieldProps) => {
     if (operation === "update-many") {
         if ("unique" in field && field.unique) return null
         if (customization?.admin && "readOnly" in customization.admin) return null
-        if ("restrictUpdate" in field && !restrictUpdateAccess(field, permissions)) return null
+        if (
+            "restrictUpdate" in field &&
+            !restrictUpdateAccess(field, permissions, collection.labels.collection, userClaims)
+        )
+            return null
 
         if (collection.auth && field.name === "Role") return null
         if (connectionStatus === "offline" && collection.auth) return null
@@ -425,7 +432,7 @@ const RecordFormField = (props: FieldProps) => {
     const isReadOnly =
         (readOnly && !isRelationField(field)) ||
         (operation === "update" &&
-            (!restrictUpdateAccess(field, permissions) ||
+            (!restrictUpdateAccess(field, permissions, collection.labels.collection, userClaims) ||
                 (collection.auth && field.name === "Role" && record?.User_ID) ||
                 !hasUpdateAccess ||
                 isUpdateDisabled))
@@ -3948,22 +3955,25 @@ function RecordForm({
                     delete values[field.name]
                 }
 
-                if (field.access && permissions?.Role && !field.access.includes(permissions.Role)) {
+                const userClaims = getCurrentUser()?.token.claims ?? {}
+                if (
+                    field.access &&
+                    permissions?.Role &&
+                    !privateFieldAccess(field, permissions, collection, userClaims)
+                ) {
                     delete values[field.name]
                 }
                 if (
                     operation === "create" &&
                     field.restrictCreate &&
-                    (field.restrictCreate === true ||
-                        (permissions?.Role && !field.restrictCreate.includes(permissions.Role)))
+                    !restrictCreateAccess(field, permissions, collection.labels.collection, userClaims)
                 ) {
                     delete values[field.name]
                 }
                 if (
                     operation === "update" &&
                     field.restrictUpdate &&
-                    (field.restrictUpdate === true ||
-                        (permissions?.Role && !field.restrictUpdate.includes(permissions.Role)))
+                    !restrictUpdateAccess(field, permissions, collection.labels.collection, userClaims)
                 ) {
                     delete values[field.name]
                 }
@@ -4568,11 +4578,12 @@ function RecordForm({
         const recordToDuplicate: Partial<StokerRecord> = {}
         for (const field of fields) {
             const fieldCustomization = getFieldCustomization(field, customization)
+            const userClaims = getCurrentUser()?.token.claims ?? {}
             if (
                 field.type !== "Computed" &&
                 !(field.type === "Number" && field.autoIncrement) &&
                 !(collection.auth && field.name === "User_ID") &&
-                restrictCreateAccess(field, permissions) &&
+                restrictCreateAccess(field, permissions, collection.labels.collection, userClaims) &&
                 fieldCustomization.custom?.initialValue === undefined
             ) {
                 recordToDuplicate[field.name] = record[field.name]

package/src/Map.tsx

@@ -11,6 +11,7 @@ import { canUpdateField, getCachedConfigValue, getField, getSystemFieldsSchema }
 import {
     getAppCheck,
     getCollectionConfigModule,
+    getCurrentUser,
     getCurrentUserPermissions,
     onStokerPermissionsChange,
     updateRecord,
@@ -135,6 +136,7 @@ export function Map({
     if (!permissions) {
         throw new Error("PERMISSION_DENIED")
     }
+    const claims = getCurrentUser()?.token.claims ?? {}
     const location = useLocation()
     const [connectionStatus] = useConnection()
     const goToRecord = useGoToRecord()
@@ -221,11 +223,16 @@ export function Map({
             const coordinatesField = mapConfig?.coordinatesField
             if (addressField && fields.map((field) => field.name).includes(addressField)) {
                 const addressFieldSchema = getField(allFields, addressField)
-                const hasAddressUpdateAccess = !!canUpdateField(collection, addressFieldSchema, permissions)
+                const hasAddressUpdateAccess = !!canUpdateField(collection, addressFieldSchema, permissions, claims)
                 setHasLocationUpdateAccess(hasAddressUpdateAccess)
             } else if (coordinatesField && fields.map((field) => field.name).includes(coordinatesField)) {
                 const coordinatesFieldSchema = getField(allFields, coordinatesField)
-                const hasCoordinatesUpdateAccess = !!canUpdateField(collection, coordinatesFieldSchema, permissions)
+                const hasCoordinatesUpdateAccess = !!canUpdateField(
+                    collection,
+                    coordinatesFieldSchema,
+                    permissions,
+                    claims,
+                )
                 setHasLocationUpdateAccess(hasCoordinatesUpdateAccess)
             }