fix(graphql-playground-react): Fix variable editor

Closes #372

Author: timsuchanek

packages/graphql-playground-react/package.json

@@ -15,7 +15,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "scripts": {
     "start": "node scripts/start.js",
-    "prepare": "yarn build",
+    "prepublishOnly": "yarn build",
     "copy-styles": "cat src/styles/*.css > playground.css",
     "build": "rimraf dist build dist && yarn build-app && yarn build-package && yarn copy-styles",
     "tsc": "tsc -p tsconfig.build.json",
@@ -113,7 +113,7 @@
     "calculate-size": "^1.1.1",
     "classnames": "^2.2.5",
     "codemirror": "^5.27.4",
-    "codemirror-graphql": "^0.6.12",
+    "codemirror-graphql": "0.6.11",
     "cuid": "^1.3.8",
     "graphcool-styles": "0.2.4",
     "graphcool-tmp-ui": "^0.0.11",
@@ -125,6 +125,7 @@
     "keycode": "^2.1.9",
     "lodash": "^4.17.4",
     "lodash.debounce": "^4.0.8",
+    "markdown-it": "^8.4.0",
     "marked": "^0.3.9",
     "polished": "^1.9.0",
     "postcss-modules": "^0.6.4",

packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx

@@ -189,7 +189,7 @@ class ExecuteButton extends React.Component<
           this.onOptionSelected(
             this.props.operations.find(
               op => op.name.value === upEvent.target.textContent,
-            ),
+            ) || this.props.operations[0],
           )
           firstTime = false
         }

packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx

@@ -4,9 +4,7 @@ import { parse, print, GraphQLSchema } from 'graphql'
 import * as cn from 'classnames'
 import ExecuteButton from './ExecuteButton'
 import { QueryEditor } from './QueryEditor'
-import { VariableEditor } from 'graphiql/dist/components/VariableEditor'
 import CodeMirrorSizer from 'graphiql/dist/utility/CodeMirrorSizer'
-import getQueryFacts from 'graphiql/dist/utility/getQueryFacts'
 import getSelectedOperationName from 'graphiql/dist/utility/getSelectedOperationName'
 import debounce from 'graphiql/dist/utility/debounce'
 import find from 'graphiql/dist/utility/find'
@@ -30,6 +28,8 @@ import { getSessionDocs } from '../../selectors/sessionDocs'
 import { styled } from '../../styled/index'
 import TopBar from './TopBar/TopBar'
 import { SharingProps } from '../Share'
+import getQueryFacts from './util/getQueryFacts'
+import { VariableEditor } from './VariableEditor'
 
 /**
  * The top-level React component for GraphQLEditor, intended to encompass the entire
@@ -507,6 +507,7 @@ export class GraphQLEditor extends React.PureComponent<
                 hideGutters={this.props.hideGutters}
                 readOnly={this.props.readonly}
                 useVim={this.props.useVim}
+                onClickReference={this.handleClickReference}
               />
               <div className="variable-editor" style={variableStyle}>
                 <div
@@ -618,7 +619,7 @@ export class GraphQLEditor extends React.PureComponent<
     }
     const data = JSON.stringify({
       query: this.state.query,
-      variables: variables,
+      variables,
       operationName: this.state.operationName,
     })
     let sessionHeaders
@@ -632,18 +633,18 @@ export class GraphQLEditor extends React.PureComponent<
     const headers = {
       'Accept-Encoding': 'gzip, deflate, br',
       'Content-Type': 'application/json',
-      'Accept': '*/*',
-      'Connection': 'keep-alive',
-      'DNT': '1',
-      'Origin': location.origin ||
-      this.props.session
-        .endpoint,
+      Accept: '*/*',
+      Connection: 'keep-alive',
+      DNT: '1',
+      Origin: location.origin || this.props.session.endpoint,
       ...sessionHeaders,
     }
-    const headersString = Object.keys(headers).map(key => {
-      const value = headers[key]
-      return `-H '${key}: ${value}'`
-    }).join(' ')
+    const headersString = Object.keys(headers)
+      .map(key => {
+        const value = headers[key]
+        return `-H '${key}: ${value}'`
+      })
+      .join(' ')
     return `curl '${
       this.props.session.endpoint
     }' ${headersString} --data-binary '${data}' --compressed`
