[Feature] Create help drawer to display output from the Admin Check

[thetif]

Design tasks #3536 #3676

Description and related issues - Create a help drawer component that will be fixed to the top right of the page and can be expanded to see more details. This help drawer should only be visible if the user has the Admin Check turned on. This should display the data collected in #3674 and #3675.

1. Fields are grouped by pages and all the fields within a page must be completed to move the page accordion down to recently completed
2. The name of the fields and subsequent help text would have a strike through them when they complete the field. The tally would also decrease to indicate that work has been completed.
3. The collapse button displays the help drawer in its abridged version. The collapse/ expand buttons would exist for all help drawer screens except the help drawer indicated that they completed all required fields and can return to Export and Submit. The "success" help drawer would have the 'close' button instead.
4. The 'Recently Completed' section will store 5 of the most recent work completed, including work that was completed before the admin check was initiated. I think we don't need to list much to minimize the visual density of the help drawer and also because I doubt that section would have much use.
5. I don't think we need to display fields or pages in the recently completed that do not have a validation associated with it (in order words "optional fields"). Im not sure if that would be confusing to users though.
6. The 'To Do' section of the help drawer is organized sequentially as they appear in the side nav, but the recently completed is organized chronologically, meaning the 1st on the list would be the most recent.
7. Out of the scope of this ticket, reflected in #3536: There will be the ability to stop the admin check, but also I am recommending the ability to collapse the admin check to view only what folks are working on now and what is next to complete.
8. If a user undos work in a recently complete section, that page moves back up to the "to do section" and the tally of tasks increases.
9. Future consideration: If they undo a field after completing the admin check, the help text in the export and submit page for the admin check would indicate that they need to complete it before exporting a final version.
10. If a field is no longer empty, we can almost instantly update the tally in the help drawer and move the field/page down to recently completed after they exit a field, not once they start typing.
11. We will be directing users to the page in the admin check not to unanswered fields within the page. Allowing page jumping through unanswered fields is something we can revisit after conducting a usability study on our current implementation of the admin check, but I think with the inline validation, folks should not struggle too much to find which fields to complete. 12.Turn off Admin Check before loading an APD. This prevents Admin Check being enabled globally.

What is the goal or purpose of this ticket?

Mockups or link to Figma https://www.figma.com/file/6eVvo7JjvXiovGTR4BoVgK/CMS-eAPD-2021?node-id=6395%3A39506

This task is done when…

• [ ] a component has been created that mets the design requirements above
• [ ] identify 508 considerations and/or recommendations

[jeromeleecms]

Updates from Parking Lot Discussions for this scope:

From the to do section: We will implement this almost exactly as described and designed (as of 5/11) except the completed items will no longer be crossed off, but will disappear once completed.

Recently completed: This will become "Completed" (with no time element). We'll track the last 5 completed todos so users can see that they completed something. Visually the "Completed" section will not be in an accordion, but a list (per Tifs in

s) with clickable links to where the change occurred.

@akuas @tbolt @beparticular @thetif - Did I miss anything?

[akuas]

@jeromeleecms That sounds right to me. I updated the design to reflect that. I have also removed the x field(s) completed in the Recently Completed Section https://www.figma.com/file/6eVvo7JjvXiovGTR4BoVgK/CMS-eAPD-2022?node-id=6395%3A39506

[tbolt]

Update: Team decision was made that when a page is navigated to from the admin check we will show the inline validations for that page.

is that clear enough @thetif @akuas?

[tbolt]

Update: We are going to be prototyping some new designs based on https://www.figma.com/file/6eVvo7JjvXiovGTR4BoVgK/CMS-eAPD-2022?node-id=9641%3A29459

[tbolt]

Updates based on 7/27 standup-

• Moving forward with the new designs shown above. Fields/List items will no longer be grouped by section. Instead it will be a flat list of items needed to be completed. Dev team will need to revise data schema + implementation strategy/architecture
• Fields that are filled out will immediately show as "greyed out." This will be "session" based and upon stopping + starting the admin check OR reloading the page the "greyed out." items will no longer appear and a fresh list of "Invalid" fields will be shown
• Validation(ie. updating the admin check panel list) was originally planned to trigger on every save event. The dev team will investigate LOE to trigger the validation to run onBlur instead. Running validation onBlur is preferred
• Jenn will explore options for changing Edit. Also possibly re-evaluating the page link being underlined or not

[beparticular]

@tbolt @jeromeleecms @thetif Re: Edit links - the place I was recalling our edit links was in the Executive Summary, where we take someone from the summary back to the activity to edit via an edit link. We do this in the Activity List as well when we create an Activity, the link to enter the Activity to fill it out is "edit". Of course we also do this for editing a subform and the APD title as well.

I think it's ok to have multiple uses for "edit" right now, and one day look at the system as a whole between inputs and outputs and if there are other words we should use.

Re: underlining - let's go with underlining, it works in context just fine. The title and edit can both take the user back to where they need to edit the page.

I'll make some edits to the design so this change is represented in Figma.