ydb-embedded-ui 1.4.2 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "files": [
     "dist"
   ],
@@ -13,7 +13,7 @@
     "@testing-library/react": "11.2.7",
     "@testing-library/user-event": "12.8.3",
     "@types/qs": "6.9.7",
-    "@yandex-cloud/i18n": "0.2.0",
+    "@yandex-cloud/i18n": "0.4.0",
     "@yandex-cloud/paranoid": "1.0.0",
     "@yandex-cloud/react-data-table": "0.2.1",
     "axios": "0.19.2",
@@ -34,13 +34,13 @@
     "react-scripts": "4.0.3",
     "react-split": "2.0.14",
     "react-transition-group": "4.4.2",
-    "react-treeview": "0.4.7",
     "redux": "4.0.1",
     "redux-location-state": "2.6.0",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
     "sass": "1.32.8",
-    "web-vitals": "1.1.2"
+    "web-vitals": "1.1.2",
+    "ydb-ui-components": "1.2.3"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -88,6 +88,7 @@
     "@types/react-transition-group": "^4.4.4",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@yandex-cloud/axios-wrapper": "^1.0.2",
+    "@yandex-cloud/browserslist-config": "1.0.1",
     "@yandex-cloud/eslint-config": "^1.0.0",
     "@yandex-cloud/prettier-config": "^1.0.0",
     "@yandex-cloud/stylelint-config": "^1.1.0",
@@ -104,5 +105,8 @@
     "react-dom": "^17.0.2",
     "stylelint": "^14.3.0",
     "typescript": "^4.5.5"
+  },
+  "peerDependencies": {
+    "@yandex-cloud/browserslist-config": "^1.0.1"
   }
 }

package/dist/components/TreeView/TreeView.js

@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import TreeViewBase from 'react-treeview';
-import Icon from '../Icon/Icon';
-
-import './TreeView.scss';
-
-const b = cn('km-tree-view');
-
-const TreeView = (props) => {
-    const {
-        children,
-        nodeLabel,
-        onClick,
-        collapsed,
-        clickableLabel = false,
-        className,
-        hasArrow = true,
-        ...rest
-    } = props;
-
-    const newNodeLabel = (
-        <div
-            className={b('node-wrapper', {clickable: clickableLabel})}
-            onClick={clickableLabel ? onClick : undefined}
-        >
-            {hasArrow ? (
-                <span
-                    className={b('arrow-icon', {extended: !collapsed})}
-                    onClick={clickableLabel ? undefined : onClick}
-                >
-                    <Icon name="arrow-right" viewBox="0 0 6 11" width={6} height={11} />
-                </span>
-            ) : null}
-            {nodeLabel}
-        </div>
-    );
-
-    return (
-        <TreeViewBase
-            {...rest}
-            treeViewClassName={b(null, className)}
-            nodeLabel={newNodeLabel}
-            collapsed={collapsed}
-        >
-            {children}
-        </TreeViewBase>
-    );
-};
-
-TreeView.propTypes = {
-    children: PropTypes.any,
-    nodeLabel: PropTypes.node,
-    onClick: PropTypes.func,
-    collapsed: PropTypes.bool,
-    clickableLabel: PropTypes.bool,
-    className: PropTypes.string,
-};
-
-export default TreeView;

package/dist/components/TreeView/TreeView.scss

@@ -1,39 +0,0 @@
-.km-tree-view {
-    & .tree-view_arrow {
-        display: none;
-    }
-
-    &__node-wrapper {
-        display: flex;
-        overflow: hidden;
-        align-items: center;
-
-        width: 100%;
-
-        &_clickable {
-            cursor: pointer;
-        }
-    }
-
-    &__arrow-icon {
-        display: flex;
-        justify-content: center;
-
-        width: 11px;
-        margin-right: 8px;
-
-        cursor: pointer;
-
-        &_extended {
-            transform: rotate(90deg);
-        }
-
-        & .yc-icon {
-            vertical-align: middle;
-        }
-    }
-    .yc-icon {
-        display: flex;
-        flex-shrink: 0;
-    }
-}

