feat: allow submitting solution by copy-pasting the code directly to a text area

judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemSubmissionForm/ProblemSubmissionForm.jsx

@@ -4,6 +4,7 @@ import { Field, Form } from 'react-final-form';
 
 import { isOutputOnly } from '../../../../modules/api/gabriel/engine';
 import { gradingLanguageNamesMap } from '../../../../modules/api/gabriel/language.js';
+import FormAceEditor from '../../../forms/FormAceEditor/FormAceEditor.jsx';
 import { FormTableFileInput } from '../../../forms/FormTableFileInput/FormTableFileInput';
 import { FormTableSelect2 } from '../../../forms/FormTableSelect2/FormTableSelect2';
 import {
@@ -38,6 +39,16 @@ export default function ProblemSubmissionForm({
     );
   };
 
+  const keys = Object.keys(sourceKeys);
+
+  const isSingleSourceCode = keys.length === 1 && sourceKeys[keys[0]] === 'Source code';
+
+  const renderSourceEditor = gradingLanguage => {
+    const key = keys[0];
+    const fieldText = { name: 'sourceTexts.' + key };
+    return <Field component={FormAceEditor} gradingLanguage={gradingLanguage} {...fieldText} />;
+  };
+
   const renderSourceFields = () => {
     let maxFileSize;
     if (isOutputOnly(gradingEngine)) {
@@ -46,16 +57,18 @@ export default function ProblemSubmissionForm({
       maxFileSize = MaxFileSize300KB;
     }
 
-    return Object.keys(sourceKeys)
-      .sort()
-      .map(key => {
-        const field = {
-          name: 'sourceFiles.' + key,
-          label: sourceKeys[key],
-          validate: composeValidators(Required, maxFileSize, CompatibleFilenameExtensionForGradingLanguage),
-        };
-        return <Field key={key} component={FormTableFileInput} {...field} />;
-      });
+    return keys.sort().map(key => {
+      const fieldFile = {
+        name: 'sourceFiles.' + key,
+        label: isSingleSourceCode ? '... or submit source code file' : sourceKeys[key],
+        validate: composeValidators(maxFileSize, CompatibleFilenameExtensionForGradingLanguage),
+      };
+      return (
+        <>
+          <Field key={key} component={FormTableFileInput} {...fieldFile} />
+        </>
+      );
+    });
   };
 
   const renderGradingLanguageFields = () => {
@@ -76,9 +89,10 @@ export default function ProblemSubmissionForm({
 
   return (
     <Form onSubmit={onSubmit} initialValues={initialValues}>
-      {({ handleSubmit, submitting }) => (
+      {({ values, handleSubmit, submitting }) => (
         <form onSubmit={handleSubmit}>
           {renderWarning()}
+          {isSingleSourceCode && renderSourceEditor(values.gradingLanguage)}
           <table className="programming-problem-submission-form__table">
             <tbody>
               {renderSourceFields()}

judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemSubmissionForm/ProblemSubmissionForm.scss

@@ -1,11 +1,15 @@
 .programming-problem-submission-form__table {
-  width: 300px;
+  width: 100%;
+}
 
-  .bp5-form-group {
-    width: 120px;
-  }
+.programming-problem-submission-form__table_key {
+  width: 120px;
 }
 
 .programming-problem-submission-form__warning {
   margin-bottom: 10px;
 }
+
+form > .form-group-editor {
+  height: 300px;
+}

judgels-client/src/components/forms/validations.js

@@ -30,11 +30,11 @@ export const MaxFileSize100KB = value => {
 };
 
 export const MaxFileSize300KB = value => {
-  return value && value.size <= 300 * 1024 ? undefined : 'File size must be at most 300 KB';
+  return !value || value.size <= 300 * 1024 ? undefined : 'File size must be at most 300 KB';
 };
 
 export const MaxFileSize10MB = value => {
-  return value && value.size <= 10 * 1024 * 1024 ? undefined : 'File size must be at most 10 MB';
+  return !value || value.size <= 10 * 1024 * 1024 ? undefined : 'File size must be at most 10 MB';
 };
 
 export const MaxFileSize20MB = value => {

judgels-client/src/components/forms/validations.test.js

@@ -61,11 +61,13 @@ describe('validations', () => {
   });
 
   test('MaxFileSize300KB', () => {
+    expect(MaxFileSize300KB(undefined)).toBeUndefined();
     expect(MaxFileSize300KB({ size: 500000 })).toBeTruthy();
     expect(MaxFileSize300KB({ size: 300000 })).toBeUndefined();
   });
 
   test('MaxFileSize10MB', () => {
+    expect(MaxFileSize10MB(undefined)).toBeUndefined();
     expect(MaxFileSize10MB({ size: 11000000 })).toBeTruthy();
     expect(MaxFileSize10MB({ size: 10000000 })).toBeUndefined();
   });

judgels-client/src/routes/contests/contests/single/submissions/Programming/modules/contestSubmissionActions.js

@@ -1,6 +1,7 @@
 import { push } from 'connected-react-router';
 
 import { NotFoundError } from '../../../../../../../modules/api/error';
+import { getGradingLanguageEditorSubmissionFilename } from '../../../../../../../modules/api/gabriel/language';
 import { contestSubmissionProgrammingAPI } from '../../../../../../../modules/api/uriel/contestSubmissionProgramming';
 import { selectToken } from '../../../../../../../modules/session/sessionSelectors';
 
@@ -31,17 +32,24 @@ export function getSubmissionWithSource(contestJid, submissionId, language) {
 export function createSubmission(contestJid, contestSlug, problemJid, data) {
   return async (dispatch, getState) => {
     const token = selectToken(getState());
-    let sourceFiles = {};
-    Object.keys(data.sourceFiles).forEach(key => {
-      sourceFiles['sourceFiles.' + key] = data.sourceFiles[key];
+    let sources = {};
+    Object.keys(data.sourceTexts ?? []).forEach(key => {
+      sources['sourceFiles.' + key] = new File(
+        [data.sourceTexts[key]],
+        getGradingLanguageEditorSubmissionFilename(data.gradingLanguage),
+        { type: 'text/plain' }
+      );
+    });
+    Object.keys(data.sourceFiles ?? []).forEach(key => {
+      sources['sourceFiles.' + key] = data.sourceFiles[key];
     });
 
     await contestSubmissionProgrammingAPI.createSubmission(
       token,
       contestJid,
       problemJid,
       data.gradingLanguage,
-      sourceFiles
+      sources
     );
 
     toastActions.showSuccessToast('Solution submitted.');