feat: expand object & DZ fields via renderer settings

BREAKING CHANGE: none
Refs: #4109

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { Bind } from "@webiny/form";
+import { Cell } from "@webiny/ui/Grid";
+import { Switch } from "@webiny/ui/Switch";
+import {
+    CmsModelField,
+    CmsModelFieldRendererSettingsProps
+} from "@webiny/app-headless-cms-common/types";
+
+export interface IAccordionRenderSettings {
+    open: boolean;
+}
+
+const DEFAULT_ACCORDION_RENDER_SETTINGS: IAccordionRenderSettings = {
+    open: false
+};
+
+export const getAccordionRenderSettings = (field: CmsModelField) => {
+    if (typeof field.renderer === "function") {
+        return DEFAULT_ACCORDION_RENDER_SETTINGS;
+    }
+
+    return field.renderer.settings as IAccordionRenderSettings;
+};
+
+export const AccordionRenderSettings = ({ field }: CmsModelFieldRendererSettingsProps) => {
+    return (
+        <>
+            <Cell span={12}>
+                <Bind name={"renderer.settings.open"} defaultValue={false}>
+                    <Switch
+                        label={"Expand Accordion"}
+                        description={`Enable if "${field.label}" is to be expanded by default.`}
+                    />
+                </Bind>
+            </Cell>
+        </>
+    );
+};

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

@@ -11,6 +11,7 @@ import {
 } from "~/types";
 import { SingleValueDynamicZone } from "./SingleValueDynamicZone";
 import { MultiValueDynamicZone } from "./MultiValueDynamicZone";
+import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings";
 import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 import { makeDecoratable } from "@webiny/react-composition";
 
@@ -46,6 +47,7 @@ export const DynamicZoneContainer = makeDecoratable(
         } = props;
 
         const defaultClassName = field.multipleValues ? noBottomPadding : undefined;
+        const open = getAccordionRenderSettings(field).open;
 
         return (
             <>
@@ -54,6 +56,7 @@ export const DynamicZoneContainer = makeDecoratable(
                         title={title}
                         description={description}
                         className={className || defaultClassName}
+                        open={open}
                     >
                         {children}
                     </AccordionItem>
@@ -114,6 +117,9 @@ export const dynamicZoneFieldRenderer: CmsModelFieldRendererPlugin = {
         },
         render(props) {
             return <DynamicZoneContent {...props} />;
+        },
+        renderSettings({ field }) {
+            return <AccordionRenderSettings field={field} />;
         }
     }
 };

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

@@ -23,6 +23,7 @@ import {
 } from "./StyledComponents";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
 import { FieldSettings } from "./FieldSettings";
+import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -83,10 +84,11 @@ const ObjectsRenderer = (props: CmsModelFieldRendererProps) => {
     }
 
     const settings = fieldSettings.getSettings();
+    const open = getAccordionRenderSettings(field).open;
 
     return (
         <RootAccordion>
-            <AccordionItem title={field.label} description={field.helpText}>
+            <AccordionItem title={field.label} description={field.helpText} open={open}>
                 <DynamicSection
                     {...props}
                     emptyValue={{}}
@@ -140,6 +142,9 @@ const plugin: CmsModelFieldRendererPlugin = {
         },
         render(props) {
             return <ObjectsRenderer {...props} />;
+        },
+        renderSettings({ field }) {
+            return <AccordionRenderSettings field={field} />;
         }
     }
 };

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

@@ -6,6 +6,10 @@ import { Fields } from "~/admin/components/ContentEntryForm/Fields";
 import { FieldSettings } from "./FieldSettings";
 import { ParentFieldProvider } from "~/admin/hooks";
 import { ParentValueIndexProvider } from "~/admin/components/ModelFieldProvider";
+import {
+    AccordionRenderSettings,
+    getAccordionRenderSettings
+} from "~/admin/plugins/fieldRenderers/AccordionRenderSettings";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -30,14 +34,19 @@ const plugin: CmsModelFieldRendererPlugin = {
             }
 
             const settings = fieldSettings.getSettings();
+            const open = getAccordionRenderSettings(field).open;
 
             return (
                 <Bind>
                     {bindProps => (
                         <ParentFieldProvider value={bindProps.value} path={Bind.parentName}>
                             <ParentValueIndexProvider index={-1}>
                                 <Accordion>
-                                    <AccordionItem title={field.label} description={field.helpText}>
+                                    <AccordionItem
+                                        title={field.label}
+                                        description={field.helpText}
+                                        open={open}
+                                    >
                                         <Fields
                                             Bind={Bind}
                                             contentModel={contentModel}
@@ -51,6 +60,9 @@ const plugin: CmsModelFieldRendererPlugin = {
                     )}
                 </Bind>
             );
+        },
+        renderSettings({ field }) {
+            return <AccordionRenderSettings field={field} />;
         }
     }
 };