refactor: split swagger viewer components - #80
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughAdds reusable Swagger endpoint detail components, extracts Try-It-Out request and cURL helpers, and introduces an interactive panel that builds, executes, copies, and displays API requests and responses. ChangesSwagger Viewer Try-It-Out
Estimated code review effort: 3 (Moderate) | ~30 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.github.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
src/components/swagger-viewer/endpoint-details.tsx (3)
1-14: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMissing
'use client'despite hook usage.
ParameterDetails/RequestBodyDetails/Examples/SchemaTextcall theuseTranslationshook, but this file has no'use client'directive. It currently works only because it's transitively bundled via files that already declare'use client'(swagger-viewer.tsx,try-it-out-panel.tsx); if this module is ever imported directly by a Server Component, it will break at runtime.As per path instructions, "Flag components missing 'use client' directive when using hooks."
🛠️ Proposed fix
+'use client'; + import type { ReactNode } from 'react';Also applies to: 35-35
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/swagger-viewer/endpoint-details.tsx` around lines 1 - 14, Add the 'use client' directive at the top of endpoint-details.tsx before imports, since ParameterDetails, RequestBodyDetails, Examples, and SchemaText use useTranslations. Keep the existing component implementations unchanged.Source: Path instructions
35-109: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate Paper/Stack scaffolding across three components.
ParameterDetails,RequestBodyDetails, andResponseDetailsall repeat the same<Paper><Stack spacing={1}><Stack direction="row" ...>wrapper and description block. Consider extracting a sharedDetailCard({ badges, description, children })wrapper to reduce duplication.As per path instructions, "Flag code smells: God-objects, duplicate code chunks, unused files or exports."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/swagger-viewer/endpoint-details.tsx` around lines 35 - 109, Extract the repeated Paper/Stack layout and optional description handling from ParameterDetails, RequestBodyDetails, and ResponseDetails into a shared DetailCard component accepting badges, description, and children. Replace each component’s duplicated wrapper with DetailCard while preserving its existing badges, content, spacing, and conditional description behavior.Source: Path instructions
125-156: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCode-block styling duplicated with
try-it-out-panel.tsx.The
sxstyling for<Box component="pre">here (bgcolor/borderRadius/fontSize/overflow/whiteSpace) is repeated verbatim three more times intry-it-out-panel.tsx(curl command, response headers, response body). Worth extracting into a sharedCodeBlockcomponent used by both files.As per path instructions, "Flag duplicate implementations of the same logic in different files."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/swagger-viewer/endpoint-details.tsx` around lines 125 - 156, Extract the duplicated code-block presentation from Examples and the three corresponding preformatted blocks in try-it-out-panel.tsx into a shared CodeBlock component. Move the common Box component="pre" styling (including bgcolor, borderRadius, fontSize, overflow, and whiteSpace) into that component, then replace each duplicated implementation while preserving its existing content, spacing, and behavior.Source: Path instructions
src/components/swagger-viewer/try-it-out-panel.tsx (1)
192-206: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSame pre/code-block styling repeated three times here (and again in
endpoint-details.tsx).See the corresponding note in
endpoint-details.tsx— extracting a sharedCodeBlockcomponent would remove this duplication across both files.As per path instructions, "Flag duplicate implementations of the same logic in different files."
Also applies to: 236-251, 256-269
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/swagger-viewer/try-it-out-panel.tsx` around lines 192 - 206, Extract the repeated preformatted code styling from the try-it-out panel’s curl, request, and response blocks into a shared CodeBlock component, then reuse that component for all three blocks and in endpoint-details.tsx. Preserve the existing content, scrolling, wrapping, spacing, and visual styling.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/swagger-viewer/try-it-out-panel.tsx`:
- Around line 172-174: Update handleGenerateCurl and the "Generate cURL" Button
flow so required-field validation runs before generating the command. Prevent
generation when required parameters are empty, preserving the existing behavior
for valid input and avoiding unresolved placeholders in the resulting URL.
- Around line 118-122: Remove the showToast call from the !result.ok branch in
the Try-It-Out execution flow, while preserving
setError(t(getTryItOutErrorKey(payload.errorCode))) and the early return so
proxy 4xx/5xx errors remain displayed only in the response UI.
- Around line 96-108: Add an early return at the start of handleSubmit when
isExecuting is already true, before resetting state or building the request, so
Enter-key submissions cannot launch overlapping requests while execution is in
progress.
---
Nitpick comments:
In `@src/components/swagger-viewer/endpoint-details.tsx`:
- Around line 1-14: Add the 'use client' directive at the top of
endpoint-details.tsx before imports, since ParameterDetails, RequestBodyDetails,
Examples, and SchemaText use useTranslations. Keep the existing component
implementations unchanged.
- Around line 35-109: Extract the repeated Paper/Stack layout and optional
description handling from ParameterDetails, RequestBodyDetails, and
ResponseDetails into a shared DetailCard component accepting badges,
description, and children. Replace each component’s duplicated wrapper with
DetailCard while preserving its existing badges, content, spacing, and
conditional description behavior.
- Around line 125-156: Extract the duplicated code-block presentation from
Examples and the three corresponding preformatted blocks in try-it-out-panel.tsx
into a shared CodeBlock component. Move the common Box component="pre" styling
(including bgcolor, borderRadius, fontSize, overflow, and whiteSpace) into that
component, then replace each duplicated implementation while preserving its
existing content, spacing, and behavior.
In `@src/components/swagger-viewer/try-it-out-panel.tsx`:
- Around line 192-206: Extract the repeated preformatted code styling from the
try-it-out panel’s curl, request, and response blocks into a shared CodeBlock
component, then reuse that component for all three blocks and in
endpoint-details.tsx. Preserve the existing content, scrolling, wrapping,
spacing, and visual styling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 599f3a95-5491-4614-8423-2d8e3b59756e
📒 Files selected for processing (4)
src/components/swagger-viewer/endpoint-details.tsxsrc/components/swagger-viewer/swagger-viewer.helpers.tssrc/components/swagger-viewer/swagger-viewer.tsxsrc/components/swagger-viewer/try-it-out-panel.tsx
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/swagger-viewer/try-it-out-panel.test.tsx (2)
50-52: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMissing
vi.unstubAllGlobals()cleanup for stubbedfetch.
vi.stubGlobal('fetch', ...)is used in later tests (Lines 78, 91-97) butafterEachonly callsvi.restoreAllMocks(). Per Vitest docs, stubbed globals persist untilvi.unstubAllGlobals()is called explicitly (or theunstubGlobalsconfig option is enabled) —restoreAllMocks()does not reset them. This risks leaking the stubbedfetchinto subsequent test files/suites if module state isn't otherwise isolated.🧹 Proposed fix
afterEach(() => { vi.restoreAllMocks(); + vi.unstubAllGlobals(); });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/swagger-viewer/try-it-out-panel.test.tsx` around lines 50 - 52, Update the afterEach cleanup in the test suite to call vi.unstubAllGlobals() alongside vi.restoreAllMocks(), ensuring the fetch stub created by the later tests is removed after each test.
88-105: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider adding a counterpart test for the network-error toast path.
This test verifies the toast is suppressed on a validation/proxy error (
blockedUrl), but there's no test confirmingrequestNetworkErrortoast is shown whenfetchrejects (thecatchbranch inhandleSubmit). Adding that would round out coverage of the two divergent error paths.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/swagger-viewer/try-it-out-panel.test.tsx` around lines 88 - 105, Add a counterpart test alongside the existing proxy-validation test that mocks fetch to reject, submits the panel through handleSubmit, and asserts requestNetworkError is displayed while preserving the existing blockedUrl suppression coverage.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/swagger-viewer/try-it-out-panel.test.tsx`:
- Around line 50-52: Update the afterEach cleanup in the test suite to call
vi.unstubAllGlobals() alongside vi.restoreAllMocks(), ensuring the fetch stub
created by the later tests is removed after each test.
- Around line 88-105: Add a counterpart test alongside the existing
proxy-validation test that mocks fetch to reject, submits the panel through
handleSubmit, and asserts requestNetworkError is displayed while preserving the
existing blockedUrl suppression coverage.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 2ebf86a0-a484-4aa2-adb0-b9225d6633e0
📒 Files selected for processing (4)
src/components/swagger-viewer/try-it-out-panel.test.tsxsrc/components/swagger-viewer/try-it-out-panel.tsxsrc/i18n/messages/en.jsonsrc/i18n/messages/ru.json
✅ Files skipped from review due to trivial changes (2)
- src/i18n/messages/en.json
- src/i18n/messages/ru.json
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/swagger-viewer/try-it-out-panel.tsx
2 participants
Task
Refactor Swagger Viewer files to reduce component size and avoid large "god file" penalties.
What Was Done
swagger-viewer.tsxinto focused modules:endpoint-details.tsxtry-it-out-panel.tsxswagger-viewer.helpers.tsSwaggerViewerpublic export unchanged.swagger-viewer.tsxto 152 lines.Validation
npm test -- src/components/swagger-viewer/swagger-viewer.test.tsxnpm testnpm run lintnpm run buildgit diff --checkNotes
This PR is stacked on top of
story/4-curl-generationand should be reviewed/merged after PR #78.Summary by CodeRabbit