ydb-embedded-ui 4.11.1 → 4.12.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [4.12.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.11.1...v4.12.0) (2023-08-02)
+
+
+### Features
+
+* **Query:** add explanation to the query method selector ([#492](https://github.com/ydb-platform/ydb-embedded-ui/issues/492)) ([ce6407c](https://github.com/ydb-platform/ydb-embedded-ui/commit/ce6407c254e9498d5b3bce60298905ea72621766))
+
+
+### Bug Fixes
+
+* fix tablet size ([#490](https://github.com/ydb-platform/ydb-embedded-ui/issues/490)) ([5a9b9d9](https://github.com/ydb-platform/ydb-embedded-ui/commit/5a9b9d955a882b1191502f5bac8eff5cf8638a52))
+* **Search:** add minimum width to Search ([#494](https://github.com/ydb-platform/ydb-embedded-ui/issues/494)) ([2add1dc](https://github.com/ydb-platform/ydb-embedded-ui/commit/2add1dcb3c8a76297ab35600e6d8a8772a411b1d))
+
 ## [4.11.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.11.0...v4.11.1) (2023-07-27)
 
 

package/dist/components/Search/Search.scss

@@ -0,0 +1,3 @@
+.ydb-search {
+    min-width: 100px;
+}

package/dist/components/Search/Search.tsx

@@ -1,7 +1,12 @@
 import {useRef, useEffect, useState} from 'react';
+import cn from 'bem-cn-lite';
 
 import {TextInput} from '@gravity-ui/uikit';
 
+import './Search.scss';
+
+const b = cn('ydb-search');
+
 interface SearchProps {
     onChange: (value: string) => void;
     value?: string;
@@ -44,7 +49,7 @@ export const Search = ({
         <TextInput
             hasClear
             autoFocus
-            className={className}
+            className={b(null, className)}
             placeholder={placeholder}
             value={searchValue}
             onUpdate={onSearchValueChange}

package/dist/components/Tablet/Tablet.scss

@@ -2,7 +2,7 @@
     display: flex;
     justify-content: center;
 
-    width: 18px;
+    width: 23px;
     height: 18px;
 
     font-size: 10px;

package/dist/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;
+    }
 }

package/dist/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>

package/dist/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"
 }

package/dist/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"
 }

package/dist/utils/constants.ts

@@ -1,5 +1,7 @@
 import DataTable from '@gravity-ui/react-data-table';
 
+import {EType} from '../types/api/tablet';
+
 const SECOND = 1000;
 
 export const AUTO_RELOAD_INTERVAL = 10 * SECOND;
@@ -40,17 +42,18 @@ export const TABLET_COLORS = {
 };
 
 export const TABLET_SYMBOLS = {
-    OldTxProxy: 'P',
-    TxProxy: 'P',
-    BSController: 'BS',
-    Dummy: 'DY',
-    RTMRPartition: 'RP',
-    PersQueueReadBalancer: 'PB',
-    Cms: 'CM',
-    BlockStorePartition: 'BP',
-    BlockStoreVolume: 'BV',
-    Console: 'CN',
-    TenantSlotBroker: 'TB',
+    [EType.OldTxProxy]: 'P',
+    [EType.TxProxy]: 'P',
+    [EType.BSController]: 'BS',
+    [EType.Dummy]: 'DY',
+    [EType.RTMRPartition]: 'RP',
+    [EType.PersQueueReadBalancer]: 'PB',
+    [EType.Cms]: 'CM',
+    [EType.BlockStorePartition]: 'BP',
+    [EType.BlockStoreVolume]: 'BV',
+    [EType.Console]: 'CN',
+    [EType.TenantSlotBroker]: 'TB',
+    [EType.BlockStoreDiskRegistry]: 'BDR',
 };
 
 const isTabletType = (type: string): type is keyof typeof TABLET_SYMBOLS => type in TABLET_SYMBOLS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.11.1",
+  "version": "4.12.0",
   "files": [
     "dist"
   ],