[CharInv] Consolidate find-and-replace pieces (#2964)

sillsdev · Mar 21, 2024 · e79ca3a · e79ca3a
1 parent 73dd492
commit e79ca3a
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 144 deletions.
diff --git a/src/components/Buttons/DeleteButtonWithDialog.tsx b/src/components/Buttons/DeleteButtonWithDialog.tsx
@@ -38,7 +38,7 @@ export default function DeleteButtonWithDialog(
         handleCancel={() => setOpen(false)}
         handleConfirm={handleConfirm}
         open={open}
-        textId={props.textId}
+        text={props.textId}
       />
     </>
   );

diff --git a/src/components/Buttons/UndoButton.tsx b/src/components/Buttons/UndoButton.tsx
@@ -42,7 +42,7 @@ export default function UndoButton(props: UndoButtonProps): ReactElement {
           </Button>
           <CancelConfirmDialog
             open={undoDialogOpen}
-            textId={props.textIdDialog}
+            text={props.textIdDialog}
             handleCancel={() => setUndoDialogOpen(false)}
             handleConfirm={() =>
               props.undo().then(() => setUndoDialogOpen(false))

diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx
@@ -46,7 +46,7 @@ export default function DeleteEntry(props: DeleteEntryProps): ReactElement {
       </Tooltip>
       <CancelConfirmDialog
         open={open}
-        textId={props.confirmId ?? "buttons.deletePermanently"}
+        text={props.confirmId || "buttons.deletePermanently"}
         handleCancel={() => setOpen(false)}
         handleConfirm={() => {
           setOpen(false);

diff --git a/src/components/Dialogs/CancelConfirmDialog.tsx b/src/components/Dialogs/CancelConfirmDialog.tsx
@@ -13,7 +13,7 @@ import LoadingButton from "components/Buttons/LoadingButton";
 
 interface CancelConfirmDialogProps {
   open: boolean;
-  textId: string;
+  text: string | ReactElement;
   handleCancel: () => void;
   handleConfirm: () => Promise<void> | void;
   buttonIdCancel?: string;
@@ -46,7 +46,7 @@ export default function CancelConfirmDialog(
       </DialogTitle>
       <DialogContent>
         <DialogContentText id="alert-dialog-description">
-          {t(props.textId)}
+          {typeof props.text === "string" ? t(props.text) : props.text}
         </DialogContentText>
       </DialogContent>
       <DialogActions>

diff --git a/src/components/ProjectUsers/CancelConfirmDialogCollection.tsx b/src/components/ProjectUsers/CancelConfirmDialogCollection.tsx
@@ -173,39 +173,39 @@ export default function CancelConfirmDialogCollection(
     <>
       <CancelConfirmDialog
         open={removeUserDialogOpen}
-        textId="projectSettings.userManagement.removeUserWarning"
+        text="projectSettings.userManagement.removeUserWarning"
         handleCancel={() => setRemoveUser(false)}
         handleConfirm={() => removeUser(props.userId)}
         buttonIdCancel={`${idRemoveUser}-cancel`}
         buttonIdConfirm={`${idRemoveUser}-confirm`}
       />
       <CancelConfirmDialog
         open={makeHarvesterDialogOpen}
-        textId="projectSettings.userManagement.makeHarvesterWarning"
+        text="projectSettings.userManagement.makeHarvesterWarning"
         handleCancel={() => setMakeHarvester(false)}
         handleConfirm={() => makeHarvester(props.userId)}
         buttonIdCancel={`${idHarvester}-cancel`}
         buttonIdConfirm={`${idHarvester}-confirm`}
       />
       <CancelConfirmDialog
         open={makeEditorDialogOpen}
-        textId="projectSettings.userManagement.makeEditorWarning"
+        text="projectSettings.userManagement.makeEditorWarning"
         handleCancel={() => setMakeEditor(false)}
         handleConfirm={() => makeEditor(props.userId)}
         buttonIdCancel={`${idEditor}-cancel`}
         buttonIdConfirm={`${idEditor}-confirm`}
       />
       <CancelConfirmDialog
         open={makeAdminDialogOpen}
-        textId="projectSettings.userManagement.makeAdminWarning"
+        text="projectSettings.userManagement.makeAdminWarning"
         handleCancel={() => setMakeAdmin(false)}
         handleConfirm={() => makeAdmin(props.userId)}
         buttonIdCancel={`${idAdmin}-cancel`}
         buttonIdConfirm={`${idAdmin}-confirm`}
       />
       <CancelConfirmDialog
         open={makeOwnerDialogOpen}
-        textId="projectSettings.userManagement.makeOwnerWarning"
+        text="projectSettings.userManagement.makeOwnerWarning"
         handleCancel={() => setMakeOwner(false)}
         handleConfirm={() => makeOwner(props.userId)}
         buttonIdCancel={`${idOwner}-cancel`}

diff --git a/.../CharacterDetail/FindAndReplace/index.tsx → ...harInv/CharacterDetail/FindAndReplace.tsx b/.../CharacterDetail/FindAndReplace/index.tsx → ...harInv/CharacterDetail/FindAndReplace.tsx
@@ -1,10 +1,10 @@
 import { Button, Typography } from "@mui/material";
-import { ReactElement, useEffect, useState } from "react";
+import { type ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
 
-import CharacterReplaceDialog from "goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/CharacterReplaceDialog";
-import { findAndReplace } from "goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/FindAndReplaceActions";
+import CancelConfirmDialog from "components/Dialogs/CancelConfirmDialog";
+import { findAndReplace } from "goals/CharacterInventory/Redux/CharacterInventoryActions";
 import { useAppDispatch } from "types/hooks";
 import { TextFieldWithFont } from "utilities/fontComponents";
 
@@ -19,6 +19,8 @@ interface FindAndReplaceProps {
   initialFindValue: string;
 }
 
+/** Component for replacing one character (every occurrence of it in the vernacular form
+ * of a word in the project) with another character. */
 export default function FindAndReplace(
   props: FindAndReplaceProps
 ): ReactElement {
@@ -46,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">
@@ -80,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}
       />
     </>
   );

diff --git a/...oals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/CharacterReplaceDialog.tsx b/...oals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/CharacterReplaceDialog.tsx
diff --git a/src/goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/FindAndReplaceActions.ts b/src/goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/FindAndReplaceActions.ts
diff --git a/src/goals/CharacterInventory/CharInv/CharacterDetail/tests/index.test.tsx b/src/goals/CharacterInventory/CharInv/CharacterDetail/tests/index.test.tsx
@@ -2,13 +2,13 @@ import { Provider } from "react-redux";
 import { type ReactTestRenderer, act, create } from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
 
+import CancelConfirmDialog from "components/Dialogs/CancelConfirmDialog";
 import CharacterDetail from "goals/CharacterInventory/CharInv/CharacterDetail";
 import {
   buttonIdCancel,
   buttonIdConfirm,
   buttonIdSubmit,
 } from "goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace";
-import CharacterReplaceDialog from "goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/CharacterReplaceDialog";
 import { defaultState } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes";
 import { type StoreState } from "types";
 import { testInstanceHasText } from "utilities/testRendererUtilities";
@@ -22,12 +22,9 @@ jest.mock("@mui/material", () => {
   };
 });
 
-jest.mock(
-  "goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/FindAndReplaceActions",
-  () => ({
-    findAndReplace: () => mockFindAndReplace(),
-  })
-);
+jest.mock("goals/CharacterInventory/Redux/CharacterInventoryActions", () => ({
+  findAndReplace: () => mockFindAndReplace(),
+}));
 jest.mock("types/hooks", () => {
   return {
     ...jest.requireActual("types/hooks"),
@@ -72,7 +69,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 });