Confirm Dialog on closing a callout save/edit form.

src/core/i18n/en/translation.en.json

@@ -2878,6 +2878,10 @@
     "delete": {
       "title": "Are you sure you want to delete this Post?",
       "description": "This action cannot be undone"
+    },
+    "closeConfirm": {
+      "title": "Discard Callout",
+      "description": "Are you sure you want to close this Callout? Unsaved changes will be lost."
     }
   },
   "innovation-edit": {

src/core/ui/dialog/DialogHeader.tsx

@@ -28,7 +28,7 @@ const DialogHeader = ({
         {children}
       </BlockTitleWithIcon>
       <ActionsBar>
-        {onClose && (
+        {Boolean(onClose) && (
           <IconButton onClick={onClose} aria-label={t('buttons.close')}>
             <Close />
           </IconButton>

src/domain/collaboration/callout/edit/editDialog/CalloutEditDialog.tsx

@@ -14,6 +14,7 @@ import { DialogContent } from '@mui/material';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CalloutDeleteType, CalloutEditType } from '../CalloutEditType';
+import ConfirmationDialog from '@/core/ui/dialogs/ConfirmationDialog';
 
 export interface CalloutEditDialogProps {
   open: boolean;
@@ -57,9 +58,14 @@ const CalloutEditDialog = ({
     groupName: callout.groupName,
   };
   const [newCallout, setNewCallout] = useState<CalloutFormInput>(initialValues);
+  const [closeConfirmDialogOpen, setCloseConfirmDialogOpen] = useState(false);
 
   const handleStatusChanged = (valid: boolean) => setValid(valid);
 
+  const onCloseEdit = useCallback(() => {
+    setCloseConfirmDialogOpen(true);
+  }, []);
+
   const handleChange = (newCallout: CalloutFormOutput) => setNewCallout(newCallout);
 
   const handleSave = useCallback(async () => {
@@ -95,13 +101,13 @@ const CalloutEditDialog = ({
 
   return (
     <>
-      <DialogWithGrid open={open} columns={8} aria-labelledby="callout-visibility-dialog-title" onClose={onClose}>
+      <DialogWithGrid open={open} columns={8} aria-labelledby="callout-visibility-dialog-title" onClose={onCloseEdit}>
         <DialogHeader
           icon={CalloutIcon && <CalloutIcon />}
           title={t('components.calloutEdit.titleWithType', {
             type: t(`components.calloutTypeSelect.label.${calloutType}` as const),
           })}
-          onClose={onClose}
+          onClose={onCloseEdit}
         />
         <DialogContent>
           <StorageConfigContextProvider locationType="callout" calloutId={callout.id}>
@@ -138,6 +144,20 @@ const CalloutEditDialog = ({
             {t('buttons.save')}
           </LoadingButton>
         </DialogActions>
+        <ConfirmationDialog
+          actions={{
+            onConfirm: onClose,
+            onCancel: () => setCloseConfirmDialogOpen(false),
+          }}
+          options={{
+            show: closeConfirmDialogOpen,
+          }}
+          entities={{
+            titleId: 'post-edit.closeConfirm.title',
+            contentId: 'post-edit.closeConfirm.description',
+            confirmButtonTextId: 'buttons.yes-close',
+          }}
+        />
       </DialogWithGrid>
     </>
   );

src/domain/collaboration/post/pages/PostSettingsPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import useNavigate from '@/core/routing/useNavigate';
 import { Autocomplete, Button, DialogActions, TextField } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -42,6 +42,7 @@ const PostSettingsPage = ({ postId, calloutId, calloutsSetId, onClose }: PostSet
 
   const [post, setPost] = useState<PostFormOutput>();
   const [deleteConfirmDialogOpen, setDeleteConfirmDialogOpen] = useState(false);
+  const [closeConfirmDialogOpen, setCloseConfirmDialogOpen] = useState(false);
 
   const toPostFormInput = (post?: PostSettingsFragment): PostFormInput | undefined =>
     post && {
@@ -89,14 +90,18 @@ const PostSettingsPage = ({ postId, calloutId, calloutsSetId, onClose }: PostSet
     post && postSettings.post && !postSettings.updating && !postSettings.deleting && !isMovingContribution
   );
 
-  const handleDelete = async () => {
+  const handleDelete = useCallback(async () => {
     if (!postSettings.post || !post) {
       return;
     }
 
     await postSettings.handleDelete(postSettings.post.id);
     onClose();
-  };
+  }, [postSettings, post, onClose]);
+
+  const onCloseEdit = useCallback(() => {
+    setCloseConfirmDialogOpen(true);
+  }, []);
 
   const [handleUpdate, loading] = useLoadingState(async (shouldUpdate: boolean) => {
     if (!postSettings.contributionId || !postSettings.post || !post) {
@@ -132,7 +137,7 @@ const PostSettingsPage = ({ postId, calloutId, calloutsSetId, onClose }: PostSet
   });
 
   return (
-    <PostLayout currentSection={PostDialogSection.Settings} onClose={onClose}>
+    <PostLayout currentSection={PostDialogSection.Settings} onClose={onCloseEdit}>
       <StorageConfigContextProvider locationType="post" postId={postId} calloutId={calloutId}>
         <PostForm
           edit
@@ -221,6 +226,20 @@ const PostSettingsPage = ({ postId, calloutId, calloutsSetId, onClose }: PostSet
             confirmButtonTextId: 'buttons.delete',
           }}
         />
+        <ConfirmationDialog
+          actions={{
+            onConfirm: onClose,
+            onCancel: () => setCloseConfirmDialogOpen(false),
+          }}
+          options={{
+            show: closeConfirmDialogOpen,
+          }}
+          entities={{
+            titleId: 'post-edit.closeConfirm.title',
+            contentId: 'post-edit.closeConfirm.description',
+            confirmButtonTextId: 'buttons.yes-close',
+          }}
+        />
       </StorageConfigContextProvider>
     </PostLayout>
   );