build: upgrade dependencies

pom.xml

@@ -14,8 +14,8 @@
     <properties>
         <jenkins.version>2.7.3</jenkins.version>
         <java.level>7</java.level>
-        <node.version>8.0.0</node.version>
-        <npm.version>6.5.0</npm.version>
+        <node.version>14.13.1</node.version>
+        <npm.version>7.2.0</npm.version>
     </properties>
     <build>
         <plugins>

webapp_src/package.json

@@ -3,21 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.18.0",
-    "prop-types": "^15.6.2",
-    "moment": "^2.22.2",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "react-google-charts": "^3.0.10",
-    "react-scripts": "2.1.3",
-    "styled-components": "^4.1.1"
+    "axios": "^0.21.0",
+    "prop-types": "^15.7.2",
+    "moment": "^2.29.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-google-charts": "^3.0.15",
+    "react-scripts": "4.0.1",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --watchAll=false",
-    "lint": "eslint src --ignore-pattern *.style.js --ignore-pattern serviceWorker.js",
-    "lint-fix": "eslint src --ignore-pattern *.style.js --ignore-pattern serviceWorker.js --fix",
+    "lint": "eslint src --ignore-pattern serviceWorker.js",
+    "lint-fix": "eslint src --ignore-pattern serviceWorker.js --fix",
     "test-watch": "react-scripts test",
     "build-to-plugin": "PUBLIC_URL=/plugin/pipeline-timeline npm run build && cp -r build/* ../src/main/webapp",
     "deploy": "npm run test && npm run build-to-plugin"
@@ -30,7 +30,18 @@
     ],
     "env": {
       "jest": true
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "src/serviceWorker.js"
+        ],
+        "rules": {
+          "no-console": "off",
+          "eqeqeq": "off"
+        }
+      }
+    ]
   },
   "browserslist": [
     ">0.2%",
@@ -39,15 +50,15 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@tophat/eslint-config": "^0.1.4",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.8.0",
-    "eslint": "5.6.0",
-    "eslint-config-prettier": "^5.0.0",
-    "eslint-plugin-jest": "^22.0.0",
-    "eslint-plugin-prettier": "^3.0.0",
-    "install": "^0.12.2",
-    "npm": "^6.4.1",
-    "prettier": "^1.15.2"
+    "@tophat/eslint-config": "^0.7.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "eslint": "7.15.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-prettier": "^3.3.0",
+    "install": "^0.13.0",
+    "npm": "^7.2.0",
+    "prettier": "^2.2.1"
   }
 }

