Feat: Request panel Schema

[sofiapoh]

This PR addresses #104 & #250: Adds a ✨ pretty ✨ view of the schema and a button to prettify your GraphQL request.

Fix #104
Fix #250

In terms of design, I've done my best to follow what we already have on the app + take inspiration from Firefox & Chrome devtools.
I've created some basic fixtures for some of the components but there are parts that could arguably be broken down further to better represents all the possible variations of the fields especially. I will also add the visual regression tests once I've received more feedback! I've also started work on a simple search for types on another branch but this could be merged before this as I'm not 100% sure when I'll have time to complete it. Since opening the PR I also added a search on the schema as it was a nice and relatively simple addition :-) As it is now it's very simple type search, in future it would be nice to improve it to search for any values in the schema including fields.

[andyrichardson]

@sofiapoh I was wracking my brain all weekend on how we could get navigation to work on this in a devtools-esque way - you've killed it!

I'll give this a try and code review today - so excited to get this merged!

[andyrichardson]

Just realized you added search too - holy moly!

The only visual thing I'm unsure about is the navigation. I really like how you've gone about it but I'm also aware that existing devtools design languages (including ours) try to keep interaction elements separate from "read-only" content.

Example in chrome devtools console

Let me know if you think this does/doesn't work. We can always test both out on some users for feedback.

[andyrichardson]

Are you cool with us keeping styles/elements like this colocated?

If we're reusing the style/icon I'm down for pulling it out into a shared folder but for one-time use cases, it's much easier to colocate and then break out when reuse occurs.

[sofiapoh]

So I reused this on on the Schema view, would you prefer I don't put this stuff in the shared folder just for that?

[andyrichardson]

Quick todo for remaining blockers:

• Add static navigation (breadcrumbs or action buttons)
• Use identical layout to schema view for not DocumentNode types
• Fix test snapshots - yarn test -u
• Add new visual regression snapshots (fixtures look to cover all states!) - yarn visual-regression -u

Once those are out of the way, let's get this released 🚀

[andyrichardson]

This is awesome!