diff --git a/eslint.config.js b/eslint.config.js index d39256ce9..3deb10e4e 100644 --- a/eslint.config.js +++ b/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.", + }, + ], + }, + ], + }, + }, ]; diff --git a/src/main/frontend/common/RestClient.tsx b/src/main/frontend/common/RestClient.tsx index 155a8638e..7a8dc9541 100644 --- a/src/main/frontend/common/RestClient.tsx +++ b/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[]; diff --git a/src/main/frontend/common/components/dropdown-portal.tsx b/src/main/frontend/common/components/dropdown-portal.tsx index 533b10ffe..ce7fb5b97 100644 --- a/src/main/frontend/common/components/dropdown-portal.tsx +++ b/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); } diff --git a/src/main/frontend/common/components/dropdown.tsx b/src/main/frontend/common/components/dropdown.tsx index 30a1489e8..225f1f04d 100644 --- a/src/main/frontend/common/components/dropdown.tsx +++ b/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 (
{item} @@ -89,7 +89,7 @@ export const DefaultDropdownProps: TippyProps = { }; interface DropdownProps { - items: (DropdownItem | React.ReactElement | "separator")[]; + items: (DropdownItem | ReactElement | "separator")[]; disabled?: boolean; className?: string; } @@ -97,7 +97,7 @@ interface DropdownProps { interface DropdownItem { text: string; href?: string; - icon: React.ReactNode; + icon: ReactNode; target?: string; download?: string; } diff --git a/src/main/frontend/common/components/filter.tsx b/src/main/frontend/common/components/filter.tsx index 526915c94..cc59811e2 100644 --- a/src/main/frontend/common/components/filter.tsx +++ b/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"; diff --git a/src/main/frontend/common/components/status-icon.tsx b/src/main/frontend/common/components/status-icon.tsx index 48eeb8eb1..c740c2989 100644 --- a/src/main/frontend/common/components/status-icon.tsx +++ b/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 ( ; diff --git a/src/main/frontend/common/utils/stage-merge.spec.ts b/src/main/frontend/common/utils/stage-merge.spec.ts index 75d11d630..8b5ef0b45 100644 --- a/src/main/frontend/common/utils/stage-merge.spec.ts +++ b/src/main/frontend/common/utils/stage-merge.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"; import { mergeStageInfos } from "./stage-merge.ts"; describe("mergeStageInfos", () => { diff --git a/src/main/frontend/common/utils/stage-merge.ts b/src/main/frontend/common/utils/stage-merge.ts index 76475e807..0f762e375 100644 --- a/src/main/frontend/common/utils/stage-merge.ts +++ b/src/main/frontend/common/utils/stage-merge.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 = ( diff --git a/src/main/frontend/common/utils/timings.spec.tsx b/src/main/frontend/common/utils/timings.spec.tsx index e8978a753..7e3fee39e 100644 --- a/src/main/frontend/common/utils/timings.spec.tsx +++ b/src/main/frontend/common/utils/timings.spec.tsx @@ -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", () => { diff --git a/src/main/frontend/common/utils/timings.tsx b/src/main/frontend/common/utils/timings.tsx index a4d7c99d0..1818d2c8b 100644 --- a/src/main/frontend/common/utils/timings.tsx +++ b/src/main/frontend/common/utils/timings.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; diff --git a/src/main/frontend/multi-pipeline-graph-view/app.tsx b/src/main/frontend/multi-pipeline-graph-view/app.tsx index 7e623a1f9..ff87ac102 100644 --- a/src/main/frontend/multi-pipeline-graph-view/app.tsx +++ b/src/main/frontend/multi-pipeline-graph-view/app.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 = diff --git a/src/main/frontend/multi-pipeline-graph-view/index.tsx b/src/main/frontend/multi-pipeline-graph-view/index.tsx index 76c09c27e..9bf023589 100644 --- a/src/main/frontend/multi-pipeline-graph-view/index.tsx +++ b/src/main/frontend/multi-pipeline-graph-view/index.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import ReactDOMClient from "react-dom/client"; +import { createRoot } from "react-dom/client"; import App from "./app.tsx"; @@ -7,7 +6,7 @@ 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(); diff --git a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx index 0963c72c2..d0de33151 100644 --- a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx +++ b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.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"; diff --git a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraphModel.ts b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraphModel.ts index 706f035bb..9e178eb9e 100644 --- a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraphModel.ts +++ b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraphModel.ts @@ -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; diff --git a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx index 0600dcac5..b991ed840 100644 --- a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx +++ b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx @@ -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) { diff --git a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/index.ts b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/index.ts deleted file mode 100644 index b832ce5b4..000000000 --- a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { MultiPipelineGraph } from "./MultiPipelineGraph.tsx"; diff --git a/src/main/frontend/pipeline-console-view/app.tsx b/src/main/frontend/pipeline-console-view/app.tsx index f5d7756ef..f45981a93 100644 --- a/src/main/frontend/pipeline-console-view/app.tsx +++ b/src/main/frontend/pipeline-console-view/app.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"; diff --git a/src/main/frontend/pipeline-console-view/index.tsx b/src/main/frontend/pipeline-console-view/index.tsx index 8aa323e2b..60d78d946 100644 --- a/src/main/frontend/pipeline-console-view/index.tsx +++ b/src/main/frontend/pipeline-console-view/index.tsx @@ -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(); diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/Ansi.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/Ansi.tsx index 9cdae1730..da7b69493 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/Ansi.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/Ansi.tsx @@ -1,5 +1,3 @@ -import React from "react"; - export interface Result { isSelectGraphicRendition?: boolean; escapeCode?: string; // input diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx index 6f4d622d9..7db8a2044 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from "react"; +import { useEffect, useRef } from "react"; import { makeReactChildren, tokenizeANSIString } from "./Ansi.tsx"; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.spec.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.spec.tsx index 350ec8ba3..82842c32a 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.spec.tsx +++ b/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 ConsoleLogCard, { ConsoleLogCardProps } from "./ConsoleLogCard.tsx"; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx index c064a7253..53d421d13 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.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) => { + const handleToggle = (e: ReactMouseEvent) => { // Only prevent left clicks if (e.button !== 0 || e.metaKey || e.ctrlKey) { return; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.spec.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.spec.tsx index 2f8b964da..00cf11cd4 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.spec.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.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, { diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.tsx index df1299db5..f9264d299 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.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"; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx index 4961678ee..4543ffeb7 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx @@ -1,6 +1,12 @@ import "./data-tree-view.scss"; -import React, { useCallback, useEffect, useState } from "react"; +import { + memo, + MouseEvent as ReactMouseEvent, + useCallback, + useEffect, + useState, +} from "react"; import Filter from "../../../common/components/filter.tsx"; import StatusIcon from "../../../common/components/status-icon.tsx"; @@ -9,7 +15,7 @@ import { Total } from "../../../common/utils/timings.tsx"; import { Result, StageInfo, -} from "../../../pipeline-graph-view/pipeline-graph/main/index.ts"; +} from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx"; import { useFilter } from "./providers/filter-provider.tsx"; export default function DataTreeView({ @@ -21,7 +27,7 @@ export default function DataTreeView({ const filteredStages = filterStageTree(search, visibleStatuses, stages); const handleSelect = useCallback( - (event: React.MouseEvent, nodeId: string) => { + (event: ReactMouseEvent, nodeId: string) => { onNodeSelect(event, nodeId); }, [onNodeSelect], @@ -95,7 +101,7 @@ export default function DataTreeView({ ); } -const TreeNode = React.memo(function TreeNode({ +const TreeNode = memo(function TreeNode({ stage, selected, onSelect, @@ -113,7 +119,7 @@ const TreeNode = React.memo(function TreeNode({ ); } - const handleToggleClick = (e: React.MouseEvent) => { + const handleToggleClick = (e: ReactMouseEvent) => { e.stopPropagation(); setIsExpanded(!isExpanded); }; @@ -240,11 +246,11 @@ const filterStageTree = ( interface DataTreeViewProps { stages: StageInfo[]; selected?: number; - onNodeSelect: (event: React.MouseEvent, nodeId: string) => void; + onNodeSelect: (event: ReactMouseEvent, nodeId: string) => void; } interface TreeNodeProps { stage: StageInfo; selected: string; - onSelect: (event: React.MouseEvent, id: string) => void; + onSelect: (event: ReactMouseEvent, id: string) => void; } diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx index 8a9da2b55..bff2facde 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx @@ -2,8 +2,6 @@ import "./pipeline-console.scss"; import "../../../pipeline-graph-view/app.scss"; import "../../../pipeline-graph-view/pipeline-graph/styles/main.scss"; -import React from "react"; - import Dropdown from "../../../common/components/dropdown.tsx"; import DropdownPortal from "../../../common/components/dropdown-portal.tsx"; import Skeleton from "./components/skeleton.tsx"; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/StageNodeLink.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/StageNodeLink.tsx index 348044e60..218ff9752 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/StageNodeLink.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/StageNodeLink.tsx @@ -1,5 +1,3 @@ -import React from "react"; - export default function StageNodeLink({ agent }: StageNodeLinkProps) { if (!agent) { return null; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/StageView.spec.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/StageView.spec.tsx index c24daf4f3..144192e0a 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/StageView.spec.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/StageView.spec.tsx @@ -1,7 +1,6 @@ /** * @vitest-environment jsdom */ import { act, render, screen } from "@testing-library/react"; -import React from "react"; import { TextEncoder } from "util"; import { vi } from "vitest"; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/StageView.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/StageView.tsx index 63bfbc758..ade3a5ede 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/StageView.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/StageView.tsx @@ -1,5 +1,3 @@ -import React from "react"; - import { StageInfo, StepInfo, diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/components/skeleton.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/components/skeleton.tsx index 524ebc095..1e5e5b373 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/components/skeleton.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/components/skeleton.tsx @@ -1,7 +1,5 @@ import "./skeleton.scss"; -import React from "react"; - export default function Skeleton({ height }: { height?: number }) { return (
) => { + const handleViewChange = (e: ChangeEvent) => { setMainViewVisibility(e.target.value as MainViewVisibility); }; - const handlePositionChange = (e: React.ChangeEvent) => { + const handlePositionChange = (e: ChangeEvent) => { setStageViewPosition(e.target.value as StageViewPosition); }; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx index 121e9fa90..df1fd530b 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx @@ -1,6 +1,6 @@ import "./stages.scss"; -import React, { CSSProperties, useEffect, useState } from "react"; +import { CSSProperties, useEffect, useState } from "react"; import { TransformComponent, TransformWrapper, @@ -10,8 +10,8 @@ import { import Tooltip from "../../../../common/components/tooltip.tsx"; import { classNames } from "../../../../common/utils/classnames.ts"; -import { StageInfo } from "../../../../pipeline-graph-view/pipeline-graph/main/index.ts"; import { PipelineGraph } from "../../../../pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx"; +import { StageInfo } from "../../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx"; import { StageViewPosition } from "../providers/user-preference-provider.tsx"; export default function Stages({ diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/providers/filter-provider.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/providers/filter-provider.tsx index 5c8fea0e7..b0e34be6e 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/providers/filter-provider.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/providers/filter-provider.tsx @@ -1,6 +1,6 @@ -import React, { createContext, ReactNode, useContext, useState } from "react"; +import { createContext, ReactNode, useContext, useState } from "react"; -import { Result } from "../../../../pipeline-graph-view/pipeline-graph/main/index.ts"; +import { Result } from "../../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx"; interface FilterContextType { visibleStatuses: Result[]; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/providers/user-preference-provider.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/providers/user-preference-provider.tsx index a52d701f9..1a674418a 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/providers/user-preference-provider.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/providers/user-preference-provider.tsx @@ -1,4 +1,4 @@ -import React, { +import { createContext, ReactNode, useContext, diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx index 85c0631e8..8b79c72a1 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx @@ -1,6 +1,6 @@ import "./scroll-to-top-bottom.scss"; -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { classNames } from "../../../common/utils/classnames.ts"; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/split-view.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/split-view.tsx index 7d8760ccc..6b4faef88 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/split-view.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/split-view.tsx @@ -1,6 +1,13 @@ import "./split-view.scss"; -import React, { useEffect, useRef, useState } from "react"; +import { + Children, + MouseEvent as ReactMouseEvent, + ReactNode, + useEffect, + useRef, + useState, +} from "react"; import { useLayoutPreferences } from "./providers/user-preference-provider.tsx"; @@ -43,7 +50,7 @@ export default function SplitView(props: SplitViewNewProps) { const dividerRef = useRef(null); - const startDragging = (e: React.MouseEvent) => { + const startDragging = (e: ReactMouseEvent) => { setIsDragging(true); e.preventDefault(); }; @@ -117,7 +124,7 @@ export default function SplitView(props: SplitViewNewProps) { }); // If we only have one child, just return it - const childrenArray = React.Children.toArray(props.children).filter(Boolean); + const childrenArray = Children.toArray(props.children).filter(Boolean); if (childrenArray.length === 1) { return <>{childrenArray[0]}; } @@ -153,7 +160,7 @@ export default function SplitView(props: SplitViewNewProps) { } interface SplitViewNewProps { - children: React.ReactNode[]; + children: ReactNode[]; direction?: "horizontal" | "vertical"; storageKey: "stages" | "graph"; } diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.spec.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.spec.tsx index 8e56ebc91..5c348a4df 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.spec.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.spec.tsx @@ -1,13 +1,12 @@ /** * @vitest-environment jsdom */ import { render, screen } from "@testing-library/react"; -import React from "react"; import { TextEncoder } from "util"; import { Result, StageInfo, -} from "../../../pipeline-graph-view/pipeline-graph/main/index.ts"; +} from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx"; import StageDetails from "./stage-details.tsx"; (globalThis as any).TextEncoder = TextEncoder; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx index 766418f5f..b767df0d6 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx @@ -1,7 +1,5 @@ import "./stage-details.scss"; -import React from "react"; - import Dropdown from "../../../common/components/dropdown.tsx"; import StatusIcon, { resultToColor, @@ -13,7 +11,7 @@ import { Started, Total, } from "../../../common/utils/timings.tsx"; -import { StageInfo } from "../../../pipeline-graph-view/pipeline-graph/main/index.ts"; +import { StageInfo } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx"; import StageNodeLink from "./StageNodeLink.tsx"; import { DOCUMENT } from "./symbols.tsx"; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-steps.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-steps.tsx index 73f585da3..5779e73bf 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-steps.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/stage-steps.tsx @@ -1,7 +1,5 @@ import "./stage-steps.scss"; -import React from "react"; - import { StepInfo, StepLogBufferInfo } from "../../../common/RestClient.tsx"; import ConsoleLogCard from "./ConsoleLogCard.tsx"; import { LOG_FETCH_SIZE, StageInfo } from "./PipelineConsoleModel.tsx"; diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/symbols.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/symbols.tsx index 490c3c620..ad2959fb1 100644 --- a/src/main/frontend/pipeline-console-view/pipeline-console/main/symbols.tsx +++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/symbols.tsx @@ -1,5 +1,3 @@ -import React from "react"; - export const DOCUMENT = ( ); diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx index 26ee7dff8..30d4526ef 100644 --- a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx +++ b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { layoutGraph } from "./PipelineGraphLayout"; import { diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/index.ts b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/index.ts deleted file mode 100644 index 9a816d584..000000000 --- a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { PipelineGraph } from "./PipelineGraph.tsx"; -export type { - CompositeConnection, - LayoutInfo, - NodeColumn, - NodeInfo, - NodeLabelInfo, - StageInfo, -} from "./PipelineGraphModel.tsx"; -export { Result } from "./PipelineGraphModel.tsx"; diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/TruncatingLabel.tsx b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/TruncatingLabel.tsx index 19e64f2f9..24337587e 100644 --- a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/TruncatingLabel.tsx +++ b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/TruncatingLabel.tsx @@ -1,11 +1,11 @@ -import React, { CSSProperties } from "react"; +import { CSSProperties } from "react"; export function TruncatingLabel({ children, style = {}, className = "", }: TruncatingLabelProps) { - const mergedStyle: React.CSSProperties = { + const mergedStyle: CSSProperties = { display: "-webkit-box", overflow: "hidden", WebkitLineClamp: 2, diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/connections.tsx b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/connections.tsx index d9a11da11..7d629a51a 100644 --- a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/connections.tsx +++ b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/connections.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import { Component } from "react"; import { sequentialStagesLabelOffset } from "../PipelineGraphLayout.ts"; import { @@ -20,7 +20,7 @@ interface Props { layout: LayoutInfo; } -export class GraphConnections extends React.Component { +export class GraphConnections extends Component { declare props: Props; /** diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/convertLabelToTooltip.tsx b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/convertLabelToTooltip.tsx index 250d20fd0..88c3c7929 100644 --- a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/convertLabelToTooltip.tsx +++ b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/convertLabelToTooltip.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import { ReactElement } from "react"; import Tooltip from "../../../../common/components/tooltip.tsx"; @@ -25,7 +25,7 @@ export function convertLabelToTooltip(content: string): string | MatrixValue[] { export type TooltipLabelProps = { content: string; - children: React.ReactElement; + children: ReactElement; }; export function TooltipLabel(props: TooltipLabelProps) { diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/labels.tsx b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/labels.tsx index 1761cee7f..9822ae0e7 100644 --- a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/labels.tsx +++ b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/labels.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties } from "react"; +import { CSSProperties } from "react"; import { sequentialStagesLabelOffset } from "../PipelineGraphLayout.ts"; import { LayoutInfo, NodeLabelInfo } from "../PipelineGraphModel.tsx"; diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx index 754599760..33f60a715 100644 --- a/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx +++ b/src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx @@ -1,6 +1,6 @@ import "./nodes.scss"; -import React, { CSSProperties } from "react"; +import { CSSProperties, ReactElement } from "react"; import StatusIcon, { resultToColor, @@ -137,7 +137,7 @@ export function Node({ ), }; - let tooltip: React.ReactElement | undefined; + let tooltip: ReactElement | undefined; if (collapsed) { tooltip = (
diff --git a/tsconfig.json b/tsconfig.json index fde950e1c..f2c4e60ae 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,7 @@ "isolatedModules": true, "moduleDetection": "force", "noEmit": true, - "jsx": "react", + "jsx": "react-jsx", /* Linting */ "strict": true,