Zh/update nodejs to 16 LTS

.github/workflows/build.yml

@@ -6,14 +6,18 @@ on:
       - dev
   pull_request:
     types: [opened, synchronize, reopened]
+
+env:
+  CI: false
+
 jobs:
   build:
     name: Yarn Build
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
     timeout-minutes: 20
     steps:
       - uses: actions/checkout@v1
@@ -25,4 +29,4 @@ jobs:
       - run: yarn install
       - name: Run TSLint
         run: yarn run lint
-      - run: CI='' yarn run build
+      - run: yarn run build

README.md

@@ -74,7 +74,7 @@ bootstrap theme otherwise bootstrap components will use one color scheme and the
 #### Navigation
 
 The project uses [react-router](https://reacttraining.com/react-router/) to handle page navigation.
-Pages are just normal components that are routed in the [src/router/Routes.tsx](src/router/Routes.tsx) file.
+Pages are just normal components that are routed in the [src/router/AppRoutes.tsx](src/router/AppRoutes.tsx) file.
 
 #### Typescript
 

package.json

@@ -18,87 +18,87 @@
     "preinstall": "yarn run check-npm"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.11.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
-    "@sentry/browser": "^5.11.2",
-    "@types/history": "^4.7.3",
-    "@types/humanize-duration": "^3.18.0",
-    "@types/jwt-decode": "^2.2.1",
-    "@types/luxon": "^1.21.0",
-    "@types/node": "^13.7.0",
-    "@types/novnc-core": "^0.1.1",
-    "@types/react": "^16.9.2",
-    "@types/react-burger-menu": "^2.2.1",
-    "@types/react-copy-to-clipboard": "^4.3.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-redux": "^7.1.4",
-    "@types/react-router": "^5.1.2",
+    "@fortawesome/fontawesome-svg-core": "^6.1.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.0",
+    "@fortawesome/free-solid-svg-icons": "^6.1.0",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@sentry/browser": "^6.19.1",
+    "@types/history": "^5.0.0",
+    "@types/humanize-duration": "^3.27.1",
+    "@types/luxon": "^2.3.0",
+    "@types/node": "^17.0.22",
+    "@types/novnc-core": "^0.1.3",
+    "@types/react": "^17.0.41",
+    "@types/react-burger-menu": "^2.8.3",
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-redux": "^7.1.23",
+    "@types/react-router": "^5.1.18",
     "@types/react-router-bootstrap": "^0.24.5",
-    "@types/react-router-dom": "^5.1.3",
-    "@types/react-select": "^3.0.11",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-tag-autocomplete": "^6.1.1",
-    "@types/uuid": "^3.4.6",
+    "@types/uuid": "^8.3.4",
     "@types/winston": "^2.4.4",
     "@types/yup": "^0.26.27",
-    "@types/zxcvbn": "^4.4.0",
-    "axios": "^0.21.1",
-    "axios-retry": "^3.1.9",
+    "@types/zxcvbn": "^4.4.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
+    "axios": "^0.26.1",
+    "axios-retry": "^3.2.4",
     "browser-detect": "^0.2.28",
-    "connected-react-router": "^6.6.1",
-    "formik": "2.0.3",
-    "history": "^4.10.1",
-    "humanize-duration": "^3.21.0",
-    "jwt-decode": "^2.2.0",
-    "luxon": "^1.21.3",
-    "node-sass": "^4.12.0",
-    "novnc-core": "^0.2.1",
-    "object-to-formdata": "^3.0.6",
-    "react": "^16.9.0",
-    "react-app-polyfill": "^1.0.2",
-    "react-bootstrap": "^1.0.0-beta.16",
-    "react-burger-menu": "^2.5.4",
-    "react-copy-to-clipboard": "^5.0.3",
-    "react-dev-utils": "^10.1.0",
-    "react-dom": "^16.9.0",
-    "react-pdf": "^4.1.0",
-    "react-redux": "^7.1.3",
-    "react-router-bootstrap": "^0.25.0",
-    "react-router-dom": "^5.1.0",
-    "react-select": "^3.1.0",
+    "connected-react-router": "^6.9.2",
+    "formik": "2.2.9",
+    "history": "^5.3.0",
+    "humanize-duration": "^3.27.1",
+    "jwt-decode": "^3.1.2",
+    "luxon": "^2.3.1",
+    "novnc-core": "^0.3.0",
+    "object-to-formdata": "^4.4.2",
+    "react": "^17.0.2",
+    "react-app-polyfill": "^3.0.0",
+    "react-bootstrap": "^2.2.1",
+    "react-burger-menu": "^3.0.6",
+    "react-codemod": "^5.4.3",
+    "react-copy-to-clipboard": "^5.0.4",
+    "react-dev-utils": "^12.0.0",
+    "react-dom": "^17.0.2",
+    "react-pdf": "^5.6.0",
+    "react-redux": "^7.2.6",
+    "react-router-bootstrap": "^0.26.1",
+    "react-router-dom": "^6.2.2",
+    "react-select": "^5.2.2",
     "react-tag-autocomplete": "^6.3.0",
-    "redux": "^4.0.4",
+    "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
-    "redux-thunk": "^2.3.0",
-    "uuid": "^3.4.0",
-    "winston": "^3.2.1",
-    "yup": "^0.28.0",
+    "redux-thunk": "^2.4.1",
+    "uuid": "^8.3.2",
+    "winston": "^3.6.0",
+    "yup": "0.28.0",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.1.15",
-    "@types/enzyme-adapter-react-16": "^1.0.3",
+    "@types/enzyme": "^3.10.11",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^25.1.1",
-    "@types/puppeteer": "^2.0.1",
-    "@types/react-pdf": "^4.0.3",
+    "@types/puppeteer": "^5.4.5",
+    "@types/react-pdf": "^5.0.9",
     "@types/react-tag-autocomplete": "^6.1.1",
     "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
     "enzyme-to-json": "^3.3.4",
-    "faker": "^4.1.0",
-    "jest": "24.9.0",
-    "jest-cli": "^25.2.3",
+    "faker": "^6.6.6",
+    "jest": "26.6.0",
+    "jest-cli": "^26.6.0",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "^2.1.1",
-    "react-scripts": "^3.4.1",
+    "pdfjs-dist": "^2.13.216",
+    "puppeteer": "^13.5.1",
+    "react-scripts": "^4.0.3",
+    "sass": "^1.49.9",
     "source-map-explorer": "^2.2.2",
-    "stylelint": "^13.0.0",
-    "stylelint-config-standard": "^19.0.0",
-    "stylelint-scss": "^3.9.4",
-    "tslint": "^6.0.0",
-    "tslint-react": "^4.0.0",
-    "typescript": "^3.7.5",
+    "stylelint": "^14.5.3",
+    "stylelint-config-standard": "^25.0.0",
+    "stylelint-scss": "^4.1.0",
+    "tslint": "^6.1.3",
+    "tslint-react": "^5.0.0",
+    "typescript": "^4.6.2",
     "watch": "^1.0.2"
   },
   "eslintConfig": {
@@ -117,7 +117,7 @@
     ]
   },
   "engines": {
-    "node": ">=8.10 <=12",
+    "node": ">=12.13 <=16.14",
     "npm": ">=6.4.0"
   }
 }

src/App.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
+import { Component } from 'react';
 import * as Sentry from '@sentry/browser';
-import Routes from './router/Routes';
+import Routes from './router/AppRoutes';
 import {CapsLockContextProvider} from './components/CapsLockContext/CapsLockContext';
 
 // Configure Sentry
 // Sentry.init({
 //   dsn: ''
 // });
 
-class App extends React.Component {
+class App extends Component {
 
   throwError = () => {
     throw new Error('This is an error to test Sentry');

src/_mixins.scss

@@ -1,6 +1,4 @@
-
-
-// Mixin for media query passing the type of screen.
+/* Mixin for media query passing the type of screen. */
 $breakpoints: (
     phone: 400px,
     phone-wide: 480px,

src/api/index.ts

@@ -99,7 +99,7 @@ export async function forgotPassword(email: string) {
   return api.post<string>(`/user/forgot-password/${encodeURIComponent(email)}`);
 }
 
-export function confirmForgotPassword(code: string, password: string) {
+export function confirmForgotPassword(password: string, code?: string) {
   return api.post<string>(`/user/confirm-forgot-password`, {passwordRecoveryCode: code, newPassword: password});
 }
 
@@ -178,7 +178,7 @@ export async function startUserModule(id: string) {
   return handleResponse(await api.post<UserModule>(`/user-module/${id}`)).data;
 }
 
-export async function verifyEmail(code: string) {
+export async function verifyEmail(code?: string) {
   return handleResponse(await api.post<string>(`/user/verify-email`, {code: code}));
 }
 export async function getModuleForEditor(moduleId: number) {

src/api/rfb.ts

@@ -14,21 +14,32 @@ export async function connect(element: HTMLDivElement, ticket: TicketResponse, o
     const rfb = new RFB(element as any,
       // @ts-ignore
       url);
+    // @ts-ignore
     rfb.scaleViewport = true;
+    // @ts-ignore
     rfb.resizeSession = true;
-    rfb.addEventListener('connect', () => log('connect'));
+    // @ts-ignore
+    rfb.addEventListener('connect', () => log('connect')); 
+    // @ts-ignore
     rfb.addEventListener('disconnect', () => onDisconnect());
+    // @ts-ignore
     rfb.addEventListener('credentialsrequired', () => {
+      // @ts-ignore
       rfb.sendCredentials({
         username: ticket.user,
         password: ticket.ticket
       });
       log('credentialsrequired');
     });
+    // @ts-ignore
     rfb.addEventListener('securityfailure', (e: any) => log({messsage: 'securityfailure', ...e}));
+    // @ts-ignore
     rfb.addEventListener('clipboard', () => log('clipboard'));
+    // @ts-ignore
     rfb.addEventListener('bell', () => log('bell'));
+    // @ts-ignore
     rfb.addEventListener('desktopname', () => log('desktopname'));
+    // @ts-ignore
     rfb.addEventListener('capabilities', () => log('capabilities'));
     return rfb;
   } catch (exc) {

src/components/AccountManagementLayout/AccountManagementLayout.tsx

@@ -1,5 +1,4 @@
 import {Col, Row} from 'react-bootstrap';
-import * as React from 'react';
 import {Layout} from '../../pages/Layout/Layout';
 
 interface AccountManagementLayoutProps {

src/components/AccountManagementLayout/PasswordStrength.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { Component } from 'react';
 import zxcvbn, {ZXCVBNResult} from 'zxcvbn';
 
 interface PasswordStrengthProps {
   password: string;
 }
-export default class PasswordStrength extends React.Component<PasswordStrengthProps> {
+export default class PasswordStrength extends Component<PasswordStrengthProps> {
   createPasswordLabel(result: ZXCVBNResult) {
     switch (result.score) {
       case 0:

src/components/AdminPanelLayout/AdminPanelLayout.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Layout} from '../../pages/Layout/Layout';
 import {Col, ListGroup, Row, TabContainer, TabContent, TabPane} from 'react-bootstrap';
 import {StatisticsPane} from './StatisticsPane';
@@ -10,7 +9,7 @@ import {connect} from 'react-redux';
 import {WebState} from '../../redux/types/WebState';
 import {getCurrentUser} from '../../redux/selectors/entities';
 import {User} from '../../types/User';
-import {Redirect} from 'react-router';
+import {Navigate} from 'react-router';
 
 interface AdminPanelLayoutProps {
   defaultActivePanel?: AdminTabKeys;
@@ -29,7 +28,7 @@ type AdminTabKeys = typeof panes[number]['eventKey'];
 const AdminPanelLayout = (props: AdminPanelLayoutProps) => {
 
   if (props.currentUser.role !== 'Admin') {
-    return <Redirect to={'/'} />;
+    return <Navigate to={'/'} replace={true} />;
   } else {
     return <Layout>
       <h1>Admin Console</h1>

src/components/AdminPanelLayout/ClusterPane.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const ClusterPane = () => (
   <>The cluster management panel is still under construction</>
 );

src/components/AdminPanelLayout/DowntimeScheduler.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const DowntimeScheduler = () => (
   <p>The downtime scheduler panel is still under construction</p>
 );

src/components/AdminPanelLayout/StatisticsPane.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const StatisticsPane = () => (
   <p>The statistics panel is still under construction</p>
 );

src/components/AdminPanelLayout/UserListItem.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {ERole, Role, User} from '../../types/User';
 
 interface Props {

src/components/AdminPanelLayout/UsersPane.tsx

@@ -1,5 +1,6 @@
 import {Button, Form, InputGroup, Modal, ModalBody, ModalFooter, Table} from 'react-bootstrap';
-import React, {useState} from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import {Role, User} from '../../types/User';
 import {changeUserRole, getCurrentUserFromServer, getUserList} from '../../api';
 import {useMount} from '../../hooks/useMount';
@@ -21,11 +22,11 @@ interface Props {
 }
 
 const UsersPane = (props: Props) => {
-  const [users, setUsers] = useState();
-  const [usersToDisplay, setUsersToDisplay] = useState();
+  const [users, setUsers] = useState<User[]>([]);
+  const [usersToDisplay, setUsersToDisplay] = useState<User[]>([]);
   const [loading, setLoading] = useState(true);
   const [updateRequests, setUpdateRequests] = useState<ChangeUserRoleRequest[]>([]);
-  const [commitResponseCode, setCommitResponseCode] = useState();
+  const [commitResponseCode, setCommitResponseCode] = useState<number>();
   const [showWarning, setShowWarning] = useState(false);
   const [warningShown, setWarningShown] = useState(false);
   const [userToUpdateOnConfirm, setUserToUpdate] = useState<[Role, User]>();

src/components/BridgeListEditor/BridgeListEditor.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {FieldArray} from 'formik';
 import {Col, Row} from 'react-bootstrap';
 import {BridgeListItem} from './BridgeListItem';

src/components/BridgeListEditor/BridgeListItem.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Col} from 'react-bootstrap';
 import {faTrashAlt} from '@fortawesome/free-solid-svg-icons';
 import {IconButton} from '../util/IconButton/IconButton';

src/components/BrowserSupportAlert/BrowserSupportAlert.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Modal} from 'react-bootstrap';
 import browserDetect from 'browser-detect';