Implement Redesigned Review Page for Manual Data Entry

[hobuobi]

Full PRD: https://www.notion.so/recidiviz/Review-Page-for-Manual-Data-Entry-54ce672f58f24807af80e2afa6cedf76
Designs: https://www.figma.com/file/dvX3yg7FMGJSWFaqHWrWgQ/Justice-Counts-Publisher?node-id=4907%3A14633

---

Publisher enables users in criminal justice agencies to enter data for the Justice Counts Metrics. We have two ways for users to enter data for these metrics:

• Via Spreadsheet Upload: User produces data in a specific spreadsheet format that we can easily read.
• Via Manual Data Entry: User manually types in the data for each metric and breakdown.

After each of these processes, we give the user a preview of the data that they have entered (what is typically referred to as the Review Page). However, because of how our design language has evolved, the two pages have diverged.

Our objective is to implement the redesigned confirmation page for the manual data entry process, which unifies the designs for the Spreadsheet/Bulk Upload process and the Manual Entry processes. This will achieve greater consistency and a less confusing user experience.

Reproduction

• Make sure you have followed all the instructions in https://github.com/orgs/Recidiviz/projects/2 and can successfully run the application locally.
• To see the (old) Review Page that currently shows up after the manual Data Entry flow: on the home page, first select any of the reports you see, and then click the blue "Review and Publish".
• To see the (new) Review Page that shows up after the Spreadsheet Upload flow: on the home page, select the blue "Upload Data" button in the top right, and upload this file:
  law_enforcement_success.xlsx

Design

New designs can be accessed via Figma here. Changes are summarized below:

• The navigation bar has been repurposed to hold the “Save and Exit” and “Publish” buttons (the Actions mentioned above).
  • The Back to Data Entry action has been moved to the left-hand column.
  • If there are errors, the user cannot publish the report and the Publish button should be grayed out.
• Header Text has changed, and includes a number that should reflect the total number of metrics in the associated report.
• Sections for each metric have a new design.
  • Each metric section is numbered (1, 2, 3, etc) based on its position in the report.
  • If there is an error associated with a metric, the circle with the number (1, 2, 3, etc) should be red.
• Data is reported in rows within each report.
  • For data that is missing:
    • If the primary field is missing, the number field should read “Not Reported”.
    • If a breakdown is missing, the number field should read “—” (two dashes).
  • If there is an error associated with a metric, the text should be red and there should be an “X” icon next to the field.
  • Text-based context should also appear in this section. If no text has been entered for one of these, the text should read “Not Reported.”
  • When hovering over a row, all other rows should fade to 50% to provide focus.
• A Summary has been added back to the left-hand column. This mimics the Report Summary on the Data Entry page, and contains all of the metrics along with an icon associated with their status.
  • If a user clicks on one of these, the Review page should scroll such that the associated metric is at the top of the page.

---

Any questions about scope should be directed towards Humphrey (@hobuobi), and any questions about engineering should be directed towards Lili (@lilidworkin).

[ivan-kishko]

@lilidworkin Hello! Can I ask you a couple questions.

1. There is a note about key functions in the PRD which says

"All of the key functions of the page (saving, publishing, etc) have already been implemented should stay exactly the same. ".

Old design did not have "Save and Exit" button but I suppose this function was written inside DataEntryForm component and called saveUpdatedMetrics. Just to make sure I wanted to ask if I am wright in identifying this function?
2. Not sure if it is question for you but in old design header was fixed and did not scroll with reports while in bulk upload review header scrolls with all the uploaded reports. What behavior should header have?

[lilidworkin]

Hi @ivan-kishko ! Great questions -- thanks for clarifying! cc @hobuobi:

1. I think the new "Save and Exit" button should actually just have the same behavior as the "Back to Data Entry" button on the old design. We don't actually need to resave anything at this point -- since we have autosave, all of their data should already be saved. @hobuobi maybe we want to rename this button?
2. I think actually @hobuobi should answer this one! I'm not sure. We definitely want the very top bar with the "Save and Exit" and "Publish" buttons to be fixed and not scroll, but I'm not sure about the "Review X Metrics" text.

[hobuobi]

1. I would change it to "Exit Without Publishing" and it should take you back to the Reports page instead of Data Entry.
2. For now, I think we can have the "Review X Metrics" header and the text below it scroll with the rest of the page. Unless @agronomic has a proposed alternative solution? Shouldn't block launching regardless.

[ivan-kishko]

Hello guys! I have a few more questions about task and PR (I made draft for now). First of all @hobuobi I think this question kinda the same as about "Exit without publishing" button - part of task was to make a summary inside review page. There is a button which leads back to data entry. Where is this button should be when screen size is small e.g. mobile width? I guess that summary by itself should disappear but I think that "back to data entry" button should be still visible somewhere like "back to reports overview" button on data entry page.
@lilidworkin about PR - there was no label for task so I placed for now non-breaking refactor label. Wanted to ask if this label is the right choice? Also who should place in reviewers (for now I put You and Humphrey)? Thanks in advance.

[lilidworkin]

Hi @ivan-kishko -- awesome! Thanks for putting up the PR!

I'll let @hobuobi answer about the button.

As for the PR label, "non-breaking refactor" is definitely the right choice! Can you also add @mxosman and @terryttsai as reviewers? Thank you!