package/dist/containers/Tenant/Schema/SchemaNode/SchemaNode.js

@@ -1,170 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-
-import TreeView from '../../../../components/TreeView/TreeView';
-import SchemaTree from '../../../Tenant/Schema/SchemaTree/SchemaTree';
-import Icon from '../../../../components/Icon/Icon';
-
-import {getSchema, setCurrentSchemaPath} from '../../../../store/reducers/schema';
-import {getDescribe} from '../../../../store/reducers/describe';
-import {getSchemaAcl} from '../../../../store/reducers/schemaAcl';
-
-import './SchemaNode.scss';
-import SchemaNodeActions from '../SchemaNodeActions/SchemaNodeActions';
-import {isTableType} from '../../Tenant';
-
-const b = cn('schema-node');
-
-export const SUBDOMAIN_FOLDER_TYPE = 'EPathTypeSubDomain';
-export const TABLE_TYPE = 'EPathTypeTable';
-export const OLAP_TABLE_TYPE = 'EPathTypeOlapTable';
-
-export const FOLDERS_TYPE = ['EPathTypeDir', 'EPathTypeExtSubDomain', 'EPathTypeOlapStore'];
-
-class SchemaNode extends React.Component {
-    static propTypes = {
-        data: PropTypes.object.isRequired,
-        fullPath: PropTypes.string.isRequired,
-        getSchema: PropTypes.func.isRequired,
-        setCurrentSchemaPath: PropTypes.func,
-        currentSchemaPath: PropTypes.string,
-        isRoot: PropTypes.bool,
-    };
-
-    state = {
-        collapsed: true,
-        active: false,
-    };
-
-    schemaNodeRef = React.createRef();
-
-    componentDidMount() {
-        const {currentSchemaPath, isRoot} = this.props;
-        const schemaPath = this.getSchemaPath();
-
-        if (schemaPath === currentSchemaPath && !this.state.active) {
-            this.addActiveClass();
-        }
-
-        if (
-            (currentSchemaPath &&
-                currentSchemaPath.startsWith(schemaPath) &&
-                currentSchemaPath !== schemaPath) ||
-            isRoot
-        ) {
-            this.setState({collapsed: false});
-        }
-    }
-
-    componentDidUpdate() {
-        const {currentSchemaPath} = this.props;
-        const schemaPath = this.getSchemaPath();
-
-        if (schemaPath === currentSchemaPath && !this.state.active) {
-            this.addActiveClass();
-        }
-    }
-
-    getSchemaPath = () => {
-        const {data, fullPath, isRoot} = this.props;
-
-        return isRoot ? fullPath : `${fullPath}/${data.Name}`;
-    };
-
-    invertCollapsed = () => {
-        this.setState({collapsed: !this.state.collapsed});
-    };
-
-    setIcon = (data) => {
-        const viewBox = '0 0 16 16';
-        const {collapsed} = this.state;
-        if (FOLDERS_TYPE.indexOf(data.PathType) !== -1) {
-            return collapsed ? (
-                <Icon name="folder" viewBox={viewBox} width={16} height={16} />
-            ) : (
-                <Icon name="openFolder" viewBox={viewBox} width={16} height={16} />
-            );
-        } else if (data.PathType === TABLE_TYPE || data.PathType === OLAP_TABLE_TYPE) {
-            return <Icon name="table" viewBox={viewBox} width={16} height={16} />;
-        } else if (data.PathType === SUBDOMAIN_FOLDER_TYPE) {
-            return <Icon name="subdomain" viewBox={viewBox} width={16} height={16} />;
-        }
-    };
-
-    addActiveClass = () => {
-        const activeClass = 'schema-node_active';
-        const currentActiveSchemaNode = document.querySelector(`.${activeClass}`);
-        if (currentActiveSchemaNode) {
-            currentActiveSchemaNode.classList.remove(activeClass);
-        }
-        const activeNode = this.schemaNodeRef.current;
-        if (activeNode) {
-            this.setState({active: true});
-            activeNode.classList.add(activeClass);
-        }
-    };
-
-    handleClick = (e) => {
-        const {getSchema, getDescribe, getSchemaAcl, setCurrentSchemaPath} = this.props;
-        e.stopPropagation();
-        this.addActiveClass();
-
-        const schemaPath = this.getSchemaPath();
-        setCurrentSchemaPath(schemaPath);
-        getSchema({path: schemaPath});
-        getDescribe({path: schemaPath});
-        getSchemaAcl({path: schemaPath});
-    };
-
-    render() {
-        const {data, fullPath, isRoot = false, currentSchemaPath, currentItem = {}} = this.props;
-        const {collapsed} = this.state;
-
-        if (!data) {
-            return null;
-        }
-        const currentPathType = currentItem.PathDescription?.Self?.PathType;
-        const type = isTableType(currentPathType);
-
-        const hasArrow = data.PathType !== TABLE_TYPE;
-        const label = (
-            <div className={b('label')}>
-                {this.setIcon(data)}
-                <div className={b('name-wrapper')}>
-                    <div className={b('name')}>{data.Name}</div>
-                    <SchemaNodeActions name={currentSchemaPath} isTableType={type} />
-                </div>
-            </div>
-        );
-        return (
-            <div onClick={this.handleClick} ref={this.schemaNodeRef}>
-                <TreeView
-                    nodeLabel={label}
-                    collapsed={collapsed}
-                    onClick={this.invertCollapsed}
-                    hasArrow={hasArrow}
-                >
-                    <SchemaTree path={isRoot ? fullPath : `${fullPath}/${data.Name}`} />
-                </TreeView>
-            </div>
-        );
-    }
-}
-
-function mapStateToProps(state) {
-    return {
-        currentSchemaPath: state.schema.currentSchemaPath,
-        currentItem: state.schema.currentSchema,
-    };
-}
-
-const mapDispatchToProps = {
-    getSchema,
-    getDescribe,
-    getSchemaAcl,
-    setCurrentSchemaPath,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(SchemaNode);

package/dist/containers/Tenant/Schema/SchemaNode/SchemaNode.scss

@@ -1,62 +0,0 @@
-.schema-node {
-    display: flex;
-    align-items: center;
-
-    .tree-view_item {
-        flex-wrap: wrap;
-
-        margin: 0;
-        padding: 5px 0;
-    }
-
-    .tree-view_children {
-        margin: 0;
-        padding-left: 15px;
-    }
-
-    &__label {
-        display: flex;
-        overflow: hidden;
-        align-items: center;
-
-        width: 100%;
-        height: 20px;
-        padding: 0 5px;
-
-        cursor: pointer;
-
-        & > svg {
-            color: var(--yc-color-text-hint);
-        }
-    }
-
-    &_active > .tree-view > .tree-view_item {
-        font-weight: 600;
-
-        background-color: var(--yc-color-base-info);
-    }
-
-    &__name-wrapper {
-        display: inline-flex;
-        justify-content: space-between;
-
-        width: 100%;
-    }
-
-    &__name {
-        display: inline;
-        overflow: hidden;
-
-        margin-left: 6px;
-
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-}
-
-.tree-view_item {
-    border-bottom: 1px solid var(--yc-color-line-generic);
-    &:hover {
-        background-color: var(--yc-color-base-simple-hover);
-    }
-}

package/dist/containers/Tenant/Schema/SchemaNodeActions/SchemaNodeActions.scss

@@ -1,17 +0,0 @@
-.kv-schema-node-actions {
-    visibility: hidden;
-
-    &__popup {
-        .yc-menu__list-item {
-            line-height: 36px;
-        }
-    }
-}
-
-.tree-view_item {
-    &:hover {
-        .kv-schema-node-actions {
-            visibility: visible;
-        }
-    }
-}

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

@@ -1,125 +0,0 @@
-import {useDispatch} from 'react-redux';
-import {useHistory} from 'react-router';
-import cn from 'bem-cn-lite';
-import {DropdownMenu} from '@yandex-cloud/uikit';
-import qs from 'qs';
-
-import {changeUserInput} from '../../../../store/reducers/executeQuery';
-import {setShowPreview} from '../../../../store/reducers/schema';
-import routes, {createHref} from '../../../../routes';
-
-import './SchemaNodeActions.scss';
-import {TenantGeneralTabsIds, TenantTabsGroups} from '../../TenantPages';
-import createToast from '../../../../utils/createToast';
-
-const b = cn('kv-schema-node-actions');
-
-const createTableTemplate = (path: string) => {
-    return `CREATE TABLE \`${path}/my_table\`
-(
-    \`id\` Uint64,
-    \`name\` String,
-    PRIMARY KEY (\`id\`)
-);`;
-};
-
-const alterTableTemplate = (path: string) => {
-    return `ALTER TABLE \`${path}\`
-    ADD COLUMN is_deleted Bool;`;
-};
-const selectQueryTemplate = (path: string) => {
-    return `SELECT \`id\`, \`name\`
-    FROM \`${path}\`
-    ORDER BY \`id\`
-    LIMIT 10;`;
-};
-const upsertQueryTemplate = (path: string) => {
-    return `UPSERT INTO \`${path}\`
-    ( \`id\`, \`name\` )
-VALUES ( );`;
-};
-
-interface SchemaNodeActionsProps {
-    name: string;
-    isTableType: boolean;
-}
-
-function SchemaNodeActions({name, isTableType}: SchemaNodeActionsProps) {
-    const dispatch = useDispatch();
-    const history = useHistory();
-
-    const queryParams = qs.parse(location.search, {
-        ignoreQueryPrefix: true,
-    });
-
-    const onCreateTableClick = () => {
-        dispatch(changeUserInput({input: createTableTemplate(name)}));
-    };
-
-    const onAlterTableClick = () => {
-        dispatch(changeUserInput({input: alterTableTemplate(name)}));
-    };
-
-    const onSelectQueryClick = () => {
-        dispatch(changeUserInput({input: selectQueryTemplate(name)}));
-    };
-
-    const onUpsertQueryClick = () => {
-        dispatch(changeUserInput({input: upsertQueryTemplate(name)}));
-    };
-
-    const onCopyPathClick = () => {
-        navigator.clipboard
-            .writeText(name)
-            .then(() => {
-                createToast({
-                    name: 'Copied',
-                    title: 'Path was copied to clipboard successfully',
-                    type: 'success',
-                });
-            })
-            .catch(() => {
-                createToast({
-                    name: 'Not copied',
-                    title: 'Path was not copied to clipboard successfully',
-                    type: 'error',
-                });
-            });
-    };
-
-    const onOpenPreviewClick = () => {
-        dispatch(setShowPreview(true));
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
-            }),
-        );
-    };
-
-    const copyItem = {text: 'Copy path', action: onCopyPathClick};
-
-    const tableItems = [
-        [{text: 'Open preview', action: onOpenPreviewClick}, copyItem],
-        [
-            {text: 'Alter table', action: onAlterTableClick},
-            {text: 'Select query', action: onSelectQueryClick},
-            {text: 'Upsert query', action: onUpsertQueryClick},
-        ],
-    ];
-
-    const catalogItems = [[copyItem], [{text: 'Create table', action: onCreateTableClick}]];
-
-    const items = isTableType ? tableItems : catalogItems;
-
-    return (
-        <DropdownMenu
-            items={items}
-            switcherWrapperClassName={b()}
-            popupClassName={b('popup')}
-            popupPlacement={['bottom-end']}
-        />
-    );
-}
-
-export default SchemaNodeActions;

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

