feat(Query): add explanation to the query method selector (#492)

Author: krosy1337

src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss

@@ -56,4 +56,17 @@
             }
         }
     }
+
+    &__item-with-popover {
+        display: flex;
+        align-items: center;
+
+        height: 24px;
+
+        line-height: initial;
+    }
+
+    &__popover {
+        max-width: 340px;
+    }
 }

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

@@ -6,6 +6,7 @@ import {useMemo} from 'react';
 import type {QueryAction, QueryMode} from '../../../../types/store/query';
 import {QUERY_MODES} from '../../../../utils/query';
 import {Icon} from '../../../../components/Icon';
+import {LabelWithPopover} from '../../../../components/LabelWithPopover';
 
 import SaveQuery from '../SaveQuery/SaveQuery';
 
@@ -18,16 +19,34 @@ const queryModeSelectorPopupQa = 'query-mode-selector-popup';
 
 const b = block('ydb-query-editor-controls');
 
-const OldQueryModeSelectorTitles = {
-    [QUERY_MODES.script]: 'YQL Script',
-    [QUERY_MODES.scan]: 'Scan',
+const OldQueryModeSelectorOptions = {
+    [QUERY_MODES.script]: {
+        title: 'YQL Script',
+        description: i18n('method-description.script'),
+    },
+    [QUERY_MODES.scan]: {
+        title: 'Scan',
+        description: i18n('method-description.scan'),
+    },
 } as const;
 
-const QueryModeSelectorTitles = {
-    [QUERY_MODES.script]: 'YQL Script',
-    [QUERY_MODES.scan]: 'Scan',
-    [QUERY_MODES.data]: 'Data',
-    [QUERY_MODES.query]: 'YQL - QueryService',
+const QueryModeSelectorOptions = {
+    [QUERY_MODES.script]: {
+        title: 'YQL Script',
+        description: i18n('method-description.script'),
+    },
+    [QUERY_MODES.scan]: {
+        title: 'Scan',
+        description: i18n('method-description.scan'),
+    },
+    [QUERY_MODES.data]: {
+        title: 'Data',
+        description: i18n('method-description.data'),
+    },
+    [QUERY_MODES.query]: {
+        title: 'YQL - QueryService',
+        description: i18n('method-description.query'),
+    },
 } as const;
 
 interface QueryEditorControlsProps {
@@ -58,13 +77,20 @@ export const QueryEditorControls = ({
     enableAdditionalQueryModes,
 }: QueryEditorControlsProps) => {
     const querySelectorMenuItems = useMemo(() => {
-        const titles = enableAdditionalQueryModes
-            ? QueryModeSelectorTitles
-            : OldQueryModeSelectorTitles;
+        const options = enableAdditionalQueryModes
+            ? QueryModeSelectorOptions
+            : OldQueryModeSelectorOptions;
 
-        return Object.entries(titles).map(([mode, title]) => {
+        return Object.entries(options).map(([mode, {title, description}]) => {
             return {
-                text: title,
+                text: (
+                    <LabelWithPopover
+                        className={b('item-with-popover')}
+                        contentClassName={b('popover')}
+                        text={title}
+                        popoverContent={description}
+                    />
+                ),
                 action: () => {
                     onUpdateQueryMode(mode as QueryMode);
                 },
@@ -119,7 +145,7 @@ export const QueryEditorControls = ({
                             <Button className={b('mode-selector__button')} qa={queryModeSelectorQa}>
                                 <span className={b('mode-selector__button-content')}>
                                     {`${i18n('controls.query-mode-selector_type')} ${
-                                        QueryModeSelectorTitles[queryMode]
+                                        QueryModeSelectorOptions[queryMode].title
                                     }`}
                                     <Icon name="chevron-down" width={16} height={16} />
                                 </span>

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

@@ -15,5 +15,10 @@
 
   "preview.title": "Preview",
   "preview.not-available": "Preview is not available",
-  "preview.close": "Close preview"
+  "preview.close": "Close preview",
+
+  "method-description.script": "For YQL-scripts combining DDL and DML. API call: schema.scripting",
+  "method-description.scan": "Read-only queries, potentially reading a lot of data. API call: table.ExecuteScan",
+  "method-description.data": "DML queries for changing and fetching data in serialization mode. API call: table.executeDataQuery",
+  "method-description.query": "Any queries. An experimental API call supposed to replace all existing methods. API Call: query.ExecuteScript"
 }

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

@@ -15,5 +15,10 @@
 
   "preview.title": "Предпросмотр",
   "preview.not-available": "Предпросмотр недоступен",
-  "preview.close": "Закрыть предпросмотр"
+  "preview.close": "Закрыть предпросмотр",
+
+  "method-description.script": "Для скриптов, совмещающих DDL и DML-конструкции. API call: schema.scripting",
+  "method-description.scan": "Только читающие запросы, потенциально читающие много данных. API call: table.ExecuteScan",
+  "method-description.data": "DML-запросы для изменения и выборки данных в режиме изоляции Serializable. API call: table.executeDataQuery",
+  "method-description.query": "Любые запросы. Экспериментальный перспективный метод, который в будущем заменит все остальные. API call: query.ExecuteScript"
 }