From 876eb6b9043babf8c8ec787aef9126834ef33b67 Mon Sep 17 00:00:00 2001
From: gallaghersara <sgalhar@gmail.com>
Date: Mon, 11 Mar 2024 00:54:26 +0200
Subject: [PATCH] Add modal to confirm tile deletion #1625

---
 .../EditToolbar/EditToolbar.component.js      | 45 +++++++++++++++++--
 .../Board/EditToolbar/EditToolbar.messages.js | 16 +++++++
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/components/Board/EditToolbar/EditToolbar.component.js b/src/components/Board/EditToolbar/EditToolbar.component.js
index 907462945..26aa85898 100644
--- a/src/components/Board/EditToolbar/EditToolbar.component.js
+++ b/src/components/Board/EditToolbar/EditToolbar.component.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
@@ -14,6 +14,10 @@ import AddBoxIcon from '@material-ui/icons/AddBox';
 import { MdContentCopy } from 'react-icons/md';
 import { MdContentPaste } from 'react-icons/md';
 
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
 import SelectedCounter from '../../UI/SelectedCounter';
 import IconButton from '../../UI/IconButton';
 import messages from './EditToolbar.messages';
@@ -71,7 +75,10 @@ EditToolbar.propTypes = {
    */
   onAddClick: PropTypes.func,
   onBoardTypeChange: PropTypes.func,
-  copiedTiles: PropTypes.arrayOf(PropTypes.object)
+  copiedTiles: PropTypes.arrayOf(PropTypes.object),
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onDialogAccecpted: PropTypes.func.isRequired
 };
 
 function EditToolbar({
@@ -98,6 +105,13 @@ function EditToolbar({
 }) {
   const isItemsSelected = !!selectedItemsCount;
   const isFixed = !!isFixedBoard;
+  const [openDeleteTiles, setOpenDeleteTiles] = useState(false);
+  const handleClickOpen = () => {
+    setOpenDeleteTiles(true);
+  };
+  const handleClose = () => {
+    setOpenDeleteTiles(false);
+  };
 
   return (
     <div
@@ -171,14 +185,37 @@ function EditToolbar({
               count={selectedItemsCount}
               className="EditToolbar__SelectedCounter"
             />
-
             <IconButton
               label={intl.formatMessage(messages.deleteTiles)}
               disabled={!isItemsSelected}
-              onClick={onDeleteClick}
+              onClick={() => {
+                handleClickOpen();
+              }}
             >
               <DeleteIcon />
             </IconButton>
+            <Dialog open={openDeleteTiles} onClose={handleClose}>
+              <DialogTitle id="alert-dialog-title">
+                {intl.formatMessage(messages.deleteTileTitle)}
+              </DialogTitle>
+              <DialogContent>
+                {intl.formatMessage(messages.deleteTileDescription)}
+              </DialogContent>
+              <DialogActions>
+                <Button onClick={handleClose} color="primary">
+                  {intl.formatMessage(messages.deleteTileCancel)}
+                </Button>
+                <Button
+                  onClick={onDeleteClick}
+                  variant="contained"
+                  color="primary"
+                  autoFocus
+                >
+                  {intl.formatMessage(messages.deleteTileOk)}
+                </Button>
+              </DialogActions>
+            </Dialog>
+
             <PremiumFeature>
               <IconButton
                 label={intl.formatMessage(messages.copyTiles)}
diff --git a/src/components/Board/EditToolbar/EditToolbar.messages.js b/src/components/Board/EditToolbar/EditToolbar.messages.js
index e61e052b8..58513c817 100644
--- a/src/components/Board/EditToolbar/EditToolbar.messages.js
+++ b/src/components/Board/EditToolbar/EditToolbar.messages.js
@@ -13,6 +13,22 @@ export default defineMessages({
     id: 'cboard.components.Board.EditToolbar.deleteTiles',
     defaultMessage: 'Delete selected tiles'
   },
+  deleteTileTitle: {
+    id: 'cboard.components.Board.EditToolbar.deleteTileTitle',
+    defaultMessage: 'Delete Tiles'
+  },
+  deleteTileDescription: {
+    id: 'cboard.components.Board.EditToolbar.deleteTileDescription',
+    defaultMessage: 'Are you sure you want to delete the tile(s)?'
+  },
+  deleteTileCancel: {
+    id: 'cboard.components.Board.EditToolbar.deleteTileCancel',
+    defaultMessage: 'Cancel'
+  },
+  deleteTileOk: {
+    id: 'cboard.components.EditToolbar.Board.deleteTileOk',
+    defaultMessage: 'Delete'
+  },
   editTiles: {
     id: 'cboard.components.Board.EditToolbar.editTiles',
     defaultMessage: 'Edit selected tiles'