Skip to content

feat(oc-docs): migrate response formatter + preview from bruno-app - #82

Closed
vasharma05-bruno wants to merge 1 commit into
opencollection-dev:mainfrom
vasharma05-bruno:bru-3764-response-formatter
Closed

feat(oc-docs): migrate response formatter + preview from bruno-app#82
vasharma05-bruno wants to merge 1 commit into
opencollection-dev:mainfrom
vasharma05-bruno:bru-3764-response-formatter

Conversation

@vasharma05-bruno

Copy link
Copy Markdown
Contributor

Summary

Migrates the response-formatter UI from bruno-app into oc-docs and wires it into the playground response pane.

  • MenuDropdown — faithful port of bruno-app's dropdown (Tippy-backed, keyboard nav, grouped/flat items, submenus, controlled/uncontrolled state), fully typed. Adds an itemToText-driven default trigger so it can display the selected item without a children trigger.
  • QueryResultPreview — ported for the web-feasible subset: HTML (sandboxed <iframe>, replacing the Electron <webview>), JSON (@microlink/react-json-view), XML tree, and text. Binary previews (image/pdf/audio/video) are omitted because the docs response has no data buffer.
  • Response format selector — rebuilt on MenuDropdown with grouped formats and a Preview toggle in the dropdown header; useResponseFormatter split into its own module.
  • ResponseBodyTab — renders the preview when the toggle is on, otherwise the read-only editor.

Notable decisions

  • Used @microlink/react-json-view instead of bruno's react-json-view (peer react <= 17), which silently downgraded oc-docs to React 17 in this monorepo; a global override isn't viable since oc-spec-site is on React 19. The fork is API-identical with peer react >= 15.
  • Added a tsconfig paths entry so @tabler/icons type declarations resolve (its exports map has no types condition).

Follow-ups

Deferred work is tracked in packages/oc-docs/improvements.md (binary previews, dropping tippy/tabler, reusable Toggle, etc.).

Verification

  • tsc --noEmit: 0 errors
  • eslint --max-warnings 0: clean
  • vitest: passing (MenuDropdown + QueryResultPreview)

🤖 Generated with Claude Code

@vasharma05-bruno
vasharma05-bruno force-pushed the bru-3764-response-formatter branch 2 times, most recently from ce398bc to 9ec56df Compare July 13, 2026 13:02
Adds a response-body format selector and preview to the playground response
pane: an interactive JSON tree plus XML, HTML, and text previews, with format
auto-detection from the content-type header.

Ported onto main's restructured Playground: MenuDropdown is reused from main
(no longer vendored in this change), and the preview components live under
Playground/QueryResult. react-json-view is loaded lazily and rendered only in
the browser so it does not crash SSR (server bundle / renderToStaticMarkup).
@vasharma05-bruno
vasharma05-bruno force-pushed the bru-3764-response-formatter branch from e85abc2 to df5e459 Compare July 21, 2026 12:48
@vasharma05-bruno

Copy link
Copy Markdown
Contributor Author

Rebased onto main. Because main since removed PlaygroundDrawer/ and restructured everything under Playground/Content/Views/, a literal commit-by-commit rebase wasn't viable (the old commits added files at now-deleted paths). Instead this is re-applied onto main's current structure as one clean commit:

Validation: lint clean on touched files, test:run 917/917 pass (added QueryResultPreview.spec.tsx). Page-level e2e isn't feasible (the preview only appears after a request, and sending aborts under the Vite dev server) — preview logic is covered by unit tests.

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