@firecms/collection_editor 3.0.0 → 3.1.0-canary.02232f4

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -5,7 +5,8 @@ import {
     EntityCustomView,
     resolveEntityView,
     useCustomizationController,
-    User
+    User,
+    useTranslation
 } from "@firecms/core";
 import {
     AddIcon,
@@ -30,22 +31,25 @@ import { EntityCustomViewsSelectDialog } from "./EntityCustomViewsSelectDialog";
 import { useFormex } from "@firecms/formex";
 
 export function SubcollectionsEditTab({
-                                          collection,
-                                          parentCollection,
-                                          configController,
-                                          collectionInference,
-                                          getUser,
-                                          parentCollectionIds
-                                      }: {
+    collection,
+    parentCollection,
+    configController,
+    collectionInference,
+    getUser,
+    parentCollectionIds,
+    embedded = false
+}: {
     collection: PersistedCollection,
     parentCollection?: EntityCollection,
     configController: CollectionsConfigController;
     collectionInference?: CollectionInference;
     getUser?: (uid: string) => User | null;
     parentCollectionIds?: string[];
+    embedded?: boolean;
 }) {
 
     const { entityViews: contextEntityViews } = useCustomizationController();
+    const { t } = useTranslation();
 
     const [subcollectionToDelete, setSubcollectionToDelete] = React.useState<string | undefined>();
     const [addEntityViewDialogOpen, setAddEntityViewDialogOpen] = React.useState<boolean>(false);
@@ -68,177 +72,179 @@ export function SubcollectionsEditTab({
     const hardCodedEntityViews = collection.entityViews?.filter(e => typeof e !== "string") as EntityCustomView[] ?? [];
     const totalEntityViews = resolvedEntityViews.length + hardCodedEntityViews.length;
 
-    return (
-        <div className={"overflow-auto my-auto"}>
-            <Container maxWidth={"2xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
-                <div className={"flex  flex-col gap-16"}>
+    const content = (
+        <div className={"flex flex-col gap-16"}>
 
-                    <div className={"flex-grow flex flex-col gap-4 items-start"}>
-                        <Typography variant={"h5"}>
-                            Subcollections of {values.name}
-                        </Typography>
+            <div className={"flex-grow flex flex-col gap-4 items-start"}>
+                <Typography variant={"h6"}>
+                    {t("subcollections_of")} {values.name}
+                </Typography>
 
-                        <Paper className={"flex flex-col gap-4 p-2 w-full"}>
-                            {subcollections && subcollections.length > 0 && <Table>
-                                <TableBody>
-                                    {subcollections.map((subcollection) => (
-                                        <TableRow key={subcollection.path}
-                                                  onClick={() => setCurrentDialog({
-                                                      isNewCollection: false,
-                                                      editedCollectionId: subcollection.id
-                                                  })}>
-                                            <TableCell
-                                                align="left">
-                                                <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                    {subcollection.name}
-                                                </Typography>
-                                            </TableCell>
-                                            <TableCell
-                                                align="right">
-                                                <Tooltip title={"Remove"}
-                                                         asChild={true}>
-                                                    <IconButton size="small"
-                                                                onClick={(e) => {
-                                                                    e.preventDefault();
-                                                                    e.stopPropagation();
-                                                                    setSubcollectionToDelete(subcollection.id);
-                                                                }}
-                                                                color="inherit">
-                                                        <DeleteIcon size={"small"}/>
-                                                    </IconButton>
-                                                </Tooltip>
-                                            </TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>}
+                <Paper className={"flex flex-col gap-4 p-2 w-full"}>
+                    {subcollections && subcollections.length > 0 && <Table>
+                        <TableBody>
+                            {subcollections.map((subcollection) => (
+                                <TableRow key={subcollection.path}
+                                    onClick={() => setCurrentDialog({
+                                        isNewCollection: false,
+                                        editedCollectionId: subcollection.id
+                                    })}>
+                                    <TableCell
+                                        align="left">
+                                        <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                            {subcollection.name}
+                                        </Typography>
+                                    </TableCell>
+                                    <TableCell
+                                        align="right">
+                                        <Tooltip title={t("remove")}
+                                            asChild={true}>
+                                            <IconButton size="small"
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    setSubcollectionToDelete(subcollection.id);
+                                                }}
+                                                color="inherit">
+                                                <DeleteIcon size={"small"} />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>}
 
-                            <Button
-                                onClick={() => {
-                                    setCurrentDialog({
-                                        isNewCollection: true
-                                    });
-                                }}
-                                variant={"text"}
-                                startIcon={<AddIcon/>}>
-                                Add subcollection
-                            </Button>
+                    <Button
+                        onClick={() => {
+                            setCurrentDialog({
+                                isNewCollection: true
+                            });
+                        }}
+                        startIcon={<AddIcon />}>
+                        {t("add_subcollection")}
+                    </Button>
 
-                        </Paper>
+                </Paper>
 
-                    </div>
+            </div>
 
-                    <div className={"flex-grow  flex flex-col gap-4 items-start"}>
-                        <Typography variant={"h5"}>
-                            Custom views
-                        </Typography>
+            <div className={"flex-grow  flex flex-col gap-4 items-start"}>
+                <Typography variant={"h6"}>
+                    {t("custom_views")}
+                </Typography>
 
-                        {totalEntityViews === 0 &&
-                            <Alert action={<Button variant="text"
-                                                   size={"small"}
-                                                   href={"https://firecms.co/docs/cloud/quickstart"}
-                                                   component={"a"}
-                                                   rel="noopener noreferrer"
-                                                   target="_blank">More info</Button>}>
-                                Define your own custom views by uploading them with the CLI.
-                            </Alert>
-                        }
+                {totalEntityViews === 0 &&
+                    <Alert action={<Button variant="text"
+                        size={"small"}
+                        href={"https://firecms.co/docs/cloud/quickstart"}
+                        component={"a"}
+                        rel="noopener noreferrer"
+                        target="_blank">{t("more_info")}</Button>}>
+                        {t("define_custom_views_cli")}
+                    </Alert>
+                }
 
-                        {<>
-                            <Paper className={"flex flex-col gap-4 p-2 w-full"}>
-                                <Table>
-                                    <TableBody>
-                                        {resolvedEntityViews.map((view) => (
-                                            <TableRow key={view.key}>
-                                                <TableCell
-                                                    align="left">
-                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                        {view.name}
-                                                    </Typography>
-                                                </TableCell>
-                                                <TableCell
-                                                    align="right">
-                                                    <Tooltip title={"Remove"}
-                                                             asChild={true}>
-                                                        <IconButton size="small"
-                                                                    onClick={(e) => {
-                                                                        e.preventDefault();
-                                                                        e.stopPropagation();
-                                                                        setViewToDelete(view.key);
-                                                                    }}
-                                                                    color="inherit">
-                                                            <DeleteIcon size={"small"}/>
-                                                        </IconButton>
-                                                    </Tooltip>
-                                                </TableCell>
-                                            </TableRow>
-                                        ))}
-                                        {hardCodedEntityViews.map((view) => (
-                                            <TableRow key={view.key}>
-                                                <TableCell
-                                                    align="left">
-                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                        {view.name}
-                                                    </Typography>
-                                                    <Typography variant={"caption"} className={"flex-grow"}>
-                                                        This view is defined in code with
-                                                        key <code>{view.key}</code>
-                                                    </Typography>
-                                                </TableCell>
-                                            </TableRow>
-                                        ))}
-                                    </TableBody>
-                                </Table>
+                {<>
+                    <Paper className={"flex flex-col gap-4 p-2 w-full"}>
+                        <Table>
+                            <TableBody>
+                                {resolvedEntityViews.map((view) => (
+                                    <TableRow key={view.key}>
+                                        <TableCell
+                                            align="left">
+                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                {view.name}
+                                            </Typography>
+                                        </TableCell>
+                                        <TableCell
+                                            align="right">
+                                            <Tooltip title={t("remove")}
+                                                asChild={true}>
+                                                <IconButton size="small"
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        setViewToDelete(view.key);
+                                                    }}
+                                                    color="inherit">
+                                                    <DeleteIcon size={"small"} />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                                {hardCodedEntityViews.map((view) => (
+                                    <TableRow key={view.key}>
+                                        <TableCell
+                                            align="left">
+                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                {view.name}
+                                            </Typography>
+                                            <Typography variant={"caption"} className={"flex-grow"}>
+                                                {t("view_defined_in_code")} <code>{view.key}</code>
+                                            </Typography>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
 
-                                <Button
-                                    onClick={() => {
-                                        setAddEntityViewDialogOpen(true);
-                                    }}
-                                    variant={"text"}
-                                    startIcon={<AddIcon/>}>
-                                    Add custom entity view
-                                </Button>
-                            </Paper>
+                        <Button
+                            onClick={() => {
+                                setAddEntityViewDialogOpen(true);
+                            }}
+                            startIcon={<AddIcon />}>
+                            {t("add_custom_entity_view")}
+                        </Button>
+                    </Paper>
 
-                        </>}
+                </>}
 
 
-                    </div>
+            </div>
 
-                </div>
-            </Container>
+        </div>
+    );
 
-            <div style={{ height: "52px" }}/>
+    return (
+        <>
+            {embedded ? (
+                content
+            ) : (
+                <div className={"overflow-auto my-auto"}>
+                    <Container maxWidth={"2xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+                        {content}
+                    </Container>
+                    <div style={{ height: "52px" }} />
+                </div>
+            )}
 
             {subcollectionToDelete &&
                 <ConfirmationDialog open={Boolean(subcollectionToDelete)}
-                                    onAccept={() => {
-                                              const props = {
-                                                  id: subcollectionToDelete,
-                                                  parentCollectionIds: [...(parentCollectionIds ?? []), collection.id]
-                                              };
-                                              console.debug("Deleting subcollection", props)
-                                              configController.deleteCollection(props).then(() => {
-                                                  setSubcollectionToDelete(undefined);
-                                                  setSubcollections(subcollections?.filter(e => e.id !== subcollectionToDelete))
-                                              });
-                                          }}
-                                    onCancel={() => setSubcollectionToDelete(undefined)}
-                                    title={<>Delete this subcollection?</>}
-                                    body={<> This will <b>not
-                                              delete any data</b>, only
-                                              the collection in the CMS</>}/>}
+                    onAccept={() => {
+                        const props = {
+                            id: subcollectionToDelete,
+                            parentCollectionIds: [...(parentCollectionIds ?? []), collection.id]
+                        };
+                        console.debug("Deleting subcollection", props)
+                        configController.deleteCollection(props).then(() => {
+                            setSubcollectionToDelete(undefined);
+                            setSubcollections(subcollections?.filter(e => e.id !== subcollectionToDelete))
+                        });
+                    }}
+                    onCancel={() => setSubcollectionToDelete(undefined)}
+                    title={<>{t("delete_this_subcollection")}</>}
+                    body={<>{t("remove_collection_warning")}</>} />}
             {viewToDelete &&
                 <ConfirmationDialog open={Boolean(viewToDelete)}
-                                    onAccept={() => {
-                                              setFieldValue("entityViews", values.entityViews?.filter(e => e !== viewToDelete));
-                                              setViewToDelete(undefined);
-                                          }}
-                                    onCancel={() => setViewToDelete(undefined)}
-                                    title={<>Remove this view?</>}
-                                    body={<>This will <b>not
-                                              delete any data</b>, only
-                                              the view in the CMS</>}/>}
+                    onAccept={() => {
+                        setFieldValue("entityViews", values.entityViews?.filter(e => e !== viewToDelete));
+                        setViewToDelete(undefined);
+                    }}
+                    onCancel={() => setViewToDelete(undefined)}
+                    title={<>{t("remove_this_view")}</>}
+                    body={<>{t("remove_view_warning")}</>} />}
 
             <CollectionEditorDialog
                 open={Boolean(currentDialog)}
@@ -254,7 +260,7 @@ export function SubcollectionsEditTab({
                         setSubcollections([...subcollections, updatedCollection]);
                     }
                     setCurrentDialog(undefined);
-                }}/>
+                }} />
 
             <EntityCustomViewsSelectDialog
                 open={addEntityViewDialogOpen}
@@ -263,7 +269,7 @@ export function SubcollectionsEditTab({
                         setFieldValue("entityViews", [...(values.entityViews ?? []), selectedViewKey]);
                     }
                     setAddEntityViewDialogOpen(false);
-                }}/>
-        </div>
+                }} />
+        </>
     );
 }

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -38,10 +38,8 @@ export function UnsavedChangesDialog({
 
             <DialogActions>
                 <Button variant="text"
-                        color={"primary"}
                         onClick={handleCancel} autoFocus> Cancel </Button>
                 <Button
-                    color={"primary"}
                     onClick={handleOk}> Ok </Button>
             </DialogActions>
         </Dialog>

package/src/ui/collection_editor/ViewModeSwitch.tsx

@@ -0,0 +1,43 @@
+import { ViewMode, useTranslation } from "@firecms/core";
+import { AppsIcon, cls, ListIcon, ToggleButtonGroup, Typography, ViewKanbanIcon } from "@firecms/ui";
+
+export function ViewModeSwitch({
+    value,
+    onChange,
+    className
+}: {
+    value: ViewMode;
+    onChange: (value: ViewMode) => void;
+    className?: string;
+}) {
+
+    const { t } = useTranslation();
+
+    return <div className={cls(className)}>
+        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>{t("default_collection_view")}</Typography>
+        <div className={"my-2"}>
+            <ToggleButtonGroup
+                value={value}
+                onValueChange={onChange}
+                options={[
+                    {
+                        value: "table",
+                        label: t("table_view"),
+                        icon: <ListIcon />
+                    },
+                    {
+                        value: "cards",
+                        label: t("cards_view"),
+                        icon: <AppsIcon />
+                    },
+                    {
+                        value: "kanban",
+                        label: t("kanban_view"),
+                        icon: <ViewKanbanIcon />
+                    }
+                ]}
+            />
+        </div>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>{t("choose_how_entities_displayed_default")}</Typography>
+    </div>
+}

package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx

@@ -5,7 +5,8 @@ import {
     Properties,
     useAuthController,
     useNavigationController,
-    useSelectionController
+    useSelectionController,
+    useTranslation
 } from "@firecms/core";
 import { useEffect, useState } from "react";
 import { Typography } from "@firecms/ui";
@@ -19,6 +20,8 @@ export function CollectionEditorImportDataPreview({
     properties: Properties,
     propertiesOrder: string[]
 }) {
+    const { t } = useTranslation();
+
 
     const authController = useAuthController();
     const navigation = useNavigationController();
@@ -46,8 +49,8 @@ export function CollectionEditorImportDataPreview({
 
     return <EntityCollectionTable
         title={<div>
-            <Typography variant={"subtitle2"}>Imported data preview</Typography>
-            <Typography variant={"caption"}>Entities with the same id will be overwritten</Typography>
+            <Typography variant={"subtitle2"}>{t("imported_data_preview")}</Typography>
+            <Typography variant={"caption"}>{t("entities_with_same_id_overwritten")}</Typography>
         </div>}
         tableController={{
             data: importConfig.entities,

package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -6,7 +6,8 @@ import {
 } from "@firecms/data_import";
 import { getIn, useFormex } from "@firecms/formex";
 
-import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge, } from "@firecms/core";
+import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge,     useTranslation
+} from "@firecms/core";
 import { cls, Container, Select, SelectItem, Tooltip, Typography } from "@firecms/ui";
 import React, { useState } from "react";
 import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
@@ -26,6 +27,8 @@ export function CollectionEditorImportMapping({
                                                       propertyConfigs: Record<string, PropertyConfig>,
                                                       collectionEditable: boolean
                                                   }) {
+    const { t } = useTranslation();
+
 
     // const {
     //     values,
@@ -142,7 +145,7 @@ export function CollectionEditorImportMapping({
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
 
-                <Typography variant="h6" className={"my-4 ml-3.5"}>Data property mapping</Typography>
+                <Typography variant="h6" className={"my-4 ml-3.5"}>{t("data_property_mapping")}</Typography>
 
                 <DataNewPropertiesMapping importConfig={importConfig}
                                           destinationProperties={values.properties as Properties}

package/src/ui/collection_editor/properties/BlockPropertyField.tsx

@@ -71,8 +71,6 @@ export function BlockPropertyField({
 
     const addChildButton = <Button
         autoFocus
-        color="primary"
-
         onClick={() => setPropertyDialogOpen(true)}
         startIcon={<AddIcon/>}
     >

package/src/ui/collection_editor/properties/BooleanPropertyField.tsx

@@ -4,11 +4,13 @@ import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
 import { SwitchControl } from "../SwitchControl";
+import { useTranslation } from "@firecms/core";
 
 export function BooleanPropertyField({ disabled }: {
     disabled: boolean;
 }) {
     const { values } = useFormex();
+    const { t } = useTranslation();
     const defaultValue = getIn(values, "defaultValue");
 
     return (
@@ -27,7 +29,8 @@ export function BooleanPropertyField({ disabled }: {
                     name={"defaultValue"}>
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
-                            label={defaultValue === null || defaultValue === undefined ? "Default value not set" : ("Default value is " + defaultValue.toString())}
+                            size={"medium"}
+                            label={defaultValue === null || defaultValue === undefined ? t("default_value_not_set") : t("default_value_is", { value: defaultValue.toString() })}
                             disabled={disabled}
                             allowIndeterminate={true} field={field}
                             form={form}/>

package/src/ui/collection_editor/properties/CommonPropertyFields.tsx

@@ -2,7 +2,7 @@ import { Field, getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { PropertyWithId } from "../PropertyEditView";
 import React from "react";
-import { FieldCaption, prettifyIdentifier, toSnakeCase } from "@firecms/core";
+import { FieldCaption, prettifyIdentifier, toSnakeCase, useTranslation } from "@firecms/core";
 
 type CommonPropertyFieldsProps = {
     showErrors: boolean,
@@ -30,6 +30,8 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
             validate
         } = useFormex<PropertyWithId>();
 
+        const { t } = useTranslation();
+
         const name = "name";
         const nameError = showErrors && getIn(errors, name);
 
@@ -58,7 +60,7 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                             setFieldTouched(name, true);
                         }}
                         style={{ fontSize: 20 }}
-                        placeholder={"Field name"}
+                        placeholder={t("field_name")}
                         required
                         disabled={disabled}
                         error={Boolean(nameError)}/>
@@ -72,7 +74,7 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                     <Field
                         name={id}
                         as={DebouncedTextField}
-                        label={"ID"}
+                        label={t("id")}
                         value={values[id]}
                         onChange={(e: any) => {
                             const newIdValue = e.target.value;
@@ -95,7 +97,7 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                 <div>
                     <Field name={description}
                            as={DebouncedTextField}
-                           label={"Description"}
+                           label={t("description")}
                            disabled={disabled}
                            error={Boolean(descriptionError)}/>
                     <FieldCaption error={Boolean(descriptionError)}>