ydb-embedded-ui 1.5.2 → 1.6.1

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>
+        ) : <span>{error?.data ?? error}</span>;
+    };
+
     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/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/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/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;
     }
 

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/styles/mixins.scss

@@ -16,25 +16,25 @@
 }
 
 @mixin body-typography() {
-    font-size: var(--yc-text-body-font-size);
-    line-height: var(--yc-text-body-line-height);
+    font-size: var(--yc-text-body-1-font-size);
+    line-height: var(--yc-text-body-1-line-height);
 }
 @mixin body2-typography() {
-    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);
 }
 @mixin body3-typography() {
-    font-size: var(--yc-text-body3-font-size);
-    line-height: var(--yc-text-body3-line-height);
+    font-size: var(--yc-text-body-3-font-size);
+    line-height: var(--yc-text-body-3-line-height);
 }
 @mixin lead-typography() {
-    font-size: var(--yc-text-lead-font-size);
-    line-height: var(--yc-text-lead-line-height);
+    font-size: var(--yc-text-subheader-3-font-size);
+    line-height: var(--yc-text-subheader-3-line-height);
 }
 
 @mixin title-typography() {
-    font-size: var(--yc-text-title-font-size);
-    line-height: var(--yc-text-title-line-height);
+    font-size: var(--yc-text-header-2-font-size);
+    line-height: var(--yc-text-header-2-line-height);
 }
 
 @mixin sticky-top {
@@ -188,8 +188,8 @@
 @mixin json-tree-styles {
     // stylelint-disable
     font-family: var(--yc-font-family-monospace) !important;
-    font-size: var(--yc-text-code-font-size) !important;
-    line-height: var(--yc-text-code-line-height) !important;
+    font-size: var(--yc-text-code-1-font-size) !important;
+    line-height: var(--yc-text-code-1-line-height) !important;
     // stylelint-enable
 
     .json-inspector__leaf_composite:before {
@@ -239,7 +239,7 @@
             margin: 0;
             padding: 0;
 
-            font-family: var(--yc-font-family);
+            font-family: var(--yc-text-body-font-family);
             font-size: 13px;
             vertical-align: top;
 

package/dist/utils/getNodesColumns.js

@@ -1,7 +1,6 @@
-import React from 'react';
 import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
-import {Button, Tooltip} from '@yandex-cloud/uikit';
+import {Button, Popover} from '@yandex-cloud/uikit';
 
 import Icon from '../components/Icon/Icon';
 import EntityStatus from '../components/EntityStatus/EntityStatus';
@@ -62,7 +61,7 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
             width: '200px',
             align: DataTable.LEFT,
             render: ({value}) => {
-                return <Tooltip content={value}>{value}</Tooltip>;
+                return <Popover content={value}>{value}</Popover>;
             },
         },
         {

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.2",
+  "version": "1.6.1",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.0.0",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "1.2.3"
+    "ydb-ui-components": "2.0.1"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -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": {
@@ -93,7 +91,7 @@
     "@yandex-cloud/prettier-config": "^1.0.0",
     "@yandex-cloud/stylelint-config": "^1.1.0",
     "@yandex-cloud/tsconfig": "^1.0.0",
-    "@yandex-cloud/uikit": "^1.7.0",
+    "@yandex-cloud/uikit": "^2.4.0",
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.4",
@@ -107,6 +105,7 @@
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "@yandex-cloud/browserslist-config": "^1.0.1"
+    "@yandex-cloud/browserslist-config": "^1.0.1",
+    "@yandex-cloud/uikit": "^2.4.0"
   }
 }