ydb-embedded-ui 0.1.0 → 0.2.0

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

@@ -1,11 +1,11 @@
-import React, {useState, useMemo, useRef} from 'react';
+import React, {useState, useRef} from 'react';
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import {Dialog, DropdownMenu, Popup, TextInput, Button} from '@yandex-cloud/uikit';
 
-import SavedQueries from '../SavedQueries/SavedQueries';
 import Icon from '../../../../components/Icon/Icon';
+import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
 
 import './SaveQuery.scss';
 
@@ -14,27 +14,21 @@ const b = cn('kv-save-query');
 const EMBEDDED_VERSION_WARNING =
     'Please be aware: after cookies delete your saved queries will be lost.';
 
-function SaveQuery({
-    savedQueries,
-    onSaveQuery,
-    saveButtonDisabled,
-    changeUserInput,
-    onDeleteQuery,
-}) {
+function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
     const singleClusterMode = useSelector((state) => state.singleClusterMode);
     const [isDialogVisible, setIsDialogVisible] = useState(false);
     const [isEmbeddedWarningVisible, setIsEmbeddedWarningVisible] = useState(false);
     const [queryName, setQueryName] = useState('');
     const [validationError, setValidationError] = useState(null);
-    const [queryNameToEdit, setQueryNameToEdit] = useState(null);
 
-    const warningRef = useRef();
+    const queryNameToEdit = useSelector((state) => state.saveQuery);
+    const dispatch = useDispatch();
 
-    const hasSavedQueries = useMemo(() => savedQueries && savedQueries.length > 0, [savedQueries]);
+    const warningRef = useRef();
 
     const onSaveQueryClick = () => {
         setIsDialogVisible(true);
-        setQueryNameToEdit(null);
+        dispatch(setQueryNameToEdit(null));
     };
 
     const onCloseDialog = () => {
@@ -71,7 +65,7 @@ function SaveQuery({
 
     const onEditQueryClick = () => {
         onSaveQuery(queryNameToEdit);
-        setQueryNameToEdit(null);
+        dispatch(setQueryNameToEdit(null));
     };
 
     const renderDialog = () => {
@@ -155,14 +149,7 @@ function SaveQuery({
         <React.Fragment>
             {queryNameToEdit ? renderSaveDropdownMenu() : renderSaveButton(onSaveQueryClick)}
             {isDialogVisible && renderDialog()}
-            {hasSavedQueries && (
-                <SavedQueries
-                    savedQueries={savedQueries}
-                    changeUserInput={changeUserInput}
-                    onDeleteQuery={onDeleteQuery}
-                    setQueryNameToEdit={setQueryNameToEdit}
-                />
-            )}
+
             {singleClusterMode && renderEmbeddedVersionWarning()}
         </React.Fragment>
     );

package/dist/containers/Tenant/QueryEditor/SaveQuery/SaveQuery.scss

@@ -6,44 +6,52 @@
         align-items: flex-start;
     }
     &__field-title {
-        @include body2-typography();
-        line-height: 32px;
+        margin-right: 12px;
+
         font-weight: 500;
+        line-height: 32px;
         white-space: nowrap;
-        margin-right: 12px;
+        @include body2-typography();
         &.required {
             &::after {
                 content: '*';
+
                 color: var(--yc-color-text-danger);
             }
         }
     }
     &__control-wrapper {
-        flex-grow: 1;
         display: flex;
+        flex-grow: 1;
         flex-direction: column;
     }
     &__error {
         display: inline-block;
+
         height: 17px;
+
         color: var(--yc-color-text-danger);
     }
     &__embedded-tooltip {
-        height: 100%;
         display: flex;
         align-items: center;
-        color: var(--yc-color-text-secondary);
+
+        height: 100%;
         margin-left: -10px;
+
+        color: var(--yc-color-text-secondary);
         &:hover {
             cursor: pointer;
+
             color: var(--yc-color-text-complementary);
         }
     }
 
     &__embedded-popup {
+        max-width: 150px !important;
         padding: 10px;
+
         border-radius: 5px;
-        max-width: 150px !important;
         &::before {
             border-radius: 5px;
         }

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

@@ -6,17 +6,21 @@ import {Dialog, Popup, Button} from '@yandex-cloud/uikit';
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
 import Icon from '../../../../components/Icon/Icon';
 import './SavedQueries.scss';
+import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
+import {useDispatch} from 'react-redux';
 
 const b = cn('saved-queries');
 
 const MAX_QUERY_HEIGHT = 3;
 
-function SavedQueries({savedQueries, changeUserInput, onDeleteQuery, setQueryNameToEdit}) {
+function SavedQueries({savedQueries, changeUserInput, onDeleteQuery}) {
     const [isSavedQueriesVisible, setIsSavedQueriesVisible] = useState(false);
     const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false);
     const [queryNameToDelete, setQueryNameToDelete] = useState(null);
 
     const [popupForceRender, setPopupForceRender] = useState(null);
+
+    const dispatch = useDispatch();
     const anchor = useRef(null);
 
     const onShowSavedQueriesClick = () => {
@@ -30,7 +34,7 @@ function SavedQueries({savedQueries, changeUserInput, onDeleteQuery, setQueryNam
     const onSavedQueryClick = (queryText, queryName) => {
         return () => {
             changeUserInput({input: queryText});
-            setQueryNameToEdit(queryName);
+            dispatch(setQueryNameToEdit(queryName));
             setIsSavedQueriesVisible(false);
         };
     };
@@ -89,7 +93,7 @@ function SavedQueries({savedQueries, changeUserInput, onDeleteQuery, setQueryNam
                 className={b('popup-wrapper')}
                 anchorRef={anchor}
                 open={isSavedQueriesVisible}
-                placement={['top']}
+                placement={['bottom-end']}
                 onClose={onCloseSavedQueries}
             >
                 <div className={b()}>

package/dist/containers/Tenant/QueryEditor/SavedQueries/SavedQueries.scss

@@ -2,32 +2,38 @@ $popup-width: 700px;
 
 .saved-queries {
     $block: &;
-    padding: 12px 16px 12px;
+    padding: 12px 16px;
     &__popup-wrapper {
-        border-radius: 4px;
+        overflow: hidden;
+
         width: $popup-width;
         max-width: $popup-width !important;
-        // max-height: 70vh;
-        overflow: hidden;
+
+        border-radius: 4px;
         :nth-child(2) {
-            max-height: 70vh;
             overflow-y: auto;
+
+            max-height: 50vh;
         }
 
         &::before {
-            border-radius: 4px;
             width: $popup-width;
+
+            border-radius: 4px;
         }
     }
     &__saved-queries-row {
         display: flex;
         align-items: center;
+
         padding: 8px 5px;
+
         border-bottom: 1px solid var(--yc-color-line-generic);
         &:hover {
+            cursor: pointer;
+
             color: var(--yc-color-text-link-hover);
             background: var(--yc-color-base-simple-hover);
-            cursor: pointer;
             #{$block}__query-controls {
                 display: flex;
             }
@@ -35,29 +41,32 @@ $popup-width: 700px;
         &_header {
             font-weight: 500;
             &:hover {
+                cursor: auto;
+
                 color: var(--yc-color-text-primary);
                 background: var(--yc-color-base-background);
-                cursor: auto;
             }
         }
     }
     &__query-name {
-        margin-right: 8px;
-        flex-basis: 90px;
+        overflow: hidden;
+        flex: 0 0 90px;
+
         max-width: 90px;
-        flex-shrink: 0;
-        flex-grow: 0;
+        margin-right: 8px;
+
+        font-weight: 500;
         white-space: pre-wrap;
-        overflow: hidden;
         text-overflow: ellipsis;
-        font-weight: 500;
     }
     &__query-body {
+        overflow: hidden;
         flex-grow: 1;
+
+        max-width: 75%;
+
         white-space: pre;
         text-overflow: ellipsis;
-        overflow: hidden;
-        max-width: 75%;
         &_header {
             display: flex;
             justify-content: center;
@@ -68,9 +77,11 @@ $popup-width: 700px;
     }
     &__control-button {
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
+
         width: 24px;
+
         color: var(--yc-color-text-hint);
         &:hover {
             color: var(--yc-color-text-secondary);

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

@@ -7,7 +7,7 @@ import {formatCPU, formatBytes} from '../../../../utils';
 
 import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
 
-const b = cn('schema-viewer');
+const b = cn('schema-info-viewer');
 
 class SchemaInfoViewer extends React.Component {
     static propTypes = {
@@ -26,7 +26,8 @@ class SchemaInfoViewer extends React.Component {
         const {data} = this.props;
 
         if (data) {
-            const {TableStats = {}, TabletMetrics = {}} = data.PathDescription;
+            const {PathDescription = {}} = data;
+            const {TableStats = {}, TabletMetrics = {}} = PathDescription;
             const tableStatsInfo =
                 TableStats &&
                 Object.keys(TableStats).map((key) => ({
@@ -49,11 +50,10 @@ class SchemaInfoViewer extends React.Component {
             return (
                 <div className={b()}>
                     <div className={b('item')}>
-                        {Boolean(infoLength) && (
-                            <>
-                                <div className={b('title')}>General</div>
-                                <InfoViewer info={generalInfo}></InfoViewer>
-                            </>
+                        {infoLength ? (
+                            <InfoViewer info={generalInfo}></InfoViewer>
+                        ) : (
+                            <div>Empty</div>
                         )}
                     </div>
                 </div>

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

@@ -1,5 +1,4 @@
-.schema-viewer {
-    padding: 20px;
+.schema-info-viewer {
     overflow: auto;
 
     &__item {
@@ -9,13 +8,4 @@
             grid-template-columns: minmax(max-content, 280px);
         }
     }
-
-    &__title {
-        margin: 0;
-        color: var(--yc-color-text-primary);
-        font-size: var(--yc-text-body2-font-size);
-        font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
-        margin-bottom: 15px;
-    }
 }

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
@@ -13,15 +12,16 @@ 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 FOLDERS_TYPE = [
-    'EPathTypeDir',
-    'EPathTypeSubDomain',
-    'EPathTypeExtSubDomain',
-    'EPathTypeOlapStore',
-];
+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 = {
@@ -30,10 +30,12 @@ class SchemaNode extends React.Component {
         getSchema: PropTypes.func.isRequired,
         setCurrentSchemaPath: PropTypes.func,
         currentSchemaPath: PropTypes.string,
+        isRoot: PropTypes.bool,
     };
 
     state = {
         collapsed: true,
+        active: false,
     };
 
     schemaNodeRef = React.createRef();
@@ -42,7 +44,7 @@ class SchemaNode extends React.Component {
         const {currentSchemaPath, isRoot} = this.props;
         const schemaPath = this.getSchemaPath();
 
-        if (schemaPath === currentSchemaPath) {
+        if (schemaPath === currentSchemaPath && !this.state.active) {
             this.addActiveClass();
         }
 
@@ -56,6 +58,15 @@ class SchemaNode extends React.Component {
         }
     }
 
+    componentDidUpdate() {
+        const {currentSchemaPath} = this.props;
+        const schemaPath = this.getSchemaPath();
+
+        if (schemaPath === currentSchemaPath && !this.state.active) {
+            this.addActiveClass();
+        }
+    }
+
     getSchemaPath = () => {
         const {data, fullPath, isRoot} = this.props;
 
@@ -67,15 +78,18 @@ class SchemaNode extends React.Component {
     };
 
     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="0 0 13 10" width={14} height={14} />
+                <Icon name="folder" viewBox={viewBox} width={16} height={16} />
             ) : (
-                <Icon name="openFolder" viewBox="0 0 13 10" width={14} height={14} />
+                <Icon name="openFolder" viewBox={viewBox} width={16} height={16} />
             );
-        } else if (data.PathType === 'EPathTypeTable' || data.PathType === 'EPathTypeOlapTable') {
-            return <Icon name="table" viewBox="0 0 13 10" width={14} height={14} />;
+        } 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} />;
         }
     };
 
@@ -85,9 +99,9 @@ class SchemaNode extends React.Component {
         if (currentActiveSchemaNode) {
             currentActiveSchemaNode.classList.remove(activeClass);
         }
-        // eslint-disable-next-line react/no-find-dom-node
-        const activeNode = ReactDOM.findDOMNode(this);
+        const activeNode = this.schemaNodeRef.current;
         if (activeNode) {
+            this.setState({active: true});
             activeNode.classList.add(activeClass);
         }
     };
@@ -105,18 +119,23 @@ class SchemaNode extends React.Component {
     };
 
     render() {
-        const {data, fullPath, isRoot = false} = this.props;
+        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 !== 'EPathTypeTable';
+        const hasArrow = data.PathType !== TABLE_TYPE;
         const label = (
             <div className={b('label')}>
                 {this.setIcon(data)}
-                <div className={b('name')}>{data.Name}</div>
+                <div className={b('name-wrapper')}>
+                    <div className={b('name')}>{data.Name}</div>
+                    <SchemaNodeActions name={currentSchemaPath} isTableType={type} />
+                </div>
             </div>
         );
         return (
@@ -137,6 +156,7 @@ class SchemaNode extends React.Component {
 function mapStateToProps(state) {
     return {
         currentSchemaPath: state.schema.currentSchemaPath,
+        currentItem: state.schema.currentSchema,
     };
 }
 

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

@@ -3,39 +3,60 @@
     align-items: center;
 
     .tree-view_item {
-        padding: 5px 0;
-        margin: 0;
         flex-wrap: wrap;
+
+        margin: 0;
+        padding: 5px 0;
     }
 
     .tree-view_children {
-        padding-left: 15px;
         margin: 0;
+        padding-left: 15px;
     }
 
     &__label {
         display: flex;
-        align-items: center;
         overflow: hidden;
-        cursor: pointer;
-        padding: 0 5px;
-        border-radius: 3px;
+        align-items: center;
+
+        width: 100%;
         height: 20px;
+        padding: 0 5px;
+
+        cursor: pointer;
 
-        &:hover {
-            background-color: var(--yc-color-base-info-hover);
+        & > svg {
+            color: var(--yc-color-text-hint);
         }
     }
 
-    &_active > .tree-view > .tree-view_item &__label {
+    &_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;
-        text-overflow: ellipsis;
-        white-space: nowrap;
         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

@@ -0,0 +1,17 @@
+.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

@@ -0,0 +1,125 @@
+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;