fix(app-headless-cms): add delete prompt to objects and dynamic zones (…

…#4428)
webiny · Dec 18, 2024 · edaf911 · edaf911
1 parent f2b573c
commit edaf911
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 4 deletions.
diff --git a/...s/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx b/...s/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx
@@ -22,6 +22,7 @@ import {
 import { makeDecoratable } from "@webiny/react-composition";
 import { TemplateProvider } from "~/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider";
 import { ParentValueIndexProvider } from "~/admin/components/ModelFieldProvider";
+import { useConfirmationDialog } from "@webiny/app-admin";
 
 const BottomMargin = styled.div`
     margin-bottom: 20px;
@@ -189,6 +190,12 @@ interface MultiValueDynamicZoneProps {
 }
 
 export const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {
+    const { showConfirmation } = useConfirmationDialog({
+        message: `Are you sure you want to delete this item? This action is not reversible.`,
+        acceptLabel: `Yes, I'm sure!`,
+        cancelLabel: `No, leave it.`
+    });
+
     const { bind, getBind, contentModel } = props;
     const onTemplate = (template: CmsDynamicZoneTemplateWithTypename) => {
         bind.appendValue({ _templateId: template.id, __typename: template.__typename });
@@ -211,6 +218,12 @@ export const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {
                         {values.map((value, index) => {
                             const Bind = getBind(index);
 
+                            const onDelete = () => {
+                                showConfirmation(() => {
+                                    bind.removeValue(index);
+                                });
+                            };
+
                             return (
                                 <ParentValueIndexProvider key={index} index={index}>
                                     <TemplateValueForm
@@ -221,7 +234,7 @@ export const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {
                                         isLast={index === values.length - 1}
                                         onMoveUp={() => bind.moveValueUp(index)}
                                         onMoveDown={() => bind.moveValueDown(index)}
-                                        onDelete={() => bind.removeValue(index)}
+                                        onDelete={onDelete}
                                         onClone={value => cloneValue(value, index)}
                                     />
                                 </ParentValueIndexProvider>

diff --git a/.../app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.tsx b/.../app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.tsx
@@ -18,6 +18,7 @@ import {
     ParentValueIndexProvider,
     ModelFieldProvider
 } from "~/admin/components/ModelFieldProvider";
+import { useConfirmationDialog } from "@webiny/app-admin";
 
 type GetBind = CmsModelFieldRendererProps["getBind"];
 
@@ -34,6 +35,12 @@ export const SingleValueDynamicZone = ({
     contentModel,
     getBind
 }: SingleValueDynamicZoneProps) => {
+    const { showConfirmation } = useConfirmationDialog({
+        message: `Are you sure you want to remove this item? This action is not reversible.`,
+        acceptLabel: `Yes, I'm sure!`,
+        cancelLabel: `No, leave it.`
+    });
+
     const onTemplate = (template: CmsDynamicZoneTemplateWithTypename) => {
         bind.onChange({ _templateId: template.id, __typename: template.__typename });
     };
@@ -47,7 +54,9 @@ export const SingleValueDynamicZone = ({
     const Bind = getBind();
 
     const unsetValue = () => {
-        bind.onChange(null);
+        showConfirmation(() => {
+            bind.onChange(null);
+        });
     };
 
     return (

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjects.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjects.tsx
@@ -22,6 +22,7 @@ import {
 } from "./StyledComponents";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
 import { FieldSettings } from "~/admin/plugins/fieldRenderers/object/FieldSettings";
+import { useConfirmationDialog } from "@webiny/app-admin";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -35,6 +36,12 @@ interface ActionsProps {
 }
 
 const Actions = ({ setHighlightIndex, bind, index }: ActionsProps) => {
+    const { showConfirmation } = useConfirmationDialog({
+        message: `Are you sure you want to delete this item? This action is not reversible.`,
+        acceptLabel: `Yes, I'm sure!`,
+        cancelLabel: `No, leave it.`
+    });
+
     const { moveValueDown, moveValueUp } = bind.field;
 
     const onDown = useCallback(
@@ -61,11 +68,21 @@ const Actions = ({ setHighlightIndex, bind, index }: ActionsProps) => {
         [moveValueUp, index]
     );
 
+    const onDelete = useCallback(
+        (ev: React.BaseSyntheticEvent) => {
+            ev.stopPropagation();
+            showConfirmation(() => {
+                bind.field.removeValue(index);
+            });
+        },
+        [index]
+    );
+
     return (
         <>
             <IconButton icon={<ArrowDown />} onClick={onDown} />
             <IconButton icon={<ArrowUp />} onClick={onUp} />
-            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />
+            <IconButton icon={<DeleteIcon />} onClick={onDelete} />
         </>
     );
 };

diff --git a/...ges/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.tsx b/...ges/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.tsx
@@ -24,6 +24,7 @@ import {
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
 import { FieldSettings } from "./FieldSettings";
 import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings";
+import { useConfirmationDialog } from "@webiny/app-admin";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -39,6 +40,12 @@ interface ActionsProps {
 const Actions = ({ setHighlightIndex, bind, index }: ActionsProps) => {
     const { moveValueDown, moveValueUp } = bind.field;
 
+    const { showConfirmation } = useConfirmationDialog({
+        message: `Are you sure you want to delete this item? This action is not reversible.`,
+        acceptLabel: `Yes, I'm sure!`,
+        cancelLabel: `No, leave it.`
+    });
+
     const onDown = useCallback(
         (ev: React.BaseSyntheticEvent) => {
             ev.stopPropagation();
@@ -63,11 +70,21 @@ const Actions = ({ setHighlightIndex, bind, index }: ActionsProps) => {
         [moveValueUp, index]
     );
 
+    const onDelete = useCallback(
+        (ev: React.BaseSyntheticEvent) => {
+            ev.stopPropagation();
+            showConfirmation(() => {
+                bind.field.removeValue(index);
+            });
+        },
+        [index]
+    );
+
     return (
         <>
             <IconButton icon={<ArrowDown />} onClick={onDown} />
             <IconButton icon={<ArrowUp />} onClick={onUp} />
-            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />
+            <IconButton icon={<DeleteIcon />} onClick={onDelete} />
         </>
     );
 };