search

fullstorydev / grpcui

An interactive web UI for gRPC, along the lines of postman
MIT License
5.24k stars 387 forks source link

Copy as "grpcurl" #3

Open jhump opened 5 years ago

jhump commented 5 years ago

A slick feature would be to be able to Copy as 'grpcurl' -- which would extract all connection info from command-line flags as well as the request metadata and data in the web form and use that to generate an equivalent grpcurl command.

Similarly, the ability to paste a grpcurl command, and have that auto-populate the metadata and request message data would be slick as well.

abourget commented 4 years ago

This is an old one... but well needed. :) I'd highly appreciate

fleytman commented 2 years ago

This very important feature, for fast coomunicete in develop team. Now this feature has wombat https://github.com/rogchap/wombat/pull/51, but with bug https://github.com/rogchap/wombat/issues/50#issuecomment-1236460826

gerektoolhy commented 1 year ago

Hey, @jhump , i have given this a shot. Here's what it looks like. The grpcurl updates on every change, as expected. Wonder if there is a better placement for this.

image

if that looks good, can send a PR for this for review.

jhump commented 1 year ago

I won't be able to approve/merge any changes as I'm no longer with FullStory. However, I can provide some input on the above described solution:

  1. I wouldn't put it in the UI this way. This is too prominent in the UI for how often this is likely to be used -- just adds noise to the request builder.
  2. You might instead just make it a tiny link below the tabbed view (so it can be seen below the form no matter which tab is selected). The link text could be Copy as "grpcurl".
  3. An alternative to the above might be changing the "Invoke" button to be a combo drop-down+button where "Invoke" is one of the options (and the default) and another is "Copy as grpcurl".
  4. Instead of actually showing the grpcurl statement in the UI, the link or button would store the statement directly in the clipboard (e.g. navigator.clipboard.writeText(grpcurlStatementText).

I'm not sure who at FullStory would be able to provide more guidance on what kind of change would be accepted. I know @dragonsinth has helped me merge some small changes, but I'm not sure who should review something of this nature. I think the biggest concern would be getting the UX right -- so that the feature isn't too prominent/distracting but is still discoverable. I had originally envisioned this being a context menu sort of thing, like right-clicking in the form brings it up, but perhaps that is too subtle/hidden...

dragonsinth commented 1 year ago

It could be another Tab. It could also be another pane in Raw Request (JSON), which we could rename to just Raw Request.

gerektoolhy commented 1 year ago

@jhump, @dragonsinth , thank you for feedback. Would love to have it same like in Postman, where there is a sidebar, and one of the buttons is show code. Upon clicking that, it pops up a pane with generated code. This looks like a much bigger work and falls out of scope of this request.

I also like the idea of having a "copy this" button. I find it handy when websites have such button along any data that I want to copy. A nice clipboard icon could be used for this. This could be done in a separate PR.

Showing the copy button without the actual generated code IMO is worse UX, as this does not allow to validate that what you are actually copying into clipboard is actually what you will want to use and run in bash. So having the generated grpcurl command on screen allows to inspect what the command looks like, and whether it something what I will want to be running in terminal.

So all in all, I liked the last suggestion from @dragonsinth . Renamed second tab to Raw request, and added a new tab with the grpcurl contents. Also added heading to the editable JSON payload pane.

PR: https://github.com/fullstorydev/grpcui/pull/241