rename theme to editor.theme

Author: timsuchanek

packages/graphql-playground/src/components/MiddlewareApp.tsx

@@ -61,13 +61,13 @@ export interface State {
 
 export type Theme = 'dark' | 'light'
 export interface EditorSettings {
-  theme: Theme
-  reuseHeaders: boolean
+  ['editor.theme']: Theme
+  ['editor.reuseHeaders']: boolean
 }
 
 const defaultSettings = `{
-  "theme": "dark",
-  "reuseHeaders": true
+  "editor.theme": "dark",
+  "editor.reuseHeaders": true
 }`
 
 class MiddlewareApp extends React.Component<Props, State> {
@@ -223,7 +223,7 @@ class MiddlewareApp extends React.Component<Props, State> {
         <title>{this.getTitle()}</title>
       </Helmet>
     ) : null
-    const { theme } = this.state.settings
+    const theme = this.state.settings['editor.theme']
 
     return (
       <div>
@@ -237,7 +237,7 @@ class MiddlewareApp extends React.Component<Props, State> {
                     <ProjectsSideNav
                       config={this.state.config}
                       folderName={this.props.folderName || 'GraphQL App'}
-                      theme={this.state.settings.theme}
+                      theme={theme}
                       activeEnv={this.state.activeEnv}
                       onSelectEnv={this.handleSelectEnv}
                       onNewWorkspace={this.props.onNewWorkspace}
@@ -344,8 +344,9 @@ class MiddlewareApp extends React.Component<Props, State> {
   }
 
   normalizeSettings(settings: EditorSettings) {
-    if (settings.theme !== 'dark' && settings.theme !== 'light') {
-      settings.theme = 'dark'
+    const theme = settings['editor.theme']
+    if (theme !== 'dark' && theme !== 'light') {
+      settings['editor.theme'] = 'dark'
     }
 
     return settings

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

@@ -282,7 +282,8 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
   }
   render() {
     const { sessions, selectedSessionIndex } = this.state
-    const { isEndpoint, settings: { theme } } = this.props
+    const { isEndpoint } = this.props
+    const theme = this.props.settings['editor.theme']
     const selectedEndpointUrl = isEndpoint ? location.href : this.getEndpoint()
     const isGraphcoolUrl = this.isGraphcoolUrl(selectedEndpointUrl)
 
@@ -358,7 +359,7 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
                   schemaFetcher={this.schemaFetcher}
                   fixedEndpoint={this.props.fixedEndpoints}
                   sharing={{
-                    localTheme: this.props.settings.theme,
+                    localTheme: this.props.settings['editor.theme'],
                     onShare: this.share,
                     onToggleHistory: this.toggleShareHistory,
                     onToggleAllTabs: this.toggleShareAllTabs,
@@ -816,7 +817,7 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
     const currentActiveSession =
       this.state && this.state.sessions[this.state.selectedSessionIndex]
     const headers =
-      this.props.settings.reuseHeaders && currentActiveSession
+      this.props.settings['editor.reuseHeaders'] && currentActiveSession
         ? currentActiveSession.headers
         : ''
     if (session) {
@@ -1014,11 +1015,13 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
       jsonVariables =
         headers && headers.trim() !== '' ? JSON.parse(headers) : undefined
     } catch (error) {
-      throw new Error(`Headers are invalid JSON: ${error.message}.`)
+      /* tslint:disable-next-line */
+      console.error(`Headers are invalid JSON: ${error.message}.`)
     }
 
     if (typeof jsonVariables !== 'object') {
-      throw new Error('Headers are not a JSON object.')
+      /* tslint:disable-next-line */
+      console.error('Headers are not a JSON object.')
     }
 
     return jsonVariables