Lift up debug page

[Dogacel]

Motivation:

Debug page is not very easy navigate, it is in the bottom most part of the application. I think debug page can have its own page, so I have implemented a pop-up that allows you to open debug page (more like a form) while browsing.

Modifications:

• Remove debug page from bottom of the method page.
• Add Debug button near the method name for easier access which opens a pop-up
• Submit and Copy as cURL buttons stick to the bottom now.
• Make information card about adding example requests dismissible.

Screen.Recording.2022-12-31.at.14.24.18.mov

Result:

• Resolves one item from Improve DocService #1670
• Partially contributes to Make DocService to be focused on debugging feature #2194

Future improvements:

We are close to implementing JSONSchema support in Armeria. I think this will greatly improve the way developers write code inside the debug form, they won't even need to close the debug form to check the method body because IDE will provide comments + autocomplete features.

• Generate JSON Schema from ServiceSpecifications #4518
• Use monaco editor for Request Body in Query Editor #4516

[ikhoon]

Overall, looks good! Left minor comments.

[minwoox]

LGTM once @ikhoon's comments are addressed. 😉

[Dogacel]

Just made a little more artistic touch here:

Now empty space is being used more efficiently.

Full changelog:

• Make debug page lift up by clicking a button instead of putting it on the bottom of the page.
• Make warning about specifying example requests dismissable.
• Put a divider between request/response fields.
• Trim some space on top of the Endpoints section.
• Remove Section component so the whole thing expanded a little bit.
• Make Header section one-liner as default to save some space.

[ikhoon]

In addition to request_body, headers, endpoint_path and queries could be set to urlParams. How about showing the debug form if urlParams has values?

[jrhee17]

Looks good to me! Thanks @Dogacel ! 🙇 👍 🚀

[ikhoon]

Thanks, @Dogacel! 🙇‍♂️

Would you mind resolving the conflicts?

[Dogacel]

Thanks, @Dogacel! 🙇‍♂️

Would you mind resolving the conflicts?

Sure, I was OOO for almost 2 weeks for travel. I will take a look when I am avail. I will re-test them too sometimes resolving conflicts are not enough by itself. I'll post my update tomorrow 😉

[Dogacel]

Thanks, @Dogacel! 🙇‍♂️

Would you mind resolving the conflicts?

Fixed a bug that caused debug form to open up whenever a method is clicked. Re-tested and merged latest master now it is working fine.

[ikhoon]

Fixed a bug that caused debug form to open up whenever a method is clicked.

I found out that it causes another regression that a debug form is closed immediately when submit button is clicked. I tested it by setting /service/multi to the endpoint path of AnnotatedDocServiceTest.MyService.multi() in doc service.

[ikhoon]

We are about to release a new version. Let me reschedule this to 1.23.0. 🙇‍♂️

[Dogacel]

multi

This should fix

    setDebugFormIsOpen(isOpen => isOpen || urlRequestBody !== '' || urlQueries !== '' ||);

If form is already opened, URL parameters shouldn't affect the state because of || debugFormIsOpen.

Sending the updated commit...

Edit: I have reproduced & fixed the issue with this last commit. Thanks for the heads up 😄

[ikhoon]

Beautiful work! 👨‍🎨 💯