Fix npm lint (#25)

Description: Upgraded eslint to latest major version 7.5.0 Locked eslint-react-plugin at version 7.20.3 as 7.20.4 has some issues. Added UNSAFE prefix to required functions in react code as well as adding a rule to the linter such that it won't complain about failing the camelcase requirement for these functions. Testing Done: Built locally
aurora-scheduler · Jul 28, 2020 · 5ee2715 · 5ee2715
1 parent 4deaa35
commit 5ee2715
Show file tree

Hide file tree

Showing 16 changed files with 35 additions and 28 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -3,8 +3,10 @@
 
 ### New/updated:
 - Updated to Mesos 1.7.2.
-- Updated node dependencies.
-- Bumped up Node version to 12.18.0
+- Updated node dependencies including eslint to 7.5.0.
+- Bumped up Node version to 12.18.3
+- com.github.node-gradle.node plugin bumped up to 2.2.4
+- Added UNSAFE prefixes to the required functions in react code.
 - Updated Quartz Scheduler to 2.3.1
 - Updated Gradle to version 5.6.4
 - Updated Guava to 29.0-jre

diff --git a/build.gradle b/build.gradle
@@ -15,7 +15,7 @@ plugins {
   id 'com.eriwen.gradle.js' version '1.12.1'
   id 'com.github.ben-manes.versions' version '0.11.3'
   id 'com.github.hierynomus.license' version '0.11.0'
-  id "com.github.node-gradle.node" version "1.5.3"
+  id "com.github.node-gradle.node" version "2.2.4"
   id 'me.champeau.gradle.jmh' version '0.4.8'
   id "com.github.spotbugs" version "4.2.0"
 }
@@ -139,7 +139,7 @@ project(':ui') {
   apply plugin: "com.github.node-gradle.node"
   node {
     download = true
-    version = '12.18.0'
+    version = '12.18.3'
   }
 
   task test_(type: NpmTask, overwrite: true) {

diff --git a/ui/.eslintrc b/ui/.eslintrc
@@ -40,9 +40,14 @@
     "react/jsx-sort-props": 2,
     "react/prop-types": 0,
     "react/sort-prop-types": 2,
-    "camelcase": [2, {"properties": "never"}],
+    "camelcase": ["error", {"allow": ["^UNSAFE_"]}],
     // deals with the chai expression problem
     "no-unused-expressions": 0,
     "chai-friendly/no-unused-expressions": 2
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }
diff --git a/ui/package.json b/ui/package.json
@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "ajv": "^6.12.2",
-    "ajv-keywords": "^3.4.1",
+    "ajv-keywords": "^3.5.2",
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^21.2.0",
@@ -26,17 +26,17 @@
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "css-loader": "^3.4.1",
+    "css-loader": "^3.6.0",
     "enzyme": "^3.0.0",
     "enzyme-adapter-react-16": "^1.0.0",
-    "eslint": "^4.4.1",
+    "eslint": "^7.5.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-config-standard-react": "^5.0.0",
     "eslint-plugin-chai-friendly": "^0.4.0",
     "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-node": "^5.1.1",
     "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react": "7.20.3",
     "eslint-plugin-standard": "^3.0.1",
     "file-loader": "^1.1.5",
     "jest": "^21.2.0",
@@ -46,8 +46,8 @@
     "sassjs-loader": "^1.0.0",
     "style-loader": "^0.18.2",
     "url-loader": "^0.6.2",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
+    "webpack": "^4.44.0",
+    "webpack-cli": "^3.3.12"
   },
   "jest": {
     "moduleDirectories": [
@@ -64,7 +64,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://gitbox.apache.org/repos/asf/aurora"
+    "url": "https://github.com/aurora-scheduler/aurora"
   },
   "author": "",
   "license": "Apache-2.0"

diff --git a/ui/src/main/js/components/Pagination.js b/ui/src/main/js/components/Pagination.js
@@ -36,7 +36,7 @@ export default class Pagination extends React.Component {
     this.state = {page: props.page || 1};
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // Make sure to reset page when props change (caused by data change or sort change or filter)
     if (this.state.page > 1) {
       this.setState({page: 1});

diff --git a/ui/src/main/js/components/Tabs.js b/ui/src/main/js/components/Tabs.js
@@ -24,7 +24,7 @@ export default class Tabs extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // Because this component manages its own state, we need to listen to changes to the activeTab
     // property - as the changes will not propagate without the component being remounted.
     if (nextProps.activeTab !== this.props.activeTab &&

diff --git a/ui/src/main/js/components/UpdateInstanceEvents.js b/ui/src/main/js/components/UpdateInstanceEvents.js
@@ -73,7 +73,7 @@ export class InstanceEvent extends React.Component {
       {stateMachine}
     </div>);
   }
-};
+}
 
 export default function UpdateInstanceEvents({ update }) {
   const sortedEvents = sort(update.instanceEvents, (e) => e.timestampMs, true);

diff --git a/ui/src/main/js/components/UpdateInstanceSummary.js b/ui/src/main/js/components/UpdateInstanceSummary.js
@@ -12,7 +12,7 @@ function UpdateStats({ update }) {
       {stats.instancesUpdated} / {stats.totalInstancesToBeUpdated} ({stats.progress}%)
     </span>
   </div>);
-};
+}
 
 export default function UpdateInstanceSummary({ update }) {
   return (<div>

diff --git a/ui/src/main/js/components/UpdateTime.js b/ui/src/main/js/components/UpdateTime.js
@@ -9,21 +9,21 @@ function UpdateTimeDisplay({ timestamp }) {
     <h4>{moment(timestamp).utc().format('HH:mm')}</h4>
     <span className='time-ago'><RelativeTime ts={timestamp} /></span>
   </div>);
-};
+}
 
 function UpdateDuration({ update }) {
   const duration = (update.update.summary.state.lastModifiedTimestampMs -
     update.update.summary.state.createdTimestampMs);
   return <div className='update-duration'>Duration: {moment.duration(duration).humanize()}</div>;
-};
+}
 
 function UpdateTimeRange({ update }) {
   return (<div className='update-time-range'>
     <UpdateTimeDisplay timestamp={update.update.summary.state.createdTimestampMs} />
     <h5>~</h5>
     <UpdateTimeDisplay timestamp={update.update.summary.state.lastModifiedTimestampMs} />
   </div>);
-};
+}
 
 export default function UpdateTime({ update }) {
   return (<div>

diff --git a/ui/src/main/js/pages/Home.js b/ui/src/main/js/pages/Home.js
@@ -10,7 +10,7 @@ export default class HomePage extends React.Component {
     this.state = {cluster: '', roles: [], loading: true};
   }
 
-  componentWillMount(props) {
+  UNSAFE_componentWillMount(props) {
     const that = this;
     this.props.api.getRoleSummary((response) => {
       that.setState({

diff --git a/ui/src/main/js/pages/Instance.js b/ui/src/main/js/pages/Instance.js
@@ -36,12 +36,12 @@ export default class Instance extends React.Component {
     });
   }
 
-  componentWillMount(props) {
+  UNSAFE_componentWillMount(props) {
     const { role, environment, name, instance } = this.props.match.params;
     this.fetchTask(role, environment, name, instance);
   }
 
-  componentWillUpdate(nextProps, nextState) {
+  UNSAFE_componentWillUpdate(nextProps, nextState) {
     if (this.state.loading && !nextState.loading) {
       const activeTask = nextState.tasks.find(isActive);
 

diff --git a/ui/src/main/js/pages/Job.js b/ui/src/main/js/pages/Job.js
@@ -23,7 +23,7 @@ export default class Job extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const {api, match: {params: {role, environment, name}}} = this.props;
     const that = this;
     const key = new JobKey({role, environment, name});

diff --git a/ui/src/main/js/pages/Jobs.js b/ui/src/main/js/pages/Jobs.js
@@ -14,7 +14,7 @@ export default class Jobs extends React.Component {
     this.state = {cluster: '', jobs: [], loading: isNully(props.jobs)};
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const that = this;
     this.props.api.getJobSummary(this.props.match.params.role, (response) => {
       const jobs = (that.props.match.params.environment)

diff --git a/ui/src/main/js/pages/Task.js b/ui/src/main/js/pages/Task.js
@@ -16,7 +16,7 @@ export default class Task extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const {api, match: {params: {role, environment, name, taskId}}} = this.props;
     const that = this;
 

diff --git a/ui/src/main/js/pages/Update.js b/ui/src/main/js/pages/Update.js
@@ -13,11 +13,11 @@ export default class Update extends React.Component {
     this.state = { loading: true };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.fetchUpdateDetails();
   }
 
-  componentWillUpdate(nextProps, nextState) {
+  UNSAFE_componentWillUpdate(nextProps, nextState) {
     if (!nextState.loading && isInProgressUpdate(nextState.update)) {
       // refetch update details in 60 seconds
       setTimeout(() => { this.fetchUpdateDetails(); }, 60000);

diff --git a/ui/src/main/js/pages/Updates.js b/ui/src/main/js/pages/Updates.js
@@ -14,7 +14,7 @@ export class UpdatesFetcher extends React.Component {
     this.state = { updates: null };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const that = this;
     const query = new JobUpdateQuery();
     query.updateStatuses = this.props.states;