ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Tenant/Query/ExplainResult/utils.js

@@ -2,3 +2,37 @@ export const renderExplainNode = (node) => {
     const parts = node.name.split('|');
     return parts.length > 1 ? parts[1] : node.name;
 };
+export function getColors() {
+    const colorsMap = {
+        success: '--g-color-text-positive',
+        error: '--g-color-text-danger',
+        warning: '--g-color-text-warning',
+        errorBackground: '--g-color-base-danger-medium',
+        warningBackground: '--g-color-base-warning-medium',
+        mute: '--g-color-line-generic',
+        stroke: '--g-color-text-hint',
+        fill: '--g-color-base-generic-ultralight',
+        nodeFill: '--g-color-base-float',
+        nodeShadow: '--g-color-sfx-shadow',
+        titleColor: '--g-color-text-primary',
+        textColor: '--g-color-text-complementary',
+        buttonBorderColor: '--g-color-line-generic',
+        // groupBorderColor: '--g-color-celestial-thunder',
+        // groupFill: '--g-color-celestial',
+        titleHoverColor: '--g-color-text-link-hover',
+        nodeHover: '--g-color-base-float-hover',
+        specialHover: '--g-color-line-focus',
+    };
+    const style = getComputedStyle(document.body);
+    const colors = Object.keys(colorsMap).reduce((acc, key) => {
+        const color = style.getPropertyValue(colorsMap[key]).replace(/ /g, '');
+        if (color) {
+            acc[key] = color;
+        }
+        return acc;
+    }, {});
+    const getCommonColor = (name) => {
+        return style.getPropertyValue(`--g-color-${name}`).replace(/ /g, '');
+    };
+    return Object.assign(Object.assign({}, colors), { getCommonColor });
+}

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

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 import type { ErrorResponse, IssueMessage } from '../../../../types/api/query';
 import './Issues.scss';
 interface ResultIssuesProps {
     data: ErrorResponse | string;
 }
-export declare function ResultIssues({ data }: ResultIssuesProps): JSX.Element;
+export declare function ResultIssues({ data }: ResultIssuesProps): import("react/jsx-runtime").JSX.Element;
 interface IssuesProps {
     issues: IssueMessage[] | null | undefined;
 }
-export declare function Issues({ issues }: IssuesProps): JSX.Element;
+export declare function Issues({ issues }: IssuesProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import cn from 'bem-cn-lite';
-import { Button, Icon, ArrowToggle } from '@gravity-ui/uikit';
+import React from 'react';
+import { ArrowToggle, Button, Icon } from '@gravity-ui/uikit';
 import ShortyString from '../../../../components/ShortyString/ShortyString';
-import fatalIcon from '../../../../assets/icons/circle-xmark.svg';
-import errorIcon from '../../../../assets/icons/triangle-exclamation.svg';
+import { cn } from '../../../../utils/cn';
+import { getSeverity } from './models';
 import warningIcon from '../../../../assets/icons/circle-exclamation.svg';
 import infoIcon from '../../../../assets/icons/circle-info.svg';
-import { getSeverity } from './models';
+import fatalIcon from '../../../../assets/icons/circle-xmark.svg';
+import errorIcon from '../../../../assets/icons/triangle-exclamation.svg';
 import './Issues.scss';
 const blockWrapper = cn('kv-result-issues');
 const blockIssues = cn('kv-issues');
@@ -24,11 +24,11 @@ export function ResultIssues({ data }) {
         }
         else {
             const severity = getSeverity((_a = data === null || data === void 0 ? void 0 : data.error) === null || _a === void 0 ? void 0 : _a.severity);
-            content = (_jsxs(React.Fragment, { children: [_jsx(IssueSeverity, { severity: severity }), ' ', _jsx("span", Object.assign({ className: blockWrapper('error-message-text') }, { children: (_b = data === null || data === void 0 ? void 0 : data.error) === null || _b === void 0 ? void 0 : _b.message }))] }));
+            content = (_jsxs(React.Fragment, { children: [_jsx(IssueSeverity, { severity: severity }), ' ', _jsx("span", { className: blockWrapper('error-message-text'), children: (_b = data === null || data === void 0 ? void 0 : data.error) === null || _b === void 0 ? void 0 : _b.message })] }));
         }
         return content;
     };
