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

harshithpabbati · acao · web-flow · commit 9f8c78ce8c72 · 2021-04-04T09:36:32.000-04:00
Use application to hide query history panel instead of CSS. Improves perf, reduces regression surface area.

Co-authored-by: Rikki Schulte &lt;rikki.schulte@gmail.com&gt;
diff --git a/.changeset/metal-cougars-fry.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);

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