Move GraphQL default value into separate component

packages/insomnia-app/app/ui/components/graph-ql-explorer/graph-ql-default-value.js

@@ -0,0 +1,27 @@
+// @flow
+import * as React from 'react';
+import type { GraphQLField } from 'graphql';
+import { astFromValue, print } from 'graphql';
+
+type Props = {
+  field: GraphQLField<any, any>,
+};
+
+class GraphQLDefaultValue extends React.PureComponent<Props> {
+  render() {
+    const { field } = this.props;
+
+    // Make Flow happy :/
+    const fieldO: Object = field;
+
+    if ('defaultValue' in fieldO && fieldO.defaultValue !== undefined) {
+      const ast = astFromValue(fieldO.defaultValue, fieldO.type);
+      const strDefault = ast ? print(ast) : '';
+      return <span className="success">{`= ${strDefault}`}</span>;
+    } else {
+      return null;
+    }
+  }
+}
+
+export default GraphQLDefaultValue;

packages/insomnia-app/app/ui/components/graph-ql-explorer/graph-ql-explorer-field.js

@@ -3,19 +3,13 @@ import * as React from 'react';
 import type { GraphQLField, GraphQLType } from 'graphql';
 import GraphQLExplorerTypeLink from './graph-ql-explorer-type-link';
 import MarkdownPreview from '../markdown-preview';
-import { astFromValue, print } from 'graphql';
+import GraphQLDefaultValue from './graph-ql-default-value';
 
 type Props = {
   onNavigateType: (type: GraphQLType) => void,
   field: GraphQLField<any, any>,
 };
 
-const printDefault = ast => {
-  if (!ast) {
-    return '';
-  }
-  return print(ast);
-};
 class GraphQLExplorerField extends React.PureComponent<Props> {
   renderDescription() {
     const { field } = this.props;
@@ -44,15 +38,11 @@ class GraphQLExplorerField extends React.PureComponent<Props> {
         <h2 className="graphql-explorer__subheading">Arguments</h2>
         <ul className="graphql-explorer__defs">
           {field.args.map(a => {
-            let defaultValue = '';
-            if ('defaultValue' in a && a.defaultValue !== undefined) {
-              defaultValue = <span> = {printDefault(astFromValue(a.defaultValue, a.type))}</span>;
-            }
             return (
               <li key={a.name}>
                 <span className="info">{a.name}</span>:{' '}
                 <GraphQLExplorerTypeLink onNavigate={onNavigateType} type={a.type} />
-                {defaultValue}
+                <GraphQLDefaultValue field={(a: Object)} />
                 {a.description && <MarkdownPreview markdown={a.description} />}
               </li>
             );

packages/insomnia-app/app/ui/components/graph-ql-explorer/graph-ql-explorer-type.js

@@ -4,14 +4,9 @@ import GraphQLExplorerTypeLink from './graph-ql-explorer-type-link';
 import autobind from 'autobind-decorator';
 import MarkdownPreview from '../markdown-preview';
 import GraphQLExplorerFieldLink from './graph-ql-explorer-field-link';
-import {
-  GraphQLUnionType,
-  GraphQLInterfaceType,
-  GraphQLObjectType,
-  astFromValue,
-  print,
-} from 'graphql';
-import type { GraphQLType, GraphQLField, GraphQLSchema } from 'graphql';
+import type { GraphQLField, GraphQLSchema, GraphQLType } from 'graphql';
+import { GraphQLInterfaceType, GraphQLObjectType, GraphQLUnionType } from 'graphql';
+import GraphQLDefaultValue from './graph-ql-default-value';
 
 type Props = {
   onNavigateType: (type: Object) => void,
@@ -20,12 +15,6 @@ type Props = {
   schema: GraphQLSchema | null,
 };
 
-const printDefault = ast => {
-  if (!ast) {
-    return '';
-  }
-  return print(ast);
-};
 @autobind
 class GraphQLExplorerType extends React.PureComponent<Props> {
   _handleNavigateType(type: Object) {
@@ -121,17 +110,11 @@ class GraphQLExplorerType extends React.PureComponent<Props> {
               <GraphQLExplorerTypeLink onNavigate={this._handleNavigateType} type={field.type} />
             );
 
-            let defaultValue = '';
-            if ('defaultValue' in field && field.defaultValue !== undefined) {
-              defaultValue = (
-                <span> = {printDefault(astFromValue(field.defaultValue, field.type))}</span>
-              );
-            }
             const description = field.description;
             return (
               <li key={key}>
                 {fieldLink}
-                {argLinks}: {typeLink} {defaultValue}
+                {argLinks}: {typeLink} <GraphQLDefaultValue field={field} />
                 {description && (
                   <div className="graphql-explorer__defs__description">
                     <MarkdownPreview markdown={description} />