fix(Node): scroll to selected vdisk should not apply to undefined container

Author: Raubzeug

src/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,26 +153,17 @@ function Node(props: NodeProps) {
         }
     };
 
-    const onRefChange = (ref: HTMLDivElement) => {
-        if (!nodeContainerRef.current) {
-            nodeContainerRef.current = ref;
-            repaint({});
-        }
-    };
-
     if (loading && !wasLoaded) {
         return <Loader />;
     } else if (error) {
         return <div>{error.statusText}</div>;
     } 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>
             );
         }

src/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 {

src/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,20 +103,20 @@ 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;
                 }
             }
 
             if (element) {
                 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;