Add Run in GraphiQL links to entries

panel.html

@@ -46,6 +46,10 @@
   .shortEntryWrapper .header {
     width: 50%;
   }
+  .entryInner a {
+    color: rgba(111, 194, 139, 1);
+    text-decoration: none;
+  }
   .entryInner:nth-child(2n) {
     background: rgba(245, 245, 245, 1);
   }

src/components/Request.js → src/components/Definition.js

@@ -29,8 +29,7 @@ Operation.propTypes = {
 };
 
 
-// TODO: Change this and filename to "Definition"
-export default function Request({
+export default function Definition({
   request,
 }) {
   const { name, operations } = request;
@@ -44,6 +43,6 @@ export default function Request({
   );
 }
 
-Request.propTypes = {
+Definition.propTypes = {
   request: React.PropTypes.object.isRequired,
 };

src/components/Entry.js

@@ -1,5 +1,12 @@
 import React from 'react';
-import Request from './Request';
+import Definition from './Definition';
+
+const makeGraphiQlUrl = (entry) => {
+  const base = entry.url;
+  const query = encodeURIComponent(entry.bareQuery);
+  const variables = encodeURIComponent(JSON.stringify(entry.queryVariables));
+  return `${base}/graphiql?query=${query}&variables=${variables}`;
+};
 
 export default function Entry({
   entry,
@@ -13,12 +20,15 @@ export default function Entry({
       </div>
       {entry.data && entry.data.map((request, i) => {
         if (request.kind !== 'FragmentDefinition') {
-          return <Request key={`request-${i}`} request={request} />;
+          return <Definition key={`request-${i}`} request={request} />;
         }
       })}
       {!entry.data && (
         <p className="error">{entry}</p>
       )}
+      <div className="runInGraphiQl">
+        <a target="_blank" href={makeGraphiQlUrl(entry)}>Run in GraphiQL</a>
+      </div>
     </div>
   );
 }