From fbb81ad8cc82c4e5ffe19650bdae4c23d8c3ca4d Mon Sep 17 00:00:00 2001
From: Mathias Klippinge <mathias.klippinge@gmail.com>
Date: Wed, 20 Mar 2024 13:36:27 +0100
Subject: [PATCH] Code review + lint

---
 .../graphiql-react/src/editor/context.tsx     | 47 ++++++++++++-------
 packages/graphiql/src/components/GraphiQL.tsx | 11 +----
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx
index d70ae12ecc..8a37f8b8e0 100644
--- a/packages/graphiql-react/src/editor/context.tsx
+++ b/packages/graphiql-react/src/editor/context.tsx
@@ -37,6 +37,7 @@ import {
 } from './tabs';
 import { CodeMirrorEditor } from './types';
 import { STORAGE_KEY as STORAGE_KEY_VARIABLES } from './variable-editor';
+import { useExecutionContext } from '../execution';
 
 export type CodeMirrorEditorWithOperationFacts = CodeMirrorEditor & {
   documentAST: DocumentNode | null;
@@ -279,6 +280,7 @@ export type EditorContextProviderProps = {
 
 export function EditorContextProvider(props: EditorContextProviderProps) {
   const storage = useStorageContext();
+  const executionContext = useExecutionContext();
   const [headerEditor, setHeaderEditor] = useState<CodeMirrorEditor | null>(
     null,
   );
@@ -382,7 +384,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     headerEditor,
     responseEditor,
   });
-  const { onTabChange, defaultHeaders, children } = props;
+  const { onTabChange, confirmCloseTab, defaultHeaders, children } = props;
 
   const addTab = useCallback<EditorContextType['addTab']>(() => {
     setTabState(current => {
@@ -442,29 +444,41 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     EditorContextType['closeTabConfirmation']
   >(
     async index => {
-      if (props.confirmCloseTab) {
-        const confirmation = await props.confirmCloseTab(index);
+      if (confirmCloseTab) {
+        const confirmation = await confirmCloseTab(index);
         return confirmation;
       }
       return true;
     },
-    [props.confirmCloseTab],
+    [confirmCloseTab],
   );
 
   const closeTab = useCallback<EditorContextType['closeTab']>(
-    index => {
-      setTabState(current => {
-        const updated = {
-          tabs: current.tabs.filter((_tab, i) => index !== i),
-          activeTabIndex: Math.max(current.activeTabIndex - 1, 0),
-        };
-        storeTabs(updated);
-        setEditorValues(updated.tabs[updated.activeTabIndex]);
-        onTabChange?.(updated);
-        return updated;
-      });
+    async index => {
+      if (await closeTabConfirmation(index)) {
+        if (index === tabState.activeTabIndex) {
+          executionContext?.stop();
+        }
+        setTabState(current => {
+          const updated = {
+            tabs: current.tabs.filter((_tab, i) => index !== i),
+            activeTabIndex: Math.max(current.activeTabIndex - 1, 0),
+          };
+          storeTabs(updated);
+          setEditorValues(updated.tabs[updated.activeTabIndex]);
+          onTabChange?.(updated);
+          return updated;
+        });
+      }
     },
-    [onTabChange, setEditorValues, storeTabs],
+    [
+      onTabChange,
+      setEditorValues,
+      storeTabs,
+      closeTabConfirmation,
+      tabState.activeTabIndex,
+      executionContext,
+    ],
   );
 
   const updateActiveTabValues = useCallback<
@@ -557,6 +571,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       addTab,
       changeTab,
       moveTab,
+      closeTabConfirmation,
       closeTab,
       updateActiveTabValues,
 
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index 9548a94cc6..d996b825d7 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -547,16 +547,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
                             {tab.title}
                           </Tab.Button>
                           <Tab.Close
-                            onClick={async () => {
-                              if (
-                                await editorContext.closeTabConfirmation(index)
-                              ) {
-                                if (editorContext.activeTabIndex === index) {
-                                  executionContext.stop();
-                                }
-                                editorContext.closeTab(index);
-                              }
-                            }}
+                            onClick={() => editorContext.closeTab(index)}
                           />
                         </Tab>
                       ))}