@@ -1,116 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
-import {getSchema} from '../../../../store/reducers/schema';
-import './SchemaTree.scss';
-
-import SchemaNode from '../SchemaNode/SchemaNode';
-
-const b = cn('schema');
-
-class SchemaTree extends React.Component {
-    static propTypes = {
-        className: PropTypes.string,
-        loading: PropTypes.bool,
-        error: PropTypes.object,
-        schema: PropTypes.object,
-        wasLoaded: PropTypes.bool,
-        getSchema: PropTypes.func,
-        path: PropTypes.string.isRequired,
-        tenantPath: PropTypes.string,
-    };
-
-    componentDidMount() {
-        const {path: tenantPath, getSchema} = this.props;
-
-        getSchema({path: tenantPath});
-    }
-
-    emptySchema = React.createRef();
-
-    renderLoader() {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
-    }
-
-    removeArrow = () => {
-        // And how else to solve this problem, except to get into the DOM?
-        const nodeWithArrow =
-            // eslint-disable-next-line react/no-find-dom-node
-            ReactDOM.findDOMNode(this)?.parentNode?.parentNode?.querySelector('.tree-view_arrow');
-        if (nodeWithArrow) {
-            nodeWithArrow.setAttribute('style', 'visibility: hidden');
-        }
-
-        return '';
-    };
-
-    showEmptyNode() {
-        const {tenantPath, schema} = this.props;
-        if (schema.Path === tenantPath) {
-            return 'no data';
-        } else {
-            return String(this.removeArrow());
-        }
-    }
-
-    renderContent = () => {
-        const {schema, path} = this.props;
-        if (schema && schema.Status === 'StatusSuccess') {
-            return (
-                <div className={b()}>
-                    {schema && schema.PathDescription && schema.PathDescription.Children ? (
-                        schema.PathDescription.Children.map((it, key) => (
-                            <SchemaNode key={key} fullPath={path} data={it} />
-                        ))
-                    ) : (
-                        <div ref={this.emptySchema}>{this.showEmptyNode()}</div>
-                    )}
-                </div>
-            );
-        } else {
-            return null;
-        }
-    };
-
-    render() {
-        const {loading, wasLoaded, error, currentSchema: schema} = this.props;
-
-        if (loading && !wasLoaded) {
-            return this.renderLoader();
-        } else if (
-            (error && !error.isCancelled) ||
-            (schema && schema.Status === 'StatusAccessDenied')
-        ) {
-            return <div>{error?.statusText || 'Access denied'}</div>;
-        } else {
-            return this.renderContent();
-        }
-    }
-}
-
-function mapStateToProps(state, ownProps) {
-    const {data: schema = {}, loading, wasLoaded, error, currentSchema} = state.schema;
-    const tenantPath = state.tenant.tenant.Name;
-    const {path} = ownProps;
-    return {
-        tenantPath,
-        schema: schema[`${path}`],
-        loading,
-        wasLoaded,
-        error,
-        currentSchema,
-    };
-}
-
-const mapDispatchToProps = {
-    getSchema,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(SchemaTree);

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

@@ -1,17 +0,0 @@
-@import '../../../../styles/mixins.scss';
-
-.schema {
-    .tree-view_item {
-        margin: 0;
-        padding: 2px 0;
-    }
-
-    .tree-view_children {
-        margin: 0;
-        padding-left: 15px;
-    }
-    &__loader {
-        display: flex;
-        justify-content: center;
-    }
-}

package/dist/styles/react-treeview.scss

@@ -1,45 +0,0 @@
-/* the tree node's style */
-
-.tree-view {
-    overflow-y: hidden;
-}
-
-.tree-view_item {
-    display: flex;
-    align-items: center;
-
-    margin: 10px 0;
-
-    cursor: pointer;
-    white-space: nowrap;
-}
-
-.tree-view_children {
-    margin-left: 35px;
-
-    cursor: pointer;
-    white-space: nowrap;
-}
-
-.tree-view_children-collapsed {
-    height: 0px;
-}
-
-.tree-view_arrow {
-    display: inline-block;
-
-    margin-right: 6px;
-
-    cursor: pointer;
-    user-select: none;
-}
-
-.tree-view_arrow:after {
-    content: '▾';
-}
-
-/* rotate the triangle to close it */
-
-.tree-view_arrow-collapsed {
-    transform: rotate(-90deg);
-}