{
+ state = { showDeprecated: false }
+
+ render() {
+ const { type, schema } = this.props
+ return (
+
+ {`${type.name} details`}
+ {type.description &&
+ type.description.length > 0 && (
+
+ )}
+ {type.instanceOf === 'scalar' && }
+ {type.instanceOf === 'enum' && (
+
+ )}
+ {type.instanceOf === 'union' && (
+
+ )}
+ {type.fields.length > 0 && (
+
+ )}
+
+ )
+ }
+}
+
+const DocsDescription = styled(MarkdownContent)`
+ font-size: 14px;
+ padding: 0 16px 20px 16px;
+ color: rgba(0, 0, 0, 0.5);
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLTypes/SDLStyles.tsx b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLTypes/SDLStyles.tsx
new file mode 100644
index 000000000..ea87d1389
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLTypes/SDLStyles.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { styled } from '../../../../styled'
+import { columnWidth } from '../../../../constants'
+
+export const SchemaExplorerContainer = styled.div`
+ position: relative;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: stretch;
+ padding: 0px 8px 8px 8px;
+ background: ${p =>
+ p.theme.mode === 'dark' ? p.theme.editorColours.editorBackground : 'white'};
+ font-family: ${p => p.theme.settings['editor.fontFamily']};
+ font-size: ${p => `${p.theme.settings['editor.fontSize']}px`};
+ outline: none !important;
+`
+
+export interface SDLColumnProps {
+ children: any
+ width?: number
+}
+
+const SDLColumn = ({ children, width = columnWidth }: SDLColumnProps) => {
+ return {children}
+}
+
+export { SDLColumn }
+
+const Column = styled('div')`
+ display: flex;
+ flex: 1 0 auto;
+ flex-flow: column;
+ padding-bottom: 20px;
+ border-right: 1px solid ${p => p.theme.colours.black10};
+ overflow: hidden;
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLTypes/SDLType.tsx b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLTypes/SDLType.tsx
new file mode 100644
index 000000000..b240375fc
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLTypes/SDLType.tsx
@@ -0,0 +1,130 @@
+import * as React from 'react'
+import { GraphQLList, GraphQLNonNull, isType } from 'graphql'
+import ArgumentInline from '../../DocExplorer/ArgumentInline'
+import { styled } from '../../../../styled'
+
+export interface Props {
+ type: any
+ className?: string
+ beforeNode?: JSX.Element | null | false
+ afterNode?: JSX.Element | null | false
+ showParentName?: boolean
+ collapsable?: boolean
+}
+
+export default class SDLType extends React.Component {
+ render() {
+ const {
+ type,
+ className,
+ beforeNode,
+ afterNode,
+ showParentName,
+ } = this.props
+ const isGraphqlType = isType(type)
+
+ const fieldName =
+ showParentName && type.parent ? (
+
+ {type.parent.name}.{type.name}
+
+ ) : (
+ type.name
+ )
+
+ return (
+
+ {beforeNode}
+ {beforeNode && ' '}
+ {!isGraphqlType && (
+
+ {fieldName}
+ {type.args &&
+ type.args.length > 0 && [
+ '(',
+
+ {type.args.map(arg => (
+
+ ))}
+ ,
+ ')',
+ ]}
+ {': '}
+
+ )}
+ {renderType(type.type || type)}
+ {type.defaultValue !== undefined ? (
+
+ {' '}
+ = {`${type.defaultValue}`}
+
+ ) : (
+ undefined
+ )}
+ {afterNode && ' '}
+ {afterNode}
+
+ )
+ }
+}
+
+function renderType(type) {
+ if (type instanceof GraphQLNonNull) {
+ return (
+
+ {renderType(type.ofType)}
+ {'!'}
+
+ )
+ }
+ if (type instanceof GraphQLList) {
+ return (
+
+ {'['}
+ {renderType(type.ofType)}
+ {']'}
+
+ )
+ }
+ return {type.name}
+}
+
+interface DocsCategoryItemProps {
+ clickable?: boolean
+ active?: boolean
+}
+
+const DocsCategoryItem = styled('div')`
+ position: relative;
+ padding: 6px 16px;
+ overflow: auto;
+ font-size: 14px;
+ transition: 0.1s background-color;
+ background: ${p =>
+ p.active ? p.theme.colours.black07 : p.theme.colours.white};
+
+ cursor: ${p => (p.clickable ? 'pointer' : 'select')};
+
+ // &:hover {
+ // color: ${p => p.theme.colours.white};
+ // background: #2a7ed3;
+ // .field-name,
+ // .type-name,
+ // .arg-name,
+ // span {
+ // color: ${p => p.theme.colours.white} !important;
+ // }
+ // }
+ b {
+ font-weight: 600;
+ }
+`
+
+const DefaultValue = styled.span`
+ color: ${p => p.theme.colours.black30};
+ span {
+ color: #1f61a9;
+ }
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLTypes/SDLUnionType.tsx b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLTypes/SDLUnionType.tsx
new file mode 100644
index 000000000..582220870
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLTypes/SDLUnionType.tsx
@@ -0,0 +1,22 @@
+import SDLType from './SDLType'
+import * as React from 'react'
+import { DocType } from '../../DocExplorer/DocsTypes/DocType'
+
+export interface EnumTypeSchemaProps {
+ schema: any
+ type: any
+}
+
+const UnionTypeSchema = ({ schema, type }: EnumTypeSchemaProps) => {
+ const types = schema.getPossibleTypes(type)
+ return (
+
+ union{' '}
+ {type.name}
+ {' = '}
+ {types.map(value => )}
+
+ )
+}
+
+export default UnionTypeSchema
diff --git a/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLView.tsx b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLView.tsx
new file mode 100644
index 000000000..7050a23f6
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLView.tsx
@@ -0,0 +1,123 @@
+import * as React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import {
+ toggleDocs,
+ changeWidthDocs,
+ setDocsVisible,
+} from '../../../state/docs/actions'
+import Spinner from '../../Spinner'
+import { columnWidth } from '../../../constants'
+import { SideTabContentProps } from '../ExplorerTabs/SideTabs'
+import { getSelectedSessionIdFromRoot } from '../../../state/sessions/selectors'
+import { getSessionDocs } from '../../../state/docs/selectors'
+import { createStructuredSelector } from 'reselect'
+import { ErrorContainer } from '../DocExplorer/ErrorContainer'
+import { SchemaExplorerContainer, SDLColumn } from './SDLTypes/SDLStyles'
+import SDLHeader from './SDLHeader'
+import SDLEditor from './SDLEditor'
+import { getSettings } from '../../../state/workspace/reducers'
+
+interface StateFromProps {
+ docs: {
+ navStack: any[]
+ docsOpen: boolean
+ docsWidth: number
+ keyMove: boolean
+ }
+ settings
+}
+
+interface DispatchFromProps {
+ toggleDocs: (sessionId: string) => any
+ setDocsVisible: (sessionId: string, open: boolean) => any
+ changeWidthDocs: (sessionId: string, width: number) => any
+}
+
+class SDLView extends React.Component<
+ SideTabContentProps & StateFromProps & DispatchFromProps
+> {
+ ref
+ constructor(props) {
+ super(props)
+ ;(window as any).d = this
+ }
+ componentWillReceiveProps(nextProps: SideTabContentProps & StateFromProps) {
+ // If user use default column size % columnWidth
+ // Make the column follow the clicks
+ if (!this.props.schema && nextProps.schema) {
+ this.setWidth(nextProps)
+ }
+ }
+
+ setWidth(props: any = this.props) {
+ this.props.setWidth(props)
+ }
+
+ getWidth(props: any = this.props) {
+ const rootWidth = props.docs.docsWidth || columnWidth
+ return rootWidth
+ }
+ componentDidMount() {
+ this.setWidth()
+ }
+
+ render() {
+ const { schema, settings } = this.props
+ let emptySchema
+ if (schema === undefined) {
+ // Schema is undefined when it is being loaded via introspection.
+ emptySchema =
+ } else if (schema === null) {
+ // Schema is null when it explicitly does not exist, typically due to
+ // an error during introspection.
+ emptySchema = {'No Schema Available'}
+ }
+ // let types
+ // if (schema instanceof GraphQLSchema) {
+ // types = sdlArray(schema)
+ // }
+ return (
+
+ {emptySchema ? (
+ {emptySchema}
+ ) : (
+
+
+
+
+ )}
+
+ )
+ }
+ setRef = ref => {
+ this.ref = ref
+ }
+}
+
+const mapDispatchToProps = dispatch =>
+ bindActionCreators(
+ {
+ toggleDocs,
+ changeWidthDocs,
+ setDocsVisible,
+ },
+ dispatch,
+ )
+
+const mapStateToProps = createStructuredSelector({
+ settings: getSettings,
+ docs: getSessionDocs,
+ sessionId: getSelectedSessionIdFromRoot,
+})
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps,
+ null,
+ { withRef: true },
+)(SDLView)
diff --git a/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts b/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts
index 54d998c23..938fcd6d0 100644
--- a/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts
+++ b/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts
@@ -71,7 +71,11 @@ export class SchemaFetcher {
return new Promise((resolve, reject) => {
execute(link, operation).subscribe({
next: schemaData => {
- if (schemaData && ((schemaData.errors && schemaData.errors.length > 0) || !schemaData.data)) {
+ if (
+ schemaData &&
+ ((schemaData.errors && schemaData.errors.length > 0) ||
+ !schemaData.data)
+ ) {
throw new Error(JSON.stringify(schemaData, null, 2))
}
diff --git a/packages/graphql-playground-react/src/components/Playground/util/createSDL.ts b/packages/graphql-playground-react/src/components/Playground/util/createSDL.ts
new file mode 100644
index 000000000..d00071fd3
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Playground/util/createSDL.ts
@@ -0,0 +1,135 @@
+import {
+ GraphQLEnumType,
+ GraphQLUnionType,
+ GraphQLInterfaceType,
+ GraphQLInputObjectType,
+ GraphQLSchema,
+ printSchema,
+} from 'graphql'
+import { serialize } from './stack'
+import { prettify } from '../../../utils'
+// import { getRootMap } from './stack'
+
+interface Options {
+ commentDescriptions?: boolean
+}
+
+const defaultTypes = [
+ '__Schema',
+ '__Directive',
+ '__DirectiveLocation',
+ '__Type',
+ '__Field',
+ '__InputValue',
+ '__EnumValue',
+ '__TypeKind',
+ 'String',
+ 'ID',
+ 'Boolean',
+ 'Int',
+ 'Float',
+]
+
+/* Creates an array of SchemaTypes for the SDLFieldDocs
+(A component that is similar to the DocsExplorer) to consume */
+export function sdlArray(schema: GraphQLSchema, options?: Options) {
+ const objectValues =
+ Object.values || (obj => Object.keys(obj).map(key => obj[key]))
+ const typeMap = schema.getTypeMap()
+ const types = objectValues(typeMap)
+ .sort((type1, type2) => type1.name.localeCompare(type2.name))
+ .filter(type => !defaultTypes.includes(type.name))
+ .map(type => ({
+ ...type,
+ ...serialize(schema, type),
+ instanceOf: getTypeInstance(type),
+ }))
+ return types
+}
+
+function getTypeInstance(type) {
+ if (type instanceof GraphQLInterfaceType) {
+ return 'interface'
+ } else if (type instanceof GraphQLUnionType) {
+ return 'union'
+ } else if (type instanceof GraphQLEnumType) {
+ return 'enum'
+ } else if (type instanceof GraphQLInputObjectType) {
+ return 'input'
+ } else {
+ return 'type'
+ }
+}
+
+// Adds Line Breaks to Schema View
+function addLineBreaks(sdl: string, commentsDisabled?: boolean) {
+ const noNewLines = sdl.replace(/^\s*$(?:\r\n?|\n)/gm, '')
+ // Line Break all Brackets
+ const breakBrackets = noNewLines.replace(/[}]/gm, '$&\r\n')
+ // Line Break all Scalars
+ const withLineBreaks = breakBrackets.replace(/(?:scalar )\w+/g, '$&\r\n')
+
+ if (commentsDisabled) {
+ return withLineBreaks
+ }
+ // Special Line Breaking for Comments
+ const withCommentLineBreaks = withLineBreaks.replace(
+ /(?:\#[\w\'\s\r\n\*](.*)$)/gm,
+ '$&\r',
+ )
+ return withCommentLineBreaks
+}
+
+// Returns a prettified schema
+export function getSDL(
+ schema: GraphQLSchema | null | undefined,
+ commentsDisabled: boolean,
+) {
+ if (schema instanceof GraphQLSchema) {
+ const rawSdl = printSchema(schema, { commentDescriptions: false })
+ if (commentsDisabled) {
+ // Removes Comments but still has new lines
+ const sdlWithNewLines = rawSdl.replace(/(\#[\w\'\s\r\n\*](.*)$)/gm, '')
+ // Removes newlines left behind by Comments
+ const sdlWithoutComments = prettify(sdlWithNewLines, 80)
+ return addLineBreaks(sdlWithoutComments, commentsDisabled)
+ }
+ const sdl = prettify(rawSdl, 80)
+ return addLineBreaks(sdl)
+ }
+ return ''
+}
+
+// Downloads the schema in either .json or .graphql format
+export function downloadSchema(schema: GraphQLSchema, type: string) {
+ if (type === 'sdl') {
+ const data = getSDL(schema, false)
+ const filename = 'schema.graphql'
+ return download(data, filename)
+ } else {
+ const data = JSON.stringify(schema)
+ const filename = 'instrospectionSchema.json'
+ return download(data, filename)
+ }
+}
+
+// Performant option for downloading files
+function download(data: any, filename: string, mime?: string) {
+ const blob = new Blob([data], { type: mime || 'application/octet-stream' })
+ if (typeof window.navigator.msSaveBlob !== 'undefined') {
+ window.navigator.msSaveBlob(blob, filename)
+ } else {
+ const blobURL = window.URL.createObjectURL(blob)
+ const tempLink = document.createElement('a')
+ tempLink.style.display = 'none'
+ tempLink.href = blobURL
+ tempLink.setAttribute('download', filename)
+ if (typeof tempLink.download === 'undefined') {
+ tempLink.setAttribute('target', '_blank')
+ }
+ document.body.appendChild(tempLink)
+ tempLink.click()
+ document.body.removeChild(tempLink)
+ window.URL.revokeObjectURL(blobURL)
+ }
+}
diff --git a/packages/graphql-playground-react/src/components/asyncComponent.tsx b/packages/graphql-playground-react/src/components/asyncComponent.tsx
new file mode 100644
index 000000000..f07cdd43e
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/asyncComponent.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+import Spinner from './Spinner'
+
+export interface State {
+ component?: any
+}
+
+const asyncComponent = importComponent => {
+ return class extends React.Component {
+ state: State = {
+ component: null,
+ }
+ componentDidMount() {
+ importComponent().then(cmp => {
+ this.setState({ component: cmp.default })
+ })
+ }
+
+ render() {
+ const C = this.state.component as any
+ return C ? :
+ }
+ }
+}
+
+export default asyncComponent
diff --git a/packages/graphql-playground-react/src/localDevIndex.tsx b/packages/graphql-playground-react/src/localDevIndex.tsx
index e8af959b9..6b4838197 100644
--- a/packages/graphql-playground-react/src/localDevIndex.tsx
+++ b/packages/graphql-playground-react/src/localDevIndex.tsx
@@ -3,9 +3,9 @@ import * as ReactDOM from 'react-dom'
import MiddlewareApp from './components/MiddlewareApp'
import './index.css'
// import { Tab } from './state/sessions/reducers'
-// import { LinkCreatorProps } from './state/sessions/fetchingSagas'
-// import { ApolloLink } from 'apollo-link'
-// import { HttpLink } from 'apollo-link-http'
+import { LinkCreatorProps } from './state/sessions/fetchingSagas'
+import { ApolloLink } from 'apollo-link'
+import { HttpLink } from 'apollo-link-http'
// import { exampleSchema } from './fixtures/exampleSchema'
if (process.env.NODE_ENV !== 'production') {
@@ -22,11 +22,11 @@ if (process.env.NODE_ENV !== 'production') {
setTitle={true}
showNewWorkspace={false}
{...options}
- config={config}
- configString={configString}
+ // config={config}
+ // configString={configString}
// codeTheme={lightEditorColours}
// tabs={tabs}
- // createApolloLink={customLinkCreator}
+ createApolloLink={customLinkCreator}
// schema={exampleSchema}
/>,
element,
@@ -34,50 +34,50 @@ if (process.env.NODE_ENV !== 'production') {
},
}
-const configString = `projects:
-app:
- schemaPath: "src/schema.graphql"
- extensions:
- endpoints:
- default: "http://localhost:4000"
-database:
- schemaPath: "src/generated/prisma.graphql"
- extensions:
- prisma: database/prisma.yml`
+// const configString = `projects:
+// app:
+// schemaPath: "src/schema.graphql"
+// extensions:
+// endpoints:
+// default: "http://localhost:4000"
+// database:
+// schemaPath: "src/generated/prisma.graphql"
+// extensions:
+// prisma: database/prisma.yml`
-const config = {
- projects: {
- prisma: {
- schemaPath: 'src/generated/prisma.graphql',
- includes: ['database/seed.graphql'],
- extensions: {
- prisma: 'database/prisma.yml',
- 'prepare-binding': {
- output: 'src/generated/prisma.ts',
- generator: 'prisma-ts',
- },
- endpoints: {
- dev2: {
- url: 'https://eu1.prisma.sh/public-asdf/session65/dev',
- // headers: {
- // Authorization:
- // 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InNlcnZpY2UiOiJhc2RmQGRldiIsInJvbGVzIjpbImFkbWluIl19LCJpYXQiOjE1MjM1MTg3NTYsImV4cCI6MTUyNDEyMzU1Nn0.fzKhXa1JpN9M1UGTbS6p2KMUWDrKLxYD3i3a9eVfOQQ',
- // },
- },
- },
- },
- },
- app: {
- schemaPath: 'src/schema.graphql',
- includes: ['queries/{booking,queries}.graphql'],
- extensions: {
- endpoints: {
- default: 'http://localhost:4000',
- },
- },
- },
- },
-}
+// const config = {
+// projects: {
+// prisma: {
+// schemaPath: 'src/generated/prisma.graphql',
+// includes: ['database/seed.graphql'],
+// extensions: {
+// prisma: 'database/prisma.yml',
+// 'prepare-binding': {
+// output: 'src/generated/prisma.ts',
+// generator: 'prisma-ts',
+// },
+// endpoints: {
+// dev2: {
+// url: 'https://eu1.prisma.sh/public-asdf/session65/dev',
+// // headers: {
+// // Authorization:
+// // 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InNlcnZpY2UiOiJhc2RmQGRldiIsInJvbGVzIjpbImFkbWluIl19LCJpYXQiOjE1MjM1MTg3NTYsImV4cCI6MTUyNDEyMzU1Nn0.fzKhXa1JpN9M1UGTbS6p2KMUWDrKLxYD3i3a9eVfOQQ',
+// // },
+// },
+// },
+// },
+// },
+// app: {
+// schemaPath: 'src/schema.graphql',
+// includes: ['queries/{booking,queries}.graphql'],
+// extensions: {
+// endpoints: {
+// default: 'http://localhost:4000',
+// },
+// },
+// },
+// },
+// }
// const tabs: Tab[] = [
// {
@@ -91,21 +91,21 @@ const config = {
// },
// ]
-// const customLinkCreator = (
-// session: LinkCreatorProps,
-// wsEndpoint?: string,
-// ): { link: ApolloLink } => {
-// const { headers, credentials } = session
+const customLinkCreator = (
+ session: LinkCreatorProps,
+ wsEndpoint?: string,
+): { link: ApolloLink } => {
+ const { headers, credentials } = session
-// const link = new HttpLink({
-// uri: session.endpoint,
-// fetch,
-// headers,
-// credentials,
-// })
+ const link = new HttpLink({
+ uri: session.endpoint,
+ fetch,
+ headers,
+ credentials,
+ })
-// return { link }
-// }
+ return { link }
+}
// const lightEditorColours = {
// property: '#328c8c',
diff --git a/packages/graphql-playground-react/src/state/docs/actions.ts b/packages/graphql-playground-react/src/state/docs/actions.ts
index 650ec8ba1..074324dfc 100644
--- a/packages/graphql-playground-react/src/state/docs/actions.ts
+++ b/packages/graphql-playground-react/src/state/docs/actions.ts
@@ -4,15 +4,19 @@ export const {
setStacks,
addStack,
toggleDocs,
+ setDocsVisible,
changeWidthDocs,
changeKeyMove,
showDocForReference,
- setDocsVisible,
} = createActions({
SET_STACKS: (sessionId, stacks) => ({ sessionId, stacks }),
ADD_STACK: (sessionId, field, x, y) => ({ sessionId, field, x, y }),
- TOGGLE_DOCS: sessionId => ({ sessionId }),
- SET_DOCS_VISIBLE: (sessionId, open) => ({ sessionId, open }),
+ TOGGLE_DOCS: (sessionId, activeTabIdx) => ({ sessionId, activeTabIdx }),
+ SET_DOCS_VISIBLE: (sessionId, open, activeTabIdx?) => ({
+ sessionId,
+ open,
+ activeTabIdx,
+ }),
CHANGE_WIDTH_DOCS: (sessionId, width) => ({ sessionId, width }),
CHANGE_KEY_MOVE: (sessionId, move) => ({ sessionId, move }),
SHOW_DOC_FOR_REFERENCE: reference => ({ reference }),
diff --git a/packages/graphql-playground-react/src/state/docs/reducers.ts b/packages/graphql-playground-react/src/state/docs/reducers.ts
index 3c5c57325..87de43f36 100644
--- a/packages/graphql-playground-react/src/state/docs/reducers.ts
+++ b/packages/graphql-playground-react/src/state/docs/reducers.ts
@@ -16,12 +16,14 @@ export interface DocsSessionState {
readonly docsOpen: boolean
readonly docsWidth: number
readonly keyMove: boolean
+ readonly activeTabIdx: number | null
}
export class DocsSession extends Record({
navStack: List([]),
docsOpen: false,
docsWidth: columnWidth,
+ activeTabIdx: null,
keyMove: false,
}) {
toJSON() {
@@ -60,14 +62,28 @@ export default handleActions(
})
return state.set(sessionId, session)
},
- TOGGLE_DOCS: (state, { payload: { sessionId } }) => {
+ TOGGLE_DOCS: (state, { payload: { sessionId, activeTabIdx } }) => {
let session = getSession(state, sessionId)
session = session.set('docsOpen', !session.docsOpen)
+ if (typeof activeTabIdx === 'number') {
+ session = session.set(
+ 'activeTabIdx',
+ session.docsOpen ? activeTabIdx : null,
+ )
+ }
return state.set(sessionId, session)
},
- SET_DOCS_VISIBLE: (state, { payload: { sessionId, open } }) => {
+ SET_DOCS_VISIBLE: (
+ state,
+ { payload: { sessionId, open, activeTabIdx } },
+ ) => {
let session = getSession(state, sessionId)
session = session.set('docsOpen', !!open)
+ if (!session.docsOpen) {
+ session = session.set('activeTabIdx', null)
+ } else if (typeof activeTabIdx === 'number') {
+ session = session.set('activeTabIdx', activeTabIdx)
+ }
return state.set(sessionId, session)
},
CHANGE_WIDTH_DOCS: (state, { payload: { sessionId, width } }) => {
diff --git a/packages/graphql-playground-react/src/state/workspace/reducers.ts b/packages/graphql-playground-react/src/state/workspace/reducers.ts
index 1e9700194..58b9e0079 100644
--- a/packages/graphql-playground-react/src/state/workspace/reducers.ts
+++ b/packages/graphql-playground-react/src/state/workspace/reducers.ts
@@ -50,6 +50,7 @@ export const defaultSettings: ISettings = {
'prettier.printWidth': 80,
'request.credentials': 'omit',
'tracing.hideTracingResponse': true,
+ 'schema.disableComments': true,
}
// tslint:disable-next-line:max-classes-per-file
diff --git a/packages/graphql-playground-react/src/styled/theme.ts b/packages/graphql-playground-react/src/styled/theme.ts
index 8bd101dff..aba1b68b2 100644
--- a/packages/graphql-playground-react/src/styled/theme.ts
+++ b/packages/graphql-playground-react/src/styled/theme.ts
@@ -162,7 +162,6 @@ export const lightColours: Colours = {
orange: 'rgba(241, 143, 1, 1)',
blue: 'rgba(42, 126, 210, 1)',
purple: 'rgb(164, 3, 111)',
-
paleText: 'rgba(0, 0, 0, 0.5)',
paleGrey: '#f3f4f4', // use for bgs, borders, etc
lightGrey: '#eeeff0',
@@ -190,7 +189,6 @@ export const darkEditorColours: EditorColours = {
ws: 'rgba(255, 255, 255, 0.4)',
selection: 'rgba(255, 255, 255, 0.1)',
cursorColor: 'rgba(255, 255, 255, 0.4)',
-
text: '#fff',
textInactive: 'rgba(255, 255, 255, 0.6)',
background: '#09141c',
@@ -245,7 +243,6 @@ export const lightEditorColours: EditorColours = {
ws: 'rgba(23, 42, 58, 0.8)', //
selection: '#d1e9fd',
cursorColor: 'rgba(0, 0, 0, 0.4)',
-
text: 'rgba(0, 0, 0, 0.7)',
textInactive: 'rgba(0, 0, 0, 0.3)',
background: '#dbdee0',
diff --git a/packages/graphql-playground-react/src/types.ts b/packages/graphql-playground-react/src/types.ts
index 20b83d923..2ae56f7ba 100644
--- a/packages/graphql-playground-react/src/types.ts
+++ b/packages/graphql-playground-react/src/types.ts
@@ -26,4 +26,5 @@ export interface ISettings {
['prettier.printWidth']: number
['tracing.hideTracingResponse']: boolean
['request.credentials']: 'omit' | 'include' | 'same-origin'
+ ['schema.disableComments']: boolean
}