Tbolt/3676 Admin Check

[tbolt]

Resolves #3676 Resolves #3675 Resolves #3544

Description

Adds initial react components for the admin check panel. Some additional notes-

• The data is mocked and not real. Everything in the “collapsed” is hardcoded HTML.
• Still need to come up with semantics for the custom parts of the panel. (Ie. What is the Incomplete Required Fields? A heading? How is the # tied to it?)

Signifcant changes or possible side effects

• There shouldn't be any impact to existing functionality or new side effects introduced

Automated test cases written

• Some test cases were created to test the basic pieces around the panel:
  • Opening and closing
  • Showing the completed state
  • Collapsing/Expanding the mini check
• More testing will be completed in subsequent stories
• Cypress tests are going to be a separate ticket

Steps to manually verify this change

1. Login as a user who can view/edit APDs
2. Navigate to to APD export and submit page and click Run Administrative Check
3. Verify Admin Panel appears and matches criteria in original ticket

This pull request is ready to review when

• [x] Automated tests are updated (and all tests are passing)
• [x] Pull request has been labeled, if applicable with feature, content, bug, tests, refactor
• [x] Associated OpenAPI documentation has been updated
• [x] The experience passes a basic manual accessibility audit (keyboard nav, screenreader, text scaling) OR an exemption is documented

This pull request can be merged when

• [x] Code has been reviewed by someone other than the original author
• [x] QA has verified the accessibility and functionality related to the change
• [ ] Design has approved the experience
• [ ] Product has approved the experience

[codecov-commenter]

Codecov Report

Merging #4055 (a147478) into main (a256f6d) will decrease coverage by 0.11%. The diff coverage is 85.08%.

@@            Coverage Diff             @@
##             main    #4055      +/-   ##
==========================================
- Coverage   85.98%   85.87%   -0.12%     
==========================================
  Files         263      207      -56     
  Lines        6038     4969    -1069     
  Branches     1287     1321      +34     
==========================================
- Hits         5192     4267     -925     
+ Misses        783      639     -144     
  Partials       63       63              

Impacted Files	Coverage Δ
web/src/components/Icons.js	80.00% <ø> (ø)
...vities/activities-dashboard/ActivitiesDashboard.js	100.00% <ø> (ø)
...ies/cost-allocation/CostAllocation/CostAllocate.js	86.36% <ø> (ø)
...w/NameAndFundingSource/NameAndFundingSourceForm.js	59.25% <ø> (ø)
web/src/pages/apd/activities/overview/Overview.js	87.50% <ø> (ø)
web/src/pages/apd/activities/overview/Schedule.js	56.66% <0.00%> (-2.71%)	:arrow_down:
.../apd/activities/overview/StandardsAndConditions.js	78.26% <ø> (ø)
...y-state-personnel/ApdStateProfileMedicaidOffice.js	38.59% <ø> (ø)
...src/pages/apd/proposed-budget/IncentivePayments.js	71.18% <ø> (ø)
web/src/redux/reducers/nav.js	91.66% <0.00%> (ø)
... and 74 more

Impacted Files	Coverage Δ
web/src/components/Icons.js	80.00% <ø> (ø)
...vities/activities-dashboard/ActivitiesDashboard.js	100.00% <ø> (ø)
...ies/cost-allocation/CostAllocation/CostAllocate.js	86.36% <ø> (ø)
...w/NameAndFundingSource/NameAndFundingSourceForm.js	59.25% <ø> (ø)
web/src/pages/apd/activities/overview/Overview.js	87.50% <ø> (ø)
web/src/pages/apd/activities/overview/Schedule.js	56.66% <0.00%> (-2.71%)	:arrow_down:
.../apd/activities/overview/StandardsAndConditions.js	78.26% <ø> (ø)
...y-state-personnel/ApdStateProfileMedicaidOffice.js	38.59% <ø> (ø)
...src/pages/apd/proposed-budget/IncentivePayments.js	71.18% <ø> (ø)
web/src/redux/reducers/nav.js	91.66% <0.00%> (ø)
... and 74 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update a256f6d...a147478. Read the comment docs.

[cms-eapd-bot]

See this pull request in action: https://ec2-18-215-204-56.compute-1.amazonaws.com

059398aa43fb36a32fd82983cfdfb1344a1555ae

[mirano-darren]

Looking good so far!

Given	When	Then	Result
admin check panel	admin check is complete (used demo button to mark as complete)	complete animation is played	PASS ✔️
Export and Submit page	admin check get turned on	admin check help panel appears	PASS ✔️
admin check help panel	the user turns off the admin check via the panel	admin check help panel disappears	PASS ✔️
admin check help panel	admin check is complete and turned closed	help panel disappears	PASS ✔️
admin check help panel	testing out various buttons, accordions, direct links	all work as intended, some issues are already noted in the PR	PASS ✔️
admin check is turned on	you leave an APD	loading up another APD (or the same one) does not keep the admin check on	PASS ✔️

Since this is a WIP I'm sure you know about this. But just to make sure, these links/buttons don't redirect me:

[mirano-darren]

@jeromeleecms @beparticular Ready for your review! Keep in mind that most of the data in the panel is all hardcoded (not synced up with the APD yet)

[tbolt]

@jeromeleecms @beparticular here are the notes from our experiment session-

• Ty to push up change where layout is left-aligned to see if we can use that margin to allow more space for admin check panel. Noting that some sections (such as the landing page/dashboard) may look weird.
• Jenn proposed Incomplete field # to be consistent between the admin check and mini check(calling the "collapsed view" the mini check 😄). currently its in a rounded rectangle in the regular check and oval in mini check
• Recently Completed could be removed and revisited when we have a better sense of how and why this is needed
• Remove the accordion headers highlight
• Jenn noted this might be a good opportunity for a quick usability test

[jeromeleecms]

@tbolt

Did you ever figure out why it's doing this?

Also, did you ever figure out why the link only works once? Or are you waiting to fix that when you do a full implementation of the admin check?

[tbolt]

@jeromeleecms Need to look into both of those issues. I thought the link issue was resolved but im seeing it not working for certain links.

[mirano-darren]

Looks good to me! Tested functionality of frontend components. Note: direct link is broken when coming from an activity, Ty has already acknowledged this.

Given	When	Then	Result
Admin check is turned on/off	Looking throughout the builder	Inline validation is turned on/off based on admin check	PASS ✅
Admin check help panel	Admin check is complete (toggled w/ demo button)	Animation plays and collapse button changes to close	PASS ✅
Admin check is on	User returns to the APD dashboard	Admin check is turned off when entering back into the APD	PASS ✅
Admin check help panel	Navigating to other pages via direct link or edit button	User gets redirected to the correct page	PASS ✅, broken links coming from activities already noted
Admin check help panel	user clicks Stop Administrative Check button	Help panel closes and inline validation turns off on page reload	PASS ✅

[jeromeleecms]

@mirano-darren I added Sherry.. also, it says a test is failing, is this ready for review or does the owasp zap scan need to resolved first?

[tbolt]

@jeromeleecms I had pushed up code that was intended for another branch which may have broken the build. Looks good now though.

[jeromeleecms]

@tbolt Remind me - for the assurances and compliance section, the help text is "select yes or no" -- did we decide to leave it vague like this or can we incorporate which assurance and compliance wasn't answered? (similarly for "Please Explain" section if people say no)

Example: "Are you complying with 42 CFR 495.360? Select Yes or No."

It seems like this section is based on the validation text, so if we have to spin up a separate ticket for targeted improvement, I'm also good with that path...

Otherwise looking very good.

[tbolt]

@jeromeleecms My understanding was that we were basing it on the validation text. In fact the messages come from a single source (the schemas). I do agree that would be an improvement though and I noted something similar in this ticket- https://app.zenhub.com/workspaces/cms-eapd-5a3823ad3659e94d8ee569be/issues/cmsgov/eapd/4382