Improve design of RequestView

warrenday / graphql-network-inspector

A better network inspector for viewing and debugging GraphQL requests.

MIT License

485 stars 47 forks source link

Improve design of RequestView #86

Closed Odonno closed 1 year ago

Odonno commented 1 year ago

Description

Improve the design of the RequestView component, based on the HeadersView design.

The close icon is now back on the left (I think this is a regression because on the readme screen, it is on the left)
Each "section" in the RequestView now has a visible title and a list of actions (copy) to the right

Screenshot

Checklist

[x] Displays correctly with both dark and light mode (see useTheme.ts)

warrenday commented 1 year ago

@Odonno thanks for raising this! Could you confirm how this looks with Apollo's batched queries? I think "listActors +1" should show an example of that.

Also, I noticed the copy button is flush with the rounded container. Could we apply some better spacing here?

Odonno commented 1 year ago

Here is how it looks with multiple/batched queries:

Odonno commented 1 year ago

For the copy button, I removed the rounded bottom. Here is how it looks now:

What do you think?

warrenday commented 1 year ago

I'm not sure the removal of the rounded corners looks right, also in the event of a very long query the copy vars button would be hidden off screen, this was the reason they were kept together.

I think we need to go back and think about this some more. In the meantime, I have rewritten the button component for a more consistent design following some of the recent PR's.

I'll do some testing this weekend and release.

Odonno commented 1 year ago

Oh, I see what you mean. I am going back, but I have tweaked the UI a bit. I also show an index for each query in batched queries. I still think we can do better, but for now I think it is nicer and more ergonomic.

warrenday commented 1 year ago

This looks much better! Great work and thank you for making the changes.