@firecms/collection_editor 3.0.1 → 3.1.0-canary.1df3b2c

package/src/ui/collection_editor/AIModifiedPathsContext.tsx

@@ -0,0 +1,88 @@
+import React, { createContext, useCallback, useContext, useState } from "react";
+import { CollectionOperation } from "../../api/generateCollectionApi";
+
+export interface AIModifiedPathsContextType {
+    /** Set of paths that were modified by AI */
+    modifiedPaths: Set<string>;
+    /** Counter that increments each time AI modifies the collection - use in keys to force remount */
+    generationCounter: number;
+    /** Add paths from operations */
+    addModifiedPaths: (operations: CollectionOperation[]) => void;
+    /** Clear a specific path (when user edits that field) */
+    clearPath: (path: string) => void;
+    /** Clear all paths (on save or cancel) */
+    clearAllPaths: () => void;
+    /** Check if a path is modified */
+    isPathModified: (path: string) => boolean;
+}
+
+const AIModifiedPathsContext = createContext<AIModifiedPathsContextType | null>(null);
+
+export function AIModifiedPathsProvider({ children }: { children: React.ReactNode }) {
+    const [modifiedPaths, setModifiedPaths] = useState<Set<string>>(new Set());
+    const [generationCounter, setGenerationCounter] = useState(0);
+
+    const addModifiedPaths = useCallback((operations: CollectionOperation[]) => {
+        setModifiedPaths(prev => {
+            const newSet = new Set(prev);
+            operations.forEach(op => {
+                // Add the path and all parent paths for nested modifications
+                newSet.add(op.path);
+                // For properties modifications, also mark the property itself
+                // e.g., "properties.email.description" -> also adds "properties.email"
+                const parts = op.path.split(".");
+                if (parts[0] === "properties" && parts.length >= 2) {
+                    newSet.add(`properties.${parts[1]}`);
+                }
+            });
+            return newSet;
+        });
+        // Increment counter to force property form remount
+        setGenerationCounter(prev => prev + 1);
+    }, []);
+
+    const clearPath = useCallback((path: string) => {
+        setModifiedPaths(prev => {
+            const newSet = new Set(prev);
+            // Remove exact path and any child paths
+            for (const p of newSet) {
+                if (p === path || p.startsWith(path + ".")) {
+                    newSet.delete(p);
+                }
+            }
+            return newSet;
+        });
+    }, []);
+
+    const clearAllPaths = useCallback(() => {
+        setModifiedPaths(new Set());
+    }, []);
+
+    const isPathModified = useCallback((path: string): boolean => {
+        // Check if this exact path or any parent path is modified
+        if (modifiedPaths.has(path)) return true;
+        // Check if any child paths are modified
+        for (const p of modifiedPaths) {
+            if (p.startsWith(path + ".")) return true;
+        }
+        return false;
+    }, [modifiedPaths]);
+
+    return (
+        <AIModifiedPathsContext.Provider value={{
+            modifiedPaths,
+            generationCounter,
+            addModifiedPaths,
+            clearPath,
+            clearAllPaths,
+            isPathModified
+        }}>
+            {children}
+        </AIModifiedPathsContext.Provider>
+    );
+}
+
+export function useAIModifiedPaths(): AIModifiedPathsContextType | null {
+    return useContext(AIModifiedPathsContext);
+}
+

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { EntityCollection, FieldCaption, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
+import React, { useMemo, useState } from "react";
+import { EntityCollection, FieldCaption, getFieldConfig, IconForView, Property, PropertyConfigBadge, resolveCollection, SearchIconsView, singular, toSnakeCase, unslugify, useAuthController, useCustomizationController } from "@firecms/core";
 import {
     BooleanSwitchWithLabel,
     Chip,
@@ -8,11 +8,9 @@ import {
     Container,
     DebouncedTextField,
     Dialog,
-    ExpandablePanel,
     IconButton,
     Select,
     SelectItem,
-    SettingsIcon,
     TextField,
     Tooltip,
     Typography,
@@ -22,16 +20,19 @@ import {
 import { Field, getIn, useFormex } from "@firecms/formex";
 import { useCollectionEditorController } from "../../useCollectionEditorController";
 import { LayoutModeSwitch } from "./LayoutModeSwitch";
+import { ViewModeSwitch } from "./ViewModeSwitch";
+import { KanbanConfigSection } from "./KanbanConfigSection";
+import { PropertyFormDialog } from "./PropertyEditView";
 
 export function CollectionDetailsForm({
-                                          isNewCollection,
-                                          reservedGroups,
-                                          existingPaths,
-                                          existingIds,
-                                          groups,
-                                          parentCollection,
-                                          children
-                                      }: {
+    isNewCollection,
+    reservedGroups,
+    existingPaths,
+    existingIds,
+    groups,
+    parentCollection,
+    expandKanban
+}: {
     isNewCollection: boolean,
     reservedGroups?: string[];
     existingPaths?: string[];
@@ -39,7 +40,7 @@ export function CollectionDetailsForm({
     groups: string[] | null;
     parentCollection?: EntityCollection;
     parentCollectionIds?: string[];
-    children?: React.ReactNode;
+    expandKanban?: boolean;
 }) {
 
     const groupRef = React.useRef<HTMLInputElement>(null);
@@ -57,7 +58,35 @@ export function CollectionDetailsForm({
     const collectionEditor = useCollectionEditorController();
 
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
-    const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
+    const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    // Resolve collection to get properties for order property select
+    const resolvedCollection = useMemo(() => resolveCollection({
+        collection: values,
+        path: values.path,
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    }), [values, customizationController.propertyConfigs, authController]);
+
+    // Get number properties (for orderProperty)
+    const numberProperties = useMemo(() => {
+        const result: { key: string; label: string; property: Property; }[] = [];
+        if (!resolvedCollection.properties) return result;
+
+        Object.entries(resolvedCollection.properties).forEach(([key, prop]) => {
+            if (prop && 'dataType' in prop && prop.dataType === 'number') {
+                result.push({
+                    key,
+                    label: (prop as Property).name || key,
+                    property: prop as Property
+                });
+            }
+        });
+        return result;
+    }, [resolvedCollection.properties]);
 
     const updateDatabaseId = (databaseId: string) => {
         setFieldValue("databaseId", databaseId ?? undefined);
@@ -83,13 +112,7 @@ export function CollectionDetailsForm({
 
     };
 
-    useEffect(() => {
-        if (errors.id) {
-            setAdvancedPanelExpanded(true);
-        }
-    }, [errors.id]);
-
-    const collectionIcon = <IconForView collectionOrView={values}/>;
+    const collectionIcon = <IconForView collectionOrView={values} />;
 
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
 
@@ -103,17 +126,6 @@ export function CollectionDetailsForm({
 
     const isSubcollection = !!parentCollection;
 
-    let customIdValue: "true" | "false" | "optional" | "code_defined" | undefined;
-    if (typeof values.customId === "object") {
-        customIdValue = "code_defined";
-    } else if (values.customId === true) {
-        customIdValue = "true";
-    } else if (values.customId === false) {
-        customIdValue = "false";
-    } else if (values.customId === "optional") {
-        customIdValue = "optional";
-    }
-
     const showErrors = submitCount > 0;
 
     return (
@@ -127,10 +139,10 @@ export function CollectionDetailsForm({
                             {isNewCollection ? "New collection" : `${values?.name} collection`}
                         </Typography>
                         <DefaultDatabaseField databaseId={values.databaseId}
-                                              onDatabaseIdUpdate={updateDatabaseId}/>
+                            onDatabaseIdUpdate={updateDatabaseId} />
 
                         <Tooltip title={"Change icon"}
-                                 asChild={true}>
+                            asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 onClick={() => setIconDialogOpen(true)}>
@@ -155,7 +167,7 @@ export function CollectionDetailsForm({
                             label={"Name"}
                             autoFocus={true}
                             required
-                            error={showErrors && Boolean(errors.name)}/>
+                            error={showErrors && Boolean(errors.name)} />
                         <FieldCaption error={touched.name && Boolean(errors.name)}>
                             {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
                         </FieldCaption>
@@ -163,10 +175,10 @@ export function CollectionDetailsForm({
 
                     <div className={cls("col-span-12 ")}>
                         <Field name={"path"}
-                               as={DebouncedTextField}
-                               label={"Path"}
-                               required
-                               error={showErrors && Boolean(errors.path)}/>
+                            as={DebouncedTextField}
+                            label={"Path"}
+                            required
+                            error={showErrors && Boolean(errors.path)} />
 
                         <FieldCaption error={touched.path && Boolean(errors.path)}>
                             {touched.path && Boolean(errors.path)
@@ -214,7 +226,149 @@ export function CollectionDetailsForm({
                     <LayoutModeSwitch
                         className={"col-span-12"}
                         value={values.openEntityMode ?? "side_panel"}
-                        onChange={(value) => setFieldValue("openEntityMode", value)}/>
+                        onChange={(value) => setFieldValue("openEntityMode", value)} />
+
+                    <ViewModeSwitch
+                        className={"col-span-12"}
+                        value={values.defaultViewMode ?? "table"}
+                        onChange={(value) => setFieldValue("defaultViewMode", value)} />
+
+                    <KanbanConfigSection className={"col-span-12"} forceExpanded={expandKanban} />
+
+                    <div className={"col-span-12 mt-4"}>
+                        {(() => {
+                            // Check if orderProperty references a non-existent property
+                            const orderPropertyMissing = Boolean(values.orderProperty) &&
+                                !numberProperties.some(p => p.key === values.orderProperty);
+
+                            return (
+                                <>
+                                    <Select
+                                        key={`order-select-${numberProperties.length}`}
+                                        name="orderProperty"
+                                        label="Order Property"
+                                        size={"large"}
+                                        fullWidth={true}
+                                        position={"item-aligned"}
+                                        disabled={numberProperties.length === 0}
+                                        error={orderPropertyMissing}
+                                        value={values.orderProperty ?? ""}
+                                        onValueChange={(v) => {
+                                            setFieldValue("orderProperty", v || undefined);
+                                        }}
+                                        renderValue={(value) => {
+                                            if (orderPropertyMissing) {
+                                                return <span className="text-red-500">{value} (not found)</span>;
+                                            }
+                                            const prop = numberProperties.find(p => p.key === value);
+                                            if (!prop) return "Select a property";
+                                            const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                                            return (
+                                                <div className="flex items-center gap-2">
+                                                    <PropertyConfigBadge propertyConfig={fieldConfig} />
+                                                    <span>{prop.label}</span>
+                                                </div>
+                                            );
+                                        }}
+                                        endAdornment={values.orderProperty ? (
+                                            <IconButton
+                                                size="small"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    setFieldValue("orderProperty", undefined);
+                                                }}
+                                            >
+                                                <CloseIcon size="small" />
+                                            </IconButton>
+                                        ) : undefined}
+                                    >
+                                        {numberProperties.map((prop) => {
+                                            const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                                            return (
+                                                <SelectItem key={prop.key} value={prop.key}>
+                                                    <div className="flex items-center gap-3">
+                                                        <PropertyConfigBadge propertyConfig={fieldConfig} />
+                                                        <div>
+                                                            <div>{prop.label}</div>
+                                                            <Typography variant="caption" color="secondary">
+                                                                {fieldConfig?.name || "Number"}
+                                                            </Typography>
+                                                        </div>
+                                                    </div>
+                                                </SelectItem>
+                                            );
+                                        })}
+                                    </Select>
+                                    <FieldCaption error={orderPropertyMissing}>
+                                        {orderPropertyMissing
+                                            ? `Property "${values.orderProperty}" does not exist or is not a number property. Please select a valid property or clear the selection.`
+                                            : numberProperties.length === 0
+                                                ? "No number properties found. Add a number property to enable ordering."
+                                                : "Select a number property to persist the order of items"
+                                        }
+                                    </FieldCaption>
+                                </>
+                            );
+                        })()}
+                        {(() => {
+                            // Check if orderProperty references a non-existent property
+                            const orderPropertyMissing = Boolean(values.orderProperty) &&
+                                !numberProperties.some(p => p.key === values.orderProperty);
+                            const showCreateButton = !values.orderProperty || orderPropertyMissing;
+
+                            // Pre-fill with missing property id or default "__order"
+                            const dialogPropertyKey = orderPropertyMissing && values.orderProperty
+                                ? values.orderProperty
+                                : "__order";
+                            const dialogPropertyName = orderPropertyMissing && values.orderProperty
+                                ? unslugify(values.orderProperty)
+                                : "Order";
+
+                            if (!showCreateButton) return null;
+
+                            return (
+                                <>
+                                    <button
+                                        type="button"
+                                        className="ml-3.5 text-sm text-primary hover:text-primary-dark mt-2"
+                                        onClick={() => setOrderPropertyDialogOpen(true)}
+                                    >
+                                        + Create "{dialogPropertyKey}" property
+                                    </button>
+                                    <PropertyFormDialog
+                                        open={orderPropertyDialogOpen}
+                                        onCancel={() => setOrderPropertyDialogOpen(false)}
+                                        property={{
+                                            dataType: "number",
+                                            name: dialogPropertyName,
+                                            disabled: true,
+                                            hideFromCollection: true
+                                        }}
+                                        propertyKey={dialogPropertyKey}
+                                        existingProperty={false}
+                                        autoOpenTypeSelect={false}
+                                        autoUpdateId={false}
+                                        inArray={false}
+                                        allowDataInference={false}
+                                        propertyConfigs={customizationController.propertyConfigs}
+                                        collectionEditable={true}
+                                        existingPropertyKeys={Object.keys(values.properties ?? {})}
+                                        onPropertyChanged={({ id, property }) => {
+                                            const newProperties = {
+                                                ...values.properties,
+                                                [id!]: property
+                                            };
+                                            const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties ?? {})), id];
+                                            setFieldValue("properties", newProperties);
+                                            setFieldValue("propertiesOrder", newPropertiesOrder);
+                                            setFieldValue("orderProperty", id);
+                                            setOrderPropertyDialogOpen(false);
+                                        }}
+                                    />
+                                </>
+                            );
+                        })()}
+                    </div>
 
                     <div className={"col-span-12"}>
                         <BooleanSwitchWithLabel
@@ -236,214 +390,12 @@ export function CollectionDetailsForm({
 
 
                     <div className={"col-span-12 mt-8"}>
-                        <ExpandablePanel
-                            expanded={advancedPanelExpanded}
-                            onExpandedChange={setAdvancedPanelExpanded}
-                            title={
-                                <div className="flex flex-row text-surface-500">
-                                    <SettingsIcon/>
-                                    <Typography variant={"subtitle2"}
-                                                className="ml-2">
-                                        Advanced
-                                    </Typography>
-                                </div>}
-                            initiallyExpanded={false}>
-                            <div className={"grid grid-cols-12 gap-4 p-4"}>
-
-                                <div className={"col-span-12"}>
-                                    <Field name={"id"}
-                                           as={DebouncedTextField}
-                                           disabled={!isNewCollection}
-                                           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. Typically the same as the path."}
-                                    </FieldCaption>
-                                </div>
-
-                                <div className={"col-span-12"}>
-                                    <TextField
-                                        error={showErrors && Boolean(errors.singularName)}
-                                        name={"singularName"}
-                                        aria-describedby={"singularName-helper"}
-                                        onChange={(e) => {
-                                            setFieldTouched("singularName", true);
-                                            return handleChange(e);
-                                        }}
-                                        value={values.singularName ?? ""}
-                                        label={"Singular name"}/>
-                                    <FieldCaption error={showErrors && Boolean(errors.singularName)}>
-                                        {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}>
-                                            <CloseIcon 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)}
-                                        name="description"
-                                        value={values.description ?? ""}
-                                        onChange={handleChange}
-                                        multiline
-                                        minRows={2}
-                                        aria-describedby="description-helper-text"
-                                        label="Description"
-                                    />
-                                    <FieldCaption error={showErrors && Boolean(errors.description)}>
-                                        {showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
-                                    </FieldCaption>
-                                </div>
-
-                                <div className={"col-span-12"}>
-                                    <Select
-                                        name="defaultSize"
-                                        size={"large"}
-                                        fullWidth={true}
-                                        label="Default row size"
-                                        position={"item-aligned"}
-                                        onChange={handleChange}
-                                        value={values.defaultSize ?? ""}
-                                        renderValue={(value: any) => value.toUpperCase()}
-                                    >
-                                        {["xs", "s", "m", "l", "xl"].map((value) => (
-                                            <SelectItem
-                                                key={`size-select-${value}`}
-                                                value={value}>
-                                                {value.toUpperCase()}
-                                            </SelectItem>
-                                        ))}
-                                    </Select>
-                                </div>
-
-                                <div className={"col-span-12"}>
-                                    <BooleanSwitchWithLabel
-                                        position={"start"}
-                                        size={"large"}
-                                        label={values.includeJsonView === undefined || values.includeJsonView ? "Include JSON view" : "Do not include JSON view"}
-                                        onValueChange={(v) => setFieldValue("includeJsonView", v)}
-                                        value={values.includeJsonView === undefined ? true : values.includeJsonView}
-                                    />
-                                    <FieldCaption>
-                                        Include the JSON representation of the document.
-                                    </FieldCaption>
-                                </div>
-
-                                <div className={"col-span-12"}>
-                                    <BooleanSwitchWithLabel
-                                        position={"start"}
-                                        size={"large"}
-                                        label={values.inlineEditing === undefined || values.inlineEditing ? "Data can be edited directly in the table view" : "Data can be edited only  in the form view"}
-                                        onValueChange={(v) => setFieldValue("inlineEditing", v)}
-                                        value={values.inlineEditing === undefined ? true : values.inlineEditing}
-                                    />
-                                    <FieldCaption>
-                                        Allow editing data directly in the table view, without opening the form view.
-                                    </FieldCaption>
-                                </div>
-
-                                <div className={"col-span-12"}>
-                                    <Select
-                                        name="customId"
-                                        label="Document IDs generation"
-                                        position={"item-aligned"}
-                                        size={"large"}
-                                        fullWidth={true}
-                                        disabled={customIdValue === "code_defined"}
-                                        onValueChange={(v) => {
-                                            if (v === "code_defined")
-                                                throw new Error("This should not happen");
-                                            setFieldValue("customId", v);
-                                        }}
-                                        value={customIdValue ?? ""}
-                                        renderValue={(value: any) => {
-                                            if (value === "code_defined")
-                                                return "Code defined";
-                                            else if (value === "true")
-                                                return "Users must define an ID";
-                                            else if (value === "optional")
-                                                return "Users can define an ID, but it is not required";
-                                            else
-                                                return "Document ID is generated automatically";
-                                        }}
-                                    >
-                                        <SelectItem value={"false"}>
-                                            Document ID is generated automatically
-                                        </SelectItem>
-                                        <SelectItem value={"true"}>
-                                            Users must define an ID
-                                        </SelectItem>
-                                        <SelectItem value={"optional"}>
-                                            Users can define an ID, but it is not required
-                                        </SelectItem>
-                                    </Select>
-                                </div>
-                                <div className={"col-span-12 mt-4"}>
-                                    <BooleanSwitchWithLabel
-                                        position={"start"}
-                                        size={"large"}
-                                        label="Collection group"
-                                        onValueChange={(v) => setFieldValue("collectionGroup", v)}
-                                        value={values.collectionGroup ?? false}
-                                    />
-                                    <FieldCaption>
-                                        A collection group consists of all collections with the same path. This allows
-                                        you
-                                        to query over multiple collections at once.
-                                    </FieldCaption>
-                                </div>
-                                <div className={"col-span-12"}>
-                                    <BooleanSwitchWithLabel
-                                        position={"start"}
-                                        size={"large"}
-                                        label="Enable text search for this collection"
-                                        onValueChange={(v) => setFieldValue("textSearchEnabled", v)}
-                                        value={values.textSearchEnabled ?? false}
-                                    />
-                                    <FieldCaption>
-                                        Allow text search for this collection. If you have not specified a text search
-                                        delegate, this will use the built-in local text search. This is not recommended
-                                        for large collections, as it may incur in performance and cost issues.
-                                    </FieldCaption>
-                                </div>
-
-
-                            </div>
-                        </ExpandablePanel>
-
-                        {children}
 
                     </div>
 
                 </div>
 
-                <div style={{ height: "52px" }}/>
+                <div style={{ height: "52px" }} />
 
                 <Dialog
                     open={iconDialogOpen}
@@ -453,10 +405,10 @@ export function CollectionDetailsForm({
                 >
                     <div className={"p-4 overflow-auto min-h-[200px]"}>
                         <SearchIconsView selectedIcon={typeof values.icon === "string" ? values.icon : undefined}
-                                         onIconSelected={(icon: string) => {
-                                             setIconDialogOpen(false);
-                                             setFieldValue("icon", icon);
-                                         }}/>
+                            onIconSelected={(icon: string) => {
+                                setIconDialogOpen(false);
+                                setFieldValue("icon", icon);
+                            }} />
                     </div>
 
                 </Dialog>
@@ -467,18 +419,18 @@ export function CollectionDetailsForm({
 }
 
 function DefaultDatabaseField({
-                                  databaseId,
-                                  onDatabaseIdUpdate
-                              }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+    databaseId,
+    onDatabaseIdUpdate
+}: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
 
     return <Tooltip title={"Database ID"}
-                    side={"top"}
-                    align={"start"}>
+        side={"top"}
+        align={"start"}>
         <TextField size={"small"}
-                   invisible={true}
-                   inputClassName={"text-end"}
-                   value={databaseId ?? ""}
-                   onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
-                   placeholder={"(default)"}></TextField>
+            invisible={true}
+            inputClassName={"text-end"}
+            value={databaseId ?? ""}
+            onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
+            placeholder={"(default)"}></TextField>
     </Tooltip>
 }