QuizView - initial work for build mode - #75122
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
Failed saves are not handled, resizing can hide the workspace, and accessibility issues remain.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Adds Quiz build mode and a shared two-panel Quiz shell.
Changes:
- Adds quiz configuration editing and persistence.
- Extends ResourcePanel with quiz-specific tabs.
- Adds resizable builder and placeholder attempt layouts.
File summaries
| File | Description |
|---|---|
_quiz_fields.html.haml |
Links saved quizzes to build mode. |
types.ts |
Defines Quiz view and level types. |
QuizView.tsx |
Adds the shared Quiz layout. |
Quiz.tsx |
Removes the old placeholder component. |
quiz-view.module.scss |
Styles the two-panel layout. |
index.js |
Exports QuizView. |
entrypoint.ts |
Loads QuizView. |
useQuizBuilderView.tsx |
Composes builder content. |
QuizConfigurationPanel.tsx |
Implements configuration editing and saving. |
quiz-configuration-panel.module.scss |
Styles the configuration panel. |
useQuizAttemptView.tsx |
Provides the attempt placeholder. |
ResourcePanel/types.ts |
Adds quiz tab identifiers. |
ResourcePanel/styles.module.scss |
Adjusts empty-tab borders. |
ResourcePanel/index.tsx |
Supports quiz content and navigation behavior. |
projects/utils.ts |
Reads the quiz-builder app option. |
useTwoPanelLayout.ts |
Adds reusable sidebar resizing. |
Review details
Suppressed comments (3)
apps/src/quiz/builder/QuizConfigurationPanel.tsx:128
- Validation errors are inserted above the form while focus remains on Save, but this element is not a live region, so screen readers are not notified that saving failed. Mark the message as an alert.
{error && (
<Typography variant="body3" color="error">
{error}
</Typography>
apps/src/quiz/builder/QuizConfigurationPanel.tsx:75
- The new save flow has no frontend unit coverage for request serialization, local validation, server rejection, or loading-state cleanup. Add focused tests for a successful save, both local validation paths, and a rejected
HttpClient.put; the rejection case would catch the unreachable non-OK branch below.
const handleSave = async () => {
setError(null);
// Blank means "no time limit" - QuizConfigurationData needs a real
// positive integer otherwise. Checked here too, not just server-side
// (Quiz's own time_limit_minutes validation), so a bad value shows up
// immediately instead of after a round trip.
apps/src/quiz/builder/QuizConfigurationPanel.tsx:114
HttpClient.putthrows aNetworkErrorfor every non-2xx response (apps/src/util/HttpClient.ts:101-105), so this branch is unreachable. Controller validation failures and network failures therefore skipsetErrorand reject the click handler without telling the user. Catch the thrown error, read its response body when available, and set a fallback message for other failures.
if (!response.ok) {
const data = await response.json();
setError(data.error || 'Something went wrong.');
return;
- Files reviewed: 16/16 changed files
- Comments generated: 3
- Review effort level: Balanced
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| [Tabs.QuestionBank]: {title: 'Question Bank', icon: 'clipboard-question'}, | ||
| [Tabs.Configuration]: {title: 'Configuration', icon: 'wrench'}, |
There was a problem hiding this comment.
I'll log this as a follow-up TODO.
There was a problem hiding this comment.
https://codedotorg.atlassian.net/browse/SL-2178 (pre-existing issue in Resource Panel)
| width: 100%; | ||
| } | ||
|
|
||
| .resourcePanel { |
There was a problem hiding this comment.
I'm surprised we're adding CSS, are there new layout features we're adding (or is this boilerplate that every app is including and we should generalize or something)?
[edit: ah looks like we're doing some stuff with resize bar, etc. that is very similar to sketch lab. wonder if we could generalize that at some point]
There was a problem hiding this comment.
I'll add a jira ticket to look into generalizing styling for 2-panel layouts.
There was a problem hiding this comment.
| onAssetUploaded?: (asset: ChatAsset, assetUrl: string) => void; | ||
| onAssetRemoved?: (asset: ChatAsset) => void; | ||
| initialWelcomeMessage?: string; | ||
| // Hide navigation entirely, in both the Instructions tab and the footer. |
There was a problem hiding this comment.
Not something to solve here necessarily, but I remember our legacy instructions panel becoming a behemoth of props, and I worry about that happening here.
There was a problem hiding this comment.
Great point - I'm going to file a ticket for follow-up on this - replace questionBankContent and configurationContent with generic extra tabs prop since these are quiz-specific.
There was a problem hiding this comment.
This PR adds a two-panel layout to the Quiz view - the left panel is for Resource Panel and right panel is the workspace. Thee are also two modes: build and attempt both of which will mount the resource panel. This is different from other level edit views intentionally. We use
QuizViewfor building the quiz to provide a more seamless authoring experience for curriculum writers. The resource panel will contain tabs for the quiz configuration and question bank when in build mode.Updates were made in the resource panel:
QuizViewnow either renders either the build or attempt view.Follow-up work is to match the config panel UI with Moshe's beautiful mockups.
Links
Testing story
Tested locally:
Screencast vid of placeholder quiz attempt view, then level edit, then build questions view with configuration tab in Sidebar.
Screen.Recording.2026-09-04.at.4.01.19.PM.mov
Deployment notes
Privacy and security