align customize query flow to design

[fzhao99]

PULL REQUEST

Apologies for the large PR!

Summary

Breaks the query flow into the intended four step process by

• Moving the customize query into a subflow of select-query, updating the mode type / constants as needed.
• Lifting / pushing down query response and value states into the component steps where it's needed, hopefully to simplify which components know about which states
• Moving the async fetch calls that used to be scattered around the flow into one place within SelectQuery / their own hooks file.
• Update tests to reflect the new stepped flow / copy changes, including splitting the tests up into separate files to help them run a bit faster

Related Issue

After all the demo v0 pages are implemented independently, ensure that the pages link to one another according to the user flow that Michelle put together

Fixes #2663

Acceptance Criteria

For design

@mikang

• Step 1 Patient discovery

  • Added "step 1" to the title
  • Color / spacing on the search form
  • Misaligned from design: the "Advanced" link isn't in Figma right now but we mentioned we needed to have that as a technical constraint. Treated it like another section of the form, but happy to change as needed.

• Step 2 Patient Selection

  • Added "step 2" to the title
  • Added redirect to query selection

• Step 3 Query Selection

  • Implemented the backlink to return to "Select patient"
  • Added a loading state since the result query flow takes quite a while.
  • Also ported over the toast message from previous implementation where we went back to Patient Discovery from customize query. Let me know if still want this.
  • Noticed also for some of the use cases, the "apply changes" button that actually saves your selection is below the fold. Flagging since some users might do their selections and then hit "return", which won't actually save things.
  • Noting that the "customize query" selection state will only maintain itself within the select query page despite what we talked about in Slack. Getting it to persist longer will be kinda complicated, so I didn't want it to block this work. Can have a followup ticket if we want to add that.

• Step 4 Patient Record shouldn't have changed

  • The table widths in this page might need to be tweaked since there's horizontal scrolling on some default viewports

[DanPaseltiner]

Noting that the "customize query" selection state will only maintain itself within the select query page despite what we talked about in Slack. Getting it to persist longer will be kinda complicated, so I didn't want it to block this work. Can have a followup ticket if we want to add that.

@fzhao99 persisting beyond the scope of the query at hand is beyond what we are hoping to do at this point. Next sprint we will begin tackling query building which will give users the ability to create and edit their queries not just the 6 we currently offer out of the box. Long way of saying you are totally right, but this limitation is fine for now.

[DanPaseltiner]

I think we need to change the copy here

As users will have already provided demographic data by this point. We could address in a separate ticket though.

@fzhao99 @mikang

[mikang]

I think we need to change the copy here

As users will have already provided demographic data by this point. We could address in a separate ticket though.

@fzhao99 @mikang

Good catch @DanPaseltiner

I think we can remove the supporting text and have just the bold text that says "Query customization successful." Thoughts?

[mikang]

Update for visibility — Bob and I paired live, so all good to go from the design side once those changes are made! Mainly spacing