Refactor side content to use translations

RichDom2185 · RichDom2185 · commit 995d85dea2da · 2025-08-15T14:23:39.000+08:00
diff --git a/src/commons/sideContent/content/SideContentAutograder.tsx b/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}
diff --git a/src/commons/sideContent/content/SideContentContestLeaderboard.tsx b/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 (
diff --git a/src/commons/sideContent/content/SideContentHtmlDisplay.tsx b/src/commons/sideContent/content/SideContentHtmlDisplay.tsx
@@ -1,6 +1,8 @@
 import { IconNames } from '@blueprintjs/icons';
 import { bindActionCreators } from '@reduxjs/toolkit';
+import { t } from 'i18next';
 import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { connect, MapDispatchToProps } from 'react-redux';
 import { ResultOutput } from 'src/commons/application/ApplicationTypes';
 
@@ -20,6 +22,7 @@ type DispatchProps = {
 const ERROR_MESSAGE_REGEX = /^Line \d+: /i;
 
 const SideContentHtmlDisplayBase: React.FC<OwnProps & DispatchProps> = props => {
+  const { t } = useTranslation('sideContent', { keyPrefix: 'htmlDisplay' });
   const { content, handleAddHtmlConsoleError, alertSideContent } = props;
 
   useEffect(() => {
@@ -45,7 +48,7 @@ const SideContentHtmlDisplayBase: React.FC<OwnProps & DispatchProps> = props =>
   return (
     <iframe
       className="sa-html-display"
-      title="HTML Display"
+      title={t('title')}
       sandbox="allow-scripts"
       srcDoc={JSON.parse(content)}
       src="about:blank"
@@ -69,7 +72,7 @@ const makeHtmlDisplayTabFrom = (
   handleError: (errorMsg: string) => void,
   workspaceLocation: SideContentLocation
 ): SideContentTab => ({
-  label: 'HTML Display',
+  label: t('sideContent:htmlDisplay.label'),
   iconName: IconNames.MODAL,
   body: (
     <SideContentHtmlDisplay
diff --git a/src/commons/sideContent/content/SideContentResultCard.tsx b/src/commons/sideContent/content/SideContentResultCard.tsx
@@ -1,33 +1,40 @@
 import { Card, Elevation, Pre } from '@blueprintjs/core';
 import classNames from 'classnames';
+import type { TFunction } from 'i18next';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { AutogradingError, AutogradingResult } from '../../assessment/AssessmentTypes';
 
-const buildErrorString = (errors: AutogradingError[]) =>
-  errors
+const buildErrorString = (
+  t: TFunction<'sideContent', 'resultCard'>,
+  errors: AutogradingError[]
+) => {
+  return errors
     .map(error => {
       switch (error.errorType) {
         case 'timeout':
-          return '[TIMEOUT] Submission exceeded time limit for this test case.';
+          return t('timeout');
         case 'syntax':
-          return `[SYNTAX] Line ${error.line}: ${error.errorExplanation}`;
+          return t('syntax', { line: error.line, errorExplanation: error.errorExplanation });
         case 'runtime':
-          return `[RUNTIME] Line ${error.line}: ${error.errorExplanation}`;
+          return t('runtime', { line: error.line, errorExplanation: error.errorExplanation });
         case 'systemError':
-          return `[SYSTEM] ${error.errorMessage}`;
+          return t('systemError', { errorMessage: error.errorMessage });
         default:
-          return `[UNKNOWN] Autograder error: type ${error.errorType}`;
+          return t('unknown', { errorType: error.errorType });
       }
     })
     .join('\n\n');
+};
 
 type Props = {
   index: number;
   result: AutogradingResult;
 };
 
 const SideContentResultCard: React.FC<Props> = ({ index, result }) => {
+  const { t } = useTranslation('sideContent', { keyPrefix: 'resultCard' });
   return (
     <div
       className={classNames('ResultCard', result.resultType === 'pass' ? 'correct' : 'wrong')}
@@ -46,7 +53,7 @@ const SideContentResultCard: React.FC<Props> = ({ index, result }) => {
           {result.expected!}
         </Pre>
         <Pre className="result-actual" data-testid="result-actual">
-          {result.resultType === 'error' ? buildErrorString(result.errors!) : result.actual!}
+          {result.resultType === 'error' ? buildErrorString(t, result.errors!) : result.actual!}
         </Pre>
       </Card>
     </div>
diff --git a/src/commons/sideContent/content/SideContentUpload.tsx b/src/commons/sideContent/content/SideContentUpload.tsx
@@ -1,6 +1,8 @@
 import { FileInput } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { t } from 'i18next';
 import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { SideContentTab, SideContentType } from '../SideContentTypes';
 
@@ -28,6 +30,7 @@ type Props = {
  * This component is responsible for uploading Java class files to bypass the compiler.
  */
 const SideContentUpload: React.FC<Props> = ({ onUpload }) => {
+  const { t } = useTranslation('sideContent', { keyPrefix: 'upload' });
   const [count, setCount] = React.useState(0);
 
   const handleFileUpload: React.ChangeEventHandler<HTMLInputElement> = useCallback(
@@ -53,30 +56,27 @@ const SideContentUpload: React.FC<Props> = ({ onUpload }) => {
 
   return (
     <div>
-      <p>Bypass the compiler and type checker by uploading class files to run in the JVM.</p>
-      <p>
-        Only .class files are accepted. Code in the editor will be ignored when running while this
-        tab is active.
-      </p>
-      <p>Compile the files with the following command:</p>
+      <p>{t('description')}</p>
+      <p>{t('acceptedFiles')}</p>
+      <p>{t('compileCommand')}</p>
       <pre>
-        <code>javac *.java -target 8 -source 8</code>
+        <code>{t('javacCommand')}</code>
       </pre>
-      <p>Avoid running class files downloaded from unknown sources.</p>
+      <p>{t('warning')}</p>
       <p>
-        <strong>Main class must be named Main and uploaded as Main.class.</strong>
+        <strong>{t('mainClass')}</strong>
       </p>
       <FileInput
         inputProps={{ multiple: true, accept: '.class' }}
         onInputChange={handleFileUpload}
-        text={count === 0 ? 'Choose files...' : `${count} file(s) uploaded.`}
+        text={count === 0 ? t('chooseFiles') : `${count} ${t('filesUploaded')}`}
       />
     </div>
   );
 };
 
 const makeUploadTabFrom = (onUpload: (files: UploadResult) => void): SideContentTab => ({
-  label: 'Upload files',
+  label: t('sideContent:upload.label'),
   iconName: IconNames.Upload,
   body: <SideContentUpload onUpload={onUpload} />,
   id: SideContentType.upload
