From 0b0366a4ae27519e8b755aab4ba66816d3fa04dd Mon Sep 17 00:00:00 2001
From: francesco <francesco@camberi.com>
Date: Thu, 12 Sep 2024 12:51:50 +0200
Subject: [PATCH] Minor and cosmetic updates related to drawer

---
 .../collections/test_collection.tsx           |  7 +-
 .../CollectionDetailsForm.tsx                 |  2 +-
 .../properties/DateTimePropertyField.tsx      | 97 ++++++++++---------
 .../templates/pages_template.ts               |  5 -
 .../src/utils/collections_firestore.ts        |  8 +-
 .../src/components/FireCMSCloudDrawer.tsx     |  1 +
 .../src/components/PaywallDatabaseIdField.tsx | 28 +++---
 .../subscriptions/TextSearchInfoDialog.tsx    |  4 +-
 .../firecms_cloud/src/hooks/useSaasPlugin.tsx |  6 +-
 packages/firecms_core/src/app/Scaffold.tsx    |  7 +-
 .../EntityCollectionView.tsx                  |  7 +-
 .../src/components/EntityPreview.tsx          |  4 +-
 .../firecms_core/src/core/DefaultDrawer.tsx   |  4 +-
 .../src/core/DrawerNavigationItem.tsx         |  2 +-
 packages/ui/.gitignore                        |  2 +-
 packages/ui/src/components/Sheet.tsx          |  2 +-
 packages/ui/src/components/Tooltip.tsx        |  4 +-
 packages/ui/src/dist/index.css                |  1 +
 18 files changed, 104 insertions(+), 87 deletions(-)
 create mode 120000 packages/ui/src/dist/index.css

diff --git a/examples/example_pro/src/FirestoreApp/collections/test_collection.tsx b/examples/example_pro/src/FirestoreApp/collections/test_collection.tsx
index d7c87b74f..1a72d5355 100644
--- a/examples/example_pro/src/FirestoreApp/collections/test_collection.tsx
+++ b/examples/example_pro/src/FirestoreApp/collections/test_collection.tsx
@@ -3,7 +3,6 @@ import {
     buildProperty,
     EntityCallbacks,
     EntityOnFetchProps,
-    MapProperty,
     resolveNavigationFrom
 } from "@firecms/core";
 import { SecondaryForm } from "../custom_entity_view/SecondaryForm";
@@ -48,7 +47,6 @@ export const testCallbacks: EntityCallbacks = {
     }
 };
 
