fix: display variable editor when headers are not enabled

Author: harshithpabbati

packages/graphiql/src/components/GraphiQL.tsx

@@ -1,5 +1,5 @@
 /**
- *  Copyright (c) 2019 GraphQL Contributors.
+ *  Copyright (c) 2020 GraphQL Contributors.
  *
  *  This source code is licensed under the MIT license found in the
  *  LICENSE file in the root directory of this source tree.
@@ -269,7 +269,9 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
         Number(this._storage.get('secondaryEditorHeight')) || 200,
       variableEditorActive:
         this._storage.get('variableEditorActive') === 'true' ||
-        this._storage.get('headerEditorActive') !== 'true',
+        props.headerEditorEnabled
+          ? this._storage.get('headerEditorActive') !== 'true'
+          : secondaryEditorOpen && true,
       headerEditorActive: this._storage.get('headerEditorActive') === 'true',
       headerEditorEnabled,
       historyPaneOpen: this._storage.get('historyPaneOpen') === 'true' || false,

packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx

@@ -141,9 +141,7 @@ describe('GraphiQL', () => {
     const { container: container1 } = render(
       <GraphiQL fetcher={noOpFetcher} />,
     );
-    const queryVariables = container1.querySelector(
-      '[aria-label="Query Variables"]',
-    );
+    const queryVariables = container1.querySelector('.variable-editor');
 
     expect(queryVariables.style.height).toEqual('');
 
@@ -168,9 +166,7 @@ describe('GraphiQL', () => {
         defaultVariableEditorOpen={false}
       />,
     );
-    const queryVariables3 = container3.querySelector(
-      '[aria-label="Query Variables"]',
-    );
+    const queryVariables3 = container3.querySelector('.variable-editor');
     expect(queryVariables3?.style.height).toEqual('');
   });