fix: better cancel

Author: astandrik

src/containers/Tenant/Query/CancelQueryButton/CancelQueryButton.tsx

@@ -1,9 +1,6 @@
-import React from 'react';
-
 import {StopFill} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
 
-import {cancelQueryApi} from '../../../../store/reducers/cancelQuery';
 import {cn} from '../../../../utils/cn';
 import i18n from '../i18n';
 
@@ -12,24 +9,17 @@ import './CancelQueryButton.scss';
 const b = cn('cancel-query-button');
 
 interface CancelQueryButtonProps {
-    queryId: string;
-    tenantName: string;
+    isLoading: boolean;
+    isError: boolean;
     onClick?: VoidFunction;
 }
 
-export function CancelQueryButton({queryId, tenantName, onClick}: CancelQueryButtonProps) {
-    const [sendCancelQuery, cancelQueryResponse] = cancelQueryApi.useCancelQueryMutation();
-
-    const onStopButtonClick = React.useCallback(() => {
-        sendCancelQuery({queryId, database: tenantName});
-        onClick?.();
-    }, [onClick, queryId, sendCancelQuery, tenantName]);
-
+export function CancelQueryButton({isLoading, isError, onClick}: CancelQueryButtonProps) {
     return (
         <Button
-            loading={cancelQueryResponse.isLoading}
-            onClick={onStopButtonClick}
-            className={b('stop-button', {error: Boolean(cancelQueryResponse.error)})}
+            loading={isLoading}
+            onClick={onClick}
+            className={b('stop-button', {error: isError})}
         >
             <Icon data={StopFill} size={16} />
             {i18n('action.stop')}

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

@@ -4,6 +4,7 @@ import {isEqual} from 'lodash';
 import {v4 as uuidv4} from 'uuid';
 
 import SplitPane from '../../../../components/SplitPane';
+import {cancelQueryApi} from '../../../../store/reducers/cancelQuery';
 import {
     useStreamingAvailable,
     useTracingLevelOptionAvailable,
@@ -93,6 +94,7 @@ export default function QueryEditor(props: QueryEditorProps) {
 
     const [sendQuery] = queryApi.useUseSendQueryMutation();
     const [streamQuery] = queryApi.useUseStreamQueryMutation();
+    const [sendCancelQuery, cancelQueryResponse] = cancelQueryApi.useCancelQueryMutation();
 
     const runningQueryRef = React.useRef<{abort: VoidFunction} | null>(null);
 
@@ -188,10 +190,12 @@ export default function QueryEditor(props: QueryEditorProps) {
     });
 
     const handleCancelRunningQuery = React.useCallback(() => {
-        if (runningQueryRef.current) {
+        if (isStreamingSupported && runningQueryRef.current) {
             runningQueryRef.current.abort();
+        } else if (result?.queryId) {
+            sendCancelQuery({queryId: result?.queryId, database: tenantName});
         }
-    }, []);
+    }, [isStreamingSupported, result?.queryId, sendCancelQuery, tenantName]);
 
     const onCollapseResultHandler = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
@@ -253,6 +257,7 @@ export default function QueryEditor(props: QueryEditorProps) {
                         theme={theme}
                         key={result?.queryId}
                         result={result}
+                        cancelQueryResponse={cancelQueryResponse}
                         tenantName={tenantName}
                         path={path}
                         showPreview={showPreview}
@@ -273,6 +278,7 @@ interface ResultProps {
     type?: EPathType;
     theme: string;
     result?: QueryResult;
+    cancelQueryResponse?: Pick<QueryResult, 'isLoading' | 'error'>;
     tenantName: string;
     path: string;
     showPreview?: boolean;
@@ -281,6 +287,7 @@ interface ResultProps {
 }
 function Result({
     resultVisibilityState,
+    cancelQueryResponse,
     onExpandResultHandler,
     onCollapseResultHandler,
     type,
@@ -304,6 +311,8 @@ function Result({
                 theme={theme}
                 tenantName={tenantName}
                 isResultsCollapsed={resultVisibilityState.collapsed}
+                isCancelError={Boolean(cancelQueryResponse?.isLoading)}
+                isCancelling={Boolean(cancelQueryResponse?.isLoading)}
                 onExpandResults={onExpandResultHandler}
                 onCollapseResults={onCollapseResultHandler}
                 queryText={queryText}

src/containers/Tenant/Query/QueryResult/QueryResultViewer.tsx

@@ -82,6 +82,9 @@ interface ExecuteResultProps {
     theme?: string;
     tenantName: string;
     queryText?: string;
+
+    isCancelling: boolean;
+    isCancelError: boolean;
     onCancelRunningQuery?: VoidFunction;
     onCollapseResults: VoidFunction;
     onExpandResults: VoidFunction;
@@ -94,6 +97,8 @@ export function QueryResultViewer({
     theme,
     tenantName,
     queryText,
+    isCancelling,
+    isCancelError,
     onCancelRunningQuery,
     onCollapseResults,
     onExpandResults,
@@ -109,7 +114,7 @@ export function QueryResultViewer({
     });
     const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
-    const {error, isLoading, queryId, data = {}, speedMetrics} = result;
+    const {error, isLoading, data = {}, speedMetrics} = result;
     const {preparedPlan, simplifiedPlan, stats, resultSets, ast} = data;
 
     React.useEffect(() => {
@@ -294,8 +299,8 @@ export function QueryResultViewer({
                     <React.Fragment>
                         <ElapsedTime className={b('elapsed-time')} />
                         <CancelQueryButton
-                            queryId={queryId}
-                            tenantName={tenantName}
+                            isLoading={isCancelling}
+                            isError={isCancelError}
                             onClick={onCancelRunningQuery}
                         />
                     </React.Fragment>