Improving the markdown edit and the exercise texts edit form.

krulis-martin · krulis-martin · commit d94b5d7ac1ae · 2025-12-09T19:35:41.000+01:00
diff --git a/src/components/forms/EditAssignmentLocalizedTextsForm/EditAssignmentLocalizedTextsForm.js b/src/components/forms/EditAssignmentLocalizedTextsForm/EditAssignmentLocalizedTextsForm.js
@@ -4,11 +4,11 @@ import { reduxForm, FieldArray } from 'redux-form';
 import { FormattedMessage } from 'react-intl';
 import { lruMemoize } from 'reselect';
 
-import { WarningIcon } from '../../icons';
+import { RefreshIcon, WarningIcon } from '../../icons';
 import LocalizedTextsFormField from '../LocalizedTextsFormField';
 import SubmitButton from '../SubmitButton';
-import Explanation from '../../widgets/Explanation';
 import Callout from '../../widgets/Callout';
+import Button, { TheButtonGroup } from '../../widgets/TheButton';
 import {
   getLocalizedTextsInitialValues,
   validateLocalizedTextsFormData,
@@ -64,6 +64,7 @@ class EditAssignmentLocalizedTextsForm extends Component {
       dirty,
       submitting,
       handleSubmit,
+      reset,
       submitFailed,
       submitSucceeded,
       asyncValidating = false,
@@ -93,17 +94,25 @@ class EditAssignmentLocalizedTextsForm extends Component {
         {warning && !error && <Callout variant="warning">{warning}</Callout>}
 
         <div className="text-center">
-          <SubmitButton
-            id="editAssignmentLocalizedTextsForm"
-            invalid={invalid}
-            submitting={submitting}
-            dirty={dirty}
-            hasSucceeded={submitSucceeded}
-            hasFailed={submitFailed}
-            handleSubmit={handleSubmit(this.onSubmitWrapper)}
-            asyncValidating={asyncValidating}
-            messages={submitButtonMessages}
-          />
+          <TheButtonGroup>
+            {dirty && (
+              <Button type="reset" onClick={reset} variant="danger">
+                <RefreshIcon gapRight={2} />
+                <FormattedMessage id="generic.reset" defaultMessage="Reset" />
+              </Button>
+            )}
+            <SubmitButton
+              id="editAssignmentLocalizedTextsForm"
+              invalid={invalid}
+              submitting={submitting}
+              dirty={dirty}
+              hasSucceeded={submitSucceeded}
+              hasFailed={submitFailed}
+              handleSubmit={handleSubmit(this.onSubmitWrapper)}
+              asyncValidating={asyncValidating}
+              messages={submitButtonMessages}
+            />
+          </TheButtonGroup>
 
           {submitFailed && (
             <span className="ms-4 text-danger">
diff --git a/src/components/forms/Fields/MarkdownTextAreaField.js b/src/components/forms/Fields/MarkdownTextAreaField.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Form, FormLabel, Row, Col, Modal } from 'react-bootstrap';
+import classnames from 'classnames';
 
 import TextAreaField from './TextAreaField.js';
 import Markdown from '../../widgets/Markdown';
@@ -42,7 +43,7 @@ class MarkdownTextAreaField extends Component {
 
   render() {
     const {
-      meta: { error, warning },
+      meta: { dirty, error, warning },
       label = null,
       input: { name, value },
       disabled,
@@ -60,8 +61,15 @@ class MarkdownTextAreaField extends Component {
               <FormLabel className={error ? 'text-danger' : warning ? 'text-warning' : undefined}>{label}</FormLabel>
             )}
             <div
-              className={`${styles.preview} ${value.length === 0 ? styles.previewEmpty : ''} ${styles.clickable} mb-3`}
-              onDoubleClick={this.showDialog}>
+              className={classnames({
+                [styles.preview]: true,
+                [styles.previewEmpty]: value.length === 0,
+                [styles.clickable]: !disabled,
+                [styles.disabled]: disabled,
+                [styles.dirty]: dirty,
+                'mb-3': true,
+              })}
+              onDoubleClick={disabled ? null : this.showDialog}>
               <Icon icon="pencil" className={styles.editIcon} />
               {value.length === 0 && (
                 <>
@@ -180,6 +188,7 @@ class MarkdownTextAreaField extends Component {
 
 MarkdownTextAreaField.propTypes = {
   meta: PropTypes.shape({
+    dirty: PropTypes.bool,
     error: PropTypes.any,
     warning: PropTypes.any,
   }),
diff --git a/src/components/forms/Fields/MarkdownTextAreaField.less b/src/components/forms/Fields/MarkdownTextAreaField.less
@@ -13,18 +13,18 @@
   padding-bottom: 0.75rem;
 }
 
-.clickable {
+.clickable:not(.disabled) {
   cursor: pointer;
   position: relative;
 }
 
-.clickable:hover {
+.clickable:not(.disabled):hover {
   background: #eeeee0;
   border-color: #eec;
   box-shadow: 0 0 3px #ffa;
 }
 
-.clickable .editIcon {
+.clickable:not(.disabled) .editIcon {
   position: absolute;
   text-rendering: auto;
   top: 0.5rem;
@@ -33,9 +33,12 @@
   height: 1.5rem;
   opacity: 0;
 }
-.clickable:hover .editIcon{
+.clickable:not(.disabled):hover .editIcon{
   opacity: 0.3;
 }
+.clickable.disabled .editIcon {
+  display:none;
+}
 
 .editorToggle {
   margin-top: 0.20rem;
@@ -50,3 +53,13 @@
   resize: none;
   height: calc(90vh - 6rem);
 }
+
+.preview.disabled {
+  background: #ccc;
+  opacity: 0.75;
+}
+
+.preview.dirty {
+  background: #f4f4ff;
+  border-color: #cce;
+}
diff --git a/src/components/forms/LocalizedTextsFormField/SharedExerciseAssignmentLocalizedFields.js b/src/components/forms/LocalizedTextsFormField/SharedExerciseAssignmentLocalizedFields.js
@@ -47,10 +47,18 @@ const SharedExerciseAssignmentLocalizedFields = ({ prefix, enabled, previewPrepr
       maxLength={1024}
       disabled={!enabled}
       label={
-        <FormattedMessage
-          id="app.editAssignmentForm.localized.link"
-          defaultMessage="Link to an external complete description:"
-        />
+        <>
+          <FormattedMessage
+            id="app.editAssignmentForm.localized.link"
+            defaultMessage="Link to an external complete description:"
+          />
+          <Explanation id="exercise-link-explanation">
+            <FormattedMessage
+              id="app.editAssignmentForm.localized.linkExplanation"
+              defaultMessage="An URL pointing to an external Markdown document containing the complete exercise description. If the document is accessible in the cross-site mode, ReCodEx will use it to download and render the description seamlessly. If you wish to emphasize, this is a link and visualize it as such, consider using a Markdown link in the 'Complete description' field above."
+            />
+          </Explanation>
+        </>
       }
       validate={isURL}
     />
diff --git a/src/locales/cs.json b/src/locales/cs.json
@@ -327,6 +327,7 @@
   "app.editAssignmentForm.localized.description": "Krátký popis pro vedoucí:",
   "app.editAssignmentForm.localized.descriptionExplanation": "Tento krátký popis je viditelný pouze pro vedoucí a měl by stručně shrnovat úlohu. V textu můžete použít klíčové identifikátory odkazů na soubory úlohy (%%link-key%%), které budou po vykreslení Markdownu nahrazeny správnými URL pro stažení souborů.",
   "app.editAssignmentForm.localized.link": "Odkaz na externí (kompletní) zadání:",
+  "app.editAssignmentForm.localized.linkExplanation": "URL odkazující na externí Markdown dokument obsahující kompletní popis úlohy. Pokud je dokument stažitelný z cizích stránek (cross-origin), ReCodEx jej stáhne a vykreslí namísto interního textu. Pokud naopak chcete zdůraznit, že se jedná o externí odkaz a vizualizovat jej jako takový, zvažte použití Markdown odkazu v poli 'Kompletní zadání' výše.",
   "app.editAssignmentForm.localized.studentHint": "Dodatečná nápověda pro studenty:",
   "app.editAssignmentForm.localized.studentHintExplanation": "Tato nápověda je svázána výhradně se zadanou úlohou a není tedy ovlivněna synchronizací s původní úlohou. Nicméně v tomto formuláři jsou dostupné pouze lokalizace, které jsou povoleny v zadání úlohy.",
   "app.editAssignmentForm.localized.urlValidation": "Daný řetězec neobsahuje platné URL.",
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -327,6 +327,7 @@
   "app.editAssignmentForm.localized.description": "Short description for supervisors:",
   "app.editAssignmentForm.localized.descriptionExplanation": "This descriptions is visible only to supervisors and should briefly summarize the exercise. You can use exercise file link keys in the text (%%link-key%%) which will be replaced with proper URLs for file downloads in after Markdown rendering.",
   "app.editAssignmentForm.localized.link": "Link to an external complete description:",
+  "app.editAssignmentForm.localized.linkExplanation": "An URL pointing to an external Markdown document containing the complete exercise description. If the document is accessible in the cross-site mode, ReCodEx will use it to download and render the description seamlessly. If you wish to emphasize, this is a link and visualize it as such, consider using a Markdown link in the 'Complete description' field above.",
   "app.editAssignmentForm.localized.studentHint": "Additional hints for students:",
   "app.editAssignmentForm.localized.studentHintExplanation": "These hints are assignment-specific and they do not synchronize with the exercise texts. However, only localizations that are enabled in the exercise specification are available for hints.",
   "app.editAssignmentForm.localized.urlValidation": "Given string is not a valid URL.",
diff --git a/src/pages/ExerciseAssignments/ExerciseAssignments.js b/src/pages/ExerciseAssignments/ExerciseAssignments.js
@@ -80,7 +80,7 @@ class ExerciseAssignments extends Component {
   }
 
   multiAssignFormInitialValues = lruMemoize(
-    (visibleGroups, runtimeEnvironments, solutionFilesLimit, solutionSizeLimit) => {
+    (visibleGroups, runtimeEnvironments, solutionFilesLimit, solutionSizeLimit, localizedTexts) => {
       const groups = visibleGroups.reduce((acc, { id }) => {
         acc[`id${id}`] = false;
         return acc;
@@ -97,6 +97,7 @@ class ExerciseAssignments extends Component {
         groups,
         runtimeEnvironmentIds: Object.keys(enabledRuntime),
         enabledRuntime,
+        localizedTexts,
       });
     }
   );
@@ -106,8 +107,8 @@ class ExerciseAssignments extends Component {
 
     return Promise.all(
       formData.groups.map(groupId => {
-        return assignExercise(groupId).then(({ value: { id, localizedTexts, version } }) =>
-          editAssignment(id, Object.assign({}, { localizedTexts, version }, formData))
+        return assignExercise(groupId).then(({ value: { id, version } }) =>
+          editAssignment(id, Object.assign({}, { version }, formData))
         );
       })
     );
@@ -220,7 +221,8 @@ class ExerciseAssignments extends Component {
                                     assignableGroups,
                                     exercise.runtimeEnvironments,
                                     exercise.solutionFilesLimit,
-                                    exercise.solutionSizeLimit
+                                    exercise.solutionSizeLimit,
+                                    exercise.localizedTexts
                                   )}
                                   onSubmit={this.assignExercise}
                                   groups={assignableGroups}
