ydb-embedded-ui 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+### [1.1.1](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.1.0...v1.1.1) (2022-04-19)
+
+
+### Bug Fixes
+
+* add typecheck + fix type errors ([e6d9086](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/e6d9086c46702a611f848c992377d18826ca2e23))
+* **Node:** scroll to selected vdisk should not apply to undefined container ([7236a43](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/7236a43655b935777abb5b8df228ae011ceb6bed))
+
 ## [1.1.0](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.0.4...v1.1.0) (2022-04-15)
 
 

package/dist/components/AsideNavigation/AsideHeader.tsx

@@ -20,7 +20,7 @@ import {
     FooterItemIconView,
 } from './constants';
 import i18n from './i18n';
-import {Lang} from 'utils/i18n';
+
 import {getLocalData, setLocalData} from './helpers';
 import {SetSlotsContext, SlotsProvider} from './AsideHeaderFooterSlot/SlotsContext';
 import {SlotName} from './AsideHeaderFooterSlot/AsideHeaderFooterSlot';
@@ -28,6 +28,7 @@ import {SlotName} from './AsideHeaderFooterSlot/AsideHeaderFooterSlot';
 import controlMenuButton from '../../assets/icons/control-menu-button.svg';
 
 import './AsideHeader.scss';
+import {Lang} from '../../utils/i18n';
 
 const b = block('nv-aside-header');
 

package/dist/containers/Authentication/Authentication.tsx

@@ -43,7 +43,7 @@ function Authentication({authenticate, error}: any) {
         authenticate(login, pass);
     };
 
