Fix dialog bug.

packages/webapp/src/components/maps-page/dialogs/DeleteDialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
+import { Button, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -7,6 +7,7 @@ import { useSelector } from "react-redux";
 import { Service } from "../../../services/Service";
 import { activeInstance } from '../../../reducers/serviceSlice';
 import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
+import Dialog from "./Dialog";
 
 
 const DeleteDialog = (props: DialogProps) => {
@@ -19,36 +20,27 @@ const DeleteDialog = (props: DialogProps) => {
   );
 
   const mapId = props.mapId;
-    const handleOnClose = (action: 'accept' | undefined): void => {
+  const handleOnClose = (): void => {
-      if (action == 'accept') {
-        mutation.mutate(mapId);
-      } else {
     props.onClose();
-      }
   };
 
+  const handleOnSubmit = (): void => {
+    mutation.mutate(mapId);
+  }
+
   // Fetch map model to be rendered ...
   const { map } = fetchMapById(mapId);
   return (
     <div>
       <Dialog
-          open={props.open}
+        open={props.open} onClose={handleOnClose} onSubmit={handleOnSubmit}
-          onClose={() => handleOnClose(undefined)} >
+        title={{ id: "action.delete-title", defaultMessage: "Delete" }} 
-          <DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle>
+        submitButton={{ id: "action.delete-title", defaultMessage: "Delete" }} >
-          <DialogContent>
+
         <Alert severity="warning">
           <AlertTitle>Delete '{map?.name}'</AlertTitle>
           <FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
         </Alert>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={() => handleOnClose('accept')} variant="outlined" color="primary">
-              <FormattedMessage id="action.delete-button" defaultMessage="Delete" />
-            </Button>
-            <Button onClick={() => handleOnClose(undefined)} variant="outlined" color="secondary" autoFocus>
-              <FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
-            </Button>
-          </DialogActions>
       </Dialog>
     </div>
   );

packages/webapp/src/components/maps-page/dialogs/Dialog.tsx

@@ -12,7 +12,7 @@ export type DialogProps = {
     error?: ErrorInfo;
 
     title: MessageDescriptor;
-    description:MessageDescriptor;
+    description?: MessageDescriptor;
     submitButton: MessageDescriptor;
 }
 
@@ -22,6 +22,8 @@ const Dialog = (props: DialogProps) => {
     const isOpen = props.open;
     const handleOnSubmit = props.onSubmit;
 
+    const description = props.description ? (<DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>) : null;
+
     return (
         <div>
             <DialogUI
@@ -33,15 +35,14 @@ const Dialog = (props: DialogProps) => {
                     </DialogTitle>
 
                     <DialogContent>
-                        <DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>
+                        {description}
                         <GlobalError error={props.error} />
-                        
                         {props.children}
                     </DialogContent>
 
                     <DialogActions>
                         <Button color="primary" variant="outlined" type="submit">
-                            <FormattedMessage id="action.rename-button" defaultMessage="Rename" />
+                            {intl.formatMessage(props.title)}
                         </Button>
 
                         <Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>