refactor(QueryEditor): replace warning for query losing with note about how query are saved

Author: ariser

src/containers/Tenant/QueryEditor/SaveQuery/SaveQuery.js

@@ -1,31 +1,24 @@
-import React, {useState, useRef} from 'react';
+import React, {useState} from 'react';
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import {useDispatch, useSelector} from 'react-redux';
-import {Dialog, DropdownMenu, Popup, TextInput, Button} from '@yandex-cloud/uikit';
+import {Dialog, DropdownMenu, TextInput, Button} from '@yandex-cloud/uikit';
 
-import Icon from '../../../../components/Icon/Icon';
 import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
 
 import './SaveQuery.scss';
 
 const b = cn('kv-save-query');
 
-const EMBEDDED_VERSION_WARNING =
-    'Please be aware: after cookies delete your saved queries will be lost.';
-
 function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
     const singleClusterMode = useSelector((state) => state.singleClusterMode);
     const [isDialogVisible, setIsDialogVisible] = useState(false);
-    const [isEmbeddedWarningVisible, setIsEmbeddedWarningVisible] = useState(false);
     const [queryName, setQueryName] = useState('');
     const [validationError, setValidationError] = useState(null);
 
     const queryNameToEdit = useSelector((state) => state.saveQuery);
     const dispatch = useDispatch();
 
-    const warningRef = useRef();
-
     const onSaveQueryClick = () => {
         setIsDialogVisible(true);
         dispatch(setQueryNameToEdit(null));
@@ -42,13 +35,6 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
         setValidationError(validateQueryName(value));
     };
 
-    const onEmbeddedWarningOpen = () => {
-        setIsEmbeddedWarningVisible(true);
-    };
-    const onEmbeddedWarningClose = () => {
-        setIsEmbeddedWarningVisible(false);
-    };
-
     const validateQueryName = (value) => {
         if (_.some(savedQueries, (q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
             return 'This name already exists';
@@ -73,15 +59,28 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
             <Dialog open={isDialogVisible} hasCloseButton={false} size="s" onClose={onCloseDialog}>
                 <Dialog.Header caption="Save query" />
                 <Dialog.Body className={b('dialog-body')}>
-                    <span className={b('field-title', 'required')}>Query name</span>
-                    <div className={b('control-wrapper')}>
-                        <TextInput
-                            placeholder="Enter query name"
-                            text={queryName}
-                            onUpdate={onQueryNameChange}
-                            hasClear
-                        />
-                        <span className={b('error')}>{validationError}</span>
+                    {singleClusterMode && (
+                        <div className={b('dialog-row')}>
+                            The query will be saved in your browser
+                        </div>
+                    )}
+                    <div className={b('dialog-row')}>
+                        <label
+                            htmlFor="queryName"
+                            className={b('field-title', 'required')}
+                        >
+                            Query name
+                        </label>
+                        <div className={b('control-wrapper')}>
+                            <TextInput
+                                id="queryName"
+                                placeholder="Enter query name"
+                                text={queryName}
+                                onUpdate={onQueryNameChange}
+                                hasClear
+                            />
+                            <span className={b('error')}>{validationError}</span>
+                        </div>
                     </div>
                 </Dialog.Body>
                 <Dialog.Footer
@@ -121,36 +120,10 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
         );
     };
 
-    const renderEmbeddedVersionWarning = () => {
-        return (
-            <React.Fragment>
-                <Popup
-                    className={b('embedded-popup')}
-                    anchorRef={warningRef}
-                    placement={['top']}
-                    open={isEmbeddedWarningVisible}
-                    hasArrow
-                >
-                    {EMBEDDED_VERSION_WARNING}
-                </Popup>
-                <div
-                    className={b('embedded-tooltip')}
-                    ref={warningRef}
-                    onMouseEnter={onEmbeddedWarningOpen}
-                    onMouseLeave={onEmbeddedWarningClose}
-                >
-                    <Icon name="question" height={18} width={18} viewBox="0 0 24 24" />
-                </div>
-            </React.Fragment>
-        );
-    };
-
     return (
         <React.Fragment>
             {queryNameToEdit ? renderSaveDropdownMenu() : renderSaveButton(onSaveQueryClick)}
             {isDialogVisible && renderDialog()}
-
-            {singleClusterMode && renderEmbeddedVersionWarning()}
         </React.Fragment>
     );
 }

src/containers/Tenant/QueryEditor/SaveQuery/SaveQuery.scss

@@ -1,17 +1,19 @@
-@import '../../../../styles/mixins.scss';
-
 .kv-save-query {
-    &__dialog-body {
+    &__dialog-row {
         display: flex;
         align-items: flex-start;
+
+        & + & {
+            margin-top: var(--yc-text-body-line-height);
+        }
     }
     &__field-title {
         margin-right: 12px;
 
         font-weight: 500;
-        line-height: 32px;
+        line-height: 28px;
         white-space: nowrap;
-        @include body2-typography();
+
         &.required {
             &::after {
                 content: '*';