chore: upgrade react dependencies [DET-3649] (#894)

webui/react/.eslintrc.js

@@ -25,6 +25,9 @@ module.exports = {
   },
   plugins: [ 'import', 'react', 'react-hooks', 'sort-keys-fix' ],
   rules: {
+    '@typescript-eslint/explicit-module-boundary-types': [ 'warn', {
+      allowArgumentsExplicitlyTypedAsAny: true,
+    } ],
     '@typescript-eslint/indent': [ 'error', 2 ],
     '@typescript-eslint/no-unused-vars': 'error',
     'array-bracket-spacing': [ 'error', 'always' ],
@@ -59,6 +62,7 @@ module.exports = {
       beforeSelfClosing: 'always',
       closingSlash: 'never',
     } ],
+    'react/prop-types': 'off',
     'react/self-closing-comp': [ 'error', {
       component: true,
       html: true,

webui/react/config-overrides.js

@@ -23,7 +23,7 @@ module.exports = override(
   }),
 
   // Add LESS loader support for antd.
-  addLessLoader({ javascriptEnabled: true }),
+  addLessLoader({ lessOptions: { javascriptEnabled: true } }),
 
   // Replace momentjs to Day.js to reduce antd package size.
   addWebpackPlugin(new AntdDayjsWebpackPlugin()),

webui/react/package.json

@@ -18,19 +18,19 @@
   "proxy": "http://localhost:8080",
   "dependencies": {
     "ansi-to-html": "^0.6.14",
-    "antd": "^4.3.5",
+    "antd": "~4.3.5",
     "antd-dayjs-webpack-plugin": "^0.0.9",
     "antd-theme-webpack-plugin": "^1.3.4",
     "axios": "^0.19.2",
     "can-ndjson-stream": "^1.0.2",
-    "fp-ts": "^2.6.2",
+    "fp-ts": "^2.7.0",
     "history": "^4.10.1",
     "humanize-duration": "^3.23.1",
-    "io-ts": "^2.2.4",
+    "io-ts": "^2.2.8",
     "js-sha512": "^0.8.0",
-    "plotly.js-basic-dist": "^1.54.1",
+    "plotly.js-basic-dist": "^1.54.6",
     "portable-fetch": "^3.0.0",
-    "query-string": "^6.12.1",
+    "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-plotly.js": "^2.4.0",
@@ -61,48 +61,48 @@
     "@storybook/addon-knobs": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
-    "@storybook/preset-create-react-app": "^2.1.2",
+    "@storybook/preset-create-react-app": "^3.1.4",
     "@storybook/react": "^5.3.19",
-    "@testing-library/jest-dom": "^5.9.0",
-    "@testing-library/react": "^10.0.4",
-    "@testing-library/user-event": "^10.4.0",
-    "@types/jest": "^25.2.3",
+    "@testing-library/jest-dom": "^5.11.1",
+    "@testing-library/react": "^10.4.7",
+    "@testing-library/user-event": "^12.0.11",
+    "@types/jest": "^26.0.4",
     "@types/moment-timezone": "^0.5.13",
-    "@types/node": "^13.13.9",
-    "@types/plotly.js": "^1.50.12",
-    "@types/react": "^16.9.35",
+    "@types/node": "^14.0.23",
+    "@types/plotly.js": "^1.50.15",
+    "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
     "@types/react-plotly.js": "^2.2.4",
     "@types/react-router-dom": "^5.1.5",
     "@types/resize-observer-browser": "^0.1.3",
-    "@types/sinon": "^7.5.2",
+    "@types/sinon": "^9.0.4",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/sprintf-js": "^1.1.2",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^3.6.1",
+    "@typescript-eslint/parser": "^3.6.1",
     "babel-plugin-import": "^1.13.0",
-    "customize-cra": "^0.9.1",
+    "customize-cra": "^1.0.0",
     "eslint": "^6.8.0",
     "eslint-config-react": "^1.1.7",
     "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^23.13.2",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^3.0.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^23.18.0",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-sort-keys-fix": "^1.1.1",
-    "less": "^3.11.1",
-    "less-loader": "^5.0.0",
+    "less": "^3.12.0",
+    "less-loader": "^6.2.0",
     "node-sass": "^4.14.1",
     "npm-force-resolutions": "^0.0.3",
     "path-to-regexp": "^6.1.0",
     "react-app-rewired": "^2.1.6",
-    "react-docgen-typescript-loader": "^3.7.1",
+    "react-docgen-typescript-loader": "^3.7.2",
     "sinon": "^9.0.2",
-    "source-map-explorer": "^2.4.1",
-    "stylelint": "^13.5.0",
+    "source-map-explorer": "^2.4.2",
+    "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
-    "stylelint-order": "^4.0.0",
-    "typescript": "^3.9.3"
+    "stylelint-order": "^4.1.0",
+    "typescript": "^3.9.6"
   },
   "resolutions": {
     "marked": "^0.7.0"

webui/react/src/App.tsx

@@ -22,6 +22,7 @@ import useRouteTracker from 'hooks/useRouteTracker';
 import useTheme from 'hooks/useTheme';
 import { appRoutes } from 'routes';
 import { getInfo } from 'services/api';
+import { EmptyParams } from 'services/types';
 import { DeterminedInfo } from 'types';
 import { updateFaviconType } from 'utils/browser';
 import { parseUrl } from 'utils/routes';
@@ -36,7 +37,7 @@ const AppView: React.FC = () => {
   const setInfo = Info.useActionContext();
   const setUI = UI.useActionContext();
   const username = user ? user.username : undefined;
-  const [ infoResponse, requestInfo ] = useRestApiSimple<{}, DeterminedInfo>(getInfo, {});
+  const [ infoResponse, requestInfo ] = useRestApiSimple<EmptyParams, DeterminedInfo>(getInfo, {});
   const classes = [ css.base ];
 
   const fetchInfo = useCallback(() => requestInfo({}), [ requestInfo ]);

webui/react/src/contexts/index.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch, PropsWithChildren, useContext, useReducer } from 'react';
+import React, { Dispatch, useContext, useReducer } from 'react';
 
 import { clone } from 'utils/data';
 
@@ -50,7 +50,11 @@ export const generateContext = <T, A = Action<T>>(options: Options<T, A>): Expor
   };
   const reducer = options.reducer || defaultReducer;
 
-  const Provider: React.FC = (props: PropsWithChildren<{}>) => {
+  interface Props {
+    children?: React.ReactNode
+  }
+
+  const Provider: React.FC<Props> = (props: Props) => {
     const [ state, dispatch ] = useReducer(reducer, initialState);
 
     return React.createElement(

webui/react/src/ioTypes.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import { isLeft } from 'fp-ts/lib/Either';
 import * as io from 'io-ts';
 

webui/react/src/pages/ExperimentList.table.tsx

@@ -11,24 +11,26 @@ import { experimentDuration } from 'utils/time';
 export const columns: ColumnsType<ExperimentItem> = [
   {
     dataIndex: 'id',
-    sorter: (a, b): number => alphanumericSorter(a.id, b.id),
+    sorter: (a: ExperimentItem, b: ExperimentItem): number => alphanumericSorter(a.id, b.id),
     title: 'ID',
   },
   {
     dataIndex: 'name',
     render: experimentDescriptionRenderer,
-    sorter: (a, b): number => alphanumericSorter(a.name, b.name),
+    sorter: (a: ExperimentItem, b: ExperimentItem): number => alphanumericSorter(a.name, b.name),
     title: 'Name',
   },
   {
     defaultSortOrder: 'descend',
     render: startTimeRenderer,
-    sorter: (a, b): number => stringTimeSorter(a.startTime, b.startTime),
+    sorter: (a: ExperimentItem, b: ExperimentItem): number =>
+      stringTimeSorter(a.startTime, b.startTime),
     title: 'Start Time',
   },
   {
     render: expermentDurationRenderer,
-    sorter: (a, b): number => experimentDuration(a) - experimentDuration(b),
+    sorter: (a: ExperimentItem, b: ExperimentItem): number =>
+      experimentDuration(a) - experimentDuration(b),
     title: 'Duration',
   },
   {
@@ -38,17 +40,18 @@ export const columns: ColumnsType<ExperimentItem> = [
   },
   {
     render: stateRenderer,
-    sorter: (a, b): number => runStateSorter(a.state, b.state),
+    sorter: (a: ExperimentItem, b: ExperimentItem): number => runStateSorter(a.state, b.state),
     title: 'State',
   },
   {
     render: experimentProgressRenderer,
-    sorter: (a, b): number => (a.progress || 0) - (b.progress || 0),
+    sorter: (a: ExperimentItem, b: ExperimentItem): number => (a.progress || 0) - (b.progress || 0),
     title: 'Progress',
   },
   {
     render: userRenderer,
-    sorter: (a, b): number => alphanumericSorter(a.username, b.username),
+    sorter: (a: ExperimentItem, b: ExperimentItem): number =>
+      alphanumericSorter(a.username, b.username),
     title: 'User',
   },
   {

webui/react/src/pages/TaskList.table.tsx

@@ -11,33 +11,35 @@ export const columns: ColumnsType<CommandTask> = [
   {
     dataIndex: 'id',
     render: taskIdRenderer,
-    sorter: (a, b): number => alphanumericSorter(a.id, b.id),
+    sorter: (a: CommandTask, b: CommandTask): number => alphanumericSorter(a.id, b.id),
     title: 'Short ID',
   },
   {
     render: taskTypeRenderer,
-    sorter: (a, b): number => alphanumericSorter(a.type, b.type),
+    sorter: (a: CommandTask, b: CommandTask): number => alphanumericSorter(a.type, b.type),
     title: 'Type',
   },
   {
     dataIndex: 'name',
-    sorter: (a, b): number => alphanumericSorter(a.name, b.name),
+    sorter: (a: CommandTask, b: CommandTask): number => alphanumericSorter(a.name, b.name),
     title: 'Name',
   },
   {
     defaultSortOrder: 'descend',
     render: startTimeRenderer,
-    sorter: (a, b): number => stringTimeSorter(a.startTime, b.startTime),
+    sorter: (a: CommandTask, b: CommandTask): number =>
+      stringTimeSorter(a.startTime, b.startTime),
     title: 'Start Time',
   },
   {
     render: stateRenderer,
-    sorter: (a, b): number => commandStateSorter(a.state, b.state),
+    sorter: (a: CommandTask, b: CommandTask): number => commandStateSorter(a.state, b.state),
     title: 'State',
   },
   {
     render: userRenderer,
-    sorter: (a, b): number => alphanumericSorter(a.username, b.username),
+    sorter: (a: CommandTask, b: CommandTask): number =>
+      alphanumericSorter(a.username, b.username),
     title: 'User',
   },
   {

webui/react/src/services/api.ts

@@ -1,11 +1,11 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import { CancelToken } from 'axios';
 
 import * as DetSwagger from 'services/api-ts-sdk';
 import { generateApi, processApiError } from 'services/apiBuilder';
 import * as Config from 'services/apiConfig';
-import { CommandLogsParams, ExperimentDetailsParams, ExperimentsParams, KillCommandParams,
-  KillExpParams, LaunchTensorboardParams, LogsParams, PatchExperimentParams,
+import { CommandLogsParams, EmptyParams, ExperimentDetailsParams, ExperimentsParams,
+  KillCommandParams, KillExpParams, LaunchTensorboardParams, LogsParams,
+  PatchExperimentParams,
   PatchExperimentState,
   TrialDetailsParams,
   TrialLogsParams } from 'services/types';
@@ -35,9 +35,9 @@ export const isNotFound = (e: any): boolean => {
   return e.response && e.response.status && e.response.status === 404;
 };
 
-export const getCurrentUser = generateApi<{}, User>(Config.getCurrentUser);
+export const getCurrentUser = generateApi<EmptyParams, User>(Config.getCurrentUser);
 
-export const getInfo = generateApi<{}, DeterminedInfo>(Config.getInfo);
+export const getInfo = generateApi<EmptyParams, DeterminedInfo>(Config.getInfo);
 
 export const getExperimentSummaries =
   generateApi<ExperimentsParams, Experiment[]>(Config.getExperimentSummaries);

webui/react/src/services/apiConfig.ts

@@ -8,9 +8,9 @@ import {
   jsonToExperiments, jsonToLogs, jsonToTensorboard, jsonToTrialDetails, jsonToTrialLogs,
 } from 'services/decoder';
 import {
-  CommandLogsParams, ExperimentDetailsParams, ExperimentsParams, KillCommandParams,
-  KillExpParams, LaunchTensorboardParams, LogsParams, PatchExperimentParams, TrialDetailsParams,
-  TrialLogsParams,
+  CommandLogsParams, EmptyParams, ExperimentDetailsParams, ExperimentsParams,
+  KillCommandParams, KillExpParams, LaunchTensorboardParams, LogsParams, PatchExperimentParams,
+  TrialDetailsParams, TrialLogsParams,
 } from 'services/types';
 import {
   Command, CommandType, Credentials, DeterminedInfo, Experiment, ExperimentDetails, Log,
@@ -34,7 +34,7 @@ const commandToEndpoint: Record<CommandType, string> = {
 
 /* Authentication */
 
-export const getCurrentUser: Api<{}, User> = {
+export const getCurrentUser: Api<EmptyParams, User> = {
   httpOptions: () => ({ url: '/users/me' }),
   name: 'getCurrentUser',
   postProcess: (response) => {
@@ -61,7 +61,7 @@ export const login: Api<Credentials, void> = {
 
 /* Info */
 
-export const getInfo: Api<{}, DeterminedInfo> = {
+export const getInfo: Api<EmptyParams, DeterminedInfo> = {
   httpOptions: () => ({ url: '/info' }),
   name: 'getInfo',
   postProcess: (response) => jsonToDeterminedInfo(response.data),

webui/react/src/services/types.ts

@@ -51,3 +51,6 @@ export interface CommandLogsParams extends LogsParams {
   commandId: string;
   commandType: CommandType;
 }
+
+/* eslint-disable-next-line @typescript-eslint/ban-types */
+export type EmptyParams = {}