ydb-embedded-ui 1.4.0 → 1.5.0

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

@@ -0,0 +1,64 @@
+import {useDispatch} from 'react-redux';
+import {useHistory} from 'react-router';
+
+import {NavigationTree} from 'ydb-ui-components';
+
+import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
+import {getDescribe} from '../../../../store/reducers/describe';
+import {getSchemaAcl} from '../../../../store/reducers/schemaAcl';
+
+import {calcNavigationTreeType} from '../../utils/schema';
+import {getActions} from '../../utils/schemaActions';
+
+interface SchemaTreeProps {
+    rootPath: string;
+    rootName: string;
+    rootType: string;
+    currentPath: string;
+}
+
+export function SchemaTree(props: SchemaTreeProps) {
+    const {
+        rootPath,
+        rootName,
+        rootType,
+        currentPath,
+    } = props;
+
+    const dispatch = useDispatch();
+    const history = useHistory();
+
+    const fetchPath = (path: string) => window.api.getSchema(
+        {path},
+        {concurrentId: `NavigationTree.getSchema|${path}`},
+    )
+        .then(({PathDescription: {Children = []} = {}}) => {
+            return Children.map(({Name, PathType}) => ({
+                name: Name,
+                type: calcNavigationTreeType(PathType),
+            }));
+        });
+
+    const handleActivePathUpdate = (activePath: string) => {
+        dispatch(setCurrentSchemaPath(activePath));
+        dispatch(getSchema({path: activePath}));
+        dispatch(getDescribe({path: activePath}));
+        dispatch(getSchemaAcl({path: activePath}));
+    };
+
+    return (
+        <NavigationTree
+            rootState={{
+                path: rootPath,
+                name: rootName,
+                type: calcNavigationTreeType(rootType),
+                collapsed: false,
+            }}
+            fetchPath={fetchPath}
+            getActions={getActions(dispatch, history, handleActivePathUpdate)}
+            activePath={currentPath}
+            onActivePathUpdate={handleActivePathUpdate}
+            cache={false}
+        />
+    );
+}

package/dist/containers/Tenant/Tenant.tsx

@@ -127,7 +127,7 @@ function Tenant(props: TenantProps) {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.triggerExpand);
     };
 
-    const onSplitStartDrugAdditional = () => {
+    const onSplitStartDragAdditional = () => {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.clear);
     };
 
@@ -139,7 +139,7 @@ function Tenant(props: TenantProps) {
                 triggerCollapse={summaryVisibilityState.triggerCollapse}
                 triggerExpand={summaryVisibilityState.triggerExpand}
                 minSize={[36, 200]}
-                onSplitStartDrugAdditional={onSplitStartDrugAdditional}
+                onSplitStartDragAdditional={onSplitStartDragAdditional}
             >
                 <ObjectSummary
                     type={entityType as string}

package/dist/containers/Tenant/utils/schema.ts

@@ -0,0 +1,17 @@
+import type {NavigationTreeNodeType} from "ydb-ui-components";
+
+const DB_TYPES = new Set(['EPathTypeSubDomain']);
+const TABLE_TYPES = new Set(['EPathTypeTable', 'EPathTypeOlapTable']);
+const DIR_TYPES = new Set(['EPathTypeDir', 'EPathTypeOlapStore']);
+
+export const calcNavigationTreeType = (type: string): NavigationTreeNodeType => {
+    if (DIR_TYPES.has(type)) {
+        return 'directory';
+    } else if (TABLE_TYPES.has(type)) {
+        return 'table';
+    } else if (DB_TYPES.has(type)) {
+        return 'database';
+    }
+
+    return 'directory';
+};

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -0,0 +1,130 @@
+import qs from 'qs';
+import {Dispatch} from 'react';
+import {History} from 'history';
+import type {NavigationTreeNodeType} from 'ydb-ui-components';
+
+import routes, {createHref} from '../../../routes';
+import {changeUserInput} from '../../../store/reducers/executeQuery';
+import {setShowPreview} from '../../../store/reducers/schema';
+import createToast from '../../../utils/createToast';
+import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
+
+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 ( );`;
+};
+
+export const getActions = (
+    dispatch: Dispatch<any>,
+    history: History<unknown>,
+    setActivePath: (path: string) => void,
+) =>
+    (path: string, type: NavigationTreeNodeType) => {
+        const queryParams = qs.parse(location.search, {
+            ignoreQueryPrefix: true,
+        });
+
+        const switchTabToQuery = () => {
+            history.push(
+                createHref(routes.tenant, undefined, {
+                    ...queryParams,
+                    [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
+                }),
+            );
+        };
+
+        const onCreateTableClick = () => {
+            dispatch(changeUserInput({input: createTableTemplate(path)}));
+            switchTabToQuery();
+            // here and in the other handlers this should be called after switching tab:
+            // redux-location-state catches the history.push event from the tab switching
+            // before active path updates in url, preventing its update at all
+            setActivePath(path);
+        };
+
+        const onAlterTableClick = () => {
+            dispatch(changeUserInput({input: alterTableTemplate(path)}));
+            switchTabToQuery();
+            setActivePath(path);
+        };
+
+        const onSelectQueryClick = () => {
+            dispatch(changeUserInput({input: selectQueryTemplate(path)}));
+            switchTabToQuery();
+            setActivePath(path);
+        };
+
+        const onUpsertQueryClick = () => {
+            dispatch(changeUserInput({input: upsertQueryTemplate(path)}));
+            switchTabToQuery();
+            setActivePath(path);
+        };
+
+        const onCopyPathClick = () => {
+            navigator.clipboard
+                .writeText(path)
+                .then(() => {
+                    createToast({
+                        name: 'Copied',
+                        title: 'The path is copied to the clipboard',
+                        type: 'success',
+                    });
+                })
+                .catch(() => {
+                    createToast({
+                        name: 'Not copied',
+                        title: 'Couldn’t copy the path',
+                        type: 'error',
+                    });
+                });
+        };
+
+        const onOpenPreviewClick = () => {
+            dispatch(setShowPreview(true));
+            switchTabToQuery();
+            setActivePath(path);
+        };
+
+        const copyItem = {text: 'Copy path', action: onCopyPathClick};
+
+        return type === 'table'
+            ? [
+                [
+                    {text: 'Open preview', action: onOpenPreviewClick},
+                    copyItem,
+                ],
+                [
+                    {text: 'Alter table...', action: onAlterTableClick},
+                    {text: 'Select query...', action: onSelectQueryClick},
+                    {text: 'Upsert query...', action: onUpsertQueryClick},
+                ],
+            ]
+            : [
+                [
+                    copyItem,
+                ],
+                [
+                    {text: 'Create table...', action: onCreateTableClick},
+                ],
+            ];
+    };

package/dist/containers/Tenants/Tenants.js

@@ -144,7 +144,7 @@ class Tenants extends React.Component {
                         : undefined;
                     const isExternalLink = Boolean(backend);
                     return (
-                        <React.Fragment>
+                        <div className={b('name-wrapper')}>
                             <EntityStatus
                                 externalLink={isExternalLink}
                                 className={b('name')}
@@ -159,7 +159,7 @@ class Tenants extends React.Component {
                                 })}
                             />
                             {additionalTenantsInfo.name && additionalTenantsInfo.name(value, row)}
-                        </React.Fragment>
+                        </div>
                     );
                 },
                 width: 440,

package/dist/containers/Tenants/Tenants.scss

@@ -54,7 +54,13 @@
     .data-table__row:hover &__type-button {
         visibility: visible;
     }
+
+    &__name-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
     &__name {
-        max-width: 90%;
+        overflow: hidden;
     }
 }

package/dist/services/api.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+    api: any;
+}

package/dist/services/api.js

@@ -76,7 +76,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             enums: true,
         });
     }
-    getSchema({path}) {
+    getSchema({path}, {concurrentId} = {}) {
         return this.get(
             this.getPath('/viewer/json/describe'),
             {
@@ -88,7 +88,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 partition_stats: false,
                 partitioning_info: false,
             },
-            {concurrentId: `getSchema|${path}`},
+            {concurrentId: concurrentId || `getSchema|${path}`},
         );
     }
     getDescribe({path}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.4.0",
+  "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;
-        }
-    }
-}