feat(app-headless-cms): separator field

packages/api-headless-cms-ddb/src/definitions/model.ts

@@ -24,10 +24,6 @@ export const createModelEntity = (params: Params): Entity<any> => {
                 type: "string",
                 required: true
             },
-            webinyVersion: {
-                type: "string",
-                required: true
-            },
             name: {
                 type: "string",
                 required: true

packages/app-headless-cms/src/admin/plugins/fieldRenderers/separator/index.tsx

@@ -0,0 +1 @@
+export * from "./separator.js";

packages/app-headless-cms/src/admin/plugins/fieldRenderers/separator/separator.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { i18n } from "@webiny/app/i18n/index.js";
+import type { CmsModelFieldRendererPlugin } from "~/types.js";
+import { Grid, Separator } from "@webiny/admin-ui";
+
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+
+export const createSeparatorFieldRenderer = (): CmsModelFieldRendererPlugin => {
+    return {
+        type: "cms-editor-field-renderer",
+        name: "cms-editor-field-renderer-separator",
+        renderer: {
+            rendererName: "text-separator",
+            name: t`Separator`,
+            description: t`Renders a separator field.`,
+            canUse({ field }) {
+                return field.type === "text:separator";
+            },
+            render({ field }) {
+                return (
+                    <Grid>
+                        <Grid.Column span={12}>
+                            <Separator
+                                variant={"strong"}
+                                // this is the color from the figma
+                                lineColor={"backgroundColor/backgroundColor-primary-default"}
+                                alignContent={"center"}
+                                // @ts-expect-error
+                                content={
+                                    <span className={"p-l-md p-r-md p-t-sm p-b-sm bg-color-white"}>
+                                        {field.label}
+                                    </span>
+                                }
+                            />
+                        </Grid.Column>
+                    </Grid>
+                );
+            }
+        }
+    };
+};

packages/app-headless-cms/src/admin/plugins/fields/separator/separator.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import type { CmsModelFieldTypePlugin } from "@webiny/app-headless-cms-common/types/index.js";
+import { ReactComponent as SeparatorIcon } from "@webiny/icons/line_style.svg";
+import { i18n } from "@webiny/app/i18n/index.js";
+
+const t = i18n.ns("app-headless-cms/admin/fields");
+
+export const separatorField: CmsModelFieldTypePlugin = {
+    type: "cms-editor-field-type",
+    name: "cms-editor-field-type-text-separator",
+    field: {
+        type: "text:separator",
+        label: t`Separator`,
+        description: t`Show a separator field which is not stored in the database.`,
+        icon: <SeparatorIcon />,
+        allowLayout: false,
+        hideInAdmin: false,
+        allowMultipleValues: false,
+        allowPredefinedValues: false,
+        createField() {
+            return {
+                type: this.type,
+                renderer: {
+                    name: "text-separator"
+                }
+            };
+        }
+    }
+};

packages/app-headless-cms/src/admin/views/contentModels/ContentModels.tsx

@@ -62,14 +62,14 @@ const ContentModels = () => {
                 </Grid.Column>
             </Grid>
             <NewContentModelDialog open={newContentModelDialogOpened} onClose={onClose} />
-            {cloneContentModel && (
+            {cloneContentModel ? (
                 <CloneContentModelDialog
                     contentModel={cloneContentModel}
                     onClose={onCloneClose}
                     closeModal={closeCloneModal}
                 />
-            )}
-            {importModels && <ImportContentModelsDialog onClose={closeImportModelModal} />}
+            ) : null}
+            {importModels ? <ImportContentModelsDialog onClose={closeImportModelModal} /> : null}
         </div>
     );
 };

packages/app-headless-cms/src/allPlugins.ts

@@ -42,6 +42,8 @@ import editorUpperCaseSpaceFieldValidator from "~/admin/plugins/fieldValidators/
 import { dynamicZoneField } from "~/admin/plugins/fields/dynamicZone.js";
 import { dynamicZoneFieldRenderer } from "~/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.js";
 import { dynamicZoneFieldValidator } from "~/admin/plugins/fieldValidators/dynamicZone.js";
+import { createSeparatorFieldRenderer } from "~/admin/plugins/fieldRenderers/separator/index.js";
+import { separatorField } from "~/admin/plugins/fields/separator/separator.js";
 
 export default [
     headlessCmsPlugins(),
@@ -62,6 +64,8 @@ export default [
     selectFieldRenderer,
     checkboxesFieldRenderer,
     refFieldRenderer,
+    separatorField,
+    createSeparatorFieldRenderer(),
     editorGteFieldValidator,
     editorDateGteFieldValidator(),
     editorDateLteFieldValidator(),