[MergeDupsCompleted] Give different display for deletions (#3186)

sillsdev · Jul 30, 2024 · eb23ec1 · eb23ec1
1 parent f88891f
commit eb23ec1
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 43 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -436,6 +436,9 @@
     "undo": {
       "undo": "Undo Merge",
       "undoDialog": "Undo this merge?",
+      "deleted": "Deleted:",
+      "undoDelete": "Undo Deletion",
+      "undoDeleteDialog": "Undo this deletion?",
       "undoDisabled": "Undo unavailable"
     }
   },

diff --git a/src/goals/MergeDuplicates/MergeDupsCompleted.tsx b/src/goals/MergeDuplicates/MergeDupsCompleted.tsx
@@ -27,7 +27,9 @@ export default function MergeDupsCompleted(): ReactElement {
         {t("mergeDups.title")}
       </Typography>
       {MergesCount(changes)}
-      {changes.merges?.map(MergeChange)}
+      {changes.merges?.map((m, i) => (
+        <MergeChange change={m} key={m.parentIds[0] ?? i} />
+      ))}
     </>
   );
 }
@@ -43,52 +45,56 @@ export function MergesCount(changes: MergesCompleted): ReactElement {
   );
 }
 
-function MergeChange(change: MergeUndoIds): ReactElement {
+export function MergeChange(props: { change: MergeUndoIds }): ReactElement {
+  const change = props.change;
+  const { t } = useTranslation();
   const handleIsUndoAllowed = (): Promise<boolean> =>
     getFrontierWords().then((words) => doWordsIncludeMerges(words, change));
+  const isDeletion = !change.parentIds.length;
 
   return (
-    <div key={change.parentIds[0] ?? "deleteOnly"}>
-      <Grid
-        container
-        style={{
-          flexWrap: "nowrap",
-          overflow: "auto",
+    <Grid container style={{ flexWrap: "nowrap", overflow: "auto" }}>
+      {isDeletion && <Typography>{t("mergeDups.undo.deleted")}</Typography>}
+      {change.childIds.map((id) => (
+        <WordPaper key={id} wordId={id} />
+      ))}
+      {!isDeletion && (
+        <>
+          <Grid style={{ margin: theme.spacing(1) }}>
+            <ArrowRightAlt
+              fontSize="large"
+              style={{
+                position: "relative",
+                left: "50%",
+                top: "50%",
+                transform: "translate(-50%, -50%)",
+              }}
+            />
+          </Grid>
+          {change.parentIds.map((id) => (
+            <WordPaper key={id} wordId={id} />
+          ))}
+        </>
+      )}
+      <UndoButton
+        buttonIdEnabled={`merge-undo-${change.parentIds.join("-")}`}
+        buttonIdCancel="merge-undo-cancel"
+        buttonIdConfirm="merge-undo-confirm"
+        textIdDialog={
+          isDeletion
+            ? "mergeDups.undo.undoDeleteDialog"
+            : "mergeDups.undo.undoDialog"
+        }
+        textIdDisabled="mergeDups.undo.undoDisabled"
+        textIdEnabled={
+          isDeletion ? "mergeDups.undo.undoDelete" : "mergeDups.undo.undo"
+        }
+        isUndoAllowed={handleIsUndoAllowed}
+        undo={async () => {
+          await undoMerge(change);
         }}
-      >
-        {change.childIds.map((id) => (
-          <WordPaper key={id} wordId={id} />
-        ))}
-        <Grid key={"arrow"} style={{ margin: theme.spacing(1) }}>
-          <ArrowRightAlt
-            fontSize="large"
-            style={{
-              position: "relative",
-              left: "50%",
-              top: "50%",
-              transform: "translate(-50%, -50%)",
-            }}
-          />
-        </Grid>
-        {change.parentIds.length ? (
-          change.parentIds.map((id) => <WordPaper key={id} wordId={id} />)
-        ) : (
-          <WordPaper key={"deleteOnly"} wordId={""} />
-        )}
-        <UndoButton
-          buttonIdEnabled={`merge-undo-${change.parentIds.join("-")}`}
-          buttonIdCancel="merge-undo-cancel"
-          buttonIdConfirm="merge-undo-confirm"
-          textIdDialog="mergeDups.undo.undoDialog"
-          textIdDisabled="mergeDups.undo.undoDisabled"
-          textIdEnabled="mergeDups.undo.undo"
-          isUndoAllowed={handleIsUndoAllowed}
-          undo={async () => {
-            await undoMerge(change);
-          }}
-        />
-      </Grid>
-    </div>
+      />
+    </Grid>
   );
 }
 

diff --git a/src/goals/MergeDuplicates/tests/MergeDupsCompleted.test.tsx b/src/goals/MergeDuplicates/tests/MergeDupsCompleted.test.tsx
@@ -1,7 +1,33 @@
+import { act, create } from "react-test-renderer";
+
 import { MergeUndoIds, Word } from "api/models";
-import { doWordsIncludeMerges } from "goals/MergeDuplicates/MergeDupsCompleted";
+import {
+  MergeChange,
+  doWordsIncludeMerges,
+} from "goals/MergeDuplicates/MergeDupsCompleted";
 import { newWord } from "types/word";
 
+jest.mock("backend", () => ({
+  getFrontierWords: () => Promise.resolve([]),
+  getWord: () => Promise.resolve(undefined),
+}));
+
+describe("MergeChange", () => {
+  const renderMergeChange = async (change: MergeUndoIds): Promise<void> => {
+    await act(async () => {
+      create(<MergeChange change={change} />);
+    });
+  };
+
+  it("renders merge (with parents)", () => {
+    renderMergeChange({ childIds: ["c1", "c2"], parentIds: ["p1, p2"] });
+  });
+
+  it("renders deletion (no parents)", () => {
+    renderMergeChange({ childIds: ["c1", "c2"], parentIds: [] });
+  });
+});
+
 describe("doWordsIncludeMerges", () => {
   it("should return false if words doesn't contain all of the parentIds in merge", () => {
     const merge: MergeUndoIds = {