ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.d.ts

@@ -0,0 +1,8 @@
+import type { TEvDescribeSchemeResult } from '../../../../types/api/schema';
+import './ExternalDataSource.scss';
+export declare const ExternalDataSourceInfo: ({ data }: {
+    data?: TEvDescribeSchemeResult | undefined;
+}) => JSX.Element;
+export declare const ExternalDataSourceSummary: ({ data }: {
+    data?: TEvDescribeSchemeResult | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { InfoViewer } 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) => {
+    var _a, _b, _c, _d;
+    return [
+        {
+            label: i18n('external-objects.source-type'),
+            value: (_b = (_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.ExternalDataSourceDescription) === null || _b === void 0 ? void 0 : _b.SourceType,
+        },
+        formatCommonItem('CreateStep', (_d = (_c = data.PathDescription) === null || _c === void 0 ? void 0 : _c.Self) === null || _d === void 0 ? void 0 : _d.CreateStep),
+    ];
+};
+const prepareExternalDataSourceInfo = (data) => {
+    var _a;
+    const { Location, Auth } = ((_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.ExternalDataSourceDescription) || {};
+    return [
+        ...prepareExternalDataSourceSummary(data),
+        {
+            label: i18n('external-objects.location'),
+            value: (_jsx(EntityStatus, { name: Location, showStatus: false, hasClipboardButton: true, clipboardButtonAlwaysVisible: true, className: b('location') })),
+        },
+        {
+            label: i18n('external-objects.auth-method'),
+            value: (Auth === null || Auth === void 0 ? void 0 : Auth.ServiceAccount)
+                ? i18n('external-objects.auth-method.service-account')
+                : i18n('external-objects.auth-method.none'),
+        },
+    ];
+};
+const ExternalDataSource = ({ data, prepareData }) => {
+    const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
+    const { error: schemaError } = useTypedSelector((state) => state.schema);
+    if (schemaError) {
+        return _jsx(ResponseError, { error: schemaError });
+    }
+    if (!data) {
+        return _jsxs("div", Object.assign({ className: "error" }, { children: ["No ", entityName, " data"] }));
+    }
+    return _jsx(InfoViewer, { title: entityName, info: prepareData(data) });
+};
+export const ExternalDataSourceInfo = ({ data }) => {
+    return _jsx(ExternalDataSource, { data: data, prepareData: prepareExternalDataSourceInfo });
+};
+export const ExternalDataSourceSummary = ({ data }) => {
+    return _jsx(ExternalDataSource, { data: data, prepareData: prepareExternalDataSourceSummary });
+};

package/dist/containers/Tenant/Info/ExternalTable/ExternalTable.d.ts

@@ -0,0 +1,8 @@
+import type { TEvDescribeSchemeResult } from '../../../../types/api/schema';
+import './ExternalTable.scss';
+export declare const ExternalTableInfo: ({ data }: {
+    data?: TEvDescribeSchemeResult | undefined;
+}) => JSX.Element;
+export declare const ExternalTableSummary: ({ data }: {
+    data?: TEvDescribeSchemeResult | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocation } from 'react-router';
+import block from 'bem-cn-lite';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { createExternalUILink, parseQuery } from '../../../../routes';
+import { formatCommonItem } from '../../../../components/InfoViewer/formatters';
+import { InfoViewer } 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, pathToDataSource) => {
+    var _a, _b;
+    const { CreateStep } = ((_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.Self) || {};
+    const { SourceType, DataSourcePath } = ((_b = data.PathDescription) === null || _b === void 0 ? void 0 : _b.ExternalTableDescription) || {};
+    const dataSourceName = DataSourcePath === null || DataSourcePath === void 0 ? void 0 : DataSourcePath.split('/').pop();
+    return [
+        { label: i18n('external-objects.source-type'), value: SourceType },
+        formatCommonItem('CreateStep', CreateStep),
+        {
+            label: i18n('external-objects.data-source'),
+            value: DataSourcePath && (_jsx("span", Object.assign({ title: DataSourcePath }, { children: _jsx(ExternalLinkWithIcon, { title: dataSourceName || '', url: pathToDataSource }) }))),
+        },
+    ];
+};
+const prepareExternalTableInfo = (data, pathToDataSource) => {
+    var _a, _b;
+    const location = (_b = (_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.ExternalTableDescription) === null || _b === void 0 ? void 0 : _b.Location;
+    return [
+        ...prepareExternalTableSummary(data, pathToDataSource),
+        {
+            label: i18n('external-objects.location'),
+            value: (_jsx(EntityStatus, { name: location, showStatus: false, hasClipboardButton: true, clipboardButtonAlwaysVisible: true, className: b('location') })),
+        },
+    ];
+};
+const ExternalTable = ({ data, prepareData }) => {
+    var _a, _b;
+    const location = useLocation();
+    const query = parseQuery(location);
+    const pathToDataSource = createExternalUILink(Object.assign(Object.assign({}, query), { schema: (_b = (_a = data === null || data === void 0 ? void 0 : data.PathDescription) === null || _a === void 0 ? void 0 : _a.ExternalTableDescription) === null || _b === void 0 ? void 0 : _b.DataSourcePath }));
+    const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
+    const { error: schemaError } = useTypedSelector((state) => state.schema);
+    if (schemaError) {
+        return _jsx(ResponseError, { error: schemaError });
+    }
+    if (!data) {
+        return _jsxs("div", Object.assign({ className: "error" }, { children: ["No ", entityName, " data"] }));
+    }
+    return _jsx(InfoViewer, { title: entityName, info: prepareData(data, pathToDataSource) });
+};
+export const ExternalTableInfo = ({ data }) => {
+    return _jsx(ExternalTable, { data: data, prepareData: prepareExternalTableInfo });
+};
+export const ExternalTableSummary = ({ data }) => {
+    return _jsx(ExternalTable, { data: data, prepareData: prepareExternalTableSummary });
+};

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

@@ -1,8 +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"
+    "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.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

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

@@ -0,0 +1,7 @@
+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

@@ -1,8 +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": "Сервисный аккаунт"
+    "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/ObjectGeneral/ObjectGeneral.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { EPathType } from '../../../types/api/schema';
+import type { AdditionalTenantsProps, AdditionalNodesProps } from '../../../types/additionalProps';
+import './ObjectGeneral.scss';
+interface ObjectGeneralProps {
+    type?: EPathType;
+    additionalTenantProps?: AdditionalTenantsProps;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+declare function ObjectGeneral(props: ObjectGeneralProps): JSX.Element | null;
+export default ObjectGeneral;

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocation } from 'react-router';
+import cn from 'bem-cn-lite';
+import { useThemeValue } from '@gravity-ui/uikit';
+import { TENANT_PAGES_IDS } from '../../../store/reducers/tenant/constants';
+import { useSetting } from '../../../utils/hooks';
+import { TENANT_INITIAL_PAGE_KEY } from '../../../utils/constants';
+import { parseQuery } from '../../../routes';
+import { Query } from '../Query/Query';
+import Diagnostics from '../Diagnostics/Diagnostics';
+import './ObjectGeneral.scss';
+const b = cn('object-general');
+function ObjectGeneral(props) {
+    const location = useLocation();
+    const theme = useThemeValue();
+    const [initialPage] = useSetting(TENANT_INITIAL_PAGE_KEY);
+    const queryParams = parseQuery(location);
+    const { name: tenantName, tenantPage = initialPage } = queryParams;
+    const renderTabContent = () => {
+        const { type, additionalTenantProps, additionalNodesProps } = props;
+        switch (tenantPage) {
+            case TENANT_PAGES_IDS.query: {
+                return _jsx(Query, { path: tenantName, theme: theme, type: type });
+            }
+            default: {
+                return (_jsx(Diagnostics, { type: type, additionalTenantProps: additionalTenantProps, additionalNodesProps: additionalNodesProps }));
+            }
+        }
+    };
+    const renderContent = () => {
+        if (!tenantName) {
+            return null;
+        }
+        return _jsx("div", Object.assign({ className: b() }, { children: renderTabContent() }));
+    };
+    return renderContent();
+}
+export default ObjectGeneral;

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { EPathSubType, EPathType } from '../../../types/api/schema';
+import './ObjectSummary.scss';
+interface ObjectSummaryProps {
+    type?: EPathType;
+    subType?: EPathSubType;
+    onCollapseSummary: VoidFunction;
+    onExpandSummary: VoidFunction;
+    isCollapsed: boolean;
+}
+export declare function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummary, isCollapsed, }: ObjectSummaryProps): JSX.Element | null;
+export {};

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpPopover } from '@gravity-ui/components';
+import { Button, Tabs } from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import qs from 'qs';
+import React, { useEffect, useReducer } from 'react';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+import { ClipboardButton } from '../../../components/ClipboardButton';
+import { Icon } from '../../../components/Icon';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+import { CDCStreamOverview, PersQueueGroupOverview, } from '../../../components/InfoViewer/schemaOverview';
+import { Loader } from '../../../components/Loader';
+import SplitPane from '../../../components/SplitPane';
+import routes, { createHref } from '../../../routes';
+import { setShowPreview } from '../../../store/reducers/schema/schema';
+import { TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, TENANT_SUMMARY_TABS_IDS, } from '../../../store/reducers/tenant/constants';
+import { setQueryTab, setSummaryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
+import { EPathType, } from '../../../types/api/schema';
+import { DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED, DEFAULT_SIZE_TENANT_SUMMARY_KEY, } from '../../../utils/constants';
+import { formatDateTime } from '../../../utils/dataFormatters/dataFormatters';
+import { useTypedSelector } from '../../../utils/hooks';
+import { Acl } from '../Acl/Acl';
+import i18n from '../i18n';
+import { ExternalDataSourceSummary } from '../Info/ExternalDataSource/ExternalDataSource';
+import { ExternalTableSummary } from '../Info/ExternalTable/ExternalTable';
+import { SchemaTree } from '../Schema/SchemaTree/SchemaTree';
+import { SchemaViewer } from '../Schema/SchemaViewer/SchemaViewer';
+import { TenantTabsGroups, TENANT_INFO_TABS, TENANT_SCHEMA_TAB } from '../TenantPages';
+import { PaneVisibilityActionTypes, PaneVisibilityToggleButtons, paneVisibilityToggleReducerCreator, } from '../utils/paneVisibilityToggleHelpers';
+import { isColumnEntityType, isExternalTable, isIndexTable, isTableType } from '../utils/schema';
+import './ObjectSummary.scss';
+const b = cn('object-summary');
+const getTenantCommonInfoState = () => {
+    const collapsed = Boolean(localStorage.getItem(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED));
+    return {
+        triggerExpand: false,
+        triggerCollapse: false,
+        collapsed,
+    };
+};
+function prepareOlapTableSchema(tableSchema = {}) {
+    const { Name, Schema } = tableSchema;
+    if (Schema) {
+        const { Columns, KeyColumnNames } = Schema;
+        const KeyColumnIds = KeyColumnNames === null || KeyColumnNames === void 0 ? void 0 : KeyColumnNames.map((name) => {
+            const column = Columns === null || Columns === void 0 ? void 0 : Columns.find((el) => el.Name === name);
+            return column === null || column === void 0 ? void 0 : column.Id;
+        }).filter((id) => id !== undefined);
+        return {
+            Columns,
+            KeyColumnNames,
+            Name,
+            KeyColumnIds,
+        };
+    }
+    return {
+        Name,
+    };
+}
+export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummary, isCollapsed, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const dispatch = useDispatch();
+    const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED), undefined, getTenantCommonInfoState);
+    const { data, currentSchemaPath, currentSchema: currentItem = {}, loading: loadingSchema, } = useTypedSelector((state) => state.schema);
+    const { summaryTab = TENANT_SUMMARY_TABS_IDS.overview } = useTypedSelector((state) => state.tenant);
+    const location = useLocation();
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+    const { name: tenantName } = queryParams;
+    const pathData = tenantName ? (_b = (_a = data[tenantName.toString()]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self : undefined;
+    const currentObjectData = currentSchemaPath ? data[currentSchemaPath] : undefined;
+    const currentSchemaData = (_c = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _c === void 0 ? void 0 : _c.Self;
+    let keyColumnIds;
+    let columns;
+    if (isTableType(type) && isColumnEntityType(type)) {
+        const description = (_d = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _d === void 0 ? void 0 : _d.ColumnTableDescription;
+        const columnTableSchema = prepareOlapTableSchema(description);
+        keyColumnIds = columnTableSchema.KeyColumnIds;
+        columns = columnTableSchema.Columns;
+    }
+    else if (isExternalTable(type)) {
+        columns = (_f = (_e = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _e === void 0 ? void 0 : _e.ExternalTableDescription) === null || _f === void 0 ? void 0 : _f.Columns;
+    }
+    else {
+        keyColumnIds = (_h = (_g = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _g === void 0 ? void 0 : _g.Table) === null || _h === void 0 ? void 0 : _h.KeyColumnIds;
+        columns = (_k = (_j = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _j === void 0 ? void 0 : _j.Table) === null || _k === void 0 ? void 0 : _k.Columns;
+    }
+    useEffect(() => {
+        const isTable = isTableType(type);
+        if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === summaryTab)) {
+            dispatch(setSummaryTab(TENANT_SUMMARY_TABS_IDS.overview));
+        }
+    }, [dispatch, type, summaryTab]);
+    const renderTabs = () => {
+        const isTable = isTableType(type);
+        const tabsItems = isTable ? [...TENANT_INFO_TABS, ...TENANT_SCHEMA_TAB] : TENANT_INFO_TABS;
+        return (_jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", items: tabsItems, activeTab: summaryTab, wrapTo: ({ id }, node) => {
+                    const path = createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { name: tenantName, [TenantTabsGroups.summaryTab]: id }));
+                    return (_jsx(Link, Object.assign({ to: path, className: b('tab') }, { children: node }), id));
+                }, allowNotSelected: true }) })));
+    };
+    const renderObjectOverview = () => {
+        var _a;
+        // verbose mapping to guarantee a correct render for new path types
+        // TS will error when a new type is added but not mapped here
+        const pathTypeToComponent = {
+            [EPathType.EPathTypeInvalid]: undefined,
+            [EPathType.EPathTypeDir]: undefined,
+            [EPathType.EPathTypeTable]: undefined,
+            [EPathType.EPathTypeSubDomain]: undefined,
+            [EPathType.EPathTypeTableIndex]: undefined,
+            [EPathType.EPathTypeExtSubDomain]: undefined,
+            [EPathType.EPathTypeColumnStore]: undefined,
+            [EPathType.EPathTypeColumnTable]: undefined,
+            [EPathType.EPathTypeCdcStream]: () => _jsx(CDCStreamOverview, { data: currentObjectData }),
+            [EPathType.EPathTypePersQueueGroup]: () => (_jsx(PersQueueGroupOverview, { data: currentObjectData })),
+            [EPathType.EPathTypeExternalTable]: () => (_jsx(ExternalTableSummary, { data: currentObjectData })),
+            [EPathType.EPathTypeExternalDataSource]: () => (_jsx(ExternalDataSourceSummary, { data: currentObjectData })),
+        };
+        let component = (currentSchemaData === null || currentSchemaData === void 0 ? void 0 : currentSchemaData.PathType) && ((_a = pathTypeToComponent[currentSchemaData.PathType]) === null || _a === void 0 ? void 0 : _a.call(pathTypeToComponent));
+        if (!component) {
+            const startTimeInMilliseconds = Number(currentSchemaData === null || currentSchemaData === void 0 ? void 0 : currentSchemaData.CreateStep);
+            let createTime = '';
+            if (startTimeInMilliseconds) {
+                createTime = formatDateTime(startTimeInMilliseconds);
+            }
+            component = _jsx(InfoViewer, { info: [{ label: 'Create time', value: createTime }] });
+        }
+        return _jsx("div", Object.assign({ className: b('overview-wrapper') }, { children: component }));
+    };
+    const renderLoader = () => {
+        // If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
+        return (_jsx("div", { children: _jsx(Loader, {}) }));
+    };
+    const renderTabContent = () => {
+        switch (summaryTab) {
+            case TENANT_SUMMARY_TABS_IDS.acl: {
+                return _jsx(Acl, {});
+            }
+            case TENANT_SUMMARY_TABS_IDS.schema: {
+                return loadingSchema ? (renderLoader()) : (_jsx("div", Object.assign({ className: b('schema') }, { children: _jsx(SchemaViewer, { keyColumnIds: keyColumnIds, columns: columns, type: type }) })));
+            }
+            default: {
+                return renderObjectOverview();
+            }
+        }
+    };
+    const renderTree = () => {
+        return (_jsxs("div", Object.assign({ className: b('tree-wrapper') }, { children: [_jsx("div", Object.assign({ className: b('tree-header') }, { children: i18n('summary.navigation') })), _jsx("div", Object.assign({ className: b('tree') }, { children: pathData && (_jsx(SchemaTree, { rootPath: tenantName, 
+                        // for the root pathData.Name contains the same string as tenantName,
+                        // but without the leading slash
+                        rootName: pathData.Name || String(tenantName), rootType: pathData.PathType, currentPath: currentSchemaPath })) }))] })));
+    };
+    const onCollapseInfoHandler = () => {
+        dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
+    };
+    const onExpandInfoHandler = () => {
+        dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+    };
+    const onSplitStartDragAdditional = () => {
+        dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.clear);
+    };
+    const onOpenPreview = () => {
+        dispatch(setShowPreview(true));
+        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    };
+    const renderCommonInfoControls = () => {
+        const showPreview = isTableType(type) && !isIndexTable(subType);
+        return (_jsxs(React.Fragment, { children: [showPreview && (_jsx(Button, Object.assign({ view: "flat-secondary", onClick: onOpenPreview, title: i18n('summary.showPreview') }, { children: _jsx(Icon, { name: "tablePreview", viewBox: '0 0 16 16', height: 16, width: 16 }) }))), currentSchemaPath && (_jsx(ClipboardButton, { text: currentSchemaPath, view: "flat-secondary", title: i18n('summary.copySchemaPath') })), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseInfoHandler, onExpand: onExpandInfoHandler, isCollapsed: commonInfoVisibilityState.collapsed, initialDirection: "bottom" })] }));
+    };
+    const renderEntityTypeBadge = () => {
+        const { Status, Reason } = currentItem;
+        let message;
+        if (!type && Status && Reason) {
+            message = `${Status}: ${Reason}`;
+        }
+        return type ? (_jsx("div", Object.assign({ className: b('entity-type') }, { children: type.replace('EPathType', '') }))) : (_jsx("div", Object.assign({ className: b('entity-type', { error: true }) }, { children: _jsx(HelpPopover, { content: message, offset: { left: 0 } }) })));
+    };
+    const renderContent = () => {
+        if (!tenantName) {
+            return null;
+        }
+        return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx("div", Object.assign({ className: b({ hidden: isCollapsed }) }, { children: _jsxs(SplitPane, Object.assign({ direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_TENANT_SUMMARY_KEY, onSplitStartDragAdditional: onSplitStartDragAdditional, triggerCollapse: commonInfoVisibilityState.triggerCollapse, triggerExpand: commonInfoVisibilityState.triggerExpand, minSize: [200, 52], collapsedSizes: [100, 0] }, { children: [currentSchemaPath ? renderTree() : renderLoader(), _jsxs("div", Object.assign({ className: b('info') }, { children: [_jsxs("div", Object.assign({ className: b('sticky-top') }, { children: [_jsxs("div", Object.assign({ className: b('info-header') }, { children: [_jsxs("div", Object.assign({ className: b('info-title') }, { children: [renderEntityTypeBadge(), _jsx("div", Object.assign({ className: b('path-name') }, { children: currentSchemaPath }))] })), _jsx("div", Object.assign({ className: b('info-controls') }, { children: renderCommonInfoControls() }))] })), renderTabs()] })), renderTabContent()] }))] })) })), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseSummary, onExpand: onExpandSummary, isCollapsed: isCollapsed, initialDirection: "left", className: b('action-button') })] })));
+    };
+    return renderContent();
+}

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { IQueryResult, QueryErrorResponse } from '../../../../types/store/query';
+import './ExecuteResult.scss';
+interface ExecuteResultProps {
+    data: IQueryResult | undefined;
+    stats: IQueryResult['stats'] | undefined;
+    error: string | QueryErrorResponse | undefined;
+    isResultsCollapsed?: boolean;
+    onCollapseResults: VoidFunction;
+    onExpandResults: VoidFunction;
+}
+export declare function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }: ExecuteResultProps): JSX.Element;
+export {};

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioButton, Tabs } from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import React, { useEffect, useState } from 'react';
+import JSONTree from 'react-json-inspector';
+import { useDispatch } from 'react-redux';
+import { ClipboardButton } from '../../../../components/ClipboardButton';
+import Divider from '../../../../components/Divider/Divider';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatus';
+import { QueryResultTable } from '../../../../components/QueryResultTable/QueryResultTable';
+import { disableFullscreen } from '../../../../store/reducers/fullscreen';
+import { getArray } from '../../../../utils';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { prepareQueryError } from '../../../../utils/query';
+import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
+import { ResultIssues } from '../Issues/Issues';
+import { QueryDuration } from '../QueryDuration/QueryDuration';
+import { getPreparedResult } from '../utils/getPreparedResult';
+import './ExecuteResult.scss';
+const b = cn('ydb-query-execute-result');
+const resultOptionsIds = {
+    result: 'result',
+    stats: 'stats',
+};
+const resultOptions = [
+    { value: resultOptionsIds.result, content: 'Result' },
+    { value: resultOptionsIds.stats, content: 'Stats' },
+];
+export function ExecuteResult({ data, stats, error, isResultsCollapsed, onCollapseResults, onExpandResults, }) {
+    var _a, _b, _c;
+    const [selectedResultSet, setSelectedResultSet] = useState(0);
+    const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
+    const isFullscreen = useTypedSelector((state) => state.fullscreen);
+    const dispatch = useDispatch();
+    const resultsSetsCount = (_a = data === null || data === void 0 ? void 0 : data.resultSets) === null || _a === void 0 ? void 0 : _a.length;
+    const isMulti = resultsSetsCount && resultsSetsCount > 0;
+    const currentResult = isMulti ? (_b = data === null || data === void 0 ? void 0 : data.resultSets) === null || _b === void 0 ? void 0 : _b[selectedResultSet].result : data === null || data === void 0 ? void 0 : data.result;
+    const currentColumns = isMulti ? (_c = data === null || data === void 0 ? void 0 : data.resultSets) === null || _c === void 0 ? void 0 : _c[selectedResultSet].columns : data === null || data === void 0 ? void 0 : data.columns;
+    const textResults = getPreparedResult(currentResult);
+    const copyDisabled = !textResults.length;
+    useEffect(() => {
+        return () => {
+            dispatch(disableFullscreen());
+        };
+    }, [dispatch]);
+    const onSelectSection = (value) => {
+        setActiveSection(value);
+    };
+    const renderResultTable = (result, columns) => {
+        return _jsx(QueryResultTable, { data: result, columns: columns, settings: { sortable: false } });
+    };
+    const renderContent = () => {
+        return (_jsxs(_Fragment, { children: [isMulti && resultsSetsCount > 1 && (_jsx("div", { children: _jsx(Tabs, { className: b('result-tabs'), size: "l", items: getArray(resultsSetsCount).map((item) => ({
+                            id: String(item),
+                            title: `Result #${item + 1}`,
+                        })), activeTab: String(selectedResultSet), onSelectTab: (tabId) => setSelectedResultSet(Number(tabId)) }) })), _jsx("div", Object.assign({ className: b('result') }, { children: renderResultTable(currentResult, currentColumns) }))] }));
+    };
+    const renderClipboardButton = () => {
+        return (_jsx(ClipboardButton, { text: textResults, view: "flat-secondary", title: "Copy results", disabled: copyDisabled }));
+    };
+    const renderStats = () => {
+        const content = (_jsx(JSONTree, { data: stats, isExpanded: () => true, className: b('inspector'), searchOptions: {
+                debounceTime: 300,
+            } }));
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", Object.assign({ className: b('inspector', { fullscreen: true }) }, { children: content })) }))] }));
+    };
+    const renderResult = () => {
+        const content = renderContent();
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", Object.assign({ className: b('result-fullscreen-wrapper') }, { children: content })) }))] }));
+    };
+    const renderIssues = () => {
+        var _a;
+        if (!error) {
+            return null;
+        }
+        if (typeof error === 'object' && ((_a = error.data) === null || _a === void 0 ? void 0 : _a.issues) && Array.isArray(error.data.issues)) {
+            const content = _jsx(ResultIssues, { data: error.data });
+            return (_jsxs(React.Fragment, { children: [content, isFullscreen && (_jsx(Fullscreen, { children: _jsx("div", Object.assign({ className: b('result-fullscreen-wrapper', b('result')) }, { children: content })) }))] }));
+        }
+        const parsedError = typeof error === 'string' ? error : prepareQueryError(error);
+        return _jsx("div", Object.assign({ className: b('error') }, { children: parsedError }));
+    };
+    const renderResultSection = () => {
+        if (activeSection === resultOptionsIds.result && !error) {
+            return renderResult();
+        }
+        return (_jsxs("div", Object.assign({ className: b('result') }, { children: [activeSection === resultOptionsIds.stats && !error && renderStats(), renderIssues()] })));
+    };
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsxs("div", Object.assign({ className: b('controls-right') }, { children: [_jsx(QueryExecutionStatus, { error: error }), stats && !error && (_jsxs(React.Fragment, { children: [_jsx(QueryDuration, { duration: stats === null || stats === void 0 ? void 0 : stats.DurationUs }), _jsx(Divider, {}), _jsx(RadioButton, { options: resultOptions, value: activeSection, onUpdate: onSelectSection })] }))] })), _jsxs("div", Object.assign({ className: b('controls-left') }, { children: [renderClipboardButton(), _jsx(EnableFullscreenButton, {}), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseResults, onExpand: onExpandResults, isCollapsed: isResultsCollapsed, initialDirection: "bottom" })] }))] })), renderResultSection()] }));
+}

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.d.ts

@@ -0,0 +1 @@
+export function ExplainResult(props: any): JSX.Element;