Update node

.github/workflows/main.yml

@@ -9,6 +9,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
       - name: Install dependencies
         run: |
           npm install
@@ -31,6 +34,9 @@ jobs:
     if: github.event_name == 'release' && github.event.action == 'published'
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
       - name: Install dependencies
         run: |
           npm install

package.json

@@ -3,42 +3,42 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "@fluentui/react": "^7.138.0",
-    "@reduxjs/toolkit": "^1.4.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.4",
-    "@testing-library/user-event": "^12.1.5",
+    "@fluentui/react": "^8.14.13",
+    "@reduxjs/toolkit": "^1.5.1",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^13.1.9",
     "@types/country-list": "^2.1.0",
-    "@types/jest": "^26.0.14",
-    "@types/node": "^14.11.1",
+    "@types/jest": "^26.0.23",
+    "@types/node": "^15.6.0",
     "@types/psl": "^1.1.0",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-redux": "^7.1.9",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.5",
+    "@types/react-redux": "^7.1.16",
     "@types/react-responsive": "^8.0.2",
-    "@types/react-router-dom": "^5.1.5",
-    "@typescript-eslint/eslint-plugin": "^4.1.1",
-    "@typescript-eslint/parser": "^4.1.1",
-    "@uifabric/charting": "^4.1.3",
-    "@uifabric/react-hooks": "^7.13.4",
+    "@types/react-router-dom": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^4.24.0",
+    "@typescript-eslint/parser": "^4.24.0",
+    "@uifabric/charting": "^4.15.25",
+    "@uifabric/react-hooks": "^7.14.0",
     "country-list": "^2.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "fetch-mock": "^9.10.7",
-    "http-proxy-middleware": "^1.0.5",
-    "mailinabox-api": "^0.47.0",
-    "prettier": "^2.1.2",
-    "prettier-plugin-organize-imports": "^1.1.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.3",
+    "eslint-plugin-prettier": "^3.4.0",
+    "fetch-mock": "^9.11.0",
+    "http-proxy-middleware": "^2.0.0",
+    "mailinabox-api": "^0.51.1",
+    "prettier": "^2.3.0",
+    "prettier-plugin-organize-imports": "^2.1.0",
     "psl": "^1.8.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-redux": "^7.2.1",
-    "react-responsive": "^8.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
+    "react-responsive": "^8.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^4.0.3",
     "redux-thunk": "^2.3.0",
-    "typescript": "^4.0.3"
+    "typescript": "^4.2.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -49,7 +49,7 @@
     "lint:fix": "npm run lint:fix:prettier && npm run lint:eslint -- --fix",
     "lint:prettier": "prettier --check \"**/*.{ts,js,json,svg,md,yml}\"",
     "lint:fix:prettier": "prettier --write '**/*.{ts,js,json,svg,md,yml}'",
-    "lint:eslint": "eslint . --ext .js,.ts",
+    "lint:eslint": "eslint . --ext .js,.ts,.tsx",
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "eslintConfig": {
@@ -60,7 +60,7 @@
     "extends": [
       "react-app",
       "plugin:@typescript-eslint/recommended",
-      "prettier/@typescript-eslint",
+      "prettier",
       "plugin:prettier/recommended"
     ],
     "rules": {
@@ -111,5 +111,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "dependencies": {
+    "office-ui-fabric-react": "^7.170.1"
   }
 }

src/components/routes/MainRoute/MainRoute.tsx

@@ -1,4 +1,4 @@
-import { ScreenWidthMinMedium, Stack } from '@fluentui/react';
+import { IStackProps, ScreenWidthMinMedium, Stack } from '@fluentui/react';
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useMediaQuery } from 'react-responsive';
@@ -33,7 +33,7 @@ export const MainRoute: React.FunctionComponent & { path: string } = () => {
     minWidth: ScreenWidthMinMedium,
   });
 
-  const nonMobileContainerProps = {
+  const nonMobileContainerProps: IStackProps = {
     ...(isMinMediumScreen && {
       gap: 'l1',
       horizontalAlign: 'center',

src/components/routes/MainRoute/system/BackupsRoute/BackupsRoute.tsx

@@ -112,12 +112,8 @@ const BackupSections: React.FunctionComponent = () => {
 export const BackupsRoute: React.FunctionComponent & {
   path: string;
 } = () => {
-  const {
-    isGettingStatus,
-    isGettingConfig,
-    getStatusError,
-    getConfigError,
-  } = useSelector((state: RootState) => state.system.backups);
+  const { isGettingStatus, isGettingConfig, getStatusError, getConfigError } =
+    useSelector((state: RootState) => state.system.backups);
 
   const dispatch = useDispatch();
 

src/components/ui/BackupConfigure/BackupConfigure.tsx

@@ -100,12 +100,10 @@ export const BackupConfigure: React.FunctionComponent<
   const selectedBackupOption = backupOptions.find(
     (option) => option.key === backupType
   );
-  const [backupOption, setBackupOption] = useState<IDropdownOption | undefined>(
-    selectedBackupOption
-  );
-  const [updateBackupConfig, setUpdateBackupConfig] = useState<
-    SystemBackupConfigUpdateRequest | undefined
-  >();
+  const [backupOption, setBackupOption] =
+    useState<IDropdownOption | undefined>(selectedBackupOption);
+  const [updateBackupConfig, setUpdateBackupConfig] =
+    useState<SystemBackupConfigUpdateRequest | undefined>();
 
   const onDialogDismissed = (): void => {
     if (updateConfigResponse === 'OK') {

src/components/ui/BackupConfigure/local/BackupConfigureLocal.tsx

@@ -6,47 +6,44 @@ import {
 } from '../../TextFieldWithInfo/TextFieldWithInfo';
 import { BackupConfigureProps, BackupType } from '../types';
 
-export const BackupConfigureLocal: React.FunctionComponent<BackupConfigureProps> = ({
-  backupConfig,
-  daysDescription,
-  onConfigChange,
-}) => {
-  const [days, setDays] = useState<string | undefined>(
-    String(backupConfig.minAgeInDays)
-  );
+export const BackupConfigureLocal: React.FunctionComponent<BackupConfigureProps> =
+  ({ backupConfig, daysDescription, onConfigChange }) => {
+    const [days, setDays] = useState<string | undefined>(
+      String(backupConfig.minAgeInDays)
+    );
 
-  const onDaysChange = (
-    _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string | undefined
-  ): void => {
-    setDays(newValue);
-  };
+    const onDaysChange = (
+      _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+      newValue?: string | undefined
+    ): void => {
+      setDays(newValue);
+    };
 
-  const onDaysRenderLabel = useMemo(
-    () => onRenderTextFieldLabel(daysDescription),
-    [daysDescription]
-  );
+    const onDaysRenderLabel = useMemo(
+      () => onRenderTextFieldLabel(daysDescription),
+      [daysDescription]
+    );
 
-  useEffect(() => {
-    onConfigChange({
-      target: BackupType.local,
-      targetUser: '',
-      targetPass: '',
-      minAge: Number(days) || 1,
-    });
-  }, [days, onConfigChange]);
+    useEffect(() => {
+      onConfigChange({
+        target: BackupType.local,
+        targetUser: '',
+        targetPass: '',
+        minAge: Number(days) || 1,
+      });
+    }, [days, onConfigChange]);
 
-  return (
-    <TextField
-      value={days}
-      label="Days"
-      min={1}
-      step={1}
-      type="number"
-      required
-      onRenderLabel={onDaysRenderLabel}
-      styles={textfieldWithLabelInfoStyles}
-      onChange={onDaysChange}
-    />
-  );
-};
+    return (
+      <TextField
+        value={days}
+        label="Days"
+        min={1}
+        step={1}
+        type="number"
+        required
+        onRenderLabel={onDaysRenderLabel}
+        styles={textfieldWithLabelInfoStyles}
+        onChange={onDaysChange}
+      />
+    );
+  };