fix(app-headless-cms): add support for custom DZ actions

Author: Pavel910

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

@@ -14,6 +14,7 @@ import {
     ContentEntryFormMeta,
     ContentEntryFormTitle
 } from "~/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft";
+import { SingleValueItemContainer } from "~/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone";
 
 export const ContentEntryEditorConfig = Object.assign(BaseContentEntryEditorConfig, {
     ContentEntry: Object.assign(ContentEntry, {
@@ -42,11 +43,9 @@ export const ContentEntryEditorConfig = Object.assign(BaseContentEntryEditorConf
                 useTemplate: DzField.useTemplate
             },
             Container: DzField.DynamicZoneContainer,
-            // SingleValue: {
-            //     Container: null,
-            //     ItemContainer: null,
-            //     Item: null
-            // },
+            SingleValue: {
+                ItemContainer: SingleValueItemContainer
+            },
             MultiValue: {
                 Container: DzField.MultiValueContainer,
                 ItemContainer: DzField.MultiValueItemContainer,

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

@@ -42,6 +42,7 @@ export interface MultiValueItemContainerProps {
     title: React.ReactNode;
     description: string;
     icon: JSX.Element;
+    actions?: JSX.Element;
     template: CmsDynamicZoneTemplate;
     children: React.ReactNode;
 }
@@ -53,20 +54,28 @@ export const MultiValueItemContainer = makeDecoratable(
             <AccordionItem.Actions>
                 <AccordionItem.Action
                     icon={<ArrowUpIcon />}
+                    tooltip={"Move up"}
                     onClick={props.onMoveUp}
                     disabled={props.isFirst}
                 />
                 <AccordionItem.Action
                     icon={<ArrowDownIcon />}
+                    tooltip={"Move down"}
                     onClick={props.onMoveDown}
                     disabled={props.isLast}
                 />
                 <AccordionItem.Divider />
+                {props.actions ? <>{props.actions}</> : null}
                 <AccordionItem.Action
+                    tooltip={"Duplicate"}
                     icon={<CloneIcon />}
                     onClick={() => props.onClone(props.value)}
                 />
-                <AccordionItem.Action icon={<DeleteIcon />} onClick={props.onDelete} />
+                <AccordionItem.Action
+                    icon={<DeleteIcon />}
+                    onClick={props.onDelete}
+                    tooltip={"Delete"}
+                />
             </AccordionItem.Actions>
         );
 

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

@@ -18,7 +18,7 @@ import {
     ParentValueIndexProvider,
     ModelFieldProvider
 } from "~/admin/components/ModelFieldProvider";
-import { useConfirmationDialog } from "@webiny/app-admin";
+import { makeDecoratable, useConfirmationDialog } from "@webiny/app-admin";
 
 type GetBind = CmsModelFieldRendererProps["getBind"];
 
@@ -29,6 +29,51 @@ interface SingleValueDynamicZoneProps {
     getBind: GetBind;
 }
 
+interface TemplateValue {
+    _templateId: string;
+    [key: string]: any;
+}
+
+export interface SingleValueItemContainerProps {
+    value: TemplateValue;
+    contentModel: CmsModel;
+    onDelete: () => void;
+    title: React.ReactNode;
+    description: string;
+    icon: JSX.Element;
+    actions?: JSX.Element;
+    template: CmsDynamicZoneTemplate;
+    children: React.ReactNode;
+}
+
+export const SingleValueItemContainer = makeDecoratable(
+    "SingleValueItemContainer",
+    (props: SingleValueItemContainerProps) => {
+        const { template, actions, children } = props;
+        return (
+            <AccordionItem
+                title={template.name}
+                description={template.description}
+                icon={<TemplateIcon icon={template.icon} />}
+                open={true}
+                interactive={false}
+                actions={
+                    <AccordionItem.Actions>
+                        {actions ?? null}
+                        <AccordionItem.Action
+                            icon={<DeleteIcon />}
+                            onClick={props.onDelete}
+                            tooltip={"Delete"}
+                        />
+                    </AccordionItem.Actions>
+                }
+            >
+                {children}
+            </AccordionItem>
+        );
+    }
+);
+
 export const SingleValueDynamicZone = ({
     field,
     bind,
@@ -66,20 +111,14 @@ export const SingleValueDynamicZone = ({
                     <ParentValueIndexProvider index={-1}>
                         <ModelFieldProvider field={field}>
                             <Accordion>
-                                <AccordionItem
+                                <SingleValueItemContainer
+                                    template={template}
+                                    value={bind.value}
+                                    contentModel={contentModel}
+                                    onDelete={unsetValue}
                                     title={template.name}
                                     description={template.description}
                                     icon={<TemplateIcon icon={template.icon} />}
-                                    open={true}
-                                    interactive={false}
-                                    actions={
-                                        <AccordionItem.Actions>
-                                            <AccordionItem.Action
-                                                icon={<DeleteIcon />}
-                                                onClick={unsetValue}
-                                            />
-                                        </AccordionItem.Actions>
-                                    }
                                 >
                                     <TemplateProvider template={template}>
                                         <Fields
@@ -89,7 +128,7 @@ export const SingleValueDynamicZone = ({
                                             Bind={Bind}
                                         />
                                     </TemplateProvider>
-                                </AccordionItem>
+                                </SingleValueItemContainer>
                             </Accordion>
                         </ModelFieldProvider>
                     </ParentValueIndexProvider>

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

@@ -30,6 +30,7 @@ export type DynamicZoneContainerProps = {
     title?: string;
     description?: string;
     className?: string;
+    actions?: JSX.Element;
 };
 
 export const DynamicZoneContainer = makeDecoratable(
@@ -57,6 +58,7 @@ export const DynamicZoneContainer = makeDecoratable(
                         description={description}
                         className={className || defaultClassName}
                         open={open}
+                        actions={props.actions ?? null}
                     >
                         {children}
                     </AccordionItem>