extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-21 23:43:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: graphql query syntax highlighting

Browse Source
This commit is contained in:
Anoop M D 2021-12-06 18:59:49 +05:30
parent 26da4307be
commit 5d3a148513
12 changed files with 603 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
package-lock.json generated
View File

@ -20,11 +20,13 @@
"classnames": "^2.3.1",
"codemirror": "^5.64.0",
"codemirror-graphql": "^1.2.5",
"escape-html": "^1.0.3",
"eslint": "7.32.0",
"eslint-config-next": "12.0.4",
"graphql-request": "^3.7.0",
"immer": "^9.0.7",
"lodash": "^4.17.21",
"markdown-it": "^12.2.0",
"nanoid": "^3.1.30",
"next": "12.0.4",
"react": "17.0.2",
@ -7089,6 +7091,11 @@
"node": ">=6"
}
},
"node_modules/escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
},
"node_modules/escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@ -10200,6 +10207,14 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"node_modules/linkify-it": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
"integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
"dependencies": {
"uc.micro": "^1.0.1"
}
},
"node_modules/load-json-file": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
@ -10433,6 +10448,34 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/markdown-it": {
"version": "12.2.0",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz",
"integrity": "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==",
"dependencies": {
"argparse": "^2.0.1",
"entities": "~2.1.0",
"linkify-it": "^3.0.1",
"mdurl": "^1.0.1",
"uc.micro": "^1.0.5"
},
"bin": {
"markdown-it": "bin/markdown-it.js"
}
},
"node_modules/markdown-it/node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
},
"node_modules/markdown-it/node_modules/entities": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -10443,6 +10486,11 @@
"safe-buffer": "^5.1.2"
}
},
"node_modules/mdurl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
},
"node_modules/meow": {
"version": "8.1.2",
"resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
@ -15154,6 +15202,11 @@
"node": ">=4.2.0"
}
},
"node_modules/uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
},
"node_modules/uglify-js": {
"version": "3.14.4",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.4.tgz",
@ -16039,6 +16092,8 @@
"@fortawesome/react-fontawesome": "^0.1.16",
"classnames": "^2.3.1",
"codemirror": "^5.64.0",
"escape-html": "^1.0.3",
"markdown-it": "^12.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-tabs": "^3.2.3",
@ -21411,6 +21466,11 @@
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
},
"escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
},
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@ -23719,6 +23779,14 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"linkify-it": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
"integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
"requires": {
"uc.micro": "^1.0.1"
}
},
"load-json-file": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
@ -23916,6 +23984,30 @@
"integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
"dev": true
},
"markdown-it": {
"version": "12.2.0",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz",
"integrity": "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==",
"requires": {
"argparse": "^2.0.1",
"entities": "~2.1.0",
"linkify-it": "^3.0.1",
"mdurl": "^1.0.1",
"uc.micro": "^1.0.5"
},
"dependencies": {
"argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
},
"entities": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
}
}
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -23926,6 +24018,11 @@
"safe-buffer": "^5.1.2"
}
},
"mdurl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
},
"meow": {
"version": "8.1.2",
"resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
@ -27462,6 +27559,11 @@
"integrity": "sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==",
"peer": true
},
"uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
},
"uglify-js": {
"version": "3.14.4",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.4.tgz",

2
packages/grafnode-components/package.json
View File

@ -26,6 +26,8 @@
"@fortawesome/react-fontawesome": "^0.1.16",
"classnames": "^2.3.1",
"codemirror": "^5.64.0",
"escape-html": "^1.0.3",
"markdown-it": "^12.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-tabs": "^3.2.3",

4
packages/grafnode-components/src/components/QueryEditor/StyledWrapper.js
View File

@ -4,6 +4,10 @@ const StyledWrapper = styled.div`
div.CodeMirror {
border: solid 1px #e1e1e1;
}
textarea.cm-editor {
position: relative;
}
`;
export default StyledWrapper;

248
packages/grafnode-components/src/components/QueryEditor/index.js
View File

@ -1,52 +1,218 @@
import React, { useState, useEffect, useRef } from 'react';
/**
* Copyright (c) 2021 GraphQL Contributors.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import CodeMirror from 'codemirror';
import MD from 'markdown-it';
import StyledWrapper from './StyledWrapper';
import * as CodeMirror from 'codemirror';
const QueryEditor = ({query, onChange, width}) => {
const [cmEditor, setCmEditor] = useState(null);
const editor = useRef();
import onHasCompletion from './onHasCompletion';
useEffect(() => {
if (editor.current && !cmEditor) {
const _cmEditor = CodeMirror.fromTextArea(editor.current, {
value: '',
lineNumbers: true,
matchBrackets: true,
autoCloseBrackets: true,
mode: "graphql",
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
lineWrapping: true
});
const md = new MD();
const AUTO_COMPLETE_AFTER_KEY = /^[a-zA-Z0-9_@(]$/;
_cmEditor.setValue(query || 'query { }');
export default class QueryEditor extends React.Component {
constructor(props) {
super(props);
setCmEditor(_cmEditor);
// Keep a cached version of the value, this cache will be updated when the
// editor is updated, which can later be used to protect the editor from
// unnecessary updates during the update lifecycle.
this.cachedValue = props.value || '';
}
componentDidMount() {
const editor = (this.editor = CodeMirror(this._node, {
value: this.props.value || '',
lineNumbers: true,
tabSize: 2,
mode: 'graphql',
theme: this.props.editorTheme || 'graphiql',
keyMap: 'sublime',
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
readOnly: this.props.readOnly ? 'nocursor' : false,
foldGutter: {
minFoldSize: 4,
},
lint: {
schema: this.props.schema,
validationRules: this.props.validationRules ?? null,
// linting accepts string or FragmentDefinitionNode[]
externalFragments: this.props?.externalFragments,
},
hintOptions: {
schema: this.props.schema,
closeOnUnfocus: false,
completeSingle: false,
container: this._node,
externalFragments: this.props?.externalFragments,
},
info: {
schema: this.props.schema,
renderDescription: (text) => md.render(text),
onClick: (reference) =>
this.props.onClickReference && this.props.onClickReference(reference),
},
jump: {
schema: this.props.schema,
onClick: (reference) =>
this.props.onClickReference && this.props.onClickReference(reference)
},
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
extraKeys: {
'Cmd-Space': () =>
editor.showHint({ completeSingle: true, container: this._node }),
'Ctrl-Space': () =>
editor.showHint({ completeSingle: true, container: this._node }),
'Alt-Space': () =>
editor.showHint({ completeSingle: true, container: this._node }),
'Shift-Space': () =>
editor.showHint({ completeSingle: true, container: this._node }),
'Shift-Alt-Space': () =>
editor.showHint({ completeSingle: true, container: this._node }),
'Cmd-Enter': () => {
if (this.props.onRunQuery) {
this.props.onRunQuery();
}
},
'Ctrl-Enter': () => {
if (this.props.onRunQuery) {
this.props.onRunQuery();
}
},
'Shift-Ctrl-C': () => {
if (this.props.onCopyQuery) {
this.props.onCopyQuery();
}
},
'Shift-Ctrl-P': () => {
if (this.props.onPrettifyQuery) {
this.props.onPrettifyQuery();
}
},
/* Shift-Ctrl-P is hard coded in Firefox for private browsing so adding an alternative to Pretiffy */
'Shift-Ctrl-F': () => {
if (this.props.onPrettifyQuery) {
this.props.onPrettifyQuery();
}
},
'Shift-Ctrl-M': () => {
if (this.props.onMergeQuery) {
this.props.onMergeQuery();
}
},
'Cmd-S': () => {
if (this.props.onRunQuery) {
// empty
}
},
'Ctrl-S': () => {
if (this.props.onRunQuery) {
// empty
}
},
},
}));
if (editor) {
editor.on('change', this._onEdit);
editor.on('keyup', this._onKeyUp);
editor.on('hasCompletion', this._onHasCompletion);
editor.on('beforeChange', this._onBeforeChange);
}
}
return () => {
if(cmEditor) {
cmEditor.toTextArea();
componentDidUpdate(prevProps) {
// 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) {
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.value !== prevProps.value &&
this.props.value !== this.cachedValue &&
this.editor
) {
this.cachedValue = this.props.value;
this.editor.setValue(this.props.value);
}
this.ignoreChangeEvent = false;
}
componentWillUnmount() {
if (this.editor) {
this.editor.off('change', this._onEdit);
this.editor.off('keyup', this._onKeyUp);
this.editor.off('hasCompletion', this._onHasCompletion);
this.editor = null;
}
}
render() {
return (
<StyledWrapper
className="mt-4"
aria-label="Query Editor"
ref={node => {
this._node = node;
}}
/>
);
}
/**
* Public API for retrieving the DOM client height for this component.
*/
getClientHeight() {
return this._node && this._node.clientHeight;
}
_onKeyUp = (_cm, event) => {
if (AUTO_COMPLETE_AFTER_KEY.test(event.key) && this.editor) {
this.editor.execCommand('autocomplete');
}
};
_onEdit = () => {
if (!this.ignoreChangeEvent && this.editor) {
this.cachedValue = this.editor.getValue();
if (this.props.onEdit) {
this.props.onEdit(this.cachedValue);
}
}
}, [editor.current, cmEditor]);
};
return (
<StyledWrapper>
<div className="mt-4">
<textarea
id="operation"
style={{
width: `${width}px`,
height: '400px'
}}
ref={editor}
className="cm-editor"
>
</textarea>
</div>
</StyledWrapper>
);
};
/**
* Render a custom UI for CodeMirror's hint which includes additional info
* about the type and description for the selected context.
*/
_onHasCompletion = (cm, data) => {
onHasCompletion(cm, data, this.props.onHintInformationRender);
};
export default QueryEditor;
_onBeforeChange(_instance, change) {
// The update function is only present on non-redo, non-undo events.
if (change.origin === 'paste') {
const text = change.text.map(normalizeWhitespace);
change.update(change.from, change.to, text);
}
}
}

