[Data Cleanup] Redesign goal options/history page (#3836)

Author: imnasnainaec

Backend.Tests/Controllers/UserEditControllerTests.cs

@@ -150,8 +150,9 @@ public async Task TestAddGoalToUserEdit()
 
             await _userEditController.UpdateUserEditGoal(ProjId, userEdit.Id, newEdit);
 
-            var allUserEdits = await _userEditRepo.GetAllUserEdits(ProjId);
-            Assert.That(allUserEdits, Does.Contain(updatedUserEdit).UsingPropertiesComparer());
+            var repoUserEdit = await _userEditRepo.GetUserEdit(ProjId, userEdit.Id);
+            newEdit.Modified = repoUserEdit!.Edits.FirstOrDefault(e => e.Guid == newEdit.Guid)!.Modified;
+            Assert.That(repoUserEdit, Is.EqualTo(updatedUserEdit).UsingPropertiesComparer());
         }
 
         [Test]

Backend/Models/UserEdit.cs

@@ -13,22 +13,15 @@ public class UserEdit
         [Required]
         [BsonId]
         [BsonRepresentation(BsonType.ObjectId)]
-        public string Id { get; set; }
+        public string Id { get; set; } = "";
 
         [Required]
         [BsonElement("edits")]
-        public List<Edit> Edits { get; set; }
+        public List<Edit> Edits { get; set; } = [];
 
         [Required]
         [BsonElement("projectId")]
-        public string ProjectId { get; set; }
-
-        public UserEdit()
-        {
-            Id = "";
-            ProjectId = "";
-            Edits = new();
-        }
+        public string ProjectId { get; set; } = "";
 
         /// <summary> Create a deep copy. </summary>
         public UserEdit Clone()
@@ -66,7 +59,7 @@ public class Edit
         [BsonElement("guid")]
         [BsonGuidRepresentation(GuidRepresentation.CSharpLegacy)]
 #pragma warning disable CA1720
-        public Guid Guid { get; set; }
+        public Guid Guid { get; set; } = Guid.NewGuid();
 #pragma warning restore CA1720
 
         /// <summary> Integer representation of enum GoalType in src/types/goals.ts </summary>
@@ -76,24 +69,20 @@ public class Edit
 
         [Required]
         [BsonElement("stepData")]
-        public List<string> StepData { get; set; }
+        public List<string> StepData { get; set; } = [];
 
         [Required]
         [BsonElement("changes")]
-        public string Changes { get; set; }
+        public string Changes { get; set; } = "{}";
 
-        public Edit()
-        {
-            Guid = Guid.NewGuid();
-            GoalType = 0;
-            StepData = new();
-            Changes = "{}";
-        }
+        [BsonElement("modified")]
+        public DateTime? Modified { get; set; }
 
         /// <summary> Create a deep copy. </summary>
         public Edit Clone()
         {
             var clone = (Edit)MemberwiseClone();
+            clone.Modified = Modified is null ? null : new DateTime(Modified.Value.Ticks);
             clone.StepData = StepData.Select(sd => sd).ToList();
             return clone;
         }

Backend/Services/UserEditService.cs

@@ -33,6 +33,8 @@ public UserEditService(IUserEditRepository userEditRepo)
                 return new Tuple<bool, Guid?>(false, null);
             }
 
+            edit.Modified = DateTime.UtcNow;
+
             // Update existing Edit if guid exists, otherwise add new one at end of List.
             var editIndex = userEdit.Edits.FindLastIndex(e => e.Guid == edit.Guid);
             if (editIndex > -1)
@@ -64,6 +66,7 @@ public async Task<bool> AddStepToGoal(string projectId, string userEditId, Guid
             {
                 return false;
             }
+            edit.Modified = DateTime.UtcNow;
             edit.StepData.Add(stepString);
             return await _userEditRepo.Replace(projectId, userEditId, userEdit);
         }
@@ -87,6 +90,7 @@ public async Task<bool> UpdateStepInGoal(
             {
                 return false;
             }
+            edit.Modified = DateTime.UtcNow;
             edit.StepData[stepIndex] = stepString;
             return await _userEditRepo.Replace(projectId, userEditId, userEdit);
         }

public/locales/en/translation.json