@@ -681,6 +682,10 @@ export class GraphQLEditor extends React.PureComponent<
     this.resultComponent = ref
   }
 
+  handleClickReference = reference => {
+    //
+  }
+
   /**
    * Inspect the query, automatically filling in selection sets for non-leaf
    * fields which do not yet have them.

packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx

@@ -8,6 +8,7 @@
 
 import * as React from 'react'
 import { GraphQLSchema } from 'graphql'
+import * as MD from 'markdown-it'
 
 import onHasCompletion from './onHasCompletion'
 /**
@@ -28,6 +29,7 @@ export interface Props {
   onEdit?: (value: string) => void
   onHintInformationRender?: (elem: any) => void
   onRunQuery?: () => void
+  onClickReference?: (reference: any) => void
   placeholder?: string
   readOnly?: boolean
   hideLineNumbers?: boolean
@@ -36,6 +38,8 @@ export interface Props {
   useVim?: boolean
 }
 
+const md = new MD()
+
 export class QueryEditor extends React.Component<Props, {}> {
   private cachedValue: string
   private editor: any
@@ -61,12 +65,16 @@ export class QueryEditor extends React.Component<Props, {}> {
     require('codemirror/addon/edit/closebrackets')
     require('codemirror/addon/fold/foldgutter')
     require('codemirror/addon/fold/brace-fold')
+    require('codemirror/addon/search/search')
+    require('codemirror/addon/search/searchcursor')
+    require('codemirror/addon/search/jump-to-line')
+    require('codemirror/addon/dialog/dialog')
     require('codemirror/addon/lint/lint')
-    require('codemirror/addon/display/placeholder')
     require('codemirror/keymap/sublime')
-    require('codemirror/keymap/vim')
     require('codemirror-graphql/hint')
     require('codemirror-graphql/lint')
+    require('codemirror-graphql/info')
+    require('codemirror-graphql/jump')
     require('codemirror-graphql/mode')
 
     const gutters: any[] = []
@@ -102,9 +110,18 @@ export class QueryEditor extends React.Component<Props, {}> {
       },
       hintOptions: {
         schema: this.props.schema,
-        closeOnUnfocus: true,
+        closeOnUnfocus: false, // TODO reenable!!
         completeSingle: false,
       },
+      info: {
+        schema: this.props.schema,
+        renderDescription: text => md.render(text),
+        onClick: this.props.onClickReference,
+      },
+      jump: {
+        schema: this.props.schema,
+        onClick: this.props.onClickReference,
+      },
       gutters,
       extraKeys: {
         'Cmd-Space': () => this.editor.showHint({ completeSingle: true }),
@@ -143,16 +160,24 @@ export class QueryEditor extends React.Component<Props, {}> {
     // Ensure the changes caused by this update are not interpretted as
     // user-input changes which could otherwise result in an infinite
     // event loop.
+
     this.ignoreChangeEvent = true
     if (this.props.schema !== prevProps.schema) {
       this.editor.options.lint.schema = this.props.schema
       this.editor.options.hintOptions.schema = this.props.schema
+      this.editor.options.info.schema = this.props.schema
+      this.editor.options.jump.schema = this.props.schema
+      CodeMirror.signal(this.editor, 'change', this.editor)
       if (this.props.schema) {
+        const oldGetType = this.editor.options.hintOptions.schema.getType
         this.editor.options.hintOptions.schema.getType = type => {
-          return type
+          const result = oldGetType.call(
+            this.editor.options.hintOptions.schema,
+            type,
+          )
+          return result || type
         }
       }
-      CodeMirror.signal(this.editor, 'change', this.editor)
     }
     if (
       this.props.value !== prevProps.value &&

packages/graphql-playground-react/src/components/Playground/SchemaExplorer.tsx

@@ -22,15 +22,18 @@ export default function SchemaExplorer({ idl, modelName }: Props) {
           @p: .dn;
         }
       `}</style>
-      <div className="header">
-        Schema for „{modelName}“
-      </div>
+      <div className="header">Schema for „{modelName}“</div>
       <QueryEditor
         schema={null}
         value={idl || ''}
         readOnly={true}
         hideLineNumbers={true}
+        onClickReference={handleClickReference}
       />
     </div>
   )
 }
+
+function handleClickReference() {
+  //
+}