ydb-embedded-ui 1.4.2 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+### [1.5.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.1...v1.5.2) (2022-05-26)
+
+
+### Bug Fixes
+
+* **Tenant:** always update diagnostics tabs for root ([db03266](https://github.com/ydb-platform/ydb-embedded-ui/commit/db03266fd7dd6e4588c1db0d109bdfaa8f693e2d))
+* **Tenant:** don't use HistoryAPI and redux-location-state together ([c1bc562](https://github.com/ydb-platform/ydb-embedded-ui/commit/c1bc5621e3ead44b1b84e592f8d7106bbc918e37))
+
+### [1.5.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.0...v1.5.1) (2022-05-25)
+
+
+### Bug Fixes
+
+* **Authentication:** submit form with enter in the login field ([7b6132a](https://github.com/ydb-platform/ydb-embedded-ui/commit/7b6132a6b2556939648167f30b08c5688b56ab98))
+
+## [1.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.4.2...v1.5.0) (2022-05-24)
+
+
+### Features
+
+* **Healthcheck:** use TreeView in issues viewer ([bcd81e5](https://github.com/ydb-platform/ydb-embedded-ui/commit/bcd81e56dc613cf3e9f31d77d930b79e070372e4))
+* **Tenant:** use NavigationTree for schemas ([f2867e1](https://github.com/ydb-platform/ydb-embedded-ui/commit/f2867e18898028ca265df46fcc8bfa4f929173f0))
+
+
+### Bug Fixes
+
+* **Healthcheck:** don't display reasonsItems in issues viewer ([f0a545f](https://github.com/ydb-platform/ydb-embedded-ui/commit/f0a545f7c70d449c121d64f8d1820e53b880a0fc))
+* **Tenant:** add ellipsis to menu items inserting queries ([09135a2](https://github.com/ydb-platform/ydb-embedded-ui/commit/09135a2777ec9183ddf71bd2a4de66c5ef422ac8))
+* **Tenant:** change messages for path copy toasts ([09adfa5](https://github.com/ydb-platform/ydb-embedded-ui/commit/09adfa52735bf706deb1ee9bf37f4bfa459b3758))
+* **Tenant:** switch to query tab for inserted query ([991f156](https://github.com/ydb-platform/ydb-embedded-ui/commit/991f156ff819c58ff79146a44b57fb400729f325))
+
 ### [1.4.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.4.1...v1.4.2) (2022-05-23)
 
 

package/dist/components/GroupTreeViewer/GroupTreeViewer.js

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {withRouter} from 'react-router';
 
+import {TreeView} from 'ydb-ui-components';
+
 import GroupViewer from '../GroupViewer/GroupViewer';
 import PDiskViewer from '../PDiskViewer/PDiskViewer';
 import EntityStatus from '../EntityStatus/EntityStatus';
-import TreeView from '../TreeView/TreeView';
 import {stringifyVdiskId} from '../../utils';
 import routes, {createHref} from '../../routes';
 import {backend} from '../../store';
@@ -50,7 +51,7 @@ class GroupTreeViewer extends React.Component {
                 <div className={b()}>
                     <TreeView
                         key={group.GroupID}
-                        nodeLabel={label2}
+                        name={label2}
                         collapsed={collapsed}
                         onClick={onClick}
                     >

package/dist/components/GroupTreeViewer/GroupTreeViewer.scss

@@ -1,5 +1,3 @@
-@import '../../styles/react-treeview';
-
 .group-tree-viewer {
     &__row {
         display: flex;

package/dist/components/SplitPane/SplitPane.tsx

@@ -18,8 +18,8 @@ interface SplitPaneProps {
     minSize?: number[];
     triggerCollapse?: boolean;
     triggerExpand?: boolean;
-    onSplitStartDrugAdditional?: VoidFunction;
-    onSplitDrugAdditional?: VoidFunction;
+    onSplitStartDragAdditional?: VoidFunction;
+    onSplitDragAdditional?: VoidFunction;
 }
 
 const minSizeDefaultInner = [0, 100];
@@ -41,17 +41,17 @@ function SplitPane(props: SplitPaneProps) {
         localStorage.setItem(defaultSizePaneKey, sizes.join(','));
     };
     const onDragHandler = (sizes: number[]) => {
-        const {onSplitDrugAdditional} = props;
-        if (onSplitDrugAdditional) {
-            onSplitDrugAdditional();
+        const {onSplitDragAdditional} = props;
+        if (onSplitDragAdditional) {
+            onSplitDragAdditional();
         }
         setDefaultSizePane(sizes);
     };
 
     const onDragStartHandler = () => {
-        const {onSplitStartDrugAdditional} = props;
-        if (onSplitStartDrugAdditional) {
-            onSplitStartDrugAdditional();
+        const {onSplitStartDragAdditional} = props;
+        if (onSplitStartDragAdditional) {
+            onSplitStartDragAdditional();
         }
         setInnerSizes(undefined);
     };

package/dist/containers/App/App.js

@@ -25,6 +25,7 @@ class App extends React.Component {
     constructor(props) {
         super(props);
         i18n.setLang(I18N.LANGS.en);
+        I18N.setDefaultLang(I18N.LANGS.en); // for the peer dependency ydb-ui-components, should match the language above
     }
 
     componentDidMount() {

package/dist/containers/App/App.scss

@@ -117,32 +117,6 @@ body,
     border-color: var(--yc-color-text-danger);
 }
 
-.tree-view_item {
-    /* stylelint-disable-next-line declaration-no-important*/
-    cursor: default !important;
-}
-
-.tree-view_children {
-    margin-left: 25px;
-}
-
-.tree-view_arrow {
-    padding: 2px;
-
-    line-height: 0.8;
-
-    transform: rotate(90deg);
-}
-
-.tree-view_arrow-collapsed {
-    transform: rotate(0deg);
-}
-
-.tree-view_arrow:after {
-    font-size: var(--yc-text-body2-font-size);
-    content: '❯';
-}
-
 .data-table__row:hover .entity-status__clipboard-button {
     display: flex;
 }

package/dist/containers/Authentication/Authentication.tsx

@@ -72,6 +72,7 @@ function Authentication({authenticate, error}: any) {
                         onUpdate={onLoginUpdate}
                         placeholder={'Username'}
                         error={loginError}
+                        onKeyDown={onEnterClick}
                         size="l"
                         autoFocus
                     />

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -3,7 +3,7 @@ import qs from 'qs';
 import cn from 'bem-cn-lite';
 import {Link} from 'react-router-dom';
 import {useDispatch, useSelector} from 'react-redux';
-import {useHistory, useLocation} from 'react-router';
+import {useLocation} from 'react-router';
 
 import {Switch, Tabs} from '@yandex-cloud/uikit';
 
@@ -34,8 +34,10 @@ import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
 import {GeneralPagesIds, DATABASE_PAGES, TABLE_PAGES, DIR_PAGES} from './DiagnosticsPages';
 //@ts-ignore
 import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
+import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant';
 
 import './Diagnostics.scss';
+
 interface DiagnosticsProps {
     type: string;
     additionalTenantInfo?: any;
@@ -51,16 +53,17 @@ function Diagnostics(props: DiagnosticsProps) {
         currentSchema: currentItem = {},
         autorefresh,
     } = useSelector((state: any) => state.schema);
+    const {
+        diagnosticsTab = GeneralPagesIds.overview,
+    } = useSelector((state: any) => state.tenant);
 
     const location = useLocation();
 
-    const history = useHistory();
-
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
 
-    const {name: tenantName, generalTab = GeneralPagesIds.overview} = queryParams;
+    const {name: tenantName} = queryParams;
 
     const isDatabase = currentSchemaPath === tenantName;
 
@@ -76,25 +79,20 @@ function Diagnostics(props: DiagnosticsProps) {
             pages = TABLE_PAGES;
         }
         return pages;
-    }, [props.type]);
+    }, [props.type, isDatabase]);
 
     const forwardToDiagnosticTab = (tab: GeneralPagesIds) => {
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.generalTab]: tab,
-            }),
-        );
+        dispatch(setDiagnosticsTab(tab));
     };
     const activeTab = useMemo(() => {
-        if (pages.find((el) => el.id === generalTab)) {
-            return generalTab;
+        if (pages.find((el) => el.id === diagnosticsTab)) {
+            return diagnosticsTab;
         } else {
             const newPage = pages[0].id;
             forwardToDiagnosticTab(newPage);
             return newPage;
         }
-    }, [pages, generalTab]);
+    }, [pages, diagnosticsTab]);
 
     const onAutorefreshToggle = (value: boolean) => {
         if (value) {
@@ -105,12 +103,7 @@ function Diagnostics(props: DiagnosticsProps) {
     };
 
     const forwardToGeneralTab = (tab: TenantGeneralTabsIds) => {
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.general]: tab,
-            }),
-        );
+        dispatch(setTopLevelTab(tab));
     };
 
     const renderTabContent = () => {
@@ -118,7 +111,7 @@ function Diagnostics(props: DiagnosticsProps) {
 
         const tenantNameString = tenantName as string;
 
-        switch (generalTab) {
+        switch (diagnosticsTab) {
             case GeneralPagesIds.overview: {
                 return (
                     <DetailedOverview

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueViewer.scss

@@ -5,37 +5,14 @@
     align-items: center;
 
     height: 40px;
-    margin-left: 36px;
 
     cursor: pointer;
-    .km-tree-view__arrow-icon + & {
-        margin-left: 0;
-    }
 
     &_active {
         border-radius: 4px;
         background: var(--yc-color-base-info);
     }
 
-    &__wpapper {
-        & .km-tree-view__node-wrapper {
-            height: 40px;
-
-            & .km-tree-view__arrow-icon {
-                display: flex;
-                align-items: center;
-
-                width: 36px;
-                height: 36px;
-                margin: 0;
-            }
-        }
-
-        & .tree-view_item {
-            margin: 0;
-        }
-    }
-
     &__field {
         padding: 0 10px;
 
@@ -173,4 +150,15 @@
             }
         }
     }
+
+    .ydb-tree-view {
+        &__item {
+            height: 40px;
+        }
+
+        .tree-view_arrow {
+            width: 40px;
+            height: 40px;
+        }
+    }
 }

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssuesViewer.js

@@ -7,7 +7,8 @@ import _filter from 'lodash/fp/filter';
 import _sortBy from 'lodash/fp/sortBy';
 import _uniqBy from 'lodash/fp/uniqBy';
 
-import TreeView from '../../../../../components/TreeView/TreeView';
+import {TreeView} from 'ydb-ui-components';
+
 import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
 
 import './IssueViewer.scss';
@@ -29,7 +30,7 @@ const issueBlock = cn('issue');
 
 const IssueRow = ({data, treeLevel, active, setInfoForActive, onClick}) => {
     // eslint-disable-next-line no-unused-vars
-    const {id, status, message, type, ...rest} = data;
+    const {id, status, message, type, reasonsItems, ...rest} = data;
 
     useEffect(() => {
         if (active) {
@@ -45,7 +46,7 @@ const IssueRow = ({data, treeLevel, active, setInfoForActive, onClick}) => {
             </div>
             <div
                 className={issueBlock('field', {message: true})}
-                style={{marginLeft: -treeLevel * 25 + 'px'}}
+                style={{marginLeft: -treeLevel * 24 + 'px'}}
             >
                 {message}
             </div>
@@ -85,21 +86,20 @@ const IssuesViewer = ({issues}) => {
                 return (
                     <TreeView
                         key={id}
-                        nodeLabel={
+                        name={
                             <IssueRow
                                 data={item}
                                 treeLevel={treeLevel}
                                 active={isActive}
                                 setInfoForActive={setInfoData}
-                                onClick={() => setActiveItem(id)}
                             />
                         }
-                        className={issueBlock('wpapper', {active: isActive})}
                         collapsed={
                             typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id]
                         }
                         hasArrow={hasArrow}
-                        onClick={() => {
+                        onClick={() => setActiveItem(id)}
+                        onArrowClick={() => {
                             const newValue =
                                 typeof collapsedIssues[id] === 'undefined'
                                     ? false

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -26,8 +26,8 @@
 
     &__action-button {
         position: absolute;
-        top: 12px;
-        right: 4px;
+        top: 8px; // centered relative to the heading
+        right: 5px; // centered relative to the collapsed panel
 
         background-color: var(--yc-color-base-background);
         &_hidden {
@@ -41,32 +41,26 @@
         align-items: center;
     }
 
-    &__tree {
+    &__tree-wrapper {
         display: flex;
-        overflow: scroll;
-        flex: 0 0 auto;
         flex-direction: column;
+    }
+
+    &__tree {
+        overflow-y: scroll;
+        flex: 1 1 auto;
 
         height: 100%;
         padding: 0 12px 12px;
-
-        .tree-view_item {
-            margin: 0;
-            padding: 2px 0;
-        }
-
-        & > div > .tree-view {
-            padding-bottom: 15px;
-        }
     }
 
     &__tree-header {
         display: flex;
+        flex: 0 0 auto;
         justify-content: space-between;
         align-items: center;
 
         padding: 12px 12px 8px;
-        @include sticky-top();
     }
 
     &__tree-title {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -7,18 +7,13 @@ import qs from 'qs';
 import _ from 'lodash';
 
 import {Button, HelpTooltip, Loader, Tabs} from '@yandex-cloud/uikit';
-//@ts-ignore
+
 import SplitPane from '../../../components/SplitPane';
-//@ts-ignore
-import SchemaNode from '../Schema/SchemaNode/SchemaNode';
-//@ts-ignore
+import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
 import Acl from '../Acl/Acl';
-//@ts-ignore
 import SchemaViewer from '../Schema/SchemaViewer/SchemaViewer';
 import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';
-//@ts-ignore
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
-//@ts-ignore
 import Icon from '../../../components/Icon/Icon';
 
 import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
@@ -26,7 +21,6 @@ import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
 import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
-    //@ts-ignore
 } from '../../../utils/constants';
 import {
     TenantGeneralTabsIds,
@@ -41,10 +35,11 @@ import {
     paneVisibilityToggleReducerCreator,
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
-//@ts-ignore
 import {setShowPreview} from '../../../store/reducers/schema';
+import {setTopLevelTab} from '../../../store/reducers/tenant';
 
 import './ObjectSummary.scss';
+
 const b = cn('object-summary');
 
 const getInitialIsSummaryCollapsed = () => {
@@ -103,7 +98,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
     });
 
     const {name: tenantName, info: infoTab} = queryParams;
-    const tenantData = _.get(data[tenantName as string], 'PathDescription.Self');
+    const pathData = _.get(data[tenantName as string], 'PathDescription.Self');
     const currentSchemaData = _.get(data[currentSchemaPath], 'PathDescription.Self');
 
     const tableSchema =
@@ -195,13 +190,20 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const renderTree = () => {
         return (
-            <div>
+            <div className={b('tree-wrapper')}>
                 <div className={b('tree-header')}>
                     <div className={b('tree-title')}>Navigation</div>
                 </div>
                 <div className={b('tree')}>
-                    {tenantData && (
-                        <SchemaNode fullPath={tenantName as string} data={tenantData} isRoot />
+                    {pathData && (
+                        <SchemaTree
+                            rootPath={tenantName as string}
+                            // for the root pathData.Name contains the same string as tenantName,
+                            // but without the leading slash
+                            rootName={pathData?.Name || tenantName}
+                            rootType={pathData.PathType}
+                            currentPath={currentSchemaPath}
+                        />
                     )}
                 </div>
             </div>
@@ -215,18 +217,13 @@ function ObjectSummary(props: ObjectSummaryProps) {
         dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
 
-    const onSplitStartDrugAdditional = () => {
+    const onSplitStartDragAdditional = () => {
         dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.clear);
     };
 
     const onOpenPreview = () => {
         dispatch(setShowPreview(true));
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
-            }),
-        );
+        dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
     };
 
     const renderCommonInfoControls = () => {
@@ -278,7 +275,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
                     <SplitPane
                         direction="vertical"
                         defaultSizePaneKey={DEFAULT_SIZE_TENANT_SUMMARY_KEY}
-                        onSplitStartDrugAdditional={onSplitStartDrugAdditional}
+                        onSplitStartDragAdditional={onSplitStartDragAdditional}
                         triggerCollapse={commonInfoVisibilityState.triggerCollapse}
                         triggerExpand={commonInfoVisibilityState.triggerExpand}
                         minSize={[200, 52]}

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

@@ -298,7 +298,7 @@ function QueryEditor(props) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
 
-    const onSplitStartDrugAdditional = () => {
+    const onSplitStartDragAdditional = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.clear);
     };
 
@@ -636,7 +636,7 @@ function QueryEditor(props) {
                 triggerExpand={resultVisibilityState.triggerExpand}
                 minSize={[0, 52]}
                 collapsedSizes={[100, 0]}
-                onSplitStartDrugAdditional={onSplitStartDrugAdditional}
+                onSplitStartDragAdditional={onSplitStartDragAdditional}
             >
                 <div className={b('pane-wrapper')}>
                     <div className={b('monaco-wrapper')}>

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

@@ -0,0 +1,62 @@
+import {useDispatch} from 'react-redux';
+
+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 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, 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';
+};