ui: problemconfig: add i18n

packages/ui-default/components/problemconfig/tree/AddTestcase.tsx

@@ -4,6 +4,7 @@ import {
 import { readSubtasksFromFiles } from '@hydrooj/utils/lib/common';
 import React, { useEffect, useRef } from 'react';
 import { useSelector, useStore } from 'react-redux';
+import { i18n } from 'vj/utils';
 import FileSelectAutoComplete from '../../autocomplete/components/FileSelectAutoComplete';
 import { RootState } from '../reducer';
 
@@ -72,7 +73,7 @@ export function AddTestcase() {
     >
       <div className="bp4-tree-node-content bp4-tree-node-content-0">
         <Icon icon="clean" />&nbsp;
-        <span className="bp4-tree-node-label">Auto detect</span>
+        <span className="bp4-tree-node-label">{i18n('Auto detect')}</span>
       </div>
     </li>
     <li
@@ -85,7 +86,7 @@ export function AddTestcase() {
     >
       <div className="bp4-tree-node-content bp4-tree-node-content-0">
         <Icon icon="clean" />&nbsp;
-        <span className="bp4-tree-node-label">Add testcase</span>
+        <span className="bp4-tree-node-label">{i18n('Add testcase')}</span>
       </div>
     </li>
     <Dialog title="Add testcase" icon="cog" isOpen={open} onClose={() => setOpen(false)}>
@@ -98,7 +99,7 @@ export function AddTestcase() {
               label="Input"
               width="100%"
               onChange={(e) => setInput(e)}
-              placeholder="Input"
+              placeholder={i18n('Input')}
               value={input || ''}
             />
           </div>
@@ -109,20 +110,21 @@ export function AddTestcase() {
               label="Output"
               width="100%"
               onChange={(e) => setOutput(e)}
-              placeholder="Output"
+              placeholder={i18n('Output')}
               value={input || ''}
             />
           </div>
         </div>
       </DialogBody>
-      <DialogFooter actions={
-        <Button
+      <DialogFooter
+        actions={<Button
           className={`primary rounded button${valid ? '' : ' disabled'}`}
           onClick={onConfirm}
           disabled={!valid}
           intent="primary"
           text="Save"
-        />} />
+        />}
+      />
     </Dialog>
   </>);
 }

packages/ui-default/components/problemconfig/tree/SubtaskSettings.tsx

@@ -5,6 +5,7 @@ import {
 } from '@blueprintjs/core';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { i18n } from 'vj/utils';
 import { RootState } from '../reducer';
 
 interface SubtaskSettingsProps {
@@ -41,7 +42,7 @@ export function SubtaskSettings(props: SubtaskSettingsProps) {
   }
 
   return (<>
-    <Dialog title="Set limits" icon="cog" isOpen={open} onClose={() => setOpen(false)}>
+    <Dialog title={i18n('Set time and memory limits')} icon="cog" isOpen={open} onClose={() => setOpen(false)}>
       <DialogBody>
         <ControlGroup fill={true} vertical={false}>
           <InputGroup
@@ -72,10 +73,10 @@ export function SubtaskSettings(props: SubtaskSettingsProps) {
         <span className="bp4-tree-node-caret-none bp4-icon-standard"></span>
         <Icon icon="time" />
         &nbsp;&nbsp;
-        <span className={`bp4-tree-node-label${!(time || props.time) ? ' text-gray' : ''}`}>{time || props.time || '1s'}</span>
+        <span className={`bp4-tree-node-label${time ? '' : ' text-gray'}`}>{time || props.time || '1s'}</span>
         <Icon icon="comparison" />
         &nbsp;&nbsp;
-        <span className={`bp4-tree-node-label${!(memory || props.memory) ? ' text-gray' : ''}`}>{memory || props.memory || '256m'}</span>
+        <span className={`bp4-tree-node-label${memory ? '' : ' text-gray'}`}>{memory || props.memory || '256m'}</span>
         <Icon icon="star" />
         {' '}
         <span className="bp4-tree-node-secondary-label">{score || 0}</span>
@@ -106,7 +107,7 @@ export function GlobalSettings() {
     setOpen(false);
   }
   return (<>
-    <Dialog title="Set limits" icon="cog" isOpen={open} onClose={() => setOpen(false)}>
+    <Dialog title={i18n('Set time and memory limits')} icon="cog" isOpen={open} onClose={() => setOpen(false)}>
       <DialogBody>
         <ControlGroup fill={true} vertical={false}>
           <InputGroup
@@ -129,10 +130,10 @@ export function GlobalSettings() {
       <div className="bp4-tree-node-content">
         <Icon icon="time" />
         &nbsp;&nbsp;
-        <span className={`bp4-tree-node-label${!time ? ' text-gray' : ''}`}>{time || '1s'}</span>
+        <span className={`bp4-tree-node-label${time ? '' : ' text-gray'}`}>{time || '1s'}</span>
         <Icon icon="comparison" />
         {' '}
-        <span className={`bp4-tree-node-secondary-label${!memory ? ' text-gray' : ''}`}>{memory || '256m'}</span>
+        <span className={`bp4-tree-node-secondary-label${memory ? '' : ' text-gray'}`}>{memory || '256m'}</span>
       </div>
     </li>
   </>);

packages/ui-default/components/problemconfig/tree/Testcase.tsx

@@ -4,6 +4,7 @@ import { TestCaseConfig } from 'hydrooj';
 import { omit } from 'lodash';
 import React from 'react';
 import { useDrag } from 'react-dnd';
+import { i18n } from 'vj/utils';
 
 interface TestcaseNodeProps {
   c: TestCaseConfig;
@@ -28,12 +29,12 @@ export function TestcaseNode(props: TestcaseNodeProps) {
       data-selected={selected}
       content={
         <Menu>
-          <MenuItem icon="drawer-left" text="Move to subtask" >
+          <MenuItem icon="drawer-left" text={i18n('Move to subtask')} >
             {subtaskIds.filter((i) => i !== subtaskId).map((i) => (
-              <MenuItem key={i} text={`Subtask ${i}`} />
+              <MenuItem key={i} text={i18n('Subtask {0}', i)} />
             ))}
             {subtaskIds.length <= 1 && (
-              <MenuItem icon="disable" disabled text="No target available" />
+              <MenuItem icon="disable" disabled text={i18n('No target available')} />
             )}
           </MenuItem>
         </Menu>