chore: remove unused dependencies (#1269)

package.json

@@ -42,16 +42,13 @@
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.52.1",
     "react-json-inspector": "^7.1.1",
-    "react-list": "^0.8.17",
     "react-monaco-editor": "^0.55.0",
     "react-redux": "^9.1.2",
-    "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
     "react-split": "^2.0.14",
     "redux": "^5.0.1",
     "redux-location-state": "^2.8.2",
     "tslib": "^2.6.3",
-    "url": "^0.11.3",
     "use-query-params": "^2.2.1",
     "uuid": "^10.0.0",
     "web-vitals": "^1.1.2",
@@ -144,7 +141,6 @@
     "@types/qs": "^6.9.15",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^10.0.0",
     "copyfiles": "^2.4.1",

src/containers/Node/NodeStructure/NodeStructure.tsx

@@ -1,8 +1,7 @@
-import url from 'url';
-
 import React from 'react';
 
 import isEmpty from 'lodash/isEmpty';
+import {StringParam, useQueryParams} from 'use-query-params';
 
 import {Loader} from '../.././../components/Loader';
 import {ResponseError} from '../../../components/Errors/ResponseError';
@@ -37,25 +36,30 @@ function NodeStructure({nodeId, className}: NodeStructureProps) {
 
     const loadingStructure = isFetching && currentData === undefined;
 
-    const {pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl} = url.parse(
-        window.location.href,
-        true,
-    ).query;
+    const [{pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl}] = useQueryParams({
+        pdiskId: StringParam,
+        vdiskId: StringParam,
+    });
 
     const scrollContainerRef = React.useRef<HTMLDivElement>(null);
 
     const scrolled = React.useRef(false);
 
     React.useEffect(() => {
-        if (!isEmpty(nodeStructure) && !scrolled.current && scrollContainerRef.current) {
+        if (
+            !isEmpty(nodeStructure) &&
+            !scrolled.current &&
+            scrollContainerRef.current &&
+            pdiskIdFromUrl
+        ) {
             const element = document.getElementById(
-                generateId({type: 'pdisk', id: pdiskIdFromUrl as string}),
+                generateId({type: 'pdisk', id: pdiskIdFromUrl}),
             );
 
             let scrollToVdisk = 0;
 
             if (vdiskIdFromUrl) {
-                const vDisks = nodeStructure[pdiskIdFromUrl as string]?.vDisks;
+                const vDisks = nodeStructure[pdiskIdFromUrl]?.vDisks;
                 const vDisk = vDisks?.find((el) => el.id === vdiskIdFromUrl);
                 const dataTable = vDisk ? document.querySelector('.data-table') : undefined;
                 const order = vDisk?.order || 0;

src/store/getUrlData.ts

@@ -1,5 +1,3 @@
-import url from 'url';
-
 export const getUrlData = ({
     href,
     singleClusterMode,
@@ -10,17 +8,20 @@ export const getUrlData = ({
     customBackend?: string;
 }) => {
     if (!singleClusterMode) {
-        const {backend, clusterName} = url.parse(href, true).query;
+        const urlSearchParams = new URL(href).searchParams;
+        const backend = urlSearchParams.get('backend') ?? undefined;
+        const clusterName = urlSearchParams.get('clusterName') ?? undefined;
         return {
             basename: '/',
-            backend: backend ? String(backend) : backend,
-            clusterName: clusterName ? String(clusterName) : clusterName,
+            backend,
+            clusterName,
         };
     } else if (customBackend) {
-        const {backend} = url.parse(href, true).query;
+        const urlSearchParams = new URL(href).searchParams;
+        const backend = urlSearchParams.get('backend') ?? undefined;
         return {
             basename: '/',
-            backend: backend ? String(backend) : customBackend,
+            backend: backend ? backend : customBackend,
         };
     } else {
         const parsedPrefix = window.location.pathname.match(/.*(?=\/monitoring)/) || [];