@firecms/collection_editor 3.0.0-canary.99 → 3.0.0-rc.2

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -1,9 +1,10 @@
-import { EntityCollection, useSnackbarController } from "@firecms/core";
-import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, Typography, } from "@firecms/ui";
+import { EntityCollection, isEmptyObject, useSnackbarController } from "@firecms/core";
+import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 import React from "react";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"
 import { camelCase } from "./utils/strings";
+import { clone } from "@firecms/formex";
 
 export function GetCodeDialog({
                                   collection,
@@ -14,21 +15,20 @@ export function GetCodeDialog({
     const snackbarController = useSnackbarController();
 
     const code = collection
-        ? "import { EntityCollection } from \"firecms\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t")
+        ? "import { EntityCollection } from \"@firecms/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
         : "No collection selected";
     return <Dialog open={open}
                    onOpenChange={onOpenChange}
                    maxWidth={"4xl"}>
+        <DialogTitle variant={"h6"}>Code for {collection.name}</DialogTitle>
         <DialogContent>
-            <Typography variant={"h6"} className={"my-4"}>
-                Code for {collection.name}
-            </Typography>
+
             <Typography variant={"body2"} className={"my-4 mb-8"}>
                 If you want to customise the collection in code, you can add this collection code to your CMS
                 app configuration.
                 More info in the <a
                 rel="noopener noreferrer"
-                href={"https://firecms.co/docs/customization_quickstart"}>docs</a>.
+                href={"https://firecms.co/docs/cloud/quickstart"}>docs</a>.
             </Typography>
             <Highlight
                 theme={themes.vsDark}
@@ -59,12 +59,13 @@ export function GetCodeDialog({
             <Button
                 variant={"text"}
                 size={"small"}
+                color={"primary"}
                 onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     snackbarController.open({
                         type: "success",
-                        message: `Copied`
+                        message: "Copied"
                     })
                     return navigator.clipboard.writeText(code);
                 }}>
@@ -78,24 +79,40 @@ export function GetCodeDialog({
 
 function collectionToCode(collection: EntityCollection): object {
 
-    const propertyCleanup = (property: any) => {
-
-        const updatedProperty = {
-            ...property
-        };
-
-        delete updatedProperty.fromBuilder;
-        delete updatedProperty.resolved;
-        delete updatedProperty.propertiesOrder;
-        delete updatedProperty.editable;
+    const propertyCleanup = (value: any): any => {
+        if (value === undefined || value === null) {
+            return value;
+        }
+        const valueCopy = clone(value);
+        if (typeof valueCopy === "function") {
+            return valueCopy;
+        }
+        if (Array.isArray(valueCopy)) {
+            return valueCopy.map((v: any) => propertyCleanup(v));
+        }
+        if (typeof valueCopy === "object") {
+            if (valueCopy === null)
+                return valueCopy;
+            Object.keys(valueCopy).forEach((key) => {
+                if (!isEmptyObject(valueCopy)) {
+                    const childRes = propertyCleanup(valueCopy[key]);
+                    if (childRes !== null && childRes !== undefined && childRes !== false && !isEmptyObject(childRes)) {
+                        valueCopy[key] = childRes;
+                    } else {
+                        delete valueCopy[key];
+                    }
+                }
+            });
+            delete valueCopy.fromBuilder;
+            delete valueCopy.resolved;
+            delete valueCopy.propertiesOrder;
+            delete valueCopy.propertyConfig;
+            delete valueCopy.resolvedProperties;
+            delete valueCopy.editable;
 
-        if (updatedProperty.type === "map") {
-            return {
-                ...updatedProperty,
-                properties: updatedProperty.properties.map(propertyCleanup)
-            }
         }
-        return updatedProperty;
+
+        return valueCopy;
     }
 
     return {
@@ -111,11 +128,14 @@ function collectionToCode(collection: EntityCollection): object {
         customId: collection.customId,
         initialFilter: collection.initialFilter,
         initialSort: collection.initialSort,
-        properties: Object.entries(collection.properties ?? {})
+        properties: Object.entries({
+            ...(collection.properties ?? {})
+        })
             .map(([key, value]) => ({
                 [key]: propertyCleanup(value)
             }))
-            .reduce((a, b) => ({ ...a, ...b }), {}),
+            .reduce((a, b) => ({ ...a,
+...b }), {}),
         subcollections: (collection.subcollections ?? []).map(collectionToCode)
     }
 

package/src/ui/collection_editor/LayoutModeSwitch.tsx

@@ -0,0 +1,54 @@
+import { Card, cls, SquareIcon, Tooltip, Typography, VerticalSplitIcon } from "@firecms/ui";
+
+export function LayoutModeSwitch({
+                                     value,
+                                     onChange,
+                                     className
+                                 }: {
+    value: "side_panel" | "full_screen";
+    onChange: (value: "side_panel" | "full_screen") => void;
+    className?: string;
+}) {
+
+    return <div className={cls(className)}>
+        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>Document view</Typography>
+        <div className={cls("flex flex-row gap-4")}>
+
+            <Tooltip title={"Documents are open in a side panel"}>
+                <Card
+                    onClick={() => onChange("side_panel")}
+                    className={cls(
+                        "my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
+                        "text-surface-700 dark:text-surface-accent-300",
+                        "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
+                        value === "side_panel" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600",
+                    )}
+                >
+                    <VerticalSplitIcon/>
+                    <Typography variant={"label"}>
+                        Side panel
+                    </Typography>
+                </Card>
+            </Tooltip>
+
+            <Tooltip title={"Documents are open full-screen"}>
+                <Card
+                    onClick={() => onChange("full_screen")}
+                    className={cls(
+                        "my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
+                        "text-surface-700 dark:text-surface-accent-300",
+                        "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
+                        value === "full_screen" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600",
+                    )}
+                >
+                    <SquareIcon/>
+                    <Typography variant={"label"}>
+                        Full screen
+                    </Typography>
+                </Card>
+            </Tooltip>
+
+        </div>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen or in an inline side dialog</Typography>
+    </div>
+}

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -3,9 +3,8 @@ import equal from "react-fast-compare"
 
 import { Formex, FormexController, getIn, useCreateFormex } from "@firecms/formex";
 import {
+    ConfirmationDialog,
     DEFAULT_FIELD_CONFIGS,
-    DeleteConfirmationDialog,
-    PropertyConfigId,
     getFieldConfig,
     getFieldId,
     isPropertyBuilder,
@@ -14,18 +13,25 @@ import {
     Property,
     PropertyConfig,
     PropertyConfigBadge,
+    PropertyConfigId,
 } from "@firecms/core";
 import {
     Button,
+    Card,
     cls,
     DeleteIcon,
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
     IconButton,
     InfoLabel,
-    Select,
-    Typography
+    Tooltip,
+    Typography,
+    WarningIcon
 } from "@firecms/ui";
 import { EnumPropertyField } from "./properties/EnumPropertyField";
 import { StoragePropertyField } from "./properties/StoragePropertyField";
@@ -42,9 +48,9 @@ import { AdvancedPropertyValidation } from "./properties/advanced/AdvancedProper
 import { editableProperty } from "../../utils/entities";
 import { KeyValuePropertyField } from "./properties/KeyValuePropertyField";
 import { updatePropertyFromWidget } from "./utils/update_property_for_widget";
-import { PropertySelectItem } from "./PropertySelectItem";
 import { UrlPropertyField } from "./properties/UrlPropertyField";
 import { supportedFields } from "./utils/supported_fields";
+import { MarkdownPropertyField } from "./properties/MarkdownPropertyField";
 
 export type PropertyWithId = Property & {
     id?: string
@@ -68,6 +74,7 @@ export type PropertyFormProps = {
     property?: Property;
     onPropertyChanged?: (params: OnPropertyChangedParams) => void;
     onPropertyChangedImmediate?: boolean;
+    onDismiss?: () => void;
     onDelete?: (id?: string, namespace?: string) => void;
     onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
     initialErrors?: Record<string, any>;
@@ -95,6 +102,7 @@ export const PropertyForm = React.memo(
             property,
             onPropertyChanged,
             onPropertyChangedImmediate = true,
+            onDismiss,
             onDelete,
             onError,
             initialErrors,
@@ -134,6 +142,7 @@ export const PropertyForm = React.memo(
         };
 
         const formexController = useCreateFormex<PropertyWithId>({
+            debugId: "PROPERTY_FORM",
             initialValues: property
                 ? { id: propertyKey, ...property } as PropertyWithId
                 : initialValue,
@@ -141,14 +150,16 @@ export const PropertyForm = React.memo(
             validateOnChange: true,
             validateOnInitialRender: true,
             onSubmit: (newPropertyWithId, controller) => {
-                console.debug("onSubmit", newPropertyWithId);
                 const {
                     id,
                     ...property
                 } = newPropertyWithId;
                 doOnPropertyChanged({
                     id,
-                    property: { ...property, editable: property.editable ?? true }
+                    property: {
+                        ...property,
+                        editable: property.editable ?? true
+                    }
                 });
                 if (!existingProperty)
                     controller.resetForm({ values: initialValue });
@@ -209,6 +220,7 @@ export const PropertyForm = React.memo(
                 includeIdAndTitle={includeIdAndName}
                 propertyNamespace={propertyNamespace}
                 onError={onError}
+                onDismiss={onDismiss}
                 showErrors={forceShowErrors || formexController.submitCount > 0}
                 existing={existingProperty}
                 autoUpdateId={autoUpdateId}
@@ -262,8 +274,11 @@ export function PropertyFormDialog({
                   e.stopPropagation();
                   formexRef.current?.handleSubmit(e)
               }}>
+            <DialogTitle hidden>Property edit view</DialogTitle>
             <DialogContent>
+
                 <PropertyForm {...formProps}
+                              onDismiss={onCancel}
                               onPropertyChanged={(params) => {
                                   onPropertyChanged?.(params);
                                   onOkClicked?.();
@@ -279,6 +294,7 @@ export function PropertyFormDialog({
 
                 {onCancel && <Button
                     variant={"text"}
+                    color={"primary"}
                     onClick={() => {
                         onCancel();
                         formexRef.current?.resetForm();
@@ -308,6 +324,7 @@ function PropertyEditFormFields({
                                     onPropertyChanged,
                                     onDelete,
                                     propertyNamespace,
+                                    onDismiss,
                                     onError,
                                     showErrors,
                                     disabled,
@@ -322,6 +339,7 @@ function PropertyEditFormFields({
     autoUpdateId?: boolean;
     autoOpenTypeSelect: boolean;
     propertyNamespace?: string;
+    onDismiss?: () => void;
     onPropertyChanged?: (params: OnPropertyChangedParams) => void;
     onDelete?: (id?: string, namespace?: string) => void;
     onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
@@ -338,12 +356,6 @@ function PropertyEditFormFields({
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [selectedFieldConfigId, setSelectedFieldConfigId] = useState<string | undefined>(values?.dataType ? getFieldId(values) : undefined);
 
-    const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
-
-    const displayedWidgets = inArray
-        ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
-        : allSupportedFields;
-
     const deferredValues = useDeferredValue(values);
     const nameFieldRef = useRef<HTMLInputElement>(null);
 
@@ -388,7 +400,7 @@ function PropertyEditFormFields({
     let childComponent;
     if (selectedFieldConfigId === "text_field" ||
         selectedFieldConfigId === "multiline" ||
-        selectedFieldConfigId === "markdown" ||
+        selectedFieldConfigId === "user_select" ||
         selectedFieldConfigId === "email") {
         childComponent =
             <StringPropertyField widgetId={selectedFieldConfigId}
@@ -398,6 +410,10 @@ function PropertyEditFormFields({
         childComponent =
             <UrlPropertyField disabled={disabled}
                               showErrors={showErrors}/>;
+    } else if (selectedFieldConfigId === "markdown") {
+        childComponent =
+            <MarkdownPropertyField disabled={disabled}
+                                   showErrors={showErrors}/>;
     } else if (selectedFieldConfigId === "select" ||
         selectedFieldConfigId === "number_select") {
         childComponent = <EnumPropertyField
@@ -446,6 +462,13 @@ function PropertyEditFormFields({
                                     existing={existing}
                                     multiple={false}
                                     disabled={disabled}/>;
+    } else if (selectedFieldConfigId === "reference_as_string") {
+        childComponent =
+            <ReferencePropertyField showErrors={showErrors}
+                                    existing={existing}
+                                    asString={true}
+                                    multiple={false}
+                                    disabled={disabled}/>;
     } else if (selectedFieldConfigId === "date_time") {
         childComponent = <DateTimePropertyField disabled={disabled}/>;
     } else if (selectedFieldConfigId === "multi_references") {
@@ -482,62 +505,22 @@ function PropertyEditFormFields({
 
             <div className="flex mt-2 justify-between">
                 <div className={"w-full flex flex-col gap-2"}>
-                    <Select
-                        // className={"w-full"}
-                        error={Boolean(selectedWidgetError)}
-                        value={selectedFieldConfigId ?? ""}
-                        placeholder={"Select a property widget"}
+                    <WidgetSelectView
+                        initialProperty={values}
+                        value={selectedFieldConfigId as PropertyConfigId}
+                        onValueChange={(value) => onWidgetSelectChanged(value as PropertyConfigId)}
                         open={selectOpen}
-                        onOpenChange={setSelectOpen}
-                        position={"item-aligned"}
-                        disabled={disabled}
-                        renderValue={(value) => {
-                            if (!value) {
-                                return <em>Select a property
-                                    widget</em>;
+                        onOpenChange={(open, hasValue) => {
+                            if (!hasValue) {
+                                onDismiss?.();
                             }
-                            const key = value as PropertyConfigId;
-                            const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
-                            const baseProperty = propertyConfig.property;
-                            const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
-                            const optionDisabled = isPropertyBuilder(baseProperty) || (existing && baseProperty.dataType !== values?.dataType);
-                            const computedFieldConfig = baseFieldConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
-                            return <div
-                                onClick={(e) => {
-                                    if (optionDisabled) {
-                                        e.stopPropagation();
-                                        e.preventDefault();
-                                    }
-                                }}
-                                className={cls(
-                                    "flex items-center",
-                                    optionDisabled ? "w-full pointer-events-none opacity-50" : "")}>
-                                <div className={"mr-8"}>
-                                    <PropertyConfigBadge propertyConfig={computedFieldConfig}/>
-                                </div>
-                                <div className={"flex flex-col items-start text-base text-left"}>
-                                    <div>{computedFieldConfig.name}</div>
-                                    <Typography variant={"caption"}
-                                                color={"disabled"}>
-                                        {optionDisabled ? "You can only switch to widgets that use the same data type" : computedFieldConfig.description}
-                                    </Typography>
-                                </div>
-                            </div>
+                            setSelectOpen(open);
                         }}
-                        onValueChange={(value) => {
-                            onWidgetSelectChanged(value as PropertyConfigId);
-                        }}>
-                        {displayedWidgets.map(([key, propertyConfig]) => {
-                            const baseProperty = propertyConfig.property;
-                            const optionDisabled = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== values?.dataType;
-                            return <PropertySelectItem
-                                key={key}
-                                value={key}
-                                optionDisabled={optionDisabled}
-                                propertyConfig={propertyConfig}
-                                existing={existing}/>;
-                        })}
-                    </Select>
+                        disabled={disabled}
+                        showError={Boolean(selectedWidgetError)}
+                        existing={existing}
+                        propertyConfigs={propertyConfigs}
+                        inArray={inArray}/>
 
                     {selectedWidgetError &&
                         <Typography variant="caption"
@@ -576,15 +559,15 @@ function PropertyEditFormFields({
             </div>
 
             {onDelete &&
-                <DeleteConfirmationDialog open={deleteDialogOpen}
-                                          onAccept={() => onDelete(values?.id, propertyNamespace)}
-                                          onCancel={() => setDeleteDialogOpen(false)}
-                                          title={<div>Delete this property?</div>}
-                                          body={
-                                              <div> This will <b>not delete any
-                                                  data</b>, only modify the
-                                                  collection.</div>
-                                          }/>}
+                <ConfirmationDialog open={deleteDialogOpen}
+                                    onAccept={() => onDelete(values?.id, propertyNamespace)}
+                                    onCancel={() => setDeleteDialogOpen(false)}
+                                    title={<div>Delete this property?</div>}
+                                    body={
+                                        <div> This will <b>not delete any
+                                            data</b>, only modify the
+                                            collection.</div>
+                                    }/>}
 
         </>
     );
@@ -614,3 +597,207 @@ function validateName(value: string) {
     }
     return error;
 }
+
+const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
+    text_field: "Text",
+    multiline: "Text",
+    markdown: "Text",
+    url: "Text",
+    email: "Text",
+    switch: "Boolean",
+    user_select: "Users",
+    select: "Select",
+    multi_select: "Select",
+    number_input: "Number",
+    number_select: "Select",
+    multi_number_select: "Select",
+    file_upload: "File",
+    multi_file_upload: "File",
+    reference: "Reference",
+    reference_as_string: "Text",
+    multi_references: "Reference",
+    date_time: "Date",
+    group: "Group",
+    key_value: "Group",
+    repeat: "Array",
+    custom_array: "Array",
+    block: "Group"
+};
+
+function WidgetSelectView({
+                              initialProperty,
+                              value,
+                              onValueChange,
+                              open,
+                              onOpenChange,
+                              disabled,
+                              showError,
+                              existing,
+                              propertyConfigs,
+                              inArray
+                          }: {
+    initialProperty?: PropertyWithId,
+    value?: PropertyConfigId,
+    onValueChange: (value: string) => void,
+    showError: boolean,
+    open: boolean,
+    onOpenChange: (open: boolean, hasValue: boolean) => void,
+    disabled: boolean,
+    existing: boolean,
+    propertyConfigs: Record<string, PropertyConfig>,
+    inArray?: boolean
+}) {
+
+    const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
+
+    const displayedWidgets = (inArray
+        ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
+        : allSupportedFields)
+        .map(([key, propertyConfig]) => ({
+            [key]: propertyConfig
+        }))
+        .reduce((a, b) => {
+            return {
+                ...a,
+                ...b
+            }
+        }, {});
+
+    const key = value;
+    const propertyConfig = key ? (DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key]) : undefined;
+    const baseProperty = propertyConfig?.property;
+    const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
+    const computedFieldConfig = baseFieldConfig && propertyConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
+
+    const groups: string[] = [...new Set(Object.keys(displayedWidgets).map(key => {
+        const group = WIDGET_TYPE_MAP[key as PropertyConfigId];
+        if (group) {
+            return group;
+        }
+        return "Custom/Other"
+    }))];
+
+    return <>
+        <div
+            onClick={() => {
+                if (!disabled) {
+                    onOpenChange(!open, Boolean(value));
+                }
+            }}
+            className={cls(
+                "select-none rounded-md text-sm p-4",
+                fieldBackgroundMixin,
+                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                "relative flex items-center",
+            )}>
+            {!value && <em>Select a property widget</em>}
+            {value && computedFieldConfig && <div
+                className={cls(
+                    "flex items-center")}>
+                <div className={"mr-8"}>
+                    <PropertyConfigBadge propertyConfig={computedFieldConfig}/>
+                </div>
+                <div className={"flex flex-col items-start text-base text-left"}>
+                    <div>{computedFieldConfig.name}</div>
+                    <Typography variant={"caption"}
+                                color={"secondary"}>
+                        {computedFieldConfig.description}
+                    </Typography>
+                </div>
+            </div>}
+        </div>
+        <Dialog open={open}
+                onOpenChange={(open) => onOpenChange(open, Boolean(value))}
+                maxWidth={"4xl"}>
+            <DialogTitle>
+                Select a property widget
+            </DialogTitle>
+            <DialogContent>
+                <div>
+                    {groups.map(group => {
+                        return <div key={group} className={"mt-4"}>
+                            <Typography variant={"label"}>{group}</Typography>
+                            <div className={"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4"}>
+                                {Object.entries(displayedWidgets).map(([key, propertyConfig]) => {
+                                    const groupKey = WIDGET_TYPE_MAP[key as PropertyConfigId];
+                                    if (groupKey === group) {
+                                        return <WidgetSelectViewItem
+                                            key={key}
+                                            initialProperty={initialProperty}
+                                            onClick={() => {
+                                                onValueChange(key);
+                                                onOpenChange(false, true);
+                                            }}
+                                            propertyConfig={propertyConfig}
+                                            existing={existing}/>;
+                                    }
+                                    return null;
+                                })}
+                            </div>
+                        </div>;
+                    })}
+                    {/*{displayedWidgets.map(([key, propertyConfig]) => {*/}
+                    {/*    return <WidgetSelectViewItem*/}
+                    {/*        key={key}*/}
+                    {/*        initialProperty={initialProperty}*/}
+                    {/*        onClick={() => {*/}
+                    {/*            onValueChange(key);*/}
+                    {/*            onOpenChange(false);*/}
+                    {/*        }}*/}
+                    {/*        propertyConfig={propertyConfig}*/}
+                    {/*        existing={existing}/>;*/}
+                    {/*})}*/}
+                </div>
+            </DialogContent>
+        </Dialog>
+    </>;
+}
+
+export interface PropertySelectItemProps {
+    onClick?: () => void;
+    initialProperty?: PropertyWithId;
+    propertyConfig: PropertyConfig;
+    existing: boolean;
+}
+
+export function WidgetSelectViewItem({
+                                         onClick,
+                                         initialProperty,
+                                         // optionDisabled,
+                                         propertyConfig,
+                                         existing
+                                     }: PropertySelectItemProps) {
+    const baseProperty = propertyConfig.property;
+    const shouldWarnChangingDataType = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== initialProperty?.dataType;
+
+    return <Card
+        onClick={onClick}
+        className={"flex flex-row items-center px-4 py-2 m-1"}>
+        <div
+            className={cls(
+                "flex flex-row items-center text-base min-h-[48px]",
+            )}>
+            <div className={"mr-8"}>
+                <PropertyConfigBadge propertyConfig={propertyConfig} disabled={shouldWarnChangingDataType}/>
+            </div>
+            <div>
+                <div className={"flex flex-row gap-2 items-center"}>
+                    {shouldWarnChangingDataType && <Tooltip
+                        title={"This widget uses a different data type than the initially selected widget. This can cause errors with existing data."}>
+                        <WarningIcon size="smallest" className={"w-4"}/>
+                    </Tooltip>}
+                    <Typography
+                        variant={"label"}
+                        color={shouldWarnChangingDataType ? "secondary" : undefined}>{propertyConfig.name}</Typography>
+                </div>
+
+                <Typography variant={"caption"}
+                            color={"secondary"}
+                            className={"max-w-sm"}>
+                    {propertyConfig.description}
+                </Typography>
+
+            </div>
+        </div>
+    </Card>
+}