Add option to enter endpoint URL (fix #116)

demo/IntrospectionModal.css

@@ -40,8 +40,22 @@
     flex: 1;
     outline: none;
     padding: 10px;
+    margin: 10px 0;
     font-size: 14px;
   }
+
+  & > input {
+    padding: 5px;
+    margin: 10px 0;
+  }
+}
+
+.json-as-form {
+  margin: 10px 0 !important;
+}
+
+.json-row {
+  margin-left: 5px;
 }
 
 .copy-button {

demo/IntrospectionModal.tsx

@@ -6,6 +6,7 @@ import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Button from '@material-ui/core/Button';
 import Clipboard from 'react-clipboard.js';
+import JSONForm from 'json-as-form';
 
 import { buildSchema, introspectionQuery, introspectionFromSchema } from 'graphql/utilities';
 import { PRESETS, defaultPresetName } from './presets';
@@ -15,17 +16,23 @@ import './IntrospectionModal.css';
 export interface IntrospectionModalProps {
   open: boolean;
   onClose: () => void;
-  onChange: (introspectin: any) => void;
+  onChange: (introspection: any) => void;
 }
 
 const Presets = 'Presets';
+const URL = 'URL';
 const SDL = 'SDL';
 const Introspection = 'Introspection';
-const tabNames = [Presets, SDL, Introspection];
+const tabNames = [Presets, URL, SDL, Introspection];
 
 const initialConfig = {
   inputType: Presets,
   activePreset: defaultPresetName,
+  urlText: null,
+  headers: {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json',
+  },
   sdlText: null,
   jsonText: null,
 };
@@ -60,16 +67,27 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps>
   }
 
   handleCancel = () => {
-    this.setState({ current: { ...this.state.submitted } })
+    this.setState({ current: { ...this.state.submitted } });
     this.props.onClose();
   };
 
+  fetchIntrospection = (url, headers) => {
+    return fetch(url, {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify({ query: introspectionQuery }),
+    }).then(response => response.json());
+  };
+
   handleSubmit = () => {
-    const { inputType, activePreset, jsonText, sdlText } = this.state.current;
+    const { inputType, activePreset, urlText, headers, jsonText, sdlText } = this.state.current;
     switch (inputType) {
       case Presets:
         this.props.onChange(PRESETS[activePreset]);
         break;
+      case URL:
+        this.fetchIntrospection(urlText, headers).then(data => this.props.onChange(data));
+        break;
       case Introspection:
         this.props.onChange(JSON.parse(jsonText));
         break;
@@ -79,25 +97,35 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps>
         break;
     }
 
-    this.setState({ submitted: { ...this.state.current } })
+    this.setState({ submitted: { ...this.state.current } });
     this.props.onClose();
   };
 
-  handlePresetChange = (activePreset) => {
+  handlePresetChange = activePreset => {
     this.changeCurrent({ activePreset });
-  }
+  };
 
-  handleSDLChange = (event) => {
+  handleURLChange = event => {
+    let urlText = event.target.value;
+    if (urlText === '') urlText = null;
+    this.changeCurrent({ urlText });
+  };
+
+  handleHeadersChange = headers => {
+    this.changeCurrent({ headers });
+  };
+
+  handleSDLChange = event => {
     let sdlText = event.target.value;
     if (sdlText === '') sdlText = null;
     this.changeCurrent({ sdlText });
-  }
+  };
 
-  handleJSONChange = (event) => {
+  handleIntrospectionChange = event => {
     let jsonText = event.target.value;
     if (jsonText === '') jsonText = null;
     this.changeCurrent({ jsonText });
-  }
+  };
 
   public render() {
     const { open } = this.props;
@@ -113,11 +141,13 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps>
             onChange={this.handleTabChange}
           >
             <Tab label={Presets} />
+            <Tab label={URL} />
             <Tab label={SDL} />
             <Tab label={Introspection} />
           </Tabs>
           <div className="tab-container">
             {inputType === Presets && this.renderPresetsTab()}
+            {inputType === URL && this.renderURLTab()}
             {inputType === SDL && this.renderSDLTab()}
             {inputType === Introspection && this.renderIntrospectionTab()}
           </div>
@@ -126,7 +156,12 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps>
             <Button variant="contained" onClick={this.handleCancel}>
               Cancel
             </Button>
-            <Button variant="contained" color="primary"  style={{color: 'white'}} onClick={this.handleSubmit}>
+            <Button
+              variant="contained"
+              color="primary"
+              style={{ color: 'white' }}
+              onClick={this.handleSubmit}
+            >
               Display
             </Button>
           </div>
@@ -156,12 +191,23 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps>
     );
   }
 
+  renderURLTab() {
+    const { urlText, headers } = this.state.current;
+    return (
+      <>
+        <input value={urlText || ''} placeholder="Paste URL here" onChange={this.handleURLChange} />
+        <div>Set headers below:</div>
+        <JSONForm json={headers} autoAddRow={true} onChange={this.handleHeadersChange} />
+      </>
+    );
+  }
+
   renderSDLTab() {
     const { sdlText } = this.state.current;
     return (
       <textarea
         value={sdlText || ''}
-        placeholder="Paste SDL Here"
+        placeholder="Paste SDL here"
         onChange={this.handleSDLChange}
       />
     );
@@ -189,8 +235,8 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps>
         </Clipboard>
         <textarea
           value={jsonText || ''}
-          placeholder="Paste Introspection Here"
-          onChange={this.handleJSONChange}
+          placeholder="Paste Introspection (JSON) here"
+          onChange={this.handleIntrospectionChange}
         />
       </>
     );

package.json

@@ -74,6 +74,7 @@
     "classnames": "^2.2.6",
     "clipboard": "^2.0.4",
     "commonmark": "^0.29.0",
+    "json-as-form": "^0.0.22",
     "lodash": "^4.17.10",
     "prop-types": "^15.7.2",
     "svg-pan-zoom": "^3.6.0",