Show the correct review time in tooltip (#3270)

Also: unify datetime formats between tooltips.
mozilla · Jul 3, 2024 · 86041d9 · 86041d9
1 parent 4fd99f4
commit 86041d9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/pontoon/base/views.py b/pontoon/base/views.py
@@ -415,10 +415,11 @@ def get_translation_history(request):
                 "uid": u.id,
                 "username": u.username,
                 "user_gravatar_url_small": u.gravatar_url(88),
-                "date": t.date.strftime("%b %d, %Y %H:%M"),
-                "date_iso": t.date.isoformat(),
+                "date": t.date,
                 "approved_user": User.display_name_or_blank(t.approved_user),
+                "approved_date": t.approved_date,
                 "rejected_user": User.display_name_or_blank(t.rejected_user),
+                "rejected_date": t.rejected_date,
                 "comments": [c.serialize() for c in t.comments.order_by("timestamp")],
                 "machinery_sources": t.machinery_sources_values,
             }

diff --git a/translate/src/api/translation.ts b/translate/src/api/translation.ts
@@ -30,12 +30,13 @@ export type EntityTranslation = {
 export type HistoryTranslation = {
   readonly approved: boolean;
   readonly approvedUser: string;
+  readonly approvedDate: string | null;
   readonly pretranslated: boolean;
   readonly date: string;
-  readonly dateIso: string;
   readonly fuzzy: boolean;
   readonly pk: number;
   readonly rejected: boolean;
+  readonly rejectedDate: string | null;
   readonly string: string;
   readonly uid: number | null | undefined;
   readonly rejectedUser: string;

diff --git a/translate/src/modules/history/components/HistoryTranslation.test.js b/translate/src/modules/history/components/HistoryTranslation.test.js
@@ -19,7 +19,6 @@ describe('<HistoryTranslationComponent>', () => {
     approvedUser: '',
     pretranslated: false,
     date: '',
-    dateIso: '',
     fuzzy: false,
     pk: 1,
     rejected: false,

diff --git a/translate/src/modules/history/components/HistoryTranslation.tsx b/translate/src/modules/history/components/HistoryTranslation.tsx
@@ -196,17 +196,23 @@ export function HistoryTranslationBase({
 
   const review = {
     id: 'history-translation--unreviewed',
-    vars: { user: '', reviewedDate: new Date(translation.dateIso) },
+    vars: { user: '', reviewedDate: new Date() },
     attrs: { title: true },
   };
   if (translation.approved) {
+    if (translation.approvedDate) {
+      review.vars.reviewedDate = new Date(translation.approvedDate);
+    }
     if (translation.approvedUser) {
       review.vars.user = translation.approvedUser;
       review.id = 'history-translation--approved';
     } else {
       review.id = 'history-translation--approved-anonymous';
     }
   } else if (translation.rejected) {
+    if (translation.rejectedDate) {
+      review.vars.reviewedDate = new Date(translation.rejectedDate);
+    }
     if (translation.rejectedUser) {
       review.vars.user = translation.rejectedUser;
       review.id = 'history-translation--rejected';
@@ -227,6 +233,13 @@ export function HistoryTranslationBase({
     !isReadOnlyEditor;
   let canComment = user.isAuthenticated;
 
+  const customDateFormat = (date: Date) => {
+    return new Intl.DateTimeFormat('en', {
+      dateStyle: 'long',
+      timeStyle: 'medium',
+    }).format(date);
+  };
+
   const className = classNames(
     'translation',
     translation.approved
@@ -282,8 +295,8 @@ export function HistoryTranslationBase({
                 </Localized>
                 <ReactTimeAgo
                   dir='ltr'
-                  date={new Date(translation.dateIso)}
-                  title={`${translation.date} UTC`}
+                  date={new Date(translation.date)}
+                  formatVerboseDate={customDateFormat}
                 />
               </div>
               <menu className='toolbar'>