Get it working

Author: janfaracik

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

@@ -1,9 +1,9 @@
 import React, { lazy } from "react";
 
-import { I18NProvider } from "../common/i18n/i18n-provider";
-import { FilterProvider } from "./pipeline-console/main/providers/filter-provider";
-import { ResourceBundleName } from "../common/i18n/translations";
-import { LayoutPreferencesProvider } from "./pipeline-console/main/providers/user-preference-provider";
+import { I18NProvider } from "../common/i18n/i18n-provider.tsx";
+import { FilterProvider } from "./pipeline-console/main/providers/filter-provider.tsx";
+import { ResourceBundleName } from "../common/i18n/translations.ts";
+import { LayoutPreferencesProvider } from "./pipeline-console/main/providers/user-preference-provider.tsx";
 
 const PipelineConsole = lazy(
   () => import("./pipeline-console/main/PipelineConsole"),
@@ -14,10 +14,7 @@ export default function App() {
     document.getElementById("console-pipeline-root")?.dataset.userLocale ??
     "en";
   return (
-    <I18NProvider
-      bundles={[ResourceBundleName.messages, ResourceBundleName.run]}
-      locale={locale}
-    >
+    <I18NProvider bundles={[ResourceBundleName.messages]} locale={locale}>
       <FilterProvider>
         <LayoutPreferencesProvider>
           <PipelineConsole />

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

@@ -26,8 +26,8 @@ export default function PipelineConsole() {
     expandedSteps,
     stages,
     handleStageSelect,
-    handleStepToggle,
-    handleMoreConsoleClick,
+    onStepToggle,
+    onMoreConsoleClick,
   } = useStepsPoller({ currentRunPath, previousRunPath });
 
   return (
@@ -60,7 +60,7 @@ export default function PipelineConsole() {
           <div className={"pgv-graph-view-thing"}>
             <PipelineGraph
               stages={stages}
-              handleStageSelect={handleStageSelect}
+              onStageSelect={handleStageSelect}
             />
           </div>
         )}
@@ -87,8 +87,8 @@ export default function PipelineConsole() {
               steps={openStageSteps}
               stepBuffers={openStageStepBuffers}
               expandedSteps={expandedSteps}
-              handleStepToggle={handleStepToggle}
-              handleMoreConsoleClick={handleMoreConsoleClick}
+              onStepToggle={onStepToggle}
+              onMoreConsoleClick={onMoreConsoleClick}
             />
           </div>
         </SplitView>

src/main/frontend/pipeline-console-view/pipeline-console/main/components/checkboxes.tsx

@@ -3,7 +3,7 @@ import {
   MainViewVisibility,
   StageViewPosition,
   useLayoutPreferences,
-} from "../providers/user-preference-provider";
+} from "../providers/user-preference-provider.tsx";
 import "./checkboxes.scss";
 
 export default function VisibilitySelect() {

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import "./split-view.scss";
-import { useLayoutPreferences } from "./providers/user-preference-provider";
+import { useLayoutPreferences } from "./providers/user-preference-provider.tsx";
 
 export default function SplitView(props: SplitViewNewProps) {
   const {

src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { StageInfo } from "../../../pipeline-graph-view/pipeline-graph/main";
 import "./stage-details.scss";
-import StageNodeLink from "./StageNodeLink";
+import StageNodeLink from "./StageNodeLink.tsx";
 import StatusIcon, {
   resultToColor,
-} from "../../../common/components/status-icon";
-import { exact, Paused, Started, Total } from "../../../common/utils/timings";
-import Dropdown from "../../../common/components/dropdown";
-import Tooltip from "../../../common/components/tooltip";
-import { DOCUMENT } from "./symbols";
+} from "../../../common/components/status-icon.tsx";
+import { exact, Paused, Started, Total } from "../../../common/utils/timings.tsx";
+import Dropdown from "../../../common/components/dropdown.tsx";
+import Tooltip from "../../../common/components/tooltip.tsx";
+import { DOCUMENT } from "./symbols.tsx";
+import { StageInfo } from "../../../pipeline-graph-view/pipeline-graph/main";
 
 export default function StageDetails({ stage }: StageDetailsProps) {
   if (!stage) {

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

@@ -1,13 +1,11 @@
-import { PipelineGraph } from "./pipeline-graph/main/PipelineGraph.tsx";
-
 import "./app.scss";
 import "./pipeline-graph/styles/main.scss";
 import React from "react";
 
 export default function App() {
-  const rootElement = document.getElementById("graph");
-  const currentRunPath = rootElement?.dataset.currentRunPath!;
-  const previousRunPath = rootElement?.dataset.previousRunPath;
+  // const rootElement = document.getElementById("graph");
+  // const currentRunPath = rootElement?.dataset.currentRunPath!;
+  // const previousRunPath = rootElement?.dataset.previousRunPath;
 
   return (
     <div>

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx

@@ -137,7 +137,7 @@ export function PipelineGraph(props: Props) {
                 key={node.id}
                 node={node}
                 collapsed={collapsed}
-                handleStageSelect={props.handleStageSelect}
+                onStageSelect={props.onStageSelect}
               />
             ))}
 
@@ -249,5 +249,5 @@ interface Props {
   setStages?: (stages: Array<StageInfo>) => void;
   selectedStage?: StageInfo;
   collapsed?: boolean;
-  handleStageSelect: (nodeId: string) => void;
+  onStageSelect: (nodeId: string) => void;
 }

src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/labels.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { nodeStrokeWidth } from "./StatusIcons.tsx";
 import { TooltipLabel } from "./convertLabelToTooltip.tsx";
-import { TruncatingLabel } from "./TruncatingLabel";
+import { TruncatingLabel } from "./TruncatingLabel.tsx";
 import { CSSProperties } from "react";
 import { sequentialStagesLabelOffset } from "../PipelineGraphLayout.ts";
 import { LayoutInfo, NodeLabelInfo, StageInfo } from "../PipelineGraphModel.tsx";

src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx

@@ -19,13 +19,13 @@ type SVGChildren = Array<any>; // Fixme: Maybe refine this? Not sure what should
 interface NodeProps {
   node: NodeInfo;
   collapsed?: boolean;
-  handleStageSelect: (nodeId: string) => void;
+  onStageSelect: (nodeId: string) => void;
 }
 
 /**
  * Generate the SVG elements to represent a node.
  */
-export function Node({ node, collapsed, handleStageSelect }: NodeProps) {
+export function Node({ node, collapsed, onStageSelect }: NodeProps) {
   const key = node.key;
 
   if (node.isPlaceholder) {
@@ -144,7 +144,7 @@ export function Node({ node, collapsed, handleStageSelect }: NodeProps) {
             href={document.head.dataset.rooturl + url}
             onClick={(e) => {
               e.preventDefault();
-              handleStageSelect(String(node.stage.id));
+              onStageSelect(String(node.stage.id));
             }}
           >
             <span className="jenkins-visually-hidden">{title}</span>