Merge pull request #306 from graphcool/feat/settings-shortcut

Fix bunch of issues

Author: timsuchanek

packages/graphql-playground-electron/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": "Graphcool",
     "email": "[email protected]",
-    "url": "graph.cool"
+    "url": "http://graph.cool"
   },
   "main": "lib/main.js",
   "build": {

packages/graphql-playground-electron/src/ElectronApp.tsx

@@ -139,6 +139,12 @@ cd ${folderPath}; graphql playground`)
     createNewWindow()
   }
 
+  openSettingsTab = () => {
+    if (this.playground) {
+      this.playground.openSettingsTab()
+    }
+  }
+
   nextTab = () => {
     if (this.playground) {
       this.playground.nextTab()
@@ -172,7 +178,7 @@ cd ${folderPath}; graphql playground`)
     ipcRenderer.on('File', this.readFileMessage)
     ipcRenderer.on('OpenSelectedFile', this.readOpenSelectedFileMessage)
     ipcRenderer.on('OpenUrl', this.handleUrl)
-    window.addEventListener('keydown', this.handleKeyDown)
+    window.addEventListener('keydown', this.handleKeyDown, true)
     this.consumeEvents()
     ipcRenderer.send('ready', '')
   }
@@ -197,14 +203,13 @@ cd ${folderPath}; graphql playground`)
       this.readOpenSelectedFileMessage,
     )
     ipcRenderer.removeListener('OpenUrl', this.handleUrl)
-    window.removeEventListener('keydown', this.handleKeyDown)
+    window.removeEventListener('keydown', this.handleKeyDown, true)
   }
 
   handleKeyDown = e => {
     if (e.key === '{' && e.metaKey) {
       this.prevTab()
-    }
-    if (e.key === '}' && e.metaKey) {
+    } else if (e.key === '}' && e.metaKey) {
       this.nextTab()
     }
   }
@@ -416,6 +421,9 @@ cd ${folderPath}; graphql playground`)
       case 'Close':
         this.closeTab()
         break
+      case 'Settings':
+        this.openSettingsTab()
+        break
     }
   }
 

packages/graphql-playground-electron/src/main.ts

