Skip to content

Added Query Params table with per-value copy support in Request Details#753

Open
dominicklee wants to merge 2 commits into
tarampampam:masterfrom
dominicklee:master
Open

Added Query Params table with per-value copy support in Request Details#753
dominicklee wants to merge 2 commits into
tarampampam:masterfrom
dominicklee:master

Conversation

@dominicklee

Copy link
Copy Markdown

Description

This PR adds a structured Query Params table to the Request Details view, along with per-value copy functionality. This improvement directly aligns with the original author's desire of making the system perform similar to sites like Webhook.site

image

Problem

Currently, query parameters are only visible as part of the request Path (e.g. /callback?code=...&state=...), which makes them difficult to read and work with, especially for requests containing many parameters. For complex requests, developers would appreciate a clean way to extract the desired parameter value for testing.

This becomes particularly challenging in scenarios such as OAuth / OAuth2 REST API workflows (e.g. code, state, scope, error) or complex APIs that include multiple or repeated query parameters. Viewing or copying those parameters becomes tricky.

Long query strings reduce readability and increase friction when inspecting or copying individual values. The Webhook.site service typically parses and displays any query params as a table.

Solution

This PR introduces:

  1. Structured Query Params Table
    Displays query parameters as key/value pairs
    Positioned in the Request Details view (before "Request body")
    Supports multiple values per key (preserves order using URLSearchParams.entries())

  2. Per-Value Copy Button
    Adds a copy button next to each parameter value
    Uses existing Mantine CopyButton pattern for consistency
    Provides immediate visual feedback when copied

  3. Improved Readability
    Monospace formatting for keys and values
    Handles empty values explicitly (renders as (empty))

Implementation Notes

  • Implemented entirely in the frontend (request-details.tsx)
  • Leverages existing request.url object and URLSearchParams
  • No backend or API changes required
  • Follows existing UI patterns and components (Mantine)

Checklist

  • My code adheres to the style guidelines of this project
  • I have conducted a self-review of my code
  • I have added comments to my code, especially in areas that may be difficult to understand

@tarampampam tarampampam force-pushed the master branch 2 times, most recently from bd6bc54 to cb06c5c Compare May 14, 2026 11:05
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.

1 participant