webapp_src/src/App.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Dashboard from './components/Dashboard'
+
 export default class App extends React.PureComponent {
     static propTypes = {
         buildUrl: PropTypes.string.isRequired,

webapp_src/src/components/DashHeader.js

@@ -2,36 +2,39 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import moment from 'moment'
 
+import Logo from '../assets/logo.png'
+import { buildStatuses, statusMap } from '../constants'
+
 import {
-    Row,
-    Label,
+    BackButton,
     Container,
-    TopBar,
-    Title,
+    Label,
     LogoBox,
-    BackButton,
+    Row,
+    Title,
+    TopBar,
 } from './DashHeader.style'
-import { statusMap, buildStatuses } from '../constants'
-import Logo from '../assets/logo.png'
 
 export default class DashHeader extends React.PureComponent {
     static propTypes = {
         buildStatus: PropTypes.string,
         buildUrl: PropTypes.string.isRequired,
-        buildName: PropTypes.string.isRequired,
+        buildName: PropTypes.string,
         duration: PropTypes.number,
         endTime: PropTypes.instanceOf(moment),
         longestStage: PropTypes.shape({
             title: PropTypes.string,
             duration: PropTypes.number,
-        }).isRequired,
+        }),
         startTime: PropTypes.instanceOf(moment),
     }
 
     static defaultProps = {
+        buildName: '',
         buildStatus: buildStatuses.NOT_AVAILABLE,
         duration: 0,
         endTime: null,
+        longestStage: null,
         startTime: null,
     }
 
@@ -48,12 +51,12 @@ export default class DashHeader extends React.PureComponent {
         }
 
         if (minutes >= 1) {
-            const plural = minutes > 1 ? `s` : ``
+            const plural = minutes > 1 ? 's' : ''
             parts.push(`${minutes} minute${plural}`)
         }
 
         if (seconds >= 1) {
-            const plural = seconds > 1 ? `s` : ``
+            const plural = seconds > 1 ? 's' : ''
             parts.push(`${seconds} second${plural}`)
         }
 
@@ -112,8 +115,8 @@ export default class DashHeader extends React.PureComponent {
         if (!this.props.duration) return null
         const runningTimePrefix =
             this.props.buildStatus === buildStatuses.IN_PROGRESS
-                ? `Running`
-                : `Ran`
+                ? 'Running'
+                : 'Ran'
         const runningTime = `${runningTimePrefix} for ${this.formatTime(
             this.props.duration,
         )}`

webapp_src/src/components/DashHeader.style.js

@@ -41,7 +41,7 @@ export const Label = styled.span`
 `
 
 export const TopBar = styled.div`
-    background-color:rgba(0, 0, 0, 0.2);
+    background-color: rgba(0, 0, 0, 0.2);
     padding: 10px;
     display: flex;
     align-items: center;
@@ -60,14 +60,14 @@ export const LogoBox = styled.div`
 
 export const BackButton = styled.button`
     padding: 10px;
-    border: 3px solid rgba(0,0,0,0.3);
+    border: 3px solid rgba(0, 0, 0, 0.3);
     background-color: transparent;
     cursor: pointer;
     transition: 0.5s;
     color: ${Colours.TEXT};
 
     &:hover {
-        background-color: rgba(0,0,0,0.3);
+        background-color: rgba(0, 0, 0, 0.3);
         border-color: transparent;
     }
-`
+`

webapp_src/src/components/Dashboard.js

@@ -116,7 +116,7 @@ export default class Dashboard extends React.Component {
         const endTime =
             this.state.status !== 'IN_PROGRESS' ? this.state.end : null
 
-        const headerHeight = `150px`
+        const headerHeight = '150px'
 
         return (
             <React.Fragment>
@@ -131,7 +131,7 @@ export default class Dashboard extends React.Component {
                 />
                 <DashContainer>
                     <Chart
-                        width={`100%`}
+                        width="100%"
                         height={`calc(100vh - ${headerHeight})`}
                         chartType="Timeline"
                         loader={<div>Loading...</div>}

webapp_src/src/components/Dashboard.style.js

@@ -2,4 +2,4 @@ import styled from 'styled-components'
 
 export const DashContainer = styled.main`
     margin: 5px;
-`
+`

webapp_src/src/components/test/DashHeader.test.js

@@ -3,18 +3,15 @@ import React from 'react'
 import moment from 'moment'
 
 import DashHeader from '../DashHeader'
-import { statusMap, buildStatuses } from '../../constants'
+import { buildStatuses, statusMap } from '../../constants'
 
 describe('DashHeader', () => {
     const defaultProps = {
+        buildUrl: 'http://localhost:8080/job/test/1/',
         startTime: moment(),
         endTime: moment(),
         duration: 1,
     }
-    it('renders the component', () => {
-        const header = shallow(<DashHeader />)
-        expect(header).toMatchSnapshot()
-    })
 
     it('renders a start time label', () => {
         const header = shallow(<DashHeader {...defaultProps} />)
@@ -76,8 +73,9 @@ describe('DashHeader', () => {
         const label = header.find({ clickId: 'timeline longest stage' })
         expect(label.exists()).toEqual(true)
         expect(label.text()).toEqual(
-            `Longest stage: ${longestStage.title} (${longestStage.duration /
-                1000} seconds)`,
+            `Longest stage: ${longestStage.title} (${
+                longestStage.duration / 1000
+            } seconds)`,
         )
     })
 })

webapp_src/src/components/test/Dashboard.test.js

@@ -1,11 +1,12 @@
 import axios from 'axios'
 import Chart from 'react-google-charts'
-import { shallow, mount } from 'enzyme'
+import { mount, shallow } from 'enzyme'
 import React from 'react'
 import moment from 'moment'
 
 import Dashboard from '../Dashboard'
-import { mockWfApiResponse, mockNodeApiResponse } from './mockData'
+
+import { mockNodeApiResponse, mockWfApiResponse } from './mockData'
 
 function flushPromises() {
     return new Promise(resolve => setImmediate(resolve))
@@ -90,10 +91,10 @@ describe('Dashboard', () => {
                         }),
                     ),
                 }
-                expect(stages.length).toEqual(
+                expect(stages).toHaveLength(
                     mockWfApiResponse.data.stages.length,
                 )
-                expect(stage.steps.length).toEqual(
+                expect(stage.steps).toHaveLength(
                     mockNodeApiResponse.data.stageFlowNodes.length,
                 )
                 expect(stage).toEqual(expectedStage)