Authed patterns/aw/vadx panel discovery 1

[adamwhitlock1]

Are you removing, renaming or moving a folder in this PR?

• No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
• Yes, I'm removing, renaming or moving a folder

Did you change site-wide styles, platform utilities or other infrastructure?

• No
• Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

• Adds a set of tools to allow debugging of feature toggles, view form routes, and access some basic a11y tools
• Feature toggle tab allows local manipulation of feature toggles
• Form tab shows form routes and allows navigation between pages and skipping pages
• Other tab includes heading hierarchy analyzer and focus element debugger
• Optional tab can be provided by the application using the tool to provide a set of application specific tools
• Tool is only rendered in local environments when the aedp_vadx toggle is true
• This is a MVP to evaluate further development of features

Related issue(s)

• Discovery - In-Browser Developer Tools Panel - VADX tmf-auth-exp-design-patterns#196

Testing done

• Added unit tests for storage adapter
• Used local environment to verify functionality
• More tests for core hooks and service utils coming soon

Screenshots

No before screenshots because this is new work.

TOGGLES TAB

FORM TAB

OTHER TAB

CUSTOM TAB - TESTED WITH A FEW CUSTOM LINKS FOR THE AEDP APP

What areas of the site does it impact?

Only the mock AE design patterns app currently. The idea would be to provide to a wider audience, but need to prove out the concept first.

Acceptance criteria

• Panel MVP created, will be followed up with discovery doc around this work.

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated (link to documentation *if necessary)
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution
• Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

[va-vfs-bot]

ESLint is disabled

vets-website uses ESLint to help enforce code quality. In most situations we would like ESLint to remain enabled.

What you can do

See if the code can be refactored to avoid disabling ESLint, or wait for a VSP review.

[va-vfs-bot]

Icon found

Icons can be decorative, but sometimes they are used to convey meaning. If there are any semantics associated with an icon, those semantics should also be conveyed to a screen reader.

What you can do

Review the markup and see if the icon provides information that isn't represented textually, or wait for a VSP review.

Note:

Font Awesome is deprecated. Please use va-icon instead. For more information, visit the migration documentation: Migrate from font awesome to va-icon

[bellepx0]

Great work! Very thorough unit test for the Storage Adapter too.
Approved.