fix

Author: astandrik

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -5,7 +5,6 @@ import {isEqual} from 'lodash';
 import {v4 as uuidv4} from 'uuid';
 
 import SplitPane from '../../../../components/SplitPane';
-import {cancelQueryApi} from '../../../../store/reducers/cancelQuery';
 import {
     useStreamingAvailable,
     useTracingLevelOptionAvailable,
@@ -92,12 +91,11 @@ export default function QueryEditor(props: QueryEditorProps) {
         LAST_USED_QUERY_ACTION_KEY,
     );
     const [lastExecutedQueryText, setLastExecutedQueryText] = React.useState<string>('');
-    const [isQueryStreamingEnabled] = useSetting(ENABLE_QUERY_STREAMING);
+    const [isQueryStreamingEnabled] = useSetting<boolean>(ENABLE_QUERY_STREAMING);
     const isStreamingEnabled = useStreamingAvailable() && isQueryStreamingEnabled;
 
     const [sendQuery] = queryApi.useUseSendQueryMutation();
     const [streamQuery] = queryApi.useUseStreamQueryMutation();
-    const [sendCancelQuery, cancelQueryResponse] = cancelQueryApi.useCancelQueryMutation();
 
     const runningQueryRef = React.useRef<{abort: VoidFunction} | null>(null);
 
@@ -202,14 +200,6 @@ export default function QueryEditor(props: QueryEditorProps) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     });
 
-    const handleCancelRunningQuery = React.useCallback(() => {
-        if (isStreamingEnabled && runningQueryRef.current) {
-            runningQueryRef.current.abort();
-        } else if (result?.queryId) {
-            sendCancelQuery({queryId: result?.queryId, database: tenantName});
-        }
-    }, [isStreamingEnabled, result?.queryId, sendCancelQuery, tenantName]);
-
     const onCollapseResultHandler = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     };
@@ -231,6 +221,8 @@ export default function QueryEditor(props: QueryEditorProps) {
                 highlightedAction={lastUsedQueryAction}
                 tenantName={tenantName}
                 queryId={result?.queryId}
+                isStreamingEnabled={isStreamingEnabled}
+                runningQueryRef={runningQueryRef}
             />
         );
     };
@@ -272,12 +264,10 @@ export default function QueryEditor(props: QueryEditorProps) {
                         theme={theme}
                         key={result?.queryId}
                         result={result}
-                        cancelQueryResponse={cancelQueryResponse}
                         tenantName={tenantName}
                         path={path}
                         showPreview={showPreview}
                         queryText={lastExecutedQueryText}
-                        onCancelRunningQuery={handleCancelRunningQuery}
                         tableSettings={tableSettings}
                     />
                 </div>
@@ -294,17 +284,14 @@ interface ResultProps {
     type?: EPathType;
     theme: string;
     result?: QueryResult;
-    cancelQueryResponse?: Pick<QueryResult, 'isLoading' | 'error'>;
     tenantName: string;
     path: string;
     showPreview?: boolean;
     queryText: string;
     tableSettings?: Partial<Settings>;
-    onCancelRunningQuery: VoidFunction;
 }
 function Result({
     resultVisibilityState,
-    cancelQueryResponse,
     onExpandResultHandler,
     onCollapseResultHandler,
     type,
@@ -315,7 +302,6 @@ function Result({
     showPreview,
     queryText,
     tableSettings,
-    onCancelRunningQuery,
 }: ResultProps) {
     if (showPreview) {
         return <Preview database={tenantName} path={path} type={type} />;
@@ -329,13 +315,10 @@ function Result({
                 theme={theme}
                 tenantName={tenantName}
                 isResultsCollapsed={resultVisibilityState.collapsed}
-                isCancelError={Boolean(cancelQueryResponse?.error)}
-                isCancelling={Boolean(cancelQueryResponse?.isLoading)}
                 tableSettings={tableSettings}
                 onExpandResults={onExpandResultHandler}
                 onCollapseResults={onCollapseResultHandler}
                 queryText={queryText}
-                onCancelRunningQuery={onCancelRunningQuery}
             />
         );
     }

src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -22,6 +22,8 @@ interface QueryEditorControlsProps {
     highlightedAction: QueryAction;
     queryId?: string;
     tenantName: string;
+    isStreamingEnabled?: boolean;
+    runningQueryRef: React.MutableRefObject<{abort: VoidFunction} | null>;
 
     handleGetExplainQueryClick: (text: string) => void;
     handleSendExecuteClick: (text: string) => void;
@@ -37,6 +39,8 @@ export const QueryEditorControls = ({
     highlightedAction,
     queryId,
     tenantName,
+    isStreamingEnabled,
+    runningQueryRef,
 
     handleSendExecuteClick,
     onSettingsButtonClick,
@@ -67,7 +71,11 @@ export const QueryEditorControls = ({
     const onStopButtonClick = React.useCallback(async () => {
         if (queryId) {
             try {
-                await sendCancelQuery({queryId, database: tenantName}).unwrap();
+                if (isStreamingEnabled && runningQueryRef.current) {
+                    runningQueryRef.current.abort();
+                } else if (queryId) {
+                    sendCancelQuery({queryId, database: tenantName}).unwrap();
+                }
             } catch {
                 createToast({
                     name: 'stop-error',
@@ -78,7 +86,8 @@ export const QueryEditorControls = ({
                 });
             }
         }
-    }, [queryId, sendCancelQuery, tenantName]);
+    }, [isStreamingEnabled, queryId, runningQueryRef, sendCancelQuery, tenantName]);
+
     const isRunHighlighted = highlightedAction === 'execute';
     const isExplainHighlighted = highlightedAction === 'explain';