@stoker-platform/web-app 0.5.209 → 0.5.211

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @stoker-platform/web-app
 
+## 0.5.211
+
+### Patch Changes
+
+- perf: improve Record page performance
+
+## 0.5.210
+
+### Patch Changes
+
+- feat: improve assigment behaviour
+- feat: enable clipboard write access in CSP
+- Updated dependencies
+    - @stoker-platform/web-client@0.5.86
+    - @stoker-platform/node-client@0.5.82
+    - @stoker-platform/utils@0.5.73
+
 ## 0.5.209
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.209",
+    "version": "0.5.211",
     "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.81",
-        "@stoker-platform/utils": "0.5.72",
-        "@stoker-platform/web-client": "0.5.85",
+        "@stoker-platform/node-client": "0.5.82",
+        "@stoker-platform/utils": "0.5.73",
+        "@stoker-platform/web-client": "0.5.86",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Images.tsx

@@ -15,9 +15,10 @@ import {
     getCollectionConfigModule,
     getCurrentUserPermissions,
     onStokerPermissionsChange,
+    onStokerSignOut,
     subscribeOne,
 } from "@stoker-platform/web-client"
-import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card"
 import { useGoToRecord } from "./utils/goToRecord"
 import { LoadingSpinner } from "./components/ui/loading-spinner"
@@ -118,6 +119,54 @@ interface RowProps {
     data: RowData
 }
 
