diff --git a/demo/IntrospectionModal.css b/demo/IntrospectionModal.css index 5e9c3b08..518ffd21 100644 --- a/demo/IntrospectionModal.css +++ b/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 { diff --git a/demo/IntrospectionModal.tsx b/demo/IntrospectionModal.tsx index 3221d272..8d730ea7 100644 --- a/demo/IntrospectionModal.tsx +++ b/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 } 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 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 onChange={this.handleTabChange} > +
{inputType === Presets && this.renderPresetsTab()} + {inputType === URL && this.renderURLTab()} {inputType === SDL && this.renderSDLTab()} {inputType === Introspection && this.renderIntrospectionTab()}
@@ -126,7 +156,12 @@ export class IntrospectionModal extends React.Component - @@ -156,12 +191,23 @@ export class IntrospectionModal extends React.Component ); } + renderURLTab() { + const { urlText, headers } = this.state.current; + return ( + <> + +
Set headers below:
+ + + ); + } + renderSDLTab() { const { sdlText } = this.state.current; return (