Fixes #48: add a prettify query button

[gre]

addresses #48

it adds a {} prettify button. this is implemented using graphql parse & print function: print(parse(this.state.query))

(pretty useful when you paste an obfuscated relay query and want to debug it)

on hover:

after clicking:

[skevy]

Awesome!!

[leebyron]

Interesting! I think we may want to improve the button affordance, it's not clear that it is clickable. One significant downside of this prettify technique is that it eats comments. Obviously not a big deal for cleaning up obfuscated queries that have no comments, but something to consider.

[gre]

I'm not sure how we can preserve comments. Sounds like something to fix on the graphql parser/printer side.

I have intentionally made the {} button looking secondary (less important than the ▶one), but actually I would be happy to implement any better UI if you have an idea on how to make it look more clickable (it already reacts on hover as you can see).
I feel that if using a circle or a square border will look weird next to the circle ▶button.

I've also inspired from the Web Console:

[vladar]

That would be so useful with Relay

[asiandrummer]

nit: maybe just this.props.onClick()

[asiandrummer]

Sorry it took a while to get to this @gre. I think this is a nice feature addition - although we have a known issue with comments being deleted, I think this will be very useful for folks working with reduced/minimized query string, especially in Relay land.

[skevy]

I'm so excited to have this in GraphiQL, @gre! :)

[gre]

me too :)

[asiandrummer]

@gre Could we squash the commits into one commit?
Let's merge this in and see if we could make an improvement in GraphQL parser/printer to preserve comments. Undo/redo within the editor should be able to mitigate the downside for the time being I think.

[gre]

@asiandrummer are you sure I should squash my commit and lose the history? is this really the convention here? (merge should hide the local branch history no?)

[asiandrummer]

@gre I was thinking we could only have a single or a couple commit related to the feature, for the readability of the commit history reasons. I was especially thinking we could include (or amend the message of) the 2nd commit if that's okay.

Also I think merge actually shows the local branch history (#15), but I might be missing something :p

[gre]

this is squashed now

[asiandrummer]

Citizen Hyo thanks you! I'm really excited for this feature.