feat(translations/differences): visualize how many commits behind translations are (#8338)

client/src/translations/differences/index.tsx

@@ -35,6 +35,8 @@ interface DocumentEdits {
   parentModified: string;
   commitURL: string;
   parentCommitURL: string;
+  sourceCommitsBehindCount: number;
+  sourceCommitURL?: string;
 }
 
 interface Document {
@@ -574,6 +576,13 @@ function DocumentsTable({
         const a = A.mdn_url;
         const b = B.mdn_url;
         return reverse * a.localeCompare(b);
+      } else if (sort === "sourceCommit") {
+        const a = A.edits.sourceCommitsBehindCount;
+        const b = B.edits.sourceCommitsBehindCount;
+        if (b === undefined) {
+          return -1;
+        }
+        return reverse * (b - a);
       } else {
         throw new Error(`Unrecognized sort '${sort}'`);
       }
@@ -606,6 +615,7 @@ function DocumentsTable({
             <TableHead id="popularity" title="Popularity" />
             <TableHead id="modified" title="Last modified" />
             <TableHead id="differences" title="Differences" />
+            <TableHead id="sourceCommit" title="Source Commit" />
           </tr>
         </thead>
         <tbody>
@@ -658,6 +668,14 @@ function DocumentsTable({
                     <LastModified edits={doc.edits} />
                   </td>
                   <td>{doc.differences.total.toLocaleString()}</td>
+                  <td>
+                    <L10nSourceCommitModified
+                      sourceCommitsBehindCount={
+                        doc.edits.sourceCommitsBehindCount
+                      }
+                      sourceCommitURL={doc.edits.sourceCommitURL}
+                    />
+                  </td>
                 </tr>
               );
             })}
@@ -680,6 +698,17 @@ function DocumentsTable({
   );
 }
 
+function L10nSourceCommitModified({
+  sourceCommitsBehindCount,
+  sourceCommitURL,
+}: Pick<DocumentEdits, "sourceCommitsBehindCount" | "sourceCommitURL">) {
+  if (!sourceCommitURL) return <p>Metadata does not exist.</p>;
+
+  return (
+    <a href={sourceCommitURL}>{`${sourceCommitsBehindCount} commits behind`}</a>
+  );
+}
+
 function LastModified({ edits }: { edits: DocumentEdits }) {
   const modified = dayjs(edits.modified);
   const parentModified = dayjs(edits.parentModified);

server/translations.ts

@@ -3,6 +3,7 @@ import path from "node:path";
 
 import express from "express";
 import { fdir } from "fdir";
+import { execSync } from "node:child_process";
 
 import { getPopularities, Document, Translation } from "../content/index.js";
 import {
@@ -121,6 +122,8 @@ export function findDocuments({ locale }) {
   };
 }
 
+const commitHashCache = {};
+
 function getDocument(filePath) {
   function packagePopularity(document, parentDocument) {
     return {
@@ -141,22 +144,52 @@ function getDocument(filePath) {
     };
   }
 
+  function getCommitBehindFromLatest(filename, commitHash) {
+    if (commitHashCache[filename] === undefined) {
+      try {
+        commitHashCache[filename] = execSync(
+          `git rev-list --count ${commitHash}..HEAD -- ${filename}`,
+          {
+            cwd: CONTENT_ROOT,
+          }
+        ).toString();
+      } catch (err) {
+        // console.log(err)
+      }
+    }
+    // console.log(`${filename}: ${commitHashCache[filename]}`)
+    return commitHashCache[filename];
+  }
+
   function packageEdits(document, parentDocument) {
-    const commitURL = getLastCommitURL(
-      document.fileInfo.root,
-      document.metadata.hash
-    );
-    const parentCommitURL = getLastCommitURL(
-      parentDocument.fileInfo.root,
-      parentDocument.metadata.hash
-    );
-    const modified = document.metadata.modified;
-    const parentModified = parentDocument.metadata.modified;
+    const {
+      fileInfo: { root: fileRoot },
+      metadata: { hash: fileHash, modified, l10n },
+    } = document;
+    const {
+      fileInfo: { root: parentFileRoot, path: parentFilePath },
+      metadata: { hash: parentFileHash, parentModified },
+    } = parentDocument;
+
+    const commitURL = getLastCommitURL(fileRoot, fileHash);
+    const parentCommitURL = getLastCommitURL(parentFileRoot, parentFileHash);
+    let sourceCommitURL;
+    let sourceCommitsBehindCount;
+    if (l10n?.sourceCommit) {
+      sourceCommitURL = getLastCommitURL(CONTENT_ROOT, l10n.sourceCommit);
+      sourceCommitsBehindCount = getCommitBehindFromLatest(
+        parentFilePath,
+        l10n.sourceCommit
+      );
+    }
+
     return {
       commitURL,
       parentCommitURL,
       modified,
       parentModified,
+      sourceCommitURL,
+      sourceCommitsBehindCount,
     };
   }