Create Updated create benchmark flow [ENG]

[nikobooth]

Neha has updated the create benchmark flow to collect all the information needed for a staff member to understand the data collection task. We have a ticket in progress to deploy the previous design. Need to decide how to get from what's in progress to the new design.

Yun, Katrina, Connor to discuss.

New design Figma

Following checklist is not exhaustive:

• [ ] Breakdown Into separate tickets (Connor is in progress on this writeup, tbd discussion)
• [ ] https://github.com/sfbrigade/compass/issues/325

[nikobooth]

Main updates in new design:

• Tabs in goal view for All & Completed benchmaks
• New inputs: Attempts per trial & Number of trials
• Creation is now a two step flow with a new stepper component

[KCCPMG]

Here are what I believe are all of the images for the updated flow. As we've discussed on the engineer team internally, this will likely be split into multiple issues.

page: students/[student_id]/goals/[goal_id]

Summary of Potential Action Items -Move Goal Description section to its own component, restyle to match design. -Move Edit Goal logic to a modal? This needs to be clarified within the new design. -Move benchmarks section to its own component, restyle to match design, create Benchmark Preview component to map out benchmarks.

page: students/[student_id]/goals/[goal_id]/create

Summary of Potential Action Items -Implement in the Design Systems a "Stepper" component. MaterialUI provides this, though I'm not sure if one of these formats will match the design. -Redo the submission form so that it matches the design, including that it appears across two "pages" within the page. This logic should likely be extracted to its own component, and all of this will probably be a large task.

Additional Note: The designs here refer to benchmarks as being "Active"/"Completed", but also "New"/"In Progress"/"On Hold"/"Mastered". These imply two different and conflicting values for a "status" field or something similar, but as of yet there is no such field implemented on the benchmark("subgoal") table in the database schema. There are also several other conflicts between the existing schema and the one implied by the design, which will need to be reconciled, especially considering that the benchmark/subgoal will be seen in several other places on the app.

[chengtchris1]

Working on creating the Benchmark list tile. Here is the branch I created https://github.com/sfbrigade/compass/tree/Created-benchmark-view-new-design

[KCCPMG]

Created issue #339 to handle the database update aspect. This needs to be handled before the styling can be done, as the data being passed to pages and components will be different from the current version.

[KCCPMG]

Issue #339 closed

[KCCPMG]

Issue #341 created to address students/[student_id]/goals/[goal_id] page, assigned to @chengtchris1 .

[KCCPMG]

Issue #342 created to address students/[student_id]/goals/[goal_id]/create page. This issue should now have all parts extracted into their own issues, marking as closed.