@stoker-platform/web-app 0.5.97 → 0.5.99

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @stoker-platform/web-app
 
+## 0.5.99
+
+### Patch Changes
+
+- Updated dependencies
+    - @stoker-platform/node-client@0.5.56
+
+## 0.5.98
+
+### Patch Changes
+
+- feat: add titles context parameter
+    - @stoker-platform/node-client@0.5.55
+    - @stoker-platform/utils@0.5.47
+    - @stoker-platform/web-client@0.5.56
+
 ## 0.5.97
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.97",
+    "version": "0.5.99",
     "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.50.0",
-        "@stoker-platform/node-client": "0.5.54",
-        "@stoker-platform/utils": "0.5.46",
-        "@stoker-platform/web-client": "0.5.55",
+        "@stoker-platform/node-client": "0.5.56",
+        "@stoker-platform/utils": "0.5.47",
+        "@stoker-platform/web-client": "0.5.56",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Calendar.tsx

@@ -394,7 +394,7 @@ export function Calendar({
             ])) as CalendarConfig
             setCalendarConfig(calendarConfig)
             const titles = await getCachedConfigValue(customization, [...collectionAdminPath, "titles"])
-            setCollectionTitle(titles?.collection)
+            setCollectionTitle(titles?.collection || labels.collection)
             const meta = await getCachedConfigValue(customization, [...collectionAdminPath, "meta"])
             setMeta(meta)
             const originalRangeFilter = filters.find((filter) => filter.type === "range")