@@ -318,25 +318,32 @@
     "progressMerge": "Merge Set {{ val1 }} of {{ val2 }}"
   },
   "createStrWordInv": {
-    "title": "Create Structural Word Inventory"
+    "title": "Create Structural Word Inventory",
+    "description": "NOT IMPLEMENTED"
   },
   "handleFlags": {
-    "title": "Handle Flags"
+    "title": "Handle Flags",
+    "description": "NOT IMPLEMENTED"
   },
   "reviewDeferredDups": {
-    "title": "Review Deferred Duplicates"
+    "title": "Review Deferred Duplicates",
+    "description": "Revisit potential duplicates that were deferred during Merge Duplicates."
   },
   "spellCheckGloss": {
-    "title": "Spell Check Gloss"
+    "title": "Spell Check Gloss",
+    "description": "NOT IMPLEMENTED"
   },
   "validateChars": {
-    "title": "Validate Characters"
+    "title": "Validate Characters",
+    "description": "NOT IMPLEMENTED"
   },
   "validateStrWords": {
-    "title": "Validate Structural Words"
+    "title": "Validate Structural Words",
+    "description": "NOT IMPLEMENTED"
   },
   "reviewEntries": {
     "title": "Review Entries",
+    "description": "View, sort, filter, and edit entries in the project.",
     "allEntriesPerPageOption": "All",
     "editSense": "Edit sense",
     "discardChanges": "Discard changes?",
@@ -375,7 +382,8 @@
     }
   },
   "charInventory": {
-    "title": "Create Character Inventory",
+    "title": "Check Orthography",
+    "description": "Review characters used in the spelling of vernacular words and check for typos.",
     "characters": "characters",
     "examples": "Examples",
     "occurrences": "occurrences",
@@ -418,6 +426,7 @@
   },
   "mergeDups": {
     "title": "Merge Duplicates",
+    "description": "Review potential duplicates identified by The Combine and merge or eliminate true duplicates.",
     "helpText": {
       "dragCard": "Drag a card here to merge",
       "saveAndContinue": "Save changes and load a new set of words",

src/api/models/edit.ts

@@ -42,4 +42,10 @@ export interface Edit {
    * @memberof Edit
    */
   changes: string;
+  /**
+   *
+   * @type {string}
+   * @memberof Edit
+   */
+  modified?: string | null;
 }

src/api/models/user-edit.ts

@@ -38,4 +38,10 @@ export interface UserEdit {
    * @memberof UserEdit
    */
   projectId: string;
+  /**
+   *
+   * @type {string}
+   * @memberof UserEdit
+   */
+  modified?: string | null;
 }

src/components/GoalTimeline/GoalHistoryButton.tsx

@@ -0,0 +1,80 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { Fragment, ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+
+import { CharInvChangesGoalList } from "goals/CharacterInventory/CharInvCompleted";
+import { CharInvChanges } from "goals/CharacterInventory/CharacterInventoryTypes";
+import { MergesCount } from "goals/MergeDuplicates/MergeDupsCompleted";
+import { MergesCompleted } from "goals/MergeDuplicates/MergeDupsTypes";
+import { EditsCount } from "goals/ReviewEntries/ReviewEntriesCompleted";
+import { EntriesEdited } from "goals/ReviewEntries/ReviewEntriesTypes";
+import { Goal, GoalName } from "types/goals";
+import { goalNameToIcon } from "utilities/goalUtilities";
+
+interface GoalHistoryButtonProps {
+  goal: Goal;
+  onClick: () => void;
+}
+
+export default function GoalHistoryButton(
+  props: GoalHistoryButtonProps
+): ReactElement {
+  const { goal, onClick } = props;
+  const { i18n, t } = useTranslation();
+
+  const modifiedFormatted = goal.modified
+    ? new Date(goal.modified).toLocaleString(i18n.resolvedLanguage, {
+        day: "numeric",
+        hour: "numeric",
+        hour12: true,
+        minute: "2-digit",
+        month: "short",
+        weekday: "short",
+        year: "numeric",
+      })
+    : null;
+
+  return (
+    <Button
+      onClick={onClick}
+      sx={{ alignItems: "flex-start", minWidth: "225px", textAlign: "start" }}
+      variant="outlined"
+    >
+      <Stack spacing={1}>
+        {/* Goal name */}
+        <Typography variant="h6">
+          <Box
+            component="span" // to be inline with the title
+            sx={{ marginInlineEnd: 1, verticalAlign: "middle" }}
+          >
+            {goalNameToIcon(goal.name)}
+          </Box>
+          {t(goal.name + ".title")}
+        </Typography>
+
+        {/* Change datetime */}
+        {!!goal.modified && (
+          <Typography variant="caption">{modifiedFormatted}</Typography>
+        )}
+
+        {/* Change summary */}
+        {!!goal.changes && <div>{getCompletedGoalInfo(goal)}</div>}
+      </Stack>
+    </Button>
+  );
+}
+
+function getCompletedGoalInfo(goal: Goal): ReactElement {
+  const { changes, name } = goal;
+  switch (name) {
+    case GoalName.CreateCharInv:
+      return CharInvChangesGoalList(changes as CharInvChanges);
+    case GoalName.MergeDups:
+    case GoalName.ReviewDeferredDups:
+      return MergesCount(changes as MergesCompleted);
+    case GoalName.ReviewEntries:
+      return EditsCount(changes as EntriesEdited);
+    default:
+      return <Fragment />;
+  }
+}