Update react to 18 and MUI to 5 (#161)

Co-authored-by: Tim Jacomb <timjacomb1@gmail.com>

Author: timbrown5

package-lock.json

@@ -5,11 +5,10 @@
   "private": true,
   "scripts": {
     "mvnbuild": "npm run build",
-    "mvntest": "npm run test",
+    "mvntest": "npm test",
     "build": "webpack --mode production",
     "build:dev": "webpack --mode development --watch",
-    "test": "npm run prettier-check && jest",
-    "prettier-check": "prettier --check src/main/frontend/",
+    "test": "jest && prettier --check src/main/frontend/",
     "prettier": "prettier --write src/main/frontend/"
   },
   "repository": {
@@ -23,36 +22,41 @@
   },
   "homepage": "https://github.com/jenkinsci/pipeline-graph-view-plugin/#readme",
   "dependencies": {
-    "@material-ui/core": "4.11.4",
-    "@material-ui/icons": "4.11.2",
-    "@material-ui/lab": "4.0.0-alpha.58",
+    "@mui/icons-material": "5.10.9",
+    "@mui/lab": "5.0.0-alpha.104",
+    "@mui/material": "5.10.10",
     "@react-spring/web": "9.5.4",
     "@reacticons/ionicons": "6.0.4",
     "html-react-parser": "1.4.14",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-split-pane": "0.1.92"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/preset-env": "7.19.4",
     "@babel/preset-react": "7.18.6",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/enzyme": "3.10.12",
     "@types/jest": "26.0.24",
     "@types/node": "16.18.0",
-    "@types/react": "16.14.32",
-    "@types/react-dom": "16.9.16",
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
     "css-loader": "3.6.0",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "jest": "27.5.1",
+    "import": "^0.0.6",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
     "prettier": "2.7.1",
+    "react-collapse-pane": "^3.0.1",
     "sass": "1.55.0",
     "sass-loader": "13.1.0",
     "source-map-loader": "0.2.4",
-    "style-loader": "1.3.0",
+    "style-loader": "^1.3.0",
+    "styled-components": "^5.3.6",
     "ts-jest": "27.0.4",
-    "ts-loader": "7.0.5",
-    "typescript": "3.9.10",
+    "ts-loader": "^7.0.5",
+    "typescript": "4.1.5",
     "webpack": "5.74.0",
     "webpack-cli": "4.10.0"
   },

package.json

@@ -1,9 +1,14 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
+import React from "react";
+import ReactDOMClient from "react-dom/client";
 import App from "./app";
+
 import { resetEnvironment } from "../common/reset-environment";
 
 resetEnvironment();
-const root = document.getElementById("multiple-pipeline-root");
-ReactDOM.render(<App />, root);
+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);
+
+// Render App
+root.render(<App />);

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

@@ -3,6 +3,10 @@ import { FunctionComponent } from "react";
 
 import { PipelineConsole } from "./pipeline-console/main/";
 
