feat: create StatsInfoButton component

For #348. Came out of phetsims/qa#869.
phetsims · Jan 4, 2023 · 23746ab · 23746ab
1 parent 701ff47
commit 23746ab
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/src/client/components/StatsInfoButton.jsx b/src/client/components/StatsInfoButton.jsx
@@ -0,0 +1,30 @@
+// Copyright 2022, University of Colorado Boulder
+
+/**
+ *
+ *
+ * @author Liam Mulhall <[email protected]>
+ */
+
+import infoCircle from '../img/info-circle.svg';
+
+const StatsInfoButton = ( { statsString } ) => {
+  const buttonStyle = {
+    marginRight: '6px',
+    padding: '0'
+  };
+  return (
+    <button
+      onClick={() => window.alert( statsString )}
+      style={buttonStyle}
+      type='button'
+      className='btn btn-light'
+      data-bs-toggle='tooltip'
+      data-bs-placement='top'
+      title={statsString}>
+      <img src={infoCircle} alt='info icon'/>
+    </button>
+  );
+};
+
+export default StatsInfoButton;
diff --git a/src/client/jsx/getTranslationReportRows.jsx b/src/client/jsx/getTranslationReportRows.jsx
@@ -10,8 +10,8 @@
 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 getSortedTranslationReportRows from './getSortedTranslationReportRows.jsx';
-import infoCircle from '../img/info-circle.svg';
 
 /**
  * Return an array of translation report table rows, i.e. return an array of JSX. These rows are put into the
@@ -87,28 +87,12 @@ const getTranslationReportRows = (
       Sim-Specific Strings: ${simSpecificStatsString}  
       Shared Strings: ${sharedStatsString}
       Common Strings: ${commonStatsString}`;
-    const buttonStyle = {
-      marginRight: '6px',
-      padding: '0'
-    };
-    const statsInfoJsx = (
-      <button
-        onClick={() => window.alert( statsString )}
-        style={buttonStyle}
-        type='button'
-        className='btn btn-light'
-        data-bs-toggle='tooltip'
-        data-bs-placement='top'
-        title={statsString}>
-        <img src={infoCircle} alt='info icon'/>
-      </button>
-    );
     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>
-            {statsInfoJsx}
+            <StatsInfoButton statsString={statsString}/>
             {reportObject.percentTotal}% ({reportObject.totalTranslatedStrings} of {reportObject.totalStrings})
           </td>
         </tr>