@@ -185,6 +185,12 @@ const template: any = [
       //   click: () => manuallyCheckForUpdates(),
       // },
       { type: 'separator' },
+      {
+        label: 'Settings',
+        accelerator: 'Command+,',
+        click: () => send('Tab', 'Settings'),
+      },
+      { type: 'separator' },
       {
         label: 'Quit',
         accelerator: 'Command+Q',

packages/graphql-playground/package.json

@@ -72,7 +72,6 @@
     "lint-staged": "^4.0.2",
     "node-noop": "^1.0.0",
     "object-assign": "4.1.0",
-    "polished": "^1.9.0",
     "postcss-cssnext": "^2.9.0",
     "postcss-flexbugs-fixes": "^3.2.0",
     "postcss-import": "^9.1.0",
@@ -120,6 +119,7 @@
     "graphql": "^0.10.5",
     "isomorphic-fetch": "^2.2.1",
     "js-yaml": "^3.10.0",
+    "polished": "^1.9.0",
     "json-stable-stringify": "^1.0.1",
     "keycode": "^2.1.9",
     "lodash": "^4.17.4",

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

@@ -65,11 +65,13 @@ export type Theme = 'dark' | 'light'
 export interface EditorSettings {
   ['editor.theme']: Theme
   ['editor.reuseHeaders']: boolean
+  ['tracing.hideTracingResponse']: boolean
 }
 
 const defaultSettings = `{
   "editor.theme": "dark",
-  "editor.reuseHeaders": true
+  "editor.reuseHeaders": true,
+  "tracing.hideTracingResponse": true
 }`
 
 class MiddlewareApp extends React.Component<Props, State> {
@@ -136,16 +138,21 @@ class MiddlewareApp extends React.Component<Props, State> {
   }
 
   migrateSettingsString(settingsString) {
+    const defaultSettingsObject = JSON.parse(defaultSettings)
     const replacementMap = {
       theme: 'editor.theme',
       reuseHeaders: 'editor.reuseHeaders',
     }
+
     try {
       const settings = JSON.parse(settingsString)
       return JSON.stringify(
-        mapKeys(settings, (value, key) => {
-          return replacementMap[key] || key
-        }),
+        {
+          ...defaultSettingsObject,
+          ...mapKeys(settings, (value, key) => {
+            return replacementMap[key] || key
+          }),
+        },
         null,
         2,
       )

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

@@ -373,6 +373,7 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
                     reshare: this.state.changed,
                     isSharingAuthorization: this.isSharingAuthorization(),
                   }}
+                  settings={this.props.settings}
                 />
               )}
             </GraphiqlWrapper>

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

@@ -75,6 +75,7 @@ export interface Props {
   disableAutofocus?: boolean
   disableResize?: boolean
   fixedEndpoint?: boolean
+  shouldHideTracingResponse: boolean
 
   disableAnimation?: boolean
   hideLineNumbers?: boolean
@@ -902,7 +903,9 @@ export class GraphQLEditor extends React.PureComponent<
             let extensions
             if (result.extensions) {
               extensions = result.extensions
-              delete result.extensions
+              if (this.props.shouldHideTracingResponse) {
+                delete result.extensions.tracing
+              }
             }
             let isSubscription = false
             if (result.isSubscription) {

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

@@ -3,6 +3,7 @@ import { Session } from '../../types'
 import GraphQLEditor from './GraphQLEditor'
 import { SchemaFetcher } from './SchemaFetcher'
 import { SharingProps } from '../Share'
+import { EditorSettings } from '../MiddlewareApp'
 
 export interface Props {
   session: Session
@@ -30,6 +31,7 @@ export interface Props {
   sharing?: SharingProps
   fixedEndpoint?: boolean
   endpoint: string
+  settings: EditorSettings
 }
 
 export default class GraphQLEditorSession extends React.PureComponent<
@@ -89,6 +91,7 @@ export default class GraphQLEditorSession extends React.PureComponent<
         onClickShare={this.handleClickShare}
         sharing={sharing}
         fixedEndpoint={fixedEndpoint}
+        shouldHideTracingResponse={this.shouldHideTracingResponse()}
       />
     )
   }
@@ -124,4 +127,8 @@ export default class GraphQLEditorSession extends React.PureComponent<
   private handleClickShare = () => {
     this.props.onClickShare(this.props.session.id)
   }
+
+  private shouldHideTracingResponse = (): boolean => {
+    return this.props.settings['tracing.hideTracingResponse']
+  }
 }

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

@@ -68,6 +68,9 @@ export default class Tab extends React.PureComponent<Props, State> {
           .tab:hover {
             @p: .bgDarkBlue;
           }
+          .tab:hover :global(.close) {
+            opacity: 1;
+          }
           .light.tab:hover {
             background-color: #eeeff0;
           }
@@ -120,12 +123,19 @@ export default class Tab extends React.PureComponent<Props, State> {
           }
 
           .close {
-            @p: .ml10, .o50, .relative;
+            @p: .ml10, .relative;
             top: 1px;
             height: 13px;
             width: 13px;
+            opacity: 0;
+
             &.active {
               @p: .o100;
+              opacity: 1;
+            }
+
+            &.hasCircle {
+              opacity: 1;
             }
           }
 
@@ -196,7 +206,11 @@ export default class Tab extends React.PureComponent<Props, State> {
             'New Tab'}
         </div>
         <div
-          className={`close ${index === selectedSessionIndex && 'active'}`}
+          className={`close${index === selectedSessionIndex ? ' active' : ''}${
+            session.isFile && session.hasChanged && !this.state.overCross
+              ? ' hasCircle'
+              : ''
+          }`}
           onClick={this.handleCloseSession}
           onMouseEnter={this.handleMouseOverCross}
           onMouseLeave={this.handleMouseOutCross}

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

@@ -13,7 +13,13 @@ export interface Props {
   readOnly?: boolean
 }
 
+// TODO: Trigger onSave on CMD+S or CTRL+S
+
 export default class SettingsEditor extends React.Component<Props, {}> {
+  componentDidMount() {
+    window.addEventListener('keydown', this.handleKeydown, true)
+  }
+
   render() {
     const { isConfig } = this.props
     return (
@@ -39,6 +45,13 @@ export default class SettingsEditor extends React.Component<Props, {}> {
       </Wrapper>
     )
   }
+
+  private handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 's' && e.metaKey) {
+      e.preventDefault()
+      this.props.onSave()
+    }
+  }
 }
 
 const backgroundColor = theme('mode', {