@stoker-platform/web-app 0.5.57 → 0.5.59

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @stoker-platform/web-app
 
+## 0.5.59
+
+### Patch Changes
+
+- feat: improve permissions change logic
+- Updated dependencies
+    - @stoker-platform/web-client@0.5.36
+
+## 0.5.58
+
+### Patch Changes
+
+- feat: improve list metrics layout
+
 ## 0.5.57
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.57",
+    "version": "0.5.59",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -53,7 +53,7 @@
         "@sentry/react": "^10.47.0",
         "@stoker-platform/node-client": "0.5.38",
         "@stoker-platform/utils": "0.5.32",
-        "@stoker-platform/web-client": "0.5.35",
+        "@stoker-platform/web-client": "0.5.36",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Collection.tsx

@@ -14,6 +14,7 @@ import {
     RelationField,
     RelationList,
     StokerCollection,
+    StokerPermissions,
     StokerRecord,
     StokerRole,
 } from "@stoker-platform/types"
@@ -30,6 +31,7 @@ import {
     GetSomeOptions,
     getTimezone,
     keepTimezone,
+    onStokerPermissionsChange,
     onStokerSignOut,
     subscribeMany,
     SubscribeManyOptions,
@@ -153,7 +155,7 @@ function Collection({
     const schema = getSchema()
     const customization = getCollectionConfigModule(labels.collection)
     const timezone = getTimezone()
-    const permissions = getCurrentUserPermissions()
+    const [permissions, setPermissions] = useState<StokerPermissions | null>(() => getCurrentUserPermissions())
     if (!permissions?.Role) throw new Error("PERMISSION_DENIED")
     const { toast } = useToast()
 
@@ -236,6 +238,13 @@ function Collection({
 
     const preventChange = isRouteLoadingImmediate.has(location.pathname)
 
+    useEffect(() => {
+        const unsubscribe = onStokerPermissionsChange(() => {
+            setPermissions(getCurrentUserPermissions())
+        })
+        return unsubscribe
+    }, [])
+
     const onTabChange = useCallback((value: string) => {
         Object.values(unsubscribe.current).forEach((unsubscribe) => unsubscribe.forEach((unsubscribe) => unsubscribe()))
         unsubscribe.current = {}
@@ -1333,7 +1342,7 @@ function Collection({
     }, [calendarConfig, schema])
 
     const canAddRecords =
-        permissions.collections?.[labels.collection].operations.includes("Create") &&
+        permissions.collections?.[labels.collection]?.operations.includes("Create") &&
         !hasEntityRestrictions.some((entityRestriction) => entityRestriction.type === "Individual") &&
         !disableCreate
     const isCreateDisabled = getConnectionStatus() === "Offline" && (isOfflineDisabled || serverWriteOnly)
@@ -1641,6 +1650,8 @@ function Collection({
         [recordTitle],
     )
 
+    if (!permissions.collections?.[labels.collection]) return null
+
     return (
         !collection.singleton && (
             <>
@@ -1895,7 +1906,7 @@ function Collection({
                                                     (action) => !action.condition || action.condition(),
                                                 ) ? (
                                                     <DropdownMenu>
-                                                        <DropdownMenuTrigger>
+                                                        <DropdownMenuTrigger asChild>
                                                             <Button
                                                                 type="button"
                                                                 size="sm"

package/src/List.tsx

@@ -1320,8 +1320,9 @@ export function List({
                 >
                     <CardContent>
                         {metrics && hasMetrics && !relationList && (
-                            <div className="hidden lg:flex flex-row gap-4 mb-4 mt-4">
+                            <div className="hidden lg:flex flex-row gap-4 mb-4 mt-4 max-w-[calc(100vw-96px)]">
                                 {metrics.map((metric: Metric | Chart, index: number) => {
+                                    const hideThirdMetric = index >= 2 ? "hidden xl:grid" : undefined
                                     if (
                                         permissions?.Role &&
                                         (!metric.roles || metric.roles.includes(permissions?.Role))
@@ -1337,7 +1338,7 @@ export function List({
                                             return (
                                                 <div
                                                     key={`metric-${index}`}
-                                                    className="grid gap-3 place-content-center"
+                                                    className={cn("grid gap-3 place-content-center", hideThirdMetric)}
                                                 >
                                                     <Card className="p-4 pt-6 pb-6 h-[175px] min-w-[175px] flex flex-col place-content-center items-center bg-blue-500 dark:bg-blue-500/50 text-primary-foreground dark:text-primary">
                                                         <div className="relative bottom-2">

package/src/utils/runViewTransition.ts

@@ -2,12 +2,17 @@ import { flushSync } from "react-dom"
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const runViewTransition = (callback: () => any) => {
-    if (document.startViewTransition) {
-        document.startViewTransition(() => {
-            flushSync(() => {
-                callback()
+    if (document.startViewTransition && document.visibilityState === "visible") {
+        try {
+            const transition = document.startViewTransition(() => {
+                flushSync(() => {
+                    callback()
+                })
             })
-        })
+            transition.finished.catch(() => {})
+        } catch {
+            callback()
+        }
     } else {
         callback()
     }