-
-
Notifications
You must be signed in to change notification settings - Fork 503
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add option to enter endpoint URL (fix #116) #148
base: main
Are you sure you want to change the base?
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -40,6 +40,7 @@ | |
flex: 1; | ||
outline: none; | ||
padding: 10px; | ||
margin: 5px 0; | ||
font-size: 14px; | ||
} | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,17 +15,20 @@ 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: null, | ||
sdlText: null, | ||
jsonText: null, | ||
}; | ||
|
@@ -64,12 +67,27 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps> | |
this.props.onClose(); | ||
}; | ||
|
||
fetchIntrospection = (url, headers) => { | ||
return fetch(url, { | ||
method: 'POST', | ||
headers: { | ||
'Accept': 'application/json', | ||
'Content-Type': 'application/json', | ||
...JSON.parse(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; | ||
|
@@ -87,13 +105,25 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps> | |
this.changeCurrent({ activePreset }); | ||
} | ||
|
||
handleURLChange = (event) => { | ||
let urlText = event.target.value; | ||
if (urlText === '') urlText = null; | ||
this.changeCurrent({ urlText }); | ||
} | ||
|
||
handleHeadersChange = (event) => { | ||
let headers = event.target.value; | ||
if (headers === '') headers = null; | ||
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 }); | ||
|
@@ -113,11 +143,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> | ||
|
@@ -156,12 +188,33 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps> | |
); | ||
} | ||
|
||
renderURLTab() { | ||
const { urlText, headers } = this.state.current; | ||
return ( | ||
<> | ||
<textarea | ||
value={urlText || ''} | ||
placeholder="Paste URL here" | ||
onChange={this.handleURLChange} | ||
/> | ||
<div> | ||
Paste headers (in JSON format) into the textarea below. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great for PoC but it bad UX in the long run, it would be constant source of frustration for users. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I believe this is an acceptable solution. Please take a look at GraphQL Playground. Users paste headers in GraphQL Playground in JSON format. GraphQL Playground is production-ready tool. Also users paste variables in GraphiQL and GraphQL Playground in JSON format too. The target audience of these tools are developers. So I think this is ok. |
||
</div> | ||
<textarea | ||
value={headers || ''} | ||
placeholder="Paste headers here" | ||
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 +242,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} | ||
/> | ||
</> | ||
); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How UI look like during fetch?
and where is error handling?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
UI looks the same as for the rest "Introspection" and "SDL" tabs. Please note, there is no any error handling for them too. E.g.:
Errors are printed in the browser console.