-    const onEnterClick = (e: KeyboardEvent<HTMLInputElement>) => {
+    const onEnterClick = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         if (e.keyCode === 13) {
             onLoginClick();
         }

package/dist/containers/Node/Node.tsx

@@ -39,7 +39,6 @@ interface NodeProps {
 
 function Node(props: NodeProps) {
     const dispatch = useDispatch();
-    const repaint = React.useState({})[1];
 
     const wasLoaded = useSelector((state: any) => state.node.wasLoaded);
     const loading = useSelector((state: any) => state.node.loading);
@@ -72,8 +71,6 @@ function Node(props: NodeProps) {
         return {activeTabVerified, nodeTabs};
     }, [activeTab, node]);
 
-    const nodeContainerRef = React.useRef<HTMLDivElement | null>(null);
-
     React.useEffect(() => {
         const fetchData = () => dispatch(getNodeInfo(nodeId));
         fetchData();
@@ -148,7 +145,6 @@ function Node(props: NodeProps) {
                         className={b('node-page-wrapper')}
                         nodeId={nodeId}
                         additionalNodesInfo={additionalNodesInfo}
-                        scrollContainer={nodeContainerRef.current}
                     />
                 );
             }
@@ -157,13 +153,6 @@ function Node(props: NodeProps) {
         }
     };
 
-    const onRefChange = (ref: HTMLDivElement) => {
-        if (!nodeContainerRef.current) {
-            nodeContainerRef.current = ref;
-            repaint({});
-        }
-    };
-
     if (loading && !wasLoaded) {
         return <Loader />;
     } else if (error) {
@@ -171,12 +160,10 @@ function Node(props: NodeProps) {
     } else {
         if (node) {
             return (
-                <div className={`${b()} ${props.className}`}>
+                <div className={b(null, props.className)}>
                     {renderTabs()}
 
-                    <div className={b('content')} ref={onRefChange}>
-                        {renderTabContent()}
-                    </div>
+                    <div className={b('content')}>{renderTabContent()}</div>
                 </div>
             );
         }

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -1,10 +1,13 @@
 @import '../../../styles/mixins.scss';
 
 .kv-node-structure {
+    position: relative;
+
     display: flex;
     overflow: auto;
     flex-direction: column;
     flex-shrink: 0;
+    @include flex-container();
     @include body2-typography();
 
     &__loader {

package/dist/containers/Node/NodeStructure/NodeStructure.tsx

@@ -28,7 +28,6 @@ interface NodeStructureProps {
     nodeId: string;
     className?: string;
     additionalNodesInfo?: any;
-    scrollContainer: Element | null;
 }
 
 const autofetcher = new AutoFetcher();
@@ -40,9 +39,7 @@ function NodeStructure(props: NodeStructureProps) {
 
     const loadingStructure = useSelector((state: any) => state.node.loadingStructure);
     const wasLoadedStructure = useSelector((state: any) => state.node.wasLoadedStructure);
-    const nodeData = useSelector(
-        (state: any) => state.node?.data?.SystemStateInfo?.[0]
-    );
+    const nodeData = useSelector((state: any) => state.node?.data?.SystemStateInfo?.[0]);
 
     const nodeHref = useMemo(() => {
         return props.additionalNodesInfo?.getNodeRef
@@ -55,13 +52,15 @@ function NodeStructure(props: NodeStructureProps) {
         true,
     ).query;
 
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const scrollContainer = scrollContainerRef.current;
+
     const isReady = useRef(false);
 
     const scrolled = useRef(false);
 
     useEffect(() => {
         return () => {
-            const {scrollContainer} = props;
             if (scrollContainer) {
                 scrollContainer.scrollTo({
                     behavior: 'smooth',
@@ -84,13 +83,12 @@ function NodeStructure(props: NodeStructureProps) {
     }, [props.nodeId, dispatch]);
 
     useEffect(() => {
-        if (!_.isEmpty(nodeStructure) && props.scrollContainer) {
+        if (!_.isEmpty(nodeStructure) && scrollContainer) {
             isReady.current = true;
         }
-    }, [nodeStructure, props.scrollContainer]);
+    }, [nodeStructure]);
 
     useEffect(() => {
-        const {scrollContainer} = props;
         if (isReady.current && !scrolled.current && scrollContainer) {
             const element = document.getElementById(
                 generateId({type: 'pdisk', id: pdiskIdFromUrl as string}),
@@ -105,7 +103,7 @@ function NodeStructure(props: NodeStructureProps) {
                 const order = vDisk?.order;
 
                 if (dataTable) {
-                    scrollToVdisk += (dataTable as HTMLElement).offsetTop + 40 * (order + 1);
+                    scrollToVdisk += (dataTable as HTMLElement).offsetTop + 40 * order;
                 }
             }
 
@@ -113,12 +111,12 @@ function NodeStructure(props: NodeStructureProps) {
                 scrollContainer.scrollTo({
                     behavior: 'smooth',
                     // should subtract 20 to avoid sticking the element to tabs
-                    top: scrollToVdisk ? scrollToVdisk : element.offsetTop - 20,
+                    top: scrollToVdisk ? scrollToVdisk : element.offsetTop,
                 });
                 scrolled.current = true;
             }
         }
-    }, [nodeStructure, props.scrollContainer, pdiskIdFromUrl, vdiskIdFromUrl]);
+    }, [nodeStructure, pdiskIdFromUrl, vdiskIdFromUrl]);
 
     const renderStub = () => {
         return 'There is no information about node structure.';
@@ -147,7 +145,11 @@ function NodeStructure(props: NodeStructureProps) {
         return renderStructure();
     };
 
-    return <div className={b(null, props.className)}>{renderContent()}</div>;
+    return (
+        <div className={b()} ref={scrollContainerRef}>
+            <div className={props.className}>{renderContent()}</div>
+        </div>
+    );
 }
 
 export default NodeStructure;

package/dist/containers/Node/NodeStructure/Vdisk.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
 
-import ProgressViewer from 'components/ProgressViewer/ProgressViewer';
-import {formatStorageValuesToGb, stringifyVdiskId} from 'utils';
-import {bytesToGB, bytesToSpeed} from 'utils/utils';
+import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import {formatStorageValuesToGb, stringifyVdiskId} from '../../../utils';
+import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import {valueIsDefined} from './NodeStructure';
-import InfoViewer from 'components/InfoViewer/InfoViewer';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 
 const b = cn('kv-node-structure');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "files": [
     "dist"
   ],
@@ -52,6 +52,9 @@
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "prepublishOnly": "npm run package",
+    "typecheck": "npm run typecheck:server && npm run typecheck:ui",
+    "typecheck:server": "tsc -p src/server --noEmit",
+    "typecheck:ui": "tsc -p src/ui --noEmit",
     "prepare": "husky install"
   },
   "lint-staged": {
@@ -78,6 +81,7 @@
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@types/lodash": "^4.14.178",
+    "@types/react": "^17.0.44",
     "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.2",
@@ -99,6 +103,6 @@
     "react-app-rewired": "^2.1.11",
     "react-dom": "^17.0.2",
     "stylelint": "^14.3.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   }
 }