@@ -1039,9 +1039,9 @@ export function Calendar({
 
     return (
         <>
-            {!formList && (
+            {!formList && (meta?.title || collectionTitle) && (
                 <Helmet>
-                    <title>{`${meta?.title || collectionTitle || labels.collection} - Calendar`}</title>
+                    <title>{`${meta?.title || collectionTitle || ""} - Calendar`}</title>
                     {meta?.description && <meta name="description" content={meta.description} />}
                 </Helmet>
             )}

package/src/Cards.tsx

@@ -1371,7 +1371,7 @@ export function Cards({
             ])
             setIsOfflineDisabled(offlineDisabled)
             const titles = await getCachedConfigValue(customization, [...collectionAdminPath, "titles"])
-            setCollectionTitle(titles?.collection)
+            setCollectionTitle(titles?.collection || labels.collection)
             const meta = await getCachedConfigValue(customization, [...collectionAdminPath, "meta"])
             setMeta(meta)
             const cardsConfig = await getCachedConfigValue(customization, [...collectionAdminPath, "cards"])
@@ -1510,9 +1510,9 @@ export function Cards({
 
     return (
         <>
-            {!formList && (
+            {!formList && (meta?.title || collectionTitle) && (
                 <Helmet>
-                    <title>{`${meta?.title || collectionTitle || labels.collection} - Board`}</title>
+                    <title>{`${meta?.title || collectionTitle || ""} - Board`}</title>
                     {meta?.description && <meta name="description" content={meta.description} />}
                 </Helmet>
             )}

package/src/Files.tsx

@@ -847,10 +847,12 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
 
     return (
         <>
-            <Helmet>
-                <title>{`${meta?.title || collectionTitle || labels.collection} - Files`}</title>
-                {meta?.description && <meta name="description" content={meta.description} />}
-            </Helmet>
+            {(meta?.title || collectionTitle) && (
+                <Helmet>
+                    <title>{`${meta?.title || collectionTitle || ""} - Files`}</title>
+                    {meta?.description && <meta name="description" content={meta.description} />}
+                </Helmet>
+            )}
 
             <div className="flex items-center space-x-2 mb-4">
                 {currentPath && (

package/src/Form.tsx

@@ -56,7 +56,17 @@ import {
     getFiles,
     getTenant,
 } from "@stoker-platform/web-client"
-import { createElement, forwardRef, startTransition, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import {
+    createElement,
+    forwardRef,
+    startTransition,
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react"
 import { useNavigate, useParams } from "react-router"
 import { createPortal } from "react-dom"
 import isEqual from "lodash/isEqual.js"
@@ -337,7 +347,6 @@ const RecordFormField = (props: FieldProps) => {
                 tryPromise(admin?.icon),
             ])
 
-            setReadOnly(!!readOnly)
             setLabel(label || field.name)
             if (!(admin?.description?.condition && !descriptionCondition)) {
                 setDescription(description)
@@ -354,6 +363,8 @@ const RecordFormField = (props: FieldProps) => {
             setIsButtonGroup(!!isButtonGroup)
             setIcon(icon)
             // Prevent button and rich text editor from flickering
+            const initialReadOnly = tryFunction(admin?.readOnly, [operation, record])
+            setReadOnly(!!initialReadOnly)
             setTimeout(() => {
                 setIsFormReady((prevState) => prevState + 1)
             }, 100)
@@ -1660,7 +1671,7 @@ const RichTextEditor = forwardRef<
     const containerRef = useRef<HTMLDivElement>(null)
     const initializedRef = useRef(false)
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (!initializedRef.current) return
         if (ref && typeof ref === "object" && ref.current) {
             const quill = ref.current
@@ -1673,7 +1684,7 @@ const RichTextEditor = forwardRef<
         }
     }, [ref, formField.value])
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         const container = containerRef.current
         if (!container) return
         initializedRef.current = false
@@ -1736,7 +1747,7 @@ const RichTextEditor = forwardRef<
         }
     }, [ref])
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (ref && typeof ref === "object" && ref.current) {
             ref.current.enable(!readOnly && !isDisabled)
             const container = containerRef.current
@@ -2431,6 +2442,7 @@ function RecordForm({
     const [hidden, setHidden] = useState(false)
     const [collectionTitle, setCollectionTitle] = useState("")
     const [allTitles, setAllTitles] = useState<Record<StokerCollection, string>>({})
+    const [permissionsTitles, setPermissionsTitles] = useState<Record<StokerCollection, string>>({})
     const [allRecordTitles, setAllRecordTitles] = useState<Record<StokerCollection, string>>({})
     const [recordTitle, setRecordTitle] = useState(undefined)
     const [meta, setMeta] = useState<CollectionMeta | undefined>(undefined)
@@ -3570,8 +3582,15 @@ function RecordForm({
                 ])
                 return { collection, titles: collectionTitles }
             })
+            const permissionTitlePromises = Object.values(schema.collections).map(async (collection) => {
+                const collectionCustomization = getCollectionConfigModule(collection.labels.collection)
+                const collectionTitles = await tryPromise(collectionCustomization.admin?.titles, ["permissions"])
+                return { collection, titles: collectionTitles }
+            })
 
             const collectionTitleResults = await Promise.all(collectionTitlePromises)
+            const permissionTitleResults = await Promise.all(permissionTitlePromises)
+
             collectionTitleResults.forEach(({ collection, titles: collectionTitles }) => {
                 setAllTitles((prev) => ({
                     ...prev,
@@ -3588,6 +3607,12 @@ function RecordForm({
                     }))
                 }
             })
+            permissionTitleResults.forEach(({ collection, titles: collectionTitles }) => {
+                setPermissionsTitles((prev) => ({
+                    ...prev,
+                    [collection.labels.collection]: collectionTitles?.collection || collection.labels.collection,
+                }))
+            })
 
             if (operation === "create" && offlinePersistenceType && ["ALL", "WRITE"].includes(offlinePersistenceType)) {
                 const draft = localStorage.getItem(`stoker-draft-${labels.collection}`)
@@ -4478,10 +4503,12 @@ function RecordForm({
 
     return (
         <>
-            <Helmet>
-                <title>{`${meta?.title || collectionTitle || labels.collection} - Edit`}</title>
-                {meta?.description && <meta name="description" content={meta.description} />}
-            </Helmet>
+            {(meta?.title || collectionTitle) && (
+                <Helmet>
+                    <title>{`${meta?.title || collectionTitle || ""} - Edit`}</title>
+                    {meta?.description && <meta name="description" content={meta.description} />}
+                </Helmet>
+            )}
             {operation === "update" && record && hasBreadcrumbs && (
                 <>
                     <Breadcrumbs breadcrumbs={breadcrumbs} collection={collection} record={record} />
@@ -4667,7 +4694,7 @@ function RecordForm({
                                                         }
                                                     >
                                                         <FormLabel className="text-primary">
-                                                            {allTitles[permissionsCollection.labels.collection]}
+                                                            {permissionsTitles[permissionsCollection.labels.collection]}
                                                         </FormLabel>
                                                         <div className="flex flex-row gap-3 mt-2">
                                                             {permissionsCollection.access.auth?.includes(role) &&
@@ -4844,12 +4871,12 @@ function RecordForm({
                                                                                         restriction.type ===
                                                                                         "Record_Owner"
                                                                                     ) {
-                                                                                        label = `Can only access own ${allTitles[permissionsCollection.labels.collection]}`
+                                                                                        label = `Can only access own ${permissionsTitles[permissionsCollection.labels.collection]}`
                                                                                     } else if (
                                                                                         restriction.type ===
                                                                                         "Record_User"
                                                                                     ) {
-                                                                                        label = `Can only access assigned ${allTitles[permissionsCollection.labels.collection]}`
+                                                                                        label = `Can only access assigned ${permissionsTitles[permissionsCollection.labels.collection]}`
                                                                                     } else if (
                                                                                         restriction.type ===
                                                                                         "Record_Property"

package/src/Images.tsx

@@ -522,7 +522,7 @@ export const Images = memo(
                 const imagesConfig = await getCachedConfigValue(customization, [...collectionAdminPath, "images"])
                 setImagesConfig(imagesConfig)
                 const titles = await getCachedConfigValue(customization, [...collectionAdminPath, "titles"])
-                setCollectionTitle(titles?.collection)
+                setCollectionTitle(titles?.collection || labels.collection)
                 const meta = await getCachedConfigValue(customization, [...collectionAdminPath, "meta"])
                 setMeta(meta)
                 setCursor({})
@@ -780,7 +780,7 @@ export const Images = memo(
 
         const Meta = () => (
             <Helmet>
-                <title>{`${meta?.title || collectionTitle || labels.collection} - Photos`}</title>
+                <title>{`${meta?.title || collectionTitle || ""} - Photos`}</title>
                 {meta?.description && <meta name="description" content={meta.description} />}
             </Helmet>
         )
@@ -811,7 +811,7 @@ export const Images = memo(
                               : "",
                     )}
                 >
-                    {!formList && <Meta />}
+                    {!formList && (meta?.title || collectionTitle) && <Meta />}
                     <List
                         height={height}
                         width="100%"
@@ -836,7 +836,7 @@ export const Images = memo(
                               : "",
                     )}
                 >
-                    {!formList && <Meta />}
+                    {!formList && (meta?.title || collectionTitle) && <Meta />}
                     <InfiniteLoader
                         isItemLoaded={(index) => index < itemCount}
                         itemCount={100000}

package/src/List.tsx

@@ -232,7 +232,7 @@ export function List({
         const metrics = await getCachedConfigValue(customization, [...collectionAdminPath, "metrics"])
         setMetrics(metrics)
         const titles = await getCachedConfigValue(customization, [...collectionAdminPath, "titles"])
-        setCollectionTitle(titles?.collection)
+        setCollectionTitle(titles?.collection || labels.collection)
         const meta = await getCachedConfigValue(customization, [...collectionAdminPath, "meta"])
         setMeta(meta)
         const rowHighlight = await getCachedConfigValue(customization, [...collectionAdminPath, "rowHighlight"])
@@ -1319,9 +1319,9 @@ export function List({
 
     return (
         <>
-            {!formList && (
+            {!formList && (meta?.title || collectionTitle) && (
                 <Helmet>
-                    <title>{`${meta?.title || collectionTitle || labels.collection} - List`}</title>
+                    <title>{`${meta?.title || collectionTitle || ""} - List`}</title>
                     {meta?.description && <meta name="description" content={meta.description} />}
                 </Helmet>
             )}
@@ -1349,8 +1349,7 @@ export function List({
                                             metric.type === "count" ||
                                             metric.type === "custom"
                                         ) {
-                                            const metricTitle =
-                                                metric.title || `Total ${collectionTitle || labels.collection}`
+                                            const metricTitle = metric.title || `Total ${collectionTitle}`
                                             return (
                                                 <div
                                                     key={`metric-${index}`}
@@ -1385,8 +1384,7 @@ export function List({
                                             )
                                         }
                                         if (metric.type === "area") {
-                                            const metricTitle =
-                                                metric.title || `${collectionTitle || labels.collection} Over Time`
+                                            const metricTitle = metric.title || `${collectionTitle} Over Time`
                                             const metricField1 = metric.metricField1
                                                 ? getField(fields, metric.metricField1)
                                                 : undefined
@@ -1635,7 +1633,7 @@ export function List({
                                                     <div className="space-y-2">
                                                         <div className="flex justify-between items-center mb-4">
                                                             <h4 id="dialog-title" className="font-medium leading-none">
-                                                                Update {collectionTitle || labels.collection}
+                                                                Update {collectionTitle}
                                                             </h4>
                                                             <Button
                                                                 type="button"

package/src/Map.tsx

@@ -201,7 +201,7 @@ export function Map({
             const recordTitle = await getCachedConfigValue(customization, [...collectionAdminPath, "titles", "record"])
             setRecordTitle(recordTitle || labels.record)
             const titles = await getCachedConfigValue(customization, [...collectionAdminPath, "titles"])
-            setCollectionTitle(titles?.collection)
+            setCollectionTitle(titles?.collection || labels.collection)
             const mapConfig = await getCachedConfigValue(customization, [...collectionAdminPath, "map"])
             setMapConfig(mapConfig)
             const meta = await getCachedConfigValue(customization, [...collectionAdminPath, "meta"])
@@ -559,9 +559,9 @@ export function Map({
 
     return (
         <>
-            {!formList && (
+            {!formList && (meta?.title || collectionTitle) && (
                 <Helmet>
-                    <title>{`${meta?.title || collectionTitle || labels.collection} - Map`}</title>
+                    <title>{`${meta?.title || collectionTitle || ""} - Map`}</title>
                     {meta?.description && <meta name="description" content={meta.description} />}
                 </Helmet>
             )}