diff --git a/.changeset/beige-stingrays-tap.md b/.changeset/beige-stingrays-tap.md new file mode 100644 index 0000000000..ae7f2f709e --- /dev/null +++ b/.changeset/beige-stingrays-tap.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-api-docs': minor +--- + +Replace GraphiQL playground with DocExplorer diff --git a/plugins/api-docs/package.json b/plugins/api-docs/package.json index 182380b6f6..dd9f42c03a 100644 --- a/plugins/api-docs/package.json +++ b/plugins/api-docs/package.json @@ -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", diff --git a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx index d3fddf70cf..6ad8643111 100644 --- a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx +++ b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx @@ -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(() => ({ minHeight: '600px', flex: '1 1 auto', }, + '.graphiql-sidebar': { + width: '100%', + }, }, }, })); @@ -51,12 +59,22 @@ export const GraphQlDefinition = ({ definition }: Props) => { return (
- Promise.resolve(null) as any} - schema={schema} - docExplorerOpen - defaultSecondaryEditorOpen={false} - /> + + Promise.resolve(null) as any} + > +
+
+
+ + + +
+
+
+ +
); diff --git a/yarn.lock b/yarn.lock index 2a463ed8bb..55db2f8992 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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: