ydb-embedded-ui 4.11.1 → 4.13.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [4.13.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.12.0...v4.13.0) (2023-08-04)
+
+
+### Features
+
+* info and summary tabs for external objects ([#493](https://github.com/ydb-platform/ydb-embedded-ui/issues/493)) ([88d9041](https://github.com/ydb-platform/ydb-embedded-ui/commit/88d9041f080f13046aeaf55765609dbc13b87285))
+
+
+### Bug Fixes
+
+* **SchemaTree:** add actions to external objects ([#497](https://github.com/ydb-platform/ydb-embedded-ui/issues/497)) ([5029579](https://github.com/ydb-platform/ydb-embedded-ui/commit/5029579796dd5fb985005f39e9ef8daf142366d0))
+* **SchemaTree:** set required query mode for tree actions ([#491](https://github.com/ydb-platform/ydb-embedded-ui/issues/491)) ([ccd1eda](https://github.com/ydb-platform/ydb-embedded-ui/commit/ccd1edac0d84357cd605c9d131c99890449d8bd8))
+
+## [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/InfoViewer/formatters/common.ts

@@ -3,13 +3,15 @@ import {formatDateTime} from '../../../utils';
 
 import {createInfoFormatter} from '../utils';
 
+import i18n from '../i18n';
+
 export const formatCommonItem = createInfoFormatter<TDirEntry>({
     values: {
         PathType: (value) => value?.substring('EPathType'.length),
         CreateStep: formatDateTime,
     },
     labels: {
-        PathType: 'Type',
-        CreateStep: 'Created',
+        PathType: i18n('common.type'),
+        CreateStep: i18n('common.created'),
     },
 });

package/dist/components/InfoViewer/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "common.created": "Created",
+  "common.type": "Type"
+}

package/dist/components/InfoViewer/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-components-info-viewer';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/components/InfoViewer/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "common.created": "Создано",
+  "common.type": "Тип"
+}

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/Diagnostics/Overview/Overview.tsx

@@ -27,6 +27,9 @@ import {
     isPathTypeWithTopic,
 } from '../../utils/schema';
 
+import {ExternalTableInfo} from '../../Info/ExternalTable/ExternalTable';
+import {ExternalDataSourceInfo} from '../../Info/ExternalDataSource/ExternalDataSource';
+
 import {TopicInfo} from './TopicInfo';
 import {ChangefeedInfo} from './ChangefeedInfo';
 import {TableInfo} from './TableInfo';
@@ -124,8 +127,8 @@ function Overview({type, tenantName}: OverviewProps) {
                 <ChangefeedInfo data={data} topic={additionalData?.[0]} />
             ),
             [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={data} />,
-            [EPathType.EPathTypeExternalTable]: undefined,
-            [EPathType.EPathTypeExternalDataSource]: undefined,
+            [EPathType.EPathTypeExternalTable]: () => <ExternalTableInfo data={data} />,
+            [EPathType.EPathTypeExternalDataSource]: () => <ExternalDataSourceInfo data={data} />,
         };
 
         return (

package/dist/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.scss

@@ -0,0 +1,5 @@
+.ydb-external-data-source-info {
+    &__location {
+        max-width: var(--tenant-object-info-max-value-width);
+    }
+}

package/dist/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx

@@ -0,0 +1,81 @@
+import block from 'bem-cn-lite';
+
+import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
+import {useTypedSelector} from '../../../../utils/hooks';
+
+import {InfoViewer, InfoViewerItem} from '../../../../components/InfoViewer';
+import {formatCommonItem} from '../../../../components/InfoViewer/formatters';
+import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
+
+import {getEntityName} from '../../utils';
+
+import i18n from '../i18n';
+import './ExternalDataSource.scss';
+
+const b = block('ydb-external-data-source-info');
+
+const prepareExternalDataSourceSummary = (data: TEvDescribeSchemeResult): InfoViewerItem[] => {
+    return [
+        {
+            label: i18n('external-objects.source-type'),
+            value: data.PathDescription?.ExternalDataSourceDescription?.SourceType,
+        },
+        formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep),
+    ];
+};
+
+const prepareExternalDataSourceInfo = (data: TEvDescribeSchemeResult): InfoViewerItem[] => {
+    const {Location, Auth} = data.PathDescription?.ExternalDataSourceDescription || {};
+
+    return [
+        ...prepareExternalDataSourceSummary(data),
+        {
+            label: i18n('external-objects.location'),
+            value: (
+                <EntityStatus
+                    name={Location}
+                    showStatus={false}
+                    hasClipboardButton
+                    clipboardButtonAlwaysVisible
+                    className={b('location')}
+                />
+            ),
+        },
+        {
+            label: i18n('external-objects.auth-method'),
+            value: Auth?.ServiceAccount
+                ? i18n('external-objects.auth-method.service-account')
+                : i18n('external-objects.auth-method.none'),
+        },
+    ];
+};
+
+interface ExternalDataSourceProps {
+    data?: TEvDescribeSchemeResult;
+    prepareData: (data: TEvDescribeSchemeResult) => InfoViewerItem[];
+}
+
+const ExternalDataSource = ({data, prepareData}: ExternalDataSourceProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
+    const {error: schemaError} = useTypedSelector((state) => state.schema);
+
+    if (schemaError) {
+        return <ResponseError error={schemaError} />;
+    }
+
+    if (!data) {
+        return <div className="error">No {entityName} data</div>;
+    }
+
+    return <InfoViewer title={entityName} info={prepareData(data)} />;
+};
+
+export const ExternalDataSourceInfo = ({data}: {data?: TEvDescribeSchemeResult}) => {
+    return <ExternalDataSource data={data} prepareData={prepareExternalDataSourceInfo} />;
+};
+
+export const ExternalDataSourceSummary = ({data}: {data?: TEvDescribeSchemeResult}) => {
+    return <ExternalDataSource data={data} prepareData={prepareExternalDataSourceSummary} />;
+};

package/dist/containers/Tenant/Info/ExternalTable/ExternalTable.scss

@@ -0,0 +1,5 @@
+.ydb-external-table-info {
+    &__location {
+        max-width: var(--tenant-object-info-max-value-width);
+    }
+}

package/dist/containers/Tenant/Info/ExternalTable/ExternalTable.tsx

@@ -0,0 +1,103 @@
+import {useLocation} from 'react-router';
+import block from 'bem-cn-lite';
+
+import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
+import {useTypedSelector} from '../../../../utils/hooks';
+import {createHref, parseQuery} from '../../../../routes';
+import {formatCommonItem} from '../../../../components/InfoViewer/formatters';
+import {InfoViewer, InfoViewerItem} from '../../../../components/InfoViewer';
+import {ExternalLinkWithIcon} from '../../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
+import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
+
+import {getEntityName} from '../../utils';
+
+import i18n from '../i18n';
+import './ExternalTable.scss';
+
+const b = block('ydb-external-table-info');
+
+const prepareExternalTableSummary = (
+    data: TEvDescribeSchemeResult,
+    pathToDataSource: string,
+): InfoViewerItem[] => {
+    const {CreateStep} = data.PathDescription?.Self || {};
+    const {SourceType, DataSourcePath} = data.PathDescription?.ExternalTableDescription || {};
+
+    const dataSourceName = DataSourcePath?.split('/').pop();
+
+    return [
+        {label: i18n('external-objects.source-type'), value: SourceType},
+        formatCommonItem('CreateStep', CreateStep),
+        {
+            label: i18n('external-objects.data-source'),
+            value: DataSourcePath && (
+                <span title={DataSourcePath}>
+                    <ExternalLinkWithIcon title={dataSourceName || ''} url={pathToDataSource} />
+                </span>
+            ),
+        },
+    ];
+};
+
+const prepareExternalTableInfo = (
+    data: TEvDescribeSchemeResult,
+    pathToDataSource: string,
+): InfoViewerItem[] => {
+    const location = data.PathDescription?.ExternalTableDescription?.Location;
+
+    return [
+        ...prepareExternalTableSummary(data, pathToDataSource),
+        {
+            label: i18n('external-objects.location'),
+            value: (
+                <EntityStatus
+                    name={location}
+                    showStatus={false}
+                    hasClipboardButton
+                    clipboardButtonAlwaysVisible
+                    className={b('location')}
+                />
+            ),
+        },
+    ];
+};
+
+interface ExternalTableProps {
+    data?: TEvDescribeSchemeResult;
+    prepareData: (data: TEvDescribeSchemeResult, pathToDataSource: string) => InfoViewerItem[];
+}
+
+const ExternalTable = ({data, prepareData}: ExternalTableProps) => {
+    const location = useLocation();
+    const query = parseQuery(location);
+
+    // embedded version could be located in some folder (e.g. host/some_folder/app_router_path)
+    // window.location has the full pathname, while location from router ignores path to project
+    const pathToDataSource = createHref(window.location.pathname, undefined, {
+        ...query,
+        schema: data?.PathDescription?.ExternalTableDescription?.DataSourcePath,
+    });
+
+    const entityName = getEntityName(data?.PathDescription);
+
+    const {error: schemaError} = useTypedSelector((state) => state.schema);
+
+    if (schemaError) {
+        return <ResponseError error={schemaError} />;
+    }
+
+    if (!data) {
+        return <div className="error">No {entityName} data</div>;
+    }
+
+    return <InfoViewer title={entityName} info={prepareData(data, pathToDataSource)} />;
+};
+
+export const ExternalTableInfo = ({data}: {data?: TEvDescribeSchemeResult}) => {
+    return <ExternalTable data={data} prepareData={prepareExternalTableInfo} />;
+};
+
+export const ExternalTableSummary = ({data}: {data?: TEvDescribeSchemeResult}) => {
+    return <ExternalTable data={data} prepareData={prepareExternalTableSummary} />;
+};

package/dist/containers/Tenant/Info/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "external-objects.source-type": "Source Type",
+  "external-objects.data-source": "Data Source",
+  "external-objects.location": "Location",
+  "external-objects.auth-method": "Auth Method",
+  "external-objects.auth-method.none": "None",
+  "external-objects.auth-method.service-account": "Service Account"
+}

package/dist/containers/Tenant/Info/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-tenant-objects-info';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Info/i18n/ru.json

@@ -0,0 +1,8 @@
+{
+  "external-objects.source-type": "Тип источника",
+  "external-objects.data-source": "Источник",
+  "external-objects.location": "Расположение",
+  "external-objects.auth-method": "Авторизация",
+  "external-objects.auth-method.none": "Нет",
+  "external-objects.auth-method.service-account": "Сервисный аккаунт"
+}

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -86,6 +86,10 @@
     &__info-controls {
         display: flex;
         gap: 4px;
+
+        .yc-button__text {
+            margin: 0 6px;
+        }
     }
 
     &__info-action-button {
@@ -148,8 +152,4 @@
             background-color: transparent;
         }
     }
-
-    .yc-button__text {
-        margin: 0 6px;
-    }
 }

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -41,6 +41,8 @@ import {
 import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
 import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
 import {Acl} from '../Acl/Acl';
+import {ExternalTableSummary} from '../Info/ExternalTable/ExternalTable';
+import {ExternalDataSourceSummary} from '../Info/ExternalDataSource/ExternalDataSource';
 
 import {TenantTabsGroups, TENANT_INFO_TABS, TENANT_SCHEMA_TAB} from '../TenantPages';
 import {
@@ -50,9 +52,10 @@ import {
 } from '../utils/paneVisibilityToggleHelpers';
 import {isColumnEntityType, isExternalTable, isIndexTable, isTableType} from '../utils/schema';
 
-import './ObjectSummary.scss';
 import i18n from '../i18n';
 
+import './ObjectSummary.scss';
+
 const b = cn('object-summary');
 
 const getInitialIsSummaryCollapsed = () => {
@@ -197,8 +200,12 @@ export function ObjectSummary({
             [EPathType.EPathTypePersQueueGroup]: () => (
                 <PersQueueGroupOverview data={currentObjectData} />
             ),
-            [EPathType.EPathTypeExternalTable]: undefined,
-            [EPathType.EPathTypeExternalDataSource]: undefined,
+            [EPathType.EPathTypeExternalTable]: () => (
+                <ExternalTableSummary data={currentObjectData} />
+            ),
+            [EPathType.EPathTypeExternalDataSource]: () => (
+                <ExternalDataSourceSummary data={currentObjectData} />
+            ),
         };
 
         let component =

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -24,12 +24,11 @@ import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
     SAVED_QUERIES_KEY,
-    QUERY_INITIAL_MODE_KEY,
     ENABLE_ADDITIONAL_QUERY_MODES,
     LAST_USED_QUERY_ACTION_KEY,
 } from '../../../../utils/constants';
-import {useSetting} from '../../../../utils/hooks';
-import {QUERY_ACTIONS, QUERY_MODES} from '../../../../utils/query';
+import {useSetting, useQueryModes} from '../../../../utils/hooks';
+import {QUERY_ACTIONS, QUERY_MODES, isNewQueryMode} from '../../../../utils/query';
 
 import {
     PaneVisibilityActionTypes,
@@ -91,13 +90,12 @@ function QueryEditor(props) {
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
 
     const [isResultLoaded, setIsResultLoaded] = useState(false);
-    const [queryMode, setQueryMode] = useSetting(QUERY_INITIAL_MODE_KEY);
+    const [queryMode, setQueryMode] = useQueryModes();
     const [enableAdditionalQueryModes] = useSetting(ENABLE_ADDITIONAL_QUERY_MODES);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
 
     useEffect(() => {
-        const isNewQueryMode = queryMode !== QUERY_MODES.script && queryMode !== QUERY_MODES.scan;
-        if (!enableAdditionalQueryModes && isNewQueryMode) {
+        if (isNewQueryMode(queryMode) && !enableAdditionalQueryModes) {
             setQueryMode(QUERY_MODES.script);
         }
     }, [enableAdditionalQueryModes, queryMode, setQueryMode]);

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/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -3,8 +3,9 @@ import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
 
-import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema/schema';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
+import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema/schema';
+import {useQueryModes} from '../../../../utils/hooks';
 
 import {isChildlessPathType, mapPathTypeToNavigationTreeType} from '../../utils/schema';
 import {getActions} from '../../utils/schemaActions';
@@ -21,6 +22,8 @@ export function SchemaTree(props: SchemaTreeProps) {
 
     const dispatch = useDispatch();
 
+    const [_, setQueryMode] = useQueryModes();
+
     const fetchPath = (path: string) =>
         window.api
             .getSchema({path}, {concurrentId: `NavigationTree.getSchema|${path}`})
@@ -71,7 +74,10 @@ export function SchemaTree(props: SchemaTreeProps) {
                 collapsed: false,
             }}
             fetchPath={fetchPath}
-            getActions={getActions(dispatch, handleActivePathUpdate)}
+            getActions={getActions(dispatch, {
+                setActivePath: handleActivePathUpdate,
+                setQueryMode,
+            })}
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}

package/dist/containers/Tenant/i18n/en.json

@@ -6,6 +6,16 @@
   "summary.showPreview": "Show preview",
   "summary.copySchemaPath": "Copy schema path",
 
-  "actions.copied" : "The path is copied to the clipboard",
-  "actions.notCopied" : "Couldn’t copy the path"
+  "actions.copied": "The path is copied to the clipboard",
+  "actions.notCopied": "Couldn’t copy the path",
+  "actions.externalTableSelectUnavailable": "Select query for external tables available only with 'YQL - QueryService' query mode. You need to turn in additional query modes in settings to enable it",
+
+  "actions.copyPath": "Copy path",
+  "actions.openPreview": "Open preview",
+  "actions.createTable": "Create table...",
+  "actions.createExternalTable": "Create external table...",
+  "actions.dropTable": "Drop table...",
+  "actions.alterTable": "Alter table...",
+  "actions.selectQuery": "Select query...",
+  "actions.upsertQuery": "Upsert query..."
 }

package/dist/containers/Tenant/i18n/ru.json

@@ -7,5 +7,15 @@
   "summary.copySchemaPath": "Скопировать путь",
 
   "actions.copied": "Путь успешно скопирован",
-  "actions.notCopied": "Не получилось скопировать путь"
+  "actions.notCopied": "Не получилось скопировать путь",
+  "actions.externalTableSelectUnavailable": "Select запрос для внешних таблиц доступен только в режиме 'YQL - QueryService'. Вам необходимо включить дополнительные режимы выполнения запросов в настройках",
+
+  "actions.copyPath": "Скопировать путь",
+  "actions.openPreview": "Открыть превью",
+  "actions.createTable": "Создать таблицу...",
+  "actions.createExternalTable": "Создать внешнюю таблицу...",
+  "actions.dropTable": "Удалить таблицу...",
+  "actions.alterTable": "Изменить таблицу...",
+  "actions.selectQuery": "Select запрос...",
+  "actions.upsertQuery": "Upsert запрос..."
 }

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -3,6 +3,8 @@ import copy from 'copy-to-clipboard';
 
 import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
+import type {QueryMode} from '../../../types/store/query';
+import type {SetQueryModeIfAvailable} from '../../../utils/hooks';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
@@ -34,23 +36,63 @@ const upsertQueryTemplate = (path: string) => {
 VALUES ( );`;
 };
 
+const dropExternalTableTemplate = (path: string) => {
+    return `DROP EXTERNAL TABLE \`${path}\`;`;
+};
+
+const createExternalTableTemplate = (path: string) => {
+    // Remove data source name from path
+    // to create table in the same folder with data source
+    const targetPath = path.split('/').slice(0, -1).join('/');
+
+    return `CREATE EXTERNAL TABLE \`${targetPath}/my_external_table\` (
+    column1 Int,
+    column2 Int
+) WITH (
+    DATA_SOURCE="${path}",
+    LOCATION="",
+    FORMAT="json_as_string",
+    \`file_pattern\`=""
+);`;
+};
+
+interface ActionsAdditionalEffects {
+    setQueryMode: SetQueryModeIfAvailable;
+    setActivePath: (path: string) => void;
+}
+
 const bindActions = (
     path: string,
     dispatch: Dispatch<any>,
-    setActivePath: (path: string) => void,
+    additionalEffects: ActionsAdditionalEffects,
 ) => {
-    const inputQuery = (tmpl: (path: string) => string) => () => {
-        dispatch(changeUserInput({input: tmpl(path)}));
-        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
-        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-        setActivePath(path);
-    };
+    const {setActivePath, setQueryMode} = additionalEffects;
+
+    const inputQuery =
+        (tmpl: (path: string) => string, mode?: QueryMode, setQueryModeErrorMessage?: string) =>
+        () => {
+            const isNewQueryModeSet = mode && setQueryMode(mode, setQueryModeErrorMessage);
+
+            if (!mode || isNewQueryModeSet) {
+                dispatch(changeUserInput({input: tmpl(path)}));
+                dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+                dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+                setActivePath(path);
+            }
+        };
 
     return {
-        createTable: inputQuery(createTableTemplate),
-        alterTable: inputQuery(alterTableTemplate),
+        createTable: inputQuery(createTableTemplate, 'script'),
+        alterTable: inputQuery(alterTableTemplate, 'script'),
         selectQuery: inputQuery(selectQueryTemplate),
         upsertQuery: inputQuery(upsertQueryTemplate),
+        createExternalTable: inputQuery(createExternalTableTemplate, 'script'),
+        dropExternalTable: inputQuery(dropExternalTableTemplate, 'script'),
+        selectQueryFromExternalTable: inputQuery(
+            selectQueryTemplate,
+            'query',
+            i18n('actions.externalTableSelectUnavailable'),
+        ),
         copyPath: () => {
             try {
                 copy(path);
@@ -79,27 +121,40 @@ const bindActions = (
 type ActionsSet = ReturnType<Required<NavigationTreeProps>['getActions']>;
 
 export const getActions =
-    (dispatch: Dispatch<any>, setActivePath: (path: string) => void) =>
+    (dispatch: Dispatch<any>, additionalEffects: ActionsAdditionalEffects) =>
     (path: string, type: NavigationTreeNodeType) => {
-        const actions = bindActions(path, dispatch, setActivePath);
-        const copyItem = {text: 'Copy path', action: actions.copyPath};
-        const openPreview = {text: 'Open preview', action: actions.openPreview};
-        const selectQuery = {text: 'Select query...', action: actions.selectQuery};
+        const actions = bindActions(path, dispatch, additionalEffects);
+        const copyItem = {text: i18n('actions.copyPath'), action: actions.copyPath};
+        const openPreview = {text: i18n('actions.openPreview'), action: actions.openPreview};
 
         const DIR_SET: ActionsSet = [
             [copyItem],
-            [{text: 'Create table...', action: actions.createTable}],
+            [{text: i18n('actions.createTable'), action: actions.createTable}],
         ];
         const TABLE_SET: ActionsSet = [
             [openPreview, copyItem],
             [
-                {text: 'Alter table...', action: actions.alterTable},
-                selectQuery,
-                {text: 'Upsert query...', action: actions.upsertQuery},
+                {text: i18n('actions.alterTable'), action: actions.alterTable},
+                {text: i18n('actions.selectQuery'), action: actions.selectQuery},
+                {text: i18n('actions.upsertQuery'), action: actions.upsertQuery},
+            ],
+        ];
+
+        const EXTERNAL_TABLE_SET = [
+            [openPreview, copyItem],
+            [
+                {
+                    text: i18n('actions.selectQuery'),
+                    action: actions.selectQueryFromExternalTable,
+                },
             ],
+            [{text: i18n('actions.dropTable'), action: actions.dropExternalTable}],
         ];
 
-        const EXTERNAL_TABLE_SET = [[openPreview, copyItem], [selectQuery]];
+        const EXTERNAL_DATA_SOURCE_SET = [
+            [copyItem],
+            [{text: i18n('actions.createExternalTable'), action: actions.createExternalTable}],
+        ];
 
         const JUST_COPY: ActionsSet = [copyItem];
 
@@ -118,7 +173,7 @@ export const getActions =
             index: JUST_COPY,
 
             external_table: EXTERNAL_TABLE_SET,
-            external_data_source: JUST_COPY,
+            external_data_source: EXTERNAL_DATA_SOURCE_SET,
         };
 
         return nodeTypeToActions[type];

package/dist/index.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './containers/App/App';
 import {Provider} from 'react-redux';
+
+import '@gravity-ui/uikit/styles/styles.scss';
+
+import App from './containers/App/App';
 import configureStore from './store';
 import reportWebVitals from './reportWebVitals';
-import '@gravity-ui/uikit/styles/styles.scss';
 import HistoryContext from './contexts/HistoryContext';
 
+import './styles/constants.scss';
+import './index.css';
+
 const {store, history} = configureStore();
 window.store = store;
 

package/dist/styles/constants.scss

@@ -0,0 +1,3 @@
+:root {
+    --tenant-object-info-max-value-width: 300px;
+}

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/dist/utils/hooks/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "useQueryModes.queryModeCannotBeSet": "Query mode \"{{mode}}\" cannot be set. You need to turn in additional query modes in settings to enable it"
+}

package/dist/utils/hooks/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-hooks';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/utils/hooks/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "useQueryModes.queryModeCannotBeSet": "Режим выполнения запроса \"{{mode}}\" недоступен. Вам необходимо включить дополнительные режимы выполнения запросов в настройках"
+}

package/dist/utils/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useAutofetcher';
 export * from './useTypedSelector';
 export * from './useSetting';
+export * from './useQueryModes';

package/dist/utils/hooks/useQueryModes.ts

@@ -0,0 +1,34 @@
+import type {QueryMode} from '../../types/store/query';
+import {ENABLE_ADDITIONAL_QUERY_MODES, QUERY_INITIAL_MODE_KEY} from '../constants';
+import {isNewQueryMode} from '../query';
+import createToast from '../createToast';
+import {useSetting} from './useSetting';
+import i18n from './i18n';
+
+export type SetQueryModeIfAvailable = (
+    value: QueryMode,
+    errorMessage?: string | undefined,
+) => boolean;
+
+export const useQueryModes = (): [QueryMode, SetQueryModeIfAvailable] => {
+    const [queryMode, setQueryMode] = useSetting<QueryMode>(QUERY_INITIAL_MODE_KEY);
+    const [enableAdditionalQueryModes] = useSetting<boolean>(ENABLE_ADDITIONAL_QUERY_MODES);
+
+    const setQueryModeIfAvailable: SetQueryModeIfAvailable = (value, errorMessage) => {
+        if (isNewQueryMode(value) && !enableAdditionalQueryModes) {
+            createToast({
+                name: 'QueryModeCannotBeSet',
+                title: errorMessage ?? i18n('useQueryModes.queryModeCannotBeSet', {mode: value}),
+                type: 'error',
+            });
+
+            return false;
+        } else {
+            setQueryMode(value);
+
+            return true;
+        }
+    };
+
+    return [queryMode, setQueryModeIfAvailable];
+};

package/dist/utils/query.ts

@@ -7,7 +7,7 @@ import type {
     QueryPlan,
     ScriptPlan,
 } from '../types/api/query';
-import type {IQueryResult, QueryErrorResponse} from '../types/store/query';
+import type {IQueryResult, QueryErrorResponse, QueryMode} from '../types/store/query';
 
 export const QUERY_ACTIONS = {
     execute: 'execute',
@@ -21,6 +21,10 @@ export const QUERY_MODES = {
     query: 'query',
 } as const;
 
+export const isNewQueryMode = (value: QueryMode) => {
+    return value !== QUERY_MODES.script && value !== QUERY_MODES.scan;
+};
+
 // eslint-disable-next-line complexity
 export const getColumnType = (type: string) => {
     switch (type.replace(/\?$/, '')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.11.1",
+  "version": "4.13.0",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.2.1"
+    "ydb-ui-components": "^3.2.2"
   },
   "scripts": {
     "start": "react-app-rewired start",