Merge pull request #64 from gre/feature/48

Fixes #48: add a prettify query button

css/app.css

@@ -213,6 +213,21 @@
   padding-left: 3px;
 }
 
+#graphiql-container .tool-button {
+  cursor: pointer;
+  text-decoration: none;
+  font-family: sans-serif;
+  color: #333;
+  padding: 2px 4px;
+  margin: 0 4px;
+}
+#graphiql-container .tool-button:active {
+  color: #999;
+}
+#graphiql-container .tool-button.error {
+  color: #c00;
+}
+
 #graphiql-container .execute-button {
   background: -webkit-linear-gradient(#fdfdfd, #d2d3d6);
   background:         linear-gradient(#fdfdfd, #d2d3d6);

src/components/GraphiQL.js

@@ -8,10 +8,13 @@
 
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
+import { print } from 'graphql/language/printer';
+import { parse } from 'graphql/language/parser';
 import { GraphQLSchema } from 'graphql/type';
 import { buildClientSchema } from 'graphql/utilities';
 import find from 'graphql/jsutils/find';
 import { ExecuteButton } from './ExecuteButton';
+import { PrettifyButton } from './PrettifyButton';
 import { QueryEditor } from './QueryEditor';
 import { VariableEditor } from './VariableEditor';
 import { ResultViewer } from './ResultViewer';
@@ -283,6 +286,7 @@ export class GraphiQL extends React.Component {
             <div className="topBar">
               {logo}
               <ExecuteButton onClick={this._runEditorQuery} />
+              <PrettifyButton onClick={this._prettifyQuery} />
               {toolbar}
             </div>
             {!this.state.docsOpen &&
@@ -387,6 +391,12 @@ export class GraphiQL extends React.Component {
     });
   }
 
+  _prettifyQuery = () => {
+    const query = print(parse(this.state.query));
+    const editor = this.refs.queryEditor.getCodeMirror();
+    editor.setValue(query);
+  }
+
   _onEditQuery = value => {
     this._storageSet('query', value);
     this.setState({ query: value });

src/components/PrettifyButton.js

@@ -0,0 +1,50 @@
+/**
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE-examples file in the root directory of this source tree.
+ */
+
+import React, { PropTypes } from 'react';
+
+
+/**
+ * PrettifyButton
+ *
+ * A {} button that allows to unminify a graphql query
+ */
+export class PrettifyButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null
+    };
+  }
+
+  onClick = e => {
+    e.preventDefault();
+    try {
+      this.props.onClick();
+      this.setState({ error: null });
+    } catch (error) {
+      this.setState({ error });
+    }
+  };
+
+  render() {
+    const { error } = this.state;
+    return (
+      <a
+        className={'tool-button' + (error ? ' error' : '')}
+        onClick={this.onClick}
+        title={error ? error.message : 'Prettify Query'}>
+        {'{ }'}
+      </a>
+    );
+  }
+}