[Manage Submissions] Score popup modal styling + fixes

[lykimchee]

Summary

Summary generated by Reviewpad on 20 Sep 23 17:22 UTC

This pull request includes three patches:

• Patch 1/3: Style fixes. This patch modifies the JavaScript and CSS files related to managing submissions. It includes changes to improve the styling and formatting of the submission details table.
• Patch 2/3: Fix formatting and styling. This patch further improves the formatting and styling of the submission details table in the JavaScript and CSS files.
• Patch 3/3: Fix undefined error showing up for all problems and scores. This patch fixes an issue where an "undefined" error was being displayed for all problems and scores in the submission details table.

Description

Adds further styling and bug fixes to the score popup modal, mainly those noted from this comment.

Motivation and Context

Part of the Manage Submissions UI overhaul.

How Has This Been Tested?

Style-related issues

1. The “X” button (to close the popup) positioning

Old:

New:

2. The score under each problem has been fixed (no longer bold, still italicized) to follow the Figma prototype

3. Disabled the table rows changing color (to blue) on mouseover, for both the manage submissions main table and the table in the score popup

4. Changed the background color for problem columns to follow the Figma prototype

Old:

New:

5. Added sort icons to header items in score details table

Old:

New:

Bug Fixes

1. Error for auto graded assignment where problem scores don't exist (e.g. created a submission, autograde failed, etc.) => result in error while mapping problem data into the tables Note for reviewer: Currently made this case say undefined in the table popup to users, but the word "undefined" doesn't feel very user-friendly, so would appreciate any suggestions for a substitute!

Old: (for incorrect file upload) (for excused students)

New:

2. Problem max score should have “(Autograded)” after the score if an autograded problem. Note: Would be nice if tester could set up an assignment with a mix of autograded + not autograded problems if possible, because I think there might be an issue with the way I implemented this— I was originally planning to base this on grader_id per problem, but grader_id is in data.scores while problems + scores came from data.submissions, so I used data.autograded to keep it simple...

Old:

New:

Types of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [x] I have run rubocop for style check. If you haven't, run overcommit --install && overcommit --sign to use pre-commit hook for linting
• [ ] My change requires a change to the documentation, which is located at Autolab Docs
• [ ] I have updated the documentation accordingly, included in this PR

[damianhxy]

Unrelated to this PR, but the wrong tags were being used here in submissions/index.html.erb: you should add external_