fix: design fixes

Author: astandrik

src/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -27,6 +27,7 @@ export const QueryExecutionStatus = ({className, error, loading}: QueryExecution
     let textColor: TextProps['color'];
 
     const elapsedTime = useElapsedTime(loading);
+    const isCancelled = isQueryCancelledError(error);
 
     if (loading) {
         theme = 'info';
@@ -38,9 +39,9 @@ export const QueryExecutionStatus = ({className, error, loading}: QueryExecution
         textColor = 'danger-heavy';
         icon = <Icon data={CircleQuestionFill} />;
         label = 'Connection aborted';
-    } else if (isQueryCancelledError(error)) {
-        theme = 'danger';
-        textColor = 'danger-heavy';
+    } else if (isCancelled) {
+        theme = 'warning';
+        textColor = 'warning-heavy';
         icon = <Icon data={CircleStop} className={b('result-status-icon', {error: true})} />;
         label = 'Stopped';
     } else {

src/components/QuerySettingsDescription/QuerySettingsDescription.scss

@@ -3,7 +3,6 @@
         display: flex;
         flex-wrap: wrap;
 
-        font-size: var(--g-text-body-1-font-size);
         white-space: pre;
     }
 }

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

@@ -20,6 +20,7 @@ import {getStringifiedData} from '../../../../utils/dataFormatters/dataFormatter
 import {useSetting, useTypedDispatch} from '../../../../utils/hooks';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import {QuerySettingsBanner} from '../QuerySettingsBanner/QuerySettingsBanner';
+import {QueryStoppedBanner} from '../QueryStoppedBanner/QueryStoppedBanner';
 import {getPreparedResult} from '../utils/getPreparedResult';
 import {isQueryCancelledError} from '../utils/isQueryCancelledError';
 
@@ -323,13 +324,16 @@ export function QueryResultViewer({
         );
     };
 
+    const isCancelled = isQueryCancelledError(error);
+
     return (
         <React.Fragment>
             <div className={b('controls')}>
                 {renderLeftControls()}
                 {renderRightControls()}
             </div>
-            {isLoading || isQueryCancelledError(error) ? null : <QuerySettingsBanner />}
+            {isLoading || isCancelled ? null : <QuerySettingsBanner />}
+            {isCancelled ? <QueryStoppedBanner /> : null}
             <LoaderWrapper loading={isLoading && (!data.resultSets || activeSection !== 'result')}>
                 <Fullscreen className={b('result')}>{renderResultSection()}</Fullscreen>
             </LoaderWrapper>

src/containers/Tenant/Query/QueryStoppedBanner/QueryStoppedBanner.scss

@@ -0,0 +1,5 @@
+.ydb-query-stopped-banner {
+    margin-top: var(--g-spacing-4);
+    margin-right: var(--g-spacing-4);
+    margin-left: var(--g-spacing-4);
+}

src/containers/Tenant/Query/QueryStoppedBanner/QueryStoppedBanner.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {Alert} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../utils/cn';
+import {QUERY_STOPPED_BANNER_CLOSED_KEY} from '../../../../utils/constants';
+import {useSetting} from '../../../../utils/hooks';
+import i18n from '../i18n';
+const b = cn('ydb-query-stopped-banner');
+
+import './QueryStoppedBanner.scss';
+
+export function QueryStoppedBanner() {
+    const [isQueryStoppedBannerClosed, setIsQueryStoppedBannerClosed] = useSetting<boolean>(
+        QUERY_STOPPED_BANNER_CLOSED_KEY,
+    );
+
+    const closeBanner = React.useCallback(() => {
+        setIsQueryStoppedBannerClosed(true);
+    }, [setIsQueryStoppedBannerClosed]);
+
+    return isQueryStoppedBannerClosed ? null : (
+        <Alert
+            className={b()}
+            theme="normal"
+            align="center"
+            style={{paddingTop: 11, paddingBottom: 11}}
+            message={<div className={b('message')}>{i18n('banner.query-stopped.message')}</div>}
+            layout="horizontal"
+            actions={
+                <Alert.Actions>
+                    <Alert.Action view="normal" onClick={closeBanner}>
+                        {i18n('banner.query-stopped.never-show')}
+                    </Alert.Action>
+                </Alert.Actions>
+            }
+        />
+    );
+}

src/containers/Tenant/Query/i18n/en.json

@@ -56,6 +56,8 @@
 
   "gear.tooltip": "Query execution settings have been changed for ",
   "banner.query-settings.message": "Query was executed with modified settings: ",
+  "banner.query-stopped.message": "Data is not up to date because the request was not completed.",
+  "banner.query-stopped.never-show": "Never show again",
 
   "toaster.stop-error": "Something went wrong. Unable to stop request processing. Please wait.",
 

src/services/settings.ts

@@ -17,6 +17,7 @@ import {
     PARTITIONS_HIDDEN_COLUMNS_KEY,
     QUERY_EXECUTION_SETTINGS_KEY,
     QUERY_SETTINGS_BANNER_LAST_CLOSED_KEY,
+    QUERY_STOPPED_BANNER_CLOSED_KEY,
     SAVED_QUERIES_KEY,
     SHOW_DOMAIN_DATABASE_KEY,
     TENANT_INITIAL_PAGE_KEY,
@@ -51,6 +52,7 @@ export const DEFAULT_USER_SETTINGS = {
     [AUTO_REFRESH_INTERVAL]: 0,
     [CASE_SENSITIVE_JSON_SEARCH]: false,
     [SHOW_DOMAIN_DATABASE_KEY]: false,
+    [QUERY_STOPPED_BANNER_CLOSED_KEY]: false,
     [LAST_QUERY_EXECUTION_SETTINGS_KEY]: undefined,
     [QUERY_SETTINGS_BANNER_LAST_CLOSED_KEY]: undefined,
     [QUERY_EXECUTION_SETTINGS_KEY]: DEFAULT_QUERY_SETTINGS,

src/utils/constants.ts

@@ -98,6 +98,7 @@ export const TENANT_OVERVIEW_TABLES_SETTINGS = {
 export const QUERY_EXECUTION_SETTINGS_KEY = 'queryExecutionSettings';
 export const LAST_QUERY_EXECUTION_SETTINGS_KEY = 'last_query_execution_settings';
 export const QUERY_SETTINGS_BANNER_LAST_CLOSED_KEY = 'querySettingsBannerLastClosed';
+export const QUERY_STOPPED_BANNER_CLOSED_KEY = 'queryStoppedBannerClosed';
 
 export const LAST_USED_QUERY_ACTION_KEY = 'last_used_query_action';