Merge branch 'master' into filter_modal

Changelog.md

@@ -27,6 +27,7 @@
 - Prevent Jupyter notebook from reloading when an annotation is added (#6656)
 - Added a button allowing graders to view a random incomplete submission (#6641)
 - Added a filter modal allowing graders to specify filters on and re-order results (#6642)
+- Add icons to submission and result grading action buttons (#6666)
 
 ## [v2.2.3]
 - Fix bug where in some circumstances the wrong result would be displayed to students (#6465)

app/assets/javascripts/Components/Result/left_pane.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {Tab, Tabs, TabList, TabPanel} from "react-tabs";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 import {AnnotationPanel} from "./annotation_panel";
 import {FeedbackFilePanel} from "./feedback_file_panel";
@@ -130,11 +131,10 @@ export class LeftPane extends React.Component {
                     this.props.result_id
                   )}
                 >
-                  <input
-                    type="submit"
-                    value={I18n.t("automated_tests.run_tests")}
-                    disabled={!this.props.can_run_tests}
-                  />
+                  <button type="submit" disabled={!this.props.can_run_tests}>
+                    <FontAwesomeIcon icon="fa-solid fa-rocket" />
+                    {I18n.t("automated_tests.run_tests")}
+                  </button>
                   <input type="hidden" name="authenticity_token" value={AUTH_TOKEN} />
                 </form>
               </div>

app/assets/javascripts/Components/Result/submission_selector.jsx

@@ -30,33 +30,45 @@ export class SubmissionSelector extends React.Component {
         className={className}
         disabled={disabled}
         style={{alignSelf: "flex-end", width: "140px"}}
+        title={buttonText}
       >
         {icon}
-        {buttonText}
+        <span className="button-text">{buttonText}</span>
       </button>
     );
   };
 
   renderReleaseMarksButton() {
     if (!this.props.can_release) return "";
 
-    let buttonText, disabled;
+    let buttonText, disabled, icon;
     if (this.props.released_to_students) {
       buttonText = I18n.t("submissions.unrelease_marks");
       disabled = false;
+      icon = (
+        <span className="fa-layers fa-fw">
+          <FontAwesomeIcon
+            icon="fa-solid fa-envelope-circle-check"
+            color={document.documentElement.style.getPropertyValue("--disabled_text")}
+          />
+          <FontAwesomeIcon icon="fa-solid fa-slash" />
+        </span>
+      );
     } else {
       buttonText = I18n.t("submissions.release_marks");
       disabled = this.props.marking_state !== "complete";
+      icon = <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />;
     }
     return (
       <button
         className="release"
         onClick={this.props.setReleasedToStudents}
         disabled={disabled}
         style={{alignSelf: "flex-end"}}
+        title={buttonText}
       >
-        <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />
-        {buttonText}
+        {icon}
+        <span className="button-text">{buttonText}</span>
       </button>
     );
   }
@@ -68,10 +80,10 @@ export class SubmissionSelector extends React.Component {
           className="fullscreen-exit"
           onClick={this.props.toggleFullscreen}
           style={{alignSelf: "flex-end"}}
-          title="Alt + Enter"
+          title={`${I18n.t("results.fullscreen_exit")} (Alt + Enter)`}
         >
           <FontAwesomeIcon icon="fa-solid fa-compress" />
-          {I18n.t("results.fullscreen_exit")}
+          <span className="button-text">{I18n.t("results.fullscreen_exit")}</span>
         </button>
       );
     } else {
@@ -80,10 +92,10 @@ export class SubmissionSelector extends React.Component {
           className="fullscreen-enter"
           onClick={this.props.toggleFullscreen}
           style={{alignSelf: "flex-end"}}
-          title="Alt + Enter"
+          title={`${I18n.t("results.fullscreen_enter")} (Alt + Enter)`}
         >
           <FontAwesomeIcon icon="fa-solid fa-expand" />
-          {I18n.t("results.fullscreen_enter")}
+          <span className="button-text">{I18n.t("results.fullscreen_enter")}</span>
         </button>
       );
     }
@@ -95,9 +107,10 @@ export class SubmissionSelector extends React.Component {
         className={"button"}
         href={Routes.print_course_result_path(this.props.course_id, this.props.result_id)}
         style={{alignSelf: "flex-end"}}
+        title={I18n.t("results.print")}
       >
         <FontAwesomeIcon icon={"fa-solid fa-print"} />
-        {I18n.t("results.print")}
+        <span className="button-text">{I18n.t("results.print")}</span>
       </a>
     );
   }

app/assets/javascripts/Components/groups_manager.jsx

@@ -25,18 +25,24 @@ class GroupsManager extends React.Component {
   componentDidMount() {
     this.fetchData();
     // TODO: Remove reliance on global modal
-    $(document).ready(() => {
-      $("#create_group_dialog form").on("ajax:success", () => {
-        modalCreate.close();
-        this.fetchData();
-      });
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", this.componentDidMountCB);
+    } else {
+      this.componentDidMountCB();
+    }
+  }
 
-      $("#rename_group_dialog form").on("ajax:success", () => {
-        modal_rename.close();
-        this.fetchData();
-      });
+  componentDidMountCB = () => {
+    $("#create_group_dialog form").on("ajax:success", () => {
+      modalCreate.close();
+      this.fetchData();
     });
-  }
+
+    $("#rename_group_dialog form").on("ajax:success", () => {
+      modal_rename.close();
+      this.fetchData();
+    });
+  };
 
   fetchData = () => {
     fetch(Routes.course_assignment_groups_path(this.props.course_id, this.props.assignment_id), {
@@ -89,14 +95,21 @@ class GroupsManager extends React.Component {
     } else {
       modalCreate.open();
       $("#new_group_name").val("");
-      $(function () {
-        $("#modal-create-close").click(function () {
-          modalCreate.close();
-        });
-      });
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", this.createGroupCB);
+      } else {
+        this.createGroupCB();
+      }
     }
   };
 
+  createGroupCB = () => {
+    $("#modal-create-close").click(function () {
+      modalCreate.close();
+    });
+  };
+
   createAllGroups = () => {
     $.get({
       url: Routes.create_groups_when_students_work_alone_course_assignment_groups_path(

app/assets/javascripts/Components/peer_review_table.jsx

@@ -186,23 +186,27 @@ class PeerReviewsActionBox extends React.Component {
 
     completeButton = (
       <button onClick={this.props.completeResults} disabled={this.props.disabled}>
+        <FontAwesomeIcon icon="fa-solid fa-circle-check" />
         {I18n.t("results.set_to_complete")}
       </button>
     );
 
     incompleteButton = (
       <button onClick={this.props.incompleteResults} disabled={this.props.disabled}>
+        <FontAwesomeIcon icon="fa-solid fa-pen" />
         {I18n.t("results.set_to_incomplete")}
       </button>
     );
     if (this.props.can_manage) {
       releaseMarksButton = (
         <button disabled={this.props.disabled} onClick={this.props.releaseMarks}>
+          <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />
           {I18n.t("submissions.release_marks")}
         </button>
       );
       unreleaseMarksButton = (
         <button disabled={this.props.disabled} onClick={this.props.unreleaseMarks}>
+          <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />
           {I18n.t("submissions.unrelease_marks")}
         </button>
       );

app/assets/javascripts/Components/repo_browser.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {render} from "react-dom";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {SubmissionFileManager} from "./submission_file_manager";
 
 class RepoBrowser extends React.Component {
@@ -167,16 +168,18 @@ class ManualCollectionForm extends React.Component {
               {I18n.t("submissions.collect.apply_late_penalty")}
             </label>
           </p>
-          <input
+          <button
             type="submit"
             name="commit"
-            value={I18n.t("submissions.collect.this_revision")}
             onClick={event => {
               if (!confirm(I18n.t("submissions.collect.overwrite_warning"))) {
                 event.preventDefault();
               }
             }}
-          />
+          >
+            <FontAwesomeIcon icon="fa-solid fa-file-import" />
+            {I18n.t("submissions.collect.this_revision")}
+          </button>
         </form>
       </fieldset>
     );

app/assets/javascripts/Components/submission_table.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {render} from "react-dom";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 import {CheckboxTable, withSelection} from "./markus_with_selection_hoc";
 import {
@@ -462,54 +463,100 @@ class SubmissionsActionBox extends React.Component {
       showReleaseUrlsButton;
 
     completeButton = (
-      <button onClick={this.props.completeResults} disabled={this.props.disabled}>
-        {I18n.t("results.set_to_complete")}
+      <button
+        onClick={this.props.completeResults}
+        disabled={this.props.disabled}
+        title={I18n.t("results.set_to_complete")}
+      >
+        <FontAwesomeIcon icon="fa-solid fa-circle-check" />
+        <span className="button-text">{I18n.t("results.set_to_complete")}</span>
       </button>
     );
 
     incompleteButton = (
-      <button onClick={this.props.incompleteResults} disabled={this.props.disabled}>
-        {I18n.t("results.set_to_incomplete")}
+      <button
+        onClick={this.props.incompleteResults}
+        disabled={this.props.disabled}
+        title={I18n.t("results.set_to_incomplete")}
+      >
+        <FontAwesomeIcon icon="fa-solid fa-pen" />
+        <span className="button-text">{I18n.t("results.set_to_incomplete")}</span>
       </button>
     );
     if (this.props.can_collect) {
       collectButton = (
-        <button onClick={this.props.collectSubmissions} disabled={this.props.disabled}>
-          {I18n.t("submissions.collect.submit")}
+        <button
+          onClick={this.props.collectSubmissions}
+          disabled={this.props.disabled}
+          title={I18n.t("submissions.collect.submit")}
+        >
+          <FontAwesomeIcon icon="fa-solid fa-file-import" />
+          <span className="button-text">{I18n.t("submissions.collect.submit")}</span>
         </button>
       );
 
       releaseMarksButton = (
-        <button disabled={this.props.disabled} onClick={this.props.releaseMarks}>
-          {I18n.t("submissions.release_marks")}
+        <button
+          disabled={this.props.disabled}
+          onClick={this.props.releaseMarks}
+          title={I18n.t("submissions.release_marks")}
+        >
+          <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />
+          <span className="button-text">{I18n.t("submissions.release_marks")}</span>
         </button>
       );
       unreleaseMarksButton = (
-        <button disabled={this.props.disabled} onClick={this.props.unreleaseMarks}>
-          {I18n.t("submissions.unrelease_marks")}
+        <button
+          disabled={this.props.disabled}
+          onClick={this.props.unreleaseMarks}
+          title={I18n.t("submissions.unrelease_marks")}
+        >
+          <span className="fa-layers fa-fw">
+            <FontAwesomeIcon
+              icon="fa-solid fa-envelope-circle-check"
+              color={document.documentElement.style.getPropertyValue("--disabled_text")}
+            />
+            <FontAwesomeIcon icon="fa-solid fa-slash" />
+          </span>
+          <span className="button-text">{I18n.t("submissions.unrelease_marks")}</span>
         </button>
       );
       if (this.props.release_with_urls) {
         showReleaseUrlsButton = (
-          <button onClick={this.props.showReleaseUrls} disabled={this.props.disabled}>
-            {I18n.t("submissions.show_release_tokens")}
+          <button
+            onClick={this.props.showReleaseUrls}
+            disabled={this.props.disabled}
+            title={I18n.t("submissions.show_release_tokens")}
+          >
+            <FontAwesomeIcon icon="fa-solid fa-link" />
+            <span className="button-text">{I18n.t("submissions.show_release_tokens")}</span>
           </button>
         );
       }
     }
     if (this.props.can_run_tests) {
       runTestsButton = (
-        <button onClick={this.props.runTests} disabled={this.props.disabled}>
-          {I18n.t("submissions.run_tests")}
+        <button
+          onClick={this.props.runTests}
+          disabled={this.props.disabled}
+          title={I18n.t("submissions.run_tests")}
+        >
+          <FontAwesomeIcon icon="fa-solid fa-rocket" />
+          <span className="button-text">{I18n.t("submissions.run_tests")}</span>
         </button>
       );
     }
 
     let downloadGroupingFilesButton = (
-      <button onClick={this.props.downloadGroupingFiles} disabled={this.props.disabled}>
-        {I18n.t("download_the", {
-          item: I18n.t("activerecord.models.submission.other"),
-        })}
+      <button
+        onClick={this.props.downloadGroupingFiles}
+        disabled={this.props.disabled}
+        title={I18n.t("download_the", {item: I18n.t("activerecord.models.submission.other")})}
+      >
+        <FontAwesomeIcon icon="fa-solid fa-download" />
+        <span className="button-text">
+          {I18n.t("download_the", {item: I18n.t("activerecord.models.submission.other")})}
+        </span>
       </button>
     );