-    return (_jsxs("div", Object.assign({ className: blockWrapper() }, { children: [_jsxs("div", Object.assign({ className: blockWrapper('error-message') }, { children: [renderTitle(), hasIssues && (_jsx(Button, Object.assign({ view: "normal", onClick: () => setShowIssues(!showIssues) }, { children: showIssues ? 'Hide details' : 'Show details' })))] })), hasIssues && showIssues && _jsx(Issues, { issues: issues })] })));
+    return (_jsxs("div", { className: blockWrapper(), children: [_jsxs("div", { className: blockWrapper('error-message'), children: [renderTitle(), hasIssues && (_jsx(Button, { view: "normal", onClick: () => setShowIssues(!showIssues), children: showIssues ? 'Hide details' : 'Show details' }))] }), hasIssues && showIssues && _jsx(Issues, { issues: issues })] }));
 }
 export function Issues({ issues }) {
     const mostSevereIssue = issues === null || issues === void 0 ? void 0 : issues.reduce((result, issue) => {
@@ -36,7 +36,7 @@ export function Issues({ issues }) {
         const severity = (_a = issue.severity) !== null && _a !== void 0 ? _a : 10;
         return Math.min(result, severity);
     }, 10);
-    return (_jsx("div", Object.assign({ className: blockIssues(null) }, { children: issues === null || issues === void 0 ? void 0 : issues.map((issue, index) => (_jsx(Issue, { issue: issue, expanded: issue === mostSevereIssue }, index))) })));
+    return (_jsx("div", { className: blockIssues(null), children: issues === null || issues === void 0 ? void 0 : issues.map((issue, index) => (_jsx(Issue, { issue: issue, expanded: issue === mostSevereIssue }, index))) }));
 }
 function Issue({ issue, level = 0 }) {
     const [isExpand, setIsExpand] = React.useState(true);
@@ -45,14 +45,14 @@ function Issue({ issue, level = 0 }) {
     const issues = issue.issues;
     const hasIssues = Array.isArray(issues) && issues.length > 0;
     const arrowDirection = isExpand ? 'bottom' : 'right';
-    return (_jsxs("div", Object.assign({ className: blockIssue({
+    return (_jsxs("div", { className: blockIssue({
             leaf: !hasIssues,
             'has-issues': hasIssues,
-        }) }, { children: [_jsxs("div", Object.assign({ className: blockIssue('line') }, { children: [hasIssues && (_jsx(Button, Object.assign({ view: "flat-secondary", onClick: () => setIsExpand(!isExpand), className: blockIssue('arrow-toggle') }, { children: _jsx(ArrowToggle, { direction: arrowDirection, size: 16 }) }))), _jsx(IssueSeverity, { severity: severity }), _jsxs("span", Object.assign({ className: blockIssue('message') }, { children: [position && (_jsx("span", Object.assign({ className: blockIssue('place-text'), title: "Position" }, { children: position }))), _jsx("div", Object.assign({ className: blockIssue('message-text') }, { children: _jsx(ShortyString, { value: issue.message, expandLabel: 'Show full message' }) }))] })), issue.issue_code ? (_jsxs("span", Object.assign({ className: blockIssue('code') }, { children: ["Code: ", issue.issue_code] }))) : null] })), hasIssues && isExpand && (_jsx("div", Object.assign({ className: blockIssue('issues') }, { children: _jsx(IssueList, { issues: issues, level: level + 1, expanded: isExpand }) })))] })));
+        }), children: [_jsxs("div", { className: blockIssue('line'), children: [hasIssues && (_jsx(Button, { view: "flat-secondary", onClick: () => setIsExpand(!isExpand), className: blockIssue('arrow-toggle'), children: _jsx(ArrowToggle, { direction: arrowDirection, size: 16 }) })), _jsx(IssueSeverity, { severity: severity }), _jsxs("span", { className: blockIssue('message'), children: [position && (_jsx("span", { className: blockIssue('place-text'), title: "Position", children: position })), _jsx("div", { className: blockIssue('message-text'), children: _jsx(ShortyString, { value: issue.message, expandLabel: 'Show full message' }) })] }), issue.issue_code ? (_jsxs("span", { className: blockIssue('code'), children: ["Code: ", issue.issue_code] })) : null] }), hasIssues && isExpand && (_jsx("div", { className: blockIssue('issues'), children: _jsx(IssueList, { issues: issues, level: level + 1, expanded: isExpand }) }))] }));
 }
 function IssueList(props) {
     const { issues, level, expanded } = props;
-    return (_jsx("div", Object.assign({ className: blockIssue('list') }, { children: issues.map((issue, index) => (_jsx(Issue, { issue: issue, level: level, expanded: expanded }, index))) })));
+    return (_jsx("div", { className: blockIssue('list'), children: issues.map((issue, index) => (_jsx(Issue, { issue: issue, level: level, expanded: expanded }, index))) }));
 }
 const severityIcons = {
     S_INFO: infoIcon,
@@ -63,7 +63,7 @@ const severityIcons = {
 const blockIssueSeverity = cn('yql-issue-severity');
 function IssueSeverity({ severity }) {
     const shortenSeverity = severity.slice(2).toLowerCase();
-    return (_jsxs("span", Object.assign({ className: blockIssueSeverity({ severity: shortenSeverity }) }, { children: [_jsx(Icon, { className: blockIssueSeverity('icon'), data: severityIcons[severity], size: 16 }), _jsx("span", Object.assign({ className: blockIssueSeverity('title') }, { children: shortenSeverity }))] })));
+    return (_jsxs("span", { className: blockIssueSeverity({ severity: shortenSeverity }), children: [_jsx(Icon, { className: blockIssueSeverity('icon'), data: severityIcons[severity], size: 16 }), _jsx("span", { className: blockIssueSeverity('title'), children: shortenSeverity })] }));
 }
 function getIssuePosition(issue) {
     const { position = {} } = issue;

package/dist/containers/Tenant/Query/Issues/models.d.ts

@@ -1,4 +1,4 @@
 export declare const SEVERITY_LIST: readonly ["S_FATAL", "S_ERROR", "S_WARNING", "S_INFO"];
-export type SEVERITY = typeof SEVERITY_LIST[number];
+export type SEVERITY = (typeof SEVERITY_LIST)[number];
 export declare function isSeverity(value: number | undefined): boolean;
 export declare function getSeverity(value: number | undefined): "S_FATAL" | "S_ERROR" | "S_WARNING" | "S_INFO";

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

@@ -4,5 +4,5 @@ interface PreviewProps {
     database: string;
     type: EPathType | undefined;
 }
-export declare const Preview: ({ database, type }: PreviewProps) => JSX.Element;
+export declare const Preview: ({ database, type }: PreviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,58 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import cn from 'bem-cn-lite';
-import { Loader, Button } from '@gravity-ui/uikit';
-import { sendQuery, setQueryOptions } from '../../../../store/reducers/preview';
-import { setShowPreview } from '../../../../store/reducers/schema/schema';
-import { prepareQueryError } from '../../../../utils/query';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
-import { Icon } from '../../../../components/Icon';
+import { Button, Loader } from '@gravity-ui/uikit';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import { Icon } from '../../../../components/Icon';
 import { QueryResultTable } from '../../../../components/QueryResultTable';
-import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import { previewApi } from '../../../../store/reducers/preview';
+import { setShowPreview } from '../../../../store/reducers/schema/schema';
+import { cn } from '../../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { prepareQueryError } from '../../../../utils/query';
 import { isExternalTable, isTableType } from '../../utils/schema';
 import i18n from '../i18n';
 import './Preview.scss';
 const b = cn('kv-preview');
 export const Preview = ({ database, type }) => {
     const dispatch = useTypedDispatch();
-    const { data = {}, loading, error, wasLoaded } = useTypedSelector((state) => state.preview);
     const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
-    const sendQueryForPreview = useCallback((isBackground) => {
-        if (!isTableType(type)) {
-            return;
-        }
-        if (!isBackground) {
-            dispatch(setQueryOptions({
-                wasLoaded: false,
-                data: undefined,
-            }));
-        }
-        const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
-        dispatch(sendQuery({
-            query,
-            database,
-            action: isExternalTable(type) ? 'execute-query' : 'execute-scan',
-        }));
-    }, [dispatch, database, currentSchemaPath, type]);
-    useAutofetcher(sendQueryForPreview, [sendQueryForPreview], autorefresh);
+    const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
+    const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTable(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const data = currentData !== null && currentData !== void 0 ? currentData : {};
     const handleClosePreview = () => {
         dispatch(setShowPreview(false));
     };
     const renderHeader = () => {
-        return (_jsxs("div", Object.assign({ className: b('header') }, { children: [_jsxs("div", Object.assign({ className: b('title') }, { children: [i18n('preview.title'), ' ', _jsx("div", Object.assign({ className: b('table-name') }, { children: currentSchemaPath }))] })), _jsxs("div", Object.assign({ className: b('controls-left') }, { children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(Button, Object.assign({ view: "flat-secondary", onClick: handleClosePreview, title: i18n('preview.close') }, { children: _jsx(Icon, { name: "close", viewBox: '0 0 16 16', width: 16, height: 16 }) }))] }))] })));
+        return (_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('title'), children: [i18n('preview.title'), ' ', _jsx("div", { className: b('table-name'), children: currentSchemaPath })] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(Button, { view: "flat-secondary", onClick: handleClosePreview, title: i18n('preview.close'), children: _jsx(Icon, { name: "close", viewBox: '0 0 16 16', width: 16, height: 16 }) })] })] }));
     };
-    if (loading && !wasLoaded) {
-        return (_jsx("div", Object.assign({ className: b('loader-container') }, { children: _jsx(Loader, { size: "m" }) })));
+    if (loading) {
+        return (_jsx("div", { className: b('loader-container'), children: _jsx(Loader, { size: "m" }) }));
     }
     let message;
     if (!isTableType(type)) {
-        message = _jsx("div", Object.assign({ className: b('message-container') }, { children: i18n('preview.not-available') }));
+        message = _jsx("div", { className: b('message-container'), children: i18n('preview.not-available') });
     }
     else if (error) {
-        message = _jsx("div", Object.assign({ className: b('message-container', 'error') }, { children: prepareQueryError(error) }));
+        message = _jsx("div", { className: b('message-container', 'error'), children: prepareQueryError(error) });
     }
-    const content = message !== null && message !== void 0 ? message : (_jsx("div", Object.assign({ className: b('result') }, { children: _jsx(QueryResultTable, { data: data.result, columns: data.columns }) })));
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [renderHeader(), isFullscreen ? _jsx(Fullscreen, { children: content }) : content] })));
+    const content = message !== null && message !== void 0 ? message : (_jsx("div", { className: b('result'), children: _jsx(QueryResultTable, { data: data.result, columns: data.columns }) }));
+    return (_jsxs("div", { className: b(), children: [renderHeader(), isFullscreen ? _jsx(Fullscreen, { children: content }) : content] }));
 };

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import './QueriesHistory.scss';
 interface QueriesHistoryProps {
     changeUserInput: (value: {
         input: string;
     }) => void;
 }
