fix: upgrades, schema viewer display & width adjustment

Author: acao

packages/graphql-playground-electron/package.json

@@ -92,7 +92,7 @@
     "find-up": "^2.1.0",
     "graphcool-styles": "0.2.7",
     "graphcool-ui": "^0.0.14",
-    "graphql": "^15.0.0",
+    "graphql": "^0.13.2",
     "graphql-config": "^2.2.2",
     "graphql-config-extension-graphcool": "^1.0.11",
     "graphql-config-extension-prisma": "^0.3.0",

packages/graphql-playground-react/package.json

@@ -103,8 +103,8 @@
     "typescript": "3.8.3",
     "typescript-styled-plugin": "^0.11.0",
     "url-loader": "4.0.0",
-    "webpack": "4.42.1",
-    "webpack-dev-server": "3.10.3",
+    "webpack": "4.44.1",
+    "webpack-dev-server": "3.11.0",
     "webpack-manifest-plugin": "2.2.0",
     "why-did-you-update": "0.1.1"
   },
@@ -120,7 +120,7 @@
     "cryptiles": "4.1.2",
     "cuid": "^1.3.8",
     "graphiql": "^0.17.5",
-    "graphql": "^15.0.0",
+    "graphql": "^15.3.0",
     "immutable": "^4.0.0-rc.9",
     "isomorphic-fetch": "^2.2.1",
     "js-yaml": "^3.10.0",

packages/graphql-playground-react/src/components/GraphQLBinApp.tsx

