fix(client): improve Pretty tab response formatting#2
Conversation
- Add auto-detection for JSON, HTML, and XML content types - Improve error handling for prettier formatting - Add loading state during formatting - Make Pretty tab selected by default - Add better overflow handling for Raw tab Fixes issue with response beautification in the Pretty tab.
- Added placeholder text to Key, Value, and Description fields in form tables - Improves usability by making it clearer which fields are inputs - Makes the purpose of each field more apparent to users
| @@ -801,8 +801,11 @@ interface ResponseBodyViewProps { | |||
| const ResponseBodyView = ({ bodyBytes }: ResponseBodyViewProps) => { | |||
| const body = new TextDecoder().decode(bodyBytes); | |||
|
|
|||
There was a problem hiding this comment.
The type here is wrong, but in general having controlled state here is not necessary
| Array.map((_) => _.then((_) => _.default)), | ||
| (_) => Promise.all(_), | ||
| ); | ||
| try { |
There was a problem hiding this comment.
What is the reason for catching errors here? It should be handled by TanStack Query already, but in general errors here shouldn't happen unless the bundle is broken. Never mind, it was indeed needed & present there already as a fallback if formatting fails, but it should only be scoped to that part. No need to increase the scope of the try-catch block
| height='100%' | ||
| readOnly | ||
| value={prettierBody} | ||
| value={isLoading ? 'Formatting...' : prettierBody} |
There was a problem hiding this comment.
As per TS warning, isLoading is always false, hence the check will never hit. The query is set to have empty string in initialData, which basically acts as the placeholder
| @@ -0,0 +1,38 @@ | |||
| # Version Plan: Fix Pretty Tab Beautification & Form Usability | |||
There was a problem hiding this comment.
This version plan does not adhere to NX version plan format. Also it's way too long for a small fix
| const ResponseBodyPrettyView = ({ body }: ResponseBodyPrettyViewProps) => { | ||
| const [language, setLanguage] = useState<CodeMirrorMarkupLanguage>('text'); | ||
| // Auto-detect content type for better initial experience | ||
| const detectLanguage = (): CodeMirrorMarkupLanguage => { |
There was a problem hiding this comment.
Only the JSON parsing should be in the try-catch block. Also there's no need for the function here. And I think XML check should come before HTML, as it will always match HTML first
| className='flex-1' | ||
| control={table.options.meta!.control!} | ||
| name={`items.${index}.data.key`} | ||
| placeholder="Enter key" |
There was a problem hiding this comment.
It should be inputPlaceholder, not placeholder. TS warns it's not a valid attribute
There was a problem hiding this comment.
Also this shouldn't have been in this PR realistically, but that's a nitpick
Tomaszal
force-pushed
the
fix/pretty-tab-beautification
branch
from
532ca89 to
6abff6b
Compare
2 participants
Fixes issue with response beautification in the Pretty tab.
By submitting a PR to this repository, you agree to the terms within the Contributor Covenant Code of Conduct. Please see the contributing guidelines for how to create and submit a high-quality PR for this repo.
Description
References
Testing
Checklist