fix(QueryEditor): result status for aborted connection

Author: ariser

src/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -1,29 +1,47 @@
+import type {ReactNode} from 'react';
+import type {AxiosError} from 'axios';
 import cn from 'bem-cn-lite';
 
+import {Icon as UiKitIcon} from '@gravity-ui/uikit';
+
 import Icon from '../Icon/Icon';
 
+import questionIcon from '../../assets/icons/question.svg';
+
 import './QueryExecutionStatus.scss';
 
 const b = cn('kv-query-execution-status');
 
 interface QueryExecutionStatusProps {
     className?: string;
-    hasError?: boolean;
+    error?: AxiosError | Record<string, any>;
 }
 
-function QueryExecutionStatus({className, hasError}: QueryExecutionStatusProps) {
-    return hasError === undefined ? null : (
-        <div className={b(null, className)}>
+export const QueryExecutionStatus = ({className, error}: QueryExecutionStatusProps) => {
+    let icon: ReactNode;
+    let label: string;
+
+    if (error?.code === 'ECONNABORTED') {
+        icon = <UiKitIcon data={questionIcon} size={16} />;
+        label = 'Connection aborted';
+    } else {
+        const hasError = Boolean(error);
+        icon = (
             <Icon
                 name={hasError ? 'failure' : 'success'}
                 viewBox={hasError ? '0 0 512 512' : '0 0 16 16'}
                 width={16}
                 height={16}
                 className={b('result-status-icon', {error: hasError})}
             />
-            {hasError ? 'Failed' : 'Completed'}
+        );
+        label = hasError ? 'Failed' : 'Completed';
+    }
+
+    return (
+        <div className={b(null, className)}>
+            {icon}
+            {label}
         </div>
     );
-}
-
-export default QueryExecutionStatus;
+};

src/components/QueryExecutionStatus/index.ts

@@ -0,0 +1 @@
+export * from './QueryExecutionStatus';

src/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -12,7 +12,7 @@ import {
 } from '@gravity-ui/paranoid';
 import {renderExplainNode} from '../../../../utils';
 import {explainVersions} from '../../../../store/reducers/explainQuery';
-import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
+import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
@@ -263,7 +263,7 @@ function QueryExplain(props) {
                 {!props.loading && (
                     <React.Fragment>
                         <div className={b('controls-right')}>
-                            <QueryExecutionStatus hasError={Boolean(props.error)} />
+                            <QueryExecutionStatus error={props.error} />
                             {!props.error && (
                                 <React.Fragment>
                                     <Divider />

src/containers/Tenant/QueryEditor/QueryResult/QueryResult.js

@@ -11,7 +11,7 @@ import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
 import './QueryResult.scss';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
-import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
+import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import ResultIssues from '../Issues/Issues';
 import {prepareQueryError} from '../../../../utils/query';
@@ -127,7 +127,7 @@ function QueryResult(props) {
         <React.Fragment>
             <div className={b('controls')}>
                 <div className={b('controls-right')}>
-                    <QueryExecutionStatus hasError={Boolean(props.error)} />
+                    <QueryExecutionStatus error={props.error} />
 
                     {props.stats && !props.error && (
                         <React.Fragment>