chore: update eslint config and fix issues (#3039)

Author: Raubzeug

eslint.config.mjs

@@ -47,6 +47,18 @@ export default [
             curly: ['error', 'all'],
             'react-hooks/exhaustive-deps': 'warn',
             'react-hooks/rules-of-hooks': 'error',
+            'no-restricted-syntax': [
+                'error',
+                {
+                    selector:
+                        "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier, ImportDefaultSpecifier:not([local.name='React']), ImportSpecifier)",
+                    message: "Please use import React from 'react' instead.",
+                },
+                {
+                    selector: 'JSXFragment>JSXOpeningFragment:not(:has(JSXIdentifier))',
+                    message: 'Please use React.Fragment instead.',
+                },
+            ],
         },
     },
     // TypeScript-specific rules that require type information

src/components/Portal/Portal.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import ReactDOM from 'react-dom';
 

src/containers/App/AppTitleContext.tsx

@@ -1,10 +1,10 @@
-import React, {createContext, useContext} from 'react';
+import React from 'react';
 
 interface AppTitleContextType {
     appTitle: string;
 }
 
-const AppTitleContext = createContext<AppTitleContextType | undefined>(undefined);
+const AppTitleContext = React.createContext<AppTitleContextType | undefined>(undefined);
 
 interface AppTitleProviderProps {
     appTitle: string;
@@ -16,7 +16,7 @@ export function AppTitleProvider({appTitle, children}: AppTitleProviderProps) {
 }
 
 export function useAppTitle(): AppTitleContextType {
-    const context = useContext(AppTitleContext);
+    const context = React.useContext(AppTitleContext);
     if (context === undefined) {
         throw new Error('useAppTitle must be used within an AppTitleProvider');
     }

src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.tsx

@@ -1,4 +1,4 @@
-import {useMemo} from 'react';
+import React from 'react';
 
 import {Flex} from '@gravity-ui/uikit';
 import {useLocation} from 'react-router-dom';
@@ -75,22 +75,28 @@ export function MetricsTabs({
     };
 
     // Use only pools that directly indicate resources available to perform user queries
-    const cpuPools = useMemo(
+    const cpuPools = React.useMemo(
         () =>
             (poolsCpuStats || []).filter((pool) => !(pool.name === 'Batch' || pool.name === 'IO')),
         [poolsCpuStats],
     );
-    const cpuMetrics = useMemo(() => calculateMetricAggregates(cpuPools), [cpuPools]);
+    const cpuMetrics = React.useMemo(() => calculateMetricAggregates(cpuPools), [cpuPools]);
 
     // Calculate storage metrics using utility
-    const storageStats = useMemo(
+    const storageStats = React.useMemo(
         () => tabletStorageStats || blobStorageStats || [],
         [tabletStorageStats, blobStorageStats],
     );
-    const storageMetrics = useMemo(() => calculateMetricAggregates(storageStats), [storageStats]);
+    const storageMetrics = React.useMemo(
+        () => calculateMetricAggregates(storageStats),
+        [storageStats],
+    );
 
     // Calculate memory metrics using utility
-    const memoryMetrics = useMemo(() => calculateMetricAggregates(memoryStats), [memoryStats]);
+    const memoryMetrics = React.useMemo(
+        () => calculateMetricAggregates(memoryStats),
+        [memoryStats],
+    );
 
     // Pass raw network values; DedicatedMetricsTabs computes percent and legend
     const [showNetworkUtilization] = useSetting<boolean>(SHOW_NETWORK_UTILIZATION);

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {Flex} from '@gravity-ui/uikit';
 
 import {setTopQueriesFilters} from '../../../../../store/reducers/executeTopQueries/executeTopQueries';
@@ -34,7 +36,7 @@ export function TenantCpu({database, databaseType, databaseFullPath}: TenantCpuP
     return (
         <Flex direction="column" gap={4}>
             {!isServerless && (
-                <>
+                <React.Fragment>
                     <TenantDashboard database={database} charts={cpuDashboardConfig} />
                     <StatsWrapper
                         allEntitiesLink={allNodesLink}
@@ -48,7 +50,7 @@ export function TenantCpu({database, databaseType, databaseFullPath}: TenantCpuP
                     >
                         <TopNodesByCpu database={database} />
                     </StatsWrapper>
-                </>
+                </React.Fragment>
             )}
             <StatsWrapper title={i18n('title_top-shards')} allEntitiesLink={topShardsLink}>
                 <TopShards database={database} databaseFullPath={databaseFullPath} />

src/routes.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import type {Location} from 'history';
 import isEmpty from 'lodash/isEmpty';