-declare function QueriesHistory({ changeUserInput }: QueriesHistoryProps): JSX.Element;
+declare function QueriesHistory({ changeUserInput }: QueriesHistoryProps): import("react/jsx-runtime").JSX.Element;
 export default QueriesHistory;

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
 import DataTable from '@gravity-ui/react-data-table';
 import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
-import { setQueryTab } from '../../../../store/reducers/tenant/tenant';
 import { selectQueriesHistory } from '../../../../store/reducers/executeQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
+import { setQueryTab } from '../../../../store/reducers/tenant/tenant';
+import { cn } from '../../../../utils/cn';
 import { useQueryModes, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { QUERY_MODES, QUERY_SYNTAX } from '../../../../utils/query';
 import { MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS } from '../../utils/constants';
 import i18n from '../i18n';
 import './QueriesHistory.scss';
-const b = block('ydb-queries-history');
+const b = cn('ydb-queries-history');
 function QueriesHistory({ changeUserInput }) {
     const dispatch = useTypedDispatch();
     const [queryMode, setQueryMode] = useQueryModes();
@@ -32,7 +32,7 @@ function QueriesHistory({ changeUserInput }) {
             name: 'queryText',
             header: 'Query Text',
             render: ({ row }) => {
-                return (_jsx("div", Object.assign({ className: b('query') }, { children: _jsx(TruncatedQuery, { value: row.queryText, maxQueryHeight: MAX_QUERY_HEIGHT }) })));
+                return (_jsx("div", { className: b('query'), children: _jsx(TruncatedQuery, { value: row.queryText, maxQueryHeight: MAX_QUERY_HEIGHT }) }));
             },
             sortable: false,
         },
@@ -46,6 +46,6 @@ function QueriesHistory({ changeUserInput }) {
             width: 200,
         },
     ];
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: reversedHistory, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('history.empty'), onRowClick: (row) => onQueryClick(row), rowClassName: () => b('table-row') }) })));
+    return (_jsx("div", { className: b(), children: _jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: reversedHistory, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('history.empty'), onRowClick: (row) => onQueryClick(row), rowClassName: () => b('table-row') }) }));
 }
 export default QueriesHistory;

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