112
packages/grafnode-components/src/components/QueryEditor/onHasCompletion.js Normal file
View File

@ -0,0 +1,112 @@
/**
* Copyright (c) 2021 GraphQL Contributors.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import escapeHTML from 'escape-html';
import MD from 'markdown-it';
import {
GraphQLNonNull,
GraphQLList,
GraphQLType,
GraphQLField,
} from 'graphql';
const md = new MD();
/**
* Render a custom UI for CodeMirror's hint which includes additional info
* about the type and description for the selected context.
*/
export default function onHasCompletion(
_cm,
data,
onHintInformationRender,
) {
const CodeMirror = require('codemirror');
let information;
let deprecation;
// When a hint result is selected, we augment the UI with information.
CodeMirror.on(
data,
'select',
(ctx, el) => {
// Only the first time (usually when the hint UI is first displayed)
// do we create the information nodes.
if (!information) {
const hintsUl = el.parentNode;
// This "information" node will contain the additional info about the
// highlighted typeahead option.
information = document.createElement('div');
information.className = 'CodeMirror-hint-information';
hintsUl.appendChild(information);
// This "deprecation" node will contain info about deprecated usage.
deprecation = document.createElement('div');
deprecation.className = 'CodeMirror-hint-deprecation';
hintsUl.appendChild(deprecation);
// When CodeMirror attempts to remove the hint UI, we detect that it was
// removed and in turn remove the information nodes.
let onRemoveFn;
hintsUl.addEventListener(
'DOMNodeRemoved',
(onRemoveFn = (event) => {
if (event.target === hintsUl) {
hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
information = null;
deprecation = null;
onRemoveFn = null;
}
}),
);
}
// Now that the UI has been set up, add info to information.
const description = ctx.description
? md.render(ctx.description)
: 'Self descriptive.';
const type = ctx.type
? '<span class="infoType">' + renderType(ctx.type) + '</span>'
: '';
information.innerHTML =
'<div class="content">' +
(description.slice(0, 3) === '<p>'
? '<p>' + type + description.slice(3)
: type + description) +
'</div>';
if (ctx && deprecation && ctx.deprecationReason) {
const reason = ctx.deprecationReason
? md.render(ctx.deprecationReason)
: '';
deprecation.innerHTML =
'<span class="deprecation-label">Deprecated</span>' + reason;
deprecation.style.display = 'block';
} else if (deprecation) {
deprecation.style.display = 'none';
}
// Additional rendering?
if (onHintInformationRender) {
onHintInformationRender(information);
}
},
);
}
function renderType(type) {
if (type instanceof GraphQLNonNull) {
return `${renderType(type.ofType)}!`;
}
if (type instanceof GraphQLList) {
return `[${renderType(type.ofType)}]`;
}
return `<a class="typeName">${escapeHTML(type.name)}</a>`;
}

