Conversation
…us is the same as version history save status.
…e submission to save code to backend
…imestamp)-restored"
…s showing saved even on fail
…g in team assessments
|
Please fix the failing tests, thanks! |
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a versioning and history system for coding assignments, which is a significant and well-implemented feature. The changes include auto-saving with a debounce mechanism, a UI for save status, and a version history panel for viewing, restoring, and renaming versions. The Redux state management and sagas are well-structured to support this new functionality.
My review includes a few suggestions:
- A fix for a potential issue where the save button is missing for team assessments on mobile devices.
- A performance improvement for the version history panel by memoizing sorted data.
- A code quality improvement to enhance type safety in the new sagas.
… SagaIterator return type of restoreVersionSaga
…an incorrectly timed version history refresh
There was a problem hiding this comment.
Pull request overview
Implements editor versioning/history for coding-assignment workflows by introducing version-history state/actions/sagas, a history drawer UI, and autosave with a save-status indicator (with team assessments retaining manual save).
Changes:
- Added version history state/actions/reducer cases plus sagas for fetching history, renaming versions, restoring versions, and debounced autosave.
- Introduced new control-bar UI components (History button, Version History drawer, Save status indicator) and integrated them into assessment/grading workspaces.
- Updated backend request helpers and adjusted related unit/snapshot tests.
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/_academy.scss | Adds styling for the version history drawer layout. |
| src/pages/academy/grading/subcomponents/GradingWorkspace.tsx | Integrates History button + VersionHistoryPanel into grading workspace. |
| src/commons/workspace/tests/WorkspaceReducer.test.ts | Adds reducer tests for version-history-related actions. |
| src/commons/workspace/tests/WorkspaceActions.test.ts | Adds action-creator tests for version-history actions. |
| src/commons/workspace/WorkspaceTypes.ts | Introduces CodeVersion/VersionHistoryState and SaveStatus types; extends WorkspaceState. |
| src/commons/workspace/WorkspaceReducer.ts | Adds reducer handlers for version history and save status updates. |
| src/commons/workspace/WorkspaceActions.ts | Adds version-history and save-status action creators. |
| src/commons/sagas/tests/WorkspaceSaga.test.ts | Adds saga tests for fetch history + rename version; includes test-level store mock. |
| src/commons/sagas/tests/BackendSaga.test.ts | Updates expectations around submit-answer success messaging. |
| src/commons/sagas/WorkspaceSaga/index.ts | Wires version history sagas into WorkspaceSaga handler map. |
| src/commons/sagas/WorkspaceSaga/helpers/versionHistory.ts | New sagas: fetch history, rename, restore, autosave debounce, and save-status watcher. |
| src/commons/sagas/RequestsSaga.ts | Adds API helpers for fetching version history and renaming versions. |
| src/commons/sagas/MainSaga.ts | Forks autosave and save-status watchers globally. |
| src/commons/sagas/BackendSaga.ts | Emits saveStatus updates on submitAnswer success/failure; removes success toast. |
| src/commons/mocks/BackendMocks.ts | Adjusts mock submitAnswer flow (but currently missing saveStatus updates). |
| src/commons/controlBar/VersionHistoryPanel.tsx | New drawer UI for listing/previewing/restoring/renaming versions. |
| src/commons/controlBar/ControlBarVersionHistoryButton.tsx | New control-bar History button. |
| src/commons/controlBar/ControlBarSaveStatusIndicator.tsx | New indicator tag for saving/saved/failed statuses. |
| src/commons/assessmentWorkspace/tests/snapshots/AssessmentWorkspace.test.tsx.snap | Snapshot updates for new control-bar elements. |
| src/commons/assessmentWorkspace/AssessmentWorkspace.tsx | Integrates autosave indicator + history drawer; adjusts team-save behavior. |
| src/commons/application/ApplicationTypes.ts | Extends default workspace shape with versionHistory + saveStatus. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…e process of saving
…nnounced correctly by assistive tech
… student has not joined a team
…improve performance
…o improve performance
Description
Related Issues and PRs:
Depends on source-academy/backend#1346
to be merged first.
See: #3074
This PR implements versioning and history for the editor in coding assignments, such as missions, quests, and paths. Currently there is no versioning, and the editor only saves and submits the latest version to the server.
This change aims to:
allow students to review or edit previous versions of their code
allow TA’s to understand their student’s coding process to better guide them
allow admins to check for suspicious coding patterns (copy pasting from AI or plagiarism)
Features:
Control Bar Changes:
The original save button has been removed, as the code is now autosaved with a 3 second debounce.
A new saving indicator shows the status of the code, between saving, saved, and saving failed. Whenever unsaved changes are detected, the indicator will show “Saving” and once the debounce expires and the code is saved, it shows “Saved” or “Saving failed” based on the response from the backend.
A new history button opens up the version history view explained below.
Note: The save button is NOT removed for team assessments as every save will override teammate’s code as well, so we keep the manual save. The saving indicator is removed, but the history button remains, as the version history viewing and restoring still works using manually submitted versions.
Versions are stored in a linear fashion ordered and named by default by timestamp:
Timestamp 2 ← Current Version
Timestamp 1
When a previous version is restored, it is simply saved as a new version on top of the previous versions:
Timestamp 1 - restored ← Current Version
Timestamp 2
Timestamp 1
When the history button is clicked, a drawer opens up on the right of the screen, showing the versions and a preview of that version’s code. The student can restore a version by clicking the “Restore this version” button after selecting and previewing that version.
Students can rename the versions by clicking on the default timestamp name. A separate timestamp will still remain below the name.
Video.1.mov
Possible improvements:
Saving deltas for small changes and snapshots for major changes.
Only display snapshots for major changes when opening the version history panel, and show the versions saved as deltas as a drop down if detailed versions are requested by the user.
Type of change
Backend PR needs to be merged before this PR
How to test
Added tests to WorkspaceSaga.test.ts, WorkspaceReducer.test.ts, and WorkspaceActions.test.ts to test changes.
Manually tested coding in the editor to see if functionality is as expected
Steps taken:
Continuously typed to ensure debounce works
Stop typing to check if debounce runs out and code is submitted and saved
Check version history panel to see if all versions are displayed correctly
Rename a version and check if change is saved correctly
Restore a version and check if code is restored, submitted and renamed correctly
Edited code but made no changes to ensure duplicates are not saved as a new version
Refresh the page to check if the initial population of the editor causes an unwanted extra save
Checklist