ydb-embedded-ui 4.32.0 → 5.0.0

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>
-    );
-};

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

@@ -1,59 +0,0 @@
-import {useLocation} from 'react-router';
-
-import {Tabs} from '@gravity-ui/uikit';
-
-import type {TenantQueryTab} from '../../../../store/reducers/tenant/types';
-import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
-import {InternalLink} from '../../../../components/InternalLink/InternalLink';
-import {parseQuery} from '../../../../routes';
-
-import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
-
-import i18n from '../i18n';
-
-const newQuery = {
-    id: TENANT_QUERY_TABS_ID.newQuery,
-    title: i18n('tabs.newQuery'),
-};
-const history = {
-    id: TENANT_QUERY_TABS_ID.history,
-    title: i18n('tabs.history'),
-};
-const saved = {
-    id: TENANT_QUERY_TABS_ID.saved,
-    title: i18n('tabs.saved'),
-};
-
-const queryEditorTabs = [newQuery, history, saved];
-
-interface QueryEditorTabsProps {
-    className?: string;
-    activeTab?: TenantQueryTab;
-}
-
-export const QueryTabs = ({className, activeTab}: QueryEditorTabsProps) => {
-    const location = useLocation();
-    const queryParams = parseQuery(location);
-
-    return (
-        <div className={className}>
-            <Tabs
-                size="l"
-                allowNotSelected={true}
-                activeTab={activeTab}
-                items={queryEditorTabs}
-                wrapTo={({id}, node) => {
-                    const path = getTenantPath({
-                        ...queryParams,
-                        [TenantTabsGroups.queryTab]: id,
-                    });
-                    return (
-                        <InternalLink to={path} key={id}>
-                            {node}
-                        </InternalLink>
-                    );
-                }}
-            />
-        </div>
-    );
-};

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

@@ -1,150 +0,0 @@
-import {MouseEvent, useState} from 'react';
-import {useDispatch} from 'react-redux';
-import block from 'bem-cn-lite';
-
-import {Dialog, Button} from '@gravity-ui/uikit';
-import DataTable, {Column} from '@gravity-ui/react-data-table';
-
-import type {SavedQuery} from '../../../../types/store/query';
-import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
-import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
-import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
-
-import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
-import {Icon} from '../../../../components/Icon';
-
-import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
-
-import i18n from '../i18n';
-
-import './SavedQueries.scss';
-
-const b = block('ydb-saved-queries');
-
-interface DeleteDialogProps {
-    visible: boolean;
-    queryName: string;
-    onCancelClick: VoidFunction;
-    onConfirmClick: VoidFunction;
-}
-
-const DeleteDialog = ({visible, queryName, onCancelClick, onConfirmClick}: DeleteDialogProps) => {
-    return (
-        <Dialog
-            open={visible}
-            hasCloseButton={false}
-            size="s"
-            onClose={onCancelClick}
-            onEnterKeyDown={onConfirmClick}
-        >
-            <Dialog.Header caption={i18n('delete-dialog.header')} />
-            <Dialog.Body className={b('dialog-body')}>
-                {i18n('delete-dialog.question')}
-                <span className={b('dialog-query-name')}>{` ${queryName}?`}</span>
-            </Dialog.Body>
-            <Dialog.Footer
-                textButtonApply={i18n('delete-dialog.delete')}
-                textButtonCancel={i18n('delete-dialog.cancel')}
-                onClickButtonCancel={onCancelClick}
-                onClickButtonApply={onConfirmClick}
-            />
-        </Dialog>
-    );
-};
-
-interface SavedQueriesProps {
-    savedQueries: SavedQuery[];
-    changeUserInput: (value: {input: string}) => void;
-    onDeleteQuery: (queryName: string) => void;
-}
-
-export const SavedQueries = ({savedQueries, changeUserInput, onDeleteQuery}: SavedQueriesProps) => {
-    const dispatch = useDispatch();
-
-    const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false);
-    const [queryNameToDelete, setQueryNameToDelete] = useState<string>('');
-
-    const closeDeleteDialog = () => {
-        setIsDeleteDialogVisible(false);
-        setQueryNameToDelete('');
-    };
-
-    const onCancelDeleteClick = () => {
-        closeDeleteDialog();
-    };
-
-    const onConfirmDeleteClick = () => {
-        closeDeleteDialog();
-        onDeleteQuery(queryNameToDelete);
-        setQueryNameToDelete('');
-    };
-
-    const onQueryClick = (queryText: string, queryName: string) => {
-        changeUserInput({input: queryText});
-        dispatch(setQueryNameToEdit(queryName));
-        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-    };
-
-    const onDeleteQueryClick = (queryName: string) => {
-        return (event: MouseEvent) => {
-            event.stopPropagation();
-            setIsDeleteDialogVisible(true);
-            setQueryNameToDelete(queryName);
-        };
-    };
-
-    const columns: Column<SavedQuery>[] = [
-        {
-            name: 'name',
-            header: 'Name',
-            render: ({row: query}) => <div className={b('query-name')}>{query.name}</div>,
-            width: 200,
-        },
-        {
-            name: 'body',
-            header: 'Query Text',
-            render: ({row: query}) => (
-                <div className={b('query')}>
-                    <div className={b('query-body')}>
-                        <TruncatedQuery value={query.body} maxQueryHeight={MAX_QUERY_HEIGHT} />
-                    </div>
-                    <span className={b('controls')}>
-                        <Button view="flat-secondary">
-                            <Icon name="pencil" viewBox="0 0 24 24" />
-                        </Button>
-                        <Button view="flat-secondary" onClick={onDeleteQueryClick(query.name)}>
-                            <Icon name="trash" viewBox="0 0 24 24" />
-                        </Button>
-                    </span>
-                </div>
-            ),
-            sortable: false,
-        },
-    ];
-
-    return (
-        <>
-            <div className={b()}>
-                <DataTable
-                    theme="yandex-cloud"
-                    columns={columns}
-                    data={savedQueries}
-                    settings={QUERY_TABLE_SETTINGS}
-                    emptyDataMessage={i18n('saved.empty')}
-                    rowClassName={() => b('row')}
-                    onRowClick={(row) => onQueryClick(row.body, row.name)}
-                    initialSortOrder={{
-                        columnId: 'name',
-                        order: DataTable.ASCENDING,
-                    }}
-                />
-            </div>
-            <DeleteDialog
-                visible={isDeleteDialogVisible}
-                queryName={queryNameToDelete}
-                onCancelClick={onCancelDeleteClick}
-                onConfirmClick={onConfirmDeleteClick}
-            />
-        </>
-    );
-};

package/dist/containers/Tenant/Query/i18n/index.ts

@@ -1,11 +0,0 @@
-import {i18n, Lang} from '../../../../utils/i18n';
-
-import en from './en.json';
-import ru from './ru.json';
-
-const COMPONENT = 'ydb-query-editor';
-
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Query/utils/getPreparedResult.ts

@@ -1,29 +0,0 @@
-import type {KeyValueRow} from '../../../../types/api/query';
-
-export const getPreparedResult = (data: KeyValueRow[] | undefined) => {
-    const columnDivider = '\t';
-    const rowDivider = '\n';
-
-    if (!data?.length) {
-        return '';
-    }
-
-    const columnHeaders = Object.keys(data[0]);
-    const rows = Array<string[] | KeyValueRow[]>(columnHeaders).concat(data);
-
-    return rows
-        .map((item) => {
-            const row = [];
-
-            for (const field in item) {
-                if (typeof item[field] === 'object' || Array.isArray(item[field])) {
-                    row.push(JSON.stringify(item[field]));
-                } else {
-                    row.push(item[field]);
-                }
-            }
-
-            return row.join(columnDivider);
-        })
-        .join(rowDivider);
-};

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

@@ -1,91 +0,0 @@
-import {useEffect} from 'react';
-import {useDispatch} from 'react-redux';
-
-import {NavigationTree} from 'ydb-ui-components';
-
-import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
-import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema/schema';
-import {useQueryModes} from '../../../../utils/hooks';
-
-import {isChildlessPathType, mapPathTypeToNavigationTreeType} from '../../utils/schema';
-import {getActions} from '../../utils/schemaActions';
-import {getControls} from '../../utils/schemaControls';
-
-interface SchemaTreeProps {
-    rootPath: string;
-    rootName: string;
-    rootType?: EPathType;
-    currentPath?: string;
-}
-
-export function SchemaTree(props: SchemaTreeProps) {
-    const {rootPath, rootName, rootType, currentPath} = props;
-
-    const dispatch = useDispatch();
-
-    const [_, setQueryMode] = useQueryModes();
-
-    const fetchPath = (path: string) =>
-        window.api
-            .getSchema({path}, {concurrentId: `NavigationTree.getSchema|${path}`})
-            .then((data) => {
-                const {PathDescription: {Children = []} = {}} = data;
-
-                const preloadedData: Record<string, TEvDescribeSchemeResult> = {
-                    [path]: data,
-                };
-
-                const childItems = Children.map((childData) => {
-                    const {Name = '', PathType, PathSubType} = childData;
-
-                    // not full data, but it contains PathType, which ensures seamless switch between nodes
-                    preloadedData[`${path}/${Name}`] = {PathDescription: {Self: childData}};
-
-                    return {
-                        name: Name,
-                        type: mapPathTypeToNavigationTreeType(PathType, PathSubType),
-                        // FIXME: should only be explicitly set to true for tables with indexes
-                        // at the moment of writing there is no property to determine this, fix later
-                        expandable: !isChildlessPathType(PathType, PathSubType),
-                    };
-                });
-
-                dispatch(preloadSchemas(preloadedData));
-
-                return childItems;
-            });
-
-    const handleActivePathUpdate = (activePath: string) => {
-        dispatch(setCurrentSchemaPath(activePath));
-    };
-
-    useEffect(() => {
-        // if the cached path is not in the current tree, show root
-        if (!currentPath?.startsWith(rootPath)) {
-            handleActivePathUpdate(rootPath);
-        }
-    }, []);
-
-    return (
-        <NavigationTree
-            rootState={{
-                path: rootPath,
-                name: rootName,
-                type: mapPathTypeToNavigationTreeType(rootType),
-                collapsed: false,
-            }}
-            fetchPath={fetchPath}
-            getActions={getActions(dispatch, {
-                setActivePath: handleActivePathUpdate,
-                setQueryMode,
-            })}
-            renderAdditionalNodeElements={getControls(dispatch, {
-                setActivePath: handleActivePathUpdate,
-            })}
-            activePath={currentPath}
-            onActivePathUpdate={handleActivePathUpdate}
-            cache={false}
-            virtualize
-        />
-    );
-}