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,52 +7,44 @@ 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) => {
-    const service: Service = useSelector(activeInstance);
-    const queryClient = useQueryClient();
-    const mutation = useMutation((id: number) => service.deleteMap(id),
-      {
-        onSuccess: () => handleOnMutationSuccess(props.onClose, queryClient)
-      }
-    );
-  
-    const mapId = props.mapId;
-    const handleOnClose = (action: 'accept' | undefined): void => {
-      if (action == 'accept') {
-        mutation.mutate(mapId);
-      } else {
-        props.onClose();
-      }
-    };
-  
-    // Fetch map model to be rendered ...
-    const { map } = fetchMapById(mapId);
-    return (
-      <div>
-        <Dialog
-          open={props.open}
-          onClose={() => handleOnClose(undefined)} >
-          <DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle>
-          <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>
-    );
+  const service: Service = useSelector(activeInstance);
+  const queryClient = useQueryClient();
+  const mutation = useMutation((id: number) => service.deleteMap(id),
+    {
+      onSuccess: () => handleOnMutationSuccess(props.onClose, queryClient)
+    }
+  );
+
+  const mapId = props.mapId;
+  const handleOnClose = (): void => {
+    props.onClose();
+  };
+
+  const handleOnSubmit = (): void => {
+    mutation.mutate(mapId);
   }
-  
-  
-  export default DeleteDialog;
+
+  // Fetch map model to be rendered ...
+  const { map } = fetchMapById(mapId);
+  return (
+    <div>
+      <Dialog
+        open={props.open} onClose={handleOnClose} onSubmit={handleOnSubmit}
+        title={{ id: "action.delete-title", defaultMessage: "Delete" }} 
+        submitButton={{ id: "action.delete-title", defaultMessage: "Delete" }} >
+
+        <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>
+      </Dialog>
+    </div>
+  );
+}
+
+
+export default DeleteDialog;

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

@@ -10,10 +10,10 @@ export type DialogProps = {
     open: boolean;
     children: any;
     error?: ErrorInfo;
-    
+
     title: MessageDescriptor;
-    description:MessageDescriptor;
-    submitButton: MessageDescriptor; 
+    description?: MessageDescriptor;
+    submitButton: MessageDescriptor;
 }
 
 const Dialog = (props: DialogProps) => {
@@ -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}>