[MISC] (deps): Bump react-scripts from 3.4.4 to 4.0.0 in /web (#1403)

Bumps [react-scripts](https://github.com/facebook/create-react-app/tree/HEAD/packages/react-scripts) from 3.4.4 to 4.0.0.
- [Release notes](https://github.com/facebook/create-react-app/releases)
- [Changelog](https://github.com/facebook/create-react-app/blob/master/CHANGELOG-3.x.md)
- [Commits](https://github.com/facebook/create-react-app/commits/react-scripts@4.0.0/packages/react-scripts)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Address CRA breaking changes

This is related to [breaking changes](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#breaking-changes) in CRA specific to ESLint.

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

web/package.json

@@ -34,7 +34,7 @@
     "react-loading": "^2.0.3",
     "react-otp-input": "^2.3.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "^4.0.0",
     "react-test-renderer": "^16.14.0",
     "typescript": "^3.9.7",
     "u2f-api": "^1.1.1"

web/src/components/AppStoreBadges.tsx

@@ -12,7 +12,7 @@ export interface Props {
     className?: string;
 }
 
-export default function (props: Props) {
+const AppStoreBadges = function (props: Props) {
     const target = props.targetBlank ? "_blank" : undefined;
 
     const width = props.iconSize;
@@ -27,4 +27,6 @@ export default function (props: Props) {
             </Link>
         </div >
     )
-}
+}
+
+export default AppStoreBadges

web/src/components/ColoredSnackbarContent.test.tsx

@@ -16,6 +16,7 @@ it('should contain the message', () => {
     expect(el.text()).to.contain("this is a success");
 });
 
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 it('should have correct color', () => {
     let el = shallow(<ColoredSnackbarContent level="success" message="this is a success" />);
     expect(el.find(SnackbarContent).props().className!.indexOf("success") > -1).to.be.true;
@@ -28,4 +29,5 @@ it('should have correct color', () => {
 
     el = shallow(<ColoredSnackbarContent level="warning" message="this is an warning" />);
     expect(el.find(SnackbarContent).props().className!.indexOf("warning") > -1).to.be.true;
-});
+});
+/* eslint-enable @typescript-eslint/no-unused-expressions */

web/src/components/ColoredSnackbarContent.tsx

@@ -24,7 +24,7 @@ export interface Props extends SnackbarContentProps {
     message: string;
 }
 
-export default function (props: Props) {
+const ColoredSnackbarContent = function (props: Props) {
     const classes = useStyles();
     const Icon = variantIcon[props.level];
 
@@ -43,6 +43,8 @@ export default function (props: Props) {
     )
 }
 
+export default ColoredSnackbarContent
+
 const useStyles = makeStyles(theme => ({
     success: {
         backgroundColor: green[600],

web/src/components/FailureIcon.tsx

@@ -4,8 +4,10 @@ import { faTimesCircle } from "@fortawesome/free-regular-svg-icons";
 
 export interface Props { }
 
-export default function (props: Props) {
+const FailureIcon = function (props: Props) {
     return (
         <FontAwesomeIcon icon={faTimesCircle} size="4x" color="red" className="failure-icon" />
     )
-}
+}
+
+export default FailureIcon

web/src/components/FingerTouchIcon.tsx

@@ -9,7 +9,7 @@ export interface Props {
 	strong?: boolean;
 }
 
-export default function (props: Props) {
+const FingerTouchIcon = function (props: Props) {
 	const shakingClass = (props.animated) ? style.shaking : undefined;
 	const strong = (props.strong) ? style.strong : undefined;
 
@@ -39,4 +39,6 @@ export default function (props: Props) {
 				/>
         </svg>
     )
-}
+}
+
+export default FingerTouchIcon

web/src/components/FixedTextField.tsx

@@ -8,7 +8,7 @@ import { makeStyles } from "@material-ui/core";
  * 
  * @param props the TextField props
  */
-export default function (props: TextFieldProps) {
+const FixedTextField = function (props: TextFieldProps) {
     const style = useStyles();
     return (
         <TextField {...props}
@@ -22,6 +22,8 @@ export default function (props: TextFieldProps) {
     );
 }
 
+export default FixedTextField
+
 const useStyles = makeStyles(theme => ({
     label: {
         backgroundColor: theme.palette.background.default,

web/src/components/InformationIcon.tsx

@@ -4,8 +4,10 @@ import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 
 export interface Props { }
 
-export default function (props: Props) {
+const InformationIcon = function (props: Props) {
     return (
         <FontAwesomeIcon icon={faInfoCircle} size="4x" color="#5858ff" className="information-icon" />
     )
-}
+}
+
+export default InformationIcon

web/src/components/LinearProgressBar.tsx

@@ -9,7 +9,7 @@ export interface Props {
     style?: CSSProperties;
 }
 
-export default function (props: Props) {
+const LinearProgressBar = function (props: Props) {
     const style = makeStyles(theme => ({
         progressRoot: {
             height: props.height ? props.height : theme.spacing(),
@@ -30,3 +30,5 @@ export default function (props: Props) {
             className={props.className} />
     )
 }
+
+export default LinearProgressBar

web/src/components/NotificationBar.tsx

@@ -8,7 +8,7 @@ export interface Props {
     onClose: () => void;
 }
 
-export default function (props: Props) {
+const NotificationBar = function (props: Props) {
     const [tmpNotification, setTmpNotification] = useState(null as Notification | null);
     const { notification } = useNotifications();
 
@@ -33,4 +33,6 @@ export default function (props: Props) {
                 message={tmpNotification ? tmpNotification.message : ""} />
         </Snackbar>
     )
-}
+}
+
+export default NotificationBar

web/src/components/PieChartIcon.tsx

@@ -11,7 +11,7 @@ export interface Props {
     backgroundColor?: string;
 }
 
-export default function (props: Props) {
+const PieChartIcon = function (props: Props) {
     const maxProgress = props.maxProgress ? props.maxProgress : 100;
     const width = props.width ? props.width : 20;
     const height = props.height ? props.height : 20;
@@ -30,4 +30,6 @@ export default function (props: Props) {
                 transform="rotate(-90) translate(-26)" />
         </svg>
     )
-}
+}
+
+export default PieChartIcon

web/src/components/PushNotificationIcon.tsx

@@ -9,11 +9,11 @@ export interface Props {
     animated?: boolean;
 }
 
-export default function (props: Props) {
+const PushNotificationIcon = function (props: Props) {
     const idleMilliseconds = 2500;
     const wiggleMilliseconds = 500;
     const startMilliseconds = 500;
-    const wiggleClass = (props.animated) ? useIntermittentClass(style.wiggle, wiggleMilliseconds, idleMilliseconds, startMilliseconds) : "";
+    const wiggleClass = useIntermittentClass((props.animated) ? style.wiggle : "", wiggleMilliseconds, idleMilliseconds, startMilliseconds);
 
     return (
         <svg x="0px" y="0px" viewBox="0 0 60 60" width={props.width} height={props.height} className={wiggleClass}>
@@ -41,4 +41,6 @@ export default function (props: Props) {
                 c-1.237-1.237-1.918-2.885-1.918-4.639S7.775,9.22,9.013,7.983C9.403,7.593,9.403,6.96,9.013,6.569z"/>
         </svg>
     )
-}
+}
+
+export default PushNotificationIcon

web/src/components/SuccessIcon.tsx

@@ -2,8 +2,10 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 
-export default function () {
+const SuccessIcon = function () {
     return (
         <FontAwesomeIcon icon={faCheckCircle} size="4x" color="green" className="success-icon" />
     )
-}
+}
+
+export default SuccessIcon

web/src/components/TimerIcon.tsx

@@ -10,7 +10,7 @@ export interface Props {
     backgroundColor?: string;
 }
 
-export default function (props: Props) {
+const TimerIcon = function (props: Props) {
     const radius = 31.6;
     const [timeProgress, setTimeProgress] = useState(0);
 
@@ -33,3 +33,4 @@ export default function (props: Props) {
     )
 }
 
+export default TimerIcon

web/src/hooks/NotificationsContext.ts

@@ -30,10 +30,12 @@ export function useNotifications() {
     }
 
     const resetNotification = () => useNotificationsProps.setNotification(null);
+    /* eslint-disable react-hooks/exhaustive-deps */
     const createInfoNotification = useCallback(notificationBuilder("info"), []);
     const createSuccessNotification = useCallback(notificationBuilder("success"), []);
     const createWarnNotification = useCallback(notificationBuilder("warning"), []);
     const createErrorNotification = useCallback(notificationBuilder("error"), []);
+    /* eslint-enable react-hooks/exhaustive-deps */
     const isActive = useNotificationsProps.notification !== null;
 
 

web/src/hooks/RemoteCall.ts

@@ -8,7 +8,7 @@ export function useRemoteCall<Ret>(fn: PromisifiedFunction<Ret>, deps: Dependenc
     const [inProgress, setInProgress] = useState(false);
     const [error, setError] = useState(undefined as Error | undefined);
 
-    const fnCallback = useCallback(fn, deps);
+    const fnCallback = useCallback(fn, [fn, deps]);
 
     const triggerCallback = useCallback(async () => {
         try {

web/src/layouts/LoginLayout.tsx

@@ -11,7 +11,7 @@ export interface Props {
     showBrand?: boolean;
 }
 
-export default function (props: Props) {
+const LoginLayout = function (props: Props) {
     const style = useStyles();
     return (
         <Grid
@@ -50,6 +50,8 @@ export default function (props: Props) {
     );
 }
 
+export default LoginLayout
+
 const useStyles = makeStyles(theme => ({
     root: {
         minHeight: '90vh',

web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx

@@ -14,7 +14,7 @@ import { red } from "@material-ui/core/colors";
 import { extractIdentityToken } from "../../utils/IdentityToken";
 import { FirstFactorRoute } from "../../Routes";
 
-export default function () {
+const RegisterOneTimePassword = function () {
     const style = useStyles();
     const history = useHistory();
     const location = useLocation();
@@ -94,6 +94,8 @@ export default function () {
     )
 }
 
+export default RegisterOneTimePassword
+
 const useStyles = makeStyles(theme => ({
     root: {
         paddingTop: theme.spacing(4),

web/src/views/DeviceRegistration/RegisterSecurityKey.tsx

@@ -9,7 +9,7 @@ import { completeU2FRegistrationProcessStep1, completeU2FRegistrationProcessStep
 import { useNotifications } from "../../hooks/NotificationsContext";
 import u2fApi from "u2f-api";
 
-export default function () {
+const RegisterSecurityKey = function () {
     const style = useStyles();
     const history = useHistory();
     const location = useLocation();
@@ -66,6 +66,8 @@ export default function () {
     )
 }
 
+export default RegisterSecurityKey
+
 const useStyles = makeStyles(theme => ({
     icon: {
         paddingTop: theme.spacing(4),

web/src/views/LoadingPage/LoadingPage.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import ReactLoading from "react-loading";
 import { Typography, Grid } from "@material-ui/core";
 
-export default function () {
+const LoadingPage = function () {
     return (
         <Grid container alignItems="center" justify="center" style={{ minHeight: "100vh" }}>
             <Grid item style={{ textAlign: "center", display: "inline-block" }}>
@@ -11,4 +11,6 @@ export default function () {
             </Grid>
         </Grid>
     );
-}
+}
+
+export default LoadingPage

web/src/views/LoginPortal/Authenticated.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import SuccessIcon from "../../components/SuccessIcon";
 import { Typography, makeStyles } from "@material-ui/core";
 
-export default function () {
+const Authenticated = function () {
     const classes = useStyles();
     return (
         <div id="authenticated-stage">
@@ -14,6 +14,8 @@ export default function () {
     )
 }
 
+export default Authenticated
+
 const useStyles = makeStyles(theme => ({
     iconContainer: {
         marginBottom: theme.spacing(2),

web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx

@@ -9,7 +9,7 @@ export interface Props {
     name: string;
 }
 
-export default function (props: Props) {
+const AuthenticatedView = function (props: Props) {
     const style = useStyles();
     const history = useHistory();
 
@@ -36,6 +36,8 @@ export default function (props: Props) {
     )
 }
 
+export default AuthenticatedView
+
 const useStyles = makeStyles(theme => ({
     mainContainer: {
         border: "1px solid #d6d6d6",

web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx

@@ -19,7 +19,7 @@ export interface Props {
     onAuthenticationSuccess: (redirectURL: string | undefined) => void;
 }
 
-export default function (props: Props) {
+const FirstFactorForm = function (props: Props) {
     const style = useStyles();
     const history = useHistory();
     const redirectionURL = useRedirectionURL();
@@ -187,6 +187,8 @@ export default function (props: Props) {
     )
 }
 
+export default FirstFactorForm
+
 const useStyles = makeStyles(theme => ({
     root: {
         marginTop: theme.spacing(),

web/src/views/LoginPortal/LoginPortal.tsx

@@ -21,7 +21,7 @@ export interface Props {
     resetPassword: boolean;
 }
 
-export default function (props: Props) {
+const LoginPortal = function (props: Props) {
     const history = useHistory();
     const location = useLocation();
     const redirectionURL = useRedirectionURL();
@@ -144,6 +144,8 @@ export default function (props: Props) {
     )
 }
 
+export default LoginPortal
+
 interface ComponentOrLoadingProps {
     ready: boolean;
 

web/src/views/LoginPortal/SecondFactor/IconWithContext.tsx

@@ -9,7 +9,7 @@ interface IconWithContextProps {
     className?: string;
 }
 
-export default function (props: IconWithContextProps) {
+const IconWithContext = function (props: IconWithContextProps) {
     const iconSize = 64;
     const style = makeStyles(theme => ({
         root: {},
@@ -39,4 +39,6 @@ export default function (props: IconWithContextProps) {
             </div>
         </div>
     )
-}
+}
+
+export default IconWithContext

web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx

@@ -20,7 +20,7 @@ export interface Props {
     onRegisterClick?: () => void;
 }
 
-export default function (props: Props) {
+const DefaultMethodContainer = function (props: Props) {
     const style = useStyles();
 
     let container: ReactNode;
@@ -62,6 +62,8 @@ export default function (props: Props) {
     )
 }
 
+export default DefaultMethodContainer
+
 const useStyles = makeStyles(theme => ({
     container: {
         height: "200px",

web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx

@@ -14,7 +14,7 @@ export interface Props {
     onClick: (method: SecondFactorMethod) => void;
 }
 
-export default function (props: Props) {
+const MethodSelectionDialog = function (props: Props) {
     const style = useStyles();
     const theme = useTheme();
 
@@ -60,6 +60,8 @@ export default function (props: Props) {
     )
 }
 
+export default MethodSelectionDialog
+
 const useStyles = makeStyles(theme => ({
     root: {
         textAlign: "center",

web/src/views/LoginPortal/SecondFactor/OTPDial.tsx

@@ -15,7 +15,7 @@ export interface Props {
     onChange: (passcode: string) => void;
 }
 
-export default function (props: Props) {
+const OTPDial = function (props: Props) {
     const style = useStyles();
     const dial = (
         <span className={style.otpInput} id="otp-input">
@@ -37,6 +37,8 @@ export default function (props: Props) {
     )
 }
 
+export default OTPDial
+
 const useStyles = makeStyles(theme => ({
     timeProgress: {
     },

web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx

@@ -23,7 +23,7 @@ export interface Props {
     onSignInSuccess: (redirectURL: string | undefined) => void;
 }
 
-export default function (props: Props) {
+const OneTimePasswordMethod = function (props: Props) {
     const [passcode, setPasscode] = useState("");
     const [state, setState] = useState(props.authenticationLevel === AuthenticationLevel.TwoFactor
         ? State.Success
@@ -31,8 +31,8 @@ export default function (props: Props) {
     const redirectionURL = useRedirectionURL();
 
     const { onSignInSuccess, onSignInError } = props;
-    const onSignInErrorCallback = useCallback(onSignInError, []);
-    const onSignInSuccessCallback = useCallback(onSignInSuccess, []);
+    const onSignInErrorCallback = useCallback(onSignInError, [onSignInError]);
+    const onSignInSuccessCallback = useCallback(onSignInSuccess, [onSignInSuccess]);
 
     const signInFunc = useCallback(async () => {
         if (props.authenticationLevel === AuthenticationLevel.TwoFactor) {
@@ -88,4 +88,6 @@ export default function (props: Props) {
                 period={props.totp_period} />
         </MethodContainer>
     )
-}
+}
+
+export default OneTimePasswordMethod

web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx

@@ -23,15 +23,15 @@ export interface Props {
     onSignInSuccess: (redirectURL: string | undefined) => void;
 }
 
-export default function (props: Props) {
+const PushNotificationMethod = function (props: Props) {
     const style = useStyles();
     const [state, setState] = useState(State.SignInInProgress);
     const redirectionURL = useRedirectionURL();
     const mounted = useIsMountedRef();
 
     const { onSignInSuccess, onSignInError } = props;
-    const onSignInErrorCallback = useCallback(onSignInError, []);
-    const onSignInSuccessCallback = useCallback(onSignInSuccess, []);
+    const onSignInErrorCallback = useCallback(onSignInError, [onSignInError]);
+    const onSignInSuccessCallback = useCallback(onSignInSuccess, [onSignInSuccess]);
 
     const signInFunc = useCallback(async () => {
         if (props.authenticationLevel === AuthenticationLevel.TwoFactor) {
@@ -103,6 +103,8 @@ export default function (props: Props) {
     )
 }
 
+export default PushNotificationMethod
+
 const useStyles = makeStyles(theme => ({
     icon: {
         width: "64px",

web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx

@@ -34,7 +34,7 @@ export interface Props {
     onAuthenticationSuccess: (redirectURL: string | undefined) => void;
 }
 
-export default function (props: Props) {
+const SecondFactorForm = function (props: Props) {
     const style = useStyles();
     const history = useHistory();
     const [methodSelectionOpen, setMethodSelectionOpen] = useState(false);
@@ -146,6 +146,8 @@ export default function (props: Props) {
     )
 }
 
+export default SecondFactorForm
+
 const useStyles = makeStyles(theme => ({
     methodContainer: {
         border: "1px solid #d6d6d6",

web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx

@@ -29,7 +29,7 @@ export interface Props {
     onSignInSuccess: (redirectURL: string | undefined) => void;
 }
 
-export default function (props: Props) {
+const SecurityKeyMethod = function (props: Props) {
     const signInTimeout = 30;
     const [state, setState] = useState(State.WaitTouch);
     const style = useStyles();
@@ -38,8 +38,8 @@ export default function (props: Props) {
     const [timerPercent, triggerTimer,] = useTimer(signInTimeout * 1000 - 500);
 
     const { onSignInSuccess, onSignInError } = props;
-    const onSignInErrorCallback = useCallback(onSignInError, []);
-    const onSignInSuccessCallback = useCallback(onSignInSuccess, []);
+    const onSignInErrorCallback = useCallback(onSignInError, [onSignInError]);
+    const onSignInSuccessCallback = useCallback(onSignInSuccess, [onSignInSuccess]);
 
     const doInitiateSignIn = useCallback(async () => {
         // If user is already authenticated, we don't initiate sign in process.
@@ -102,6 +102,8 @@ export default function (props: Props) {
     )
 }
 
+export default SecurityKeyMethod
+
 const useStyles = makeStyles(theme => ({
     icon: {
         display: "inline-block",

web/src/views/LoginPortal/SignOut/SignOut.tsx

@@ -10,7 +10,7 @@ import { useIsMountedRef } from "../../../hooks/Mounted";
 
 export interface Props { }
 
-export default function (props: Props) {
+const SignOut = function (props: Props) {
     const mounted = useIsMountedRef();
     const style = useStyles();
     const { createErrorNotification } = useNotifications();
@@ -52,6 +52,8 @@ export default function (props: Props) {
     )
 }
 
+export default SignOut
+
 const useStyles = makeStyles(theme => ({
     typo: {
         padding: theme.spacing(),

web/src/views/ResetPassword/ResetPasswordStep1.tsx

@@ -7,7 +7,7 @@ import { initiateResetPasswordProcess } from "../../services/ResetPassword";
 import { FirstFactorRoute } from "../../Routes";
 import FixedTextField from "../../components/FixedTextField";
 
-export default function () {
+const ResetPasswordStep1 = function () {
     const style = useStyles();
     const [username, setUsername] = useState("");
     const [error, setError] = useState(false);
@@ -76,6 +76,8 @@ export default function () {
     )
 }
 
+export default ResetPasswordStep1
+
 const useStyles = makeStyles(theme => ({
     root: {
         marginTop: theme.spacing(2),

web/src/views/ResetPassword/ResetPasswordStep2.tsx

@@ -9,7 +9,7 @@ import { FirstFactorRoute } from "../../Routes";
 import { extractIdentityToken } from "../../utils/IdentityToken";
 import FixedTextField from "../../components/FixedTextField";
 
-export default function () {
+const ResetPasswordStep2 = function () {
     const style = useStyles();
     const location = useLocation();
     const [formDisabled, setFormDisabled] = useState(true);
@@ -137,6 +137,8 @@ export default function () {
     )
 }
 
+export default ResetPasswordStep2
+
 const useStyles = makeStyles(theme => ({
     root: {
         marginTop: theme.spacing(2),

web/tsconfig.json

@@ -17,10 +17,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src",
     "types"
   ]
-}
+}