From 48bb47a01b1e21c1f5ebfb520f09a6bfe687c8b9 Mon Sep 17 00:00:00 2001
From: Liam Mulhall <liammulh@gmail.com>
Date: Wed, 4 Jan 2023 14:26:05 -0700
Subject: [PATCH] feat: add composite stats column

For https://github.com/phetsims/rosetta/issues/348.

Came out of https://github.com/phetsims/qa/issues/869.
---
 src/client/components/StatsInfoButton.jsx       | 13 ++++++++++++-
 .../components/TranslationReportTable.jsx       |  2 +-
 src/client/js/SortKeyEnum.js                    |  2 +-
 .../jsx/getSortedTranslationReportRows.jsx      | 17 ++++++-----------
 src/client/jsx/getTranslationReportRows.jsx     | 14 +-------------
 5 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/client/components/StatsInfoButton.jsx b/src/client/components/StatsInfoButton.jsx
index a8119e9f..f5341942 100644
--- a/src/client/components/StatsInfoButton.jsx
+++ b/src/client/components/StatsInfoButton.jsx
@@ -8,7 +8,18 @@
 
 import infoCircle from '../img/info-circle.svg';
 
-const StatsInfoButton = ( { statsString } ) => {
+const StatsInfoButton = ( { reportObject } ) => {
+  const hasSharedStrings = reportObject.numSharedStrings !== null;
+  let sharedStatsString = 'N/A';
+  if ( hasSharedStrings ) {
+    sharedStatsString = `${reportObject.percentShared}% (${reportObject.numSharedTranslatedStrings} of ${reportObject.numSharedStrings})`;
+  }
+  const simSpecificStatsString = `${reportObject.percentSimSpecific}% (${reportObject.numSimSpecificTranslatedStrings} of ${reportObject.numSimSpecificStrings})`;
+  const commonStatsString = `${reportObject.percentCommon}% (${reportObject.numCommonTranslatedStrings} of ${reportObject.numCommonStrings})`;
+  const statsString = `Statistics for ${reportObject.simTitle}:
+      Sim-Specific Strings: ${simSpecificStatsString}  
+      Shared Strings: ${sharedStatsString}
+      Common Strings: ${commonStatsString}`;
   const buttonStyle = {
     marginRight: '6px',
     padding: '0'
diff --git a/src/client/components/TranslationReportTable.jsx b/src/client/components/TranslationReportTable.jsx
index c80d7227..e58f2db7 100644
--- a/src/client/components/TranslationReportTable.jsx
+++ b/src/client/components/TranslationReportTable.jsx
@@ -86,7 +86,7 @@ const TranslationReportTable = ( { locale, localeName, wantsUntranslated } ) =>
           <th>Translated Strings
             {
               reportPopulated && reportRows.length > 1
-              ? <SortButton onClick={() => handleSortButtonClick( 'gonna need to change this' )}/>
+              ? <SortButton onClick={() => handleSortButtonClick( SortKeyEnum.TOTAL_STRINGS )}/>
               : <></>
             }
           </th>
diff --git a/src/client/js/SortKeyEnum.js b/src/client/js/SortKeyEnum.js
index 8363cbca..8a5d296c 100644
--- a/src/client/js/SortKeyEnum.js
+++ b/src/client/js/SortKeyEnum.js
@@ -10,7 +10,7 @@
 
 const SortKeyEnum = {
   SIM_TITLE: [ 'simTitle' ],
-  TOTAL_STRINGS: [ 'percentTotal, totalTranslatedStrings' ],
+  TOTAL_STRINGS: [ 'percentTotal', 'totalStrings' ],
   SIM_SPECIFIC_PERCENT: [ 'percentSimSpecific', 'numSimSpecificStrings' ],
   COMMON_PERCENT: [ 'percentCommon', 'numCommonStrings' ],
   SHARED_PERCENT: [ 'percentShared', 'numSharedStrings' ]
diff --git a/src/client/jsx/getSortedTranslationReportRows.jsx b/src/client/jsx/getSortedTranslationReportRows.jsx
index f49c513a..350545d3 100644
--- a/src/client/jsx/getSortedTranslationReportRows.jsx
+++ b/src/client/jsx/getSortedTranslationReportRows.jsx
@@ -10,9 +10,9 @@
 import { Link } from 'react-router-dom';
 import getMinutesElapsed from '../../common/getMinutesElapsed.js';
 import publicConfig from '../../common/publicConfig.js';
+import StatsInfoButton from '../components/StatsInfoButton.jsx';
 import alertErrorMessage from '../js/alertErrorMessage.js';
 import SortDirectionEnum from '../js/SortDirectionEnum.js';
-import SortKeyEnum from '../js/SortKeyEnum.js';
 
 /**
  * Return an array of translation report objects (i.e. stats used to make translation report rows) that have
@@ -163,18 +163,13 @@ const getSortedTranslationReportRows = (
       pendingUpdate = '(pending update) ';
     }
 
-    const hasSharedStrings = item.numSharedStrings !== null;
-    let sharedJsx = <td>N/A</td>;
-    if ( hasSharedStrings ) {
-      sharedJsx = <td>{pendingUpdate}{item[ SortKeyEnum.SHARED_PERCENT[ 0 ] ]}% ({item.numSharedTranslatedStrings} of {item.numSharedStrings})</td>;
-    }
-
     translationReportJsx.push(
       <tr key={item.simName}>
-        <td><Link to={`/translate/${locale}/${item.simName}`}>{item.simTitle}</Link></td>
-        <td>{pendingUpdate}{item[ SortKeyEnum.SIM_SPECIFIC_PERCENT[ 0 ] ]}% ({item.numSimSpecificTranslatedStrings} of {item.numSimSpecificStrings})</td>
-        {sharedJsx}
-        <td>{pendingUpdate}{item[ SortKeyEnum.COMMON_PERCENT[ 0 ] ]}% ({item.numCommonTranslatedStrings} of {item.numCommonStrings})</td>
+        <td><Link to={`/translate/${locale}/${item.simName}`}>{item.simTitle}</Link>{pendingUpdate}</td>
+        <td>
+          <StatsInfoButton reportObject={item}/>
+          {item.percentTotal}% ({item.totalTranslatedStrings} of {item.totalStrings})
+        </td>
       </tr>
     );
   }
diff --git a/src/client/jsx/getTranslationReportRows.jsx b/src/client/jsx/getTranslationReportRows.jsx
index 8ded9cd0..080dfbfe 100644
--- a/src/client/jsx/getTranslationReportRows.jsx
+++ b/src/client/jsx/getTranslationReportRows.jsx
@@ -75,24 +75,12 @@ const getTranslationReportRows = (
       pendingUpdate = ' (pending update)';
     }
 
-    // Create the row JSX.
-    const hasSharedStrings = reportObject.numSharedStrings !== null;
-    let sharedStatsString = 'N/A';
-    if ( hasSharedStrings ) {
-      sharedStatsString = `${reportObject.percentShared}% (${reportObject.numSharedTranslatedStrings} of ${reportObject.numSharedStrings})`;
-    }
-    const simSpecificStatsString = `${reportObject.percentSimSpecific}% (${reportObject.numSimSpecificTranslatedStrings} of ${reportObject.numSimSpecificStrings})`;
-    const commonStatsString = `${reportObject.percentCommon}% (${reportObject.numCommonTranslatedStrings} of ${reportObject.numCommonStrings})`;
-    const statsString = `Statistics for ${reportObject.simTitle}:
-      Sim-Specific Strings: ${simSpecificStatsString}  
-      Shared Strings: ${sharedStatsString}
-      Common Strings: ${commonStatsString}`;
     if ( Object.keys( translationReportJsx ).includes( reportObject.simName ) ) {
       translationReportJsx[ reportObject.simName ] = (
         <tr key={reportObject.simName}>
           <td><Link to={`/translate/${locale}/${reportObject.simName}`}>{reportObject.simTitle}</Link>{pendingUpdate}</td>
           <td>
-            <StatsInfoButton statsString={statsString}/>
+            <StatsInfoButton reportObject={reportObject}/>
             {reportObject.percentTotal}% ({reportObject.totalTranslatedStrings} of {reportObject.totalStrings})
           </td>
         </tr>