Discovery - In-Browser Developer Tools Panel - VADX

[adamwhitlock1]

User Story

As an engineer, I want a convenient developer tools panel in my browser when working on VA.gov applications, so I can quickly access common tools, toggle features, and inspect application state without digging through code or console logs.

Background

Currently devs have to:

• Manipulate feature toggle state through mock server or vets-api
• Switch between multiple documentation tabs
• Manually manipulate form data for testing
• Click through many pages to find common dev resources
• Create their own tooling when applicable

A unified dev tools panel could save tons of time and make local development smoother.

Discovery Goals

1. Current Dev Workflow Research

   • Document common dev tasks that need quick access
     • Feature toggle usage
     • Form testing workflows
     • Documentation lookup patterns
   • Look at what tools devs manually create for themselves
   • Map out frequent pain points in daily development

2. Panel Features Investigation

   • Feature toggle management
     • How to show/modify current toggle states
     • Toggle search and filtering
     • Toggle state persistence
   • Form development tools
     • Schema/uiSchema inspection
     • Prefill data manipulation
     • Form state visualization
   • Documentation integration
     • Most referenced docs
     • Search capabilities
     • Quick links organization
   • Accessibility tools
     • Axe integration points
     • Results display
     • Common fixes suggestions

3. Technical Approach Exploration

   • Panel implementation options
     • React portal vs iframe
     • Position and styling approaches
     • State management strategy
   • Performance considerations
     • Load time impact
     • Bundle size concerns
     • Lazy loading options

Questions to Answer

• Where should the panel live in the DOM?
• How do we make it non-intrusive but easily accessible?
• What's the best way to persist panel state?
• How do we handle panel visibility in different environments?
• What existing dev tools patterns can we learn from?
  • Redux DevTools
  • React DevTools
  • Browser DevTools

Resources

• React DevTools implementation
• Redux DevTools examples
• Current feature toggle implementation
• Form system documentation
• Axe-core integration docs

Deliverables

1. Analysis doc with:

   • Most needed panel features
   • UX considerations
   • Technical approach options
   • Implementation plan

2. Proof of concept showing:

   • Basic panel layout
   • Feature toggle controls
   • Form inspection tools
   • Quick doc access

Success Criteria

• We know what features devs need most
• We have a solid panel UX design
• Basic prototype works smoothly
• Performance impact is minimal

Constraints & Considerations

• Must work across different apps
• Should be easy to show/hide
• Can't interfere with normal app operation
• Should be removable from production builds
• Must be keyboard accessible

Review Needed By

• VA Product Owner
• Product Manager
• UX Research Team
• Engineering Team

Definition of Done

• Feature set is defined
• Technical approach is chosen
• Prototype demonstrates key features
• Next steps are clear

[adamwhitlock1]

Analysis document is available here: https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/authenticated-patterns/engineering/%23196-VADX-panel-analysis.md

MVP code has been merged into main. This should be ready to close out.

[msbtterswrth]

Adam mentioned reaching out to other engineers to get feedback on this panel, will schedule a meeting with IIR team on Friday to talk through things.

Becky also reached out to some folks on OCTO side who suggested to send this out in engineering COP meetings.