feat: add ability to sort shared columns

For #347.

Came out of phetsims/qa#869.

src/client/components/TranslationReportTable.jsx

@@ -93,7 +93,7 @@ const TranslationReportTable = ( { locale, localeName, wantsUntranslated } ) =>
           <th>Shared Strings
             {
               reportPopulated && reportRows.length > 1
-              ? <SortButton onClick={() => handleSortButtonClick( 'need to put sort key here' )}/>
+              ? <SortButton onClick={() => handleSortButtonClick( SortKeyEnum.SHARED_PERCENT )}/>
               : <></>
             }
           </th>

src/client/js/SortKeyEnum.js

@@ -9,7 +9,8 @@
 const SortKeyEnum = {
   SIM_TITLE: 'simTitle',
   SIM_SPECIFIC_PERCENT: 'simSpecificPercent',
-  COMMON_PERCENT: 'commonPercent'
+  COMMON_PERCENT: 'commonPercent',
+  SHARED_PERCENT: 'sharedPercent'
 };
 
 Object.freeze( SortKeyEnum );

src/client/jsx/getSortedTranslationReportRows.jsx

@@ -12,6 +12,7 @@ import getMinutesElapsed from '../../common/getMinutesElapsed.js';
 import publicConfig from '../../common/publicConfig.js';
 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
