NO-JIRA: don't allow directly importing React

web/eslint.config.ts

@@ -78,6 +78,21 @@ export default defineConfig([
       'react-hooks/set-state-in-render': 'off',
       'react-hooks/incompatible-library': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
+
+      // Prevent directly importing react as a lint rule
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'ImportDeclaration[source.value="react"] ImportDefaultSpecifier',
+          message:
+            'Do not directly import React. Add specific named imports instead (`import { useState, FC } from "react"`).',
+        },
+        {
+          selector: 'ImportDeclaration[source.value="react"] ImportNamespaceSpecifier',
+          message:
+            'Do not directly namespace import React (`import * as React`). Add specific named imports instead (`import { useState, FC } from "react"`).',
+        },
+      ],
     },
   },
   {

web/src/components/topology/Korrel8rTopology.tsx

@@ -38,7 +38,7 @@ import { useNavigateToQuery } from '../../hooks/useNavigateToQuery';
 import * as korrel8r from '../../korrel8r/types';
 import { getIcon } from '../icons';
 import './korrel8rtopology.css';
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FC, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // DagreLayout with straight edges (no angular bendpoints).
 class StraightEdgeDagreLayout extends DagreLayout {
@@ -157,7 +157,7 @@ export const Korrel8rTopology: FC<{
   );
 
   const nodeMenu = useCallback(
-    (e: GraphElement<ElementModel, korrel8r.Node>): React.ReactElement[] => {
+    (e: GraphElement<ElementModel, korrel8r.Node>): ReactElement[] => {
       const node = e.getData();
       const menu = [
         <ContextMenuItem isDisabled={true} key={node.class.toString()}>

web/src/hooks/useAgentNavigation.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect, useRef } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { getConsoleUpdates, sendConsoleUpdate } from '../korrel8r-client';
 import * as api from '../korrel8r/client';
@@ -27,13 +27,13 @@ const useAgentNavigation = ({
   const dispatch = useDispatch();
   const navigateToQuery = useNavigateToQuery();
 
-  const navigateToQueryRef = React.useRef(navigateToQuery);
-  React.useEffect(() => {
+  const navigateToQueryRef = useRef(navigateToQuery);
+  useEffect(() => {
     navigateToQueryRef.current = navigateToQuery;
   });
 
   // Handle console update events via an SSE request.
-  React.useEffect(() => {
+  useEffect(() => {
     if (!agentEnabled) {
       dispatch(setAgentError(''));
       return;
@@ -68,7 +68,7 @@ const useAgentNavigation = ({
   }, [agentEnabled, minDelay, maxDelay, dispatch]);
 
   // Send console updates when view or search changes.
-  React.useEffect(() => {
+  useEffect(() => {
     if (!agentEnabled) return;
     const body = {
       view,