Remove unused React imports (#687)

Author: felipecrs

eslint.config.js

@@ -15,6 +15,7 @@ export default [
       },
     },
   },
+  plugins.react.configs.flat["jsx-runtime"],
   plugins.promise.configs["flat/recommended"],
   {
     plugins: {
@@ -25,4 +26,25 @@ export default [
       "simple-import-sort/exports": "error",
     },
   },
+  {
+    rules: {
+      "no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "react",
+              importNames: ["default"],
+              message: "Please use named imports instead.",
+            },
+            {
+              name: "react-dom/client",
+              importNames: ["default"],
+              message: "Please use named imports instead.",
+            },
+          ],
+        },
+      ],
+    },
+  },
 ];

src/main/frontend/common/RestClient.tsx

@@ -1,8 +1,8 @@
 import {
   Result,
   StageInfo,
-} from "../pipeline-graph-view/pipeline-graph/main/index.ts";
-import { ResourceBundle } from "./i18n/index.ts";
+} from "../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
+import { ResourceBundle } from "./i18n/messages.ts";
 
 export interface RunStatus {
   stages: StageInfo[];

src/main/frontend/common/components/dropdown-portal.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import { ReactNode } from "react";
+import { createPortal } from "react-dom";
 
 interface DropdownPortalProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export default function DropdownPortal({ children }: DropdownPortalProps) {
@@ -13,5 +13,5 @@ export default function DropdownPortal({ children }: DropdownPortalProps) {
     return null;
   }
 
-  return ReactDOM.createPortal(children, container);
+  return createPortal(children, container);
 }

src/main/frontend/common/components/dropdown.tsx

@@ -1,5 +1,5 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
-import React, { useState } from "react";
+import { isValidElement, ReactElement, ReactNode, useState } from "react";
 
 import Tooltip from "./tooltip.tsx";
 
@@ -33,7 +33,7 @@ export default function Dropdown({
                 );
               }
 
-              if (React.isValidElement(item)) {
+              if (isValidElement(item)) {
                 return (
                   <div key={index} className="jenkins-dropdown__custom-item">
                     {item}
@@ -89,15 +89,15 @@ export const DefaultDropdownProps: TippyProps = {
 };
 
 interface DropdownProps {
-  items: (DropdownItem | React.ReactElement | "separator")[];
+  items: (DropdownItem | ReactElement | "separator")[];
   disabled?: boolean;
   className?: string;
 }
 
 interface DropdownItem {
   text: string;
   href?: string;
-  icon: React.ReactNode;
+  icon: ReactNode;
   target?: string;
   download?: string;
 }

src/main/frontend/common/components/filter.tsx

@@ -1,10 +1,10 @@
 import "./filter.scss";
 
 import Tippy from "@tippyjs/react";
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { useFilter } from "../../pipeline-console-view/pipeline-console/main/providers/filter-provider.tsx";
-import { Result } from "../../pipeline-graph-view/pipeline-graph/main/index.ts";
+import { Result } from "../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 import { classNames } from "../utils/classnames.ts";
 import { DefaultDropdownProps } from "./dropdown.tsx";
 import StatusIcon from "./status-icon.tsx";

src/main/frontend/common/components/status-icon.tsx

@@ -1,8 +1,8 @@
 import "./status-icon.scss";
 
-import React from "react";
+import { ReactNode } from "react";
 
-import { Result } from "../../pipeline-graph-view/pipeline-graph/main/index.ts";
+import { Result } from "../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 
 /**
  * Visual representation of a job or build status
@@ -176,7 +176,7 @@ function Group({
 }: {
   currentStatus: Result;
   status: Result;
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   return (
     <g

src/main/frontend/common/components/tooltip.tsx

@@ -1,5 +1,4 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
-import React from "react";
 
 /**
  * A customized (and customizable) implementation of Tippy tooltips

src/main/frontend/common/i18n/i18n-provider.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   Context,
   createContext,
   FunctionComponent,

src/main/frontend/common/i18n/index.ts

@@ -1,7 +1,7 @@
 import {
   Result,
   StageInfo,
-} from "../../pipeline-graph-view/pipeline-graph/main/index.ts";
+} from "../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 import RunEstimator from "./run-estimator.ts";
 
 const previous: StageInfo[] = [

src/main/frontend/common/utils/run-estimator.spec.ts

@@ -1,7 +1,7 @@
 import {
   Result,
   StageInfo,
-} from "../../pipeline-graph-view/pipeline-graph/main/index.ts";
+} from "../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 
 export default class RunEstimator {
   private stagesLookup: Map<String, StageInfo>;

src/main/frontend/common/utils/run-estimator.ts

@@ -1,7 +1,7 @@
 import {
   Result,
   StageInfo,
-} from "../../pipeline-graph-view/pipeline-graph/main/index.ts";
+} from "../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 import { mergeStageInfos } from "./stage-merge.ts";
 
 describe("mergeStageInfos", () => {

src/main/frontend/common/utils/stage-merge.spec.ts

@@ -1,4 +1,4 @@
-import { StageInfo } from "../../pipeline-graph-view/pipeline-graph/main/index.ts";
+import { StageInfo } from "../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 import RunEstimator from "./run-estimator.ts";
 
 export const mergeStageInfos = (

src/main/frontend/common/utils/stage-merge.ts

@@ -1,10 +1,10 @@
 /** * @vitest-environment jsdom */
 
 import { render } from "@testing-library/react";
-import React from "react";
 import { vi } from "vitest";
 
-import { I18NContext, Messages } from "../i18n/index.ts";
+import { I18NContext } from "../i18n/i18n-provider.tsx";
+import { Messages } from "../i18n/messages.ts";
 import { Paused, Started, Total } from "./timings.tsx";
 
 describe("Timings", () => {

src/main/frontend/common/utils/timings.spec.tsx

@@ -1,6 +1,7 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 
-import { I18NContext, Messages } from "../i18n/index.ts";
+import { I18NContext } from "../i18n/i18n-provider";
+import { Messages } from "../i18n/messages";
 
 const ONE_SECOND_MS: number = 1000;
 const ONE_MINUTE_MS: number = 60 * ONE_SECOND_MS;

src/main/frontend/common/utils/timings.tsx

@@ -1,10 +1,11 @@
 import "./app.scss";
 import "./multi-pipeline-graph/styles/main.scss";
 
-import React, { FunctionComponent } from "react";
+import { FunctionComponent } from "react";
 
-import { I18NProvider, ResourceBundleName } from "../common/i18n/index.ts";
-import { MultiPipelineGraph } from "./multi-pipeline-graph/main/index.ts";
+import { I18NProvider } from "../common/i18n/i18n-provider.tsx";
+import { ResourceBundleName } from "../common/i18n/messages.ts";
+import { MultiPipelineGraph } from "./multi-pipeline-graph/main/MultiPipelineGraph.tsx";
 
 const App: FunctionComponent = () => {
   const locale =

src/main/frontend/multi-pipeline-graph-view/app.tsx

@@ -1,13 +1,12 @@
-import React from "react";
-import ReactDOMClient from "react-dom/client";
+import { createRoot } from "react-dom/client";
 
 import App from "./app.tsx";
 
 const rootElement = document.getElementById("multiple-pipeline-root");
 if (!rootElement) {
   throw new Error("Failed to find the 'multiple-pipeline-root' element");
 }
-const root = ReactDOMClient.createRoot(rootElement);
+const root = createRoot(rootElement);
 
 // Render App
 root.render(<App />);

src/main/frontend/multi-pipeline-graph-view/index.tsx

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 
-import { I18NContext } from "../../../common/i18n/index.ts";
+import { I18NContext } from "../../../common/i18n/i18n-provider.tsx";
 import { RunInfo } from "./MultiPipelineGraphModel.ts";
 import SingleRun from "./SingleRun.tsx";
 import startPollingRunsStatus from "./support/startPollingRunsStatus.ts";

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx

@@ -1,4 +1,4 @@
-import { Result } from "../../../pipeline-graph-view/pipeline-graph/main/index.ts";
+import { Result } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 
 export interface RunInfo {
   id: string;

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraphModel.ts

@@ -1,13 +1,13 @@
 import "./single-run.scss";
 
-import React from "react";
-
 import StatusIcon from "../../../common/components/status-icon.tsx";
 import useRunPoller from "../../../common/tree-api.ts";
 import { time, Total } from "../../../common/utils/timings.tsx";
-import { LayoutInfo } from "../../../pipeline-graph-view/pipeline-graph/main/index.ts";
 import { PipelineGraph } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx";
-import { defaultLayout } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
+import {
+  defaultLayout,
+  LayoutInfo,
+} from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 import { RunInfo } from "./MultiPipelineGraphModel.ts";
 
 export default function SingleRun({ run, currentJobPath }: SingleRunProps) {

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx

@@ -1,6 +1,7 @@
-import React, { lazy } from "react";
+import { lazy } from "react";
 
-import { I18NProvider, ResourceBundleName } from "../common/i18n/index.ts";
+import { I18NProvider } from "../common/i18n/i18n-provider.tsx";
+import { ResourceBundleName } from "../common/i18n/messages.ts";
 import { FilterProvider } from "./pipeline-console/main/providers/filter-provider.tsx";
 import { LayoutPreferencesProvider } from "./pipeline-console/main/providers/user-preference-provider.tsx";
 

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/index.ts

@@ -1,11 +1,10 @@
-import React from "react";
-import ReactDOMClient from "react-dom/client";
+import { createRoot } from "react-dom/client";
 
 import App from "./app.tsx";
 
 const rootElement = document.getElementById("console-pipeline-root");
 if (!rootElement) throw new Error("Failed to find the root element");
-const root = ReactDOMClient.createRoot(rootElement);
+const root = createRoot(rootElement);
 
 // Render App
 root.render(<App />);

src/main/frontend/pipeline-console-view/app.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export interface Result {
   isSelectGraphicRendition?: boolean;
   escapeCode?: string; // input

src/main/frontend/pipeline-console-view/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 import { makeReactChildren, tokenizeANSIString } from "./Ansi.tsx";
 

src/main/frontend/pipeline-console-view/pipeline-console/main/Ansi.tsx

@@ -1,7 +1,6 @@
 /** * @vitest-environment jsdom */
 
 import { render } from "@testing-library/react";
-import React from "react";
 import { vi } from "vitest";
 
 import ConsoleLogCard, { ConsoleLogCardProps } from "./ConsoleLogCard.tsx";

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx

@@ -1,6 +1,11 @@
 import "./console-log-card.scss";
 
-import React, { Suspense, useEffect } from "react";
+import {
+  lazy,
+  MouseEvent as ReactMouseEvent,
+  Suspense,
+  useEffect,
+} from "react";
 
 import StatusIcon from "../../../common/components/status-icon.tsx";
 import Tooltip from "../../../common/components/tooltip.tsx";
@@ -12,7 +17,7 @@ import {
   StepLogBufferInfo,
 } from "./PipelineConsoleModel.tsx";
 
-const ConsoleLogStream = React.lazy(() => import("./ConsoleLogStream.tsx"));
+const ConsoleLogStream = lazy(() => import("./ConsoleLogStream.tsx"));
 
 export default function ConsoleLogCard(props: ConsoleLogCardProps) {
   useEffect(() => {
@@ -21,7 +26,7 @@ export default function ConsoleLogCard(props: ConsoleLogCardProps) {
     }
   }, [props.isExpanded]);
 
-  const handleToggle = (e: React.MouseEvent<HTMLElement>) => {
+  const handleToggle = (e: ReactMouseEvent<HTMLElement>) => {
     // Only prevent left clicks
     if (e.button !== 0 || e.metaKey || e.ctrlKey) {
       return;

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.spec.tsx

@@ -1,7 +1,6 @@
 /** * @vitest-environment jsdom */
 
 import { render } from "@testing-library/react";
-import React from "react";
 import { vi } from "vitest";
 
 import ConsoleLogStream, {

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
 
 import { ConsoleLine } from "./ConsoleLine.tsx";