Upgrade eslint to the latest version

Includes fixes for new eslint issues.

Note: this upgrade requires a new node version as specified in
`package.json` (at least 16.0.0).

.eslintignore

@@ -1 +1 @@
-
+*.js

.eslintrc

@@ -2,6 +2,22 @@
   "extends": [
     "airbnb-typescript"
   ],
+  "parser": "@typescript-eslint/parser",
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      }
+    }
+  ],
+  "plugins": [
+    "import",
+    "react"
+  ],
   "env": {
     "browser": true,
     "node": true

Dockerfile

@@ -1,9 +1,9 @@
-FROM ubuntu:18.04
+FROM ubuntu:20.04
 
 WORKDIR /root
 
 RUN apt-get update && apt-get install -y curl gnupg
-RUN curl --silent --location https://deb.nodesource.com/setup_12.x | bash -
+RUN curl --silent --location https://deb.nodesource.com/setup_16.x | bash -
 RUN apt-get update && apt-get install -y nodejs
 
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -

package.json

@@ -2,6 +2,9 @@
   "name": "coriolis-web",
   "version": "2.0.0",
   "license": "AGPL-3.0",
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "scripts": {
     "start": "node ./server",
     "build": "webpack --config webpack.prod.js",
@@ -9,7 +12,7 @@
     "server-dev": "nodemon -e ts,js -w server/**/ -w .env",
     "server-debug": "node --inspect server",
     "tsc": "npx tsc --skipLibCheck",
-    "eslint": "npx eslint -c .eslintrc \"src/**\" \"server/**\"",
+    "eslint": "npx eslint \"src/**\" \"server/**\"",
     "storybook": "start-storybook"
   },
   "devDependencies": {
@@ -26,10 +29,11 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/react-tooltip": "^4.2.4",
     "@types/styled-components": "^5.1.0",
-    "@typescript-eslint/eslint-plugin": "^3.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "cypress": "^3.2.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-typescript": "^6.3.1",
+    "eslint": "^8.1.0",
+    "eslint-config-airbnb-typescript": "^14.0.2",
     "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.17.0",
@@ -43,7 +47,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.8.3",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
-    "@babel/preset-typescript": "^7.7.2",
+    "@babel/preset-typescript": "^7.16.0",
     "@babel/register": "^7.7.0",
     "@webpack-blocks/webpack2": "^0.4.0",
     "ansi-to-html": "^0.6.14",

src/@types/Config.ts

@@ -33,7 +33,7 @@ export type Config = {
   instancesListBackgroundLoading: { default: number, [prop: string]: number },
   extraOptionsApiCalls: ExtraOption[],
   providerSortPriority: { [providerName in ProviderTypes]: number },
-  providerNames: {[providerName in ProviderTypes]: string}
+  providerNames: { [providerName in ProviderTypes]: string }
   hiddenUsers: string[],
   passwordFields: string[],
   mainListItemsPerPage: number,

src/@types/Network.ts

@@ -36,7 +36,7 @@ export type NetworkMap = {
 }
 
 export const NetworkUtils = {
-  getPortKeyNetworkId: (networks: Network[], id: string): {portKey: string | null, id: string} => {
+  getPortKeyNetworkId: (networks: Network[], id: string): { portKey: string | null, id: string } => {
     const idMatches = /(.*):(.*)/.exec(String(id))
     if (!idMatches) {
       return { portKey: null, id }

src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -32,7 +32,7 @@ const ProgressBarWrapper = styled.div`
   background: white;
   flex-grow: 1;
 `
-const Progress = styled.div<{width: number}>`
+const Progress = styled.div<{ width: number }>`
   height: 2px;
   background: ${Palette.primary};
   transition: all ${StyleProps.animations.swift};

src/components/atoms/Stepper/Stepper.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
@@ -175,6 +174,7 @@ class Stepper extends React.Component<Props, State> {
   }
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     const { _ref, value, type } = this.props
     let downImageRef: HTMLElement | null | undefined
     let upImageRef: HTMLElement | null | undefined

src/components/atoms/TextInput/TextInput.tsx

@@ -115,6 +115,7 @@ type Props = {
 }
 const TextInput = (props: Props) => {
   const {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     _ref, value, onChange, showClose, onCloseClick,
     disabled, disabledLoading, embedded, onInputKeyDown,
   } = props

src/components/molecules/NewItemDropdown/NewItemDropdown.tsx

@@ -96,7 +96,7 @@ const ListItem = styled(Link)`
   }
 `
 
-const Icon = styled.div<{iconName: keyof typeof ICON_MAP}>`
+const Icon = styled.div<{ iconName: keyof typeof ICON_MAP }>`
   min-width: 48px;
   height: 48px;
   background: url('${props => ICON_MAP[props.iconName]}') no-repeat center;

src/components/molecules/TaskItem/TaskItem.tsx

@@ -172,7 +172,7 @@ class TaskItem extends React.Component<Props> {
     return message
   }
 
-  getProgressPercentage(progressUpdate: ProgressUpdate): {useLabel: boolean, value: number} | null {
+  getProgressPercentage(progressUpdate: ProgressUpdate): { useLabel: boolean, value: number } | null {
     if (progressUpdate.total_steps && progressUpdate.current_step) {
       const currentStep = Math.min(progressUpdate.total_steps, progressUpdate.current_step)
       return {

src/components/molecules/UserDropdown/UserDropdown.tsx

@@ -69,7 +69,7 @@ const ListItem = styled.div<any>`
   padding-top: 8px;
 `
 
-const Label = styled.div<{selectable?: boolean, hoverColor?: string}>`
+const Label = styled.div<{ selectable?: boolean, hoverColor?: string }>`
   display: inline-block;
   white-space: nowrap;
   ${props => (props.selectable ? css`

src/components/organisms/AssessmentMigrationOptions/AssessmentMigrationOptions.tsx

@@ -162,7 +162,7 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
     const useReplica = this.getFieldValue('use_replica')
     const skipFields = ['location', 'resource_group', 'network_map', 'storage_map', 'vm_size', 'worker_size']
     // eslint-disable-next-line no-shadow
-    const cleanup = (fields: any[]) => fields.filter((f: {
+    const cleanup = (cleanupFields: any[]) => cleanupFields.filter((f: {
       name: string
     }) => !skipFields
       .find(n => n === f.name)).map((f: { type: string; nullableBoolean: boolean }) => {
@@ -229,7 +229,7 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
         additionalProps = {
           value,
           // eslint-disable-next-line no-shadow
-          onChange: (value: any) => { this.handleValueChange(field.name, value) },
+          onChange: (changeValue: any) => { this.handleValueChange(field.name, changeValue) },
           type: field.type,
         }
       }

src/components/organisms/ChooseProvider/ChooseProvider.tsx

@@ -219,7 +219,7 @@ class ChooseProvider extends React.Component<Props, State> {
   processMultipleFilesContents(filesContents: FileContent[]) {
     this.props.onResetValidation()
     const uniqueNames: { [prop: string]: number } = {}
-    const invalidRegionsEndpointIds: {id: string, regions: string[]}[] = []
+    const invalidRegionsEndpointIds: { id: string, regions: string[] }[] = []
 
     const endpoints = filesContents.map(fileContent => {
       try {

src/components/organisms/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -231,6 +231,7 @@ class EndpointDetailsContent extends React.Component<Props> {
   render() {
     this.renderedKeys = {}
     const {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       type, name, description, created_at, id,
     } = this.props.item || {}
     const usage: TransferItem[] = this.props.usage.replicas

src/components/organisms/MinionPoolModal/MinionPoolModalContent.tsx

@@ -197,7 +197,7 @@ class MinionPoolModalContent extends React.Component<Props, State> {
     )
   }
 
-  renderFieldSet(customFields: Field[], options?: {disabled?: boolean}) {
+  renderFieldSet(customFields: Field[], options?: { disabled?: boolean }) {
     const rows: JSX.Element[] = []
     let lastField: JSX.Element
     let i = 0

src/components/organisms/ReplicaMigrationOptions/ReplicaMigrationOptions.tsx

@@ -97,7 +97,7 @@ type State = {
   selectedBarButton: string,
   uploadedScripts: InstanceScript[],
   removedScripts: InstanceScript[],
-  minionPoolMappings: {[instance: string]: string}
+  minionPoolMappings: { [instance: string]: string }
 }
 
 @observer

src/components/organisms/Schedule/Schedule.tsx

@@ -132,7 +132,7 @@ type State = {
 const colWidths = ['6%', '18%', '10%', '18%', '10%', '10%', '23%', '5%']
 @observer
 class Schedule extends React.Component<Props, State> {
-  static defaultProps={
+  static defaultProps = {
     unsavedSchedules: [],
   }
 

src/components/organisms/WizardScripts/WizardScripts.tsx

@@ -135,7 +135,7 @@ const ScriptDataActions = styled.div`
     margin-left: 8px;
   }
 `
-const ScriptDataAction = styled.div<{ red?: boolean, disabled?: boolean}>`
+const ScriptDataAction = styled.div<{ red?: boolean, disabled?: boolean }>`
   color: ${props => (props.red ? Palette.alert : Palette.primary)};
   cursor: pointer;
   ${props => (props.disabled ? css`

src/components/organisms/WizardStorage/WizardStorage.tsx

@@ -349,7 +349,7 @@ class WizardStorage extends React.Component<Props> {
     }
 
     const renderDropdown = () => {
-      let items: {label: string, value: string | null}[] = this.props.storageBackends.map(s => ({
+      let items: { label: string, value: string | null }[] = this.props.storageBackends.map(s => ({
         label: s.name,
         value: s.name,
       }))

src/components/pages/AssessmentDetailsPage/AssessmentDetailsPage.tsx

@@ -372,9 +372,9 @@ class AssessmentDetailsPage extends React.Component<Props, State> {
     }
     const resourceGroups = options.find(o_1 => o_1.name === 'resource_group') as any
     if (resourceGroups && resourceGroups.values) {
-      const localDataFind_1 = resourceGroups.values
+      const localDataFind = resourceGroups.values
         .find((g: string) => g === localData.resourceGroupName)
-      if (!localDataFind_1) {
+      if (!localDataFind) {
         azureStore.updateResourceGroup(resourceGroups.values[0] as string)
       }
       azureStore.saveResourceGroups(resourceGroups.values)

src/components/pages/EndpointsPage/EndpointsPage.tsx

@@ -75,7 +75,7 @@ class EndpointsPage extends React.Component<{ history: any }, State> {
 
   pollTimeout: number = 0
 
-  stopPolling: boolean =false
+  stopPolling: boolean = false
 
   componentDidMount() {
     document.title = 'Coriolis Endpoints'

src/plugins/endpoint/default/ConnectionSchemaPlugin.ts

@@ -157,14 +157,14 @@ export default class ConnectionSchemaParser {
 
   static parseConnectionInfoToPayload(data: { [prop: string]: any }, schema: any) {
     const schemaRoot = schema.oneOf ? schema.oneOf[0] : schema
-    const connection_info = fieldsToPayload(data, schemaRoot)
+    const connectionInfo = fieldsToPayload(data, schemaRoot)
 
     const dataSecretRef = data.secret_ref || data['connection_info/secret_ref']
     if (dataSecretRef) {
-      connection_info.secret_ref = dataSecretRef
+      connectionInfo.secret_ref = dataSecretRef
     }
 
-    return connection_info
+    return connectionInfo
   }
 
   static parseConnectionResponse(endpoint: Endpoint) {

src/sources/AssessmentSource.ts

@@ -78,7 +78,7 @@ class AssessmentSource {
       const newData = { ...data }
       newData.selectedInstances = [instance]
       try {
-        return this.migrate(newData)
+        return await this.migrate(newData)
       } catch (e) {
         notificationStore.alert(`Error while migrating instance ${instance.name}`, 'error')
         return null

src/sources/MigrationSource.ts

@@ -79,8 +79,11 @@ class MigrationSource {
 
   async recreateFullCopy(migration: MigrationItemOptions): Promise<MigrationItem> {
     const {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       origin_endpoint_id, destination_endpoint_id, destination_environment,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       network_map, instances, storage_mappings, notes, destination_minion_pool_id,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       origin_minion_pool_id, instance_osmorphing_minion_pool_mappings,
     } = migration
 

src/stores/AzureStore.ts

@@ -170,7 +170,7 @@ class AzureStore {
     try {
       await AzureSource.authenticate(connectionInfo)
       this.authenticating = false
-      return Promise.resolve()
+      return await Promise.resolve()
     } catch (e) {
       this.authenticating = false
       return Promise.reject()

src/stores/EndpointStore.ts

@@ -318,7 +318,7 @@ class EndpointStore {
     this.adding = false
   }
 
-  @action async loadStorage(endpointId: string, data: any, options?: {cache?: boolean}): Promise<void> {
+  @action async loadStorage(endpointId: string, data: any, options?: { cache?: boolean }): Promise<void> {
     this.storageBackends = []
     this.storageLoading = true
 

src/stores/MinionPoolStore.ts

@@ -32,31 +32,31 @@ export const MinionPoolStoreUtils = {
 
 class MinionPoolStore {
   @observable
-  loadingMinionPools: boolean = false
+    loadingMinionPools: boolean = false
 
   @observable
-  minionPools: MinionPool[] = []
+    minionPools: MinionPool[] = []
 
   @observable
-  loadingMinionPoolDetails: boolean = false
+    loadingMinionPoolDetails: boolean = false
 
   @observable
-  minionPoolDetails: MinionPoolDetails | null = null
+    minionPoolDetails: MinionPoolDetails | null = null
 
   @observable
-  loadingMinionPoolSchema: boolean = false
+    loadingMinionPoolSchema: boolean = false
 
   @observable
-  minionPoolDefaultSchema: Field[] = []
+    minionPoolDefaultSchema: Field[] = []
 
   @observable
-  minionPoolEnvSchema: Field[] = []
+    minionPoolEnvSchema: Field[] = []
 
   @observable
-  optionsPrimaryLoading: boolean = false
+    optionsPrimaryLoading: boolean = false
 
   @observable
-  optionsSecondaryLoading: boolean = false
+    optionsSecondaryLoading: boolean = false
 
   @computed
   get minionPoolCombinedSchema() {

src/stores/ReplicaStore.ts

@@ -192,7 +192,7 @@ class ReplicaStore {
   }
 
   async cancelExecution(
-    options: {replicaId: string, executionId?: string, force?: boolean},
+    options: { replicaId: string, executionId?: string, force?: boolean },
   ): Promise<void> {
     await ReplicaSource.cancelExecution(options)
     if (options.force) {

src/utils/ApiCaller.ts

@@ -121,6 +121,7 @@ class ApiCaller {
       if (error.response) {
         throw apiCallerHandlers.handleErrorResponse(error)
       } else if (error.request) {
+        // eslint-disable-next-line @typescript-eslint/no-throw-literal
         throw apiCallerHandlers.handleErrorRequest(error)
       } else {
         throw apiCallerHandlers.handleRequestCancel(error)