+const pendingAssign = new Map<string, boolean>()
+const assignQueue = new Map<string, Promise<unknown>>()
+const assignSettledAt = new Map<string, number>()
+const assignListeners = new Set<() => void>()
+let assignVersion = 0
+
+const ASSIGN_SETTLE_MS = 3000
+
+const notifyAssign = () => {
+    assignVersion++
+    assignListeners.forEach((listener) => listener())
+}
+
+const subscribeAssign = (listener: () => void) => {
+    assignListeners.add(listener)
+    return () => {
+        assignListeners.delete(listener)
+    }
+}
+
+let setAssignGlobalLoading: (operation: "+" | "-", id: string, server?: boolean, cache?: boolean) => void | undefined
+
+onStokerSignOut(() => {
+    pendingAssign.clear()
+    assignQueue.clear()
+    assignSettledAt.clear()
+    assignListeners.clear()
+    assignVersion = 0
+})
+
+const assignKey = (recordId: string, parentId: string) => `${recordId}:${parentId}`
+
+const enqueueAssign = (recordId: string, call: () => Promise<unknown>) => {
+    const wasIdle = !assignQueue.has(recordId)
+    if (wasIdle) setAssignGlobalLoading?.("+", recordId)
+    const next = (assignQueue.get(recordId) ?? Promise.resolve()).catch(() => undefined).then(call)
+    assignQueue.set(recordId, next)
+    next.finally(() => {
+        if (assignQueue.get(recordId) === next) {
+            assignQueue.delete(recordId)
+            assignSettledAt.set(recordId, Date.now())
+            setAssignGlobalLoading?.("-", recordId)
+            setTimeout(notifyAssign, ASSIGN_SETTLE_MS + 50)
+        }
+    })
+    return next
+}
+
 const Row = ({ index, style, data }: RowProps) => {
     const goToRecord = useGoToRecord()
     const {
@@ -138,42 +187,85 @@ const Row = ({ index, style, data }: RowProps) => {
     const group = groupedRecords[index]
     const customization = getCollectionConfigModule(collection.labels.collection)
     const { setGlobalLoading } = useGlobalLoading()
+    setAssignGlobalLoading = setGlobalLoading
     const { toast } = useToast()
-
-    const [checkedDisabled, setCheckedDisabled] = useState(false)
-
-    const handleCheckedChange = useCallback(async (checked: boolean, record: StokerRecord) => {
-        if (!relationCollection) return
-        setCheckedDisabled(true)
-        setGlobalLoading("+", record.id, true)
-        await callFunction(
-            `stoker-assign${relationCollection.labels.record.toLowerCase()}${collection.labels.collection.toLowerCase()}`,
-            {
-                operation: checked ? "add" : "remove",
-                parentId: relationParent?.id,
-                recordId: record.id,
-            },
-        ).catch(() => {
-            toast({
-                title: "Error",
-                description: `Error assigning ${collection.labels.record} to ${relationCollection.labels.record}`,
-                variant: "destructive",
-                duration: 10000000,
-            })
-        })
-        setGlobalLoading("-", record.id, true)
-        setCheckedDisabled(false)
-    }, [])
+    useSyncExternalStore(subscribeAssign, () => assignVersion)
+
+    useEffect(() => {
+        if (!relationParent || !relationList?.field) return
+        let changed = false
+        for (const record of group) {
+            const key = assignKey(record.id, relationParent.id)
+            const pending = pendingAssign.get(key)
+            if (pending === undefined || assignQueue.has(record.id)) continue
+            const settledAt = assignSettledAt.get(record.id) ?? 0
+            if (Date.now() - settledAt < ASSIGN_SETTLE_MS) continue
+            // eslint-disable-next-line security/detect-object-injection
+            const serverChecked = !!record[relationList.field]?.[relationParent.id]
+            if (pending === serverChecked) {
+                pendingAssign.delete(key)
+                assignSettledAt.delete(record.id)
+                changed = true
+            }
+        }
+        if (changed) notifyAssign()
+    }, [group, relationParent, relationList?.field, assignVersion])
+
+    const handleCheckedChange = useCallback(
+        (checked: boolean, record: StokerRecord) => {
+            if (!relationCollection || !relationList?.field || !relationParent) return
+
+            const key = assignKey(record.id, relationParent.id)
+            pendingAssign.set(key, checked)
+            notifyAssign()
+
+            enqueueAssign(record.id, () =>
+                callFunction(
+                    `stoker-assign${relationCollection.labels.record.toLowerCase()}${collection.labels.collection.toLowerCase()}`,
+                    {
+                        operation: checked ? "add" : "remove",
+                        parentId: relationParent.id,
+                        recordId: record.id,
+                    },
+                ).catch(() => {
+                    if (pendingAssign.get(key) === checked) {
+                        pendingAssign.delete(key)
+                        notifyAssign()
+                    }
+                    toast({
+                        title: "Error",
+                        description: `Error assigning ${collection.labels.record} to ${relationCollection.labels.record}`,
+                        variant: "destructive",
+                        duration: 10000000,
+                    })
+                }),
+            )
+        },
+        [
+            relationCollection,
+            relationList?.field,
+            relationParent,
+            collection.labels.collection,
+            collection.labels.record,
+            toast,
+        ],
+    )
 
     return (
         <div style={style} className={cn("grid", "gap-4", "pb-4", cols)}>
             {group.map((record) => {
                 // eslint-disable-next-line security/detect-object-injection
                 const title = recordTitleField ? record[recordTitleField] : record.id
+                const pending =
+                    isAssigning && relationParent
+                        ? pendingAssign.get(assignKey(record.id, relationParent.id))
+                        : undefined
                 const checked =
                     isAssigning && relationList?.field && relationParent
-                        ? !!record[relationList.field]?.[relationParent.id]
+                        ? // eslint-disable-next-line security/detect-object-injection
+                          (pending ?? !!record[relationList.field]?.[relationParent.id])
                         : undefined
+                const hasPending = pending !== undefined
                 let unavailable
                 if (isAssigning) {
                     if (assignable?.unavailableField) {
@@ -258,17 +350,17 @@ const Row = ({ index, style, data }: RowProps) => {
                                             }),
                                             hooks: import.meta.glob("./hooks/*.{ts,tsx}", { eager: true }),
                                             utils: import.meta.glob("./lib/*.{ts,tsx}", { eager: true }),
+                                            setGlobalLoading,
                                         })}
                                     </div>
                                 )}
-                            {isAssigning && assignable && (assignable.isAvailable(record) || checked) && (
+                            {isAssigning && assignable && (assignable.isAvailable(record) || checked || hasPending) && (
                                 <div className="pb-4">
                                     <div className="flex items-center justify-center space-x-3 min-h-8">
                                         <Switch
                                             id={`${record.id}-assigned`}
                                             className="data-[state=checked]:bg-blue-500"
                                             checked={checked}
-                                            disabled={checkedDisabled}
                                             onCheckedChange={(checked) => handleCheckedChange(checked, record)}
                                         />
                                         {imagesConfig.size !== "sm" && (
@@ -277,13 +369,17 @@ const Row = ({ index, style, data }: RowProps) => {
                                     </div>
                                 </div>
                             )}
-                            {isAssigning && assignable && !assignable.isAvailable(record) && !checked && (
-                                <div className="pb-4">
-                                    <div className="flex items-center justify-center space-x-3 min-h-8">
-                                        {unavailable}
+                            {isAssigning &&
+                                assignable &&
+                                !assignable.isAvailable(record) &&
+                                !checked &&
+                                !hasPending && (
+                                    <div className="pb-4">
+                                        <div className="flex items-center justify-center space-x-3 min-h-8">
+                                            {unavailable}
+                                        </div>
                                     </div>
-                                </div>
-                            )}
+                                )}
                             <div className={cn("grid", "gap-4", size)}>
                                 {record[imagesConfig.imageField] ? (
                                     <CopyImageOverlay src={record[imagesConfig.imageField]} className="w-full h-full">

package/src/Record.tsx

@@ -36,6 +36,10 @@ import { Breadcrumbs } from "./Breadcrumbs"
 import { Separator } from "./components/ui/separator"
 import { loadAssigning } from "./utils/relationListFiltersState"
 
+const customPageComponents = import.meta.glob("./components/ui/*.tsx", { eager: true })
+const customPageHooks = import.meta.glob("./hooks/*.{ts,tsx}", { eager: true })
+const customPageUtils = import.meta.glob("./lib/*.{ts,tsx}", { eager: true })
+
 export const Record = ({ collection }: { collection: CollectionSchema }) => {
     const { labels, fields, recordTitleField } = collection
     const { path: pathString, id } = useParams()
@@ -207,7 +211,9 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                     </Button>
                 </Card>
                 <Card className="flex items-center gap-2 h-12 min-w-[300px] p-5">
-                    <div>{icon ? createElement(icon) : null}</div>
+                    <div className="flex size-6 shrink-0 items-center justify-center">
+                        {icon ? createElement(icon) : null}
+                    </div>
                     <h1 className="truncate">{recordTitle}</h1>
                 </Card>
             </header>
@@ -346,11 +352,9 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                                                     {createElement(page.component, {
                                                         record,
                                                         collection,
-                                                        components: import.meta.glob("./components/ui/*.tsx", {
-                                                            eager: true,
-                                                        }),
-                                                        hooks: import.meta.glob("./hooks/*.{ts,tsx}", { eager: true }),
-                                                        utils: import.meta.glob("./lib/*.{ts,tsx}", { eager: true }),
+                                                        components: customPageComponents,
+                                                        hooks: customPageHooks,
+                                                        utils: customPageUtils,
                                                         ...page.props,
                                                     })}
                                                 </main>

package/src/utils/getRelationFields.ts

@@ -30,7 +30,7 @@ export const getRelationFields = (collection: CollectionSchema) => {
         if (refs.length === 0) continue
         const titleField = field.titleField
         if (
-            (!fieldCustomization.admin?.condition?.form || condition) &&
+            (fieldCustomization.admin?.condition?.form === undefined || condition) &&
             (!(titleField && field.includeFields?.includes(titleField)) || queryFullRecord)
         ) {
             relationFields.push(field.name)