frontend
frontend copied to clipboard
source-academy
Grading Overview: TS/Tremor -> AG/Blueprint Migration
Description
This is a major update to the Grading Overview page which migrates from Tanstack Table and Tremor UI to AG Grid and Blueprint JS. It also introduces a few new features that change the user workflow.
Summary
-
Preferably merged with backend #1107 Frontend does not error without it, but sorting columns will not sort anything.
-
Part of #2525, #2849 and #2665.
-
Resolves #2804 and #2812.
-
Adds onto #2856.
[!NOTE] For future Avengers and Developers, we would like you to feedback and think about these aspects for future development
- XP sorting. Currently sorted by raw XP, but is it preferred over combined XP?
- Grading/Filter mode. Is it better to default to Grading or Filter mode? Do you have any default preferences? (Devs can consider session storage for this, and column filters)
- Is it better to sort Type by ordering of the tabs at the top (e.g Missions, Quests, Paths, Contests...) or alphabetically?
- Is it helpful to add a column for submission date/time?
Please give your feedback in the latest Avenger feedback form/issue tracker or feel free to submit a new issue tracker. Thank you!
Features/Changes Added
Feature/Change 1 - Migration of Table
Part of #2525 and #2849. Adds onto #2856.
All components under Grading Overview will have their components migrated from Tanstack Table and Tremor UI to AG Grid and Blueprint JS. This also means some existing features are modified and may not work the same as before. I have tried my best to keep the table looking the same as before, less the changes made as new features. In #2856, Publish and Unpublish grading buttons were added. I've changed it to become icons to better suit the table. The Unpublish icon can be seen in the picture below, with the first row with the grading icon. The publish icon is at the second row of icons, the last icon.
Feature/Change 2 - Grading/Filter Mode
The default workflow is grading mode. Click on the Grading Mode/Filter Mode button beside the search bar.
In Grading mode, the entire row of each submission (except actions) will be clickable, which navigates the user straight to the submission grading page. This was added as the expected workflow for new users (avengers) was to be able to enter the grading of that submission when clicked, instead of filtering it. The Grading action icon will be removed to declutter the table in this mode.
In Filter Mode, it works the same as the previous table. When you click on any cell that allows filtering, it will filter by the value of that cell throughout the table. The Grading action button will be added back here to avoid the friction of going back to Grading Mode.
Besides the button to differentiate Grading/Filter Mode, when you hover over filterable cells, in Grading Mode, individual cells will not be highlighted/underlined when hovered but in Filter Mode, it will do so.
Filter Mode
Grading Mode
Feature/Change 3 - Customer Column Headers - Sorting & Hideable Columns
Somewhat part of #2665.
On the top of each column header, there are two buttons on the right. The first button allows you to sort in ascending/descending order. The workflow is don't sort by default, click to sort by ascending, click again to sort by descending, and click again to not sort it.
Note that the sorting is done on the backend with this PR #1107
The second button allows you to hide the respective columns. This allows you to view the table with less clutter, and it helps with devices that have a smaller screen.
Custom Headers with filtered columns and cell
Other Minor Changes
- (a) Loading Table Overlay
When filtering or searching for new queries, the table will not load in the new data if another query has been made. On the shell, it still queries for the data in the backend and receives every new query like the previous table as this is a purely frontend change.
I have also added a loading animation to show that it's retrieving the requested data. It shows the animation on the first query and hides it when the most recent data from the most recent query has been received.
The table will also become uninteractable (filtering will still be interactable) when querying for the data.
Tl;dr of how it works: when a query is sent, the counter increments by 1. When a query is received, the counter decrements by 1 or stays at 0 if already at 0. If the counter !== 0, then the loading is shown. In certain rare cases, it may not show the loading overlay (still can't figure out why).
- (b) Resolves #2804 left cutoff, but the fix is not 100% mobile responsive. It will work on mobile, but the user will need to scroll right.
- (c) Resolves #2812. This introduces a removal of non-"graded" filters when viewing unpublished submissions as that should only show unpublished but graded submissions.
- (d) Added a refresh button at the top of the table to refresh the same query (for convenience in case you want to query an updated database with the same options/filters).
Type of change
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update
- [ ] Code quality improvements
How to test
Head over to the Grading page and explore it over there.
Checklist
- [x] I have migrated the core components & features
- [x] I have cleaned up unrequired files and code
- [x] I have modified mock data
- [x] I have extensively tested this code
- [x] I have successfully merged it with the latest master branch (including P2's isGradingPublished PR) and fixed all conflicts
- [x] Backend Sorting has been completed
- [ ] I have updated the documentation (Not sure if needed)
does this change have the edge case bugs in #2812? seems likely that aggrid's way of doing things over tanstack could help to curb the forceful frontend filtering and solve the issue.
does this change have the edge case bugs in #2812? seems likely that aggrid's way of doing things over tanstack could help to curb the forceful frontend filtering and solve the issue.
It does indeed have that case as the way data is handled is not under aggrid, but I will provide a (rough frontend) fix it in the next commit.
Edit: The changes have been made, and the second issue in the PR will currently remove the filters for Attempting/Attempted (basically those that aren't Submitted) when selecting ungraded in what to view.
Pull Request Test Coverage Report for Build 10450660819
Details
- 21 of 201 (10.45%) changed or added relevant lines in 17 files are covered.
- 9 unchanged lines in 3 files lost coverage.
- Overall coverage decreased (-0.2%) to 31.471%
| Changes Missing Coverage | Covered Lines | Changed/Added Lines | % |
|---|---|---|---|
| src/commons/grading/GradingText.tsx | 2 | 3 | 66.67% |
| src/pages/academy/grading/subcomponents/GradingFilterable.tsx | 1 | 2 | 50.0% |
| src/pages/academy/teamFormation/subcomponents/TeamFormationBadges.tsx | 0 | 1 | 0.0% |
| src/commons/grading/GradingFlex.tsx | 2 | 4 | 50.0% |
| src/pages/academy/grading/subcomponents/GradingColumnFilters.tsx | 1 | 3 | 33.33% |
| src/commons/workspace/WorkspaceActions.ts | 0 | 3 | 0.0% |
| src/commons/workspace/WorkspaceReducer.ts | 0 | 4 | 0.0% |
| src/pages/academy/grading/subcomponents/GradingActions.tsx | 1 | 5 | 20.0% |
| src/commons/sagas/RequestsSaga.ts | 0 | 5 | 0.0% |
| src/commons/sagas/BackendSaga.ts | 0 | 8 | 0.0% |
| <!-- | Total: | 21 | 201 |
| Files with Coverage Reduction | New Missed Lines | % |
|---|---|---|
| src/pages/academy/grading/subcomponents/GradingActions.tsx | 1 | 2.33% |
| src/pages/academy/grading/Grading.tsx | 4 | 0.0% |
| src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx | 4 | 3.08% |
| <!-- | Total: | 9 |
| Totals | |
|---|---|
| Change from base Build 10429676074: | -0.2% |
| Covered Lines: | 4851 |
| Relevant Lines: | 14531 |
💛 - Coveralls
Work needed to resolve the conflict:
- at the grading submissions table: need to delete the 2 original columns and add the new column of progressStatus. you should override my file for the grading submissions table once you have tweaked the columns.
- gradingActions have also been updated with extra actions and checks. for this, you would need to remove the residual tremor buttons.
I'm gonna make some minor improvements, hence marking as draft. Thanks for the work so far!
