ydb-embedded-ui 4.10.1 → 4.11.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [4.11.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.11.0...v4.11.1) (2023-07-27)
+
+
+### Bug Fixes
+
+* **Issues:** fix types ([#488](https://github.com/ydb-platform/ydb-embedded-ui/issues/488)) ([e2fe731](https://github.com/ydb-platform/ydb-embedded-ui/commit/e2fe731ae23db6703f21179668582d5657de9550))
+
+## [4.11.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.10.1...v4.11.0) (2023-07-27)
+
+
+### Features
+
+* support external objects in schema tree ([#485](https://github.com/ydb-platform/ydb-embedded-ui/issues/485)) ([cf96f9a](https://github.com/ydb-platform/ydb-embedded-ui/commit/cf96f9af02db1352f3990f21f8a84c1282229517))
+
+
+### Bug Fixes
+
+* **ClusterInfo:** change cluster default name ([#478](https://github.com/ydb-platform/ydb-embedded-ui/issues/478)) ([398df6e](https://github.com/ydb-platform/ydb-embedded-ui/commit/398df6e3a5778c245653f61b41ba2e1bd0ea3a51))
+* fix copy schema action ([#483](https://github.com/ydb-platform/ydb-embedded-ui/issues/483)) ([f6b01c3](https://github.com/ydb-platform/ydb-embedded-ui/commit/f6b01c3cc2808337d5597f990f65ff3e7c010b05))
+* **Nodes:** support v2 compute ([#476](https://github.com/ydb-platform/ydb-embedded-ui/issues/476)) ([696d43a](https://github.com/ydb-platform/ydb-embedded-ui/commit/696d43a04109c7fc68986e036e66767593af8d00))
+* **ObjectSummary:** fix issue on object change with active schema tab ([#482](https://github.com/ydb-platform/ydb-embedded-ui/issues/482)) ([b50db5f](https://github.com/ydb-platform/ydb-embedded-ui/commit/b50db5ff742c5c7fc27e292309831b937e5d40bd))
+* **ObjectSummary:** fix wrong tree alignment bug ([#486](https://github.com/ydb-platform/ydb-embedded-ui/issues/486)) ([e8bfe99](https://github.com/ydb-platform/ydb-embedded-ui/commit/e8bfe99657870c735a41d24febaa907ac1383479))
+* **Query:** process null issues error ([#480](https://github.com/ydb-platform/ydb-embedded-ui/issues/480)) ([4c4e684](https://github.com/ydb-platform/ydb-embedded-ui/commit/4c4e6845e539296ecbdefa930bc63d3321f277dc))
+
 ## [4.10.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.10.0...v4.10.1) (2023-07-14)
 
 

package/dist/components/QueryResultTable/Cell/Cell.tsx

@@ -11,16 +11,16 @@ interface CellProps {
 }
 
 export const Cell = React.memo(function Cell(props: CellProps) {
-    const {
-        className,
-        value,
-    } = props;
+    const {className, value} = props;
 
     const dispatch = useDispatch();
 
-    useEffect(() => () => {
-        dispatch(hideTooltip());
-    }, [dispatch]);
+    useEffect(
+        () => () => {
+            dispatch(hideTooltip());
+        },
+        [dispatch],
+    );
 
     return (
         <span
@@ -29,5 +29,5 @@ export const Cell = React.memo(function Cell(props: CellProps) {
         >
             {value}
         </span>
-    )
+    );
 });

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

@@ -1,3 +1,3 @@
 {
-    "empty": "Table is empty"
+  "empty": "Table is empty"
 }

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

@@ -1,3 +1,3 @@
 {
-    "empty": "Таблица пустая"
+  "empty": "Таблица пустая"
 }

package/dist/components/ShortyString/ShortyString.tsx

@@ -33,18 +33,15 @@ export default function ShortyString({
     const [expanded, setExpanded] = React.useState(false);
 
     const toggleLabelAction = expanded ? collapseLabel : expandLabel;
-    const toggleLabelSymbolsCount = displayLength && !expanded
-        ? i18n('chars_count', {count: value.length})
-        : '';
+    const toggleLabelSymbolsCount =
+        displayLength && !expanded ? i18n('chars_count', {count: value.length}) : '';
     const toggleLabel = toggleLabelAction + toggleLabelSymbolsCount;
 
     // showing toogle button with a label that is longer than the hidden part is pointless,
     // hence compare to limit + length in the not-strict mode
     const hasToggle = value.length > limit + (strict ? 0 : toggleLabel.length);
 
-    const text = expanded || !hasToggle
-        ? value
-        : value.slice(0, limit - 4) + '\u00a0...';
+    const text = expanded || !hasToggle ? value : value.slice(0, limit - 4) + '\u00a0...';
 
     return (
         <div className={block()}>

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

@@ -1,10 +1,10 @@
 {
-    "default_collapse_label": "Show less",
-    "default_expand_label": "Show more",
-    "chars_count": [
-        " ({{count}} symbol)",
-        " ({{count}} symbols)",
-        " ({{count}} symbols)",
-        " ({{count}} symbols)"
-    ]
+  "default_collapse_label": "Show less",
+  "default_expand_label": "Show more",
+  "chars_count": [
+    " ({{count}} symbol)",
+    " ({{count}} symbols)",
+    " ({{count}} symbols)",
+    " ({{count}} symbols)"
+  ]
 }

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

@@ -1,10 +1,10 @@
 {
-    "default_collapse_label": "Показать меньше",
-    "default_expand_label": "Показать ещё",
-    "chars_count": [
-        " ({{count}} символ)",
-        " ({{count}} символа)",
-        " ({{count}} символов)",
-        " ({{count}} символов)"
-    ]
+  "default_collapse_label": "Показать меньше",
+  "default_expand_label": "Показать ещё",
+  "chars_count": [
+    " ({{count}} символ)",
+    " ({{count}} символа)",
+    " ({{count}} символов)",
+    " ({{count}} символов)"
+  ]
 }

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

@@ -9,5 +9,3 @@ i18n.registerKeyset(Lang.En, COMPONENT, en);
 i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
 
 export default i18n.keyset(COMPONENT);
-
-

package/dist/components/Stack/Stack.tsx

@@ -13,23 +13,23 @@ const b = cn('stack');
 
 export const Stack: React.FC<StackProps> = ({children, className}) => (
     <div className={b(null, className)}>
-        {
-            React.Children.map(children, (child, index) => {
-                if (!React.isValidElement(child)) {
-                    return null;
-                }
+        {React.Children.map(children, (child, index) => {
+            if (!React.isValidElement(child)) {
+                return null;
+            }
 
-                return (
-                    <div
-                        className={b('layer')}
-                        style={{
+            return (
+                <div
+                    className={b('layer')}
+                    style={
+                        {
                             [LAYER_CSS_VAR]: index,
-                        } as React.CSSProperties}
-                    >
-                        {child}
-                    </div>
-                );
-            })
-        }
+                        } as React.CSSProperties
+                    }
+                >
+                    {child}
+                </div>
+            );
+        })}
     </div>
 );

package/dist/components/TableSkeleton/TableSkeleton.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import {FC} from 'react';
 import block from 'bem-cn-lite';
-import { Skeleton } from '@gravity-ui/uikit';
+import {Skeleton} from '@gravity-ui/uikit';
 
 import './TableSkeleton.scss';
 
@@ -11,7 +11,7 @@ interface TableSkeletonProps {
     rows?: number;
 }
 
-export const TableSkeleton: FC<TableSkeletonProps> = ({ rows = 2, className }) => (
+export const TableSkeleton: FC<TableSkeletonProps> = ({rows = 2, className}) => (
     <div className={b(null, className)}>
         <div className={b('row')}>
             <Skeleton className={b('col-1')} />

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -18,7 +18,11 @@ import type {TClusterInfo} from '../../../types/api/cluster';
 import {backend, customBackend} from '../../../store';
 import {formatStorageValues} from '../../../utils';
 import {useSetting, useTypedSelector} from '../../../utils/hooks';
-import {CLUSTER_INFO_HIDDEN_KEY, DEVELOPER_UI} from '../../../utils/constants';
+import {
+    CLUSTER_DEFAULT_TITLE,
+    CLUSTER_INFO_HIDDEN_KEY,
+    DEVELOPER_UI_TITLE,
+} from '../../../utils/constants';
 
 import {VersionsBar} from '../VersionsBar/VersionsBar';
 import {ClusterInfoSkeleton} from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
@@ -148,7 +152,7 @@ export const ClusterInfo = ({
     const {info = [], links = []} = additionalClusterProps;
 
     const clusterInfo = getInfo(cluster, versionsValues, info, [
-        {title: DEVELOPER_UI, url: internalLink},
+        {title: DEVELOPER_UI_TITLE, url: internalLink},
         ...links,
     ]);
 
@@ -173,7 +177,7 @@ export const ClusterInfo = ({
             <EntityStatus
                 size="m"
                 status={cluster?.Overall}
-                name={cluster?.Name ?? 'Unknown cluster'}
+                name={cluster?.Name ?? CLUSTER_DEFAULT_TITLE}
                 className={b('title')}
             />
         );

package/dist/containers/Header/Header.tsx

@@ -10,7 +10,7 @@ import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/Extern
 import {backend, customBackend} from '../../store';
 import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {useTypedSelector} from '../../utils/hooks';
-import {DEVELOPER_UI} from '../../utils/constants';
+import {DEVELOPER_UI_TITLE} from '../../utils/constants';
 import {parseQuery} from '../../routes';
 
 import {RawBreadcrumbItem, getBreadcrumbs} from './breadcrumbs';
@@ -105,7 +105,7 @@ function Header({mainPage}: HeaderProps) {
                 </div>
 
                 <ExternalLinkWithIcon
-                    title={DEVELOPER_UI}
+                    title={DEVELOPER_UI_TITLE}
                     url={getInternalLink(singleClusterMode)}
                 />
             </header>

package/dist/containers/Header/breadcrumbs.ts

@@ -16,6 +16,7 @@ import {
     TENANT_PAGES_IDS,
 } from '../../store/reducers/tenant/constants';
 import routes, {createHref} from '../../routes';
+import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
 
 import {getClusterPath} from '../Cluster/utils';
 import {TenantTabsGroups, getTenantPath} from '../Tenant/TenantPages';
@@ -39,7 +40,7 @@ const getClusterBreadcrumbs = (
 
     return [
         {
-            text: clusterName || 'Cluster',
+            text: clusterName || CLUSTER_DEFAULT_TITLE,
             link: getClusterPath(clusterTab, query),
             icon: nodesRightIcon,
         },

package/dist/containers/Heatmap/Heatmap.tsx

@@ -4,13 +4,14 @@ import cn from 'bem-cn-lite';
 
 import {Checkbox, Select} from '@gravity-ui/uikit';
 
+import type {IHeatmapMetricValue} from '../../types/store/heatmap';
 import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap';
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {formatNumber} from '../../utils';
-import {prepareQueryError} from '../../utils/query';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+
 import {Loader} from '../../components/Loader';
-import type {IHeatmapMetricValue} from '../../types/store/heatmap';
+import {ResponseError} from '../../components/Errors/ResponseError';
 
 import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
 import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
@@ -196,7 +197,7 @@ export const Heatmap = ({path}: HeatmapProps) => {
     }
 
     if (error) {
-        return <div>{prepareQueryError(error)}</div>;
+        return <ResponseError error={error} />;
     }
 
     return renderContent();

package/dist/containers/Node/NodeStructure/PDiskTitleBadge.tsx

@@ -12,14 +12,8 @@ interface PDiskTitleBadgeProps {
 export function PDiskTitleBadge({label, value, className}: PDiskTitleBadgeProps) {
     return (
         <span className={b('pdisk-title-item', className)}>
-            {label && (
-                <span className={b('pdisk-title-item-label')}>
-                    {label}:
-                </span>
-            )}
-            <span className={b('pdisk-title-item-value')}>
-                {value}
-            </span>
+            {label && <span className={b('pdisk-title-item-label')}>{label}:</span>}
+            <span className={b('pdisk-title-item-value')}>{value}</span>
         </span>
     );
 }

package/dist/containers/Nodes/Nodes.tsx

@@ -71,7 +71,7 @@ export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
         // For not DB entities we always use /compute endpoint instead of /nodes
         // since /nodes can return data only for tenants
         if (path && (!useNodesEndpoint || !isDatabaseEntityType(type))) {
-            dispatch(getComputeNodes(path));
+            dispatch(getComputeNodes({path}));
         } else {
             dispatch(getNodes({tenant: path}));
         }

package/dist/containers/Storage/EmptyFilter/i18n/en.json

@@ -1,4 +1,4 @@
 {
-    "default_message": "Everything is fine!",
-    "default_button_label": "Show All"
+  "default_message": "Everything is fine!",
+  "default_button_label": "Show All"
 }

package/dist/containers/Storage/EmptyFilter/i18n/ru.json

@@ -1,4 +1,4 @@
 {
-    "default_message": "Всё в порядке!",
-    "default_button_label": "Показать все"
+  "default_message": "Всё в порядке!",
+  "default_button_label": "Показать все"
 }

package/dist/containers/Storage/StorageGroups/i18n/en.json

@@ -1,7 +1,7 @@
 {
-    "empty.default": "No such groups",
-    "empty.out_of_space": "No groups with out of space errors",
-    "empty.degraded": "No degraded groups",
-    "show_all": "Show all groups",
-    "encrypted": "Encrypted group"
+  "empty.default": "No such groups",
+  "empty.out_of_space": "No groups with out of space errors",
+  "empty.degraded": "No degraded groups",
+  "show_all": "Show all groups",
+  "encrypted": "Encrypted group"
 }

package/dist/containers/Storage/StorageGroups/i18n/ru.json

@@ -1,7 +1,7 @@
 {
-    "empty.default": "Нет групп",
-    "empty.out_of_space": "Нет групп, в которых кончается место",
-    "empty.degraded": "Нет деградировавших групп",
-    "show_all": "Показать все группы",
-    "encrypted": "Зашифрованная группа"
+  "empty.default": "Нет групп",
+  "empty.out_of_space": "Нет групп, в которых кончается место",
+  "empty.degraded": "Нет деградировавших групп",
+  "show_all": "Показать все группы",
+  "encrypted": "Зашифрованная группа"
 }

package/dist/containers/Storage/UsageFilter/i18n/en.json

@@ -1,10 +1,5 @@
 {
-    "label": "Usage:",
-    "default_value": "Any",
-    "groups_count": [
-        "{{count}} group",
-        "{{count}} groups",
-        "{{count}} groups",
-        "No groups"
-    ]
+  "label": "Usage:",
+  "default_value": "Any",
+  "groups_count": ["{{count}} group", "{{count}} groups", "{{count}} groups", "No groups"]
 }

package/dist/containers/Storage/UsageFilter/i18n/ru.json

@@ -1,10 +1,5 @@
 {
-    "label": "Использование:",
-    "default_value": "Любое",
-    "groups_count": [
-        "{{count}} группа",
-        "{{count}} группы",
-        "{{count}} групп",
-        "Нет групп"
-    ]
+  "label": "Использование:",
+  "default_value": "Любое",
+  "groups_count": ["{{count}} группа", "{{count}} группы", "{{count}} групп", "Нет групп"]
 }

package/dist/containers/Tablet/Tablet.tsx

@@ -9,7 +9,7 @@ import {getTablet, getTabletDescribe, clearTabletData} from '../../store/reducer
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
-import {DEVELOPER_UI} from '../../utils/constants';
+import {DEVELOPER_UI_TITLE} from '../../utils/constants';
 import '../../services/api';
 import {parseQuery} from '../../routes';
 
@@ -113,7 +113,7 @@ export const Tablet = () => {
 
     const externalLinks = [
         {
-            name: `${DEVELOPER_UI} - tablet`,
+            name: `${DEVELOPER_UI_TITLE} - tablet`,
             path: `/tablets?TabletID=${TabletId}`,
         },
     ];

package/dist/containers/Tenant/Acl/Acl.scss

@@ -1,6 +1,6 @@
 @import '../../../styles/mixins.scss';
 
-.kv-acl {
+.ydb-acl {
     display: flex;
     overflow: auto;
     flex-grow: 1;
@@ -16,14 +16,6 @@
         padding: 0 12px 16px;
     }
 
-    &__loader-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        height: 100%;
-    }
-
     &__owner-container {
         position: sticky;
         z-index: 2;

package/dist/containers/Tenant/Acl/Acl.tsx

@@ -0,0 +1,137 @@
+import {useDispatch} from 'react-redux';
+import {useEffect} from 'react';
+import cn from 'bem-cn-lite';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import type {TACE} from '../../../types/api/acl';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+import {useTypedSelector} from '../../../utils/hooks';
+import {getSchemaAcl, setAclWasNotLoaded} from '../../../store/reducers/schemaAcl/schemaAcl';
+
+import {ResponseError} from '../../../components/Errors/ResponseError';
+import {Loader} from '../../../components/Loader';
+
+import './Acl.scss';
+import i18n from '../i18n';
+
+const b = cn('ydb-acl');
+
+const TABLE_SETTINGS = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRender: false,
+    stickyTop: 36,
+};
+
+const prepareLogin = (value: string | undefined) => {
+    if (value && value.endsWith('@staff') && !value.startsWith('svc_')) {
+        const login = value.split('@')[0];
+        return login;
+    }
+
+    return value;
+};
+
+const columns: Column<TACE>[] = [
+    {
+        name: 'AccessType',
+        header: 'Access Type',
+        sortable: false,
+        render: ({row}) => row.AccessType,
+    },
+    {
+        name: 'AccessRights',
+        header: 'Access Rights',
+        render: ({row}) => {
+            return row.AccessRights?.map((item, index) => {
+                return <div key={index}>{item}</div>;
+            });
+        },
+        sortable: false,
+    },
+    {
+        name: 'Subject',
+        sortable: false,
+        render: ({row}) => {
+            return prepareLogin(row.Subject);
+        },
+        width: 140,
+    },
+    {
+        name: 'InheritanceType',
+        header: 'Inheritance Type',
+        render: ({row}) => {
+            return row.InheritanceType?.map((item, index) => {
+                return <div key={index}>{item}</div>;
+            });
+        },
+        sortable: false,
+    },
+];
+
+export const Acl = () => {
+    const dispatch = useDispatch();
+
+    const {currentSchemaPath} = useTypedSelector((state) => state.schema);
+    const {loading, error, acl, owner, wasLoaded} = useTypedSelector((state) => state.schemaAcl);
+
+    useEffect(() => {
+        if (currentSchemaPath) {
+            dispatch(getSchemaAcl({path: currentSchemaPath}));
+        }
+
+        return () => {
+            // Ensures correct acl on path change
+            dispatch(setAclWasNotLoaded());
+        };
+    }, [currentSchemaPath, dispatch]);
+
+    const renderTable = () => {
+        if (!acl || !acl.length) {
+            return null;
+        }
+
+        return (
+            <DataTable
+                theme="yandex-cloud"
+                columns={columns}
+                data={acl}
+                settings={TABLE_SETTINGS}
+            />
+        );
+    };
+
+    const renderOwner = () => {
+        if (!owner) {
+            return null;
+        }
+
+        return (
+            <div className={b('owner-container')}>
+                <span className={b('owner-label')}>{`${i18n('acl.owner')}: `}</span>
+                {prepareLogin(owner)}
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return <Loader />;
+    }
+
+    if (error) {
+        return <ResponseError error={error} className={b('message-container')} />;
+    }
+
+    if (!loading && !acl && !owner) {
+        return <div className={b('message-container')}>{i18n('acl.empty')}</div>;
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('result')}>
+                {renderOwner()}
+                {renderTable()}
+            </div>
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Describe/Describe.tsx

@@ -6,8 +6,8 @@ import JSONTree from 'react-json-inspector';
 import 'react-json-inspector/json-inspector.css';
 
 import {Loader} from '../../../../components/Loader';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
 
-import {prepareQueryError} from '../../../../utils/query';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {
     getDescribe,
@@ -86,7 +86,7 @@ const Describe = ({tenant, type}: IDescribeProps) => {
     }
 
     if (error) {
-        return <div className={b('message-container', 'error')}>{prepareQueryError(error)}</div>;
+        return <ResponseError error={error} className={b('message-container')} />;
     }
 
     if (!loading && !preparedDescribeData) {

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -83,6 +83,9 @@ export const DIR_PAGES = [overview, topShards, nodes, describe];
 export const CDC_STREAM_PAGES = [overview, consumers, partitions, nodes, describe];
 export const TOPIC_PAGES = [overview, consumers, partitions, nodes, describe];
 
+export const EXTERNAL_DATA_SOURCE_PAGES = [overview, describe];
+export const EXTERNAL_TABLE_PAGES = [overview, describe];
+
 // verbose mapping to guarantee correct tabs for new path types
 // TS will error when a new type is added but not mapped here
 const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
@@ -101,6 +104,9 @@ const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
     [EPathType.EPathTypeCdcStream]: CDC_STREAM_PAGES,
 
     [EPathType.EPathTypePersQueueGroup]: TOPIC_PAGES,
+
+    [EPathType.EPathTypeExternalDataSource]: EXTERNAL_DATA_SOURCE_PAGES,
+    [EPathType.EPathTypeExternalTable]: EXTERNAL_TABLE_PAGES,
 };
 
 export const getPagesByType = (type?: EPathType) => (type && pathTypeToPages[type]) || DIR_PAGES;

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -5,10 +5,10 @@ import {Loader} from '@gravity-ui/uikit';
 import DataTable from '@gravity-ui/react-data-table';
 
 import {Icon} from '../../../../components/Icon';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
-import {prepareQueryError} from '../../../../utils/query';
 
 import {isColumnEntityType, isTableType} from '../../utils/schema';
 
@@ -86,7 +86,7 @@ function HotKeys({
                 sortable: false,
                 align: DataTable.RIGHT,
             },
-            ...keyColumnsIds?.map((col, index) => ({
+            ...keyColumnsIds.map((col, index) => ({
                 name: col,
                 header: (
                     <div className={b('primary-key-column')}>
@@ -107,7 +107,7 @@ function HotKeys({
 
     const renderContent = () => {
         if (error) {
-            return prepareQueryError(error);
+            return <ResponseError error={error} />;
         }
         return data !== null ? (
             <div className={b('table-content')}>