feat: prepare for react-router 6, lazy load routes (#980)

Author: ValeraS

src/containers/App/Content.tsx

@@ -13,18 +13,11 @@ import {getUser} from '../../store/reducers/authentication/authentication';
 import {nodesListApi} from '../../store/reducers/nodesList';
 import {cn} from '../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {lazyComponent} from '../../utils/lazyComponent';
 import Authentication from '../Authentication/Authentication';
-import Cluster from '../Cluster/Cluster';
 import {getClusterPath} from '../Cluster/utils';
-import {Clusters} from '../Clusters/Clusters';
 import Header from '../Header/Header';
 import type {RawBreadcrumbItem} from '../Header/breadcrumbs';
-import Node from '../Node/Node';
-import {PDiskPage} from '../PDiskPage/PDiskPage';
-import {Tablet} from '../Tablet';
-import {TabletsFilters} from '../TabletsFilters/TabletsFilters';
-import Tenant from '../Tenant/Tenant';
-import {VDiskPage} from '../VDiskPage/VDiskPage';
 
 import {
     ClusterSlot,
@@ -54,40 +47,45 @@ const routesSlots: RouteSlot[] = [
     {
         path: routes.cluster,
         slot: ClusterSlot,
-        component: Cluster,
+        component: lazyComponent(() => import('../Cluster/Cluster'), 'Cluster'),
     },
     {
         path: routes.tenant,
         slot: TenantSlot,
-        component: Tenant,
+        component: lazyComponent(() => import('../Tenant/Tenant'), 'Tenant'),
     },
     {
         path: routes.node,
         slot: NodeSlot,
-        component: Node,
+        component: lazyComponent(() => import('../Node/Node'), 'Node'),
     },
     {
         path: routes.pDisk,
         slot: PDiskPageSlot,
-        component: PDiskPage,
+        component: lazyComponent(() => import('../PDiskPage/PDiskPage'), 'PDiskPage'),
     },
     {
         path: routes.vDisk,
         slot: VDiskPageSlot,
-        component: VDiskPage,
+        component: lazyComponent(() => import('../VDiskPage/VDiskPage'), 'VDiskPage'),
     },
     {
         path: routes.tablet,
         slot: TabletSlot,
-        component: Tablet,
+        component: lazyComponent(() => import('../Tablet'), 'Tablet'),
     },
     {
         path: routes.tabletsFilters,
         slot: TabletsFiltersSlot,
-        component: TabletsFilters,
+        component: lazyComponent(
+            () => import('../TabletsFilters/TabletsFilters'),
+            'TabletsFilters',
+        ),
     },
 ];
 
+const Clusters = lazyComponent(() => import('../Clusters/Clusters'), 'Clusters');
+
 function renderRouteSlot(slots: SlotMap, route: RouteSlot) {
     return (
         <Route
@@ -151,7 +149,12 @@ export function Content(props: ContentProps) {
                     {routesSlots.map((route) => {
                         return renderRouteSlot(slots, route);
                     })}
-                    <Redirect {...redirectProps} />
+                    <Route
+                        path={redirectProps.from || redirectProps.path}
+                        exact={redirectProps.exact}
+                        strict={redirectProps.strict}
+                        render={() => <Redirect to={redirectProps.to} push={redirectProps.push} />}
+                    />
                 </Switch>
             </Route>
         </Switch>

src/containers/App/Providers.tsx

@@ -5,7 +5,7 @@ import type {Store} from '@reduxjs/toolkit';
 import type {History} from 'history';
 import {HelmetProvider} from 'react-helmet-async';
 import {Provider} from 'react-redux';
-import {Router} from 'react-router';
+import {Router} from 'react-router-dom';
 import {QueryParamProvider} from 'use-query-params';
 import {ReactRouter5Adapter} from 'use-query-params/adapters/react-router-5';
 

src/containers/App/appSlots.tsx

@@ -1,13 +1,13 @@
-import type {RedirectProps, RouteComponentProps} from 'react-router';
+import type {RedirectProps, RouteComponentProps} from 'react-router-dom';
 
 import {createSlot} from '../../components/slots';
-import type Cluster from '../Cluster/Cluster';
+import type {Cluster} from '../Cluster/Cluster';
 import type {Clusters} from '../Clusters/Clusters';
-import type Node from '../Node/Node';
+import type {Node} from '../Node/Node';
 import type {PDiskPage} from '../PDiskPage/PDiskPage';
 import type {Tablet} from '../Tablet';
 import type {TabletsFilters} from '../TabletsFilters/TabletsFilters';
-import type Tenant from '../Tenant/Tenant';
+import type {Tenant} from '../Tenant/Tenant';
 import type {VDiskPage} from '../VDiskPage/VDiskPage';
 
 export const ClustersSlot = createSlot<{

src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx

@@ -13,7 +13,7 @@ import {cn} from '../../../utils/cn';
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../../utils/monitoring';
 import {getCleanBalancerValue, removeViewerPathname} from '../../../utils/parseBalancer';
 import {getBackendFromNodeHost} from '../../../utils/prepareBackend';
-import type Cluster from '../../Cluster/Cluster';
+import type {Cluster} from '../../Cluster/Cluster';
 import {useClusterData} from '../useClusterData';
 
 import './ExtendedCluster.scss';

src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx

@@ -1,4 +1,4 @@
-import type Node from '../../Node/Node';
+import type {Node} from '../../Node/Node';
 import {useClusterData} from '../useClusterData';
 
 export function ExtendedNode({component: NodeComponent}: {component: typeof Node}) {

src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx

@@ -1,7 +1,7 @@
 import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
 import type {ETenantType} from '../../../types/api/tenant';
 import type {GetMonitoringLink} from '../../../utils/monitoring';
-import type Tenant from '../../Tenant/Tenant';
+import type {Tenant} from '../../Tenant/Tenant';
 import {useClusterData} from '../useClusterData';
 
 export interface ExtendedTenantProps {

src/containers/AppWithClusters/useClusterData.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useLocation} from 'react-router';
+import {useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../routes';
 import {clustersApi} from '../../store/reducers/clusters/clusters';

src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx

@@ -1,6 +1,6 @@
 import {ArrowRightFromSquare, ArrowRightToSquare} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
-import {useHistory} from 'react-router';
+import {useHistory} from 'react-router-dom';
 
 import routes, {createHref} from '../../../routes';
 import {logout} from '../../../store/reducers/authentication/authentication';

src/containers/Authentication/Authentication.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Eye, EyeSlash, Xmark} from '@gravity-ui/icons';
 import {Button, Link as ExternalLink, Icon, TextInput} from '@gravity-ui/uikit';
-import {useHistory, useLocation} from 'react-router';
+import {useHistory, useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../routes';
 import {authenticate} from '../../store/reducers/authentication/authentication';

src/containers/Cluster/Cluster.tsx

@@ -41,7 +41,7 @@ interface ClusterProps {
     additionalVersionsProps?: AdditionalVersionsProps;
 }
 
-function Cluster({
+export function Cluster({
     additionalClusterProps,
     additionalTenantsProps,
     additionalNodesProps,
@@ -198,7 +198,11 @@ function Cluster({
                     >
                         <Versions versionToColor={versionToColor} />
                     </Route>
-                    <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
+                    <Route
+                        render={() => (
+                            <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
+                        )}
+                    />
                 </Switch>
             </div>
         </div>
@@ -228,5 +232,3 @@ function useClusterTab() {
 
     return activeTab;
 }
-
-export default Cluster;

src/containers/Node/Node.tsx

@@ -33,7 +33,7 @@ interface NodeProps {
     className?: string;
 }
 
-function Node(props: NodeProps) {
+export function Node(props: NodeProps) {
     const container = React.useRef<HTMLDivElement>(null);
 
     const dispatch = useTypedDispatch();
@@ -159,5 +159,3 @@ function Node(props: NodeProps) {
         return <div className="error">no node data</div>;
     }
 }
-
-export default Node;

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useHistory, useLocation} from 'react-router';
+import {useHistory, useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../../../../routes';
 import {changeUserInput} from '../../../../../store/reducers/executeQuery';

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx

@@ -1,4 +1,4 @@
-import {useLocation} from 'react-router';
+import {useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../../../../routes';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx

@@ -1,6 +1,6 @@
 import type {Column} from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
-import {useLocation} from 'react-router';
+import {useLocation} from 'react-router-dom';
 
 import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover';
 import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';

src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useHistory, useLocation} from 'react-router';
+import {useHistory, useLocation} from 'react-router-dom';
 
 import type {DateRangeValues} from '../../../../components/DateRange';
 import {DateRange} from '../../../../components/DateRange';

src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
-import {useLocation} from 'react-router';
+import {useLocation} from 'react-router-dom';
 
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';

src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx

@@ -1,4 +1,4 @@
-import {useLocation} from 'react-router';
+import {useLocation} from 'react-router-dom';
 
 import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import type {InfoViewerItem} from '../../../../components/InfoViewer';

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -4,8 +4,7 @@ import {HelpPopover} from '@gravity-ui/components';
 import {LayoutHeaderCellsLargeFill} from '@gravity-ui/icons';
 import {Button, Icon, Tabs} from '@gravity-ui/uikit';
 import qs from 'qs';
-import {useLocation} from 'react-router';
-import {Link} from 'react-router-dom';
+import {Link, useLocation} from 'react-router-dom';
 import {StringParam, useQueryParam} from 'use-query-params';
 
 import {AsyncReplicationState} from '../../../components/AsyncReplicationState';

src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx

@@ -1,5 +1,5 @@
 import {Tabs} from '@gravity-ui/uikit';
-import {useLocation} from 'react-router';
+import {useLocation} from 'react-router-dom';
 
 import {InternalLink} from '../../../../components/InternalLink/InternalLink';
 import {parseQuery} from '../../../../routes';

src/containers/Tenant/Tenant.tsx

@@ -40,7 +40,7 @@ interface TenantProps {
     additionalNodesProps?: AdditionalNodesProps;
 }
 
-function Tenant(props: TenantProps) {
+export function Tenant(props: TenantProps) {
     const [summaryVisibilityState, dispatchSummaryVisibilityAction] = React.useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED),
         undefined,
@@ -143,5 +143,3 @@ function Tenant(props: TenantProps) {
         </div>
     );
 }
-
-export default Tenant;

src/containers/Tenant/TenantNavigation/useTenantNavigation.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Pulse, Terminal} from '@gravity-ui/icons';
-import {useHistory, useLocation} from 'react-router';
+import {useHistory, useLocation} from 'react-router-dom';
 
 import routes, {parseQuery} from '../../../routes';
 import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';

src/utils/hooks/useSearchQuery.ts

@@ -1,4 +1,4 @@
-import {useLocation} from 'react-router';
+import {useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../routes';