@firecms/collection_editor 3.0.0-canary.15 → 3.0.0-canary.151

package/src/types/collection_editor_controller.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
-import { Property } from "@firecms/core";
+import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 
 /**
@@ -12,7 +13,8 @@ export interface CollectionEditorController {
         id?: string,
         fullPath?: string,
         parentCollectionIds: string[],
-        parentCollection?: PersistedCollection
+        parentCollection?: PersistedCollection,
+        existingEntities?: Entity<any>[]
     }) => void;
 
     createCollection: (props: {
@@ -33,11 +35,19 @@ export interface CollectionEditorController {
         currentPropertiesOrder?: string[],
         editedCollectionId: string,
         parentCollectionIds: string[],
-        collection: PersistedCollection
+        collection: PersistedCollection,
+        existingEntities: Entity<any>[]
     }) => void;
 
     configPermissions: CollectionEditorPermissionsBuilder;
 
-    rootPathSuggestions?: string[];
+    getPathSuggestions?: (path: string) => Promise<string[]>;
+
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }>;
+    };
 
 }

package/src/types/collection_inference.ts

@@ -1,3 +1,3 @@
 import { EntityCollection } from "@firecms/core";
 
-export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionIds: string[]) => Promise<Partial<EntityCollection> | null>;
+export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionPaths: string[]) => Promise<Partial<EntityCollection> | null>;

package/src/types/config_permissions.ts

@@ -1,6 +1,6 @@
 import { EntityCollection } from "@firecms/core";
 
-export type CollectionEditorPermissionsBuilder<UserType = any, EC extends EntityCollection = EntityCollection> = (params: { user: UserType | null, collection?: EC }) => CollectionEditorPermissions;
+export type CollectionEditorPermissionsBuilder<USER = any, EC extends EntityCollection = EntityCollection> = (params: { user: USER | null, collection?: EC }) => CollectionEditorPermissions;
 
 export type CollectionEditorPermissions = {
     /**

package/src/types/persisted_collection.ts

@@ -1,8 +1,7 @@
 import { EntityCollection, User } from "@firecms/core";
 
-export type PersistedCollection<M extends Record<string, any> = any, UserType extends User = User>
-    = Omit<EntityCollection<M, UserType>, "subcollections"> & {
-    // properties: Properties<M>;
+export type PersistedCollection<M extends Record<string, any> = any, USER extends User = User>
+    = Omit<EntityCollection<M, USER>, "subcollections"> & {
     ownerId?: string;
     subcollections?: PersistedCollection<any, any>[];
     editable?: boolean;

package/src/ui/CollectionViewHeaderAction.tsx

@@ -1,4 +1,4 @@
-import { ResolvedProperty } from "@firecms/core";
+import { EntityTableController, ResolvedProperty } from "@firecms/core";
 import { IconButton, SettingsIcon, Tooltip } from "@firecms/ui";
 import React from "react";
 import { useCollectionEditorController } from "../useCollectionEditorController";
@@ -10,7 +10,8 @@ export function CollectionViewHeaderAction({
                                                property,
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     property: ResolvedProperty,
     propertyKey: string,
@@ -18,21 +19,25 @@ export function CollectionViewHeaderAction({
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const collectionEditorController = useCollectionEditorController();
 
     return (
-        <Tooltip title={"Edit"}>
+        <Tooltip
+            asChild={true}
+            title={"Edit"}>
             <IconButton
-                className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
+                className={onHover ? "bg-white dark:bg-surface-950" : "hidden"}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         propertyKey,
                         property,
                         editedCollectionId: collection.id,
                         parentCollectionIds,
-                        collection
+                        collection,
+                        existingEntities: tableController.data ?? []
                     });
                 }}
                 size={"small"}>

package/src/ui/EditorCollectionAction.tsx

@@ -1,16 +1,7 @@
-import equal from "react-fast-compare"
-
-import {
-    CollectionActionsProps,
-    mergeDeep,
-    useAuthController,
-    useNavigationController,
-    useSnackbarController
-} from "@firecms/core";
-import { Button, IconButton, SaveIcon, SettingsIcon, Tooltip, UndoIcon, } from "@firecms/ui";
+import { CollectionActionsProps, useAuthController, useNavigationController } from "@firecms/core";
+import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCollectionsConfigController } from "../useCollectionsConfigController";
 import { PersistedCollection } from "../types/persisted_collection";
 
 export function EditorCollectionAction({
@@ -23,8 +14,6 @@ export function EditorCollectionAction({
     const authController = useAuthController();
     const navigationController = useNavigationController();
     const collectionEditorController = useCollectionEditorController();
-    const configController = useCollectionsConfigController();
-    const snackbarController = useSnackbarController();
 
     const parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
 
@@ -35,68 +24,26 @@ export function EditorCollectionAction({
         }).editCollections
         : true;
 
-    let saveDefaultFilterButton = null;
-    if (!equal(getObjectOrNull(tableController.filterValues), getObjectOrNull(collection.initialFilter)) ||
-        !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.initialSort))) {
-        saveDefaultFilterButton = <>
-            {(collection.initialFilter || collection.initialSort) && <Tooltip
-                title={"Reset to default filter and sort"}>
-                <Button
-                    color={"primary"}
-                    size={"small"}
-                    variant={"text"}
-                    onClick={() => {
-                        tableController.clearFilter?.();
-                        if (collection?.initialFilter)
-                            tableController.setFilterValues?.(collection?.initialFilter);
-                        if (collection?.initialSort)
-                            tableController.setSortBy?.(collection?.initialSort);
-                    }}>
-                    <UndoIcon/>
-                </Button>
-            </Tooltip>}
-
-            <Tooltip
-                title={tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}>
-                <Button
-                    color={"primary"}
-                    size={"small"}
-                    variant={"outlined"}
-                    onClick={() => configController
-                        ?.saveCollection({
-                            id: collection.id,
-                            parentCollectionIds,
-                            collectionData: mergeDeep(collection as PersistedCollection,
-                                {
-                                    initialFilter: tableController.filterValues ?? null,
-                                    initialSort: tableController.sortBy ?? null
-                                })
-                        }).then(() => {
-                            snackbarController.open({
-                                type: "success",
-                                message: "Default config saved"
-                            });
-                        })}>
-                    <SaveIcon/>
-                </Button>
-            </Tooltip>
-        </>;
-    }
-
     const editorButton = <Tooltip
+        asChild={true}
         title={canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection"}>
         <IconButton
             color={"primary"}
             disabled={!canEditCollection}
             onClick={canEditCollection
-                ? () => collectionEditorController?.editCollection({ id: collection.id, fullPath, parentCollectionIds, parentCollection: parentCollection as PersistedCollection })
+                ? () => collectionEditorController?.editCollection({
+                    id: collection.id,
+                    fullPath,
+                    parentCollectionIds,
+                    parentCollection: parentCollection as PersistedCollection,
+                    existingEntities: tableController?.data ?? []
+                })
                 : undefined}>
             <SettingsIcon/>
         </IconButton>
     </Tooltip>;
 
     return <>
-        {canEditCollection && saveDefaultFilterButton}
         {editorButton}
     </>
 

package/src/ui/EditorCollectionActionStart.tsx

@@ -0,0 +1,88 @@
+import equal from "react-fast-compare"
+
+import { CollectionActionsProps, mergeDeep, useAuthController, useSnackbarController } from "@firecms/core";
+import { Button, SaveIcon, Tooltip, UndoIcon, } from "@firecms/ui";
+
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+import { PersistedCollection } from "../types/persisted_collection";
+
+export function EditorCollectionActionStart({
+                                           path: fullPath,
+                                           parentCollectionIds,
+                                           collection,
+                                           tableController
+                                       }: CollectionActionsProps) {
+
+    const authController = useAuthController();
+    const collectionEditorController = useCollectionEditorController();
+    const configController = useCollectionsConfigController();
+    const snackbarController = useSnackbarController();
+
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    let saveDefaultFilterButton = null;
+    if (!equal(getObjectOrNull(tableController.filterValues), getObjectOrNull(collection.initialFilter)) ||
+        !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.initialSort))) {
+        saveDefaultFilterButton = <>
+            <Tooltip
+                asChild={true}
+                title={tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}>
+                <Button
+                    color={"primary"}
+                    size={"small"}
+                    variant={"outlined"}
+                    onClick={() => configController
+                        ?.saveCollection({
+                            id: collection.id,
+                            parentCollectionIds,
+                            collectionData: mergeDeep(collection as PersistedCollection,
+                                {
+                                    initialFilter: tableController.filterValues ?? null,
+                                    initialSort: tableController.sortBy ?? null
+                                })
+                        }).then(() => {
+                            snackbarController.open({
+                                type: "success",
+                                message: "Default config saved"
+                            });
+                        })}>
+                    <SaveIcon/>
+                </Button>
+            </Tooltip>
+
+            {(collection.initialFilter || collection.initialSort) && <Tooltip
+                title={"Reset to default filter and sort"}>
+                <Button
+                    color={"primary"}
+                    size={"small"}
+                    variant={"text"}
+                    onClick={() => {
+                        tableController.clearFilter?.();
+                        if (collection?.initialFilter)
+                            tableController.setFilterValues?.(collection?.initialFilter);
+                        if (collection?.initialSort)
+                            tableController.setSortBy?.(collection?.initialSort);
+                    }}>
+                    <UndoIcon/>
+                </Button>
+            </Tooltip>}
+        </>;
+    }
+
+    return <>
+        {canEditCollection && saveDefaultFilterButton}
+    </>
+
+}
+
+function getObjectOrNull(o?: object): object | null {
+    if (o && Object.keys(o).length === 0)
+        return o
+    return o ?? null;
+}

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -1,12 +1,12 @@
 import {
-    DeleteConfirmationDialog,
+    ConfirmationDialog,
     PluginHomePageActionsProps,
     useAuthController,
     useSnackbarController
 } from "@firecms/core";
 import { DeleteIcon, IconButton, Menu, MenuItem, MoreVertIcon, SettingsIcon, } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { useCollectionsConfigController } from "../useCollectionsConfigController";
 
 export function HomePageEditorCollectionAction({
@@ -24,13 +24,16 @@ export function HomePageEditorCollectionAction({
         collection
     });
 
-    const onEditCollectionClicked = useCallback(() => {
-        collectionEditorController?.editCollection({ id: collection.id, parentCollectionIds: [] });
-    }, [collectionEditorController, path]);
+    const onEditCollectionClicked = () => {
+        collectionEditorController?.editCollection({
+            id: collection.id,
+            parentCollectionIds: []
+        });
+    };
 
     const [deleteRequested, setDeleteRequested] = useState(false);
 
-    const deleteCollection = useCallback(() => {
+    const deleteCollection = () => {
         configController?.deleteCollection({ id: collection.id }).then(() => {
             setDeleteRequested(false);
             snackbarController.open({
@@ -38,7 +41,7 @@ export function HomePageEditorCollectionAction({
                 type: "success"
             });
         });
-    }, [path, configController]);
+    };
 
     return <>
 
@@ -49,11 +52,13 @@ export function HomePageEditorCollectionAction({
                         <MoreVertIcon size={"small"}/>
                     </IconButton>}
                 >
-                    <MenuItem onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        setDeleteRequested(true);
-                    }}>
+                    <MenuItem
+                        dense={true}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setDeleteRequested(true);
+                        }}>
                         <DeleteIcon/>
                         Delete
                     </MenuItem>
@@ -71,7 +76,7 @@ export function HomePageEditorCollectionAction({
                 </IconButton>}
         </div>
 
-        <DeleteConfirmationDialog
+        <ConfirmationDialog
             open={deleteRequested}
             onAccept={deleteCollection}
             onCancel={() => setDeleteRequested(false)}

package/src/ui/NewCollectionButton.tsx

@@ -3,14 +3,16 @@ import { useCollectionEditorController } from "../useCollectionEditorController"
 
 export function NewCollectionButton() {
     const collectionEditorController = useCollectionEditorController();
-    return <Button className={"min-w-fit"}
-                   variant={"outlined"}
-                   onClick={() => collectionEditorController.createCollection({
-                       parentCollectionIds: [],
-                       redirect: true,
-                       sourceClick: "new_collection_button"
-                   })}>
-        <AddIcon/>
-        New collection
-    </Button>
+    return <div className={"bg-surface-50 dark:bg-surface-900 min-w-fit rounded"}>
+        <Button className={"min-w-fit"}
+                variant={"outlined"}
+                onClick={() => collectionEditorController.createCollection({
+                    parentCollectionIds: [],
+                    redirect: true,
+                    sourceClick: "new_collection_button"
+                })}>
+            <AddIcon/>
+            New collection
+        </Button>
+    </div>
 }

package/src/ui/NewCollectionCard.tsx

@@ -1,5 +1,5 @@
 import { PluginHomePageAdditionalCardsProps, useAuthController } from "@firecms/core";
-import { AddIcon, Card, cn, Typography } from "@firecms/ui";
+import { AddIcon, Card, cls, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 
 export function NewCollectionCard({
@@ -20,7 +20,7 @@ export function NewCollectionCard({
         : true;
 
     return (
-        <Card className={cn("h-full p-4 min-h-[124px]")}
+        <Card className={cls("h-full p-4 min-h-[124px]")}
               onClick={collectionEditorController && canCreateCollections
                   ? () => collectionEditorController.createCollection({
                       initialValues: group ? { group } : undefined,
@@ -31,7 +31,7 @@ export function NewCollectionCard({
                   : undefined}>
 
             <div
-                className="flex flex-col items-start h-full w-full items-center justify-center h-full w-full flex-grow flex-col">
+                className="flex items-center justify-center h-full w-full flex-grow flex-col">
                 <AddIcon color="primary" size={"large"}/>
                 <Typography color="primary"
                             variant={"caption"}

package/src/ui/PropertyAddColumnComponent.tsx

@@ -1,4 +1,4 @@
-import { getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
+import { EntityTableController, getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
 import { AddIcon, Tooltip } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { PersistedCollection } from "../types/persisted_collection";
@@ -6,11 +6,13 @@ import { PersistedCollection } from "../types/persisted_collection";
 export function PropertyAddColumnComponent({
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const authController = useAuthController();
@@ -23,16 +25,19 @@ export function PropertyAddColumnComponent({
         : true;
 
     return (
-        <Tooltip title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
+        <Tooltip
+            asChild={true}
+            title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950"}
-                // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:hover:bg-surface-950"}
+                // className={onHover ? "bg-white dark:bg-surface-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         editedCollectionId: collection.id,
                         parentCollectionIds,
                         currentPropertiesOrder: getDefaultPropertiesOrder(collection),
-                        collection
+                        collection,
+                        existingEntities: tableController.data
                     });
                 }}>
                 <AddIcon color={"inherit"}/>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -5,7 +5,8 @@ import {
     AutocompleteItem,
     BooleanSwitchWithLabel,
     Chip,
-    cn,
+    ClearIcon,
+    cls,
     Container,
     DebouncedTextField,
     Dialog,
@@ -21,6 +22,7 @@ import {
 } from "@firecms/ui";
 
 import { Field, getIn, useFormex } from "@firecms/formex";
+import { useCollectionEditorController } from "../../useCollectionEditorController";
 
 export function CollectionDetailsForm({
                                           isNewCollection,
@@ -51,9 +53,15 @@ export function CollectionDetailsForm({
         submitCount
     } = useFormex<EntityCollection>();
 
+    const collectionEditor = useCollectionEditorController();
+
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
     const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
 
+    const updateDatabaseId = (databaseId: string) => {
+        setFieldValue("databaseId", databaseId ?? undefined);
+    }
+
     const updateName = (name: string) => {
         setFieldValue("name", name);
 
@@ -80,6 +88,8 @@ export function CollectionDetailsForm({
         }
     }, [errors.id]);
 
+    const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
+
     const collectionIcon = <IconForView collectionOrView={values}/>;
 
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
@@ -112,11 +122,15 @@ export function CollectionDetailsForm({
 
                 <div>
                     <div
-                        className="flex flex-row py-2 pt-3 items-center">
+                        className="flex flex-row gap-2 py-2 pt-3 items-center">
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
                             {isNewCollection ? "New collection" : `${values?.name} collection`}
                         </Typography>
-                        <Tooltip title={"Change icon"}>
+                        <DatabaseField databaseId={values.databaseId}
+                                       onDatabaseIdUpdate={updateDatabaseId}/>
+
+                        <Tooltip title={"Change icon"}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 onClick={() => setIconDialogOpen(true)}>
@@ -139,14 +153,15 @@ export function CollectionDetailsForm({
                             value={values.name ?? ""}
                             onChange={(e: any) => updateName(e.target.value)}
                             label={"Name"}
+                            autoFocus={true}
                             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>
 
-                    <div className={cn("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
+                    <div className={cls("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
                         <Field name={"path"}
                                as={DebouncedTextField}
                                label={"Path"}
@@ -190,7 +205,7 @@ export function CollectionDetailsForm({
                             })}
                         </Autocomplete>
                         <FieldCaption>
-                            {showErrors && Boolean(errors.group) ? errors.group : "Group of the collection"}
+                            {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}
                         </FieldCaption>
                     </div>}
 
@@ -199,7 +214,7 @@ export function CollectionDetailsForm({
                             expanded={advancedPanelExpanded}
                             onExpandedChange={setAdvancedPanelExpanded}
                             title={
-                                <div className="flex flex-row text-gray-500">
+                                <div className="flex flex-row text-surface-500">
                                     <SettingsIcon/>
                                     <Typography variant={"subtitle2"}
                                                 className="ml-2">
@@ -216,7 +231,7 @@ export function CollectionDetailsForm({
                                            label={"Collection id"}
                                            error={showErrors && Boolean(errors.id)}/>
                                     <FieldCaption error={touched.id && Boolean(errors.id)}>
-                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection"}
+                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path."}
                                     </FieldCaption>
                                 </div>
 
@@ -235,6 +250,35 @@ export function CollectionDetailsForm({
                                         {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
                                     </FieldCaption>
                                 </div>
+                                <div className={"col-span-12"}>
+                                    <TextField
+                                        error={showErrors && Boolean(errors.sideDialogWidth)}
+                                        name={"sideDialogWidth"}
+                                        type={"number"}
+                                        aria-describedby={"sideDialogWidth-helper"}
+                                        onChange={(e) => {
+                                            setFieldTouched("sideDialogWidth", true);
+                                            const value = e.target.value;
+                                            if (!value) {
+                                                setFieldValue("sideDialogWidth", null);
+                                            } else if (!isNaN(Number(value))) {
+                                                setFieldValue("sideDialogWidth", Number(value));
+                                            }
+                                        }}
+                                        endAdornment={<IconButton
+                                            size={"small"}
+                                            onClick={() => {
+                                                setFieldValue("sideDialogWidth", null);
+                                            }}
+                                            disabled={!values.sideDialogWidth}>
+                                            <ClearIcon size={"small"}/>
+                                        </IconButton>}
+                                        value={values.sideDialogWidth ?? ""}
+                                        label={"Side dialog width"}/>
+                                    <FieldCaption error={showErrors && Boolean(errors.singularName)}>
+                                        {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px"}
+                                    </FieldCaption>
+                                </div>
                                 <div className={"col-span-12"}>
                                     <TextField
                                         error={showErrors && Boolean(errors.description)}
@@ -272,7 +316,7 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="customId"
-                                        label="Data IDs generation"
+                                        label="Document IDs generation"
                                         position={"item-aligned"}
                                         disabled={customIdValue === "code_defined"}
                                         onValueChange={(v) => {
@@ -363,3 +407,20 @@ export function CollectionDetailsForm({
         </div>
     );
 }
+
+function DefaultDatabaseField({
+                                  databaseId,
+                                  onDatabaseIdUpdate
+                              }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+
+    return <Tooltip title={"Database ID"}
+                    side={"top"}
+                    align={"start"}>
+        <TextField size={"smallest"}
+                   invisible={true}
+                   inputClassName={"text-end"}
+                   value={databaseId ?? ""}
+                   onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
+                   placeholder={"(default)"}></TextField>
+    </Tooltip>
+}