NO-JIRA: don't allow directly importing React

[PeterYurkovich]

Summary by CodeRabbit

• Refactor

  • Standardized React import patterns across application components and custom hooks to improve code consistency and maintainability throughout the codebase.

• Chores

  • Enhanced ESLint configuration with new rules to enforce consistent import practices and maintain higher code quality standards.

[openshift-ci-robot]

@PeterYurkovich: This pull request explicitly references no jira issue.

Details

In response to this:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: PeterYurkovich

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [PeterYurkovich]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited)

Review profile: CHILL

Plan: Enterprise

Run ID: 699f239c-5d55-4020-b71f-d5f97929bdc0

📥 Commits

Reviewing files that changed from the base of the PR and between 8a8dbcf and 0896831.

📒 Files selected for processing (3)

• web/eslint.config.ts
• web/src/components/topology/Korrel8rTopology.tsx
• web/src/hooks/useAgentNavigation.ts

---

Walkthrough

The PR adds an ESLint rule restricting default and namespace imports of React, then updates two component files to use named imports from react instead of the React.* namespace pattern, enforcing a consistent import style across the codebase.

Changes

Migration to Named React Imports

Layer / File(s)	Summary
ESLint enforcement rule web/eslint.config.ts	Adds no-restricted-syntax rule blocking import React from "react" and import * as React from "react", with messages directing developers to use named imports instead.
Component import and type updates web/src/components/topology/Korrel8rTopology.tsx	React import updated to add ReactElement named import; nodeMenu callback return type changed from React.ReactElement[] to ReactElement[].
Hook refactoring web/src/hooks/useAgentNavigation.ts	Refactored to import useEffect and useRef as named imports; all React.useEffect() and React.useRef() calls replaced with named hook usage while preserving SSE console update logic and retry behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 12

✅ Passed checks (12 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding an ESLint rule to prevent direct React imports in favor of named imports.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Stable And Deterministic Test Names	✅ Passed	This PR contains no Ginkgo tests. The repository uses Go's standard testing framework only. Changes are limited to TypeScript/React files. The check is not applicable.
Test Structure And Quality	✅ Passed	The custom check requires review of Ginkgo test code. This PR modifies only TypeScript/React files and contains no Ginkgo tests. The check is not applicable to this PR.
Microshift Test Compatibility	✅ Passed	No Ginkgo e2e tests are present in this PR. Only ESLint config and React import statements in TypeScript code were modified. Check not applicable.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	This PR does not add Ginkgo e2e tests. It only modifies web console plugin TypeScript/React code and ESLint configuration. The SNO test compatibility check is not applicable.
Topology-Aware Scheduling Compatibility	✅ Passed	Frontend-only PR with no deployment manifests or operator code. Topology scheduling check is not applicable.
Ote Binary Stdout Contract	✅ Passed	This check applies to OTE Go binaries. The PR only modifies JavaScript/TypeScript in the web directory with no changes to Go code or stdout behavior.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	Custom check not applicable. PR modifies only TypeScript web UI code (ESLint config and React components), not Ginkgo e2e tests which the check targets.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[PeterYurkovich]

/retest

[openshift-ci]

@PeterYurkovich: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/fips-image-scan	0896831	link	true	/test fips-image-scan

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.