fix: render query history panel only when it's toggled (#1821)

Use application to hide query history panel instead of CSS. Improves perf, reduces regression surface area.

Co-authored-by: Rikki Schulte <[email protected]>

.changeset/metal-cougars-fry.md

@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+fix: render query history panel only when it's toggled, instead of hiding with CSS

.github/workflows/deploy-preview.yml

@@ -6,6 +6,8 @@ on:
       - '**.md'
       - 'examples'
       - '!examples/monaco-graphql-webpack'
+  pull_request:
+    types: [opened, synchronize]
 
 jobs:
   build:

.github/workflows/license-check.yml

@@ -3,6 +3,8 @@ on:
   push:
     paths:
       - 'yarn.lock'
+  pull_request:
+    types: [opened, synchronize]
 
 jobs:
   check:

.github/workflows/push-pr.yml

@@ -1,5 +1,7 @@
 name: CI
-on: [push]
+on: 
+  pull_request:
+    types: [opened, synchronize]
 
 jobs:
   lint:

packages/graphiql/src/components/GraphiQL.tsx

@@ -482,25 +482,27 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
           this.graphiqlContainer = n;
         }}
         className="graphiql-container">
-        <div className="historyPaneWrap" style={historyPaneStyle}>
-          <QueryHistory
-            ref={node => {
-              this._queryHistory = node;
-            }}
-            operationName={this.state.operationName}
-            query={this.state.query}
-            variables={this.state.variables}
-            onSelectQuery={this.handleSelectHistoryQuery}
-            storage={this._storage}
-            queryID={this._editorQueryID}>
-            <button
-              className="docExplorerHide"
-              onClick={this.handleToggleHistory}
-              aria-label="Close History">
-              {'\u2715'}
-            </button>
-          </QueryHistory>
-        </div>
+        {this.state.historyPaneOpen && (
+          <div className="historyPaneWrap" style={historyPaneStyle}>
+            <QueryHistory
+              ref={node => {
+                this._queryHistory = node;
+              }}
+              operationName={this.state.operationName}
+              query={this.state.query}
+              variables={this.state.variables}
+              onSelectQuery={this.handleSelectHistoryQuery}
+              storage={this._storage}
+              queryID={this._editorQueryID}>
+              <button
+                className="docExplorerHide"
+                onClick={this.handleToggleHistory}
+                aria-label="Close History">
+                {'\u2715'}
+              </button>
+            </QueryHistory>
+          </div>
+        )}
         <div className="editorWrap">
           <div className="topBarWrap">
             <div className="topBar">

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

@@ -170,6 +170,11 @@ describe('GraphiQL', () => {
     expect(queryVariables3?.style.height).toEqual('');
   });
 
+  it('defaults to closed history panel', () => {
+    const { container } = render(<GraphiQL fetcher={noOpFetcher} />);
+    expect(container.querySelector('.historyPaneWrap')).not.toBeInTheDocument();
+  });
+
   it('adds a history item when the execute query function button is clicked', () => {
     const { getByTitle, container } = render(
       <GraphiQL
@@ -180,6 +185,7 @@ describe('GraphiQL', () => {
         fetcher={noOpFetcher}
       />,
     );
+    fireEvent.click(getByTitle('Show History'));
     fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
     expect(container.querySelectorAll('.history-contents li')).toHaveLength(1);
   });
@@ -188,6 +194,7 @@ describe('GraphiQL', () => {
     const { getByTitle, container } = render(
       <GraphiQL query={mockBadQuery} fetcher={noOpFetcher} />,
     );
+    fireEvent.click(getByTitle('Show History'));
     fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
     expect(container.querySelectorAll('.history-contents li')).toHaveLength(0);
   });
@@ -202,6 +209,7 @@ describe('GraphiQL', () => {
         headers={mockHeaders1}
       />,
     );
+    fireEvent.click(getByTitle('Show History'));
     fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
     expect(container.querySelectorAll('.history-contents li')).toHaveLength(1);
   });
@@ -216,6 +224,7 @@ describe('GraphiQL', () => {
         headers={mockHeaders1}
       />,
     );
+    fireEvent.click(getByTitle('Show History'));
     fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
     expect(container.querySelectorAll('.history-contents li')).toHaveLength(1);
     fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
@@ -232,6 +241,7 @@ describe('GraphiQL', () => {
         headers={mockHeaders1}
       />,
     );
+    fireEvent.click(getByTitle('Show History'));
     const executeQueryButton = getByTitle('Execute Query (Ctrl-Enter)');
     fireEvent.click(executeQueryButton);
     expect(container.querySelectorAll('.history-contents li')).toHaveLength(1);
@@ -260,6 +270,7 @@ describe('GraphiQL', () => {
         headers={mockHeaders1}
       />,
     );
+    fireEvent.click(getByTitle('Show History'));
     const executeQueryButton = getByTitle('Execute Query (Ctrl-Enter)');
     fireEvent.click(executeQueryButton);
     expect(container.querySelectorAll('.history-label')).toHaveLength(1);
@@ -286,6 +297,7 @@ describe('GraphiQL', () => {
         headerEditorEnabled
       />,
     );
+    fireEvent.click(getByTitle('Show History'));
     const executeQueryButton = getByTitle('Execute Query (Ctrl-Enter)');
     fireEvent.click(executeQueryButton);
     expect(container.querySelectorAll('.history-label')).toHaveLength(1);