ydb-embedded-ui 1.5.3 → 1.6.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [1.6.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.6.1...v1.6.2) (2022-06-07)
+
+
+### Bug Fixes
+
+* shouls always select result tab ([98d4bcb](https://github.com/ydb-platform/ydb-embedded-ui/commit/98d4bcbc94bc2b9db9fb9b9cd5aced9f079ecdae))
+
+## [1.6.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.6.0...v1.6.1) (2022-06-07)
+
+
+### Bug Fixes
+
+* should show Pending instead of Pendin ([0b93f80](https://github.com/ydb-platform/ydb-embedded-ui/commit/0b93f8000dffca27cd26321eb86f41e4f458faa6))
+* should show query error even if no issues ([708bac5](https://github.com/ydb-platform/ydb-embedded-ui/commit/708bac56c2e671ec23e23c5055d0c0a9d419cd86))
+
+## [1.6.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.3...v1.6.0) (2022-06-06)
+
+
+### Features
+
+* query issues displaying ([3ba4c25](https://github.com/ydb-platform/ydb-embedded-ui/commit/3ba4c2591542ef902eba4f7c44550f3c59618575))
+
+
+### Bug Fixes
+
+* code-review ([742c58a](https://github.com/ydb-platform/ydb-embedded-ui/commit/742c58a9bc4fa0dd0b24aa0119b7352e2be6fc8e))
+* **package.json:** typecheck script ([111b525](https://github.com/ydb-platform/ydb-embedded-ui/commit/111b525f51a050010bbc03a3d0990be00c18ccd8))
+
 ### [1.5.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.2...v1.5.3) (2022-05-26)
 
 

package/dist/assets/icons/circle-exclamation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"/></svg>

package/dist/assets/icons/circle-info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"/></svg>

package/dist/assets/icons/circle-xmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z"/></svg>

package/dist/assets/icons/triangle-exclamation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>

package/dist/components/ShortyString/ShortyString.scss

@@ -0,0 +1,7 @@
+.kv-shorty-string {
+    &__toggle {
+        margin-left: 2em;
+
+        font-size: 0.85em;
+    }
+}

package/dist/components/ShortyString/ShortyString.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import cn from 'bem-cn-lite';
+
+import {Link} from '@yandex-cloud/uikit';
+
+import './ShortyString.scss';
+
+const block = cn('kv-shorty-string');
+
+type Props = {
+    value?: string;
+    limit?: number;
+    displayLength?: boolean;
+    render?: (value: string) => React.ReactNode;
+    onToggle?: () => void;
+    expandLabel?: string;
+    collapseLabel?: string;
+};
+
+export default function ShortyString({
+    value = '',
+    limit = 200,
+    displayLength = true,
+    render = (v: string) => v,
+    onToggle,
+    expandLabel = 'Show more',
+    collapseLabel = 'Show less',
+}: Props) {
+    const [expanded, setExpanded] = React.useState(false);
+    const hasToggle = value.length > limit;
+    const length =
+        displayLength && !expanded ? `(${value.length} symbols)` : undefined;
+
+    const text = expanded || value.length <= limit ? value : value.slice(0, limit - 4) + '\u00a0...';
+    const label = expanded ? collapseLabel : expandLabel;
+    return (
+        <div className={block()}>
+            {render(text)}
+            {hasToggle ? (
+                <Link
+                    className={block('toggle')}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        setExpanded((v) => !v);
+                        onToggle?.();
+                    }}
+                >
+                    {label} {length}
+                </Link>
+            ) : null}
+        </div>
+    );
+}

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

@@ -8,9 +8,10 @@ import Icon from '../../../../components/Icon/Icon';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
+import {TABLE_TYPE} from '../../Tenant';
+import {prepareQueryError} from '../../../../utils';
 
 import './HotKeys.scss';
-import {TABLE_TYPE} from '../../Tenant';
 
 const b = cn('hot-keys');
 
@@ -105,7 +106,7 @@ function HotKeys({
 
     const renderContent = () => {
         if (error) {
-            return error.data;
+            return prepareQueryError(error);
         }
         return data !== null ? (
             <div className={b('table-content')}>

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

@@ -3,18 +3,19 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 import DataTable from '@yandex-cloud/react-data-table';
+import {Loader} from '@yandex-cloud/uikit';
 
 import {changeUserInput} from '../../../../store/reducers/executeQuery';
 import {sendQuery, setQueryOptions} from '../../../../store/reducers/executeTopQueries';
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {AutoFetcher} from '../../../../utils/autofetcher';
-import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
+import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
 
-import './TopQueries.scss';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {TenantGeneralTabsIds} from '../../TenantPages';
-import {Loader} from '@yandex-cloud/uikit';
+import {prepareQueryError} from '../../../../utils';
 
+import './TopQueries.scss';
 
 const b = cn('kv-top-queries');
 
@@ -151,7 +152,7 @@ class TopQueries extends React.Component {
         if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
             message = 'No data';
         } else if (error && !error.isCancelled) {
-            message = (error.data || error).slice(0, 300);
+            message = prepareQueryError(error).slice(0, 300);
         } else if (!loading && !data) {
             message = 'No data';
         }

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

@@ -1,20 +1,21 @@
 import {useContext, useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import InternalLink from '../../../../components/InternalLink/InternalLink';
+import {Loader} from '@yandex-cloud/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
-import routes, {createHref} from '../../../../routes';
 
+import InternalLink from '../../../../components/InternalLink/InternalLink';
+
+import routes, {createHref} from '../../../../routes';
 import {sendShardQuery, setShardQueryOptions} from '../../../../store/reducers/shardsWorkload';
 import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
 import {AutoFetcher} from '../../../../utils/autofetcher';
-
 import HistoryContext from '../../../../contexts/HistoryContext';
+import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
+import {prepareQueryError} from '../../../../utils';
 
 import './TopShards.scss';
-import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {Loader} from '@yandex-cloud/uikit';
-import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
 
 const b = cn('top-shards');
 const bLink = cn('yc-link');
@@ -123,7 +124,7 @@ function TopShards({
             return 'No data';
         }
         if (error) {
-            return error.data || error;
+            return prepareQueryError(error);
         }
 
         return data && data.length > 0 ? (

package/dist/containers/Tenant/Preview/Preview.js

@@ -11,7 +11,7 @@ import Fullscreen from '../../../components/Fullscreen/Fullscreen';
 
 import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
 import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
-import {prepareQueryResponse} from '../../../utils/index';
+import {prepareQueryError, prepareQueryResponse} from '../../../utils/index';
 
 import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
 import {AutoFetcher} from '../../../utils/autofetcher';
@@ -163,7 +163,7 @@ class Preview extends React.Component {
         }
 
         if (error) {
-            message = <div className={b('message-container')}>{error.data || error}</div>;
+            message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
         }
 
         if (!loading && data.length === 0) {

package/dist/containers/Tenant/QueryEditor/Issues/Issues.scss

@@ -0,0 +1,124 @@
+.kv-result-issues {
+    overflow: auto;
+
+    height: 100%;
+    padding: 0 10px;
+    &__error-message {
+        position: sticky;
+        z-index: 2;
+        top: 0;
+        left: 0;
+
+        display: flex;
+        align-items: center;
+
+        padding: 10px 0;
+
+        background-color: var(--yc-color-base-background);
+    }
+    &__error-message-text {
+        margin: 0 10px;
+    }
+}
+
+.kv-issues {
+    position: relative;
+}
+
+.kv-issue {
+    &_leaf {
+        margin-left: 31px;
+    }
+
+    &__issues {
+        padding-left: 24px;
+    }
+
+    &__line {
+        display: flex;
+        align-items: flex-start;
+
+        margin: 0 0 10px;
+        padding: 0 10px 0 0;
+    }
+
+    &__place-text {
+        display: inline-block;
+
+        padding-right: 10px;
+
+        text-align: left;
+
+        color: var(--yc-color-text-secondary);
+    }
+
+    &__message {
+        display: flex;
+
+        margin-right: auto;
+        margin-left: 10px;
+
+        font-family: var(--yc-font-family-monospace);
+        font-size: var(--yc-text-code-2-font-size);
+        line-height: var(--yc-text-header-2-line-height);
+    }
+
+    &__message-text {
+        flex: 1 1 auto;
+
+        min-width: 240px;
+
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+
+    &__code {
+        flex: 0 0 auto;
+
+        margin-left: 1.5em;
+        padding: 3px 0;
+
+        font-size: 12px;
+
+        color: var(--yc-color-text-complementary);
+    }
+
+    &__arrow-toggle {
+        margin-right: 5px;
+        .yc-button__text {
+            margin: 0 5px;
+        }
+    }
+}
+
+.yql-issue-severity {
+    display: flex;
+    align-items: center;
+
+    line-height: 28px;
+    white-space: nowrap;
+
+    &_severity_fatal &__icon {
+        color: var(--yc-color-text-danger);
+    }
+
+    &_severity_error &__icon {
+        color: var(--yc-color-text-danger);
+    }
+
+    &_severity_warning &__icon {
+        color: var(--yc-color-text-warning-medium);
+    }
+
+    &_severity_info &__icon {
+        color: var(--yc-color-text-info);
+    }
+
+    &__title {
+        margin-left: 4px;
+
+        text-transform: capitalize;
+
+        color: var(--yc-color-text-complementary);
+    }
+}

package/dist/containers/Tenant/QueryEditor/Issues/Issues.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import cn from 'bem-cn-lite';
+
+import {Button, Icon, ArrowToggle} from '@yandex-cloud/uikit';
+import ShortyString from '../../../../components/ShortyString/ShortyString';
+
+import {IssueType, SEVERITY, getSeverity} from './models';
+
+import fatalIcon from '../../../../assets/icons/circle-xmark.svg';
+import errorIcon from '../../../../assets/icons/triangle-exclamation.svg';
+import warningIcon from '../../../../assets/icons/circle-exclamation.svg';
+import infoIcon from '../../../../assets/icons/circle-info.svg';
+
+import './Issues.scss';
+
+const blockWrapper = cn('kv-result-issues');
+const blockIssues = cn('kv-issues');
+const blockIssue = cn('kv-issue');
+
+type DataIssues = {
+    error: IssueType;
+    issues?: IssueType[];
+};
+
+interface ResultIssuesProps {
+    data: DataIssues | string;
+    className: string;
+}
+
+export default function ResultIssues({data, className}: ResultIssuesProps) {
+    const [showIssues, setShowIssues] = React.useState(false);
+
+    const hasIssues = typeof data === 'string' ? false : Array.isArray(data?.issues);
+
+    const renderTitle = () => {
+        let content;
+        if (typeof data === 'string') {
+            content = data;
+        } else {
+            const severity = getSeverity(data?.error?.severity);
+            content = (
+                <React.Fragment>
+                    <IssueSeverity severity={severity} />{' '}
+                    <span className={blockWrapper('error-message-text')}>
+                        {data?.error?.message}
+                    </span>
+                </React.Fragment>
+            );
+        }
+
+        return content;
+    };
+
+    return (
+        <div className={blockWrapper()}>
+            <div className={blockWrapper('error-message')}>
+                {renderTitle()}
+                {hasIssues && (
+                    <Button view="normal" onClick={() => setShowIssues(!showIssues)}>
+                        {showIssues ? 'Hide details' : 'Show details'}
+                    </Button>
+                )}
+            </div>
+            {hasIssues && showIssues && (
+                <Issues issues={(data as DataIssues).issues!} className={className} />
+            )}
+        </div>
+    );
+}
+
+interface IssuesProps {
+    className?: string;
+    issues: IssueType[];
+}
+export function Issues({issues, className}: IssuesProps) {
+    const mostSevereIssue = issues.reduce((result, issue) => {
+        const severity = issue.severity ?? 10;
+        return Math.min(result, severity);
+    }, 10);
+    return (
+        <div className={blockIssues(null, className)}>
+            {issues.map((issue, index) => (
+                <Issue key={index} issue={issue} expanded={issue === mostSevereIssue} />
+            ))}
+        </div>
+    );
+}
+
+function Issue({issue, level = 0}: {issue: IssueType; expanded?: boolean; level?: number}) {
+    const [isExpand, setIsExpand] = React.useState(true);
+    const severity = getSeverity(issue.severity);
+    const hasIssues = Array.isArray(issue.issues) && issue.issues.length > 0;
+    const position = getIssuePosition(issue);
+
+    const arrowDirection = isExpand ? 'bottom' : 'right';
+
+    return (
+        <div
+            className={blockIssue({
+                leaf: !hasIssues,
+                'has-issues': hasIssues,
+            })}
+        >
+            <div className={blockIssue('line')}>
+                {hasIssues && (
+                    <Button
+                        view="flat-secondary"
+                        onClick={() => setIsExpand(!isExpand)}
+                        className={blockIssue('arrow-toggle')}
+                    >
+                        <ArrowToggle direction={arrowDirection} size={16} />
+                    </Button>
+                )}
+                <IssueSeverity severity={severity} />
+
+                <span className={blockIssue('message')}>
+                    {position && (
+                        <span className={blockIssue('place-text')} title="Position">
+                            {position}
+                        </span>
+                    )}
+                    <div className={blockIssue('message-text')}>
+                        <ShortyString value={issue.message} expandLabel={'Show full message'} />
+                    </div>
+                </span>
+                {issue.code ? <span className={blockIssue('code')}>Code: {issue.code}</span> : null}
+            </div>
+            {hasIssues && isExpand && (
+                <div className={blockIssue('issues')}>
+                    <IssueList issues={issue.issues!} level={level + 1} expanded={isExpand} />
+                </div>
+            )}
+        </div>
+    );
+}
+
+function IssueList(props: {issues: IssueType[]; expanded: boolean; level: number}) {
+    const {issues, level, expanded} = props;
+    return (
+        <div className={blockIssue('list')}>
+            {issues.map((issue, index) => (
+                <Issue key={index} issue={issue} level={level} expanded={expanded} />
+            ))}
+        </div>
+    );
+}
+
+const severityIcons: Record<SEVERITY, any> = {
+    S_INFO: infoIcon,
+    S_WARNING: warningIcon,
+    S_ERROR: errorIcon,
+    S_FATAL: fatalIcon,
+};
+const blockIssueSeverity = cn('yql-issue-severity');
+function IssueSeverity({severity}: {severity: SEVERITY}) {
+    const shortenSeverity = severity.slice(2).toLowerCase();
+    return (
+        <span className={blockIssueSeverity({severity: shortenSeverity})}>
+            <Icon className={blockIssueSeverity('icon')} data={severityIcons[severity]} size={16} />
+            <span className={blockIssueSeverity('title')}>{shortenSeverity}</span>
+        </span>
+    );
+}
+
+function getIssuePosition(issue: IssueType) {
+    const {file, position} = issue;
+    if (!position) {
+        return false;
+    }
+    return `${file ? 'file:' : ''}${position.row}:${position.column}`;
+}

package/dist/containers/Tenant/QueryEditor/Issues/models.ts

@@ -0,0 +1,27 @@
+export interface IssueType {
+    file?: string;
+    position?: {row: number; column: number};
+    // eslint-disable-next-line camelcase
+    end_position?: {row: number; column: number};
+    message?: string;
+    code?: number;
+    severity?: number;
+    issues?: IssueType[];
+}
+
+export const SEVERITY_LIST = ['S_FATAL', 'S_ERROR', 'S_WARNING', 'S_INFO'] as const;
+
+export type SEVERITY = typeof SEVERITY_LIST[number];
+
+// Severity values from ydb/library/yql/public/issue/protos/issue_severity.proto
+// FATAL = 0;
+// ERROR = 1;
+// WARNING = 2;
+// INFO = 3;
+export function isSeverity(value: number | undefined) {
+    return value ? SEVERITY_LIST[value] !== undefined : false;
+}
+
+export function getSeverity(value: number | undefined) {
+    return isSeverity(value) ? SEVERITY_LIST[value!] : 'S_INFO';
+}

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

@@ -307,58 +307,56 @@ function QueryEditor(props) {
             executeQuery: {data, error, stats},
             showTooltip,
         } = props;
-        const result = getExecuteResult();
-        const shouldRenderAnswer = result.length || error;
 
-        if (!shouldRenderAnswer) {
-            return null;
-        }
-
-        let columns = [];
-        if (data && data.length > 0) {
-            columns = Object.keys(data[0]).map((key) => ({
-                name: key,
-                render: ({value}) => {
-                    return (
-                        <span
-                            className={b('cell')}
-                            onClick={(e) => showTooltip(e.target, value, 'cell')}
-                        >
-                            {value}
-                        </span>
-                    );
-                },
-            }));
+        let content;
+        if (data) {
+            let columns = [];
+            if (data.length > 0) {
+                columns = Object.keys(data[0]).map((key) => ({
+                    name: key,
+                    render: ({value}) => {
+                        return (
+                            <span
+                                className={b('cell')}
+                                onClick={(e) => showTooltip(e.target, value, 'cell')}
+                            >
+                                {value}
+                            </span>
+                        );
+                    },
+                }));
+                const preparedData = prepareQueryResponse(data);
+
+                content = columns.length ? (
+                    <DataTable
+                        columns={columns}
+                        data={preparedData}
+                        settings={TABLE_SETTINGS}
+                        theme="yandex-cloud"
+                        rowKey={(_, index) => index}
+                    />
+                ) : (
+                    <div>{data}</div>
+                );
+            }
         }
+        const textResults = getPreparedResult();
+        const disabled = !textResults.length || resultType !== RESULT_TYPES.EXECUTE;
 
-        const preparedData = prepareQueryResponse(data);
-
-        const content = columns.length ? (
-            <DataTable
-                columns={columns}
-                data={preparedData}
-                settings={TABLE_SETTINGS}
-                theme="yandex-cloud"
-                rowKey={(_, index) => index}
-            />
-        ) : (
-            <div>{result}</div>
-        );
-        const results = getPreparedResult();
-        const disabled = !results.length || resultType !== RESULT_TYPES.EXECUTE;
-        return (
+        return data || error ? (
             <QueryResult
                 result={content}
                 stats={stats}
-                error={Boolean(error)}
-                textResults={results}
+                error={error}
+                textResults={textResults}
                 copyDisabled={disabled}
                 isResultsCollapsed={resultVisibilityState.collapsed}
                 onExpandResults={onExpandResultHandler}
                 onCollapseResults={onCollapseResultHandler}
             />
-        );
+        ) : null;
     };
+
     const renderExplainQuery = () => {
         const {
             explainQuery: {data, dataAst, error, loading, loadingAst},
@@ -463,18 +461,6 @@ function QueryEditor(props) {
         );
     };
 
-    const getExecuteResult = () => {
-        const {data = [], error} = props.executeQuery;
-
-        if (error) {
-            return error.data || error;
-        } else if (data.length > 0) {
-            return data;
-        } else {
-            return '';
-        }
-    };
-
     const getPreparedResult = () => {
         const {
             executeQuery: {data},

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

@@ -234,7 +234,10 @@ function QueryExplain(props) {
         }
 
         if (error) {
-            return error.data ? error.data : error;
+            if (error.data) {
+                return typeof error.data === 'string' ? error.data : error.data.error?.message;
+            }
+            return error;
         }
 
         switch (activeOption) {

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

@@ -13,6 +13,7 @@ import './QueryResult.scss';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import ResultIssues from '../Issues/Issues';
 
 const b = cn('kv-query-result');
 
@@ -83,8 +84,33 @@ function QueryResult(props) {
         return (
             <React.Fragment>
                 {result}
-                {isFullscreen && <Fullscreen><div className={b('result', {fullscreen: true})}>{result}</div></Fullscreen>}
+                {isFullscreen && (
+                    <Fullscreen>
+                        <div className={b('result', {fullscreen: true})}>{result}</div>
+                    </Fullscreen>
+                )}
+            </React.Fragment>
+        );
+    };
+
+    const renderIssues = () => {
+        const error = props.error?.data;
+
+        const hasIssues = error?.issues && Array.isArray(error.issues);
+
+        return hasIssues ? (
+            <React.Fragment>
+                <ResultIssues data={error} />
+                {isFullscreen && (
+                    <Fullscreen>
+                        <div className={b('result', {fullscreen: true})}>
+                            <ResultIssues data={error} />
+                        </div>
+                    </Fullscreen>
+                )}
             </React.Fragment>
+        ) : (
+            <span>{error?.data ?? error}</span>
         );
     };
 
@@ -107,7 +133,7 @@ function QueryResult(props) {
                 </div>
                 <div className={b('controls-left')}>
                     {renderClipboardButton()}
-                    <EnableFullscreenButton disabled={Boolean(props.error)}/>
+                    <EnableFullscreenButton />
                     <PaneVisibilityToggleButtons
                         onCollapse={props.onCollapseResults}
                         onExpand={props.onExpandResults}
@@ -117,8 +143,9 @@ function QueryResult(props) {
                 </div>
             </div>
             <div className={b('result')}>
-                {activeSection === resultOptionsIds.result && renderResult()}
-                {activeSection === resultOptionsIds.stats && renderStats()}
+                {activeSection === resultOptionsIds.result && !props.error && renderResult()}
+                {activeSection === resultOptionsIds.stats && !props.error && renderStats()}
+                {renderIssues()}
             </div>
         </React.Fragment>
     );

package/dist/containers/Tenants/Tenants.js

@@ -201,7 +201,7 @@ class Tenants extends React.Component {
             },
             {
                 name: 'State',
-                width: 80,
+                width: 90,
                 render: ({value}) => (value ? value.toLowerCase() : '—'),
                 customStyle: () => ({textTransform: 'capitalize'}),
             },

package/dist/store/utils.js

@@ -32,7 +32,7 @@ export function createApiRequest({actions, request, dataHandler = nop}) {
                 dispatch({
                     type: SET_UNAUTHENTICATED.SUCCESS,
                 });
-            } else if (error && error.status && error.statusText) {
+            } else if (error && Number(error.status) >= 500 && error.statusText) {
                 createToast({
                     name: 'Request failure',
                     title: 'Request failure',

package/dist/utils/index.js

@@ -138,3 +138,7 @@ export const prepareQueryResponse = (data) => {
         return formattedData;
     });
 };
+
+export function prepareQueryError(error) {
+    return error.data?.error?.message || error.data || error
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.5.3",
+  "version": "1.6.2",
   "files": [
     "dist"
   ],
@@ -52,9 +52,7 @@
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "prepublishOnly": "npm run package",
-    "typecheck": "npm run typecheck:server && npm run typecheck:ui",
-    "typecheck:server": "tsc -p src/server --noEmit",
-    "typecheck:ui": "tsc -p src/ui --noEmit",
+    "typecheck": "tsc --noEmit",
     "prepare": "husky install"
   },
   "lint-staged": {