@@ -3,7 +3,7 @@ import './Query.scss';
 interface QueryProps {
     theme: string;
     path: string;
-    type: EPathType;
+    type?: EPathType;
 }
-export declare const Query: (props: QueryProps) => JSX.Element;
+export declare const Query: (props: QueryProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
-import block from 'bem-cn-lite';
 import { changeUserInput } from '../../../store/reducers/executeQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
-import { useSetting, useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
+import { cn } from '../../../utils/cn';
 import { SAVED_QUERIES_KEY } from '../../../utils/constants';
-import { QueryTabs, queryEditorTabs } from './QueryTabs/QueryTabs';
-import { SavedQueries } from './SavedQueries/SavedQueries';
+import { useSetting, useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import QueriesHistory from './QueriesHistory/QueriesHistory';
 import QueryEditor from './QueryEditor/QueryEditor';
+import { QueryTabs, queryEditorTabs } from './QueryTabs/QueryTabs';
+import { SavedQueries } from './SavedQueries/SavedQueries';
 import './Query.scss';
-const b = block('ydb-query');
+const b = cn('ydb-query');
 export const Query = (props) => {
     const dispatch = useTypedDispatch();
     const { queryTab = TENANT_QUERY_TABS_ID.newQuery } = useTypedSelector((state) => state.tenant);
@@ -40,5 +40,5 @@ export const Query = (props) => {
             }
         }
     };
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, _jsx(QueryTabs, { className: b('tabs'), activeTab: queryTab }), _jsx("div", Object.assign({ className: b('content') }, { children: renderContent() }))] })));
+    return (_jsxs("div", { className: b(), children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, _jsx(QueryTabs, { className: b('tabs'), activeTab: queryTab }), _jsx("div", { className: b('content'), children: renderContent() })] }));
 };

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

@@ -2,5 +2,5 @@ import './QueryDuration.scss';
 interface QueryDurationProps {
     duration?: string | number;
 }
-export declare const QueryDuration: ({ duration }: QueryDurationProps) => JSX.Element | null;
+export declare const QueryDuration: ({ duration }: QueryDurationProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
-import { formatDurationToShortTimeFormat, parseUsToMs } from '../../../../utils/timeParsers';
 import { LabelWithPopover } from '../../../../components/LabelWithPopover';
+import { cn } from '../../../../utils/cn';
+import { formatDurationToShortTimeFormat, parseUsToMs } from '../../../../utils/timeParsers';
 import i18n from '../i18n';
 import './QueryDuration.scss';
-const b = block('ydb-query-duration');
+const b = cn('ydb-query-duration');
 export const QueryDuration = ({ duration }) => {
     if (!duration) {
         return null;
     }
     const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
-    return (_jsx("span", Object.assign({ className: b() }, { children: _jsx(LabelWithPopover, { className: b('item-with-popover'), contentClassName: b('popover'), text: parsedDuration, popoverContent: i18n('query-duration.description') }) })));
+    return (_jsx("span", { className: b(), children: _jsx(LabelWithPopover, { className: b('item-with-popover'), contentClassName: b('popover'), text: parsedDuration, popoverContent: i18n('query-duration.description') }) }));
 };

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

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { sendExecuteQuery, saveQueryToHistory, goToPreviousQuery, goToNextQuery, setTenantPath } from '../../../../store/reducers/executeQuery';
+import React from 'react';
+import { goToNextQuery, goToPreviousQuery, saveQueryToHistory, sendExecuteQuery, setTenantPath } from '../../../../store/reducers/executeQuery';
 import { getExplainQuery, getExplainQueryAst } from '../../../../store/reducers/explainQuery';
 import { setShowPreview } from '../../../../store/reducers/schema/schema';
+import type { EPathType } from '../../../../types/api/schema';
 import type { ExecuteQueryState } from '../../../../types/store/executeQuery';
 import type { ExplainQueryState } from '../../../../types/store/explainQuery';
-import type { EPathType } from '../../../../types/api/schema';
 import './QueryEditor.scss';
 interface QueryEditorProps {
     path: string;
@@ -20,11 +20,20 @@ interface QueryEditorProps {
     executeQuery: ExecuteQueryState;
     explainQuery: ExplainQueryState;
     theme: string;
-    type: EPathType;
+    type?: EPathType;
     showPreview: boolean;
     setShowPreview: (...args: Parameters<typeof setShowPreview>) => void;
     saveQueryToHistory: (...args: Parameters<typeof saveQueryToHistory>) => void;
 }
-declare function QueryEditor(props: QueryEditorProps): JSX.Element;
-declare const _default: import("react-redux").ConnectedComponent<typeof QueryEditor, import("react-redux").Omit<QueryEditorProps, "executeQuery" | "explainQuery" | "setTenantPath" | "showPreview" | "sendExecuteQuery" | "saveQueryToHistory" | "goToPreviousQuery" | "goToNextQuery" | "getExplainQuery" | "getExplainQueryAst" | "setShowPreview">>;
+declare function QueryEditor(props: QueryEditorProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react-redux").ConnectedComponent<typeof QueryEditor, {
+    theme: string;
+    type?: EPathType | undefined;
+    path: string;
+    changeUserInput: (arg: {
+        input: string;
+    }) => void;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
+}>;
 export default _default;

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

@@ -1,24 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer, useRef, useState } from 'react';
+import React from 'react';
+import throttle from 'lodash/throttle';
 import { connect } from 'react-redux';
-import cn from 'bem-cn-lite';
-import _ from 'lodash';
-import MonacoEditor from 'react-monaco-editor';
+import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
 import SplitPane from '../../../../components/SplitPane';
-import { sendExecuteQuery, saveQueryToHistory, goToPreviousQuery, goToNextQuery, setTenantPath, } from '../../../../store/reducers/executeQuery';
+import { goToNextQuery, goToPreviousQuery, saveQueryToHistory, sendExecuteQuery, setTenantPath, } from '../../../../store/reducers/executeQuery';
 import { getExplainQuery, getExplainQueryAst } from '../../../../store/reducers/explainQuery';
 import { setShowPreview } from '../../../../store/reducers/schema/schema';
-import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, SAVED_QUERIES_KEY, LAST_USED_QUERY_ACTION_KEY, QUERY_USE_MULTI_SCHEMA_KEY, } from '../../../../utils/constants';
-import { useSetting, useQueryModes } from '../../../../utils/hooks';
+import { cn } from '../../../../utils/cn';
+import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, LAST_USED_QUERY_ACTION_KEY, QUERY_USE_MULTI_SCHEMA_KEY, SAVED_QUERIES_KEY, } from '../../../../utils/constants';
+import { useQueryModes, useSetting } from '../../../../utils/hooks';
 import { QUERY_ACTIONS } from '../../../../utils/query';
 import { parseJson } from '../../../../utils/utils';
-import { useEditorOptions } from './helpers';
 import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from '../../utils/paneVisibilityToggleHelpers';
-import { Preview } from '../Preview/Preview';
 import { ExecuteResult } from '../ExecuteResult/ExecuteResult';
 import { ExplainResult } from '../ExplainResult/ExplainResult';
+import { Preview } from '../Preview/Preview';
 import { QueryEditorControls } from '../QueryEditorControls/QueryEditorControls';
 import i18n from '../i18n';
+import { useEditorOptions } from './helpers';
 import './QueryEditor.scss';
 const CONTEXT_MENU_GROUP_ID = 'navigation';
 const RESULT_TYPES = {
@@ -39,14 +39,14 @@ function QueryEditor(props) {
     const editorOptions = useEditorOptions();
     const { path, setTenantPath: setPath, executeQuery, explainQuery, type, theme, changeUserInput, showPreview, } = props;
     const { tenantPath: savedPath } = executeQuery;
-    const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
-    const [isResultLoaded, setIsResultLoaded] = useState(false);
+    const [resultType, setResultType] = React.useState(RESULT_TYPES.EXECUTE);
+    const [isResultLoaded, setIsResultLoaded] = React.useState(false);
     const [queryMode, setQueryMode] = useQueryModes();
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
     const [savedQueries, setSavedQueries] = useSetting(SAVED_QUERIES_KEY);
-    const [monacoHotKey, setMonacoHotKey] = useState(null);
-    useEffect(() => {
+    const [monacoHotKey, setMonacoHotKey] = React.useState(null);
+    React.useEffect(() => {
         if (savedPath !== path) {
             if (savedPath) {
                 changeUserInput({ input: '' });
@@ -54,15 +54,15 @@ function QueryEditor(props) {
             setPath(path);
         }
     }, [changeUserInput, setPath, path, savedPath]);
-    const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED), initialTenantCommonInfoState);
-    const editorRef = useRef();
-    useEffect(() => {
+    const [resultVisibilityState, dispatchResultVisibilityState] = React.useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED), initialTenantCommonInfoState);
+    const editorRef = React.useRef();
+    React.useEffect(() => {
         const updateEditor = () => {
             if (editorRef.current) {
                 editorRef.current.layout();
             }
         };
-        const onChangeWindow = _.throttle(() => {
+        const onChangeWindow = throttle(() => {
             updateEditor();
         }, 100);
         updateEditor();
@@ -71,7 +71,7 @@ function QueryEditor(props) {
             window.removeEventListener('resize', onChangeWindow);
         };
     }, []);
-    useEffect(() => {
+    React.useEffect(() => {
         const storageEventHandler = (event) => {
             if (event.key === SAVED_QUERIES_KEY) {
                 const v = parseJson(event.newValue);
@@ -83,10 +83,10 @@ function QueryEditor(props) {
             window.removeEventListener('storage', storageEventHandler);
         };
     }, [setSavedQueries]);
-    useEffect(() => {
+    React.useEffect(() => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     }, []);
-    useEffect(() => {
+    React.useEffect(() => {
         if (props.showPreview || isResultLoaded) {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
         }
@@ -94,7 +94,7 @@ function QueryEditor(props) {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
         }
     }, [props.showPreview, isResultLoaded]);
-    useEffect(() => {
+    React.useEffect(() => {
         var _a;
         const { input, history } = executeQuery;
         const hasUnsavedInput = input
@@ -154,7 +154,7 @@ function QueryEditor(props) {
         props.setShowPreview(false);
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
-    useEffect(() => {
+    React.useEffect(() => {
         var _a, _b;
         if (monacoHotKey === null) {
             return;
@@ -284,9 +284,9 @@ function QueryEditor(props) {
     const renderControls = () => {
         return (_jsx(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, runIsLoading: executeQuery.loading, onExplainButtonClick: handleGetExplainQueryClick, explainIsLoading: explainQuery.loading, onSaveQueryClick: onSaveQueryHandler, savedQueries: savedQueries, disabled: !executeQuery.input, onUpdateQueryMode: setQueryMode, queryMode: queryMode, highlightedAction: lastUsedQueryAction }));
     };
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs(SplitPane, Object.assign({ direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_RESULT_PANE_KEY, triggerCollapse: resultVisibilityState.triggerCollapse, triggerExpand: resultVisibilityState.triggerExpand, minSize: [0, 52], collapsedSizes: [100, 0], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsxs("div", Object.assign({ className: b('pane-wrapper', {
+    return (_jsx("div", { className: b(), children: _jsxs(SplitPane, { direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_RESULT_PANE_KEY, triggerCollapse: resultVisibilityState.triggerCollapse, triggerExpand: resultVisibilityState.triggerExpand, minSize: [0, 52], collapsedSizes: [100, 0], onSplitStartDragAdditional: onSplitStartDragAdditional, children: [_jsxs("div", { className: b('pane-wrapper', {
                         top: true,
-                    }) }, { children: [_jsx("div", Object.assign({ className: b('monaco-wrapper') }, { children: _jsx("div", Object.assign({ className: b('monaco') }, { children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) })) })), renderControls()] })), _jsx("div", Object.assign({ className: b('pane-wrapper') }, { children: _jsx(Result, { executeQuery: executeQuery, explainQuery: explainQuery, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, handleAstQuery: handleAstQuery, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) }))] })) })));
+                    }), children: [_jsx("div", { className: b('monaco-wrapper'), children: _jsx("div", { className: b('monaco'), children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) }) }), renderControls()] }), _jsx("div", { className: b('pane-wrapper'), children: _jsx(Result, { executeQuery: executeQuery, explainQuery: explainQuery, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, handleAstQuery: handleAstQuery, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) })] }) }));
 }
 const mapStateToProps = (state) => {
     return {

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

@@ -1,5 +1,5 @@
+import React from 'react';
 import { ENABLE_AUTOCOMPLETE, useSetting } from '../../../../lib';
-import { useMemo } from 'react';
 export const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -9,7 +9,7 @@ export const EDITOR_OPTIONS = {
 };
 export function useEditorOptions() {
     const [enableAutocomplete] = useSetting(ENABLE_AUTOCOMPLETE);
-    const options = useMemo(() => {
+    const options = React.useMemo(() => {
         const useAutocomplete = Boolean(enableAutocomplete);
         return Object.assign({ quickSuggestions: useAutocomplete, suggestOnTriggerCharacters: useAutocomplete }, EDITOR_OPTIONS);
     }, [enableAutocomplete]);

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

@@ -12,5 +12,5 @@ interface QueryEditorControlsProps {
     queryMode: QueryMode;
     highlightedAction: QueryAction;
 }
-export declare const QueryEditorControls: ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlightedAction, }: QueryEditorControlsProps) => JSX.Element;
+export declare const QueryEditorControls: ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlightedAction, }: QueryEditorControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
+import React from 'react';
 import { Button, DropdownMenu } from '@gravity-ui/uikit';
-import { useMemo } from 'react';
-import { QUERY_MODES, QUERY_MODES_TITLES } from '../../../../utils/query';
 import { Icon } from '../../../../components/Icon';
 import { LabelWithPopover } from '../../../../components/LabelWithPopover';
+import { cn } from '../../../../utils/cn';
+import { QUERY_MODES, QUERY_MODES_TITLES } from '../../../../utils/query';
 import SaveQuery from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 import './QueryEditorControls.scss';
 const queryModeSelectorQa = 'query-mode-selector';
 const queryModeSelectorPopupQa = 'query-mode-selector-popup';
-const b = block('ydb-query-editor-controls');
+const b = cn('ydb-query-editor-controls');
 const QueryModeSelectorOptions = {
     [QUERY_MODES.script]: {
         title: QUERY_MODES_TITLES[QUERY_MODES.script],
@@ -34,7 +34,7 @@ const QueryModeSelectorOptions = {
     },
 };
 export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlightedAction, }) => {
-    const querySelectorMenuItems = useMemo(() => {
+    const querySelectorMenuItems = React.useMemo(() => {
         return Object.entries(QueryModeSelectorOptions).map(([mode, { title, description }]) => {
             return {
                 text: (_jsx(LabelWithPopover, { className: b('item-with-popover'), contentClassName: b('popover'), text: title, popoverContent: description })),
@@ -46,12 +46,12 @@ export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainB
     }, [onUpdateQueryMode]);
     const runView = highlightedAction === 'execute' ? 'action' : undefined;
     const explainView = highlightedAction === 'explain' ? 'action' : undefined;
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('left') }, { children: [_jsxs(Button, Object.assign({ onClick: () => {
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('left'), children: [_jsxs(Button, { onClick: () => {
                             onRunButtonClick(queryMode);
-                        }, disabled: disabled, loading: runIsLoading, view: runView }, { children: [_jsx(Icon, { name: "startPlay", viewBox: "0 0 16 16", width: 16, height: 16 }), 'Run'] })), _jsx(Button, Object.assign({ onClick: () => {
+                        }, disabled: disabled, loading: runIsLoading, view: runView, children: [_jsx(Icon, { name: "startPlay", viewBox: "0 0 16 16", width: 16, height: 16 }), 'Run'] }), _jsx(Button, { onClick: () => {
                             onExplainButtonClick(queryMode);
-                        }, disabled: disabled, loading: explainIsLoading, view: explainView }, { children: "Explain" })), _jsx("div", Object.assign({ className: b('mode-selector') }, { children: _jsx(DropdownMenu, { items: querySelectorMenuItems, popupProps: {
+                        }, disabled: disabled, loading: explainIsLoading, view: explainView, children: "Explain" }), _jsx("div", { className: b('mode-selector'), children: _jsx(DropdownMenu, { items: querySelectorMenuItems, popupProps: {
                                 className: b('mode-selector__popup'),
                                 qa: queryModeSelectorPopupQa,
-                            }, switcher: _jsx(Button, Object.assign({ className: b('mode-selector__button'), qa: queryModeSelectorQa }, { children: _jsxs("span", Object.assign({ className: b('mode-selector__button-content') }, { children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { name: "chevron-down", width: 16, height: 16 })] })) })) }) }))] })), _jsx(SaveQuery, { savedQueries: savedQueries, onSaveQuery: onSaveQueryClick, saveButtonDisabled: disabled })] })));
+                            }, switcher: _jsx(Button, { className: b('mode-selector__button'), qa: queryModeSelectorQa, children: _jsxs("span", { className: b('mode-selector__button-content'), children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { name: "chevron-down", width: 16, height: 16 })] }) }) }) })] }), _jsx(SaveQuery, { savedQueries: savedQueries, onSaveQuery: onSaveQueryClick, saveButtonDisabled: disabled })] }));
 };

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss

@@ -3,12 +3,11 @@
     flex: 0 0 40px;
     justify-content: space-between;
     align-items: flex-end;
+    gap: 24px;
 
     min-height: 40px;
     padding: 5px 0px;
 
-    gap: 24px;
-
     &__left {
         display: flex;
         gap: 12px;

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

@@ -13,5 +13,5 @@ interface QueryEditorTabsProps {
     className?: string;
     activeTab?: TenantQueryTab;
 }
-export declare const QueryTabs: ({ className, activeTab }: QueryEditorTabsProps) => JSX.Element;
+export declare const QueryTabs: ({ className, activeTab }: QueryEditorTabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};