@@ -25,17 +26,18 @@ const getReportObjectsWithPercentages = reportObjects => {
   for ( const reportObject of reportObjects ) {
     const simSpecificPercent = Math.floor( ( reportObject.numSimSpecificTranslatedStrings / reportObject.numSimSpecificStrings ) * 100 );
     const commonPercent = Math.floor( ( reportObject.numCommonTranslatedStrings / reportObject.numCommonStrings ) * 100 );
+    const hasSharedStrings = reportObject.numSharedStrings !== null && reportObject.numSharedTranslatedStrings !== null;
+
+    // By default, set shared percent to 0. We do this because otherwise the table wouldn't be sortable.
+    let sharedPercent = 0;
+    if ( hasSharedStrings ) {
+      sharedPercent = Math.floor( ( reportObject.numSharedTranslatedStrings / reportObject.numSharedStrings ) * 100 );
+    }
     reportObjectsWithPercents.push( {
-      simName: reportObject.simName,
-      simTitle: reportObject.simTitle,
+      ...reportObject,
       commonPercent: commonPercent,
-      numCommonStrings: reportObject.numCommonStrings,
-      numCommonTranslatedStrings: reportObject.numCommonTranslatedStrings,
       simSpecificPercent: simSpecificPercent,
-      numSimSpecificStrings: reportObject.numSimSpecificStrings,
-      numSimSpecificTranslatedStrings: reportObject.numSimSpecificTranslatedStrings,
-      isDirty: reportObject.isDirty,
-      timestamp: reportObject.timestamp
+      sharedPercent: sharedPercent
     } );
   }
   return reportObjectsWithPercents;
@@ -98,6 +100,7 @@ const getSortedTranslationReportRows = (
 ) => {
 
   // Get report objects we're interested in.
+  // We could want to sort the published sims or the unpublished sims.
   const reportObjectsToSort = [];
   for ( const simName of listOfSims ) {
     for ( const reportObject of reportObjects ) {
@@ -133,11 +136,18 @@ const getSortedTranslationReportRows = (
       pendingUpdate = '(pending update) ';
     }
 
+    const hasSharedStrings = item.numSharedStrings !== null && item.numSharedTranslatedStrings !== null;
+    let sharedJsx = <td>N/A</td>;
+    if ( hasSharedStrings ) {
+      sharedJsx = <td>{pendingUpdate}{item[ SortKeyEnum.SHARED_PERCENT ]}% ({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.simSpecificPercent}% ({item.numSimSpecificTranslatedStrings} of {item.numSimSpecificStrings})</td>
-        <td>{pendingUpdate}{item.commonPercent}% ({item.numCommonTranslatedStrings} of {item.numCommonStrings})</td>
+        <td>{pendingUpdate}{item[ SortKeyEnum.SIM_SPECIFIC_PERCENT ]}% ({item.numSimSpecificTranslatedStrings} of {item.numSimSpecificStrings})</td>
+        {sharedJsx}
+        <td>{pendingUpdate}{item[ SortKeyEnum.COMMON_PERCENT ]}% ({item.numCommonTranslatedStrings} of {item.numCommonStrings})</td>
       </tr>
     );
   }

src/client/jsx/getTranslationReportRows.jsx

@@ -79,7 +79,7 @@ const getTranslationReportRows = (
     // Create the row JSX.
     const simSpecificPercent = Math.floor( ( reportObject.numSimSpecificTranslatedStrings / reportObject.numSimSpecificStrings ) * 100 );
     let sharedPercent = 0;
-    const hasSharedStrings = reportObject.numSharedStrings !== undefined && reportObject.numSharedTranslatedStrings !== undefined;
+    const hasSharedStrings = reportObject.numSharedStrings !== null && reportObject.numSharedTranslatedStrings !== null;
     let sharedJsx = <td>N/A</td>;
     const commonPercent = Math.floor( ( reportObject.numCommonTranslatedStrings / reportObject.numCommonStrings ) * 100 );
     if ( hasSharedStrings ) {

src/server/translationApi/translationReport/getTranslationReportObject.js

@@ -27,7 +27,9 @@ const getTranslationReportObject = async (
     numCommonStrings: null,
     numCommonTranslatedStrings: null,
     numSimSpecificStrings: null,
-    numSimSpecificTranslatedStrings: wantsUntranslated === 'true' ? 0 : null
+    numSimSpecificTranslatedStrings: wantsUntranslated === 'true' ? 0 : null,
+    numSharedStrings: null,
+    numSharedTranslatedStrings: null
   };
 
   // If the user is in development environment, and they set the short report
@@ -46,6 +48,8 @@ const getTranslationReportObject = async (
     translationReportObject.numCommonTranslatedStrings = getRandomInt( NUMERATOR_MIN, NUMERATOR_MAX );
     translationReportObject.numSimSpecificStrings = getRandomInt( DENOMINATOR_MIN, DENOMINATOR_MAX );
     translationReportObject.numSimSpecificTranslatedStrings = wantsUntranslated === 'true' ? 0 : getRandomInt( DENOMINATOR_MIN, DENOMINATOR_MAX );
+    translationReportObject.numSharedStrings = getRandomInt( DENOMINATOR_MIN, DENOMINATOR_MAX );
+    translationReportObject.numSharedTranslatedStrings = getRandomInt( NUMERATOR_MIN, NUMERATOR_MAX );
     return translationReportObject;
   }
 
@@ -106,9 +110,6 @@ const getTranslationReportObject = async (
   // If there are shared strings for this sim, we need to get the stats for those.
   if ( categorizedStringKeys.shared.length > 0 ) {
 
-    translationReportObject.numSharedStrings = 0;
-    translationReportObject.numSharedTranslatedStrings = 0;
-
     // It's possible a sim shares strings with multiple sims, hence the loop.
     for ( const sharedSim of categorizedStringKeys.sharedSims ) {
 
@@ -136,7 +137,7 @@ const getTranslationReportObject = async (
           sharedCategorizedStringKeys,
           sharedStringKeysWithRepoName
         );
-        translationReportObject.numSharedStrings += Object
+        translationReportObject.numSharedStrings = Object
           .values( sharedEnglishStringKeysAndValues )
           .filter( value => value !== noLongerUsedFlag ).length;
 
@@ -148,7 +149,7 @@ const getTranslationReportObject = async (
             locale,
             sharedCategorizedStringKeys
           );
-          translationReportObject.numSharedTranslatedStrings += Object
+          translationReportObject.numSharedTranslatedStrings = Object
             .keys( sharedTranslatedStringKeysAndValues )
             .filter( key => {
               return sharedTranslatedStringKeysAndValues[ key ] !== ''