feat: request body raw/json mode editor

[erunion]

🧰 What's being changed?

This adds a new JSON tab on application/json-compatible request bodies to allow users to edit the raw JSON contents of their request.

The initial contents of this editor is populated from the first example we can grab off the request. If we can't grab an example, we'll default to an empty JSON object.

Syncing this data between the form inputs is not currently supported.

• JSON editor is enabled via a enableRequestBodyJsonEditor prop on the explorer.
• Invalid JSON in the editor should throw an error message and not update the code samples.
• Buttons available beneath the editor and in a new modal next to "Try It" to reset the JSON editor back to the original state.
• Styles
  • Changes do not conflict with the explorer when this editor is not available.
• Tests

🧪 Testing

Load up the test server and check the petstore example. You should be able to:

• Tab to the JSON editor.
• Have the JSON editor prefilled with an example request.
• Edit the contents of the JSON editor with different data.
• Input invalid JSON and receive an error message at the bottom of the editor and up top at the submit button.
• Be able to reset the JSON editor at any time to the original state it was in (with the example request).
• Tab back to the Form side and have its original state intact.

[Dashron]

Code looks good, had a question though about the feature.

Should the form data sync with the JSON?

e.g. if I put 12345 in the form's ID field, should the JSON initialize with the ID? Should it work the other direction too?

Not sure if this is an easy fix or not, but it would be pretty pleasant UX.

[Dashron]

Side thought, and doesn't block the review approval, but do we even need a dirty flag anymore?

[erunion]

actually we might need to still split up the dirty flag and let the form and json editor maintain their own dirty states because right now if you edit the json tab and switch over to the form it'll be dirty despite nothing being changed in it.

[erunion]

@Dashron We decided for the MVP that data wouldn't sync between the form and json tabs because we'll need to introduce JSON schema validation to prevent people from turning object requests into arrays and breaking the form (which is very brittle).

[Dashron]

Def makes sense. 👍

[runnabro]

The button is still in the invalid state if the form request is good when:

1. Go to the json tab
2. Make it invalid
3. Go back to the form tab

[erunion]

@runnabro @Dashron I just pushed up some changes to keep an independent dirty state for the form and JSON tabs to fix the issue of a dirty state being carried across.