From 9f8c78ce8c72a9dcf35b3e82bd3129ac17d845e6 Mon Sep 17 00:00:00 2001
From: Harshith Pabbati <pabbatiharshith@gmail.com>
Date: Sun, 4 Apr 2021 19:06:32 +0530
Subject: [PATCH] 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 <rikki.schulte@gmail.com>
---
 .changeset/metal-cougars-fry.md               |  5 +++
 .github/workflows/deploy-preview.yml          |  2 +
 .github/workflows/license-check.yml           |  2 +
 .github/workflows/push-pr.yml                 |  4 +-
 packages/graphiql/src/components/GraphiQL.tsx | 40 ++++++++++---------
 .../components/__tests__/GraphiQL.spec.tsx    | 12 ++++++
 6 files changed, 45 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/metal-cougars-fry.md

diff --git a/.changeset/metal-cougars-fry.md b/.changeset/metal-cougars-fry.md
new file mode 100644
index 00000000000..b6e18471d1d
--- /dev/null
+++ b/.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
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
index 60f29dc0d27..8cf4b062992 100644
--- a/.github/workflows/deploy-preview.yml
+++ b/.github/workflows/deploy-preview.yml
@@ -6,6 +6,8 @@ on:
       - '**.md'
       - 'examples'
       - '!examples/monaco-graphql-webpack'
+  pull_request:
+    types: [opened, synchronize]
   
 jobs:
   build:
diff --git a/.github/workflows/license-check.yml b/.github/workflows/license-check.yml
index 9801fd03a99..ce71fa68815 100644
--- a/.github/workflows/license-check.yml
+++ b/.github/workflows/license-check.yml
@@ -3,6 +3,8 @@ on:
   push:
     paths:
       - 'yarn.lock'
+  pull_request:
+    types: [opened, synchronize]
       
 jobs:
   check:
diff --git a/.github/workflows/push-pr.yml b/.github/workflows/push-pr.yml
index 36578e44b58..4a25e4c3e08 100644
--- a/.github/workflows/push-pr.yml
+++ b/.github/workflows/push-pr.yml
@@ -1,5 +1,7 @@
 name: CI
-on: [push]
+on: 
+  pull_request:
+    types: [opened, synchronize]
       
 jobs:
   lint:
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index a652d507d80..943953958cc 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/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">
diff --git a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
index fcc58ee164a..11010e00783 100644
--- a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
+++ b/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);