Skip to content

feat: add form-based params builder to ApiUsage#347

Open
IfyJustin91 wants to merge 1 commit into
CalloraOrg:mainfrom
IfyJustin91:feature/api-usage-params-builder
Open

feat: add form-based params builder to ApiUsage#347
IfyJustin91 wants to merge 1 commit into
CalloraOrg:mainfrom
IfyJustin91:feature/api-usage-params-builder

Conversation

@IfyJustin91

Copy link
Copy Markdown

Summary

Implements a dual-mode parameters editor for API test calls, replacing the freeform JSON textarea with a proper form-based builder.

Changes

  • src/components/ParamsBuilder.tsx — New component with form and raw-JSON modes
    • Form mode: typed key/value rows (string/number/boolean), live param count badge, empty state with Add CTA
    • Raw mode: JSON textarea with live syntax validation and aria-live feedback
    • Mode switching: form→raw serialises rows; raw→form parses and surfaces inline errors if JSON is invalid or not an object
    • Boolean type-switch auto-defaults value to true
    • Tab order per row: key → type → value → remove
    • Fully accessible: aria-label, aria-invalid, aria-live, aria-pressed on mode buttons
  • src/ApiUsage.tsx — Replace RequestBodyEditor with ParamsBuilder; keep JsonSchema type import
  • src/index.css — Add .params-builder__row grid styles with token-driven borders and responsive stacking at 480px
  • src/components/ParamsBuilder.test.tsx — 33 tests covering all acceptance criteria

Tests

All 33 ParamsBuilder tests pass. Pre-existing failures in FiltersSidebar, FiltersBottomSheet, and schema-validate are unrelated to this PR (present on main before this branch).

Acceptance Criteria

  • Form and raw modes round-trip without data loss
  • Invalid raw JSON surfaces a non-blocking inline error
  • Tab order flows key -> type -> value -> remove per row
  • Empty state shows 'No parameters yet' with an Add CTA

Closes #150

Closes CalloraOrg#150

- Add ParamsBuilder component with form and raw-JSON modes
- Each row: key input, type selector (string/number/boolean), value input, remove button
- Form→raw serialises rows; raw→form parses and surfaces inline errors
- Empty state shows 'No parameters yet' with Add CTA
- Live count badge next to heading in form mode
- Tab order: key → type → value → remove per row
- Boolean type-switch auto-defaults value to 'true'
- Raw mode: live JSON validation with aria-live status
- Replace RequestBodyEditor in ApiUsage.tsx with ParamsBuilder
- Add .params-builder__row grid styles to index.css
- 33 passing tests covering all acceptance criteria
@drips-wave

drips-wave Bot commented Jun 30, 2026

Copy link
Copy Markdown

@IfyJustin91 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build a params builder UX (form-based + raw-JSON) for ApiUsage test calls

1 participant