@stoker-platform/web-app 0.5.28 → 0.5.30

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.30
+
+### Patch Changes
+
+- fix: wait for conditional fields to render
+
+## 0.5.29
+
+### Patch Changes
+
+- feat: skip file permissions selection when no optional permissions present
+
 ## 0.5.28
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.28",
+    "version": "0.5.30",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Form.tsx

@@ -301,7 +301,6 @@ const RecordFormField = (props: FieldProps) => {
             setCondition(!!condition)
 
             const [
-                readOnly,
                 label,
                 description,
                 descriptionCondition,
@@ -316,7 +315,6 @@ const RecordFormField = (props: FieldProps) => {
                 isRadio,
                 icon,
             ] = await Promise.all([
-                tryPromise(admin?.readOnly, [operation, record]),
                 tryFunction(admin?.label),
                 tryFunction(admin?.description?.message, [record]),
                 tryPromise(admin?.description?.condition, [record]),
@@ -362,6 +360,10 @@ const RecordFormField = (props: FieldProps) => {
             return
         }
         setCondition(true)
+        setTimeout(() => {
+            const readOnly = tryFunction(admin?.readOnly, [operation, form.getValues()])
+            setReadOnly(!!readOnly)
+        }, 0)
     }, [form.watch()])
 
     const hasUpdateAccess = useMemo(() => {
@@ -2322,6 +2324,36 @@ function RecordForm({
         [collectionPath, record, path],
     )
 
+    const getUserRoleAssignment = useCallback(() => {
+        const userRole = permissions?.Role
+        if (!userRole) return null
+        // eslint-disable-next-line security/detect-object-injection
+        const assignment = collection.access?.files?.assignment?.[userRole]
+        return assignment || null
+    }, [collection, permissions])
+
+    const shouldSkipPermissionsDialog = useCallback(() => {
+        const assignment = getUserRoleAssignment()
+        if (!assignment) return false
+        const optional = assignment.optional || {}
+        const hasOptional = Boolean(
+            (optional.read && optional.read.length) ||
+            (optional.update && optional.update.length) ||
+            (optional.delete && optional.delete.length),
+        )
+        return !hasOptional
+    }, [getUserRoleAssignment])
+
+    const getDefaultPermissions = useCallback((): FilePermissions => {
+        const assignment = getUserRoleAssignment()
+        const required = assignment?.required || {}
+        return {
+            read: (required.read || []).join(","),
+            update: (required.update || []).join(","),
+            delete: (required.delete || []).join(","),
+        }
+    }, [getUserRoleAssignment])
+
     const uploadFilesToRecord = useCallback(
         async (targetId: string, files: File[] | FileList, permissions: FilePermissions, customFilename?: string) => {
             if (!files || !currentUser) return
@@ -2407,56 +2439,6 @@ function RecordForm({
         [computeBasePath, currentUser, path, record],
     )
 
-    const enqueueImageForCreate = useCallback((fieldName: string, file: File) => {
-        setPermissionsContext("image-create")
-        setPendingImageFieldName(fieldName)
-        setPendingUploadFile(file)
-        setPendingUploadField(fieldName)
-        setEditingFilename(file.name)
-        setIsMultipleFileUpload(false)
-        setShowPermissionsDialog(true)
-    }, [])
-
-    const uploadImageForUpdate = useCallback(async (fieldName: string, file: File) => {
-        return await new Promise<void>((resolve) => {
-            setPermissionsContext("image-update")
-            setPendingImageForUpdate({ fieldName, file })
-            setEditingFilename(file.name)
-            setIsMultipleFileUpload(false)
-            setShowPermissionsDialog(true)
-            setImageUpdateResolver(() => resolve)
-        })
-    }, [])
-
-    const handleFormFileUpload = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
-        const files = event.target.files
-        if (!files) return
-        if (files.length === 1) {
-            const file = files[0]
-            setPendingUploadFile(file)
-            setPendingUploadField(null)
-            setEditingFilename(file.name)
-            setIsMultipleFileUpload(false)
-            setShowFilenameDialog(true)
-        } else {
-            setPendingUploadFiles(Array.from(files))
-            setIsMultipleFileUpload(true)
-            setShowPermissionsDialog(true)
-        }
-        event.target.value = ""
-    }, [])
-
-    const handleConfirmFilename = useCallback(() => {
-        if (!pendingUploadFile) return
-        const trimmed = editingFilename.trim()
-        const validationError = validateStorageName(trimmed)
-        if (validationError) {
-            toast({ title: "Invalid file name", description: validationError, variant: "destructive" })
-            return
-        }
-        setShowPermissionsDialog(true)
-    }, [pendingUploadFile, editingFilename])
-
     const handlePermissionsConfirm = useCallback(
         async (selectedPermissions: FilePermissions) => {
             if (permissionsContext === "files") {
@@ -2620,6 +2602,91 @@ function RecordForm({
         ],
     )
 
+    const enqueueImageForCreate = useCallback(
+        (fieldName: string, file: File) => {
+            if (shouldSkipPermissionsDialog()) {
+                setQueuedImageUploads((prev) => ({
+                    ...prev,
+                    [fieldName]: { file, permissions: getDefaultPermissions() },
+                }))
+            } else {
+                setPermissionsContext("image-create")
+                setPendingImageFieldName(fieldName)
+                setPendingUploadFile(file)
+                setEditingFilename(file.name)
+                setIsMultipleFileUpload(false)
+                setShowPermissionsDialog(true)
+            }
+        },
+        [shouldSkipPermissionsDialog, getDefaultPermissions],
+    )
+
+    const uploadImageForUpdate = useCallback(
+        async (fieldName: string, file: File) => {
+            return await new Promise<void>((resolve) => {
+                setPermissionsContext("image-update")
+                setPendingImageForUpdate({ fieldName, file })
+                setEditingFilename(file.name)
+                setIsMultipleFileUpload(false)
+                setImageUpdateResolver(() => resolve)
+                if (shouldSkipPermissionsDialog()) {
+                    setTimeout(() => handlePermissionsConfirm(getDefaultPermissions()), 0)
+                } else {
+                    setShowPermissionsDialog(true)
+                }
+            })
+        },
+        [shouldSkipPermissionsDialog, getDefaultPermissions, handlePermissionsConfirm],
+    )
+
+    const handleFormFileUpload = useCallback(
+        async (event: React.ChangeEvent<HTMLInputElement>) => {
+            const files = event.target.files
+            if (!files) return
+            if (files.length === 1) {
+                const file = files[0]
+                setPendingUploadFile(file)
+                setPendingUploadField(null)
+                setEditingFilename(file.name)
+                setIsMultipleFileUpload(false)
+                setShowFilenameDialog(true)
+            } else {
+                const fileList = Array.from(files)
+                if (shouldSkipPermissionsDialog()) {
+                    setQueuedUploads((prev) => [...prev, { files: fileList, permissions: getDefaultPermissions() }])
+                } else {
+                    setPendingUploadFiles(fileList)
+                    setIsMultipleFileUpload(true)
+                    setShowPermissionsDialog(true)
+                }
+            }
+            event.target.value = ""
+        },
+        [shouldSkipPermissionsDialog, getDefaultPermissions],
+    )
+
+    const handleConfirmFilename = useCallback(() => {
+        if (!pendingUploadFile) return
+        const trimmed = editingFilename.trim()
+        const validationError = validateStorageName(trimmed)
+        if (validationError) {
+            toast({ title: "Invalid file name", description: validationError, variant: "destructive" })
+            return
+        }
+        if (shouldSkipPermissionsDialog()) {
+            setQueuedUploads((prev) => [
+                ...prev,
+                { files: [pendingUploadFile], permissions: getDefaultPermissions(), customFilename: trimmed },
+            ])
+            setShowFilenameDialog(false)
+            setPendingUploadFile(null)
+            setPendingUploadField(null)
+            setEditingFilename("")
+        } else {
+            setShowPermissionsDialog(true)
+        }
+    }, [pendingUploadFile, editingFilename, shouldSkipPermissionsDialog, getDefaultPermissions])
+
     const handlePermissionsCancel = useCallback(() => {
         if (permissionsContext === "image-create" && pendingImageFieldName) {
             setTimeout(() => {
@@ -3388,19 +3455,21 @@ function RecordForm({
             }
         }
 
-        if (isInitialized && (operation === "create" || operation === "update") && customization.admin?.onChange) {
-            tryPromise(customization.admin.onChange, [
-                operation,
-                cloneDeep(formValues) as StokerRecord,
-                prevState as StokerRecord,
-            ]).then((updatedRecord: StokerRecord) => {
-                if (updatedRecord && !isEqual(updatedRecord, formValues)) {
-                    Object.entries(updatedRecord).forEach(([key, value]) => {
-                        form.setValue(key, value)
-                    })
-                }
-            })
-        }
+        setTimeout(() => {
+            if (isInitialized && (operation === "create" || operation === "update") && customization.admin?.onChange) {
+                tryPromise(customization.admin.onChange, [
+                    operation,
+                    cloneDeep(form.getValues()) as StokerRecord,
+                    prevState as StokerRecord,
+                ]).then((updatedRecord: StokerRecord) => {
+                    if (updatedRecord && !isEqual(updatedRecord, formValues)) {
+                        Object.entries(updatedRecord).forEach(([key, value]) => {
+                            form.setValue(key, value)
+                        })
+                    }
+                })
+            }
+        }, 0)
     }, [form.watch()])
 
     const recordLoaded = useRef(false)

package/src/utils/getFormattedFieldValue.tsx

@@ -79,7 +79,7 @@ export const getFormattedFieldValue = (
         if (badge) {
             if (badge === true) {
                 return (
-                    <Badge variant="outline" className="text-center">
+                    <Badge variant="outline" className="text-xs text-center">
                         {value}
                     </Badge>
                 )