From eb2d91fa8e4a03cb5663f27f724db2c95989a40f Mon Sep 17 00:00:00 2001
From: Harshith Pabbati <pabbatiharshith@gmail.com>
Date: Sat, 10 Jul 2021 15:51:51 +0530
Subject: [PATCH] fix: new util to manage historyStore outside of query history
 component (#1914)

---
 .changeset/short-mirrors-occur.md             |   6 +
 packages/graphiql/README.md                   |   1 +
 packages/graphiql/src/components/GraphiQL.tsx |  21 ++-
 .../graphiql/src/components/QueryHistory.tsx  | 177 +++++-------------
 .../components/__tests__/GraphiQL.spec.tsx    |  15 ++
 packages/graphiql/src/utility/HistoryStore.ts | 158 ++++++++++++++++
 6 files changed, 246 insertions(+), 132 deletions(-)
 create mode 100644 .changeset/short-mirrors-occur.md
 create mode 100644 packages/graphiql/src/utility/HistoryStore.ts

diff --git a/.changeset/short-mirrors-occur.md b/.changeset/short-mirrors-occur.md
new file mode 100644
index 00000000000..d6e233f420d
--- /dev/null
+++ b/.changeset/short-mirrors-occur.md
@@ -0,0 +1,6 @@
+---
+'graphiql': minor
+---
+
+fix: history can now be saved even when query history panel is not opened
+feat: create a new maxHistoryLength prop to allow more than 20 queries in history panel
diff --git a/packages/graphiql/README.md b/packages/graphiql/README.md
index 9e8b01bd611..47c44f37cff 100644
--- a/packages/graphiql/README.md
+++ b/packages/graphiql/README.md
@@ -216,6 +216,7 @@ For more details on props, see the [API Docs](https://graphiql-test.netlify.app/
 | `onEditHeaders`              | `Function`                                                                                            | called when the request headers editor changes. The argument to the function will be the headers string.                                                                                        |
 | `onEditOperationName`        | `Function`                                                                                            | called when the operation name to be executed changes.                                                                                                                                          |
 | `onToggleDocs`               | `Function`                                                                                            | called when the docs will be toggled. The argument to the function will be a boolean whether the docs are now open or closed.                                                                   |
+| `maxHistoryLength`           | `number`                                                                                              | **Default:** 20. allows you to increase the number of queries in the history component                                                                                                          | 20 |
 
 ### Children (this pattern will be dropped in 2.0.0)
 
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index 943953958cc..c90276353af 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -64,6 +64,7 @@ import type {
   Unsubscribable,
   FetcherResultPayload,
 } from '@graphiql/toolkit';
+import HistoryStore from '../utility/HistoryStore';
 
 const DEFAULT_DOC_EXPLORER_WIDTH = 350;
 
@@ -123,6 +124,7 @@ export type GraphiQLProps = {
   readOnly?: boolean;
   docExplorerOpen?: boolean;
   toolbar?: GraphiQLToolbarConfig;
+  maxHistoryLength?: number;
 };
 
 export type GraphiQLState = {
@@ -147,6 +149,7 @@ export type GraphiQLState = {
   variableToType?: VariableToType;
   operations?: OperationDefinitionNode[];
   documentAST?: DocumentNode;
+  maxHistoryLength: number;
 };
 
 /**
@@ -185,6 +188,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
   variableEditorComponent: Maybe<VariableEditor>;
   headerEditorComponent: Maybe<HeaderEditor>;
   _queryHistory: Maybe<QueryHistory>;
+  _historyStore: Maybe<HistoryStore>;
   editorBarComponent: Maybe<HTMLDivElement>;
   queryEditorComponent: Maybe<QueryEditor>;
   resultViewerElement: Maybe<HTMLElement>;
@@ -200,6 +204,10 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
     // Cache the storage instance
     this._storage = new StorageAPI(props.storage);
 
+    const maxHistoryLength = props.maxHistoryLength ?? 20;
+
+    this._historyStore = new HistoryStore(this._storage, maxHistoryLength);
+
     // Disable setState when the component is not mounted
     this.componentIsMounted = false;
 
@@ -285,6 +293,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
         DEFAULT_DOC_EXPLORER_WIDTH,
       isWaitingForResponse: false,
       subscription: null,
+      maxHistoryLength,
       ...queryFacts,
     };
   }
@@ -493,6 +502,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
               variables={this.state.variables}
               onSelectQuery={this.handleSelectHistoryQuery}
               storage={this._storage}
+              maxHistoryLength={this.state.maxHistoryLength}
               queryID={this._editorQueryID}>
               <button
                 className="docExplorerHide"
@@ -1062,12 +1072,21 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
       this._storage.set('operationName', operationName as string);
 
       if (this._queryHistory) {
-        this._queryHistory.updateHistory(
+        this._queryHistory.onUpdateHistory(
           editedQuery,
           variables,
           headers,
           operationName,
         );
+      } else {
+        if (this._historyStore) {
+          this._historyStore.updateHistory(
+            editedQuery,
+            variables,
+            headers,
+            operationName,
+          );
+        }
       }
 
       // when dealing with defer or stream, we need to aggregate results
diff --git a/packages/graphiql/src/components/QueryHistory.tsx b/packages/graphiql/src/components/QueryHistory.tsx
index b934d1478d7..8bb35a9b540 100644
--- a/packages/graphiql/src/components/QueryHistory.tsx
+++ b/packages/graphiql/src/components/QueryHistory.tsx
@@ -5,59 +5,15 @@
  *  LICENSE file in the root directory of this source tree.
  */
 
-import { parse } from 'graphql';
 import React from 'react';
-import QueryStore, { QueryStoreItem } from '../utility/QueryStore';
+import { QueryStoreItem } from '../utility/QueryStore';
 import HistoryQuery, {
   HandleEditLabelFn,
-  HandleToggleFavoriteFn,
   HandleSelectQueryFn,
+  HandleToggleFavoriteFn,
 } from './HistoryQuery';
 import StorageAPI from '../utility/StorageAPI';
-
-const MAX_QUERY_SIZE = 100000;
-const MAX_HISTORY_LENGTH = 20;
-
-const shouldSaveQuery = (
-  query?: string,
-  variables?: string,
-  headers?: string,
-  lastQuerySaved?: QueryStoreItem,
-) => {
-  if (!query) {
-    return false;
-  }
-
-  try {
-    parse(query);
-  } catch (e) {
-    return false;
-  }
-
-  // Don't try to save giant queries
-  if (query.length > MAX_QUERY_SIZE) {
-    return false;
-  }
-  if (!lastQuerySaved) {
-    return true;
-  }
-  if (JSON.stringify(query) === JSON.stringify(lastQuerySaved.query)) {
-    if (
-      JSON.stringify(variables) === JSON.stringify(lastQuerySaved.variables)
-    ) {
-      if (JSON.stringify(headers) === JSON.stringify(lastQuerySaved.headers)) {
-        return false;
-      }
-      if (headers && !lastQuerySaved.headers) {
-        return false;
-      }
-    }
-    if (variables && !lastQuerySaved.variables) {
-      return false;
-    }
-  }
-  return true;
-};
+import HistoryStore from '../utility/HistoryStore';
 
 type QueryHistoryProps = {
   query?: string;
@@ -67,6 +23,7 @@ type QueryHistoryProps = {
   queryID?: number;
   onSelectQuery: HandleSelectQueryFn;
   storage: StorageAPI;
+  maxHistoryLength: number;
 };
 
 type QueryHistoryState = {
@@ -77,80 +34,29 @@ export class QueryHistory extends React.Component<
   QueryHistoryProps,
   QueryHistoryState
 > {
-  historyStore: QueryStore;
-  favoriteStore: QueryStore;
+  historyStore: HistoryStore;
 
   constructor(props: QueryHistoryProps) {
     super(props);
-    this.historyStore = new QueryStore(
-      'queries',
-      props.storage,
-      MAX_HISTORY_LENGTH,
+    this.historyStore = new HistoryStore(
+      this.props.storage,
+      this.props.maxHistoryLength,
     );
-    // favorites are not automatically deleted, so there's no need for a max length
-    this.favoriteStore = new QueryStore('favorites', props.storage, null);
-    const historyQueries = this.historyStore.fetchAll();
-    const favoriteQueries = this.favoriteStore.fetchAll();
-    const queries = historyQueries.concat(favoriteQueries);
+    const queries = this.historyStore.queries;
     this.state = { queries };
   }
 
-  render() {
-    const queries = this.state.queries.slice().reverse();
-    const queryNodes = queries.map((query, i) => {
-      return (
-        <HistoryQuery
-          handleEditLabel={this.editLabel}
-          handleToggleFavorite={this.toggleFavorite}
-          key={`${i}:${query.label || query.query}`}
-          onSelect={this.props.onSelectQuery}
-          {...query}
-        />
-      );
-    });
-    return (
-      <section aria-label="History">
-        <div className="history-title-bar">
-          <div className="history-title">{'History'}</div>
-          <div className="doc-explorer-rhs">{this.props.children}</div>
-        </div>
-        <ul className="history-contents">{queryNodes}</ul>
-      </section>
-    );
-  }
-
-  // Public API
-  updateHistory = (
+  onUpdateHistory = (
     query?: string,
     variables?: string,
     headers?: string,
     operationName?: string,
   ) => {
-    if (
-      shouldSaveQuery(
-        query,
-        variables,
-        headers,
-        this.historyStore.fetchRecent(),
-      )
-    ) {
-      this.historyStore.push({
-        query,
-        variables,
-        headers,
-        operationName,
-      });
-      const historyQueries = this.historyStore.items;
-      const favoriteQueries = this.favoriteStore.items;
-      const queries = historyQueries.concat(favoriteQueries);
-      this.setState({
-        queries,
-      });
-    }
+    this.historyStore.updateHistory(query, variables, headers, operationName);
+    this.setState({ queries: this.historyStore.queries });
   };
 
-  // Public API
-  toggleFavorite: HandleToggleFavoriteFn = (
+  onHandleEditLabel: HandleEditLabelFn = (
     query,
     variables,
     headers,
@@ -158,27 +64,18 @@ export class QueryHistory extends React.Component<
     label,
     favorite,
   ) => {
-    const item: QueryStoreItem = {
+    this.historyStore.editLabel(
       query,
       variables,
       headers,
       operationName,
       label,
-    };
-    if (!this.favoriteStore.contains(item)) {
-      item.favorite = true;
-      this.favoriteStore.push(item);
-    } else if (favorite) {
-      item.favorite = false;
-      this.favoriteStore.delete(item);
-    }
-    this.setState({
-      queries: [...this.historyStore.items, ...this.favoriteStore.items],
-    });
+      favorite,
+    );
+    this.setState({ queries: this.historyStore.queries });
   };
 
-  // Public API
-  editLabel: HandleEditLabelFn = (
+  onToggleFavorite: HandleToggleFavoriteFn = (
     query,
     variables,
     headers,
@@ -186,20 +83,38 @@ export class QueryHistory extends React.Component<
     label,
     favorite,
   ) => {
-    const item = {
+    this.historyStore.toggleFavorite(
       query,
       variables,
       headers,
       operationName,
       label,
-    };
-    if (favorite) {
-      this.favoriteStore.edit({ ...item, favorite });
-    } else {
-      this.historyStore.edit(item);
-    }
-    this.setState({
-      queries: [...this.historyStore.items, ...this.favoriteStore.items],
-    });
+      favorite,
+    );
+    this.setState({ queries: this.historyStore.queries });
   };
+
+  render() {
+    const queries = this.state.queries.slice().reverse();
+    const queryNodes = queries.map((query, i) => {
+      return (
+        <HistoryQuery
+          handleEditLabel={this.onHandleEditLabel}
+          handleToggleFavorite={this.onToggleFavorite}
+          key={`${i}:${query.label || query.query}`}
+          onSelect={this.props.onSelectQuery}
+          {...query}
+        />
+      );
+    });
+    return (
+      <section aria-label="History">
+        <div className="history-title-bar">
+          <div className="history-title">{'History'}</div>
+          <div className="doc-explorer-rhs">{this.props.children}</div>
+        </div>
+        <ul className="history-contents">{queryNodes}</ul>
+      </section>
+    );
+  }
 }
diff --git a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
index 11010e00783..0293c337c1a 100644
--- a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
+++ b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
@@ -175,6 +175,21 @@ describe('GraphiQL', () => {
     expect(container.querySelector('.historyPaneWrap')).not.toBeInTheDocument();
   });
 
+  it('will save history item even when history panel is closed', () => {
+    const { getByTitle, container } = render(
+      <GraphiQL
+        query={mockQuery1}
+        variables={mockVariables1}
+        headers={mockHeaders1}
+        operationName={mockOperationName1}
+        fetcher={noOpFetcher}
+      />,
+    );
+    fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
+    fireEvent.click(getByTitle('Show History'));
+    expect(container.querySelectorAll('.history-contents li')).toHaveLength(1);
+  });
+
   it('adds a history item when the execute query function button is clicked', () => {
     const { getByTitle, container } = render(
       <GraphiQL
diff --git a/packages/graphiql/src/utility/HistoryStore.ts b/packages/graphiql/src/utility/HistoryStore.ts
new file mode 100644
index 00000000000..d0ed47aefd6
--- /dev/null
+++ b/packages/graphiql/src/utility/HistoryStore.ts
@@ -0,0 +1,158 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+import QueryStore, { QueryStoreItem } from './QueryStore';
+import StorageAPI from './StorageAPI';
+import { parse } from 'graphql';
+import {
+  HandleEditLabelFn,
+  HandleToggleFavoriteFn,
+} from '../components/HistoryQuery';
+
+const MAX_QUERY_SIZE = 100000;
+
+export default class HistoryStore {
+  queries: Array<QueryStoreItem>;
+  history: QueryStore;
+  favorite: QueryStore;
+
+  constructor(private storage: StorageAPI, private maxHistoryLength: number) {
+    this.history = new QueryStore(
+      'queries',
+      this.storage,
+      this.maxHistoryLength,
+    );
+    // favorites are not automatically deleted, so there's no need for a max length
+    this.favorite = new QueryStore('favorites', this.storage, null);
+    this.queries = this.fetchAllQueries();
+  }
+
+  shouldSaveQuery = (
+    query?: string,
+    variables?: string,
+    headers?: string,
+    lastQuerySaved?: QueryStoreItem,
+  ) => {
+    if (!query) {
+      return false;
+    }
+
+    try {
+      parse(query);
+    } catch (e) {
+      return false;
+    }
+
+    // Don't try to save giant queries
+    if (query.length > MAX_QUERY_SIZE) {
+      return false;
+    }
+    if (!lastQuerySaved) {
+      return true;
+    }
+    if (JSON.stringify(query) === JSON.stringify(lastQuerySaved.query)) {
+      if (
+        JSON.stringify(variables) === JSON.stringify(lastQuerySaved.variables)
+      ) {
+        if (
+          JSON.stringify(headers) === JSON.stringify(lastQuerySaved.headers)
+        ) {
+          return false;
+        }
+        if (headers && !lastQuerySaved.headers) {
+          return false;
+        }
+      }
+      if (variables && !lastQuerySaved.variables) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  fetchAllQueries = () => {
+    const historyQueries = this.history.fetchAll();
+    const favoriteQueries = this.favorite.fetchAll();
+    return historyQueries.concat(favoriteQueries);
+  };
+
+  // Public API
+  updateHistory = (
+    query?: string,
+    variables?: string,
+    headers?: string,
+    operationName?: string,
+  ) => {
+    if (
+      this.shouldSaveQuery(
+        query,
+        variables,
+        headers,
+        this.history.fetchRecent(),
+      )
+    ) {
+      this.history.push({
+        query,
+        variables,
+        headers,
+        operationName,
+      });
+      const historyQueries = this.history.items;
+      const favoriteQueries = this.favorite.items;
+      this.queries = historyQueries.concat(favoriteQueries);
+    }
+  };
+
+  // Public API
+  toggleFavorite: HandleToggleFavoriteFn = (
+    query,
+    variables,
+    headers,
+    operationName,
+    label,
+    favorite,
+  ) => {
+    const item: QueryStoreItem = {
+      query,
+      variables,
+      headers,
+      operationName,
+      label,
+    };
+    if (!this.favorite.contains(item)) {
+      item.favorite = true;
+      this.favorite.push(item);
+    } else if (favorite) {
+      item.favorite = false;
+      this.favorite.delete(item);
+    }
+    this.queries = [...this.history.items, ...this.favorite.items];
+  };
+
+  // Public API
+  editLabel: HandleEditLabelFn = (
+    query,
+    variables,
+    headers,
+    operationName,
+    label,
+    favorite,
+  ) => {
+    const item = {
+      query,
+      variables,
+      headers,
+      operationName,
+      label,
+    };
+    if (favorite) {
+      this.favorite.edit({ ...item, favorite });
+    } else {
+      this.history.edit(item);
+    }
+    this.queries = [...this.history.items, ...this.favorite.items];
+  };
+}