[UI/UX:InstructorUI] Further Improve Editor UX#12218
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #12218 +/- ##
=========================================
Coverage 21.71% 21.71%
Complexity 9612 9612
=========================================
Files 268 268
Lines 36070 36070
Branches 475 475
=========================================
Hits 7832 7832
Misses 27767 27767
Partials 471 471
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
Rkoester47
left a comment
There was a problem hiding this comment.
I tested each of the 5 listed features on the editor for a grade configuration I uploaded myself (simple Python in the Sample course). All of the features listed in the PR functioned as described with no issues. Particularly I uploaded a .mp3 file to the editor and attempted to click it, confirming that the error message displays. While the binary file type check is not fully comprehensive, it does seem to cover all common use cases.
Overall the UI elements on this part of the page have been cleaned up and improved, and the user experience is certainly in a better state with these changes. As far as I can tell, no previous functionality has been impacted by these changes.
Why is this Change Important & Necessary?
In preparation for modularizing the gradeable configuration editor for use in various areas of the site, there were several small tweaks that could be made to improve the UI and UX of the feature. This PR further builds on changes from #11991 and #12003.
What is the New Behavior?
Various changes to the gradeable configuration editor's UI to improve UX, see below:
1) Opening and Closing Folders:
Before, the entire file structure would be displayed at all times. This could become cumbersome when there were many folders and many files. Now, the contents of folders are toggled on click, and the folder icon is updated accordingly.
2) Realigned Files:
Though #12003 aimed to fix file alignment, it fell short due to root level files having the same indentation multiplication as nested files. This PR removes the indentation argument from the
display_config_filesmacro, instead applying a set indentation to each nested level of files. All icons of each level should now be perfectly aligned at all times.Before:
After:
3) Close on Repeat Click:
Selecting a file opened the editor, but selecting that same file again did not close it. Now, the editor closes on repeat click, using the same functionality as clicking the
Cancelbutton.4) Binary File Check:
Implemented a trivial binary file check in Twig:
This is likely not the best way to check for binaries, but it covers the common types, preventing the user, in most cases, from receiving the "File type not supported" error by giving the files non-clickable appearance and functionality:
If a binary file is included that is not part of this check, the file will appear clickable, and on click, a simple error message will display.
5) Remove Scrolling on File Open
Previously, when the user opened a file, the page would automatically scroll to a hardcoded value with the intention being to display the config editor. This worked well for standard file structures, but for large ones, it did not work as intended, sometimes even scrolling the user further away from the editor. This PR removes that call to the scroll function completely.
What steps should a reviewer take to reproduce or test the bug or new feature?
Submissions/Autogradingtab of any gradeable.Automated Testing & Documentation
There is currently no testing for the gradeable configuration editor. Documentation can be found here.
Other information