Update buttons

src/components/Buttons/LoadingButton.tsx

@@ -11,14 +11,14 @@ interface LoadingProps {
   loading?: boolean;
 }
 
-/**
- * A button that shows a spinning wheel when loading=true
- */
+/** A button that shows a spinning wheel when `loading = true`.
+ * Default button props: `color: "primary", variant: "contained"`. */
 export default function LoadingButton(props: LoadingProps): ReactElement {
   return (
     <Button
-      variant="contained"
+      color="primary"
       disabled={props.disabled || props.loading}
+      variant="contained"
       {...props.buttonProps}
     >
       {props.children}

src/components/Dialogs/CancelConfirmDialog.tsx

@@ -6,14 +6,17 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
-import { ReactElement } from "react";
+import { type ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import LoadingButton from "components/Buttons/LoadingButton";
+
 interface CancelConfirmDialogProps {
   open: boolean;
-  textId: string;
+  text?: string | ReactElement;
+  textId?: string;
   handleCancel: () => void;
-  handleConfirm: () => void;
+  handleConfirm: () => Promise<void> | void;
   buttonIdCancel?: string;
   buttonIdConfirm?: string;
 }
@@ -24,8 +27,14 @@ interface CancelConfirmDialogProps {
 export default function CancelConfirmDialog(
   props: CancelConfirmDialogProps
 ): ReactElement {
+  const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
 
+  const onConfirm = async (): Promise<void> => {
+    setLoading(true);
+    await props.handleConfirm();
+  };
+
   return (
     <Dialog
       open={props.open}
@@ -38,26 +47,25 @@ export default function CancelConfirmDialog(
       </DialogTitle>
       <DialogContent>
         <DialogContentText id="alert-dialog-description">
-          {t(props.textId)}
+          {props.text || t(props.textId ?? "")}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
         <Button
-          onClick={props.handleCancel}
-          variant="outlined"
           color="primary"
+          disabled={loading}
           id={props.buttonIdCancel}
+          onClick={props.handleCancel}
+          variant="outlined"
         >
           {t("buttons.cancel")}
         </Button>
-        <Button
-          onClick={props.handleConfirm}
-          variant="contained"
-          color="primary"
-          id={props.buttonIdConfirm}
+        <LoadingButton
+          buttonProps={{ id: props.buttonIdConfirm, onClick: onConfirm }}
+          loading={loading}
         >
           {t("buttons.confirm")}
-        </Button>
+        </LoadingButton>
       </DialogActions>
     </Dialog>
   );

src/goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace.tsx

@@ -3,7 +3,7 @@ import { type ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
 
-import CharacterReplaceDialog from "goals/CharacterInventory/CharInv/CharacterDetail/CharacterReplaceDialog";
+import CancelConfirmDialog from "components/Dialogs/CancelConfirmDialog";
 import { findAndReplace } from "goals/CharacterInventory/Redux/CharacterInventoryActions";
 import { useAppDispatch } from "types/hooks";
 import { TextFieldWithFont } from "utilities/fontComponents";
@@ -48,6 +48,14 @@ export default function FindAndReplace(
     setWarningDialogOpen(false);
   };
 
+  const dialogText = (
+    <>
+      {t("charInventory.characterSet.replaceAll", { val: findValue })}
+      <br />
+      {t("charInventory.characterSet.replaceAllWith", { val: replaceValue })}
+    </>
+  );
+
   return (
     <>
       <Typography variant="overline">
@@ -82,14 +90,13 @@ export default function FindAndReplace(
       >
         {t("charInventory.characterSet.apply")}
       </Button>
-      <CharacterReplaceDialog
+      <CancelConfirmDialog
         open={warningDialogOpen}
-        dialogFindValue={findValue}
-        dialogReplaceValue={replaceValue}
+        text={dialogText}
         handleCancel={() => setWarningDialogOpen(false)}
         handleConfirm={dispatchFindAndReplace}
-        idCancel={buttonIdCancel}
-        idConfirm={buttonIdConfirm}
+        buttonIdCancel={buttonIdCancel}
+        buttonIdConfirm={buttonIdConfirm}
       />
     </>
   );

src/goals/CharacterInventory/CharInv/CharacterDetail/tests/index.test.tsx

@@ -4,8 +4,8 @@ import configureMockStore from "redux-mock-store";
 
 import "tests/reactI18nextMock";
 
+import CancelConfirmDialog from "components/Dialogs/CancelConfirmDialog";
 import CharacterDetail from "goals/CharacterInventory/CharInv/CharacterDetail";
-import CharacterReplaceDialog from "goals/CharacterInventory/CharInv/CharacterDetail/CharacterReplaceDialog";
 import {
   buttonIdCancel,
   buttonIdConfirm,
@@ -71,7 +71,7 @@ describe("CharacterDetail", () => {
 
   describe("FindAndReplace", () => {
     it("has working dialog", async () => {
-      const dialog = charMaster.root.findByType(CharacterReplaceDialog);
+      const dialog = charMaster.root.findByType(CancelConfirmDialog);
       const submitButton = charMaster.root.findByProps({ id: buttonIdSubmit });
       const cancelButton = charMaster.root.findByProps({ id: buttonIdCancel });
       const confButton = charMaster.root.findByProps({ id: buttonIdConfirm });