paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Replaced GraphiQL in Api Docs with DocExplorer

Browse Source 
Signed-off-by: Taras Mankovski <taras@frontside.com>
This commit is contained in:
Taras Mankovski
2023-10-23 14:21:29 -04:00
parent 45c15ac39b
commit 0ac0e10822
4 changed files with 36 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/beige-stingrays-tap.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-api-docs': minor
---
Replace GraphiQL playground with DocExplorer
plugins/api-docs/package.json
+2 -1
View File
@@ -40,11 +40,12 @@
"@backstage/plugin-catalog": "workspace:^",
"@backstage/plugin-catalog-react": "workspace:^",
"@backstage/theme": "workspace:^",
"@graphiql/react": "^0.19.4",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.61",
"@types/react": "^16.13.1 || ^17.0.0",
"graphiql": "^1.8.8",
"graphiql": "3.0.6",
"graphql": "^16.0.0",
"graphql-ws": "^5.4.1",
"isomorphic-form-data": "^2.0.0",
plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx
+25 -7
View File
@@ -16,7 +16,12 @@
import { BackstageTheme } from '@backstage/theme';
import { makeStyles } from '@material-ui/core/styles';
import GraphiQL from 'graphiql';
import {
DocExplorer,
EditorContextProvider,
ExplorerContextProvider,
SchemaContextProvider,
} from '@graphiql/react';
import 'graphiql/graphiql.css';
import { buildSchema } from 'graphql';
import React from 'react';
@@ -36,6 +41,9 @@ const useStyles = makeStyles<BackstageTheme>(() => ({
minHeight: '600px',
flex: '1 1 auto',
},
'.graphiql-sidebar': {
width: '100%',
},
},
},
}));
@@ -51,12 +59,22 @@ export const GraphQlDefinition = ({ definition }: Props) => {
return (
<div className={classes.root}>
<div className={classes.graphiQlWrapper}>
<GraphiQL
fetcher={() => Promise.resolve(null) as any}
schema={schema}
docExplorerOpen
defaultSecondaryEditorOpen={false}
/>
<EditorContextProvider>
<SchemaContextProvider
schema={schema}
fetcher={() => Promise.resolve(null) as any}
>
<div className="graphiql-container">
<div className="graphiql-sidebar">
<div className="graphiql-sidebar-section">
<ExplorerContextProvider>
<DocExplorer />
</ExplorerContextProvider>
</div>
</div>
</div>
</SchemaContextProvider>
</EditorContextProvider>
</div>
</div>
);
yarn.lock
+4 -66
View File
@@ -4767,6 +4767,7 @@ __metadata:
"@backstage/plugin-catalog-react": "workspace:^"
"@backstage/test-utils": "workspace:^"
"@backstage/theme": "workspace:^"
"@graphiql/react": ^0.19.4
"@material-ui/core": ^4.12.2
"@material-ui/icons": ^4.9.1
"@material-ui/lab": 4.0.0-alpha.61
@@ -4777,7 +4778,7 @@ __metadata:
"@types/react": ^16.13.1 || ^17.0.0
"@types/swagger-ui-react": ^4.18.0
cross-fetch: ^3.1.5
graphiql: ^1.8.8
graphiql: 3.0.6
graphql: ^16.0.0
graphql-ws: ^5.4.1
isomorphic-form-data: ^2.0.0
@@ -11684,26 +11685,6 @@ __metadata:
languageName: node
linkType: hard
"@graphiql/react@npm:^0.10.0":
version: 0.10.0
resolution: "@graphiql/react@npm:0.10.0"
dependencies:
"@graphiql/toolkit": ^0.6.1
codemirror: ^5.65.3
codemirror-graphql: ^1.3.2
copy-to-clipboard: ^3.2.0
escape-html: ^1.0.3
graphql-language-service: ^5.0.6
markdown-it: ^12.2.0
set-value: ^4.1.0
peerDependencies:
graphql: ^15.5.0 || ^16.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 1c473f6dbacba617ea6f9c272abbe22aa61643a0ce059835b40bfd368c211bccec806bca24600ba42cf356f02649f062622802cd8afba3bfdd5aae2783935e37
languageName: node
linkType: hard
"@graphiql/react@npm:^0.19.4":
version: 0.19.4
resolution: "@graphiql/react@npm:0.19.4"
@@ -11731,19 +11712,6 @@ __metadata:
languageName: node
linkType: hard
"@graphiql/toolkit@npm:^0.6.1":
version: 0.6.1
resolution: "@graphiql/toolkit@npm:0.6.1"
dependencies:
"@n1ru4l/push-pull-async-iterable-iterator": ^3.1.0
meros: ^1.1.4
peerDependencies:
graphql: ^15.5.0 || ^16.0.0
graphql-ws: ">= 4.5.0"
checksum: c3701687f70a643441cc18253beeb2cf79c993f5be0d0d16210da456f0c6abde229b0ff79cc1cc63eccd98f306f918cb8d88f3ad54f0329c52879c9dec0d596c
languageName: node
linkType: hard
"@graphiql/toolkit@npm:^0.9.1":
version: 0.9.1
resolution: "@graphiql/toolkit@npm:0.9.1"
@@ -23459,19 +23427,6 @@ __metadata:
languageName: node
linkType: hard
"codemirror-graphql@npm:^1.3.2":
version: 1.3.2
resolution: "codemirror-graphql@npm:1.3.2"
dependencies:
graphql-language-service: ^5.0.6
peerDependencies:
"@codemirror/language": ^0.20.0
codemirror: ^5.65.3
graphql: ^15.5.0 || ^16.0.0
checksum: d134953dc402c44d1a4572ef6f3f6654cac4611dd9f7fefddbc6f17805d3866e8c86d956b69efcec94fcbcaa1a4d0683561ee46ec4938ea311b1843a001fe5f1
languageName: node
linkType: hard
"codemirror-graphql@npm:^2.0.10":
version: 2.0.10
resolution: "codemirror-graphql@npm:2.0.10"
@@ -29260,24 +29215,7 @@ __metadata:
languageName: node
linkType: hard
"graphiql@npm:^1.8.8":
version: 1.11.5
resolution: "graphiql@npm:1.11.5"
dependencies:
"@graphiql/react": ^0.10.0
"@graphiql/toolkit": ^0.6.1
entities: ^2.0.0
graphql-language-service: ^5.0.6
markdown-it: ^12.2.0
peerDependencies:
graphql: ^15.5.0 || ^16.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 0bad3d056ba1185aae1020277bb08a5ee75c352f8c659ca092f0cb4f2126a1c176015e7f58ff8fd5f8de8709a8bc3ff9d1b765ca9d2fcc412d67e23d45c862f6
languageName: node
linkType: hard
"graphiql@npm:^3.0.6":
"graphiql@npm:3.0.6, graphiql@npm:^3.0.6":
version: 3.0.6
resolution: "graphiql@npm:3.0.6"
dependencies:
@@ -29336,7 +29274,7 @@ __metadata:
languageName: node
linkType: hard
"graphql-language-service@npm:5.2.0, graphql-language-service@npm:^5.0.6, graphql-language-service@npm:^5.2.0":
"graphql-language-service@npm:5.2.0, graphql-language-service@npm:^5.2.0":
version: 5.2.0
resolution: "graphql-language-service@npm:5.2.0"
dependencies: