[Bugfix:InstructorUI] Refactor Student Details Buttons#12348
Conversation
Flex container with consistent gaps between buttons
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #12348 +/- ##
=========================================
Coverage 21.67% 21.67%
Complexity 9618 9618
=========================================
Files 268 268
Lines 36158 36158
Branches 486 486
=========================================
Hits 7837 7837
Misses 27839 27839
Partials 482 482
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.
The changes on this branch successfully made the spacing between these buttons consistent. Its a small change, but one that improves the look of the page overall. I tested on both light and dark mode on Firefox, and the buttons looked good.
|
Visiting the page on this branch, I observed that the buttons were evenly spaced, in both light and dark mode. This change seems to have functioned properly, and quite improves the look of the page. |
|
Checking out the page on this branch, the spacing remains consistent and buttons wrap even when zooming in up to 200% and out to 30%. The page looks better with this change. |
williamschen23
left a comment
There was a problem hiding this comment.
I dont thin kthat the toggle dropdown should be its own button.
From what I can remember, at some point, we didn't even have a toggle dropdown button. The toggle dropdown button used to be a little arrow on the side of the regrade button, sorta like what I have attached below. Having a different button that is related to a former button does not really make since UX wise.
1. Rather than an expand and collapse button, it is not combined into a single button, with a function to determine which function to call. 2. The regrade button had a confusing UI, with a clickable button and a dropdown that had only 1 entry. Now, it is a dropdown with 2 each. I'll update the PR with the new details to give reviewers a better understanding.
JS lint, failing cypress, and updated id names
Thank you for pointing this out. I noticed some other bad UI with these buttons and decided to rework the PR to address them. Let me know what you think! |
The refactored regrade button was causing this test to fail. I added testing ids to fix.
Rkoester47
left a comment
There was a problem hiding this comment.
I tested the updates you've made to this PR, and I believe all changes are working as intended. The appearance of the buttons has been improved, and is much more cohesive and consistent. Also, the drop-down button is a nice solution, and works correctly for me. I tested the "collapse all sections" button and it is working as intended. As far as I can see, the changes made on this branch match the PR description and I think this was a good direction to go for this page.
Why is this Change Important & Necessary?
The layout of the buttons at the top of student details page is redundant, and unintuitive.
Regrade Active Versions for all Studentsbutton is clickable, and has a dropdown. The text bloated, and difficult to read. The dropdown button looks like a separate button.Collapse All Sectionsand anExpand All SectionsbuttonToggle Columnsbutton has a different font from the rest of the buttons.What is the New Behavior?
Regrade Active Versions for all Studentsbutton has been changed toRegrade All Students, and no longer calls any function on click, instead opening the dropdown where the user can select betweenActive Versions OnlyandAll Versions.Collapse All Sectionsand anExpand All Sectionsbutton has been combined, with the JS logic determining what function to call based on the cookie.Toggle Columnsbutton now has the samefont-familyas the other buttons.What steps should a reviewer take to reproduce or test the bug or new feature?
ON MAIN
Login as instructor and navigate to the sample course's gradeable page. Click the
PREVIEW GRADINGon any gradeable. Observe the problems listed above.ON TOPIC BRANCH
Observe new changes. Specifically: The regrade button now triggers a dropdown rather than being clickable, the collapse/expand button works correctly, even after cookies are cleared, buttons now have consistent font, and are evenly spaced.
Automated Testing & Documentation
Adjusted the
ta_grading_details_spec.jstest to check that the correct text is displayed for the toggle expand/collapse button.Other information
This is not a breaking change