Created warning box when finding and replacing characters

src/goals/CharInventoryCreation/components/CharacterDetail/FindAndReplace/CharacterReplaceDialog.tsx

@@ -0,0 +1,54 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@material-ui/core";
+import { Translate } from "react-localize-redux";
+
+interface ReplaceDialogProps {
+  open: boolean;
+  textId?: string;
+  dialogFindValue: string;
+  dialogReplaceValue: string;
+  handleAccept: () => void;
+  handleCancel: () => void;
+}
+
+/**
+ * Dialog to confirm replacement
+ */
+export default function CharacterReplaceDialog(props: ReplaceDialogProps) {
+  return (
+    <Dialog
+      open={props.open}
+      onClose={props.handleCancel}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">
+        <Translate id="buttons.proceedWithCaution" />
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          Replace all occurrences of "<strong>{props.dialogFindValue}</strong>"
+          with "<strong>{props.dialogReplaceValue}</strong>" ?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={props.handleCancel} variant="outlined" color="primary">
+          <Translate id="buttons.cancel" />
+        </Button>
+        <Button
+          onClick={props.handleAccept}
+          variant="contained"
+          color="primary"
+        >
+          <Translate id="buttons.confirm" />
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/goals/CharInventoryCreation/components/CharacterDetail/FindAndReplace/FindAndReplaceComponent.tsx

@@ -1,6 +1,7 @@
 import { Button, TextField, Typography } from "@material-ui/core";
 import React from "react";
 import { LocalizeContextProps, withLocalize } from "react-localize-redux";
+import CharacterReplaceDialog from "goals/CharInventoryCreation/components/CharacterDetail/FindAndReplace/CharacterReplaceDialog";
 
 interface FindAndReplaceProps {
   initialFindValue: string;
@@ -11,6 +12,7 @@ interface FindAndReplaceProps {
 interface FindAndReplaceState {
   findValue: string;
   replaceValue: string;
+  warningDialogOpen: boolean;
 }
 
 export class FindAndReplace extends React.Component<
@@ -20,6 +22,7 @@ export class FindAndReplace extends React.Component<
   constructor(props: FindAndReplaceProps & LocalizeContextProps) {
     super(props);
     this.state = {
+      warningDialogOpen: false,
       findValue: props.initialFindValue,
       replaceValue: "",
     };
@@ -74,15 +77,33 @@ export class FindAndReplace extends React.Component<
         />
         <Button
           color="primary"
-          onClick={() =>
-            this.props.findAndReplace(
-              this.state.findValue,
-              this.state.replaceValue
-            )
-          }
+          onClick={() => {
+            this.setState(() => ({
+              warningDialogOpen: true,
+            }));
+          }}
         >
           {this.props.translate("charInventory.characterSet.apply")}
         </Button>
+        <CharacterReplaceDialog
+          open={this.state.warningDialogOpen}
+          dialogFindValue={this.state.findValue}
+          dialogReplaceValue={this.state.replaceValue}
+          handleCancel={() => {
+            this.setState(() => ({
+              warningDialogOpen: false,
+            }));
+          }}
+          handleAccept={() => {
+            this.setState(() => ({
+              warningDialogOpen: false,
+            }));
+            this.props.findAndReplace(
+              this.state.findValue,
+              this.state.replaceValue
+            );
+          }}
+        ></CharacterReplaceDialog>
       </React.Fragment>
     );
   }