fix(QueryEditor): rename query modes (#449)

Author: artemmufazalov

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

@@ -24,12 +24,10 @@
     }
 
     &__mode-selector {
-        &__popup {
-            width: 120px;
-        }
+        $b: &;
 
         &__button {
-            width: 120px;
+            width: 189px;
             margin-left: 2px;
         }
 
@@ -38,7 +36,24 @@
             justify-content: space-between;
             align-items: center;
 
-            width: 100px;
+            width: 163px;
+        }
+
+        &__popup {
+            width: 189px;
+
+            &_extended {
+                width: 241px;
+            }
+        }
+
+        &_extended {
+            #{$b}__button {
+                width: 241px;
+            }
+            #{$b}__button-content {
+                width: 215px;
+            }
         }
     }
 }

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

@@ -19,15 +19,15 @@ const queryModeSelectorPopupQa = 'query-mode-selector-popup';
 const b = block('ydb-query-editor-controls');
 
 const OldQueryModeSelectorTitles = {
-    [QUERY_MODES.script]: 'Script',
+    [QUERY_MODES.script]: 'YQL Script',
     [QUERY_MODES.scan]: 'Scan',
 } as const;
 
 const QueryModeSelectorTitles = {
-    [QUERY_MODES.script]: 'Script',
+    [QUERY_MODES.script]: 'YQL Script',
     [QUERY_MODES.scan]: 'Scan',
     [QUERY_MODES.data]: 'Data',
-    [QUERY_MODES.query]: 'Query',
+    [QUERY_MODES.query]: 'YQL - QueryService',
 } as const;
 
 interface QueryEditorControlsProps {
@@ -102,23 +102,31 @@ export const QueryEditorControls = ({
                 >
                     Explain
                 </Button>
-                <DropdownMenu
-                    items={querySelectorMenuItems}
-                    popupProps={{
-                        className: b('mode-selector__popup'),
-                        qa: queryModeSelectorPopupQa,
-                    }}
-                    switcher={
-                        <Button className={b('mode-selector__button')} qa={queryModeSelectorQa}>
-                            <span className={b('mode-selector__button-content')}>
-                                {`${i18n('controls.query-mode-selector_type')} ${
-                                    QueryModeSelectorTitles[queryMode]
-                                }`}
-                                <Icon name="chevron-down" width={16} height={16} />
-                            </span>
-                        </Button>
-                    }
-                />
+                <div
+                    className={b('mode-selector', {
+                        extended: enableAdditionalQueryModes,
+                    })}
+                >
+                    <DropdownMenu
+                        items={querySelectorMenuItems}
+                        popupProps={{
+                            className: b('mode-selector__popup', {
+                                extended: enableAdditionalQueryModes,
+                            }),
+                            qa: queryModeSelectorPopupQa,
+                        }}
+                        switcher={
+                            <Button className={b('mode-selector__button')} qa={queryModeSelectorQa}>
+                                <span className={b('mode-selector__button-content')}>
+                                    {`${i18n('controls.query-mode-selector_type')} ${
+                                        QueryModeSelectorTitles[queryMode]
+                                    }`}
+                                    <Icon name="chevron-down" width={16} height={16} />
+                                </span>
+                            </Button>
+                        }
+                    />
+                </div>
             </div>
             <SaveQuery
                 savedQueries={savedQueries}

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

@@ -1,5 +1,5 @@
 {
-  "controls.query-mode-selector_type": "Type:",
+  "controls.query-mode-selector_type": "Query type:",
   "tabs.newQuery": "New query",
   "tabs.history": "History",
   "tabs.saved": "Saved",

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

@@ -1,5 +1,5 @@
 {
-  "controls.query-mode-selector_type": "Тип:",
+  "controls.query-mode-selector_type": "Тип запроса:",
   "tabs.newQuery": "Новый запрос",
   "tabs.history": "История",
   "tabs.saved": "Сохраненные",

src/containers/UserSettings/i18n/en.json

@@ -16,5 +16,5 @@
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
-  "settings.enableAdditionalQueryModes.popover": "Adds 'Data' and 'Query' modes. May not work on some versions"
+  "settings.enableAdditionalQueryModes.popover": "Adds 'Data' and 'YQL - QueryService' modes. May not work on some versions"
 }

src/containers/UserSettings/i18n/ru.json

@@ -16,5 +16,5 @@
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
-  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data' и 'Query'. Может работать некорректно на некоторых версиях"
+  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data' и 'YQL - QueryService'. Может работать некорректно на некоторых версиях"
 }

tests/suites/tenant/queryEditor/QueryEditor.ts

@@ -3,7 +3,7 @@ import {Locator, Page} from '@playwright/test';
 import {BaseModel} from '../../../models/BaseModel';
 import {selectContentTable} from '../../../utils/selectContentTable';
 
-type QueryMode = 'Script' | 'Scan';
+type QueryMode = 'YQL Script' | 'Scan';
 type ExplainResultType = 'Schema' | 'JSON' | 'AST';
 
 const queryModeSelectorQa = 'query-mode-selector';

tests/suites/tenant/queryEditor/queryEditor.test.ts

@@ -21,7 +21,7 @@ test.describe('Test Query Editor', async () => {
 
     test('Can run scipt', async ({page}) => {
         const queryEditor = new QueryEditor(page);
-        await queryEditor.run(testQuery, 'Script');
+        await queryEditor.run(testQuery, 'YQL Script');
 
         await expect(queryEditor.getRunResultTable()).toBeVisible();
     });
@@ -35,7 +35,7 @@ test.describe('Test Query Editor', async () => {
 
     test('Can get explain script', async ({page}) => {
         const queryEditor = new QueryEditor(page);
-        await queryEditor.explain(testQuery, 'Script');
+        await queryEditor.explain(testQuery, 'YQL Script');
 
         const explainSchema = await queryEditor.getExplainResult('Schema');
         await expect(explainSchema).toBeVisible();