@@ -53,7 +53,7 @@ class GraphQLBinApp extends React.Component<Props & ReduxProps, State> {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.match.params.id) {
       if (this.props.match.params.id === 'new') {
         return

packages/graphql-playground-react/src/components/Playground.tsx

@@ -196,7 +196,7 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     setSubscriptionEndpoint(props.subscriptionEndpoint)
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     // init redux
     this.props.initState(getWorkspaceId(this.props), this.props.endpoint)
     this.props.setConfigString(this.props.configString)
@@ -212,7 +212,7 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     this.mounted = true
   }
 
-  componentWillReceiveProps(nextProps: Props & ReduxProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props & ReduxProps) {
     if (this.props.createApolloLink !== nextProps.createApolloLink) {
       setLinkCreator(nextProps.createApolloLink)
     }

packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx

@@ -65,7 +65,7 @@ class GraphDocs extends React.Component<
     ;(window as any).d = this
   }
 
-  componentWillReceiveProps(nextProps: SideTabContentProps & StateFromProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: SideTabContentProps & StateFromProps) {
     // If user use default column size % columnWidth
     // Make the column follow the clicks
     if (

packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx

@@ -8,6 +8,7 @@ import {
   toggleDocs,
   changeKeyMove,
   setDocsVisible,
+  changeWidthDocs
 } from '../../../state/docs/actions'
 import { GraphQLSchema } from 'graphql'
 import { getSessionDocs } from '../../../state/docs/selectors'
@@ -252,6 +253,7 @@ const mapDispatchToProps = dispatch =>
       toggleDocs,
       changeKeyMove,
       setDocsVisible,
+      changeWidthDocs
     },
     dispatch,
   )
@@ -269,6 +271,7 @@ const ConnectedGraphDocs = connect<StateFromProps, DispatchFromProps, Props>(
   { forwardRef: true },
 )(SideTabs)
 
+// @ts-ignore
 ConnectedGraphDocs.Tab = SideTab
 
 export default ConnectedGraphDocs

packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx

@@ -270,8 +270,11 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
           </EditorBar>
         </EditorWrapper>
         <SideTabs
+          sessionId={this.props.sessionId}
+          schema={this.props.schema}
           setActiveContentRef={this.setSideTabActiveContentRef}
           setWidth={this.setDocsWidth}
+          maxWidth={10000}
         >
           <SideTab label="Docs" activeColor="green" tabWidth="49px">
             <GraphDocs
@@ -284,6 +287,7 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
               schema={this.props.schema}
               ref={this.setSchemaExplorerRef}
               sessionId={this.props.sessionId}
+              setWidth={this.setDocsWidth}
             />
           </SideTab>
         </SideTabs>

packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx

@@ -207,7 +207,7 @@ export class QueryEditor extends React.PureComponent<Props & ReduxProps, {}> {
     })
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.sessionId !== nextProps.sessionId) {
       this.closeCompletion()
       this.updateSessionScrollTop()

packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLEditor.tsx

@@ -98,15 +98,17 @@ class SDLEditor extends React.PureComponent<Props, { overflowY: boolean }> {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.sessionId !== nextProps.sessionId) {
       this.editor.scrollTo(0, 0)
     }
   }
 
   componentWillUnmount() {
-    this.editor.off('scroll')
-    this.editor = null
+    if(this.editor) {
+      this.editor.off('scroll')
+      this.editor = null
+    }
   }
 
   handleScroll = e => {

packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLHeader.tsx

@@ -22,7 +22,7 @@ export default class SDLHeader extends React.Component<SDLHeaderProps, State> {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     document.addEventListener('mousedown', this.handleClick, false)
   }
 

packages/graphql-playground-react/src/components/Playground/SchemaExplorer/SDLView.tsx

@@ -41,14 +41,14 @@ interface DispatchFromProps {
 }
 
 class SDLView extends React.Component<
-  SideTabContentProps & StateFromProps & DispatchFromProps
+  SideTabContentProps & StateFromProps
 > {
   ref
   constructor(props) {
     super(props)
     ;(window as any).d = this
   }
-  componentWillReceiveProps(nextProps: SideTabContentProps & StateFromProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: SideTabContentProps & StateFromProps) {
     // If user use default column size % columnWidth
     // Make the column follow the clicks
     if (!this.props.schema && nextProps.schema) {

packages/graphql-playground-react/src/components/Playground/TopBar/Polling.tsx

@@ -45,7 +45,7 @@ class SchemaPolling extends React.Component<Props, State> {
       )
     }
   }
-  componentWillReceiveProps(nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     this.updatePolling(nextProps)
   }
 

packages/graphql-playground-react/src/components/Playground/util/createSDL.ts

@@ -61,24 +61,6 @@ function getTypeInstance(type) {
   }
 }
 
-// Adds Line Breaks to Schema View
-function addLineBreaks(sdl: string, commentsDisabled: boolean = true) {
-  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+/gm, '$&\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(
@@ -89,21 +71,18 @@ export function getSDL(
     const rawSdl = printSchema(schema, { commentDescriptions: true })
     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, {
+      return prettify(rawSdl, {
         printWidth: 80,
         tabWidth: 2,
         useTabs: false,
       })
-      return addLineBreaks(sdlWithoutComments, commentsDisabled)
     }
-    const sdl = prettify(rawSdl, {
+    return prettify(rawSdl, {
       printWidth: 80,
       tabWidth: 2,
       useTabs: false,
     })
-    return addLineBreaks(sdl)
   }
   return ''
 }

packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx

@@ -199,7 +199,7 @@ class PlaygroundWrapper extends React.Component<
     return endpoint.replace(/^http/, 'ws')
   }
 
-  componentWillReceiveProps(nextProps: PlaygroundWrapperProps & ReduxProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: PlaygroundWrapperProps & ReduxProps) {
     // Reactive props (props that cause a state change upon being changed)
     if (
       nextProps.endpoint !== this.props.endpoint ||
@@ -256,7 +256,7 @@ class PlaygroundWrapper extends React.Component<
     return url
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const platformToken = getParameterByName('platform-token')
     if (platformToken && platformToken.length > 0) {
       localStorage.setItem('platform-token', platformToken)

packages/graphql-playground-react/src/components/SettingsEditor.tsx

@@ -79,7 +79,7 @@ class SettingsEditorHOC extends React.Component<
     super(props)
     this.state = { value: props.value }
   }
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
       this.setState({ value: nextProps.value })
     }