fix sidenav, fix headers

Author: timsuchanek

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

@@ -55,6 +55,7 @@ export interface State {
   config?: GraphQLConfig
   configIsYaml?: boolean
   configString?: string
+  activeProjectName?: string
   activeEnv?: string
 }
 
@@ -114,6 +115,7 @@ class MiddlewareApp extends React.Component<Props, State> {
       configIsYaml,
       configString: props.configString,
       activeEnv,
+      activeProjectName: projectName,
     }
   }
 
@@ -243,6 +245,7 @@ class MiddlewareApp extends React.Component<Props, State> {
                       isElectron={Boolean(this.props.isElectron)}
                       onEditConfig={this.handleStartEditConfig}
                       getSessionCount={this.getSessionCount}
+                      activeProjectName={this.state.activeProjectName}
                     />
                   )}
                 <Playground
@@ -321,7 +324,12 @@ class MiddlewareApp extends React.Component<Props, State> {
       env,
       projectName,
     )!
-    this.setState({ activeEnv: env, endpoint, subscriptionEndpoint })
+    this.setState({
+      activeEnv: env,
+      endpoint,
+      subscriptionEndpoint,
+      activeProjectName: projectName,
+    })
   }
 
   getSettings(settingsString = this.state.settingsString): EditorSettings {

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

@@ -695,7 +695,7 @@ export class GraphQLEditor extends React.PureComponent<
   private reloadSchema = async () => {
     const result = await this.props.schemaFetcher.refetch(
       this.props.session.endpoint,
-      this.props.session.headers,
+      this.convertHeaders(this.props.session.headers),
     )
     if (result) {
       const { schema } = result
@@ -714,14 +714,30 @@ export class GraphQLEditor extends React.PureComponent<
     this.props.setStacks(this.props.session.id, stacks)
   }
 
+  private convertHeaders(headers) {
+    if (headers) {
+      try {
+        return JSON.parse(headers)
+      } catch (e) {
+        /* tslint:disable-next-line */
+        console.error(e)
+      }
+    }
+
+    return undefined
+  }
+
   private ensureOfSchema() {
     // Only perform introspection if a schema is not provided (undefined)
     if (this.state.schema !== undefined) {
       return
     }
 
     this.props.schemaFetcher
-      .fetch(this.props.session.endpoint, this.props.session.headers)
+      .fetch(
+        this.props.session.endpoint,
+        this.convertHeaders(this.props.session.headers),
+      )
       .then(result => {
         if (result) {
           const { schema, tracingSupported } = result

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

@@ -18,6 +18,7 @@ export interface Props {
   isElectron: boolean
   onEditConfig: () => void
   getSessionCount: (endpoint: string) => number
+  activeProjectName?: string
 }
 
 export default class ProjectsSideNav extends React.Component<Props, {}> {
@@ -93,6 +94,7 @@ export default class ProjectsSideNav extends React.Component<Props, {}> {
           count={count}
           deep={Boolean(projectName)}
           projectName={projectName}
+          activeProjectName={this.props.activeProjectName}
         />
       )
     })

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

@@ -9,12 +9,20 @@ export interface Props {
   count: number
   deep: boolean
   projectName?: string
+  activeProjectName?: string
 }
 
 export default class ProjectsSideNavItem extends React.Component<Props, {}> {
   render() {
-    const { env, activeEnv, count, deep } = this.props
-    const active = activeEnv === env
+    const {
+      env,
+      activeEnv,
+      count,
+      deep,
+      activeProjectName,
+      projectName,
+    } = this.props
+    const active = activeEnv === env && activeProjectName === projectName
     return (
       <ListItem className={cx({ active, deep })} onClick={this.selectEndpoint}>
         <span>{env}</span>

packages/graphql-playground/src/middlewareIndex.tsx

@@ -57,7 +57,7 @@ projects:
         default:
           url: 'https://airbnb.now.sh'
           subscription: 'wss://airbnb.now.sh'
-        local:
+        dev:
           url: 'http://localhost:4000'
           subscription: 'ws://localhost:4000'
   database: