diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx index d70ae12ecc8..8a37f8b8e06 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( 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(() => { 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( - 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 9548a94cc6e..d996b825d7c 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} { - if ( - await editorContext.closeTabConfirmation(index) - ) { - if (editorContext.activeTabIndex === index) { - executionContext.stop(); - } - editorContext.closeTab(index); - } - }} + onClick={() => editorContext.closeTab(index)} /> ))}