6
packages/grafnode-components/src/components/RequestPane/index.js
View File

@ -3,7 +3,7 @@ import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import StyledWrapper from './StyledWrapper';
import QueryEditor from '../QueryEditor';
const RequestPane = ({leftPaneWidth, query, onQueryChange}) => {
const RequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange}) => {
return (
<StyledWrapper className="">
<Tabs className='react-tabs mt-1 flex flex-grow flex-col' forceRenderTabPanel>
@ -13,8 +13,10 @@ const RequestPane = ({leftPaneWidth, query, onQueryChange}) => {
</TabList>
<TabPanel>
<QueryEditor
schema={schema}
width={leftPaneWidth}
query={query}
value={value}
onRunQuery={onRunQuery}
onChange={onQueryChange}
/>
</TabPanel>

16
packages/grafnode-components/src/components/RequestTabPanel/index.js
View File

@ -8,6 +8,7 @@ import {
flattenItems,
findItem
} from '../../utils';
import useGraphqlSchema from '../../hooks/useGraphqlSchema';
import StyledWrapper from './StyledWrapper';
@ -19,6 +20,9 @@ const RequestTabPanel = ({collections, activeRequestTabId, requestTabs}) => {
let asideWidth = 200;
let [data, setData] = useState({});
let [url, setUrl] = useState('https://api.spacex.land/graphql');
let {
schema
} = useGraphqlSchema('https://api.spacex.land/graphql');
let [query, setQuery] = useState('');
let [isLoading, setIsLoading] = useState(false);
const [leftPaneWidth, setLeftPaneWidth] = useState(500);
@ -49,12 +53,8 @@ const RequestTabPanel = ({collections, activeRequestTabId, requestTabs}) => {
};
}, [dragging, leftPaneWidth]);
const onUrlChange = (value) => {
setUrl(value);
};
const onQueryChange = (value) => {
setQuery(value);
};
const onUrlChange = (value) => setUrl(value);
const onQueryChange = (value) => setQuery(value);
if(!activeRequestTabId) {
return (
@ -116,8 +116,10 @@ const RequestTabPanel = ({collections, activeRequestTabId, requestTabs}) => {
<section className="request-pane px-4">
<div style={{width: `${leftPaneWidth}px`}}>
<RequestPane
onRunQuery={runQuery}
schema={schema}
leftPaneWidth={leftPaneWidth}
query={item.request.body.graphql.query}
value={item.request.body.graphql.query}
onQueryChange={onQueryChange}
/>
</div>

45
packages/grafnode-components/src/hooks/useGraphqlSchema/index.js Normal file
View File

@ -0,0 +1,45 @@
import { useState, useEffect } from 'react';
import { getIntrospectionQuery, buildClientSchema } from 'graphql';
const useGraphqlSchema =(endpoint) => {
const [isLoaded, setIsLoaded] = useState(false);
const [schema, setSchema] = useState(null);
const [error, setError] = useState(null);
const introspectionQuery = getIntrospectionQuery();
const queryParams = {
query: introspectionQuery
}
useEffect(() => {
fetch(endpoint, {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(queryParams)
})
.then((res) => res.json())
.then((s) => {
if(s && s.data) {
setSchema(buildClientSchema(s.data));
setIsLoaded(true);
} else {
return Promise.reject(new Error('An error occurred while introspecting schema'));
}
})
.catch((err) => {
setError(err);
console.log(err);
});
}, []);
return {
isLoaded,
schema,
error
};
}
export default useGraphqlSchema;

3
packages/grafnode-components/webpack.config.js
View File

@ -37,6 +37,9 @@ module.exports = {
'classnames': 'classnames',
'react-tabs': 'react-tabs',
'codemirror': 'codemirror',
'graphql': 'graphql',
'escape-html': 'escape-html',
'markdown-it': 'markdown-it',
'graphql-request': 'graphql-request'
},
plugins: [

100
packages/grafnode-run/package-lock.json generated
View File

@ -17,9 +17,11 @@
"classnames": "^2.3.1",
"codemirror": "^5.64.0",
"codemirror-graphql": "^1.2.5",
"escape-html": "^1.0.3",
"graphql-request": "^3.7.0",
"immer": "^9.0.7",
"lodash": "^4.17.21",
"markdown-it": "^12.2.0",
"nanoid": "^3.1.30",
"next": "12.0.4",
"react": "17.0.2",
@ -4279,6 +4281,14 @@
"node": ">=8.6"
}
},
"node_modules/entities": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@ -4356,6 +4366,11 @@
"node": ">=6"
}
},
"node_modules/escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
},
"node_modules/escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@ -6248,6 +6263,14 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"node_modules/linkify-it": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
"integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
"dependencies": {
"uc.micro": "^1.0.1"
}
},
"node_modules/loader-runner": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@ -6375,6 +6398,26 @@
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
},
"node_modules/markdown-it": {
"version": "12.2.0",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz",
"integrity": "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==",
"dependencies": {
"argparse": "^2.0.1",
"entities": "~2.1.0",
"linkify-it": "^3.0.1",
"mdurl": "^1.0.1",
"uc.micro": "^1.0.5"
},
"bin": {
"markdown-it": "bin/markdown-it.js"
}
},
"node_modules/markdown-it/node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
},
"node_modules/md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -6385,6 +6428,11 @@
"safe-buffer": "^5.1.2"
}
},
"node_modules/mdurl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -8833,6 +8881,11 @@
"node": ">=4.2.0"
}
},
"node_modules/uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
},
"node_modules/unbox-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@ -12405,6 +12458,11 @@
"ansi-colors": "^4.1.1"
}
},
"entities": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
},
"error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@ -12467,6 +12525,11 @@
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
},
"escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
},
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@ -13848,6 +13911,14 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"linkify-it": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
"integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
"requires": {
"uc.micro": "^1.0.1"
}
},
"loader-runner": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@ -13953,6 +14024,25 @@
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
},
"markdown-it": {
"version": "12.2.0",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz",
"integrity": "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==",
"requires": {
"argparse": "^2.0.1",
"entities": "~2.1.0",
"linkify-it": "^3.0.1",
"mdurl": "^1.0.1",
"uc.micro": "^1.0.5"
},
"dependencies": {
"argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
}
}
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -13963,6 +14053,11 @@
"safe-buffer": "^5.1.2"
}
},
"mdurl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
},
"merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -15763,6 +15858,11 @@
"integrity": "sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==",
"peer": true
},
"uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
},
"unbox-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",

2
packages/grafnode-run/package.json
View File

@ -29,9 +29,11 @@
"classnames": "^2.3.1",
"codemirror": "^5.64.0",
"codemirror-graphql": "^1.2.5",
"escape-html": "^1.0.3",
"graphql-request": "^3.7.0",
"immer": "^9.0.7",
"lodash": "^4.17.21",
"markdown-it": "^12.2.0",
"nanoid": "^3.1.30",
"next": "12.0.4",
"react": "17.0.2",

13
packages/grafnode-run/src/pageComponents/Main/index.js
View File

@ -13,10 +13,23 @@ import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/keymap/sublime';
import 'codemirror/addon/comment/comment';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/search/search';
import 'codemirror/addon/search/searchcursor';
import 'codemirror/addon/search/jump-to-line';
import 'codemirror/addon/dialog/dialog';
import 'codemirror-graphql/hint';
import 'codemirror-graphql/lint';
import 'codemirror-graphql/info';
import 'codemirror-graphql/jump';
import 'codemirror-graphql/mode';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/hint/show-hint.css';
const RequestTabPanel = dynamic(import('@grafnode/components').then(mod => mod.RequestTabPanel), { ssr: false });