+import { createTheme } from "@mui/material/styles";
+
+export const theme = createTheme();
+
 const App: FunctionComponent = () => {
   return (
     <React.Fragment>

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

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

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

@@ -148,19 +148,28 @@ export function tokenizeANSIString(input?: string): string[] | Result[] {
  * Takes an array of string snippets and parsed escape codes produced bv tokenizeANSIString, and creates
  * an array of strings and spans with classNames for attributes.
  */
-export function makeReactChildren(tokenizedInput: string[] | Result[]) {
+export function makeReactChildren(
+  tokenizedInput: string[] | Result[],
+  key: string
+) {
   const result = [];
   let currentState: Result = {
     setFG: false,
     setBG: false,
   };
 
-  for (const codeOrString of tokenizedInput) {
+  for (let i = 0; i < tokenizedInput.length; i++) {
+    let codeOrString = tokenizedInput[i];
     if (typeof codeOrString === "string") {
       // Need to output a <span> or plain text if there's no interesting current state
 
       if (!currentState.setFG && !currentState.setBG) {
-        result.push(<div dangerouslySetInnerHTML={{ __html: codeOrString }} />);
+        result.push(
+          <div
+            dangerouslySetInnerHTML={{ __html: codeOrString }}
+            key={`${key}-${i}`}
+          />
+        );
       } else {
         const classNames = [];
 

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

@@ -1,15 +1,9 @@
 import React from "react";
-import TreeView from "@material-ui/lab/TreeView/";
+import TreeView from "@mui/lab/TreeView/";
 
-import {
-  fade,
-  withStyles,
-  Theme,
-  createStyles,
-} from "@material-ui/core/styles";
-import TreeItem, { TreeItemProps } from "@material-ui/lab/TreeItem";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+import TreeItem from "@mui/lab/TreeItem";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 import {
   StageInfo,
@@ -34,37 +28,11 @@ export interface StepInfo {
   totalDurationMillis: string;
 }
 
-// Tree Item for stages
-const StageTreeItem = withStyles((theme: Theme) =>
-  createStyles({
-    iconContainer: {
-      "& .close": {
-        opacity: 0.3,
-      },
-    },
-    // TODO: Make line show status of block (green = passed, red = failed, etc.)
-    group: {
-      marginLeft: 7,
-      paddingLeft: 18,
-      borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
-    },
-    label: {},
-  })
-)((props: TreeItemProps) => <TreeItem {...props} />);
-
-// Tree Item for steps
-const StepTreeItem = withStyles((theme: Theme) =>
-  createStyles({
-    label: {
-      textDecoration: "underline",
-    },
-  })
-)((props: TreeItemProps) => <TreeItem {...props} />);
-
 const getTreeItemsFromStepList = (stepsItems: StepInfo[]) => {
   return stepsItems.map((stepItemData) => {
     return (
-      <StepTreeItem
+      <TreeItem
+        className="step-tree-item"
         key={stepItemData.id}
         nodeId={String(stepItemData.id)}
         label={
@@ -105,7 +73,8 @@ const getTreeItemsFromStage = (stageItems: StageInfo[], steps: StepInfo[]) => {
       children = [...children, ...stepsItems];
     }
     return (
-      <StageTreeItem
+      <TreeItem
+        className="stage-tree-item"
         key={stageItemData.id}
         nodeId={String(stageItemData.id)}
         label={

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

@@ -1,18 +1,17 @@
 import React from "react";
 
-import SplitPane from "react-split-pane";
-import { DataTreeView } from "./DataTreeView";
+import { SplitPane } from "react-collapse-pane";
 import { makeReactChildren, tokenizeANSIString } from "./Ansi";
 import { StageInfo } from "../../../pipeline-graph-view/pipeline-graph/main/";
-import { StepInfo } from "./DataTreeView";
+import { DataTreeView, StepInfo } from "./DataTreeView";
 
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 
-import HourglassEmptyIcon from "@material-ui/icons/HourglassEmpty";
-import ScheduleIcon from "@material-ui/icons/Schedule";
-import TimerIcon from "@material-ui/icons/Timer";
-import InfoIcon from "@material-ui/icons/Info";
-import LinkIcon from "@material-ui/icons/Link";
+import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
+import ScheduleIcon from "@mui/icons-material/Schedule";
+import TimerIcon from "@mui/icons-material/Timer";
+import InfoIcon from "@mui/icons-material/Info";
+import LinkIcon from "@mui/icons-material/Link";
 
 import "./pipeline-console.scss";
 
@@ -119,15 +118,19 @@ const ConsoleLine = (props: ConsoleLineProps) => (
     <div
       className="console-output-line-anchor"
       id={`log-${props.lineNumber}`}
+      key={`${props.lineNumber}-anchor`}
     />
-    <div className="console-output-line">
+    <div className="console-output-line" key={`${props.lineNumber}-body`}>
       <a
         className="console-line-number"
         href={`?selected-node=${props.stepId}#log-${props.lineNumber}`}
       >
         {props.lineNumber}
       </a>
-      {makeReactChildren(tokenizeANSIString(props.content))}
+      {makeReactChildren(
+        tokenizeANSIString(props.content),
+        `${props.stepId}-${props.lineNumber}`
+      )}
     </div>
   </div>
 );
@@ -315,58 +318,49 @@ export class PipelineConsole extends React.Component<
           }
         }
         return (
-          <div className="console-output">
+          <pre className="console-output">
             <StageSummary stage={focusedStage} failedSteps={failedSteps} />
-          </div>
+          </pre>
         );
       }
     }
-    return (
-      // Return empty div
-      <div></div>
-    );
+    return null;
   }
 
   renderStepDetails() {
     for (let i = 0; i < this.state.steps.length; i++) {
       let step = this.state.steps[i];
       if ("" + step.id == this.state.selected) {
         return (
-          <div className="console-output">
+          <pre className="console-output">
             <StepSummary step={step} />
-          </div>
+          </pre>
         );
       }
     }
-    return (
-      // Return empty div
-      <div></div>
-    );
+    return null;
   }
 
   renderConsoleOutput() {
     if (this.state.consoleText.length > 0) {
       const lineChunks = this.state.consoleText.split("\n");
       return (
-        <div className="console-output">
-          <pre className="console-pane console-output-item">
-            {lineChunks.map((line, index) => {
-              let lineNumber = String(index + 1);
-              return (
-                <ConsoleLine
-                  content={line}
-                  lineNumber={lineNumber}
-                  stepId={this.state.selected}
-                  key={`${this.state.selected}-${lineNumber}`}
-                />
-              );
-            })}
-          </pre>
-        </div>
+        <pre className="console-output">
+          {lineChunks.map((line, index) => {
+            let lineNumber = String(index + 1);
+            return (
+              <ConsoleLine
+                content={line}
+                lineNumber={lineNumber}
+                stepId={this.state.selected}
+                key={`${this.state.selected}-${lineNumber}`}
+              />
+            );
+          })}
+        </pre>
       );
     } else {
-      // Return empty div if no text.
-      return <div></div>;
+      return null;
     }
   }
 
@@ -380,17 +374,18 @@ export class PipelineConsole extends React.Component<
       height: "calc(100vh - 300px)",
       overflowY: "auto",
     };
-
     return (
       <React.Fragment>
         <div className="App">
           <SplitPane
-            minSize={150}
-            defaultSize={parseInt(localStorage.getItem("splitPos") || "250")}
-            onChange={(size) => localStorage.setItem("splitPos", `${size}`)}
-            style={splitPaneStyle}
+            // intialSize ratio
+            initialSizes={[3, 7]}
+            // minSize in Pixels (for all panes)
+            minSizes={250}
+            className="split-pane"
+            split="vertical"
           >
-            <div style={paneStyle}>
+            <div className="split-pane" key="tree-view">
               <DataTreeView
                 onNodeSelect={this.handleActionNodeSelect}
                 onNodeToggle={this.handleToggle}
@@ -401,7 +396,7 @@ export class PipelineConsole extends React.Component<
               />
             </div>
 
-            <div style={paneStyle}>
+            <div className="split-pane" key="console-view">
               {this.renderStageDetails()}
               {this.renderStepDetails()}
               {this.renderConsoleOutput()}