-
 export const testCollection = buildCollection<any>({
         callbacks: testCallbacks,
         id: "test_entity",
@@ -69,6 +67,11 @@ export const testCollection = buildCollection<any>({
         //     }
         // }],
         properties: {
+            date: {
+                name: "on create",
+                dataType: "date",
+                // autoValue: "on_create"
+            },
             locale: {
                 name: "Locales",
                 dataType: "string",
diff --git a/packages/collection_editor/src/ui/collection_editor/CollectionDetailsForm.tsx b/packages/collection_editor/src/ui/collection_editor/CollectionDetailsForm.tsx
index 1d6b3b92a..29eefef19 100644
--- a/packages/collection_editor/src/ui/collection_editor/CollectionDetailsForm.tsx
+++ b/packages/collection_editor/src/ui/collection_editor/CollectionDetailsForm.tsx
@@ -156,7 +156,7 @@ export function CollectionDetailsForm({
                             required
                             error={showErrors && Boolean(errors.name)}/>
                         <FieldCaption error={touched.name && Boolean(errors.name)}>
-                            {touched.name && Boolean(errors.name) ? errors.name : "Name of in this collection, usually a plural name (e.g. Products)"}
+                            {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
                         </FieldCaption>
                     </div>
 
diff --git a/packages/collection_editor/src/ui/collection_editor/properties/DateTimePropertyField.tsx b/packages/collection_editor/src/ui/collection_editor/properties/DateTimePropertyField.tsx
index fe7587019..07538dcdb 100644
--- a/packages/collection_editor/src/ui/collection_editor/properties/DateTimePropertyField.tsx
+++ b/packages/collection_editor/src/ui/collection_editor/properties/DateTimePropertyField.tsx
@@ -26,53 +26,56 @@ export function DateTimePropertyField({ disabled }: {
 
     return (
         <>
-            <div className={"flex flex-col col-span-12"}>
-                <Select name={modePath}
-                        value={modeValue ?? "date"}
-                        error={Boolean(modeError)}
-                        onValueChange={(v) => setFieldValue(modePath, v)}
-                        label={"Mode"}
-                        renderValue={(v) => {
-                            switch (v) {
-                                case "date_time":
-                                    return "Date/Time";
-                                case "date":
-                                    return "Date";
-                                default:
-                                    return "";
-                            }
-                        }}
-                        disabled={disabled}>
-                    <SelectItem value={"date_time"}> Date/Time </SelectItem>
-                    <SelectItem value={"date"}> Date </SelectItem>
-                </Select>
-                <FieldCaption error={Boolean(modeError)}>
-                    {modeError}
-                </FieldCaption>
-
-                <Select name={autoValuePath}
-                        disabled={disabled}
-                        value={autoValueValue ?? ""}
-                        onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
-                        renderValue={(v) => {
-                            switch (v) {
-                                case "on_create":
-                                    return "On create";
-                                case "on_update":
-                                    return "On any update";
-                                default:
-                                    return "None";
-                            }
-                        }}
-                        error={Boolean(autoValueError)}
-                        label={"Automatic value"}>
-                    <SelectItem value={"none"}> None </SelectItem>
-                    <SelectItem value={"on_create"}> On create </SelectItem>
-                    <SelectItem value={"on_update"}> On any update </SelectItem>
-                </Select>
-                <FieldCaption error={Boolean(autoValueError)}>
-                    {autoValueError ?? "Update this field automatically when creating or updating the entity"}
-                </FieldCaption>
+            <div className={"flex flex-col col-span-12 gap-2"}>
+                <div>
+                    <Select name={modePath}
+                            value={modeValue ?? "date"}
+                            error={Boolean(modeError)}
+                            onValueChange={(v) => setFieldValue(modePath, v)}
+                            label={"Mode"}
+                            renderValue={(v) => {
+                                switch (v) {
+                                    case "date_time":
+                                        return "Date/Time";
+                                    case "date":
+                                        return "Date";
+                                    default:
+                                        return "";
+                                }
+                            }}
+                            disabled={disabled}>
+                        <SelectItem value={"date_time"}> Date/Time </SelectItem>
+                        <SelectItem value={"date"}> Date </SelectItem>
+                    </Select>
+                    <FieldCaption error={Boolean(modeError)}>
+                        {modeError}
+                    </FieldCaption>
+                </div>
+                <div>
+                    <Select name={autoValuePath}
+                            disabled={disabled}
+                            value={autoValueValue ?? ""}
+                            onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
+                            renderValue={(v) => {
+                                switch (v) {
+                                    case "on_create":
+                                        return "On create";
+                                    case "on_update":
+                                        return "On any update";
+                                    default:
+                                        return "None";
+                                }
+                            }}
+                            error={Boolean(autoValueError)}
+                            label={"Automatic value"}>
+                        <SelectItem value={"none"}> None </SelectItem>
+                        <SelectItem value={"on_create"}> On create </SelectItem>
+                        <SelectItem value={"on_update"}> On any update </SelectItem>
+                    </Select>
+                    <FieldCaption error={Boolean(autoValueError)}>
+                        {autoValueError ?? "Update this field automatically when creating or updating the entity"}
+                    </FieldCaption>
+                </div>
 
             </div>
 
diff --git a/packages/collection_editor/src/ui/collection_editor/templates/pages_template.ts b/packages/collection_editor/src/ui/collection_editor/templates/pages_template.ts
index f54300d02..28cd24979 100644
--- a/packages/collection_editor/src/ui/collection_editor/templates/pages_template.ts
+++ b/packages/collection_editor/src/ui/collection_editor/templates/pages_template.ts
@@ -178,11 +178,6 @@ export const pagesCollectionTemplate: EntityCollection = {
             name: "Is Published",
             columnWidth: 100,
             description: "Should this page be live on the site?"
-        },
-        author_uid: {
-            dataType: "reference",
-            name: "Author",
-            path: "users"
         }
     }
 };
diff --git a/packages/firebase_firecms/src/utils/collections_firestore.ts b/packages/firebase_firecms/src/utils/collections_firestore.ts
index e4d2a3606..87325e1a2 100644
--- a/packages/firebase_firecms/src/utils/collections_firestore.ts
+++ b/packages/firebase_firecms/src/utils/collections_firestore.ts
@@ -3,7 +3,6 @@ import {
     CMSType,
     COLLECTION_PATH_SEPARATOR,
     makePropertiesEditable,
-    PermissionsBuilder,
     Properties,
     PropertiesOrBuilders,
     Property,
@@ -24,6 +23,8 @@ export function buildCollectionId(idOrPath: string, parentCollectionIds?: string
 export function setUndefinedToDelete(data: any): any {
     if (Array.isArray(data)) {
         return data.map(v => setUndefinedToDelete(v));
+    } else if (data == null) {
+        return null;
     } else if (typeof data === "object") {
         return Object.entries(data)
             .map(([key, value]) => ({ [key]: setUndefinedToDelete(value) }))
@@ -77,7 +78,10 @@ export function prepareCollectionForPersistence<M extends {
     [Key: string]: CMSType
 }>(collection: Partial<PersistedCollection<M>>, propertyConfigs: Record<string, PropertyConfig>) {
 
-    const { properties: inputProperties, ...rest } = collection;
+    const {
+        properties: inputProperties,
+        ...rest
+    } = collection;
     const cleanedProperties = inputProperties ? cleanPropertyConfigs(inputProperties, propertyConfigs) : undefined;
     const properties = cleanedProperties ? setUndefinedToDelete(removeFunctions(cleanedProperties)) : undefined;
     let newCollection: Partial<PersistedCollection> = {};
diff --git a/packages/firecms_cloud/src/components/FireCMSCloudDrawer.tsx b/packages/firecms_cloud/src/components/FireCMSCloudDrawer.tsx
index 9ebb11d64..ee8980917 100644
--- a/packages/firecms_cloud/src/components/FireCMSCloudDrawer.tsx
+++ b/packages/firecms_cloud/src/components/FireCMSCloudDrawer.tsx
@@ -87,6 +87,7 @@ export function FireCMSCloudDrawer() {
 
                 {groups.map((group) => (
                     <div
+                        key={`group_${group}`}
                         className={"bg-gray-50 dark:bg-gray-800 dark:bg-opacity-30 my-4 rounded-lg ml-4"}>
                         {buildGroupHeader(group)}
                         {Object.values(navigationEntries)
diff --git a/packages/firecms_cloud/src/components/PaywallDatabaseIdField.tsx b/packages/firecms_cloud/src/components/PaywallDatabaseIdField.tsx
index 65a0943c1..10dfcbe5b 100644
--- a/packages/firecms_cloud/src/components/PaywallDatabaseIdField.tsx
+++ b/packages/firecms_cloud/src/components/PaywallDatabaseIdField.tsx
@@ -2,20 +2,20 @@ import React from "react";
 import { Button, TextField, Tooltip, Typography } from "@firecms/ui";
 import { useProjectConfig } from "../hooks";
 
-export function PaywallDatabaseIdField({
-                                           databaseId,
-                                           onDatabaseIdUpdate
-                                       }:
-                                           { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+export function PaywallDatabaseIdField() {
+
+    const ref = React.useRef(null);
 
     const projectConfig = useProjectConfig();
     return <>
         <Tooltip
             side={"top"}
+            asChild={false}
+            delayDuration={500}
             sideOffset={8}
-            title={<div className="flex flex-col gap-2 p-2 text-base">
-                <Typography variant={"h6"}>Subscription required</Typography>
-                <Typography>Please upgrade plans to use alternate databases</Typography>
+            title={<div className="flex flex-col gap-2 p-2 text-white">
+                <Typography variant={"subtitle2"} className={"text-white"}>Subscription required</Typography>
+                <Typography className={"text-white"}>Please upgrade plans to use alternate databases</Typography>
                 <Button
                     className={"hover:text-white"}
                     color={"primary"}
@@ -27,11 +27,13 @@ export function PaywallDatabaseIdField({
                     Upgrade plan
                 </Button>
             </div>}>
-            <TextField size={"smallest"}
-                       inputClassName={"text-end"}
-                       className={"bg-transparent dark:bg-transparent"}
-                       disabled={true}
-                       placeholder={"(default)"}></TextField>
+            <TextField
+                inputRef={ref}
+                size={"smallest"}
+                inputClassName={"text-end"}
+                className={"bg-transparent dark:bg-transparent"}
+                disabled={true}
+                placeholder={"(default)"}></TextField>
         </Tooltip>
     </>;
 }
diff --git a/packages/firecms_cloud/src/components/subscriptions/TextSearchInfoDialog.tsx b/packages/firecms_cloud/src/components/subscriptions/TextSearchInfoDialog.tsx
index f4d465104..4a544c46a 100644
--- a/packages/firecms_cloud/src/components/subscriptions/TextSearchInfoDialog.tsx
+++ b/packages/firecms_cloud/src/components/subscriptions/TextSearchInfoDialog.tsx
@@ -66,12 +66,12 @@ export function TextSearchInfoDialog({
 
             {!hasOwnTextSearchImplementation && <>
 
-                <div className={"flex flex-col gap-2 my-2"}>
+                <div className={"flex flex-col gap-2 mb-2"}>
                     <Alert color={"warning"}>
                         Local text search is not recommended for large collections.
                     </Alert>
 
-                    <Typography variant={"caption"}>
+                    <Typography variant={"caption"} className={"mt-4"}>
                         Note that enabling local text search will need to fetch all documents
                         from your collection and store them in the browser. This can be inefficient
                         for large collections. It can also incur in additional costs.
diff --git a/packages/firecms_cloud/src/hooks/useSaasPlugin.tsx b/packages/firecms_cloud/src/hooks/useSaasPlugin.tsx
index d8812efc3..63d45d2d7 100644
--- a/packages/firecms_cloud/src/hooks/useSaasPlugin.tsx
+++ b/packages/firecms_cloud/src/hooks/useSaasPlugin.tsx
@@ -28,14 +28,18 @@ export function useSaasPlugin({
 
     const additionalChildrenStart = <>
         {introMode ? <IntroWidget introMode={introMode}/> : undefined}
+    </>;
+
+    const additionalChildrenEnd = <>
         {!introMode && <DataTalkSuggestions suggestions={dataTalkSuggestions}/>}
+        <RootCollectionSuggestions introMode={introMode}/>
     </>;
 
     return {
         key: "saas",
         homePage: {
             additionalChildrenStart,
-            additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
+            additionalChildrenEnd,
         },
         collectionView: {
 
diff --git a/packages/firecms_core/src/app/Scaffold.tsx b/packages/firecms_core/src/app/Scaffold.tsx
index 483fd8c5c..072452896 100644
--- a/packages/firecms_core/src/app/Scaffold.tsx
+++ b/packages/firecms_core/src/app/Scaffold.tsx
@@ -166,10 +166,9 @@ function DrawerWrapper(props: {
             <Tooltip title="Open menu"
                      side="right"
                      sideOffset={12}
-                     asChild={true}
-            >
+                     asChild={true}>
                 <div
-                    className="fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20">
+                    className="ml-2 fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20">
                     <IconButton
                         color="inherit"
                         aria-label="Open menu"
@@ -211,7 +210,7 @@ function DrawerWrapper(props: {
                 aria-label="Open drawer"
                 onClick={() => props.setDrawerOpen(true)}
                 size="large"
-                className="absolute top-2 left-6"
+                className="absolute top-2 left-5"
             >
                 <MenuIcon/>
             </IconButton>
diff --git a/packages/firecms_core/src/components/EntityCollectionView/EntityCollectionView.tsx b/packages/firecms_core/src/components/EntityCollectionView/EntityCollectionView.tsx
index e6e927fd9..81b566960 100644
--- a/packages/firecms_core/src/components/EntityCollectionView/EntityCollectionView.tsx
+++ b/packages/firecms_core/src/components/EntityCollectionView/EntityCollectionView.tsx
@@ -45,7 +45,7 @@ import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import {
     AddIcon,
     Button,
-    cls,
+    cls, focusedDisabled,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -785,6 +785,9 @@ function EntityIdHeaderWidget({
             <Popover
                 open={openPopup}
                 onOpenChange={setOpenPopup}
+                sideOffset={0}
+                align={"start"}
+                alignOffset={-117}
                 trigger={
                     <IconButton size={"small"}>
                         <SearchIcon size={"small"}/>
@@ -814,7 +817,7 @@ function EntityIdHeaderWidget({
                                 setSearchString(e.target.value);
                             }}
                             value={searchString}
-                            className={"flex-grow bg-transparent outline-none p-1"}/>
+                            className={"flex-grow bg-transparent outline-none p-1 " + focusedDisabled}/>
                         <Button variant={"outlined"}
                                 disabled={!(searchString.trim())}
                                 type={"submit"}
diff --git a/packages/firecms_core/src/components/EntityPreview.tsx b/packages/firecms_core/src/components/EntityPreview.tsx
index 2007310b6..971a12f11 100644
--- a/packages/firecms_core/src/components/EntityPreview.tsx
+++ b/packages/firecms_core/src/components/EntityPreview.tsx
@@ -77,7 +77,7 @@ export function EntityPreview({
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        <div className={cls("flex w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
+        <div className={cls("flex w-10 h-10 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
             {imageProperty && <PropertyPreview property={imageProperty}
                                                propertyKey={imagePropertyKey as string}
                                                size={"smallest"}
@@ -86,7 +86,7 @@ export function EntityPreview({
         </div>
 
 
-        <div className={"flex flex-col flex-grow w-full m-1"}>
+        <div className={"flex flex-col grow-1 w-full max-w-full m-1"}>
 
             {size !== "smallest" && includeId && (
                 entity
diff --git a/packages/firecms_core/src/core/DefaultDrawer.tsx b/packages/firecms_core/src/core/DefaultDrawer.tsx
index f2e889c25..23ab5284d 100644
--- a/packages/firecms_core/src/core/DefaultDrawer.tsx
+++ b/packages/firecms_core/src/core/DefaultDrawer.tsx
@@ -161,9 +161,9 @@ export function DrawerLogo({ logo }: {
     return <div
         style={{
             transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-            padding: drawerOpen ? "32px 144px 0px 24px" : "72px 16px 0px"
+            padding: drawerOpen ? "32px 144px 0px 24px" : "72px 12px 0px 12px"
         }}
-        className={cls("cursor-pointer")}>
+        className={cls("cursor-pointer ml-4")}>
 
         <Tooltip title={"Home"}
                  sideOffset={20}
diff --git a/packages/firecms_core/src/core/DrawerNavigationItem.tsx b/packages/firecms_core/src/core/DrawerNavigationItem.tsx
index 66a27fe14..b65e60212 100644
--- a/packages/firecms_core/src/core/DrawerNavigationItem.tsx
+++ b/packages/firecms_core/src/core/DrawerNavigationItem.tsx
@@ -34,7 +34,7 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
+                "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-slate-800 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
index ac51b135b..9e3af26ee 100644
--- a/packages/ui/.gitignore
+++ b/packages/ui/.gitignore
@@ -6,7 +6,7 @@ node_modules
 
 # builds
 build
-dist
+./dist
 .rpt2_cache
 
 # misc
diff --git a/packages/ui/src/components/Sheet.tsx b/packages/ui/src/components/Sheet.tsx
index d1ca5b596..6e7dad060 100644
--- a/packages/ui/src/components/Sheet.tsx
+++ b/packages/ui/src/components/Sheet.tsx
@@ -53,7 +53,7 @@ export const Sheet: React.FC<SheetProps> = ({
         <DialogPrimitive.Root open={displayed || open}
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
-                <DialogPrimitive.Title>
+                <DialogPrimitive.Title autoFocus tabIndex={0}>
                     {title ?? "Sheet"}
                 </DialogPrimitive.Title>
                 <DialogPrimitive.Overlay
diff --git a/packages/ui/src/components/Tooltip.tsx b/packages/ui/src/components/Tooltip.tsx
index bbe24761d..e24e07f20 100644
--- a/packages/ui/src/components/Tooltip.tsx
+++ b/packages/ui/src/components/Tooltip.tsx
@@ -18,6 +18,7 @@ export type TooltipProps = {
     tooltipStyle?: React.CSSProperties;
     children: React.ReactNode,
     className?: string,
+    container?: HTMLElement,
     style?: React.CSSProperties;
 };
 
@@ -34,6 +35,7 @@ export const Tooltip = ({
                             tooltipStyle,
                             children,
                             asChild = false,
+                            container,
                             className,
                             style
                         }: TooltipProps) => {
@@ -57,7 +59,7 @@ export const Tooltip = ({
         <TooltipPrimitive.Provider delayDuration={delayDuration}>
             <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
                 {trigger}
-                <TooltipPrimitive.Portal>
+                <TooltipPrimitive.Portal container={container}>
                     <TooltipPrimitive.Content
                         className={cls("TooltipContent",
                             "max-w-lg leading-relaxed",
diff --git a/packages/ui/src/dist/index.css b/packages/ui/src/dist/index.css
new file mode 120000
index 000000000..19c25041b
--- /dev/null
+++ b/packages/ui/src/dist/index.css
@@ -0,0 +1 @@
+./index.css
\ No newline at end of file