Set up more frontend i18n part 1 (#3306)

* Fix typing and remove unused import

* Migrate some strings into translation files

* Register and use migrated translations

* Add machine translations for Mandarin

* Refactor welcome page to use CSS and translations

* Add and use Stepper translations

* Remove old Stepper

* Move side content to separate namespace

* Move remaining side content strings

* Add add register side content machine translations

* Refactor side content to use translations

* Fix result card not being registered

* Refactor CSE default text to own component

* Use new CSE machine translations

* Register Chinese language for translation

* Use translation files in more side content components

* Update dataviz to use translations

* Add TODO and update label

* Update session management

* Remove now-unused constant

* Update stories translations

* Fix lint

* Fix welcome page translations

* Revert SICP changes

* Update test snapshots

Author: RichDom2185

src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap

@@ -444,8 +444,7 @@ exports[`CSE Machine component renders correctly 1`] = `
     id="cse-machine-default-text"
   >
     <span>
-      The CSE machine generates control, stash and environment model diagrams following a notation introduced in
-       
+      The CSE machine generates control, stash and environment model diagrams following a notation introduced in 
       <a
         href="https://sourceacademy.org/sicpjs/3.2"
         rel="noopener noreferrer"
@@ -455,11 +454,11 @@ exports[`CSE Machine component renders correctly 1`] = `
           Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
         </i>
       </a>
+      .
     </span>
-    .
     <br />
     <br />
-     On this tab, the REPL will be hidden from view, so do check that your code has no errors before running the stepper. You may use this tool by running your program and then dragging the slider above to see the state of the control, stash and environment at different stages in the evaluation of your program. Clicking on the fast-forward button (double chevron) will take you to the next breakpoint in your program
+    On this tab, the REPL will be hidden from view, so do check that your code has no errors before running the stepper. You may use this tool by running your program and then dragging the slider above to see the state of the control, stash and environment at different stages in the evaluation of your program. Clicking on the fast-forward button (double chevron) will take you to the next breakpoint in your program.
     <br />
     <br />
     <div

src/commons/sideContent/content/SideContentAutograder.tsx

@@ -1,6 +1,7 @@
 import { Button, Collapse, Icon, PopoverPosition, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { AutogradingResult, Testcase } from '../../assessment/AssessmentTypes';
 import ControlButton from '../../ControlButton';
@@ -28,12 +29,50 @@ type OwnProps = {
 };
 
 const SideContentAutograder: React.FC<SideContentAutograderProps> = props => {
-  const [showsTestcases, setTestcasesShown] = React.useState(true);
-  const [showsResults, setResultsShown] = React.useState(true);
+  const { t } = useTranslation('sideContent', { keyPrefix: 'autograder' });
+  const [showsTestcases, setTestcasesShown] = useState(true);
+  const [showsResults, setResultsShown] = useState(true);
 
   const { testcases, autogradingResults, handleTestcaseEval, workspaceLocation } = props;
 
-  const testcaseCards = React.useMemo(
+  const autograderTooltip = useMemo(
+    () => (
+      <div className="autograder-help-tooltip">
+        <p>{t('tooltip.clickTestcase')}</p>
+        <p>{t('tooltip.executeAll')}</p>
+        <p>{t('tooltip.backgroundInfo')}</p>
+        <p>{t('tooltip.privateTestcases')}</p>
+      </div>
+    ),
+    [t]
+  );
+
+  const testcasesHeader = useMemo(
+    () => (
+      <div className="testcases-header" data-testid="testcases-header">
+        {columnHeader('header-fn', t('headers.testcase'))}
+        {columnHeader('header-expected', t('headers.expected'))}
+        {columnHeader('header-actual', t('headers.actual'))}
+      </div>
+    ),
+    [t]
+  );
+
+  const resultsHeader = useMemo(
+    () => (
+      <div className="results-header" data-testid="results-header">
+        <div className="header-data">
+          {columnHeader('header-sn', t('headers.sn'))}
+          {columnHeader('header-status', t('headers.status'))}
+        </div>
+        {columnHeader('header-expected', t('headers.expected'))}
+        {columnHeader('header-actual', t('headers.actual'))}
+      </div>
+    ),
+    [t]
+  );
+
+  const testcaseCards = useMemo(
     () =>
       testcases.length > 0 ? (
         <div className="testcaseCards">
@@ -50,13 +89,13 @@ const SideContentAutograder: React.FC<SideContentAutograderProps> = props => {
         </div>
       ) : (
         <div className="noResults" data-testid="noResults">
-          There are no testcases provided for this question.
+          {t('noTestcases')}
         </div>
       ),
-    [testcases, handleTestcaseEval, workspaceLocation]
+    [testcases, testcasesHeader, t, handleTestcaseEval, workspaceLocation]
   );
 
-  const resultCards = React.useMemo(
+  const resultCards = useMemo(
     () =>
       autogradingResults.length > 0 ? (
         <div>
@@ -67,17 +106,17 @@ const SideContentAutograder: React.FC<SideContentAutograderProps> = props => {
         </div>
       ) : (
         <div className="noResults" data-testid="noResults">
-          There are no results to show.
+          {t('noResults')}
         </div>
       ),
-    [autogradingResults]
+    [autogradingResults, resultsHeader, t]
   );
 
-  const toggleTestcases = React.useCallback(() => {
+  const toggleTestcases = useCallback(() => {
     setTestcasesShown(!showsTestcases);
   }, [showsTestcases]);
 
-  const toggleResults = React.useCallback(() => setResultsShown(!showsResults), [showsResults]);
+  const toggleResults = useCallback(() => setResultsShown(!showsResults), [showsResults]);
 
   return (
     <div className="Autograder">
@@ -87,59 +126,29 @@ const SideContentAutograder: React.FC<SideContentAutograderProps> = props => {
         minimal={true}
         onClick={toggleTestcases}
       >
-        <span>Testcases</span>
+        <span>{t('testcases')}</span>
         <Tooltip content={autograderTooltip} placement={PopoverPosition.LEFT}>
           <Icon icon={IconNames.HELP} />
         </Tooltip>
       </Button>
       <Collapse isOpen={showsTestcases} keepChildrenMounted={true}>
         {testcaseCards}
       </Collapse>
-      {collapseButton('Autograder Results', showsResults, toggleResults)}
+      {collapseButton(t('results'), showsResults, toggleResults)}
       <Collapse isOpen={showsResults} keepChildrenMounted={true}>
         {resultCards}
       </Collapse>
     </div>
   );
 };
 
-const autograderTooltip = (
-  <div className="autograder-help-tooltip">
-    <p>Click on each testcase below to execute it with the program in the editor.</p>
-    <p>
-      To execute all testcases at once, evaluate the program in the editor with this tab active.
-    </p>
-    <p>A green or red background indicates a passed or failed testcase respectively.</p>
-    <p>Private testcases (only visible to staff when grading) have a grey background.</p>
-  </div>
-);
-
 const columnHeader = (colClass: string, colTitle: string) => (
   <div className={colClass}>
     {colTitle}
     <Icon icon={IconNames.CARET_DOWN} />
   </div>
 );
 
-const testcasesHeader = (
-  <div className="testcases-header" data-testid="testcases-header">
-    {columnHeader('header-fn', 'Testcase')}
-    {columnHeader('header-expected', 'Expected result')}
-    {columnHeader('header-actual', 'Actual result')}
-  </div>
-);
-
-const resultsHeader = (
-  <div className="results-header" data-testid="results-header">
-    <div className="header-data">
-      {columnHeader('header-sn', 'S/N')}
-      {columnHeader('header-status', 'Testcase status')}
-    </div>
-    {columnHeader('header-expected', 'Expected result')}
-    {columnHeader('header-actual', 'Actual result')}
-  </div>
-);
-
 const collapseButton = (label: string, isOpen: boolean, toggleFunc: () => void) => (
   <ControlButton
     label={label}

src/commons/sideContent/content/SideContentContestLeaderboard.tsx

@@ -1,6 +1,7 @@
 import { Button, Collapse, Icon, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ContestEntry } from '../../assessment/AssessmentTypes';
 import { SideContentType } from '../SideContentTypes';
@@ -26,6 +27,7 @@ type StateProps = {
  *  handleContestEntryClick: displays contest entry answer in assessment workspace editor}
  */
 const SideContentContestLeaderboard: React.FC<SideContentContestLeaderboardProps> = props => {
+  const { t } = useTranslation('sideContent', { keyPrefix: 'contestLeaderboard' });
   const { orderedContestEntries, handleContestEntryClick, leaderboardType } = props;
   const [showLeaderboard, setShowLeaderboard] = useState(true);
 
@@ -35,19 +37,19 @@ const SideContentContestLeaderboard: React.FC<SideContentContestLeaderboardProps
 
   const leaderboardTitle = useMemo(() => {
     return leaderboardType === SideContentType.scoreLeaderboard
-      ? 'Score Leaderboard'
+      ? t('titles.score')
       : leaderboardType === SideContentType.popularVoteLeaderboard
-        ? 'Popular Vote Leaderboard'
-        : 'Contest Leaderboard';
-  }, [leaderboardType]);
+        ? t('titles.popularVote')
+        : t('titles.default');
+  }, [leaderboardType, t]);
 
   const contestLeaderboardTooltipContent = useMemo(() => {
     return leaderboardType === SideContentType.scoreLeaderboard
-      ? 'View the highest scoring contest entries!'
+      ? t('tooltips.score')
       : leaderboardType === SideContentType.popularVoteLeaderboard
-        ? 'View the most popular contest entries!'
-        : 'View the top-rated contest entries!';
-  }, [leaderboardType]);
+        ? t('tooltips.popularVote')
+        : t('tooltips.default');
+  }, [leaderboardType, t]);
 
   const columnHeader = (colClass: string, colTitle: string) => (
     <div className={colClass}>
@@ -59,19 +61,19 @@ const SideContentContestLeaderboard: React.FC<SideContentContestLeaderboardProps
   const contestEntryHeader = useMemo(() => {
     return (
       <div className="leaderboard-header">
-        {columnHeader('header-entryid', 'Student Name')}
-        {columnHeader('header-entryrank', 'Rank')}
+        {columnHeader('header-entryid', t('headers.studentName'))}
+        {columnHeader('header-entryrank', t('headers.rank'))}
         {columnHeader(
           'header-score',
           leaderboardType === SideContentType.scoreLeaderboard
-            ? 'Calculated Score'
+            ? t('headers.score.calculated')
             : leaderboardType === SideContentType.popularVoteLeaderboard
-              ? 'Popularity Score'
-              : 'Metric'
+              ? t('headers.score.popularity')
+              : t('headers.score.default')
         )}
       </div>
     );
-  }, [leaderboardType]);
+  }, [leaderboardType, t]);
 
   const contestEntryCards = useMemo(
     () => (
@@ -87,11 +89,11 @@ const SideContentContestLeaderboard: React.FC<SideContentContestLeaderboardProps
             />
           ))
         ) : (
-          <div className="noResults">There are no eligible contest leaderboard entries found.</div>
+          <div className="noResults">{t('noEntries')}</div>
         )}
       </div>
     ),
-    [handleContestEntryClick, orderedContestEntries, contestEntryHeader]
+    [handleContestEntryClick, orderedContestEntries, contestEntryHeader, t]
   );
 
   return (

src/commons/sideContent/content/SideContentContestVoting.tsx

@@ -2,6 +2,7 @@ import { Button, Card, Classes, Collapse, Elevation, Icon, Pre, Tooltip } from '
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ContestEntry } from '../../assessment/AssessmentTypes';
 
@@ -34,6 +35,7 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
   handleContestEntryClick,
   handleVotingSubmissionChange
 }) => {
+  const { t } = useTranslation('sideContent', { keyPrefix: 'contestVoting' });
   const [showContestEntries, setShowContestEntries] = useState(true);
   const [currentDraggedItem, setCurrentDraggedItem] = useState<HTMLElement | null>(null);
   const [hoveredTier, setHoveredTier] = useState<string | null>(null);
@@ -166,21 +168,22 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
             </div>
           </div>
         ) : (
-          <div className="noResults">There are no eligible entries for voting found.</div>
+          <div className="noResults">{t('noEntries')}</div>
         )}
       </div>
     ),
     [
-      isValid,
-      canSave,
+      tierBoard,
       sortedContestEntries,
-      handleContestEntryClick,
-      handleDragEnd,
-      handleDragEnter,
-      handleDragLeave,
       handleDragOver,
+      handleDragLeave,
+      handleDragEnter,
       handleDrop,
-      tierBoard
+      t,
+      isValid,
+      canSave,
+      handleDragEnd,
+      handleContestEntryClick
     ]
   );
 
@@ -209,15 +212,11 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
       <Button
         className="collapse-button"
         icon={showContestEntries ? IconNames.CARET_DOWN : IconNames.CARET_RIGHT}
-        minimal={true}
+        variant="minimal"
         onClick={() => setShowContestEntries(!showContestEntries)}
       >
-        <span>Contest Voting</span>
-        <Tooltip
-          content={
-            <span>Rank your favourite contest entries from tiers D (worst) to S (best)!</span>
-          }
-        >
+        <span>{t('title')}</span>
+        <Tooltip content={<span>{t('tooltip')}</span>}>
           <Icon icon={IconNames.HELP} />
         </Tooltip>
       </Button>