ydb-embedded-ui 1.5.1 → 1.6.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');
 
@@ -27,7 +28,9 @@ const resultOptions = [
 ];
 
 function QueryResult(props) {
-    const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
+    const [activeSection, setActiveSection] = useState(
+        props.result ? resultOptionsIds.result : resultOptionsIds.stats,
+    );
     const isFullscreen = useSelector((state) => state.fullscreen);
     const dispatch = useDispatch();
 
@@ -83,11 +86,34 @@ 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>
+        ) : null;
+    };
+
     return (
         <React.Fragment>
             <div className={b('controls')}>
@@ -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/Tenant/QueryEditor/SaveQuery/SaveQuery.scss

@@ -4,7 +4,7 @@
         align-items: flex-start;
 
         & + & {
-            margin-top: var(--yc-text-body-line-height);
+            margin-top: var(--yc-text-body-1-line-height);
         }
     }
     &__field-title {

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -1,5 +1,4 @@
 import {useDispatch} from 'react-redux';
-import {useHistory} from 'react-router';
 
 import {NavigationTree} from 'ydb-ui-components';
 
@@ -26,7 +25,6 @@ export function SchemaTree(props: SchemaTreeProps) {
     } = props;
 
     const dispatch = useDispatch();
-    const history = useHistory();
 
     const fetchPath = (path: string) => window.api.getSchema(
         {path},
@@ -55,7 +53,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                 collapsed: false,
             }}
             fetchPath={fetchPath}
-            getActions={getActions(dispatch, history, handleActivePathUpdate)}
+            getActions={getActions(dispatch, handleActivePathUpdate)}
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}

package/dist/containers/Tenant/Tenant.scss

@@ -3,8 +3,8 @@
 .tenant-page {
     overflow: hidden;
 
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
     @include flex-container();
 
     .yc-tabs {

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

@@ -1,13 +1,11 @@
-import qs from 'qs';
 import {Dispatch} from 'react';
-import {History} from 'history';
 import type {NavigationTreeNodeType} from 'ydb-ui-components';
 
-import routes, {createHref} from '../../../routes';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema';
+import {setTopLevelTab} from '../../../store/reducers/tenant';
 import createToast from '../../../utils/createToast';
-import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
+import {TenantGeneralTabsIds} from '../TenantPages';
 
 const createTableTemplate = (path: string) => {
     return `CREATE TABLE \`${path}/my_table\`
@@ -36,29 +34,16 @@ VALUES ( );`;
 
 export const getActions = (
     dispatch: Dispatch<any>,
-    history: History<unknown>,
     setActivePath: (path: string) => void,
 ) =>
     (path: string, type: NavigationTreeNodeType) => {
-        const queryParams = qs.parse(location.search, {
-            ignoreQueryPrefix: true,
-        });
-
         const switchTabToQuery = () => {
-            history.push(
-                createHref(routes.tenant, undefined, {
-                    ...queryParams,
-                    [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
-                }),
-            );
+            dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
         };
 
         const onCreateTableClick = () => {
             dispatch(changeUserInput({input: createTableTemplate(path)}));
             switchTabToQuery();
-            // here and in the other handlers this should be called after switching tab:
-            // redux-location-state catches the history.push event from the tab switching
-            // before active path updates in url, preventing its update at all
             setActivePath(path);
         };
 

package/dist/containers/Vdisk/Vdisk.scss

@@ -20,9 +20,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 

package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.scss

@@ -27,9 +27,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }