ydb-embedded-ui 4.33.0 → 5.1.0

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

@@ -1,173 +0,0 @@
-import * as React from 'react';
-import cn from 'bem-cn-lite';
-
-import {Button, Icon, ArrowToggle} from '@gravity-ui/uikit';
-import ShortyString from '../../../../components/ShortyString/ShortyString';
-
-import type {ErrorResponse, IssueMessage} from '../../../../types/api/query';
-
-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 {SEVERITY, getSeverity} from './models';
-
-import './Issues.scss';
-
-const blockWrapper = cn('kv-result-issues');
-const blockIssues = cn('kv-issues');
-const blockIssue = cn('kv-issue');
-
-interface ResultIssuesProps {
-    data: ErrorResponse | string;
-}
-
-export function ResultIssues({data}: ResultIssuesProps) {
-    const [showIssues, setShowIssues] = React.useState(false);
-
-    const issues = typeof data === 'string' ? undefined : data?.issues;
-    const hasIssues = Array.isArray(issues) && issues.length > 0;
-
-    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={issues} />}
-        </div>
-    );
-}
-
-interface IssuesProps {
-    issues: IssueMessage[] | null | undefined;
-}
-export function Issues({issues}: IssuesProps) {
-    const mostSevereIssue = issues?.reduce((result, issue) => {
-        const severity = issue.severity ?? 10;
-        return Math.min(result, severity);
-    }, 10);
-    return (
-        <div className={blockIssues(null)}>
-            {issues?.map((issue, index) => (
-                <Issue key={index} issue={issue} expanded={issue === mostSevereIssue} />
-            ))}
-        </div>
-    );
-}
-
-function Issue({issue, level = 0}: {issue: IssueMessage; expanded?: boolean; level?: number}) {
-    const [isExpand, setIsExpand] = React.useState(true);
-    const severity = getSeverity(issue.severity);
-    const position = getIssuePosition(issue);
-
-    const issues = issue.issues;
-    const hasIssues = Array.isArray(issues) && issues.length > 0;
-
-    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.issue_code ? (
-                    <span className={blockIssue('code')}>Code: {issue.issue_code}</span>
-                ) : null}
-            </div>
-            {hasIssues && isExpand && (
-                <div className={blockIssue('issues')}>
-                    <IssueList issues={issues} level={level + 1} expanded={isExpand} />
-                </div>
-            )}
-        </div>
-    );
-}
-
-function IssueList(props: {issues: IssueMessage[]; 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, SVGIconData> = {
-    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: IssueMessage) {
-    const {position = {}} = issue;
-
-    if (!position) {
-        return false;
-    }
-
-    const {file, row, column} = position;
-
-    return `${file ? 'file:' : ''}${row}:${column}`;
-}

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

@@ -1,16 +0,0 @@
-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/Query/Preview/Preview.tsx

@@ -1,121 +0,0 @@
-import {useCallback} from 'react';
-import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
-
-import {Loader, Button} from '@gravity-ui/uikit';
-
-import type {EPathType} from '../../../../types/api/schema';
-import {sendQuery, setQueryOptions} from '../../../../store/reducers/preview';
-import {setShowPreview} from '../../../../store/reducers/schema/schema';
-import {prepareQueryError} from '../../../../utils/query';
-import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
-
-import {Icon} from '../../../../components/Icon';
-import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
-import {QueryResultTable} from '../../../../components/QueryResultTable';
-import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
-
-import {isExternalTable, isTableType} from '../../utils/schema';
-
-import i18n from '../i18n';
-
-import './Preview.scss';
-
-const b = cn('kv-preview');
-
-interface PreviewProps {
-    database: string;
-    type: EPathType | undefined;
-}
-
-export const Preview = ({database, type}: PreviewProps) => {
-    const dispatch = useDispatch();
-
-    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 handleClosePreview = () => {
-        dispatch(setShowPreview(false));
-    };
-
-    const renderHeader = () => {
-        return (
-            <div className={b('header')}>
-                <div className={b('title')}>
-                    {i18n('preview.title')}{' '}
-                    <div className={b('table-name')}>{currentSchemaPath}</div>
-                </div>
-                <div className={b('controls-left')}>
-                    <EnableFullscreenButton disabled={Boolean(error)} />
-                    <Button
-                        view="flat-secondary"
-                        onClick={handleClosePreview}
-                        title={i18n('preview.close')}
-                    >
-                        <Icon name="close" viewBox={'0 0 16 16'} width={16} height={16} />
-                    </Button>
-                </div>
-            </div>
-        );
-    };
-
-    if (loading && !wasLoaded) {
-        return (
-            <div className={b('loader-container')}>
-                <Loader size="m" />
-            </div>
-        );
-    }
-
-    let message;
-
-    if (!isTableType(type)) {
-        message = <div className={b('message-container')}>{i18n('preview.not-available')}</div>;
-    } else if (error) {
-        message = <div className={b('message-container', 'error')}>{prepareQueryError(error)}</div>;
-    }
-
-    const content = message ?? (
-        <div className={b('result')}>
-            <QueryResultTable data={data.result} columns={data.columns} />
-        </div>
-    );
-
-    return (
-        <div className={b()}>
-            {renderHeader()}
-            {isFullscreen ? <Fullscreen>{content}</Fullscreen> : content}
-        </div>
-    );
-};

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

@@ -1,84 +0,0 @@
-import {useDispatch} from 'react-redux';
-import block from 'bem-cn-lite';
-
-import DataTable, {Column} from '@gravity-ui/react-data-table';
-
-import type {QueryInHistory} from '../../../../types/store/executeQuery';
-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 {useQueryModes, 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');
-
-interface QueriesHistoryProps {
-    changeUserInput: (value: {input: string}) => void;
-}
-
-function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
-    const dispatch = useDispatch();
-
-    const [queryMode, setQueryMode] = useQueryModes();
-
-    const queriesHistory = useTypedSelector(selectQueriesHistory);
-    const reversedHistory = [...queriesHistory].reverse();
-
-    const onQueryClick = (query: QueryInHistory) => {
-        if (query.syntax === QUERY_SYNTAX.pg && queryMode !== QUERY_MODES.pg) {
-            setQueryMode(QUERY_MODES.pg);
-        } else if (query.syntax !== QUERY_SYNTAX.pg && queryMode === QUERY_MODES.pg) {
-            // Set query mode for queries with yql syntax
-            setQueryMode(QUERY_MODES.script);
-        }
-
-        changeUserInput({input: query.queryText});
-        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-    };
-
-    const columns: Column<QueryInHistory>[] = [
-        {
-            name: 'queryText',
-            header: 'Query Text',
-            render: ({row}) => {
-                return (
-                    <div className={b('query')}>
-                        <TruncatedQuery value={row.queryText} maxQueryHeight={MAX_QUERY_HEIGHT} />
-                    </div>
-                );
-            },
-            sortable: false,
-        },
-        {
-            name: 'syntax',
-            header: 'Syntax',
-            render: ({row}) => {
-                return row.syntax === QUERY_SYNTAX.pg ? 'PostgreSQL' : 'YQL';
-            },
-            sortable: false,
-            width: 200,
-        },
-    ];
-
-    return (
-        <div className={b()}>
-            <DataTable
-                theme="yandex-cloud"
-                columns={columns}
-                data={reversedHistory}
-                settings={QUERY_TABLE_SETTINGS}
-                emptyDataMessage={i18n('history.empty')}
-                onRowClick={(row) => onQueryClick(row)}
-                rowClassName={() => b('table-row')}
-            />
-        </div>
-    );
-}
-
-export default QueriesHistory;

package/dist/containers/Tenant/Query/Query.tsx

@@ -1,73 +0,0 @@
-import {useDispatch} from 'react-redux';
-import block from 'bem-cn-lite';
-
-import type {EPathType} from '../../../types/api/schema';
-import type {SavedQuery} from '../../../types/store/query';
-import {changeUserInput} from '../../../store/reducers/executeQuery';
-import {TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
-import {useSetting, useTypedSelector} from '../../../utils/hooks';
-import {SAVED_QUERIES_KEY} from '../../../utils/constants';
-
-import {QueryTabs} from './QueryTabs/QueryTabs';
-import {SavedQueries} from './SavedQueries/SavedQueries';
-import QueriesHistory from './QueriesHistory/QueriesHistory';
-import QueryEditor from './QueryEditor/QueryEditor';
-
-import './Query.scss';
-
-const b = block('ydb-query');
-
-interface QueryProps {
-    theme: string;
-    path?: string;
-    type?: EPathType;
-}
-
-export const Query = (props: QueryProps) => {
-    const dispatch = useDispatch();
-
-    const {queryTab = TENANT_QUERY_TABS_ID.newQuery} = useTypedSelector((state) => state.tenant);
-
-    const [savedQueries, setSavedQueries] = useSetting<SavedQuery[]>(SAVED_QUERIES_KEY, []);
-
-    const handleDeleteQuery = (queryName: string) => {
-        const newSavedQueries = savedQueries.filter(
-            (el) => el.name.toLowerCase() !== queryName.toLowerCase(),
-        );
-        setSavedQueries(newSavedQueries);
-    };
-
-    const handleUserInputChange = (value: {input: string}) => {
-        dispatch(changeUserInput(value));
-    };
-
-    const renderContent = () => {
-        switch (queryTab) {
-            case TENANT_QUERY_TABS_ID.newQuery: {
-                return <QueryEditor changeUserInput={handleUserInputChange} {...props} />;
-            }
-            case TENANT_QUERY_TABS_ID.history: {
-                return <QueriesHistory changeUserInput={handleUserInputChange} />;
-            }
-            case TENANT_QUERY_TABS_ID.saved: {
-                return (
-                    <SavedQueries
-                        changeUserInput={handleUserInputChange}
-                        savedQueries={savedQueries}
-                        onDeleteQuery={handleDeleteQuery}
-                    />
-                );
-            }
-            default: {
-                return null;
-            }
-        }
-    };
-
-    return (
-        <div className={b()}>
-            <QueryTabs className={b('tabs')} activeTab={queryTab} />
-            <div className={b('content')}>{renderContent()}</div>
-        </div>
-    );
-};

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

@@ -1,33 +0,0 @@
-import block from 'bem-cn-lite';
-
-import {formatDurationToShortTimeFormat, parseUsToMs} from '../../../../utils/timeParsers';
-import {LabelWithPopover} from '../../../../components/LabelWithPopover';
-
-import i18n from '../i18n';
-
-import './QueryDuration.scss';
-
-interface QueryDurationProps {
-    duration?: string | number;
-}
-
-const b = block('ydb-query-duration');
-
-export const QueryDuration = ({duration}: QueryDurationProps) => {
-    if (!duration) {
-        return null;
-    }
-
-    const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
-
-    return (
-        <span className={b()}>
-            <LabelWithPopover
-                className={b('item-with-popover')}
-                contentClassName={b('popover')}
-                text={parsedDuration}
-                popoverContent={i18n('query-duration.description')}
-            />
-        </span>
-    );
-};

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

@@ -1,143 +0,0 @@
-import block from 'bem-cn-lite';
-
-import {Button, ButtonView, DropdownMenu} from '@gravity-ui/uikit';
-import {useMemo} from 'react';
-
-import type {QueryAction, QueryMode} from '../../../../types/store/query';
-import {QUERY_MODES, QUERY_MODES_TITLES} from '../../../../utils/query';
-import {Icon} from '../../../../components/Icon';
-import {LabelWithPopover} from '../../../../components/LabelWithPopover';
-
-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 QueryModeSelectorOptions = {
-    [QUERY_MODES.script]: {
-        title: QUERY_MODES_TITLES[QUERY_MODES.script],
-        description: i18n('method-description.script'),
-    },
-    [QUERY_MODES.scan]: {
-        title: QUERY_MODES_TITLES[QUERY_MODES.scan],
-        description: i18n('method-description.scan'),
-    },
-    [QUERY_MODES.data]: {
-        title: QUERY_MODES_TITLES[QUERY_MODES.data],
-        description: i18n('method-description.data'),
-    },
-    [QUERY_MODES.query]: {
-        title: QUERY_MODES_TITLES[QUERY_MODES.query],
-        description: i18n('method-description.query'),
-    },
-    [QUERY_MODES.pg]: {
-        title: QUERY_MODES_TITLES[QUERY_MODES.pg],
-        description: i18n('method-description.pg'),
-    },
-} as const;
-
-interface QueryEditorControlsProps {
-    onRunButtonClick: (mode?: QueryMode) => void;
-    runIsLoading: boolean;
-    onExplainButtonClick: (mode?: QueryMode) => void;
-    explainIsLoading: boolean;
-    onSaveQueryClick: (queryName: string) => void;
-    savedQueries: unknown;
-    disabled: boolean;
-    onUpdateQueryMode: (mode: QueryMode) => void;
-    queryMode: QueryMode;
-    highlitedAction: QueryAction;
-}
-
-export const QueryEditorControls = ({
-    onRunButtonClick,
-    runIsLoading,
-    onExplainButtonClick,
-    explainIsLoading,
-    onSaveQueryClick,
-    savedQueries,
-    disabled,
-    onUpdateQueryMode,
-    queryMode,
-    highlitedAction,
-}: QueryEditorControlsProps) => {
-    const querySelectorMenuItems = useMemo(() => {
-        return Object.entries(QueryModeSelectorOptions).map(([mode, {title, description}]) => {
-            return {
-                text: (
-                    <LabelWithPopover
-                        className={b('item-with-popover')}
-                        contentClassName={b('popover')}
-                        text={title}
-                        popoverContent={description}
-                    />
-                ),
-                action: () => {
-                    onUpdateQueryMode(mode as QueryMode);
-                },
-            };
-        });
-    }, [onUpdateQueryMode]);
-
-    const runView: ButtonView | undefined = highlitedAction === 'execute' ? 'action' : undefined;
-    const explainView: ButtonView | undefined =
-        highlitedAction === 'explain' ? 'action' : undefined;
-
-    return (
-        <div className={b()}>
-            <div className={b('left')}>
-                <Button
-                    onClick={() => {
-                        onRunButtonClick(queryMode);
-                    }}
-                    disabled={disabled}
-                    loading={runIsLoading}
-                    view={runView}
-                >
-                    <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
-                    {'Run'}
-                </Button>
-                <Button
-                    onClick={() => {
-                        onExplainButtonClick(queryMode);
-                    }}
-                    disabled={disabled}
-                    loading={explainIsLoading}
-                    view={explainView}
-                >
-                    Explain
-                </Button>
-                <div className={b('mode-selector')}>
-                    <DropdownMenu
-                        items={querySelectorMenuItems}
-                        popupProps={{
-                            className: b('mode-selector__popup'),
-                            qa: queryModeSelectorPopupQa,
-                        }}
-                        switcher={
-                            <Button className={b('mode-selector__button')} qa={queryModeSelectorQa}>
-                                <span className={b('mode-selector__button-content')}>
-                                    {`${i18n('controls.query-mode-selector_type')} ${
-                                        QueryModeSelectorOptions[queryMode].title
-                                    }`}
-                                    <Icon name="chevron-down" width={16} height={16} />
-                                </span>
-                            </Button>
-                        }
-                    />
-                </div>
-            </div>
-            <SaveQuery
-                savedQueries={savedQueries}
-                onSaveQuery={onSaveQueryClick}
-                saveButtonDisabled={disabled}
-            />
-        </div>
-    );
-};