[MergeDups] Show (read-only) note on entries with a note (#2960)

src/components/DataEntry/DataEntryTable/EntryCellComponents/EntryNote.tsx → src/components/Buttons/NoteButton.tsx

@@ -1,18 +1,18 @@
 import { AddComment, Comment } from "@mui/icons-material";
 import { type ReactElement, useState } from "react";
 
-import { IconButtonWithTooltip } from "components/Buttons";
+import IconButtonWithTooltip from "components/Buttons/IconButtonWithTooltip";
 import { EditTextDialog } from "components/Dialogs";
 
-interface EntryNoteProps {
+interface NoteButtonProps {
   buttonId?: string;
   disabled?: boolean;
   noteText: string;
   updateNote?: (newText: string) => void | Promise<void>;
 }
 
 /** A note adding/editing/viewing button */
-export default function EntryNote(props: EntryNoteProps): ReactElement {
+export default function NoteButton(props: NoteButtonProps): ReactElement {
   const [noteOpen, setNoteOpen] = useState<boolean>(false);
 
   return (

src/components/Buttons/index.ts

@@ -5,6 +5,7 @@ import FlagButton from "components/Buttons/FlagButton";
 import IconButtonWithTooltip from "components/Buttons/IconButtonWithTooltip";
 import LoadingButton from "components/Buttons/LoadingButton";
 import LoadingDoneButton from "components/Buttons/LoadingDoneButton";
+import NoteButton from "components/Buttons/NoteButton";
 import PartOfSpeechButton from "components/Buttons/PartOfSpeechButton";
 import UndoButton from "components/Buttons/UndoButton";
 
@@ -16,6 +17,7 @@ export {
   IconButtonWithTooltip,
   LoadingButton,
   LoadingDoneButton,
+  NoteButton,
   PartOfSpeechButton,
   UndoButton,
 };

src/components/DataEntry/DataEntryTable/EntryCellComponents/tests/EntryNote.test.tsx → src/components/Buttons/tests/NoteButton.test.tsx

@@ -1,12 +1,12 @@
 import { AddComment, Comment } from "@mui/icons-material";
 import {
-  ReactTestInstance,
-  ReactTestRenderer,
+  type ReactTestInstance,
+  type ReactTestRenderer,
   act,
   create,
 } from "react-test-renderer";
 
-import EntryNote from "components/DataEntry/DataEntryTable/EntryCellComponents/EntryNote";
+import NoteButton from "components/Buttons/NoteButton";
 
 const mockText = "Test text";
 
@@ -16,20 +16,20 @@ let testHandle: ReactTestInstance;
 async function renderWithText(text: string): Promise<void> {
   await act(async () => {
     testMaster = create(
-      <EntryNote noteText={text} updateNote={jest.fn()} buttonId="" />
+      <NoteButton noteText={text} updateNote={jest.fn()} buttonId="" />
     );
   });
   testHandle = testMaster.root;
 }
 
-describe("DeleteEntry", () => {
-  it("renders without note", async () => {
+describe("NoteButton", () => {
+  it("renders without text", async () => {
     await renderWithText("");
     expect(testHandle.findAllByType(AddComment).length).toBe(1);
     expect(testHandle.findAllByType(Comment).length).toBe(0);
   });
 
-  it("renders with note", async () => {
+  it("renders with text", async () => {
     await renderWithText(mockText);
     expect(testHandle.findAllByType(AddComment).length).toBe(0);
     expect(testHandle.findAllByType(Comment).length).toBe(1);

src/components/DataEntry/DataEntryTable/EntryCellComponents/index.ts

@@ -1,4 +1,3 @@
 export { default as DeleteEntry } from "components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry";
-export { default as EntryNote } from "components/DataEntry/DataEntryTable/EntryCellComponents/EntryNote";
 export { default as GlossWithSuggestions } from "components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions";
 export { default as VernWithSuggestions } from "components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions";

src/components/DataEntry/DataEntryTable/NewEntry/index.tsx

@@ -12,10 +12,10 @@ import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 
 import { Pronunciation, Word, WritingSystem } from "api/models";
+import { NoteButton } from "components/Buttons";
 import { focusInput } from "components/DataEntry/DataEntryTable";
 import {
   DeleteEntry,
-  EntryNote,
   GlossWithSuggestions,
   VernWithSuggestions,
 } from "components/DataEntry/DataEntryTable/EntryCellComponents";
@@ -301,7 +301,7 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
       <Grid item xs={1} style={gridItemStyle(1)}>
         {!selectedDup?.id && (
           // note is not available if user selected to modify an exiting entry
-          <EntryNote
+          <NoteButton
             buttonId={NewEntryId.ButtonNote}
             noteText={newNote}
             updateNote={setNewNote}

src/components/DataEntry/DataEntryTable/RecentEntry.tsx

@@ -2,9 +2,9 @@ import { Grid } from "@mui/material";
 import { ReactElement, memo, useState } from "react";
 
 import { Pronunciation, Word, WritingSystem } from "api/models";
+import { NoteButton } from "components/Buttons";
 import {
   DeleteEntry,
-  EntryNote,
   GlossWithSuggestions,
   VernWithSuggestions,
 } from "components/DataEntry/DataEntryTable/EntryCellComponents";
@@ -126,7 +126,7 @@ export function RecentEntry(props: RecentEntryProps): ReactElement {
           position: "relative",
         }}
       >
-        <EntryNote
+        <NoteButton
           disabled={editing || props.disabled}
           noteText={props.entry.note.text}
           updateNote={handleUpdateNote}

src/components/DataEntry/DataEntryTable/tests/RecentEntry.test.tsx

@@ -10,9 +10,9 @@ import configureMockStore from "redux-mock-store";
 
 import { Word } from "api/models";
 import { defaultState } from "components/App/DefaultState";
+import { NoteButton } from "components/Buttons";
 import {
   DeleteEntry,
-  EntryNote,
   GlossWithSuggestions,
   VernWithSuggestions,
 } from "components/DataEntry/DataEntryTable/EntryCellComponents";
@@ -94,7 +94,7 @@ describe("ExistingEntry", () => {
     it("disables buttons if changing", async () => {
       await renderWithWord(mockWord);
       const vern = testHandle.findByType(VernWithSuggestions);
-      const note = testHandle.findByType(EntryNote);
+      const note = testHandle.findByType(NoteButton);
       const audio = testHandle.findByType(PronunciationsBackend);
       const del = testHandle.findByType(DeleteEntry);
 
@@ -140,7 +140,7 @@ describe("ExistingEntry", () => {
     it("disables buttons if changing", async () => {
       await renderWithWord(mockWord);
       const gloss = testHandle.findByType(GlossWithSuggestions);
-      const note = testHandle.findByType(EntryNote);
+      const note = testHandle.findByType(NoteButton);
       const audio = testHandle.findByType(PronunciationsBackend);
       const del = testHandle.findByType(DeleteEntry);
 
@@ -185,7 +185,7 @@ describe("ExistingEntry", () => {
   describe("note", () => {
     it("updates text", async () => {
       await renderWithWord(mockWord);
-      testHandle = testHandle.findByType(EntryNote).findByType(EditTextDialog);
+      testHandle = testHandle.findByType(NoteButton).findByType(EditTextDialog);
       await act(async () => {
         testHandle.props.updateText(mockText);
       });

src/components/Dialogs/CancelConfirmDialog.tsx

@@ -9,7 +9,7 @@ import {
 import { type ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import LoadingButton from "components/Buttons/LoadingButton";
+import { LoadingButton } from "components/Buttons";
 
 interface CancelConfirmDialogProps {
   open: boolean;

src/components/WordCard/index.tsx

@@ -12,8 +12,11 @@ import { useTranslation } from "react-i18next";
 
 import { Word } from "api/models";
 import { getUser } from "backend";
-import { FlagButton, IconButtonWithTooltip } from "components/Buttons";
-import { EntryNote } from "components/DataEntry/DataEntryTable/EntryCellComponents";
+import {
+  FlagButton,
+  IconButtonWithTooltip,
+  NoteButton,
+} from "components/Buttons";
 import { PronunciationsBackend } from "components/Pronunciations/PronunciationsBackend";
 import SenseCard from "components/WordCard/SenseCard";
 import SummarySenseCard from "components/WordCard/SummarySenseCard";
@@ -57,7 +60,7 @@ export default function WordCard(props: WordCardProps): ReactElement {
       {!full && (
         <>
           <AudioSummary count={audio.length} />
-          {!!note.text && <EntryNote noteText={note.text} />}
+          {!!note.text && <NoteButton noteText={note.text} />}
           {flag.active && <FlagButton flag={flag} />}
         </>
       )}
@@ -90,7 +93,7 @@ export default function WordCard(props: WordCardProps): ReactElement {
             )}
             {!!note.text && (
               <div style={{ display: "block" }}>
-                <EntryNote noteText={note.text} />
+                <NoteButton noteText={note.text} />
                 <Typography display="inline">{note.text}</Typography>
               </div>
             )}

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 CancelConfirmDialog from "components/Dialogs/CancelConfirmDialog";
+import { CancelConfirmDialog } from "components/Dialogs";
 import { findAndReplace } from "goals/CharacterInventory/Redux/CharacterInventoryActions";
 import { useAppDispatch } from "types/hooks";
 import { TextFieldWithFont } from "utilities/fontComponents";

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

@@ -2,7 +2,7 @@ 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 { CancelConfirmDialog } from "components/Dialogs";
 import CharacterDetail from "goals/CharacterInventory/CharInv/CharacterDetail";
 import {
   buttonIdCancel,

src/goals/CharacterInventory/CharInvCompleted.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import { type Word } from "api/models";
 import { areInFrontier, getWord, revertWords } from "backend";
-import UndoButton from "components/Buttons/UndoButton";
+import { UndoButton } from "components/Buttons";
 import WordCard from "components/WordCard";
 import CharacterStatusText from "goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText";
 import {

src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DropWord.tsx

@@ -12,7 +12,11 @@ import { Droppable } from "react-beautiful-dnd";
 import { useTranslation } from "react-i18next";
 
 import { Flag, ProtectReason, ReasonType } from "api/models";
-import { FlagButton, IconButtonWithTooltip } from "components/Buttons";
+import {
+  FlagButton,
+  IconButtonWithTooltip,
+  NoteButton,
+} from "components/Buttons";
 import MultilineTooltipTitle from "components/MultilineTooltipTitle";
 import DragSense from "goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DragSense";
 import { MergeTreeWord } from "goals/MergeDuplicates/MergeDupsTreeTypes";
@@ -227,6 +231,7 @@ export function DropWordCardHeader(
           text={<MultilineTooltipTitle lines={tooltipTexts} />}
         />
       )}
+      {treeWord.note.text ? <NoteButton noteText={treeWord.note.text} /> : null}
       <FlagButton
         buttonId={`word-${props.wordId}-flag`}
         flag={treeWord.flag}

src/goals/MergeDuplicates/MergeDupsTreeTypes.ts

@@ -1,8 +1,14 @@
 import { v4 } from "uuid";
 
-import { type Flag, type Sense, Status, type Word } from "api/models";
+import {
+  type Flag,
+  type Note,
+  type Sense,
+  Status,
+  type Word,
+} from "api/models";
 import { type Hash } from "types/hash";
-import { newFlag, newSense } from "types/word";
+import { newFlag, newNote, newSense } from "types/word";
 
 export interface MergeTreeSense {
   order: number;
@@ -29,6 +35,7 @@ export interface MergeTreeWord {
   sensesGuids: Hash<string[]>;
   vern: string;
   flag: Flag;
+  note: Note;
   protected: boolean;
 }
 
@@ -54,6 +61,7 @@ export function newMergeTreeWord(
     vern,
     sensesGuids: sensesGuids ?? {},
     flag: newFlag(),
+    note: newNote(),
     protected: false,
   };
 }
@@ -76,7 +84,8 @@ export function convertWordToMergeTreeWord(word: Word): MergeTreeWord {
   word.senses.forEach((sense) => {
     mergeTreeWord.sensesGuids[v4()] = [sense.guid];
   });
-  mergeTreeWord.flag = word.flag;
+  mergeTreeWord.flag = { ...word.flag };
+  mergeTreeWord.note = { ...word.note };
   mergeTreeWord.protected = word.accessibility === Status.Protected;
   return mergeTreeWord;
 }

src/goals/ReviewEntries/ReviewEntriesTable/Cells/FlagCell.tsx

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
 
-import FlagButton from "components/Buttons/FlagButton";
+import { FlagButton } from "components/Buttons";
 import { type CellProps } from "goals/ReviewEntries/ReviewEntriesTable/Cells/CellTypes";
 
 export default function FlagCell(props: CellProps): ReactElement {