Minor and cosmetic updates related to drawer

firecmsco · Sep 12, 2024 · 0b0366a · 0b0366a
1 parent db85c96
commit 0b0366a
Show file tree

Hide file tree

Showing 18 changed files with 104 additions and 87 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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